/* ───────── Profile page: cinematic 3D card ─────────
   Layout: a dark stage where the person's card floats in 3D above a ripple floor; contact keys and
   glass rows deal in below. On wide screens the stage stays put on one side while the content scrolls.
   Every theme comes in a dark version (the night sky) and a light one (.mode-light: a sunlit page tinted
   with the theme). Colours that differ between the two are variables set once below. */

body.profile { background: #07061A; color: #F4F3FF; color-scheme: dark; overflow-x: clip; }
body.profile-light { background: #F4F4FA; color: #17153A; color-scheme: light; }
.pf {
  --txt: #F4F3FF;
  --txt-2: #B8B5E3;
  --txt-3: #8C89BF;
  --glass: rgba(255, 255, 255, .07);
  --glass-hi: rgba(255, 255, 255, .13);
  --edge: rgba(255, 255, 255, .1);
  --accent: var(--tc-d);
  --accent-rgb: var(--tc-d-rgb);
  --sky: radial-gradient(130% 70% at 50% -10%, #1A1650 0%, #0B0A28 45%, #07061A 75%);
  --row: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  --row-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, .1);
  --key: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
  --key-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 34px -18px rgba(var(--accent-rgb), .95);
  --back: linear-gradient(150deg, #1D1A52 0%, #0B0A26 100%);
  --back-txt: #F4F3FF;
  --back-hint: #B8B5E3;
  --floor-shadow: rgba(0, 0, 0, .55);
  --soft: rgba(255, 255, 255, .04);
  --page: #07061A;
  --ok: #34D399; --ok-rgb: 52, 211, 153;
  --soon: #FBBF24; --soon-rgb: 251, 191, 36;
  --shut: #FB7185; --shut-rgb: 251, 113, 133;
  --lx: calc(100% - 39px);   /* where the brand colour spreads from: the icon (on the right in Persian) */
  --nudge: -5px;             /* the chevron leans toward where the row leads */
  position: relative; min-height: 100dvh; color: var(--txt);
  overflow-x: clip;
}
.pf.mode-light {
  --txt: #17153A;
  --txt-2: #4B4874;
  --txt-3: #6F6C96;
  --glass: rgba(255, 255, 255, .74);
  --glass-hi: #FFFFFF;
  --edge: rgba(23, 21, 58, .08);
  --accent: var(--tc);
  --accent-rgb: var(--tc-rgb);
  --sky: radial-gradient(120% 70% at 50% -10%, var(--paper-2) 0%, var(--paper) 58%);
  --row: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
  --row-shadow: inset 0 0 0 1px var(--edge), 0 16px 36px -26px rgba(var(--h1-rgb), .55);
  --key: linear-gradient(160deg, #FFFFFF, rgba(255, 255, 255, .72));
  --key-shadow: inset 0 0 0 1px var(--edge), 0 16px 30px -16px rgba(var(--h1-rgb), .5);
  --back: linear-gradient(150deg, #FFFFFF 0%, var(--paper-2) 100%);
  --back-txt: #17153A;
  --back-hint: #4B4874;
  --floor-shadow: rgba(23, 21, 58, .28);
  --soft: rgba(23, 21, 58, .05);
  --page: var(--paper);
  --ok: #059669; --ok-rgb: 5, 150, 105;
  --soon: #B45309; --soon-rgb: 217, 119, 6;
  --shut: #E11D48; --shut-rgb: 225, 29, 72;
}
[dir="ltr"] .pf { --lx: 39px; --nudge: 5px; }

/* ── Sky: drifting aurora light + dust ── */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--sky); }
.aur { position: absolute; width: 95vmax; height: 95vmax; border-radius: 50%; will-change: transform; }
.aur-1 { top: -55vmax; right: -40vmax; background: radial-gradient(circle, rgba(var(--h1-rgb), .55) 0%, rgba(var(--h1-rgb), 0) 60%); animation: drift-a 19s var(--ease-in-out) infinite alternate; }
.aur-2 { top: -25vmax; left: -50vmax; background: radial-gradient(circle, rgba(var(--h2-rgb), .45) 0%, rgba(var(--h2-rgb), 0) 60%); animation: drift-b 23s var(--ease-in-out) infinite alternate; }
.aur-3 { bottom: -60vmax; right: -30vmax; background: radial-gradient(circle, rgba(var(--ring-rgb), .22) 0%, rgba(var(--ring-rgb), 0) 60%); animation: drift-a 29s var(--ease-in-out) infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(-18vmax, 14vmax, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(22vmax, 10vmax, 0) scale(.9); } }
/* On phones and tablets the aurora stands still: three screen-sized layers moving every frame cost more there than
   the slow drift is worth. Without will-change they flatten into the sky, which then needs no work at all. */
@media (hover: none) { .aur { animation: none; will-change: auto; } }
/* The dust is drawn above everything else in the sky, so the still parts (aurora, floodlights) never sit on top of
   a moving layer and stay flattened into one picture. */
.sky .dust { z-index: 1; }
.dust-theme { --dust-rgb: var(--tc-rgb); }
.dust-flood { --dust-rgb: 255, 236, 180; }
.dust-yellow { --dust-rgb: 247, 230, 27; }
.dust-gold { --dust-rgb: 232, 190, 85; }
.dust-ai { --dust-rgb: 214, 200, 255; }
.dust-orange { --dust-rgb: 255, 138, 61; }
.dust-teal { --dust-rgb: 63, 211, 182; }
.dust-rgb { --dust-rgb: 0, 240, 255; }
.dust-amber { --dust-rgb: 232, 181, 74; }
.mode-light .aur { opacity: .5; }
.mode-light .aur-3 { opacity: .8; }
.mode-light .dust { opacity: .45; }
.mode-light .scene::before { opacity: .7; }

/* ── Stage ── */
.stage {
  position: relative; z-index: 1;
  height: clamp(400px, 108vw, 560px);
  display: grid; place-items: center; align-content: center; gap: 34px;
  perspective: 1100px; perspective-origin: 50% 40%;
  padding-top: 8px;
}
.scene { position: relative; width: min(84vw, 380px); aspect-ratio: 1.586; transform-style: preserve-3d; pointer-events: none; }
.scene::before, .floor, .floor-shadow, .face { pointer-events: none; }
.scene::before {
  content: ''; position: absolute; inset: -30% -20%; border-radius: 50%; transform: translateZ(-160px);
  background: radial-gradient(closest-side, rgba(var(--h1-rgb), .55), rgba(var(--h2-rgb), .18) 55%, transparent 75%);
  animation: glow 5s var(--ease-in-out) infinite alternate;
}
@keyframes glow { from { opacity: .65; transform: translateZ(-160px) scale(.92); } to { opacity: 1; transform: translateZ(-160px) scale(1.06); } }

.floor { position: absolute; left: 50%; top: 100%; width: 0; height: 0; transform: translate3d(0, 34px, -40px) rotateX(74deg); transform-style: preserve-3d; }
.floor span {
  position: absolute; width: 400px; height: 400px; left: -200px; top: -200px; border-radius: 50%;
  border: 2.5px solid rgb(var(--ring-rgb)); box-shadow: 0 0 16px rgba(var(--ring-rgb), .6), inset 0 0 16px rgba(var(--ring-rgb), .35);
  opacity: 0; transform: scale(.15);
}
.floor span:nth-child(4) { display: none; }
.landed .floor span { animation: floor-wave 4.8s var(--ease-out) infinite; }
.landed .floor span:nth-child(2) { animation-delay: 1.6s; }
.landed .floor span:nth-child(3) { animation-delay: 3.2s; }
@keyframes floor-wave { 0% { opacity: 0; transform: scale(.12); } 10% { opacity: 1; } 70% { opacity: .35; } 100% { opacity: 0; transform: scale(1.1); } }
/* .lite devices (Android, weak phones): the card rests still once it has landed. The breathing glow, the rings of
   light and the float are many big layers moving in 3D on every frame, which is what dropped frames there. */
.lite .scene::before { animation: none; }
.lite .floor { display: none; }
.lite .landed .card-float { animation: none; }
.lite .e2, .lite .e4 { display: none; }
.floor-shadow {
  position: absolute; left: 8%; right: 8%; top: calc(100% + 22px); height: 46px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--floor-shadow), transparent);
  transform: translateZ(-60px) scaleX(var(--shadow, 1)); opacity: var(--shadow-o, .9);
}

/* ── The tap: a point of light bursts where the card will appear ── */
.tap-burst { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.tap-burst b, .tap-burst i { position: absolute; border-radius: 50%; opacity: 0; }
.tap-burst b { width: 18px; height: 18px; left: -9px; top: -9px; background: #fff; box-shadow: 0 0 30px 10px rgba(var(--ring-rgb), .9), 0 0 80px 30px rgba(var(--h1-rgb), .6); }
.tap-burst i { width: 160px; height: 160px; left: -80px; top: -80px; border: 2px solid rgba(var(--ring-rgb), .95); box-shadow: 0 0 24px rgba(var(--ring-rgb), .6); }
.motion .tap-burst b { animation: tap-dot .9s var(--ease-out) .05s backwards; }
.motion .tap-burst i { animation: tap-ring 1.1s var(--ease-out) backwards; }
.motion .tap-burst i:nth-of-type(1) { animation-delay: .15s; }
.motion .tap-burst i:nth-of-type(2) { animation-delay: .27s; }
.motion .tap-burst i:nth-of-type(3) { animation-delay: .39s; }
@keyframes tap-dot { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes tap-ring { 0% { opacity: 0; transform: scale(.05); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }

/* ── The card ── */
.edge {
  position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .38)), linear-gradient(150deg, rgb(var(--h1-rgb)), rgb(var(--h2-rgb)));
}
.e1 { transform: translateZ(2px); } .e2 { transform: translateZ(1px); } .e3 { transform: translateZ(0); } .e4 { transform: translateZ(-1px); } .e5 { transform: translateZ(-2px); }
.theme-shab .edge { background: linear-gradient(rgba(var(--ring-rgb), .55), rgba(var(--ring-rgb), .55)), #0E0C2A; }
/* The gentle float of the resting card runs on the compositor; the script only moves the card when it must. */
.card-float { position: absolute; inset: 0; transform-style: preserve-3d; }
.motion .landed .card-float { animation: card-float 7.2s ease-in-out infinite; }
@keyframes card-float { 0%, 100% { transform: none; } 25% { transform: translate3d(0, -6px, 0) rotateX(2.5deg); } 75% { transform: translate3d(0, 6px, 0) rotateX(-2.5deg); } }
.card3d { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; --sx: 0%; --hue: 0; }
.motion .card3d:not(.card-live) { opacity: 0; }
.card3d .face, .card3d .edge { opacity: var(--fade, 1); }
.card3d.is-flipped { transform: rotateY(180deg); }
html:not(.motion) .card3d { transition: transform .9s var(--ease-out); }
.face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 22px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.front {
  transform: translateZ(3px);
  color: var(--ht);
  background: linear-gradient(150deg, var(--h1) 0%, var(--h2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .45), 0 50px 90px -40px rgba(var(--h1-rgb), .9);
  display: grid; grid-template-rows: auto 1fr; padding: 20px 22px 20px;
}
.theme-shab .front { box-shadow: inset 0 0 0 1.5px rgba(var(--ring-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .35), 0 50px 90px -40px rgba(var(--ring-rgb), .5); }
.front-rings { position: absolute; left: -70px; top: -70px; width: 0; height: 0; }
.front-rings i { position: absolute; border-radius: 50%; border: 1.5px solid rgba(var(--rc), .16); width: var(--d); height: var(--d); left: calc(var(--d) / -2); top: calc(var(--d) / -2); }
.front-rings i:nth-child(1) { --d: 170px; border-color: rgba(var(--ring-rgb), .7); border-width: 2px; }
.front-rings i:nth-child(2) { --d: 270px; }
.front-rings i:nth-child(3) { --d: 380px; }
.front-rings i:nth-child(4) { --d: 500px; border-color: rgba(var(--rc), .08); }

.front-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.front-avatar {
  width: 70px; height: 70px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 7px rgba(var(--ring-rgb), .45), 0 14px 28px -10px rgba(0, 0, 0, .5);
}
.front-avatar-glyph { display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: var(--ht); }
.front-avatar-glyph .i { width: 34px; height: 34px; stroke-width: 1.5; }
.front-chip { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.front-chip img { width: 30px; height: 30px; border-radius: 9px; }
.front-body { position: relative; align-self: end; display: grid; gap: 1px; min-width: 0; }
.front-name { font-size: clamp(1.15rem, 5.6vw, 1.55rem); line-height: 1.35; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.front-role { font-size: clamp(.78rem, 3.3vw, .9rem); line-height: 1.6; opacity: .92; }
.front-org { font-size: clamp(.78rem, 3.3vw, .9rem); line-height: 1.5; font-weight: 800; }

.holo {
  position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: conic-gradient(from calc(var(--hue) * 1deg), rgba(255, 0, 170, .5), rgba(0, 255, 230, .5), rgba(255, 230, 0, .45), rgba(120, 90, 255, .5), rgba(255, 0, 170, .5));
  -webkit-mask-image: radial-gradient(circle at calc(50% + var(--sx)) 40%, #000 0%, transparent 55%);
  mask-image: radial-gradient(circle at calc(50% + var(--sx)) 40%, #000 0%, transparent 55%);
}
.sheen {
  position: absolute; inset: -60% -80%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .42) 50%, transparent 58%);
  transform: translateX(var(--sx));
  mix-blend-mode: soft-light;
}

.lite .holo, .lite .sheen { display: none; }
.back {
  transform: rotateY(180deg) translateZ(3px);
  background: var(--back);
  box-shadow: inset 0 0 0 1px rgba(var(--ring-rgb), .4), inset 0 1px 0 rgba(255, 255, 255, .2);
  display: flex; align-items: center; gap: 18px; padding: 18px 22px; color: var(--back-txt);
}
.back-qr { flex: none; height: 100%; aspect-ratio: 1; padding: 8px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 4px rgba(var(--ring-rgb), .35); }
.back-qr svg { width: 100%; height: 100%; }
.back-text { display: grid; gap: 6px; min-width: 0; }
.back-url { direction: ltr; text-align: right; font-weight: 800; font-size: .95rem; overflow-wrap: anywhere; }
.back-hint { font-size: .78rem; color: var(--back-hint); line-height: 1.6; }
.mode-light .back-qr { box-shadow: 0 0 0 1px var(--edge), 0 0 0 5px rgba(var(--ring-rgb), .3); }
[dir="ltr"] .back-url { text-align: left; }

.card-hit {
  position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; margin: 0; background: transparent;
  border-radius: 22px; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; pointer-events: auto;
  transform: translateZ(5px);
}
.card-hit:active { cursor: grabbing; }
.card-hit:focus-visible { outline: 3px solid rgba(var(--ring-rgb), .9); outline-offset: 6px; }

.stage-hint {
  position: relative; z-index: 2; margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--txt-3);
  opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.stage-hint .i { width: 18px; height: 18px; color: rgb(var(--ring-rgb)); }
.landed .stage-hint { opacity: 1; transform: none; }
.landed .stage-hint.gone { opacity: 0; }
html:not(.motion) .stage-hint { opacity: 1; transform: none; }

/* ── Content ── */
.content { position: relative; z-index: 2; max-width: 520px; margin: 0 auto; padding: 0 18px calc(130px + env(safe-area-inset-bottom)); display: grid; gap: 22px; }

.keys { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 8px; perspective: 700px; }
.keys[data-n="1"] { --n: 1; } .keys[data-n="2"] { --n: 2; } .keys[data-n="3"] { --n: 3; }
.motion .keys .key { --delay: 1350ms; }
.key { display: grid; justify-items: center; gap: 9px; text-decoration: none; color: var(--txt); font-size: .8125rem; font-weight: 700; -webkit-tap-highlight-color: transparent; }
.key-ic {
  position: relative; width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: var(--accent);
  background: var(--key);
  box-shadow: var(--key-shadow);
  transition: transform .45s var(--ease-spring), box-shadow .3s ease;
}
.key-ic::after { content: ''; position: absolute; inset: -6px; border-radius: 26px; border: 1.5px solid rgba(var(--accent-rgb), .0); transition: border-color .3s ease, inset .4s var(--ease-out); }
.key-ic .i { width: 26px; height: 26px; }
.key:hover .key-ic, .key:focus-visible .key-ic { transform: translateY(-4px) rotateX(12deg); }
.key:hover .key-ic::after { inset: -9px; }
.key:active .key-ic { transform: scale(.9); transition-duration: .12s; }
.key-ic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bfill, linear-gradient(150deg, var(--b1), var(--b2))); opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .45s var(--ease-spring); }
.key-ic .i { position: relative; transition: color .3s ease; }
.key.lit .key-ic::before, .key:active .key-ic::before, .key:focus-visible .key-ic::before { opacity: 1; transform: none; }
.key.lit .key-ic, .key:active .key-ic, .key:focus-visible .key-ic { color: var(--bfg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 34px -14px var(--bglow); }
@media (hover: hover) and (pointer: fine) {
  .key:hover .key-ic::before { opacity: 1; transform: none; }
  .key:hover .key-ic { color: var(--bfg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 34px -14px var(--bglow); }
  .key:hover .key-ic::after { border-color: var(--b1); }
}
.key:focus-visible { outline: none; }
.key:focus-visible .key-ic { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .8); }

.bio { text-align: center; color: var(--txt-2); font-size: .975rem; line-height: 2.05; max-width: 34ch; margin: 0 auto; white-space: pre-line; }
.motion .bio { --delay: 1500ms; }

.links { display: grid; gap: 10px; perspective: 1000px; }
.lk {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 74px; padding: 13px 16px;
  border: 0; border-radius: 22px; text-align: start; text-decoration: none; color: var(--txt); cursor: pointer; font: inherit;
  background: var(--row);
  box-shadow: var(--row-shadow);
  transform-origin: 50% 0;
  -webkit-tap-highlight-color: transparent;
}
.lk:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .8); outline-offset: 2px; }

/* Brand light: a row takes on its service's colours (Telegram blue, WhatsApp green...). The colour spreads
   from the icon like ink, a light sweeps across, and the icon turns into a white badge.
   Mouse: on hover. Touch screens: the row passing the middle of the screen lights up (profile.js), and on press. */
.lk::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--bfill, linear-gradient(120deg, var(--b1), var(--b2)));
  clip-path: circle(0 at var(--lx) 50%);
  transition: clip-path .6s var(--ease-out);
}
.lk::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%) -120% 0 / 220% 100% no-repeat;
}
.lk-ic, .lk-title, .lk-text, .lk-meta, .lk-end { transition: color .35s ease, background-color .35s ease, box-shadow .35s ease, transform .45s var(--ease-spring); }
.lk.lit::before, .lk:active::before, .lk:focus-visible::before { clip-path: circle(150% at var(--lx) 50%); }
.lk.lit::after, .lk:focus-visible::after { animation: lk-sweep .9s .12s var(--ease-out) backwards; }
@keyframes lk-sweep { from { opacity: 1; background-position: -120% 0; } to { opacity: 1; background-position: 120% 0; } }
.motion .lk.in { transition: transform .45s var(--ease-spring), box-shadow .4s ease, opacity .8s var(--ease-out); transition-delay: 0s; }
.lk.lit, .lk:active, .lk:focus-visible { box-shadow: 0 22px 44px -22px var(--bglow), inset 0 0 0 1px rgba(255, 255, 255, .22); transform: translateY(-2px) scale(1.012); }
.lk.lit .lk-ic, .lk:active .lk-ic, .lk:focus-visible .lk-ic { color: var(--b2); background: #FFFFFF; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); transform: rotate(-8deg) scale(1.1); }
.lk.lit .lk-title, .lk.lit .lk-text, .lk.lit .lk-meta, .lk.lit .lk-end,
.lk:active .lk-title, .lk:active .lk-text, .lk:active .lk-meta, .lk:active .lk-end,
.lk:focus-visible .lk-title, .lk:focus-visible .lk-text, .lk:focus-visible .lk-meta, .lk:focus-visible .lk-end { color: var(--bfg); }
.lk.lit .lk-end { transform: translateX(var(--nudge)); }
@media (hover: hover) and (pointer: fine) {
  .lk:hover::before { clip-path: circle(150% at var(--lx) 50%); }
  .lk:hover::after { animation: lk-sweep .9s .12s var(--ease-out) backwards; }
  .lk:hover { box-shadow: 0 22px 44px -22px var(--bglow), inset 0 0 0 1px rgba(255, 255, 255, .22); transform: translateY(-2px) scale(1.012); }
  .lk:hover .lk-ic { color: var(--b2); background: #FFFFFF; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45); transform: rotate(-8deg) scale(1.1); }
  .lk:hover .lk-title, .lk:hover .lk-text, .lk:hover .lk-meta, .lk:hover .lk-end { color: var(--bfg); }
  .lk:hover .lk-end { transform: translateX(var(--nudge)); }
}
@media (prefers-reduced-motion: reduce) { .lk::before { transition: none; } .lk::after { display: none; } }
.lk-ic {
  position: relative; width: 46px; height: 46px; border-radius: 15px; flex: none; display: grid; place-items: center; color: var(--accent);
  background: rgba(var(--accent-rgb), .13); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22);
  transition: transform .45s var(--ease-spring);
}
.lk-body { position: relative; flex: 1; min-width: 0; display: grid; }
.lk-title { font-weight: 800; font-size: .9375rem; line-height: 1.6; }
.lk-text { font-size: .8125rem; color: var(--txt-2); line-height: 1.6; direction: ltr; text-align: right; unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lk-text-rtl { direction: rtl; unicode-bidi: normal; white-space: normal; }
.lk-text-wrap { white-space: normal; }
[dir="ltr"] .lk-text { text-align: left; }
[dir="ltr"] .lk-end > .i { transform: scaleX(-1); }
.lk-meta { font-size: .75rem; color: var(--txt-3); line-height: 1.5; }
.lk-end { position: relative; color: var(--txt-3); transition: transform .35s var(--ease-out); }
.lk-end .i { width: 20px; height: 20px; }
.lk:hover .lk-end { transform: translateX(var(--nudge)); }
.lk-copy { width: 22px; height: 22px; display: grid; }
.lk-copy > span { grid-area: 1 / 1; display: grid; transition: transform .45s var(--ease-spring), opacity .25s ease; }
.lk-copy-b { color: var(--ok); opacity: 0; transform: scale(.3) rotate(-90deg); }
.lk.copied .lk-copy-a { opacity: 0; transform: scale(.3) rotate(90deg); }
.lk.copied .lk-copy-b { opacity: 1; transform: none; }
.lk-pay { background: linear-gradient(120deg, rgba(var(--h1-rgb), .28), rgba(var(--h2-rgb), .14) 60%, rgba(255, 255, 255, .03)); }
.mode-light .lk-pay { background: linear-gradient(120deg, rgba(var(--h1-rgb), .14), rgba(var(--h2-rgb), .06) 60%, rgba(255, 255, 255, .85)); }
.lk-pay .lk-text { font-size: .95rem; letter-spacing: .04em; color: var(--txt); font-weight: 700; }

.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px;
  border: 0; border-radius: 17px; cursor: pointer; text-decoration: none; font: inherit; font-weight: 700; font-size: .9rem; color: var(--txt);
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge);
  transition: background-color .25s ease, transform .3s var(--ease-spring);
}
.tool:hover { background: var(--glass-hi); }
.tool:active { transform: scale(.96); }
.tool .i { width: 20px; height: 20px; color: var(--accent); }
.mode-light .tool { box-shadow: inset 0 0 0 1px var(--edge), 0 12px 26px -20px rgba(var(--h1-rgb), .6); }
.tool-owner { width: 100%; }

.made-with { display: flex; align-items: center; justify-content: center; gap: 9px; width: max-content; margin: 6px auto 0; padding: 8px 16px; border-radius: 999px; color: var(--txt-3); font-size: .8rem; text-decoration: none; background: var(--soft); }
.made-with img { width: 24px; height: 24px; border-radius: 7px; }
.made-with strong { color: var(--txt); }

/* ── Top tools: the language switch (when the owner wrote an English version) and, on the sample page, themes ── */
.pf-tools {
  position: absolute; z-index: 6; top: calc(14px + env(safe-area-inset-top)); inset-inline: 14px;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.pf-tool { pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.pf-tools .lang-sw { margin-inline-start: auto; } /* alone or not, the language sits in the far corner */
.motion .pf-tools { animation: lang-in .9s var(--ease-out) 1.9s backwards; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } }

/* Language: both languages in one capsule; the one shown sits on a knob in the page's colours. */
.lang-sw {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; width: 92px; height: 40px; padding: 4px;
  border-radius: 999px; text-decoration: none; isolation: isolate;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), 0 12px 26px -16px rgba(var(--h1-rgb), .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .35s var(--ease-spring), box-shadow .25s ease;
}
.lang-knob {
  position: absolute; z-index: -1; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(135deg, var(--h1), var(--h2)); box-shadow: 0 6px 16px -6px rgba(var(--h1-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: inset-inline-start .45s var(--ease-spring);
}
.lang-sw.on-end .lang-knob { inset-inline-start: 50%; }
.lang-opt { display: grid; place-items: center; border-radius: 999px; font-size: .8125rem; font-weight: 900; letter-spacing: .02em; color: var(--txt-2); transition: color .3s ease; }
.lang-opt[lang="fa"] { font-size: .875rem; }
.lang-opt[aria-current] { color: var(--ht); }
.lang-sw.is-going .lang-opt[aria-current] { color: var(--txt-2); }
.lang-sw.is-going .lang-opt:not([aria-current]) { color: var(--ht); }
.lang-sw:hover { box-shadow: inset 0 0 0 1px rgba(var(--ring-rgb), .5), 0 12px 26px -14px rgba(var(--h1-rgb), 1); }
.lang-sw:hover .lang-opt:not([aria-current]) { color: var(--txt); }
.lang-sw:active { transform: scale(.95); }
.lang-sw:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .9); outline-offset: 3px; }

/* Themes button (sample page): three dots in the colours of the page. */
.thm-open {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; padding-inline: 10px 14px; border: 0; border-radius: 999px;
  font: inherit; font-size: .8125rem; font-weight: 800; color: var(--txt); cursor: pointer;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), 0 12px 26px -16px rgba(var(--h1-rgb), .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .35s var(--ease-spring);
}
.thm-open:active { transform: scale(.95); }
.thm-open-dots { display: inline-flex; }
.thm-open-dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--page); }
.thm-open-dots i + i { margin-inline-start: -5px; }
.thm-open-dots i:nth-child(1) { background: var(--h1); }
.thm-open-dots i:nth-child(2) { background: var(--h2); }
.thm-open-dots i:nth-child(3) { background: rgb(var(--ring-rgb)); }
@media (hover: none) { .lang-sw, .thm-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--page); } }

