/* Inazda UI, plain CSS edition.
   Tokens mirror apps/ui/scripts/theme.mjs (glass) and apps/ui/src/styles/app.css (base).
   Every colour, radius and easing below is a token; components only read tokens. */

/* ---------- tokens: light ---------- */
:root{
  --iz-bg: oklch(0.982 0.004 270);
  --iz-fg: oklch(0.19 0.012 270);
  --iz-muted: oklch(0.95 0.005 270);
  --iz-muted-fg: oklch(0.47 0.012 270);
  --iz-border: oklch(0.9 0.006 270);
  --iz-card: oklch(1 0 0);
  --iz-primary: oklch(0.2 0.012 270);
  --iz-primary-fg: oklch(0.985 0.003 270);
  --iz-destructive: oklch(0.55 0.22 27);
  --iz-destructive-strong: oklch(0.52 0.2 27);
  --iz-ring: oklch(0.52 0.09 215);
  --iz-success: oklch(0.52 0.12 160);
  --iz-warning: oklch(0.58 0.13 70);

  --iz-glass: oklch(1 0 0 / 0.62);
  --iz-glass-thin: oklch(1 0 0 / 0.36);
  --iz-glass-thick: oklch(0.995 0.002 270 / 0.82);
  --iz-glass-border: oklch(1 0 0 / 0.72);
  --iz-glass-edge: oklch(0.25 0.02 270 / 0.10);
  --iz-glass-highlight: oklch(1 0 0 / 0.9);
  --iz-glass-solid: oklch(0.978 0.003 270);
  --iz-glass-fg: oklch(0.2 0.012 270);
  --iz-glass-shadow: 0 1px 2px oklch(0.2 0.02 270 / 0.06), 0 18px 40px -18px oklch(0.2 0.03 270 / 0.35);
  --iz-glass-shadow-active: 0 2px 4px oklch(0.2 0.02 270 / 0.08), 0 36px 80px -28px oklch(0.2 0.04 270 / 0.55);
  --iz-blur: 22px;
  --iz-saturate: 170%;

  --iz-radius: 18px;          /* windows, panels */
  --iz-radius-md: 14px;       /* menus, segmented, cards inside panels */
  --iz-radius-sm: 11px;       /* buttons, inputs */
  --iz-radius-xs: 8px;        /* chips, kbd, tooltips */

  --iz-spring: cubic-bezier(.3, 1.4, .5, 1);
  --iz-ease: cubic-bezier(.22, 1, .36, 1);
  --iz-ease-in: cubic-bezier(.4, 0, 1, 1);

  --iz-font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --iz-mono: "Geist Mono", ui-monospace, monospace;

  /* accent palette (names kept for compatibility) */
  --iz-dye-kunyit: #D99A1E;
  --iz-dye-daun: #2F6B4F;
  --iz-dye-sungai: #2F6F7E;
  --iz-dye-mengkudu: #A63A2A;
  --iz-dye-tanggui: #B8955E;
  --iz-wall-dim: 1;
}

/* ---------- tokens: dark ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --iz-bg: oklch(0.155 0.008 270);
    --iz-fg: oklch(0.96 0.004 270);
    --iz-muted: oklch(0.21 0.008 270);
    --iz-muted-fg: oklch(0.72 0.01 270);
    --iz-border: oklch(0.28 0.01 270);
    --iz-card: oklch(0.19 0.009 270);
    --iz-primary: oklch(0.96 0.004 270);
    --iz-primary-fg: oklch(0.17 0.01 270);
    --iz-destructive: oklch(0.52 0.2 27);
    --iz-destructive-strong: oklch(0.56 0.2 27);
    --iz-ring: oklch(0.76 0.09 215);
    --iz-success: oklch(0.76 0.13 160);
    --iz-warning: oklch(0.8 0.13 80);
    --iz-glass: oklch(0.23 0.012 270 / 0.66);
    --iz-glass-thin: oklch(0.26 0.012 270 / 0.34);
    --iz-glass-thick: oklch(0.21 0.012 270 / 0.82);
    --iz-glass-border: oklch(1 0 0 / 0.13);
    --iz-glass-edge: oklch(0 0 0 / 0.45);
    --iz-glass-highlight: oklch(1 0 0 / 0.16);
    --iz-glass-solid: oklch(0.215 0.01 270);
    --iz-glass-fg: oklch(0.97 0.004 270);
    --iz-glass-shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 24px 48px -20px oklch(0 0 0 / 0.7);
    --iz-glass-shadow-active: 0 2px 4px oklch(0 0 0 / 0.35), 0 40px 80px -24px oklch(0 0 0 / 0.85);
    --iz-wall-dim: .78;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --iz-bg: oklch(0.155 0.008 270);
  --iz-fg: oklch(0.96 0.004 270);
  --iz-muted: oklch(0.21 0.008 270);
  --iz-muted-fg: oklch(0.72 0.01 270);
  --iz-border: oklch(0.28 0.01 270);
  --iz-card: oklch(0.19 0.009 270);
  --iz-primary: oklch(0.96 0.004 270);
  --iz-primary-fg: oklch(0.17 0.01 270);
  --iz-destructive: oklch(0.52 0.2 27);
  --iz-destructive-strong: oklch(0.56 0.2 27);
  --iz-ring: oklch(0.76 0.09 215);
  --iz-success: oklch(0.76 0.13 160);
  --iz-warning: oklch(0.8 0.13 80);
  --iz-glass: oklch(0.23 0.012 270 / 0.66);
  --iz-glass-thin: oklch(0.26 0.012 270 / 0.34);
  --iz-glass-thick: oklch(0.21 0.012 270 / 0.82);
  --iz-glass-border: oklch(1 0 0 / 0.13);
  --iz-glass-edge: oklch(0 0 0 / 0.45);
  --iz-glass-highlight: oklch(1 0 0 / 0.16);
  --iz-glass-solid: oklch(0.215 0.01 270);
  --iz-glass-fg: oklch(0.97 0.004 270);
  --iz-glass-shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 24px 48px -20px oklch(0 0 0 / 0.7);
  --iz-glass-shadow-active: 0 2px 4px oklch(0 0 0 / 0.35), 0 40px 80px -24px oklch(0 0 0 / 0.85);
  --iz-wall-dim: .78;
  color-scheme: dark;
}

/* ---------- solid mode: same layout, no transparency ---------- */
:root[data-glass="solid"]{
  --iz-glass: var(--iz-glass-solid);
  --iz-glass-thin: var(--iz-glass-solid);
  --iz-glass-thick: var(--iz-glass-solid);
  --iz-blur: 0px;
  --iz-saturate: 100%;
  --iz-glass-highlight: transparent;
}
@media (prefers-reduced-transparency: reduce){
  :root:not([data-glass="glass"]){
    --iz-glass: var(--iz-glass-solid);
    --iz-glass-thin: var(--iz-glass-solid);
    --iz-glass-thick: var(--iz-glass-solid);
    --iz-blur: 0px;
    --iz-saturate: 100%;
    --iz-glass-highlight: transparent;
  }
}

