/* ==========================================================================
   DJINN — design system
   ========================================================================== */
:root {
  --bg: #07060f;
  --bg-2: #0d0b1a;
  --surface: rgba(22, 19, 42, 0.62);
  --surface-2: rgba(34, 29, 64, 0.55);
  --border: rgba(167, 139, 250, 0.14);
  --border-strong: rgba(167, 139, 250, 0.32);
  --text: #ece9fb;
  --text-dim: #a29cc4;
  --text-mute: #6f6992;
  --violet: #a78bfa;
  --violet-deep: #7c3aed;
  --cyan: #7dd3fc;
  --gold: #f5b84b;
  --ember: #fb7185;
  --mint: #5eead4;
  --grad: linear-gradient(120deg, #a78bfa 0%, #7dd3fc 50%, #f5b84b 100%);
  --grad-btn: linear-gradient(135deg, #7c3aed 0%, #6366f1 55%, #0ea5e9 100%);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border);
  --font: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: "Outfit", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 800px at 15% -10%, #1b1340 0%, transparent 60%),
              radial-gradient(900px 700px at 110% 110%, #2a1a10 0%, transparent 55%), var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: rgba(167, 139, 250, 0.35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Aurora background */
.aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; filter: blur(80px); opacity: 0.55; }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: drift 26s var(--ease) infinite alternate; }
.aurora span:nth-child(1) { width: 520px; height: 520px; background: #4c1d95; top: -120px; left: 18%; }
.aurora span:nth-child(2) { width: 420px; height: 420px; background: #0c4a6e; bottom: -140px; right: 22%; animation-delay: -8s; }
.aurora span:nth-child(3) { width: 300px; height: 300px; background: #78350f; top: 40%; right: -80px; animation-delay: -15s; opacity: 0.7; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 40px) scale(1.15); } }

.glass {
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Layout */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 268px 1fr 300px; gap: 14px; height: 100vh; padding: 14px; }
.main { position: relative; min-width: 0; height: calc(100vh - 28px); }
.view { display: none; height: 100%; flex-direction: column; gap: 12px; overflow-y: auto; animation: fadeUp 0.45s var(--ease); }
.view.active { display: flex; }
#view-chat { overflow: hidden; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Sidebar */
.sidebar { border-radius: var(--radius); padding: 18px 14px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.brand-mark { width: 42px; height: 42px; filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.55)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-3px); } }
.brand-name { margin: 0; font: 700 22px/1 var(--font-display); letter-spacing: 0.18em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { margin: 4px 0 0; font-size: 11px; color: var(--text-mute); letter-spacing: 0.08em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--text-dim); text-align: left; transition: all 0.25s var(--ease); }
.nav-item:hover { background: rgba(167, 139, 250, 0.08); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(124, 58, 237, 0.28), rgba(124, 58, 237, 0.04)); color: var(--text); box-shadow: inset 2px 0 0 var(--violet); }
.side-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-title, .rail-title { font: 600 11px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin: 4px 6px 8px; }
.session-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.session-list li { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; color: var(--text-dim); cursor: pointer; font-size: 13px; transition: background 0.2s; }
.session-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-list li:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.session-list li.active { background: rgba(125, 211, 252, 0.08); color: var(--text); }
.session-list li .del { opacity: 0; border: 0; background: none; color: var(--text-mute); padding: 0 4px; }
.session-list li:hover .del { opacity: 1; }
.side-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 8px 6px 0; border-top: 1px solid var(--border); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04); }
.dot.on { background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: pulse 2.4s infinite; }
.dot.off { background: var(--ember); }
@keyframes pulse { 50% { opacity: 0.55; } }

/* Buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-weight: 500; transition: all 0.25s var(--ease); white-space: nowrap; }
.btn:hover { border-color: var(--violet); transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(167, 139, 250, 0.6); }
.btn-primary { background: var(--grad-btn); border-color: transparent; box-shadow: 0 10px 30px -12px rgba(99, 102, 241, 0.8); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-danger { border-color: rgba(251, 113, 133, 0.4); color: #fecdd3; }
.btn-danger:hover { border-color: var(--ember); box-shadow: 0 8px 24px -10px rgba(251, 113, 133, 0.6); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.icon-btn { border: 0; background: none; color: var(--text-dim); padding: 8px; border-radius: 10px; display: grid; place-items: center; transition: all 0.2s; }
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.input, select, .editor { width: 100%; background: rgba(8, 6, 20, 0.6); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit; outline: none; transition: border 0.2s, box-shadow 0.2s; }
.input:focus, select:focus, .editor:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15); }
select { appearance: none; cursor: pointer; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29cc4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
select option, select optgroup { background: #120f24; }
.editor { font: 13px/1.6 var(--font-mono); min-height: 220px; resize: vertical; }
.editor.tall { min-height: 360px; flex: 1; }
.row-gap { display: flex; gap: 10px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); font-size: 12px; color: var(--text-dim); }
.muted { color: var(--text-mute); }

/* Toolbar */
.toolbar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: var(--radius); flex-wrap: wrap; }
.field { display: flex; align-items: center; gap: 8px; }
.field label { font-size: 12px; color: var(--text-mute); }
.field select { width: 250px; padding: 7px 30px 7px 10px; }
.segmented { display: flex; padding: 3px; border-radius: 12px; background: rgba(8, 6, 20, 0.6); border: 1px solid var(--border); position: relative; }
.segmented button { border: 0; background: none; padding: 6px 14px; border-radius: 9px; color: var(--text-dim); font-size: 13px; font-weight: 500; transition: all 0.25s var(--ease); }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--grad-btn); color: #fff; box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.7); }
.toggles { display: flex; gap: 14px; margin-left: auto; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch span { width: 32px; height: 18px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); position: relative; transition: background 0.25s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #cfc9ef; transition: transform 0.25s var(--ease); }
.switch input:checked + span { background: var(--violet-deep); }
.switch input:checked + span::after { transform: translateX(14px); background: #fff; }

/* Plan strip */
.plan-strip { display: flex; align-items: center; gap: 10px; padding: 7px 14px; margin-top: -4px; border-radius: 12px; font-size: 12px; color: var(--text-dim); background: rgba(124, 58, 237, 0.08); border: 1px dashed var(--border-strong); animation: fadeUp 0.3s var(--ease); overflow: hidden; white-space: nowrap; }
.badge { padding: 2px 9px; border-radius: 6px; font: 700 11px var(--font-display); letter-spacing: 0.1em; color: #0b0918; background: var(--gold); }
.badge.SOLO { background: linear-gradient(90deg, #f5b84b, #fb923c); }
.badge.SWARM { background: linear-gradient(90deg, #5eead4, #7dd3fc); }
.badge.CONCURRENT { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
.plan-intent { text-transform: capitalize; color: var(--text); }
.plan-model { font-family: var(--font-mono); color: var(--cyan); }
.plan-gb { color: var(--gold); }
.plan-reason { overflow: hidden; text-overflow: ellipsis; color: var(--text-mute); }

/* Messages */
.messages { flex: 1; overflow-y: auto; padding: 8px 6px 20px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; }
.hero { margin: auto; max-width: 760px; text-align: center; padding: 30px 10px; position: relative; }
.hero-orb { width: 120px; height: 120px; margin: 0 auto 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #c4b5fd 14%, #7c3aed 45%, #0c4a6e 80%); box-shadow: 0 0 80px 10px rgba(124, 58, 237, 0.45), inset 0 -10px 30px rgba(245, 184, 75, 0.35); animation: orb 7s ease-in-out infinite; }
@keyframes orb { 50% { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 110px 18px rgba(124, 58, 237, 0.55), inset 0 -10px 30px rgba(245, 184, 75, 0.5); } }
.hero h2 { font: 600 34px/1.2 var(--font-display); margin: 0 0 10px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-dim); max-width: 600px; margin: 0 auto 26px; }
.hero-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-card { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 2px; transition: all 0.3s var(--ease); }
.hero-card b { font-family: var(--font-display); font-size: 15px; }
.hero-card span { color: var(--text-dim); font-size: 13px; }
.hero-card:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: 0 14px 40px -18px rgba(167, 139, 250, 0.8); }

.msg { display: flex; gap: 12px; max-width: 920px; width: 100%; margin: 0 auto; animation: fadeUp 0.35s var(--ease); }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(14, 165, 233, 0.2)); border: 1px solid var(--border-strong); border-radius: 16px 16px 4px 16px; padding: 10px 16px; max-width: 75%; white-space: pre-wrap; word-wrap: break-word; }
.msg.user .bubble img { max-width: 180px; border-radius: 8px; display: block; margin-top: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--grad-btn); box-shadow: 0 0 18px rgba(124, 58, 237, 0.5); font: 700 13px var(--font-display); }
.msg.assistant .card-ai { flex: 1; min-width: 0; }
.trace { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; background: rgba(8, 6, 20, 0.45); font-size: 12px; overflow: hidden; }
.trace summary { list-style: none; cursor: pointer; padding: 7px 12px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.trace summary::-webkit-details-marker { display: none; }
.trace summary .spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, 0.25); border-top-color: var(--violet); animation: spin 0.8s linear infinite; }
.trace.finished summary .spinner { animation: none; border-color: var(--mint); background: var(--mint); transform: scale(0.6); }
@keyframes spin { to { transform: rotate(360deg); } }
.trace-body { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.trace-line { color: var(--text-dim); font-family: var(--font-mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-word; }
.trace-line.tool { color: var(--cyan); }
.trace-line.result { color: var(--text-mute); border-left: 2px solid var(--border-strong); padding-left: 8px; }
.trace-line.plan { color: var(--gold); }
.trace-line.err { color: var(--ember); }
.thinking { margin-bottom: 8px; border-left: 2px solid var(--violet); padding: 4px 12px; color: var(--text-mute); font-size: 12.5px; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
.content { line-height: 1.7; word-wrap: break-word; }
.content.streaming::after { content: "▍"; color: var(--violet); animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.content h1, .content h2, .content h3, .content h4 { font-family: var(--font-display); margin: 18px 0 8px; line-height: 1.3; }
.content h1 { font-size: 22px; } .content h2 { font-size: 19px; } .content h3 { font-size: 16px; }
.content p { margin: 0 0 10px; }
.content a { color: var(--cyan); }
.content code { font-family: var(--font-mono); font-size: 12.5px; background: rgba(167, 139, 250, 0.12); padding: 1px 6px; border-radius: 5px; }
.content blockquote { margin: 8px 0; padding: 4px 14px; border-left: 3px solid var(--gold); color: var(--text-dim); }
.content ul, .content ol { padding-left: 22px; margin: 6px 0 10px; }
.content table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 13px; }
.content th, .content td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.content th { background: rgba(167, 139, 250, 0.1); }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.codeblock { margin: 10px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #0a0817; }
.codeblock-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font: 11px var(--font-mono); color: var(--text-mute); background: rgba(167, 139, 250, 0.06); }
.codeblock-head button { border: 0; background: none; color: var(--text-dim); font-size: 11px; }
.codeblock-head button:hover { color: var(--text); }
.codeblock pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.codeblock code { background: none; padding: 0; font-size: 12.5px; line-height: 1.6; }
.msg-foot { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.msg-foot .chip { font-size: 11px; padding: 2px 8px; }

/* Composer */
.composer { border-radius: 18px; padding: 10px 12px; transition: border 0.25s, box-shadow 0.25s; }
.composer:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow), 0 0 0 4px rgba(124, 58, 237, 0.12); }
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea { flex: 1; resize: none; border: 0; outline: none; background: none; color: var(--text); font: 14.5px/1.55 var(--font); max-height: 220px; padding: 8px 4px; }
.send-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--grad-btn); color: #fff; display: grid; place-items: center; transition: all 0.25s var(--ease); box-shadow: 0 8px 22px -8px rgba(99, 102, 241, 0.9); }
.send-btn:hover { transform: scale(1.06); }
.send-btn.stop { background: linear-gradient(135deg, #e11d48, #fb7185); }
.attachments { display: flex; gap: 8px; flex-wrap: wrap; }
.attachments:not(:empty) { margin-bottom: 8px; }
.attachments .att { position: relative; }
.attachments img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-strong); }
.attachments button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--ember); color: #fff; font-size: 11px; line-height: 1; }
.attachments .att-doc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: rgba(124, 58, 237, 0.2); border: 1px solid var(--border-strong); font-size: 12px; color: var(--text); }
.attachments .att-doc .doc-icon { font-size: 15px; }
.attachments .att-doc .doc-name { font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachments .att-doc .doc-info { font-size: 11px; color: var(--cyan); font-family: var(--font-mono); }
.attachments .att-doc button { position: static; width: 16px; height: 16px; background: none; color: var(--text-mute); border: 0; cursor: pointer; padding: 0; margin-left: 2px; }
.attachments .att-doc button:hover { color: var(--ember); }

/* Generic views */
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 8px 4px 4px; }
.view-head h2 { margin: 0; font: 600 26px var(--font-display); }
.view-head p { margin: 4px 0 0; color: var(--text-dim); }
.sub { font: 600 13px var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-mute); margin: 10px 4px 0; }
.card { border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card-head h3 { margin: 0; font: 600 15px var(--font-display); }

/* Models view */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.preset { text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 6px; transition: all 0.3s var(--ease); position: relative; overflow: hidden; }
.preset::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity 0.3s; mix-blend-mode: overlay; }
.preset:hover { transform: translateY(-3px); border-color: var(--violet); box-shadow: 0 14px 40px -18px rgba(167, 139, 250, 0.8); }
.preset:hover::before { opacity: 0.12; }
.preset b { font-family: var(--font-display); font-size: 15px; }
.preset small { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.preset .gb { color: var(--gold); font-size: 12px; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding-bottom: 110px; }
.model-card { position: relative; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: all 0.25s var(--ease); display: flex; flex-direction: column; gap: 8px; }
.model-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.model-card.selected { border-color: var(--violet); background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(14, 165, 233, 0.08)); box-shadow: 0 0 0 1px var(--violet), 0 12px 30px -16px rgba(124, 58, 237, 0.9); }
.model-card.loaded::after { content: "LIVE"; position: absolute; top: 12px; right: 12px; font: 700 10px var(--font-display); letter-spacing: 0.1em; color: var(--mint); text-shadow: 0 0 10px var(--mint); }
.model-name { font: 500 13.5px var(--font-mono); word-break: break-all; padding-right: 36px; }
.model-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.tier { padding: 1px 8px; border-radius: 6px; font: 700 10px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.tier.frontier { background: rgba(245, 184, 75, 0.16); color: var(--gold); }
.tier.mid { background: rgba(167, 139, 250, 0.16); color: var(--violet); }
.tier.light { background: rgba(94, 234, 212, 0.14); color: var(--mint); }
.tier.embed { background: rgba(125, 211, 252, 0.14); color: var(--cyan); }
.tier.cloud { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); }
.cap { color: var(--text-mute); border: 1px solid var(--border); padding: 0 6px; border-radius: 5px; }
.model-size { display: flex; justify-content: space-between; color: var(--text-dim); font-size: 12px; }
.launch-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); margin-top: auto; }
.budget { flex: 1; min-width: 0; }
.budget-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 99px; background: var(--grad); transition: width 0.6s var(--ease), background 0.3s; }
.bar-fill.over { background: linear-gradient(90deg, #fb7185, #e11d48); }
.warn { color: var(--ember); font-size: 12px; margin-top: 4px; min-height: 0; }

/* Memory view */
.mem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.results { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.result { padding: 8px 12px; border-radius: 10px; background: rgba(8, 6, 20, 0.45); border: 1px solid var(--border); }
.result small { color: var(--gold); font-family: var(--font-mono); margin-right: 8px; }
.fact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.fact-list li { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(8, 6, 20, 0.45); border: 1px solid var(--border); font-size: 13px; }
.fact-list li span { flex: 1; }
.fact-list li em { font-style: normal; font-size: 11px; color: var(--text-mute); }
.fact-list li button { border: 0; background: none; color: var(--text-mute); }
.fact-list li button:hover { color: var(--ember); }

/* Skills view */
.skills-layout { display: grid; grid-template-columns: 280px 1fr; gap: 12px; flex: 1; min-height: 0; }
.skill-list { list-style: none; margin: 0; padding: 8px; border-radius: var(--radius); overflow-y: auto; }
.skill-list li { padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background 0.2s; }
.skill-list li:hover, .skill-list li.active { background: rgba(167, 139, 250, 0.1); }
.skill-list li b { display: block; font: 500 13px var(--font-mono); }
.skill-list li small { color: var(--text-dim); font-size: 12px; }
.skill-editor { min-height: 0; }

/* Activity */
.activity { border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; overflow-y: auto; }
.act { display: grid; grid-template-columns: 80px 90px 200px 1fr; gap: 12px; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 12.5px; align-items: baseline; }
.act time { color: var(--text-mute); font-family: var(--font-mono); font-size: 11.5px; }
.act .kind { font: 700 10.5px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.act .kind.evict, .act .kind.error, .act .kind.watchdog, .act .kind.cancel { color: var(--ember); }
.act .kind.tool { color: var(--cyan); }
.act .kind.memory, .act .kind.dream, .act .kind.skill { color: var(--mint); }
.act .kind.plan, .act .kind.route, .act .kind.launch { color: var(--gold); }
.act .model { font-family: var(--font-mono); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act .detail { color: var(--text); word-break: break-word; }

/* Telemetry rail */
.rail { border-radius: var(--radius); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.gauge { position: relative; width: 170px; height: 170px; margin: 0 auto 4px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 10; }
.gauge-fg { fill: none; stroke: url(#gg); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset 0.9s var(--ease); filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6)); }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-center b { font: 600 28px var(--font-display); }
.gauge-center span { font-size: 12px; color: var(--text-mute); }
.stat-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); }
.stat-row b { color: var(--gold); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { padding: 10px; border-radius: 12px; background: rgba(8, 6, 20, 0.45); border: 1px solid var(--border); display: flex; flex-direction: column; }
.stat span { font-size: 11px; color: var(--text-mute); }
.stat b { font: 600 15px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loaded-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.loaded-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(8, 6, 20, 0.45); border: 1px solid var(--border); }
.loaded-list li .n { flex: 1; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loaded-list li .g { color: var(--gold); }
.loaded-list li button { border: 0; background: none; color: var(--text-mute); padding: 0 2px; }
.loaded-list li button:hover { color: var(--ember); }
.loaded-list li.muted { justify-content: center; color: var(--text-mute); background: none; border-style: dashed; }
.pipeline { display: flex; flex-direction: column; gap: 4px; position: relative; padding-left: 4px; }
.pipe-node { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-mute); padding: 5px 8px; border-radius: 8px; transition: all 0.3s var(--ease); }
.pipe-node i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--text-mute); transition: all 0.3s; }
.pipe-node.active { color: var(--text); background: rgba(124, 58, 237, 0.12); }
.pipe-node.active i { border-color: var(--violet); background: var(--violet); box-shadow: 0 0 10px var(--violet); animation: pulse 1s infinite; }
.pipe-node.done i { border-color: var(--mint); background: var(--mint); }
.pipe-node.skip { opacity: 0.4; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); opacity: 0; padding: 10px 18px; border-radius: 12px; background: rgba(20, 16, 40, 0.95); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 13px; z-index: 50; transition: all 0.35s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Library view & file explorer
   ========================================================================== */
.lib-search-bar { padding: 10px 14px; }
.lib-layout { display: grid; grid-template-columns: 240px 300px 1fr; gap: 12px; flex: 1; min-height: 0; }
.lib-pane { display: flex; flex-direction: column; overflow: hidden; padding: 12px; border-radius: var(--radius); }
.lib-pane-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.lib-pane-head h3 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }

/* Folder tree */
.lib-tree { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tree-node { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--text-dim); font-size: 13px; transition: all 0.2s var(--ease); user-select: none; }
.tree-node:hover { background: rgba(167, 139, 250, 0.08); color: var(--text); }
.tree-node.active { background: rgba(124, 58, 237, 0.22); color: var(--text); font-weight: 500; box-shadow: inset 2px 0 0 var(--violet); }
.tree-node .node-name { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node .node-badge { font-size: 11px; padding: 1px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--text-mute); }
.tree-node.inbox .node-name::before { content: "📥"; font-size: 12px; }
.tree-node:not(.inbox) .node-name::before { content: "📁"; font-size: 12px; }
.tree-node .node-actions { display: none; gap: 4px; }
.tree-node:hover .node-actions { display: flex; }
.tree-node .node-btn { border: 0; background: none; color: var(--text-mute); padding: 0 4px; font-size: 11px; }
.tree-node .node-btn:hover { color: var(--text); }

/* Entry list */
.lib-entry-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.entry-card { padding: 10px 12px; border-radius: 10px; background: rgba(14, 11, 28, 0.45); border: 1px solid var(--border); cursor: pointer; transition: all 0.2s var(--ease); display: flex; flex-direction: column; gap: 5px; }
.entry-card:hover { border-color: var(--violet); transform: translateY(-1px); }
.entry-card.active { border-color: var(--violet); background: rgba(124, 58, 237, 0.16); box-shadow: 0 4px 16px -4px rgba(124, 58, 237, 0.4); }
.entry-title { font-weight: 500; font-size: 13px; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-mute); }
.entry-badge { padding: 1px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; background: rgba(167, 139, 250, 0.12); color: var(--violet); }
.entry-badge.sources { background: rgba(125, 211, 252, 0.12); color: var(--cyan); }

/* Entry detail viewer */
.lib-viewer { flex: 1; min-width: 0; padding: 16px; overflow: hidden; }
.lib-empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-mute); text-align: center; max-width: 320px; margin: 0 auto; gap: 12px; }
.lib-empty-icon { font-size: 42px; opacity: 0.7; }
.lib-detail { display: flex; flex-direction: column; height: 100%; gap: 12px; min-width: 0; }
.lib-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.lib-detail-head h3 { margin: 0 0 4px; font-size: 18px; font-family: var(--font-display); font-weight: 600; line-height: 1.3; color: var(--text); }
.lib-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-mute); }
.lib-detail-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Tabs for files in entry */
.lib-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.lib-tab { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: rgba(8, 6, 20, 0.5); font-size: 12px; font-family: var(--font-mono); color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.lib-tab:hover { color: var(--text); border-color: var(--violet); }
.lib-tab.active { background: rgba(124, 58, 237, 0.25); border-color: var(--violet); color: var(--text); font-weight: 500; }
.lib-tab.sources-tab { color: var(--cyan); }

/* File preview area */
.lib-file-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: rgba(10, 8, 22, 0.5); border-radius: 12px; border: 1px solid var(--border); }
.lib-file-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(16, 12, 34, 0.6); border-bottom: 1px solid var(--border); font-size: 12px; }
.lib-file-path { font-family: var(--font-mono); color: var(--text-dim); }
.lib-file-content { flex: 1; overflow-y: auto; padding: 18px 22px; font-size: 14px; line-height: 1.7; color: var(--text); }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(4, 3, 10, 0.75); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s var(--ease); }
.modal-backdrop[hidden] { display: none !important; }
.modal { width: 440px; max-width: calc(100vw - 32px); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; animation: scaleUp 0.25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { margin: 0; font: 600 16px var(--font-display); }
.modal-close { border: 0; background: none; color: var(--text-mute); font-size: 16px; cursor: pointer; }
.modal-close:hover { color: var(--text); }
.modal-desc { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); }
.folder-list-picker { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.picker-folder-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text-dim); cursor: pointer; transition: background 0.15s; }
.picker-folder-item:hover { background: rgba(167, 139, 250, 0.1); color: var(--text); }
.picker-folder-item.selected { background: rgba(124, 58, 237, 0.25); color: var(--text); font-weight: 500; }
.inline-create { display: flex; gap: 8px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.chip-saved { background: rgba(94, 234, 212, 0.15) !important; color: var(--mint) !important; border: 1px solid rgba(94, 234, 212, 0.3) !important; cursor: pointer; }
.chip-saved:hover { background: rgba(94, 234, 212, 0.25) !important; }

@media (max-width: 1280px) { .shell { grid-template-columns: 240px 1fr; } .rail { display: none; } .lib-layout { grid-template-columns: 200px 240px 1fr; } }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } .mem-grid { grid-template-columns: 1fr; } .hero-cards { grid-template-columns: 1fr; } .lib-layout { grid-template-columns: 1fr; } .canvas-drawer { width: 100% !important; max-width: 100% !important; position: absolute; inset: 0; } }

