:root { --navy:#0A1628; --cyan:#00D4FF; --bg:#0e1a2b; --panel:#142235; --panel-2:#1a2942;
        --text:#e6edf5; --muted:#7a8aa0; --line:#1f3149;
        --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --idle:#64748b; }
* { box-sizing:border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
       background:var(--bg); color:var(--text); }
a { color: var(--cyan); }
a:hover { text-decoration: underline; }

/* Header */
header.app-header { background:var(--navy); padding:.6rem 1.5rem; display:flex;
                    align-items:center; gap:1.5rem; border-bottom:2px solid var(--cyan); }
header.app-header .brand { display:flex; align-items:center; gap:.6rem; text-decoration:none;
                            color:var(--text); font-weight:600; letter-spacing:.05em; }
header.app-header .brand:hover { text-decoration:none; }
header.app-header .brand-logo { height:34px; width:34px; object-fit:contain;
                                 border-radius:6px; background:var(--navy); }
header.app-header .brand-wordmark { font-size:1.05rem; letter-spacing:.05em; }
header.app-header .badge { background:var(--cyan); color:var(--navy);
                            padding:.15rem .5rem; border-radius:4px; font-weight:600; font-size:.65rem; }
header.app-header nav { display:flex; gap:.5rem; flex:1; }
header.app-header nav a { color:var(--muted); text-decoration:none; padding:.4rem .8rem;
                          border-radius:4px; font-size:.85rem; }
header.app-header nav a:hover, header.app-header nav a.active {
  background: rgba(0,212,255,.1); color:var(--cyan);
}
header.app-header .controls { display:flex; gap:.75rem; align-items:center; font-size:.75rem; color:var(--muted); }
header.app-header .controls .logout-link { color:var(--cyan); text-decoration:none; padding:.25rem .6rem;
                                           border:1px solid var(--line); border-radius:6px; }
header.app-header .controls .logout-link:hover { background:rgba(0,212,255,.1); }

main { padding:1.5rem; max-width:1500px; margin:0 auto; }

footer.app-footer { text-align:center; color:var(--muted); font-size:.72rem; padding:1.5rem 1rem 2rem;
                    border-top:1px solid var(--line); margin-top:2rem; }

h2 { font-size:1rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cyan);
     border-left:3px solid var(--cyan); padding-left:.5rem; margin:1.5rem 0 1rem; }
h3 { font-size:1.05rem; margin: .5rem 0; }

/* Cards */
.card { background:var(--panel); border-radius:8px; padding:1rem;
        border:1px solid var(--line); margin-bottom:1rem; }
.grid { display:grid; gap:1rem; }
.grid-stats { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.stat { text-align:center; }
.stat .v { font-size:1.8rem; font-weight:700; color:var(--cyan); }
.stat .l { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; }

/* Tables */
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th, td { padding:.55rem .7rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; }
tr:hover td { background:var(--panel-2); }

/* Pills */
.pill { padding:.15rem .5rem; border-radius:12px; font-size:.7rem;
        font-weight:600; text-transform:uppercase; display:inline-block; }
.pill.success, .pill.idle.green { background:rgba(34,197,94,.15); color:var(--ok); }
.pill.failed, .pill.error { background:rgba(239,68,68,.15); color:var(--err); }
.pill.queued, .pill.warn { background:rgba(245,158,11,.15); color:var(--warn); }
.pill.claimed, .pill.running, .pill.cyan { background:rgba(0,212,255,.15); color:var(--cyan); }
.pill.idle, .pill.offline { background:rgba(100,116,139,.15); color:var(--idle); }
.tag { background:rgba(0,212,255,.08); color:var(--cyan); padding:.1rem .4rem;
       border-radius:4px; font-size:.65rem; margin-right:.25rem; }

/* Form controls */
input, select, textarea, button { background:var(--navy); color:var(--text);
                                   border:1px solid var(--line); padding:.45rem .7rem;
                                   border-radius:4px; font-family:inherit; font-size:.85rem; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--cyan); }
textarea { width:100%; min-height:80px; font-family:"JetBrains Mono", monospace; font-size:.8rem; }
button { cursor:pointer; border-color:var(--cyan); }
button:hover { background:var(--cyan); color:var(--navy); }
button.danger { border-color:var(--err); color:var(--err); }
button.danger:hover { background:var(--err); color:white; }
button.ghost { border-color:var(--line); color:var(--muted); }
button.primary { background:var(--cyan); color:var(--navy); font-weight:600; }

.field { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem; }
.field label { font-size:.7rem; text-transform:uppercase; color:var(--muted); letter-spacing:.05em; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

.mono { font-family:"JetBrains Mono", monospace; font-size:.78rem; color:var(--muted); word-break:break-all; }
.muted { color: var(--muted); }
.small { font-size: .75rem; }
.empty { padding:1.5rem; text-align:center; color:var(--muted); }

/* Steps builder */
.step { background:var(--panel-2); padding:.6rem; border-radius:6px;
        margin-bottom:.5rem; border-left:3px solid var(--cyan); }
.step .step-head { display:flex; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.step .step-num { background:var(--cyan); color:var(--navy); width:1.5rem; height:1.5rem;
                  display:flex; align-items:center; justify-content:center; border-radius:50%;
                  font-weight:700; font-size:.7rem; }
.step .step-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem; }
.step button.remove { padding:.2rem .5rem; font-size:.7rem; margin-left:auto; }

img.screenshot { max-width:100%; border:1px solid var(--line); border-radius:4px; margin-top:.5rem; }
pre.log { background:#0a121f; border:1px solid var(--line); padding:.75rem;
          border-radius:4px; overflow:auto; max-height:400px;
          font-family:"JetBrains Mono", monospace; font-size:.75rem; color:#cbd5e1; }