/* ---------- glass utilities ---------- */
.iz-glass,.iz-glass-thin,.iz-glass-thick{
  -webkit-backdrop-filter: blur(var(--iz-blur)) saturate(var(--iz-saturate));
  backdrop-filter: blur(var(--iz-blur)) saturate(var(--iz-saturate));
  color: var(--iz-glass-fg);
  box-shadow: inset 0 1px 0 0 var(--iz-glass-highlight), inset 0 0 0 1px var(--iz-glass-border), 0 0 0 1px var(--iz-glass-edge), var(--iz-glass-shadow);
}
.iz-glass{background-color: var(--iz-glass)}
.iz-glass-thin{background-color: var(--iz-glass-thin)}
.iz-glass-thick{background-color: var(--iz-glass-thick)}

/* ---------- icons ---------- */
.iz-i{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}

/* ---------- wallpaper (a calm code-drawn stand-in; set --iz-wall-image to a wallpaper from assets/wallpapers) ---------- */
.iz-wall{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    var(--iz-wall-image, none) center/cover no-repeat,
    linear-gradient(100deg, rgb(0 0 0 / .1), transparent 30% 70%, rgb(0 0 0 / .12)),
    linear-gradient(165deg, #ece3d4 0%, #dccdb6 34%, #b9c4bd 68%, #8fa6a6 100%);
}
:where(:root[data-theme="dark"]) .iz-wall{background:var(--iz-wall-image, none) center/cover no-repeat,linear-gradient(100deg, rgb(0 0 0 / .2), transparent 30% 70%, rgb(0 0 0 / .24)),linear-gradient(165deg, #1a1d22 0%, #1e2b30 40%, #1c3a40 72%, #3a2a20 100%)}
@media (prefers-color-scheme: dark){:where(:root:not([data-theme="light"])) .iz-wall{background:var(--iz-wall-image, none) center/cover no-repeat,linear-gradient(100deg, rgb(0 0 0 / .2), transparent 30% 70%, rgb(0 0 0 / .24)),linear-gradient(165deg, #1a1d22 0%, #1e2b30 40%, #1c3a40 72%, #3a2a20 100%)}}
.iz-wall::before,.iz-wall::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.iz-wall::before{
  /* soft raking light so the stand-in is not flat */
  background:linear-gradient(118deg, rgb(255 255 255 / .16), transparent 42%);
}
.iz-wall::after{background:none}
.iz-wall > .iz-wall-dim{position:absolute;inset:0;z-index:-1;background:#000;opacity:calc(1 - var(--iz-wall-dim));pointer-events:none}

/* ---------- button ---------- */
.iz-btn{
  --h:40px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;
  height:var(--h);padding:0 16px;border-radius:var(--iz-radius-sm);border:0;
  font:600 14.5px/1 var(--iz-font);white-space:nowrap;user-select:none;cursor:pointer;text-decoration:none;
  background:var(--iz-primary);color:var(--iz-primary-fg);
  box-shadow:0 1px 2px oklch(0 0 0 / .12), inset 0 1px 0 oklch(1 0 0 / .12);
  transition:transform .2s var(--iz-spring), background-color .2s var(--iz-ease), box-shadow .2s var(--iz-ease), color .2s, opacity .2s;
}
.iz-btn:hover{background:color-mix(in oklch, var(--iz-primary) 88%, var(--iz-bg))}
.iz-btn:active{transform:scale(.97)}
.iz-btn:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.iz-btn[disabled],.iz-btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.iz-btn .iz-i{font-size:16px}
.iz-btn[data-variant="glass"]{background:var(--iz-glass);color:var(--iz-glass-fg);
  -webkit-backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));
  box-shadow:inset 0 1px 0 0 var(--iz-glass-highlight), inset 0 0 0 1px var(--iz-glass-border), 0 0 0 1px var(--iz-glass-edge), var(--iz-glass-shadow)}
.iz-btn[data-variant="glass"]:hover{background:var(--iz-glass-thick)}
.iz-btn[data-variant="outline"]{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in oklch, currentColor 22%, transparent)}
.iz-btn[data-variant="outline"]:hover{background:color-mix(in oklch, currentColor 6%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch, currentColor 32%, transparent)}
.iz-btn[data-variant="ghost"]{background:transparent;color:inherit;box-shadow:none}
.iz-btn[data-variant="ghost"]:hover{background:color-mix(in oklch, currentColor 8%, transparent)}
.iz-btn[data-variant="destructive"]{background:var(--iz-destructive);color:#fff}
.iz-btn[data-variant="destructive"]:hover{background:var(--iz-destructive-strong)}
.iz-btn[data-variant="link"]{background:none;box-shadow:none;color:inherit;padding:0;height:auto;text-decoration:underline;text-decoration-color:color-mix(in oklch,currentColor 35%,transparent);text-underline-offset:4px}
.iz-btn[data-variant="link"]:hover{text-decoration-color:currentColor}
.iz-btn[data-variant="link"]:active{transform:none}
.iz-btn[data-size="sm"]{--h:32px;padding:0 12px;border-radius:9px;font-size:13.5px;gap:6px}
.iz-btn[data-size="sm"] .iz-i{font-size:14px}
.iz-btn[data-size="lg"]{--h:48px;padding:0 24px;border-radius:13px;font-size:16px}
.iz-btn[data-size="icon"]{width:40px;padding:0}
.iz-btn[data-size="icon-sm"]{--h:32px;width:32px;padding:0;border-radius:9px}
.iz-btn[data-pill]{border-radius:999px}
.iz-btn[aria-busy="true"]{color:transparent;pointer-events:none}
.iz-btn[aria-busy="true"]::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--iz-primary-fg);border-right-color:transparent;animation:iz-spin .7s linear infinite}
.iz-btn[data-variant="outline"][aria-busy="true"]::after,.iz-btn[data-variant="ghost"][aria-busy="true"]::after,.iz-btn[data-variant="glass"][aria-busy="true"]::after{border-color:var(--iz-fg);border-right-color:transparent}
@keyframes iz-spin{to{transform:rotate(360deg)}}

/* ---------- kbd, badge ---------- */
.iz-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;
  font:500 12px/1 var(--iz-mono);color:inherit;background:color-mix(in oklch,currentColor 8%,transparent);
  box-shadow:inset 0 -1px 0 color-mix(in oklch,currentColor 18%,transparent), inset 0 0 0 1px color-mix(in oklch,currentColor 12%,transparent)}
.iz-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:600 12.5px/1 var(--iz-font);
  background:var(--iz-primary);color:var(--iz-primary-fg)}
.iz-badge[data-variant="secondary"]{background:var(--iz-muted);color:var(--iz-fg)}
.iz-badge[data-variant="outline"]{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in oklch,currentColor 22%,transparent)}
.iz-badge[data-variant="glass"]{background:var(--iz-glass);color:var(--iz-glass-fg);-webkit-backdrop-filter:blur(var(--iz-blur));backdrop-filter:blur(var(--iz-blur));box-shadow:inset 0 0 0 1px var(--iz-glass-border),0 0 0 1px var(--iz-glass-edge)}
.iz-badge[data-variant="success"]{background:color-mix(in oklch,var(--iz-success) 16%,transparent);color:var(--iz-fg)}
.iz-badge[data-variant="warning"]{background:color-mix(in oklch,var(--iz-warning) 20%,transparent);color:var(--iz-fg)}
.iz-badge[data-variant="destructive"]{background:color-mix(in oklch,var(--iz-destructive) 16%,transparent);color:var(--iz-fg)}
.iz-badge > .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.iz-badge[data-variant="success"] > .dot{background:var(--iz-success)}
.iz-badge[data-variant="warning"] > .dot{background:var(--iz-warning)}
.iz-badge[data-variant="destructive"] > .dot{background:var(--iz-destructive)}

