/* Panel Evolution — a coherent interaction/design layer inspired by the
   referenced design libraries. Scoped to authenticated admin pages. */
:root {
    --ev-bg: #120d10;
    --ev-panel: rgba(29, 19, 23, .78);
    --ev-panel-2: rgba(42, 25, 30, .72);
    --ev-ink: #fff9f5;
    --ev-muted: #bdaeb0;
    --ev-coral: #ff8267;
    --ev-amber: #ffc266;
    --ev-teal: #5ed0b7;
    --ev-red: #d34d65;
    --ev-violet: #a98aef;
    --ev-line: rgba(255, 239, 229, .105);
    --ev-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ev-glide: cubic-bezier(.16, 1, .3, 1);
}

body.is-authed {
    color: var(--ev-ink);
    background:
        radial-gradient(950px 520px at 76% -8%, rgba(211,77,101,.13), transparent 62%),
        radial-gradient(700px 500px at 4% 92%, rgba(94,208,183,.07), transparent 58%),
        linear-gradient(155deg, #130d11, #0e0b0e 52%, #151014) !important;
}

.ev-page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .55rem;
    direction: rtl;
    color: var(--text, #f3ece0);
    background:
        radial-gradient(ellipse at center, rgba(201,123,74,.14), transparent 55%),
        #14100f;
    opacity: 1;
    visibility: visible;
    transition: opacity .28s ease, visibility .28s ease;
}
.ev-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.ev-fuzzy-text {
    display: block;
    width: min(88vw, 620px);
    height: auto;
    color: inherit;
    font-family: var(--font-display, var(--font, system-ui, sans-serif));
}
.ev-loader-caption {
    color: var(--muted, #b8a594);
    font: 500 .78rem/1.5 var(--font, system-ui, sans-serif);
    letter-spacing: .02em;
    animation: ev-loader-pulse 1.2s ease-in-out infinite;
}
@keyframes ev-loader-pulse { 50% { opacity: .42; } }

.ev-click-spark {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    user-select: none;
}

.ev-progress {
    position: fixed; z-index: 10000; top: 0; right: 0; height: 2px; width: 0;
    pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, var(--ev-teal), var(--ev-amber), var(--ev-coral));
    box-shadow: 0 0 16px var(--ev-coral);
    transition: width .55s var(--ev-glide), opacity .2s ease;
}
.ev-progress.is-running { width: 72%; opacity: 1; }
.ev-progress.is-done { width: 100%; opacity: 0; transition: width .18s ease, opacity .32s .12s ease; }

body.is-authed .topbar {
    backdrop-filter: blur(28px) saturate(1.25);
    -webkit-backdrop-filter: blur(28px) saturate(1.25);
}

body.is-authed :is(.stat-card,.metric-card,.monitor-card,.gauge-card,.form-card,.detail-card,.table-wrap,.quick-action) {
    border-radius: 19px;
    border: 1px solid var(--ev-line) !important;
}

body.is-authed :is(.stat-card,.metric-card,.monitor-card,.gauge-card,.quick-action)::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 3px; z-index: 2;
    border-radius: 20px 0 0 20px;
    background: linear-gradient(180deg, var(--ev-coral), var(--ev-amber));
    opacity: .42; transform: scaleY(.34);
    transition: transform .5s var(--ev-spring), opacity .3s ease;
}
body.is-authed :is(.stat-card,.metric-card,.monitor-card,.gauge-card,.quick-action):hover::before {
    transform: scaleY(.72); opacity: .95;
}

