/* Design System-inspired light theme */
:root{
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-subtle: #f1f5f9;
  --text: #0f172a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 2px 8px rgba(15, 23, 42, .08);

  --success: #22c55e;
  --warning: #f59e0b;
  --info: #64748b;
  --danger: #ef4444;
  --brand: #1CCC5B;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Layout */
.layout{display:grid;grid-template-columns:64px 240px 1fr;min-height:100vh}
.rail{background:#1f2937;color:#e5e7eb;display:flex;flex-direction:column;align-items:center;padding:.75rem 0;gap:1rem}
.rail .brand{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:#111827}
.rail .item{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#cbd5e1;opacity:.9}
.rail .item:hover{background:#111827}

.sidenav{background:var(--surface);border-right:1px solid var(--border);padding:1rem}
.nav-title{font-weight:600;color:#334155;margin:.25rem 0 .5rem}
.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.nav-list li a{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:8px;color:#0f172a;text-decoration:none}
.nav-list li a:hover{background:var(--surface-subtle)}
.nav-ico{width:18px;height:18px;border-radius:4px;background:#e2e8f0;display:inline-block}

.main{padding:1rem 1.25rem}
.main-header{display:flex;justify-content:space-between;align-items:center;margin:.25rem 0 1rem}
.breadcrumbs{font-size:1.25rem;font-weight:700;letter-spacing:.2px}
.top-actions{display:flex;align-items:center;gap:.5rem}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.35rem .6rem;color:#334155}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* Allow featured card to span full width */
.card.wide{grid-column:1 / -1}
.span-all{grid-column:1 / -1}
/* Three-up grid for secondary panels */
.grid-3{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 1200px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 700px){.grid-3{grid-template-columns:1fr}}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:1rem}
.card h3{margin:.25rem 0 .4rem;font-size:1.05rem}
.meta{color:var(--muted);font-size:.9rem}
.kebab{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:.4rem .6rem}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin:.35rem 0 .5rem}
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.25rem .5rem;font-size:.85rem;border:1px solid transparent}
.pill.success{background:#e9f9ef;color:#166534;border-color:#bbf7d0}
.pill.warning{background:#fff7ed;color:#92400e;border-color:#fde68a}
.pill.paused{background:#eef2f7;color:#334155;border-color:#e2e8f0}
.pill.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.ico{font-size:.9em;line-height:1}

/* Actions */
.actions{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);padding:.45rem .7rem;color:#0f172a;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--surface-subtle)}
.btn.primary{background:#16a34a;color:#06260f;border-color:#16a34a}
.btn.primary:hover{filter:brightness(.98)}

/* Utility */
.muted{color:var(--muted)}
.spacer{flex:1}

/* Split layout inside wide card */
.split{display:grid;grid-template-columns:1fr 360px;gap:1rem;align-items:start}
@media (max-width: 960px){.split{grid-template-columns:1fr}}

/* Banner in first card */
.banner{background:linear-gradient(180deg,#f0fdf4 0%, #ffffff 100%);border:1px solid #bbf7d0;border-radius:12px;padding:1rem;box-shadow:var(--shadow)}
.banner h4{margin:.2rem 0 .4rem;font-size:1.05rem}
.banner p{margin:.25rem 0 .6rem;color:#0f172a}
.banner .btn{width:100%}
.banner .hint{margin-top:.4rem}

/* Checklist */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-subtle)}
.checklist input[type="checkbox"]{width:1rem;height:1rem;margin-top:.2rem;accent-color:var(--brand)}
.checklist label{line-height:1.3}

/* Simple form */
.field{margin:.5rem 0}
.label{display:block;font-weight:600;margin-bottom:.25rem;color:#334155}
.input,.select{width:100%;padding:.55rem .6rem;border:1px solid var(--border);border-radius:8px;background:#fff;color:#0f172a}
.options{display:grid;gap:.4rem;margin:.4rem 0}
.hint{color:var(--muted);font-size:.9rem}

/* Video card */
.video-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,#f0f7ff,#fafcff);display:grid;place-items:center;border:1px solid var(--border);overflow:hidden}
.video-thumb .play{width:72px;height:72px;border-radius:50%;background:#ffffff;display:grid;place-items:center;border:2px solid var(--brand);box-shadow:0 0 0 6px rgba(28,204,91,.12)}
.triangle{display:inline-block;width:0;height:0;border-left:16px solid var(--brand);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.caption{position:absolute;bottom:10px;left:12px;font-size:.92rem;color:#0f172a;opacity:.8}

/* Links & bullets */
.bullets{margin:.25rem 0 .75rem;padding-left:1rem}
.bullets li{margin:.25rem 0}
.stacked-actions{display:grid;gap:.4rem}
.link{color:#0f766e;text-decoration:none}
.link:hover{text-decoration:underline}

/* Assistant (robot with bubble) */
.assistant{position:fixed;bottom:10px;left:24px;display:flex;gap:.75rem;align-items:flex-end;z-index:1000}
.assistant .bot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#e2fbe8;border:2px solid #16a34a;box-shadow:var(--shadow);font-size:26px}
.assistant .bubble{position:relative;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.9rem 2rem .9rem .9rem}
.assistant .bubble:after{content:"";position:absolute;left:-8px;bottom:14px;border-width:8px;border-style:solid;border-color:transparent var(--surface) transparent transparent;filter:drop-shadow(-1px 0 0 var(--border))}
.assistant .bubble h4{margin:.1rem 0 .35rem;font-size:1rem}
.assistant .bubble ul{margin:.25rem 0 0 1.1rem}
.assistant .bubble li{margin:.25rem 0}
.assistant .close{position:absolute;top:6px;right:6px;border:none;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:#334155}

/* Docked mini bot in left rail */
.rail .dock{margin-top:auto;padding-top:.5rem}
.bot-mini{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e2fbe8;border:1px solid #16a34a;color:#065f46;cursor:pointer}
.rail .dock{display:none}
body.bot-collapsed .assistant{display:none}
body.bot-collapsed .rail .dock{display:block}

@media (max-width: 960px){
  .layout{grid-template-columns:64px 1fr}
  .sidenav{display:none}
}