:root { --bg:#101114; --panel:#191a1e; --raised:#22242a; --line:#34363d; --text:#f4f4f1; --muted:#9699a1; --white:#f4f4f0; }
* { box-sizing:border-box; } body { min-width:320px; margin:0; background:var(--bg); color:var(--text); font-family:Manrope,Arial,sans-serif; } button { font:inherit; cursor:pointer; } h1,h2,p { margin:0; }
.app-shell { width:min(100%,660px); min-height:100vh; margin:auto; padding:calc(24px + env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom)); }.topbar,.section-heading,.card-top,.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }.eyebrow { margin:0 0 6px; color:#a4a7ae; font-size:10px; font-weight:800; letter-spacing:.17em; } h1 { font-size:28px; line-height:1.05; letter-spacing:-.055em; } h2 { font-size:20px; line-height:1.2; letter-spacing:-.04em; }
.balance { min-width:95px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#15161a; text-align:right; }.balance span { display:block; color:var(--muted); font-size:10px; }.balance strong { font-size:14px; }.screen[hidden] { display:none; }.draw-panel { margin-top:28px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }.reveal { position:relative; display:flex; min-height:272px; flex-direction:column; align-items:center; justify-content:center; gap:10px; overflow:hidden; padding:19px 10px 15px; border:1px solid #2c2e33; border-radius:11px; background:linear-gradient(150deg,#16171a,#101114); }.reveal #revealTitle { z-index:1; font-size:18px; font-weight:800; }.revealHint { z-index:1; color:var(--muted); font-size:12px; }
.press { position:absolute; z-index:3; top:17px; width:126px; height:42px; border:1px solid #5d6067; border-radius:4px 4px 8px 8px; background:linear-gradient(180deg,#484b50,#24262a); box-shadow:inset 0 1px #7b7e83,0 5px 11px #000a; opacity:0; pointer-events:none; transform:translateY(-76px); }.press::before,.press::after { position:absolute; top:-18px; width:15px; height:32px; border:1px solid #595c62; border-bottom:0; background:#292b30; content:""; }.press::before { left:18px; }.press::after { right:18px; }.press span { position:absolute; right:14px; bottom:-8px; left:14px; height:8px; border:1px solid #797c81; border-radius:2px; background:#d4d4d0; }.reveal.stamping .press { animation:press-strike .82s cubic-bezier(.28,.05,.22,1) forwards; }.reveal.stamping .preview { opacity:.28; transform:translateY(8px) scale(.985); }.reveal.plate-found .press { opacity:0; transform:translateY(-76px); }.reveal.plate-found .preview { opacity:1; transform:translateY(0) scale(1); animation:plate-appear .25s ease-out; }
.plate { position:relative; z-index:1; display:flex; align-items:stretch; justify-content:center; width:min(94%,365px); min-height:79px; overflow:hidden; padding:4px; border:2px solid #0d0e10; border-radius:5px; background:linear-gradient(150deg,#fff 0%,#f4f4f1 55%,#e5e5e1 100%); color:#0c0d0f; box-shadow:0 2px 0 #8f9190,0 9px 18px #0008,inset 0 0 0 1px #fff; font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif; font-weight:700; letter-spacing:.018em; line-height:1; white-space:nowrap; }.plate::before { position:absolute; inset:5px; border:1px solid #d1d1cd; border-radius:2px; content:""; pointer-events:none; }.plate-main { z-index:1; flex:1; display:grid; place-items:center; padding:0 9px 0 14px; font-size:39px; text-shadow:.4px 0 #111; }.plate-region { z-index:1; width:72px; display:grid; grid-template-columns:1fr 13px; grid-template-rows:1fr 14px; align-items:center; padding:4px 5px 3px 8px; border-left:2px solid #151618; text-align:center; }.plate-region strong { grid-row:1 / span 2; font-size:31px; letter-spacing:-.07em; }.plate-region small { align-self:end; font-family:Arial,sans-serif; font-size:8px; font-weight:800; letter-spacing:.05em; }.plate-region i { width:13px; height:9px; align-self:end; border:1px solid #777; background:linear-gradient(to bottom,#fff 0 33%,#1b56ab 33% 66%,#d62b2b 66%); }.plate.russia { aspect-ratio:520 / 112; }.preview { opacity:0; transform:translateY(4px) scale(.97); transition:opacity .12s,transform .12s; }
.decision-actions { z-index:1; width:min(94%,365px); display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }.decision-actions[hidden] { display:none; }.decision-actions button { min-height:42px; padding:7px 8px; border-radius:7px; font-size:12px; font-weight:800; }.keep-button { border:1px solid #5c5f65; background:#292b31; color:var(--text); }.sell-now-button { border:1px solid #dbdbd6; background:#eeeeeb; color:#141518; }.sell-now-button span { display:block; margin-top:2px; font-size:13px; }.rarity-help { z-index:1; width:min(94%,365px); margin-top:2px; color:var(--muted); font-size:11px; text-align:left; }.rarity-help summary { display:flex; align-items:center; justify-content:center; gap:5px; padding:6px; list-style:none; cursor:pointer; }.rarity-help summary::-webkit-details-marker { display:none; }.rarity-help summary svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; }.rarity-list { display:grid; gap:5px; padding:9px 11px; border:1px solid #34363b; border-radius:7px; background:#1b1d21; line-height:1.35; }.rarity-list p { margin:0; }.rarity-list strong { color:#ecece8; }.primary-button { width:100%; margin-top:12px; padding:14px; border:1px solid #d5d5d0; border-radius:8px; background:#ededeb; color:#131417; font-size:14px; font-weight:850; transition:transform .15s,opacity .15s; }.primary-button:active { transform:scale(.985); }.primary-button:disabled { opacity:.5; cursor:wait; }.primary-button span { margin-left:5px; font-size:18px; }
.collection-section,.garage-screen,.profile-screen { margin-top:28px; }.section-heading { margin-bottom:13px; }.section-heading span { color:var(--muted); font-size:13px; }.collection { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }.empty { grid-column:1/-1; padding:28px; border:1px dashed #3b3d42; border-radius:12px; color:var(--muted); text-align:center; line-height:1.5; }.plate-card { padding:13px; border:1px solid #303238; border-radius:12px; background:var(--panel); animation:appear .3s ease both; }.card-top { margin-bottom:12px; font-size:13px; }.country,.seller { color:var(--muted); }.rarity { padding:4px 7px; border:1px solid #3a3c41; border-radius:5px; background:#23252a; font-size:10px; font-weight:750; }.plate-card .plate { width:100%; min-height:55px; }.plate-card .plate-main { padding-left:9px; font-size:28px; }.plate-card .plate-region { width:55px; padding:3px 3px 2px 5px; grid-template-columns:1fr 10px; grid-template-rows:1fr 11px; }.plate-card .plate-region strong { font-size:23px; }.plate-card .plate-region small { font-size:6px; }.plate-card .plate-region i { width:10px; height:7px; }.card-bottom { margin-top:13px; }.price { color:#f0f0ed; font-size:15px; }.card-actions { display:flex; gap:6px; }.sell,.list-on-market { padding:7px 9px; border:1px solid #4b4e54; border-radius:6px; background:transparent; color:var(--text); font-size:11px; }.list-on-market { border-color:#73767b; }.listing-form { display:grid; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid #34363b; }.listing-form[hidden] { display:none; }.listing-form label { display:grid; gap:5px; color:var(--muted); font-size:11px; }.listing-form input { width:100%; padding:9px; border:1px solid #575a60; border-radius:6px; outline:0; background:#121316; color:var(--text); font:inherit; }.listing-form input:focus { border-color:#deded9; }.listing-form div { display:flex; gap:7px; }.listing-form button,.buy,.cancel-market-listing { flex:1; padding:8px; border:1px solid #dadad5; border-radius:6px; background:#ededeb; color:#151619; font-size:11px; font-weight:800; }.listing-form .cancel-listing,.cancel-market-listing { border-color:#4b4e54; background:transparent; color:var(--text); }.listing-error { min-height:15px; color:#e7b1ad; font-size:10px; }.market-bottom { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:13px; }.market-bottom div span { display:block; color:var(--muted); font-size:10px; }.market-bottom strong { display:block; margin-top:2px; font-size:16px; }.market-bottom button { flex:0 0 auto; }.market-bottom .cancel-market-listing { border-color:#686b70; }
.market-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; margin-bottom:9px; border:1px solid #34363b; border-radius:9px; background:#15161a; }.market-tab { padding:9px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:12px; font-weight:800; }.market-tab.is-active { background:#2b2d32; color:var(--text); }.market-filters { display:grid; gap:7px; margin-bottom:13px; }.market-search { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #4a4d53; border-radius:8px; background:#16171a; color:var(--muted); }.market-search svg { width:17px; height:17px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; }.market-search input { width:100%; min-width:0; padding:11px 0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:12px; }.market-search input::placeholder { color:#73767d; }.filter-row,.price-filter { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.filter-row select,.price-filter input { width:100%; min-width:0; padding:9px; border:1px solid #45484e; border-radius:7px; outline:0; background:#1b1d21; color:var(--text); font:inherit; font-size:11px; }.price-filter { grid-template-columns:1fr 1fr auto; }.price-filter label { display:flex; align-items:center; gap:5px; padding:0 8px; border:1px solid #45484e; border-radius:7px; background:#1b1d21; color:var(--muted); font-size:10px; }.price-filter input { padding:9px 0; border:0; background:transparent; }.price-filter button { padding:0 10px; border:1px solid #50535a; border-radius:7px; background:transparent; color:var(--muted); font-size:10px; font-weight:800; }
.garage-screen,.profile-screen { padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }.garage-machine { display:grid; place-items:center; height:180px; margin:15px 0 18px; border:1px solid #303238; border-radius:10px; background:linear-gradient(150deg,#15161a,#202227); }.garage-press { position:relative; width:126px; height:57px; border:1px solid #656870; border-radius:6px; background:linear-gradient(#45484e,#23252a); box-shadow:inset 0 1px #7c7f85,0 6px 9px #0007; }.garage-press::before,.garage-press::after { position:absolute; top:-35px; width:18px; height:35px; border:1px solid #5b5e65; border-bottom:0; background:#27292e; content:""; }.garage-press::before { left:16px; }.garage-press::after { right:16px; }.garage-press span { position:absolute; right:13px; bottom:-11px; left:13px; height:11px; border:1px solid #777a80; background:#c7c8c6; }.machine-base { width:210px; height:22px; margin-top:-37px; border:1px solid #4b4e53; border-radius:4px; background:#2a2c30; }.garage-screen > p:not(.eyebrow),.profile-card p { margin-top:8px; color:var(--muted); font-size:13px; line-height:1.55; }.coming-card { display:flex; align-items:center; justify-content:space-between; margin-top:21px; padding:13px; border:1px solid #35373c; border-radius:9px; background:#202227; font-size:13px; }.coming-card strong { color:#bfc1c5; }.profile-card { display:flex; align-items:center; gap:13px; margin-top:16px; padding:15px; border:1px solid #34363b; border-radius:11px; background:#202227; }.profile-initial { display:grid; width:43px; height:43px; place-items:center; border:1px solid #65686e; border-radius:50%; background:#141518; font-family:"Roboto Condensed",sans-serif; font-size:20px; font-weight:700; }.profile-card p { margin-top:4px; }.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }.profile-stats div { padding:14px; border:1px solid #34363b; border-radius:10px; background:#202227; }.profile-stats span { display:block; color:var(--muted); font-size:11px; }.profile-stats strong { display:block; margin-top:4px; font-size:18px; }
.bottom-nav { position:fixed; z-index:10; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(5,1fr); max-width:660px; margin:auto; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #303238; background:rgba(20,21,24,.96); backdrop-filter:blur(14px); }.nav-item { display:flex; min-height:52px; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-radius:8px; background:transparent; color:#858890; font-size:9px; font-weight:700; }.nav-item svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.nav-item.is-active { background:#292b30; color:#f3f3f0; }
@keyframes press-strike { 0% { opacity:0; transform:translateY(-76px); } 8% { opacity:1; } 50% { opacity:1; transform:translateY(90px); } 62% { opacity:1; transform:translateY(82px); } 100% { opacity:0; transform:translateY(-76px); } } @keyframes plate-appear { from { opacity:.35; transform:translateY(7px) scale(.985); } } @keyframes appear { from { opacity:0; transform:translateY(8px); } } @media (max-width:390px) { .app-shell { padding-inline:13px; }.draw-panel { padding:11px; }.plate-main { font-size:34px; }.plate-region { width:65px; }.plate-region strong { font-size:28px; }.reveal { min-height:264px; } }