body.is-authed .stat-card { min-height: 132px; }
body.is-authed :is(.stat-value,.metric-value,.kpi-value) {
    color: var(--ev-ink);
    font-feature-settings: "tnum" 1;
    background: linear-gradient(110deg, #fff 15%, #ffd8ac 48%, #fff 75%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
}

body.is-authed table { border-collapse: separate; border-spacing: 0; }
body.is-authed table thead th {
    position: sticky; top: 0; z-index: 3;
    font-size: .73rem; letter-spacing: .015em;
    background: rgba(28,18,22,.94) !important;
    backdrop-filter: blur(18px);
}
body.is-authed table tbody tr { transition: background .2s ease, box-shadow .2s ease; }
body.is-authed table tbody tr:hover {
    background: linear-gradient(90deg, rgba(255,130,103,.065), rgba(255,194,102,.025)) !important;
    box-shadow: inset -3px 0 var(--ev-coral);
}
body.is-authed table td { border-bottom-color: rgba(255,255,255,.055); }

body.is-authed :is(input,select,textarea) {
    border-radius: 12px;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
body.is-authed :is(input,select,textarea):focus {
    transform: translateY(-1px);
    border-color: rgba(255,130,103,.58) !important;
    box-shadow: 0 0 0 4px rgba(255,130,103,.09), 0 12px 30px rgba(0,0,0,.12) !important;
}

body.is-authed :is(.badge,.status,.chip,[class*="badge-"]) {
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px rgba(255,255,255,.09);
}

body.is-authed .alert {
    position: relative; overflow: hidden;
    animation: evToastIn .6s cubic-bezier(.18,1.25,.4,1) both;
}
body.is-authed .alert::after {
    content: ""; position: absolute; right: 0; bottom: 0; height: 2px; width: 100%;
    background: currentColor; opacity: .45;
    animation: evToastTimer 5s linear both;
}
@keyframes evToastIn { from { opacity:0; transform:translateY(-18px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes evToastTimer { to { width:0; } }

.ev-submit-loader {
    width: 15px; height: 15px; display: inline-grid; place-items:center; margin-inline-start: .45rem;
    border: 2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%;
    animation: evSpin .7s linear infinite;
}
@keyframes evSpin { to { transform:rotate(360deg); } }

.ev-tooltip {
    position: fixed; z-index: 9999; top: 0; left: 0; max-width: 240px; pointer-events:none; visibility:hidden;
    padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
    color: #fff8f3; background: rgba(20,13,17,.94); box-shadow: 0 14px 38px rgba(0,0,0,.34);
    font-size: .72rem; line-height: 1.7; opacity:0; transform:translateY(5px) scale(.96);
    transition: opacity .16s ease, transform .28s var(--ev-spring);
}
.ev-tooltip.show { opacity:1; transform:none; visibility:visible; }

.ev-mascot {
    position: absolute; z-index: 4; left: 1rem; bottom: -.35rem;
    width: clamp(92px, 9vw, 138px); aspect-ratio: 1; object-fit:contain;
    filter: drop-shadow(0 18px 26px rgba(211,77,101,.2));
    animation: evMascotFloat 5.5s ease-in-out infinite;
    transform-origin: 50% 80%; pointer-events:none;
}
.ev-mascot-halo {
    position:absolute; left:1rem; bottom:.5rem; width:120px; height:48px;
    background:radial-gradient(ellipse,rgba(255,130,103,.22),transparent 68%); filter:blur(10px); pointer-events:none;
}
@keyframes evMascotFloat { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }

.ev-command-hint {
    position:absolute; left:.55rem; top:50%; transform:translateY(-50%);
    display:inline-flex; align-items:center; gap:.25rem; padding:.14rem .36rem;
    border:1px solid rgba(255,255,255,.1); border-radius:6px; color:var(--ev-muted);
    background:rgba(255,255,255,.035); font:600 .62rem/1.2 var(--font-latin);
    box-shadow:inset 0 -1px rgba(0,0,0,.3);
}
.topbar-search { position:relative; }
.topbar-search input { padding-left:3.5rem; }

body.is-authed .sidebar li a .ico,
body.is-authed .sidebar li a svg { transition: transform .45s var(--ev-spring), color .2s ease; }
body.is-authed .sidebar li a:hover .ico,
body.is-authed .sidebar li a:hover svg { transform: scale(1.12) rotate(-3deg); }

/* Lucide-inspired micro-interactions. They run only on deliberate hover or
   keyboard focus so dense admin screens stay calm while idle. */
.nav-ico, .nav-ico * { transform-box: fill-box; transform-origin: center; }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="dashboard"] rect:nth-of-type(odd) { animation: evIconTile .48s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="dashboard"] rect:nth-of-type(even) { animation: evIconTile .48s .06s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="ads"] path { stroke-dasharray: 18; animation: evIconDraw .65s ease-out; }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="users"] circle:first-child { animation: evIconLift .52s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="users"] path { animation: evIconRise .52s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="bots"] { animation: evIconBob .58s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="channels"] .ico-wave,
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="proxy"] .ico-wave,
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="health"] .ico-wave { stroke-dasharray: 30; animation: evIconSignal .72s linear; }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="queue"] path:first-child { animation: evIconQueue .55s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="ai"] path:not(:first-child) { animation: evIconCore .65s ease-in-out; }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="updates"],
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="settings"] { animation: evIconTurn .62s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="ranking"] { animation: evIconTrophy .58s var(--ev-spring); }
:is(.sidebar a,.nav-group>summary,.metric-card,.quick-action,.btn,.logout-btn):is(:hover,:focus-visible) .nav-ico[data-icon="logout"] path:last-child { animation: evIconExit .48s var(--ev-spring); }
.nav-group > summary:hover .nav-chevron .nav-ico { animation: evIconChevron .42s var(--ev-spring); }

