/* BuilderBuyer+ App. Colors and type from design/tokens.json. */
:root {
  --red: #d02020; --ink: #14181f; --black: #000; --dark: #1a1a1a; --dark-3: #2a2a2a;
  --card-dark: #20262f; --panel: #0b0d11; --bar: #0e1117; --rule: #2a303b; --line-dark: #333;
  --white: #fff; --on-dark-2: #cdcdcd; --on-dark-3: #a9a9a9; --label: #a3a8b3; --muted: #6b6f76;
  --certify: #d6a843; --search: #4792cb; --buy: #d02020; --grow: #1db852; --focus: #2b6cb0;
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tabbar: 84px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--white); font-family: var(--font);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; }
a { color: var(--certify); }
a:hover { color: var(--white); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; }
button { font-family: inherit; }
img { display: block; }
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* Type */
.wordmark { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: var(--white); text-decoration: none; }
.wordmark span { color: var(--red); }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.24em; color: var(--certify); }
.label { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: var(--label); }
.label.gold { color: var(--certify); }

/* Phone screen */
.screen { width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: calc(28px + var(--safe-t)) 20px calc(var(--tabbar) + var(--safe-b) + 16px) 20px; }
.screen.no-tabs { padding-bottom: calc(24px + var(--safe-b)); }
.topline { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.goldrule { height: 1px; background: var(--certify); opacity: 0.6; margin-top: 14px; }

/* Bottom tab bar (phone) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar) + var(--safe-b));
  background: var(--bar); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 2px calc(10px + var(--safe-b)) 2px; }
.tabbar { transition: transform 0.25s ease; }
body.tabs-hidden .tabbar { transform: translateY(100%); }
body.tabs-hidden .askbar { bottom: calc(var(--safe-b) + 8px); }
/* keeps scrolled content from showing under the phone's status bar in the home screen app */
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--safe-t); background: var(--black); z-index: 40; pointer-events: none; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  text-decoration: none; opacity: 0.45; -webkit-tap-highlight-color: transparent; }
.tabbar a[aria-current="page"] { opacity: 1; }
.tabbar img { width: 42px; height: 42px; object-fit: contain; }
.tab-word { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--white); line-height: 1; white-space: nowrap; }
.tabbar a[aria-current="page"] .tab-word { color: var(--tab-color, var(--certify)); }
/* Thin plus before each tab word: same color as the word, but light so the word leads (Jay, November 5, 2026). */
.tab-plus { font-weight: 300; margin-right: 1px; letter-spacing: 0; }
.teamcircle { width: 38px; height: 38px; margin: 2px 0; border-radius: 50%; border: 1.5px solid var(--red);
  display: flex; align-items: center; justify-content: center; }

/* Phone: fixed-height app. Only the screen scrolls; the tabs sit under it in the layout, never floating. */
@media (max-width: 899px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { min-height: 0; }
  #root { height: 100%; height: 100dvh; display: flex; flex-direction: column; }
  #root > .screen { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding-bottom: 16px; }
  #root > .screen.flush { padding-bottom: 0; }
  #root > .screen > * { flex-shrink: 0; }
  #root > .screen.no-tabs { padding-bottom: calc(24px + var(--safe-b)); }
  .tabbar { position: relative; flex: none; transition: margin-bottom 0.25s ease; }
  body.tabs-hidden .tabbar { transform: none; margin-bottom: calc(-1 * (var(--tabbar) + var(--safe-b))); }
}
/* Laptop top bar */
.topbar { display: none; }
@media (min-width: 900px) {
  .tabbar { display: none; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 20; height: 64px; align-items: center; gap: 16px;
    padding: 0 24px; background: var(--bar); border-bottom: 1px solid var(--rule); }
  .topbar nav { display: flex; gap: 4px; margin-left: auto; }
  .topbar nav a { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 14px; text-decoration: none;
    color: var(--white); font-size: 13px; font-weight: 800; letter-spacing: 0.12em;
    border-bottom: 3px solid transparent; opacity: 0.5; }
  .topbar nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--tab-color, var(--certify)); }
  .topbar nav img { width: 32px; height: 32px; object-fit: contain; }
  .topbar .teamcircle { width: 40px; height: 40px; margin: 0 0 0 16px; flex: none; }
  .topbar .teamcircle[aria-current="page"] { background: rgba(208, 32, 32, 0.18); }
  .screen { max-width: none; min-height: calc(100vh - 64px); padding: 36px 48px 48px; }
  .phone-only { display: none !important; }
}
@media (max-width: 899px) { .laptop-only { display: none !important; } }