/* ---------- window ---------- */
.iz-window-area{position:relative;overflow:hidden;contain:layout}
.iz-window{
  position:absolute;left:0;top:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:calc(var(--iz-radius) + 2px);transform-origin:50% 100%;will-change:transform;
  background-color:var(--iz-glass-thick);color:var(--iz-glass-fg);
  -webkit-backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));
  box-shadow:inset 0 1px 0 0 var(--iz-glass-highlight), inset 0 0 0 1px var(--iz-glass-border), 0 0 0 1px var(--iz-glass-edge), var(--iz-glass-shadow);
  transition:opacity .2s var(--iz-ease), box-shadow .3s var(--iz-ease);
}
.iz-window[data-active="true"]{box-shadow:inset 0 1px 0 0 var(--iz-glass-highlight), inset 0 0 0 1px var(--iz-glass-border), 0 0 0 1px var(--iz-glass-edge), var(--iz-glass-shadow-active)}
.iz-window[hidden]{display:none}
.iz-window-bar{display:flex;align-items:center;gap:8px;height:44px;flex:none;padding:0 6px 0 14px;
  border-bottom:1px solid var(--iz-glass-edge);cursor:grab;touch-action:none;user-select:none;outline:none}
.iz-window-bar:active{cursor:grabbing}
.iz-window-bar:focus-visible{box-shadow:inset 0 0 0 2px var(--iz-ring);border-radius:calc(var(--iz-radius) + 2px) calc(var(--iz-radius) + 2px) 0 0}
.iz-window-bar > .iz-i{font-size:16px;opacity:.7}
.iz-window-title{margin:0;font:600 14px/1.2 var(--iz-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.iz-window:not([data-active="true"]) .iz-window-title{opacity:.6}
.iz-window-controls{margin-left:auto;display:flex;gap:2px}
.iz-window-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:inherit;opacity:.68;cursor:pointer;
  transition:background-color .15s, opacity .15s, color .15s}
.iz-window-btn .iz-i{font-size:14px}
.iz-window-btn:hover{opacity:1;background:color-mix(in oklch,currentColor 9%,transparent)}
.iz-window-btn:focus-visible{opacity:1;outline:2px solid var(--iz-ring);outline-offset:-2px}
.iz-window-btn[data-danger]:hover{background:var(--iz-destructive);color:#fff}
.iz-window-body{flex:1;min-height:0;overflow:auto;padding:16px 18px;font:400 14.5px/1.55 var(--iz-font)}
.iz-window-body p{margin:0 0 10px}
.iz-window-body p:last-child{margin-bottom:0}
.iz-rz{position:absolute;touch-action:none;z-index:2}
.iz-rz[data-dir="e"]{right:0;top:44px;bottom:12px;width:8px;cursor:ew-resize}
.iz-rz[data-dir="s"]{bottom:0;left:12px;right:12px;height:8px;cursor:ns-resize}
.iz-rz[data-dir="se"]{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.iz-window[data-max="true"] .iz-rz{display:none}
.iz-snap{position:absolute;border-radius:calc(var(--iz-radius) + 2px);pointer-events:none;z-index:0;
  background:var(--iz-glass-thin);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1.5px var(--iz-glass-border), 0 0 0 1px var(--iz-glass-edge);
  opacity:0;transform:scale(.96);transition:opacity .18s var(--iz-ease), transform .3s var(--iz-spring), left .3s var(--iz-spring), top .3s var(--iz-spring), width .3s var(--iz-spring), height .3s var(--iz-spring)}
.iz-snap[data-on="true"]{opacity:1;transform:none}
.iz-tray{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:1}

/* ---------- dock ---------- */
.iz-dock{--base:48px;display:flex;align-items:flex-end;gap:8px;height:calc(var(--base) + 26px);padding:10px 10px 6px;
  border-radius:calc(var(--iz-radius) + 8px)}
.iz-dock-item{position:relative;display:flex;flex-direction:column;align-items:center}
.iz-dock-btn{display:grid;place-items:center;width:var(--base);height:var(--base);flex:none;border:0;cursor:pointer;
  border-radius:28%;color:var(--iz-fg);background:color-mix(in oklch,var(--iz-bg) 72%,transparent);
  box-shadow:0 1px 2px oklch(0 0 0 / .12), inset 0 1px 0 oklch(1 0 0 / .5), 0 0 0 1px color-mix(in oklch,var(--iz-fg) 7%,transparent);
  transition:transform .15s var(--iz-spring);outline:none}
.iz-dock-btn .iz-i{width:46%;height:46%}
.iz-dock-btn:active{transform:scale(.92)}
.iz-dock-btn:focus-visible{box-shadow:0 0 0 2px var(--iz-ring), 0 1px 2px oklch(0 0 0 / .12)}
.iz-dock-btn[data-tint]{color:#fff}
.iz-dock-dot{width:4px;height:4px;margin-top:4px;border-radius:50%;background:var(--iz-glass-fg);opacity:0;transition:opacity .3s}
.iz-dock-item[data-active="true"] .iz-dock-dot{opacity:.7}
.iz-dock-sep{width:1px;height:60%;align-self:flex-end;margin:0 4px 10px;background:var(--iz-glass-fg);opacity:.15}
.iz-tip{position:absolute;bottom:100%;left:50%;margin-bottom:12px;padding:5px 10px;border-radius:var(--iz-radius-xs);white-space:nowrap;
  font:500 12.5px/1.2 var(--iz-font);pointer-events:none;opacity:0;transform:translate(-50%,6px) scale(.94);
  transition:opacity .16s var(--iz-ease), transform .16s var(--iz-ease);z-index:5}
.iz-tip[data-on="true"]{opacity:1;transform:translate(-50%,0) scale(1)}
@keyframes iz-bounce{0%{translate:0 0}35%{translate:0 -16px}70%{translate:0 0}85%{translate:0 -4px}100%{translate:0 0}}
.iz-dock-btn[data-bounce]{animation:iz-bounce .6s cubic-bezier(.3,0,.3,1)}

/* ---------- segmented ---------- */
.iz-seg{position:relative;display:inline-flex;align-items:center;padding:4px;border-radius:var(--iz-radius-md);isolation:isolate;
  background:color-mix(in oklch,var(--iz-glass-fg) 7%,transparent);color:var(--iz-glass-fg)}
.iz-seg.on-page{background:color-mix(in oklch,var(--iz-fg) 7%,transparent);color:var(--iz-fg)}
.iz-seg-thumb{position:absolute;top:4px;bottom:4px;left:0;width:0;z-index:-1;border-radius:10px;
  background:var(--iz-glass-thick);-webkit-backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));backdrop-filter:blur(var(--iz-blur)) saturate(var(--iz-saturate));
  box-shadow:inset 0 1px 0 0 var(--iz-glass-highlight), inset 0 0 0 1px var(--iz-glass-border), 0 0 0 1px var(--iz-glass-edge), 0 1px 3px oklch(0.2 0.02 270 / .18);
  transition:transform .42s var(--iz-spring), width .42s var(--iz-spring)}
.iz-seg.on-page .iz-seg-thumb{background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-border), 0 1px 3px oklch(0.2 0.02 270 / .14)}
.iz-seg-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:10px;
  background:transparent;color:inherit;opacity:.78;font:600 14px/1 var(--iz-font);white-space:nowrap;cursor:pointer;transition:opacity .2s}
