:root { --bg:#f5f6f8; --fg:#1b1f24; --muted:#6b7280; --accent:#1f3a5f; --card:#fff; --err:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--fg); }
main { padding: 16px; max-width: 1100px; margin: 0 auto; }
main.center { min-height: 100vh; display:flex; align-items:center; justify-content:center; }
.card { background:var(--card); padding:28px; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.06); width:100%; max-width:360px; }
.card h1 { margin:0 0 4px; }
.muted { color:var(--muted); margin-top:0; }
.error { color:var(--err); }
label { display:block; margin:12px 0 6px; font-weight:600; }
input[type=password] { width:100%; padding:10px 12px; font-size:16px; border:1px solid #cbd2d9; border-radius:8px; }
button { margin-top:14px; width:100%; padding:10px; font-size:16px; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--accent); color:#fff; }
.topbar a { color:#fff; margin-right:12px; text-decoration:none; }
.inline { display:inline; }
button.link { width:auto; margin:0; padding:0; background:none; color:#fff; text-decoration:underline; font-size:inherit; }

/* --- Ülevaade --- */
.topbar .brand { color:#fff; font-weight:700; text-decoration:none; }
.overview { padding: 12px; }
.filters { position: sticky; top: 0; z-index: 5; display:flex; flex-wrap:wrap; gap:8px; padding:10px 0; background:var(--bg); }
.filters select { flex: 1 1 140px; min-width: 0; padding:8px 10px; font-size:15px; border:1px solid #cbd2d9; border-radius:8px; background:#fff; }
.seg { display:flex; flex: 1 1 220px; border:1px solid #cbd2d9; border-radius:8px; overflow:hidden; background:#fff; }
.seg label { flex:1; text-align:center; cursor:pointer; }
.seg input { position:absolute; opacity:0; width:0; height:0; }
.seg span { display:block; padding:8px 4px; font-size:14px; }
.seg input:checked + span { background:var(--accent); color:#fff; }
.btn-small { width:auto; margin:0; padding:8px 14px; }
.summary { margin: 6px 0 4px; color:var(--muted); }
.country h2 { font-size: 18px; margin: 18px 0 8px; display:flex; align-items:center; gap:8px; }
.country h2 .cc { font-size:12px; background:var(--accent); color:#fff; padding:2px 6px; border-radius:6px; }
.country h2 small { color:var(--muted); font-weight:400; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
@media (max-width: 420px) { .grid { grid-template-columns: repeat(2, 1fr); gap:8px; } }
.coin { background:var(--card); border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); display:flex; flex-direction:column; border: 2px solid transparent; }
.coin .img { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 50% 45%, #f6e7b0 0 55%, #d9d9d9 56% 100%); }
.coin .img img { width:100%; height:100%; object-fit:contain; }
.coin .ph { font-size: 28px; font-weight:700; color:#8a6d1f; opacity:.6; }
.coin .year { position:absolute; left:6px; top:6px; font-size:12px; font-weight:700; background:rgba(255,255,255,.85); padding:2px 6px; border-radius:6px; }
.coin .joint { position:absolute; right:6px; top:6px; font-size:10px; background:rgba(31,58,95,.85); color:#fff; padding:2px 5px; border-radius:6px; }
.coin .title { padding:6px 8px 8px; font-size:12.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.coin .qty { padding:0 8px 8px; font-size:12px; color:var(--muted); }
.coin.missing { background:#f0f1f3; }
.coin.missing .img { filter: grayscale(1); opacity:.55; }
.coin.missing .title { color:#7a8088; }
.coin.owned.complete { border-color:#2e9e5b; }
.coin.owned:not(.complete) { border-color:#d9a300; }
.mints { display:flex; gap:4px; padding:0 8px 8px; margin-top:auto; }
.mm { flex:1; text-align:center; font-size:11px; font-weight:700; padding:2px 0; border-radius:5px; border:1px solid #cbd2d9; color:#9aa1a9; background:#fff; }
.mm.on { background:#2e9e5b; border-color:#2e9e5b; color:#fff; }
.coin .mv { padding:0 8px 6px; font-size:11.5px; color:#3b6d3b; font-weight:600; }
.coin.missing .mv { color:#8a9099; }
.coin .title { flex: 1 0 auto; }

/* --- Mündi leht --- */
.coinpage { padding: 12px; max-width: 900px; }
.crumbs { margin: 4px 0 8px; } .crumbs a { color: var(--accent); text-decoration: none; }
.flash { background:#e6f4ea; color:#1e6b3a; padding:8px 12px; border-radius:8px; }
.hero { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.official { flex: 0 0 220px; max-width:100%; aspect-ratio:1; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 50% 45%, #f6e7b0 0 55%, #d9d9d9 56% 100%); overflow:hidden; }
.official img { width:100%; height:100%; object-fit:contain; }
.official .ph { font-size:56px; font-weight:700; color:#8a6d1f; opacity:.6; }
.official.missing { filter: grayscale(1); opacity:.6; }
.facts { flex: 1 1 280px; min-width:0; }
.facts h1 { font-size:20px; margin:0 0 8px; line-height:1.3; }
dl { display:grid; grid-template-columns: max-content 1fr; gap:4px 12px; margin:0; }
dt { color:var(--muted); font-size:13px; } dd { margin:0; }
dd.pre { white-space:pre-wrap; }
.cc { font-size:12px; background:var(--accent); color:#fff; padding:2px 6px; border-radius:6px; }
dd.mints { display:flex; gap:4px; padding:0; }
dd.mints .mm { flex:0 0 32px; text-decoration:none; }
.mm.cur { outline: 2px solid var(--accent); outline-offset: 1px; }
a.mm { text-decoration:none; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0; align-items:center; }
.btn { display:inline-block; width:auto; margin:0; padding:9px 14px; font-size:15px; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; border:0; cursor:pointer; }
.btn.ghost { background:#fff; color:var(--accent); border:1px solid var(--accent); }
.btn.danger { background:#b3261e; }
.link.danger { color:#b3261e; }
.coinpage .card { max-width:none; margin-top:14px; padding:16px; }
.coinpage .card h2 { font-size:17px; margin:0 0 10px; } .coinpage h3 { font-size:15px; margin:16px 0 6px; }
.form { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.form label { display:flex; flex-direction:column; gap:4px; margin:0; font-size:13px; color:var(--muted); font-weight:600; }
.form label.wide, .form .row { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font-size:16px; padding:8px 10px; border:1px solid #cbd2d9; border-radius:8px; color:var(--fg); font-family:inherit; }
.form .row { display:flex; gap:8px; align-items:center; }
@media (max-width: 480px) { .form { grid-template-columns: 1fr; } }
.photos { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.photos figure { margin:0; } .photos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:#eee; }
.photos figcaption { font-size:12px; color:var(--muted); display:flex; justify-content:space-between; margin-top:2px; }
.addphoto { display:flex; gap:8px; margin-top:10px; align-items:center; }
.addphoto select { padding:8px 10px; font-size:15px; border:1px solid #cbd2d9; border-radius:8px; background:#fff; }
.filebtn { cursor:pointer; }
.link { width:auto; margin:0; padding:0; background:none; color:var(--accent); text-decoration:underline; font-size:inherit; cursor:pointer; border:0; }
.coin a.cardlink { color:inherit; text-decoration:none; display:flex; flex-direction:column; flex:1; }
.coin .mints { position:relative; }
.flag { font-size: 1.15em; line-height: 1; }
.pricehist table.hist { border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.pricehist td { padding: 3px 12px 3px 0; color: var(--muted); }
.pricehist td.num { text-align: right; color: var(--fg); font-weight: 600; }
.pricehist tr.cur td { color: var(--fg); }

/* --- Menüü, statistika, puuduvad --- */
.topbar nav { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; justify-content:flex-end; }
.topbar nav a { margin:0; padding:4px 6px; border-radius:6px; font-size:14px; }
.topbar nav a.active { background:rgba(255,255,255,.18); }
.stats h1, .missing h1 { font-size:20px; margin:8px 0 12px; }
.stats h2 { font-size:16px; margin:20px 0 8px; }
.tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.tile { background:var(--card); border-radius:10px; padding:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.tile .k { font-size:12px; color:var(--muted); } .tile .v { font-size:22px; font-weight:700; margin:2px 0; } .tile .s { font-size:12px; color:var(--muted); }
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data { border-collapse:collapse; width:100%; background:var(--card); border-radius:10px; font-size:14px; }
table.data th, table.data td { padding:7px 8px; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:middle; }
table.data th.num, table.data td.num { text-align:right; white-space:nowrap; }
table.data tfoot th { border-top:2px solid #cbd2d9; }
table.data a { color:var(--accent); text-decoration:none; }
.bar { display:inline-block; width:60px; height:8px; background:#e5e7eb; border-radius:4px; vertical-align:middle; overflow:hidden; }
.bar span { display:block; height:100%; background:#2e9e5b; }
.cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.toplist { padding-left:20px; margin:0; } .toplist li { margin:4px 0; display:flex; justify-content:space-between; gap:8px; }
.toplist a { color:var(--fg); text-decoration:none; } .toplist .val { white-space:nowrap; color:#3b6d3b; font-weight:600; }
.missing { padding:12px; }
.chk { display:flex; align-items:center; gap:6px; font-size:14px; margin:0; font-weight:400; color:var(--fg); }
.chk input { width:18px; height:18px; }
td.thumb { width:44px; padding:4px; } td.thumb img { width:40px; height:40px; object-fit:contain; border-radius:50%; background:#f3f4f6; display:block; }
td.thumb .ph { display:inline-block; width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; background:#eee; color:#999; font-size:12px; font-weight:700; }
td.chkcell { text-align:center; } td.chkcell input { width:20px; height:20px; }
tr.ni td { opacity:.5; }
@media (max-width: 600px) { table.data { font-size:13px; } table.data th, table.data td { padding:6px 5px; } }