/* ============================================================
   LikeeDiamond Auth — Design layer v4 ("3D")
   Loaded AFTER style.css. Pure presentation: no element ids,
   data hooks or app.js behaviour are changed. Adds depth
   (layered shadows, bevel highlights, pressable buttons), the
   new shield+play brand mark, an app-shell layout on desktop
   and a bottom tab bar + bottom-sheet modals on phones.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
    --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --lk-pink: #EC2F7B;
    --lk-magenta: #D61F72;
    --lk-violet: #8B2BE2;
    --lk-grad: linear-gradient(135deg, #EC2F7B 0%, #D61F72 45%, #8B2BE2 100%);
    --lk-grad-soft: linear-gradient(135deg, rgba(236,47,123,.14), rgba(139,43,226,.10));
    --lk-edge: rgba(120, 18, 84, .95);
    --surface: 255 255 255;
    --hl: rgba(255,255,255,.9);              /* top bevel highlight */
    --depth-1: 0 1px 2px rgba(17,24,39,.05);
    --depth-2: 0 2px 4px -2px rgba(17,24,39,.06), 0 12px 24px -12px rgba(17,24,39,.14);
    --depth-3: 0 30px 60px -30px rgba(76,29,149,.22);
    --tab-h: 66px;
}
html.dark {
    --surface: 17 24 39;
    --hl: rgba(255,255,255,.06);
    --depth-1: 0 1px 2px rgba(0,0,0,.45);
    --depth-2: 0 2px 4px -2px rgba(0,0,0,.5), 0 16px 30px -14px rgba(0,0,0,.7);
    --depth-3: 0 30px 60px -30px rgba(139,43,226,.28);
}

/* ---------- Canvas: soft aurora mesh + faint dot grid ---------- */
html:not(.dark) body.bg-slate-950 {
    background-color: #F3F4FA !important;
    background-image:
        radial-gradient(900px 520px at -5% -10%, rgba(236,47,123,.11), transparent 60%),
        radial-gradient(820px 520px at 105% -5%, rgba(139,43,226,.10), transparent 60%),
        radial-gradient(760px 520px at 50% 115%, rgba(6,182,212,.07), transparent 60%);
    background-attachment: fixed;
}
html.dark body.bg-slate-950 {
    background-color: #070A14 !important;
    background-image:
        radial-gradient(900px 520px at -5% -10%, rgba(236,47,123,.14), transparent 60%),
        radial-gradient(820px 520px at 105% -5%, rgba(139,43,226,.14), transparent 60%),
        radial-gradient(760px 520px at 50% 115%, rgba(6,182,212,.06), transparent 60%);
    background-attachment: fixed;
}
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(100,116,139,.16) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
            mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
html:not(.dark) main.bg-slate-950, html.dark main.bg-slate-950 { background: transparent !important; }

h1, h2, h3, h4 { font-family: var(--font-display); }

