/* release-hub — flat, hairline, typographic. No gradients, no shadows. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; src:url('/static/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; src:url('/static/Inter-Bold.woff2') format('woff2'); }

:root {
  --bg: #fafafa;
  --fg:  #18181b;
  --fg2: #4b5563;
  --fg3: #71717a;
  --line:  #e4e4e7;
  --line2: #f0f0f1;
  --green: #16a34a;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 14.5px/1.6 'Inter', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--fg2); }
code, .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
code { font-size: 13px; color: var(--fg2); }

/* nav */
.topnav {
  position: sticky; top: 0; z-index: 10; background: rgba(250,250,250,.94);
  display: flex; justify-content: space-between; align-items: center;
  height: 52px; padding: 0 28px; border-bottom: 1px solid var(--line);
}
.topnav .brand { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.topnav .links { display: flex; gap: 20px; }
.topnav .links a { font-size: 13.5px; color: var(--fg2); }
.topnav .links a:hover { color: var(--fg); }
.topnav .links a.active { color: var(--fg); font-weight: 600; }

/* layout */
.page { max-width: 880px; margin: 0 auto; padding: 40px 24px 96px; }
.pagehead { margin-bottom: 28px; }
.pagehead h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.pagehead .sub { margin-top: 3px; font-size: 13.5px; color: var(--fg2); }
section { margin-top: 40px; }
section:first-of-type { margin-top: 0; }
.sect {
  margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg3);
}

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg3);
  padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
td { padding: 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; color: var(--fg); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f5f5f6; }
td code { background: none; padding: 0; }
.num { font-variant-numeric: tabular-nums; }

/* chips — monochrome, mono */
.chip {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px; color: var(--fg2);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px;
  background: #fff; white-space: nowrap;
}
.chip.ok { color: #166534; border-color: #86efac; background: #f0fdf4; }
.chip.err { color: #991b1b; border-color: #fca5a5; background: #fef2f2; font-weight: 600; }
.playerr {
  margin: 2px 0 6px; padding: 8px 10px; border: 1px solid #fca5a5; border-radius: 6px;
  background: #fef2f2; color: #7f1d1d; font-size: 12px; line-height: 1.5;
}
.playerr b { color: #991b1b; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px; border-radius: 6px;
  font: 500 13px/1 'Inter', sans-serif; cursor: pointer; border: 1px solid transparent;
}
.btn.primary { background: var(--fg); color: #fff; }
.btn.primary:hover { background: #2e2e33; color: #fff; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--fg2); }
.btn.ghost:hover { border-color: #ceced3; color: var(--fg); }
.btn.xs { height: 25px; padding: 0 10px; font-size: 12px; border-radius: 5px; }

/* forms */
form.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
label { display: block; font-size: 12px; font-weight: 500; color: var(--fg2); margin-bottom: 5px; }
input, select {
  font: inherit; height: 32px; padding: 0 10px; width: 240px; max-width: 100%;
  background: #fff; color: var(--fg);
  border: 1px solid #d6d6da; border-radius: 6px;
}
input::placeholder { color: #b9b9c0; }
input:focus, select:focus {
  outline: none; border-color: var(--fg);
  box-shadow: 0 0 0 3px rgba(24,24,27,.07);
}
.hint { margin: 8px 0 0; font-size: 13px; color: var(--fg2); }

/* flash / errors */
.flash {
  margin-bottom: 28px; font-size: 13px; color: #166534;
  border-left: 2px solid var(--green); padding: 2px 0 2px 12px;
}
.err { color: #dc2626; font-size: 13px; margin-top: 8px; }

/* key-value settings tables (Distribution / Configuration tabs) */
table.kv { width:100%; border-collapse:collapse; font-size:14px; }
table.kv th {
  text-align:left; vertical-align:top; white-space:nowrap;
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--fg3);
  padding:10px 16px 10px 0; border-bottom:1px solid var(--line2);
  width:1%;
}
table.kv td { padding:10px 0; border-bottom:1px solid var(--line2); vertical-align:top; }
table.kv tr:last-child td, table.kv tr:last-child th { border-bottom:none; }
table.kv code.dl { background:#fff; border:1px solid var(--line2); border-radius:5px; padding:3px 8px; font-size:12.5px; word-break:break-all; }
table.kv .sharelink { display:inline-flex; align-items:center; gap:8px; margin:2px 0; }
table.kv .hint { margin-top:6px; }

/* app page tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:18px 0 24px; overflow-x:auto; }
.tabs a {
  padding:8px 14px 9px; font-size:13.5px; color:var(--fg2); white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a:hover { color:var(--fg); }
.tabs a.active { color:var(--fg); font-weight:600; border-bottom-color:var(--fg); }

/* app page */
.plathead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.plathead .pkg { font-size: 12.5px; color: var(--fg2); }
.plathead .latest { font-size: 12px; color: var(--fg3); }
.platcard { margin-top: 28px; }
.platcard:first-of-type { margin-top: 0; }
.keystored { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg3); }
.keystored i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.playsetup { border: 1px dashed var(--line2); border-radius: 8px; padding: 12px 14px; margin: 0; }
.playsetup form.inline { margin: 8px 0 0; }
.playcheck code { background: #fff; border: 1px solid var(--line2); border-radius: 5px; padding: 4px 10px; display: inline-block; max-width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.manifest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.manifest code { background: #fff; border: 1px solid var(--line2); border-radius: 5px; padding: 5px 9px; }
.sharelink { display: inline-flex; align-items: center; gap: 6px; }
.sharelink .btn.ghost { border-color: transparent; color: var(--fg3); }
.sharelink .btn.ghost:hover { border-color: var(--line); color: var(--fg); }
.btn.ghost.danger { color: #b91c1c; }
.btn.ghost.danger:hover { border-color: #fca5a5; color: #991b1b; background: #fef2f2; }
.rowactions { white-space: nowrap; }
.rowactions form { display: inline; }
.rowactions > * + * { margin-left: 12px; }
.uploadcmd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uploadcmd code { background: #fff; border: 1px solid var(--line2); border-radius: 5px; padding: 6px 9px; font-size: 12px; }

/* login / setup */
.auth { max-width: 320px; margin: 88px auto 0; }
.auth .card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.auth h1 { margin: 0 0 18px; font-size: 15px; font-weight: 600; text-align: center; }
.auth input { width: 100%; }
.auth .btn { width: 100%; margin-top: 14px; }

@media (max-width: 640px) {
  .topnav { padding: 0 16px; }
  .page { padding: 24px 16px 64px; }
  input { width: 100%; }
}