/* FREE LINE Collections — النسخة التجريبية. نفس رموز الهوية في النظام الحقيقي. */

:root {
    --brand-50: #f0f9f5;
    --brand-100: #dcf1e7;
    --brand-200: #b4e2cc;
    --brand-300: #7ecdab;
    --brand-500: #189a6c;
    --brand-700: #046b48;
    --brand-800: #005538;
    --brand-900: #003f2a;
    --brand-950: #002a1c;
    --gold-100: #faf1df;
    --gold-300: #ebce93;
    --gold-400: #ddb55c;
    --gold-500: #c99a2e;
    --gold-600: #a9811f;

    --canvas: #f7f7f3;
    --surface: #ffffff;
    --subtle: #f4f5f1;
    --line: #e6e8e1;
    --line-strong: #d4d8ce;
    --ink: #18201d;
    --ink-2: #4a544f;
    --ink-3: #6b756f;

    --positive: #0c8259;
    --positive-soft: #e7f5ef;
    --warning: #8c6a1e;
    --warning-soft: #fbf3e2;
    --negative: #b3261e;
    --negative-soft: #fceceb;
    --info: #35606f;
    --info-soft: #eaf2f5;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgb(16 24 20 / .04), 0 1px 3px rgb(16 24 20 / .06);
    --shadow-pop: 0 12px 32px -8px rgb(16 24 20 / .22), 0 4px 12px -4px rgb(16 24 20 / .1);
    --font: 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif;
    color-scheme: light;
}

/* الوضع الداكن — نفس رموز الوضع الداكن في النظام الحقيقي. */
@media (prefers-color-scheme: dark) {
    :root {
        --brand-50: #12291f;
        --brand-100: #173a2b;
        --gold-100: #33290f;
        --canvas: #0d1411;
        --surface: #141d18;
        --subtle: #1a241f;
        --line: #26312b;
        --line-strong: #33403a;
        --ink: #e9efeb;
        --ink-2: #aab5af;
        --ink-3: #8b9791;
        --positive: #45b389;
        --positive-soft: #123328;
        --warning: #ddb55c;
        --warning-soft: #33290f;
        --negative: #e88079;
        --negative-soft: #381a18;
        --info: #8fbccb;
        --info-soft: #16292f;
        --shadow: 0 1px 2px rgb(0 0 0 / .3);
        --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / .6);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }
.tnum, td, th, .money { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================ شاشة الدخول */

.entry {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.entry-brand {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 90% at 85% 10%, #0b5a3d 0%, var(--brand-900) 45%, var(--brand-950) 100%);
    color: #fff;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.entry-brand .mark-wrap {
    width: 108px; height: 108px;
    background: #fff;
    border-radius: 26px;
    padding: 10px;
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45);
}

.entry-brand h1 {
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    max-width: 14ch;
}

.entry-brand .lede { color: var(--brand-200); font-size: 17px; max-width: 42ch; margin-top: 14px; }

/* مسار المبلغ الكبير — الحركة الوحيدة التلقائية في الموقع */
.journey { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.journey li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 20px; }
.journey li:last-child { padding-bottom: 0; }
.journey .dot {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgb(255 255 255 / .06);
    border: 1.5px solid rgb(255 255 255 / .22);
    font-weight: 700; font-size: 13px; color: var(--gold-300);
    position: relative; z-index: 1;
    animation: dot-on .5s ease forwards;
    animation-delay: calc(var(--i) * .38s + .2s);
}
.journey li:not(:last-child)::after {
    content: ""; position: absolute; inset-inline-start: 16px; top: 34px; bottom: 0; width: 2px;
    background: linear-gradient(var(--gold-400), var(--gold-500));
    transform-origin: top; transform: scaleY(0);
    animation: line-draw .38s ease-out forwards;
    animation-delay: calc(var(--i) * .38s + .45s);
}
.journey b { display: block; font-size: 15px; font-weight: 600; }
.journey span { display: block; font-size: 13px; color: var(--brand-200); }

@keyframes dot-on {
    to { background: var(--gold-500); border-color: var(--gold-400); color: var(--brand-950); }
}
@keyframes line-draw { to { transform: scaleY(1); } }

.entry-brand .foot { font-size: 12.5px; color: var(--brand-300); }

.entry-main {
    padding: 48px clamp(20px, 5vw, 64px);
    display: flex; flex-direction: column; justify-content: center; gap: 28px;
    max-width: 640px; width: 100%; justify-self: center;
}
.entry-main h2 { font-size: 26px; font-weight: 700; }
.entry-main .sub { color: var(--ink-2); margin-top: 6px; }

.roles { display: grid; gap: 12px; }
.role {
    display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px;
    text-align: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; cursor: pointer; box-shadow: var(--shadow);
    transition: border-color .15s, box-shadow .15s;
}
.role:hover { border-color: var(--brand-300); box-shadow: var(--shadow-pop); }
.role .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-50); color: var(--brand-800); display: grid; place-items: center; }
.role b { display: block; font-size: 16px; }
.role small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.role .go { color: var(--brand-700); font-weight: 600; font-size: 13.5px; white-space: nowrap; }