.ev-back-top {
    position: fixed; z-index: 85; left: 1.15rem; bottom: calc(1.15rem + var(--safe-bottom));
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--stroke-strong); border-radius: 15px;
    color: var(--sand); background: var(--glass-strong); box-shadow: var(--shadow);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92);
    transition: opacity .22s, visibility .22s, transform .32s var(--ev-spring), border-color .2s;
    cursor: pointer;
}
.ev-back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ev-back-top:hover { border-color: var(--saffron); transform: translateY(-3px) scale(1.04); }
.ev-back-top:hover .ico-arrow-up { animation: evIconArrowUp .7s var(--ev-spring) infinite; }

.notification-center { position: relative; }
.notification-center .topbar-bell {
    cursor: pointer; font-family: inherit; transition: background .2s, border-color .2s, transform .2s;
}
.notification-center .topbar-bell:hover,
.notification-center .topbar-bell[aria-expanded="true"] {
    background: var(--glass-soft); border-color: var(--stroke-strong); transform: translateY(-1px);
}
.notification-center .topbar-bell[aria-expanded="true"] svg { animation: ncBell .55s var(--ev-spring); transform-origin: 50% 12%; }
.nc-badge {
    position: absolute; top: -6px; left: -6px; min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center; border: 2px solid var(--bg-0); border-radius: 999px;
    color: #fff; background: linear-gradient(135deg,var(--pomegranate),var(--saffron));
    font-size: .62rem; font-weight: 800; line-height: 1; box-shadow: 0 5px 13px rgba(178,58,72,.38);
    animation: ncBadgeIn .5s var(--ev-spring);
}
.nc-panel {
    position: absolute; z-index: 240; top: calc(100% + 12px); left: 0;
    width: min(370px, calc(100vw - 2rem)); padding: .75rem;
    border: 1px solid rgba(255,244,230,.12); border-radius: 24px;
    color: var(--text); background: rgba(24,16,15,.92);
    box-shadow: 0 28px 80px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.055);
    backdrop-filter: blur(22px) saturate(1.12); -webkit-backdrop-filter: blur(22px) saturate(1.12);
    opacity: 0; transform: translateY(-9px) scale(.94); transform-origin: top left;
    transition: opacity .2s ease, transform .28s var(--ev-spring);
}
.nc-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.nc-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.3rem .35rem .75rem; }
.nc-head > div { display:flex; flex-direction:column; min-width:0; }
.nc-kicker { color:var(--muted); font-size:.68rem; }
.nc-head strong { font-size:.94rem; }
.nc-close {
    width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center;
    border:0; border-radius:50%; color:var(--muted); background:rgba(255,255,255,.045);
    font:400 1.3rem/1 var(--font); cursor:pointer; transition:background .18s,color .18s,transform .18s;
}
.nc-close:hover { color:var(--text); background:rgba(255,255,255,.09); transform:rotate(8deg); }
.nc-list { display:flex; flex-direction:column; gap:.45rem; max-height:min(430px,65vh); overflow:auto; scrollbar-width:thin; }
.nc-row {
    --nc-tone: var(--copper); position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) auto 13px;
    align-items:center; gap:.65rem; padding:.72rem; border:1px solid transparent; border-radius:17px;
    color:var(--text); background:rgba(255,255,255,.035);
    animation:ncRowIn .42s calc(var(--nc-index) * 45ms) var(--ev-spring) both;
    transition:background .2s,border-color .2s,transform .24s var(--ev-spring);
}
.nc-row:hover { color:var(--text); background:rgba(255,255,255,.065); border-color:color-mix(in srgb,var(--nc-tone) 38%,transparent); transform:translateX(-3px); }
.nc-row.tone-cyan { --nc-tone:var(--cyan); }.nc-row.tone-emerald { --nc-tone:var(--emerald); }
.nc-row.tone-rose { --nc-tone:var(--rose); }.nc-row.tone-amber { --nc-tone:var(--amber); }
.nc-row.tone-violet { --nc-tone:var(--violet); }.nc-row.tone-copper { --nc-tone:var(--copper); }
.nc-row-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--nc-tone) 18%,transparent); font-size:1.05rem; }
.nc-row-copy { min-width:0; display:flex; flex-direction:column; line-height:1.45; }
.nc-row-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.nc-row-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.69rem; }
.nc-count { min-width:25px; height:25px; padding:0 6px; display:grid; place-items:center; border-radius:999px; color:var(--nc-tone); background:color-mix(in srgb,var(--nc-tone) 13%,transparent); font-size:.68rem; font-weight:800; }
.nc-arrow { color:var(--muted); font-size:1.25rem; transition:transform .2s,color .2s; }
.nc-row:hover .nc-arrow { color:var(--nc-tone); transform:translateX(-2px); }
.nc-empty { display:grid; justify-items:center; gap:.3rem; padding:2rem 1rem; text-align:center; }
.nc-empty > span { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#99efd3; background:rgba(63,168,143,.13); font-size:1.25rem; }
.nc-empty strong { font-size:.88rem; }.nc-empty small { color:var(--muted); font-size:.72rem; }
@keyframes ncBell { 25%{transform:rotate(12deg)} 55%{transform:rotate(-10deg)} 78%{transform:rotate(5deg)} }
@keyframes ncBadgeIn { from{opacity:0;transform:scale(.3)} to{opacity:1;transform:scale(1)} }
@keyframes ncRowIn { from{opacity:0;transform:translateY(-10px) scale(.97)} to{opacity:1;transform:none} }

@keyframes evIconTile { 45% { transform: scale(.72); opacity:.5; } }
@keyframes evIconDraw { from { stroke-dashoffset:18; opacity:.35; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes evIconLift { 50% { transform: translateY(-1.8px); } }
@keyframes evIconRise { 50% { transform: translateY(1.2px) scaleX(1.04); } }
@keyframes evIconBob { 45% { transform: translateY(-2px) rotate(-3deg); } }
@keyframes evIconSignal { from { stroke-dashoffset:30; opacity:.35; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes evIconQueue { 45% { transform: translateX(2px); } }
@keyframes evIconCore { 50% { transform: scale(.78) rotate(8deg); opacity:.55; } }
@keyframes evIconTurn { 55% { transform: rotate(92deg) scale(1.08); } }
@keyframes evIconTrophy { 45% { transform: translateY(-2px) rotate(2deg); } }
@keyframes evIconExit { 50% { transform: translateX(2.5px); } }
@keyframes evIconChevron { 50% { transform: translateY(1.5px); } }
@keyframes evIconArrowUp { 45% { transform: translateY(-3px); opacity:.5; } }

/* Animated TOC navigation */
:root { --sidebar-expanded: 260px; }
body.is-authed .sidebar {
    width:var(--sidebar-expanded); padding:.85rem .72rem .75rem; overflow:hidden;
    border-left-color:rgba(255,239,229,.1); border-radius:0 0 0 26px;
    background:linear-gradient(180deg,rgba(31,20,23,.96),rgba(19,14,17,.94));
    box-shadow:-16px 0 46px rgba(0,0,0,.22);
}
body.is-authed .sidebar .brand { min-height:62px; margin:0 .2rem .55rem; padding:.35rem .45rem .8rem; border-bottom:1px solid rgba(255,255,255,.065); }
body.is-authed .sidebar .brand-mark { box-shadow:0 8px 22px rgba(201,123,74,.18); }
.nav-toc { position:relative; flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,194,102,.25) transparent; }
.nav-toc-svg { position:absolute; z-index:0; top:0; right:.28rem; width:42px; pointer-events:none; overflow:visible; }
.nav-toc-base,.nav-toc-progress { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nav-toc-base { stroke:rgba(255,239,229,.09); }
.nav-toc-progress { stroke:var(--ev-amber); filter:drop-shadow(0 0 5px rgba(255,194,102,.45)); transition:stroke-dashoffset .55s var(--ev-glide); }
.nav-toc-dot { fill:var(--ev-amber); stroke:#2a191b; stroke-width:2; filter:drop-shadow(0 0 6px rgba(255,194,102,.8)); transition:transform .55s var(--ev-glide); }
body.is-authed .sidebar .nav-list { position:relative; z-index:1; margin:0; padding:0 2.65rem .4rem 0; }
body.is-authed .sidebar .nav-list > li { margin:0 0 .16rem; }
body.is-authed .sidebar .nav-list > li > a,
body.is-authed .sidebar .nav-group > summary {
    min-height:42px; padding:.48rem .58rem; gap:.58rem; border:0 !important; border-radius:11px;
    color:var(--muted); background:transparent !important; box-shadow:none !important;
    transition:color .2s ease,background .2s ease,transform .25s var(--ev-spring);
}
body.is-authed .sidebar .nav-list > li > a:hover,
body.is-authed .sidebar .nav-group > summary:hover { color:var(--text); background:rgba(255,255,255,.04) !important; transform:translateX(-2px); }
body.is-authed .sidebar :is(.nav-list > li > a,.nav-group > summary).active { color:#fff8ed; background:linear-gradient(90deg,rgba(255,194,102,.1),rgba(255,130,103,.035)) !important; }
body.is-authed .sidebar .nav-group > summary::-webkit-details-marker { display:none; }
body.is-authed .sidebar .nav-group > ul { margin:.1rem 0 .32rem; padding:0 .45rem 0 0; border:0; }
body.is-authed .sidebar .nav-group[open] > ul { animation:tocReveal .32s var(--ev-glide) both; }
body.is-authed .sidebar .nav-group li a { min-height:35px; margin:.05rem 0; padding:.35rem .72rem; border:0; border-radius:9px; color:rgba(225,211,207,.7); background:transparent; font-size:.74rem; }
body.is-authed .sidebar .nav-group li a:hover { color:var(--text); background:rgba(255,255,255,.035); }
body.is-authed .sidebar .nav-group li a.active { color:var(--ev-amber); background:rgba(255,194,102,.065); }
body.is-authed .sidebar .nav-badge { min-width:20px; height:20px; padding:0 5px; font-size:.61rem; }
body.is-authed .sidebar .logout-form { margin:.55rem .2rem 0; padding-top:.62rem; border-top:1px solid rgba(255,255,255,.06); }
body.is-authed .sidebar .logout-btn { min-height:40px; border:0; background:transparent; color:var(--muted); box-shadow:none; }
body.is-authed .sidebar .logout-btn:hover { color:#ff9d91; background:rgba(211,77,101,.07); }
.nav-toggle-lines { width:20px; height:16px; display:flex; flex-direction:column; justify-content:space-between; }
.nav-toggle-lines i { display:block; width:100%; height:2px; border-radius:99px; background:currentColor; transition:transform .3s var(--ev-spring),opacity .2s,width .25s; }
@keyframes tocReveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

/* Magic Bento, restrained for a dense administration workspace. */
body.is-authed .magic-bento-card {
    --bento-x:50%; --bento-y:50%; --bento-glow:0;
    position:relative; isolation:isolate; overflow:hidden;
    border:1px solid rgba(255,239,229,.075) !important;
    border-radius:15px; background:rgba(29,20,23,.56) !important;
    box-shadow:0 8px 26px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.025) !important;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transition:border-color .25s ease,background .25s ease,box-shadow .3s ease,transform .32s var(--ev-glide);
}
body.is-authed .magic-bento-card::before {
    content:""; position:absolute; z-index:-1; inset:-1px; width:auto;
    border-radius:inherit; pointer-events:none; opacity:var(--bento-glow);
    transform:none; background:radial-gradient(260px circle at var(--bento-x) var(--bento-y),rgba(255,194,102,.12),rgba(255,130,103,.045) 36%,transparent 68%);
    transition:opacity .25s ease;
}
body.is-authed .magic-bento-card::after {
    content:""; position:absolute; z-index:3; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background:radial-gradient(190px circle at var(--bento-x) var(--bento-y),rgba(255,210,141,.62),rgba(255,130,103,.18) 42%,transparent 72%);
    opacity:var(--bento-glow); transition:opacity .25s ease;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
}
body.is-authed .magic-bento-card:hover { border-color:rgba(255,194,102,.14) !important; background:rgba(33,22,25,.64) !important; box-shadow:0 13px 34px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035) !important; }
body.is-authed :is(.stat-card,.metric-card,.gauge-card).magic-bento-card:hover,
body.is-authed .quick-action.magic-bento-card:hover { transform:translateY(-2px); }
body.is-authed .magic-bento-card > * { position:relative; z-index:1; }
body.is-authed .stat-card.magic-bento-card { min-height:116px; padding:1rem 1.05rem; }
body.is-authed .metric-card.magic-bento-card { padding:1rem; }
body.is-authed .quick-action.magic-bento-card { padding:.82rem .9rem; gap:.7rem; border-radius:14px; }
body.is-authed .quick-action.magic-bento-card .qa-ico { width:40px; height:40px; border-radius:12px; box-shadow:none; }
body.is-authed :is(.form-card,.detail-card,.monitor-card).magic-bento-card { padding:1.15rem; }
body.is-authed .table-wrap.magic-bento-card { border-radius:15px; }
body.is-authed .stats-grid { gap:.72rem; margin-bottom:1.1rem; }
body.is-authed .quick-actions { gap:.72rem; margin-bottom:1.05rem; }
body.is-authed .stat-label { font-size:.76rem; }
body.is-authed .stat-value { font-size:1.5rem; }
body.is-authed .stat-sub { font-size:.72rem; }

@media (max-width:1100px) {
    body.is-authed .nav-toggle { display:grid; place-items:center; top:calc(.75rem + var(--safe-top)); left:.75rem; width:42px; height:42px; border-radius:14px; z-index:130; }
    body.is-authed .sidebar { width:min(88vw,320px); transform:translateX(108%); transition:transform .38s var(--ev-glide); z-index:120; border-radius:0 0 0 24px; }
    body.is-authed .sidebar.open { transform:translateX(0); }
    body.is-authed main.with-sidebar { margin-right:0; }
    body.is-authed .topbar { padding-left:4.25rem; }
    body.is-authed .nav-backdrop.show { display:block; z-index:115; backdrop-filter:blur(3px); }
    body.nav-open .nav-toggle-lines i:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    body.nav-open .nav-toggle-lines i:nth-child(2) { opacity:0; width:0; }
    body.nav-open .nav-toggle-lines i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px) {
    body.is-authed .sidebar { width:min(92vw,310px); padding:.7rem .58rem; }
    body.is-authed .sidebar .brand { min-height:56px; }
    body.is-authed .sidebar .nav-list { padding-right:2.45rem; }
    body.is-authed .topbar { padding-left:3.8rem; }
    body.is-authed .nav-toggle { left:.55rem; width:40px; height:40px; }
    body.is-authed .magic-bento-card { --bento-glow:0 !important; border-radius:13px; box-shadow:0 5px 18px rgba(0,0,0,.11) !important; backdrop-filter:blur(10px); }
    body.is-authed .stat-card.magic-bento-card { min-height:104px; padding:.82rem .9rem; }
    body.is-authed :is(.form-card,.detail-card,.monitor-card).magic-bento-card { padding:.9rem; }
}

@media (max-width: 860px) {
    .ev-mascot { width: 84px; opacity:.82; left:.35rem; bottom:0; }
    .ev-mascot-halo { left:0; width:90px; }
    body.is-authed table thead th { position:static; }
}
@media (max-width: 520px) {
    .ev-mascot,.ev-mascot-halo { display:none; }
    body.is-authed :is(.stat-card,.metric-card,.monitor-card,.gauge-card,.form-card,.detail-card,.table-wrap) { border-radius:16px; }
    .ev-back-top { left:.75rem; bottom:calc(.75rem + var(--safe-bottom)); width:40px; height:40px; border-radius:13px; }
    .notification-center { position: static; }
    .nc-panel {
        position: fixed; top: calc(var(--topbar) + var(--safe-top) + .55rem); right: .65rem; left: .65rem;
        width: auto; max-height: calc(100dvh - var(--topbar) - var(--safe-top) - 1.2rem);
        transform-origin: top center; border-radius:20px; padding:.65rem;
    }
    .nc-list { max-height:calc(100dvh - var(--topbar) - var(--safe-top) - 6.5rem); }
    .nc-row { grid-template-columns:36px minmax(0,1fr) auto 11px; gap:.5rem; padding:.65rem; }
    .nc-row-icon { width:36px; height:36px; }
}
@media (prefers-reduced-motion: reduce) {
    .ev-page-loader { transition: none; }
    .ev-loader-caption { animation: none; }
    .ev-click-spark { display: none; }
    .ev-mascot,.ev-submit-loader,.alert::after { animation:none !important; }
    .ev-progress { display:none; }
    .nav-ico, .nav-ico *, .ev-back-top, .ev-back-top * { animation:none !important; transition-duration:.01ms !important; }
    .nc-panel,.nc-row,.nc-badge,.notification-center svg { animation:none !important; transition-duration:.01ms !important; }
    .nav-toc-progress,.nav-toc-dot,.sidebar,.nav-toggle-lines i { animation:none !important; transition-duration:.01ms !important; }
    .magic-bento-card,.magic-bento-card::before,.magic-bento-card::after { transition:none !important; }
}