:root { --accent:#60340d; --accent-l:#f6efe7; --grey:#5b5b5b; --line:#ddd6cf; --bad:#b3261e; --good:#2f6b3a; --bg:#faf8f5; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color:#1b1b1b; background:var(--bg); line-height:1.45; }
main { max-width: 1280px; margin: 0 auto; padding: 16px; }
h1 { color: var(--accent); font-size: 1.5rem; margin: .3em 0 .5em; }
h2 { font-size: 1.1rem; margin: 1.2em 0 .5em; }
a { color: var(--accent); }
header.top { background: var(--accent); color:#fff; padding: 0 16px; display:flex; gap:4px; align-items:stretch; flex-wrap:wrap; position: sticky; top:0; z-index: 20; }
header.top .brand { font-weight:700; padding: 12px 14px 12px 0; margin-right: 8px; }
header.top a.tab { color:#f3e6d8; text-decoration:none; font-weight:600; padding: 12px 14px; border-bottom: 3px solid transparent; }
header.top a.tab.on { color:#fff; border-bottom-color:#f0b25a; }
header.top .sp { flex:1; }
header.top a.out { color:#f3e6d8; align-self:center; font-size:.9rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:12px 0; }
.error { background:#fdecea; border:1px solid #f1b5b0; color:var(--bad); padding:10px 14px; border-radius:8px; margin:12px 0; }
.ok { background:#eaf4ec; border:1px solid #b9d8c0; padding:10px 14px; border-radius:8px; margin:12px 0; }
.muted { color: var(--grey); font-size:.86rem; }
input, select, textarea, button { font: inherit; padding: 7px 9px; border:1px solid #bbb; border-radius:6px; background:#fff; }
button, .btn { background: var(--accent); color:#fff; border:0; cursor:pointer; text-decoration:none; display:inline-block; padding:8px 14px; border-radius:6px; font-weight:600; }
button:disabled { opacity:.55; cursor:wait; }
button.sec, .btn.sec { background:#fff; color:var(--accent); border:1px solid var(--accent); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar input[type=search] { flex: 1 1 240px; min-width: 0; }
.progress { height: 10px; background:#eee; border-radius: 5px; overflow:hidden; margin-top:8px; }
.progress > div { height:100%; background: #f0b25a; width:0; transition: width .3s; }
.tablewrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:10px; }
table { width:100%; border-collapse: collapse; font-size:.9rem; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align: middle; }
th { background: var(--accent-l); position: sticky; top: 0; z-index: 1; font-size:.82rem; }
td.num { text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }
td.ph { width: 76px; }
td.ph img { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background:#fff; cursor: zoom-in; display:block; }
td.ph .none { width:64px; height:64px; border-radius:6px; background:#f1ede8; display:flex; align-items:center; justify-content:center; color:#b4a99c; font-size:.7rem; }
td.desc { max-width: 380px; font-size:.82rem; color:#444; }
td.desc .clip { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.zh { font-size:.95rem; }
.badge { display:inline-block; font-size:.7rem; padding:1px 6px; border-radius:9px; background:#f0b25a; color:#3a1f06; font-weight:700; margin-left:4px; vertical-align: middle; }
.cat { font-size:.8rem; color: var(--grey); white-space: nowrap; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
[hidden] { display: none !important; }
.lightbox figure { margin:0; background:#fff; border-radius:12px; padding:14px; max-width: min(94vw, 680px); max-height: 92vh; overflow:auto; }
.lightbox img { max-width:100%; max-height:62vh; display:block; margin: 0 auto; border-radius:6px; }
.lightbox figcaption { font-size:.9rem; margin-top:10px; }
.lightbox .close { float:right; }
details > summary { cursor:pointer; color: var(--accent); }
.changes li { font-size:.86rem; }
.login { max-width: 360px; margin: 12vh auto; }
.login form { display:flex; flex-direction:column; gap:10px; }
label.f { display:flex; flex-direction:column; gap:4px; font-size:.88rem; color: var(--grey); }
label.f input, label.f textarea { width:100%; }
code { background:#f1ede8; padding:1px 5px; border-radius:4px; font-size:.86em; }
@media (max-width: 700px) {
  .hide-sm { display:none; }
  th, td { padding:5px; }
  td.ph img, td.ph .none { width:52px; height:52px; }
}