.iz-seg-opt[aria-checked="true"]{opacity:1}
.iz-seg-opt:hover{opacity:1}
.iz-seg-opt:focus-visible{outline:2px solid var(--iz-ring);outline-offset:0}
.iz-seg[data-size="sm"] .iz-seg-opt{height:28px;padding:0 10px;font-size:12.5px}
.iz-seg[data-size="sm"] .iz-seg-thumb{border-radius:8px}
.iz-seg .iz-i{font-size:15px}

/* ---------- tabs (same thumb idea) ---------- */
.iz-tabs-list{position:relative;display:inline-flex;padding:4px;border-radius:var(--iz-radius-md);isolation:isolate;
  background:color-mix(in oklch,currentColor 7%,transparent)}
.iz-tab{position:relative;height:32px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:inherit;opacity:.75;
  font:600 14px/1 var(--iz-font);cursor:pointer;transition:opacity .2s}
.iz-tab[aria-selected="true"],.iz-tab:hover{opacity:1}
.iz-tab:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.iz-tabs-list .iz-seg-thumb{background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-border), 0 1px 3px oklch(0.2 0.02 270 / .14)}
.iz-tab-panel{padding-top:14px;outline:none}
.iz-tab-panel:focus-visible{outline:2px solid var(--iz-ring);outline-offset:4px;border-radius:6px}
.iz-tab-panel[hidden]{display:none}

/* ---------- command palette ---------- */
.iz-cmdk-backdrop{position:fixed;inset:0;z-index:1000;background:oklch(0.15 0.01 270 / .28);display:flex;justify-content:center;
  padding:max(12vh, 24px) max(16px, env(safe-area-inset-right,0px)) 24px max(16px, env(safe-area-inset-left,0px));
  opacity:0;transition:opacity .18s var(--iz-ease)}
.iz-cmdk-backdrop[data-on="true"]{opacity:1}
.iz-cmdk-backdrop[hidden]{display:none}
.iz-cmdk{width:min(640px,100%);align-self:flex-start;border-radius:calc(var(--iz-radius) + 2px);overflow:hidden;
  transform:translateY(-8px) scale(.97);transition:transform .34s var(--iz-spring)}
.iz-cmdk-backdrop[data-on="true"] .iz-cmdk{transform:none}
.iz-cmdk-head{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border-bottom:1px solid var(--iz-glass-edge)}
.iz-cmdk-head .iz-i{font-size:18px;opacity:.55}
.iz-cmdk-input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:inherit;font:400 16px/1 var(--iz-font)}
.iz-cmdk-input:focus-visible{outline:none}
.iz-cmdk-input::placeholder{color:currentColor;opacity:.55}
.iz-cmdk-list{max-height:min(420px,52vh);overflow:auto;overscroll-behavior:contain;padding:8px}
.iz-cmdk-group{margin-bottom:4px}
.iz-cmdk-group-label{padding:8px 10px 4px;font:600 12px/1 var(--iz-font);opacity:.68}
.iz-cmdk-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:11px;cursor:pointer;font:500 14.5px/1.25 var(--iz-font)}
.iz-cmdk-opt[aria-selected="true"]{background:color-mix(in oklch,var(--iz-glass-fg) 9%,transparent)}
.iz-cmdk-ico{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;
  background:color-mix(in oklch,var(--iz-bg) 60%,transparent);box-shadow:0 0 0 1px color-mix(in oklch,var(--iz-glass-fg) 9%,transparent)}
.iz-cmdk-ico .iz-i{font-size:15px}
.iz-cmdk-txt{flex:1;min-width:0}
.iz-cmdk-txt small{display:block;font-size:12.5px;font-weight:400;opacity:.7;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iz-cmdk-opt mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 45%,transparent)}
.iz-cmdk-keys{display:flex;gap:4px}
.iz-cmdk-enter{font-size:15px;opacity:0}
.iz-cmdk-opt[aria-selected="true"] .iz-cmdk-enter{opacity:.55}
.iz-cmdk-empty{padding:28px 12px;text-align:center;opacity:.75;font-size:14.5px}
.iz-cmdk-foot{display:flex;gap:14px;align-items:center;padding:10px 16px;border-top:1px solid var(--iz-glass-edge);font:500 12.5px/1 var(--iz-font);opacity:.8;flex-wrap:wrap}
.iz-cmdk-foot span{display:inline-flex;align-items:center;gap:6px}

/* ---------- notification stack ---------- */
.iz-notes{position:absolute;right:16px;bottom:16px;width:min(360px,calc(100% - 32px));z-index:20;transition:height .35s var(--iz-ease)}
.iz-note{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-start;gap:12px;padding:14px 40px 14px 14px;
  border-radius:calc(var(--iz-radius) + 2px);cursor:grab;touch-action:pan-y;transform-origin:50% 100%;
  transition:transform .45s var(--iz-spring), opacity .3s var(--iz-ease)}
.iz-note[data-dragging]{transition:none;cursor:grabbing}
.iz-note > .iz-i{font-size:18px;margin-top:1px;opacity:.75}
.iz-note[data-tone="success"] > .iz-i{color:var(--iz-success);opacity:1}
.iz-note[data-tone="warning"] > .iz-i{color:var(--iz-warning);opacity:1}
.iz-note-body{min-width:0;flex:1;transition:opacity .2s}
.iz-note-title{margin:0;font:600 14.5px/1.3 var(--iz-font)}
.iz-note-desc{margin:2px 0 0;font:400 13.5px/1.35 var(--iz-font);opacity:.78}
.iz-note-action{margin-top:8px;height:28px;padding:0 10px;border:0;border-radius:8px;cursor:pointer;font:600 13px/1 var(--iz-font);
  background:color-mix(in oklch,var(--iz-glass-fg) 10%,transparent);color:inherit}
.iz-note-action:focus-visible,.iz-note-x:focus-visible{outline:2px solid var(--iz-ring);outline-offset:1px}
.iz-note-x{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:inherit;opacity:.6;cursor:pointer}
.iz-note-x:hover{opacity:1;background:color-mix(in oklch,currentColor 9%,transparent)}
.iz-note-x .iz-i{font-size:13px}

