/* ───────── 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; }
.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); } }
.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;
}

.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); }

/* ── Language switch (only when the owner has filled in the English version) ── */
.lang-sw {
  position: absolute; z-index: 6; top: calc(14px + env(safe-area-inset-top)); inset-inline-end: 14px;
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding-inline: 11px 14px; border-radius: 999px;
  color: var(--txt); font-size: .8125rem; font-weight: 800; text-decoration: none; letter-spacing: .01em;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--edge), 0 10px 24px -16px rgba(var(--h1-rgb), .8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .25s ease, transform .35s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.lang-sw .i { width: 18px; height: 18px; color: var(--accent); transition: transform .8s var(--ease-out); }
.lang-sw:hover { background: var(--glass-hi); }
.lang-sw:hover .i { transform: rotate(180deg); }
.lang-sw:active { transform: scale(.94); }
.lang-sw:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .9); outline-offset: 3px; }
.motion .lang-sw { animation: lang-in .9s var(--ease-out) 1.9s backwards; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-10px) scale(.9); } }

/* ── 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); }
.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); }
  .content { margin: 0; width: 100%; max-width: 540px; padding-block: 18vh 160px; padding-inline: 32px 48px; }
  .savebar { left: 0; right: auto; width: 46%; }
  [dir="ltr"] .savebar { left: auto; right: 0; }
  /* The language switch sits in the top corner on the content's side, not in the middle of the screen. */
  .lang-sw { position: fixed; top: 22px; inset-inline-end: 28px; }
}

/* ── 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; }