:root {
  --bg: #F5F7FA;
  --bg-elev: #FFFFFF;
  --card: #FFFFFF;
  --ink: #0F1E33;
  --muted: #5B6B80;
  --line: rgba(15,30,51,.12);
  --brand: #12355B;
  --brand-dim: #0B2440;
  --teal: #0E7C86;
  --accent: #F2A33A;
  --ok: #0E7C86;
  --pass: #64748B;
  --save: #0E7C86;
  --super: #F2A33A;
  --radius: 16px;
  --tab: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
#app {
  min-height: 100dvh;
  padding-top: var(--safe-t);
  padding-bottom: calc(var(--tab) + var(--safe-b));
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}

/* Top bar — dating app minimal */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1rem .35rem;
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.03em; font-size: 1.15rem; }
.logo {
  width: 28px; height: 28px; border-radius: 8px; background: var(--brand);
  display: grid; place-items: center; font-size: .65rem; font-weight: 900; color: #fff;
}
.linkish { border: 0; background: 0; color: var(--brand); font-weight: 700; font-size: .88rem; cursor: pointer; padding: .25rem; }

.view { display: none; padding: 0 0 1rem; }
.view.active { display: block; }
.view-title {
  margin: 0; padding: .25rem 1rem .75rem;
  font-size: 1.65rem; font-weight: 800; letter-spacing: -.04em;
}

/* Mad-libs — prompt style, not marketing hero */
.madlibs {
  padding: 1.25rem 1.25rem .5rem;
}
.mad-line {
  margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.25;
}
.blank {
  display: inline; border: 0; border-bottom: 3px solid var(--brand);
  background: transparent; color: var(--brand); font-size: 1.55rem; font-weight: 800;
  padding: 0 .1rem; letter-spacing: -.035em; cursor: pointer;
}
.blank:active { opacity: .7; }
.slim-field { display: block; margin: 1.1rem 0 .85rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.slim-field input, #job-custom, .auth-form input, #rq-msg, #su-abn, #su-name, #su-email, #su-password, #su-phone, #su-licence, #su-suburb, #su-licence-state {
  width: 100%; margin-top: .35rem; border: 1px solid var(--line); border-radius: 14px;
  padding: .85rem 1rem; background: var(--bg-elev); color: var(--ink); outline: none;
}
.slim-field input:focus, .auth-form input:focus { border-color: var(--brand); }
.btn {
  border: 0; border-radius: 999px; padding: .85rem 1.2rem; font-weight: 800; font-size: .95rem;
  cursor: pointer; letter-spacing: -.01em;
}
.btn.primary { background: var(--brand); color: #fff; }
.btn.block { width: 100%; display: block; }
.btn:disabled { opacity: .35; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); }

/* Category rail — compact pills, no emoji overload */
.cats {
  display: flex; gap: .4rem; overflow-x: auto; padding: .35rem 1rem 1rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto; scroll-snap-align: start;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink);
  border-radius: 999px; padding: .45rem .75rem; cursor: pointer;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.cat .ico { display: none; }
.cat .lbl { font-size: .78rem; font-weight: 700; }
.cat.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Deck */
.deck-panel { padding: 0 .4rem; }
.filters-slim { padding: 0 .1rem .3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.filters-slim .count { margin: 0; margin-left: auto; }
.lic-note { display: none; }
#btn-filters, #btn-map {
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink);
  border-radius: 999px; padding: .35rem .7rem; font-size: .72rem; font-weight: 800; cursor: pointer;
}
.swipe-controls { margin-top: .7rem; padding-bottom: .1rem; }