/* The theme sheet: slides up on phones, a floating card over the card's side on wide screens. The page stays visible
   behind it, so each tap shows the change at once. */
.thm[hidden] { display: none; }
.thm { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; }
.thm-scrim { position: absolute; inset: 0; }
.thm-panel {
  position: relative; width: 100%; max-width: 520px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  color: #F4F3FF; background: rgba(14, 12, 40, .97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 -20px 60px -20px rgba(0, 0, 0, .8);
  display: grid; gap: 14px; animation: thm-up .45s var(--ease-out);
  max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain; /* short phones: the sheet scrolls */
}
@keyframes thm-up { from { transform: translateY(40px); opacity: 0; } }
.thm-head { display: flex; align-items: center; gap: 10px; }
.thm-t { flex: 1; margin: 0; font-size: 1.02rem; font-weight: 900; line-height: 1.6; }
.thm-x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; color: #F4F3FF; background: rgba(255, 255, 255, .08); cursor: pointer; }
.thm-x .i { width: 18px; height: 18px; }
.thm-sub { margin: -6px 0 0; color: #B8B5E3; font-size: .8125rem; line-height: 1.9; }
.thm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.thm-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 0; border-radius: 12px; font: inherit; font-size: .875rem; font-weight: 800; color: #B8B5E3; background: transparent; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.thm-modes button .i { width: 18px; height: 18px; }
.thm-modes button[aria-checked="true"] { color: #0B0A24; background: #F4F3FF; }
.thm-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.thm-sw { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: 16px; font: inherit; font-size: .75rem; font-weight: 800; color: #DCDAF7; background: transparent; cursor: pointer; transition: background-color .2s ease; }
.thm-sw:hover { background: rgba(255, 255, 255, .05); }
.thm-dot { width: 46px; height: 46px; border-radius: 15px; background: var(--face, linear-gradient(150deg, var(--h1), var(--h2))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .35s var(--ease-spring), box-shadow .25s ease; }
.thm-sw.theme-football .thm-dot { background: linear-gradient(90deg, transparent calc(50% - .75px), rgba(255, 255, 255, .6) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)), repeating-linear-gradient(90deg, #1E8A4A 0 25%, #187A40 25% 50%); }
.thm-sw.theme-gaming .thm-dot { border-radius: 2px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 12px); background: linear-gradient(#00E6F6 0 0) 14px 0 / 40% 4px no-repeat, linear-gradient(160deg, #FFF04A, #F7E61B 45%, #E9D200); }
.thm-sw[aria-checked="true"] { color: #FFFFFF; }
.thm-sw[aria-checked="true"] .thm-dot { transform: scale(1.08); box-shadow: 0 0 0 2.5px #0E0C28, 0 0 0 4.5px #12D6C3; }
.thm-sw:focus-visible, .thm-modes button:focus-visible, .thm-x:focus-visible { outline: 2px solid #12D6C3; outline-offset: 2px; }
.thm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 14px; font-size: .875rem; font-weight: 800; color: #F4F3FF; text-decoration: none; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.thm-cta .i { width: 18px; height: 18px; }
/* Wide screens: one low bar along the bottom of the card's side (modes, then the themes in rows of eight), so the card
   above it stays in full view while you try them. */
@media (min-width: 960px) {
  .thm { inset: auto; bottom: 24px; inset-inline-start: 28px; display: block; }
  .thm-scrim { display: none; }
  .thm-panel {
    width: min(720px, calc(100vw * 1.15 / 2.15 - 56px)); max-width: none; border-radius: 24px; padding: 16px 18px; animation-name: thm-in;
    grid-template-columns: 124px minmax(0, 1fr) auto auto; grid-template-areas: "t t cta x" "modes list list list"; gap: 12px 14px; align-items: center;
  }
  .thm-head { display: contents; }
  .thm-t { grid-area: t; font-size: .95rem; }
  .thm-x { grid-area: x; width: 36px; height: 36px; }
  .thm-sub { display: none; }
  .thm-cta { grid-area: cta; height: 36px; padding: 0 14px; font-size: .8125rem; }
  .thm-modes { grid-area: modes; grid-template-columns: 1fr; align-self: stretch; align-content: center; }
  .thm-modes button { height: 38px; }
  .thm-list { grid-area: list; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .thm-sw { padding: 6px 2px; }
  .thm-dot { width: 42px; height: 42px; }
  @keyframes thm-in { from { transform: translateY(16px) scale(.97); opacity: 0; } }
}

/* ── Working hours: open/closed at a glance, the week on tap ── */
.hrs { position: relative; border-radius: 22px; background: var(--row); box-shadow: var(--row-shadow); }
.hrs-head {
  display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 13px 16px; list-style: none; cursor: pointer;
  border-radius: 22px; -webkit-tap-highlight-color: transparent;
}
.hrs-head::-webkit-details-marker { display: none; }
.hrs-head::marker { content: ''; }
.hrs-head:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .8); outline-offset: 2px; }
.hrs-ic {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--accent);
  background: rgba(var(--accent-rgb), .13); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .22);
}
.hrs-ic .i { width: 24px; height: 24px; }
/* A ring of light circles the clock while the place is open. */
.hrs-ic::after {
  content: ''; position: absolute; inset: -3px; border-radius: 17px; padding: 2px; opacity: 0;
  background: conic-gradient(from 200deg, var(--st), transparent 35%, transparent 65%, var(--st));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .6s ease;
}
.hrs:has(.is-open) .hrs-ic::after, .hrs:has(.is-soon) .hrs-ic::after { opacity: 1; animation: ring-breathe-o 1.6s ease-in-out infinite alternate; }
@keyframes ring-breathe-o { from { opacity: .35; } to { opacity: 1; } }
.hrs:has(.is-open) .hrs-ic { --st: var(--ok); }
.hrs:has(.is-soon) .hrs-ic { --st: var(--soon); }
.hrs-main { flex: 1; min-width: 0; display: grid; }
.hrs-title { font-weight: 800; font-size: .9375rem; line-height: 1.6; }
.hrs-now { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: .8125rem; line-height: 1.7; color: var(--txt-2); }
.hrs-now b { font-weight: 800; color: var(--st); }
.hrs-now.is-open { --st: var(--ok); --st-rgb: var(--ok-rgb); }
.hrs-now.is-soon { --st: var(--soon); --st-rgb: var(--soon-rgb); }
.hrs-now.is-closed { --st: var(--shut); --st-rgb: var(--shut-rgb); }
.hrs-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st); box-shadow: 0 0 10px rgba(var(--st-rgb), .8); }
/* The "live" pulse is a disc that grows and fades (scale and opacity: the compositor runs it without repainting). */
.hrs-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(var(--st-rgb), .7); opacity: 0; }
.hrs-now.is-open .hrs-dot::after, .hrs-now.is-soon .hrs-dot::after { animation: hrs-live 2s var(--ease-out) infinite; }
@keyframes hrs-live { 0% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.25); } }
.hrs-sub { font-variant-numeric: tabular-nums; }
.hrs-more { flex: none; color: var(--txt-3); display: grid; transition: transform .5s var(--ease-spring), color .2s ease; }
.hrs-more .i { width: 20px; height: 20px; }
.hrs[open] .hrs-more { transform: rotate(180deg); color: var(--accent); }
.hrs-week { padding: 0 14px 14px; }
.hrs-week ul { list-style: none; margin: 0; padding: 10px 0 0; display: grid; gap: 2px; border-top: 1px solid var(--edge); }
.hrs-week li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 12px; border-radius: 12px; font-size: .875rem; line-height: 1.7; }
.hrs-day { color: var(--txt-2); font-weight: 700; white-space: nowrap; }
.hrs-time { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.hrs-week li.is-closed .hrs-time { color: var(--txt-3); font-weight: 500; }
.hrs-week li.is-today { background: rgba(var(--accent-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .26); }
.hrs-week li.is-today .hrs-day { color: var(--accent); }
.hrs-note { margin-top: 10px; padding-inline: 12px; color: var(--txt-3); font-size: .78rem; line-height: 1.85; }
.motion .hrs[open] .hrs-week li { animation: hrs-row .5s var(--ease-out) backwards; }
.motion .hrs[open] .hrs-week li:nth-child(2) { animation-delay: .04s; }
.motion .hrs[open] .hrs-week li:nth-child(3) { animation-delay: .08s; }
.motion .hrs[open] .hrs-week li:nth-child(4) { animation-delay: .12s; }
.motion .hrs[open] .hrs-week li:nth-child(5) { animation-delay: .16s; }
.motion .hrs[open] .hrs-week li:nth-child(6) { animation-delay: .2s; }
.motion .hrs[open] .hrs-week li:nth-child(7) { animation-delay: .24s; }
.motion .hrs[open] .hrs-note { animation: hrs-row .5s var(--ease-out) .28s backwards; }
@keyframes hrs-row { from { opacity: 0; transform: perspective(600px) translateY(-8px) rotateX(-40deg); } }

/* ── Intro video (Aparat player in a glowing frame) ── */
.vid { display: grid; gap: 10px; }
.vid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vid-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 5.4vw, 1.7rem); line-height: 1.35; color: var(--txt); text-wrap: balance; min-width: 0; }
.vid-ext { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-size: .8125rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vid-ext .i { width: 16px; height: 16px; transition: transform .35s var(--ease-spring); }
.vid-ext:hover .i { transform: translateX(var(--nudge)); }
.vid-frame {
  position: relative; isolation: isolate; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: linear-gradient(150deg, var(--h1), var(--h2));
  box-shadow: 0 30px 60px -30px rgba(var(--h1-rgb), .95);
}
/* The turning light rim lives in its own window, cut to the frame's rounded shape with clip-path: Safari does not
   round the corners of a moving layer clipped only by overflow and border-radius, and showed a square around it. */
.vid-rim, .save-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.vid-rim { z-index: -1; clip-path: inset(0 round 22px); }
.save-rim { z-index: -2; clip-path: inset(0 round 21px); }
.vid-rim::before {
  content: ''; position: absolute;
  left: 50%; top: 50%; width: 150%; aspect-ratio: 1;
  background: conic-gradient(rgb(var(--ring-rgb)), transparent 25%, rgba(255, 255, 255, .85) 40%, transparent 55%, rgb(var(--ring-rgb)) 100%);
  transform: translate(-50%, -50%); animation: rim-spin 6s linear infinite;
}
.vid-wait { position: absolute; inset: 2px; border-radius: 20px; display: grid; place-items: center; color: var(--ht); background: linear-gradient(150deg, var(--h1), var(--h2)); }
.vid-wait .i { width: 64px; height: 64px; stroke-width: 1.3; opacity: .9; animation: vid-breathe 2.4s var(--ease-in-out) infinite alternate; }
@keyframes vid-breathe { to { transform: scale(1.12); opacity: .6; } }
.vid-frame iframe { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 0; border-radius: 20px; background: transparent; }
.motion .vid .vid-frame { transform: perspective(1000px) rotateX(18deg) scale(.92); transition: transform 1.1s var(--ease-out) .15s; }
.motion .vid.in .vid-frame { transform: none; }

/* ── Contact exchange: "leave your number" ── */
.xch-open {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 13px 16px;
  border-radius: 22px; text-decoration: none; color: var(--txt); -webkit-tap-highlight-color: transparent;
  background: linear-gradient(120deg, rgba(var(--h1-rgb), .32), rgba(var(--h2-rgb), .16) 60%, rgba(255, 255, 255, .04));
  box-shadow: inset 0 0 0 1px rgba(var(--ring-rgb), .35), 0 20px 40px -26px rgba(var(--h1-rgb), .9);
  transition: transform .45s var(--ease-spring), box-shadow .3s ease;
}
.mode-light .xch-open { background: linear-gradient(120deg, rgba(var(--h1-rgb), .16), rgba(var(--h2-rgb), .07) 60%, rgba(255, 255, 255, .85)); }
.xch-open::before {
  content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: 23.5px; padding: 1.5px;
  background: conic-gradient(from 220deg, rgb(var(--ring-rgb)), transparent 30%, transparent 70%, rgb(var(--ring-rgb)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ring-breathe-o 2.4s ease-in-out infinite alternate;
}
.xch-open:hover, .xch-open:focus-visible { transform: translateY(-2px); outline: none; }
.xch-open:active { transform: scale(.98); }
.xch-open-ic { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--ht); background: linear-gradient(150deg, var(--h1), var(--h2)); box-shadow: 0 10px 20px -10px rgba(var(--h1-rgb), 1); }
.xch-open-ic .i { width: 24px; height: 24px; }
.motion .xch-open-ic .i { animation: xch-swap 3.6s var(--ease-in-out) infinite; }
@keyframes xch-swap { 0%, 60% { transform: none; } 75% { transform: scaleX(-1); } 90%, 100% { transform: none; } }
.xch-open-t { flex: 1; min-width: 0; display: grid; }
.xch-open-t b { font-weight: 800; font-size: .9375rem; line-height: 1.6; }
.xch-open-t span { font-size: .8125rem; color: var(--txt-2); line-height: 1.6; }
.xch-open .lk-end { color: var(--txt-3); }

.notice-x { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; font-size: .875rem; line-height: 1.8; background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge); }
.notice-x .i { flex: none; width: 20px; height: 20px; }
.notice-x.is-ok .i { color: var(--ok); }
.notice-x.is-error .i { color: var(--shut); }

/* The sheet: slides up from the bottom on phones, a floating card on wide screens. Works without script via #exchange. */
.xch { position: fixed; inset: 0; z-index: 70; display: none; align-items: end; justify-items: center; }
.xch:target, .xch.open { display: grid; }
.xch-scrim { position: absolute; inset: 0; background: rgba(5, 4, 18, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: none) { .xch-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 4, 18, .78); } }
.xch-sheet {
  --s-bg: #14123A; --s-txt: #F4F3FF; --s-txt-2: #B8B5E3; --s-in: rgba(255, 255, 255, .07); --s-line: rgba(255, 255, 255, .14);
  position: relative; width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; color: var(--s-txt);
  background: linear-gradient(180deg, rgba(var(--h1-rgb), .22), rgba(var(--h1-rgb), 0) 140px), var(--s-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -30px 80px -30px rgba(0, 0, 0, .9);
}
.mode-light .xch-sheet { --s-bg: #FFFFFF; --s-txt: #17153A; --s-txt-2: #4B4874; --s-in: var(--paper); --s-line: rgba(23, 21, 58, .12); box-shadow: 0 -30px 80px -30px rgba(23, 21, 58, .45); }
.mode-light .xch-scrim { background: rgba(23, 21, 58, .35); }
.motion .xch.open .xch-sheet, .motion .xch:target .xch-sheet { animation: xch-up .55s var(--ease-out); }
.motion .xch.open .xch-scrim, .motion .xch:target .xch-scrim { animation: xch-fade .4s ease; }
@keyframes xch-up { from { transform: translateY(100%); } }
@keyframes xch-fade { from { opacity: 0; } }
.xch.closing .xch-sheet { transform: translateY(100%); transition: transform .35s var(--ease-in-out); }
.xch.closing .xch-scrim { opacity: 0; transition: opacity .35s ease; }
@media (min-width: 720px) {
  .xch { align-items: center; }
  .xch-sheet { border-radius: 28px; padding-bottom: 22px; }
  @keyframes xch-up { from { opacity: 0; transform: translateY(40px) scale(.96); } }
  .xch.closing .xch-sheet { transform: translateY(30px) scale(.96); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
}
.xch-grip { display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 5px; background: var(--s-line); }
.xch-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xch-form, .xch-done { display: grid; gap: 14px; }
.xch-head { display: flex; align-items: flex-start; gap: 12px; }
.xch-ic { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--ht); background: linear-gradient(150deg, var(--h1), var(--h2)); }
.xch-ic .i { width: 24px; height: 24px; }
.xch-head > div { flex: 1; min-width: 0; }
.xch-title { font-size: 1.15rem; font-weight: 900; line-height: 1.6; text-wrap: balance; }
.xch-sub { color: var(--s-txt-2); font-size: .85rem; line-height: 1.8; }
.xch-x { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--s-txt-2); background: var(--s-in); }
.xch-x .i { width: 20px; height: 20px; }
.xch-field { display: grid; gap: 6px; font-size: .85rem; font-weight: 700; }
.xch-field small { font-weight: 500; color: var(--s-txt-2); }
.xch-field input, .xch-field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 0; border-radius: 16px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--s-txt);
  background: var(--s-in); box-shadow: inset 0 0 0 1px var(--s-line); transition: box-shadow .2s ease;
}
.xch-field textarea { resize: vertical; min-height: 76px; line-height: 1.8; }
.xch-field input::placeholder, .xch-field textarea::placeholder { color: var(--s-txt-2); opacity: .6; font-weight: 500; }
.xch-field input:focus, .xch-field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--ring-rgb)), 0 0 0 4px rgba(var(--ring-rgb), .15); }
.xch-field [dir="ltr"] { text-align: left; }
[dir="rtl"] .xch-field input[dir="ltr"]::placeholder { text-align: right; }
.xch-field.bad input { box-shadow: inset 0 0 0 2px var(--shut); }
.xch-err { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--shut); min-height: 0; }
.xch-err:empty { display: none; }
.xch-fail { color: var(--shut); font-size: .85rem; font-weight: 600; }
.xch-fail:empty { display: none; }
.xch-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 18px; cursor: pointer;
  font: inherit; font-weight: 900; font-size: 1rem; text-decoration: none; color: var(--ht); background: linear-gradient(150deg, var(--h1), var(--h2));
  box-shadow: 0 18px 36px -16px rgba(var(--h1-rgb), .9); transition: transform .35s var(--ease-spring), opacity .2s ease;
}
.xch-send .i { width: 22px; height: 22px; }
.xch-send:active { transform: scale(.97); }
.xch-send[disabled] { opacity: .7; cursor: progress; }
.xch-done { justify-items: center; text-align: center; padding: 10px 0 4px; }
.xch-done .xch-send { width: 100%; }
.xch-later { color: var(--s-txt-2); font-size: .9rem; font-weight: 700; text-decoration: none; padding: 6px 12px; }
.xch-check svg { width: 76px; height: 76px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xch-check circle { stroke: rgb(var(--ring-rgb)); stroke-width: 3; stroke-dasharray: 150; stroke-dashoffset: 150; }
.xch-check path { stroke: var(--ok); stroke-width: 4.5; stroke-dasharray: 40; stroke-dashoffset: 40; }
.xch-done:not([hidden]) .xch-check circle { animation: xch-draw .7s var(--ease-out) forwards; }
.xch-done:not([hidden]) .xch-check path { animation: xch-draw .45s var(--ease-out) .45s forwards; }
@keyframes xch-draw { to { stroke-dashoffset: 0; } }
html.xch-lock, html.xch-lock body { overflow: hidden; }

/* ── Save contact: always in reach ── */
.savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none;
  padding: 26px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--page) 45%, transparent);
}
.save {
  pointer-events: auto; position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; max-width: 488px; min-height: 62px; margin: 0 auto; border-radius: 21px;
  text-decoration: none; color: var(--ht); font-weight: 900; font-size: 1.0625rem;
  box-shadow: 0 20px 44px -16px rgba(var(--h1-rgb), .85);
  transition: transform .35s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.save-rim::before {
  content: ''; position: absolute;
  left: 50%; top: 50%; width: 150%; aspect-ratio: 1;
  background: conic-gradient(rgb(var(--ring-rgb)), transparent 25%, rgba(255, 255, 255, .9) 40%, transparent 55%, rgb(var(--ring-rgb)) 100%);
  transform: translate(-50%, -50%); animation: rim-spin 4.5s linear infinite;
}
.save::after { content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: 19px; background: linear-gradient(150deg, var(--h1), var(--h2)); }
/* Turning light rims: a large conic square rotates behind the button (transform only, no repaint per frame). */
@keyframes rim-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }
.save-in, .save-done { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px; transition: transform .5s var(--ease-spring), opacity .3s ease; }
.save .i { width: 25px; height: 25px; }
.save-label { position: relative; }
.save-label::after {
  content: ''; position: absolute; inset: -4px -30px; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-140%); opacity: 0; animation: shine 5.5s var(--ease-in-out) 2.4s infinite;
  mix-blend-mode: soft-light;
}
/* The light is only visible while it crosses; resting at either side it would show as a pale patch on wide buttons. */
@keyframes shine { 0%, 70% { transform: translateX(140%); opacity: 0; } 74%, 94% { opacity: 1; } 100% { transform: translateX(-140%); opacity: 0; } }
.save-done { opacity: 0; transform: translateY(24px) scale(.8); }
.save:active { transform: scale(.97); }
.save.saved .save-in { opacity: 0; transform: translateY(-24px) scale(.8); }
.save.saved .save-done { opacity: 1; transform: none; }
.save.saving .save-ic { animation: pulse-ic .6s var(--ease-out); }
@keyframes pulse-ic { 40% { transform: scale(1.35) rotate(-10deg); } }
.save:focus-visible { outline: 3px solid rgb(var(--ring-rgb)); outline-offset: 3px; }

