/* ==========================================================================
   PHANTOM BY NULLDASH — REVERSE-ENGINEERED DESIGN SYSTEM & STYLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700;900&family=JetBrains+Mono:wght@400;500;700;800&family=Tektur:wght@700;900&family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap');

:root {
  --font-jetbrains-mono: 'JetBrains Mono', monospace;
  --font-chakra-petch: 'Chakra Petch', sans-serif;
  --font-tektur: 'Tektur', sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', sans-serif;

  --ph-bg: #070708;
  --ph-surface-tray: #0a0a0c;
  --ph-surface-1: #0d0d10;
  --ph-surface-2: #0f0f12;
  --ph-surface-3: #121215;
  --ph-surface-4: #16161a;
  --ph-surface-5: #1c1c20;
  
  --ph-line-1: #16161a;
  --ph-line-2: #1f1f24;
  --ph-line-3: #222227;
  --ph-line-4: #2a2a30;

  --ph-text-1: #f2f2f3;
  --ph-text-2: #e7e7ea;
  --ph-text-3: #c9c9cf;
  --ph-text-4: #a9a9b0;
  --ph-text-5: #8b8b92;
  --ph-text-6: #6a6a72;
  --ph-text-7: #5d5d64;
  --ph-text-8: #4a4a52;

  --ph-ok: #66da85;
  --ph-warn: #f7bc50;
  --ph-warn-ink: #15120a;
  --ph-bad: #ff645f;
  --ph-bad-text: #ff948c;
  --ph-danger-fill: #e23439;

  /* Brand defaults: PHANTOM */
  --ph-accent: #ededed;
  --ph-accent-ink: #0b0b0c;
  --ph-accent-soft: rgba(237, 237, 237, 0.16);
  --ph-accent-line: rgba(237, 237, 237, 0.45);
  --ph-accent-text: #ffffff;
  --ph-accent-glow: rgba(237, 237, 237, 0.45);

  --ph-text-body: var(--ph-text-5);
  --ph-text-label: var(--ph-text-6);
  --ph-surface-card: var(--ph-surface-1);
  --ph-outline-card: var(--ph-line-2);
  --ph-scrim: rgba(0, 0, 0, 0.72);
  --ph-scanline: rgba(255, 255, 255, 0.02);

  --ph-font-display: var(--font-tektur), var(--font-chakra-petch), sans-serif;
  --ph-font-body: var(--font-chakra-petch), var(--font-arabic), sans-serif;
  --ph-font-mono: var(--font-jetbrains-mono), monospace;

  --ph-type-wordmark: 900 42px/1 var(--ph-font-display);
  --ph-track-wordmark: 0.16em;
  --ph-type-hero-num: 900 38px/1 var(--ph-font-display);
  --ph-type-page-title: 800 22px/1.2 var(--ph-font-display);
  --ph-track-page-title: 0.04em;
  --ph-type-sheet-title: 900 20px/1.2 var(--ph-font-display);
  --ph-track-sheet-title: 0.03em;
  --ph-type-button-lg: 900 18px/1 var(--ph-font-display);
  --ph-track-button-lg: 0.1em;
  --ph-type-card-title: 800 16px/1.15 var(--ph-font-display);
  --ph-track-card-title: 0.03em;
  --ph-type-row-title: 800 15px/1.2 var(--ph-font-display);
  --ph-track-row-title: 0.03em;
  --ph-type-chip: 800 12px/1 var(--ph-font-display);
  --ph-type-body-lg: 500 15px/1.6 var(--ph-font-body);
  --ph-type-body: 400 13.5px/1.5 var(--ph-font-body);
  --ph-type-body-sm: 400 12px/1.5 var(--ph-font-body);
  --ph-type-key: 700 16px/1 var(--ph-font-mono);
  --ph-track-key: 0.05em;
  --ph-type-label: 700 10.5px/1.4 var(--ph-font-mono);
  --ph-track-label: 0.12em;
  --ph-type-label-xs: 700 9.5px/1.4 var(--ph-font-mono);
  --ph-track-label-xs: 0.12em;

  --ph-cut-xs: 6px;
  --ph-cut-sm: 10px;
  --ph-cut-md: 14px;
  --ph-cut-lg: 22px;
  --ph-cut-sheet: 24px;
  --ph-radius-knob: 2px;

  --ph-header-h: 64px;
  --ph-tabbar-h: 62px;
  --ph-hit-min: 44px;
  --ph-control-h: 50px;
  --ph-input-h: 58px;
  --ph-primary-h: 60px;
  --ph-connect-h: 76px;

  --ph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ph-dur-fast: 0.15s;
  --ph-dur: 0.2s;
  --ph-press-scale: 0.985;
}

