html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#11161b; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
#renderCanvas { width:100%; height:100%; display:block; outline:none; }
#hud { position:fixed; left:18px; top:16px; color:#fff; pointer-events:none; text-shadow:0 2px 12px rgba(0,0,0,.42); }
.brand { font-weight:950; letter-spacing:.02em; font-size:20px; margin-bottom:10px; }
.brand span { font-weight:750; color:#d7e0cd; font-size:12px; margin-left:6px; opacity:.82; }
.model-load-notice { pointer-events:auto; width:340px; margin:0 0 10px; padding:12px 13px; border:1px solid rgba(196,255,123,.34); border-radius:15px; background:rgba(11,20,16,.94); box-shadow:0 16px 38px rgba(0,0,0,.38), inset 0 0 30px rgba(151,221,111,.04); backdrop-filter:blur(15px); transition:opacity .35s, transform .35s, max-height .35s, margin .35s, padding .35s, border-color .25s; overflow:hidden; max-height:260px; }
.model-load-notice.hidden { opacity:0; transform:translateY(-8px); max-height:0; margin:0; padding-top:0; padding-bottom:0; border-width:0; pointer-events:none; }
.model-load-notice.ready { border-color:rgba(139,239,174,.48); }
.model-load-notice.error { border-color:rgba(255,119,102,.58); }
.model-load-head { display:flex; align-items:center; gap:9px; }
.model-load-head > div { flex:1; min-width:0; display:flex; flex-direction:column; }
.model-load-head strong { font-size:12px; color:#efffe8; }
.model-load-head small { margin-top:1px; color:#9fb19f; font:9px/1.3 ui-monospace,monospace; text-shadow:none; }
.model-load-icon { width:10px; height:10px; flex:0 0 10px; border:2px solid rgba(215,255,154,.28); border-top-color:#d7ff9a; border-radius:50%; animation:model-spin .8s linear infinite; }
.ready .model-load-icon { border:0; background:#82e6a3; box-shadow:0 0 12px rgba(130,230,163,.8); animation:none; }
.error .model-load-icon { border:0; background:#ff7766; box-shadow:0 0 12px rgba(255,119,102,.7); animation:none; }
.consent .model-load-icon { border:0; background:#d7ff9a; box-shadow:0 0 14px rgba(215,255,154,.62); animation:none; }
#dismissModelLoad { display:none; flex:0 0 25px; width:25px; height:25px; padding:0; border-radius:50%; background:rgba(255,255,255,.08); color:#c9d4c6; font:18px/1 sans-serif; }
.ready #dismissModelLoad, .error #dismissModelLoad, .declined #dismissModelLoad { display:block; }
.model-progress-track { height:5px; margin-top:10px; border-radius:99px; background:rgba(255,255,255,.10); overflow:hidden; }
.consent .model-progress-track, .declined .model-progress-track { display:none; }
#modelProgressBar { display:block; width:18%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7cdcb1,#d7ff9a); transition:width .3s ease; animation:model-indeterminate 1.5s ease-in-out infinite; }
.determinate #modelProgressBar { animation:none; }
.ready #modelProgressBar { width:100% !important; animation:none; }
.error #modelProgressBar { width:100% !important; background:#ff7766; animation:none; }
#modelLoadText { margin:7px 0 0; color:#dce9d3; font:10px/1.35 ui-monospace,monospace; text-shadow:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.consent #modelLoadText { display:none; }
.model-consent[hidden] { display:none; }
.model-consent { margin-top:10px; animation:consent-rise .28s ease-out both; }
.model-consent p { margin:0 0 9px; color:#eff9e9; font:11px/1.45 ui-sans-serif,system-ui,sans-serif; text-shadow:none; }
.model-consent p strong { display:block; margin-bottom:2px; font-size:13px; color:#fff; }
.model-consent p b { color:#d7ff9a; }
.model-consent-facts { display:flex; gap:6px; margin-bottom:10px; color:#aebead; font:9px/1.3 ui-monospace,monospace; text-shadow:none; }
.model-consent-facts span { flex:1; padding:6px; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:rgba(255,255,255,.035); }
.model-consent-actions { display:flex; gap:7px; }
#approveModelDownload { flex:1.45; color:#112016; background:linear-gradient(135deg,#d7ff9a,#78dbad); box-shadow:0 5px 18px rgba(120,219,173,.18); }
#approveModelDownload:hover { background:linear-gradient(135deg,#e4ffb9,#96e8c2); }
#declineModelDownload { flex:.75; color:#bec9ba; background:rgba(255,255,255,.08); }
@keyframes model-spin { to { transform:rotate(360deg); } }
@keyframes model-indeterminate { 0% { transform:translateX(-110%); } 50% { transform:translateX(230%); } 100% { transform:translateX(510%); } }
@keyframes consent-rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.panel { pointer-events:auto; width:340px; max-height:calc(100vh - 60px); overflow-y:auto; background:rgba(16,20,25,.62); border:1px solid rgba(255,255,255,.15); box-shadow:0 18px 48px rgba(0,0,0,.34); backdrop-filter: blur(14px); border-radius:20px; padding:10px; }

.recordbar { display:grid; grid-template-columns:1fr 1.45fr; gap:7px; align-items:center; margin-bottom:8px; padding:8px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(0,0,0,.22); }
.recordbar button { padding:8px 7px; font-size:11px; }
#startRecording { background:rgba(190,45,48,.62); }
#startRecording.recording { background:rgba(235,52,58,.82); box-shadow:0 0 0 2px rgba(255,105,105,.22),0 0 18px rgba(255,40,40,.25); }
#recordingStatus { grid-column:1 / -1; font:10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#dce9d3; text-align:center; text-shadow:none; }
.apng-state-drop { margin:9px 0; padding:11px 9px; border:1px dashed rgba(157,220,190,.55); border-radius:10px; background:rgba(18,45,35,.42); text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:3px; outline:none; }
.apng-state-drop:hover, .apng-state-drop:focus, .apng-state-drop.dragover { border-color:#b9f3d3; background:rgba(34,78,59,.60); box-shadow:0 0 0 2px rgba(125,225,175,.12); }
.apng-state-drop strong { color:#e7fff0; font-size:12px; }
.apng-state-drop span { color:#c8ddce; font-size:11px; }
.apng-state-drop small { color:#91aa99; font:9px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.apng-state-drop.loading { opacity:.68; pointer-events:none; }

.panel-section { margin-bottom:6px; border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:8px 10px; background:rgba(0,0,0,.15); }
.panel-section > summary { font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; opacity:.85; list-style:none; display:flex; align-items:center; gap:6px; user-select:none; }
.panel-section > summary::before { content:'\25BC'; font-size:9px; transition:transform .2s; }
.panel-section:not([open]) > summary::before { transform:rotate(-90deg); }
.panel-section > summary::-webkit-details-marker { display:none; }
.panel-section[open] > summary { margin-bottom:8px; }
.section-subtitle { font-size:10px; text-transform:uppercase; letter-spacing:.10em; opacity:.65; font-weight:900; margin:6px 0 5px; }

.row { display:flex; gap:7px; margin-bottom:7px; }
button { border:0; background:rgba(255,255,255,.13); color:#fff; border-radius:10px; padding:8px 10px; font-weight:850; cursor:pointer; flex:1; }
button:hover { background:rgba(255,255,255,.24); transform:translateY(-1px); }
button:disabled { opacity:.32; cursor:not-allowed; transform:none; }
.custom-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px; }
.custom-grid label { font-size:11px; font-weight:850; color:#eaf2df; display:flex; flex-direction:column; gap:4px; }
select, input[type="range"] { accent-color:#d7ff9a; border:1px solid rgba(255,255,255,.18); color:#fff; background:rgba(0,0,0,.28); border-radius:10px; padding:7px; font-weight:800; }
#allowedCommands { display:flex; flex-wrap:wrap; gap:6px; }
.cmdcheck { font-size:11px; font-weight:850; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); padding:5px 7px; border-radius:999px; display:flex; align-items:center; gap:4px; }

#log { max-height:200px; overflow-y:auto; font-size:11px; opacity:.94; }
.logline { background:rgba(0,0,0,.32); border-left:3px solid rgba(175,225,160,.9); padding:6px 9px; margin-bottom:5px; border-radius:8px; }

#hint { position:fixed; right:20px; bottom:18px; max-width:520px; color:#e8f1e4; background:rgba(16,20,25,.58); border:1px solid rgba(255,255,255,.14); border-radius:17px; padding:11px 15px; font-size:13px; backdrop-filter: blur(10px); box-shadow:0 10px 28px rgba(0,0,0,.25); }
code { color:#ffe0a0; }
.bubble { position:absolute; transform:translate(-50%, -100%); background:#fff6dc; color:#2a241c; border:2px solid rgba(40,30,20,.24); border-radius:16px; padding:7px 10px; font-weight:950; pointer-events:none; white-space:nowrap; box-shadow:0 10px 18px rgba(0,0,0,.25); }
.badge { position:absolute; transform:translate(-50%, -50%); color:#fff6dc; font-weight:950; font-size:13px; text-shadow:0 2px 8px #000; pointer-events:none; }

.perception-controls { display:flex; gap:7px; align-items:end; margin-bottom:7px; }
.perception-controls label { flex:1; font-size:11px; font-weight:850; color:#eaf2df; display:flex; flex-direction:column; gap:4px; }
.perception-controls button { flex:0 0 72px; padding:7px 8px; }
#promptOut { width:calc(100% - 14px); min-height:80px; max-height:300px; overflow:auto; margin:0; padding:7px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:rgba(4,7,9,.46); color:#e9f6df; font: 10px/1.28 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-shadow:none; white-space:pre-wrap; word-break:break-word; }

.turnbar { display:flex; align-items:center; gap:8px; margin-bottom:8px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:7px; }
.turnbar label { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:900; color:#ecf7df; white-space:nowrap; }
#turnStatus { flex:1; font-size:11px; font-weight:900; color:#ffe1a8; text-align:center; }
#settleNow { flex:0 0 72px; padding:7px 8px; }

.brainbar { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:7px; align-items:center; }
.brainbar button { padding:8px 9px; }
#brainStatus { font-size:11px; font-weight:850; color:#ffe1a8; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.11); border-radius:12px; padding:7px 9px; margin-bottom:8px; }
.setup-row button { min-width:0; }
.personality-label { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:850; color:#eaf2df; margin:7px 0 8px; }
#agentPersonality, #agentQuest, #agentGoal { width:calc(100% - 16px); resize:vertical; border:1px solid rgba(255,255,255,.18); color:#fff; background:rgba(0,0,0,.28); border-radius:10px; padding:8px; font: 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.custom-grid input[type="checkbox"] { width:18px; height:18px; accent-color:#d7ff9a; }

.cache-controls { display:flex; gap:7px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.cache-backend-label { font-size:11px; display:flex; gap:4px; align-items:center; }
.cache-backend-label select { padding:3px 5px; font-size:11px; }
#clearCache { padding:5px 8px; font-size:11px; }
#cacheStatus { font-size:10px; color:#aaa; }
.danger-btn { background:rgba(220,60,60,.32) !important; border:1px solid rgba(255,80,80,.4) !important; }
.danger-btn:hover { background:rgba(240,80,80,.5) !important; }
.clear-history-btn { width:100%; margin:-1px 0 8px; padding:7px 9px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); color:#dce9d7; font-size:11px; }
.clear-history-btn:hover { background:rgba(255,255,255,.16); }

.spawn-panel { display:flex; flex-direction:column; gap:7px; margin-bottom:8px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px; }
.spawn-mode-toggle { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:850; color:#eaf2df; cursor:pointer; }
.spawn-mode-toggle input { width:18px; height:18px; accent-color:#d7ff9a; }
.spawn-panel select { width:100%; }
.spawn-panel select option { background:#1a1f25; color:#fff; }
.chat-input-section { margin-bottom: 8px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 8px; }
.chat-name-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 850; color: #eaf2df; margin-bottom: 6px; }
.chat-name-label input { flex: 1; border: 1px solid rgba(255,255,255,.18); color: #fff; background: rgba(0,0,0,.28); border-radius: 10px; padding: 6px 8px; font-weight: 800; font-size: 11px; }
.chat-send-row { display: flex; gap: 6px; }
.chat-send-row input { flex: 1; border: 1px solid rgba(255,255,255,.18); color: #fff; background: rgba(0,0,0,.28); border-radius: 10px; padding: 7px 8px; font-size: 12px; }
.chat-send-row button { flex: 0 0 60px; padding: 7px 8px; }

#compassHud { position:fixed; right:18px; top:18px; width:76px; height:76px; border:1px solid #b9d3a7; border-radius:50%; background:rgba(12,20,15,.78); z-index:30; pointer-events:none; box-shadow:0 2px 14px #0008; color:#dce8d4; font:700 12px/1 system-ui,sans-serif; }
#compassHud::after { content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; transform:translate(-50%,-50%); border-radius:50%; background:#dce8d4; }
#compassHud span { position:absolute; left:50%; top:50%; width:16px; text-align:center; transform-origin:center; color:#dce8d4; }
#compassHud .compass-n { color:#ff826f; }
#compassHud small { position:absolute; right:0; top:82px; width:170px; padding:5px 7px; border-radius:5px; background:rgba(12,20,15,.78); font:600 10px/1.2 ui-monospace,monospace; text-align:right; color:#dce8d4; }