.profile .toast { background: rgba(244, 243, 255, .96); color: #14123A; bottom: calc(108px + env(safe-area-inset-bottom)); }
.profile-light .toast { background: rgba(23, 21, 58, .94); color: #FFFFFF; }

/* ── Wide screens: stage stays, content scrolls beside it ── */
@media (min-width: 960px) {
  .pf { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .stage { position: sticky; top: 0; height: 100vh; }
  .scene { width: min(36vw, 480px); }
  /* The content sits in the middle of its column, and the save button below it takes exactly its width and place. */
  .content { margin: 0 auto; width: 100%; max-width: 560px; padding-block: 18vh 160px; padding-inline: 40px; }
  .savebar { left: 0; right: auto; width: calc(100% / 2.15); padding-inline: 40px; background: none; }
  [dir="ltr"] .savebar { left: auto; right: 0; }
  .save { max-width: 480px; }
  /* The top tools sit together in the top corner of the card's side (the stage holds them). */
  .pf-tools { top: 22px; inset-inline: 28px auto; }
  .pf-tools .lang-sw { margin-inline-start: 0; }
}

/* ── Status pages (card not active, not found) ── */
body.status { background: #07061A; color: #F4F3FF; color-scheme: dark; }
.status-page { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 32px 22px; text-align: center; }
.status-orb { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 8px; }
.status-orb img { width: 74px; height: 74px; border-radius: 22px; position: relative; z-index: 1; box-shadow: 0 20px 40px -14px rgba(47, 43, 234, .9); }
.status-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(18, 214, 195, .7); animation: orb 3s var(--ease-out) infinite; }
.status-orb i:nth-child(2) { animation-delay: 1s; }
.status-orb i:nth-child(3) { animation-delay: 2s; }
@keyframes orb { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.status-page h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.4; text-wrap: balance; }
.status-page p { color: #B8B5E3; line-height: 2; max-width: 36ch; }
.status-page .btn { min-height: 52px; border-radius: 16px; }
.status-page .btn-ghost { background: rgba(255, 255, 255, .08); color: #F4F3FF; }
.status-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 60% at 50% 30%, rgba(47, 43, 234, .35), transparent 70%), radial-gradient(60% 50% at 80% 90%, rgba(18, 214, 195, .15), transparent 70%), #07061A; }

/* The owner's logo in place of the brand's mark: a tile of the logo's own shape, light under a dark logo and dark
   under a light one (the panel works out which when the logo is uploaded). */
.front-chip.front-logo { width: auto; min-width: 42px; height: 42px; padding: 0 8px; }
.pf .front-chip.front-logo.tone-dark { background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.pf .front-chip.front-logo.tone-light { background: rgba(8, 8, 12, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.front-chip.front-logo img { width: auto; height: 28px; max-width: 72px; object-fit: contain; }
.pf .front-chip.front-logo img { border-radius: 0; }