/* ==========================================================================
   BRAND THEMES
   ========================================================================== */
[data-brand="phantom"] {
  --ph-accent: #ededed;
  --ph-accent-ink: #0b0b0c;
  --ph-accent-soft: rgba(237, 237, 237, 0.16);
  --ph-accent-line: rgba(237, 237, 237, 0.45);
  --ph-accent-glow: rgba(237, 237, 237, 0.45);
}

[data-brand="aimhack"] {
  --ph-accent: #dc2626;
  --ph-accent-ink: #ffffff;
  --ph-accent-soft: rgba(220, 38, 38, 0.18);
  --ph-accent-line: rgba(220, 38, 38, 0.55);
  --ph-accent-glow: rgba(220, 38, 38, 0.55);
}

[data-brand="xreg"] {
  --ph-accent: #2d4ded;
  --ph-accent-ink: #ffffff;
  --ph-accent-soft: rgba(45, 77, 237, 0.18);
  --ph-accent-line: rgba(45, 77, 237, 0.55);
  --ph-accent-glow: rgba(45, 77, 237, 0.55);
  --ph-cut-xs: 4px;
  --ph-cut-sm: 4px;
  --ph-cut-md: 6px;
  --ph-cut-lg: 8px;
}

[data-brand="trollmodz"] {
  --ph-accent: #38e0f8;
  --ph-accent-ink: #070708;
  --ph-accent-soft: rgba(56, 224, 248, 0.18);
  --ph-accent-line: rgba(56, 224, 248, 0.55);
  --ph-accent-glow: rgba(56, 224, 248, 0.55);
}

[data-brand="silentx"] {
  --ph-accent: #e01a14;
  --ph-accent-ink: #ffffff;
  --ph-accent-soft: rgba(224, 26, 20, 0.18);
  --ph-accent-line: rgba(224, 26, 20, 0.55);
  --ph-accent-glow: rgba(224, 26, 20, 0.55);
}

[data-brand="zentnityx"] {
  --ph-accent: #b12cdc;
  --ph-accent-ink: #ffffff;
  --ph-accent-soft: rgba(177, 44, 220, 0.18);
  --ph-accent-line: rgba(177, 44, 220, 0.55);
  --ph-accent-glow: rgba(177, 44, 220, 0.55);
}

[data-brand="ruizenteam"] {
  --ph-accent: #eac836;
  --ph-accent-ink: #070708;
  --ph-accent-soft: rgba(234, 200, 54, 0.18);
  --ph-accent-line: rgba(234, 200, 54, 0.55);
  --ph-accent-glow: rgba(234, 200, 54, 0.55);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background-color: var(--ph-bg);
  color: var(--ph-text-1);
  font-family: var(--ph-font-body);
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
}

/* ==========================================================================
   CYBER CORNER CUTS (clip-path polygons)
   ========================================================================== */
.ph-cut-xs {
  --c: var(--ph-cut-xs);
  clip-path: polygon(
    var(--c) 0,
    100% 0,
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    0 100%,
    0 var(--c)
  );
}

.ph-cut-sm {
  --c: var(--ph-cut-sm);
  clip-path: polygon(
    var(--c) 0,
    100% 0,
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    0 100%,
    0 var(--c)
  );
}

.ph-cut-md {
  --c: var(--ph-cut-md);
  clip-path: polygon(
    var(--c) 0,
    100% 0,
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    0 100%,
    0 var(--c)
  );
}

.ph-cut-lg {
  --c: var(--ph-cut-lg);
  clip-path: polygon(
    var(--c) 0,
    100% 0,
    100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,
    0 100%,
    0 var(--c)
  );
}

.ph-cut-sheet {
  clip-path: polygon(
    var(--ph-cut-sheet) 0,
    calc(100% - var(--ph-cut-sheet)) 0,
    100% var(--ph-cut-sheet),
    100% 100%,
    0 100%,
    0 var(--ph-cut-sheet)
  );
}

/* ==========================================================================
   LAYOUT & CONTAINER
   ========================================================================== */
.ph-viewport {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-color: var(--ph-bg);
  position: relative;
}