/* ---------- Header: frosted glass + gradient hairline ---------- */
html:not(.dark) header.h-16 { background: rgba(255,255,255,.72) !important; }
html.dark header.h-16 { background: rgba(9,12,24,.7) !important; }
header.h-16 {
    -webkit-backdrop-filter: saturate(180%) blur(18px);
            backdrop-filter: saturate(180%) blur(18px);
    border-bottom-color: transparent !important;
    box-shadow: 0 10px 30px -24px rgba(17,24,39,.35);
    height: 68px;
}
header.h-16::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(236,47,123,.55) 20%, rgba(139,43,226,.5) 60%, rgba(6,182,212,.35) 85%, transparent);
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-logo {
    width: 44px; height: 44px; flex-shrink: 0; display: block;
    filter: drop-shadow(0 8px 12px rgba(214,31,114,.32));
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .brand-logo { transform: perspective(300px) rotateY(-14deg) rotateX(8deg) translateY(-1px); }
.brand-title {
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
    display: flex; align-items: center; gap: .45rem; line-height: 1.15; margin: 0;
    color: rgb(var(--c-white));
}
.brand-title .brand-word {
    background: linear-gradient(90deg, rgb(var(--c-white)) 0%, rgb(var(--c-white)) 55%, #D61F72 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-tag {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
    padding: 3px 8px; border-radius: 999px; color: #fff;
    background: var(--lk-grad);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px -3px rgba(214,31,114,.6);
}
.brand-sub { font-size: 11.5px; color: rgb(var(--s-400)); margin-top: 2px; }

header .bg-slate-800\/80, header #adminProfileBtn {
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 var(--hl), var(--depth-1);
}
html:not(.dark) header .bg-slate-800\/80, html:not(.dark) header #adminProfileBtn { background-color: rgba(255,255,255,.85) !important; }
#profileDropdown { border-radius: 16px !important; box-shadow: inset 0 1px 0 var(--hl), var(--depth-2), var(--depth-3) !important; overflow: hidden; }

/* ---------- Cards: bevel highlight + layered depth ---------- */
.glass-card {
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgb(var(--surface)) 0%, rgb(var(--surface) / .97) 100%);
    box-shadow: inset 0 1px 0 var(--hl), var(--depth-1), var(--depth-2), var(--depth-3);
}
.glass-card:hover { box-shadow: inset 0 1px 0 var(--hl), var(--depth-1), 0 4px 8px -4px rgba(17,24,39,.08), 0 22px 40px -18px rgba(17,24,39,.22), var(--depth-3); }
html.dark .glass-card:hover { box-shadow: inset 0 1px 0 var(--hl), 0 22px 44px -18px rgba(0,0,0,.8), var(--depth-3); }

/* Section titles */
section[id^="view-"] > div:first-child h2 {
    font-size: 1.7rem; line-height: 2.1rem; font-weight: 800; letter-spacing: -.03em;
}
section[id^="view-"] > div:first-child h2::after {
    content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; margin-top: 8px;
    background: var(--lk-grad); box-shadow: 0 4px 10px -2px rgba(214,31,114,.45);
}

/* ---------- Dashboard KPI tiles (3D, tilt on hover via ui3d.js) ---------- */
#view-dashboard > div:nth-of-type(2) > .glass-card {
    --accent: #8B5CF6; --accent-2: #6D28D9;
    transform-style: preserve-3d; will-change: transform;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
#view-dashboard > div:nth-of-type(2) > .glass-card:nth-child(2) { --accent: #EC2F7B; --accent-2: #A3125A; }
#view-dashboard > div:nth-of-type(2) > .glass-card:nth-child(3) { --accent: #10B981; --accent-2: #047857; }
#view-dashboard > div:nth-of-type(2) > .glass-card:nth-child(4) { --accent: #06B6D4; --accent-2: #0E7490; }
#view-dashboard > div:nth-of-type(2) > .glass-card::before {
    content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent), transparent 68%); opacity: .16; pointer-events: none;
}
#view-dashboard > div:nth-of-type(2) > .glass-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--accent), transparent 85%); opacity: .75;
}
#view-dashboard > div:nth-of-type(2) > .glass-card .w-9.h-9 {
    width: 46px !important; height: 46px !important; border-radius: 15px !important; border: 0 !important;
    color: #fff !important;
    background: linear-gradient(145deg, var(--accent) 0%, var(--accent-2) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.18), 0 10px 18px -8px var(--accent) !important;
    transform: translateZ(30px);
}
#view-dashboard > div:nth-of-type(2) > .glass-card .w-9.h-9 i { font-size: 1.05rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
#view-dashboard > div:nth-of-type(2) > .glass-card .text-3xl {
    font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; letter-spacing: -.04em;
    font-feature-settings: "tnum" 1; transform: translateZ(20px); display: inline-block;
}

