:root{--bg:#090909;--panel:#111111;--panel2:#171717;--text:#f2eee7;--muted:#9b968d;--gold:#b98a45;--gold2:#d2ad73;--line:#282828;--danger:#b94d4d}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
.app{min-height:100vh;background:var(--bg)}
button,input{font:inherit}
.top{position:sticky;top:0;z-index:5;background:rgba(9,9,9,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:16px 18px}
.brand{font-weight:900;letter-spacing:.14em;font-size:21px}
.brand span{color:var(--gold2)}
.tag{font-size:10px;letter-spacing:.18em;color:var(--muted);margin-top:3px}
.content{padding:18px 16px 92px}
.hero{padding:22px 4px 16px}
.eyebrow{color:var(--gold2);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.hero h1{font-size:34px;line-height:1.02;margin:8px 0}
.hero p{color:var(--muted);margin:0;line-height:1.5;max-width:520px}
.search{display:flex;gap:9px;margin:16px 0}
.search input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:13px 14px;outline:none}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:12px 15px;border-radius:13px;cursor:pointer}
.btn.gold{background:var(--gold);color:#0b0b0b;border-color:var(--gold);font-weight:800}
.chips{display:flex;gap:8px;overflow:auto;padding-bottom:5px}
.chip{white-space:nowrap;border:1px solid var(--line);background:var(--panel);color:#d8d2c8;border-radius:999px;padding:9px 12px;font-size:12px;cursor:pointer}
.chip.active{border-color:var(--gold);color:var(--gold2)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:22px 0 12px}
.section-head h2{font-size:18px;margin:0}
.muted{color:var(--muted);font-size:12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer}
.pic{position:relative;aspect-ratio:1/1;background:linear-gradient(145deg,#252525,#101010);display:flex;align-items:center;justify-content:center;font-size:48px}
.want-btn{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(10,10,10,.65);color:#d8d2c8;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.want-btn.active{color:var(--gold2);border-color:var(--gold)}
.card-body{padding:11px}
.card-title{font-weight:750;font-size:14px}
.meta{color:var(--muted);font-size:11px;margin-top:5px}
.price{font-weight:850;color:var(--gold2);margin-top:9px}
.bottom{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;background:rgba(12,12,12,.97);border-top:1px solid var(--line);z-index:10}
.bottom-inner{width:100%;max-width:640px;display:grid;grid-template-columns:repeat(5,1fr);padding:9px 8px calc(9px + env(safe-area-inset-bottom))}
.nav{background:none;border:0;color:var(--muted);font-size:10px;padding:5px 2px;cursor:pointer}
.nav strong{display:block;font-size:18px;margin-bottom:3px}
.nav.active{color:var(--gold2)}
.screen-title{font-size:26px;margin:8px 0 6px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:15px;margin-top:12px}
.listing{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.listing:last-child{border-bottom:0}
.thumb{width:74px;height:74px;border-radius:14px;background:linear-gradient(145deg,#252525,#111);display:flex;align-items:center;justify-content:center;font-size:30px;flex:none}
.listing h3{margin:0 0 4px;font-size:14px}
.detail .bigpic{height:320px;border-radius:20px;background:linear-gradient(145deg,#292929,#0e0e0e);display:flex;align-items:center;justify-content:center;font-size:92px}
.detail h1{font-size:25px;margin:16px 0 5px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}
.kv div{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:11px}
.kv b{display:block;font-size:10px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em}
.empty{padding:35px 10px;text-align:center;color:var(--muted)}
.profile-head{display:flex;gap:14px;align-items:center}
.avatar{width:66px;height:66px;border-radius:50%;background:#222;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--gold2)}
.rating{color:var(--gold2);font-size:13px}
.notice{font-size:11px;color:var(--muted);line-height:1.5;margin-top:18px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:flex-end;justify-content:center;z-index:30}
.sheet{width:min(520px,100%);background:#121212;border:1px solid var(--line);border-radius:24px 24px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
.sheet h2{margin:0 0 8px}
.sheet p{color:var(--muted);line-height:1.5}
.actions{display:flex;gap:9px;margin-top:18px}
.actions>*{flex:1}
.hidden{display:none!important}

.header-logo{display:block;width:148px;height:96px;object-fit:contain;object-position:center;margin:-8px auto -5px}
.welcome{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:28px 22px 36px;text-align:center}
.welcome-logo{width:min(100%,430px);margin:0 auto 18px;display:block;filter:drop-shadow(0 12px 35px rgba(185,138,69,.12))}
.welcome-copy{max-width:430px;margin:0 auto}
.welcome h1{font-size:30px;line-height:1.05;margin:8px 0}
.welcome p{color:var(--muted);line-height:1.5;margin:0}
.enter{width:100%;margin-top:20px;min-height:52px;font-size:15px;letter-spacing:.04em}
.welcome .notice{margin-top:16px}
.welcome-app{max-width:560px;margin:0 auto}

/* Tablet: widen content and the offer grid, keep the same bottom nav. */
@media(min-width:700px){
  .top{padding:18px 32px}
  .content{padding:28px 32px 100px;max-width:920px;margin:0 auto}
  .grid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:40px}
}

/* Desktop: full-width web layout instead of a centered phone card. */
@media(min-width:1000px){
  .top{padding:20px 40px}
  .content{padding:32px 40px 110px;max-width:1180px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .hero h1{font-size:46px}
  .bottom-inner{max-width:760px}
}

@media(min-width:1400px){
  .content{max-width:1360px}
  .grid{grid-template-columns:repeat(5,1fr)}
}