.ph-app {
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--ph-bg);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.ph-view {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ph-view::-webkit-scrollbar {
  display: none;
}

/* Drift Orbs */
.ph-bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.animate-drift-a {
  position: absolute;
  left: 50%;
  top: -14%;
  width: 560px;
  height: 560px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  filter: blur(110px);
  animation: drift-a 32s var(--ph-ease) infinite alternate;
}

.animate-drift-b {
  position: absolute;
  bottom: -18%;
  right: -12%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  filter: blur(110px);
  animation: drift-b 38s var(--ph-ease) infinite alternate;
}

@keyframes drift-a {
  0% { transform: translate(-50%, 0) scale(1); }
  100% { transform: translate(calc(26px - 50%), 18px) scale(1.05); }
}

@keyframes drift-b {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-22px, -16px) scale(1.06); }
}

/* Scanlines */
.ph-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.015) 2px,
    rgba(255, 255, 255, 0.015) 4px
  );
  z-index: 10;
}

/* ==========================================================================
   TYPOGRAPHY & LABELS
   ========================================================================== */
.ph-label {
  font: var(--ph-type-label);
  letter-spacing: var(--ph-track-label);
  text-transform: uppercase;
  color: var(--ph-text-label);
}

.ph-title {
  font: var(--ph-type-page-title);
  letter-spacing: var(--ph-track-page-title);
  text-transform: uppercase;
}

.ph-display {
  font-family: var(--ph-font-display);
  text-transform: uppercase;
  font-weight: 900;
}

.ph-mono {
  font-family: var(--ph-font-mono);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.ph-header {
  height: var(--ph-header-h);
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  display: flex;
  position: relative;
  z-index: 25;
}

.ph-header__title {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font: var(--ph-type-page-title);
  letter-spacing: var(--ph-track-page-title);
  text-transform: uppercase;
  color: var(--ph-text-1);
}

.ph-iconbtn {
  --c: var(--ph-cut-xs);
  width: var(--ph-hit-min);
  height: var(--ph-hit-min);
  background: var(--ph-surface-3);
  color: var(--ph-text-1);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.ph-lang {
  --c: var(--ph-cut-xs);
  background: var(--ph-surface-3);
  height: 38px;
  color: var(--ph-text-3);
  font: var(--ph-type-label);
  letter-spacing: 0.08em;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 11.5px;
  display: flex;
  transition: background var(--ph-dur);
}

.ph-lang:hover {
  background: var(--ph-surface-4);
}

.ph-menu {
  --c: var(--ph-cut-sm);
  top: 56px;
  z-index: 50;
  background: var(--ph-surface-4);
  flex-direction: column;
  gap: 2px;
  width: 190px;
  padding: 6px;
  display: flex;
  position: absolute;
  right: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  border: 1px solid var(--ph-line-3);
}

[dir="rtl"] .ph-menu {
  right: auto;
  left: 14px;
}

.ph-menu__item {
  --c: var(--ph-cut-xs);
  height: 44px;
  font: 600 14px var(--ph-font-body);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  color: var(--ph-text-3);
  transition: background var(--ph-dur-fast);
}

.ph-menu__item:hover,
.ph-menu__item[aria-current="true"] {
  background: var(--ph-surface-5);
  color: var(--ph-text-1);
}

/* ==========================================================================
   BUTTONS & INPUTS
   ========================================================================== */
.ph-btn {
  --c: var(--ph-cut-sm);
  min-height: var(--ph-control-h);
  font: var(--ph-type-label);
  letter-spacing: var(--ph-track-label);
  text-transform: uppercase;
  background: var(--ph-surface-4);
  color: var(--ph-text-2);
  transition: background var(--ph-dur) var(--ph-ease), transform var(--ph-dur-fast);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  font-size: 12px;
  user-select: none;
}

.ph-btn:active {
  transform: scale(var(--ph-press-scale));
}

.ph-btn--primary {
  min-height: var(--ph-primary-h);
  background: var(--ph-accent);
  color: var(--ph-accent-ink);
  font: var(--ph-type-button-lg);
  letter-spacing: var(--ph-track-button-lg);
  font-weight: 900;
  box-shadow: 0 0 30px var(--ph-accent-glow);
}

.ph-btn--danger {
  background: var(--ph-danger-fill);
  color: #fff;
  font: 900 16px/1 var(--ph-font-display);
  letter-spacing: 0.08em;
  min-height: 54px;
}

.ph-btn--danger-soft {
  background: rgba(255, 100, 95, 0.12);
  color: var(--ph-bad-text);
  font: 900 14.5px/1 var(--ph-font-display);
  letter-spacing: 0.1em;
  min-height: 52px;
}

.ph-btn--block {
  width: 100%;
}

.ph-btn:disabled {
  background: var(--ph-surface-4);
  color: var(--ph-text-8);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* KeyInput */
.ph-keyinput {
  --c: var(--ph-cut-sm);
  background: var(--ph-line-3);
  transition: background var(--ph-dur-fast);
  padding: 1.5px;
}

.ph-keyinput:focus-within {
  background: var(--ph-accent-line);
}

.ph-keyinput[data-error] {
  background: rgba(255, 100, 95, 0.7);
}

.ph-keyinput[data-shake] {
  animation: 0.38s ease-out ph-shake;
}

@keyframes ph-shake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-8px); }
  40% { transform: translate(7px); }
  60% { transform: translate(-5px); }
  80% { transform: translate(3px); }
}