/* ---------- menus (context menu + menu bar share the list) ---------- */
.iz-menu{min-width:224px;padding:6px;border-radius:var(--iz-radius-md);font:400 14px/1.2 var(--iz-font);outline:none;z-index:60}
.iz-menu[hidden]{display:none}
.iz-menu-item{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer;outline:none}
.iz-menu-item .iz-i{font-size:15px;opacity:.75}
.iz-menu-item:focus,.iz-menu-item:hover{background:color-mix(in oklch,var(--iz-glass-fg) 9%,transparent)}
.iz-menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--iz-ring)}
.iz-menu-item[data-danger]{color:var(--iz-destructive)}
:root[data-theme="dark"] .iz-menu-item[data-danger]{color:oklch(0.75 0.15 27)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .iz-menu-item[data-danger]{color:oklch(0.75 0.15 27)}}
.iz-menu-item[data-danger]:focus,.iz-menu-item[data-danger]:hover{background:var(--iz-destructive);color:#fff}
.iz-menu-item[aria-disabled="true"]{opacity:.45;pointer-events:none}
.iz-menu-item > span{flex:1;white-space:nowrap}
.iz-menu-item kbd{font:400 12.5px/1 var(--iz-mono);opacity:.65}
.iz-menu-sep{height:1px;margin:6px 8px;background:color-mix(in oklch,var(--iz-glass-fg) 11%,transparent)}
.iz-menu-label{padding:8px 10px 4px;font:600 12px/1 var(--iz-font);opacity:.7}
.iz-menu-pop{position:absolute;transform-origin:top left;animation:iz-pop .18s var(--iz-spring)}
@keyframes iz-pop{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.iz-menubar{position:relative;z-index:30;display:flex;align-items:center;gap:2px;height:40px;padding:0 8px;font:500 13.5px/1 var(--iz-font)}
.iz-menubar-trigger{height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;cursor:pointer;outline:none}
.iz-menubar-trigger[data-brand]{font-weight:700}
.iz-menubar-trigger:hover,.iz-menubar-trigger[aria-expanded="true"]{background:color-mix(in oklch,var(--iz-glass-fg) 10%,transparent)}
.iz-menubar-trigger:focus-visible{box-shadow:inset 0 0 0 2px var(--iz-ring)}
.iz-menubar-end{margin-left:auto;display:flex;gap:12px;align-items:center;padding-right:4px;font-variant-numeric:tabular-nums}
.iz-menubar-slot{position:relative}
.iz-menubar-slot > .iz-menu{position:absolute;left:0;top:calc(100% + 6px)}

/* ---------- quick settings ---------- */
.iz-qs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;border-radius:calc(var(--iz-radius) + 8px);width:min(100%,360px)}
.iz-qs-tile{position:relative;display:flex;align-items:center;gap:10px;overflow:hidden;border:0;cursor:pointer;color:inherit;text-align:left;
  background:color-mix(in oklch,var(--iz-glass-fg) 7%,transparent);transition:background-color .3s var(--iz-ease), color .3s, transform .2s var(--iz-spring)}
.iz-qs-tile:hover{background:color-mix(in oklch,var(--iz-glass-fg) 11%,transparent)}
.iz-qs-tile:active{transform:scale(.95)}
.iz-qs-tile:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.iz-qs-tile[aria-pressed="true"]{background:var(--iz-glass-fg);color:var(--iz-glass-solid)}
.iz-qs-tile[data-shape="wide"]{grid-column:span 2;height:64px;padding:0 10px;border-radius:calc(var(--iz-radius) - 2px)}
.iz-qs-tile[data-shape="round"]{aspect-ratio:1;justify-content:center;border-radius:50%}
.iz-qs-ico{display:grid;place-items:center;flex:none;border-radius:50%;width:36px;height:36px;background:color-mix(in oklch,currentColor 9%,transparent)}
.iz-qs-tile[aria-pressed="true"] .iz-qs-ico{background:color-mix(in oklch,var(--iz-glass-solid) 16%,transparent)}
.iz-qs-tile[data-shape="round"] .iz-qs-ico{background:none}
.iz-qs-ico .iz-i{font-size:18px}
.iz-qs-txt{min-width:0}
.iz-qs-txt b{display:block;font:600 13.5px/1.2 var(--iz-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iz-qs-txt small{display:block;font:400 12px/1.2 var(--iz-font);opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iz-qs-slider{grid-column:span 4}
.iz-qs-slider p{margin:0 0 6px;padding:0 4px;font:600 12.5px/1 var(--iz-font);opacity:.75}
.iz-qs-track{position:relative;height:36px;border-radius:999px;overflow:hidden;cursor:pointer;touch-action:none;outline:none;
  background:color-mix(in oklch,var(--iz-glass-fg) 8%,transparent);transition:transform .2s var(--iz-ease)}
.iz-qs-track[data-drag]{transform:scaleY(1.08)}
.iz-qs-track:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.iz-qs-fill{position:absolute;inset:0 auto 0 0;min-width:36px;border-radius:999px;background:var(--iz-glass-fg)}
.iz-qs-track .iz-i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--iz-glass-solid)}

/* ---------- switch ---------- */
.iz-switch{position:relative;display:inline-flex;align-items:center;flex:none;width:42px;height:24px;padding:2px;border:0;border-radius:999px;cursor:pointer;
  background:color-mix(in oklch,currentColor 20%,transparent);transition:background-color .2s var(--iz-ease)}
.iz-switch::after{content:"";width:20px;height:20px;border-radius:999px;background:#fff;box-shadow:0 1px 3px oklch(0 0 0 / .28);
  transition:translate .3s var(--iz-spring), width .3s var(--iz-spring), background-color .2s}
.iz-switch:active::after{width:24px}
.iz-switch[aria-checked="true"]{background:var(--iz-primary)}
.iz-switch[aria-checked="true"]::after{translate:18px 0;background:var(--iz-primary-fg)}
.iz-switch[aria-checked="true"]:active::after{translate:14px 0}
.iz-switch:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}
.iz-switch[data-size="sm"]{width:34px;height:20px}
.iz-switch[data-size="sm"]::after{width:16px;height:16px}
.iz-switch[data-size="sm"][aria-checked="true"]::after{translate:14px 0}
.iz-switch[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- checkbox ---------- */
.iz-check{position:relative;display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border:0;border-radius:6px;cursor:pointer;color:var(--iz-primary-fg);
  background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in oklch,var(--iz-fg) 42%,transparent);transition:background-color .2s var(--iz-ease), box-shadow .2s}
.iz-check svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.iz-check .tick{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .28s var(--iz-ease) .04s}
.iz-check .dash{opacity:0}
.iz-check[aria-checked="true"],.iz-check[aria-checked="mixed"]{background:var(--iz-primary);box-shadow:none}
.iz-check[aria-checked="true"] .tick{stroke-dashoffset:0}
.iz-check[aria-checked="mixed"] .tick{opacity:0}
.iz-check[aria-checked="mixed"] .dash{opacity:1}
.iz-check:focus-visible{outline:2px solid var(--iz-ring);outline-offset:2px}

/* ---------- field / input ---------- */
.iz-field{display:grid;gap:6px;max-width:360px}
.iz-label{font:600 14px/1.2 var(--iz-font)}
.iz-desc{font:400 13px/1.4 var(--iz-font);color:var(--iz-muted-fg);margin:0}
.iz-error{font:500 13px/1.4 var(--iz-font);color:var(--iz-destructive);margin:0;display:flex;gap:6px;align-items:center}
.iz-error[hidden]{display:none}
:root[data-theme="dark"] .iz-error{color:oklch(0.75 0.15 27)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .iz-error{color:oklch(0.75 0.15 27)}}
.iz-input-wrap{position:relative;display:flex;align-items:center}
.iz-input-wrap > .iz-i{position:absolute;left:12px;font-size:16px;opacity:.55;pointer-events:none}
.iz-input{width:100%;height:40px;padding:0 12px;border:0;border-radius:var(--iz-radius-sm);background:var(--iz-card);color:var(--iz-fg);
  font:400 14.5px/1 var(--iz-font);box-shadow:inset 0 0 0 1px var(--iz-border), 0 1px 2px oklch(0 0 0 / .04);outline:none;transition:box-shadow .15s}
.iz-input-wrap > .iz-i + .iz-input{padding-left:36px}
.iz-input::placeholder{color:var(--iz-muted-fg)}
.iz-input:hover{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--iz-fg) 28%,transparent)}
.iz-input:focus-visible{box-shadow:inset 0 0 0 1px var(--iz-ring), 0 0 0 3px color-mix(in oklch,var(--iz-ring) 28%,transparent)}
.iz-input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--iz-destructive)}
.iz-input[aria-invalid="true"]:focus-visible{box-shadow:inset 0 0 0 1px var(--iz-destructive), 0 0 0 3px color-mix(in oklch,var(--iz-destructive) 24%,transparent)}

