/* ============================================================
   DEMO — GLOBAL STYLES
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:15.5px;-webkit-text-size-adjust:100%}
@media(max-width:600px){html{font-size:15px}}
body{font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;transition:background var(--t-slow),color var(--t-slow)}
::selection{background:var(--accent);color:#fff}
/* Smooth cross-fade on theme switch — active only while toggling.
   Higher specificity than the reduced-motion rule below, so the gentle colour
   fade still plays even when the OS has "Reduce Motion" on (it's a fade, not motion). */
:root.theme-animating,:root.theme-animating *,:root.theme-animating *::before,:root.theme-animating *::after{transition:background-color .22s ease,border-color .22s ease,color .22s ease,fill .22s ease,stroke .22s ease,box-shadow .22s ease!important}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--bd-3)}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;line-height:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── FOCUS ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.skip-link{position:absolute;left:8px;top:-60px;z-index:10000;background:var(--accent);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:.8125rem;font-weight:600;transition:top var(--t)}
.skip-link:focus{top:8px}
[role="button"]{cursor:pointer}
th.sortable{cursor:pointer}

/* ── TYPOGRAPHY ── */
.t-xs{font-size:.6875rem}.t-sm{font-size:.75rem}.t-base{font-size:.875rem}.t-md{font-size:1rem}.t-lg{font-size:1.125rem}.t-xl{font-size:1.25rem}.t-2xl{font-size:1.5rem}.t-3xl{font-size:1.875rem}.t-4xl{font-size:2.25rem}.t-5xl{font-size:3rem}
.fw-4{font-weight:400}.fw-5{font-weight:500}.fw-6{font-weight:600}.fw-7{font-weight:700}.fw-8{font-weight:800}.fw-9{font-weight:900}
.tx-1{color:var(--tx)}.tx-2{color:var(--tx-2)}.tx-3{color:var(--tx-3)}.tx-accent{color:var(--accent-text)}.tx-green{color:var(--green-text)}.tx-yellow{color:var(--yellow-text)}.tx-red{color:var(--red-text)}.tx-blue{color:var(--blue-text)}
.ls-tight{letter-spacing:-.03em}.ls-wide{letter-spacing:.06em}.ls-wider{letter-spacing:.1em}
.uppercase{text-transform:uppercase}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:'Fira Code','SF Mono','Courier New',monospace}

/* ── LAYOUT ── */
.flex{display:flex}.flex-col{display:flex;flex-direction:column}.grid{display:grid}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}
.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}
.w-full{width:100%}.h-full{height:100%}.min-w-0{min-width:0}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-100{z-index:100}.z-200{z-index:200}.z-999{z-index:999}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}

/* ── SPACING ── */
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}
.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:20px;padding-right:20px}.px-6{padding-left:24px;padding-right:24px}
.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mx-auto{margin-left:auto;margin-right:auto}

/* ── BORDERS ── */
.border{border:1px solid var(--bd)}.border-2{border:1px solid var(--bd-2)}.border-t{border-top:1px solid var(--bd)}.border-b{border-bottom:1px solid var(--bd)}.border-l{border-left:1px solid var(--bd)}.border-r{border-right:1px solid var(--bd)}
.r-sm{border-radius:var(--r-sm)}.r{border-radius:var(--r)}.r-md{border-radius:var(--r-md)}.r-lg{border-radius:var(--r-lg)}.r-xl{border-radius:var(--r-xl)}.r-2xl{border-radius:var(--r-2xl)}.r-full{border-radius:9999px}

/* ── BACKGROUNDS ── */
.bg{background:var(--bg)}.bg-2{background:var(--bg-2)}.bg-3{background:var(--bg-3)}.bg-4{background:var(--bg-4)}

/* ── VISIBILITY ── */
.hidden{display:none!important}.invisible{visibility:hidden}.opacity-0{opacity:0}.opacity-50{opacity:.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── DIVIDER ── */
.divider{border:none;border-top:1px solid var(--bd)}
.divider-label{display:flex;align-items:center;gap:10px;color:var(--tx-3);font-size:.75rem}
.divider-label::before,.divider-label::after{content:'';flex:1;height:1px;background:var(--bd)}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.anim-fade-in{animation:fadeIn var(--t-slow) both}
.anim-fade-up{animation:fadeInUp var(--t-slow) both}
.anim-scale-in{animation:scaleIn var(--t-slow) both}
.anim-spin{animation:spin .7s linear infinite}
.anim-pulse{animation:pulse 2s ease infinite}

/* ── SKELETON ── */
.skeleton{background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-4) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r)}

/* ── SCROLL PROGRESS ── */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--blue));z-index:9999;width:0;transition:width .1s linear}

/* ── RESPONSIVE HELPERS ── */
@media(max-width:1024px){.hide-lg{display:none!important}}
@media(max-width:768px){.hide-md{display:none!important}}
/* Mobile menu (hamburger) button: hidden on desktop, shown when the sidebar is off-canvas */
.nav-menu-btn{display:none}
@media(max-width:1024px){.nav-menu-btn{display:inline-flex}}
@media(max-width:480px){.hide-sm{display:none!important}}