.ph-keyinput__inner {
  --c: var(--ph-cut-sm);
  height: var(--ph-input-h);
  background: #0e0e11;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 16px;
}

[dir="rtl"] .ph-keyinput__inner {
  padding: 0 16px 0 8px;
}

.ph-keyinput input {
  min-width: 0;
  height: 100%;
  color: var(--ph-text-1);
  font: var(--ph-type-key);
  letter-spacing: var(--ph-track-key);
  direction: ltr;
  background: transparent;
  flex: 1;
}

.ph-keyinput input::placeholder {
  color: #3d3d44;
}

.ph-keyinput__paste {
  --c: var(--ph-cut-xs);
  background: var(--ph-surface-5);
  height: 42px;
  color: var(--ph-text-3);
  font: var(--ph-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: none;
  padding: 0 13px;
  font-size: 11.5px;
  transition: background var(--ph-dur-fast);
}

.ph-keyinput__paste:hover {
  background: var(--ph-line-4);
  color: var(--ph-text-1);
}

.ph-fielderror {
  font: var(--ph-type-body);
  color: var(--ph-bad-text);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
}

.ph-fielderror::before {
  content: "";
  background: currentColor;
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
}

/* ==========================================================================
   HUD TIME RING (COUNTDOWN DIAL)
   ========================================================================== */
.ph-hud {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 4px 0 12px;
  border: 1px solid var(--ph-line-2);
  background: radial-gradient(circle at 50% 50%, var(--ph-accent-soft) 0%, transparent 68%);
}

.ph-hud__corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--ph-text-7);
}

