/* TownLink design system (2026-10 polish). Warm light theme by default, a deep-green dark theme (never pure black) that follows the
   device setting; html[data-theme=light|dark] (Menu > Appearance, static/ui.js) overrides it. Motion uses transform + opacity only and
   switches off under prefers-reduced-motion. Tokens: type scale --fs-*, spacing --sp-*, radius --r-*, shadow --sh-*, motion --dur-* / --ease. */
@font-face{font-family:"Figtree";src:url("/static/fonts/figtree-latin.woff") format("woff");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cairo";src:url("/static/fonts/cairo-arabic-latin.woff") format("woff");font-weight:200 1000;font-display:swap}
:root{--font:"Figtree",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs-xs:12px;--fs-sm:13.5px;--fs-base:16px;--fs-md:17px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:30px;--fs-3xl:40px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:48px;
  --r-xs:8px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);--dur-1:.12s;--dur-2:.22s;--dur-3:.42s;
  --header-h:60px;
  --bg:#F7F4EE;--bg-glow:radial-gradient(1200px 520px at 85% -120px,rgba(224,138,60,.10),transparent 60%),radial-gradient(900px 480px at -10% -80px,rgba(31,111,92,.08),transparent 60%);
  --surface:#FFFFFF;--surface-raised:#FBF9F5;--surface-inset:#F4F0E8;--border:#E8E2D6;--border-strong:#D6CEBF;
  --text:#18211E;--muted:#5C6661;--subtle:#38423E;
  --accent:#1F6F5C;--accent-hover:#185B4B;--accent-ink:#1A6452;--accent-soft:rgba(31,111,92,.09);--accent-line:rgba(31,111,92,.30);--on-accent:#FFFFFF;
  --warm:#E08A3C;--warm-soft:rgba(224,138,60,.13);--warm-ink:#94500F;
  --ok-fg:#1C6A3B;--ok-bg:#E7F4EA;--ok-line:#BCDEC6;--warn-fg:#87500A;--warn-bg:#FDF2DE;--warn-line:#F0D29C;--bad-fg:#A1271F;--bad-bg:#FCEAE7;--bad-line:#F1BEB6;
  --green:#1F9D57;--red:#C9372C;--amber:#D98E1F;--star:#E19B2E;
  --sh-1:0 1px 2px rgba(48,38,22,.06),0 1px 1px rgba(48,38,22,.04);
  --sh-2:0 6px 16px -6px rgba(48,38,22,.14),0 2px 4px rgba(48,38,22,.05);
  --sh-3:0 22px 48px -14px rgba(36,28,14,.30),0 8px 16px -8px rgba(36,28,14,.12);
  --header-bg:rgba(247,244,238,.84);--tab-bg:rgba(255,255,255,.92);--scrim:rgba(28,22,12,.42);
  --banner-bg:#FBEFD9;--banner-fg:#714300;--banner-line:#EFD3A0;--toast-bg:#18211E;--toast-fg:#FFFFFF;
  --skel:#ECE6DB;--skel-hi:#F7F3EC;--primary-sh:0 6px 16px -6px rgba(31,111,92,.45);--primary-sh-hi:0 10px 22px -8px rgba(31,111,92,.5);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#101513;--bg-glow:radial-gradient(1200px 520px at 85% -120px,rgba(240,163,94,.07),transparent 60%),radial-gradient(900px 480px at -10% -80px,rgba(70,184,148,.08),transparent 60%);
  --surface:#171F1C;--surface-raised:#1D2723;--surface-inset:#131A17;--border:#25312C;--border-strong:#35443E;
  --text:#ECF1EE;--muted:#9EABA5;--subtle:#C8D2CD;
  --accent:#46B894;--accent-hover:#5CC8A5;--accent-ink:#62CBA8;--accent-soft:rgba(70,184,148,.13);--accent-line:rgba(70,184,148,.38);--on-accent:#04231A;
  --warm:#F0A35E;--warm-soft:rgba(240,163,94,.13);--warm-ink:#F5B880;
  --ok-fg:#8BE0AB;--ok-bg:rgba(74,222,128,.09);--ok-line:rgba(74,222,128,.30);--warn-fg:#F5C86E;--warn-bg:rgba(245,170,40,.10);--warn-line:rgba(245,170,40,.32);--bad-fg:#FCA8A0;--bad-bg:rgba(248,113,113,.10);--bad-line:rgba(248,113,113,.32);
  --green:#4ADE80;--red:#F87171;--amber:#F5B544;--star:#F5B544;
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 8px 20px -8px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.25);
  --sh-3:0 26px 56px -16px rgba(0,0,0,.7),0 8px 18px -8px rgba(0,0,0,.4);
  --header-bg:rgba(16,21,19,.84);--tab-bg:rgba(23,31,28,.94);--scrim:rgba(0,0,0,.58);
  --banner-bg:#2A2111;--banner-fg:#F5C86E;--banner-line:#45381C;--toast-bg:#ECF1EE;--toast-fg:#101513;
  --skel:#1F2925;--skel-hi:#27332E;--primary-sh:0 4px 12px -6px rgba(0,0,0,.6);--primary-sh-hi:0 8px 18px -8px rgba(0,0,0,.7);color-scheme:dark}}