.seg {
  display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-elev); gap: 2px; border: 1px solid var(--line);
}
.seg button {
  border: 0; background: 0; border-radius: 999px; padding: .4rem .75rem;
  font-size: .75rem; font-weight: 700; color: var(--muted); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.tog-row {
  display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0 .25rem;
}
.tog-row label {
  font-size: .68rem; font-weight: 700; color: var(--muted);
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px;
  padding: .35rem .55rem; display: inline-flex; align-items: center; gap: .3rem;
}
.tog-row input { accent-color: var(--brand); }
.count { margin: .25rem 0 0; font-size: .72rem; font-weight: 700; color: var(--muted); }

.swipe-stack {
  position: relative;
  height: min(560px, calc(100dvh - 210px - var(--safe-b) - var(--safe-t)));
  touch-action: none; user-select: none;
  margin: 0 auto;
}
body.mode-deck #cats,
body.mode-deck #cat-scroller,
body.mode-deck .cats { display: none !important; }
.deck-panel.is-swiping .filters-slim .tog-row,
.deck-panel.is-swiping .filters-slim .seg { display: none; }

.swipe-card {
  position: absolute; inset: 0;
  border-radius: 18px; overflow: hidden;
  background: #E8EEF4;
  box-shadow: 0 10px 30px rgba(15,30,51,.18);
  touch-action: none; cursor: grab;
  will-change: transform;
}
.swipe-card.is-behind { pointer-events: none; }
.swipe-card.is-top { z-index: 5; }
.swipe-card.is-dragging { cursor: grabbing; z-index: 8; }
.swipe-card.is-flipped .card-front { display: none; }
.swipe-card.is-flipped .card-back { display: flex; }

.card-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.card-media {
  background-color: #E8EEF4;
  background-repeat: repeat;
}
.card-media.pattern {
  background-size: 160px 160px;
}

.card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4.5rem 1.1rem 1.15rem;
  background: linear-gradient(to top, rgba(11,36,64,.94) 0%, rgba(11,36,64,.6) 55%, transparent 100%); color:#fff;
  display: flex; flex-direction: column; gap: .35rem;
  z-index: 2;
}
.card-overlay .name {
  margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1;
  text-shadow: 0 2px 12px rgba(15,30,51,.15);
}
.card-overlay .sub {
  margin: 0; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.85);
}
.card-overlay .badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.badge {
  font-size: .65rem; font-weight: 800; padding: .22rem .45rem; border-radius: 6px;
  background: rgba(255,255,255,.16); color: #fff; backdrop-filter: none;
  letter-spacing: .01em; text-transform: uppercase;
}
.badge.ok { background: rgba(14,124,134,.95); color: #fff; }
.badge.pending { background: rgba(242,163,58,.95); color: #2a1c00; }
.badge.vetted { background: #fff; color: #111; }
.badge.muted { background: rgba(255,255,255,.12); }

.card-face.card-back {
  display: none; position: absolute; inset: 0; z-index: 3;
  flex-direction: column; gap: .45rem; padding: 1.15rem;
  background: var(--card); overflow: auto;
}
.card-back .title { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.card-back .meta { margin: 0; color: var(--muted); font-size: .88rem; font-weight: 500; }
.card-back .work-gallery { display: flex; gap: .4rem; overflow-x: auto; margin: .4rem 0; }
.card-back .work-gallery img {
  width: 110px; height: 84px; object-fit: cover; border-radius: 10px; flex: 0 0 auto;
}
.call {
  display: inline-block; margin-top: .35rem; text-decoration: none; font-weight: 800;
  color: #fff; background: var(--brand); padding: .55rem 1rem; border-radius: 999px; font-size: .85rem;
}
.call.off { opacity: .4; pointer-events: none; }

/* Stamps — Tinder style */
.stamp {
  position: absolute; top: 28px; z-index: 6;
  padding: .15rem .55rem;
  border: 4px solid; border-radius: 8px;
  font-weight: 900; font-size: 1.55rem; letter-spacing: .06em;
  opacity: calc(var(--stamp, 0) * .95); pointer-events: none;
  text-transform: uppercase;
}
.stamp-save { left: 18px; color: var(--save); border-color: var(--save); transform: rotate(-18deg); }
.stamp-pass { right: 18px; color: var(--pass); border-color: var(--pass); transform: rotate(18deg); }
.swipe-card:not(.lean-right) .stamp-save,
.swipe-card:not(.lean-left) .stamp-pass { opacity: 0; }

/* Big round controls */
.swipe-controls {
  display: flex; justify-content: center; align-items: center; gap: 1.1rem;
  margin-top: .85rem; padding-bottom: .25rem;
}
.ctrl {
  width: 56px; height: 56px; border-radius: 999px; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-elev); color: var(--ink);
  box-shadow: 0 4px 14px rgba(15,30,51,.14);
  transition: transform .12s ease;
}
.ctrl:active { transform: scale(.92); }
.ctrl svg { width: 26px; height: 26px; }
.ctrl.pass { width: 64px; height: 64px; color: var(--pass); border: 1px solid rgba(100,116,139,.35); }
.ctrl.save { width: 64px; height: 64px; color: var(--save); border: 1px solid rgba(14,124,134,.4); }
.ctrl.super { width: 48px; height: 48px; color: var(--super); }
.ctrl.undo { width: 42px; height: 42px; color: var(--muted); }
.ctrl:disabled { opacity: .3; }

.empty-deck, .deck-end {
  text-align: center; padding: 2.5rem 1.25rem; color: var(--muted); font-weight: 600;
}
.deck-end {
  position: absolute; inset: 0; display: grid; place-content: center;
  background: var(--card); border-radius: 18px; border: 1px dashed var(--line);
}

/* Lists */
.list { display: grid; gap: .55rem; padding: 0 1rem; margin-bottom: 1rem; }
.row {
  display: flex; gap: .7rem; align-items: center;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: .85rem;
}
.row .grow { flex: 1; min-width: 0; }
.row strong { display: block; font-size: .98rem; font-weight: 800; letter-spacing: -.02em; }
.row small { color: var(--muted); font-size: .75rem; font-weight: 600; }
.card-slim {
  margin: 0 1rem; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.1rem;
}
.card-slim p { margin: .4rem 0; color: var(--muted); font-size: .9rem; }
.err { color: var(--brand); font-size: .85rem; font-weight: 700; }
.hint { font-size: .78rem; color: var(--muted); font-weight: 500; }

/* Native tab bar */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; z-index: 40; width: min(480px, 100%);
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: calc(var(--tab) + var(--safe-b));
  padding: .2rem 0 var(--safe-b);
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(8px);
}
.tabbar button {
  border: 0; background: 0; color: var(--muted);
  display: grid; place-items: center; gap: .1rem;
  font-size: .6rem; font-weight: 700; cursor: pointer; padding-top: .2rem;
}
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.on { color: var(--brand); }

/* Sheets */
dialog.sheet {
  width: min(480px, 100%); margin: auto 0 0; border: 0;
  border-radius: 20px 20px 0 0; padding: 0 1rem calc(1.25rem + var(--safe-b));
  max-height: 88dvh; background: #FFFFFF; color: var(--ink);
  box-shadow: 0 -12px 40px rgba(15,30,51,.18);
}
dialog.sheet::backdrop { background: rgba(15,30,51,.45); }
dialog.sheet header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; position: sticky; top: 0; background: #FFFFFF; font-weight: 800;
}
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; padding-bottom: 1rem; }
.sheet-grid .cat { border-radius: 12px; padding: .7rem .4rem; text-align: center; white-space: normal; }
.job-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.job-picks button {
  border: 1px solid var(--line); background: var(--bg-elev); border-radius: 999px;
  padding: .45rem .75rem; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.auth-form { display: grid; gap: .45rem; }
.auth-form .seg { margin-bottom: .25rem; justify-self: start; }
.suburb-wrap { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  margin: .25rem 0 0; padding: .25rem 0; list-style: none;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px;
  max-height: 220px; overflow: auto; box-shadow: 0 12px 30px rgba(15,30,51,.15);
}
.suggest li { padding: .55rem .85rem; font-size: .88rem; font-weight: 700; cursor: pointer; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: rgba(18,53,91,.08); }
.suggest small { display: block; font-weight: 600; color: var(--muted); font-size: .72rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip {
  display: inline-flex; gap: .35rem; align-items: center;
  background: rgba(18,53,91,.08); color: var(--brand);
  border-radius: 999px; padding: .3rem .6rem; font-size: .75rem; font-weight: 800;
}
.chip button { border: 0; background: 0; cursor: pointer; color: var(--muted); }
.check { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; margin: .5rem 0; font-weight: 600; }
.step-nav { display: flex; justify-content: space-between; align-items: center; padding-top: .65rem; border-top: 1px solid var(--line); margin-top: .55rem; }
.steps-dots { display: flex; gap: .3rem; margin-bottom: .65rem; }
.steps-dots i { width: 7px; height: 7px; border-radius: 99px; background: #CBD5E1; display: block; }
.steps-dots i.on { background: var(--brand); width: 18px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab) + 14px + var(--safe-b));
  transform: translateX(-50%); z-index: 60;
  background: #fff; color: #111; padding: .6rem 1rem; border-radius: 999px;
  font-size: .82rem; font-weight: 800; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  white-space: nowrap;
}

/* Plans */
.plans { padding: 0 1rem 1.5rem; display: grid; gap: .75rem; }
.plan {
  border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.15rem;
  background: var(--bg-elev);
}
.plan.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.plan h2 { margin: 0 0 .2rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.plan .price { font-size: 1.8rem; font-weight: 900; letter-spacing: -.04em; margin: .35rem 0; }
.plan .price span { font-size: .85rem; font-weight: 700; color: var(--muted); }
.plan ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; font-weight: 500; }
.plan .draft {
  display: inline-block; margin-top: .65rem; font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--brand);
}
table.compare { width: calc(100% - 2rem); margin: 0 1rem 1rem; border-collapse: collapse; font-size: .8rem; background: var(--bg-elev); border-radius: 12px; overflow: hidden; }
table.compare th, table.compare td { border-bottom: 1px solid var(--line); padding: .55rem; text-align: left; vertical-align: top; }
table.compare th { background: var(--brand); color: #fff; font-weight: 800; }
table.compare tr.cheap td { background: rgba(14,124,134,.10); }
.stars button { border: 0; background: 0; font-size: 1.2rem; opacity: .25; cursor: pointer; padding: 0; color: #ffc107; }
.stars button.on { opacity: 1; }

#btn-request, #su-submit, #su-next, #su-abn-go, #job-custom-go { margin: 0 1rem; width: calc(100% - 2rem); }
#view-shortlist #btn-request { margin-top: .25rem; }

/* Test mode */
.test-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--brand); color: #fff;
  padding: .45rem .85rem; padding-top: calc(.45rem + var(--safe-t));
  font-size: .78rem; font-weight: 700;
}
.test-banner .linkish { color: #fff; text-decoration: underline; font-weight: 800; }
.top-actions { display: flex; align-items: center; gap: .55rem; }
.test-toggle {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 999px; padding: .28rem .65rem; font-size: .68rem; font-weight: 800;
  cursor: pointer; text-transform: uppercase; letter-spacing: .04em;
}
.test-toggle[aria-pressed="true"] {
  background: var(--brand); color: #fff; border-color: var(--brand);
}
body.test-on { --safe-t-extra: 0px; }
.badge.test {
  background: var(--brand); color: #fff;
  font-weight: 900; letter-spacing: .06em;
}
.card-overlay .test-pill {
  position: absolute; top: -2.6rem; left: 1.1rem;
  background: var(--brand); color: #fff;
  font-size: .68rem; font-weight: 900; padding: .2rem .45rem; border-radius: 6px;
  letter-spacing: .05em;
}
/* launch features */
.bell { position: relative; border: 0; background: 0; font-size: 1.1rem; cursor: pointer; padding: .25rem; }
.bell-dot { position: absolute; top: -2px; right: -4px; background: var(--brand); color: #fff; border-radius: 99px; font-size: .6rem; min-width: 1rem; padding: 0 .2rem; font-weight: 800; }
.notif, .review { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.notif.unread strong::before { content: "● "; color: var(--brand); }
.notif p, .review p { margin: .2rem 0; }
.coming-soon { text-align: center; padding: .6rem; border: 1px dashed var(--line); border-radius: 12px; }
.legal-links a { color: var(--brand); }
#btn-forgot { margin-top: .4rem; }
.danger{color:#B42318!important;border-color:#B42318!important}

/* ---- v3 features ---- */
.tabbar button { font-size: .6rem; }
.row-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; }
.map-toggle[aria-pressed="true"] { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.map-panel .leaflet-container { background: #E8EEF4; }
.leaflet-popup-content { color: #111; }
.photo-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0; }
.photo-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.photo-row.big img { width: 100%; height: auto; max-height: 50vh; object-fit: contain; }
.chat-sheet { display: flex; flex-direction: column; }
.chat-sheet:not([open]) { display: none; }
.chat-msgs { flex: 1; min-height: 40vh; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .5rem 0; }
.bubble { align-self: flex-start; max-width: 78%; background: var(--bg-elev); border: 1px solid var(--line); padding: .55rem .8rem; border-radius: 18px 18px 18px 4px; white-space: pre-wrap; word-break: break-word; }
.bubble.mine { align-self: flex-end; background: linear-gradient(135deg, var(--brand), var(--brand-dim)); color: #fff; border: 0; border-radius: 18px 18px 4px 18px; }
.bubble small { display: block; opacity: .65; font-size: .68rem; margin-top: .2rem; }
.chat-form { display: flex; gap: .5rem; }
.chat-form input { flex: 1; }
.thread { cursor: pointer; }
.avatar-t { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--brand-dim)); color: #fff; flex: none; }
.slot-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.badge-ok { background: rgba(14,124,134,.12); color: var(--ok); padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.btn.small { padding: .35rem .8rem; font-size: .85rem; text-decoration: none; }
.onboarding { position: fixed; inset: 0; z-index: 9000; background: radial-gradient(circle at 50% 20%, #DCE8F2, var(--bg) 60%); display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; }
.onboarding[hidden] { display: none; }
.ob-track { flex: 1; display: flex; transition: transform .35s ease; }
.ob-slide { min-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.ob-art { font-size: 5rem; width: 9rem; height: 9rem; border-radius: 2.5rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-dim)); margin-bottom: 1.5rem; box-shadow: 0 20px 60px rgba(100,116,139,.35); }
.ob-slide h2 { font-size: 1.7rem; margin: 0 0 .5rem; }
.ob-slide p { color: var(--muted); max-width: 22rem; }
.ob-dots { display: flex; justify-content: center; gap: .5rem; }
.ob-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); background: rgba(15,30,51,.2); }
.ob-dots i.on { background: var(--brand); width: 22px; border-radius: 4px; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem calc(1.2rem + env(safe-area-inset-bottom)); }
.swipe-controls[hidden], .swipe-stack[hidden] { display: none !important; }
.chat-form input { background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1rem; }
#chat-privacy a { color: var(--brand); }

/* ---- v9: professional light theme + iOS-safe deck layout ---- */
html, body { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea { font-size: 16px !important; } /* prevents iOS Safari auto-zoom on focus */
.badge { background: rgba(255,255,255,.2); color: #fff; }
.badge.vetted { background: #fff; color: var(--brand); }
.badge.muted { background: rgba(255,255,255,.16); }
.card-overlay .name, .card-overlay .sub { color: #fff; }
.ctrl { background: #fff; border: 1px solid var(--line); }
.ctrl.save { background: var(--save); color: #fff; border-color: var(--save); }
.ctrl.pass { color: var(--pass); }
.tabbar { border-top: 1px solid var(--line); }
.tabbar button { color: var(--muted); }
.tabbar button.on { color: var(--brand); }
.test-banner { background: var(--accent) !important; color: #1F1300 !important; }
.test-banner .linkish { color: #1F1300 !important; }
.blank { color: var(--teal); border-bottom-color: var(--teal); }
.logo { background: var(--brand); }
.card-media { background-color: #E8EEF4; }
.card-media.pattern { background-size: 140px 140px !important; background-repeat: repeat !important; background-position: 0 0 !important; }
.card-media:not(.pattern) { background-size: cover; background-position: center; background-repeat: no-repeat; }
#app { overflow-x: hidden; width: 100%; }
body.mode-deck { overflow: hidden; }
body.mode-deck #app {
  height: 100vh; height: 100dvh; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
body.mode-deck #views { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.mode-deck #view-find.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: .4rem; }
body.mode-deck #deck-panel:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.mode-deck .swipe-stack { flex: 1 1 auto; height: auto !important; min-height: 200px; width: 100%; max-width: 440px; }
body.mode-deck .swipe-controls { flex: 0 0 auto; margin-top: .55rem; padding-bottom: 0; }
@media (max-height: 600px) {
  .ctrl.pass, .ctrl.save { width: 54px; height: 54px; }
  .ctrl.super { width: 42px; height: 42px; } .ctrl.undo { width: 38px; height: 38px; }
  .card-overlay { padding: 3rem .9rem .9rem; } .card-overlay .name { font-size: 1.4rem; }
}
.job-search { width: 100%; margin: .2rem 0 .6rem; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; background: #fff; }
.job-picks { max-height: 46dvh; overflow-y: auto; }
.job-picks .job-group { width: 100%; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .6rem 0 .2rem; }
.logo-img { width: 28px; height: 28px; border-radius: 7px; display: block; }

/* Share */
.share-fb{border:0;border-radius:22px 22px 0 0;margin:auto auto 0;width:100%;max-width:520px;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(15,30,51,.2)}
.share-fb::backdrop{background:rgba(15,30,51,.35)}
.share-fb h3{margin:0 0 10px;color:var(--brand)}
.share-url{width:100%;font-size:16px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin-bottom:12px}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.sbtn{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;border:1.5px solid var(--brand);background:#fff;color:var(--brand);font-weight:700;font-size:.92rem;text-decoration:none;width:100%;font-family:inherit}
.sbtn.ghost{border-color:transparent;color:var(--muted)}
.ctrl.share{color:var(--teal)}
.share-list-btn{margin-top:10px}

/* keep last controls above the fixed tab bar on iPhone */
.view:not([data-view="find"]) { padding-bottom: calc(var(--tab) + var(--safe-b) + 28px); }

/* ---- Photo-free professional card ---- */
.card-face.lt-card { position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; color:var(--ink); }
.swipe-card.is-flipped .lt-card { display:none; }
.lt-head { background:linear-gradient(150deg,#12355B 0%,#0B2440 100%); color:#fff; padding:1.15rem 1.1rem 1.05rem; display:flex; gap:.9rem; align-items:center; position:relative; }
.lt-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--teal) 0 70%,var(--accent) 70% 100%); }
.lt-mono { position:relative; flex:0 0 auto; width:64px; height:64px; border-radius:18px; background:#fff; color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.55rem; letter-spacing:-.04em; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.lt-icon { position:absolute; right:-6px; bottom:-6px; width:28px; height:28px; border-radius:50%; background:var(--teal); border:2px solid #fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.lt-id { min-width:0; }
.lt-id .name { margin:0; font-size:1.3rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; color:#fff; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lt-id .sub { margin:.2rem 0 0; font-size:.86rem; font-weight:600; color:rgba(255,255,255,.8); }
.lt-id .test-pill { position:static; display:inline-block; margin-bottom:.25rem; }
.lt-body { flex:1; min-height:0; overflow:hidden; padding:.9rem 1.1rem .8rem; display:flex; flex-direction:column; gap:.45rem; }
.lt-card .badges { display:flex; flex-wrap:wrap; gap:.3rem; }
.lt-card .badge { background:#EEF2F7; color:var(--brand); }
.lt-card .badge.ok { background:#E2F3F4; color:var(--teal); }
.lt-card .badge.pending { background:#FFF4E2; color:#8A5300; }
.lt-card .badge.vetted { background:var(--brand); color:#fff; }
.lt-card .badge.test { background:var(--accent); color:#2a1c00; }
.lt-rating { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; font-size:.9rem; color:var(--muted); margin-top:.15rem; }
.lt-rating strong { color:var(--ink); font-size:1.05rem; }
.lt-rating strong::first-letter { color:var(--accent); }
.lt-rating .fair { background:#FFF4E2; color:#8A5300; font-weight:700; font-size:.75rem; padding:.15rem .45rem; border-radius:999px; }
.lt-rating.none { font-size:.85rem; }
.lt-label { margin:.35rem 0 0; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.lt-jobs, .lt-avail { display:flex; flex-wrap:wrap; gap:.35rem; }
.lt-jobs span { font-size:.82rem; font-weight:600; padding:.32rem .6rem; border-radius:10px; background:#F2F5F9; border:1px solid var(--line); color:var(--ink); }
.av-chip { font-size:.78rem; font-weight:700; padding:.28rem .55rem; border-radius:999px; }
.av-chip.on { background:#E2F3F4; color:var(--teal); }
.av-chip.off { background:transparent; color:#A0AEC0; border:1px dashed #CBD5E1; }
.lt-photos { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin-top:.3rem; }
.lt-photos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }
.lt-tap { margin:auto 0 0; text-align:center; font-size:.75rem; color:#94A3B8; }
@media (max-height: 600px) { .lt-head { padding:.8rem 1rem .85rem; } .lt-mono { width:52px; height:52px; font-size:1.25rem; border-radius:14px; } .lt-body { gap:.3rem; padding:.7rem 1rem .6rem; } .lt-jobs span:nth-child(n+4) { display:none; } .lt-tap { display:none; } }
.lt-card .stamp { z-index:6; }
/* audit: >=44px tap targets on mobile */
.top .linkish, .test-toggle, #btn-test-off { min-height: 44px; display: inline-flex; align-items: center; }
.cats .cat, .cat { min-height: 40px; }

/* ---------- Brief 5: job request → quotes → job done → /10 ratings ---------- */
.fld{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted);margin:.55rem 0;border:0;padding:0}
.fld input,.fld textarea,.fld select{font:inherit;font-size:16px;color:var(--ink);padding:.6rem .7rem;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:44px}
.chips-fld{display:flex;flex-direction:row;flex-wrap:wrap;gap:.4rem}.chips-fld legend{width:100%;margin-bottom:.3rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:0 .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.85rem}
.chip:has(input:checked){background:var(--teal);color:#fff;border-color:var(--teal)}.chip input{position:absolute;opacity:0;pointer-events:none}
.photo-btns{display:flex;gap:.5rem}.photo-btns .btn{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);color:var(--brand)}
.photo-row .ph{position:relative;display:inline-block}.ph-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:14px;line-height:24px;padding:0}
.photo-row img{width:64px;height:64px;object-fit:cover;border-radius:10px;margin:.2rem .25rem 0 0}
.seg{display:flex;background:var(--bg);border-radius:12px;padding:3px;gap:3px}.seg label{flex:1;text-align:center;min-height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--muted)}
.seg label:has(input:checked){background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.1)}.seg input{position:absolute;opacity:0}
.price-row{display:flex;gap:.6rem}.price-row .fld{flex:1;flex-direction:row;align-items:center;font-weight:700;color:var(--brand)}.price-row input{flex:1;min-width:0}
.toggle{display:flex;align-items:center;gap:.5rem;min-height:44px;font-size:.9rem}.toggle input{width:22px;height:22px;accent-color:var(--teal)}
.pill{display:inline-block;margin:.45rem 0 .2rem;padding:.35rem .7rem;border-radius:10px;background:var(--bg);font-size:.82rem;color:var(--ink)}
.pill.ok{background:#E6F4F1;color:#0B5F55}.pill.warn{background:#FFF4E5;color:#8A4B00}.pill.muted{color:var(--muted)}
.ho-rep{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.2rem 0}.ho-rep small{color:var(--muted)}
.badge.new{background:#EEF2FF;color:#3730A3}
.req-card .req-job{margin:.35rem 0 .1rem}.req-card small{display:block}
.done-box{margin:.5rem 0;padding:.7rem;border-radius:14px;background:#FFF8EC;border:1px solid #F2D7A6;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.done-box strong{width:100%}.done-box input{font-size:16px;flex:1;min-width:90px;min-height:44px;padding:.4rem .6rem;border:1px solid var(--line);border-radius:10px}
.flag-wrap{width:100%;display:flex;flex-wrap:wrap;gap:.4rem}.flag-wrap[hidden]{display:none}
.job-block{margin:0 0 1.2rem}.job-title{font-size:1rem;margin:.4rem 0}
.qcards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,78%);gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .1rem .6rem;-webkit-overflow-scrolling:touch}
.qcard{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:.85rem;display:flex;flex-direction:column;gap:.35rem;box-shadow:0 2px 10px rgba(15,30,51,.06)}
.qcard.cheap{border-color:var(--teal);box-shadow:0 0 0 2px rgba(14,124,134,.18)}
.flags{display:flex;flex-wrap:wrap;gap:.3rem;min-height:22px}.flag{font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:999px}
.flag.low{background:#E6F4F1;color:#0B5F55}.flag.fast{background:#E0F2FE;color:#075985}.flag.top{background:#FFF4E5;color:#8A4B00}
.qname{font-size:1rem}.qprice{font-size:1.35rem;font-weight:800;color:var(--brand)}.qrep{font-size:.82rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.qcard dl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;margin:0;font-size:.82rem}.qcard dt{color:var(--muted)}.qcard dd{margin:0}
.qnote{font-size:.84rem;color:var(--ink);margin:0}.qcard .btn{margin-top:auto}
.vjob{color:#0B5F55;font-weight:600}
.ten-row{margin:.45rem 0}.ten{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.ten button{min-height:40px;border:1px solid var(--line);background:#fff;border-radius:8px;font:inherit;font-weight:700;font-size:.85rem;color:var(--ink);padding:0}
.ten button.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.rate-form,.rate-done{margin-top:.5rem;padding:.75rem;border-radius:14px;background:var(--bg)}.rate-form textarea{width:100%;font-size:16px;margin:.4rem 0;border:1px solid var(--line);border-radius:10px;padding:.5rem}
.rate-done small{display:block;color:var(--muted)}
.ho-record{margin-top:1rem}.ho-record h3{font-size:.95rem;margin:1rem 0 .3rem}
.row.muted{opacity:.75}.hist small{display:block}
#quotes-panel,.job-block,.req-card .grow{min-width:0;max-width:100%}
.qcards{max-width:100%;overscroll-behavior-x:contain}
/* Simple sign-up (Brief 6): normal sizes, 44px+ targets, plain labels */
.easy-form .fld{display:block;font-size:.95rem;font-weight:700;color:var(--ink);margin:.7rem 0 .25rem}
.easy-form .fld small{font-weight:500;color:var(--muted)}
.easy-form input:not([type=checkbox]):not([type=radio]):not([type=file]),.easy-form select{font-size:17px;min-height:46px;width:100%;box-sizing:border-box;margin:0}
.easy-form .hint{font-size:.9rem}
.easy-form small.hint{display:block;margin:.2rem 0 0}
.easy-form .btn,.easy-form .linkish,.pw-show{min-height:44px}
.easy-form .linkish{display:block;margin:.35rem auto;padding:.5rem}
.easy-form .err{font-size:.95rem;font-weight:600;color:#B42318;background:#FEF3F2;border-radius:10px;padding:.55rem .7rem;margin:.6rem 0}
.pw-wrap{position:relative}.pw-wrap input{padding-right:4.5rem!important}
.pw-show{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--brand);font-weight:700;font-size:.95rem;padding:0 .7rem;cursor:pointer}
.auth-alt{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);display:grid;gap:.5rem}
.sso{display:grid;gap:.5rem}.sso-btn{background:#111;color:#fff;min-height:46px}
.su-progress{font-size:.85rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 .35rem}
.su-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-bottom:.9rem}.su-bar i{display:block;height:100%;background:var(--brand);transition:width .25s}
.su-q{font-size:1.3rem;line-height:1.25;margin:0 0 .2rem;outline:none}
.big-tiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important;gap:.5rem}
.big-tiles .cat.tile{min-height:52px;display:flex;align-items:center;gap:.45rem;padding:.6rem .7rem;text-align:left}
.big-tiles .cat.tile .ico{display:inline;font-size:1.15rem}.big-tiles .cat.tile .lbl{font-size:.95rem}
.tick-tiles{display:grid;gap:.5rem;margin-top:.5rem}
.check.tile{min-height:48px;align-items:center;padding:.55rem .8rem;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;margin:.4rem 0}
.check.tile input{width:22px;height:22px;flex:none}
.check.tile:has(input:checked){border-color:var(--brand);background:#EEF6F6}
.file-btn{margin-top:.8rem;cursor:pointer}
#tradie-stepper .step-nav .btn{min-width:110px}
#su-submit{margin-top:1rem}
dialog.sheet > header .linkish{min-height:44px;padding:0 .6rem}

/* ===== Brief 7: tradie portal, auto-reply, demand, polish ===== */
body.as-tradie #tabbar [data-tab="find"], body.as-tradie #tabbar [data-tab="shortlist"] { display: none; }
body.as-tradie #tabbar [data-tab="jobs"] { order: 1 } body.as-tradie #tabbar [data-tab="quotes"] { order: 2 }
body.as-tradie #tabbar [data-tab="profile"] { order: 3 } body.as-tradie #tabbar [data-tab="autoreply"] { order: 4 } body.as-tradie #tabbar [data-tab="plans"] { order: 5 }
.plan.addon { border: 1px dashed var(--teal); }
.ar-panel { padding: 0 1rem 1.25rem; display: grid; gap: .75rem; }
.ar-lock { background: linear-gradient(135deg, #0E7C86 0%, #12355B 100%); color: #fff; border-radius: var(--radius); padding: 1rem; display: grid; gap: .5rem; }
.ar-lock p { margin: 0; opacity: .92; font-size: .92rem; line-height: 1.4 } .ar-lock small { opacity: .8 }
.ar-lock .btn.primary { background: #fff; color: var(--brand); }
.ar-switch { display: flex; align-items: center; gap: .75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; min-height: 44px; cursor: pointer; }
.ar-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ar-switch .sw { flex: none; width: 46px; height: 28px; border-radius: 99px; background: #CBD5E1; position: relative; transition: background .2s; }
.ar-switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.3,1.4,.6,1); }
.ar-switch input:checked + .sw { background: var(--teal); } .ar-switch input:checked + .sw::after { transform: translateX(18px); }
.ar-switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar-switch small { display: block; color: var(--muted); font-size: .8rem; }
.ar-rule { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; display: grid; gap: .6rem; }
.ar-rule-h { display: flex; justify-content: space-between; align-items: center; }
.ar-days { display: flex; gap: .35rem; }
.ar-days .day { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 600; color: var(--muted); transition: all .15s; }
.ar-days .day.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ar-row { display: flex; flex-wrap: wrap; gap: .5rem; } .ar-row label { flex: 1 1 30%; display: grid; gap: .2rem; font-size: .8rem; color: var(--muted); }
.ar-row input, .ar-row select, .ar-msg textarea { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; width: 100%; box-sizing: border-box; }
.ar-msg { display: grid; gap: .25rem; font-size: .8rem; color: var(--muted); } .ar-msg textarea { resize: vertical; line-height: 1.4; }
.mini { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; min-height: 44px; }
.ar-h { font-size: 1rem; margin: .25rem 0 0; }
.ar-prev small { color: var(--muted); font-size: .78rem; } .ar-prev .bubble { max-width: 100%; white-space: pre-line; }
.bubble.auto { white-space: pre-line; border-left: 3px solid var(--teal); }
.ar-tag { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); margin-bottom: .2rem; }
.ar-slots { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; } .ar-slots .chip { min-height: 36px; }
.chat-quick { display: flex; gap: .4rem; overflow-x: auto; padding: .4rem .75rem; scrollbar-width: none; }
.chat-quick .chip { white-space: nowrap; min-height: 36px; } .chat-quick .chip.sent { opacity: .5; }
.demand { margin: 0 1rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.demand h2 { font-size: 1rem; margin: 0 0 .6rem; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .stat-grid.three { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--bg); border-radius: 12px; padding: .6rem .7rem; } .stat b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--brand); }
.stat small { color: var(--muted); font-size: .74rem; line-height: 1.25; display: block; } .stat.warn b { color: #B45309; }
.abs-box { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .6rem; } .abs-box .src { display: block; margin-top: .4rem; color: var(--muted); font-size: .72rem; }
/* skeletons + empty states + micro-interactions */
.skel { height: 64px; border-radius: 14px; margin: 0 0 .6rem; background: linear-gradient(90deg, #E8EDF3 25%, #F3F6F9 50%, #E8EDF3 75%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
.skel.short { width: 60%; height: 18px; }
@keyframes skel { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); } .empty-ic { font-size: 2rem; margin-bottom: .35rem; }
.btn, .chip, #tabbar button, .day { transition: transform .12s ease, background-color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.btn:active, .chip:active, .day:active { transform: scale(.97); }
#tabbar button:active svg { transform: scale(.9); } #tabbar button svg { transition: transform .12s; }
.view.active { animation: viewin .18s ease-out; } @keyframes viewin { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.list > .row, .list > .card-slim { animation: viewin .2s ease-out both; }
.view-title { letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
#tabbar [hidden],.tradie-only[hidden]{display:none!important}
.tabbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.seg{display:flex;gap:.25rem;margin:0 1rem .8rem;padding:.25rem;background:var(--line,#e6e9ef);border-radius:999px}
.seg button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;font-weight:700;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink,#13294b);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg em{font-style:normal;font-size:.7rem;color:#0f7a6d;margin-left:.25rem}
.ar-more summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer;color:var(--muted)}
.launch-free{margin:.5rem 0;padding:.9rem 1rem;border-radius:14px;background:#E8F6F3;color:#0f5b52;line-height:1.45}
.ref-card{margin:.9rem 0;padding:1rem;border:1px solid var(--line);border-radius:16px;background:#fff}
.ref-card h2{font-size:1.05rem;margin:0 0 .3rem}
.ref-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.6rem 0}
.ref-stats div{background:var(--bg,#f5f7fa);border-radius:12px;padding:.55rem;text-align:center}.ref-stats b{display:block;font-size:1.3rem}.ref-stats span{font-size:.72rem;color:var(--muted)}
.ref-code{display:flex;justify-content:space-between;align-items:center;margin:.5rem 0;padding:.6rem .8rem;border:1px dashed var(--line);border-radius:12px}.ref-code strong{letter-spacing:.15em}
.ref-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.4rem}.ref-row .btn{min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none}
#plan-interval[hidden],.seg[hidden]{display:none!important}