/* ============================================================
   Aura | أورا — Design System
   Brand: Night navy #050A1D + Champagne gold #E4C157 (from logo)
   RTL Arabic. Shared across all pages.
   ============================================================ */
:root{
  --ink-950:#050A1D; --ink-900:#070E24; --ink-850:#0B1430; --ink-800:#10193C;
  --ink-700:#182247; --ink-600:#212C58;
  --gold:#E4C157; --gold-lite:#F2DB8E; --gold-deep:#BE9C3F;
  --head:#EFF1F8; --text:#C7CCDE; --muted:#828DAB;
  --good:#8fe6b0;
  --line:rgba(228,193,87,.16); --line-soft:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.028);
  --radius:12px; --radius-lg:18px; --maxw:1200px;
  --serif:"Hoefler Text","Cormorant Garamond","Georgia","Times New Roman",serif;
  --sans:"Segoe UI","Dubai","Tahoma","Geeza Pro",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--ink-950);color:var(--text);line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;direction:rtl;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg{display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ambient background */
.bg{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1100px 640px at 82% -8%, rgba(228,193,87,.13), transparent 60%),
  radial-gradient(900px 620px at 6% 10%, rgba(60,82,168,.20), transparent 62%),
  radial-gradient(1200px 900px at 50% 120%, rgba(226,218,240,.05), transparent 60%),
  linear-gradient(180deg,var(--ink-950),var(--ink-900) 42%,var(--ink-950))}
.grain{position:fixed;inset:0;z-index:-1;opacity:.045;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.page{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

/* typography */
.eyebrow{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.9rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.6ch}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
h1,h2,h3,h4{color:var(--head);font-weight:700;text-wrap:balance;line-height:1.25}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6ch;padding:.85rem 1.5rem;border-radius:999px;
  font-size:.95rem;font-weight:700;cursor:pointer;border:1px solid transparent;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn-gold{background:linear-gradient(135deg,var(--gold-lite),var(--gold) 55%,var(--gold-deep));color:#20180A;box-shadow:0 6px 20px -6px rgba(228,193,87,.5)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(228,193,87,.6)}
.btn-ghost{border-color:var(--line);color:var(--gold);background:var(--glass)}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-block{width:100%}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(5,10,29,.6);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:74px}
.brand{display:flex;align-items:center}
.brand img{height:30px;width:auto}
.nav-links{display:flex;gap:2rem;font-size:.95rem;color:var(--text)}
.nav-links a{position:relative;padding:.2rem 0;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links a::after{content:"";position:absolute;bottom:-4px;right:0;width:0;height:1px;background:var(--gold);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;gap:.8rem;align-items:center}
.nav-cta .btn{padding:.6rem 1.2rem;font-size:.88rem}
.nav-burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--gold);width:42px;height:42px;cursor:pointer}
@media(max-width:900px){
  .nav-links,.nav-cta .btn{display:none}
  .nav-burger{display:grid;place-items:center}
  .nav-links.open{display:flex;position:absolute;top:74px;right:0;left:0;flex-direction:column;gap:0;
    background:rgba(5,10,29,.96);border-bottom:1px solid var(--line);padding:.5rem 0}
  .nav-links.open a{padding:.9rem clamp(18px,4vw,40px)}
}

/* top banner */
.topbar{background:linear-gradient(90deg,rgba(228,193,87,.14),rgba(80,100,190,.12));border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:center;gap:1ch;padding:.55rem 1rem;font-size:.85rem;color:var(--head);position:relative;text-align:center}
.topbar-in b{color:var(--gold)}
.topbar .x{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1}
.topbar .x:hover{color:var(--gold)}

/* sections + heads */
section.blk{padding:clamp(3rem,6vw,5rem) 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2.2rem;flex-wrap:wrap}
.head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-top:.5rem}
.head p{color:var(--muted);max-width:46ch;font-size:.98rem}

/* chips + filters */
.chip{font-size:.82rem;padding:.42rem .95rem;border-radius:999px;border:1px solid var(--line);color:var(--text);background:var(--glass-2);cursor:pointer;transition:all .2s}
.chip:hover,.chip.on{border-color:var(--gold);color:var(--gold);background:rgba(228,193,87,.09)}
.filter-group{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.9rem}
.filter-group .flabel{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--gold-deep);min-width:64px}
.filters-wrap{margin-bottom:2rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass-2)}
.filters-wrap .filter-group:last-child{margin-bottom:0}

