@import url("./tokens.css");
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
body{min-height:100vh;background:var(--bg);color:var(--text);font:var(--text-md)/var(--leading-normal) var(--font-sans)}
button,input,textarea,select{color:inherit;font:inherit} img,video,canvas,svg{display:block;max-width:100%}
a{color:var(--primary-strong)} :focus-visible{outline:3px solid var(--primary);outline-offset:3px}
::selection{background:var(--secondary);color:var(--black)}
.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}
.box{padding:var(--space-4)} .container{width:min(var(--container-lg),calc(100% - 2rem));margin:auto}
.stack{display:flex;flex-direction:column;gap:var(--gap,var(--space-4))}.row{flex-flow:row wrap;align-items:center}
.grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap,var(--space-4))}
.divider{display:flex;align-items:center;gap:var(--space-3);color:var(--text-muted);font-size:var(--text-sm);font-weight:800}
.divider::before,.divider::after{height:2px;flex:1;background:var(--border);content:""}
.scroll{max-width:100%;overflow:auto;scrollbar-color:var(--primary) var(--surface-2)}
.aspect{position:relative;overflow:hidden;aspect-ratio:var(--ratio,16/9);background:var(--surface-2)}
.display,.h1,.h2,.h3,.h4{font-weight:800;line-height:1;letter-spacing:var(--tracking-tight)}
.display{font-size:var(--text-4xl)}.h1{font-size:var(--text-3xl)}.h2{font-size:var(--text-2xl)}
.h3{font-size:var(--text-xl)}.h4{font-size:var(--text-lg)}.small{font-size:var(--text-sm)}
.caption{color:var(--text-muted);font-size:var(--text-xs)}.muted{color:var(--text-muted)}
.overline{color:var(--primary-strong);font:800 var(--text-xs) var(--font-mono);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.btn{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:var(--space-2);padding:.65rem 1rem;border:1px solid var(--border);border-radius:0;background:var(--primary);color:var(--black);font-weight:800;line-height:1;text-decoration:none;cursor:pointer;transition:.18s}
.btn:hover{background:var(--text);color:var(--bg)}.btn:active{transform:translate(2px,2px)}.btn.outline{background:var(--surface);color:var(--text)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text)}.btn.danger{background:var(--error)}.btn.link{min-height:auto;padding:0;border:0;background:none;color:var(--primary-strong);text-decoration:underline}
.btn.sm{min-height:34px;padding:.45rem .7rem;font-size:var(--text-sm)}.btn.lg{min-height:52px;padding:.85rem 1.35rem;font-size:var(--text-lg)}
.btn.icon{width:42px;padding:0}.btn.circle{border-radius:50%}.btn[disabled]{opacity:.45;pointer-events:none}
.btn-group{display:inline-flex}.btn-group>*+*{margin-left:-2px}
.spinner{width:1.1em;height:1.1em;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}
.badge{display:inline-flex;min-height:26px;align-items:center;gap:var(--space-2);padding:.25rem .55rem;border:1px solid var(--border);border-radius:999px;background:var(--primary);color:var(--black);font-size:var(--text-xs);font-weight:800}
.badge.outline{background:var(--surface);color:var(--text)}.dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.breadcrumbs,.pagination,.tabs,.menu,.stepper{padding:0;margin:0;list-style:none}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:var(--text-sm)}.breadcrumbs li:not(:last-child)::after{margin-left:var(--space-2);content:"/"}
.pagination{display:flex;gap:var(--space-1)}.page{display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:800;text-decoration:none}.page[aria-current]{background:var(--primary);color:var(--black)}
.tabs{display:flex;overflow:auto;border-bottom:1px solid var(--border)}.tab{padding:var(--space-3) var(--space-4);border:0;border-right:1px solid var(--border);background:var(--surface);font-weight:800;cursor:pointer}.tab[aria-selected="true"]{background:var(--primary);color:var(--black)}
.tab-panel{padding:var(--space-5);border:1px solid var(--border);border-top:0}
.stepper{display:grid;grid-template-columns:repeat(3,1fr)}.step{display:flex;align-items:center;gap:var(--space-3);font-weight:800}.step:not(:last-child)::after{height:2px;flex:1;background:var(--border-soft);content:""}.step-num{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--border)}.step.done .step-num,.step[aria-current] .step-num{background:var(--primary);color:var(--black)}
.navbar{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-5);border:1px solid var(--border);background:var(--surface)}.brand{color:var(--text);font-size:var(--text-xl);font-weight:800;text-decoration:none}
.sidebar{width:min(280px,100%);border:1px solid var(--border);background:var(--surface)}.sidenav{padding:var(--space-3);margin:0;list-style:none}.sidenav a{display:block;padding:var(--space-3);color:var(--text);font-weight:800;text-decoration:none}.sidenav a:hover,.sidenav a[aria-current]{background:var(--primary);color:var(--black)}
.menu{min-width:220px;padding:var(--space-2);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-medium)}.menu-item{display:flex;width:100%;justify-content:space-between;gap:var(--space-5);padding:var(--space-3);border:0;background:none;text-align:left;cursor:pointer}.menu-item:hover{background:var(--primary);color:var(--black)}
.form{display:grid;gap:var(--space-5)}.field{display:grid;gap:var(--space-2)}.label{font-weight:800}.help,.error-text{color:var(--text-muted);font-size:var(--text-sm)}.error-text{color:var(--error);font-weight:800}
.input,.textarea,.select{width:100%;min-height:44px;padding:.7rem .8rem;border:1px solid var(--border);border-radius:0;background:var(--surface)}.textarea{min-height:112px;resize:vertical}.input[aria-invalid]{border-color:var(--error);box-shadow:inset 4px 0 var(--error)}
.input-wrap{position:relative}.input-wrap .input{padding-inline:2.6rem}.input-leading,.input-trailing{position:absolute;top:50%;transform:translateY(-50%)}.input-leading{left:.8rem}.input-trailing{right:.8rem}
.check,.radio,.switch{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;cursor:pointer}.check input,.radio input{width:1.2rem;height:1.2rem;accent-color:var(--primary)}
.switch input{position:absolute;opacity:0}.switch-track{position:relative;width:48px;height:26px;border:1px solid var(--border);background:var(--surface-2)}.switch-track::after{position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--text);content:"";transition:.18s}.switch input:checked+.switch-track{background:var(--primary)}.switch input:checked+.switch-track::after{transform:translateX(22px)}
.radio-card{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border)}.radio-card:has(input:checked){background:var(--primary-soft);box-shadow:inset 5px 0 var(--primary)}
.range{width:100%;accent-color:var(--primary)}.dropzone{display:grid;min-height:150px;place-items:center;padding:var(--space-6);border:1px dashed var(--border);background:var(--surface-2);text-align:center}
.swatch{width:36px;height:36px;border:1px solid var(--border);background:var(--swatch,var(--primary))}.otp{display:flex;gap:var(--space-2)}.otp .input{width:48px;padding:0;text-align:center}
.tags-input{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border)}.stars{color:var(--warning);font-size:var(--text-2xl)}
.card{display:flex;min-width:0;flex-direction:column;border:1px solid var(--border);background:var(--surface)}.card-header,.card-body,.card-footer{padding:var(--space-5)}.card-header{border-bottom:1px solid var(--border)}.card-footer{border-top:1px solid var(--border)}.card.interactive{transition:.1s}.card.interactive:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-medium)}
.avatar{display:inline-grid;width:var(--avatar-size,44px);height:var(--avatar-size,44px);place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--primary-soft);color:var(--primary-strong);font-weight:800}.avatar-group{display:flex}.avatar-group .avatar+.avatar{margin-left:-.75rem}
.stat{padding:var(--space-5);border-left:6px solid var(--primary);background:var(--surface-2)}.stat-value{font-size:var(--text-3xl);font-weight:800;letter-spacing:var(--tracking-tight)}.up{color:var(--success)}.down{color:var(--error)}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border)}.table th,.table td{padding:var(--space-3) var(--space-4);border:1px solid var(--border-soft);text-align:left;white-space:nowrap}.table th{background:var(--primary);color:var(--black)}.table.striped tbody tr:nth-child(even){background:var(--surface-2)}.table tbody tr:hover{background:var(--primary-soft)}
.action-list{padding:0;margin:0;border:1px solid var(--border);list-style:none}.action-list li+li{border-top:1px solid var(--border)}.action-list a{display:block;padding:var(--space-4);color:var(--text);font-weight:800;text-decoration:none}
.timeline{padding-left:var(--space-6);margin:0;border-left:1px solid var(--border);list-style:none}.timeline li{position:relative;padding-bottom:var(--space-6)}.timeline li::before{position:absolute;top:.25rem;left:-2.15rem;width:1rem;height:1rem;border:1px solid var(--border);background:var(--primary);content:""}
.tree,.tree ul{padding-left:var(--space-5);list-style:none}.tree summary{cursor:pointer;font-weight:800}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}.calendar>*{min-height:68px;padding:var(--space-2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:var(--text-sm)}.calendar .head{min-height:auto;background:var(--primary);color:var(--black);font-weight:800}.event{display:block;margin-top:4px;padding:2px 4px;background:var(--secondary);color:var(--black);font-size:var(--text-xs);font-weight:800}
.masonry{columns:3 180px;column-gap:var(--space-3)}.masonry>*{margin-bottom:var(--space-3);break-inside:avoid}
.alert{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border);background:var(--info-soft);box-shadow:inset 6px 0 var(--info)}.alert.success{background:var(--success-soft);box-shadow:inset 6px 0 var(--success)}.alert.warning{background:var(--warning-soft);box-shadow:inset 6px 0 var(--warning)}.alert.error{background:var(--error-soft);box-shadow:inset 6px 0 var(--error)}
.toast{display:grid;max-width:390px;grid-template-columns:1fr auto;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-high)}
.progress{height:20px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}.progress>i{display:block;width:var(--value,60%);height:100%;background:var(--primary)}.ring{display:grid;width:96px;height:96px;place-items:center;border-radius:50%;background:conic-gradient(var(--primary) var(--value),var(--surface-2) 0)}.ring::before{display:grid;width:68px;height:68px;place-items:center;border-radius:50%;background:var(--surface);content:attr(data-label);font-weight:800}
.skeleton{min-height:1rem;background:linear-gradient(90deg,var(--neutral-200),var(--neutral-100),var(--neutral-200));background-size:220% 100%;animation:shimmer 1.5s linear infinite}@keyframes shimmer{to{background-position-x:-220%}}
.empty{display:grid;min-height:240px;place-items:center;padding:var(--space-8);border:1px dashed var(--border);text-align:center}
.accordion{border:1px solid var(--border)}.accordion details+details{border-top:1px solid var(--border)}.accordion summary{padding:var(--space-4);font-weight:800;cursor:pointer}.accordion-body{padding:0 var(--space-4) var(--space-4)}
.card-deck{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.carousel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3)}.carousel-track{display:grid;min-height:190px;place-items:center;border:1px solid var(--border);background:var(--primary-soft)}
.sheet{padding:var(--space-5);border:1px solid var(--border);border-bottom:0;background:var(--surface);box-shadow:0 -12px 30px rgb(5 5 5/.16)}.sheet-handle{width:52px;height:5px;margin:0 auto var(--space-5);background:var(--border)}
.editor{border:1px solid var(--border);background:var(--surface)}.toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:var(--space-2);border-bottom:1px solid var(--border);background:var(--surface-2)}.editor-area{min-height:145px;padding:var(--space-4)}
.code{display:grid;grid-template-columns:auto 1fr;overflow:auto;border:1px solid var(--border);background:#101419;color:#eaf6ff;font:var(--text-sm)/1.7 var(--font-mono)}.code>*{padding:var(--space-4);white-space:pre}.code-lines{background:#1b222a;color:#7f8b98;text-align:right}
.kanban{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:var(--space-3);overflow:auto}.kanban-col{min-height:240px;padding:var(--space-3);border:1px solid var(--border);background:var(--surface-2)}.kanban-card{margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--border);background:var(--surface)}
.command{max-width:580px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-modal)}.command-search{padding:var(--space-4);border-bottom:1px solid var(--border)}.command-results{padding:var(--space-2)}
.virtual-list{height:210px;overflow:auto;border:1px solid var(--border)}.virtual-row{display:flex;min-height:44px;align-items:center;justify-content:space-between;padding:0 var(--space-4);border-bottom:1px solid var(--border-soft)}
.signature{width:100%;min-height:170px;border:1px solid var(--border);background:var(--surface);touch-action:none}.qr{display:grid;width:160px;height:160px;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:2px;padding:10px;border:1px solid var(--border);background:#fff}.qr i{background:#050505}
.dialog{width:min(560px,calc(100% - 2rem));padding:0;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-modal)}.dialog::backdrop{background:rgb(5 5 5/.55)}
@media(max-width:64rem){.grid{--cols:2}.card-deck{grid-template-columns:repeat(2,1fr)}}@media(max-width:48rem){.grid,.card-deck{--cols:1;grid-template-columns:1fr}.stepper{grid-template-columns:1fr;gap:var(--space-3)}.step::after{display:none}.navbar{align-items:flex-start;flex-direction:column}}

