:root{
  --bg:#F8F9FC; --surface:#FFFFFF; --surface-2:#FBFCFE;
  --border:#E3E6EC; --border-strong:#DADCE0;
  --text:#202124; --text-2:#3C4043; --muted:#5F6368; --faint:#80868B;
  --track:#F1F3F4;
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC04; --green:#34A853;
  --blue-ink:#1967D2; --red-ink:#C5221F; --yellow-ink:#B06000; --green-ink:#137333;
  --blue-tint:#E8F0FE; --red-tint:#FCE8E6; --yellow-tint:#FEF7E0; --green-tint:#E6F4EA;
  --primary:#1A73E8; --primary-hover:#174EA6; --danger:#D93025; --success:#188038;
  --radius-card:24px; --radius-tile:20px; --radius-input:12px; --pill:999px;
  --shadow-card:0 1px 2px rgba(60,64,67,.08),0 8px 24px -12px rgba(60,64,67,.18);
  --ease:cubic-bezier(.2,.8,.2,1);
  --link:#1A73E8; --link-hover:#174EA6; --danger-text:#D93025; --success-text:#188038;
  --header-bg:rgba(255,255,255,.92); --row-hover:#F1F5FE; --check-border:#BDC1C6;
  --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17181B; --surface:#202226; --surface-2:#1B1D21;
  --border:#33353B; --border-strong:#464850;
  --text:#ECECEF; --text-2:#C9CACF; --muted:#9AA0A6; --faint:#80868B; --track:#2C2E34;
  --blue-ink:#8AB4F8; --red-ink:#F28B82; --yellow-ink:#FDD663; --green-ink:#81C995;
  --blue-tint:#233559; --red-tint:#43201D; --yellow-tint:#3D2E14; --green-tint:#1D3A2A;
  --link:#8AB4F8; --link-hover:#AECBFA; --danger-text:#F28B82; --success-text:#81C995;
  --header-bg:rgba(23,24,27,.88); --row-hover:#262A33; --check-border:#5F6368;
  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 'DM Sans',system-ui,sans-serif}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
h1,h2,h3{font-family:var(--display)}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes jbUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes jbPop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes jbGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes jbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes jbBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}}
@keyframes jbSpin{to{transform:rotate(360deg)}}

.jb-up{animation:jbUp .6s var(--ease) both}
.jb-pop{animation:jbPop .35s var(--ease) both}
.jb-grow{animation:jbGrow 1s var(--ease) both;transform-origin:left center}
.jb-float{animation:jbFloat 5s ease-in-out infinite}
.jb-dot{animation:jbBounce 1.4s ease-in-out infinite}
.jb-spin:hover svg{animation:jbSpin .8s linear}

.jb-card{transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.jb-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px -10px rgba(26,115,232,.35);border-color:var(--primary)}
.jb-card.jb-up{animation-fill-mode:backwards}
.jb-btn{transition:transform .15s,box-shadow .2s,background-color .2s}
.jb-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(26,115,232,.55)}
.jb-btn:active{transform:scale(.96)}
.jb-row{transition:background-color .2s}
.jb-row:hover{background:var(--row-hover)}
.jb-chip{transition:transform .2s,box-shadow .2s}
.jb-chip:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 8px 18px -8px rgba(0,0,0,.25)}
.jb-seg{transition:background-color .25s,color .25s,box-shadow .25s}
.jb-nav{transition:background-color .2s,color .2s}
.jb-nav:hover{background:var(--blue-tint);color:var(--link)}
.jb-ring{transition:stroke-dashoffset .8s var(--ease)}
.jb-bar{transition:width .6s var(--ease)}

input,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(26,115,232,.18)}
input::placeholder,textarea::placeholder{color:var(--faint)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--link);outline-offset:2px}

[data-theme-toggle] .ico-sun{display:none}
:root[data-theme="dark"] [data-theme-toggle] .ico-sun{display:block}
:root[data-theme="dark"] [data-theme-toggle] .ico-moon{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}