/* Shared styling for the auth pages (login, account, users).
   Tokens verbatim from index.html so these rooms are in the same building.
   The pages are small and visited rarely, which is why they live outside
   the 500 KB shell and share this sheet instead. */

:root{
  color-scheme: dark light;
  --bg:#0c1013; --panel:#141a1e; --panel2:#1a2126; --edge:#232d33;
  --ink:#e6edf0; --dim:#93a3aa; --faint:#64757d;
  --accent:#3fb8c4; --accent-dim:#1d4a50;
  --strong:#3fbf7f; --possible:#d9a441; --none:#c9605a;
  --grid:#1e272c; --shadow:rgba(0,0,0,.42);
  --on-accent:#0c1013;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6f7; --panel:#fff; --panel2:#eef2f3; --edge:#dbe3e6;
    --ink:#141a1e; --dim:#54646c; --faint:#8496a0; --accent:#0d7c88;
    --accent-dim:#d3e8ea; --grid:#e3eaec; --shadow:rgba(18,42,52,.13);
    --strong:#2c8257; --possible:#96701d; --none:#a8433c;
    --on-accent:#fff;
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button{font:inherit;cursor:pointer;border-radius:5px;border:1px solid var(--edge);
  background:var(--panel2);color:var(--ink);padding:.42rem .8rem}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button:disabled{opacity:.55;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);font-weight:600}
button.primary:hover:not(:disabled){filter:brightness(1.08);color:var(--on-accent)}
button.danger:hover:not(:disabled){border-color:var(--none);color:var(--none)}

.field{display:block;margin-bottom:.85rem}
.field label{display:block;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  margin-bottom:.3rem}
.field input{width:100%;font:inherit;background:var(--bg);color:var(--ink);
  border:1px solid var(--edge);border-radius:5px;padding:.5rem .65rem}
.field input:focus{outline:none;border-color:var(--accent)}
.field input.bad{border-color:var(--none)}

.topbar{display:flex;align-items:center;gap:1rem;padding:.7rem clamp(1rem,3vw,2rem);
  background:var(--panel);border-bottom:1px solid var(--edge);
  position:sticky;top:0;z-index:20}
.topbar .brand{display:flex;align-items:center;gap:.45rem;
  text-decoration:none;color:var(--ink)}
.topbar .brand img{width:22px;height:22px;display:block}
.topbar .brand b{font-size:1rem;letter-spacing:-.01em}
.topbar .where{font-family:var(--mono);font-size:.68rem;color:var(--faint);
  text-transform:uppercase;letter-spacing:.1em}
.topbar .sp{margin-left:auto;display:flex;gap:.5rem;align-items:center}

.page{padding:1.4rem clamp(1rem,3vw,2rem) 4rem;max-width:980px;margin:0 auto}
.pagehead{display:flex;align-items:baseline;gap:.8rem;margin:0 0 1rem}
.pagehead h1{margin:0;font-size:1.2rem;font-weight:640;letter-spacing:-.01em}
.pagehead span{font-family:var(--mono);font-size:.7rem;color:var(--faint)}

.panelbox{background:var(--panel);border:1px solid var(--edge);border-radius:8px;
  padding:.9rem 1rem;margin-bottom:.9rem}
.panelbox h2{margin:0 0 .6rem;font-size:.86rem;font-weight:600;
  display:flex;align-items:center;gap:.6rem}
.panelbox h2 .sp{margin-left:auto;display:flex;gap:.45rem}
.panelbox .note{margin:0 0 .4rem;font-size:.78rem;color:var(--dim)}

/* Wide tables scroll in their own lane on phones, never the page. */
.tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tab{width:100%;border-collapse:collapse;font-size:.82rem}
table.tab th{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--faint);font-weight:500;text-align:left;
  padding:.3rem .6rem;border-bottom:1px solid var(--edge)}
table.tab td{padding:.45rem .6rem;border-bottom:1px solid var(--grid);
  vertical-align:middle}
table.tab tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.faint{color:var(--faint)}

.pill{display:inline-block;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.05em;padding:.1rem .5rem;border-radius:99px;
  border:1px solid var(--edge);color:var(--dim)}
.pill.ok{color:var(--strong);border-color:color-mix(in srgb,var(--strong) 45%,var(--edge))}
.pill.off{color:var(--none);border-color:color-mix(in srgb,var(--none) 45%,var(--edge))}
.pill.adm{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--edge))}

/* the one-time secret reveal, shared by tokens and generated passwords */
.reveal{border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--edge));
  background:color-mix(in srgb,var(--accent) 6%,var(--panel));
  border-radius:8px;padding:.75rem .9rem;margin-top:.7rem}
.reveal .tok{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.reveal code{font-family:var(--mono);font-size:.78rem;color:var(--accent);
  word-break:break-all}
.reveal p{margin:.45rem 0 0;font-size:.72rem;color:var(--dim)}
.reveal pre{margin:.45rem 0 0;font-family:var(--mono);font-size:.7rem;
  color:var(--dim);background:var(--bg);border:1px solid var(--edge);
  border-radius:5px;padding:.45rem .6rem;overflow-x:auto}

/* hourly usage bars */
.chart{position:relative;height:86px;display:flex;align-items:flex-end;gap:2px;
  padding-bottom:2px;border-bottom:1px solid var(--edge)}
.chart b{flex:1;background:var(--accent);border-radius:2px 2px 0 0;min-height:2px;
  opacity:.9;position:relative}
.chart b:hover{opacity:1}
.chart b.zero{background:var(--grid)}
.chart .tip{position:absolute;bottom:calc(100% + 4px);transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--edge);border-radius:5px;
  padding:.2rem .5rem;font-family:var(--mono);font-size:.64rem;color:var(--ink);
  pointer-events:none;white-space:nowrap;display:none;z-index:4;
  box-shadow:0 4px 12px var(--shadow)}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:.6rem;color:var(--faint);margin-top:.25rem}
.usagehead{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-bottom:.5rem;font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.usagehead b{color:var(--ink);font-weight:600;font-size:.95rem}

/* limit meters */
.meter{display:inline-flex;align-items:center;gap:.5rem}
.meter i{width:64px;height:6px;border-radius:3px;background:var(--grid);
  overflow:hidden;display:block;flex:none}
.meter i em{display:block;height:100%;background:var(--accent);border-radius:3px}
.meter.warn i em{background:var(--possible)}
.meter.full i em{background:var(--none)}
.meter span{font-family:var(--mono);font-size:.68rem;color:var(--dim)}

.banner{display:flex;gap:.7rem;align-items:flex-start;border-radius:8px;
  padding:.7rem .9rem;font-size:.8rem;border:1px solid;margin-bottom:.8rem}
.banner.limit{border-color:color-mix(in srgb,var(--possible) 45%,var(--edge));
  background:color-mix(in srgb,var(--possible) 7%,var(--panel))}
.banner.err{border-color:color-mix(in srgb,var(--none) 45%,var(--edge));
  background:color-mix(in srgb,var(--none) 7%,var(--panel))}
.banner p{margin:0}

.err{font-size:.78rem;color:var(--none)}
.warn{font-size:.78rem;color:var(--possible)}