/* ============================================================
   Sulin Dental & Ortho — Modern Design System
   One stylesheet for the whole app.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
    /* Brand — a refined version of the clinic's rose identity */
    --brand:        #e85d8a;
    --brand-600:    #d6477a;
    --brand-700:    #be3a6a;
    --brand-300:    #f6a6c1;
    --brand-100:    #fde3ec;
    --brand-50:     #fff5f9;

    /* Neutrals */
    --ink:          #1f2a37;
    --ink-soft:     #475467;
    --muted:        #98a2b3;
    --bg:           #f5f6fb;
    --surface:      #ffffff;
    --surface-2:    #fafbfd;
    --line:         #eaecf2;

    /* States */
    --success:      #12b76a;
    --success-bg:   #e7f7ef;
    --danger:       #f04438;
    --danger-bg:    #fdecea;
    --warn:         #f79009;
    --info:         #2e90fa;

    /* Effects */
    --radius:       16px;
    --radius-sm:    11px;
    --radius-lg:    22px;
    --shadow-sm:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
    --shadow:       0 4px 12px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04);
    --shadow-lg:    0 24px 48px -12px rgba(16,24,40,.18);
    --shadow-brand: 0 10px 24px -6px rgba(232,93,138,.45);
    --ring:         0 0 0 4px rgba(232,93,138,.16);

    --sidebar-w:    260px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5{ font-family:'Poppins', sans-serif; color:var(--ink); line-height:1.25; font-weight:600; }
