@font-face { font-family:Onest; src:url('fonts/onest-variable.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
:root { font-family:Onest,Arial,sans-serif; color:#062a18; background:#faf8f4; color-scheme:light; --paper:#faf8f4; --ink:#062a18; --green:#008b24; --muted:#747975; --border:#dedfdb; }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; -webkit-font-smoothing:antialiased; }
button,input,a { font:inherit; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:wait; opacity:.55; }
a { color:inherit; text-decoration:none; }
button,input { border:0; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.home { max-width:1180px; margin:auto; padding:18px 18px max(32px,env(safe-area-inset-bottom)); }
.catalog-search-form { display:flex; align-items:center; gap:10px; margin-top:0; }
.catalog-search-field { display:flex; align-items:center; min-width:0; flex:1; height:46px; padding:0 12px; background:#fff; border:1px solid var(--border); border-radius:11px; }
.catalog-search-field>img { width:22px; height:22px; opacity:.6; flex:none; }
.catalog-search-field:focus-within { border-color:var(--green); outline:2px solid #008b241a; }
.catalog-search-field input { min-width:0; flex:1; width:100%; height:100%; padding:0 9px; font-size:14px; color:var(--ink); background:transparent; outline:none; }
.catalog-search-field input::placeholder { color:#747975; opacity:1; }
.catalog-search-field input::-webkit-search-cancel-button { -webkit-appearance:none; }
.clear-search { display:grid; place-items:center; width:24px; height:32px; padding:0; background:transparent; flex:none; }
.clear-search img { width:16px; height:16px; }
.scan-button { display:grid; place-items:center; width:46px; height:46px; padding:0; flex:none; border-radius:11px; background:#063d1d; }
.scan-button img { width:25px; height:25px; filter:brightness(0) invert(1); }
.scan-button:hover { background:#09502a; }
.catalog-filters { display:flex; gap:6px; margin:10px -2px 0; padding:2px; overflow-x:auto; scrollbar-width:none; }
.catalog-filters::-webkit-scrollbar { display:none; }
.catalog-filters button { min-height:34px; padding:6px 17px; white-space:nowrap; border:1px solid var(--border); border-radius:12px; background:transparent; font-size:13px; font-weight:500; }
.catalog-filters button[aria-pressed=true] { color:#fff; background:var(--green); border-color:var(--green); }
.catalog-filters button:hover:not([aria-pressed=true]) { background:#edf3ed; }
.catalog-heading { display:flex; align-items:baseline; gap:10px; margin:14px 0 8px; }
.catalog-heading h1 { font-size:24px; line-height:28px; letter-spacing:-.65px; font-weight:750; margin:0; }
.catalog-heading span { color:var(--muted); font-size:16px; font-weight:400; }
.model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; margin:0; list-style:none; }
.model-card { min-width:0; }
.model-card a { display:block; height:100%; overflow:hidden; border-radius:12px; background:#ffffff55; }
.model-card a:hover .model-card-name { color:var(--green); }
.model-card a:focus-visible { outline-offset:3px; }
.model-card-picture { position:relative; aspect-ratio:1.08; overflow:hidden; border-radius:12px; background:#f0eee9; }
.model-card-image { display:block; width:100%; height:100%; object-fit:cover; }
.model-card-badge { position:absolute; top:8px; right:8px; display:flex; align-items:center; gap:4px; padding:5px 6px; background:#ffffffed; border-radius:9px; color:#10251a; font-size:10px; line-height:13px; }
.model-card-badge img { width:13px; height:13px; }
.model-card-copy { padding:5px 8px 10px; }
.model-card-name { display:block; margin:0; font-size:14px; line-height:19px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-card-meta { display:block; margin:1px 0 0; font-size:11px; line-height:16px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.model-card-fallback { height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--muted); font-size:12px; background:#eeede8; }
.model-card-fallback img { width:44px; height:44px; opacity:.5; }
.catalog-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.catalog-footer p { margin:0; font-size:12px; line-height:18px; color:var(--muted); }
.secondary-button { min-height:40px; padding:10px 18px; border:1px solid var(--border); border-radius:12px; background:transparent; color:var(--green); font-size:13px; font-weight:550; }
.secondary-button:hover { background:#edf3ed; }
.catalog-status { color:var(--muted); font-size:14px; line-height:22px; max-width:440px; }
.catalog-empty { padding:42px 12px; text-align:center; }
.catalog-empty>img { width:36px; height:36px; opacity:.45; }
.catalog-empty h2 { margin:14px 0 7px; font-size:19px; }
.catalog-empty p { margin:0 auto 20px; max-width:300px; font-size:14px; line-height:21px; color:var(--muted); }
.qr-dialog { width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:26px; border:1px solid var(--border); border-radius:20px; color:var(--ink); background:var(--paper); }
.qr-dialog::backdrop { background:#10221966; }
.qr-dialog h2 { margin:6px 36px 7px 0; font-size:24px; line-height:30px; letter-spacing:-.5px; }
.qr-dialog .dialog-intro { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:21px; }
.dialog-close { position:absolute; right:14px; top:14px; display:grid; place-items:center; width:36px; height:36px; padding:8px; border-radius:50%; background:#eeede8; }
.dialog-close img { width:20px; height:20px; }
.qr-preview { position:relative; height:230px; overflow:hidden; border-radius:12px; background:#18251c; }
#qr-video { width:100%; height:100%; object-fit:cover; display:block; }
.qr-frame { position:absolute; inset:22px; border:2px solid #ffffffb3; border-radius:16px; pointer-events:none; }
#qr-status { font-size:13px; line-height:20px; }
.primary-button,.qr-photo-button { display:block; width:100%; min-height:46px; border-radius:12px; padding:12px; font-size:14px; }
.primary-button { background:#063d1d; color:#fff; }
.qr-photo-button { margin-top:8px; border:1px solid var(--border); background:#fff; }
#qr-result { border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }
#qr-result p { font-size:14px; line-height:21px; }
@media(min-width:600px) {
  .home { padding:38px 32px 48px; }
  .catalog-search-form { max-width:640px; }
  .catalog-search-field,.scan-button { height:52px; }
  .scan-button { width:52px; }
  .catalog-search-field input { font-size:16px; }
  .catalog-filters { margin-top:16px; gap:8px; }
  .catalog-filters button { font-size:14px; min-height:38px; padding-inline:20px; }
  .catalog-heading { margin-top:28px; margin-bottom:16px; }
  .catalog-heading h1 { font-size:28px; }
  .model-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .model-card-copy { padding:10px 10px 14px; }
  .model-card-name { font-size:17px; line-height:23px; }
  .model-card-meta { font-size:13px; line-height:20px; }
  .model-card-badge { font-size:12px; padding:6px 8px; }
  .model-card-badge img { width:16px; height:16px; }
  .catalog-footer p { font-size:14px; }
}
@media(min-width:1000px) { .model-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(prefers-reduced-motion:no-preference) { .model-card-image { transition:transform .2s ease; } .model-card a:hover .model-card-image { transform:scale(1.025); } }
.model-card-image--incoming { position:absolute; inset:0; }