/* ---------- slider ---------- */
.iz-slider{display:grid;gap:10px;max-width:360px}
.iz-slider-head{display:flex;justify-content:space-between;font:600 14px/1 var(--iz-font)}
.iz-slider-head output{font:500 13.5px/1 var(--iz-mono);color:var(--iz-muted-fg);font-variant-numeric:tabular-nums}
.iz-slider-track{position:relative;height:20px;touch-action:none;cursor:pointer}
.iz-slider-track::before{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-radius:4px;background:color-mix(in oklch,var(--iz-fg) 14%,transparent)}
.iz-slider-range{position:absolute;top:8px;height:4px;border-radius:4px;background:var(--iz-primary)}
.iz-slider-thumb{position:absolute;top:0;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff;outline:none;
  box-shadow:0 1px 3px oklch(0 0 0 / .3), 0 0 0 1px oklch(0 0 0 / .08);transition:transform .2s var(--iz-spring)}
.iz-slider-thumb:hover,.iz-slider-thumb[data-drag]{transform:scale(1.12)}
.iz-slider-thumb:focus-visible{box-shadow:0 0 0 2px var(--iz-bg), 0 0 0 4px var(--iz-ring)}

/* ---------- tooltip ---------- */
.iz-tooltip-wrap{position:relative;display:inline-flex}
.iz-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);padding:6px 10px;border-radius:var(--iz-radius-xs);white-space:nowrap;
  font:500 13px/1.2 var(--iz-font);pointer-events:none;opacity:0;transform:translate(-50%,4px) scale(.96);transition:opacity .15s var(--iz-ease), transform .15s var(--iz-ease);z-index:20}
.iz-tooltip[data-on="true"]{opacity:1;transform:translate(-50%,0)}

/* ---------- progress, skeleton ---------- */
.iz-progress{position:relative;height:8px;border-radius:99px;overflow:hidden;background:color-mix(in oklch,var(--iz-fg) 12%,transparent)}
.iz-progress > span{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--iz-primary);transition:width .5s var(--iz-ease)}
.iz-progress[data-indeterminate] > span{width:40%;animation:iz-indet 1.3s var(--iz-ease) infinite}
@keyframes iz-indet{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.iz-skel{border-radius:8px;background:linear-gradient(90deg,color-mix(in oklch,var(--iz-fg) 8%,transparent) 25%,color-mix(in oklch,var(--iz-fg) 15%,transparent) 37%,color-mix(in oklch,var(--iz-fg) 8%,transparent) 63%) 0 0/400% 100%;
  animation:iz-shimmer 1.5s ease infinite}
@keyframes iz-shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- avatar ---------- */
.iz-avatars{display:flex}
.iz-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:600 13px/1 var(--iz-font);color:#fff;
  box-shadow:0 0 0 2px var(--iz-bg)}
.iz-avatars .iz-avatar + .iz-avatar{margin-left:-8px}
.iz-avatar[data-more]{background:var(--iz-muted);color:var(--iz-fg)}

/* ---------- glass card (tilt + glare) ---------- */
.iz-gcard{position:relative;isolation:isolate;overflow:hidden;border-radius:calc(var(--iz-radius) + 4px);transform-style:preserve-3d;will-change:transform}
.iz-gcard-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:soft-light;opacity:0;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%), oklch(1 0 0 / .38), transparent 42%);transition:opacity .4s var(--iz-ease)}
.iz-gcard[data-lit] .iz-gcard-glare{opacity:1}

/* ---------- presence cursors ---------- */
.iz-cursor{position:absolute;left:0;top:0;pointer-events:none;z-index:15;will-change:transform}
.iz-cursor svg{width:20px;height:20px;display:block;filter:drop-shadow(0 1px 1.5px oklch(0 0 0 / .35))}
.iz-cursor span{position:absolute;left:14px;top:16px;padding:3px 8px;border-radius:999px 999px 999px 4px;font:600 12px/1.2 var(--iz-font);white-space:nowrap;
  box-shadow:0 2px 6px oklch(0 0 0 / .2)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .iz-btn,.iz-switch::after,.iz-seg-thumb,.iz-note,.iz-snap,.iz-cmdk,.iz-dock-btn,.iz-slider-thumb,.iz-qs-tile,.iz-tip,.iz-tooltip{transition:none!important}
  .iz-btn:active,.iz-dock-btn:active,.iz-qs-tile:active{transform:none}
  .iz-dock-btn[data-bounce]{animation:none}
  .iz-menu-pop{animation:none}
  .iz-skel{animation:none}
  .iz-progress[data-indeterminate] > span{animation-duration:3s}
}
:root[data-motion="reduce"] .iz-btn,:root[data-motion="reduce"] .iz-switch::after,:root[data-motion="reduce"] .iz-seg-thumb,:root[data-motion="reduce"] .iz-note,
:root[data-motion="reduce"] .iz-snap,:root[data-motion="reduce"] .iz-cmdk,:root[data-motion="reduce"] .iz-dock-btn,:root[data-motion="reduce"] .iz-qs-tile{transition:none!important}
:root[data-motion="reduce"] .iz-dock-btn[data-bounce],:root[data-motion="reduce"] .iz-menu-pop,:root[data-motion="reduce"] .iz-skel{animation:none}

