:root{
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc;
  --text:#151d30; --muted:#66748c; --line:#e6eaf2;
  --accent:#4f6ef7; --accent-2:#2f4fd6; --accent-soft:#edf1ff;
  --nav-1:#0e1b33; --nav-2:#152a52;
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(21,42,78,.08);
  --shadow-sm:0 4px 14px rgba(21,42,78,.06);
  font:15px Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text); background:var(--bg); letter-spacing:-.01em;
}
:root[data-theme=dark]{
  --bg:#0a1120; --surface:#121b2e; --surface-2:#0e1526;
  --text:#e7edf8; --muted:#8fa0bc; --line:#223251;
  --accent:#6f8bff; --accent-2:#4f6ef7; --accent-soft:#1c2947;
  --nav-1:#070d1a; --nav-2:#0f1c37;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 4px 14px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);transition:background .2s,color .2s}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}

/* layout */
.shell{display:flex;min-height:100vh}
.side{width:264px;flex:0 0 264px;min-height:100vh;color:#c4d2ea;background:linear-gradient(180deg,var(--nav-1),var(--nav-2));padding:22px 14px 16px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.05);box-shadow:12px 0 30px rgba(8,15,30,.15)}
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px 24px}
.brand strong{display:block;color:#fff;font-size:1.05rem;letter-spacing:-.01em}
.brand small{color:#8ba1cc}
.brand-mark{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:inline-grid;place-items:center;color:#fff;background:linear-gradient(135deg,#6289ff,#2c48b8);font-weight:800;box-shadow:0 8px 18px rgba(60,100,240,.35)}
.side-label{color:#7286a8;text-transform:uppercase;font-size:.65rem;font-weight:800;letter-spacing:.14em;padding:4px 12px 10px}
.side nav{display:grid;gap:4px}
.nav-item{display:flex;gap:12px;align-items:center;width:100%;color:#adbfdb;text-align:left;background:transparent;border:0;border-radius:10px;padding:10px 12px;font-size:.87rem;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.nav-item i{width:18px;text-align:center;color:#7d9aef;font-size:1rem}
.nav-item:hover{background:rgba(111,139,255,.14);color:#fff;transform:translateX(2px)}
.nav-item.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 18px rgba(50,80,200,.3)}
.nav-item.active i{color:#fff}
.logout{display:flex;gap:12px;align-items:center;margin-top:auto;color:#ff9aa4;text-align:left;background:transparent;border:0;border-radius:10px;padding:12px;cursor:pointer;font-size:.86rem}
.logout:hover{background:rgba(255,120,130,.1)}

.main{padding:30px 38px;max-width:none;width:100%}
.top{display:flex;justify-content:space-between;align-items:center;max-width:1440px;margin:0 auto 26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.top h2{margin:4px 0 0;font-size:1.7rem;font-weight:750;letter-spacing:-.03em}
.eyebrow{color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.env{border:0;color:#1f8f5a;background:#e3f8ec;border-radius:999px;padding:6px 12px;font-size:.75rem;font-weight:700}
:root[data-theme=dark] .env{background:#123d29;color:#5ee0a3}
.top-actions{display:flex;align-items:center;gap:10px}
.theme-toggle,.mobile-menu{height:38px;min-width:38px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--accent);cursor:pointer}
.theme-toggle:hover,.mobile-menu:hover{border-color:var(--accent)}
.mobile-menu{display:none}
#content{max-width:1440px;margin:0 auto;width:100%}

/* welcome / metrics */
.welcome{display:flex;justify-content:space-between;gap:22px;align-items:center;color:#fff;border-radius:20px;padding:32px 34px;margin-bottom:22px;background:radial-gradient(circle at 88% 12%,rgba(140,170,255,.35),transparent 40%),linear-gradient(120deg,#152b55,#2e56bf);box-shadow:0 16px 38px rgba(29,67,151,.22)}
.welcome h1{margin:6px 0;font-size:1.95rem;letter-spacing:-.03em}
.welcome .muted{color:#d3e0f7}
.welcome .btn{background:#fff;color:#2b4fac;border:0;padding:11px 18px}
.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:20px}
.metric,.card,.project-card{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.metric{padding:19px;min-height:126px;position:relative;transition:box-shadow .15s,transform .15s}
.metric:hover,.card:hover{box-shadow:var(--shadow)}
.metric span{display:block;color:var(--muted);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.metric strong{display:block;font-size:2rem;margin-top:9px;letter-spacing:-.04em}
.metric i{position:absolute;right:16px;top:18px;color:var(--accent);font-style:normal;font-size:1.3rem;opacity:.85}

.dashboard-grid,.project-detail-grid,.settings-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.card{padding:22px}
.section-head{display:flex;justify-content:space-between;gap:15px;align-items:center}
.section-head h3,.card h3{margin:0;font-size:1.02rem;letter-spacing:-.02em}
.page-head{margin-bottom:20px}
.page-head h1{margin:5px 0;font-size:1.8rem;font-weight:750;letter-spacing:-.03em}
.section{margin-top:18px}

.btn{border:0;border-radius:10px;padding:10px 15px;cursor:pointer;font-weight:700;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.primary{background:var(--accent);color:#fff}
.secondary{background:var(--accent-soft);color:var(--accent-2)}
.link-btn,.back{color:var(--accent);border:0;background:transparent;cursor:pointer;font-weight:700}
.health-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:14px 0}

.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.project-card{padding:22px;min-height:270px;display:flex;flex-direction:column;cursor:pointer;transition:transform .15s,box-shadow .15s}
.project-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.project-top{display:flex;justify-content:space-between;align-items:center}
.project-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-weight:800}
.project-card h3{margin:18px 0 4px;font-size:1.12rem}
.domain{color:var(--accent);margin:0;font-size:.88rem}
.project-stats{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;margin:20px 0 14px}
.project-next{border-top:1px solid var(--line);padding-top:13px}
.project-next small,.info-grid small,.list-row small,.task-row small{display:block;color:var(--muted);margin-bottom:4px}
.project-next strong{font-size:.9rem}
.card-link{width:100%;margin-top:auto;border:0;border-top:1px solid var(--line);padding-top:14px;text-align:left;background:transparent;color:var(--accent);font-weight:700;cursor:pointer}
.card-link span{float:right}
.project-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}

.status{display:inline-block;border-radius:999px;padding:5px 10px;font-size:.72rem;font-weight:800;background:var(--surface-2);color:var(--muted)}
.status.in_progress,.status.online,.status.active,.status.done{background:#e3f7eb;color:#127448}
.status.blocked,.status.offline{background:#ffe7e8;color:#a62e3c}
.status.todo,.status.later,.status.inactive{background:#fff2ce;color:#876100}
:root[data-theme=dark] .status.in_progress,:root[data-theme=dark] .status.online,:root[data-theme=dark] .status.active,:root[data-theme=dark] .status.done{background:#123d29;color:#5ee0a3}
:root[data-theme=dark] .status.blocked,:root[data-theme=dark] .status.offline{background:#3d1a20;color:#ff8f9a}
:root[data-theme=dark] .status.todo,:root[data-theme=dark] .status.later,:root[data-theme=dark] .status.inactive{background:#3d3213;color:#f0c86a}

.task-row,.list-row{display:flex;justify-content:space-between;gap:14px;align-items:center;border-top:1px solid var(--line);padding:15px 0}
.task-row>div:first-child{min-width:0}
.task-row strong{display:block;margin-top:7px}
.task-row small{max-width:600px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small-btn{font-size:.78rem;padding:8px 10px;background:var(--accent-soft);color:var(--accent-2);white-space:nowrap}
.priority{font-size:.78rem;color:var(--muted)}
.file-icon{color:var(--accent);font-size:1.3rem}
.list-row div{flex:1}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:15px}
.info-grid strong{display:block;overflow-wrap:anywhere}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse;font-size:.88rem;color:var(--text)}
.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:12px 10px;white-space:nowrap;color:inherit;background-color:transparent}
.table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

.empty,.notice,.error{padding:20px;border-radius:var(--radius-sm);border:1px solid transparent}
.empty{background:var(--surface-2);color:var(--muted);text-align:center}
.notice{background:#fff7df;color:#775700}
.error{background:#ffe8e9;color:#982d39}
:root[data-theme=dark] .notice{background:#3d3313;color:#f0c86a}
:root[data-theme=dark] .error{background:#3d1a20;color:#ff8f9a}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.json{white-space:pre-wrap;max-height:400px;overflow:auto;background:#0b172b;color:#d8e5fa;padding:14px;border-radius:10px;font-size:.78rem}

.login{max-width:420px;margin:12vh auto;background:var(--surface);padding:36px;border-radius:20px;box-shadow:0 20px 50px rgba(15,25,50,.15);border:1px solid var(--line)}
.login h1{margin:14px 0 0;letter-spacing:-.03em}
.login label{display:block;margin:22px 0 6px;font-weight:700;font-size:.9rem}
.login input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text)}
.login input:focus{outline:2px solid var(--accent);outline-offset:1px}
.login .btn{width:100%;margin-top:14px}
.loading{text-align:center;padding:60px;color:var(--muted)}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;vertical-align:-3px;margin-right:8px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* agents */
.agent-layout{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.5fr);gap:18px;margin-bottom:18px}
.agent-console-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(500px,1.7fr);gap:18px;margin-bottom:18px}
.agent-list-panel,.agent-detail-panel,.agent-events-panel{min-width:0}
.agent-row{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:14px 6px;cursor:pointer;color:inherit;border-radius:10px}
.agent-row:hover{background:var(--accent-soft)}
.agent-row.selected{background:var(--accent-soft);outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.agent-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:1.1rem;flex:0 0 auto}
.agent-row-main{display:grid;gap:3px;min-width:0;flex:1}
.agent-row-main strong,.agent-row-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-row-main small{color:var(--muted)}
.agent-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:20px}
.agent-detail-grid small{display:block;color:var(--muted);margin-bottom:4px}
.agent-detail-grid strong{display:block;overflow-wrap:anywhere}
.agent-detail-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.agent-detail-title h3{margin:0}
.agent-subtitle{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.agent-events-panel{max-height:560px;overflow:auto}
.agent-event{display:flex;gap:14px;padding:15px 6px;border-bottom:1px solid var(--line)}
.event-dot{width:9px;height:9px;margin:6px 0 0 4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);flex:0 0 auto}
.agent-event>div{min-width:0;flex:1}
.agent-event-head{display:flex;justify-content:space-between;gap:12px}
.agent-event-head small{color:var(--muted);white-space:nowrap}
.agent-event p{margin:5px 0;font-size:.9rem;overflow-wrap:anywhere}
.agent-filters{display:grid;grid-template-columns:minmax(200px,1fr) minmax(170px,.7fr) minmax(260px,1.5fr);gap:12px;margin-bottom:18px}
.agent-filters label{display:grid;gap:6px;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.agent-filters select,.agent-filters input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:10px 11px;text-transform:none;letter-spacing:normal}

/* todo */
.todo-toolbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.todo-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.todo-tab{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:.82rem;transition:background .15s,color .15s}
.todo-tab:hover,.todo-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.todo-filters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr) minmax(220px,1.5fr);gap:12px}
.todo-filters label{display:grid;gap:6px;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.todo-filters select,.todo-filters input{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:10px 11px;text-transform:none;letter-spacing:normal}
.todo-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.todo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);min-width:0}
.todo-card-head,.todo-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.priority-badge{display:inline-block;margin-left:7px;border-radius:999px;padding:5px 10px;background:#fff2ce;color:#876100;font-size:.7rem;font-weight:800}
:root[data-theme=dark] .priority-badge{background:#3d3313;color:#f0c86a}
.todo-activity{color:var(--muted);font-size:.75rem;white-space:nowrap}
.todo-card h3{margin:16px 0 7px;font-size:1.02rem;line-height:1.35}
.todo-project{color:var(--accent);font-size:.82rem;margin:0 0 16px}
.todo-project span{color:var(--muted)}
.todo-details{display:grid;gap:11px;border-top:1px solid var(--line);padding-top:14px}
.todo-details small,.todo-card-foot small{display:block;color:var(--muted);font-size:.72rem}
.todo-details strong{display:block;font-size:.84rem;line-height:1.4}
.todo-blocker{border-left:3px solid #d94d5a;padding-left:10px}
.todo-blocker strong{color:#d9505f}
.todo-card-foot{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.todo-card-foot .small-btn{flex:0 0 auto}

/* responsive */
@media(max-width:1250px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.dashboard-grid,.project-detail-grid,.settings-grid{grid-template-columns:1fr}}
@media(max-width:900px){.side{width:232px;flex-basis:232px}.main{padding:24px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agent-layout,.agent-console-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .shell{display:block}
  .side{width:100%;min-height:0;height:auto;padding:14px}
  .side nav{display:flex;overflow:auto}
  .nav-item{width:auto;white-space:nowrap}
  .side:not(.open) nav,.side:not(.open) .logout{display:none}
  .side.open nav{display:flex;flex-wrap:wrap}
  .side.open .logout{display:flex}
  .logout{margin-top:10px}
  .mobile-menu{display:grid}
  .main{padding:16px}
  .top{padding-bottom:16px;margin-bottom:18px}
  .top h2{font-size:1.4rem}
  .welcome{display:block;padding:24px 22px}
  .welcome h1{font-size:1.5rem}
  .welcome .btn{margin-top:16px}
  .metric-grid,.project-grid{grid-template-columns:1fr 1fr}
  .metric{min-height:110px;padding:16px}
  .metric strong{font-size:1.6rem}
  .project-card{min-height:0}
  .task-row{align-items:flex-start;flex-direction:column}
  .info-grid{grid-template-columns:1fr}
  .todo-filters,.agent-filters{grid-template-columns:1fr}
  .todo-list{grid-template-columns:1fr}
  .todo-card-foot{align-items:flex-start;flex-direction:column}
  .todo-card-foot .small-btn{width:100%}
  .todo-activity{white-space:normal;text-align:right}
}
@media(max-width:430px){.metric-grid,.project-grid{grid-template-columns:1fr}.metric-grid{gap:12px}.welcome .btn{width:100%}.top-actions{gap:6px}}

/* dataviz */
.dashboard-viz{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;margin-bottom:20px}
.viz-card{display:flex;flex-direction:column;gap:16px}
.viz-body{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.viz-body svg{flex:0 0 auto}
.donut-total{font-size:1.65rem;font-weight:800;fill:var(--text)}
.donut-total-label{font-size:.7rem;fill:var(--muted)}
.viz-legend{display:grid;gap:10px;flex:1;min-width:170px}
.viz-legend-row{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--text)}
.viz-legend-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.viz-legend-row strong{margin-left:auto;font-variant-numeric:tabular-nums}
.viz-label{font-size:.78rem;fill:var(--text)}
.viz-value{font-size:.8rem;font-weight:700;fill:var(--text);font-variant-numeric:tabular-nums}
.viz-track{fill:var(--line)}
.viz-bar{fill:#2a78d6;stroke:#2a78d6}
:root[data-theme=dark] .viz-bar{fill:#3987e5;stroke:#3987e5}
.viz-good{fill:#0ca30c;stroke:#0ca30c}
.viz-warning{fill:#fab219;stroke:#fab219}
.viz-critical{fill:#d03b3b;stroke:#d03b3b}
.viz-muted{fill:var(--muted);stroke:var(--muted)}
.viz-legend-dot.status-good{background:#0ca30c}
.viz-legend-dot.status-warning{background:#fab219}
.viz-legend-dot.status-critical{background:#d03b3b}
.viz-legend-dot.status-muted{background:var(--muted)}
.viz-legend-dot.status-blue{background:#2a78d6}
:root[data-theme=dark] .viz-legend-dot.status-blue{background:#3987e5}
.viz-empty{padding:40px 0;text-align:center;color:var(--muted);width:100%}
@media(max-width:1000px){.dashboard-viz{grid-template-columns:1fr}}