:root { --bg:#f4f5f2; --card:#fff; --text:#1b1d1a; --muted:#6a6e66; --border:#dcded7; --accent:#1f6f4a; --accent-t:#fff; --ok:#1f7a4d; --warn:#9a6a00; --err:#b3261e; --shadow:0 1px 2px rgba(0,0,0,.06);
        --side:#0f2b46; --side-hover:#1c4970; --side-text:#f8f9fa; --amber:#ffc107; --amber-t:#212529; --side-w:240px; }
@media (prefers-color-scheme: dark) { :root { --bg:#131412; --card:#1c1d1a; --text:#ecece6; --muted:#9a9c93; --border:#33352f; --accent:#4cc38a; --accent-t:#0d1a13; --ok:#5fd39a; --warn:#e0b04a; --err:#ff8a80; --shadow:none; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; }
a { color:var(--accent); }
img { max-width:100%; }

/* ---------- shell: dark sidebar + one scrolling content area (no page-level side scroll anywhere) ---------- */
body.app { height:100vh; overflow:hidden; }
.shell { display:flex; height:100vh; height:100dvh; }
.side { width:var(--side-w); flex:0 0 var(--side-w); background:var(--side); color:var(--side-text); display:flex; flex-direction:column; transition:width .15s ease; overflow:hidden; }
.side-head { display:flex; align-items:center; gap:8px; padding:16px 14px; min-height:64px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--side-text); font-weight:800; min-width:0; flex:1; white-space:nowrap; }
.brand em { font-style:normal; color:var(--amber); }
.brand-mark { border-radius:6px; flex:0 0 auto; background:#fff; }
.brand-label { overflow:hidden; text-overflow:ellipsis; }
.icon-btn { background:none; border:0; color:var(--side-text); cursor:pointer; padding:6px; border-radius:8px; display:flex; }
.icon-btn:hover { background:var(--side-hover); }
.collapse-btn .ico { transition:transform .15s; }
.close-btn { display:none; }
.ico { width:20px; height:20px; flex:0 0 20px; }
.side-nav { flex:1; overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; gap:2px; }
.nav-link { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; color:var(--side-text); text-decoration:none; font-weight:600; font-size:.92rem; white-space:nowrap; background:none; border:0; width:100%; cursor:pointer; font-family:inherit; text-align:left; }
.nav-link:hover { background:var(--side-hover); }
.nav-link.on { background:var(--amber); color:var(--amber-t); }
.side-foot { padding:10px 8px 14px; border-top:1px solid rgba(255,255,255,.08); }
.who { padding:6px 12px 8px; font-size:.78rem; opacity:.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logout { margin:0; }
.open-menu { display:none; }
/* collapsed (desktop): icons only */
.side.collapsed { width:68px; flex-basis:68px; }
.side.collapsed .brand-label, .side.collapsed .nav-label, .side.collapsed .who { display:none; }
.side.collapsed .nav-link { justify-content:center; padding:11px 0; }
.side.collapsed .side-head { flex-direction:column; padding:14px 6px; }
.side.collapsed .collapse-btn .ico { transform:rotate(180deg); }

.content { flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; padding:22px 26px 60px; }
.content > * { max-width:1180px; }
.content.fill { display:flex; flex-direction:column; overflow:hidden; padding-bottom:18px; }
.scroll-box { flex:1; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.scroll-box table { border:0; border-radius:0; }
.scroll-box thead th, .scroll-box tr:first-child > th { position:sticky; top:0; background:var(--card); z-index:1; box-shadow:0 1px 0 var(--border); }
body.plain { min-height:100vh; }
.plain-main { padding:16px; }

h1 { font-size:1.5rem; margin:.2em 0 .6em; } h2 { font-size:1.1rem; margin:1.6em 0 .5em; } h3 { margin:0 0 .5em; font-size:1rem; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:8px; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); align-items:start; }
.grid.cards { grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); align-items:stretch; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow); margin-bottom:14px; min-width:0; }
.card.link { text-decoration:none; color:inherit; display:block; } .card.link:hover { border-color:var(--accent); }
.card.narrow { max-width:380px; margin:12vh auto 0; }
.card.secret { border-color:var(--accent); } .card.danger { border-color:var(--err); }
.big { font-size:2rem; font-weight:800; margin:.1em 0; overflow-wrap:anywhere; } .muted { color:var(--muted); } .hint { color:var(--muted); font-weight:400; font-size:.85em; } .mono { font-family:ui-monospace,Menlo,monospace; font-size:.85em; }
.wrap, dd, dt, p, h1, h2, h3, li, label, summary, .chip, .row > * { overflow-wrap:anywhere; }
/* Table cells: short cells keep their words whole; a cell can never get wider than ~26 characters, so one very long unbroken value wraps instead of squeezing the other columns. */
td { overflow-wrap:anywhere; max-width:26ch; }
button, td.nw { white-space:nowrap; } a.btn { overflow-wrap:anywhere; }
label.check { display:flex; align-items:center; gap:9px; margin:10px 0; } label.check input { display:inline-block; width:auto; margin:0; }
.row > * { min-width:0; }
.right { text-align:right; }

table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; min-width:0; }
th { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } tr:last-child td { border-bottom:0; }
.badge { display:inline-block; padding:2px 9px; border-radius:99px; font-size:.78rem; font-weight:700; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.badge.ok { color:var(--ok); border-color:var(--ok); } .badge.warn { color:var(--warn); border-color:var(--warn); } .badge.err { color:var(--err); border-color:var(--err); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:99px; font-size:.8rem; font-weight:700; border:1px solid var(--accent); color:var(--accent); text-decoration:none; }
.chip .ico { width:14px; height:14px; flex-basis:14px; } .chip.none { border-color:var(--border); color:var(--muted); font-weight:600; }

label { display:block; font-weight:600; margin:0 0 12px; }
input, select, textarea { display:block; width:100%; min-width:0; margin-top:5px; padding:9px 10px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; }
input[type=file] { padding:7px 10px; }
.btn, button.primary, button.danger, button.btn { font:inherit; font-weight:700; padding:9px 14px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text); cursor:pointer; text-decoration:none; display:inline-block; }
button.primary, .btn.primary { background:var(--accent); color:var(--accent-t); border-color:var(--accent); }
button.danger, .btn.danger { color:var(--err); border-color:var(--err); } .btn.sm { padding:4px 10px; font-size:.82rem; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.link { background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; }
/* One row of controls whose bottoms line up: labels carry no bottom margin here, so the button sits level with the inputs. */
form.inline { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px 14px; align-items:end; }
form.inline h3 { grid-column:1/-1; margin:0; }
form.inline label { margin:0; }
form.inline input, form.inline select, form.inline button { min-height:42px; margin-top:5px; }
form.inline button { margin-top:0; align-self:end; }
.copyrow { display:flex; gap:8px; margin:8px 0; } .copyrow input { margin:0; font-family:ui-monospace,Menlo,monospace; font-size:.85rem; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:14px; border:1px solid var(--border); background:var(--card); font-weight:600; overflow-wrap:anywhere; }
.flash.ok { border-color:var(--ok); color:var(--ok); } .flash.err { border-color:var(--err); color:var(--err); } .flash.warn { border-color:var(--warn); color:var(--warn); }
dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; margin:0 0 14px; } dt { color:var(--muted); } dd { margin:0; }
.btns { display:flex; gap:8px; flex-wrap:wrap; } details summary { cursor:pointer; font-weight:700; }

/* tabs */
.tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin:0 0 18px; }
.tab { padding:9px 16px; border-radius:8px 8px 0 0; text-decoration:none; color:var(--muted); font-weight:700; border:1px solid transparent; border-bottom:0; margin-bottom:-1px; }
.tab:hover { color:var(--text); }
.tab.on { background:var(--card); color:var(--text); border-color:var(--border); box-shadow:inset 0 3px 0 var(--accent); }