/* ---------- v2: sizes, states and helpers (additive; nothing above changes) ---------- */
/* forced states, for documentation pages that show every state side by side */
.iz-btn[data-force="hover"]{background:color-mix(in oklch, var(--iz-primary) 88%, var(--iz-bg))}
.iz-btn[data-variant="outline"][data-force="hover"]{background:color-mix(in oklch, currentColor 6%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch, currentColor 32%, transparent)}
.iz-btn[data-variant="ghost"][data-force="hover"]{background:color-mix(in oklch, currentColor 8%, transparent)}
.iz-btn[data-variant="destructive"][data-force="hover"]{background:var(--iz-destructive-strong)}
.iz-btn[data-force="active"]{transform:scale(.97)}
.iz-btn[data-force="focus"],.iz-switch[data-force="focus"],.iz-check[data-force="focus"],.iz-tab[data-force="focus"]{outline:2px solid var(--iz-ring);outline-offset:2px}
.iz-input[data-force="hover"]{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--iz-fg) 28%,transparent)}
.iz-input[data-force="focus"]{box-shadow:inset 0 0 0 1px var(--iz-ring), 0 0 0 3px color-mix(in oklch,var(--iz-ring) 28%,transparent)}
.iz-btn[data-variant="accent"]{background:var(--iz-accent, var(--iz-ring));color:var(--iz-accent-fg, var(--iz-primary-fg))}
.iz-btn[data-size="xs"]{--h:26px;padding:0 9px;border-radius:7px;font-size:12.5px;gap:5px}
.iz-btn[data-size="xs"] .iz-i{font-size:13px}
.iz-btn[data-block]{width:100%}
.iz-btn-group{display:inline-flex}
.iz-btn-group > .iz-btn{border-radius:0}
.iz-btn-group > .iz-btn:first-child{border-radius:var(--iz-radius-sm) 0 0 var(--iz-radius-sm)}
.iz-btn-group > .iz-btn:last-child{border-radius:0 var(--iz-radius-sm) var(--iz-radius-sm) 0}
.iz-btn-group > .iz-btn + .iz-btn{margin-left:-1px}

/* inputs */
.iz-input[data-size="sm"]{height:32px;font-size:13.5px;border-radius:9px}
.iz-input[data-size="lg"]{height:48px;font-size:16px}
.iz-input[disabled],.iz-input[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.iz-input[readonly]{background:color-mix(in oklch,var(--iz-fg) 4%,var(--iz-card))}
textarea.iz-input{height:auto;min-height:104px;padding:10px 12px;line-height:1.5;resize:vertical}
.iz-input-addon{display:flex;align-items:stretch;border-radius:var(--iz-radius-sm);box-shadow:inset 0 0 0 1px var(--iz-border);background:var(--iz-card)}
.iz-input-addon > span{display:flex;align-items:center;padding:0 10px;font:400 13.5px/1 var(--iz-mono);color:var(--iz-muted-fg);border-right:1px solid var(--iz-border)}
.iz-input-addon > .iz-input{box-shadow:none;background:transparent}
.iz-input-addon:focus-within{box-shadow:inset 0 0 0 1px var(--iz-ring), 0 0 0 3px color-mix(in oklch,var(--iz-ring) 28%,transparent)}
.iz-input-wrap > .iz-kbd{position:absolute;right:8px}
.iz-input-wrap > .iz-input:has(+ .iz-kbd){padding-right:64px}
.iz-field-count{font:400 12.5px/1 var(--iz-mono);color:var(--iz-muted-fg);justify-self:end}

/* switch and checkbox */
.iz-switch[data-size="lg"]{width:52px;height:30px}
.iz-switch[data-size="lg"]::after{width:26px;height:26px}
.iz-switch[data-size="lg"][aria-checked="true"]::after{translate:22px 0}
.iz-check[disabled]{opacity:.5;cursor:not-allowed}
.iz-check[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--iz-destructive)}
.iz-check[data-size="sm"]{width:16px;height:16px;border-radius:5px}
.iz-check[data-size="sm"] svg{width:11px;height:11px}

/* badge, kbd */
.iz-badge[data-size="sm"]{height:20px;padding:0 7px;font-size:11.5px;gap:5px}
.iz-badge[data-size="lg"]{height:28px;padding:0 12px;font-size:13.5px}
.iz-badge[data-variant="accent"]{background:color-mix(in oklch,var(--iz-ring) 16%,transparent);color:var(--iz-fg)}
.iz-badge[data-count]{min-width:20px;height:20px;padding:0 6px;justify-content:center;font-size:11.5px;font-variant-numeric:tabular-nums}
.iz-kbd[data-size="sm"]{min-width:18px;height:18px;padding:0 4px;font-size:11px;border-radius:5px}
.iz-kbd[data-size="lg"]{min-width:28px;height:28px;padding:0 8px;font-size:13.5px;border-radius:7px}
.iz-count-host{position:relative;display:inline-flex}
.iz-count-host > .iz-badge[data-count]{position:absolute;top:-6px;right:-8px;background:var(--iz-destructive);color:#fff;box-shadow:0 0 0 2px var(--iz-card)}
.iz-count-host > .iz-dot-alert{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--iz-destructive);box-shadow:0 0 0 2px var(--iz-card)}

/* progress */
.iz-progress[data-size="sm"]{height:4px}
.iz-progress[data-size="lg"]{height:12px}
.iz-progress[data-tone="success"] > span{background:var(--iz-success)}
.iz-progress[data-tone="accent"] > span{background:var(--iz-ring)}
.iz-progress[data-tone="destructive"] > span{background:var(--iz-destructive)}
.iz-ring{--v:0;--s:44px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;
  background:conic-gradient(var(--iz-ring-c, var(--iz-primary)) calc(var(--v) * 1%), color-mix(in oklch,var(--iz-fg) 12%,transparent) 0);font:600 11.5px/1 var(--iz-mono);font-variant-numeric:tabular-nums}
.iz-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--iz-card)}
.iz-ring > span{position:relative}
.iz-ring[data-tone="success"]{--iz-ring-c:var(--iz-success)}
.iz-ring[data-tone="accent"]{--iz-ring-c:var(--iz-ring)}

/* avatar */
.iz-avatar[data-size="xs"]{width:24px;height:24px;font-size:10px}
.iz-avatar[data-size="sm"]{width:30px;height:30px;font-size:11.5px}
.iz-avatar[data-size="lg"]{width:48px;height:48px;font-size:16px}
.iz-avatar[data-size="xl"]{width:64px;height:64px;font-size:21px}
.iz-avatar-wrap{position:relative;display:inline-grid}
.iz-avatar-status{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;background:var(--iz-success);box-shadow:0 0 0 2px var(--iz-card)}
.iz-avatar-status[data-tone="away"]{background:var(--iz-warning)}
.iz-avatar-status[data-tone="off"]{background:var(--iz-muted-fg)}
.iz-on-card .iz-avatar{box-shadow:0 0 0 2px var(--iz-card)}

/* tabs: underline variant */
.iz-tabs-list[data-variant="underline"]{background:transparent;padding:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--iz-border);gap:4px}
.iz-tabs-list[data-variant="underline"] .iz-tab{border-radius:0;height:38px;padding:0 10px}
.iz-tabs-list[data-variant="underline"] .iz-tab[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--iz-fg)}