/* clinic cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;display:flex;flex-direction:column;cursor:pointer}
.card:hover{transform:translateY(-6px);border-color:rgba(228,193,87,.42);box-shadow:0 30px 60px -30px rgba(0,0,0,.75)}
.card .cover{aspect-ratio:16/10;position:relative;display:grid;place-items:center;background:linear-gradient(150deg,var(--ink-600),var(--ink-850))}
.card .cover .mono{font-family:var(--serif);font-size:4rem;color:transparent;-webkit-text-stroke:1.2px rgba(228,193,87,.5)}
/* clinic-uploaded image as the card cover; scrim keeps the badge legible over any photo */
.card .cover.has-img{background:var(--bg) center/cover no-repeat}
.card .cover.has-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,10,29,.5),rgba(5,10,29,.05) 55%)}
.card .cover.has-img .mono{display:none}
.card .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 70% 25%,rgba(228,193,87,.15),transparent 60%)}
.badge{position:absolute;top:12px;right:12px;font-size:.72rem;font-weight:700;padding:.28rem .7rem;border-radius:999px;background:rgba(228,193,87,.16);color:var(--gold-lite);border:1px solid var(--line);backdrop-filter:blur(6px)}
.badge.live{right:auto;left:12px;background:rgba(120,220,160,.14);color:var(--good);border-color:rgba(120,220,160,.25)}
/* Paid placement — deliberately quiet, and never dressed up as an endorsement */
.badge.ad{background:rgba(130,141,171,.18);color:var(--muted);border-color:var(--line);font-weight:600;letter-spacing:.02em}
/* Admin editorial pick — the prestige badge, gold-forward */
.badge.feat{background:linear-gradient(135deg,rgba(242,219,142,.9),rgba(201,164,74,.9));color:#20180A;border-color:transparent;font-weight:700}
/* per-doctor / per-device prices on the clinic page */
.doc .av.has{background:var(--bg) center/cover no-repeat;color:transparent}
.doc .dmeta{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;margin-inline-start:auto}
.dprice,.dvprice{color:var(--gold);font-weight:700;font-size:.92rem;white-space:nowrap}
.dprice span,.dvprice span{color:var(--muted);font-weight:400;font-size:.75rem}
.devrow .dvmain{flex:1 1 auto}
.dvprice{align-self:center}

/* Device-targeted coupon card. Reads as an ad on purpose: labelled, and visually distinct
   from the clinic results it sits above. */
.promo{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.1rem;padding:.9rem 1.1rem;
  border:1px solid rgba(228,193,87,.3);border-radius:14px;cursor:pointer;
  background:linear-gradient(100deg,rgba(228,193,87,.10),rgba(228,193,87,.02));transition:border-color .2s}
.promo:hover{border-color:var(--gold)}
.promo-tag{font-size:.64rem;font-weight:700;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:.16rem .45rem;flex:0 0 auto}
.promo-main{flex:1 1 14rem;min-width:0}
.promo-main b{display:block;color:var(--head);font-size:.95rem}
.promo-main span{color:var(--muted);font-size:.82rem}
.promo-code{font-family:var(--mono,ui-monospace,monospace);font-size:.82rem;letter-spacing:.08em;font-weight:700;
  color:var(--gold);background:rgba(228,193,87,.12);border:1px dashed var(--gold-deep);
  border-radius:6px;padding:.3rem .7rem;flex:0 0 auto;direction:ltr}
.promo .btn{flex:0 0 auto;padding:.45rem 1.1rem;font-size:.85rem}

/* Customer notification bell (LIVE only) */
.nav-bell{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--glass-2);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:all .2s;flex:0 0 auto}
.nav-bell:hover{border-color:var(--gold);color:var(--gold)}
.nav-bell:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav-bell svg{width:19px;height:19px}
.nav-bell .dot{position:absolute;top:8px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);border:2px solid var(--bg-2,#050A1D)}
.notif-pop{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:min(340px,calc(100vw - 32px));
  background:rgba(7,13,31,.97);border:1px solid var(--line);border-radius:12px;z-index:120;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.85);backdrop-filter:blur(14px);overflow:hidden;text-align:start}
.notif-pop .np-h{padding:.85rem 1rem;border-bottom:1px solid var(--line);font-weight:700;color:var(--head);font-size:.9rem}
.notif-pop .np-n{display:inline-grid;place-items:center;min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;
  background:var(--gold);color:#20180A;font-size:.68rem;font-weight:800;margin-inline-start:.4ch;vertical-align:middle}
.notif-pop .np-item{display:flex;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);font-size:.82rem}
.notif-pop .np-item:last-child{border-bottom:none}
.notif-pop .np-item.unread{background:rgba(228,193,87,.06);box-shadow:inset 2px 0 0 var(--gold)}
.notif-pop .np-item b{display:block;color:var(--head);font-size:.86rem;margin-bottom:.15rem}
.notif-pop .np-item span{color:var(--muted);line-height:1.6}
.nav-cta{position:relative}

/* gift notification: a designed coupon card, not a plain text row */
.notif-pop .np-item.gift-item{padding:.7rem;display:block}
.gift-card{position:relative;padding:.9rem 1rem 1rem;border-radius:12px;overflow:hidden;
  background:linear-gradient(155deg,rgba(228,193,87,.16),rgba(228,193,87,.03) 65%);
  border:1px solid rgba(228,193,87,.32)}
