:root {
  --bg-main: #0a0b10;
  --surface-panel: rgba(20, 22, 35, .72);
  --accent-idle: #4f46e5;
  --accent-active: #06b6d4;
  --accent-process: #8b5cf6;
  --accent-error: #ef4444;
  --text-primary: #f9fafb;
  --text-muted: #aeb6c6;
}

html { scroll-behavior: smooth; }
body { background: var(--bg-main); }
.stage {
  background:
    linear-gradient(rgba(89, 98, 157, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 98, 157, .035) 1px, transparent 1px),
    radial-gradient(circle at 72% 21%, rgba(54, 52, 120, .27), transparent 34%),
    radial-gradient(circle at 11% 83%, rgba(8, 94, 108, .14), transparent 34%),
    var(--bg-main);
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}
#orb { opacity: .46; mask-image: radial-gradient(ellipse 54% 53% at 62% 43%, #000 35%, transparent 100%); }
.app { padding-inline: max(22px, env(safe-area-inset-left)); }
.top { width: min(1400px, 100%); min-height: 68px; border-bottom: 1px solid rgba(217, 222, 255, .09); }
.brand { gap: 12px; }
.brand-mark { width: 43px; height: 43px; border-radius: 14px; border-color: rgba(105, 116, 255, .46); background: linear-gradient(145deg, rgba(79, 70, 229, .52), rgba(16, 23, 42, .9)); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 0 32px rgba(79,70,229,.18); }
.brand strong { letter-spacing: .09em; }
.brand small { color: #a5b2cc; }
.state { border-color: rgba(108, 126, 177, .33); background: rgba(12, 17, 31, .87); }
.glass { border-color: rgba(134, 148, 194, .18); background: var(--surface-panel); box-shadow: 0 22px 80px rgba(0, 0, 0, .22), inset 0 1px rgba(255,255,255,.025); }
.button { transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.button:active, .shortcut:active, .nav button:active { transform: translateY(1px); }
.button.primary { background: #544bdc; box-shadow: 0 8px 25px rgba(64, 55, 185, .2); }
.button.primary:hover { background: #655deb; }
.center { width: min(1340px, 100%); gap: clamp(28px, 6vw, 110px); }
.hero { position: relative; padding-block: clamp(35px, 8vh, 95px); }
.hero::before { content: ""; position: absolute; width: 270px; height: 270px; top: -30px; left: -100px; border: 1px solid rgba(113, 112, 243, .15); border-radius: 50%; box-shadow: 0 0 0 35px rgba(103, 100, 220, .025), 0 0 0 70px rgba(103, 100, 220, .018); pointer-events: none; }
.hero h1 { max-width: 660px; font-size: clamp(42px, 5.5vw, 76px); line-height: 1.02; }
.hero p { max-width: 520px; font-size: 16px; }
.eyebrow { letter-spacing: .14em; }
.gate { padding: clamp(25px, 3vw, 38px); border-radius: 26px; }
.gate h2 { font-size: clamp(24px, 2.3vw, 31px); }
.gate form { gap: 16px; }
.gate .button.primary { min-height: 51px; }
.workspace { width: min(1400px, 100%); grid-template-columns: 214px minmax(0, 1fr); gap: 22px; padding-top: 30px; }
.nav { position: sticky; top: 20px; align-self: start; gap: 6px; padding: 13px; border-radius: 20px; }
.nav button { display: flex; align-items: center; gap: 13px; min-height: 49px; font-size: 14px; font-weight: 550; transition: color .18s ease, background-color .18s ease; }
.nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav button[aria-current="true"], .nav button[aria-current="page"] { background: rgba(79, 70, 229, .25); border-color: rgba(127, 123, 247, .49); }
.nav-icon { display: inline-grid; place-items: center; width: 22px; font-size: 20px; line-height: 1; color: #98a4d5; }
.nav button[aria-current="true"] .nav-icon, .nav button[aria-current="page"] .nav-icon { color: #d8d7ff; }
.panel { border-radius: 22px; padding: clamp(22px, 3vw, 35px); }
.owner-hero { min-height: 255px; display: grid; grid-template-columns: minmax(0,1fr) 230px; align-items: center; gap: 20px; padding: clamp(20px,3vw,35px); border: 1px solid rgba(129, 131, 240, .27); border-radius: 20px; background: radial-gradient(circle at 81% 38%, rgba(105, 98, 219, .17), transparent 28%), linear-gradient(135deg, rgba(41, 40, 86, .5), rgba(14, 22, 39, .5)); }
.owner-hero h1 { margin: 0; font: 600 clamp(32px, 4.4vw, 54px)/1.05 "Space Grotesk", Inter, sans-serif; letter-spacing: -.04em; }
.owner-hero h1 span { color: #c8c5ff; }
.owner-hero p:not(.eyebrow) { max-width: 550px; margin: 14px 0 0; color: #c6cede; font-size: 14px; line-height: 1.65; }
.hero-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.hero-actions .button { min-height: 45px; }
.hero-orbit { position: relative; display: grid; place-items: center; width: 212px; height: 212px; margin: auto; border-radius: 50%; border: 1px solid rgba(128, 130, 255, .42); box-shadow: 0 0 0 19px rgba(104, 108, 224, .04), 0 0 0 42px rgba(95, 104, 220, .025), inset 0 0 30px rgba(99, 101, 248, .07); transform: rotate(-12deg); }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; inset: 28px; border: 1px dashed rgba(128, 153, 245, .26); border-radius: 50%; }
.hero-orbit::after { inset: 59px; border-style: solid; }
.hero-orbit-core { display: grid; place-items: center; width: 86px; height: 86px; border: 1px solid rgba(198, 197, 255, .32); border-radius: 31px; background: linear-gradient(145deg, #5750d6, #1b2551); box-shadow: 0 15px 34px rgba(51,47,159,.32), inset 0 1px rgba(255,255,255,.2); font: 600 44px "Space Grotesk", sans-serif; transform: rotate(12deg); }
.hero-orbit span { position: absolute; bottom: 9px; padding: 5px 9px; border-radius: 6px; background: #151a2d; color: #b8c6e8; font-size: 9px; letter-spacing: .14em; transform: rotate(12deg); }
.welcome { max-width: none; margin-top: 18px; border: 0; background: transparent; padding: 4px 0 0; }
.welcome h2 { margin-bottom: 4px; font-size: 20px; }
.welcome > p { margin-top: 0; }
.home-grid { gap: 13px; margin-top: 18px; }
.home-card { position: relative; min-height: 172px; overflow: hidden; border-color: rgba(117, 134, 176, .2); background: linear-gradient(140deg, rgba(28, 36, 58, .8), rgba(19, 23, 40, .7)); padding: 20px; }
.home-card::before { content: ""; position: absolute; top: 0; left: 20px; width: 45px; height: 2px; background: #766ff4; }
.home-card:nth-child(4)::before { background: #25b9cf; }
.home-card h3 { font-size: 17px; }
.home-card p { max-width: 38ch; }
.home-card .button { margin-top: auto; }
.heading h1 { font-size: clamp(27px, 3.6vw, 39px); }
.heading p { max-width: 68ch; font-size: 14px; }
#chatView { min-height: 600px; }
body[data-view="zee"] #chatView, .guest #chatView { display: grid; grid-template-columns: minmax(195px, 244px) minmax(0, 1fr); grid-template-rows: auto minmax(0,1fr) auto auto auto; column-gap: 19px; }
body[data-view="zee"] #chatView > .heading, .guest #chatView > .heading { grid-column: 1 / -1; }
body[data-view="zee"] #chatView > .shortcuts, .guest #chatView > .shortcuts { grid-column: 1; grid-row: 2 / 6; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; align-self: stretch; margin: 0; padding: 17px; border: 1px solid rgba(126, 144, 191, .18); border-radius: 16px; background: rgba(11, 19, 33, .63); }
.shortcuts-label { margin: 0 0 3px; color: #aeb9d8; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.shortcuts .field { flex: 0 0 auto; width: 100%; }
.shortcuts .level-choice { display: grid; gap: 7px; color: #dbe2f1; font-size: 13px; }
.shortcuts .level-choice .field { min-width: 0; }
.shortcuts .level-note { flex: 0 0 auto; margin: 0 0 8px; color: #a9b6cb; font-size: 12px; line-height: 1.5; }
.shortcuts .shortcut { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 11px; text-align: left; font-size: 13px; line-height: 1.35; background: rgba(34, 45, 70, .59); }
.shortcuts .shortcut:hover { border-color: rgba(85, 199, 222, .7); background: rgba(35, 74, 89, .35); }
.shortcuts .button.listen { width: 100%; min-height: 52px; border-color: rgba(6, 182, 212, .52); background: rgba(6, 128, 151, .27); color: #edfcff; font-weight: 700; }
.shortcuts .button.listen:hover { background: rgba(6, 128, 151, .38); }
body[data-view="zee"] #chatView > .chat-log, .guest #chatView > .chat-log { grid-column: 2; grid-row: 2; }
body[data-view="zee"] #chatView > .compose, .guest #chatView > .compose { grid-column: 2; grid-row: 3; }
body[data-view="zee"] #chatView > .tools, .guest #chatView > .tools { grid-column: 2; grid-row: 4; }
body[data-view="zee"] #chatView > #voiceStatus, .guest #chatView > #voiceStatus { grid-column: 2; grid-row: 5; }
.chat-log { height: min(52svh, 570px); min-height: 290px; margin-bottom: 10px; padding: 15px; border: 1px solid rgba(125, 142, 187, .2); border-radius: 16px; background: rgba(10, 17, 30, .68); scrollbar-color: #4e5879 transparent; }
.bubble { max-width: min(90%, 760px); padding: 13px 16px; border-color: rgba(114, 131, 173, .25); border-radius: 14px 14px 14px 4px; background: #202638; color: #f0f3f9; font-size: 15px; line-height: 1.7; }
.bubble.user { border-radius: 14px 14px 4px 14px; background: #302b69; }
.compose { border-color: rgba(125, 142, 187, .2); }
.compose textarea.field { min-height: 62px; font-size: 15px; background: #0d1424; }
.compose .button { min-width: 96px; }
.tools { gap: 9px; }
.tools .button, .tools .field { min-height: 45px; }
.tools #voiceSelect { display: none; }
.tools #replayButton:not([hidden]) { border-color: rgba(14, 173, 203, .55); color: #e0fbff; background: rgba(11, 98, 115, .22); }
.tools .switch { font-size: 13px; }
.usage-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.usage-card { min-width: 0; }
.footer { width: min(1400px, 100%); }
.guest .center { width: min(1120px, 100%); }
.guest .hero h1 { max-width: 650px; }
.guest .hero, .guest .heading, .guest .shortcuts, .guest .bubble, .guest .gate { font-family: "Myanmar Text", "Noto Sans Myanmar", "Pyidaungsu", Inter, sans-serif; }
.guest .heading h1 { font-family: "Myanmar Text", "Noto Sans Myanmar", "Pyidaungsu", sans-serif; line-height: 1.35; letter-spacing: 0; }
.guest .gate { border-color: rgba(33, 187, 209, .24); }
.guest .brand-mark { border-color: rgba(22, 184, 208, .48); background: linear-gradient(145deg, rgba(6,182,212,.4), rgba(21,34,64,.8)); }
.guest .shortcut:first-of-type { border-color: rgba(31, 179, 199, .45); }
.guest .workspace { width: min(1220px, calc(100vw - 36px)) !important; max-width: min(1220px, calc(100vw - 36px)) !important; }
.guest #chatView { width: 100%; }
.guest .heading p, .guest .bubble, .guest .footer, .guest .gate p { word-break: normal; overflow-wrap: anywhere; }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace-extra { grid-column: 1; }
  .nav { position: relative; top: 0; display: flex; width: 100%; overflow-x: auto; }
  .nav button { flex: 1 0 auto; }
  .usage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .center { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .hero { padding: 32px 0 10px; }
  .hero h1 { font-size: clamp(36px, 8vw, 53px); }
  .owner-hero { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .hero-orbit { display: none; }
  body[data-view="zee"] #chatView, .guest #chatView { display: block; }
  body[data-view="zee"] #chatView > .shortcuts, .guest #chatView > .shortcuts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 13px; margin-bottom: 13px; }
  .shortcuts-label, .shortcuts .level-note { flex-basis: 100%; }
  .shortcuts > .field, .shortcuts > .level-choice { flex: 1 1 100%; }
  .shortcuts .shortcut { flex: 1 1 29%; width: auto; }
  .shortcuts .button.listen { flex: 1 1 100%; }
  .chat-log { height: min(43svh, 480px); }
  .usage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 540px) {
  .app { padding-inline: max(12px, env(safe-area-inset-left)); padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .guest .app { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .top { min-height: 58px; }
  .center { padding-block: 7px 18px; }
  .hero { padding: 16px 0 4px; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero p { font-size: 13px; }
  .gate { padding: 19px; }
  .workspace { padding-top: 12px; }
  .nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; top: auto; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 8px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); border-radius: 19px 19px 0 0; background: rgba(15, 19, 31, .96); }
  .nav button { display: grid; justify-items: center; align-content: center; min-width: 0; min-height: 55px; gap: 3px; padding: 4px 1px; font-size: 10px; line-height: 1.1; text-align: center; }
  .nav-icon { width: auto; font-size: 19px; }
  .panel { padding: 15px; border-radius: 17px; }
  .owner-hero { padding: 22px 17px; }
  .owner-hero h1 { font-size: 37px; }
  .hero-actions .button { flex: 1 1 100%; }
  .home-grid { grid-template-columns: minmax(0,1fr); }
  .home-card { min-height: 155px; }
  #chatView { min-height: 0; }
  .heading { margin-bottom: 12px; }
  .shortcuts .shortcut { flex: 1 1 calc(50% - 5px); }
  .shortcuts .shortcut:first-of-type { flex-basis: 100%; }
  .chat-log { min-height: 220px; height: 34svh; padding: 9px; }
  .chat-log:has(> .bubble:only-child) { min-height: 145px; height: 145px; }
  .bubble { max-width: 97%; padding: 11px 13px; font-size: 14px; }
  .compose .button { min-height: 46px; }
  .tools .button, .tools .field { flex: 1 1 calc(50% - 5px); }
  .tools .switch { flex-basis: 100%; }
  .usage-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .guest .workspace { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}