/* Pipeline stages: raised chips with a status rail */
#view-dashboard > div:nth-of-type(3) .grid > div {
    position: relative; overflow: hidden; border-radius: 16px !important; padding: 14px 10px !important;
    background: linear-gradient(180deg, rgb(var(--surface)), rgb(var(--s-950))) !important;
    box-shadow: inset 0 1px 0 var(--hl), 0 1px 0 rgba(17,24,39,.04), 0 8px 16px -12px rgba(17,24,39,.25);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
#view-dashboard > div:nth-of-type(3) .grid > div::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #10B981, #34D399, #06B6D4);
}
#view-dashboard > div:nth-of-type(3) .grid > div:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--hl), 0 16px 24px -14px rgba(16,185,129,.45); }

/* ---------- Buttons: pressable 3D ---------- */
button.bg-pink-600, a.bg-pink-600, button.bg-pink-500, button.from-pink-600 {
    background-image: var(--lk-grad) !important;
    color: #fff !important; border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.14), 0 3px 0 var(--lk-edge), 0 12px 22px -10px rgba(214,31,114,.65) !important;
}
button.from-emerald-600 {
    border-radius: 12px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.14), 0 3px 0 #04634A, 0 12px 22px -10px rgba(5,150,105,.6) !important;
}
button.bg-pink-600:hover, button.bg-pink-500:hover, button.from-pink-600:hover, button.from-emerald-600:hover {
    filter: brightness(1.07) saturate(1.05); transform: translateY(-1px);
}
button.bg-pink-600:not(:disabled):active, button.bg-pink-500:not(:disabled):active, button.from-pink-600:not(:disabled):active {
    transform: translateY(2px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 var(--lk-edge), 0 4px 10px -6px rgba(214,31,114,.6) !important;
}
button.from-emerald-600:not(:disabled):active { transform: translateY(2px) !important; box-shadow: 0 1px 0 #04634A, 0 4px 10px -6px rgba(5,150,105,.6) !important; }

button.bg-slate-800 {
    box-shadow: inset 0 1px 0 var(--hl), 0 2px 0 rgb(var(--s-700)), 0 6px 12px -8px rgba(17,24,39,.3);
}
html:not(.dark) button.bg-slate-800 { background-color: #fff !important; }
html:not(.dark) button.bg-slate-800:hover { background-color: rgb(var(--s-800)) !important; }
html.dark button.bg-slate-800 { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 rgba(0,0,0,.55), 0 6px 12px -8px rgba(0,0,0,.6); }
button.bg-slate-800:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--hl), 0 0 0 rgb(var(--s-700)); }

/* ---------- Inputs: recessed fields ---------- */
main input[type="text"], main input[type="number"], main input[type="email"], main select,
[id^="modal"] input:not([type="checkbox"]):not([type="radio"]), [id^="modal"] select, [id^="modal"] textarea {
    border-radius: 12px !important;
    box-shadow: inset 0 2px 4px rgba(17,24,39,.05);
}
html.dark main input, html.dark [id^="modal"] input { box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--ring), inset 0 2px 4px rgba(17,24,39,.04) !important; }

