* { box-sizing: border-box; margin: 0; }
body { font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; background: #16181d; color: #e8e8e8; }
header { padding: 18px 24px 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo { height: 36px; width: auto; filter: brightness(0) invert(0.85); }
h1 { font-size: 20px; overflow-wrap: anywhere; }
.sub { color: #9aa0aa; font-size: 13px; margin-top: 2px; }
.back { color: #7ab7ff; text-decoration: none; font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 14px 24px 40px; }
.card { background: #20242c; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit;
        border: 1px solid #2c313b; transition: border-color .15s; }
.card:hover { border-color: #5a91d8; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #333; }
.cardinfo { padding: 8px 10px 2px; }
.cardinfo .name { font-size: 12.5px; word-break: break-all; color: #cfd3da; }
.badges { display: flex; gap: 6px; font-size: 12px; flex-wrap: wrap; align-items: center;
  padding: 0 10px 10px; }
.badges span { padding: 1px 7px; border-radius: 999px; background: #2b303a; }
.badges .ok  { background: #1d3a24; color: #7fd894; }
.badges .fix { background: #402222; color: #ff9d9d; }
.badges .none { background: #3a3420; color: #e8c96a; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding: 0 24px 40px; }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.viewer img { width: 100%; border-radius: 10px; background: #333; }
.tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.tabs button { background: #2b303a; color: #cfd3da; border: 1px solid #3a404c; padding: 6px 14px;
               border-radius: 8px; cursor: pointer; font-size: 14px; }
.tabs button.active { background: #35507a; color: #fff; border-color: #5a91d8; }
.panel form { background: #20242c; border: 1px solid #2c313b; border-radius: 10px; padding: 14px; margin-bottom: 18px; }
.panel label { display: block; font-size: 13px; color: #9aa0aa; margin-bottom: 10px; }
.panel input[type=text], .panel input:not([type]), .panel textarea {
  width: 100%; background: #16181d; color: #e8e8e8; border: 1px solid #3a404c;
  border-radius: 7px; padding: 7px 9px; font: inherit; margin-top: 3px; }
.verdicts { display: flex; gap: 16px; margin: 8px 0 12px; }
.verdicts label { color: #e8e8e8; font-size: 14.5px; display: flex; gap: 6px; align-items: center; margin: 0; }
.panel button[type=submit] { background: #35507a; color: #fff; border: none; padding: 8px 18px;
  border-radius: 8px; font: inherit; cursor: pointer; }
.panel h2 { font-size: 15px; margin-bottom: 8px; }
.review { background: #20242c; border-left: 3px solid #555; border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; }
.review.r-ok  { border-left-color: #4caf6d; }
.review.r-fix { border-left-color: #d86a6a; }
.rhead { font-size: 13px; color: #9aa0aa; display: flex; gap: 8px; align-items: baseline; }
.rhead strong { color: #e8e8e8; }
.review p { margin-top: 4px; font-size: 14px; }
.keybox { max-width: 420px; margin: 12vh auto 0; padding: 28px; background: #20242c;
  border: 1px solid #2c313b; border-radius: 12px; text-align: center; }
.keybox .logo { margin-bottom: 14px; }
.keybox h1 { font-size: 18px; margin-bottom: 14px; }
.keybox form { display: flex; gap: 8px; }
.keybox input { flex: 1; background: #16181d; color: #e8e8e8; border: 1px solid #3a404c;
  border-radius: 7px; padding: 8px 10px; font-size: 14px; }
.keybox button { background: #35507a; color: #fff; border: none; padding: 8px 18px;
  border-radius: 8px; font: inherit; cursor: pointer; }
.keyerr { color: #ff9d9d; font-size: 13px; margin-bottom: 10px; }
.keymsg { color: #7fd894; font-size: 14px; margin-bottom: 10px; }
.loginhint { color: #9aa0aa; font-size: 13px; margin: 10px 0; }
.userbar { margin-left: auto; font-size: 13px; color: #9aa0aa; }
.whoami { font-size: 13px; color: #9aa0aa; margin-bottom: 10px; }
.googlebtn { display: block; background: #fff; color: #1f1f1f; text-decoration: none;
  padding: 10px 18px; border-radius: 8px; font-weight: 600; margin-bottom: 4px; }
.googlebtn:hover { background: #e8e8e8; }
.downloads { margin-top: 10px; font-size: 13px; color: #9aa0aa; display: flex;
  gap: 10px; align-items: baseline; flex-wrap: wrap; }
.downloads a { color: #7ab7ff; text-decoration: none; background: #2b303a;
  padding: 7px 14px; border-radius: 999px; }
.downloads a:hover { background: #35507a; color: #fff; }
.dlhint { font-size: 12.5px; }
.uploadbox { margin: 0 24px 4px; background: #20242c; border: 1px dashed #3a404c;
  border-radius: 10px; padding: 12px 14px; }
.uploadbox form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.uploadbox input[type=file] { color: #9aa0aa; font-size: 13px; flex: 1; min-width: 220px; }
.uploadbox button { background: #35507a; color: #fff; border: none; padding: 8px 16px;
  border-radius: 8px; font: inherit; cursor: pointer; }
.upmsg { color: #7fd894; font-size: 13px; margin-top: 8px; }
.uperr { color: #ff9d9d; font-size: 13px; margin-top: 8px; }
.pending { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pending span { font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.p-wait { background: #3a3420; color: #e8c96a; }
.p-fail { background: #402222; color: #ff9d9d; }
.drophint { color: #8a92a0; font-size: 12px; }
.uploadbox.dragover { border-color: #5a91d8; background: #253048; }
.uploadbox.dragover .drophint { color: #7ab7ff; }
.cats { border: 1px solid #3a404c; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.cats legend { font-size: 12.5px; color: #9aa0aa; padding: 0 4px; }
.cats label { display: flex; gap: 7px; align-items: center; color: #e8e8e8;
  font-size: 13.5px; margin: 4px 0; }
.rcats { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.rcats span { font-size: 11.5px; background: #402222; color: #ff9d9d;
  padding: 1px 8px; border-radius: 999px; }

/* design-review pass 2026-08-24 */
:root { accent-color: #5a91d8; }
:focus-visible { outline: 2px solid #7ab7ff; outline-offset: 2px; }
.card:focus-visible { border-color: #5a91d8; }
.card:has(.none) { border-color: #4a4430; }
.card { position: relative; }
.cardlink { display: block; color: inherit; text-decoration: none; }
.viewer img#view { max-height: 82vh; object-fit: contain; }
.cats label, .verdicts label { min-height: 32px; }
.cats input, .verdicts input { width: 17px; height: 17px; }
.formactions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-secondary { background: #2b303a !important; color: #cfd3da !important; border: 1px solid #3a404c !important; }
.empty { grid-column: 1 / -1; color: #9aa0aa; }
@media (max-width: 600px) {
  header, .grid, .detail { padding-left: 14px; padding-right: 14px; }
  .uploadbox { margin: 0 14px 4px; }
  .tabs button { padding: 9px 16px; }
}
.delform { margin-left: auto; }
.btn-danger { background: #402222; color: #ff9d9d; border: 1px solid #5a3232;
  padding: 7px 14px; border-radius: 999px; font: inherit; cursor: pointer; }
.btn-danger:hover { background: #5a2a2a; color: #fff; }
.carddel { margin-left: auto; display: flex; }
.badge-del { font-size: 12px; padding: 1px 7px; border-radius: 999px; border: none;
  background: #402222; color: #ff9d9d; font-family: inherit; cursor: pointer; }
.badge-del:hover { background: #5a2a2a; color: #fff; }
.cbopt { display: flex; gap: 7px; align-items: center; color: #cfd3da;
  font-size: 13px; }
.versionnav a { color: #7ab7ff; text-decoration: none; padding: 0 5px; }
.versionnav strong { color: #e8c96a; padding: 0 5px; }
.variation { color: #8a92a0; font-style: italic; }