:root {
  --color-bg:#fbf8f4;
  --color-surface:#fff;
  --color-text:#292e28;
  --color-muted:#697066;
  --color-border:#e4e6de;
  --color-primary:#466449;
  --color-primary-dark:#304b33;
  --color-accent:#e9b86e;
  --color-success:#316747;
  --color-danger:#a53838;
  --radius:20px;
  --shadow:0 5px 24px #293d2710;
  font-size:16px;
  color-scheme:light
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Sarabun",sans-serif;
  line-height:1.65
}
body:has(dialog[open]) {
  overflow:hidden
}
a {
  color:var(--color-primary);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea,select,summary {
  -webkit-tap-highlight-color:transparent
}
button,.btn,summary {
  touch-action:manipulation
}
:focus-visible {
  outline:3px solid #b77924;
  outline-offset:4px
}
img {
  max-width:100%;
  height:auto
}
button:disabled {
  opacity:.45;
  cursor:not-allowed
}
.icon {
  flex-shrink:0;
  vertical-align:middle
}
.container {
  width:100%;
  max-width:1180px;
  margin:auto;
  padding:0 28px
}
main.container {
  padding-top:36px;
  padding-bottom:64px;
  min-height:65vh
}
main:focus {
  outline:none
}
h1,h2,h3 {
  line-height:1.35;
  letter-spacing:-.025em
}
h1 {
  font-size:clamp(1.7rem,3.5vw,2.5rem);
  margin:0 0 12px;
  font-weight:750
}
h2 {
  font-size:1.35rem;
  margin:28px 0 14px
}
h3 {
  font-size:1.08rem
}
p {
  margin:0 0 16px
}
small {
  font-size:.8rem
}
.subtitle,.muted {
  color:var(--color-muted)
}
.eyebrow {
  font-size:.75rem;
  letter-spacing:.12em;
  font-weight:700;
  color:var(--color-primary);
  margin-bottom:14px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:32px 0 18px
}
.section-heading h2 {
  margin:0
}
.section-heading p {
  margin:0
}
.skip-link {
  position:fixed;
  top:-100px;
  left:12px;
  background:white;
  padding:12px;
  z-index:100
}
.skip-link:focus {
  top:12px
}
.site-header {
  background:#fbf8f4f5;
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(12px)
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:88px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.4rem;
  font-weight:750;
  color:var(--color-text);
  white-space:nowrap
}
.brand:hover {
  text-decoration:none
}
.brand small {
  display:block;
  font-weight:400;
  font-size:.66rem;
  color:var(--color-muted);
  letter-spacing:.035em
}
.brand-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--color-primary);
  color:#fff1d6
}
.brand-mark svg {
  width:27px;
  height:27px
}
.main-nav {
  display:flex;
  gap:8px;
  align-items:center
}
.main-nav>a {
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 14px;
  color:var(--color-muted);
  font-size:.92rem;
  border-radius:30px
}
.main-nav [aria-current],.main-nav>a:hover {
  background:#e9eee5;
  color:var(--color-primary-dark);
  text-decoration:none
}
.account-menu {
  position:relative
}
.account-menu summary {
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  min-height:44px;
  list-style:none
}
.account-menu summary::-webkit-details-marker {
  display:none
}
.account-name {
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.85rem
}
.account-dropdown {
  position:absolute;
  right:0;
  top:calc(100% + 14px);
  width:265px;
  padding:10px;
  background:white;
  border:1px solid var(--color-border);
  border-radius:16px;
  box-shadow:var(--shadow)
}
.account-dropdown a,.account-dropdown .link-button {
  display:block;
  padding:11px 14px;
  width:100%;
  text-align:left;
  color:var(--color-text);
  border-radius:8px;
  font-size:.9rem
}
.account-dropdown a:hover {
  background:var(--color-bg);
  text-decoration:none
}
.avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#e5eadc;
  color:var(--color-primary);
  font-size:1.3rem;
  font-weight:650;
  overflow:hidden
}
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-small {
  width:36px;
  height:36px;
  font-size:1rem
}
.mobile-nav {
  display:none
}
.admin-nav {
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-top:18px;
  padding-bottom:8px
}
.admin-nav a {
  flex-shrink:0;
  padding:8px 14px;
  border-radius:8px;
  font-size:.86rem
}
.admin-nav [aria-current] {
  background:var(--color-primary);
  color:white
}
.site-footer {
  border-top:1px solid var(--color-border);
  padding:26px 0;
  color:var(--color-muted);
  font-size:.8rem
}
.footer-inner {
  display:flex;
  gap:16px;
  justify-content:space-between;
  flex-wrap:wrap
}
.card {
  background:white;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:20px;
  box-shadow:var(--shadow)
}
.grid {
  display:grid;
  gap:22px;
  grid-template-columns:minmax(0,1fr)
}
.grid>*,.split-layout>* {
  min-width:0
}
.grid .card {
  margin-bottom:0
}
.btn,button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  min-height:46px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--color-primary);
  color:white;
  font-weight:600;
  cursor:pointer;
  line-height:1.4;
  text-align:center
}
button:hover,.btn:hover {
  background:var(--color-primary-dark);
  text-decoration:none
}
.btn-small {
  min-height:40px;
  padding:9px 16px;
  font-size:.85rem
}
.btn-secondary {
  background:white;
  color:var(--color-text);
  border:1px solid var(--color-border)
}
.btn-secondary:hover {
  background:#f1f3ec
}
.btn-danger {
  background:#fbeeed;
  color:var(--color-danger);
  border-color:#f0cdca
}
.btn-danger:hover {
  background:#f6d9d6;
  color:#852929
}
.btn-success {
  background:var(--color-success)
}
.btn-line {
  background:#06C755
}
.btn-line:hover {
  background:#05a648
}
/* Google's own sign-in button: white, grey outline, the four-colour G. */
.btn-google {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#fff;
  color:#1f1f1f;
  border:1px solid #747775;
  margin-bottom:10px
}
.btn-google:hover {
  background:#f7f8f8;
  color:#1f1f1f
}
.auth-divider {
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  color:var(--color-text-muted, #7a8177);
  font-size:.85rem
}
.auth-divider::before,.auth-divider::after {
  content:"";
  flex:1;
  height:1px;
  background:var(--color-border)
}
.btn-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px
}
.tip-options{border:1px solid #dce5d7;border-radius:16px;padding:16px;display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.tip-options legend{font-weight:700}.tip-options label{display:flex;align-items:center;gap:6px}.tip-options .support-toggle{flex-basis:100%;margin-top:8px}.tip-options input[type=number]{max-width:160px}.tip-options #post-trip-status{flex-basis:100%;margin:0;color:var(--color-primary-dark)}
.post-trip-dialog{width:min(560px,calc(100% - 28px));max-height:90dvh;border:1px solid #dce5d7;border-radius:24px;padding:24px;color:var(--color-text);background:#fff}.post-trip-dialog::backdrop{background:#172d2366}
.btn-block {
  width:100%
}
.inline-form {
  display:inline;
  margin:0
}
.link-button {
  border:0;
  background:none;
  color:var(--color-primary);
  padding:6px;
  min-height:44px;
  font-weight:500
}
.link-button:hover {
  background:#edf1e8;
  color:var(--color-primary-dark)
}
label {
  display:block;
  font-size:.88rem;
  font-weight:650;
  margin:16px 0 7px
}
input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=datetime-local],textarea,select {
  width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 13px;
  border:1px solid #d6dcd0;
  border-radius:10px;
  background:white;
  color:var(--color-text)
}
input::placeholder,textarea::placeholder {
  color:#838b7d
}
input[type=file] {
  width:100%;
  padding:14px;
  border:1px dashed #c6cfbe;
  border-radius:12px;
  background:#f8faf5
}
input::file-selector-button {
  border:0;
  padding:8px 12px;
  border-radius:6px;
  margin-right:12px;
  background:#e7edde;
  color:var(--color-primary)
}
textarea {
  min-height:108px;
  resize:vertical
}
.checkbox-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0
}
.checkbox-row label {
  margin:0
}
.checkbox-row input {
  width:20px;
  height:20px;
  accent-color:var(--color-primary)
}
.field-help {
  font-size:.8rem;
  color:var(--color-muted);
  margin:6px 0 0
}
.flash {
  padding:14px 18px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:.9rem;
  overflow-wrap:anywhere
}
.flash-error {
  background:#fbeeed;
  color:#922f2f;
  border:1px solid #eccbc8
}
.flash-notice {
  background:#edf4e8;
  color:#36593b;
  border:1px solid #d8e5ce
}
.status-pill,.badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:30px;
  padding:4px 10px;
  font-size:.73rem;
  font-weight:600;
  line-height:1.6;
  background:#eff1e9;
  color:#555f4c;
  vertical-align:middle
}
.status-pending {
  background:#fff0d4;
  color:#775419
}
.status-checked_in,.status-completed,.status-escrow_held,.badge-verified {
  background:#e6f1e3;
  color:#305d36
}
.status-cancelled,.status-disputed,.status-no_show_client,.status-no_show_talent {
  background:#fae8e6;
  color:#8d3732
}
.badge-queue {
  background:#f1e8fa;
  color:#5b3a86
}
.badge-rising_star,.badge-boosted {
  background:#fff0d4;
  color:#79531b
}
.badge-top_tier {
  background:#e6edf7;
  color:#34567e
}
.badge-celebrity {
  background:#eee7f4;
  color:#604477
}
.badge-starter {
  background:#efeee8;
  color:#626454
}
.tag {
  display:inline-block;
  border-radius:30px;
  background:#f3f3ed;
  border:1px solid #e7e7dd;
  padding:3px 10px;
  font-size:.74rem;
  color:#616953
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.empty-state {
  text-align:center;
  padding:52px 24px;
  background:white;
  border:1px dashed #ced8c5;
  border-radius:20px;
  grid-column:1/-1
}
.empty-state .icon {
  width:38px;
  height:38px;
  color:var(--color-primary);
  margin-bottom:16px
}
.empty-state h2 {
  margin:0 0 10px
}
.empty-state .btn-row {
  justify-content:center
}
.table-scroll {
  overflow:auto;
  border:1px solid var(--color-border);
  border-radius:14px;
  background:white;
  margin:20px 0;
  max-width:100%
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.86rem
}
th,td {
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--color-border);
  vertical-align:top
}
th {
  background:#f3f5ef;
  color:var(--color-muted);
  font-size:.76rem;
  font-weight:600;
  white-space:nowrap
}
td {
  overflow-wrap:anywhere
}
tr:last-child td {
  border-bottom:0
}
td .btn,td button {
  font-size:.8rem;
  padding:8px 12px;
  min-height:40px
}
td form {
  margin:4px 0
}
hr {
  border:0;
  border-top:1px solid var(--color-border);
  margin:24px 0
}
.hero {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:30px;
  padding:44px;
  border-radius:28px;
  background:#ecefdf;
  position:relative;
  overflow:hidden
}
.hero h1 {
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.3;
  max-width:620px
}
.hero h1 em {
  font-style:normal;
  color:var(--color-primary)
}
.hero p {
  max-width:500px
}
.hero-art {
  position:relative;
  min-height:230px;
  display:grid;
  place-items:center
}
.hero-orbit {
  width:210px;
  height:210px;
  border-radius:50%;
  border:1px dashed #9ea987;
  position:relative;
  background:#f6f3e6
}
.hero-orbit:before {
  content:'';
  position:absolute;
  inset:27px;
  border-radius:50%;
  background:#e4b96f
}
.hero-orbit .icon {
  width:90px;
  height:90px;
  position:absolute;
  left:60px;
  top:60px;
  stroke-width:1;
  color:#5e653e
}
.floating-note {
  position:absolute;
  background:white;
  border:1px solid #e3e6d7;
  border-radius:14px;
  padding:12px 16px;
  font-size:.83rem;
  box-shadow:0 8px 20px #4e593b0b;
  display:flex;
  align-items:center;
  gap:10px
}
.floating-note.first {
  top:5px;
  right:-5px;
  transform:rotate(5deg)
}
.floating-note.second {
  bottom:20px;
  left:0;
  transform:rotate(-4deg)
}
.trust-strip {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:24px;
  font-size:.78rem;
  color:#4c6246
}
.trust-strip span {
  display:flex;
  align-items:center;
  gap:7px
}
.search-panel {
  margin:24px 0;
  background:white;
  border:1px solid var(--color-border);
  border-radius:20px;
  padding:22px
}
.filters {
  display:grid;
  grid-template-columns:1.1fr 1fr .65fr .65fr auto;
  gap:12px;
  align-items:end
}
.filters label {
  margin-top:0;
  font-size:.8rem
}
.filters button {
  min-height:48px
}
.tier-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:18px 0
}
.tier-tabs a {
  border:1px solid var(--color-border);
  padding:9px 15px;
  border-radius:30px;
  color:var(--color-muted);
  font-size:.82rem;
  background:white;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:6px
}
.tier-tabs a.active,.tier-tabs [aria-current] {
  background:var(--color-primary);
  color:white;
  border-color:var(--color-primary)
}
.tier-tabs a:hover {
  text-decoration:none;
  border-color:var(--color-primary)
}
.active-filters {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  font-size:.82rem;
  margin-top:14px
}
.active-filters a {
  background:#eef2e8;
  padding:5px 10px;
  border-radius:8px
}
.talent-card {
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  overflow:hidden;
  color:var(--color-text);
  box-shadow:0 2px 10px #29392214;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease;
  animation:talent-card-in .4s cubic-bezier(.2,.7,.3,1) backwards
}
/* Each card in the grid appears a beat after the one before it — the same
   near-to-far reveal the scan itself uses, so results keep feeling like
   something the scan just found rather than a page that was always there. */