:root[data-theme=dark]{--bg:#101513;--bg-glow:radial-gradient(1200px 520px at 85% -120px,rgba(240,163,94,.07),transparent 60%),radial-gradient(900px 480px at -10% -80px,rgba(70,184,148,.08),transparent 60%);
  --surface:#171F1C;--surface-raised:#1D2723;--surface-inset:#131A17;--border:#25312C;--border-strong:#35443E;
  --text:#ECF1EE;--muted:#9EABA5;--subtle:#C8D2CD;
  --accent:#46B894;--accent-hover:#5CC8A5;--accent-ink:#62CBA8;--accent-soft:rgba(70,184,148,.13);--accent-line:rgba(70,184,148,.38);--on-accent:#04231A;
  --warm:#F0A35E;--warm-soft:rgba(240,163,94,.13);--warm-ink:#F5B880;
  --ok-fg:#8BE0AB;--ok-bg:rgba(74,222,128,.09);--ok-line:rgba(74,222,128,.30);--warn-fg:#F5C86E;--warn-bg:rgba(245,170,40,.10);--warn-line:rgba(245,170,40,.32);--bad-fg:#FCA8A0;--bad-bg:rgba(248,113,113,.10);--bad-line:rgba(248,113,113,.32);
  --green:#4ADE80;--red:#F87171;--amber:#F5B544;--star:#F5B544;
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 8px 20px -8px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.25);
  --sh-3:0 26px 56px -16px rgba(0,0,0,.7),0 8px 18px -8px rgba(0,0,0,.4);
  --header-bg:rgba(16,21,19,.84);--tab-bg:rgba(23,31,28,.94);--scrim:rgba(0,0,0,.58);
  --banner-bg:#2A2111;--banner-fg:#F5C86E;--banner-line:#45381C;--toast-bg:#ECF1EE;--toast-fg:#101513;
  --skel:#1F2925;--skel-hi:#27332E;--primary-sh:0 4px 12px -6px rgba(0,0,0,.6);--primary-sh-hi:0 8px 18px -8px rgba(0,0,0,.7);color-scheme:dark}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0s;--dur-2:0s;--dur-3:0s}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
