:root {
    --bg:#0f1115; --card:#1a1d24; --line:#2a2f3a; --fg:#e6e8ec;
    --muted:#8b93a1; --accent:#4f8cff; --ok:#37c076; --err:#ff5d5d; --warn:#ff9d3d;
}
* { box-sizing:border-box; }
body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg); color:var(--fg); margin:0; min-height:100vh;
    display:flex; flex-direction:column;
}

/* Top bar */
.topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:.9rem 1.5rem; background:#12151b; border-bottom:1px solid var(--line);
}
.brand { color:var(--fg); text-decoration:none; font-weight:700; font-size:1.05rem; }
.topbar nav { display:flex; align-items:center; gap:1rem; font-size:.9rem; }
.topbar nav a { color:var(--muted); text-decoration:none; }
.topbar nav a:hover { color:var(--fg); }
.topbar .user { color:var(--fg); }
.btn-sm { border:1px solid var(--line); padding:.35rem .7rem; border-radius:6px; }

/* Layout */
.wrap { width:100%; max-width:760px; margin:0 auto; padding:2rem 1.25rem; flex:1; }
h1 { font-size:1.5rem; margin:0 0 .35rem; }
.lead { color:var(--muted); margin:0 0 1.5rem; }
.muted { color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
.back { color:var(--muted); text-decoration:none; font-size:.85rem; display:inline-block; margin-bottom:1rem; }
.back:hover { color:var(--fg); }
.foot { text-align:center; color:var(--muted); font-size:.75rem; padding:1.5rem; border-top:1px solid var(--line); }

/* Cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.5rem; }
.card-narrow { max-width:360px; margin:3rem auto; }
.card h1 { margin-top:0; }

/* Dashboard grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.tool-card {
    display:flex; flex-direction:column; gap:.4rem; text-decoration:none;
    background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.25rem;
    color:var(--fg); transition:border-color .15s, transform .15s;
}
.tool-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.tool-icon { font-size:1.6rem; }
.tool-title { font-weight:600; }
.tool-desc { color:var(--muted); font-size:.85rem; }

/* Forms */
label { display:block; font-size:.8rem; color:var(--muted); margin:1rem 0 .35rem;
        text-transform:uppercase; letter-spacing:.04em; }
form > label:first-of-type, .card > form label:first-child { margin-top:0; }
input, select {
    width:100%; padding:.7rem .8rem; background:#11141a; border:1px solid var(--line);
    border-radius:8px; color:var(--fg); font-size:.95rem;
}
input:focus, select:focus { outline:none; border-color:var(--accent); }
.row { display:flex; gap:.75rem; }
.row > div { flex:1; }
#priority-wrap { display:none; }
button {
    width:100%; margin-top:1.5rem; padding:.8rem; background:var(--accent); color:#fff;
    border:none; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer;
}
button:hover { filter:brightness(1.08); }
.env-note { font-size:.75rem; color:var(--muted); text-align:center; margin:1rem 0 0; }
.env-note b { color:var(--warn); }

/* Inline checkbox row */
.check { display:flex; align-items:center; gap:.5rem; text-transform:none; letter-spacing:0;
         color:var(--fg); margin-top:1.25rem; }
.check input { width:auto; }

/* Debug panel */
.debug-panel { margin-top:1.5rem; }
.debug-panel h2 { margin-top:0; font-size:1.1rem; }
.debug-panel h3 { margin:1.25rem 0 .35rem; font-size:.9rem; }
.debug-panel code { background:#11141a; padding:.1rem .35rem; border-radius:4px; font-size:.85rem; }
.debug-panel summary { cursor:pointer; color:var(--accent); margin:.5rem 0; font-size:.85rem; }
.debug-panel pre { background:#11141a; border:1px solid var(--line); border-radius:8px; padding:.75rem;
                   overflow:auto; max-height:340px; font-size:.78rem; color:var(--muted);
                   white-space:pre-wrap; word-break:break-all; margin:.25rem 0; }

/* Alerts */
.alert { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent);
         border-radius:10px; padding:1rem 1.15rem; margin-bottom:1.5rem; }
.alert.ok  { border-left-color:var(--ok); }
.alert.err { border-left-color:var(--err); }
.alert strong { display:block; margin-bottom:.4rem; }
.alert pre { margin:0; white-space:pre-wrap; color:var(--muted); font-size:.85rem; font-family:inherit; }