.gift-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--gold-lite),var(--gold-deep),var(--gold-lite))}
.gc-ribbon{font-size:.78rem;font-weight:700;color:var(--gold);letter-spacing:.01em;margin-bottom:.35rem}
.gc-from{font-size:.84rem;color:var(--head);margin-bottom:.4rem}
.gc-from b{color:var(--gold)}
.gc-msg{font-family:var(--serif);font-size:.92rem;color:var(--head);line-height:1.6;
  margin:0 0 .6rem;padding:0 .1rem}
.gc-appt{font-size:.78rem;color:var(--muted);padding-top:.5rem;border-top:1px dashed rgba(228,193,87,.25)}
.gc-appt b{display:block;color:var(--text);font-size:.82rem;margin-bottom:.1rem}
.gc-time{display:block;margin-top:.4rem;font-size:.7rem;color:var(--muted);text-align:end}
.card .body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card h3{font-size:1.12rem}
.card .meta{display:flex;align-items:center;gap:.6ch;color:var(--muted);font-size:.85rem}
.rate{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.open{color:var(--good)}
.closed{color:var(--muted)}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tags span{font-size:.74rem;color:var(--text);border:1px solid var(--line);padding:.2rem .6rem;border-radius:999px;background:var(--glass-2)}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:.9rem;border-top:1px solid var(--line)}
.card .foot .from{font-size:.78rem;color:var(--muted)}
.card .foot .from b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--head);font-weight:600}
.card .foot .btn{padding:.55rem 1.1rem;font-size:.85rem}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem;border:1px dashed var(--line);border-radius:var(--radius)}