html,body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-base)/1.55 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background-image:var(--bg-glow);background-repeat:no-repeat;background-attachment:fixed;min-height:100vh;min-height:100dvh;overflow-x:hidden}
img,svg,video{max-width:100%}img{height:auto}
a{color:var(--accent-ink);text-decoration:none;transition:color var(--dur-1) var(--ease)}a:hover{color:var(--accent-hover)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent-line);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent-soft)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:90;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:var(--r-sm);transition:top var(--dur-2) var(--ease)}.skip:focus{top:10px;color:var(--on-accent)}
.demo-banner{background:var(--banner-bg);color:var(--banner-fg);font-size:12.5px;font-weight:550;text-align:center;padding:6px 12px;border-bottom:1px solid var(--banner-line);line-height:1.4}
.demo-banner a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--header-h);padding:10px max(18px,env(safe-area-inset-left));
  background:var(--header-bg);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:780;letter-spacing:-.02em;font-size:19px;white-space:nowrap;min-width:0}
.brand:hover{color:var(--text)}.brand:hover .logo{transform:translateY(-2px) rotate(-4deg)}
.logo{width:30px;height:30px;flex:none;display:inline-block;background:url("/static/brand/townlink-mark.svg") center/contain no-repeat;transition:transform var(--dur-3) var(--ease-spring)}
svg.logo,.logo svg{background:none;display:block}.logo .lg-pin{fill:var(--accent)}.logo .lg-house{fill:#fff}.logo .lg-door{fill:var(--warm)}
:root[data-theme=dark] .logo:not(svg){background-image:url("/static/brand/townlink-mark-dark.svg")}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .logo:not(svg){background-image:url("/static/brand/townlink-mark-dark.svg")}}
.promise-pill{font-size:12px;font-weight:600;color:var(--accent-ink);border:1px solid var(--accent-line);background:var(--accent-soft);padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap}
.topnav{display:none;gap:2px;margin-inline-start:auto}
.topnav a{color:var(--muted);padding:8px 12px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;position:relative;transition:color var(--dur-1),background-color var(--dur-2) var(--ease)}
.topnav a:hover{color:var(--text);background:var(--surface-inset)}
.topnav a.on{color:var(--accent-ink);background:var(--accent-soft)}
.acct{margin-inline-start:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;width:42px;height:40px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;box-shadow:var(--sh-1);color:var(--text);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2)}
.acct:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}.acct:active{transform:scale(.94)}
.acct svg{width:20px;height:20px}.acct .badge{position:absolute;top:-6px;inset-inline-end:-6px}
@media(min-width:900px){.topnav{display:flex}.acct{margin-inline-start:8px}.tabbar{display:none!important}}
@media(max-width:560px){.promise-pill{display:none}}
@media(max-width:380px){.brand{font-size:17.5px;gap:8px}.logo{width:27px;height:27px}.top{gap:8px;padding-inline:12px}}