a{ color:inherit; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#d7dbe7; border-radius:20px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#c3c9da; background-clip:content-box; }

/* ============================================================
   AUTH SCREENS (login / patient login)
   ============================================================ */
.auth-wrap{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:24px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(1100px 600px at 100% -10%, var(--brand-100), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, #e6ecff, transparent 55%),
        var(--bg);
}
.auth-card{
    width:100%;
    max-width:420px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:40px 34px;
    position:relative;
    z-index:2;
    animation:rise .5s ease;
}
.auth-logo{
    width:64px; height:64px; border-radius:18px;
    display:grid; place-items:center;
    margin:0 auto 18px;
    background:linear-gradient(135deg, var(--brand), var(--brand-600));
    color:#fff; font-size:1.6rem;
    box-shadow:var(--shadow-brand);
}
.auth-card h1{ text-align:center; font-size:1.5rem; }
.auth-card .sub{ text-align:center; color:var(--muted); margin-top:6px; margin-bottom:26px; font-size:.93rem; }
.auth-card form{ display:flex; flex-direction:column; gap:18px; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label, .lbl{
    font-size:.82rem; font-weight:600; color:var(--ink-soft);
    letter-spacing:.01em;
}
.input, input[type=text], input[type=password], input[type=number],
input[type=date], input[type=search], textarea, select{
    width:100%;
    font-family:inherit; font-size:.95rem; color:var(--ink);
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:var(--radius-sm);
    padding:11px 14px;
    outline:none;
    transition:border-color .18s, box-shadow .18s, background .18s;
}
.input::placeholder, input::placeholder, textarea::placeholder{ color:#b3bac7; }
.input:focus, input:focus, textarea:focus, select:focus{
    border-color:var(--brand-300);
    box-shadow:var(--ring);
    background:var(--brand-50);
}
textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.input-icon{ position:relative; }
.input-icon i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.input-icon .input, .input-icon input{ padding-left:42px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
    --bg:var(--brand); --fg:#fff;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:'Inter',sans-serif; font-size:.95rem; font-weight:600;
    padding:11px 20px; border:none; border-radius:var(--radius-sm);
    background:var(--bg); color:var(--fg);
    cursor:pointer; text-decoration:none; white-space:nowrap;
    transition:transform .12s, box-shadow .18s, background .18s, filter .18s;
    box-shadow:var(--shadow-sm);
}
.btn:hover{ filter:brightness(1.04); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }
.btn-block{ width:100%; }
.btn-lg{ padding:13px 26px; font-size:1rem; }
.btn-brand{ background:linear-gradient(135deg, var(--brand), var(--brand-600)); box-shadow:var(--shadow-brand); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.btn-ghost:hover{ background:var(--surface-2); border-color:#dfe3ec; filter:none; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-success{ background:var(--success); }
.btn-danger{ background:var(--danger); }
.btn-soft{ background:var(--brand-100); color:var(--brand-700); box-shadow:none; }
.btn-soft:hover{ background:var(--brand-300); color:#fff; filter:none; }

/* round icon back button */
.iconbtn{
    width:42px; height:42px; border-radius:12px;
    display:inline-grid; place-items:center;
    background:var(--surface); color:var(--ink);
    border:1.5px solid var(--line); cursor:pointer; text-decoration:none;
    transition:.18s; flex:none;
}
.iconbtn:hover{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--shadow-brand); }

/* ============================================================
   APP SHELL (sidebar + content)
   ============================================================ */
.shell{ min-height:100dvh; display:flex; }

.sidebar{
    width:var(--sidebar-w); flex:none;
    background:var(--surface);
    border-right:1px solid var(--line);
    padding:22px 16px;
    display:flex; flex-direction:column;
    position:sticky; top:0; height:100dvh;
    z-index:40;
}
.brand{
    display:flex; align-items:center; gap:12px;
    padding:6px 8px 20px;
    border-bottom:1px solid var(--line);
    margin-bottom:14px;
}
.brand .mark{
    width:42px; height:42px; border-radius:12px; flex:none;
    display:grid; place-items:center; color:#fff; font-size:1.1rem;
    background:linear-gradient(135deg, var(--brand), var(--brand-600));
    box-shadow:var(--shadow-brand);
}
.brand .name{ font-family:'Poppins'; font-weight:600; font-size:1.02rem; line-height:1.15; }
.brand .role{ font-size:.74rem; color:var(--muted); }

.nav{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.nav .nav-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:14px 12px 6px; }
.nav a{
    display:flex; align-items:center; gap:13px;
    padding:11px 13px; border-radius:11px;
    color:var(--ink-soft); text-decoration:none; font-weight:500; font-size:.93rem;
    transition:.16s;
}
.nav a i{ width:20px; text-align:center; font-size:1rem; color:var(--muted); transition:.16s; }
.nav a:hover{ background:var(--surface-2); color:var(--ink); }
.nav a:hover i{ color:var(--brand); }
.nav a.active{ background:linear-gradient(135deg, var(--brand), var(--brand-600)); color:#fff; box-shadow:var(--shadow-brand); }
.nav a.active i{ color:#fff; }
.nav .logout{ margin-top:auto; }
.nav .logout a{ color:var(--danger); }
.nav .logout a i{ color:var(--danger); }
.nav .logout a:hover{ background:var(--danger-bg); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
    height:72px; flex:none;
    background:rgba(255,255,255,.8); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:14px;
    padding:0 26px; position:sticky; top:0; z-index:30;
}
.topbar .menu-toggle{ display:none; }
.topbar h2{ font-size:1.18rem; }
.topbar .crumb{ color:var(--muted); font-size:.85rem; font-weight:500; }
.topbar .spacer{ flex:1; }
.topbar .date-chip{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--surface); border:1px solid var(--line);
    padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:500; color:var(--ink-soft);
}
.topbar .date-chip i{ color:var(--brand); }

.content{ padding:28px; flex:1; }
.page-head{ margin-bottom:22px; }
.page-head h1{ font-size:1.55rem; }
.page-head p{ color:var(--muted); margin-top:4px; }

/* sidebar overlay (mobile) */
.scrim{ display:none; position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:39; }

/* ============================================================
   CARDS / GRID
   ============================================================ */
.card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.card-pad{ padding:22px 24px; }
.card-head{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line); }
.card-head h3{ font-size:1.05rem; }
.card-head .pill{ margin-left:auto; }

.grid{ display:grid; gap:18px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }

/* stat cards */
.stat{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
    transition:transform .15s, box-shadow .2s;
}
.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.stat .ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.2rem; margin-bottom:14px; }
.stat .ic.rose{ background:var(--brand-100); color:var(--brand-600); }
.stat .ic.blue{ background:#e6f1ff; color:var(--info); }
.stat .ic.green{ background:var(--success-bg); color:var(--success); }
.stat .ic.amber{ background:#fff3e0; color:var(--warn); }
.stat .num{ font-family:'Poppins'; font-size:1.7rem; font-weight:600; }
.stat .lbl-txt{ color:var(--muted); font-size:.86rem; }

/* quick action tiles */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile{
    display:flex; flex-direction:column; gap:12px;
    padding:22px; border-radius:var(--radius); text-decoration:none;
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
    color:var(--ink); transition:.18s;
}
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-300); }
.tile .ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem;
    background:linear-gradient(135deg, var(--brand-100), var(--surface)); color:var(--brand-600); }
.tile h4{ font-size:1rem; }
.tile span{ color:var(--muted); font-size:.84rem; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap{ overflow:auto; border-radius:var(--radius); }
table.data{ width:100%; border-collapse:collapse; background:var(--surface); }
table.data thead th{
    text-align:left; font-family:'Inter'; font-weight:600; font-size:.76rem;
    text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
    padding:14px 18px; background:var(--surface-2); border-bottom:1px solid var(--line);
    white-space:nowrap;
}
table.data tbody td{ padding:14px 18px; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-soft); }
table.data tbody tr{ transition:background .15s; }
table.data tbody tr:hover{ background:var(--brand-50); }
table.data tbody tr:last-child td{ border-bottom:none; }
table.data td .name-strong{ font-weight:600; color:var(--ink); }
.empty{ text-align:center; color:var(--muted); padding:42px 18px !important; }
.empty i{ font-size:1.6rem; display:block; margin-bottom:8px; color:var(--brand-300); }

/* avatar bubble for tables */
.av{ width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center;
    background:var(--brand-100); color:var(--brand-700); font-weight:600; font-size:.85rem; margin-right:10px; }
.cell-user{ display:flex; align-items:center; }

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
    padding:5px 11px; border-radius:999px; }
.pill.green{ background:var(--success-bg); color:var(--success); }
.pill.red{ background:var(--danger-bg); color:var(--danger); }
.pill.grey{ background:#eef1f6; color:var(--ink-soft); }
.pill.rose{ background:var(--brand-100); color:var(--brand-700); }
.yes-no{ font-weight:600; }
.yes-no.yes{ color:var(--success); }
.yes-no.no{ color:var(--danger); }

/* ============================================================
   PATIENT DETAIL — info grid
   ============================================================ */
.info-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.info-cell{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.info-cell .k{ font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.info-cell .v{ font-size:1.02rem; font-weight:600; color:var(--ink); margin-top:4px; word-break:break-word; }
.util-row{ display:flex; gap:12px; flex-wrap:wrap; }
.util{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:12px 16px; font-weight:600; }
.util .dot{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:.72rem; }
.util .dot.on{ background:var(--success); }
.util .dot.off{ background:#cfd5e0; }

.cost-banner{
    background:linear-gradient(135deg, var(--brand), var(--brand-600));
    color:#fff; border-radius:var(--radius); padding:22px 26px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:var(--shadow-brand);
}
.cost-banner .label{ opacity:.9; font-size:.9rem; }
.cost-banner .amount{ font-family:'Poppins'; font-size:2rem; font-weight:700; }
.cost-banner .ic{ font-size:2rem; opacity:.85; }

/* ============================================================
   IMAGE GALLERY
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.gcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow-sm); transition:.18s; }
.gcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.gcard .thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; cursor:zoom-in; display:block; background:var(--surface-2); }
.gcard .bar{ display:flex; padding:10px 12px; }
.gcard .bar a{ margin-left:auto; font-size:.83rem; font-weight:600; color:var(--danger);
    text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.gcard .bar a:hover{ text-decoration:underline; }

.gallery-empty{ grid-column:1/-1; }

/* upload dropzone */
.uploader{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    background:var(--surface); border:2px dashed var(--brand-300); border-radius:var(--radius);
    padding:18px 22px; }
.uploader .drop-label{ flex:1; min-width:200px; display:flex; align-items:center; gap:14px; cursor:pointer; }
.uploader .drop-label .ic{ width:48px; height:48px; border-radius:13px; background:var(--brand-100);
    color:var(--brand-600); display:grid; place-items:center; font-size:1.3rem; flex:none; }
.uploader .drop-label .t{ font-weight:600; }
.uploader .drop-label .s{ font-size:.83rem; color:var(--muted); }
.uploader input[type=file]{ display:none; }
.file-name{ font-size:.85rem; color:var(--brand-700); font-weight:600; }

/* lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(16,18,27,.86); backdrop-filter:blur(6px);
    z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:30px; }
.lightbox img{ max-width:90vw; max-height:78vh; border-radius:14px; box-shadow:var(--shadow-lg); }
.lightbox .lb-actions{ display:flex; gap:12px; }
.lightbox .lb-close{ position:absolute; top:22px; right:26px; width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,.14); color:#fff; border:none; cursor:pointer; font-size:1.1rem; }
.lightbox .lb-close:hover{ background:rgba(255,255,255,.28); }

/* ============================================================
   MODAL (delete confirm)
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:900; display:none; place-items:center;
    background:rgba(16,24,40,.5); backdrop-filter:blur(3px); padding:24px; }
.modal.open{ display:grid; }
.modal .box{ background:#fff; border-radius:var(--radius-lg); padding:30px; max-width:400px; width:100%;
    text-align:center; box-shadow:var(--shadow-lg); animation:rise .25s ease; }
.modal .box .warn-ic{ width:62px; height:62px; border-radius:50%; background:var(--danger-bg); color:var(--danger);
    display:grid; place-items:center; font-size:1.5rem; margin:0 auto 16px; }
.modal .box h3{ font-size:1.2rem; }
.modal .box p{ color:var(--muted); margin:8px 0 22px; font-size:.92rem; }
.modal .box .row{ display:flex; gap:12px; }
.modal .box .row .btn{ flex:1; }

/* ============================================================
   PATIENT PORTAL (public)
   ============================================================ */
.portal{ min-height:100dvh; padding:30px 20px 60px;
    background:
        radial-gradient(1000px 500px at 90% -10%, var(--brand-100), transparent 55%),
        radial-gradient(800px 500px at -10% 110%, #e7edff, transparent 50%),
        var(--bg);
}
.portal-inner{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.portal-hero{ background:linear-gradient(135deg, var(--brand), var(--brand-600)); color:#fff;
    border-radius:var(--radius-lg); padding:28px 30px; display:flex; align-items:center; gap:20px;
    box-shadow:var(--shadow-brand); }
.portal-hero .pfp{ width:84px; height:84px; border-radius:50%; border:3px solid rgba(255,255,255,.6);
    object-fit:cover; background:#fff; flex:none; }
.portal-hero h1{ color:#fff; font-size:1.5rem; }
.portal-hero .pid{ opacity:.9; font-size:.9rem; margin-top:4px; }
.portal .section-title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    font-weight:600; margin-bottom:-6px; padding-left:4px; }

/* ============================================================
   UTILITIES & ANIMATION
   ============================================================ */
.flex{ display:flex; } .items-center{ align-items:center; } .gap{ gap:12px; }
.between{ justify-content:space-between; } .wrap{ flex-wrap:wrap; }
.mt-1{ margin-top:8px; } .mt-2{ margin-top:16px; } .mt-3{ margin-top:24px; }
.mb-2{ margin-bottom:16px; }
.muted{ color:var(--muted); } .small{ font-size:.85rem; }
.text-right{ text-align:right; }
.toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.toolbar .search{ flex:1; min-width:220px; }
.hidden{ display:none !important; }

@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.rise{ animation:rise .4s ease both; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
    .cols-4,.tiles{ grid-template-columns:repeat(2,1fr); }
    .info-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
    .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .28s ease;
        box-shadow:var(--shadow-lg); }
    .sidebar.open{ transform:translateX(0); }
    .scrim.open{ display:block; }
    .topbar .menu-toggle{ display:inline-grid; }
    .content{ padding:20px 16px; }
}
@media (max-width:680px){
    .cols-2,.cols-3,.cols-4,.tiles,.info-grid{ grid-template-columns:1fr; }
    .topbar h2{ font-size:1.05rem; }
    .topbar .date-chip{ display:none; }
    .portal-hero{ flex-direction:column; text-align:center; }
    .cost-banner{ flex-direction:column; gap:10px; text-align:center; }
    .auth-card{ padding:32px 22px; }
}

/* ============================================================
   TABLET / iPad polish (768px – 1024px)
   ============================================================ */
@media (min-width:681px) and (max-width:1024px){
    .content{ padding:26px 24px; }
    .grid{ gap:20px; }
    /* roomier stat & quick-action cards */
    .stat{ padding:24px; }
    .stat .ic{ width:52px; height:52px; font-size:1.35rem; }
    .stat .num{ font-size:1.9rem; }
    .tile{ padding:24px; }
    .tile .ic{ width:54px; height:54px; font-size:1.45rem; }
    /* keep paired detail cards side by side but breathing */
    .info-grid{ gap:18px; }
    .info-cell{ padding:16px 18px; }
    .info-cell .v{ font-size:1.08rem; }
    .card-head{ padding:20px 24px; }
    .card-pad{ padding:24px 26px; }
    /* the action toolbar on the patient record wraps gracefully */
    .toolbar{ gap:12px; }
    .toolbar .btn, .toolbar .iconbtn{ flex:0 0 auto; }
    /* larger, finger-friendly controls */
    .btn{ padding:12px 22px; }
    .iconbtn{ width:46px; height:46px; }
    table.data thead th{ font-size:.8rem; }
    table.data tbody td{ padding:16px 18px; font-size:.95rem; }
    .gallery{ grid-template-columns:repeat(3,1fr); }
    .portal-inner{ max-width:90%; }
}

/* ============================================================
   THEME TOGGLE button + floating FAB (auth/portal pages)
   ============================================================ */
.theme-fab{
    position:fixed; bottom:22px; right:22px; z-index:1500;
    width:50px; height:50px; border-radius:50%;
    display:grid; place-items:center; cursor:pointer; border:none;
    background:var(--surface); color:var(--brand-600);
    border:1px solid var(--line); box-shadow:var(--shadow-lg); font-size:1.1rem;
    transition:.18s;
}
.theme-fab:hover{ transform:translateY(-2px) scale(1.05); color:#fff; background:var(--brand); border-color:var(--brand); }

/* ============================================================
   DARK MODE
   ============================================================ */
html[data-theme="dark"]{
    --ink:#e8ecf4;
    --ink-soft:#aeb7c9;
    --muted:#7e889c;
    --bg:#0e131e;
    --surface:#171e2c;
    --surface-2:#1d2533;
    --line:#2a323f;

    --brand-100:rgba(232,93,138,.18);
    --brand-50:rgba(232,93,138,.10);
    --brand-700:#f8bcd0;

    --success-bg:rgba(18,183,106,.18);
    --danger-bg:rgba(240,68,56,.18);

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 6px 18px rgba(0,0,0,.55);
    --shadow-lg:0 24px 48px -12px rgba(0,0,0,.7);
    --shadow-brand:0 10px 24px -6px rgba(232,93,138,.5);
    --ring:0 0 0 4px rgba(232,93,138,.28);

    color-scheme:dark;
}
html[data-theme="dark"] body{ background:var(--bg); }
html[data-theme="dark"] .topbar{ background:rgba(23,30,44,.82); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#39435a; background-clip:content-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:#48536d; background-clip:content-box; }
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus{ background:var(--brand-50); }
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:#5f6b80; }
html[data-theme="dark"] .stat .ic.blue{ background:rgba(46,144,250,.18); }
html[data-theme="dark"] .stat .ic.green{ background:rgba(18,183,106,.18); }
html[data-theme="dark"] .stat .ic.amber{ background:rgba(247,144,9,.18); }
html[data-theme="dark"] .pill.grey{ background:#252e3c; color:var(--ink-soft); }
html[data-theme="dark"] .util .dot.off{ background:#3a4354; }
html[data-theme="dark"] .auth-wrap{
    background:
        radial-gradient(1100px 600px at 100% -10%, rgba(232,93,138,.16), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, rgba(60,98,210,.14), transparent 55%),
        var(--bg);
}
html[data-theme="dark"] .portal{
    background:
        radial-gradient(1000px 500px at 90% -10%, rgba(232,93,138,.16), transparent 55%),
        radial-gradient(800px 500px at -10% 110%, rgba(60,98,210,.14), transparent 50%),
        var(--bg);
}
html[data-theme="dark"] .auth-logo,
html[data-theme="dark"] .brand .mark{ box-shadow:0 8px 22px -6px rgba(232,93,138,.6); }