/* Refined application surface: calm by default, expressive in active states. */
body{font-weight:var(--weight-regular)}
.display,.h1,.h2,.h3,.h4{font-weight:var(--weight-bold)}
.overline{font-weight:var(--weight-bold)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.btn{
  min-height:40px;
  padding:.6rem .9rem;
  border:1px solid var(--primary);
  border-radius:var(--radius-sm);
  background:var(--primary);
  color:var(--white);
  font-weight:var(--weight-bold);
  transition:
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.btn:hover{border-color:var(--primary-hover);background:var(--primary-hover);color:var(--white);box-shadow:var(--shadow-low)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.outline{border-color:var(--border-strong);background:var(--surface);color:var(--text)}
.btn.outline:hover,.btn.ghost:hover{border-color:var(--border-strong);background:var(--surface-hover);color:var(--text)}
.btn.ghost{color:var(--text)}.btn.danger{border-color:var(--error);background:var(--error);color:var(--white)}
.btn.link{color:var(--primary-strong)}.btn.sm{min-height:32px}.btn.lg{min-height:48px}

.badge{min-height:24px;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));background:var(--primary-soft);color:var(--primary-strong);font-weight:var(--weight-bold)}
.badge.outline{border-color:var(--border);background:var(--surface);color:var(--text-muted)}
.page{border:1px solid var(--border);border-radius:var(--radius-sm);font-weight:var(--weight-medium)}
.page[aria-current]{border-color:var(--primary);background:var(--primary);color:var(--white)}
.step.done .step-num,.step[aria-current] .step-num{border-color:var(--primary);background:var(--primary);color:var(--white)}

.tabs{gap:var(--space-1);border-bottom:1px solid var(--border)}
.tab{border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:transparent;font-weight:var(--weight-medium)}
.tab:hover{background:var(--surface-hover)}.tab[aria-selected="true"]{background:var(--primary-soft);color:var(--primary-strong);box-shadow:inset 0 -2px var(--primary)}
.tab-panel{border:1px solid var(--border);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md)}

