:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#6b7280; --line:#e3e6eb; --accent:#5b3cc4; --ok:#e7f6ec; --okb:#2e7d4f; --err:#fdecec; --errb:#b42318; --card:#fff; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.top { display:flex; gap:24px; align-items:center; justify-content:space-between; padding:12px 24px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:700; color:var(--fg); }
nav { display:flex; gap:18px; flex-wrap:wrap; }
main { max-width:1180px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:24px; margin:8px 0 12px; } h2 { font-size:18px; margin:28px 0 10px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.narrow { max-width:420px; margin:40px auto; background:var(--card); padding:24px; border:1px solid var(--line); border-radius:10px; }
.form { display:flex; flex-direction:column; gap:12px; }
.form.inline { flex-direction:row; flex-wrap:wrap; align-items:flex-end; background:var(--card); padding:14px; border:1px solid var(--line); border-radius:10px; }
.form label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.form label.grow { flex:1; min-width:220px; }
input, select { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--fg); }
button, .btn { font:inherit; padding:8px 14px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; display:inline-block; }
button.link { background:none; color:var(--accent); padding:0; }
.row { display:flex; gap:16px; align-items:center; }
.flash { padding:10px 14px; border-radius:8px; margin:0 0 16px; border:1px solid; }
.flash.ok { background:var(--ok); border-color:var(--okb); } .flash.err { background:var(--err); border-color:var(--errb); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; color:var(--muted); font-weight:600; background:#fafbfc; }
tr.lead td { background:#f4f0ff; } tr.bound td { background:#f4f0ff; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; margin-top:16px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; color:var(--fg); }
.tile img, .noimg { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#eee; }
.noimg { display:flex; align-items:center; justify-content:center; color:var(--muted); }
.tile .cap { padding:8px 10px; }
.badge { display:inline-block; font-size:11px; padding:2px 6px; border-radius:6px; background:#ede7ff; color:var(--accent); margin-top:4px; }
.cardhead { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.cover { width:220px; aspect-ratio:3/4; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.thumb { width:54px; aspect-ratio:3/4; object-fit:cover; border-radius:6px; display:block; }
.bar { width:80px; height:6px; background:#eceff3; border-radius:4px; overflow:hidden; display:inline-block; margin-right:6px; vertical-align:middle; }
.bar span { display:block; height:100%; background:var(--accent); }
@media (max-width:700px) { table { font-size:13px; } th, td { padding:6px; } .cover { width:100%; } }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:14px 0; }
.panel table { border:0; }
.row.between { justify-content:space-between; }
form.mini { display:flex; gap:6px; align-items:center; }
form.mini input { padding:6px 8px; min-width:200px; }
form.mini button { padding:6px 10px; }
.warn { color:var(--errb); font-weight:600; }
.suggest-wrap { position:relative; }
.suggest { position:absolute; top:100%; left:0; right:0; z-index:20; margin-top:4px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(20,25,40,.12); max-height:420px; overflow-y:auto; color:var(--fg); font-size:14px; }
.sug-item { display:flex; gap:10px; align-items:center; padding:6px 10px; cursor:pointer; border-bottom:1px solid var(--line); }
.sug-item:last-child { border-bottom:0; }
.sug-item:hover, .sug-item.on { background:#f4f0ff; }
.sug-item img, .sug-noimg { width:42px; aspect-ratio:3/4; object-fit:cover; border-radius:5px; background:#eee; flex:none; }
.sug-empty { padding:10px; color:var(--muted); }
.modes { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.mode { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.mode.off { opacity:.75; }
.badge.grey { background:#eceff3; color:var(--muted); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
ul.check { list-style:none; padding:0; } ul.check li { padding:3px 0; } ul.check li.ok { color:var(--okb); } ul.check li.no { color:var(--muted); }
button[disabled] { background:#c9c2e6; cursor:not-allowed; }
.nowrap { white-space:nowrap; }