/* ---------- page ---------- */
.view{max-width:1040px;margin:0 auto;padding:var(--sp-6) max(18px,env(safe-area-inset-left)) 120px;min-height:60vh}
@media(min-width:900px){.view{padding-bottom:56px}}
.view.enter>*{animation:tfRise var(--dur-3) var(--ease) both}
.view.enter>*:nth-child(2){animation-delay:40ms}.view.enter>*:nth-child(3){animation-delay:80ms}.view.enter>*:nth-child(4){animation-delay:120ms}
.view.enter>*:nth-child(5){animation-delay:160ms}.view.enter>*:nth-child(6){animation-delay:200ms}.view.enter>*:nth-child(7){animation-delay:240ms}
.view.enter>*:nth-child(n+8){animation-delay:270ms}
.view.enter .grid>*{animation:tfRise var(--dur-3) var(--ease) both}
.view.enter .grid>*:nth-child(2){animation-delay:30ms}.view.enter .grid>*:nth-child(3){animation-delay:60ms}.view.enter .grid>*:nth-child(4){animation-delay:90ms}
.view.enter .grid>*:nth-child(5){animation-delay:120ms}.view.enter .grid>*:nth-child(6){animation-delay:150ms}.view.enter .grid>*:nth-child(7){animation-delay:180ms}
.view.enter .grid>*:nth-child(8){animation-delay:210ms}.view.enter .grid>*:nth-child(n+9){animation-delay:240ms}
body.inchat .view.enter>*,.view.enter>.msgwrap,.view.enter>.sf{animation:tfFade var(--dur-2) var(--ease) both}
.view.enter>.sf .grid>*,body.inchat .view.enter .grid>*{animation:none}
@keyframes tfRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tfFade{from{opacity:0}to{opacity:1}}
@keyframes tfPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
h1{font-size:var(--fs-2xl);letter-spacing:-.025em;margin:4px 0 6px;line-height:1.15;font-weight:780;overflow-wrap:anywhere}
h2{font-size:var(--fs-lg);letter-spacing:-.015em;margin:30px 0 12px;font-weight:720;line-height:1.25}
h3{font-size:var(--fs-md);margin:0 0 4px;font-weight:700;line-height:1.3}
@media(max-width:420px){h1{font-size:26px}}
.muted{color:var(--muted)}.small{font-size:var(--fs-sm)}.tiny{font-size:var(--fs-xs)}.sub{color:var(--muted);margin:0 0 20px;font-size:var(--fs-md);max-width:680px}
.ugc,.sfpre{overflow-wrap:anywhere}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);margin:0 0 var(--sp-3);box-shadow:var(--sh-1);min-width:0}
.card.inset{background:var(--surface-inset);box-shadow:none}
.card.click,a.card{cursor:pointer;position:relative;transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2)}
@media(hover:hover){.card.click:hover,a.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-strong)}}
.card.click:active,a.card:active{transform:translateY(0) scale(.99)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1;min-width:0}
.grid{display:grid;gap:var(--sp-3)}.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
@media(max-width:420px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:var(--r-md);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;font-weight:650;font-size:15px;line-height:1.2;text-align:center;box-shadow:var(--sh-1);
  -webkit-tap-highlight-color:transparent;user-select:none;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.btn:hover{border-color:var(--muted);color:var(--text);box-shadow:var(--sh-2)}
@media(hover:hover){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:scale(.97);box-shadow:var(--sh-1)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,var(--primary-sh)}
.btn.primary:hover{background:var(--accent-hover);color:var(--on-accent);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,var(--primary-sh-hi)}
.btn.danger{color:var(--bad-fg);border-color:var(--bad-line);background:var(--bad-bg);box-shadow:none}.btn.danger:hover{border-color:var(--bad-fg)}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--subtle)}.btn.ghost:hover{background:var(--surface-inset);border-color:var(--border)}
.btn.sm{min-height:38px;padding:7px 13px;font-size:14px;border-radius:var(--r-sm)}.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn .rip,.chip .rip,.cat .rip,.card .rip{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:tfRipple .55s var(--ease) forwards;z-index:-1}
.cat .rip,.card .rip{z-index:0;opacity:.10}
@keyframes tfRipple{to{transform:scale(1);opacity:0}}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--muted);cursor:pointer}.linkbtn:hover{color:var(--text)}

/* ---------- category tiles ---------- */
.cat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);cursor:pointer;color:var(--text);min-height:100px;box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2)}
.cat:hover{color:var(--text);border-color:var(--accent-line);box-shadow:var(--sh-2)}
@media(hover:hover){.cat:hover{transform:translateY(-3px)}.cat:hover .ic{transform:scale(1.08) rotate(-4deg)}}
.cat:active{transform:scale(.98)}
.cat .ic{font-size:22px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);transition:transform var(--dur-3) var(--ease-spring)}
.cat .nm{font-weight:650;font-size:14.5px;line-height:1.28;overflow-wrap:anywhere}

/* ---------- forms ---------- */
label{display:block;font-size:var(--fs-sm);color:var(--subtle);margin:16px 0 6px;font-weight:620}
input,select,textarea{width:100%;max-width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:11px 14px;min-height:46px;outline:none;
  transition:border-color var(--dur-2),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:auto;accent-color:var(--accent);flex:none;margin:0}
