*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f5f3ef;color:#222;font-size:16px}
a{color:#8a4b14}
.top{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;background:#5b2e0e;color:#fff;padding:10px 14px}
.top a{color:#fff;text-decoration:none}
.brand{font-weight:700;font-size:18px}.brand span{font-weight:400;opacity:.8;font-size:14px}
.top nav{display:flex;gap:14px;align-items:center;font-size:14px}
.asof-bar{background:#fff3d6;padding:6px 14px;font-size:14px;border-bottom:1px solid #ecd9a8}
main{max-width:1100px;margin:0 auto;padding:12px}
h1{font-size:22px;margin:10px 0}
h2.sub{font-size:18px;margin-top:20px}
.search{display:flex;gap:8px;position:sticky;top:0;background:#f5f3ef;padding:6px 0;z-index:2}
.search input{flex:1;min-width:0;font-size:18px;padding:12px;border:2px solid #c9b79c;border-radius:10px}
.btn{display:inline-block;background:#8a4b14;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:16px;text-decoration:none;cursor:pointer;margin:3px 0}
.btn.light{background:#e7dccb;color:#3b2a18}.btn.danger{background:#b02a2a}
button.link{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font-size:inherit;padding:0}
.inline{display:inline}
.muted{color:#777;font-size:14px}
.company h2{font-size:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:2px solid #e2d6c3;padding-bottom:4px}
.asof{font-size:13px;font-weight:600;background:#e4f3e4;color:#225c22;padding:3px 8px;border-radius:6px}
.asof.old{background:#fde3e3;color:#8b1c1c}
.asof-sm{font-size:12px;color:#556}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.item{background:#fff;border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ph{aspect-ratio:4/3;background:#eee;display:flex;align-items:center;justify-content:center;color:#999;font-size:13px}
.ph img{width:100%;height:100%;object-fit:contain;background:#fff}
.ph.small{width:200px}
.info{padding:8px}
.mrp{font-size:20px;font-weight:700;color:#1d5e1d}.mrp small{font-size:12px;color:#666;font-weight:400}
.mrp.big{font-size:30px}
.name{font-size:14px;margin:2px 0}.code{font-size:12px;color:#666}
.card{background:#fff;border-radius:10px;padding:14px;margin:10px 0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card.narrow{max-width:360px}
.card label{display:block;margin:10px 0}
.card label input:not([type=checkbox]),.card select,.card fieldset input{display:block;width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:8px;margin-top:4px}
.card label.check input{width:auto;display:inline}
fieldset{border:1px solid #ddd;border-radius:8px;margin:10px 0}
.help{font-size:14px;line-height:1.6;background:#fbf8f2}
.product{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.product{grid-template-columns:1fr 1fr}}
.bigph{background:#fff;display:flex;align-items:center;justify-content:center;min-height:200px;border:1px solid #eee;border-radius:8px}
.bigph img{max-width:100%;max-height:70vh}
.flash{padding:10px;border-radius:8px;margin:8px 0;background:#e4f3e4}.flash.error{background:#fde3e3}
.companies{list-style:none;padding:0}.companies li{background:#fff;margin:6px 0;padding:10px;border-radius:8px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:#fff;font-size:14px}
th,td{border-bottom:1px solid #eee;padding:6px 8px;text-align:left}
tr.error td{background:#fde3e3}tr.new td{background:#eef6ff}tr.updated td{background:#f2fbef}tr.unmatched td{background:#fff6dc}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.stats div{background:#fff;border-radius:8px;padding:10px 14px;font-size:13px;min-width:110px}
.stats div b{display:block;font-size:24px}.stats .bad{background:#fde3e3}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.sample-tag{background:#b02a2a;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;margin-left:8px;display:inline-block}

/* review page */
.btn.warn{background:#c56a00;color:#fff}
table.review img.thumb{width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid #eee;border-radius:6px}
table.review td.note{font-size:.85em;color:#8a4b00;max-width:280px}
.nowrap{white-space:nowrap}
.pager{margin:12px 0;display:flex;gap:14px;align-items:center}
label.check{display:flex;gap:8px;align-items:center}
label.check input{width:auto}
/* v2: logo, menu, roles, install */
.brand{display:flex;align-items:center;gap:8px}.brand .logo{width:30px;height:30px;border-radius:7px}
.menu-btn{display:none;background:#8a4b14;color:#fff;border:0;border-radius:8px;padding:7px 12px;font-size:15px}
.top nav .who{opacity:.85;font-size:13px}
.install{background:#e8be6e;color:#3b2a18;border:0;border-radius:8px;padding:6px 10px;font-size:14px;cursor:pointer}
.check{display:flex;gap:8px;align-items:center}.check input{width:auto}
.nowrap{white-space:nowrap}
@media (max-width:640px){
  .menu-btn{display:block}
  .top nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 2px 4px;font-size:16px}
  body.menu-open .top nav{display:flex}
}
.staff-list{display:grid;gap:10px;max-width:760px}
.staff-card{background:#fff;border-radius:10px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.staff-card.off{opacity:.65}.staff-card .row1{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.staff-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.staff-actions .btn{padding:7px 12px;font-size:14px}
@media (max-width:640px){.top{flex-wrap:nowrap}.top.menu-wrap{flex-wrap:wrap}.brand span{display:none}}
body.menu-open .top{flex-wrap:wrap}
/* fingerprint */
.passkey-box { text-align: center; }
.btn.big { font-size: 1.1rem; padding: .8rem 1.2rem; width: 100%; max-width: 360px; }
.passkey-box h2 { margin-top: 0; }

/* v1.3 models + price tables */
.item.model { display: flex; flex-direction: column; color: inherit; }
.item.model .name { font-weight: 600; color: inherit; text-decoration: none; display: block; }
table.mini { width: 100%; font-size: .82rem; border-collapse: collapse; margin: .3rem 0; }
table.mini td { padding: 2px 4px; border-top: 1px solid #eee; vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
.more { font-size: .85rem; }
table.prices { width: 100%; border-collapse: collapse; margin-top: 1rem; background: #fff; }
table.prices th, table.prices td { padding: 6px 8px; border-bottom: 1px solid #e5e5e5; text-align: left; }
table.prices th a { color: inherit; }
table.prices tr.hl td { background: #fff6d6; font-weight: 600; }
table.prices tr.rev td:first-child { border-left: 3px solid #e0a100; }
.flag { background: #fde8b0; color: #7a5200; border-radius: 4px; padding: 0 5px; font-size: .75rem; }
.btn.ghost { background: transparent; border: 1px solid currentColor; color: inherit; }