/* ---------- Tables ---------- */
.glass-card table thead th {
    font-size: 10.5px; letter-spacing: .08em;
    background: rgb(var(--s-950) / .92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.glass-card tbody tr:hover { background-image: linear-gradient(90deg, rgba(236,47,123,.06), rgba(139,43,226,.03) 50%, transparent); }
/* scroll shadows hint that a wide table continues sideways */
.glass-card > .overflow-x-auto {
    background:
        linear-gradient(to right, rgb(var(--surface)) 30%, rgb(var(--surface) / 0)) left center / 40px 100% no-repeat local,
        linear-gradient(to left, rgb(var(--surface)) 30%, rgb(var(--surface) / 0)) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(17,24,39,.16), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(17,24,39,.16), transparent) right center / 14px 100% no-repeat scroll;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(236,47,123,.16), transparent 70%),
        radial-gradient(360px 260px at 100% 100%, rgba(139,43,226,.14), transparent 70%),
        linear-gradient(180deg, #0F0B1C 0%, #0A0D17 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}
#sidebar .nav-item { border-radius: 12px !important; margin-bottom: 3px; padding-top: .55rem !important; padding-bottom: .55rem !important; }
#sidebar .nav-item > div > i {
    width: 30px !important; height: 30px; display: inline-grid; place-items: center; border-radius: 10px; font-size: 13px;
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 rgba(0,0,0,.35);
    transition: background .25s, box-shadow .25s, transform .25s;
}
#sidebar .nav-item:hover > div > i { transform: translateY(-1px); background: rgba(255,255,255,.09); }
#sidebar .nav-item.bg-pink-500\/10 {
    background: linear-gradient(90deg, rgba(236,47,123,.22), rgba(139,43,226,.1)) !important;
    border: 1px solid rgba(244,114,182,.22) !important; border-left-width: 1px !important; padding-left: .75rem !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 24px -14px rgba(236,47,123,.75);
}
#sidebar .nav-item.bg-pink-500\/10 > div > i {
    background: var(--lk-grad); color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 rgba(90,10,60,.9), 0 8px 14px -6px rgba(236,47,123,.8);
}
#sidebar .nav-item.bg-pink-500\/10 span { color: #fff !important; }
#sidebar .nav-item.bg-pink-500\/10 span[id^="badge"] { color: #F9A8D4 !important; }
#sidebar .rounded-xl.bg-slate-950\/70 { border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

/* Desktop: app-shell — header + sidebar stay put, only content scrolls */
@media (min-width: 1024px) {
    body.bg-slate-950 { height: 100vh; height: 100dvh; overflow: hidden; }
    body > div.flex-1 { min-height: 0; }
    #sidebar > div:first-child { flex: 1 1 auto; }
}

/* ---------- Modals ---------- */
[id^="modal"] > div, #drawerUserDetails > div {
    border-radius: 24px !important;
    box-shadow: inset 0 1px 0 var(--hl), 0 0 0 1px var(--card-border), 0 40px 80px -30px rgba(17,24,39,.5), var(--depth-3) !important;
}
html:not(.dark) [id^="modal"]:not(#modalAuth), html:not(.dark) #drawerUserDetails { background-color: rgba(17,20,38,.38) !important; }
html.dark [id^="modal"]:not(#modalAuth), html.dark #drawerUserDetails { background-color: rgba(3,5,12,.7) !important; }
#drawerUserDetails > div > div:nth-child(2) .grid-cols-3 > div {
    border-radius: 16px !important; box-shadow: inset 0 1px 0 var(--hl), 0 8px 16px -12px rgba(17,24,39,.3);
}

/* ---------- Auth (login) screen ---------- */
#modalAuth {
    background:
        radial-gradient(700px 480px at 12% 8%, rgba(236,47,123,.22), transparent 60%),
        radial-gradient(640px 460px at 92% 18%, rgba(139,43,226,.22), transparent 60%),
        radial-gradient(700px 520px at 50% 110%, rgba(6,182,212,.14), transparent 60%),
        #F3F4FA !important;
    isolation: isolate;
}
html.dark #modalAuth {
    background:
        radial-gradient(700px 480px at 12% 8%, rgba(236,47,123,.25), transparent 60%),
        radial-gradient(640px 460px at 92% 18%, rgba(139,43,226,.25), transparent 60%),
        radial-gradient(700px 520px at 50% 110%, rgba(6,182,212,.12), transparent 60%),
        #060912 !important;
}
#modalAuth::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(100,116,139,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,116,139,.09) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}
#modalAuth::after {
    content: ""; position: fixed; width: 460px; height: 460px; left: 50%; top: 50%; z-index: -1; pointer-events: none;
    margin: -230px 0 0 -230px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(236,47,123,.35), rgba(139,43,226,.3), rgba(6,182,212,.25), rgba(236,47,123,.35));
    filter: blur(70px); opacity: .55; animation: authSpin 18s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

