@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');

:root {
  color-scheme: dark;
  --bg: #0b1220;
  --card-bg: #0f172a;
  --card-raised: #131e32;
  --text: #e8ecf4;
  --muted: #8b95a8;
  --border: #1b2438;
  --accent: #1e6bff;
  --accent-bright: #4da3ff;
  --brand-cobalt: #1e6bff;
  --accent-text: #0e0c18;
  --error: #ff8f8f;
  --ok: #71dbad;
  --shadow: 0 18px 50px rgba(0,0,0,.18);
}

@media (prefers-color-scheme: light) {
  :root { color-scheme: light; --bg:#f3f6fa; --card-bg:#fff; --card-raised:#f3f6fa; --text:#0b1220; --muted:#5b6577; --border:#d8dee7; --accent:#1e6bff; --accent-bright:#1e6bff; --brand-cobalt:#1e6bff; --accent-text:#fff; --shadow:0 14px 35px rgba(11,18,32,.08); }
}

* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 50% -15%, rgba(30,107,255,.16), transparent 38%), var(--bg); color:var(--text); letter-spacing:-.01em; }
.hidden { display:none !important; }

.topbar { height:72px; display:flex; justify-content:space-between; align-items:center; padding:0 3.5vw; border-bottom:1px solid var(--border); background:rgba(13,15,19,.78); backdrop-filter:blur(16px); position:sticky; top:0; z-index:2; }
.brand { display:flex; align-items:center; gap:.65rem; font-family:"General Sans", Inter, sans-serif; font-weight:500; font-size:1.2rem; letter-spacing:-.04em; }
.brand-muted { color:var(--muted); font-weight:500; }
.brand-mark { color:var(--text); flex:none; }
.topbar-user { display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:.9rem; }

main { max-width:1180px; margin:0 auto; padding:3.25rem 2rem 5rem; display:flex; flex-direction:column; gap:1.25rem; }
.card { background:linear-gradient(145deg, rgba(255,255,255,.018), transparent 55%), var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:1.75rem; box-shadow:var(--shadow); }
.usage-card { padding:2.25rem; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.eyebrow { color:var(--accent-bright); font-size:.7rem; font-weight:650; letter-spacing:.14em; margin:0 0 .65rem; }
h1,h2 { margin:0; letter-spacing:-.045em; }
h1 { font-size:2rem; line-height:1.1; }
h2 { font-size:1.08rem; }
.section-subtitle { margin:.55rem 0 0; }
.muted { color:var(--muted); }
.live-pill { border:1px solid rgba(113,219,173,.25); color:var(--ok); border-radius:999px; padding:.38rem .7rem; font-size:.76rem; font-weight:650; display:flex; gap:.42rem; align-items:center; }
.live-pill span { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(113,219,173,.1); }

.usage-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin:2rem 0 2.25rem; }
.stat { min-height:125px; display:flex; flex-direction:column; gap:.45rem; padding:1.15rem 1.25rem; border:1px solid var(--border); border-radius:12px; background:var(--card-raised); }
.stat .muted { font-size:.82rem; font-weight:600; }
.stat strong { font-size:2rem; line-height:1.1; letter-spacing:-.05em; }
.stat-caption { color:var(--muted); font-size:.74rem; margin-top:auto; }
.stat-accent { border-color:rgba(30,107,255,.38); background:linear-gradient(145deg,rgba(30,107,255,.14),var(--card-raised)); }
.stat-accent strong { color:var(--accent-bright); }
.activity-heading { display:flex; align-items:flex-end; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:.9rem; }
.activity-heading p { margin:.35rem 0 0; font-size:.82rem; }
.activity-count { color:var(--muted); font-size:.78rem; }
.technique-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; margin:1rem 0 1.25rem; }
.technique-card { padding:.8rem .9rem; border:1px solid var(--border); border-radius:10px; background:var(--card-raised); }
.technique-card h3 { margin:0 0 .55rem; font-size:.78rem; font-weight:600; }
.technique-card .technique-flow { font-size:.82rem; color:var(--muted); }
.technique-card strong { color:var(--text); font-size:1rem; }
.technique-card .technique-save { color:var(--ok); font-size:.72rem; margin-top:.25rem; }

.org-picker label { margin:0; }
label { display:flex; flex-direction:column; gap:.4rem; font-size:.8rem; font-weight:600; margin-bottom:.9rem; color:var(--muted); }
input,select,textarea { font:inherit; padding:.7rem .8rem; border:1px solid var(--border); border-radius:9px; background:var(--bg); color:var(--text); outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,107,255,.14); }
textarea { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; }
.button-primary,.button-secondary { font:inherit; font-weight:650; padding:.68rem 1rem; border-radius:9px; cursor:pointer; transition:transform .15s, background .15s; }
.button-primary { background:var(--accent); color:var(--accent-text); border:1px solid transparent; }
.button-primary:hover,.button-secondary:hover { transform:translateY(-1px); }
.button-secondary { background:transparent; border:1px solid var(--border); color:var(--text); }
.status { min-height:1.2em; font-size:.82rem; color:var(--muted); }
.status-error { color:var(--error); }
.status-ok { color:var(--ok); }

table { width:100%; border-collapse:collapse; font-size:.84rem; display:block; overflow-x:auto; }
th,td { text-align:left; padding:.85rem .75rem; border-bottom:1px solid var(--border); white-space:nowrap; }
th { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:rgba(30,107,255,.055); }
td:first-child { color:var(--muted); }
.rule-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.rule-row { display:flex; align-items:center; justify-content:space-between; padding:.7rem .8rem; border:1px solid var(--border); border-radius:9px; background:var(--card-raised); }
.rule-type { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; }
.toggle { display:flex; align-items:center; gap:.4rem; margin:0; flex-direction:row; }

.sign-in-card { max-width:420px; margin:3rem auto; }
@media (max-width:900px) { .usage-summary,.technique-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .topbar { padding:0 1rem; } .topbar-user { gap:.5rem; } .topbar-user span { display:none; } main { padding:1.5rem .8rem 3rem; } .card,.usage-card { padding:1.2rem; border-radius:13px; } .usage-summary,.technique-grid { grid-template-columns:1fr; margin:1.5rem 0; } .section-heading { flex-direction:column; } h1 { font-size:1.75rem; } }