.discovery-results .talent-card { animation-delay:calc(var(--card-index, 0) * 45ms) }
@keyframes talent-card-in {
  from { opacity:0; transform:translateY(10px) scale(.98) }
  to { opacity:1; transform:none }
}
.talent-card:hover {
  transform:translateY(-5px);
  box-shadow:0 16px 34px #29392222,0 0 0 1px #e9b86e40;
  text-decoration:none
}
.talent-card:hover .photo-wrap>img {
  transform:scale(1.06)
}
@media (prefers-reduced-motion: reduce) {
  .talent-card { animation:none }
  .talent-card:hover .photo-wrap>img { transform:none }
}
.photo-wrap {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  aspect-ratio:4/5;
  background:#eee7de
}
.photo-wrap>img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease
}
.photo-wrap.stealth>img {
  filter:blur(22px);
  transform:scale(1.1)
}
.talent-card .photo-wrap {
  border-radius:0;
  aspect-ratio:5/4
}
.photo-badges {
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  gap:6px;
  flex-wrap:wrap
}
.photo-badges .badge {
  box-shadow:0 2px 8px #00000022;
  background:#fffefacc;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)
}
/* Picked out in the same gold the radar marks a found person with, so a
   profile earned by paying to be seen reads as a different claim from one
   earned by ID verification, rather than two chips in the same white. */
.photo-badges .badge-boosted,.photo-badges .badge-rising_star {
  background:#fdf3e0cc;
  color:#8a5a10
}
/* A soft scrim under the photo badges and into the info panel: the hard
   photo/white-card seam is the one place the old card still looked cut from
   two unrelated templates. */
.talent-card .photo-wrap::after {
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:46%;
  background:linear-gradient(to top,#00000024,transparent);
  pointer-events:none
}
.photo-lock {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  gap:6px;
  color:#2f4532;
  background:#ffffff70;
  font-size:.85rem;
  z-index:1
}
.talent-info {
  padding:20px
}
.talent-name {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:5px
}
.talent-name strong {
  font-size:1.15rem
}
.talent-location {
  font-size:.81rem;
  color:var(--color-muted);
  margin-bottom:12px
}
.talent-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:none;
  position:relative;
  padding-top:14px;
  margin-top:16px;
  gap:8px
}
/* Replaces the flat divider rule: fades at both ends instead of running
   edge-to-edge, which is what kept this seam reading as a leftover table row. */
.talent-bottom::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--color-border) 20%,var(--color-border) 80%,transparent)
}
/* The price is the one number a scan exists to produce, so it gets the same
   gold the radar lights a found person up with, in a quiet chip rather than
   plain text — the same weight the old layout gave the rating next to it. */