/* Profile */
.desk-row { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .desk-row { flex-direction: row; justify-content: center; align-items: flex-start; gap: 32px; }
  .desk-row > section { width: 460px; flex: none; }
  .profile-card { background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--certify);
    border-radius: 16px; padding: 24px 28px; }
}
.profile-head { display: flex; flex-direction: column; align-items: center; margin-top: 22px; }
.phead-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.phead-photo { display: flex; flex-direction: column; align-items: center; flex: none; }
/* Photo and seal fill the row on a phone (Jay, November 5, 2026). */
:root { --seal: max(110px, min(calc((100vw - 54px) * 0.53), calc(100dvh - 530px), 220px)); --pic: calc(var(--seal) * 0.89); }
.profile-head .photo { width: var(--pic); height: var(--pic); border-radius: 20px; font-size: 56px; }
.profile-head .photo-edit { border-radius: 18px; }
.profile-head .photo-badge { right: -8px; bottom: -8px; width: 38px; height: 38px; }
.profile-head .seal { margin: 0; width: var(--seal); height: var(--seal); flex: none; }
@media (min-width: 900px) { .profile-head .photo { width: 160px; height: 160px; } .profile-head .seal { width: 180px; height: 180px; } }
.photo { width: 144px; height: 144px; border-radius: 50%; border: 4px solid var(--certify); background: var(--dark-3);
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 900; color: var(--on-dark-3); letter-spacing: -0.02em; }
@media (max-width: 899px) and (max-height: 840px) {
  .profile-head { margin-top: 14px; }
  .step { padding: 6px 2px 6px 16px; }
}
.photo-edit { position: relative; display: block; cursor: pointer; border-radius: 50%; }
.photo-edit:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.photo-badge { position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--certify); border: 3px solid var(--black); display: flex; align-items: center; justify-content: center; }
.photo-msg { margin-top: 8px; min-height: 13px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--on-dark-3); }
.photo-msg:empty { display: none; }
.names { margin-top: 14px; font-size: 40px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; text-align: center; }
.seal { margin-top: 6px; width: 72px; height: 72px; object-fit: contain; }
@media (max-width: 899px) and (max-height: 840px) { .names { font-size: 34px; margin-top: 10px; } }
.steps { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.step { display: flex; align-items: center; gap: 14px; padding: 8px 2px 8px 16px; }
.step + .step { border-top: 1px solid var(--rule); }
.step svg { flex: none; }
.step-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.step-title .label { margin-right: 8px; }
.step-sub { font-size: 13px; color: var(--on-dark-2); margin-top: 2px; }
.learn { display: flex; align-items: center; gap: 12px; margin-top: 8px; height: 56px; padding: 0 12px;
  border-radius: 14px; border: 1.5px solid var(--certify); background: var(--ink); color: var(--white); text-decoration: none; }
.learn:hover { color: var(--white); border-color: var(--white); }
.eq { display: flex; align-items: center; gap: 2px; flex: none; }
.eq img { width: 24px; height: 24px; object-fit: contain; }
.eq img.s { width: 30px; height: 30px; }
.eq span { color: var(--red); font-weight: 900; font-size: 14px; }
.eq span.g { color: var(--certify); }
.learn-t { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--red); }
.learn-s { margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--on-dark-2); }
.grow1 { flex: 1; min-width: 0; }
.spacer { flex: 1; min-height: 16px; }
.qr-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.qr { width: 100px; height: 100px; flex: none; background: var(--white); border-radius: 12px; border: 3px solid var(--certify);
  display: flex; align-items: center; justify-content: center; padding: 5px; }
.qr svg, .qr img { width: 100%; height: 100%; }
.qr.off { background: var(--dark-3); color: var(--on-dark-3); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-align: center; }
.qr-side { flex: 0 1 auto; min-width: 0; min-height: 100px; padding: 2px 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.qr-text { font-size: 13px; line-height: 1.4; color: var(--on-dark-2); max-width: 200px; }
.view-details { display: flex; align-items: center; gap: 6px; min-height: 36px; color: var(--certify); text-decoration: none;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; }
.qr-card { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: 16px; }
.qr-card .qr-text { font-size: 14px; line-height: 1.45; max-width: none; }

/* Contact cards */
.card { margin-top: 8px; background: var(--dark); border: 1px solid var(--line-dark); border-radius: 12px; padding: 0 14px; }
.row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.row.tall { padding: 12px 0; }
.row + .row { border-top: 1px solid var(--line-dark); }
.row .v { margin-top: 3px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.circle-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--red); display: flex;
  align-items: center; justify-content: center; flex: none; background: transparent; }
.circle-btn:hover { background: rgba(208, 32, 32, 0.18); }
.avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; border: none;
  border-radius: 4px; background: var(--red); color: var(--white); font-size: 13px; font-weight: 800; letter-spacing: 0.16em;
  cursor: pointer; text-decoration: none; }
