:root {
    --bg: #f6f7f4;
    --panel: #ffffff;
    --ink: #182026;
    --muted: #69747c;
    --line: #dde3df;
    --teal: #0f8f83;
    --teal-dark: #076c64;
    --blue: #234f7a;
    --gold: #c48b2c;
    --red: #b94040;
    --shadow: 0 18px 45px rgba(20, 35, 45, .08);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: linear-gradient(135deg, #f7f8f4 0%, #eef5f2 54%, #f6f2ea 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
code {
    display: inline-block;
    max-width: 100%;
    padding: 4px 7px;
    overflow-wrap: anywhere;
    color: #123a48;
    background: #edf6f4;
    border: 1px solid #cfe2df;
    border-radius: 6px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 14px clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid rgba(205, 214, 210, .8);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.brand span {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: conic-gradient(from 160deg, var(--teal), var(--blue), var(--gold), var(--teal));
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.55);
}
.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.nav a {
    padding: 8px 11px;
    color: var(--muted);
    border-radius: 7px;
}
.nav a:hover { color: var(--ink); background: #eef4f1; }

.page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 56px;
}
.footer {
    padding: 28px 16px 44px;
    color: var(--muted);
    text-align: center;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: 26px;
    align-items: stretch;
    min-height: calc(100vh - 190px);
}
.intro-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 430px;
    padding: clamp(28px, 5vw, 64px);
    color: white;
    background:
        linear-gradient(rgba(14, 52, 57, .72), rgba(14, 52, 57, .56)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='620' viewBox='0 0 900 620'%3E%3Crect width='900' height='620' fill='%23234f7a'/%3E%3Cg fill='none' stroke='%23f6d48d' stroke-opacity='.28'%3E%3Cpath d='M0 120h900M0 260h900M0 400h900M0 540h900M130 0v620M320 0v620M510 0v620M700 0v620'/%3E%3C/g%3E%3Cg fill='%230f8f83' fill-opacity='.35'%3E%3Crect x='90' y='90' width='190' height='108' rx='8'/%3E%3Crect x='520' y='145' width='235' height='132' rx='8'/%3E%3Crect x='245' y='360' width='290' height='150' rx='8'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.76'%3E%3Crect x='126' y='132' width='118' height='12' rx='6'/%3E%3Crect x='562' y='197' width='144' height='12' rx='6'/%3E%3Crect x='300' y='420' width='178' height='12' rx='6'/%3E%3C/g%3E%3C/svg%3E") center/cover;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.intro-panel h1 {
    margin: 12px 0 14px;
    max-width: 680px;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: 0;
}
.intro-panel p { max-width: 600px; line-height: 1.8; }
.eyebrow {
    margin: 0 0 8px;
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
.intro-panel .eyebrow { color: #ffe1a2; }
.notice-strip {
    width: fit-content;
    max-width: 100%;
    margin-top: 20px;
    padding: 10px 12px;
    color: #15343a;
    background: rgba(255,255,255,.84);
    border-radius: 8px;
}
.auth-grid { display: grid; gap: 18px; align-content: center; }

.panel {
    padding: 22px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.panel h2 {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.25;
}
.form { display: grid; gap: 14px; }
label {
    display: grid;
    gap: 7px;
    color: #314047;
    font-size: 14px;
    font-weight: 700;
}
input, select, textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    color: var(--ink);
    background: #fbfcfb;
    border: 1px solid #ccd6d2;
    border-radius: 7px;
    font: inherit;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(15, 143, 131, .2);
    border-color: var(--teal);
}

.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    color: #12343a;
    font-weight: 800;
    border: 1px solid #b9d6d1;
    border-radius: 7px;
    background: #eaf6f3;
    cursor: pointer;
}
.btn.primary {
    color: white;
    background: var(--teal);
    border-color: var(--teal);
}
.btn:hover { filter: brightness(.98); transform: translateY(-1px); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.6; }
.alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #eaf6f3;
    border: 1px solid #bddbd6;
}
.alert.error { background: #fff0ef; border-color: #efc2bd; color: #8a2e2e; }
.flash-modal.alert {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 18px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.flash-modal[hidden] { display: none !important; }
.flash-modal-shade {
    position: absolute;
    inset: 0;
    padding: 0;
    background: rgba(10, 20, 28, .54);
    border: 0;
    cursor: pointer;
}
.flash-modal-panel {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    padding: 26px 24px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(10, 20, 28, .32);
    animation: flash-modal-in .18s ease-out;
}
.flash-modal.closing .flash-modal-panel { animation: flash-modal-out .14s ease-in forwards; }
.flash-modal-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    color: #fff;
    background: var(--teal);
    border-radius: 50%;
    font-weight: 900;
}
.flash-modal.error .flash-modal-icon { background: var(--red); }
.flash-modal-panel h2 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.25;
}
.flash-modal-panel p {
    margin: 0;
    color: #3d4a51;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.flash-modal-confirm {
    min-width: 120px;
    min-height: 42px;
    margin-top: 20px;
    padding: 10px 18px;
    color: #fff;
    background: var(--teal);
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}
.flash-modal.error .flash-modal-confirm { background: var(--red); }
.flash-modal-confirm:focus-visible { outline: 3px solid rgba(15, 143, 131, .26); outline-offset: 3px; }
@keyframes flash-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes flash-modal-out {
    to { opacity: 0; transform: translateY(8px) scale(.98); }
}

.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.dashboard-head h1 { margin: 0; font-size: 32px; line-height: 1.15; }
.balance-card {
    min-width: 210px;
    padding: 18px 20px;
    color: white;
    background: linear-gradient(135deg, #163b54, #0f8f83);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.balance-card span { display: block; opacity: .86; font-size: 13px; }
.balance-card strong { display: block; margin-top: 6px; font-size: 30px; line-height: 1; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.stats div {
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.stats span { color: var(--muted); font-size: 13px; }
.stats strong { display: block; margin-top: 6px; font-size: 28px; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
th, td {
    padding: 11px 10px;
    border-bottom: 1px solid #e6ebe8;
    text-align: left;
    vertical-align: top;
}
th { color: #53616a; font-size: 12px; text-transform: uppercase; background: #f7faf8; }
td { overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
.tag {
    display: inline-flex;
    min-width: 58px;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    color: #445059;
    background: #edf1ee;
    font-size: 12px;
    font-weight: 800;
}
.tag.active, .tag.unused, .tag.approved { color: #076c64; background: #e4f5f1; }
.tag.pending { color: #85611e; background: #fff4d9; }
.tag.disabled, .tag.used, .tag.rejected { color: #9d3636; background: #fff0ef; }
.inline { display: inline; }
.link-btn {
    padding: 0;
    color: var(--teal-dark);
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.link-btn.danger { color: var(--red); }
.task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    min-width: 96px;
}
.task-actions form { margin: 0; }
.action-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}
.action-row input { min-height: 34px; padding: 7px 9px; }
.invite-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}
.invite-box h2 { margin-bottom: 8px; }

@media (max-width: 860px) {
    .topbar, .dashboard-head, .invite-box { align-items: flex-start; flex-direction: column; }
    .login-shell, .grid.two, .stats, .invite-box { grid-template-columns: 1fr; }
    .intro-panel { min-height: 320px; }
    .intro-panel h1 { font-size: 34px; }
    .balance-card { width: 100%; }
    .page { width: min(100% - 22px, 1180px); padding-top: 22px; }
    .panel { padding: 18px; }
    table { min-width: 620px; }
    .panel:not(.form) { overflow-x: auto; }
}

@media (max-width: 520px) {
    .topbar { min-height: auto; padding: 12px; }
    .nav { justify-content: flex-start; }
    .intro-panel { padding: 24px; }
    .intro-panel h1 { font-size: 29px; }
    .dashboard-head h1 { font-size: 27px; }
    .action-row { grid-template-columns: 1fr; }
}

/* Step modification workspace */
.area-steps {
    background: linear-gradient(135deg, #6878dc 0%, #7562bf 50%, #7d58a8 100%);
}
.area-steps .topbar {
    background: rgba(255,255,255,.86);
}
.area-steps .page {
    width: min(820px, calc(100% - 28px));
    padding-top: 22px;
}
.area-steps .footer { color: rgba(255,255,255,.82); }
.step-shell {
    display: grid;
    gap: 18px;
}
.mode-card {
    padding: 28px 24px;
    color: #f4fff7;
    background: linear-gradient(135deg, #45d77c, #21c462);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(28, 47, 86, .2);
}
.mode-card h1 {
    margin: 0 0 6px;
    color: #064ab3;
    font-size: 28px;
    line-height: 1.15;
}
.mode-card .html-content { color: #f4fff7; font-weight: 800; line-height: 1.65; }
.mode-card .html-content p { margin: 12px 0 0; }
.mode-card .html-content strong { color: #fff; font-weight: 950; }
.mode-card p {
    margin: 12px 0 0;
    font-weight: 800;
    line-height: 1.65;
}
.top-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(610px, 100%);
    margin: 0 auto;
}
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    color: #fff;
    font-weight: 900;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(30,45,90,.16);
}
.pill.yellow { background: linear-gradient(135deg, #ffcf22, #f6ab00); }
.pill.red { background: linear-gradient(135deg, #ff4a48, #e93232); }
.pill.blue { background: linear-gradient(135deg, #438cff, #226be8); }
.mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    background: rgba(244, 255, 255, .94);
    border-radius: 12px;
    box-shadow: 0 20px 46px rgba(32, 36, 76, .22);
}
.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 9px 12px;
    color: #64696d;
    background: #f7f8f8;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(210, 221, 224, .72);
}
.tab.active { color: #fff; background: linear-gradient(135deg, #20c967, #10a64f); }
.tab.cyan { color: #fff; background: linear-gradient(135deg, #1979dd, #108b8a); box-shadow: none; }
.tab.orange { color: #fff; background: linear-gradient(135deg, #ffc129, #f29a00); box-shadow: none; }
.tab.green-soft { color: #2d7450; background: #91ea91; box-shadow: none; }
.step-panel {
    display: grid;
    gap: 15px;
    margin-top: 2px;
    padding: 30px 28px 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 58px rgba(24, 30, 58, .22);
}
.step-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.step-panel h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
}
.mini-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
.mini-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 13px;
    color: #fff;
    background: #377df4;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
}
.mini-actions a.green { background: #22b956; }
.activation-note {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: #f1f1f1;
    border-radius: 5px;
    font-weight: 900;
}
.activation-note a { color: #001dff; text-decoration: underline; }
.step-panel label {
    color: #4d555d;
    font-size: 14px;
    font-weight: 800;
}
.step-panel input {
    min-height: 46px;
    background: #fbfcff;
    border-color: #d6deed;
}
.limit-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-left: 10px;
    padding: 6px 10px;
    color: #fff;
    background: #ff7b19;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 900;
    vertical-align: middle;
}
.submit-steps {
    min-height: 52px;
    margin-top: 12px;
    color: white;
    background: linear-gradient(135deg, #25cf64, #13a84c);
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}
.account-tools {
    margin-top: 18px;
}

@media (max-width: 760px) {
    .area-steps .page { width: min(100% - 18px, 820px); }
    .top-actions, .mode-tabs { grid-template-columns: 1fr; }
    .step-panel { padding: 22px 18px 10px; }
    .step-panel-head { align-items: flex-start; flex-direction: column; }
    .mini-actions { justify-content: flex-start; }
    .mode-card { padding: 22px 18px; }
    .mode-card h1 { font-size: 24px; }
    .mode-card p { font-size: 13px; }
}

/* Structured app layout */
.area-admin, .area-agent, .area-user { background: #f4f7f6; }
.area-admin .page, .area-agent .page, .area-user .page { width: min(1220px, calc(100% - 32px)); }
.area-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 8px;
    background: rgba(255,255,255,.84);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.area-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    color: #56636b;
    font-weight: 900;
    border-radius: 7px;
}
.area-tabs a.active { color: #fff; background: var(--teal); }
.area-tabs a:hover:not(.active) { color: var(--ink); background: #eef5f2; }
.module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.module-tile {
    min-height: 116px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.module-tile strong { font-size: 19px; }
.module-tile span { color: var(--muted); line-height: 1.55; }
.module-tile:hover { transform: translateY(-2px); border-color: #b8d8d3; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.settings-form h2 { margin-top: 10px; }
.settings-form h2:first-of-type { margin-top: 0; }
.area-admin .balance-card { background: linear-gradient(135deg, #234f7a, #0f8f83); }
.area-agent .balance-card { background: linear-gradient(135deg, #285f57, #c48b2c); }

.area-agent {
    background: #f4f6f5;
}
.area-agent .topbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e7e5;
}
.area-agent .area-tabs {
    margin-inline: calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    background: #23c765;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.area-agent .area-tabs a {
    min-height: 44px;
    color: #fff;
    border-radius: 0;
}
.area-agent .area-tabs a.active,
.area-agent .area-tabs a:hover:not(.active) {
    color: #fff;
    background: rgba(255,255,255,.22);
}
.agent-card-workbench {
    width: min(1000px, 100%);
    margin: 24px auto 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e8e6;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(28, 45, 55, .09);
}
.agent-price-card {
    padding: 18px;
    background: #fff;
    border: 1px solid #edf1ef;
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(21, 41, 50, .08);
}
.agent-price-card h1 {
    margin: 0 0 16px;
    color: #15bf52;
    font-size: 23px;
    line-height: 1.25;
    text-align: center;
}
.agent-price-table-wrap,
.agent-card-list .table-scroll {
    overflow-x: auto;
}
.agent-price-table,
.agent-card-list table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}
.agent-price-table th,
.agent-price-table td,
.agent-card-list th,
.agent-card-list td {
    height: 40px;
    padding: 9px 12px;
    border: 1px solid #dfe5e2;
    text-align: center;
    white-space: nowrap;
}
.agent-price-table th,
.agent-card-list th {
    background: #f7f8f8;
    color: #12242c;
    font-weight: 900;
}
.agent-generate-card {
    padding: 22px 0 28px;
    border-bottom: 1px solid #dfe5e2;
}
.agent-generate-card h2,
.agent-card-list h2 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.25;
}
.agent-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.agent-form-grid label,
.agent-card-filter label {
    display: grid;
    gap: 6px;
    color: #172b33;
    font-size: 13px;
    font-weight: 800;
}
.agent-form-grid select,
.agent-form-grid input,
.agent-card-filter select,
.agent-card-filter input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #d8dfdc;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}
.agent-cost-note {
    margin: 14px 0 20px;
    color: #50616a;
    font-size: 13px;
}
.agent-cost-note strong {
    color: #0d76df;
}
.agent-generate-submit {
    min-width: 98px;
}
.agent-card-list {
    padding-top: 18px;
}
.agent-card-filter {
    display: grid;
    grid-template-columns: 230px 150px minmax(180px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 12px;
    background: #f3f4f3;
}
.agent-card-list .empty-cell {
    height: 54px;
    color: #8b98a0;
}
.agent-default-level-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding: 14px;
    background: #f4faf7;
    border: 1px solid #d9eee5;
    border-radius: 8px;
}
.agent-default-level-form label {
    display: grid;
    gap: 7px;
    color: #22353d;
    font-weight: 900;
}

@media (max-width: 760px) {
    .agent-form-grid,
    .agent-card-filter,
    .agent-default-level-form {
        grid-template-columns: 1fr;
    }
    .agent-card-workbench {
        margin-top: 14px;
        padding: 12px;
    }
}

@media (max-width: 900px) {
    .module-grid, .stats, .form-grid { grid-template-columns: 1fr; }
    .area-admin .page, .area-agent .page, .area-user .page { width: min(100% - 22px, 1220px); }
}

/* Public home and login */
.area-home { color: #fff; background: linear-gradient(135deg, #596fd8 0%, #6f55b7 56%, #3b8f87 100%); }
.area-home .topbar { width: min(1040px, calc(100% - 48px)); margin: 16px auto 0; color: #fff; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; box-shadow: 0 22px 70px rgba(27, 23, 82, .2); }
.area-home .brand { color: #fff; }
.area-home .brand span { box-shadow: inset 0 0 0 3px rgba(255,255,255,.46); }
.area-home .nav a { color: rgba(255,255,255,.94); background: rgba(255,255,255,.1); }
.area-home .nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
.area-home .page { width: min(1040px, calc(100% - 48px)); padding: 28px 0 44px; }
.area-home .footer { color: rgba(255,255,255,.82); }
.home-hero { min-height: calc(100vh - 144px); display: flex; align-items: flex-start; justify-content: center; text-align: center; }
.home-wrap { width: min(780px, 100%); }
.home-kicker { margin: 0 0 10px; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 950; }
.home-hero h1 { margin: 0 0 14px; color: #fff; font-size: 42px; line-height: 1.08; letter-spacing: 0; }
.home-subtitle { width: min(680px, 100%); margin: 0 auto 22px; color: rgba(255,255,255,.9); font-size: 16px; font-weight: 850; line-height: 1.85; }
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 18px; }
.runtime-card { margin: 0 auto 20px; color: rgba(8,13,25,.92); font-size: 16px; font-weight: 950; }
.runtime-card strong { color: #0a1020; }
.enter-btn, .home-ghost-btn { min-width: 132px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 8px; font-weight: 900; }
.enter-btn { color: #fff; background: linear-gradient(135deg, #ff7454, #ff553b); box-shadow: 0 16px 34px rgba(65,34,93,.24); }
.home-ghost-btn { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.home-preview { width: min(760px, 100%); margin: 0 auto 24px; padding: 16px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.72); border-radius: 8px; box-shadow: 0 28px 80px rgba(24, 25, 74, .28); text-align: left; }
.home-preview-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #dde5ef; color: #243044; font-weight: 950; }
.home-preview-head span { width: 12px; height: 12px; border-radius: 50%; background: #20c982; box-shadow: 18px 0 0 #ffbf24, 36px 0 0 #3d86ff; }
.home-preview-head strong { margin-left: 42px; }
.home-preview-head em { margin-left: auto; color: #15a174; font-style: normal; font-size: 12px; }
.home-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 0; }
.preview-tile { min-height: 82px; display: grid; align-content: center; gap: 6px; padding: 14px; border-radius: 8px; color: #fff; }
.preview-tile b { font-size: 15px; }
.preview-tile span { color: rgba(255,255,255,.88); font-size: 12px; font-weight: 800; }
.preview-tile.green { background: linear-gradient(135deg, #1fc069, #0f9f83); }
.preview-tile.blue { background: linear-gradient(135deg, #4388ff, #266ee8); }
.preview-tile.lime { background: linear-gradient(135deg, #7bdc82, #22b66f); }
.home-preview-log { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 10px 12px; color: #243044; background: #f4f7fb; border-radius: 8px; font-weight: 900; }
.home-preview-log span { width: 10px; height: 10px; border-radius: 50%; background: #ffbf24; }
.home-preview-log p { margin: 0; }
.feature-grid { width: min(760px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 auto 22px; }
.feature-card { min-height: 128px; display: grid; align-content: center; gap: 8px; padding: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; }
.feature-icon { font-size: 22px; }
.feature-card strong { font-size: 15px; }
.feature-card span { color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.6; }
.trust-card { width: min(760px, 100%); margin: 0 auto; padding: 20px; background: rgba(12,19,46,.22); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }
.trust-card h2 { margin: 0 0 18px; font-size: 14px; }
.trust-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.trust-stats strong { display: block; font-size: 24px; }
.trust-stats span { display: block; margin-top: 6px; color: rgba(255,255,255,.78); font-size: 11px; }
.trust-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust-tags span { padding: 7px 10px; color: #fff; background: rgba(255,255,255,.16); border-radius: 999px; font-size: 11px; font-weight: 800; }
.home-note { margin: 22px 0 0; color: rgba(255,255,255,.78); font-size: 12px; }
.area-login { background: linear-gradient(135deg, #f3f7f7 0%, #eef5f2 100%); }
.auth-page { display: grid; grid-template-columns: minmax(0, .9fr) minmax(330px, 520px); gap: 26px; align-items: start; padding-top: 26px; }
.auth-copy { min-height: 420px; display: flex; flex-direction: column; justify-content: center; padding: 38px; color: #fff; background: linear-gradient(135deg, #214f75, #13917f); border-radius: 8px; box-shadow: var(--shadow); }
.auth-copy h1 { margin: 0 0 16px; font-size: 34px; line-height: 1.15; }
.auth-copy p { line-height: 1.8; }
.auth-grid.clean { align-content: start; }
@media (max-width: 760px) {
    .area-home .topbar, .area-home .page { width: min(100% - 22px, 1040px); }
    .home-preview-grid, .feature-grid, .trust-stats, .auth-page { grid-template-columns: 1fr; }
    .home-hero h1, .auth-copy h1 { font-size: 29px; }
    .home-subtitle { font-size: 14px; }
    .home-preview-head { align-items: flex-start; flex-direction: column; }
    .home-preview-head strong { margin-left: 0; }
    .home-preview-head em { margin-left: 0; }
    .auth-copy { min-height: auto; padding: 26px; }
}

/* Guest login modal */
.guest-banner {
    padding: 12px 14px;
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    font-weight: 900;
    text-align: center;
}
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.login-modal.show { display: flex; }
.login-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 38, .58);
    backdrop-filter: blur(8px);
}
.login-modal-panel {
    position: relative;
    width: min(430px, 100%);
    padding: 26px;
    color: var(--ink);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(12, 18, 35, .32);
}
.login-modal-panel h2 { margin: 0 0 8px; font-size: 24px; }
.login-modal-panel p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }
.login-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    color: #5d6770;
    background: #f0f3f4;
    border: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.login-modal-panel .form .btn { width: 100%; }

/* Member activation and account pages */
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.button-row.wide .btn { flex: 1 1 180px; }
.query-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 10px 18px;
    color: #fff;
    background: linear-gradient(135deg, #2d82ff, #1764db);
    border-radius: 8px;
    font-weight: 900;
}
.account-summary-card, .activate-hero, .help-hero {
    background: linear-gradient(135deg, #42d978 0%, #24c467 46%, #19a9a4 100%);
}
.account-status-panel { padding-bottom: 24px; }
.status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.status-grid div {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    background: #f8fbff;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
}
.status-grid span {
    color: #6a7480;
    font-size: 13px;
    font-weight: 900;
}
.status-grid strong {
    color: #172232;
    font-size: 19px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.support-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    color: #6a3d00;
    background: #fff0c2;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
}
.activate-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 2px 0 18px;
    padding: 4px;
    background: #eef5f2;
    border: 1px solid #d5e3df;
    border-radius: 8px;
}
.activate-switch button {
    min-width: 112px;
    min-height: 38px;
    padding: 8px 14px;
    color: #45636c;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}
.activate-switch button.active {
    color: #fff;
    background: linear-gradient(135deg, #0f8f83, #1568b3);
    box-shadow: 0 10px 24px rgba(15, 143, 131, .18);
}
.activate-pane { display: none; }
.activate-pane.active { display: grid; }
.card-activate-box {
    gap: 14px;
    margin-top: 0;
    padding: 18px;
    background: #fbfdff;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
}
.card-activate-box h3 { margin: 0; font-size: 19px; }
.card-activate-box .btn { width: fit-content; min-width: 132px; }
.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.plan-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    background: #fbfdff;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
}
.plan-card strong {
    color: #172232;
    font-size: 22px;
    line-height: 1.15;
}
.plan-price {
    color: #f05438;
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}
.plan-desc {
    color: #5d6874;
    font-size: 13px;
    font-weight: 800;
}
.pay-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.pay-btn {
    min-height: 40px;
    color: white;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}
.pay-btn.wx { background: linear-gradient(135deg, #20c767, #0fa64f); }
.pay-btn.ali { background: linear-gradient(135deg, #2f8cff, #1665df); }
.pay-btn.qq { background: linear-gradient(135deg, #7f62ff, #5a42d6); }
.payment-disabled {
    padding: 11px 12px;
    color: #85611e;
    background: #fff4d9;
    border: 1px solid #f1d99d;
    border-radius: 8px;
    font-weight: 900;
    text-align: center;
}
.help-panel { padding-bottom: 24px; }
.help-list {
    display: grid;
    gap: 12px;
}
.help-list div {
    display: grid;
    gap: 6px;
    padding: 16px;
    background: #f8fbff;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
}
.help-list strong { color: #172232; font-size: 16px; }
.help-list span { color: #5d6874; line-height: 1.65; }
.tag.paid { color: #0f6a46; background: #e4f8ee; }

@media (max-width: 760px) {
    .status-grid, .plan-grid, .pay-actions, .activate-switch { grid-template-columns: 1fr; }
    .button-row .submit-steps, .button-row .query-btn { width: 100%; }
    .support-badge { width: 100%; justify-content: center; }
}
/* Refined login layout */
.area-login {
    background:
        radial-gradient(circle at top left, rgba(23, 137, 138, .16), transparent 34%),
        linear-gradient(135deg, #f7fbfb 0%, #eef5f2 58%, #f8f3ed 100%);
}
.area-login .page {
    width: min(1060px, calc(100% - 32px));
    min-height: calc(100vh - 144px);
    display: grid;
    align-items: center;
    padding-top: 28px;
    padding-bottom: 42px;
}
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 28px;
    align-items: center;
}
.auth-visual {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 58px);
    color: white;
    background:
        linear-gradient(135deg, rgba(34, 73, 117, .96), rgba(17, 146, 128, .92)),
        linear-gradient(45deg, #214f75, #14947f);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(29, 62, 72, .18);
    overflow: hidden;
}
.auth-visual .eyebrow { color: #ffe2a1; }
.auth-visual h1 {
    margin: 6px 0 16px;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.05;
}
.auth-visual p {
    max-width: 560px;
    margin: 0;
    line-height: 1.85;
    font-weight: 750;
}
.auth-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 18px;
}
.auth-points span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    color: #15343a;
    background: rgba(255,255,255,.88);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}
.auth-card {
    padding: 26px;
    box-shadow: 0 24px 68px rgba(25, 43, 55, .12);
}
.auth-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 22px;
    padding: 6px;
    background: #edf4f2;
    border: 1px solid #dbe7e3;
    border-radius: 8px;
}
.auth-switch.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-switch a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #66737a;
    border-radius: 7px;
    font-weight: 900;
}
.auth-switch a.active {
    color: white;
    background: linear-gradient(135deg, #18a18f, #0f8f83);
    box-shadow: 0 8px 22px rgba(15, 143, 131, .22);
}
.auth-title h2 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.2;
}
.auth-title p {
    margin: 0 0 6px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 13px;
}
.auth-form { gap: 16px; }
.auth-form input { min-height: 48px; background: #fff; }
.auth-submit { width: 100%; min-height: 48px; }
.auth-foot {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
.auth-foot a {
    color: var(--teal-dark);
    font-weight: 900;
}
.auth-foot a:hover { text-decoration: underline; }

@media (max-width: 860px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { min-height: auto; padding: 28px; }
}

@media (max-width: 520px) {
    .area-login .page { width: min(100% - 22px, 1060px); padding-top: 18px; }
    .auth-card { padding: 20px; }
    .auth-visual h1 { font-size: 34px; }
}
/* QQ verification controls */
.code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 8px;
}
.code-btn {
    min-height: 48px;
    color: #fff;
    background: linear-gradient(135deg, #2e83ff, #1764db);
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.code-btn:disabled {
    cursor: not-allowed;
    opacity: .72;
}
.code-message {
    min-height: 18px;
    color: #0f6a46;
    font-size: 12px;
    font-weight: 800;
}
.code-message.error { color: #9d3636; }

@media (max-width: 520px) {
    .code-row { grid-template-columns: 1fr; }
}
/* Polished admin workspace */
.area-admin {
    background:
        radial-gradient(circle at 6% 0%, rgba(15, 143, 131, .12), transparent 28%),
        radial-gradient(circle at 96% 12%, rgba(196, 139, 44, .10), transparent 26%),
        #f3f7f6;
}
.area-admin .topbar {
    min-height: 70px;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #dce6e2;
    box-shadow: 0 10px 30px rgba(20, 35, 45, .05);
}
.area-admin .brand {
    color: #12242c;
    font-size: 18px;
}
.area-admin .brand span {
    background: linear-gradient(135deg, #1b8f89, #244f7d 52%, #c69b48);
}
.area-admin .nav a {
    min-height: 38px;
    padding: 8px 13px;
    color: #53616a;
    font-weight: 800;
}
.area-admin .nav a:hover {
    color: #0b3f45;
    background: #e9f4f1;
}
.area-admin .page {
    width: min(1380px, calc(100% - 44px));
    padding-top: 30px;
}
.area-admin .area-tabs {
    position: sticky;
    top: 78px;
    z-index: 4;
    gap: 7px;
    margin-bottom: 24px;
    padding: 9px;
    background: rgba(255,255,255,.92);
    border: 1px solid #d9e4df;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(26, 45, 55, .08);
    backdrop-filter: blur(14px);
}
.area-admin .area-tabs a {
    min-height: 43px;
    padding: 9px 17px;
    color: #42515b;
    background: transparent;
    border: 1px solid transparent;
}
.area-admin .area-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, #11998c, #0d796f);
    box-shadow: 0 10px 24px rgba(15, 143, 131, .20);
}
.area-admin .area-tabs a:hover:not(.active) {
    color: #12343a;
    background: #f1f7f5;
    border-color: #d9e9e4;
}
.area-admin .dashboard-head {
    min-height: 150px;
    align-items: center;
    margin-bottom: 20px;
    padding: 26px 28px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(22, 59, 84, .98), rgba(15, 143, 131, .92)),
        linear-gradient(90deg, #163b54, #0f8f83);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    box-shadow: 0 24px 68px rgba(22, 59, 84, .18);
    overflow: hidden;
}
.area-admin .dashboard-head .eyebrow {
    color: #ffdf9a;
    letter-spacing: 0;
}
.area-admin .dashboard-head h1 {
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
}
.area-admin .dashboard-head .btn {
    color: #14343b;
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.72);
    box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.area-admin .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.area-admin .stats div {
    position: relative;
    min-height: 126px;
    padding: 21px 22px;
    background: rgba(255,255,255,.96);
    border: 1px solid #dce6e2;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(20, 35, 45, .07);
    overflow: hidden;
}
.area-admin .stats div::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #0f8f83;
}
.area-admin .stats div:nth-child(2)::before { background: #234f7a; }
.area-admin .stats div:nth-child(3)::before { background: #c48b2c; }
.area-admin .stats div:nth-child(4)::before { background: #b94040; }
.area-admin .stats span {
    color: #596872;
    font-size: 13px;
    font-weight: 900;
}
.area-admin .stats strong {
    margin-top: 10px;
    color: #111a22;
    font-size: 36px;
    line-height: 1;
}
.area-admin .module-grid {
    gap: 16px;
    margin-bottom: 20px;
}
.area-admin .module-tile {
    position: relative;
    min-height: 136px;
    align-content: start;
    padding: 22px 22px 22px 24px;
    background: rgba(255,255,255,.96);
    border: 1px solid #dce6e2;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(20, 35, 45, .07);
    overflow: hidden;
}
.area-admin .module-tile::before {
    content: '';
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e4f6f2, #f7f0df);
    box-shadow: inset 0 0 0 1px rgba(15,143,131,.16);
}
.area-admin .module-tile::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 38px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0f8f83;
    box-shadow: 10px 10px 0 #234f7a, 0 20px 0 #c48b2c;
}
.area-admin .module-tile strong {
    color: #111a22;
    font-size: 21px;
    line-height: 1.25;
}
.area-admin .module-tile span {
    color: #5b6b75;
    font-size: 14px;
}
.area-admin .module-tile:hover {
    transform: translateY(-3px);
    border-color: #b7d8d2;
    box-shadow: 0 24px 62px rgba(20, 35, 45, .10);
}
.area-admin .panel {
    background: rgba(255,255,255,.96);
    border: 1px solid #dce6e2;
    border-radius: 8px;
    box-shadow: 0 20px 54px rgba(20, 35, 45, .08);
}
.area-admin .panel h2 {
    color: #111a22;
    font-size: 22px;
}
.area-admin table {
    font-size: 14px;
}
.area-admin th {
    padding: 13px 12px;
    color: #44545f;
    background: #f1f6f4;
    border-bottom-color: #dce6e2;
    text-transform: none;
}
.area-admin td {
    padding: 14px 12px;
    border-bottom-color: #edf2f0;
}
.area-admin tbody tr:hover td {
    background: #f8fbfa;
}
.area-admin code {
    color: #0c4850;
    background: #e8f6f2;
    border-color: #c8e3dd;
}
.area-admin .form-grid {
    gap: 16px;
}
.area-admin .settings-form {
    gap: 18px;
    padding: 26px;
}
.area-admin .settings-form h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 2px;
    padding: 14px 16px;
    color: #12343a;
    background: linear-gradient(135deg, #edf8f5, #fbf7ec);
    border: 1px solid #dce6e2;
    border-radius: 8px;
    font-size: 18px;
}
.area-admin .settings-form h2:first-of-type {
    margin-top: 0;
}
.area-admin label {
    color: #34444d;
}
.area-admin input,
.area-admin select,
.area-admin textarea {
    min-height: 46px;
    background: #fbfdfc;
    border-color: #cad8d3;
}
.area-admin input:focus,
.area-admin select:focus,
.area-admin textarea:focus {
    outline: 3px solid rgba(15, 143, 131, .14);
    border-color: #0f8f83;
}
.area-admin .btn,
.area-admin button.btn {
    border-color: #bdd8d3;
    background: #eef8f5;
}
.area-admin .btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #149f90, #0c7c72);
    border-color: #0c7c72;
    box-shadow: 0 12px 24px rgba(15, 143, 131, .18);
}
.area-admin .link-btn {
    color: #0b766d;
}
.area-admin .link-btn.danger {
    color: #b94040;
}
.area-admin .tag {
    border-radius: 6px;
}

@media (max-width: 980px) {
    .area-admin .stats,
    .area-admin .module-grid,
    .area-admin .form-grid,
    .area-admin .grid.two {
        grid-template-columns: 1fr;
    }
    .area-admin .area-tabs {
        position: static;
    }
}

@media (max-width: 560px) {
    .area-admin .page { width: min(100% - 22px, 1380px); }
    .area-admin .dashboard-head { padding: 22px; }
    .area-admin .stats strong { font-size: 32px; }
}
/* Polished agent workspace */
.area-agent {
    background:
        radial-gradient(circle at 8% 0%, rgba(196, 139, 44, .13), transparent 28%),
        radial-gradient(circle at 96% 14%, rgba(15, 143, 131, .12), transparent 28%),
        #f5f7f2;
}
.area-agent .topbar {
    min-height: 70px;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid #e3e1d8;
    box-shadow: 0 10px 28px rgba(44, 37, 24, .05);
}
.area-agent .brand {
    color: #19242a;
    font-size: 18px;
}
.area-agent .brand span {
    background: linear-gradient(135deg, #c48b2c, #0f8f83 58%, #234f7a);
}
.area-agent .nav a {
    min-height: 38px;
    padding: 8px 13px;
    color: #5e665d;
    font-weight: 800;
}
.area-agent .nav a:hover {
    color: #3f2e10;
    background: #f5efe3;
}
.area-agent .page {
    width: min(1280px, calc(100% - 44px));
    padding-top: 30px;
}
.area-agent .area-tabs {
    position: sticky;
    top: 78px;
    z-index: 4;
    gap: 7px;
    margin-bottom: 24px;
    padding: 9px;
    background: rgba(255,255,255,.92);
    border: 1px solid #e4e0d2;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(44, 37, 24, .08);
    backdrop-filter: blur(14px);
}
.area-agent .area-tabs a {
    min-height: 43px;
    padding: 9px 17px;
    color: #4d575d;
    border: 1px solid transparent;
}
.area-agent .area-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, #c49335, #9b6b18);
    box-shadow: 0 10px 24px rgba(196, 139, 44, .22);
}
.area-agent .area-tabs a:hover:not(.active) {
    color: #3f2e10;
    background: #fbf5e8;
    border-color: #eee0c4;
}
.area-agent .dashboard-head {
    min-height: 148px;
    align-items: center;
    margin-bottom: 20px;
    padding: 26px 28px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(40, 95, 87, .98), rgba(196, 139, 44, .92)),
        linear-gradient(90deg, #285f57, #c48b2c);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    box-shadow: 0 24px 68px rgba(74, 65, 33, .18);
    overflow: hidden;
}
.area-agent .dashboard-head .eyebrow {
    color: #fff1b8;
    letter-spacing: 0;
}
.area-agent .dashboard-head h1 {
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
}
.area-agent .balance-card {
    color: #183239;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
}
.area-agent .balance-card span { color: #5e665d; opacity: 1; }
.area-agent .balance-card strong { color: #12242c; }
.area-agent .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.area-agent .stats div {
    position: relative;
    min-height: 124px;
    padding: 21px 22px;
    background: rgba(255,255,255,.96);
    border: 1px solid #e4e0d2;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(44, 37, 24, .07);
    overflow: hidden;
}
.area-agent .stats div::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #c48b2c;
}
.area-agent .stats div:nth-child(2)::before { background: #0f8f83; }
.area-agent .stats div:nth-child(3)::before { background: #b94040; }
.area-agent .stats div:nth-child(4)::before { background: #234f7a; }
.area-agent .stats span {
    color: #62695e;
    font-size: 13px;
    font-weight: 900;
}
.area-agent .stats strong {
    margin-top: 10px;
    color: #111a22;
    font-size: 35px;
    line-height: 1;
}
.area-agent .invite-box {
    padding: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,239,.96));
    border: 1px solid #e4e0d2;
    border-radius: 8px;
    box-shadow: 0 20px 54px rgba(44, 37, 24, .08);
}
.area-agent .invite-box code {
    color: #15343a;
    background: #edf8f5;
    border-color: #cfe2df;
}
.area-agent .module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.area-agent .module-tile {
    position: relative;
    min-height: 136px;
    align-content: start;
    padding: 22px 22px 22px 24px;
    background: rgba(255,255,255,.96);
    border: 1px solid #e4e0d2;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(44, 37, 24, .07);
    overflow: hidden;
}
.area-agent .module-tile::before {
    content: '';
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff2d6, #e7f6f1);
    box-shadow: inset 0 0 0 1px rgba(196,139,44,.18);
}
.area-agent .module-tile::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 38px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #c48b2c;
    box-shadow: 12px 12px 0 #0f8f83;
}
.area-agent .module-tile strong {
    color: #111a22;
    font-size: 21px;
    line-height: 1.25;
}
.area-agent .module-tile span {
    color: #5f6b66;
    font-size: 14px;
}
.area-agent .module-tile:hover {
    transform: translateY(-3px);
    border-color: #dec789;
    box-shadow: 0 24px 62px rgba(44, 37, 24, .10);
}
.area-agent .panel {
    background: rgba(255,255,255,.96);
    border: 1px solid #e4e0d2;
    border-radius: 8px;
    box-shadow: 0 20px 54px rgba(44, 37, 24, .08);
}
.area-agent .panel h2 {
    color: #111a22;
    font-size: 22px;
}
.area-agent th {
    padding: 13px 12px;
    color: #4d575d;
    background: #f7f3ea;
    border-bottom-color: #e4e0d2;
    text-transform: none;
}
.area-agent td {
    padding: 14px 12px;
    border-bottom-color: #f0eee7;
}
.area-agent tbody tr:hover td {
    background: #fbf8f1;
}
.area-agent code {
    color: #14343b;
    background: #fff6df;
    border-color: #ead7a9;
}
.area-agent label {
    color: #3b4743;
}
.area-agent input,
.area-agent select,
.area-agent textarea {
    min-height: 46px;
    background: #fffdf8;
    border-color: #d8d3c2;
}
.area-agent input:focus,
.area-agent select:focus,
.area-agent textarea:focus {
    outline: 3px solid rgba(196, 139, 44, .15);
    border-color: #c48b2c;
}
.area-agent .btn,
.area-agent button.btn {
    border-color: #e0cf9d;
    background: #fff7e7;
}
.area-agent .btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #c49335, #9b6b18);
    border-color: #9b6b18;
    box-shadow: 0 12px 24px rgba(196, 139, 44, .18);
}
.area-agent .link-btn {
    color: #9b6b18;
}
.area-agent .link-btn.danger {
    color: #b94040;
}
.area-agent .tag {
    border-radius: 6px;
}

@media (max-width: 980px) {
    .area-agent .stats,
    .area-agent .module-grid,
    .area-agent .grid.two {
        grid-template-columns: 1fr;
    }
    .area-agent .area-tabs {
        position: static;
    }
}

@media (max-width: 560px) {
    .area-agent .page { width: min(100% - 22px, 1280px); }
    .area-agent .dashboard-head { padding: 22px; }
    .area-agent .stats strong { font-size: 32px; }
}
/* Harmonized step action buttons */
.step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}
.step-action {
    min-width: 128px;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 8px;
    font: inherit;
    font-weight: 950;
    border: 0;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(26, 34, 58, .12);
}
.step-action.primary {
    color: #fff;
    background: linear-gradient(135deg, #20c767, #0fa64f);
}
.step-action.secondary {
    color: #fff;
    background: linear-gradient(135deg, #2f8cff, #1665df);
}
.step-action:hover {
    transform: translateY(-1px);
    filter: brightness(.99);
}
.step-panel .button-row { display: none; }

@media (max-width: 520px) {
    .step-actions { display: grid; grid-template-columns: 1fr; }
    .step-action { width: 100%; }
}



/* Polished admin accounts */
.area-admin .account-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.area-admin .account-stats div {
    min-height: 104px;
    padding: 18px 19px;
    background: rgba(255,255,255,.96);
    border: 1px solid #dce6e2;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(20, 35, 45, .07);
}
.area-admin .account-stats span {
    color: #667780;
    font-size: 13px;
    font-weight: 900;
}
.area-admin .account-stats strong {
    display: block;
    margin-top: 9px;
    color: #111a22;
    font-size: 34px;
    line-height: 1;
}
.area-admin .account-tools {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr);
    gap: 18px;
    margin-bottom: 18px;
}
.area-admin .account-create,
.area-admin .account-guide,
.area-admin .account-filter-panel,
.area-admin .account-table-panel {
    padding: 24px;
}
.area-admin .account-panel-head,
.area-admin .account-table-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}
.area-admin .account-panel-head h2,
.area-admin .account-table-head h2 {
    margin: 0;
    color: #111a22;
    font-size: 22px;
}
.area-admin .account-guide p {
    margin: 0;
    color: #586870;
    line-height: 1.75;
}
.area-admin .guide-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.area-admin .guide-list span {
    padding: 7px 10px;
    color: #0d6b62;
    background: #e8f6f2;
    border: 1px solid #c8e3dd;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}
.area-admin .account-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 160px 160px auto auto;
    gap: 12px;
    align-items: end;
}
.area-admin .account-filter label {
    margin: 0;
}
.area-admin .account-table-head span {
    color: #6b7982;
    font-size: 13px;
    font-weight: 900;
}
.area-admin .account-table th,
.area-admin .account-table td {
    vertical-align: middle;
}
.area-admin .account-user {
    display: grid;
    gap: 4px;
}
.area-admin .account-user strong {
    color: #111a22;
    font-size: 15px;
}
.area-admin .account-user span {
    color: #7a8890;
    font-size: 12px;
    font-weight: 800;
}
.area-admin .role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 950;
}
.area-admin .role-stack { display: grid; gap: 6px; justify-items: start; }
.area-admin .agent-level-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    color: #6b4b08;
    background: #fff6d9;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 950;
}
.area-admin .role-admin { color: #7f4a0b; background: #fff0d7; }
.area-admin .role-agent { color: #0b6b63; background: #e4f6f2; }
.area-admin .role-user { color: #244f7a; background: #eaf1fb; }
.area-admin .account-edit-panel {
    margin-bottom: 18px;
    padding: 24px;
    border-color: #b9ded7;
    box-shadow: 0 22px 56px rgba(15, 143, 131, .10);
}
.area-admin .account-edit-form {
    display: grid;
    gap: 18px;
}
.area-admin .account-contact {
    display: grid;
    gap: 5px;
    min-width: 160px;
    color: #53636b;
    font-size: 13px;
    line-height: 1.35;
}
.area-admin .account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.area-admin .account-actions .link-btn {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
}
.area-admin .empty-cell {
    padding: 30px 12px;
    color: #7a8790;
    text-align: center;
    font-weight: 900;
}

@media (max-width: 980px) {
    .area-admin .account-stats,
    .area-admin .account-tools {
        grid-template-columns: 1fr 1fr;
    }
    .area-admin .account-filter {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .area-admin .account-stats,
    .area-admin .account-tools,
    .area-admin .account-filter {
        grid-template-columns: 1fr;
    }
    .area-admin .account-create,
    .area-admin .account-guide,
    .area-admin .account-filter-panel,
    .area-admin .account-table-panel {
        padding: 18px;
    }
    .area-admin .account-table-head,
    .area-admin .account-panel-head {
        flex-direction: column;
    }
}

/* Account management modals */
.area-admin .account-command-row {
    margin-bottom: 18px;
}
.area-admin .account-guide.compact {
    padding: 22px 24px;
}
.area-admin .account-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.area-admin .account-modal.show {
    display: flex;
}
.area-admin .account-modal-shade {
    position: absolute;
    inset: 0;
    background: rgba(12, 20, 28, .46);
    backdrop-filter: blur(8px);
}
.area-admin .account-modal-panel {
    position: relative;
    width: min(720px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    padding: 24px;
    color: #17242c;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 8px;
    box-shadow: 0 30px 90px rgba(9, 25, 36, .28);
}
.area-admin .account-modal-panel.wide {
    width: min(900px, 100%);
}
.area-admin .account-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #52636c;
    background: #eef5f3;
    border: 1px solid #dbe8e4;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.area-admin .account-modal-head {
    margin: 0 42px 18px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #e3ece8;
}
.area-admin .account-modal-head h2 {
    margin: 0;
    color: #111a22;
    font-size: 24px;
}
.area-admin .account-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.area-admin .account-modal-note {
    margin-top: 14px;
    padding: 11px 12px;
    color: #7f4a0b;
    background: #fff0d7;
    border: 1px solid #f1d4a5;
    border-radius: 8px;
    font-weight: 900;
}
.area-admin .account-table-panel {
    margin-top: 18px;
}
.area-admin .dashboard-head.account-head {
    gap: 16px;
}

@media (max-width: 620px) {
    .area-admin .account-modal {
        padding: 10px;
    }
    .area-admin .account-modal-panel,
    .area-admin .account-modal-panel.wide {
        padding: 20px;
    }
    .area-admin .account-modal-actions .btn {
        width: 100%;
    }
}
/* Segmented admin settings */
.area-admin .settings-workspace {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.area-admin .settings-menu {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 9px;
    padding: 12px;
    background: rgba(255,255,255,.94);
    border: 1px solid #dce6e2;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(20, 35, 45, .07);
}
.area-admin .settings-menu a {
    display: grid;
    gap: 4px;
    min-height: 64px;
    padding: 12px 13px;
    color: #52606b;
    background: #f8fbfa;
    border: 1px solid #edf2f0;
    border-radius: 8px;
}
.area-admin .settings-menu a strong {
    color: #17242c;
    font-size: 15px;
    line-height: 1.25;
}
.area-admin .settings-menu a span {
    color: #718089;
    font-size: 12px;
    line-height: 1.45;
}
.area-admin .settings-menu a.active {
    color: #fff;
    background: linear-gradient(135deg, #0f8f83, #234f7a);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(15, 143, 131, .18);
}
.area-admin .settings-menu a.active strong,
.area-admin .settings-menu a.active span { color: #fff; }
.area-admin .settings-menu a:hover:not(.active) {
    transform: translateY(-1px);
    background: #eef7f5;
    border-color: #d3e8e4;
}
.area-admin .settings-section-form {
    min-height: 520px;
}
.area-admin .settings-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7eeeb;
}
.area-admin .settings-section-head h2 {
    margin: 0 0 6px;
    color: #111a22;
    font-size: 25px;
}
.area-admin .settings-section-head p:last-child {
    margin: 0;
    color: #68767e;
    line-height: 1.6;
}
.area-admin .settings-tip {
    margin-top: 14px;
    padding: 13px 14px;
    color: #45605c;
    background: #eef8f5;
    border: 1px solid #d6ebe6;
    border-radius: 8px;
    line-height: 1.65;
}
.area-admin .settings-save-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

@media (max-width: 980px) {
    .area-admin .settings-workspace {
        grid-template-columns: 1fr;
    }
    .area-admin .settings-menu {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .area-admin .settings-menu {
        display: flex;
        overflow-x: auto;
        padding: 10px;
        scroll-snap-type: x proximity;
    }
    .area-admin .settings-menu a {
        min-width: 172px;
        scroll-snap-align: start;
    }
    .area-admin .settings-section-head {
        flex-direction: column;
    }
    .area-admin .settings-section-head .btn {
        width: 100%;
    }
}
/* Refined steps topbar */
.area-steps .topbar {
    width: min(860px, calc(100% - 18px));
    min-height: 64px;
    margin: 10px auto 0;
    padding: 10px 12px;
    gap: 14px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.62);
    border-bottom-color: rgba(255,255,255,.62);
    border-radius: 8px;
    box-shadow: 0 16px 44px rgba(28, 35, 82, .16);
    backdrop-filter: blur(16px);
}
.area-steps .brand {
    gap: 11px;
    color: #19223c;
    font-size: 19px;
    font-weight: 950;
}
.area-steps .brand span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1ba986, #244f7d 54%, #d29c31);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.58), 0 8px 18px rgba(37, 62, 115, .18);
}
.area-steps .nav {
    gap: 7px;
}
.area-steps .nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    color: #5e667b;
    font-size: 14px;
    font-weight: 850;
    background: rgba(255,255,255,.42);
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 8px;
}
.area-steps .nav a:hover {
    color: #17213a;
    background: rgba(255,255,255,.78);
    border-color: rgba(255,255,255,.74);
    box-shadow: 0 8px 20px rgba(28, 35, 82, .09);
}

@media (max-width: 560px) {
    .area-steps .topbar {
        align-items: stretch;
        flex-direction: column;
        width: min(100% - 16px, 860px);
        padding: 10px;
        gap: 9px;
    }
    .area-steps .brand {
        min-height: 38px;
        font-size: 18px;
    }
    .area-steps .brand span {
        width: 32px;
        height: 32px;
    }
    .area-steps .nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .area-steps .nav a {
        min-width: 0;
        min-height: 34px;
        padding: 7px 8px;
        font-size: 13px;
    }
}
/* Dashboard notice popup */
.notice-modal[aria-hidden="true"] { display: none !important; }
.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.notice-modal-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    backdrop-filter: none;
}
.notice-modal-panel {
    position: relative;
    z-index: 2;
    width: min(94vw, 480px);
    max-height: min(82vh, 620px);
    display: flex;
    flex-direction: column;
    padding: 24px;
    color: #152033;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.68);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 26px 80px rgba(12, 17, 36, .28);
}
.notice-modal-head {
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f7;
}
.notice-modal-head span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    color: #157a45;
    font-size: 12px;
    font-weight: 900;
    background: #eaf9ef;
    border-radius: 6px;
}
.notice-modal-head h2 {
    margin: 10px 0 0;
    color: #12172a;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0;
}
.notice-modal-body {
    overflow: auto;
    margin: 16px 0 18px;
    color: #4d5872;
    font-size: 15px;
    line-height: 1.75;
    white-space: normal;
}
.notice-modal-close {
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-weight: 950;
    background: linear-gradient(135deg, #21c46d, #159a52);
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(25, 160, 87, .22);
}
.notice-modal-close:disabled {
    color: #6b7384;
    background: #eef1f6;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 520px) {
    .notice-modal { padding: 14px; }
    .notice-modal-panel { padding: 20px; }
    .notice-modal-head h2 { font-size: 21px; }
}
/* Rich admin-configured content */
.html-content strong { color: #ff1010; font-weight: 950; }
.html-content a { color: #155eef; text-decoration: underline; }
.html-content p { margin: 0 0 10px; }
.html-content ul, .html-content ol { margin: 8px 0 8px 22px; }

/* Card activation layout */
.activate-shell { position: relative; }
.activation-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 60;
    max-width: min(300px, calc(100vw - 28px));
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    color: #fff;
    background: #ffd21d;
    border-radius: 7px;
    box-shadow: 0 14px 32px rgba(39, 32, 92, .22);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease;
}
.activation-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.activate-service-card {
    gap: 18px;
    padding: 30px;
    border-radius: 14px;
}
.activate-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.activate-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.activate-mode-btn {
    min-width: 120px;
    min-height: 58px;
    padding: 12px 22px;
    color: #2f75ff;
    background: #fff;
    border: 2px solid #377df4;
    border-radius: 7px;
    font: inherit;
    font-size: 18px;
    font-weight: 950;
    cursor: pointer;
}
.activate-mode-btn.active {
    color: #fff;
    background: #ff9e09;
    border-color: #ff9e09;
}
.activate-mode-btn span { color: #111; font-size: 15px; }
.card-activate-panel {
    gap: 14px;
}
.card-activate-panel label {
    display: grid;
    gap: 7px;
    color: #666;
    font-size: 15px;
    font-weight: 900;
}
.card-activate-panel input {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    background: #f9fafc;
    border: 1px solid #d7dce4;
    border-radius: 6px;
    color: #202734;
    font: inherit;
}
.card-activate-panel label:first-of-type input { background: #eaf1fb; }
.activate-contact-tip {
    margin: -4px 0 8px;
    color: #ff1616;
    font-size: 14px;
    font-weight: 900;
}
.card-activate-panel .submit-steps {
    width: 100%;
    margin-top: 6px;
}
.card-success-copy {
    padding: 15px 18px;
    color: #359050;
    background: #ecf9ee;
    border: 1px solid #bfe7c8;
    border-radius: 8px;
    font-weight: 900;
}
@media (max-width: 760px) {
    .activation-toast {
        top: 74px;
        right: 14px;
        left: 14px;
        justify-content: center;
        text-align: center;
    }
    .activate-service-card { padding: 24px 18px; }
    .activate-card-head { align-items: flex-start; flex-direction: column; }
    .activate-mode-btn { flex: 1 1 140px; }
}

/* Dynamic agent level settings */
.agent-level-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.agent-level-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fbfdfc;
    border: 1px solid #dbe9e5;
    border-radius: 8px;
}
.agent-level-card h3 { margin: 8px 0 0; font-size: 20px; }
.agent-level-code {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    color: #0f6f66;
    background: #e6f7f4;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 950;
}
.agent-level-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}
.agent-level-card dl div {
    padding: 11px 12px;
    background: #f3f8f7;
    border-radius: 7px;
}
.agent-level-card dt { color: #68767e; font-size: 12px; font-weight: 900; }
.agent-level-card dd { margin: 4px 0 0; color: #111a22; font-size: 18px; font-weight: 950; }
.agent-level-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.danger { color: #fff; background: #df4d43; border-color: #df4d43; }
@media (max-width: 760px) {
    .agent-level-list { grid-template-columns: 1fr; }
}

/* Member status detection */
.member-check-message {
    min-height: 22px;
    display: block;
    margin-top: 7px;
    color: #69747c;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
}
.member-check-message.checking { color: #3e6fdc; }
.member-check-message.member,
.member-check-message.active,
.member-check-message.forever { color: #0d8a49; }
.member-check-message.none,
.member-check-message.not_found,
.member-check-message.expired,
.member-check-message.disabled,
.member-check-message.error { color: #d0463f; }
/* Step limit unlock modal */
.limit-badge {
    border: 0;
    cursor: pointer;
}
.step-unlock-modal[aria-hidden="true"] { display: none !important; }
.step-unlock-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.step-unlock-shade {
    position: absolute;
    inset: 0;
    background: rgba(16, 18, 24, .54);
    backdrop-filter: blur(4px);
}
.step-unlock-panel {
    position: relative;
    width: min(400px, 100%);
    padding: 30px 30px 28px;
    color: #202734;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(8, 14, 32, .28);
}
.step-unlock-panel h2 {
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 1.25;
}
.step-unlock-copy {
    margin-bottom: 20px;
    color: #68717a;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.7;
}
.step-unlock-actions {
    display: grid;
    gap: 12px;
}
.step-unlock-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    color: #fff;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}
.step-unlock-btn.primary,
.step-unlock-btn.secondary { background: #397bd7; }
.step-unlock-btn.lime {
    color: #344400;
    background: #c8d82a;
}
.step-unlock-btn:hover { filter: brightness(.98); transform: translateY(-1px); }
@media (max-width: 520px) {
    .step-unlock-panel { padding: 26px 20px; }
}
.checkbox-line { display: inline-flex; align-items: center; gap: 6px; margin: 6px 12px 0 0; font-weight: 700; }
.checkbox-line input[type="checkbox"] { width: auto; margin: 0; }

/* Activation tab visibility guard */
.activate-pane:not(.active) { display: none !important; }
.plan-grid.activate-pane.active { display: grid; }
.card-activate-panel.activate-pane.active { display: grid; width: 100%; }

/* Card activation form polish */
.activate-service-card .card-activate-panel { max-width: none; }
.card-activate-panel.activate-pane.active { gap: 18px; }
.card-activate-panel .card-success-copy { margin-top: -4px; }

/* Account query page */
.account-query-panel {
    gap: 18px;
    padding: 28px 26px 24px;
}
.account-query-form {
    display: grid;
    gap: 14px;
}
.account-query-form h2 {
    margin-bottom: -4px;
    font-size: 22px;
}
.account-query-form label {
    display: grid;
    gap: 7px;
}
.account-query-form input:focus {
    border-color: #1fc65d;
    box-shadow: 0 0 0 3px rgba(31, 198, 93, .12);
    outline: 0;
}
.account-query-submit {
    min-height: 52px;
    margin-top: 4px;
    color: #fff;
    background: linear-gradient(135deg, #24c961, #10a94d);
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(21, 171, 78, .22);
}
.account-query-note {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid #c7e7d0;
    border-radius: 7px;
    color: #339058;
    background: #eaf8ed;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.45;
}
.account-query-note::before {
    content: "✓";
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #fff;
    background: #58cb79;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1;
}
.account-query-note.warning {
    color: #8b6420;
    background: #fff8e4;
    border-color: #eed892;
}
.account-query-note.warning::before {
    content: "!";
    background: #e8aa25;
}
.account-result-list {
    display: grid;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid #e1e8f0;
}
.account-task-card {
    display: grid;
    gap: 13px;
    padding: 18px;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(25, 40, 70, .1);
}
.account-task-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f5;
}
.account-task-head div {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.account-task-head strong {
    color: #273548;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.account-task-head span:not(.account-run-tag) {
    color: #f21f2b;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.4;
}
.account-run-tag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 6px 10px;
    color: #fff;
    background: #20c982;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
}
.account-run-tag.paused { background: #f29a00; }
.account-run-tag.disabled { background: #ef3e45; }
.account-task-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 9px 32px;
    padding: 16px 18px;
    color: #56616d;
    background: #fbfcfe;
    border: 1px solid #dbe4ef;
    border-radius: 7px;
    font-size: 14px;
}
.account-task-meta div {
    display: contents;
}
.account-task-meta span {
    font-weight: 850;
}
.account-task-meta strong {
    color: #253345;
    font-weight: 850;
}
.account-last-message {
    margin: -2px 0 0;
    padding: 10px 12px;
    color: #52606d;
    background: #f6f8fb;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}
.account-task-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.account-task-actions form {
    margin: 0;
}
.account-action {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    color: #fff;
    border: 0;
    border-radius: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(19, 31, 58, .12);
}
.account-action.blue { background: linear-gradient(135deg, #3d86ff, #216ee8); }
.account-action.teal { background: linear-gradient(135deg, #16c18a, #0aa26f); }
.account-action.orange { background: linear-gradient(135deg, #ffa512, #ed8500); }
.account-action.red { background: linear-gradient(135deg, #ff4547, #e7272b); }
.account-empty-card {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #7a8490;
    background: #fbfcfe;
    border: 1px solid #dfe7ef;
    border-radius: 8px;
    font-weight: 850;
}
.account-log-section {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}
.account-log-section h3 {
    margin: 0;
    color: #2c3742;
    font-size: 18px;
}
.account-log-box {
    min-height: 78px;
    display: grid;
    gap: 0;
    overflow: hidden;
    background: #fbfcfe;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
}
.account-log-row {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid #edf1f5;
    font-size: 13px;
}
.account-log-row:last-child { border-bottom: 0; }
.account-log-row span { color: #73808c; }
.account-log-row strong {
    color: #43505c;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.account-log-empty {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7b8792;
    font-size: 14px;
    font-weight: 850;
}

@media (max-width: 760px) {
    .account-query-panel { padding: 24px 18px 20px; }
    .account-task-head { flex-direction: column; }
    .account-task-meta { grid-template-columns: 1fr; gap: 7px; }
    .account-task-meta div { display: grid; gap: 3px; }
    .account-task-actions { grid-template-columns: 1fr; }
    .account-log-row { grid-template-columns: 1fr; gap: 4px; }
}

.mode-tabs .tab.active.cyan { background: linear-gradient(135deg, #20c967, #10a64f); }

.plan-level-badge { display: inline-flex; width: fit-content; min-height: 24px; align-items: center; justify-content: center; padding: 4px 9px; color: #0f7d4d; background: #e7f8ed; border: 1px solid #bfe8cf; border-radius: 999px; font-size: 12px; font-weight: 950; }
.plan-level-badge.full { color: #165db3; background: #e8f1ff; border-color: #bfd7ff; }

/* Public activation flow */
.public-activate-shell {
    gap: 19px;
}
.public-activate-card {
    padding: 30px 28px 46px;
}
.public-activate-card .activate-card-head {
    align-items: flex-start;
    margin-bottom: 4px;
}
.public-activate-card .activate-card-head h2 {
    font-size: 26px;
}
.activate-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 18px;
}
.activate-mode-btn {
    min-width: 122px;
    min-height: 52px;
    padding: 11px 22px;
    color: #2471e9;
    background: #fff;
    border: 1px solid #2f7dff;
    border-radius: 7px;
    font: inherit;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
}
.activate-mode-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #3d86ff, #206ee8);
    box-shadow: 0 10px 22px rgba(38, 114, 235, .22);
}
.activate-mode-btn[data-activate-tab="card"].active {
    background: linear-gradient(135deg, #ffac16, #f19700);
    border-color: #f19700;
}
.activate-pay-form,
.card-activate-panel {
    gap: 15px;
}
.activate-field-title {
    margin: 8px 0 -3px;
    color: #424a53;
    font-size: 15px;
    font-weight: 950;
}
.activate-field-title span {
    color: #ff1e2d;
    font-size: 13px;
    font-weight: 950;
}
.activate-plan-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.activate-plan-choice,
.activate-pay-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 0;
    color: #2572ec;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
}
.activate-plan-choice input,
.activate-pay-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.activate-plan-choice span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #2f7dff;
    border-radius: 6px;
    line-height: 1;
}
.activate-plan-choice em {
    color: #ff202e;
    font-style: normal;
    font-size: 12px;
}
.activate-plan-choice b {
    font-weight: 950;
}
.activate-plan-choice input:checked + span {
    color: #fff;
    background: linear-gradient(135deg, #347eff, #216de8);
    border-color: #216de8;
    box-shadow: 0 8px 18px rgba(33, 109, 232, .18);
}
.activate-plan-choice input:checked + span em {
    color: #fff;
}
.activate-plan-choice.full input:checked + span::after,
.activate-plan-choice.limited input:checked + span::after {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #0b2b67;
    background: #071321;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
}
.activate-pay-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.activate-pay-choice span {
    min-width: 66px;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    color: #2674eb;
    background: #fff;
    border: 1px solid #2f7dff;
    border-radius: 7px;
}
.activate-pay-choice input:checked + span {
    color: #fff;
    background: linear-gradient(135deg, #3c85ff, #216de8);
    border-color: #216de8;
    box-shadow: 0 8px 18px rgba(33, 109, 232, .18);
}
.public-activate-card .activate-contact-tip {
    margin: -4px 0 4px;
    color: #ff0b20;
    font-size: 13px;
    font-weight: 950;
}
.public-activate-card .submit-steps {
    min-height: 49px;
    margin-top: 4px;
    font-size: 16px;
    box-shadow: 0 14px 28px rgba(15, 166, 79, .2);
}
.public-activate-card .card-success-copy {
    color: #5e6872;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 760px) {
    .public-activate-card { padding: 24px 18px 30px; }
    .activate-mode-btn { flex: 1 1 130px; }
    .activate-plan-choices,
    .activate-pay-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .activate-plan-choice span,
    .activate-pay-choice span { width: 100%; }
}

.account-log-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #69747c;
    font-size: 14px;
    font-weight: 800;
}
.account-log-pager div {
    display: flex;
    gap: 10px;
}
.account-page-btn {
    min-width: 72px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    color: #0d6b39;
    background: #22c761;
    color: #fff;
    border-radius: 6px;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(34, 199, 97, .18);
}
.account-page-btn.disabled {
    pointer-events: none;
    opacity: .46;
    box-shadow: none;
}
.account-query-modal[aria-hidden="true"] {
    display: none !important;
}
.account-query-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.account-query-modal-shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .46);
}
.account-query-modal-panel {
    position: relative;
    width: min(380px, 100%);
    padding: 24px 20px 18px;
    color: #4b5560;
    text-align: center;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 26px 70px rgba(8, 14, 32, .28);
}
.account-query-modal-panel p {
    margin: 0 0 22px;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.7;
}
.account-query-modal-panel p::before {
    content: "✓";
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #fff;
    background: #58cb79;
    border-radius: 3px;
    font-size: 12px;
    vertical-align: 2px;
}
.account-query-modal-panel button {
    width: 100%;
    min-height: 44px;
    color: #fff;
    background: linear-gradient(135deg, #24c961, #10a94d);
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}

@media (max-width: 760px) {
    .account-log-pager { align-items: stretch; flex-direction: column; }
    .account-log-pager div { width: 100%; }
    .account-page-btn { flex: 1; }
}

/* Manual member detection card */
.manual-member-card {
    display: grid;
    gap: 8px;
    margin-top: -6px;
    padding: 12px 14px;
    background: #f7fbff;
    border: 1px solid #d6e3f4;
    border-radius: 8px;
    color: #394654;
}
.manual-member-card[hidden] { display: none !important; }
.manual-member-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}
.manual-member-card strong {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    color: #fff;
    background: #377df4;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 950;
}
.manual-member-card span {
    color: #5c6875;
    font-size: 13px;
    font-weight: 850;
}
.manual-member-card p {
    margin: 0;
    color: #263342;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.55;
}
.manual-member-card.limited strong { background: #f39400; }
.manual-member-card.full strong,
.manual-member-card.forever strong { background: #17b36a; }
.manual-member-card.none strong,
.manual-member-card.error strong { background: #e33d42; }
.manual-upgrade-banner {
    min-height: 214px;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 112px minmax(270px, 1.35fr);
    align-items: stretch;
    overflow: hidden;
    margin: 4px 0 8px;
    color: #2e333a;
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 4px;
}
.manual-upgrade-banner[hidden] { display: none !important; }
.manual-upgrade-left,
.manual-upgrade-mid,
.manual-upgrade-right {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 950;
    line-height: 1.45;
}
.manual-upgrade-left {
    padding: 18px 20px;
    color: #343a42;
    font-size: 32px;
    border-right: 2px solid #858585;
}
.manual-upgrade-left span {
    display: block;
    margin-top: 18px;
    font-size: 31px;
}
.manual-upgrade-mid {
    flex-direction: column;
    color: #00cfff;
    background: #fff;
    border-right: 2px solid #858585;
    font-size: 36px;
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.manual-upgrade-right {
    padding: 14px 18px;
    justify-content: flex-start;
    color: #f21f4e;
    font-size: 33px;
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .manual-upgrade-banner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .manual-upgrade-left,
    .manual-upgrade-mid,
    .manual-upgrade-right {
        border-right: 0;
        border-bottom: 1px solid #dadde2;
        font-size: 24px;
        white-space: normal;
    }
    .manual-upgrade-left span { font-size: 23px; }
    .manual-upgrade-mid { padding: 14px; font-size: 30px; }
    .manual-upgrade-right { justify-content: center; text-align: center; font-size: 24px; }
}

/* Admin workspace refresh */
.area-admin {
    --admin-bg: #eef3f4;
    --admin-surface: #ffffff;
    --admin-surface-soft: #f7faf9;
    --admin-ink: #15222b;
    --admin-muted: #66747f;
    --admin-line: #dce6e7;
    --admin-teal: #0d8d81;
    --admin-blue: #25607f;
    --admin-gold: #bd8734;
    --admin-red: #c14545;
    --admin-shadow: 0 18px 46px rgba(18, 35, 46, .08);
    color: var(--admin-ink);
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 260px),
        linear-gradient(135deg, #eef6f4 0%, #f6f3ea 48%, #eef2f7 100%);
}
.area-admin::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(21, 34, 43, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 34, 43, .035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 68%);
}
.area-admin .topbar {
    min-height: 72px;
    padding: 14px clamp(18px, 4vw, 54px);
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(210, 224, 224, .9);
    box-shadow: 0 12px 34px rgba(16, 32, 42, .06);
    backdrop-filter: blur(18px);
}
.area-admin .brand {
    gap: 12px;
    color: var(--admin-ink);
    font-size: 18px;
    letter-spacing: 0;
}
.area-admin .brand span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,0)),
        linear-gradient(135deg, var(--admin-teal), var(--admin-blue) 58%, var(--admin-gold));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.68), 0 10px 20px rgba(13, 141, 129, .18);
}
.area-admin .nav {
    gap: 9px;
}
.area-admin .nav a {
    min-height: 38px;
    padding: 8px 14px;
    color: #54636d;
    background: #f7faf9;
    border: 1px solid #e0e9e8;
    border-radius: 8px;
    font-weight: 850;
}
.area-admin .nav a:hover {
    color: var(--admin-teal);
    background: #edf7f5;
    border-color: #c7dfdc;
}
.area-admin .page {
    width: min(1400px, calc(100% - 44px));
    padding-top: 28px;
}
.area-admin .area-tabs {
    position: sticky;
    top: 84px;
    z-index: 6;
    gap: 6px;
    margin-bottom: 22px;
    padding: 8px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(211, 225, 225, .96);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(18, 35, 46, .08);
    backdrop-filter: blur(18px);
}
.area-admin .area-tabs a {
    min-height: 42px;
    padding: 9px 16px;
    color: #4e5d67;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-weight: 900;
}
.area-admin .area-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--admin-blue), var(--admin-teal));
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(13, 141, 129, .2);
}
.area-admin .area-tabs a:hover:not(.active) {
    color: var(--admin-ink);
    background: #f2f7f6;
    border-color: #dbe9e7;
}
.area-admin .dashboard-head {
    position: relative;
    min-height: 134px;
    padding: 28px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(21, 34, 43, .96), rgba(37, 96, 127, .94) 58%, rgba(13, 141, 129, .9)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 1px, transparent 1px 14px);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(23, 58, 78, .2);
    overflow: hidden;
}
.area-admin .dashboard-head::after {
    content: '';
    position: absolute;
    inset: auto 24px 18px auto;
    width: 180px;
    height: 64px;
    opacity: .34;
    background:
        linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.42) 14px 18px, transparent 18px 28px),
        linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.26) 14px 18px, transparent 18px 28px);
    background-size: 28px 28px;
}
.area-admin .dashboard-head > * {
    position: relative;
    z-index: 1;
}
.area-admin .dashboard-head .eyebrow {
    margin-bottom: 8px;
    color: #f8d58f;
    font-weight: 950;
}
.area-admin .dashboard-head h1 {
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: 0;
}
.area-admin .dashboard-head .btn {
    color: #15313a;
    background: rgba(255,255,255,.94);
    border-color: rgba(255,255,255,.8);
    box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.area-admin .stats,
.area-admin .account-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.area-admin .stats div,
.area-admin .account-stats div {
    position: relative;
    min-height: 118px;
    padding: 20px 21px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    overflow: hidden;
}
.area-admin .stats div::before,
.area-admin .account-stats div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--admin-teal);
}
.area-admin .stats div::after,
.area-admin .account-stats div::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 18px;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(13, 141, 129, .14), rgba(37, 96, 127, .1));
    box-shadow: inset 0 0 0 1px rgba(13, 141, 129, .12);
}
.area-admin .stats div:nth-child(2)::before,
.area-admin .account-stats div:nth-child(2)::before { background: var(--admin-blue); }
.area-admin .stats div:nth-child(3)::before,
.area-admin .account-stats div:nth-child(3)::before { background: var(--admin-gold); }
.area-admin .stats div:nth-child(4)::before,
.area-admin .account-stats div:nth-child(4)::before { background: var(--admin-red); }
.area-admin .stats span,
.area-admin .account-stats span {
    position: relative;
    z-index: 1;
    color: var(--admin-muted);
    font-size: 13px;
    font-weight: 900;
}
.area-admin .stats strong,
.area-admin .account-stats strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 12px;
    color: var(--admin-ink);
    font-size: clamp(30px, 3vw, 38px);
    line-height: 1;
}
.area-admin .module-grid {
    gap: 16px;
    margin-bottom: 20px;
}
.area-admin .module-tile {
    position: relative;
    min-height: 146px;
    align-content: start;
    gap: 9px;
    padding: 22px 22px 22px 24px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    overflow: hidden;
}
.area-admin .module-tile::before {
    content: '';
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #e5f5f2, #f7f0df);
    box-shadow: inset 0 0 0 1px rgba(13, 141, 129, .16);
}
.area-admin .module-tile::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 62px;
    height: 32px;
    opacity: .45;
    background: repeating-linear-gradient(90deg, rgba(13, 141, 129, .28) 0 4px, transparent 4px 10px);
}
.area-admin .module-tile strong {
    color: var(--admin-ink);
    font-size: 21px;
    line-height: 1.25;
}
.area-admin .module-tile span {
    max-width: 92%;
    color: #60717a;
    font-size: 14px;
    line-height: 1.6;
}
.area-admin .module-tile:hover {
    transform: translateY(-3px);
    border-color: #bad9d6;
    box-shadow: 0 24px 62px rgba(18, 35, 46, .12);
}
.area-admin .panel {
    background: rgba(255,255,255,.97);
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
}
.area-admin .panel h2 {
    color: var(--admin-ink);
    font-size: 22px;
}
.area-admin .panel.table-scroll {
    padding: 0;
    overflow-x: auto;
}
.area-admin .panel.table-scroll > h2 {
    margin: 0;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #edf2f2;
}
.area-admin table {
    min-width: 760px;
    font-size: 14px;
}
.area-admin th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 13px 14px;
    color: #465761;
    background: #f4f8f7;
    border-bottom: 1px solid var(--admin-line);
    text-transform: none;
    white-space: nowrap;
}
.area-admin td {
    padding: 14px;
    color: #2a3943;
    border-bottom: 1px solid #edf2f2;
}
.area-admin tbody tr:nth-child(even) td {
    background: #fbfdfc;
}
.area-admin tbody tr:hover td {
    background: #f0f7f5;
}
.area-admin code {
    color: #0b5660;
    background: #e8f6f2;
    border-color: #c6e2dc;
    border-radius: 7px;
}
.area-admin .tag {
    min-width: 64px;
    min-height: 26px;
    align-items: center;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0;
}
.area-admin .tag.active,
.area-admin .tag.unused,
.area-admin .tag.approved,
.area-admin .tag.paid {
    color: #087262;
    background: #e1f6f0;
}
.area-admin .tag.pending,
.area-admin .tag.paused {
    color: #7b570e;
    background: #fff4d6;
}
.area-admin .tag.disabled,
.area-admin .tag.used,
.area-admin .tag.rejected {
    color: #a83434;
    background: #fff0ef;
}
.area-admin label {
    color: #354650;
    font-weight: 850;
}
.area-admin input,
.area-admin select,
.area-admin textarea {
    min-height: 46px;
    color: var(--admin-ink);
    background: #fbfdfc;
    border: 1px solid #cddcda;
    border-radius: 8px;
}
.area-admin input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    accent-color: var(--admin-teal);
}
.area-admin input:focus,
.area-admin select:focus,
.area-admin textarea:focus {
    outline: 3px solid rgba(13, 141, 129, .14);
    border-color: var(--admin-teal);
    background: #fff;
}
.area-admin .btn,
.area-admin button.btn {
    min-height: 42px;
    border-color: #bfd9d7;
    border-radius: 8px;
    background: #eef7f5;
    box-shadow: none;
}
.area-admin .btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #11998c, #0c776f);
    border-color: #0c776f;
    box-shadow: 0 12px 24px rgba(13, 141, 129, .18);
}
.area-admin .btn:hover,
.area-admin button.btn:hover,
.area-admin .link-btn:hover {
    transform: translateY(-1px);
}
.area-admin .link-btn {
    color: #0a756d;
    font-weight: 900;
}
.area-admin .link-btn.danger {
    color: var(--admin-red);
}
.area-admin .action-row {
    grid-template-columns: minmax(120px, 1fr) auto auto;
    gap: 8px;
}
.area-admin .action-row input {
    min-height: 36px;
}
.area-admin .action-row .link-btn {
    min-height: 34px;
    padding: 6px 10px;
    background: #e8f6f2;
    border-radius: 7px;
}
.area-admin .action-row .link-btn.danger {
    background: #fff0ef;
}
.area-admin .account-filter-panel,
.area-admin .account-table-panel,
.area-admin .account-guide.compact {
    border-color: var(--admin-line);
}
.area-admin .account-table-panel .account-table-head {
    margin: 0;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #edf2f2;
}
.area-admin .account-table-head span {
    align-self: center;
    padding: 6px 10px;
    color: #60717a;
    background: #f3f7f6;
    border-radius: 999px;
}
.area-admin .account-filter {
    grid-template-columns: minmax(240px, 1fr) 170px 170px auto auto;
    gap: 12px;
}
.area-admin .account-actions .link-btn {
    min-height: 32px;
    padding: 6px 9px;
    background: #eef7f5;
    border-radius: 7px;
}
.area-admin .account-actions .link-btn.danger {
    background: #fff0ef;
}
.area-admin .role-badge,
.area-admin .agent-level-chip {
    border-radius: 999px;
}
.area-admin .settings-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
}
.area-admin .settings-menu {
    top: 154px;
    padding: 10px;
    background: rgba(255,255,255,.94);
    border-color: var(--admin-line);
    box-shadow: var(--admin-shadow);
}
.area-admin .settings-menu a {
    min-height: 66px;
    padding: 13px 14px;
    background: #f8fbfa;
    border-color: #edf2f0;
    border-radius: 8px;
}
.area-admin .settings-menu a.active {
    background: linear-gradient(135deg, var(--admin-blue), var(--admin-teal));
    box-shadow: 0 14px 30px rgba(37, 96, 127, .18);
}
.area-admin .settings-section-form {
    min-height: 540px;
    padding: 28px;
}
.area-admin .settings-section-head {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom-color: #e7eeee;
}
.area-admin .settings-section-head h2 {
    margin: 0 0 6px;
    padding: 0;
    color: var(--admin-ink);
    background: transparent;
    border: 0;
    font-size: 26px;
}
.area-admin .settings-form > h2 {
    color: #16343c;
    background: linear-gradient(135deg, #eff8f6, #fbf7ec);
    border-color: #dce8e6;
}
.area-admin .settings-tip {
    color: #3f5d5a;
    background: #eef8f5;
    border-color: #d4e9e5;
    border-radius: 8px;
}
.area-admin .account-modal-shade {
    background: rgba(13, 24, 32, .52);
    backdrop-filter: blur(8px);
}
.area-admin .account-modal-panel {
    border-color: rgba(255,255,255,.78);
    box-shadow: 0 32px 90px rgba(9, 25, 36, .3);
}
.area-admin .account-modal-x {
    border-radius: 8px;
}
.area-login .admin-auth-shell {
    gap: 30px;
}
.area-login .admin-auth-visual {
    position: relative;
    background:
        linear-gradient(135deg, rgba(20, 34, 43, .96), rgba(37, 96, 127, .92) 58%, rgba(13, 141, 129, .9)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 16px);
    box-shadow: 0 28px 72px rgba(22, 45, 58, .2);
}
.area-login .admin-auth-visual::after {
    content: '';
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 170px;
    height: 58px;
    opacity: .34;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 4px, transparent 4px 12px);
}
.area-login .admin-auth-visual > * {
    position: relative;
    z-index: 1;
}
.area-login .admin-auth-shell .auth-card {
    border: 1px solid #dce6e7;
    box-shadow: 0 24px 64px rgba(18, 35, 46, .12);
}

@media (max-width: 1080px) {
    .area-admin .stats,
    .area-admin .account-stats,
    .area-admin .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .area-admin .settings-workspace {
        grid-template-columns: 1fr;
    }
    .area-admin .settings-menu {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .area-admin .page {
        width: min(100% - 24px, 1400px);
        padding-top: 20px;
    }
    .area-admin .topbar,
    .area-admin .dashboard-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .area-admin .area-tabs {
        position: static;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .area-admin .area-tabs a {
        flex: 0 0 auto;
    }
    .area-admin .stats,
    .area-admin .account-stats,
    .area-admin .module-grid,
    .area-admin .grid.two,
    .area-admin .form-grid,
    .area-admin .account-filter {
        grid-template-columns: 1fr;
    }
    .area-admin .dashboard-head {
        min-height: 0;
        padding: 22px;
    }
    .area-admin .settings-section-form,
    .area-admin .account-filter-panel,
    .area-admin .account-guide.compact {
        padding: 20px;
    }
    .area-admin .settings-menu {
        display: flex;
        overflow-x: auto;
        padding: 10px;
        scroll-snap-type: x proximity;
    }
    .area-admin .settings-menu a {
        min-width: 180px;
        scroll-snap-align: start;
    }
    .area-admin .settings-section-head,
    .area-admin .account-table-head {
        flex-direction: column;
    }
    .area-admin .settings-section-head .btn,
    .area-admin .dashboard-head .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .area-admin .topbar {
        padding: 12px;
    }
    .area-admin .nav a,
    .area-admin .area-tabs a {
        min-height: 40px;
        padding: 8px 12px;
    }
    .area-admin .stats div,
    .area-admin .account-stats div,
    .area-admin .module-tile {
        min-height: auto;
        padding: 18px;
    }
    .area-admin .action-row {
        grid-template-columns: 1fr;
    }
    .area-admin .account-modal-panel,
    .area-admin .account-modal-panel.wide {
        padding: 20px;
    }
}

/* Backend visual system v2 */
.area-admin {
    --admin-card: #ffffff;
    --admin-soft: #f7faf9;
    --admin-text: #17222b;
    --admin-muted: #65737d;
    --admin-border: #dae5e4;
    --admin-teal-2: #0b8f83;
    --admin-blue-2: #245f7d;
    --admin-amber-2: #b9852d;
    --admin-red-2: #bf4545;
    --admin-ring: rgba(11, 143, 131, .18);
    --admin-shadow-2: 0 18px 42px rgba(20, 34, 44, .08);
    --admin-shadow-lg-2: 0 28px 70px rgba(19, 38, 52, .14);
    color: var(--admin-text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0) 330px),
        linear-gradient(135deg, #eef6f3 0%, #f8f5ed 52%, #eef3f7 100%);
}
.area-admin::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(23,34,43,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,34,43,.045) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
}
.area-admin .topbar {
    min-height: 74px;
    padding: 14px clamp(16px, 4vw, 58px);
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(210,224,223,.9);
    box-shadow: 0 14px 38px rgba(15, 31, 42, .07);
    backdrop-filter: blur(18px);
}
.area-admin .brand {
    gap: 12px;
    color: var(--admin-text);
    font-size: 18px;
    font-weight: 950;
}
.area-admin .brand span {
    width: 36px;
    height: 36px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,0)),
        linear-gradient(135deg, var(--admin-teal-2), var(--admin-blue-2) 56%, var(--admin-amber-2));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 12px 22px rgba(11,143,131,.2);
}
.area-admin .nav { gap: 10px; }
.area-admin .nav a {
    min-height: 39px;
    padding: 8px 14px;
    color: #4f5f69;
    background: #f8fbfa;
    border: 1px solid #dfe9e8;
    border-radius: 8px;
    font-weight: 900;
}
.area-admin .nav a:hover,
.area-admin .nav a:focus-visible {
    color: var(--admin-teal-2);
    background: #eef8f5;
    border-color: #c9dfdc;
    outline: none;
}
.area-admin .page {
    width: min(1420px, calc(100% - 44px));
    padding-top: 28px;
}
.area-admin .area-tabs {
    position: sticky;
    top: 86px;
    z-index: 8;
    gap: 6px;
    margin-bottom: 22px;
    padding: 8px;
    background: rgba(255,255,255,.93);
    border: 1px solid rgba(211,226,225,.98);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(18, 35, 46, .08);
    backdrop-filter: blur(18px);
}
.area-admin .area-tabs a {
    min-height: 42px;
    padding: 9px 16px;
    color: #4d5d67;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-weight: 950;
}
.area-admin .area-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--admin-blue-2), var(--admin-teal-2));
    box-shadow: 0 12px 28px rgba(11, 143, 131, .22);
}
.area-admin .area-tabs a:hover:not(.active),
.area-admin .area-tabs a:focus-visible:not(.active) {
    color: var(--admin-text);
    background: #f2f8f6;
    border-color: #d9e8e6;
    outline: none;
}
.area-admin .dashboard-head {
    position: relative;
    min-height: 136px;
    align-items: center;
    margin-bottom: 20px;
    padding: clamp(22px, 3vw, 32px);
    color: #fff;
    background:
        linear-gradient(120deg, rgba(22,34,43,.97), rgba(36,95,125,.96) 58%, rgba(11,143,131,.92)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 1px, transparent 1px 15px);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 8px;
    box-shadow: var(--admin-shadow-lg-2);
    overflow: hidden;
}
.area-admin .dashboard-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 22px),
        linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px);
    background-size: 22px 22px;
    opacity: .5;
}
.area-admin .dashboard-head::after {
    content: '';
    position: absolute;
    right: 28px;
    bottom: 22px;
    width: 190px;
    height: 54px;
    opacity: .34;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 4px, transparent 4px 13px);
}
.area-admin .dashboard-head > * {
    position: relative;
    z-index: 1;
}
.area-admin .dashboard-head .eyebrow {
    margin: 0 0 8px;
    color: #f7d58f;
    font-size: 12px;
    font-weight: 950;
}
.area-admin .dashboard-head h1 {
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: 0;
}
.area-admin .dashboard-head .btn {
    color: #14343b;
    background: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.86);
    box-shadow: 0 14px 30px rgba(0,0,0,.13);
}
.area-admin .stats,
.area-admin .account-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.area-admin .stats div,
.area-admin .account-stats div {
    position: relative;
    min-height: 118px;
    padding: 20px 21px;
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    box-shadow: var(--admin-shadow-2);
    overflow: hidden;
}
.area-admin .stats div::before,
.area-admin .account-stats div::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--admin-teal-2);
}
.area-admin .stats div::after,
.area-admin .account-stats div::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 17px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(11,143,131,.14), rgba(36,95,125,.1));
    box-shadow: inset 0 0 0 1px rgba(11,143,131,.13);
}
.area-admin .stats div:nth-child(2)::before,
.area-admin .account-stats div:nth-child(2)::before { background: var(--admin-blue-2); }
.area-admin .stats div:nth-child(3)::before,
.area-admin .account-stats div:nth-child(3)::before { background: var(--admin-amber-2); }
.area-admin .stats div:nth-child(4)::before,
.area-admin .account-stats div:nth-child(4)::before { background: var(--admin-red-2); }
.area-admin .stats span,
.area-admin .account-stats span {
    position: relative;
    z-index: 1;
    color: var(--admin-muted);
    font-size: 13px;
    font-weight: 950;
}
.area-admin .stats strong,
.area-admin .account-stats strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 12px;
    color: var(--admin-text);
    font-size: clamp(30px, 3vw, 38px);
    line-height: 1;
}
.area-admin .module-grid { gap: 16px; margin-bottom: 20px; }
.area-admin .module-tile {
    position: relative;
    min-height: 148px;
    align-content: start;
    gap: 9px;
    padding: 22px 22px 22px 24px;
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    box-shadow: var(--admin-shadow-2);
    overflow: hidden;
}
.area-admin .module-tile::before {
    content: '';
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(11,143,131,.16), rgba(185,133,45,.14)),
        #f5fbfa;
    box-shadow: inset 0 0 0 1px rgba(11,143,131,.18);
}
.area-admin .module-tile::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 64px;
    height: 32px;
    opacity: .42;
    background: repeating-linear-gradient(90deg, rgba(11,143,131,.28) 0 4px, transparent 4px 10px);
}
.area-admin .module-tile strong { color: var(--admin-text); font-size: 21px; line-height: 1.25; }
.area-admin .module-tile span { max-width: 92%; color: #60717a; font-size: 14px; line-height: 1.62; }
.area-admin .module-tile:hover,
.area-admin .module-tile:focus-visible {
    transform: translateY(-3px);
    border-color: #b8d8d4;
    box-shadow: 0 24px 62px rgba(18, 35, 46, .12);
    outline: none;
}
.area-admin .grid.two { grid-template-columns: repeat(2, minmax(420px, 1fr)); align-items: start; }
.area-admin .panel {
    background: rgba(255,255,255,.98);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    box-shadow: var(--admin-shadow-2);
}
.area-admin .panel h2 { color: var(--admin-text); font-size: 22px; }
.area-admin .panel.table-scroll { padding: 0; overflow-x: auto; }
.area-admin .panel.table-scroll > h2 {
    margin: 0;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #edf2f2;
}
.area-admin table { min-width: 760px; font-size: 14px; }
.area-admin th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 13px 14px;
    color: #465761;
    background: #f4f8f7;
    border-bottom: 1px solid var(--admin-border);
    text-transform: none;
    white-space: nowrap;
}
.area-admin td { padding: 14px; color: #2b3a43; border-bottom: 1px solid #edf2f2; }
.area-admin tbody tr:nth-child(even) td { background: #fbfdfc; }
.area-admin tbody tr:hover td { background: #f0f7f5; }
.area-admin code { color: #0b5660; background: #e8f6f2; border-color: #c6e2dc; border-radius: 7px; }
.area-admin .tag {
    min-width: 64px;
    min-height: 26px;
    align-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
}
.area-admin .tag.active,
.area-admin .tag.unused,
.area-admin .tag.approved,
.area-admin .tag.paid { color: #087262; background: #e1f6f0; }
.area-admin .tag.pending,
.area-admin .tag.paused { color: #7b570e; background: #fff4d6; }
.area-admin .tag.disabled,
.area-admin .tag.used,
.area-admin .tag.rejected { color: #a83434; background: #fff0ef; }
.area-admin label { color: #354650; font-weight: 900; }
.area-admin input,
.area-admin select,
.area-admin textarea {
    min-height: 46px;
    color: var(--admin-text);
    background: #fbfdfc;
    border: 1px solid #cddcda;
    border-radius: 8px;
}
.area-admin textarea { min-height: 126px; line-height: 1.62; }
.area-admin input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    accent-color: var(--admin-teal-2);
}
.area-admin input:focus,
.area-admin select:focus,
.area-admin textarea:focus {
    outline: 3px solid var(--admin-ring);
    border-color: var(--admin-teal-2);
    background: #fff;
}
.area-admin .btn,
.area-admin button.btn {
    min-height: 42px;
    border-color: #bfd9d7;
    border-radius: 8px;
    background: #eef7f5;
    box-shadow: none;
}
.area-admin .btn.primary {
    color: #fff;
    background: linear-gradient(135deg, #11998c, #0c776f);
    border-color: #0c776f;
    box-shadow: 0 12px 24px rgba(11, 143, 131, .2);
}
.area-admin .btn.danger,
.area-admin button.btn.danger { color: #fff; background: linear-gradient(135deg, #c84d4d, #a93a3a); border-color: #a93a3a; }
.area-admin .btn:hover,
.area-admin button.btn:hover,
.area-admin .link-btn:hover { transform: translateY(-1px); }
.area-admin .btn:focus-visible,
.area-admin .link-btn:focus-visible,
.area-admin button:focus-visible { outline: 3px solid var(--admin-ring); outline-offset: 2px; }
.area-admin .link-btn { color: #0a756d; font-weight: 950; }
.area-admin .link-btn.danger { color: var(--admin-red-2); }
.area-admin .action-row { grid-template-columns: minmax(120px, 1fr) auto auto; gap: 8px; }
.area-admin .action-row input { min-height: 36px; }
.area-admin .action-row .link-btn,
.area-admin .account-actions .link-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #e8f6f2;
    border-radius: 7px;
}
.area-admin .action-row .link-btn.danger,
.area-admin .account-actions .link-btn.danger { background: #fff0ef; }
.area-admin .account-filter-panel,
.area-admin .account-table-panel,
.area-admin .account-guide.compact { border-color: var(--admin-border); }
.area-admin .account-command-row { margin-bottom: 18px; }
.area-admin .account-guide.compact { padding: 22px 24px; }
.area-admin .account-table-panel .account-table-head {
    margin: 0;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #edf2f2;
}
.area-admin .account-table-head span {
    align-self: center;
    padding: 6px 10px;
    color: #60717a;
    background: #f3f7f6;
    border-radius: 999px;
}
.area-admin .account-filter { grid-template-columns: minmax(240px, 1fr) 170px 170px auto auto; gap: 12px; align-items: end; }
.area-admin .role-badge,
.area-admin .agent-level-chip { border-radius: 999px; }
.area-admin .settings-workspace { grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
.area-admin .settings-menu {
    top: 154px;
    padding: 10px;
    background: rgba(255,255,255,.94);
    border-color: var(--admin-border);
    box-shadow: var(--admin-shadow-2);
}
.area-admin .settings-menu a { min-height: 66px; padding: 13px 14px; background: #f8fbfa; border-color: #edf2f0; border-radius: 8px; }
.area-admin .settings-menu a.active {
    background: linear-gradient(135deg, var(--admin-blue-2), var(--admin-teal-2));
    box-shadow: 0 14px 30px rgba(36, 95, 125, .18);
}
.area-admin .settings-section-form { min-height: 540px; padding: 28px; }
.area-admin .settings-section-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom-color: #e7eeee; }
.area-admin .settings-section-head h2 {
    margin: 0 0 6px;
    padding: 0;
    color: var(--admin-text);
    background: transparent;
    border: 0;
    font-size: 26px;
}
.area-admin .settings-form > h2 { color: #16343c; background: linear-gradient(135deg, #eff8f6, #fbf7ec); border-color: #dce8e6; }
.area-admin .settings-tip { color: #3f5d5a; background: #eef8f5; border-color: #d4e9e5; border-radius: 8px; }
.area-admin .agent-level-list { gap: 16px; }
.area-admin .agent-level-card { border-color: var(--admin-border); box-shadow: var(--admin-shadow-2); }
.area-admin .account-modal-shade { background: rgba(13, 24, 32, .52); backdrop-filter: blur(8px); }
.area-admin .account-modal-panel { border-color: rgba(255,255,255,.78); box-shadow: 0 32px 90px rgba(9, 25, 36, .3); }
.area-login {
    background:
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 360px),
        linear-gradient(135deg, #eef6f3 0%, #f8f5ed 52%, #eef3f7 100%);
}
.area-login .admin-auth-shell { gap: 30px; }
.area-login .admin-auth-visual {
    position: relative;
    background:
        linear-gradient(135deg, rgba(20, 34, 43, .96), rgba(36, 95, 125, .92) 58%, rgba(11, 143, 131, .9)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 1px, transparent 1px 16px);
    box-shadow: 0 28px 72px rgba(22, 45, 58, .2);
}
.area-login .admin-auth-visual::after {
    content: '';
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 170px;
    height: 58px;
    opacity: .34;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 4px, transparent 4px 12px);
}
.area-login .admin-auth-visual > * { position: relative; z-index: 1; }
.area-login .admin-auth-shell .auth-card { border: 1px solid #dce6e7; box-shadow: 0 24px 64px rgba(18, 35, 46, .12); }
@media (max-width: 1120px) {
    .area-admin .stats,
    .area-admin .account-stats,
    .area-admin .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .area-admin .settings-workspace { grid-template-columns: 1fr; }
    .area-admin .settings-menu { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .area-admin .grid.two { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
    .area-admin .page { width: min(100% - 24px, 1420px); padding-top: 20px; }
    .area-admin .topbar,
    .area-admin .dashboard-head { align-items: flex-start; flex-direction: column; }
    .area-admin .area-tabs { position: static; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
    .area-admin .area-tabs a { flex: 0 0 auto; }
    .area-admin .stats,
    .area-admin .account-stats,
    .area-admin .module-grid,
    .area-admin .form-grid,
    .area-admin .account-filter { grid-template-columns: 1fr; }
    .area-admin .dashboard-head { min-height: 0; padding: 22px; }
    .area-admin .dashboard-head::after { display: none; }
    .area-admin .settings-section-form,
    .area-admin .account-filter-panel,
    .area-admin .account-guide.compact { padding: 20px; }
    .area-admin .settings-menu { display: flex; overflow-x: auto; padding: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
    .area-admin .settings-menu a { min-width: 180px; scroll-snap-align: start; }
    .area-admin .settings-section-head,
    .area-admin .account-table-head { flex-direction: column; }
    .area-admin .settings-section-head .btn,
    .area-admin .dashboard-head .btn { width: 100%; }
}
@media (max-width: 520px) {
    .area-admin .topbar { padding: 12px; }
    .area-admin .nav a,
    .area-admin .area-tabs a { min-height: 40px; padding: 8px 12px; }
    .area-admin .stats div,
    .area-admin .account-stats div,
    .area-admin .module-tile { min-height: auto; padding: 18px; }
    .area-admin .action-row { grid-template-columns: 1fr; }
    .area-admin .account-modal-panel,
    .area-admin .account-modal-panel.wide { padding: 20px; }
    .area-login .admin-auth-visual::after { display: none; }
}
/* Notice popup compact style */
.notice-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: transparent;
    box-sizing: border-box;
}
.notice-modal-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    backdrop-filter: none;
}
.notice-modal-panel {
    position: relative;
    z-index: 2;
    width: min(100vw - 12px, 415px);
    max-height: min(92vh, 520px);
    min-height: 228px;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 13px;
    color: #111;
    background: #fff;
    border: 1px solid #f1c94b;
    border-top: 1px solid #f1c94b;
    border-radius: 5px;
    box-shadow: 0 8px 22px rgba(30, 38, 55, .12);
    backdrop-filter: none;
}
.notice-modal-countdown {
    position: absolute;
    top: 18px;
    left: 10px;
    min-height: 22px;
    color: #111;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
}
.notice-modal-x {
    position: absolute;
    top: 17px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #111;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(44, 213, 130, .42);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.notice-modal-x:disabled {
    color: #111;
    background: #fff;
    cursor: not-allowed;
    opacity: 1;
}
.notice-modal-title {
    margin: 34px 0 14px;
    color: #111;
    font-size: 0;
    line-height: 0;
}
.notice-modal-body {
    max-height: 116px;
    overflow: auto;
    margin: 0 0 26px;
    padding: 0;
    color: #111;
    font-size: 13px;
    font-weight: 800;
    line-height: 2.65;
    white-space: normal;
}
.notice-modal-body p {
    margin: 0 0 4px;
}
.notice-modal-body strong,
.notice-modal-body b {
    color: #ff1e1e;
    font-weight: 950;
}
.notice-modal-body a {
    color: #2b83ff;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 950;
}
.notice-modal-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: auto;
}
.notice-modal-confirm,
.notice-modal-secondary {
    width: 67px;
    min-height: 33px;
    padding: 8px 10px;
    color: #fff;
    border: 0;
    border-radius: 5px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.notice-modal-confirm {
    background: #2e96ff;
    box-shadow: 0 4px 10px rgba(46, 150, 255, .22);
}
.notice-modal-secondary {
    width: 88px;
    background: #878787;
    box-shadow: 0 4px 10px rgba(80, 80, 80, .16);
}
.notice-modal-confirm:disabled,
.notice-modal-secondary:disabled {
    background: #b8bec8;
    cursor: not-allowed;
    box-shadow: none;
}
.notice-modal-close {
    display: none;
}
@media (max-width: 520px) {
    .notice-modal {
        padding: 12px;
    }
    .notice-modal-panel {
        width: min(100vw - 8px, 415px);
        padding: 18px 14px 13px;
    }
    .notice-modal-body {
        font-size: 12px;
        line-height: 2.25;
    }
}

/* Workspace side navigation */
.area-admin .page,
.area-agent .page {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.area-admin .workspace-sidebar.area-tabs,
.area-agent .workspace-sidebar.area-tabs {
    grid-column: 1;
    position: sticky;
    top: 92px;
    z-index: 9;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px;
    border-radius: 8px;
}
.area-agent .workspace-sidebar.area-tabs { top: 88px; }
.area-admin .workspace-sidebar ~ *,
.area-agent .workspace-sidebar ~ * {
    grid-column: 2;
    min-width: 0;
}
.area-admin .workspace-sidebar-head,
.area-agent .workspace-sidebar-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    padding: 8px 8px 14px;
    border-bottom: 1px solid rgba(210, 224, 223, .9);
}
.area-agent .workspace-sidebar-head { border-bottom-color: #e4e0d2; }
.area-admin .workspace-sidebar-head span,
.area-agent .workspace-sidebar-head span {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}
.area-admin .workspace-sidebar-head span {
    background: linear-gradient(135deg, var(--admin-teal-2), var(--admin-blue-2));
    box-shadow: 0 12px 24px rgba(11, 143, 131, .18);
}
.area-agent .workspace-sidebar-head span {
    background: linear-gradient(135deg, #c49335, #0f8f83);
    box-shadow: 0 12px 24px rgba(196, 139, 44, .18);
}
.area-admin .workspace-sidebar-head strong,
.area-agent .workspace-sidebar-head strong {
    color: inherit;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.2;
}
.area-admin .workspace-sidebar-head small,
.area-agent .workspace-sidebar-head small {
    color: #6b7b84;
    font-size: 12px;
    font-weight: 900;
}
.area-admin .workspace-sidebar.area-tabs a,
.area-agent .workspace-sidebar.area-tabs a {
    width: 100%;
    justify-content: flex-start;
}
@media (max-width: 980px) {
    .area-admin .page,
    .area-agent .page {
        display: block;
    }
    .area-admin .workspace-sidebar.area-tabs,
    .area-agent .workspace-sidebar.area-tabs {
        position: sticky;
        top: 10px;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin-bottom: 18px;
        padding: 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .area-admin .workspace-sidebar-head,
    .area-agent .workspace-sidebar-head {
        display: none;
    }
    .area-admin .workspace-sidebar.area-tabs a,
    .area-agent .workspace-sidebar.area-tabs a {
        flex: 0 0 auto;
        width: auto;
        min-width: 128px;
        justify-content: center;
        scroll-snap-align: start;
    }
}
/* Workspace side navigation refinement */
.area-admin .page,
.area-agent .page {
    display: block;
}
.area-admin .workspace-layout,
.area-agent .workspace-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.area-admin .workspace-main,
.area-agent .workspace-main {
    min-width: 0;
}
.area-admin .workspace-sidebar.area-tabs,
.area-agent .workspace-sidebar.area-tabs {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 18px 44px rgba(18, 35, 46, .07);
}
.area-agent .workspace-sidebar.area-tabs { top: 88px; }
.area-admin .workspace-sidebar ~ *,
.area-agent .workspace-sidebar ~ * {
    grid-column: auto;
}
.area-admin .workspace-sidebar.area-tabs a,
.area-agent .workspace-sidebar.area-tabs a {
    min-height: 42px;
    padding: 9px 14px;
}
.area-admin .dashboard-head,
.area-agent .dashboard-head {
    min-height: 118px;
    margin-bottom: 18px;
}
.area-admin .settings-workspace {
    gap: 16px;
}
.area-admin .settings-menu {
    top: 88px;
}
@media (max-width: 980px) {
    .area-admin .workspace-layout,
    .area-agent .workspace-layout {
        display: block;
    }
    .area-admin .workspace-sidebar.area-tabs,
    .area-agent .workspace-sidebar.area-tabs {
        position: sticky;
        top: 10px;
        display: flex;
        overflow-x: auto;
        margin-bottom: 18px;
        padding: 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }
    .area-admin .workspace-sidebar.area-tabs a,
    .area-agent .workspace-sidebar.area-tabs a {
        flex: 0 0 auto;
        width: auto;
        min-width: 128px;
        justify-content: center;
        scroll-snap-align: start;
    }
}
/* Admin card management */
.area-admin .cards-head .btn {
    color: #0b655f;
    background: rgba(255,255,255,.94);
    border-color: rgba(255,255,255,.72);
}
.area-admin .card-stats div:nth-child(2)::before { background: var(--admin-teal-2); }
.area-admin .card-stats div:nth-child(3)::before { background: var(--admin-red-2); }
.area-admin .card-stats div:nth-child(4)::before { background: var(--admin-amber-2); }
.area-admin .admin-card-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 18px;
    margin-bottom: 20px;
}
.area-admin .admin-card-generate,
.area-admin .admin-card-guide {
    min-height: 260px;
    border-color: var(--admin-border);
}
.area-admin .admin-card-form-grid {
    display: grid;
    grid-template-columns: minmax(120px, .45fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 14px;
    margin-top: 18px;
}
.area-admin .admin-card-submit {
    width: min(220px, 100%);
    margin-top: 18px;
}
.area-admin .admin-card-guide {
    display: grid;
    align-content: start;
    gap: 14px;
    background:
        linear-gradient(135deg, rgba(239,248,246,.94), rgba(255,251,239,.92)),
        var(--admin-card);
}
.area-admin .admin-card-guide p {
    margin: 0;
    color: #53656c;
    font-weight: 800;
    line-height: 1.75;
}
.area-admin .admin-card-table-panel {
    border-color: var(--admin-border);
}
.area-admin .admin-card-table th,
.area-admin .admin-card-table td {
    white-space: nowrap;
}
.area-admin .admin-card-code {
    display: grid;
    gap: 6px;
}
.area-admin .admin-card-code span {
    color: #7a8790;
    font-size: 12px;
    font-weight: 900;
}
.area-admin .admin-card-table .role-badge {
    width: fit-content;
}
@media (max-width: 1180px) {
    .area-admin .admin-card-workbench,
    .area-admin .admin-card-form-grid {
        grid-template-columns: 1fr;
    }
    .area-admin .admin-card-submit {
        width: 100%;
    }
}