:root {
  --bg: #eef2f7;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --ok: #16a34a;
  --warn: #d97706;
  --shadow: 0 18px 45px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.sidebar { background: #0f172a; color: white; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; position: sticky; top: 0; height: 100vh; }
.brand { font-size: 28px; font-weight: 900; letter-spacing: -.03em; }
.tagline { margin-top: 8px; color: #cbd5e1; line-height: 1.5; }
.side-section { display: grid; gap: 8px; }
.side-section button { text-align: left; border: 0; border-radius: 14px; padding: 12px 14px; background: transparent; color: #cbd5e1; font-weight: 700; }
.side-section .side-active, .side-section button:hover { background: rgba(255,255,255,.12); color: white; }
.system-card { display: grid; gap: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 16px; background: rgba(255,255,255,.08); }
.system-card span { color: #cbd5e1; font-size: 13px; }
.main { padding: 28px; display: grid; gap: 22px; }
.hero { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; background: linear-gradient(135deg, #ffffff, #eff6ff); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 28px; padding: 28px; }
.hero h1 { margin: 0; font-size: 38px; letter-spacing: -.04em; }
.hero p { margin: 10px 0 0; color: var(--muted); max-width: 820px; line-height: 1.6; }
.eyebrow { margin: 0 !important; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; font-weight: 900; color: var(--accent) !important; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill { border-radius: 999px; padding: 8px 12px; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 900; }
.pill.ok { background: #dcfce7; color: #166534; }
.pill.warn { background: #fef3c7; color: #92400e; }
.notice { border-radius: 16px; padding: 14px 16px; background: #ecfeff; border: 1px solid #a5f3fc; color: #155e75; font-weight: 700; }
.summary-grid { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(110px, 1fr)); gap: 14px; }
.summary-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 22px; padding: 18px; display: grid; gap: 6px; }
.summary-card span { color: var(--muted); font-size: 13px; font-weight: 800; }
.summary-card strong { font-size: 28px; letter-spacing: -.03em; }
.summary-card.wide strong { font-size: 22px; }
.summary-card p { margin: 0; color: var(--muted); }
.workspace-grid { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(240px, .9fr) minmax(360px, 1.3fr); gap: 18px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 24px; padding: 20px; min-width: 0; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-title h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.panel-title span { color: var(--muted); font-size: 13px; font-weight: 800; }
.stack-form { display: grid; gap: 10px; margin-bottom: 18px; }
label { font-size: 13px; font-weight: 900; color: #334155; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; background: white; color: var(--text); outline: none; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.primary { border: 0; border-radius: 14px; background: var(--accent); color: white; font-weight: 900; padding: 12px 14px; }
.primary:disabled { opacity: .55; cursor: not-allowed; }
.primary.big { width: 100%; padding: 14px 16px; font-size: 15px; }
.list { display: grid; gap: 10px; }
.list-item { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: #f8fafc; display: grid; gap: 4px; color: var(--text); }
.list-item strong { font-size: 14px; }
.list-item span, .list-item small { color: var(--muted); overflow-wrap: anywhere; }
.list-item.active { border-color: var(--accent); background: #eff6ff; box-shadow: 0 0 0 2px var(--accent-soft); }
.task-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; }
.task-column { background: #f8fafc; border: 1px solid var(--line); border-radius: 20px; padding: 14px; min-height: 170px; }
.column-title { display: flex; justify-content: space-between; margin-bottom: 12px; }
.column-title span { background: white; border-radius: 999px; padding: 2px 8px; color: var(--muted); font-weight: 900; }
.task-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 13px; margin-bottom: 10px; display: grid; gap: 8px; }
.task-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.task-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.task-card span { color: var(--muted); font-size: 12px; font-weight: 800; }
.mini-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-actions button { border: 0; border-radius: 999px; padding: 6px 9px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 900; }
.work-area { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr); gap: 18px; align-items: start; }
.task-workspace { display: grid; gap: 16px; }
.selected-task { border: 1px solid var(--line); background: #f8fafc; border-radius: 18px; padding: 16px; }
.selected-task h3 { margin: 0 0 8px; }
.selected-task p { color: var(--muted); margin: 0; line-height: 1.55; }
.meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.meta-row span { background: white; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900; color: #475569; }
.agent-form { display: grid; gap: 12px; }
.file-box { border: 1px dashed #93c5fd; background: #eff6ff; border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.file-box small { color: #1e40af; line-height: 1.4; }
.check-row { display: flex; align-items: center; gap: 8px; }
.check-row input { width: auto; }
.sub-panel { border-top: 1px solid var(--line); padding-top: 14px; }
.sub-panel h3 { margin: 0 0 10px; }
.file-list { display: grid; gap: 10px; }
.file-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 4px; background: #f8fafc; }
.file-item span, .file-item small { color: var(--muted); }
.result-view { display: grid; gap: 14px; }
.run-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.run-meta span { background: #f8fafc; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
.answer, .json { white-space: pre-wrap; overflow: auto; background: #0f172a; color: #e2e8f0; border-radius: 16px; padding: 16px; line-height: 1.55; }
details { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: #f8fafc; }
summary { cursor: pointer; font-weight: 900; }
.message { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.message p { white-space: pre-wrap; color: var(--muted); }
.empty { color: var(--muted); background: #f8fafc; border: 1px dashed var(--line); border-radius: 14px; padding: 14px; }
.empty.small { padding: 10px; font-size: 13px; }
@media (max-width: 1280px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; } .workspace-grid, .work-area, .summary-grid { grid-template-columns: 1fr; } .task-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .main { padding: 16px; } .hero { flex-direction: column; } .hero h1 { font-size: 30px; } .task-board { grid-template-columns: 1fr; } }

.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#0f172a,#1d4ed8)}
.login-card{width:min(440px,100%);background:white;border-radius:28px;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.22);display:grid;gap:16px}
.login-card h1{margin:0;font-size:34px;letter-spacing:-.04em}.login-card p{margin:0;color:var(--muted);line-height:1.6}.login-card small{color:var(--muted)}
.logout-button{border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.12);color:white;font-weight:900;padding:9px 10px;text-align:left}

/* Phase 6 product UX */
.phase6 .product-hero{background:linear-gradient(135deg,#fff,#eef6ff 55%,#f8fafc)}
.dashboard-grid{display:grid;grid-template-columns:minmax(280px,2fr) repeat(4,minmax(130px,1fr));gap:14px}
.dashboard-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:18px;display:grid;gap:6px;min-height:120px}
.dashboard-card span{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.dashboard-card strong{font-size:30px;letter-spacing:-.04em}.dashboard-card p,.dashboard-card small{margin:0;color:var(--muted);line-height:1.45}.primary-card strong{font-size:24px}
.onboarding{display:flex;justify-content:space-between;gap:18px;align-items:center;background:#fff7ed;border:1px solid #fed7aa;border-radius:22px;padding:18px;color:#7c2d12}.onboarding p{margin:6px 0 0;color:#9a3412}.steps{display:flex;gap:8px;flex-wrap:wrap}.steps span{background:white;border:1px solid #fdba74;border-radius:999px;padding:8px 11px;font-weight:900;font-size:12px}
.phase6-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:18px}.compact-form{background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:14px}.scroll-list{max-height:320px;overflow:auto;padding-right:4px}
.task-detail-layout,.result-layout{display:grid;grid-template-columns:minmax(380px,.9fr) minmax(440px,1.1fr);gap:18px;align-items:start}
.task-detail-card{background:#f8fafc;border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:16px}.detail-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.detail-head h3{margin:0;font-size:24px;letter-spacing:-.03em}.task-detail-card p{color:var(--muted);line-height:1.6}.detail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.detail-meta span{background:white;border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;color:#475569}.status-chip{border-radius:999px;padding:7px 10px;font-weight:900;font-size:12px;background:#e0f2fe;color:#075985}.status-chip.done{background:#dcfce7;color:#166534}.status-chip.review{background:#fef3c7;color:#92400e}.status-chip.doing{background:#dbeafe;color:#1d4ed8}
.next-action{margin-top:14px;background:white;border:1px solid var(--line);border-radius:16px;padding:14px}.next-action p{margin:6px 0 0}.create-task-panel{margin-top:12px}.mini-note{background:#f8fafc;border:1px dashed var(--line);border-radius:14px;padding:12px;color:var(--muted)}
.timeline{display:grid;gap:12px;margin-bottom:16px}.timeline-item{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}.timeline-item>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e2e8f0;color:#475569;font-weight:900}.timeline-item.done>span{background:#dcfce7;color:#166534}.timeline-item div{background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:12px}.timeline-item p{margin:5px 0 0;color:var(--muted);line-height:1.45}.summary-result h3{margin:0 0 10px}.clean-answer{background:#f8fafc;color:var(--text);border:1px solid var(--line);font-size:15px}.phase6-result details:not([open]){background:white}
@media (max-width:1280px){.dashboard-grid,.phase6-grid,.task-detail-layout,.result-layout{grid-template-columns:1fr}.onboarding{align-items:flex-start;flex-direction:column}}