.note {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13px; color: var(--ink-2);
    background: var(--subtle); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
    padding: 12px 14px;
}

/* ============================================================ الهيكل */

.shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }

.side {
    position: sticky; top: 0; height: 100vh;
    background: var(--brand-900); color: #fff;
    display: flex; flex-direction: column;
    padding: 18px 14px;
    overflow-y: auto;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.side-brand .logo { width: 42px; height: 42px; background: #fff; border-radius: 11px; padding: 4px; }
.side-brand b { display: block; font-size: 15px; letter-spacing: .02em; }
.side-brand small { display: block; font-size: 11px; color: var(--gold-300); font-weight: 600; letter-spacing: .08em; }

.nav-group { font-size: 12px; color: var(--brand-300); padding: 14px 10px 6px; }
.nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: 10px;
    color: rgb(255 255 255 / .86); font-size: 14.5px; font-weight: 500;
}
.nav a:hover { background: rgb(255 255 255 / .07); text-decoration: none; }
.nav a[aria-current="page"] { background: #fff; color: var(--brand-900); font-weight: 600; }
.nav a[aria-current="page"] svg { color: var(--gold-500); }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav .count { margin-inline-start: auto; background: var(--gold-500); color: var(--brand-950); font-size: 11px; font-weight: 700; border-radius: 99px; padding: 0 7px; }

.side-user {
    margin-top: auto; padding: 12px; border-radius: 12px;
    background: rgb(255 255 255 / .06);
    display: grid; gap: 10px;
}
.side-user .who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--gold-500); color: var(--brand-950); display: grid; place-items: center; font-weight: 700; flex: none; }
.side-user b { display: block; font-size: 14px; }
.side-user small { display: block; font-size: 12px; color: var(--brand-200); }
.side-user select {
    width: 100%; background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .18);
    border-radius: 8px; padding: 6px 8px; font-size: 13px;
}
.side-user select option { color: var(--ink); }
.side-user button { background: none; border: 0; color: var(--brand-200); font-size: 12.5px; cursor: pointer; padding: 0; text-align: start; }
.side-user button:hover { color: #fff; text-decoration: underline; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    background: rgb(247 247 243 / .9); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    padding: 12px 28px;
}
.top .crumb { font-weight: 600; }
.top .clock { margin-inline-start: auto; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.top .clock bdi { color: var(--ink-2); font-weight: 500; }
.menu-btn { display: none; place-items: center; width: 38px; height: 38px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--brand-900); flex: none; }
.menu-btn svg { width: 22px; height: 22px; }
.demo-pill { background: var(--gold-100); color: var(--warning); border: 1px solid var(--gold-300); font-size: 12px; font-weight: 600; border-radius: 99px; padding: 2px 10px; white-space: nowrap; }

.content { padding: 26px 28px 80px; max-width: 1400px; width: 100%; display: grid; gap: 22px; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.page-head .tile { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-900); color: var(--gold-300); display: grid; place-items: center; flex: none; }
.page-head .tile svg { width: 22px; height: 22px; }
.page-head h1 { font-size: 24px; font-weight: 700; line-height: 1.3; }
.page-head p { color: var(--ink-3); font-size: 14px; }
.page-head .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================ مكوّنات */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-head h2 { font-size: 16px; font-weight: 600; }
.card-head p { font-size: 12.5px; color: var(--ink-3); flex-basis: 100%; margin-top: -4px; }
.card-head .end { margin-inline-start: auto; display: flex; gap: 8px; }
.card-body { padding: 18px; }

.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }

