html{background:#010108 !important;}body{background:#010108 !important;overscroll-behavior:none;}
/* =============================================================
   SaldoPro · Design System CSS v3
   Replaces cdn.tailwindcss.com (blocking, ~700 KB runtime)
   → Local file, ~35 KB, zero CDN round-trips, no render-block
   ============================================================= */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --sp-gold:      #ffc700;
  --sp-blue:      #246be1;
  --sp-bg:        #080e1c;
  --sp-bg-card:   #0f172a;
  --sp-bg-card2:  #111827;
  --sp-bg-hover:  rgba(255,255,255,.04);
  --sp-border:    rgba(255,255,255,.08);
  --sp-border2:   #1e293b;
  --sp-txt1:      #e5e7eb;
  --sp-txt2:      #94a3b8;
  --sp-txt3:      #475569;
  --sp-r-sm:      8px;
  --sp-r:         12px;
  --sp-r-lg:      16px;
  --sp-r-xl:      20px;
  --sp-shadow-sm: 0 1px 4px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --sp-shadow:    0 4px 16px rgba(0,0,0,.4);
  --sp-shadow-lg: 0 12px 40px rgba(0,0,0,.5);

  --accent:       #ffc700;
  --c1:           #0F172A;
  --c2:           #246be1;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,::before,::after { box-sizing:border-box; margin:0; padding:0; }
html { line-height:1.5; -webkit-text-size-adjust:100%; tab-size:4; }
body {
  font-family: 'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:1rem; line-height:inherit;
  color: var(--sp-txt1);
  background: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
hr { height:0; color:inherit; border-top-width:1px; }
abbr[title] { text-decoration:underline dotted; }
b,strong { font-weight:bolder; }
code,kbd,samp,pre { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace; font-size:1em; }
small { font-size:80%; }
table { text-indent:0; border-color:inherit; border-collapse:collapse; }
button,input,optgroup,select,textarea { font-family:inherit; font-size:100%; font-weight:inherit; line-height:inherit; color:inherit; margin:0; padding:0; }
button,select { text-transform:none; }
button,[type='button'],[type='reset'],[type='submit'] { -webkit-appearance:button; background-color:transparent; background-image:none; }
:-moz-focusring { outline:auto; }
:-moz-ui-invalid { box-shadow:none; }
progress { vertical-align:baseline; }
::-webkit-inner-spin-button,::-webkit-outer-spin-button { height:auto; }
[type='search'] { -webkit-appearance:textfield; outline-offset:-2px; }
::-webkit-search-decoration { -webkit-appearance:none; }
::-webkit-file-upload-button { -webkit-appearance:button; font:inherit; }
summary { display:list-item; }
blockquote,dl,dd,figure,pre { margin:0; }
fieldset,legend { padding:0; }
ol,ul { list-style:none; }
img,svg,video,canvas,audio,iframe,embed,object { display:block; vertical-align:middle; }
img,video { max-width:100%; height:auto; }
[hidden] { display:none; }
a { color:inherit; text-decoration:none; }
textarea { resize:vertical; }

/* ── Base dark inputs ───────────────────────────────────────── */
input,select,textarea {
  background: rgba(255,255,255,.04);
  color: var(--sp-txt1);
  border-color: var(--sp-border2);
}
input::placeholder,textarea::placeholder { color:var(--sp-txt3); }

/* ── Display ────────────────────────────────────────────────── */
.block         { display:block; }
.inline-block  { display:inline-block; }
.inline        { display:inline; }
.flex          { display:flex; }
.inline-flex   { display:inline-flex; }
.table         { display:table; }
.table-cell    { display:table-cell; }
.grid          { display:grid; }
.hidden        { display:none; }
.contents      { display:contents; }

/* ── Position ───────────────────────────────────────────────── */
.static   { position:static; }
.relative { position:relative; }
.absolute { position:absolute; }
.fixed    { position:fixed; }
.sticky   { position:sticky; }

.inset-0   { top:0; right:0; bottom:0; left:0; }
.inset-x-0 { left:0; right:0; }
.inset-y-0 { top:0; bottom:0; }
.top-0     { top:0; }
.right-0   { right:0; }
.bottom-0  { bottom:0; }
.left-0    { left:0; }
.top-auto  { top:auto; }

/* ── Overflow ───────────────────────────────────────────────── */
.overflow-auto     { overflow:auto; }
.overflow-hidden   { overflow:hidden; }
.overflow-visible  { overflow:visible; }
.overflow-scroll   { overflow:scroll; }
.overflow-x-auto   { overflow-x:auto; }
.overflow-x-hidden { overflow-x:hidden; }
.overflow-y-auto   { overflow-y:auto; }
.overflow-y-hidden { overflow-y:hidden; }

/* ── Z-index ────────────────────────────────────────────────── */
.z-0   { z-index:0; }
.z-10  { z-index:10; }
.z-20  { z-index:20; }
.z-30  { z-index:30; }
.z-40  { z-index:40; }
.z-50  { z-index:50; }
.z-100 { z-index:100; }
.z-auto { z-index:auto; }

/* ── Flex ───────────────────────────────────────────────────── */
.flex-col   { flex-direction:column; }
.flex-row   { flex-direction:row; }
.flex-wrap  { flex-wrap:wrap; }
.flex-nowrap{ flex-wrap:nowrap; }
.flex-1     { flex:1 1 0%; }
.flex-auto  { flex:1 1 auto; }
.flex-none  { flex:none; }
.flex-grow  { flex-grow:1; }
.flex-shrink-0 { flex-shrink:0; }
.shrink-0      { flex-shrink:0; }
.grow          { flex-grow:1; }

.items-start   { align-items:flex-start; }
.items-center  { align-items:center; }
.items-end     { align-items:flex-end; }
.items-stretch { align-items:stretch; }
.items-baseline{ align-items:baseline; }

.self-start  { align-self:flex-start; }
.self-center { align-self:center; }
.self-end    { align-self: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; }
.justify-around  { justify-content:space-around; }
.justify-evenly  { justify-content:space-evenly; }

/* ── Grid ───────────────────────────────────────────────────── */
.grid-cols-1  { grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2  { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-3  { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-cols-4  { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-cols-5  { grid-template-columns:repeat(5,minmax(0,1fr)); }
.grid-cols-6  { grid-template-columns:repeat(6,minmax(0,1fr)); }
.grid-cols-7  { grid-template-columns:repeat(7,minmax(0,1fr)); }
.grid-cols-8  { grid-template-columns:repeat(8,minmax(0,1fr)); }
.grid-cols-9  { grid-template-columns:repeat(9,minmax(0,1fr)); }
.grid-cols-10 { grid-template-columns:repeat(10,minmax(0,1fr)); }
.grid-cols-11 { grid-template-columns:repeat(11,minmax(0,1fr)); }
.grid-cols-12 { grid-template-columns:repeat(12,minmax(0,1fr)); }

.col-span-1  { grid-column:span 1/span 1; }
.col-span-2  { grid-column:span 2/span 2; }
.col-span-3  { grid-column:span 3/span 3; }
.col-span-4  { grid-column:span 4/span 4; }
.col-span-5  { grid-column:span 5/span 5; }
.col-span-6  { grid-column:span 6/span 6; }
.col-span-7  { grid-column:span 7/span 7; }
.col-span-8  { grid-column:span 8/span 8; }
.col-span-9  { grid-column:span 9/span 9; }
.col-span-10 { grid-column:span 10/span 10; }
.col-span-11 { grid-column:span 11/span 11; }
.col-span-12 { grid-column:span 12/span 12; }
.col-span-full{ grid-column:1/-1; }

.row-span-1  { grid-row:span 1/span 1; }
.row-span-2  { grid-row:span 2/span 2; }

/* ── Gap ────────────────────────────────────────────────────── */
.gap-0   { gap:0; }
.gap-0\.5{ gap:.125rem; }
.gap-1   { gap:.25rem; }
.gap-1\.5{ gap:.375rem; }
.gap-2   { gap:.5rem; }
.gap-2\.5{ gap:.625rem; }
.gap-3   { gap:.75rem; }
.gap-3\.5{ gap:.875rem; }
.gap-4   { gap:1rem; }
.gap-5   { gap:1.25rem; }
.gap-6   { gap:1.5rem; }
.gap-7   { gap:1.75rem; }
.gap-8   { gap:2rem; }
.gap-9   { gap:2.25rem; }
.gap-10  { gap:2.5rem; }
.gap-11  { gap:2.75rem; }
.gap-12  { gap:3rem; }
.gap-x-2 { column-gap:.5rem; }
.gap-x-4 { column-gap:1rem; }
.gap-y-2 { row-gap:.5rem; }
.gap-y-4 { row-gap:1rem; }

/* ── Padding ────────────────────────────────────────────────── */
.p-0   { padding:0; }
.p-0\.5{ padding:.125rem; }
.p-1   { padding:.25rem; }
.p-1\.5{ padding:.375rem; }
.p-2   { padding:.5rem; }
.p-2\.5{ padding:.625rem; }
.p-3   { padding:.75rem; }
.p-3\.5{ padding:.875rem; }
.p-4   { padding:1rem; }
.p-5   { padding:1.25rem; }
.p-6   { padding:1.5rem; }
.p-7   { padding:1.75rem; }
.p-8   { padding:2rem; }
.p-10  { padding:2.5rem; }
.p-12  { padding:3rem; }

.px-0   { padding-left:0; padding-right:0; }
.px-1   { padding-left:.25rem; padding-right:.25rem; }
.px-1\.5{ padding-left:.375rem; padding-right:.375rem; }
.px-2   { padding-left:.5rem; padding-right:.5rem; }
.px-2\.5{ padding-left:.625rem; padding-right:.625rem; }
.px-3   { padding-left:.75rem; padding-right:.75rem; }
.px-3\.5{ padding-left:.875rem; padding-right:.875rem; }
.px-4   { padding-left:1rem; padding-right:1rem; }
.px-5   { padding-left:1.25rem; padding-right:1.25rem; }
.px-6   { padding-left:1.5rem; padding-right:1.5rem; }
.px-8   { padding-left:2rem; padding-right:2rem; }
.px-10  { padding-left:2.5rem; padding-right:2.5rem; }

.py-0   { padding-top:0; padding-bottom:0; }
.py-0\.5{ padding-top:.125rem; padding-bottom:.125rem; }
.py-1   { padding-top:.25rem; padding-bottom:.25rem; }
.py-1\.5{ padding-top:.375rem; padding-bottom:.375rem; }
.py-2   { padding-top:.5rem; padding-bottom:.5rem; }
.py-2\.5{ padding-top:.625rem; padding-bottom:.625rem; }
.py-3   { padding-top:.75rem; padding-bottom:.75rem; }
.py-3\.5{ padding-top:.875rem; padding-bottom:.875rem; }
.py-4   { padding-top:1rem; padding-bottom:1rem; }
.py-5   { padding-top:1.25rem; padding-bottom:1.25rem; }
.py-6   { padding-top:1.5rem; padding-bottom:1.5rem; }
.py-8   { padding-top:2rem; padding-bottom:2rem; }
.py-10  { padding-top:2.5rem; padding-bottom:2.5rem; }
.py-12  { padding-top:3rem; padding-bottom:3rem; }

.pt-0  { padding-top:0; }
.pt-1  { padding-top:.25rem; }
.pt-2  { padding-top:.5rem; }
.pt-3  { padding-top:.75rem; }
.pt-4  { padding-top:1rem; }
.pt-5  { padding-top:1.25rem; }
.pt-6  { padding-top:1.5rem; }
.pt-8  { padding-top:2rem; }
.pt-10 { padding-top:2.5rem; }

.pr-1  { padding-right:.25rem; }
.pr-2  { padding-right:.5rem; }
.pr-3  { padding-right:.75rem; }
.pr-4  { padding-right:1rem; }
.pr-5  { padding-right:1.25rem; }
.pr-6  { padding-right:1.5rem; }

.pb-0  { padding-bottom:0; }
.pb-1  { padding-bottom:.25rem; }
.pb-2  { padding-bottom:.5rem; }
.pb-3  { padding-bottom:.75rem; }
.pb-4  { padding-bottom:1rem; }
.pb-5  { padding-bottom:1.25rem; }
.pb-6  { padding-bottom:1.5rem; }
.pb-8  { padding-bottom:2rem; }
.pb-10 { padding-bottom:2.5rem; }
.pb-16 { padding-bottom:4rem; }
.pb-20 { padding-bottom:5rem; }
.pb-24 { padding-bottom:6rem; }

.pl-0  { padding-left:0; }
.pl-1  { padding-left:.25rem; }
.pl-2  { padding-left:.5rem; }
.pl-3  { padding-left:.75rem; }
.pl-4  { padding-left:1rem; }
.pl-5  { padding-left:1.25rem; }
.pl-6  { padding-left:1.5rem; }
.pl-8  { padding-left:2rem; }
.pl-16 { padding-left:4rem; }

/* ── Margin ─────────────────────────────────────────────────── */
.m-0   { margin:0; }
.m-1   { margin:.25rem; }
.m-2   { margin:.5rem; }
.m-3   { margin:.75rem; }
.m-4   { margin:1rem; }
.m-5   { margin:1.25rem; }
.m-6   { margin:1.5rem; }
.m-auto{ margin:auto; }

.mx-0    { margin-left:0; margin-right:0; }
.mx-1    { margin-left:.25rem; margin-right:.25rem; }
.mx-2    { margin-left:.5rem; margin-right:.5rem; }
.mx-3    { margin-left:.75rem; margin-right:.75rem; }
.mx-4    { margin-left:1rem; margin-right:1rem; }
.mx-auto { margin-left:auto; margin-right:auto; }

.my-0  { margin-top:0; margin-bottom:0; }
.my-1  { margin-top:.25rem; margin-bottom:.25rem; }
.my-2  { margin-top:.5rem; margin-bottom:.5rem; }
.my-4  { margin-top:1rem; margin-bottom:1rem; }
.my-6  { margin-top:1.5rem; margin-bottom:1.5rem; }

.mt-0  { margin-top:0; }
.mt-0\.5{ margin-top:.125rem; }
.mt-1  { margin-top:.25rem; }
.mt-1\.5{ margin-top:.375rem; }
.mt-2  { margin-top:.5rem; }
.mt-3  { margin-top:.75rem; }
.mt-4  { margin-top:1rem; }
.mt-5  { margin-top:1.25rem; }
.mt-6  { margin-top:1.5rem; }
.mt-8  { margin-top:2rem; }
.mt-10 { margin-top:2.5rem; }

.mr-0  { margin-right:0; }
.mr-1  { margin-right:.25rem; }
.mr-2  { margin-right:.5rem; }
.mr-3  { margin-right:.75rem; }
.mr-4  { margin-right:1rem; }

.mb-0  { margin-bottom:0; }
.mb-1  { margin-bottom:.25rem; }
.mb-1\.5{ margin-bottom:.375rem; }
.mb-2  { margin-bottom:.5rem; }
.mb-3  { margin-bottom:.75rem; }
.mb-4  { margin-bottom:1rem; }
.mb-5  { margin-bottom:1.25rem; }
.mb-6  { margin-bottom:1.5rem; }
.mb-8  { margin-bottom:2rem; }

.ml-0  { margin-left:0; }
.ml-1  { margin-left:.25rem; }
.ml-2  { margin-left:.5rem; }
.ml-3  { margin-left:.75rem; }
.ml-4  { margin-left:1rem; }
.ml-auto{ margin-left:auto; }

.-mt-1 { margin-top:-.25rem; }
.-mt-2 { margin-top:-.5rem; }
.-mt-4 { margin-top:-1rem; }
.-mb-1 { margin-bottom:-.25rem; }
.-ml-1 { margin-left:-.25rem; }
.-mr-1 { margin-right:-.25rem; }

/* ── Width ──────────────────────────────────────────────────── */
.w-auto    { width:auto; }
.w-full    { width:100%; }
.w-screen  { width:100vw; }
.w-min     { width:min-content; }
.w-max     { width:max-content; }
.w-fit     { width:fit-content; }

.w-0\.5    { width:.125rem; }
.w-1       { width:.25rem; }
.w-1\.5    { width:.375rem; }
.w-2       { width:.5rem; }
.w-2\.5    { width:.625rem; }
.w-3       { width:.75rem; }
.w-3\.5    { width:.875rem; }
.w-4       { width:1rem; }
.w-5       { width:1.25rem; }
.w-6       { width:1.5rem; }
.w-7       { width:1.75rem; }
.w-8       { width:2rem; }
.w-9       { width:2.25rem; }
.w-10      { width:2.5rem; }
.w-11      { width:2.75rem; }
.w-12      { width:3rem; }
.w-14      { width:3.5rem; }
.w-16      { width:4rem; }
.w-20      { width:5rem; }
.w-24      { width:6rem; }
.w-28      { width:7rem; }
.w-32      { width:8rem; }
.w-36      { width:9rem; }
.w-40      { width:10rem; }
.w-44      { width:11rem; }
.w-48      { width:12rem; }
.w-52      { width:13rem; }
.w-56      { width:14rem; }
.w-60      { width:15rem; }
.w-64      { width:16rem; }
.w-72      { width:18rem; }
.w-80      { width:20rem; }
.w-96      { width:24rem; }

.w-1\/2    { width:50%; }
.w-1\/3    { width:33.333333%; }
.w-2\/3    { width:66.666667%; }
.w-1\/4    { width:25%; }
.w-3\/4    { width:75%; }
.w-1\/5    { width:20%; }
.w-2\/5    { width:40%; }
.w-3\/5    { width:60%; }
.w-4\/5    { width:80%; }

.min-w-0      { min-width:0; }
.min-w-full   { min-width:100%; }
.max-w-none   { max-width:none; }
.max-w-xs     { max-width:20rem; }
.max-w-sm     { max-width:24rem; }
.max-w-md     { max-width:28rem; }
.max-w-lg     { max-width:32rem; }
.max-w-xl     { max-width:36rem; }
.max-w-2xl    { max-width:42rem; }
.max-w-3xl    { max-width:48rem; }
.max-w-4xl    { max-width:56rem; }
.max-w-5xl    { max-width:64rem; }
.max-w-6xl    { max-width:72rem; }
.max-w-7xl    { max-width:80rem; }
.max-w-full   { max-width:100%; }
.max-w-screen { max-width:100vw; }

/* ── Height ─────────────────────────────────────────────────── */
.h-auto     { height:auto; }
.h-full     { height:100%; }
.h-screen   { height:100vh; }
.h-svh      { height:100svh; }

.h-0\.5     { height:.125rem; }
.h-1        { height:.25rem; }
.h-1\.5     { height:.375rem; }
.h-2        { height:.5rem; }
.h-2\.5     { height:.625rem; }
.h-3        { height:.75rem; }
.h-3\.5     { height:.875rem; }
.h-4        { height:1rem; }
.h-5        { height:1.25rem; }
.h-6        { height:1.5rem; }
.h-7        { height:1.75rem; }
.h-8        { height:2rem; }
.h-9        { height:2.25rem; }
.h-10       { height:2.5rem; }
.h-11       { height:2.75rem; }
.h-12       { height:3rem; }
.h-14       { height:3.5rem; }
.h-16       { height:4rem; }
.h-20       { height:5rem; }
.h-24       { height:6rem; }
.h-32       { height:8rem; }
.h-48       { height:12rem; }
.h-64       { height:16rem; }

.min-h-0      { min-height:0; }
.min-h-full   { min-height:100%; }
.min-h-screen { min-height:100vh; }
.min-h-svh    { min-height:100svh; }
.max-h-full   { max-height:100%; }
.max-h-screen { max-height:100vh; }
.max-h-96     { max-height:24rem; }

/* ── Typography ─────────────────────────────────────────────── */
.font-sans   { font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
.font-mono   { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }

.text-xs   { font-size:.75rem;   line-height:1rem; }
.text-sm   { font-size:.875rem;  line-height:1.25rem; }
.text-base { font-size:1rem;     line-height:1.5rem; }
.text-lg   { font-size:1.125rem; line-height:1.75rem; }
.text-xl   { font-size:1.25rem;  line-height:1.75rem; }
.text-2xl  { font-size:1.5rem;   line-height:2rem; }
.text-3xl  { font-size:1.875rem; line-height:2.25rem; }
.text-4xl  { font-size:2.25rem;  line-height:2.5rem; }
.text-5xl  { font-size:3rem;     line-height:1; }
.text-6xl  { font-size:3.75rem;  line-height:1; }

/* Arbitrary sizes */
.text-\[10px\] { font-size:10px; line-height:1.2; }
.text-\[11px\] { font-size:11px; line-height:1.2; }
.text-\[12px\] { font-size:12px; line-height:1.2; }
.text-\[13px\] { font-size:13px; line-height:1.2; }

.font-thin        { font-weight:100; }
.font-extralight  { font-weight:200; }
.font-light       { font-weight:300; }
.font-normal      { font-weight:400; }
.font-medium      { font-weight:500; }
.font-semibold    { font-weight:600; }
.font-bold        { font-weight:700; }
.font-extrabold   { font-weight:800; }
.font-black       { font-weight:900; }

.italic    { font-style:italic; }
.not-italic{ font-style:normal; }

.text-left   { text-align:left; }
.text-center { text-align:center; }
.text-right  { text-align:right; }
.text-justify{ text-align:justify; }

.leading-none    { line-height:1; }
.leading-tight   { line-height:1.25; }
.leading-snug    { line-height:1.375; }
.leading-normal  { line-height:1.5; }
.leading-relaxed { line-height:1.625; }
.leading-loose   { line-height:2; }

.tracking-tighter { letter-spacing:-.05em; }
.tracking-tight   { letter-spacing:-.025em; }
.tracking-normal  { letter-spacing:0; }
.tracking-wide    { letter-spacing:.025em; }
.tracking-wider   { letter-spacing:.05em; }

.truncate         { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.overflow-ellipsis{ text-overflow:ellipsis; }
.whitespace-normal  { white-space:normal; }
.whitespace-nowrap  { white-space:nowrap; }
.whitespace-pre     { white-space:pre; }
.whitespace-pre-line{ white-space:pre-line; }
.whitespace-pre-wrap{ white-space:pre-wrap; }
.break-normal  { word-break:normal; overflow-wrap:normal; }
.break-words   { overflow-wrap:break-word; }
.break-all     { word-break:break-all; }

.uppercase   { text-transform:uppercase; }
.lowercase   { text-transform:lowercase; }
.capitalize  { text-transform:capitalize; }
.normal-case { text-transform:none; }

.underline       { text-decoration-line:underline; }
.line-through    { text-decoration-line:line-through; }
.no-underline    { text-decoration-line:none; }

.align-middle { vertical-align:middle; }
.align-top    { vertical-align:top; }
.align-bottom { vertical-align:bottom; }

.list-none  { list-style-type:none; }
.list-disc  { list-style-type:disc; }
.list-decimal{ list-style-type:decimal; }
.list-inside { list-style-position:inside; }

/* ── Text Colors ────────────────────────────────────────────── */
/* Dark-native: these ARE the dark values */
.text-white      { color:#fff; }
.text-black      { color:#000; }
.text-transparent{ color:transparent; }

.text-slate-50   { color:#e2e8f0; }
.text-slate-100  { color:#cbd5e1; }
.text-slate-200  { color:#94a3b8; }
.text-slate-300  { color:#cbd5e1; }
.text-slate-400  { color:#94a3b8; }
.text-slate-500  { color:#64748b; }
.text-slate-600  { color:#94a3b8; }
.text-slate-700  { color:#cbd5e1; }
.text-slate-800  { color:#d1d5db; }
.text-slate-900  { color:#e5e7eb; }
.text-slate-950  { color:#f1f5f9; }

.text-gray-100   { color:#d1d5db; }
.text-gray-200   { color:#9ca3af; }
.text-gray-300   { color:#d1d5db; }
.text-gray-400   { color:#9ca3af; }
.text-gray-500   { color:#6b7280; }
.text-gray-600   { color:#9ca3af; }
.text-gray-700   { color:#d1d5db; }
.text-gray-800   { color:#e5e7eb; }
.text-gray-900   { color:#f3f4f6; }

.text-emerald-100 { color:#a7f3d0; }
.text-emerald-200 { color:#6ee7b7; }
.text-emerald-300 { color:#34d399; }
.text-emerald-400 { color:#34d399; }
.text-emerald-500 { color:#10b981; }
.text-emerald-600 { color:#059669; }
.text-emerald-700 { color:#6ee7b7; }
.text-emerald-800 { color:#a7f3d0; }
.text-emerald-900 { color:#d1fae5; }

.text-green-100  { color:#bbf7d0; }
.text-green-400  { color:#4ade80; }
.text-green-500  { color:#22c55e; }
.text-green-600  { color:#16a34a; }
.text-green-700  { color:#4ade80; }

.text-rose-100   { color:#fecdd3; }
.text-rose-200   { color:#fda4af; }
.text-rose-300   { color:#fb7185; }
.text-rose-400   { color:#fb7185; }
.text-rose-500   { color:#f43f5e; }
.text-rose-600   { color:#e11d48; }
.text-rose-700   { color:#fda4af; }
.text-rose-800   { color:#fecdd3; }
.text-rose-900   { color:#ffe4e6; }

.text-red-100    { color:#fecaca; }
.text-red-200    { color:#fca5a5; }
.text-red-400    { color:#f87171; }
.text-red-500    { color:#ef4444; }
.text-red-600    { color:#dc2626; }
.text-red-700    { color:#f87171; }

.text-amber-100  { color:#fde68a; }
.text-amber-200  { color:#fcd34d; }
.text-amber-300  { color:#fbbf24; }
.text-amber-400  { color:#fbbf24; }
.text-amber-500  { color:#f59e0b; }
.text-amber-600  { color:#d97706; }
.text-amber-700  { color:#fcd34d; }

.text-yellow-100 { color:#fef9c3; }
.text-yellow-200 { color:#fef08a; }
.text-yellow-300 { color:#fde047; }
.text-yellow-400 { color:#facc15; }
.text-yellow-500 { color:#eab308; }

.text-blue-100   { color:#bfdbfe; }
.text-blue-200   { color:#93c5fd; }
.text-blue-300   { color:#93c5fd; }
.text-blue-400   { color:#60a5fa; }
.text-blue-500   { color:#3b82f6; }
.text-blue-600   { color:#2563eb; }
.text-blue-700   { color:#60a5fa; }

.text-indigo-100 { color:#c7d2fe; }
.text-indigo-400 { color:#818cf8; }
.text-indigo-500 { color:#6366f1; }
.text-indigo-600 { color:#4f46e5; }

.text-purple-100 { color:#e9d5ff; }
.text-purple-400 { color:#c084fc; }
.text-purple-500 { color:#a855f7; }

.text-pink-100   { color:#fbcfe8; }
.text-pink-400   { color:#f472b6; }
.text-pink-500   { color:#ec4899; }

/* Opacity variants */
.text-white\/50  { color:rgba(255,255,255,.50); }
.text-white\/55  { color:rgba(255,255,255,.55); }
.text-white\/60  { color:rgba(255,255,255,.60); }
.text-white\/65  { color:rgba(255,255,255,.65); }
.text-white\/70  { color:rgba(255,255,255,.70); }
.text-white\/75  { color:rgba(255,255,255,.75); }
.text-white\/80  { color:rgba(255,255,255,.80); }
.text-white\/85  { color:rgba(255,255,255,.85); }
.text-white\/90  { color:rgba(255,255,255,.90); }
.text-white\/95  { color:rgba(255,255,255,.95); }

/* ── Background Colors ──────────────────────────────────────── */
/* Dark-native mappings */
.bg-transparent   { background-color:transparent; }
.bg-black         { background-color:#000; }
.bg-white         { background-color:#0f172a; }
.bg-white\/5      { background-color:rgba(255,255,255,.05); }
.bg-white\/10     { background-color:rgba(255,255,255,.10); }
.bg-white\/20     { background-color:rgba(255,255,255,.20); }
.bg-black\/5      { background-color:rgba(0,0,0,.05); }
.bg-black\/10     { background-color:rgba(0,0,0,.10); }
.bg-black\/20     { background-color:rgba(0,0,0,.20); }
.bg-black\/40     { background-color:rgba(0,0,0,.40); }
.bg-black\/60     { background-color:rgba(0,0,0,.60); }

.bg-slate-50      { background-color:#080e1c; }
.bg-slate-100     { background-color:#0f172a; }
.bg-slate-200     { background-color:#1e293b; }
.bg-slate-700     { background-color:#1e293b; }
.bg-slate-800     { background-color:#0f172a; }
.bg-slate-900     { background-color:#111827; }
.bg-slate-950     { background-color:#080e1c; }

.bg-emerald-50    { background-color:rgba(6,78,59,.15); }
.bg-emerald-100   { background-color:rgba(6,78,59,.25); }
.bg-emerald-400\/10 { background-color:rgba(52,211,153,.10); }
.bg-emerald-500   { background-color:#10b981; }
.bg-emerald-500\/10 { background-color:rgba(16,185,129,.10); }
.bg-emerald-600   { background-color:#059669; }

.bg-rose-50       { background-color:rgba(136,19,55,.15); }
.bg-rose-100      { background-color:rgba(136,19,55,.25); }
.bg-rose-400\/10  { background-color:rgba(251,113,133,.10); }
.bg-rose-500\/10  { background-color:rgba(244,63,94,.10); }

.bg-red-500\/10   { background-color:rgba(239,68,68,.10); }

.bg-amber-50      { background-color:rgba(78,53,2,.15); }
.bg-amber-500\/10 { background-color:rgba(245,158,11,.10); }

.bg-blue-50       { background-color:rgba(30,58,138,.15); }
.bg-blue-500\/10  { background-color:rgba(59,130,246,.10); }

.bg-yellow-500\/10 { background-color:rgba(234,179,8,.10); }
.bg-purple-500\/10 { background-color:rgba(168,85,247,.10); }

/* ── Border ─────────────────────────────────────────────────── */
.border    { border-width:1px; border-style:solid; }
.border-0  { border-width:0; }
.border-2  { border-width:2px; border-style:solid; }
.border-4  { border-width:4px; border-style:solid; }
.border-t  { border-top-width:1px; border-top-style:solid; }
.border-r  { border-right-width:1px; border-right-style:solid; }
.border-b  { border-bottom-width:1px; border-bottom-style:solid; }
.border-l  { border-left-width:1px; border-left-style:solid; }
.border-x  { border-left-width:1px; border-left-style:solid; border-right-width:1px; border-right-style:solid; }
.border-y  { border-top-width:1px; border-top-style:solid; border-bottom-width:1px; border-bottom-style:solid; }

.border-transparent  { border-color:transparent; }
.border-white        { border-color:#fff; }
.border-white\/5     { border-color:rgba(255,255,255,.05); }
.border-white\/10    { border-color:rgba(255,255,255,.10); }
.border-white\/15    { border-color:rgba(255,255,255,.15); }
.border-white\/20    { border-color:rgba(255,255,255,.20); }

.border-slate-100    { border-color:#1f2937; }
.border-slate-200    { border-color:#1f2937; }
.border-slate-300    { border-color:#374151; }
.border-slate-700    { border-color:#374151; }
.border-slate-800    { border-color:#1e293b; }

.border-emerald-200  { border-color:rgba(52,211,153,.25); }
.border-emerald-200\/25 { border-color:rgba(52,211,153,.25); }
.border-emerald-200\/30 { border-color:rgba(52,211,153,.30); }
.border-emerald-300\/25 { border-color:rgba(110,231,183,.25); }
.border-emerald-500  { border-color:#10b981; }

.border-rose-200     { border-color:rgba(253,164,175,.25); }
.border-rose-200\/25 { border-color:rgba(253,164,175,.25); }
.border-rose-200\/30 { border-color:rgba(253,164,175,.30); }
.border-rose-300\/25 { border-color:rgba(251,113,133,.25); }
.border-rose-500     { border-color:#f43f5e; }

.border-amber-200\/25 { border-color:rgba(252,211,77,.25); }

.border-black\/10    { border-color:rgba(0,0,0,.10); }

/* ── Outline ────────────────────────────────────────────────── */
.outline-none  { outline:none; }
.outline-0     { outline-width:0; }
.ring-0        { box-shadow:none; }
.ring          { box-shadow:0 0 0 3px rgba(36,107,225,.35); }
.ring-1        { box-shadow:0 0 0 1px rgba(36,107,225,.35); }
.ring-2        { box-shadow:0 0 0 2px rgba(36,107,225,.35); }
.ring-inset    { --tw-ring-inset:inset; }
.focus\:outline-none:focus { outline:none; }
.focus\:ring-0:focus       { box-shadow:none; }

/* ── Border Radius ──────────────────────────────────────────── */
.rounded-none { border-radius:0; }
.rounded-sm   { border-radius:.125rem; }
.rounded      { border-radius:.25rem; }
.rounded-md   { border-radius:.375rem; }
.rounded-lg   { border-radius:.5rem; }
.rounded-xl   { border-radius:.75rem; }
.rounded-2xl  { border-radius:1rem; }
.rounded-3xl  { border-radius:1.5rem; }
.rounded-full { border-radius:9999px; }

.rounded-t-lg  { border-top-left-radius:.5rem; border-top-right-radius:.5rem; }
.rounded-t-xl  { border-top-left-radius:.75rem; border-top-right-radius:.75rem; }
.rounded-b-xl  { border-bottom-left-radius:.75rem; border-bottom-right-radius:.75rem; }

/* ── Shadow ─────────────────────────────────────────────────── */
.shadow-none { box-shadow:none; }
.shadow-sm   { box-shadow:0 1px 2px rgba(0,0,0,.4); }
.shadow      { box-shadow:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3); }
.shadow-md   { box-shadow:0 4px 6px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3); }
.shadow-lg   { box-shadow:0 10px 15px rgba(0,0,0,.45),0 4px 6px rgba(0,0,0,.3); }
.shadow-xl   { box-shadow:0 20px 25px rgba(0,0,0,.5),0 8px 10px rgba(0,0,0,.3); }
.shadow-2xl  { box-shadow:0 25px 50px rgba(0,0,0,.6); }
.shadow-inner{ box-shadow:inset 0 2px 4px rgba(0,0,0,.4); }

/* ── Opacity ────────────────────────────────────────────────── */
.opacity-0   { opacity:0; }
.opacity-10  { opacity:.10; }
.opacity-20  { opacity:.20; }
.opacity-25  { opacity:.25; }
.opacity-30  { opacity:.30; }
.opacity-40  { opacity:.40; }
.opacity-50  { opacity:.50; }
.opacity-60  { opacity:.60; }
.opacity-70  { opacity:.70; }
.opacity-75  { opacity:.75; }
.opacity-80  { opacity:.80; }
.opacity-90  { opacity:.90; }
.opacity-100 { opacity:1; }

/* ── Transition ─────────────────────────────────────────────── */
.transition          { transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms; }
.transition-all      { transition-property:all; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms; }
.transition-colors   { transition-property:color,background-color,border-color; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms; }
.transition-opacity  { transition-property:opacity; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms; }
.transition-transform{ transition-property:transform; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms; }

.duration-75  { transition-duration:75ms; }
.duration-100 { transition-duration:100ms; }
.duration-150 { transition-duration:150ms; }
.duration-200 { transition-duration:200ms; }
.duration-300 { transition-duration:300ms; }
.duration-500 { transition-duration:500ms; }
.duration-700 { transition-duration:700ms; }

.ease-linear  { transition-timing-function:linear; }
.ease-in      { transition-timing-function:cubic-bezier(.4,0,1,1); }
.ease-out     { transition-timing-function:cubic-bezier(0,0,.2,1); }
.ease-in-out  { transition-timing-function:cubic-bezier(.4,0,.2,1); }

.delay-0   { transition-delay:0ms; }
.delay-75  { transition-delay:75ms; }
.delay-100 { transition-delay:100ms; }
.delay-150 { transition-delay:150ms; }

/* ── Transform ──────────────────────────────────────────────── */
.transform       { transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1)); }
.translate-x-0   { --tw-translate-x:0; transform:translateX(0); }
.translate-y-0   { --tw-translate-y:0; transform:translateY(0); }
.-translate-x-1\/2 { transform:translateX(-50%); }
.-translate-y-1\/2 { transform:translateY(-50%); }
.scale-95  { transform:scale(.95); }
.scale-100 { transform:scale(1); }
.scale-105 { transform:scale(1.05); }

/* ── Filters ────────────────────────────────────────────────── */
.blur-sm { filter:blur(4px); }
.blur    { filter:blur(8px); }
.blur-md { filter:blur(12px); }
.blur-lg { filter:blur(16px); }
.blur-xl { filter:blur(24px); }
.backdrop-blur-sm { -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.backdrop-blur    { -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.backdrop-blur-md { -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.backdrop-blur-lg { -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.backdrop-blur-xl { -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }

/* ── Cursor / Pointer ───────────────────────────────────────── */
.cursor-auto       { cursor:auto; }
.cursor-default    { cursor:default; }
.cursor-pointer    { cursor:pointer; }
.cursor-move       { cursor:move; }
.cursor-text       { cursor:text; }
.cursor-not-allowed{ cursor:not-allowed; }
.cursor-wait       { cursor:wait; }
.pointer-events-none{ pointer-events:none; }
.pointer-events-auto{ pointer-events:auto; }

/* ── Select / User interaction ──────────────────────────────── */
.select-none  { user-select:none; -webkit-user-select:none; }
.select-text  { user-select:text; }
.select-all   { user-select:all; }
.select-auto  { user-select:auto; }
.resize-none  { resize:none; }
.resize       { resize:both; }
.appearance-none { -webkit-appearance:none; appearance:none; }

/* ── Object ─────────────────────────────────────────────────── */
.object-cover   { object-fit:cover; }
.object-contain { object-fit:contain; }
.object-fill    { object-fit:fill; }
.object-center  { object-position:center; }

/* ── Aspect ─────────────────────────────────────────────────── */
.aspect-square { aspect-ratio:1/1; }
.aspect-video  { aspect-ratio:16/9; }

/* ── Divide ─────────────────────────────────────────────────── */
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-width:1px; border-top-style:solid;
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-top-color:#1f2937; }
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-top-color:#1f2937; }
.divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-top-color:#1e293b; }
.divide-white\/5  > :not([hidden]) ~ :not([hidden]) { border-top-color:rgba(255,255,255,.05); }
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-top-color:rgba(255,255,255,.10); }

/* ── Space-y ────────────────────────────────────────────────── */
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top:.125rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top:.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top:.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top:.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top:1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top:1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top:1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top:2rem; }
.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left:.25rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left:.5rem; }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left:.75rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left:1rem; }

/* ── Line Clamp ─────────────────────────────────────────────── */
.line-clamp-1 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }

/* ── SR-only ────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* ── Hover states ───────────────────────────────────────────── */
.hover\:bg-white\/5:hover    { background-color:rgba(255,255,255,.05); }
.hover\:bg-white\/10:hover   { background-color:rgba(255,255,255,.10); }
.hover\:bg-slate-50:hover    { background-color:rgba(255,255,255,.04); }
.hover\:bg-slate-100:hover   { background-color:rgba(255,255,255,.05); }
.hover\:bg-slate-800:hover   { background-color:#1e293b; }
.hover\:bg-slate-900:hover   { background-color:#111827; }
.hover\:bg-emerald-500:hover { background-color:#059669; }
.hover\:bg-rose-50:hover     { background-color:rgba(136,19,55,.15); }
.hover\:text-white:hover     { color:#fff; }
.hover\:text-slate-900:hover { color:#e5e7eb; }
.hover\:text-slate-300:hover { color:#cbd5e1; }
.hover\:border-slate-300:hover { border-color:#374151; }
.hover\:underline:hover      { text-decoration:underline; }
.hover\:opacity-80:hover     { opacity:.80; }
.hover\:scale-105:hover      { transform:scale(1.05); }

/* Focus */
.focus\:bg-white\/5:focus  { background-color:rgba(255,255,255,.05); }
.focus\:ring-2:focus       { box-shadow:0 0 0 2px rgba(36,107,225,.5); }

/* Disabled */
.disabled\:cursor-not-allowed:disabled { cursor:not-allowed; }
.disabled\:opacity-50:disabled         { opacity:.50; }

/* ── Dark: variants (always active — app is always dark) ─────── */
.dark .dark\:bg-white\/5   { background-color:rgba(255,255,255,.05); }
.dark .dark\:bg-slate-900  { background-color:#111827; }
.dark .dark\:border-slate-800 { border-color:#1e293b; }
.dark .dark\:divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-top-color:rgba(255,255,255,.05); }
.dark .dark\:text-slate-300 { color:#cbd5e1; }
.dark .dark\:text-slate-400 { color:#94a3b8; }
.dark .dark\:hover\:bg-white\/5:hover { background-color:rgba(255,255,255,.05); }

/* Also apply unconditionally (since .dark is always on <html>) */
.dark\:bg-white\/5         { background-color:rgba(255,255,255,.05); }
.dark\:border-slate-800    { border-color:#1e293b; }
.dark\:divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-top-color:rgba(255,255,255,.05); }
.dark\:text-slate-300      { color:#cbd5e1; }
.dark\:text-slate-400      { color:#94a3b8; }
.dark\:hover\:bg-white\/5:hover { background-color:rgba(255,255,255,.05); }

/* ── Group hover ─────────────────────────────────────────────── */
/* (basic support — full group-hover requires JS or scoping) */

/* ── Misc ────────────────────────────────────────────────────── */
.text-current    { color:currentColor; }
.bg-current      { background-color:currentColor; }
.border-current  { border-color:currentColor; }
.fill-current    { fill:currentColor; }
.stroke-current  { stroke:currentColor; }

.w-px            { width:1px; }
.h-px            { height:1px; }
.max-w-none      { max-width:none; }
.flex-shrink     { flex-shrink:1; }
.grow-0          { flex-grow:0; }
.col-start-1     { grid-column-start:1; }
.col-end-auto    { grid-column-end:auto; }

/* sticky top */
.sticky.top-0    { position:sticky; top:0; }

/* ── App-level base ──────────────────────────────────────────── */
body {
  background: var(--sp-bg) !important;
  color: var(--sp-txt1) !important;
}

/* Fix: sticky topbar guard — pages that have it should be relative */
/* (sidebar already handles sticky positioning) */

/* Scrollbar styling (dark, subtle) */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.22); }

/* ── Responsive: sm (640px+) ─────────────────────────────────── */
@media (min-width:640px) {
  .sm\:flex       { display:flex; }
  .sm\:block      { display:block; }
  .sm\:hidden     { display:none; }
  .sm\:flex-row   { flex-direction:row; }
  .sm\:flex-col   { flex-direction:column; }
  .sm\:items-center  { align-items:center; }
  .sm\:items-start   { align-items:flex-start; }
  .sm\:items-end     { align-items:flex-end; }
  .sm\:justify-between { justify-content:space-between; }
  .sm\:justify-end     { justify-content:flex-end; }
  .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sm\:col-span-1  { grid-column:span 1/span 1; }
  .sm\:col-span-2  { grid-column:span 2/span 2; }
  .sm\:gap-4       { gap:1rem; }
  .sm\:gap-6       { gap:1.5rem; }
  .sm\:p-5         { padding:1.25rem; }
  .sm\:p-6         { padding:1.5rem; }
  .sm\:p-8         { padding:2rem; }
  .sm\:px-6        { padding-left:1.5rem; padding-right:1.5rem; }
  .sm\:py-6        { padding-top:1.5rem; padding-bottom:1.5rem; }
  .sm\:text-sm     { font-size:.875rem; line-height:1.25rem; }
  .sm\:text-base   { font-size:1rem; line-height:1.5rem; }
  .sm\:text-lg     { font-size:1.125rem; line-height:1.75rem; }
  .sm\:text-3xl    { font-size:1.875rem; line-height:2.25rem; }
  .sm\:text-4xl    { font-size:2.25rem; line-height:2.5rem; }
  .sm\:w-60        { width:15rem; }
  .sm\:w-\[200px\] { width:200px; }
  .sm\:w-\[260px\] { width:260px; }
  .sm\:mx-0        { margin-left:0; margin-right:0; }
}

/* ── Responsive: md (768px+) ─────────────────────────────────── */
@media (min-width:768px) {
  .md\:flex        { display:flex; }
  .md\:block       { display:block; }
  .md\:inline-flex { display:inline-flex; }
  .md\:flex-row    { flex-direction:row; }
  .md\:flex-col    { flex-direction:column; }
  .md\:items-center   { align-items:center; }
  .md\:items-start    { align-items:flex-start; }
  .md\:items-end      { align-items:flex-end; }
  .md\:justify-between{ justify-content:space-between; }
  .md\:justify-end    { justify-content:flex-end; }
  .md\:justify-center { justify-content:center; }
  .md\:grid-cols-2    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3    { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4    { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .md\:grid-cols-12   { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .md\:col-span-1     { grid-column:span 1/span 1; }
  .md\:col-span-2     { grid-column:span 2/span 2; }
  .md\:col-span-3     { grid-column:span 3/span 3; }
  .md\:col-span-4     { grid-column:span 4/span 4; }
  .md\:col-span-5     { grid-column:span 5/span 5; }
  .md\:col-span-6     { grid-column:span 6/span 6; }
  .md\:col-span-8     { grid-column:span 8/span 8; }
  .md\:col-span-12    { grid-column:span 12/span 12; }
  .md\:gap-4          { gap:1rem; }
  .md\:gap-6          { gap:1.5rem; }
  .md\:p-5            { padding:1.25rem; }
  .md\:p-6            { padding:1.5rem; }
  .md\:p-8            { padding:2rem; }
  .md\:px-6           { padding-left:1.5rem; padding-right:1.5rem; }
  .md\:py-6           { padding-top:1.5rem; padding-bottom:1.5rem; }
  .md\:pl-16          { padding-left:4rem; }
  .md\:pb-0           { padding-bottom:0; }
  .md\:hidden         { display:none !important; }
  .md\:mb-0           { margin-bottom:0; }
  .md\:mt-0           { margin-top:0; }
  .md\:text-base      { font-size:1rem; line-height:1.5rem; }
  .md\:text-lg        { font-size:1.125rem; line-height:1.75rem; }
  .md\:text-xl        { font-size:1.25rem; line-height:1.75rem; }
  .md\:text-3xl       { font-size:1.875rem; line-height:2.25rem; }
  .md\:text-4xl       { font-size:2.25rem; line-height:2.5rem; }
  .md\:w-56           { width:14rem; }
  .md\:w-auto         { width:auto; }
  .md\:w-\[380px\]    { width:380px; }
  .md\:w-\[420px\]    { width:420px; }
  .md\:max-w-none     { max-width:none; }
  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top:0; }
}

/* ── Responsive: lg (1024px+) ────────────────────────────────── */
@media (min-width:1024px) {
  .lg\:flex       { display:flex; }
  .lg\:block      { display:block; }
  .lg\:hidden     { display:none; }
  .lg\:flex-row   { flex-direction:row; }
  .lg\:items-center  { align-items:center; }
  .lg\:items-start   { align-items:flex-start; }
  .lg\:justify-between { justify-content:space-between; }
  .lg\:grid-cols-2    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-3    { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4    { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .lg\:col-span-1     { grid-column:span 1/span 1; }
  .lg\:col-span-2     { grid-column:span 2/span 2; }
  .lg\:col-span-3     { grid-column:span 3/span 3; }
  .lg\:gap-6          { gap:1.5rem; }
  .lg\:p-6            { padding:1.5rem; }
  .lg\:p-8            { padding:2rem; }
  .lg\:px-8           { padding-left:2rem; padding-right:2rem; }
  .lg\:py-8           { padding-top:2rem; padding-bottom:2rem; }
  .lg\:text-lg        { font-size:1.125rem; line-height:1.75rem; }
  .lg\:text-xl        { font-size:1.25rem; line-height:1.75rem; }
  .lg\:w-\[360px\]    { width:360px; }
}

/* ── Page base ───────────────────────────────────────────────── */
#spPage { will-change:auto; }

/* ── Bottom nav (dark, premium) ─────────────────────────────── */
#sp-bottom-nav {
  background: rgba(8,14,28,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 200;
  /* safe area para iPhone com notch */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#sp-bottom-nav a {
  color: #475569;
  transition: color 120ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 4px;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  min-height: 52px;
}
#sp-bottom-nav a.sp-bnav-active {
  color: #e5e7eb;
}
#sp-bottom-nav a i,
#sp-bottom-nav a svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}
/* Dot ativo */
#sp-bottom-nav a.sp-bnav-active span span {
  background: var(--accent) !important;
}

/* ── Mobile content safe area ────────────────────────────────── */
/* Garante que o conteúdo não fique sob a bottom nav */
@media (max-width: 767px) {
  #spPage {
    /* pb-24 = 6rem = 96px — espaço para bottom nav */
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Toast ───────────────────────────────────────────────────── */
.sp-toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.97);
  color: #e5e7eb;
  padding: .5rem 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.10);
  z-index: 9999;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: spToastIn 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes spToastIn {
  from { opacity:0; transform:translateX(-50%) translateY(8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── Mobile performance fixes ── */
@media (max-width: 768px) {
  .db-chart-outer { display: none; }
  [class*="-orb"] { display: none !important; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .sq-bal-card::after, .sq-main-panel::after { display: none !important; }
}

/* ── Perfil mobile fixes ── */
@media (max-width: 600px) {
  /* Hero: empilha avatar+nome em cima, badges embaixo */
  .pf-hero-row { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .pf-hero-row > div:last-child { width: 100%; }

  /* KPI row: 2 colunas no mobile */
  .pf-kpi-row { grid-template-columns: 1fr 1fr !important; }

  /* Resumo da aba Conta: 1 coluna */
  .pf-body [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* Senha: 1 coluna */
  .pf-body form [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* Nebulas: desativa blur pesado no mobile */
  .pf-nebula-a, .pf-nebula-b { filter: none !important; opacity: 0 !important; }

  /* Canvas: para de animar no mobile */
  #pf-canvas { display: none !important; }

  /* Hero inner: menos padding */
  .pf-hero-inner { padding: 16px !important; }

  /* Sessões: botão não ultrapassa a tela */
  .pf-session { flex-wrap: wrap !important; }
  .pf-session > div:last-child { width: 100%; margin-top: 6px; }
  .pf-session .pf-btn { width: 100% !important; }
}