/* Yalla China — shell + components (E4) · needs tokens.css */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-ar);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
body[dir="ltr"]{font-family:var(--font-latin)}
body[data-lang="zh"]{font-family:var(--font-zh)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* ===== thin red topbar ===== */
.topbar{background:linear-gradient(100deg,#8e0c13,#b01219 45%,#8e0c13);color:#f3d9db;font-size:12.5px;border-bottom:1px solid rgba(0,0,0,.15)}
.topbar .wrap{position:relative;display:flex;align-items:center;gap:12px;height:36px}
.topbar .quicklinks{display:flex;gap:16px}
.topbar .quicklinks a{color:#f0c9cc;font-weight:600}
.topbar .quicklinks a:hover{color:#fff}
.topbar .spacer{flex:1}
.tb-clock{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;font-weight:700;color:#fff;white-space:nowrap}
.tb-clock .cdot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.tb-clock b{font-variant-numeric:tabular-nums}
.topbar .tb-end{display:flex;align-items:center;gap:8px}
.lang-switch{display:inline-flex;gap:2px;background:rgba(0,0,0,.2);border-radius:30px;padding:3px}
.lang-switch a,.lang-switch button{color:#f5d6d8;font-size:12px;font-weight:800;padding:5px 13px;border-radius:30px;text-decoration:none;line-height:1;transition:.15s;white-space:nowrap;display:inline-flex;align-items:center}
.lang-switch a:hover{color:#fff;background:rgba(255,255,255,.14)}
.lang-switch a.active,.lang-switch button.active{background:#fff;color:#c2151d;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.tb-drop{position:relative}
.tb-btn{display:flex;align-items:center;gap:5px;color:#fff;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:30px;background:rgba(255,255,255,.14);transition:.15s}
.tb-btn:hover{background:rgba(255,255,255,.26)}
.tb-btn .caret{font-size:9px;opacity:.85}
.tb-menu{position:absolute;top:calc(100% + 7px);inset-inline-start:0;background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--shadow-lg);min-width:230px;max-height:340px;overflow-y:auto;padding:6px;display:none;z-index:120}
.tb-menu.open{display:block}
.tb-menu .tm-h{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:6px 9px}
.cy-calc{display:flex;align-items:center;gap:8px;padding:4px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.cy-calc input{width:100px;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:14px;font-weight:800;color:var(--navy);outline:none}
.cy-calc input:focus{border-color:var(--navy)}
.cy-calc b{color:var(--muted);font-size:13px}
.cyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px}
.cyrow:hover{background:var(--soft)}
.cyrow .l{color:var(--ink);font-weight:700}
.cyrow .r{color:var(--navy);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:820px){.topbar .quicklinks,.tb-clock{display:none}.tb-menu{inset-inline-start:auto;inset-inline-end:0}}

/* ===== frosted header ===== */
.header{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.header .wrap{position:relative;display:flex;align-items:center;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{height:56px;width:auto}
.brand .name{display:flex;flex-direction:column;line-height:1.02}
.brand .name b{color:var(--navy);font-weight:900;font-size:27px;letter-spacing:-.5px}
.brand .name span{color:var(--muted);font-size:11px;font-weight:600}
.search{flex:1 1 auto;max-width:440px;margin-inline:auto;display:flex;align-items:center;background:var(--soft);border:1.5px solid var(--line);border-radius:30px;height:48px;padding:0 6px 0 18px}
.search:focus-within{border-color:var(--red);background:#fff}
.search svg{width:19px;height:19px;color:var(--muted);flex-shrink:0}
.search input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:14.5px;padding-inline:10px;color:var(--ink)}
.search .go{background:var(--red);color:#fff;font-weight:800;font-size:14px;padding:0 22px;height:38px;border-radius:24px}
.search .go:hover{background:var(--red-dark)}
.account{display:flex;align-items:center;gap:10px;flex-shrink:0}
.iconbtn{width:46px;height:46px;border-radius:13px;background:var(--soft);display:grid;place-items:center;position:relative;transition:.2s;color:var(--navy)}
.iconbtn:hover{background:#e7ecf6}
.iconbtn svg{width:20px;height:20px}
.iconbtn .cc{position:absolute;top:-5px;inset-inline-start:-5px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;min-width:18px;height:18px;border-radius:10px;display:grid;place-items:center;padding:0 4px}
.login{font-weight:700;font-size:14px;padding:11px 22px;border-radius:12px;color:var(--navy);border:1.5px solid var(--line);white-space:nowrap;transition:.2s}
.login:hover{border-color:var(--navy)}
.reg{font-weight:800;font-size:14px;padding:12px 26px;border-radius:12px;background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(232,32,42,.25);white-space:nowrap;transition:.2s}
.reg:hover{background:var(--red-dark);transform:translateY(-1px)}
.menu-toggle{display:none;width:46px;height:46px;border-radius:13px;background:var(--soft);align-items:center;justify-content:center;color:var(--navy)}
@media(max-width:1040px){.search{display:none}}
@media(max-width:820px){.brand .name span{display:none}.login,.reg,.iconbtn{display:none}.menu-toggle{display:flex}.brand img{height:46px}.brand .name b{font-size:22px}}

/* ===== navbar (white pills) ===== */
.navbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);z-index:50;box-shadow:var(--shadow-sm)}
/* The strip scrolls with its scrollbar HIDDEN, so any section pushed past the
   edge simply does not exist to the visitor — Tourism and Legal were invisible
   on every laptop. The wrap is capped at var(--maxw) regardless of the window,
   so the only real fix is tiles compact enough that all 12 sections fit inside
   that cap; the scroll remains as a safety net for narrow screens only. */
.navbar .wrap{display:flex;align-items:center;gap:3px;height:58px;overflow-x:auto;scrollbar-width:none}
.navbar .wrap::-webkit-scrollbar{display:none}
.navbar a{display:flex;align-items:center;gap:5px;color:var(--ink);font-weight:700;font-size:13px;padding:6px 8px 6px 5px;border-radius:12px;white-space:nowrap;transition:background .2s,color .2s}
[dir="rtl"] .navbar a{padding:6px 5px 6px 8px}
/* Icon tile — same gradient/glow/lift language as .yc-tile elsewhere on the
   site (city-explore-i, prov-card), so the nav reads as one design system
   instead of a row of tiny flat glyphs. */
.navbar a .ico{--c:var(--navy);position:relative;display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:9px;font-size:15px;color:var(--c);
  background:linear-gradient(150deg,#f4faf7,#fff);border:1px solid #e2efe8;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s,border-color .3s}
.navbar a .ico::after{content:"";position:absolute;inset:-5px;border-radius:16px;z-index:-1;
  background:radial-gradient(closest-side,var(--c),transparent);opacity:0;filter:blur(9px);transition:opacity .3s}
.navbar a:hover{background:var(--soft);color:var(--navy)}
.navbar a:hover .ico{transform:translateY(-2px) scale(1.08);border-color:var(--c);background:linear-gradient(150deg,#eaf6f0,#fff)}
.navbar a:hover .ico::after{opacity:.55}
.navbar a.active{background:var(--navy);color:#fff}
.navbar a.active .ico{--c:#fff;color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
/* Small laptops / tablets landscape: one more notch so the full set still fits.
   Placed AFTER the base rules — same specificity, so source order decides.
   Below 821px the drawer takes over and the scroll is acceptable. */
@media(max-width:1180px) and (min-width:821px){
  .navbar .wrap{gap:2px}
  .navbar a{font-size:11.5px;gap:4px;padding:5px 6px 5px 4px}
  [dir="rtl"] .navbar a{padding:5px 4px 5px 6px}
  .navbar a .ico{width:24px;height:24px;border-radius:8px;font-size:13px}
}
/* Narrower still and one row is physically impossible — wrap to two honest rows
   rather than hide sections behind an invisible scroll. */
@media(max-width:1040px) and (min-width:821px){
  .navbar .wrap{flex-wrap:wrap;height:auto;min-height:58px;padding-top:4px;padding-bottom:4px;justify-content:center}
}
.navbar a.active .ico::after{opacity:0}
.navbar a.nav-home{color:var(--navy);font-weight:800;margin-inline-end:4px;border-inline-end:1.5px solid var(--line);border-radius:14px 0 0 14px;padding-inline-end:16px}
.navbar a.nav-home .ico{--c:#0b6e4f}
.navbar a.nav-home.active{background:var(--navy);color:#fff;border-inline-end-color:transparent}
.navbar a .flag{font-size:9px;background:#f0a500;color:#fff;padding:1px 6px;border-radius:30px;font-weight:800}
@media (prefers-reduced-motion: reduce){
  .navbar a .ico,.navbar a .ico::after{transition:none}
  .navbar a:hover .ico{transform:none}
}

/* ===== main layout: sidebar + content ===== */
.main{padding:20px 0 50px}
.layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.side{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}

/* weather */
.weather{background:linear-gradient(160deg,#1a4fb0,#0d2966);border-radius:20px;padding:20px;color:#fff;box-shadow:var(--shadow);overflow:hidden;position:relative}
.weather::before{content:"";position:absolute;top:-50px;inset-inline-start:-30px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.weather .city-sel{position:relative;z-index:2;margin-bottom:16px}
.weather .city-sel label{font-size:12px;color:#bcccef;font-weight:600;display:block;margin-bottom:6px}
.weather select{width:100%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:inherit;font-weight:700;font-size:14px;padding:11px 14px;border-radius:12px;cursor:pointer;-webkit-appearance:none;appearance:none}
.weather select option{color:#1c2436}
.weather .wbody{position:relative;z-index:2;text-align:center}
.weather .wicon{font-size:54px;line-height:1;margin-bottom:6px}
.weather .wtemp{font-size:46px;font-weight:800;line-height:1}
.weather .wdesc{font-size:14px;color:#cdd8f5;font-weight:600;margin:4px 0 16px}
.weather .wrow{display:flex;justify-content:space-between;gap:8px;border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
.weather .wrow .wi{flex:1;text-align:center}
.weather .wrow .wi .v{font-weight:800;font-size:15px}
.weather .wrow .wi .k{font-size:11px;color:#a9b6dd;margin-top:2px}
.weather .wupdated{font-size:10.5px;color:#8d9cc9;text-align:center;margin-top:10px}

/* prayer */
.prayer{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm)}
.prayer .ph{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:900;color:var(--navy);margin-bottom:14px}
.prayer .ph .pdot{margin-inline-start:auto;font-size:11px;font-weight:700;color:#16a34a;background:#e7f7ed;padding:3px 10px;border-radius:20px}
.prow{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:11px;font-size:13.5px}
.prow.next{background:linear-gradient(135deg,#eef3ff,#f7f9ff);border:1px solid #dbe6ff}
.prow .pn{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.prow .pn .pi{font-size:16px}
.prow .pt{font-weight:700;color:var(--navy);font-size:14px;font-variant-numeric:tabular-nums}
.prow.next .pt{color:var(--red)}

.side-promo{background:linear-gradient(150deg,#fff,#fff5f5);border:1px solid #ffdcdc;border-radius:20px;padding:20px;box-shadow:var(--shadow-sm);text-align:center}
.side-promo .si{font-size:34px;margin-bottom:8px}
.side-promo h4{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:5px}
.side-promo p{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.side-promo a{display:block;background:var(--red);color:#fff;font-weight:800;font-size:13.5px;padding:11px;border-radius:11px;transition:.2s}
.side-promo a:hover{background:var(--red-dark)}

/* content column */
.content{display:flex;flex-direction:column;gap:18px}
.panel,.latest,.wideblock{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 8px}
.panel-h h2{font-size:17px;font-weight:900;color:var(--navy);display:flex;align-items:center;gap:9px}
.panel-h .hint{font-size:12.5px;color:var(--muted);font-weight:600}

/* sections grid (renamed .ico -> .scat to avoid navbar .ico clash) */
.scat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px 18px 22px}
.scat{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 8px;border-radius:18px;transition:.25s cubic-bezier(.2,.8,.3,1.1);position:relative;border:1px solid transparent}
.scat:hover{background:#fff;border-color:var(--line);transform:translateY(-6px);box-shadow:0 14px 30px rgba(13,41,102,.10)}
.scat .box{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;color:#fff;transition:.28s cubic-bezier(.2,.8,.3,1.2);position:relative;box-shadow:0 10px 22px rgba(13,41,102,.18)}
.scat .box svg{width:31px;height:31px;position:relative;z-index:1;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scat .box::after{content:"";position:absolute;inset:0;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 55%)}
.scat:hover .box{transform:translateY(-3px) scale(1.08) rotate(-3deg)}
.scat .lbl{font-size:13.5px;font-weight:800;color:var(--ink);text-align:center}
.scat .tag{position:absolute;top:10px;inset-inline-end:12px;font-size:9px;font-weight:800;padding:2px 8px;border-radius:12px;z-index:2}
.scat .tag.live{background:#16a34a;color:#fff}
.scat .tag.soon{background:#f0a500;color:#fff}

/* wideblock header */
.wideblock .wh,.latest .lh{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.wh .wt,.lh .lt{display:flex;align-items:center;gap:11px}
.wh .wt .wic,.lh .lt .lic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;color:#fff}
.wh .wt b,.lh .lt b{font-size:17px;font-weight:900;color:var(--navy);display:block}
.wh .wt span,.lh .lt span{font-size:12px;color:var(--muted)}
.wh a,.lh a{color:var(--red);font-weight:800;font-size:13px;white-space:nowrap;display:flex;align-items:center;gap:5px}
.wh a:hover,.lh a:hover{gap:9px}

/* product cards (emoji, no external images) */
.pg5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:18px 22px 22px}
.pcard2{border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s;display:block}
.pcard2:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-color:transparent}
.pcard2 .pim{height:130px;display:grid;place-items:center;font-size:52px;position:relative;transition:.3s}
.pcard2:hover .pim{transform:scale(1.06)}
.pcard2 .pim .hl{position:absolute;top:9px;inset-inline-start:9px;background:#16a34a;color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px}
.pcard2 .pim .dc{position:absolute;top:9px;inset-inline-end:9px;background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px}
.pcard2 .pb{padding:11px 13px 14px}
.pcard2 .pb .nm{font-size:12.5px;font-weight:700;line-height:1.4;height:35px;overflow:hidden;margin-bottom:7px}
.pcard2 .pb .ft{display:flex;align-items:center;justify-content:space-between}
.pcard2 .pb .pr{color:var(--navy);font-weight:900;font-size:16px}
.pcard2 .pb .pr small{color:var(--muted);font-size:11px;font-weight:600;margin-inline-start:3px;text-decoration:line-through}
.pcard2 .pb .add{width:32px;height:32px;border-radius:10px;background:var(--soft);color:var(--navy);font-size:17px;transition:.2s}
.pcard2 .pb .add:hover{background:var(--red);color:#fff}

/* latest rows */
.lrow{display:flex;align-items:center;gap:14px;padding:13px 22px;border-bottom:1px solid var(--soft);transition:.2s}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--soft)}
.lrow .lthumb{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:24px;flex-shrink:0}
.lrow .linfo{flex:1;min-width:0}
.lrow .linfo .nm{font-weight:700;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .linfo .meta{font-size:12px;color:var(--muted);margin-top:2px}
.lrow .lright{text-align:end;flex-shrink:0}
.lrow .lright .pr{font-weight:900;color:var(--navy);font-size:15px}
.lrow .lright .pr small{color:var(--muted);font-size:11px;font-weight:600}
.lrow .lright .badge{font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px}
.lrow .lright .badge.green{background:#e7f7ed;color:#16a34a}
.lrow .lright .badge.blue{background:#e7eefb;color:#2563eb}
.lrow .lright .rate{color:#e8a13a;font-size:12.5px;font-weight:700}
.lrow .lright .new{background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* gig cards */
.gig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 22px 22px}
.gcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.gcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-color:transparent}
.gcard .gim{height:96px;display:grid;place-items:center;font-size:40px;position:relative}
.gcard .gcat{position:absolute;top:8px;inset-inline-start:8px;background:rgba(13,41,102,.85);color:#fff;font-size:10px;font-weight:800;padding:2px 9px;border-radius:20px}
.gcard .gb{padding:11px 13px 13px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard .gseller{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:700}
.gcard .gav{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex-shrink:0}
.gcard .gt{font-size:12.5px;font-weight:700;line-height:1.4;height:35px;overflow:hidden;color:var(--ink)}
.gcard .gf{display:flex;align-items:center;justify-content:space-between;margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
.gcard .grate{color:#e8a13a;font-weight:800;font-size:11.5px}
.gcard .gpr{color:var(--navy);font-weight:900;font-size:14px}
.gcard .gpr small{display:block;font-size:9.5px;color:var(--muted);font-weight:700}

/* tourism */
.tour-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:18px 22px 22px}
.tour{border-radius:18px;overflow:hidden;transition:.28s;position:relative;min-height:200px;display:flex;align-items:flex-end;color:#fff}
.tour:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tour::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.15) 55%,transparent)}
.tour .temoji{position:absolute;top:18px;inset-inline-end:18px;font-size:40px;z-index:2}
.tour .tcontent{position:relative;z-index:3;padding:18px}
.tour .tcity{font-size:11.5px;font-weight:700;color:#ffd9dc;display:flex;align-items:center;gap:5px;margin-bottom:5px}
.tour h4{font-size:17px;font-weight:900;line-height:1.3;margin-bottom:8px}
.tour .tmeta{display:flex;align-items:center;gap:10px;font-size:12px;color:#eee}
.tour .tmeta .rate{color:#ffd54a;font-weight:700}


/* image cards (real photos + emoji/gradient fallback) */
.cgrid{display:grid;gap:14px;padding:18px 22px 22px}
.cgrid.g5{grid-template-columns:repeat(5,1fr)}
.cgrid.g4{grid-template-columns:repeat(4,1fr)}
.cgrid.g3{grid-template-columns:repeat(3,1fr)}
/* Curated-directory home panels (mosques/attractions/malls/restaurants) reuse
   each page's own native grid (ex-grid/at-grid/rgrid) inside the .wideblock
   card shell — this matches .cgrid's inner padding so they sit flush with the
   header, AND forces a flat 3 columns instead of each grid's own auto-fill/
   fixed-4 rule: with exactly 9 cards (yc_guide_panel/yc_home_restaurants_panel's
   count) that's a clean 3×3 block, never a dangling last row. */
.wideblock .ex-grid.home-guide-grid,.wideblock .at-grid.home-guide-grid,.wideblock .rgrid.home-guide-grid{
  padding:18px 22px 22px;margin-top:0;grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){
  .wideblock .ex-grid.home-guide-grid,.wideblock .at-grid.home-guide-grid,.wideblock .rgrid.home-guide-grid{
    grid-template-columns:repeat(2,1fr)}
}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;background:#fff}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px);border-color:transparent}
.card .cimg{position:relative;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}
.card .cimg .emo{position:absolute;font-size:44px;opacity:.85;z-index:0}
.card .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:.35s}
.card:hover .cimg img{transform:scale(1.07)}
.card .cbadge{position:absolute;top:9px;inset-inline-start:9px;color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;z-index:2}
.card .cbadge.halal{background:#16a34a}.card .cbadge.used{background:#5b6472}
.card .cbadge.disc{inset-inline-start:auto;inset-inline-end:9px;background:var(--red)}
.card .cbody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .ctitle{font-size:13px;font-weight:700;line-height:1.4;color:var(--ink);min-height:37px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .cmeta{font-size:11.5px;color:var(--muted);font-weight:600}
.card .cfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.card .cprice{color:var(--navy);font-weight:900;font-size:16px;white-space:nowrap}
.card .cprice small{color:var(--muted);font-size:11px;font-weight:600;text-decoration:line-through;margin-inline-start:3px}
.card .crate{color:#e8a13a;font-weight:800;font-size:12.5px}
.card .add{width:32px;height:32px;border-radius:10px;background:var(--soft);color:var(--navy);font-size:17px;flex-shrink:0}
.card .add:hover{background:var(--red);color:#fff}
.cbadge2{font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px}
.cbadge2.blue{background:#e7eefb;color:#2563eb}
.gcard .cimg{aspect-ratio:16/9}
.gcard .gcat{position:absolute;top:8px;inset-inline-start:8px;background:rgba(13,41,102,.85);color:#fff;font-size:10px;font-weight:800;padding:2px 9px;border-radius:20px;z-index:2}
.gcard .gseller{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);font-weight:700}
.gcard .gav{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex-shrink:0}
.gcard .gf{display:flex;align-items:center;justify-content:space-between;margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
.gcard .gpr{color:var(--navy);font-weight:900;font-size:14px;text-align:end}
.gcard .gpr small{display:block;font-size:9.5px;color:var(--muted);font-weight:700}
.tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tour::after{z-index:1}
@media(max-width:980px){.cgrid.g5,.cgrid.g4,.cgrid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cgrid.g5,.cgrid.g4,.cgrid.g3{grid-template-columns:repeat(2,1fr)}}

/* footer */
.footer{background:var(--navy);color:#c5d0e8;margin-top:0}
.footer .ftop{max-width:var(--maxw);margin:0 auto;padding:46px 18px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer .fbrand img{height:50px;margin-bottom:14px}
.footer .fbrand p{font-size:13.5px;color:#9fb0d4;max-width:280px}
.footer .fbrand .social{display:flex;gap:10px;margin-top:16px}
.footer .fbrand .social a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:16px;transition:.2s}
.footer .fbrand .social a:hover{background:var(--red)}
.footer h4{color:#fff;font-size:15px;font-weight:800;margin-bottom:16px}
.footer ul{list-style:none}
.footer ul li{margin-bottom:9px}
.footer ul li a{font-size:13.5px;color:#a9b8d8;transition:.2s}
.footer ul li a:hover{color:#fff}
.footer .fbar{border-top:1px solid rgba(255,255,255,.1)}
.footer .fbar .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:#8fa0c4;padding-top:18px;padding-bottom:18px}

/* footer — app download strip */
.footer .fapps{border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.14)}
.footer .fapps .wrap{max-width:var(--maxw);margin:0 auto;padding:22px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.footer .fapps-say h4{margin-bottom:5px}
.footer .fapps-say p{font-size:13px;color:#9fb0d4;max-width:420px}
.footer .fapps-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.appbadge{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;transition:.18s;position:relative}
.appbadge:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
/* the app's own icon is the badge mark: circle on Android, squircle on iOS */
.appbadge-icon{width:48px;height:48px;display:block;flex-shrink:0;background:#fff}
.appbadge--ios .appbadge-icon{border-radius:11px}
.appbadge--android .appbadge-icon{border-radius:50%}
.appbadge-txt{display:flex;flex-direction:column;line-height:1.3;text-align:start}
.appbadge-txt small{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:#a9b8d8}
.appbadge-txt strong{font-size:15px;font-weight:800;color:#fff}
.appbadge-txt em{font-style:normal;font-size:11px;color:#8fa0c4;margin-top:1px}
/* the platform matching the visitor's phone gets the accent */
.appbadge.is-mine{background:var(--red);border-color:var(--red)}
.appbadge.is-mine:hover{background:#c9161f;border-color:#c9161f}
.appbadge.is-mine .appbadge-txt small,.appbadge.is-mine .appbadge-txt em{color:rgba(255,255,255,.82)}
.appbadge-flag{position:absolute;top:-9px;inset-inline-end:10px;background:var(--red);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.3px;padding:2px 8px;border-radius:99px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.appbadge.is-mine .appbadge-flag{background:#fff;color:var(--red)}
/* install the web app — a button, so it needs the anchor styling reset */
.appbadge--install{font:inherit;cursor:pointer;text-align:start;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.appbadge--install:hover{background:rgba(255,255,255,.2)}
.appbadge--install .appbadge-icon{border-radius:11px}
.appbadge--install[hidden]{display:none}
.appbadge-hint{flex-basis:100%;font-size:12.5px;line-height:1.6;color:#c5d0e8;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 14px;margin-top:2px}
.appbadge-hint[hidden]{display:none}
/* secondary text link: hosted APK, for visitors behind the Play block */
.appbadge-apk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#a9b8d8;text-decoration:none;padding:8px 4px;border-bottom:1px dashed rgba(255,255,255,.28);transition:.18s}
.appbadge-apk:hover{color:#fff;border-bottom-color:#fff}

/* mobile menu drawer */
.mobile-menu,.mm-overlay{display:none}
@media(max-width:820px){
  /* Clip the off-canvas drawer's off-screen width so RTL cannot scroll into it
     (the sticky sidebar is already static at this breakpoint, so this is safe). */
  html,body{overflow-x:hidden}
  .mobile-menu{display:block;position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(86vw,340px);background:#fff;z-index:200;transform:translateX(-100%);transition:transform .25s ease;box-shadow:8px 0 30px rgba(13,41,102,.18);overflow-y:auto;padding:20px}
  body[dir="rtl"] .mobile-menu{transform:translateX(100%)}
  .mobile-menu.open{transform:translateX(0)!important}
  .mm-overlay.open{display:block;position:fixed;inset:0;background:rgba(10,20,45,.45);z-index:190}
  .mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .mm-close{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:20px;color:var(--ink);background:#fff}
  .mm-search{display:flex;align-items:center;background:var(--soft);border:1.5px solid var(--line);border-radius:30px;padding:0 5px 0 16px;height:44px;margin-bottom:16px}
  .mm-search input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:14px;padding-inline:8px}
  .mm-search .go{background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:8px 14px;border-radius:30px}
  .mm-actions{display:flex;gap:8px;margin-bottom:20px}
  .mm-actions a{flex:1;display:block;text-align:center;border-radius:30px;font-weight:800;font-size:13.5px;padding:11px 0}
  .mm-actions a.mmb-ghost{color:var(--navy);border:1.5px solid var(--line)}
  .mm-actions a.mmb-primary{background:var(--red);color:#fff}
  .mm-t{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
  .mm-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mm-links a{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:var(--soft);font-size:13.5px;font-weight:700;color:var(--ink)}
  .mm-links a .flag{font-size:8px;background:#f0a500;color:#fff;padding:1px 5px;border-radius:30px;font-weight:800}
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:3px solid #7FA0E8;outline-offset:2px;border-radius:6px}

/* responsive */
@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .weather{flex:1;min-width:260px}.prayer{flex:1;min-width:240px}.side-promo{flex:1;min-width:220px}
  .two{grid-template-columns:1fr}
  .scat-grid{grid-template-columns:repeat(5,1fr)}
  .pg5{grid-template-columns:repeat(3,1fr)}
  .gig-grid{grid-template-columns:repeat(2,1fr)}
  .tour-grid{grid-template-columns:repeat(2,1fr)}
  .footer .ftop{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .scat-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .scat{padding:14px 4px}.scat .box{width:56px;height:56px}.scat .box svg{width:26px;height:26px}
  .pg5{grid-template-columns:repeat(2,1fr)}
  .tour-grid{grid-template-columns:1fr 1fr}
  .side{flex-direction:column}
  .footer .ftop{grid-template-columns:1fr}
  .footer .fapps .wrap{flex-direction:column;align-items:flex-start}
  .footer .fapps-links{width:100%}
  .appbadge{flex:1 1 150px}
  .appbadge-apk{flex:0 0 auto}
}

/* ===== catalog / cart / account pages (E7) ===== */
.pagewrap{max-width:1240px;margin:0 auto;padding:24px 18px 50px}
.crumb{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:14px}
.crumb a{color:var(--navy)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:22px;color:var(--navy)}
.page-head .cnt{font-size:13px;color:var(--muted);font-weight:700}
.msg{padding:12px 16px;border-radius:12px;font-weight:700;font-size:14px;margin-bottom:18px}
.msg.ok{background:#e7f7ed;color:#16a34a}.msg.err{background:#fde8ea;color:var(--red)}
.empty{background:#fff;border:1px solid var(--line);border-radius:18px;padding:44px;text-align:center;color:var(--muted);font-weight:600}
.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.detail .dimg{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,#eef2f8,#fff)}
.detail .dimg .emo{position:absolute;font-size:80px;opacity:.85;z-index:0}
.detail .dimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.detail h1{font-size:24px;color:var(--navy);margin-bottom:8px}
.detail .dstore{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:14px}
.detail .dprice{font-size:30px;font-weight:900;color:var(--red);margin:10px 0 6px}
.detail .dcond{display:inline-block;font-size:12px;font-weight:800;padding:3px 12px;border-radius:20px;background:var(--soft);color:var(--navy);margin-bottom:18px}
.detail .dbuy{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.detail .qty{width:70px;padding:11px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:15px;font-weight:800;text-align:center}
.btn-lg{display:inline-block;background:var(--red);color:#fff;border:none;font-weight:800;font-size:15px;padding:13px 26px;border-radius:12px;cursor:pointer;text-decoration:none;line-height:1.2}
.btn-lg:hover{background:var(--red-dark)}
.btn-out{background:#fff;color:var(--navy);border:1.5px solid var(--line);font-weight:800;font-size:14px;padding:12px 22px;border-radius:12px;display:inline-block}
@media(max-width:760px){.detail{grid-template-columns:1fr}}
.cartbox{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cartrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cartrow:last-child{border-bottom:none}
.cartrow .ct{flex:1;font-weight:700;color:var(--ink);min-width:0}
.cartrow .cp{font-weight:900;color:var(--navy);white-space:nowrap}
.cartrow form{display:flex;gap:8px;align-items:center;margin:0}
.cartrow .qtin{width:56px;padding:8px;border:1.5px solid var(--line);border-radius:9px;text-align:center;font-weight:800}
.cart-foot{display:flex;align-items:center;justify-content:space-between;padding:18px;background:var(--soft);gap:12px;flex-wrap:wrap}
.cart-foot .tot{font-size:20px;font-weight:900;color:var(--navy)}
.auth-card{max-width:420px;margin:24px auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.auth-card h1{color:var(--navy);font-size:22px;margin-bottom:16px}
.auth-card label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.auth-card input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;margin-bottom:14px}
.auth-card .btn-lg{width:100%}
.auth-card .sw{text-align:center;margin-top:14px;font-size:13px}
.auth-card .sw a{color:var(--red);font-weight:700}
.auth-card + .auth-card{margin-top:18px}
/* vendor self-serve area */
.btn-out.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.vpanel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:22px}
.vpanel h2{color:var(--navy)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-bottom:6px}
.vgrid .vfull{grid-column:1/-1}
.vpanel label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.vpanel input,.vpanel select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;margin-bottom:14px;background:#fff}
.vpanel input:focus,.vpanel select:focus{outline:none;border-color:var(--navy)}
.vtable{width:100%;border-collapse:collapse}
.vtable th,.vtable td{text-align:start;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.vtable th{background:var(--soft);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.vtable tr:last-child td{border-bottom:none}
.ostat{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:20px;background:var(--soft);color:var(--navy);white-space:nowrap}
.ostat.s-created{background:#fdeccf;color:#a15c00}
.ostat.s-acknowledged{background:#e8f0fe;color:#1a56db}
.ostat.s-fulfilled{background:#e0f2f1;color:#0f766e}
.ostat.s-delivered{background:#e7f7ed;color:#16a34a}
.ostat.s-canceled{background:#fde8ea;color:var(--red)}
.ccity{font-size:12px;color:var(--muted);font-weight:700;margin:2px 0 6px}
.dspecs{margin:4px 0 16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.dspecs .drow{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--line)}
.dspecs .drow:last-child{border-bottom:none}
.dspecs .dk{color:var(--muted);font-weight:700}
.dspecs .dv{color:var(--ink);font-weight:800;text-align:end}
/* search page */
.searchbar{display:flex;gap:8px;margin:6px 0 14px}
.searchbar input[type=text]{flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;background:#fff}
.searchbar input[type=text]:focus{outline:none;border-color:var(--navy)}
.searchbar button{background:var(--red);color:#fff;border:none;font-weight:800;font-size:15px;padding:0 26px;border-radius:12px;cursor:pointer}
.stabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.stab{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;font-weight:800;font-size:13.5px;color:var(--navy);background:#fff}
.stab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.stab .soon{font-size:10px;font-weight:800;background:#fdeccf;color:#a15c00;padding:1px 7px;border-radius:20px}
.stab.on .soon{background:rgba(255,255,255,.2);color:#fff}
.sfilters{display:flex;gap:10px;margin:-6px 0 18px;flex-wrap:wrap;align-items:center}
.sfilters select{padding:9px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:700;background:#fff}
.wishx{width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.15);color:var(--red);font-weight:900;font-size:15px;cursor:pointer;line-height:1}
.article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;max-width:820px}
.article h1{color:var(--navy);font-size:24px;margin-bottom:16px}
.article p{color:var(--ink);line-height:1.9;margin-bottom:14px;font-size:15px}
.article b{color:var(--navy)}
/* ratings & reviews */
.stars{color:#f5a623;font-weight:800;font-size:14px;white-space:nowrap}
.stars b{color:var(--ink)}.stars .rc{color:var(--muted);font-weight:600;font-size:12px}
.crate2{margin:2px 0 4px}
.reviews{margin-top:10px}
.reviewbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:18px}
.reviewbox textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;margin:12px 0;resize:vertical}
.rstars-in{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rstars-in input{display:none}
.rstars-in label{font-size:26px;color:#dcdfe6;cursor:pointer;line-height:1}
.rstars-in input:checked ~ label,.rstars-in label:hover,.rstars-in label:hover ~ label{color:#f5a623}
.rvrow{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px}
.rvhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.rvstars{color:#f5a623;font-size:13px}
.rvbody{color:var(--ink);font-size:14px;line-height:1.7}
.vbadge{font-size:11px;font-weight:800;background:#e7f7ed;color:#16a34a;padding:2px 8px;border-radius:20px}
.storehead{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:22px}
.storeav{width:64px;height:64px;border-radius:16px;background:linear-gradient(150deg,#eef2f8,#fff);display:grid;place-items:center;font-size:30px;flex-shrink:0}
.storehead h1{color:var(--navy);font-size:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.storemeta{color:var(--muted);font-weight:700;font-size:13px;margin-top:6px}
.storemeta a{color:var(--navy)}
/* notifications */
.notifbox{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.notifrow{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.notifrow:last-child{border-bottom:none}
.notifrow:hover{background:var(--soft)}
.notifrow.unread{background:#f0f6ff}
.notifrow .nico{font-size:22px;flex-shrink:0}
.nbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.nbody b{color:var(--navy);font-size:14.5px}
.nbody .nt{font-size:13px;color:var(--ink)}
.nbody .nd{font-size:11.5px;color:var(--muted);font-weight:700}
/* order message thread */
.msgbox{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.msgrow{display:flex}
.msgrow.mine{justify-content:flex-end}
.msgbubble{max-width:75%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:14px;line-height:1.6}
.msgrow.mine .msgbubble{background:#eef6ff;border-color:#d6e6ff}
.msgwho{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:3px}
.msgform{display:flex;gap:8px}
.msgform input{flex:1;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:14px}
/* in-site visual search */
.imgsearch{margin-bottom:20px}
.imgdrop{display:flex;align-items:center;gap:16px;background:#fff;border:2px dashed var(--line);border-radius:16px;padding:22px;flex-wrap:wrap}
.imgdrop .imgi{font-size:34px}
.imgdrop input[type=file]{display:none}
.imgdrop .btn-lg{cursor:pointer;margin-inline-start:auto}
/* payment */
.paybox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:16px}
.paytitle{font-weight:900;color:var(--navy);margin-bottom:12px}
.payrow{display:flex;gap:10px;flex-wrap:wrap}
.paybtn{text-decoration:none}
.paybtn.p-alipay{background:#1677ff}
.paybtn.p-wechat{background:#07c160}
@media(max-width:640px){.vgrid{grid-template-columns:1fr}}

/* ===== Study section — university list rows (distinct from the product grid) ===== */
.study-hero{background:linear-gradient(135deg,var(--navy),#0a1f4d);color:#fff;border-radius:16px;padding:26px 28px;margin-bottom:20px;position:relative;overflow:hidden}
.study-hero::after{content:"🎓";position:absolute;inset-inline-end:18px;top:8px;font-size:96px;opacity:.12}
.study-hero h1{font-size:24px;font-weight:900;margin:0 0 6px}
.study-hero p{margin:0;opacity:.9;max-width:640px;font-size:14px}
.study-hero .stats{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap}
.study-hero .stats .n{font-size:22px;font-weight:900;line-height:1}
.study-hero .stats .l{font-size:12px;opacity:.85;margin-top:2px}
.apply-cta{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--warning);border-radius:14px;padding:16px 20px;margin-bottom:20px;flex-wrap:wrap}
.apply-cta .ac-i{font-size:34px}
.apply-cta .ac-t{flex:1;min-width:220px}
.apply-cta .ac-t b{display:block;font-size:16px;color:var(--navy);font-weight:900}
.apply-cta .ac-t span{font-size:13px;color:var(--muted)}
.apply-cta .ac-p{font-size:20px;font-weight:900;color:var(--red);white-space:nowrap}

.uni-list{display:flex;flex-direction:column;gap:12px}
.uni-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;transition:.16s;position:relative;overflow:hidden}
.uni-row:hover{box-shadow:var(--shadow);border-color:#dbe3f4;transform:translateX(3px)}
.uni-row.featured{border-color:var(--warning);box-shadow:0 0 0 1px var(--warning),var(--shadow-sm)}
.uni-row.featured::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:linear-gradient(#e6b800,#ffce4d)}
.uni-logo{width:64px;height:64px;border-radius:50%;flex-shrink:0;background:var(--soft);border:1px solid var(--line);position:relative;display:grid;place-items:center;overflow:hidden}
.uni-logo .mono{font-weight:900;color:var(--navy);font-size:26px}
.uni-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uni-mid{flex:1;min-width:0}
.uni-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.uni-name h3{font-size:16.5px;font-weight:800;color:var(--navy);margin:0}
.uni-name .feat-tag{font-size:9.5px;font-weight:900;color:#5a3b00;background:linear-gradient(90deg,#ffd75e,#ffb300);padding:2px 9px;border-radius:999px}
.uni-name .zh{font-size:13px;color:var(--muted);font-weight:600}
.uni-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);font-weight:600}
.uni-meta .m{display:flex;align-items:center;gap:5px}
.uni-meta .badge-scholar{color:var(--success);font-weight:800}
.uni-meta .badge-eng{color:#2563eb;font-weight:800}
.uni-ranks{display:flex;gap:10px;flex-shrink:0}
.rank-box{text-align:center;background:var(--soft);border-radius:12px;padding:8px 14px;min-width:82px}
.rank-box .rv{font-size:18px;font-weight:900;color:var(--navy);line-height:1}
.rank-box .rl{font-size:10px;color:var(--muted);font-weight:700;margin-top:3px}
.rank-box.world .rv{color:var(--red)}
.rank-box.sch .rv{color:#16a34a;font-size:16px}
/* Scholarship type note on the university page */
.uni-sch-note{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:#f6f8fd}
.uni-sch-note.csc{background:linear-gradient(120deg,#eafaf0,#f2fff8);border-color:#bfe6cd}
.uni-sch-note.univ{background:#f3f8ff;border-color:#cfe0f6}
.uni-sch-note.none{background:#fafafa;border-color:#eee}
.uni-sch-note .usn-ic{font-size:22px;line-height:1.1}
.uni-sch-note b{font-size:14px;color:var(--navy);display:block;margin-bottom:3px}
.uni-sch-note p{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}
.uni-cta{flex-shrink:0}
.uni-cta .view{background:var(--navy);color:#fff;font-size:12.5px;font-weight:800;padding:10px 16px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.uni-cta .view:hover{background:#0a1f4d}
@media(max-width:760px){
  .uni-row{flex-wrap:wrap}
  .uni-ranks{order:3}
  .uni-cta{order:4;margin-inline-start:auto}
}

/* ===== University detail page — matches the approved university.html reference ===== */
.uni-hero2{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:16px}
.uh-wrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.uni-crest{width:96px;height:96px;border-radius:50%;flex-shrink:0;border:1px solid var(--line);background:var(--soft);position:relative;display:grid;place-items:center;overflow:hidden}
.uni-crest .mono{font-weight:900;color:var(--navy);font-size:38px}
.uni-crest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uh-body{flex:1;min-width:0}
.uh-names{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.uh-names h1{font-size:26px;font-weight:900;color:var(--navy);margin:0}
.uh-names .name-zh{font-size:18px;font-weight:700;color:var(--muted)}
.uh-names .name-en{font-size:14px;font-weight:600;color:var(--muted);direction:ltr;display:inline-block}
.uh-names .feat-tag{font-size:10px;font-weight:900;color:#5a3b00;background:linear-gradient(90deg,#ffd75e,#ffb300);padding:3px 11px;border-radius:999px}
.uh-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:700;margin-bottom:16px}
.uh-meta .m{display:flex;align-items:center;gap:6px}
.uh-ranks{display:flex;gap:12px;flex-wrap:wrap}
.uni-grid2{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start;margin-top:18px}
.ublock{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px}
.ublock h2{font-size:18px;font-weight:900;color:var(--navy);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.ublock p{font-size:14px;color:var(--ink);line-height:1.9;margin:0}
.ublock .sub{font-size:12.5px;color:var(--muted);font-weight:700;margin:-6px 0 12px}
.majors{display:flex;flex-wrap:wrap;gap:8px}
.major{font-size:13px;font-weight:700;color:var(--navy);background:var(--soft);border:1px solid var(--line);padding:8px 14px;border-radius:999px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery a{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--soft);display:grid;place-items:center}
.gallery a .gph{font-size:26px;opacity:.5}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.2s;position:absolute}
.gallery a{position:relative}
.gallery a:hover img{transform:scale(1.05)}
.ufacts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ufact{background:#fff;padding:12px 14px}
.ufact:last-child:nth-child(odd){grid-column:1 / -1}
.ufact .fl{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:3px}
.ufact .fv{font-size:14px;color:var(--ink);font-weight:800}
.yc-service{background:linear-gradient(135deg,var(--navy),#0a1f4d);color:#fff;border-radius:16px;padding:22px;margin-bottom:18px}
.yc-service h2{color:#fff;font-size:18px;font-weight:900;margin:0 0 6px;display:flex;gap:8px;align-items:center}
.yc-service>p{color:#c6d1ec;font-size:13.5px;margin:0}
.yc-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.yc-step{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px}
.yc-step .ys-n{width:30px;height:30px;border-radius:8px;background:var(--red);color:#fff;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.yc-step b{display:block;font-size:14px;color:#fff;font-weight:800;margin-bottom:4px}
.yc-step p{font-size:12.5px;color:#c6d1ec;line-height:1.6;margin:0}
.visa-select{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.visa-select label{font-size:13px;font-weight:800;color:var(--navy)}
.visa-select select{font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:10px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;min-width:200px}
.visa-steps{display:flex;flex-direction:column;gap:12px}
.visa-step{display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--soft);border-radius:12px}
.visa-step .vs-n{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.visa-step .vs-t{font-size:13.5px;font-weight:800;color:var(--ink);display:block;margin-bottom:2px}
.visa-step .vs-d{font-size:12.5px;color:var(--muted);font-weight:600}
.uni-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}
.side-info{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.side-info h4{font-size:14px;font-weight:900;color:var(--navy);margin:0 0 10px}
.si-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.si-row:last-child{border:none}
.si-row .k{color:var(--muted);font-weight:600}
.si-row .v{color:var(--ink);font-weight:800}
.si-row .v.ltr{direction:ltr;display:inline-block}
.map-embed{border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center}
.map-embed .gph{font-size:30px;opacity:.5}
.ad-slot-v{background:linear-gradient(160deg,#fffaf0,#fff);border:1.5px dashed #e8cf8f;border-radius:16px;padding:18px;text-align:center}
.ad-slot-v .ad-tag{font-size:10px;font-weight:800;color:#8a6d1f;background:#fff3d1;padding:3px 10px;border-radius:999px;border:1px solid #f0dfa0;display:inline-block;margin-bottom:10px}
.ad-slot-v b{display:block;font-size:14px;color:var(--navy);font-weight:800;margin-bottom:5px}
.ad-slot-v span{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:12px}
.ad-slot-v .ad-cta{background:var(--navy);color:#fff;font-size:12.5px;font-weight:800;padding:9px 18px;border-radius:999px;display:inline-block}
.apply-card{background:linear-gradient(135deg,var(--navy),#0a1f4d);color:#fff;border-radius:16px;padding:20px;position:relative;overflow:hidden}
.apply-card::before{content:"";position:absolute;top:-40px;inset-inline-end:-40px;width:140px;height:140px;border-radius:50%;background:rgba(232,32,42,.25)}
.apply-card .ac-badge{position:relative;font-size:11px;font-weight:800;background:var(--red);color:#fff;padding:3px 11px;border-radius:999px;display:inline-block;margin-bottom:12px}
.apply-card h4{color:#fff;position:relative;font-size:17px;margin:0 0 8px}
.apply-card p{position:relative;font-size:12.5px;color:#c6d1ec;line-height:1.6;margin:0 0 12px}
.apply-card .price{position:relative;display:flex;align-items:baseline;gap:8px;margin-bottom:16px}
.apply-card .price .amt{font-size:28px;font-weight:900}
.apply-card .price .per{font-size:12px;color:#b6c2e0;font-weight:700}
.apply-card .price .cny{font-size:12px;color:#ffd27a;font-weight:800}
.apply-card .ac-btn{position:relative;display:block;text-align:center;background:#fff;color:var(--navy);font-weight:900;font-size:14px;padding:12px;border-radius:999px}
.apply-card .ac-btn:hover{background:#f0f3fa}
@media(max-width:980px){.uni-grid2{grid-template-columns:1fr}.uni-side{position:static}}
@media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr)}.ufacts{grid-template-columns:1fr}.yc-steps{grid-template-columns:1fr}}

/* ===== Study listing — card grid + sidebar + filters (approved study.html) ===== */
.sc-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;border-radius:16px;padding:34px 30px;margin-top:14px}
.sc-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 85% -20%,rgba(232,32,42,.35),transparent 60%),radial-gradient(600px 400px at 0% 120%,rgba(43,99,235,.30),transparent 55%)}
.sc-hero>*{position:relative}
.sc-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:800;margin-bottom:12px}
.sc-hero h1{font-size:29px;font-weight:900;letter-spacing:-.5px;margin:0 0 8px}
.sc-hero p{font-size:15px;color:#c6d1ec;max-width:600px;margin:0 0 20px;line-height:1.7}
/* Hero counters — lit glass tiles. Each carries a slow pulse so the numbers
   read as live and still growing rather than a fixed plaque. */
/* The chips are usually plain <div> counters. One of them (the cities bar's
   "top 10") is a LINK, so every rule here matches >a as well — otherwise the
   linked chip renders as bare underlined text next to the glass tiles. */
.sc-hstats{display:flex;gap:12px;flex-wrap:wrap}
.sc-hstats>div,.sc-hstats>a{position:relative;min-width:96px;padding:11px 18px;border-radius:15px;text-align:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 8px 22px rgba(4,14,36,.30),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .18s ease,background .18s ease,border-color .18s ease}
.sc-hstats>div::before,.sc-hstats>a::before{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;
  background:linear-gradient(145deg,rgba(233,185,73,.30),transparent 52%)}
.sc-hstats>div::after,.sc-hstats>a::after{content:"";position:absolute;top:8px;inset-inline-end:9px;width:6px;height:6px;
  border-radius:50%;background:#5ce6a4;box-shadow:0 0 0 0 rgba(92,230,164,.6);animation:scPulse 2.6s ease-out infinite}
.sc-hstats>div:hover,.sc-hstats>a:hover{transform:translateY(-2px);background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.4)}
@keyframes scPulse{0%{box-shadow:0 0 0 0 rgba(92,230,164,.55)}70%{box-shadow:0 0 0 8px rgba(92,230,164,0)}100%{box-shadow:0 0 0 0 rgba(92,230,164,0)}}
@media(prefers-reduced-motion:reduce){.sc-hstats>div::after,.sc-hstats>a::after{animation:none}}
/* A chip you can press says so: gold rim, no underline, and it lifts further. */
.sc-hstats>a.hs-go{text-decoration:none;border-color:rgba(233,185,73,.55);background:rgba(233,185,73,.14)}
.sc-hstats>a.hs-go:hover{transform:translateY(-3px);background:rgba(233,185,73,.24);border-color:rgba(233,185,73,.8)}
.sc-hstats .n{position:relative;font-size:24px;font-weight:900;line-height:1.15;color:#fff;
  text-shadow:0 0 20px rgba(140,190,255,.5)}
.sc-hstats .l{position:relative;font-size:11.5px;color:#cbd7f2;font-weight:700;margin-top:2px}
@media(max-width:560px){
  .sc-hstats{gap:8px}
  .sc-hstats>div{min-width:0;flex:1 1 calc(50% - 8px);padding:9px 12px}
  .sc-hstats .n{font-size:20px}
}
/* A themed photo behind ANY section hero bar: keep the copy above it, drop the
   default radial decoration, and give the bar presence. The photo's directional
   overlay (RTL/LTR) is defined with .sc-hero-photo below. */
/* Tall enough to show the picture. At 250px a 3:2 photograph in a 1200px-wide
   bar had 31% of itself visible — cover scaled it to the bar's WIDTH and threw
   away two thirds of its height. The hero photos are now cropped to 2.6:1 and
   the bar is 340px, which puts ~75% of the composed picture on screen. */
.sc-hero:has(.sc-hero-photo){min-height:340px;padding:36px 34px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.sc-hero:has(.sc-hero-photo) h1,.sc-hero:has(.sc-hero-photo) p{max-width:min(600px,100%)}
.sc-hero:has(.sc-hero-photo)::before{display:none}
.sc-hero:has(.sc-hero-photo) > :not(.sc-hero-photo){position:relative;z-index:2}
/* Cities directory hero. The six-skyline collage that used to fill this bar —
   and the full-width navy scrim it needed, because its photo tiles ran edge to
   edge — are both gone: the section shows one designed piece now, which carries
   its own fade, and the standard .sc-hero:has(.sc-hero-photo) layout above owns
   the bar's padding and alignment.

   NOTHING here may set display, align-items or align-self. The old collage rules
   made this bar a ROW flex, where `align-self:center` on the copy meant "centre
   it vertically". The standard layout is a COLUMN flex, and under it that same
   declaration centres the copy HORIZONTALLY — which is what left a 200px band of
   empty bar down the reading side. */
.cities-hero-in{position:relative;z-index:2;max-width:64%}
.cities-hero-in h1,.cities-hero-in p,.cities-hero-in .sc-eyebrow{text-shadow:0 1px 12px rgba(6,18,44,.55)}
@media(max-width:760px){.cities-hero-in{max-width:100%}}
/* Study hero: a real graduation photo fills the space; the copy sits on the
   right over a navy fade so the happy-graduates scene reads as the backdrop. */
.sc-hero-study{padding:0;min-height:230px;display:flex}
.sc-hero-photo{position:absolute;inset:0;background-color:#0f2038;background-position:center 50%;background-size:cover;background-repeat:no-repeat;z-index:0}
/* Two-layer overlay: a directional fade that keeps the copy side fully dark, PLUS
   a uniform navy tint so the far side is never an empty bright patch. The fade
   direction follows the reading side (RTL vs LTR) so it works in all languages. */
.sc-hero-photo{filter:saturate(1.12) contrast(1.05)}
/* The scrim covers the COPY, not the picture. It used to sit at 88% opacity all
   the way to the middle of the bar and only fade after that, so more than half
   the hero was a flat navy slab and the photograph read as a strip down one
   side. It now holds full strength across the text column, drops away sharply
   through the middle, and is gone entirely by 88% — the far half of the bar is
   the photograph at full brightness, which is what the artwork is for. */
.sc-hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(13,41,102,.94) 0%,rgba(13,41,102,.9) 32%,rgba(13,41,102,.5) 52%,rgba(13,41,102,.16) 70%,rgba(13,41,102,0) 88%),linear-gradient(to top,rgba(7,22,58,.42),rgba(7,22,58,0) 45%)}
html[dir="ltr"] .sc-hero-photo::after{
  background:linear-gradient(to right,rgba(13,41,102,.94) 0%,rgba(13,41,102,.9) 32%,rgba(13,41,102,.5) 52%,rgba(13,41,102,.16) 70%,rgba(13,41,102,0) 88%),linear-gradient(to top,rgba(7,22,58,.42),rgba(7,22,58,0) 45%)}
/* Artwork hero. `auto 100%` fills the bar's HEIGHT and lets the width follow the
   aspect, so the whole piece is on screen at any bar size — nothing of it is ever
   cropped. It sits against the exact navy the artist faded to (#01153b, sampled
   off the image's own edge), so the painted fade runs straight into the bar and
   there is no seam to see. No scrim: the fade is already in the picture, and
   ours on top would just muddy it. */
.sc-hero-photo.sc-hero-art{background-color:transparent;background-size:auto 100%;
  background-position:left center;background-repeat:no-repeat;filter:none}
/* The artwork sits on the side AWAY from the copy, which follows the reading
   direction — so it hugs the left on Arabic pages and the right on English and
   Chinese ones. The copy never moves off its reading side to make room for a
   picture; the picture goes where the copy isn't. */
html[dir="ltr"] .sc-hero-photo.sc-hero-art{background-position:right center}
/* Both directions are spelled out: the photo scrim above has an html[dir="ltr"]
   variant, and an unqualified override loses to it on specificity — which is how
   the English bar came back with the full navy wash painted over the artwork. */
.sc-hero-photo.sc-hero-art::after,
html[dir="ltr"] .sc-hero-photo.sc-hero-art::after{background:none}
/* Back to a normal bar height. Making the bar taller was the wrong lever for
   "make the artwork wider" — it stretched the whole section to get a few dozen
   pixels of width. The width came from the image instead: its empty sky, its
   dead bottom strip and its long flat tail are cropped out, so the same 360px
   of height now carries the painted content rather than the margins around it. */
.sc-hero:has(.sc-hero-art){min-height:360px}
/* The field the artwork sits in. The artwork's tail is TRANSPARENT now, not flat
   navy, so this shows straight through it and there is no edge to line up — which
   is what the visible split down the middle was. Before, the tail was solid
   #01153b and the bar behind it had to be that exact colour at that exact x or a
   vertical line appeared; any gradient at all broke it, and the x moved with the
   viewport. With alpha the constraint is simply gone and the blue can be rich. */
.sc-hero:has(.sc-hero-art){
  --art-a:#01153b; --art-b:#04205a; --art-c:#0a2f74; --art-s:1,21,59;
  --art-r1:rgba(58,116,235,.30); --art-r2:rgba(233,185,73,.11);
  background:
    radial-gradient(90% 130% at 88% 8%, var(--art-r1), transparent 62%),
    radial-gradient(70% 110% at 96% 104%, var(--art-r2), transparent 58%),
    linear-gradient(115deg, var(--art-a) 0%, var(--art-b) 52%, var(--art-c) 100%)}
html[dir="ltr"] .sc-hero:has(.sc-hero-art){
  background:
    radial-gradient(90% 130% at 12% 8%, var(--art-r1), transparent 62%),
    radial-gradient(70% 110% at 4% 104%, var(--art-r2), transparent 58%),
    linear-gradient(245deg, var(--art-a) 0%, var(--art-b) 52%, var(--art-c) 100%)}
/* Each piece was drawn against its own blue — sampled off the file's own flat
   edge — and the bar continues THAT one, or the transparent tail dissolves into
   a shade the artist never used. */
.sc-hero:has(.art-hospitals){--art-a:#093174; --art-b:#0c3a8a; --art-c:#134aa8; --art-s:9,49,116}
/* Cities is the one piece that is not blue at all — night slate with gold map
   nodes — so the blue highlight would sit on it as a colour cast. Steel takes
   its place and the gold one stays, because the artwork already has that gold. */
.sc-hero:has(.art-cities){--art-a:#2c323a; --art-b:#343c48; --art-c:#434e60; --art-s:44,50,58;
  --art-r1:rgba(140,166,206,.20); --art-r2:rgba(233,185,73,.10)}

/* With a lighter scrim the copy has to carry its own contrast where the ramp
   thins out. */
.sc-hero:has(.sc-hero-photo) h1,.sc-hero:has(.sc-hero-photo) p,
.sc-hero:has(.sc-hero-photo) .sc-eyebrow{text-shadow:0 1px 12px rgba(6,18,44,.55)}
.sc-hero-study::before{z-index:1}
.sc-hero-body{position:relative;z-index:2;padding:32px 32px;max-width:66%}
.sc-hero-body>*{position:relative}
@media(max-width:760px){
  .sc-hero-study{min-height:200px}
  .sc-hero:has(.sc-hero-photo){min-height:270px;padding:24px 20px}
  .sc-hero-body{max-width:100%;padding:24px 20px}
  .sc-hero-photo{background-position:center 50%}
  /* Narrow screens put the copy over the whole width, so the fade runs bottom-up
     instead of sideways — dark enough to read on, light enough to still see the photo. */
  .sc-hero-photo::after,html[dir="ltr"] .sc-hero-photo::after{background:linear-gradient(to top,rgba(10,28,72,.92) 22%,rgba(10,28,72,.62) 58%,rgba(10,28,72,.3))}
  /* At this width the artwork spans almost the whole bar, so the copy
     does need cover here even though it does not on a wide screen. */
  .sc-hero-photo.sc-hero-art{background-size:auto 118%;background-position:left top}
  html[dir="ltr"] .sc-hero-photo.sc-hero-art{background-position:right top}
  /* Tinted from the piece's OWN field colour (--art-s), not a fixed navy: the
     guide's blue and the hospitals' blue are different, and a scrim in the wrong
     one reads as a grey haze sitting on top of the artwork. */
  .sc-hero-photo.sc-hero-art::after,html[dir="ltr"] .sc-hero-photo.sc-hero-art::after{
    background:linear-gradient(to top,rgba(var(--art-s),.94) 30%,rgba(var(--art-s),.66) 62%,rgba(var(--art-s),.28))}
}
/* Two matching CTAs side by side: Learn-Chinese (right) + Scholarships (left).
   Same frame + a decorative stage panel on each, but a DIFFERENT live effect. */
.study-ctarow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 20px}
.study-ctarow .lrn-study-cta{position:relative;margin:0;height:100%;align-items:stretch;gap:16px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.study-ctarow .lrn-study-cta:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.26)}
.lsc-txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;flex:1}
.lsc-txt .lsc-go{display:inline-flex;margin-top:10px;transition:background .2s}
.study-ctarow .lrn-study-cta:hover .lsc-go{background:#ffd75e}
/* Shared decorative stage panel (same frame on both cards) */
.lsc-flash,.sch-stage{position:relative;z-index:1;flex:0 0 34%;min-width:112px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1.5px solid rgba(255,255,255,.22);border-radius:14px;padding:12px 8px;overflow:hidden}
/* Learn-Chinese card: richer red→navy + a passing sheen + the flashing words */
.lrn-flash{background:linear-gradient(125deg,#8b1420 0%,#c62828 42%,#0d2966 100%)}
.lrn-flash::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.18) 50%,transparent 66%);transform:translateX(-130%);animation:lrnSheen 5s ease-in-out infinite;pointer-events:none}
@keyframes lrnSheen{0%,100%{transform:translateX(-130%)}55%,72%{transform:translateX(130%)}}
.lsc-flash{background:linear-gradient(160deg,rgba(255,215,94,.16),rgba(255,255,255,.05))}
.lsc-flash::after{content:"中";position:absolute;bottom:-18px;inset-inline-end:4px;font-size:80px;font-weight:900;color:rgba(255,255,255,.08);line-height:1;pointer-events:none}
.lsc-flash .zhf-hanzi{font-size:40px;font-weight:900;line-height:1.05;position:relative;z-index:1}
.lsc-flash .zhf-pin{font-size:12.5px;color:#ffe08a;font-weight:800;font-style:italic;margin-top:4px;position:relative;z-index:1}
.lsc-flash .zhf-ar{font-size:16px;font-weight:800;margin-top:3px;position:relative;z-index:1}
.lsc-flash .zhf-hanzi,.lsc-flash .zhf-pin,.lsc-flash .zhf-ar{transition:opacity .32s ease,transform .32s ease}
.lsc-flash.swap .zhf-hanzi,.lsc-flash.swap .zhf-pin,.lsc-flash.swap .zhf-ar{opacity:0;transform:translateY(12px)}
/* Learn-ARABIC card (shown to Chinese visitors) — a distinct emerald→gold
   identity instead of the red Learn-Chinese card, with an Arabic ع watermark. */
.lrn-flash-ar{background:linear-gradient(125deg,#0b6e4f 0%,#0f9d63 44%,#c99a2e 100%)}
.lsc-flash-ar{background:linear-gradient(160deg,rgba(201,154,46,.2),rgba(255,255,255,.05))}
.lsc-flash-ar::after{content:"ع";color:rgba(255,255,255,.12)}
.lsc-flash-ar .zhf-ar-word{font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;direction:rtl;font-size:34px}
.lsc-flash-ar .zhf-pin{color:#ffe9b0;font-style:normal}
.lsc-flash-ar .zhf-ar{font-size:18px;color:#fff}
/* Scholarships card: teal→navy + a pulsing golden glow, twinkling sparkles and
   a floating graduation cap (a distinctly different animation to the flash). */
.sch-study-cta{background:linear-gradient(125deg,#0f7a52 0%,#12805a 42%,#0d2966 100%)!important}
.sch-study-cta b{font-size:17px}
.sch-study-cta p{font-size:12.5px}
.sch-stage::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,94,.55),transparent 68%);animation:schGlow 3.2s ease-in-out infinite}
@keyframes schGlow{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.18);opacity:.9}}
.sch-emoji{position:relative;z-index:1;font-size:50px;line-height:1;animation:schFloat 3s ease-in-out infinite}
@keyframes schFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(5deg)}}
.sch-spark{position:absolute;z-index:1;font-size:13px;opacity:0}
.sch-spark.s1{top:15%;inset-inline-start:16%;animation:schTwinkle 2.4s ease-in-out infinite}
.sch-spark.s2{top:24%;inset-inline-end:18%;font-size:10px;animation:schTwinkle 2.4s ease-in-out infinite .8s}
.sch-spark.s3{bottom:16%;inset-inline-start:24%;animation:schTwinkle 2.4s ease-in-out infinite 1.5s}
@keyframes schTwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.study-ctarow .sch-study-cta:hover .sch-emoji{animation-duration:1.1s}
@media(prefers-reduced-motion:reduce){.lrn-flash::before,.sch-emoji,.sch-stage::before,.sch-spark{animation:none}.lsc-flash .zhf-hanzi,.lsc-flash .zhf-pin,.lsc-flash .zhf-ar{transition:none}.sch-spark{opacity:.6}}
@media(max-width:760px){.study-ctarow{grid-template-columns:1fr}}
/* One clean search frame (Google-style, no frame-in-frame), taller, with a
   real Search button. Searches university/major/city/province/scholarship. */
.sc-searchbar{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px 0 6px}
.sc-search{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:6px 8px 6px 20px;width:100%;max-width:600px;box-shadow:0 6px 22px rgba(9,26,68,.10);transition:box-shadow .18s,border-color .18s}
.sc-search:focus-within{border-color:var(--navy);box-shadow:0 10px 30px rgba(9,26,68,.18)}
.sc-search .sc-search-ic{font-size:19px;line-height:1;opacity:.85}
.sc-search input{flex:1;border:none;background:none;outline:none;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);min-width:0;padding:14px 0}
.sc-search input::placeholder{color:var(--muted);font-weight:500}
.sc-search input::-webkit-search-decoration,.sc-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sc-search-btn{flex:0 0 auto;border:none;cursor:pointer;background:var(--navy);color:#fff;font-family:inherit;font-weight:800;font-size:14.5px;padding:13px 26px;border-radius:12px;transition:background .18s,transform .1s}
.sc-search-btn:hover{background:#0a1f4d}
.sc-search-btn:active{transform:scale(.97)}
.sc-search-hint{font-size:11.5px;color:var(--muted);font-weight:600;text-align:center}
/* Filter bar: quick tags + switchable dimension (city / province / major) */
.sc-filters{display:flex;flex-direction:column;gap:12px;padding:14px 0 6px}
.sc-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sc-modewrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.sc-modelbl{font-size:12.5px;font-weight:800;color:var(--muted)}
.sc-modes{display:inline-flex;background:#eef2fb;border-radius:999px;padding:4px;gap:2px}
.sc-mode{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--navy);padding:7px 16px;border-radius:999px;cursor:pointer;transition:.15s}
.sc-mode:hover{color:var(--red)}
.sc-mode.active{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(9,26,68,.12)}
.sc-groups{position:relative}
.sc-group{display:none;flex-wrap:wrap;gap:8px;justify-content:center;max-height:132px;overflow-y:auto;padding:2px}
.sc-group.active{display:flex}
.sc-chip{white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--navy);background:#fff;border:1.5px solid var(--line);padding:8px 14px;border-radius:999px;cursor:pointer;transition:.15s}
.sc-chip:hover{border-color:var(--navy)}
.sc-chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.sc-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;margin-top:4px}
.sc-listhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.sc-listhead h2{font-size:19px;font-weight:900;color:var(--navy);margin:0}
.sc-promote{font-size:12px;font-weight:800;color:var(--warning);background:#fff8e6;border:1px solid #f0dfa0;padding:7px 14px;border-radius:999px;display:inline-flex;gap:6px;align-items:center}
.sc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sc-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.18s;position:relative;display:flex;flex-direction:column}
.sc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#dbe3f4}
.sc-card.featured{border-color:var(--warning);box-shadow:0 0 0 1px var(--warning),var(--shadow-sm)}
.sc-card .feat-tag{position:absolute;top:12px;inset-inline-start:12px;z-index:2;font-size:9.5px;font-weight:900;color:#5a3b00;background:linear-gradient(90deg,#ffd75e,#ffb300);padding:3px 10px;border-radius:999px}
/* Featured/pinned universities strip (top of the study listing) */
.uni-featstrip{background:linear-gradient(135deg,#fffbeb,#fff7ed);border:1px solid #fcd9a3;border-radius:16px;padding:14px 16px;margin:0 0 18px}
.uni-featstrip .ufs-head{font-size:15px;font-weight:900;color:#b45309;margin:0 0 10px}
.uni-featstrip .ufs-cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,300px);gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.uni-featstrip .ufs-cards>*{scroll-snap-align:start}
.sc-top{background:linear-gradient(160deg,#f2f5fb,#e9eef8);padding:24px 16px 16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.sc-logo{width:84px;height:84px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);margin-bottom:12px;display:grid;place-items:center;position:relative;overflow:hidden}
.sc-logo .mono{font-weight:900;color:var(--navy);font-size:34px}
.sc-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-top h3{font-size:16px;font-weight:800;color:var(--navy);line-height:1.35;min-height:44px;display:flex;align-items:center;margin:0}
.sc-city{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px;display:flex;align-items:center;gap:5px}
/* Specialty pills on the card + hover blurb popover (revealed on mouseover) */
.sc-specs{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:10px 12px 0}
.sc-spec{font-size:9.5px;font-weight:700;color:var(--navy);background:#eef2fb;border-radius:999px;padding:2px 9px;white-space:nowrap}
.sc-blurb{position:absolute;inset-inline:0;bottom:0;background:linear-gradient(0deg,rgba(9,26,68,.985) 55%,rgba(9,26,68,.90));color:#fff;padding:16px 16px 15px;transform:translateY(101%);transition:transform .26s cubic-bezier(.2,.7,.3,1);pointer-events:none;max-height:78%;overflow:auto;z-index:3}
.sc-card:hover .sc-blurb,.sc-card:focus-within .sc-blurb{transform:translateY(0)}
.sc-blurb-in{font-size:11.8px;line-height:1.75;font-weight:500}
.sc-ranks{display:flex;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-ranks .rb{flex:1;background:#fff;padding:12px 8px;text-align:center}
.sc-ranks .rb .rv{font-size:20px;font-weight:900;color:var(--navy);line-height:1}
.sc-ranks .rb.world .rv{color:var(--red)}
.sc-ranks .rb .rl{font-size:10px;color:var(--muted);font-weight:700;margin-top:4px}
.sc-foot{padding:16px;margin-top:auto}
.sc-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;min-height:22px}
.sc-tags .t{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px}
.sc-tags .t.scholar{color:var(--success);background:rgba(22,163,74,.10)}
.sc-tags .t.eng{color:#2563eb;background:rgba(37,99,235,.10)}
.sc-view{display:block;text-align:center;background:var(--navy);color:#fff;font-size:13px;font-weight:800;padding:11px;border-radius:999px}
.sc-view:hover{background:#0a1f4d}
.lang-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.lang-card .lc-ico{font-size:26px;margin-bottom:8px}
.lang-card h4{font-size:15px;font-weight:900;color:var(--navy);margin:0 0 6px}
.lang-card p{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.6;margin:0 0 12px}
.lang-card .lc-btn{color:var(--navy);font-weight:800;font-size:13px}
@media(max-width:980px){.sc-grid{grid-template-columns:1fr}.sc-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sc-cards{grid-template-columns:1fr}}

/* University page — attractions grid */
.attr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.attr-card{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.attr-card .ai{font-size:30px}
.attr-card .an{font-size:12.5px;font-weight:800;color:var(--navy);line-height:1.4}
@media(max-width:560px){.attr-grid{grid-template-columns:repeat(2,1fr)}}

/* Product detail — image gallery thumbnails */
.dthumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dthumb{width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:var(--soft);padding:0;cursor:pointer}
.dthumb.active{border-color:var(--navy)}
.dthumb img{width:100%;height:100%;object-fit:cover}

/* Market — top category grid */
.mkt-catwrap{margin:14px 0 8px}
.mkt-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mkt-cat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:.15s;font-family:inherit}
.mkt-cat:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.mkt-cat.active{background:var(--navy);border-color:var(--navy)}
.mkt-cat.active span,.mkt-cat.active .i{color:#fff}
.mkt-cat .i{font-size:28px}
.mkt-cat span{font-size:12.5px;font-weight:800;color:var(--navy)}
@media(max-width:560px){.mkt-cats{grid-template-columns:repeat(2,1fr)}}

/* Account — address book */
.addr-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.addr-h{font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.addr-def{font-size:10.5px;font-weight:800;color:#14602f;background:#e8f7ee;border:1px solid #bfe6cd;padding:2px 9px;border-radius:999px}
.addr-s{font-size:13px;color:var(--muted);margin-top:5px}
.addr-btns{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
.linkbtn{background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--navy);cursor:pointer;padding:0}
.linkbtn.danger{color:var(--red)}
.addr-edit{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.addr-form .af-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.addr-form label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
.addr-form input{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px}
.af-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.af-actions .btn-lg{width:auto;margin-inline-start:auto}
.af-check{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.mkt-deliver{background:#eef3fb;border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin:6px 0 4px;font-size:13.5px;font-weight:700;color:var(--navy);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mkt-deliver a{color:var(--red);font-weight:800}
@media(max-width:560px){.addr-form .af-grid{grid-template-columns:1fr}}

/* ===== Guide (الدليل) — directory ===== */
.g-catwrap{margin:16px 0 6px}
.g-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.g-cat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:.15s;font-family:inherit}
.g-cat:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.g-cat.active{background:var(--navy);border-color:var(--navy)}
.g-cat.active span,.g-cat.active .i{color:#fff}
.g-cat .i{font-size:26px}
.g-cat span{font-size:12px;font-weight:800;color:var(--navy);text-align:center;line-height:1.3}
.g-cat-link{text-decoration:none}
.g-cat-link:hover{text-decoration:none}
.g-regionbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;margin:10px 0 12px}
.g-regionbar .grb-l{font-weight:800;color:var(--navy);font-size:14px;white-space:nowrap}
.g-regionbar .grb-sel{flex:1;min-width:130px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#f8fafc;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.g-regionbar .grb-sel:focus{outline:none;border-color:var(--navy);background:#fff}
@media(max-width:640px){.g-regionbar .grb-l{width:100%}.g-regionbar .grb-sel{min-width:0}}
.g-searchbar{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;margin:10px 0 18px;font-size:15px}
.g-searchbar input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--ink)}
.guide-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gcard{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;transition:.15s}
.gcard:hover{box-shadow:var(--shadow);border-color:#dbe3f4}
.gcard.paid{border-color:var(--warning);box-shadow:0 0 0 1px var(--warning),var(--shadow-sm)}
.gc-ic{width:52px;height:52px;border-radius:13px;background:var(--soft);display:grid;place-items:center;font-size:26px;flex-shrink:0}
.gcard.paid .gc-ic{background:#fff6e0}
.gc-body{flex:1;min-width:0}
.gc-name{font-size:15px;font-weight:800;color:var(--navy);line-height:1.35}
.gc-paid{font-size:9.5px;font-weight:900;color:#5a3b00;background:linear-gradient(90deg,#ffd75e,#ffb300);padding:2px 8px;border-radius:999px;margin-inline-start:4px;white-space:nowrap}
.gc-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:700;margin:5px 0}
.gc-cat{color:var(--navy);background:var(--soft);padding:1px 9px;border-radius:999px}
.gc-row{font-size:12.5px;color:var(--ink);margin-top:3px;line-height:1.5}
.gc-row .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.gc-rate b{color:#e8a13a}
.gc-cta{display:inline-block;margin-top:8px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;padding:8px 14px;border-radius:999px}
.gsvc{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.gsvc li{font-size:12.5px;font-weight:700;color:#e8eefb}
@media(max-width:980px){.guide-grid{grid-template-columns:1fr}.g-cats{grid-template-columns:repeat(5,1fr)}}
@media(max-width:640px){.gcards{grid-template-columns:1fr}.g-cats{grid-template-columns:repeat(3,1fr)}}

/* Guide card — details link + fee badges */
.gcard{color:inherit;text-decoration:none}
.gc-ic{position:relative}
.gc-fee{position:absolute;bottom:-4px;inset-inline-end:-4px;font-size:14px}
.gc-paid.fee{color:#8a1a1a;background:#fde8e8;border:1px solid #f5c2c2}
.gc-more{display:inline-block;margin-top:10px;font-size:12px;font-weight:800;color:var(--red)}
.fee-tag{font-size:10.5px;font-weight:900;color:#8a1a1a;background:#fde8e8;border:1px solid #f5c2c2;padding:3px 10px;border-radius:999px}

/* Place detail — info rows, map, fee pill */
.prows{display:flex;flex-direction:column;gap:2px}
.prows .prow{display:grid;grid-template-columns:32px 130px 1fr;gap:10px;align-items:start;padding:11px 4px;border-bottom:1px solid var(--line);font-size:14px;justify-content:initial}
.prows .prow:last-child{border-bottom:none}
.prows .prow .pi{font-size:19px;text-align:center}
.prows .prow .pl{color:var(--muted);font-weight:700;font-size:12.5px;padding-top:2px}
.prows .prow .pv{color:var(--ink);font-weight:700;line-height:1.7}
.prows .prow .pv.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;text-align:start}
.prows .prow.zh .pv{font-size:16px;letter-spacing:.5px}
.pcopy{background:var(--soft);border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:11.5px;font-weight:800;color:var(--navy);cursor:pointer;padding:4px 10px;margin-inline-start:8px}
.fee-pill{display:inline-block;font-weight:900;padding:2px 12px;border-radius:999px;font-size:14px}
.fee-pill.paid{background:#fde8e8;color:#b01219;border:1px solid #f5c2c2}
.fee-pill.free{background:#e8f7ee;color:#14602f;border:1px solid #bfe6cd}
.place-map{margin-top:14px}
.place-map iframe{width:100%;height:300px;border:0;border-radius:12px;background:var(--soft)}
.place-map img{width:100%;max-height:340px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
@media(max-width:560px){.prows .prow{grid-template-columns:28px 1fr;gap:6px}.prows .prow .pl{grid-column:2}.prows .prow .pv{grid-column:1/-1;padding-inline-start:34px}}

/* Hot place — glowing red halo on the guide card + ribbon */
.gcard.hot{position:relative;border-color:#f3b0b0;box-shadow:0 0 0 1px #ef4444,0 6px 20px rgba(239,68,68,.28);animation:hotglow 2.2s ease-in-out infinite}
@keyframes hotglow{0%,100%{box-shadow:0 0 0 1px #ef4444,0 6px 20px rgba(239,68,68,.22)}50%{box-shadow:0 0 0 2px #ef4444,0 8px 30px rgba(239,68,68,.5)}}
.gc-hot{position:absolute;top:-10px;inset-inline-end:12px;background:linear-gradient(90deg,#ff5252,#e11d2a);color:#fff;font-size:11px;font-weight:900;padding:4px 12px;border-radius:999px;box-shadow:0 3px 10px rgba(225,29,42,.5);white-space:nowrap;z-index:2}

/* Place detail — image hero */
.place-hero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow)}
.place-hero img{width:100%;height:340px;object-fit:cover;display:block}
.place-hero.hot{box-shadow:0 0 0 2px #ef4444,0 12px 34px rgba(239,68,68,.32)}
.place-hero .ph-hot{position:absolute;top:16px;inset-inline-start:16px;background:linear-gradient(90deg,#ff5252,#e11d2a);color:#fff;font-size:13px;font-weight:900;padding:7px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(225,29,42,.55)}
.place-hero .ph-cap{position:absolute;inset-inline:0;bottom:0;padding:40px 22px 18px;background:linear-gradient(transparent,rgba(10,20,45,.82))}
.place-hero .ph-cap h1{color:#fff;font-size:30px;margin:0 0 6px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.place-hero .ph-sub{display:flex;gap:14px;flex-wrap:wrap;color:#eef3ff;font-weight:700;font-size:14px}
.place-hero .ph-sub .name-zh{color:#fff;opacity:.95}
@media(max-width:560px){.place-hero img{height:220px}.place-hero .ph-cap h1{font-size:22px}}

/* Quick facts strip */
.place-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.pfact{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.pfact .pf-ic{font-size:24px;flex-shrink:0}
.pfact b{display:block;font-size:14.5px;color:var(--navy);line-height:1.3}
.pfact span{font-size:11.5px;color:var(--muted);font-weight:700}

/* Chinese map app buttons */
.map-apps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.map-apps .ma-h{font-size:13px;font-weight:800;color:var(--muted)}
.ma-btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;padding:9px 16px;border-radius:999px;color:#fff;text-decoration:none;transition:.15s}
.ma-btn:hover{transform:translateY(-2px)}
.ma-btn.amap{background:linear-gradient(90deg,#00b4d8,#0077b6)}
.ma-btn.baidu{background:linear-gradient(90deg,#2b6be6,#1a4fb8)}

/* Tips + facilities */
.tips-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tips-list li{position:relative;padding-inline-start:30px;font-size:14px;line-height:1.6;color:var(--ink)}
.tips-list li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;width:20px;height:20px;background:#e8f7ee;color:#14602f;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900}
.facil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.facil{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:10px 13px;font-size:13px;font-weight:700;color:var(--ink)}
.facil .fic{font-size:19px}

/* Monetization — paid services card */
.psvc-card{background:#fff;border:1.5px solid #ffd98a;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(230,150,20,.14);margin-bottom:18px}
.psvc-head{background:linear-gradient(120deg,#fff5e0,#ffe9c2);padding:16px 16px 14px;border-bottom:1px solid #ffe1a8}
.psvc-badge{display:inline-block;font-size:10.5px;font-weight:900;color:#7a4d00;background:#ffcf6b;padding:3px 11px;border-radius:999px;margin-bottom:8px}
.psvc-head h4{margin:0 0 3px;font-size:15.5px;color:var(--navy)}
.psvc-head p{margin:0;font-size:12px;color:#8a6a2a;font-weight:600}
.psvc-row{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.12s}
.psvc-row:hover{background:#fffaf0}
.psvc-ic{font-size:21px;flex-shrink:0}
.psvc-name{flex:1;font-size:13px;font-weight:700;line-height:1.35}
.psvc-price{font-size:11.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.psvc-price b{color:#c0392b;font-size:13.5px}
.psvc-cta{display:block;margin:14px;text-align:center}

/* In-page image lightbox with zoom */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(10,15,30,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.on{display:flex}
.lb-stage{max-width:94vw;max-height:90vh;display:flex;align-items:center;justify-content:center;overflow:auto}
.lb-stage img{width:min(94vw,1000px);height:auto;max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);cursor:zoom-in;object-fit:contain}
.lb-stage img.zoom{cursor:zoom-out;width:auto;max-height:none;height:158vh}
.lb-x{position:fixed;top:16px;inset-inline-end:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:20px;border:none;cursor:pointer;display:grid;place-items:center;z-index:1}
.lb-x:hover{background:rgba(255,255,255,.28)}

/* Service select (place sidebar) + request form */
.psvc-row{cursor:pointer}
.psvc-row input[type=checkbox]{width:17px;height:17px;accent-color:#c0392b;flex-shrink:0;margin-inline-end:2px}
.psvc-row.suspended{opacity:.6;cursor:not-allowed}
.psvc-susb{font-size:9.5px;font-weight:900;color:#8a1a1a;background:#fde8e8;border:1px solid #f5c2c2;padding:1px 7px;border-radius:999px;white-space:nowrap}
.psvc-total{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-top:1px dashed #ffd98a;font-weight:800;color:var(--navy)}
.psvc-total b{color:#c0392b;font-size:17px}
.psvc-hint{font-size:11px;color:#8a6a2a;text-align:center;margin:2px 14px 12px;line-height:1.5}
.psvc-cta[disabled]{opacity:.5;cursor:not-allowed}
.pagewrap.narrow{max-width:720px}
.auth-card.wide{max-width:680px}
.sr-h{font-size:14px;color:var(--navy);margin:18px 0 10px}
.sr-svcs{display:flex;flex-direction:column;gap:8px}
.sr-svc{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.12s}
.sr-svc:hover{border-color:#ffd98a;background:#fffaf0}
.sr-svc input{width:18px;height:18px;accent-color:#c0392b}
.sr-svc.suspended{opacity:.6;cursor:not-allowed}
.sr-ic{font-size:22px}
.sr-name{flex:1;font-weight:700;font-size:14px}
.sr-price{font-weight:900;color:#c0392b}
.sr-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:13px 16px;background:#fff5e0;border-radius:12px;font-weight:800;color:var(--navy)}
.sr-total b{color:#c0392b;font-size:19px}
.sr-file,.sr-notes{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px}
.sr-notes{resize:vertical}
.pay-lines{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pay-line{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700}
.pay-line:last-child{border-bottom:none}
.pay-line.total{background:#f3f5fa;color:var(--navy);font-weight:900;font-size:16px}

/* Customer service-order tracking cards */
.so-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.so-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.so-badge{font-size:11px;font-weight:900;padding:4px 12px;border-radius:999px;white-space:nowrap}
.so-badge.ok{background:#e8f7ee;color:#14602f}
.so-badge.info{background:#e8f0fe;color:#1a3c8a}
.so-badge.warn{background:#fff4e0;color:#8a5a00}
.so-badge.bad{background:#fde8e8;color:#b01219}
.so-badge.muted{background:var(--soft);color:var(--muted)}
.so-svcs{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.so-chip{font-size:12px;font-weight:700;background:var(--soft);border-radius:999px;padding:4px 11px;color:var(--ink)}
.so-foot{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.so-amt{font-weight:900;color:#c0392b}
.so-pay{display:inline-block;margin-top:12px}
.so-reason{margin-top:10px;font-size:13px;color:#b01219;background:#fde8e8;border-radius:8px;padding:8px 12px}
.so-note{margin-top:10px;font-size:13px;color:var(--ink);background:var(--soft);border-radius:8px;padding:8px 12px}
.so-count{margin-top:10px;font-size:13px;font-weight:700;color:#8a5a00;background:#fff7e0;border:1px solid #ffe1a8;border-radius:8px;padding:8px 12px}
.so-count b{font-variant-numeric:tabular-nums;letter-spacing:.4px;color:#c0392b}
.so-count.urgent{color:#7a1a1a;background:#fdecec;border-color:#f5c2c2}
.so-count.over b{color:#b01219}

/* Auth — responsive split card (brand hero + form) */
.auth-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);max-width:940px;margin:24px auto;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px rgba(13,41,102,.14);border:1px solid var(--line)}
.auth-hero{background:linear-gradient(150deg,#0d2966,#15357f 55%,#c2151d);color:#fff;padding:40px 34px;display:flex;flex-direction:column;justify-content:center}
.auth-hero .ah-logo{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:900;font-size:22px;letter-spacing:1px;margin-bottom:18px}
.auth-hero h2{font-size:26px;margin:0 0 10px}
.auth-hero p{font-size:14.5px;line-height:1.7;color:#e6edff;margin:0 0 22px}
.ah-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ah-list li{font-size:14px;font-weight:600;color:#f0f4ff;display:flex;gap:10px;align-items:center}
.auth-form{padding:38px 34px;display:flex;flex-direction:column;justify-content:center}
.auth-form h1{font-size:24px;color:var(--navy);margin:0 0 4px}
.af-sub{color:var(--muted);font-size:13.5px;margin:0 0 20px}
.af{display:flex;flex-direction:column;gap:13px}
.af-field{display:flex;flex-direction:column;gap:6px}
.af-field label{font-size:12.5px;font-weight:800;color:var(--navy)}
.af-field input,.af-field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:14.5px;background:#fff;transition:.15s}
.af-field input:focus,.af-field select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,41,102,.1)}
.phone-row{display:flex;gap:8px}
.phone-row .dial{width:88px;flex-shrink:0;text-align:center;font-weight:800;background:var(--soft)}
.phone-row input:last-child{flex:1}
.af-forgot{text-align:end;margin-top:-4px}
.af-forgot a{font-size:12.5px;color:var(--red);font-weight:700}
.auth-form .btn-lg{margin-top:6px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;font-weight:700;margin:18px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border-radius:12px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;transition:.15s}
.social-btn span{font-size:18px}
.social-btn.wechat{border-color:#3fbf54;color:#1f7d31;background:#f2fbf3}
.social-btn.wechat:hover:not([disabled]){background:#e3f7e6}
.social-btn[disabled]{opacity:.6;cursor:not-allowed}
.auth-form .sw{margin-top:18px;text-align:center;font-size:13.5px;color:var(--muted)}
.auth-form .sw a{color:var(--navy);font-weight:800}
.auth-form .msg{margin-bottom:14px}
@media(max-width:760px){.auth-split{grid-template-columns:1fr;margin:14px;max-width:520px}.auth-hero{padding:26px 24px}.auth-hero h2{font-size:22px}.ah-list li{font-size:13px}.auth-form{padding:26px 22px}}
@media(max-width:400px){.phone-row{flex-direction:column}.phone-row .dial{width:100%}}

/* ================= Services marketplace (Fiverr-style) ================= */
.sv-hero{margin-bottom:18px}
.sv-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.sv-act{display:flex;flex-direction:column;gap:4px;padding:22px 24px;border-radius:18px;text-decoration:none;color:#fff;position:relative;overflow:hidden;transition:.15s;box-shadow:var(--shadow)}
.sv-act:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.sv-act.offer{background:linear-gradient(135deg,#0d2966,#2148a8)}
.sv-act.request{background:linear-gradient(135deg,#c2151d,#e8202a)}
.sv-act-ic{font-size:30px}
.sv-act-t{font-size:19px;font-weight:900}
.sv-act-s{font-size:13px;opacity:.9;font-weight:600}
.sv-toggle{display:inline-flex;gap:4px;background:var(--soft);border-radius:999px;padding:4px;margin-bottom:14px}
.sv-toggle button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:800;color:var(--muted);padding:8px 18px;border-radius:999px;cursor:pointer;transition:.15s}
.sv-toggle button.on{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
.sv-cats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.sv-chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);padding:8px 15px;cursor:pointer;transition:.15s;white-space:nowrap}
.sv-chip:hover{border-color:#c9d4ec}
.sv-chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.svgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.svcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:.15s}
.svcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent}
/* Cover: big image inside a light mat + hairline frame (drawn on top via ::after,
   so the hover zoom slides under the frame instead of spilling over it). */
.sv-cover{height:240px;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--soft);--sv-mat:7px}
.sv-cover.empty{gap:8px;grid-auto-flow:row}
.sv-cover .sv-emo{font-size:52px;filter:drop-shadow(0 4px 8px rgba(13,41,102,.15))}
.sv-cover-cat{font-size:12px;font-weight:800;color:var(--navy);background:rgba(255,255,255,.7);padding:3px 12px;border-radius:999px}
.sv-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sv-cover::before{content:"";position:absolute;inset:var(--sv-mat);z-index:1;pointer-events:none;opacity:.8;transition:opacity .35s ease;background:linear-gradient(to top,rgba(13,41,102,.3),rgba(13,41,102,0) 58%)}
.sv-cover::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 var(--sv-mat) #fff,inset 0 0 0 calc(var(--sv-mat) + 1px) var(--line)}
.svcard:hover .sv-cover img,.svcard:focus-visible .sv-cover img{transform:scale(1.06)}
.svcard:hover .sv-cover::before,.svcard:focus-visible .sv-cover::before{opacity:1}
@media(prefers-reduced-motion:reduce){.sv-cover img{transition:none}.svcard:hover .sv-cover img,.svcard:focus-visible .sv-cover img{transform:none}}
.sv-wanted{position:absolute;top:10px;inset-inline-start:10px;background:#e8202a;color:#fff;font-size:11px;font-weight:900;padding:4px 11px;border-radius:999px;z-index:3}
.sv-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.sv-prov{display:flex;align-items:center;gap:8px;font-size:12.5px}
.sv-av{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;flex-shrink:0}
.sv-av.lg{width:46px;height:46px;font-size:19px}
.sv-pn{font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.sv-rate{margin-inline-start:auto;font-size:12px;font-weight:800;color:#e8a13a;white-space:nowrap}
.sv-rate .sv-rc{color:var(--muted);font-weight:600}
.sv-rate.sv-new{color:#14602f;background:#e8f7ee;border-radius:999px;padding:2px 9px;font-size:11px}
.sv-title{font-size:14.5px;font-weight:700;line-height:1.45;color:var(--ink);min-height:42px}
.sv-tags{display:flex;gap:7px;flex-wrap:wrap}
.sv-cat,.sv-dl{font-size:11.5px;font-weight:700;background:var(--soft);color:var(--navy);border-radius:999px;padding:3px 10px}
.sv-dl{color:var(--muted);background:transparent;border:1px solid var(--line)}
.sv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;border-top:1px solid var(--line);padding-top:11px}
.sv-price{font-size:15px;color:var(--navy)}
.sv-price .sv-from{font-size:11px;color:var(--muted);font-weight:700}
.sv-cta{font-size:12px;font-weight:900;color:var(--red)}
@media(max-width:560px){.sv-actions{grid-template-columns:1fr}.svgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.sv-cover{height:150px;--sv-mat:5px}}
@media(min-width:561px) and (max-width:900px){.sv-cover{height:210px}}

/* Service detail (gig page) */
.svd-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
.svd-title{font-size:25px;color:var(--navy);margin:0 0 12px;line-height:1.3}
.svd-provline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;font-size:13.5px}
.svd-prov-name{font-weight:800;color:var(--navy);text-decoration:none}
.svd-rate{font-weight:800;color:#e8a13a}
.svd-cover{height:340px;border-radius:16px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(150deg,#e8f0fe,#fff);margin-bottom:12px}
.svd-cover .sv-emo{font-size:70px;opacity:.5}
.svd-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svd-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
.svd-buy{border:1.5px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow-sm)}
.svd-price{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.svd-price span{font-size:13px;color:var(--muted);font-weight:700}
.svd-price b{font-size:28px;color:var(--navy)}
.svd-feats{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.svd-feats li{font-size:13.5px;color:var(--ink);font-weight:600}
.svd-count{display:flex;flex-direction:column;gap:3px;background:#fff7e0;border:1px solid #ffe1a8;border-radius:12px;padding:11px 14px;margin-bottom:14px}
.svc-lbl{font-size:12px;font-weight:800;color:#8a5a00}
.svc-time{font-size:20px;font-weight:900;color:#c0392b;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.svd-cta{margin-bottom:10px}
.svd-cta .btn-lg{width:100%}
.svd-comm{font-size:11.5px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.svd-provcard{border:1px solid var(--line);border-radius:16px;padding:16px}
.svd-provtop{display:flex;align-items:center;gap:12px}
@media(max-width:860px){.svd-grid{grid-template-columns:1fr}.svd-side{position:static}}
.af-hint{font-size:12px;color:var(--muted);margin-top:4px}
.svo-price{display:flex;gap:12px;background:#f3f5fa;border-radius:12px;padding:14px 16px;margin:4px 0}
.svo-price>div{flex:1;display:flex;flex-direction:column;gap:2px}
.svo-price span{font-size:12px;color:var(--muted);font-weight:700}
.svo-price b{font-size:22px;color:var(--navy)}
.svo-price b.net{color:#14602f}

/* Trip planner */
.place-tripbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.trip-btn{border:1.5px solid #f3b0b0;background:#fff;color:#c0392b;font-family:inherit;font-size:14px;font-weight:800;padding:10px 20px;border-radius:999px;cursor:pointer;transition:.15s}
.trip-btn:hover{background:#fdecec}
.trip-btn.on{background:#14602f;border-color:#14602f;color:#fff}
.trip-link{font-size:13.5px;font-weight:800;color:var(--navy);text-decoration:none}
.trip-badge{background:var(--red);color:#fff;font-size:11px;border-radius:999px;padding:1px 8px}
.trip-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.trip-head h1{margin:0 0 4px}
.trip-stat{background:var(--soft);border-radius:12px;padding:10px 16px;font-size:14px;color:var(--muted);font-weight:700}
.trip-stat b{color:var(--navy);font-size:17px}
.trip-timeline{position:relative}
.trip-leg{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:6px}
.tl-city{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tl-num{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900;flex-shrink:0}
.tl-city h2{font-size:18px;color:var(--navy);margin:0}
.tl-places{display:flex;flex-direction:column;gap:4px;padding-inline-start:14px}
.tl-place{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--soft);border-radius:12px}
.tl-ic{font-size:20px}
.tl-name{flex:1;font-weight:700;color:var(--ink);text-decoration:none}
.tl-name:hover{color:var(--navy)}
.tl-x{border:none;background:#fff;color:var(--muted);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:13px;font-weight:900}
.tl-x:hover{background:#fdecec;color:var(--red)}
.tl-move{font-size:12px;color:var(--muted);font-weight:600;padding:4px 14px}
.trip-hop{text-align:center;font-size:13px;font-weight:800;color:#1a4fb8;background:#eef3ff;border-radius:999px;padding:8px 16px;margin:8px auto;width:fit-content}
.trip-cta{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px;padding:22px 26px;border-radius:18px;background:linear-gradient(135deg,#0d2966,#c2151d);color:#fff}
.trip-cta h3{margin:0 0 4px;font-size:19px}
.trip-cta p{margin:0;font-size:13.5px;opacity:.9}
.trip-cta .ac-btn{background:#fff;color:var(--navy);white-space:nowrap}

/* Wallet */
/* Profile header + prominent wallet strip */
.acct-top{margin-bottom:14px}
.acct-id{display:flex;align-items:center;gap:14px}
.acct-id img,.acct-id .yc-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.acct-id h1{font-size:20px;color:var(--navy);margin:0}
.acct-id p{margin:2px 0 0;font-size:13px}
.acct-wallet{display:flex;flex-direction:column;gap:8px;background:linear-gradient(120deg,#0d2966,#1c47a0);color:#fff;border-radius:16px;padding:16px 18px;margin:4px 0 16px;text-decoration:none;box-shadow:0 6px 18px rgba(13,41,102,.18)}
.acct-wallet:hover{transform:translateY(-1px);transition:.15s}
.acct-wallet .aw-main{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.acct-wallet .aw-lbl{font-size:13.5px;font-weight:700;opacity:.9}
.acct-wallet .aw-amt{font-size:28px;font-weight:900;letter-spacing:.3px}
.acct-wallet .aw-sub{display:flex;gap:18px;font-size:12.5px;opacity:.85;border-top:1px solid rgba(255,255,255,.2);padding-top:8px}
.acct-wallet .aw-sub b{font-weight:800}
.acct-actions{display:flex;gap:10px;flex-wrap:wrap}
.wallet-empty{background:var(--soft);border-radius:12px;padding:14px;text-align:center;font-size:13px;margin:2px 0 6px}
.wallet-bal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.wb-item{background:var(--soft);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.wb-item span{font-size:12px;color:var(--muted);font-weight:700}
.wb-item b{font-size:22px;color:var(--navy)}
.wb-item.avail{background:linear-gradient(135deg,#e8f7ee,#d3f0dd)}
.wb-item.avail b{color:#14602f}
.wallet-wd{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.wallet-wd input[type=number]{width:120px;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-weight:800}
.wallet-wd input[name=method]{flex:1;min-width:180px;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit}
.wallet-wd .btn-lg{width:auto;padding:11px 20px}
.wallet-tx{border-top:1px solid var(--line)}
.wtx-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.wtx-src{flex:1;font-weight:600}
.wtx-amt{font-weight:900;font-variant-numeric:tabular-nums}
.wtx-amt.c{color:#14602f}
.wtx-amt.d{color:#b01219}
.wtx-st{font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--muted)}
.wtx-st.s-available{background:#e8f7ee;color:#14602f}
.wtx-st.s-paid{background:#e8f0fe;color:#1a3c8a}
.wtx-st.s-rejected{background:#fde8e8;color:#b01219}
@media(max-width:560px){.wallet-bal{grid-template-columns:1fr}}

/* Product video + moderation status */
.prod-video{border-radius:14px;overflow:hidden;background:#000;max-width:720px}
.prod-video iframe,.prod-video video{width:100%;aspect-ratio:16/9;border:0;display:block}
.vstat{font-size:10px;font-weight:900;padding:2px 9px;border-radius:999px;margin-inline-start:6px}
.vstat.s-pending{background:#fff4e0;color:#8a5a00}
.vstat.s-approved{background:#e8f7ee;color:#14602f}
.vstat.s-rejected{background:#fde8e8;color:#b01219}

/* Services: tourism-services discoverability note */
.sv-tourism-note{display:block;background:#eef3ff;color:#1a3c8a;border-radius:12px;padding:11px 16px;font-size:13.5px;font-weight:600;text-decoration:none;margin-bottom:14px}
.sv-tourism-note:hover{background:#e2ebff}
.sv-tourism-note b{font-weight:900}

/* Success confirmation screen */
.done-screen{max-width:520px;margin:40px auto;background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);padding:48px 34px;text-align:center}
.done-check{width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#14602f);color:#fff;font-size:52px;font-weight:900;display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 10px 30px rgba(20,96,47,.35);animation:donepop .4s ease-out}
@keyframes donepop{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.done-screen h1{color:var(--navy);font-size:23px;margin:0 0 10px}
.done-sub{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 20px}
.done-count{font-size:13px;color:var(--muted);margin-bottom:18px}
.done-count b{color:var(--red);font-size:16px}
.done-screen .btn-lg{display:inline-block;text-decoration:none}

/* Tourism section: flight/hotel affiliate booking cards */
.sc-hero.tourism{background:linear-gradient(135deg,#0d2966,#1a4fb8 60%,#e8202a)}
.tr-book{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 24px}
.tr-bcard{display:flex;flex-direction:column;gap:5px;padding:22px 24px;border-radius:18px;text-decoration:none;color:#fff;position:relative;overflow:hidden;transition:.15s;box-shadow:var(--shadow)}
.tr-bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tr-bcard.flights{background:linear-gradient(135deg,#00b4d8,#0077b6)}
.tr-bcard.hotels{background:linear-gradient(135deg,#e8811f,#c2151d)}
.tr-bic{font-size:34px}
.tr-bt{font-size:19px;font-weight:900}
.tr-bs{font-size:13px;opacity:.92;font-weight:600;line-height:1.5}
.tr-bcta{margin-top:8px;font-size:13px;font-weight:900;background:rgba(255,255,255,.2);align-self:flex-start;padding:5px 14px;border-radius:999px}
@media(max-width:600px){.tr-book{grid-template-columns:1fr}}

/* ===================== JOBS SECTION ===================== */
.jobs-hero{background:linear-gradient(135deg,#0d2966,#1e4bb8)}
.jobs-sech{font-size:20px;font-weight:900;color:var(--navy);margin:26px 0 12px}
/* two choice cards */
.jobs-choose{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.jchoose{position:relative;display:flex;flex-direction:column;gap:6px;padding:26px 22px;border-radius:18px;border:2px solid var(--line);background:#fff;box-shadow:var(--shadow);transition:.18s;overflow:hidden}
.jchoose:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--navy)}
.jchoose.seek{background:linear-gradient(135deg,#fff,#eef3ff)}
.jchoose.hire{background:linear-gradient(135deg,#fff,#fdeef0)}
.jch-ic{font-size:40px}
.jchoose b{font-size:20px;color:var(--navy);font-weight:900}
.jch-sub{font-size:13.5px;color:var(--muted);line-height:1.5}
.jch-cta{margin-top:8px;font-size:14px;font-weight:900;color:var(--red)}
.jchoose.seek .jch-cta{color:var(--navy)}
/* quick tools */
.jobs-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 4px}
.jtool{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--line);font-size:13px;color:var(--muted);transition:.15s}
.jtool:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.jtool b{color:var(--navy);font-size:15px;font-weight:800}
/* job cards */
.jcards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.jcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:16px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-sm);transition:.16s;overflow:hidden}
.jcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cdd8ee}
.jcard.feat{border-color:#f0c24a;box-shadow:0 0 0 1px #f0c24a,0 8px 24px rgba(240,194,74,.18)}
.jcard.gold{border-inline-start:4px solid #e0a92a}
.jc-feat{position:absolute;top:0;inset-inline-end:0;background:linear-gradient(90deg,#f0b429,#e0a92a);color:#4a3200;font-size:11px;font-weight:900;padding:3px 12px;border-bottom-left-radius:10px}
.jc-top{display:flex;gap:12px;align-items:center}
.jc-ic{font-size:30px;width:52px;height:52px;display:grid;place-items:center;background:var(--soft);border-radius:13px;flex:none}
.jc-title{display:block;font-size:16px;font-weight:900;color:var(--navy);line-height:1.35}
.jc-co{font-size:12.5px;color:var(--muted);font-weight:700}
.jc-verify{font-size:12px}
.jc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--muted);font-weight:600}
.jc-sal{font-size:16px;font-weight:900;color:var(--red)}
.jc-sal small{font-size:11px;color:var(--muted);font-weight:600}
.jc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:9px;margin-top:2px}
.jc-apps{font-size:12px;color:var(--muted);font-weight:700}
.jc-go{font-size:13px;color:var(--navy);font-weight:900}
/* seeker / company cards */
.scard{position:relative;display:flex;flex-direction:column;gap:9px;padding:16px;border-radius:15px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow-sm);transition:.15s}
.scard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.js-av{width:56px;height:56px;border-radius:50%;background:var(--soft) center/cover no-repeat;display:grid;place-items:center;font-size:26px}
.js-av-i{color:var(--navy)}
.js-h b{font-size:15px;font-weight:900;color:var(--navy);display:block}
.js-cat{font-size:12.5px;color:var(--muted);font-weight:700}
.js-meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:12px;color:var(--muted);font-weight:600}
.js-badge{position:absolute;top:12px;inset-inline-end:12px;font-size:15px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.jb-gold{background:linear-gradient(135deg,#fff3d1,#ffe08a)}
.jb-platinum{background:linear-gradient(135deg,#e8ecff,#cfd9ff)}
.js-match{margin-top:2px}
.js-match span{display:block;height:6px;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:3px}
.js-match b{font-size:11px;color:#16a34a;font-weight:900}
.cocard{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--line)}
.co-logo{width:48px;height:48px;border-radius:12px;background:var(--soft) center/cover no-repeat;display:grid;place-items:center;font-size:24px;flex:none}
.co-h b{font-size:15px;font-weight:900;color:var(--navy)}
.co-type{font-size:12px;color:var(--muted);font-weight:700;display:block}
/* membership tables */
.jm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.jobs-plans-sub{color:var(--muted);margin-bottom:6px}
.jm-table{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm)}
.jm-table h3{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:12px}
.jm-grid{}
.jm-head{display:grid;grid-template-columns:1.4fr .9fr .9fr .9fr;gap:6px;margin-bottom:6px}
.jm-col{text-align:center;padding:8px 4px;border-radius:10px;background:var(--soft);font-size:12px}
.jm-col b{display:block;color:var(--navy);font-size:12.5px}
.jm-col em{font-style:normal;font-weight:900;color:var(--red);font-size:12px}
.jm-col.jb-gold{background:linear-gradient(135deg,#fff8e6,#ffefc0)}
.jm-col.jb-platinum{background:linear-gradient(135deg,#eef1ff,#dbe3ff)}
.jm-row{display:grid;grid-template-columns:1.4fr .9fr .9fr .9fr;gap:6px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.jm-rl{color:var(--ink);font-weight:700}
.jm-cell{text-align:center;font-weight:800;color:var(--navy)}
.jm-cell.yes{color:#16a34a}
.jm-cell.no{color:#cbd2e0}
/* membership cards (dashboards) */
.jm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0}
.jm-card{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:14px;border-radius:14px;border:2px solid var(--line);background:#fff}
.jm-card.jb-gold{border-color:#e6c65a}
.jm-card.jb-platinum{border-color:#b9c6ff}
.jm-card.cur{box-shadow:0 0 0 2px var(--navy) inset}
.jm-card b{font-size:15px;color:var(--navy)}
.jm-price{font-size:15px;font-weight:900;color:var(--red)}
.jm-price small{font-size:11px;color:var(--muted);font-weight:600}
.jm-perk{font-size:11.5px;color:var(--muted);font-weight:600}
.jm-cur{font-size:12px;font-weight:900;color:#16a34a}
.jm-feats{list-style:none;display:grid;gap:6px;margin:10px 0;font-size:13px;color:var(--ink);font-weight:600}
.jm-promo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--soft);border-radius:12px;padding:12px 14px;margin-top:8px;font-size:13px}
.jm-promo-p{color:var(--red);font-weight:900}
.jobs-promo-note{background:linear-gradient(135deg,#fff4e6,#ffe9cc);border-radius:12px;padding:14px 18px;margin-top:14px;font-size:13.5px;font-weight:700;color:#7a4a00}
/* dashboards */
.js-dash{max-width:960px;margin:0 auto}
.js-dash-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.js-dash-hd h1{font-size:22px;color:var(--navy);font-weight:900}
.js-dash-act{display:flex;gap:8px}
.js-status{display:inline-block;font-size:12.5px;font-weight:800;padding:3px 12px;border-radius:999px;margin-inline-end:6px}
.js-status.ok{background:#e7f7ee;color:#16a34a}
.js-status.warn{background:#fff3e0;color:#b8860b}
.js-status.err{background:#fdecec;color:#d33}
.js-badge-inline{display:inline-block;font-size:12px;font-weight:900;padding:3px 10px;border-radius:999px}
.js-badge-inline.jb-gold{background:linear-gradient(135deg,#fff3d1,#ffe08a);color:#7a5600}
.js-badge-inline.jb-platinum{background:linear-gradient(135deg,#e8ecff,#cfd9ff);color:#2a3d8a}
.js-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.js-panel{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.js-panel h3{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:6px}
.js-match-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.jmr-ic{font-size:22px}
.jmr-h{flex:1}.jmr-h b{display:block;font-size:14px;color:var(--navy);font-weight:800}.jmr-h small{color:var(--muted);font-size:12px}
.jmr-score{font-size:14px;font-weight:900;color:#16a34a}
.ext-panel{border-color:#e7cd7a;background:linear-gradient(180deg,#fffdf5,#fff)}
.ext-sites-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.ext-site{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:999px;padding:4px 12px}
.ext-site.done{background:#e7f7ee;color:#16a34a}
.ext-status{display:inline-block;font-size:13px;font-weight:800;padding:4px 14px;border-radius:999px;margin:4px 0}
.ext-status.ok{background:#e7f7ee;color:#16a34a}.ext-status.warn{background:#fff3e0;color:#b8860b}.ext-status.err{background:#fdecec;color:#d33}
.ext-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ext-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px;font:inherit;resize:vertical}
.ext-data .ext-line{font-size:13px;margin-top:3px;color:var(--ink)}
.ext-data b{color:var(--navy);display:block;margin-bottom:4px}
.jtable{width:100%;border-collapse:collapse;font-size:13px}
.jtable th{text-align:start;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;padding:6px 8px;border-bottom:1.5px solid var(--line)}
.jtable td{padding:8px;border-bottom:1px solid var(--line)}
.emp-post{border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:12px}
.emp-post-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.emp-post-act{display:flex;gap:6px;flex-wrap:wrap}
.emp-apps{margin-top:10px}
.app-st select{padding:5px 8px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:12px;font-weight:700}
/* editors */
.js-editwrap{max-width:960px;margin:14px auto 0;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:6px 18px 18px}
.js-editwrap>summary{cursor:pointer;font-weight:900;color:var(--navy);padding:14px 0;font-size:16px}
.js-intro{max-width:960px;margin:0 auto 14px}
.js-intro h1{font-size:24px;color:var(--navy);font-weight:900}
.cvf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cvf-langs{margin:12px 0;background:var(--soft);border-radius:12px;padding:12px 14px}
.cvf-label{display:block;font-weight:800;color:var(--navy);margin-bottom:8px;font-size:14px}
.cvf-lrow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.cvf-flag{flex:none;width:44px;font-size:12px;font-weight:800;color:var(--muted)}
.cvf-lrow input,.cvf-lrow textarea{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;font-family:inherit;font-size:14px;background:#fff}
.cvf-checks{display:flex;gap:14px;flex-wrap:wrap}
.cvf-chk{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--ink)}
/* photo rules */
.photo-rules{background:var(--soft);border-radius:12px;padding:14px 16px;margin:12px 0}
.photo-rules>b{color:var(--navy);font-size:14px}
.pr-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.pr-ok,.pr-bad{background:#fff;border-radius:10px;padding:10px 12px;border:1.5px solid var(--line)}
.pr-ok{border-color:#bfe6cd}.pr-bad{border-color:#f2c9c9}
.pr-h{display:block;font-weight:900;font-size:13px;margin-bottom:6px}
.pr-ok .pr-h{color:#16a34a}.pr-bad .pr-h{color:#d33}
.pr-item{display:block;font-size:12.5px;color:var(--ink);padding:2px 0}
/* CV / company public view */
.cv-view,.co-view,.job-view{max-width:820px;margin:0 auto;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-sm)}
.cvv-hd,.cov-hd{display:flex;gap:16px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cvv-photo,.cov-logo{width:88px;height:88px;border-radius:16px;background:var(--soft) center/cover no-repeat;display:grid;place-items:center;font-size:38px;flex:none}
.cvv-photo{border-radius:50%}
.cvv-hh h1,.cov-hh h1{font-size:22px;color:var(--navy);font-weight:900}
.cvv-meta,.cov-meta,.jv-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);font-weight:600;margin-top:5px}
.cvv-langs{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px}
.cvv-lchip{background:var(--soft);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800;color:var(--navy)}
.cvv-body{padding-top:16px}
.cvv-lblock{background:var(--soft);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.cvv-ltag{display:inline-block;font-size:11px;font-weight:900;color:var(--muted);background:#fff;border-radius:999px;padding:2px 10px;margin-bottom:6px}
.cvv-lblock h3{font-size:16px;color:var(--navy);font-weight:900}
.cvv-sec{margin:14px 0}
.cvv-sec h4{font-size:15px;color:var(--navy);font-weight:900;margin-bottom:6px}
.cvv-skills{display:flex;flex-wrap:wrap;gap:7px}
.cvv-skill{background:var(--soft);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;color:var(--ink)}
.cvv-actions{margin:16px 0}
.cvv-contact{margin-top:14px;border-radius:12px;padding:14px 16px}
.cvv-contact.open{background:#e7f7ee;border:1.5px solid #bfe6cd}
.cvv-contact.locked{background:var(--soft);border:1.5px dashed #cbd2e0}
.cvc-row{font-size:15px;font-weight:800;color:var(--navy);padding:3px 0}
.cvc-lock{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-weight:700;font-size:14px}
.jr-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.jr-form select,.jr-form input{border:1.5px solid var(--line);border-radius:9px;padding:8px 11px;font-family:inherit;font-size:14px}
.jr-form input{flex:1;min-width:160px}
.jr-item{border-top:1px solid var(--line);padding:8px 0}
.jr-item p{color:var(--ink);font-size:13.5px;margin-top:2px}
.cov-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.cov-ph{aspect-ratio:4/3;border-radius:10px;background:var(--soft) center/cover no-repeat;border:1px solid var(--line)}
/* job view */
.jv-hd{display:flex;gap:14px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.jv-ic{font-size:34px;width:60px;height:60px;display:grid;place-items:center;background:var(--soft);border-radius:14px;flex:none}
.jv-hh{flex:1}
.jv-hh h1{font-size:22px;color:var(--navy);font-weight:900;line-height:1.3}
.jv-co{display:inline-block;color:var(--navy);font-weight:800;font-size:14px;margin-top:3px}
.jv-sal{font-size:20px;font-weight:900;color:var(--red);text-align:center}
.jv-sal small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.jv-need{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;font-weight:700;color:var(--ink)}
.jv-sec{margin:16px 0}
.jv-sec h3{font-size:16px;color:var(--navy);font-weight:900;margin-bottom:6px}
.jv-sec p{color:var(--ink);line-height:1.7}
.jv-apply{background:var(--soft);border-radius:14px;padding:16px 18px;margin-top:16px}
.jv-apply h3{font-size:17px;color:var(--navy);font-weight:900;margin-bottom:8px}
.jv-apply textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;margin-bottom:10px}
/* salary tool */
.sal-tool,.sal-provinces{max-width:720px;margin:0 auto 22px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm)}
.sal-tool h1{font-size:22px;color:var(--navy);font-weight:900}
.sal-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:10px}
.sal-form .af-field{flex:1;min-width:180px}
.sal-result{margin-top:18px}
.sal-net{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0d2966,#1e4bb8);color:#fff;border-radius:14px;padding:16px 20px}
.sal-net b{font-size:26px;font-weight:900}
.sal-break{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
.sal-break td{padding:9px 6px;border-bottom:1px solid var(--line)}
.sal-break td:last-child{text-align:end;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.sal-tot td{border-top:2px solid var(--navy);font-size:16px;font-weight:900}
.prov-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.prov-card{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.prov-card.diff-1,.prov-card.diff-2{border-inline-start:4px solid #16a34a}
.prov-card.diff-3{border-inline-start:4px solid #d99a1e}
.prov-card.diff-5,.prov-card.diff-4{border-inline-start:4px solid #d33}
.prov-hd{display:flex;justify-content:space-between;align-items:center}
.prov-hd b{color:var(--navy);font-size:15px}
.prov-diff{font-size:9px;letter-spacing:-2px}
.prov-lvl{font-size:11.5px;font-weight:800;color:var(--muted)}
.prov-card p{font-size:12.5px;color:var(--ink);margin-top:4px;line-height:1.55}
.sal-general{margin-top:16px}
.sal-general h3{color:var(--navy);font-weight:900;font-size:16px;margin-bottom:6px}
.sal-general ul{list-style:none;display:grid;gap:6px;font-size:13.5px;color:var(--ink);font-weight:600}
.btn-sm{display:inline-block;padding:7px 14px;border-radius:9px;background:var(--navy);color:#fff;font-weight:800;font-size:13px;border:none;cursor:pointer}
.btn-sm.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-xs{display:inline-block;padding:5px 11px;border-radius:8px;background:var(--navy);color:#fff;font-weight:800;font-size:12px;border:none;cursor:pointer}
.btn-xs.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.msg.warn{background:#fff3e0;color:#8a6100;border:1px solid #f0d9a8}
.small{font-size:12.5px}
@media(max-width:760px){
  .jobs-choose,.jobs-tools,.jcards,.jm-wrap,.js-cols,.jm-cards,.cvf-grid,.prov-list{grid-template-columns:1fr}
  .jm-cards{grid-template-columns:1fr}
  .cvv-hd,.cov-hd,.jv-hd{flex-direction:column;text-align:center;align-items:center}
}
.sal-prov-tag{display:inline-block;background:var(--soft);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:800;color:var(--navy);margin:12px 0 4px}
.prov-si{display:block;margin-top:8px;font-size:12.5px;font-weight:800;color:var(--red)}
.prov-card{text-decoration:none;transition:.15s}
a.prov-card:hover{box-shadow:var(--shadow);border-color:var(--navy)}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cand-note{background:var(--soft);border:1.5px dashed #cbd2e0;border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:13.5px;font-weight:700;color:var(--muted)}
.cand-note a{color:var(--navy);font-weight:900}
@media(max-width:900px){.scards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.scards{grid-template-columns:1fr}}
.ostat.s-ok{background:#e7f7ee;color:#16a34a}
.ostat.s-warn{background:#fff3e0;color:#b8860b}
.ostat.s-err{background:#fdecec;color:#d33}
.ostat.s-muted{background:var(--soft);color:var(--muted)}
.txn-type{display:inline-block;background:var(--soft);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:800;color:var(--navy)}
.txn-rf summary{cursor:pointer;color:var(--navy);font-weight:800;font-size:12px}

/* ===== Real estate (homes) ===== */
.homes-hero .homes-acts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.homes-act{display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.22);border-radius:14px;padding:16px 18px;color:#fff;transition:.15s}
.homes-act:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.homes-act .ha-ic{font-size:26px}
.homes-act .ha-t{font-size:16px;font-weight:900}
.homes-act .ha-s{font-size:12.5px;opacity:.85;font-weight:600}
.homes-toggle{display:inline-flex;gap:4px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:4px;margin:16px 0 12px}
.homes-toggle button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-family:inherit;font-weight:800;font-size:13px;color:var(--muted);cursor:pointer}
.homes-toggle button.on{background:var(--navy);color:#fff}
.homes-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.homes-cats .hchip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-family:inherit;font-weight:800;font-size:13px;color:var(--navy);cursor:pointer;transition:.15s}
.homes-cats .hchip:hover{border-color:var(--navy)}
.homes-cats .hchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.homes-filterbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:16px}
.homes-filterbar .hfb-l{font-weight:800;color:var(--navy);font-size:14px;white-space:nowrap}
.homes-search{flex:1;min-width:180px;display:flex;align-items:center;gap:6px;background:#f8fafc;border:1.5px solid var(--line);border-radius:10px;padding:0 12px}
.homes-search input{flex:1;border:0;background:transparent;padding:10px 0;font-family:inherit;font-size:14px;outline:none}
.hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hcard{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;transition:.15s;box-shadow:var(--shadow-sm)}
.hcard:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 12px 28px rgba(13,41,102,.14)}
.hc-img{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,#e8f0fe,#fff);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-emo{font-size:46px;opacity:.5}
.hc-ribbon{position:absolute;top:10px;inset-inline-start:10px;z-index:2;font-size:12px;font-weight:900;color:#fff;padding:4px 12px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.hc-ribbon.rent{background:#2b63eb}
.hc-ribbon.sale{background:#16a34a}
.hc-ribbon.wanted{background:#E8202A}
.hc-body{padding:12px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.hc-type{font-size:12px;font-weight:800;color:var(--muted)}
.hc-title{font-size:15px;font-weight:900;color:var(--navy);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-chips{display:flex;flex-wrap:wrap;gap:6px}
.hc-chip{font-size:11.5px;font-weight:700;color:var(--ink);background:var(--soft);border-radius:8px;padding:3px 9px}
.hc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.hc-price{font-size:17px;font-weight:900;color:var(--red)}
.hc-price small{font-size:11px;font-weight:700;color:var(--muted)}
.hc-price.wanted{font-size:13px;color:var(--navy)}
.hc-price.muted{color:var(--muted);font-size:13px}
.hc-view{font-size:11.5px;font-weight:800;color:var(--navy);white-space:nowrap}
@media(max-width:980px){.hgrid{grid-template-columns:repeat(2,1fr)}.homes-hero .homes-acts{grid-template-columns:1fr}}
@media(max-width:560px){.hgrid{grid-template-columns:repeat(2,1fr);gap:12px}.hc-title{font-size:13.5px}.hc-price{font-size:15px}}

/* Mobile-friendly photo picker (gallery + camera) */
.photo-picker{border:1.5px dashed var(--line);border-radius:12px;padding:12px;background:#fafbff}
.pp-actions{display:flex;gap:10px;flex-wrap:wrap}
.pp-btn{flex:1;min-width:130px;display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-weight:800;font-size:14px;color:var(--navy);cursor:pointer;transition:.15s}
.pp-btn:hover{border-color:var(--navy);background:var(--soft)}
.pp-btn:active{transform:scale(.98)}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
.pp-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--soft)}
.pp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pp-rm{position:absolute;top:4px;inset-inline-end:4px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:900;cursor:pointer;line-height:24px;text-align:center;padding:0}
.pp-rm:hover{background:var(--red)}

/* Property photo slider (detail page) */
.hslider{position:relative;border-radius:16px;overflow:hidden;background:#0d2966}
.hs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/3;background:#0d2966}
.hs-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hs-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);font-size:26px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;z-index:2}
.hs-nav:hover{background:#fff}
.hs-nav.prev{inset-inline-start:10px}
.hs-nav.next{inset-inline-end:10px}
html[dir="rtl"] .hs-nav.prev{transform:translateY(-50%) rotate(180deg)}
html[dir="rtl"] .hs-nav.next{transform:translateY(-50%) rotate(180deg)}
.hs-count{position:absolute;top:12px;inset-inline-end:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;z-index:2}
.hs-dots{position:absolute;bottom:12px;inset-inline-start:0;width:100%;display:flex;justify-content:center;gap:7px;z-index:2}
.hs-dot{width:9px;height:9px;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.hs-dot.on{background:#fff;width:22px;border-radius:5px}
/* Homes detail: deal badge + type + contact */
.hd-badges{display:flex;align-items:center;gap:10px;margin:6px 0 10px;flex-wrap:wrap}
.hd-type{font-size:14px;font-weight:800;color:var(--navy)}
/* Homes map + nearby block */
.hmap-open{display:flex;gap:10px;flex-wrap:wrap}
.hmap-btn{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:12px;font-weight:900;font-size:15px;color:#fff;text-decoration:none;transition:.15s}
.hmap-btn.amap{background:#2b7fff}
.hmap-btn.baidu{background:#3385ff;background:linear-gradient(135deg,#2b63eb,#1e88e5)}
.hmap-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.hmap-near{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.near-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-weight:800;font-size:13.5px;color:var(--navy);text-decoration:none;text-align:center;transition:.15s}
.near-btn:hover{border-color:var(--navy);background:var(--soft);transform:translateY(-2px)}
.near-btn .nb-ic{font-size:26px}
.home-loc .hl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.home-loc .hl-status{font-size:13px;font-weight:700}
@media(max-width:560px){.hmap-near{grid-template-columns:1fr;gap:8px}.near-btn{flex-direction:row;justify-content:flex-start;text-align:start}.hmap-btn{min-width:120px}}

/* ===== Yalla Homes Pro: badges, promotion, plans, services, escrow, modal ===== */
/* Card promo/trust badges + gold frame */
.hcard.gold{border-color:#e7c65a;box-shadow:0 0 0 2px rgba(231,198,90,.35),0 8px 22px rgba(231,198,90,.18)}
.hc-badges{position:absolute;top:8px;inset-inline-end:8px;z-index:3;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.hc-badge{font-size:10.5px;font-weight:900;padding:2px 8px;border-radius:6px;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.hc-badge.sponsored{background:#7a6a1f;background:linear-gradient(135deg,#b8952a,#8a6d15)}
.hc-badge.featured{background:#b8860b}
.hc-badge.now{background:#16a34a}
.hc-badge.urgent{background:#E8202A}
.hc-badge.verified{background:#0d2966}
/* Header promote CTA */
.homes-promote-cta{display:inline-block;margin-top:14px;background:#fff;color:var(--navy);font-weight:900;font-size:14px;padding:10px 20px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.homes-promote-cta:hover{transform:translateY(-2px)}
/* Extra filters row */
.homes-filters2{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:-4px 0 14px}
.homes-filters2 .grb-sel{min-width:150px;flex:0 1 auto}
.hf-check{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer}
.hf-check input{accent-color:var(--navy)}
/* CPM ad banner */
.homes-ad{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(120deg,#0d2966,#1e3f8f);color:#fff;border-radius:14px;padding:14px 20px;margin-bottom:16px}
.homes-ad .had-tag{background:rgba(255,255,255,.2);font-size:11px;font-weight:900;padding:3px 10px;border-radius:6px;letter-spacing:.5px}
.homes-ad .had-main{flex:1;display:flex;flex-direction:column;min-width:180px}
.homes-ad .had-main b{font-size:15px}
.homes-ad .had-main span{font-size:12.5px;opacity:.85}
.homes-ad .had-cta{background:#fff;color:var(--navy);font-weight:900;font-size:13px;padding:9px 16px;border-radius:999px;white-space:nowrap}
/* Promote hub */
.soon-note{background:#fff7e6;border:1.5px solid #f0d798;color:#8a6d15;font-weight:700;font-size:13.5px;border-radius:12px;padding:12px 16px;margin:0 auto 20px;max-width:820px;text-align:center}
.home-sech{font-size:19px;font-weight:900;color:var(--navy);margin:26px 0 14px}
.home-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hplan{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.hplan.pop{border-color:var(--navy);box-shadow:0 10px 26px rgba(13,41,102,.14)}
.hplan.cur{border-color:#16a34a}
.hplan-pop{position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:11px;font-weight:900;padding:3px 12px;border-radius:999px;white-space:nowrap}
html[dir="rtl"] .hplan-pop{transform:translateX(50%)}
.hplan-name{font-size:16px;font-weight:900;color:var(--navy)}
.hplan-price{font-size:26px;font-weight:900;color:var(--red);margin:6px 0}
.hplan-price small{font-size:13px;color:var(--muted);font-weight:700}
.hplan-limit{font-size:12.5px;font-weight:800;color:var(--navy);background:var(--soft);border-radius:8px;padding:4px 10px;display:inline-block;margin-bottom:10px}
.hplan-feats{list-style:none;margin:0 0 14px;padding:0;text-align:start;font-size:13px;display:flex;flex-direction:column;gap:6px;flex:1}
.hplan-feats li{color:var(--ink)}
.hplan-cur{color:#16a34a;font-weight:900;font-size:14px}
.home-promos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hpromo{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.hpromo-ic{font-size:30px}
.hpromo b{color:var(--navy);font-size:14px}
.hpromo-sub{font-size:12px;color:var(--muted);flex:1}
.hpromo-price{font-weight:900;color:var(--red);font-size:16px;margin:4px 0}
.home-adbook{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px}
.home-adbook .hab-left{flex:1;min-width:220px}
.home-adbook .hab-left b{color:var(--navy);font-size:15px}
.home-adbook .hab-left p{font-size:13px;color:var(--muted);margin:4px 0 0}
.home-adbook .hab-right{display:flex;gap:8px;flex-wrap:wrap}
.home-adbook input{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;min-width:180px}
.home-plan-teaser{display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(120deg,#fff7e6,#fff);border:1.5px solid #f0d798;border-radius:12px;padding:12px 16px;font-weight:800;color:#8a6d15;margin:12px 0}
/* Detail: safety note + services + escrow + city gallery + modal */
.home-safe{background:#eaf3ff;border:1px solid #cfe0ff;color:#0d2966;font-size:12.5px;font-weight:700;border-radius:10px;padding:10px 12px;margin-top:10px}
.hd-badges .hc-ribbon{font-size:12px}
.home-citygal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hcg-cell{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--soft)}
.hcg-cell img{width:100%;height:100%;object-fit:cover}
.home-svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hsvc{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;margin:0}
.hsvc-ic{font-size:28px}
.hsvc b{color:var(--navy);font-size:13.5px}
.hsvc-sub{font-size:11.5px;color:var(--muted);flex:1}
.hsvc-price{font-weight:900;color:var(--red);font-size:14px;margin:3px 0}
.home-escrow{background:linear-gradient(120deg,#f4f7ff,#fff);border:1.5px solid #cfe0ff;border-radius:14px;padding:18px 20px}
.he-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.he-ic{font-size:24px}
.he-head b{font-size:16px;color:var(--navy)}
.he-soon{background:#fff7e6;color:#8a6d15;font-weight:900;font-size:11px;padding:3px 10px;border-radius:999px;border:1px solid #f0d798}
.home-escrow p{font-size:13.5px;color:var(--ink);margin:10px 0}
.he-disabled{font-size:12.5px;color:var(--muted);font-weight:700}
.home-modal{position:fixed;inset:0;background:rgba(13,41,102,.55);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.home-modal.show{display:flex}
.hm-box{background:#fff;border-radius:18px;padding:24px;max-width:460px;width:100%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.hm-box h3{font-size:18px;color:var(--navy);margin-bottom:4px}
.hm-box textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px;font-family:inherit;font-size:14px;resize:vertical}
.hm-x{position:absolute;top:14px;inset-inline-end:14px;width:30px;height:30px;border:0;border-radius:50%;background:var(--soft);font-size:15px;font-weight:900;cursor:pointer;color:var(--navy)}
@media(max-width:900px){.home-plans,.home-promos,.home-svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.home-plans,.home-promos,.home-svcs,.home-citygal{grid-template-columns:1fr}.homes-ad{flex-direction:column;align-items:flex-start}}

/* ===== In-platform messaging ===== */
.chat-wrap{display:grid;grid-template-columns:320px 1fr;gap:16px;margin-top:8px;min-height:560px}
.chat-list{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px;overflow-y:auto;max-height:640px}
.chat-list h2{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:10px}
.cl-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;transition:.12s}
.cl-row:hover{background:var(--soft)}
.cl-row.active{background:#eaf3ff}
.cl-av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;flex-shrink:0}
.cl-mid{flex:1;min-width:0}
.cl-mid b{display:block;font-size:14px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-mid small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cl-badge{background:var(--red);color:#fff;font-size:11px;font-weight:900;min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.chat-thread{background:#fff;border:1.5px solid var(--line);border-radius:16px;display:flex;flex-direction:column;overflow:hidden}
.chat-thread.empty-thread{align-items:center;justify-content:center}
.ct-placeholder{color:var(--muted);text-align:center;font-size:15px;font-weight:700;line-height:2}
.ct-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ct-back{font-size:22px;color:var(--navy);font-weight:900;display:none}
.ct-h-mid b{font-size:16px;color:var(--navy);display:block}
.ct-subj{font-size:12.5px;color:var(--muted);font-weight:700}
.ct-safe{background:#eaf3ff;color:#0d2966;font-size:12px;font-weight:700;padding:9px 18px;border-bottom:1px solid var(--line)}
.ct-msgs{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;max-height:460px}
.ct-msg{display:flex;flex-direction:column;max-width:74%}
.ct-msg.mine{align-self:flex-end;align-items:flex-end}
.ct-msg.their{align-self:flex-start;align-items:flex-start}
.ct-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word}
.ct-msg.mine .ct-bubble{background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.ct-msg.their .ct-bubble{background:var(--soft);color:var(--ink);border-bottom-left-radius:5px}
.ct-bubble.flagged{border:1.5px dashed #d33}
.ct-flag{display:block;font-size:11px;color:#d33;font-weight:800;margin-top:4px}
.ct-msg.mine .ct-flag{color:#ffd7d7}
.ct-time{font-size:10.5px;color:var(--muted);margin-top:3px}
.ct-compose{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.ct-compose input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;font-family:inherit;font-size:14px;outline:none}
.ct-compose input:focus{border-color:var(--navy)}
.ct-compose .btn-sm{border-radius:50%;width:44px;height:44px;font-size:16px;padding:0}
.ct-closed{padding:16px;text-align:center;color:var(--muted);font-weight:700;border-top:1px solid var(--line)}
@media(max-width:760px){
  .chat-wrap{grid-template-columns:1fr}
  .chat-list.has-thread{display:none}
  .ct-back{display:block}
}

/* Chat: image attachments + read receipts */
.ct-img{max-width:220px;max-height:220px;border-radius:10px;display:block;margin-bottom:4px}
.ct-bubble .ct-txt{display:block}
.ct-tick{font-size:11px;opacity:.75;font-weight:900}
.ct-msg.mine .ct-tick{color:#7fd0ff}

/* Chat: in-line LongCat translation ("translate to" ar/en/zh under each message) */
.ct-tr{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:4px}
.ct-tr-lbl{font-size:10.5px;color:var(--muted);font-weight:700}
.ct-tr-b{font-size:11px;font-weight:800;color:var(--navy);background:var(--soft,#eef2fb);border:1px solid var(--line,#dce3f2);border-radius:999px;padding:2px 9px;cursor:pointer;line-height:1.6;transition:.12s}
.ct-tr-b:hover{background:#e2e9fb;border-color:var(--navy)}
.ct-tr-b:disabled{opacity:.5;cursor:default}
.ct-tr-out{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink);background:#f7faf8;border:1px dashed #cfe0d5;border-inline-start:3px solid #0b6e4f;border-radius:8px;padding:7px 11px;max-width:92%}
.ct-msg.mine .ct-tr{justify-content:flex-end}
.ct-msg.mine .ct-tr-out{margin-inline-start:auto}
.ct-attach{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;font-size:18px;cursor:pointer;flex-shrink:0;background:#fff}
.ct-attach:hover{border-color:var(--navy);background:var(--soft)}
.ct-fname{font-size:11px;color:var(--muted);flex-basis:100%;padding:0 6px}

/* ===== Halal restaurants ===== */
.halal-cats{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.halal-cats .hzchip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-family:inherit;font-weight:800;font-size:13px;color:var(--navy);cursor:pointer;transition:.15s}
.halal-cats .hzchip:hover{border-color:var(--red)}
.halal-cats .hzchip.on{background:var(--red);border-color:var(--red);color:#fff}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rcard{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;transition:.15s;box-shadow:var(--shadow-sm)}
.rcard:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 12px 28px rgba(232,32,42,.12)}
.rc-img{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,#fff3e0,#fff);display:flex;align-items:center;justify-content:center;overflow:hidden}
.rc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A fast-food chain wordmark (KFC/McDonald's/Pizza Hut/Subway/Dicos) shown whole
   on a white backing instead of cropped by object-fit:cover. */
.rc-img img.rc-img-brand{inset:10%;width:80%;height:80%;object-fit:contain;background:#fff;border-radius:10px;padding:6px;box-sizing:border-box}
.rc-emo{font-size:44px;opacity:.5}
.rc-halal{position:absolute;top:10px;inset-inline-start:10px;z-index:2;background:#16a34a;color:#fff;font-size:11px;font-weight:900;padding:3px 10px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.rc-body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rc-cz{font-size:12px;font-weight:800;color:var(--muted)}
.rc-pr{font-size:13px;font-weight:900;color:#16a34a}
.rc-title{font-size:15.5px;font-weight:900;color:var(--navy);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-meta{font-size:12.5px;color:var(--muted);font-weight:700;display:flex;gap:8px;align-items:center}
.rc-rate{color:#b8860b}
.rc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.rc-tag{font-size:11px;font-weight:800;color:var(--navy);background:var(--soft);border-radius:8px;padding:3px 9px}
/* Halal detail */
.halal-info{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hzi{font-size:13px;font-weight:800;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:8px 14px}
.hzi.ok{border-color:#bfe6cd;color:#16a34a}
.halal-menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hm-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.hm-photo{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0}
.hm-info{flex:1;min-width:0}
.hm-info b{color:var(--navy);font-size:14px;display:block}
.hm-info span{color:var(--muted);font-size:12px}
.hm-price{font-weight:900;color:var(--red);font-size:15px;white-space:nowrap}
.halal-resform .hr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.halal-resform input{width:100%}
@media(max-width:980px){.rgrid{grid-template-columns:repeat(2,1fr)}.halal-menu{grid-template-columns:1fr}.halal-resform .hr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rgrid{grid-template-columns:repeat(2,1fr);gap:12px}.halal-resform .hr-grid{grid-template-columns:1fr}}

/* ===== Restaurant owner dashboard + offers ===== */
.rest-dash{max-width:900px;margin:0 auto}
.rd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rd-head h1{font-size:24px;color:var(--navy)}
.rest-delivery{background:linear-gradient(120deg,#fff7e6,#fff);border:1.5px solid #f0d798;border-radius:14px;padding:16px 18px;margin-bottom:16px}
.rdlv-l{display:flex;gap:14px;align-items:flex-start}
.rdlv-ic{font-size:30px}
.rest-delivery b{color:var(--navy);font-size:15px}
.rest-delivery p{font-size:13px;color:var(--ink);margin:6px 0 0}
.rdlv-free{color:#16a34a !important;font-weight:800}
.menu-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.mr-photo{position:relative;width:60px;height:60px;border-radius:10px;overflow:hidden;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:24px}
.mr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mr-photo input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.mr-name{flex:2;min-width:120px}
.mr-desc{flex:3;min-width:140px}
.mr-price{flex:0 0 90px;width:90px}
.menu-row input{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit}
.mr-del{width:36px;height:36px;border:0;border-radius:50%;background:#fdecec;color:#d33;font-weight:900;cursor:pointer;flex-shrink:0}
/* Today's offer strip on the section */
.offers-strip{margin:8px 0 16px}
.offers-h{font-size:18px;font-weight:900;color:var(--red);margin-bottom:10px}
.offers-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.offer-card{flex:0 0 220px;display:flex;flex-direction:column;background:#fff;border:1.5px solid #f0d798;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.offer-card:hover{transform:translateY(-3px)}
.oc-img{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#ffe9c7,#fff);display:flex;align-items:center;justify-content:center;font-size:30px;overflow:hidden}
.oc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oc-body{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.oc-body b{color:var(--navy);font-size:14px}
.oc-body small{color:var(--muted);font-size:12px}
.oc-price{color:var(--red);font-weight:900;font-size:15px;margin-top:2px}
/* Today's offer banner on detail */
.today-offer{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#fff3d6,#fff);border:1.5px solid #f0d798;border-radius:14px;padding:12px 16px;margin-top:18px}
.to-img{width:80px;height:80px;border-radius:12px;object-fit:cover;flex-shrink:0}
.to-body{flex:1}
.to-tag{background:var(--red);color:#fff;font-size:11px;font-weight:900;padding:2px 10px;border-radius:999px}
.to-body b{display:block;color:var(--navy);font-size:16px;margin:5px 0 2px}
.to-body span{font-size:13px;color:var(--muted)}
.to-price{font-size:22px;font-weight:900;color:var(--red);white-space:nowrap}
@media(max-width:560px){.mr-desc{flex-basis:100%}.to-img{width:60px;height:60px}}

/* ===== Restaurant detail: hero, info grid, menu, coupon ===== */
.rest-hero{position:relative;border-radius:18px;overflow:hidden;background:#0d2966 center/cover no-repeat;min-height:220px;display:flex;align-items:flex-end;margin-bottom:16px}
.rh-inner{padding:22px 24px;color:#fff;width:100%}
.rh-halal{background:#16a34a;color:#fff;font-size:12px;font-weight:900;padding:3px 12px;border-radius:999px}
.rest-hero h1{font-size:30px;font-weight:900;margin:10px 0 4px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.rh-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:700;opacity:.95}
.rest-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rig-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.rig-ic{font-size:20px;flex-shrink:0}
.rig-k{font-weight:800;color:var(--muted);font-size:13px;flex-shrink:0}
.rig-v{font-weight:800;color:var(--navy);font-size:13.5px;margin-inline-start:auto;text-align:end}
.halal-menu2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm2{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:10px;transition:.15s}
.hm2:hover{border-color:var(--red);box-shadow:var(--shadow-sm)}
.hm2-photo{width:70px;height:70px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;flex-shrink:0}
.hm2-photo img{width:100%;height:100%;object-fit:cover}
.hm2-body{flex:1;min-width:0}
.hm2-body b{color:var(--navy);font-size:15px;display:block}
.hm2-body span{color:var(--muted);font-size:12.5px}
.hm2-price{font-weight:900;color:var(--red);font-size:16px;white-space:nowrap}
.rest-coupon{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#eafaf1,#fff);border:1.5px dashed #16a34a;border-radius:14px;padding:14px 18px;margin-top:16px}
.rest-coupon.locked{background:linear-gradient(120deg,#f4f7ff,#fff);border-color:#cfe0ff}
.rcp-l{display:flex;gap:12px;align-items:center;flex:1}
.rcp-ic{font-size:30px}
.rest-coupon b{color:var(--navy);font-size:15px;display:block}
.rest-coupon span{font-size:13px;color:var(--ink);display:block}
.rest-coupon small{font-size:12px;color:#16a34a;font-weight:800;display:block;margin-top:2px}
.rcp-code{background:#16a34a;color:#fff;font-weight:900;font-size:18px;letter-spacing:1px;padding:8px 18px;border-radius:10px;border:2px dashed #fff;box-shadow:0 0 0 1px #16a34a}
@media(max-width:700px){.rest-info-grid,.halal-menu2{grid-template-columns:1fr}.rest-hero h1{font-size:23px}}

/* ===== Loyalty / Yalla China Card ===== */
.loy-card{background:linear-gradient(120deg,#0d2966,#1e3f8f);color:#fff;border-radius:16px;padding:16px 18px;margin-top:16px}
.loyc-head{display:flex;gap:12px;align-items:center}
.loyc-ic{font-size:30px}
.loy-card b{font-size:16px;display:block}
.loy-card small{opacity:.85;font-size:12.5px}
.loy-stamps{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 8px}
.loy-stamps .stamp{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,.5)}
.loy-stamps .stamp.on{background:#f5c518;color:#0d2966}
.loy-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:700;align-items:center}
.loy-mycode{background:rgba(255,255,255,.15);padding:5px 12px;border-radius:999px}
.loy-mycode b{display:inline;font-size:14px;letter-spacing:1px}
.loy-card.locked .btn-sm{margin-top:12px}
.loy-confirm{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.loy-confirm b{color:var(--navy)}

/* Halal hero CTA row */
.halal-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* Restaurant AI menu tools row */
.rest-ai-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.rest-ai-row form{margin:0}

/* Restaurant analytics tiles */
.rest-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.rst{background:var(--soft);border-radius:14px;padding:16px 10px;text-align:center;display:flex;flex-direction:column;gap:4px}
.rst-n{font-size:26px;font-weight:900;color:var(--navy)}
.rst-l{font-size:12px;font-weight:700;color:var(--muted)}
@media(max-width:700px){.rest-stats{grid-template-columns:repeat(2,1fr)}}

/* Menu categories + per-dish delivery */
.menu-cat-h{font-size:15px;font-weight:900;color:var(--red);margin:16px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--soft)}
.menu-cat-h:first-of-type{margin-top:4px}
.hm2-dlv{display:inline-block;font-size:11px;font-weight:800;color:#16a34a;background:#eafaf1;border-radius:6px;padding:1px 8px;margin-top:4px}
.menu-row .mr-cat{flex:0 0 130px;min-width:110px}
.menu-row .mr-dlv{flex:0 0 150px;min-width:120px}
.menu-row select{border:1.5px solid var(--line);border-radius:10px;padding:9px;font-family:inherit;font-size:13px;background:#fff}
@media(max-width:700px){.menu-row .mr-cat,.menu-row .mr-dlv{flex-basis:calc(50% - 5px)}}

/* ===== Cloud Kitchen (المطبخ السحابي) ===== */
.ck-strip{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#0D2966,#16357f);color:#fff;border-radius:16px;padding:16px 20px;margin:14px 0 20px;box-shadow:var(--shadow-sm)}
.ck-strip:hover{filter:brightness(1.05)}
.ck-strip-ic{font-size:30px;flex-shrink:0}
.ck-strip-t{display:flex;flex-direction:column;flex:1;min-width:0}
.ck-strip-t b{font-size:16px}
.ck-strip-t em{font-style:normal;font-size:13px;opacity:.85}
.ck-strip-go{font-size:22px;font-weight:900}
.ck-lead{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#fff7e6,#fff);border:1.5px solid #f0d798;border-radius:20px;padding:26px 28px;margin-bottom:20px}
.ck-lead-txt{flex:1;min-width:280px}
.ck-lead-txt h1{font-size:26px;color:var(--navy);margin-bottom:6px}
.ck-lead-txt p{color:var(--muted);font-size:15px;max-width:560px;line-height:1.7}
.ck-lead-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ck-lead-badges{display:flex;flex-direction:column;gap:8px}
.ck-badge{background:#fff;border:1.5px solid #f0d798;border-radius:12px;padding:9px 14px;font-weight:800;font-size:13px;color:var(--navy)}
.ck-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.ck-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ck-card{display:flex;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s}
.ck-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,41,102,.12)}
.ck-card-logo{width:64px;height:64px;border-radius:14px;background:#f3f5fa;display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;overflow:hidden}
.ck-card-logo img{width:100%;height:100%;object-fit:cover}
.ck-card-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ck-card-h{display:flex;align-items:center;gap:6px}
.ck-card-h b{font-size:16px;color:var(--navy)}
.ck-card-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.ck-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.ck-card-rate{font-weight:800;font-size:13px;color:#a15c00}
.ck-verified{color:#16a34a;font-size:15px}
/* hero (public page) */
.ck-hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.ck-hero-logo{width:96px;height:96px;border-radius:20px;background:#f3f5fa;display:flex;align-items:center;justify-content:center;font-size:44px;flex-shrink:0;overflow:hidden}
.ck-hero-logo img{width:100%;height:100%;object-fit:cover}
.ck-hero-info{flex:1;min-width:240px}
.ck-hero-info h1{font-size:24px;color:var(--navy);display:flex;align-items:center;gap:8px}
.ck-hero-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin:6px 0}
.ck-hero-rating{display:flex;align-items:center;gap:8px;margin:4px 0}
.ck-rate-big{font-size:26px;font-weight:900;color:#a15c00}
.ck-rate-stars{color:#f0a500;font-size:18px;letter-spacing:1px}
.ck-hero-desc{color:var(--ink);font-size:14px;margin-top:8px;line-height:1.7}
.ck-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.ck-side{position:sticky;top:16px}
/* criterion bars */
.ck-crit{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ck-crit-row{display:flex;align-items:center;gap:12px}
.ck-crit-l{flex:0 0 130px;font-size:13.5px;font-weight:700;color:var(--ink)}
.ck-crit-bar{flex:1;height:9px;background:#eef1f7;border-radius:999px;overflow:hidden}
.ck-crit-bar i{display:block;height:100%;background:linear-gradient(90deg,#f0a500,#e8202a);border-radius:999px}
.ck-crit-row b{flex:0 0 34px;text-align:end;color:#a15c00}
/* packages */
.ck-pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.ck-pkg{border:1.5px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.ck-pkg-h{display:flex;align-items:center;justify-content:space-between}
.ck-pkg-h b{color:var(--navy);font-size:15px}
.ck-pkg-price{font-weight:900;color:#a15c00;font-size:17px}
.ck-pkg-meta{font-size:12.5px;color:var(--muted)}
.ck-pkg button{margin-top:6px;align-self:flex-start}
.ck-you-sub{margin-top:12px;background:#e7f7ed;color:#16a34a;font-weight:800;border-radius:10px;padding:10px 14px;font-size:14px}
.ck-locked p{background:#f8f9fc;border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center}
.ck-menu-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ck-menu-list li{border-bottom:1px solid var(--line);padding-bottom:8px;font-size:14.5px}
.ck-menu-list li b{color:var(--navy)}
/* rating form */
.ck-rate-form{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.ck-rate-row{display:flex;align-items:center;gap:12px}
.ck-rate-l{flex:0 0 130px;font-weight:700;font-size:14px}
.ck-stars{display:flex;align-items:center;gap:2px}
.ck-star{background:none;border:none;font-size:26px;color:#f0a500;cursor:pointer;line-height:1;padding:0 1px}
.ck-rate-form textarea{border:1.5px solid var(--line);border-radius:12px;padding:11px;font-family:inherit;font-size:14px;resize:vertical}
/* status banner */
.ck-status{border-radius:14px;padding:14px 18px;margin-bottom:14px}
.ck-status b{font-size:15px}
.ck-status p{font-size:13.5px;margin-top:2px}
.ck-pending{background:#fff7e6;border:1.5px solid #f0d798;color:#8a6d15}
.ck-active{background:#e7f7ed;border:1.5px solid #b6e6c5;color:#16794a}
.ck-suspended{background:#fdecec;border:1.5px solid #f5c2c2;color:#c0392b}
/* editors */
.ck-pkg-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.ck-pkg-row .ck-days{flex:0 0 70px}
.ck-pkg-row select{flex:0 0 150px;border:1.5px solid var(--line);border-radius:10px;padding:9px}
.ck-steps{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.ck-step{display:flex;align-items:center;gap:8px;background:#f3f5fa;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--navy)}
.ck-step span{background:var(--navy);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
/* subscribers list */
.ck-subs{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.ck-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.ck-sub-i b{color:var(--navy)}
.ck-sub-i .badge{margin-inline-start:8px}
.ck-sub-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* QR card */
.ck-qrcard{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.ck-qrcard b{color:var(--navy);font-size:15px}
.ck-qr-logo{width:48px;height:48px;border-radius:12px;background:#f3f5fa;display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden}
.ck-qr-logo img{width:100%;height:100%;object-fit:cover}
.ck-qr{width:190px;height:190px;display:flex;align-items:center;justify-content:center}
.ck-qr svg{width:100%;height:100%}
.ck-sub-pkg{font-size:15px;margin-bottom:6px}
@media(max-width:820px){.ck-grid{grid-template-columns:1fr}.ck-side{position:static}.ck-crit-l,.ck-rate-l{flex-basis:100px}}
@media print{.topbar,.navbar,.footer,.crumb,.ck-lead-cta,.btn-sm,.btn-lg{display:none!important}.ck-qrcard{border:none;box-shadow:none}}
.ck-fee-note{background:#eef3ff;border:1.5px solid #cdd9f5;border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ck-fee-disc,.ck-fee-periods{flex-basis:100%;font-weight:600;font-size:12.5px;line-height:1.6}
.ck-fee-disc{color:#7a5a12;background:#fff7e6;border:1.5px solid #f0d798;border-radius:9px;padding:8px 11px}
.ck-fee-periods{color:#3a4a6b}

/* ===== Restaurant Supplies (توريدات المطاعم) ===== */
.ck-strips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 20px}
.sup-strip{background:linear-gradient(120deg,#14532d,#1c6b3c)}
.sup-lead{background:linear-gradient(120deg,#eafaf0,#fff);border-color:#bfe6cd}
.sup-lead .ck-badge{border-color:#bfe6cd}
.sup-card .sup-card-desc{font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.5}
.sup-feat{color:#f0a500;font-size:14px}
.chip.sm{font-size:12px;padding:5px 11px}
/* public catalogue */
.sup-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:8px}
.sup-prod{display:flex;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:12px}
.sup-prod-ph{width:60px;height:60px;border-radius:12px;background:#f3f5fa;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;overflow:hidden}
.sup-prod-ph img{width:100%;height:100%;object-fit:cover}
.sup-prod-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.sup-prod-b b{color:var(--navy);font-size:14.5px}
.sup-prod-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.sup-price{font-weight:900;color:#14803a;font-size:15px}
.sup-price em{font-style:normal;font-weight:600;color:var(--muted);font-size:12px}
.sup-phone{margin-top:8px;font-size:14px}
.sup-phone a{color:var(--navy);font-weight:800}
.sup-side-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.sup-side-ic{font-size:40px}
.sup-side-card b{color:var(--navy)}
.sup-side-card .btn-sm{width:100%}
/* dashboard catalogue rows */
.sup-row .sup-unit{flex:0 0 90px;min-width:70px;border:1.5px solid var(--line);border-radius:10px;padding:9px}
/* plans */
.sup-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:8px}
.sup-plan{border:2px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;position:relative}
.sup-plan.on{border-color:#14803a;background:#f2fbf5}
.sup-plan input{position:absolute;inset-inline-start:12px;top:12px}
.sup-plan b{color:var(--navy);font-size:15px;padding-inline-start:24px}
.sup-plan-price{font-weight:900;color:#14803a;font-size:18px}
.sup-plan-price em{font-style:normal;font-weight:600;color:var(--muted);font-size:12px}
.sup-plan ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.sup-plan li{font-size:12.5px;color:var(--ink)}
.sup-plans .btn-sm{grid-column:1/-1;justify-self:start}
@media(max-width:700px){.ck-strips{grid-template-columns:1fr}}

/* supplier product showcase (on the directory) */
.sup-showcase{background:linear-gradient(120deg,#fff,#f6faf7);border:1.5px solid #d9ecdf;border-radius:18px;padding:18px 20px;margin:0 0 18px}
.sup-showcase-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sup-showcase-h h2{font-size:18px;color:var(--navy);margin:0}
.sup-showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sup-show-card{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .12s,box-shadow .12s}
.sup-show-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(13,41,102,.1)}
.sup-show-ph{height:96px;background:#f3f5fa;display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden}
.sup-show-ph img{width:100%;height:100%;object-fit:cover}
.sup-show-b{padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.sup-show-b b{color:var(--navy);font-size:14px;line-height:1.3}
.sup-show-by{font-size:11.5px;color:var(--muted)}
@media(max-width:600px){.sup-showcase-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Legal Center (المركز القانوني) ===== */
.lg-lead{background:linear-gradient(120deg,#eef2fb,#fff);border-color:#cdd9f5}
.lg-lead .ck-badge{border-color:#cdd9f5}
.lg-disclaimer{background:#fff7e6;border:1.5px solid #f0d798;color:#8a6d15;border-radius:12px;padding:11px 15px;font-size:13px;font-weight:600;margin:0 0 16px;line-height:1.6}
.lg-guides{margin-bottom:22px}
.lg-guides h2,.lg-providers h2{font-size:19px;color:var(--navy);margin-bottom:12px}
.lg-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.lg-guide-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s;position:relative}
.lg-guide-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(13,41,102,.1)}
.lg-guide-ic{font-size:30px}
.lg-guide-card b{color:var(--navy);font-size:15px;line-height:1.35}
.lg-guide-tag{align-self:flex-start;font-size:11px;font-weight:800;color:var(--navy);background:#eef2fb;border-radius:20px;padding:3px 10px;margin-top:4px}
.lg-guides-empty{background:#f8f9fc;border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center}
.lg-card-specs{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.lg-card-specs span{font-size:11.5px;color:var(--muted);background:#f3f5fa;border-radius:20px;padding:2px 9px}
.lg-hero-specs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.lg-spec-pill{font-size:12.5px;font-weight:700;color:var(--navy);background:#eef2fb;border:1px solid #cdd9f5;border-radius:20px;padding:4px 12px}
/* article */
.lg-article{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--shadow-sm)}
.lg-article-cat{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:6px}
.lg-article h1{color:var(--navy);font-size:24px;line-height:1.3;margin-bottom:10px}
.lg-article-sum{font-size:16px;color:var(--ink);font-weight:600;margin-bottom:14px;line-height:1.7}
.lg-article-body{font-size:15px;line-height:1.9;color:var(--ink);margin-top:10px}
.lg-article-src{margin-top:16px;font-size:13.5px;color:var(--muted);word-break:break-all}
.lg-article-src a{color:var(--navy);font-weight:700}
.lg-cta-providers{margin-top:18px;background:linear-gradient(120deg,#0D2966,#16357f);color:#fff;border-radius:16px;padding:20px 24px;text-align:center}
.lg-cta-providers p{margin-bottom:12px;font-weight:700;font-size:16px}

/* restaurant reservations inbox */
.rest-res-badge{background:var(--red);color:#fff;font-size:12px;font-weight:900;border-radius:20px;padding:1px 9px;margin-inline-start:6px}
.rest-res-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rest-res-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px}
.rest-res-row.rest-res-requested{border-color:#f0d798;background:#fff9ee}
.rest-res-i b{color:var(--navy)}.rest-res-i .badge{margin-inline-start:8px}

/* user avatar chip in the header */
.login-user{display:inline-flex;align-items:center;gap:7px}
.yc-avatar{vertical-align:middle}

/* supplier ratings + reviews */
.sup-rate-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sup-rate-form input[name="comment"]{flex:1;min-width:180px;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:14px}
.sup-reviews{display:flex;flex-direction:column;gap:10px}
.sup-review{border:1.5px solid var(--line);border-radius:12px;padding:11px 14px}
.sup-review-h{display:flex;align-items:center;gap:10px}
.sup-review-h b{color:var(--navy)}.sup-review-h .ck-rate-stars{font-size:14px}
.sup-review p{margin-top:4px;color:var(--ink);font-size:14px}

/* cloud-kitchen subscription expiry chip */
.ck-sub-exp{display:inline-block;margin-inline-start:8px;font-size:11.5px;font-weight:800;color:#16794a;background:#e7f7ed;border-radius:20px;padding:2px 9px}
.ck-sub-exp.soon{color:#a15c00;background:#fdeccf}

/* accessibility: skip-to-content link (visible on keyboard focus) + sr-only */
/* Off-screen VERTICALLY (top:-60px), never horizontally — a left:-9999px skip
   link makes the RTL page ~10000px wide, and some in-app browsers land the
   initial scroll on that empty void, showing a blank page. */
.skip-link{position:fixed;inset-inline-start:8px;left:8px;top:-60px;z-index:2000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:800;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#yc-main{scroll-margin-top:12px}

/* homes owner management bar */
.home-owner-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:820px;margin:0 auto 14px;background:#eef2fb;border:1.5px solid #cdd9f5;border-radius:14px;padding:12px 16px}
.hob-label{font-weight:800;color:var(--navy);font-size:14px}
.hob-rented{color:#c0392b}
.hob-actions{display:flex;gap:8px;flex-wrap:wrap}
.hob-del{color:#c0392b}

/* legal law fields */
.lg-official{font-size:15px;color:var(--muted);font-weight:700;margin:2px 0 8px;direction:ltr;text-align:start}
.lg-dates{display:flex;gap:16px;flex-wrap:wrap;background:#f3f5fa;border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:13.5px;color:var(--ink)}
.lg-dates b{color:var(--navy)}
.lg-interp{margin-top:18px;border-top:2px solid var(--line);padding-top:14px}
.lg-interp h3{color:var(--navy);font-size:17px;margin-bottom:8px}
.lg-interp-note{background:#eef2fb;border:1.5px solid #cdd9f5;border-radius:10px;padding:9px 13px;font-size:12.5px;color:#3a4a6b;margin-bottom:10px;font-weight:600}
.lg-guide-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.lg-guide-date{font-size:11px;font-weight:800;color:#16794a;background:#e7f7ed;border-radius:20px;padding:2px 9px}
/* Adjudicated-case lessons */
.lg-cases{margin:26px 0 8px}
.lg-cases>h2{color:var(--navy)}
.lg-cases-sub{margin:2px 0 10px;font-size:13.5px;line-height:1.6}
.lg-disclaimer-case{background:#fdeaea;border-color:#efb9b9;color:#9a3131}
.lg-case-card{border-inline-start:4px solid #d98b8b}
.lg-case-law{font-size:10.5px;font-weight:800;color:#8a3a3a;background:#fbeaea;border-radius:20px;padding:2px 9px;direction:ltr;text-align:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-govlaw{background:#fbeaea;border:1.5px solid #efc0c0;border-radius:10px;padding:8px 13px;color:#8a3a3a;direction:auto}
.lg-govlaw-lbl{font-weight:800}
.lg-article-case .lg-article-cat{color:#9a3131}
.lg-lesson h3{color:#16794a}
/* Law page: stacked parts (law text -> interpretation -> related case) */
.lg-part-h{color:var(--navy);font-size:17px;margin:20px 0 8px;padding-top:14px;border-top:2px solid var(--line)}
.lg-embed-case{margin-top:6px;background:#fbf3f3;border:1.5px solid #eecfcf;border-radius:14px;padding:14px 16px}
.lg-embed-case .lg-part-h{border-top:0;padding-top:0;margin-top:0;color:#9a3131}
.lg-embed-title{display:block;font-size:15.5px;color:var(--navy);margin:6px 0}
.lg-lesson-inline{background:#e7f7ed;border:1.5px solid #bfe6cd;border-radius:10px;padding:10px 13px;margin-top:10px;font-size:13.5px;line-height:1.7;color:#155e3a}
.lg-embed-more{display:inline-block;margin-top:10px;font-weight:800;color:#b02a2a;font-size:13px}
/* Clear separation of the parts on a law/guide page */
.lg-part-desc{color:#5a6478}
.lg-part-law{color:var(--navy)}
.lg-lawbox{background:#f7f9fc;border:1.5px solid #dde5f2;border-inline-start:4px solid var(--navy);border-radius:12px;padding:14px 16px}
.lg-source-box{margin-top:16px;background:#eef7f1;border:1.5px solid #c6e5d2;border-radius:12px;padding:11px 15px;font-size:13px;word-break:break-all}
.lg-source-lbl{display:block;font-weight:800;color:#166c43;margin-bottom:3px}
.lg-source-box a{color:#0f5c37;text-decoration:underline}
.lg-updated{margin-top:10px}

/* ===== Learn Chinese (LMS) ===== */
.lrn-lead{background:linear-gradient(120deg,#fef2f2,#fff);border-color:#f4cccc}
.lrn-levels{margin:22px 0}
.lrn-levels>h2,.lrn-lessons>h2,.lrn-teach h2,.lrn-courses>h2{color:var(--navy);font-size:19px;margin-bottom:12px}
.lrn-lvl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lrn-lvl{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:5px;position:relative}
.lrn-lvl.free{border-color:#bfe6cd;background:#f4fbf6}
.lrn-lvl.locked{opacity:.85}
.lrn-lvl-no{width:30px;height:30px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px}
.lrn-lvl.free .lrn-lvl-no{background:#16794a}
.lrn-lvl b{color:var(--navy);font-size:15px}
.lrn-price{font-size:12px;font-weight:700;color:var(--muted)}
.lrn-free-tag{font-size:12px;font-weight:800;color:#16794a}
.lrn-drip-note{margin-bottom:10px}
.lrn-enroll-note{background:#f4fbf6;border:1.5px solid #bfe6cd;border-radius:14px;padding:18px;text-align:center}
.lrn-pass{background:linear-gradient(135deg,#fff7ed,#fef3c7);border:1.5px solid #fcd34d;border-radius:16px;padding:20px;margin:12px 0;text-align:center}
.lrn-pass-badge{display:inline-block;background:#7c1d1d;color:#fff;font-weight:900;font-size:13px;padding:5px 14px;border-radius:999px;letter-spacing:.3px}
.lrn-pass-hero{font-size:26px;font-weight:900;color:#7c2d12;margin:12px 0 4px}
.lrn-pass-day{font-size:15px;font-weight:800;color:#b45309}
.lrn-pass-price{font-size:13px;color:#92400e;margin-top:2px}
.lrn-pass-lock{color:#166534;font-weight:800}
.lrn-pass-list{list-style:none;padding:0;margin:14px auto;max-width:360px;text-align:start;display:grid;gap:6px;font-size:14px}
.lrn-pass-locknote{margin-top:10px}
.lrn-pro{margin-top:26px}
.lrn-pro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:12px}
.lrn-pro-card{background:var(--card,#fff);border:1.5px solid #e6e6ef;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.lrn-pro-card b{font-size:16px}
.lrn-pro-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.lrn-pro-price{font-weight:900;color:#7c2d12;font-size:18px}
.lrn-course-hero{margin:10px 0 18px}
.lrn-enroll-note p{margin-bottom:12px;color:var(--ink)}
.lrn-lesson-list{display:flex;flex-direction:column;gap:8px}
.lrn-lesson{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;text-decoration:none;transition:.12s}
.lrn-lesson:hover{border-color:var(--navy);transform:translateX(-2px)}
.lrn-lesson.done{background:#f4fbf6;border-color:#bfe6cd}
.lrn-lesson.locked{opacity:.6;cursor:default}
.lrn-lesson-no{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:900;flex:none}
.lrn-lesson.done .lrn-lesson-no{background:#16794a;color:#fff}
.lrn-lesson-b{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.lrn-lesson-b b{color:var(--navy);font-size:14.5px}
.lrn-lesson-st{font-size:12px;font-weight:800;color:var(--navy);white-space:nowrap}
.lrn-teach{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#f3f5fa;border-radius:16px;padding:18px 22px;margin:22px 0}
/* Lesson article */
.lrn-article{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:24px}
.lrn-art-lvl{font-size:12.5px;font-weight:800;color:#b02a2a}
.lrn-article h1{color:var(--navy);font-size:24px;margin:4px 0 8px}
.lrn-intro{color:var(--ink);line-height:1.7;margin-bottom:14px}
.lrn-words{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.lrn-word-head,.lrn-word{display:grid;grid-template-columns:1.1fr 1fr 1.4fr 1.4fr;gap:8px;align-items:center;padding:10px 12px}
.lrn-word-head{background:var(--navy);color:#fff;font-size:12px;font-weight:800}
.lrn-word{border-top:1px solid var(--line)}
.lrn-word:nth-child(even){background:#f8f9fc}
.lw-hz{font-size:22px;font-weight:900;color:var(--navy)}
.lw-py{font-size:13px;color:#b02a2a;font-weight:700}
.lw-sound{font-size:15px;font-weight:800;color:#16794a}
.lw-mean{font-size:13.5px;color:var(--ink)}
.lrn-tip{background:#fff7e6;border:1.5px solid #f0d798;border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600;color:#7a5a12;margin-bottom:16px;line-height:1.6}
.lrn-quiz{border-top:2px solid var(--line);padding-top:16px}
.lrn-quiz h2{color:var(--navy);font-size:18px;margin-bottom:12px}
.lrn-q{margin-bottom:14px}
.lrn-q-t{margin-bottom:7px;color:var(--ink)}
.lrn-q-opts{display:flex;flex-direction:column;gap:6px}
.lrn-opt{display:flex;align-items:center;gap:8px;background:#f8f9fc;border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;cursor:pointer;font-size:14px}
.lrn-opt:hover{border-color:var(--navy)}
.lrn-opt input{accent-color:var(--navy)}
.lrn-result{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:11px;padding:12px 15px;margin-bottom:14px;font-weight:800}
.lrn-result.pass{background:#e7f7ed;border:1.5px solid #bfe6cd;color:#155e3a}
.lrn-result.fail{background:#fdeaea;border:1.5px solid #efb9b9;color:#9a3131}
.lrn-nav{margin-top:16px}
.lrn-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.lrn-course-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:5px}
.lcc-lang{font-size:11px;font-weight:800;color:#b02a2a;background:#fdeaea;border-radius:20px;padding:2px 9px;align-self:flex-start}
.lcc-foot{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-top:4px}
.lrn-course-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.lrn-study-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,#0d2966,#b02a2a);color:#fff;border-radius:18px;padding:20px 24px;margin:0 0 20px;text-decoration:none}
.lrn-study-cta b{font-size:19px}.lrn-study-cta p{opacity:.9;font-size:13.5px;margin-top:3px}
.lrn-study-cta .lsc-go{background:#fff;color:var(--navy);font-weight:800;padding:11px 20px;border-radius:11px;white-space:nowrap}
@media(max-width:640px){.lrn-word-head,.lrn-word{grid-template-columns:0.8fr 0.9fr 1.2fr 1.2fr;gap:5px;padding:8px}.lw-hz{font-size:18px}.lw-sound{font-size:13px}}

/* Learn — teacher form + course cards extras */
.lrn-form-sec{color:var(--navy);font-size:15px;margin:8px 0 0;padding-top:12px;border-top:1.5px solid var(--line)}
.lrn-promote-box{background:linear-gradient(120deg,#fff7e6,#fff);border:1.5px solid #f0d798;border-radius:12px;padding:13px 15px}
.lrn-promote-box .af-check{font-weight:800;color:#7a5a12}
.lrn-promote-box p{margin-top:5px}
.lrn-mycourse{border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:8px}
.lmc-h{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.lmc-h b{color:var(--navy)}
.lmc-badge{font-size:11px;font-weight:800;background:var(--soft);border-radius:20px;padding:2px 9px;color:var(--navy)}
.lmc-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:700}
.lcc-photo{margin:-16px -16px 8px;border-radius:14px 14px 0 0;overflow:hidden;height:120px}
.lcc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lcc-desc{line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lcc-meta2{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--navy);font-weight:700;margin-top:3px}
.af-hint{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}

/* Learn — audio buttons + perfect-score celebration */
.lw-audio{background:none;border:0;cursor:pointer;font-size:15px;margin-inline-start:6px;padding:2px 4px;border-radius:6px;line-height:1;vertical-align:middle;transition:transform .15s,background .15s}
.lw-audio:hover{background:#eef2fb}
.lw-audio.playing{transform:scale(1.35)}
.lw-hz{display:inline-flex;align-items:center;gap:2px}
.lrn-listen-all{margin:0 0 12px;display:inline-flex;align-items:center;gap:6px}
.lrn-confetti{display:none;position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2000}
.lrn-result.perfect{display:block;text-align:center;background:linear-gradient(135deg,#fff8e1,#ffe9a8);border:2px solid #f0c400;color:#7a5a00;padding:22px 18px;box-shadow:0 8px 30px rgba(240,196,0,.35);animation:lrnPop .5s cubic-bezier(.2,1.3,.5,1)}
@keyframes lrnPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.lrn-perfect-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.lrn-perfect-emoji{font-size:44px;line-height:1;animation:lrnBounce 1s ease infinite}
@keyframes lrnBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.lrn-perfect-wrap b{font-size:20px;color:#8a6a00}
.lrn-perfect-score{font-size:38px;font-weight:900;color:#e6a800;letter-spacing:1px;text-shadow:0 2px 0 #fff}

/* Generated university crest — white initials on the hashed colour background */
.uni-logo .mono,.sc-logo .mono,.uni-crest .mono{color:#fff!important}
.uni-logo,.sc-logo,.uni-crest{color:#fff}
/* Real logo/seal image: show it in full (contain) on white, don't crop it. */
.sc-logo img.sc-logo-img,.uni-logo img.sc-logo-img,.uni-crest img.sc-logo-img{object-fit:contain;background:#fff;padding:7px}

/* Scholarships page + link */
.sch-lead{background:linear-gradient(120deg,#eefaf1,#fff);border-color:#bfe6cd}
.sch-uni-note{margin-top:10px;background:#fff;border:1.5px solid #cde;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--navy)}
.sch-sec{margin:22px 0}
.sch-sec>h2{color:var(--navy);font-size:19px;margin-bottom:12px}
.sch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sch-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px}
.sch-card .sch-ic{font-size:26px}
.sch-card b{display:block;color:var(--navy);margin:6px 0 4px}
.sch-card p{font-size:13px;color:var(--muted);line-height:1.6}
.sch-list{list-style:none;display:flex;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px}
.sch-list li{font-size:14px;line-height:1.6;color:var(--ink)}
.sch-steps{display:flex;flex-direction:column;gap:8px}
.sch-step{display:flex;align-items:center;gap:10px;background:#f3f5fa;border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--navy)}
.sch-step span{background:#16794a;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}
.sch-src{margin-top:10px;font-size:13px}
.sch-study-cta{background:linear-gradient(120deg,#16794a,#0d2966)!important}
.sch-uni-link{display:flex;align-items:center;gap:12px;background:#eefaf1;border:1.5px solid #bfe6cd;border-radius:14px;padding:13px 15px;margin-bottom:14px;text-decoration:none}
.sch-uni-link .sul-ic{font-size:24px}
.sch-uni-link .sul-b{flex:1;display:flex;flex-direction:column}
.sch-uni-link .sul-b b{color:#155e3a}
.sch-uni-link .sul-go{color:#16794a;font-weight:900}

/* University favourite + compare */
.uni-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.uni-fav{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:8px 15px;font-weight:800;color:var(--navy);cursor:pointer;font-size:14px}
.uni-fav.on{background:#fff7e6;border-color:#f0c400;color:#8a6a00}
.uni-compare-link{display:inline-flex;align-items:center;gap:6px;background:#eef2fb;border:1.5px solid #cdd9f5;border-radius:10px;padding:8px 15px;font-weight:800;color:var(--navy);text-decoration:none;font-size:14px}
.uni-compare-link .ucl-n{background:var(--navy);color:#fff;border-radius:20px;padding:1px 8px;font-size:12px}
.cmp-head{margin-bottom:16px}.cmp-head h1{color:var(--navy);font-size:24px}
.cmp-scroll{overflow-x:auto;border:1.5px solid var(--line);border-radius:14px}
.cmp-table{border-collapse:collapse;width:100%;min-width:760px;background:#fff}
.cmp-table th,.cmp-table td{padding:11px 13px;text-align:start;border-bottom:1px solid var(--line);font-size:13.5px;white-space:nowrap}
.cmp-table thead th{background:var(--navy);color:#fff;font-size:12.5px;position:sticky;top:0}
.cmp-table .cmp-metric{font-weight:800}
.cmp-table .cmp-metric a{color:var(--navy)}
.cmp-table tbody tr:nth-child(even){background:#f8f9fc}
.cmp-table b{color:var(--navy);font-size:15px}
.cmp-yes{color:#16794a;font-weight:900}.cmp-no{color:var(--muted)}
.cmp-str{white-space:normal}
.cmp-str span{display:inline-block;background:#eef2fb;border-radius:20px;padding:1px 8px;margin:2px 3px 0 0;font-size:11.5px;color:var(--navy)}
.cmp-rm{background:#fdeaea;border:1px solid #efb9b9;color:#c0392b;border-radius:8px;width:26px;height:26px;cursor:pointer;font-weight:900}

/* Study listing pagination */
.uni-pager{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.uni-pager .pg-info{font-size:12.5px;color:var(--muted);font-weight:600}
.uni-pager .pg-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.uni-pager .pgbtn{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--navy);font-weight:800;font-size:14px;text-decoration:none;transition:.15s}
.uni-pager .pgbtn:hover{border-color:var(--navy);background:#f6f8fd}
.uni-pager .pgbtn.on{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 5px 14px rgba(9,26,68,.28)}
.uni-pager .pgbtn.pg-arrow{font-size:19px;font-weight:900}
.uni-pager .pgbtn.disabled{opacity:.38;pointer-events:none}
.uni-pager .pgdots{color:var(--muted);padding:0 3px;align-self:flex-end;font-weight:800}

/* University real photos (two strips: campus + city), placed under the content */
.uni-photos-sub{font-size:14px;font-weight:800;color:var(--navy);margin:14px 0 10px}
.uni-photos-sub:first-of-type{margin-top:4px}
.cn-reach{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.6}
.uni-photos .uni-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.uni-photo{margin:0;border-radius:14px;overflow:hidden;border:1.5px solid var(--line);background:#f3f5fa}
.uni-photo img{width:100%;height:190px;object-fit:cover;display:block}
.uni-photo figcaption{padding:9px 12px;font-size:13px;font-weight:700;color:var(--navy);background:#fff}
@media(max-width:640px){.uni-photos .uni-photo-grid{grid-template-columns:1fr 1fr;gap:10px}.uni-photo img{height:130px}.uni-photo figcaption{font-size:11px;padding:6px 8px}}

/* Photo lightbox (view large + zoom + close) */
.yc-lb{position:fixed;inset:0;z-index:3000;background:rgba(10,15,30,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.yc-lb[hidden]{display:none}
.yc-lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.5);transition:transform .2s;cursor:zoom-in}
.yc-lb-img.zoomed{transform:scale(2);cursor:zoom-out;max-width:none;max-height:none}
.yc-lb-close{position:absolute;top:16px;inset-inline-end:20px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:22px;font-weight:700;cursor:pointer;line-height:1}
.yc-lb-close:hover{background:rgba(255,255,255,.3)}
.yc-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:30px;cursor:pointer;line-height:1}
.yc-lb-nav:hover{background:rgba(255,255,255,.32)}
.yc-lb-prev{inset-inline-start:16px}.yc-lb-next{inset-inline-end:16px}
.yc-lb-hint{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;pointer-events:none;transition:opacity .2s}
@media(max-width:640px){.yc-lb-nav{width:40px;height:40px;font-size:24px}.yc-lb-img.zoomed{transform:scale(1.8)}}

/* China locator map (inline SVG) + nearest-airport row */
.cn-map{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#eaf3fb;position:relative}
.cn-map-svg{display:block;width:100%;height:auto}
.cn-airport{display:flex;align-items:center;gap:10px;margin-top:10px;background:#f3f5fa;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.cn-airport .ap-ic{font-size:20px;flex:none}
.cn-airport .ap-b{display:flex;flex-direction:column;min-width:0}
.cn-airport .ap-l{font-size:11px;color:var(--muted);font-weight:700}
.cn-airport .ap-n{font-size:13px;color:var(--navy);font-weight:800;line-height:1.35}
.cn-airport .ap-code{margin-inline-start:auto;background:var(--navy);color:#fff;border-radius:8px;padding:3px 9px;font-size:12px;font-weight:900;letter-spacing:.5px;flex:none}
.cost-note{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.6}

/* ===== University agents marketplace + paid promotion ===== */
.agent-hero{background:linear-gradient(135deg,#0d2966,#16307a);color:#fff;border-radius:18px;padding:26px 22px;text-align:center;margin-bottom:18px}
.agent-hero .ah-ic{font-size:40px;display:block;margin-bottom:6px}
.agent-hero h1{color:#fff;font-size:24px;margin:0 0 6px}
.agent-hero p{color:#dbe4fb;font-size:14px;max-width:640px;margin:0 auto}
.agent-hero .btn{display:inline-block;background:#fff;color:var(--navy);padding:10px 20px;border-radius:10px;font-weight:800;text-decoration:none}
.agent-terms{max-width:720px;margin:0 auto 18px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px}
.agent-terms h2{font-size:17px;color:var(--navy);margin:0 0 10px}
.agent-terms ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.agent-terms li{background:#f3f5fa;border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink)}
.agent-terms li b{color:var(--red);font-size:16px}
.agent-form,.agent-status-card{max-width:720px;margin:0 auto;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:20px}
.agent-form label{display:block;font-weight:700;color:var(--navy);font-size:13.5px;margin:12px 0 5px}
.agent-form input,.agent-form textarea,.agent-form select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px}
.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.agent-status-card{text-align:center}
.agent-status-card .stat-approved{color:#16794a;font-weight:800;font-size:16px}
.agent-status-card .stat-pending{color:#8a6d1f;font-weight:800;font-size:16px}
.agent-status-card .stat-rejected,.agent-status-card .stat-suspended{color:#c0392b;font-weight:800}
.agent-status-card .btn{display:inline-block;margin-top:12px;background:var(--navy);color:#fff;padding:9px 18px;border-radius:10px;text-decoration:none;font-weight:800}
.agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.agent-card{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;transition:.18s}
.agent-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dbe3f4}
.ag-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ag-ava,.ap-ava,.uar-ava{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#0d2966,#16307a);color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px;flex:none}
.ag-top b{color:var(--navy);display:block}
.ag-credit{font-size:11px;color:var(--muted);font-weight:700}
.ag-stars{color:#e6a800;font-weight:800;font-size:15px}
.ag-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.agent-profile{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px;margin-bottom:16px}
.ap-ava{width:72px;height:72px;font-size:30px}
.ap-body h1{font-size:22px;color:var(--navy);margin:0 0 8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ap-verified{font-size:12px;background:#eefaf1;color:#16794a;border:1px solid #bfe6cd;border-radius:999px;padding:3px 10px;font-weight:800}
.ap-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--ink);margin-bottom:8px}
.ap-stars{color:#e6a800;font-weight:800}
.ap-bio{font-size:14px;color:var(--ink);line-height:1.7}
.ag-uni-list{display:flex;flex-wrap:wrap;gap:8px}
.ag-uni{background:#eef2fb;border:1px solid #cdd9f5;border-radius:10px;padding:8px 13px;font-size:13.5px;font-weight:700;color:var(--navy);text-decoration:none}
.ag-reviews{display:flex;flex-direction:column;gap:12px}
.ag-review{background:#f8f9fc;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.agr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.agr-name{font-weight:800;color:var(--navy);font-size:13.5px}
.agr-stars{color:#e6a800;letter-spacing:1px}
.ag-review p{font-size:14px;color:var(--ink);line-height:1.6;margin:0}
.ag-reassure{background:#fff7e6;border:1.5px solid #f0d98a;border-radius:12px;padding:12px 15px;font-size:13.5px;color:#7a5c00;line-height:1.7;margin-bottom:14px}
.ag-review-form label{display:block;font-weight:700;color:var(--navy);font-size:13.5px;margin:12px 0 5px}
.ag-review-form select,.ag-review-form textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px}
.ag-check{display:flex!important;gap:9px;align-items:center;margin:12px 0!important;font-weight:600!important}
.ag-check input{width:auto}
.uni-agent-row{display:flex;gap:10px;align-items:center;padding:8px 0;text-decoration:none;border-top:1px solid var(--line)}
.uni-agent-row:first-of-type{border-top:none}
.uar-ava{width:38px;height:38px;font-size:16px}
.uar-b b{color:var(--navy);font-size:13.5px;display:block}
/* promotion */
.promo-card{max-width:720px;margin:0 auto;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:24px;text-align:center}
.promo-price{margin-bottom:14px}
.pp-amt{font-size:40px;font-weight:900;color:var(--navy)}
.pp-per{display:block;font-size:13px;color:var(--muted);font-weight:600}
.promo-benefits{list-style:none;text-align:start;max-width:420px;margin:0 auto 14px;display:flex;flex-direction:column;gap:8px}
.promo-benefits li{background:#f3f5fa;border-radius:10px;padding:10px 14px;font-size:13.5px;color:var(--ink)}
.promo-stat{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.promo-form label{display:block;font-weight:700;color:var(--navy);margin-bottom:6px}
.promo-form input{width:120px;padding:11px;border:1.5px solid var(--line);border-radius:10px;text-align:center;font-size:16px;font-weight:800}
.promo-total{margin-top:12px;font-size:18px;font-weight:900;color:var(--red)}
.uni-act-promote,.uni-act-agent{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:8px 15px;font-weight:800;font-size:14px;text-decoration:none}
.uni-act-promote{background:#fff3d1;border:1.5px solid #f0dfa0;color:#8a6d1f}
.uni-act-agent{background:#eefaf1;border:1.5px solid #bfe6cd;color:#155e3a}
.uni-promoted-badge{display:inline-block;background:linear-gradient(90deg,#ffd75e,#ffb300);color:#5a3b00;font-weight:900;font-size:12px;padding:5px 14px;border-radius:999px;margin-bottom:12px}
@media(max-width:560px){.af-grid{grid-template-columns:1fr}}

/* ===== Cities & provinces directory + city hub ===== */
.prov-block{margin:18px 0}
.prov-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.prov-head h2{font-size:18px;color:var(--navy);margin:0}
.prov-count{font-size:12.5px;color:var(--muted);font-weight:700;background:#f3f5fa;border-radius:999px;padding:3px 12px}
.prov-cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.prov-city{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;transition:.16s}
.prov-city:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.prov-city b{color:var(--navy);display:block;font-size:15px}
.prov-city .pc-meta{font-size:12px;color:var(--muted);font-weight:600}
.city-hero2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:22px;margin-bottom:16px;align-items:center}
.city-hero2 .ch-body h1{font-size:28px;color:var(--navy);margin:0 0 6px}
.city-hero2 .ch-prov{font-size:14px;color:var(--red);font-weight:800;margin-bottom:10px}
.city-hero2 .ch-desc{font-size:14.5px;color:var(--ink);line-height:1.8}
.city-hero2 .ch-map .cn-map{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.city-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.city-facts .cf{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;flex-direction:column;gap:2px}
.city-facts .cf-l{font-size:11.5px;color:var(--muted);font-weight:700}
.city-facts .cf-v{font-size:14px;color:var(--navy);font-weight:800;line-height:1.4}
.city-places{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.city-place{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none}
.city-place:not(.static):hover{border-color:var(--navy);box-shadow:var(--shadow-sm)}
.city-place .cp-b{flex:1;display:flex;flex-direction:column;min-width:0}
.city-place .cp-b b{color:var(--navy);font-size:14px}
.city-place .cp-go{color:var(--navy);font-weight:900;flex:none}
@media(max-width:760px){.city-hero2{grid-template-columns:1fr}}

/* Hero contact box (fills the empty area beside the university name) */
.uni-hero2 .uh-wrap{align-items:stretch}
.uh-contact{width:270px;flex:none;background:#f8f9fc;border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;align-self:stretch}
.uh-contact h4{font-size:14px;color:var(--navy);margin:0 0 10px}
.uh-contact .uhc-row{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.uh-contact .uhc-row:first-of-type{border-top:none}
.uh-contact .uhc-row .k{color:var(--muted);font-weight:700;white-space:nowrap}
.uh-contact .uhc-row .v{color:var(--navy);font-weight:800;text-align:end;word-break:break-word}
.uh-contact .uhc-row .v.ltr,.uh-contact .uhc-row a.v{direction:ltr}
.uh-contact a.v{color:var(--navy)}
@media(max-width:900px){.uh-contact{width:100%}}

/* Report incorrect content */
.report-wrap{text-align:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.report-link{color:var(--red);font-size:12.5px;font-weight:700;text-decoration:none;opacity:.85}
.report-link:hover{opacity:1;text-decoration:underline}
.report-page{max-width:640px;margin:0 auto}
.report-hero{text-align:center;margin-bottom:18px}
.report-hero .rh-ic{font-size:38px}
.report-hero h1{font-size:23px;color:var(--navy);margin:6px 0}
.report-hero p{color:var(--muted);font-size:14px}
.report-form{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:20px}
.report-form label{display:block;font-weight:700;color:var(--navy);font-size:13.5px;margin:12px 0 5px}
.report-form input,.report-form textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px}
.report-ref{background:#eef2fb;border:1px solid #cdd9f5;border-radius:10px;padding:9px 13px;font-weight:700;color:var(--navy);font-size:13.5px}

/* ---- Legal Center: numbered law library, ads, service cross-promotion ---- */
.ad-slot-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(160deg,#fffaf0,#fff);border:1.5px dashed #e8cf8f;border-radius:16px;padding:14px 18px;margin:22px 0}
.ad-slot-h .ad-tag{font-size:10px;font-weight:800;color:#8a6d1f;background:#fff3d1;padding:3px 10px;border-radius:999px;border:1px solid #f0dfa0}
.ad-slot-h b{font-size:14px;color:var(--navy);font-weight:800}
.ad-slot-h span{font-size:12.5px;color:var(--muted);font-weight:600;flex:1 1 200px}
.ad-slot-h .ad-cta{background:var(--navy);color:#fff;font-size:12.5px;font-weight:800;padding:9px 18px;border-radius:999px}

.lg-library{margin:26px 0}
.lg-lib-sub{font-size:13.5px;margin:-4px 0 12px}
.lg-acc-hint{margin:0 0 12px}
/* Compact chapter accordion: a responsive grid of collapsed chapters. The law
   rows inside a closed <details> are not laid out, so 300+ laws stay fast. */
.lg-acc{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.lg-chapter{background:#fff;border:1.5px solid var(--line,#e7ece6);border-radius:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.lg-chapter[open]{border-color:#cfe0d5;box-shadow:0 8px 22px #0b6e4f10;grid-column:1/-1}
.lg-chapter-h{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;list-style:none;user-select:none}
.lg-chapter-h::-webkit-details-marker{display:none}
.lg-chapter-h:hover{background:var(--soft,#f4faf7)}
.lg-ch-badge{width:38px;height:38px;border-radius:11px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.lg-ch-t{flex:1;min-width:0}
.lg-ch-t b{display:block;font-size:15px;color:var(--navy);font-weight:800;line-height:1.3}
.lg-ch-n{font-size:12px;font-weight:900;color:#fff;background:#0b6e4f;border-radius:999px;padding:2px 10px;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.lg-ch-chev{color:var(--navy);opacity:.5;font-size:18px;transition:transform .2s;flex-shrink:0}
.lg-chapter[open] .lg-ch-chev{transform:rotate(180deg)}
.lg-law-list{border-top:1px solid var(--soft,#eef3ef)}
.lg-law-row{display:flex;align-items:flex-start;gap:13px;padding:13px 16px;border-bottom:1px solid var(--soft);transition:background .15s}
.lg-law-row:last-child{border-bottom:none}
.lg-law-row:hover{background:var(--soft)}
.lg-law-no{font-weight:800;color:var(--red);font-size:13.5px;min-width:38px;padding-top:1px;font-variant-numeric:tabular-nums}
.lg-law-b{flex:1;min-width:0}
.lg-law-b b{display:block;font-size:14.5px;font-weight:800;color:var(--ink)}
.lg-law-of{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;unicode-bidi:plaintext}
.lg-law-go{color:var(--navy);font-size:18px;opacity:.4;align-self:center}
.lg-law-row:hover .lg-law-go{opacity:1}
/* Cases: show-more control + hidden overflow cards */
.lg-case-more{display:none}
.lg-more-wrap{text-align:center;margin-top:16px}
@media(max-width:640px){.lg-acc{grid-template-columns:1fr}}

.lg-promo{margin:30px 0}
.lg-promo>h2{font-size:18px;color:var(--navy)}
.lg-promo-sub{font-size:13.5px;margin:-2px 0 14px}
.lg-promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.lg-promo-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;transition:border-color .15s,transform .15s}
.lg-promo-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.lg-promo-ic{font-size:26px;flex-shrink:0}
.lg-promo-b{flex:1;min-width:0}
.lg-promo-b b{display:block;font-size:14.5px;color:var(--ink);font-weight:800}
.lg-promo-go{color:var(--navy);font-size:20px;font-weight:800}

/* ---- Legal: lawyer scope picker, star rating input, reviews ---- */
.lg-scope-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.lg-scope-opt{display:flex;flex-direction:column;gap:2px;border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;position:relative}
.lg-scope-opt input{position:absolute;inset-inline-start:10px;top:12px}
.lg-scope-opt .lg-scope-em{font-size:22px}
.lg-scope-opt b{color:var(--navy);font-size:14.5px}
.lg-scope-opt.on{border-color:var(--navy);background:#f7f9fd}
@media(max-width:560px){.lg-scope-pick{grid-template-columns:1fr}}

.lg-star-pick{display:inline-flex;flex-direction:row-reverse;gap:3px;font-size:28px;line-height:1;margin:2px 0 8px}
.lg-star-pick input{display:none}
.lg-star-pick label{color:#d9dee9;cursor:pointer;transition:color .1s}
.lg-star-pick label:hover,.lg-star-pick label:hover ~ label,.lg-star-pick input:checked ~ label{color:#f5b301}
.lg-review-form{background:#f7f9fd;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.lg-stars-meta{color:#f5b301;font-weight:800}
.lg-reviews{display:flex;flex-direction:column;gap:12px}
.lg-review{border:1px solid var(--line);border-radius:12px;padding:12px 15px;background:#fff}
.lg-review-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lg-review-h b{color:var(--ink);font-size:14.5px}
.lg-review-stars{color:#f5b301;font-size:15px;letter-spacing:1px}
.lg-review p{margin:6px 0 0;font-size:14px;color:var(--ink)}

/* Legal landing: live counts strip + section-header count badges */
.lg-counts{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.lg-count{flex:1;min-width:140px;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;background:linear-gradient(155deg,#f3f6fc,#eaf0fb);border:1.5px solid #d7e0f2;border-radius:16px;padding:14px 12px;transition:.15s}
.lg-count:hover{border-color:var(--navy,#0d2966);box-shadow:0 8px 22px #0d296615}
.lg-count-n{font-size:28px;font-weight:900;color:var(--navy,#0d2966);line-height:1;font-variant-numeric:tabular-nums}
.lg-count-l{font-size:12.5px;font-weight:700;color:#5a6785}
.lg-h-count{display:inline-block;min-width:24px;text-align:center;font-size:13px;font-weight:900;color:#fff;background:#0b6e4f;border-radius:999px;padding:2px 10px;vertical-align:middle;font-variant-numeric:tabular-nums}

/* ---- Legal Phase 1: pay-first booking + services ---- */
.lg-pay-card{background:linear-gradient(155deg,#f4faf7,#eef7f2);border:1.5px solid #cfe6da;border-radius:16px;padding:18px 20px;margin-top:6px}
.lg-pay-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.lg-pay-amt{font-size:30px;font-weight:900;color:#0b6e4f;line-height:1}
.lg-pay-per{font-size:13.5px;font-weight:700;color:#5a7767}
.lg-pay-note{font-size:12.5px;color:#5a7767;margin:8px 0 14px;font-weight:600}
.lg-pay-card .btn-lg{margin:0}
.lg-paid-block{border:1.5px solid #cfe6da;background:#f4faf7;border-radius:16px}
.lg-svc-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.lg-svc{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line,#e7ece6);border-radius:12px;padding:12px 15px;background:#fff}
.lg-svc-i b{color:var(--navy,#0d2966);font-size:14.5px}
.lg-svc-a{display:flex;align-items:center;gap:10px;white-space:nowrap}
.lg-svc-price{font-size:17px;font-weight:900;color:#0b6e4f}
.lg-svc-add{border-top:1px dashed var(--line,#e3e8e3);padding-top:14px;margin-top:4px}

/* Legal in-platform calls (voice/video) */
.lg-call-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.lg-call-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0}
.lg-call-head h1{margin:0;font-size:22px}
.lg-call-switch{display:flex;gap:6px;flex-wrap:wrap}
.lg-call-frame{position:relative;width:100%;aspect-ratio:16/10;min-height:420px;border-radius:16px;overflow:hidden;border:1.5px solid var(--line,#e3e8e3);background:#0b1020}
.lg-call-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lg-call-off{text-align:center;background:linear-gradient(155deg,#fff7e6,#fdf0d6);border:1.5px solid #f0d798;border-radius:18px;padding:34px 22px}
.lg-call-off-ic{font-size:44px}
.lg-call-off h2{margin:8px 0 6px;color:#8a6d15}
@media(max-width:760px){.lg-call-frame{min-height:340px;aspect-ratio:3/4}}

/* ---- Legal: registration card + provider page polish ---- */
.lg-reg-card{max-width:760px;margin:0 auto;padding:26px 28px 30px;border-radius:20px;box-shadow:0 18px 50px -30px rgba(13,41,102,.45)}
.lg-reg-hd{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.lg-reg-hd .lg-reg-ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,var(--navy),#1b3f8f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.lg-reg-hd h1{font-size:22px;color:var(--navy);margin:0}
.lg-reg-hd .af-sub{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.lg-reg-card .home-form{display:flex;flex-direction:column;gap:14px}
.lg-reg-card .cvf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.lg-reg-card .af-label{margin-top:4px}
.lg-scope-opt{transition:border-color .15s,box-shadow .15s,background .15s}
.lg-scope-opt.on{box-shadow:0 6px 18px -10px rgba(13,41,102,.5)}
.lg-scope-opt input{accent-color:var(--navy)}

/* provider public page */
.ck-hero{align-items:center}
.lg-hero-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lg-spec-pill{background:var(--soft,#f3f5fa);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;color:var(--navy)}
.ck-hero-meta .lg-stars-meta{background:#fff8e6;border:1px solid #f3e0a8;border-radius:999px;padding:2px 10px}
#reviews h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- Comfortable text boxes everywhere (no more tiny single-line areas) ---- */
textarea{min-height:96px;line-height:1.6}
.af-field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:14.5px;background:#fff;min-height:130px;line-height:1.65;resize:vertical}
.af-field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,41,102,.1)}
.lg-review-form textarea{min-height:96px}

/* ---- Always-visible field borders (not only on hover/focus) ---- */
:root{--field-line:#b7c2d8}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]),
select, textarea{
  border:1.6px solid var(--field-line) !important;
  background:#fff;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{
  border-color:var(--navy) !important;
  box-shadow:0 0 0 3px rgba(13,41,102,.12) !important;
}

/* ============ Embassies & consulates directory (embassies.php) ============ */
.emb-hero{background:linear-gradient(135deg,#12395f,#0a1f3c)}
.emb-updated{margin-top:16px;display:inline-block;background:rgba(184,134,11,.18);color:#f0d9a6;
  border:1px solid rgba(184,134,11,.4);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:700}
.emb-wallhd{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px}
.emb-wallhd h2{margin:0;font-size:21px;font-weight:900;color:var(--navy)}
.emb-wallhd span{color:var(--muted);font-size:13px;margin-inline-start:auto}
.emb-flagwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.emb-ftile{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 12px;
  box-shadow:var(--shadow-sm);transition:.15s;text-decoration:none}
.emb-ftile:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:var(--shadow)}
.emb-fl{width:64px;height:48px;object-fit:cover;border-radius:7px;border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(13,41,102,.18)}
.emb-fn{font-weight:800;color:var(--ink);font-size:14.5px;line-height:1.3}
.emb-fc{font-size:11.5px;font-weight:800;color:#9a6a11;background:#fbf1d8;border-radius:999px;padding:2px 10px}
.emb-fc.none{color:var(--muted);background:transparent;padding:0}
.emb-country{margin-top:30px;scroll-margin-top:80px}
.emb-chd{display:flex;align-items:center;gap:14px;margin-bottom:15px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.emb-flag-lg{width:66px;height:50px;object-fit:cover;border-radius:8px;flex:none;border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(13,41,102,.2)}
.emb-cnm h2{margin:0;font-size:22px;font-weight:900;color:var(--navy)}
.emb-cnm .emb-cen{color:var(--muted);font-size:13px;font-weight:700}
.emb-mcount{margin-inline-start:auto;background:#fbf1d8;color:#9a6a11;font-weight:800;border-radius:999px;
  padding:5px 15px;font-size:13px;white-space:nowrap}
.emb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.emb-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px}
.emb-card.emb{border-inline-start:4px solid var(--navy)}
.emb-card.cons{border-inline-start:4px solid #b8860b}
.emb-chead{display:flex;align-items:flex-start;gap:10px}
.emb-mtype{font-size:11.5px;font-weight:900;border-radius:8px;padding:3px 10px;flex:none}
.emb-mtype.te{background:rgba(13,41,102,.1);color:var(--navy)}
.emb-mtype.tc{background:rgba(184,134,11,.16);color:#9a6a11}
.emb-ctitle{flex:1;min-width:0}
.emb-ctitle h4{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.emb-sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.emb-badge{font-size:11px;font-weight:800;border-radius:999px;padding:4px 10px;white-space:nowrap;align-self:flex-start}
.emb-badge.ok{background:#e3f2e9;color:#1f7a4d}
.emb-badge.warn{background:#fbf0d8;color:#9a6a11}
.emb-contacts{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:12px}
.emb-row{display:flex;gap:9px;align-items:flex-start;font-size:13.5px}
.emb-row .emb-ic{flex:none;width:20px;text-align:center;opacity:.75}
.emb-row .emb-val{min-width:0;word-break:break-word}
.emb-row .emb-zh{color:var(--muted);font-size:13px}
.emb-row a{font-weight:700;color:var(--navy-700)}
.emb-webrow{margin-top:-2px}
.emb-web{display:inline-flex;align-items:center;gap:6px;background:var(--navy-700);color:#fff;font-weight:800;
  font-size:13px;border-radius:10px;padding:8px 14px;text-decoration:none;word-break:break-all}
.emb-web:hover{background:var(--navy)}
.emb-web.alt{background:transparent;color:var(--navy-700);border:1.5px solid var(--navy-700)}
.emb-web.alt:hover{background:rgba(13,41,102,.07)}
.emb-meta{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.emb-chips{display:flex;flex-wrap:wrap;gap:6px}
.emb-chip{background:#f3ecdb;color:#6a5427;border-radius:8px;padding:3px 9px;font-size:11.5px;font-weight:700}
.emb-note{background:rgba(13,41,102,.05);border-inline-start:3px solid var(--navy-700);border-radius:8px;
  padding:9px 12px;font-size:13px;color:var(--muted)}
.emb-verified{font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px;margin-top:auto}
.emb-verified a{font-weight:700;color:var(--navy-700)}
.emb-foot{margin-top:28px;padding:20px;background:#fff;border:1.5px solid var(--line);border-radius:16px;
  font-size:13.5px;color:var(--muted);display:flex;flex-direction:column;gap:12px}
.emb-foot p{margin:0}
@media(max-width:560px){.emb-grid{grid-template-columns:1fr}.emb-flagwall{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}

/* ---- embassy detail page (embassy.php) + add button ---- */
.emb-detail-head{display:flex;align-items:center;gap:16px;margin:6px 0 18px;flex-wrap:wrap}
.emb-flag-xl{width:88px;height:66px;object-fit:cover;border-radius:10px;flex:none;border:1px solid var(--line);box-shadow:0 2px 8px rgba(13,41,102,.18)}
.emb-detail-head h1{margin:0;font-size:24px;font-weight:900;color:var(--navy)}
.emb-detail-sub{color:var(--muted);font-size:13.5px;font-weight:700;margin-top:3px}
.emb-back{margin-inline-start:auto;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:9px 16px;font-weight:800;color:var(--navy);font-size:13.5px;text-decoration:none;white-space:nowrap}
.emb-back:hover{border-color:var(--navy)}
.emb-solo{max-width:640px}
.emb-solo .emb-card{border-inline-start-width:5px}
.emb-cons-block{margin-top:30px}
.emb-cons-h{font-size:20px;font-weight:900;color:var(--navy);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.emb-tablewrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:16px;background:#fff}
.emb-table{width:100%;border-collapse:collapse;min-width:680px;font-size:13.5px}
.emb-table .ec-addr{min-width:260px}
.emb-table .ec-hours{min-width:160px}
.emb-table .ec-city{min-width:140px}
.emb-table tr.ec-main td{border-top:1px solid var(--line)}
.emb-table tr.ec-webrow td{border-top:none;padding-top:0;padding-bottom:14px}
.emb-table tr.ec-webrow .ec-weblbl{font-weight:800;color:var(--muted);font-size:12px;margin-inline-end:6px}
.emb-table tr.ec-webrow .emb-web{padding:7px 13px;font-size:12.5px;white-space:nowrap}
.emb-table thead th{background:var(--navy);color:#fff;font-weight:800;text-align:start;padding:12px 14px;font-size:13px;white-space:nowrap}
.emb-table tbody td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:top}
.emb-table tbody tr:hover{background:var(--soft)}
.emb-table .ec-city b{display:block;color:var(--navy);font-size:14.5px}
.emb-table .ec-dist{display:block;color:var(--muted);font-size:12px;margin:2px 0 4px}
.emb-table .ec-addr span[dir=ltr]{display:block}
.emb-table .ec-addr .emb-zh{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.emb-table .ec-phone a{display:block;font-weight:700;color:var(--navy-700);text-decoration:none;margin-bottom:3px}
.emb-table .ec-phone .ec-mail{font-weight:600;font-size:12.5px}
.emb-table .ec-jur{color:var(--muted);font-size:12px}
.emb-table .ec-web .emb-web{padding:6px 11px;font-size:12px}
.emb-table .emb-badge{margin-top:4px;display:inline-block}
.emb-cons-note{color:var(--muted);font-size:12.5px;margin:12px 2px 0}
.emb-nocons{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;color:var(--muted);font-size:14px;margin-top:20px}
.emb-addbtn{display:flex;align-items:center;gap:14px;margin:18px 0 6px;background:linear-gradient(120deg,#12395f,#0a1f3c);
  color:#fff;border-radius:16px;padding:16px 20px;text-decoration:none;box-shadow:var(--shadow-sm)}
.emb-addbtn:hover{filter:brightness(1.08)}
.emb-addic{font-size:26px;flex:none}
.emb-addtxt{display:flex;flex-direction:column;gap:2px}
.emb-addtxt b{font-size:16px;font-weight:900}
.emb-addtxt span{font-size:12.5px;color:#cdd9ea}
.emb-addgo{margin-inline-start:auto;font-size:20px;font-weight:900}

/* ============ China visa & Chinese missions (china-visa.php) ============ */
.cv-hero{background:linear-gradient(135deg,#a8121a,#6d0d13)}
.cv-empty{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:24px;text-align:center;color:var(--muted);margin-top:18px}
.cv-countrybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0}
.cv-cb-l{font-weight:800;color:var(--navy);font-size:13.5px}
.cv-cb-item{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:6px 14px;font-weight:800;color:var(--navy);font-size:13.5px;text-decoration:none}
.cv-cb-item img{border-radius:3px}
.cv-cb-item:hover{border-color:var(--navy)}
.cv-cb-item.on{background:var(--navy);color:#fff}
.cv-block{margin-top:26px}
.cv-h2{font-size:20px;font-weight:900;color:var(--navy);margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.cv-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.cv-mcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;
  box-shadow:0 2px 8px rgba(18,35,59,.06);display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease}
.cv-mcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,35,59,.13)}
.cv-mcard.is-emb{border-top:3px solid #c0392b}
.cv-mcard.is-con{border-top:3px solid #b8860b}
.cv-mhead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#fbfcfe,#f2f5fb)}
.cv-mcard.is-emb .cv-mhead{background:linear-gradient(135deg,#fdf3f3,#fbe9e9)}
.cv-mcard.is-con .cv-mhead{background:linear-gradient(135deg,#fdf9ee,#faf2da)}
.cv-mhead b{font-size:16.5px;color:var(--navy);font-weight:900}
.cv-mtype{font-size:11px;font-weight:900;border-radius:999px;padding:3px 11px;flex:none}
.cv-mtype.te{background:#f7dcdc;color:#b02a2a}
.cv-mtype.tc{background:#f4e8c8;color:#8a6410}
.cv-mbody{display:flex;flex-direction:column;gap:9px;padding:14px 16px 16px}
.cv-row{font-size:13.5px;color:var(--ink);word-break:break-word;line-height:1.55}
.cv-row a{color:var(--navy-700);font-weight:700;text-decoration:none}
.cv-web{display:inline-flex;align-items:center;gap:6px;background:var(--navy-700);color:#fff;font-weight:800;
  font-size:12.5px;border-radius:9px;padding:8px 14px;text-decoration:none;margin-top:2px;align-self:flex-start;word-break:break-all}
.cv-web:hover{background:var(--navy)}
.cv-center{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);
  border-inline-start:4px solid var(--navy);display:flex;flex-direction:column;gap:8px;max-width:640px}
.cv-center-name b{font-size:17px;color:var(--navy)}
.cv-center-note{margin:6px 0 0;background:rgba(13,41,102,.05);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--muted)}
.cv-types-lead{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.cv-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cv-vcard{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:9px}
.cv-vcard.featured{border-color:#a8121a;border-width:2px;box-shadow:0 6px 20px rgba(168,18,26,.12)}
.cv-vhot{position:absolute;top:-11px;inset-inline-start:16px;background:#a8121a;color:#fff;font-size:11px;font-weight:800;
  border-radius:999px;padding:3px 12px}
.cv-vcode{width:42px;height:42px;border-radius:12px;background:var(--navy);color:#fff;font-weight:900;font-size:19px;
  display:grid;place-items:center}
.cv-vcard.featured .cv-vcode{background:#a8121a}
.cv-vname{margin:0;font-size:16px;font-weight:900;color:var(--ink)}
.cv-vpurpose{margin:0;color:var(--muted);font-size:13px}
.cv-vdocs-h{font-weight:800;color:var(--navy);font-size:12.5px;margin-top:2px}
.cv-vdocs{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.cv-vdocs li{font-size:13px;color:var(--ink)}
.cv-vnote{background:#fbf1d8;color:#9a6a11;border-radius:8px;padding:8px 11px;font-size:12.5px;font-weight:600}
@media(max-width:560px){.cv-mgrid,.cv-vgrid{grid-template-columns:1fr}}

/* ---- embassy detail: university-style two-column extras ---- */
.emb-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.emb-att{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;border-inline-start:4px solid #b8860b}
.emb-att h3{margin:0 0 8px;font-size:16px;font-weight:900;color:var(--navy)}
.emb-att p{margin:0;font-size:13.5px;color:var(--ink);line-height:1.7}
.emb-att-upd{margin-top:10px;font-size:12px;color:var(--muted);font-weight:700}
.emb-slink{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none}
.side-info .emb-slink:first-of-type{border-top:none}
.emb-slink .esl-ic{font-size:20px;flex:none}
.emb-slink .esl-b{flex:1;display:flex;flex-direction:column;min-width:0}
.emb-slink .esl-b b{color:var(--navy);font-size:13.5px}
.emb-slink .esl-b .small{font-size:11px;word-break:break-all}
.emb-slink .esl-go{color:var(--navy-700);font-weight:900}
.emb-slink:hover .esl-b b{text-decoration:underline}
.emb-emerg-cn .eec-l{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:8px}
.emb-emerg-cn .eec-nums{display:flex;gap:8px}
.emb-emerg-cn .eec-nums a{flex:1;text-align:center;background:#fdeaea;border:1px solid #f4c9c9;border-radius:12px;
  padding:8px 4px;text-decoration:none}
.emb-emerg-cn .eec-nums a b{display:block;font-size:19px;font-weight:900;color:#c2151d}
.emb-emerg-cn .eec-nums a span{display:block;font-size:11px;color:var(--muted);font-weight:700}
.emb-emerg-home{margin-top:12px;font-size:12.5px;color:var(--ink);border-top:1px solid var(--line);padding-top:10px}
.emb-emerg-home b{color:#c2151d}
.emb-trip{display:block;text-decoration:none;background:linear-gradient(135deg,#0d7a4a,#0a5c38)}
.emb-trip::before{background:rgba(255,210,122,.28)}
.emb-trip .ac-btn{display:inline-block}

/* ---- guide directory square tiles (replaces horizontal strips) ---- */
.g-dirs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:16px 0}
.g-dir{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
  background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:22px 14px;
  box-shadow:var(--shadow-sm);text-decoration:none;transition:.15s;position:relative;overflow:hidden}
.g-dir::after{content:"";position:absolute;top:-30px;inset-inline-start:-30px;width:90px;height:90px;border-radius:50%;opacity:.12;background:var(--navy)}
.g-dir.dir-cities::after{background:#155e3a}
.g-dir.dir-emb::after{background:#12395f}
.g-dir.dir-visa::after{background:#a8121a}
.g-dir.dir-ex::after{background:#a8560f}
.g-dir:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:var(--shadow);text-decoration:none}
.g-dir .gd-ic{font-size:34px;line-height:1;position:relative}
.g-dir .gd-t{font-size:15px;font-weight:900;color:var(--navy);position:relative}
.g-dir .gd-s{font-size:11.5px;color:var(--muted);font-weight:600;position:relative}

/* ---- china-visa forms (apply via Yalla + tourism partner) ---- */
.cv-form-block{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:22px;margin-top:22px;box-shadow:var(--shadow-sm);border-inline-start:4px solid var(--navy)}
.cv-form-block.cv-partner{border-inline-start-color:#0d7a4a}
.cv-form-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.cv-form-head .cvf-ic{font-size:30px;flex:none}
.cv-form-head h2{margin:0;font-size:19px;font-weight:900;color:var(--navy)}
.cv-form-head p{margin:4px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:60ch}
.cv-form{display:flex;flex-direction:column;gap:14px}
.cv-form .cvf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cv-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800;color:var(--navy)}
.cv-form input,.cv-form select,.cv-form textarea{font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);
  border:1.6px solid var(--field-line);border-radius:11px;padding:12px 13px;background:#fff;width:100%}
.cv-form textarea{min-height:110px;resize:vertical}
.cv-form input:focus,.cv-form select:focus,.cv-form textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(13,41,102,.1)}
.cvf-btn{align-self:flex-start;background:var(--navy);color:#fff;font-weight:900;font-size:14.5px;border:none;
  border-radius:12px;padding:13px 28px;cursor:pointer}
.cvf-btn:hover{background:var(--navy-700)}
.cvf-btn.partner{background:#0d7a4a}.cvf-btn.partner:hover{background:#0a5c38}
@media(max-width:560px){.cv-form .cvf-row{grid-template-columns:1fr}}

/* ---- china-visa: visa-free status banner ---- */
.cv-vfree{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 20px;margin:18px 0;border:1.5px solid}
.cv-vfree .cvf-badge{font-weight:900;font-size:15px;white-space:nowrap;flex:none}
.cv-vfree .cvf-body{display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.cv-vfree .cvf-body b{font-size:15px}
.cv-vfree.free{background:#e4f3ea;border-color:#a9dcbe;color:#12633f}
.cv-vfree.free .cvf-badge{color:#12833f}
.cv-vfree.req{background:#fbf1d8;border-color:#eed9a6;color:#8a6d1f}
.cv-vfree.req .cvf-badge{color:#9a6a11}
.cv-vfree.partial{background:#eaf1fb;border-color:#c3d6f0;color:#1c3f70}

/* ---- china-visa: contact icon CTAs + cross-link ---- */
.cv-ctas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.cv-cta{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:16px;
  padding:18px 20px;text-decoration:none;box-shadow:var(--shadow-sm);transition:.15s;border-inline-start:4px solid var(--navy)}
.cv-cta.partner{border-inline-start-color:#0d7a4a}
.cv-cta:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.cv-cta .cvc-ic{font-size:30px;flex:none}
.cv-cta .cvc-b{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.cv-cta .cvc-b b{font-size:15px;color:var(--navy)}
.cv-cta .cvc-b span{font-size:12px;color:var(--muted);line-height:1.5}
.cv-cta .cvc-go{font-size:20px;font-weight:900;color:var(--navy);flex:none}
.cv-cta.partner .cvc-b b,.cv-cta.partner .cvc-go{color:#0d7a4a}
.cv-crosslink{display:block;margin-top:14px;background:linear-gradient(120deg,#12395f,#0a1f3c);color:#fff;
  border-radius:14px;padding:14px 18px;font-weight:800;font-size:14px;text-decoration:none;text-align:center}
.cv-crosslink:hover{filter:brightness(1.1);text-decoration:none}
@media(max-width:560px){.cv-ctas{grid-template-columns:1fr}}
/* embassy sidebar: discover-China links */
.emb-disc{display:flex;flex-direction:column;gap:2px}
.emb-disc .emb-slink{border-top:1px solid var(--line)}
.emb-disc .emb-slink:first-of-type{border-top:none}

/* ============ Exhibitions directory (exhibitions.php / exhibition.php) ============ */
.ex-hero{background:linear-gradient(135deg,#6d3410,#3f1d08)}
.ex-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0}
.ex-filter .exf-l{font-weight:800;color:var(--navy);font-size:13.5px}
.exf-chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:800;
  color:var(--navy);font-size:13px;cursor:pointer;font-family:inherit}
.exf-chip:hover{border-color:var(--navy)} .exf-chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:6px}
.ex-card{display:flex;gap:14px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px;
  box-shadow:var(--shadow-sm);text-decoration:none;transition:.15s}
.ex-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--navy);text-decoration:none}
.ex-logo{width:74px;height:74px;border-radius:14px;flex:none;display:grid;place-items:center;position:relative;overflow:hidden}
.ex-logo .mono{font-weight:900;color:#fff;font-size:22px;letter-spacing:-.5px}
.ex-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:6px}
.ex-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ex-date{font-size:12px;font-weight:800;color:#a8560f}
.ex-name{margin:0;font-size:15.5px;font-weight:900;color:var(--navy);line-height:1.35}
.ex-meta{font-size:12.5px;color:var(--muted);font-weight:600}
.ex-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.ex-chip{background:#f3ece1;color:#7a5321;border-radius:7px;padding:2px 8px;font-size:11px;font-weight:700}
.ex-chips.big .ex-chip{font-size:12.5px;padding:5px 12px;border-radius:9px}
.ex-more{font-size:12.5px;font-weight:800;color:var(--navy-700);margin-top:4px}
/* detail hero */
.ex-hero2 .uh-main{flex:1;min-width:0}
.ex-hero2 h1{margin:0 0 8px;font-size:24px;font-weight:900;color:var(--navy)}
.ex-crest{border-radius:18px}
.ex-crest .mono{font-size:30px}
.ex-hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.ex-hero-meta .exhm{font-size:14px;font-weight:700;color:var(--ink)}
.ex-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.ex-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:10px 18px;font-weight:800;color:var(--navy);font-size:13.5px;text-decoration:none}
.ex-btn:hover{border-color:var(--navy)} .ex-btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.ex-btn.primary:hover{background:var(--navy-700)}
.ex-venue{background:var(--soft);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.ex-venue .exv-row b{font-size:15px;color:var(--navy)}
.ex-maplink{margin-top:4px;font-weight:800;color:var(--navy-700);text-decoration:none;font-size:13.5px}
.ex-reg-card{display:block;text-decoration:none;background:linear-gradient(135deg,#a8560f,#6d3410)}
.ex-reg-card::before{background:rgba(255,210,122,.3)}
.ex-reg-card .ac-btn{display:inline-block}
/* exhibition detail — Chinese/English hero subtitles */
.ex-hero-zh{font-size:16px;font-weight:800;color:var(--navy-700);margin:-2px 0 4px;letter-spacing:.3px}
.ex-hero-en{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px}
.ex-hero-photo{position:relative;overflow:hidden}
.ex-hero-photo h1,.ex-hero-photo .ex-hero-zh,.ex-hero-photo .ex-hero-meta .exhm{color:#fff}
.ex-hero-photo .ex-hero-en{color:rgba(255,255,255,.82)}
.ex-hero-photo .ex-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.ex-hero-photo .ex-btn.primary{background:#fff;color:var(--navy);border-color:#fff}
/* phases table */
.ex-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin-top:10px}
.ex-phases{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.ex-phases thead th{background:var(--navy);color:#fff;text-align:start;padding:11px 14px;font-size:12.5px;font-weight:800;white-space:nowrap}
.ex-phases tbody td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.ex-phases tbody tr:nth-child(even){background:var(--soft)}
.ex-phases .exp-name b{color:var(--navy);font-size:14px}
.ex-phases .exp-time{font-weight:800;color:var(--navy-700);white-space:nowrap;font-variant-numeric:tabular-nums}
.ex-phases .exp-prod{display:flex;flex-wrap:wrap;gap:6px}
.ex-chip.sm{font-size:11.5px;padding:3px 9px;border-radius:7px}
/* venue Chinese address + transport */
.exv-zh{margin-top:2px}
.exv-tag{display:inline-block;font-size:11px;font-weight:800;color:var(--navy-700);background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-inline-end:4px}
.exv-zh{font-size:14px;color:var(--ink)}
/* inline photo editor (shared with university) */
.pe-logo{position:absolute;inset-inline-end:-6px;inset-block-end:-6px}
.pe-logo-btn,.pe-hero-btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:#fff;border:1.5px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.15);font-size:14px}
.pe-hero{position:absolute;inset-inline-end:14px;inset-block-start:14px}
.pe-note{font-size:12px;color:var(--muted);margin:-4px 0 8px}
.uni-photo{position:relative}
.pe-del{position:absolute;inset-inline-end:6px;inset-block-start:6px;margin:0}
.pe-del button{cursor:pointer;width:26px;height:26px;border-radius:50%;background:rgba(180,20,20,.9);color:#fff;border:0;font-size:13px;line-height:1}
.pe-add{border:2px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;min-height:150px;background:var(--soft)}
.pe-add-in{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--navy-700);font-weight:800;font-size:13px}
.pe-add-in .pe-plus{font-size:28px;line-height:1}
/* how-to-reach — structured directions */
.ex-reach{display:flex;flex-direction:column;gap:12px}
.ex-reach-grp{display:flex;gap:11px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ex-reach-grp .err-ic{font-size:20px;line-height:1.2;flex:none}
.ex-reach-grp .err-body{min-width:0;flex:1}
.ex-reach-grp .err-body>b{display:block;font-size:13px;color:var(--navy);margin-bottom:4px}
.ex-reach-grp .err-body>p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.ex-metro{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ex-metro li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px}
.ex-metro .ex-line{flex:none;background:var(--navy);color:#fff;font-weight:800;font-size:12px;border-radius:7px;padding:3px 10px;white-space:nowrap}
.ex-metro .ex-mst{color:var(--ink)} .ex-metro .ex-mst b{color:var(--navy)}
.ex-metro .ex-mst [lang=zh]{color:var(--navy-700);font-weight:700}
.ex-metro .ex-exit{flex:none;background:#fff;border:1.5px solid var(--navy-700);color:var(--navy-700);font-weight:800;font-size:11.5px;border-radius:7px;padding:2px 9px;white-space:nowrap}
/* mosques directory — green theming, reuses ex-* classes */
.g-dir.dir-mq::after{background:#0d6b4f}
.mq-hero{background:linear-gradient(135deg,#0d6b4f,#083d2c)}
.mq-hero2 .ex-crest.mq-crest{background:#0d6b4f}
.mq-crest .mono{font-size:26px}
.mq-card-zh{font-size:13px;font-weight:800;color:var(--navy-700);margin:2px 0 0;letter-spacing:.3px}
.mq-founded{margin-top:2px;color:var(--muted);font-size:12.5px}
.mq-hero2 .ex-hero-zh{color:#0b6b4f}
.mq-fact{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:8px;font-size:14px}
.mq-fact .mq-fact-l{font-weight:800;color:var(--navy);min-width:90px}
.mq-visit-card{display:block;text-decoration:none;background:linear-gradient(135deg,#0d6b4f,#083d2c)}
.mq-visit-card::before{background:rgba(150,255,210,.28)}
.mq-visit-card .ac-btn{display:inline-block}
/* dual map buttons (Google + Chinese Baidu/Amap) */
.ex-maps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.ex-maps-l{font-size:13px;font-weight:800;color:var(--navy-700)}
.ex-mapbtn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;text-decoration:none;
  border-radius:9px;padding:6px 12px;border:1.5px solid var(--line);background:#fff;color:var(--navy)}
.ex-mapbtn:hover{border-color:var(--navy)}
.ex-mapbtn.g{background:#1a73e8;color:#fff;border-color:#1a73e8}
.ex-mapbtn.g:hover{background:#1666d0}
.ex-mapbtn.cn{background:#0d7d3b;color:#fff;border-color:#0d7d3b}
.ex-mapbtn.cn:hover{background:#0a6531}
.mp-hint{margin:6px 0 0}
/* admin-managed live ad */
.ad-slot-v.ad-live,.ad-slot-h.ad-live{display:block;text-decoration:none;color:inherit;overflow:hidden;padding:0;position:relative}
.ad-slot-v.ad-live .ad-tag,.ad-slot-h.ad-live .ad-tag{position:absolute;inset-block-start:8px;inset-inline-start:8px;z-index:2}
.ad-live-img{display:block;width:100%;height:auto;max-height:230px;object-fit:cover}
.ad-slot-v.ad-live b,.ad-slot-h.ad-live b{display:block;padding:10px 14px 0;font-size:15px;color:var(--navy)}
.ad-slot-v.ad-live span:not(.ad-tag):not(.ad-cta),.ad-slot-h.ad-live span:not(.ad-tag):not(.ad-cta){display:block;padding:4px 14px;font-size:13px;color:var(--ink)}
.ad-slot-v.ad-live .ad-cta,.ad-slot-h.ad-live .ad-cta{margin:8px 14px 14px}
/* admin ad editor */
.ad-admin{margin-top:12px;border:1.5px dashed var(--line);border-radius:12px;background:var(--soft);font-size:13px}
.ad-admin>summary{cursor:pointer;padding:10px 14px;font-weight:800;color:var(--navy-700);list-style:none}
.ad-admin>summary::-webkit-details-marker{display:none}
.ad-admin-form{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.ad-admin-form input[type=text],.ad-admin-form input[type=url]{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;font-family:inherit}
.ad-admin-form .ad-chk{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--ink)}
.ad-admin-form .ad-file{display:flex;flex-direction:column;gap:4px;font-weight:700;color:var(--navy-700);font-size:12.5px}
.ad-cur-img img{max-width:120px;border-radius:8px;border:1px solid var(--line);display:block;margin-bottom:4px}
.ad-admin-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.ad-save{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:9px 18px;font-weight:800;cursor:pointer;font-size:13px}
.ad-clear{background:#fff;color:#b4141e;border:1.5px solid #e3b7ba;border-radius:9px;padding:9px 14px;font-weight:800;cursor:pointer;font-size:12.5px}
.ad-lang-hint{margin:0;padding:0 14px 8px;font-size:11.5px;color:var(--muted);font-weight:600}
.ad-admin-tab{border-top:1px dashed var(--line);padding-top:10px;margin-top:4px}
.ad-admin-tab:first-of-type{border-top:0;padding-top:0;margin-top:0}
.ad-admin-tab h5{margin:0 0 6px;padding:0 14px;font-size:12px;font-weight:800;color:var(--navy-700)}
.ad-tab-live{color:#1a9c53;font-size:10px}
/* elegant mosque illustration (default card/hero graphic) */
.mq-logo,.mq-crest{position:relative;overflow:hidden}
.mq-illus{display:block;width:76%;height:76%;margin:auto;position:absolute;inset:0}
.mq-logo .mq-illus{width:70%;height:70%}
.mq-crest .mq-illus{width:78%;height:78%}
/* mosque list count + pagination */
.mq-count{margin:2px 0 12px}
.mq-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:20px 0 6px}
.mq-pager .mqp-num,.mq-pager .mqp-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:800;font-size:13.5px;text-decoration:none}
.mq-pager .mqp-num.on{background:#0d6b4f;color:#fff;border-color:#0d6b4f}
.mq-pager a.mqp-num:hover,.mq-pager a.mqp-btn:hover{border-color:#0d6b4f}
/* ---- transport guides: airports (✈️ blue) + railway stations (🚆 red) ---- */
.g-dir.dir-ap::after{background:#1f6feb}
.g-dir.dir-rw::after{background:#b1361e}
.ap-hero{background:linear-gradient(135deg,#1f6feb,#0b3f8f)}
.rw-hero{background:linear-gradient(135deg,#b1361e,#7d2213)}
.ap-hero2{background:linear-gradient(135deg,#1f6feb,#0b3f8f)}
.rw-hero2{background:linear-gradient(135deg,#b1361e,#7d2213)}
.tg-logo,.ap-crest,.rw-crest{position:relative;overflow:hidden}
.tg-illus{display:block;width:64%;height:64%;margin:auto;position:absolute;inset:0}
.ex-crest .tg-illus{width:70%;height:70%}
/* code badge on card logo (IATA / 高铁) */
.tg-code{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);background:rgba(0,0,0,.28);
  color:#fff;font-weight:800;font-size:11px;letter-spacing:.6px;padding:1px 8px;border-radius:999px;backdrop-filter:blur(2px)}
.tg-code-lg{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(0,0,0,.25);
  color:#fff;font-weight:900;font-size:13px;letter-spacing:1px;padding:2px 10px;border-radius:999px}
.tg-intl{color:#1f6feb;font-weight:800}
.rw-card .tg-type{color:#b1361e;font-weight:800}
.tg-badge{font-weight:800}
.ap-hero2 .tg-badge,.rw-hero2 .tg-badge{background:rgba(255,255,255,.16);padding:2px 10px;border-radius:999px}
.tg-facts{display:flex;flex-direction:column;gap:8px}
/* airport/station "open on map" side card tints */
.ap-visit-card{background:linear-gradient(135deg,#1f6feb,#0b3f8f);color:#fff}
.rw-visit-card{background:linear-gradient(135deg,#b1361e,#7d2213);color:#fff}
.ap-visit-card .ac-btn,.rw-visit-card .ac-btn{background:rgba(255,255,255,.16);color:#fff}
/* transport fares / buses / taxi cost block */
.tg-fares{display:flex;flex-direction:column;gap:9px}
.tg-fare-row{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;background:#f6f8fb;border:1px solid var(--line);border-radius:11px}
.tg-fare-row .tg-fare-l{flex:0 0 132px;font-weight:800;color:var(--navy);font-size:12.5px}
.tg-fare-row span:last-child{flex:1;line-height:1.55}
/* airport <-> station transfer block */
.tg-xfer-block{border-left:3px solid #6b3fa0}
.tg-xfer-block h2{color:#5a2f96}
/* fix: airport/station detail heroes have a coloured background -> force light text */
.ap-hero2 h1,.rw-hero2 h1,
.ap-hero2 .ex-hero-zh,.rw-hero2 .ex-hero-zh,
.ap-hero2 .ex-hero-meta .exhm,.rw-hero2 .ex-hero-meta .exhm{color:#fff}
.ap-hero2 .ex-hero-en,.rw-hero2 .ex-hero-en{color:rgba(255,255,255,.85)}
.ap-hero2 .ex-crest,.rw-hero2 .ex-crest{box-shadow:0 2px 12px rgba(0,0,0,.18);border:2px solid rgba(255,255,255,.35)}
.ap-hero2 .ex-btn,.rw-hero2 .ex-btn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.ap-hero2 .ex-btn:hover,.rw-hero2 .ex-btn:hover{background:rgba(255,255,255,.28)}
/* ---- refined transport heroes + crest (v2) ---- */
.ap-hero2{background:radial-gradient(135% 150% at 88% -20%,rgba(255,255,255,.22),transparent 55%),linear-gradient(135deg,#2f6bed 0%,#173a92 100%)}
.rw-hero2{background:radial-gradient(135% 150% at 88% -20%,rgba(255,255,255,.20),transparent 55%),linear-gradient(135deg,#c8415a 0%,#7a1a30 100%)}
/* list-card icon stays white on its coloured tile */
.tg-logo{color:#fff}
/* detail crest becomes a clean white badge with the theme-coloured glyph */
.ap-crest,.rw-crest{background:#fff !important}
.ap-crest{color:#2456d8}
.rw-crest{color:#b8324c}
.ap-hero2 .ex-crest,.rw-hero2 .ex-crest{box-shadow:0 6px 22px rgba(0,0,0,.24);border:none;border-radius:16px}
.ap-hero2 .tg-code-lg,.rw-hero2 .tg-code-lg{background:rgba(15,23,42,.55);color:#fff}
/* hero list-page tint refresh to match */
.ap-hero{background:radial-gradient(120% 160% at 90% -30%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,#2f6bed,#173a92)}
.rw-hero{background:radial-gradient(120% 160% at 90% -30%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,#c8415a,#7a1a30)}
/* ---- two-level province -> city filter ---- */
.tg-provfilter{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.tgpf-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tgpf-row .exf-l{font-weight:800;color:var(--navy);font-size:13px;margin-inline-end:2px}
.tgpf-row .exf-chip.pv{font-weight:800;border-color:#c9d4e5;background:#f4f7fc}
.tgpf-row .exf-chip.pv.on{background:#0d6b4f;color:#fff;border-color:#0d6b4f}
.tgpf-row .exf-chip .tgpf-n{display:inline-block;margin-inline-start:6px;font-size:11px;font-weight:800;
  background:rgba(0,0,0,.08);color:inherit;border-radius:999px;padding:0 6px;line-height:17px;vertical-align:middle}
.tgpf-row .exf-chip.pv.on .tgpf-n{background:rgba(255,255,255,.25)}
.tgpf-city{padding:10px;background:#f6f8fb;border:1px solid var(--line);border-radius:12px}
.tgpf-city .exf-chip.on{background:#0d6b4f;color:#fff;border-color:#0d6b4f}

/* Long-tail city filter (e.g. restaurants.php, 200+ cities): the busiest
   cities show up front, the rest collapse behind a pure-CSS "+N more"
   toggle so the row reads as navigation, not a wall of pills. */
.res-city-hidden{display:none}
.res-more-chk{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.res-more-chk:checked ~ .res-city-hidden{display:inline-flex}
.res-more-btn{display:inline-flex;align-items:center;gap:4px;background:#f4f7fc;border-style:dashed}
.res-more-btn .lbl-less{display:none}
.res-more-chk:checked ~ .res-more-btn{background:var(--navy);color:#fff;border-color:var(--navy);border-style:solid}
.res-more-chk:checked ~ .res-more-btn .lbl-more{display:none}
.res-more-chk:checked ~ .res-more-btn .lbl-less{display:inline}
.res-more-chk:focus-visible ~ .res-more-btn{outline:2px solid var(--navy);outline-offset:2px}
/* ================= metro guide + planner ================= */
.mt-hero{background:radial-gradient(130% 150% at 88% -20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,#4b2fb0,#2a1667)}
.g-dir.dir-mt::after{background:#4b2fb0}
.mt-logo{color:#fff}
.mt-czh,.mt-hzh{font-size:.8em;opacity:.8;font-weight:700}
.mt-cstat{margin-top:2px}
/* journey planner */
.mt-planner{margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#faf9ff,#fff)}
.mt-planner h2{margin:0 0 4px;font-size:19px}
.mtp-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.mtp-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:200px}
.mtp-field span{font-weight:800;font-size:12.5px;color:var(--navy)}
.mtp-field input{padding:11px 12px;border:1.5px solid var(--line);border-radius:11px;font-size:14px;font-family:inherit;background:#fff}
.mtp-field input:focus{outline:none;border-color:#4b2fb0}
.mtp-swap{align-self:flex-end;height:44px;width:44px;border:1.5px solid var(--line);background:#fff;border-radius:11px;font-size:18px;cursor:pointer;font-weight:800}
.mtp-swap:hover{border-color:#4b2fb0;color:#4b2fb0}
.mtp-go{align-self:flex-end;height:44px;padding:0 22px;border:none;background:#4b2fb0;color:#fff;border-radius:11px;font-weight:800;font-size:14.5px;cursor:pointer}
.mtp-go:hover{background:#3a2390}
.mtp-results{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.mtp-msg{padding:12px;background:#fff4f4;border:1px solid #f2c9c9;border-radius:10px;color:#b4141e;font-weight:700}
.mtp-route{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff}
.mtp-rhead{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:11px 14px;background:#f4f1fb;border-bottom:1px solid var(--line)}
.mtp-rlabel{font-weight:900;color:#3a2390}
.mtp-rmeta{font-weight:700;font-size:13px;color:var(--navy)}
.mtp-steps{list-style:none;margin:0;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.mtp-steps li{font-size:13.5px;line-height:1.5;padding:3px 0}
.mtp-board,.mtp-transfer,.mtp-arrive{font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mtp-ride{color:var(--muted);font-size:12.5px;padding-inline-start:20px;position:relative}
.mtp-ride::before{content:"";position:absolute;inset-inline-start:8px;top:0;bottom:0;width:3px;background:var(--lc,#4b2fb0);border-radius:2px}
.mt-lbadge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 7px;border-radius:7px;color:#fff;font-weight:900;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.mt-lbadge.sm{min-width:22px;height:20px;font-size:11px;border-radius:6px}
/* lines & stations */
.mt-lines{margin-top:20px}
.mt-line{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
.mt-line>summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-weight:800;list-style:none}
.mt-line>summary::-webkit-details-marker{display:none}
.mt-line>summary::after{content:"▾";margin-inline-start:auto;color:var(--muted);transition:transform .2s}
.mt-line[open]>summary::after{transform:rotate(180deg)}
.mt-lname{font-size:14.5px}
.mt-stlist{list-style:none;margin:0;padding:6px 16px 14px;counter-reset:st}
.mt-st{position:relative;padding:7px 0 7px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mt-st::before{content:"";position:absolute;inset-inline-start:6px;top:0;bottom:0;width:3px;background:var(--lc,#888)}
.mt-sdot{position:absolute;inset-inline-start:2px;top:14px;width:11px;height:11px;border-radius:50%;background:#fff;border:3px solid var(--lc,#888)}
.mt-sname{font-size:13.5px}.mt-sname [lang=zh]{color:var(--muted);font-size:12.5px}
.mt-st.has-lm{background:#fbfaff;border-radius:8px}
.mt-lm{display:inline-flex;align-items:center;gap:9px;margin-inline-start:6px;padding:4px 10px 4px 4px;background:#efe9fb;border:1px solid #ddd2f5;border-radius:999px}
.mt-lm-thumb{width:30px;height:30px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:#fff;font-size:16px;flex:none}
.mt-lm-thumb img{width:100%;height:100%;object-fit:cover}
.mt-lm-body{display:flex;flex-direction:column;line-height:1.3}
.mt-lm-body b{font-size:12.5px;color:#3a2390}
.mt-lm-note{font-size:11.5px;color:var(--muted)}
@media (max-width:640px){.mtp-field{min-width:100%}.mtp-swap{transform:rotate(90deg)}}
/* ================= hospitals + medical phrasebook ================= */
.hp-hero{background:radial-gradient(130% 150% at 88% -20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,#1f9d8f,#0c5d54)}
.hp-hero2{background:radial-gradient(135% 150% at 88% -20%,rgba(255,255,255,.2),transparent 55%),linear-gradient(135deg,#1f9d8f,#0c5d54)}
.g-dir.dir-hp::after{background:#1f9d8f}
.hp-logo{color:#e23b4e}
.hp-crest{background:#fff !important;color:#e23b4e}
.hp-hero2 .ex-crest{box-shadow:0 6px 22px rgba(0,0,0,.24)}
.hp-hero2 h1,.hp-hero2 .ex-hero-zh,.hp-hero2 .ex-hero-meta .exhm{color:#fff}
.hp-hero2 .ex-hero-en{color:rgba(255,255,255,.85)}
.hp-hero2 .ex-btn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.hp-intl{color:#1f9d8f;font-weight:800}
.hp-visit-card{background:linear-gradient(135deg,#1f9d8f,#0c5d54);color:#fff}
.hp-visit-card .ac-btn{background:rgba(255,255,255,.16);color:#fff}
.hp-listh{margin:22px 0 6px}
/* phrasebook */
.med-phrases{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#f2fbf9,#fff)}
.med-head{margin-bottom:12px}
.med-phrases h2{margin:0 0 3px;font-size:19px}
.med-sub{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.med-cats{display:flex;flex-direction:column;gap:8px}
.med-cat{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.med-cat>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;font-weight:800;font-size:14.5px;list-style:none;background:#eafaf7;transition:background .15s}
.med-cat>summary:hover{background:#dff5f1}
.med-cat[open]>summary{background:#e0f4f0;border-bottom:1px solid var(--line)}
.med-cat>summary::-webkit-details-marker{display:none}
.med-cat .mc-t{flex:1;min-width:0}
.med-cat .mc-meta{display:flex;align-items:center;gap:8px;flex:none}
.med-cat .mc-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#1f9d8f;color:#fff;font-size:12px;font-weight:800}
.med-cat .mc-chev{color:#1f9d8f;font-size:13px;transition:transform .2s}
.med-cat[open] .mc-chev{transform:rotate(180deg)}
.med-list{padding:4px 12px 10px}
.med-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:1px dashed var(--line)}
.med-row:last-child{border-bottom:none}
.med-src{flex:1;min-width:180px;font-weight:600;font-size:14px}
.med-zh{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;justify-content:flex-end}
.med-zh span{font-size:15px;font-weight:700;color:#0c5d54}
.med-copy{border:1.5px solid var(--line);background:#fff;border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:15px;flex:none}
.med-copy:hover{border-color:#1f9d8f;color:#1f9d8f}
.med-emerg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;padding:12px;background:#fff4f4;border:1px solid #f2c9c9;border-radius:12px}
.med-emerg-l{font-weight:800;font-size:13.5px;color:#b4141e}
.med-nums{display:flex;flex-wrap:wrap;gap:8px}
.med-num{display:flex;flex-direction:column;align-items:center;min-width:84px;padding:8px 12px;background:#fff;border:1.5px solid #e3b7ba;border-radius:11px;text-decoration:none}
.med-num .mn-n{font-size:20px;font-weight:900;color:#b4141e}
.med-num .mn-l{font-size:11px;color:var(--muted);font-weight:700}
.med-ins{margin-top:12px;margin-bottom:0;font-size:12.5px;color:var(--muted);line-height:1.6;background:#f6f8fb;padding:10px 12px;border-radius:10px}

/* ============ Wholesale markets ============ */
.mk-hero{background:radial-gradient(130% 150% at 88% -20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,#e0761b,#a8410a)}
.mk-hero2{background:radial-gradient(135% 150% at 88% -20%,rgba(255,255,255,.2),transparent 55%),linear-gradient(135deg,#e0761b,#a8410a)}
.g-dir.dir-mk::after{background:#e0761b}
.mk-logo{color:#e0761b}
.mk-logo .mk-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#eef1f6;padding:0}
.mk-crest{background:#fff !important;color:#e0761b}
.mk-hero2 .ex-crest{box-shadow:0 6px 22px rgba(0,0,0,.24)}
.mk-hero2 h1,.mk-hero2 .ex-hero-zh,.mk-hero2 .ex-hero-meta .exhm{color:#fff}
.mk-hero2 .ex-hero-en{color:rgba(255,255,255,.85)}
.mk-hero2 .ex-btn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.mk-hero2 .tg-badge{background:rgba(255,255,255,.2);color:#fff}
/* category chips */
.mk-catbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.mk-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:700;color:var(--navy);text-decoration:none;transition:all .15s}
.mk-chip:hover{border-color:#e0761b;color:#a8410a}
.mk-chip.on{background:#e0761b;border-color:#e0761b;color:#fff}
/* cards */
.mk-catpill{font-weight:700;color:#a8410a}
.mk-cardsub{font-size:13px;color:var(--muted);margin-top:3px}
.mk-cardshops{margin-top:6px;font-size:12.5px;font-weight:800;color:#a8410a}
/* facts / detail */
.mk-tips{background:linear-gradient(180deg,#fff7ee,#fff);border:1px solid #f2ddc2;border-radius:14px;padding:14px}
.mk-mapimg{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mk-mapimg img{display:block;width:100%;height:auto}
.mk-shopn{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:#e0761b;color:#fff;font-size:12px;font-weight:800;vertical-align:middle}
.mk-shops{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px}
.mk-shop{border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fff}
.mks-h{font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px}
/* Featured (¥99) shop listings: gold frame + crown, sorted to the top of the
   market's shop list by market_shops(). The frame IS the product — it has to
   read as premium next to a plain ¥49 listing without shouting. */
.mk-shop.mks-gold{position:relative;border:2px solid #e0b64a;background:linear-gradient(160deg,#fffdf5,#fff);box-shadow:0 6px 18px rgba(224,182,74,.18)}
.mk-shop.mks-gold .mks-crown{position:absolute;inset-block-start:-10px;inset-inline-start:12px;background:linear-gradient(135deg,#e0b64a,#c9992e);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 10px;box-shadow:0 3px 8px rgba(201,153,46,.35);white-space:nowrap}
.mk-shop.mks-gold .mks-h b{color:#8a6d1f}
.mkj-tiers{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mkj-tier{display:inline-flex;align-items:baseline;gap:6px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:5px 13px}
.mkj-tier b{font-size:15px;font-weight:800}
.mkj-tier i{font-style:normal;font-size:12px;opacity:.9}
.mkj-tier.gold{background:linear-gradient(135deg,#e0b64a,#c9992e);border-color:#e0b64a;color:#fff}
.mks-v{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#1f9d8f;color:#fff;font-size:11px;font-weight:900}
.mks-zh{font-size:13px;color:#a8410a;font-weight:700}
.mks-p{font-size:13px;color:var(--muted);margin-top:4px}
.mks-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12.5px;font-weight:700}
.mks-meta a{color:#a8410a;text-decoration:none}
/* join CTA */
.mk-joincta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:18px 0;padding:18px 20px;border-radius:16px;background:linear-gradient(135deg,#e0761b,#a8410a);color:#fff}
.mk-joincta .mkj-body{flex:1;min-width:230px}
.mk-joincta h3{margin:0 0 4px;font-size:18px;color:#fff}
.mk-joincta p{margin:0;font-size:13.5px;color:rgba(255,255,255,.9);line-height:1.5}
.mk-joincta .mkj-price{margin-top:8px;font-size:15px}
.mkj-btn{flex:none;background:#fff;color:#a8410a;font-weight:800;padding:12px 22px;border-radius:12px;text-decoration:none;font-size:15px;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.mkj-btn:hover{transform:translateY(-1px)}
/* join page plan card */
.mk-joincard .mk-plan{border:1.5px solid #f2ddc2;background:linear-gradient(180deg,#fff7ee,#fff);border-radius:14px;padding:16px;margin:12px 0 16px}
.mk-plan .mkp-price{display:flex;align-items:baseline;gap:6px}
.mk-plan .mkp-n{font-size:34px;font-weight:900;color:#a8410a}
.mk-plan .mkp-per{font-size:14px;color:var(--muted);font-weight:700}
.mk-plan .mkp-feats{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.mk-plan .mkp-feats li{font-size:13.5px;font-weight:600;color:var(--navy)}
/* Two selectable plans. The radio is visually hidden; the whole card is the
   control, and :has() on the wrapper lights up whichever one is picked. */
.mk-plans{margin:12px 0 16px}
.mk-plans .mk-plan{display:block;cursor:pointer;margin:0 0 10px}
.mk-plans .mk-plan>input{position:absolute;opacity:0;width:0;height:0}
.mk-plans .mkp-pick{display:flex;flex-direction:column;gap:3px}
.mk-plans .mkp-name{font-size:13.5px;font-weight:800;color:var(--navy)}
.mk-plans .mkp-sub{font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.6}
.mk-plans .mk-plan:has(>input:checked){border-color:#0b6e4f;box-shadow:0 0 0 3px #0b6e4f22}
.mk-plans .mk-plan.mkp-featured{border-color:#e0b64a;background:linear-gradient(180deg,#fffdf5,#fff)}
.mk-plans .mk-plan.mkp-featured:has(>input:checked){border-color:#c9992e;box-shadow:0 0 0 3px rgba(201,153,46,.22)}
.mk-plans .mk-plan.mkp-featured .mkp-name{color:#8a6d1f}
.mk-plans .mkp-feats{margin-top:6px}
.mk-jointo{font-size:13.5px;background:#fff7ee;border:1px solid #f2ddc2;border-radius:10px;padding:9px 12px}
/* market photo album — branded cover + self-hosted gallery + inline admin edit */
.mk-cover{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/7;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.mk-cover-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-cover-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:18px 20px;color:#fff;background:linear-gradient(0deg,rgba(6,14,34,.55),rgba(6,14,34,.05) 55%,transparent)}
.mk-cover-cat{align-self:flex-start;font-size:12px;font-weight:800;background:rgba(255,255,255,.2);backdrop-filter:blur(3px);padding:4px 12px;border-radius:30px}
.mk-cover-name{font-size:22px;font-weight:900;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.mk-cover-city,.mk-cover-shops{font-size:13px;font-weight:700;opacity:.95}
.mk-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.mk-photo{position:relative;margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:#f3f4f6}
.mk-photo img{width:100%;height:100%;object-fit:cover;transition:transform .25s;cursor:zoom-in}
.mk-photo img:hover{transform:scale(1.05)}
.mk-album-empty{margin-top:4px}
/* admin inline controls (shown only to admins) */
.mk-album .pe-note{background:#fff8e1;border:1px solid #ffe3a3;color:#8a5a00;font-size:13px;font-weight:700;padding:9px 13px;border-radius:10px;margin:2px 0 14px}
.mk-photo .pe-del{position:absolute;top:6px;inset-inline-end:6px;margin:0;z-index:3}
.mk-photo .pe-del button{width:26px;height:26px;border-radius:50%;border:none;background:rgba(232,32,42,.92);color:#fff;font-size:13px;font-weight:900;cursor:pointer;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mk-photo .pe-del button:hover{background:#c2151d}
.mk-photo.pe-add{display:flex;align-items:center;justify-content:center;border:2px dashed #c9d3e6;background:#f7f9fd;aspect-ratio:4/3}
.mk-photo.pe-add:hover{border-color:var(--red,#c2151d);background:#fff}
.mk-photo .pe-add-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;cursor:pointer;color:#5566aa;font-weight:800;font-size:13px;padding:16px;text-align:center}
.mk-photo .pe-add-in .pe-plus{font-size:30px;line-height:1}
/* Bulk select. The tick sits opposite the ✕ so the two are never mis-hit, and
   the bar's delete button stays disabled-looking until something is picked. */
.pe-bulk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.peb-all{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--navy-700);cursor:pointer}
.peb-all input{width:16px;height:16px;cursor:pointer}
.peb-go{border:none;border-radius:9px;padding:7px 14px;font-size:13px;font-weight:800;cursor:pointer;background:#e6e9f2;color:#7c86a0}
.pe-bulk.has-picks .peb-go{background:#e8202a;color:#fff}
.pe-bulk.has-picks .peb-go:hover{background:#c2151d}
/* Bottom-start is the one free corner: ✕ and ⭐ hold the top inline-end, the
   ⭐-primary badge holds the top inline-start, and the credit link only appears
   on hover along the bottom edge. */
.mk-photo .pe-pick{position:absolute;bottom:6px;inset-inline-start:6px;z-index:4;margin:0;display:block;cursor:pointer}
.mk-photo .pe-pick input{width:22px;height:22px;cursor:pointer;accent-color:#e8202a;
  border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.35);background:rgba(255,255,255,.9)}
.mk-photo:has(.pe-pick input:checked){outline:3px solid #e8202a;outline-offset:-3px}
@media(max-width:560px){.mk-photo-grid{grid-template-columns:1fr 1fr;gap:9px}.mk-cover-name{font-size:18px}.mk-cover{aspect-ratio:16/9}}

/* guide directory tiles — consistent circular icon badges (per-tile accent) */
.g-dir{--gd:#12395f}
.g-dir.dir-cities{--gd:#155e3a}
.g-dir.dir-emb{--gd:#12395f}
.g-dir.dir-visa{--gd:#a8121a}
.g-dir.dir-ex{--gd:#a8560f}
.g-dir.dir-mq{--gd:#0d6b4f}
.g-dir.dir-ap{--gd:#1f6feb}
.g-dir.dir-rw{--gd:#b1361e}
.g-dir.dir-mt{--gd:#4b2fb0}
.g-dir.dir-hp{--gd:#1f9d8f}
.g-dir.dir-mk{--gd:#e0761b}
.g-dir .gd-ic{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  font-size:30px;margin-bottom:4px;background:#eef2f7;
  background:color-mix(in srgb,var(--gd) 13%,#fff);
  box-shadow:inset 0 0 0 1.6px color-mix(in srgb,var(--gd) 26%,#fff)}
.g-dir:hover .gd-ic{background:color-mix(in srgb,var(--gd) 20%,#fff)}
.g-dir:hover{border-color:var(--gd)}
/* guide services band (below tiles) */
.g-services{margin:20px 0 6px}
.g-services .apply-card{max-width:560px;margin-inline:auto}

/* mobile drawer language switch + compact topbar */
.mm-lang{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.mm-lang a{flex:1;text-align:center;padding:9px 4px;border:1.5px solid var(--line);border-radius:10px;font-weight:800;font-size:12.5px;color:var(--navy);text-decoration:none;transition:.15s}
.mm-lang a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.mm-lang a:hover{border-color:var(--navy)}
@media(max-width:820px){.topbar .tb-btn b{display:none}.topbar .wrap{gap:8px}.lang-switch{gap:2px}}

/* currency converter: source-currency selector */
.cy-calc{flex-wrap:wrap}
.cy-calc input{width:88px;flex:0 0 auto}
.cy-calc select{flex:1;min-width:96px;border:1.5px solid var(--line);border-radius:9px;padding:8px 8px;font-family:inherit;font-size:13px;font-weight:800;color:var(--navy);background:#fff;outline:none;cursor:pointer}
.cy-calc select:focus{border-color:var(--navy)}

/* guide directory — professional polish */
.g-dirs{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.g-dir{min-height:158px;justify-content:center;padding:24px 16px 22px;border-radius:20px}
.g-dir::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gd);transform:scaleX(0);transform-origin:center;transition:transform .18s}
.g-dir:hover::before{transform:scaleX(1)}
.g-dir:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(18,35,59,.15)}
.g-dir .gd-t{font-size:15.5px}
.g-dir .gd-s{max-width:22ch;line-height:1.45;margin-top:1px}

/* ===== Banks directory ===== */
.bk-hero{background:linear-gradient(135deg,#0d2966,#123a86 55%,#0a7d6b)}
.bk-group{margin-top:28px}
.bk-group:first-of-type{margin-top:18px}
.bk-group-h{font-size:18px;font-weight:900;color:var(--navy);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:12px}
.bk-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;color:inherit;transition:.16s;box-shadow:var(--shadow-sm);position:relative}
.bk-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cdd7ea}
.bk-logo{width:80px;height:80px;flex:none}
.bk-logo-svg{width:100%;height:100%;display:block}
.bk-cbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bk-type{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.bk-name{font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.25}
.bk-zh{font-size:13px;color:var(--muted);font-weight:600}
.bk-en{font-size:11.5px;color:#9aa4bb}
.bk-tag{font-size:12.5px;color:var(--ink);margin-top:3px}
.bk-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.bk-badge{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:30px;background:var(--soft);color:var(--navy-700)}
.bk-badge.up{background:#eaf2ff;color:#1a56c4}
.bk-badge.vm{background:#fff3e0;color:#c26a00}
.bk-badge.en{background:#e7f7ee;color:#1a7d4d}
.bk-more{position:absolute;inset-inline-end:14px;bottom:12px;font-size:12px;font-weight:800;color:var(--red)}
/* bank detail */
.bk-hero2 .uh-wrap{display:flex;gap:18px;align-items:center}
.bk-crest{width:92px;height:92px;flex:none}
.bk-crest .bk-logo-svg{width:100%;height:100%}
.bk-hero-tag{margin-top:8px;font-size:14px;color:var(--navy-700);font-weight:700;background:var(--soft);display:inline-block;padding:6px 14px;border-radius:30px}
.bk-foreign{background:linear-gradient(180deg,#f3faf6,#fff);border:1px solid #cfeadd}
.bk-svc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bk-svc li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink)}
.bk-svc-i{flex:none;width:22px;height:22px;border-radius:50%;background:#e7f7ee;color:#1a7d4d;font-weight:900;font-size:12px;display:grid;place-items:center;margin-top:1px}
.g-dir.dir-bank{--gd:#0e7d6b}
.g-dir.dir-bank::after{background:#0e7d6b}

/* ===== Sports clubs directory ===== */
.cl-hero{background:linear-gradient(135deg,#7a0f1a,#b3121f 55%,#e0761b)}
.cl-league{margin-top:22px}
.cl-league-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:20px;color:var(--navy);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.cl-season{font-size:12px;font-weight:800;color:#fff;background:var(--red);padding:3px 12px;border-radius:30px}
.cl-standings-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin-bottom:16px;background:#fff}
.cl-standings{width:100%;border-collapse:collapse;font-size:14px;min-width:340px}
.cl-standings th{text-align:start;padding:10px 14px;background:var(--soft);font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.cl-standings td{padding:9px 14px;border-top:1px solid var(--line);vertical-align:middle}
.cl-standings td a{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--navy)}
.cls-crest{width:26px;height:28px;flex:none;display:inline-block}
.cls-crest svg{width:100%;height:100%;display:block}
.cls-rank{font-weight:900;color:var(--navy-700);font-variant-numeric:tabular-nums;white-space:nowrap}
.cls-rank.champ{color:#c99700}
.cls-city{color:var(--muted)}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px}
.cl-card{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;text-decoration:none;color:inherit;transition:.16s;box-shadow:var(--shadow-sm);position:relative}
.cl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#e6ccc2}
.cl-crest{width:56px;height:58px;flex:none}
.cl-crest svg,.cl-crest-lg svg{width:100%;height:100%;display:block}
.cl-cbody{flex:1;min-width:0}
.cl-name{font-size:15px;font-weight:800;color:var(--navy);line-height:1.2}
.cl-zh{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:1px}
.cl-meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.cl-venue{font-size:12px;color:#9aa4bb;margin-top:1px}
.cl-rankbadge{position:absolute;top:10px;inset-inline-end:10px;font-size:11px;font-weight:900;color:var(--navy-700);background:var(--soft);border-radius:30px;padding:2px 8px;font-variant-numeric:tabular-nums}
.cl-rankbadge.champ{background:#fff6d8;color:#c99700}
/* club detail */
.cl-hero2 .uh-wrap{display:flex;gap:18px;align-items:center}
.cl-crest-lg{width:96px;height:100px;flex:none}
.cl-hero-nick{margin-top:8px;font-style:italic;color:var(--navy-700);font-size:14.5px}
.g-dir.dir-club{--gd:#b3121f}
.g-dir.dir-club::after{background:#b3121f}
@media(max-width:560px){.bk-grid,.cl-grid{grid-template-columns:1fr}.bk-hero2 .uh-wrap,.cl-hero2 .uh-wrap{flex-direction:column;text-align:center;align-items:center}}

/* Bank / club real logos (uploaded) — shown on a clean white tile so uploaded
   logos of any shape look uniform; plus the admin ✎ logo-upload control. */
.bk-logo-real,.cl-logo-real{display:block;width:100%;height:100%;border-radius:18px;background:#fff;border:1px solid var(--line);overflow:hidden}
.bk-logo-real img,.cl-logo-real img{width:100%;height:100%;object-fit:contain;padding:9px;display:block}
.bk-crest,.cl-crest-lg{position:relative}
.pe-logo{position:absolute;bottom:-6px;inset-inline-start:-6px;margin:0}
.pe-logo-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--red,#c2151d);color:#fff;font-size:14px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);border:2px solid #fff}
.pe-logo-btn:hover{background:#a10f18}

/* real (uploaded/self-hosted) bank & club logos + admin logo-edit button */
.bk-logo-real,.cl-logo-real{display:block;width:100%;height:100%}
.bk-logo-real img,.cl-logo-real img{width:100%;height:100%;object-fit:contain;display:block}
.bk-crest,.cl-crest-lg{position:relative}
.pe-logo{position:absolute;bottom:-6px;inset-inline-end:-6px;margin:0}
.pe-logo-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--red,#c2151d);color:#fff;font-size:14px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);border:2px solid #fff}
.pe-logo-btn:hover{background:#a5121a}

/* bank branch directory */
.bk-br-lead{margin:2px 0 12px}
.bk-brfilter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.bk-brfilter .mtp-field{min-width:180px}
.bk-brfilter select{padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;background:#fff}
.bk-brresults{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.bk-brcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm)}
.bk-brname{font-size:15px;font-weight:800;color:var(--navy)}
.bk-braddr{font-size:13.5px;color:var(--ink)}
.bk-braddrzh{font-size:12.5px;color:var(--muted)}
.bk-braddrzh .exv-tag{background:var(--soft);border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700}
.bk-brmeta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--navy-700);font-weight:600}
.bk-brnote{background:#fff8e1;border:1px solid #ffe3a3;color:#8a5a00;font-size:13px;font-weight:600;padding:10px 13px;border-radius:10px;margin-bottom:8px}
.bk-braddwrap{margin-top:14px;border:1px dashed var(--line);border-radius:12px;padding:6px 12px}
.bk-braddwrap summary{cursor:pointer;font-weight:800;color:var(--navy-700);font-size:13.5px;padding:6px 0}
.bk-brgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.bk-brgrid label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--navy-700)}
.bk-brgrid input,.bk-brgrid select{padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:13.5px}
.bk-braddbtn{align-self:flex-start}
@media(max-width:560px){.bk-brgrid{grid-template-columns:1fr}}

/* ===== Schools directory ===== */
.sch-hero{background:linear-gradient(135deg,#0e5a3a,#1a7d4d 55%,#0d2966)}
.sch-logo .sc-logo-svg{width:100%;height:100%;display:block}
.sc-logo-real{display:block;width:100%;height:100%}
.sc-logo-real img{width:100%;height:100%;object-fit:contain;display:block}
.sch-card .bk-logo{width:60px;height:62px}
.sch-hero2 .uh-wrap{display:flex;gap:18px;align-items:center}
.sc-crest-lg{width:92px;height:96px;flex:none;position:relative}
.sc-crest-lg svg{width:100%;height:100%;display:block}
.sch-promo{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#0e5a3a,#1a7d4d);color:#fff;border-radius:16px;padding:16px 20px;margin-top:14px;text-decoration:none;box-shadow:var(--shadow-sm)}
.sch-promo-ic{font-size:26px}
.sch-promo-t{flex:1;display:flex;flex-direction:column;line-height:1.35}
.sch-promo-t b{font-size:15px}.sch-promo-t span{font-size:12.5px;opacity:.92}
.sch-promo-go{background:rgba(255,255,255,.2);border-radius:30px;padding:8px 16px;font-weight:800;font-size:13px;white-space:nowrap}
.sch-tuition-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.sch-tuition{width:100%;border-collapse:collapse;font-size:14px;min-width:280px}
.sch-tuition th{text-align:start;padding:10px 14px;background:var(--soft);font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.sch-tuition td{padding:10px 14px;border-top:1px solid var(--line)}
.sch-fee{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.sch-joincta{background:linear-gradient(120deg,#0e5a3a,#1a7d4d)}
.g-dir.dir-sch{--gd:#1a7d4d}
.g-dir.dir-sch::after{background:#1a7d4d}

/* clubs league header clarity */
.cl-league-head{display:flex;align-items:center;gap:14px;margin:26px 0 14px;padding:14px 18px;border-radius:16px;background:linear-gradient(120deg,#0d2966,#1c47a0);color:#fff;box-shadow:var(--shadow-sm)}
.cl-league-football{}
.cl-league-basketball .cl-league-head{background:linear-gradient(120deg,#b3121f,#e0761b)}
.cl-league-badge{width:52px;height:52px;flex:none;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:28px}
.cl-league-htxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cl-league-head .cl-league-h{font-size:20px;font-weight:900;margin:0;border:none;padding:0;color:#fff}
.cl-league-desc{font-size:12.5px;opacity:.92;margin:0}
.cl-standings-cap{font-size:13px;font-weight:800;color:var(--navy-700);margin:4px 0 8px;display:flex;align-items:center;gap:6px}

/* schools/banks card: keep "details" from overlapping the badges */
.bk-card{padding-bottom:34px}
.sch-card .bk-badges{margin-bottom:2px}

/* login: stay-signed-in checkbox */
.af-remember{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--navy-700);font-weight:600;cursor:pointer;margin:2px 0}
.af-remember input{width:16px;height:16px;accent-color:var(--red,#c2151d);cursor:pointer}

/* ===== Attractions directory ===== */
.at-hero{background:linear-gradient(135deg,#0e5a3a,#0e7490 55%,#8a5a1a)}
.at-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.at-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:.16s;box-shadow:var(--shadow-sm)}
.at-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.at-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef1f6}
.at-cover-img{width:100%;height:100%;object-fit:cover}
.at-cover .mk-cover-svg{position:absolute;inset:0;width:100%;height:100%}
.at-cat{position:absolute;top:8px;inset-inline-start:8px;font-size:11px;font-weight:800;color:#fff;background:rgba(10,20,45,.5);backdrop-filter:blur(3px);padding:3px 10px;border-radius:30px}
.at-body{padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.at-meta{font-size:12px;color:var(--muted);font-weight:600}
.at-name{font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.25}
.at-zh{font-size:12.5px;color:var(--muted)}
.at-fee{font-size:12.5px;color:var(--navy-700);font-weight:700;margin-top:2px}
.at-crest{font-size:44px;background:var(--soft)}
.g-dir.dir-at{--gd:#0e7490}
.g-dir.dir-at::after{background:#0e7490}
@media(max-width:560px){.at-grid{grid-template-columns:1fr 1fr;gap:10px}}

/* Unsplash admin fetch control + photo credit */
.at-unsplash{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#f3f9f6;border:1px solid #cfeadd;border-radius:12px;padding:10px 14px;margin-bottom:12px}
.at-usp-l{font-size:13px;font-weight:700;color:var(--navy-700)}
.at-unsplash select{padding:8px 10px;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-size:13.5px}
.at-usp-btn{padding:8px 16px}
.mk-photo .mk-credit{position:absolute;left:0;right:0;bottom:0;font-size:10px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);padding:10px 8px 4px;text-decoration:none;text-align:start;opacity:0;transition:.15s}
.mk-photo:hover .mk-credit{opacity:1}

/* Shopping malls directory (reuses .mk-* for covers/album/shops) */
.ml-hero{background:radial-gradient(130% 150% at 88% -20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,#5b21b6,#7c3aed)}
.g-dir.dir-ml{--gd:#7c3aed}
.g-dir.dir-ml::after{background:#7c3aed}
/* Card logo tile: a teal gradient with a white glyph (or a real photo) — was a
   flat purple that read as an unstyled placeholder rather than a deliberate
   brand tile; teal pairs with the section's own icon color on the homepage. */
.ml-logo{background:linear-gradient(140deg,#0d9488,#0f766e);color:#fff;display:flex;align-items:center;justify-content:center}
.ml-logo-emo{font-size:32px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}
.ml-card{transition:transform .16s,box-shadow .16s,border-color .16s}
.ml-card:hover{transform:translateY(-3px);border-color:#c4b5fd;box-shadow:0 10px 26px rgba(124,58,237,.16)}
.ml-card .ex-name{font-size:16.5px}
.ml-card .mk-catpill{background:#f3e8ff;color:#6d28d9;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:800}
.ml-card .mk-cardshops{color:#7c3aed}
.ml-card .mq-card-zh{color:#7c3aed;opacity:.85}
.ml-hero2{background:radial-gradient(135% 150% at 88% -20%,rgba(255,255,255,.2),transparent 55%),linear-gradient(135deg,#7c3aed,#4c1d95)}
.ml-crest{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px}
.ml-shop-ph{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ml-shop-ph img{width:66px;height:66px;object-fit:cover;border-radius:9px;border:1px solid var(--line);background:#eef1f6}
/* "Join us" banner — its own cohesive purple identity (was clashing orange+purple) */
.ml-joincta{background:linear-gradient(135deg,#4c1d95,#7c3aed 55%,#a855f7)}
.ml-joincta::after{content:"🏬";position:absolute;inset-inline-end:14px;bottom:-22px;font-size:120px;line-height:1;opacity:.13;transform:rotate(-8deg);pointer-events:none}
.ml-joincta{position:relative;overflow:hidden}
.ml-joincta .mkj-body,.ml-joincta .mkj-btn{position:relative;z-index:1}
.ml-joincta h3{font-size:19px}
.ml-joincta .mkj-price{display:inline-block;margin-top:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);padding:5px 13px;border-radius:999px;font-size:14px;font-weight:800}
.ml-joincta .mkj-btn{background:#fff;color:#6d28d9}
.ml-joincta .mkj-btn:hover{background:#faf5ff;transform:translateY(-1px)}

/* Admin: delete-this-page button (directory detail pages) */
.adm-delpage{display:inline}
.adm-delbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1.5px solid rgba(255,255,255,.55);background:rgba(220,38,38,.22);color:#fff;border-radius:10px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
.adm-delbtn:hover{background:#dc2626;border-color:#dc2626}

/* ============================================================
   Guide directory — the design the owner supplied:
   a decorated navy header band, photo-topped white cards with a
   floating coloured icon tile, a page-count badge, a two-line
   blurb and a tinted pill CTA, then a navy trust strip.
   ============================================================ */
.gd-band{margin:22px 0 4px}
.gd-band-head{position:relative;overflow:hidden;border-radius:22px;text-align:center;
  padding:34px 24px 30px;color:#fff;
  background:linear-gradient(135deg,#132a4a 0%,#0f2038 55%,#16325a 100%)}
.gd-band-head h2{margin:0 0 8px;font-size:27px;font-weight:900;color:#fff;line-height:1.35}
.gd-band-head p{margin:0;font-size:14.5px;color:rgba(255,255,255,.8);font-weight:600;line-height:1.6}
.gd-band-head .gd-spark{position:absolute;color:#e9b949;opacity:.75;pointer-events:none;user-select:none}
.gd-spark-a{top:18px;inset-inline-start:8%;font-size:15px}
.gd-spark-b{top:34px;inset-inline-end:12%;font-size:22px;opacity:.5}
.gd-spark-c{bottom:20px;inset-inline-start:18%;font-size:20px;opacity:.45}
.gd-spark-d{bottom:34px;inset-inline-end:7%;font-size:14px}

.g-dirs{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px;margin:20px 0}
.g-dir{position:relative;overflow:hidden;border-radius:18px;text-align:start;
  background:#fff;border:1px solid #e8ecf3;padding:0;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:0;min-height:0;
  box-shadow:0 2px 10px rgba(16,32,56,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.g-dir::before,.g-dir::after{display:none}
.g-dir:hover{transform:translateY(-5px);text-decoration:none;border-color:var(--gc,#3b5bdb);
  box-shadow:0 18px 36px rgba(16,32,56,.15)}
/* photo band across the top */
.g-dir .gd-ph{display:block;height:98px;background:#e9edf4 center/cover no-repeat;position:relative}
.g-dir .gd-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,40,0) 42%,rgba(10,22,40,.22) 100%)}
.g-dir:hover .gd-ph{filter:saturate(1.08)}
/* body, with the icon tile floating over the photo's bottom edge */
.g-dir .gd-body{display:flex;flex-direction:column;gap:6px;padding:0 15px 15px;flex:1}
.g-dir .gd-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin-top:-23px;margin-bottom:4px;position:relative;z-index:2;color:#fff;
  background:var(--gc,#3b5bdb);border:3px solid #fff;
  box-shadow:0 6px 16px rgba(16,32,56,.22)}
.g-dir .gd-ic svg{width:22px;height:22px}
.g-dir .gd-t{font-size:16px;font-weight:900;line-height:1.35;margin:0;color:var(--gc,#3b5bdb)}
.g-dir .gd-n{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;
  color:#5b6b82;background:#f1f4f9}
.g-dir .gd-n svg{width:13px;height:13px;flex:none;opacity:.8}
.g-dir .gd-n b{font-weight:900;color:var(--navy)}
.g-dir .gd-n i{font-style:normal;font-weight:700}
.g-dir .gd-count{align-self:flex-start;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;
  background:#eef1f5;color:#64748b}
.g-dir .gd-s{font-size:12.5px;color:#64748b;font-weight:600;line-height:1.6;margin:0;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
/* full-width tinted pill CTA */
.g-dir .gd-more{margin-top:auto;margin-bottom:0;padding:9px 12px;border-radius:11px;
  font-size:13px;font-weight:800;color:var(--gc,#3b5bdb);
  background:color-mix(in srgb,var(--gc,#3b5bdb) 10%,#fff);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .18s ease,color .18s ease}
.g-dir:hover .gd-more{background:var(--gc,#3b5bdb);color:#fff}
.g-dir .gd-more .arr{transition:transform .18s ease}
.g-dir:hover .gd-more .arr{transform:translateX(-4px)}
html[dir="ltr"] .g-dir .gd-more .arr{transform:scaleX(-1)}
html[dir="ltr"] .g-dir:hover .gd-more .arr{transform:scaleX(-1) translateX(-4px)}
/* trust strip under the grid */
.gd-trust{margin-top:18px;border-radius:20px;color:#fff;padding:24px 26px;
  background:linear-gradient(135deg,#132a4a 0%,#0f2038 60%,#16325a 100%);
  display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:18px;align-items:center;text-align:center}
.gd-trust .gdt-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.gd-trust .gdt-ic{font-size:20px;line-height:1;margin-bottom:3px}
.gd-trust b{font-size:14.5px;font-weight:900;color:#fff;line-height:1.4}
.gd-trust span{font-size:12.5px;color:rgba(255,255,255,.72);font-weight:600;line-height:1.5}
.gd-trust .gdt-mid b{font-size:17px}
.gd-trust .gdt-mid span{color:#e9b949}
/* Tablet: an auto-fill grid drops to awkward widths between breakpoints, so the
   column count is stepped explicitly and the photo band follows it. */
@media (max-width:1080px){
  .g-dirs{grid-template-columns:repeat(3,1fr)}
  .g-dir .gd-ph{height:96px}
}
@media (max-width:860px){
  .g-dirs{grid-template-columns:repeat(2,1fr);gap:14px}
  .g-dir .gd-ph{height:108px}
  .gd-trust{grid-template-columns:1fr;gap:16px;padding:22px 18px}
}
@media (max-width:720px){
  .gd-band-head{padding:26px 18px 24px;border-radius:18px}
  .gd-band-head h2{font-size:21px}
  .g-dirs{grid-template-columns:repeat(2,1fr);gap:12px}
  .g-dir .gd-ph{height:88px}
}
/* per-section accent hues */
.g-dir.dir-cities{--gc:#0d9488}
.g-dir.dir-ml{--gc:#7c3aed}
.g-dir.dir-mk{--gc:#ea580c}
.g-dir.dir-at{--gc:#0891b2}
.g-dir.dir-sch{--gc:#2563eb}
.g-dir.dir-mq{--gc:#b7791f}
.g-dir.dir-hp{--gc:#0d9488}
.g-dir.dir-bank{--gc:#7c3aed}
.g-dir.dir-club{--gc:#dc2626}
.g-dir.dir-ap{--gc:#4f46e5}
.g-dir.dir-rw{--gc:#b45309}
.g-dir.dir-mt{--gc:#9333ea}
.g-dir.dir-emb{--gc:#1d4ed8}
.g-dir.dir-ex{--gc:#db2777}
.g-dir.dir-visa{--gc:#e11d48}
/* paid-services feature tile — deep navy banner spanning the whole row */
.g-svc-tile{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;
  min-height:0;padding:24px 28px;border:none;color:#fff;border-radius:18px;
  background:linear-gradient(120deg,#1e293b,#0f172a)}
.g-svc-tile::after{content:"";display:block;position:absolute;inset-inline-end:-40px;top:-50px;width:190px;height:190px;
  border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.g-svc-tile:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,23,42,.32)}
.g-svc-tile .gst-main{display:flex;flex-direction:column;gap:8px;min-width:0;position:relative;z-index:1}
.g-svc-tile .gst-badge{align-self:flex-start;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800}
.g-svc-tile h3{margin:0;font-size:20px;color:#fff;font-weight:900}
.g-svc-tile p{margin:0;font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.5;max-width:62ch}
.g-svc-tile .gst-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.g-svc-tile .gst-chips span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  padding:5px 11px;border-radius:10px;font-size:12.5px;font-weight:700}
.g-svc-tile .gst-btn{flex:none;position:relative;z-index:1;background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;font-weight:900;font-size:15px;padding:13px 26px;border-radius:12px;
  box-shadow:0 8px 20px rgba(37,99,235,.4);white-space:nowrap}
.g-svc-tile:hover .gst-btn{filter:brightness(1.07)}
@media(max-width:560px){
  .g-dirs{grid-template-columns:1fr 1fr;gap:11px}
  .g-dir{min-height:0;padding:0;border-radius:14px;gap:0}
  .g-dir .gd-ph{height:74px}
  .g-dir .gd-body{padding:0 11px 11px;gap:5px}
  .g-dir .gd-ic{width:38px;height:38px;border-radius:11px;margin-top:-19px}
  .g-dir .gd-ic svg{width:19px;height:19px}
  .g-dir .gd-n{font-size:10.5px;padding:3px 8px}
  .g-dir .gd-t{font-size:14px}
  .g-dir .gd-s{font-size:11.5px;min-height:36px}
  .g-dir .gd-more{font-size:12px;padding:8px 10px}
  .g-svc-tile{flex-direction:column;align-items:stretch;padding:18px}
  .g-svc-tile .gst-btn{text-align:center}
}

/* "My City" scope bar on the guide */
.gd-scope{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:16px 0 4px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(18,35,59,.05)}
.gds-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;min-width:260px}
.gds-label{font-size:13.5px;font-weight:800;color:var(--navy)}
.gds-sel{padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:13.5px;
  background:#fbfcfe;color:var(--ink);min-width:130px}
.gds-btn{padding:9px 18px;border:none;border-radius:10px;background:var(--navy);color:#fff;font-weight:800;
  font-size:13.5px;font-family:inherit;cursor:pointer}
.gds-btn:hover{background:var(--navy-700)}
.gds-active{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:#0d7a4f;
  background:#eafaf2;border:1px solid #b8ebd2;border-radius:10px;padding:8px 14px}
.gds-active b{color:var(--navy);font-weight:900}
.gds-all{color:#a8121a;font-weight:800;text-decoration:none;white-space:nowrap;
  background:#fff;border:1px solid #f0c9cc;border-radius:8px;padding:4px 10px}
.gds-all:hover{background:#fff1f2}
.gds-hint{font-size:12.5px;color:var(--muted);font-weight:600}
/* a section with no content yet in the chosen city */
.g-dir.gd-empty{opacity:.62;filter:saturate(.6)}
.g-dir.gd-empty:hover{opacity:1;filter:none}
.gd-count.gd-soon{background:#fef3e7;color:#b45309}

/* Scholarships — official portals, channels, stipend, timeline */
.sch-portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:6px 0 8px}
.sch-portal{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;text-decoration:none;box-shadow:0 2px 8px rgba(18,35,59,.05);transition:transform .16s,box-shadow .16s,border-color .16s}
.sch-portal:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,35,59,.12);border-color:#c7d0e0}
.sch-portal .spf-ic{font-size:24px}
.sch-portal b{color:var(--navy);font-size:14.5px}
.sch-portal .spf-u{color:#2563eb;font-size:12.5px;font-weight:700;direction:ltr}
.sch-portal .spf-d{color:var(--muted);font-size:12px;font-weight:600;line-height:1.5}
.sch-amt-grid{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0}
.sch-amt{flex:1;min-width:130px;background:linear-gradient(135deg,#0d7a4f,#0f9d63);color:#fff;border-radius:14px;
  padding:16px;text-align:center}
.sch-amt b{display:block;font-size:24px;font-weight:900}
.sch-amt span{font-size:12.5px;opacity:.92;font-weight:700}
.sch-time{display:flex;flex-wrap:wrap;gap:12px}
.sch-tstep{flex:1;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:3px;box-shadow:0 2px 6px rgba(18,35,59,.05)}
.sch-tstep .stt{font-size:20px;color:#2563eb;font-weight:900}
.sch-tstep b{color:var(--navy);font-size:14.5px}
.sch-tstep span:last-child{color:var(--muted);font-size:12.5px;font-weight:600}

/* Member photo contribution + admin primary-photo */
.mk-photo.is-primary{outline:3px solid #f59e0b;outline-offset:-3px}
.mk-pri-badge{position:absolute;top:6px;inset-inline-start:6px;background:#f59e0b;color:#fff;font-size:10.5px;
  font-weight:900;padding:2px 8px;border-radius:999px;z-index:2}
.pe-star{position:absolute;top:6px;inset-inline-end:36px;margin:0}
.pe-star button{width:26px;height:26px;border:none;border-radius:8px;background:rgba(0,0,0,.5);color:#fff;
  font-size:13px;cursor:pointer;line-height:1}
.pe-star button:hover{background:#f59e0b}
.ph-contrib{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px;background:#f3f9f6;
  border:1px solid #cfeadd;border-inline-start:4px solid #2f9e6f;border-radius:12px;padding:14px 16px}
.ph-contrib .phc-l{flex-basis:100%;font-size:15px;font-weight:800;color:var(--navy)}
.ph-contrib input[type=url]{flex:1;min-width:220px;padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:13px}
.ph-file-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:#2f9e6f;color:#fff;
  font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:10px;transition:background .15s}
.ph-file-btn:hover{background:#268059}
.ph-file-btn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.ph-file-name{font-size:12.5px;color:var(--navy);font-weight:700;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phc-consent{flex-basis:100%;display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink);font-weight:600;cursor:pointer}
.phc-consent input{margin-top:2px;flex-shrink:0;width:16px;height:16px;accent-color:#2f9e6f}
.phc-consent a{color:#2f9e6f;font-weight:800;text-decoration:underline}
.phc-submit{flex-shrink:0}
.ph-contrib-done{opacity:.85}
.ph-contrib .phc-note{flex-basis:100%;font-size:11.5px;color:var(--muted);font-weight:600}
/* Legal / terms document (photo-terms.php) */
.legal-doc{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 30px}
.legal-doc h1{font-size:24px;color:var(--navy);margin-bottom:10px;text-wrap:balance}
.legal-intro{font-size:15px;color:var(--ink);line-height:1.8;margin-bottom:18px}
.legal-list{display:flex;flex-direction:column;gap:16px;padding:0;margin:0 0 20px;list-style:none;counter-reset:lg}
.legal-list li{position:relative;background:#f7faf9;border:1px solid #e4eee9;border-inline-start:4px solid #2f9e6f;border-radius:12px;padding:14px 18px}
.legal-list li h3{font-size:16px;color:var(--navy);margin-bottom:5px}
.legal-list li p{font-size:14px;color:var(--ink);line-height:1.85}
.legal-foot{font-size:13px;color:var(--muted);font-weight:600;border-top:1px dashed var(--line);padding-top:16px;margin-bottom:16px}
/* Resilient-image placeholder — shown only if an image truly can't load after
   retries, so the tile never collapses to nothing. */
.yc-img-x{background:linear-gradient(135deg,#eef2f8,#e2e8f2)!important;position:relative}
.yc-img-x::after{content:"🖼️";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;opacity:.5}
/* Product wholesale info + admin-only source link (product.php) */
.dwholesale{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.dwh-chip{background:var(--soft,#f3f5fa);border:1px solid var(--line,#e9edf5);border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:700;color:var(--navy,#0D2966)}
.dsource-admin{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;background:#fff7ed;border:1px dashed #f59e0b;border-radius:9px;padding:9px 12px}
.dsource-admin .dse-l{font-size:12.5px;font-weight:800;color:#b45309;white-space:nowrap}
.dsource-admin input[type=url]{flex:1;min-width:180px;padding:7px 10px;border:1px solid var(--line,#e9edf5);border-radius:7px;font-size:12.5px;font-family:inherit}
.dsource-admin button{background:#b45309;color:#fff;border:none;border-radius:7px;padding:7px 14px;font-weight:800;font-size:12.5px;cursor:pointer}
.dsource-admin button:hover{background:#92400e}
.dsource-admin .dse-open{font-size:16px;text-decoration:none;color:#b45309}
/* "Be the first" launch growth CTA (includes/growth.php) */
.first-cta{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#0d2966,#17408b);color:#fff;border-radius:16px;padding:20px 22px;margin:18px 0;flex-wrap:wrap}
.first-cta.is-empty{margin:26px 0}
.first-cta .fc-ic{font-size:38px;line-height:1;flex-shrink:0}
.first-cta .fc-body{flex:1;min-width:220px}
.first-cta .fc-body h3{font-size:18px;margin:0 0 4px;color:#fff}
.first-cta .fc-body p{font-size:13.5px;margin:0;color:#d7e2f7;line-height:1.7}
.first-cta .fc-perk{margin-top:8px;display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:5px 11px;font-size:12.5px;font-weight:800}
.first-cta .fc-btn{flex-shrink:0;background:#fff;color:var(--navy,#0d2966);font-weight:900;font-size:14px;padding:12px 20px;border-radius:11px;text-decoration:none;white-space:nowrap}
.first-cta .fc-btn:hover{background:#f0f4fb}
/* Housing market-rates guide (homes section) */
.rent-guide{background:#fff;border:1px solid var(--line,#e9edf5);border-radius:14px;padding:16px 18px;margin:16px 0}
.rent-guide .rg-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:10px}
.rent-guide .rg-head h3{font-size:16px;color:var(--navy,#0d2966);margin:0}
.rent-guide .rg-note{font-size:11.5px;color:var(--muted,#6b7385);font-weight:600}
.rent-guide .rg-city{font-size:13px;color:var(--ink,#1c2436);margin-bottom:10px;font-weight:700}
.rent-guide .rg-city span{color:var(--muted,#6b7385);font-weight:500}
.rg-scroll{overflow-x:auto}
.rg-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.rg-table th{text-align:start;font-size:11.5px;color:var(--muted,#6b7385);font-weight:800;padding:7px 10px;border-bottom:2px solid var(--line,#e9edf5)}
.rg-table td{padding:9px 10px;border-bottom:1px solid var(--soft,#f3f5fa);font-variant-numeric:tabular-nums;white-space:nowrap}
.rg-table td .rg-tag{display:block;font-size:11px;color:#2f9e6f;font-weight:700;white-space:normal}
.rg-table td.rg-more{white-space:normal;color:var(--muted,#6b7385);font-size:12px;min-width:180px}

/* "NEW" badge for freshly-added directory/university entries (auto-expires after
   ~2 days via tg_is_new / the 'added' date). */
.new-badge{position:absolute;top:10px;inset-inline-start:10px;z-index:3;background:linear-gradient(135deg,#16a34a,#059669);color:#fff;font-size:10px;font-weight:900;letter-spacing:.3px;padding:3px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.at-card,.ex-card,.sc-card,.mk-card,.ml-card{position:relative}
.at-card.is-new,.ex-card.is-new,.sc-card.is-new{box-shadow:0 0 0 1.5px #16a34a,0 6px 18px rgba(0,0,0,.06)}

/* ===== Services: gig builder + package selector (Fiverr-style) ===== */
.svo-sec{margin:22px 0 8px;font-size:15px;font-weight:900;color:var(--navy)}
.svo-sec .af-hint{font-weight:600;font-size:12px;color:var(--muted,#78829d)}
.svo-langs{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 6px}
.svo-lang-chk{display:flex;align-items:center;gap:6px;font-weight:700;cursor:pointer}
.svo-imgrow input[type=file]{width:100%}
.svo-pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.svo-pkg{border:1px solid var(--line);border-radius:14px;padding:12px 13px;background:#fbfcfe}
.svo-pkg.req{border-color:#c7d6f7;background:#f5f8ff}
.svo-pkg-h{font-weight:900;color:var(--navy);margin-bottom:8px;font-size:14px}
.svo-pkg label{display:block;font-size:12px;font-weight:700;color:#5a6685;margin:8px 0 3px}
.svo-pkg input,.svo-pkg textarea{width:100%}
.svo-pkg-row{display:flex;gap:8px}
.svo-pkg-net{margin-top:8px;font-size:12.5px;color:#0a7d33;font-weight:700}
.svo-addon-row{display:flex;gap:8px;margin-bottom:6px}
.svo-addon-row input:first-child{flex:1}
.svo-addon-row input:last-child{width:110px}
/* package selector on the gig page */
.svp-tabs{display:flex;gap:6px;margin-bottom:10px}
.svp-tab{flex:1;padding:8px 4px;border:1px solid var(--line);background:#fff;border-radius:9px;font-weight:800;font-size:12.5px;cursor:pointer;color:#5a6685}
.svp-tab.on{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border-color:#1d4ed8}
.svp-panel.hide{display:none}
.svp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.svp-name{font-size:15px;color:var(--navy)}
.svp-price{font-size:20px;font-weight:900;color:var(--navy)}
.svp-meta{font-size:12.5px;color:#5a6685;font-weight:700;margin-bottom:8px}
.svp-feats{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:5px}
.svp-feats li{font-size:13px;color:#33405c}
.svp-addons{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.svp-addh{font-weight:800;font-size:12.5px;color:#5a6685;margin-bottom:6px}
.svp-addon{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:5px 0;cursor:pointer}
.svp-addon b{color:#0a7d33;white-space:nowrap}
.svp-total{display:flex;justify-content:space-between;align-items:center;margin:12px 0 10px;padding-top:10px;border-top:1px dashed var(--line);font-weight:800}
.svp-total b{font-size:20px;color:var(--navy)}

.rvhead .rv-del{border:none;background:none;cursor:pointer;font-size:13px;opacity:.6}
.rvhead .rv-del:hover{opacity:1}

.so-dispute{margin-top:8px}
.so-dispute summary{cursor:pointer;font-size:12.5px;color:#b45309;font-weight:700}
.so-dispute textarea{width:100%;margin:6px 0}
.ac-btn.danger{background:#fef2f2;color:#b01219;border:1px solid #fecaca}

/* ===== Services: paid promo frames + pin-to-top ===== */
.svcard.promo{position:relative}
.svcard.pinned{border:2.5px solid #f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.sv-promoted{position:absolute;top:10px;inset-inline-start:10px;z-index:4;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:10px;font-weight:900;padding:3px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.sv-pending{display:inline-block;margin-inline-start:6px;background:#fef3c7;color:#92400e;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;border:1px solid #fcd34d;vertical-align:middle}
/* flame frame */
.svcard.promo-flame{border:2.5px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2.5px #ff6a00,0 0 14px 2px rgba(255,106,0,.55);animation:svcFlame 1.1s ease-in-out infinite alternate}
@keyframes svcFlame{from{box-shadow:0 0 0 2.5px #ff8a00,0 0 10px 1px rgba(255,120,0,.45)}to{box-shadow:0 0 0 2.5px #ff3d00,0 0 20px 4px rgba(255,60,0,.75)}}
/* glow frame */
.svcard.promo-glow{border:2.5px solid #22d3ee;box-shadow:0 0 14px 2px rgba(34,211,238,.6);animation:svcGlow 1.6s ease-in-out infinite alternate}
@keyframes svcGlow{from{box-shadow:0 0 8px 1px rgba(34,211,238,.4)}to{box-shadow:0 0 22px 5px rgba(59,130,246,.75)}}
/* flash frame */
.svcard.promo-flash{border:2.5px solid #a855f7;animation:svcFlash .8s steps(1) infinite}
@keyframes svcFlash{0%,49%{border-color:#a855f7;box-shadow:0 0 12px 2px rgba(168,85,247,.6)}50%,100%{border-color:#ec4899;box-shadow:0 0 12px 2px rgba(236,72,153,.6)}}
@media (prefers-reduced-motion:reduce){.svcard.promo-flame,.svcard.promo-glow,.svcard.promo-flash{animation:none}}
/* promote page + analytics */
.promo-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.promo-opt{border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;cursor:pointer;background:#fff}
.promo-opt input{margin-bottom:6px}
.promo-opt .po-emoji{font-size:26px}
.promo-opt .po-price{font-weight:900;color:var(--navy);font-size:18px;margin-top:4px}
.svstat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:10px 0}
.svstat{background:#f7f9fd;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.svstat .n{font-size:22px;font-weight:900;color:var(--navy)}
.svstat .l{font-size:12px;color:#5a6685;margin-top:2px}

/* ============================================================= *
 * Services: full-image auto carousel, bigger price, provider
 * stats frame, requirements, and the order workroom (chat).
 * ============================================================= */
.svd-carousel{position:relative;width:100%;height:clamp(280px,42vw,520px);background:#0d1b2a;border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.svc-track{position:relative;width:100%;height:100%}
.svc-slide{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease;pointer-events:none}
.svc-slide.on{opacity:1;pointer-events:auto}
.svc-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.svc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.85);color:#0d1b2a;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:background .2s}
.svc-nav:hover{background:#fff}
.svc-nav.prev{inset-inline-start:12px}
.svc-nav.next{inset-inline-end:12px}
/* Dots wrap so a gallery with 10+ images can never overflow the frame. */
.svc-dots{position:absolute;inset-inline:0;bottom:12px;z-index:3;display:flex;gap:7px;row-gap:6px;flex-wrap:wrap;justify-content:center;padding-inline:14px}
.svc-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;flex:0 0 auto}
.svc-dot.on{background:#fff;transform:scale(1.25)}
.svd-carousel:not(.multi) .svc-nav,.svd-carousel:not(.multi) .svc-dots{display:none}
/* Gig thumbnails: one scrollable strip instead of many wrapped rows. */
.dthumbs.sv-thumbs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.dthumbs.sv-thumbs .dthumb{flex:0 0 auto;scroll-snap-align:center}
@media(max-width:560px){.dthumbs.sv-thumbs .dthumb{width:54px;height:54px}}

/* bigger, prominent price */
.svd-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.svd-price b{font-size:36px;font-weight:900;color:var(--navy);line-height:1}
.svp-price{font-size:27px;font-weight:900;color:var(--navy)}
.svp-total b{font-size:27px;font-weight:900;color:var(--navy)}
.svd-cta .btn-lg{font-size:17px;font-weight:800}

/* provider stats frame */
.svd-provstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pv-stat{background:linear-gradient(180deg,#f7fafe,#eef3fa);border:1px solid #e2eaf4;border-radius:13px;padding:11px 6px;text-align:center}
.pv-k{display:block;font-size:11px;color:#5b6b7f;white-space:nowrap}
.pv-v{display:block;font-size:17px;font-weight:900;color:var(--navy);margin-top:4px}
.pv-bar{height:9px;border-radius:6px;background:#e6edf6;overflow:hidden;margin-top:9px}
.pv-bar span{display:block;height:100%;background:linear-gradient(90deg,#f5b301,#ff7a00);border-radius:6px}
.svd-reqs p{white-space:pre-line}

/* order workroom */
.so-room{max-width:760px;margin:0 auto}
.so-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.so-h1{font-size:21px;font-weight:900;color:var(--navy);margin:0}
.so-h1 a{color:var(--navy)}
.so-sub{font-size:13px;color:#5a6685;margin-top:5px}
.so-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800}
.so-badge.ok{background:#e6f7ec;color:#177245}.so-badge.info{background:#e8f0fe;color:#1b4db3}
.so-badge.warn{background:#fff4e0;color:#8a5300}.so-badge.bad{background:#fde8e8;color:#b01219}
.so-badge.muted{background:#eef1f5;color:#5a6685}
.btn-out.sm{padding:6px 12px;font-size:13px}
.so-lines{background:#f6f9fd;border:1px solid #e6edf6;border-radius:12px;padding:10px 14px;margin-bottom:12px}
.so-line{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}
.so-reqs{background:#fffdf4;border:1px solid #f0e6c4;border-radius:12px;padding:12px 16px;margin-bottom:12px}
.so-reqs h3{margin:0 0 6px;font-size:15px;color:#8a6d1a}
.so-reqs p{white-space:pre-line;margin:0;font-size:14px}
.so-note{background:#eef4ff;border:1px solid #d6e2fb;border-radius:12px;padding:10px 14px;font-size:12.5px;color:#26456e;margin-bottom:14px}
.so-thread{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.so-empty{text-align:center;color:#7a8699;padding:28px 12px;background:#f6f9fd;border-radius:14px}
.so-msg{max-width:82%;padding:10px 14px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 1px 4px rgba(13,27,42,.05)}
.so-msg.me{align-self:flex-end;background:#eaf2ff;border-color:#d3e3ff}
.so-msg.them{align-self:flex-start}
.so-msg.req{background:#fff7e8;border-color:#f0dcae}
.so-msg-h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#4a5a70;margin-bottom:5px;flex-wrap:wrap}
.so-msg-h b{color:var(--navy)}
.so-tag{background:#8a5300;color:#fff;border-radius:999px;padding:1px 8px;font-size:11px}
.so-time{color:#9aa6b6;margin-inline-start:auto;font-size:11.5px}
.so-msg-b{font-size:14.5px;line-height:1.55;white-space:pre-line;word-break:break-word}
.so-flag{margin-top:6px;font-size:12px;color:#b01219;background:#fdecec;border-radius:8px;padding:5px 9px}
.so-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.so-att.img img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.so-att.file{display:inline-flex;align-items:center;gap:6px;background:#f2f6fc;border:1px solid #dde7f4;border-radius:10px;padding:8px 12px;font-size:13px;color:var(--navy);text-decoration:none;font-weight:700}
.so-att.file:hover{background:#e8f0fb}
.so-compose{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(13,27,42,.05)}
.so-compose textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;font-size:14.5px;resize:vertical;box-sizing:border-box}
.so-compose-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.so-attach{cursor:pointer;background:#f2f6fc;border:1px dashed #b9cbe4;border-radius:10px;padding:8px 14px;font-size:13.5px;font-weight:700;color:var(--navy)}
.so-attach:hover{background:#e8f0fb}
.so-fnames{font-size:12.5px;color:#177245;font-weight:700}
.so-reqchk{font-size:13px;color:#5a6685;display:flex;align-items:center;gap:5px}
.so-compose-row .btn-lg{margin-inline-start:auto;padding:10px 22px}
.so-room-btn{margin-top:10px;background:#eaf2ff;color:var(--navy);border:1px solid #d3e3ff}
.so-admin-note{background:#fff7e8;border:1px solid #f0dcae;border-radius:12px;padding:12px 16px;font-size:13px;color:#8a5300;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media (max-width:620px){.so-msg{max-width:92%}.svd-provstats{gap:6px}.pv-v{font-size:15px}}

/* ---- workroom v2: bigger compose, delivery, custom offer, 3-part review ---- */
.so-compose.big{padding:18px}
.so-compose.big textarea{min-height:96px;font-size:15px;line-height:1.6}
.so-actions{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.so-actions .btn-out{padding:9px 14px;font-size:13.5px}
.so-actions .btn-lg.deliver{background:linear-gradient(135deg,#0a7d33,#0f9d43);padding:9px 18px}
.so-count-banner{background:linear-gradient(135deg,#fff4e0,#ffe9c7);border:1px solid #f0d59a;border-radius:12px;padding:12px 16px;font-size:13.5px;color:#8a5300;margin-bottom:12px;font-weight:600}
.so-count-banner .soc2{font-size:16px;color:#b45309}
/* provider deliver/inquiry/offer buttons + custom offer form */
.so-offer-form{background:#f7f4ff;border:1px solid #ddd3f5;border-radius:16px;padding:16px;margin-top:12px}
.so-offer-form.hide,.so-decide .hide,#soRevise.hide{display:none}
.so-offer-h{font-weight:800;color:#5b3fb0;margin-bottom:10px;font-size:15px}
.so-offer-form input,.so-offer-form textarea{width:100%;border:1px solid #d7cdf0;border-radius:10px;padding:10px 12px;font:inherit;margin-bottom:9px;box-sizing:border-box}
.so-offer-inputs{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.so-offer-inputs label{display:flex;align-items:center;gap:6px;font-size:13px;color:#5a5570}
.so-offer-inputs input{width:110px;margin:0}
.so-offer-inputs .btn-lg{margin-inline-start:auto}
/* the offer card inside the thread */
.so-msg.offer{background:linear-gradient(180deg,#faf7ff,#f2ecff);border-color:#ddd0f7;max-width:92%}
.so-offer-card{border-radius:12px}
.so-offer-card .so-offer-h{color:#5b3fb0}
.so-offer-title{font-weight:800;font-size:15.5px;color:#2a2340;margin:2px 0 6px}
.so-offer-desc{font-size:14px;color:#4a4560;white-space:pre-line;margin-bottom:8px}
.so-offer-meta{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px}
.so-offer-price{font-size:26px;font-weight:900;color:#5b3fb0}
/* buyer decision block */
.so-decide{background:#eef7ff;border:1px solid #cfe4fb;border-radius:16px;padding:16px;margin-bottom:16px}
.so-decide-h{font-weight:800;color:#1b4db3;margin-bottom:12px}
.so-decide-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-lg.ok{background:linear-gradient(135deg,#0a7d33,#12a24a)}
/* three-part review */
.so-review{background:#fffdf5;border:1px solid #f0e6c0;border-radius:16px;padding:18px;margin-bottom:16px}
.so-review h3{margin:0 0 14px;color:#8a6d1a}
.so-review textarea{width:100%;border:1px solid #e6dcae;border-radius:12px;padding:11px 13px;font:inherit;box-sizing:border-box;margin-top:8px}
.so-rate-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed #efe6c6}
.so-rate-lbl{font-size:14.5px;font-weight:700;color:#4a4433}
.so-stars{display:inline-flex;flex-direction:row-reverse;gap:2px}
.so-stars input{display:none}
.so-stars label{font-size:26px;color:#dcd6c0;cursor:pointer;transition:color .12s;line-height:1}
.so-stars input:checked ~ label,.so-stars label:hover,.so-stars label:hover ~ label{color:#f5b301}
.so-approve{margin-top:14px;background:#fff;border:1px solid #eee2b8;border-radius:12px;padding:12px}
.so-approve-h{font-weight:800;color:#8a6d1a;margin-bottom:4px}
.so-approve-imgs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.so-approve-pick{cursor:pointer;position:relative}
.so-approve-pick img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:2px solid transparent}
.so-approve-pick input{position:absolute;inset-inline-start:6px;top:6px}
.so-approve-pick input:checked + img{border-color:#f5b301;box-shadow:0 0 0 2px #f5b30155}
.so-approve-none{display:flex;align-items:center;gap:6px;font-size:13px;color:#6a6450;align-self:center}
@media (max-width:620px){.so-actions{width:100%;margin-top:8px}.so-actions .btn-out,.so-actions .btn-lg{flex:1;text-align:center}.so-offer-price{font-size:22px}}

/* ============================================================= *
 * Workroom v3 — professional gig chat (Fiverr/Khamsat-style)
 * Overrides the earlier .so-* rules where they differ.
 * ============================================================= */
.so-room{max-width:820px;margin:0 auto;background:#fff;border:1px solid #e7edf4;border-radius:20px;box-shadow:0 10px 40px rgba(13,27,42,.07);overflow:hidden}
.so-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;background:linear-gradient(135deg,#0d1b2a,#1b3a5b);color:#fff;margin:0}
.so-head-l{display:flex;align-items:center;gap:14px;min-width:0}
.so-cover{width:52px;height:52px;border-radius:13px;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);color:#fff;font-weight:900;font-size:22px}
.so-cover img{width:100%;height:100%;object-fit:cover}
.so-head .so-h1{font-size:18px;font-weight:800;margin:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.so-head .so-h1 a{color:#fff}
.so-head .so-sub{color:#cfe0f2;margin-top:4px}
.so-head .so-sub b{color:#fff}
.so-head .btn-out.sm{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;flex:0 0 auto}
/* stepper / timeline */
.so-steps{display:flex;list-style:none;margin:0;padding:18px 22px 6px;gap:0;counter-reset:s}
.so-steps li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:#9aa6b6;font-size:12.5px;font-weight:700}
.so-steps li::before{content:"";position:absolute;top:15px;inset-inline-start:-50%;width:100%;height:3px;background:#e6edf6;z-index:0}
.so-steps li:first-child::before{display:none}
.so-steps li.done::before{background:#12a24a}
.so-step-n{width:32px;height:32px;border-radius:50%;background:#eef2f7;color:#9aa6b6;display:flex;align-items:center;justify-content:center;font-weight:900;z-index:1;border:2px solid #e6edf6}
.so-steps li.done .so-step-n{background:#12a24a;color:#fff;border-color:#12a24a}
.so-steps li.now .so-step-n{background:#1b4db3;color:#fff;border-color:#1b4db3;box-shadow:0 0 0 4px #1b4db322}
.so-steps li.now{color:#1b4db3}
.so-steps li.done .so-step-t{color:#177245}
/* guidance strip */
.so-guide{margin:12px 22px 0;padding:12px 16px;border-radius:13px;font-size:14px;font-weight:600;line-height:1.6;border:1px solid}
.so-guide.info{background:#eaf2ff;border-color:#d3e3ff;color:#1b4db3}
.so-guide.ok{background:#e9f9ef;border-color:#bfe9cd;color:#12703a}
.so-guide.warn{background:#fff5e6;border-color:#f2dcae;color:#8a5300}
.so-lines,.so-reqs,.so-note,.so-count-banner{margin-inline:22px}
.so-lines{margin-top:14px}
/* thread */
.so-thread{padding:18px 22px;background:#f7f9fc;gap:14px}
.so-row{display:flex;align-items:flex-end;gap:9px;max-width:86%;width:fit-content}
.so-row.them{margin-inline-end:auto}
.so-row.me{margin-inline-start:auto;flex-direction:row-reverse}
.so-av{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px}
.so-av.prov{background:linear-gradient(135deg,#0f9d43,#0a7d33)}
.so-av.buy{background:linear-gradient(135deg,#1b4db3,#2f6fd6)}
.so-av.adm{background:linear-gradient(135deg,#8a5300,#b45309)}
.so-msg{max-width:100%;padding:11px 15px;border-radius:16px;border:1px solid #e7edf4;background:#fff;box-shadow:0 1px 3px rgba(13,27,42,.06)}
.so-row.me .so-msg{background:#e8f1ff;border-color:#d3e3ff;border-bottom-right-radius:5px}
.so-row.them .so-msg{border-bottom-left-radius:5px}
.so-msg.req{background:#fff7e8;border-color:#f0dcae}
.so-msg.offer{background:linear-gradient(180deg,#faf7ff,#f2ecff);border-color:#ddd0f7}
.so-msg-h{margin-bottom:5px}
.so-msg-b{font-size:14.5px;line-height:1.6}
/* composer */
.so-compose,.so-compose.big{margin:0 22px 22px;background:#fff;border:1.5px solid #e2e9f2;border-radius:18px;padding:16px;box-shadow:none}
.so-compose textarea{border:none;background:#f6f9fd;border-radius:12px;min-height:88px}
.so-compose textarea:focus{outline:2px solid #bcd4f6;background:#fff}
.so-decide,.so-review,.so-offer-form{margin-inline:22px}
.so-decide{margin-bottom:0}
.so-admin-note{margin:0 22px 22px}
.so-empty{background:#fff;border:1px dashed #d7e0ea}
@media (max-width:640px){.so-head{padding:14px}.so-head .so-h1{max-width:56vw;font-size:16px}.so-steps{padding:14px 12px 4px}.so-step-t{font-size:11px}.so-thread{padding:14px}.so-row{max-width:94%}.so-guide,.so-lines,.so-reqs,.so-note,.so-count-banner,.so-compose,.so-decide,.so-review,.so-offer-form,.so-admin-note{margin-inline:14px}}

/* ============================================================= *
 * Order requirements intake (buyer → provider) — reuses the
 * workroom tokens; only the brief block + link rows are new.
 * ============================================================= */
.so-reqbox{margin:12px 22px 0;background:#f4faf6;border:1px solid #c9e6d3;border-radius:14px;padding:14px 16px}
.so-reqbox h3{margin:0 0 10px;font-size:15px;font-weight:800;color:#12703a}
.so-reqpart + .so-reqpart{margin-top:11px;padding-top:11px;border-top:1px dashed #cfe6d8}
.so-reqlbl{display:block;font-size:11.5px;font-weight:800;color:#5a6685;letter-spacing:.02em;margin-bottom:4px}
.so-reqtext{margin:0;font-size:14.5px;line-height:1.6;white-space:pre-line;word-break:break-word;color:var(--ink)}
.so-reqlinks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.so-reqlinks a{font-size:13.5px;font-weight:700;color:#1b4db3;word-break:break-all}
.so-reqmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed #cfe6d8;font-size:12.5px;color:#5a6685}
.so-reqform{margin-top:12px}
.so-reqform.hide{display:none}
.so-reqform-h{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:4px}
.so-linkbox{display:flex;flex-direction:column;gap:7px;margin-bottom:9px}
.so-linkin{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:13.5px;background:#f6f9fd}
.so-linkin:focus{outline:2px solid #bcd4f6;background:#fff}

/* ============================================================= *
 * Pre-order private inquiry (buyer ⇄ provider before any order)
 * ============================================================= */
.sq-warn{margin:12px 22px 0;background:#fff5f5;border:1.5px solid #f3c2c2;border-left:5px solid #d92d20;border-radius:14px;padding:12px 16px}
[dir="rtl"] .sq-warn{border-left:1.5px solid #f3c2c2;border-right:5px solid #d92d20}
.sq-warn b{display:block;font-size:14px;color:#b01219;margin-bottom:4px}
.sq-warn p{margin:0;font-size:13px;line-height:1.65;color:#7a2020}
.sq-mini{font-size:12px;font-weight:700;color:#b01219}
.sq-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 22px 22px;background:#f6f9fd;border:1px solid #e2e9f2;border-radius:14px;padding:12px 16px;font-size:13.5px;color:#33475f;font-weight:700}
.sq-badge{display:inline-block;background:#d92d20;color:#fff;border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:800;vertical-align:middle}
.sq-sub{font-size:13.5px;font-weight:800;color:var(--navy);margin:14px 0 8px}
.sq-list{display:flex;flex-direction:column;gap:8px}
.sq-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:11px 14px;text-decoration:none;color:var(--ink);background:#fff;transition:.15s}
.sq-row:hover{background:#f6f9fd;text-decoration:none}
.sq-row.unread{border-color:#f0c9c4;background:#fff8f7}
.sq-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.sq-row-main b{font-size:14px;color:var(--navy)}
.sq-row-main .muted{font-size:12px}
.sq-row-side{display:flex;align-items:center;gap:9px;font-size:11.5px;white-space:nowrap}
.svd-ask{width:100%;display:block;text-align:center;margin-top:10px}
@media (max-width:640px){.so-reqbox,.sq-warn,.sq-buy{margin-inline:14px}}

/* ============================================================= *
 * Exhibitions: product-type filters, icon cards, favourite,
 * and the detail-page product-type icon grid.
 * ============================================================= */
.ex-filter{background:#fff;border:1px solid #e7edf4;border-radius:16px;padding:12px 14px;margin:14px 0 18px;box-shadow:0 2px 10px rgba(13,27,42,.04)}
.ex-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0}
.ex-filter-row + .ex-filter-row{border-top:1px dashed #eef2f7;margin-top:2px}
.ex-filter-lbl{font-size:13px;font-weight:800;color:#4a5a70;margin-inline-end:4px;white-space:nowrap}
.ex-fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid #dbe4ef;background:#f6f9fd;color:#33475f;border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.ex-fchip:hover{background:#eef4fb}
.ex-fchip.on{background:var(--navy,#0d2966);color:#fff;border-color:var(--navy,#0d2966)}
.ex-fico{display:inline-flex;width:16px;height:16px}
.ex-fico svg{width:16px;height:16px}
.ex-fchip.on .ex-fico svg{stroke:#fff}
.ex-fchip .ex-fico svg{transition:transform .15s}
.ex-fchip:hover .ex-fico svg{transform:scale(1.18)}
/* Exhibitions — prominent search bar */
.ex-searchbar{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px 0 12px}
.ex-search{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:6px 8px 6px 20px;width:100%;max-width:620px;box-shadow:0 6px 22px rgba(13,27,42,.08);transition:box-shadow .18s,border-color .18s}
.ex-search:focus-within{border-color:#a8560f;box-shadow:0 10px 30px rgba(168,86,15,.16)}
.ex-search .ex-search-ic{font-size:19px;line-height:1;opacity:.85}
.ex-search input{flex:1;border:none;background:none;outline:none;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);min-width:0;padding:14px 0}
.ex-search input::placeholder{color:var(--muted);font-weight:500}
.ex-search-btn{flex:none;border:none;cursor:pointer;background:linear-gradient(135deg,#a8560f,#7a3d08);color:#fff;font-family:inherit;font-weight:800;font-size:14.5px;padding:13px 26px;border-radius:12px;transition:filter .15s,transform .1s}
.ex-search-btn:hover{filter:brightness(1.09)}
.ex-search-btn:active{transform:scale(.97)}
.ex-search-hint{font-size:11.5px;color:var(--muted);font-weight:600;text-align:center}
/* Exhibitions — month selector cards */
/* Fair calendar rail. The months run across a YEAR BOUNDARY, so they are banded
   by year: a labelled year tag, then that year's months, and every chip repeats
   its year in small type. A visitor should never have to work out whether the
   "August" they clicked is this one or next one. */
.ex-rail{margin:10px 0 18px}
.ex-rail-top{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
.ex-year{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0 0 12px;
  padding:12px 14px;border-radius:18px;background:#fff;border:1px solid #e8ecf3;
  box-shadow:0 2px 10px rgba(16,32,56,.05)}
.ex-year-tag{flex:none;align-self:stretch;display:flex;align-items:center;justify-content:center;
  min-width:62px;padding:0 12px;border-radius:13px;font-size:15px;font-weight:900;letter-spacing:.5px;
  color:#fff;background:linear-gradient(150deg,#a8560f,#7a3d08);
  box-shadow:0 6px 16px rgba(122,61,8,.28)}
/* Chips share the band's width evenly, so a year holding five months and one
   holding twelve both read as a full, deliberate row rather than a short
   huddle beside an empty white half. */
.ex-year-months{display:flex;flex-wrap:wrap;gap:9px;flex:1;min-width:0}
.ex-year-months .ex-mchip{flex:1 1 76px;min-width:76px}
.ex-mchip{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:88px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px 9px;
  cursor:pointer;font-family:inherit;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.ex-mchip::after{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;
  background:radial-gradient(90px 60px at 50% -30%,rgba(168,86,15,.16),transparent 70%);
  opacity:0;transition:opacity .2s ease}
.ex-mchip:hover{text-decoration:none;border-color:#a8560f;transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(168,86,15,.20)}
.ex-mchip:hover::after{opacity:1}
.ex-mchip .emc-ic{width:26px;height:26px;display:grid;place-items:center;color:#a8560f;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.ex-mchip .emc-ic svg{width:23px;height:23px}
.ex-mchip:hover .emc-ic{transform:scale(1.16) rotate(-6deg)}
.ex-mchip .emc-mon{font-size:12.5px;font-weight:800;color:var(--navy);position:relative}
.ex-mchip .emc-yr{font-size:10px;font-weight:800;color:#93a2b8;letter-spacing:.4px;position:relative}
.ex-mchip .emc-n{font-style:normal;font-size:11px;font-weight:900;color:#a8560f;background:#fbeee0;
  border-radius:999px;padding:1px 8px;min-width:20px;text-align:center;margin-top:2px;position:relative}
.ex-mchip.on{background:linear-gradient(150deg,#7a3d08,#a8560f);border-color:#7a3d08;
  box-shadow:0 10px 26px rgba(122,61,8,.34);transform:translateY(-2px)}
.ex-mchip.on .emc-ic,.ex-mchip.on .emc-mon{color:#fff}
.ex-mchip.on .emc-yr{color:rgba(255,255,255,.72)}
.ex-mchip.on .emc-n{background:rgba(255,255,255,.25);color:#fff}
/* The month we are actually in gets a live dot, so "now" is visible at a glance. */
.ex-mchip.now::before{content:"";position:absolute;top:7px;inset-inline-end:8px;width:6px;height:6px;
  border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:exNow 2.6s ease-out infinite}
.ex-mchip.on.now::before{background:#8ef0b4}
@keyframes exNow{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media(prefers-reduced-motion:reduce){.ex-mchip.now::before{animation:none}.ex-mchip:hover{transform:none}}
.ex-mchip.wide{flex-direction:row;align-items:center;gap:8px;min-width:0;padding:10px 16px}
.ex-mchip.wide .emc-n{margin-top:0}
.ex-mchip.empty{opacity:.45}
.ex-mchip.empty .emc-n{background:#eef1f5;color:#94a3b8}
.ex-mchip.empty .emc-ic{color:#94a3b8}
.ex-titleic{display:inline-grid;place-items:center;width:24px;height:24px;vertical-align:-5px;color:#a8560f}
.ex-titleic svg{width:22px;height:22px}
.ex-titleyr{font-size:.72em;font-weight:800;color:#93a2b8;letter-spacing:.5px}
@media(max-width:720px){
  .ex-year{flex-direction:column;gap:9px;padding:11px}
  .ex-year-tag{align-self:flex-start;min-width:0;padding:4px 14px}
  .ex-year-months{gap:7px}
  .ex-mchip{min-width:0;flex:1 1 calc(33.333% - 5px);padding:9px 6px 8px}
  .ex-mchip .emc-mon{font-size:11.5px}
}
/* Exhibitions — sector chips row + count */
.ex-sectors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 12px}
.ex-count{text-align:center;font-size:12.5px;color:var(--muted);font-weight:700;margin:2px 0 8px}
/* Exhibitions — current page (month / search) heading */
.ex-pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 2px;padding-bottom:8px;border-bottom:2px solid #f0e6da}
.ex-pagetitle{display:flex;align-items:center;gap:9px;margin:0;font-size:19px;font-weight:900;color:var(--navy)}
.ex-pagecount{font-size:13px;font-weight:800;color:#a8560f;background:#fbeee0;border-radius:999px;padding:2px 11px}
.ex-clear{font-size:12.5px;font-weight:800;color:#a8560f;background:#fff;border:1.5px solid #f0dcc4;border-radius:999px;padding:6px 14px;text-decoration:none;transition:.15s}
.ex-clear:hover{background:#fbeee0;text-decoration:none}
/* cards */
.ex-card{position:relative}
.ex-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.ex-icons{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.ex-ico{position:relative;width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid #e2e9f2;display:flex;align-items:center;justify-content:center;color:#0d1b2a}
.ex-ico svg{width:19px;height:19px;stroke:#0d1b2a}
.ex-ico i{position:absolute;bottom:calc(100% + 6px);inset-inline-start:50%;transform:translateX(-50%);background:#0d1b2a;color:#fff;font-style:normal;font-size:11px;white-space:nowrap;padding:3px 7px;border-radius:6px;opacity:0;pointer-events:none;transition:.15s;z-index:5}
.ex-ico{transition:transform .15s,border-color .15s,box-shadow .15s}
.ex-ico:hover{transform:translateY(-2px) scale(1.08);border-color:#a8560f;box-shadow:0 4px 10px rgba(168,86,15,.18)}
.ex-ico:hover i{opacity:1}
[dir=rtl] .ex-ico i{transform:translateX(50%)}
.ex-fav{position:absolute;top:10px;inset-inline-end:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid #e7edf4;background:rgba(255,255,255,.95);font-size:18px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(13,27,42,.12);transition:.15s}
.ex-fav:hover{transform:scale(1.08)}
.ex-fav.on{background:#fff0f2;border-color:#ffcdd6}
.ex-fav-btn.on{background:#fff0f2;border-color:#ffcdd6;color:#c81e3a}
/* detail: product-type icon grid */
.ex-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.ex-catcell{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:12px 6px;border:1px solid #e7edf4;border-radius:14px;background:#fff}
.ex-catico{width:46px;height:46px;border-radius:12px;background:#f7fafe;border:1px solid #e6eef7;display:flex;align-items:center;justify-content:center}
.ex-catico svg{width:26px;height:26px;stroke:#0d1b2a}
.ex-catcell b{font-size:12.5px;font-weight:700;color:#33475f;line-height:1.35}
.ex-fav-btn{cursor:pointer}
@media (max-width:640px){.ex-catgrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}.ex-filter-lbl{width:100%}}

/* ---- law-library search box + site-wide search law hits ---- */
.lg-law-search{display:flex;align-items:center;gap:8px;margin:4px 0 16px;background:var(--soft);border:1.5px solid var(--line);border-radius:12px;padding:4px 14px;max-width:520px}
.lg-law-search-ico{font-size:16px;opacity:.7}
.lg-law-search input{flex:1;border:0;background:transparent;outline:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--navy);padding:9px 0}
.lg-law-none{padding:14px;color:#64748b;font-weight:600;text-align:center}
.lg-law-search{max-width:640px}
.lg-law-search-btn{flex-shrink:0;border:0;background:var(--navy,#0d2966);color:#fff;font-family:inherit;font-weight:800;font-size:14px;border-radius:9px;padding:9px 18px;cursor:pointer;transition:.15s}
.lg-law-search-btn:hover{background:#0b6e4f}
/* Unified search results (laws + cases) */
.lg-results{margin:0 0 8px}
.lg-res-grp{margin-bottom:18px}
.lg-res-grp h3{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--navy,#0d2966);margin:0 0 8px}
.lg-res-list{background:#fff;border:1px solid var(--line,#e7ece6);border-radius:14px;overflow:hidden}
.lg-res-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--soft,#eef3ef);text-decoration:none;transition:background .15s}
.lg-res-row:last-child{border-bottom:none}
.lg-res-row:hover{background:var(--soft,#f4faf7)}
.lg-res-t{flex:1;min-width:0;font-weight:800;color:var(--ink);font-size:14.5px}
.lg-res-t + .lg-law-of{margin:0 6px}
.law-hits{margin:6px 0 26px;padding:14px 16px;background:linear-gradient(180deg,#f8fafc,#fff);border:1.5px solid var(--line);border-radius:16px}
.law-hits .page-head{margin:0 0 10px}
.law-hits h2{color:var(--navy);margin:0}
.law-hit-list{display:flex;flex-direction:column;gap:8px}
.law-hit{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:.15s}
.law-hit:hover{border-color:var(--navy);box-shadow:0 4px 14px rgba(13,41,102,.08);transform:translateY(-1px)}
.law-hit-ico{font-size:20px;flex:none}
.law-hit-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.law-hit-b b{color:var(--navy);font-size:15px;line-height:1.3}
.law-hit-of{font-size:11.5px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.law-hit-go{font-size:22px;color:#cbd5e1;flex:none}
html[dir=ltr] .law-hit-go{transform:scaleX(-1)}

/* ---- exhibitions: month-grouped timeline + generated emblems ---- */
.ex-count{font-size:13px;font-weight:800;color:var(--muted);margin:14px 0 2px}
.ex-groups{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ex-month{margin-top:10px}
.ex-month-h{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5;
  padding:9px 4px;background:linear-gradient(180deg,var(--bg,#f7f8fa) 65%,rgba(247,248,250,0));backdrop-filter:blur(2px)}
.ex-month-dot{width:10px;height:10px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px rgba(13,41,102,.12);flex:none}
.ex-month-t{font-size:16px;font-weight:900;color:var(--navy);letter-spacing:-.2px}
.ex-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.ex-logo .ex-emblem{position:absolute;inset:0;width:100%;height:100%;display:block}
.ex-crest.ex-crest-emblem{overflow:hidden;background:transparent!important}
.ex-crest.ex-crest-emblem .ex-emblem{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(max-width:560px){.ex-mgrid{grid-template-columns:1fr}.ex-month-t{font-size:15px}}

/* ---------- Chinese Cars directory ---------- */
.car-hero{background:linear-gradient(135deg,#0d2966,#7a1f1f 60%,#a8410a)}
.car-search{background:var(--soft);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;margin:16px 0}
.cs-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cs-q{flex:1 1 220px;padding:10px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:14px;font-weight:600}
.cs-p{width:130px;padding:10px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:13px}
.cs-btn{background:var(--navy);color:#fff;border:none;border-radius:999px;padding:10px 20px;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap}
.cs-btn:hover{background:var(--navy-700)}
.cs-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}
.cs-chips .exf-chip{cursor:pointer;border:none;font:inherit}
.car-results{margin:10px 0 20px}
.cr-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--navy-700);margin-bottom:10px}
.cr-clear{background:none;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700;font-size:12.5px;cursor:pointer;color:var(--navy)}
.car-group{margin:22px 0}
.car-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:10px}
.car-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.car-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,41,102,.1);border-color:#0d2966}
/* Logo tile: a real white card so any mark — including dark/transparent ones
   like Zeekr's — reads clearly on both the light grid and the dark brand hero. */
.car-logo{width:64px;height:64px}
.car-logo-img{width:100%;height:100%;object-fit:contain;border-radius:14px;background:#fff;padding:8px;box-sizing:border-box;border:1px solid rgba(13,41,102,.10);box-shadow:0 2px 8px rgba(13,41,102,.10)}
.car-logo-svg{width:100%;height:100%;display:block;border-radius:14px}
.car-name{font-size:16px;font-weight:800;color:var(--navy);margin:0}
.car-zh{font-size:12.5px;color:var(--navy-700);opacity:.75}
.car-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12.5px;color:var(--navy-700);font-weight:600}
.car-sales{font-size:13px;color:var(--navy)}
.car-nmodels{font-size:12.5px;color:var(--navy-700);font-weight:700}
/* Model cards reuse .ex-card but need the photo stacked ABOVE the text — the
   base .ex-card is a horizontal row built for a small square logo, which
   squashes a full 16:10 photo and the text together when placed side by side. */
.ex-card.car-mcard{flex-direction:column;gap:0}
.car-mthumb{width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:32px}
.car-mthumb img{width:100%;height:100%;object-fit:cover}
.car-mcard .ex-body{padding-top:10px}
.car-mprice{font-weight:800;color:#a8410a;font-size:14.5px}
/* brand page */
.car-bhero{position:relative;display:flex;gap:22px;align-items:center;background:linear-gradient(135deg,var(--bc,#0d2966) 0%,#12142a 78%);color:#fff;border-radius:18px;padding:30px 32px;margin-top:14px;flex-wrap:wrap;overflow:hidden;box-shadow:0 14px 34px rgba(13,41,102,.18)}
.car-bhero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(circle,color-mix(in srgb,var(--bc,#0d2966) 55%,transparent),transparent 70%);pointer-events:none}
.car-bhero>*{position:relative}
.car-bhero-logo{position:relative;width:104px;height:104px;flex:0 0 auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}
.car-bhero-logo .car-logo-img{border-radius:18px;padding:10px}
.car-bhero-logo .car-logo-svg{border-radius:18px}
/* admin: replace-logo pencil, sits on the logo corner */
.car-logo-edit{position:absolute;inset-inline-end:-6px;inset-block-end:-6px}
.car-logo-edit label{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--navy);border:1.5px solid var(--line);font-size:14px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.car-logo-edit label:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.car-bhero-t h1{margin:4px 0;font-size:26px}
.car-bhero-zh{font-size:16px;opacity:.8;font-weight:600}
.car-bhero-t p{margin:0;opacity:.85}
.car-web{display:inline-block;margin-top:8px;color:#fff;font-weight:700;text-decoration:underline;font-size:13.5px}
.car-stats{display:flex;flex-wrap:wrap;gap:22px;margin:18px 0 6px;padding:16px 20px;background:var(--soft);border-radius:14px}
.car-stats .n{font-size:20px;font-weight:900;color:var(--navy)}
.car-stats .l{font-size:12.5px;color:var(--navy-700);font-weight:600}
.car-salesnote{margin-top:0}
.car-founder{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px;margin:18px 0}
.car-fphoto{width:92px;height:92px;flex:0 0 auto;border-radius:16px;overflow:hidden;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:34px}
.car-fphoto img{width:100%;height:100%;object-fit:cover}
/* initial monogram used when no free-licence portrait exists */
.car-fmono{width:100%;height:100%;display:grid;place-items:center;font-size:38px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--bc,#0d2966),#12142a)}
.car-album{margin:22px 0}
.car-album h2{font-size:17px;margin:0 0 8px;color:var(--navy)}
.car-frole{font-size:12.5px;font-weight:700;color:#a8410a;text-transform:uppercase;letter-spacing:.03em}
.car-fbody h2{margin:2px 0 6px;font-size:19px;color:var(--navy)}
.car-fbody p{margin:0;color:var(--navy-700);line-height:1.7}
.car-about,.car-factories{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;margin:14px 0}
.car-about h2,.car-factories h2{font-size:17px;margin:0 0 8px;color:var(--navy)}
.car-about p,.car-factories p{margin:0;line-height:1.75;color:var(--navy-700)}
/* factory profile: video + album nested inside .car-factories, on the brand page */
.car-factories .car-fvideo,.car-factories .car-album{margin:18px 0 0}
.car-factories .car-fvideo h3,.car-factories .car-album h3{font-size:15px;margin:0 0 8px;color:var(--navy)}
.car-fvideo video{width:100%;border-radius:16px;max-height:480px;background:#000}
/* model page */
.car-mhero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:14px}
.car-mgallery{display:flex;flex-direction:column;gap:10px}
.car-gmain{border-radius:16px;overflow:hidden;background:var(--soft);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.car-gmain img{width:100%;height:100%;object-fit:cover}
.car-gempty{font-size:50px}
.car-gthumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.car-gt{width:64px;height:48px;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--soft)}
.car-gt.on{border-color:#a8410a}
.car-gt img{width:100%;height:100%;object-fit:cover}
/* admin: per-thumb delete + add-photos tile + video form */
.car-gtwrap{position:relative;display:inline-flex}
.car-gdel{position:absolute;inset-inline-end:-5px;inset-block-start:-5px}
.car-gdel button{width:20px;height:20px;border-radius:50%;border:none;background:#b3261e;color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0}
.car-gadd label{display:grid;place-items:center;width:64px;height:48px;border-radius:8px;border:2px dashed var(--line);color:var(--navy-700);font-size:20px;cursor:pointer;background:var(--soft)}
.car-gadd label:hover{border-color:var(--navy);color:var(--navy)}
.car-vidform{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--soft);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px}
.car-vidform label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--navy-700);flex:1 1 240px}
.car-vidform input{padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:13px;font-weight:600}
.car-vidform p{flex:1 1 100%;margin:0}
.car-mmeta{display:flex;flex-direction:column;gap:10px}
.car-mbrandline{display:flex;align-items:center;gap:10px;font-weight:700}
.car-mlogo{width:34px;height:34px;display:inline-block}
.car-mbrandline a{color:var(--navy-700);text-decoration:none}
.car-mmeta h1{margin:0;font-size:26px;color:var(--navy)}
.car-mprice-big{font-size:24px;font-weight:900;color:#a8410a}
.car-mtags{display:flex;flex-wrap:wrap;gap:8px}
.car-tag{background:var(--soft);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--navy)}
.car-mabout{color:var(--navy-700);line-height:1.75;margin:4px 0 0}
.car-video{margin:22px 0}
.car-video video{width:100%;border-radius:16px;max-height:520px;background:#000}
.car-yt{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#12142a;display:flex;align-items:center;justify-content:center}
.car-yt iframe{width:100%;height:100%;border:0}
.car-yt-play{background:rgba(255,255,255,.15);color:#fff;border:2px solid #fff;border-radius:999px;padding:14px 26px;font-weight:800;font-size:15px;cursor:pointer}
.car-yt.live .car-yt-play{display:none}
.car-trims{margin:22px 0}
.car-trimtbl{border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.car-trow{display:grid;grid-template-columns:1.1fr 2fr 1fr;gap:10px;padding:12px 16px;align-items:center}
.car-trow:nth-child(even){background:var(--soft)}
.car-thead{background:var(--navy)!important;color:#fff;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.car-tname{font-weight:700;color:var(--navy)}
.car-tspec{font-size:13px;color:var(--navy-700)}
.car-tprice{font-weight:800;color:#a8410a;text-align:end}
/* haraj */
.car-haraj-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,#12142a,#3a1f1f);color:#fff;border-radius:16px;padding:20px 24px;margin:22px 0}
.chc-body h3{margin:0 0 4px;font-size:18px}
.chc-body p{margin:0;opacity:.85;font-size:13.5px}
.chc-latest{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chc-item{background:rgba(255,255,255,.12);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}
.chc-btn{background:#fff;color:#12142a;border-radius:999px;padding:11px 22px;font-weight:800;text-decoration:none;white-space:nowrap}
.car-pending{background:#fff4e6;border:1.5px solid #f0c98a;border-radius:14px;padding:16px 18px;margin:16px 0}
.car-prow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed #e6c98a}
.car-prow:last-child{border-bottom:none}
.car-pform{display:flex;gap:8px}
.car-pform button{border-radius:999px;padding:6px 14px;font-weight:700;font-size:12.5px;cursor:pointer;border:1.5px solid var(--line)}
.car-lcard{display:flex;flex-direction:column;gap:8px}
.car-kind{border-radius:999px;padding:2px 10px;font-size:11px;font-weight:800}
.car-kind.local{background:#e6f4ea;color:#0b6e4f}
.car-kind.export{background:#e8edfb;color:#0d2966}
.car-lmeta{display:flex;gap:12px;font-size:12.5px;color:var(--navy-700)}
.car-lnotes{margin:0;font-size:13px;color:var(--navy-700);line-height:1.6}
.car-lcontact{display:flex;gap:14px;font-size:13px;font-weight:700}
.car-lcontact a{color:var(--navy);text-decoration:none}
.car-postform{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;margin:20px 0}
.chf{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.chf-row{display:flex;gap:14px;flex-wrap:wrap}
.chf-row label,.chf>label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--navy-700);flex:1 1 160px}
.chf input,.chf select,.chf textarea{padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit}
.cv-note{border-radius:12px;padding:12px 16px;font-weight:700;margin:14px 0}
.cv-note.ok{background:#e6f4ea;color:#0b6e4f;border:1.5px solid #b7e0c4}
.cv-note.err{background:#fdeaea;color:#9c1c1c;border:1.5px solid #f3b8b8}
@media(max-width:760px){.car-mhero{grid-template-columns:1fr}.car-bhero{padding:20px}.car-trow{grid-template-columns:1fr;text-align:start}.car-tprice{text-align:start}}
/* ===== service edit — pending-approval notice + kept-image picker ===== */
.sve-note{background:var(--soft);border:1.5px solid var(--line);border-inline-start:4px solid var(--navy);border-radius:14px;padding:12px 16px;margin:14px 0;font-size:13.5px;color:var(--ink)}
.sve-note b{color:var(--navy);font-size:14px}
.sve-note p{margin:4px 0 0;color:var(--muted)}
.sve-note a{color:var(--navy);font-weight:800;text-decoration:underline}
.sve-note-at{display:inline-block;margin-inline-start:8px;font-size:12px;color:var(--muted);font-weight:700}
.sve-note.bad{border-inline-start-color:var(--red)}
.sve-note.bad b{color:var(--red)}
.sve-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 8px}
.sve-thumb{width:104px;border:1.5px solid var(--line);border-radius:12px;padding:6px;background:#fff;display:block;cursor:pointer}
.sve-thumb img{width:100%;height:70px;object-fit:cover;border-radius:8px}
.sve-thumb span{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--muted)}
/* pending contributed photos, shown to an admin on the car model page */
.car-pendph{background:#fff8e6;border:1.5px solid #f0cf8a;border-radius:14px;padding:12px 14px;margin:10px 0 14px}
.car-pendph>b{display:block;font-size:13.5px;color:#8a5a06;margin-bottom:9px}
.car-pendph-grid{display:flex;gap:10px;flex-wrap:wrap}
.car-pendph-i{position:relative;margin:0;width:130px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid #e6c98a}
.car-pendph-i img{width:100%;height:100%;object-fit:cover}
.car-pendph-btns{position:absolute;inset-block-end:5px;inset-inline-end:5px;display:flex;gap:5px}
.car-pendph-btns button{width:26px;height:26px;border:none;border-radius:50%;background:rgba(14,110,60,.92);color:#fff;font-size:13px;font-weight:900;cursor:pointer;line-height:1}
.car-pendph-btns button.rej{background:rgba(200,30,30,.92)}
/* make the set-primary control readable rather than a bare icon */
.pe-star button{padding-inline:7px;width:auto;min-width:26px;font-size:12px;font-weight:800;white-space:nowrap}
/* upload control sitting directly under the model gallery */
.car-quickadd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.car-quickadd label{cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border-radius:999px;padding:9px 18px;font-weight:800;font-size:13.5px}
.car-quickadd label:hover{background:var(--navy-700)}
.car-quickadd-hint{font-size:12px;color:var(--muted);font-weight:600}

/* ===== admin "needs review" queue (includes/review.php) =====
   The bar above a directory grid, the ?review=1 chips, the inline "reviewed"
   tick on a card and the badge naming what is still missing. Admin-only markup,
   so none of this ever reaches a visitor. Logical properties throughout — the
   accent edge and the chips must mirror in Arabic exactly as they read in
   English/Chinese. Palette is the existing tokens plus the amber/green pair
   already used by .car-pendph and .cv-note. */
.rv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1.5px solid var(--line);border-inline-start:4px solid var(--navy);border-radius:var(--r-lg);padding:10px 14px;margin:14px 0;box-shadow:var(--shadow-sm)}
.rv-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:13px;font-weight:800;color:var(--navy);white-space:nowrap;transition:.15s}
a.rv-chip:hover{border-color:var(--navy);background:var(--soft)}
.rv-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.rv-chip.rv-go{background:var(--navy);border-color:var(--navy);color:#fff}
a.rv-chip.rv-go:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.rv-chip.rv-n{background:#fff8e6;border-color:#f0cf8a;color:#8a5a06;font-variant-numeric:tabular-nums}
.rv-chip.rv-done{background:#e6f4ea;border-color:#b7e0c4;color:#0b6e4f}
.rv-bar .rv-msg{font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill)}
.rv-bar .rv-msg.is-ok{background:#e6f4ea;color:#0b6e4f}
.rv-bar .rv-msg.is-err{background:#fdeaea;color:#9c1c1c}
.rv-tick{margin:0}
.rv-tick button{display:inline-flex;align-items:center;gap:5px;background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:6px 13px;font:inherit;font-size:12px;font-weight:800;line-height:1.35}
.rv-tick button:hover{background:var(--navy-700)}
.rv-tick.is-off button{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.rv-tick.is-off button:hover{border-color:var(--navy);background:var(--soft)}
.rv-flag{display:inline-flex;align-items:center;gap:5px;background:#fff8e6;color:#8a5a06;border:1px solid #f0cf8a;border-radius:var(--r-pill);padding:2px 9px;font-size:10.5px;font-weight:900;white-space:nowrap}
@media(max-width:600px){.rv-bar{padding:9px 11px;gap:8px}.rv-chip{padding:6px 11px;font-size:12.5px}}

/* ============================================================= *
   Chinese cars — premium home grid, brand siblings, founder zoom
   (owner: bigger logos on the home, a luxury feel, best-seller
   rank #1/#2…, sub-brands on the brand page, founder photo zoom)
   ============================================================= */
.car-lead{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--navy);font-size:15px;margin:18px 0 12px}
.car-lead-ic{font-size:20px}
.car-hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.car-hcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:linear-gradient(160deg,#ffffff 0%,#f6f8fd 100%);
  border:1px solid #e7ecf6;border-radius:20px;padding:22px 16px 18px;text-decoration:none;color:inherit;
  box-shadow:0 4px 16px rgba(13,41,102,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.car-hcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,41,102,.16);border-color:#c9d6ef}
.car-hcard.car-top{border-color:#e8cf8f;background:linear-gradient(160deg,#fffdf7 0%,#fbf5e6 100%)}
/* the luxury logo plate: big, glossy, softly lit */
.car-hlogo{width:104px;height:104px;display:grid;place-items:center;border-radius:22px;
  background:radial-gradient(120% 120% at 30% 20%,#ffffff 0%,#eef2fa 100%);
  border:1px solid rgba(13,41,102,.10);
  box-shadow:0 8px 22px rgba(13,41,102,.12),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden}
.car-hlogo::after{content:"";position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 45%);pointer-events:none}
.car-hlogo .car-logo-img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box;background:transparent;border:0;box-shadow:none}
.car-hlogo .car-logo-svg{width:82%;height:82%}
.car-hcard:hover .car-hlogo{box-shadow:0 12px 30px rgba(13,41,102,.2),inset 0 1px 0 rgba(255,255,255,.9)}
.car-hname{font-weight:900;color:var(--navy);font-size:15.5px;text-align:center;line-height:1.35}
.car-hname span{display:block;font-size:12px;color:var(--muted);font-weight:700}
.car-hsales{font-size:12.5px;color:#0b6e4f;font-weight:800}
.car-hsubs{font-size:11.5px;color:#96700f;background:#fbf3e0;border:1px solid #f0e0b8;border-radius:999px;padding:2px 10px;font-weight:800}
/* best-seller rank badge */
.car-rank{position:absolute;inset-block-start:10px;inset-inline-start:10px;
  background:linear-gradient(135deg,#0d2966,#1e478f);color:#fff;font-weight:900;font-size:12px;
  padding:3px 10px;border-radius:999px;box-shadow:0 3px 10px rgba(13,41,102,.3);white-space:nowrap}
.car-top .car-rank{background:linear-gradient(135deg,#caa24a,#a5791f);box-shadow:0 3px 12px rgba(165,121,31,.4)}
.car-rank-lg{position:static;display:inline-flex;align-items:center;font-size:12.5px;padding:5px 14px}
.car-bhero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}

/* group sub-brands row on the brand page */
.car-sibs{margin:18px 0}
.car-sibs-h{font-size:14px;color:var(--navy);font-weight:900;margin-bottom:10px}
.car-sibs-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.car-sib{flex:0 0 auto;width:104px;display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid #e7ecf6;border-radius:16px;padding:12px 8px;transition:transform .15s,box-shadow .15s,border-color .15s}
.car-sib:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(13,41,102,.12);border-color:#c9d6ef}
.car-sib-cur{border-color:#0d2966;background:#f4f7fd}
.car-sib-logo{width:60px;height:60px;display:grid;place-items:center;border-radius:14px;
  background:radial-gradient(120% 120% at 30% 20%,#fff 0%,#eef2fa 100%);border:1px solid rgba(13,41,102,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.car-sib-logo .car-logo-img{width:100%;height:100%;object-fit:contain;padding:9px;box-sizing:border-box;background:transparent;border:0;box-shadow:none}
.car-sib-logo .car-logo-svg{width:80%;height:80%}
.car-sib span{font-size:11.5px;font-weight:800;color:var(--navy);text-align:center;line-height:1.25}

/* founder photo zoom + lightbox */
.car-zoomable{cursor:zoom-in}
.car-lb{position:fixed;inset:0;z-index:9999;background:rgba(6,12,28,.86);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.car-lb[hidden]{display:none}
.car-lb img{max-width:92vw;max-height:88vh;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.car-lb-x{position:fixed;inset-block-start:16px;inset-inline-end:20px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer}
.car-lb-x:hover{background:rgba(255,255,255,.28)}
@media(max-width:560px){.car-hlogo{width:88px;height:88px}.car-hgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* ---- Buy this car with Yalla China (official channels) ---- */
.car-buy{margin:26px 0 8px}
.car-buy-card{border:1px solid var(--line,#e5e9f2);border-radius:18px;padding:20px 22px;
  background:linear-gradient(135deg,#0d2966 0%,#123a86 55%,#1b4bab 100%);color:#fff;
  box-shadow:0 14px 34px rgba(13,41,102,.24);position:relative;overflow:hidden}
.car-buy-card::after{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-10%;
  width:260px;height:260px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 60%);pointer-events:none}
.car-buy-head{display:flex;gap:14px;align-items:center;position:relative}
.car-buy-ic{font-size:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.car-buy-h{margin:0;font-size:20px;font-weight:900;color:#fff}
.car-buy-sub{margin:3px 0 0;font-size:13px;color:#d7e2fb;font-weight:600}
.car-buy-det{margin-top:16px;position:relative}
.car-buy-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  background:linear-gradient(135deg,#ffd24d,#f5a800);color:#3a2a00;font-weight:900;font-size:15px;
  padding:12px 22px;border-radius:12px;box-shadow:0 6px 16px rgba(245,168,0,.4);transition:transform .12s,box-shadow .12s;width:fit-content}
.car-buy-btn::-webkit-details-marker{display:none}
.car-buy-btn:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(245,168,0,.5)}
.car-buy-det[open] .car-buy-btn{margin-bottom:14px}
.car-buy-form{display:flex;flex-direction:column;gap:11px;background:#fff;border-radius:14px;padding:18px;
  max-width:520px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.car-buy-car{font-weight:800;color:var(--navy,#0d2966);background:var(--soft,#eef2fb);
  border-radius:9px;padding:8px 12px;font-size:14px}
.car-buy-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:800;color:var(--navy,#0d2966)}
.car-buy-form input,.car-buy-form textarea{font-family:inherit;font-size:14px;padding:11px 12px;
  border:1px solid var(--line,#d7deec);border-radius:10px;background:#fbfcff;color:#12213f;font-weight:600}
.car-buy-form input:focus,.car-buy-form textarea:focus{outline:none;border-color:#1b4bab;box-shadow:0 0 0 3px rgba(27,75,171,.15)}
.car-buy-form textarea{resize:vertical;min-height:64px}
.car-buy-send{margin-top:2px;background:linear-gradient(135deg,#16794a,#1ea363);color:#fff;border:0;
  border-radius:11px;padding:13px;font-family:inherit;font-size:15px;font-weight:900;cursor:pointer;
  box-shadow:0 6px 16px rgba(22,121,74,.32);transition:transform .12s}
.car-buy-send:hover{transform:translateY(-1px)}
.car-buy-note{margin:2px 0 0;font-size:12px;color:#5a6b86;font-weight:600;line-height:1.6}
.car-buy-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.car-buy-card{padding:16px}.car-buy-h{font-size:18px}.car-buy-btn{width:100%;justify-content:center}}


/* ==================================================================
   يالا AI — the full smart-assistant page (not a widget). Deep navy
   space with slow-drifting gradient orbs, a glass console, and a
   pulsing brand core, echoing this site's navy/gold identity but
   pushed into a premium "real AI product" register.
   ================================================================== */
.ai-page{position:relative;min-height:calc(100vh - 64px);overflow:hidden;
  background:radial-gradient(120% 90% at 15% -10%,#132b6e 0%,#0a1638 46%,#060c22 100%);color:#eaf0ff}
.ai-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ai-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:screen}
.ai-orb1{width:420px;height:420px;inset-inline-start:-120px;inset-block-start:-80px;
  background:radial-gradient(circle,#3b82f6,transparent 70%);animation:aiDrift1 22s ease-in-out infinite}
.ai-orb2{width:380px;height:380px;inset-inline-end:-100px;inset-block-start:120px;
  background:radial-gradient(circle,#f5a800,transparent 70%);animation:aiDrift2 26s ease-in-out infinite}
.ai-orb3{width:460px;height:460px;inset-inline-start:30%;inset-block-end:-200px;
  background:radial-gradient(circle,#8b5cf6,transparent 70%);animation:aiDrift3 30s ease-in-out infinite}
.ai-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;-webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 30%,transparent 80%);
  mask-image:radial-gradient(80% 60% at 50% 0%,#000 30%,transparent 80%)}
@keyframes aiDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.15)}}
@keyframes aiDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,30px) scale(1.1)}}
@keyframes aiDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.08)}}

.ai-wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:34px 18px 60px}

.ai-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ai-brand{display:flex;align-items:center;gap:14px}
.ai-logo{position:relative;width:54px;height:54px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6 55%,#f5a800);box-shadow:0 8px 26px rgba(59,130,246,.4)}
.ai-logo::before{content:"";position:absolute;inset:-6px;border-radius:20px;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6,#f5a800);opacity:.5;filter:blur(10px);z-index:-1;
  animation:aiLogoPulse 2.6s ease-in-out infinite}
.ai-logo-core{width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(255,255,255,.85);
  animation:aiCorePulse 2.6s ease-in-out infinite}
@keyframes aiLogoPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.12)}}
@keyframes aiCorePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.75}}
.ai-title{margin:0;font-size:26px;font-weight:900;letter-spacing:-.3px;
  background:linear-gradient(90deg,#fff,#bcd2ff 60%,#ffd98a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-sub{margin:3px 0 0;font-size:13.5px;color:#9fb2e0;font-weight:600}
.ai-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:999px}
.ai-badge-pro{background:linear-gradient(135deg,#ffd24d,#f5a800);color:#3a2a00;box-shadow:0 4px 14px rgba(245,168,0,.35)}
.ai-badge-free{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#cdd9f7}
.ai-quota{font-size:12.5px;font-weight:700;color:#9fb2e0;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:8px 14px;border-radius:999px}

.ai-flash{background:rgba(30,163,99,.16);border:1px solid rgba(30,163,99,.4);color:#8ff0c0;
  padding:12px 16px;border-radius:12px;font-weight:700;font-size:13.5px;margin-bottom:16px}

.ai-upsell{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:20px;padding:16px 20px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(139,92,246,.22),rgba(245,168,0,.16));
  border:1px solid rgba(255,255,255,.14)}
.ai-upsell::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.12),transparent);
  background-size:220% 100%;animation:aiSheen 5s linear infinite;pointer-events:none}
@keyframes aiSheen{0%{background-position:130% 0}100%{background-position:-30% 0}}
.ai-upsell-txt{display:flex;flex-direction:column;gap:4px;position:relative}
.ai-upsell-txt b{font-size:15px;color:#ffe4a8}
.ai-upsell-txt span{font-size:13px;color:#cdd9f7;font-weight:600}
.ai-upsell-btn{position:relative;border:0;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:900;
  padding:12px 22px;border-radius:12px;color:#3a2a00;background:linear-gradient(135deg,#ffd24d,#f5a800);
  box-shadow:0 8px 20px rgba(245,168,0,.4);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.ai-upsell-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(245,168,0,.5)}

.ai-offline{padding:40px 20px;text-align:center;border-radius:18px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);color:#9fb2e0;font-weight:700}

.ai-console{border-radius:22px;background:rgba(15,23,55,.55);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;overflow:hidden}

.ai-messages{display:flex;flex-direction:column;gap:14px;padding:22px;max-height:56vh;min-height:280px;overflow-y:auto}
.ai-msg{display:flex;align-items:flex-end;gap:10px;animation:aiMsgIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes aiMsgIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ai-msg-user{flex-direction:row-reverse}
.ai-avatar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.ai-msg-user .ai-avatar{background:linear-gradient(135deg,#3b82f6,#8b5cf6)}
.ai-bubble{max-width:76%;padding:12px 16px;border-radius:16px;font-size:14.5px;line-height:1.7;font-weight:600;
  white-space:pre-wrap;word-break:break-word}
.ai-msg-bot .ai-bubble{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-end-start-radius:5px;color:#e6ecff}
.ai-msg-user .ai-bubble{background:linear-gradient(135deg,#3b82f6,#6d5bd0);border-end-end-radius:5px;color:#fff}
.ai-links{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:44px}
.ai-link-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:8px 13px;border-radius:999px;background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.35);
  color:#bcd2ff;text-decoration:none;transition:transform .12s,background .12s}
.ai-link-chip:hover{transform:translateY(-1px);background:rgba(59,130,246,.28)}

.ai-suggests{display:flex;flex-wrap:wrap;gap:9px;margin-inline-start:44px}
.ai-chip{font-family:inherit;font-size:13px;font-weight:700;color:#cdd9f7;cursor:pointer;
  padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:transform .12s,background .12s,border-color .12s;animation:aiChipIn .4s ease backwards}
.ai-chip:nth-child(1){animation-delay:.05s}.ai-chip:nth-child(2){animation-delay:.15s}
.ai-chip:nth-child(3){animation-delay:.25s}.ai-chip:nth-child(4){animation-delay:.35s}
@keyframes aiChipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai-chip:hover{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.4);color:#fff;transform:translateY(-1px)}

.ai-typing .ai-bubble,.ai-bubble.ai-typing{display:inline-flex;gap:5px;padding:14px 16px;align-items:center}
.ai-bubble.ai-typing span{width:7px;height:7px;border-radius:50%;background:#9fb2e0;animation:aiTypingDot 1.2s ease-in-out infinite}
.ai-bubble.ai-typing span:nth-child(2){animation-delay:.15s}
.ai-bubble.ai-typing span:nth-child(3){animation-delay:.3s}
@keyframes aiTypingDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.ai-form{display:flex;align-items:flex-end;gap:10px;padding:16px 20px;border-top:1px solid rgba(255,255,255,.1)}
.ai-form textarea{flex:1;resize:none;font-family:inherit;font-size:14.5px;color:#eaf0ff;font-weight:600;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:14px;
  padding:12px 16px;max-height:140px;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.ai-form textarea::placeholder{color:#7c8bb8}
.ai-form textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.ai-form textarea:disabled{opacity:.5}
.ai-send{flex:none;width:46px;height:46px;border-radius:14px;border:0;cursor:pointer;font-size:18px;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;box-shadow:0 8px 20px rgba(59,130,246,.4);
  transition:transform .15s,box-shadow .15s}
.ai-send:hover:not(:disabled){transform:translateY(-2px) scale(1.04)}
.ai-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.ai-disclaimer{margin:0;padding:0 20px 16px;font-size:11.5px;color:#7c8bb8;font-weight:600;text-align:center}

.ai-messages::-webkit-scrollbar{width:8px}
.ai-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}

@media(max-width:640px){
  .ai-title{font-size:21px}
  .ai-bubble{max-width:86%}
  .ai-links,.ai-suggests{margin-inline-start:0}
  .ai-messages{max-height:60vh}
}
@media(prefers-reduced-motion:reduce){
  .ai-orb,.ai-logo::before,.ai-logo-core,.ai-upsell::after,.ai-chip,.ai-msg,.ai-bubble.ai-typing span{animation:none!important}
}

/* ============================================================================
   Icon system — treatment B (glow), site-wide.

   Icons are inline SVG from includes/icons.php: line work over a low-opacity
   wash, both drawn in currentColor, so an icon takes the colour of whatever
   contains it and scales from its font-size. Each sits in a rounded tile; on
   hover the tile lifts, a soft coloured halo blooms behind it, the wash
   deepens and the stroke thickens slightly.

   The halo is a ::after on the tile with a negative inset and a blur, sitting
   at z-index -1 so it never covers the glyph. Tiles therefore need their own
   stacking context — position:relative is part of .yc-tile, not optional.

   The gold pulse at the bottom is a separate signal, not a hover state: it
   marks paid and featured placements and runs without interaction.
   ========================================================================= */
.yc-ico{width:1em;height:1em;display:block;flex:none;overflow:visible}
.yc-ico .yc-ico-wash{opacity:.14;transition:opacity .28s}
.yc-ico .yc-ico-line{transition:stroke-width .28s}

.yc-tile{--c:#0b6e4f;position:relative;display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:12px;font-size:20px;color:var(--c);
  background:linear-gradient(150deg,#f4faf7,#fff);border:1px solid #e2efe8;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s,background .28s,border-color .28s}
.yc-tile::after{content:"";position:absolute;inset:-4px;border-radius:16px;z-index:-1;
  background:radial-gradient(closest-side,var(--c),transparent);opacity:0;filter:blur(9px);transition:opacity .3s}

/* The hover is driven from the ROW, not the tile, so the whole card reacts
   together — hovering the label lights the icon too. */
.city-place:hover .yc-tile,
.cl-quick-i:hover .yc-tile,
.city-explore-i:hover .yc-tile,
.city-facts .cf-link:hover .yc-tile,
.prov-card:hover .yc-tile,
.mk-shop:hover .yc-tile,
.yc-hoverable:hover .yc-tile{
  transform:translateY(-3px);border-color:var(--c);background:linear-gradient(150deg,#eaf6f0,#fff)}
.city-place:hover .yc-tile::after,
.cl-quick-i:hover .yc-tile::after,
.city-explore-i:hover .yc-tile::after,
.city-facts .cf-link:hover .yc-tile::after,
.prov-card:hover .yc-tile::after,
.mk-shop:hover .yc-tile::after,
.yc-hoverable:hover .yc-tile::after{opacity:.55}
.city-place:hover .yc-ico .yc-ico-wash,
.cl-quick-i:hover .yc-ico .yc-ico-wash,
.city-explore-i:hover .yc-ico .yc-ico-wash,
.city-facts .cf-link:hover .yc-ico .yc-ico-wash,
.prov-card:hover .yc-ico .yc-ico-wash,
.yc-hoverable:hover .yc-ico .yc-ico-wash{opacity:.3}
.city-place:hover .yc-ico .yc-ico-line,
.cl-quick-i:hover .yc-ico .yc-ico-line,
.city-explore-i:hover .yc-ico .yc-ico-line,
.city-facts .cf-link:hover .yc-ico .yc-ico-line,
.yc-hoverable:hover .yc-ico .yc-ico-line{stroke-width:1.95}

/* Per-component sizing. Deliberately close to the glyph sizes these rows had
   before: the quick-links panel and the place rows sit inside height-matched
   grids, and one uniform tile size would grow them and break that alignment. */
.city-facts .yc-tile{width:32px;height:32px;border-radius:10px;font-size:17px;margin-bottom:4px}
.city-place .yc-tile{width:36px;height:36px;border-radius:11px;font-size:19px}
.cl-quick-i .yc-tile{width:26px;height:26px;border-radius:8px;font-size:14px}
.city-explore-i .yc-tile{width:44px;height:44px;border-radius:14px;font-size:23px}
.prov-card .pc-head .yc-tile{width:30px;height:30px;border-radius:9px;font-size:16px}
.ublock>h2 .yc-tile{width:34px;height:34px;border-radius:11px;font-size:19px}
.clw-head .yc-ico{font-size:19px;color:#0b6e4f}

/* Reversed out on the navy header: white line work, glass tile, no halo (it
   would haze the bar). */
.nav .ico .yc-ico,.navdrawer .yc-ico{font-size:19px;color:#fff}
.nav .ico .yc-ico .yc-ico-wash{opacity:.32}
.nav a:hover .ico .yc-ico{transform:translateY(-2px)}
.nav .ico .yc-ico{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}

/* Paid / featured: a gold pulse that runs on its own. */
.yc-tile.yc-gold{--c:#c9992e;background:linear-gradient(150deg,#fffaf0,#fff);border-color:#efdcae;
  animation:yc-pulse 2.4s ease-in-out infinite}
@keyframes yc-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,154,46,.45)}
  55%    {box-shadow:0 0 0 12px rgba(201,154,46,0)}
}

/* Nearest-city / hub rows keep their travel cue (direction-aware). */
.near-city,.hub-city{transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.near-city:hover,.hub-city:hover{transform:translateX(-3px);border-color:#0b6e4f;background:#f4faf7;box-shadow:0 4px 12px rgba(11,110,79,.1)}
[dir="ltr"] .near-city:hover,[dir="ltr"] .hub-city:hover{transform:translateX(3px)}
.near-city .yc-ico,.hub-city .yc-ico{font-size:15px;color:#7c8a80}

.mk-shop.mks-gold:hover .mks-crown{animation:yc-crown 1.1s ease-in-out infinite}
@keyframes yc-crown{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.05)}}

@media (prefers-reduced-motion: reduce){
  .yc-tile,.yc-tile::after,.yc-ico,.yc-ico *,.near-city,.hub-city,.mk-shop.mks-gold .mks-crown{
    transition:none!important;animation:none!important}
  .city-place:hover .yc-tile,.cl-quick-i:hover .yc-tile,.city-explore-i:hover .yc-tile,
  .city-facts .cf-link:hover .yc-tile,.prov-card:hover .yc-tile,.yc-hoverable:hover .yc-tile,
  .near-city:hover,.hub-city:hover,.nav a:hover .ico .yc-ico{transform:none!important}
}

/* ============================================================
   University-application service
   apply-university.php (landing + form), uni-application.php
   (the student's file) and admin/uni-applications.php.
   ============================================================ */
/* --- landing hero --- */
.ua-hero{position:relative;overflow:hidden;border-radius:22px;margin-top:14px;min-height:300px;
  display:flex;align-items:center;background:#0f2038;color:#fff}
.ua-hero .sc-hero-photo{border-radius:22px}
.ua-hero-in{position:relative;z-index:2;padding:36px 34px;max-width:min(660px,100%)}
.ua-badge{display:inline-flex;align-items:center;gap:7px;background:#e8202a;color:#fff;
  padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:800;margin-bottom:13px}
.ua-hero h1{margin:0 0 10px;font-size:34px;font-weight:900;letter-spacing:-.6px;line-height:1.25;color:#fff}
.ua-hero p{margin:0 0 18px;font-size:15.5px;line-height:1.75;color:#c9d6f0;max-width:52ch}
.ua-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.uap-amt{font-size:40px;font-weight:900;letter-spacing:-1.5px;color:#fff;
  text-shadow:0 0 28px rgba(140,190,255,.45)}
.uap-per{font-size:13px;font-weight:700;color:#c9d6f0}
.uap-cny{font-size:13px;font-weight:800;color:#e9b949}
.ua-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:#0f2038;border:0;font-family:inherit;cursor:pointer;
  padding:13px 30px;border-radius:999px;font-size:15px;font-weight:900;text-decoration:none;
  box-shadow:0 10px 26px rgba(4,14,36,.3);transition:transform .16s ease,box-shadow .16s ease}
.ua-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(4,14,36,.38);text-decoration:none;color:#0f2038}
.ua-cta .arr{transition:transform .18s ease}
.ua-cta:hover .arr{transform:translateX(-4px)}
html[dir="ltr"] .ua-cta .arr{transform:scaleX(-1)}
html[dir="ltr"] .ua-cta:hover .arr{transform:scaleX(-1) translateX(-4px)}
.ua-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ua-trust span{font-size:12px;font-weight:700;color:#dbe5f8;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:5px 13px}

/* --- why us --- */
.ua-sec{margin:26px 0}
.ua-h2{text-align:center;font-size:24px;font-weight:900;color:var(--navy);margin:0 0 20px;position:relative}
.ua-h2::after{content:"";display:block;width:54px;height:3px;border-radius:2px;background:#e8202a;margin:10px auto 0}
.ua-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.uaw-card{background:#fff;border:1px solid #e8ecf3;border-radius:18px;padding:22px 18px;text-align:center;
  box-shadow:0 2px 10px rgba(16,32,56,.06);transition:transform .18s ease,box-shadow .18s ease}
.uaw-card:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(16,32,56,.13)}
.uaw-ic{width:52px;height:52px;margin:0 auto 13px;border-radius:16px;display:grid;place-items:center;
  color:#fff;box-shadow:0 8px 20px rgba(16,32,56,.22)}
.uaw-ic svg{width:25px;height:25px}
.uaw-0 .uaw-ic{background:linear-gradient(145deg,#8b5cf6,#6d28d9)}
.uaw-1 .uaw-ic{background:linear-gradient(145deg,#3b82f6,#1d4ed8)}
.uaw-2 .uaw-ic{background:linear-gradient(145deg,#22c55e,#15803d)}
.uaw-3 .uaw-ic{background:linear-gradient(145deg,#f43f5e,#be123c)}
.uaw-card h3{margin:0 0 7px;font-size:16px;font-weight:900;color:var(--navy)}
.uaw-card p{margin:0;font-size:13px;line-height:1.7;color:#64748b}

/* --- steps band --- */
.ua-steps-band{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;align-items:center;
  border-radius:22px;padding:28px 30px;margin:26px 0;color:#fff;
  background:linear-gradient(135deg,#132a4a 0%,#0f2038 58%,#16325a 100%)}
.ua-steps-side h2{margin:0 0 9px;font-size:23px;font-weight:900;color:#fff}
.ua-steps-side p{margin:0 0 14px;font-size:14px;line-height:1.75;color:#c2d0ea}
.ua-inc{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ua-inc li{position:relative;padding-inline-start:26px;font-size:13.5px;font-weight:600;color:#dce6f8;line-height:1.6}
.ua-inc li::before{content:"✓";position:absolute;inset-inline-start:0;top:1px;width:18px;height:18px;
  border-radius:50%;background:rgba(34,197,94,.22);color:#7ff0b0;font-size:11px;font-weight:900;
  display:grid;place-items:center}
.ua-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ua-steps li{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:16px 15px 14px;display:flex;flex-direction:column;gap:4px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.uas-n{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;margin-bottom:5px;
  font-size:14px;font-weight:900;color:#fff;box-shadow:0 6px 16px rgba(4,14,36,.34)}
.uas-0 .uas-n{background:linear-gradient(145deg,#8b5cf6,#6d28d9)}
.uas-1 .uas-n{background:linear-gradient(145deg,#3b82f6,#1d4ed8)}
.uas-2 .uas-n{background:linear-gradient(145deg,#22c55e,#15803d)}
.uas-3 .uas-n{background:linear-gradient(145deg,#f59e0b,#b45309)}
.ua-steps li b{font-size:14.5px;font-weight:900;color:#fff}
.ua-steps li span:last-child{font-size:12.5px;line-height:1.6;color:#bccbe6}

/* --- the form --- */
.ua-formwrap{background:#fff;border:1px solid #e8ecf3;border-radius:22px;padding:28px 28px 26px;
  margin:26px 0;box-shadow:0 2px 12px rgba(16,32,56,.06);scroll-margin-top:90px}
.ua-formhead{text-align:center;margin-bottom:20px}
.ua-formhead h2{margin:0 0 6px;font-size:23px;font-weight:900;color:var(--navy)}
.ua-formhead p{margin:0;font-size:13.5px;color:#64748b;line-height:1.7}
.ua-fs{display:flex;align-items:center;gap:11px;margin:20px 0 12px}
.ua-fs::after{content:"";flex:1;height:1px;background:#eef2f7}
.ua-fs-t{font-size:14px;font-weight:900;color:var(--navy);padding-inline-start:12px;
  border-inline-start:4px solid #e8202a;line-height:1.2}
.ua-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.ua-form label{display:flex;flex-direction:column;gap:5px}
.ua-form label>span{font-size:12.5px;font-weight:800;color:#42536b}
.ua-form input,.ua-form select,.ua-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;
  padding:11px 13px;border:1.5px solid #e2e8f2;border-radius:12px;background:#fff;color:var(--navy);
  transition:border-color .15s ease,box-shadow .15s ease}
.ua-form input:focus,.ua-form select:focus,.ua-form textarea:focus{outline:none;border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.ua-form .ua-full{margin-top:14px}
.ua-check{flex-direction:row!important;align-items:center;gap:9px!important;align-self:end;padding-bottom:10px}
.ua-check input{width:18px;height:18px;flex:none;accent-color:#2563eb}
.ua-check span{font-size:13.5px!important;font-weight:700!important;color:var(--navy)!important}
.ua-submit{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;
  padding-top:18px;border-top:1px solid #eef2f7}
.ua-submit .ua-cta{background:linear-gradient(150deg,#2563eb,#1d4ed8);color:#fff;
  box-shadow:0 10px 26px rgba(37,99,235,.34)}
.ua-submit .ua-cta:hover{color:#fff}
.ua-note{font-size:12.5px;color:#64748b;font-weight:600}

/* --- the file (student + admin share these) --- */
.uf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid #e8ecf3;border-radius:20px;padding:20px 22px;margin:14px 0 16px;
  box-shadow:0 2px 10px rgba(16,32,56,.06)}
.uf-ref{display:inline-block;font-size:12px;font-weight:900;letter-spacing:1px;color:#2563eb;
  background:rgba(37,99,235,.10);border-radius:999px;padding:3px 11px;margin-bottom:8px}
.uf-head h1{margin:0 0 5px;font-size:23px;font-weight:900;color:var(--navy)}
.uf-head p{margin:0;font-size:13.5px;color:#64748b;font-weight:600}
.uf-status{flex:none;font-size:12px;font-weight:900;padding:6px 14px;border-radius:999px;
  background:#eef2f7;color:#475569;white-space:nowrap}
.uf-status.s-new{background:#eff6ff;color:#1d4ed8}
.uf-status.s-review{background:#f5f3ff;color:#6d28d9}
.uf-status.s-payment{background:#fff7ed;color:#c2410c}
.uf-status.s-paid,.uf-status.s-offer{background:#ecfdf5;color:#047857}
.uf-status.s-documents{background:#fefce8;color:#a16207}
.uf-status.s-submitted{background:#eff6ff;color:#1e40af}
.uf-status.s-visa{background:#fdf2f8;color:#be185d}
.uf-status.s-done{background:#dcfce7;color:#15803d}
.uf-status.s-cancelled{background:#fee2e2;color:#b91c1c}

/* pipeline */
.uf-track{display:flex;gap:6px;overflow-x:auto;padding:16px 18px;margin-bottom:16px;
  background:#fff;border:1px solid #e8ecf3;border-radius:20px;box-shadow:0 2px 10px rgba(16,32,56,.06)}
.uft-step{flex:1 1 0;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;text-align:center}
.uft-step::before{content:"";position:absolute;top:14px;inset-inline-start:50%;width:100%;height:2px;
  background:#e8ecf3;z-index:0}
.uft-step:last-child::before{display:none}
.uft-step.done::before{background:#22c55e}
.uft-dot{position:relative;z-index:1;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:900;background:#eef2f7;color:#94a3b8;border:2px solid #fff;
  box-shadow:0 0 0 1px #e8ecf3}
.uft-step.done .uft-dot{background:#22c55e;color:#fff;box-shadow:0 0 0 1px #22c55e}
.uft-step.on .uft-dot{background:#2563eb;color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.uft-l{font-size:11px;font-weight:800;color:#94a3b8;line-height:1.35}
.uft-step.done .uft-l{color:#15803d}
.uft-step.on .uft-l{color:#1d4ed8}

.uf-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.uf-card{background:#fff;border:1px solid #e8ecf3;border-radius:20px;padding:20px 22px;margin-bottom:16px;
  box-shadow:0 2px 10px rgba(16,32,56,.06)}
.uf-card h2{margin:0 0 6px;font-size:17px;font-weight:900;color:var(--navy)}
.uf-pay-sub,.uf-thread-sub{margin:0 0 14px;font-size:13px;color:#64748b;line-height:1.7}
.uf-fee{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;
  background:linear-gradient(135deg,#132a4a,#16325a);color:#fff;margin-bottom:14px}
.uff-amt{font-size:29px;font-weight:900;letter-spacing:-1px}
.uff-cny{font-size:13px;font-weight:800;color:#e9b949}
.uff-ref{font-size:12.5px;color:#c2d0ea;font-weight:600;margin-inline-start:auto}
.uff-ref b{color:#fff;letter-spacing:1px}
.uf-proof-have{font-size:13px;font-weight:700;color:#047857;background:#ecfdf5;border-radius:12px;
  padding:9px 13px;margin-bottom:12px}
.uf-payform{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;align-items:end}
.uf-payform label{display:flex;flex-direction:column;gap:5px}
.uf-payform label>span{font-size:12.5px;font-weight:800;color:#42536b}
.uf-payform input,.uf-payform select{width:100%;box-sizing:border-box;font:inherit;font-size:14px;
  padding:10px 12px;border:1.5px solid #e2e8f2;border-radius:11px}
.uf-payform .ua-cta{background:linear-gradient(150deg,#16a34a,#15803d);color:#fff;padding:11px 22px;font-size:14px}
.uf-payform .ua-cta:hover{color:#fff}

/* thread */
.uf-msgs{display:flex;flex-direction:column;gap:11px;max-height:520px;overflow-y:auto;padding:4px 2px 10px}
.ufm{max-width:82%;border-radius:15px;padding:11px 14px;font-size:13.5px;line-height:1.7}
.ufm.me{align-self:flex-start;background:linear-gradient(150deg,#2563eb,#1d4ed8);color:#fff}
.ufm.them{align-self:flex-end;background:#f2f5fa;color:var(--navy)}
.ufm.sys{align-self:center;max-width:100%;background:transparent;padding:2px 0;
  display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;color:#94a3b8}
.ufm.sys i{font-style:normal;font-size:10.5px;font-weight:600}
.ufm-who{font-size:11px;font-weight:800;opacity:.75;margin-bottom:4px}
.ufm-who i{font-style:normal;font-weight:600}
.ufm-b{white-space:pre-wrap;word-break:break-word}
.ufm-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ufm-files img{width:92px;height:70px;object-fit:cover;border-radius:9px;display:block}
.ufm-doc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;
  padding:6px 11px;border-radius:9px;background:rgba(255,255,255,.22);color:inherit;text-decoration:none}
.ufm.them .ufm-doc{background:#e2e8f2}
.uf-send{margin-top:14px;padding-top:14px;border-top:1px solid #eef2f7;display:flex;flex-direction:column;gap:9px}
.uf-send textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:11px 13px;
  border:1.5px solid #e2e8f2;border-radius:12px;resize:vertical}
.uf-send textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.uf-send-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.uf-attach{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#2563eb;
  background:rgba(37,99,235,.09);border-radius:11px;padding:9px 14px;cursor:pointer}
.uf-attach input{display:none}
.uf-send .ua-cta{background:linear-gradient(150deg,#2563eb,#1d4ed8);color:#fff;padding:10px 26px;font-size:14px;
  margin-inline-start:auto}
.uf-send .ua-cta:hover{color:#fff}
.uf-hint{font-size:11.5px;color:#94a3b8;font-weight:600}

/* side summary */
.uf-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:13px}
.uf-dl dt{font-weight:800;color:#64748b;white-space:nowrap}
.uf-dl dd{margin:0;color:var(--navy);font-weight:700;word-break:break-word}
.uf-since{margin-top:14px;padding-top:12px;border-top:1px solid #eef2f7;font-size:12px;color:#94a3b8;font-weight:700}
.uf-notes{margin-top:13px;padding:12px 14px;border-radius:12px;background:#f8fafc;font-size:13px;
  line-height:1.7;color:#42536b}

/* admin queue */
.uf-admform{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.uf-admform select{font:inherit;font-size:14px;padding:10px 13px;border:1.5px solid #e2e8f2;border-radius:11px}
.uf-admform .ua-cta{background:linear-gradient(150deg,#2563eb,#1d4ed8);color:#fff;padding:10px 22px;font-size:14px}
.uf-paidat{font-size:12.5px;font-weight:800;color:#047857}
.uf-payinfo{margin-top:14px;padding:11px 14px;border-radius:12px;background:#f8fafc;font-size:13px;color:#42536b}
.ua-qchips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.ua-qchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;text-decoration:none;
  color:var(--navy);background:#fff;border:1.5px solid #e8ecf3;border-radius:999px;padding:7px 14px;transition:.15s}
.ua-qchip:hover{border-color:#2563eb;text-decoration:none}
.ua-qchip.on{background:#2563eb;border-color:#2563eb;color:#fff}
.ua-qchip i{font-style:normal;font-size:11px;font-weight:900;background:rgba(37,99,235,.12);
  color:#2563eb;border-radius:999px;padding:1px 7px}
.ua-qchip.on i{background:rgba(255,255,255,.25);color:#fff}
.ua-unread{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-inline-start:6px;
  border-radius:999px;background:#e8202a;color:#fff;font-size:11px;font-weight:900}

/* account block */
.ua-mylist{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.ua-myrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;text-decoration:none;
  background:#f8fafc;border:1px solid #e8ecf3;border-radius:14px;padding:11px 14px;transition:.15s}
.ua-myrow:hover{border-color:#2563eb;background:#fff;text-decoration:none}
.uam-ref{font-size:12px;font-weight:900;letter-spacing:.8px;color:#2563eb}
.uam-t{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--navy)}

@media(max-width:900px){
  .ua-steps-band{grid-template-columns:1fr;gap:18px;padding:22px 20px}
  .uf-cols{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ua-hero{min-height:0}
  .ua-hero-in{padding:26px 20px}
  .ua-hero h1{font-size:25px}
  .uap-amt{font-size:32px}
  .ua-h2{font-size:20px}
  .ua-steps{grid-template-columns:1fr}
  .ua-formwrap{padding:20px 16px}
  .ua-grid{grid-template-columns:1fr}
  .uf-head{padding:16px}
  .uf-head h1{font-size:19px}
  .uf-card{padding:16px}
  .uft-step{min-width:74px}
  .uft-l{font-size:10px}
  .ufm{max-width:92%}
  .uf-dl{grid-template-columns:1fr;gap:2px 0}
  .uf-dl dd{margin-bottom:7px}
}

/* Eligibility verdict — the panel that answers "can I actually study in China?"
   before anyone is asked to pay. Same markup on the form (live, from JS) and on
   the student's file (authoritative, from PHP). */
.ua-elig{border-radius:18px;padding:20px 22px;margin:22px 0;border:1.5px solid;
  animation:uaePop .28s cubic-bezier(.34,1.4,.64,1)}
@keyframes uaePop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ua-elig{animation:none}}
.ua-elig.lvl-yes{background:#f0fdf4;border-color:#86efac}
.ua-elig.lvl-conditional{background:#fffbeb;border-color:#fcd34d}
.ua-elig.lvl-no{background:#fef2f2;border-color:#fca5a5}
.uae-head{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.uae-ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;font-weight:900;color:#fff}
.lvl-yes .uae-ic{background:#16a34a}
.lvl-conditional .uae-ic{background:#d97706}
.lvl-no .uae-ic{background:#dc2626}
.uae-h{font-size:18px;font-weight:900;line-height:1.35}
.lvl-yes .uae-h{color:#15803d}
.lvl-conditional .uae-h{color:#b45309}
.lvl-no .uae-h{color:#b91c1c}
.uae-s{margin:0 0 14px;font-size:13.5px;line-height:1.75;color:#42536b}
.uae-block{margin-top:13px}
.uae-block>b{display:block;font-size:12.5px;font-weight:900;color:#42536b;margin-bottom:7px}
.uae-block ul,.uae-block ol{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.uae-block li{font-size:13.5px;line-height:1.7;color:#33465e}
.uae-block ol li{font-weight:600}
.uae-block ul{list-style:none;padding-inline-start:0}
.uae-block ul li{position:relative;padding-inline-start:20px}
.uae-block ul li::before{content:"•";position:absolute;inset-inline-start:4px;font-weight:900}
.lvl-no .uae-block ul li::before{color:#dc2626}
.lvl-conditional .uae-block ul li::before{color:#d97706}
.lvl-yes .uae-block ul li::before{color:#16a34a}
.uae-chips{display:flex;flex-wrap:wrap;gap:7px}
.uae-chips span{font-size:12.5px;font-weight:700;color:#15803d;background:rgba(22,163,74,.12);
  border-radius:999px;padding:5px 13px}
.uae-pay{margin-top:16px;background:linear-gradient(150deg,#16a34a,#15803d);color:#fff;
  box-shadow:0 10px 26px rgba(21,128,61,.32)}
.uae-pay:hover{color:#fff}
@media(max-width:600px){
  .ua-elig{padding:16px}
  .uae-h{font-size:15.5px}
}

/* ---- Cities directory: the ten biggest, as a quick-access row --------------
   Most visitors arrive wanting one of ten cities; the province cascade below
   makes them hunt for it. Rank badge first so the row reads as a list, not as
   ten equal chips. Scrolls sideways on a phone rather than wrapping to five
   rows of stubs. */
.ct10{margin:18px 0 6px}
.ct10 h2{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:900;color:var(--navy);margin:0 0 12px}
.ct10 h2 span{font-size:22px;line-height:1}
.ct10-row{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.ct10-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;position:relative;
  padding:12px 14px 12px 40px;border:1px solid var(--line);border-radius:13px;background:#fff;
  text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(16,32,72,.06);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
html[dir="rtl"] .ct10-c{padding:12px 40px 12px 14px}
.ct10-c:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,32,72,.14);border-color:#c9d3e6}
.ct10-r{position:absolute;top:12px;inset-inline-start:12px;width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;
  background:linear-gradient(140deg,#0d2966,#1b4bb0);color:#fff}
.ct10-t{font-size:15px;font-weight:800;color:var(--navy);line-height:1.25}
.ct10-p{font-size:11.5px;font-weight:700;color:#7c8a9f;line-height:1.3}
@media(max-width:1000px){.ct10-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){
  .ct10-row{display:flex;overflow-x:auto;gap:9px;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .ct10-c{flex:0 0 62%;scroll-snap-align:start}
}

/* ---- 出国留学 / study abroad (Chinese locale only) ------------------------
   A separate visual identity from the China-inbound study pages on purpose:
   the reader is a Chinese student going out, not an Arab student coming in,
   and the two must never be mistaken for one another mid-browse. */
.ab-hero{background:radial-gradient(120% 140% at 10% -10%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,#12224d,#1c3a86 55%,#2455bd);min-height:auto;padding:34px 32px}
.ab-hero .sc-hero-body{padding:0;max-width:100%}
.ab-hero h1{margin:6px 0 8px}
.ab-hero p{max-width:760px;line-height:1.75}
.ab-h{font-size:21px;font-weight:900;color:var(--navy);margin:26px 0 14px}

/* package strip */
.ab-pack{margin:22px 0 8px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#f7f9ff,#fff)}
.ab-pack h2{font-size:19px;font-weight:900;color:var(--navy);margin:0 0 16px}
.ab-pack-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ab-pack-c{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #e3e9f5;border-radius:14px;background:#fff}
.ab-pack-c .ap-ico{font-size:26px;line-height:1}
.ab-pack-c b{font-size:15px;font-weight:900;color:var(--navy)}
.ab-pack-c span:last-child{font-size:13px;line-height:1.7;color:#5d6a80}
.ab-pack-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding:16px 20px;border-radius:14px;background:linear-gradient(135deg,#0d2966,#1b4bb0);color:#fff}
.ab-pack-cta-b{margin:22px 0 8px}
.apc-price{font-size:30px;font-weight:900;line-height:1}
.apc-price i{font-size:13px;font-weight:700;font-style:normal;opacity:.85;margin-inline-start:8px}
.apc-btn{background:#e9b949;color:#12224d;font-weight:900;font-size:15px;padding:12px 22px;border-radius:11px;text-decoration:none;white-space:nowrap}
.apc-btn:hover{background:#f5c95f}

/* study-abroad banner — the owner's finished artwork for the landing page.
   Above 760px it replaces the HTML hero and the four package cards, which are
   drawn into the picture itself; below 760px the artwork is dropped (the
   <picture> swaps in a 1x1 so the file is never fetched) and the HTML hero and
   cards come back, because the banner's baked type is unreadable at phone
   width. Only one of the two is ever on screen. */
.ab-banner{position:relative;display:block;margin:0 0 18px;container-type:inline-size}
.ab-banner img{display:block;width:100%;height:auto;border-radius:18px;
  box-shadow:0 8px 30px rgba(16,32,72,.14)}
/* The four live figures, sitting in the clear band the artwork leaves at
   y 49–61% over the globe. Sized in container units so they scale with the
   banner instead of the viewport, and given a translucent card so they read
   over the illustration without hiding it. */
.abb-stats{position:absolute;left:5.5%;top:47.4%;width:54.5%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw}
.abb-stats>span{display:block;text-align:center;border-radius:1.1cqw;
  padding:1.5cqw .5cqw 1.6cqw;background:rgba(255,255,255,.9);
  border:1px solid rgba(120,150,210,.30);
  box-shadow:0 .3cqw 1.2cqw rgba(20,45,110,.10)}
.abb-stats b{display:block;font-size:2.5cqw;font-weight:900;color:#12245c;line-height:1.1;
  white-space:nowrap}
.abb-stats i{display:block;font-size:1.15cqw;font-style:normal;font-weight:700;
  color:#4a5a7a;margin-top:.35cqw;white-space:nowrap}
@media(min-width:760px){
  .ab-hero-alt{display:none}
  .ab-pack-alt>h2,.ab-pack-alt>.ab-pack-row{display:none}
  .ab-pack-alt{padding-top:0;border:0;background:none;box-shadow:none}
}
@media(max-width:759px){
  .ab-banner{display:none}
}

/* NOTE ON THE CLASS PREFIX: these are ccard-*, not abc-*, because the country
   card and the university card sit in the same stylesheet and the university
   card already owns .abc-go, .abc-t and friends. While both used .abc-go the
   later rule won on every card: the label rendered in the university card's
   grey (#8a95a8) instead of white, which was invisible against the red bars
   and turned blue on hover. Anything belonging to a country card is ccard-*.

   country grid — the owner's per-country artwork with live text laid over it.
   The card is one PNG frame per destination: flag ribbon, landmark photo, an
   empty white panel and a navy footer holding a mortarboard and a dashed slot.
   Nothing is baked in except the artwork, so the university count updates
   itself and the copy stays real text (selectable, translatable, indexable).

   Every offset below is a percentage of the ARTWORK, measured off the files
   themselves after cropping each one to its own card bounds — the frames come
   out of the design tool with slightly different page margins, and aligning to
   the raw PNG would drift the count away from the mortarboard by a few percent
   on half the set. The <img> carries its own aspect ratio, so the percentages
   hold at every width without a hard-coded ratio to stretch or clip. */
.ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:26px}
.ab-c{position:relative;display:block;text-decoration:none;color:inherit;border-radius:14px;
  container-type:inline-size;
  transition:transform .16s ease,filter .16s ease}
.ab-c:hover{transform:translateY(-4px);filter:drop-shadow(0 14px 26px rgba(16,32,72,.22))}
.ccard-art{display:block;width:100%;height:auto;border-radius:14px}

/* white panel: x 2–69%, y ~11–78% of the frame. Kept well inside so a long
   country name can never touch the border or run under the landmark photo. */
.ccard-txt{position:absolute;left:10.5%;top:16%;width:50%;display:flex;flex-direction:column;gap:1.2cqw}
.ccard-t{font-size:20px;font-weight:900;color:var(--navy);line-height:1.15}
.ccard-en{font-size:11px;font-weight:700;color:#8a95a8;letter-spacing:.3px;text-transform:uppercase}
/* The clamp is a guard against a future blurb that runs away, not a design
   choice: at four lines it was cutting the United States, the United Kingdom
   and Canada mid-sentence while a third of the white panel sat empty below
   them. The panel holds about eight lines at this size, so seven leaves the
   current copy whole and still protects the layout. */
.ccard-p{font-size:12px;line-height:1.6;color:#4d5a70;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
/* Sizes track the CARD, not the viewport: the same grid renders at three
   different card widths across the breakpoints below, and viewport units would
   grow the type just as the cards get narrower. */
@container (min-width:1px){
  .ccard-t{font-size:5.8cqw}
  .ccard-en{font-size:2.7cqw}
  .ccard-p{font-size:3.15cqw}
}

/* navy footer: y 72.6–100%. The mortarboard sits at x 7–19% and the dashed
   slot runs to x 94% with an institution glyph at x 62–69%.
   These hold on every card because the ten artworks are now cut to one size
   (720x628) with the footer edge pinned to the same row — the owner's exports
   ran from 1024 to 1112 pixels tall, which is why the UK card stood taller
   than its neighbours and its footer sat below theirs in a three-up row.
   Both the label and the count live INSIDE that slot, split around the glyph —
   "查看院校 🏛 12 所院校 →" reads as one phrase, and the mortarboard is left
   as the section mark the owner drew it to be. */
/* align-items:center, not baseline — baseline in a fixed-height flex box pins
   the row to the top of that box, which floated the count out of the navy bar
   entirely and left it sitting on the white panel above. */
/* Measured off the artwork by column density inside the bar: the mortarboard
   occupies x 7–19% and the institution glyph x 62–69%. The label stops short
   of 62% and the count starts past 69%, so neither ever prints on the glyph. */
.ccard-n{position:absolute;left:70.5%;width:23.5%;top:72.6%;height:27.4%;
  display:flex;align-items:center;gap:.45cqw;color:#fff;white-space:nowrap}
.ccard-n b{font-size:16px;font-weight:900;line-height:1}
.ccard-n i{font-size:9px;font-style:normal;opacity:.85}
.ccard-n em{font-size:11px;font-style:normal;font-weight:900}
.ccard-go{position:absolute;left:38%;width:21%;top:72.6%;height:27.4%;
  display:flex;align-items:center;justify-content:flex-end;
  font-size:12px;font-weight:800;color:#fff;white-space:nowrap}
@container (min-width:1px){
  .ccard-n b{font-size:4.3cqw}
  .ccard-n i{font-size:2.2cqw}
  .ccard-n em{font-size:3cqw}
  .ccard-go{font-size:3.1cqw}
}
html[dir="rtl"] .ccard-go{justify-content:flex-start}

/* Fallback card, used only for a destination whose artwork is not in yet. */
.ab-c-plain{display:flex;flex-direction:column;gap:7px;padding:22px;border:1px solid var(--line);
  border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(16,32,72,.06);container-type:normal}
.ab-c-plain .ccard-t,.ab-c-plain .ccard-en,.ab-c-plain .ccard-p{position:static}
.ab-c-plain .ccard-t{font-size:20px}
.ab-c-plain .ccard-en{font-size:12.5px}
.ab-c-plain .ccard-p{font-size:13px;line-height:1.75;-webkit-line-clamp:none;overflow:visible}
.ccard-flag{font-size:44px;line-height:1}
.ccard-nplain{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:800;color:#1b4bb0}

/* country tabs + ranked list */
.ab-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 12px}
.ab-tab{padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:800;color:var(--navy);text-decoration:none}
.ab-tab:hover{border-color:#1b4bb0}
.ab-tab.on{background:#0d2966;border-color:#0d2966;color:#fff}
.ab-note{font-size:12.5px;line-height:1.85;color:#6b7688;background:#f5f7fc;border:1px solid #e3e9f5;border-radius:12px;padding:12px 15px;margin:0 0 16px}
.ab-list{display:flex;flex-direction:column;gap:11px}
.ab-u{display:flex;align-items:flex-start;gap:15px;padding:16px 18px;border:1px solid var(--line);border-radius:15px;background:#fff;text-decoration:none;color:inherit;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.ab-u:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,32,72,.12);border-color:#b9c8e6}
.abu-no{flex:0 0 34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;background:linear-gradient(140deg,#0d2966,#1b4bb0)}
.abu-main{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.abu-zh{font-size:17px;font-weight:900;color:var(--navy)}
.abu-zh i{font-size:12.5px;font-weight:800;font-style:normal;color:#8a95a8}
.abu-en{font-size:12.5px;font-weight:700;color:#8a95a8}
.abu-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;font-weight:700;color:#6b7688;margin-top:2px}
.abu-qs{background:#0d2966;color:#fff;padding:2px 9px;border-radius:7px}
.abu-kind{background:#f0f3fa;color:#5d6a80;padding:2px 9px;border-radius:7px}
.abu-majors{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.abu-majors em{font-style:normal;font-size:12px;font-weight:700;color:#41506b;background:#f2f5fb;border:1px solid #e3e9f5;border-radius:7px;padding:3px 9px}
.abu-fee{flex:0 0 auto;text-align:end;display:flex;flex-direction:column;gap:2px}
.abu-fee b{font-size:13.5px;font-weight:900;color:#1b4bb0}
.abu-fee i{font-size:11.5px;font-style:normal;color:#8a95a8;font-weight:700}

/* detail page */
.ab-two{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start;margin-top:20px}
.ab-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.ab-box{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px 22px}
.ab-box h2{font-size:18px;font-weight:900;color:var(--navy);margin:0 0 12px}
.ab-desc{font-size:14.5px;line-height:1.95;color:#41506b;margin:0}
.ab-majors{display:flex;flex-wrap:wrap;gap:8px}
.ab-majors span{font-size:13.5px;font-weight:800;color:#1b4bb0;background:#eef2fb;border:1px solid #dae3f5;border-radius:9px;padding:7px 13px}
table.ab-facts{width:100%;border-collapse:collapse;font-size:14px}
table.ab-facts th{text-align:start;font-weight:800;color:#6b7688;padding:10px 0;width:36%;vertical-align:top;border-bottom:1px solid #eef1f7}
table.ab-facts td{padding:10px 0;color:var(--navy);font-weight:700;border-bottom:1px solid #eef1f7;line-height:1.7}
.ab-na{color:#a6b0c2;font-weight:700}
.ab-fine{font-size:12px;line-height:1.8;color:#8a95a8;margin:12px 0 0}
.ab-peers{display:flex;flex-wrap:wrap;gap:9px}
.ab-peers a{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;text-decoration:none;font-size:13.5px;font-weight:800;color:var(--navy)}
.ab-peers a:hover{border-color:#1b4bb0}
.ab-peers a i{font-style:normal;font-size:11.5px;font-weight:800;color:#fff;background:#0d2966;padding:2px 7px;border-radius:6px}

/* sidebar apply card */
.ab-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:80px}
.ab-apply{border-radius:18px;padding:22px;background:linear-gradient(150deg,#0d2966,#1b4bb0 60%,#2455bd);color:#fff;box-shadow:0 14px 34px rgba(13,41,102,.28)}
.aba-badge{display:inline-block;background:rgba(233,185,73,.22);border:1px solid rgba(233,185,73,.55);color:#f5d78e;font-size:12px;font-weight:900;padding:5px 12px;border-radius:999px}
.ab-apply h3{font-size:19px;font-weight:900;margin:12px 0 10px;color:#fff}
.aba-price{font-size:34px;font-weight:900;line-height:1;margin-bottom:14px}
.aba-price span{font-size:13px;font-weight:700;opacity:.85;margin-inline-start:8px}
.aba-ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.aba-ul li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:700;line-height:1.6}
.aba-ul li span{flex:0 0 auto}
.aba-ul-wide li{flex-wrap:wrap}
.aba-ul-wide li b{font-weight:900}
.aba-ul-wide li i{flex:0 0 100%;font-style:normal;font-size:12.5px;font-weight:600;opacity:.82;line-height:1.75;padding-inline-start:24px}
.aba-btn{display:block;text-align:center;background:#e9b949;color:#12224d;font-weight:900;font-size:15px;padding:13px;border-radius:12px;text-decoration:none}
.aba-btn:hover{background:#f5c95f}
.aba-note{font-size:12px;line-height:1.85;opacity:.85;margin:13px 0 0}
.ab-site{display:block;text-align:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13.5px;font-weight:800;color:var(--navy);text-decoration:none}
.ab-site:hover{border-color:#1b4bb0}

/* application form */
.ab-form{border:1px solid var(--line);border-radius:16px;background:#fff;padding:22px 24px}
.ab-form h2{font-size:17px;font-weight:900;color:var(--navy);margin:22px 0 12px;padding-bottom:9px;border-bottom:2px solid #eef1f7}
.ab-form h2:first-child{margin-top:0}
.abf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:13px}
.ab-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:800;color:#41506b}
.ab-form label b{color:#e8202a}
.ab-form input,.ab-form select,.ab-form textarea{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;background:#fff;color:var(--navy);width:100%}
.ab-form input:focus,.ab-form select:focus,.ab-form textarea:focus{outline:none;border-color:#1b4bb0;box-shadow:0 0 0 3px rgba(27,75,176,.12)}
.abf-check{flex-direction:row!important;align-items:center;gap:9px!important;align-self:end;padding-bottom:11px}
.abf-check input{width:auto}
.abf-full{margin-bottom:8px}
.abf-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:2px solid #eef1f7}
.abfs-price{font-size:26px;font-weight:900;color:var(--navy)}
.abfs-price i{font-size:12.5px;font-weight:700;font-style:normal;color:#8a95a8;margin-inline-start:8px}
.abfs-btn{border:none;border-radius:12px;background:linear-gradient(135deg,#0d2966,#1b4bb0);color:#fff;font-size:15px;font-weight:900;padding:14px 26px;cursor:pointer;font-family:inherit}
.abfs-btn:hover{background:linear-gradient(135deg,#12224d,#2455bd)}
.abf-fine{font-size:12px;line-height:1.85;color:#8a95a8;margin:12px 0 0}

@media(max-width:1000px){
  .ab-two{grid-template-columns:1fr}
  .ab-side{position:static}
  .ab-pack-row{grid-template-columns:1fr 1fr}
  .ab-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .ab-pack-row,.ab-grid,.abf-row{grid-template-columns:1fr}
  .ab-u{flex-wrap:wrap}
  .abu-fee{flex:0 0 100%;text-align:start;flex-direction:row;gap:8px;align-items:baseline}
  .apc-price,.abfs-price{font-size:24px}
  .abfs-btn{width:100%}
}

/* ---- study-abroad: logo cards, the shape the Chinese university directory
   uses. A crest is how a student recognises a university at a glance; the
   earlier text rows were not that. */
.ab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ab-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:0 2px 10px rgba(16,32,72,.06);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ab-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,32,72,.16);border-color:#b9c8e6}
.abc-top{position:relative;display:block;height:104px;background:#e9edf4 center/cover no-repeat}
.abc-top::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,60,.55),rgba(10,26,60,.05))}
.abc-rank{position:absolute;top:9px;inset-inline-start:9px;z-index:2;min-width:26px;height:26px;padding:0 7px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;background:rgba(13,41,102,.92)}
.abc-logo{position:absolute;bottom:-26px;inset-inline-start:16px;z-index:2;width:64px;height:64px;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:0 4px 14px rgba(16,32,72,.16);display:flex;align-items:center;justify-content:center;overflow:hidden}
.abc-logo img{width:100%;height:100%;object-fit:contain;padding:7px}
.abc-logo b{font-size:20px;font-weight:900;color:#0d2966}
.abc-body{display:flex;flex-direction:column;gap:5px;padding:34px 16px 15px}
.abc-name{font-size:16.5px;font-weight:900;color:var(--navy);line-height:1.35}
.abc-en2{font-size:11.5px;font-weight:700;color:#8a95a8;line-height:1.4}
.abc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.abc-tags em{font-style:normal;font-size:11.5px;font-weight:800;color:#5d6a80;background:#f2f5fb;border:1px solid #e3e9f5;border-radius:7px;padding:3px 8px}
.abc-tags em.is-qs{background:#0d2966;border-color:#0d2966;color:#fff}
.abc-majors{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.abc-majors i{font-style:normal;font-size:11.5px;font-weight:700;color:#41506b;background:#fff;border:1px solid #e3e9f5;border-radius:6px;padding:3px 8px}
.abc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.abc-fee{font-size:12.5px;font-weight:900;color:#1b4bb0}
.abc-go{font-size:12.5px;font-weight:800;color:#8a95a8}
.ab-card:hover .abc-go{color:#1b4bb0}
/* detail: crest beside the introduction, and the campus video */
.ab-idbox{display:flex;gap:18px;align-items:flex-start}
/* Admin logo control on a university page: a file picker styled as a button,
   sitting under the description so it is obvious but never in a visitor's way
   (the whole block only renders for an admin). */
.ab-logoedit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.abl-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;border:1px dashed #9db0d6;background:#f4f7fd;
  font-size:13px;font-weight:800;color:#1b4bb0;cursor:pointer}
.abl-btn:hover{background:#e9f0fc;border-color:#5f83c8}
.abl-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.abl-del{padding:8px 12px;border-radius:10px;border:1px solid #f0c9c9;background:#fff6f6;
  font-size:13px;font-weight:800;color:#b3261e;cursor:pointer}
.abl-del:hover{background:#ffecec}
.ab-logo-empty{display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:#9db0d6;background:#f4f7fd}
.ab-logo{flex:0 0 88px;width:88px;height:88px;border-radius:16px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ab-logo img{width:100%;height:100%;object-fit:contain;padding:9px}
.ab-idtext{flex:1;min-width:0}
.ab-video{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#0d1a30}
.ab-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:1000px){.ab-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ab-cards{grid-template-columns:1fr}.ab-idbox{flex-direction:column}}

/* ---- Restaurants: the 清真/حلال halal badge (shared) --------------------------
   Emitted by rest_halal_badge_html() and used on the restaurants listing cards,
   the restaurant detail hero and the halal section — so it must live here, not
   in a per-view <style> block, or the circle silently disappears on the views
   whose style block doesn't carry it. */
.res-halal-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:52px;height:52px;box-sizing:border-box;background:#fff;border:2.5px solid #0d8a4f;border-radius:50%;
  box-shadow:0 3px 8px rgba(0,0,0,.18);line-height:1;overflow:hidden;flex:0 0 auto}
.res-halal-badge .rhb-ar{color:#0a7a3c;font-weight:800;font-size:.78rem}
.res-halal-badge .rhb-zh{color:#0a7a3c;font-weight:800;font-size:.68rem}
.res-halal-badge.big{width:92px;height:92px;border-width:4px;gap:2px;box-shadow:0 5px 14px rgba(13,138,79,.28)}
.res-halal-badge.big .rhb-ar{font-size:1.42rem}
.res-halal-badge.big .rhb-zh{font-size:1.16rem}
@media(max-width:700px){.res-halal-badge.big{width:72px;height:72px}
  .res-halal-badge.big .rhb-ar{font-size:1.12rem}.res-halal-badge.big .rhb-zh{font-size:.94rem}}