/* D Consulting · Mission Control — brand blue + gold, dark UI */
:root{
  --blue:#2E6FD1; --blue-600:#235CB6; --blue-900:#0E1B30;
  --ink-900:#0B1322; --ink-800:#101d33; --ink-700:#16243d; --ink-600:#1c2c49;
  --gold:#D7B254; --gold-bright:#ECC766;
  --text:#e8edf6; --muted:#9aa7bd; --muted-dim:#6b7790;
  --ok:#2fbf71; --warn:#e0a93b; --bad:#e5564b; --idle:#5d6b82;
  --card:#121f38; --card-hi:#16243d; --line:rgba(255,255,255,.08);
  --radius:16px; --ease:cubic-bezier(.2,.7,.2,1);
  --serif:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--serif); color:var(--text); min-height:100vh;
  background:
    radial-gradient(120% 120% at 85% -10%,#15294a 0%,var(--ink-900) 55%),
    var(--ink-900);
  background-attachment:fixed;
}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;color:var(--gold-bright);background:rgba(215,178,84,.1);padding:1px 6px;border-radius:6px}

/* ---------- GATE ---------- */
#gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
.gate-card{
  width:min(380px,92vw);background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:40px 32px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.gate-mark{
  width:56px;height:56px;margin:0 auto 18px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;color:#fff;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-600) 100%);
  box-shadow:0 8px 24px rgba(46,111,209,.4);
}
.gate-title{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.gate-sub{margin:6px 0 26px;color:var(--muted);font-size:13px;letter-spacing:.04em}
.gate-input{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--ink-900);color:var(--text);font-size:15px;outline:none;transition:border-color .2s
}
.gate-input:focus{border-color:var(--blue)}
.gate-btn{
  width:100%;margin-top:12px;padding:13px;border:0;border-radius:12px;cursor:pointer;
  font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-600) 100%);
  box-shadow:0 10px 26px rgba(46,111,209,.34);transition:transform .15s,filter .15s
}
.gate-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.gate-btn:disabled{opacity:.6;cursor:wait;transform:none}
.gate-err{min-height:18px;margin-top:12px;color:var(--bad);font-size:13px}

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(18px,4vw,48px);
  background:rgba(11,19,34,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-600));
  box-shadow:0 6px 18px rgba(46,111,209,.34)
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:16px;font-weight:800}
.brand-text span{font-size:12px;color:var(--gold-bright);letter-spacing:.12em;text-transform:uppercase}
.top-actions{display:flex;gap:10px}
.ghost-btn{
  padding:9px 15px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;font-size:13px;font-weight:600;transition:all .18s
}
.ghost-btn:hover{border-color:var(--gold);color:var(--gold-bright)}

/* ---------- BOARD ---------- */
.board{max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,48px) clamp(18px,4vw,48px) 60px}
.group{margin-bottom:46px}
.group-head{margin:0 0 4px}
.group-title{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:11px}
.group-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.group-blurb{color:var(--muted);font-size:13.5px;margin:7px 0 22px;max-width:62ch;line-height:1.5}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}

.card{
  background:linear-gradient(180deg,var(--card-hi),var(--card));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)
}
.card:hover{border-color:rgba(215,178,84,.4);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.card-top{display:flex;align-items:flex-start;gap:13px}
.card-icon{
  width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:21px;background:rgba(46,111,209,.14);border:1px solid rgba(46,111,209,.25)
}
.card-id{min-width:0;flex:1}
.card-name{font-size:16px;font-weight:700;margin:0;line-height:1.25}
.card-sub{font-size:12.5px;color:var(--muted);margin:3px 0 0}

/* status pill */
.status{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-height:18px}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--idle);box-shadow:0 0 0 0 rgba(0,0,0,0)}
.dot.ok{background:var(--ok);box-shadow:0 0 8px rgba(47,191,113,.7)}
.dot.warn{background:var(--warn);box-shadow:0 0 8px rgba(224,169,59,.7)}
.dot.bad{background:var(--bad);box-shadow:0 0 8px rgba(229,86,75,.7)}
.dot.run{background:var(--blue);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,111,209,.6)}70%{box-shadow:0 0 0 8px rgba(46,111,209,0)}100%{box-shadow:0 0 0 0 rgba(46,111,209,0)}}
.status a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line)}
.status a:hover{color:var(--gold-bright)}

.card-note{font-size:11.5px;color:var(--muted-dim);line-height:1.4}

.card-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:4px}
.btn{
  flex:1 1 auto;padding:10px 13px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;
  border:1px solid var(--line);background:transparent;color:var(--text);transition:all .16s;white-space:nowrap
}
.btn-open{background:linear-gradient(135deg,var(--blue),var(--blue-600));color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(46,111,209,.28)}
.btn-open:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-run{border-color:rgba(215,178,84,.5);color:var(--gold-bright)}
.btn-run:hover{background:rgba(215,178,84,.12);border-color:var(--gold)}
.btn:disabled{opacity:.55;cursor:wait}
.btn-run.busy{color:var(--blue);border-color:rgba(46,111,209,.5)}

/* ---------- FOOTER / TOAST ---------- */
.foot{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px) 40px;color:var(--muted-dim);font-size:12.5px;text-align:center}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--ink-700);color:var(--text);border:1px solid var(--line);
  padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:500;
  box-shadow:0 16px 40px rgba(0,0,0,.45);z-index:60;opacity:0;transition:opacity .25s,transform .25s;max-width:90vw
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(47,191,113,.5)}
.toast.bad{border-color:rgba(229,86,75,.5)}

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .brand-text span{display:none}
}