/* ============================================================
   CONFLUENCE — Graphite design system
   Shared across all app screens. Terminal-premium, dense.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg:#07090c;
  --s1:#0b0e12;
  --s2:#11151b;
  --s3:#161b22;
  --border:#1b212a;
  --border-bright:#27303b;
  --text:#e8ecf2;
  --text-2:#c2cad6;
  --dim:#8a94a6;
  --mute:#525c6b;
  --accent:#00e08a;
  --accent-2:#0ee38c;
  --accent-deep:#00b872;
  --on-accent:#00210f;
  --bull:#26d9a3;
  --bear:#ff4d5e;
  --warn:#ffb020;
  --radius:4px;
  --ui:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:1440px;height:900px;overflow:hidden}
body{
  background:var(--bg);color:var(--text);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;font-size:14px;
  display:grid;grid-template-columns:60px 1fr;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.caps{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.up{color:var(--bull)}.down{color:var(--bear)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---- left rail ---- */
.rail{
  background:var(--s1);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px;z-index:20;
}
.logo{
  width:34px;height:34px;display:grid;place-items:center;color:var(--accent);margin-bottom:14px;
}
.logo svg{width:30px;height:30px}
.nav{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;color:var(--mute);position:relative;cursor:pointer;transition:.16s}
.nav svg{width:19px;height:19px}
.nav:hover{color:var(--dim);background:var(--s2)}
.nav.on{color:var(--accent);background:rgba(0,224,138,.08)}
.nav.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.nav .tip{position:absolute;left:52px;white-space:nowrap;background:var(--s3);border:1px solid var(--border-bright);color:var(--text);font-size:11px;font-weight:600;padding:4px 9px;border-radius:4px;opacity:0;pointer-events:none;transform:translateX(-4px);transition:.15s;z-index:30}
.nav:hover .tip{opacity:1;transform:translateX(0)}
.rail .sp{flex:1}

/* ---- shell ---- */
.shell{display:grid;grid-template-rows:54px 1fr;min-width:0;min-height:0}
.topbar{
  display:flex;align-items:center;gap:16px;padding:0 18px;
  border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--s1),var(--bg));z-index:10;
}
.title{font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand{font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:.02em}
.brand b{color:var(--accent)}
.crumb{display:flex;align-items:center;gap:9px;color:var(--mute)}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---- pills / dots / badges ---- */
.pill{
  display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:var(--radius);
  border:1px solid var(--border-bright);background:var(--s2);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--dim)
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--bull);box-shadow:0 0 8px var(--bull)}
.dot.live{animation:pulse 1.8s ease-in-out infinite}
.dot.idle{background:var(--mute);box-shadow:none}
.dot.stale{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:3px;border:1px solid}
.badge.live{color:var(--accent);border-color:rgba(0,224,138,.35);background:rgba(0,224,138,.08)}
.badge.idle{color:var(--dim);border-color:var(--border-bright);background:var(--s2)}
.badge.stale{color:var(--warn);border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.08)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 15px;border-radius:var(--radius);
  font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.01em;cursor:pointer;border:1px solid var(--border-bright);background:var(--s2);color:var(--text);transition:.15s;white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn:hover{border-color:var(--mute);background:var(--s3)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:var(--on-accent);border:none;font-weight:700;
  box-shadow:0 0 0 1px rgba(0,224,138,.35),0 6px 16px -7px rgba(0,224,138,.7)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{border-color:rgba(255,77,94,.45);background:rgba(255,77,94,.08);color:var(--bear)}
.btn.danger:hover{background:rgba(255,77,94,.16)}
.btn.sm{height:28px;padding:0 11px;font-size:12px}
.btn.icon{width:32px;height:32px;padding:0}
.ic-btn{width:32px;height:32px;border-radius:var(--radius);display:grid;place-items:center;border:1px solid var(--border);background:var(--s2);color:var(--dim);cursor:pointer;transition:.15s}
.ic-btn:hover{color:var(--text);border-color:var(--border-bright)}
.ic-btn svg{width:16px;height:16px}
.live-btn{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:var(--on-accent);font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer;border:none;
  box-shadow:0 0 0 1px rgba(0,224,138,.4),0 6px 16px -6px rgba(0,224,138,.6)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--s3);border:1px solid var(--border-bright);display:grid;place-items:center;color:var(--dim);font-weight:600;font-size:12px;flex:none}

/* ---- search ---- */
.search{display:flex;align-items:center;gap:9px;height:32px;width:260px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--s2);color:var(--mute)}
.search svg{width:15px;height:15px}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--mono);font-size:12px}
.search input::placeholder{color:var(--mute)}

/* ---- cards / panels ---- */
.card{background:var(--s1);border:1px solid var(--border);border-radius:6px}
.panel{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--border-bright);border-radius:6px}

/* ---- forms ---- */
.field label,.fl{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.input,select.input{width:100%;height:38px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--border-bright);background:var(--s2);color:var(--text);font-family:var(--mono);font-size:13px;outline:none;transition:.15s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,224,138,.12)}
.seg{display:inline-flex;background:var(--s2);border:1px solid var(--border-bright);border-radius:var(--radius);padding:3px;gap:3px}
.seg button{flex:1;height:30px;padding:0 13px;border:none;background:none;border-radius:3px;color:var(--dim);font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:.15s;white-space:nowrap}
.seg button.on{background:rgba(0,224,138,.12);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,224,138,.35)}
.seg button:hover:not(.on){color:var(--text)}

/* ---- animations ---- */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes blink{50%{opacity:0}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(0,224,138,.5),0 0 14px rgba(0,224,138,.5)}100%{box-shadow:0 0 0 16px rgba(0,224,138,0),0 0 14px rgba(0,224,138,.5)}}
.cursor{display:inline-block;width:7px;height:14px;background:var(--accent);margin-left:1px;vertical-align:-2px;animation:blink 1s steps(1) infinite}

/* dot-grid blueprint bg */
.dotgrid{background-image:radial-gradient(rgba(40,55,75,.55) 1px,transparent 1px);background-size:22px 22px}