/* before/after slider */
.ba{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  user-select:none;touch-action:none;direction:ltr;cursor:ew-resize;--pos:52%;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.ba .layer{position:absolute;inset:0}
.ba .before{clip-path:polygon(0 0,var(--pos) 0,var(--pos) 100%,0 100%)}
.ba .lab{position:absolute;top:12px;font-size:.72rem;letter-spacing:.1em;font-weight:700;padding:.25rem .7rem;border-radius:999px;background:rgba(5,10,29,.55);color:#fff;backdrop-filter:blur(6px);z-index:2}
.ba .lab.b{left:12px}.ba .lab.a{right:12px;color:#20180A;background:rgba(242,219,142,.9)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:linear-gradient(var(--gold-lite),var(--gold));transform:translateX(-1px);z-index:2}
.ba .handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold-lite),var(--gold-deep));color:#20180A;display:grid;place-items:center;font-size:1.1rem;font-weight:900;box-shadow:0 6px 18px -4px rgba(0,0,0,.6)}

/* forms */
.field-lg{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field-lg label{font-size:.85rem;color:var(--head);font-weight:600}
.field-lg .hint{font-size:.78rem;color:var(--muted)}
.input{width:100%;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;color:var(--head);font-family:inherit;font-size:1rem;transition:border-color .2s}
.input:focus{outline:none;border-color:var(--gold)}
.input::placeholder{color:var(--muted)}
.phone{display:flex;gap:.5rem;direction:ltr}
.phone .cc{flex:0 0 auto;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:0 1rem;color:var(--gold);font-weight:700}
.phone .input{direction:ltr;text-align:left}

/* pay methods */
.pay-methods{display:flex;gap:.6rem;flex-wrap:wrap}
.pay{flex:1 1 120px;border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;background:var(--glass);cursor:pointer;display:flex;flex-direction:column;gap:.2rem;transition:border-color .2s,background .2s}
.pay:hover{border-color:rgba(228,193,87,.4)}
.pay.on{border-color:var(--gold);background:rgba(228,193,87,.08)}
.pay b{color:var(--head);font-size:.95rem}
.pay span{font-size:.76rem;color:var(--muted)}

/* footer */
footer.site{border-top:1px solid var(--line);margin-top:2rem;padding:3rem 0 2rem;color:var(--muted)}
.foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2rem}
.foot-grid .col{display:flex;flex-direction:column;gap:.6rem;font-size:.9rem}
.foot-grid .col h4{color:var(--head);font-size:.95rem;margin-bottom:.3rem}
.foot-grid .col a:hover{color:var(--gold)}
.foot-brand img{height:58px;width:auto;margin-bottom:.4rem}
.pays{display:flex;gap:.5rem;flex-wrap:wrap}
.pays span{font-size:.72rem;border:1px solid var(--line);border-radius:6px;padding:.3rem .6rem;color:var(--text)}
.foot-btm{border-top:1px solid var(--line);padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}

/* ===== legal / policy pages ===== */
.legal-doc{max-width:768px;margin:0 auto;color:var(--text);line-height:1.95}
.legal-doc .updated{color:var(--muted);font-size:.85rem;margin-bottom:1.6rem}
.legal-doc h3{color:var(--head);font-size:1.15rem;margin:2rem 0 .7rem}
.legal-doc h3:first-of-type{margin-top:.6rem}
.legal-doc p{margin-bottom:.9rem}
.legal-doc ul{margin:.3rem 0 1rem;display:flex;flex-direction:column;gap:.5rem;list-style:none}
.legal-doc li{position:relative;padding-inline-start:1.2rem}
.legal-doc li::before{content:"◆";color:var(--gold);font-size:.6rem;position:absolute;inset-inline-start:0;top:.5em}
.legal-doc a{color:var(--gold)}
.legal-doc b,.legal-doc strong{color:var(--head)}
.legal-doc .note{border:1px solid var(--line);border-inline-start:3px solid var(--gold);background:var(--glass);border-radius:10px;padding:1rem 1.1rem;margin:1.4rem 0;font-size:.9rem;color:var(--muted)}
.legal-contact{display:grid;gap:.8rem;margin:1.2rem 0}
.legal-contact .row{display:flex;gap:.9rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:var(--glass)}
.legal-contact .row .ic{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:rgba(228,193,87,.1);color:var(--gold)}
.legal-contact .row .ic svg{width:20px;height:20px}
.legal-contact .row b{color:var(--head);display:block;font-size:.95rem}
.legal-contact .row span{color:var(--muted);font-size:.85rem}

/* ===== HERO (home) ===== */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 3rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}
.hero h1{font-size:clamp(2.3rem,5.6vw,4rem);margin:1.1rem 0 1rem}
.hero h1 .accent{background:linear-gradient(120deg,var(--gold-lite),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--serif);font-style:italic;font-weight:600}
.hero p.lead{color:var(--text);font-size:1.08rem;max-width:52ch;opacity:.92}
.geo{display:inline-flex;align-items:center;gap:.5ch;margin-top:1rem;font-size:.85rem;color:var(--muted);background:var(--glass-2);border:1px solid var(--line);padding:.4rem .9rem;border-radius:999px;cursor:pointer;font-family:inherit;transition:all .2s}
.geo:hover{border-color:var(--gold);color:var(--text)}
.geo.on{border-color:var(--ok,#8fe6b0);background:rgba(143,230,176,.1)}
.geo b{color:var(--gold)}
.km{color:var(--gold-lite);font-variant-numeric:tabular-nums}
.devrow .lic{font-size:.78rem;color:var(--gold-deep);margin-top:.3rem}
a.doc{text-decoration:none}
a.doc:hover{border-color:rgba(228,193,87,.4)}
.cert{display:flex;align-items:center;gap:.7ch;border:1px solid var(--line);border-radius:10px;background:var(--glass);padding:.7rem .9rem;margin-bottom:.6rem;font-size:.9rem;color:var(--text)}
.cert span{color:var(--gold);font-weight:900}
.ratings{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.4rem}
.ratings .rr{text-align:center;border:1px solid var(--line);border-radius:10px;background:var(--glass-2);padding:.6rem .3rem}
.ratings .rr b{display:block;color:var(--gold);font-family:var(--serif);font-size:1.3rem;font-variant-numeric:tabular-nums}
.ratings .rr span{font-size:.72rem;color:var(--muted)}
.rev .rsub{font-size:.78rem;color:var(--gold-deep);margin-bottom:.3rem}
.search{margin-top:1.2rem;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem;display:flex;gap:.5rem;flex-wrap:wrap;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px -24px rgba(0,0,0,.75)}
.search .field{flex:1 1 170px;display:flex;flex-direction:column;gap:.15rem;padding:.55rem .9rem;border-radius:9px;transition:background .2s;cursor:pointer}
.search .field:hover{background:var(--glass-2)}
.search .field span{font-size:.68rem;color:var(--gold-deep);letter-spacing:.06em;font-weight:700}
.search .field b{font-size:.98rem;color:var(--head);font-weight:600}
.search .divider{width:1px;background:var(--line);margin:.4rem 0}
.search .field-input{background:none;border:none;color:var(--head);font-family:inherit;font-size:.98rem;font-weight:600;padding:0;width:100%;outline:none;-webkit-appearance:none;appearance:none}
.search .field-input::placeholder{color:var(--muted);font-weight:400}
.search select.field-input{cursor:pointer}
.search select.field-input option{background:var(--ink-800);color:var(--head)}
.clinic-q{margin-bottom:1rem}
.search .btn{flex:0 0 auto;align-self:stretch;padding-inline:1.6rem}
.hero-chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.1rem;align-items:center}
.hero-chips .lbl{font-size:.8rem;color:var(--muted)}
.hero-visual{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 90% at 70% 20%,rgba(228,193,87,.16),transparent 55%),radial-gradient(100% 80% at 20% 90%,rgba(80,100,190,.18),transparent 60%),linear-gradient(160deg,var(--ink-700),var(--ink-950));box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
.hero-visual .mono{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(9rem,22vw,15rem);color:transparent;-webkit-text-stroke:1.5px rgba(228,193,87,.5);opacity:.9}
.hero-visual.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-visual.has-img .mono{display:none}
.hero-visual .hero-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.hero-visual .tag{position:absolute;bottom:18px;right:18px;left:18px;background:rgba(5,10,29,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hero-visual .tag .t{font-size:.95rem;color:var(--head);font-weight:600}
.hero-visual .tag .s{font-size:.78rem;color:var(--muted)}
.hero-visual .tag .price{font-family:var(--serif);color:var(--gold);font-size:1.5rem;font-weight:600;white-space:nowrap}
.hero-visual .float{position:absolute;top:20px;right:20px;background:rgba(5,10,29,.6);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;color:var(--gold);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* stats */
.stats{border-block:1px solid var(--line);margin-top:2.5rem}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2rem 0}
@media(max-width:720px){.stats-in{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
.stat{text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.5rem);color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.stat span{font-size:.9rem;color:var(--muted)}

/* services */
.svc{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
@media(max-width:900px){.svc{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.svc{grid-template-columns:repeat(2,1fr)}}
.svc a,.svc button{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.4rem .8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);text-align:center;transition:transform .25s,border-color .25s;
  width:100%;font-family:inherit;cursor:pointer}
.svc a:hover,.svc button:hover{transform:translateY(-4px);border-color:rgba(228,193,87,.4)}
.svc .ic{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(228,193,87,.1);color:var(--gold)}
.svc .ic svg{width:24px;height:24px}
.svc b{font-size:.9rem;color:var(--head);font-weight:600}

/* devices */
.dev{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:900px){.dev{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.dev{grid-template-columns:1fr}}
.dcard{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--ink-700),var(--ink-950));padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .25s,border-color .25s}
.dcard:hover{transform:translateY(-4px);border-color:rgba(228,193,87,.4)}
/* ranking marks — the order carries meaning here (top-rated first), so it's numbered */
.dcard{position:relative}
.drank{position:absolute;top:1rem;inset-inline-end:1.1rem;font-family:var(--serif);font-size:1.1rem;
  color:rgba(228,193,87,.35);font-weight:700;letter-spacing:.02em}
.drate{font-size:.82rem;color:var(--gold);font-weight:700;white-space:nowrap;margin-inline-start:.3ch}
.dat{color:var(--muted);font-size:.76rem;margin-inline-start:.4ch}
/* uploaded device photo replaces the icon */
.dcard .dphoto{height:120px;border-radius:12px;background:center/cover no-repeat;margin-bottom:.2rem;border:1px solid var(--line)}
.dcard.has-photo .drank{background:rgba(5,10,29,.6);border-radius:8px;padding:0 .4rem}
.dcard .ic{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:rgba(228,193,87,.1);color:var(--gold)}
.dcard .ic svg{width:26px;height:26px}
.dcard h3{font-size:1.05rem}
.dcard .use{font-size:.85rem;color:var(--muted);flex:1}
.dcard .inst{border-top:1px solid var(--line);padding-top:.7rem;font-size:.82rem;color:var(--text)}
.dcard .inst b{color:var(--gold);font-family:var(--serif);font-size:1.1rem}

/* offers */
.offers{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.4rem}
@media(max-width:820px){.offers{grid-template-columns:1fr}}
.offer{border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--ink-700),var(--ink-950))}
.offer.hero-offer{background:radial-gradient(90% 120% at 90% 10%,rgba(228,193,87,.22),transparent 55%),linear-gradient(150deg,var(--ink-600),var(--ink-950))}
.offer .pct{font-family:var(--serif);font-size:2.8rem;color:var(--gold);font-weight:600;line-height:1}
.offer h3{margin:.5rem 0}
.offer p{color:var(--muted);font-size:.9rem}
.offer .btn{margin-top:1.2rem;padding:.55rem 1.1rem;font-size:.85rem}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.6rem 1.6rem;background:var(--glass);counter-increment:s}
.step::before{content:"0" counter(s);font-family:var(--serif);font-size:2.4rem;color:transparent;-webkit-text-stroke:1px var(--gold-deep);display:block;margin-bottom:.6rem;font-variant-numeric:tabular-nums}
.step h3{font-size:1.2rem;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.92rem}
.step .arw{position:absolute;top:2.4rem;left:-1.1rem;color:var(--gold-deep);font-size:1.3rem}
@media(max-width:820px){.step .arw{display:none}}

/* b2b */
.b2b{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(2.2rem,5vw,3.5rem);
  background:radial-gradient(80% 140% at 15% 20%,rgba(80,100,190,.14),transparent 55%),radial-gradient(70% 130% at 95% 90%,rgba(228,193,87,.16),transparent 55%),linear-gradient(150deg,var(--ink-700),var(--ink-950));
  display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center}
@media(max-width:820px){.b2b{grid-template-columns:1fr}}
.b2b h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.b2b p{color:var(--text);opacity:.88;margin-top:.8rem;max-width:48ch}
.b2b .acts{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:820px){.b2b .acts{justify-content:flex-start}}

/* ===== CLINIC PROFILE PAGE ===== */
.cprofile{padding-bottom:3rem}
.cbanner{position:relative;height:clamp(200px,32vw,300px);border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden;
  background:radial-gradient(90% 130% at 78% 10%,rgba(228,193,87,.22),transparent 55%),linear-gradient(150deg,var(--ink-600),var(--ink-900));display:grid;place-items:center;margin-bottom:1.5rem}
.cbanner .mono{font-family:var(--serif);font-size:clamp(6rem,16vw,10rem);color:transparent;-webkit-text-stroke:1.4px rgba(228,193,87,.5)}
/* With a real photo: cover it, hide the monogram, and lay a scrim so the back button and
   the name below stay legible over any image the clinic uploads. */
.cbanner.has-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.cbanner.has-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--bg-2,#050A1D) 0%,rgba(5,10,29,.55) 45%,rgba(5,10,29,.12) 100%)}
.cbanner.has-img .mono{display:none}
.cbanner.has-img .back{z-index:2}
.cbanner .back{position:absolute;top:16px;right:clamp(18px,4vw,40px);background:rgba(5,10,29,.55);border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;font-size:.85rem;color:var(--head);backdrop-filter:blur(8px)}
.cbanner .back:hover{color:var(--gold)}
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.chead h1{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.chead .m{color:var(--muted);font-size:.92rem;margin-top:.3rem}
.cgrid{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
@media(max-width:860px){.cgrid{grid-template-columns:1fr}}
.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-bottom:1.4rem}
.tabs button{background:none;border:none;color:var(--muted);font-size:.92rem;font-weight:600;padding:.9rem .7rem;cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}
.pane{display:none}.pane.on{display:block}
.pane p.intro{color:var(--text);font-size:.98rem}
.doc,.devrow,.rev{border:1px solid var(--line);border-radius:10px;background:var(--glass);padding:1rem 1.1rem;margin-bottom:.8rem}
.doc{display:flex;gap:1rem;align-items:center}
.doc .av{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:var(--serif);color:transparent;-webkit-text-stroke:1px rgba(228,193,87,.6);background:linear-gradient(150deg,var(--ink-600),var(--ink-850));font-size:1.4rem}
.doc .info b{color:var(--head);font-size:1rem}
.doc .info .sp{color:var(--gold-deep);font-size:.82rem;font-weight:700}
.doc .info .xp{color:var(--muted);font-size:.82rem}
.doc .drate{margin-inline-start:auto;white-space:nowrap}
.devrow{display:flex;gap:.9rem;align-items:flex-start}
.devrow .ic{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:rgba(228,193,87,.1);color:var(--gold)}
.devrow .ic svg{width:22px;height:22px}
.devrow .dv-thumb{width:52px;height:52px;flex:0 0 auto;border-radius:10px;background:center/cover no-repeat;border:1px solid var(--line)}
.devrow b{color:var(--head)}
.devrow .u{color:var(--muted);font-size:.85rem}
.rev .rh{display:flex;justify-content:space-between;gap:.6rem;align-items:center;margin-bottom:.3rem}
.rev .rh b{color:var(--head);font-size:.92rem}
.rev .rh .v{color:var(--good);font-size:.72rem;border:1px solid rgba(120,220,160,.3);border-radius:999px;padding:.1rem .5rem}
.rev p{color:var(--text);font-size:.9rem}
.rev-reply-pub{margin-top:.6rem;padding:.6rem .85rem;border-radius:9px;background:rgba(228,193,87,.08);border:1px solid var(--line);font-size:.86rem;color:var(--text)}
.rev-reply-pub b{color:var(--gold)}
.c-offers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.c-offers-grid .offer .op{color:var(--gold);font-family:var(--serif);font-size:1.25rem;margin-top:.5rem}
.c-offers-grid .offer .btn{margin-top:1rem;padding:.55rem 1.1rem;font-size:.85rem}
.ba-cap{font-size:.8rem;color:var(--muted);margin-top:.8rem;text-align:center}
.ba-cases{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.ba-cases .thumb{display:flex;align-items:center;gap:.6ch;padding:.3rem .7rem .3rem .3rem;border-radius:10px;border:1px solid var(--line);background:var(--glass-2);color:var(--text);cursor:pointer;font-size:.82rem;transition:all .2s;font-family:inherit}
.ba-cases .thumb .ta{width:36px;height:27px;border-radius:6px;background:linear-gradient(135deg,#e9d9c6,#caa877);flex:0 0 auto;border:1px solid var(--line);display:grid;place-items:center;background-size:cover;background-position:center}
.ba-cases .thumb .ta .play{font-size:.6rem;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);line-height:1}
.ba-cases .thumb:hover{border-color:var(--gold)}
.ba-cases .thumb.on{border-color:var(--gold);color:var(--gold)}
/* CV case clip — same footprint as the before/after slider it replaces */
.dr-video{width:100%;aspect-ratio:16/10;border-radius:var(--radius);border:1px solid var(--line);background:#05070f;display:block;object-fit:cover}
.cbook{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);padding:1.4rem}
.cbook .price{font-family:var(--serif);font-size:2rem;color:var(--head);font-weight:600}
.cbook .price small{font-size:.9rem;color:var(--muted);font-family:var(--sans)}
.cbook ul{list-style:none;margin:1rem 0;display:flex;flex-direction:column;gap:.6rem}
.cbook ul li{font-size:.88rem;color:var(--text);display:flex;gap:.5ch}
.cbook ul li::before{content:"✓";color:var(--gold);font-weight:900}

/* ===== BOOKING PAGE ===== */
.book-grid{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}
@media(max-width:860px){.book-grid{grid-template-columns:1fr}}
.bsec{border:1px solid var(--line);border-radius:var(--radius);background:var(--glass);padding:1.4rem 1.5rem;margin-bottom:1.2rem}
.bsec h3{font-size:1.05rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.6ch}
.bsec h3 .n{width:24px;height:24px;border-radius:50%;background:rgba(228,193,87,.14);color:var(--gold);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.bchips{display:flex;gap:.55rem;flex-wrap:wrap}
.bchips .chip{text-align:center;line-height:1.3}

/* gift toggle — deliberately at the payment step, per the client's own instruction */
.gift-toggle{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem;padding:.9rem 1rem;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;background:rgba(228,193,87,.04);transition:border-color .2s}
.gift-toggle:hover{border-color:rgba(228,193,87,.35)}
.gift-toggle input{position:absolute;opacity:0;width:0;height:0}
.gift-toggle .gt-box{width:38px;height:38px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  font-size:1.2rem;background:rgba(228,193,87,.12);transition:transform .2s}
.gift-toggle input:checked ~ .gt-box{transform:scale(1.1);background:linear-gradient(135deg,var(--gold-lite),var(--gold-deep))}
.gift-toggle .gt-label{display:flex;flex-direction:column;gap:.15rem}
.gift-toggle .gt-label b{color:var(--head);font-size:.92rem}
.gift-toggle .gt-label small{color:var(--muted);font-size:.78rem}
.gift-toggle input:checked ~ .gt-label b{color:var(--gold)}
.gift-form{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line-soft);display:flex;flex-direction:column;gap:.9rem}
.gift-form[hidden]{display:none}
.bsummary{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--ink-700),var(--ink-950));padding:1.5rem}
.bsummary h3{font-size:1.1rem;margin-bottom:1rem}
.bsummary .clinic{color:var(--gold);font-weight:700;margin-bottom:.2rem}
.bsummary .rows{margin:1rem 0}
.bsummary .row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;font-size:.9rem;color:var(--text);border-bottom:1px dashed var(--line-soft)}
.bsummary .row b{color:var(--head);font-weight:600;text-align:left}
.bsummary .row.total{border:none;margin-top:.4rem;font-size:1.05rem}
.bsummary .row.total b{color:var(--gold);font-family:var(--serif);font-size:1.4rem}
.b-secure{font-size:.78rem;color:var(--muted);text-align:center;margin-top:.8rem;display:flex;align-items:center;justify-content:center;gap:.5ch}
.b-done{display:none;text-align:center;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--ink-700),var(--ink-950));padding:clamp(2rem,5vw,3.5rem);max-width:560px;margin:1rem auto}
.b-done .check{width:72px;height:72px;border-radius:50%;background:rgba(120,220,160,.14);color:var(--good);display:grid;place-items:center;font-size:2.2rem;margin:0 auto 1.2rem;border:1px solid rgba(120,220,160,.3)}
.b-done h2{margin-bottom:.6rem}
.b-done .ref{font-family:var(--serif);color:var(--gold);font-size:1.3rem;letter-spacing:.05em}
.b-done .dl{margin:1.2rem 0;color:var(--text);line-height:2}
.wa-btn{display:inline-flex;align-items:center;gap:.5rem;background:#25D366;color:#06331a;font-weight:700;
  padding:.75rem 1.5rem;border-radius:12px;text-decoration:none;margin-bottom:.9rem;transition:filter .15s}
