:root {
  --bg: #07090f;
  --bg-2: #0b0e16;
  --panel: rgba(16, 19, 31, 0.76);
  --panel-2: rgba(20, 24, 39, 0.9);
  --line: rgba(255,255,255,0.075);
  --line-strong: rgba(255,255,255,0.13);
  --text: #f6f7fb;
  --muted: #8e96a8;
  --muted-2: #697184;
  --violet: #D21F32;
  --cardinal: #D21F32;
  --crimson: #7B101D;
  --ivory: #F5F1E8;
  --beak: #E39832;
  --violet-2: #F05B68;
  --cyan: #E39832;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #fb7185;
  --shadow: 0 30px 80px rgba(0,0,0,0.36);
  --radius: 20px;
  --sidebar: 248px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
body { min-height: 100vh; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.ambient { position: fixed; border-radius: 999px; filter: blur(100px); opacity: .18; pointer-events: none; z-index: 0; }
.ambient-one { width: 520px; height: 520px; background: #D21F32; left: 16%; top: -250px; }
.ambient-two { width: 480px; height: 480px; background: #8C1624; right: -260px; top: 25%; opacity: .11; }
.ambient-three { width: 380px; height: 380px; background: #B2182A; left: 42%; bottom: -300px; opacity: .09; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

.app-shell { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); background: rgba(8,10,17,.86); backdrop-filter: blur(28px); padding: 22px 15px 16px; display: flex; flex-direction: column; }
.brand-row { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, rgba(139,92,246,.23), rgba(34,211,238,.12)); border: 1px solid rgba(167,139,250,.26); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(104,66,234,.18); }
.logo-mark span { position: absolute; background: linear-gradient(90deg, var(--violet-2), var(--cyan)); border-radius: 2px; height: 3px; left: 8px; }
.logo-mark span:nth-child(1){ width: 18px; top: 9px; }
.logo-mark span:nth-child(2){ width: 13px; top: 15px; }
.logo-mark span:nth-child(3){ width: 18px; top: 21px; }
.logo-mark.large { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 12px; }
.logo-mark.large span { left: 13px; height: 4px; }
.logo-mark.large span:nth-child(1){width:28px;top:15px}.logo-mark.large span:nth-child(2){width:20px;top:24px}.logo-mark.large span:nth-child(3){width:28px;top:33px}
.brand-name { font: 800 15px/1 Manrope, sans-serif; letter-spacing: -.02em; }
.brand-subtitle { margin-top: 4px; font: 700 9px/1 Manrope, sans-serif; letter-spacing: .22em; color: var(--violet-2); }

.new-project-button { width: 100%; border: 1px solid rgba(167,139,250,.23); background: linear-gradient(180deg, rgba(139,92,246,.16), rgba(139,92,246,.08)); border-radius: 12px; padding: 11px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: #eee9ff; transition: .2s ease; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.new-project-button:hover { transform: translateY(-1px); border-color: rgba(167,139,250,.45); background: rgba(139,92,246,.18); }
.plus-icon { font-size: 18px; line-height: 1; color: var(--violet-2); }
.shortcut { margin-left: auto; font-size: 10px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 6px; width: 20px; height: 20px; display: grid; place-items: center; }
.sidebar-label { font-size: 10px; font-weight: 700; color: #5e6678; text-transform: uppercase; letter-spacing: .14em; padding: 23px 9px 9px; }
.project-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; max-height: 42vh; }
.project-item { border: 0; background: transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer; text-align: left; display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; transition: .18s ease; }
.project-item:hover { background: rgba(255,255,255,.035); }
.project-item.active { background: rgba(139,92,246,.12); box-shadow: inset 0 0 0 1px rgba(167,139,250,.13); }
.project-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #c6cbda; }
.project-item.active .project-icon { color: var(--violet-2); border-color: rgba(167,139,250,.22); }
.project-text { min-width: 0; }
.project-text strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
.project-text small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 10px; text-transform: capitalize; }
.project-empty { color: var(--muted-2); font-size: 11px; text-align: center; padding: 18px 14px; line-height: 1.5; }
.project-empty-icon { font-size: 20px; margin-bottom: 6px; color: #525a6e; }
.sidebar-spacer { flex: 1; }
.sidebar-card { margin: 8px 2px 10px; padding: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 12px; }
.sidebar-card-top { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(251,191,36,.08); }
.status-dot.good { background: var(--green); box-shadow: 0 0 0 4px rgba(52,211,153,.08), 0 0 14px rgba(52,211,153,.25); }
.sidebar-card-subtext { margin-top: 5px; font-size: 9px; color: var(--muted-2); line-height: 1.4; }
.sidebar-link { width: 100%; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-align: left; padding: 8px 9px; cursor: pointer; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.sidebar-link:hover { background: rgba(255,255,255,.035); color: var(--text); }
.sidebar-link span { width: 17px; text-align: center; color: #6f788b; }

.main-stage { min-width: 0; }
.topbar { height: 66px; border-bottom: 1px solid var(--line); background: rgba(7,9,15,.64); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 28px; position: sticky; top: 0; z-index: 20; }
.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #cdd1dc; }
.muted { color: var(--muted-2); }
.chevron { color: #4d5567; font-size: 16px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.save-state { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted-2); margin-right: 6px; }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ghost-button, .publish-button, .primary-button, .build-button, .mini-button { border: 0; cursor: pointer; transition: .18s ease; }
.ghost-button { background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #c5cad6; border-radius: 9px; }
.ghost-button.compact { padding: 8px 11px; font-size: 10px; }
.ghost-button:hover:not(:disabled){ background: rgba(255,255,255,.07); color: white; }
.ghost-button:disabled, .publish-button:disabled { opacity: .36; cursor: not-allowed; }
.publish-button { background: linear-gradient(135deg, #B61628, #D21F32 55%, #C72034); padding: 9px 13px; border-radius: 9px; font-size: 10px; font-weight: 700; box-shadow: 0 8px 24px rgba(124,92,246,.22), inset 0 1px rgba(255,255,255,.2); }
.publish-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 11px 28px rgba(124,92,246,.32); }
.publish-spark { margin-right: 4px; }

.welcome-view { max-width: 1040px; margin: 0 auto; padding: 80px 42px 70px; }
.hero-copy { text-align: center; max-width: 690px; margin: 0 auto 34px; }
.eyebrow { color: #767f94; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.glow-eyebrow { color: #F06C78; text-shadow: 0 0 24px rgba(139,92,246,.35); }
.hero-copy h1 { margin: 12px 0 14px; font: 800 clamp(44px, 6vw, 67px)/.96 Manrope, sans-serif; letter-spacing: -.055em; }
.hero-copy h1 span { background: linear-gradient(95deg, #F7A5AD 5%, #F05B68 35%, #67e8f9 100%); -webkit-background-clip: text; color: transparent; }
.hero-copy p { max-width: 630px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.75; }

.glass-panel { background: linear-gradient(180deg, rgba(19,23,37,.86), rgba(12,15,26,.84)); border: 1px solid var(--line-strong); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(28px); }
.builder-card { border-radius: 22px; padding: 18px; position: relative; overflow: hidden; }
.builder-card:before { content:""; position:absolute; inset:0 auto auto 10%; width:80%; height:1px; background:linear-gradient(90deg,transparent,rgba(167,139,250,.55),rgba(34,211,238,.28),transparent); }
.type-row { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 13px; }
.type-pill { border: 1px solid transparent; background: transparent; color: #7f8799; border-radius: 9px; padding: 7px 10px; font-size: 10px; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.type-pill:hover { color: #cdd2df; background: rgba(255,255,255,.03); }
.type-pill.active { color: #FFF1F2; border-color: rgba(167,139,250,.18); background: rgba(139,92,246,.1); }
.type-pill span { color: var(--violet-2); }
.prompt-wrap { border-radius: 15px; border: 1px solid rgba(255,255,255,.085); background: rgba(3,5,11,.6); overflow: hidden; box-shadow: inset 0 1px 20px rgba(0,0,0,.14); }
.prompt-wrap:focus-within { border-color: rgba(139,92,246,.38); box-shadow: 0 0 0 3px rgba(139,92,246,.065), inset 0 1px 20px rgba(0,0,0,.14); }
.prompt-wrap textarea { width: 100%; resize: vertical; min-height: 150px; max-height: 330px; border: 0; outline: 0; padding: 18px 18px 12px; color: #eef0f6; background: transparent; font-size: 13px; line-height: 1.7; }
.prompt-wrap textarea::placeholder { color: #555e70; }
.prompt-footer { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px 12px 16px; border-top: 1px solid rgba(255,255,255,.045); gap: 12px; }
.prompt-hints { display: flex; gap: 6px; flex-wrap: wrap; }
.hint-chip { font-size: 9px; color: #667085; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.045); }
.prompt-actions { display: flex; align-items: center; gap: 10px; }
#charCount { color: #535c6e; font-size: 9px; white-space: nowrap; }
.build-button { padding: 9px 13px; border-radius: 9px; background: linear-gradient(135deg, #7c5bf2, #D21F32); color: white; font-weight: 700; font-size: 10px; box-shadow: 0 8px 20px rgba(124,92,246,.24), inset 0 1px rgba(255,255,255,.2); }
.build-button:hover { transform: translateY(-1px); box-shadow: 0 11px 25px rgba(124,92,246,.32); }
.build-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.example-strip { display: flex; align-items: center; gap: 7px; padding-top: 13px; overflow-x: auto; }
.example-label { font-size: 9px; color: #596174; text-transform: uppercase; letter-spacing: .12em; margin-right: 2px; }
.example-prompt { white-space: nowrap; font-size: 9px; color: #80889a; border: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.02); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.example-prompt:hover { color: #d5d9e3; border-color: rgba(167,139,250,.2); background: rgba(139,92,246,.05); }
.standard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.standard-card { border: 1px solid rgba(255,255,255,.055); background: rgba(255,255,255,.018); border-radius: 13px; padding: 13px; display: flex; gap: 10px; align-items: flex-start; }
.standard-icon { color: var(--violet-2); width: 26px; height: 26px; border: 1px solid rgba(167,139,250,.15); background: rgba(139,92,246,.06); border-radius: 8px; display: grid; place-items: center; font-size: 11px; flex: 0 0 auto; }
.standard-card strong { display: block; font-size: 10px; margin-top: 1px; }
.standard-card span { display: block; margin-top: 4px; color: #697184; font-size: 9px; line-height: 1.5; }

.build-view { max-width: 1280px; margin: 0 auto; padding: 34px 32px 54px; }
.workspace-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 20px; }
.workspace-title-row { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.workspace-title-row h1 { font: 800 27px/1.1 Manrope,sans-serif; letter-spacing: -.035em; margin: 0; }
.app-type-badge { font-size: 8px; font-weight: 800; letter-spacing: .1em; color: #F28A94; background: rgba(139,92,246,.1); border: 1px solid rgba(167,139,250,.15); border-radius: 999px; padding: 4px 7px; }
.workspace-header p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; max-width: 720px; }
.workspace-metrics { display: flex; gap: 7px; }
.metric { min-width: 70px; border: 1px solid var(--line); background: rgba(255,255,255,.02); border-radius: 11px; padding: 9px 11px; text-align: center; }
.metric span { display: block; font-size: 12px; font-weight: 700; }
.metric small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }

.build-progress { border-radius: 18px; padding: 18px; }
.progress-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.progress-head > div { display:flex; align-items:center; gap:8px; }
.progress-head span:last-child { color: var(--violet-2); font-size: 10px; font-weight: 700; }
.spinner { width: 14px; height: 14px; border: 2px solid rgba(167,139,250,.18); border-top-color: var(--violet-2); border-radius:50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { height: 4px; background: rgba(255,255,255,.05); border-radius: 999px; margin: 14px 0 15px; overflow: hidden; }
.progress-fill { height: 100%; width: 8%; border-radius: 999px; background: linear-gradient(90deg,var(--violet),var(--cyan)); box-shadow: 0 0 16px rgba(139,92,246,.45); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.stage-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.stage-item { border:1px solid rgba(255,255,255,.045); background:rgba(255,255,255,.015); border-radius:10px; padding:9px; display:flex; gap:8px; opacity:.46; transition:.25s ease; }
.stage-item.active,.stage-item.done { opacity:1; }
.stage-item.active { background:rgba(139,92,246,.07); border-color:rgba(167,139,250,.16); }
.stage-item.done span { color:var(--green); }
.stage-item > span { font-size:8px; color:#656d80; font-weight:800; }
.stage-item strong { display:block; font-size:9px; }
.stage-item small { display:block; margin-top:3px; color:#596174; font-size:7px; line-height:1.4; }
.build-narrative { margin-top: 12px; color:#737c90; font-size:9px; text-align:center; }

.workspace-tabs { margin-top: 16px; display:flex; gap:4px; border-bottom:1px solid var(--line); }
.workspace-tab { border:0; background:transparent; color:#6f778a; font-size:10px; font-weight:600; padding:10px 11px; cursor:pointer; position:relative; }
.workspace-tab:hover { color:#c5cad7; }
.workspace-tab.active { color:#f0f1f6; }
.workspace-tab.active:after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:99px; }
.workspace-panels { margin-top: 13px; }
.workspace-panel { display:none; }
.workspace-panel.active { display:block; }
.preview-panel { border:1px solid var(--line-strong); border-radius:16px; overflow:hidden; background:#0b0e16; box-shadow: var(--shadow); }
.preview-toolbar { height:40px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#131722,#0f121c); display:grid; grid-template-columns:90px 1fr 90px; align-items:center; padding:0 12px; }
.traffic-lights { display:flex; gap:5px; }
.traffic-lights span { width:7px; height:7px; border-radius:50%; background:#4e5667; }
.traffic-lights span:nth-child(1){background:#fb7185}.traffic-lights span:nth-child(2){background:#fbbf24}.traffic-lights span:nth-child(3){background:#34d399}
.preview-address { justify-self:center; width:min(420px,70%); text-align:center; color:#596174; font-size:9px; padding:5px 10px; border:1px solid rgba(255,255,255,.045); background:#090c13; border-radius:7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.device-switcher { justify-self:end; display:flex; gap:2px; }
.device-btn { width:25px; height:24px; border:0; background:transparent; color:#596174; border-radius:6px; cursor:pointer; font-size:10px; }
.device-btn.active { background:rgba(139,92,246,.1); color:#b6a7fb; }
.preview-canvas { background:radial-gradient(circle at 50% 0, rgba(139,92,246,.05), transparent 34%),#080a10; min-height: 610px; display:flex; justify-content:center; align-items:flex-start; padding:0; overflow:auto; }
.preview-canvas iframe { border:0; width:100%; min-height:610px; height:72vh; background:white; transition: width .3s ease, border-radius .3s ease, margin .3s ease; }
.preview-canvas.tablet iframe { width:768px; margin:18px 0; border-radius:12px; }
.preview-canvas.mobile iframe { width:390px; margin:18px 0; border-radius:18px; }

.files-layout { display:grid; grid-template-columns:260px 1fr; min-height:620px; border:1px solid var(--line-strong); border-radius:16px; overflow:hidden; background:#090c13; }
.file-tree-wrap { border-right:1px solid var(--line); background:#0d1018; padding:12px 9px; min-width:0; }
.panel-title-row { display:flex; align-items:center; justify-content:space-between; padding:2px 8px 10px; font-size:10px; }
.panel-title-row span { color:#5f687a; font-size:9px; }
.file-tree { display:flex; flex-direction:column; gap:2px; max-height:560px; overflow:auto; }
.file-row { border:0; background:transparent; color:#8e96a8; border-radius:7px; padding:7px 8px; text-align:left; cursor:pointer; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row:hover { background:rgba(255,255,255,.035); color:#d1d5df; }
.file-row.active { background:rgba(139,92,246,.09); color:#c9bcff; }
.file-row .file-ext { color:#5d6678; display:inline-block; width:20px; }
.code-view-wrap { min-width:0; display:flex; flex-direction:column; }
.code-toolbar { height:42px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#0d1018; font-size:10px; color:#9da5b6; }
.code-toolbar > div { display:flex; gap:5px; }
.mini-button { padding:5px 8px; font-size:8px; color:#778093; border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:6px; }
.mini-button:hover { color:white; background:rgba(255,255,255,.05); }
#codeView { margin:0; padding:18px; overflow:auto; flex:1; max-height:578px; color:#b7c0d2; background:#090c13; font: 10px/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; tab-size:2; white-space:pre; }

.details-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.details-card { border:1px solid var(--line); background:rgba(255,255,255,.018); border-radius:14px; padding:18px; }
.details-card.full-width { grid-column:1/-1; }
.details-icon { width:29px;height:29px;border:1px solid rgba(167,139,250,.16);background:rgba(139,92,246,.07);color:#aa98fb;border-radius:8px;display:grid;place-items:center;font-size:11px;margin-bottom:12px; }
.details-card h3 { margin:0 0 11px; font-size:12px; }
.detail-list { display:flex;flex-direction:column;gap:7px; }
.detail-item { color:#8790a2;font-size:10px;line-height:1.55;padding-left:15px;position:relative; }
.detail-item:before { content:""; width:4px;height:4px;border-radius:50%;background:#7c5bf2;position:absolute;left:1px;top:6px; }
.run-instructions { color:#94a0b4;font:9px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap; background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.04);padding:10px;border-radius:9px; }

.refine-layout { display:grid;grid-template-columns:1fr 280px;gap:10px; }
.chat-column { border:1px solid var(--line);background:rgba(255,255,255,.015);border-radius:14px;overflow:hidden;min-height:560px;display:flex;flex-direction:column; }
.chat-history { flex:1;padding:18px;display:flex;flex-direction:column;gap:12px;max-height:490px;overflow:auto; }
.chat-message { max-width:80%; font-size:10px;line-height:1.6;padding:10px 12px;border-radius:11px; }
.chat-message.user { align-self:flex-end;background:rgba(139,92,246,.12);border:1px solid rgba(167,139,250,.15);color:#ddd7ff; }
.chat-message.ai { align-self:flex-start;background:rgba(255,255,255,.03);border:1px solid var(--line);color:#a6aebd; }
.chat-message small { display:block;margin-top:5px;color:#5f687a;font-size:8px; }
.revision-box { border-top:1px solid var(--line);padding:10px;background:#0c0f17;display:flex;gap:8px;align-items:flex-end; }
.revision-box textarea { flex:1;resize:none;border:1px solid rgba(255,255,255,.07);outline:0;background:#080a10;color:#e5e7ec;border-radius:9px;padding:9px;font-size:10px;line-height:1.55; }
.revision-box textarea:focus { border-color:rgba(139,92,246,.35); }
.refine-side { display:flex;flex-direction:column;gap:10px; }
.refine-side-card { border:1px solid var(--line);background:linear-gradient(180deg,rgba(139,92,246,.07),rgba(255,255,255,.015));border-radius:14px;padding:16px; }
.refine-side-card h3 { margin:8px 0 6px;font-size:14px; }
.refine-side-card p { margin:0;color:#778093;font-size:9px;line-height:1.6; }
.refine-side-card.subtle { background:rgba(255,255,255,.015); }
.refine-side-card.subtle strong { display:block;font-size:10px;margin-bottom:9px; }
.revision-suggestion { width:100%;text-align:left;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);color:#7c8597;border-radius:8px;padding:7px 8px;font-size:9px;cursor:pointer;margin-top:5px; }
.revision-suggestion:hover { color:#d4d8e1;border-color:rgba(167,139,250,.16); }

.modal-backdrop, .access-gate { position:fixed;inset:0;background:rgba(3,4,8,.74);backdrop-filter:blur(16px);z-index:100;display:grid;place-items:center;padding:18px; }
.modal-card { position:relative;width:min(510px,100%);border-radius:20px;padding:24px; }
.modal-card h2 { font:800 25px/1.1 Manrope,sans-serif;letter-spacing:-.035em;margin:8px 0; }
.modal-card > p { color:#848da0;font-size:10px;line-height:1.65;margin:0 0 18px; }
.modal-close { position:absolute;right:12px;top:12px;width:28px;height:28px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#7e8798;border-radius:8px;cursor:pointer; }
.export-options { display:flex;flex-direction:column;gap:7px; }
.export-option { width:100%;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:11px;padding:11px;text-align:left;cursor:pointer; }
.export-option:hover { border-color:rgba(167,139,250,.2);background:rgba(139,92,246,.05);transform:translateY(-1px); }
.export-icon { width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(139,92,246,.08);color:#b3a5fb;border:1px solid rgba(167,139,250,.12); }
.export-option strong { display:block;font-size:10px; }
.export-option small { display:block;margin-top:3px;color:#687185;font-size:8px; }
.export-option > span:last-child { color:#5d6678; }
.setting-field { display:block;margin-top:12px; }
.setting-field > span { display:block;font-size:9px;color:#828a9d;margin-bottom:6px; }
.setting-field input,.setting-field textarea,.access-form input { width:100%;border:1px solid var(--line);outline:0;background:#080a10;color:#eef0f6;border-radius:9px;padding:10px;font-size:10px; }
.setting-field input:focus,.setting-field textarea:focus,.access-form input:focus { border-color:rgba(139,92,246,.35); }
.setting-toggle-row { display:flex;justify-content:space-between;gap:14px;align-items:center;margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.015); }
.setting-toggle-row strong { font-size:10px;display:block; }
.setting-toggle-row small { font-size:8px;color:#687184;display:block;margin-top:3px; }
.toggle { width:34px;height:19px;border-radius:99px;background:#312852;padding:2px; }
.toggle span { width:15px;height:15px;background:#F05B68;border-radius:50%;display:block;margin-left:15px;box-shadow:0 0 10px rgba(167,139,250,.45); }
.primary-button { background:linear-gradient(135deg,#7658ed,#D21F32);border-radius:9px;padding:10px 13px;font-weight:700;font-size:10px; }
.primary-button.full { width:100%; }
.help-step { display:grid;grid-template-columns:28px 1fr;gap:10px;margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.015); }
.help-step > span { width:27px;height:27px;border-radius:8px;background:rgba(139,92,246,.08);border:1px solid rgba(167,139,250,.12);color:#ad9df8;display:grid;place-items:center;font-size:9px;font-weight:800; }
.help-step strong { display:block;font-size:10px; }
.help-step small { display:block;margin-top:4px;color:#717a8d;font-size:8px;line-height:1.55; }
.help-note { border-left:2px solid #7c5bf2;padding-left:10px!important;margin-top:15px!important; }
.help-modal code { color:#c2b6fb;background:rgba(139,92,246,.08);padding:1px 4px;border-radius:4px; }
.access-card { width:min(420px,100%);border-radius:22px;padding:28px;text-align:center; }
.access-card .logo-mark { margin-left:auto;margin-right:auto; }
.access-card h1 { font:800 27px/1.1 Manrope,sans-serif;margin:8px 0;letter-spacing:-.04em; }
.access-card p { color:#7d8698;font-size:10px;line-height:1.6;max-width:320px;margin:0 auto 16px; }
.access-form { display:flex;gap:7px; }
.access-form input { flex:1; }
.form-error { color:#fda4af;font-size:9px;margin-top:10px; }

.toast-host { position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px; }
.toast { min-width:240px;max-width:360px;border:1px solid var(--line-strong);background:rgba(15,18,28,.95);backdrop-filter:blur(18px);box-shadow:0 16px 50px rgba(0,0,0,.4);border-radius:11px;padding:10px 12px;font-size:10px;color:#cbd0dc;display:flex;gap:9px;align-items:flex-start;animation:toastIn .25s ease; }
.toast .toast-icon { color:var(--green); }
.toast.error .toast-icon { color:var(--red); }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }

@media (max-width: 980px) {
  :root { --sidebar: 204px; }
  .standard-grid { grid-template-columns:1fr; }
  .stage-grid { grid-template-columns:repeat(3,1fr); }
  .refine-layout { grid-template-columns:1fr; }
  .refine-side { display:none; }
  .files-layout { grid-template-columns:220px 1fr; }
}

@media (max-width: 760px) {
  .app-shell { display:block; }
  .sidebar { position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:12px 12px 10px;display:grid;grid-template-columns:1fr auto;align-items:center; }
  .brand-row { padding:0; }
  .new-project-button { width:auto;padding:9px 10px; }
  .new-project-button .shortcut,.sidebar-label,.project-list,.project-empty,.sidebar-spacer,.sidebar-card,.sidebar-link { display:none; }
  .topbar { top:0;height:56px;padding:0 12px; }
  .breadcrumbs,.save-state,.ghost-button { display:none; }
  .topbar-actions { margin-left:auto; }
  .welcome-view { padding:55px 16px 40px; }
  .hero-copy h1 { font-size:46px; }
  .hero-copy p { font-size:11px; }
  .builder-card { padding:12px; }
  .prompt-footer { align-items:flex-end; }
  .prompt-hints { display:none; }
  .prompt-actions { width:100%;justify-content:space-between; }
  .build-view { padding:22px 12px 40px; }
  .workspace-header { align-items:flex-start;flex-direction:column; }
  .stage-grid { grid-template-columns:1fr 1fr; }
  .preview-toolbar { grid-template-columns:70px 1fr 70px; }
  .preview-address { width:90%; }
  .files-layout { display:block; }
  .file-tree-wrap { border-right:0;border-bottom:1px solid var(--line);max-height:190px;overflow:auto; }
  .file-tree { max-height:140px; }
  .code-view-wrap { min-height:430px; }
  #codeView { max-height:430px; }
  .details-grid { grid-template-columns:1fr; }
  .details-card.full-width { grid-column:auto; }
  .workspace-tabs { overflow-x:auto; }
  .workspace-tab { white-space:nowrap; }
  .access-form { flex-direction:column; }
}

/* -------------------------------------------------------------------------
   Cardinal — cloud runtime, deployment, collaboration, visual editor
   ------------------------------------------------------------------------- */
.credit-pill{height:34px;padding:0 11px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:10px;display:flex;align-items:center;gap:5px;color:#c6cedc}.credit-pill span{color:#F05B68}.credit-pill b{color:#fff;font-size:12px}.credit-pill small{font-size:9px;color:var(--muted)}
.account-chip{width:34px;height:34px;border-radius:10px;border:1px solid #ffffff13;background:linear-gradient(145deg,#1a1628,#10151d);padding:0;display:grid;place-items:center;color:#c9bbff;cursor:pointer}.account-chip span{font-size:9px;font-weight:800}.account-chip:hover{border-color:#D21F325c;box-shadow:0 0 24px #7B101D18}
.workspace-tabs{overflow-x:auto;scrollbar-width:none}.workspace-tabs::-webkit-scrollbar{display:none}.workspace-tab{white-space:nowrap}.preview-toolbar .preview-actions{margin-left:auto}.device-switcher{margin-left:8px}
.visual-panel{border-top:1px solid #ffffff10;background:linear-gradient(180deg,#0c1017,#0a0d13);padding:12px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.visual-panel>div:first-child{min-width:230px;flex:1}.visual-panel strong{font-size:10px;display:block;margin-top:4px}.visual-panel label{font-size:8px;color:var(--muted);display:flex;align-items:center;gap:6px}.visual-panel input[type=color]{width:26px;height:25px;border:none;background:transparent;padding:0}.visual-panel input[type=range]{width:72px}.visual-panel .primary-button{padding:8px 12px;font-size:9px}
.platform-panel{padding:18px 0 30px}.platform-hero,.deploy-hero,.review-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 24px;margin-bottom:14px;background:linear-gradient(120deg,rgba(124,58,237,.11),rgba(17,24,39,.62) 48%,rgba(6,182,212,.06));}.platform-hero:after,.deploy-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-120px;top:-170px;background:radial-gradient(circle,#D21F3229,transparent 67%);pointer-events:none}.platform-hero h2,.deploy-hero h2,.automation-hero h2,.versions-head h2,.review-hero h2{font-family:Manrope,Inter,sans-serif;font-size:20px;line-height:1.12;margin:5px 0 7px;letter-spacing:-.025em}.platform-hero p,.deploy-hero p,.automation-hero p,.versions-head p,.review-hero p,.platform-card>p{color:#7f899b;font-size:10px;line-height:1.55;margin:0;max-width:680px}.platform-orbit{width:58px;height:58px;position:relative;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#211014,#0c1118);border:1px solid #F05B6821;box-shadow:inset 0 0 25px #7B101D14}.platform-orbit span{font-size:19px;color:#F7A5AD}.platform-orbit i{position:absolute;border:1px solid #D21F3237;border-radius:50%}.platform-orbit i:nth-child(1){width:42px;height:42px}.platform-orbit i:nth-child(2){width:54px;height:26px;transform:rotate(38deg)}.platform-orbit i:nth-child(3){width:54px;height:26px;transform:rotate(-38deg)}
.runtime-status{z-index:1;border:1px solid #ffffff0e;background:#090d14b8;border-radius:12px;padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;min-width:252px}.runtime-status>span{width:8px;height:8px;border-radius:50%;background:#515869;box-shadow:0 0 0 5px #51586910}.runtime-status>span.live{background:#34d399;box-shadow:0 0 16px #34d39980}.runtime-status b{font-size:9px;display:block}.runtime-status small{display:block;color:#667085;font-size:7px;margin-top:2px}
.runtime-service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}.runtime-service{border:1px solid #ffffff0c;border-radius:12px;padding:11px 12px;background:linear-gradient(160deg,#111620,#0d1119);position:relative;overflow:hidden}.runtime-service:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#384153}.runtime-service.on:before{background:linear-gradient(#D21F32,#E39832)}.runtime-service span{font-size:14px;display:block;margin-bottom:11px;filter:saturate(.9)}.runtime-service b{display:block;font-size:9px}.runtime-service small{display:block;color:#606b7d;font-size:7px;margin-top:3px}
.backend-grid,.deploy-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.platform-card{padding:16px;min-height:220px;background:linear-gradient(145deg,rgba(17,21,32,.91),rgba(10,14,21,.94));}.platform-card h3{font-size:16px;margin:5px 0 8px}.panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-title-row strong{font-size:12px}.platform-card code,.platform-form-modal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#b7a8ff;background:#D21F3210;padding:2px 5px;border-radius:5px}
.collection-list,.mini-user-list,.record-list,.workflow-list,.event-list,.deployment-list,.member-list,.version-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}.collection-row,.user-row,.record-row,.workflow-card,.event-row,.deployment-row,.member-row,.version-row{border:1px solid #ffffff0a;background:#ffffff03;border-radius:10px;padding:10px 11px}.collection-row,.user-row,.record-row,.deployment-row,.member-row,.version-row{display:flex;align-items:center;gap:9px}.collection-row>div,.user-row>div,.record-row>div,.deployment-row>div,.member-row>div,.version-row>div{min-width:0;flex:1}.collection-row b,.user-row b,.record-row b,.deployment-row b,.member-row b,.version-row b{display:block;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-row small,.user-row small,.record-row small,.deployment-row small,.member-row small,.version-row small{display:block;font-size:7px;color:#626d7f;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-icon{width:28px;height:28px;border:1px solid #D21F321f;border-radius:8px;display:grid;place-items:center;color:#a99af7;background:#D21F320a;font-size:10px;flex:0 0 auto}.row-delete,.row-action{border:0;background:transparent;color:#5d6777;cursor:pointer;padding:4px 6px;font-size:10px}.row-delete:hover{color:#fb7185}.row-action:hover{color:#F05B68}.empty-platform{font-size:9px;color:#5e6879;padding:23px 8px;text-align:center;border:1px dashed #ffffff0d;border-radius:10px}.platform-select{width:100%;margin-top:12px;background:#0b0f16;color:#d4dae5;border:1px solid #ffffff10;border-radius:9px;padding:9px 10px;font-size:9px;outline:none}.big-stat{margin:18px 0 10px;display:flex;align-items:end;gap:8px}.big-stat b{font-family:Manrope;font-size:37px;letter-spacing:-.05em;color:#fff}.big-stat span{font-size:8px;color:#6d7788;padding-bottom:6px}.policy-list{margin-top:12px}.policy-list>div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff08;padding:10px 0;font-size:9px}.policy-list span{color:#737e90}.policy-list b{color:#bac3d3;font-size:8px}.policy-list b.on{color:#59dca6}
.automation-hero,.versions-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:7px 3px 17px}.automation-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:12px}.workflow-card{padding:15px;background:linear-gradient(145deg,#111522,#0c1017)}.workflow-top{display:flex;justify-content:space-between;gap:10px}.workflow-card h3{font-size:12px;margin:3px 0}.workflow-trigger{display:inline-flex;padding:3px 6px;border-radius:6px;background:#D21F3210;border:1px solid #D21F321c;color:#9f8df2;font-size:7px}.workflow-steps{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.workflow-steps span{font-size:7px;padding:4px 7px;border:1px solid #ffffff0b;border-radius:999px;color:#758095;background:#ffffff03}.activity-card{padding:15px;align-self:start}.event-row{display:block;padding:9px 10px}.event-row b{font-size:8px;display:block}.event-row small{font-size:7px;color:#626d7e;display:block;margin-top:3px}.event-row em{font-style:normal;color:#8b95a7;font-size:7px;float:right}
.deploy-hero{min-height:126px}.deploy-glow{position:absolute;left:4%;bottom:-170px;width:400px;height:230px;background:radial-gradient(ellipse,#E3983215,transparent 60%)}.live-deploy-badge{z-index:1;border:1px solid #ffffff0f;border-radius:999px;padding:8px 10px;display:flex;gap:7px;align-items:center;background:#080c13cc;font-size:8px;color:#7a8494}.live-deploy-badge i{width:7px;height:7px;border-radius:50%;background:#596274}.live-deploy-badge.live{border-color:#34d39928;color:#7ce5b7}.live-deploy-badge.live i{background:#34d399;box-shadow:0 0 12px #34d39999}.slug-field{height:39px;border:1px solid #ffffff10;background:#090d14;border-radius:9px;display:flex;align-items:center;overflow:hidden;margin:14px 0 10px}.slug-field span{padding-left:11px;color:#5f697a;font-size:8px;white-space:nowrap}.slug-field input{border:0!important;background:transparent!important;height:100%;min-width:0;flex:1;color:#dce2eb;padding:0 10px!important;outline:none}.deploy-actions{display:flex;gap:7px}.deploy-actions>*{flex:1}.live-url{display:inline-flex;margin-top:10px;color:#7dd3fc;font-size:8px;text-decoration:none}.portable-actions{display:grid;gap:7px;margin-top:12px}.portable-actions button{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid #ffffff0d;background:#ffffff03;color:#dce2eb;border-radius:9px;padding:9px;cursor:pointer}.portable-actions button:hover{border-color:#D21F3238;background:#D21F3208}.portable-actions button>span{width:28px;height:28px;border-radius:7px;background:#D21F3210;color:#F05B68;display:grid;place-items:center}.portable-actions b{display:block;font-size:9px}.portable-actions small{display:block;color:#646f80;font-size:7px;margin-top:2px}
.review-hero{margin-bottom:12px}.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.score-grid article{border:1px solid #ffffff0d;background:linear-gradient(145deg,#111620,#0c1018);border-radius:13px;padding:15px}.score-grid article span{font-size:7px;letter-spacing:.12em;color:#687386}.score-grid article b{font-family:Manrope;display:block;font-size:29px;margin:6px 0 2px}.score-grid article small{font-size:7px;color:#626c7d}.audit-findings{display:grid;gap:7px;margin-top:11px}.audit-item{border:1px solid #ffffff0a;background:#ffffff03;border-radius:9px;padding:10px;font-size:8px;color:#8c96a7}.audit-item.good{border-color:#34d3991b;color:#84ddb5}.audit-item.warn{border-color:#fbbf241a;color:#d4b868}.version-row .restore-version{border:1px solid #ffffff0d;background:#ffffff04;color:#8b95a7;border-radius:7px;padding:5px 7px;font-size:7px;cursor:pointer}.version-row .restore-version:hover{color:#fff;border-color:#D21F3238}
.cardinal-live-option{width:100%;margin-bottom:8px;background:linear-gradient(110deg,#7B101D24,#06b6d418)!important;border-color:#D21F3242!important}.modal-card.account-modal{width:min(460px,calc(100vw - 30px))}.auth-tabs{display:flex;padding:3px;background:#080c12;border:1px solid #ffffff0b;border-radius:9px;margin:15px 0 10px}.auth-tabs button{flex:1;border:0;background:transparent;color:#6d7788;padding:8px;border-radius:7px;font-size:9px;cursor:pointer}.auth-tabs button.active{color:white;background:#ffffff08}.platform-form{display:grid;gap:10px}.platform-form label,.setting-field{font-size:8px;color:#788396;display:grid;gap:5px}.platform-form input,.platform-form textarea,.platform-form select,.setting-field textarea{width:100%;background:#090d14;border:1px solid #ffffff10;border-radius:9px;color:#dce2eb;padding:10px 11px;outline:none;font:inherit;font-size:9px}.platform-form input:focus,.platform-form textarea:focus,.platform-form select:focus{border-color:#D21F3253;box-shadow:0 0 0 3px #D21F320c}.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.platform-form-modal{width:min(570px,calc(100vw - 30px))}.platform-form-modal h2{margin-bottom:14px}.profile-avatar{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#241b3c,#101827);border:1px solid #D21F3234;color:#b9a9ff;font-weight:800}.account-profile{display:flex;gap:11px;align-items:center;border:1px solid #ffffff0b;border-radius:12px;padding:12px;margin:13px 0}.account-profile b{display:block;font-size:11px}.account-profile small{display:block;color:#697486;font-size:8px;margin-top:4px}.danger-button{border:1px solid #fb71852b!important;background:#fb71850b!important;color:#fb99a7!important;margin-top:7px}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.plan-grid article{border:1px solid #ffffff0d;border-radius:12px;padding:13px;background:#ffffff03;position:relative}.plan-grid article.featured{border-color:#D21F324a;background:linear-gradient(145deg,#D21F3210,#06b6d409)}.plan-grid article em{position:absolute;right:8px;top:8px;font-size:6px;color:#F05B68;font-style:normal}.plan-grid article>span{font-size:7px;color:#7c8798}.plan-grid article>b{font-family:Manrope;display:block;font-size:25px;margin:7px 0}.plan-grid article>b small{font-size:8px;color:#697486}.plan-grid article>small{font-size:7px;color:#697486;display:block;margin-bottom:10px}.switch{position:relative;width:37px;height:21px;display:block}.switch input{display:none}.switch span{position:absolute;inset:0;border-radius:999px;background:#232a36;border:1px solid #ffffff10}.switch span:after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#758093;left:2px;top:2px;transition:.2s}.switch input:checked+span{background:#7B101D44;border-color:#D21F3262}.switch input:checked+span:after{transform:translateX(16px);background:#F7A5AD}.setting-toggle-row .switch{flex:0 0 auto}.full{width:100%}
@media(max-width:1050px){.runtime-service-grid{grid-template-columns:repeat(3,1fr)}.platform-hero,.deploy-hero,.review-hero{grid-template-columns:auto 1fr}.runtime-status,.live-deploy-badge{grid-column:1/-1}.backend-grid,.deploy-grid{grid-template-columns:1fr}.automation-layout{grid-template-columns:1fr}.score-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.credit-pill{display:none}.account-chip{display:grid}.platform-orbit{display:none}.platform-hero,.deploy-hero,.review-hero{display:block;padding:18px}.runtime-status{margin-top:14px}.runtime-service-grid{grid-template-columns:1fr 1fr}.backend-grid,.deploy-grid{grid-template-columns:1fr}.score-grid{grid-template-columns:1fr 1fr}.automation-hero,.versions-head{align-items:stretch;flex-direction:column}.permission-grid{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr}.visual-panel{align-items:stretch}.visual-panel>div:first-child{min-width:0}.topbar-actions .ghost-button.compact{display:none}}
.code-editor{display:block;width:100%;height:100%;min-height:520px;resize:none;border:0;outline:0;background:#090c12;color:#c9d2e3;padding:18px;font:10px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;tab-size:2}.chat-mode-switch{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid #ffffff0b;background:#0a0e15}.chat-mode{border:1px solid transparent;background:transparent;color:#687386;border-radius:7px;padding:6px 8px;font-size:8px;cursor:pointer}.chat-mode.active{color:#d9d5ff;border-color:#D21F322c;background:#D21F320d}.chat-mode-switch>span{margin-left:auto;font-size:7px;color:#5b6677}


/* Cardinal identity + authentication */
.auth-locked{filter:blur(18px);pointer-events:none;user-select:none;max-height:100vh;overflow:hidden;opacity:.25;transform:scale(.985)}
.cardinal-logo{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(210,31,50,.32))}.cardinal-logo.large{width:62px;height:62px}
.auth-gate{position:fixed;inset:0;z-index:1000;display:grid;grid-template-columns:minmax(420px,1.12fr) minmax(390px,.88fr);background:#08090c;color:var(--text)}
.auth-brand-panel{position:relative;overflow:hidden;display:flex;align-items:center;padding:clamp(48px,7vw,100px);background:radial-gradient(circle at 30% 30%,rgba(210,31,50,.23),transparent 28%),linear-gradient(145deg,#150b0d,#090a0d 58%,#0c0d11);border-right:1px solid rgba(255,255,255,.07)}
.auth-brand-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 46%,rgba(227,152,50,.04) 46.2%,transparent 46.4%),repeating-linear-gradient(145deg,transparent 0 42px,rgba(255,255,255,.012) 43px 44px);pointer-events:none}
.cardinal-auth-mark{position:absolute;right:7%;top:8%;width:min(38vw,470px);height:min(38vw,470px);opacity:.18;filter:drop-shadow(0 0 80px rgba(210,31,50,.34));transform:rotate(-4deg)}
.cardinal-halo{position:absolute;width:520px;height:520px;right:-170px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(210,31,50,.22),rgba(123,16,29,.08) 42%,transparent 68%);filter:blur(10px)}
.auth-brand-copy{position:relative;z-index:3;max-width:690px}.auth-brand-copy h1{font:800 clamp(52px,6vw,92px)/.92 Manrope,sans-serif;letter-spacing:-.065em;margin:17px 0 25px}.auth-brand-copy h1 span{color:#F47C86}.auth-brand-copy>p{max-width:610px;color:#a6a7ae;font-size:15px;line-height:1.8}.auth-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:42px;max-width:610px}.auth-proof-grid div{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:14px;padding:14px}.auth-proof-grid b{display:block;font-size:11px}.auth-proof-grid small{display:block;color:#777b85;margin-top:4px;font-size:9px}.auth-feather-lines{position:absolute;left:6%;bottom:5%;display:grid;gap:9px;opacity:.28}.auth-feather-lines i{display:block;width:220px;height:1px;background:linear-gradient(90deg,#D21F32,transparent);transform:rotate(-8deg);transform-origin:left}.auth-feather-lines i:nth-child(2){width:170px}.auth-feather-lines i:nth-child(3){width:260px}.auth-feather-lines i:nth-child(4){width:120px}
.auth-form-panel{display:grid;place-items:center;padding:46px;background:linear-gradient(180deg,#101115,#090a0d)}.auth-box{width:min(100%,440px)}.auth-mobile-brand{display:none}.auth-kicker{font-size:9px;font-weight:800;letter-spacing:.2em;color:#F05B68}.auth-box h2{font:800 38px/1.05 Manrope,sans-serif;letter-spacing:-.045em;margin:10px 0}.auth-box>p{color:#777f8e;font-size:12px;line-height:1.6;margin:0 0 24px}.auth-gate-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#0c0d11;border:1px solid rgba(255,255,255,.075);border-radius:12px;margin-bottom:14px}.auth-gate-tabs button{border:0;background:transparent;color:#717985;padding:10px;border-radius:8px;cursor:pointer;font-size:11px;font-weight:700}.auth-gate-tabs button.active{background:linear-gradient(135deg,rgba(210,31,50,.22),rgba(123,16,29,.3));color:#fff;box-shadow:inset 0 0 0 1px rgba(240,91,104,.18)}.google-auth-button{width:100%;border:1px solid rgba(255,255,255,.1);background:#15161b;color:#f4f4f5;border-radius:11px;padding:12px;cursor:pointer;font-size:11px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:9px}.google-auth-button:hover{background:#1b1c21}.google-g{width:19px;height:19px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:10px;font-weight:900}.auth-divider{height:43px;display:flex;align-items:center;gap:10px;color:#5e636d;font-size:9px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:rgba(255,255,255,.07);flex:1}.gate-auth-form{display:grid;gap:12px}.auth-name-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gate-auth-form label{display:grid;gap:6px;color:#8e929d;font-size:9px;font-weight:600}.gate-auth-form input{width:100%;border:1px solid rgba(255,255,255,.09);background:#0c0d11;color:#f6f5f2;border-radius:10px;padding:12px;outline:0;font-size:11px}.gate-auth-form input:focus{border-color:rgba(210,31,50,.55);box-shadow:0 0 0 3px rgba(210,31,50,.09)}.auth-submit{width:100%;margin-top:3px;padding:13px!important;font-size:11px!important}.auth-legal{display:block;text-align:center;color:#50545e;font-size:8px;line-height:1.5;margin-top:15px}.auth-setup-note{margin-top:12px;padding:10px;border:1px solid rgba(227,152,50,.2);background:rgba(227,152,50,.06);color:#d7af73;border-radius:10px;font-size:9px;line-height:1.5}
.account-credit-card{margin:14px 0;padding:14px;border-radius:13px;border:1px solid rgba(210,31,50,.18);background:linear-gradient(135deg,rgba(210,31,50,.12),rgba(123,16,29,.05))}.account-credit-card span,.account-credit-card small{display:block;color:#8b8f99;font-size:8px;letter-spacing:.1em}.account-credit-card b{display:block;font:800 34px Manrope,sans-serif;margin:4px 0;color:#fff}.plan-intro{max-width:680px}.cardinal-plans{grid-template-columns:repeat(4,1fr)!important}.cardinal-plans article{min-width:0}.cardinal-plans article>em:not(.popular){display:block;color:#777f8d;font-size:9px;font-style:normal;margin-top:7px}.credit-pack-section{margin-top:18px;border-top:1px solid rgba(255,255,255,.07);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px}.credit-pack-section small{display:block;color:#747b88;font-size:9px;margin-top:4px}.credit-pack-buttons{display:flex;gap:7px;flex-wrap:wrap}.credit-pack-buy{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);color:#ddd;border-radius:8px;padding:8px 10px;cursor:pointer;font-size:9px}.credit-pack-buy:hover{border-color:rgba(210,31,50,.35);background:rgba(210,31,50,.08)}
.quote-modal{max-width:650px!important}.quote-badge{display:inline-flex;border-radius:999px;padding:6px 9px;font-size:8px;font-weight:800;letter-spacing:.14em;border:1px solid rgba(255,255,255,.1)}.quote-badge.easy{color:#7ee0bd;background:rgba(52,211,153,.08)}.quote-badge.intermediate{color:#eab86c;background:rgba(227,152,50,.08)}.quote-badge.hard,.quote-badge.extreme{color:#ff8290;background:rgba(210,31,50,.1)}.quote-cost-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}.quote-cost-row>div{padding:15px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.075)}.quote-cost-row span,.quote-cost-row small{display:block;color:#717887;font-size:8px;text-transform:uppercase;letter-spacing:.09em}.quote-cost-row b{display:block;font:800 30px Manrope,sans-serif;margin:6px 0;color:#fff}.quote-note{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(52,211,153,.12);background:rgba(52,211,153,.04);padding:11px;border-radius:11px}.quote-note span{color:#34d399}.quote-note p{margin:0;color:#8c93a1;font-size:9px;line-height:1.55}.quote-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.quote-actions button{padding:10px 14px;border-radius:9px}
@media(max-width:960px){.auth-gate{grid-template-columns:1fr}.auth-brand-panel{display:none}.auth-form-panel{min-height:100vh;padding:30px 20px}.auth-mobile-brand{display:flex;position:absolute;top:24px;left:24px;align-items:center;gap:9px}.auth-mobile-brand img{width:31px;height:31px}.auth-mobile-brand b{font:800 15px Manrope,sans-serif}.cardinal-plans{grid-template-columns:1fr 1fr!important}}
@media(max-width:620px){.auth-name-grid,.quote-cost-row,.cardinal-plans{grid-template-columns:1fr!important}.credit-pack-section{align-items:flex-start;flex-direction:column}}

.admin-modal{width:min(900px,calc(100vw - 30px))!important}.admin-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.admin-status-card{margin:16px 0;display:flex;align-items:center;justify-content:space-between;padding:17px;border-radius:15px;border:1px solid rgba(210,31,50,.16);background:linear-gradient(115deg,rgba(210,31,50,.11),rgba(255,255,255,.018))}.admin-status-card span{display:block;color:#777f8d;font-size:8px;letter-spacing:.12em}.admin-status-card b{display:block;font:800 37px Manrope,sans-serif;margin-top:3px}.margin-status{border-radius:999px;padding:7px 10px;font-size:8px;font-weight:800;letter-spacing:.1em}.margin-status.healthy{color:#70deb7;background:rgba(52,211,153,.09)}.margin-status.watch{color:#e8b66a;background:rgba(227,152,50,.1)}.margin-status.protected{color:#ff8995;background:rgba(210,31,50,.11)}.margin-status.stop{color:white;background:#d21f32}.admin-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.admin-metric-grid article{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);border-radius:12px;padding:13px}.admin-metric-grid span{display:block;color:#707785;font-size:7px;letter-spacing:.09em}.admin-metric-grid b{display:block;font:800 20px Manrope,sans-serif;margin-top:6px}.admin-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.admin-two-col section{border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:13px;background:rgba(255,255,255,.018)}.admin-list{display:grid;gap:6px;margin-top:10px}.admin-list>div{display:grid;grid-template-columns:1fr auto;gap:3px 8px;border-top:1px solid rgba(255,255,255,.05);padding:9px 0}.admin-list b{font-size:9px}.admin-list span{font-size:8px;color:#9a9faa}.admin-list small{grid-column:1/-1;color:#626977;font-size:7px}@media(max-width:760px){.admin-metric-grid{grid-template-columns:1fr 1fr}.admin-two-col{grid-template-columns:1fr}}
.project-list-row{display:grid;grid-template-columns:1fr 25px;gap:2px;align-items:center}.project-list-row .project-item{min-width:0}.project-list-row.archived{opacity:.58}.project-archive-btn{width:24px;height:28px;border:0;background:transparent;color:#606775;border-radius:7px;cursor:pointer}.project-archive-btn:hover{background:rgba(210,31,50,.1);color:#f27a85}
/* Cardinal production plan polish */
.upgrade-modal{width:min(980px,calc(100vw - 30px))!important}
.cardinal-plans article>em:not(.popular){position:static!important;right:auto!important;top:auto!important;display:block!important;color:#777f8d!important;font-size:9px!important;margin:7px 0 12px!important;letter-spacing:0!important;text-transform:none!important}
.cardinal-plans article>em.popular{position:absolute;right:8px;top:8px}


/* True routed authentication pages */
body.auth-page{height:100dvh;min-height:100dvh;overflow:hidden;background:#08090c}
body.auth-page .ambient,body.auth-page .noise{pointer-events:none}
body.auth-page .auth-gate{position:relative;inset:auto;width:100%;height:100dvh;min-height:100dvh;z-index:1}
body.auth-page .auth-form-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.studio-page{min-height:100vh}
body.studio-page .app-shell{min-height:100vh}
@media(max-width:960px){body.auth-page .auth-form-panel{height:100dvh}}