input[type=file]{padding:9px;background:var(--surface-inset);border-style:dashed;cursor:pointer}
input[type=range]{accent-color:var(--accent);padding:0;min-height:auto;border:0;background:none}
.check{display:flex;gap:10px;align-items:center;color:var(--subtle);font-size:14.5px;margin:12px 0;font-weight:500}
form.card,.card form{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;overflow:hidden;padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;font-size:14px;font-weight:560;color:var(--subtle);user-select:none;
  transition:transform var(--dur-1) var(--ease),background-color var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.chip:hover{border-color:var(--accent-line);color:var(--text)}.chip:active{transform:scale(.95)}
.chip.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.chip.static{cursor:default}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:620;padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--border-strong);color:var(--subtle);background:var(--surface);white-space:nowrap;line-height:1.35}
.pill.ok{color:var(--ok-fg);border-color:var(--ok-line);background:var(--ok-bg)}.pill.warn{color:var(--warn-fg);border-color:var(--warn-line);background:var(--warn-bg)}
.pill.bad{color:var(--bad-fg);border-color:var(--bad-line);background:var(--bad-bg)}.pill.acc{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.badge{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warm);color:#fff;font-size:11px;font-weight:750;line-height:18px;text-align:center;animation:tfPop var(--dur-3) var(--ease-spring)}
.score{display:inline-flex;align-items:baseline;gap:2px;font-weight:780;color:var(--accent-ink);font-size:22px;font-variant-numeric:tabular-nums}.score small{font-size:12px;color:var(--muted);font-weight:500}
.promise{border:1px solid var(--accent-line);background:linear-gradient(135deg,var(--accent-soft),transparent 80%),var(--surface);border-radius:var(--r-lg);padding:15px 18px;font-size:14px;color:var(--subtle)}
.promise b{color:var(--accent-ink)}

/* ---------- landing ---------- */
.hero{position:relative;padding:28px 0 8px}
.hero h1{font-size:clamp(32px,7.4vw,52px);max-width:720px;line-height:1.06;letter-spacing:-.035em;margin:14px 0 12px}
.hero p{font-size:var(--fs-md);color:var(--muted);max-width:620px;margin:0}
.hero .row.mt{margin-top:22px}
@media(max-width:480px){.hero .row.mt>.btn:not(.ghost){flex:1 1 100%}}
.hiw-teaser{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)!important}
@media(hover:hover){.hiw-teaser:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}}