.talent-price {
  font-size:1.05rem;
  font-weight:700;
  color:#7a5310;
  background:#fbf0da;
  border-radius:10px;
  padding:3px 10px;
  margin-left:-10px
}
.talent-price small {
  font-size:.72rem;
  font-weight:400;
  color:#8a6d34
}
.rating {
  font-size:.78rem;
  color:#616749;
  display:inline-flex;
  align-items:center;
  gap:3px
}
.rating-star {
  color:#e9b86e
}
.pagination {
  display:flex;
  justify-content:center;
  gap:12px;
  margin:30px 0
}
.split-layout {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:32px;
  align-items:start
}
.profile-main-photo {
  max-width:100%!important;
  aspect-ratio:5/4
}
.profile-gallery img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover
}
.profile-summary {
  position:sticky;
  top:112px
}
.profile-summary .price-large {
  font-size:2rem;
  font-weight:700
}
.profile-summary .price-large small {
  font-size:.85rem;
  font-weight:400
}
.watermark-note {
  font-size:.76rem;
  color:var(--color-muted);
  margin-top:6px
}
.prose {
  white-space:pre-line;
  overflow-wrap:anywhere
}
.info-list {
  display:grid;
  gap:12px;
  margin:18px 0
}
.info-list p {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0
}
.back-link {
  display:inline-block;
  font-size:.86rem;
  margin-bottom:22px
}
.booking-steps {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:8px;
  list-style:none;
  padding:0;
  margin:24px 0
}
.booking-steps li {
  border-top:3px solid #dde3d6;
  padding-top:10px;
  font-size:.8rem;
  color:var(--color-muted)
}
.booking-steps li.done {
  border-color:var(--color-primary);
  color:var(--color-primary)
}
.booking-steps li[aria-current] {
  font-weight:700
}
.booking-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}
.booking-card-head h2 {
  margin:0;
  font-size:1.1rem
}
.booking-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:18px 0
}
.booking-facts p {
  margin:0
}
.booking-facts small {
  display:block;
  color:var(--color-muted)
}
.booking-next {
  padding:16px;
  background:#f1f5eb;
  border-radius:12px;
  margin:18px 0
}
.dispute-box {
  margin-top:22px;
  border-top:1px solid var(--color-border);
  padding-top:16px
}
.dispute-box summary {
  cursor:pointer;
  color:var(--color-danger);
  padding:8px 0;
  font-weight:600
}
.checkin-code {
  font-size:2.5rem;
  letter-spacing:.3rem;
  font-weight:700;
  color:var(--color-primary);
  font-variant-numeric:tabular-nums
}
.checkin-code-input {
  font-size:1.6rem;
  letter-spacing:.3rem;
  text-align:center
}
.wallet-balances {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:24px 0
}
.balance-tile {
  background:white;
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:24px
}
.balance-tile:first-child {
  background:var(--color-primary);
  color:white
}
.balance-tile .amount {
  font-size:2rem;
  font-weight:700
}
.balance-tile .label {
  font-size:.8rem;
  color:var(--color-muted)
}
.balance-tile:first-child .label {
  color:#e2ebda
}
.amount-presets {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0
}
.topup-amount {
  font-size:2.5rem;
  font-weight:700;
  color:var(--color-primary)
}
.withdraw-breakdown {
  background:#f3f5ee;
  padding:16px;
  border-radius:12px;
  margin:16px 0
}
.breakdown-row {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:4px 0;
  color:var(--color-muted);
  font-size:.85rem
}
.breakdown-total {
  border-top:1px solid var(--color-border);
  margin-top:8px;
  padding-top:12px;
  font-weight:700;
  font-size:1.1rem;
  color:var(--color-text)
}
.auth-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  max-width:950px;
  margin:36px auto;
  align-items:center
}
.auth-intro h1 {
  font-size:2.7rem
}
.auth-card {
  padding:32px
}
.auth-card h2 {
  margin-top:0
}
/* Account: shared palette, focused shortcuts and grouped settings. */
.account-page { max-width:1000px; margin:0 auto; }
.account-intro { margin-bottom:24px; }
.account-intro .eyebrow { margin-bottom:6px; }
.account-intro .subtitle { margin-bottom:0; }
.account-identity { display:flex; align-items:center; gap:20px; padding:28px; border:1px solid #dce4d7; border-radius:24px; background:linear-gradient(120deg,#eef3e9,#fafbf7); }
.account-avatar { display:grid; place-items:center; flex:0 0 72px; width:72px; height:72px; border-radius:50%; background:var(--color-primary); color:white; font-size:1.9rem; }
.account-identity-copy { flex:1; min-width:0; overflow-wrap:anywhere; }
.account-identity h2 { margin:0 0 4px; font-size:1.4rem; }
.account-identity p { color:var(--color-muted); margin:0 0 8px; font-size:.9rem; }
.account-verify { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; }
.account-profile-action { display:inline-flex; align-items:center; justify-content:center; gap:10px; background:white; }
.account-shortcuts { margin:30px 0; }
.account-shortcuts h2 { margin:0 0 14px; font-size:1.1rem; }
.account-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.account-quick { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:22px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); color:var(--color-text); }
.account-icon { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:13px; background:#f0f3ec; color:var(--color-primary); }
.account-quick .account-icon { margin-bottom:16px; }
.account-quick strong { font-size:1rem; }
.account-quick p { color:var(--color-muted); font-size:.85rem; margin:5px 0 0; }
.account-quick-arrow { position:absolute; top:20px; right:20px; color:var(--color-primary); }
.account-quick:hover { text-decoration:none; border-color:var(--color-primary); background:#fcfdf9; }
.account-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
.account-section-heading { margin-bottom:12px; }
.account-section-heading h2 { font-size:1.1rem; margin:0 0 4px; }
.account-section-heading p { font-size:.85rem; color:var(--color-muted); margin:0; }
.account-menu-list { background:white; border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; }
.account-menu-item { display:flex; align-items:center; gap:14px; padding:18px; color:var(--color-text); }
.account-menu-item + .account-menu-item { border-top:1px solid var(--color-border); }
.account-menu-item:hover { background:#f5f7f1; text-decoration:none; }
.account-menu-item:focus-visible { outline-offset:-4px; }
.account-menu-copy { flex:1; min-width:0; overflow-wrap:anywhere; }
.account-menu-copy strong { display:block; font-weight:600; font-size:.95rem; }
.account-menu-copy > span { display:block; color:var(--color-muted); font-size:.8rem; margin-top:3px; }
.account-chevron { color:var(--color-muted); font-size:1.4rem; }
.account-admin { display:flex; align-items:center; gap:10px; padding:18px; border:1px dashed var(--color-border); border-radius:14px; margin-top:28px; }
.account-admin > span { margin-left:auto; }
.account-session { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; border-top:1px solid var(--color-border); margin-top:32px; padding-top:24px; }
.account-session form { margin:0; }
.account-text-button { background:none; border:0; color:var(--color-muted); cursor:pointer; padding:12px 0; font-size:.9rem; }
.account-text-button:hover { color:var(--color-text); text-decoration:underline; }
.account-close { margin-top:20px; }
.account-close a { display:inline-block; padding:10px 0; color:var(--color-danger); font-size:.85rem; }
@media (max-width:700px) {
  .account-identity { flex-wrap:wrap; padding:20px; gap:14px; }
  .account-avatar { flex-basis:56px; width:56px; height:56px; font-size:1.5rem; }
  .account-identity h2 { font-size:1.15rem; }
  .account-profile-action { width:100%; }
  .account-sections { grid-template-columns:1fr; gap:24px; }
  .account-quick-grid { grid-template-columns:1fr; gap:10px; }
  .account-quick { display:grid; grid-template-columns:42px minmax(0,1fr) 16px; column-gap:14px; padding:16px; align-items:center; }
  .account-quick .account-icon { grid-row:1 / 3; margin:0; }
  .account-quick strong,.account-quick p { grid-column:2; }
  .account-quick p { margin:2px 0 0; font-size:.8rem; }
  .account-quick-arrow { position:static; grid-column:3; grid-row:1 / 3; }
  .account-menu-item { padding:16px; gap:12px; }
}
.guide {
  max-width:800px;
  margin:auto
}
.guide details {
  padding:20px 0;
  border-bottom:1px solid var(--color-border)
}
.guide summary {
  cursor:pointer;
  font-weight:600
}
.guide details p {
  margin:12px 0 0
}
.guide .card h2:first-child {
  margin-top:0
}
.confirm-dialog {
  max-width:440px;
  width:calc(100% - 32px);
  border:1px solid var(--color-border);
  border-radius:20px;
  padding:26px;
  box-shadow:var(--shadow)
}
.confirm-dialog h2 {
  margin-top:0
}
.confirm-dialog::backdrop {
  background:#18241566;
  backdrop-filter:blur(3px)
}
.inbox-list {
  display:grid;
  gap:12px;
  margin-top:24px
}
.inbox-item {
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px;
  background:white;
  border:1px solid var(--color-border);
  border-radius:16px;
  color:var(--color-text)
}
.inbox-item:hover {
  border-color:var(--color-primary);
  text-decoration:none
}
.inbox-content {
  min-width:0;
  flex:1
}
.inbox-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.inbox-preview {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--color-muted);
  font-size:.85rem;
  margin:6px 0
}
.inbox-meta {
  font-size:.73rem;
  color:var(--color-muted)
}
.chat-shell {
  max-width:900px;
  margin:auto;
  background:white;
  border:1px solid var(--color-border);
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:calc(100dvh - 200px);
  min-height:470px
}
.chat-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 24px;
  border-bottom:1px solid var(--color-border);
  flex-shrink:0
}
.chat-header h1 {
  font-size:1.1rem;
  margin:0
}
.chat-header .chat-actions {
  margin-left:auto
}
.chat-header .subtitle {
  font-size:.73rem;
  margin:2px 0 0
}
.chat-context {
  padding:10px 24px;
  font-size:.77rem;
  background:#f4f6ef;
  flex-shrink:0
}
.chat-context p {
  margin:0
}
.chat-window {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:24px;
  background:#fafbf7;
  display:flex;
  flex-direction:column;
  gap:12px;
  scroll-behavior:auto
}
.chat-bubble {
  max-width:78%;
  align-self:flex-start;
  background:white;
  border:1px solid var(--color-border);
  border-radius:16px 16px 16px 4px;
  padding:11px 15px;
  overflow-wrap:anywhere;
  flex-shrink:0
}
.chat-bubble.mine {
  align-self:flex-end;
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:white;
  border-radius:16px 16px 4px 16px
}
.message-content {
  white-space:pre-wrap
}
.chat-bubble.flagged {
  background:#fff0e7;
  color:#80462d;
  border-color:#e7cdb9
}
.chat-meta {
  font-size:.68rem;
  color:var(--color-muted);
  margin-top:5px
}
.chat-bubble.mine .chat-meta {
  color:#e1eadb
}
.chat-bubble.flagged .chat-meta {
  color:#805d48
}
.chat-compose {
  padding:14px 20px;
  border-top:1px solid var(--color-border);
  background:white;
  flex-shrink:0
}
.chat-compose form {
  display:flex;
  align-items:flex-end;
  gap:10px
}
.chat-compose label {
  margin:0
}
.chat-compose textarea {
  min-height:48px;
  max-height:130px;
  resize:none;
  line-height:1.5
}
.chat-compose .compose-input {
  flex:1;
  min-width:0
}
.compose-help {
  display:flex;
  justify-content:space-between;
  font-size:.68rem;
  color:var(--color-muted);
  margin-top:7px
}
.chat-feedback {
  font-size:.8rem;
  padding:10px 20px;
  margin:0;
  background:#fff0de;
  color:#744c19
}
.chat-feedback:empty {
  display:none
}
.chat-new {
  align-self:center;
  margin:6px;
  padding:6px 16px;
  min-height:36px;
  font-size:.78rem
}
.load-history {
  align-self:center;
  flex-shrink:0;
  font-size:.8rem
}
[hidden] {
  display:none!important
}
@media(min-width:640px) {
  .grid.cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .grid.cols-3 {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(min-width:1000px) {
  .grid.cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-width:900px) {
  .container {
    padding-left:22px;
    padding-right:22px
  }
  .main-nav>a {
    padding:10px;
    font-size:.82rem
  }
  .main-nav .icon {
    display:none
  }
  .account-name {
    display:none
  }
  .hero {
    padding:30px;
    grid-template-columns:1.3fr .7fr
  }
  .hero-art {
    transform:scale(.8);
    transform-origin:center
  }
  .filters {
    grid-template-columns:1fr 1fr
  }
  .filters button {
    grid-column:1/-1
  }
  .split-layout {
    gap:22px
  }
  .auth-layout {
    gap:30px
  }
  .auth-intro h1 {
    font-size:2rem
  }
}
@media(max-width:639px) {
  body {
    padding-bottom:calc(72px + env(safe-area-inset-bottom))
  }
  .container {
    padding-left:18px;
    padding-right:18px
  }
  .header-inner {
    min-height:72px;
    gap:12px
  }
  .brand {
    font-size:1.2rem
  }
  .brand-mark {
    width:36px;
    height:36px
  }
  .brand small {
    font-size:.6rem
  }
  .main-nav {
    display:none
  }
  .mobile-nav {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:40;
    background:#fffffff7;
    border-top:1px solid var(--color-border);
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    backdrop-filter:blur(12px);
    justify-content:space-around
  }
  .mobile-nav a {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    min-width:64px;
    min-height:48px;
    padding:4px 10px;
    color:var(--color-muted);
    font-size:.66rem;
    border-radius:12px
  }
  .mobile-nav [aria-current] {
    background:#edf2e7;
    color:var(--color-primary-dark);
    font-weight:700
  }
  .mobile-nav a:hover {
    text-decoration:none
  }
  main.container {
    padding-top:24px;
    padding-bottom:32px
  }
  .hero {
    padding:26px;
    display:block;
    border-radius:22px
  }
  .hero h1 {
    font-size:2.05rem
  }
  .hero-art {
    display:none
  }
  .hero p {
    font-size:.88rem
  }
  .trust-strip {
    gap:12px;
    font-size:.72rem;
    margin-top:20px
  }
  .trust-strip .icon {
    width:17px
  }
  .search-panel {
    padding:18px;
    margin:18px 0
  }
  .filters {
    gap:12px
  }
  .filters>div:nth-child(1),.filters>div:nth-child(2) {
    grid-column:1/-1
  }
  .tier-tabs {
    flex-wrap:nowrap;
    overflow:auto;
    padding-bottom:5px
  }
  .tier-tabs a {
    white-space:nowrap;
    flex-shrink:0
  }
  .section-heading {
    margin-top:24px
  }
  .section-heading h2 {
    font-size:1.2rem
  }
  .section-heading p {
    font-size:.76rem
  }
  .talent-card .photo-wrap {
    aspect-ratio:5/4
  }
  .card {
    padding:20px;
    border-radius:16px
  }
  .talent-card {
    padding:0
  }
  .talent-info {
    padding:18px
  }
  .split-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .profile-summary {
    position:static
  }
  .profile-booking {
    position:sticky;
    bottom:84px;
    z-index:5;
    background:white;
    box-shadow:var(--shadow);
    padding:10px;
    border-radius:14px;
    border:1px solid var(--color-border)
  }
  .wallet-balances {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .balance-tile {
    padding:18px
  }
  .balance-tile:first-child {
    grid-column:1/-1
  }
  .balance-tile .amount {
    font-size:1.6rem
  }
  .balance-tile .label {
    font-size:.75rem
  }
  .auth-layout {
    display:block;
    margin:0
  }
  .auth-intro {
    margin-bottom:24px
  }
  .auth-intro h1 {
    font-size:1.8rem
  }
  .auth-card {
    padding:24px
  }
  .booking-steps li {
    font-size:.69rem
  }
  .booking-facts {
    grid-template-columns:1fr
  }
  .inbox-item {
    padding:16px;
    gap:12px
  }
  .inbox-top {
    align-items:flex-start;
    flex-direction:column;
    gap:2px
  }
  .inbox-item>.icon {
    display:none
  }
  .chat-shell {
    height:var(--chat-height, calc(100dvh - 164px - env(safe-area-inset-bottom)));
    min-height:0;
    border-radius:0;
    border-left:0;
    border-right:0
  }
  .chat-header {
    padding:12px 16px;
    gap:10px
  }
  .chat-header h1 {
    font-size:1rem
  }
  .chat-header .avatar {
    width:38px;
    height:38px;
    font-size:1rem
  }
  .chat-actions .btn {
    font-size:.72rem;
    padding:8px 10px;
    min-height:38px
  }
  .chat-context {
    padding:9px 16px;
    font-size:.71rem
  }
  .chat-window {
    padding:16px
  }
  .chat-bubble {
    max-width:88%;
    font-size:.92rem
  }
  .chat-compose {
    padding:10px 12px
  }
  .compose-help {
    font-size:.63rem
  }
  .chat-header .back-link {
    margin:0
  }
  .footer-inner {
    font-size:.74rem
  }
  .table-scroll table {
    min-width:600px
  }
  .admin-nav {
    padding-top:12px
  }
  .admin-page .table-scroll table {
    min-width:900px
  }
  .admin-page h1 {
    font-size:1.7rem
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important
  }
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
fieldset {
  border:1px solid var(--color-border);
  border-radius:12px;
  margin:22px 0;
  padding:12px 16px
}
legend {
  padding:0 6px;
  font-size:.86rem;
  font-weight:650
}
.upload-preview {
  display:block;
  max-width:240px;
  max-height:220px;
  object-fit:contain;
  margin-top:14px;
  border-radius:12px
}
.is-submitting {
  opacity:.6;
  cursor:wait
}
.edit-layout {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:24px;
  align-items:start
}
.edit-layout .card {
  max-width:none!important
}
.edit-layout aside {
  position:sticky;
  top:112px
}
.edit-layout form>label:first-child {
  margin-top:0
}
.onboarding-note {
  border-left:3px solid var(--color-accent);
  padding:12px 18px;
  background:#fff4e1;
  margin:20px 0;
  font-size:.85rem
}
@media(max-width:800px) {
  .edit-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .edit-layout aside {
    position:static
  }
}
.price-fields {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px
}
.price-filters summary {
  cursor:pointer;
  min-height:44px;
  padding:10px 0;
  font-size:.82rem;
  color:var(--color-primary)
}
.search-panel .filters {
  grid-template-columns:1fr 1fr 1.3fr auto
}
.hero-compact {
  padding-top:24px;
  padding-bottom:24px
}
.hero-compact h1 {
  font-size:2rem
}
.hero-compact h1 br {
  display:none
}
.hero-compact .hero-art,.hero-compact .hero .btn {
  display:none
}
.hero-compact {
  grid-template-columns:1fr
}
.hero-compact .trust-strip {
  margin-top:12px
}
@media(min-width:640px) {
  .price-filters summary {
    display:none
  }
  .search-panel .filters button {
    grid-column:auto
  }
}
@media(max-width:900px) and (min-width:640px) {
  .search-panel .filters {
    grid-template-columns:1fr 1fr
  }
  .price-filters {
    grid-column:1/-1
  }
  .search-panel .filters button {
    grid-column:1/-1
  }
}
@media(max-width:639px) {
  .hero {
    padding:22px
  }
  .hero h1 {
    font-size:1.75rem
  }
  .hero p {
    font-size:.82rem
  }
  .hero .eyebrow {
    margin-bottom:10px
  }
  .hero .btn {
    display:none
  }
  .hero .trust-strip {
    gap:10px;
    margin-top:14px;
    font-size:.66rem
  }
  .hero-compact h1 {
    font-size:1.35rem
  }
  .hero-compact .subtitle,.hero-compact .trust-strip,.hero-compact .eyebrow {
    display:none
  }
  .search-panel .filters {
    grid-template-columns:1fr 1fr
  }
  .search-panel .filters>div:nth-child(n) {
    grid-column:auto
  }
  .price-filters {
    grid-column:1/-1
  }
  .search-panel .filters button {
    grid-column:1/-1
  }
  .search-panel {
    padding:16px
  }
  .filters label {
    font-size:.75rem
  }
  .hero-compact {
    padding:16px 20px
  }
  .hero-compact h1 {
    margin:0
  }
}

/* Additional search controls must shrink with narrow mobile viewports. */
.search-panel .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.search-panel .filters > * { min-width: 0; }
.search-panel .filters input { min-width: 0; max-width: 100%; }
.search-panel .filters > label { align-self: center; white-space: normal; }
.chat-attachment { margin-top: .35rem; }
.chat-compose .chat-image-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.chat-image-form label { min-width: 0; flex: 1 1 160px; }
.chat-image-form input { max-width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .search-panel .filters { grid-template-columns: minmax(0, 1fr); }
  .search-panel .filters > * { grid-column: 1 !important; }
}

/* Rides on the account menu and the mobile account tab. The unread count itself
   sits inside a dropdown that is closed by default, so this dot is the part
   anybody actually sees without going to look for it. */
.unread-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--color-danger);
  display:inline-block;
  flex:none
}
.mobile-nav a {
  position:relative
}
.mobile-nav a .unread-dot {
  position:absolute;
  top:4px;
  left:calc(50% + 10px)
}

/* Signed-in readers have already been sold the product, so they get a heading
   rather than the hero: the search is what they came for and it starts here. */
.search-lede {
  margin:8px 0 20px
}
.search-lede h1 {
  margin:0 0 6px
}
.search-lede p {
  margin:0
}

/* Where, and go — on one line where there is room for it. The rest of the
   filters are a refinement somebody asks for, not a form to fill in before
   being shown anybody. */
.search-primary {
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap
}
.search-primary > div {
  flex:1 1 150px;
  min-width:0
}
.search-primary button {
  flex:0 0 auto
}

/* Distance is opt-in, so its controls sit beside the search rather than in it. */
.search-near {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px
}
.talent-distance {
  margin:0 0 8px;
  font-size:.82rem;
  color:var(--color-muted)
}

/* When somebody is next open for work. At this size that answers the reader's
   real question — can I actually book them — better than how far away they are,
   so it sits above the area line rather than below it. */
.talent-open {
  margin:0 0 4px;
  font-size:.82rem;
  font-weight:600;
  color:var(--color-success)
}
.talent-open-none {
  font-weight:400;
  color:var(--color-muted)
}

/* Being free right now is the state a talent wants to be in, because it puts
   them at the top of the list — which is the point. It is a reward for
   switching the thing on, not a gate that keeps everyone else out. */
.talent-open-now {
  color:var(--color-primary-dark);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:6px
}
.live-dot {
  width:7px;height:7px;border-radius:50%;
  background:var(--color-primary-dark);
  box-shadow:0 0 0 0 #304b3355;
  animation:live-dot-pulse 1.8s ease-out infinite
}
@keyframes live-dot-pulse {
  0% { box-shadow:0 0 0 0 #304b3355 }
  70% { box-shadow:0 0 0 7px #304b3300 }
  100% { box-shadow:0 0 0 0 #304b3300 }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation:none }
}

/* Ticking days is the whole repeat control, so the targets have to be the size
   of a thumb rather than a checkbox. */
.weekday-pick {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border:1px solid var(--color-border);
  border-radius:30px;
  cursor:pointer
}
.weekday-pick:has(input:checked) {
  background:#e9eee5;
  border-color:var(--color-primary);
  font-weight:600
}

/* Only ever on screen after the browser has refused a position, so it is an
   answer rather than furniture. */
.search-fallback {
  border-top:1px solid var(--color-border);
  margin-top:14px;
  padding-top:14px
}

.signup-captcha-image { display:block; max-width:100%; height:auto; margin:10px 0 16px; border:1px solid var(--color-border); border-radius:12px; }

/* Companion profile editor */
.profile-editor { max-width:1100px; margin:0 auto; }
.profile-editor-hero { display:flex; align-items:center; gap:22px; padding:28px 0; }
.profile-editor-avatar { display:grid; place-items:center; flex:0 0 86px; height:86px; border-radius:26px; background:#e7ede1; color:var(--color-primary); overflow:hidden; }
.profile-editor-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-editor-avatar .icon { width:34px; height:34px; }
.profile-editor-title { min-width:0; flex:1; }
.profile-editor-title .eyebrow { margin:0 0 6px; }
.profile-editor-title h1 { font-size:clamp(1.5rem,3vw,2.15rem); margin-bottom:8px; }
.profile-editor-title .subtitle { font-size:.95rem; margin:0; }
.profile-preview-link { display:inline-flex; gap:10px; align-items:center; flex-shrink:0; }
.profile-section-nav { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px; padding-bottom:18px; border-bottom:1px solid var(--color-border); }
.profile-section-nav a { padding:8px 15px; border:1px solid var(--color-border); border-radius:100px; font-size:.85rem; background:white; color:var(--color-text); }
.profile-section-nav a:hover { background:#e7ede1; border-color:#b9cbb4; text-decoration:none; }
.profile-editor section[id],.profile-editor fieldset[id] { scroll-margin-top:110px; }
.profile-editor .card { max-width:none; box-shadow:none; }
.profile-section-heading { display:flex; gap:13px; align-items:center; margin-bottom:24px; }
.profile-section-heading h2 { margin:0 0 4px; font-size:1.2rem; }
.profile-section-heading p { margin:0; font-size:.85rem; color:var(--color-muted); }
.profile-section-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; background:#eef3e9; border-radius:13px; color:var(--color-primary); }
.profile-work { background:linear-gradient(120deg,#f0f5ec,#fff); padding:26px; }
.profile-work-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; }
.profile-work-option { min-width:0; }
.profile-work-option + .profile-work-option { border-left:1px solid #dce5d6; padding-left:24px; }
.profile-work-option h3 { margin:0 0 12px; font-size:1rem; }
.profile-work-option .btn-row { margin-bottom:0; }
.profile-work-option p { margin-bottom:12px; }
.profile-work-option .field-help { font-size:.8rem; }
.profile-work-option details { font-size:.85rem; margin-top:12px; }
.profile-work-option details summary { padding:8px 0; color:var(--color-primary); }
.work-status { display:flex; align-items:flex-start; gap:12px; padding:16px; margin-bottom:16px; border:1px solid var(--color-border); border-radius:16px; background:white; }
.work-status-dot { flex:0 0 12px; width:12px; height:12px; margin-top:7px; border-radius:50%; background:#91968e; box-shadow:0 0 0 5px #91968e20; }
.work-status strong { display:block; font-size:1.05rem; }
.work-status p { margin:4px 0 0; color:var(--color-muted); font-size:.85rem; }
.work-status small { display:block; margin-top:7px; color:var(--color-primary); font-weight:600; }
.work-status-live { border-color:#a9c9af; background:#f3f9f2; }
.work-status-live .work-status-dot { background:#2d7a45; box-shadow:0 0 0 5px #2d7a4520; }
.work-status-blocked { border-color:#e7c989; background:#fff9ed; }
.work-status-blocked .work-status-dot { background:#bd7b1f; box-shadow:0 0 0 5px #bd7b1f20; }
.work-readiness { list-style:none; padding:0; margin:0 0 16px; display:grid; gap:8px; font-size:.85rem; }
.work-readiness li { display:flex; align-items:center; gap:9px; }
.work-readiness li > span { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#f3e2bd; color:#77531d; font-size:.75rem; font-weight:700; }
.work-readiness li.is-ready { color:var(--color-muted); }
.work-readiness li.is-ready > span { background:#dfeedd; color:#2d6b3d; }
.profile-editor-note { padding:18px 22px; background:#fff4e1; border:1px solid #ecdab8; border-radius:16px; margin:0 0 24px; }
.profile-editor-note p { color:#675844; margin:6px 0 0; font-size:.9rem; }
.profile-editor-note .profile-inline-link { display:inline-block; margin-top:10px; }
.profile-slot-summary { margin:0 0 24px; }
.profile-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:start; }
.profile-editor-main { min-width:0; }
.profile-editor-section { padding:28px; }
.profile-editor-section > h2 { font-size:1.2rem; }
.profile-editor-section > .subtitle { font-size:.9rem; }
.profile-editor-aside { position:sticky; top:110px; min-width:0; }
.profile-editor-tips { background:#eef3e9; border-color:#dce5d6; }
.profile-editor-tips .eyebrow { margin-bottom:12px; }
.profile-editor-tips h2 { margin:0 0 20px; line-height:1.5; font-size:1.45rem; }
.profile-editor-tips ul { padding-left:20px; color:var(--color-muted); font-size:.88rem; margin-bottom:22px; }
.profile-editor-tips li + li { margin-top:12px; }
.profile-editor-tips a,.profile-inline-link { font-size:.85rem; font-weight:600; }
.profile-boost h2 { font-size:1.05rem; }
.profile-boost .subtitle { font-size:.88rem; }
.profile-field-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.profile-form-part { margin-top:28px; padding-top:28px; border-top:1px solid var(--color-border); }
.profile-rate-field { background:#f8faf5; border:1px solid var(--color-border); border-radius:16px; padding:16px; }
.profile-rate-field label { margin-top:0; }
.profile-rate-field input { background:white; }
.profile-rate-field .field-help { display:block; margin-top:8px; }
.profile-tag-suggestions { margin-bottom:22px; }
.profile-tag-suggestions button { border-radius:100px; }
.profile-privacy { border:1px solid var(--color-border); border-radius:16px; padding:18px; }
.profile-privacy legend { font-size:1rem; font-weight:600; padding:0 8px; }
.profile-privacy .field-help { margin-bottom:0; }
.profile-save-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin:26px -28px -28px; padding:22px 28px; background:#f5f7f1; border-top:1px solid var(--color-border); border-radius:0 0 var(--radius) var(--radius); }
.profile-save-bar p { font-size:.82rem; color:var(--color-muted); margin:0; }
.profile-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.profile-photo-tile { min-width:0; }
.profile-photo-tile > img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.profile-photo-tile .field-help { margin:8px 0; }
.profile-photo-tile .btn-row { gap:8px; }
.profile-photo-tile form { margin:0; }
.profile-section-nav { scroll-margin-top:100px; }
.profile-section-nav a { flex:1; border-radius:14px; min-width:0; padding:14px 16px; }
.profile-section-nav strong,.profile-section-nav small { display:block; }
.profile-section-nav strong { font-size:1rem; }
.profile-section-nav small { color:var(--color-muted); margin-top:3px; }
.profile-section-nav a[aria-current="location"] { background:var(--color-primary); border-color:var(--color-primary); color:white; }
.profile-section-nav a[aria-current="location"] small { color:#eef3e9; }
.profile-editor-focused .profile-editor-layout { display:block; max-width:820px; margin-inline:auto; }
.profile-editor-focused .profile-editor-aside { position:static; display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; border-top:1px solid var(--color-border); padding-top:24px; }
.profile-editor-focused .profile-editor-tips h2 br { display:none; }
.profile-editor-focused .profile-editor-tips h2 { font-size:1.1rem; }
.profile-form-shortcuts { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.profile-form-shortcuts a { padding:8px 14px; background:#f0f5ec; border-radius:10px; }
.profile-work-extras { margin-top:24px; border-top:1px solid var(--color-border); padding-top:18px; }
.profile-work-extras > summary { color:var(--color-primary); font-size:.9rem; cursor:pointer; }
.profile-editor-focused .profile-save-bar { position:sticky; bottom:12px; z-index:5; border:1px solid var(--color-border); border-radius:14px; margin:24px 0 0; padding:16px; box-shadow:0 4px 20px #293d2715; }
@media (max-width:640px) {
  .profile-section-nav { gap:6px; }
  .profile-section-nav a { padding:12px 7px; text-align:center; }
  .profile-section-nav strong { font-size:.88rem; }
  .profile-section-nav small { font-size:.7rem; }
  .profile-editor-focused .profile-editor-aside { grid-template-columns:minmax(0,1fr); }
  .profile-editor-focused .profile-save-bar { bottom:126px; }
  .profile-editor-focused .profile-save-bar button { width:100%; }
}
@media (max-height:600px) {
  .profile-editor-focused .profile-save-bar { position:static; }
}
@media (max-width:900px) {
  .profile-editor-layout { grid-template-columns:minmax(0,1fr); }
  .profile-editor-aside { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .profile-editor-hero { flex-wrap:wrap; }
  .profile-preview-link { margin-left:108px; }
  .profile-work-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .profile-work-option + .profile-work-option { border-left:0; padding-left:0; border-top:1px solid #dce5d6; padding-top:20px; }
}
@media (max-width:520px) {
  .profile-editor-hero { gap:14px; padding:20px 0; }
  .profile-editor-avatar { flex-basis:60px; height:60px; border-radius:20px; }
  .profile-editor-title h1 { font-size:1.4rem; }
  .profile-editor-title .subtitle { font-size:.85rem; }
  .profile-preview-link { margin-left:0; width:100%; justify-content:center; }
  .profile-section-nav { gap:7px; }
  .profile-section-nav a { padding:8px 11px; font-size:.8rem; }
  .profile-editor .profile-section-nav a { padding:12px 6px; }
  .profile-editor .profile-section-nav strong { font-size:.8rem; white-space:nowrap; }
  .profile-editor-section,.profile-work { padding:20px; }
  .profile-field-pair,.profile-editor-aside { grid-template-columns:minmax(0,1fr); }
  .profile-save-bar { margin:24px -20px -20px; padding:20px; }
  .profile-save-bar button { width:100%; }
  .profile-photo-grid { gap:12px; }
  .profile-photo-tile .btn-row { align-items:stretch; flex-direction:column; }
  .profile-photo-tile button { width:100%; }
}

.notification-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:24px 0 18px; }
.notification-toolbar p,.notification-toolbar form { margin:0; }
.notification-toolbar p { font-size:.9rem; }
.notification-settings { box-shadow:none; background:#f5f7f1; }
.notification-settings summary { font-weight:600; color:var(--color-primary); }
.notification-settings h2 { font-size:1rem; margin:20px 0 10px!important; }
.notification-settings #push-card { padding-bottom:18px; border-bottom:1px solid var(--color-border); }
.notification-email-settings form > label { display:flex; align-items:center; gap:10px; }
.notification-item { box-shadow:none; }
.notification-unread { border-left:4px solid var(--color-primary); background:#fcfdf9; }
.notification-item-heading { display:flex; align-items:center; gap:14px; }
.notification-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; background:#eef3e9; color:var(--color-primary); border-radius:13px; }
.notification-item-heading > div { flex:1; min-width:0; }
.notification-item h2 { font-size:1.05rem; margin:0 0 4px; overflow-wrap:anywhere; }
.notification-time { font-size:.8rem; color:var(--color-muted); margin:0; }
.notification-read-state { font-size:.75rem; color:var(--color-muted); }
.notification-unread .notification-read-state { color:var(--color-primary); font-weight:600; }
.notification-body { margin:16px 0; overflow-wrap:anywhere; }
.notification-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.85rem; }
.notification-actions form { margin:0; }
@media(max-width:520px) {
  .notification-item-heading { flex-wrap:wrap; gap:10px; }
  .notification-read-state { flex-basis:100%; padding-left:52px; }
  .notification-toolbar { align-items:flex-start; }
  .notification-toolbar .muted { display:block; }
}

/* A compact guide with progressively disclosed policy details. */
.guide-page { max-width:1000px; }
.guide-hero { padding:42px 32px; text-align:center; border:1px solid #dce5d6; border-radius:26px; background:linear-gradient(125deg,#edf3e6,#fffaf0); }
.guide-hero .eyebrow { margin-bottom:10px; }
.guide-hero h1 { font-size:clamp(1.7rem,4vw,2.6rem); }
.guide-hero .subtitle { margin:0 auto; max-width:540px; }
.guide-jump-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:22px 0 30px; }
.guide-jump-links a { background:white; border:1px solid var(--color-border); border-radius:100px; padding:9px 16px; font-size:.85rem; }
.guide-jump-links a:hover { background:#eef3e9; text-decoration:none; border-color:var(--color-primary); }
.guide-page section[id] { scroll-margin-top:110px; }
.guide-safety { padding:28px; border:1px solid #e5d0a5; border-radius:22px; background:#fff5e5; }
.guide-section-icon { display:inline-grid; place-items:center; width:42px; height:42px; background:#fae7c5; border-radius:13px; color:#795425; }
.guide-safety h2 { margin:14px 0 12px; }
.guide-safety > p { max-width:780px; color:#695a43; }
.guide-safety-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:24px 0; }
.guide-safety-options > div { padding:20px; background:#ffffffa8; border:1px solid #ecddc3; border-radius:16px; }
.guide-safety-options h3 { margin:0 0 8px; }
.guide-safety-options p { margin:0; font-size:.9rem; }
.guide-text-link { font-weight:600; font-size:.9rem; }
.guide-section { padding-top:40px; }
.guide-section > .eyebrow { margin:0 0 6px; }
.guide-section > h2 { margin:0 0 16px; font-size:1.5rem; }
.guide-steps { list-style:none; padding:0; margin:22px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; counter-reset:guide-step; }
.guide-steps li { counter-increment:guide-step; display:flex; align-items:flex-start; gap:16px; padding:22px; background:white; border:1px solid var(--color-border); border-radius:18px; font-size:.95rem; }
.guide-steps li::before { content:counter(guide-step,decimal-leading-zero); flex:0 0 38px; height:38px; display:grid; place-items:center; background:#eef3e9; color:var(--color-primary); border-radius:12px; font-weight:700; }
.guide-steps li:last-child { grid-column:1 / -1; }
.guide-faq-list { background:white; border:1px solid var(--color-border); border-radius:20px; overflow:hidden; }
.guide-page .guide-faq-list details { padding:0; }
.guide-page .guide-faq-list details:last-child { border-bottom:0; }
.guide-page .guide-faq-list summary { padding:20px 24px; font-size:.95rem; }
.guide-page .guide-faq-list summary:hover { background:#f6f8f2; }
.guide-page .guide-faq-list summary:focus-visible { outline-offset:-4px; }
.guide-page .guide-faq-list details[open] summary { color:var(--color-primary); background:#f1f5ec; }
.guide-page .guide-faq-list details > p,.guide-answer { padding:0 24px 22px; margin:16px 0 0; font-size:.92rem; line-height:1.85; color:var(--color-text); }
.guide-answer .field-help { display:inline-block; margin-top:8px; }
.guide-section > .field-help { margin:18px 0 0; }
.guide-footer-action { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; padding:28px; border-radius:20px; background:#eaf0e3; }
.guide-footer-action h2 { margin:0; font-size:1.2rem; }
.guide-footer-action .btn { flex-shrink:0; }
.guide-book { position:relative; scroll-margin-top:92px; margin:28px auto 0; padding:28px clamp(20px,5vw,54px) 20px; border:1px solid #d9c8aa; border-left:7px solid #a7773d; border-radius:4px 14px 14px 4px; background:#fffaf0; box-shadow:0 16px 40px #0003, inset 8px 0 14px #72512e14; }
.guide-page .guide-hero { padding:16px 0 6px; border:0; background:transparent; box-shadow:none; }
.guide-page .guide-hero h1 { font-size:clamp(1.7rem,4vw,2.25rem); }
.guide-book::before { content:""; position:absolute; left:10px; top:16px; bottom:16px; width:1px; background:#d6c4a7; pointer-events:none; }
.guide-book-paper { position:relative; min-width:0; margin-top:14px; padding:0; perspective:1200px; }
.guide-book-paper > section { min-width:0; margin:12px 0; padding:28px; }
.guide-book.is-ready .guide-book-paper { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.guide-book.is-ready .guide-book-paper > section { height:570px; margin:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.guide-book-paper > section[hidden] { display:none!important; }
.guide-turn-sheet { position:absolute; z-index:4; box-sizing:border-box; overflow:hidden; padding:28px; backface-visibility:hidden; pointer-events:none; }
.guide-book-paper .guide-steps,.guide-book-paper .guide-safety-options { grid-template-columns:minmax(0,1fr); gap:12px; }
.guide-book-paper .guide-steps li:last-child { grid-column:auto; }
.guide-book-paper .guide-steps li { padding:16px; }
.guide-book-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid #ddceb5; }
.guide-book-kicker { display:block; color:#856945; font-size:.86rem; font-weight:700; }
.guide-book-head-count { flex:none; color:#856945; font-size:.86rem; font-weight:700; }
.guide-contents { margin:12px 0; }
.guide-contents > summary { width:max-content; cursor:pointer; color:#76542d; font-size:.9rem; font-weight:700; }
.guide-contents > summary span { color:#806f59; font-weight:400; }
.guide-contents .guide-jump-links { justify-content:flex-start; padding:12px 0 0; }
.guide-book-toolbar { align-items:center; justify-content:space-between; gap:12px; padding:0 2px 16px; }
.guide-book-toolbar:not([hidden]) { display:flex; }
.guide-book-toolbar-bottom { justify-content:flex-end; margin-top:24px; padding:18px 0 0; border-top:1px solid #ddceb5; }
.guide-book-count { color:#735735; font-weight:700; font-size:.86rem; }
.guide-book-actions { display:flex; gap:8px; }
.guide-book-actions button { border:1px solid #bd9a66; border-radius:999px; background:#fff8e9; color:#4b341c; padding:9px 14px; cursor:pointer; font:inherit; font-weight:700; }
.guide-book-actions button:hover:not(:disabled),.guide-book-actions button:focus-visible { background:#eed5a4; }
.guide-book-actions button:disabled { opacity:.4; cursor:default; }
.guide-book .guide-jump-links a { background:#f6eddd; border-color:#d4b988; color:#593b20; }
.guide-book .guide-jump-links a[aria-current=page] { background:#876032; border-color:#876032; color:#fff; }
.guide-book .guide-safety { background:#fff4de; }
@media(prefers-reduced-motion:reduce) { .guide-book.is-ready .guide-book-paper > section:not([hidden]) { animation:none; } }
@media(max-width:650px) {
  .guide-hero { padding:30px 20px; }
  .guide-jump-links { justify-content:flex-start; gap:8px; }
  .guide-jump-links a { padding:9px 12px; font-size:.8rem; }
  .guide-safety { padding:22px; }
  .guide-safety-options,.guide-steps { grid-template-columns:minmax(0,1fr); }
  .guide-safety-options { gap:12px; }
  .guide-section { padding-top:30px; }
  .guide-steps li { padding:18px; }
  .guide-page .guide-faq-list summary { padding:18px; }
  .guide-page .guide-faq-list details > p,.guide-answer { padding:0 18px 18px; }
  .guide-footer-action { flex-direction:column; align-items:stretch; text-align:center; }
  .guide-book { padding:20px 16px 18px 24px; margin:18px -10px 0; border-radius:3px 12px 12px 3px; }
  .guide-book.is-ready .guide-book-paper { grid-template-columns:minmax(0,1fr); }
  .guide-book.is-ready .guide-book-paper > section { height:min(58svh,540px); min-height:360px; padding:20px; }
  .guide-book-head { gap:10px; }
  .guide-book-head-count { padding-top:3px; }
  .guide-book-toolbar { flex-wrap:wrap; }
  .guide-book-actions { width:100%; justify-content:space-between; }
  .guide-book-actions button { min-height:42px; }
  .guide-book .guide-jump-links { flex-wrap:wrap; }
}
@media(max-width:799px) { .guide-book.is-ready .guide-book-paper { grid-template-columns:minmax(0,1fr); } }

.wallet-page { max-width:1060px; margin:auto; }
.wallet-page .wallet-balances { gap:18px; margin:28px 0; }
.wallet-page .balance-tile { padding:26px; }
.wallet-page .balance-tile .amount { font-size:clamp(1.7rem,3vw,2.3rem); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.wallet-page .balance-tile .label { font-size:.85rem; margin-top:8px; }
.wallet-actions-grid .card { box-shadow:none; }
.wallet-actions-grid h2 { font-size:1.2rem; }
.wallet-actions-grid .subtitle { font-size:.9rem; }
.wallet-history { margin-top:34px; }
.wallet-history-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.wallet-history-heading h2 { margin:0 0 6px; }
.wallet-history-heading p { margin:0; max-width:630px; }
.wallet-history-heading > a { font-size:.85rem; }
.wallet-ledger-list { border:1px solid var(--color-border); border-radius:20px; background:white; overflow:hidden; }
.wallet-ledger-item { display:flex; gap:16px; padding:22px; align-items:flex-start; }
.wallet-ledger-item + .wallet-ledger-item { border-top:1px solid var(--color-border); }
.wallet-ledger-icon { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; background:#f0f4eb; border-radius:13px; color:var(--color-primary); font-size:1.2rem; }
.wallet-ledger-copy { min-width:0; flex:1; }
.wallet-ledger-copy h3 { margin:0 0 6px; font-size:1rem; }
.wallet-ledger-description { font-size:.9rem; margin:0 0 8px; overflow-wrap:anywhere; }
.wallet-ledger-meta { margin:0; font-size:.78rem; color:var(--color-muted); }
.wallet-ledger-amount { text-align:right; font-variant-numeric:tabular-nums; }
.wallet-ledger-amount strong { display:block; font-size:1.15rem; }
.wallet-ledger-amount span { display:block; font-size:.78rem; color:var(--color-muted); margin-top:7px; }
.wallet-debit { color:var(--color-danger); }
.wallet-credit { color:var(--color-success); }
.wallet-empty { text-align:center; padding:40px 22px; color:var(--color-muted); }
.wallet-empty h3 { color:var(--color-text); }
.wallet-empty p { margin:0; }
.wallet-help-link { margin:22px 0 0; font-size:.9rem; }
@media(max-width:600px) {
  .wallet-page .wallet-balances { gap:12px; }
  .wallet-page .balance-tile { padding:20px; }
  .wallet-ledger-item { flex-wrap:wrap; padding:18px; gap:12px; }
  .wallet-ledger-amount { flex-basis:100%; text-align:left; padding-left:52px; }
  .wallet-ledger-amount strong { display:inline; margin-right:10px; }
}
.day-schedule { margin-bottom:22px; }
.day-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; }
.day-tab { flex:0 0 auto; padding:7px 14px; border-radius:30px; background:#eff1e9; color:var(--color-muted); font-size:.82rem; font-weight:600; white-space:nowrap; }
.day-tab-active { background:var(--color-primary); color:#fff; }
.day-timeline { display:flex; gap:10px; }
.day-timeline-hours { position:relative; flex:0 0 44px; height:576px; }
.day-timeline-hours span { position:absolute; left:0; transform:translateY(-50%); font-size:.7rem; color:var(--color-muted); }
.day-timeline-track { position:relative; flex:1; height:576px; border-left:1px solid var(--color-border); }
.day-timeline-gridline { position:absolute; left:0; right:0; border-top:1px solid var(--color-border); opacity:.6; }
.day-bar { position:absolute; left:6px; right:6px; border-radius:8px; padding:3px 8px; font-size:.75rem; overflow:hidden; box-sizing:border-box; }
.day-bar span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.day-bar-open { background:#e6f1e3; color:#305d36; }
.day-bar-busy { background:#fae8e6; color:#8d3732; z-index:1; left:16px; }
.day-schedule-legend { display:flex; align-items:center; gap:8px; margin-top:14px; }
.day-legend-swatch { display:inline-block; width:12px; height:12px; border-radius:4px; }
.day-legend-swatch + .day-legend-swatch { margin-left:14px; }
@media(max-width:480px) {
  .day-timeline-hours { flex-basis:34px; }
  .day-timeline-hours span { font-size:.62rem; }
  .day-bar { font-size:.68rem; }
}

.availability-toolbar { display:flex; align-items:center; gap:18px; justify-content:space-between; margin:24px 0; }
.availability-toolbar .day-tabs { min-width:0; margin:0; padding:5px 0; }
.availability-toolbar > .btn { flex-shrink:0; }
.availability-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:start; }
.availability-layout .card { box-shadow:none; }
.availability-layout h2 { font-size:1.3rem; margin:0 0 20px; }
.availability-layout .eyebrow { margin:0 0 6px; }
.availability-form { background:#f6f8f2; scroll-margin-top:100px; }
.availability-form .search-primary { display:grid; grid-template-columns:1fr 1fr; }
.availability-form .search-primary > div:first-child { grid-column:1 / -1; }
.availability-form .weekday-pick { padding:8px 10px; font-size:.8rem; }
.availability-form .slot-options { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.availability-form details { margin:20px 0; }
.availability-form details summary { cursor:pointer; font-size:.9rem; font-weight:600; }
.availability-preview { padding:16px; border:1px solid #dce5d6; border-radius:12px; background:white; font-size:.9rem; color:var(--color-primary-dark); line-height:1.8; }
.availability-day-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.availability-day-column { min-width:0; }
.availability-day-column h3 { display:flex; align-items:center; gap:7px; font-size:.92rem; margin:0 0 14px; }
.availability-time-range { padding:14px; border-radius:12px; margin-bottom:10px; }
.availability-time-range strong { display:block; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.availability-time-range span { display:block; font-size:.78rem; margin-top:4px; }
.availability-timeline-details { margin-top:20px; border-top:1px solid var(--color-border); padding-top:18px; }
.availability-timeline-details summary { cursor:pointer; font-size:.88rem; font-weight:600; }
.availability-lane-headings { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0 14px 54px; font-size:.8rem; }
.availability-overview .day-timeline-hours,.availability-overview .day-timeline-track { height:384px; }
.availability-overview .day-bar-busy { left:6px; }
.availability-overview .day-bar { padding:0; border-radius:4px; }
.availability-saved { margin:12px 0 28px; }
.availability-saved > h2 { margin:0 0 8px; font-size:1.25rem; }
.availability-saved-row { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:20px; border:1px solid var(--color-border); border-radius:16px; background:white; margin:12px 0; }
.availability-saved-row > div { min-width:0; }
.availability-saved-row strong { font-size:.92rem; }
.availability-saved-row p { margin:6px 0 0; }
.availability-saved-row form { flex-shrink:0; margin:0; }
.availability-all { box-shadow:none; }
.availability-all > summary { cursor:pointer; font-weight:600; }
@media(max-width:800px) {
  .availability-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .availability-toolbar { flex-wrap:wrap; }
  .availability-toolbar .day-tabs { flex-basis:100%; }
  .availability-saved-row { flex-wrap:wrap; }
}
@media(max-width:420px) {
  .availability-day-columns { gap:10px; }
  .availability-day-column h3 { flex-wrap:wrap; font-size:.85rem; }
  .availability-time-range { padding:10px; }
  .availability-time-range strong { font-size:.9rem; }
}
.account-avatar { overflow:hidden; }
.account-avatar img,.settings-avatar img { width:100%; height:100%; object-fit:cover; }
.settings-layout { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start; margin-bottom:22px; }
.settings-avatar-row { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.settings-avatar { display:grid; place-items:center; overflow:hidden; flex:0 0 96px; width:96px; height:96px; border-radius:50%; background:var(--color-primary); color:#fff; font-size:2.4rem; }
.settings-avatar-row form { flex:1; min-width:200px; }
.settings-facts { display:grid; gap:14px; margin:0 0 16px; }
.settings-facts div { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--color-border); padding-bottom:12px; }
.settings-facts div:last-child { border-bottom:0; padding-bottom:0; }
.settings-facts dt { color:var(--color-muted); font-size:.88rem; }
.settings-facts dd { margin:0; font-weight:600; overflow-wrap:anywhere; }

/* Admin workspace, scoped independently of member pages. */
.admin-entry { border-top:1px solid var(--color-border); margin-top:6px; font-weight:600; }
.admin-shell { display:grid; grid-template-columns:244px minmax(0,1fr); max-width:1500px; margin:auto; padding:24px 24px 0; gap:28px; align-items:start; }
.admin-shell > main.container { min-width:0; max-width:none; padding:8px 0 48px; }
.admin-sidebar { position:sticky; top:96px; max-height:calc(100dvh - 120px); overflow-y:auto; background:white; border:1px solid var(--color-border); border-radius:20px; }
.admin-sidebar > summary { display:none; }
.admin-sidebar:not([open]) > nav,.admin-sidebar > nav { display:block; padding:20px 14px; }
.admin-sidebar-heading { display:flex; flex-direction:column; gap:8px; padding:0 8px 18px; border-bottom:1px solid var(--color-border); }
.admin-sidebar-heading .eyebrow { margin:0; }
.admin-role { display:inline-block; align-self:flex-start; background:#edf2e7; padding:5px 10px; border-radius:8px; font-size:.78rem; color:var(--color-primary-dark); }
.admin-nav-group { margin-top:20px; }
.admin-nav-group > p { margin:0 8px 8px; font-size:.74rem; color:var(--color-muted); font-weight:600; }
.admin-nav-group a { display:flex; gap:10px; align-items:center; padding:10px; margin:2px 0; border-radius:10px; color:var(--color-text); font-size:.86rem; }
.admin-nav-group a:hover { background:#f1f5ec; text-decoration:none; }
.admin-nav-group a[aria-current="page"] { background:var(--color-primary); color:white; }
.admin-back-account { display:block; padding:16px 8px 0; margin-top:18px; border-top:1px solid var(--color-border); font-size:.8rem; }
.admin-dashboard-heading { padding:26px; background:linear-gradient(120deg,#edf3e6,#fffaf0); border-radius:22px; border:1px solid #dde5d6; margin-bottom:28px; }
.admin-dashboard-heading .eyebrow { margin:0 0 8px; }
.admin-dashboard-heading h1 { font-size:clamp(1.6rem,3vw,2.2rem); }
.admin-dashboard-heading .subtitle { margin-bottom:14px; }
.admin-queue-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.admin-queue-heading h2 { margin:0; font-size:1.25rem; }
.admin-queue-heading a { font-size:.85rem; }
.admin-queue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.admin-queue-card { display:block; padding:20px; border:1px solid var(--color-border); border-radius:18px; background:white; color:var(--color-text); }
.admin-queue-card:hover { border-color:var(--color-primary); text-decoration:none; }
.admin-queue-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.73rem; color:var(--color-muted); }
.admin-queue-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#f0f4eb; color:var(--color-primary); }
.admin-queue-count { display:block; font-size:2.3rem; font-variant-numeric:tabular-nums; margin-top:14px; }
.admin-queue-count small { font-size:.78rem; color:var(--color-muted); font-weight:400; }
.admin-queue-card h3 { font-size:1rem; margin:0 0 16px; }
.admin-queue-link { font-size:.82rem; color:var(--color-primary); }
.admin-queue-card.urgent-work { border-color:#e0b5a4; background:#fff8f3; }
.urgent-work .admin-queue-top,.urgent-work .admin-queue-count { color:#99422e; }
.admin-queue-card.has-work:not(.urgent-work) { border-color:#b8cbb0; }
.admin-shortcut-section { margin-top:32px; }
.admin-shortcut-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.admin-shortcut-grid .card { padding:20px; box-shadow:none; }
.admin-shortcut-grid h3 { margin:0 0 14px; font-size:.95rem; }
.admin-shortcut-grid a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; font-size:.84rem; border-top:1px solid var(--color-border); }
.admin-table-scroll { max-width:100%; overflow:auto; margin:20px 0; }
.admin-table-scroll table { min-width:720px; margin:0; }
.voucher-editor { max-width:860px; }
.voucher-editor fieldset { border:0; padding:0; margin:0 0 24px; }
.voucher-editor legend { width:100%; padding:0 0 10px; margin-bottom:14px; border-bottom:1px solid var(--color-border); font-size:1.05rem; font-weight:700; }
.voucher-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; }
.voucher-status { display:inline-flex; padding:5px 10px; border-radius:999px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.voucher-status.is-live { color:#17633f; background:#dcf7e8; }
.voucher-status.is-off { color:#735c36; background:#f3ead7; }
.voucher-actions { min-width:125px; }
.voucher-actions form { margin-top:8px; }
.voucher-danger-zone { max-width:860px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-color:#e3b9ae; background:#fff9f7; }
.voucher-danger-zone h2 { margin:0 0 4px; color:#8b3428; font-size:1.05rem; }
.voucher-danger-zone p { margin:0; }
.voucher-danger-zone form { flex:0 0 auto; margin:0; }
.referral-page { max-width:980px; margin:auto; }
.referral-hero { padding:30px; margin-bottom:20px; border-radius:24px; color:white; background:linear-gradient(135deg,#254f38,#4f7652); }
.referral-hero .eyebrow { color:#dcebdc; }
.referral-hero h1 { color:white; margin-bottom:8px; }
.referral-hero p:last-child { max-width:650px; margin:0; color:#eef6ec; }
.referral-share { display:grid; grid-template-columns:210px minmax(0,1fr); gap:24px; align-items:end; }
.referral-code-label,.referral-stats span { display:block; color:var(--color-muted); font-size:.82rem; }
.referral-code { display:block; margin-top:5px; font-size:1.45rem; letter-spacing:.08em; }
.referral-copy-row { display:flex; gap:8px; }
.referral-copy-row input { min-width:0; flex:1; }
.referral-copy-row button { white-space:nowrap; }
.referral-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.referral-stats .card { margin:0; padding:20px; }
.referral-stats strong { display:inline-block; margin:9px 5px 0 0; font-size:1.65rem; color:var(--color-primary-dark); }
.referral-stats small { color:var(--color-muted); }
.referral-ratio { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,320px); gap:28px; align-items:end; }
.referral-ratio h2,.referral-ratio p { margin-top:0; }
.referral-ratio form { margin:0; }
.referral-ratio button { width:100%; margin-top:10px; }
.referral-table table { min-width:620px; }
.referral-how { margin:28px 0; }
.referral-how ol { list-style:none; counter-reset:steps; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.referral-how li { counter-increment:steps; display:grid; grid-template-columns:38px 1fr; padding:18px; border:1px solid var(--color-border); border-radius:16px; background:white; }
.referral-how li::before { content:counter(steps); grid-row:1/3; display:grid; place-items:center; align-self:start; width:28px; height:28px; border-radius:50%; color:white; background:var(--color-primary); }
.referral-how span { color:var(--color-muted); font-size:.82rem; margin-top:4px; }
@media(max-width:800px){.referral-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.referral-share,.referral-ratio{grid-template-columns:1fr}.referral-how ol{grid-template-columns:1fr}}
@media(max-width:520px){.referral-hero{padding:24px 20px}.referral-copy-row{display:grid;grid-template-columns:1fr 1fr}.referral-copy-row input{grid-column:1/-1}.referral-stats{gap:10px}.referral-stats .card{padding:16px}.referral-stats strong{font-size:1.35rem}}
.admin-inline-settings{display:grid;grid-template-columns:minmax(240px,1fr) 150px 150px auto;gap:16px;align-items:end}.admin-inline-settings h2,.admin-inline-settings p{margin:0}.row-warning{background:#fff7e7}.reconcile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.reconcile-grid .card{margin:0}.reconcile-grid span,.reconcile-grid strong{display:block}.reconcile-grid strong{margin-top:8px;font-size:1.25rem}.check-passed{border-color:#b8d5bd;background:#f4faf4}.check-failed{border-color:#e2aaa0;background:#fff5f3}.journal-filter{display:flex;gap:14px;align-items:end}.journal-filter label{flex:1}.support-page{max-width:880px;margin:auto}.support-form{max-width:560px;margin:20px auto}.support-form .amount-presets{margin-bottom:18px}
@media(max-width:900px){.admin-inline-settings,.reconcile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.admin-inline-settings,.reconcile-grid{grid-template-columns:1fr}.journal-filter{align-items:stretch;flex-direction:column}}
@media(max-width:620px){.voucher-form-grid{grid-template-columns:1fr}}
@media(max-width:1150px) {
 .admin-shell { grid-template-columns:220px minmax(0,1fr); gap:20px; padding:20px; }
 .admin-queue-grid,.admin-shortcut-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
 .admin-shell { display:block; padding:16px 20px 0; }
 .admin-sidebar { position:static; max-height:none; margin-bottom:24px; }
 .admin-sidebar > summary { display:flex; justify-content:space-between; padding:16px; font-weight:600; cursor:pointer; }
 .admin-sidebar:not([open]) > nav { display:none; }
 .admin-sidebar[open] > nav { display:block; }
 .admin-dashboard-heading { padding:22px; }
}
@media(max-width:480px) {
 .admin-shell { padding:14px 16px 0; }
 .admin-queue-grid,.admin-shortcut-grid { grid-template-columns:minmax(0,1fr); }
 .admin-queue-card { padding:18px; }
}
/* End-of-trip rating, after Grab: big stars first, the rest once a star is picked. */
.rate-heading{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:4px}
.rate-heading h2{margin:0;font-size:1.2rem}
.rate-avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#eef3ea;color:var(--color-primary-dark);font-size:1.6rem;font-weight:700}
.star-rating{border:0;padding:0;margin:8px 0 4px;text-align:center}
.star-rating .stars{display:inline-flex;gap:4px}
.star-rating .stars label{font-size:2.9rem;line-height:1;color:#d9ddd3;cursor:pointer;padding:2px;transition:color .12s,transform .12s;-webkit-tap-highlight-color:transparent}
.star-rating .stars input:checked+label,.star-rating .stars label:has(~input:checked){color:var(--color-accent)}
@media (hover:hover){.star-rating .stars:hover label{color:var(--color-accent)}.star-rating .stars label:hover~label{color:#d9ddd3}}
.star-rating .stars input:checked+label{transform:scale(1.12)}
.star-rating .stars input:focus-visible+label{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:8px}
.star-label{margin:6px 0 0;min-height:1.4em;font-weight:600;color:var(--color-muted)}
.star-rating:has(input:checked) .star-label{color:var(--color-text)}
@supports selector(:has(*)){.post-trip-dialog .after-rating,.post-trip-card .after-rating{display:none}.post-trip-dialog:has(input[name=rating]:checked) .after-rating,.post-trip-card:has(input[name=rating]:checked) .after-rating{display:block}}
/* Tip amounts as chips, the way Grab offers them; the amount boxes only when asked for. */
.tip-options label:has(>input[type=radio]){position:relative;padding:9px 16px;border:1px solid var(--color-border);border-radius:999px;background:#fff;font-weight:600;cursor:pointer}
.tip-options label:has(>input[type=radio]) input{position:absolute;opacity:0;pointer-events:none}
.tip-options label:has(>input[type=radio]:checked){background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.tip-options label:has(>input[type=radio]:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
@supports selector(:has(*)){.tip-options:not(:has([name=tip][value=custom]:checked)) #custom-tip{display:none}.tip-options:not(:has(#support-platform:checked)) :is(#donation-amount,label[for=donation-amount]){display:none}}
.rate-heading h2:focus{outline:none}

/* The deposit amount belongs to one of the three answers; it only shows once
   that answer is picked. Without :has() it simply stays visible. */
#chat-mode:has(input[name="chatMode"]:not([value="deposit"]):checked) .deposit-field { display: none; }

/* ---- Photo manager (profile editor): Instagram's square grid, Facebook's ⋯ menu. */
.photo-manager-head h2 { margin:0; }
.photo-manager-head p { margin:2px 0 0; color:var(--color-muted); font-size:.9rem; }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:16px 0; }
.photo-cell, .photo-add { position:relative; aspect-ratio:1; margin:0; border-radius:10px; overflow:visible; }
.photo-cell > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:10px; background:#eef1ea; }
.photo-add { display:grid; place-content:center; justify-items:center; gap:2px; border:2px dashed #c9d3c2; background:#f6f8f3; color:var(--color-primary); cursor:pointer; overflow:hidden; }
.photo-add span { font-size:2rem; line-height:1; font-weight:300; }
.photo-add small { font-weight:600; }
.photo-add:hover { background:#eef3e9; border-color:var(--color-primary); }
.photo-chip { position:absolute; top:6px; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:700; background:#0b1a12b8; color:#fff; pointer-events:none; }
.photo-chip-cover { left:6px; bottom:6px; top:auto; }
.photo-chip-lock { left:6px; bottom:6px; top:auto; padding:2px 6px; }
.photo-chip-cover + .photo-chip-lock { left:auto; right:6px; }
.photo-menu { position:absolute; top:4px; right:4px; }
.photo-menu > summary { list-style:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#0b1a1280; color:#fff; font-size:1rem; line-height:1; cursor:pointer; }
/* A bigger invisible tap area than the dot itself, as on Instagram. */
.photo-menu > summary::after { content:""; position:absolute; inset:-8px; }
.photo-menu > summary::-webkit-details-marker { display:none; }
.photo-menu > summary:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
.photo-menu-panel { position:absolute; right:0; top:40px; z-index:30; width:230px; padding:6px; border-radius:14px; background:#fff; box-shadow:0 12px 36px #1b2a1d33, 0 0 0 1px #0000000d; }
.photo-menu-panel form { margin:0; }
.photo-menu-panel :is(button, a) { display:block; width:100%; padding:11px 12px; border:0; border-radius:10px; background:none; color:var(--color-text); font:inherit; font-weight:600; text-align:left; text-decoration:none; cursor:pointer; box-shadow:none; min-height:0; }
.photo-menu-panel :is(button, a):hover { background:#f1f4ee; }
.photo-menu-title { margin:4px 12px 6px; font-size:.78rem; color:var(--color-muted); }
.photo-menu-danger { color:var(--color-danger) !important; }
.photo-menu-cancel { display:none !important; }
.photo-upload { display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:14px; background:#f6f8f3; }
.photo-upload > img { width:92px; height:92px; object-fit:cover; border-radius:10px; flex:0 0 92px; }
.photo-upload { flex-wrap:wrap; }
.photo-upload-previews { display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:6px; flex:1 1 100%; }
.photo-upload-previews[hidden] { display:none; }
.photo-upload-previews img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }
.photo-upload-body { flex:1; min-width:0; }
.photo-upload-label { font-weight:700; }
/* Phones: the menu is a sheet from the bottom, the way both apps do it. */
@media (max-width:640px) {
  .photo-grid { gap:3px; }
  .photo-cell > img, .photo-cell, .photo-add { border-radius:6px; }
  .photo-menu[open] > summary::before { content:""; position:fixed; inset:0; z-index:2147483000; background:#0000004d; }
  .photo-menu-panel { position:fixed; left:0; right:0; top:auto; bottom:0; z-index:2147483001; width:auto; padding:10px 12px calc(14px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; }
  .photo-menu-panel :is(button, a) { padding:14px; font-size:1rem; text-align:center; }
  .photo-menu-title { text-align:center; }
  .photo-menu-cancel { display:block !important; margin-top:6px; background:#f1f4ee !important; }
}
/* With script, the upload box stays out of the way until a photo is picked
   from the + tile; then it shows the preview, the privacy choice and Upload. */
.js-photo-upload .photo-upload:not(.has-file) { display:none; }
.js-photo-upload .photo-upload .photo-upload-label, .js-photo-upload .photo-upload input[type=file] { display:none; }

/* ---- Public talent profile (views/profile/show.ejs) ---- */
.pp-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pp-more { position:relative; }
.pp-more > summary { list-style:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--color-border); background:#fff; font-size:1.2rem; cursor:pointer; }
.pp-more > summary::-webkit-details-marker { display:none; }
.pp-more-panel { position:absolute; right:0; top:46px; z-index:50; width:230px; padding:6px; border-radius:14px; background:#fff; box-shadow:0 12px 36px #1b2a1d33, 0 0 0 1px #0000000d; }
.pp-more-panel form { margin:0; }
.pp-more-panel :is(button, a) { display:block; width:100%; padding:11px 12px; border:0; border-radius:10px; background:none; color:var(--color-text); font:inherit; font-weight:600; text-align:left; text-decoration:none; box-shadow:none; min-height:0; cursor:pointer; }
.pp-more-panel :is(button, a):hover { background:#f1f4ee; }
.pp-danger { color:var(--color-danger) !important; }
.pp-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start; margin-top:12px; }
.pp-hero { position:relative; border-radius:22px; overflow:hidden; background:#eef1ea; }
.pp-slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.pp-slides::-webkit-scrollbar { display:none; }
.pp-slide { flex:0 0 100%; scroll-snap-align:center; aspect-ratio:4/5; max-height:620px; margin:0; border-radius:0; }
.pp-slide > img, .pp-hero > .pp-slide > img { width:100%; height:100%; object-fit:cover; display:block; }
.pp-hero > .pp-slide { width:100%; }
.pp-dots { position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.pp-dots span { width:7px; height:7px; border-radius:50%; background:#ffffff80; box-shadow:0 0 4px #0004; }
.pp-dots span.on { background:#fff; }
.pp-count { position:absolute; top:12px; right:12px; padding:3px 10px; border-radius:999px; background:#0b1a12a6; color:#fff; font-size:.78rem; font-weight:700; }
.pp-hero-badges { position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; }
.pp-hero-badges .badge { box-shadow:0 2px 8px #0002; }
.pp-head { padding:18px 2px 4px; }
.pp-name { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pp-name h1 { margin:0; font-size:clamp(1.6rem,6vw,2.1rem); line-height:1.2; }
.pp-sub { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:6px 0 0; color:var(--color-muted); }
.pp-sub .icon { width:18px; height:18px; }
.pp-dot { opacity:.6; }
.pp-stats { display:grid; grid-template-columns:repeat(3,1fr); margin:16px 0 4px; border:1px solid var(--color-border); border-radius:16px; background:#fff; }
.pp-stats > div { padding:12px 8px; text-align:center; }
.pp-stats > div + div { border-left:1px solid var(--color-border); }
.pp-stats dt { font-size:.78rem; color:var(--color-muted); }
.pp-stats dd { margin:2px 0 0; font-weight:800; font-size:1.08rem; }
.pp-stats small { font-weight:500; color:var(--color-muted); font-size:.75rem; }
.pp-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pp-tags .tag { padding:6px 12px; border-radius:999px; background:#eef3e9; color:var(--color-primary-dark); font-weight:600; }
.pp-section { margin-top:26px; }
.pp-section h2 { margin:0 0 10px; font-size:1.2rem; }
.pp-locked { display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:16px; background:#f6f8f3; border:1px dashed #c9d3c2; }
.pp-locked > span { font-size:1.5rem; }
.pp-locked p { margin:4px 0 0; }
.pp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.pp-grid .photo-wrap { aspect-ratio:1; margin:0; border-radius:10px; }
.pp-grid img { width:100%; height:100%; object-fit:cover; }
.pp-reviews { display:grid; gap:12px; }
.pp-review { padding:16px; border-radius:16px; background:#fff; border:1px solid var(--color-border); }
.pp-review .prose { margin:8px 0 0; }
.pp-stars { color:#e0a740; letter-spacing:2px; }
.pp-stars span { color:#dfe3da; }
.pp-reply { margin:10px 0 0; padding:10px 12px; border-radius:12px; background:#f6f8f3; font-size:.95rem; }
.pp-reply-form summary { margin-top:10px; color:var(--color-primary); font-weight:600; cursor:pointer; }
.pp-guide { margin-top:22px; }
.pp-book { position:sticky; top:96px; display:grid; gap:14px; padding:20px; border-radius:22px; background:#fff; box-shadow:0 10px 36px #293d2718; border:1px solid var(--color-border); }
.pp-book-price strong { font-size:1.8rem; }
.pp-book-price small { margin-left:4px; color:var(--color-muted); }
.pp-book-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pp-book-actions:has(> :only-child) { grid-template-columns:1fr; }
.pp-book-actions form { margin:0; }
.pp-book-actions :is(.btn, button) { width:100%; justify-content:center; margin:0; }
.pp-book-notes p { margin:0 0 6px; }
/* Phones: the booking card becomes a bar above the tab bar, and the chat
   bubble moves up out of its way. */
@media (max-width:860px) {
  .pp-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .pp-hero { margin:0 -16px; border-radius:0; }
  .pp-book { position:fixed; left:0; right:0; top:auto; bottom:calc(66px + env(safe-area-inset-bottom)); z-index:39; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:10px 16px; border-radius:18px 18px 0 0; box-shadow:0 -6px 24px #293d271c; }
  .pp-book-price strong { font-size:1.3rem; }
  .pp-book-price small { display:block; margin:0; font-size:.75rem; }
  .pp-book-notes { display:none; }
  .pp-book-actions :is(.btn, button) { padding:11px 12px; }
  .pp { padding-bottom:96px; }
  body:has(.pp-book) #chat-widget { bottom:calc(150px + env(safe-area-inset-bottom)); }
}

/* "Pay now" callout: an accepted booking waiting for the client, or the top-up for it. */
.pay-now { display:grid; gap:8px; margin:0 0 16px; padding:16px; border-radius:16px; background:#fff7e6; border:1px solid #f0d49b; }
.pay-now p { margin:0; }
.pay-now form { margin:0; }

.settings-birthdate-only { display:block; max-width:520px; }

.radius-pick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 2px; font-weight:600; }
.radius-pick select { width:auto; min-width:110px; }
.hide-zones { list-style:none; margin:10px 0; padding:0; display:grid; gap:8px; }
.hide-zones li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#f6f8f3; }
.hide-zones form { margin:0; }
.hide-zone-add summary { cursor:pointer; font-weight:600; color:var(--color-primary); margin:6px 0; }
#privacy h3 { margin:18px 0 4px; font-size:1rem; }

/* ---- Blog and FAQ ---- */
.blog, .blog-article { max-width: 760px; margin: 0 auto; }
.blog h1, .blog-article h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.25; margin: 4px 0 10px; }
.blog-list { display: grid; gap: 14px; margin: 22px 0; }
.blog-card { display: block; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--color-border); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.blog-card:hover { border-color: #b9cbb4; text-decoration: none; }
.blog-card h2 { margin: 8px 0 6px; font-size: 1.2rem; line-height: 1.35; }
.blog-card p { margin: 0 0 8px; color: var(--color-muted); }
.blog-card small { color: var(--color-muted); }
.blog-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef3e9; color: var(--color-primary-dark); font-size: .78rem; font-weight: 700; }
.blog-meta { color: var(--color-muted); font-size: .9rem; margin: 0 0 22px; }
.blog-body { font-size: 1.05rem; line-height: 1.8; }
.blog-body .lede { font-size: 1.15rem; color: var(--color-text); }
.blog-body h2 { margin: 32px 0 10px; font-size: 1.3rem; }
.blog-body li { margin: 6px 0; }
.blog-cta { margin: 34px 0; padding: 22px; border-radius: 20px; background: #fff7e6; border: 1px solid #f0d49b; }
.blog-cta p { margin: 6px 0 14px; }
.blog-more { margin: 30px 0; display: grid; gap: 8px; }
.blog-more h2 { font-size: 1.1rem; margin: 0 0 4px; }
.faq-group h2 { margin: 28px 0 10px; font-size: 1.2rem; }
.faq-item { border: 1px solid var(--color-border); border-radius: 14px; background: #fff; margin: 8px 0; }
.faq-item summary { padding: 14px 16px; font-weight: 700; cursor: pointer; list-style-position: inside; }
.faq-item p { margin: 0; padding: 0 16px 16px; color: var(--color-text); line-height: 1.7; }

/* Sign-in is two buttons: LINE first, Google second. */
.auth-providers { display: grid; gap: 12px; margin-top: 20px; }
.auth-providers .btn { margin: 0; }

/* The Thai file button (app.js dresses every file input): the real input lies
   invisibly over it, so taps, the keyboard and required still work. */
.file-pick { position:relative; display:flex; align-items:center; gap:12px; padding:10px; border:1px dashed var(--color-border); border-radius:14px; background:#fbfcf9; }
.file-pick-button { flex:none; padding:9px 16px; border-radius:999px; background:#eef3e9; font-weight:700; color:var(--color-primary-dark); }
.file-pick-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-muted); font-size:.9rem; }
.file-pick > input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; padding:0; border:0; }
.file-pick:focus-within { outline:3px solid #b77924; outline-offset:2px; }

/* The personal invite poster (account/referrals, public/js/referral-poster.js). */
.referral-poster-head { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.referral-poster-head h2 { margin:0 0 4px; }
.referral-poster-result { margin-top:16px; display:grid; justify-items:center; gap:12px; }
.referral-poster-result img { width:min(100%, 320px); aspect-ratio:9/16; border-radius:18px; box-shadow:0 18px 50px #0006; }
/* Credit split under the balance (wallet/show): what may be refunded, what is bonus. */
.credit-split { display:grid; gap:6px; margin:12px 0 0; padding-top:10px; border-top:1px solid #ffffff1f; text-align:left; }
.credit-split div { display:grid; grid-template-columns:1fr auto; column-gap:8px; }
.credit-split dt { font-weight:600; }
.credit-split dd { margin:0; font-weight:700; }
.credit-split small { grid-column:1 / -1; opacity:.75; font-size:.82rem; }

/* One diary, with the editor shown only when requested. */
.agenda-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:24px 0; }
.agenda-toolbar nav { display:flex; align-items:center; gap:16px; }
.agenda-toolbar nav span { font-size:.9rem; }
.availability-agenda { border:1px solid var(--color-border); border-radius:20px; overflow:hidden; }
.agenda-day { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; padding:24px; border-bottom:1px solid var(--color-border); }
.agenda-day:last-child { border-bottom:0; }
.agenda-day h2 { font-size:1rem; margin:8px 0; }
.agenda-day-rows { min-width:0; display:grid; gap:10px; }
.agenda-empty { font-size:.9rem; opacity:.65; margin:8px 0; }
.agenda-row { display:flex; align-items:center; gap:20px; text-align:left; width:100%; border:1px solid var(--color-border); border-radius:12px; padding:16px; }
.agenda-row strong { flex-shrink:0; font-variant-numeric:tabular-nums; }
.agenda-row-info { display:grid; gap:4px; }
.agenda-row-info small { font-size:.77rem; font-weight:400; opacity:.8; }
.agenda-edit { margin-left:auto; font-size:.8rem; white-space:nowrap; }
.agenda-footnote { margin-top:16px; }
.availability-dialog { padding:28px; border:1px solid var(--color-border); border-radius:20px; width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; }
.availability-dialog::backdrop { background:#0009; }
.slot-dialog-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.slot-dialog-header h2 { margin:0; font-size:1.3rem; }
.slot-time-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.availability-dialog label { display:block; margin:12px 0; }
.availability-dialog input[type=date],.availability-dialog input[type=time] { width:100%; }
.availability-dialog details { margin:18px 0; }
.availability-dialog summary { cursor:pointer; font-size:.92rem; }
.availability-dialog .slot-options { display:flex; flex-wrap:wrap; gap:8px; }
.availability-dialog .weekday-pick { padding:6px 10px; font-size:.8rem; }
.availability-dialog .weekday-pick input { width:auto; }
.availability-dialog [hidden] { display:none !important; }
#slot-delete { margin-top:16px; }
@media(max-width:650px) {
 .agenda-toolbar { align-items:stretch; flex-direction:column; }
 .agenda-toolbar nav { justify-content:space-between; gap:8px; }
 .agenda-day { grid-template-columns:minmax(0,1fr); gap:8px; padding:18px; }
 .agenda-row { gap:12px; flex-wrap:wrap; padding:12px; }
 .agenda-row-info { flex:1; min-width:130px; }
 .agenda-edit { display:none; }
 .availability-dialog { padding:20px; }
}

/* Two distinct booking tasks; the schedule link and its status stay together. */
.profile-work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.profile-work-option { padding:20px; border:1px solid var(--color-border); border-radius:16px; }
.profile-work-option + .profile-work-option { padding:20px; border:1px solid var(--color-border); }
.schedule-status { margin:16px 0; }
.schedule-status strong { display:block; }
.schedule-status p { margin:6px 0 0; font-size:.85rem; color:var(--color-muted); }
.profile-work-option .schedule-area-note { margin:12px 0 0; }
.profile-work-option .schedule-required { margin:12px 0 0; padding-top:12px; border-top:1px solid var(--color-border); }
@media(max-width:700px) { .profile-work-grid { grid-template-columns:minmax(0,1fr); } }