:root {
  color-scheme: dark;
  --bg: #06100e;
  --panel: rgba(13, 27, 24, 0.82);
  --panel-strong: #10241f;
  --line: rgba(192, 231, 213, 0.12);
  --line-bright: rgba(154, 255, 210, 0.22);
  --text: #edf7f2;
  --muted: #8ca49b;
  --green: #68f0b2;
  --green-deep: #1dbf7a;
  --amber: #f8bd65;
  --red: #ff7b72;
  --radius: 18px;
  font-family: Inter, Pretendard, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(rgba(104, 240, 178, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 240, 178, 0.025) 1px, transparent 1px),
    var(--bg);
  background-size: 36px 36px;
}

.ambient { position: fixed; border-radius: 999px; filter: blur(100px); pointer-events: none; opacity: .12; }
.ambient-one { width: 520px; height: 520px; background: #32e69d; top: -260px; right: 8%; }
.ambient-two { width: 400px; height: 400px; background: #f2a93b; bottom: -260px; left: -180px; }
.shell { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 24px; position: relative; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.brand-block { display: flex; align-items: center; gap: 15px; }
.brand-mark { width: 42px; height: 42px; display: flex; align-items: end; justify-content: center; gap: 4px; padding: 9px; border: 1px solid var(--line-bright); border-radius: 12px; background: rgba(104,240,178,.06); }
.brand-mark span { width: 5px; border-radius: 3px; background: var(--green); box-shadow: 0 0 12px rgba(104,240,178,.4); }
.brand-mark span:nth-child(1) { height: 12px; }.brand-mark span:nth-child(2) { height: 24px; }.brand-mark span:nth-child(3) { height: 17px; }
.eyebrow, .panel-label { margin: 0 0 6px; color: var(--green); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
h2 { margin: 0; letter-spacing: -.03em; }
.status-pill { display: flex; gap: 9px; align-items: center; border: 1px solid var(--line); padding: 9px 13px; border-radius: 999px; color: var(--muted); font-size: 12px; background: rgba(9,20,18,.8); }.status-pill[hidden] { display: none !important; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(248,189,101,.09); }
.status-pill.ready .status-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(104,240,178,.09); }
.status-pill.error .status-dot { background: var(--red); }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(17,37,32,.9), rgba(8,19,17,.9)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 60px rgba(0,0,0,.13); }
.hero-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cpu-card, .meter-card { min-height: 196px; padding: 24px; }
.cpu-card h2 { font-size: clamp(20px, 2vw, 28px); max-width: 680px; }
.generation-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.divider { width: 3px; height: 3px; background: #547068; border-radius: 50%; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 0; }
.spec-grid div { padding: 0 15px; border-left: 1px solid var(--line); }.spec-grid div:first-child { padding-left: 0; border: 0; }
dt { color: var(--muted); font-size: 11px; margin-bottom: 5px; } dd { margin: 0; font-size: 17px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; }
.meter-head { display: flex; justify-content: space-between; align-items: flex-start; }
.meter-head strong { display: block; margin-top: 10px; font-size: 38px; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }.meter-head strong small { color: var(--muted); font-size: 16px; margin-left: 4px; }
.live-chip, .memory-detail { color: var(--muted); font-size: 10px; letter-spacing: .08em; }.live-chip i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 5px; background: var(--green); box-shadow: 0 0 8px var(--green); }
.bar-track { height: 3px; background: rgba(255,255,255,.06); border-radius: 9px; overflow: hidden; margin: 17px 0 10px; }.bar-fill { height: 100%; width: 0; border-radius: inherit; transition: width .5s ease; }.cpu-fill { background: var(--green); box-shadow: 0 0 12px var(--green); }.ram-fill { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
canvas { width: 100%; height: 56px; display: block; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(340px, .85fr); gap: 14px; }
.synthesis-panel, .load-panel { padding: 28px; min-height: 484px; }
.section-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 25px; }.section-head h2 { font-size: 23px; }
.voice-chip, .cache-chip { border: 1px solid var(--line-bright); color: var(--green); border-radius: 999px; font-size: 9px; letter-spacing: .1em; padding: 7px 10px; white-space: nowrap; }.cache-chip { color: var(--amber); border-color: rgba(248,189,101,.24); background: rgba(248,189,101,.04); }
.text-label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.text-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.text-label-row .text-label { margin: 0; }
.random-text-button { border: 1px solid var(--line-bright); border-radius: 8px; padding: 6px 10px; background: rgba(104,240,178,.045); color: var(--green); font-size: 10px; font-weight: 700; }
.random-text-button:hover { background: rgba(104,240,178,.1); }
.textarea-wrap { position: relative; }
textarea { width: 100%; min-height: 178px; resize: vertical; border: 1px solid var(--line); border-radius: 13px; background: rgba(3,12,10,.68); color: var(--text); padding: 18px 18px 34px; font: inherit; font-size: 16px; line-height: 1.75; outline: none; transition: border-color .2s, box-shadow .2s; }
textarea:focus { border-color: rgba(104,240,178,.42); box-shadow: 0 0 0 3px rgba(104,240,178,.06); }
.char-count { position: absolute; right: 14px; bottom: 12px; color: #617b72; font-size: 10px; font-variant-numeric: tabular-nums; }
.controls-row { display: flex; gap: 10px; margin-top: 12px; }.controls-row label { flex: 1; color: var(--muted); font-size: 10px; }
select, input { display: block; width: 100%; margin-top: 6px; height: 37px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5,15,13,.85); color: var(--text); padding: 0 10px; outline: none; }
.action-row { display: flex; gap: 20px; align-items: center; margin-top: 22px; }
button { font: inherit; cursor: pointer; }
.primary-button { min-width: 196px; height: 48px; border: 0; border-radius: 11px; background: var(--green); color: #052016; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 28px rgba(39,199,126,.16); transition: transform .18s, filter .18s; }.primary-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.primary-button.active { background: #263d36; color: var(--text); }.primary-button.playing { background: #8f2e2e; color: #fff1ef; box-shadow: 0 10px 28px rgba(255,77,77,.2); }.primary-button.playing .play-symbol { width: 11px; height: 11px; border: 0; background: currentColor; }.play-symbol { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.stream-state { display: flex; gap: 12px; align-items: center; min-width: 0; }.stream-state strong, .stream-state span { display: block; }.stream-state strong { font-size: 12px; }.stream-state span { color: var(--muted); font-size: 10px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.wave { display: flex; width: 42px; height: 28px; gap: 3px; align-items: center; justify-content: center; }.wave i { width: 2px; height: 5px; border-radius: 2px; background: var(--green); }.wave.active i { animation: wave 760ms ease-in-out infinite alternate; }.wave i:nth-child(2),.wave i:nth-child(6){animation-delay:-.2s}.wave i:nth-child(3),.wave i:nth-child(5){animation-delay:-.4s}.wave i:nth-child(4){animation-delay:-.6s}@keyframes wave{to{height:24px}}
.warning { color: var(--amber); }.load-description { color: var(--muted); font-size: 12px; line-height: 1.7; margin: -8px 0 24px; }
.throughput-hero { padding: 19px 20px; border: 1px solid rgba(248,189,101,.16); border-radius: 13px; background: linear-gradient(120deg, rgba(248,189,101,.08), rgba(248,189,101,.015)); }.throughput-hero > span { display:block;color:#bfae91;font-size:10px; }.throughput-hero strong { display:block;margin-top:6px;font-size:38px;color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.05em; }.throughput-hero small { font-size: 12px; color: var(--muted); letter-spacing: 0; }
.load-stats { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:12px 0; }.load-stats div{background:#0b1b17;padding:13px 14px}.load-stats span{display:block;color:var(--muted);font-size:9px}.load-stats strong{font-size:19px;margin-right:4px;font-variant-numeric:tabular-nums}.load-stats small{font-size:8px;color:#617b72}
.load-progress { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.05); margin: 20px 0 14px; }.load-progress span { display: block; height: 100%; width: 38%; background: var(--amber); opacity: 0; }.load-progress.active span { opacity: 1; animation: scan 1.2s ease-in-out infinite; }@keyframes scan{from{transform:translateX(-110%)}to{transform:translateX(300%)}}
.load-button { width:100%;height:45px;border-radius:10px;border:1px solid rgba(248,189,101,.3);background:rgba(248,189,101,.07);color:var(--amber);font-weight:750; }.load-button:hover:not(:disabled){background:rgba(248,189,101,.12)}.load-button.running{color:#ff8f87;border-color:rgba(255,123,114,.28);background:rgba(255,123,114,.06)}.load-button:disabled{cursor:not-allowed;opacity:.4}
.load-note { text-align:center;color:#5d746c;font-size:9px;margin:10px 0 0; }.toast{position:fixed;right:22px;bottom:22px;max-width:400px;padding:13px 16px;border-radius:11px;background:#2d1716;border:1px solid rgba(255,123,114,.26);color:#ffd5d2;font-size:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}
footer{display:flex;justify-content:space-between;color:#4f6760;font-size:9px;letter-spacing:.08em;margin-top:16px;padding:0 4px}
.ghost-button,.secondary-button,.danger-button{height:37px;border-radius:9px;padding:0 13px;font-size:11px;font-weight:750;transition:.18s;}
.ghost-button{border:1px solid var(--line);background:rgba(5,15,13,.6);color:var(--muted);}.ghost-button:hover{border-color:var(--line-bright);color:var(--text);background:rgba(104,240,178,.06)}
.secondary-button{border:1px solid var(--line-bright);background:rgba(104,240,178,.07);color:var(--green);}.secondary-button:hover{background:rgba(104,240,178,.14)}
.danger-button{border:1px solid rgba(255,123,114,.28);background:rgba(255,123,114,.06);color:#ff9e97;}.danger-button:hover{background:rgba(255,123,114,.13)}
.small-button{height:31px;padding:0 10px;font-size:10px;}
.docs-panel,.admin-panel{margin-top:14px;padding:28px;scroll-margin-top:20px;}
.docs-lead{margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.7;}.docs-lead code,.docs-content code{color:var(--green);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.docs-content{display:grid;gap:20px;}.endpoint-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.endpoint-card{padding:17px;border:1px solid var(--line);border-radius:12px;background:rgba(4,14,12,.55)}.endpoint-title{display:flex;align-items:center;gap:9px}.endpoint-title code{font-size:13px}.endpoint-card p{margin:11px 0;color:var(--muted);font-size:12px;line-height:1.6}.endpoint-kind{font-size:10px;color:var(--amber)}.method-badge{padding:4px 6px;border-radius:5px;background:rgba(104,240,178,.1);color:var(--green);font:800 9px ui-monospace,monospace;}
.docs-block{padding-top:18px;border-top:1px solid var(--line)}.docs-block h3,.admin-card h3,.key-list-head h3{margin:0 0 12px;font-size:15px}.docs-block p{color:var(--muted);font-size:12px;line-height:1.7}.muted-copy{color:var(--muted);font-size:11px;line-height:1.6}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}table{width:100%;border-collapse:collapse;min-width:650px;font-size:11px}th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-weight:600;background:rgba(4,14,12,.65)}td{color:var(--text)}tr:last-child td{border-bottom:0}pre{margin:12px 0 0;overflow:auto;padding:15px;border:1px solid var(--line);border-radius:10px;background:#030b09;color:#bfe9d5;font:11px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.response-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.response-grid>div{padding:15px;border:1px solid var(--line);border-radius:10px;background:rgba(4,14,12,.45)}.response-grid h4{margin:0 0 8px;font-size:13px}.response-headers{display:flex;flex-wrap:wrap;gap:5px}.response-headers code{padding:4px 6px;border:1px solid var(--line);border-radius:5px;font-size:9px}.error-heading{margin:18px 0 0!important;color:var(--muted)}
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:rgba(4,14,12,.55)}.admin-card .primary-button,.admin-card .secondary-button{margin-top:8px}.issued-key{display:flex;align-items:center;gap:16px;margin-top:14px;padding:16px;border:1px solid rgba(104,240,178,.25);border-radius:12px;background:rgba(104,240,178,.055)}.issued-key>div{min-width:175px}.issued-key strong{font-size:12px}.issued-key code{flex:1;overflow:auto;color:var(--green);font:12px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.key-list-head{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.api-key-list{display:grid;gap:7px}.api-key-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border:1px solid var(--line);border-radius:10px;background:rgba(4,14,12,.45)}.api-key-row>div:first-child{display:grid;gap:4px;min-width:0}.api-key-row strong{font-size:12px}.api-key-row span{color:var(--green);font:11px ui-monospace,monospace}.api-key-row small{color:var(--muted);font-size:10px}.api-key-actions{display:flex;gap:6px;flex:none}
.auth-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:rgba(6,16,14,.94)}
.auth-gate[hidden]{display:none}
.auth-card{width:min(420px,100%);padding:32px 28px}
.auth-card h1{margin-bottom:10px}
.auth-copy{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.6}
.auth-tabs{display:flex;gap:4px;margin:0 0 19px;padding:4px;border:1px solid var(--line);border-radius:10px;background:rgba(3,12,10,.6)}.auth-tab{flex:1;height:33px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:11px;font-weight:700}.auth-tab.active{background:rgba(104,240,178,.12);color:var(--green)}
.auth-card .text-label{margin-bottom:18px}
.auth-card .primary-button{width:100%}
.auth-error{margin:-6px 0 16px;color:var(--red);font-size:12px}
@media(max-width:1050px){.hero-grid{grid-template-columns:1fr 1fr}.cpu-card{grid-column:1/-1}.workspace-grid{grid-template-columns:1fr}.load-panel{min-height:0}.endpoint-grid,.admin-grid,.response-grid{grid-template-columns:1fr}}
@media(max-width:680px){.shell{width:min(100% - 24px,1480px);padding-top:20px}.topbar{align-items:flex-start;flex-wrap:wrap}.topbar-actions{width:100%;margin:0}.topbar-actions .ghost-button{flex:1}.status-pill{padding:8px}.hero-grid{grid-template-columns:1fr}.cpu-card,.meter-card,.synthesis-panel,.load-panel,.docs-panel,.admin-panel{padding:20px}.spec-grid{grid-template-columns:1fr 1fr;gap:18px}.spec-grid div:nth-child(3){padding-left:0;border:0}.controls-row{flex-wrap:wrap}.controls-row label{min-width:100px}.action-row{align-items:stretch;flex-direction:column}.primary-button{width:100%}.section-head{margin-bottom:18px}.voice-chip{display:none}.stream-state span{white-space:normal}.brand-block h1{font-size:20px}.issued-key{align-items:stretch;flex-direction:column}.issued-key>div{min-width:0}.api-key-row{align-items:stretch;flex-direction:column}.api-key-actions{width:100%}.api-key-actions button{flex:1}}