:root{
  --bg:#0d0f0c;
  --panel:#15181300;
  --panel-bg:#15181388;
  --card:#1a1e17;
  --line:#2b3128;
  --ink:#e9efe3;
  --muted:#8b9683;
  --lime:#c2f24a;
  --lime-dim:#9bc23a;
  --amber:#ffb454;
  --red:#ff6b5e;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 500px at 85% -10%, #1c2417 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #161a12 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:16px;line-height:1.5;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(13,15,12,.82);backdrop-filter:blur(8px);z-index:5;
}
.brand{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:20px;color:var(--ink);
}
.brand span{color:var(--lime);margin:0 1px}
.topbar nav{display:flex;align-items:center;gap:16px}
.topbar nav a{color:var(--muted);font-weight:600;font-size:14px}
.topbar nav a:hover{color:var(--lime)}
.who{color:var(--muted);font-size:13px;border-left:1px solid var(--line);padding-left:16px}

/* Layout */
.wrap{max-width:920px;margin:0 auto;padding:26px 18px 60px}
.grid{display:grid;gap:18px}

/* Panels */
.panel{
  background:linear-gradient(180deg,#1a1e17,#161913);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 24px;
}
.panel h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  margin:0 0 4px;display:flex;align-items:center;gap:11px;letter-spacing:-.01em;
}
.num{
  font-family:"Hanken Grotesk";font-size:12px;font-weight:700;color:#0d0f0c;
  background:var(--lime);border-radius:7px;min-width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
}
.hint{color:var(--muted);font-size:13.5px;margin:2px 0 16px}

/* Forms */
label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:3px}
label small{font-weight:400;opacity:.7}
input,select{
  width:100%;background:#0f120d;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:11px 12px;font:inherit;margin-top:5px;
}
input:focus,select:focus{outline:none;border-color:var(--lime-dim);box-shadow:0 0 0 3px #c2f24a22}
.stack{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

button{cursor:pointer;font:inherit;font-weight:700;border:none;border-radius:10px;padding:11px 18px}
.primary{background:var(--lime);color:#0d0f0c}
.primary:hover{background:#d2ff5e}
.accent{background:transparent;color:var(--amber);border:1px solid var(--amber)}
.accent:hover{background:#ffb45418}
.ghost{background:transparent;color:var(--muted);padding:7px 12px;border:1px solid var(--line);font-size:13px}
.ghost:hover{color:var(--ink);border-color:var(--muted)}
.ghost.danger:hover{color:var(--red);border-color:var(--red)}
.inline{display:inline}

.addgoal{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:16px}
.addgoal input,.addgoal select{margin-top:0;width:auto}
.addgoal input[name=class_name]{flex:1;min-width:120px}
.chk{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.chk input{width:auto;margin:0}

/* Tables */
table.goals{width:100%;border-collapse:collapse;margin-top:6px}
table.goals th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line)}
table.goals td{padding:11px 8px;border-bottom:1px solid #20251c;font-size:14.5px}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.empty{color:var(--muted);font-size:14px;padding:8px 0}

/* Logs */
.logs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:7px}
.logs li{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  background:#0f120d;border:1px solid #20251c;border-radius:10px;padding:9px 12px;font-size:13.5px}
.badge{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:800;font-size:12px}
.logs li.ok .badge{background:#c2f24a22;color:var(--lime)}
.logs li.fail .badge{background:#ff6b5e22;color:var(--red)}
.ldetail{color:var(--muted);font-size:12.5px}
.lts{color:var(--muted);font-size:12px}

/* Flash */
.flash{padding:12px 15px;border-radius:11px;margin-bottom:16px;font-size:14px;font-weight:600}
.flash.ok{background:#c2f24a18;border:1px solid #c2f24a55;color:var(--lime)}
.flash.error{background:#ff6b5e18;border:1px solid #ff6b5e55;color:var(--red)}

/* Login */
.login-card{max-width:380px;margin:8vh auto 0;background:linear-gradient(180deg,#1a1e17,#14170f);
  border:1px solid var(--line);border-radius:18px;padding:34px 30px 30px}
.login-head{text-align:center;margin-bottom:24px}
.login-head .dot{width:12px;height:12px;border-radius:50%;background:var(--lime);
  margin:0 auto 14px;box-shadow:0 0 0 6px #c2f24a22,0 0 22px #c2f24a88}
.login-head h1{font-family:"Bricolage Grotesque";font-weight:800;font-size:26px;margin:0;letter-spacing:-.02em}
.login-head h1 span{color:var(--lime)}
.login-head p{color:var(--muted);font-size:13.5px;margin:6px 0 0}
.login-card form{display:grid;gap:14px}
.login-card .primary{margin-top:6px;width:100%;padding:13px}

@media(max-width:640px){
  .row2,.row3{grid-template-columns:1fr}
  .logs li{grid-template-columns:auto 1fr;row-gap:2px}
  .lts{grid-column:2}
}