.wa-btn:hover{filter:brightness(1.08)}
.wa-btn[hidden]{display:none}

/* ===== LOGIN / OTP ===== */
.auth{min-height:calc(100vh - 74px);display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) 1rem}
/* clinic registration */
.reg-card{width:min(520px,100%)}
.reg-steps{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.6rem;flex-wrap:wrap}
.reg-steps span{font-size:.74rem;color:var(--muted);padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line);position:relative}
.reg-steps span.on{color:var(--gold);border-color:var(--gold);background:rgba(228,193,87,.08)}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.reg-grid{grid-template-columns:1fr}}
.l-hint.bad{color:var(--bad,#e58f8f)}
.doc-uploads{display:flex;flex-direction:column;gap:.7rem;margin:.4rem 0 1rem}
.doc-up{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1.5px dashed var(--line);border-radius:12px;cursor:pointer;transition:border-color .2s}
.doc-up:hover{border-color:var(--gold)}
.doc-up.done{border-style:solid;border-color:rgba(120,220,160,.4);background:rgba(120,220,160,.05)}
.doc-up .du-ic{font-size:1.3rem}
.doc-up .du-label{flex:1 1 auto;color:var(--head);font-weight:600;font-size:.9rem}
.doc-up .du-state{font-size:.8rem;color:var(--muted)}
.doc-up.done .du-state{color:var(--good)}
.auth-card{width:min(440px,100%);border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(170deg,var(--ink-800),var(--ink-950));
  padding:clamp(1.8rem,4vw,2.6rem);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
/* Blueprint p1: "شعار متحرك في الأعلى" — a slow gold shimmer sweeping the wordmark,
   plus a soft halo behind it. Restrained on purpose: it sits above a phone-number field. */
.auth-card .logo{display:flex;justify-content:center;margin-bottom:1.4rem;position:relative}
.auth-card .logo::before{content:"";position:absolute;top:50%;left:50%;width:170px;height:170px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(228,193,87,.18),transparent 65%);
  animation:aura-halo 5s ease-in-out infinite}
.auth-card .logo img{height:34px;position:relative;animation:aura-logo-in .9s cubic-bezier(.2,.7,.3,1) both}
.auth-card .logo::after{content:"";position:absolute;top:50%;left:50%;width:150px;height:44px;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 30%,rgba(242,219,142,.5) 50%,transparent 70%);
  background-size:250% 100%;animation:aura-sheen 4.5s ease-in-out 1s infinite}
@keyframes aura-logo-in{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}}
@keyframes aura-halo{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes aura-sheen{0%{background-position:180% 0}55%,100%{background-position:-80% 0}}
@media (prefers-reduced-motion:reduce){
  .auth-card .logo::before,.auth-card .logo::after,.auth-card .logo img{animation:none}
  .auth-card .logo::after{opacity:0}
}
.auth-card h1{font-size:1.5rem;text-align:center;margin-bottom:.4rem}
.auth-card .sub{color:var(--muted);text-align:center;font-size:.92rem;margin-bottom:1.6rem}
.otp-row{display:flex;gap:.7rem;direction:ltr;justify-content:center;margin:1.2rem 0}
.otp-box{width:58px;height:66px;text-align:center;font-size:1.6rem;font-weight:700;color:var(--head);background:var(--glass);border:1px solid var(--line);border-radius:12px;font-family:var(--serif)}
.otp-box:focus{outline:none;border-color:var(--gold)}
.l-resend{background:none;border:none;color:var(--gold);font-size:.85rem;cursor:pointer;display:block;margin:0 auto;padding:.4rem}
.l-resend[data-ready="0"]{color:var(--muted);cursor:default}
.l-change{background:none;border:none;color:var(--muted);font-size:.85rem;cursor:pointer;display:block;margin:.6rem auto 0}
.l-change:hover{color:var(--gold)}
.l-done{display:none;text-align:center}
.role-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem;text-align:start}
.role{display:block;border:1px solid var(--line);border-radius:12px;background:var(--glass);padding:.9rem 1.1rem;transition:border-color .2s,transform .2s}
.role:hover{border-color:var(--gold);transform:translateY(-2px)}
.role b{color:var(--head);font-size:.95rem;display:block}
.role span{color:var(--muted);font-size:.82rem}
.role.rc{cursor:default}
.role.rc:hover{transform:none}
.rc-pick{display:flex;gap:.5rem;margin-top:.7rem}
.rc-pick .input{flex:1;padding:.5rem .7rem;font-size:.88rem}
.rc-pick .btn{padding:.5rem 1.2rem;font-size:.85rem}
.l-done .check{width:72px;height:72px;border-radius:50%;background:rgba(120,220,160,.14);color:var(--good);display:grid;place-items:center;font-size:2.2rem;margin:0 auto 1.2rem;border:1px solid rgba(120,220,160,.3)}
.mt{margin-top:1rem}

/* reveal */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise{opacity:1;transform:none}html{scroll-behavior:auto}}

.api-badge{position:fixed;bottom:14px;inset-inline-start:14px;z-index:300;font-size:.72rem;font-weight:700;
  color:#8fe6b0;background:rgba(143,230,176,.12);border:1px solid rgba(143,230,176,.35);
  padding:.3rem .7rem;border-radius:999px;backdrop-filter:blur(8px);pointer-events:none}
.l-hint{font-size:.8rem;color:var(--gold);background:rgba(228,193,87,.1);border:1px solid var(--line);
  border-radius:8px;padding:.5rem .7rem;margin-bottom:.8rem;text-align:center}