.stat { padding: 16px 18px; display: grid; gap: 4px; }
.stat .label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.stat .value { font-size: 24px; font-weight: 700; }
.stat .hint { font-size: 12px; color: var(--ink-3); }
.stat.accent { border-top: 3px solid var(--gold-500); }

.money { white-space: nowrap; }
.money b { font-weight: 700; }
.money small { font-size: .72em; color: var(--ink-3); font-weight: 600; margin-inline-start: 3px; }
.money.pos b { color: var(--positive); }
.money.neg b { color: var(--negative); }
.money.gold b { color: var(--gold-600); }

.table-wrap { overflow-x: auto; }
.table th {
    text-align: start; font-size: 12.5px; font-weight: 600; color: var(--ink-3);
    background: var(--subtle); padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--line);
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: end; }
.table .sub { display: block; font-size: 12px; color: var(--ink-3); }
.table tbody tr:hover { background: #fbfbf8; }

.empty { padding: 36px 18px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 4px; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 2px 9px; white-space: nowrap; border: 1px solid transparent; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.positive { background: var(--positive-soft); color: var(--positive); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.negative { background: var(--negative-soft); color: var(--negative); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.neutral { background: var(--subtle); color: var(--ink-2); border-color: var(--line); }
.badge.company { background: var(--brand-50); color: var(--brand-800); }
.badge.company::before { display: none; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 10px; border: 1px solid transparent;
    padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: background .15s, border-color .15s;
}
.btn svg { width: 17px; height: 17px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand-900); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-800); }
.btn-gold { background: var(--gold-500); color: var(--brand-950); }
.btn-gold:hover:not(:disabled) { background: var(--gold-400); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover:not(:disabled) { border-color: var(--brand-300); }
.btn-ghost { background: none; color: var(--brand-700); padding-inline: 8px; }
.btn-sm { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
a.btn:hover { text-decoration: none; }

.form { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 5px; align-content: start; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field label .req { color: var(--negative); }
.input {
    width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
    padding: 9px 12px; font-size: 14.5px; min-height: 42px;
}
.input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgb(24 154 108 / .15); }
.input[readonly] { background: var(--subtle); color: var(--ink-2); }
.input.ltr { direction: ltr; text-align: left; }
.field .hint { font-size: 12px; color: var(--ink-3); }
.field .err { font-size: 12.5px; color: var(--negative); font-weight: 500; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; font-size: 14px; border: 1px solid; }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert.info { background: var(--info-soft); color: var(--info); border-color: rgb(53 96 111 / .2); }
.alert.warning { background: var(--warning-soft); color: var(--warning); border-color: rgb(169 129 31 / .25); }
.alert.negative { background: var(--negative-soft); color: var(--negative); border-color: rgb(179 38 30 / .2); }
.alert.positive { background: var(--positive-soft); color: var(--positive); border-color: rgb(12 130 89 / .2); }

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 18px; }
.dl dt { font-size: 12.5px; color: var(--ink-3); }
.dl dd { margin: 2px 0 0; font-weight: 600; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.filters .input { width: auto; min-width: 150px; flex: 1 1 150px; min-height: 38px; padding-block: 6px; }
.filters .input[type="search"] { flex: 3 1 240px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { padding: 7px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.tabs a:hover { text-decoration: none; border-color: var(--brand-300); }
.tabs a[aria-current="page"] { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }

/* ============================================================ مسار المبلغ */

.trail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 22px 18px 18px; }
.trail .step { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding-inline: 4px; }
.trail .step::before {
    content: ""; position: absolute; top: 15px; inset-inline-start: 50%; width: 100%; height: 3px;
    background: var(--line);
}
.trail .step:last-child::before { display: none; }
.trail .step.done::before { background: var(--gold-500); }
.trail .pin {
    position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-strong);
    color: var(--ink-3); font-size: 13px; font-weight: 700;
}
.trail .step.done .pin { background: var(--gold-500); border-color: var(--gold-500); color: var(--brand-950); }
.trail .step.here .pin { background: var(--brand-900); border-color: var(--brand-900); color: #fff; box-shadow: 0 0 0 5px var(--brand-100); }
.trail .step b { font-size: 13px; font-weight: 600; }
.trail .step span { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.trail .step.here b { color: var(--brand-900); }

/* ============================================================ دليل التجربة */

.tour {
    position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 40;
    width: 320px; max-width: calc(100vw - 40px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}
.tour summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; font-weight: 600; font-size: 14px;
}
.tour summary::-webkit-details-marker { display: none; }
.tour .bar { flex: 1; height: 6px; background: var(--subtle); border-radius: 99px; overflow: hidden; }
.tour .bar i { display: block; height: 100%; background: var(--gold-500); border-radius: 99px; transition: width .4s ease; }
.tour ol { margin: 0; padding: 4px 14px 14px; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.tour li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 8px; font-size: 13.5px; align-items: start; }
.tour li::before {
    content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 700; background: var(--subtle); color: var(--ink-3); border: 1px solid var(--line-strong);
}
.tour li.ok::before { content: "✓"; background: var(--positive); color: #fff; border-color: var(--positive); }
.tour li.ok span { color: var(--ink-3); text-decoration: line-through; }
.tour li small { display: block; color: var(--ink-3); font-size: 12px; }

/* ============================================================ حوار / تنبيهات */

.dialog { border: 0; border-radius: var(--radius); padding: 0; background: var(--surface); color: var(--ink); width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-pop); }
.dialog::backdrop { background: rgb(0 42 28 / .55); }
.dialog form { padding: 22px; display: grid; gap: 12px; }
.dialog-title { font-weight: 700; font-size: 17px; }
.dialog-body { color: var(--ink-2); font-size: 14.5px; }
.dialog-actions { display: flex; gap: 8px; margin-top: 6px; }

.toasts { position: fixed; top: 16px; inset-inline-start: 50%; transform: translateX(50%); z-index: 60; display: grid; gap: 8px; width: min(460px, calc(100vw - 32px)); }
.toast { background: var(--brand-900); color: #fff; border-radius: 12px; padding: 11px 16px; font-size: 14px; box-shadow: var(--shadow-pop); animation: toast-in .25s ease; }
.toast.error { background: var(--negative); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: grid; gap: 10px; }

/* ============================================================ الجوال */

@media (max-width: 1100px) {
    .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .entry { grid-template-columns: 1fr; }
    .entry-brand { padding: 32px 22px; }
    .shell { grid-template-columns: 1fr; }
    .side {
        position: fixed; inset-block: 0; inset-inline-start: 0; width: 280px; z-index: 50;
        transform: translateX(100%); transition: transform .25s ease;
    }
    .shell.nav-open .side { transform: none; box-shadow: var(--shadow-pop); }
    .shell.nav-open::after { content: ""; position: fixed; inset: 0; background: rgb(0 42 28 / .45); z-index: 45; }
    .menu-btn { display: inline-grid; }
    .top { padding: 10px 16px; }
    .top .clock { display: none; }
    .content { padding: 18px 16px 110px; }
    .cols-2, .cols-3 { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .trail { grid-template-columns: 1fr; gap: 0; padding: 16px 18px; }
    .trail .step { grid-template-columns: 32px 1fr; justify-items: start; text-align: start; column-gap: 12px; row-gap: 0; padding: 0 0 14px; }
    .trail .step .pin { grid-row: span 2; }
    .trail .step::before { top: 32px; inset-inline-start: 15px; width: 3px; height: 100%; }
    .tour { inset-inline: 12px; width: auto; bottom: 12px; }
}

@media (max-width: 560px) {
    .cols-4 { grid-template-columns: 1fr; }
    .page-head h1 { font-size: 20px; }
    .role { grid-template-columns: 42px 1fr; }
    .role .go { display: none; }
}

/* مكوّنات الوضع الداكن — في آخر الملف لتتغلب على القواعد الأساسية بنفس الخصوصية. */
@media (prefers-color-scheme: dark) {
    a { color: var(--brand-300); }
    .top { background: rgb(13 20 17 / .9); }
    .side { background: var(--brand-950); border-inline-end: 1px solid var(--line); }
    .btn-primary, .tabs a[aria-current="page"] { background: var(--brand-700); border-color: var(--brand-700); }
    .btn-primary:hover:not(:disabled) { background: var(--brand-500); }
    .role .ico, .badge.company { color: var(--brand-300); }
    .money.gold b { color: var(--gold-400); }
    .table tbody tr:hover { background: #18221d; }
    .demo-pill { color: var(--gold-300); border-color: var(--gold-600); }
    .role:hover { border-color: var(--brand-700); }
    .nav a[aria-current="page"] { color: var(--brand-900); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition: none !important; }
}