:root {
  --ink: #27211f;
  --muted: #776d68;
  --line: #eadfda;
  --paper: #ffffff;
  --mist: #fff8f5;
  --brand: #ea0101;
  --brand-dark: #a90000;
  --brand-soft: #ffe7e2;
  --gold: #ff780f;
  --gold-soft: #fff0df;
  --red: #d90000;
  --red-soft: #ffe8e5;
  --blue: #2d6fd4;
  --shadow: 0 14px 40px rgba(113, 28, 10, .12);
  --radius: 18px;
}

/* Public catalogue / long-form CMS v35 */
.public-head .public-register{display:inline-flex}
.public-main>#services{order:0;scroll-margin-top:85px}
.catalog-filters{display:grid;grid-template-columns:minmax(180px,2fr) 1fr 1fr auto auto;gap:10px;align-items:end;padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px}
.catalog-filters .field{min-width:0}.catalog-filters .btn{min-height:44px}.catalog-result{color:var(--muted);font-size:.86rem;margin:18px 0}.public-listings>.empty{grid-column:1/-1}
.public-listing{display:flex;flex-direction:column;min-width:0}.public-listing .listing-body{display:flex;flex-direction:column;flex:1;min-width:0}.listing-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em;overflow-wrap:anywhere}.listing-area{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listing-detail{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.listing-price{margin-top:auto;padding-top:16px}.catalog-pagination{padding:16px 0}.catalog-pagination .btn:disabled{opacity:.45;cursor:default}.content-editor{width:min(1000px,calc(100vw - 24px))}.content-editor textarea{font:15px/1.65 ui-monospace,monospace;min-height:300px;resize:vertical}.content-editor iframe{width:100%;height:480px;border:1px solid var(--line);border-radius:12px;background:#fff}.content-editor output{display:block;margin-top:8px}.content-editor .actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:950px){.catalog-filters{grid-template-columns:1fr 1fr}.catalog-filters>.field:first-child{grid-column:1/-1}}
@media(max-width:600px){.catalog-filters{padding:14px;gap:12px}.catalog-filters>.field:first-child{grid-column:1/-1}.catalog-filters>.field:nth-child(3){grid-column:1/-1}.catalog-filters>.field:nth-child(2){grid-column:1/-1}.catalog-pagination{gap:8px}.catalog-pagination .btn{padding:10px 12px}.content-editor .form-grid{grid-template-columns:1fr}.content-editor .field{grid-column:1}.content-editor iframe{height:380px}}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; color: var(--ink); background: var(--mist); }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; background: #063e38; color: #fff; display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--gold); color: #15312d; font-weight: 900; letter-spacing: -.04em; }
.brand strong { display: block; font-size: 1.15rem; }
.brand small { color: #b8d6d1; }
.role-picker { margin: 0 4px 22px; }
.role-picker label { display: block; font-size: .78rem; color: #a9cac5; margin-bottom: 6px; }
.role-picker select { width: 100%; border: 1px solid #3c716a; border-radius: 11px; padding: 10px 12px; color: white; background: #0b5149; }
.nav { display: grid; gap: 5px; }
.nav button { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 12px; padding: 11px 12px; color: #c9dfdc; background: transparent; text-align: left; }
.nav button:hover, .nav button.active { background: #0c5a51; color: #fff; }
.nav .icon { width: 21px; text-align: center; font-size: 1.05rem; }
.sidebar-foot { margin-top: auto; padding: 15px 10px 2px; border-top: 1px solid #28645d; color: #b8d6d1; font-size: .82rem; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #62d59e; margin-right: 6px; }

.workspace { min-size: 100%; min-width: 0; }
.topbar { height: 74px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 4; }
.topbar h1 { margin: 0; font-size: 1.25rem; }
.top-actions { display: flex; gap: 9px; align-items: center; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; }
.icon-button { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.badge-count { position: absolute; right: -5px; top: -5px; min-width: 19px; height: 19px; border-radius: 10px; padding: 0 4px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: .68rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.content { max-width: 1280px; margin: auto; padding: 28px 30px 48px; }

.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-intro h2 { margin: 0 0 5px; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.02em; }
.page-intro p { margin: 0; color: var(--muted); }
.actions { display: flex; gap: 9px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; background: #fff; color: var(--ink); font-weight: 700; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(11, 81, 73, .1); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #263a36; }
.btn.danger { background: var(--red-soft); border-color: #f2b9b9; color: #9d3030; }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 11px; font-size: .88rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 2px 0 rgba(17,64,57,.015); }
.card.feature { background: linear-gradient(140deg, #075e54, #0b8476); color: #fff; border: 0; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 14px; font-size: 1.05rem; }
.card h4 { margin: 0 0 7px; }
.card p { color: var(--muted); }
.card.feature p { color: #d6efeb; }
.metric { padding: 18px; }
.metric .value { font-size: 1.65rem; font-weight: 900; margin: 4px 0; }
.metric .label { color: var(--muted); font-size: .88rem; }
.metric .trend { color: var(--brand); font-size: .8rem; }

.service-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.service { min-height: 122px; padding: 17px; text-align: left; border: 1px solid var(--line); border-radius: 15px; background: #fff; transition: .18s ease; }
.service:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.service .service-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); font-size: 1.2rem; margin-bottom: 12px; }
.service strong { display: block; }
.service small { color: var(--muted); }

.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; background: #edf3f1; color: #49635e; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.status.green { background: var(--brand-soft); color: var(--brand-dark); }
.status.gold { background: var(--gold-soft); color: #805d14; }
.status.red { background: var(--red-soft); color: #9d3030; }
.status.blue { background: #e8f0fd; color: #245aad; }
.list { display: grid; gap: 10px; }
.list-item { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item p { margin: 3px 0 0; font-size: .88rem; }
.price { font-weight: 900; white-space: nowrap; }
.muted { color: var(--muted); }
.tiny { font-size: .78rem; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1/-1; }
.field label { font-size: .88rem; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cfdcd8; border-radius: 12px; padding: 11px 12px; color: var(--ink); background: #fff; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,118,106,.12); }
.field textarea { min-height: 92px; resize: vertical; }
.helper { font-size: .78rem; color: var(--muted); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.summary-box { border-radius: 15px; padding: 17px; background: var(--mist); }
.embedded-chat{margin-top:18px}.embedded-chat .messages{max-height:420px;min-height:0;overflow-y:auto;padding-right:4px;padding-bottom:20px;scroll-padding-bottom:20px}.earnings-filter{margin-bottom:18px}.earnings-summary{margin-bottom:18px}.earnings-summary .metric strong{font-size:1.35rem;color:var(--brand);display:block;margin-top:8px}
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.summary-row.total { margin-top: 6px; padding-top: 13px; border-top: 1px solid #cddbd7; font-weight: 900; }

.availability { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.toggle { width: 58px; height: 32px; border: 0; padding: 3px; border-radius: 999px; background: #b9c8c5; transition: .2s; }
.toggle::after { content:""; display: block; width: 26px; height: 26px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .2s; }
.toggle.on { background: #23a47f; }
.toggle.on::after { transform: translateX(26px); }
.offer { border: 2px solid var(--gold); background: linear-gradient(180deg,#fffdf8,#fff9e9); }
.offer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.countdown { font-size: 1.45rem; font-weight: 900; color: #805d14; }
.route-line { margin: 16px 0; padding-left: 20px; position: relative; }
.route-line::before { content:""; position: absolute; left: 5px; top: 8px; bottom: 8px; border-left: 2px dashed #91aaa5; }
.stop { position: relative; margin: 13px 0; }
.stop::before { content:""; width: 10px; height: 10px; position: absolute; left: -19px; top: 7px; border-radius: 50%; background: var(--brand); }

.timeline { display: grid; gap: 0; }
.timeline-step { display: grid; grid-template-columns: 24px 1fr; gap: 11px; min-height: 55px; }
.timeline-mark { position: relative; width: 24px; }
.timeline-mark::before { content:""; position: absolute; top: 18px; bottom: -4px; left: 11px; border-left: 2px solid var(--line); }
.timeline-step:last-child .timeline-mark::before { display:none; }
.timeline-step:last-child { min-height: 0; }
.timeline-dot { position: relative; margin-top: 3px; width: 22px; height: 22px; border: 3px solid #c5d3d0; border-radius: 50%; background: #fff; z-index: 1; }
.timeline-step.done .timeline-dot { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 4px #fff; }
.timeline-step.current .timeline-dot { border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-soft); }
.timeline-label strong { display:block; font-size: .9rem; }
.timeline-label small { color:var(--muted); }

.tabs { display:flex; gap:5px; padding:5px; background:#e6efec; border-radius:13px; width:max-content; max-width:100%; overflow:auto; margin-bottom:18px; }
.tabs button { border:0; border-radius:9px; padding:8px 13px; background:transparent; color:var(--muted); white-space:nowrap; }
.tabs button.active { background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(17,64,57,.08); font-weight:800; }

.table-wrap { overflow-x: auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th { color:var(--muted); font-size:.78rem; text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); }
td { padding:13px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }

.chat { min-height: 430px; display:flex; flex-direction:column; }
.messages { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:5px 0 20px; scroll-padding-bottom:20px; }
.bubble { max-width:78%; padding:10px 13px; border-radius:15px 15px 15px 4px; background:#eef3f2; }
.bubble.mine { margin-left:auto; border-radius:15px 15px 4px 15px; background:var(--brand-soft); }
.bubble small { display:block; margin-top:4px; color:var(--muted); }
.chat-input { position:relative; z-index:2; flex:0 0 auto; display:flex; gap:8px; border-top:1px solid var(--line); padding-top:14px; background:var(--paper); }
.job-chat-composer { display:block; }
.chat-compose-row { display:flex; gap:8px; min-width:0; }
.chat-compose-row>input { min-width:0; }
.chat-file,.chat-camera { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; }
.chat-camera { color:#8f1f12; border-color:#efb4a8; background:#fff7f4; }
.chat-camera:hover { background:#ffe9e3; }
.chat-attachment-preview { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:10px; align-items:center; margin-bottom:10px; padding:9px; border:1px solid #f1b9aa; border-radius:12px; background:#fff3ef; }
.chat-attachment-preview[hidden] { display:none; }
.chat-attachment-preview img { width:52px; height:52px; object-fit:cover; border-radius:9px; }
.chat-attachment-preview strong,.chat-attachment-preview small { display:block; overflow-wrap:anywhere; }
.chat-attachment-preview small { color:var(--muted); margin-top:2px; }
#supportChatForm[hidden], #supportClosedNotice[hidden] { display:none; }
#supportMessagePager{flex-wrap:wrap;gap:8px}
#mySupportSearchForm input,#mySupportSearchForm select{max-width:100%;min-width:0}
#mySupportSearchForm~.list .list-item>div{min-width:0;overflow-wrap:anywhere}
.chat-input input { flex:1; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }

.slip-drop { display:grid; place-items:center; text-align:center; min-height:180px; border:2px dashed #b8cbc6; border-radius:15px; background:#f8fbfa; padding:20px; }
.slip-drop input { max-width:100%; }
.slip-preview { max-width:100%; max-height:230px; border-radius:12px; margin-top:12px; }
.alert { padding:13px 15px; border-radius:12px; background:var(--gold-soft); color:#6d521d; font-size:.88rem; }
.alert.red { background:var(--red-soft); color:#8c3232; }
.empty { padding:40px 20px; text-align:center; color:var(--muted); }
.empty .empty-icon { font-size:2rem; margin-bottom:8px; }

.modal-backdrop { position:fixed; inset:0; z-index:20; background:rgba(4,32,28,.62); display:grid; place-items:center; padding:18px; }
.modal { width:min(600px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:21px; padding:24px; box-shadow:0 24px 80px rgba(0,0,0,.28); }
.modal-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:18px; }
.modal-head h3 { margin:0; }
.support-choice-list{display:grid;gap:9px;margin:12px 0}
.support-choice{width:100%;min-height:0;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.support-choice:hover{border-color:var(--brand);background:var(--brand-soft)}
.support-choice strong{font-size:.96rem}.support-choice span{font-size:.74rem;color:var(--muted);font-weight:500}
.public-screen{min-height:100vh;background:#fff8f4;color:var(--text)}
.public-head{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(16px,5vw,72px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.brand-lockup{display:flex;align-items:center;gap:10px}.brand-lockup small{display:block;color:var(--muted)}
.public-main{width:min(1120px,calc(100% - 32px));margin:auto;padding-bottom:70px}.public-hero{min-height:390px;display:flex;align-items:center;padding:54px 7%;margin:24px 0 38px;border-radius:28px;background:linear-gradient(115deg,#fff 15%,#ffe6db);box-shadow:var(--shadow)}
.public-hero h1{font-size:clamp(2rem,5vw,4rem);line-height:1.08;margin:18px 0}.public-hero p{font-size:1.08rem;color:var(--muted);max-width:650px}
.public-listings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.public-listing{overflow:hidden;padding:0}.public-listing>img,.listing-placeholder{width:100%;height:190px;object-fit:cover}.listing-placeholder{display:grid;place-items:center;background:linear-gradient(145deg,var(--brand),#ff8a3d);font-size:3rem;font-weight:900;color:#fff}.public-listing>div:last-child{padding:17px}.public-listing .btn{display:block;width:100%;margin-top:14px}.public-login{margin:42px auto 0}
@media(max-width:800px){.public-listings{grid-template-columns:1fr 1fr}.public-head .brand-lockup small{display:none}.support-choice{align-items:flex-start;flex-direction:column;gap:2px}}
@media(max-width:520px){.public-listings{grid-template-columns:1fr}.public-head{padding:9px 12px}.public-head .btn{padding:9px}.public-hero{min-height:310px;padding:32px 22px}.public-main{width:min(100% - 22px,1120px)}}

/* Complete signed-out website */
.public-screen{background:#fffaf7;overflow-x:hidden}.public-head{height:74px;padding:0 clamp(18px,5vw,76px);box-shadow:0 1px 0 rgba(88,34,20,.08)}
.public-head a{text-decoration:none;color:inherit}.public-head .top-brand-mark,.public-footer .top-brand-mark{width:42px;height:42px;border-radius:13px}.public-nav{display:flex;align-items:center;gap:28px}.public-nav a,.public-nav button{border:0;background:none;color:#573f37;font-weight:700;font-size:.9rem;cursor:pointer}.public-nav a:hover,.public-nav button:hover{color:var(--brand)}
.public-head .brand-lockup{display:grid;grid-template-columns:42px minmax(0,auto);align-items:center;gap:10px;min-width:0}.public-head .brand-lockup>div{min-width:0;line-height:1.2}.public-head .brand-lockup strong,.public-head .brand-lockup small{display:block}.public-logo{display:block!important;width:42px!important;height:42px!important;min-width:42px;max-width:42px;min-height:42px;max-height:42px;object-fit:contain;flex:0 0 42px;border-radius:13px;box-shadow:0 7px 18px rgba(207,38,6,.2);margin:0!important}
.public-main{width:min(1180px,calc(100% - 36px));padding:0 0 84px}.public-hero{position:relative;min-height:560px;margin:22px 0 0;padding:62px clamp(28px,6vw,76px);display:grid;grid-template-columns:1.05fr .95fr;gap:55px;overflow:hidden;background:radial-gradient(circle at 82% 18%,rgba(255,181,119,.42),transparent 28%),linear-gradient(130deg,#fff 10%,#fff1e9 62%,#ffd9c7);border:1px solid #f4d8cb;box-shadow:0 24px 70px rgba(107,34,12,.1)}
.public-hero:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-100px;bottom:-150px;border:54px solid rgba(207,38,6,.08)}.hero-copy{align-self:center;position:relative;z-index:2}.eyebrow{display:block;color:var(--brand);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.public-hero h1{margin:17px 0;font-size:clamp(2.55rem,5vw,4.9rem);letter-spacing:-.045em}.public-hero h1 em{font-style:normal;color:var(--brand)}.hero-actions{display:flex;gap:10px;margin:27px 0}.hero-trust{display:flex;flex-wrap:wrap;gap:15px;color:#654b42;font-size:.82rem;font-weight:700}
.hero-visual{position:relative;display:grid;place-items:center;min-height:410px}.trip-card{position:relative;z-index:2;width:min(390px,90%);padding:28px;border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 32px 75px rgba(93,30,12,.22);transform:rotate(1.4deg)}.trip-label{display:inline-block;margin-bottom:24px;padding:7px 11px;border-radius:99px;background:#fff0e7;color:var(--brand);font-size:.75rem;font-weight:900}.trip-route{display:flex;gap:14px;align-items:center;padding:12px 0}.trip-route i{width:13px;height:13px;border:4px solid var(--brand);border-radius:50%;box-shadow:0 0 0 6px #ffe9df}.trip-route.destination i{background:var(--brand)}.trip-route small,.trip-route strong{display:block}.trip-route small{color:var(--muted);font-size:.7rem}.trip-route strong{font-size:1.05rem}.trip-summary{display:flex;justify-content:space-between;gap:14px;margin-top:18px;padding:17px;border-radius:16px;background:#1c3530;color:#fff}.floating-badge{position:absolute;z-index:3;padding:11px 14px;border-radius:13px;background:#fff;font-size:.78rem;font-weight:900;box-shadow:0 14px 34px rgba(60,30,20,.16)}.floating-badge.verified{right:0;top:58px;color:#168258}.floating-badge.support{left:0;bottom:52px;color:var(--brand)}
.public-proof{display:grid;grid-template-columns:repeat(3,1fr);margin:-26px 32px 72px;position:relative;z-index:4;border-radius:20px;background:#fff;box-shadow:0 18px 55px rgba(72,31,18,.12)}.public-proof>div{padding:22px 25px;border-right:1px solid var(--line)}.public-proof>div:last-child{border:0}.public-proof strong,.public-proof span{display:block}.public-proof span{margin-top:5px;color:var(--muted);font-size:.78rem}
.public-section{padding:58px 0}.public-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:25px}.public-section-head h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:8px 0}.public-section-head p{margin:0;color:var(--muted)}.listing-count{padding:9px 13px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:.8rem}
.public-listings{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.public-listing{border:1px solid #edd8cf;border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 10px 30px rgba(72,31,18,.07);transition:.2s}.public-listing:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(72,31,18,.13)}.listing-media{height:220px;position:relative;background:#f3e5de}.listing-media img,.listing-media .listing-placeholder{width:100%;height:100%;object-fit:cover}.verified-pill{position:absolute;left:13px;top:13px;padding:7px 10px;border-radius:99px;background:rgba(255,255,255,.92);color:#138159;font-size:.72rem;font-weight:900}.listing-body{padding:19px}.listing-category{color:var(--brand);font-weight:900}.listing-body h3{margin:6px 0;font-size:1.1rem}.listing-area{color:#765d54;font-size:.78rem}.listing-detail{height:42px;overflow:hidden;color:var(--muted);font-size:.8rem}.listing-price{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:16px 0}.listing-price small,.listing-price strong{display:block}.listing-price strong{font-size:1.12rem}.listing-price>span{font-size:.75rem;color:var(--muted)}.listing-body>.btn{width:100%}
.how-section{padding-top:80px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.how-grid article{position:relative;padding:26px;border:1px solid var(--line);border-radius:20px;background:#fff}.how-grid article>span{position:absolute;right:20px;top:17px;color:#eed9d0;font-size:2rem;font-weight:900}.how-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#ffe9df;color:var(--brand);font-size:1.25rem;font-weight:900}.how-grid h3{margin:20px 0 7px}.how-grid p{margin:0;color:var(--muted);font-size:.87rem}
.public-safety{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center;margin:55px 0;padding:54px clamp(28px,6vw,72px);border-radius:28px;background:linear-gradient(125deg,#182f2b,#274b43);color:#fff}.eyebrow.light{color:#ffb18e}.public-safety h2{font-size:clamp(2rem,4vw,3.4rem);margin:12px 0}.public-safety p{color:#d8e1df;line-height:1.75}.safety-list{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:.82rem}.safety-shield{justify-self:center;width:190px;height:220px;display:grid;place-items:center;align-content:center;border:3px solid #ff8c5e;border-radius:46% 46% 52% 52% / 30% 30% 65% 65%;font-size:3.7rem;font-weight:900;color:#ff9d76}.safety-shield small{font-size:.62rem;letter-spacing:.18em;color:#fff}
.public-login-section{display:grid;grid-template-columns:1fr 440px;gap:70px;align-items:center;padding:72px clamp(20px,7vw,90px);border-radius:28px;background:linear-gradient(135deg,#ffe9df,#fff)}.login-invite h2{font-size:clamp(2.1rem,4vw,3.6rem);margin:10px 0}.login-invite p{color:var(--muted);max-width:480px}.public-login{margin:0;max-width:none}.public-login h3{font-size:1.5rem;margin-top:0}.forgot-link{display:block;margin:10px auto}.quick-login{display:flex;gap:8px;margin-top:12px}.quick-login input{min-width:0;flex:1}.demo-divider{display:flex;align-items:center;gap:10px;margin:18px 0 10px;color:var(--muted);font-size:.7rem}.demo-divider:before,.demo-divider:after{content:"";height:1px;background:var(--line);flex:1}.demo-button{width:100%}
.public-footer{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:44px;padding:45px max(24px,calc((100vw - 1180px)/2));background:#142925;color:#fff}.public-footer>div:not(.brand-lockup){display:grid;align-content:start;gap:8px}.public-footer button,.public-footer a{padding:0;border:0;background:none;text-align:left;color:#b9c7c4;cursor:pointer;text-decoration:none}.public-footer p{align-self:end;color:#91a5a1;font-size:.72rem}
.register-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.register-choice{padding:25px;border:1px solid var(--line);border-radius:18px;background:#fff;text-align:left;cursor:pointer}.register-choice:hover{border-color:var(--brand);background:#fff7f3}.register-choice.provider{background:#f3faf8}.choice-icon{width:49px;height:49px;display:grid;place-items:center;margin-bottom:16px;border-radius:15px;background:#ffe9df;color:var(--brand);font-size:1.4rem}.register-choice strong,.register-choice small,.register-choice b{display:block}.register-choice small{margin:5px 0 18px;color:var(--muted)}.register-choice b{color:var(--brand);font-size:.8rem}.register-note{text-align:center;margin:18px 0 0}.back-link{padding:0;border:0;background:none;color:var(--brand);font-size:.76rem;font-weight:800;cursor:pointer;margin-bottom:8px}.terms-links{display:flex;gap:18px}
@media(max-width:900px){.public-nav{display:none}.public-hero{grid-template-columns:1fr;min-height:auto}.hero-visual{min-height:360px}.public-proof{margin:-20px 18px 50px}.public-listings{grid-template-columns:repeat(2,1fr)}.public-login-section{grid-template-columns:1fr;gap:30px}.public-safety{grid-template-columns:1fr}.safety-shield{display:none}.public-footer{grid-template-columns:1fr 1fr}.public-footer .brand-lockup{grid-column:1/-1}}
@media(max-width:600px){.public-head{height:64px;padding:0 10px;gap:8px}.public-head .brand-lockup{min-width:0;flex:1;gap:7px}.public-head .brand-lockup strong{font-size:.94rem;white-space:nowrap}.public-head .brand-lockup small,.public-register{display:none}.public-head .public-logo{width:36px;height:36px;flex-basis:36px;border-radius:11px}.public-head>.actions{margin-left:auto;gap:6px;flex-wrap:nowrap}.public-head>.actions .btn{padding:8px 10px;font-size:.78rem;white-space:nowrap}.public-main{width:min(100% - 20px,1180px)}.public-hero{padding:38px 22px;margin-top:10px;border-radius:21px}.public-hero h1{font-size:2.45rem}.hero-actions{flex-direction:column}.hero-actions .btn{text-align:center}.hero-visual{min-height:300px}.trip-card{padding:20px}.floating-badge{font-size:.66rem}.public-proof{grid-template-columns:1fr;margin:-12px 10px 35px}.public-proof>div{border-right:0;border-bottom:1px solid var(--line);padding:16px 19px}.public-listings,.how-grid{grid-template-columns:1fr}.listing-media{height:205px}.public-section{padding:42px 0}.public-section-head{align-items:flex-start}.listing-count{display:none}.public-safety{margin:28px 0;padding:35px 24px}.safety-list{grid-template-columns:1fr}.public-login-section{padding:38px 18px}.public-footer{grid-template-columns:1fr;padding:38px 24px}.public-footer p{align-self:auto}.register-choice-grid{grid-template-columns:1fr}.register-modal .form-grid{grid-template-columns:1fr}.register-modal .field{grid-column:1}.support-choice span{display:block}}

/* App-entry priority: approved services stay near the top. */
.current-role{font-size:.85rem;font-weight:700;color:#fff;padding:8px 12px;border:1px solid #ffffff55;border-radius:12px}
.public-main{display:flex;flex-direction:column}
.public-hero{order:1;min-height:410px;padding:44px clamp(28px,6vw,70px);margin-top:18px;gap:48px}
.hero-visual{min-height:310px}.trip-card{padding:24px}
#services{order:2;padding-top:46px}.public-proof{order:3;margin:34px 32px 38px}.how-section{order:4}.public-safety{order:5}.public-login-section{order:6}
@media(max-width:900px){.public-proof{margin:20px 18px 35px}.hero-visual{min-height:310px}}
@media(max-width:600px){.public-hero{min-height:auto;padding:32px 22px}.hero-visual{min-height:270px}#services{padding-top:34px}.public-proof{margin:12px 10px 28px}}
.close { border:0; background:#edf3f1; border-radius:10px; width:34px; height:34px; }

.toast { position:fixed; right:22px; bottom:22px; z-index:50; background:#163f39; color:white; padding:12px 17px; border-radius:12px; box-shadow:var(--shadow); opacity:0; transform:translateY(14px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translateY(0); }
.mobile-nav { display:none; }

@media (max-width: 1000px) {
  .grid.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid.cols-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .app-shell { display:block; padding-bottom:72px; }
  .sidebar { display:none; }
  .topbar { height:64px; padding:0 16px; }
  .content { padding:20px 15px 32px; }
  .page-intro { display:block; }
  .page-intro .actions { margin-top:14px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .service-list { grid-template-columns:1fr 1fr; }
  .mobile-nav { position:fixed; display:grid; grid-template-columns:repeat(4,1fr); left:0; right:0; bottom:0; z-index:10; background:#fff; border-top:1px solid var(--line); padding:7px 4px max(7px,env(safe-area-inset-bottom)); }
  .mobile-nav button { border:0; background:transparent; color:var(--muted); display:grid; gap:2px; place-items:center; font-size:.7rem; }
  .mobile-nav button .icon { font-size:1.15rem; }
  .mobile-nav button.active { color:var(--brand); font-weight:800; }
  .list-item { align-items:flex-start; }
}

@media (max-width: 420px) {
  .service-list { grid-template-columns:1fr; }
  .card { padding:16px; }
}

/* App-first navigation and TL Trip brand treatment */
.app-shell { display:block; min-height:100vh; padding-bottom:108px; }
.sidebar { display:none; }
.workspace { width:100%; min-width:0; }
.topbar {
  height:72px;
  padding:0 max(18px, calc((100vw - 1180px) / 2));
  color:#fff;
  background:linear-gradient(120deg, #c80000, #ea0101 56%, #ff780f);
  border:0;
  box-shadow:0 8px 24px rgba(160, 0, 0, .2);
}
.top-brand { display:flex; align-items:center; gap:9px; }
.top-brand > span:last-child { display:grid; line-height:1.05; }
.top-brand strong { font-size:1.08rem; letter-spacing:.01em; }
.top-brand small { margin-top:4px; color:#ffe8db; font-size:.72rem; }
.top-brand-mark {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.8);
  border-radius:12px;
  font-size:.88rem;
  font-weight:900;
  color:#fff;
  background:rgba(255,255,255,.12);
}
.topbar .icon-button { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.13); }
.topbar .avatar { color:#b70000; background:#fff; }
.role-select {
  max-width:150px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:11px;
  padding:8px 28px 8px 10px;
  color:#fff;
  background:rgba(112,0,0,.24);
}
.role-select option { color:var(--ink); background:#fff; }
.content { max-width:1180px; padding-top:26px; }
.app-greeting { margin-bottom:15px; }
.app-greeting h2 { margin-top:2px; font-size:clamp(1.75rem,4vw,2.35rem); }
.eyebrow { color:var(--brand); font-weight:800; font-size:.88rem; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.section-heading h3 { margin:0; font-size:1.2rem; }
.section-heading span { color:var(--muted); font-size:.78rem; }
.card.feature { background:linear-gradient(140deg, #c90000 0%, #ea0101 55%, #ff780f 130%); }
.service-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.service {
  min-height:156px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:0;
  border-radius:19px;
  background:linear-gradient(155deg,#fff 34%,#fff1eb);
  box-shadow:0 8px 22px rgba(115,35,15,.08);
}
.service:nth-child(2) { background:linear-gradient(155deg,#fff 34%,#fff4df); }
.service:nth-child(3) { background:linear-gradient(155deg,#fff 34%,#ffeceb); }
.service:nth-child(4) { background:linear-gradient(155deg,#fff 34%,#f2ecea); }
.service:hover { border-color:transparent; box-shadow:0 14px 32px rgba(183,35,4,.16); }
.service .service-icon {
  width:52px;
  height:52px;
  margin-bottom:auto;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,var(--brand),var(--gold));
  font-size:1.55rem;
  box-shadow:0 7px 16px rgba(234,1,1,.18);
}
.service strong { font-size:1rem; }
.service small { margin-top:3px; }
.btn.primary { background:linear-gradient(120deg,#d50000,var(--brand)); border-color:var(--brand); }
.btn.gold { background:linear-gradient(120deg,#ff9b25,var(--gold)); border-color:var(--gold); color:#fff; }
.status.green { background:#e8f7ef; color:#176c45; }
.toggle.on { background:var(--brand); }
.mobile-nav {
  display:grid;
  grid-template-columns:repeat(var(--nav-count),1fr);
  position:fixed;
  left:50%;
  right:auto;
  bottom:16px;
  width:min(720px,calc(100% - 24px));
  z-index:15;
  padding:8px 7px max(8px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  border:1px solid rgba(234,1,1,.12);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:0 13px 38px rgba(77,23,12,.2);
  backdrop-filter:blur(18px);
}
.mobile-nav button {
  min-height:52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  border:0;
  border-radius:15px;
  color:#93837e;
  background:transparent;
  font-size:.72rem;
}
.mobile-nav button .icon { font-size:1.35rem; line-height:1; }
.mobile-nav button.active { color:var(--brand); background:var(--brand-soft); font-weight:900; }
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#fff5ef,#fff,#ffe4dc)}
.auth-card{width:min(460px,100%);text-align:center;display:grid;gap:14px}.auth-card .top-brand-mark{margin:auto;background:linear-gradient(135deg,var(--brand),var(--gold));color:#fff}.auth-card h1{margin:0}.auth-card .btn{width:100%}
.danger-zone{margin-top:18px;border:1px solid #ffd0cb;background:#fffafa}.danger-zone .actions{margin-top:12px}.consent span{display:flex;gap:10px;align-items:flex-start;text-align:left}.consent input{width:auto;margin-top:3px}

@media (max-width:760px) {
  .app-shell { padding-bottom:96px; }
  .topbar { height:64px; padding:0 14px; }
  .top-actions { gap:6px; }
  .role-select { width:42px; max-width:42px; padding:8px 4px; color:transparent; }
  .role-select option { color:var(--ink); }
  .topbar .avatar { display:none; }
  .content { padding:20px 14px 28px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .form-grid { grid-template-columns:1fr; }
  .service-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service { min-height:142px; padding:15px; }
  .mobile-nav { bottom:8px; width:calc(100% - 16px); border-radius:20px; }
}

@media (max-width:390px) {
  .service-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .service { min-height:132px; padding:13px; }
  .service small { font-size:.72rem; }
  .top-brand small { display:none; }
}

/* Main functions live on the screen, not in a footer navigation bar. */
.app-shell { padding-bottom:34px; }
.mobile-nav { display:none !important; }
.top-menu-button {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.13);
  font-size:1.25rem;
}
.app-home-layout {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:18px;
}
.services-panel, .launcher-panel { padding:20px; }
.launcher-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.launcher-tile {
  min-height:116px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  border:1px solid #f0d9d1;
  border-radius:18px;
  color:var(--ink);
  background:linear-gradient(155deg,#fff,#fff5f1);
  box-shadow:0 7px 18px rgba(117,32,15,.07);
  transition:.18s ease;
}
.launcher-tile:hover, .launcher-tile:focus-visible {
  border-color:#ff9a6b;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(183,35,4,.14);
  outline:none;
}
.launcher-icon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,#d80000,#ff780f);
  box-shadow:0 7px 16px rgba(234,1,1,.2);
  font-size:1.35rem;
}
.launcher-tile strong { font-size:.9rem; text-align:center; }
.app-menu-modal { width:min(520px,100%); }
.app-menu-modal .launcher-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.app-menu-modal .launcher-tile { min-height:112px; }

@media (max-width:900px) {
  .app-home-layout { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .app-shell { padding-bottom:26px; }
  .top-menu-button { width:38px; height:38px; }
  .top-brand strong { max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .services-panel, .launcher-panel { padding:15px; }
  .launcher-grid { gap:9px; }
  .launcher-tile { min-height:108px; padding:10px 6px; }
  .launcher-icon { width:45px; height:45px; }
  .app-menu-modal .launcher-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Super-app home: services are the primary interface. */
.app-shell { padding-bottom:90px; }
.role-customer .content, .role-provider .content { max-width:780px; }
.mobile-nav {
  display:grid !important;
  grid-template-columns:repeat(var(--nav-count),1fr);
  left:50%;
  right:auto;
  bottom:0;
  width:min(780px,100%);
  min-height:68px;
  padding:6px 8px max(6px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:#fff;
  box-shadow:0 -8px 24px rgba(70,28,18,.08);
}
.mobile-nav button {
  min-height:53px;
  gap:3px;
  border-radius:12px;
  color:#a3948f;
  background:transparent;
}
.mobile-nav button.active { color:var(--brand); background:transparent; }
.mobile-nav button.active .icon {
  width:30px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--brand-soft);
}
.app-greeting { margin:0 0 14px; }
.app-greeting h2 { margin:2px 0 0; }
.app-search {
  width:100%;
  min-height:49px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:0 15px;
  border:1px solid #eddcd6;
  border-radius:13px;
  color:#8d7e79;
  background:#fff;
  box-shadow:0 6px 18px rgba(94,30,17,.05);
  text-align:left;
}
.app-search > span:first-child { color:var(--brand); font-size:1.35rem; }
.account-strip {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin-bottom:20px;
  padding:11px 8px;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(120deg,#c90000,#ea0101 58%,#ff780f 145%);
  box-shadow:0 10px 26px rgba(190,24,0,.18);
}
.account-strip button { display:flex; align-items:center; gap:9px; border:0; color:#fff; background:transparent; text-align:left; }
.account-strip button > span:last-child { display:grid; }
.account-strip small { color:#ffe6dd; font-size:.68rem; }
.account-strip strong { font-size:.82rem; }
.strip-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.17); font-size:1.05rem; }
.strip-divider { width:1px; height:31px; background:rgba(255,255,255,.28); }
.home-section { margin:0 0 21px; }
.home-section .section-heading { margin-bottom:12px; }
.text-action { border:0; color:var(--brand); background:transparent; font-size:.78rem; font-weight:800; }
.service-icon-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px 7px;
}
.service-icon-grid .service {
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  gap:7px;
  padding:4px 2px;
  border:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
}
.service-icon-grid .service:hover { transform:translateY(-1px); box-shadow:none; }
.service-icon-grid .service .service-icon {
  width:56px;
  height:56px;
  margin:0;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#ef2424,#ff780f);
  box-shadow:0 8px 16px rgba(216,38,8,.16);
  font-size:1.35rem;
}
.service-icon-grid .service:nth-child(2) .service-icon { background:linear-gradient(145deg,#ff861c,#ffc13c); }
.service-icon-grid .service:nth-child(3) .service-icon { background:linear-gradient(145deg,#e40000,#ff5c31); }
.service-icon-grid .service:nth-child(4) .service-icon { background:linear-gradient(145deg,#b80000,#ec3434); }
.service-icon-grid .service:nth-child(5) .service-icon { background:linear-gradient(145deg,#ff9b21,#ffca55); }
.service-icon-grid .service:nth-child(6) .service-icon { background:linear-gradient(145deg,#d92525,#ff7847); }
.service-icon-grid .service:nth-child(7) .service-icon { background:linear-gradient(145deg,#ef5a16,#ffa629); }
.service-icon-grid .service:nth-child(8) .service-icon { color:var(--brand); background:#ffeae4; box-shadow:none; }
.service-icon-grid .service strong { font-size:.78rem; line-height:1.2; }
.service-icon-grid .service small { display:none; }
.promo-banner {
  width:100%;
  min-height:150px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
  padding:22px;
  overflow:hidden;
  border:0;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(120deg,#a90000 0%,#ea0101 54%,#ff8a20 100%);
  box-shadow:0 13px 30px rgba(177,29,5,.2);
  text-align:left;
}
.promo-banner > span:first-child { display:grid; gap:3px; }
.promo-banner small { color:#ffe1d3; font-weight:700; }
.promo-banner strong { font-size:1.5rem; line-height:1.25; }
.promo-banner em { margin-top:5px; color:#fff2e8; font-size:.76rem; font-style:normal; }
.promo-symbol {
  width:110px;
  height:110px;
  flex:0 0 110px;
  display:grid;
  place-items:center;
  border:8px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.12);
  transform:rotate(-8deg);
  font-size:1.35rem;
  font-weight:900;
}
.quick-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.quick-row button { display:grid; grid-template-columns:42px 1fr; column-gap:10px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:left; }
.quick-row button > span { grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--brand); background:var(--brand-soft); font-size:1.2rem; }
.quick-row strong { font-size:.86rem; }
.quick-row small { color:var(--muted); font-size:.7rem; }

@media (max-width:760px) {
  .app-shell { padding-bottom:82px; }
  .mobile-nav { bottom:0; width:100%; border-radius:16px 16px 0 0; }
  .role-customer .content, .role-provider .content { max-width:none; }
  .service-icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .promo-banner { min-height:138px; padding:18px; }
  .promo-symbol { width:88px; height:88px; flex-basis:88px; }
}

@media (max-width:390px) {
  .service-icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 3px; }
  .service-icon-grid .service .service-icon { width:50px; height:50px; }
  .service-icon-grid .service strong { font-size:.7rem; }
  .promo-symbol { width:72px; height:72px; flex-basis:72px; font-size:1rem; }
  .promo-banner strong { font-size:1.25rem; }
  .quick-row { grid-template-columns:1fr; }
}

.provider-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.provider-service-card h3 { margin:16px 0 5px; }
.provider-service-card p { margin:0 0 18px; font-size:.86rem; }
.provider-service-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--brand-soft); font-size:1.3rem; }
.service-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid var(--line); }
.add-service-card { min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #edc8bb; color:var(--brand); background:#fffaf8; }
.add-service-card > span { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:var(--brand-soft); font-size:1.5rem; }
.add-service-card small { color:var(--muted); }
.proposal-link { display:block; margin:18px auto 0; border:0; color:var(--brand); background:transparent; font-weight:800; }
.pending-service-review { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; border-left:5px solid var(--gold); }
.pending-service-review h3 { margin:10px 0 4px; }
.pending-service-review p { margin:0; }

@media (max-width:650px) {
  .provider-service-grid { grid-template-columns:1fr; }
  .pending-service-review { display:block; }
  .pending-service-review .actions { margin-top:14px; }
}

.catalog-panel { padding:20px; }
.catalog-panel .section-heading > div span { color:var(--muted); font-size:.78rem; }
.catalog-list { display:grid; }
.catalog-row {
  display:grid;
  grid-template-columns:32px 48px minmax(150px,1fr) 130px 105px auto auto;
  gap:13px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.catalog-priority { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--brand); background:var(--brand-soft); font-size:.78rem; font-weight:900; }
.catalog-row:last-child { border-bottom:0; }
.catalog-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--brand-soft); font-size:1.2rem; }
.catalog-main, .catalog-money { display:grid; gap:2px; }
.catalog-main small, .catalog-money small { color:var(--muted); font-size:.72rem; }
.catalog-money strong { font-size:.84rem; }
.catalog-actions { display:flex; gap:7px; }

@media (max-width:900px) {
  .catalog-row { grid-template-columns:32px 44px 1fr auto; }
  .catalog-money { display:none; }
  .catalog-actions { grid-column:3/5; }
}

.provider-setup-guide { margin-bottom:20px; border:2px solid #ffd0c4; background:linear-gradient(145deg,#fff,#fff6f1); }
.setup-guide-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.setup-guide-head h2 { margin:4px 0; }
.setup-guide-head p { margin:0; color:var(--muted); }
.setup-guide-head>strong { min-width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:white; background:linear-gradient(135deg,var(--brand),#ff7617); font-size:1.25rem; }
.setup-steps { display:grid; gap:10px; }
.setup-steps article { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:14px; background:white; }
.setup-steps article>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--brand); font-weight:900; }
.setup-steps article.done>span { background:#16885f; }
.setup-steps h3,.setup-steps p { margin:0; }
.setup-steps p { color:var(--muted); font-size:.82rem; }
@media(max-width:560px){.setup-guide-head{align-items:center}.setup-guide-head>strong{min-width:48px;height:48px}.setup-steps article{grid-template-columns:38px 1fr}.setup-steps article .btn{grid-column:1/3;width:100%}}

.pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.pagination span { font-size:.85rem; color:var(--muted); }
.legal-content { line-height:1.75; max-height:65vh; overflow:auto; }
.qr-preview { max-height:260px; object-fit:contain; background:white; }
.list-item .actions input[type="time"] { width:112px; padding:8px; border:1px solid var(--line); border-radius:8px; }
.chat-image { display:block; width:min(260px,100%); max-height:240px; object-fit:cover; border-radius:10px; margin-bottom:7px; }
.chat-file { cursor:pointer; }
.chat-image-button{display:block;max-width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:zoom-in}.chat-image-button small{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 7px}.chat-image-button:focus-visible{outline:3px solid #ff8a65;outline-offset:3px;border-radius:10px}
.attachment-viewer{position:fixed;inset:0;z-index:10000;display:grid;grid-template-rows:auto minmax(0,1fr);background:rgba(18,16,16,.96);color:#fff}.attachment-viewer header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:#1d1a1a;border-bottom:1px solid rgba(255,255,255,.18)}.attachment-viewer header>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-viewer .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.attachment-viewer output{min-width:52px;text-align:center}.attachment-viewer-stage{min-height:0;overflow:auto;display:grid;place-items:center;padding:24px}.attachment-viewer-stage img{display:block;max-width:100%;max-height:calc(100vh - 110px);transform-origin:center;transition:transform .12s ease;box-shadow:0 8px 32px rgba(0,0,0,.45)}
@media(max-width:640px){.attachment-viewer header{align-items:flex-start;flex-direction:column;padding:10px}.attachment-viewer .actions{width:100%;justify-content:flex-start}.attachment-viewer .actions .btn{padding:7px 9px}.attachment-viewer-stage{padding:10px}.attachment-viewer-stage img{max-height:calc(100vh - 150px)}}
@media(max-width:460px){.chat-attachment-preview{grid-template-columns:46px minmax(0,1fr) auto}.chat-attachment-preview img{width:46px;height:46px}.chat-attachment-preview .btn{padding:7px 9px}.chat-compose-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto}.chat-compose-row .btn{flex:0 0 auto}.chat-camera span{display:none}}
.public-service-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
.public-service-gallery img { display:block; width:100%; max-width:100%; min-width:0; height:auto; object-fit:contain; border-radius:12px; }
@media(max-width:640px) { .public-service-gallery { grid-template-columns:minmax(0,1fr); } }
.listing-cover{width:100%;height:170px;object-fit:cover;border-radius:16px;margin-bottom:12px}.listing-placeholder{height:140px;border-radius:16px;background:linear-gradient(135deg,#e8f5ef,#fff2c9);display:grid;place-items:center;font-size:3rem;margin-bottom:12px}
.listing-gallery{margin-bottom:12px}.listing-gallery .listing-cover{margin-bottom:7px}.listing-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.listing-thumbnails img{width:100%;height:58px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.listing-gallery.large{display:grid;grid-template-columns:minmax(0,2fr) minmax(110px,1fr);gap:10px}.listing-gallery.large .listing-cover{height:300px;margin:0}.listing-gallery.large .listing-thumbnails{grid-template-columns:1fr;align-content:start}.listing-gallery.large .listing-thumbnails img{height:94px}.listing-decision-gallery{margin-bottom:18px}.listing-decision-gallery h3{margin-top:0}
.package-image-button{display:block;width:100%;padding:0;border:0;border-radius:12px;background:transparent;line-height:0;overflow:hidden;cursor:zoom-in}.package-image-button:focus-visible{outline:3px solid #ff9b72;outline-offset:2px}.listing-media>.package-image-button{height:100%;border-radius:0}.listing-media>.package-image-button img{transition:transform .2s}.listing-media>.package-image-button:hover img{transform:scale(1.025)}.listing-thumbnails .package-image-button{border-radius:10px}.package-detail-text{white-space:pre-line;overflow-wrap:anywhere;line-height:1.55}.login-modal{width:min(460px,100%)}.login-modal-register{text-align:center;margin:16px 0 0}.package-image-backdrop{z-index:40;background:rgba(12,12,12,.9)}.package-image-modal{width:min(1100px,96vw);max-height:96vh;padding:14px;background:#171717;color:#fff}.package-image-modal .modal-head{margin:0 0 10px}.package-image-modal .close{color:#fff;background:#333}.package-image-modal>img{display:block;max-width:100%;max-height:calc(96vh - 76px);margin:auto;border-radius:12px;object-fit:contain}
@media(max-width:640px){.listing-gallery.large{grid-template-columns:1fr}.listing-gallery.large .listing-cover{height:210px}.listing-gallery.large .listing-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr))}.listing-gallery.large .listing-thumbnails img{height:70px}}
.list-search{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.list-search input{flex:1;min-width:210px}.list-search select{min-width:150px}.list-item-button{width:100%;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}.install-head{white-space:nowrap}
.work-filter-tabs{margin-bottom:14px}.work-filter-tabs .btn{min-height:38px}
@media(max-width:650px){.install-head{font-size:.72rem;padding:8px}.role-select{max-width:90px}.list-search>*{width:100%}}
@media(max-width:650px){.work-filter-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.work-filter-tabs .btn{padding:8px 5px;white-space:normal;font-size:.72rem}}
@media (max-width:650px) { .list-item .actions input[type="time"] { width:92px; } }
.service-availability-list { display:grid; gap:12px; margin:18px 0; }
.service-availability { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.schedule-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border,#eee); }
.schedule-row input[type="time"] { width:120px; }
@media(max-width:560px) {
  .service-availability, .schedule-row { align-items:flex-start; flex-direction:column; }
  .service-availability .actions { width:100%; justify-content:space-between; }
  .schedule-row .actions { flex-wrap:nowrap; gap:6px; }
  .schedule-row input[type="time"] { width:112px; min-width:0; padding:8px; }
  .hero-actions .btn { white-space:normal; text-align:center; }
}
.modal.content-editor{max-width:min(1000px,calc(100vw - 24px))}.content-editor textarea{white-space:pre;overflow-wrap:normal;overflow-x:auto}.source-pagination[hidden]{display:none}.source-pagination .actions{align-items:center}.source-pagination output{margin:0}

/* v37: real participants and message authors, shared across job roles. */
.job-participants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--soft,#f5f8f7); text-align:left; }
.job-participants > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.job-participants strong,.chat-sender { overflow-wrap:anywhere; }
.chat-sender { display:block; font-size:.85rem; margin-bottom:6px; color:var(--ink); }
.bubble.system-message { align-self:center; background:#fff5e6; border:1px solid #ffe2b7; }
.list-item .job-participants { margin:8px 0; }
.listing-reviews { border-top:1px solid var(--line); margin:12px 0; padding-top:12px; text-align:left; }
.listing-review-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.85rem; }
.listing-review-summary strong { color:#a45c00; }
.listing-review-expand { margin-top:12px; }
.listing-review-expand > summary,.review-comment > summary { cursor:pointer; color:#9e4b00; padding:8px 0; font-weight:600; }
.review-page-list { max-height:320px; overflow-y:auto; overscroll-behavior:contain; padding-right:6px; }
.review-comment p { white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0; }
.admin-review-list { max-height:480px; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; }
.admin-review-list .list-item > div:first-child { min-width:0; flex:1; }
.listing-review-pages .pagination { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.listing-review-pages .pagination .btn { width:auto; margin:0; }
.listing-reviews blockquote { margin:10px 0; padding:10px 12px; border-left:3px solid #f5a623; border-radius:8px; background:#fff8ed; font-size:.85rem; overflow-wrap:anywhere; }
.listing-reviews blockquote span,.listing-reviews blockquote small { display:block; margin-top:4px; }
@media(max-width:480px) { .job-participants { grid-template-columns:1fr; gap:10px; } .bubble { max-width:100%; } }

/* v75: keep every role readable on narrow phone screens. */
@media (max-width:760px) {
  .topbar { gap:8px; }
  .top-brand { flex:1 1 auto; min-width:0; overflow:hidden; }
  .top-brand > span:last-child { min-width:0; }
  .top-brand strong { display:block; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .top-actions { flex:0 0 auto; min-width:0; }
  .top-actions .install-head { display:none; }
  .current-role { max-width:82px; padding:7px 9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; }

  .page-intro .actions, .form-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .page-intro .actions .btn, .form-actions .btn { flex:1 1 140px; white-space:normal; text-align:center; }
  .section-heading { align-items:flex-start; flex-wrap:wrap; }

  .list-item { flex-direction:column; align-items:stretch; min-width:0; }
  .list-item > div:first-child { width:100%; min-width:0; overflow-wrap:anywhere; }
  .list-item > .actions { width:100%; justify-content:flex-start; }
  .list-item > .actions .btn { flex:1 1 130px; white-space:normal; }

  .table-wrap {
    width:100%;
    max-width:100%;
    padding-bottom:8px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-gutter:stable;
  }
  .table-wrap table { width:100%; min-width:640px; table-layout:auto; }
  .table-wrap th, .table-wrap td { min-width:110px; vertical-align:top; overflow-wrap:normal; word-break:normal; }
  .table-wrap th:last-child, .table-wrap td:last-child { min-width:132px; }
  .table-wrap::-webkit-scrollbar { height:8px; }
  .table-wrap::-webkit-scrollbar-thumb { border-radius:999px; background:#d9aaa0; }
  .table-wrap::-webkit-scrollbar-track { border-radius:999px; background:#fff1ed; }
}

@media (max-width:420px) {
  .topbar { padding-inline:10px; }
  .top-brand { gap:7px; }
  .top-brand strong { font-size:.96rem; }
  .top-menu-button { width:36px; height:36px; flex:0 0 36px; }
  .top-actions { gap:5px; }
  .topbar .icon-button { width:35px; height:35px; }
  .current-role { max-width:72px; padding-inline:7px; }
  .content { padding-inline:10px; }
  .card { padding:14px; }
}

/* v76: every dense role table becomes labelled cards on phones. */
@media (max-width:760px) {
  .admin-summary-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px;
  }
  .admin-summary-grid .metric { min-width:0; padding:10px 6px; text-align:center; border-radius:13px; }
  .admin-summary-grid .metric .label { min-height:2.5em; display:grid; place-items:center; font-size:.64rem; line-height:1.25; }
  .admin-summary-grid .metric .value { margin:4px 0 0; font-size:1.28rem; line-height:1; }
  .admin-summary-grid .metric .trend { display:none; }

  .earnings-list-card { padding:12px; }
  .table-wrap:has(.responsive-card-table) { overflow:visible; padding:0; scrollbar-gutter:auto; }
  .responsive-card-table { min-width:0 !important; border-collapse:separate; font-size:.88rem; }
  .responsive-card-table thead { display:none; }
  .responsive-card-table tbody { display:grid; gap:12px; }
  .responsive-card-table tr { display:grid; gap:0; padding:5px 13px; border:1px solid var(--line); border-radius:15px; background:#fffaf8; }
  .responsive-card-table td {
    min-width:0;
    display:grid;
    grid-template-columns:minmax(108px,.72fr) minmax(0,1.28fr);
    gap:12px;
    align-items:start;
    padding:10px 0;
    overflow-wrap:anywhere;
    word-break:normal;
    border-bottom:1px solid var(--line);
    text-align:right;
  }
  .responsive-card-table td:last-child { min-width:0; border-bottom:0; }
  .responsive-cell-label { color:var(--muted); font-size:.76rem; font-weight:800; text-align:left; }
  .responsive-cell-value { min-width:0; overflow-wrap:anywhere; text-align:right; }
  .responsive-cell-value .actions { justify-content:flex-end; }
  .responsive-cell-value .job-participants { grid-template-columns:1fr; margin:8px 0 0; text-align:left; }
  .responsive-empty-cell { display:block !important; padding:24px 8px !important; text-align:center !important; }
}

.booking-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}.booking-detail-grid>div{min-width:0}.booking-detail-grid dt{font-size:.85rem;color:#677586}.booking-detail-grid dd{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}.full-detail-text{white-space:pre-wrap;overflow-wrap:anywhere}.form-error{color:#b42318}

/* v100.20: keep package media, signed-out branding and preserved text stable
   even when a browser still has older generic card/button rules in memory. */
.public-head .brand-lockup{width:auto;max-width:min(320px,42vw);overflow:hidden}
.public-head .brand-lockup .public-logo{display:block!important;width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;min-height:42px!important;max-height:42px!important;object-fit:contain!important}
.listing-media>.package-image-button{display:block;width:100%;height:100%;max-width:100%;padding:0;border:0;overflow:hidden;background:transparent}
.listing-media>.package-image-button>img{display:block;width:100%!important;height:100%!important;max-width:100%;object-fit:cover}
.listing-gallery>.package-image-button{display:block;width:100%;height:220px;max-width:100%;padding:0;border:0;overflow:hidden;background:transparent}
.listing-gallery>.package-image-button>.listing-cover{display:block;width:100%!important;height:100%!important;max-width:100%;margin:0;object-fit:cover;border-radius:16px}
.listing-thumbnails .package-image-button{display:block;width:100%;max-width:100%;padding:0;overflow:hidden}
.listing-thumbnails .package-image-button>img{display:block;width:100%!important;height:58px!important;max-width:100%;object-fit:cover}
.package-detail-text,.full-detail-text{white-space:pre-wrap!important;overflow-wrap:anywhere;word-break:break-word;line-height:1.75}
.provider-service-card>.package-detail-text,.listing-detail.package-detail-text{height:auto!important;max-height:none!important;overflow:visible!important;margin-block:10px 14px}
.package-image-backdrop{z-index:40;background:rgba(12,12,12,.94);padding:12px;overflow:hidden}
.package-image-modal{box-sizing:border-box;width:min(1100px,calc(100vw - 24px));height:min(92vh,900px);max-width:calc(100vw - 24px);max-height:92vh;overflow:hidden;padding:14px;background:#171717;color:#fff;display:grid;grid-template-rows:auto minmax(0,1fr)}
.package-image-modal .modal-head{min-width:0;margin:0 0 10px}.package-image-modal .modal-head h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.package-image-modal .close{color:#fff;background:#333;flex:0 0 auto}
.package-image-modal>img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;margin:auto;border-radius:12px;object-fit:contain}
@media(max-width:600px){.public-head .brand-lockup{grid-template-columns:36px minmax(0,auto);max-width:42vw;gap:7px}.public-head .brand-lockup .public-logo{width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important;min-height:36px!important;max-height:36px!important}.listing-gallery>.package-image-button{height:210px}.package-image-backdrop{padding:7px}.package-image-modal{width:calc(100vw - 14px);max-width:calc(100vw - 14px);height:calc(100dvh - 14px);max-height:calc(100dvh - 14px);padding:10px}.package-image-modal .modal-head{margin-bottom:7px}.package-image-modal .modal-head h3{font-size:.95rem}}