*, *::before, *::after { box-sizing: border-box; }
/* ═══════════════════════════════════════════════
THEME TOKENS — single source of truth for theming.
Dark is the default (:root); light re-maps the same
variables so EVERY surface that consumes a token
(including live-stream/preview backgrounds) reflects
the active theme automatically.
═══════════════════════════════════════════════ */
:root {
/* ── Dark theme (default) ──────────────────────────────────────────────
Commercial SaaS-grade neutral-blue scale. Elevation reads by lightness
alone (inset < app < surface-2 < surface < elevated), so panels stack
clearly without relying on heavy borders. */
--dns-bg-app: #0a0e1a;
--dns-bg-surface: #151d31;
--dns-bg-surface-2: #101728;
--dns-bg-elevated: #1a2338;
--dns-bg-inset: #070a13;
--dns-bg-stream: linear-gradient(165deg, #0a0e1a 0%, #0d1424 55%, #0c1428 100%);
--dns-bg-stream-glow-1: #1e1b4b;
--dns-bg-stream-glow-2: #0c1a3a;
--dns-border: #1f2941;
--dns-border-strong: #33405c;
/* Text ramp tuned for AA contrast on --dns-bg-app. */
--dns-text: #dfe6f3;
--dns-text-muted: #a3b0c8;
--dns-text-subtle: #7787a1;
--dns-text-strong: #f7f9fd;
--dns-accent: #7c3aed;
--dns-accent-2: #4f46e5;
--dns-link: #56c8fa;
/* Alias tokens (used across sidebar/cards) */
--dns-surface: #101728;
--dns-surface-2: #1a2338;
--dns-bg: var(--dns-bg-app);
--dns-muted: var(--dns-text-muted);
--dns-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--dns-font-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--dns-font-accent: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--dns-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Chat/transcript text ramp. Previously undefined, so every consumer fell back to its
hard-coded dark value and rendered near-white text on the light theme. */
--dnsc-text: #e6e8ef;
--dnsc-muted: #9aa3b8;
--dnsc-border: rgba(255,255,255,0.10);
--dnsc-user-bg: rgba(99,102,241,0.14);
--dnsc-success: #3ddc9a;
--dnsc-danger: #fb7185;
/* ── New design-system tokens (chat control + modern chrome) ── */
--dnsc-brand: #7d81f5;
--dnsc-brand-2: #a78bfa;
--dnsc-brand-3: #38dcf0;
--dnsc-ok: #3ddc9a;
--dnsc-warn: #fbbf24;
--dnsc-err: #fb7185;
--dnsc-chat-bg: radial-gradient(1100px 520px at 88% -12%, rgba(99,102,241,0.14) 0%, transparent 60%),
radial-gradient(900px 460px at 4% 104%, rgba(34,211,238,0.08) 0%, transparent 58%),
var(--dns-bg-app);
--dnsc-card: rgba(255,255,255,0.04);
--dnsc-card-strong: rgba(255,255,255,0.065);
--dnsc-card-border: rgba(255,255,255,0.10);
--dnsc-ring: rgba(125,129,245,0.5);
/* Layered shadows: a crisp contact edge plus a soft ambient pool. */
--dnsc-shadow: 0 1px 2px rgba(0,0,0,0.5),
0 12px 32px -18px rgba(0,0,0,0.85);
--dnsc-shadow-lg: 0 2px 4px rgba(0,0,0,0.4),
0 24px 60px -28px rgba(0,0,0,0.9);
--dnsc-radius: 16px;
--dnsc-radius-sm: 10px;
}
html.light-theme {
/* Clean, blue-tinted "paper" light theme — deliberately NOT grey. */
--dns-bg-app: #f7f9ff;
--dns-bg-surface: #ffffff;
--dns-bg-surface-2: #eef3ff;
--dns-bg-elevated: #ffffff;
--dns-bg-inset: #e8eeff;
--dns-bg-stream: linear-gradient(165deg, #f4f7ff 0%, #ffffff 55%, #eff5ff 100%);
--dns-bg-stream-glow-1: #e0e7ff;
--dns-bg-stream-glow-2: #dbeafe;
--dns-border: #e2e9f8;
--dns-border-strong: #cbd8f0;
--dns-text: #0f172a;
--dns-text-muted: #3b4760;
--dns-text-subtle: #5b6880;
--dns-text-strong: #0a1020;
--dns-accent: #6d28d9;
--dns-accent-2: #4f46e5;
--dns-link: #1d4ed8;
/* Alias tokens (used across sidebar/cards) */
--dns-surface: #ffffff;
--dns-surface-2: #f3f7ff;
--dns-bg: var(--dns-bg-app);
--dns-muted: var(--dns-text-muted);
--dnsc-text: #0f172a;
--dnsc-muted: #475569;
--dnsc-border: #dde5f3;
--dnsc-user-bg: #eef2ff;
--dnsc-success: #059669;
--dnsc-danger: #dc2626;
--dnsc-brand: #5b5bd6;
--dnsc-brand-2: #7c3aed;
--dnsc-brand-3: #0891b2;
--dnsc-ok: #059669;
--dnsc-warn: #d97706;
--dnsc-err: #dc2626;
--dnsc-chat-bg: radial-gradient(1100px 520px at 88% -12%, rgba(99,102,241,0.10) 0%, transparent 60%),
radial-gradient(900px 460px at 4% 104%, rgba(14,165,233,0.08) 0%, transparent 58%),
var(--dns-bg-app);
--dnsc-card: #ffffff;
--dnsc-card-strong: #ffffff;
--dnsc-card-border: #e4ebfa;
--dnsc-ring: rgba(99,102,241,0.35);
--dnsc-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 12px 30px -20px rgba(16,24,40,0.28);
--dnsc-shadow-lg: 0 28px 64px -30px rgba(16,24,40,0.32);
}
/* ── Light theme visual polish (depth, softness, stunning feel) ── */
html.light-theme body { background:
radial-gradient(1200px 620px at 10% -10%, #e8ecff 0%, transparent 58%),
radial-gradient(1000px 560px at 94% 2%, #e2f2ff 0%, transparent 52%),
var(--dns-bg-app); }
html.light-theme .dns-sidebar {
background: linear-gradient(180deg, #ffffff 0%, #f6f8fd 100%);
box-shadow: 1px 0 0 rgba(15,23,42,0.04), 8px 0 24px -22px rgba(15,23,42,0.35);
}
html.light-theme .dns-project-card {
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 28px -20px rgba(15,23,42,0.28);
}
/* Recent cards stay flat in light theme too — hairline border only, no shadow or wash. */
html.light-theme .dns-recent-card {
background: #ffffff;
border-color: #e2e8f0;
box-shadow: none;
}
html.light-theme .dns-recent-card:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
html.light-theme .dns-recent-thumb {
background: #f1f5f9; border-color: #e2e8f0; color: #475569;
}
html.light-theme .dns-project-card:hover {
box-shadow: 0 14px 34px -18px rgba(99,102,241,0.42);
}
html.light-theme .dns-side-item.active {
background: linear-gradient(90deg, rgba(99,102,241,0.14), rgba(99,102,241,0.06));
color: #4338ca;
}
html.light-theme .dns-side-item:hover { background: rgba(99,102,241,0.08); color: #1e293b; }
html, body { margin: 0; padding: 0; height: 100%; font-family: var(--dns-font-sans); background: var(--dns-bg-app); color: var(--dns-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Form controls do not inherit the document font by default; one rule keeps every button/input/textarea on the brand typeface. */
button, input, select, textarea { font-family: inherit; }
a { color: var(--dns-link); }
button { cursor: pointer; }
/* ── Core button system ──────────────────────────── */
.dns-btn {
padding: 8px 14px;
border: none;
border-radius: 6px;
font-size: 0.84rem;
font-weight: 600;
transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
}
.dns-btn:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.dns-btn:active { transform: translateY(0); }
.dns-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.dns-btn-primary { background: #2563eb; color: white; }
.dns-btn-success { background: #16a34a; color: white; }
.dns-btn-teal { background: #0d9488; color: white; }
.dns-btn-slate { background: #334155; color: #f1f5f9; border: 1px solid #475569; }
.dns-btn-danger { background: #dc2626; color: white; }
.dns-btn-sm { padding: 4px 8px; font-size: 0.75rem; font-weight: 500; border-radius: 4px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; transition: background 0.15s, border-color 0.15s; }
.dns-btn-sm:hover { background: #334155; border-color: #475569; }
/* ── Badges ─────────────────────────────────────── */
.badge-green { background:#065f46; color:#34d399; padding:3px 10px; border-radius:6px; font-size:0.78rem; font-weight:600; }
.badge-blue { background:#1d4ed8; color:#dbeafe; padding:3px 10px; border-radius:6px; font-size:0.78rem; font-weight:600; }
.badge-red { background:#7f1d1d; color:#f87171; padding:3px 10px; border-radius:6px; font-size:0.78rem; font-weight:600; }
.badge-yellow { background:#78350f; color:#fcd34d; padding:3px 10px; border-radius:6px; font-size:0.78rem; font-weight:600; }
/* ═══════════════════════════════════════════════
WORKSPACE SHELL — theme-aware classes
═══════════════════════════════════════════════ */
.dns-workspace-shell {
display: flex;
flex-direction: column;
height: 100vh;
}
.dns-workspace-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: #1e293b;
border-bottom: 1px solid #334155;
flex-shrink: 0;
flex-wrap: wrap;
}
.dns-explorer-panel {
width: var(--dns-explorer-panel-width, 300px);
min-width: 160px;
background: var(--dns-surface, #111827);
border-right: 1px solid var(--dns-border, #1e293b);
display: flex;
flex-direction: column;
overflow: hidden;
transition: width 0.25s ease, min-width 0.25s ease;
}
.dns-right-panel {
width: var(--dns-ai-panel-width, 360px);
min-width: 56px;
background: var(--dns-app-bg, #0f172a);
border-left: 1px solid var(--dns-border, #1e293b);
box-shadow: -18px 0 40px -30px rgba(0, 0, 0, 0.65);
display: flex;
flex-direction: column;
overflow: hidden;
transition: width 0.25s ease, min-width 0.25s ease, flex-basis 0.25s ease;
}
/* ── AI panel toggle ─────────────────────────────── */
.ai-panel-toggle-button {
width: 28px; height: 28px;
border: 1px solid #334155; border-radius: 8px;
background: #0f172a; color: #cbd5e1;
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.ai-panel-toggle-button:hover { background:#111827; border-color:#475569; transform: translateY(-1px); }
.ai-panel-toggle-button-large { width: 40px; height: 40px; border-radius: 12px; }
/* Preview device-simulator width switch */
.dns-viewport-switch { display: inline-flex; gap: 2px; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 2px; }
.dns-vp-btn {
border: none; background: transparent; color: #94a3b8; border-radius: 6px;
padding: 3px 8px; font-size: 0.85rem; cursor: pointer; line-height: 1;
transition: background-color 0.15s ease, color 0.15s ease;
}
.dns-vp-btn:hover { color: #e2e8f0; background: #334155; }
.dns-vp-btn.active { background: #3b82f6; color: #fff; }
/* ── Modern workspace toolbar (single row, compact, never wraps) ── */
.dns-toolbar-modern {
display: flex; align-items: center; gap: 6px;
padding: 6px 12px; flex-wrap: nowrap;
/* A real horizontal scroll container: when items outgrow the width they scroll instead of
being pushed off-screen, and the sticky "⋯" button below can actually pin to the right
edge. The scrollbar is hidden; dropdown panels are position:fixed so they are never clipped. */
overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
min-height: 52px; position: relative; z-index: 3000;
background: linear-gradient(180deg, #111a2e, #0f172a);
border-bottom: 1px solid #1e293b;
box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 6px 20px -16px rgba(0,0,0,0.8);
}
.dns-toolbar-modern::-webkit-scrollbar { display: none; }
.dns-toolbar-modern > * { flex-shrink: 0; }
.dns-tb-logo { font-size: 1.05rem; flex-shrink: 0; }
.dns-tb-title {
font-weight: 600; color: #f1f5f9; flex-shrink: 1; min-width: 40px;
max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dns-tb-status { flex-shrink: 1; min-width: 0; max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Status chip always keeps a readable width; everything to its right yields first. */
.dns-tb-statuswrap { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 72px; max-width: 26vw; }
.dns-tb-statuswrap .dns-tb-status { max-width: 100%; }
.dns-tb-diag { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Secondary actions live inline on wide screens and fold into the "⋯" menu on narrow ones.
The "⋯" button itself is ALWAYS rendered and pinned to the right edge so it can never be
cropped, regardless of how many items sit to its left. */
.dns-tb-secondary { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dns-tb-more {
display: inline-flex; flex-shrink: 0; margin-left: auto; padding-left: 6px;
position: sticky; right: 0; z-index: 2;
background: linear-gradient(90deg, rgba(15,23,42,0), #0f172a 30%);
}
/* Toolbar dropdown panels are rendered as siblings of the toolbar (not children), so they sit in
the root stacking context and paint above the AI panel / preview. Fixed to the viewport just
below the toolbar; scroll internally when the viewport is short. */
.dns-project-menu-panel.dns-tb-more-panel {
position: fixed; top: 58px; right: 8px; left: auto;
min-width: 220px; max-width: calc(100vw - 16px); max-height: calc(100vh - 70px);
overflow-y: auto; z-index: 4500;
}
.dns-project-menu-panel.dns-tb-project-panel {
position: fixed; top: 58px; left: 12px;
min-width: 220px; max-width: calc(100vw - 24px); max-height: calc(100vh - 70px);
overflow-y: auto; z-index: 4500;
}
@media (max-width: 1380px) {
.dns-tb-secondary { display: none; }
}
@media (max-width: 1180px) {
.dns-toolbar-modern .dns-tb-btn .dns-tb-label { display: none; }
.dns-toolbar-modern .dns-tb-btn { padding: 0 9px; }
.dns-toolbar-modern .dns-tb-btn-run { padding: 0 10px; }
.dns-tb-title { max-width: 120px; }
}
@media (max-width: 980px) {
.dns-tb-statuswrap { max-width: 20vw; }
}
@media (max-width: 820px) {
.dns-tb-divider { display: none; }
.dns-toolbar-modern .dns-view-switch-btn .dns-tb-label { display: none; }
}
/* ── Publish panel ─────────────────────────────────────────────────────────── */
.dns-publish-dialog {
width: min(760px, 94vw); max-height: 88vh; overflow: auto;
background: var(--dns-bg-surface, #0f172a); color: var(--dns-text, #e2e8f0);
border: 1px solid var(--dns-border, #1e293b); border-radius: 16px; padding: 20px 22px;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
}
.dns-pub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.dns-pub-project { color: #38bdf8; }
.dns-pub-sub { margin: 4px 0 0; font-size: 0.85rem; color: #94a3b8; }
.dns-pub-tabs { display: flex; gap: 4px; border-bottom: 1px solid #1e293b; margin-bottom: 16px; overflow-x: auto; }
.dns-pub-tab {
border: none; background: transparent; color: #94a3b8; padding: 8px 12px; border-radius: 8px 8px 0 0;
font-size: 0.85rem; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
border-bottom: 2px solid transparent;
}
.dns-pub-tab:hover { color: #e2e8f0; background: rgba(30,41,59,0.5); }
.dns-pub-tab.active { color: #f1f5f9; border-bottom-color: #3b82f6; }
.dns-pub-ico { flex: 0 0 auto; vertical-align: -3px; }
.dns-pub-tab .dns-pub-ico { opacity: .8; }
.dns-pub-tab.active .dns-pub-ico { opacity: 1; color: #60a5fa; }
.dns-pub-close {
flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid #334155; background: rgba(30,41,59,0.6);
color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s;
}
.dns-pub-close:hover { color: #f1f5f9; background: #334155; }
.dns-pub-close .dns-pub-ico { width: 18px; height: 18px; }
.dns-pub-body { display: flex; flex-direction: column; gap: 14px; }
.dns-pub-center { align-items: center; justify-content: center; min-height: 120px; flex-direction: row; gap: 10px; color: #94a3b8; }
.dns-pub-section h4 { margin: 0 0 6px; font-size: 1rem; }
.dns-pub-section p { margin: 0 0 12px; color: #cbd5e1; font-size: 0.88rem; line-height: 1.5; }
.dns-pub-section code { background: rgba(30,41,59,0.8); padding: 1px 5px; border-radius: 4px; font-size: 0.8em; }
.dns-pub-callout { padding: 10px 12px; border-radius: 10px; background: rgba(30,41,59,0.6); border: 1px solid #334155; font-size: 0.85rem; line-height: 1.5; }
.dns-pub-callout-lock { border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }
.dns-pub-contrib { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(99,102,241,0.4); background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(34,211,238,0.06)); }
.dns-pub-contrib-text { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: #cbd5e1; min-width: 0; flex: 1; }
.dns-pub-contrib-text > b { display: inline-flex; align-items: center; gap: 6px; color: #e2e8f0; font-size: 0.86rem; }
.dns-pub-contrib-text .dns-rename-input { margin-top: 4px; max-width: 420px; }
.dns-pub-contrib .btn-implement { white-space: nowrap; }
@media (max-width: 640px) { .dns-pub-contrib { flex-direction: column; align-items: stretch; } }
.dns-pub-callout-ok { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); }
.dns-pub-callout a, .dns-pub-link { color: #38bdf8; }
.dns-pub-connected { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.9rem; }
.dns-pub-waiting { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: .8rem; color: var(--dns-text-subtle, #94a3b8); }
.dns-spinner-sm { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dns-border, #334155); border-top-color: var(--dnsc-brand, #6366f1); animation: dns-spin .8s linear infinite; }
.dns-pub-connected img { width: 26px; height: 26px; border-radius: 50%; }
.dns-pub-link-btn { border: none; background: none; color: #94a3b8; text-decoration: underline; cursor: pointer; font-size: 0.8rem; }
.dns-pub-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
.dns-pub-form label, .dns-pub-full { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: #94a3b8; }
.dns-pub-full { margin: 10px 0; }
.dns-pub-check { flex-direction: row !important; align-items: center; gap: 8px !important; color: #cbd5e1 !important; margin: 6px 0 12px; }
.dns-pub-providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dns-pub-provider {
position: relative; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
border-radius: 10px; border: 1px solid #334155; background: rgba(30,41,59,0.5); color: #e2e8f0; cursor: pointer;
}
.dns-pub-provider:hover { border-color: #475569; }
.dns-pub-provider.selected { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6 inset; }
.dns-pub-provider.current { background: rgba(34,197,94,0.08); }
.dns-pub-provider-name { font-weight: 600; font-size: 0.88rem; }
.dns-pub-provider-pkg { font-size: 0.72rem; color: #94a3b8; font-family: ui-monospace, monospace; }
.dns-pub-badge { position: static; display: inline-block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; background: rgba(56,189,248,0.15); color: #38bdf8; margin-left: 6px; }
.dns-pub-provider .dns-pub-badge { position: absolute; top: 8px; right: 8px; margin: 0; }
.dns-pub-hosts { display: flex; flex-direction: column; gap: 8px; }
.dns-pub-host { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #334155; background: rgba(30,41,59,0.4); }
/* ── Version history panel ────────────────────────────────────────────────── */
.dns-vh-dialog {
width: min(720px, 94vw); max-height: 88vh; overflow: auto;
background: var(--dns-bg-surface, #0f172a); color: var(--dns-text, #e2e8f0);
border: 1px solid var(--dns-border, #1e293b); border-radius: 16px; padding: 20px 22px;
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
display: flex; flex-direction: column; gap: 14px;
}
.dns-vh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.dns-vh-project { color: #38bdf8; }
.dns-vh-sub { margin: 4px 0 0; font-size: 0.85rem; color: #94a3b8; max-width: 46ch; }
.dns-vh-filters { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #1e293b; padding-bottom: 12px; flex-wrap: wrap; }
.dns-vh-filter {
border: 1px solid transparent; background: rgba(30,41,59,0.5); color: #94a3b8; padding: 6px 12px; border-radius: 999px;
font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.dns-vh-filter:hover { color: #e2e8f0; }
.dns-vh-filter.active { color: #f1f5f9; background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.4); }
.dns-vh-search {
background: rgba(15,23,42,0.6); border: 1px solid #334155; border-radius: 8px; color: #e2e8f0;
padding: 6px 10px; font-size: 0.8rem; min-width: 180px;
}
.dns-vh-body { flex: 1; min-height: 0; }
.dns-vh-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 160px; color: #94a3b8; text-align: center; padding: 20px; }
.dns-vh-timeline { position: relative; padding-left: 6px; }
.dns-vh-daylabel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; margin: 16px 0 8px; }
.dns-vh-daylabel:first-child { margin-top: 0; }
.dns-vh-item { position: relative; display: flex; gap: 10px; padding-left: 16px; margin-bottom: 10px; }
.dns-vh-item::before {
content: ""; position: absolute; left: 3px; top: 6px; bottom: -10px; width: 1px; background: #1e293b;
}
.dns-vh-item:last-child::before { display: none; }
.dns-vh-item-dot {
position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%;
background: #475569; box-shadow: 0 0 0 3px rgba(71,85,105,0.18);
}
.dns-vh-item-snapshot .dns-vh-item-dot { background: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.18); }
.dns-vh-item-ok .dns-vh-item-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.dns-vh-item-fail .dns-vh-item-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.dns-vh-item-card {
flex: 1; min-width: 0; background: rgba(30,41,59,0.45); border: 1px solid #1e293b; border-radius: 10px; padding: 10px 12px;
}
.dns-vh-item-top { display: flex; align-items: center; gap: 8px; }
.dns-vh-item-icon { flex-shrink: 0; }
.dns-vh-item-title { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-vh-item-time { flex-shrink: 0; font-size: 0.72rem; color: #64748b; }
.dns-vh-item-summary { margin-top: 4px; font-size: 0.8rem; color: #cbd5e1; line-height: 1.4; }
.dns-vh-item-files { margin-top: 6px; font-size: 0.7rem; color: #64748b; }
.dns-vh-item-actions { margin-top: 8px; }
.dns-vh-restore-btn {
border: 1px solid #334155; background: #1e293b; color: #f1f5f9; border-radius: 6px; padding: 5px 10px;
font-size: 0.76rem; cursor: pointer;
}
.dns-vh-restore-btn:hover:not(:disabled) { background: #334155; }
.dns-vh-restore-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dns-vh-status { font-size: 0.8rem; color: #94a3b8; border-top: 1px solid #1e293b; padding-top: 10px; }
/* Toolbar entry point */
.dns-tb-history-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Project-card entry point (landing grid) */
.dns-card-history {
position: absolute; top: 10px; right: 44px; z-index: 2;
width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--dns-border, #334155);
background: rgba(15,23,42,0.65); color: #94a3b8; display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.dns-project-card:hover .dns-card-history { opacity: 1; }
.dns-card-history:hover { background: rgba(56,189,248,0.18); border-color: rgba(56,189,248,0.5); color: #38bdf8; transform: scale(1.05); }
html.light-theme .dns-card-history { background: rgba(255,255,255,0.8); border-color: #e2e8f0; color: #64748b; }
.dns-pub-host-desc { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }
.dns-pub-host-desc a { color: #38bdf8; margin-left: 4px; }
.dns-pub-log { font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: #020617; border: 1px solid #1e293b; color: #cbd5e1; max-height: 220px; overflow: auto; white-space: pre-wrap; }
.dns-pub-log.err { border-color: rgba(239,68,68,0.5); color: #fca5a5; }
.dns-pub-history summary { cursor: pointer; color: #94a3b8; font-size: 0.85rem; }
.dns-pub-history-row { display: flex; gap: 10px; align-items: center; font-size: 0.8rem; padding: 6px 0; border-bottom: 1px solid #1e293b; color: #cbd5e1; }
.dns-pub-history-row.bad { color: #fca5a5; }
.dns-pub-history-row a { color: #38bdf8; }
@media (max-width: 640px) { .dns-pub-form { grid-template-columns: 1fr; } }
/* Generation meter (elapsed / tokens / cost). Rendered in the AI panel header next to the
"Dot Blazer Agent" brand so it never competes with toolbar actions for width. */
.dns-tb-meter {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
line-height: 1.6; white-space: nowrap; cursor: default; color: #cbd5e1;
background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(51, 65, 85, 0.7);
}
.ai-chat-meter { margin-left: 10px; flex-shrink: 1; min-width: 0; overflow: hidden; font-size: 10.5px; padding: 2px 9px; }
.ai-chat-title { min-width: 0; }
html.light-theme .ai-chat-meter { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
.dns-tb-meter-item { display: inline-flex; align-items: center; gap: 4px; }
.dns-tb-meter-item > span { opacity: 0.85; }
.dns-tb-meter-sep { width: 1px; height: 12px; background: rgba(71, 85, 105, 0.7); }
/* Dev-only "active AI model" badge (hidden in production via API flag). */
.dns-model-badge {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
line-height: 1.6; white-space: nowrap; cursor: default;
border: 1px solid transparent;
}
.dns-model-economy { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); }
.dns-model-premium { background: rgba(167, 139, 250, 0.14); color: #a78bfa; border-color: rgba(167, 139, 250, 0.4); }
.dns-tb-spacer { flex: 1 1 auto; min-width: 8px; }
.dns-tb-divider { width: 1px; height: 20px; background: #334155; margin: 0 4px; flex-shrink: 0; }
.dns-tb-group { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dns-tb-btn {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 32px;
border: 1px solid rgba(51, 65, 85, 0.7); background: rgba(30, 41, 59, 0.55); color: #cbd5e1;
border-radius: 8px; padding: 0 11px; font-size: 0.78rem; font-weight: 500;
cursor: pointer; white-space: nowrap; line-height: 1;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.dns-tb-btn svg { flex-shrink: 0; opacity: 0.9; }
.dns-tb-btn:hover:not(:disabled) { background: #1e293b; border-color: #475569; color: #f1f5f9; }
.dns-tb-btn:active:not(:disabled) { transform: translateY(1px); }
.dns-tb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dns-tb-btn-accent {
background: linear-gradient(90deg, #3b82f6, #06b6d4); border-color: transparent; color: #f0f9ff; font-weight: 600;
}
.dns-tb-btn-accent:hover:not(:disabled) { filter: brightness(1.08); }
/* Run � the primary action, Replit-style green */
.dns-tb-btn-run {
background: linear-gradient(180deg, #22c55e, #16a34a); border-color: rgba(22, 163, 74, 0.6);
color: #052e16; font-weight: 700; padding: 0 14px;
box-shadow: 0 4px 14px -6px rgba(34, 197, 94, 0.7);
}
.dns-tb-btn-run:hover:not(:disabled) { background: linear-gradient(180deg, #34d399, #22c55e); border-color: #22c55e; color: #052e16; }
.dns-tb-btn-run:disabled { opacity: 0.55; }
.dns-tb-spinner {
width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(5, 46, 22, 0.35);
border-top-color: #052e16; animation: dns-tb-spin 0.8s linear infinite;
}
@keyframes dns-tb-spin { to { transform: rotate(360deg); } }
.dns-tb-btn-active { border-color: #6366f1; background: #1e1b4b; color: #c7d2fe; }
.dns-tb-icon { padding: 6px 8px; }
/* Back-to-projects button — clearly noticeable pill */
.dns-tb-back {
background: #1e293b; border-color: #334155; color: #e2e8f0; font-weight: 600;
}
.dns-tb-back:hover:not(:disabled) { background: #334155; border-color: #64748b; color: #f8fafc; }
.dns-tb-back span:first-child { font-size: 0.95rem; line-height: 1; }
html.light-theme .dns-tb-back { background: #e2e8f0; border-color: #cbd5e1; color: #1e293b; }
html.light-theme .dns-tb-back:hover:not(:disabled) { background: #cbd5e1; border-color: #94a3b8; }
/* Progressively hide button text labels on narrower toolbars so it always stays one row.
Labels drop early (icons carry the meaning via title), then the project title shrinks,
then the toolbar is allowed to scroll horizontally instead of cropping its right end. */
@media (max-width: 1440px) { .dns-tb-label { display: none; } .dns-tb-btn { padding: 0 9px; } .dns-tb-btn-run { padding: 0 10px; } }
@media (max-width: 1180px) {
.dns-tb-title { max-width: 120px; }
}
@media (max-width: 900px) {
.dns-tb-title { max-width: 80px; }
.dns-toolbar-modern { overflow-x: auto; overflow-y: visible; scrollbar-width: thin; }
.dns-tb-status { display: none; }
}
html.light-theme .dns-tb-title { color: #0f172a; }
html.light-theme .dns-toolbar-modern { background: linear-gradient(180deg, #ffffff, #f8fafc); border-bottom-color: #e2e8f0; box-shadow: 0 6px 20px -18px rgba(15, 23, 42, 0.35); }
html.light-theme .dns-tb-btn { background: #ffffff; border-color: #e2e8f0; color: #334155; }
html.light-theme .dns-tb-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; }
html.light-theme .dns-tb-btn-run { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: #16a34a; color: #ffffff; }
html.light-theme .dns-tb-btn-run:hover:not(:disabled) { color: #ffffff; }
html.light-theme .dns-tb-spinner { border-color: rgba(255,255,255,0.4); border-top-color: #fff; }
html.light-theme .dns-tb-divider { background: #e2e8f0; }
html.light-theme .dns-tb-divider { background: #e2e8f0; }
/* ── Preview panel (theme-aware) ─────────────────── */
.dns-preview-wrap { background: var(--dns-bg-elevated, #0f172a); }
.dns-preview-header { border-bottom: 1px solid var(--dns-border, #1e293b); }
.dns-preview-title { color: #93c5fd; }
.dns-preview-stage { background: var(--dns-bg-inset, #0b1220); }
.dns-preview-btn {
background: var(--dns-bg-surface, #334155); border: 1px solid transparent;
color: var(--dns-text-strong, #f1f5f9); border-radius: 6px; padding: 4px 9px;
cursor: pointer; font-size: 0.7rem; font-weight: 600;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.dns-preview-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.dns-preview-btn:disabled { opacity: 0.45; cursor: not-allowed; }
html.light-theme .dns-preview-btn {
background: #ffffff; border-color: #e2e8f0; color: #334155;
box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
html.light-theme .dns-preview-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
html.light-theme .dns-preview-title { color: #2563eb; }
/* ── Light-theme fixes for AI assistant + preview controls ── */
html.light-theme .dns-vp-btn { color: #475569; }
html.light-theme .dns-vp-btn:hover { color: #0f172a; background: #e2e8f0; }
html.light-theme .dns-viewport-switch { background: #f1f5f9; border-color: #cbd5e1; }
html.light-theme .ai-panel-toggle-button {
background: #ffffff; border-color: #e2e8f0; color: #334155;
}
html.light-theme .ai-panel-toggle-button:hover { background: #f1f5f9; border-color: #cbd5e1; }
html.light-theme .ai-tool-btn { background: #ffffff; border-color: #e2e8f0; color: #475569; }
html.light-theme .ai-tool-btn:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
html.light-theme .ai-tool-btn.active { color: #4f46e5; border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.1); }
html.light-theme .ai-mode-seg { color: #64748b; }
html.light-theme .ai-mode-seg:hover:not(.active) { color: #0f172a; }
html.light-theme .ai-composer-toolbar { border-color: #e2e8f0; }
html.light-theme .dns-btn-sm { background: #ffffff; border-color: #e2e8f0; color: #334155; }
html.light-theme .dns-btn-sm:hover { background: #f1f5f9; border-color: #cbd5e1; }
html.light-theme .dns-btn-slate { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }
/* ── Brand logo (theme-aware) ──────────────
The ".>" wordmark. Sizes keep the 300x56 artboard ratio so the mark never
distorts; .dns-logo-mark renders the tile glyph only (chat avatar, badges). */
.dns-logo {
display: inline-block;
height: 54px;
width: 289px;
background-image: url('../img/dotblazer-logo-dark.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
vertical-align: middle;
flex-shrink: 0;
}
.dns-logo-sm { height: 42px; width: 225px; }
.dns-logo-lg { height: 84px; width: 450px; }
.dns-logo-mark {
height: 26px;
width: 26px;
background-image: url('../img/dotblazer-mark.svg');
background-position: center;
}
html.light-theme .dns-logo { background-image: url('../img/dotblazer-logo-light.svg'); filter: none; }
html.light-theme .dns-logo-mark { background-image: url('../img/dotblazer-mark.svg'); }
/* Workbench toolbars are crowded: show only the ".>" mark, sized and aligned to the Back pill beside it. */
.dns-tb-logo { height: 32px; width: 32px; justify-content: center; border-radius: 8px; flex-shrink: 0; }
.dns-tb-logo .dns-logo-mark { height: 24px; width: 24px; }
/* ── Confirmation modal (delete project, destructive actions) ──────────────
Theme-aware overlay + dialog. Uses the shared .dns-btn family for actions. */
.dns-modal-overlay {
position: fixed; inset: 0; z-index: 4000;
display: flex; align-items: center; justify-content: center;
padding: 20px;
background: rgba(2, 6, 23, 0.68);
backdrop-filter: blur(4px);
animation: dns-modal-fade 0.16s ease-out;
}
/* Confirmations Mira triggers must sit above her window (agent backdrop is 7000). */
.dns-modal-overlay.dns-modal-over-agent { z-index: 7200; }
.dns-credits-loading { display: inline-block; min-width: 1.6em; text-align: center; opacity: .7; animation: dnsFadePulse 1.1s ease-in-out infinite; }
.dns-recent-loading { font-size: .72rem; color: #94a3b8; opacity: .8; animation: dnsFadePulse 1.1s ease-in-out infinite; }
.dns-recent-card.proj-skeleton { min-height: 74px; }
@keyframes dnsFadePulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
.dns-modal {
width: 100%; max-width: 430px;
background: var(--dns-bg-surface, #131c30);
border: 1px solid var(--dns-border, #1e293b);
border-radius: 14px;
box-shadow: 0 24px 60px -24px rgba(2, 6, 23, 0.85);
overflow: hidden;
animation: dns-modal-rise 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.dns-modal-body { display: flex; gap: 14px; padding: 20px 20px 16px; }
.dns-modal-icon {
flex-shrink: 0;
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.dns-modal-danger .dns-modal-icon {
background: rgba(220, 38, 38, 0.14);
color: #f87171;
}
.dns-modal-copy { min-width: 0; }
.dns-modal-title {
margin: 2px 0 6px; font-size: 1rem; font-weight: 600;
color: var(--dns-text, #f1f5f9); letter-spacing: -0.01em;
}
.dns-modal-text {
margin: 0; font-size: 0.845rem; line-height: 1.55;
color: var(--dns-text-muted, #94a3b8); word-break: break-word;
}
.dns-modal-text strong { color: var(--dns-text, #f1f5f9); font-weight: 600; }
.dns-modal-error {
margin-top: 12px; padding: 9px 11px; border-radius: 8px;
background: rgba(220, 38, 38, 0.10);
border: 1px solid rgba(220, 38, 38, 0.30);
color: #fca5a5; font-size: 0.78rem; line-height: 1.45;
}
.dns-modal-actions {
display: flex; justify-content: flex-end; gap: 8px;
padding: 13px 20px;
background: var(--dns-bg-surface-2, #101728);
border-top: 1px solid var(--dns-border, #1e293b);
}
.dns-modal-actions .dns-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center; }
.dns-modal-actions .dns-btn svg { flex: 0 0 auto; }
.dns-modal-actions .dns-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.dns-btn-spinner {
width: 13px; height: 13px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #ffffff;
animation: dns-spin 0.7s linear infinite;
}
@keyframes dns-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dns-modal-rise {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes dns-spin { to { transform: rotate(360deg); } }
html.light-theme .dns-modal-overlay { background: rgba(15, 23, 42, 0.42); }
html.light-theme .dns-modal {
background: #ffffff; border-color: #e2e8f0;
box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.40);
}
html.light-theme .dns-modal-actions { background: #f8fafc; border-top-color: #e2e8f0; }
html.light-theme .dns-modal-danger .dns-modal-icon { background: #fee2e2; color: #dc2626; }
html.light-theme .dns-modal-error {
background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
/* ── Minimized active build pill ─────────────────────────────────────────
Shown on the landing page while a generation keeps running in the background. */
.dns-minibuild {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4900;
display: flex; align-items: center; gap: 14px;
width: min(560px, calc(100vw - 32px));
padding: 12px 14px 12px 16px;
background: var(--dns-bg-surface, #131c30);
border: 1px solid var(--dnsc-brand, #7d81f5);
border-radius: 14px;
box-shadow: 0 18px 48px -18px rgba(2, 6, 23, 0.9), 0 0 0 1px rgba(125, 129, 245, 0.15);
animation: dns-toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.dns-minibuild.done { border-color: #22c55e; }
/* Cross-page floating chip (MainLayout): sits bottom-right so it never covers a page's own footer CTA. */
.dns-minibuild-float { left: auto; right: 22px; transform: none; width: min(420px, calc(100vw - 32px)); border-color: var(--dnsc-brand, #7d81f5); font-size: 1rem; }
.dns-minibuild-float .dns-minibuild-ico { font-size: 1.15rem; }
.dns-minibuild-dismiss { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--dns-border, #1e293b); background: transparent; color: var(--dns-text-subtle, #94a3b8); font-size: 1rem; line-height: 1; cursor: pointer; }
.dns-minibuild-dismiss:hover { color: #f87171; border-color: #f87171; }
.dns-minibuild-ico { flex-shrink: 0; width: 26px; display: flex; justify-content: center; color: var(--dnsc-brand, #7d81f5); }
.dns-minibuild-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dns-minibuild-title { font-size: 0.86rem; font-weight: 700; color: var(--dns-text, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-minibuild-sub { font-size: 0.76rem; color: var(--dns-text-subtle, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-minibuild-bar { height: 4px; border-radius: 999px; background: var(--dns-border, #1e293b); overflow: hidden; margin-top: 2px; }
.dns-minibuild-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--dnsc-brand, #7d81f5), #38bdf8); transition: width .4s ease; }
.dns-minibuild-max { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 0.8rem; white-space: nowrap; }
.dns-card-locked { opacity: 0.55; cursor: not-allowed; }
.dns-card-locked:hover { transform: none !important; box-shadow: none !important; }
/* ── Toast notifications ───────────────────────────────────────────────────
Bottom-right stack. Progress toasts spin until resolved into success/error. */
.dns-toast-stack {
position: fixed; right: 20px; bottom: 20px; z-index: 6000;
display: flex; flex-direction: column; gap: 10px;
max-width: min(380px, calc(100vw - 40px));
pointer-events: none;
}
.dns-toast {
pointer-events: auto;
display: flex; align-items: flex-start; gap: 11px;
padding: 12px 13px;
background: var(--dns-bg-surface, #131c30);
border: 1px solid var(--dns-border, #1e293b);
border-left: 3px solid var(--dns-text-subtle, #7787a1);
border-radius: 11px;
box-shadow: 0 16px 40px -18px rgba(2, 6, 23, 0.8);
animation: dns-toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.dns-toast-out { animation: dns-toast-exit 0.18s ease-in forwards; }
.dns-toast-progress { border-left-color: var(--dnsc-brand, #7d81f5); }
.dns-toast-success { border-left-color: #22c55e; }
.dns-toast-error { border-left-color: #ef4444; }
.dns-toast-info { border-left-color: #38bdf8; }
.dns-toast-icon {
flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
}
.dns-toast-progress .dns-toast-icon { color: var(--dnsc-brand, #7d81f5); }
.dns-toast-success .dns-toast-icon { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.dns-toast-error .dns-toast-icon { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.dns-toast-info .dns-toast-icon { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.dns-toast-copy { flex: 1; min-width: 0; }
.dns-toast-title {
color: var(--dns-text, #f1f5f9); font-size: 0.83rem; font-weight: 600;
letter-spacing: -0.005em;
}
.dns-toast-detail {
color: var(--dns-text-muted, #94a3b8); font-size: 0.765rem;
line-height: 1.45; margin-top: 2px;
overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dns-toast-close {
flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--dns-text-subtle, #7787a1); font-size: 1.05rem; line-height: 1;
padding: 0 2px; opacity: 0.7; transition: opacity 0.15s ease, color 0.15s ease;
}
.dns-toast-close:hover { opacity: 1; color: var(--dns-text, #f1f5f9); }
.dns-toast-spinner {
width: 15px; height: 15px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--dnsc-brand, #7d81f5) 28%, transparent);
border-top-color: var(--dnsc-brand, #7d81f5);
animation: dns-spin 0.7s linear infinite;
}
@keyframes dns-toast-in {
from { opacity: 0; transform: translateY(10px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@keyframes dns-toast-exit {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateX(14px) scale(0.97); }
}
html.light-theme .dns-toast {
background: #ffffff; border-color: #e2e8f0;
box-shadow: 0 16px 40px -18px rgba(15, 23, 42, 0.35);
}
html.light-theme .dns-toast-success .dns-toast-icon { background: #dcfce7; color: #16a34a; }
html.light-theme .dns-toast-error .dns-toast-icon { background: #fee2e2; color: #dc2626; }
html.light-theme .dns-toast-info .dns-toast-icon { background: #e0f2fe; color: #0284c7; }
@media (max-width: 640px) {
.dns-toast-stack { right: 12px; left: 12px; bottom: 12px; max-width: none; }
.dns-account-bar.compact .dns-popover { left: 8px; right: 8px; width: auto; }
.dns-project-menu-panel.dns-tb-more-panel, .dns-project-menu-panel.dns-tb-project-panel { left: 8px; right: 8px; max-width: none; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
.dns-toast, .dns-toast-out { animation: none; }
}
/* ── Project management dropdown ─────────────────── */
.dns-project-menu { position: relative; display: inline-flex; align-items: center; }
.dns-project-menu-trigger {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 1px solid transparent; border-radius: 8px;
padding: 4px 8px; color: var(--dns-text); font-weight: 600; font-size: 0.9rem;
transition: background 0.15s, border-color 0.15s;
}
.dns-project-menu-trigger:hover { background: var(--dns-bg-surface-2); border-color: var(--dns-border-strong); }
.dns-caret { font-size: 0.7rem; opacity: 0.7; }
.dns-fav-star { color: #f59e0b; font-size: 0.85rem; }
.dns-menu-backdrop { position: fixed; inset: 0; z-index: 4400; }
.dns-project-menu-panel {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 4000;
min-width: 210px; padding: 6px;
background: var(--dns-bg-surface); border: 1px solid var(--dns-border-strong);
border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.dns-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border: none; background: transparent; border-radius: 7px;
color: var(--dns-text); font-size: 0.85rem; text-align: left;
transition: background 0.12s;
}
.dns-menu-item:hover { background: var(--dns-bg-surface-2); }
.dns-menu-item-danger { color: #ef4444; }
.dns-menu-item-danger:hover { background: rgba(239,68,68,0.12); }
.dns-menu-sep { height: 1px; margin: 4px 6px; background: var(--dns-border); }
/* ── Rename dialog ───────────────────────────────── */
.dns-rename-dialog {
width: min(420px, 92vw);
background: var(--dns-bg-surface); color: var(--dns-text);
border: 1px solid var(--dns-border-strong); border-radius: 14px;
padding: 22px; box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.dns-rename-input {
width: 100%; padding: 10px 12px; font-size: 0.95rem;
background: var(--dns-bg-app); color: var(--dns-text);
border: 1px solid var(--dns-border-strong); border-radius: 8px;
}
.dns-rename-input:focus { outline: none; border-color: var(--dns-accent-2); }
/* ── Dev-only Red Flag repair diagnostics ─────────────────────────────────── */
.dns-tb-redflag {
border: 1px solid #1e293b; background: #0b1220; color: #94a3b8;
border-radius: 8px; padding: 4px 9px; cursor: pointer; font-size: 0.9rem;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.dns-tb-redflag:hover { border-color: #334155; background: #111c31; }
/* Blinks whenever ANY issue exists (client transport death, server repair failure, trace
failure or an errored run). A static tint was too easy to miss when the run had already
scrolled past, so the alert now actively pulls the eye until the user opens the panel. */
.dns-tb-redflag-alert {
border-color: #b91c1c; background: #2a0f0f; color: #fecaca;
animation: dnsRedFlagBlink 1.1s ease-in-out infinite;
}
@keyframes dnsRedFlagBlink {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); border-color: #7f1d1d; }
50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.28); border-color: #ef4444; }
}
@media (prefers-reduced-motion: reduce) {
.dns-tb-redflag-alert { animation: none; border-color: #ef4444; }
}
/* Live "working model" chip: provider / model that answered the latest phase. Green = ok,
amber = answered by an outage fallback, red = the call failed. */
.dns-tb-model {
display: inline-flex; align-items: center; gap: 6px; max-width: 320px; min-width: 0;
border: 1px solid #1e293b; background: #0b1220; color: #cbd5e1;
border-radius: 8px; padding: 4px 9px; cursor: pointer; font-size: 0.74rem; white-space: nowrap;
}
.dns-tb-model > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.dns-tb-model-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748b; flex: 0 0 auto; }
.dns-tb-model-ok .dns-tb-model-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dns-tb-model-fallback { border-color: #92400e; color: #fde68a; }
.dns-tb-model-fallback .dns-tb-model-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.dns-tb-model-failed { border-color: #b91c1c; background: #2a0f0f; color: #fecaca; animation: dnsRedFlagBlink 1.1s ease-in-out infinite; }
.dns-tb-model-failed .dns-tb-model-dot { background: #ef4444; }
.dns-tb-model-phase { color: #94a3b8; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; }
.dns-tb-model-fails { color: #f87171; font-weight: 700; }
.dns-rf-callout-neutral { border-color: #1e293b; background: #0b1220; }
.dns-rf-callout-neutral .dns-rf-callout-title { color: #94a3b8; }
.dns-redflag-dialog {
width: min(920px, 94vw); max-height: 82vh; overflow: auto;
background: var(--dns-bg-surface); color: var(--dns-text);
border: 1px solid var(--dns-border-strong); border-radius: 14px;
padding: 20px; box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.dns-rf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.dns-rf-devtag {
font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em;
background: #1e293b; color: #94a3b8; border-radius: 999px; padding: 3px 8px; margin-left: 8px;
}
.dns-rf-empty { color: #94a3b8; font-size: 0.86rem; }
.dns-rf-callout {
border: 1px solid #7f1d1d; background: #1a0d0d; border-radius: 10px;
padding: 12px 14px; margin-bottom: 14px;
}
.dns-rf-callout-title {
font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
color: #f87171; font-weight: 700; margin-bottom: 6px;
}
.dns-rf-file { font-family: var(--dns-font-mono, monospace); font-size: 0.76rem; color: #7dd3fc; }
.dns-rf-diag {
margin: 8px 0 6px; padding: 8px 10px; background: #0b1220; border-radius: 6px;
font-size: 0.74rem; color: #fca5a5; white-space: pre-wrap; word-break: break-word;
}
.dns-rf-reason { font-size: 0.8rem; color: #cbd5e1; }
.dns-rf-list { display: flex; flex-direction: column; gap: 4px; }
.dns-rf-row {
display: grid; grid-template-columns: 52px minmax(140px, 1.4fr) 88px 90px minmax(180px, 1.2fr);
gap: 8px; align-items: baseline;
font-size: 0.74rem; padding: 6px 8px; border-radius: 6px; background: #0b1220;
}
.dns-rf-row-slow {
background: #3b1d08; border: 1px solid #d97706;
}
.dns-rf-slow {
color: #fbbf24; font-weight: 700;
}
.dns-rf-time { color: #64748b; font-family: var(--dns-font-mono, monospace); }
.dns-rf-phase { color: #94a3b8; }
.dns-rf-strategy { color: #e2e8f0; font-weight: 600; }
.dns-rf-detail { color: #94a3b8; word-break: break-word; }
.dns-rf-ok { color: #4ade80; font-weight: 600; }
.dns-rf-bad { color: #f87171; font-weight: 600; }
.dns-rf-warn { color: #fbbf24; font-weight: 600; }
.dns-rf-muted { color: #64748b; font-weight: 600; }
/* Stack-trace audit: a step that started and never finished is the stall point. */
.dns-rf-row-stalled {
background: #2a0f14; border: 1px solid #b91c1c;
animation: dnsRedFlagBlink 1.1s steps(1, end) infinite;
}
.dns-rf-member { color: #7dd3fc; font-family: var(--dns-font-mono, monospace); }
.dns-rf-trace-detail {
padding: 8px 12px 12px; background: #0a1020;
border-left: 2px solid #1e293b; border-radius: 0 0 6px 6px;
}
.dns-rf-kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px; font-size: 0.74rem; padding: 2px 0; }
.dns-rf-stack {
margin: 8px 0 6px; padding: 8px 10px; background: #0b1220; border-radius: 6px;
font-size: 0.74rem; color: #93c5fd; white-space: pre-wrap; word-break: break-word;
font-family: var(--dns-font-mono, monospace);
}
.dns-rf-k { color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.dns-rf-v { color: #e2e8f0; word-break: break-word; }
.dns-rf-trace-detail .dns-rf-diag {
color: #cbd5e1; max-height: 320px; overflow: auto;
font-family: var(--dns-font-mono, monospace);
}
/* Bolt-style segmented view switch (Preview / Code) in the top toolbar */
.dns-view-switch {
display: inline-flex; align-items: center;
background: #0b1220; border: 1px solid #1e293b; border-radius: 999px;
padding: 3px; gap: 2px;
}
.dns-view-switch-btn {
border: none; background: transparent; color: #94a3b8; cursor: pointer;
font-size: 0.78rem; font-weight: 600; padding: 5px 14px; border-radius: 999px;
display: inline-flex; align-items: center;
transition: background-color 0.2s ease, color 0.2s ease;
}
.dns-view-switch-btn:hover { color: #e2e8f0; }
.dns-view-switch-btn.active {
background: linear-gradient(90deg, #3b82f6, #06b6d4); color: #f0f9ff;
box-shadow: 0 1px 6px rgba(59,130,246,0.35);
}
html.light-theme .dns-view-switch { background: #f1f5f9; border-color: #cbd5e1; }
html.light-theme .dns-view-switch-btn { color: #475569; }
html.light-theme .dns-view-switch-btn.active { color: #f0f9ff; }
/* Bottom dockable build panel (VS-style) */
.dns-build-dock {
border-top: 1px solid #1e293b; background: #0b1220;
display: flex; flex-direction: column; overflow: hidden;
transition: height 0.25s ease; position: relative;
}
.dns-build-dock-resize {
position: absolute; top: 0; left: 0; right: 0; height: 6px;
cursor: ns-resize; background: transparent; z-index: 5;
}
.dns-build-dock-resize:hover { background: #475569; }
.dns-build-dock-header {
display: flex; align-items: center; gap: 4px;
padding: 8px 14px; border-bottom: 1px solid #1e293b; flex-shrink: 0;
}
.dns-build-dock-body { flex: 1; overflow-y: auto; padding: 12px 14px; line-height: 1.5; }
.dns-build-dock-mobile-hint { display: none; }
html.light-theme .dns-build-dock { background: #f8fafc; border-color: #e2e8f0; }
.dns-build-diag.err { background: rgba(239,68,68,.12); }
.dns-build-diag.ok { background: rgba(34,197,94,.10); }
html.light-theme .dns-build-diag.err { background: #fef2f2; }
html.light-theme .dns-build-diag.ok { background: #f0fdf4; }
/* Header progress strip is a phone affordance; desktop keeps the full progress dock. */
.ai-chat-progress { display: none; }
html.light-theme .dns-build-dock-header { border-color: #e2e8f0; }
/* Bolt-style fullscreen preview: editor/preview panel overlays the entire workbench */
.dns-preview-fullscreen {
position: fixed !important;
inset: 0 !important;
z-index: 3900 !important; /* above .dns-toolbar-modern (3000) so the header with Exit stays reachable */
width: 100vw !important;
height: 100vh !important;
min-width: 0 !important;
flex: none !important;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}
.dns-preview-exit-fab {
position: fixed; top: 10px; right: 14px; z-index: 3950;
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 999px; font-size: .76rem; font-weight: 600;
background: rgba(15, 23, 42, .88); color: #e2e8f0; border: 1px solid rgba(148, 163, 184, .35);
box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(6px); cursor: pointer;
}
.dns-preview-exit-fab:hover { background: #1e293b; }
/* "Waiting for preview" animated state (shown in mid preview during generation/build) */
/* ── Preview shell responsiveness ────────────────────────────────────────
The preview lives inside a user-resizable pane, so it must respond to the
PANE width (container query), not the viewport width. */
.dns-preview-wrap { container-type: inline-size; container-name: dnspv; }
.dns-preview-header {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 8px 12px; flex: 0 0 auto; min-width: 0;
flex-wrap: wrap;
}
.dns-preview-title {
font-size: 0.76rem; font-weight: 700; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dns-preview-actions {
display: flex; align-items: center; gap: 6px;
min-width: 0; flex-wrap: wrap; justify-content: flex-end;
}
.dns-preview-sep { width: 1px; height: 18px; background: var(--dns-border, #334155); margin: 0 2px; }
.dns-preview-hint { font-size: 0.7rem; color: var(--dnsc-muted, #9aa3b8); white-space: nowrap; padding: 0 4px; cursor: help; }
.dns-preview-stage {
flex: 1 1 auto; min-width: 0; min-height: 0;
overflow: auto; display: flex; justify-content: center;
}
.dns-preview-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.dns-vp-btn { display: inline-flex; align-items: center; justify-content: center; }
.dns-pv-ico { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.dns-preview-title { display: inline-flex; align-items: center; gap: 6px; }
/* Narrow pane: drop the button captions and keep icon-only controls on one row. */
@container dnspv (max-width: 620px) {
.dns-preview-btn .dns-pv-label { display: none; }
.dns-preview-btn { padding-left: 8px; padding-right: 8px; }
}
@container dnspv (max-width: 420px) {
.dns-preview-title .dns-pv-label { display: none; }
.dns-preview-sep { display: none; }
.dns-preview-header { padding: 6px 8px; gap: 4px; }
.dns-preview-actions { gap: 4px; }
}
/* Fallback for engines without container query support. */
@supports not (container-type: inline-size) {
@media (max-width: 1100px) {
.dns-preview-btn .dns-pv-label { display: none; }
}
}
.dns-preview-waiting {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100%; text-align: center; padding: 32px; gap: 2px;
animation: dnscFade 0.35s ease both;
}
.dns-preview-waiting-title {
font-size: 0.9rem; font-weight: 600; color: var(--dns-text, #e2e8f0); margin: 16px 0 2px;
}
.dns-preview-waiting-sub {
font-size: 0.78rem; color: var(--dns-text-subtle, #64748b); margin: 0; max-width: 34ch;
}
.dns-preview-empty { text-align: center; color: var(--dns-text-subtle, #64748b); padding: 32px; }
/* Full-screen acknowledgement while a project opens from the Projects/Recent lists. */
.dns-opening-overlay {
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--dns-bg, #0b1120) 82%, transparent);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
animation: dnscFade 0.2s ease both;
}
.dns-opening-overlay .dns-preview-waiting { height: auto; }
/* Light "booting" pulse — three dots breathing in sequence. */
.dns-preview-pulse { display: flex; align-items: center; gap: 8px; height: 44px; }
.dns-preview-pulse span {
width: 10px; height: 10px; border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #06b6d4);
animation: dns-preview-breathe 1.2s ease-in-out infinite;
}
.dns-preview-pulse span:nth-child(2) { animation-delay: 0.16s; }
.dns-preview-pulse span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dns-preview-breathe {
0%, 100% { transform: scale(0.7); opacity: 0.35; }
50% { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.dns-preview-progress-bar { animation: none; }
}
.dns-preview-spinner {
width: 44px; height: 44px; border-radius: 50%;
border: 3px solid #1e293b; border-top-color: #06b6d4;
animation: dns-spin 0.9s linear infinite;
}
@keyframes dns-spin { to { transform: rotate(360deg); } }
.dns-preview-progress-track {
width: 160px; max-width: 60%; height: 2px; border-radius: 999px;
background: var(--dns-bg-inset, #0f172a); overflow: hidden;
}
.dns-preview-progress-bar {
height: 100%; width: 40%;
background: linear-gradient(90deg, transparent, var(--dnsc-brand, #6366f1), transparent);
border-radius: 999px;
animation: dns-indeterminate 2.2s ease-in-out infinite;
}
@keyframes dns-indeterminate {
0% { margin-left: -40%; }
100% { margin-left: 100%; }
}
.ai-panel-body-shell { flex:1; display:flex; flex-direction:column; gap:10px; overflow:hidden; margin-top:10px; }
.ai-panel-body-shell.collapsed { align-items:center; justify-content:center; }
.ai-panel-collapsed-rail {
flex:1; width:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:12px; color:#94a3b8;
}
/* ── AI plan cards ─────────────────────────────────
These consume theme tokens rather than fixed slate hexes: they previously
hardcoded dark surfaces with no light-theme override, so on the paper theme
the plan rendered as dark blocks with near-invisible text. */
.ai-plan-scroll-panel { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; }
.ai-plan-summary-card, .ai-plan-steps-card, .ai-plan-note-card { background:var(--dns-bg-surface-2); border:1px solid var(--dns-border); border-radius:8px; }
.ai-plan-summary-card, .ai-plan-note-card { padding: 12px; }
.ai-plan-steps-card { padding: 10px 12px; background: var(--dns-bg-surface-2); }
.ai-plan-step { padding:8px 10px; background:var(--dns-bg-inset); border:1px solid var(--dns-border); border-radius:6px; }
.ai-plan-step-card { padding:8px 10px; background:var(--dns-bg-inset); border:1px solid var(--dns-border); border-radius:6px; }
.ai-plan-step-impact { margin-top:8px; padding-top:8px; border-top:1px solid var(--dns-border); display:flex; flex-direction:column; gap:6px; color:var(--dns-text-muted); }
.ai-plan-step-impact-label { display:flex; align-items:center; gap:6px; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--dns-text-subtle); }
.ai-plan-step-impact-icon { font-size:0.8rem; opacity:0.8; }
.ai-plan-step-impact-files { display:flex; flex-wrap:wrap; gap:6px; }
.ai-plan-step-file-chip {
display:inline-flex; align-items:center; gap:4px;
padding:2px 8px; border-radius:999px;
background:var(--dns-bg-inset); border:1px solid var(--dns-border);
color:var(--dns-link); font-size:0.71rem; font-family:monospace;
}
/* ═══════════════════════════════════════════════
LANDING PAGE
═══════════════════════════════════════════════ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
70% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes glow-border {
0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(99,102,241,0.55), 0 0 26px rgba(99,102,241,0.16), 0 20px 44px rgba(0,0,0,0.45); }
33% { box-shadow: inset 0 0 0 1.5px rgba(56,189,248,0.6), 0 0 32px rgba(56,189,248,0.19), 0 20px 44px rgba(0,0,0,0.45); }
66% { box-shadow: inset 0 0 0 1.5px rgba(139,92,246,0.55), 0 0 28px rgba(139,92,246,0.17), 0 20px 44px rgba(0,0,0,0.45); }
}
@keyframes badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
50% { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
@keyframes latest-card-breathe {
0%, 100% { box-shadow: 0 6px 24px rgba(99,102,241,0.18), 0 2px 8px rgba(0,0,0,0.4); }
50% { box-shadow: 0 10px 44px rgba(99,102,241,0.34), 0 2px 12px rgba(0,0,0,0.45),
inset 0 0 0 1px rgba(129,140,248,0.18); }
}
.landing-root {
min-height: 100vh;
background: radial-gradient(ellipse at 20% 0%, var(--dns-bg-stream-glow-1) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, var(--dns-bg-stream-glow-2) 0%, transparent 50%),
var(--dns-bg-stream);
display: flex;
flex-direction: column;
overflow-y: auto; /* whole page scrolls */
scrollbar-width: thin;
scrollbar-color: rgba(148,163,184,0.35) transparent;
}
.landing-root::-webkit-scrollbar { width: 8px; }
.landing-root::-webkit-scrollbar-track { background: transparent; }
.landing-root::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.landing-root::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.55); background-clip: content-box; }
html.light-theme .landing-root { scrollbar-color: rgba(100,116,139,0.35) transparent; }
/* The viewport-height section — AI panel always fills the screen */
.landing-viewport {
height: 100vh;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative; /* anchors the floating theme toggle */
}
/* Theme toggle — base button */
.theme-toggle {
width: 38px; height: 38px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(15,23,42,0.7);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
font-size: 1.05rem;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
color: #cbd5e1;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.theme-toggle:hover {
background: rgba(30,41,59,0.9);
border-color: rgba(99,102,241,0.5);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(99,102,241,0.25);
}
/* Fixed variant — always top-right of the viewport */
.theme-toggle-fixed {
position: absolute;
top: 18px; right: 24px;
z-index: 100;
}
html.light-theme .theme-toggle { background: rgba(255,255,255,0.85); border-color: rgba(99,102,241,0.2); color: #4338ca; }
/* main 2-col layout */
.landing-body {
display: grid;
grid-template-columns: 28% 1fr;
gap: 0;
flex: 1;
min-height: 0;
height: 100%;
overflow: hidden;
}
/* full-width layout when no projects (left panel hidden) */
.landing-body-full {
display: grid;
grid-template-columns: 1fr;
gap: 0;
flex: 1;
min-height: 0;
height: 100%;
overflow: hidden;
}
/* ══ Bolt-style landing sidebar ══════════════════ */
.dns-sidebar {
width: 264px; flex-shrink: 0;
display: flex; flex-direction: column;
background: var(--dns-surface, #0d1424);
border-right: 1px solid var(--dns-border, #1e293b);
padding: 12px 14px;
gap: 2px;
height: 100%; min-height: 0; overflow: hidden;
}
.dns-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; flex-shrink: 0; }
.dns-logo-link { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; cursor: pointer; border-radius: 8px; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.dns-logo-link:hover { opacity: .85; }
.dns-logo-link:focus-visible { outline: 2px solid var(--dnsc-brand, #6366f1); outline-offset: 2px; }
.dns-sidebar-brand .dns-logo-link { width: 100%; }
.landing-prompt-tool { white-space: nowrap; }
.landing-prompt-tool:disabled { opacity: .5; cursor: not-allowed; }
.landing-prompt-tool-note,
.dnsc-tool-note { font-size: .72rem; color: var(--dns-muted, #8b93a7); white-space: nowrap; align-self: center; opacity: .9; }
.dns-sidebar-logo { height: 44px; width: 100%; max-width: 240px; background-position: left center; }
.dns-sidebar-brand-mark { color: #f97316; font-size: 1.05rem; display: inline-flex; }
.dns-sidebar-brand-text { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dns-text-subtle, #64748b); }
.dns-sidebar-nav { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.dns-sidebar-nav-label {
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--dns-text-subtle, #64748b); padding: 6px 12px 3px;
}
.dns-side-item {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px; border-radius: 10px;
background: transparent; border: 1px solid transparent;
color: var(--dns-text-muted, #94a3b8);
font-size: 0.855rem; font-weight: 500; text-align: left;
cursor: pointer; text-decoration: none; width: 100%;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dns-side-item:hover { background: rgba(99,102,241,0.10); color: var(--dns-text, #e2e8f0); }
.dns-side-item.active {
background: rgba(99,102,241,0.16); color: #c7d2fe; font-weight: 600;
border-color: rgba(99,102,241,0.22);
}
.dns-side-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; }
.dns-side-ico svg { width: 17px; height: 17px; overflow: visible; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dns-side-badge {
margin-left: auto; font-size: 0.66rem; font-weight: 700;
background: rgba(99,102,241,0.2); color: #a5b4fc;
border-radius: 999px; padding: 1px 8px;
}
.dns-side-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.dns-side-dot.off { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,0.18); }
.dns-sidebar-sep { height: 1px; background: var(--dns-border, #1e293b); margin: 6px 8px; }
/* ══ Account bar: plan chip · credits · notification bell ═══ */
.dns-account-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.dns-account-bar.compact { padding: 0; gap: 6px; }
.dns-plan-chip {
display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px;
border: 1px solid var(--dns-border-strong, #33405c); background: var(--dns-surface-2, #1a2338);
color: var(--dns-text, #e2e8f0); font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap;
transition: border-color .15s ease, background .15s ease;
}
.dns-plan-chip:hover { border-color: var(--dns-accent, #7c3aed); }
.dns-plan-chip-name { text-transform: capitalize; }
.dns-plan-chip.plan-free .dns-plan-chip-name { color: var(--dns-text-muted, #a3b0c8); }
.dns-plan-chip.plan-starter .dns-plan-chip-name { color: #38bdf8; }
.dns-plan-chip.plan-pro .dns-plan-chip-name { color: #c4b5fd; }
.dns-plan-chip.plan-team .dns-plan-chip-name { color: #fbbf24; }
.dns-plan-chip-credits { font-variant-numeric: tabular-nums; padding-left: 8px; border-left: 1px solid var(--dns-border, #1f2941); }
.dns-plan-chip-credits small { font-weight: 500; color: var(--dns-text-muted, #a3b0c8); margin-left: 2px; }
.dns-account-bar:not(.compact) .dns-plan-chip { flex: 1; justify-content: space-between; }
.dns-bell {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent;
color: var(--dns-text-muted, #a3b0c8); cursor: pointer; overflow: visible;
}
.dns-bell:hover { background: rgba(99,102,241,0.12); color: var(--dns-text, #e2e8f0); }
.dns-bell-badge {
position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px var(--dns-surface, #101728);
}
/* Popovers must escape the toolbar, which is an overflow:hidden scroll container with its own
stacking context — an absolute child would be clipped at the toolbar edge and look like it is
hiding behind the AI panel. In the compact (toolbar) variant they are fixed to the viewport just
below the toolbar, like the other toolbar dropdowns, and clamped so they never leave the screen. */
.dns-popover {
position: fixed; top: 58px; right: 8px; z-index: 4500;
width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 70px); overflow: auto;
background: var(--dns-surface, #101728); border: 1px solid var(--dns-border-strong, #33405c); border-radius: 12px;
box-shadow: 0 18px 48px rgba(0,0,0,0.35); font-size: 0.8rem; color: var(--dns-text, #e2e8f0);
}
/* Credit ledger popover: a little wider so the balance/activity rows are not truncated, and
sized against the viewport so it never runs past the top/bottom edge and always scrolls. */
.dns-popover.dns-ledger-panel {
top: 72px;
width: min(400px, calc(100vw - 16px));
max-height: calc(100dvh - 88px);
overflow-y: auto; overscroll-behavior: contain;
}
/* Landing sidebar variant: anchored above the account bar inside the sidebar. */
.dns-account-bar:not(.compact) .dns-popover {
position: absolute; left: 8px; right: 8px; width: auto; top: auto; bottom: calc(100% + 8px);
max-height: min(70vh, calc(100vh - 32px)); z-index: 4500;
}
/* The ledger panel is taller than the other popovers; pin it to the viewport instead of the bar
so it can't grow off the top of the screen, and let it extend past the sidebar width. */
.dns-account-bar:not(.compact) .dns-popover.dns-ledger-panel {
position: fixed; left: 12px; right: auto; bottom: 12px; top: auto;
width: min(400px, calc(100vw - 24px));
max-height: calc(100dvh - 96px);
}
.dns-popover-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--dns-border, #1f2941); }
.dns-popover-empty { padding: 20px 14px; text-align: center; color: var(--dns-text-muted, #a3b0c8); }
.dns-popover-foot { padding: 8px 14px; border-top: 1px solid var(--dns-border); text-align: right; font-size: 12px; }
.dns-link-btn { background: none; border: none; color: var(--dns-accent, #7c3aed); font-size: 0.75rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.dns-notif { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--dns-border, #1f2941); border-left: 3px solid transparent; }
.dns-notif:last-child { border-bottom: none; }
.dns-notif.kind-refund { border-left-color: #f59e0b; }
.dns-notif.kind-run-complete { border-left-color: #22c55e; }
.dns-notif.kind-plan { border-left-color: var(--dns-accent, #7c3aed); }
.dns-notif.kind-promo { border-left-color: #ec4899; background: linear-gradient(90deg, rgba(236,72,153,.08), transparent); }
.dns-notif.kind-credits { border-left-color: #22c55e; }
.dns-notif.kind-announcement { border-left-color: #6366f1; background: linear-gradient(90deg, rgba(99,102,241,.08), transparent); }
.dns-notif.kind-offer { border-left-color: #16a34a; background: linear-gradient(90deg, rgba(22,163,74,.08), transparent); }
.dns-notif.kind-maintenance { border-left-color: #d97706; background: linear-gradient(90deg, rgba(217,119,6,.10), transparent); }
.dns-notif.kind-release { border-left-color: #2563eb; background: linear-gradient(90deg, rgba(37,99,235,.08), transparent); }
.dns-notif-body { flex: 1; min-width: 0; cursor: pointer; }
.dns-notif-title { font-weight: 600; }
.dns-notif-msg { color: var(--dns-text-muted, #a3b0c8); margin-top: 2px; line-height: 1.35; }
.dns-notif-time { font-size: 0.68rem; color: var(--dns-text-subtle, #64748b); margin-top: 4px; }
.dns-notif-dismiss { align-self: flex-start; background: none; border: none; color: var(--dns-text-subtle, #64748b); cursor: pointer; font-size: 0.75rem; padding: 2px 4px; }
.dns-notif-dismiss:hover { color: var(--dns-text, #e2e8f0); }
.dns-popover-close { font-size: .85rem; line-height: 1; }
.dns-notif-modal .dns-notif { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--dns-border, #1f2941); }
.dns-ledger-balance { padding: 14px; }
.dns-ledger-num { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dns-ledger-num small { font-size: 0.75rem; font-weight: 500; color: var(--dns-text-muted, #a3b0c8); }
.dns-ledger-bar { height: 6px; border-radius: 999px; background: var(--dns-surface-2, #1a2338); margin: 8px 0 6px; overflow: hidden; }
.dns-ledger-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dns-accent, #7c3aed), #22c55e); transition: width .3s ease; }
.dns-ledger-sub { font-size: 0.7rem; color: var(--dns-text-muted, #a3b0c8); }
.dns-ledger-list-head { padding: 6px 14px; font-size: 0.66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dns-text-subtle, #64748b); border-top: 1px solid var(--dns-border, #1f2941); }
.dns-ledger-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--dns-border, #1f2941); align-items: center; }
.dns-ledger-row:last-child { border-bottom: none; }
.dns-ledger-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-ledger-tokens { font-size: 0.68rem; color: var(--dns-text-subtle, #64748b); font-variant-numeric: tabular-nums; }
.dns-ledger-credits { font-weight: 700; font-variant-numeric: tabular-nums; color: #f87171; }
.dns-ledger-row.kind-refund .dns-ledger-credits, .dns-ledger-row.kind-grant .dns-ledger-credits { color: #4ade80; }
.dns-ledger-list-full .dns-ledger-row { grid-template-columns: auto 1fr auto auto; }
.dns-ledger-when { font-size: 0.68rem; color: var(--dns-text-subtle, #64748b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dns-ledger-modal-backdrop { z-index: 1200; background: rgba(2, 6, 23, .55); }
.dns-ledger-modal { position: fixed; z-index: 1201; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 94vw); max-height: 80vh; display: flex; flex-direction: column; background: var(--dns-surface, #0f172a); border: 1px solid var(--dns-border, #1f2941); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); font-size: .8rem; }
.dns-ledger-modal .dns-ledger-list { overflow-y: auto; flex: 1; }
/* Sign-in credit alert (exhausted / running low): compact fixed-size card, same on every page */
.dns-credit-alert { position: fixed; z-index: 1201; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 30px 26px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(30,27,75,.96), rgba(15,23,42,.98)); border: 1px solid rgba(139,92,246,.35); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px -20px rgba(139,92,246,.6); color: #e2e8f0; font-size: .82rem; animation: dnsCreditAlertIn .28s cubic-bezier(.2,.9,.3,1.2); --accent: #a78bfa; --accent2: #38bdf8; }
.dns-credit-alert.exhausted { --accent: #fb7185; --accent2: #f59e0b; border-color: rgba(251,113,133,.4); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px -20px rgba(251,113,133,.6); }
@keyframes dnsCreditAlertIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.dns-credit-alert-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: #cbd5e1; font-size: .85rem; cursor: pointer; display: grid; place-items: center; }
.dns-credit-alert-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.dns-credit-alert-ring { position: relative; width: 108px; height: 108px; display: grid; place-items: center; margin-bottom: 2px; }
.dns-credit-alert-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dns-credit-alert-ring circle { fill: none; stroke-width: 2.6; }
.dns-credit-alert-ring .track { stroke: rgba(148,163,184,.18); }
.dns-credit-alert-ring .fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: calc(100 - var(--pct, 0)) 100; filter: drop-shadow(0 0 6px var(--accent)); transition: stroke-dasharray .6s ease; }
.dns-credit-alert-ring .dns-credit-alert-num { font-size: 1.9rem; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.02em; }
.dns-credit-alert-ring small { position: absolute; bottom: 24px; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: #94a3b8; }
.dns-credit-alert h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff; }
.dns-credit-alert p { margin: 0; color: #cbd5e1; line-height: 1.5; }
.dns-credit-alert-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: .7rem; color: #94a3b8; }
.dns-credit-alert-meta i { width: 3px; height: 3px; border-radius: 50%; background: #475569; }
.dns-credit-alert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 6px; }
.dns-credit-alert-primary, .dns-credit-alert-secondary { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 11px; font-weight: 600; font-size: .82rem; text-decoration: none; transition: transform .15s, filter .15s; }
.dns-credit-alert-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 8px 22px -8px var(--accent); }
.dns-credit-alert-secondary { color: #e2e8f0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.dns-credit-alert-primary:hover, .dns-credit-alert-secondary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dns-credit-alert-later { background: none; border: 0; color: #94a3b8; font-size: .74rem; cursor: pointer; padding: 4px 8px; }
.dns-credit-alert-later:hover { color: #e2e8f0; text-decoration: underline; }
/* Light theme: the alert keeps its accent ring/gradient but sits on a white card with dark text. */
html.light-theme .dns-credit-alert { background: linear-gradient(180deg, #ffffff, #f4f6ff); border-color: rgba(109,40,217,.25); box-shadow: 0 30px 80px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.04); }
html.light-theme .dns-credit-alert.exhausted { border-color: rgba(225,29,72,.3); box-shadow: 0 30px 80px rgba(15,23,42,.22), 0 0 60px -20px rgba(225,29,72,.35); }
html.light-theme .dns-credit-alert-close { border-color: rgba(15,23,42,.1); background: rgba(15,23,42,.04); color: #475569; }
html.light-theme .dns-credit-alert-close:hover { background: rgba(15,23,42,.1); color: #0f172a; }
html.light-theme .dns-credit-alert-ring .track { stroke: rgba(71,85,105,.18); }
html.light-theme .dns-credit-alert-ring .dns-credit-alert-num, html.light-theme .dns-credit-alert h3 { color: #0f172a; }
html.light-theme .dns-credit-alert-ring small, html.light-theme .dns-credit-alert-meta, html.light-theme .dns-credit-alert-later { color: #64748b; }
html.light-theme .dns-credit-alert p { color: #334155; }
html.light-theme .dns-credit-alert-meta i { background: #cbd5e1; }
html.light-theme .dns-credit-alert-secondary { color: #1e293b; background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12); }
html.light-theme .dns-credit-alert-later:hover { color: #0f172a; }
/* Refund apology banner shown in the chat after a failed build */
.dns-refund-banner {
display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 12px 14px; border-radius: 12px;
background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(34,197,94,0.10));
border: 1px solid rgba(245,158,11,0.35); font-size: 0.8rem; line-height: 1.4;
}
.dns-refund-icon { font-size: 1.3rem; line-height: 1; }
.dns-refund-body { flex: 1; min-width: 0; }
.dns-refund-body strong { display: block; margin-bottom: 2px; color: #fbbf24; }
/* Free-plan explorer notice */
.dns-explorer-lock {
display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 7px 10px; border-radius: 8px;
background: rgba(245,158,11,0.10); border: 1px dashed rgba(245,158,11,0.45); color: #fbbf24;
font-size: 0.72rem; text-decoration: none;
}
.dns-explorer-lock:hover { background: rgba(245,158,11,0.18); }
/* Open-in-tab preview gate */
.dns-preview-gate { max-width: 440px; font-size: 0.84rem; line-height: 1.45; }
.dns-preview-gate p { margin: 0 0 8px; color: var(--dns-text-muted, #a3b0c8); }
.dns-preview-gate-icon { font-size: 1.8rem; margin-bottom: 8px; }
.dns-preview-gate-note { padding: 8px 10px; border-radius: 8px; background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.35); color: #fbbf24 !important; }
.dns-preview-gate-note a { color: #fde68a; }
.dns-sidebar-footer {
margin-top: auto; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
padding: 8px 8px 6px; border-top: 1px solid var(--dns-border, #1e293b);
}
.dns-sidebar-footer-label { font-size: 0.78rem; color: var(--dns-text-muted, #64748b); }
/* ══ Landing main content ════════════════════════ */
/* Hard-hides a workbench side panel (e.g. the Explorer while the middle area is
in preview mode). !important is required because the panel-layout JS writes
min-width/width straight onto element.style after Blazor renders, which would
otherwise resurrect the panel at its persisted width. */
.dns-panel-hidden {
flex: 0 0 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
border: none !important;
padding: 0 !important;
overflow: hidden !important;
}
/* overflow-x is clipped on purpose: the decorative radial glows on
.landing-ai-panel sit outside the box and would otherwise force a permanent
horizontal scrollbar (overflow-y:auto promotes overflow-x:visible to auto). */
.dns-main-content { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
/* Projects/Starred/Recent card views */
.dns-projects-view { padding: 32px 40px; max-width: 1100px; width: 100%; margin: 0 auto; }
.dns-projects-view-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.dns-projects-view-head h2 { margin: 0; color: var(--dns-text, #f1f5f9); font-size: 1.3rem; }
.dns-projects-view-count {
font-size: 0.72rem; font-weight: 700; color: #a5b4fc;
background: rgba(99,102,241,0.16); border-radius: 999px; padding: 2px 10px;
}
.dns-projects-empty { text-align: center; padding: 60px 20px; color: var(--dns-text-muted, #94a3b8); }
.dns-projects-empty p { margin: 0 0 18px; }
.dns-project-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px;
}
.dns-project-card {
display: flex; flex-direction: column;
background: var(--dns-surface, #131c30);
border: 1px solid var(--dns-border, #1e293b);
border-radius: 14px; overflow: hidden; cursor: pointer;
transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.dns-project-card:hover {
transform: translateY(-3px); border-color: rgba(99,102,241,0.5);
box-shadow: 0 14px 34px -18px rgba(99,102,241,0.6);
}
.dns-project-thumb {
height: 108px; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #6366f1, #06b6d4);
}
.dns-project-thumb-initials { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: 1px; }
.dns-project-card-body { padding: 14px 16px 8px; }
.dns-project-card-name { color: var(--dns-text, #f1f5f9); font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
.dns-project-card-tech { color: #a5b4fc; font-size: 0.76rem; margin-bottom: 8px; }
.dns-project-card-meta { color: var(--dns-text-muted, #64748b); font-size: 0.76rem; }
.dns-project-card-open {
margin-top: auto; padding: 10px 16px; font-size: 0.8rem; font-weight: 600; color: #a5b4fc;
border-top: 1px solid var(--dns-border, #1e293b); display: flex; justify-content: space-between;
}
/* Home recent-projects strip */
.dns-recent-strip { margin-top: 22px; width: 100%; max-width: 760px; }
/* ── "Built with DotBlazer": below-the-fold gallery (static, large thumbnails) + scroll hint + details popup ── */
.landing-showcase-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dns-text-subtle, var(--dns-text-muted)); }
.landing-showcase-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dnsc-brand-2, #6366f1); animation: landing-sc-pulse 2.4s ease-in-out infinite; }
@keyframes landing-sc-pulse { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 6%, transparent); } }
.landing-showcase-browse { font: inherit; font-size: .84rem; font-weight: 600; background: none; border: 1px solid var(--dns-border); border-radius: 999px; padding: 9px 18px; color: var(--dns-text, #e2e8f0); cursor: pointer; white-space: nowrap; transition: border-color .18s, background .18s; }
.landing-showcase-browse:hover { border-color: var(--dnsc-brand-2, #6366f1); background: color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 10%, transparent); }
.landing-scroll-hint { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border: 0; background: none; color: var(--dns-text-muted); font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; opacity: .8; transition: opacity .18s, color .18s; }
.landing-scroll-hint:hover { opacity: 1; color: var(--dns-text, #e2e8f0); }
.landing-scroll-hint svg { animation: landing-hint-bob 1.8s ease-in-out infinite; }
@keyframes landing-hint-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.landing-gallery-section { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(44px, 7vh, 80px) clamp(20px, 4vw, 40px) clamp(32px, 5vh, 56px); box-sizing: border-box; }
.landing-gallery-section::before { content: ""; position: absolute; left: 50%; top: 0; width: min(720px, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 45%, transparent), transparent); }
.landing-gallery-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.landing-gallery-section-head h2 { margin: 10px 0 6px; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--dns-text-strong, #f1f5f9); }
.landing-gallery-section-head p { margin: 0; font-size: .94rem; color: var(--dns-text-muted); max-width: 52ch; }
.landing-gallery-section-search { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; width: min(280px, 100%); padding: 0 14px; height: 40px; border-radius: 999px; border: 1px solid var(--dns-border); background: var(--dns-bg-surface, rgba(255,255,255,.04)); color: var(--dns-text-muted); transition: border-color .18s, box-shadow .18s; }
.landing-gallery-section-search:focus-within { border-color: var(--dnsc-brand-2, #6366f1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 18%, transparent); }
.landing-gallery-section-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: .88rem; color: var(--dns-text, #e2e8f0); }
.landing-gallery-section-search input::placeholder { color: var(--dns-text-muted); }
.landing-gallery-section-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.landing-gallery-section-filters button { font: inherit; font-size: .8rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--dns-border); background: transparent; color: var(--dns-text-muted); cursor: pointer; transition: all .18s; display: inline-flex; align-items: center; gap: 6px; }
.landing-gallery-section-filters button small { font-size: .7rem; opacity: .7; }
.landing-gallery-section-filters button:hover { color: var(--dns-text, #e2e8f0); border-color: var(--dns-border-strong, var(--dns-border)); }
.landing-gallery-section-filters button.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--dnsc-brand-2, #6366f1), #2563eb); box-shadow: 0 8px 20px -10px rgba(79,70,229,.7); }
.landing-gallery-section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; }
.landing-gallery-section-more { display: flex; justify-content: center; margin-top: 28px; }
.landing-showcase-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 10px; border-radius: 18px; border: 1px solid var(--dns-border); background: var(--dns-bg-surface, rgba(255,255,255,.03)); transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .25s; }
.landing-showcase-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 60%, transparent), transparent 45%, rgba(56,189,248,.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s; pointer-events: none; }
.landing-showcase-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 24px 48px -24px rgba(15,23,42,.8), 0 0 0 1px color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 20%, transparent); }
.landing-showcase-card:hover::before { opacity: 1; }
.landing-showcase-img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--dns-border); background: var(--dns-bg-surface-2, rgba(255,255,255,.03)); padding: 0; cursor: pointer; font: inherit; color: inherit; }
.landing-showcase-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.landing-showcase-card:hover .landing-showcase-img img { transform: scale(1.04); }
.landing-showcase-hover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; padding: 12px; background: linear-gradient(180deg, transparent 40%, rgba(2,6,23,.72)); opacity: 0; transition: opacity .22s; }
.landing-showcase-card:hover .landing-showcase-hover, .landing-showcase-img:focus-visible .landing-showcase-hover { opacity: 1; }
.landing-showcase-hover-btn { font-size: .76rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(6px); transition: transform .22s; }
.landing-showcase-hover-btn.primary { background: linear-gradient(135deg, #3b82f6, #4f46e5); border-color: transparent; }
a.landing-showcase-hover-btn, a.landing-showcase-hover-btn:hover { color: #fff; text-decoration: none; }
.landing-showcase-card:hover .landing-showcase-hover-btn { transform: translateY(0); }
.landing-showcase-mono { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; font-weight: 700; letter-spacing: -.03em; color: var(--dnsc-brand-2, #6366f1); background: radial-gradient(80% 80% at 30% 20%, rgba(99,102,241,.22), transparent 60%), linear-gradient(135deg, rgba(99,102,241,.12), rgba(34,211,238,.08)); }
.landing-showcase-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; padding: 0 4px 2px; }
.landing-showcase-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.landing-showcase-name { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--dns-text-strong, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-showcase-sum { font-size: .78rem; line-height: 1.4; color: var(--dns-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.landing-showcase-actions { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.landing-showcase-tag { flex: none; font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: var(--dnsc-brand-2, #6366f1); background: color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 12%, transparent); }
.landing-showcase-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--dns-border); background: transparent; color: var(--dns-text-muted); cursor: pointer; padding: 0; text-decoration: none; transition: all .18s; }
.landing-showcase-ico:hover { color: var(--dns-text-strong, #f1f5f9); border-color: var(--dnsc-brand-2, #6366f1); background: color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 12%, transparent); }
/* Details popup (blueprint-style sheet: screenshot on top, metadata + prompt below) */
.landing-detail { position: relative; width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; border-radius: 22px; background: var(--dns-bg-surface, #0b1120); border: 1px solid var(--dns-border); box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); animation: dnsPopIn .24s cubic-bezier(.2,.9,.3,1.2); scrollbar-width: thin; }
.landing-detail .landing-gallery-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(2,6,23,.55); color: #fff; backdrop-filter: blur(8px); cursor: pointer; font-size: 1rem; line-height: 1; }
.landing-detail-shot { position: relative; aspect-ratio: 16 / 9; background: var(--dns-bg-surface-2, rgba(255,255,255,.03)); border-bottom: 1px solid var(--dns-border); overflow: hidden; }
.landing-detail-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.landing-detail-shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60px; background: linear-gradient(180deg, transparent, var(--dns-bg-surface, #0b1120)); pointer-events: none; }
.landing-detail-body { padding: 18px 26px 26px; display: flex; flex-direction: column; gap: 14px; }
.landing-detail-body h3 { margin: 4px 0 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; color: var(--dns-text-strong, #f1f5f9); }
.landing-detail-sum { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--dns-text-muted); }
.landing-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.landing-detail-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 0; }
.landing-detail-kv > div { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--dns-border); background: var(--dns-bg-surface-2, rgba(255,255,255,.03)); min-width: 0; }
.landing-detail-kv dt { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dns-text-subtle, var(--dns-text-muted)); margin-bottom: 4px; }
.landing-detail-kv dd { margin: 0; font-size: .86rem; font-weight: 600; color: var(--dns-text, #e2e8f0); }
.landing-detail-kv dd.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-detail-kv dd a { color: var(--dnsc-brand-2, #818cf8); text-decoration: none; }
.landing-detail-prompt { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 30%, transparent); background: color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 8%, transparent); overflow: hidden; }
.landing-detail-prompt-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dns-text-subtle, var(--dns-text-muted)); border-bottom: 1px solid color-mix(in srgb, var(--dnsc-brand-2, #6366f1) 20%, transparent); }
.landing-detail-prompt-head button { font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--dns-border); background: var(--dns-bg-surface, rgba(255,255,255,.04)); color: var(--dns-text, #e2e8f0); cursor: pointer; transition: all .18s; }
.landing-detail-prompt-head button:hover { border-color: var(--dnsc-brand-2, #6366f1); }
.landing-detail-prompt blockquote { margin: 0; padding: 14px 16px; font-size: .9rem; line-height: 1.6; color: var(--dns-text, #e2e8f0); white-space: pre-wrap; max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.landing-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.landing-detail-btn { font: inherit; font-size: .88rem; font-weight: 700; padding: 11px 20px; border-radius: 12px; border: 1px solid var(--dns-border); background: var(--dns-bg-surface-2, rgba(255,255,255,.04)); color: var(--dns-text, #e2e8f0); text-decoration: none; cursor: pointer; transition: all .18s; }
.landing-detail-btn:hover { border-color: var(--dnsc-brand-2, #6366f1); }
.landing-detail-btn.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3b82f6, #4f46e5); box-shadow: 0 12px 28px -12px rgba(79,70,229,.8); }
.landing-detail-btn.primary:hover { filter: brightness(1.08); }
@media (max-width: 960px) { .landing-gallery-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.landing-gallery-section { padding-top: 44px; }
.landing-gallery-section-head { margin-bottom: 22px; }
.landing-gallery-toolbar { flex-direction: column; align-items: stretch; border-radius: 20px; padding: 8px; gap: 8px; }
.landing-gallery-section-search { width: 100%; }
.landing-scroll-hint { display: inline-flex; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px 10px; font-size: .64rem; z-index: 5; }
.landing-scroll-hint svg { width: 16px; height: 16px; }
.landing-detail-body { padding: 16px 18px 22px; }
}
@media (max-width: 540px) { .landing-gallery-section-grid { grid-template-columns: 1fr; gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .landing-scroll-hint svg, .landing-showcase-dot { animation: none; } .landing-showcase-frame img { transition: none; } .landing-showcase-card:hover .landing-showcase-frame img { object-position: top; } }
/* Gallery popup (browse all, filters, paging) */
.landing-gallery-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(2,6,23,.62); backdrop-filter: blur(6px); animation: landing-sc-in .2s ease both; }
.landing-gallery { width: min(980px, 100%); max-height: min(88vh, 820px); display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 16px; border-radius: 18px; border: 1px solid var(--dns-border-strong, var(--dns-border)); background: var(--dns-bg-elevated, #0f172a); color: var(--dns-text-strong); box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); }
.landing-gallery-head { display: flex; align-items: center; gap: 12px; }
.landing-gallery-head > div { flex: 1; min-width: 0; }
.landing-gallery-head h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.landing-gallery-head p { margin: 2px 0 0; font-size: 12px; color: var(--dns-text-muted); }
.landing-gallery-search { font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--dns-border); background: var(--dns-panel, rgba(255,255,255,.04)); color: inherit; width: min(260px, 40%); }
.landing-gallery-search:focus { outline: none; border-color: var(--dnsc-brand-2, #6366f1); }
.landing-gallery-close { font: inherit; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--dns-border); background: transparent; color: inherit; cursor: pointer; }
.landing-gallery-close:hover { background: var(--dns-panel, rgba(255,255,255,.06)); }
.landing-gallery-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.landing-gallery-filters button { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--dns-border); background: transparent; color: var(--dns-text-muted); cursor: pointer; transition: all .15s ease; }
.landing-gallery-filters button:hover { color: var(--dns-text-strong); border-color: var(--dnsc-brand-2, #6366f1); }
.landing-gallery-filters button.active { color: #fff; background: var(--dnsc-brand-2, #6366f1); border-color: transparent; }
.landing-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.landing-gallery-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--dns-border); background: var(--dns-panel, rgba(255,255,255,.03)); transition: border-color .15s ease, transform .15s ease; }
.landing-gallery-card:hover { border-color: var(--dnsc-brand-2, #6366f1); transform: translateY(-2px); }
.landing-gallery-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-bottom: 1px solid var(--dns-border); background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(34,211,238,.06)); cursor: pointer; overflow: hidden; }
.landing-gallery-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.landing-gallery-card:hover .landing-gallery-card-img img { transform: scale(1.04); }
.landing-gallery-card-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 11px; min-width: 0; flex: 1; }
.landing-gallery-card-body h4 { margin: 0; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-gallery-card-body p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dns-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.landing-gallery-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.landing-gallery-card-links { display: flex; gap: 10px; font-size: 12px; font-weight: 600; }
.landing-gallery-card-links a, .landing-gallery-card-links button { font: inherit; font-size: 12px; font-weight: 600; padding: 0; border: 0; background: none; color: var(--dnsc-brand-2, #6366f1); cursor: pointer; text-decoration: none; }
.landing-gallery-card-links a:hover, .landing-gallery-card-links button:hover { text-decoration: underline; }
.landing-gallery-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--dns-text-muted); font-size: 13px; }
.landing-gallery-pager { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; color: var(--dns-text-muted); }
.landing-gallery-pager button { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--dns-border); background: transparent; color: var(--dns-text-strong); cursor: pointer; }
.landing-gallery-pager button:disabled { opacity: .4; cursor: default; }
@media (max-width: 760px) {
.landing-gallery { padding: 14px; max-height: 92vh; border-radius: 14px; }
.landing-gallery-head { flex-wrap: wrap; }
.landing-gallery-search { width: 100%; order: 3; }
.landing-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) { .landing-gallery-grid { grid-template-columns: 1fr; } }
/* Trust signals (admin-managed under Settings → Site & social) */
.landing-trust { margin: 28px auto 0; max-width: 1100px; padding: 0 16px; }
.landing-trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; font-size: 14px; color: var(--dnsc-ink-2, #475569); }
.landing-trust-item { display: inline-flex; align-items: center; gap: 6px; }
a.landing-trust-item { color: var(--dnsc-brand-2, #6366f1); text-decoration: none; }
a.landing-trust-item:hover { text-decoration: underline; }
.landing-trust-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.landing-trust-quote { margin: 0; padding: 16px 18px; border: 1px solid var(--dnsc-line, #e5e7eb); border-radius: 12px; background: var(--dnsc-card, #fff); }
.landing-trust-quote blockquote { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--dnsc-ink, #0f172a); }
.landing-trust-quote figcaption { font-size: 12px; color: var(--dnsc-ink-3, #64748b); }
/* -- Build preferences: quiet chip line under the composer ------------------- */
.dns-prefs-bar {
width: 100%; max-width: 760px; margin-top: 14px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
font-size: 0.74rem; color: var(--dns-text-subtle);
animation: fadeInUp 0.6s ease both;
}
.dns-prefs-bar-label { margin-right: 2px; }
.dns-pref-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: var(--dns-bg-surface-2); border: 1px solid var(--dns-border);
color: var(--dns-text-muted); font-weight: 600; white-space: nowrap;
}
.dns-pref-chip svg { opacity: .75; }
.dns-pref-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset; }
.dns-prefs-edit {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit;
background: transparent; border: 1px dashed var(--dns-border-strong);
color: var(--dns-accent-2, #a5b4fc); font-size: 0.74rem; font-weight: 700;
transition: background .15s, border-color .15s, color .15s;
}
.dns-prefs-edit:hover { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.6); color: #c7d2fe; }
html.light-theme .dns-pref-chip { background: rgba(255,255,255,.9); border-color: rgba(99,102,241,.16); color: #475569; }
html.light-theme .dns-prefs-edit { color: #4f46e5; border-color: rgba(99,102,241,.4); }
html.light-theme .dns-prefs-edit:hover { background: rgba(99,102,241,.08); color: #4338ca; }
.dns-prefs-bar-reset { color: #94a3b8; border-color: rgba(148,163,184,.35); }
.dns-prefs-bar-reset:hover { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.6); color: #e2e8f0; }
html.light-theme .dns-prefs-bar-reset { color: #64748b; border-color: rgba(100,116,139,.35); }
html.light-theme .dns-prefs-bar-reset:hover { background: rgba(100,116,139,.08); color: #334155; }
/* Preferences sheet */
.dns-prefs-overlay {
position: fixed; inset: 0; z-index: 1200;
background: rgba(2,6,23,.6); backdrop-filter: blur(6px);
display: grid; place-items: center; padding: 24px;
animation: fadeIn .18s ease both;
}
.dns-prefs-sheet {
width: min(720px, 100%); max-height: min(88vh, 860px);
display: flex; flex-direction: column;
background: var(--dns-bg-surface); border: 1px solid var(--dns-border-strong);
border-radius: 18px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7);
overflow: hidden; animation: fadeInUp .22s ease both;
}
.dns-prefs-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: 22px 24px 14px; border-bottom: 1px solid var(--dns-border);
}
.dns-prefs-head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--dns-text-strong); letter-spacing: -.01em; }
.dns-prefs-head p { margin: 4px 0 0; font-size: .8rem; color: var(--dns-text-subtle); }
.dns-prefs-close {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--dns-border); background: transparent;
color: var(--dns-text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; font-family: inherit;
}
.dns-prefs-close:hover { background: var(--dns-bg-elevated); color: var(--dns-text-strong); }
.dns-prefs-body { overflow-y: auto; padding: 8px 24px 12px; display: flex; flex-direction: column; gap: 22px; }
.dns-prefs-section { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.dns-prefs-section h4 {
margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dns-text-subtle);
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.dns-prefs-section h4 small { font-size: .7rem; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .75; }
.dns-ptype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dns-ptype {
position: relative; display: flex; align-items: center; gap: 10px; text-align: left;
padding: 11px 12px; border-radius: 12px; cursor: pointer; font-family: inherit;
background: var(--dns-bg-surface-2); border: 1px solid var(--dns-border); color: var(--dns-text);
transition: border-color .15s, background .15s, transform .15s;
}
.dns-ptype:hover { border-color: color-mix(in srgb, var(--dns-accent-2) 50%, transparent); transform: translateY(-1px); }
.dns-ptype.selected { border-color: var(--dns-accent-2); background: color-mix(in srgb, var(--dns-accent-2) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dns-accent-2) 50%, transparent) inset; }
.dns-ptype.soon { opacity: .72; padding-right: 56px; }
.dns-ptype.selected { padding-right: 36px; }
.dns-ptype-ico {
display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
background: color-mix(in srgb, var(--dns-accent-2) 14%, transparent); color: var(--dnsc-brand);
}
.dns-ptype.selected .dns-ptype-ico { background: linear-gradient(135deg, var(--dns-accent-2), var(--dns-accent)); color: #fff; }
.dns-ptype-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dns-ptype-text b { font-size: .82rem; font-weight: 700; }
.dns-ptype-text small { font-size: .68rem; color: var(--dns-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-ptype-soon, .dns-ptype-check {
position: absolute; top: 8px; right: 8px; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
padding: 2px 6px; border-radius: 999px;
}
.dns-ptype-soon { background: rgba(245,158,11,.16); color: #fbbf24; }
.dns-ptype-check { background: var(--dns-accent-2); color: #fff; width: 18px; height: 18px; padding: 0; display: grid; place-items: center; font-size: .7rem; }
.dns-prefs-notice {
padding: 8px 12px; border-radius: 9px; font-size: .78rem;
background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); color: #fcd34d;
}
.dns-prefs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dns-prefs-row.three { grid-template-columns: repeat(3, 1fr); }
.dns-prefs-row label, .dns-prefs-guidance { display: flex; flex-direction: column; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--dns-text-muted); }
.dns-prefs-row select, .dns-prefs-guidance textarea {
width: 100%; padding: 8px 10px; border-radius: 9px; font-size: .84rem; font-family: inherit;
background: var(--dns-bg-inset); color: var(--dns-text-strong); border: 1px solid var(--dns-border-strong);
}
.dns-prefs-row select:focus, .dns-prefs-guidance textarea:focus { outline: none; border-color: var(--dns-accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dns-accent-2) 20%, transparent); }
.dns-prefs-guidance small { font-weight: 500; color: var(--dns-text-subtle); margin-left: 4px; }
.dns-prefs-guidance textarea { resize: vertical; min-height: 56px; }
/* ── Page layout gallery (inside Art direction) ─────────────────────────────────── */
.dns-layout-gallery { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--dns-border-strong); }
.dns-layout-gallery-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dns-layout-gallery-head h5 { margin: 0; font-size: .8rem; font-weight: 700; color: var(--dns-text-strong); display: flex; flex-direction: column; gap: 2px; }
.dns-layout-gallery-head h5 small { font-weight: 500; color: var(--dns-text-subtle); font-size: .7rem; }
.dns-layout-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.dns-layout-tabs button { border: 1px solid var(--dns-border-strong); background: var(--dns-bg-inset); color: var(--dns-text-muted); border-radius: 999px; padding: 4px 10px; font-size: .72rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.dns-layout-tabs button.on { background: var(--dns-accent-2); border-color: var(--dns-accent-2); color: #fff; }
.dns-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dns-layout-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid var(--dns-border-strong); background: var(--dns-bg-inset); text-align: left; font-family: inherit; color: inherit; min-width: 0; }
.dns-layout-card.selected { border-color: var(--dns-accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dns-accent-2) 20%, transparent); }
.dns-layout-card b { font-size: .78rem; color: var(--dns-text-strong); }
.dns-layout-card small { font-size: .68rem; line-height: 1.3; color: var(--dns-text-subtle); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dns-layout-card.auto { cursor: pointer; align-items: center; text-align: center; justify-content: center; }
.dns-layout-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid var(--dns-border-strong); background: #f8fafc; padding: 0; cursor: zoom-in; }
.dns-layout-thumb svg { width: 100%; height: 100%; display: block; }
.dns-layout-thumb:hover { border-color: var(--dns-accent-2); }
.dns-layout-thumb-auto { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: conic-gradient(from 90deg,#818cf8,#0ea5e9,#34d399,#fb923c,#fb7185,#818cf8); cursor: pointer; }
.dns-layout-use { margin-top: 2px; border: 1px solid var(--dns-border-strong); background: transparent; color: var(--dns-text-muted); border-radius: 8px; padding: 5px 8px; font-size: .7rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.dns-layout-use:hover, .dns-layout-use.primary { background: var(--dns-accent-2); border-color: var(--dns-accent-2); color: #fff; }
.dns-layout-card.selected .dns-layout-use { background: var(--dns-accent-2); border-color: var(--dns-accent-2); color: #fff; }
.dns-layout-popup-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(2,6,23,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dns-layout-popup { width: min(560px, 100%); max-height: 92vh; overflow: auto; background: var(--dns-bg-elevated, #fff); color: var(--dns-text-strong); border-radius: 16px; border: 1px solid var(--dns-border-strong); box-shadow: 0 30px 80px rgba(0,0,0,.4); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.dns-layout-popup-head { display: flex; justify-content: space-between; gap: 12px; }
.dns-layout-popup-head h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.dns-layout-popup-head p { margin: 0; font-size: .8rem; color: var(--dns-text-muted); }
.dns-layout-cat { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dns-accent-2); }
.dns-layout-popup-thumb { border-radius: 12px; overflow: hidden; border: 1px solid var(--dns-border-strong); background: #f8fafc; }
.dns-layout-popup-thumb svg { width: 100%; height: auto; display: block; }
.dns-layout-spec { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0; font-size: .78rem; }
.dns-layout-spec dt { font-weight: 700; color: var(--dns-text-muted); }
.dns-layout-spec dd { margin: 0; color: var(--dns-text-strong); }
.dns-layout-popup-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dns-layout-popup-actions small { color: var(--dns-text-subtle); font-size: .7rem; }
.dns-layout-popup-actions .dns-layout-use { padding: 8px 14px; font-size: .78rem; }
.dns-swatches { display: flex; gap: 8px; align-items: center; padding-top: 6px; }
.dns-swatch {
width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
background: var(--sw); box-shadow: 0 0 0 1px rgba(255,255,255,.12);
transition: transform .15s, box-shadow .15s;
}
.dns-swatch:hover { transform: scale(1.08); }
.dns-swatch.selected { box-shadow: 0 0 0 2px var(--dns-bg-surface), 0 0 0 4px var(--dns-accent-2); }
.dns-prefs-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.dns-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .82rem; color: var(--dns-text); }
.dns-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.dns-toggle-ui {
position: relative; width: 34px; height: 20px; border-radius: 999px; flex-shrink: 0;
background: var(--dns-bg-inset); border: 1px solid var(--dns-border-strong); transition: background .18s, border-color .18s;
}
.dns-toggle-ui::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
background: #94a3b8; transition: transform .18s, background .18s;
}
.dns-toggle input:checked + .dns-toggle-ui { background: var(--dns-accent-2); border-color: var(--dns-accent-2); }
.dns-toggle input:checked + .dns-toggle-ui::after { transform: translateX(14px); background: #fff; }
.dns-toggle input:focus-visible + .dns-toggle-ui { box-shadow: 0 0 0 3px rgba(99,102,241,.3); }
.dns-prefs-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 24px; border-top: 1px solid var(--dns-border); background: var(--dns-bg-surface-2);
}
.dns-prefs-reset { border: 0; background: transparent; color: var(--dns-text-subtle); font-size: .78rem; cursor: pointer; font-family: inherit; }
.dns-prefs-reset:hover { color: var(--dns-text); text-decoration: underline; }
.dns-prefs-actions { display: flex; gap: 8px; }
.dns-btn-ghost { background: transparent; border: 1px solid var(--dns-border-strong); color: var(--dns-text-muted); }
.dns-btn-ghost:hover { background: var(--dns-bg-elevated); color: var(--dns-text-strong); }
html.light-theme .dns-prefs-overlay { background: rgba(15,23,42,.35); }
html.light-theme .dns-prefs-sheet { background: #fff; border-color: rgba(99,102,241,.18); }
html.light-theme .dns-ptype { background: #f8fafc; border-color: #e2e8f0; }
html.light-theme .dns-ptype.selected { background: #eef2ff; }
html.light-theme .dns-ptype-ico { background: #e0e7ff; color: #4f46e5; }
html.light-theme .dns-prefs-row select, html.light-theme .dns-prefs-guidance textarea { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .dns-prefs-foot { background: #f8fafc; }
html.light-theme .dns-prefs-notice { color: #92400e; background: rgba(245,158,11,.08); }
@media (max-width: 640px) {
.dns-prefs-row, .dns-prefs-row.three, .dns-prefs-toggles { grid-template-columns: 1fr; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Focus rings only for keyboard users; never on programmatic focus of headings */
h1:focus, h1:focus-visible { outline: none; }
/* Inline SVG icons inside action buttons render at text size, aligned to the label */
.dns-btn-ico { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; }
/* Legacy highlight tiles (kept for other views) */
.dns-landing-highlights {
width: 100%; max-width: 760px; margin-top: 22px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
animation: fadeInUp 0.6s ease both;
}
.dns-highlight {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 13px; border-radius: 12px;
background: var(--dns-bg-surface-2); border: 1px solid var(--dns-border);
transition: border-color 0.18s ease, transform 0.18s ease;
}
.dns-highlight:hover { border-color: rgba(99,102,241,0.45); transform: translateY(-1px); }
.dns-highlight-ico {
display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
background: rgba(99,102,241,0.12); font-size: 0.95rem;
}
.dns-highlight div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dns-highlight b { font-size: 0.78rem; color: var(--dns-text); font-weight: 700; }
.dns-highlight span:not(.dns-highlight-ico) { font-size: 0.71rem; color: var(--dns-text-subtle); line-height: 1.4; }
html.light-theme .dns-highlight { background: rgba(255,255,255,.85); border-color: rgba(99,102,241,.14); }
.dns-recent-strip-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; color: var(--dns-text-muted, #94a3b8); font-size: 0.82rem; font-weight: 600;
}
.dns-recent-viewall { background: none; border: none; color: #a5b4fc; font-size: 0.8rem; cursor: pointer; }
.dns-recent-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
/* Compact single-row card: mark + name/meta + affordance. Deliberately restrained —
flat surface, hairline border, no gradient wash or lift. */
.dns-recent-card {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 11px;
padding: 11px 12px;
background: var(--dns-bg-surface-2);
border: 1px solid var(--dns-border);
border-radius: 10px; cursor: pointer;
transition: border-color 0.18s ease, background 0.18s ease;
}
/* Accent rail that fills in on hover */
.dns-recent-accent {
position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--dnsc-brand);
transform: scaleY(0); transform-origin: top;
transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.dns-recent-card:hover {
border-color: var(--dns-border-strong);
background: var(--dns-bg-surface);
}
.dns-recent-card:hover .dns-recent-accent { transform: scaleY(1); }
.dns-recent-info { flex: 1; min-width: 0; }
.dns-recent-thumb {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--dnsc-card-strong);
border: 1px solid var(--dnsc-card-border);
color: var(--dns-text); font-weight: 600; font-size: 0.72rem;
letter-spacing: 0.02em;
}
.dns-recent-name {
color: var(--dns-text); font-weight: 550; font-size: 0.845rem; letter-spacing: -0.005em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dns-recent-meta {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap; row-gap: 3px;
color: var(--dns-text-subtle); font-size: 0.715rem; margin-top: 2px;
min-width: 0;
}
.dns-recent-meta > span { white-space: nowrap; }
.dns-recent-dot { opacity: 0.5; }
.dns-recent-arrow {
flex-shrink: 0; color: var(--dns-text-subtle); font-size: 0.95rem; line-height: 1;
opacity: 0.5; transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
.dns-recent-card:hover .dns-recent-arrow {
transform: translateX(2px); opacity: 1; color: var(--dnsc-brand);
}
/* ── Card delete button (landing + recent) ─────────── */
.dns-card-delete {
position: absolute; top: 10px; right: 10px;
width: 28px; height: 28px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(15,23,42,0.65); border: 1px solid var(--dns-border, #334155);
color: #94a3b8; cursor: pointer; opacity: 0;
transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.dns-project-card:hover .dns-card-delete,
.dns-recent-card:hover .dns-card-delete { opacity: 1; }
.dns-card-delete:hover {
background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.6);
color: #f87171; transform: scale(1.05);
}
.dns-card-delete-inline { position: static; opacity: 0.35; flex-shrink: 0; }
.dns-recent-card:hover .dns-card-delete-inline { opacity: 1; }
/* Resume affordance for projects whose last AI generation ended with gaps or errors. */
.dns-card-resume { padding: 4px 10px; font-size: 0.75rem; border-radius: 6px; }
.dns-card-resume-inline {
flex-shrink: 0; white-space: nowrap;
background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.5); color: #f59e0b;
border-radius: 6px; padding: 1px 8px; font-size: 0.72rem; cursor: pointer; line-height: 1.4;
}
.dns-card-resume-inline:hover { background: rgba(245,158,11,0.3); }
html.light-theme .dns-card-delete { background: rgba(255,255,255,0.8); border-color: #e2e8f0; color: #64748b; }
/* ── Left: projects panel ──────────────────────── */
.landing-projects-panel {
display: flex;
flex-direction: column;
height: 100%;
border-right: 1px solid rgba(255,255,255,0.07);
background: linear-gradient(180deg, rgba(9,14,28,0.94), rgba(15,23,42,0.78));
backdrop-filter: blur(16px);
overflow: hidden;
}
.landing-projects-header {
padding: 24px 24px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
.landing-projects-header h2 {
margin: 0 0 4px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #94a3b8;
}
.landing-projects-count {
font-size: 0.72rem;
color: #64748b;
}
.landing-projects-list {
flex: 1;
overflow-y: auto;
padding: 14px 14px 18px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: #334155 transparent;
}
.landing-projects-list::-webkit-scrollbar { width: 4px; }
.landing-projects-list::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
/* ───────────────────────────────────────────────
PROJECT CARDS
─────────────────────────────────────────────── */
.proj-card {
display: flex;
flex-direction: column;
padding: 0; /* accent bar on top, content below */
min-height: 112px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(15,22,40,0.95);
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
animation: fadeInUp 0.32s ease both;
position: relative;
overflow: hidden;
box-shadow: 0 4px 16px rgba(2,6,23,0.30);
}
.proj-card-inner {
padding: 14px 15px 38px; /* bottom padding reserves space for Load Project button */
display: flex;
flex-direction: column;
flex: 1;
gap: 0;
}
.proj-card.active-1 .proj-card-inner {
padding-top: 14px; /* same as base — no hard stripe to clear */
padding-right: 74px; /* keep title clear of the "Latest" badge */
}
/* Hover lift */
.proj-card:hover {
border-color: rgba(99,102,241,0.45);
box-shadow: 0 10px 32px rgba(2,6,23,0.42);
transform: translateY(-2px);
}
/* Soft left-edge glow on hover */
.proj-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(99,102,241,0.08) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
border-radius: inherit;
}
.proj-card:hover::after { opacity: 1; }
/* ── Latest card highlight ───────────────────────────── */
.proj-card.active-1 {
border-color: rgba(129,140,248,0.42);
background: linear-gradient(170deg, rgba(26,22,72,0.97) 0%, rgba(14,18,38,0.97) 100%);
animation: fadeInUp 0.32s ease both, latest-card-breathe 3.6s ease-in-out 0.6s infinite;
}
/* Soft ambient radial glow from top — no hard line */
.proj-card.active-1::before {
content: '';
position: absolute;
top: -24px; left: 50%;
transform: translateX(-50%);
width: 200px; height: 90px;
background: radial-gradient(ellipse, rgba(99,102,241,0.32) 0%, rgba(139,92,246,0.12) 45%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.proj-card.active-1:hover {
border-color: rgba(129,140,248,0.65);
box-shadow: 0 14px 48px rgba(99,102,241,0.36), 0 2px 12px rgba(0,0,0,0.45);
}
.proj-card.active-2 { border-color: rgba(59,130,246,0.22); }
.proj-card.active-3 { border-color: rgba(20,184,166,0.18); }
/* ── Card header ────────────────────────────────────── */
.proj-card-header {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 10px;
}
.proj-card-icon {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Per-theme icon backgrounds — initials pick up the accent color */
.proj-card-icon.theme-indigo { background: linear-gradient(145deg, #312e81, #1e1b4b); }
.proj-card-icon.theme-indigo .proj-card-icon-initials { color: #a5b4fc; }
.proj-card-icon.theme-cyan { background: linear-gradient(145deg, #0e7490, #083344); }
.proj-card-icon.theme-cyan .proj-card-icon-initials { color: #67e8f9; }
.proj-card-icon.theme-violet { background: linear-gradient(145deg, #6d28d9, #2e1065); }
.proj-card-icon.theme-violet .proj-card-icon-initials { color: #c4b5fd; }
.proj-card-icon.theme-emerald { background: linear-gradient(145deg, #065f46, #022c22); }
.proj-card-icon.theme-emerald .proj-card-icon-initials { color: #6ee7b7; }
.proj-card-icon.theme-amber { background: linear-gradient(145deg, #92400e, #451a03); }
.proj-card-icon.theme-amber .proj-card-icon-initials { color: #fcd34d; }
/* 2-letter initials */
.proj-card-icon-initials {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
text-transform: uppercase;
}
.proj-card.active-1 .proj-card-icon { border-color: rgba(129,140,248,0.4); }
.proj-card:hover .proj-card-icon {
transform: scale(1.06);
box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.proj-card-title-area { flex: 1; min-width: 0; }
.proj-card-name {
font-size: 0.95rem;
font-weight: 700;
color: #f1f5f9;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.proj-card.active-1 .proj-card-name { color: #e0e7ff; }
.proj-card-tech {
margin-top: 3px;
font-size: 0.69rem;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Stats row */
.proj-card-stats {
display: flex;
align-items: center;
gap: 6px;
margin-top: auto;
}
.proj-card-stat {
font-size: 0.7rem;
color: #94a3b8;
}
.proj-card-stat-sep {
font-size: 0.8rem;
color: #475569;
line-height: 1;
}
/* Load Project button — bottom-right absolute */
.proj-card-open {
position: absolute;
bottom: 12px; right: 14px;
display: flex;
align-items: center;
gap: 3px;
font-size: 0.69rem;
font-weight: 600;
color: #64748b;
letter-spacing: 0.01em;
transition: color 0.18s;
}
.proj-card-arrow {
display: inline-block;
font-size: 0.9rem;
line-height: 1;
transition: transform 0.22s ease;
}
.proj-card:hover .proj-card-open { color: #818cf8; }
.proj-card:hover .proj-card-arrow { transform: translateX(5px); }
.proj-card.active-1 .proj-card-open { color: #818cf8; }
/* Latest badge */
.proj-active-badge {
position: absolute;
top: 14px; right: 12px;
font-size: 0.56rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 3px 9px;
border-radius: 999px;
}
.proj-active-badge.badge-1 {
background: rgba(99,102,241,0.2);
color: #a5b4fc;
border: 1px solid rgba(99,102,241,0.35);
}
.landing-empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
text-align: center;
gap: 12px;
}
.landing-empty-icon { font-size: 2.5rem; }
.landing-empty-title { font-size: 0.95rem; color: #94a3b8; margin: 0; }
.landing-empty-sub { font-size: 0.8rem; color: #475569; margin: 0; }
/* ── Right: AI chat panel ──────────────────────── */
.landing-ai-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-height: 0;
padding: min(4vh, 32px) 48px 24px;
background: transparent;
position: relative;
overflow: visible;
}
.landing-ai-panel::before {
content: '';
position: absolute;
top: -200px; right: -200px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 60%);
pointer-events: none;
}
.landing-hero {
text-align: center;
margin-bottom: 28px;
animation: fadeInUp 0.5s ease both;
width: 100%;
max-width: 640px;
}
.landing-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.7rem;
font-weight: 700;
color: #a5b4fc;
background: rgba(99,102,241,0.1);
border: 1px solid rgba(99,102,241,0.3);
padding: 5px 14px;
border-radius: 999px;
margin-bottom: 20px;
letter-spacing: 0.06em;
text-transform: uppercase;
animation: fadeInUp 0.9s ease both, badge-pulse 3s ease-in-out 2s infinite;
}
.landing-hero h1 {
margin: 0 0 14px;
font-family: var(--dns-font-display);
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.32;
padding-bottom: 0.22em; /* descender safe-zone for background-clip:text */
text-wrap: balance; /* auto-balances line lengths — no manual
needed */
background: linear-gradient(135deg, #f8fafc 20%, #c7d2fe 55%, #38bdf8 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Blazor FocusOnNavigate auto-focuses h1 on page load — suppress the browser outline ring */
.landing-hero h1:focus,
.landing-hero h1:focus-visible {
outline: none;
}
.landing-hero p {
margin: 0 auto;
font-size: 1.02rem;
font-weight: 450;
letter-spacing: -0.005em;
color: #94a3b8;
line-height: 1.7;
max-width: 100%;
text-wrap: balance;
}
/* chat input card — border is an inset box-shadow; no border property means zero flash */
.landing-chat-card {
width: 100%;
max-width: 640px;
background: rgba(11,16,28,0.98);
border: none;
outline: none;
border-radius: 20px;
padding: 8px 8px 8px 22px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 1;
/* glow-border starts at 0.8s so fadeInUp fully completes first — no startup flash */
animation: fadeInUp 0.55s ease 0.1s both, glow-border 5s ease-in-out 0.8s infinite;
}
.landing-chat-card:focus-within {
outline: none;
box-shadow: inset 0 0 0 1.5px rgba(99,102,241,0.9),
0 0 0 3px rgba(99,102,241,0.15),
0 0 40px rgba(99,102,241,0.28),
0 20px 44px rgba(0,0,0,0.5);
/* freeze only the glow cycle on focus; the fadeInUp entrance must keep running,
otherwise autofocus on load pauses it at opacity 0 and the card stays hidden */
animation-play-state: running, paused;
}
.landing-chat-textarea {
width: 100%;
background: transparent;
border: none;
outline: none;
color: #f1f5f9;
font-size: 0.95rem;
font-family: inherit;
line-height: 1.6;
resize: none;
min-height: 80px;
max-height: 200px;
padding: 14px 0 4px;
caret-color: #6366f1;
}
.landing-chat-textarea::placeholder { color: #475569; }
.landing-chat-footer {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 6px;
}
.landing-chat-model-select {
flex: 0 0 auto;
background: rgba(30,41,59,0.8);
border: 1px solid #334155;
border-radius: 8px;
color: #94a3b8;
font-size: 0.75rem;
padding: 6px 10px;
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.landing-chat-model-select:hover { border-color: #475569; }
.landing-chat-name-input {
flex: 1;
background: rgba(30,41,59,0.6);
border: 1px solid #1e293b;
border-radius: 8px;
color: #e2e8f0;
font-size: 0.78rem;
padding: 6px 10px;
outline: none;
transition: border-color 0.15s;
font-family: inherit;
}
.landing-chat-name-input::placeholder { color: #475569; }
.landing-chat-name-input:focus { border-color: #6366f1; }
.landing-chat-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.btn-plan {
display: flex; align-items: center; gap: 6px;
padding: 8px 16px;
border: 1px solid rgba(99,102,241,0.4);
border-radius: 10px;
background: rgba(99,102,241,0.12);
color: #a5b4fc;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.18s ease;
white-space: nowrap;
}
.btn-plan:hover:not(:disabled) { background: rgba(99,102,241,0.22); border-color: rgba(99,102,241,0.6); transform: translateY(-1px); }
.btn-plan:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-build {
display: flex; align-items: center; gap: 6px;
padding: 8px 18px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: white;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.18s ease;
box-shadow: 0 4px 14px rgba(99,102,241,0.35);
white-space: nowrap;
}
.btn-build:hover:not(:disabled) { background: linear-gradient(135deg, #7c3aed, #6366f1); box-shadow: 0 6px 20px rgba(99,102,241,0.5); transform: translateY(-1px); }
.btn-build:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
/* loading shimmer for project skeleton */
.proj-skeleton {
height: 110px;
border-radius: 14px;
background: linear-gradient(90deg, rgba(30,41,59,0.4) 25%, rgba(51,65,85,0.4) 50%, rgba(30,41,59,0.4) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
/* ═══════════════════════════════════════════════
WORKSPACE AI CHAT PANEL
═══════════════════════════════════════════════ */
.ai-chat-header {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 12px;
border-bottom: 1px solid #1e293b;
flex-shrink: 0;
}
.ai-chat-title {
display: flex; align-items: center; gap: 7px;
font-size: 0.8rem; font-weight: 600; color: #e2e8f0;
}
.ai-chat-tabs {
display: flex; gap: 4px;
}
.ai-chat-tab {
padding: 4px 12px;
border-radius: 6px;
font-size: 0.72rem; font-weight: 600;
border: 1px solid #334155;
background: transparent;
color: #64748b;
transition: all 0.15s;
}
.ai-chat-tab.active { background: #1d4ed8; color: #dbeafe; border-color: #1d4ed8; }
.ai-chat-tab:hover:not(.active) { background: #1e293b; color: #94a3b8; }
/* Generation build surface — left side of the workbench while a new project builds */
.dns-gen-surface {
background: #0b1220;
align-items: center; justify-content: center;
}
.dns-gen-surface-inner {
display: flex; flex-direction: column; align-items: center;
gap: 10px; padding: 28px; max-width: 520px; width: 100%;
margin: auto; text-align: center; min-width: 0;
}
.dns-gen-surface-icon { font-size: 2.4rem; }
.dns-gen-surface-title { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; }
.dns-gen-surface-sub { font-size: 0.84rem; color: #64748b; line-height: 1.5; }
.dns-gen-filelist {
margin-top: 12px; width: 100%; display: flex; flex-direction: column; gap: 4px;
max-height: 46vh; overflow-y: auto; text-align: left;
border: 1px solid #1e293b; border-radius: 10px; padding: 8px; background: #0f172a;
}
.dns-gen-filerow {
display: flex; align-items: center; gap: 8px; min-width: 0;
font-family: monospace; font-size: 0.72rem; color: #93c5fd;
padding: 3px 6px; border-radius: 6px;
}
.dns-gen-filerow > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.light-theme .dns-gen-surface { background: #f8fafc; }
html.light-theme .dns-gen-surface-title { color: #0f172a; }
html.light-theme .dns-gen-filelist { background: #fff; border-color: #e2e8f0; }
/* ── Agentic chat message rows ──────────────────────────────────────────────
Every phase renders into one of these so nothing free-floats or merges.
Strict min-width:0 + overflow containment keeps the layout intact at ANY
panel width, including when the AI panel is resized to fill the screen. */
.ai-msg {
display: flex; align-items: flex-start; gap: 10px;
width: 100%; min-width: 0; max-width: 100%;
animation: aiStreamIn 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.ai-msg.user { justify-content: flex-end; }
.ai-msg-avatar {
flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #101a2f; border: 1px solid rgba(99,102,241,0.25);
font-size: 0.8rem; line-height: 1;
}
.ai-msg-body {
flex: 1 1 auto; min-width: 0; max-width: calc(100% - 40px);
display: flex; flex-direction: column; gap: 8px;
background: #101a2f; border: 1px solid rgba(99,102,241,0.16);
border-radius: 12px; padding: 10px 12px;
overflow-wrap: anywhere; word-break: break-word;
}
.ai-msg.user .ai-msg-body {
flex: 0 1 auto; background: #1e293b; border-color: #334155;
}
.ai-msg-text { font-size: 0.82rem; line-height: 1.5; color: #cbd5e1; min-width: 0; }
.ai-msg-text.success { color: #4ade80; font-weight: 600; }
.ai-msg-text.error { color: #f87171; font-weight: 600; }
.ai-msg-warn { font-size: 0.72rem; color: #fbbf24; overflow-wrap: anywhere; }
.ai-msg-note {
display: flex; align-items: center; gap: 8px;
padding: 7px 9px; background: #0b1220; border: 1px solid #1e293b;
border-radius: 8px; font-size: 0.76rem; color: #93c5fd; min-width: 0;
}
.ai-msg-files {
display: flex; flex-direction: column; gap: 3px;
max-height: 240px; overflow-y: auto; min-width: 0;
}
.ai-msg-file { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-msg-file .p {
font-family: monospace; font-size: 0.73rem; color: #93c5fd;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-msg-file .d { font-size: 0.69rem; color: #94a3b8; }
/* Nested plan cards must never exceed the bubble */
.ai-msg-body .ai-inline-plan,
.ai-msg-body .ai-stream-progress { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
.ai-msg-body .plan-step { min-width: 0; }
.ai-msg-body .plan-step-text { overflow-wrap: anywhere; }
html.light-theme .ai-msg-body { background: #f8fafc; border-color: #e2e8f0; }
html.light-theme .ai-msg.user .ai-msg-body { background: #e0e7ff; border-color: #c7d2fe; }
html.light-theme .ai-msg-text { color: #334155; }
html.light-theme .ai-msg-avatar { background: #eef2ff; border-color: #c7d2fe; }
html.light-theme .ai-msg-note { background: #fff; border-color: #e2e8f0; }
/* Chat-style Idle panel: scrollable history fills space, composer docks at bottom */
.ai-chat-idle { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ai-chat-scroll {
flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column; gap: 10px;
padding: 14px 14px 6px;
/* Cap readable line length so a full-width panel doesn't stretch text edge to edge */
scrollbar-gutter: stable;
}
.ai-chat-scroll > * { max-width: 100%; min-width: 0; }
/* The right panel itself must never let children force it wider than its flex basis */
.dns-right-panel { min-width: 0; overflow: hidden; }
.dns-right-panel * { max-width: 100%; }
.ai-chat-bubble {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 12px; border-radius: 12px;
background: #101a2f; border: 1px solid rgba(99,102,241,0.14);
font-size: 0.82rem; line-height: 1.4; color: #cbd5e1;
max-width: 96%;
}
.ai-chat-bubble.assistant { align-self: flex-start; }
/* Long, unbreakable tokens (file paths, package ids, build log lines, URLs) streamed into the
chat must wrap instead of forcing the panel to scroll horizontally or overlap the workbench.
This keeps the pane readable at any width, including while a build is streaming. */
.ai-chat-bubble, .ai-chat-bubble * {
overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
.ai-chat-bubble pre, .ai-chat-bubble code,
.dns-right-panel pre, .dns-right-panel code {
white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; overflow-x: auto;
}
.dns-right-panel table { width: 100%; table-layout: fixed; }
.dns-right-panel img, .dns-right-panel svg { max-width: 100%; height: auto; }
.ai-chat-empty {
margin: auto; text-align: center; color: #64748b;
font-size: 0.82rem; line-height: 1.5; padding: 20px; max-width: 260px;
}
.ai-chat-composer-dock { flex: 0 0 auto; margin-top: auto; min-width: 0; overflow: hidden; }
.ai-chat-composer-dock .ai-prompt-textarea { width: 100%; max-width: 100%; box-sizing: border-box; resize: none; }
html.light-theme .ai-chat-bubble { background: #f8fafc; border-color: #e2e8f0; color: #334155; }
/* workspace prompt area */
.ai-prompt-area {
background: #0b1220;
border: 1px solid #1e293b;
border-radius: 14px;
display: flex;
flex-direction: column;
transition: border-color 0.15s, box-shadow 0.2s;
box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
/* Docked composer glow animation, mirroring the landing chat card */
animation: glow-border 5s ease-in-out infinite;
}
.ai-prompt-area:focus-within { border-color: rgba(99,102,241,0.6); box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 12px 34px -18px rgba(0,0,0,0.7); animation-play-state: paused; }
.ai-prompt-textarea {
width: 100%;
background: transparent;
border: none;
outline: none;
color: #e2e8f0;
font-size: 0.82rem;
font-family: inherit;
padding: 10px 12px 6px;
resize: none;
line-height: 1.5;
min-height: 70px;
caret-color: #6366f1;
}
.ai-prompt-textarea::placeholder { color: #334155; }
.ai-prompt-footer {
display: flex; align-items: center; gap: 6px;
padding: 6px 8px;
border-top: 1px solid #0f172a;
}
.ai-model-chip {
font-size: 0.65rem; color: #64748b;
background: #0f172a; border: 1px solid #1e293b;
padding: 3px 8px; border-radius: 999px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.ai-prompt-btns { display: flex; gap: 5px; margin-left: auto; }
.ai-btn-plan {
padding: 5px 12px; font-size: 0.72rem; font-weight: 600;
border: 1px solid rgba(99,102,241,0.4); border-radius: 7px;
background: rgba(99,102,241,0.1); color: #a5b4fc;
transition: all 0.15s;
}
.ai-btn-plan:hover:not(:disabled) { background: rgba(99,102,241,0.2); }
.ai-btn-build {
padding: 5px 14px; font-size: 0.72rem; font-weight: 600;
border: none; border-radius: 8px;
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: white;
box-shadow: 0 4px 14px rgba(99,102,241,0.35);
transition: all 0.15s;
}
.ai-btn-build:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.5); }
.ai-btn-plan:disabled, .ai-btn-build:disabled { opacity: 0.4; cursor: not-allowed; }
.ai-btn-stop {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 16px; font-size: 0.72rem; font-weight: 700;
border: 1px solid rgba(239,68,68,0.5); border-radius: 8px;
background: rgba(239,68,68,0.12); color: #fca5a5;
cursor: pointer; transition: all 0.15s;
animation: aiStopPulse 1.6s ease-in-out infinite;
}
.ai-btn-stop:hover { background: rgba(239,68,68,0.2); color: #fecaca; }
@keyframes aiStopPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.0); }
50% { box-shadow: 0 0 0 4px rgba(239,68,68,0.14); }
}
/* ── Composer toolbar (attach / improve / MCP) ─────────────────── */
.ai-composer-toolbar {
display: flex; align-items: center; gap: 6px;
padding: 6px 8px;
border-top: 1px solid #0f172a;
position: relative;
}
.ai-tool-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px; font-size: 0.7rem; font-weight: 600;
border: 1px solid #1e293b; border-radius: 7px;
background: #0f172a; color: #94a3b8;
cursor: pointer; transition: all 0.15s;
}
.ai-tool-btn:hover:not(:disabled) { background: #16233b; color: #cbd5e1; border-color: #334155; }
.ai-tool-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-tool-btn.active { color: #a5b4fc; border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.12); }
.ai-attach-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; }
/* Auto / Manual enhancement segmented switch */
.ai-mode-switch {
display: inline-flex; align-items: center; gap: 2px;
padding: 2px; border-radius: 8px;
background: #0f172a; border: 1px solid #1e293b;
margin-left: auto;
}
.ai-mode-seg {
padding: 4px 10px; font-size: 0.7rem; font-weight: 600;
border: none; border-radius: 6px; cursor: pointer;
background: transparent; color: #64748b; transition: all 0.15s;
}
.ai-mode-seg:hover:not(.active) { color: #cbd5e1; }
.ai-mode-seg.active { background: linear-gradient(135deg,#6366f1,#4f46e5); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.4); }
html.light-theme .ai-mode-switch { background: #f1f5f9; border-color: #e2e8f0; }
/* Small confirm dialog (Manual-mode popup) */
.dns-confirm-dialog {
width: min(420px, 92vw);
background: var(--dns-bg-surface, #0b1220);
border: 1px solid var(--dns-border-strong, #334155);
border-radius: 14px; padding: 22px 22px 18px;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
color: var(--dns-text, #e2e8f0);
}
/* Attachment chips — hard-clamped to the composer width so an image upload can never widen the pane */
.ai-attach-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.ai-attach-chip {
display: inline-flex; align-items: center; gap: 6px;
max-width: min(260px, 100%); min-width: 0; flex: 0 1 auto;
padding: 3px 6px 3px 8px; font-size: 0.68rem;
background: #0f172a; border: 1px solid #1e293b; border-radius: 999px;
color: #cbd5e1;
}
.ai-attach-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; min-width: 0; }
.ai-attach-chip .size { color: #64748b; flex-shrink: 0; }
.ai-attach-chip .remove {
border: none; background: transparent; color: #64748b; cursor: pointer;
font-size: 0.78rem; line-height: 1; padding: 0 2px; flex-shrink: 0;
}
.ai-attach-chip .remove:hover { color: #f87171; }
.ai-attach-thumb { width: 18px; height: 18px; max-width: 18px; max-height: 18px; flex: 0 0 18px; border-radius: 4px; object-fit: cover; }
.dnsc-composer { min-width: 0; max-width: 100%; }
.dnsc-composer > * { min-width: 0; max-width: 100%; }
/* MCP / Connectors menu */
.ai-mcp-menu {
position: absolute; bottom: calc(100% + 6px); left: 8px; z-index: 40;
width: min(240px, calc(100% - 16px)); max-width: calc(100vw - 32px);
max-height: min(60vh, calc(100vh - 120px)); overflow-y: auto;
background: #0b1220; border: 1px solid #1e293b;
border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.5);
padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.ai-mcp-menu-title { font-size: 0.66rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px 4px; }
.ai-mcp-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 6px; border-radius: 7px; cursor: pointer;
transition: background 0.12s;
}
.ai-mcp-item:hover { background: #111c31; }
.ai-mcp-item .glyph { font-size: 0.9rem; }
.ai-mcp-item .label { flex: 1; min-width: 0; }
.ai-mcp-item .label .n { font-size: 0.74rem; color: #e2e8f0; }
.ai-mcp-item .label .d { font-size: 0.64rem; color: #64748b; }
.ai-mcp-item .state { font-size: 0.62rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.ai-mcp-item .state.on { color: #4ade80; background: rgba(34,197,94,0.12); }
.ai-mcp-item .state.off { color: #64748b; background: #0f172a; }
.ai-mcp-hint { font-size: 0.62rem; color: #475569; padding: 4px 6px 2px; line-height: 1.4; }
/* Response feedback (like / dislike) — token-driven so both themes follow automatically. */
.ai-feedback-bar { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ai-feedback-label { font-size: 0.68rem; color: var(--dns-text-subtle); }
.ai-feedback-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 26px; font-size: 0.82rem;
border: 1px solid var(--dnsc-card-border); border-radius: 7px;
background: var(--dnsc-card); color: var(--dns-text-muted); cursor: pointer; transition: all 0.15s;
}
.ai-feedback-btn:hover { background: var(--dnsc-card-strong); border-color: var(--dns-border-strong); color: var(--dns-text); }
.ai-feedback-btn.up.active { color: var(--dnsc-ok); border-color: var(--dnsc-ok); background: rgba(34,197,94,0.12); }
.ai-feedback-btn.down.active { color: var(--dnsc-err); border-color: var(--dnsc-err); background: rgba(248,113,113,0.12); }
/* ── Live activity stream (clickable action cards) ─────────────── */
.ai-activity-card {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 8px 10px; border: 1px solid #1e293b; border-radius: 9px;
background: #0b1220; color: #cbd5e1; cursor: pointer;
transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.ai-activity-card:hover { border-color: rgba(99,102,241,0.5); background: #101a2f; transform: translateX(1px); }
.ai-activity-icon { font-size: 0.85rem; line-height: 1.3; flex-shrink: 0; }
.ai-activity-text { font-size: 0.8rem; line-height: 1.35; flex: 1; min-width: 0; }
.ai-activity-badge {
font-size: 0.62rem; font-weight: 700; color: #a5b4fc;
background: rgba(99,102,241,0.14); border: 1px solid rgba(99,102,241,0.3);
padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.ai-activity-chevron { color: #475569; font-size: 1rem; flex-shrink: 0; }
.ai-activity-line { display: flex; align-items: flex-start; gap: 8px; animation: aiStreamIn 0.32s cubic-bezier(0.22,1,0.36,1) both; }
.ai-activity-line .ai-activity-text { color: #cbd5e1; }
.ai-activity-line.summary .ai-activity-text { color: #4ade80; }
/* Every new stream entry slides up + fades in — Copilot-style upward flow */
@keyframes aiStreamIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Module build states (module-by-module live stream) ──────────── */
.ai-activity-card.module-building {
border-color: rgba(99,102,241,0.55);
background: linear-gradient(90deg, #101a2f, #0b1220, #101a2f);
background-size: 200% 100%;
animation: moduleBuildingPulse 1.4s ease-in-out infinite;
}
@keyframes moduleBuildingPulse {
0% { background-position: 0% 0; border-color: rgba(99,102,241,0.35); }
50% { background-position: 100% 0; border-color: rgba(129,140,248,0.7); }
100% { background-position: 0% 0; border-color: rgba(99,102,241,0.35); }
}
.ai-activity-card.module-failed {
border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.08);
}
/* ── Live agent step (in-progress): actions stream in line-by-line before grouping ── */
.ai-live-step {
border: 1px solid rgba(99,102,241,0.45); border-radius: 10px;
background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(11,18,32,0.4));
overflow: hidden; animation: aiStreamIn 0.3s ease both;
}
.ai-live-step-head {
display: flex; align-items: center; gap: 8px;
padding: 9px 11px; border-bottom: 1px solid rgba(99,102,241,0.18);
}
.ai-live-step-title { font-size: 0.82rem; font-weight: 600; color: #e2e8f0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-live-step-body { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; max-height: 240px; overflow-y: auto; overflow-x: hidden; min-width: 0; }
.ai-live-action {
display: flex; align-items: center; gap: 8px;
padding: 3px 6px; font-size: 0.75rem; color: #cbd5e1;
animation: aiStreamIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.ai-live-action.done .ai-live-action-check { color: #4ade80; font-size: 0.72rem; }
.ai-live-action.done { color: #a7f3d0; }
.ai-live-action.active { color: #93c5fd; }
.ai-live-action.pending { color: #94a3b8; }
.ai-live-action-dot { color: #64748b; }
.ai-live-action-verb { font-size: 0.68rem; color: #64748b; flex-shrink: 0; }
.ai-live-action-file { font-family: monospace; color: #93c5fd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-live-action-text { color: inherit; }
html.light-theme .ai-live-step { border-color: rgba(99,102,241,0.35); background: linear-gradient(180deg, rgba(99,102,241,0.05), #ffffff); }
html.light-theme .ai-live-step-title { color: #0f172a; }
.ai-activity-status {
display: inline-block; margin-left: 8px; font-size: 0.62rem; font-weight: 700;
padding: 1px 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap;
}
.ai-activity-status.generating { color: #c4b5fd; background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.35); }
.ai-activity-status.building { color: #93c5fd; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.35); }
.ai-activity-status.success { color: #4ade80; background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.32); }
.ai-activity-status.failed { color: #f87171; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.35); }
.ai-activity-failreason {
display: block; margin-top: 4px; font-size: 0.68rem; color: #fca5a5; line-height: 1.35;
}
/* ── Copilot-style grouped action dropdown ─────────────────────────── */
.ai-group {
border: 1px solid #1e293b; border-radius: 10px;
background: #0b1220; overflow: hidden;
animation: aiGroupIn 0.28s ease both;
}
@keyframes aiGroupIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ai-group.open { border-color: rgba(99,102,241,0.4); }
.ai-group.module-building { border-color: rgba(99,102,241,0.55); }
.ai-group.module-failed { border-color: rgba(239,68,68,0.5); }
.ai-group-header {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 9px 11px; background: transparent; border: none; cursor: pointer;
color: #e2e8f0; transition: background 0.14s;
}
.ai-group-header:hover { background: #101a2f; }
.ai-group-caret { color: #64748b; font-size: 0.8rem; width: 12px; flex-shrink: 0; }
.ai-group-title { font-size: 0.82rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-group-elapsed {
font-size: 0.62rem; font-weight: 700; color: #94a3b8;
background: #0f172a; border: 1px solid #1e293b;
padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.ai-group-body {
display: flex; flex-direction: column; gap: 4px;
padding: 4px 10px 10px 30px; border-top: 1px solid #101a2f;
animation: aiGroupIn 0.2s ease both;
/* Long file lists scroll inside the card instead of stretching the chat */
max-height: 300px; overflow-y: auto; overflow-x: hidden; min-width: 0;
}
.ai-group-row {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 5px 8px; border: 1px solid transparent; border-radius: 7px;
background: transparent; color: #cbd5e1; cursor: pointer; transition: all 0.12s;
animation: aiGroupIn 0.22s ease both;
}
.ai-group-row:hover { background: #101a2f; border-color: #334155; }
.ai-group-row:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.ai-group-row.pending { color: #94a3b8; cursor: default; }
.ai-group-row-check { font-size: 0.72rem; flex-shrink: 0; }
.ai-group-row-verb { font-size: 0.72rem; color: #64748b; flex-shrink: 0; }
.ai-group-row-file { font-size: 0.74rem; font-family: monospace; color: #93c5fd; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-group-row-text { font-size: 0.74rem; }
/* Keep the affordance visible (dimmed) so rows read as clickable without hovering */
.ai-group-row-open { font-size: 0.66rem; color: #6366f1; flex-shrink: 0; opacity: 0.45; transition: opacity 0.12s; }
.ai-group-row:hover .ai-group-row-open { opacity: 1; }
.ai-group-detail {
margin-top: 4px; align-self: flex-start; font-size: 0.68rem; font-weight: 600;
color: #a5b4fc; background: transparent; border: none; cursor: pointer; padding: 2px 0;
}
.ai-group-detail:hover { color: #c7d2fe; text-decoration: underline; }
/* Nested sub-group labels (Controllers / Views / Models …) */
.ai-subgroup-label {
display: flex; align-items: center; gap: 6px;
margin: 6px 0 2px; font-size: 0.64rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; color: #64748b;
}
.ai-subgroup-label:first-child { margin-top: 0; }
.ai-subgroup-count {
font-size: 0.6rem; font-weight: 700; color: #94a3b8;
background: #0f172a; border: 1px solid #1e293b;
padding: 0 6px; border-radius: 999px; margin-left: 2px;
}
html.light-theme .ai-subgroup-count { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
/* Typing/appear effect for narration lines — wraps naturally (no single-line clipping) */
.ai-activity-line.typing .ai-activity-text {
position: relative; white-space: normal; word-break: break-word;
animation: aiTypeFade 0.5s ease both;
}
.ai-activity-line.typing .ai-activity-text::after {
content: '';
display: inline-block; width: 7px; height: 1em;
margin-left: 3px; vertical-align: text-bottom;
background: rgba(147,197,253,0.85); border-radius: 1px;
animation: aiCaret 0.8s step-end infinite;
}
@keyframes aiTypeFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes aiCaret { 50% { opacity: 0; } }
/* Live "working…" line + status row (Copilot-style animated activity) */
.ai-working-line {
display: flex; align-items: center; gap: 8px;
font-size: 0.78rem; color: #93c5fd; padding: 2px 2px;
animation: aiStreamIn 0.3s ease both;
}
.ai-working-dots span { animation: aiDot 1.2s infinite; }
.ai-working-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-working-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDot { 0%,60%,100% { opacity: 0.2; } 30% { opacity: 1; } }
.ai-stream-status {
display: flex; align-items: center; gap: 8px;
font-size: 0.8rem; color: #cbd5e1; font-weight: 500;
padding: 6px 10px; border-radius: 9px;
background: linear-gradient(90deg, rgba(99,102,241,0.10), rgba(6,182,212,0.06));
border: 1px solid rgba(99,102,241,0.22);
animation: aiStreamIn 0.3s ease both;
}
html.light-theme .ai-stream-status { color: #334155; background: linear-gradient(90deg, rgba(99,102,241,0.08), rgba(6,182,212,0.05)); border-color: rgba(99,102,241,0.2); }
html.light-theme .ai-group { background: #ffffff; border-color: #e2e8f0; }
html.light-theme .ai-group-header { color: #0f172a; }
html.light-theme .ai-group-header:hover,
html.light-theme .ai-group-row:hover { background: #f1f5f9; }
html.light-theme .ai-group-elapsed { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
.ai-detail-failsummary {
font-size: 0.76rem; color: #fca5a5; background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25); border-radius: 8px; padding: 8px 10px; line-height: 1.4;
}
.ai-detail-trail {
display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto;
background: #060b16; border: 1px solid #1e293b; border-radius: 8px; padding: 8px 10px;
}
.ai-detail-trail-line { font-family: monospace; font-size: 0.68rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ai-detail-trail-line.err { color: #f87171; }
.ai-detail-trail-line.warn { color: #fbbf24; }
.ai-detail-trail-line.info { color: #94a3b8; }
/* ── Live generation meter (elapsed timer + tokens + cost) ─────────── */
.ai-gen-meter {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.ai-gen-meter-item {
display: flex;
align-items: baseline;
gap: 6px;
background: var(--dnsc-card);
border: 1px solid var(--dnsc-card-border);
border-radius: 10px;
padding: 8px 14px;
min-width: 96px;
justify-content: center;
}
.ai-gen-meter-icon { font-size: 0.9rem; }
.ai-gen-meter-value {
color: var(--dns-text-strong);
font-size: 1.05rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.ai-gen-meter-label {
color: var(--dns-text-subtle);
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ai-gen-meter-sub {
color: var(--dns-text-subtle);
font-size: 0.72rem;
text-align: center;
margin: -8px 0 18px;
}
/* Light theme needs deeper active-state text than the shared token, which is tuned
for contrast against dark surfaces. Everything else follows the tokens directly. */
html.light-theme .ai-feedback-btn.up.active {
color: #15803d;
border-color: rgba(21,128,61,0.45);
background: rgba(34,197,94,0.14);
}
html.light-theme .ai-feedback-btn.down.active {
color: #b91c1c;
border-color: rgba(185,28,28,0.45);
background: rgba(248,113,113,0.14);
}
/* ── Action drilldown modal ────────────────────────────────────── */
.ai-detail-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(2,6,23,0.68); backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center; padding: 24px;
animation: aiDetailFade 0.12s ease;
}
@keyframes aiDetailFade { from { opacity: 0; } to { opacity: 1; } }
.ai-detail-modal {
width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column;
background: #0b1220; border: 1px solid #1e293b; border-radius: 14px;
box-shadow: 0 24px 60px rgba(0,0,0,0.6); overflow: hidden;
}
.ai-detail-header {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; border-bottom: 1px solid #1e293b;
background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(79,70,229,0.05));
}
.ai-detail-title { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: #f1f5f9; flex: 1; min-width: 0; }
.ai-detail-close {
border: none; background: transparent; color: #64748b; font-size: 1rem; cursor: pointer;
width: 26px; height: 26px; border-radius: 6px; transition: all 0.15s;
}
.ai-detail-close:hover { background: #1e293b; color: #f87171; }
.ai-detail-body { padding: 14px 16px; overflow-y: auto; }
.ai-detail-section-label {
display: flex; align-items: center; gap: 8px;
font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
color: #64748b; font-weight: 700; margin: 4px 0 8px;
}
.ai-detail-count {
font-size: 0.62rem; color: #a5b4fc; background: rgba(99,102,241,0.14);
border-radius: 999px; padding: 1px 7px;
}
.ai-detail-intro {
font-size: 0.8rem; color: #cbd5e1; line-height: 1.6; margin-bottom: 14px;
padding: 10px 12px; background: #0f172a; border: 1px solid #1e293b; border-radius: 9px;
}
.ai-detail-files { display: flex; flex-direction: column; gap: 6px; }
.ai-detail-file {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
padding: 8px 10px; border: 1px solid #1e293b; border-radius: 8px;
background: #0f172a; color: #cbd5e1; cursor: pointer; transition: all 0.15s;
}
.ai-detail-file:hover { border-color: rgba(56,189,248,0.5); background: #101f30; }
.ai-detail-file-icon { font-size: 0.9rem; flex-shrink: 0; }
.ai-detail-file-path { font-family: monospace; font-size: 0.74rem; color: #38bdf8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-detail-file-open { font-size: 0.66rem; color: #64748b; flex-shrink: 0; }
.ai-detail-empty { font-size: 0.78rem; color: #64748b; padding: 8px 0; }
/* Light theme — the drilldown modal must follow the active theme, not stay dark. */
html.light-theme .ai-detail-overlay { background: rgba(15,23,42,0.35); }
html.light-theme .ai-detail-modal {
background: #ffffff; border-color: #e2e8f0;
box-shadow: 0 24px 60px rgba(15,23,42,0.18);
}
html.light-theme .ai-detail-header {
border-bottom-color: #e2e8f0;
background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(6,182,212,0.05));
}
html.light-theme .ai-detail-title { color: #0f172a; }
html.light-theme .ai-detail-close { color: #64748b; }
html.light-theme .ai-detail-close:hover { background: #f1f5f9; color: #dc2626; }
html.light-theme .ai-detail-section-label { color: #64748b; }
html.light-theme .ai-detail-count { color: #4338ca; background: rgba(99,102,241,0.12); }
html.light-theme .ai-detail-intro {
color: #334155; background: #f8fafc; border-color: #e2e8f0;
}
html.light-theme .ai-detail-file {
background: #f8fafc; border-color: #e2e8f0; color: #334155;
}
html.light-theme .ai-detail-file:hover { background: #eff6ff; border-color: rgba(37,99,235,0.45); }
html.light-theme .ai-detail-file-path { color: #1d4ed8; }
html.light-theme .ai-detail-file-open,
html.light-theme .ai-detail-empty { color: #64748b; }
html.light-theme .ai-detail-failsummary {
color: #b91c1c; background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.25);
}
html.light-theme .ai-detail-trail { background: #f8fafc; border-color: #e2e8f0; }
html.light-theme .ai-detail-trail-line.err { color: #b91c1c; }
html.light-theme .ai-detail-trail-line.warn { color: #b45309; }
html.light-theme .ai-detail-trail-line.info { color: #475569; }
/* ── Plan display (bolt-style) ─────────────────── */
.plan-display {
flex: 1; overflow-y: auto;
display: flex; flex-direction: column; gap: 0;
padding-right: 2px;
font-size: 0.8rem;
}
.plan-display::-webkit-scrollbar { width: 3px; }
.plan-display::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
.plan-title-bar {
padding: 10px 12px;
background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(79,70,229,0.08));
border: 1px solid rgba(99,102,241,0.2);
border-radius: 8px 8px 0 0;
border-bottom: none;
}
.plan-title { font-size: 0.92rem; font-weight: 700; color: #e2e8f0; margin: 0 0 4px; }
.plan-subtitle { font-size: 0.75rem; color: #94a3b8; line-height: 1.5; }
.plan-section {
border: 1px solid #1e293b;
border-top: none;
padding: 10px 12px;
background: #0f1629;
}
.plan-section:last-child { border-radius: 0 0 8px 8px; }
.plan-section-label {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: #475569; margin-bottom: 8px;
}
.plan-step {
display: flex; gap: 10px;
padding: 8px 10px; margin-bottom: 6px;
background: rgba(15,23,42,0.6);
border: 1px solid rgba(30,41,59,0.8);
border-radius: 7px;
transition: background 0.15s;
}
.plan-step:hover { background: rgba(30,41,59,0.7); }
.plan-step-num {
flex-shrink: 0;
width: 20px; height: 20px;
border-radius: 5px;
background: rgba(99,102,241,0.2);
border: 1px solid rgba(99,102,241,0.3);
color: #a5b4fc;
font-size: 0.65rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.plan-step-text { color: #cbd5e1; line-height: 1.5; font-size: 0.78rem; }
.plan-files-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.plan-file-chip {
font-size: 0.65rem; font-family: monospace;
background: rgba(15,23,42,0.8); border: 1px solid #1e293b;
color: #38bdf8; padding: 2px 7px; border-radius: 4px;
}
/* Clarifying questions are informational, not warnings — amber read as an error
state and clashed with the real warn colour, so these use the brand indigo. */
.plan-questions {
background: rgba(99,102,241,0.07);
border: 1px solid rgba(99,102,241,0.22);
border-radius: 8px;
padding: 10px 12px;
margin-top: 8px;
}
.plan-questions-label {
font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: #a5b4fc; margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.plan-question-item {
font-size: 0.78rem; color: #c7d2fe; line-height: 1.55;
padding: 4px 0; border-bottom: 1px solid rgba(99,102,241,0.12);
}
.plan-question-item:last-child { border-bottom: none; }
.btn-implement {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
padding: 11px 16px;
border: none; border-radius: 10px;
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
font-size: 0.88rem; font-weight: 700;
letter-spacing: -0.01em;
box-shadow: 0 4px 16px rgba(99,102,241,0.4);
transition: all 0.2s ease;
margin-top: 4px;
cursor: pointer;
}
.btn-implement:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(99,102,241,0.6); transform: translateY(-1px); }
.btn-implement:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-cancel-plan {
flex: 0 0 auto;
white-space: nowrap;
padding: 11px 16px;
margin-top: 4px;
background: transparent; border: 1px solid #334155;
border-radius: 10px; color: #94a3b8;
font-size: 0.8rem; font-weight: 600; transition: all 0.15s;
cursor: pointer;
}
.btn-cancel-plan:hover { border-color: #475569; color: #e2e8f0; }
/* ── Spinner ─────────────────────────────────────── */
.ai-spinner { display:inline-block; animation:spin 1s linear infinite; }
/* ── Resizable divider ───────────────────────────── */
.resizable-divider { transition: background 0.15s, box-shadow 0.15s; position: relative; }
.resizable-divider:hover { background: #6366f1 !important; box-shadow: 0 0 10px rgba(99, 102, 241, 0.45); }
.resizable-divider.active { background: #6366f1 !important; box-shadow: 0 0 14px rgba(99, 102, 241, 0.6); }
/* ── last-project-card legacy alias ─────────────── */
.last-project-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
/* ── Editor panel collapsed rail ────────────────── */
#panel-editor {
transition: width 0.25s ease, min-width 0.25s ease, flex 0.25s ease;
}
/* ── Workspace right AI panel scroll fix ─────────── */
#panel-right {
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 100%;
}
#panel-right > * { min-width: 0; }
/* The 3-column row must never grow past the viewport: any flex child that insists on its
intrinsic width (long transcript lines, device-width preview frames, the iframe) would
otherwise push the row wider and leave a blank strip + horizontal scrollbar on the right. */
.dns-workspace-shell { overflow-x: hidden; max-width: 100vw; }
#workspace-container { min-width: 0; max-width: 100%; }
#workspace-container > * { min-width: 0; }
/* PageUp/PageDown/Home/End fired while focus sits on a non-scrolling pane (editor shell, divider,
toolbar) makes the browser nudge scrollLeft/scrollTop on overflow:hidden flex rows — the content
shifts, leaving a dead gap between the editor and the right panel. Hidden-overflow rows are still
programmatically scrollable; `overflow: clip` is not, and `overscroll-behavior: contain` stops the
gesture chaining up from the chat/editor scroll regions. */
.dns-workspace-shell, #workspace-container, #panel-editor, .dns-right-panel, .dns-gen-surface, .ai-chat-idle {
overflow: clip;
overscroll-behavior: contain;
}
.ai-chat-scroll, .dns-main-content, .landing-ai-panel, .dns-build-dock-body { overscroll-behavior: contain; }
.landing-body-full, .landing-viewport { overflow: clip; }
#panel-editor > * { min-width: 0; }
.dns-preview-stage { overflow-x: hidden; }
.dns-preview-stage > * { max-width: 100%; }
/* ?? In-app confirm dialog (replaces window.confirm) ?? */
.dns-confirm-backdrop {
position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center;
background: rgba(2, 6, 23, 0.6); backdrop-filter: blur(6px);
animation: dns-fade-in 0.15s ease;
}
.dns-confirm-card {
width: min(440px, calc(100vw - 32px)); padding: 22px 22px 18px; border-radius: 16px;
background: #0f172a; border: 1px solid #1e293b; color: #e2e8f0;
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
animation: dns-pop-in 0.18s cubic-bezier(.2,.8,.2,1);
}
.dns-confirm-title { font-size: 1rem; font-weight: 700; color: #f8fafc; margin-bottom: 8px; }
.dns-confirm-body { font-size: 0.86rem; line-height: 1.55; color: #94a3b8; }
.dns-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dns-confirm-btn {
border-radius: 10px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
border: 1px solid transparent; transition: background-color .15s, border-color .15s, filter .15s;
}
.dns-confirm-cancel { background: transparent; border-color: #334155; color: #cbd5e1; }
.dns-confirm-cancel:hover { background: #1e293b; }
.dns-confirm-ok { background: linear-gradient(90deg, #6366f1, #3b82f6); color: #fff; }
.dns-confirm-ok:hover { filter: brightness(1.08); }
.dns-confirm-danger { background: #dc2626; color: #fff; }
.dns-confirm-danger:hover { background: #ef4444; }
@keyframes dns-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dns-pop-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
html.light-theme .dns-confirm-backdrop { background: rgba(15, 23, 42, 0.35); }
html.light-theme .dns-confirm-card { background: #ffffff; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .dns-confirm-title { color: #0f172a; }
html.light-theme .dns-confirm-body { color: #475569; }
html.light-theme .dns-confirm-cancel { border-color: #cbd5e1; color: #334155; }
html.light-theme .dns-confirm-cancel:hover { background: #f1f5f9; }
/* ═══════════════════════════════════════════════
Border animation lives on .landing-chat-card directly
via @keyframes glow-border (see top of file).
No wrapper element or pseudo-element needed.
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════ */
/* ── First-login welcome tour ─────────────────── */
.dns-tour-backdrop {
position: fixed; inset: 0; z-index: 6000;
background: transparent;
animation: dns-fade-in .3s ease both;
}
.dns-tour-spot {
position: fixed; z-index: 6001; pointer-events: none;
border-radius: 16px;
box-shadow: 0 0 0 9999px rgba(4, 7, 16, 0.55), 0 0 0 2px rgba(124, 92, 255, 0.9), 0 0 32px 6px rgba(124, 92, 255, 0.45);
transition: left .45s cubic-bezier(.22,.9,.3,1.1), top .45s cubic-bezier(.22,.9,.3,1.1),
width .45s cubic-bezier(.22,.9,.3,1.1), height .45s cubic-bezier(.22,.9,.3,1.1), opacity .3s ease;
animation: dns-tour-pulse 2.2s ease-in-out infinite;
}
.dns-tour-card {
position: fixed; z-index: 6002;
background: linear-gradient(160deg, rgba(22, 27, 46, 0.98), rgba(14, 18, 32, 0.98));
border: 1px solid rgba(124, 92, 255, 0.35);
border-radius: 18px;
padding: 18px 20px 16px;
color: #e8ecf8;
box-shadow: 0 24px 64px rgba(0,0,0,0.55);
transition: left .45s cubic-bezier(.22,.9,.3,1.1), top .45s cubic-bezier(.22,.9,.3,1.1), opacity .3s ease;
animation: dns-pop-in .35s cubic-bezier(.22,.9,.3,1.2) both;
}
.dns-tour-card::before {
content: ""; position: absolute; left: 50%; width: 14px; height: 14px;
background: inherit; border-left: 1px solid rgba(124, 92, 255, 0.35); border-top: 1px solid rgba(124, 92, 255, 0.35);
transform: translateX(-50%) rotate(45deg);
}
.dns-tour-card.below::before { top: -8px; }
.dns-tour-card.above::before { bottom: -8px; transform: translateX(-50%) rotate(225deg); }
.dns-tour-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dns-tour-emoji { font-size: 22px; line-height: 1; animation: dns-tour-bob 1.8s ease-in-out infinite; }
.dns-tour-step { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(232,236,248,0.55); }
.dns-tour-close {
margin-left: auto; background: transparent; border: 0; color: rgba(232,236,248,0.55);
font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.dns-tour-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.dns-tour-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.dns-tour-body { font-size: 13.5px; line-height: 1.55; color: rgba(232,236,248,0.82); }
.dns-tour-dots { display: flex; gap: 6px; margin: 14px 0 10px; }
.dns-tour-dot {
width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
background: rgba(255,255,255,0.18); transition: all .25s ease;
}
.dns-tour-dot.done { background: rgba(124, 92, 255, 0.55); }
.dns-tour-dot.on { width: 22px; border-radius: 4px; background: #7c5cff; }
.dns-tour-actions { display: flex; align-items: center; gap: 8px; }
.dns-tour-replay {
background: transparent; border: 0; cursor: pointer; padding: 4px 0;
font-size: 12px; color: rgba(232,236,248,0.5); text-align: left;
}
.dns-tour-replay:hover { color: #b7a6ff; text-decoration: underline; }
@keyframes dns-tour-pulse {
0%, 100% { box-shadow: 0 0 0 9999px rgba(4, 7, 16, 0.55), 0 0 0 2px rgba(124, 92, 255, 0.9), 0 0 28px 4px rgba(124, 92, 255, 0.35); }
50% { box-shadow: 0 0 0 9999px rgba(4, 7, 16, 0.55), 0 0 0 3px rgba(124, 92, 255, 1), 0 0 44px 10px rgba(124, 92, 255, 0.6); }
}
@keyframes dns-tour-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@media (max-width: 640px) {
.dns-tour-card { left: 12px !important; right: 12px; width: auto !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)); border-radius: 20px; }
.dns-tour-card::before { display: none; }
}
.landing-footer {
flex-shrink: 0;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(8, 12, 24, 0.85);
backdrop-filter: blur(12px);
padding: 40px 48px 20px;
}
.landing-footer-inner {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
max-width: 1100px;
margin: 0 auto 32px;
}
.landing-footer-brand {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 700;
color: #f1f5f9;
letter-spacing: -0.01em;
}
.landing-footer-logo {
width: 28px; height: 28px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
}
.landing-footer-nav {
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-footer-nav-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #475569;
margin-bottom: 4px;
}
.landing-footer-nav a {
font-size: 0.8rem;
color: #64748b;
text-decoration: none;
transition: color 0.15s;
}
.landing-footer-nav a:hover { color: #cbd5e1; }
.landing-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.05);
font-size: 0.74rem;
color: #334155;
}
.landing-footer-social {
display: flex;
gap: 10px;
}
.landing-footer-social a {
color: #94a3b8;
text-decoration: none;
width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(148,163,184,0.15);
background: rgba(148,163,184,0.06);
transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.landing-footer-social a svg { width: 16px; height: 16px; fill: currentColor; }
.landing-footer-social a:hover { color: #e2e8f0; background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.4); transform: translateY(-1px); }
/* ═══════════════════════════════════════════════
RESPONSIVE — landing + workspace
═══════════════════════════════════════════════ */
/* ── Tablet 1024px ───────────────────────────────── */
@media (max-width: 1024px) {
/* Landing */
.landing-body {
grid-template-columns: 32% 1fr;
}
.landing-hero h1 { font-size: 2rem; }
.landing-ai-panel { padding: 24px 32px 24px; }
/* Workspace toolbar wraps nicely */
.dns-workspace-toolbar { gap: 6px; padding: 8px 12px; }
.dns-btn { padding: 6px 10px; font-size: 0.8rem; }
}
/* ── Tablet 900px ────────────────────────────────── */
@media (max-width: 900px) {
/* Landing: stack projects above AI panel */
.landing-body {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
overflow: auto;
}
.landing-viewport { height: auto; min-height: 100vh; }
.landing-projects-panel {
height: auto;
max-height: 45vh;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.landing-ai-panel { padding: 24px 20px 24px; }
.landing-hero h1 { font-size: 1.85rem; }
.landing-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
/* Workspace: hide file explorer on tablet, collapse AI panel */
.dns-explorer-panel { display: none; }
#divider-1 { display: none; }
.dns-workspace-shell { height: 100vh; }
}
/* ── Mobile 600px ────────────────────────────────── */
@media (max-width: 600px) {
/* Landing */
.landing-projects-panel { max-height: 40vh; }
.landing-projects-header { padding: 14px 14px 10px; }
.landing-projects-list { padding: 10px 10px 14px; gap: 10px; }
.landing-ai-panel { padding: 16px 14px 16px; overflow: visible; }
.landing-hero h1 { font-size: 1.5rem; }
.landing-hero p { font-size: 0.88rem; }
.landing-chat-card { border-radius: 14px; padding: 6px 6px 6px 14px; }
.landing-chat-footer { flex-wrap: wrap; gap: 6px; }
.landing-chat-actions { width: 100%; justify-content: flex-end; }
.landing-footer { padding: 24px 16px 16px; }
.landing-footer-inner { grid-template-columns: 1fr; gap: 18px; }
.landing-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
/* Cards on mobile — proj-card has padding:0, inner div holds the padding */
.proj-card { min-height: 100px; }
.proj-card-inner { padding: 12px 13px 36px; }
.proj-card-icon { width: 42px; height: 42px; border-radius: 12px; }
.proj-card-icon-initials { font-size: 1rem; }
/* Workspace: hide right panel and divider on very small screens */
.dns-right-panel { display: none; }
#divider-2 { display: none; }
.dns-workspace-toolbar { padding: 6px 10px; gap: 4px; }
.dns-btn { padding: 5px 8px; font-size: 0.75rem; }
}
/* ── Extra small 400px ────────────────────────────── */
@media (max-width: 400px) {
.landing-hero h1 { font-size: 1.3rem; }
.landing-hero-badge { font-size: 0.62rem; padding: 4px 10px; }
.btn-plan, .btn-build { padding: 7px 12px; font-size: 0.78rem; }
}
/* ═══════════════════════════════════════════════
LIGHT THEME — high-contrast, warm-white
═══════════════════════════════════════════════ */
/* Base resets */
html.light-theme, html.light-theme body {
background: #f0f4f8;
color: #0f172a;
}
/* ─ Landing root ──────────────────────────────── */
html.light-theme .landing-root {
background: linear-gradient(160deg, #eef2ff 0%, #f0f4f8 40%, #e8f0fe 100%);
}
html.light-theme .landing-viewport { background: transparent; }
/* ─ Theme toggle in light mode ──────────────────── */
html.light-theme .theme-toggle {
background: #ffffff;
border-color: #cbd5e1;
color: #334155;
box-shadow: 0 2px 8px rgba(15,23,42,0.12);
}
html.light-theme .theme-toggle:hover {
background: #f1f5f9;
border-color: #6366f1;
box-shadow: 0 4px 14px rgba(99,102,241,0.2);
}
/* ─ Projects panel ────────────────────────────── */
html.light-theme .landing-projects-panel {
background: #f5f7fa;
border-right-color: #dde3ec;
}
html.light-theme .landing-projects-header {
border-bottom-color: #dde3ec;
}
html.light-theme .landing-projects-header h2 { color: #64748b; }
html.light-theme .landing-projects-count { color: #64748b; }
/* ─ Cards in light mode ──────────────────────────── */
html.light-theme .proj-card {
background: #ffffff;
border-color: #e2e8f0;
box-shadow: 0 2px 12px rgba(15,23,42,0.08);
}
html.light-theme .proj-card:hover {
border-color: #6366f1;
box-shadow: 0 6px 24px rgba(99,102,241,0.14);
}
html.light-theme .proj-card.active-1 {
background: linear-gradient(170deg, #f5f3ff 0%, #ffffff 100%);
border-color: rgba(99,102,241,0.5);
box-shadow: 0 4px 20px rgba(99,102,241,0.14);
}
html.light-theme .proj-card.active-1::before {
background: radial-gradient(ellipse, rgba(99,102,241,0.14) 0%, rgba(139,92,246,0.05) 45%, transparent 70%);
}
html.light-theme .proj-card.active-2 { border-color: rgba(59,130,246,0.3); }
html.light-theme .proj-card.active-3 { border-color: rgba(20,184,166,0.3); }
html.light-theme .proj-card-name { color: #0f172a; }
html.light-theme .proj-card.active-1 .proj-card-name { color: #1e1b4b; }
html.light-theme .proj-card-tech { color: #64748b; }
html.light-theme .proj-card-stat { color: #64748b; }
html.light-theme .proj-card-stat-sep { color: #94a3b8; }
html.light-theme .proj-card-open { color: #64748b; }
html.light-theme .proj-card:hover .proj-card-open { color: #4f46e5; }
/* Icon tiles in light mode — keep colored but lighter */
html.light-theme .proj-card-icon.theme-indigo { background: #ede9fe; border-color: #c4b5fd; }
html.light-theme .proj-card-icon.theme-indigo .proj-card-icon-initials { color: #4f46e5; }
html.light-theme .proj-card-icon.theme-cyan { background: #ecfeff; border-color: #a5f3fc; }
html.light-theme .proj-card-icon.theme-cyan .proj-card-icon-initials { color: #0891b2; }
html.light-theme .proj-card-icon.theme-violet { background: #f5f3ff; border-color: #ddd6fe; }
html.light-theme .proj-card-icon.theme-violet .proj-card-icon-initials { color: #7c3aed; }
html.light-theme .proj-card-icon.theme-emerald { background: #ecfdf5; border-color: #a7f3d0; }
html.light-theme .proj-card-icon.theme-emerald .proj-card-icon-initials { color: #059669; }
html.light-theme .proj-card-icon.theme-amber { background: #fffbeb; border-color: #fde68a; }
html.light-theme .proj-card-icon.theme-amber .proj-card-icon-initials { color: #d97706; }
html.light-theme .proj-active-badge.badge-1 {
background: rgba(99,102,241,0.1);
color: #4f46e5;
border-color: rgba(99,102,241,0.3);
}
html.light-theme .proj-skeleton {
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
/* ─ Hero section ───────────────────────────────── */
html.light-theme .landing-hero h1 {
background: linear-gradient(135deg, #0f172a 0%, #4f46e5 55%, #0ea5e9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
html.light-theme .landing-hero p { color: #374151; }
html.light-theme .landing-hero-badge {
background: rgba(99,102,241,0.1);
border-color: rgba(99,102,241,0.3);
color: #4338ca;
}
html.light-theme .landing-ai-panel::before {
background: radial-gradient(circle, rgba(99,102,241,0.07) 0%, transparent 60%);
}
/* ─ Chat card ──────────────────────────────────── */
html.light-theme .landing-chat-card {
background: #ffffff;
box-shadow: 0 4px 24px rgba(15,23,42,0.12);
}
html.light-theme .landing-chat-textarea { color: #0f172a; }
html.light-theme .landing-chat-textarea::placeholder { color: #9ca3af; }
html.light-theme .landing-chat-model-select {
background: #f1f5f9;
border-color: #cbd5e1;
color: #334155;
}
html.light-theme .landing-chat-name-input {
background: #f8fafc;
border-color: #e2e8f0;
color: #0f172a;
}
html.light-theme .landing-chat-name-input::placeholder { color: #9ca3af; }
/* ─ Footer ─────────────────────────────────────── */
html.light-theme .landing-footer {
background: #f5f7fa;
border-top-color: #dde3ec;
}
html.light-theme .landing-footer-brand { color: #0f172a; }
html.light-theme .landing-footer-nav a { color: #374151; }
html.light-theme .landing-footer-nav a:hover { color: #0f172a; }
html.light-theme .landing-footer-nav-label { color: #64748b; }
html.light-theme .landing-footer-bottom { color: #64748b; border-top-color: #dde3ec; }
html.light-theme .landing-footer-social a { color: #64748b; }
html.light-theme .landing-footer-social a:hover { color: #0f172a; }
/* ─ Workspace ─────────────────────────────────── */
html.light-theme .dns-workspace-shell {
background: #f0f4f8;
color: #0f172a;
}
html.light-theme .dns-workspace-toolbar {
background: #ffffff;
border-bottom-color: #dde3ec;
}
html.light-theme .dns-tb-more { background: linear-gradient(90deg, rgba(255,255,255,0), #ffffff 30%); }
html.light-theme .dns-btn-slate {
background: #f1f5f9;
color: #1e293b;
border-color: #cbd5e1;
}
html.light-theme .dns-btn-slate:hover { background: #e2e8f0; }
html.light-theme .dns-explorer-panel {
background: #f8fafc;
border-right-color: #e2e8f0;
}
html.light-theme .ai-panel-toggle-button {
background: #f1f5f9;
border-color: #cbd5e1;
color: #334155;
}
html.light-theme .ai-panel-toggle-button:hover { background: #e2e8f0; }
html.light-theme .dns-right-panel {
background: #f8fafc;
border-left-color: #e2e8f0;
}
html.light-theme .ai-chat-header { background: #f1f5f9; border-bottom-color: #e2e8f0; }
html.light-theme .ai-prompt-area { background: #ffffff; border-color: #e2e8f0; }
html.light-theme .ai-prompt-textarea { color: #0f172a; }
html.light-theme .ai-prompt-textarea::placeholder { color: #9ca3af; }
html.light-theme .resizable-divider { background: #dde3ec !important; }
html.light-theme .resizable-divider:hover { background: #cbd5e1 !important; }
/* Override inline dark styles in workspace */
html.light-theme [style*="background:#0f172a"] { background: #f8fafc !important; color: #0f172a !important; }
html.light-theme [style*="background:#111827"] { background: #f8fafc !important; }
html.light-theme [style*="background:#1e293b"] { background: #f1f5f9 !important; }
html.light-theme [style*="background:#0b1220"] { background: #ffffff !important; }
html.light-theme [style*="background:#141414"] { background: #f5f7fa !important; }
html.light-theme [style*="background:#1e1e1e"] { background: #f5f7fa !important; }
/* Live-stream / build-log / inset dark surfaces that previously had no light override */
html.light-theme [style*="background:#0a0e27"] { background: #eef2f7 !important; color: #0f172a !important; }
html.light-theme [style*="background:#0a0f1e"] { background: #eef2ff !important; }
html.light-theme [style*="background:#0a1628"] { background: #eaf2fb !important; }
html.light-theme [style*="background:#0c1a3a"] { background: #dbeafe !important; }
html.light-theme [style*="border-bottom:1px solid #1e293b"] { border-bottom-color: #e2e8f0 !important; }
html.light-theme [style*="border-top:1px solid #1e293b"] { border-top-color: #e2e8f0 !important; }
html.light-theme [style*="border:1px solid #1e293b"] { border-color: #e2e8f0 !important; }
html.light-theme [style*="color:#94a3b8"] { color: #475569 !important; }
html.light-theme [style*="color:#64748b"] { color: #374151 !important; }
html.light-theme [style*="color:#cbd5e1"] { color: #1e293b !important; }
html.light-theme [style*="color:#e2e8f0"] { color: #111827 !important; }
html.light-theme [style*="color:#f1f5f9"] { color: #0f172a !important; }
html.light-theme [style*="color:#475569"] { color: #374151 !important; }
html.light-theme [style*="font-weight:600;color:#f1f5f9"] { color: #0f172a !important; }
/* Remaining light-on-dark inline text colours that read washed-out on the paper theme. */
html.light-theme [style*="color:#858585"] { color: #475569 !important; }
html.light-theme [style*="color:#9aa3b8"] { color: #475569 !important; }
html.light-theme [style*="color:#a3b0c8"] { color: #475569 !important; }
html.light-theme [style*="color:#7787a1"] { color: #526179 !important; }
html.light-theme [style*="color:#4d5a6b"] { color: #526179 !important; }
html.light-theme [style*="color:#e6e8ef"] { color: #111827 !important; }
html.light-theme [style*="color:#e5e7eb"] { color: #111827 !important; }
html.light-theme [style*="color:#d1d5db"] { color: #1f2937 !important; }
html.light-theme [style*="color:#f8fafc"] { color: #0f172a !important; }
html.light-theme [style*="color:#fff"]:not([class*="btn"]):not([class*="primary"]):not([class*="pill"]):not([class*="badge"]) { color: #0f172a !important; }
html.light-theme [style*="color:#ffffff"]:not([class*="btn"]):not([class*="primary"]):not([class*="pill"]):not([class*="badge"]) { color: #0f172a !important; }
html.light-theme [style*="color:#a5b4fc"] { color: #4338ca !important; }
html.light-theme [style*="color:#c7d2fe"] { color: #4338ca !important; }
html.light-theme [style*="color:#fbbf24"] { color: #b45309 !important; }
html.light-theme [style*="color:#fca5a5"] { color: #b91c1c !important; }
html.light-theme [style*="color:#86efac"] { color: #15803d !important; }
html.light-theme [style*="background:#334155"] { background: #e2e8f0 !important; color: #0f172a !important; }
html.light-theme [style*="background:#0b1220"][style*="color:#e2e8f0"],
html.light-theme [style*="background:#0b1220"][style*="color:#cbd5e1"] { color: #0f172a !important; border-color: #cbd5e1 !important; }
/* Shared text utility classes: ensure muted/subtle copy still passes AA on light surfaces. */
html.light-theme .ad-muted, html.light-theme .dns-muted, html.light-theme .text-muted,
html.light-theme .dns-text-muted, html.light-theme .pr-muted, html.light-theme .rf-stat span,
html.light-theme .dnsc-tasks-hint, html.light-theme .dns-card-history { color: #475569; }
html.light-theme .mono, html.light-theme code:not(pre code) { color: #1e293b; }
html.light-theme h1, html.light-theme h2, html.light-theme h3, html.light-theme h4 { color: var(--dns-text-strong, #0a1020); }
html.light-theme .ad-table th { color: #334155; }
html.light-theme .ad-table td { color: #1e293b; }
html.light-theme .rf-stat b { color: #0f172a; }
html.light-theme input.pr-input, html.light-theme select.pr-input, html.light-theme textarea.pr-input,
html.light-theme .ai-prompt-textarea, html.light-theme textarea, html.light-theme select { color: #0f172a; }
html.light-theme ::placeholder { color: #8591a6; }
/* Keep Monaco editor dark (it manages its own theme) */
html.light-theme #monaco-editor-container { filter: none; }
/* ── Site-scope questionnaire ── */
.site-scope-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(3, 6, 14, 0.72);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: fadeInUp 0.25s ease both;
}
.site-scope-dialog {
width: 100%;
max-width: 560px;
max-height: 86vh;
overflow-y: auto;
background: rgba(11, 16, 28, 0.98);
border: 1px solid rgba(99, 102, 241, 0.35);
border-radius: 18px;
padding: 26px 26px 22px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.site-scope-head h3 {
margin: 0 0 6px;
font-size: 1.3rem;
color: #f1f5f9;
}
.site-scope-head p {
margin: 0 0 18px;
font-size: 0.9rem;
color: #94a3b8;
}
.site-scope-loading {
padding: 30px 0;
text-align: center;
color: #a5b4fc;
}
.site-scope-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.site-scope-question .site-scope-q-label {
font-weight: 600;
color: #e2e8f0;
margin-bottom: 8px;
font-size: 0.95rem;
}
.site-scope-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.site-scope-option {
padding: 8px 14px;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.3);
background: rgba(30, 41, 59, 0.6);
color: #cbd5e1;
font-size: 0.88rem;
cursor: pointer;
transition: all 0.15s ease;
}
.site-scope-option:hover {
border-color: rgba(99, 102, 241, 0.6);
color: #f1f5f9;
}
.site-scope-option.selected {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-color: transparent;
color: #fff;
}
.site-scope-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 24px;
}
html.light-theme .site-scope-dialog {
background: #ffffff;
border-color: rgba(99, 102, 241, 0.3);
}
html.light-theme .site-scope-head h3 { color: #0f172a; }
html.light-theme .site-scope-head p { color: #64748b; }
html.light-theme .site-scope-question .site-scope-q-label { color: #1e293b; }
html.light-theme .site-scope-option {
background: #f1f5f9;
border-color: #cbd5e1;
color: #334155;
}
html.light-theme .site-scope-option.selected { color: #fff; }
/* ════════════════════════════════════════════════════════════
✨ WOW-FACTOR POLISH — richer depth, glow, motion & gradients
════════════════════════════════════════════════════════════ */
/* Ambient animated aurora behind the landing hero (both themes) */
.landing-ai-panel::after {
content: '';
position: absolute;
inset: -30% -10% auto -10%;
height: 620px;
background:
radial-gradient(50% 55% at 20% 20%, rgba(124,92,255,0.22) 0%, transparent 60%),
radial-gradient(45% 50% at 82% 12%, rgba(56,189,248,0.20) 0%, transparent 60%),
radial-gradient(40% 45% at 55% 0%, rgba(249,115,22,0.14) 0%, transparent 60%);
filter: blur(24px);
pointer-events: none;
z-index: 0;
animation: aurora-drift 16s ease-in-out infinite alternate;
}
.landing-hero, .landing-chat-card, .dns-recent-strip { position: relative; z-index: 1; }
@keyframes aurora-drift {
0% { transform: translate3d(-2%, 0, 0) scale(1); opacity: 0.85; }
50% { transform: translate3d(3%, 2%, 0) scale(1.06); opacity: 1; }
100% { transform: translate3d(-1%, -1%, 0) scale(1.02); opacity: 0.9; }
}
/* Hero badge: subtle sheen */
.landing-hero-badge { backdrop-filter: blur(6px); box-shadow: 0 4px 18px -8px rgba(99,102,241,0.5); }
/* Bigger, punchier hero heading */
.landing-hero h1 { font-size: 2.7rem; letter-spacing: -0.035em; }
/* Chat card: glassy depth + glow lift on focus */
.landing-chat-card {
backdrop-filter: blur(10px);
box-shadow: 0 24px 60px -30px rgba(2,6,23,0.85), 0 2px 10px -4px rgba(99,102,241,0.25);
}
.landing-chat-card:focus-within {
box-shadow: 0 28px 70px -28px rgba(99,102,241,0.55), 0 0 0 1px rgba(124,92,255,0.35);
}
/* Primary build button: gradient + animated glow */
.btn-build {
background: linear-gradient(135deg, #7c5cff 0%, #4f46e5 50%, #06b6d4 100%);
background-size: 200% 200%;
box-shadow: 0 10px 26px -12px rgba(124,92,255,0.7);
animation: btn-sheen 6s ease infinite;
}
.btn-build:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(124,92,255,0.85); }
@keyframes btn-sheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Project & recent cards: lift + accent sweep */
.dns-project-card, .dns-recent-card { position: relative; }
.dns-project-card::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, rgba(124,92,255,0.0), rgba(56,189,248,0.0));
transition: background 0.25s ease;
}
.dns-project-card:hover::after {
background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(56,189,248,0.08));
}
/* Sidebar active item: gradient accent bar */
.dns-side-item.active { position: relative; }
.dns-side-item.active::before {
content: ''; position: absolute; left: 3px; top: 20%; bottom: 20%; width: 3px;
border-radius: 3px; background: linear-gradient(180deg, #7c5cff, #06b6d4);
}
/* Light-theme aurora tuned lighter so it stays airy and premium */
html.light-theme .landing-ai-panel::after {
background:
radial-gradient(50% 55% at 20% 20%, rgba(124,92,255,0.14) 0%, transparent 60%),
radial-gradient(45% 50% at 82% 12%, rgba(56,189,248,0.14) 0%, transparent 60%),
radial-gradient(40% 45% at 55% 0%, rgba(249,115,22,0.10) 0%, transparent 60%);
}
html.light-theme .landing-chat-card {
box-shadow: 0 20px 50px -28px rgba(15,23,42,0.35), 0 2px 10px -4px rgba(99,102,241,0.18);
}
/* ═══════════════════════════════════════════════════════════════════════════
DNSC — COPILOT-STYLE CHAT CONTROL (new, self-contained design system)
Namespaced `dnsc-` so it cannot collide with the legacy `ai-` styles.
Primitives:
.dnsc-chat shell (scroll surface + composer dock)
.dnsc-turn one message turn (user | agent)
.dnsc-task a live streaming task card (one per module)
.dnsc-step an individual action row inside a task
.dnsc-group a completed, collapsed task card
═══════════════════════════════════════════════════════════════════════════ */
.dnsc-chat {
display: flex; flex-direction: column;
flex: 1 1 auto; min-height: 0; min-width: 0;
background: var(--dns-bg);
position: relative;
}
/* ── Scroll surface ── */
.dnsc-scroll {
flex: 1 1 auto; min-height: 0; min-width: 0;
overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column; gap: 16px;
padding: 18px 16px 12px;
scrollbar-gutter: stable;
scroll-behavior: smooth;
}
.dnsc-scroll > * { min-width: 0; max-width: 100%; }
/* Theme-aware scrollbar: a muted dark-grey thumb on the dark theme (never white) and a soft
slate thumb on the light theme. Shared by the transcript, composer and workbench panes. */
:root { --dns-scrollbar-thumb: rgba(71,85,105,0.75); --dns-scrollbar-thumb-hover: rgba(100,116,139,0.95); }
html.light-theme { --dns-scrollbar-thumb: rgba(148,163,184,0.7); --dns-scrollbar-thumb-hover: rgba(100,116,139,0.9); }
.dnsc-scroll { scrollbar-width: thin; scrollbar-color: var(--dns-scrollbar-thumb) transparent; }
.dnsc-scroll::-webkit-scrollbar { width: 12px; }
.dnsc-scroll::-webkit-scrollbar-track { background: transparent; }
.dnsc-scroll::-webkit-scrollbar-thumb {
background: var(--dns-scrollbar-thumb); border-radius: 999px;
border: 3px solid transparent; background-clip: content-box;
min-height: 40px;
}
.dnsc-scroll::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--dns-scrollbar-thumb-hover); }
.dns-shell *, .ai-workspace * { scrollbar-width: thin; scrollbar-color: var(--dns-scrollbar-thumb) transparent; }
.dns-shell *::-webkit-scrollbar, .ai-workspace *::-webkit-scrollbar { width: 10px; height: 10px; }
.dns-shell *::-webkit-scrollbar-track, .ai-workspace *::-webkit-scrollbar-track { background: transparent; }
.dns-shell *::-webkit-scrollbar-thumb, .ai-workspace *::-webkit-scrollbar-thumb { background: var(--dns-scrollbar-thumb); border-radius: 999px; }
.dns-shell *::-webkit-scrollbar-thumb:hover, .ai-workspace *::-webkit-scrollbar-thumb:hover { background: var(--dns-scrollbar-thumb-hover); }
/* ── Empty state ── */
.dnsc-empty {
margin: auto; text-align: center; max-width: 340px;
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 32px 20px; animation: dnscFade 0.5s ease both;
}
.dnsc-empty-orb {
width: 60px; height: 60px; border-radius: 20px;
display: grid; place-items: center; font-size: 1.6rem;
background: linear-gradient(135deg, var(--dnsc-brand), var(--dnsc-brand-2));
box-shadow: 0 16px 40px -14px var(--dnsc-ring);
animation: dnscFloat 4s ease-in-out infinite;
}
/* The brand mark (".>") replaces the sparkle; it brings its own gradient tile so the orb only floats. */
.dnsc-empty-orb:has(.dns-logo-mark) { background: transparent; }
.dnsc-empty-orb .dns-logo-mark { width: 60px; height: 60px; display: block; }
.dnsc-empty-title { font-size: 1rem; font-weight: 700; color: var(--dns-text-strong); letter-spacing: -0.01em; }
.dnsc-empty-sub { font-size: 0.83rem; line-height: 1.6; color: var(--dns-text-muted); }
/* ── Turn (a chat message) ────────────────────────────────────────────── */
.dnsc-turn {
display: flex; gap: 12px; width: 100%; min-width: 0;
}
.dnsc-turn.user { justify-content: flex-end; }
.dnsc-ava {
flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
display: grid; place-items: center; font-size: 0.85rem;
background: var(--dnsc-card-strong);
color: var(--dns-text); box-shadow: none;
user-select: none;
}
.dnsc-turn.user .dnsc-ava {
background: var(--dnsc-card-strong);
border: 1px solid var(--dnsc-card-border);
color: var(--dns-text-muted); box-shadow: none;
}
/* When the avatar carries the brand mark, the mark supplies its own tile/gradient. */
.dnsc-ava:has(.dns-logo-mark) { background: transparent; box-shadow: none; }
.dnsc-ava .dns-logo-mark { height: 30px; width: 30px; }
.ai-chat-title .dns-logo-mark { height: 20px; width: 20px; }
.dnsc-bubble {
flex: 1 1 auto; min-width: 0; max-width: 100%;
display: flex; flex-direction: column; gap: 4px;
font-size: 0.855rem; line-height: 1.65; color: var(--dns-text);
overflow-wrap: anywhere; word-break: break-word;
}
/* The user's own message gets a solid, tighter bubble */
.dnsc-turn.user .dnsc-bubble {
flex: 0 1 auto; max-width: 82%;
background: var(--dnsc-card-strong);
color: var(--dns-text); padding: 10px 13px;
border: 1px solid var(--dnsc-card-border);
border-radius: 10px;
box-shadow: none;
font-weight: 500;
}
/* ── Task card: a module while it is streaming ────────────────────────── */
.dnsc-task {
width: 100%; min-width: 0;
background: var(--dnsc-card);
border: 1px solid var(--dnsc-card-border);
border-radius: var(--dnsc-radius);
box-shadow: none;
overflow: hidden;
animation: dnscRise 0.34s cubic-bezier(0.22,1,0.36,1) both;
position: relative;
}
/* Animated top progress hairline while the task runs */
.dnsc-task.running::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
background: var(--dnsc-brand);
}
.dnsc-task-head {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; min-width: 0;
width: 100%; background: transparent; border: none;
color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dnsc-task-head:hover { background: var(--dnsc-card-strong); }
.dnsc-task-head:focus-visible { outline: 2px solid var(--dnsc-brand); outline-offset: -2px; }
/* The active card is not a toggle — it is the focal point, so it never highlights on hover. */
.dnsc-task-head.static { cursor: default; }
.dnsc-task-head.static:hover { background: transparent; }
/* A single, calm spinner marks the ONE action in flight. */
.dnsc-task-spin {
flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--dnsc-brand) 26%, transparent);
border-top-color: var(--dnsc-brand);
animation: dns-spin 0.75s linear infinite;
}
.dnsc-task.open .dnsc-caret { transform: rotate(90deg); }
.dnsc-task-icon {
flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px;
display: grid; place-items: center; font-size: 0.72rem;
background: rgba(99,102,241,0.12); border: 0;
}
.dnsc-task-title {
flex: 1 1 auto; min-width: 0; font-size: 0.83rem; font-weight: 560;
color: var(--dns-text-strong); letter-spacing: -0.005em;
overflow: hidden; overflow-wrap: anywhere; white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
line-height: 1.35;
}
.dnsc-task-body {
display: flex; flex-direction: column;
padding: 2px 12px 12px 14px;
max-height: 320px; overflow-y: auto; overflow-x: hidden; min-width: 0;
}
/* ── Step: ONE individual action, streamed in as it happens ───────────── */
.dnsc-step {
display: flex; align-items: flex-start; gap: 9px;
padding: 6px 8px; border-radius: var(--dnsc-radius-sm);
min-width: 0; font-size: 0.79rem; color: var(--dns-text-muted);
animation: dnscStepIn 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
.dnsc-step + .dnsc-step { margin-top: 2px; }
.dnsc-step-mark {
flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
display: grid; place-items: center; font-size: 0.62rem; font-weight: 700;
}
.dnsc-step.done .dnsc-step-mark { background: rgba(52,211,153,0.16); color: var(--dnsc-ok); }
.dnsc-step.active .dnsc-step-mark {
background: rgba(99,102,241,0.18); color: var(--dnsc-brand);
animation: dnscPulse 1.2s ease-in-out infinite;
}
.dnsc-step.fail .dnsc-step-mark { background: rgba(248,113,113,0.16); color: var(--dnsc-err); }
.dnsc-step-verb { flex: 0 0 auto; font-size: 0.72rem; color: var(--dns-text-subtle); font-weight: 600; }
.dnsc-step-file {
flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.755rem; color: var(--dns-text);
overflow: hidden; overflow-wrap: anywhere; white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
line-height: 1.35;
}
.dnsc-step.done .dnsc-step-file { color: var(--dns-text-muted); }
.dnsc-step.active .dnsc-step-file { color: var(--dns-text-strong); }
/* Condensed "N earlier files" row — present, but visually silent. */
.dnsc-step.muted { opacity: 0.6; }
.dnsc-step-mark.quiet { background: var(--dnsc-card-strong); color: var(--dns-text-subtle); }
.dnsc-step-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Shimmering placeholder while the next action is being decided */
.dnsc-step.active .dnsc-step-text {
background: linear-gradient(90deg, var(--dns-text-subtle) 0%, var(--dns-text-strong) 40%, var(--dns-text-subtle) 80%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: dnscSweep 1.8s linear infinite;
}
/* ── Chip / meta ─────────────────────────────────────────────────────── */
.dnsc-analysis { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.dnsc-analysis-done { margin-top: 0; opacity: 0.85; }
/* ── Passive row: work that is genuinely in flight in parallel, but which we
deliberately keep at rest so only ONE indicator ever animates. ───────── */
.dnsc-passive {
display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0;
padding: 8px 12px; border-radius: var(--dnsc-radius-sm);
border: 1px dashed var(--dnsc-card-border);
background: transparent;
}
.dnsc-passive-mark { flex: 0 0 auto; font-size: 0.8rem; color: var(--dns-text-subtle); }
.dnsc-passive-title {
flex: 1 1 auto; min-width: 0; font-size: 0.8rem; font-weight: 550;
color: var(--dns-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Avatars for passive/finished turns recede so the eye lands on the live step. */
.dnsc-ava.quiet { opacity: 0.5; }
/* ── Live action stream: persistent, Copilot-style narrated batches ──────
An active group shows a spinner + caption with its items ticking in beneath it.
A finished group condenses to a single "N actions" row but is never removed. */
.dnsc-stream {
display: flex; flex-direction: column; gap: 6px;
min-width: 0; margin-top: 2px;
}
.dnsc-sgroup {
display: flex; flex-direction: column; min-width: 0;
border-radius: var(--dnsc-radius-sm);
animation: dnscFlashIn 0.24s cubic-bezier(0.22,1,0.36,1) both;
}
.dnsc-sgroup.active {
border: 1px solid var(--dnsc-card-border);
background: var(--dnsc-card);
padding: 8px 10px;
}
.dnsc-sgroup.done { border: none; background: none; padding: 0; }
/* Group heading — the narration line ("Now the toast stack markup…") */
.dnsc-sgroup-head {
display: flex; align-items: center; gap: 8px; min-width: 0;
width: 100%; text-align: left;
background: none; border: none; padding: 3px 2px;
font: inherit; color: inherit; cursor: pointer;
border-radius: 6px;
}
.dnsc-sgroup.done .dnsc-sgroup-head:hover { background: var(--dnsc-card); }
.dnsc-sgroup-head-active { cursor: default; padding: 0 2px 2px; }
.dnsc-sgroup-caption {
flex: 1 1 auto; min-width: 0;
font-size: 0.79rem; font-weight: 550; color: var(--dns-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dnsc-sgroup.done .dnsc-sgroup-caption { color: var(--dns-text-muted); font-weight: 500; }
.dnsc-sgroup-mark { flex: 0 0 auto; font-size: 0.72rem; color: var(--dnsc-ok); }
.dnsc-sgroup-count {
flex: 0 0 auto; font-size: 0.67rem; font-weight: 600;
color: var(--dns-text-subtle); white-space: nowrap;
}
.dnsc-sgroup-chev { flex: 0 0 auto; font-size: 0.7rem; color: var(--dns-text-subtle); }
/* Indeterminate spinner marking the ONE actively running batch. */
.dnsc-sgroup-spin {
flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--dnsc-brand) 28%, transparent);
border-top-color: var(--dnsc-brand);
animation: dns-spin 0.7s linear infinite;
}
/* Items produced by the batch — minimal ticked rows. */
.dnsc-sgroup-items {
display: flex; flex-direction: column; gap: 1px;
margin-top: 5px; padding-left: 4px;
border-left: 1px solid var(--dnsc-card-border); margin-left: 5px;
}
.dnsc-sgroup.done .dnsc-sgroup-items { margin-top: 3px; margin-left: 9px; }
.dnsc-sitem {
display: flex; align-items: center; gap: 7px; min-width: 0;
padding: 2px 6px; font-size: 0.75rem; color: var(--dns-text);
animation: dnscFlashIn 0.22s cubic-bezier(0.22,1,0.36,1) both;
}
.dnsc-sitem-tick { flex: 0 0 auto; font-size: 0.68rem; color: var(--dnsc-ok); }
.dnsc-sitem-verb {
flex: 0 0 auto; font-size: 0.63rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--dns-text-subtle);
}
.dnsc-sitem-text {
flex: 1 1 auto; min-width: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.72rem; color: var(--dns-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
direction: rtl; text-align: left; /* keep the file name visible when the path is long */
}
@keyframes dnscFlashIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.dnsc-sgroup, .dnsc-sitem { animation: none; }
.dnsc-sgroup-spin { animation-duration: 2s; }
}
/* ── Chips / meta ─────────────────────────────────────────────────────── */
.dnsc-chip {
flex: 0 0 auto; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.02em;
padding: 3px 8px; border-radius: 999px; white-space: nowrap;
border: 1px solid transparent;
}
.dnsc-chip.run { background: rgba(99,102,241,0.14); color: #a5b4fc; border-color: rgba(99,102,241,0.28); }
.dnsc-chip.ok { background: rgba(52,211,153,0.13); color: var(--dnsc-ok); border-color: rgba(52,211,153,0.28); }
.dnsc-chip.fail { background: rgba(248,113,113,0.13); color: var(--dnsc-err); border-color: rgba(248,113,113,0.3); }
.dnsc-chip.mute { background: var(--dnsc-card-strong); color: var(--dns-text-subtle); border-color: var(--dnsc-card-border); }
/* ?? Recent changes chip (after each follow-up edit) ???????????????????? */
.dnsc-recent-chip {
display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer;
background: var(--dnsc-card-strong); border: 1px solid var(--dnsc-card-border);
color: var(--dns-text); font: inherit; font-size: 0.74rem;
transition: border-color 0.15s ease, background 0.15s ease;
}
.dnsc-recent-chip:hover, .dnsc-recent-chip.open { border-color: rgba(52,211,153,0.4); }
.dnsc-recent-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dns-text-subtle); }
.dnsc-recent-caret { color: var(--dns-text-subtle); font-size: 0.7rem; }
.dnsc-recent-list {
margin-top: 6px; padding: 6px 8px; border-radius: 8px;
background: var(--dnsc-card-strong); border: 1px solid var(--dnsc-card-border);
display: flex; flex-direction: column; gap: 2px;
}
.dnsc-recent-file {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dns-text-subtle);
}
.dnsc-recent-file.add { color: var(--dnsc-ok); }
.dnsc-recent-file.del { color: var(--dnsc-err); }
.dnsc-recent-file.mod { color: #a5b4fc; }
/* ── Group: a completed task, collapsed ───────────────────────────────── */
.dnsc-group {
width: 100%; min-width: 0;
background: transparent;
border: 0; border-left: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
animation: dnscRise 0.34s cubic-bezier(0.22,1,0.36,1) both;
transition: background 0.16s;
}
.dnsc-group:hover { background: var(--dnsc-card); }
.dnsc-group.open { background: var(--dnsc-card); }
.dnsc-group.fail { border-left-color: rgba(248,113,113,0.6); }
/* "N tasks done" — one calm row standing in for every completed step; details on demand. */
.dnsc-tasks-summary {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 7px 10px; border-radius: 10px; border: 1px solid var(--dnsc-border, rgba(148,163,184,.25));
background: var(--dnsc-card); color: inherit; text-align: left; cursor: pointer; font: inherit;
transition: background 0.14s, border-color 0.14s;
}
.dnsc-tasks-summary:hover { border-color: var(--dnsc-brand, #6366f1); }
.dnsc-tasks-summary.open .dnsc-caret { transform: rotate(90deg); }
.dnsc-tasks-summary.warn { border-color: rgba(248,113,113,0.45); }
.dnsc-tasks-summary.finished { border-color: rgba(52,211,153,0.35); background: linear-gradient(90deg, rgba(52,211,153,0.08), transparent 60%); }
/* ── Copilot-style transcript ────────────────────────────────────────────────────────────
Prose sentence → compact ✓ tool rows → "N tasks done ›" fold → next sentence.
No avatars, no cards: a single left-aligned column with calm typography, like Copilot Chat. */
.cpt-user { display: flex; justify-content: flex-end; margin: 14px 0 10px; }
.cpt-user-bubble { max-width: 86%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--dnsc-user-bg, rgba(99,102,241,0.14)); border: 1px solid rgba(99,102,241,0.25); color: var(--dnsc-text, #e6e8ef); font-size: .9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cpt-prose { margin: 10px 0 6px; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.6; color: var(--dnsc-text, #e6e8ef); word-break: break-word; -webkit-font-smoothing: antialiased; }
.cpt-prose.strong { font-weight: 600; }
.cpt-prose.err { color: #fca5a5; }
.cpt-tools { margin: 4px 0 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.025); overflow: hidden; }
.cpt-tools.live { border-color: rgba(99,102,241,0.28); }
.cpt-tools.warn { border-color: rgba(251,191,36,0.35); }
.cpt-tools-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: transparent; border: 0; color: var(--dnsc-muted, #9aa3b8); font: inherit; font-size: .82rem; cursor: pointer; text-align: left; }
.cpt-tools-head:hover { background: rgba(255,255,255,0.03); color: var(--dnsc-text, #e6e8ef); }
.cpt-tools-title { font-weight: 600; color: var(--dnsc-text, #e6e8ef); }
.cpt-chev { margin-left: auto; opacity: .6; font-size: .95rem; }
.cpt-tools-body { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.cpt-tools.done .cpt-tools-body { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px; }
/* Outline panel: Copilot-style transcript wrapping the full task cards */
.dnsc-turn-tools > .dnsc-bubble { width: 100%; max-width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; }
.dnsc-turn-tools .cpt-tools { margin: 2px 0 6px; }
.cpt-tools.live .cpt-tools-head { color: var(--dnsc-text, #e6e8ef); }
.cpt-tools.live .cpt-tools-body { border-top: 1px solid rgba(99,102,241,0.18); padding-top: 8px; }
.cpt-tools-hint { margin-left: auto; font-size: .74rem; opacity: .65; }
.cpt-tools-hint + .cpt-chev { margin-left: 0; }
.cpt-tools-body > .dnsc-task, .cpt-tools-body > .dnsc-group, .cpt-tools-body > .dnsc-passive, .cpt-tools-body > .dnsc-recent-chip { margin: 2px 0; }
.cpt-tools-body > .dnsc-group { background: rgba(255,255,255,0.02); border-radius: 8px; }
.cpt-tools-body > .dnsc-group.open { background: rgba(255,255,255,0.035); }
.cpt-tools-body > .dnsc-task { border-radius: 8px; }
.cpt-row { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: .82rem; color: var(--dnsc-muted, #9aa3b8); line-height: 1.4; }
.cpt-row.sub { padding-left: 22px; }
.cpt-row.run { color: var(--dnsc-text, #e6e8ef); }
.cpt-row.fail { color: #fca5a5; }
.cpt-row-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpt-verb { color: var(--dnsc-text, #e6e8ef); font-weight: 500; flex: 0 0 auto; }
.cpt-path { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 1px 7px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; color: #c7d2fe; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cpt-path:hover { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.4); }
.cpt-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: .68rem; font-weight: 700; flex: 0 0 auto; }
.cpt-mark.ok { background: rgba(52,211,153,0.16); color: #34d399; }
.cpt-mark.fail { background: rgba(248,113,113,0.16); color: #f87171; }
.cpt-mark.warn { background: rgba(251,191,36,0.18); color: #fbbf24; }
.cpt-mark.dot { background: transparent; color: #818cf8; font-size: .6rem; }
/* ── Pro chat stream (Copilot style): plain text turns, one flat actions list, thinking label ── */
.cpt-turn { margin: 10px 0 4px; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; }
.cpt-text { font-size: 14px; line-height: 1.65; color: var(--dnsc-text, #e6e8ef); word-break: break-word; -webkit-font-smoothing: antialiased; }
.cpt-turn.summary .cpt-text { font-weight: 500; }
.cpt-turn.err .cpt-text { color: #fca5a5; }
.cpt-turn.status .cpt-text, .cpt-turn.thought .cpt-text { color: var(--dnsc-muted, #9aa3b8); font-size: 13px; }
.cpt-text.dnsc-md p { margin: 0 0 6px; }
.cpt-text.dnsc-md ul { margin: 2px 0 6px 18px; padding: 0; }
.cpt-thinking { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 13px; color: var(--dnsc-muted, #9aa3b8); }
.cpt-thinking-text { background: linear-gradient(90deg, #9aa3b8 0%, #e6e8ef 50%, #9aa3b8 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cptShimmer 1.8s linear infinite; }
@keyframes cptShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cpt-actions { margin: 6px 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); overflow: hidden; }
.cpt-actions.live { border-color: rgba(99,102,241,0.3); }
.cpt-actions.warn { border-color: rgba(251,191,36,0.3); }
.cpt-actions-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: transparent; border: 0; color: var(--dnsc-muted, #9aa3b8); font: inherit; font-size: .82rem; cursor: pointer; text-align: left; }
.cpt-actions-head:hover { background: rgba(255,255,255,0.03); }
.cpt-actions-title { font-weight: 600; color: var(--dnsc-text, #e6e8ef); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpt-actions-body { border-top: 1px solid rgba(255,255,255,0.06); padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 1px; }
.cpt-act { border-radius: 8px; }
.cpt-act.open { background: rgba(255,255,255,0.03); }
.cpt-act.simple .cpt-act-sub { padding-left: 6px; min-height: 26px; }
/* One collapsible panel per agent/module step (Planning, Schema, Seed, Services, UI, Review…).
Expanded while live, collapses to a one-line summary with counts when done; never replaced. */
.cpt-steps { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.cpt-panel { border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); overflow: hidden; }
/* Completed (settled) panels get a slightly darker edge so each finished block reads as its own card. */
.cpt-panel:not(.run):not(.fail) { border-color: rgba(2,6,23,0.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
html.light-theme .cpt-panel:not(.run):not(.fail) { border-color: rgba(100,116,139,0.38); box-shadow: none; }
.cpt-panel.run { border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.05); }
.cpt-panel.fail { border-color: rgba(248,113,113,0.35); }
.cpt-panel.open { background: rgba(255,255,255,0.03); }
.cpt-panel-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 5px 10px; background: transparent; border: 0; color: var(--dnsc-muted, #9aa3b8); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.cpt-panel-head:hover { background: rgba(255,255,255,0.035); }
.cpt-panel-title { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--dnsc-text, #e6e8ef); overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cpt-panel-head { flex-wrap: wrap; row-gap: 2px; }
.cpt-panel.fail .cpt-panel-title { color: #fca5a5; }
.cpt-panel-body { border-top: 1px solid rgba(255,255,255,0.06); padding: 4px 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.cpt-panel-role { padding: 4px 6px 2px 30px; font-size: .72rem; color: var(--dnsc-muted, #9aa3b8); opacity: .75; }
.cpt-chip.run { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.cpt-chip.warn { background: rgba(251,191,36,0.16); color: #fbbf24; }
.cpt-act-sub.note { color: var(--dnsc-muted, #9aa3b8); }
.cpt-note-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpt-act-note.warn { color: #fca5a5; font-style: normal; }
.cpt-act-sub.link:disabled { cursor: default; }
.cpt-act-sub.link:disabled:hover { background: transparent; }
.cpt-act-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 3px 6px; background: transparent; border: 0; color: var(--dnsc-muted, #9aa3b8); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
.cpt-act-head:disabled { cursor: default; }
.cpt-act-head:not(:disabled):hover { background: rgba(255,255,255,0.035); }
.cpt-act.run .cpt-act-head, .cpt-act-head:hover .cpt-act-title { color: var(--dnsc-text, #e6e8ef); }
.cpt-act.fail .cpt-act-title { color: #fca5a5; }
.cpt-act-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpt-act-sub { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 1px 6px 1px 30px; font-size: .78rem; color: var(--dnsc-muted, #9aa3b8); width: 100%; background: transparent; border: 0; font-family: inherit; text-align: left; }
.cpt-act-sub.live { color: var(--dnsc-text, #e6e8ef); }
.cpt-act-sub.link { cursor: pointer; border-radius: 6px; }
.cpt-act-sub.link:hover { background: rgba(99,102,241,0.12); }
.cpt-act-sub.link:hover .cpt-open { opacity: 1; }
.cpt-act-body { padding: 2px 0 6px; }
.cpt-act-group { padding: 6px 6px 2px 30px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dnsc-muted, #9aa3b8); opacity: .8; display: flex; align-items: center; gap: 6px; }
.cpt-act-note { padding: 4px 6px 4px 30px; font-size: .78rem; color: var(--dnsc-muted, #9aa3b8); font-style: italic; }
.cpt-act-more { margin: 4px 0 0 30px; background: transparent; border: 0; color: #a5b4fc; font: inherit; font-size: .76rem; cursor: pointer; padding: 2px 0; }
.cpt-act-more:hover { text-decoration: underline; }
.cpt-file { background: transparent; border: 0; padding: 0; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; color: #c7d2fe; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpt-file.static { cursor: default; color: var(--dnsc-text, #e6e8ef); }
.cpt-open { margin-left: auto; font-size: .72rem; color: #a5b4fc; opacity: 0; transition: opacity .15s; }
.cpt-chip.mute { opacity: .7; }
.cpt-mark.dot { background: transparent; color: #818cf8; animation: cptPulse 1.2s ease-in-out infinite; }
.cpt-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(129,140,248,0.25); border-top-color: #818cf8; animation: cptSpin .8s linear infinite; flex: 0 0 auto; }
.cpt-chip { font-size: .7rem; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--dnsc-muted, #9aa3b8); flex: 0 0 auto; }
.cpt-chip.warn { background: rgba(251,191,36,0.14); color: #fbbf24; }
.cpt-working { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .82rem; color: var(--dnsc-muted, #9aa3b8); }
@keyframes cptSpin { to { transform: rotate(360deg); } }
@keyframes cptPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* ── Unified Copilot/bolt stream scale ─────────────────────────────────────────
One font family, two sizes (13px body / 12.5px rows), no bubbles, no avatars. */
.cpt-turn, .cpt-live, .cpt-steps, .cpt-thinking { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, sans-serif; }
.cpt-text { font-size: 13.5px; line-height: 1.6; }
.cpt-turn.narration .cpt-text, .cpt-turn.intro .cpt-text { font-weight: 500; color: var(--dnsc-muted, #9aa3b8); }
.cpt-turn.narration .cpt-text.dnsc-typing, .cpt-turn.intro .cpt-text.dnsc-typing,
.cpt-turn.narration.active .cpt-text, .cpt-turn.intro.active .cpt-text { color: var(--dnsc-text, #e6e8ef); font-weight: 600; }
.cpt-turn.status .cpt-text, .cpt-turn.thought .cpt-text { font-size: 12.5px; }
.cpt-turn { margin: 8px 0 2px; }
/* Live "thinking / working" line: animated spark + shimmering text; steps tick in below it. */
.cpt-live { margin: 8px 0 4px; }
.cpt-live.cpt-live-attached { margin: 6px 0 2px; }
.cpt-live-row { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.cpt-live-icon { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: #a5b4fc; flex: 0 0 auto; animation: cptLiveIconPulse 1.6s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(165,180,252,.45)); }
.cpt-spark { transform-origin: center; }
.cpt-spark-sm { opacity: .7; transform-origin: 80% 80%; }
/* bolt.new-style progress flash: a bright band sweeps across the live narration text while the agent works. */
.cpt-live-text {
font-size: 13.5px; font-weight: 600; line-height: 1.5;
color: transparent; -webkit-text-fill-color: transparent;
background-image: linear-gradient(100deg,
var(--dns-text-strong, #e5e7eb) 0%, var(--dns-text-strong, #e5e7eb) 38%,
#ffffff 46%, var(--dnsc-brand-2, #a78bfa) 50%, #ffffff 54%,
var(--dns-text-strong, #e5e7eb) 62%, var(--dns-text-strong, #e5e7eb) 100%);
background-size: 250% 100%; background-position: 120% 0;
-webkit-background-clip: text; background-clip: text;
animation: cptLiveFlash 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.cpt-live-text::after { background: var(--dnsc-brand-2, #a78bfa); -webkit-text-fill-color: initial; }
@keyframes cptLiveFlash { 0% { background-position: 120% 0; } 70%, 100% { background-position: -130% 0; } }
html.light-theme .cpt-live-text {
/* Fixed colours on purpose: phone modals re-point --dns-text-strong to white, which made this text vanish. */
background-image: linear-gradient(100deg,
#0f172a 0%, #0f172a 38%,
#6d28d9 46%, #a78bfa 50%, #6d28d9 54%,
#0f172a 62%, #0f172a 100%);
}
html.light-theme .cpt-live-icon { color: #7c3aed; filter: drop-shadow(0 0 4px rgba(124,58,237,.35)); }
@keyframes cptLiveIconPulse { 0%,100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
.cpt-live-steps { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.cpt-live-steps .cpt-act-sub { padding-left: 8px; }
.cpt-thinking { margin: 6px 0 4px; }
.cpt-thinking-text { font-size: 13px; font-weight: 500; }
@keyframes cptSparkPulse { 0%,100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes cptSparkTwinkle { 0%,100% { transform: scale(.5); opacity: .2; } 50% { transform: scale(1.1); opacity: 1; } }
/* Panel header meta ("3 tasks completed", elapsed) replaces the pile of chips. */
.cpt-panel-head { font-size: 12.5px; min-height: 30px; }
.cpt-panel-title { font-weight: 600; }
.cpt-panel-meta { flex: 0 0 auto; font-size: 12px; color: var(--dnsc-muted, #9aa3b8); white-space: nowrap; }
.cpt-panel-meta.mute { opacity: .65; }
.cpt-panel-meta.warn { color: #fbbf24; }
.cpt-panel.run .cpt-panel-meta { color: #a5b4fc; }
.cpt-panel-body { padding: 2px 6px 6px; }
.cpt-act-sub { font-size: 12.5px; min-height: 23px; }
/* ── Passive history vs. the single live line ──
Everything already generated is history and reads muted; the only white, animated text in
the stream is the live narration (#ai-narration-line / .cpt-live-text). Summary and error
turns keep their own emphasis. */
.cpt-turn .cpt-text,
.cpt-turn.narration .cpt-text, .cpt-turn.intro .cpt-text,
.cpt-turn.narration .cpt-text.dnsc-typing, .cpt-turn.active .cpt-text,
.cpt-panel-title, .cpt-actions-title,
.cpt-act.run .cpt-act-head, .cpt-act-head:hover .cpt-act-title,
.cpt-act-sub.live, .cpt-file.static,
.cpt-thinking-text { color: var(--dnsc-muted, #9aa3b8); font-weight: 400; }
.cpt-turn.active .cpt-text.dnsc-typing { animation: none; }
.cpt-thinking-text { background: none; -webkit-text-fill-color: currentColor; animation: none; }
.cpt-turn.summary .cpt-text { color: var(--dnsc-text, #e6e8ef); font-weight: 500; }
.cpt-turn.err .cpt-text { color: #fca5a5; }
.cpt-panel.run .cpt-panel-title { color: #c7d2fe; font-weight: 600; }
.cpt-panel.fail .cpt-panel-title { color: #fca5a5; }
.cpt-live-text { color: transparent; font-weight: 600; }
/* When narration sits directly above the panel it describes, the panel is the active element;
the narration only narrates — muted, no flash — so the two never read as the same bright line. */
.cpt-live.cpt-live-attached .cpt-live-text {
color: var(--dnsc-muted, #9aa3b8); -webkit-text-fill-color: currentColor;
background: none; animation: none; font-weight: 400; font-size: 13px;
}
.cpt-live.cpt-live-attached .cpt-live-icon { animation: none; filter: none; opacity: .6; }
html.light-theme .cpt-live.cpt-live-attached .cpt-live-text { color: #475569; }
html.light-theme .cpt-turn .cpt-text,
html.light-theme .cpt-panel-title, html.light-theme .cpt-act-sub.live { color: var(--dns-text-muted, #3b4760); }
html.light-theme .cpt-turn.summary .cpt-text { color: var(--dns-text-strong, #0f172a); }
html.light-theme .cpt-turn.err .cpt-text, html.light-theme .cpt-panel.fail .cpt-panel-title { color: #b91c1c; }
html.light-theme .cpt-panel.run .cpt-panel-title { color: #4338ca; }
html.light-theme .cpt-panel.run .cpt-panel-meta { color: #4f46e5; }
html.light-theme .cpt-panel-meta.warn { color: #b45309; }
html.light-theme .cpt-file { color: #4338ca; }
html.light-theme .cpt-file.static, html.light-theme .cpt-verb, html.light-theme .cpt-tools-title { color: var(--dns-text, #0f172a); }
html.light-theme .cpt-act-sub, html.light-theme .cpt-act-sub.note, html.light-theme .cpt-panel-meta, html.light-theme .cpt-file-dir, html.light-theme .cpt-thinking-text { color: #475569; }
html.light-theme .cpt-user-bubble { color: #0f172a; border-color: #c7d2fe; }
html.light-theme .cpt-turn.narration .cpt-text, html.light-theme .cpt-turn.intro .cpt-text { color: #1e293b; }
html.light-theme .cpt-turn.status .cpt-text, html.light-theme .cpt-turn.thought .cpt-text { color: #334155; }
html.light-theme .dnsc-turn.user .dnsc-bubble { color: #0f172a; background: #eef2ff; border-color: #c7d2fe; }
html.light-theme .cpt-thinking-text { background: none; -webkit-text-fill-color: currentColor; }
.cpt-file-dir { font-size: 11px; color: var(--dnsc-muted, #9aa3b8); opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Items tick in one by one (staggered by --i) and the panel's check pops when it finishes. */
.cpt-act-sub.tick { animation: cptTickIn .28s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.cpt-act-sub.tick .cpt-mark.ok { animation: cptMarkPop .32s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.cpt-mark.pop { animation: cptMarkPop .35s cubic-bezier(.2,1.4,.4,1) both; }
.cpt-panel { animation: cptTickIn .25s ease both; }
@keyframes cptTickIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes cptMarkPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cpt-act-sub.tick, .cpt-mark.pop, .cpt-panel, .cpt-spark, .cpt-spark-sm, .cpt-live-text, .cpt-live-icon { animation: none !important; } .cpt-live-text { color: var(--dnsc-text, #e6e8ef); -webkit-text-fill-color: var(--dnsc-text, #e6e8ef); background: none; } }
.dnsc-tasks-title { font-weight: 700; font-size: 0.82rem; }
.dnsc-tasks-hint { margin-left: auto; font-size: 0.7rem; color: var(--dns-text-subtle); }
.dnsc-turn-nested { padding-left: 18px; }
.dnsc-turn-nested .dnsc-ava { visibility: hidden; }
.dnsc-group-head {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 5px 8px; background: transparent; border: 0;
text-align: left; cursor: pointer; color: inherit;
transition: background 0.14s;
}
.dnsc-group-head:hover { background: transparent; }
.dnsc-group-head:focus-visible { outline: 2px solid var(--dnsc-brand); outline-offset: -2px; }
.dnsc-caret {
flex: 0 0 12px; color: var(--dns-text-subtle); font-size: 0.7rem;
transition: transform 0.2s ease;
}
.dnsc-group.open .dnsc-caret { transform: rotate(90deg); }
.dnsc-group-icon {
flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
display: grid; place-items: center; font-size: 0.6rem;
background: transparent; color: var(--dnsc-ok);
}
.dnsc-group.fail .dnsc-group-icon { background: transparent; color: var(--dnsc-err); }
.dnsc-group-title {
flex: 1 1 auto; min-width: 0; font-size: 0.8rem; font-weight: 450;
color: var(--dns-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
line-height: 1.4;
}
.dnsc-group-body {
display: flex; flex-direction: column; gap: 3px;
padding: 2px 10px 8px 34px;
border-top: 0;
max-height: 320px; overflow-y: auto; overflow-x: hidden; min-width: 0;
animation: dnscExpand 0.2s ease both;
}
.dnsc-sub {
display: flex; align-items: center; gap: 7px;
margin-top: 8px; font-size: 0.66rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.09em; color: var(--dns-text-subtle);
}
.dnsc-sub-count {
font-size: 0.6rem; padding: 1px 6px; border-radius: 999px;
background: var(--dnsc-card-strong); border: 1px solid var(--dnsc-card-border);
letter-spacing: 0;
}
.dnsc-row {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 6px 8px; border-radius: var(--dnsc-radius-sm);
background: transparent; border: 1px solid transparent;
text-align: left; cursor: pointer; transition: all 0.13s;
min-width: 0;
}
.dnsc-row:hover { background: var(--dnsc-card-strong); border-color: var(--dnsc-card-border); }
.dnsc-row:focus-visible { outline: 2px solid var(--dnsc-brand); outline-offset: -1px; }
.dnsc-row.static { cursor: default; }
.dnsc-row.static:hover { background: transparent; border-color: transparent; }
.dnsc-row-open {
flex: 0 0 auto; font-size: 0.65rem; font-weight: 700; color: var(--dnsc-brand);
opacity: 0.5; transition: opacity 0.13s;
}
.dnsc-row:hover .dnsc-row-open { opacity: 1; }
.dnsc-fail-reason {
margin: 6px 0 2px; padding: 8px 10px; border-radius: var(--dnsc-radius-sm);
background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.22);
font-size: 0.74rem; line-height: 1.55; color: var(--dnsc-err);
}
/* Final-review checklist: live per-check progress, soft by default. */
.dnsc-verify {
margin: 8px 0 2px; padding: 8px 10px; border-radius: var(--dnsc-radius-sm);
background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border);
display: flex; flex-direction: column; gap: 3px;
}
.dnsc-verify-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--dns-text-muted); margin-bottom: 4px;
}
.dnsc-verify-row {
display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px;
font-size: 0.76rem; line-height: 1.4; padding: 3px 4px; border-radius: 6px;
color: var(--dns-text-strong);
}
.dnsc-verify-mark {
display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
font-size: 0.65rem; font-weight: 800;
}
.dnsc-verify-row.ok .dnsc-verify-mark { background: rgba(52,211,153,0.16); color: var(--dnsc-ok); }
.dnsc-verify-row.soft .dnsc-verify-mark { background: rgba(148,163,184,0.16); color: var(--dns-text-muted); }
.dnsc-verify-row.fail .dnsc-verify-mark { background: rgba(248,113,113,0.16); color: var(--dnsc-err); }
.dnsc-verify-row.skip .dnsc-verify-mark { background: rgba(148,163,184,0.10); color: var(--dns-text-muted); }
.dnsc-verify-row.active { background: rgba(99,102,241,0.06); }
.dnsc-verify-row.active .dnsc-verify-mark { background: transparent; }
.dnsc-verify-row.soft, .dnsc-verify-row.skip { color: var(--dns-text-muted); }
.dnsc-verify-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnsc-verify-state { font-size: 0.66rem; font-weight: 600; color: var(--dns-text-muted); letter-spacing: 0.03em; }
.dnsc-verify-row.ok .dnsc-verify-state { color: var(--dnsc-ok); }
.dnsc-verify-row.fail .dnsc-verify-state { color: var(--dnsc-err); }
.dnsc-link {
align-self: flex-start; margin-top: 6px; padding: 2px 0;
background: none; border: 0; cursor: pointer;
font-size: 0.7rem; font-weight: 700; color: var(--dnsc-brand);
}
.dnsc-link:hover { text-decoration: underline; }
/* ── Notices (progress / warn / success / error) ──────────────────────── */
.dnsc-note {
display: flex; align-items: center; gap: 9px; min-width: 0;
padding: 9px 12px; border-radius: var(--dnsc-radius-sm);
font-size: 0.78rem; line-height: 1.5;
background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border);
color: var(--dns-text-muted);
}
.dnsc-note.ok { background: rgba(52,211,153,0.09); border-color: rgba(52,211,153,0.26); color: var(--dnsc-ok); font-weight: 600; }
.dnsc-note.warn { background: rgba(251,191,36,0.09); border-color: rgba(251,191,36,0.26); color: var(--dnsc-warn); }
.dnsc-note.err { background: rgba(248,113,113,0.09); border-color: rgba(248,113,113,0.26); color: var(--dnsc-err); font-weight: 600; }
/* ── Progress meter ───────────────────────────────────────────────────── */
.dnsc-meter { width: 100%; min-width: 0; }
.dnsc-meter-top {
display: flex; align-items: center; justify-content: space-between;
font-size: 0.71rem; color: var(--dns-text-subtle); margin-bottom: 6px;
}
.dnsc-meter-pct { font-weight: 800; color: var(--dns-text); }
.dnsc-meter-track {
width: 100%; height: 6px; border-radius: 999px; overflow: hidden;
background: var(--dns-bg-inset); border: 1px solid var(--dnsc-card-border);
}
.dnsc-meter-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--dnsc-brand), var(--dnsc-brand-3));
transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
}
/* ── "Agent is working" indicator ─────────────────────────────────────── */
.dnsc-working {
display: flex; align-items: center; gap: 10px;
padding: 2px 4px; font-size: 0.8rem; color: var(--dns-text-muted);
animation: dnscFade 0.3s ease both;
}
.dnsc-dots { display: inline-flex; gap: 4px; }
.dnsc-dots i {
width: 6px; height: 6px; border-radius: 50%; display: block;
background: var(--dnsc-brand); animation: dnscBounce 1.15s ease-in-out infinite;
}
.dnsc-dots i:nth-child(2) { animation-delay: 0.15s; }
.dnsc-dots i:nth-child(3) { animation-delay: 0.3s; }
/* Typing caret for the newest narration line. This is the ONE place text animates now, so the
caret is made solid and slightly taller to read as a real cursor the agent is typing at. */
.dnsc-typing {
white-space: pre-wrap;
font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.dnsc-typing::after {
content: ''; display: inline-block; width: 2px; height: 1.05em;
margin-left: 3px; vertical-align: text-bottom; border-radius: 1px;
background: var(--dnsc-brand); animation: dnscCaret 1.05s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
.dnsc-typing::after { animation: none; opacity: 0.7; }
}
/* ── Conversational prose bubble (Copilot-style) ──────────────────────
Agent sentences get a soft card with a hairline gradient edge, a gentle rise-in and
rich Markdown inside (code, lists, emphasis). The live/typing bubble carries a subtle
brand glow so the eye lands on the text being written. */
.dnsc-turn-prose { animation: dnscRise 0.3s cubic-bezier(0.22,1,0.36,1) both; }
.dnsc-bubble.dnsc-prose {
position: relative;
padding: 11px 14px 12px;
border-radius: 14px 14px 14px 6px;
background:
linear-gradient(var(--dnsc-card), var(--dnsc-card)) padding-box,
linear-gradient(135deg, color-mix(in srgb, var(--dnsc-brand) 45%, transparent), var(--dnsc-card-border) 60%) border-box;
border: 1px solid transparent;
box-shadow: 0 1px 2px rgba(15,23,42,0.05);
font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px; line-height: 1.6; font-weight: 400; letter-spacing: 0;
color: var(--dnsc-text, #e6e8ef);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.dnsc-bubble.dnsc-prose .cpt-prose { margin: 0; font: inherit; color: inherit; }
.dnsc-bubble.dnsc-prose .cpt-prose.strong { font-weight: 600; }
.dnsc-bubble.dnsc-prose.live {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--dnsc-brand) 10%, transparent), 0 1px 2px rgba(15,23,42,0.05);
}
.dnsc-bubble.dnsc-prose.summary {
font-weight: 500;
background:
linear-gradient(var(--dnsc-card), var(--dnsc-card)) padding-box,
linear-gradient(135deg, color-mix(in srgb, var(--dnsc-ok) 55%, transparent), var(--dnsc-card-border) 65%) border-box;
}
.dnsc-bubble.dnsc-prose .dnsc-typing { white-space: pre-wrap; }
/* Markdown inside a prose bubble */
.dnsc-md > :first-child { margin-top: 0; }
.dnsc-md > :last-child { margin-bottom: 0; }
.dnsc-md p { margin: 0 0 6px; }
.dnsc-md h3, .dnsc-md h4, .dnsc-md h5, .dnsc-md h6 {
margin: 10px 0 6px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
color: var(--dns-text-strong);
}
/* Simple, well-aligned list glyphs (› for bullets, numbers for ordered) — not fancy, just clear. */
.dnsc-md ul, .dnsc-md ol { margin: 4px 0 6px; padding-left: 0; list-style: none; }
.dnsc-md li { position: relative; margin: 3px 0; padding-left: 18px; line-height: 1.55; }
.dnsc-md ul li::before {
content: '\203A'; position: absolute; left: 4px; top: -1px;
font-weight: 700; color: var(--dnsc-brand); opacity: .9;
}
.dnsc-md ol { counter-reset: dnscli; }
.dnsc-md ol li { padding-left: 22px; }
.dnsc-md ol li::before {
counter-increment: dnscli; content: counter(dnscli) '.'; position: absolute; left: 0; top: 0;
font-size: 12px; font-weight: 600; color: var(--dnsc-brand); font-variant-numeric: tabular-nums;
}
.dnsc-md strong { font-weight: 600; color: var(--dns-text-strong); }
.dnsc-md a { color: var(--dnsc-brand); text-decoration: underline; text-underline-offset: 2px; }
.dnsc-md code {
font-family: ui-monospace, "Cascadia Code", "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px; padding: 1px 6px; border-radius: 6px;
background: color-mix(in srgb, var(--dnsc-brand) 10%, var(--dnsc-card-strong));
border: 1px solid var(--dnsc-card-border);
color: var(--dns-text-strong);
}
.dnsc-md pre.dnsc-code {
position: relative; margin: 8px 0 10px; padding: 12px 14px;
border-radius: 10px; overflow-x: auto;
background: var(--dnsc-card-strong);
border: 1px solid var(--dnsc-card-border);
font-size: 0.76rem; line-height: 1.55;
}
.dnsc-md pre.dnsc-code code {
padding: 0; border: 0; background: transparent; font-size: inherit; color: var(--dns-text);
}
.dnsc-md pre.dnsc-code[data-lang]::before {
content: attr(data-lang); position: absolute; top: 6px; right: 10px;
font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--dns-text-subtle);
}
@media (prefers-reduced-motion: reduce) {
.dnsc-turn-prose { animation: none; }
}
/* ── Composer dock ────────────────────────────────────────────────────── */
.dnsc-dock {
flex: 0 0 auto; min-width: 0; overflow: visible;
padding: 12px 16px 16px;
background: linear-gradient(to top, var(--dns-bg-app) 62%, transparent);
}
.dnsc-composer {
border: 1px solid var(--dnsc-card-border);
background: var(--dnsc-card-strong);
border-radius: 18px;
box-shadow: var(--dnsc-shadow);
transition: border-color 0.16s, box-shadow 0.16s;
overflow: hidden;
}
.dnsc-composer:focus-within {
border-color: var(--dnsc-brand);
box-shadow: 0 0 0 3px var(--dnsc-ring), var(--dnsc-shadow);
}
.dnsc-composer textarea {
width: 100%; max-width: 100%; box-sizing: border-box;
background: transparent; border: 0; outline: none; resize: none;
padding: 11px 36px 4px 15px; min-height: 52px; max-height: 220px;
font-size: 0.86rem; line-height: 1.55; color: var(--dns-text);
font-family: inherit;
/* Height is driven by dnsAutoGrow; the scrollbar only appears once max-height is reached. */
overflow-y: hidden;
scrollbar-width: thin; scrollbar-color: var(--dns-scrollbar-thumb) transparent;
transition: min-height 0.16s ease, padding 0.16s ease;
}
.dnsc-composer textarea.dnsc-grow-max { overflow-y: auto; }
.dnsc-composer textarea::-webkit-scrollbar { width: 8px; }
.dnsc-composer textarea::-webkit-scrollbar-track { background: transparent; }
.dnsc-composer textarea::-webkit-scrollbar-thumb { background: var(--dns-scrollbar-thumb); border-radius: 999px; }
.dnsc-composer-field { position: relative; }
.dnsc-composer-zoom { position: absolute; top: 8px; right: 8px; opacity: .55; }
.dnsc-composer-field:hover .dnsc-composer-zoom, .dnsc-composer-zoom:focus-visible { opacity: 1; }
/* Toolbar-style icon button shared by Stop, zoom and modal close so every icon control matches. */
.dnsc-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0; margin: 0; flex: 0 0 auto;
border-radius: 7px; border: 1px solid transparent; cursor: pointer;
background: transparent; color: var(--dns-text-muted);
transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.dnsc-icon-btn:hover { background: var(--dnsc-card); border-color: var(--dnsc-card-border); color: var(--dns-text); }
.dnsc-icon-btn svg { width: 14px; height: 14px; }
.dnsc-composer-modal { width: min(880px, 94vw); padding: 0; }
.dnsc-composer-modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px 18px; }
.dnsc-composer-modal-title { flex: 1 1 auto; font-size: .86rem; font-weight: 600; color: var(--dns-text); }
.dnsc-composer-modal-text {
display: block; width: 100%; box-sizing: border-box; min-height: min(56vh, 520px); resize: vertical;
margin: 0; padding: 14px 18px; border: 0; border-top: 1px solid var(--dnsc-card-border); border-bottom: 1px solid var(--dnsc-card-border);
background: transparent; color: var(--dns-text); outline: none;
font-family: inherit; font-size: .92rem; line-height: 1.65;
}
.dnsc-composer-modal .dns-modal-actions { align-items: center; }
.dnsc-composer-modal-count { margin-right: auto; font-size: .74rem; color: var(--dns-text-subtle); }
.dnsc-composer textarea::placeholder { color: var(--dns-text-subtle); }
/* While the agent runs, the composer is read-only context, not the focal control: collapse it
to a single compact line so the transcript/progress dock gets the vertical space instead. */
.dnsc-composer-compact textarea {
min-height: 34px;
padding: 8px 15px 2px;
}
.dnsc-bar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 10px 10px 12px; min-width: 0;
}
.dnsc-bar-spacer { flex: 1 1 auto; }
.dnsc-tool {
display: inline-flex; align-items: center; gap: 5px; position: relative;
font-size: 0.72rem; font-weight: 600; color: var(--dns-text-muted);
padding: 5px 10px; border-radius: 9px; cursor: pointer;
background: transparent; border: 1px solid transparent; transition: all 0.14s;
}
.dnsc-tool:hover:not(:disabled) { background: var(--dnsc-card); border-color: var(--dnsc-card-border); color: var(--dns-text); }
.dnsc-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.dnsc-tool.active { background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.3); color: #a5b4fc; }
.dnsc-send {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 15px; border-radius: 11px; border: 0; cursor: pointer;
font-size: 0.76rem; font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--dnsc-brand), var(--dnsc-brand-2));
box-shadow: 0 10px 24px -12px var(--dnsc-ring);
transition: transform 0.14s, filter 0.14s, opacity 0.14s;
}
.dnsc-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.dnsc-send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.dnsc-send.ghost {
background: var(--dnsc-card); color: var(--dns-text);
border: 1px solid var(--dnsc-card-border); box-shadow: none;
}
.dnsc-send.ghost:hover:not(:disabled) { border-color: var(--dns-border-strong); }
.dnsc-stop {
width: 32px; height: 32px; border-radius: 9px;
color: #ef4444; background: transparent; border-color: transparent; box-shadow: none;
}
.dnsc-stop svg { width: 18px; height: 18px; }
.dnsc-stop:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4); color: #f87171; }
.dnsc-pause {
width: 32px; height: 32px; border-radius: 9px;
color: #f59e0b; background: transparent; border-color: transparent; box-shadow: none;
}
.dnsc-pause svg { width: 18px; height: 18px; }
.dnsc-pause:hover { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.4); }
.dnsc-pause:disabled { opacity: .55; cursor: progress; }
/* Floating run controls (Pause / Stop) over the transcript. The desktop composer already carries
both buttons, so the FAB is a phone affordance — shown by mobile.css. */
.dnsc-run-fab { display: none; }
.dnsc-fab {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.08) inset;
transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.dnsc-fab svg { width: 15px; height: 15px; }
.dnsc-fab:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 8px 22px rgba(0,0,0,.38); transform: translateY(-1px); }
.dnsc-fab:active:not(:disabled) { transform: scale(.92); filter: brightness(.95); }
.dnsc-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dnsc-fab-pause { background: linear-gradient(160deg, #f59e0b, #d97706); color: #1f1300; border-color: rgba(255,255,255,.18); }
.dnsc-fab-stop { background: linear-gradient(160deg, #ef4444, #b91c1c); color: #fff; border-color: rgba(255,255,255,.18); }
.dnsc-fab-home { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border-color: rgba(255,255,255,.18); }
.dnsc-fab:disabled { filter: saturate(.6); cursor: progress; }
.dnsc-fab-spin {
width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,.25); border-top-color: currentColor;
animation: dnsc-fab-rot .8s linear infinite;
}
@keyframes dnsc-fab-rot { to { transform: rotate(360deg); } }
/* While the agent runs the primary row holds only the model chip + Stop; keep
both away from the composer edges. */
.dnsc-bar-primary { padding: 8px 12px 6px; }
.dnsc-bar-primary-running { padding: 4px 10px; align-items: center; }
/* ── Docked progress strip (always visible above the transcript) ─────── */
.dnsc-progress-dock {
display: flex; flex-direction: column; gap: 4px;
padding: 5px 14px 6px;
margin: 0 0 6px;
border-bottom: 1px solid var(--dnsc-card-border);
background: linear-gradient(180deg, var(--dns-bg-surface-2), var(--dns-bg-surface));
box-shadow: 0 6px 18px -12px rgba(0,0,0,0.45);
position: sticky; top: 0; z-index: 5;
animation: dnscFade 0.25s ease both;
}
.dnsc-progress-row { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.dnsc-progress-pulse {
flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
background: var(--dnsc-brand);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--dnsc-brand) 45%, transparent);
animation: dnscPulseDot 1.6s ease-out infinite;
}
@keyframes dnscPulseDot {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dnsc-brand) 45%, transparent); opacity: 1; }
70% { box-shadow: 0 0 0 6px transparent; opacity: .75; }
100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
.cpt-dots { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; width: 14px; height: 14px; justify-content: center; }
.cpt-dots i { width: 3px; height: 3px; border-radius: 50%; background: var(--dnsc-brand); opacity: .35; animation: cptDots 1.2s ease-in-out infinite; }
.cpt-dots i:nth-child(2) { animation-delay: .2s; }
.cpt-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cptDots { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.dnsc-progress-label {
flex: 1; min-width: 0; max-width: 60%;
font-size: 0.68rem; font-weight: 500; color: var(--dns-text-subtle);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dnsc-progress-meta {
flex-shrink: 0; display: flex; align-items: center; gap: 10px; margin-left: auto;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dnsc-progress-files {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.7rem; font-weight: 500; color: var(--dns-text-subtle);
padding: 2px 8px; border-radius: 999px;
background: var(--dns-bg-inset); border: 1px solid var(--dnsc-card-border);
}
.dnsc-progress-files svg { width: 12px; height: 12px; opacity: .75; flex-shrink: 0; }
.dnsc-progress-pct {
min-width: 38px; text-align: right;
font-size: 0.8rem; font-weight: 700; color: var(--dnsc-brand);
font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.dnsc-progress-track {
position: relative; height: 4px; border-radius: 999px; overflow: hidden;
background: var(--dns-bg-inset);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.dnsc-progress-fill {
position: relative; height: 100%; border-radius: 999px;
background: var(--dnsc-brand);
transition: width 0.45s cubic-bezier(0.22,1,0.36,1);
}
.dnsc-progress-track.indeterminate .dnsc-progress-fill {
width: 30%; animation: dns-indeterminate 1.8s ease-in-out infinite;
}
/* Inline success note inside a collapsed step, and the internal stage label */
.dnsc-note-inline { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.dnsc-note-ico {
display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
background: rgba(52,211,153,0.18); color: var(--dnsc-ok); font-size: 0.7rem; flex-shrink: 0;
}
.dnsc-sub-tech {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.66rem; letter-spacing: 0.02em; text-transform: none;
color: var(--dns-text-subtle); opacity: 0.85;
}
.dnsc-select {
width: 100%; box-sizing: border-box;
background: var(--dns-bg-inset); border: 1px solid var(--dnsc-card-border);
border-radius: 10px; color: var(--dns-text);
padding: 8px 11px; font-size: 0.78rem; outline: none;
transition: border-color 0.14s;
}
.dnsc-select:focus { border-color: var(--dnsc-brand); }
/* ── Segmented switch (Auto / Manual) ─────────────────────────────────── */
.dnsc-seg {
display: inline-flex; padding: 3px; gap: 2px;
background: var(--dns-bg-inset); border: 1px solid var(--dnsc-card-border);
border-radius: 10px;
}
.dnsc-seg button {
padding: 4px 11px; border-radius: 7px; border: 0; cursor: pointer;
font-size: 0.71rem; font-weight: 700; color: var(--dns-text-subtle);
background: transparent; transition: all 0.15s;
}
.dnsc-seg button.on {
background: linear-gradient(135deg, var(--dnsc-brand), var(--dnsc-brand-2));
color: #fff; box-shadow: 0 6px 14px -8px var(--dnsc-ring);
}
/* Composer rows: primary actions on top, tools beneath, compact mode switch last.
The rows share .dnsc-bar padding, so vertical padding is trimmed per-row to keep
the stack tight instead of three full-height bars. */
.dnsc-bar-primary { padding-top: 8px; padding-bottom: 4px; }
.dnsc-bar-tools { padding-top: 2px; padding-bottom: 2px; }
.dnsc-bar-mode { padding-top: 2px; }
/* Compact variant of the Auto/Manual switch — the full-size one was visually
competing with the Build button. */
.dnsc-seg-sm { padding: 2px; border-radius: 8px; }
.dnsc-seg-sm button {
padding: 3px 9px; border-radius: 6px;
font-size: 0.66rem; font-weight: 600;
}
.dnsc-seg-sm button.on { box-shadow: 0 4px 10px -7px var(--dnsc-ring); }
/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes dnscRise { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
@keyframes dnscStepIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes dnscFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dnscExpand { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 320px; } }
@keyframes dnscSweep { from { background-position: 200% 0; } to { background-position: -60% 0; } }
@keyframes dnscPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: 0.65; } }
@keyframes dnscBounce { 0%,80%,100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes dnscFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dnscCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.dnsc-turn, .dnsc-task, .dnsc-group, .dnsc-step, .dnsc-empty-orb,
.dnsc-task.running::before, .dnsc-dots i { animation: none !important; }
}
/* ── Chrome harmonisation: make the surrounding panel match the new control ── */
.ai-chat-header {
padding: 2px 8px 2px 10px;
min-height: 28px;
border-bottom: 1px solid var(--dnsc-card-border);
background: var(--dns-bg-surface-2);
}
.ai-chat-title {
gap: 6px;
font-size: 0.76rem; letter-spacing: 0.01em; text-transform: none;
color: var(--dns-text-strong);
}
.ai-chat-title .dns-logo-mark { height: 16px; width: 16px; flex-shrink: 0; }
.ai-chat-brand {
font-size: 0.76rem; font-weight: 600; line-height: 1;
color: var(--dns-text-strong);
}
.ai-panel-toggle-button {
width: 22px; height: 22px;
background: transparent; border: 1px solid transparent;
color: var(--dns-text-muted); border-radius: 6px;
}
.ai-panel-toggle-button:hover {
background: var(--dnsc-card); border-color: var(--dnsc-card-border);
color: var(--dns-text-strong); transform: none;
}
.ai-panel-collapsed-rail { background: var(--dns-bg-surface-2); }
/* The MCP flyout re-homed inside the new composer bar */
.dnsc-bar-tools { position: relative; }
.dnsc-bar .ai-mcp-menu {
bottom: calc(100% + 8px); left: 0;
width: min(240px, 100%); z-index: 60;
background: var(--dns-bg-surface);
border: 1px solid var(--dnsc-card-border);
border-radius: var(--dnsc-radius);
box-shadow: var(--dnsc-shadow-lg);
}
/* The composer clips its children (rounded corners); release the clip only while the flyout is
open so it can float above the composer instead of being cut off at its top edge. */
.dnsc-composer:has(.ai-mcp-menu),
.ai-chat-composer-dock:has(.ai-mcp-menu) { overflow: visible; }
/* Keep the file input invisible but clickable inside the tool chip */
.dnsc-tool .ai-attach-input {
position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
/* ── Auth: sign-in / sign-up ──────────────────────────────────────────────── */
.dns-auth-page {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
background:
radial-gradient(1200px 600px at -10% -10%, rgba(124, 58, 237, .28), transparent 60%),
radial-gradient(900px 500px at 110% 110%, rgba(59, 130, 246, .22), transparent 60%),
var(--dns-bg-app);
color: var(--dns-text);
}
.dns-auth-page-center { grid-template-columns: 1fr; place-items: center; }
.dns-auth-hero {
padding: 64px 72px;
display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.dns-auth-hero h1 {
margin: 12px 0 0; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.1;
color: var(--dns-text-strong); letter-spacing: -.02em;
}
.dns-auth-hero p { margin: 0; color: var(--dns-text-muted); font-size: 1.05rem; max-width: 52ch; }
.dns-auth-points { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--dns-text-muted); }
.dns-auth-points li::before { content: "✓"; color: #22c55e; font-weight: 700; margin-right: 10px; }
.dns-auth-card {
margin: 32px; padding: 32px 36px; align-self: center;
background: var(--dns-bg-surface); border: 1px solid var(--dns-border);
border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
display: flex; flex-direction: column; gap: 18px;
}
.dns-auth-card-compact { width: min(420px, 92vw); align-items: center; text-align: center; }
.dns-auth-card h2 { margin: 0; font-size: 1.35rem; color: var(--dns-text-strong); }
.dns-auth-tabs { display: flex; gap: 4px; padding: 4px; background: var(--dns-bg-inset); border-radius: 10px; }
.dns-auth-tabs button {
flex: 1; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
color: var(--dns-text-muted); font-weight: 600; cursor: pointer; transition: all .15s;
}
.dns-auth-tabs button.active { background: var(--dns-bg-elevated); color: var(--dns-text-strong); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.dns-auth-providers { display: grid; gap: 10px; }
.dns-auth-provider {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 11px 14px; border-radius: 10px; cursor: pointer; font-weight: 600;
background: var(--dns-bg-elevated); color: var(--dns-text-strong);
border: 1px solid var(--dns-border-strong); transition: transform .12s, border-color .12s, background .12s;
}
.dns-auth-provider:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--dns-accent); background: #1f2a45; }
.dns-auth-provider:disabled { opacity: .6; cursor: progress; }
.dns-auth-provider-ico { display: inline-flex; width: 18px; height: 18px; }
.dns-auth-divider { display: flex; align-items: center; gap: 12px; color: var(--dns-text-subtle); font-size: .8rem; }
.dns-auth-switch { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-top: 8px; color: var(--dns-text-subtle); font-size: .75rem; }
.dns-auth-switch .dns-link-btn { font-size: .75rem; padding: 0; background: none; border: 0; }
/* Simplified sign-in panel (shared by /login and the inline landing modal) */
.dns-auth-card.compact { margin: 0; padding: 26px 26px 20px; box-shadow: none; border: 0; background: transparent; gap: 14px; width: min(400px, 92vw); }
.dns-auth-head { display: grid; gap: 4px; }
.dns-auth-head p { margin: 0; color: var(--dns-text-muted); font-size: .9rem; }
.dns-auth-providers.stacked .dns-auth-provider { justify-content: flex-start; padding: 12px 16px; font-size: .95rem; }
.dns-auth-providers.stacked .dns-auth-provider > span:last-child { flex: 1; text-align: center; margin-right: 18px; }
.dns-auth-email-toggle {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
padding: 10px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .88rem;
background: transparent; color: var(--dns-text-muted); border: 1px dashed var(--dns-border-strong); transition: color .12s, border-color .12s;
}
.dns-auth-email-toggle:hover:not(:disabled) { color: var(--dns-text-strong); border-color: var(--dns-accent); }
.dns-auth-foot { margin: 0; text-align: center; font-size: .82rem; color: var(--dns-text-muted); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; align-items: center; }
.dns-auth-foot a { color: var(--dns-accent); font-weight: 600; text-decoration: none; }
.dns-auth-foot a:hover { text-decoration: underline; }
.dns-auth-foot-sep { color: var(--dns-text-subtle); }
.dns-auth-foot .dns-link-btn { font-size: .8rem; padding: 0; background: none; border: 0; color: var(--dns-accent); cursor: pointer; font-weight: 600; }
.dns-auth-switch-hint { flex-basis: 100%; font-size: .76rem; color: var(--dns-text-subtle); }
.dns-auth-inline-toast { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: .84rem; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); color: var(--dns-text-strong); }
.dns-auth-inline-toast.error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.dns-auth-inline-toast span { flex: 1; }
.dns-auth-inline-toast .dns-auth-toast-close { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; }
/* Inline sign-in modal on the landing page — no redirect, no friction */
.dns-signin-modal-backdrop { position: fixed; inset: 0; z-index: 7000; background: rgba(2,6,23,.62); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; animation: dnsFadeIn .18s ease; }
.dns-signin-modal { position: relative; background: var(--dns-bg-surface); border: 1px solid var(--dns-border); border-radius: 20px; box-shadow: 0 40px 100px rgba(0,0,0,.5); max-height: calc(100dvh - 32px); overflow-y: auto; animation: dnsPopIn .22s cubic-bezier(.2,.9,.3,1.2); }
.dns-signin-modal-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--dns-border); background: var(--dns-bg-elevated); color: var(--dns-text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; z-index: 1; }
.dns-signin-modal-close:hover { color: var(--dns-text-strong); border-color: var(--dns-accent); }
.dns-signin-modal-note { margin: 0; padding: 0 26px 18px; text-align: center; font-size: .78rem; color: var(--dns-text-subtle); }
.dns-signin-modal-note a { color: inherit; text-decoration: underline; }
@keyframes dnsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dnsPopIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
/* Guest controls float in the viewport corners; no header row, no reserved strip, no wrapper backgrounds. */
.landing-body-full.dns-landing-guest .dns-sidebar,
.landing-body-full.dns-landing-guest .dns-mobile-menu,
.landing-body-full.dns-landing-guest .dns-mobile-scrim { display: none !important; }
:is(html, html.light-theme) .landing-root .dns-guest-viewport,
:is(html, html.light-theme) .landing-root .landing-body-full.dns-landing-guest,
:is(html, html.light-theme) .landing-root .landing-body-full.dns-landing-guest .dns-main-content { background: transparent; border: 0; box-shadow: none; }
.landing-root .dns-guest-viewport { position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding-top: 0; }
.landing-root .dns-guest-viewport > .landing-body-full { height: auto; flex: 1 1 0; min-height: 0; }
.landing-root .landing-body-full.dns-landing-guest { padding-top: 0 !important; margin-top: 0; }
.landing-root .landing-body-full.dns-landing-guest .dns-main-content { padding-top: 0; }
.dns-guest-viewport > .dns-guest-brand { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: max(24px,env(safe-area-inset-left, 0px)); z-index: 3; display: inline-flex; align-items: center; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.dns-guest-brand .dns-logo { width: 228px; height: 44px; max-width: 100%; }
.dns-guest-viewport > .dns-guest-actions { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: max(24px,env(safe-area-inset-right, 0px)); z-index: 3; display: inline-flex; align-items: center; height: 44px; gap: 8px; }
.dns-guest-actions .dns-guest-theme { position: static; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; border: 1px solid rgba(148,174,223,.2); color: var(--dns-text-strong); }
.dns-guest-actions .dns-guest-signin { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 8px; padding: 9px 18px; border-radius: 12px; font-weight: 700; font-size: .88rem; cursor: pointer; border: 1px solid rgba(176,211,255,.4); color: #fff; background: linear-gradient(125deg,#3476dd,#525fe0); box-shadow: 0 4px 16px rgba(44,98,199,.15); transition: filter .18s; white-space: nowrap; }
.dns-guest-actions .dns-guest-signin:hover { filter: brightness(1.08); }
.dns-guest-actions button:focus-visible, .dns-guest-brand:focus-visible { outline: 2px solid #6da9ff; outline-offset: 3px; }
@media (min-width: 761px) {
.dns-guest-actions { gap: 8px; }
.dns-guest-actions .dns-guest-theme { width: 36px; height: 36px; padding: 6px; border-radius: 9px; font-size: .9rem; }
.dns-guest-actions .dns-guest-signin { box-sizing: border-box; min-height: 36px; padding: 6px 14px; gap: 6px; border-radius: 9px; font-size: .8rem; line-height: 1.25; }
.dns-guest-actions .dns-guest-signin svg { width: 14px; height: 14px; }
.dns-guest-actions .dns-guest-theme svg { width: 16px; height: 16px; }
}
@media (max-width: 760px) {
.dns-guest-viewport > .dns-guest-brand { left: max(16px,env(safe-area-inset-left, 0px)); max-width: calc(100% - 164px); }
.dns-guest-brand .dns-logo { width: 160px; height: 32px; }
.dns-guest-viewport > .dns-guest-actions { right: max(16px,env(safe-area-inset-right, 0px)); }
.dns-guest-actions .dns-guest-signin { padding: 8px 12px; font-size: .82rem; }
.dns-guest-actions .dns-guest-signin svg { display: none; }
}
/* Scope limitation decision card (chat) */
.dnsc-limitation { font-size: .8rem; line-height: 1.5; }
.dnsc-limitation-head { font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.dnsc-limitation ul { margin: 6px 0 8px 16px; padding: 0; }
.dnsc-limitation li { margin: 3px 0; }
.dnsc-limitation-q { font-weight: 600; margin: 0 0 8px; }
/* Conversational planning (chat) */
.dnsc-ask { font-size: .8rem; line-height: 1.5; }
.dnsc-ask-q { font-weight: 600; margin-bottom: 6px; }
.dnsc-ask-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dnsc-ask-opt { border: 1px solid var(--dns-border, #334155); background: transparent; color: inherit; border-radius: 999px; padding: 4px 10px; font-size: .75rem; cursor: pointer; }
.dnsc-ask-opt:hover { border-color: var(--dns-accent, #6366f1); }
.dnsc-ask-opt.selected { background: var(--dns-accent, #6366f1); color: #fff; border-color: transparent; }
.dnsc-ask-hint { opacity: .7; font-size: .72rem; margin-top: 6px; }
.dns-auth-divider::before, .dns-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--dns-border); }
.dns-auth-form { display: grid; gap: 12px; }
.dns-auth-form label { display: grid; gap: 6px; font-size: .82rem; color: var(--dns-text-muted); font-weight: 600; }
.dns-auth-form input {
padding: 10px 12px; border-radius: 9px; font-size: .95rem;
background: var(--dns-bg-inset); color: var(--dns-text-strong); border: 1px solid var(--dns-border-strong);
}
.dns-auth-form input:focus { outline: none; border-color: var(--dns-accent); box-shadow: 0 0 0 3px rgba(124,58,237,.25); }
.dns-auth-submit { width: 100%; padding: 11px; font-weight: 700; border-radius: 10px; }
.dns-auth-dev { display: grid; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--dns-border); }
.dns-auth-captcha { display: grid; gap: 8px; justify-items: center; padding: 10px; border: 1px solid var(--dns-border); border-radius: 10px; background: rgba(148,163,184,.06); }
.dns-auth-captcha small { color: var(--dns-text-muted); font-size: 12px; text-align: center; }
.dns-auth-dev-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px; border-radius: 10px; cursor: pointer; font-weight: 700;
background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1207; border: 0;
}
.dns-auth-dev-btn:hover:not(:disabled) { filter: brightness(1.06); }
.dns-auth-dev small { color: var(--dns-text-subtle); font-size: .75rem; text-align: center; }
.dns-auth-error { padding: 10px 12px; border-radius: 9px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; font-size: .88rem; }
.dns-auth-info { padding: 10px 12px; border-radius: 9px; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #86efac; font-size: .88rem; }
.dns-auth-loading { color: var(--dns-text-muted); text-align: center; padding: 24px 0; }
.dns-auth-foot { margin: 0; text-align: center; color: var(--dns-text-subtle); font-size: .85rem; }
.dns-auth-foot a { color: var(--dns-accent); font-weight: 600; text-decoration: none; margin-left: 4px; }
@media (max-width: 900px) {
.dns-auth-page { grid-template-columns: 1fr; }
.dns-auth-hero { padding: 40px 28px 0; }
.dns-auth-card { margin: 20px; }
}
.dns-auth-page { position: relative; }
.dns-auth-brand { display: flex; align-items: center; margin-bottom: 6px; }
.dns-auth-hero .landing-hero-badge { align-self: flex-start; margin-bottom: 4px; }
/* Light theme: same soft, premium palette as the landing page */
html.light-theme .dns-auth-page {
background:
radial-gradient(1100px 560px at -10% -10%, rgba(99,102,241,.16), transparent 60%),
radial-gradient(900px 520px at 110% 110%, rgba(6,182,212,.14), transparent 60%),
linear-gradient(180deg, #f8fafc, #eef2ff 60%, #f8fafc);
}
html.light-theme .dns-auth-card {
background: rgba(255,255,255,.92);
border-color: rgba(99,102,241,.16);
box-shadow: 0 30px 70px -30px rgba(79,70,229,.35), 0 1px 0 rgba(255,255,255,.8) inset;
backdrop-filter: blur(10px);
}
html.light-theme .dns-auth-tabs { background: #eef2ff; }
html.light-theme .dns-auth-tabs button.active { background: #fff; color: #1e1b4b; box-shadow: 0 2px 8px -4px rgba(79,70,229,.35); }
html.light-theme .dns-auth-provider { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .dns-auth-provider:hover:not(:disabled) { background: #f5f7ff; border-color: #6366f1; }
html.light-theme .dns-auth-form input { background: #fff; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .dns-auth-form input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
html.light-theme .dns-auth-error { color: #b91c1c; background: rgba(239,68,68,.08); }
html.light-theme .dns-auth-info { color: #15803d; background: rgba(34,197,94,.10); }
html.light-theme .dns-auth-hero h1 {
background: linear-gradient(135deg, #1e1b4b, #4338ca 55%, #0e7490);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* -- Auth redesign additions ----------------------------------------------- */
.dns-auth-page { overflow: hidden; }
.dns-auth-orb {
position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .55; z-index: 0;
animation: authOrbFloat 14s ease-in-out infinite alternate;
}
.dns-auth-orb-a { width: 520px; height: 520px; left: -160px; top: -140px; background: radial-gradient(circle, rgba(124,58,237,.6), transparent 70%); }
.dns-auth-orb-b { width: 460px; height: 460px; right: -140px; bottom: -160px; background: radial-gradient(circle, rgba(56,189,248,.5), transparent 70%); animation-delay: -6s; }
@keyframes authOrbFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(30px, 24px) scale(1.08); } }
.dns-auth-hero, .dns-auth-side { position: relative; z-index: 1; }
.dns-auth-hero h1 { text-wrap: balance; }
.dns-auth-side { display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 32px; gap: 12px; }
.dns-auth-side .dns-auth-card { margin: 0; width: 100%; }
.dns-auth-legal { margin: 0; text-align: center; font-size: .7rem; color: var(--dns-text-subtle); }
.dns-auth-points { gap: 14px; margin-top: 12px; }
.dns-auth-points li { display: flex; align-items: flex-start; gap: 12px; }
.dns-auth-points li::before { content: none; }
.dns-auth-point-ico {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
background: rgba(99,102,241,.16); color: #a5b4fc; border: 1px solid rgba(99,102,241,.25);
}
.dns-auth-points li div { display: flex; flex-direction: column; gap: 2px; }
.dns-auth-points li b { font-size: .9rem; color: var(--dns-text-strong); font-weight: 700; }
.dns-auth-points li span:not(.dns-auth-point-ico) { font-size: .8rem; color: var(--dns-text-muted); line-height: 1.5; }
.dns-auth-trust { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dns-text-subtle); }
.dns-auth-trust i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.dns-auth-card { gap: 16px; padding: 28px 30px; border-radius: 20px; }
.dns-auth-head h2 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.dns-auth-head p { margin: 4px 0 0; font-size: .82rem; color: var(--dns-text-subtle); }
.dns-auth-providers.two-up { grid-template-columns: 1fr 1fr; }
.dns-auth-provider { padding: 10px 12px; gap: 9px; font-size: .88rem; }
.dns-auth-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.dns-auth-label-row small { font-weight: 500; color: var(--dns-text-subtle); font-size: .7rem; }
.dns-auth-forgot { font-weight: 500; font-size: .72rem; color: var(--dns-accent, #818cf8); text-decoration: none; }
.dns-auth-forgot:hover { text-decoration: underline; }
.dns-auth-pw { position: relative; display: block; }
.dns-auth-pw input { width: 100%; padding-right: 40px; }
.dns-auth-pw-toggle {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; cursor: pointer;
color: var(--dns-text-subtle); display: grid; place-items: center;
}
.dns-auth-pw-toggle:hover { color: var(--dns-text-strong); background: var(--dns-bg-elevated); }
.dns-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dns-auth-submit svg { transition: transform .15s; }
.dns-auth-submit:hover:not(:disabled) svg { transform: translateX(3px); }
.dns-auth-error { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.dns-auth-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.dns-auth-link:disabled { opacity: .6; cursor: default; }
.dns-auth-error svg { flex-shrink: 0; margin-top: 2px; }
.dns-auth-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dns-auth-spinner {
width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
border: 2px solid rgba(148,163,184,.35); border-top-color: var(--dns-accent); animation: spin .8s linear infinite;
}
.dns-auth-spinner.sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Toast � fixed top-right, visible without scrolling */
.dns-auth-toast {
position: fixed; top: 18px; right: 78px; z-index: 1300;
display: flex; align-items: flex-start; gap: 12px; width: min(380px, calc(100vw - 100px));
padding: 12px 14px; border-radius: 14px;
background: var(--dns-bg-elevated); border: 1px solid var(--dns-border-strong);
box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
animation: toastIn .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.dns-auth-toast-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.dns-auth-toast.success .dns-auth-toast-ico { background: rgba(34,197,94,.16); color: #4ade80; }
.dns-auth-toast.error .dns-auth-toast-ico { background: rgba(239,68,68,.16); color: #f87171; }
.dns-auth-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dns-auth-toast-body b { font-size: .86rem; color: var(--dns-text-strong); }
.dns-auth-toast-body span { font-size: .78rem; color: var(--dns-text-muted); line-height: 1.45; }
.dns-auth-toast-close { border: 0; background: transparent; color: var(--dns-text-subtle); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.dns-auth-toast-close:hover { color: var(--dns-text-strong); }
html.light-theme .dns-auth-orb-a { background: radial-gradient(circle, rgba(99,102,241,.35), transparent 70%); }
html.light-theme .dns-auth-orb-b { background: radial-gradient(circle, rgba(6,182,212,.3), transparent 70%); }
html.light-theme .dns-auth-point-ico { background: #e0e7ff; color: #4f46e5; border-color: #c7d2fe; }
html.light-theme .dns-auth-toast { background: #fff; border-color: rgba(99,102,241,.2); box-shadow: 0 24px 60px -24px rgba(79,70,229,.4); }
@media (max-width: 900px) {
.dns-auth-side { padding: 16px 20px 32px; }
.dns-auth-trust { display: none; }
}
/* Signed-in user chip (IDE sidebar footer) */
.dns-user-chip {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border-radius: 10px; background: var(--dns-bg-elevated); border: 1px solid var(--dns-border);
}
.dns-user-avatar {
width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
background: linear-gradient(135deg, var(--dns-accent), #3b82f6); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.dns-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dns-user-name { font-size: .82rem; font-weight: 600; color: var(--dns-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-user-email { font-size: .7rem; color: var(--dns-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-user-signout { border: 0; background: transparent; color: var(--dns-text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.dns-user-signout:hover { color: #fca5a5; background: rgba(239,68,68,.12); }
/* ?? Viewport fit: keep the original gradient/glow look, size to the window ?? */
/* Sign-in: bounded to the viewport, smaller card with breathing room */
.dns-auth-page {
height: 100dvh; min-height: 0; overflow: hidden;
grid-template-columns: minmax(0, 1.1fr) minmax(340px, 420px);
align-items: stretch;
}
.dns-auth-hero {
min-height: 0; overflow: hidden;
padding: clamp(24px, 6vh, 64px) clamp(28px, 5vw, 72px);
gap: clamp(8px, 1.6vh, 16px);
max-width: 680px;
}
.dns-auth-hero h1 { font-size: clamp(1.6rem, 1.5vw + 1.4vh, 2.6rem); }
.dns-auth-hero p { font-size: clamp(.92rem, .7rem + .5vh, 1.02rem); }
.dns-auth-points { gap: clamp(6px, 1.2vh, 12px); margin-top: clamp(4px, 1vh, 10px); }
.dns-auth-side {
min-height: 0; overflow-y: auto;
padding: clamp(14px, 2.5vh, 24px) clamp(16px, 2vw, 28px);
gap: clamp(6px, 1.2vh, 10px);
justify-content: safe center;
}
.dns-auth-side .dns-auth-card {
margin: 0 auto; width: 100%; max-width: 380px; flex: 0 0 auto;
gap: clamp(10px, 1.5vh, 14px);
padding: clamp(18px, 2.8vh, 24px) clamp(18px, 2.2vw, 26px);
}
.dns-auth-side .dns-auth-legal { max-width: 380px; margin: 0 auto; }
.dns-auth-tabs button { padding: 7px 10px; font-size: .84rem; }
.dns-auth-form { gap: 10px; }
.dns-auth-form input { padding: 9px 12px; }
.dns-auth-submit { padding: 10px; }
.dns-auth-page .theme-toggle-fixed { position: absolute; top: 16px; left: 20px; right: auto; z-index: 5; }
@media (max-height: 760px) {
.dns-auth-points li span:not(.dns-auth-point-ico) { display: none; }
.dns-auth-trust { display: none; }
.dns-auth-side .dns-auth-card { gap: 8px; }
.dns-auth-form { gap: 8px; }
.dns-auth-dev { padding-top: 4px; gap: 4px; }
}
@media (max-height: 640px) {
.dns-auth-head p { display: none; }
.dns-auth-side .dns-auth-card { gap: 6px; }
.dns-auth-form { gap: 6px; }
}
@media (max-width: 900px) {
.dns-auth-page { height: 100dvh; min-height: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); }
.dns-auth-page-center { grid-template-rows: minmax(0, 1fr); }
.dns-auth-hero { padding: 12px 72px 12px 20px; max-width: none; overflow: hidden; justify-content: center; }
.dns-auth-hero > :not(.dns-auth-brand) { display: none; }
.dns-auth-brand { margin: 0; }
.dns-auth-brand .dns-logo { height: 36px; max-width: 190px; }
.dns-auth-page .theme-toggle-fixed { top: 12px; right: 16px; left: auto; }
.dns-auth-side { overflow-y: auto; padding: 16px 20px; }
}
/* Landing: original gradient headline, scaled to the screen */
.landing-viewport { height: 100dvh; min-height: 100dvh; }
.landing-ai-panel {
overflow: visible;
justify-content: safe center;
padding: clamp(16px, 4vh, 40px) clamp(20px, 4vw, 48px) clamp(12px, 2.5vh, 24px);
}
.landing-hero { max-width: 720px; margin-bottom: clamp(18px, 3.2vh, 30px); }
.landing-hero-badge { margin-bottom: clamp(10px, 2vh, 20px); }
.landing-hero h1 {
font-size: clamp(2rem, 1.6vw + 2.2vh, 3.1rem);
line-height: 1.18; margin-bottom: clamp(10px, 1.6vh, 14px);
}
.landing-hero p { font-size: clamp(.95rem, .8rem + .4vh, 1.08rem); }
.landing-chat-card { max-width: 720px; }
.dns-recent-strip { margin-top: clamp(16px, 2.8vh, 26px); max-width: 720px; }
.dns-prefs-bar { margin-top: clamp(12px, 2vh, 18px); max-width: 720px; }
.landing-chat-name-input { min-width: 0; }
@media (max-height: 760px) {
.landing-hero h1 { font-size: clamp(1.8rem, 1.4vw + 2vh, 2.5rem); }
.landing-hero-badge { margin-bottom: 8px; }
.landing-chat-textarea { min-height: 72px; }
}
/* ── Mobile shell (Bolt-style): top bar + slide-in drawer ─────────────────── */
.dns-mobile-bar, .dns-mobile-scrim, .dns-mobile-close { display: none; }
@media (max-width: 760px) {
.landing-root .landing-viewport { height: auto; min-height: 100dvh; overflow: visible; }
.landing-root .landing-body-full { flex-direction: column; height: auto; overflow: visible; padding-top: 56px; }
.landing-root .dns-mobile-bar {
display: flex; align-items: center; gap: 10px;
position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 60;
padding: 0 12px 0 6px;
background: color-mix(in srgb, var(--dns-bg, #0b0f1a) 82%, transparent);
backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--dns-border, rgba(255,255,255,.08));
}
.dns-mobile-menu, .dns-mobile-close {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent;
color: var(--dns-text, #e5e7eb); cursor: pointer;
}
.dns-mobile-menu:active, .dns-mobile-close:active { background: rgba(255,255,255,.08); }
.dns-mobile-logo { flex: 1; display: flex; align-items: center; min-width: 0; }
.dns-mobile-logo .dns-logo { height: 30px; max-width: 150px; }
.dns-mobile-bar-right { display: flex; align-items: center; gap: 8px; }
.dns-mobile-avatar { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.dns-mobile-signin {
font-size: .8rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; text-decoration: none;
color: #fff; background: linear-gradient(135deg, var(--dns-accent, #7c3aed), #2563eb);
}
.landing-root .theme-toggle-fixed { top: 64px; right: 12px; width: 36px; height: 36px; }
/* Sidebar becomes a drawer */
.landing-root .dns-sidebar {
position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
width: min(84vw, 320px); height: 100dvh; padding: 14px 14px 18px;
border-right: 1px solid var(--dns-border); border-bottom: 0;
transform: translateX(-104%); transition: transform .32s cubic-bezier(.32,.72,0,1);
box-shadow: 0 0 0 rgba(0,0,0,0); overflow-y: auto; overscroll-behavior: contain;
}
.landing-root .landing-body-full.nav-open .dns-sidebar { transform: translateX(0); box-shadow: 24px 0 60px rgba(0,0,0,.45); }
.landing-root .dns-sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px; }
.landing-root .dns-sidebar-logo { height: 34px; max-width: 170px; }
.landing-root .dns-side-item { padding: 12px 12px; font-size: .92rem; border-radius: 12px; }
.landing-root .dns-side-ico svg { width: 20px; height: 20px; }
.landing-root .dns-mobile-scrim {
display: block; position: fixed; inset: 0; z-index: 70;
background: rgba(2,6,23,.55); backdrop-filter: blur(2px);
opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.landing-root .landing-body-full.nav-open .dns-mobile-scrim { opacity: 1; pointer-events: auto; }
/* Hero + composer: immersive Bolt-style stage (rounded gradient panel under the top bar) */
.landing-root .landing-body-full { display: flex; min-height: 100dvh; }
.landing-root .dns-sidebar { display: flex; }
.landing-root .dns-main-content { overflow: visible; flex: 1 1 auto; min-height: 0; background: var(--dns-bg-app); }
.landing-root .landing-ai-panel {
position: relative; isolation: isolate; overflow: hidden;
min-height: calc(100dvh - 56px - 20px); margin: 8px 8px 12px; padding: 44px 16px 36px; border-radius: 22px;
justify-content: flex-start; align-items: center;
background:
radial-gradient(90% 60% at 50% 0%, rgba(96,165,250,.55), transparent 65%),
radial-gradient(70% 50% at 50% 100%, rgba(37,99,235,.55), transparent 70%),
linear-gradient(180deg, #0b2a6b 0%, #0a1f52 45%, #081536 100%);
box-shadow: 0 30px 80px -30px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
.landing-root .landing-ai-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px); background-size: 22px 22px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%); }
.landing-root .landing-ai-panel::after { content: ""; position: absolute; left: 50%; top: -120px; width: 320px; height: 320px; transform: translateX(-50%); z-index: -1; pointer-events: none;
background: radial-gradient(circle, rgba(147,197,253,.55), transparent 65%); filter: blur(30px); animation: dnsMobileGlow 7s ease-in-out infinite; }
@keyframes dnsMobileGlow { 0%,100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } }
.landing-hero { text-align: center; margin-bottom: 18px; max-width: 100%; }
.landing-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #eaf2ff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); margin-bottom: clamp(36px, 10vh, 84px); }
.landing-hero h1 { font-size: clamp(2rem, 9.5vw, 2.7rem); letter-spacing: -.03em; line-height: 1.08; color: #fff; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.landing-hero p { font-size: 1rem; color: rgba(226,236,255,.85); max-width: 32ch; margin: 0 auto; }
.landing-chat-card { width: 100%; border-radius: 22px; padding: 12px 12px 10px 14px; background: rgba(8,12,24,.92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.landing-chat-textarea { min-height: 88px; font-size: 16px; color: #f1f5f9; }
.landing-chat-textarea::placeholder { color: rgba(203,213,225,.6); }
.landing-chat-footer { flex-wrap: wrap; gap: 8px; align-items: center; }
.landing-chat-name-input { flex-basis: 100%; order: -1; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.landing-chat-actions { margin-left: auto; gap: 8px; }
.btn-plan { padding: 10px 14px; font-size: .88rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #e2e8f0; }
.landing-chat-actions .btn-build { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 10px 24px -8px rgba(59,130,246,.8); }
.landing-chat-actions .btn-build span { display: none; }
.landing-chat-actions .btn-build .dns-btn-ico { width: 18px; height: 18px; }
.btn-upload.dns-tool-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.landing-prompt-tool-note { display: none; }
.dns-recent-strip { width: 100%; margin-top: 22px; }
.dns-recent-strip-head { color: #eaf2ff; }
.dns-recent-viewall { color: #93c5fd; }
.dns-recent-cards { grid-template-columns: 1fr; }
.dns-recent-card { background: rgba(8,12,24,.7); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dns-prefs-bar { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 600px) {
.landing-chat-footer { flex-wrap: wrap; }
.landing-chat-name-input { flex-basis: 100%; }
.landing-chat-actions { margin-left: auto; }
}
@media (min-width: 761px) {
.dns-mobile-bar, .dns-mobile-scrim, .dns-mobile-close { display: none !important; }
}
html.light-theme .dns-mobile-bar { background: rgba(240,244,248,.85); border-bottom-color: rgba(15,23,42,.08); }
html.light-theme .dns-mobile-menu, html.light-theme .dns-mobile-close { color: #0f172a; }
html.light-theme .dns-mobile-menu:active, html.light-theme .dns-mobile-close:active { background: rgba(15,23,42,.06); }
html.light-theme .dns-mobile-scrim { background: rgba(15,23,42,.35); }
@media (max-width: 760px) {
html.light-theme .landing-root .landing-ai-panel { background: radial-gradient(90% 60% at 50% 0%, rgba(147,197,253,.7), transparent 65%), radial-gradient(70% 50% at 50% 100%, rgba(59,130,246,.6), transparent 70%), linear-gradient(180deg, #1d4ed8 0%, #1e40af 45%, #1e3a8a 100%); }
html.light-theme .landing-root .landing-ai-panel::after { display: none; }
html.light-theme .landing-root .landing-chat-card { background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.8); box-shadow: 0 30px 70px -24px rgba(30,64,175,.55); }
html.light-theme .landing-root .landing-chat-textarea { color: #0f172a; }
html.light-theme .landing-root .landing-chat-textarea::placeholder { color: #94a3b8; }
html.light-theme .landing-root .landing-chat-name-input { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .landing-root .btn-plan { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
html.light-theme .landing-root .btn-upload.dns-tool-icon { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
html.light-theme .landing-root .dns-recent-card { background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.8); color: #0f172a; }
}
/* ?? Landing: compact recent projects with page margin ?? */
.landing-ai-panel { padding-left: clamp(24px, 5vw, 64px); padding-right: clamp(24px, 5vw, 64px); }
.dns-recent-strip { max-width: 720px; margin-top: clamp(14px, 2.4vh, 22px); padding: 0 4px; }
.dns-recent-strip-head { margin-bottom: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dns-text-subtle); }
.dns-recent-viewall { font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.dns-recent-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dns-recent-card { padding: 9px 11px; gap: 10px; border-radius: 10px; align-items: center; }
.dns-recent-thumb { width: 32px; height: 32px; border-radius: 9px; font-size: .68rem; }
.dns-recent-info { display: flex; flex-direction: column; gap: 4px; }
.dns-recent-name { font-size: .82rem; }
.dns-recent-meta { font-size: .68rem; margin-top: 0; gap: 10px; row-gap: 3px; }
.dns-recent-fact { display: inline-flex; align-items: center; gap: 4px; color: var(--dns-text-muted); }
.dns-recent-fact svg { flex-shrink: 0; opacity: .7; }
.dns-recent-fact-rel { display: none; }
.dns-recent-card .dns-card-delete-inline { width: 24px; height: 24px; }
.dns-recent-arrow { display: none; }
@media (max-width: 900px) { .dns-recent-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dns-recent-cards { grid-template-columns: 1fr; } }
@media (max-height: 700px) { .dns-recent-card { padding: 8px 11px; } }
/* ?? Landing: upload requirement / blueprint ?? */
.btn-upload {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
padding: 8px 12px; border-radius: 10px; font-size: .8rem; font-weight: 600; cursor: pointer;
background: rgba(255,255,255,.04); border: 1px dashed rgba(165,180,252,.4); color: #c7d2fe;
position: relative; overflow: hidden; transition: background .15s, border-color .15s, color .15s;
}
.btn-upload:hover { background: rgba(99,102,241,.14); border-color: #a5b4fc; color: #fff; }
.btn-upload .ai-attach-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.landing-attach-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; max-width: 100%; min-width: 0; }
.landing-attach-chip {
display: inline-flex; align-items: center; gap: 6px; max-width: min(240px, 100%); min-width: 0;
padding: 3px 6px 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600;
background: rgba(99,102,241,.12); border: 1px solid rgba(165,180,252,.3); color: #c7d2fe;
}
.landing-attach-chip.skipped { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.4); color: #fcd34d; }
.landing-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-attach-remove { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 2px; opacity: .7; }
.landing-attach-remove:hover { opacity: 1; }
@media (max-width: 600px) { .btn-upload span { display: none; } .btn-upload { padding: 8px 10px; } }
/* Icon-only composer tools (Upload / Improve / Speak / Live agent): compact circular buttons, label in the tooltip. */
.btn-upload.dns-tool-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; border-style: solid; border-color: rgba(165,180,252,.28); background: rgba(255,255,255,.035); }
.btn-upload.dns-tool-icon:hover:not(:disabled) { background: rgba(99,102,241,.18); border-color: #a5b4fc; transform: translateY(-1px); }
.btn-upload.dns-tool-icon:disabled { opacity: .45; cursor: not-allowed; }
.btn-upload.dns-tool-icon .dns-btn-ico { width: 16px; height: 16px; }
.btn-upload.dns-tool-icon .dns-tool-glyph { font-size: 15px; line-height: 1; }
.btn-upload.dns-tool-icon.busy .dns-tool-glyph { animation: dns-tour-bob 1s ease-in-out infinite; }
.dns-agent-btn.dns-tool-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; position: relative; }
.dns-agent-btn.dns-tool-icon .dns-agent-ico { width: 18px; height: 18px; }
.dns-agent-btn.dns-tool-icon .dns-agent-btn-lock { position: absolute; top: -6px; right: -8px; font-size: .55rem; padding: 1px 4px; }
.dns-agent-btn.dns-tool-icon.opening .dns-agent-ico { animation: dnsPulse 1s ease-in-out infinite; }
.dns-user-signout.dns-tour-replay { padding: 4px; font-size: inherit; color: var(--dns-text-muted); text-align: center; }
.dns-user-signout.dns-tour-replay:hover { color: #b7a6ff; text-decoration: none; }
html.light-theme .btn-upload.dns-tool-icon { background: #ffffff; border-color: #cbd5e1; color: #4f46e5; }
html.light-theme .btn-upload.dns-tool-icon:hover:not(:disabled) { background: #eef2ff; }
/* ?? Light theme: richer, airier landing & sign-in ?? */
html.light-theme .landing-ai-panel::after {
background:
radial-gradient(50% 55% at 20% 20%, rgba(124,92,255,.18) 0%, transparent 60%),
radial-gradient(45% 50% at 82% 12%, rgba(56,189,248,.16) 0%, transparent 60%),
radial-gradient(40% 45% at 55% 0%, rgba(251,146,60,.10) 0%, transparent 60%);
}
html.light-theme .landing-hero-badge { background: #fff; border-color: rgba(99,102,241,.28); color: #4338ca; box-shadow: 0 6px 18px -10px rgba(79,70,229,.5); }
html.light-theme .landing-hero p { color: #475569; }
html.light-theme .landing-chat-card {
background: rgba(255,255,255,.92); border-color: rgba(99,102,241,.16);
box-shadow: 0 24px 60px -30px rgba(79,70,229,.35), 0 1px 0 rgba(255,255,255,.9) inset;
backdrop-filter: blur(12px);
}
html.light-theme .landing-chat-card:focus-within { border-color: #6366f1; box-shadow: 0 24px 60px -28px rgba(79,70,229,.45), 0 0 0 3px rgba(99,102,241,.14); }
html.light-theme .landing-chat-name-input { background: #fff; border-color: #dfe5ef; }
html.light-theme .landing-chat-name-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
html.light-theme .btn-plan { background: #fff; border-color: #dfe5ef; color: #334155; }
html.light-theme .btn-plan:hover:not(:disabled) { background: #f5f7ff; border-color: #6366f1; color: #1e1b4b; }
html.light-theme .btn-upload { background: #fff; border-color: rgba(99,102,241,.4); color: #4f46e5; }
html.light-theme .btn-upload:hover { background: #eef2ff; border-color: #6366f1; color: #3730a3; }
html.light-theme .landing-attach-chip { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
html.light-theme .landing-attach-chip.skipped { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
html.light-theme .dns-recent-strip-head { color: #64748b; }
html.light-theme .dns-recent-viewall { color: #4f46e5; }
html.light-theme .dns-recent-card { background: rgba(255,255,255,.85); border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
html.light-theme .dns-recent-card:hover { background: #fff; border-color: #a5b4fc; box-shadow: 0 10px 24px -18px rgba(79,70,229,.45); }
html.light-theme .dns-recent-thumb { background: linear-gradient(135deg, #e0e7ff, #cffafe); border-color: #c7d2fe; color: #4f46e5; }
html.light-theme .dns-recent-name { color: #0f172a; }
html.light-theme .dns-recent-meta { color: #64748b; }
html.light-theme .dns-pref-chip { background: #fff; border-color: #e2e8f0; color: #475569; }
html.light-theme .dns-prefs-edit { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
html.light-theme .dns-sidebar { background: linear-gradient(180deg, #ffffff, #f6f8fc); border-right-color: #e2e8f0; }
html.light-theme .dns-side-item:hover { background: #eef2ff; color: #1e1b4b; }
html.light-theme .dns-side-item.active { background: #e0e7ff; color: #3730a3; }
html.light-theme .theme-toggle-fixed { background: #fff; border-color: #dfe5ef; color: #4338ca; box-shadow: 0 4px 14px -8px rgba(15,23,42,.3); }
/* Landing header: sign-in call to action */
.dns-signin-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; padding: 7px 16px 7px 8px; border-radius: 999px; overflow: hidden; }
.dns-signin-cta-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); flex: 0 0 auto; }
.dns-signin-cta-ico svg { width: 16px; height: 16px; }
.dns-signin-cta-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; gap: 2px; }
.dns-signin-cta-text b { font-size: .9rem; font-weight: 700; letter-spacing: .01em; }
.dns-signin-cta-text small { font-size: .64rem; font-weight: 600; opacity: .85; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.dns-signin-cta-spark { position: absolute; top: 4px; right: 10px; font-size: .62rem; opacity: .85; animation: dnsSparkTwinkle 2.4s ease-in-out infinite; }
@keyframes dnsSparkTwinkle { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.dns-signin-cta:hover .dns-signin-cta-ico { background: rgba(255,255,255,.28); }
html.light-theme .dns-signin-cta-ico { background: rgba(255,255,255,.3); }
@media (max-width: 720px) { .dns-signin-cta-text small { display: none; } .dns-signin-cta { padding: 6px 14px 6px 6px; } }
@media (prefers-reduced-motion: reduce) { .dns-signin-cta-spark { animation: none; } }
html.light-theme .dns-auth-side .dns-auth-card { border-color: rgba(99,102,241,.18); box-shadow: 0 30px 70px -34px rgba(79,70,229,.4), 0 1px 0 #fff inset; }
html.light-theme .dns-auth-points li b { color: #0f172a; }
html.light-theme .dns-auth-points li span:not(.dns-auth-point-ico) { color: #64748b; }
html.light-theme .dns-auth-hero p { color: #475569; }
html.light-theme .dns-auth-form label { color: #334155; }
html.light-theme .dns-auth-head p, html.light-theme .dns-auth-foot, html.light-theme .dns-auth-legal, html.light-theme .dns-auth-divider { color: #64748b; }
/* ???????????????????????????????????????????????????????????????????????????
Public pages: pricing / referral / billing / help / faq / legal
??????????????????????????????????????????????????????????????????????????? */
.pub-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--dnsc-chat-bg); color: var(--dns-text); }
.pub-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px 32px; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--dns-bg-app) 78%, transparent); border-bottom: 1px solid var(--dns-border); }
.pub-brand { display: flex; align-items: center; text-decoration: none; }
.pub-nav { display: flex; gap: 6px; flex: 1; }
.pub-nav-link { padding: 8px 12px; border-radius: 9px; color: var(--dns-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: .15s; }
.pub-nav-link:hover, .pub-nav-link.active { color: var(--dns-text-strong); background: var(--dnsc-card-strong); }
.pub-actions { display: flex; gap: 10px; }
.pub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: .15s; white-space: nowrap; }
.pub-btn:disabled { opacity: .55; cursor: not-allowed; }
.pub-btn-primary { background: linear-gradient(135deg, var(--dns-accent), var(--dns-accent-2)); color: #fff; box-shadow: 0 10px 24px -12px rgba(124,58,237,.7); }
.pub-btn-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.pub-btn-ghost { background: var(--dnsc-card); border-color: var(--dnsc-card-border); color: var(--dns-text); }
.pub-btn-ghost:hover:not(:disabled) { background: var(--dnsc-card-strong); }
.pub-btn-lg { padding: 12px 20px; font-size: 15px; width: 100%; }
.pub-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 48px 28px 80px; }
.pub-main.narrow { max-width: 860px; }
.pub-footer { border-top: 1px solid var(--dns-border); padding: 40px 32px 24px; background: var(--dns-bg-surface-2); }
.pub-footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.pub-footer-col { display: flex; flex-direction: column; gap: 8px; }
.pub-footer-col h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dns-text-subtle); }
.pub-footer-col a { color: var(--dns-text-muted); text-decoration: none; font-size: 14px; }
.pub-footer-col a:hover { color: var(--dns-text-strong); }
.pub-footer-tag { color: var(--dns-text-muted); font-size: 14px; max-width: 320px; margin: 8px 0 0; }
/* ── Footer social profiles (admin-configured) ── */
.pub-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pub-social-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--dns-border); color: var(--dns-text-muted); background: transparent; transition: color .15s, border-color .15s, transform .15s, background .15s; }
.pub-social-link:hover { color: var(--dns-text-strong); border-color: var(--dns-accent, #6366f1); background: color-mix(in srgb, var(--dns-accent, #6366f1) 10%, transparent); transform: translateY(-1px); }
.pub-footer-copy { max-width: 1180px; margin: 28px auto 0; font-size: 12px; color: var(--dns-text-subtle); }
/* ── Public shell: mobile layout (auto-switches below 820px) ───────────────────── */
.pub-burger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--dnsc-card-border); background: var(--dnsc-card); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.pub-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--dns-text-strong); transition: transform .25s ease, opacity .2s ease; }
.pub-menu-open .pub-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pub-menu-open .pub-burger span:nth-child(2) { opacity: 0; }
.pub-menu-open .pub-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.pub-drawer-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(5, 8, 20, .55); backdrop-filter: blur(3px); animation: pubFade .2s ease; }
.pub-drawer { position: fixed; z-index: 26; left: 10px; right: 10px; top: 72px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 20px; border: 1px solid var(--dns-border); background: color-mix(in srgb, var(--dns-bg-app) 92%, var(--dnsc-brand-2) 8%); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); animation: pubDrop .25s cubic-bezier(.2,.8,.2,1); }
.pub-drawer-link { display: flex; align-items: center; padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 600; color: var(--dns-text); text-decoration: none; }
.pub-drawer-link:active, .pub-drawer-link.active { background: var(--dnsc-card-strong); color: var(--dns-text-strong); }
.pub-drawer-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--dns-border); }
.pub-drawer .pub-btn-lg { margin-top: 8px; }
@keyframes pubFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pubDrop { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
.pub-header { gap: 12px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
.pub-header .dns-logo { height: 30px; max-width: 150px; }
.pub-nav { display: none; }
.pub-actions { display: none; }
.pub-burger { display: flex; }
.pub-main { padding: 28px 16px 56px; }
.pub-main h1 { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; line-height: 1.15; }
.pub-footer { padding: 28px 16px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.pub-footer-inner { grid-template-columns: 1fr 1fr; gap: 22px; }
.pub-footer-inner .pub-footer-col:first-child { grid-column: 1 / -1; }
.pub-footer-col a { padding: 4px 0; font-size: 15px; }
.pub-footer-copy { margin-top: 20px; text-align: center; }
.pub-btn { padding: 11px 16px; min-height: 44px; }
/* Content widgets commonly used inside public pages collapse to one column */
.pr-grid, .pr-plans, .pr-cards, .faq-grid, .help-grid { grid-template-columns: 1fr !important; }
.pr-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
.pub-footer-inner { grid-template-columns: 1fr; }
.pub-drawer { top: 66px; }
}
/* ── Studio / workspace on phones: mobile-first, bolt-style stacked shell ──────── */
@media (max-width: 600px) {
.dns-workspace-shell { height: 100dvh; }
.dns-workspace-toolbar { position: sticky; top: 0; z-index: 10; padding-top: max(6px, env(safe-area-inset-top)); overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; background: color-mix(in srgb, var(--dns-bg-app) 92%, transparent); backdrop-filter: blur(12px); }
.dns-workspace-toolbar::-webkit-scrollbar { display: none; }
#workspace-container { flex-direction: column; }
/* Preview/editor on top, the AI chat docked below (it is the primary interaction on a phone) */
.dns-right-panel { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: 0 0 46dvh; border-left: 0; border-top: 1px solid var(--dns-border); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 40px -24px rgba(0,0,0,.7); padding-bottom: env(safe-area-inset-bottom); }
.dns-explorer-panel, #divider-1, #divider-2 { display: none !important; }
.landing-chat-textarea { font-size: 16px; } /* prevents iOS zoom-on-focus */
.landing-hero h1 { background-size: 200% 200%; }
.dns-btn, .pub-btn, .rf-btn { min-height: 40px; }
}
@media (max-width: 600px) and (orientation: landscape) {
.dns-right-panel { flex-basis: 55dvh; }
}
@media (hover: none) and (pointer: coarse) {
.pub-nav-link, .pub-drawer-link, .dns-side-item { -webkit-tap-highlight-color: transparent; }
.pub-btn:hover, .pub-btn-primary:hover:not(:disabled) { transform: none; }
}
/* Hero */
.pub-hero { text-align: center; margin-bottom: 40px; }
.pub-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.35); color: var(--dnsc-brand-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.pub-hero h1 { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.1; margin: 18px 0 12px; color: var(--dns-text-strong); letter-spacing: -.02em; }
.pub-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--dnsc-brand-2), var(--dnsc-brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-hero p { color: var(--dns-text-muted); font-size: 15px; line-height: 1.5; max-width: 720px; margin: 0 auto; }
.pub-hero-hint { cursor: help; border-bottom: 1px dotted currentColor; white-space: nowrap; }
.pub-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 10px; }
.pub-hero-note { font-size: 13px !important; color: var(--dns-text-muted); }
.pub-hero-note code { font-size: 12px; }
.table-wrap { overflow-x: auto; }
.pub-welcome { margin: 0 auto 28px; max-width: 720px; padding: 14px 18px; border-radius: 14px; background: rgba(61,220,154,.10); border: 1px solid rgba(61,220,154,.35); color: var(--dns-text); font-size: 14px; display: flex; gap: 12px; align-items: center; }
.pub-welcome-offer { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(124,58,237,.18), rgba(56,189,248,.14)); border: 1px solid rgba(129,140,248,.4); }
.pub-welcome-offer code { padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.25); font-weight: 700; letter-spacing: .04em; }
.pub-welcome b { color: var(--dnsc-ok); }
/* Interval toggle */
.pr-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border); margin: 28px auto 0; }
.pr-toggle button { border: 0; background: transparent; color: var(--dns-text-muted); padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.pr-toggle button.on { background: var(--dns-bg-elevated); color: var(--dns-text-strong); box-shadow: var(--dnsc-shadow); }
/* Light theme: card and elevated surfaces are both white, so the selected period needs its own fill. */
html.light-theme .pr-toggle { background: #e8eeff; border-color: #cbd8f0; }
html.light-theme .pr-toggle button.on { background: #ffffff; color: #1e1b4b; box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 4px 12px -6px rgba(79,70,229,.35); border: 1px solid #c7d2fe; }
.pr-save-pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(61,220,154,.16); color: var(--dnsc-ok); font-weight: 700; }
/* Plan cards */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px 24px; margin-top: 44px; padding: 0 4px; align-items: stretch; }
.pr-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 30px 24px 26px; min-width: 0; border-radius: 20px; background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border); box-shadow: var(--dnsc-shadow); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
.pr-card > * { min-width: 0; }
.pr-card .pub-btn { white-space: normal; text-align: center; line-height: 1.3; min-height: 46px; margin-top: 4px; overflow-wrap: anywhere; }
.pr-card .pr-card-head p { overflow-wrap: anywhere; }
.pr-card:hover { transform: translateY(-3px); border-color: var(--dns-border-strong); }
.pr-card.selected { border-color: var(--dnsc-brand); box-shadow: 0 0 0 2px var(--dnsc-ring), var(--dnsc-shadow-lg); background: var(--dnsc-card-strong); }
.pr-card.popular { background: linear-gradient(180deg, rgba(124,58,237,.16), var(--dnsc-card) 45%); }
.pr-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(135deg, var(--dns-accent), var(--dns-accent-2)); color: #fff; box-shadow: 0 6px 16px -8px rgba(124,58,237,.9); white-space: nowrap; }
.pr-badge.soft { background: var(--dns-bg-elevated); color: var(--dnsc-brand-2); border: 1px solid var(--dnsc-card-border); }
.pr-card-head h3 { margin: 0; font-size: 20px; color: var(--dns-text-strong); }
.pr-card-head p { margin: 4px 0 0; color: var(--dns-text-muted); font-size: 13px; }
.pr-price { display: flex; align-items: baseline; gap: 6px; }
.pr-price .amt { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--dns-text-strong); }
.pr-price .per { color: var(--dns-text-subtle); font-size: 14px; }
.pr-price-sub { font-size: 12px; color: var(--dns-text-subtle); min-height: 16px; }
.pr-price-sub s { opacity: .7; margin-right: 6px; }
.pr-credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 12px 14px; border-radius: 12px; background: var(--dns-bg-inset); border: 1px solid var(--dns-border); }
.pr-credits > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; min-width: 0; }
.pr-credits b { font-size: 18px; color: var(--dns-text-strong); }
.pr-credits span { font-size: 12px; color: var(--dns-text-subtle); }
.pr-save { font-size: 12px; color: var(--dnsc-ok); font-weight: 600; }
.pr-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pr-features li { display: flex; gap: 10px; font-size: 13.5px; color: var(--dns-text); line-height: 1.4; }
.pr-features li::before { content: "\2713"; color: var(--dnsc-ok); font-weight: 800; flex: none; }
.pr-current { font-size: 12px; text-align: center; color: var(--dnsc-ok); font-weight: 600; }
.pr-legend { margin: 22px auto 0; max-width: 900px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 12.5px; color: var(--dns-text-subtle); }
.pr-legend span::before { content: "\2022"; margin-right: 6px; color: var(--dnsc-brand-2); }
.pr-tax-note { margin: 10px auto 0; max-width: 760px; text-align: center; font-size: 12.5px; color: var(--dns-text-subtle); line-height: 1.5; }
/* ── Nady spotlight ─────────────────────────────────────────────────────────── */
.pr-nady { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 36px; padding: 24px 28px; border-radius: 22px;
border: 1px solid rgba(167,139,250,.35); color: #f5f3ff;
background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(124,58,237,.35), transparent 60%), radial-gradient(ellipse 50% 100% at 100% 50%, rgba(6,182,212,.18), transparent 60%), linear-gradient(135deg, #0f1026, #141b3a 60%, #0d1324); box-shadow: 0 30px 80px -40px rgba(124,58,237,.6); }
.pr-nady::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 60%, rgba(167,139,250,.14) 70%, transparent 80%); animation: prNadySweep 9s linear infinite; pointer-events: none; }
@keyframes prNadySweep { to { transform: rotate(1turn); } }
.pr-nady-orb { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.4), transparent 42%), linear-gradient(135deg, #818cf8, #22d3ee); box-shadow: 0 18px 50px rgba(129,140,248,.55), inset 0 1px 0 rgba(255,255,255,.3); animation: dnsOrbBreath 4s ease-in-out infinite; }
.pr-nady-orb strong { position: relative; z-index: 2; font-size: 2rem; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.pr-nady-orb span { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(165,180,252,.6); animation: bpxNadyRing 2.4s ease-out infinite; }
.pr-nady-orb span:nth-child(2) { animation-delay: 1.2s; }
.pr-nady-copy { position: relative; z-index: 1; min-width: 0; }
.pr-nady-kicker { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c4b5fd; background: rgba(139,92,246,.18); border: 1px solid rgba(167,139,250,.35); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.pr-nady h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.pr-nady p { margin: 0 0 10px; color: #c7d2fe; font-size: .95rem; line-height: 1.55; max-width: 62ch; }
.pr-nady-points { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: #e0e7ff; }
.pr-nady-points li::before { content: "✓"; color: #5eead4; font-weight: 800; margin-right: 6px; }
.pr-nady-cta { position: relative; z-index: 1; white-space: nowrap; }
@media (max-width: 820px) { .pr-nady { grid-template-columns: auto minmax(0, 1fr); } .pr-nady-cta { grid-column: 1 / -1; justify-self: stretch; } }
@media (max-width: 560px) { .pr-nady { grid-template-columns: 1fr; text-align: center; padding: 22px 18px; } .pr-nady-orb { margin: 0 auto; } .pr-nady-points { justify-content: center; } .pr-nady p { margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .pr-nady::before, .pr-nady-orb, .pr-nady-orb span { animation: none; } }
html.light-theme .pr-nady { background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(124,58,237,.14), transparent 60%), linear-gradient(135deg, #f5f3ff, #eef2ff 60%, #e0f2fe); border-color: rgba(99,102,241,.3); color: #1e1b4b; box-shadow: 0 30px 70px -40px rgba(79,70,229,.45); }
html.light-theme .pr-nady h3 { color: #1e1b4b; }
html.light-theme .pr-nady p { color: #4338ca; }
html.light-theme .pr-nady-points { color: #312e81; }
html.light-theme .pr-nady-points li::before { color: #0d9488; }
html.light-theme .pr-nady-kicker { color: #4f46e5; background: #fff; border-color: #c7d2fe; }
/* Checkout panel */
.pr-checkout { margin: 36px auto 0; max-width: 760px; padding: 24px; border-radius: 20px; background: var(--dns-bg-surface); border: 1px solid var(--dns-border); box-shadow: var(--dnsc-shadow-lg); display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
/* ── Promotions: campaign banners, welcome offer, redeem box ─────────────────── */
.pr-campaigns { display: grid; gap: 12px; max-width: 980px; margin: 0 auto 28px; }
.pr-campaign { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--dnsc-brand-2) 40%, var(--dns-border)); background: linear-gradient(120deg, color-mix(in srgb, var(--dnsc-brand-2) 14%, var(--dns-bg-surface)), var(--dns-bg-surface) 70%); box-shadow: var(--dnsc-shadow-lg); animation: pr-campaign-in .5s ease both; }
.pr-campaign.applied { border-color: #22c55e; }
@keyframes pr-campaign-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr-campaign-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dnsc-brand-2); }
.pr-campaign h4 { margin: 4px 0 2px; font-size: 18px; color: var(--dns-text-strong); }
.pr-campaign p { margin: 0; color: var(--dns-text-muted); font-size: 14px; }
.pr-campaign-ends { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #dc2626; }
.pr-campaign-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.pr-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .12em; font-size: 15px; padding: 6px 12px; border-radius: 10px; background: var(--dns-bg-elevated, rgba(0,0,0,.05)); border: 1px dashed var(--dns-border); color: var(--dns-text-strong); }
.pr-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(34,197,94,.14), transparent); border: 1px solid rgba(34,197,94,.45); font-size: 14px; color: var(--dns-text); }
.pr-redeem { margin: 24px auto 0; max-width: 760px; padding: 22px 24px; border-radius: 20px; background: var(--dns-bg-surface); border: 1px dashed color-mix(in srgb, var(--dnsc-brand-2) 55%, var(--dns-border)); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.pr-redeem h3 { margin: 0 0 4px; font-size: 17px; color: var(--dns-text-strong); }
.pr-redeem .sub { margin: 0; color: var(--dns-text-muted); font-size: 13px; }
.pr-input-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 720px) { .pr-campaign { flex-direction: column; align-items: stretch; } .pr-campaign-cta { align-items: stretch; } .pr-redeem { grid-template-columns: 1fr; } .pr-offer { flex-direction: column; align-items: stretch; } }
.pr-checkout h3 { margin: 0 0 4px; font-size: 18px; color: var(--dns-text-strong); }
.pr-checkout .sub { color: var(--dns-text-muted); font-size: 13px; margin: 0 0 14px; }
.pr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pr-field label { font-size: 12px; font-weight: 600; color: var(--dns-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.pr-input-row { display: flex; gap: 8px; }
.pr-input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--dns-border-strong); background: var(--dns-bg-inset); color: var(--dns-text); font-size: 14px; outline: none; }
.pr-input:focus { border-color: var(--dnsc-brand); box-shadow: 0 0 0 3px var(--dnsc-ring); }
.pr-hint { font-size: 12px; color: var(--dns-text-subtle); }
.pr-hint.ok { color: var(--dnsc-ok); }
.pr-hint.err { color: var(--dnsc-err); }
.pr-summary { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: var(--dns-bg-inset); border: 1px solid var(--dns-border); font-size: 14px; }
.pr-summary .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; color: var(--dns-text-muted); }
.pr-summary .row > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pr-summary .row > span:last-child { flex: 0 0 auto; white-space: nowrap; }
.pr-checkout .pub-btn-lg { white-space: normal; text-align: center; line-height: 1.3; overflow-wrap: anywhere; }
.pr-checkout > div { min-width: 0; }
.pr-checkout h3 { overflow-wrap: anywhere; }
.pr-summary .row.total { border-top: 1px solid var(--dns-border); padding-top: 10px; margin-top: 4px; color: var(--dns-text-strong); font-weight: 700; font-size: 16px; }
.pr-testmode { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; color: var(--dnsc-warn); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); padding: 4px 8px; border-radius: 999px; }
.pr-gateways { display: flex; gap: 8px; margin-top: 10px; }
.pr-gateway { flex: 1; padding: 8px; border-radius: 10px; border: 1px solid var(--dns-border); background: var(--dnsc-card); text-align: center; font-size: 12px; color: var(--dns-text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.pr-gateway.on { border-color: var(--dnsc-brand); color: var(--dns-text-strong); }
.pr-result { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.pr-result.ok { background: rgba(61,220,154,.12); border: 1px solid rgba(61,220,154,.4); color: var(--dns-text); }
.pr-result.err { background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.4); color: var(--dns-text); }
/* Why upgrade strip */
.pr-why { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pr-why-card { padding: 20px; border-radius: 16px; background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border); }
.pr-why-card .big { font-size: 28px; font-weight: 800; color: var(--dns-text-strong); letter-spacing: -.02em; }
.pr-why-card .big em { font-style: normal; color: var(--dnsc-ok); }
.pr-why-card h4 { margin: 8px 0 4px; font-size: 15px; color: var(--dns-text-strong); }
.pr-why-card p { margin: 0; font-size: 13px; color: var(--dns-text-muted); line-height: 1.5; }
/* Comparison table */
.pr-compare { margin-top: 56px; }
.pr-section-title { text-align: center; font-size: 26px; color: var(--dns-text-strong); margin: 0 0 6px; letter-spacing: -.02em; }
.pr-section-sub { text-align: center; color: var(--dns-text-muted); margin: 0 0 26px; font-size: 15px; }
.pr-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--dns-border); border-radius: 16px; overflow: hidden; font-size: 14px; background: var(--dns-bg-surface); }
.pr-table th, .pr-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--dns-border); }
.pr-table th { background: var(--dns-bg-surface-2); color: var(--dns-text-strong); font-weight: 700; }
.pr-table th:first-child, .pr-table td:first-child { text-align: left; color: var(--dns-text-muted); }
.pr-table th.hl, .pr-table td.hl { background: rgba(124,58,237,.10); }
.pr-table tr.group td { background: var(--dns-bg-inset); color: var(--dns-text-subtle); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; text-align: left; padding: 8px 14px; }
.pr-table tr:last-child td { border-bottom: 0; }
.pr-table td.yes { color: var(--dnsc-ok); font-weight: 700; }
.pr-table td.no { color: var(--dns-text-subtle); }
/* Competitor strip */
.pr-vs { margin-top: 56px; padding: 24px; border-radius: 18px; background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; align-items: center; }
.pr-vs h4 { margin: 0; color: var(--dns-text-strong); font-size: 17px; }
.pr-vs p { margin: 4px 0 0; color: var(--dns-text-muted); font-size: 13px; }
.pr-vs-item { padding: 12px 14px; border-radius: 12px; background: var(--dns-bg-inset); border: 1px solid var(--dns-border); }
.pr-vs-item b { display: block; color: var(--dns-text-strong); font-size: 14px; }
.pr-vs-item span { color: var(--dns-text-subtle); font-size: 12px; }
.pr-vs-item.me { border-color: var(--dnsc-brand); }
.pr-vs-item.me b { color: var(--dnsc-brand-2); }
/* Referral page */
.rf-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-top: 28px; }
.rf-card { padding: 24px; border-radius: 20px; background: var(--dns-bg-surface); border: 1px solid var(--dns-border); box-shadow: var(--dnsc-shadow); }
.rf-card h3 { margin: 0 0 6px; color: var(--dns-text-strong); font-size: 18px; }
.rf-card p { margin: 0 0 14px; color: var(--dns-text-muted); font-size: 14px; }
.rf-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--dns-bg-inset); border: 1px dashed var(--dns-border-strong); font-family: ui-monospace, monospace; font-size: 22px; letter-spacing: .12em; color: var(--dns-text-strong); }
.rf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.rf-stat { padding: 12px; border-radius: 12px; background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border); text-align: center; }
.rf-stat b { display: block; font-size: 22px; color: var(--dns-text-strong); }
.rf-stat span { font-size: 11px; color: var(--dns-text-subtle); text-transform: uppercase; letter-spacing: .06em; }
.rf-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: s; }
.rf-steps li { display: flex; gap: 12px; font-size: 14px; color: var(--dns-text); counter-increment: s; }
.rf-steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--dns-accent), var(--dns-accent-2)); }
.rf-events { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rf-events li { display: flex; justify-content: space-between; font-size: 13px; color: var(--dns-text-muted); padding: 8px 10px; border-radius: 10px; background: var(--dnsc-card); }
.rf-events li b { color: var(--dnsc-ok); }
.rf-textarea { width: 100%; min-height: 84px; resize: vertical; }
/* Superadmin operations page */
.ad-center { text-align: center; max-width: 480px; margin: 40px auto; }
.ad-lock { max-width: 520px; margin: 40px auto; }
.ad-lock b { color: var(--dns-text-strong); }
.ad-muted { color: var(--dns-text-muted); font-size: 13px; }
.ad-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 24px 0 16px; }
.ad-head h1 { margin: 4px 0; font-size: 28px; color: var(--dns-text-strong); }
.ad-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--dns-border); margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ad-tabs > button { white-space: nowrap; flex: 0 0 auto; }
/* ── Admin › Payments mapping health ── */
.ad-mappings { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ad-mapping-card { padding: 16px 18px; border-left: 4px solid var(--dnsc-ok, #1a9c5a); }
.ad-mapping-card.bad { border-left-color: var(--dnsc-danger, #c0392b); }
.ad-mapping-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ad-mapping-head h3 { margin: 0; font-size: 16px; }
.ad-pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; text-transform: uppercase; }
.ad-pill.test { background: rgba(245, 158, 11, .15); color: #b7791f; }
.ad-pill.live { background: rgba(16, 185, 129, .15); color: #0f9d6a; }
.ad-mapping-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.ad-mapping-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--dns-border) 40%, transparent); }
.ad-mapping-list li.missing { color: var(--dnsc-danger, #c0392b); }
.ad-mapping-list li.mapped span:last-child { color: var(--dnsc-ok, #1a9c5a); }
.pr-result.warn { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .08); color: #b7791f; }
/* ── Voice agent buttons ── */
.dns-voice-btn.on { color: #fff !important; background: linear-gradient(135deg, #ef4444, #dc2626) !important; border-color: transparent !important; animation: dns-voice-pulse 1.4s ease-in-out infinite; }
@keyframes dns-voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .dns-voice-btn.on { animation: none; } }
@media (max-width: 720px) { .ad-head { flex-direction: column; align-items: stretch; gap: 10px; } .ad-actions { flex-wrap: wrap; } .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-table-wrap { overflow-x: auto; } }
/* ── Admin › Promotions CMS ─────────────────────────────────────────────────── */
.adp-meta { margin: 0 0 12px; font-size: 13px; }
.adp-subtabs { margin-top: 4px; }
.adp-form { padding: 18px 20px; margin-bottom: 16px; }
.adp-form h3 { margin: 0 0 4px; font-size: 16px; color: var(--dns-text-strong); }
.adp-form .ad-muted { margin: 0 0 12px; font-size: 13px; }
.adp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.adp-grid label, .adp-share label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--dns-text-muted); }
.adp-span { grid-column: 1 / -1; }
.adp-checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; }
.adp-checks label { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; color: var(--dns-text); }
.adp-textarea { resize: vertical; font-family: inherit; }
.adp-share { border-color: color-mix(in srgb, var(--dnsc-brand-2) 55%, var(--dns-border)); }
.adp-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.adp-codes { flex: 1; min-width: 200px; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .08em; padding: 8px 12px; border-radius: 10px; background: var(--dns-bg-elevated, rgba(0,0,0,.05)); border: 1px dashed var(--dns-border); white-space: pre-wrap; word-break: break-word; }
.adp-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.adp-filter .pr-input { max-width: 260px; }
.adp-code-cell { white-space: nowrap; }
.adp-copy { border: 0; background: transparent; cursor: pointer; opacity: .6; font-size: 13px; margin-left: 4px; }
.adp-copy:hover { opacity: 1; }
.adp-link { border: 0; background: transparent; color: var(--dnsc-brand-2); cursor: pointer; font-size: 13px; padding: 0 4px; }
.adp-link:hover { text-decoration: underline; }
.adp-row-actions { white-space: nowrap; }
.ad-table tr.sel td { background: color-mix(in srgb, var(--dnsc-brand-2) 10%, transparent); }
.adp-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(120,120,120,.15); color: var(--dns-text-muted); }
.adp-status.unused, .adp-status.live { background: rgba(34,197,94,.16); color: #15803d; }
.adp-status.redeemed { background: rgba(59,130,246,.16); color: #1d4ed8; }
.adp-status.scheduled { background: rgba(245,158,11,.18); color: #b45309; }
.adp-status.revoked, .adp-status.expired, .adp-status.ended { background: rgba(220,38,38,.14); color: #b91c1c; }
.adp-status.paused { background: rgba(120,120,120,.18); }
/* ── Admin › Settings ───────────────────────────────────────────────────────── */
/* One full-width panel per group: the previous auto-fill grid packed several dense tables side by
side, which squeezed labels/keys/values into narrow columns and made the page unreadable. */
.ads-grid { display: flex; flex-direction: column; gap: 18px; }
.ads-card { padding: 20px 24px; width: 100%; box-sizing: border-box; scroll-margin-top: 90px; }
.ads-card.overridden { border-color: color-mix(in srgb, var(--dnsc-brand-2) 55%, var(--dns-border)); }
.ads-card.ads-focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--dnsc-brand-2) 60%, transparent); }
.ads-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ads-card-head h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; color: var(--dns-text-strong); }
.ads-card-head p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--dns-text-muted); }
.ads-card-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.ads-table { width: 100%; table-layout: fixed; font-size: 13.5px; line-height: 1.45; }
.ads-table td { padding: 10px 10px; vertical-align: top; overflow-wrap: anywhere; }
.ads-table tr { scroll-margin-top: 110px; }
.ads-table tr.ads-hit td { background: color-mix(in srgb, var(--dnsc-brand-2) 14%, transparent); }
.ads-label { width: 26%; }
.ads-label b { display: block; font-size: 14px; color: var(--dns-text-strong); }
.ads-label .mono { font-size: 12px; }
.ads-purpose { width: 40%; font-size: 13px; }
.ads-value { width: 22%; word-break: break-word; }
.ads-source { width: 12%; white-space: nowrap; text-align: right; }
.ads-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--dns-border); border-radius: 12px; background: var(--dns-bg-elev, var(--dns-bg-app)); position: sticky; top: 0; z-index: 3; }
.ads-search { display: flex; align-items: center; gap: 8px; flex: 1 1 340px; min-width: 260px; }
.ads-search-icon { opacity: .7; }
.ads-search-input { flex: 1; min-width: 0; }
.ads-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dns-text-muted); white-space: nowrap; }
.ads-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.ads-chip { border: 1px solid var(--dns-border); background: transparent; color: var(--dns-text-muted); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.ads-chip:hover, .ads-chip.active { color: var(--dns-text-strong); border-color: var(--dnsc-brand-2); background: color-mix(in srgb, var(--dnsc-brand-2) 12%, transparent); }
.ads-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ads-result { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; text-align: left; border: 1px solid var(--dns-border); background: transparent; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 13.5px; color: inherit; }
.ads-result:hover { border-color: var(--dnsc-brand-2); background: color-mix(in srgb, var(--dnsc-brand-2) 8%, transparent); }
.ads-result .mono { font-size: 12px; }
.ads-result-group { margin-left: auto; font-size: 12px; color: var(--dns-text-muted); }
@keyframes dns-flash { 0% { background-color: color-mix(in srgb, var(--dnsc-brand-2) 35%, transparent); } 100% { background-color: transparent; } }
.dns-flash, .dns-flash > td { animation: dns-flash 1.8s ease-out; }
@media (max-width: 760px) {
.ads-table, .ads-table tbody, .ads-table tr, .ads-table td { display: block; width: auto; }
.ads-table tr { padding: 8px 0; border-bottom: 1px solid var(--dns-border); }
.ads-table td { padding: 3px 0; }
.ads-source { text-align: left; }
}
.ads-restart { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ads-dialog { max-width: 720px; width: min(720px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
.ads-dialog .dns-pub-head h3 { margin: 0; }
.ads-body { overflow: auto; flex: 1; }
.ads-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ads-fields { display: grid; gap: 14px; }
.ads-field { display: flex; flex-direction: column; gap: 4px; }
.ads-field.secret { opacity: .75; }
.ads-field-head { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--dns-text-strong); }
.ads-field small { font-size: 12px; }
.ads-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--dns-border); }
.ad-tabs button { background: none; border: 0; padding: 10px 14px; font-size: 14px; color: var(--dns-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ad-tabs button.on { color: var(--dnsc-brand-2); border-bottom-color: var(--dnsc-brand); font-weight: 600; }
.ad-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ad-kpis .rf-stat b small { font-size: 12px; margin-left: 2px; color: var(--dns-text-subtle); }
.ad-kpis .rf-stat.bad b { color: var(--dnsc-danger, #dc2626); }
.ad-env { margin: 10px 0 0; }
.ad-routes { margin-top: 16px; }
.ad-table-wrap { padding: 0; overflow: auto; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-table th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dns-text-subtle); border-bottom: 1px solid var(--dns-border); white-space: nowrap; }
.ad-table td { padding: 8px 12px; border-bottom: 1px solid var(--dns-border); color: var(--dns-text); vertical-align: top; }
.ad-table tr.bad td { background: rgba(220, 38, 38, .06); }
.ad-table td.bad, .ad-table .bad { color: var(--dnsc-danger, #dc2626); font-weight: 600; }
.ad-table .mono { font-family: ui-monospace, monospace; font-size: 12px; }
.ad-table a { color: var(--dnsc-brand-2); text-decoration: none; }
.ad-details { max-width: 360px; word-break: break-word; }
.ad-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ad-filters .pr-input { max-width: 260px; }
.ad-kpis .rf-stat.warn b { color: #d97706; }
.ad-section { margin: 22px 0 10px; font-size: 15px; color: var(--dns-text-strong); display: flex; gap: 10px; align-items: baseline; }
.ad-alerts { border-radius: 14px; padding: 14px 18px; margin: 0 0 16px; border: 1px solid; }
.ad-alerts.warn { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .45); }
.ad-alerts.crit { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .55); animation: ad-pulse 1.6s ease-in-out infinite; }
@keyframes ad-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); } 50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); } }
.ad-alerts-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--dns-text-strong); }
.ad-alerts-head span { color: var(--dns-text-muted); font-size: 13px; }
.ad-alerts ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ad-alerts li { font-size: 13px; color: var(--dns-text); padding-left: 14px; position: relative; }
.ad-alerts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #d97706; }
.ad-alerts li.crit::before { background: #dc2626; }
.ad-alerts li .mono { font-family: ui-monospace, monospace; font-size: 12px; color: var(--dns-text-subtle); margin-right: 6px; }
.ad-alerts li small { color: var(--dns-text-subtle); margin-left: 6px; }
.ad-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 12px; }
.ad-chart { background: var(--dnsc-card); border: 1px solid var(--dns-border); border-radius: 14px; padding: 12px 14px 8px; }
.ad-chart.warn { border-color: rgba(245, 158, 11, .6); }
.ad-chart.crit { border-color: rgba(220, 38, 38, .7); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.ad-chart-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 6px; }
.ad-chart-head h4 { margin: 0; font-size: 14px; color: var(--dns-text-strong); }
.ad-chart-sub { font-size: 12px; color: var(--dns-text-subtle); }
.ad-chart-now { display: flex; gap: 12px; flex-wrap: wrap; }
.ad-chart-legend { font-size: 12px; color: var(--dns-text-muted); display: inline-flex; align-items: center; gap: 5px; }
.ad-chart-legend i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.ad-chart-legend b { color: var(--dns-text-strong); font-variant-numeric: tabular-nums; }
.ad-chart-svg { width: 100%; height: 160px; display: block; overflow: visible; }
.ad-chart-grid { stroke: var(--dns-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ad-chart-tick { font-size: 10px; fill: var(--dns-text-subtle); text-anchor: end; font-family: ui-monospace, monospace; }
.ad-chart-tick.start { text-anchor: start; }
.ad-chart-tick.end { text-anchor: end; }
.ad-chart-guide { stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ad-chart-guide.warn { stroke: #d97706; }
.ad-chart-guide.crit { stroke: #dc2626; }
.ad-chart-zone.crit { fill: rgba(220, 38, 38, .07); }
.ad-chart-empty { height: 160px; display: grid; place-items: center; color: var(--dns-text-subtle); font-size: 13px; }
@media (max-width: 800px) { .ad-routes { grid-template-columns: 1fr; } .ad-charts { grid-template-columns: 1fr; } }
/* ── Admin: Workload (high-level meters) ─────────────────────────────────────── */
.wl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.wl-overall { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--dns-border); background: var(--dns-surface); }
.wl-overall b { display: block; font-size: 16px; }
.wl-overall small { color: var(--dns-text-subtle); font-size: 12px; }
.wl-dot { width: 14px; height: 14px; border-radius: 50%; background: #15803d; box-shadow: 0 0 0 4px rgba(21,128,61,.18); }
.wl-overall.low .wl-dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.wl-overall.moderate .wl-dot { background: #eab308; box-shadow: 0 0 0 4px rgba(234,179,8,.2); }
.wl-overall.high .wl-dot { background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.2); animation: wl-pulse 1.6s infinite; }
.wl-overall.critical .wl-dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.22); animation: wl-pulse 1s infinite; }
@keyframes wl-pulse { 50% { transform: scale(1.25); } }
.wl-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.wl-mail .ok { color: #16a34a; } .wl-mail .warn { color: #b45309; } .wl-mail small { color: var(--dns-text-subtle); }
.wl-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.wl-gauge { --wl-c: #15803d;
background: linear-gradient(180deg, color-mix(in srgb, var(--wl-c) 9%, var(--dns-surface)) 0%, var(--dns-surface) 55%); transition: transform .2s, box-shadow .2s; }
.wl-gauge:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--wl-c) 60%, transparent); }
.wl-gauge::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--wl-c), transparent); }
.wl-gauge.low { --wl-c: #22c55e; } .wl-gauge.moderate { --wl-c: #eab308; } .wl-gauge.high { --wl-c: #f97316; } .wl-gauge.critical { --wl-c: #ef4444; } .wl-gauge.na { --wl-c: #9ca3af; }
.wl-gauge-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wl-gauge-head h4 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.wl-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px;
color: var(--wl-c); background: color-mix(in srgb, var(--wl-c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--wl-c) 35%, transparent); }
.wl-gauge.critical .wl-badge { animation: wl-pulse 1.2s infinite; }
.wl-gauge p { margin: 8px 0 0; font-size: 12px; line-height: 1.45; text-align: center; }
.wl-meter { --wl-size: 190px; --wl-w: 16px; position: relative; width: var(--wl-size); height: calc(var(--wl-size) * .82); margin: 6px auto 0; overflow: hidden; }
.wl-ring, .wl-ring-zone, .wl-ring-fill { position: absolute; left: 0; top: 0; width: var(--wl-size); height: var(--wl-size); border-radius: 50%;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--wl-w) - 1px), #000 calc(100% - var(--wl-w)));
mask: radial-gradient(farthest-side, transparent calc(100% - var(--wl-w) - 1px), #000 calc(100% - var(--wl-w))); }
/* 240° sweep starting at 240° (7 o'clock) and ending at 120° (5 o'clock). */
.wl-ring { background: conic-gradient(from 240deg, color-mix(in srgb, var(--dns-text) 10%, transparent) 240deg, transparent 240deg); }
.wl-ring-zone { background: conic-gradient(from 240deg, transparent var(--wl-alert), rgba(239,68,68,.16) var(--wl-alert), rgba(239,68,68,.16) 240deg, transparent 240deg); }
.wl-ring-fill { transition: filter .4s;
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--wl-c) 55%, transparent));
background: conic-gradient(from 240deg,
#15803d 0deg, #22c55e calc(240deg * var(--wl-g1)), #eab308 calc(240deg * var(--wl-g2)),
#f97316 calc(240deg * var(--wl-g3)), #ef4444 calc(240deg * var(--wl-g4)), #b91c1c 240deg, transparent 240deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--wl-w) - 1px), #000 calc(100% - var(--wl-w))),
conic-gradient(from 240deg, #000 var(--wl-fill), transparent var(--wl-fill));
-webkit-mask-composite: source-in;
mask: radial-gradient(farthest-side, transparent calc(100% - var(--wl-w) - 1px), #000 calc(100% - var(--wl-w))),
conic-gradient(from 240deg, #000 var(--wl-fill), transparent var(--wl-fill));
mask-composite: intersect; }
/* Ticks: a bar at 12 o'clock rotated around the ring centre; 0deg = gauge start (240deg on the conic clock). */
.wl-tick { position: absolute; left: calc(50% - 1.5px); top: 0; width: 3px; height: calc(var(--wl-size) / 2); transform-origin: 50% 100%; pointer-events: none; }
.wl-tick::before { content: ""; position: absolute; left: 0; top: -4px; width: 3px; height: calc(var(--wl-w) + 8px); border-radius: 2px; }
.wl-tick-alert { transform: rotate(calc(240deg + var(--wl-alert))); }
.wl-tick-alert::before { background: #ef4444; box-shadow: 0 0 0 1px var(--dns-surface); }
.wl-tick-peak { transform: rotate(calc(240deg + var(--wl-peak))); }
.wl-tick-peak::before { background: var(--dns-text); opacity: .55; height: var(--wl-w); top: 0; }
.wl-value { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-40%); text-align: center; pointer-events: none; }
.wl-value b { display: block; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--wl-c); font-variant-numeric: tabular-nums; transition: color .4s; }
.wl-value b small { font-size: 16px; font-weight: 700; margin-left: 2px; opacity: .8; }
.wl-value span { display: block; margin-top: 6px; font-size: 11px; color: var(--dns-text-subtle); font-weight: 600; }
.wl-scale { display: flex; justify-content: space-between; align-items: center; width: 190px; max-width: 100%; margin: -6px auto 0; font-size: 11px; color: var(--dns-text-subtle); }
.wl-scale-alert { color: #ef4444; font-weight: 600; }
.wl-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 14px; }
.wl-grid h4 { margin: 0 0 8px; }
.ad-kpis.compact .rf-stat b { font-size: 18px; }
.wl-note { margin-top: 14px; font-size: 12px; }
@media (max-width: 900px) { .wl-grid { grid-template-columns: 1fr; } }
/* Billing page */
.bl-plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bl-plan .name { font-size: 26px; font-weight: 800; color: var(--dns-text-strong); }
.bl-bar { height: 10px; border-radius: 999px; background: var(--dns-bg-inset); border: 1px solid var(--dns-border); overflow: hidden; margin: 14px 0 6px; }
.bl-bar > div { height: 100%; background: linear-gradient(90deg, var(--dnsc-brand), var(--dnsc-brand-3)); transition: width .3s; }
.bl-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--dns-text-muted); }
/* Help / FAQ / Legal */
.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; }
.doc-toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; }
.doc-toc a { padding: 8px 12px; border-radius: 9px; color: var(--dns-text-muted); text-decoration: none; font-size: 13.5px; }
.doc-toc a:hover { background: var(--dnsc-card-strong); color: var(--dns-text-strong); }
.doc { font-size: 15px; line-height: 1.7; color: var(--dns-text); }
.doc h1 { font-size: 34px; letter-spacing: -.02em; color: var(--dns-text-strong); margin: 0 0 6px; }
.doc .updated { color: var(--dns-text-subtle); font-size: 13px; margin-bottom: 28px; }
.doc h2 { font-size: 22px; color: var(--dns-text-strong); margin: 40px 0 10px; padding-top: 12px; border-top: 1px solid var(--dns-border); scroll-margin-top: 90px; }
.doc h3 { font-size: 16px; color: var(--dns-text-strong); margin: 22px 0 6px; }
.doc p, .doc li { color: var(--dns-text-muted); }
.doc li { margin-bottom: 4px; }
.doc code, .doc kbd { background: var(--dns-bg-inset); border: 1px solid var(--dns-border); padding: 1px 6px; border-radius: 6px; font-size: 13px; color: var(--dns-text); }
.doc .callout { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(124,58,237,.35); background: rgba(124,58,237,.10); margin: 16px 0; }
.doc .callout.warn { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.10); }
.doc .callout p { margin: 0; color: var(--dns-text); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0; }
.doc table th, .doc table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--dns-border); color: var(--dns-text-muted); }
.doc table th { color: var(--dns-text-strong); }
.doc .fine { font-size: 12.5px; color: var(--dns-text-subtle); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--dns-border); border-radius: 14px; background: var(--dns-bg-surface); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--dns-text-strong); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; color: var(--dns-text-subtle); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .a { padding: 0 18px 16px; color: var(--dns-text-muted); font-size: 14.5px; line-height: 1.65; }
.faq-group-title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dns-text-subtle); margin: 28px 0 10px; font-weight: 700; }
.help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 8px; }
.help-card { padding: 18px; border-radius: 16px; background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border); text-decoration: none; color: inherit; transition: .15s; }
.help-card:hover { border-color: var(--dnsc-brand); transform: translateY(-2px); }
.help-card b { display: block; color: var(--dns-text-strong); margin-bottom: 4px; }
.help-card span { font-size: 13px; color: var(--dns-text-muted); }
@media (max-width: 1000px) {
.pr-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 20px; }
.pr-why, .help-cards { grid-template-columns: 1fr; }
.pr-vs { grid-template-columns: 1fr 1fr; }
.pub-footer-inner { grid-template-columns: 1fr 1fr; }
.doc-layout { grid-template-columns: 1fr; }
.doc-toc { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 680px) {
.pub-header { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
.pub-nav { order: 3; width: 100%; overflow-x: auto; }
.pub-main { padding: 28px 16px 60px; }
.pr-grid, .rf-grid, .pr-checkout, .pr-vs, .pub-footer-inner { grid-template-columns: 1fr; }
.pr-table { font-size: 12px; }
.pr-table th, .pr-table td { padding: 8px 6px; }
}
html.light-theme .pub-header { background: rgba(255,255,255,.82); }
html.light-theme .pub-drawer { background: rgba(255,255,255,.97); }
html.light-theme .pub-drawer-backdrop { background: rgba(15,23,42,.35); }
html.light-theme .pr-card.popular { background: linear-gradient(180deg, rgba(124,58,237,.08), #fff 45%); }
html.light-theme .pr-badge.soft { background: #fff; color: #5b21b6; }
html.light-theme .pub-eyebrow { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
/* ── Admin: Business / Audience retention dashboards ───────────────────────── */
.adb-root { display: flex; flex-direction: column; gap: 14px; }
.adb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.adb-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.adb-kpi > span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dns-text-subtle); }
.adb-kpi > b { font-size: 24px; line-height: 1.15; }
.adb-kpi small { font-size: 11.5px; }
.adb-kpi .good { color: var(--dnsc-success, #16a34a); }
.adb-kpi .bad { color: var(--dnsc-danger, #dc2626); }
.adb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adb-chart { padding: 14px 16px; min-width: 0; }
.adb-chart h3 { margin: 0 0 6px; font-size: 14px; }
.adb-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; margin-bottom: 6px; }
.adb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.adb-svg { width: 100%; height: 190px; display: block; color: var(--dns-text); }
.ada-note { font-size: 12.5px; margin: -4px 0 0; }
.ada-funnel { display: flex; flex-direction: column; gap: 10px; }
.ada-funnel-row { display: flex; flex-direction: column; gap: 3px; }
.ada-funnel-label { display: flex; justify-content: space-between; font-size: 12.5px; gap: 8px; }
.ada-funnel-bar { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--dns-text) 8%, transparent); overflow: hidden; }
.ada-funnel-bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--dnsc-brand-2, #7c5cff), #3b82f6); transition: width .5s ease; }
.ada-funnel-row small.bad { font-size: 11px; color: var(--dnsc-danger, #dc2626); }
.ada-donut { display: flex; align-items: center; gap: 18px; }
.ada-donut svg { width: 150px; height: 150px; flex: none; color: var(--dns-text); }
.ada-donut ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; text-transform: capitalize; }
.ada-donut li i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.ada-table code, .ada-chip code { font-size: 12px; }
.ada-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ada-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--dns-border); font-size: 12px; }
@media (max-width: 900px) {
.adb-two { grid-template-columns: 1fr; }
.ada-donut { flex-direction: column; align-items: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════════════
Prompt editor motion boundary — a single hairline ring with a slow, soft
light that drifts along it. Quiet by default, a touch clearer on focus.
══════════════════════════════════════════════════════════════════════════ */
.dns-motion-border { position: relative; isolation: isolate; }
/* Static hairline frame — quiet, precise. */
.dns-motion-border::before {
content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
padding: 1px;
background: linear-gradient(180deg, rgba(129,140,248,.38), rgba(129,140,248,.10) 40%, rgba(129,140,248,.06));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
/* Single monochrome tracer that travels the whole perimeter — a short bright arc riding a conic
sweep, masked to the 1px frame so only the border lights up. */
@property --dns-mb-angle { syntax: ''; inherits: false; initial-value: 0deg; }
.dns-motion-border::after {
content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; pointer-events: none;
padding: 1px;
background: conic-gradient(from var(--dns-mb-angle), transparent 0deg, transparent 300deg, rgba(165,180,252,.15) 318deg, rgba(199,210,254,.98) 345deg, rgba(165,180,252,.15) 356deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
filter: drop-shadow(0 0 5px rgba(129,140,248,.8));
animation: dnsMbTrace 6s linear infinite;
}
.dns-motion-border.busy::before { background: linear-gradient(180deg, rgba(129,140,248,.6), rgba(129,140,248,.18) 40%, rgba(129,140,248,.10)); }
.dns-motion-border.busy::after { animation-duration: 1.8s; }
@keyframes dnsMbTrace { from { --dns-mb-angle: 0deg; } to { --dns-mb-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .dns-motion-border::after { animation: none; display: none; } }
/* Build preferences attached to the editor */
.dns-prefs-bar.in-card { margin: 0 0 -2px; max-width: none; justify-content: flex-start; padding: 4px 4px 0 0; animation: none; font-size: .72rem; }
.dns-prefs-bar.in-card .dns-pref-chip { cursor: pointer; }
.dns-prefs-bar-spacer { flex: 1; }
/* Live agent launcher next to Speak */
.dns-agent-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(129,140,248,.45); background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(56,189,248,.16)); color: #e0e7ff; font-size: .78rem; font-weight: 600; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.dns-agent-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,.3); }
.dns-agent-btn .pro, .dns-agent-btn-lock { font-size: .6rem; padding: 1px 6px; border-radius: 999px; background: #f59e0b; color: #1c1917; letter-spacing: .04em; }
.dns-agent-btn.locked { opacity: .85; }
.dns-agent-btn.opening { position: relative; overflow: hidden; opacity: .9; cursor: progress; }
.dns-agent-btn.opening::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: linear-gradient(90deg, transparent, #c7d2fe, transparent); animation: dnsBtnProgress 1.1s linear infinite; }
@keyframes dnsBtnProgress { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
/* Shared action chips (planner / blueprint / agent) */
.dns-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(148,163,184,.35); background: rgba(30,41,59,.65); color: #e2e8f0; font-size: .76rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease; }
.dns-chip:hover:not(:disabled) { background: rgba(51,65,85,.85); border-color: rgba(148,163,184,.6); transform: translateY(-1px); }
.dns-chip:disabled { opacity: .5; cursor: default; }
.dns-chip-build { background: linear-gradient(135deg, #4f46e5, #0ea5e9); border-color: transparent; color: #fff; font-weight: 600; }
.dns-chip-blueprint { border-color: rgba(167,139,250,.6); color: #ddd6fe; }
.dns-chip-note { border-style: dashed; }
.dns-chip-danger { border-color: rgba(248,113,113,.4); color: #fca5a5; }
/* Planner turns in the chat feed */
.cpt-turn.planner .dnsc-planner { display: flex; gap: 10px; align-items: flex-start; }
.dnsc-planner-face { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; margin-top: 2px; background: radial-gradient(circle at 35% 35%, #c7d2fe, #6366f1 70%); box-shadow: 0 0 0 2px rgba(99,102,241,.25); }
.dnsc-planner-body { flex: 1; min-width: 0; }
.dnsc-planner-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Live agent window styles live in css/agent.css */
/* ══════════════════════════════════════════════════════════════════════════
Saved blueprint cards (the blueprint window itself lives in css/blueprint.css)
══════════════════════════════════════════════════════════════════════════ */
.dns-bp-card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.dns-bp-card-swatches { display: flex; gap: 4px; height: 8px; }
.dns-bp-card-swatches span { flex: 1; border-radius: 999px; }
.dns-bp-card-title { font-weight: 700; font-size: 1rem; }
.dns-bp-card-tag { color: #94a3b8; font-size: .82rem; min-height: 2.4em; }
.dns-bp-card-meta { display: flex; justify-content: space-between; font-size: .72rem; color: #94a3b8; }
.dns-bp-status { padding: 1px 8px; border-radius: 999px; background: rgba(148,163,184,.15); }
.dns-bp-status.built { background: rgba(34,197,94,.18); color: #bbf7d0; }
.dns-bp-card-actions { display: flex; gap: 6px; margin-top: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
Model picker (composer footer) — Auto + full catalog with cost dots
═══════════════════════════════════════════════════════════════════════════ */
.dns-model-pick { position: relative; display: inline-flex; }
.dns-model-pick-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 11px; border-radius: 999px; border: 1px solid rgba(165,180,252,.28); background: rgba(255,255,255,.035); color: var(--dns-text); font-size: .78rem; font-weight: 600; max-width: 220px; }
.dns-model-pick-btn:hover:not(:disabled) { background: rgba(99,102,241,.18); border-color: #a5b4fc; }
.dns-model-pick-btn:disabled { opacity: .5; cursor: not-allowed; }
.dns-model-pick-btn svg { color: #c4b5fd; flex-shrink: 0; }
.dns-model-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-cost-dots { display: inline-flex; gap: 1px; font-size: .62rem; letter-spacing: 0; color: rgba(148,163,184,.35); line-height: 1; font-style: normal; }
.dns-cost-dots i { font-style: normal; color: rgba(148,163,184,.3); }
.dns-cost-dots i.on { color: #fbbf24; }
.dns-cost-dots.dns-cost-auto { color: #a5b4fc; }
.dns-model-menu { position: absolute; z-index: 4600; bottom: calc(100% + 8px); left: 0; width: min(380px, calc(100vw - 24px)); max-height: min(70dvh, 520px); overflow-y: auto; overscroll-behavior: contain; background: var(--dns-bg-elevated); border: 1px solid var(--dns-border-strong); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.dns-model-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--dns-border); margin-bottom: 4px; display: flex; flex-direction: column; gap: 4px; }
.dns-model-menu-head strong { font-size: .84rem; color: var(--dns-text-strong); }
.dns-model-menu-head small { font-size: .68rem; color: var(--dns-text-subtle); line-height: 1.5; }
.dns-model-menu-head .dns-cost-dots { color: #fbbf24; }
.dns-model-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--dns-text); font-family: inherit; }
.dns-model-item:hover:not(:disabled) { background: rgba(99,102,241,.12); }
.dns-model-item.on { background: rgba(99,102,241,.18); border-color: rgba(129,140,248,.5); }
.dns-model-item:disabled { opacity: .45; cursor: not-allowed; }
.dns-model-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dns-model-item-main b { font-size: .8rem; font-weight: 600; }
.dns-model-item-main small { font-size: .68rem; color: var(--dns-text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dns-model-menu-upsell { display: block; margin: 4px; padding: 9px 12px; border-radius: 10px; text-align: center; font-size: .76rem; font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--dns-accent), #2563eb); }
html.light-theme .dns-model-pick-btn { background: #fff; border-color: #cbd5e1; color: #1e293b; }
html.light-theme .dns-model-menu { background: #fff; border-color: #dde5f3; }
/* ═══════════════════════════════════════════════════════════════════════════
Mobile overhaul (≤ 760px landing · ≤ 600px workbench)
Fixes: page scroll lock, light-theme legibility, immersive animated stage,
docked edge-to-edge panel, compact hero/recents, disabled icons, sidebar
sign-out overlap, centred credits modal, compact agent FAB, toolbar strip.
═══════════════════════════════════════════════════════════════════════════ */
.dns-mobile-strip { display: none; }
@media (max-width: 760px) {
/* 1. Scrolling: the document itself scrolls; nested clip/hidden containers must not trap it. */
html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
.landing-root { min-height: 100dvh; overflow: visible; }
.landing-root .landing-viewport, .landing-root .landing-body-full { overflow: visible !important; height: auto !important; min-height: 0 !important; }
.landing-root .dns-main-content { overflow: visible !important; height: auto; }
.landing-root .landing-ai-panel { overflow: visible !important; overscroll-behavior: auto; touch-action: pan-y; }
/* 2. Edge-to-edge docked stage (Bolt-style) with a soft animated aurora background. */
.landing-root .landing-ai-panel { margin: 0 !important; border-radius: 0 !important; min-height: calc(100dvh - 56px); padding: 26px 16px 110px; }
.landing-root .landing-ai-panel::before { background-size: 26px 26px; opacity: .8; }
.landing-root .landing-ai-panel::after { top: -160px; width: 420px; height: 420px; animation: dnsMobileGlow 9s ease-in-out infinite; }
.landing-root .landing-ai-panel { background-size: 100% 100%, 100% 100%, 160% 160%; animation: dnsAuroraShift 18s ease-in-out infinite alternate; }
@keyframes dnsAuroraShift { 0% { background-position: 50% 0%, 50% 100%, 0% 0%; } 100% { background-position: 50% 0%, 50% 100%, 100% 100%; } }
/* 3. Hero: one line, compact, keeps the gradient headline look. */
.landing-root .landing-hero { margin-bottom: 14px; }
.landing-root .landing-hero-badge { margin-bottom: 14px; padding: 6px 12px; font-size: .74rem; }
.landing-root .landing-hero h1 { font-size: clamp(1.45rem, 6.4vw, 1.9rem); white-space: nowrap; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 6px; background: linear-gradient(92deg, #fff 0%, #c7d2fe 55%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
.landing-root .landing-hero p { font-size: .86rem; max-width: 40ch; }
/* 4. Composer tools: disabled icons keep their glyph (no blank circles). */
.landing-root .btn-upload.dns-tool-icon:disabled, .landing-root .dns-agent-btn.dns-tool-icon:disabled { opacity: 1; color: rgba(226,232,240,.45); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.landing-root .btn-upload.dns-tool-icon:disabled .dns-btn-ico, .landing-root .btn-upload.dns-tool-icon:disabled .dns-tool-glyph { opacity: .55; }
.landing-root .landing-chat-footer { gap: 6px; }
.landing-root .dns-model-pick { flex: 1 1 auto; min-width: 0; }
.landing-root .dns-model-pick-btn { max-width: 100%; height: 34px; font-size: .74rem; }
/* 5. Recent projects: visible without scrolling, compact 3-up rows. */
.landing-root .dns-recent-strip { margin-top: 14px; }
.landing-root .dns-recent-cards { grid-template-columns: 1fr; gap: 6px; }
.landing-root .dns-recent-card { padding: 7px 10px; }
.landing-root .dns-recent-thumb { width: 28px; height: 28px; }
/* 6. Sidebar drawer: footer stacks above the floating agent button, sign-out stays reachable. */
.landing-root .dns-sidebar { display: flex; flex-direction: column; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.landing-root .dns-sidebar-footer { margin-top: auto; position: relative; z-index: 2; }
.landing-root .dns-user-chip .dns-user-signout { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
/* 7. Floating "Talk to Mira": compact orb-only pill, same ring animation. */
.bpx-nady.dns-home-nady { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 5px; gap: 0; width: auto; border-radius: 999px; }
.bpx-nady.dns-home-nady .bpx-nady-text { display: none; }
/* 8. Credits / ledger popovers: centred modal, scrollable, never clipped by the drawer transform. */
.dns-account-bar .dns-popover, .dns-account-bar:not(.compact) .dns-popover, .dns-account-bar:not(.compact) .dns-popover.dns-ledger-panel, .dns-popover.dns-ledger-panel {
position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)) !important; max-height: min(82dvh, 640px) !important;
overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 6600 !important; border-radius: 16px;
}
.dns-ledger-modal { width: calc(100vw - 24px); max-height: 84dvh; z-index: 6601; }
.dns-menu-backdrop { z-index: 6500; }
/* 9. Light theme on phones: airy indigo paper instead of the saturated blue block; crisp text. */
html.light-theme .landing-root .landing-ai-panel {
background: radial-gradient(90% 55% at 50% 0%, rgba(199,210,254,.75), transparent 65%), radial-gradient(70% 50% at 50% 100%, rgba(167,243,208,.45), transparent 70%), linear-gradient(180deg, #f8f7ff 0%, #f3f6ff 50%, #eef9f5 100%);
animation: dnsAuroraShift 18s ease-in-out infinite alternate; background-size: 100% 100%, 100% 100%, 160% 160%;
}
html.light-theme .landing-root .landing-ai-panel::before { background-image: radial-gradient(rgba(79,70,229,.16) 1px, transparent 1.2px); }
html.light-theme .landing-root .landing-ai-panel::after { display: block; background: radial-gradient(circle, rgba(167,139,250,.45), transparent 65%); }
html.light-theme .landing-root .landing-hero-badge { background: #fff; border-color: #ddd6fe; color: #4c1d95; box-shadow: 0 8px 24px -14px rgba(79,70,229,.5); }
html.light-theme .landing-root .landing-hero h1 { background: linear-gradient(92deg, #1e1b4b 0%, #4338ca 55%, #0f766e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; }
html.light-theme .landing-root .landing-hero p { color: #334155; -webkit-text-fill-color: #334155; font-weight: 500; }
html.light-theme .landing-root .landing-chat-card { background: #fff; border-color: #e4e4f7; box-shadow: 0 30px 70px -30px rgba(67,56,202,.35); }
html.light-theme .landing-root .landing-chat-textarea { color: #0f172a; -webkit-text-fill-color: #0f172a; }
html.light-theme .landing-root .landing-chat-textarea::placeholder { color: #64748b; -webkit-text-fill-color: #64748b; }
html.light-theme .landing-root .landing-chat-name-input { background: #f5f3ff; border-color: #e4e4f7; color: #0f172a; }
html.light-theme .landing-root .btn-plan { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }
html.light-theme .landing-root .landing-chat-actions .btn-build { background: linear-gradient(135deg, #6d28d9, #4f46e5); box-shadow: 0 10px 24px -8px rgba(79,70,229,.7); }
html.light-theme .landing-root .btn-upload.dns-tool-icon { background: #fff; border-color: #ddd6fe; color: #4c1d95; }
html.light-theme .landing-root .btn-upload.dns-tool-icon:disabled { color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; }
html.light-theme .landing-root .dns-recent-strip-head { color: #334155; }
html.light-theme .landing-root .dns-recent-viewall { color: #4f46e5; }
html.light-theme .landing-root .dns-recent-card { background: #fff; border-color: #e4e4f7; color: #0f172a; }
html.light-theme .landing-root .dns-recent-fact { color: #475569; }
html.light-theme .landing-root .dns-mobile-bar { background: rgba(248,247,255,.9); }
html.light-theme .landing-root .dns-model-pick-btn { background: #fff; border-color: #ddd6fe; color: #1e1b4b; }
}
@media (max-width: 400px) {
.landing-root .landing-hero h1 { font-size: clamp(1.25rem, 6.2vw, 1.5rem); }
}
/* Workbench on phones */
@media (max-width: 600px) {
.dns-workspace-shell { height: 100dvh; }
.dns-workspace-toolbar .dns-view-switch, .dns-workspace-toolbar .dns-tb-group, .dns-workspace-toolbar .dns-tb-divider, .dns-workspace-toolbar .dns-tb-secondary, .dns-workspace-toolbar .dns-tb-more { display: none !important; }
.dns-workspace-toolbar { overflow: visible; }
.dns-mobile-strip {
display: flex; align-items: stretch; gap: 2px; padding: 4px 6px; padding-bottom: calc(4px + env(safe-area-inset-bottom));
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
background: color-mix(in srgb, var(--dns-bg-surface) 94%, transparent); border-top: 1px solid var(--dns-border);
position: sticky; bottom: 0; z-index: 12; order: 99;
}
.dns-mobile-strip::-webkit-scrollbar { display: none; }
.dns-ms-btn { flex: 1 0 auto; min-width: 58px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; border-radius: 10px; border: 0; background: transparent; color: var(--dns-text-muted); font-family: inherit; }
.dns-ms-btn span { font-size: 1rem; line-height: 1; }
.dns-ms-btn small { font-size: .62rem; font-weight: 600; letter-spacing: .02em; }
.dns-ms-btn.on { color: var(--dns-text-strong); background: rgba(99,102,241,.16); }
.dns-ms-btn.dns-ms-run { color: #bbf7d0; }
.dns-ms-btn:disabled { opacity: .4; }
html.light-theme .dns-mobile-strip { background: rgba(255,255,255,.96); border-top-color: #e2e8f0; }
html.light-theme .dns-ms-btn { color: #475569; }
html.light-theme .dns-ms-btn.on { color: #1e1b4b; background: #eef2ff; }
html.light-theme .dns-ms-btn.dns-ms-run { color: #15803d; }
/* File explorer (OPFS tree) as a slide-in drawer in Code view. */
.dns-explorer-panel.dns-explorer-mobile-open {
display: flex !important; position: fixed; top: 0; bottom: 0; left: 0; z-index: 6550;
width: min(86vw, 340px) !important; max-width: none !important; min-width: 0 !important; height: 100dvh;
background: var(--dns-bg-surface); border-right: 1px solid var(--dns-border-strong); box-shadow: 24px 0 60px rgba(0,0,0,.45);
overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom);
}
}
/* ── Maintenance / downtime page (MaintenanceGate) ─────────────────────────── */
.dns-maint { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 50% -10%, rgba(99,102,241,.18), transparent 60%), var(--dns-bg-app, #0b1020); color: var(--dns-text, #e2e8f0); }
.dns-maint-card { width: min(560px, 100%); text-align: center; padding: 40px 32px; border-radius: 20px; background: var(--dns-bg-surface, rgba(15,23,42,.85)); border: 1px solid var(--dns-border-strong, rgba(148,163,184,.2)); box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: dns-maint-in .35s ease-out; }
.dns-maint-card h1 { margin: 18px 0 8px; font-size: 1.75rem; letter-spacing: -.02em; }
.dns-maint-msg { font-size: 1.05rem; line-height: 1.55; color: var(--dns-text-muted, #94a3b8); white-space: pre-wrap; margin: 0 0 6px; }
.dns-maint-since { font-size: .85rem; color: var(--dns-text-muted, #94a3b8); opacity: .8; margin: 0 0 20px; }
.dns-maint-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dns-maint-foot { margin: 18px 0 0; font-size: .78rem; color: var(--dns-text-muted, #94a3b8); opacity: .7; }
@keyframes dns-maint-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
html.light-theme .dns-maint { background: radial-gradient(1200px 600px at 50% -10%, rgba(99,102,241,.12), transparent 60%), #f8fafc; color: #0f172a; }
html.light-theme .dns-maint-card { background: #fff; border-color: #e2e8f0; box-shadow: 0 30px 80px rgba(15,23,42,.12); }
/* Admin → Downtime tab */
.add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.add-card.down { border-color: rgba(239,68,68,.55); box-shadow: inset 0 0 0 1px rgba(239,68,68,.25); }
.add-card.current { outline: 2px dashed rgba(99,102,241,.5); outline-offset: 2px; }
.add-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.add-head h3 { margin: 0; }
.add-pill { font-size: .72rem; padding: 3px 9px; border-radius: 999px; font-weight: 600; letter-spacing: .02em; }
.add-pill.up { background: rgba(34,197,94,.15); color: #86efac; }
.add-pill.off { background: rgba(239,68,68,.18); color: #fca5a5; }
.add-pill.me { background: rgba(99,102,241,.18); color: #c7d2fe; margin-left: 6px; }
.add-card textarea { width: 100%; min-height: 84px; resize: vertical; margin: 8px 0 10px; }
.add-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-meta { font-size: .78rem; margin: 8px 0 0; }
html.light-theme .add-pill.up { color: #15803d; }
html.light-theme .add-pill.off { color: #b91c1c; }
html.light-theme .add-pill.me { color: #3730a3; }
/* ═══════════════════════════════════════════════════════════════════════════
Mobile landing polish: theme toggle lives in the top strip, one-line tagline,
compact composer with a single aligned tool row (upload · improve · voice · Mira · Plan · Build).
═══════════════════════════════════════════════════════════════════════════ */
.dns-mobile-theme { display: none; }
@media (max-width: 760px) {
.landing-root .theme-toggle-fixed { display: none !important; }
.dns-mobile-bar .dns-mobile-theme { position: static; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: none; }
.landing-root .landing-hero p { font-size: clamp(.72rem, 3.3vw, .86rem); max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-root .landing-chat-textarea { min-height: 56px; max-height: 38dvh; }
.landing-root .landing-chat-card { padding: 10px 10px 8px 12px; }
.landing-root .landing-chat-footer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.landing-root .landing-chat-name-input { flex-basis: 100%; order: -2; height: 34px; font-size: .8rem; }
.landing-root .dns-model-pick { flex-basis: 100%; order: -1; }
.landing-root .dns-model-pick-btn { width: 100%; justify-content: center; }
.landing-root .btn-upload.dns-tool-icon, .landing-root .dns-agent-btn.dns-tool-icon { width: 38px; height: 38px; flex: 0 0 auto; }
.landing-root .landing-chat-actions { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.landing-root .landing-chat-actions .btn-plan { height: 38px; padding: 0 12px; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.landing-root .landing-chat-actions .btn-plan .dns-btn-ico { width: 15px; height: 15px; }
.landing-root .landing-chat-actions .btn-build { width: 38px; height: 38px; }
}
/* Model picker: readable at any size (bigger type, clear rows, a cost legend instead of a sentence). */
.dns-model-menu { width: min(440px, calc(100vw - 24px)); padding: 8px; border-radius: 16px; gap: 3px; }
.dns-model-menu-head { padding: 10px 12px 12px; gap: 8px; }
.dns-model-menu-head strong { font-size: .95rem; }
.dns-model-menu-head small { font-size: .78rem; line-height: 1.55; }
.dns-model-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 10px; font-size: .74rem; color: var(--dns-text-muted); }
.dns-model-legend > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(127,127,127,.1); white-space: nowrap; }
.dns-model-item { padding: 10px 12px; gap: 14px; border-radius: 12px; align-items: flex-start; }
.dns-model-item-main { gap: 3px; flex: 1 1 auto; }
.dns-model-item-main b { font-size: .9rem; }
.dns-model-item-main small { font-size: .78rem; line-height: 1.5; -webkit-line-clamp: 3; }
.dns-model-item > .dns-cost-dots { flex: 0 0 auto; font-size: .8rem; letter-spacing: .08em; padding-top: 2px; white-space: nowrap; }
.dns-model-menu-upsell { font-size: .84rem; padding: 11px 14px; }
@media (max-width: 760px) {
.dns-model-menu { position: fixed; left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: calc(100vw - 20px); max-height: 82dvh; z-index: 6600; }
.dns-menu-backdrop { z-index: 6500; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Pricing: cards first. Hero → one-line status → looping offer ticker → toggle → cards.
Offers and Mira live below the cards in one uniform band.
═══════════════════════════════════════════════════════════════════════════ */
.pr-hero { margin-bottom: 28px; }
.pr-hero .pr-hero-lead { max-width: 640px; margin: 0 auto; }
.pr-status { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 22px auto 0; padding: 12px 18px; border-radius: 14px; font-size: 14px; line-height: 1.5; text-align: left; color: var(--dns-text); background: var(--dnsc-card); border: 1px solid var(--dnsc-card-border); }
.pr-status.ok { background: rgba(61,220,154,.08); border-color: rgba(61,220,154,.3); }
.pr-status.ok b { color: var(--dnsc-ok); }
.pr-status > span:first-child { font-size: 1.3rem; flex: 0 0 auto; }
.pr-marquee { position: relative; max-width: 1040px; margin: 18px auto 0; overflow: hidden; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dnsc-brand-2) 35%, var(--dnsc-card-border)); background: linear-gradient(90deg, color-mix(in srgb, var(--dnsc-brand-2) 16%, var(--dnsc-card)), var(--dnsc-card) 50%, color-mix(in srgb, var(--dnsc-brand-3) 16%, var(--dnsc-card))); box-shadow: 0 10px 40px -20px color-mix(in srgb, var(--dnsc-brand-2) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.06); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pr-marquee::before { content: "LIVE"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #fff; background: linear-gradient(135deg, var(--dnsc-brand-2), var(--dnsc-brand-3)); box-shadow: 0 6px 16px -6px var(--dnsc-brand-2); pointer-events: none; }
.pr-marquee::after { content: ""; position: absolute; left: 20px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; z-index: 3; animation: prLivePulse 1.4s ease-in-out infinite; pointer-events: none; opacity: 0; }
.pr-marquee-track { display: inline-flex; white-space: nowrap; padding: 11px 0 11px 64px; animation: prMarquee calc(var(--pr-marquee-items, 4) * 6.5s) linear infinite; will-change: transform; }
.pr-marquee:hover .pr-marquee-track { animation-play-state: paused; }
.pr-marquee-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 22px; font-size: 13.5px; color: var(--dns-text-muted); border-right: 0; }
.pr-marquee-item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; margin-left: 22px; background: color-mix(in srgb, var(--dnsc-brand-2) 70%, transparent); flex: 0 0 auto; }
.pr-marquee-item b { color: var(--dns-text-strong); font-weight: 700; }
.pr-marquee-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: .95rem; background: color-mix(in srgb, var(--dnsc-brand-2) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dnsc-brand-2) 30%, transparent); flex: 0 0 auto; }
.pr-marquee-code { padding: 2px 8px; border-radius: 6px; font-weight: 800; letter-spacing: .05em; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--dnsc-brand-2), var(--dnsc-brand-3)); }
@keyframes prMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes prLivePulse { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pr-marquee-track { animation: none; flex-wrap: wrap; white-space: normal; justify-content: center; padding-left: 0; } .pr-marquee-item[aria-hidden="true"] { display: none; } .pr-marquee::before, .pr-marquee::after { display: none; } }
.pr-hero .pr-toggle { margin-top: 22px; }
.pr-grid.pr-grid-top { margin-top: 8px; }
.pr-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); gap: 16px; max-width: 1100px; margin: 24px auto 0; }
.pr-band-card { border-radius: 20px; border: 1px solid var(--dnsc-card-border); background: var(--dnsc-card); box-shadow: var(--dnsc-shadow); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.pr-band-offer h4 { margin: 0; font-size: 17px; color: var(--dns-text-strong); }
.pr-band-offer p { margin: 0; font-size: 14px; color: var(--dns-text-muted); }
.pr-band-offer.applied { border-color: #22c55e; }
.pr-band-cta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.pr-band .pr-nady.pr-nady-compact { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-column: 1 / -1; margin-top: 0; padding: 16px 20px; gap: 16px; border-radius: 16px; }
.pr-nady-compact .pr-nady-orb { width: 48px; height: 48px; }
.pr-nady-compact .pr-nady-orb strong { font-size: 1.3rem; }
.pr-nady-compact .pr-nady-cta { grid-column: auto; }
.pr-nady-compact h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.pr-nady-compact p { font-size: .9rem; max-width: 70ch; }
@media (max-width: 760px) {
.pr-hero { margin-bottom: 18px; }
.pr-status { margin-top: 16px; padding: 10px 14px; font-size: 13px; }
.pr-marquee { margin-top: 14px; border-radius: 14px; }
.pr-marquee-item { font-size: 12.5px; padding: 0 16px; }
.pr-band { margin-top: 28px; }
.pr-band .pr-nady.pr-nady-compact { grid-template-columns: auto minmax(0,1fr); text-align: left; }
.pr-nady-compact .pr-nady-cta { grid-column: 1 / -1; }
}
.pr-credit-details { max-width: 1100px; margin: 18px auto; border: 1px solid var(--dns-border-strong); border-radius: 12px; padding: 12px 16px; }
.pr-credit-details summary { cursor: pointer; font-weight: 600; color: var(--dns-text-strong); }
.pr-credit-details summary span { font-weight: 400; font-size: .8rem; color: var(--dns-text-muted); margin-left: 12px; }
.pr-credit-details .pr-legend { margin: 16px 0 8px; text-align: left; }
.pr-credit-details .pr-tax-note { margin-bottom: 0; text-align: left; }
.dns-gen-surface-inner:has(.dns-blueprint-drafting) { width: 100%; max-width: 1040px; overflow-y: auto; padding: clamp(20px,4vw,48px); box-sizing: border-box; }
.dns-blueprint-drafting { text-align: left; width: 100%; color: var(--dns-text-strong); }
.dns-draft-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--dns-accent); }
.dns-blueprint-drafting h2 { font-size: clamp(1.6rem,3vw,2.6rem); line-height: 1.15; margin: 12px 0; }
.dns-blueprint-drafting > p { color: var(--dns-text-muted); max-width: 62ch; line-height: 1.6; }
.dns-blueprint-drafting blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--dns-accent); background: var(--dns-bg-elevated); border-radius: 0 12px 12px 0; max-height: 150px; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.dns-draft-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr)); gap: 12px; margin: 24px 0; }
.dns-draft-grid article { padding: 20px; border: 1px solid var(--dns-border-strong); border-radius: 16px; background: linear-gradient(145deg,rgba(99,102,241,.1),transparent),var(--dns-bg-elevated); }
.dns-draft-grid article > span { font-size: .68rem; letter-spacing: .1em; color: var(--dns-text-muted); }
.dns-draft-grid h3 { font-size: 1rem; margin: 12px 0 8px; }
.dns-draft-grid p, .dns-blueprint-drafting > small { font-size: .84rem; color: var(--dns-text-muted); line-height: 1.6; }
@media (max-width: 540px) {
.pr-credit-details summary span { display: block; margin: 4px 0 0; }
.dns-model-menu { max-width: calc(100vw - 32px); }
}
/* Mobile landing: original Bolt-style blue stage (edge-to-edge, not rounded), big white heading,
dark glass composer with rotating tracer, plus a subtle digital grid / scan-line layer on top. */
@media (max-width: 760px) {
:is(html, html.light-theme) .landing-root .landing-ai-panel {
position: relative; isolation: isolate; overflow: visible !important;
margin: 0 !important; border-radius: 0 !important; border: 0; box-shadow: none;
min-height: calc(100dvh - 56px); padding: 30px 16px 110px;
background:
radial-gradient(90% 60% at 50% 0%, rgba(96,165,250,.55), transparent 65%),
radial-gradient(70% 50% at 50% 100%, rgba(37,99,235,.55), transparent 70%),
linear-gradient(180deg, #0b2a6b 0%, #0a1f52 45%, #081536 100%);
background-size: 100% 100%, 100% 100%, 100% 100%; animation: none;
}
:is(html, html.light-theme) .landing-root .dns-landing-guest .landing-ai-panel { padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
:is(html, html.light-theme) .landing-root .landing-ai-panel::before {
content: ""; display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
background-image: linear-gradient(rgba(150,200,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(150,200,255,.09) 1px, transparent 1px);
background-size: 44px 44px, 44px 44px; transform: none; filter: none; animation: none;
mask-image: linear-gradient(#000 15%, rgba(0,0,0,.4) 60%, transparent 95%); -webkit-mask-image: linear-gradient(#000 15%, rgba(0,0,0,.4) 60%, transparent 95%);
}
:is(html, html.light-theme) .landing-root .landing-ai-panel::after {
content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; width: auto; height: 160px; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(120,196,255,.14) 50%, rgba(140,210,255,.32) 52%, transparent 54%);
filter: none; opacity: 0; will-change: transform, opacity; transform: translate3d(0,-160px,0);
animation: dnsScanLine 11s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes dnsScanLine {
0% { transform: translate3d(0,-160px,0); opacity: 0; }
12%, 70% { opacity: .9; }
85%, 100% { transform: translate3d(0,100%,0); opacity: 0; }
}
:is(html, html.light-theme) .landing-root .landing-hero { text-align: center; margin-bottom: 18px; max-width: 100%; }
:is(html, html.light-theme) .landing-root .landing-hero-badge { padding: 9px 18px; font-size: .9rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #eaf2ff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); margin-bottom: clamp(28px, 8vh, 64px); }
:is(html, html.light-theme) .landing-root .landing-hero h1 { font-size: clamp(2rem, 9.5vw, 2.7rem); white-space: normal; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 8px; color: #fff; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 6px 30px rgba(0,0,0,.35); font-weight: 800; }
:is(html, html.light-theme) .landing-root .landing-hero p { font-size: 1rem; color: rgba(226,236,255,.85); -webkit-text-fill-color: rgba(226,236,255,.85); max-width: 32ch; margin: 0 auto; white-space: normal; overflow: visible; }
:is(html, html.light-theme) .landing-root .landing-chat-card { width: 100%; border-radius: 22px; padding: 12px 12px 10px 14px; background: rgba(8,12,24,.92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:is(html, html.light-theme) .landing-root .landing-chat-card.dns-motion-border::before { display: block; background: linear-gradient(180deg, rgba(147,197,253,.5), rgba(147,197,253,.14) 40%, rgba(147,197,253,.08)); }
:is(html, html.light-theme) .landing-root .landing-chat-card.dns-motion-border::after { display: block; background: conic-gradient(from var(--dns-mb-angle), transparent 0deg, transparent 300deg, rgba(147,197,253,.18) 318deg, rgba(219,234,254,.98) 345deg, rgba(147,197,253,.18) 356deg, transparent 360deg); filter: drop-shadow(0 0 5px rgba(96,165,250,.85)); }
:is(html, html.light-theme) .landing-root .landing-chat-card:focus-within { border-color: rgba(255,255,255,.14); box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); outline: none; }
:is(html, html.light-theme) .landing-root .landing-chat-textarea { min-height: 72px; max-height: 38dvh; font-size: 16px; color: #f1f5f9; -webkit-text-fill-color: #f1f5f9; background: transparent; outline: none; box-shadow: none; caret-color: #93c5fd; }
:is(html, html.light-theme) .landing-root .landing-chat-textarea:focus,
:is(html, html.light-theme) .landing-root .landing-chat-textarea:focus-visible { outline: none; box-shadow: none; border-color: transparent; }
:is(html, html.light-theme) .landing-root .landing-chat-textarea::placeholder { color: rgba(203,213,225,.6); -webkit-text-fill-color: rgba(203,213,225,.6); }
:is(html, html.light-theme) .landing-root .landing-chat-footer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
:is(html, html.light-theme) .landing-root .landing-chat-name-input { flex-basis: 100%; order: -2; height: 34px; font-size: .8rem; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
:is(html, html.light-theme) .landing-root .btn-upload.dns-tool-icon, :is(html, html.light-theme) .landing-root .dns-agent-btn.dns-tool-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #e2e8f0; }
:is(html, html.light-theme) .landing-root .btn-upload.dns-tool-icon:disabled, :is(html, html.light-theme) .landing-root .dns-agent-btn.dns-tool-icon:disabled { opacity: 1; color: rgba(226,232,240,.55); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
:is(html, html.light-theme) .landing-root .btn-upload.dns-tool-icon:disabled .dns-btn-ico, :is(html, html.light-theme) .landing-root .btn-upload.dns-tool-icon:disabled .dns-tool-glyph { opacity: .7; }
:is(html, html.light-theme) .landing-root .btn-upload.dns-tool-icon .dns-tool-glyph { font-size: 17px; }
:is(html, html.light-theme) .landing-root .dns-agent-btn.dns-tool-icon .dns-agent-ico { width: 20px; height: 20px; }
:is(html, html.light-theme) .landing-root .dns-agent-btn.dns-tool-icon:disabled .dns-agent-ico { opacity: .7; }
:is(html, html.light-theme) .landing-root .landing-chat-actions { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; width: auto; }
:is(html, html.light-theme) .landing-root .landing-chat-actions .btn-plan { height: 40px; padding: 0 14px; font-size: .84rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #e2e8f0; display: inline-flex; align-items: center; gap: 6px; }
:is(html, html.light-theme) .landing-root .landing-chat-actions .btn-build { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6, #2563eb); border: 0; color: #fff; box-shadow: 0 10px 24px -8px rgba(59,130,246,.8); }
:is(html, html.light-theme) .landing-root .landing-chat-actions .btn-build span { display: none; }
:is(html, html.light-theme) .landing-root .landing-chat-actions .btn-build .dns-btn-ico { width: 18px; height: 18px; }
:is(html, html.light-theme) .landing-root .dns-recent-strip-head { color: #eaf2ff; }
:is(html, html.light-theme) .landing-root .dns-recent-viewall { color: #93c5fd; }
:is(html, html.light-theme) .landing-root .dns-recent-card { background: rgba(8,12,24,.7); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
:is(html, html.light-theme) .landing-root .dns-recent-name { color: #f1f5f9; }
:is(html, html.light-theme) .landing-root .dns-recent-fact, :is(html, html.light-theme) .landing-root .dns-recent-meta { color: #cbd5e1; }
/* Guest controls over the blue stage; larger wordmark for phone screens. */
:is(html, html.light-theme) .landing-root .dns-guest-viewport > .dns-guest-brand { top: calc(14px + env(safe-area-inset-top, 0px)); height: 48px; max-width: calc(100% - 170px); }
:is(html, html.light-theme) .landing-root .dns-guest-brand .dns-logo { width: 190px; height: 38px; background-image: url('../img/dotblazer-logo-dark.svg'); }
:is(html, html.light-theme) .landing-root .dns-guest-viewport > .dns-guest-actions { top: calc(14px + env(safe-area-inset-top, 0px)); height: 48px; }
:is(html, html.light-theme) .landing-root .dns-guest-theme { color: #e2e8f0; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); box-shadow: none; }
:is(html, html.light-theme) .landing-root .dns-mobile-logo .dns-logo { height: 34px; max-width: 172px; background-image: url('../img/dotblazer-logo-dark.svg'); }
@media (max-width: 360px) {
:is(html, html.light-theme) .landing-root .dns-guest-brand .dns-logo { width: 150px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
:is(html, html.light-theme) .landing-root .landing-ai-panel::after { animation: none; opacity: 0; }
}
/* Light theme: same stage, grid, scan line and composer tracer — only the palette changes
(airy indigo/sky wash instead of the deep blue), with ink-dark copy and matching fonts. */
html.light-theme .landing-root .landing-ai-panel {
background:
radial-gradient(90% 60% at 50% 0%, rgba(165,180,252,.55), transparent 65%),
radial-gradient(70% 50% at 50% 100%, rgba(125,211,252,.45), transparent 70%),
linear-gradient(180deg, #eef2ff 0%, #f3f6fc 45%, #e6f0fb 100%);
}
html.light-theme .landing-root .landing-ai-panel::before {
background-image: linear-gradient(rgba(99,102,241,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.10) 1px, transparent 1px);
}
html.light-theme .landing-root .landing-ai-panel::after {
background: linear-gradient(180deg, transparent, rgba(99,102,241,.10) 50%, rgba(129,140,248,.28) 52%, transparent 54%);
}
html.light-theme .landing-root .landing-hero-badge { background: rgba(255,255,255,.75); border-color: rgba(99,102,241,.25); color: #4338ca; box-shadow: 0 10px 30px -14px rgba(79,70,229,.35); }
html.light-theme .landing-root .landing-hero h1 { color: #0f172a; -webkit-text-fill-color: #0f172a; text-shadow: 0 6px 30px rgba(99,102,241,.18); }
html.light-theme .landing-root .landing-hero p { color: #475569; -webkit-text-fill-color: #475569; }
html.light-theme .landing-root .landing-chat-card { background: rgba(255,255,255,.92); border-color: rgba(99,102,241,.16); box-shadow: 0 30px 70px -24px rgba(79,70,229,.35), inset 0 1px 0 rgba(255,255,255,.9); }
html.light-theme .landing-root .landing-chat-card.dns-motion-border::before { background: linear-gradient(180deg, rgba(99,102,241,.55), rgba(99,102,241,.22) 40%, rgba(99,102,241,.14)); }
html.light-theme .landing-root .landing-chat-card.dns-motion-border::after { inset: -2px; padding: 2px; background: conic-gradient(from var(--dns-mb-angle), transparent 0deg, transparent 270deg, rgba(79,70,229,.25) 300deg, rgba(67,56,202,1) 340deg, rgba(79,70,229,.25) 356deg, transparent 360deg); filter: drop-shadow(0 0 6px rgba(67,56,202,.9)) drop-shadow(0 0 14px rgba(99,102,241,.55)); }
html.light-theme .landing-root .landing-chat-card:focus-within { border-color: rgba(99,102,241,.3); box-shadow: 0 30px 70px -24px rgba(79,70,229,.4), inset 0 1px 0 rgba(255,255,255,.9); }
html.light-theme .landing-root .landing-chat-textarea { color: #0f172a; -webkit-text-fill-color: #0f172a; caret-color: #4f46e5; }
html.light-theme .landing-root .landing-chat-textarea::placeholder { color: #94a3b8; -webkit-text-fill-color: #94a3b8; }
html.light-theme .landing-root .landing-chat-name-input { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
html.light-theme .landing-root .btn-upload.dns-tool-icon, html.light-theme .landing-root .dns-agent-btn.dns-tool-icon { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
html.light-theme .landing-root .btn-upload.dns-tool-icon:disabled, html.light-theme .landing-root .dns-agent-btn.dns-tool-icon:disabled { color: rgba(51,65,85,.5); background: #f8fafc; border-color: #eef2f7; }
html.light-theme .landing-root .landing-chat-actions .btn-plan { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
html.light-theme .landing-root .landing-chat-actions .btn-build { background: linear-gradient(135deg, #7c5cff, #4f46e5); box-shadow: 0 10px 24px -8px rgba(79,70,229,.6); }
html.light-theme .landing-root .dns-recent-strip-head { color: #0f172a; }
html.light-theme .landing-root .dns-recent-viewall { color: #4f46e5; }
html.light-theme .landing-root .dns-recent-card { background: rgba(255,255,255,.85); border-color: rgba(99,102,241,.14); color: #1e293b; }
html.light-theme .landing-root .dns-recent-name { color: #0f172a; }
html.light-theme .landing-root .dns-recent-fact, html.light-theme .landing-root .dns-recent-meta { color: #64748b; }
html.light-theme .landing-root .dns-mobile-logo .dns-logo, html.light-theme .landing-root .dns-guest-brand .dns-logo { background-image: url('../img/dotblazer-logo-light.svg'); opacity: 1; filter: none; }
html.light-theme .landing-root .dns-guest-theme { color: #334155; background: rgba(255,255,255,.8); border-color: rgba(99,102,241,.2); }
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
Mobile landing (≤ 760px): drop the blue Bolt stage, grid and scan-line.
Phones now use exactly the desktop look — app background, gradient headline,
dark glass composer in dark mode / white card in light mode. No wave motion.
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@media (max-width: 760px) {
:is(html, html.light-theme) .landing-root .landing-ai-panel {
background: transparent !important; animation: none !important; box-shadow: none; border: 0;
margin: 0 !important; border-radius: 0 !important; isolation: auto;
}
:is(html, html.light-theme) .landing-root .landing-ai-panel::before,
:is(html, html.light-theme) .landing-root .landing-ai-panel::after { display: none !important; content: none; animation: none !important; }
:is(html, html.light-theme) .landing-root .dns-main-content { background: var(--dns-bg-app); }
/* Headline / copy: same as desktop (html:not(.light-theme) outranks the :is(html, html.light-theme) stage rules above) */
html:not(.light-theme) .landing-root .landing-hero h1 { color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; font-weight: 800;
background: linear-gradient(135deg, #f8fafc 20%, #c7d2fe 55%, #38bdf8 90%); -webkit-background-clip: text; background-clip: text; }
html:not(.light-theme) .landing-root .landing-hero p { color: #94a3b8; -webkit-text-fill-color: #94a3b8; }
html:not(.light-theme) .landing-root .landing-hero-badge { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.3); color: #a5b4fc; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.light-theme .landing-root .landing-hero h1 { background: linear-gradient(135deg, #1e1b4b 10%, #4338ca 55%, #0369a1 95%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
html.light-theme .landing-root .landing-hero p { color: #374151; -webkit-text-fill-color: #374151; }
html.light-theme .landing-root .landing-hero-badge { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
/* Composer: desktop colours (dark glass / white) and the regular rectangular tool buttons */
.landing-root .landing-chat-card { background: rgba(11,16,28,.98); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 20px; }
.landing-root .landing-chat-card.dns-motion-border::before, .landing-root .landing-chat-card.dns-motion-border::after { display: none; }
.landing-root .landing-chat-card:focus-within { box-shadow: inset 0 0 0 1.5px rgba(99,102,241,.9), 0 0 0 3px rgba(99,102,241,.15), 0 0 40px rgba(99,102,241,.28), 0 20px 44px rgba(0,0,0,.5); }
html.light-theme .landing-root .landing-chat-card { background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 30px -14px rgba(79,70,229,.25), inset 0 0 0 1px rgba(99,102,241,.18); }
html.light-theme .landing-root .landing-chat-card:focus-within { box-shadow: inset 0 0 0 1.5px rgba(99,102,241,.9), 0 0 0 3px rgba(99,102,241,.12), 0 10px 30px -14px rgba(79,70,229,.3); }
.landing-root .landing-chat-textarea { color: #f1f5f9; -webkit-text-fill-color: #f1f5f9; caret-color: #6366f1; }
.landing-root .landing-chat-textarea::placeholder { color: #475569; -webkit-text-fill-color: #475569; }
html.light-theme .landing-root .landing-chat-textarea { color: #0f172a; -webkit-text-fill-color: #0f172a; }
html.light-theme .landing-root .landing-chat-textarea::placeholder { color: #9ca3af; -webkit-text-fill-color: #9ca3af; }
/* Guest controls / logo back to theme-aware desktop assets */
.landing-root .dns-guest-theme { color: var(--dns-text-strong); background: transparent; border-color: rgba(148,174,223,.2); }
html.light-theme .landing-root .dns-guest-theme { color: #334155; background: rgba(255,255,255,.8); border-color: rgba(99,102,241,.2); }
.landing-root .dns-guest-brand .dns-logo, .landing-root .dns-mobile-logo .dns-logo { background-image: url('../img/dotblazer-logo-dark.svg'); }
html.light-theme .landing-root .dns-guest-brand .dns-logo, html.light-theme .landing-root .dns-mobile-logo .dns-logo { background-image: url('../img/dotblazer-logo-light.svg'); }
/* Recent projects: desktop card palette */
.landing-root .dns-recent-strip-head { color: var(--dns-text-strong); }
.landing-root .dns-recent-viewall { color: #a5b4fc; }
.landing-root .dns-recent-card { background: var(--dns-bg-surface); border-color: var(--dns-border); color: var(--dns-text); }
html.light-theme .landing-root .dns-recent-strip-head { color: #0f172a; }
html.light-theme .landing-root .dns-recent-viewall { color: #4f46e5; }
html.light-theme .landing-root .dns-recent-card { background: #fff; border-color: #e2e8f0; color: #1e293b; }
}
/* Prompt editor: a little shorter so the hero, composer and recents breathe */
.landing-chat-textarea { min-height: 56px; padding-top: 10px; }
@media (min-width: 761px) { .landing-root .landing-chat-textarea { min-height: 56px; } }
@media (max-width: 760px) { :is(html, html.light-theme) .landing-root .landing-chat-textarea { min-height: 52px; } }
/* ============================================================================
DNS-SC — "Built with DotBlazer" immersive showcase (namespaced; landing only)
Typography: Manrope display + Instrument Serif italic accents, Inter body.
============================================================================ */
.dns-sc { position: relative; isolation: isolate; width: 100%; padding: clamp(56px, 9vh, 110px) 0 clamp(64px, 10vh, 120px); overflow: hidden; background: var(--dns-bg-app); color: var(--dns-text); }
.dns-sc::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: linear-gradient(180deg, var(--dns-bg-app), transparent); z-index: 1; pointer-events: none; }
.dns-sc-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dns-sc-sky::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(148,163,184,.14) 1px, transparent 1.2px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); }
.dns-sc-sky i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; animation: dnsScDrift 22s ease-in-out infinite alternate; }
.dns-sc-sky .a { width: 620px; height: 620px; left: -160px; top: -120px; background: radial-gradient(circle, rgba(124,92,255,.55), transparent 65%); }
.dns-sc-sky .b { width: 520px; height: 520px; right: -140px; top: 10%; background: radial-gradient(circle, rgba(56,189,248,.45), transparent 65%); animation-delay: -8s; animation-duration: 26s; }
.dns-sc-sky .c { width: 700px; height: 700px; left: 35%; bottom: -320px; background: radial-gradient(circle, rgba(99,102,241,.35), transparent 65%); animation-delay: -15s; animation-duration: 30s; }
@keyframes dnsScDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px, 40px, 0) scale(1.12); } }
.dns-sc-inner { position: relative; z-index: 2; width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
/* ---- Heading ---- */
.dns-sc-head { text-align: center; max-width: 780px; margin: 0 auto clamp(32px, 5vh, 56px); }
.dns-sc-eyebrow { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px 0 10px; border-radius: 999px; font-family: var(--dns-font-display); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c7d2fe; background: rgba(99,102,241,.12); border: 1px solid rgba(165,180,252,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dns-sc-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 0 rgba(167,139,250,.6); animation: dnsScPing 2.2s ease-out infinite; }
@keyframes dnsScPing { 0% { box-shadow: 0 0 0 0 rgba(167,139,250,.6); } 100% { box-shadow: 0 0 0 10px rgba(167,139,250,0); } }
.dns-sc-head h2 { margin: 22px 0 16px; font-family: var(--dns-font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.0; text-wrap: balance; color: var(--dns-text-strong, #f8fafc); }
.dns-sc-head h2 em { font-family: var(--dns-font-accent); font-style: normal; font-weight: 800; font-size: 1em; letter-spacing: -.02em; padding-right: .06em; background: linear-gradient(90deg, #e0e7ff 0%, #a5b4fc 45%, #67e8f9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dns-sc-head p { margin: 0 auto; max-width: 56ch; font-size: clamp(1.02rem, 1.2vw, 1.18rem); font-weight: 400; line-height: 1.7; letter-spacing: -.005em; color: var(--dns-text-muted); text-wrap: pretty; }
.dns-sc-head p strong { font-weight: 600; color: var(--dns-text-strong, #f8fafc); }
.dns-sc-head p em { font-family: var(--dns-font-accent); font-style: normal; font-weight: 700; color: #c7d2fe; }
/* ---- Filter / search bar ---- */
.dns-sc-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.dns-sc-chips { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(15,23,42,.55); border: 1px solid rgba(148,163,184,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dns-sc-chips::-webkit-scrollbar { display: none; }
.dns-sc-chips button { flex: none; position: relative; font: inherit; font-family: var(--dns-font-display); font-size: .8rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--dns-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .2s, background .2s; }
.dns-sc-chips button small { font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(148,163,184,.16); }
.dns-sc-chips button:hover { color: var(--dns-text-strong, #f8fafc); background: rgba(148,163,184,.08); }
.dns-sc-chips button.on { color: #fff; background: linear-gradient(135deg, #7c5cff, #4f46e5 55%, #2563eb); box-shadow: 0 8px 22px -10px rgba(99,102,241,.95), inset 0 1px 0 rgba(255,255,255,.2); }
.dns-sc-chips button.on small { background: rgba(255,255,255,.22); }
.dns-sc-search { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; min-width: 220px; background: rgba(15,23,42,.55); border: 1px solid rgba(148,163,184,.16); color: var(--dns-text-muted); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .2s, box-shadow .2s; }
.dns-sc-search:focus-within { border-color: rgba(129,140,248,.6); box-shadow: 0 0 0 4px rgba(99,102,241,.16); }
.dns-sc-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: .86rem; color: var(--dns-text, #e2e8f0); }
.dns-sc-search input::placeholder { color: var(--dns-text-muted); }
.dns-sc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* ---- Bento grid ---- */
.dns-sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); grid-auto-flow: dense; gap: 18px; }
.dns-sc-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; border-radius: 22px; overflow: hidden; cursor: pointer; outline: none; background: #0b1220; border: 1px solid rgba(148,163,184,.14); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(2,6,23,.9); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .3s; }
.dns-sc-card.feat { grid-column: span 2; grid-row: span 2; min-height: 520px; }
.dns-sc-card:hover, .dns-sc-card:focus-visible { transform: translateY(-6px) scale(1.01); border-color: rgba(165,180,252,.45); box-shadow: 0 0 0 1px rgba(129,140,248,.25), 0 40px 80px -40px rgba(99,102,241,.7); z-index: 2; }
.dns-sc-card:focus-visible { outline: 2px solid rgba(165,180,252,.8); outline-offset: 3px; }
.dns-sc-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(135deg, #111c33, #0b1220); }
.dns-sc-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transform: scale(1.001); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), object-position 7s linear; filter: saturate(1.05); }
.dns-sc-card:hover .dns-sc-media img { transform: scale(1.08); object-position: bottom center; }
.dns-sc-mono { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(124,92,255,.5), transparent 55%), radial-gradient(circle at 80% 80%, rgba(56,189,248,.4), transparent 55%), #0f172a; }
.dns-sc-mono b { font-family: var(--dns-font-display); font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; letter-spacing: -.06em; color: rgba(255,255,255,.9); text-shadow: 0 10px 40px rgba(0,0,0,.5); }
.dns-sc-shine { position: absolute; inset: -40%; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transform: translateX(-120%) rotate(8deg); opacity: 0; }
.dns-sc-card:hover .dns-sc-shine { animation: dnsScShine 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes dnsScShine { 0% { transform: translateX(-120%) rotate(8deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(120%) rotate(8deg); opacity: 0; } }
.dns-sc-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2,6,23,.05) 0%, rgba(2,6,23,.15) 40%, rgba(2,6,23,.82) 75%, rgba(2,6,23,.95) 100%); transition: opacity .4s; }
.dns-sc-top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dns-sc-host, .dns-sc-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--dns-font-display); font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: #e2e8f0; background: rgba(2,6,23,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns-sc-host i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; flex: none; }
.dns-sc-tag { color: #c7d2fe; background: rgba(99,102,241,.3); border-color: rgba(165,180,252,.35); }
.dns-sc-body { position: relative; z-index: 3; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.dns-sc-card.feat .dns-sc-body { padding: 26px 28px 28px; }
.dns-sc-body h3 { margin: 0; font-family: var(--dns-font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.dns-sc-card.feat .dns-sc-body h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.035em; }
.dns-sc-body p { margin: 0; font-size: .84rem; line-height: 1.55; color: rgba(226,232,240,.84); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 54ch; }
.dns-sc-card.feat .dns-sc-body p { font-size: .98rem; -webkit-line-clamp: 3; }
.dns-sc-cta { display: flex; gap: 8px; margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.dns-sc-card:hover .dns-sc-cta, .dns-sc-card:focus-visible .dns-sc-cta, .dns-sc-card.feat .dns-sc-cta { max-height: 60px; opacity: 1; transform: none; }
.dns-sc-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; font-family: var(--dns-font-display); font-size: .78rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; color: #fff; transition: transform .2s, background .2s, filter .2s; }
.dns-sc-btn.ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dns-sc-btn.solid { background: linear-gradient(135deg, #7c5cff, #4f46e5 55%, #2563eb); box-shadow: 0 10px 24px -12px rgba(99,102,241,.9); }
.dns-sc-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dns-sc-empty { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--dns-text-muted); border: 1px dashed rgba(148,163,184,.25); border-radius: 18px; }
/* ---- Show all ---- */
.dns-sc-more { display: flex; justify-content: center; margin-top: 36px; }
.dns-sc-more button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font: inherit; font-family: var(--dns-font-display); font-size: .88rem; font-weight: 700; letter-spacing: .01em; color: var(--dns-text-strong, #f8fafc); background: rgba(15,23,42,.55); border: 1px solid rgba(148,163,184,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.dns-sc-more button:hover { border-color: rgba(129,140,248,.6); background: rgba(99,102,241,.14); transform: translateY(-1px); }
.dns-sc-more button svg { transition: transform .3s; }
.dns-sc-more button svg.up { transform: rotate(180deg); }
/* ---- Scroll reveal (JS flips .in; keyframe guarantees visibility without JS) ---- */
@keyframes dnsScReveal { to { opacity: 1; transform: none; } }
.dns-sc-reveal { opacity: 0; transform: translateY(26px); animation: dnsScReveal .7s cubic-bezier(.2,.8,.2,1) calc(1.2s + var(--i, 0) * 70ms) forwards; transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.dns-sc-reveal.in { opacity: 1; transform: none; animation: none; }
.dns-sc-card.dns-sc-reveal.in { transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .3s; transition-delay: 0s; }
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.dns-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); }
.dns-sc-card.feat { grid-column: span 2; grid-row: span 1; min-height: 380px; }
}
@media (max-width: 640px) {
.dns-sc-inner { width: calc(100% - 32px); }
.dns-sc-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, auto); gap: 14px; }
.dns-sc-card, .dns-sc-card.feat { grid-column: span 1; grid-row: span 1; min-height: 260px; }
.dns-sc-card.feat .dns-sc-body { padding: 18px 20px 20px; }
.dns-sc-card.feat .dns-sc-body h3 { font-size: 1.3rem; }
.dns-sc-cta { max-height: 60px; opacity: 1; transform: none; }
.dns-sc-bar { flex-direction: column; align-items: stretch; }
.dns-sc-search { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.dns-sc-sky i, .dns-sc-eyebrow i, .dns-sc-card:hover .dns-sc-shine { animation: none !important; }
.dns-sc-reveal { opacity: 1; transform: none; animation: none; transition: none; }
.dns-sc-card, .dns-sc-media img, .dns-sc-cta { transition: none; }
}
/* ---- Light theme ---- */
html.light-theme .dns-sc { background: var(--dns-bg-app); }
html.light-theme .dns-sc-sky::after { background-image: radial-gradient(rgba(71,85,105,.18) 1px, transparent 1.2px); }
html.light-theme .dns-sc-sky i { opacity: .35; }
html.light-theme .dns-sc-eyebrow { color: #4338ca; background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.25); }
html.light-theme .dns-sc-head h2 em { background: linear-gradient(90deg, #4338ca 0%, #6366f1 45%, #0891b2 100%); -webkit-background-clip: text; background-clip: text; }
html.light-theme .dns-sc-head p em { color: #4f46e5; }
html.light-theme .dns-sc-chips, html.light-theme .dns-sc-search, html.light-theme .dns-sc-more button { background: rgba(255,255,255,.75); border-color: rgba(15,23,42,.1); box-shadow: 0 6px 20px -14px rgba(15,23,42,.3); }
html.light-theme .dns-sc-chips button:hover { background: rgba(15,23,42,.05); color: #0f172a; }
html.light-theme .dns-sc-chips button small { background: rgba(15,23,42,.08); }
html.light-theme .dns-sc-card { background: #f1f5f9; border-color: rgba(15,23,42,.08); box-shadow: 0 20px 50px -30px rgba(15,23,42,.35); }
html.light-theme .dns-sc-card:hover { border-color: rgba(99,102,241,.4); box-shadow: 0 0 0 1px rgba(99,102,241,.2), 0 40px 80px -40px rgba(79,70,229,.45); }
html.light-theme .dns-sc-media { background: linear-gradient(135deg, #e2e8f0, #f8fafc); }
html.light-theme .dns-sc-mono { background: radial-gradient(circle at 30% 20%, rgba(124,92,255,.28), transparent 55%), radial-gradient(circle at 80% 80%, rgba(56,189,248,.25), transparent 55%), #eef2ff; }
html.light-theme .dns-sc-mono b { color: #312e81; text-shadow: 0 10px 30px rgba(79,70,229,.25); }
html.light-theme .dns-sc-veil { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,250,252,.12) 35%, rgba(248,250,252,.9) 70%, rgba(255,255,255,.98) 100%); }
html.light-theme .dns-sc-body h3 { color: #0f172a; text-shadow: none; }
html.light-theme .dns-sc-body p { color: #475569; }
html.light-theme .dns-sc-host { color: #0f172a; background: rgba(255,255,255,.85); border-color: rgba(15,23,42,.1); box-shadow: 0 4px 14px -8px rgba(15,23,42,.35); }
html.light-theme .dns-sc-tag { color: #4338ca; background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.28); }
html.light-theme .dns-sc-btn.ghost { color: #0f172a; background: rgba(255,255,255,.85); border-color: rgba(15,23,42,.12); }
html.light-theme .dns-sc-shine { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); }
html.light-theme .dns-sc-search input { color: #0f172a; }
html.light-theme .dns-sc-chips button { color: #475569; }
html.light-theme .dns-sc-chips button.on { color: #fff; }
html.light-theme .dns-sc-more button { color: #0f172a; }
html.light-theme .dns-sc-empty { border-color: rgba(15,23,42,.15); }
/* ============================================================================
DNS-DP — showcase details dialog (Tailwind-style sheet, subtle celebratory ambience)
============================================================================ */
.dns-dp-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(2,6,23,.66); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); animation: dnsDpFade .25s ease both; overflow: hidden; }
@keyframes dnsDpFade { from { opacity: 0; } to { opacity: 1; } }
.dns-dp-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dns-dp-glow i { position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; filter: blur(90px); opacity: 0; animation: dnsDpGlow 9s ease-in-out infinite; }
.dns-dp-glow i:nth-child(1) { left: -20vmax; top: -22vmax; background: radial-gradient(circle, rgba(124,92,255,.5), transparent 65%); }
.dns-dp-glow i:nth-child(2) { right: -22vmax; bottom: -24vmax; background: radial-gradient(circle, rgba(56,189,248,.42), transparent 65%); animation-delay: -3s; }
.dns-dp-glow i:nth-child(3) { left: 30vw; bottom: -30vmax; background: radial-gradient(circle, rgba(52,211,153,.3), transparent 65%); animation-delay: -6s; }
@keyframes dnsDpGlow { 0%,100% { opacity: .25; transform: scale(1) translate(0,0); } 50% { opacity: .5; transform: scale(1.12) translate(3vmax,-2vmax); } }
.dns-dp-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dns-dp-sparks b { position: absolute; left: calc(6% + var(--n) * 6.5%); bottom: -12px; width: 6px; height: 6px; border-radius: 2px; opacity: 0; background: hsl(calc(220 + var(--n) * 14), 90%, 70%); animation: dnsDpSpark 2.6s cubic-bezier(.2,.7,.3,1) calc(var(--n) * 90ms) 1 both; }
.dns-dp-sparks b:nth-child(odd) { border-radius: 50%; width: 5px; height: 5px; }
@keyframes dnsDpSpark { 0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(.6); } 12% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(-62vh - var(--n) * 1.4vh)) translateX(calc((var(--n) - 7) * 1.2vw)) rotate(540deg) scale(1); } }
.dns-dp { position: relative; width: min(820px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--dns-bg-surface, #0b1120); border: 1px solid rgba(148,163,184,.16); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 120px -30px rgba(2,6,23,.9), 0 0 0 1px rgba(99,102,241,.12); animation: dnsDpIn .34s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes dnsDpIn { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
.dns-dp::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, #818cf8 30%, #38bdf8 60%, transparent); opacity: .9; }
/* header */
.dns-dp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px 14px 18px; border-bottom: 1px solid rgba(148,163,184,.12); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); }
.dns-dp-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dns-dp-mark { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--dns-font-display); font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #7c5cff, #4f46e5 55%, #2563eb); box-shadow: 0 10px 24px -12px rgba(99,102,241,.9), inset 0 1px 0 rgba(255,255,255,.25); }
.dns-dp-head-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dns-dp-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--dns-font-display); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a5b4fc; }
.dns-dp-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }
.dns-dp-head h3 { margin: 0; font-family: var(--dns-font-display); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 800; letter-spacing: -.025em; color: var(--dns-text-strong, #f8fafc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-dp-head-r { display: flex; align-items: center; gap: 8px; flex: none; }
.dns-dp-x { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(148,163,184,.16); background: rgba(148,163,184,.06); color: var(--dns-text-muted); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.dns-dp-x:hover { background: rgba(148,163,184,.14); color: var(--dns-text-strong, #fff); transform: rotate(90deg); }
/* scroll body */
.dns-dp-scroll { overflow-y: auto; scrollbar-width: thin; min-height: 0; }
.dns-dp-shot { position: relative; aspect-ratio: 16 / 8.5; background: linear-gradient(135deg, #111c33, #0b1220); overflow: hidden; }
.dns-dp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dns-dp-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--dns-font-display); font-weight: 800; font-size: 5rem; letter-spacing: -.06em; color: rgba(255,255,255,.9); background: radial-gradient(circle at 30% 20%, rgba(124,92,255,.5), transparent 55%), radial-gradient(circle at 80% 80%, rgba(56,189,248,.4), transparent 55%), #0f172a; }
.dns-dp-shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(2,6,23,.75)); pointer-events: none; }
.dns-dp-shot-bar { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.dns-dp-host, .dns-dp-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--dns-font-display); font-size: .68rem; font-weight: 700; color: #e2e8f0; background: rgba(2,6,23,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dns-dp-host i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.dns-dp-tag { color: #c7d2fe; background: rgba(99,102,241,.32); border-color: rgba(165,180,252,.35); }
.dns-dp-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.dns-dp-sum { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--dns-text, #cbd5e1); }
.dns-dp-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.dns-dp-kv > div { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.12); background: rgba(148,163,184,.05); min-width: 0; }
.dns-dp-kv dt { font-family: var(--dns-font-display); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dns-text-muted); margin-bottom: 4px; }
.dns-dp-kv dd { margin: 0; font-size: .86rem; font-weight: 600; color: var(--dns-text-strong, #e2e8f0); }
.dns-dp-kv dd.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dns-dp-kv dd a { color: #a5b4fc; text-decoration: none; }
.dns-dp-kv dd a:hover { text-decoration: underline; }
/* prompt */
.dns-dp-prompt { border-radius: 16px; border: 1px solid rgba(129,140,248,.3); background: linear-gradient(180deg, rgba(99,102,241,.12), rgba(99,102,241,.05)); overflow: hidden; }
.dns-dp-prompt.empty { border-style: dashed; background: rgba(148,163,184,.04); border-color: rgba(148,163,184,.2); }
.dns-dp-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-bottom: 1px solid rgba(129,140,248,.18); }
.dns-dp-prompt.empty .dns-dp-prompt-head { border-bottom: 0; }
.dns-dp-prompt-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--dns-font-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c7d2fe; }
.dns-dp-prompt-acts { display: flex; gap: 6px; }
.dns-dp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font: inherit; font-family: var(--dns-font-display); font-size: .74rem; font-weight: 700; color: var(--dns-text-strong, #e2e8f0); background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.2); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.dns-dp-chip:hover { background: rgba(255,255,255,.12); border-color: rgba(165,180,252,.5); transform: translateY(-1px); }
.dns-dp-chip.accent { color: #fff; background: linear-gradient(135deg, #7c5cff, #4f46e5 55%, #2563eb); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(99,102,241,.9); }
.dns-dp-prompt blockquote { margin: 0; padding: 14px 16px; font-size: .92rem; line-height: 1.65; color: var(--dns-text, #e2e8f0); white-space: pre-wrap; max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
.dns-dp-prompt-none { margin: 0; padding: 0 14px 12px; font-size: .84rem; color: var(--dns-text-muted); }
/* footer */
.dns-dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid rgba(148,163,184,.12); background: rgba(2,6,23,.35); }
.dns-dp-foot-note { font-size: .78rem; color: var(--dns-text-muted); }
.dns-dp-foot-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dns-dp-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 12px; font: inherit; font-family: var(--dns-font-display); font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--dns-text-strong, #e2e8f0); background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.18); cursor: pointer; transition: transform .2s, background .2s, filter .2s, border-color .2s; white-space: nowrap; }
.dns-dp-btn:hover { transform: translateY(-1px); border-color: rgba(165,180,252,.5); background: rgba(148,163,184,.14); }
.dns-dp-btn.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3b82f6, #4f46e5); box-shadow: 0 12px 28px -12px rgba(79,70,229,.8); }
.dns-dp-btn.primary:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
.dns-dp-backdrop { padding: 0; align-items: end; }
.dns-dp { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; animation-name: dnsDpUp; }
@keyframes dnsDpUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.dns-dp-head { padding: 12px 12px 12px 14px; }
.dns-dp-head-r .dns-dp-btn { display: none; }
.dns-dp-body { padding: 16px; }
.dns-dp-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.dns-dp-foot-note { display: none; }
.dns-dp-foot-acts { width: 100%; }
.dns-dp-foot-acts .dns-dp-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .dns-dp-glow i, .dns-dp-sparks b { animation: none; } .dns-dp-sparks { display: none; } .dns-dp { animation: none; } }
/* light theme */
html.light-theme .dns-dp-backdrop { background: rgba(241,245,249,.72); }
html.light-theme .dns-dp { background: #ffffff; border-color: rgba(15,23,42,.08); box-shadow: 0 50px 120px -40px rgba(15,23,42,.45), 0 0 0 1px rgba(99,102,241,.08); }
html.light-theme .dns-dp-head { border-bottom-color: rgba(15,23,42,.08); background: linear-gradient(180deg, #fafbff, #fff); }
html.light-theme .dns-dp-kicker { color: #4f46e5; }
html.light-theme .dns-dp-head h3 { color: #0f172a; }
html.light-theme .dns-dp-x { background: #f1f5f9; border-color: rgba(15,23,42,.1); color: #475569; }
html.light-theme .dns-dp-x:hover { background: #e2e8f0; color: #0f172a; }
html.light-theme .dns-dp-shot { background: linear-gradient(135deg, #e2e8f0, #f8fafc); }
html.light-theme .dns-dp-shot::after { background: linear-gradient(180deg, transparent, rgba(255,255,255,.7)); }
html.light-theme .dns-dp-host { color: #0f172a; background: rgba(255,255,255,.9); border-color: rgba(15,23,42,.1); }
html.light-theme .dns-dp-tag { color: #4338ca; background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.28); }
html.light-theme .dns-dp-sum { color: #334155; }
html.light-theme .dns-dp-kv > div { background: #f8fafc; border-color: rgba(15,23,42,.08); }
html.light-theme .dns-dp-kv dd { color: #0f172a; }
html.light-theme .dns-dp-kv dd a { color: #4f46e5; }
html.light-theme .dns-dp-prompt { background: linear-gradient(180deg, #eef2ff, #f5f7ff); border-color: rgba(99,102,241,.25); }
html.light-theme .dns-dp-prompt-head { border-bottom-color: rgba(99,102,241,.15); }
html.light-theme .dns-dp-prompt-title { color: #4338ca; }
html.light-theme .dns-dp-chip { color: #0f172a; background: #fff; border-color: rgba(15,23,42,.12); }
html.light-theme .dns-dp-chip.accent { color: #fff; }
html.light-theme .dns-dp-prompt blockquote { color: #1e293b; }
html.light-theme .dns-dp-foot { background: #f8fafc; border-top-color: rgba(15,23,42,.08); }
html.light-theme .dns-dp-btn { color: #0f172a; background: #fff; border-color: rgba(15,23,42,.12); }
html.light-theme .dns-dp-btn.primary { color: #fff; }
/* ============================================================================
BP — blog article (magazine / newsletter reading experience)
============================================================================ */
.bp { --bp-measure: 70ch; --bp-accent: #818cf8; --bp-accent-2: #38bdf8; position: relative; margin: -48px -28px 0; }
.bp-skeleton { max-width: 760px; margin: 20px auto; display: flex; flex-direction: column; gap: 14px; }
.bp-sk-line { height: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(148,163,184,.22), rgba(148,163,184,.12)); background-size: 200% 100%; animation: bpSk 1.4s linear infinite; }
.bp-sk-line.tall { height: 38px; } .bp-sk-line.w40 { width: 40%; } .bp-sk-line.w70 { width: 70%; } .bp-sk-line.w90 { width: 90%; }
.bp-sk-block { height: 320px; border-radius: 18px; background: rgba(148,163,184,.1); animation: bpSk 1.4s linear infinite; }
@keyframes bpSk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bp-preview-bar { position: sticky; top: 64px; z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 auto; width: min(1180px, 100%); padding: 10px 28px; font-size: .84rem; color: #fde68a; background: rgba(120,53,15,.35); border-bottom: 1px solid rgba(251,191,36,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bp-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 10px #fbbf24; animation: dnsScPing 1.8s ease-out infinite; }
.bp-preview-link { margin-left: auto; color: #fde68a; font-weight: 700; text-decoration: none; }
/* hero */
.bp-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vh, 84px) 28px clamp(28px, 4vh, 44px); isolation: isolate; }
.bp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.28), transparent 60%), var(--dns-bg-app); }
.bp-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(50px) saturate(1.3); opacity: .28; transform: scale(1.2); }
.bp-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,.1), var(--dns-bg-app) 92%); }
.bp-hero-inner { width: min(860px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.bp-crumbs { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--dns-text-muted); }
.bp-crumbs a { color: inherit; text-decoration: none; } .bp-crumbs a:hover { color: var(--dns-text-strong); }
.bp-crumb-tag { padding: 3px 10px; border-radius: 999px; font-family: var(--dns-font-display); font-weight: 700; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #c7d2fe; background: rgba(99,102,241,.16); border: 1px solid rgba(165,180,252,.3); }
.bp-title { margin: 0; font-family: var(--dns-font-display); font-size: clamp(2rem, 4.8vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; color: var(--dns-text-strong, #f8fafc); }
.bp-dek { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--dns-text-muted); text-wrap: pretty; max-width: 62ch; }
.bp-dek::first-letter { font-family: var(--dns-font-accent); font-weight: 700; color: #c7d2fe; }
.bp-byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bp-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--dns-font-display); font-weight: 800; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #7c5cff, #4f46e5 55%, #2563eb); box-shadow: 0 8px 20px -10px rgba(99,102,241,.9), inset 0 1px 0 rgba(255,255,255,.25); }
.bp-byline-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bp-byline-t b { font-size: .92rem; color: var(--dns-text-strong); }
.bp-byline-t span { font-size: .8rem; color: var(--dns-text-muted); }
.bp-share { display: flex; gap: 6px; margin-left: auto; }
.bp-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: .78rem; font-weight: 700; color: var(--dns-text-muted); background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.16); text-decoration: none; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.bp-share-btn:hover { color: var(--dns-text-strong); border-color: rgba(165,180,252,.5); transform: translateY(-1px); }
/* cover */
.bp-cover { width: min(1080px, calc(100% - 56px)); margin: 0 auto; aspect-ratio: 21 / 9; border-radius: 24px; overflow: hidden; border: 1px solid rgba(148,163,184,.14); box-shadow: 0 40px 100px -40px rgba(2,6,23,.9); transform: translateY(0); }
.bp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* layout */
.bp-layout { width: min(1180px, 100%); margin: clamp(32px, 5vh, 56px) auto 0; padding: 0 28px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.bp-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; }
.bp-toc { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 4px 14px; border-left: 1px solid rgba(148,163,184,.18); }
.bp-toc-title { font-family: var(--dns-font-display); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dns-text-muted); margin-bottom: 8px; }
.bp-toc a { font-size: .84rem; line-height: 1.4; padding: 5px 0; color: var(--dns-text-muted); text-decoration: none; transition: color .2s, transform .2s; }
.bp-toc a:hover { color: var(--dns-text-strong); transform: translateX(2px); }
.bp-aside-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; border: 1px solid rgba(129,140,248,.25); background: linear-gradient(180deg, rgba(99,102,241,.14), rgba(99,102,241,.04)); }
.bp-aside-card b { font-family: var(--dns-font-display); font-size: .98rem; letter-spacing: -.02em; line-height: 1.3; color: var(--dns-text-strong); }
.bp-aside-kicker { font-family: var(--dns-font-display); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a5b4fc; }
.bp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 12px; font-family: var(--dns-font-display); font-size: .84rem; font-weight: 700; text-decoration: none; color: var(--dns-text-strong); background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.18); transition: transform .2s, filter .2s, border-color .2s; }
.bp-btn:hover { transform: translateY(-1px); border-color: rgba(165,180,252,.5); }
.bp-btn.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #3b82f6, #4f46e5); box-shadow: 0 12px 28px -12px rgba(79,70,229,.8); }
.bp-btn.primary:hover { filter: brightness(1.08); }
/* body typography */
.bp-content { min-width: 0; max-width: 760px; }
.bp-body { font-size: 1.12rem; line-height: 1.85; color: var(--dns-text, #d7dde8); letter-spacing: -.003em; }
.bp-body > * { margin: 0 0 1.45em; max-width: var(--bp-measure); }
.bp-body > p:first-of-type { font-size: 1.22rem; line-height: 1.75; color: var(--dns-text-strong); }
.bp-body > p:first-of-type::first-letter { float: left; font-family: var(--dns-font-accent); font-size: 4.2em; line-height: .82; padding: .08em .14em 0 0; color: #c7d2fe; }
.bp-body h2, .bp-body h3, .bp-body h4 { font-family: var(--dns-font-display); letter-spacing: -.03em; line-height: 1.15; color: var(--dns-text-strong); scroll-margin-top: 90px; }
.bp-body h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); margin: 2.2em 0 .7em; padding-top: 1.2em; border-top: 1px solid rgba(148,163,184,.14); position: relative; }
.bp-body h2::before { content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 2px; background: linear-gradient(90deg, var(--bp-accent), var(--bp-accent-2)); border-radius: 2px; }
.bp-body h3 { font-size: 1.3rem; margin: 1.8em 0 .55em; }
.bp-body h4 { font-size: 1.08rem; margin: 1.5em 0 .5em; }
.bp-body a { color: #a5b4fc; text-decoration: underline; text-decoration-color: rgba(165,180,252,.4); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.bp-body a:hover { text-decoration-color: currentColor; }
.bp-body strong { color: var(--dns-text-strong); font-weight: 700; }
.bp-body em { font-style: italic; }
.bp-body ul, .bp-body ol { padding-left: 1.3em; }
.bp-body li { margin: .45em 0; padding-left: .25em; }
.bp-body li::marker { color: var(--bp-accent); font-weight: 700; }
.bp-body blockquote { position: relative; margin: 2em 0; padding: 18px 22px 18px 28px; border-radius: 0 18px 18px 0; border-left: 3px solid var(--bp-accent); background: linear-gradient(90deg, rgba(99,102,241,.12), transparent); font-family: var(--dns-font-accent); font-weight: 600; font-size: 1.18rem; line-height: 1.55; letter-spacing: -.01em; color: var(--dns-text-strong); }
.bp-body blockquote p { margin: 0; }
.bp-body blockquote::before { content: "\201C"; position: absolute; left: 10px; top: -8px; font-size: 3rem; line-height: 1; color: var(--bp-accent); opacity: .5; }
.bp-body hr { border: 0; height: 1px; margin: 2.6em auto; width: 120px; background: linear-gradient(90deg, transparent, rgba(148,163,184,.5), transparent); }
.bp-body img { display: block; width: 100%; max-width: none; border-radius: 18px; border: 1px solid rgba(148,163,184,.14); box-shadow: 0 30px 70px -40px rgba(2,6,23,.9); }
.bp-body figure { margin: 2.2em 0; max-width: none; }
.bp-body figure.wide { width: min(100%, 860px); }
.bp-body figcaption { margin-top: 10px; font-size: .82rem; color: var(--dns-text-muted); text-align: center; }
.bp-body figcaption a { color: inherit; }
.bp-body code { font-family: var(--dns-font-mono); font-size: .86em; padding: .15em .45em; border-radius: 6px; background: rgba(148,163,184,.14); color: #e0e7ff; }
.bp-body pre { position: relative; margin: 1.8em 0; padding: 18px 20px; border-radius: 16px; max-width: none; overflow-x: auto; background: #050a18; border: 1px solid rgba(148,163,184,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); scrollbar-width: thin; }
.bp-body pre::before { content: ""; display: block; height: 10px; margin: -4px 0 12px; background: radial-gradient(circle at 5px 5px, #ff5f57 5px, transparent 5.5px), radial-gradient(circle at 23px 5px, #febc2e 5px, transparent 5.5px), radial-gradient(circle at 41px 5px, #28c840 5px, transparent 5.5px); }
.bp-body pre code { padding: 0; background: none; font-size: .86rem; line-height: 1.65; color: #d4d4d4; }
.bp-body pre[data-lang]::after { content: attr(data-lang); position: absolute; top: 10px; right: 64px; font-family: var(--dns-font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.bp-body pre .bp-copy { position: absolute; top: 8px; right: 10px; padding: 3px 9px; border-radius: 7px; border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.8); color: #cbd5e1; font: 600 .7rem var(--dns-font-display); cursor: pointer; opacity: 0; transition: opacity .18s, background .18s; }
.bp-body pre:hover .bp-copy, .bp-body pre .bp-copy:focus-visible { opacity: 1; }
.bp-body pre .bp-copy:hover { background: rgba(99,102,241,.35); color: #fff; }
/* VS Code "Dark Modern" token palette for highlight.js */
.bp-body .hljs-comment, .bp-body .hljs-quote { color: #6a9955; font-style: italic; }
.bp-body .hljs-keyword, .bp-body .hljs-selector-tag, .bp-body .hljs-literal, .bp-body .hljs-built_in, .bp-body .hljs-doctag { color: #569cd6; }
.bp-body .hljs-keyword.hljs-control, .bp-body .hljs-meta { color: #c586c0; }
.bp-body .hljs-string, .bp-body .hljs-regexp, .bp-body .hljs-addition { color: #ce9178; }
.bp-body .hljs-number, .bp-body .hljs-symbol, .bp-body .hljs-bullet { color: #b5cea8; }
.bp-body .hljs-title, .bp-body .hljs-title.function_, .bp-body .hljs-section { color: #dcdcaa; }
.bp-body .hljs-title.class_, .bp-body .hljs-type, .bp-body .hljs-class .hljs-title, .bp-body .hljs-name { color: #4ec9b0; }
.bp-body .hljs-variable, .bp-body .hljs-template-variable, .bp-body .hljs-attr, .bp-body .hljs-attribute, .bp-body .hljs-property { color: #9cdcfe; }
.bp-body .hljs-tag { color: #808080; }
.bp-body .hljs-tag .hljs-name { color: #569cd6; }
.bp-body .hljs-params { color: #9cdcfe; }
.bp-body .hljs-deletion { color: #f14c4c; }
.bp-body .hljs-emphasis { font-style: italic; }
.bp-body .hljs-strong { font-weight: 700; }
.bp-body table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.8em 0; }
.bp-body th, .bp-body td { padding: 10px 12px; border-bottom: 1px solid rgba(148,163,184,.14); text-align: left; }
.bp-body th { font-family: var(--dns-font-display); font-weight: 700; color: var(--dns-text-strong); }
.bp-body .bp-callout { display: flex; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(56,189,248,.3); background: rgba(56,189,248,.08); font-size: 1rem; }
.bp-body .bp-callout::before { content: "💡"; flex: none; }
.bp-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; }
.bp-topics span { padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--dns-text-muted); background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.16); }
/* CTA */
.bp-cta { position: relative; overflow: hidden; isolation: isolate; margin: 48px 0 0; padding: 32px; border-radius: 24px; border: 1px solid rgba(129,140,248,.3); background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(56,189,248,.08)); display: flex; flex-direction: column; gap: 10px; }
.bp-cta-glow { position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.5), transparent 65%); filter: blur(30px); z-index: -1; }
.bp-cta h3 { margin: 0; font-family: var(--dns-font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.03em; line-height: 1.2; color: var(--dns-text-strong); text-wrap: balance; }
.bp-cta p { margin: 0; color: var(--dns-text-muted); line-height: 1.6; }
.bp-cta-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(148,163,184,.14); }
.bp-foot .bp-share { margin-left: 0; }
/* related */
.bp-related { width: min(1180px, 100%); margin: clamp(48px, 8vh, 88px) auto 0; padding: 0 28px; }
.bp-related-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.bp-related-head h3 { margin: 0; font-family: var(--dns-font-display); font-size: 1.6rem; letter-spacing: -.03em; color: var(--dns-text-strong); }
.bp-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bp-rel { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; background: rgba(148,163,184,.05); border: 1px solid rgba(148,163,184,.12); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.bp-rel:hover { transform: translateY(-4px); border-color: rgba(165,180,252,.4); box-shadow: 0 30px 60px -40px rgba(99,102,241,.6); }
.bp-rel-img { aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #111c33, #0b1220); }
.bp-rel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.bp-rel:hover .bp-rel-img img { transform: scale(1.06); }
.bp-rel-img span { font-family: var(--dns-font-display); font-weight: 800; font-size: 2.4rem; color: rgba(255,255,255,.7); }
.bp-rel-t { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.bp-rel-tag { font-family: var(--dns-font-display); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a5b4fc; }
.bp-rel-t b { font-family: var(--dns-font-display); font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.3; color: var(--dns-text-strong); }
.bp-rel-t p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--dns-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* responsive */
@media (max-width: 1024px) {
.bp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bp-aside { position: static; }
.bp-toc { display: none; }
.bp-aside-card { display: none; }
.bp-content { max-width: 760px; margin: 0 auto; }
}
@media (max-width: 760px) {
.bp { margin: -28px -16px 0; }
.bp-preview-bar { top: 56px; padding: 8px 16px; }
.bp-hero { padding: 28px 18px 22px; }
.bp-title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
.bp-dek { font-size: 1.02rem; }
.bp-share { margin-left: 0; width: 100%; }
.bp-cover { width: calc(100% - 24px); aspect-ratio: 16 / 10; border-radius: 18px; }
.bp-layout, .bp-related { padding: 0 18px; }
.bp-body { font-size: 1.04rem; line-height: 1.8; }
.bp-body > p:first-of-type { font-size: 1.1rem; }
.bp-body > p:first-of-type::first-letter { font-size: 3.4em; }
.bp-body blockquote { font-size: 1.15rem; padding: 14px 16px 14px 22px; }
.bp-body img, .bp-body pre { border-radius: 14px; }
.bp-body pre { margin-left: -6px; margin-right: -6px; padding: 14px; }
.bp-cta { padding: 22px; border-radius: 20px; }
.bp-related-grid { grid-template-columns: 1fr; }
}
/* light theme */
html.light-theme .bp { --bp-accent: #4f46e5; --bp-accent-2: #0891b2; }
html.light-theme .bp-hero-bg { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.14), transparent 60%), var(--dns-bg-app); }
html.light-theme .bp-hero-bg img { opacity: .22; }
html.light-theme .bp-hero-bg::after { background: linear-gradient(180deg, rgba(255,255,255,.1), var(--dns-bg-app) 92%); }
html.light-theme .bp-crumb-tag { color: #4338ca; background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.25); }
html.light-theme .bp-title, html.light-theme .bp-body h2, html.light-theme .bp-body h3, html.light-theme .bp-body h4, html.light-theme .bp-body strong, html.light-theme .bp-body blockquote, html.light-theme .bp-body > p:first-of-type { color: #0f172a; }
html.light-theme .bp-dek::first-letter, html.light-theme .bp-body > p:first-of-type::first-letter { color: #4f46e5; }
html.light-theme .bp-body { color: #334155; }
html.light-theme .bp-body a { color: #4f46e5; text-decoration-color: rgba(79,70,229,.35); }
html.light-theme .bp-body code { background: #eef2ff; color: #3730a3; }
html.light-theme .bp-body pre { background: #0f172a; border-color: rgba(15,23,42,.1); }
html.light-theme .bp-body pre code { color: #e2e8f0; }
html.light-theme .bp-body img, html.light-theme .bp-cover { border-color: rgba(15,23,42,.08); box-shadow: 0 30px 70px -40px rgba(15,23,42,.45); }
html.light-theme .bp-body blockquote { background: linear-gradient(90deg, rgba(99,102,241,.1), transparent); }
html.light-theme .bp-body h2 { border-top-color: rgba(15,23,42,.1); }
html.light-theme .bp-share-btn, html.light-theme .bp-btn, html.light-theme .bp-topics span, html.light-theme .bp-rel { background: #fff; border-color: rgba(15,23,42,.1); }
html.light-theme .bp-share-btn, html.light-theme .bp-btn { color: #0f172a; }
html.light-theme .bp-btn.primary { color: #fff; }
html.light-theme .bp-aside-card, html.light-theme .bp-cta { background: linear-gradient(135deg, #eef2ff, #f0f9ff); border-color: rgba(99,102,241,.22); }
html.light-theme .bp-aside-kicker, html.light-theme .bp-rel-tag { color: #4f46e5; }
html.light-theme .bp-rel-img { background: linear-gradient(135deg, #e2e8f0, #f8fafc); }
html.light-theme .bp-rel-img span { color: #312e81; }
html.light-theme .bp-preview-bar { color: #92400e; background: rgba(254,243,199,.85); border-bottom-color: rgba(245,158,11,.4); }
html.light-theme .bp-preview-link { color: #92400e; }