.btn:hover { box-shadow: 0 0 0 3px rgba(208, 32, 32, 0.35); color: var(--white); }
.btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.btn.ghost { background: transparent; border: 1.5px solid var(--white); }
.fineprint { text-align: center; font-size: 11px; line-height: 1.4; color: var(--on-dark-3); }
.back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: flex-start; }

/* Sign-in and messages */
.center-col { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 420px; width: 100%; margin: 0 auto; }
.h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; margin: 14px 0 0; }
.p { font-size: 15px; line-height: 1.5; color: var(--on-dark-2); margin: 12px 0 0; }
.field { margin-top: 22px; }
.field label { display: block; }
.input { margin-top: 8px; width: 100%; height: 52px; border-radius: 4px; border: 1px solid var(--line-dark); background: var(--dark);
  color: var(--white); font-family: inherit; font-size: 16px; padding: 0 14px; }
.input::placeholder { color: var(--muted); }
.msg { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--on-dark-2); }
.msg.err { color: #ff8a8a; }
.box { margin-top: 22px; background: var(--dark); border: 1px solid var(--line-dark); border-radius: 12px; padding: 16px; }
.box ol { margin: 8px 0 0; padding-left: 20px; color: var(--on-dark-2); font-size: 15px; line-height: 1.55; }
.linkbtn { background: none; border: none; color: var(--certify); font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  padding: 12px 0; cursor: pointer; }
/* Your Team */
.team { flex: 1; display: flex; flex-direction: column; }
.team-h1 { margin: 14px 0 8px; font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.team-grid { display: flex; flex-direction: column; gap: 10px; }
.tcard { margin-top: 5px; background: var(--dark); border: 1px solid var(--line-dark); border-top: 3px solid var(--line-dark); border-radius: 12px; padding: 10px 12px; }
.thead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thead .grow1 { min-width: 0; }
.avatar.ph { background: var(--dark-3); border: 2px solid #4a4f58; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--on-dark-3); }
.tname { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsub { margin-top: 1px; font-size: 13px; color: var(--on-dark-2); }
.tfine { margin-top: 1px; font-size: 11px; color: var(--on-dark-3); }
.tfine, .tsub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsave { align-self: flex-start; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 14px; border: 1px solid #4a4f58; background: transparent; color: var(--white); font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; cursor: pointer; }
.tsave:hover { border-color: var(--white); }
.tbtns { display: flex; gap: 8px; margin-top: 9px; }
.tbtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 4px; border: 1.5px solid var(--red); background: transparent; color: var(--white); text-decoration: none; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; cursor: pointer; }
.tbtn:hover { color: var(--white); background: rgba(208, 32, 32, 0.18); }
.tempty { font-size: 13px; line-height: 1.45; color: var(--on-dark-3); }
/* +Share stays pinned at the bottom, just above the tabs. */
#root > .screen.team-screen { padding-bottom: 0; }
.sharebar { margin-top: auto; position: sticky; bottom: 0; z-index: 2; background: var(--black); padding: 10px 0 12px; }
.sharecard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--red); background: #1c0d0f; color: var(--white); font-family: inherit; text-align: left; cursor: pointer; }
.share-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; }
.share-t { display: block; font-size: 17px; font-weight: 900; letter-spacing: 0.02em; }
.share-s { display: block; margin-top: 1px; font-size: 13px; color: var(--on-dark-2); }
.sharefall { display: flex; gap: 8px; margin-top: 8px; }
.sharefall[hidden] { display: none; }
/* Short phone screens (iPhone SE in a browser) */
@media (max-width: 899px) and (max-height: 700px) {
  #root > .screen.team-screen { padding-top: calc(14px + var(--safe-t)); }
  .team-screen .goldrule { margin-top: 10px; }
  .team-h1 { display: none; }
  .team { padding-top: 10px; }
  .team .avatar { width: 40px; height: 40px; }
  .team .tbtn { height: 34px; }
  .team .tbtns { margin-top: 7px; }
  .team-grid { gap: 7px; }
  .team .tcard { padding: 8px 10px; margin-top: 3px; }
  .sharebar { padding: 7px 0 8px; }
  .sharecard { padding: 4px 12px; }
  .share-ic { width: 32px; height: 32px; }
}
@media (min-width: 900px) {
  .team { width: 1080px; max-width: 100%; margin: 0 auto; }
  .team-h1 { margin-top: 6px; }
  .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .sharebar { position: static; margin-top: 24px; max-width: 520px; }
}
/* +BUY */
.buy { display: flex; flex-direction: column; }
.bkicker { margin-top: 16px; letter-spacing: 0.24em; font-size: 12px; }
.bsub { margin-top: 6px; font-size: 13px; color: var(--on-dark-3); }
.bformula { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--on-dark-2); }
.bformula i { font-style: normal; color: var(--red); font-weight: 900; }
.bformula em { font-style: normal; color: var(--certify); font-weight: 900; }
.bformula span { color: var(--certify); }
.btabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.btab { height: 44px; border-radius: 4px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; border: 1px solid #3a404b; background: var(--ink); color: var(--on-dark-2); }
.btab.on { border: none; background: var(--red); color: var(--white); }
.btab.gold.on { background: var(--certify); color: var(--ink); }
.bbody { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.bsec { margin-top: 4px; }
.bnote { display: flex; gap: 10px; align-items: flex-start; background: var(--ink); border: 1px solid var(--certify); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.45; }
.bnote svg { flex: none; }
.btask { display: flex; align-items: center; gap: 12px; background: var(--card-dark); border-radius: 12px; padding: 10px 12px; }
.btask.done .bt-title { color: var(--on-dark-3); }
.bbox { width: 30px; height: 30px; flex: none; border-radius: 8px; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #4a4f58; background: transparent; cursor: pointer; }
.bbox.on { border: none; background: var(--certify); }
.bt-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.bt-who { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--on-dark-3); }
.bt-due { text-align: right; flex: none; }
.bt-date { margin-top: 2px; font-size: 13px; font-weight: 800; }
.bt-due.late .label, .bt-due.late .bt-date { color: var(--red); }
.bcard { background: var(--card-dark); border-radius: 14px; padding: 14px; }
.bcard.red { border-top: 3px solid var(--red); }
.bc-title { margin-top: 4px; font-size: 18px; font-weight: 800; }
.bgrid { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 13px; color: var(--on-dark-2); }
.bgrid b { color: var(--white); }
.bgrid.left { text-align: left; margin-top: 12px; }
.blist { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--on-dark-2); }
.bplus span { color: var(--red); font-weight: 900; margin-right: 6px; }
.broles { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--on-dark-2); }
.broles b { color: var(--white); }
.bnow { margin-top: 6px; font-size: 15px; font-weight: 800; }
.bnext { margin-top: 4px; font-size: 14px; color: var(--on-dark-2); }
.bhint { font-size: 13px; line-height: 1.45; color: var(--on-dark-3); }
.bperson { display: flex; align-items: center; gap: 10px; background: var(--card-dark); border-radius: 12px; padding: 10px 12px; }
.bp-name { margin-top: 2px; font-size: 15px; font-weight: 800; }
.bp-pref { margin-top: 1px; font-size: 12px; color: var(--on-dark-3); }
.bask { width: 100%; height: 44px; margin-top: 12px; box-shadow: none; }
.bempty { font-size: 14px; color: var(--on-dark-3); padding: 6px 2px; }
.bempty.in { padding: 0; }
.bclose { background: var(--card-dark); border-radius: 14px; border: 2px solid var(--certify); border-top-width: 4px; padding: 18px; text-align: center; }
.bcount { margin-top: 6px; font-size: 44px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.bcount.sm { font-size: 32px; }
.bcount-s { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--on-dark-2); }
@media (min-width: 900px) {
  .buy { width: 820px; max-width: 100%; margin: 0 auto; }
  .bhead { border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
  .bkicker { margin-top: 0; }
  .bsub { font-size: 15px; }
  .bformula { font-size: 14px; }
  .btabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
}
/* Admin page (Jay only) */
.adminlink { margin-left: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--on-dark-3); text-decoration: none; border: 1px solid #3a404b; border-radius: 12px; padding: 4px 9px; }
.adminlink.signout { background: transparent; cursor: pointer; font-family: inherit; margin-left: 0; margin-right: 12px; }
.signout-link { margin: 18px auto 0; display: block; color: var(--on-dark-3); }
.adminlink.phone { margin-left: auto; margin-right: 10px; order: 1; }
.topline .label { order: 2; }
#adminroot { min-height: 100vh; min-height: 100dvh; }
@media (max-width: 899px) { #adminroot { height: 100dvh; overflow-y: auto; } }
.admin { min-height: 100%; background: var(--black); }
.ahead { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: calc(12px + var(--safe-t)) 20px 12px; background: var(--bar); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.ahead .label { color: var(--red); }
.alink { background: none; border: none; color: var(--on-dark-2); font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; cursor: pointer; text-decoration: none; padding: 6px 0; }
.alink:hover { color: var(--white); }
.abody { display: flex; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; }
.anav { flex: none; width: 180px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 80px; align-self: flex-start; }
.anav a { color: var(--on-dark-2); text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 10px; border-radius: 6px; }
.anav a:hover { background: var(--ink); color: var(--white); }
.anav .redbtn { margin-top: 10px; height: 42px; box-shadow: none; }
.amain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.amsg { background: #10241a; border: 1px solid var(--grow); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 700; }
.atitle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.atitle h1 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.asearch { margin-left: auto; }
.asearch input, .af input, .af select, .af textarea, .atable input { width: 100%; height: 40px; border-radius: 6px; border: 1px solid #3a404b; background: var(--dark); color: var(--white); padding: 0 10px; font-family: inherit; font-size: 14px; }
.af textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.4; }
.asearch input { width: 260px; }
.atable { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; }
.atable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.atable th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--label); padding: 10px; border-bottom: 1px solid var(--rule); background: var(--ink); }
.atable td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.atable tr:last-child td { border-bottom: none; }
.atable td input { height: 36px; min-width: 120px; }
.asub { margin-top: 2px; font-size: 12px; color: var(--on-dark-3); }
.aoff { color: var(--red); font-weight: 800; }
.achip { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; background: var(--c); color: #000; }
.ghostbtn.sm { height: 34px; padding: 0 12px; font-size: 11px; display: inline-flex; }
.ghostbtn[disabled] { opacity: 0.4; cursor: default; }
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.acard { background: var(--ink); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.acard h3 { margin: 0; }
.acard > .ghostbtn, .acard > button.ghostbtn.sm { align-self: flex-start; }
.asec { margin-top: 8px; }
.afields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--on-dark-3); min-width: 0; }
.af.wide { grid-column: 1 / -1; }
.acheck { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--white); cursor: pointer; }
.acheck input { width: 20px; height: 20px; accent-color: var(--certify); }
.aswitch { margin-top: 6px; }
.aphoto { display: flex; align-items: center; gap: 14px; }
.aphoto-img .photo { width: 88px; height: 88px; border-radius: 14px; font-size: 28px; border-width: 3px; }
.aphoto .alink { margin-left: 10px; }
.abtns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.ap { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-dark-2); }
.ap.small { font-size: 12px; }
.ap.muted { color: var(--on-dark-3); }
.ap a { color: var(--search); overflow-wrap: anywhere; }
.aphases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aphase { position: relative; }
.aphase input { position: absolute; opacity: 0; }
.aphase span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 6px; border: 1px solid #3a404b; font-size: 12px; font-weight: 900; letter-spacing: 0.06em; color: var(--on-dark-2); cursor: pointer; }
.aphase input:checked + span { background: var(--c); border-color: var(--c); color: #000; }
.aphase input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.alist { margin: 0; padding-left: 18px; font-size: 13px; color: var(--on-dark-2); display: flex; flex-direction: column; gap: 4px; }
.arow4 { display: grid; grid-template-columns: 1.2fr 0.6fr 1fr 1.2fr; gap: 8px; align-items: end; }
.arole { grid-column: 1 / -1; margin-top: 4px; }
.acenter { text-align: center; }
.adone { font-size: 11px; font-weight: 900; color: var(--certify); letter-spacing: 0.08em; }
.ax { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3a404b; background: transparent; color: var(--white); cursor: pointer; font-size: 16px; }
.asave { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 12px 0; background: var(--black); border-top: 1px solid var(--rule); }
.asave .redbtn { height: 46px; padding: 0 28px; box-shadow: none; }
@media (max-width: 899px) {
  .abody { flex-direction: column; padding: 16px 14px 40px; gap: 14px; }
  .anav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; }
  .anav .redbtn { margin-top: 0; margin-left: auto; padding: 0 14px; }
  .agrid, .afields { grid-template-columns: minmax(0, 1fr); }
  .arow4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .asearch, .asearch input { width: 100%; margin-left: 0; }
  .aphases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phase hold screens */
.hold { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 420px; width: 100%; margin: 0 auto; padding: 8px 0 24px; }
.hold-icon { width: 144px; height: 144px; object-fit: contain; }
.hold-word { margin-top: 18px; font-size: 44px; font-weight: 900; letter-spacing: 0.01em; line-height: 1; }
.hold-points { margin-top: 18px; font-size: clamp(10px, 3.4vw, 15px); white-space: nowrap; font-weight: 800; color: var(--white); line-height: 1.5; }
.hold-word + .hold-text { margin-top: 18px; }
.hold-text + .hold-text { margin-top: 8px; }
.hold-text { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--on-dark-2); max-width: 320px; }
.hold-text.one-line { max-width: none; white-space: nowrap; font-size: clamp(11px, 3.55vw, 16px); }
.hold-list { margin: 10px 0 0; padding: 0; list-style: none; text-align: left; display: inline-flex; flex-direction: column; gap: 6px; }
.hold-list li { position: relative; padding-left: 18px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--white); }
.hold-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--white)); }
.hold-opens { margin: 18px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-3); }
.phase-word { font-size: 40px; font-weight: 900; letter-spacing: 0.01em; line-height: 1; margin-top: 26px; }
.loading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--on-dark-3); font-size: 13px; letter-spacing: 0.16em; font-weight: 800; }