/* ---------- jobs ---------- */
.stages{display:flex;gap:4px;margin:14px 0 6px;overflow-x:auto;scrollbar-width:none}.stage{flex:1;min-width:0;text-align:center;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:420px){.stage{font-size:9.5px}}
.stage .bar{height:5px;border-radius:3px;background:var(--border);margin-bottom:7px;overflow:hidden;position:relative}.stage.done{color:var(--text)}
.stage.done .bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent-hover));transform-origin:left;animation:tfGrow .6s var(--ease) both}
[dir=rtl] .stage.done .bar::after{transform-origin:right}
@keyframes tfGrow{from{transform:scaleX(0)}to{transform:none}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px}.kv dt{color:var(--muted)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.money{font-variant-numeric:tabular-nums}.big{font-size:26px;font-weight:780;letter-spacing:-.02em}
.terms{border:1px solid var(--border);background:var(--surface-inset);border-radius:var(--r-md);padding:12px 14px;font-size:14px}
.terms .line{display:flex;justify-content:space-between;gap:10px;padding:4px 0}.terms .line b{font-variant-numeric:tabular-nums}
.sim{font-size:12px;color:var(--warn-fg);font-weight:600}
.reasons{margin:8px 0 0;padding-inline-start:18px;color:var(--subtle);font-size:14px}.reasons li{margin:2px 0}
details summary{cursor:pointer;color:var(--accent-ink);font-size:14px;font-weight:600;margin-top:8px;list-style-position:inside}
details[open]>*:not(summary){animation:tfRise var(--dur-2) var(--ease) both}
.msgs{display:flex;flex-direction:column;gap:8px;max-height:58vh;overflow-y:auto;padding:4px}
.msg{max-width:78%;padding:9px 13px;border-radius:16px;background:var(--surface-inset);border:1px solid var(--border);font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.mine{align-self:flex-end;background:var(--accent-soft);border-color:var(--accent-line)}.msg .t{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.composer{display:flex;gap:8px;margin-top:12px}.composer input{flex:1}
.photos{display:flex;gap:8px;flex-wrap:wrap}.photos img{width:92px;height:92px;object-fit:cover;border-radius:12px;border:1px solid var(--border);transition:transform var(--dur-2) var(--ease)}
.photos a:hover img{transform:scale(1.04)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,16px) scale(.96);opacity:0;background:var(--toast-bg);color:var(--toast-fg);padding:12px 18px;border-radius:14px;font-size:14.5px;font-weight:600;z-index:60;
  transition:transform var(--dur-3) var(--ease-spring),opacity var(--dur-2) var(--ease);max-width:min(92vw,520px);pointer-events:none;box-shadow:var(--sh-3);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}.toast.err{background:var(--bad-bg);color:var(--bad-fg);border:1px solid var(--bad-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media(min-width:900px){.toast{bottom:32px}}

/* ---------- sheet / modal ---------- */
.modal-bg{position:fixed;inset:0;background:var(--scrim);z-index:50;display:flex;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:tfFade var(--dur-2) var(--ease) both}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:24px 24px 0 0;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:var(--sh-3);animation:tfSheet var(--dur-3) var(--ease) both;position:relative}
.modal::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--border-strong)}
.modal h3:first-child{font-size:var(--fs-lg);margin-bottom:4px}
@keyframes tfSheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:640px){.modal-bg{align-items:center;padding:20px}.modal{border-radius:24px;animation-name:tfPop}.modal::before{display:none}}
.stars{display:flex;gap:6px;font-size:34px}.stars span{cursor:pointer;color:var(--border-strong);transition:transform var(--dur-2) var(--ease-spring),color var(--dur-1)}.stars span:hover{transform:scale(1.15)}.stars span.on{color:var(--star)}

