:root {
    --bg: #060A16; --bg2: #0C1328; --panel: rgba(12, 18, 42, .82); --panel-solid: #0E1530;
    --text: #EEF1FB; --text-2: #B9C0DA; --muted: #8F98BA; --line: rgba(143, 152, 186, .2);
    --gold: #F5B84A; --gold-ink: #1A1408; --cyan: #6ED3F0; --coral: #F2836B; --ok: #7ED9A6;
    --accent: #FFF0D6; --accent-rgb: 255,240,214; --accent-ink: #251D25;
    --font-body: Nunito, "Segoe UI", system-ui, sans-serif;
    --font-display: var(--font-body);
    --font-mono: var(--font-body);
    --floating-surface: linear-gradient(145deg, rgba(39,49,77,.96), rgba(19,27,49,.97) 46%, rgba(10,16,33,.98));
    --floating-edge: rgba(186,204,242,.25);
    --floating-shadow: inset 0 1px 2px rgba(237,244,255,.18), inset 1px 0 2px rgba(211,225,255,.06), 0 12px 24px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.18);
    --account-surface: radial-gradient(ellipse at 0 0, rgba(125,65,110,.22), transparent 60%), linear-gradient(145deg,#20243d,#11162c 55%,#151a30);
    --account-edge: rgba(219,206,238,.26);
    --account-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 1px 0 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.5), 0 5px 0 #090d1e, 0 8px 0 rgba(8,11,25,.65), 0 28px 48px rgba(0,0,0,.55), 0 55px 100px rgba(0,0,0,.6), 0 0 70px rgba(160,92,136,.1);
    --top-h: 66px; --panel-w: 600px;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; overflow: hidden; }
  [hidden] { display: none !important; }
  .account-menu { position: fixed; z-index: 45; width: min(296px, calc(100vw - 24px)); padding: 10px; overflow-y: auto;
    border: 1px solid var(--account-edge); border-radius: 20px; background: var(--account-surface); color: var(--accent); color-scheme: dark;
    box-shadow: var(--account-shadow); transform-origin: top right; animation: account-menu-in .18s ease-out; }
  .account-menu-identity { display: flex; align-items: center; gap: 12px; padding: 10px 10px 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(var(--accent-rgb),.16); }
  .account-menu-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg,#834b70,#42213e); color: var(--accent); box-shadow: inset 0 1px 0 #ffffff24; font-size: 18px; font-weight: 800; }
  .account-menu-identity > div { min-width: 0; }
  .account-menu-identity b, .account-menu-identity > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-menu-identity b { font-size: 15px; font-weight: 800; }
  .account-menu-identity > div > span { margin-top: 2px; font-size: 12px; color: rgba(var(--accent-rgb),.74); }
  .account-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 11px 12px;
    border-radius: 11px; text-align: left; font-size: 13.5px; font-weight: 700; color: var(--accent); transition: background .18s ease, color .18s ease; }
  .account-menu-item-content { display: flex; align-items: center; gap: 11px; min-width: 0; transition: transform .18s ease; }
  .account-menu-item-content svg { width: 18px; height: 18px; flex: none; color: rgba(var(--accent-rgb),.8); }
  .account-menu-count { flex: none; display: grid; place-items: center; min-width: 24px; padding: 1px 6px; border-radius: 7px; font-size: 11px; background: rgba(var(--accent-rgb),.12); color: var(--accent); }
  .account-menu-divider { height: 1px; margin: 7px 10px; background: rgba(var(--accent-rgb),.16); }
  .account-menu-exit { color: var(--accent); }
  .account-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(var(--accent-rgb),.12); color: var(--accent); }
  .account-menu-item:focus-visible .account-menu-item-content { transform: translateX(4px); }
  .account-menu-item:active { background: rgba(var(--accent-rgb),.18); }
  #btnAva[aria-expanded="true"] { outline: 2px solid #b78aa5; outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) {
    .account-menu-item:hover { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
    .account-menu-item:hover .account-menu-item-content { transform: translateX(4px); }
  }
  @keyframes account-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
  .account-settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: #ffffff05; }
  .account-settings-tabs button { flex: 1; padding: 10px 12px; border-radius: 11px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--text-2); }
  .account-settings-tabs button[aria-selected="true"] { background: #eee0ea; color: #713b60; }
  .account-settings-panel { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 0; }
  .account-settings-panel h3 { font-size: 18px; }
  .account-settings-panel p { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
  .account-settings-panel meter { width: 100%; }
  .account-profile { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
  .account-profile .ava { width: 48px; height: 48px; font-size: 20px; }
  .account-profile > div { min-width: 0; overflow-wrap: anywhere; }
  .account-profile b { display: block; font-size: 18px; }
  .account-profile > div > span { display: block; font-size: 13px; color: var(--text-2); }
  .account-settings-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .account-help h3 { font-size: 18px; }
  .account-help ol { padding-left: 22px; }
  .account-help li { margin: 16px 0; padding-left: 5px; }
  .account-help p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
  @media (prefers-reduced-motion: reduce) {
    .account-menu { animation: none; }
    .account-menu-item, .account-menu-item-content { transition: none; }
    .account-menu-item:hover .account-menu-item-content, .account-menu-item:focus-visible .account-menu-item-content { transform: none; }
  }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  input, textarea, select { font: inherit; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; width: 100%; }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
  .mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
  .scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(143,152,186,.35) transparent; }
  .scroll::-webkit-scrollbar { width: 9px; }
  .scroll::-webkit-scrollbar-thumb { background: rgba(143,152,186,.3); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; }

  #stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; touch-action: none; }
  #stage.grab { cursor: grab; }
  #stage.pointer { cursor: pointer; }
  #labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
  .lbl { position: absolute; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; letter-spacing: .01em; color: #FFFFFF; white-space: nowrap; opacity: 0; transition: opacity .2s;
         text-shadow: -1px -1px 0 rgba(3,7,18,.92), 1px -1px 0 rgba(3,7,18,.92), -1px 1px 0 rgba(3,7,18,.92), 1px 1px 0 rgba(3,7,18,.92), 0 0 6px rgba(3,7,18,.85), 0 0 15px rgba(3,7,18,.6); }
  .lbl.dest { color: #FFD27A; }
  .lbl.pin { padding-bottom: 9px; }
  .lbl.pin::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1.5px rgba(3,7,18,.8); }
  .fallback { position: fixed; inset: 0; display: grid; place-content: center; padding: 40px; text-align: center; color: var(--text-2); z-index: 40; }
  .launch-help { background: var(--bg); padding: 24px; }
  .launch-card { max-width: 520px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg2); line-height: 1.6; }
  .launch-card h1 { margin: 0 0 16px; font-size: 24px; line-height: 1.3; color: var(--text); }
  .launch-card p { margin: 16px 0; }
  .launch-link { display: inline-block; margin: 8px 0; padding: 12px 20px; border-radius: 12px; background: #FFD27A; color: #181820; font-weight: 700; text-decoration: none; }
  .launch-link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
  .launch-card .launch-note { margin-bottom: 0; font-size: 13px; }

  /* ---------------------------------------------------------------- header */
  .top { position: fixed; left: 0; right: 0; top: 0; z-index: 12; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; background: var(--account-surface); border-bottom: 1px solid var(--account-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 18px rgba(0,0,0,.2); }
  .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-body); font-weight: 700; font-size: 22px; letter-spacing: -.015em; color: var(--accent); }
  .brand svg { flex: none; }
  .selected-country {
    display: flex; align-items: center; gap: 9px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: calc(100% - 660px); padding: 7px 18px; border: 1px solid var(--account-edge); border-radius: 16px;
    color: var(--accent); background: var(--account-surface); font-size: 17px; font-weight: 700;
    box-shadow: inset 0 1px 1px #fff3, inset 0 -1px 2px #0006, 0 3px 0 #090d1e, 0 7px 14px #0004;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .selected-country-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .country-flag { flex: none; width: 24px; height: 18px; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 3px #0008, inset 0 1px 0 #fff4; }
  @media (max-width: 860px) { .selected-country { max-width: calc(100% - 290px); font-size: 14px; padding: 6px 12px; } }
  @media (max-width: 540px) {
    .top { align-content: flex-start; }
    .selected-country { top: auto; bottom: 9px; transform: translateX(-50%); max-width: calc(100% - 24px); }
  }
  .brand-logo { display: block; width: 36px; height: 36px; flex: none; border-radius: 10px; background: #5B2748; object-fit: contain; }
  .brand-logo-float { position: relative; width: 36px; height: 36px; flex: none; perspective: 240px; isolation: isolate; }
  .brand-logo-float::before { content: ""; position: absolute; inset: -8px; border-radius: 16px; }
  .brand-logo-shadow { position: absolute; left: 3px; right: 3px; bottom: -3px; height: 9px; border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(4px); opacity: .55; pointer-events: none;
    transform: translateX(calc(var(--logo-x, 0px) * .35)); animation: brand-logo-shadow 5s ease-in-out infinite; }
  .brand-logo-body { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; will-change: transform;
    transform: translate3d(var(--logo-x, 0px), var(--logo-y, 0px), 8px) rotateX(var(--logo-rx, -6deg)) rotateY(var(--logo-ry, 8deg)) scale(var(--logo-scale, 1)); }
  .brand-logo-face { position: relative; width: 36px; height: 36px; border-radius: 10px; transform: translateY(-3px); animation: brand-logo-float 5s ease-in-out infinite;
    box-shadow: 0 6px 12px rgba(0,0,0,.28); transition: box-shadow .3s ease; }
  .brand-logo-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at 18% 5%, rgba(255,240,214,.24), transparent 62%), linear-gradient(145deg, rgba(255,240,214,.1), transparent 46%, rgba(22,5,18,.16));
    box-shadow: inset 0 1px 1px rgba(255,240,214,.3); }
  .brand-logo-sheen { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; }
  .brand-logo-sheen::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 90px; margin: -45px 0 0 -7px; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(178,191,211,.24) 24%, rgba(240,245,253,.78) 50%, rgba(196,208,224,.3) 76%, transparent);
    transform: translate3d(-30px, 30px, 0) rotate(-45deg); animation: brand-logo-silver-sheen 60s linear infinite; }
  .brand-logo-float.is-attracted .brand-logo-face { box-shadow: 0 8px 16px rgba(0,0,0,.32), 0 0 14px rgba(155,76,122,.16); }
  @keyframes brand-logo-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(-5px); } }
  @keyframes brand-logo-shadow { 0%, 100% { opacity: .55; } 50% { opacity: .36; } }
  @keyframes brand-logo-silver-sheen {
    0% { opacity: 0; transform: translate3d(-30px, 30px, 0) rotate(-45deg); }
    .4%, 3.2% { opacity: 1; }
    3.6%, 100% { opacity: 0; transform: translate3d(30px, -30px, 0) rotate(-45deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand-logo-face, .brand-logo-shadow { animation: none; transition: none; }
    .brand-logo-body { transform: none; will-change: auto; }
    .brand-logo-shadow { transform: none; }
    .brand-logo-sheen { display: none; }
  }
  .nav { display: flex; gap: 6px; }
  .nav button { padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-2); }
  .nav button:hover { background: rgba(var(--accent-rgb),.06); color: var(--accent); }
  .nav button[aria-current="true"] { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
  .nav button.nav-service { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 6px; border-radius: 11px; background: var(--bg2); color: var(--text-2); border: 1px solid var(--text-2); transition: box-shadow .15s; }
  .nav-service svg { display: block; width: 25px; height: 25px; }
  .nav button.nav-service:hover { background: var(--bg2); color: var(--text-2); box-shadow: 0 0 0 1px var(--text-2); }
  .nav button.nav-service[aria-current="true"] { background: var(--bg2); color: var(--text-2); box-shadow: 0 0 0 2px var(--text-2); }
  .top-right { display: flex; align-items: center; gap: 12px; }
  .langpick { position: relative; flex: none; }
  .lang-btn { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px;
    border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04);
    color: var(--text-2); font: 600 12px var(--font-mono); letter-spacing: .04em; cursor: pointer; }
  .lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
  .lang-btn svg { opacity: .6; transition: transform .18s; }
  .lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .flag { width: 20px; height: 15px; flex: none; border-radius: 2px; display: block;
    object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
  .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 208px;
    max-height: 340px; overflow-y: auto; padding: 5px; border-radius: 13px;
    border: 1px solid var(--line); background: var(--panel-solid); box-shadow: 0 22px 54px rgba(3,6,16,.62); }
  .lang-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px;
    border: 0; border-radius: 9px; background: none; color: var(--text-2); cursor: pointer; text-align: left; }
  .lang-menu button:hover { background: rgba(var(--accent-rgb),.06); color: var(--accent); }
  .lang-menu button[aria-selected="true"] { color: var(--accent); }
  .lang-menu b { font: 600 11.5px var(--font-mono); letter-spacing: .05em; width: 24px; flex: none; }
  .lang-menu span { font: 500 13px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .f-pick { position: relative; }
  .f-pick .lang-btn { height: 40px; width: 100%; justify-content: flex-start; border-radius: 12px;
    background: rgba(255,255,255,.05); color: var(--text); font: 500 14px var(--font-body); letter-spacing: 0; }
  .f-pick .lang-menu { left: 0; right: auto; width: 100%; }
  .f-sel { height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line);
    background: rgba(255,255,255,.05); color: var(--text); font: 500 14px var(--font-body); }
  .f-sel option { background: #0d1327; color: #e9eeff; }
  @media (max-width: 760px) { .lang-btn span.code { display: none; } }
  .ghost { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--text-2); }
  .ghost:hover { border-color: var(--accent); color: var(--accent); }
  .ghost svg { flex: none; }
  .ava { --avatar-plum-shadow: inset 0 1px 2px #fff6, inset 1px 0 1px #fff2, inset 0 -2px 3px #0005, 0 1px 0 #431c35, 0 3px 0 #431c35, 0 5px 0 #241126, 0 10px 14px #0008;
    position: relative; isolation: isolate; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid #c893b2; flex: none; display: grid; place-content: center;
    font-family: var(--font-body); font-weight: 800; font-size: 18px; line-height: 1; color: #fff0d6; text-shadow: 0 1px 1px #0008;
    background: radial-gradient(ellipse at 25% 0, #9b6385, transparent 65%), linear-gradient(#783d60, #52243f);
    box-shadow: var(--avatar-plum-shadow); transform: translateY(-3px); transition: transform .2s ease, filter .2s ease; }
  .ava:not(.out):not(.is-absorbing):not(.account-arrived)::before { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(130deg, #ffffff18, transparent 44%); }
  .account-button-motion { display: inline-flex; flex: none; position: relative; perspective: 600px; }
  .account-button-motion.is-guest { animation: account-login-rock 5.5s ease-in-out infinite; }
  .ava.out { width: auto; min-width: 83px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border-radius: 11px; border: 1px solid #a66c90; color: var(--accent); font: 800 12px/1 var(--font-body);
    background: radial-gradient(ellipse at 30% 0,#985b80,transparent 65%),linear-gradient(#72344f,#502037);
    box-shadow: inset 0 2px 2px #d9a1bd80,inset 0 -2px 3px #320f27b3,0 3px 0 #371427,0 5px 0 #201022,0 10px 15px #03061399;
    transform: translate3d(var(--login-x,0px),var(--login-y,0px),0) rotateX(var(--login-rx,0deg)) rotateY(var(--login-ry,0deg)); transition: transform .22s ease,filter .22s ease; }
  .ava.out:hover { filter: brightness(1.08); }
  .ava.out:active { transform: translateY(2px) scale(.96); }
  .ava:not(.out):hover { transform: translateY(-5px); filter: brightness(1.08); }
  .ava:not(.out):active { transform: translateY(-1px); }
  .ava.is-absorbing { position: relative; isolation: isolate; transform: scale(calc(1 + var(--account-charge,0) * .07)); box-shadow: 0 0 calc(8px + var(--account-charge,0) * 26px) rgba(255,255,255,var(--account-charge,0)), 0 0 calc(16px + var(--account-charge,0) * 65px) rgba(234,208,255,calc(var(--account-charge,0) * .8)); }
  .ava.is-absorbing::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: #fff; opacity: var(--account-charge,0); pointer-events: none; z-index: 2; }
  .account-button-motion:has(.is-absorbing) { animation: none; }
  .ava.account-arrived { position: relative; animation: account-arrival .8s ease-out both; }
  .ava.account-arrived::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff; pointer-events: none; animation: account-whiteout .8s ease-out both; }
  .ava.account-arrived::after { content: ''; position: absolute; inset: -64px; pointer-events: none; background: radial-gradient(ellipse 5% 48% at center,#fff 0,transparent 100%),radial-gradient(ellipse 48% 5% at center,#fff 0,transparent 100%),conic-gradient(from 22deg,transparent 0deg 20deg,#fff5 24deg,transparent 28deg 65deg,#fff7 69deg,transparent 73deg 110deg,#fff5 114deg,transparent 118deg 155deg,#fff7 159deg,transparent 163deg 200deg,#fff5 204deg,transparent 208deg 245deg,#fff7 249deg,transparent 253deg 290deg,#fff5 294deg,transparent 298deg 335deg,#fff7 339deg,transparent 343deg),radial-gradient(circle,#fff 0,#fff9 12%,#eed0ff44 35%,transparent 67%); mask-image: radial-gradient(circle,#000 25%,transparent 70%); animation: account-burst .8s ease-out both; }
  .account-arrived #avaInit { animation: account-initial .8s ease-out both; }
  @keyframes account-arrival { 0% { transform: scale(1.06); box-shadow: 0 0 30px #fff,0 0 75px #eacfff; } 15% { transform: scale(1.14); box-shadow: 0 0 42px #fff,0 0 100px #eacfffaa; } 45% { transform: scale(.98); } 100% { transform: translateY(-3px); box-shadow: var(--avatar-plum-shadow); } }
  @keyframes account-whiteout { 0%,15% { opacity: 1; } 42%,100% { opacity: 0; } }
  @keyframes account-burst { 0% { transform: scale(.18) rotate(-12deg); opacity: .2; } 15% { transform: scale(1); opacity: 1; } 55%,100% { transform: scale(1.55) rotate(12deg); opacity: 0; } }
  @keyframes account-initial { 0%,30% { opacity: 0; transform: scale(.7); } 70%,100% { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { .ava.account-arrived, .ava.account-arrived::before, .ava.account-arrived::after, .account-arrived #avaInit { animation: none; } .ava.account-arrived::before,.ava.account-arrived::after { display: none; } }
  .account-login-icon { display: block; flex: none; width: 14px; height: 14px; }
  .ava:not(.out) .account-login-icon, .ava:not(.out) #avaLabel, .ava.out #avaInit { display: none; }
  @keyframes account-login-rock { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-2px) rotate(1deg); } }
  @media (prefers-reduced-motion: reduce) { .account-button-motion.is-guest { animation: none; } .ava, .ava.out { transform: none; transition: none; } .ava:not(.out):hover, .ava:not(.out):active, .ava.out:active { transform: none; } }

  /* ---------------------------------------------------------------- shell */
  .shell { position: fixed; left: 0; right: 0; top: var(--top-h); bottom: 0; z-index: 5; display: flex; overflow: hidden; pointer-events: none; }
  .shell > * { pointer-events: auto; }
  .stagearea { flex: 1; position: relative; min-width: 0; pointer-events: none; }
  .stagearea > * { pointer-events: auto; }

  .crumb { position: absolute; left: 26px; top: 22px; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px); font-size: 14px; }
  .crumb b { font-weight: 600; }
  .crumb .n { color: var(--muted); font-size: 13px; }
  .crumb button { display: flex; align-items: center; color: var(--text-2); }
  .crumb button:hover { color: var(--accent); }

  .legend { position: absolute; left: 26px; bottom: 24px; display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px); font-size: 13px; color: var(--text-2); }
  .legend span { display: flex; align-items: center; gap: 7px; }
  .legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }

  .hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); text-align: center; max-width: 440px; }

  /* подробная карта региона: включается, когда глобусу уже не хватает разрешения */
  #map { position: absolute; inset: 0; z-index: 4; background: #0B1020; }
  .map-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 500; padding: 12px 18px; border-radius: 14px; background: var(--panel-solid); color: var(--text); pointer-events: none; }
  .map-label-status { position: absolute; left: 12px; top: 72px; z-index: 500; max-width: calc(100% - 24px); padding: 5px 9px; border-radius: 8px; background: var(--panel-solid); color: var(--muted); font-size: 11px; pointer-events: none; }
  #map .leaflet-container { background: #0B1020; font-family: var(--font-body); }
  #map .leaflet-control-attribution { background: rgba(8,12,28,.8); color: var(--muted); font-size: 10.5px; }
  #map .leaflet-control-attribution a { color: var(--text-2); }
  #map .leaflet-bar a { background: var(--panel-solid); color: var(--text-2); border-color: var(--line); }
  #map .leaflet-bar a:hover { background: rgba(var(--accent-rgb),.08); color: var(--accent); }
  .mk { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(4,8,20,.5); font-size: 0; }
  .mk.see { background: var(--cyan); } .mk.rest { background: var(--coral); } .mk.on { background: var(--gold); }
  .mk b { font: 700 12px var(--font-body); color: #10203a; }
  .location-map-pin img { display: block; width: 18px; height: 24px; }
  .ru-pin { filter: drop-shadow(0 2px 4px rgba(4,8,20,.45)); }
  /* карточка объекта на карте: фотография, справка и снимки посетителей */
  .spot { position: absolute; right: 18px; top: 18px; bottom: 18px; width: 380px; max-width: calc(100% - 36px);
    z-index: 7; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
    background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 28px 70px rgba(3,6,16,.6); }
  .spot-hero { position: relative; flex: none; aspect-ratio: 26/16; background: rgba(255,255,255,.04); }
  .spot-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .spot-hero .slot { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center;
    color: var(--muted); font-size: 13px; }
  .spot-hero .reel { position: absolute; inset: 0; cursor: zoom-in; }
  .reel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease; }
  .reel-img.on { opacity: 1; }
  .reel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 46px; border: 0;
    display: grid; place-content: center; font-size: 22px; line-height: 1; color: var(--text); cursor: pointer;
    background: rgba(8,12,28,.5); backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s; }
  .reel-nav.prev { left: 0; border-radius: 0 9px 9px 0; }
  .reel-nav.next { right: 0; border-radius: 9px 0 0 9px; }
  .spot-hero:hover .reel-nav { opacity: 1; }
  .reel-nav:hover { color: var(--accent); background: rgba(8,12,28,.74); }
  .reel-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
  .reel-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(233,238,255,.38); transition: width .25s, background .25s, border-radius .25s; }
  .reel-dots i.on { width: 15px; border-radius: 3px; background: var(--gold); }
  .spot-close { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-content: center; background: rgba(8,12,28,.75); color: var(--text); backdrop-filter: blur(8px); }
  .spot-close:hover { color: var(--accent); }
  .spot-info { position: absolute; right: 54px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; background: transparent; color: var(--text); cursor: pointer; }
  .spot-info svg { width: 11px; height: 11px; border-radius: 50%; background: rgba(8,12,28,.85); }
  .spot-info[hidden] { display: none; }
  .spot-info:hover { color: var(--cyan); }
  .spot-info:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .spot-source-info .photo-credit { padding: 0; font-size: 13px; }
  .spot-sources { display: flex; flex-direction: column; gap: 12px; }
  .spot-sources p { margin: 0; }
  .spot-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
  .spot-body h2 { font-size: 21px; }
  .spot-where { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .spot-text { margin: 0; font-size: 14px; color: var(--text-2); text-wrap: pretty; }
  .spot-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .spot-meta a { color: var(--cyan); }
  .spot-sec { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
  .spot-sec h3 { font-family: var(--font-body); font-size: 13px; font-weight: 700; margin: 0; color: var(--text-2); }
  .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .shots button { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; position: relative; }
  .shots img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .shots .wait { position: absolute; left: 4px; bottom: 4px; padding: 2px 7px; border-radius: 999px;
    background: rgba(8,12,28,.85); font-size: 10px; color: var(--gold); }
  .spot-empty { font-size: 13px; color: var(--muted); }
  @media (max-width: 760px) {
    .spot { right: 10px; left: 10px; top: auto; bottom: 10px; width: auto; max-height: 72%; }
    .spot-hero { aspect-ratio: 26/12; }
  }
  #map .leaflet-popup-content-wrapper { background: var(--panel-solid); color: var(--text); border-radius: 12px; }
  #map .leaflet-popup-content { margin: 12px 14px; font-size: 13.5px; line-height: 1.45; }
  #map .leaflet-popup-tip { background: var(--panel-solid); }
  #map .leaflet-popup-close-button { color: var(--muted); }
  .pop-where { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .pop-text { color: var(--text-2); }
  .backmap { position: absolute; left: 26px; top: 22px; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 10px 17px 10px 13px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px); font-weight: 600; font-size: 14px; color: var(--text); }
  .backmap:hover { border-color: var(--accent); color: var(--accent); }
  .globe-return-icon { display: block; width: 16px; height: 16px; object-fit: contain; flex: none; pointer-events: none; user-select: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  .backmap .globe-return-icon { width: 17px; height: 17px; }

  .zoomctl { position: absolute; left: 26px; bottom: 80px; z-index: 6; isolation: isolate; }
  body:not(.signed-in) .zoomctl, body:not(.signed-in) .location-status { display: none; }
  .zoomctl::before { content: ""; position: absolute; inset: 8px -6px -13px 5px; z-index: -1; border-radius: 18px; background: rgba(0,0,0,.48); filter: blur(10px); pointer-events: none; }
  .zoomctl-surface, #map .leaflet-control-zoom { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--floating-edge);
    background: var(--floating-surface); backdrop-filter: blur(14px);
    box-shadow: var(--floating-shadow);
    transform: translateY(-3px); animation: zoom-control-float 6s ease-in-out infinite; }
  .zoomctl-surface { border-color: var(--account-edge); background: var(--account-surface); }
  #map .leaflet-control-zoom #btnGlobe { position: static; display: grid; place-items: center; width: 42px; height: 40px; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--accent); }
  #map #btnGlobe span { display: none; }
  #map #btnGlobe .globe-return-icon { width: 11px; height: 11px; }
  #map #btnGlobe:hover { background: rgba(var(--accent-rgb),.1); }
  @media (min-width: 541px) {
    body.memory-mode:not(.welcome-mode) .zoomctl { bottom: 142px; }
  }
  .zoomctl button { display: grid; place-content: center; width: 42px; height: 40px; color: var(--text-2); transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
  .zoomctl button + button { border-top: 1px solid var(--line); }
  .zoomctl button:hover { background: rgba(var(--accent-rgb),.1); color: var(--accent); box-shadow: inset 0 1px 0 rgba(var(--accent-rgb),.08); }
  .zoomctl button:active:not(:disabled) { background: rgba(var(--accent-rgb),.16); color: var(--accent); box-shadow: inset 0 2px 5px rgba(0,0,0,.35); }
  .zoomctl button:focus-visible { outline-offset: -4px; }
  .zoomctl button:disabled { opacity: .35; cursor: default; }
  .zoomctl button:disabled:hover { background: none; color: var(--text-2); box-shadow: none; }
  #map .leaflet-control-zoom a { display: grid; place-content: center; width: 42px; height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-2); text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
  #map .leaflet-control-zoom a + a { border-top: 1px solid var(--line); }
  #map .leaflet-control-zoom svg { display: block; }
  #map .leaflet-control-zoom a:hover { background: rgba(var(--accent-rgb),.1); color: var(--accent); box-shadow: inset 0 1px 0 rgba(var(--accent-rgb),.08); }
  #map .leaflet-control-zoom a:active:not(.leaflet-disabled) { background: rgba(var(--accent-rgb),.16); color: var(--accent); box-shadow: inset 0 2px 5px rgba(0,0,0,.35); }
  #map .leaflet-control-zoom a:focus-visible { outline-offset: -4px; }
  #map .leaflet-control-zoom a.leaflet-disabled { opacity: .35; cursor: default; background: transparent; color: var(--text-2); box-shadow: none; }
  @keyframes zoom-control-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(-5px); } }
  @media (prefers-reduced-motion: reduce) { .zoomctl-surface, #map .leaflet-control-zoom { animation: none; } .zoomctl button, #map .leaflet-control-zoom a { transition: none; } }

  /* язычок, задвигающий панель */
  .p-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 26px; height: 68px; display: grid; place-content: center; border-radius: 13px 0 0 13px; background: var(--panel); border: 1px solid var(--line); border-right: 0; backdrop-filter: blur(14px); color: var(--text-2); z-index: 8; }
  .p-toggle:hover { color: var(--accent); border-color: var(--accent); }
  .p-toggle svg { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  body.panel-off .p-toggle svg { transform: rotate(180deg); }
  body.panel-off .panel { margin-right: calc(-1 * var(--panel-w)); }
  body.panel-off .toast { left: 50%; }

  /* ---------------------------------------------------------------- panel (вариант B) */
  .panel { width: var(--panel-w); flex: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--panel-solid); border-left: 1px solid var(--line); transition: margin-right .5s cubic-bezier(.4, 0, .2, 1); }
  @media (prefers-reduced-motion: reduce) { .panel, .p-toggle svg, .stagearea { transition-duration: .01s; } }
  .p-search { display: flex; flex-direction: column; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex: none; }
  .searchbox { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
  .searchbox:focus-within { border-color: var(--accent); }
  .searchbox > svg { flex: none; }

  .combo { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
  .combo input { border: 0; background: none; padding: 0; width: 100%; min-width: 0; font-size: 14.5px; font-weight: 600; }
  .combo input::placeholder { color: var(--text-2); font-weight: 600; }
  .combo input:focus-visible { outline: 0; }
  .combo button { display: grid; place-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); flex: none; }
  .combo button:hover { color: var(--accent); }
  .searchbox:focus-within .combo button svg { transform: rotate(180deg); }
  .combo button svg { transition: transform .18s; }

  .combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 15; max-height: 330px; padding: 6px; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 24px 56px rgba(3,6,16,.65); }
  .combo-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border-radius: 10px; text-align: left; font-size: 14.5px; }
  .combo-item:hover, .combo-item.hi { background: rgba(255,255,255,.07); }
  .combo-item[aria-selected="true"] { color: var(--accent); }
  .combo-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .combo-item .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .combo-item .pr { font-size: 13px; color: var(--muted); flex: none; }
  .combo-item mark { background: none; color: var(--gold); }
  .combo-none { padding: 14px 11px; font-size: 13.5px; color: var(--muted); }
  .searchbox .when { margin-left: auto; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
  .searchbox .when:hover { border-color: var(--accent); color: var(--accent); }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chips button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12,18,42,.6); font-weight: 600; font-size: 13px; color: var(--text-2); }
  .chips button:hover { border-color: var(--accent); color: var(--accent); }
  .chips button[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb),.12); color: var(--accent); }

  .p-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px 10px; flex: none; }
  .p-head select { width: auto; border: 0; background: none; padding: 0; font-size: 13.5px; color: var(--text-2); }
  .p-body { flex: 1; min-height: 0; padding: 0 22px 18px; display: flex; flex-direction: column; gap: 10px; }

  .card { display: flex; align-items: center; gap: 14px; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); text-align: left; width: 100%; }
  .card:hover { border-color: rgba(143,152,186,.45); background: rgba(255,255,255,.05); }
  .card[aria-pressed="true"] { background: rgba(var(--accent-rgb),.07); border-color: rgba(var(--accent-rgb),.35); }
  .card .thumb { width: 86px; height: 86px; flex: none; border-radius: 11px; overflow: hidden; }
  .card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .card .rest-thumb { position: relative; display: grid; place-items: center; background: rgba(97,204,239,.08); }
  .card .rest-thumb img { position: absolute; inset: 0; }
  .rest-country, .rest-place { align-items: center; }
  .photo-credit { padding: 8px 14px; font-size: 11px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
  .photo-credit a { color: var(--cyan); }
  .spot-body > .photo-credit { padding: 0; flex: none; }
  .rest-result { position: relative; display: flex; flex-direction: column; min-width: 0; }
  .rest-result > button.card { padding-right: 48px; }
  .rest-photo-info { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: #d8e6f3; cursor: pointer; }
  .rest-photo-info svg { width: 8px; height: 8px; }
  .rest-photo-info:hover { color: var(--cyan); background: #172440; }
  .rest-photo-info:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .rest-month-field { width: 100%; min-height: 46px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #172039; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
  .rest-month-field::after { content: '⌄'; float: right; color: var(--cyan); }
  .rest-month-field:disabled { opacity: .5; cursor: default; }
  .rest-month-calendar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #10172b; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
  .rest-month-calendar[hidden] { display: none; }
  .rest-month-calendar button { min-height: 44px; padding: 10px 6px; border: 1px solid #35425e; border-radius: 10px; background: #1b2741; color: #f0f4ff; font: inherit; font-size: 14px; cursor: pointer; text-transform: capitalize; }
  .rest-month-calendar button[data-rest-month="0"] { grid-column: 1 / -1; text-transform: none; }
  .rest-month-calendar button:hover { background: #273955; border-color: var(--cyan); }
  .rest-month-calendar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .rest-month-calendar button:focus-visible, .rest-month-field:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .place-photo { margin: 0; }
  .place-photo > img { display: block; width: 100%; height: auto; border-radius: 14px; }
  .card.world { padding: 10px; gap: 12px; align-items: center; }
  .card.world .thumb { width: 60px; height: 60px; border-radius: 9px; }
  .card.world .t b { font-size: 15px; }
  .card.world .sub { -webkit-line-clamp: 1; color: var(--text-2); }
  .card.world .sub.small { font-size: 12px; color: var(--muted); }
  .card.flash { animation: cardflash 1.3s ease-out; }
  @keyframes cardflash { 0%, 35% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
  @media (prefers-reduced-motion: reduce) { .card.flash { animation: none; } }
  .sect { margin: 12px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .card .mid { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
  .card .t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .card .t b { font-weight: 700; font-size: 16px; }
  .card .price { font-family: var(--font-display); font-weight: 600; font-size: 15px; white-space: nowrap; }
  .card[aria-pressed="true"] .price { color: var(--accent); }
  .card .sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .card .row { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
  .card.rest-country, .card.world { min-height: 114px; }
  .card.rest-country .t b, .card.world .t b { min-width: 0; overflow-wrap: anywhere; }
  .card.rest-country .row, .card.world .row { flex-wrap: wrap; }
  .star { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--gold); }
  .badge { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
  .badge.see { background: rgba(110,211,240,.12); color: var(--cyan); }
  .badge.rest { background: rgba(242,131,107,.12); color: var(--coral); }
  .badge.on { background: rgba(245,184,74,.14); color: var(--gold); }
  .badge.save { background: rgba(126,217,166,.14); color: var(--ok); }
  .backrow { display: flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 2px 2px; font-weight: 600; font-size: 13.5px; color: var(--text-2); }
  .backrow:hover { color: var(--accent); }
  .empty { padding: 22px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; text-align: center; }

  .compare { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 22px 20px; border-top: 1px solid var(--line); background: var(--bg2); }
  .cmp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .cmp-sub { font-size: 13.5px; color: var(--muted); }
  .cmp-sub s { color: var(--muted); }
  .win { padding: 6px 12px; border-radius: 999px; background: rgba(126,217,166,.14); border: 1px solid rgba(126,217,166,.4); color: var(--ok); font-size: 13px; font-weight: 700; white-space: nowrap; }
  .win.pack { background: rgba(245,184,74,.14); border-color: rgba(245,184,74,.4); color: var(--gold); }
  .cmp-btns { display: flex; gap: 10px; }
  .prefs { display: flex; flex-direction: column; gap: 8px; }
  .prefs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .prefs-row select { width: auto; padding: 7px 10px; font-size: 13px; border-radius: 999px; }
  .seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: rgba(12,18,42,.6); flex-wrap: wrap; }
  .seg button { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
  .seg button:hover { color: var(--accent); }
  .seg button[aria-pressed="true"] { background: rgba(var(--accent-rgb),.16); color: var(--accent); }
  .chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
  .chk input { width: auto; accent-color: var(--accent); }
  .picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--text-2); }
  .link { color: var(--cyan); font-size: 12.5px; font-weight: 600; text-decoration: none; }
  .link:hover { text-decoration: underline; }
  .muted { color: var(--muted); font-weight: 400; font-size: 12.5px; }
  .modal .box.wide { width: min(820px, 100%); max-height: 88vh; }
  #bld { display: flex; flex-direction: column; gap: 12px; }
  .bld-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
  .bld-sum > div { display: flex; flex-direction: column; gap: 2px; }
  .bld-sum b { font-family: var(--font-display); font-size: 19px; }
  .bld-sum .win { margin-left: auto; }
  .bld-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
  .bld-tabs button { padding: 9px 14px; font-weight: 700; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .bld-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
  .opts { display: flex; flex-direction: column; gap: 8px; }
  .opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.03); text-align: left; }
  .opt:hover { border-color: rgba(143,152,186,.45); }
  .opt[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb),.08); }
  .opt .air { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .opt .om { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 14px; }
  .opt .op { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
  .opt .op b { font-family: var(--font-display); font-size: 16px; white-space: nowrap; }
  .opt[aria-pressed="true"] .op b { color: var(--accent); }
  .note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  @media (max-width: 560px) { .opt { flex-wrap: wrap; } .opt .op { flex-direction: row; align-items: baseline; gap: 10px; width: 100%; justify-content: flex-end; } .bld-sum .win { margin-left: 0; } }
  .btn { padding: 13px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; color: var(--text-2); }
  .btn:hover { border-color: var(--accent); color: var(--accent); }
  .btn.primary { flex: 1; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
  .btn.primary:hover { background: #FFF7E8; color: var(--accent-ink); }
  .btn:disabled { opacity: .45; cursor: default; }
  .btn:disabled:hover { border-color: var(--line); color: var(--text-2); }

  /* маршрут */
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .stat { display: flex; flex-direction: column; gap: 1px; padding: 12px 13px; border-radius: 12px; background: rgba(255,255,255,.04); }
  .stat b { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
  .stat span { font-size: 12.5px; color: var(--muted); }
  .ritem { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
  .ritem .num { font-family: var(--font-mono); font-size: 12px; color: var(--gold); flex: none; }
  .ritem .mid { flex: 1; min-width: 0; }
  .ritem b { font-size: 14.5px; }
  .ritem .sub { font-size: 12.5px; color: var(--muted); }
  .ritem .ctl { display: flex; gap: 3px; flex: none; }
  .ritem .ctl button { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); font-size: 15px; }
  .ritem .ctl button:hover { background: rgba(255,255,255,.07); color: var(--text); }
  .f { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  /* ---------------------------------------------------------------- воспоминания (вариант D) */
  .mem { position: absolute; inset: 0; pointer-events: none; }
  .mem > * { pointer-events: auto; }
  .years { position: absolute; left: 26px; top: 22px; z-index: 7; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
    border-radius: 22px; border: 1px solid var(--account-edge); background: var(--account-surface); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 #ffffff22,0 10px 28px #0005;
    transform: translateY(-3px); animation: memory-panel-float 6.8s ease-in-out -1.6s infinite; }
  .years .list { display: flex; flex-direction: column; gap: 6px; }
  .years button { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--text-2); text-align: left; background: rgba(7,13,29,.3);
    box-shadow: inset 0 1px 0 rgba(225,236,255,.08), 0 2px 3px rgba(0,0,0,.16); }
  .years button:hover { border-color: var(--accent); color: var(--accent); }
  .years button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .tally { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .tally b { font-family: var(--font-display); font-size: 22px; font-weight: 600; text-shadow: 0 2px 3px rgba(0,0,0,.4); }
  .tally span { font-size: 13px; color: var(--muted); }

  .memcard { position: absolute; right: 26px; top: 22px; width: 330px; padding: 18px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(3,6,16,.6); }
  .memcard h2 { font-size: 24px; }
  .memcard-heading { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; list-style: none; border-radius: 8px; }
  .memcard-heading::-webkit-details-marker { display: none; }
  .memcard-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .memcard-heading-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
  .memcard-toggle { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-2); background: rgba(255,255,255,.04); }
  .memcard-heading:hover .memcard-toggle { border-color: var(--accent); color: var(--accent); }
  .memcard[open] .memcard-heading { margin-bottom: 14px; }
  .memcard[open] .memcard-toggle svg { transform: rotate(180deg); }
  .memcard:not([open]) h2 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .memcard-details { display: flex; flex-direction: column; gap: 14px; }
  .memcard-actions { display: flex; flex-direction: column; gap: 8px; }
  .memcard .duo { display: flex; gap: 10px; }
  .memcard .duo .stat { flex: 1; }
  .import-status { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 65; width: min(520px, calc(100vw - 28px)); padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-solid); box-shadow: 0 12px 40px #0008; }
  .import-status progress { width: 100%; accent-color: var(--gold); }
  .import-status p { margin: 6px 0; font-size: 13px; }
  .memory-tools { display: flex; flex-wrap: wrap; gap: 6px; }
  .memory-tools button { font-size: 12px; padding: 7px 10px; }
  .years .memory-button-magnet { position: relative; display: inline-flex; vertical-align: top; max-width: 100%; border-radius: 999px; perspective: 240px; }
  .years .memory-button-magnet > button { max-width: 100%; border-color: rgba(197,211,241,.26);
    background: linear-gradient(155deg, rgba(65,76,107,.96), rgba(26,35,58,.98) 52%, rgba(14,21,41,.98));
    box-shadow: inset 0 1px 2px rgba(238,244,255,.23), inset 0 -1px 2px rgba(0,0,0,.28), 0 5px 9px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2);
    transform: translate3d(var(--button-x, 0px), calc(var(--button-y, 0px) - 1px), 0) rotateX(var(--button-rx, 0deg)) rotateY(var(--button-ry, 0deg));
    transition: transform .18s cubic-bezier(.2,.75,.3,1), box-shadow .18s ease, border-color .18s ease, color .18s ease; }
  .years .memory-button-magnet.is-attracted > button, .years .memory-button-magnet > button:focus-visible { border-color: var(--accent);
    box-shadow: inset 0 1px 2px rgba(var(--accent-rgb),.28), inset 0 -1px 2px rgba(0,0,0,.24), 0 7px 12px rgba(0,0,0,.32), 0 0 9px rgba(var(--accent-rgb),.06); }
  .years .memory-button-magnet > button[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent);
    background: linear-gradient(155deg, #FFF9ED, var(--accent) 58%, #E5D0AF);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.8), inset 0 -1px 2px rgba(105,75,47,.22), 0 5px 9px rgba(0,0,0,.28); }
  .years .memory-button-magnet > button:active:not(:disabled) { transform: translate3d(var(--button-x, 0px), var(--button-y, 0px), 0) scale(.98);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.22), 0 2px 5px rgba(0,0,0,.25); }
  @media (prefers-reduced-motion: reduce) { .years .memory-button-magnet > button { transform: none; transition: none; } }
  .trash-row { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
  .trash-row div { flex: 1; min-width: 0; }
  .trash-row small { display: block; color: var(--muted); }

  .film { position: absolute; z-index: 6; left: 26px; right: 26px; bottom: 22px; display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 22px;
    background: linear-gradient(135deg,rgba(106,66,99,.25),rgba(61,39,69,.20)); border: 1px solid rgba(226,199,224,.22); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); box-shadow: inset 0 1px 0 #fbe7ff30,0 8px 26px #05071438; color: var(--accent);
    transform: translateY(-3px); animation: memory-panel-float 7.2s ease-in-out -.6s infinite; }
  .years:hover, .years:focus-within, .film:hover, .film:focus-within, body.memory-date-open .years { animation-play-state: paused; }
  @keyframes memory-panel-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(-5px); } }
  @media (prefers-reduced-motion: reduce) { .years, .film { animation: none; } }
  body.memory-mode #map .leaflet-bottom.leaflet-left { bottom: 142px; }
  .film .cap { display: flex; flex-direction: column; gap: 1px; flex: none; width: 210px; }
  .film .cap b { font-size: 14.5px; font-weight: 600; }
  .film .cap .mono { color: rgba(var(--accent-rgb),.7); }
  .film .strip { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .film .strip::-webkit-scrollbar { display: none; }
  .film .strip img, .film .strip .ph { width: 92px; height: 74px; flex: none; border-radius: 11px; object-fit: cover; }
  .film .strip .ph { display: grid; place-content: center; border: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
  .film .strip button { position: relative; padding: 0; border: 0; }
  .film .strip .film-country { flex: none; width: 84px; height: 84px; overflow: hidden; border-radius: 12px; background: var(--account-surface); color: var(--accent); box-shadow: inset 0 1px 0 #fff3; }
  .film .strip .film-country > img:not(.country-flag) { width: 84px; height: 84px; border-radius: inherit; }
  .film-country-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 5px 5px; background: linear-gradient(transparent,#080c1de6); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .film-country-count { position: absolute; right: 5px; top: 5px; min-width: 21px; padding: 1px 5px; border-radius: 8px; background: #151a30e8; color: var(--accent); font-size: 12px; font-weight: 800; box-shadow: 0 2px 5px #0006; }
  .film .strip .film-country .country-flag { position: absolute; left: 5px; top: 6px; width: 20px; height: 15px; border-radius: 3px; }
  .film .film-heading { display: flex; align-items: center; gap: 6px; }
  .film .film-country-back { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 3px; border: 1px solid var(--account-edge); border-radius: 9px; background: var(--account-surface); color: var(--accent); cursor: pointer; }
  .film .film-country-back svg { width: 18px; height: 18px; }
  .film .film-country-back[hidden] { display: none; }
  .film .film-country-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .film .strip button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .film-empty { display: grid; align-items: center; color: var(--text-2); font-size: 12px; padding: 0 8px; min-height: 74px; }
  .years .tally { display: block; }
  .film-video { position: absolute; right: 7px; bottom: 5px; color: white; text-shadow: 0 1px 4px #000; }
  .attraction-map-pin { background: none; border: 0; filter: drop-shadow(0 2px 3px #0008); }
  .attraction-status { position: absolute; left: 26px; bottom: 78px; z-index: 6; max-width: calc(100% - 52px); padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); color: var(--text-2); font-size: 11px; pointer-events: none; }
  .spot-facts { font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 5px; }
  .spot-meta { flex-wrap: wrap; }
  .recreation-map-pin { background: none; border: 0; filter: drop-shadow(0 2px 3px #0008); }
  .rest-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rest-choice { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: #111a30; }
  .rest-choice:has(input:checked) { border-color: #61ccef; background: #61ccef16; }
  .rest-choice input { width: 16px; height: 16px; flex: none; accent-color: #61ccef; }
  .rest-choice small { display: block; font-size: 11px; line-height: 1.4; color: var(--text-2); margin-top: 5px; }
  .rest-symbol { color: #61ccef; font-size: 25px; line-height: 1; flex: none; width: 36px; text-align: center; }
  .rest-choice .rest-symbol { width: 24px; font-size: 23px; }
  .rest-note, .recreation-controls small { color: var(--text-2); font-size: 12px; line-height: 1.5; }
  .rest-season { margin-top: 16px; }
  .beach-facts { width: 100%; padding: 10px 12px; border: 1px solid #369ed844; border-radius: 12px; background: #369ed80a; }
  .beach-facts p { margin: 0 0 8px; line-height: 1.5; }
  .beach-facts p:last-child { margin-bottom: 0; }
  .recreation-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .recreation-controls .btn { border-color: #61ccef66; color: #61ccef; }
  .rest-results { display: flex; flex-direction: column; gap: 10px; }
  .beach-brief { display: grid; gap: 4px; color: var(--text-2); line-height: 1.55; }
  .beach-brief p { margin: 0; }
  .beach-hotels { margin: 0 8px; padding: 16px 12px 8px; border-inline-start: 2px solid #61ccef; display: grid; gap: 10px; background: rgba(97,204,239,.035); animation: hotelReveal .22s ease-out; }
  .beach-hotels h4 { margin: 0; font-size: 14px; }
  .hotel-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
  .beach-hotel { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #151d34; }
  .hotel-photo { width: 74px; height: 74px; border-radius: 10px; background: #202c44; display: grid; place-items: center; overflow: hidden; color: var(--cyan); font-size: 25px; }
  .hotel-photo img { width: 100%; height: 100%; object-fit: cover; }
  .beach-hotel > div:nth-child(2) { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .beach-hotel b { font-size: 14px; overflow-wrap: anywhere; }
  .beach-hotel span, .beach-hotel a { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .beach-hotel a { color: var(--cyan); }
  .hotel-price { color: var(--gold); font-size: 16px; }
  .spot-accommodation { margin: 10px 0; padding: 14px; border: 1px solid #61ccef40; border-radius: 14px; background: #151d34; }
  .spot-accommodation h3 { margin: 0 0 12px; color: var(--text); font-size: 15px; }
  .accommodation-options summary { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; color: var(--cyan); cursor: pointer; font-size: 14px; list-style: none; }
  .accommodation-options summary::-webkit-details-marker { display: none; }
  .accommodation-options[open] summary > span { transform: rotate(180deg); }
  .accommodation-list { display: grid; gap: 10px; padding-top: 10px; }
  .accommodation-hotel { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
  .accommodation-hotel > img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; }
  .accommodation-hotel > b { color: var(--text); font-size: 14px; }
  .hotel-photo-source summary { padding: 4px; width: 26px; height: 26px; display: grid; place-items: center; }
  .hotel-photo-source svg, .hotel-source-info svg { width: 9px; height: 9px; }
  .hotel-photo-source a { display: block; font-size: 11px; }
  .beach-hotel { position: relative; padding-inline-end: 30px; }
  .hotel-source-info { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; background: transparent; border: 0; color: var(--text-2); cursor: pointer; }
  .travel-prices { display: flex; flex-direction: column; gap: 8px; margin-top: 7px; padding-top: 10px; border-top: 1px solid var(--line); }
  .travel-price-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; font-size: 12px; line-height: 1.45; }
  .travel-price-row strong { max-width: 180px; text-align: end; font-size: 12px; font-weight: 500; }
  .travel-price-row .has-price { color: var(--gold); font-weight: 700; font-size: 15px; }
  .travel-price-dates { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
  .price-pending { color: var(--muted); }
  .travel-price-includes { color: var(--muted); font-size: 11px; line-height: 1.5; }
  .card:has(.card-trip-prices) { flex-shrink: 0; }
  .card-trip-prices { display: block; width: 100%; min-width: 0; }
  .p-search { display: grid; grid-template-columns: minmax(0,1fr) 200px; align-items: start; }
  .p-search .searchbox { grid-column: 1 / -1; }
  #filters { grid-column: 1; grid-row: 2; }
  #recreationControls { grid-column: 1; grid-row: 3; flex-wrap: wrap; }
  #attractionControls { grid-column: 1 / -1; grid-row: 4; }
  .trip-selection { grid-column: 2; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 7px; padding: 12px; text-align: start; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); min-width: 0; }
  .trip-selection:hover, .trip-selection:focus-visible { border-color: var(--accent); }
  .trip-selection-heading { display: flex; justify-content: space-between; gap: 8px; color: var(--gold); font-weight: 600; font-size: 12px; }
  .trip-selection strong { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  #tripDates { font-size: 12px; line-height: 1.5; color: var(--text-2); }
  .trip-selection small { color: var(--muted); font-size: 11px; }
  .trip-selection-form { display: flex; flex-direction: column; gap: 18px; }
  .trip-selection-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .trip-selection-form legend { font-size: 15px; font-weight: 700; padding: 0 0 10px; }
  .trip-selection-form small, .trip-selection-note, .trip-origin { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
  .guest-stepper { display: grid; grid-template-columns: 1fr 36px 26px 36px; gap: 10px; align-items: center; }
  .guest-stepper > span { display: flex; flex-direction: column; gap: 3px; }
  .guest-stepper button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); font-size: 21px; }
  .guest-stepper button:disabled { opacity: .35; }
  .guest-stepper output { text-align: center; font-weight: 700; }
  .trip-children { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #tripSelectionError { margin: 0; color: var(--rest); font-size: 13px; }
  #tripSelectionError:empty { display: none; }
  .availability-empty { border: 1px solid var(--line); border-radius: 14px; padding: 20px; line-height: 1.6; }
  .availability-empty p { font-size: 13px; color: var(--text-2); }
  .availability-empty .btn { margin: 6px 6px 0 0; }
  .flight-search-status { grid-column: 1 / -1; grid-row: 5; display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
  .flight-search-status > span { flex: 1; }
  .flight-search-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
  .flight-search-status .btn { flex: none; font-size: 11px; padding: 8px 10px; }
  @media (max-width: 760px) {
    .p-search { grid-template-columns: minmax(0,1fr); }
    #filters { grid-column: 1; }
    .trip-selection { grid-column: 1; grid-row: 3; gap: 4px; padding: 10px 12px; }
    #recreationControls, #attractionControls { grid-column: 1; grid-row: 4; }
    body:not(.panel-off):not(.memory-mode) .stagearea { height: 24vh; }
    body:not(.memory-mode) .panel { overflow-y: auto; }
    body:not(.memory-mode) .p-body { flex: none; overflow-y: visible; }
  }
  .card .travel-price-row { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); align-items: baseline; }
  .card .travel-price-row strong { white-space: normal; overflow-wrap: anywhere; }
  .card .travel-price-row .has-price { white-space: nowrap; }
  .card .travel-prices { gap: 6px; }
  .hotel-collapse { align-self: flex-end; margin: 6px 8px 10px; padding: 8px; font: inherit; font-size: 12px; border: 0; border-radius: 8px; color: var(--cyan); background: transparent; cursor: pointer; }
  .hotel-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .hotel-dates label { display: grid; gap: 5px; color: var(--text-2); font-size: 12px; }
  .hotel-dates input, .hotel-dates select { width: 100%; min-width: 0; height: 40px; padding: 7px; background: #172039; color: var(--text); color-scheme: dark; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
  .hotel-dates .btn, .hotel-dates .hotel-note { grid-column: 1 / -1; }
  @keyframes hotelReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .beach-hotels { animation: none; } }
  .rest-kind { color: #61ccef; }
  .rest-search { margin-bottom: 12px; }
  .rest-country .mid, .rest-place .mid { display: flex; flex-direction: column; text-align: start; }
  .rest-results .card { width: 100%; }
  .rest-search { width: 100%; color: var(--text); background: #111a30; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; }
  .spot-rating { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 9px; }
  .rating-stars { display: flex; gap: 6px; }
  .rating-stars button { font: inherit; font-size: 24px; color: var(--text-2); background: #111a30; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 2px 7px; }
  .rating-stars button.rated, .rating-stars button:hover { color: var(--accent); border-color: var(--accent); }
  .rating-stars button:focus-visible { outline: 2px solid #61ccef; outline-offset: 2px; }
  .rating-remove { text-align: start; color: var(--text-2); padding: 0; border: 0; background: transparent; font: inherit; text-decoration: underline; cursor: pointer; }
  .visitor-rating { color: #f5b84a; }
  @media (max-width: 480px) { .rest-picker { grid-template-columns: 1fr; } }
  @media (max-width: 860px) { .attraction-status { left: 14px; bottom: 50px; max-width: calc(100% - 28px); } }

  /* ---------------------------------------------------------------- прочее */
  .tip { position: fixed; z-index: 20; transform: translate(-50%, -140%); padding: 8px 12px; border-radius: 10px; background: rgba(8,12,28,.94); border: 1px solid var(--line); font-size: 13px; font-weight: 600; pointer-events: none; white-space: nowrap; box-shadow: 0 10px 30px rgba(3,6,16,.6); }
  .tip small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
  .toast { position: fixed; left: calc(50% - var(--panel-w) / 2); bottom: 26px; transform: translate(-50%, 24px); z-index: 30; padding: 11px 18px; border-radius: 999px; background: rgba(8,12,28,.95); border: 1px solid var(--line); font-size: 14px; font-weight: 600; opacity: 0; transition: .25s; pointer-events: none; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .modal { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px; background: rgba(4,7,18,.72); backdrop-filter: blur(6px); }
  .modal .box { width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column; border-radius: 22px; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(3,6,16,.7); }
  .modal header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 14px; }
  .modal .body { padding: 0 22px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
  .modal .box.account-box { position: relative; isolation: isolate; width: min(560px, 100%); max-height: min(90dvh, 900px); border-radius: 28px;
    border: 1px solid var(--account-edge); background: var(--account-surface);
    box-shadow: var(--account-shadow);
    animation: account-arrive .45s ease-out, account-hover 7s ease-in-out .45s infinite; }
  .account-box::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(125deg,rgba(255,255,255,.04),transparent 40%); }
  .modal .account-box header { padding: 24px 26px 20px; gap: 12px; }
  .modal .account-box .body { padding: 0 26px 26px; gap: 16px; }
  .account-box #modalTitle { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 22px; line-height: 1.3; }
  .account-box #modalTitle small { display: block; margin-bottom: 4px; color: #b6a9bf; font-size: 11px; font-weight: 500; letter-spacing: .1em; }
  .account-logo { position: relative; display: block; flex: none; width: 48px; height: 48px; perspective: 240px; }
  .account-logo img { position: relative; z-index: 1; display: block; width: 48px; height: 48px; border-radius: 14px; transform: rotateX(-7deg) rotateY(9deg) translateY(-3px); box-shadow: 0 1px 0 #914568,0 3px 0 #54213e,0 5px 0 #2c1025,0 10px 20px rgba(0,0,0,.4); }
  .account-logo > span { position: absolute; left: 6px; right: 4px; bottom: -7px; height: 9px; border-radius: 50%; background: #050612; filter: blur(5px); }
  .account-box #modalClose { align-self: flex-start; border-radius: 50%; background: rgba(255,255,255,.04); }
  .auth-services-label { margin: 0 0 10px; color: var(--text-2); font-size: 12px; }
  .auth-memory-note { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.5; }
  .auth-memory-note > span { display: block; }
  .auth-text-action { align-self: flex-end; padding: 3px 0; color: var(--accent); background: none; border: 0; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
  .auth-text-action:hover { color: var(--text); }
  .auth-text-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
  .auth-recovery-title { margin: 0; font-size: 18px; }
  .auth-recovery-description { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
  .cloud-subscription-offer { display: grid; gap: 20px; }
  .cloud-subscription-offer .auth-recovery-description { color: rgba(var(--accent-rgb),.82); font-size: 15px; line-height: 1.7; }
  .cloud-subscription-offer .btn { width: 100%; min-height: 46px; }
  .cloud-subscription-offer .connection-availability { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
  .modal .box.account-box:has(.cloud-subscription-offer) { width: min(840px,100%); animation: cloud-offer-slide .55s cubic-bezier(.22,1,.36,1), account-hover 7s ease-in-out .55s infinite; }
  .modal .account-box:has(.cloud-subscription-offer) .body { min-height: 0; scrollbar-width: none; }
  .account-box:has(.cloud-subscription-offer) .body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .cloud-plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .cloud-plan { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--account-edge); border-radius: 20px; background: linear-gradient(135deg,rgba(255,255,255,.06),rgba(12,16,36,.24)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 5px 12px rgba(0,0,0,.12); }
  .cloud-plan h3 { margin: 0; font-size: 18px; color: var(--accent); }
  .cloud-plan-description { flex: 1; margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
  .cloud-plan-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .cloud-plan:has(#cloudPlanTitle-own) .cloud-plan-description { flex: none; }
  .cloud-plan:has(#cloudPlanTitle-own) .cloud-plan-options { margin-block: 0; }
  .cloud-plan-providers { display: grid; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text-2); }
  .cloud-plan-providers p { margin: 0; }
  .cloud-providers-label { font-weight: 600; }
  .cloud-providers-primary { color: var(--accent); }
  .cloud-providers-more summary { width: fit-content; cursor: pointer; text-underline-offset: 3px; }
  .cloud-providers-more summary:hover { color: var(--accent); }
  .cloud-providers-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
  .cloud-providers-more p { margin-top: 10px; overflow-wrap: anywhere; }
  .cloud-providers-more b, .cloud-providers-more span { display: block; }
  .cloud-price-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px 12px; border: 1px solid var(--account-edge); border-radius: 16px; color: var(--accent); background: rgba(6,10,26,.3); text-align: start; transition: border-color .18s,background .18s,transform .18s; }
  .cloud-price-choice[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(145deg,rgba(137,77,113,.48),rgba(85,38,70,.3)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.16); }
  .cloud-price-choice:hover { transform: translateY(-2px); border-color: var(--accent); }
  .cloud-price-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .cloud-price-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
  .cloud-price-choice strong { font-size: clamp(19px,2vw,25px); white-space: nowrap; font-weight: 800; }
  .cloud-price-capacity { font-weight: 800; }
  .cloud-price-savings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .cloud-price-savings[hidden] { display: none; }
  .cloud-price-original { color: var(--text-2); font-size: 14px; white-space: nowrap; text-decoration-thickness: 1.5px; }
  .cloud-price-discount { display: inline-block; border-radius: 999px; padding: 4px 8px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
  .cloud-price-note { color: var(--text-2); font-size: 11px; line-height: 1.5; }
  .cloud-plan-selected { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @keyframes cloud-offer-slide { from { opacity: 0; transform: translateY(32px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @media (max-width: 650px) { .cloud-plan-grid { grid-template-columns: minmax(0,1fr); } .cloud-subscription-offer { gap: 14px; } .cloud-plan { padding: 14px; } }
  @media (prefers-reduced-motion: reduce) { .modal .box.account-box:has(.cloud-subscription-offer) { animation: none; } .cloud-price-choice { transition: none; } .cloud-price-choice:hover { transform: none; } }
  .auth-demo-entry { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .auth-demo-entry small { color: var(--text-2); font-size: 10px; font-weight: 400; }
  .auth-demo-entry[hidden] { display: none; }
  .auth-services[hidden], .auth-divider[hidden], #auTabs[hidden] { display: none; }
  @media (max-width: 400px) { .auth-memory-note { font-size: 11px; } }
  .auth-providers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .auth-provider { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; padding: 10px 6px; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; border: 1px solid rgba(217,222,255,.16); border-radius: 14px; background: linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 3px 7px rgba(0,0,0,.15); cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
  .auth-provider:hover { transform: translateY(-2px); border-color: rgba(240,218,234,.45); background-color: rgba(255,255,255,.04); }
  .auth-provider:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
  .auth-provider small { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; color: #aaa8bc; }
  .provider-icon { flex: none; width: 23px; height: 23px; }
  .yandex .provider-icon { border-radius: 50%; background: #fc3f1d; color: white; font-size: 18px; font-family: Arial,sans-serif; text-align: center; line-height: 23px; }
  .auth-provider-status { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
  .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
  .auth-divider::before,.auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
  .account-box .f input { background: rgba(5,8,23,.32); box-shadow: inset 0 2px 5px rgba(0,0,0,.13),0 1px 0 rgba(255,255,255,.035); }
  .account-box .btn.primary, .memory-welcome .btn.primary { box-shadow: inset 0 1px 0 #fff,0 3px 0 rgba(155,132,92,.65),0 8px 20px rgba(0,0,0,.22); }
  @keyframes account-arrive { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes account-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  @media (max-width: 540px) { .modal:has(.account-box) { padding: 16px; } .modal .account-box header { padding: 20px 18px 16px; } .modal .account-box .body { padding: 0 18px 22px; } .account-box #modalTitle { font-size: 19px; gap: 12px; } .auth-providers { gap: 7px; } .auth-provider { gap: 6px; font-size: 12px; } }
  .auth-fields { display: flex; flex-direction: column; gap: 12px; }
  .auth-agreement { font-size: 12px; color: var(--text-2); line-height: 1.5; }
  .auth-agreement label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
  .auth-agreement input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
  .auth-agreement a { color: var(--accent); text-underline-offset: 3px; }
  .auth-agreement small { display: block; margin: 7px 0 0 28px; color: var(--muted); font-size: 10px; }
  .auth-password-field { position: relative; }
  .auth-box .f .auth-password-field input { width: 100%; padding-inline-end: 50px; }
  .auth-password-toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
  .auth-password-toggle svg { width: 21px; height: 21px; }
  .auth-password-toggle:hover { background: rgba(255,255,255,.07); color: var(--accent); }
  .auth-password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .auth-password-slash { display: none; }
  .auth-password-toggle[aria-pressed="true"] .auth-password-slash { display: block; }
  :is(.modal .box #modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"]) {
    display: grid; place-items: center; flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid rgba(var(--accent-rgb),.14); border-radius: 12px; background: linear-gradient(145deg,#393047,#1a1b30); color: var(--accent); font-size: 0; box-shadow: inset 0 1px 1px #ffffff24, 0 3px 0 #090c1b, 0 5px 9px #00000045; transition: filter .18s ease, translate .18s ease;
  }
  :is(#modalClose, #galleryClose, .memory-calendar-heading button[data-close], .ctl button[data-a="rm"]) { position: relative; }
  :is(#modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"]) > svg { display: none; }
  :is(#modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"])::before,
  :is(#modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"])::after {
    content: ''; position: absolute; top: calc(50% - 2px); left: calc(50% - 10px); width: 20px; height: 4px; border-radius: 999px; background: linear-gradient(#fff9ec,var(--accent) 55%,#d2b998); box-shadow: 0 1px 0 #9e866e, 0 2px 2px #00000065; transform: rotate(45deg); pointer-events: none;
  }
  :is(#modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"])::after { transform: rotate(-45deg); }
  :is(#modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"]):hover { filter: brightness(1.15); translate: 0 -1px; }
  :is(#modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"]):active { translate: 0 2px; }
  @media (prefers-reduced-motion: reduce) { :is(#modalClose, .spot-close, #galleryClose, .memory-calendar-heading button[data-close], #map .leaflet-popup-close-button, .ctl button[data-a="rm"]) { transition: none; } }
  .modal .box.auth-box { max-height: min(900px, calc(100dvh - 48px)); }
  .auth-email-code { font-size: 26px; font-weight: 800; text-align: center; letter-spacing: .45em; padding-left: calc(13px + .45em); }
  .modal .auth-box .body { min-height: 0; scrollbar-width: none; }
  .auth-box .body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  @media (max-height: 760px) {
    .modal .auth-box[data-auth-view="in"] header { padding: 16px 22px 12px; }
    .modal .auth-box[data-auth-view="in"] .body { padding: 0 22px 20px; gap: 10px; }
    .auth-box[data-auth-view="in"] .auth-fields { gap: 8px; }
    .auth-box[data-auth-view="in"] .auth-services-label { margin-bottom: 7px; }
    .auth-box[data-auth-view="in"] .auth-provider { min-height: 48px; padding: 7px 6px; }
    .auth-box[data-auth-view="in"] .auth-provider-status { margin-top: 6px; }
    .auth-box[data-auth-view="in"] .chips button { padding: 6px 12px; }
    .auth-box[data-auth-view="in"] #auGo { padding: 10px 18px; }
    .auth-box[data-auth-view="in"] .auth-demo-entry { padding: 8px 18px; }
    .auth-box[data-auth-view="in"] .auth-memory-note { font-size: 11px; line-height: 1.4; }
  }
  @media (max-height: 620px) {
    .modal .auth-box[data-auth-view="in"] header { padding: 12px 20px 10px; }
    .modal .auth-box[data-auth-view="in"] .body { gap: 8px; padding-bottom: 16px; }
    .auth-box[data-auth-view="in"] .auth-fields { gap: 6px; }
    .auth-box[data-auth-view="in"] .f { gap: 3px; }
    .auth-box[data-auth-view="in"] .f input { padding: 8px 12px; }
  }
  @media (prefers-reduced-motion: reduce) { .modal .box.account-box { animation: none; } .auth-provider { transition: none; } .auth-provider:hover { transform: none; } }
  .credit { display: none; position: fixed; right: 12px; bottom: 8px; z-index: 6; font-size: 10.5px; color: rgba(143,152,186,.5); }
  .credit a { color: inherit; }

  @media (max-width: 1100px) { :root { --panel-w: 440px; } .film .cap { width: 150px; } .memcard { width: 300px; } }
  @media (max-width: 860px) {
    :root { --panel-w: 100%; --top-h: 58px; }
    .top { padding: 0 12px; gap: 10px; } .nav button { padding: 7px 10px; font-size: 13px; } .brand span { display: none; }
    .ghost { padding: 0; width: 38px; height: 38px; justify-content: center; }
    .ghost span { display: none; }
    .p-toggle { right: 50%; top: auto; bottom: 0; transform: translateX(50%); width: 68px; height: 24px; border-radius: 13px 13px 0 0; border-right: 1px solid var(--line); border-bottom: 0; }
    .p-toggle svg { transform: rotate(90deg); }
    body.panel-off .p-toggle svg { transform: rotate(270deg); }
    .shell { flex-direction: column; }
    .stagearea { flex: none; height: 34vh; transition: height .5s cubic-bezier(.4, 0, .2, 1); }
    body.panel-off .stagearea { height: calc(100dvh - var(--top-h)); }
    body.memory-mode .stagearea { height: calc(100dvh - var(--top-h)); }
    body.panel-off .panel { margin-right: 0; }
    .p-search { padding: 12px 16px; gap: 10px; } .p-head { padding: 10px 16px 8px; } .p-body { padding: 0 16px 14px; }
    .compare { padding: 12px 16px 16px; } .cmp-btns .btn { padding: 12px 14px; font-size: 14px; }
    .panel { width: 100%; flex: 1; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; }
    .crumb { left: 14px; top: 14px; } .legend { display: none; }
    .toast { left: 50%; bottom: 84px; }
    .years { left: 14px; top: 14px; right: 14px; align-items: flex-start; } .years .list { flex-direction: row; flex-wrap: wrap; } .tally { display: none; }
    .memcard { right: 14px; left: 14px; top: auto; bottom: 130px; width: auto; }
    .film { left: 14px; right: 14px; bottom: 14px; } .film .cap { display: none; }
  }
  @media (max-width: 540px) {
    :root { --top-h: 102px; }
    .top { flex-wrap: wrap; padding: 7px 12px; gap: 4px 10px; }
    .years { padding: 12px 8px; }
    .brand { order: 0; }
    .top-right { order: 1; margin-left: auto; gap: 8px; }
    .nav { order: 2; width: 100%; justify-content: center; }
    .nav button { flex: 1; padding: 7px 5px; }
    .memcard { max-height: 45dvh; overflow-y: auto; }
    .credit { max-width: calc(100vw - 24px); font-size: 9px; }
    body.memory-mode .film { bottom: 45px; }
    body.memory-mode #map .leaflet-bottom.leaflet-left { bottom: 155px; }
    body.memory-mode .memcard { bottom: 155px; }
    body.memory-mode .zoomctl { left: auto; right: 14px; top: 140px; bottom: auto; }
  }

  .memory-welcome { position: absolute; isolation: isolate; left: 5%; bottom: 12%; width: min(420px,calc(100% - 52px)); max-height: calc(100dvh - var(--top-h) - 108px); overflow-y: auto; scrollbar-width: thin;
    padding: 28px; border: 1px solid var(--account-edge); border-radius: 28px; background: var(--account-surface); box-shadow: var(--account-shadow);
    transform-origin: center; transition: border-color .25s ease;
    animation: welcome-arrive .45s ease-out, welcome-hover 7s ease-in-out .45s infinite; }
  .memory-welcome::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--welcome-light-x,25%) var(--welcome-light-y,0%),rgba(255,240,235,.08),transparent 65%),linear-gradient(125deg,rgba(255,255,255,.04),transparent 40%); }
  .memory-welcome.is-attracted { border-color: rgba(238,219,240,.42); }
  @keyframes welcome-arrive { from { opacity: 0; transform: perspective(1000px) translateY(16px) scale(.98); } to { opacity: 1; transform: perspective(1000px) translateY(0) scale(1); } }
  @keyframes welcome-hover {
    0%,100% { transform: perspective(1000px) translate3d(var(--welcome-x,0px),calc(var(--welcome-y,0px) - var(--welcome-lift,0px)),var(--welcome-z,0px)) rotateX(var(--welcome-rx,0deg)) rotateY(var(--welcome-ry,0deg)); }
    50% { transform: perspective(1000px) translate3d(var(--welcome-x,0px),calc(var(--welcome-y,0px) - var(--welcome-lift,0px) - 4px),var(--welcome-z,0px)) rotateX(var(--welcome-rx,0deg)) rotateY(var(--welcome-ry,0deg)); }
  }
  .welcome-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; color: #b6a9bf; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
  .memory-welcome h1 { font: 700 28px/1.3 var(--font-display); margin: 0 0 16px; color: var(--accent); }
  .memory-welcome p { color: var(--text-2); line-height: 1.65; margin: 0 0 24px; }
  .memory-welcome .btn.primary { width: 100%; padding: 14px 16px; font-size: 13px; }
  @media (prefers-reduced-motion: reduce) { .memory-welcome { animation: none; transition: none; transform: none; } }
  .memory-welcome.sand-source { position: fixed; z-index: 26; right: auto; bottom: auto; max-height: none; margin: 0; transform: none; animation: none; transition: none; visibility: visible; pointer-events: none; }
  .sand-stream { position: fixed; inset: 0; z-index: 28; width: 100%; height: 100%; display: block; pointer-events: none; }
  .modal.sand-opening { background: rgba(4,7,18,var(--sand-shade,0)); backdrop-filter: blur(var(--sand-blur,0px)); }
  .memory-welcome.sand-source, .modal .box.sand-target { mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; }
  .modal .box.sand-target { animation: none; transform: none; transition: none; }
  .modal .box.account-box.sand-assembled { animation: account-hover 7s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .modal .box.account-box.sand-assembled { animation: none; } }
  .location-status { position: absolute; left: 26px; bottom: 145px; display: flex; }
  .location-status button {
    width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
    border: 1px solid var(--account-edge); border-radius: 50%; background: var(--account-surface);
    box-shadow: inset 0 1px 2px #fff5, inset 1px 0 1px #fff2, inset 0 -2px 3px #0007, 0 2px 0 #1c2337, 0 5px 0 #141023, 0 10px 16px #0008;
    transform: translateY(-3px); transition: transform .2s ease, filter .2s ease;
  }
  .location-status button img { width: 24px; height: 24px; pointer-events: none; }
  .location-status button:hover:not(:disabled) { transform: translateY(-5px); filter: brightness(1.15); }
  .location-status button:active:not(:disabled) { transform: translateY(-1px); }
  .location-status button:focus-visible { outline: 2px solid #fff0d6; outline-offset: 4px; }
  .location-status button:disabled { opacity: .55; cursor: wait; }
  @media (prefers-reduced-motion: reduce) { .location-status button { transition: none; } }
  body.welcome-mode .location-status { bottom: 35px; }
  body.memory-mode:not(.welcome-mode) .location-status { left: auto; right: 26px; }
  body.welcome-mode .hint, body.welcome-mode .p-toggle { display: none; }
  .experience-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .film #memoryActions { flex: none; margin-left: auto; }
  .film #filmExpand { display: grid; place-items: center; flex: none; width: 40px; min-width: 40px; height: 40px; padding: 7px; border-radius: 12px; color: var(--accent); }
  #filmExpand svg { width: 24px; height: 24px; }
  .film-shortcut[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px #ffefd630,0 3px 8px #0004; }
  .film .strip .film-city { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: none; width: 110px; min-height: 74px; padding: 8px; border: 1px solid var(--account-edge); border-radius: 12px; color: var(--accent); background: #6a486331; }
  .film-city b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .film-city small { color: var(--text-2); }
  .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; }
  .gallery-grid-item { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid var(--account-edge); border-radius: 12px; overflow: hidden; background: #31263d; cursor: pointer; }
  .gallery-grid-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .gallery-grid-item > span { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 8px 7px; background: linear-gradient(transparent,#070b15de); color: var(--accent); font-size: 11px; text-align: start; }
  .gallery-grid-item i { position: absolute; top: 8px; right: 8px; color: var(--accent); font-style: normal; }
  .gallery-grid-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .gallery-grid[hidden],.gallery-stage[hidden],.gallery-strip[hidden],#galleryTools[hidden],#galleryOverview[hidden] { display: none; }
  .gallery-empty { grid-column: 1 / -1; padding: 40px 10px; text-align: center; color: var(--text-2); }
  .gallery-credit { color: var(--muted); font-size: 10px; }
  @media(max-width:650px) { .memory-gallery header { flex-wrap: wrap; justify-content: flex-start; } .memory-gallery .gallery-heading { flex: 1 1 100%; } .memory-gallery .gallery-actions { width: 100%; box-sizing: border-box; align-self: stretch; justify-content: flex-end; } .memory-gallery h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; } }
  .film-shortcuts { display: flex; flex-direction: column; gap: 7px; flex: none; }
  .film-shortcut {
    position: relative; width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
    border: 1px solid var(--account-edge); border-radius: 10px; color: #fff0d6;
    background: var(--account-surface);
    box-shadow: inset 0 1px 1px #fff3, 0 3px 8px #0004;
    transition: filter .2s ease, transform .2s ease;
  }
  .film-shortcut svg { width: 20px; height: 20px; pointer-events: none; }
  .film-shortcut:hover, .film-shortcut:focus-visible { filter: brightness(1.15); transform: translateY(-1px); }
  .film-shortcut:focus-visible { outline: 2px solid #fff0d6; outline-offset: 3px; }
  .film-shortcut:active { transform: translateY(1px); }
  .film-shortcut-tip {
    position: absolute; z-index: 2; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 7px 10px; border: 1px solid var(--account-edge); border-radius: 9px;
    background: #171b30; color: #fff0d6; box-shadow: 0 5px 16px #0006;
    font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
    visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s ease;
  }
  .film-shortcut:hover .film-shortcut-tip, .film-shortcut:focus-visible .film-shortcut-tip { visibility: visible; opacity: 1; }
  body.gallery-open .film { opacity: 0; pointer-events: none; animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .film-shortcut, .film-shortcut-tip { transition: none; } }
  .camera-shutter {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center;
    padding: 0; border: 1px solid #a4b3cf88; border-radius: 50%;
    color: #DCE4EF; background: linear-gradient(145deg, #35394d, #111628);
    box-shadow: inset 0 1px 2px #fff5, 0 4px 12px #0005;
    transform: translateY(-3px); transition: transform .2s ease, filter .2s ease;
  }
  .camera-shutter img { display: block; width: 34px; height: 34px; pointer-events: none; }
  .camera-shutter:hover:not(:disabled) { transform: translateY(-5px); filter: brightness(1.08); }
  .camera-shutter:active:not(:disabled) { transform: translateY(-1px); }
  .camera-shutter:disabled { opacity: .4; cursor: default; }
  @media (prefers-reduced-motion: reduce) { .camera-shutter { transition: none; } .camera-shutter:hover:not(:disabled), .camera-shutter:active:not(:disabled) { transform: translateY(-3px); } }
  .experience-intro { display: flex; flex-direction: column; gap: 14px; }
  .experience-intro p { margin: 0; }
  .modal .box.permissions-box { width: min(680px,100%); }
  .intro-media-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .intro-media-choices.gallery-only { grid-template-columns: minmax(0,1fr); }
  .intro-media-choices .permission-card > div { display: flex; flex-direction: column; align-items: stretch; }
  .intro-media-choices .permission-card p { margin-bottom: 12px; }
  .intro-media-choices .permission-card .btn { flex: 0 0 auto; }
  .permission-card[hidden], .permission-card p[role="status"]:empty { display: none; }
  @media(max-width:540px) { .intro-media-choices { grid-template-columns: minmax(0,1fr); } }

  .permissions-box .permissions-lead { color: var(--text-2); font-size: 13px; line-height: 1.6; }
  .permission-card { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 16px; border: 1px solid var(--account-edge); border-radius: 18px; background: linear-gradient(135deg,rgba(255,255,255,.06),rgba(12,16,36,.24)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 5px 12px rgba(0,0,0,.12); }
  .permission-icon { color: var(--accent); }
  .permission-icon svg { width: 28px; height: 28px; }
  .permission-card h3 { margin: 0 0 6px; font-size: 16px; }
  .permission-card p { color: var(--text-2); font-size: 12px; line-height: 1.6; }
  .permission-card .connection-availability { margin-top: 10px; }
  .permission-card .btn { margin-top: 12px; width: 100%; }
  .permission-card #introLocationStatus:not(:empty) { margin-top: 10px; }
  .permission-card #introPasskeyStatus:not(:empty) { margin-top: 10px; }
  .modal .permissions-box header { padding: 16px 22px 12px; }
  .modal .permissions-box .body { padding: 0 22px 20px; }
  .permissions-box .experience-intro { gap: 10px; }
  .permissions-box .permission-card { padding: 12px; }
  .permissions-box .permission-card p { line-height: 1.5; }
  .permissions-box .btn { padding-block: 10px; }
  .permissions-box .permission-card .btn { margin-top: 8px; }
  .permissions-box .intro-media-choices .permission-card .btn { margin-top: auto; }
  .auth-passkey-status { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.5; }
  .auth-passkey-status:empty { display: none; }
  .account-passkeys { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .account-passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 12px; }
  .permissions-later { justify-content: center; }
  #introLocationStatus { font-size: 13px; color: var(--text-2); }
  .memory-period { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
  .memory-period label { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); font-size: 12px; }
  .memory-period input { width: 145px; padding: 8px; font: 13px var(--font-body); color-scheme: dark; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
  .years > #memoryPeriod { align-self: stretch; min-width: 0; }
  .memory-date-control { margin-bottom: 12px; width: 100%; max-width: 330px; }
  .memory-date-toggle.active { color: var(--accent); border-color: rgba(var(--accent-rgb),.45); }
  .memory-date-panel { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-solid); }
  .memory-date-panel[hidden], .memory-date-row[hidden] { display: none; }
  .memory-date-row { display: grid; grid-template-columns: 54px minmax(0,1fr) 80px; gap: 8px; }
  .memory-date-row label { display: flex; flex-direction: column; min-width: 0; gap: 5px; color: var(--text-2); font-size: 12px; }
  .memory-date-panel .memory-date-field { min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 7px; font: inherit; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: #0C1228; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .memory-date-field[aria-expanded="true"] { border-color: var(--accent); }
  .memory-date-field:focus-visible, .memory-calendar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .memory-calendar { position: fixed; z-index: 60; box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 12px; border: 1px solid #39415a; border-radius: 16px; background: #10172c; color: var(--text); box-shadow: 0 16px 40px #0009; }
  .memory-calendar[hidden] { display: none; }
  .memory-calendar button { padding: 0; min-width: 0; border: 0; border-radius: 8px; color: inherit; background: transparent; font: 12px var(--font-body); cursor: pointer; }
  .memory-calendar button:hover { background: rgba(var(--accent-rgb),.08); color: var(--accent); }
  .memory-calendar button:disabled { opacity: .4; cursor: default; }
  .memory-calendar-heading { display: grid; grid-template-columns: 30px 1fr 30px; gap: 3px; align-items: center; margin-bottom: 10px; }
  .memory-calendar-heading button { min-height: 32px; }
  .memory-calendar-heading button[data-up] { font-weight: 700; text-transform: capitalize; }
  .memory-calendar-heading button[data-up]:disabled { opacity: 1; }
  .memory-calendar-heading button[data-nav], .memory-calendar-heading button[data-close] { font-size: 22px; }
  .memory-calendar-grid { display: grid; gap: 4px; }
  .memory-calendar-grid.days { grid-template-columns: repeat(7,minmax(0,1fr)); }
  .memory-calendar-grid.choices { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .memory-calendar-weekday { text-align: center; font-size: 11px; line-height: 24px; color: var(--text-2); }
  .memory-calendar-grid .memory-calendar-cell { min-height: 32px; }
  .memory-calendar-grid.choices .memory-calendar-cell { min-height: 38px; text-transform: capitalize; }
  .memory-calendar-cell[aria-current="date"] { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.5); }
  .memory-calendar-grid .selected { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .memory-calendar-grid .selected:hover { background: #FFF7E8; color: var(--accent-ink); }
  .memory-calendar-footer { display: flex; gap: 6px; margin-top: 10px; }
  .memory-calendar-footer:empty { display: none; }
  .memory-calendar-footer button { padding: 7px 10px; border: 1px solid var(--line); color: var(--text-2); }
  .memory-date-period { display: flex; align-items: center; gap: 8px; margin: 13px 0; font-size: 13px; }
  .memory-date-period input { accent-color: var(--accent); width: 16px; height: 16px; }
  .memory-date-panel small { display: block; color: var(--text-2); line-height: 1.5; margin: 10px 0; }
  .memory-date-error { color: #FFA4A4; font-size: 12px; }
  .memory-date-panel .btn { font-size: 12px; padding: 9px 12px; }
  @media (min-width: 861px) {
    body.memory-mode.memory-date-open .zoomctl { left: 390px; }
  }
  @media (min-width: 541px) and (max-width: 860px) {
    body.memory-mode.memory-date-open .zoomctl { left: auto; right: 14px; }
  }
  @media (max-width: 540px) {
    body.memory-mode.memory-date-open .zoomctl { top: auto; bottom: 155px; }
    body.memory-mode.memory-date-open .years { max-height: calc(100% - 300px); }
  }
  .years { max-width: 360px; max-height: calc(100% - 180px); overflow-y: auto; }
  .years .list { flex-direction: row; flex-wrap: wrap; }
  .camera-preview { width: 100%; max-height: 45dvh; object-fit: contain; background: #000; border-radius: 16px; }
  .memory-gallery { position: fixed; inset: 0; z-index: 40; background: linear-gradient(145deg,rgba(106,66,99,.60),rgba(54,35,63,.56)); border: 1px solid var(--account-edge); -webkit-backdrop-filter: blur(22px) saturate(125%); backdrop-filter: blur(22px) saturate(125%); box-shadow: inset 0 1px 0 #fbe7ff30; display: flex; flex-direction: column; padding: 16px 24px max(16px, env(safe-area-inset-bottom)); gap: 12px; overflow: hidden; color: var(--accent); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .film { background: rgba(75,46,72,.60); } .memory-gallery { background: rgba(75,46,72,.91); } }
  .memory-gallery header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
  .memory-gallery .gallery-heading, .memory-gallery .gallery-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .memory-gallery .gallery-heading { flex: 1; }
  .memory-gallery .gallery-actions { flex: none; margin-left: auto; }
  .memory-gallery .gallery-actions .memory-date-control { position: relative; width: auto; min-width: 0; flex: 0 1 auto; margin-bottom: 0; }
  .memory-gallery .memory-date-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 4; box-sizing: border-box; width: min(330px, calc(100vw - 26px)); max-height: calc(100dvh - 160px); margin-top: 0; overflow-y: auto; box-shadow: 0 16px 40px #0007; }
  .memory-gallery .gallery-actions .memory-date-toggle { box-sizing: border-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .memory-gallery .film-shortcut { box-sizing: border-box; flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; transform-origin: center; }
  .memory-gallery .gallery-content { min-height: 0; flex: 1; overflow-y: auto; }
  .memory-gallery h2 { font-size: 20px; margin: 0; }
  .gallery-stage { display: flex; align-items: center; justify-content: center; gap: 12px; flex: 1; min-height: 160px; overflow: hidden; }
  .gallery-stage img, .gallery-stage video { min-width: 0; max-width: calc(100% - 110px); max-height: 55dvh; object-fit: contain; }
  .gallery-stage button { flex: none; font-size: 28px; min-width: 40px; }
  .memory-gallery footer { display: flex; flex-direction: column; gap: 10px; }
  #galleryInfo { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
  .gallery-strip { display: flex; gap: 8px; overflow-x: auto; flex: none; padding: 3px; }
  .gallery-strip button { position: relative; flex: none; padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; }
  .gallery-strip button[aria-current="true"] { border-color: var(--accent); }
  .gallery-strip img { width: 86px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
  .gallery-strip span { position: absolute; right: 5px; bottom: 3px; color: white; }
  .gallery-open { overflow: hidden; }
  .review-list { display: flex; flex-direction: column; gap: 12px; }
  .review-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
  .review-item > img { width: 64px; height: 54px; object-fit: cover; border-radius: 8px; cursor: pointer; }
  .review-item > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
  .review-item p { font-size: 12px; margin: 5px 0; color: var(--text-2); }
  .unplaced-box { color: var(--accent); }
  .modal .unplaced-box .body { scrollbar-width: none; }
  .unplaced-box .body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .unplaced-box #modalTitle { color: var(--accent); }
  .unplaced-box .unplaced-description { margin: 0; color: rgba(var(--accent-rgb),.8); font-size: 14px; line-height: 1.65; }
  .unplaced-box .btn:not(.primary) { color: var(--accent); border-color: rgba(var(--accent-rgb),.24); background: linear-gradient(145deg,#74415f,#42283f); box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 #261c2e,0 6px 12px rgba(0,0,0,.2); }
  .unplaced-box .btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb),.65); filter: brightness(1.08); }
  .unplaced-box .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .unplaced-box .review-list { gap: 12px; }
  .unplaced-box .review-item { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 12px; padding: 14px; border-color: var(--account-edge); border-radius: 18px; background: linear-gradient(135deg,rgba(144,87,125,.16),rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 5px 12px rgba(0,0,0,.12); }
  .unplaced-box .review-item > img { width: 60px; height: 60px; border-radius: 12px; }
  .unplaced-box .review-item b { display: block; font-size: 14px; font-weight: 800; }
  .unplaced-box .review-item .unplaced-status { display: inline-block; margin: 6px 0 0; padding: 3px 8px; border: 1px solid rgba(var(--accent-rgb),.12); border-radius: 8px; color: rgba(var(--accent-rgb),.76); background: rgba(var(--accent-rgb),.06); font-size: 11px; line-height: 1.5; }
  .unplaced-box .review-item .btn { flex: none; min-height: 40px; padding: 9px 13px; font-size: 12px; }
  .unplaced-box .memory-details { grid-template-columns: 74px minmax(0,1fr); align-items: center; }
  .memory-details .details-photo { width: 74px; height: 74px; padding: 0; border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 12px; background: rgba(0,0,0,.15); cursor: pointer; overflow: hidden; }
  .memory-details .details-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .memory-details .details-title small { display: block; margin-top: 5px; color: rgba(var(--accent-rgb),.65); font-size: 11px; }
  .memory-details .details-fields { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .memory-details .f { margin: 0; min-width: 0; gap: 6px; color: rgba(var(--accent-rgb),.8); font-size: 12px; }
  .memory-details .f input, .memory-details .f select { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 10px; color: var(--accent); background: rgba(5,8,23,.32); font: inherit; font-size: 14px; color-scheme: dark; }
  .memory-details .f input:focus, .memory-details .f select:focus { outline: 2px solid rgba(var(--accent-rgb),.65); outline-offset: 2px; }
  .memory-details .f input::placeholder { color: rgba(var(--accent-rgb),.4); }
  .memory-details .f select option { background: #211d35; }
  .memory-details .details-more { grid-column: 1/-1; border-top: 1px solid rgba(var(--accent-rgb),.12); padding-top: 12px; }
  .memory-details summary { cursor: pointer; font-size: 12px; color: var(--accent); }
  .memory-details .details-more[open] > summary { margin-bottom: 14px; }
  .memory-details .date-fields { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 14px; }
  .memory-details .details-coordinates { margin-top: 14px; }
  .memory-details .details-coordinates[open] > summary { margin-bottom: 12px; }
  .unplaced-box .memory-details .details-preview { grid-column: 1/-1; color: rgba(var(--accent-rgb),.7); margin: 0; white-space: pre-line; font-size: 11px; line-height: 1.6; }
  .unplaced-box .memory-details .details-error { grid-column: 1/-1; color: #ffcece; margin: 0; }
  .unplaced-box .memory-details .details-success { color: var(--accent); }
  .memory-details .details-preview:empty, .memory-details .details-error:empty, .memory-details .details-results:empty { display: none; }
  .memory-details .details-results { grid-column: 1/-1; display: grid; gap: 8px; }
  .memory-details .details-results > small { font-size: 10px; color: rgba(var(--accent-rgb),.55); }
  .memory-details .details-lookup-note { grid-column: 1/-1; color: rgba(var(--accent-rgb),.55); font-size: 10px; line-height: 1.6; }
  .memory-details .details-result { padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 10px; color: var(--accent); background: rgba(var(--accent-rgb),.05); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
  .memory-details .details-result:hover, .memory-details .details-result[aria-pressed="true"] { background: rgba(var(--accent-rgb),.13); border-color: var(--accent); }
  .unplaced-box .memory-details .details-save { grid-column: 1/-1; justify-self: start; }
  @media (max-width: 440px) {
    .unplaced-box .review-item { grid-template-columns: 52px minmax(0,1fr); padding: 12px; gap: 10px; }
    .unplaced-box .review-item > img { width: 52px; height: 52px; }
    .unplaced-box .review-item .btn { grid-column: 2; justify-self: start; }
    .unplaced-box .memory-details { grid-template-columns: 64px minmax(0,1fr); }
    .memory-details .details-photo { width: 64px; height: 64px; }
    .memory-details .details-fields { gap: 10px; }
    .memory-details .date-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .unplaced-box .memory-details .details-save { grid-column: 1/-1; }
  }
  .admin-review { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
  .admin-review > img { max-width: 150px; max-height: 110px; object-fit: contain; }
  .admin-review .review-original { width: 100%; max-width: 100%; max-height: 55dvh; object-fit: contain; }
  .f textarea { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; resize: vertical; }
  @media (max-width: 860px) {
    .memory-welcome { left: 16px; right: 16px; bottom: 65px; width: min(370px,calc(100% - 32px)); padding: 22px; max-height: calc(100dvh - var(--top-h) - 97px); }
    .memory-welcome h1 { font-size: 23px; }
    .welcome-brand { margin-bottom: 18px; }
    .years { max-width: min(360px, calc(100% - 28px)); max-height: 38dvh; }
    .memory-period input { width: 125px; }
    .memory-gallery { padding: 12px; }
    .gallery-stage { gap: 4px; }
    .gallery-stage img, .gallery-stage video { max-width: calc(100% - 88px); max-height: 46dvh; }
    .memory-gallery .btn { padding: 8px 12px; font-size: 12px; }
    .memory-gallery .gallery-actions { gap: 6px; }
    .location-status { left: 14px; bottom: 160px; }
    body.memory-mode:not(.welcome-mode) .location-status { display: none; }
    .review-item { flex-wrap: wrap; }
    .film { gap: 8px; padding: 10px; }
    .film .cap:has(#filmBack:not([hidden])) { display: flex; width: auto; }
    .film .cap .film-heading > .mono, .film .cap > b { display: none; }
    #filmExpand { max-width: 95px; font-size: 11px; padding: 9px; }
    .memcard { padding: 12px; gap: 8px; max-height: 28dvh; }
    .memcard h2 { font-size: 20px; }
    .memcard .duo, #memNote, #memAgain { display: none; }
    .memcard[open] .memcard-heading { margin-bottom: 8px; }
    .memcard-details { gap: 8px; }
    .memcard .memcard-actions { flex-direction: row; }
    .memcard .memcard-actions .btn { flex: 1; font-size: 12px; padding: 10px; }
  }
  .rest-trip, .spot-trip { padding: 12px 14px; }
  .spot-trip { padding: 12px 0; }
  .trip-toggle { border-color: #61ccef70; color: #61ccef; font-size: 13px; }
  .trip-body[hidden] { display: none; }
  .trip-body { padding-top: 12px; }
  .trip-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .trip-dates label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-2); min-width: 0; }
  .trip-dates input, .trip-dates select { box-sizing: border-box; min-width: 0; width: 100%; padding: 10px; background: #10182d; color: var(--text); border: 1px solid var(--line); border-radius: 10px; font: inherit; color-scheme: dark; }
  .trip-dates option { background: #10182d; color: #e9edf7; }
  .trip-dates > button { grid-column: 1/-1; }
  .trip-message, .trip-note { font-size: 12px; color: var(--text-2); line-height: 1.6; margin: 8px 0; overflow-wrap: anywhere; }
  .trip-message:empty { display: none; }
  .trip-tab, .trip-hotel, .trip-flight, .trip-order { background: #0c1428; border: 1px solid #61ccef35; border-radius: 12px; margin-top: 9px; padding: 12px; }
  .trip-tab > summary, .trip-hotel > summary, .trip-flight > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-size: 14px; color: var(--text); }
  .trip-tab > summary::-webkit-details-marker, .trip-hotel > summary::-webkit-details-marker, .trip-flight > summary::-webkit-details-marker { display: none; }
  .trip-tab[open] > summary { padding-bottom: 9px; border-bottom: 1px solid var(--line); color: #61ccef; }
  .trip-hotel > summary > img { width: 70px; height: 60px; object-fit: cover; border-radius: 9px; flex: none; }
  .trip-hotel > summary > span { display: grid; gap: 4px; min-width: 0; }
  .trip-hotel small { color: var(--text-2); font-size: 11px; }
  .trip-rate { display: grid; gap: 7px; border-top: 1px solid var(--line); padding: 12px 0; font-size: 13px; }
  .trip-rate .trip-note { margin: 0; }
  .trip-rate strong, .trip-hotel strong, .trip-flight strong { color: var(--gold); }
  .trip-pick { justify-self: start; }
  .trip-order h4, .trip-self-title { font-size: 14px; margin: 14px 0 9px; }
  .trip-order > p { font-size: 12px; }
  .trip-checkout { display: block; width: 100%; margin-top: 12px; }
  .trip-checkout-body { font-size: 13px; }
  .rest-result > .card { min-height: 114px; padding: 13px 28px 13px 13px; }
  .rest-result .rest-trip { padding: 0 13px 12px; }
  .rest-result:has(.rest-trip) { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.03); }
  .rest-result:has(.rest-trip) > .card { border: 0; background: transparent; }
  .trip-card-price.price-pending { font: 11px var(--font-body,Nunito),sans-serif; max-width: 140px; white-space: normal; text-align: right; color: var(--muted); }
  .card-chevron { align-self: center; color: var(--muted); font-size: 24px; flex: none; }
  .card.world { padding: 13px; gap: 14px; }
  .card.world .thumb { width: 86px; height: 86px; border-radius: 11px; }
  .card.world .t b { font-size: 16px; }
  @media (max-width:540px) { .trip-dates { grid-template-columns: minmax(0,1fr); } }
  .service-destination { display: grid; gap: 12px; margin: 16px 0; }
  .service-destination label { display: grid; gap: 6px; color: var(--text-2); font-size: 13px; }
  .service-destination select { background: #10182d; color-scheme: dark; }
  .service-offers h3 { font-size: 18px; margin: 18px 0 12px; }
  .service-trip .trip-toggle { display: none; }
  .service-trip .trip-body { padding-top: 0; }
  .modal .box.flight-box { width: min(1320px,100%); max-height: 90dvh; background: #0f162d; }
  .flight-box header { padding: 24px 30px 12px; }
  .flight-box .body { padding: 0 30px 30px; min-height: 470px; }
  .flight-search { position: relative; min-width: 0; }
  .flight-hero { position: relative; padding: 20px 0 28px; overflow: hidden; }
  .flight-hero::after { content: ''; position: absolute; right: 30px; top: -65px; width: 270px; height: 270px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#61ccef28,#61ccef06 55%,transparent 70%); border: 1px solid #61ccef18; pointer-events: none; }
  .flight-eyebrow { color: var(--gold); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
  .flight-hero h2 { position: relative; z-index: 1; margin: 13px 0 10px; font-size: clamp(25px,2.6vw,38px); line-height: 1.18; letter-spacing: -.035em; }
  .flight-hero p { margin: 0; color: var(--text-2); font-size: 14px; }
  .flight-form { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 12px; position: relative; z-index: 3; }
  .flight-fields { display: grid; grid-template-columns: minmax(130px,.85fr) minmax(190px,1.3fr) repeat(2,minmax(135px,.9fr)) minmax(155px,1fr); border: 1px solid #47536f; border-radius: 16px; background: #1d263e; }
  .flight-field { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 17px 16px; min-height: 94px; border-right: 1px solid #414b63; gap: 6px; }
  .flight-field:last-child { border-right: 0; }
  .flight-field:focus-within { background: #253047; box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }
  .flight-field > span, .flight-field > label { color: #a0adc9; font-size: 11px; }
  .flight-field input { background: transparent; border: 0; border-radius: 0; width: 100%; min-width: 0; padding: 0; color: #f2f3fc; font: 600 15px/1.4 var(--font-body); outline: none; }
  .flight-field input::placeholder { color: #bbc4dc; font-weight: 500; }
  .flight-field input[type="date"] { color-scheme: dark; font-size: 14px; }
  .flight-field small { color: #8493b3; font-size: 10px; }
  .flight-origin input { cursor: default; }
  .flight-passenger-button { text-align: start; background: transparent; padding: 0; border: 0; color: var(--text); font: 600 15px/1.4 var(--font-body); cursor: pointer; }
  .flight-passenger-button::after { content: '⌄'; float: right; color: var(--text-2); }
  .flight-submit { display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: 16px; font-size: 16px; white-space: nowrap; }
  .flight-submit > span { font-size: 22px; }
  .flight-form-footer { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 3px 0; font-size: 12px; color: var(--text-2); }
  .flight-oneway { display: flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
  .flight-oneway input, .flight-result-tools input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
  .flight-return.one-way input { opacity: .35; }
  .flight-form-error { grid-column: 1/-1; margin: 0; color: #ff967f; font-size: 13px; }
  .flight-form-error:empty { display: none; }
  .flight-suggestions, .flight-passenger-popover { position: absolute; top: calc(100% + 8px); background: #171f37; border: 1px solid #46516b; border-radius: 16px; box-shadow: 0 16px 40px #03061380; z-index: 8; }
  .flight-suggestions { left: 0; width: max(100%,320px); max-height: 310px; overflow-y: auto; padding: 7px; }
  .flight-suggestions button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 10px; padding: 11px; background: transparent; color: var(--text); text-align: start; cursor: pointer; }
  .flight-suggestions button:hover, .flight-suggestions button[aria-selected="true"] { background: #2a3550; }
  .flight-destination-icon { font-size: 20px; color: #61ccef; width: 26px; flex: none; }
  .flight-suggestions button > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
  .flight-suggestions b { font-size: 13px; }
  .flight-suggestions small { color: #99a6c2; font-size: 11px; }
  .flight-iata { color: #94a0bd; font-size: 11px; }
  .flight-suggestions p { font-size: 12px; color: var(--text-2); padding: 8px; }
  .flight-passenger-popover { right: 0; width: 320px; max-height: 370px; overflow-y: auto; padding: 20px; }
  .flight-passenger-popover h3 { margin: 0 0 20px; font-size: 17px; }
  .flight-passenger-popover .guest-stepper { margin-bottom: 18px; }
  .flight-passenger-popover .guest-stepper b { font-size: 13px; }
  .flight-passenger-popover .guest-stepper small { font-size: 11px; }
  .flight-passenger-popover .guest-stepper button { border: 1px solid #46516b; color: var(--accent); background: transparent; border-radius: 9px; height: 34px; cursor: pointer; }
  .flight-passenger-popover .guest-stepper button:disabled { opacity: .3; }
  .flight-passengers-done { width: 100%; margin-top: 10px; }
  .flight-child-ages { display: grid; gap: 10px; }
  .flight-child-ages label { display: grid; gap: 5px; font-size: 11px; color: var(--text-2); }
  .flight-child-ages select { width: 100%; padding: 9px 12px; background: #0f162d; }
  .flight-popular { margin: 33px 0 6px; }
  .flight-popular > span { font-size: 12px; color: var(--text-2); }
  .flight-popular-cities { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 12px; }
  .flight-popular-city { display: flex; justify-content: space-between; align-items: center; padding: 18px; border: 1px solid #343e57; border-radius: 13px; background: linear-gradient(115deg,#202a4160,#181f3460); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; }
  .flight-popular-city:hover { border-color: var(--accent); }
  .flight-popular-city span { color: var(--gold); }
  .flight-result-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; }
  .flight-result-heading h3 { font-size: 22px; letter-spacing: -.02em; margin: 7px 0; }
  .flight-result-heading p, .flight-result-count { color: var(--text-2); font-size: 12px; margin: 0; }
  .flight-result-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin: 22px 0 12px; }
  .flight-result-tools > label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .flight-cache-note { color: #929fba; font-size: 11px; line-height: 1.6; margin: 12px 0; }
  .flight-ticket-list { display: flex; flex-direction: column; gap: 14px; }
  .flight-ticket { display: grid; grid-template-columns: minmax(0,1fr) 220px; border: 1px solid #35405b; border-radius: 18px; background: #182037; }
  .flight-ticket-main { padding: 22px 26px; min-width: 0; }
  .flight-airline { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font-size: 12px; }
  .flight-airline > span { display: grid; place-items: center; width: 29px; height: 29px; color: #61ccef; border-radius: 8px; background: #61ccef15; font-size: 17px; }
  .flight-airline > small { color: var(--text-2); }
  .flight-ticket-route { display: grid; grid-template-columns: 80px minmax(70px,1fr) minmax(70px,110px); gap: 18px; align-items: center; }
  .flight-ticket-route + .flight-ticket-route { margin-top: 18px; padding-top: 16px; border-top: 1px solid #35405b; }
  .flight-ticket-route > div { display: flex; flex-direction: column; gap: 4px; }
  .flight-ticket-route strong { font-size: 23px; }
  .flight-ticket-route span, .flight-ticket-route small { color: var(--text-2); font-size: 11px; }
  .flight-ticket-line { align-items: center; }
  .flight-ticket-line i { position: relative; display: block; width: 100%; height: 1px; background: #53607a; margin: 5px 0; }
  .flight-ticket-line i::before, .flight-ticket-line i::after { content: ''; width: 5px; height: 5px; border-radius: 50%; position: absolute; top: -2px; background: #8492ae; }
  .flight-ticket-line i::before { left: 0; }.flight-ticket-line i::after { right: 0; }
  .flight-ticket-arrival { align-items: flex-end; text-align: end; }
  .flight-ticket-arrival b { font-size: 20px; }
  .flight-ticket-price { border-left: 1px dashed #46516b; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; }
  .flight-ticket-price > strong { font-size: 25px; color: var(--gold); white-space: nowrap; }
  .flight-ticket-price > span { color: var(--text-2); font-size: 11px; line-height: 1.5; }
  .flight-ticket-price .btn { flex: none; display: block; text-align: center; margin-top: 6px; border-radius: 12px; padding: 13px 10px; text-decoration: none; white-space: nowrap; font-size: 13px; }
  .flight-empty, .flight-loading { padding: 40px 24px; margin-top: 20px; text-align: center; border: 1px solid #35405b; border-radius: 18px; background: #18203780; }
  .flight-empty > span, .flight-loading > span { display: block; color: var(--gold); font-size: 30px; margin-bottom: 15px; }
  .flight-empty h3, .flight-loading h3 { margin: 0 0 10px; font-size: 20px; }
  .flight-empty p, .flight-loading p { margin: 0 auto; color: var(--text-2); font-size: 13px; line-height: 1.6; max-width: 500px; }
  @media(max-width:1150px){
    .flight-form { grid-template-columns: minmax(0,1fr); }
    .flight-submit { min-height: 54px; }
    .flight-fields { grid-template-columns: minmax(120px,1fr) minmax(160px,1.4fr) repeat(2,minmax(120px,1fr)) minmax(150px,1fr); }
  }
  @media(max-width:760px){
    .modal .box.flight-box { max-height: 94dvh; }
    .flight-box header { padding: 18px 18px 8px; }
    .flight-box .body { padding: 0 18px 22px; min-height: 0; }
    .flight-hero { padding: 16px 0 22px; }
    .flight-hero h2 { font-size: 27px; max-width: 280px; }
    .flight-hero p { font-size: 12px; line-height: 1.6; }
    .flight-eyebrow { font-size: 9px; letter-spacing: .08em; }
    .flight-hero::after { right: -65px; }
    .flight-fields { grid-template-columns: repeat(2,minmax(0,1fr)); border: 0; background: transparent; gap: 8px; }
    .flight-field { border: 1px solid #414b63; background: #1d263e; border-radius: 12px; padding: 12px; min-height: 78px; }
    .flight-field:last-child { border: 1px solid #414b63; }
    .flight-origin, .flight-destination, .flight-passengers { grid-column: 1/-1; }
    .flight-origin { min-height: 84px; }
    .flight-field input { font-size: 14px; }
    .flight-field input[type="date"] { font-size: 12px; }
    .flight-suggestions { width: 100%; max-height: 270px; }
    .flight-passenger-popover { width: min(320px,100%); }
    .flight-popular { margin-top: 24px; }
    .flight-popular-cities { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .flight-popular-city { padding: 14px; font-size: 12px; }
    .flight-form-footer { font-size: 11px; }
    .flight-result-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .flight-result-heading h3 { font-size: 21px; }
    .flight-ticket { grid-template-columns: minmax(0,1fr); }
    .flight-ticket-main { padding: 18px; }
    .flight-ticket-price { border-left: 0; border-top: 1px dashed #46516b; padding: 18px; }
    .flight-ticket-route { gap: 10px; grid-template-columns: 63px minmax(55px,1fr) minmax(55px,85px); }
    .flight-ticket-route strong { font-size: 20px; }
    .flight-ticket-arrival b { font-size: 17px; }
  }

  /* Full-viewport photo viewer; the gallery toolbar stays available above the image. */
  .memory-gallery footer[hidden] { display: none; }
  .memory-gallery.gallery-detail > .gallery-toolbar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 20px; right: 20px; z-index: 3; pointer-events: none; }
  .memory-gallery.gallery-detail > .gallery-toolbar > * { pointer-events: auto; }
  .memory-gallery.gallery-detail .gallery-content { position: absolute; inset: 0; overflow: hidden; }
  .memory-gallery.gallery-detail .gallery-stage { position: relative; width: 100%; height: 100%; min-height: 0; gap: 0; touch-action: pan-y pinch-zoom; user-select: none; }
  .memory-gallery.gallery-detail .gallery-stage:has(> img) { touch-action: none; }
  .memory-gallery.gallery-detail .gallery-stage img, .memory-gallery.gallery-detail .gallery-stage video { width: 100%; height: 100%; max-width: 100%; max-height: 100dvh; object-fit: contain; }
  .memory-gallery.gallery-detail .gallery-stage > button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 64px; min-width: 44px; padding: 0; border-radius: 14px; background: rgba(26,20,38,.38); color: var(--accent); }
  .memory-gallery.gallery-detail #galleryPrev { left: max(12px, env(safe-area-inset-left)); }
  .memory-gallery.gallery-detail #galleryNext { right: max(12px, env(safe-area-inset-right)); }
  .memory-gallery.gallery-detail .gallery-stage > button:disabled { opacity: .25; }
  @media(max-width:650px) { .memory-gallery.gallery-detail > .gallery-toolbar { left: 12px; right: 12px; } }
/* Gallery controls stay in one bottom row; popovers float above the glass. */
.memory-gallery > .gallery-toolbar,
.memory-gallery.gallery-detail > .gallery-toolbar {
  position:absolute;top:auto;bottom:max(14px,env(safe-area-inset-bottom));
  left:50%;right:auto;transform:translateX(-50%);z-index:6;
  width:min(350px,calc(100% - 24px));padding:10px 14px;box-sizing:border-box;
  flex-wrap:nowrap;pointer-events:auto;border-radius:28px;
  border:1px solid rgba(255,239,207,.24);
  background:linear-gradient(125deg,rgba(87,51,80,.78),rgba(21,24,45,.84));
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:inset 0 1px 1px rgba(255,245,219,.18),0 8px 24px rgba(0,0,0,.3);
}
.memory-gallery .gallery-accessible-title {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.memory-gallery .gallery-actions {width:100%;margin:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:10px;align-items:center}
.memory-gallery .gallery-actions > .film-shortcut,
.memory-gallery .gallery-menu-control > .film-shortcut,
.memory-gallery .gallery-actions .memory-date-toggle {width:44px;height:44px;min-width:44px;padding:9px;box-sizing:border-box;border-radius:15px;flex-shrink:0}
.memory-gallery .memory-date-toggle svg {width:24px;height:24px;display:block}
.memory-gallery .gallery-actions .memory-date-control,
.memory-gallery .gallery-menu-control {position:static;flex:0 0 44px;width:44px;margin:0}
.memory-gallery .gallery-content {padding-bottom:90px;scroll-padding-bottom:100px}
.memory-gallery.gallery-detail .gallery-content {padding-bottom:0}
.memory-gallery .memory-date-panel,
.memory-gallery .gallery-menu-panel {
  position:absolute;top:auto;bottom:calc(100% + 12px);right:0;
  width:min(330px,calc(100vw - 24px));max-height:calc(100dvh - 115px);overflow:auto;
  box-sizing:border-box;border:1px solid rgba(255,239,207,.26);border-radius:24px;
  background:linear-gradient(140deg,rgba(61,39,63,.96),rgba(15,20,41,.97));
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 12px 36px #0006;
}
.memory-gallery .gallery-menu-panel {width:275px;padding:10px;display:grid;gap:4px}
.memory-gallery .gallery-menu-panel[hidden] {display:none}
.memory-gallery .gallery-menu-panel button {
  display:flex;align-items:center;gap:14px;width:100%;min-height:48px;text-align:left;
  padding:12px 16px;border:1px solid transparent;border-radius:14px;background:transparent;
  color:var(--cream,#fff0d2);font:inherit;cursor:pointer;
}
.memory-gallery .gallery-menu-panel button[hidden] {display:none}
.memory-gallery .gallery-menu-panel button span {font-size:25px;width:26px;text-align:center}
.memory-gallery .gallery-menu-panel button:hover,
.memory-gallery .gallery-menu-panel button[aria-pressed="true"] {background:rgba(255,239,207,.13);border-color:rgba(255,239,207,.25)}
.memory-gallery .gallery-menu-panel button:focus-visible {outline:2px solid #fff0d2;outline-offset:1px}
.memory-gallery #galleryMenu.filtered {border-color:#fff0d2;box-shadow:inset 0 0 12px #fff0d226}
@media(max-width:480px) {
  .memory-gallery > .gallery-toolbar,.memory-gallery.gallery-detail > .gallery-toolbar {padding:9px 12px}
}
.memory-gallery .gallery-menu-panel button svg {width:24px;height:24px;flex:0 0 24px}
/* Frame selection replaces the bottom source toolbar. */
.memory-gallery .gallery-selection-toggle {position:absolute;top:max(14px,env(safe-area-inset-top));right:18px;z-index:7;width:44px;height:44px;border-radius:15px}
.memory-gallery .gallery-selection-count {position:absolute;top:max(18px,env(safe-area-inset-top));left:18px;z-index:7;padding:10px 16px;border-radius:18px;background:rgba(31,25,48,.76);color:#fff0d2;backdrop-filter:blur(18px)}
.memory-gallery .gallery-selection-toggle[aria-pressed="true"] {border-color:#fff0d2;background:linear-gradient(145deg,#76536c,#3d304b)}
.memory-gallery .gallery-actions[hidden],.memory-gallery .gallery-selection-actions[hidden] {display:none}
.memory-gallery .gallery-selection-actions {width:100%;display:flex;align-items:center;justify-content:space-around;gap:12px}
.memory-gallery .gallery-selection-actions .film-shortcut {width:44px;height:44px;min-width:44px;border-radius:15px}
.memory-gallery .gallery-grid-item,.memory-gallery .gallery-stage > img,.memory-gallery .gallery-stage > video {-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Phone layout and native edge-to-edge insets; desktop material stays shared. */
@media (max-width: 860px) {
  :root { --top-h: calc(66px + env(safe-area-inset-top, 0px)); }
  .top { padding-top: calc(7px + env(safe-area-inset-top, 0px)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .top .brand span { display: inline; font-size: 15px; }
  .top .brand { gap: 8px; }
  :root:has(.selected-country:not([hidden])) { --top-h: calc(96px + env(safe-area-inset-top, 0px)); }
  .top .selected-country { top: auto; bottom: 8px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 28px); }
  .memory-welcome { left: max(16px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: 420px; padding: 22px; }
  .memory-gallery { padding-top: max(12px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  body.memory-mode .film { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
  .film .strip, .gallery-strip { overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .film .strip > *, .gallery-strip > * { scroll-snap-align: center; }
  .gallery-content { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .gallery-stage > img { transform-origin: center; }
  .gallery-stage[data-zoomed="true"] > button { opacity: .4; }
  :is(.zoomctl button, .film-shortcut, .gallery-stage button, #btnAva, #btnBack, #locationRetry) { min-width: 44px; min-height: 44px; }
  .memory-gallery .gallery-actions { gap: 6px; }
  .memory-gallery .gallery-toolbar { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); }
}
@media (max-width: 360px) {
  .top .brand span { display: none; }
  .memory-gallery .gallery-actions { gap: 2px; padding: 7px; }
}
@media (max-height: 500px) and (max-width: 1000px) {
  .memory-welcome { width: min(360px, 60%); padding: 16px; }
  .memory-gallery .gallery-strip { max-height: 48px; }
}

/* Web globe controls: compact touch film, with a single shared date picker. */
.header-memory-period { display: none; }
@media (min-width: 861px) {
  .film #memoryActions { display: none; }
}
@media (max-width: 860px) {
  body.memory-mode .top { flex-wrap: nowrap; gap: 8px; }
  body.memory-mode .top .brand { flex: none; }
  body.memory-mode .top .brand > span { display: none; }
  body.memory-mode .header-memory-period:not([hidden]) { display: flex; flex: none; align-items: center; gap: 6px; order: 0; margin-right: auto; }
  body.memory-mode.memory-filters-in-header .years { display: none; }
  body.memory-mode.memory-filters-in-header .top:has(.selected-country:not([hidden])) { align-items: flex-start; }
  .header-memory-period #yearList { margin: 0; flex: none; }
  .header-memory-period .memory-tools { display: flex; flex-wrap: nowrap; gap: 4px; }
  .header-memory-period .memory-button-magnet { display: inline-flex; flex: none; border-radius: 999px; }
  .header-memory-period .memory-tools button { min-width: 44px; min-height: 44px; padding: 8px 9px; border-radius: 999px; border: 1px solid rgba(197,211,241,.26); font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; background: linear-gradient(155deg,rgba(65,76,107,.96),rgba(26,35,58,.98) 52%,rgba(14,21,41,.98)); box-shadow: inset 0 1px 2px rgba(238,244,255,.23),0 3px 7px rgba(0,0,0,.28); }
  .header-memory-period .memory-tools button[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: linear-gradient(155deg,#FFF9ED,var(--accent) 58%,#E5D0AF); }
  .header-memory-period .memory-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .header-memory-period .memory-date-control { width: auto; margin: 0; }
  .header-memory-period .memory-date-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 14px; }
  .header-memory-period .memory-date-toggle svg { width: 24px; height: 24px; }
  .header-memory-period .memory-date-panel { position: fixed; top: calc(var(--top-h) + 8px); left: max(12px,env(safe-area-inset-left)); z-index: 1; width: min(340px,calc(100vw - 24px)); box-sizing: border-box; max-height: calc(100dvh - var(--top-h) - 24px); overflow-y: auto; margin: 0; background: var(--panel-solid); box-shadow: 0 16px 40px #0007; }
  body.memory-mode .years { right: auto; width: max-content; max-width: calc(100% - 28px); max-height: none; padding: 5px; gap: 0; border-radius: 18px; animation: none; transform: none; overflow: visible; }
  body.memory-mode .years .tally { display: none; }
  body.memory-mode .years .memory-tools { flex-wrap: nowrap; gap: 5px; }
  body.memory-mode .years .memory-tools button { min-height: 44px; padding: 8px 12px; font-size: 12px; }
  body.memory-mode .film { gap: 8px; padding: 15px 8px 8px; border-radius: 22px; animation: none; transform: none; touch-action: pan-x pinch-zoom; }
  .film::before { content: ''; position: absolute; top: 5px; left: calc(50% - 16px); width: 32px; height: 3px; border-radius: 4px; background: rgba(var(--accent-rgb),.45); pointer-events: none; }
  .film #memoryActions { display: flex; order: 0; margin: 0; }
  .film .camera-shutter { transform: none; }
  .film .cap { order: 1; }
  .film .cap:has(#filmBack:not([hidden])) { flex: none; width: 44px; }
  .film #filmBack { width: 44px; height: 44px; }
  .film .strip { order: 2; align-items: center; touch-action: pan-x pinch-zoom; }
  .film .strip img, .film .strip .ph,
  .film .strip .film-country, .film .strip .film-country > img:not(.country-flag) { width: 60px; height: 60px; }
  .film .film-country-name { font-size: 9px; padding: 10px 3px 3px; }
  .film .film-country-count { right: 3px; top: 3px; min-width: 16px; font-size: 10px; padding: 0 3px; }
  .film .film-shortcuts { order: 3; flex-direction: row; gap: 5px; }
  .film .film-shortcut { width: 44px; height: 44px; }
  .film .film-shortcut-tip { bottom: calc(100% + 10px); top: auto; left: auto; right: 0; transform: none; }
  /* Keep an equivalent keyboard/screen-reader action without a visible expand icon. */
  .film #filmExpand { position: absolute; width: 1px; min-width: 0; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; }
  .film #filmExpand:focus-visible { width: 44px; min-width: 44px; height: 44px; margin: 0; padding: 8px; left: 8px; top: -52px; clip-path: none; overflow: visible; background: var(--panel-solid); outline: 2px solid var(--accent); }
}
@media (max-width: 400px) {
  body.memory-mode.memory-filters-in-header .top { gap: 3px; }
  body.memory-mode.memory-filters-in-header .top-right { gap: 4px; }
  body.memory-mode.memory-filters-in-header .top-right .lang-btn { width: 44px; height: 44px; padding: 0; gap: 2px; justify-content: center; }
  body.memory-mode.memory-filters-in-header .header-memory-period { gap: 3px; }
  .header-memory-period .memory-tools button { padding-inline: 6px; font-size: 11px; }
}
.memory-gallery .gallery-grid-item .gallery-selection-check {display:none;position:absolute;top:8px;left:8px;right:auto;bottom:auto;width:26px;height:26px;border:2px solid #fff0d2;border-radius:50%;background:#33263b;color:transparent;font-size:18px;line-height:22px;text-align:center;padding:0;box-sizing:border-box}
.memory-gallery.gallery-selecting .gallery-grid-item .gallery-selection-check {display:block}
.memory-gallery .gallery-grid-item.is-selected {outline:3px solid #fff0d2;outline-offset:-3px}
.memory-gallery .gallery-grid-item.is-selected .gallery-selection-check {color:#33263b;background:#fff0d2}
.memory-gallery .gallery-share-panel {max-width:calc(100vw - 32px);padding:14px;overflow-wrap:anywhere}
.memory-gallery .gallery-share-panel p {font-size:14px;margin:4px 6px 12px}
.memory-gallery .gallery-share-panel a {display:block;white-space:normal;text-align:left;margin:6px 0;overflow-wrap:anywhere}
.memory-gallery:not(.gallery-detail) .gallery-content {padding-top:48px}