/* Photo crop */
.crop-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; padding: 24px; }
.crop-box { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-hint { font-size: 14px; color: var(--on-dark-2); text-align: center; }
.crop-view { position: relative; overflow: hidden; border-radius: 12px; background: var(--dark-3); touch-action: none; cursor: grab; }
.crop-view img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,0.55); border: 3px solid var(--certify); pointer-events: none; }
.crop-zoom { width: 100%; accent-color: var(--certify); }

/* ---------- +SEARCH ---------- */
.screen.flush { padding: 0 0 calc(var(--tabbar) + var(--safe-b)) 0; max-width: 560px; }
.search-root { display: flex; flex-direction: column; min-height: 100%; }
.stopline { padding: calc(28px + var(--safe-t)) 20px 0; }
.shead { position: sticky; top: var(--safe-t); z-index: 10; background: var(--black); padding: 12px 12px 10px; border-bottom: 1px solid var(--rule); }
.shead-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stitle { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.scount { font-size: 12px; font-weight: 800; color: var(--search); white-space: nowrap; }
.shead-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--on-dark-3); }
.shead-sub .scope { color: var(--on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stools { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.fbtn { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; border-radius: 18px; border: 1px solid var(--search); background: transparent; color: var(--white); font-size: 13px; font-weight: 800; cursor: pointer; flex: none; }
.fcount { min-width: 18px; height: 18px; border-radius: 9px; background: var(--search); color: #000; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.chip { height: 36px; padding: 0 12px; border-radius: 18px; font-size: 13px; font-weight: 800; cursor: pointer; border: 1px solid #3a404b; background: transparent; color: var(--on-dark-2); flex: none; }
.chip.on { border-color: var(--search); background: var(--search); color: #000; }
.sortwrap { flex: 1; min-width: 0; }
.sortsel { width: 100%; height: 36px; border-radius: 18px; border: 1px solid #3a404b; background: var(--ink); color: var(--white); padding: 0 6px; font-family: inherit; font-size: 12px; font-weight: 700; }
.vgroup { display: flex; border: 1px solid #3a404b; border-radius: 18px; overflow: hidden; flex: none; }
.vbtn { width: 34px; height: 34px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--on-dark-2); }
.vbtn.on { background: var(--search); color: #000; }
.parentchip { margin-top: 8px; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--search); background: #10202e; color: var(--white); font-size: 12px; font-weight: 800; cursor: pointer; }
.sbody { flex: 1; padding: 8px 10px 90px; display: flex; flex-direction: column; gap: 6px; }
.sempty { padding: 40px 16px; text-align: center; font-size: 14px; color: var(--on-dark-3); }
.hcard { background: var(--ink); border-radius: 12px; padding: 8px 10px 10px 12px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--rule); }
.hcard.sel { border-color: var(--red); }
.hrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hrow.base { align-items: baseline; }
.htop { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hplan { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.hplan.sm { font-size: 14px; }
.hspecs { font-size: 13px; color: var(--on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hspecs.sm, .hsub { font-size: 12px; }
.hsub { color: var(--on-dark-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hprice { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; }
.hprice.sm { font-size: 14px; }
.was { font-size: 12px; color: #8a8f99; text-decoration: line-through; }
.was.big { font-size: 13px; }
.off { font-size: 11px; font-weight: 800; color: var(--white); border: 1px solid var(--white); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.hdet { white-space: nowrap; flex: none; height: 32px; padding: 0 2px 0 8px; border: none; background: transparent; color: var(--search); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; cursor: pointer; }
.stagebar { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.stagebar.tall { height: 6px; border-radius: 3px; margin-top: 4px; }
.stagebar > div { height: 100%; background: var(--search); }
.hstage { font-size: 11px; font-weight: 700; color: var(--on-dark-3); white-space: nowrap; }
.star { width: 34px; height: 34px; flex: none; border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #6b7280; }
.star.on { color: var(--certify); }
.selc { width: 30px; height: 30px; flex: none; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid #6b7280; background: transparent; }
.selc.on { border: none; background: var(--red); }
.hlist-wrap { border-top: 1px solid var(--rule); }
.hlist { display: flex; align-items: center; gap: 6px; padding: 8px 4px 8px 6px; border-bottom: 1px solid var(--rule); }
.hlist.sel { background: #1f1214; }
.hlist-main { flex: 1; min-width: 0; text-align: left; border: none; background: transparent; color: var(--white); padding: 0; font-family: inherit; cursor: pointer; }
.more { margin: 8px 0; height: 44px; border-radius: 4px; border: 1px solid #3a404b; background: transparent; color: var(--on-dark-2); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; cursor: pointer; }
.askbar { transition: bottom 0.25s ease; position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabbar) + var(--safe-b) + 8px); z-index: 15; display: flex; gap: 8px; max-width: 540px; margin: 0 auto; }
.redbtn { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px; border: none; border-radius: 4px; background: var(--red); color: var(--white); text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; cursor: pointer; flex: none; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.redbtn:hover, .ghostbtn:hover { color: var(--white); }
.redbtn.tall { height: 50px; font-size: 13px; letter-spacing: 0.14em; }
.redbtn.grow1 { flex: 1; height: 52px; font-size: 13px; }
.ghostbtn { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 14px; border-radius: 4px; border: 1.5px solid var(--white); background: transparent; color: var(--white); text-decoration: none; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; cursor: pointer; }
.ghostbtn.dark { background: var(--black); height: 52px; }
.textbtn { height: 40px; border: none; background: transparent; color: var(--search); font-size: 13px; font-weight: 800; cursor: pointer; }
/* street map */
.sbody.mapmode { padding: 0; gap: 0; }
.mapslot { position: relative; width: 100%; background: #0b0e12; overflow: hidden; }
.mapslot > .streetmap { position: absolute; inset: 0; }
.maploading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; color: var(--on-dark-3); }
.maplibregl-ctrl-group { background: rgba(17,20,24,0.92) !important; border: 1px solid #3a404b; }
.maplibregl-ctrl-group button + button { border-top: 1px solid #3a404b !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.maplibregl-ctrl-attrib { background: rgba(0,0,0,0.6) !important; color: #9aa0a6; font-size: 10px; }
.maplibregl-ctrl-attrib a { color: #c0c4ca; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
.pincard { display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); background: var(--ink); border: 1px solid var(--search); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.pincard .redbtn { height: 40px; box-shadow: none; }
.pc-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-sub { margin-top: 2px; font-size: 12px; color: var(--on-dark-3); }
.pc-sub2 { margin-top: 2px; font-size: 13px; color: var(--on-dark-2); }
.maphint { margin-top: 8px; text-align: center; font-size: 12px; color: var(--on-dark-3); }
/* phone: the community card and hint float just above the tabs so they never hide behind them */
.sbody > .pincard, .sbody > .maphint { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabbar) + var(--safe-b) + 8px); max-width: 540px; margin: 0 auto; z-index: 15; transition: bottom 0.25s ease; }
.sbody > .maphint { background: rgba(17,20,24,0.92); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 12px; }
.sbody:has(~ .askbar) > .pincard, .sbody:has(~ .askbar) > .maphint { bottom: calc(var(--tabbar) + var(--safe-b) + 64px); }
body.tabs-hidden .sbody > .pincard, body.tabs-hidden .sbody > .maphint { bottom: calc(var(--safe-b) + 8px); }
.pincard.col { flex-direction: column; align-items: stretch; gap: 8px; }
.xbtn.sm { width: 32px; height: 32px; font-size: 16px; }
/* search picker in the header */
.smode { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--white); }
.smode-k { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--search); }
.smode-v { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.smode select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.smode select option { background: var(--ink); color: var(--white); font-size: 16px; }
.smode svg { pointer-events: none; flex: none; }
.startover { flex: none; align-self: center; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--search); text-decoration: none; white-space: nowrap; padding: 6px 0 6px 8px; }
.shead-top { align-items: center; }
.shead-sub .scope b { color: var(--search); font-weight: 800; }
/* community and builder cards */
.tag { font-size: 10px; font-weight: 900; letter-spacing: 0.1em; color: #000; background: var(--certify); border-radius: 4px; padding: 2px 6px; white-space: nowrap; flex: none; }
.cbtns { display: flex; gap: 5px; flex-wrap: nowrap; margin-top: 4px; min-width: 0; }
/* One row of buttons on any phone: text and padding shrink with the screen width. */
.minibtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; height: 32px; padding: 0 clamp(6px, 1.8vw, 10px); border-radius: 4px; border: 1px solid #3a404b; background: transparent; color: var(--white); font-family: inherit; font-size: clamp(9px, 2.6vw, 11px); font-weight: 800; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.minibtn.blue { border-color: var(--search); color: var(--search); }
.minibtn.red { border-color: var(--red); background: var(--red); }
.hplan.big { font-size: 18px; white-space: normal; }
.ctys { display: flex; flex-wrap: wrap; gap: 4px; }
.ctys span { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 10px; border: 1px solid var(--rule); color: #5b616b; }
.ctys span.on { border-color: var(--search); color: var(--white); background: #10202e; }
.brows { margin: 2px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.brows dt { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--label); text-transform: uppercase; }
.brows dd { margin: 1px 0 0; font-size: 13px; color: var(--on-dark-2); }
/* start screen */
.hub-body { padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.hubbtn { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 14px 16px; border-radius: 14px; border: 1px solid #2a3a4a; background: var(--ink); color: var(--white); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hubbtn:hover, .hubbtn:active { border-color: var(--search); }
.hub-ic { width: 52px; height: 52px; flex: none; border-radius: 12px; background: #10202e; color: var(--search); display: flex; align-items: center; justify-content: center; }
.hub-t { display: block; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; }
.hub-s { display: block; margin-top: 3px; font-size: 13px; color: var(--on-dark-3); }
.hubbtn > svg { color: var(--search); flex: none; }
.hubnote { position: relative; overflow: hidden; isolation: isolate; margin-top: 4px; padding: 14px 16px 14px; border-radius: 14px; border: 1px solid var(--rule); }
/* Faint SEARCH icon watermark behind the disclaimer (Jay, November 5, 2026). */
.hubnote::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); background: url(/img/icon-search.webp) center / contain no-repeat; filter: grayscale(1); opacity: 0.13; pointer-events: none; }
.hubnote p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--on-dark-2); }
.hubnote p.fine { font-size: 11px; color: var(--on-dark-3); }
.hubnote p.fine a { color: var(--search); text-decoration: none; }
.hubnote .textbtn { padding: 0; }
/* sheets */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.6); display: flex; flex-direction: column; justify-content: flex-end; }
.sheet { background: var(--ink); border-radius: 18px 18px 0 0; border-top: 3px solid var(--search); padding: 16px 16px calc(24px + var(--safe-b)); max-height: 90%; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet-head.top { align-items: flex-start; }
.sheet-title { font-size: 18px; font-weight: 900; }
.xbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3a404b; background: transparent; color: var(--white); font-size: 18px; cursor: pointer; flex: none; }
.areabtn { margin-top: 6px; width: 100%; height: 44px; display: flex; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid #3a404b; background: var(--dark); color: var(--white); padding: 0 10px; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.areabtn.open { border-color: var(--search); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arealist { margin-top: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--search); border-radius: 8px; background: var(--dark); }
.agroup, .acity { width: 100%; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: none; border-bottom: 1px solid var(--rule); color: var(--white); cursor: pointer; text-align: left; }
.agroup { background: var(--card-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
.acity { background: transparent; padding-left: 20px; font-size: 14px; font-weight: 600; }
.acount { color: var(--on-dark-3); font-size: 13px; }
.cbox { width: 20px; height: 20px; flex: none; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #000; border: 2px solid #6b7280; }
.cbox.on { background: var(--search); border: none; }
.flabel { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: var(--label); }
.fsel { height: 44px; border-radius: 8px; border: 1px solid #3a404b; background: var(--dark); color: var(--white); padding: 0 10px; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dplan { margin-top: 4px; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.daddr { margin-top: 2px; font-size: 14px; color: var(--on-dark-2); }
.dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; }
.dgrid > div { background: var(--card-dark); border-radius: 8px; padding: 8px 4px; }
.dgrid b { display: block; font-size: 16px; font-weight: 900; }
.dgrid span { font-size: 11px; color: var(--on-dark-3); }
.dprice { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.dstage { display: flex; justify-content: space-between; font-size: 12px; color: var(--on-dark-3); }
.dbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.dbtns .redbtn { box-shadow: none; }
/* laptop: list and map side by side */
@media (min-width: 900px) {
  .screen.flush { max-width: none; padding: 0; min-height: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); }
  .search-root.laptop { height: 100%; }
  .sdesk { display: flex; height: 100%; min-height: 0; }
  .slist { width: 560px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--rule); position: relative; min-height: 0; }
  .slist .shead { position: static; padding: 16px 16px 12px; }
  .slist .stitle { font-size: 24px; }
  .slist .scount, .slist .shead-sub { font-size: 13px; }
  .slist .stools { gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .slist .sortwrap { flex: none; width: 160px; }
  .sscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 16px 90px; display: flex; flex-direction: column; gap: 8px; }
  .slist .askbar { position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .smap { flex: 1; min-width: 0; position: relative; background: #05070a; }
  .smap .mapslot { position: absolute; inset: 0; }
  .smode-k, .smode-v { font-size: 24px; }
  .hub-body { max-width: 560px; margin: 0 auto; padding: 48px 16px; gap: 14px; }
  .hubbtn { min-height: 96px; }
  .search-root.laptop .hub { height: 100%; overflow-y: auto; }
  .smap .pincard, .smap .maphint { z-index: 5; }
  .smap .maphint { background: rgba(17,20,24,0.92); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 12px; }
  .smap .pincard { position: absolute; left: 24px; bottom: 24px; width: 340px; padding: 12px 14px; margin: 0; }
  .smap .pc-name { font-size: 16px; }
  .smap .maphint { position: absolute; left: 24px; bottom: 24px; font-size: 13px; margin: 0; }
  .overlay { justify-content: center; align-items: center; }
  .sheet { width: 460px; border-radius: 18px; }
}