/* separator */
.iz-sep{border:0;height:1px;background:var(--iz-border);margin:0}
.iz-sep[data-orientation="vertical"]{width:1px;height:16px;display:inline-block;vertical-align:middle}
.iz-sep-label{display:flex;align-items:center;gap:12px;font:500 12.5px/1 var(--iz-font);color:var(--iz-muted-fg)}
.iz-sep-label::before,.iz-sep-label::after{content:"";flex:1;height:1px;background:var(--iz-border)}
.iz-tabs-list[data-variant="underline"] .iz-seg-thumb{display:none}
.iz-tooltip[data-side="bottom"]{bottom:auto;top:calc(100% + 8px)}
.iz-tooltip .iz-kbd{margin-left:8px;height:18px;min-width:18px;font-size:11px;background:color-mix(in oklch,currentColor 10%,transparent);box-shadow:none}
.iz-tooltip[data-static]{opacity:1;transform:translate(-50%,0)}

/* ---------- v2: everyday components built on native elements ---------- */
/* card */
.iz-card{border-radius:var(--iz-radius);background:var(--iz-card);box-shadow:0 0 0 1px var(--iz-border), 0 1px 2px oklch(0 0 0 / .04);overflow:hidden}
.iz-card-body{padding:18px 20px}
.iz-card-media{aspect-ratio:16/9;background:var(--iz-muted)}
.iz-card-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--iz-border)}
.iz-card[data-interactive]{transition:box-shadow .2s var(--iz-ease), transform .2s var(--iz-spring)}
.iz-card[data-interactive]:hover{box-shadow:0 0 0 1px color-mix(in oklch,var(--iz-fg) 22%,transparent), 0 10px 28px -14px oklch(0 0 0 / .3);transform:translateY(-2px)}
/* radio cards */
.iz-radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;border:0;margin:0;padding:0}
.iz-radio-card{position:relative;display:grid;gap:4px;padding:14px 16px;border-radius:var(--iz-radius-md);background:var(--iz-card);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--iz-border);transition:box-shadow .15s var(--iz-ease), background-color .15s}
.iz-radio-card:hover{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--iz-fg) 30%,transparent)}
.iz-radio-card input{position:absolute;opacity:0;pointer-events:none}
.iz-radio-card .iz-radio-dot{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in oklch,var(--iz-fg) 42%,transparent);margin-bottom:6px;transition:box-shadow .2s var(--iz-spring)}
.iz-radio-card:has(input:checked){box-shadow:inset 0 0 0 1.75px var(--iz-primary);background:color-mix(in oklch,var(--iz-primary) 4%,var(--iz-card))}
.iz-radio-card:has(input:checked) .iz-radio-dot{box-shadow:inset 0 0 0 5px var(--iz-primary)}
.iz-radio-card:has(input:focus-visible){outline:2px solid var(--iz-ring);outline-offset:2px}
.iz-radio-card:has(input:disabled){opacity:.5;cursor:not-allowed}
.iz-radio-card b{font:600 14.5px/1.2 var(--iz-font)}
.iz-radio-card .price{font:600 22px/1.1 var(--iz-font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.iz-radio-card small{font-size:13px;color:var(--iz-muted-fg)}
/* select (native) */
.iz-select{appearance:none;-webkit-appearance:none;width:100%;height:40px;padding:0 36px 0 12px;border:0;border-radius:var(--iz-radius-sm);background:var(--iz-card);color:var(--iz-fg);
  font:400 14.5px/1 var(--iz-font);box-shadow:inset 0 0 0 1px var(--iz-border), 0 1px 2px oklch(0 0 0 / .04);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.iz-select:hover{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--iz-fg) 28%,transparent)}
.iz-select:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--iz-ring), 0 0 0 3px color-mix(in oklch,var(--iz-ring) 28%,transparent)}
.iz-select[disabled]{opacity:.55;cursor:not-allowed}
.iz-select[data-size="sm"]{height:32px;font-size:13.5px}
/* accordion (details/summary) */
.iz-acc{border-radius:var(--iz-radius-md);box-shadow:0 0 0 1px var(--iz-border);background:var(--iz-card);overflow:hidden}
.iz-acc details + details{border-top:1px solid var(--iz-border)}
.iz-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;cursor:pointer;font:600 14.5px/1.3 var(--iz-font)}
.iz-acc summary::-webkit-details-marker{display:none}
.iz-acc summary::after{content:"";width:8px;height:8px;flex:none;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--iz-spring);opacity:.65}
.iz-acc details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.iz-acc summary:hover{background:color-mix(in oklch,var(--iz-fg) 3%,transparent)}
.iz-acc summary:focus-visible{outline:2px solid var(--iz-ring);outline-offset:-2px;border-radius:var(--iz-radius-md)}
.iz-acc details > div{padding:0 18px 16px;color:var(--iz-muted-fg);font-size:14px;line-height:1.6;max-width:68ch}
/* table */
.iz-table-wrap{border-radius:var(--iz-radius-md);box-shadow:0 0 0 1px var(--iz-border);overflow-x:auto;background:var(--iz-card)}
.iz-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.iz-table th{text-align:left;font:500 12.5px/1.2 var(--iz-font);color:var(--iz-muted-fg);padding:11px 14px;background:color-mix(in oklch,var(--iz-fg) 3%,transparent);border-bottom:1px solid var(--iz-border);white-space:nowrap}
.iz-table td{padding:12px 14px;border-bottom:1px solid var(--iz-border);white-space:nowrap}
.iz-table tr:last-child td{border-bottom:0}
.iz-table tbody tr:hover{background:color-mix(in oklch,var(--iz-fg) 3%,transparent)}
.iz-table .num{text-align:right}
/* dialog (native) */
.iz-dialog{border:0;padding:0;width:min(440px,calc(100vw - 32px));border-radius:calc(var(--iz-radius) + 2px);color:var(--iz-fg);background:var(--iz-card);
  box-shadow:0 0 0 1px var(--iz-border), 0 30px 60px -20px oklch(0 0 0 / .45)}
.iz-dialog::backdrop{background:oklch(0.15 0.01 270 / .4)}
.iz-dialog[open]{animation:iz-pop .26s var(--iz-spring)}
@keyframes iz-pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.iz-dialog-body{padding:22px 22px 18px;display:grid;gap:8px}
.iz-dialog-body h3{font:600 18px/1.25 var(--iz-font)}
.iz-dialog-body p{color:var(--iz-muted-fg);font-size:14.5px;line-height:1.55}
.iz-dialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--iz-border)}
.iz-dialog-preview{position:relative;display:grid;place-items:center;padding:36px 16px;border-radius:var(--iz-radius);background:color-mix(in oklch,var(--iz-fg) 30%,var(--iz-bg));overflow:hidden}
.iz-dialog-preview .iz-dialog{position:static;display:block;animation:none}
/* popover */
.iz-popover{position:absolute;z-index:60;width:min(300px,calc(100vw - 32px));padding:16px;border-radius:var(--iz-radius-md);background:var(--iz-card);
  box-shadow:0 0 0 1px var(--iz-border), 0 18px 40px -16px oklch(0 0 0 / .35)}
.iz-popover[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.iz-dialog[open]{animation:none}.iz-acc summary::after{transition:none}.iz-card[data-interactive]{transition:none}}