:root { --bg:#0d1017; --surface:#151a25; --text:#f4f7ff; --muted:#97a2b8; --accent:#4a8cff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
header { position:sticky; top:0; z-index:10; min-height:72px; padding:0 clamp(18px,4vw,72px); display:flex; align-items:center; border-bottom:1px solid #ffffff12; background:#10141eea; backdrop-filter:blur(16px); }
.logo { color:#fff; font-size:24px; font-weight:900; letter-spacing:-1.5px; }.logo i { color:var(--accent); font-style:normal; }
.main-card,.start-card { display:flex; align-items:center; gap:22px; }.main-card { margin-left:clamp(24px,4vw,68px); }.main-card a { color:#c3cad8; font-size:14px; }.main-card a:hover { color:#fff; }.start-card { margin-left:auto; gap:10px; }
.site-search { width:min(34vw,420px); margin-left:clamp(20px,4vw,64px); }.site-search input { width:100%; height:40px; padding:0 15px 0 38px; border:1px solid #ffffff1f; border-radius:10px; outline:0; color:var(--text); background:#0d111b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none' stroke='%2397a2b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 13px center; }.site-search input::placeholder { color:#778198; }.site-search input:focus { border-color:var(--accent); }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.btn { padding:11px 17px; border-radius:10px; background:var(--accent); color:white; font-size:14px; font-weight:700; }.btn.ghost { border:1px solid #ffffff22; background:transparent; color:#dce4f4; }
.google-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid #ffffff22; background:#fff; color:#202124; }.google-btn span { color:#4285f4; font-size:16px; font-weight:900; }
main { padding-bottom:64px; }
.banner-slider { position:relative; width:min(92%,1360px); height:clamp(190px,28vw,420px); margin:32px auto 56px; overflow:hidden; border:1px solid #ffffff14; border-radius:24px; background:var(--surface); box-shadow:0 25px 65px #00000045; }.banner-track,.banner-slide { width:100%; height:100%; }.banner-slide { position:absolute; inset:0; display:block; object-fit:cover; opacity:0; transition:opacity .35s ease; }.banner-slide.is-active { opacity:1; }
.main-banner { width:min(92%,1360px); margin:32px auto 56px; overflow:hidden; border:1px solid #ffffff14; border-radius:24px; background:var(--surface); box-shadow:0 25px 65px #00000045; }.main-banner img { display:block; width:100%; aspect-ratio:3.2 / 1; object-fit:cover; }
.banner-arrow { position:absolute; top:50%; z-index:1; width:46px; height:46px; border:1px solid #ffffff35; border-radius:50%; color:#fff; background:#10151ab8; font-size:34px; cursor:pointer; transform:translateY(-50%); }.banner-arrow:hover { background:var(--accent); }.banner-arrow--prev { left:18px; }.banner-arrow--next { right:18px; }.banner-dots { position:absolute; bottom:17px; left:50%; display:flex; gap:8px; transform:translateX(-50%); }.banner-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#ffffff77; cursor:pointer; }.banner-dot.is-active { width:24px; border-radius:6px; background:white; }
.market-section { width:min(92%,1200px); margin:0 auto 58px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }.eyebrow { margin:0 0 6px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }h1,h2 { margin:0; letter-spacing:-.7px; }h1 { font-size:clamp(25px,3vw,36px); }h2 { font-size:28px; }.text-link { color:#b9c7e7; font-size:14px; font-weight:700; white-space:nowrap; }
.search-empty { padding:22px; border:1px dashed #ffffff27; border-radius:16px; color:var(--muted); text-align:center; }
.categories-grid,.lots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.category-card,.lot-card { border:1px solid #ffffff10; border-radius:18px; background:var(--surface); transition:transform .2s ease,border-color .2s ease; }.category-card { min-height:145px; padding:20px; }.category-card:hover,.lot-card:hover { border-color:#ffffff35; transform:translateY(-4px); }.category-card span,.category-card b,.category-card small { display:block; }.category-card span { margin-bottom:24px; font-size:27px; }.category-card b { margin-bottom:7px; font-size:15px; }.category-card small,.lot-content p { color:var(--muted); font-size:12px; }
.lot-card { overflow:hidden; }.lot-image { display:grid; height:150px; place-items:center; color:white; font-size:28px; font-weight:900; letter-spacing:-1px; }.lot-image.blue { background:linear-gradient(135deg,#3e89db,#182131); }.lot-image.pink { background:linear-gradient(135deg,#b84e81,#211525); }.lot-image.green { background:linear-gradient(135deg,#36a78f,#152a2d); }.lot-image.orange { background:linear-gradient(135deg,#d3893d,#302317); }.lot-content { padding:15px; }.lot-content p { margin:0 0 6px; }.lot-content h3 { min-height:38px; margin:0 0 14px; font-size:14px; line-height:1.35; }.lot-content b { font-size:15px; }
@media(max-width:820px) { .main-card { display:none; }.categories-grid,.lots-grid { grid-template-columns:repeat(2,1fr); }.banner-slider { margin-top:18px; } }@media(max-width:480px) { header { min-height:62px; }.start-card .ghost { display:none; }.btn { padding:9px 12px; }.categories-grid,.lots-grid { gap:10px; }.category-card { min-height:125px; padding:15px; }.lot-image { height:115px; }.section-heading { align-items:start; }.text-link { font-size:12px; }.banner-arrow { width:38px; height:38px; }.banner-arrow--prev { left:9px; }.banner-arrow--next { right:9px; } }
@media(max-width:820px) { header { flex-wrap:wrap; gap:10px; padding-top:11px; padding-bottom:11px; }.site-search { order:3; width:100%; margin-left:0; }.site-search input { height:44px; font-size:16px; }.start-card { gap:14px; }.main-banner { margin-top:18px; } }@media(max-width:480px) { .support-link { display:none; }.user-name { max-width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.start-card { margin-left:auto; }.logo { font-size:22px; } }
.support-link,.user-name { color:#c3cad8; font-size:14px; }.support-link:hover { color:var(--accent); }.logout-form button { border:0; color:#c3cad8; background:transparent; cursor:pointer; font:inherit; font-size:14px; }.logout-form { margin:0; }
.category-card { display:flex; align-items:center; gap:15px; min-height:126px; padding:16px; }.category-card img { width:76px; height:76px; flex:none; border-radius:14px; object-fit:cover; background:#202837; }.categories-grid--page { grid-template-columns:repeat(3,1fr); }.page-main { width:min(92%,1200px); margin:0 auto; padding:54px 0 72px; }.page-heading { margin-bottom:28px; }.empty-state { padding:26px; border:1px dashed #ffffff27; border-radius:16px; color:var(--muted); }.empty-state a { color:var(--accent); }.back-link { display:inline-block; margin-bottom:22px; color:#b9c7e7; }.category-hero { display:flex; gap:28px; align-items:center; padding:25px; border:1px solid #ffffff10; border-radius:22px; background:var(--surface); }.category-hero img { width:180px; height:180px; border-radius:18px; object-fit:cover; }.category-hero p:last-child { color:var(--muted); }.auth-page { display:grid; min-height:calc(100vh - 72px); place-items:center; padding:30px 18px; }.auth-card { width:min(100%,420px); padding:30px; border:1px solid #ffffff12; border-radius:20px; background:var(--surface); box-shadow:0 24px 60px #0000003b; }.auth-card label { display:grid; gap:7px; margin:17px 0; color:#cbd4e7; font-size:14px; }.auth-card input { width:100%; padding:12px; border:1px solid #ffffff22; border-radius:9px; outline:0; color:white; background:#0f1420; }.auth-card input:focus { border-color:var(--accent); }.auth-card ul { margin:5px 0; padding-left:20px; color:#ff9a9a; font-size:12px; }.auth-card p:last-child { color:var(--muted); font-size:14px; }.auth-card p a { color:var(--accent); }.auth-submit { width:100%; border:0; cursor:pointer; }
.category-card[hidden] { display:none !important; }
@media(max-width:600px) { .categories-grid--page { grid-template-columns:1fr; }.category-hero { align-items:flex-start; flex-direction:column; }.category-hero img { width:100%; height:190px; } }
@media(max-width:600px) { .category-hero { display:none; }.lots-section { margin-top:8px; } }
.lots-section { margin-top:46px; }.lots-grid--page { grid-template-columns:repeat(3,1fr); }.lot-photo { width:100%; height:175px; display:block; object-fit:cover; background:#202837; }@media(max-width:820px) { .lots-grid--page { grid-template-columns:repeat(2,1fr); } }@media(max-width:480px) { .lots-grid--page { grid-template-columns:1fr; } }
.lot-card-link { display:block; }.lot-detail { display:grid; grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr); gap:38px; align-items:start; padding:24px; border:1px solid #ffffff10; border-radius:22px; background:var(--surface); }.lot-detail > img { width:100%; aspect-ratio:1/1; border-radius:16px; object-fit:cover; background:#202837; }.lot-description { color:var(--muted); line-height:1.55; }.lot-price { margin-top:28px; font-size:28px; font-weight:800; }.not-for-sale { display:inline-block; margin-top:15px; padding:10px 13px; border-radius:9px; color:#aeb9cf; background:#0f1420; font-size:13px; }.form-errors ul,.auth-card .errorlist { margin:6px 0 0; padding-left:18px; color:#ff9a9a; font-size:12px; }@media(max-width:650px) { .lot-detail { grid-template-columns:1fr; gap:22px; } }.google-login { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin:20px 0 16px; padding:12px; border:1px solid #d7dce5; border-radius:9px; color:#202124; background:#fff; font-size:14px; font-weight:700; }.google-login span { color:#4285f4; font-size:18px; font-weight:900; }.auth-divider { display:flex; align-items:center; gap:12px; margin:16px 0 2px; color:var(--muted); font-size:12px; }.auth-divider::before,.auth-divider::after { width:100%; height:1px; content:""; background:#ffffff18; }

/* Mobile-first adjustments */
@media (max-width: 600px) {
  body { min-width: 0; overflow-x: hidden; }
  header { position:sticky; min-height:auto; padding:12px 16px; gap:12px; }
  .logo { font-size:23px; }
  .site-search { order:3; width:100%; margin:0; }
  .site-search input { height:46px; font-size:16px; border-radius:12px; }
  .start-card { margin-left:auto; gap:12px; }
  .support-link { display:inline-flex; }
  .user-name { max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .logout-form button { padding:8px 0; font-size:14px; }
  .btn { padding:10px 12px; border-radius:9px; font-size:13px; white-space:nowrap; }
  .start-card .ghost { display:inline-flex; }
  .start-card > .btn:not(.ghost) { display:none; }

  main { padding-bottom:36px; }
  .main-banner { width:100%; margin:0; border-right:0; border-left:0; border-radius:0; box-shadow:none; }
  .main-banner img { aspect-ratio:3.2 / 1; min-height:0; object-fit:contain; }
  .market-section, .page-main { width:100%; padding-right:16px; padding-left:16px; }
  .market-section { margin:30px auto 36px; }
  .page-main { padding-top:26px; padding-bottom:42px; }
  .section-heading { margin-bottom:16px; }
  .eyebrow { margin-bottom:4px; font-size:11px; }
  h1 { font-size:25px; line-height:1.13; }
  h2 { font-size:22px; }
  .categories-grid, .lots-grid, .categories-grid--page, .lots-grid--page { grid-template-columns:1fr; gap:10px; }
  .category-card { min-height:88px; gap:12px; padding:12px; border-radius:14px; }
  .category-card img { width:64px; height:64px; border-radius:11px; }
  .category-card b { margin-bottom:5px; font-size:15px; }
  .category-card small { line-height:1.35; }
  .lot-card { border-radius:14px; }
  .lot-photo { height:180px; }
  .lot-content { padding:13px; }
  .lot-content h3 { min-height:0; margin-bottom:10px; }
  .back-link { margin-bottom:16px; padding:7px 0; }
  .category-hero { display:none; }
  .lots-section { margin-top:2px; }
  .empty-state, .search-empty { padding:18px; border-radius:14px; }
  .lot-detail { grid-template-columns:1fr; gap:18px; padding:14px; border-radius:16px; }
  .lot-detail > img { aspect-ratio:4 / 3; border-radius:12px; }
  .lot-detail h1 { font-size:25px; }
  .lot-price { margin-top:20px; font-size:25px; }
  .auth-page { min-height:calc(100vh - 118px); padding:20px 16px 32px; place-items:start center; }
  .auth-card { width:100%; padding:22px 18px; border-radius:16px; box-shadow:none; }
  .auth-card input { min-height:46px; font-size:16px; }
}

@media (min-width: 601px) and (max-width: 820px) {
  .category-card { min-height:104px; }
  .main-banner img { object-fit:cover; }
}