.navbar,.sidebar,.menu,.card,.toast,.accordion,.editor,.command,.virtual-list,.dialog{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-low);
}
.navbar{min-height:64px}.sidebar{overflow:hidden}.menu{box-shadow:var(--shadow-overlay)}
.sidenav a{border-radius:var(--radius-sm);font-weight:var(--weight-medium)}
.sidenav a:hover{background:var(--surface-hover);color:var(--text)}
.sidenav a[aria-current]{background:var(--primary-soft);color:var(--primary-strong);box-shadow:inset 3px 0 var(--primary)}
.menu-item{border-radius:var(--radius-sm)}.menu-item:hover{background:var(--surface-hover);color:var(--text)}

.input,.textarea,.select,.tags-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--border-strong)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.switch-track{border:1px solid var(--border-strong);border-radius:var(--radius-full)}.switch-track::after{border-radius:50%}
.radio-card,.dropzone{border:1px solid var(--border);border-radius:var(--radius-md)}
.dropzone{border-style:dashed}.radio-card:has(input:checked){border-color:var(--primary);box-shadow:inset 3px 0 var(--primary)}

.card-header,.card-footer{border-color:var(--border-soft)}
.card.interactive:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-medium)}
.stat{border-left:4px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.table{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.table th,.table td{border-color:var(--border-soft)}.table th{background:var(--surface-2);color:var(--text);font-weight:var(--weight-bold)}
.table tbody tr:hover{background:var(--surface-hover)}
.action-list{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md)}
.action-list li+li{border-top:1px solid var(--border-soft)}.action-list a{font-weight:var(--weight-medium)}
.calendar{border-color:var(--border)}.calendar>*{border-color:var(--border-soft)}.calendar .head{background:var(--surface-2);color:var(--text)}

.alert{border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:inset 4px 0 var(--info)}
.alert.success{box-shadow:inset 4px 0 var(--success)}.alert.warning{box-shadow:inset 4px 0 var(--warning)}.alert.error{box-shadow:inset 4px 0 var(--error)}
.progress{height:10px;border:0;border-radius:var(--radius-full)}.progress>i{border-radius:inherit}
.empty{border:1px dashed var(--border);border-radius:var(--radius-md)}
.accordion{overflow:hidden;box-shadow:none}.accordion details+details{border-top:1px solid var(--border-soft)}
.accordion summary:hover{background:var(--surface-hover)}
.carousel-track,.sheet,.code,.kanban-col,.signature,.qr{border:1px solid var(--border);border-radius:var(--radius-md)}
.sheet{border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.toolbar,.command-search{border-color:var(--border-soft)}
.kanban-col{background:var(--surface-2)}.kanban-card{border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-low)}
.dialog{border-color:var(--border);box-shadow:var(--shadow-modal)}