.ph-hud__corner:nth-child(1) { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.ph-hud__corner:nth-child(2) { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.ph-hud__corner:nth-child(3) { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.ph-hud__corner:nth-child(4) { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.ph-ring__time {
  font: var(--ph-type-hero-num);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Status Pill */
.ph-status {
  --c: var(--ph-cut-xs);
  height: 28px;
  font: var(--ph-type-label);
  letter-spacing: var(--ph-track-label);
  text-transform: uppercase;
  color: var(--tone, var(--ph-text-5));
  background: #111114;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

.ph-status::before {
  content: "";
  background: currentColor;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 10px;
}

.ph-status--ok { --tone: var(--ph-ok); }
.ph-status--warn { --tone: var(--ph-warn); }
.ph-status--bad { --tone: var(--ph-bad); }

/* KeyChip */
.ph-keychip {
  --c: var(--ph-cut-sm);
  background: var(--ph-surface-2);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--ph-line-2);
}

[dir="rtl"] .ph-keychip {
  padding: 0 16px 0 8px;
}

.ph-keychip__value {
  flex: 1;
  min-width: 0;
  font: var(--ph-type-key);
  letter-spacing: var(--ph-track-key);
  direction: ltr;
  text-align: start;
  font-size: 14px;
  color: var(--ph-text-1);
}

.ph-keychip__action {
  --c: var(--ph-cut-xs);
  background: var(--ph-surface-5);
  height: 40px;
  color: var(--ph-text-3);
  font: var(--ph-type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 11px;
  transition: background var(--ph-dur);
}

.ph-keychip[data-copied] .ph-keychip__action {
  background: rgba(102, 218, 133, 0.18);
  color: var(--ph-ok);
}

/* FactTile */
.ph-fact {
  --c: var(--ph-cut-sm);
  background: var(--ph-surface-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--ph-line-1);
}

.ph-fact__value {
  font: 700 13px/1.3 var(--ph-font-display);
  color: var(--ph-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Connect Button Dock */
.ph-connect-dock {
  padding: 4px 16px 14px;
  z-index: 20;
}

.ph-connect {
  --c: var(--ph-cut-md);
  width: 100%;
  min-height: var(--ph-connect-h);
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-line-3);
  display: flex;
  align-items: center;
  padding: 0 12px 0 20px;
  gap: 14px;
  text-align: start;
  transition: border-color var(--ph-dur), background var(--ph-dur);
}

[dir="rtl"] .ph-connect {
  padding: 0 20px 0 12px;
}

.ph-connect:hover:not(:disabled) {
  border-color: var(--ph-accent-line);
  background: var(--ph-surface-3);
}

.ph-connect__label {
  font: var(--ph-type-button-lg);
  letter-spacing: var(--ph-track-button-lg);
  text-transform: uppercase;
  color: var(--ph-text-1);
}

.ph-connect__sub {
  font: var(--ph-type-body-sm);
  color: var(--ph-text-5);
}

.ph-connect__icon {
  --c: var(--ph-cut-sm);
  width: 52px;
  height: 52px;
  background: var(--ph-accent);
  color: var(--ph-accent-ink);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
}

/* ==========================================================================
   FEATURE CARDS & SWITCHES
   ========================================================================== */
.ph-feature {
  --c: var(--ph-cut-md);
  background: var(--ph-line-2);
  transition: background var(--ph-dur);
  padding: 1px;
}

.ph-feature[data-on] {
  background: var(--ph-accent-line);
}

.ph-feature__body {
  --c: var(--ph-cut-md);
  background: var(--ph-surface-1);
}

.ph-feature__head {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
}

.ph-feature__index {
  font: 700 11px var(--ph-font-mono);
  color: var(--ph-text-8);
}

.ph-feature[data-on] .ph-feature__index {
  color: var(--ph-accent-text);
}

.ph-feature__name {
  font: var(--ph-type-card-title);
  letter-spacing: var(--ph-track-card-title);
  text-transform: uppercase;
  color: var(--ph-text-1);
}

.ph-feature__desc {
  font: var(--ph-type-body);
  color: var(--ph-text-5);
  margin-top: 4px;
}

.ph-feature__tray {
  border-top: 1px dashed var(--ph-line-3);
  background: var(--ph-surface-tray);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
}

.ph-feature__opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity var(--ph-dur);
}

.ph-feature:not([data-on]) .ph-feature__opts {
  opacity: 0.35;
  pointer-events: none;
}

/* Switch */
.ph-switch {
  --c: var(--ph-cut-xs);
  cursor: pointer;
  width: 56px;
  height: 30px;
  background: #1a1a1e;
  position: relative;
  transition: background var(--ph-dur);
  flex: none;
}

.ph-switch__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--ph-radius-knob);
  background: var(--ph-text-8);
  transition: left var(--ph-dur) var(--ph-ease), background var(--ph-dur);
  display: flex;
  align-items: center;
  justify-content: center;
}

[dir="rtl"] .ph-switch__knob {
  left: auto;
  right: 4px;
  transition: right var(--ph-dur) var(--ph-ease), background var(--ph-dur);
}

.ph-switch[aria-checked="true"] {
  background: var(--ph-accent);
}

.ph-switch[aria-checked="true"] .ph-switch__knob {
  background: var(--ph-accent-ink);
  left: 30px;
}

[dir="rtl"] .ph-switch[aria-checked="true"] .ph-switch__knob {
  right: 30px;
}

.ph-switch--sm {
  width: 46px;
  height: 26px;
}

.ph-switch--sm .ph-switch__knob {
  width: 18px;
  height: 18px;
}

.ph-switch--sm[aria-checked="true"] .ph-switch__knob {
  left: 24px;
}

[dir="rtl"] .ph-switch--sm[aria-checked="true"] .ph-switch__knob {
  right: 24px;
}

/* Subswitch */
.ph-subswitch {
  --c: var(--ph-cut-sm);
  background: var(--ph-surface-3);
  width: 100%;
  min-height: 52px;
  font: 500 14px var(--ph-font-body);
  text-align: start;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: var(--ph-text-2);
}

/* Chips */
.ph-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ph-chip {
  --c: var(--ph-cut-xs);
  background: var(--ph-surface-4);
  min-width: 0;
  height: 42px;
  color: var(--ph-text-4);
  font: var(--ph-type-chip);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--ph-dur-fast);
}

.ph-chip[aria-pressed="true"] {
  background: var(--ph-accent);
  color: var(--ph-accent-ink);
}

/* Tag */
.ph-tag {
  --c: var(--ph-cut-xs);
  height: 20px;
  font: var(--ph-type-label-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ph-surface-5);
  color: var(--ph-text-5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
}

.ph-tag--new {
  background: var(--ph-accent-soft);
  color: var(--ph-accent-text);
}

/* Angle Slider */
.ph-slider {
  touch-action: none;
  cursor: pointer;
  height: 48px;
  position: relative;
}

.ph-slider__track {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ph-surface-5);
}

.ph-slider__fill {
  position: absolute;
  top: 22px;
  height: 4px;
  background: var(--ph-accent);
}

.ph-slider__tick {
  position: absolute;
  width: 2px;
  background: #2e2e34;
}

.ph-slider__thumb {
  position: absolute;
  top: 14px;
  width: 12px;
  height: 20px;
  border-radius: var(--ph-radius-knob);
  background: var(--ph-text-1);
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.ph-slider__value {
  font: var(--ph-type-hero-num);
  font-size: 24px;
  color: var(--ph-accent-text);
}

/* ==========================================================================
   ROWS, NOTICES & SHEETS
   ========================================================================== */
.ph-row {
  --c: var(--ph-cut-sm);
  background: var(--ph-surface-2);
  text-align: start;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 10px 16px;
}

.ph-row__icon {
  --c: var(--ph-cut-xs);
  width: 44px;
  height: 44px;
  color: var(--ph-text-3);
  font: 900 17px var(--ph-font-display);
  background: #1a1a1e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
}

.ph-row__title {
  font: var(--ph-type-row-title);
  letter-spacing: var(--ph-track-row-title);
  text-transform: uppercase;
  color: var(--ph-text-1);
}

.ph-row__sub {
  font: 400 12.5px/1.4 var(--ph-font-body);
  color: var(--ph-text-5);
}

.ph-row__trail {
  color: var(--ph-text-8);
  flex: none;
}

.ph-notice {
  --c: var(--ph-cut-sm);
  background: rgba(255, 100, 95, 0.2);
  padding: 1px;
}

.ph-notice__inner {
  --c: var(--ph-cut-sm);
  background: #0e0e11;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
}

.ph-notice__dot {
  width: 8px;
  height: 8px;
  background: var(--tone, var(--ph-bad));
  box-shadow: 0 0 10px var(--tone, var(--ph-bad));
  flex: none;
  margin-top: 6px;
}

.ph-notice__title {
  font: 800 14.5px/1.3 var(--ph-font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ph-text-1);
}

.ph-notice__body {
  font: var(--ph-type-body);
  color: var(--ph-text-4);
}

/* Modals & Sheets */
.ph-scrim {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: var(--ph-scrim);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
}

.ph-sheet {
  background: var(--ph-surface-2);
  width: 100%;
  max-height: 85dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px 24px;
  border-top: 1px solid var(--ph-line-3);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85);
}

.ph-sheet__title {
  font: var(--ph-type-sheet-title);
  letter-spacing: var(--ph-track-sheet-title);
  text-transform: uppercase;
  font-size: 22px;
  color: var(--ph-text-1);
}

/* ==========================================================================
   TABBAR
   ========================================================================== */
.ph-tabbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ph-line-1);
  background: var(--ph-bg);
  padding: 0 10px 10px;
  z-index: 25;
}

.ph-tab {
  height: var(--ph-tabbar-h);
  color: #66666d;
  font: var(--ph-type-label);
  letter-spacing: var(--ph-track-label);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  position: relative;
  transition: color var(--ph-dur-fast);
}

.ph-tab[aria-selected="true"] {
  color: var(--ph-text-1);
}

.ph-tab[aria-selected="true"] svg {
  color: var(--ph-accent-text);
}

.ph-tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 34px;
  height: 2px;
  margin-left: -17px;
  background: var(--ph-accent);
  box-shadow: 0 0 12px var(--ph-accent);
}

/* Spinner */
.ph-spinner {
  width: var(--s, 16px);
  height: var(--s, 16px);
  border: 2px solid;
  border-top-color: transparent;
  border-radius: 50%;
  animation: 0.8s linear infinite ph-spin;
  display: inline-block;
}

@keyframes ph-spin {
  to { transform: rotate(360deg); }
}

/* Brand Picker Float */
.ph-brand-float {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 100;
  display: flex;
  gap: 6px;
  background: rgba(14, 14, 17, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--ph-line-3);
  padding: 5px 8px;
  border-radius: 999px;
}

.ph-brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
}

.ph-brand-dot:hover {
  transform: scale(1.15);
}

.ph-brand-dot[data-active="true"] {
  border-color: #fff;
  transform: scale(1.18);
}