/* Coveroo brand, matched to coveroo.ai (experience.css tokens): white canvas, navy #172B4D, blue #2478EB, action blue #185DB7, cream #FFF8EF, caramel #C98750, Nunito Sans */
@font-face { font-family: 'Nunito Sans'; src: url('/brand/NunitoSans-Latin-variable.ttf') format('truetype'); font-weight: 200 1000; }
:root { --blue:#2478EB; --blue-d:#185DB7; --cream:#FFF8EF; --tan:#C98750; --ink:#172B4D; --line:#E5EAF0; --soft:#F7F9FC; --sky:#EEF5FF; --muted:#58677C; --ok:#185DB7; --warn:#81502D; --bad:#C02B3A; }
* { box-sizing: border-box } body { margin:0; font-family:'Nunito Sans',system-ui,sans-serif; color:var(--ink); background:#FFFFFF; }
a { color: var(--blue-d) } h1,h2,h3 { margin:.2em 0 .5em; font-weight:800 } h1 { font-size:1.6rem }
.shell { display:flex; min-height:100vh } html { scrollbar-gutter: stable } nav.side { width:230px; flex:0 0 230px; background:#fff; border-right:1px solid var(--line); padding:18px 12px; align-self:stretch; min-height:100vh }
nav.side .inner { position:sticky; top:18px }
nav.side img.wm { display:block; width:150px; height:auto; margin:4px 12px 20px } nav.side a { display:block; padding:9px 12px; border-radius:10px; text-decoration:none; color:var(--ink); font-weight:700 }
nav.side a.on, nav.side a:hover { background:#EAF2FD; color:var(--blue-d) } main { flex:1; min-width:0; padding:24px 28px; max-width:1200px }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:14px; box-shadow:0 1px 2px rgba(23,43,77,.04) }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px } .stat b { font-size:1.9rem; display:block; color:var(--blue-d) }
table { width:100%; border-collapse:collapse; font-size:.93rem } th,td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line) } th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.btn { background:var(--blue-d); color:#fff; border:1px solid transparent; border-radius:14px; padding:10px 18px; font:inherit; font-weight:800; cursor:pointer } .btn:hover { background:#134C96 }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px }
.btn.ghost { background:#fff; color:var(--blue-d); border:1px solid var(--line) } .btn.bad { background:var(--bad) } .btn.sm { padding:6px 12px; font-size:.85rem }
input,textarea,select { font:inherit; padding:10px 12px; border:1.5px solid var(--line); border-radius:12px; width:100%; background:#fff } textarea { min-height:80px }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:800; background:#EAF2FD; color:var(--blue-d) }
.pill.warn { background:var(--cream); color:var(--warn) } .pill.bad { background:#FBE9E8; color:var(--bad) } .pill.ok { background:var(--sky); color:var(--ok) }
.demo-banner { background:var(--tan); color:#fff; text-align:center; font-weight:800; font-size:.85rem; padding:5px }
.login { max-width:420px; margin:6vh auto; text-align:center } .login img.wm { display:block; width:160px; height:auto; margin:4px auto 14px } .login img.hero { width:220px; border-radius:20px } .login form { text-align:left; display:grid; gap:10px }
.muted { color:var(--muted); font-size:.9rem } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap } .right { margin-left:auto }
.kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:12px } .kanban .col { background:var(--soft); border-radius:14px; padding:10px } .kanban .item { background:#fff; border-radius:12px; padding:10px; margin-bottom:8px; border:1px solid var(--line); font-size:.9rem }
.timeline { border-left:3px solid var(--blue); margin-left:6px; padding-left:14px } .timeline div { margin-bottom:8px }
.chat { display:flex; flex-direction:column; gap:8px; max-height:55vh; overflow:auto; padding:6px } .bubble { padding:10px 14px; border-radius:16px; max-width:80%; white-space:pre-wrap }
.bubble.roo { background:#F1F6FE; border-radius:0 14px 14px 14px; align-self:flex-start } .bubble.client { background:var(--ink); color:#fff; border-radius:14px 0 14px 14px; align-self:flex-end } .avatar { width:44px; height:44px; border-radius:50% }
@media (max-width: 760px) { .shell { flex-direction:column } nav.side { width:100%; flex:none; min-height:0; overflow-x:auto; padding:8px } nav.side .inner { position:static; display:flex } nav.side img.wm { width:130px; margin:6px 12px 6px 4px; flex:none }
  nav.side a { white-space:nowrap } main { padding:14px } .kanban { grid-template-columns:1fr 1fr } table { font-size:.82rem } }

html[data-mode=production] .demo-banner, html[data-mode=production] .demo-only { display:none !important; }