#modalAuth > div {
    max-width: 440px !important;
    background: rgba(255,255,255,.8) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 28px !important;
    padding: 28px !important;
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(17,24,39,.04), 0 50px 100px -40px rgba(76,29,149,.4), 0 30px 60px -30px rgba(214,31,114,.3) !important;
}
html.dark #modalAuth > div {
    background: rgba(13,17,32,.78) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 50px 100px -40px rgba(0,0,0,.9), 0 30px 60px -30px rgba(214,31,114,.35) !important;
}
#modalAuth > div > .absolute.-top-24 { display: none; }

.auth-brand { text-align: center; padding: 4px 0 6px; }
.auth-logo-wrap { width: 92px; height: 92px; margin: 0 auto 12px; perspective: 600px; position: relative; }
.auth-logo-wrap::after {
    content: ""; position: absolute; left: 18%; right: 18%; bottom: -10px; height: 12px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(76,29,149,.35), transparent);
    animation: logoShadow 6s ease-in-out infinite;
}
.auth-logo {
    width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 16px 22px rgba(214,31,114,.35));
    animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat {
    0%, 100% { transform: translateY(0) rotateX(8deg) rotateY(-10deg); }
    50%      { transform: translateY(-7px) rotateX(-4deg) rotateY(10deg); }
}
@keyframes logoShadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.8); opacity: .6; } }
.auth-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; color: rgb(var(--c-white)); }
.auth-brand-name span { background: var(--lk-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-brand-sub { font-size: 12px; color: rgb(var(--s-400)); margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.auth-brand-sub i { color: #10B981; }

#modalAuth [id^="crumbStep"] > span:first-child {
    width: 24px !important; height: 24px !important; font-size: 11px !important; font-weight: 700;
    box-shadow: inset 0 1px 0 var(--hl), 0 2px 0 rgba(17,24,39,.08);
}
#modalAuth [id^="crumbStep"].text-pink-400 > span:first-child {
    background: var(--lk-grad) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--lk-edge), 0 6px 12px -4px rgba(214,31,114,.55);
}
#modalAuth [id^="crumbStep"].text-emerald-400 > span:first-child {
    background: linear-gradient(145deg, #34D399, #059669) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #04634A;
}
#authWizardStep2 .w-10.h-10, #authWizardStep3 .w-12.h-12 {
    width: 54px !important; height: 54px !important; border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.15), 0 12px 22px -10px rgba(139,43,226,.6) !important;
}
#modalAuth input { min-height: 46px; }
#modalAuth #loginEmail, #modalAuth #stepPassword { font-size: 14px !important; }
#modalAuth #stepTotpCode { font-size: 26px !important; letter-spacing: .5em !important; min-height: 58px; text-indent: .5em; }
#modalAuth form button { min-height: 46px; font-size: 13px !important; }

/* ---------- Mobile bottom tab bar ---------- */
#mobileTabBar { display: none; }
@media (max-width: 1023px) {
    #mobileTabBar {
        position: fixed; z-index: 15; left: 12px; right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        height: var(--tab-h); border-radius: 22px; padding: 0 6px;
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
        background: rgba(255,255,255,.86);
        -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
        border: 1px solid rgba(17,24,39,.06);
        box-shadow: inset 0 1px 0 #fff, 0 18px 40px -16px rgba(17,24,39,.35), 0 4px 10px -6px rgba(17,24,39,.15);
    }
    html.dark #mobileTabBar {
        background: rgba(13,17,32,.86); border-color: rgba(255,255,255,.07);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -16px rgba(0,0,0,.9);
    }
    .mtab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        height: 100%; min-height: 0 !important; background: none; border: 0;
        font-size: 10.5px; font-weight: 600; color: rgb(var(--s-400));
    }
    .mtab i {
        width: 38px; height: 30px; display: grid; place-items: center; border-radius: 12px; font-size: 15px;
        transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s, color .2s;
    }
    .mtab.active { color: rgb(var(--pk-400)); }
    .mtab.active i {
        color: #fff; background: var(--lk-grad); transform: translateY(-3px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 var(--lk-edge), 0 10px 16px -6px rgba(214,31,114,.7);
    }
    main { padding-bottom: calc(var(--tab-h) + 34px + env(safe-area-inset-bottom)) !important; }
    #toastContainer { left: 12px; right: 12px; bottom: calc(var(--tab-h) + 22px + env(safe-area-inset-bottom)) !important; }
    #toastContainer > * { max-width: none; }
}