/* release cards */
.rel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
.rel-head h3 { margin:0; }
.rel-notes { color:var(--muted); margin:6px 0 10px; }
.card.rel dl { margin-bottom:0; }
.card.empty { border-style:dashed; box-shadow:none; }

/* pager */
.pager { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 2px 0; }
.pager-info { color:var(--muted); font-size:.85rem; }
.pager-links { display:flex; gap:4px; flex-wrap:wrap; }
.pg { padding:5px 11px; border-radius:8px; border:1px solid var(--border); background:var(--card); text-decoration:none; color:var(--text); font-weight:600; font-size:.85rem; }
.pg.on { background:var(--accent); color:var(--accent-t); border-color:var(--accent); } .pg.off { opacity:.4; }
a.pg:hover { border-color:var(--accent); }

/* ---------- narrow windows: tables become stacked cards (no sideways scrolling), the sidebar becomes a full-screen menu ---------- */
@media (max-width:1000px) {
  table, thead, tbody, tr, th, td { display:block; width:100%; }
  table { border:0; background:none; border-radius:0; }
  thead, tr.hd { position:absolute; width:1px; height:1px; padding:0; margin:0; border:0; overflow:hidden; clip:rect(0 0 0 0); }      /* the header row: its names are shown on each cell instead */
  tr { background:var(--card); border:1px solid var(--border); border-radius:12px; margin:0 0 10px; padding:4px 0; }
  td { max-width:none; display:flex; gap:12px; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--border); padding:8px 14px; text-align:right; }
  td:last-child { border-bottom:0; }
  td::before { content:attr(data-label); flex:0 0 34%; text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
  td[colspan] { display:block; text-align:left; } td[colspan]::before, td[data-label=""]::before { content:none; }
  .scroll-box thead th, .scroll-box tr:first-child > th { position:static; }
  .scroll-box { border-radius:12px; padding:10px 10px 0; background:none; border:0; }
}
@media (max-width:900px) {
  body.app { height:auto; overflow:visible; } .shell { display:block; height:auto; }
  .content { overflow:visible; padding:66px 14px 48px; }
  .content.fill { display:block; overflow:visible; }
  .scroll-box { overflow:visible; }
  /* full-screen menu, opened by the round button at the top right */
  .side { position:fixed; inset:0; width:100%; flex-basis:auto; z-index:200; transform:translateX(-100%); visibility:hidden; transition:transform .2s ease, visibility 0s .2s; }
  .side.show { transform:none; visibility:visible; transition:transform .2s ease; }
  .side.collapsed { width:100%; }
  .side.collapsed .brand-label, .side.collapsed .nav-label, .side.collapsed .who { display:initial; }
  .collapse-btn { display:none; } .close-btn { display:flex; }
  .side-nav { padding:14px; gap:6px; } .nav-link { padding:16px 16px; font-size:1.05rem; }
  .open-menu { display:flex; position:fixed; top:12px; right:12px; z-index:150; width:44px; height:44px; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--side); color:var(--side-text); box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer; }
  body.menu-open { overflow:hidden; }
  body.menu-open .open-menu { display:none; }
  .tabs { overflow:visible; } .tab { flex:1 1 auto; text-align:center; }
}