:root {
    --ink-950: #f4eddf;
    --ink-900: #ede1cc;
    --ink-850: #e5d6bc;
    --ink-800: #d9c5a4;
    --ink-700: #bda17b;
    --text: #40362b;
    --muted: #776957;
    --muted-2: #98856d;
    --line: rgba(91, 69, 43, .18);
    --gold: #c59a49;
    --gold-2: #9c712c;
    --cyan: #527c72;
    --blue: #71897c;
    --green: #668162;
    --red: #a75448;
    --violet: #88748f;
    --surface: rgba(255, 251, 242, .92);
    --surface-2: rgba(245, 235, 216, .94);
    --shadow: 0 20px 48px rgba(84, 62, 36, .12);
    --radius: 22px;
    --radius-small: 14px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--ink-950);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        linear-gradient(rgba(255, 253, 247, .28) 1px, transparent 1px),
        radial-gradient(circle at 78% -8%, rgba(197, 154, 73, .16), transparent 29rem),
        radial-gradient(circle at 35% 105%, rgba(82, 124, 114, .11), transparent 32rem),
        var(--ink-950);
    background-size: 100% 5px, auto, auto, auto;
    font: 15px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Arial, sans-serif;
}

a {
    color: inherit;
}

button,
input,
select {
    font: inherit;
}

h1,
h2,
h3,
.plan-price {
    font-family: Georgia, "Times New Roman", serif;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    display: flex;
    width: 282px;
    flex-direction: column;
    padding: 24px 18px 18px;
    background:
        linear-gradient(180deg, rgba(239, 226, 204, .99), rgba(226, 209, 181, .99)),
        var(--ink-900);
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 50px rgba(91, 69, 43, .1);
}

.brand-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.brand-mark > span:last-child {
    display: grid;
    line-height: 1.15;
}

.brand-mark strong {
    letter-spacing: .08em;
    font-size: 15px;
}

.brand-mark small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .06em;
}

.brand-glyph {
    position: relative;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    overflow: hidden;
    color: #44331c;
    border-radius: 14px 7px 14px 7px;
    background: linear-gradient(140deg, #f7e7b9, var(--gold) 55%, var(--gold-2));
    box-shadow: 0 10px 26px rgba(120, 84, 31, .17);
    font-size: 16px;
    font-weight: 950;
}

.brand-glyph::after {
    position: absolute;
    width: 34px;
    height: 34px;
    right: -22px;
    bottom: -19px;
    border-radius: 50%;
    background: rgba(255, 251, 235, .46);
    content: "";
}

.subscriber-chip {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 10px;
    gap: 11px;
    align-items: center;
    margin: 27px 0 24px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255, 250, 238, .47);
}

.subscriber-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fffdf7;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--blue), #667669);
    font-weight: 850;
    box-shadow: 0 9px 24px rgba(82, 108, 91, .2);
}

.subscriber-copy {
    display: grid;
    min-width: 0;
}

.subscriber-copy strong,
.subscriber-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscriber-copy strong {
    font-size: 13px;
}

.subscriber-copy small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 251, 239, .7);
    border-radius: 50%;
    background: var(--muted-2);
    box-shadow: 0 0 0 4px rgba(91, 69, 43, .04);
}

.status-active {
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(102, 129, 98, .12);
}

.status-expired,
.status-suspended {
    background: var(--red);
}

.status-pending {
    background: var(--gold);
}

.sidebar-nav {
    display: grid;
    gap: 4px;
}

.nav-label {
    margin: 18px 13px 7px;
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 8px 12px;
    color: #665643;
    border: 1px solid transparent;
    border-radius: 13px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: color .18s ease, border-color .18s ease,
        background .18s ease, transform .18s ease;
}

.nav-link:hover {
    color: #372e25;
    border-color: rgba(91, 69, 43, .13);
    background: rgba(255, 251, 242, .6);
    transform: translateX(2px);
}

.nav-link.is-active {
    color: #76531e;
    border-color: rgba(156, 113, 44, .22);
    background:
        linear-gradient(90deg, rgba(197, 154, 73, .2), rgba(255, 251, 242, .18));
}

.nav-link.is-active::after {
    position: absolute;
    width: 3px;
    height: 20px;
    right: -19px;
    border-radius: 4px 0 0 4px;
    background: var(--gold);
    box-shadow: 0 0 14px rgba(156, 113, 44, .28);
    content: "";
}

.nav-icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    color: inherit;
    border-radius: 9px;
    background: rgba(255, 251, 242, .52);
    font-size: 13px;
    font-weight: 900;
}

.sidebar-bottom {
    display: grid;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}

.plan-mini {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(115, 85, 48, .06);
    font-size: 11px;
}

.plan-mini strong {
    color: var(--text);
    font-size: 13px;
}

.logout-btn {
    width: 100%;
    padding: 10px 13px;
    color: #665643;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    font-weight: 750;
}

.logout-btn:hover {
    color: #873f37;
    border-color: rgba(167, 84, 72, .28);
    background: rgba(167, 84, 72, .08);
}

.sidebar-close {
    display: none;
    color: var(--muted);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 26px;
}

.main-panel {
    min-height: 100vh;
    margin-left: 282px;
}

.topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 17px;
    align-items: center;
    min-height: 112px;
    padding: 23px clamp(22px, 4vw, 54px);
    border-bottom: 1px solid var(--line);
    background: rgba(248, 241, 227, .82);
    backdrop-filter: blur(17px);
}

.topbar h1 {
    margin: 2px 0 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.16;
    letter-spacing: -.035em;
}

.eyebrow {
    margin: 0;
    color: #8e6427;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.page-subtitle {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 251, 242, .74);
    cursor: pointer;
}

.top-renew {
    padding: 10px 17px;
    color: #3f301d;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    box-shadow: 0 10px 25px rgba(116, 80, 29, .15);
    text-decoration: none;
    font-weight: 850;
}

.content-area {
    width: min(1480px, 100%);
    min-height: calc(100vh - 176px);
    padding: 32px clamp(22px, 4vw, 54px) 44px;
}

.dashboard-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 18px clamp(22px, 4vw, 54px) 27px;
    color: var(--muted-2);
    border-top: 1px solid var(--line);
    font-size: 11px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.metric-card,
.panel,
.quick-action,
.plan-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.metric-card,
.panel,
.plan-card,
.auth-card {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .68),
        var(--shadow);
}

.metric-card {
    min-height: 148px;
    padding: 20px;
    border-radius: 19px;
}

.metric-card::after {
    position: absolute;
    width: 100px;
    height: 100px;
    top: -55px;
    right: -54px;
    border-radius: 50%;
    background: var(--metric-glow, rgba(197, 154, 73, .09));
    content: "";
}

.metric-gold {
    --metric-glow: rgba(197, 154, 73, .18);
}

.metric-blue {
    --metric-glow: rgba(113, 137, 124, .18);
}

.metric-green {
    --metric-glow: rgba(102, 129, 98, .16);
}

.metric-violet {
    --metric-glow: rgba(136, 116, 143, .16);
}

.metric-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.metric-card strong {
    display: block;
    margin-top: 20px;
    font-size: clamp(24px, 3vw, 31px);
    line-height: 1;
    letter-spacing: -.04em;
}

.metric-card small {
    display: block;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.metric-pip {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(156, 113, 44, .1);
}

.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    gap: 20px;
    align-items: start;
}

.panel {
    padding: 23px;
    border-radius: var(--radius);
}

.panel + .panel {
    margin-top: 20px;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.panel-heading h2,
.panel-heading h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -.015em;
}

.panel-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.text-link {
    color: var(--cyan);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.text-link:hover {
    text-decoration: underline;
}

.detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--line);
}

.detail-item {
    min-height: 86px;
    padding: 16px;
    background: rgba(255, 252, 245, .88);
}

.detail-item span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.detail-item strong {
    display: block;
    margin-top: 7px;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.progress-wrap {
    margin-top: 18px;
}

.progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
}

.progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(91, 69, 43, .1);
}

.progress-bar {
    height: 100%;
    width: var(--progress, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-2), var(--gold));
    box-shadow: 0 0 18px rgba(156, 113, 44, .18);
}

.progress-0 { --progress: 0%; }
.progress-10 { --progress: 10%; }
.progress-20 { --progress: 20%; }
.progress-30 { --progress: 30%; }
.progress-40 { --progress: 40%; }
.progress-50 { --progress: 50%; }
.progress-60 { --progress: 60%; }
.progress-70 { --progress: 70%; }
.progress-80 { --progress: 80%; }
.progress-90 { --progress: 90%; }
.progress-100 { --progress: 100%; }

.quick-grid {
    display: grid;
    gap: 12px;
}

.quick-action {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 15px;
    color: var(--text);
    border-radius: 16px;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease,
        background .18s ease;
}

.quick-action:hover {
    transform: translateY(-2px);
    border-color: rgba(82, 124, 114, .28);
    background: var(--surface-2);
}

.quick-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--cyan);
    border-radius: 13px;
    background: rgba(82, 124, 114, .11);
    font-size: 17px;
    font-weight: 900;
}

.quick-action strong,
.quick-action small {
    display: block;
}

.quick-action strong {
    font-size: 13px;
}

.quick-action small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.quick-arrow {
    color: var(--muted-2);
    font-size: 19px;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.data-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 14px 15px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table th {
    color: var(--muted);
    background: rgba(229, 214, 188, .56);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.data-table td {
    color: #544738;
    font-size: 13px;
}

.data-table tbody tr:hover {
    background: rgba(197, 154, 73, .055);
}

.cell-primary {
    display: block;
    color: var(--text);
    font-weight: 800;
}

.cell-secondary {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #665847;
    background: rgba(91, 69, 43, .08);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
}

.badge-active,
.badge-paid {
    color: #4f6f51;
    background: rgba(102, 129, 98, .13);
}

.badge-expired,
.badge-suspended,
.badge-revoked,
.badge-failed {
    color: #98483f;
    background: rgba(167, 84, 72, .12);
}

.badge-pending {
    color: #825b22;
    background: rgba(197, 154, 73, .16);
}

.badge-owner {
    color: #825b22;
    background: rgba(197, 154, 73, .16);
}

.badge-draft {
    color: #456e65;
    background: rgba(82, 124, 114, .12);
}

.badge-publish {
    color: #715d79;
    background: rgba(136, 116, 143, .13);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.actions form {
    margin: 0;
}

.btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    color: #3e2e19;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    box-shadow: inset 0 1px 0 rgba(255, 248, 219, .48);
    cursor: pointer;
    text-decoration: none;
    font-weight: 850;
    transition: transform .17s ease, filter .17s ease,
        border-color .17s ease;
}

.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03) saturate(.96);
}