/* ---------- Phone refinements ---------- */
@media (max-width: 640px) {
    header.h-16 { height: 62px; }
    .brand-logo { width: 38px; height: 38px; }
    .brand-title { font-size: .98rem; }
    section[id^="view-"] > div:first-child h2 { font-size: 1.4rem; line-height: 1.8rem; }
    section[id^="view-"] > div:first-child p { font-size: 12.5px; }

    /* toolbars: search on its own full-width row, action fills the next */
    section[id^="view-"] > div:first-child > div.flex.items-center.gap-3 { flex-wrap: wrap; width: 100%; }
    section[id^="view-"] > div:first-child > div.flex.items-center.gap-3 > .relative { flex: 1 1 100%; }
    section[id^="view-"] > div:first-child > div.flex.items-center.gap-3 > .relative input { width: 100% !important; }
    section[id^="view-"] > div:first-child > div.flex.items-center.gap-3 > button.bg-pink-600 { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    #view-dashboard > div:first-child > div.flex.items-center.gap-3 > button { min-height: 44px; }

    /* no iOS zoom-on-focus */
    input, select, textarea { font-size: 16px !important; }
    #modalAuth #stepTotpCode { font-size: 24px !important; }

    /* wide tables scroll sideways instead of crushing columns */
    .glass-card > .overflow-x-auto > table { min-width: 760px; }

    #view-dashboard > div:nth-of-type(2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    #view-dashboard > div:nth-of-type(2) > .glass-card { padding: 14px !important; }
    #view-dashboard > div:nth-of-type(2) > .glass-card .text-3xl { font-size: 1.8rem; }
    #view-dashboard > div:nth-of-type(2) > .glass-card .w-9.h-9 { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
    #view-dashboard > div:nth-of-type(2) > .glass-card > div:first-child > span { font-size: 10px; }
    #view-dashboard > div:nth-of-type(2) > .glass-card > div:last-child { font-size: 10.5px; }
    .glass-card.p-6 { padding: 16px !important; }

    /* modals become bottom sheets */
    [id^="modal"]:not(#modalAuth), #drawerUserDetails { align-items: flex-end !important; padding: 0 !important; }
    [id^="modal"]:not(#modalAuth) > div, #drawerUserDetails > div {
        border-radius: 24px 24px 0 0 !important; max-height: 92vh !important; overflow-y: auto;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
        animation: sheetUp .32s cubic-bezier(.2,.8,.2,1) !important;
    }
    [id^="modal"]:not(#modalAuth) > div::before, #drawerUserDetails > div::before {
        content: ""; display: block; width: 42px; height: 5px; border-radius: 5px; margin: -8px auto 10px;
        background: rgb(var(--s-600) / .6);
    }
    #modalAuth { padding: 14px !important; }
    #modalAuth > div { padding: 22px 18px !important; border-radius: 24px !important; }
    .auth-logo-wrap { width: 76px; height: 76px; }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 479px) {
    header .hidden.md\:flex + div { display: none !important; } /* refresh countdown pill */
    header.h-16 { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (hover: none) {
    .glass-card-hover:hover, #view-dashboard > div:nth-of-type(3) .grid > div:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-logo, .auth-logo-wrap::after, #modalAuth::after { animation: none !important; }
}

/* Empty / loading rows inside wide (scrollable) tables stay in view */
@media (max-width: 640px) {
    .glass-card > .overflow-x-auto > table td[colspan] { text-align: left !important; position: sticky; left: 0; }
}