/* ---------- tables, stats, empty, loading ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:start;padding:9px 6px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:620;font-size:13px}td.n,th.n{text-align:end;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
.card:has(>table),.card.tablewrap{overflow-x:auto}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1)}.stat .v{font-size:24px;font-weight:780;letter-spacing:-.02em;overflow-wrap:anywhere}.stat .k{color:var(--muted);font-size:13px;text-transform:capitalize}
.empty{text-align:center;color:var(--muted);padding:34px 14px}
.empty::before{content:"";display:block;width:46px;height:46px;margin:0 auto 10px;border-radius:15px;background:var(--accent-soft) url("/static/brand/townlink-mark.svg") center/24px no-repeat}
.empty.card{border-style:dashed;box-shadow:none;background:transparent}
.loading{color:var(--muted);padding:40px;text-align:center}
.skel-page{display:grid;gap:14px;padding-top:4px}
.skel{border-radius:var(--r-md);background:linear-gradient(90deg,var(--skel) 0%,var(--skel-hi) 45%,var(--skel) 90%);background-size:300% 100%;animation:tfShimmer 1.3s linear infinite}
.skel.h1{height:34px;width:min(62%,360px)}.skel.line{height:14px;width:min(86%,520px)}.skel.line.s{width:min(48%,280px)}.skel.card{height:92px;border:0;box-shadow:none;padding:0;margin:0}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px}.skel-grid .skel{height:100px;border-radius:var(--r-lg)}
@media(max-width:420px){.skel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@keyframes tfShimmer{from{background-position:100% 0}to{background-position:-200% 0}}
.splash{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 0 10px;color:var(--muted)}
.splash .logo{width:56px;height:56px;animation:tfBob 1.6s var(--ease) infinite alternate}
@keyframes tfBob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.hr{height:1px;background:var(--border);margin:16px 0}.mt{margin-top:14px}.mb0{margin-bottom:0}.mb{margin-bottom:12px}
.menu a{display:flex;align-items:center;gap:10px;padding:13px 8px;border-bottom:1px solid var(--border);color:var(--text);border-radius:10px;transition:background-color var(--dur-2),padding var(--dur-2) var(--ease)}
.menu a:hover{background:var(--surface-inset);padding-inline-start:12px}
.menu a:last-child{border-bottom:0}
.theme-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 8px;border-bottom:1px solid var(--border)}
.theme-pick .chips{gap:6px}.theme-pick .chip{padding:6px 12px;font-size:13.5px}

/* ---------- tab bar (phone) ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-around;background:var(--tab-bg);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px -12px rgba(0,0,0,.18)}
.tabbar a{flex:1;min-width:0;text-align:center;color:var(--muted);font-size:11.5px;font-weight:620;padding:4px 0;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;-webkit-tap-highlight-color:transparent;transition:color var(--dur-2)}
.tabbar a .i{display:grid;place-items:center;width:46px;height:28px;border-radius:14px;font-size:18px;line-height:1;transition:background-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-spring)}
.tabbar a .i svg{width:21px;height:21px}
.tabbar a:active .i{transform:scale(.9)}
.tabbar a.on{color:var(--accent-ink)}.tabbar a.on .i{background:var(--accent-soft)}
.tabbar a .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.tabbar .badge,.topnav .badge{position:absolute;top:0;inset-inline-end:calc(50% - 26px)}.topnav .badge{top:-4px;inset-inline-end:-4px}
.topnav a svg{display:none}

/* ---------- footer ---------- */
.foot{max-width:1040px;margin:0 auto;padding:22px max(18px,env(safe-area-inset-left)) calc(96px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;border-top:1px solid var(--border)}
.foot .fbrand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--subtle)}.foot .fbrand .logo{width:20px;height:20px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}.foot nav a{color:var(--muted)}.foot nav a:hover{color:var(--text)}
@media(min-width:900px){.foot{padding-bottom:28px}}
body.inchat .foot{display:none}