.btn-secondary {
    color: var(--text);
    border-color: rgba(82, 124, 114, .25);
    background: rgba(82, 124, 114, .11);
}

.btn-danger {
    color: #8f433b;
    border-color: rgba(167, 84, 72, .24);
    background: rgba(167, 84, 72, .1);
}

.btn-success {
    color: #4e6e50;
    border-color: rgba(102, 129, 98, .25);
    background: rgba(102, 129, 98, .11);
}

.btn-ghost {
    color: #665847;
    border-color: var(--line);
    background: transparent;
}

.btn-small {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 11px;
}

.btn-full {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.field-full {
    grid-column: 1 / -1;
}

.field label {
    display: block;
    margin-bottom: 7px;
    color: #514436;
    font-size: 12px;
    font-weight: 800;
}

.field small,
.form-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

.input,
.select {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    background: rgba(255, 253, 248, .88);
    transition: border-color .17s ease, box-shadow .17s ease;
}

.input:focus,
.select:focus {
    border-color: rgba(82, 124, 114, .62);
    box-shadow: 0 0 0 4px rgba(82, 124, 114, .1);
}

.input::placeholder {
    color: #a1917d;
}

.select option {
    color: var(--text);
    background: var(--ink-900);
}

.inline-select {
    min-height: 34px;
    width: auto;
    padding: 5px 8px;
    border-radius: 9px;
    font-size: 11px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

.alert {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
}

.alert strong {
    display: block;
    margin-bottom: 2px;
}

.alert p {
    margin: 0;
    color: #5f5141;
    font-size: 13px;
}

.alert small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.alert-success {
    border-color: rgba(102, 129, 98, .28);
    background: rgba(223, 233, 215, .78);
}

.alert-error {
    border-color: rgba(167, 84, 72, .26);
    background: rgba(244, 221, 214, .8);
}

.alert-warning {
    border-color: rgba(197, 154, 73, .3);
    background: rgba(247, 235, 199, .82);
}

.alert-info {
    border-color: rgba(82, 124, 114, .27);
    background: rgba(218, 233, 226, .8);
}

.alert-close {
    align-self: flex-start;
    color: var(--muted);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.secret-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 11px;
}

.secret-row code {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 9px 11px;
    color: var(--gold);
    border: 1px dashed rgba(156, 113, 44, .42);
    border-radius: 10px;
    background: rgba(118, 84, 37, .07);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .04em;
}

.empty-state {
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 17px;
}

.pagination a,
.pagination span {
    display: grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    color: #665847;
    border: 1px solid var(--line);
    border-radius: 9px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

.pagination .current {
    color: #3e2e19;
    border-color: var(--gold);
    background: var(--gold);
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.plan-card {
    padding: 21px;
    border-radius: 20px;
}

.plan-card.featured {
    border-color: rgba(197, 154, 73, .32);
    background:
        linear-gradient(155deg, rgba(197, 154, 73, .11), transparent 52%),
        var(--surface);
}

.plan-tag {
    display: inline-flex;
    padding: 4px 8px;
    color: var(--gold);
    border-radius: 999px;
    background: rgba(197, 154, 73, .13);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plan-card h3 {
    margin: 15px 0 0;
    font-size: 17px;
}

.plan-price {
    margin: 12px 0 4px;
    color: #44372a;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: -.04em;
}

.plan-price small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0;
}

.plan-card > p {
    min-height: 40px;
    margin: 8px 0 18px;
    color: var(--muted);
    font-size: 11px;
}

.renew-fields {
    display: grid;
    grid-template-columns: minmax(90px, .45fr) minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.price-preview {
    display: block;
    margin: 10px 0 13px;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 800;
}

.section-gap {
    margin-top: 20px;
}

.danger-zone {
    border-color: rgba(167, 84, 72, .25);
}

.security-list {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.security-list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.security-list li:last-child {
    border-bottom: 0;
}

.security-list span {
    color: var(--muted);
    font-size: 12px;
}

.security-list strong {
    font-size: 12px;
    text-align: right;
}

.auth-body {
    overflow-x: hidden;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(380px, .95fr) minmax(480px, 1.05fr);
    min-height: 100vh;
}

.auth-story {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(28px, 5vw, 66px);
    background:
        linear-gradient(152deg, rgba(255, 251, 240, .12), rgba(222, 204, 171, .45)),
        radial-gradient(circle at 20% 25%, rgba(197, 154, 73, .28), transparent 19rem),
        radial-gradient(circle at 85% 75%, rgba(82, 124, 114, .2), transparent 24rem),
        linear-gradient(135deg, #eadabf, #cdb58f);
}

.auth-story::before,
.auth-story::after {
    position: absolute;
    border: 1px solid rgba(91, 69, 43, .12);
    border-radius: 50%;
    content: "";
}

.auth-story::before {
    width: 440px;
    height: 440px;
    top: -250px;
    right: -180px;
}

.auth-story::after {
    width: 280px;
    height: 280px;
    left: -160px;
    bottom: -130px;
}

.auth-brand {
    position: relative;
    z-index: 1;
}

.auth-story-content {
    position: relative;
    z-index: 1;
    width: min(630px, 100%);
    margin: auto 0;
    padding: 80px 0;
}

.story-kicker {
    display: inline-flex;
    padding: 7px 11px;
    color: #3f301d;
    border-radius: 999px;
    background: var(--gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-story h1 {
    margin: 24px 0 0;
    font-size: clamp(38px, 5vw, 67px);
    line-height: 1.02;
    letter-spacing: -.04em;
}

.auth-story-content > p {
    width: min(580px, 100%);
    margin: 24px 0 0;
    color: #625342;
    font-size: clamp(15px, 1.7vw, 18px);
}

.story-points {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.story-points span {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #4d4033;
    font-size: 13px;
    font-weight: 750;
}

.story-points b {
    display: grid;
    width: 34px;
    height: 28px;
    place-items: center;
    color: var(--gold);
    border: 1px solid rgba(156, 113, 44, .26);
    border-radius: 8px;
    background: rgba(255, 248, 229, .45);
    font-size: 9px;
}

.auth-copyright {
    position: relative;
    z-index: 1;
    color: var(--muted-2);
    font-size: 10px;
}

.auth-panel {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 30px;
    background:
        radial-gradient(circle at 90% 10%, rgba(82, 124, 114, .12), transparent 22rem),
        var(--ink-950);
}

.auth-card {
    width: min(470px, 100%);
    padding: clamp(25px, 4vw, 42px);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(255, 251, 242, .88);
    box-shadow: var(--shadow);
}

.auth-card-heading {
    margin-bottom: 25px;
}

.auth-card-heading h2 {
    margin: 5px 0 0;
    font-size: clamp(27px, 4vw, 35px);
    letter-spacing: -.04em;
}

.auth-card-heading > p:last-child {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 11px;
}

.auth-links a {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 750;
}

.auth-links a:hover {
    text-decoration: underline;
}

.choice-list {
    display: grid;
    gap: 10px;
}

.choice-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(115, 85, 48, .06);
}

.choice-card strong,
.choice-card small {
    display: block;
}

.choice-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.sidebar-scrim {
    display: none;
}

@media (max-width: 1180px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .sidebar {
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-close,
    .menu-toggle {
        display: grid;
        place-items: center;
    }

    .main-panel {
        margin-left: 0;
    }

    .sidebar-scrim {
        position: fixed;
        z-index: 20;
        inset: 0;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(64, 46, 28, .38);
        transition: opacity .2s ease, visibility .2s ease;
    }

    body.sidebar-open .sidebar-scrim {
        visibility: visible;
        opacity: 1;
    }

    .two-column {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-story {
        min-height: auto;
        padding-bottom: 45px;
    }

    .auth-story-content {
        padding: 70px 0 35px;
    }

    .auth-story h1 {
        max-width: 740px;
    }

    .auth-panel {
        min-height: auto;
        padding: 50px 22px 70px;
    }
}

@media (max-width: 680px) {
    .topbar {
        min-height: 96px;
        padding: 18px;
    }

    .top-renew {
        display: none;
    }

    .content-area {
        padding: 22px 15px 35px;
    }

    .metric-grid,
    .plan-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .field-full {
        grid-column: auto;
    }

    .metric-card {
        min-height: 126px;
    }

    .detail-list {
        grid-template-columns: 1fr;
    }

    .panel {
        padding: 18px;
        border-radius: 18px;
    }

    .panel-heading {
        flex-direction: column;
        gap: 7px;
    }

    .dashboard-footer {
        flex-direction: column;
        padding-inline: 18px;
    }

    .auth-story {
        padding: 28px 22px 42px;
    }

    .auth-story-content {
        padding: 62px 0 25px;
    }

    .auth-story h1 {
        font-size: 42px;
    }

    .auth-panel {
        padding: 35px 12px 55px;
    }

    .auth-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .auth-links {
        flex-direction: column;
    }

    .secret-row {
        align-items: stretch;
        flex-direction: column;
    }

    .choice-card {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Subscription component pricing */
.renew-addon-list {
    display: grid;
    gap: 9px;
    margin: 13px 0;
}
.renew-addon {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    align-items: start;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.48);
    cursor: pointer;
}
.renew-addon input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}
.renew-addon strong,
.renew-addon small,
.renew-user-label small {
    display: block;
}
.renew-addon small,
.renew-user-label small {
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.35;
}
.renew-user-label {
    display: grid;
    gap: 6px;
    margin: 12px 0;
    font-weight: 700;
}

/* AISE Spectrum: vivid, accessible, responsive subscriber dashboard.
   Retains dashboard classes and dark-on-light forms for readable labels. */
:root {
    --ink-950: #f7f9ff;
    --ink-900: #eef2ff;
    --ink-850: #e7edff;
    --ink-800: #dae3ff;
    --ink-700: #afbef2;
    --text: #202844;
    --muted: #60708b;
    --muted-2: #74839d;
    --line: rgba(79, 89, 151, .15);
    --gold: #f49b33;
    --gold-2: #df6b3e;
    --cyan: #089bd1;
    --blue: #346cff;
    --green: #149f83;
    --red: #df3d62;
    --violet: #7a4fee;
    --surface: rgba(255, 255, 255, .97);
    --surface-2: #f3f6ff;
    --shadow: 0 16px 42px rgba(44, 57, 119, .09);
}
html {background: #f3f6ff;}
body {
    color: var(--text);
    background:
        radial-gradient(ellipse at 85% 2%, rgba(100,112,255,.16), transparent 38rem),
        radial-gradient(ellipse at 20% 76%, rgba(6,203,191,.12), transparent 42rem),
        linear-gradient(145deg, #fafbff 0%, #eff3ff 65%, #f5f7ff 100%);
    background-size: auto;
}
h1, h2, h3, .plan-price {font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;}
.sidebar {
    background: linear-gradient(180deg, #202351 0%, #302660 53%, #272b61 100%);
    border-right: 1px solid rgba(255,255,255,.10);
    box-shadow: 12px 0 42px rgba(24,27,73,.20);
}
.sidebar .brand-mark, .sidebar .brand-mark strong,
.sidebar .subscriber-copy strong { color: #fff; }
.sidebar .brand-mark small, .sidebar .subscriber-copy small,
.sidebar .nav-label, .sidebar .plan-mini span { color: #c3c6ed; }
.sidebar .brand-glyph {
    color: white;
    background: linear-gradient(135deg,#ff658b,#a353f5 60%,#477cff);
    box-shadow: 0 9px 22px rgba(239,87,158,.22);
    border-radius: 13px;
}
.sidebar .subscriber-chip { background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); }
.sidebar .subscriber-avatar { color: #fff; background: linear-gradient(140deg,#14bdce,#526cfb); }
.sidebar .nav-link { color:#cdd3f5; }
.sidebar .nav-link:hover { color:#fff; border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.09); }
.sidebar .nav-link.is-active {
    color: #fff;
    border-color: rgba(143,130,255,.35);
    background: linear-gradient(105deg, rgba(131,83,253,.49), rgba(39,182,235,.21));
}
.sidebar .nav-link.is-active::after {background:#5aebdd; box-shadow:0 0 12px rgba(77,232,207,.5);}
.sidebar .plan-mini {background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.13);}
.sidebar .plan-mini strong {color:#fff;}
.sidebar .logout-btn {color:#ffe5f0; border:1px solid rgba(255,255,255,.2); background:rgba(247,106,147,.09);}
.sidebar .logout-btn:hover {background:rgba(247,106,147,.23);}
.sidebar .sidebar-close {color:#fff;}
.topbar {
    color: #fff;
    border-bottom: 0;
    background: linear-gradient(112deg,#334cc0 0%,#713bcd 53%,#a347c2 100%);
    box-shadow: 0 10px 28px rgba(73,66,172,.13);
}
.topbar h1 {color:#fff; font-weight:800;}
.topbar .eyebrow {color:#e7e6ff;}
.topbar .page-subtitle {color:#f1e9ff;}
.top-renew {
    color:#272656;
    background: linear-gradient(120deg,#ffda70,#ffac81);
    box-shadow:0 9px 20px rgba(28,26,110,.17);
}
.top-renew:hover {filter:brightness(1.05); transform:translateY(-1px);}
.menu-toggle {color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.14);}
.metric-card {border:1px solid rgba(255,255,255,.65); box-shadow:0 14px 32px rgba(44,57,119,.12);}
.metric-card::after {height:170px; width:170px; top:-90px; right:-85px; opacity:.6;}
.metric-gold {background:linear-gradient(145deg,#fff0c6,#ffdbd0); --metric-glow:rgba(255,144,95,.40);}
.metric-blue {background:linear-gradient(145deg,#d9e8ff,#d6e1ff); --metric-glow:rgba(96,122,255,.36);}
.metric-green {background:linear-gradient(145deg,#d5fff0,#c6f2ef); --metric-glow:rgba(37,190,151,.34);}
.metric-violet {background:linear-gradient(145deg,#eadfff,#f5d7ee); --metric-glow:rgba(189,111,236,.33);}
.metric-card .metric-label {color:#42516c;}
.metric-card strong {color:#1f315c;font-weight:850;}
.metric-card small {color:#526580;}
.metric-gold .metric-pip {background:#f18926;box-shadow:0 0 0 5px rgba(241,137,38,.17);}
.metric-blue .metric-pip {background:#4471fb;box-shadow:0 0 0 5px rgba(68,113,251,.17);}
.metric-green .metric-pip {background:#11ad85;box-shadow:0 0 0 5px rgba(17,173,133,.17);}
.metric-violet .metric-pip {background:#a35be3;box-shadow:0 0 0 5px rgba(163,91,227,.17);}
.panel, .plan-card, .auth-card {background:rgba(255,255,255,.97); border:1px solid rgba(94,111,192,.13);}
.panel-heading h2, .panel-heading h3 {color:#26385d;}
.plan-card.featured {border:2px solid rgba(112,81,241,.35); background:linear-gradient(145deg,rgba(238,232,255,.9),#fff 62%);}
.plan-card:nth-child(4n + 1) {border-top:4px solid #f6a338;}
.plan-card:nth-child(4n + 2) {border-top:4px solid #7661ea;}
.plan-card:nth-child(4n + 3) {border-top:4px solid #00b7ac;}
.plan-card:nth-child(4n + 4) {border-top:4px solid #e667aa;}
.plan-price {color:#283d79;}
.plan-tag {color:#6946ca; background:#efeaff;}
.btn, .top-renew, .quick-action, .renew-addon {transition:transform .17s ease, filter .17s ease, box-shadow .17s ease;}
.btn:not(.btn-secondary) {color:#fff; background:linear-gradient(115deg,#514ff1,#9c4def);box-shadow:0 7px 16px rgba(91,78,216,.16);}
.btn:not(.btn-secondary):hover {filter:brightness(1.07); transform:translateY(-1px);}
.btn-secondary {border-color:#d5def4; color:#40518d; background:#f3f6ff;}
.btn-secondary:hover {background:#e5ecff;}
.renew-addon {background:linear-gradient(100deg,#f8faff,#f3f0ff);border-color:#dce3fa;}
.renew-addon:has(input:checked) {border-color:#8875ef;box-shadow:0 0 0 2px rgba(119,96,236,.08);}
.renew-addon input {accent-color:#7554ed;}
.input:focus, input:focus, select:focus {outline-color:#7554ed;}
.quick-action {background:linear-gradient(120deg,#fff,#f8f9ff);}
.quick-action:nth-child(4n + 1) .quick-icon {background:linear-gradient(130deg,#eae4ff,#dccbff);color:#7047d1;}
.quick-action:nth-child(4n + 2) .quick-icon {background:linear-gradient(130deg,#d7f9f4,#b9f5e4);color:#058c7a;}
.quick-action:nth-child(4n + 3) .quick-icon {background:linear-gradient(130deg,#ffeed0,#ffdbcb);color:#c1662e;}
.quick-action:nth-child(4n + 4) .quick-icon {background:linear-gradient(130deg,#dbe8ff,#c9e0ff);color:#385fd2;}
.quick-action:hover {border-color:#aca4eb;box-shadow:0 12px 25px rgba(81,73,159,.13);}
.progress-bar {background:linear-gradient(90deg,#05c0aa,#5d7bf8,#af63ed);}
.price-preview {color:#6449ca;font-weight:800;}
.text-link {color:#6156d9;}
.badge-active, .badge-paid {color:#047d67;background:#d7faed;}
.badge-pending {color:#8e6314;background:#fff2cd;}
.auth-story {background:linear-gradient(150deg,#242a6b,#5940b9 58%,#aa4baf);}
.auth-story, .auth-story h1, .auth-story .brand-mark, .auth-story .brand-mark strong {color:#fff;}
.auth-story .brand-mark small, .auth-story p, .auth-story .story-points {color:#edf0ff;}
.sweet-overlay {background:rgba(19,23,61,.66);}
.sweet-alert {border-radius:20px;box-shadow:0 26px 70px rgba(27,30,84,.27);font-family:Inter,ui-sans-serif,system-ui,Arial,sans-serif;}
.sweet-alert h2 {font-size:25px;color:#293357;line-height:1.23;}
.sweet-alert p {color:#62718a;line-height:1.5;}
.sweet-alert input {font-size:16px;border-radius:11px;border-color:#cbd6ee;}
.sweet-alert input:focus {border-color:#7554ed;box-shadow:0 0 0 3px rgba(117,84,237,.12);}
.sweet-alert button {border-radius:11px;}
.sweet-alert button.cancel {background:#edf0f9;color:#3b4662;}
@media(max-width:760px) {
    .topbar {background:linear-gradient(117deg,#364fc1,#8150bd);}
    .sidebar {box-shadow:12px 0 40px rgba(24,27,73,.34);}
    .sweet-alert h2 {font-size:20px;}
}
/* AI Sub Editor Gold Edition — subscriber dashboard, 10 October 2026.
   Matches the desktop application's gold #d0b600, charcoal #232323 and black.
   Deliberately NO rounded corners on boxes, buttons, dialogs or form inputs. */
:root {
    color-scheme: dark;
    --ink-950: #0e0e0e;
    --ink-900: #161616;
    --ink-850: #1c1c1c;
    --ink-800: #282828;
    --ink-700: #393939;
    --text: #f6f6f6;
    --muted: #b4b4b4;
    --muted-2: #999;
    --line: #393939;
    --gold: #d1b500;
    --gold-2: #ad9700;
    --cyan: #d6bd10;
    --blue: #3b97d3;
    --green: #00b78e;
    --red: #f05a58;
    --violet: #a792e8;
    --surface: #202020;
    --surface-2: #272727;
    --shadow: 0 12px 25px rgba(0,0,0,.21);
    --radius: 0px;
    --radius-small: 0px;
}
*, *::before, *::after {border-radius:0 !important;}
html {background:#0e0e0e;}
body {background:#0e0e0e; background-image:none; color:var(--text); font-family: "Segoe UI", Inter, Arial, sans-serif;}
h1, h2, h3, .plan-price {font-family:"Segoe UI", Inter, Arial, sans-serif;}
a {color:var(--gold);}
.sidebar {background:#161616; border-right:1px solid #3a3a3a; box-shadow:5px 0 20px rgba(0,0,0,.35);}
.sidebar .brand-mark, .sidebar .brand-mark strong, .sidebar .subscriber-copy strong {color:#f9f9f9;}
.sidebar .brand-mark small, .sidebar .subscriber-copy small, .sidebar .nav-label, .sidebar .plan-mini span {color:#aaaaaa;}
.sidebar .brand-glyph {background:#d1b500; color:#141414; border:1px solid #f4db28; box-shadow:none;}
.brand-glyph::after {display:none;}
.sidebar .subscriber-chip {background:#202020; border:1px solid #353535;}
.sidebar .subscriber-avatar {background:#d1b500; color:#121212;}
.sidebar .nav-link {color:#dedede;}
.sidebar .nav-link:hover {color:#fff; border-color:#515151; background:#282828;}
.sidebar .nav-link.is-active {color:#151515; border-color:#d1b500; background:#d1b500;}
.sidebar .nav-link.is-active::after {background:#f7e044; box-shadow:none;}
.sidebar .nav-icon {background:#333; color:#ddd;}
.sidebar .nav-link.is-active .nav-icon {background:#242424; color:#e7ce0b;}
.sidebar .plan-mini {background:#202020; border-color:#383838;}
.sidebar .plan-mini strong {color:#fff;}
.sidebar .logout-btn {color:#f5f5f5; background:#2b2b2b; border-color:#555;}
.sidebar .logout-btn:hover {background:#3d3d3d; color:#fff;}
.sidebar .sidebar-close {color:#fff;}
.topbar {background:#d1b500; box-shadow:none; border-bottom:1px solid #9d8a00; color:#111;}
.topbar h1 {color:#121212;}
.topbar .eyebrow, .topbar .page-subtitle {color:#302c00;}
.top-renew {background:#1e1e1e; box-shadow:none; border:1px solid #1e1e1e; color:#fff;}
.top-renew:hover {background:#343434; filter:none; transform:none;}
.menu-toggle {background:#292929; color:#fff; border-color:#292929;}
.content-area {background:#0e0e0e;}
.dashboard-footer {border-color:#363636; color:#888;}
.metric-card, .panel, .plan-card, .auth-card, .quick-action {background:#202020; color:#f5f5f5; border:1px solid #383838; box-shadow:none;}
.metric-card {border-top:4px solid #d1b500;}
.metric-gold, .metric-blue, .metric-green, .metric-violet {background:#202020;}
.metric-gold {border-top-color:#d1b500;}
.metric-blue {border-top-color:#3b97d3;}
.metric-green {border-top-color:#00b78e;}
.metric-violet {border-top-color:#a792e8;}
.metric-card::after {display:none;}
.metric-card .metric-label, .metric-card small {color:#aaa;}
.metric-card strong {color:#f6f6f6;}
.metric-gold .metric-pip {background:#d1b500; box-shadow:none;}
.metric-blue .metric-pip {background:#3b97d3; box-shadow:none;}
.metric-green .metric-pip {background:#00b78e; box-shadow:none;}
.metric-violet .metric-pip {background:#a792e8; box-shadow:none;}
.panel-heading h2,.panel-heading h3 {color:#f9f9f9;}
.panel-heading p {color:#b8b8b8;}
.detail-list {background:#383838; border-color:#383838;}
.detail-item {background:#252525;}
.detail-item span {color:#aaa;}
.detail-item strong {color:#f6f6f6;}
.quick-action {background:#262626; color:#f2f2f2;}
.quick-action:hover {background:#303030; border-color:#d1b500; box-shadow:none;}
.quick-action:nth-child(4n + 1) .quick-icon {background:#3d3600; color:#efce00;}
.quick-action:nth-child(4n + 2) .quick-icon {background:#122c26; color:#17c9a1;}
.quick-action:nth-child(4n + 3) .quick-icon {background:#163041; color:#66bcec;}
.quick-action:nth-child(4n + 4) .quick-icon {background:#312743; color:#bca1ec;}
.quick-action small {color:#aaa;}
.table-wrap {border-color:#3b3b3b; background:#202020;}
.data-table th {background:#303030; color:#ddcb52; border-color:#424242;}
.data-table td {background:#202020; color:#f4f4f4; border-color:#363636;}
.data-table tbody tr:hover td {background:#282828;}
.data-table .cell-primary {color:#fafafa;}
.data-table .cell-secondary {color:#acacac;}
.code-last4 {font-family:Consolas,"Courier New",monospace; font-size:14px; letter-spacing:.06em; color:#ead11c; font-weight:700; white-space:nowrap;}
.badge {color:#dadada; background:#363636;}
.badge-active,.badge-paid {color:#06dfb1; background:#153e35;}
.badge-pending {color:#f5d747; background:#4a3e13;}
.badge-expired,.badge-suspended,.badge-revoked,.badge-failed {color:#ff8b8b; background:#452525;}
.badge-owner,.badge-draft,.badge-publish {color:#f2d748; background:#403918;}
.btn,.btn:not(.btn-secondary) {color:#101010; background:#d1b500; border:1px solid #d1b500; box-shadow:none;}
.btn:hover,.btn:not(.btn-secondary):hover {background:#ead012; border-color:#ead012; filter:none; transform:none;}
.btn-secondary {color:#f6f6f6; background:#383838; border:1px solid #555; box-shadow:none;}
.btn-secondary:hover {color:#fff; background:#454545; border-color:#888;}
.btn-danger {color:#fff; background:#983539; border-color:#b94c50;}
.btn-danger:hover {background:#b44146;}
.btn-ghost {color:#f6f6f6; border-color:#555; background:#282828;}
.btn-success {color:#08130d; background:#1fbf92; border-color:#1fbf92;}
.btn[disabled], button[disabled] {opacity:.52; cursor:not-allowed; transform:none !important;}
.field label {color:#eeeeee;}
.input,.select,input[type="text"],input[type="password"],input[type="email"],input[type="number"],select,textarea {background:#282828; color:#fff; border-color:#535353;}
.input::placeholder,input::placeholder,textarea::placeholder {color:#999;}
.input:focus,.select:focus,input:focus,select:focus,textarea:focus {outline:2px solid #cfb400; outline-offset:0; border-color:#d1b500; box-shadow:none;}
.select option,select option {background:#252525; color:#fff;}
input[type="checkbox"],input[type="radio"] {accent-color:#d1b500;}
.alert {background:#292929; border-color:#464646;}
.alert p {color:#dedede;}
.alert-success {border-left:4px solid #00bd8c; background:#17332c;}
.alert-error {border-left:4px solid #e14e4e; background:#3a2525;}
.alert-warning {border-left:4px solid #d1b500; background:#34300f;}
.alert-info {border-left:4px solid #429fd0; background:#1d2d37;}
.alert-close {color:#fff;}
.secret-row code {background:#111; color:#ffdf00; border:1px dashed #d1b500;}
.pagination a,.pagination span {color:#ddd;}
.pagination .current {background:#d1b500; border-color:#d1b500; color:#111;}
.plan-card.featured {background:#262314; border:2px solid #d1b500;}
.plan-card:nth-child(n) {border-top:4px solid #d1b500;}
.plan-card:nth-child(4n + 2) {border-top-color:#3b97d3;}
.plan-card:nth-child(4n + 3) {border-top-color:#00b78e;}
.plan-card:nth-child(4n + 4) {border-top-color:#a792e8;}
.plan-card > p {color:#bbb;}
.plan-price {color:#f7f7f7;}
.plan-price small {color:#aaa;}
.plan-tag {color:#efd41d; background:#40380e;}
.progress-track {background:#353535;}
.progress-bar {background:#d1b500; box-shadow:none;}
.price-preview,.text-link,.auth-links a {color:#e4ca13;}
.renew-addon {background:#282828; border-color:#464646;}
.renew-addon:has(input:checked) {background:#342f0e; border-color:#d1b500; box-shadow:none;}
.renew-addon small,.renew-user-label small {color:#bcbcbc;}
.renew-addon input {accent-color:#d1b500;}
.choice-card {background:#282828; border-color:#494949;}
.choice-card small {color:#aaa;}
.auth-story {background:#d1b500; color:#161616;}
.auth-story .brand-mark,.auth-story .brand-mark strong {color:#161616;}
.auth-story .brand-mark small,.auth-story p,.auth-story .story-points {color:#373100;}
.auth-story h1 {color:#141414;}
.auth-story-content > p,.story-points span {color:#292500;}
.auth-story::before,.auth-story::after {display:none;}
.auth-story .story-kicker {background:#1a1a1a; color:#efdb4b;}
.story-points b {color:#ffdc00; background:#262626; border-color:#262626;}
.auth-copyright {color:#383400;}
.auth-panel {background:#0e0e0e;}
.auth-card {background:#222; border-color:#474747;}
.auth-card-heading p {color:#bcbcbc;}
.auth-card-heading h2 {color:#fff;}
.sweet-overlay {background:rgba(0,0,0,.78);}
.sweet-alert {background:#202020; border:1px solid #d1b500; color:#f5f5f5; box-shadow:0 20px 65px #000b; font-family:"Segoe UI",Arial,sans-serif;}
.sweet-alert h2 {color:#f9f9f9; font-weight:700;}
.sweet-alert p {color:#d1d1d1;}
.sweet-alert input {background:#292929; color:#fff; border:1px solid #666;}
.sweet-alert input:focus {border-color:#d1b500; box-shadow:0 0 0 2px rgba(209,181,0,.22);}
.sweet-alert button {background:#d1b500; color:#161616;}
.sweet-alert button:hover {background:#ead012;}
.sweet-alert button.cancel {background:#424242; color:#f5f5f5;}
.sweet-alert button.cancel:hover {background:#555;}
.sweet-alert .sa-error-container {background:#393127;}
.sweet-alert .sa-error-container p {color:#fff;}
@media(max-width:760px) {
    .topbar {background:#d1b500;}
    .sidebar {box-shadow:10px 0 35px #0009;}
    .table-wrap {overflow-x:auto;}
}

/* Device List actions: one horizontal row on desktop and mobile.
   On narrow screens the existing .table-wrap provides horizontal scrolling. */
.device-list-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content;
    white-space: nowrap;
}
.device-list-actions form {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}
.device-list-actions .btn {
    flex-shrink: 0;
    white-space: nowrap;
    width: auto;
}