/* Chat Workspace & Live Interactive Canvas */
.chat-workspace { flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden; }
.chat-workspace > .messages { flex: 1; min-width: 0; overflow-y: auto; }

.canvas-drawer {
  width: 48%;
  min-width: 360px;
  max-width: 65%;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: rgba(13, 10, 26, 0.92);
  backdrop-filter: blur(16px);
  z-index: 25;
  animation: slideInRight 0.25s var(--ease);
}
.canvas-drawer[hidden] { display: none !important; }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

.canvas-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(18, 14, 38, 0.7); }
.canvas-title-group { display: flex; align-items: center; gap: 8px; }
.canvas-title { font: 600 13px var(--font-display); color: var(--text); }
.canvas-actions { display: flex; align-items: center; gap: 6px; }

.canvas-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: #080612; }
.canvas-pane { flex: 1; min-height: 0; display: none; width: 100%; height: 100%; }
.canvas-pane.active { display: flex; flex-direction: column; }
.canvas-code-pane { overflow: auto; padding: 16px; background: rgba(10, 8, 22, 0.95); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.canvas-code-pane pre, .canvas-code-pane code { margin: 0; font-family: var(--font-mono); color: #cbd5e1; }
#canvasIframe { width: 100%; height: 100%; border: 0; background: #ffffff; border-radius: 0 0 12px 0; }

.btn-preview-canvas {
  background: rgba(125, 211, 252, 0.12) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(125, 211, 252, 0.3) !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn-preview-canvas:hover { background: rgba(125, 211, 252, 0.25) !important; transform: translateY(-1px); }

/* Voice Dictation (Recording Glow) */
#micBtn.recording {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  animation: micPulse 1.2s infinite ease-in-out;
}
@keyframes micPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* DeepSeek Light Reasoning Blueprint Card */
.reasoning-blueprint-card {
  margin: 10px 0;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  overflow: hidden;
}
.reasoning-blueprint-head {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.14);
  user-select: none;
}
.reasoning-blueprint-head:hover { background: rgba(124, 58, 237, 0.22); }
.reasoning-blueprint-body {
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.6;
  font-family: var(--font-mono);
  color: #e2e8f0;
  background: rgba(10, 8, 22, 0.6);
  max-height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ==========================================================================
   STANDALONE & CROSS-PLATFORM DOWNLOAD / INSTALL MODAL
   ========================================================================== */
.modal-lg {
  max-width: 860px;
  width: 92vw;
  max-height: 90vh;
}
.modal-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-title-row h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f8fafc;
}
.badge-accent {
  background: rgba(125, 211, 252, 0.15);
  color: #7dd3fc;
  border: 1px solid rgba(125, 211, 252, 0.35);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.download-tabs-nav {
  display: flex;
  gap: 6px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 14, 30, 0.4);
  overflow-x: auto;
}
.dl-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dl-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}
.dl-tab-btn.active {
  color: #fff;
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
}
.download-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(90vh - 170px);
}
.dl-tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.dl-tab-panel.active {
  display: flex;
}
.dl-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(167, 139, 250, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.dl-hero-info h4 {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  color: #fff;
}
.dl-hero-info p {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}
.dl-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.btn-lg {
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dl-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dl-label {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.codebox-row {
  display: flex;
  align-items: center;
  background: #090d1f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 6px 12px;
  gap: 12px;
}
.codebox {
  margin: 0;
  flex: 1;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #38bdf8;
}
.dl-instructions {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 18px;
}
.dl-instructions h5 {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #e2e8f0;
}
.dl-instructions ol {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
}
.ios-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.ios-step-card {
  position: relative;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ios-step-num {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ios-step-icon {
  font-size: 28px;
  margin: 10px 0;
  height: 36px;
  display: flex;
  align-items: center;
}
.ios-step-card h5 {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: #fff;
}
.ios-step-card p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}
.dl-tip-box {
  background: rgba(245, 184, 75, 0.1);
  border: 1px solid rgba(245, 184, 75, 0.3);
  border-radius: 9px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: #fde68a;
  line-height: 1.5;
}
.dl-grid-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.dl-file-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.dl-file-card:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(167, 139, 250, 0.3);
  transform: translateY(-1px);
}
.dl-file-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.dl-file-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dl-file-details b {
  font-size: 13px;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-file-details span {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.nav-install-item {
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  background: rgba(56, 189, 248, 0.07) !important;
  margin-top: 10px;
}
.nav-install-item:hover {
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #fff !important;
}
@media (max-width: 768px) {
  .dl-hero-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-lg {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================================
   FUTURISTIC CYBERNETIC HUD ARCHITECT FOOTER CAPSULE
   ======================================================== */
.futuristic-footer-capsule {
  position: relative;
  margin: 32px auto 16px;
  max-width: 820px;
  width: 100%;
  padding: 22px 28px 18px;
  background: radial-gradient(130% 120% at 50% 0%, rgba(18, 14, 38, 0.92) 0%, rgba(7, 6, 18, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 0 35px rgba(56, 189, 248, 0.12),
    0 20px 45px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 25px rgba(124, 58, 237, 0.08);
  overflow: hidden;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.futuristic-footer-capsule:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 
    0 0 50px rgba(56, 189, 248, 0.25),
    0 24px 50px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 30px rgba(56, 189, 248, 0.18);
  transform: translateY(-2px);
}

/* Dynamic holographic scanline beam */
.futuristic-footer-capsule::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.15), rgba(168, 85, 247, 0.1), transparent);
  transform: skewX(-25deg);
  animation: holoScan 7s infinite ease-in-out;
  pointer-events: none;
}

@keyframes holoScan {
  0% { left: -120%; }
  35%, 100% { left: 220%; }
}

/* HUD Sci-Fi Corner Crosshairs */
.hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.85;
}
.hud-corner.top-left { top: 6px; left: 6px; border-top: 2px solid #38bdf8; border-left: 2px solid #38bdf8; border-top-left-radius: 4px; }
.hud-corner.top-right { top: 6px; right: 6px; border-top: 2px solid #38bdf8; border-right: 2px solid #38bdf8; border-top-right-radius: 4px; }
.hud-corner.btm-left { bottom: 6px; left: 6px; border-bottom: 2px solid #38bdf8; border-left: 2px solid #38bdf8; border-bottom-left-radius: 4px; }
.hud-corner.btm-right { bottom: 6px; right: 6px; border-bottom: 2px solid #38bdf8; border-right: 2px solid #38bdf8; border-bottom-right-radius: 4px; }

/* Status telemetry top row */
.hud-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: #64748b;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(167, 139, 250, 0.2);
  text-transform: uppercase;
}

.hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #38bdf8;
  font-weight: 600;
}

.cyber-dot {
  position: relative;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 10px #22c55e;
  display: inline-block;
}
.cyber-dot::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #22c55e;
  animation: cyberPulse 2.2s ease-out infinite;
}

@keyframes cyberPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.hud-id {
  color: #94a3b8;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hud-id .hud-tag {
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Architect centerpiece banner */
.hud-architect-title {
  margin: 12px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.architect-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #94a3b8;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.08);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.22);
}

.architect-divider {
  color: #38bdf8;
  font-weight: 900;
  font-size: 1.1rem;
}

.architect-name {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #38bdf8 0%, #c084fc 30%, #f472b6 65%, #38bdf8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerFlow 5s linear infinite;
  text-shadow: 0 0 30px rgba(56, 189, 248, 0.45);
}

@keyframes shimmerFlow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Rights and telemetry bar */
.hud-rights-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  color: #cbd5e1;
  letter-spacing: 0.07em;
  margin-top: 10px;
}

.hud-symbol {
  color: #38bdf8;
  font-size: 0.72rem;
  opacity: 0.85;
}

.rights-text {
  font-weight: 700;
  color: #f1f5f9;
}

.hud-spec {
  color: #94a3b8;
  font-size: 0.72rem;
}

.hud-disclaimer {
  margin-top: 14px;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}

@media (max-width: 640px) {
  .futuristic-footer-capsule {
    padding: 18px 14px;
    margin: 24px 8px 12px;
  }
  .hud-status-bar {
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }
}

/* ========================================================
   QR CONNECT & MULTI-DEVICE PAIRING SUBSYSTEM
   ======================================================== */
.nav-qr-item {
  color: #a78bfa !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
  background: rgba(167, 139, 250, 0.08) !important;
  margin-top: 6px;
}
.nav-qr-item:hover {
  background: rgba(167, 139, 250, 0.2) !important;
  border-color: rgba(167, 139, 250, 0.6) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.25);
}

.btn-cyan {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
}
.btn-cyan:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

/* Peer Welcome Handshake Banner */
.peer-welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(56, 189, 248, 0.12));
  border: 1px solid rgba(34, 197, 94, 0.45);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(34, 197, 94, 0.2);
  margin-bottom: 8px;
  animation: slideDown 0.4s var(--ease);
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.peer-welcome-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.peer-welcome-icon {
  font-size: 24px;
  animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.peer-welcome-content b {
  display: block;
  font-size: 14px;
  color: #86efac;
}
.peer-welcome-content span {
  font-size: 12px;
  color: #cbd5e1;
}

/* QR Modal Layout */
.qr-modal-capsule {
  max-width: 780px !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
}
.qr-head-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qr-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(167, 139, 250, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.35);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.qr-channel-selector {
  display: flex;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(10, 8, 22, 0.7);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.qr-chan-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.qr-chan-btn:hover {
  color: #fff;
  border-color: rgba(167, 139, 250, 0.4);
}
.qr-chan-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(56, 189, 248, 0.25));
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}

.qr-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}
.qr-display-card {
  display: flex;
  gap: 24px;
  background: rgba(15, 12, 34, 0.6);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  align-items: center;
}
.qr-code-frame {
  position: relative;
  width: 200px;
  height: 200px;
  min-width: 200px;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.25), 0 10px 25px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qr-code-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Laser scan animation line */
.qr-scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #22c55e, #38bdf8, transparent);
  box-shadow: 0 0 12px #22c55e;
  animation: qrLaserScan 3s infinite ease-in-out;
  pointer-events: none;
}
@keyframes qrLaserScan {
  0% { top: 4%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 96%; opacity: 0; }
}

.qr-info-pane {
  flex: 1;
  min-width: 0;
}
.qr-badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.pill-badge-cyan {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #7dd3fc !important;
}
.pill-badge-green {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #86efac !important;
}
.qr-info-pane h4 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #fff;
  font-family: var(--font-display);
}
.qr-info-pane p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.qr-url-box {
  display: flex;
  gap: 8px;
  background: rgba(8, 6, 20, 0.8);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.qr-url-box input {
  flex: 1;
  background: none;
  border: 0;
  color: #7dd3fc;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
}
.qr-tips {
  margin-top: 12px;
  font-size: 12px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.connected-peers-card {
  background: rgba(15, 12, 34, 0.4);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.peers-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.peers-head h5 {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-display);
}
.peer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(8, 6, 20, 0.6);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
}
.peer-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.peer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.peer-name {
  color: #fff;
  font-weight: 500;
}
.peer-ip {
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

@media (max-width: 640px) {
  .qr-display-card {
    flex-direction: column;
    text-align: center;
  }
  .qr-badge-row {
    justify-content: center;
  }
}