/* Watu Cloud console — one stylesheet, no framework, no CDN.
   A service that only works when a CDN is reachable is a service that stops
   working on the day the line is bad, which is the day you need it. */

:root{
  --bg:#f4f6f9; --card:#fff; --ink:#15202b; --muted:#5d6b7a; --line:#e2e7ee;
  --brand:#0f766e; --brand-2:#0d9488; --accent:#1e3a5f;
  --good:#0f766e; --warn:#b45309; --bad:#b42318; --grey:#7a8797;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 12px rgba(16,24,40,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f141a; --card:#161d25; --ink:#e7edf4; --muted:#95a3b3; --line:#232c37;
    --brand:#2dd4bf; --brand-2:#14b8a6; --accent:#c9d7ea;
    --good:#2dd4bf; --warn:#f59e0b; --bad:#f87171; --grey:#8b98a8;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* ---------------------------------------------------------------- header */
.top{background:var(--accent);color:#fff;position:sticky;top:0;z-index:20}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .top{background:#111922}}
.top .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{color:#fff;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.brand:hover{text-decoration:none}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand-2);
            box-shadow:0 0 0 4px rgba(13,148,136,.25)}
.top nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.top nav a{color:#c9d7ea;padding:6px 10px;border-radius:8px;font-size:14px}
.top nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.top nav a.on{background:rgba(255,255,255,.14);color:#fff}
.who{display:flex;align-items:center;gap:12px;font-size:13px;color:#c9d7ea}
.who a{color:#fff;opacity:.85}

main{padding-top:22px;padding-bottom:40px}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:0 0 10px}
h3{font-size:14px;margin:18px 0 6px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.lead{color:var(--muted);margin-bottom:18px}

/* ---------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
.card.tight{padding:14px 16px}
.grid{display:grid;gap:18px}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid.c4,.grid.c3,.grid.c2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.c4,.grid.c3,.grid.c2{grid-template-columns:1fr}}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      padding:16px;box-shadow:var(--shadow)}
.stat .n{font-size:30px;font-weight:700;line-height:1.1}
.stat .l{color:var(--muted);font-size:13px;margin-top:2px}

/* ---------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;
   text-transform:uppercase;letter-spacing:.05em;padding:0 10px 8px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;
      border:1px solid transparent}
.pill.good{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);
           border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);
           border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
.pill.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);
          border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.pill.grey{color:var(--grey);background:color-mix(in srgb,var(--grey) 12%,transparent);
           border-color:color-mix(in srgb,var(--grey) 28%,transparent)}

/* ---------------------------------------------------------------- forms */
label{display:block;font-size:13px;color:var(--muted);margin:0 0 4px}
input[type=text],input[type=password],input[type=date],input[type=number],
input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:1px;border-color:var(--brand)}
textarea{min-height:76px;resize:vertical}
.field{margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.field{flex:1;min-width:170px}
.checks{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 12px}
.checks label{display:flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;margin:0}
.checks input{width:auto}

.btn{display:inline-block;padding:9px 15px;border-radius:9px;border:1px solid var(--line);
     background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{text-decoration:none;border-color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.btn.small{padding:5px 10px;font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.flash{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;border:1px solid}
.flash.ok{background:color-mix(in srgb,var(--good) 10%,transparent);
          border-color:color-mix(in srgb,var(--good) 30%,transparent);color:var(--ink)}
.flash.err{background:color-mix(in srgb,var(--bad) 10%,transparent);
           border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--ink)}
.flash code{background:rgba(127,127,127,.15);padding:2px 6px;border-radius:5px}

.tokenbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
          background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin:10px 0}
.tokenbox .mono{font-size:16px;font-weight:700;letter-spacing:.5px}
pre.cmd{background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:10px;overflow-x:auto;
        font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;margin:8px 0}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
      color:var(--muted);font-size:12px;padding-bottom:28px;border-top:1px solid var(--line);padding-top:14px}

/* ---------------------------------------------------------------- login */
.login{max-width:380px;margin:9vh auto;padding:0 16px}
.login .card{padding:26px}
.login h1{font-size:20px;text-align:center}
.login p.sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:20px}
.login .btn{width:100%;text-align:center}

.help h2{margin-top:6px}
.help li{margin-bottom:6px}