/* ---------- going global: Arabic font, RTL, language picker, book-for ---------- */
html[lang=ar] body,html[lang=ar] input,html[lang=ar] select,html[lang=ar] textarea,html[lang=ar] button{font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
html[lang=ar] body{line-height:1.6}html[lang=ar] h1,html[lang=ar] .hero h1{letter-spacing:0;line-height:1.3}
html[dir=rtl] [dir=ltr],html[dir=rtl] input[type=tel],html[dir=rtl] input[inputmode=numeric]{direction:ltr;text-align:end}
.langsel{width:auto;min-height:36px;height:40px;padding:4px 10px;font-size:13.5px;font-weight:600;margin-inline-start:auto;background:var(--surface);border-radius:12px;flex:none;box-shadow:var(--sh-1);cursor:pointer;max-width:42vw}
.langsel+.acct{margin-inline-start:6px}
@media(min-width:900px){.langsel{margin-inline-start:8px}}
.bookedfor{margin:8px 0 2px;padding:6px 10px;border-radius:var(--r-sm);background:var(--accent-soft);border:1px solid var(--accent-line);display:inline-block}
.forperson .fp-body{margin-top:6px}
.locfields .ctryhint{min-height:0;margin-top:3px;color:var(--accent-ink)}
/* v1: test-mode list, welcome, feedback */
.v1stubs{list-style:none;padding:0;margin:10px 0}.v1stub{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border)}.v1stub>span{font-size:20px;line-height:1.2}
.v1welcome{text-align:center}.v1welcome .row.between:first-child{text-align:start}.v1ic{font-size:44px;margin:14px 0 4px;animation:tfPop var(--dur-3) var(--ease-spring) both}.v1welcome h3{margin:6px 0}.v1welcome p{color:var(--subtle)}
.v1dots{display:flex;gap:6px;justify-content:center;margin-top:10px}.v1dots span{width:8px;height:8px;border-radius:4px;background:var(--border-strong);transition:width var(--dur-2) var(--ease),background-color var(--dur-2)}.v1dots span.on{background:var(--accent);width:22px}
.v1kinds{display:flex;flex-wrap:wrap;gap:8px}.v1kind{display:flex;gap:6px;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:6px 12px;font-size:14px;margin:0;cursor:pointer;background:var(--surface)}
.v1kind input{width:auto;min-height:auto}
.offline-card{margin-top:28px;text-align:center;max-width:560px;margin-inline:auto}.offline-card .splash{padding:8px 0 0}
.theme-anim,.theme-anim *{transition:background-color .35s ease,border-color .35s ease,color .25s ease!important}
/* ---------- landing art + trust row ---------- */
.hero{display:grid;gap:10px;align-items:center}
@media(min-width:820px){.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;padding-top:40px}}
.hero-art{width:100%;max-width:440px;height:auto;justify-self:center;display:block}
@media(max-width:819px){.hero-art{max-width:340px;margin-top:10px}}
.ha-sun{fill:var(--warm);opacity:.28}.ha-hill2{fill:var(--accent);opacity:.12}.ha-hill{fill:var(--accent);opacity:.22}
.ha-roof{fill:var(--accent)}.ha-wall{fill:var(--surface);stroke:var(--border-strong);stroke-width:1.5}.ha-win{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:1}
.ha-door{fill:var(--warm)}.ha-door2{fill:var(--accent)}
.ha-pin path{fill:var(--warm)}.ha-pin .ha-dot{fill:#fff}.ha-pin{animation:tfFloat 3.2s ease-in-out infinite alternate}
.ha-pin:nth-of-type(2n) path{fill:var(--accent)}
@keyframes tfFloat{from{translate:0 0}to{translate:0 -8px}}
.trust{list-style:none;margin:18px 0 6px;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.trust li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-1);font-weight:620;font-size:14.5px;color:var(--subtle)}
.trust .ti{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}.trust .ti svg{width:20px;height:20px}
.card.click,a.card{overflow:hidden}
.check{flex-wrap:wrap;row-gap:2px}
.forperson .check>.muted{flex:1 1 100%;padding-inline-start:30px;margin-top:-2px}
@media(max-width:560px){.sfcta>.btn{flex:1 1 0;white-space:nowrap;padding-inline:12px}.sfcta>.btn.primary{flex:1 1 100%}}
.adminnav{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.gsearch>input,.gsearch>select{flex:1 1 160px;width:auto;min-width:0}.gsearch>.btn{flex:none}
.filterbar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;padding:14px}
.filterbar .fb-cat{grid-column:1/-1}.filterbar .fb-ver{margin:0}.filterbar .fb-go{justify-self:end;min-width:110px}
@media(min-width:760px){.filterbar{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.3fr) auto auto}.filterbar .fb-cat{grid-column:auto}}
.card>label:first-child,form.card>label:first-child,.card>.grid:first-child>div>label:first-child,.card>div:first-child>label:first-child{margin-top:2px}
/* back links ("← Jobs") at the top of detail pages */
.view>a.small:first-child{display:inline-flex;align-items:center;gap:6px;font-weight:650;padding:6px 10px;margin-inline-start:-10px;border-radius:10px;transition:background-color var(--dur-2),transform var(--dur-1)}
.view>a.small:first-child:hover{background:var(--accent-soft)}.view>a.small:first-child:active{transform:scale(.97)}