/* ============================================================
   PHAZA UI CORE v2.4.0 — GENERATED from core-src/tokens.py. DO NOT EDIT.
   Themes: dark (default) · [data-phz="light"] · [data-phz="hc"]
   Direction: dir="rtl" fully supported; use logical properties.
   ============================================================ */
:root {
  --phz-brand-blue-50: #EDFEFF;
  --phz-brand-blue-100: #D4FAFE;
  --phz-brand-blue-200: #AEF7FD;
  --phz-brand-blue-300: #88F4FD;
  --phz-brand-blue-400: #61F2FE;
  --phz-brand-blue-500: #00F0FF;
  --phz-brand-blue-600: #00CAD8;
  --phz-brand-blue-700: #009DA8;
  --phz-brand-blue-800: #00727B;
  --phz-brand-blue-900: #004A50;
  --phz-brand-blue-950: #00282C;
  --phz-brand-violet-50: #F7EFFF;
  --phz-brand-violet-100: #ECDAFF;
  --phz-brand-violet-200: #DFBEFF;
  --phz-brand-violet-300: #CE9EFF;
  --phz-brand-violet-400: #AD6AFF;
  --phz-brand-violet-500: #8A2BE2;
  --phz-brand-violet-600: #751BC3;
  --phz-brand-violet-700: #5D149C;
  --phz-brand-violet-800: #451176;
  --phz-brand-violet-900: #300E52;
  --phz-brand-violet-950: #1D0933;
  --phz-brand-action: #00F0FF;
  --phz-brand-accent: #8A2BE2;
  --phz-gradient-signature: linear-gradient(135deg,#00F0FF 0%,#00CDFF 25%,#21A0FF 50%,#696CFF 75%,#8A2BE2 100%);
  --phz-gradient-action: linear-gradient(135deg,#007A88 0%,#0072AC 25%,#0061CA 50%,#4D48D9 75%,#7F24D1 100%);
  --phz-gradient-deep: linear-gradient(135deg,#004D5A 0%,#004476 25%,#00338C 50%,#2A1396 75%,#4D008D 100%);
  --phz-gradient-veil: linear-gradient(135deg,#00272F 0%,#00223F 25%,#00184C 50%,#130652 75%,#27004C 100%);
  --phz-series-series-1: #70C8F9;
  --phz-series-series-2: #B186FD;
  --phz-series-series-3: #32C17C;
  --phz-series-series-4: #C86D0C;
  --phz-series-series-5: #D64B97;
  --phz-inverse-surface: #E6EBF0;
  --phz-inverse-surface-2: #C2CBD5;
  --phz-inverse-text: #0E111A;
  --phz-inverse-text-muted: #4A515C;
  --phz-veil-scrim: rgba(3,4,8,.62);
  --phz-veil-scrim-strong: rgba(3,12,20,.78);
  --phz-veil-ring-bright: rgba(255,255,255,.85);
  --phz-font-display: 'Poppins','Carlito',system-ui,sans-serif;
  --phz-font-ui: 'Inter','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --phz-font-mono: 'JetBrains Mono','DejaVu Sans Mono',ui-monospace,monospace;
  --phz-text-xs: 12px;
  --phz-text-sm: 13px;
  --phz-text-base: 14px;
  --phz-text-md: 16px;
  --phz-text-lg: 18px;
  --phz-text-xl: 20px;
  --phz-text-2xl: 24px;
  --phz-text-3xl: 30px;
  --phz-text-4xl: 36px;
  --phz-text-5xl: 48px;
  --phz-text-6xl: 60px;
  --phz-leading-xs: 18px;
  --phz-leading-sm: 20px;
  --phz-leading-base: 22px;
  --phz-leading-md: 24px;
  --phz-leading-lg: 26px;
  --phz-leading-xl: 28px;
  --phz-leading-2xl: 32px;
  --phz-leading-3xl: 38px;
  --phz-leading-4xl: 44px;
  --phz-leading-5xl: 56px;
  --phz-leading-6xl: 68px;
  --phz-space-1: 4px;
  --phz-space-2: 8px;
  --phz-space-3: 12px;
  --phz-space-4: 16px;
  --phz-space-5: 20px;
  --phz-space-6: 24px;
  --phz-space-8: 32px;
  --phz-space-10: 40px;
  --phz-space-12: 48px;
  --phz-space-16: 64px;
  --phz-space-24: 96px;
  --phz-radius-none: 0;
  --phz-radius-field: 0;
  --phz-radius-control: 0;
  --phz-radius-surface: 0;
  --phz-radius-pill: 9999px;
  --phz-shadow-field: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.055), 0 2px 6px -1px rgba(0,0,0,.5);
  --phz-shadow-field-focus: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px -4px rgba(0,240,255,.28), 0 2px 8px -1px rgba(0,0,0,.5);
  --phz-shadow-dropdown: 0 18px 44px -18px rgba(0,0,0,.62);
  --phz-shadow-dropdown-modal: 0 30px 80px -20px rgba(0,0,0,.6);
  --phz-shadow-overlay: 0 30px 80px -20px rgba(0,0,0,.55);
  --phz-shadow-nav-active: 0 8px 20px -10px rgba(0,240,255,.4);
  --phz-shadow-lift: 0 10px 24px -8px rgba(0,0,0,.4);
  --phz-shadow-lift-filter: drop-shadow(0 8px 14px rgba(0,0,0,.38));
  --phz-motion-micro: 120ms;
  --phz-motion-fast: 160ms;
  --phz-motion-base: 200ms;
  --phz-motion-slow: 280ms;
  --phz-motion-ease-out: cubic-bezier(0,0,.2,1);
  --phz-motion-ease-in: cubic-bezier(.4,0,1,1);
  --phz-motion-spring: cubic-bezier(.34,1.56,.64,1);
  --phz-motion-sweep: 380ms cubic-bezier(0,0,.2,1);
  --phz-cut-run: 0.3249;
  --phz-cut-x: 18px;
  --phz-cut-y: 42px;
  --phz-cut-len: 45.7px;
  --phz-cut-ang: 113.2deg;
  --phz-cut-button-len: 28.46px;
  --phz-cut-button-ang: 108.43deg;
  --phz-cut-stage: polygon(var(--phz-cut-x) 0,100% 0,100% 100%,0 100%,0 var(--phz-cut-y));
  --phz-cut-stage-rtl: polygon(0 0,calc(100% - var(--phz-cut-x)) 0,100% var(--phz-cut-y),100% 100%,0 100%);
  --phz-cut-button: polygon(9px 0,100% 0,100% 100%,0 100%,0 27px);
  --phz-cut-button-rtl: polygon(0 0,calc(100% - 9px) 0,100% 27px,100% 100%,0 100%);
  --phz-window-skew: -18deg;
  --phz-window-counter: 18deg;
  --phz-window-overhang: 0.33;
  --phz-surface-canvas: #090B12;
  --phz-surface-sunken: #05070E;
  --phz-surface-raised: #12151D;
  --phz-surface-overlay: #1B1F28;
  --phz-surface-hover: #212631;
  --phz-text-primary: #FFFFFF;
  --phz-text-secondary: #BABEC7;
  --phz-text-muted: #8B8F99;
  --phz-text-disabled: #5A5D66;
  --phz-text-inverse: #06131A;
  --phz-border-subtle: #1E2027;
  --phz-border-default: #2D3039;
  --phz-border-strong: #646975;
  --phz-status-success: #5BCC80;
  --phz-status-warning: #E5A323;
  --phz-status-danger: #FE8B83;
  --phz-status-info: #31BFFE;
  --phz-link: #61F2FE;
  color-scheme: dark;
}
[data-phz="light"] {
  --phz-surface-canvas: #F9FAFC;
  --phz-surface-sunken: #F0F1F5;
  --phz-surface-raised: #FFFFFF;
  --phz-surface-overlay: #FFFFFF;
  --phz-surface-hover: #EAEDF2;
  --phz-text-primary: #0E111A;
  --phz-text-secondary: #494D56;
  --phz-text-muted: #71747D;
  --phz-text-disabled: #9C9EA5;
  --phz-text-inverse: #FFFFFF;
  --phz-border-subtle: #E4E6EA;
  --phz-border-default: #D0D2D8;
  --phz-border-strong: #898C94;
  --phz-status-success: #0C7E40;
  --phz-status-warning: #8A6003;
  --phz-status-danger: #B13A38;
  --phz-status-info: #02729D;
  --phz-link: #00727B;
  color-scheme: light;
}
[data-phz="hc"] {
  --phz-surface-canvas: #000000;
  --phz-surface-sunken: #000000;
  --phz-surface-raised: #0A0A0F;
  --phz-surface-overlay: #101018;
  --phz-surface-hover: #1E2027;
  --phz-text-primary: #FFFFFF;
  --phz-text-secondary: #E6E8EE;
  --phz-text-muted: #C4C8D2;
  --phz-text-disabled: #8B8F99;
  --phz-text-inverse: #000000;
  --phz-border-subtle: #4A4E5A;
  --phz-border-default: #7A7E8A;
  --phz-border-strong: #B0B4C0;
  --phz-status-success: #7EE2A8;
  --phz-status-warning: #FFD08A;
  --phz-status-danger: #FFB3AD;
  --phz-status-info: #7FD9FF;
  --phz-link: #88F4FD;
  color-scheme: dark;
}

/* ---- ground: no vendor white ever reaches the screen ---- */
html, body { background: var(--phz-surface-canvas); color: var(--phz-text-primary); }
body { font-family: var(--phz-font-ui); font-size: 14px; line-height: 22px; margin: 0; }
::selection { background: rgba(0,240,255,.30); color: var(--phz-text-inverse); }

/* ---- base controls (primitives) ---- */
.phz-btn { display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:0; border-radius:var(--phz-radius-control);
  font:600 14px/1 var(--phz-font-ui); color:#fff; padding:13px 22px; background:var(--phz-gradient-action);
  clip-path:var(--phz-cut-button); transition:transform var(--phz-motion-micro) var(--phz-motion-ease-out), filter var(--phz-motion-base) var(--phz-motion-ease-out); }
.phz-btn:hover { transform:translateY(-1px); filter:brightness(1.12); }
.phz-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; filter:none; }
.phz-btn--ghost { background:none; clip-path:none; color:var(--phz-text-primary); box-shadow:inset 0 0 0 1px var(--phz-border-default); }
.phz-btn--danger { background:linear-gradient(140deg,#E25555,#C03434); }
[dir="rtl"] .phz-btn { clip-path:var(--phz-cut-button-rtl); }
[dir="rtl"] .phz-btn--ghost { clip-path:none; }
.phz-field { display:flex; flex-direction:column; gap:7px; }
.phz-field label { font:600 13px/1 var(--phz-font-ui); }
.phz-input { background-color:var(--phz-surface-sunken); color:var(--phz-text-primary); border:1px solid transparent; border-radius:var(--phz-radius-field);
  font:400 14px/1 var(--phz-font-ui); padding:12px 14px; box-shadow:var(--phz-shadow-field);
  background-image:var(--phz-gradient-signature); background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px;
  transition:box-shadow 350ms var(--phz-motion-ease-out), background-size var(--phz-motion-sweep); }
[dir="rtl"] .phz-input { background-position:100% 100%; }
.phz-input:focus, .phz-input:focus-visible { outline:none; background-size:100% 2px; box-shadow:var(--phz-shadow-field-focus); }
.phz-pill { display:inline-flex; align-items:center; gap:7px; font:500 12px/1 var(--phz-font-ui); padding:5px 11px; border-radius:var(--phz-radius-pill); box-shadow:inset 0 0 0 1px var(--phz-border-default); }

/* ---- application shell primitives ---- */
.phz-shell-top { display:flex; align-items:center; gap:14px; background:var(--phz-surface-raised); border-bottom:1px solid var(--phz-border-subtle); padding:0 14px; height:48px; }
.phz-shell-nav a { display:flex; align-items:center; gap:10px; font:400 13px/1 var(--phz-font-ui); color:var(--phz-text-secondary); padding:8px 14px; text-decoration:none; }
.phz-shell-nav a.on { color:var(--phz-text-primary); background:var(--phz-surface-hover); box-shadow:inset 2px 0 0 var(--phz-brand-action); }
[dir="rtl"] .phz-shell-nav a.on { box-shadow:inset -2px 0 0 var(--phz-brand-action); }
.phz-stage { background:linear-gradient(180deg,var(--phz-surface-hover),var(--phz-surface-raised) 24%);
  box-shadow:inset 0 0 0 1px var(--phz-border-subtle); clip-path:var(--phz-cut-stage); position:relative; padding:32px 34px; }
button:disabled, .disabled, [aria-disabled="true"] { opacity:.5; color:var(--phz-text-muted); filter:none; }
:focus-visible { outline:2px solid var(--phz-link); outline-offset:2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline:none; }

/* ---- THE BOX EDGE — one edge, every container, no exceptions ---- */
.phz-stage, .phz-panel { background:linear-gradient(180deg,var(--phz-surface-hover),var(--phz-surface-raised) 24%);
  box-shadow:inset 0 0 0 1px var(--phz-border-default); clip-path:var(--phz-cut-stage);
  position:relative; padding:22px 24px; }
[dir="rtl"] .phz-stage, [dir="rtl"] .phz-panel { clip-path:var(--phz-cut-stage-rtl); }
.phz-stage::after, .phz-panel::after { content:""; position:absolute; top:0; left:0; z-index:2;
  width:var(--phz-cut-len); height:1.5px; background:var(--phz-gradient-signature);
  transform-origin:0 0; transform:translateX(var(--phz-cut-x)) rotate(var(--phz-cut-ang)); pointer-events:none; }
[dir="rtl"] .phz-stage::after, [dir="rtl"] .phz-panel::after { left:auto; right:0; transform-origin:100% 0;
  transform:translateX(calc(var(--phz-cut-x) * -1)) rotate(calc(var(--phz-cut-ang) * -1)); }

/* ---- the signature hairline that traces a cut ----
   Set --phz-edge-len / --phz-edge-ang from the cut the surface uses. Defaults to
   the stage cut; .phz-mark-edge--control switches to the button cut. The two
   constants are derived from the cut's x/y — see tokens.py — so a surface never
   computes them locally again. ---- */
.phz-mark-edge { position:relative; }
.phz-mark-edge::after { content:""; position:absolute; top:0; left:0; z-index:2;
  width:var(--phz-edge-len, var(--phz-cut-len)); height:1.5px;
  background:var(--phz-gradient-signature); transform-origin:0 0;
  transform:translateX(var(--phz-edge-x, var(--phz-cut-x))) rotate(var(--phz-edge-ang, var(--phz-cut-ang)));
  pointer-events:none; }
[dir="rtl"] .phz-mark-edge::after { left:auto; right:0; transform-origin:100% 0;
  transform:translateX(calc(var(--phz-edge-x, var(--phz-cut-x)) * -1))
            rotate(calc(var(--phz-edge-ang, var(--phz-cut-ang)) * -1)); }
.phz-mark-edge--control { --phz-edge-len:var(--phz-cut-button-len);
  --phz-edge-ang:var(--phz-cut-button-ang); --phz-edge-x:9px; }

/* ---- THE BLADE WINDOW — the one geometry for anything framing an image ---- */
.phz-window { --phz-w:48px; position:relative; flex:none; display:block; width:var(--phz-w); height:var(--phz-w);
  transform:skewX(var(--phz-window-skew)); overflow:hidden;
  background:var(--phz-surface-overlay); box-shadow:inset 0 0 0 1px var(--phz-border-default); }
.phz-window > img { position:absolute; top:0; bottom:0; height:100%; object-fit:cover;
  left:calc(var(--phz-w) * -0.33); width:calc(100% + var(--phz-w) * 0.66);
  transform:skewX(var(--phz-window-counter)); }
.phz-window > b, .phz-window > svg { position:absolute; inset:0; display:grid; place-items:center;
  transform:skewX(var(--phz-window-counter)); }
/* the blade never mirrors: it is a brand mark, not a directional element */
[dir="rtl"] .phz-window { transform:skewX(var(--phz-window-skew)); }

/* ---- blade window, CUT variant ----
   Same 18 degrees, but the shape is cut inside the layout box instead of skewed
   outside it: no counter-skew on the content, no overhang to compensate, and the
   angle holds at any aspect ratio because the run is derived from the height.
   Prefer this for non-square frames (cards, tiles); the skew variant stays for
   square avatars where the overhang tessellation is wanted. ---- */
.phz-window--cut { --phz-h:7.5rem; transform:none; height:var(--phz-h);
  clip-path:polygon(calc(var(--phz-h) * var(--phz-cut-run)) 0, 100% 0,
                    calc(100% - var(--phz-h) * var(--phz-cut-run)) 100%, 0 100%); }
.phz-window--cut > img, .phz-window--cut > b, .phz-window--cut > svg {
  position:absolute; inset:0; width:100%; left:0; transform:none; object-fit:cover; }
[dir="rtl"] .phz-window--cut {
  clip-path:polygon(0 0, calc(100% - var(--phz-h) * var(--phz-cut-run)) 0,
                    100% 100%, calc(var(--phz-h) * var(--phz-cut-run)) 100%); }

/* ---- lift on a clipped surface ----
   clip-path clips box-shadow away, and every container here is clipped, so the
   box form of the lift never renders on a real Phaza surface. Clipped elements
   take the filter form instead. It is tuned, not converted: drop-shadow has no
   spread, and its blur reads wider than the same box-shadow blur. ---- */
.phz-lift { box-shadow:var(--phz-shadow-lift); }
.phz-stage.phz-lift, .phz-panel.phz-lift, [style*="clip-path"].phz-lift,
.phz-window.phz-lift, .phz-window--cut.phz-lift {
  box-shadow:none; filter:var(--phz-shadow-lift-filter); }

/* ---- inverse surface: a light card on the dark product ---- */
.phz-inverse { background:linear-gradient(160deg,var(--phz-inverse-surface),var(--phz-inverse-surface-2));
  color:var(--phz-inverse-text); }
.phz-inverse .phz-muted { color:var(--phz-inverse-text-muted); }
/* a brand mark on an inverse surface uses the DEEP sweep: the cyan end of the
   signature sweep is 1.17:1 on inverse-surface and effectively invisible. */
.phz-inverse .phz-mark { background:var(--phz-gradient-deep); }

/* ---- DROPDOWN SURFACES — two deliberate tiers, one language, always sharp ---- */
.phz-menu { background:var(--phz-surface-overlay); border:1px solid var(--phz-border-default);
  border-radius:0; padding:4px 0; box-shadow:var(--phz-shadow-dropdown); }
.phz-menu--modal { box-shadow:var(--phz-shadow-dropdown-modal); }
.phz-menu [role="option"], .phz-menu a { display:flex; align-items:center; gap:8px; position:relative;
  padding:9px 12px; font:400 13.5px/1.35 var(--phz-font-ui); color:var(--phz-text-primary);
  text-decoration:none; cursor:pointer; }
.phz-menu [role="option"]::before, .phz-menu a::before { content:""; position:absolute; inset-block:0;
  inset-inline-start:0; width:2px; background:var(--phz-brand-action); transform:scaleY(0);
  transition:transform var(--phz-motion-fast) var(--phz-motion-ease-out); }
.phz-menu [role="option"]:hover::before, .phz-menu a:hover::before { transform:scaleY(1); }
.phz-menu [aria-selected="true"] { color:var(--phz-link); }

/* ---- SELECT — matches the field exactly; native popup follows color-scheme ---- */
.phz-select { position:relative; display:block; }
.phz-select select { appearance:none; -webkit-appearance:none; width:100%;
  background-color:var(--phz-surface-sunken); color:var(--phz-text-primary); border:1px solid transparent;
  border-radius:0; font:400 14px/normal var(--phz-font-ui);
  padding-block:12px; padding-inline:14px 36px; cursor:pointer; box-shadow:var(--phz-shadow-field); }
.phz-select::after { content:""; position:absolute; inset-inline-end:14px; top:50%; width:8px; height:8px;
  margin-top:-6px; border-inline-end:1.5px solid var(--phz-text-muted);
  border-bottom:1.5px solid var(--phz-text-muted); transform:rotate(45deg); pointer-events:none; }
.phz-select select:focus, .phz-select select:focus-visible { outline:none; box-shadow:var(--phz-shadow-field-focus); }
.phz-select option, .phz-select optgroup { background:var(--phz-surface-overlay); color:var(--phz-text-primary); }

/* ---- brand fills never carry white: white on --phz-brand-action is 1.41:1 ---- */
.phz-on-action { background:var(--phz-brand-action); color:var(--phz-text-inverse); }
@media (prefers-reduced-motion: reduce) { * { transition-duration:.01ms !important; animation:none !important; } }