/* ============================================================
   INVME 2030 — "Presence" design system  (ISOLATED — Plans only)
   Self-contained. Loaded ONLY by events/userevent_list_2030.html.
   Editing this file changes the Plans page ONLY — base.html and the
   rest of the site (Socialfolio) are never touched.
   Source: Claude Design handoff "invme 2030.html", recreated as CSS.
   ============================================================ */

/* Inter is linked from the <head> of base_2030.html (parallel download), not @imported here. */

/* ---------- `hidden` MUST WIN ----------
   The HTML `hidden` attribute hides through the browser rule [hidden]{display:none},
   which ANY component rule setting `display` outranks — and most of this file sets
   display. Without this line an element marked hidden sits on screen while every check
   that asks `el.hidden` answers True, so the bug survives both review and tests.
   Two live examples it fixes: the match overlay covered the whole deck from page load,
   and the sidebar's "Install app" button (class .pill) was shown to every desktop
   visitor even though nothing had offered an install. !important is the point: this has
   to outrank the components, exactly as normalize/preflight do it. */
.dk2030 [hidden]{display:none !important;}
.dk-glassdef{position:absolute;width:0;height:0;overflow:hidden;}

/* ---------- ROOT SURFACE (what iOS 26 samples for its glass bars) ---------- */
html,body{background-color:#141414;margin:0;}
html{color-scheme:dark;}
html[data-theme="light"],html[data-theme="light"] body{background-color:#EDEEF0;}
html[data-theme="light"]{color-scheme:light;}
/* ---------- TOKENS ---------- */
.dk2030{
  /* VK neutral dark (owner 27.09, docs/research/design/vk-migration): page #141414, content #222, field #292929 —
     was a blue-tinted #0a0a12 / #12121c / #1a1a27 of our own */
  --ink:#141414; --bg:#141414; --s1:#222222; --s2:#292929; --s3:#333333;
  --glass:rgba(41,41,41,.72); --glass-2:rgba(34,34,34,.86);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12);
  --hover:rgba(255,255,255,.04); --press:rgba(255,255,255,.08); --vk-overlay:rgba(0,0,0,.4);
  /* t3 measured 2026-09-08: #62627a gave 3.14:1 on a card — below AA for small text,
     and t3 carries dates, hints and section labels, not decoration. #82829c is 4.98
     on the card and 5.28 on the page, still clearly dimmer than t2 (6.84). */
  /* VK text_primary; t2/t3 are OUR ladder: VK's own secondary/tertiary are below AA (4.14 / 2.73 on #222) */
  --t1:#E1E3E6; --t2:#A0A0A0; --t3:#909090;
  /* classic INVME blue (#007AFF) — replaces the 2030 cyan accent */
  /* the brand blue keeps its fill (#0071E3 under white) — as TEXT on the #222 card #007AFF is 3.96:1, so links and icons
     take the dark-mode variant of the same blue (as Apple's #0A84FF does): #3390FF, 4.98 on the card */
  --a1:#3390FF; --a2:#71AAEB; --signal:var(--a1); --glow:rgba(0,122,255,.42);
  /* a FILL under white text (buttons, chosen chips): #007AFF gave 4.02:1 with white — below AA; #0071E3 4.70 (VK audit 27.09) */
  --a1-fill:#0071E3; --count:#E0283A;
  --now:#34e29b; --now-soft:rgba(52,226,155,.16); --warn:#ffb340; --danger:#FF5C5C;
  --male:#5aa2ff; --female:#ff5e9a;
  /* generative cover palette (photo-less cards/tiles) + its label color — theme-aware */
  --cov1:#1f2b46; --cov2:#2a1f3e; --cov3:#102a2e; --cov4:#2e1f24; --cov5:#1f2e22; --cov6:#241f3a;
  --covt:rgba(255,255,255,.92);
  --r-card:12px; --r-lg:12px; --r-pill:999px;
  /* VK geometry (owner 2026-09-24): paper 12, controls 8, a 0.33 px hairline instead of a border */
  --r-ctl:8px; --edge:0 0 0 .33px var(--line-2);
  --pad:16px; --feed-gap:14px;
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --dur:.34s;
}
/* light theme (toggled on .dk2030[data-theme] or html[data-theme] for FOUC-free boot) */
.dk2030[data-theme="light"],
html[data-theme="light"] .dk2030{
  /* VK light: page #EDEEF0, content white, secondary #F0F2F5; text t1 near-black, t2/t3 a safe VK-toned ladder */
  --ink:#EDEEF0; --bg:#EDEEF0; --s1:#ffffff; --s2:#ffffff; --s3:#F0F2F5;
  --glass:rgba(255,255,255,.8); --glass-2:rgba(255,255,255,.9);
  --line:rgba(0,0,0,.08); --line-2:rgba(0,0,0,.12);
  --hover:rgba(0,16,61,.04); --press:rgba(0,16,61,.08);
  --t1:#000000; --t2:#4F5966; --t3:#626D7A;   /* was #9a9ab0 — 2.75:1 on white; VK's #818C99 is 3.42 */
  /* The signal colours were never given a light variant, and they are TEXT as often
     as they are dots: «Free» in #34e29b measured 1.68:1 on white — the word was there
     and unreadable. Dark keeps the neon; light gets the same hues at a readable
     lightness (5.35:1 and 4.9:1), including as a badge ground under white text. */
  --now:#107a52; --now-soft:rgba(16,122,82,.12); --warn:#8a5a00; --danger:#C62828;
  /* the SECOND accent is the lighter one, which only works on a dark ground:
     «Boating» on a trip card measured 2.94:1 on white. On light it has to go the
     other way — darker than the brand blue, not lighter. */
  --a2:#0057b8;
  /* ⚠️ The brand blue stays #007AFF — in the DARK theme, which is where the design
     was authored and what almost everyone sees. On a white ground the same blue is
     4.02:1 as text and 3.53:1 on the tinted surface, i.e. below AA for every link
     and every filled button; #0062CC is the same hue two steps down and passes at
     5.8 / 5.09, white-on-it included. Owner's call to revert — one line. */
  --a1:#0062CC; --glow:rgba(0,98,204,.34); --a1-fill:#0062CC; --count:#E0283A;
  --cov1:#dbe5f8; --cov2:#e7def6; --cov3:#d7ece6; --cov4:#f6e2de; --cov5:#dfeede; --cov6:#e4e0f3;
  --covt:#46527a;
}
.dk2030[data-motion="off"] *{animation:none!important;transition:none!important;}

/* ---------- RESET / BASE ---------- */
.dk2030 *{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Type, after vk.com (owner 2026-09-23: «это же социальная сеть — за пример возьми vk.com»): the reader's own system
   face — SF on Apple, Roboto on Android, Segoe UI on Windows — like VK's; weights 400 · 500 · 600 only; normal tracking
   (a system face is spaced for its sizes). The Inter download (563 KB) is gone. */
.dk2030{
  --font:-apple-system,BlinkMacSystemFont,"Roboto","Helvetica Neue","Segoe UI",Geneva,Arial,sans-serif;
  position:fixed;inset:0;overflow:hidden;background:var(--ink);color:var(--t1);
  font-family:var(--font);letter-spacing:normal;
}
.dk2030 button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.dk2030 a{color:inherit;text-decoration:none;}
.dk2030 ::selection{background:var(--a1-fill);color:#fff;}
.dk2030 .disp{font-family:var(--font);letter-spacing:normal;}
.dk2030 img{max-width:100%;display:block;}

/* ---------- PRIMITIVES ---------- */
.dk2030 .pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--r-ctl);font-weight:600;font-size:13px;padding:9px 16px;white-space:nowrap;
  transition:transform .15s var(--spring),background .15s,box-shadow .2s;}
.dk2030 .pill:active{transform:scale(.95);}
.dk2030 .pill-accent{background:var(--a1-fill);color:#fff;box-shadow:0 8px 24px -8px var(--glow);}
.dk2030 .pill-ghost{background:var(--s2);color:var(--t1);border:1px solid var(--line-2);}
.dk2030 .pill-ghost:hover{background:var(--s3);}
.dk2030 .pill-sm{padding:6px 12px;font-size:12px;}

.dk2030 .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-ctl);
  font-size:13px;font-weight:500;color:var(--t2);background:var(--s1);border:1px solid var(--line);
  white-space:nowrap;transition:all .16s var(--ease);cursor:pointer;}
.dk2030 .chip:hover{color:var(--t1);border-color:var(--line-2);}
/* A selected FILTER is inverted neutral, never the accent: the accent marks the current
   section (.dk-tab.on) and the primary action (.pill-accent), nothing else above the fold. */
.dk2030 .chip.on{color:var(--bg);background:var(--t1);border-color:var(--t1);font-weight:600;}

.dk2030 .icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--t1);background:var(--glass);border:1px solid var(--line);transition:background .15s,transform .15s;}
.dk2030 .icon-btn:active{transform:scale(.92);}
.dk2030 .icon-btn svg{width:19px;height:19px;}

/* avatars */
.dk2030 .av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;
  font-family:var(--font);flex:none;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.dk2030 .av-on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:9px;min-height:9px;
  border-radius:50%;background:var(--now);border:2px solid var(--bg);box-shadow:0 0 8px var(--now);}
.dk2030 .avstack{display:flex;align-items:center;}
.dk2030 .avstack .av,.dk2030 .avstack img{border:2px solid var(--bg);margin-left:-9px;border-radius:50%;background:var(--s3);}
.dk2030 .avstack .av:first-child,.dk2030 .avstack img:first-child{margin-left:0;}
.dk2030 .avstack .more{margin-left:-9px;border:2px solid var(--bg);background:var(--s3);color:var(--t1);font-size:11px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--font);}

/* live / now badge */
/* The badge is read OVER A PHOTO as often as over a card (the card hero, the row thumb),
   so it cannot borrow the theme's ground: in light theme the dark-green text on a 12%
   wash sat on whatever the poster happened to be. Its own dark chip works on both. */
.dk2030 .live{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap;
  background:rgba(8,10,18,.72);color:#4bf0ae;font-weight:600;font-size:12px;letter-spacing:.01em;}
.dk2030 .live-dot{width:7px;height:7px;border-radius:50%;background:#4bf0ae;animation:livePulse 1.8s ease-out infinite;flex:none;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(52,226,155,.6);}70%{box-shadow:0 0 0 7px rgba(52,226,155,0);}100%{box-shadow:0 0 0 0 rgba(52,226,155,0);}}
.dk2030 .dk-card h4 .live-dot{background:var(--now);}   /* on a card, not a photo */
/* In a text row (the Coming up rail) the badge is a word in the signal colour, not a chip:
   the dark chip is for photos only (owner, 2026-09-16: «фон чёрный не вяжется»). */
.dk2030 .dk-coming .live{background:none;padding:0;color:var(--now);}
.dk2030 .dk-coming .live-dot{background:var(--now);}
.dk2030 .signal-text{color:var(--a1);}
.dk2030 .gx{color:var(--male);}.dk2030 .gx.f{color:var(--female);}
.dk2030 .presence-dot{width:7px;height:7px;border-radius:50%;background:var(--now);box-shadow:0 0 7px var(--now);flex:none;}

/* ---------- DESKTOP 3-COLUMN SHELL ---------- */
/* Column widths copied from X/Twitter (measured live): center 600 + right 350 are
   FIXED; the left nav flexes (275 wide → shrinks on narrower screens), exactly like X.
   Center track 632 = 600 content + 2×16 padding. */
.dk2030 .dk-shell{height:100%;max-width:1257px;width:100%;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,275px) 632px 350px;background:var(--bg);}
.dk2030 [data-rail-copy]{display:none;}
@media(max-width:1240px){.dk2030 [data-rail-copy]{display:block;} .dk2030 .dk-shell{grid-template-columns:minmax(0,275px) minmax(0,1fr);} .dk2030 .dk-right{display:none!important;} .dk2030 .dk-scroll{padding:88px max(16px, calc((100% - 600px) / 2)) 64px;}}
@media(max-width:880px){.dk2030 .dk-shell{grid-template-columns:80px minmax(0,1fr);} .dk2030 .dk-brand{justify-content:center;padding-left:0;padding-right:0;} .dk2030 .dk-navi span,.dk2030 .dk-create span,.dk2030 .dk-sideprof .pi,.dk2030 .dk-logo .lg{display:none;} .dk2030 .dk-logo .mk{display:block;} .dk2030 .dk-create{justify-content:center;} .dk2030 .dk-logo{justify-content:center;}}
@media(max-width:600px){.dk2030 .dk-shell{grid-template-columns:minmax(0,1fr);} .dk2030 .dk-side{display:none;}}

/* sidebar */
.dk2030 .dk-side{border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:3px;min-width:0;}
/* Logo and the place picker share the top row of the left menu (owner's call: the island
   carries the brand, the menu carries the filter). */
.dk2030 .dk-brand{display:flex;align-items:center;gap:10px;padding:2px 12px 18px;min-width:0;}
.dk2030 .dk-logo{display:flex;align-items:center;gap:9px;padding:0;flex:none;}
.dk2030 .dk-logo img{display:block;height:26px;width:auto;}
.dk2030 .dk-logo .lg{height:24px;}   /* the wordmark alone: its lettering fills more of the picture */
.dk2030 .dk-logo .mk{display:none;}
.dk2030 .dk-nav{display:flex;flex-direction:column;gap:2px;}
.dk2030 .dk-navi{display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:12px;color:var(--t2);font-size:15px;font-weight:500;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;}
.dk2030 .dk-navi svg{width:22px;height:22px;flex:none;}
.dk2030 .dk-navi:hover{background:var(--s1);color:var(--t1);}
.dk2030 .dk-navi.on{background:var(--s2);color:var(--t1);font-weight:600;}
.dk2030 .dk-navi .nb{margin-left:auto;min-width:19px;height:19px;border-radius:8px;background:var(--a1-fill);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 5px;}
.dk2030 .dk-create{margin:16px 4px 0;padding:12px 16px;font-size:14px;}
/* Utility classes the templates already use but nothing ever defined: without them a
   row meant to scroll just overflows its column and gets clipped by an ancestor. */
.dk2030 .overflow-x-auto{overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch;}
.dk2030 .scroll-none{scrollbar-width:none;}
.dk2030 .scroll-none::-webkit-scrollbar{display:none;}

/* A flex column does not stretch a child that has auto cross-axis margins, so these
   were sized by their widest content (a chip row) instead of the column — 530px of
   article inside a 375px viewport, clipped by .dk-main{overflow:hidden} with no way
   to scroll to the rest. */
.dk2030 .dk-listing,.dk2030 .blg,.dk2030 .blg-index{width:100%;min-width:0;}

/* Sidebar account chip. Named apart from .dk-prof (the profile page card) on purpose:
   they collided on equal specificity and the card silently inherited display:flex. */
.dk2030 .dk-sideprof{margin-top:auto;display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;border:1px solid var(--line);}
/* In the 80px icon rail the row (avatar + theme + sign out) does not fit and spilled out
   over the feed. Stack it. Placed AFTER the base rule on purpose: gap/padding are set
   there too, and an earlier media block would lose the cascade. */
@media(max-width:880px){
  .dk2030 .dk-sideprof{flex-direction:column;gap:8px;padding:8px 4px;}
  .dk2030 .dk-sideprof>a{flex:none;justify-content:center;}
}
@media(max-width:600px){
  .dk2030 .dk-sideprof{flex-direction:row;gap:11px;padding:10px;}
}

/* main */
.dk2030 .dk-main{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;position:relative;border-right:1px solid var(--line);}
/* floating "island" top bar — detached capsule that hides on scroll-down, returns on scroll-up */
.dk2030 .dk-top{position:absolute;top:12px;left:16px;right:16px;z-index:40;
  display:flex;align-items:center;gap:13px;padding:8px 10px 8px 18px;
  border-radius:18px;background:var(--glass-2);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--line-2);box-shadow:0 18px 44px -18px rgba(0,0,0,.55);
  transition:transform .4s var(--ease),opacity .3s var(--ease);}
.dk2030 .dk-top.tuck{transform:translateY(calc(-100% - 20px));opacity:0;pointer-events:none;}
/* The brand + place cluster. Above 600px the wrapper is display:contents, so the picker
   stays a direct flex child of the island and the desktop row is untouched; on a phone the
   wrapper becomes the centred two-line app-bar title (logo over location). */
.dk2030 .dk-topmid{display:contents;}
@media(max-width:880px){
  .dk2030 .dk-topmid{display:flex;flex-direction:column;align-items:flex-start;
    gap:1px;min-width:0;}
  .dk2030 .dk-kick{font-size:11px;font-weight:500;color:var(--t3);}
}
.dk2030 .dk-topbrand{display:none;}
.dk2030 .dk-loc{display:flex;flex-direction:column;min-width:0;}
/* The island's page label. Above 880px it is the only thing in that slot (the picker lives
   in the menu), so it carries the weight; below, it goes back to being an eyebrow over the
   picker copy. */
.dk2030 .dk-kick{font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);white-space:nowrap;}
@media(min-width:881px){.dk2030 .dk-kick{font-size:12px;color:var(--t2);}}
.dk2030 .dk-loc .v{font-family:var(--font);font-weight:600;font-size:17px;display:flex;align-items:center;gap:5px;}
.dk2030 .dk-loc .v .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* In the menu it is a control sitting beside the logo, not a page title. */
.dk2030 .loc-side>summary{padding:6px 10px;border-radius:var(--r-ctl);background:var(--s2);
  border:1px solid var(--line);min-width:0;transition:border-color .15s,color .15s;}
.dk2030 .loc-side>summary:hover{border-color:var(--line-2);color:var(--a1);}
.dk2030 .loc-side .dk-loc .v{font-size:13px;font-weight:600;}
.dk2030 .loc-side .dk-loc .v svg{width:14px;height:14px;}
/* Search folds into an icon; a tap unfolds the field with a spring (flex-grow +
   width are both animated). One row always — the old mobile 2-row bar squeezed
   the pill and truncated the location text. */
/* Sits WITH the city, not adrift. It used to carry margin-left:auto while
   .dk-top-right carries one too — two auto margins split the free space between them,
   which parked the collapsed search button in the middle of the island next to nothing.
   The right-hand actions keep their auto margin, so they stay pinned right. */
.dk2030 .dk-search{flex:0 1 auto;display:flex;align-items:center;margin-left:10px;
  transition:flex-grow .38s var(--ease);}
.dk2030 .dk-search.open{flex:1 1 auto;max-width:440px;}
/* Searching is a mode, not a widget: the row belongs to it. The city label and the
   intent chips step aside at every width (this used to happen only under 600px, so on a
   desktop the field opened into a 440px slot with the chips still holding the row). */
.dk2030 .dk-top.searching .loc-pop,
.dk2030 .dk-top.searching .dk-intent{display:none;}
.dk2030 .dk-top.searching .dk-search{max-width:none;}
.dk2030 .dk-search-btn{flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:12px;background:var(--s1);color:var(--t2);cursor:pointer;
  transition:color .15s,border-color .15s;}
.dk2030 .dk-search-btn:hover{color:var(--t1);border-color:var(--line-2);}
.dk2030 .dk-search.open .dk-search-btn{color:var(--a1);border-color:var(--a1);}
.dk2030 .dk-search input{flex:0 1 0%;width:0;min-width:0;opacity:0;padding:10px 0;margin-left:0;
  background:var(--s1);border:1px solid transparent;border-radius:12px;color:var(--t1);
  font:inherit;font-size:14px;outline:none;pointer-events:none;
  transition:flex-grow .38s var(--ease),opacity .25s ease,padding .38s var(--ease),margin-left .38s var(--ease),border-color .15s;}
.dk2030 .dk-search.open input{flex:1 1 auto;opacity:1;padding:10px 14px;margin-left:8px;
  border-color:var(--line);pointer-events:auto;}
.dk2030 .dk-search.open input:focus{border-color:var(--a1);}
.dk2030 .dk-search input::placeholder{color:var(--t3);}
/* Quick intent strip — fills the island's dead middle with the one question that
   matters here ("who is this plan looking for"). Hidden below 880px, where the island
   is already a two-row app bar and the ⚙ panel carries the same filter. */
.dk2030 .dk-intent{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;margin-left:6px;
  overflow-x:auto;scrollbar-width:none;}
.dk2030 .dk-intent::-webkit-scrollbar{display:none;}
.dk2030 .dk-intent-ico{flex:none;color:var(--t3);}
.dk2030 .dk-intent-l{flex:none;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--t3);}
.dk2030 .dk-intent-i{flex:none;padding:5px 9px;border-radius:var(--r-ctl);font-size:12px;
  font-weight:500;color:var(--t2);border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;}
.dk2030 .dk-intent-i:hover{background:var(--s3);color:var(--t1);}
.dk2030 .dk-intent-i.on{background:var(--a1-fill);border-color:var(--a1);color:#fff;font-weight:600;}
@media(max-width:880px){.dk2030 .dk-intent{display:none;}}

.dk2030 .dk-top-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
/* X's 600px content width = 632 track − 2×16 padding */
.dk2030 .dk-scroll{flex:1;overflow-y:auto;scrollbar-width:none;padding:88px 16px 64px;}
.dk2030 .dk-scroll::-webkit-scrollbar{display:none;}
.dk2030 .dk-catrow{display:flex;gap:8px;margin:4px 0 6px;flex-wrap:wrap;}
/* a row of chips that scrolls sideways on a phone says so: it fades at the edge instead of ending mid-word */
@media (max-width:600px){
  .dk2030 .dk-scroll > .dk-catrow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:28px;}
}
.dk2030 .dk-lede{margin:-4px 0 8px;font-size:14px;color:var(--t2);font-variant-numeric:tabular-nums;}
.dk2030 .chip .chip-dot{width:7px;height:7px;border-radius:50%;background:var(--now);display:inline-block;margin-right:6px;}
.dk2030 .chip.on .chip-dot{background:currentColor;}
/* Section tabs (Overview / Plans / What's on / …) are navigation, not filters, so they must
   not look like the chips under them: text with a 2px accent underline, one scroll row. */
.dk2030 .dk-tabs{display:flex;gap:2px;margin:2px 0 10px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;}
.dk2030 .dk-tabs::-webkit-scrollbar{display:none;}
.dk2030 .dk-tab{flex:0 0 auto;padding:9px 13px;font-size:14px;font-weight:500;color:var(--t2);
  border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;white-space:nowrap;transition:color .15s;}
.dk2030 .dk-tab:hover{color:var(--t1);}
.dk2030 .dk-tab.on{color:var(--t1);font-weight:600;border-color:var(--signal);}

/* Discover filters v2 — iOS segmented type + When/Category dropdowns + active chips */
.dk2030 .dk-filters2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 2px;}
.dk2030 .dk-seg{display:inline-flex;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-ctl);padding:3px;gap:2px;}
.dk2030 .dk-seg-i{padding:7px 14px;border-radius:var(--r-ctl);font-size:13px;font-weight:600;color:var(--t2);white-space:nowrap;transition:color .15s,background .15s;}
.dk2030 .dk-seg-i:hover{color:var(--t1);}
.dk2030 .dk-seg-i.on{background:var(--s3);color:var(--t1);}
.dk2030 .dk-refine{display:flex;gap:8px;flex-wrap:wrap;}
.dk2030 .dk-dd{position:relative;}
.dk2030 .dk-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:var(--r-ctl);font-size:13px;font-weight:600;color:var(--t1);
  background:var(--s1);border:1px solid var(--line);transition:all .15s var(--ease);}
.dk2030 .dk-dd>summary::-webkit-details-marker{display:none;}
.dk2030 .dk-dd>summary:hover{border-color:var(--line-2);}
.dk2030 .dk-dd>summary .cv{color:var(--t3);transition:transform .18s var(--ease);}
.dk2030 .dk-dd[open]>summary .cv{transform:rotate(180deg);}
.dk2030 .dk-dd>summary.on{background:color-mix(in srgb,var(--signal) 13%,transparent);border-color:transparent;color:var(--a1);}
.dk2030 .dk-dd>summary.on .cv{color:var(--a1);}
/* position:fixed, NOT absolute: .dk-scroll sets overflow-y:auto, which per spec makes
   overflow-x a clip container too — an absolutely-positioned menu loses whatever hangs
   outside it, and the right-anchored category grid lost its entire left column. Fixed
   escapes the clip; dkPlaceDD() in base_2030.html then keeps it under its summary. */
.dk2030 .dk-ddmenu{position:fixed;left:0;top:0;z-index:120;min-width:184px;padding:6px;
  border-radius:var(--r-card);background:var(--s1);border:0;
  box-shadow:var(--edge),0 22px 54px -16px rgba(0,0,0,.55);animation:screenIn .18s var(--ease);
  display:flex;flex-direction:column;gap:2px;max-height:min(62vh,460px);overflow-y:auto;}
.dk2030 .dk-ddmenu.dk-ddgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;
  width:min(370px,84vw);}
.dk2030 .dk-ddo{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;font-size:13px;
  color:var(--t2);white-space:nowrap;transition:background .12s,color .12s;}
.dk2030 .dk-ddo .cat-ico{width:18px;height:18px;flex:none;color:var(--a1);}
.dk2030 .dk-ddo:hover{background:var(--s2);color:var(--t1);}
.dk2030 .dk-ddo.on{background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--a1);font-weight:600;}
.dk2030 .dk-actchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:9px 0 2px;}
.dk2030 .dk-xchip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px 5px 11px;border-radius:var(--r-ctl);
  font-size:13px;font-weight:600;background:color-mix(in srgb,var(--signal) 12%,transparent);color:var(--a1);}
.dk2030 .dk-xchip svg{opacity:.7;transition:opacity .12s;}
.dk2030 .dk-xchip:hover svg{opacity:1;}
.dk2030 .dk-xclear{font-size:13px;color:var(--t3);font-weight:600;margin-left:2px;}
.dk2030 .dk-xclear:hover{color:var(--t1);}
@media(max-width:600px){
  .dk2030 .dk-seg{flex:1;}
  .dk2030 .dk-seg-i{flex:1;text-align:center;padding:8px 5px;}
  /* Dropdown menus become fixed bottom-sheets so the wide right-anchored category
     grid never clips off a narrow viewport (same pattern as the report popover). */
  .dk2030 .dk-ddmenu{position:fixed;left:12px;right:12px;top:auto;width:auto;min-width:0;
    bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;max-height:58vh;overflow-y:auto;}
  .dk2030 .dk-ddmenu.dk-ddgrid{left:12px;right:12px;width:auto;}
}

.dk2030 .dk-h{font-family:var(--font);font-weight:600;font-size:22px;letter-spacing:normal;margin:22px 0 14px;display:flex;align-items:center;gap:9px;}
.dk2030 .dk-h:first-child{margin-top:6px;}
.dk2030 .dk-feed{display:flex;flex-direction:column;gap:14px;}
/* PHOTO FRAMES — portrait shape, and NOTHING gets cropped.
   Owner, three times: "высоту подстраивай под изображение чтобы так не резало",
   "по краям делай все размыто чтобы полностью было видно", "используй портретные
   форматы фото а не прямоугольные". One pattern for every surface:
     · the frame is 4:5 (a phone shot — that is what people actually upload),
     · the real photo is object-fit:contain, so the whole picture survives,
     · a second copy of the SAME file (browser cache → one request) sits behind it
       blurred and cover-fitted, so the letterbox reads as depth, not as bars.
   Landscape shots keep their full width instead of losing their edges. */
.dk2030 .blurfill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(26px) saturate(1.35) brightness(.72);transform:scale(1.25);z-index:0;pointer-events:none;}
.dk2030 .shot{background:var(--s3);}
/* A .blurfill is position:absolute; inset:0 — it fills its CONTAINING block. Without a
   positioned frame around it, that block is the whole column, and overflow:hidden on the
   frame cannot clip a child it does not contain (measured on the organizer page: a
   789×1125 blur sheet under a 600×315 hero). The frame must be the containing block. */
.dk2030 .dk-org-cover.shot,.dk2030 .dk-artist-cover.shot{position:relative;}
.dk2030 .shot > img:not(.blurfill){position:relative;z-index:1;object-fit:contain;}
/* width:100% is load-bearing, not decoration: with an AUTO width, `aspect-ratio`
   + `max-height` makes the browser shrink the WIDTH to keep the ratio (a 600px
   modal got a 448px hero and a white column beside it). A definite width caps the
   height only — the frame still fills its card. */
.dk2030 .fcard-media.shot{width:100%;height:auto;aspect-ratio:4/5;max-height:520px;}
/* .portrait is kept as an orientation marker (guard test reads it); the frame itself
   no longer depends on it — every photo gets the same uncropped phone frame. */

/* ---------- SPATIAL MAP MODE ---------- */
/* Full-bleed map that fills the scroll area below the island top-bar. */
.dk2030 .dk-mapwrap{position:relative;border-radius:var(--r-card);overflow:hidden;border:0;
  background:var(--s1);height:calc(100dvh - 104px);min-height:420px;margin-top:2px;box-shadow:var(--edge);}
.dk2030 .dk-h.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.dk2030 .dk-map{position:absolute;inset:0;width:100%;height:100%;}
.dk2030 .dk-map .maplibregl-ctrl-group{border-radius:8px;overflow:hidden;}
/* Filter panel floating over the map — When + Category chip rows + a type-toggle legend.
   Container ignores pointer events so the map drags between rows; each row re-enables them. */
.dk2030 .dk-mapfilters{position:absolute;top:12px;left:12px;right:12px;z-index:4;
  display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.dk2030 .dk-mapfilters .mf-row{display:flex;gap:6px;overflow-x:auto;padding:1px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;pointer-events:auto;}
.dk2030 .dk-mapfilters .mf-row::-webkit-scrollbar{display:none;}
.dk2030 .mf-chip,.dk2030 .mf-legend .lg-i{flex:none;white-space:nowrap;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);
  background:var(--glass-2);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  color:var(--t2);font-size:13px;font-weight:600;letter-spacing:normal;padding:8px 13px;
  border-radius:var(--r-ctl);transition:background .15s,color .15s,border-color .15s,opacity .15s;}
.dk2030 .mf-chip.on{background:var(--a1-fill);border-color:var(--a1);color:#fff;}
.dk2030 .mf-legend{align-items:center;}
.dk2030 .mf-legend .lg-i{padding:7px 11px;font-weight:500;font-size:13px;}
.dk2030 .mf-legend .lg-i.on{color:var(--t1);}
.dk2030 .mf-legend .lg-i:not(.on){opacity:.4;}
.dk2030 .lg-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.dk2030 .mf-live{width:8px;height:8px;border-radius:50%;background:#35C061;box-shadow:0 0 0 3px rgba(53,192,97,.28);}
.dk2030 .mf-chip.on .mf-live{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35);}
.dk2030 .lg-count{margin-left:auto;align-self:center;font-size:12px;color:var(--t3);
  font-weight:600;white-space:nowrap;padding-right:2px;pointer-events:none;}
.dk2030 .mf-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--glass-2);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  color:var(--t2);font-size:13px;font-weight:600;letter-spacing:normal;padding:7px 11px;
  border-radius:var(--r-pill);white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
.dk2030 .mf-toggle svg{width:15px;height:15px;flex:none;}
.dk2030 .mf-toggle.on{background:var(--a1-fill);border-color:var(--a1);color:#fff;}
.dk2030 .mf-toggle .mf-chev{width:13px;height:13px;transition:transform .2s;}
.dk2030 .mf-toggle.on .mf-chev{transform:rotate(180deg);}
/* Resting state = one pill + a count, nothing else over the map. The opened sheet is
   a labelled card so three filter rows read as three questions, not as chip soup. */
.dk2030 .mf-bar{align-items:center;overflow:visible;}
.dk2030 .mf-secondary{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding:12px;
  width:min(420px,100%);box-sizing:border-box;background:var(--glass-2,var(--s2));
  border:0;border-radius:var(--r-card);box-shadow:var(--edge),0 12px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.dk2030 .mf-grp{display:flex;flex-direction:column;gap:6px;min-width:0;}
.dk2030 .mf-lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);}
.dk2030 .mf-secondary[hidden]{display:none;}
.dk2030 .dk-map-empty{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:6px;padding:24px;color:var(--t2);font-size:14px;
  background:var(--s1);}
.dk2030 .dk-map-empty svg{width:34px;height:34px;color:var(--t3);}
/* Custom marker pins (created in JS) */
.dk2030 .dk-pin{width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:2px solid #fff;box-shadow:0 3px 8px -1px rgba(0,0,0,.5);cursor:pointer;transition:transform .15s var(--spring);}
.dk2030 .dk-pin:hover{transform:rotate(-45deg) scale(1.25);}
.dk2030 .dk-pin-on{transform:rotate(-45deg) scale(1.45);z-index:3;
  box-shadow:0 0 0 4px color-mix(in srgb,#fff 26%,transparent),0 5px 12px -1px rgba(0,0,0,.6);}
/* Mini listing island — slides up from the bottom of the map when a pin is tapped */
.dk2030 .dk-map-sheet{position:absolute;left:50%;bottom:16px;z-index:5;
  width:min(440px,calc(100% - 24px));transform:translate(-50%,150%);opacity:0;pointer-events:none;
  background:var(--glass-2);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:0;border-radius:var(--r-card);box-shadow:var(--edge),0 24px 54px -16px rgba(0,0,0,.62);
  overflow:hidden;transition:transform .34s var(--spring),opacity .2s;}
.dk2030 .dk-map-sheet.on{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
.dk2030 .ms-link{display:flex;align-items:center;gap:12px;padding:11px 44px 11px 12px;text-decoration:none;}
.dk2030 .ms-cover{width:60px;height:60px;flex:none;border-radius:13px;background-size:cover;background-position:center;
  background-color:var(--s3);display:flex;align-items:center;justify-content:center;}
.dk2030 .ms-cover-blank{background:color-mix(in srgb,var(--c) 15%,var(--s2));color:var(--c);}
.dk2030 .ms-cover-blank svg{width:24px;height:24px;}
.dk2030 .ms-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.dk2030 .ms-cat{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.dk2030 .ms-ttl{font-size:15px;font-weight:600;color:var(--t1);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.dk2030 .ms-meta{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.dk2030 .ms-go{flex:none;width:30px;height:30px;border-radius:50%;background:var(--a1-fill);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -6px var(--glow);}
.dk2030 .ms-go svg{width:16px;height:16px;}
.dk2030 .ms-x{position:absolute;top:8px;right:9px;z-index:2;width:24px;height:24px;border-radius:50%;
  background:var(--s2);border:1px solid var(--line);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.dk2030 .ms-x svg{width:13px;height:13px;}
/* MapLibre popup, themed */
.maplibregl-popup.dk-pop .maplibregl-popup-content{background:var(--s2);color:var(--t1);border:1px solid var(--line-2);
  border-radius:12px;padding:10px 12px;box-shadow:0 14px 40px -12px rgba(0,0,0,.6);font-family:inherit;}
.maplibregl-popup.dk-pop .maplibregl-popup-tip{border-top-color:var(--s2);}
.maplibregl-popup.dk-pop .maplibregl-popup-close-button{color:var(--t2);font-size:17px;padding:0 5px;}
.dk-pop .pop-cat{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;}
.dk-pop .pop-ttl{display:block;font-size:14px;font-weight:600;color:var(--t1);margin:2px 0 6px;max-width:200px;}
.dk-pop .pop-go{font-size:13px;font-weight:600;color:var(--a1);text-decoration:none;}

/* ---------- COMMENTS inside the 2030 modal ----------
   Compat shim: the comment partials are classic-design (Tailwind utilities + light
   hex). The 2030 shell has no Tailwind, so we re-declare the finite set of utilities
   they use + remap the hardcoded colours to theme vars. Scoped to .dk-cmt so it can't
   leak into the rest of the 2030 layout. */
.dk2030 .dk-cmt{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.dk2030 .dk-cmt-load{color:var(--t2);font-size:13px;padding:6px 0;}
.dk2030 .dk-cmt .flex{display:flex;}
.dk2030 .dk-cmt .items-center{align-items:center;}
.dk2030 .dk-cmt .justify-end{justify-content:flex-end;}
.dk2030 .dk-cmt .flex-1{flex:1 1 0%;}
.dk2030 .dk-cmt .min-w-0{min-width:0;}
.dk2030 .dk-cmt .shrink-0{flex-shrink:0;}
.dk2030 .dk-cmt .text-center{text-align:center;}
.dk2030 .dk-cmt .w-full{width:100%;}
.dk2030 .dk-cmt .w-9{width:36px;}.dk2030 .dk-cmt .h-9{height:36px;}
.dk2030 .dk-cmt .w-4{width:16px;}.dk2030 .dk-cmt .h-4{height:16px;}
.dk2030 .dk-cmt .gap-1{gap:4px;}.dk2030 .dk-cmt .gap-2{gap:8px;}.dk2030 .dk-cmt .gap-3{gap:12px;}.dk2030 .dk-cmt .gap-4{gap:16px;}
.dk2030 .dk-cmt .space-y-4>*+*{margin-top:16px;}
.dk2030 .dk-cmt .mt-1{margin-top:4px;}.dk2030 .dk-cmt .mt-2{margin-top:8px;}.dk2030 .dk-cmt .mt-3{margin-top:12px;}.dk2030 .dk-cmt .mt-4{margin-top:16px;}.dk2030 .dk-cmt .mt-6{margin-top:24px;}
.dk2030 .dk-cmt .mb-1{margin-bottom:4px;}.dk2030 .dk-cmt .mb-4{margin-bottom:16px;}.dk2030 .dk-cmt .mb-6{margin-bottom:24px;}
.dk2030 .dk-cmt .p-2{padding:8px;}.dk2030 .dk-cmt .p-3{padding:12px;}
.dk2030 .dk-cmt .py-2{padding-top:8px;padding-bottom:8px;}.dk2030 .dk-cmt .px-4{padding-left:16px;padding-right:16px;}.dk2030 .dk-cmt .px-5{padding-left:20px;padding-right:20px;}.dk2030 .dk-cmt .py-1\.5{padding-top:6px;padding-bottom:6px;}
.dk2030 .dk-cmt .ml-12{margin-left:48px;}
.dk2030 .dk-cmt .rounded-full{border-radius:9999px;}
.dk2030 .dk-cmt .rounded-\[12px\]{border-radius:12px;}
.dk2030 .dk-cmt .rounded-\[30px\]{border-radius:9999px;}
.dk2030 .dk-cmt .border{border:1px solid var(--line);}
.dk2030 .dk-cmt .object-cover{object-fit:cover;}
.dk2030 .dk-cmt .resize-none{resize:none;}.dk2030 .dk-cmt .outline-none{outline:none;}
.dk2030 .dk-cmt .opacity-50{opacity:.5;}.dk2030 .dk-cmt .italic{font-style:italic;}
.dk2030 .dk-cmt .whitespace-pre-line{white-space:pre-line;}
.dk2030 .dk-cmt .break-words{overflow-wrap:break-word;word-break:break-word;}
.dk2030 .dk-cmt .leading-relaxed{line-height:1.6;}.dk2030 .dk-cmt .select-none{user-select:none;}
.dk2030 .dk-cmt .font-semibold{font-weight:600;}.dk2030 .dk-cmt .font-medium{font-weight:500;}
.dk2030 .dk-cmt .text-\[16px\]{font-size:16px;}.dk2030 .dk-cmt .text-\[14px\]{font-size:14px;}.dk2030 .dk-cmt .text-\[13px\]{font-size:13px;}.dk2030 .dk-cmt .text-\[12px\]{font-size:12px;}.dk2030 .dk-cmt .text-sm{font-size:14px;}
/* colours → 2030 theme vars (dark/light aware) */
.dk2030 .dk-cmt .text-\[\#241F20\]{color:var(--t1);}
.dk2030 .dk-cmt .text-\[\#979797\]{color:var(--t2);}
.dk2030 .dk-cmt .text-\[\#A9B8C9\]{color:var(--t3);}
.dk2030 .dk-cmt .text-\[\#00A9FF\]{color:var(--a1);}
.dk2030 .dk-cmt .text-white{color:#fff;}
.dk2030 .dk-cmt .bg-white{background:var(--s2);}
.dk2030 .dk-cmt .bg-\[\#DCE1E7\]{background:var(--s3);}
.dk2030 .dk-cmt .border-\[\#DCE1E7\]{border-color:var(--line);}
.dk2030 .dk-cmt h3{color:var(--t1);}
.dk2030 .dk-cmt a{color:inherit;text-decoration:none;}
.dk2030 .dk-cmt textarea{background:var(--s2);color:var(--t1);border:1px solid var(--line);font-family:inherit;}
.dk2030 .dk-cmt textarea::placeholder{color:var(--t3);}
.dk2030 .dk-cmt textarea:focus{border-color:var(--a1);}
.dk2030 .dk-cmt button{cursor:pointer;background:none;border:0;font-family:inherit;}
.dk2030 .dk-cmt button[type=submit]{background:var(--signal)!important;}
.dk2030 .dk-cmt .hover\:underline:hover{text-decoration:underline;}
.dk2030 .dk-cmt .hover\:text-\[\#00A9FF\]:hover{color:var(--a1);}
.dk2030 .dk-cmt .hover\:opacity-90:hover{opacity:.9;}

/* ---------- FEED CARD ---------- */
.dk2030 .fcard{border-radius:var(--r-card);background:var(--s1);border:0;overflow:hidden;
  transition:transform .2s var(--spring),border-color .2s;box-shadow:var(--edge);}
.dk2030 .fcard:hover{border-color:var(--line-2);}
.dk2030 .fcard-pad{padding:14px var(--pad);}
.dk2030 .fcard-head{display:flex;align-items:center;gap:10px;}
.dk2030 .fcard-head .who{flex:1;min-width:0;}
.dk2030 .fcard-head .nm{font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px;}
.dk2030 .fcard-head .nm .age{color:var(--t2);font-weight:400;}
.dk2030 .fcard-head .sub{font-size:12px;color:var(--t3);margin-top:1px;}

.dk2030 .reason{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-ctl);
  background:var(--s2);color:var(--t2);border:1px solid var(--line);}
.dk2030 .reason svg{width:12px;height:12px;}
.dk2030 .reason.hot{color:#ff8a4c;border-color:rgba(255,138,76,.25);background:rgba(255,138,76,.10);}
.dk2030 .reason.boost{color:var(--warn);border-color:rgba(255,179,64,.25);background:rgba(255,179,64,.10);}

.dk2030 .fcard-ttl{font-family:var(--font);font-size:17px;font-weight:600;line-height:1.22;letter-spacing:normal;margin:11px 0 0;color:var(--t1);}
.dk2030 .fcard-desc{font-size:14px;line-height:1.5;color:var(--t2);margin:6px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .fcard-media{margin-top:12px;border-radius:var(--r-card);overflow:hidden;height:220px;background-size:cover;background-position:center;position:relative;}
.dk2030 .fcard-media img{width:100%;height:100%;object-fit:cover;}
.dk2030 .fcard-media .tag{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;z-index:2;}
.dk2030 .fcard-cover{display:flex;align-items:flex-end;padding:14px;}
.dk2030 .fcard-cover .cv-cat{font-family:var(--font);font-weight:600;font-size:15px;color:var(--covt);}
.dk2030 .dk-org-ava{position:relative;flex:none;width:44px;height:44px;border-radius:8px;background:var(--s3);color:var(--t2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;overflow:hidden;}
.dk2030 .dk-org-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dk2030 .metabar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--t2);}
.dk2030 .metabar .m{display:inline-flex;align-items:center;gap:4px;}
/* Each item carries its own leading «·», so whichever item is missing (the category
   of a place in the `other` bucket, say) leaves the next one starting with a dot.
   A separator with nothing before it is not a separator. */
.dk2030 .metabar > .sep:first-child{display:none;}
.dk2030 .pm > .sep:first-child{display:none;}   /* same rule, the place card's meta line */
.dk2030 .place-thumb{position:relative;}
.dk2030 .place-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:var(--t3);}
.dk2030 .metabar .m svg{width:13px;height:13px;}
.dk2030 .metabar .sep{color:var(--t3);}
.dk2030 .metabar .price{color:var(--now);font-weight:600;}
.dk2030 .metabar a.m:hover{color:var(--a1);}

/* going row — the hero action */
.dk2030 .going{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);}
.dk2030 .going-who{flex:1;min-width:0;display:flex;align-items:center;gap:9px;}
.dk2030 .going-who .lbl{font-size:13px;color:var(--t2);}
.dk2030 .going-who .lbl b{color:var(--t1);font-weight:600;}
/* Who's-going tiles — sizes copied from Kaver's «Хотят пойти» row (measured 2026-09-04):
   100×124 tile, 90 wide on phones, square photo, 24px caption on a gradient, one scroll row. */
.dk2030 .cta-row{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap;}
.dk2030 .dk-digest-link{display:block;margin:-6px 0 10px;font-size:13px;font-weight:600;color:var(--a1);text-decoration:none;}
/* «Recent comments» on a geo hub: divided list, no boxes */
.dk2030 .dk-comments{display:flex;flex-direction:column;}
.dk2030 .dk-comment{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--t1);}
.dk2030 .dk-comment:last-child{border-bottom:0;}
.dk2030 .dk-comment-b{min-width:0;display:flex;flex-direction:column;gap:2px;}
.dk2030 .dk-comment-m{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dk-comment-m b{color:var(--t1);font-weight:600;}
.dk2030 .dk-comment-t{font-size:14px;line-height:1.35;}
.dk2030 .going-block{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);}
.dk2030 .going-block + .going{margin-top:10px;padding-top:0;border-top:0;}
.dk2030 .going-h{font-size:14px;line-height:20px;font-weight:500;color:var(--t2);margin:0 0 8px;}
.dk2030 .going-tiles{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;}
.dk2030 .going-tiles::-webkit-scrollbar{display:none;}
.dk2030 .gt{flex:0 0 auto;width:100px;border-radius:8px;overflow:hidden;background:var(--s2);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line);}
.dk2030 .gt-img{display:block;width:100px;height:100px;object-fit:cover;}
.dk2030 .gt-ini{display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:600;color:var(--t2);background:var(--s3);}
/* The caption sits on the tile's own surface (owner, 2026-09-16: the blue fill under every
   name was a second accent fighting the one the page has). */
.dk2030 .gt-cap{display:block;box-sizing:border-box;height:24px;padding:6px;font-size:12px;line-height:12px;font-weight:500;color:var(--t1);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--s2);}
@media (max-width:600px){.dk2030 .gt{width:90px}.dk2030 .gt-img{width:90px;height:90px}}
/* «Find company for this event»: the going tiles' sizes with a name, shared interests and a
   Going badge; one scroll row. */
.dk2030 .company-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;}
.dk2030 .company-row::-webkit-scrollbar{display:none;}
.dk2030 .cp{flex:0 0 auto;width:112px;text-decoration:none;color:var(--t1);}
.dk2030 .cp-ph{position:relative;display:block;width:112px;height:112px;border-radius:8px;overflow:hidden;background:var(--s2);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.10),0 8px 10px -6px rgba(0,0,0,.10);}
.dk2030 .cp-ph img{display:block;width:100%;height:100%;object-fit:cover;}
.dk2030 .cp-ini{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:36px;font-weight:600;color:#fff;background:var(--s3);}
.dk2030 .cp-going{position:absolute;left:6px;top:6px;padding:3px 7px;border-radius:var(--r-ctl);font-size:11px;font-weight:600;color:#fff;background:var(--a1-fill);}
.dk2030 .cp-name{display:block;margin-top:6px;font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .cp-tags{display:block;font-size:11px;color:var(--t2);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:600px){.dk2030 .cp{width:96px}.dk2030 .cp-ph{width:96px;height:96px}}
.dk2030 .btn-going{position:relative;overflow:hidden;}

.dk2030 .fcard-actions{display:flex;align-items:center;gap:4px;margin-top:4px;padding:6px var(--pad);border-top:1px solid var(--line);}
.dk2030 .act{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:var(--r-ctl);font-size:13px;color:var(--t2);transition:color .15s,background .15s;}
.dk2030 .act svg{width:17px;height:17px;}
.dk2030 .act:hover{color:var(--t1);background:var(--s2);}

/* empty + load more */
.dk2030 .feed-empty{margin:24px 0;text-align:center;color:var(--t2);font-size:14px;
  border:1px dashed var(--line-2);border-radius:var(--r-card);padding:40px 20px;}
.dk2030 .feed-empty .disp{display:block;color:var(--t1);font-size:16px;margin-bottom:6px;}
.dk2030 .load-spin{display:flex;justify-content:center;padding:24px 0;}
.dk2030 .load-spin i{width:26px;height:26px;border:3px solid var(--line-2);border-top-color:var(--a1);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- RIGHT RAIL ---------- */
.dk2030 .dk-right{padding:24px 18px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:16px;}
.dk2030 .dk-right::-webkit-scrollbar{display:none;}
.dk2030 .dk-card{background:var(--s1);border:0;border-radius:var(--r-card);padding:16px;box-shadow:var(--edge);}
.dk2030 .dk-card h4{font-family:var(--font);font-weight:600;font-size:14px;margin:0 0 13px;display:flex;align-items:center;gap:8px;}
.dk2030 .dk-pulse{display:flex;gap:9px;}
.dk2030 .dk-pulse .pc{flex:1;text-align:center;}
.dk2030 .dk-pulse .pc .n{font-family:var(--font);font-weight:600;font-size:20px;letter-spacing:normal;}
.dk2030 .dk-online{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line);}
.dk2030 .dk-online:first-of-type{border-top:none;}
.dk2030 .dk-pulse .pc .l{font-size:11px;color:var(--t2);margin-top:3px;line-height:1.2;}
.dk2030 .dk-online .oi{flex:1;min-width:0;}
.dk2030 .dk-online .onm{font-size:14px;font-weight:600;}
.dk2030 .dk-online .oa{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dk-online .og{font-size:12px;color:var(--now);font-weight:600;white-space:nowrap;}
.dk2030 .dk-side-link{display:block;text-align:center;font-size:13px;color:var(--a1);font-weight:600;margin-top:6px;}

/* "Coming up [in {City}]" widget — soonest/ongoing afisha + group plans w/ who's-going */
.dk2030 .dk-coming .dk-up{align-items:flex-start;gap:10px;}
.dk2030 .dk-coming .dk-up .onm{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .dk-coming .dk-up .oa{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--t3);white-space:normal;overflow:visible;}
.dk2030 .dk-coming .dk-up:hover .onm{color:var(--a1);}
/* Poster thumbnail. Portrait on purpose: an afisha IS a portrait sheet, and a 16:9 crop
   of one throws away the half that carries the name and the date. */
.dk2030 .dk-coming .up-th{flex:none;width:80px;aspect-ratio:4/5;border-radius:12px;
  overflow:hidden;background:var(--s2);display:block;}
/* A real poster is already 4:5 and fits untouched. Our own generated cover is a 1200x630
   OG card, and a centre crop of one is a fragment of a headline. Anchoring left keeps its
   date block, which is the half that still reads at thumbnail size. */
.dk2030 .dk-coming .up-th img{width:100%;height:100%;object-fit:cover;
  object-position:left center;display:block;}
/* A picture that did not load (the error handler in base_2030's head): its frame shows our cover colours, not an
   empty grey tile. */
.dk2030 [data-noimg]{background-image:linear-gradient(150deg,var(--cov1),var(--cov4))!important;}   /* frames set `background` */
.dk2030 .dk-up-going{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;}
.dk2030 .dk-up-n{font-size:11px;color:var(--t2);white-space:nowrap;}

/* ---------- THEME TOGGLE ---------- */
.dk2030 .theme-tog{display:flex;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:2px;}
.dk2030 .theme-tog button{width:32px;height:30px;border-radius:var(--r-ctl);font-size:13px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .16s var(--ease);}
.dk2030 .theme-tog button.on{background:var(--s3);color:var(--t1);}
.dk2030 .theme-tog button svg{width:16px;height:16px;}

/* accessibility */
.dk2030 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
@media (prefers-reduced-motion: reduce){.dk2030 *{animation:none!important;transition:none!important;}}

/* ============================================================
   BROWSE-LAYER ADDITIONS (filters · top-comment · mobile nav ·
   place / activity / trip cards)  — added with the 2030 roll-out
   ============================================================ */

/* filter bar: category rail + funnel dropdown */
.dk2030 .dk-filterbar{display:flex;align-items:flex-start;gap:8px;margin:4px 0 2px;}
.dk2030 .dk-filterbar .dk-catrow{flex:1;min-width:0;margin:0;}
.dk2030 .funnel-wrap{flex:none;position:relative;}
.dk2030 .funnel-wrap summary{list-style:none;width:38px;height:38px;border-radius:var(--r-pill);display:flex;
  align-items:center;justify-content:center;background:var(--s1);border:1px solid var(--line);color:var(--t2);
  cursor:pointer;position:relative;transition:all .16s var(--ease);}
.dk2030 .funnel-wrap summary::-webkit-details-marker{display:none;}
.dk2030 .funnel-wrap summary:hover{color:var(--t1);}
.dk2030 .funnel-wrap[open] summary{background:var(--a1-fill);color:#fff;border-color:transparent;box-shadow:0 6px 18px -8px var(--glow);}
.dk2030 .funnel .fdot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--a2);border:2px solid var(--s1);}
.dk2030 .filterpanel{position:absolute;right:0;top:46px;width:320px;max-width:80vw;z-index:30;
  padding:14px;border-radius:var(--r-card);background:var(--s1);border:0;
  box-shadow:var(--edge),0 22px 54px -16px rgba(0,0,0,.6);animation:screenIn .2s var(--ease);}
@keyframes screenIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.dk2030 .filterpanel .fhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.dk2030 .filterpanel .fhead .ft{font-family:var(--font);font-weight:600;font-size:14px;}
.dk2030 .filterpanel .freset{font-size:13px;color:var(--a1);font-weight:600;}
.dk2030 .filterpanel .fl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin:0 0 9px;}
.dk2030 .filterpanel .frow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
.dk2030 .filterpanel label.chip{cursor:pointer;user-select:none;}

/* top comment preview */
.dk2030 .top-cmt{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--s2);transition:background .15s;}
.dk2030 .top-cmt:hover{background:var(--s3);}
.dk2030 .top-cmt .cn{font-size:13px;font-weight:600;color:var(--t1);}
.dk2030 .top-cmt .cx{font-size:13px;color:var(--t2);line-height:1.4;}
.dk2030 .top-cmt .cl{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--t3);flex:none;}

/* place card */
.dk2030 .place-card{display:flex;gap:12px;align-items:center;padding:13px var(--pad);}
.dk2030 .place-thumb{width:66px;height:66px;border-radius:var(--r-card);flex:none;background-size:cover;background-position:center;overflow:hidden;background-color:var(--s3);}
.dk2030 .place-thumb img{width:100%;height:100%;object-fit:cover;}
.dk2030 .place-card .pn{font-family:var(--font);font-weight:600;font-size:15px;}
.dk2030 .place-card .pm{font-size:13px;color:var(--t2);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dk2030 .place-card .pm a:hover{color:var(--a1);}
.dk2030 .open-now{color:var(--now);font-weight:600;}
.dk2030 .closed-now{color:var(--t3);}

/* trip / tour bits */
.dk2030 .tour-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-ctl);background:var(--s2);color:var(--a2);border:1px solid var(--line);}
.dk2030 .spots{color:var(--warn);font-weight:600;}
.dk2030 .spots.gone{color:var(--t3);}

/* mobile bottom nav */
.dk2030 .dk-bottomnav{display:none;}
.dk2030 .dk-bottom-pad{height:0;}
.dk2030 .navb{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:color .16s,background .16s;}
.dk2030 .navb svg{width:22px;height:22px;}
.dk2030 .navb.on{color:var(--t1);background:var(--s3);}
.dk2030 .navb-cta{background:var(--a1-fill);color:#fff;box-shadow:0 8px 20px -8px var(--glow);}
.dk2030 .navb-cta svg{width:23px;height:23px;}
@media(max-width:600px){
  /* Hide the left sidebar on phones. NOTE: the early ≤600 block (~line 96) also sets
     this, but the base `.dk-side{display:flex}` rule comes AFTER it in source order and
     (equal specificity) would win — so we re-assert it here, after all base rules. */
  /* The sidebar is not deleted on a phone, it becomes the drawer — same markup, so the
     navigation has ONE definition and the two can never drift apart. */
  .dk2030 .dk-shell{grid-template-columns:minmax(0,1fr)!important;}
  .dk2030 .dk-side{
    display:flex!important;position:fixed;top:0;left:0;bottom:0;width:min(78vw,320px);
    z-index:70;background:var(--bg);border-right:0;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    transform:translateX(-101%);visibility:hidden;
    transition:transform .32s var(--ease-invme),visibility .32s;}
  .dk2030[data-panel="menu"] .dk-side{transform:none;visibility:visible;}
  /* The <=880px rule collapses the DOCKED sidebar to an 80px icon rail. As a drawer it is
     320px wide, so the labels come back -- an icon-only drawer is a rebus. */
  .dk2030 .dk-navi span,.dk2030 .dk-create span{display:inline;}
  .dk2030 .dk-sideprof .pi{display:block;}
  .dk2030 .dk-logo{justify-content:flex-start;}
  .dk2030 .dk-brand{justify-content:flex-start;padding:2px 12px 18px;}
  .dk2030 .dk-logo .lg{display:block;}
  .dk2030 .dk-logo .mk{display:none;}
  .dk2030 .dk-create{justify-content:flex-start;}

  /* The feed is pushed and shrunk rather than covered: it stays on screen, so you can see
     what you are coming back to (and tapping it closes the drawer). */
  .dk2030 .dk-main{transition:transform .32s var(--ease-invme),border-radius .32s;
    transform-origin:left center;}
  .dk2030[data-panel="menu"] .dk-main{transform:translateX(min(78vw,320px)) scale(.92);
    border-radius:24px;overflow:hidden;box-shadow:-18px 0 60px -20px rgba(0,0,0,.6);}
  .dk2030[data-panel="search"] .dk-main{transform:translateX(-6%) scale(.94);
    border-radius:24px;overflow:hidden;}

  .dk2030 .dk-scrim{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.38);
    opacity:0;transition:opacity .3s;}
  .dk2030[data-panel] .dk-scrim{opacity:1;}

  /* Search: a sheet from the right, the feed still showing at the edge. */
  .dk2030 .dk-searchpanel{position:fixed;top:0;right:0;bottom:0;width:min(88vw,520px);
    z-index:75;background:var(--bg);display:flex;flex-direction:column;
    transform:translateX(101%);visibility:hidden;
    transition:transform .3s var(--ease-invme),visibility .3s;
    padding-top:env(safe-area-inset-top);}
  .dk2030[data-panel="search"] .dk-searchpanel{transform:none;visibility:visible;}
  .dk2030 .dk-sp-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px;}
  .dk2030 .dk-sp-head h2{font-size:24px;font-weight:600;letter-spacing:normal;color:var(--t1);margin:0;}
  .dk2030 .dk-sp-back{width:36px;height:36px;border:0;background:none;color:var(--t1);
    display:grid;place-items:center;cursor:pointer;}
  .dk2030 .dk-sp-form{display:flex;align-items:center;gap:9px;margin:4px 14px 10px;
    padding:10px 14px;border-radius:var(--r-ctl);background:var(--s2);color:var(--t3);}
  .dk2030 .dk-sp-form input{flex:1;min-width:0;border:0;background:none;outline:none;
    color:var(--t1);font-size:16px;font-family:inherit;}
  .dk2030 .dk-sp-results{flex:1;overflow-y:auto;overscroll-behavior:contain;
    padding:0 14px calc(96px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;}

  /* The burger only exists where the sidebar does not. */
  .dk2030 .dk-burger{display:grid;place-items:center;width:36px;height:36px;flex:none;
    border:0;background:none;color:var(--t1);cursor:pointer;}
  /* Floating tab bar — Apple-style capsule, clears the home indicator (safe-area). */
  /* Liquid glass tab bar.
     On iOS 26 the SYSTEM draws the glass: `viewport-fit=cover` lets the page run under
     Safari's bar, and Safari samples the background-color of this fixed element (plus the
     html/body fallback above) to tint its own bar -- so ours and the system's read as one
     surface. Everywhere else the material is ours: blur + saturate for the frost, an inset
     hairline and a top specular for the rim, a soft drop shadow for the lift.
     `background-color` on purpose, not the `background` shorthand: that property name is
     what gets sampled, and the shorthand also resets background-image on us. */
  .dk2030 .dk-bottomnav{display:flex;position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
    align-items:center;gap:6px;padding:7px;border-radius:var(--r-pill);isolation:isolate;
    background-color:var(--glass-2);
    backdrop-filter:blur(24px) saturate(185%);-webkit-backdrop-filter:blur(24px) saturate(185%);
    border:1px solid var(--line-2);
    box-shadow:0 18px 44px -14px rgba(0,0,0,.6),
               inset 0 1px 0 rgba(255,255,255,.14),
               inset 0 0 0 .5px rgba(255,255,255,.06);}
  /* Refraction layer (Chromium): bends the backdrop a little, the way thick glass does.
     Browsers without SVG filters in backdrop-filter paint nothing here and keep the blur
     above -- the enhancement can only add. */
  .dk2030 .dk-glassfx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    backdrop-filter:url(#dk-liquid);-webkit-backdrop-filter:url(#dk-liquid);}
  /* Someone who asked the OS for less transparency gets a solid bar, not a blurry one. */
  @media(prefers-reduced-transparency:reduce){
    .dk2030 .dk-bottomnav{background-color:var(--s1);backdrop-filter:none;-webkit-backdrop-filter:none;}
    .dk2030 .dk-glassfx{display:none;}
  }
  .dk2030 .dk-bottom-pad{height:calc(92px + env(safe-area-inset-bottom));}

  /* One-row mobile app bar: search lives as an icon and unfolds over the
     location label (which hides while searching). Clears the notch. */
  .dk2030 .dk-top{left:8px;right:8px;top:calc(8px + env(safe-area-inset-top));
    padding:6px 8px;gap:8px;min-height:56px;}
  /* Burger left, search (and any page action) right, brand + place absolutely centred
     between them -- so the title stays in the middle of the screen whatever the sides
     weigh. Two auto margins in one row split the free space (that bug parked the search
     button mid-island once), so only ONE of the right-hand items carries it. */
  .dk2030 .dk-burger{order:1;}
  .dk2030 .dk-top-right{order:2;margin-left:auto;}
  .dk2030 .dk-search{order:3;margin-left:0;}
  .dk2030 .dk-topmid{display:flex;position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);flex-direction:column;align-items:center;gap:1px;
    /* Reserve the widest side group (burger 36 | page action 38 + search 40) on BOTH
       sides, so a screen-centred title can never slide under a button. A long name
       truncates instead -- overlapping chrome is the worse of the two. */
    max-width:calc(100% - 196px);min-width:0;}
  .dk2030 .dk-topbrand{display:block;line-height:0;}
  .dk2030 .dk-topbrand img{display:block;height:18px;width:auto;}
  /* Brand only: the place picker moved into the menu (owner's call). */
  .dk2030 .dk-kick{display:none;}
  .dk2030 .dk-topmid{align-items:center;}
  /* A column flex box with align-items:center sizes its children to their content and
     lets them OVERFLOW the max-width -- without this chain the long city name slid out
     from under the clamp and ran across the buttons. */
  .dk2030 .dk-topmid>.loc-pop{max-width:100%;min-width:0;}
  .dk2030 .dk-topmid .dk-loc{max-width:100%;min-width:0;}
  .dk2030 .dk-loc .v{font-size:14px;font-weight:600;justify-content:center;
    max-width:100%;min-width:0;}
  .dk2030 .dk-loc .v svg{flex:none;}

  /* Language, notifications and day/night are in the drawer on a phone. */
  .dk2030 .dk-top .dk-lang-top,.dk2030 .dk-top .dk-bell{display:none;}
  .dk2030 .dk-top.searching .dk-topmid{display:none;}
  .dk2030 .dk-top.searching .loc-pop{display:none;}
  .dk2030 .dk-top.searching .dk-search{max-width:none;}
  /* On a phone the right-hand actions are 170px of a 375px row — with them in place the
     open field got 147px, which is not a search box. They step aside for the duration;
     on a desktop there is room for both, so they stay. */
  .dk2030 .dk-top.searching .dk-top-right{display:none;}

  /* Inner scroll: momentum + don't rubber-band the page behind it. Top padding
     clears the 2-row island; bottom clears nothing extra (dk-bottom-pad spacer does). */
  .dk2030 .dk-scroll{padding:116px 14px 20px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;}
  .dk2030 .dk-h{font-size:20px;margin:16px 0 12px;}
  /* Map fills the phone screen; leave room for the top island + floating tab bar. */
  .dk2030 .dk-mapwrap{height:calc(100dvh - 164px);}
  /* Listing island sits above the floating tab bar capsule. */
  .dk2030 .dk-map-sheet{bottom:calc(78px + env(safe-area-inset-bottom));}
  .dk2030 .dk-h:first-child{margin-top:2px;}
  .dk2030 .dk-feed{gap:12px;}
  .dk2030 .filterpanel{max-width:88vw;}

  /* Right-rail cards sometimes render inline on small hubs — keep them tidy. */
  .dk2030 .dk-card{padding:14px;}
  /* Full-screen listing modal respects the home indicator. */
  .dk2030 .dk-modal{padding-bottom:env(safe-area-inset-bottom);}
}

/* ============================================================
   LOCATION SWITCHER (island dropdown) + day/night in profile
   ============================================================ */
.dk2030 .loc-pop{position:relative;}
/* Home is the left menu; the island keeps a copy only for the band where the sidebar is an
   80px icon rail and cannot show it. Never both. */
.dk2030 .loc-top{display:none;}
@media(max-width:880px){
  .dk2030 .loc-side{display:none;}
  .dk2030 .loc-top{display:block;}
}
@media(max-width:600px){
  .dk2030 .loc-side{display:block;}
  .dk2030 .loc-top{display:none;}
}
/* `.dk-side` scrolls, and overflow-y:auto clips overflow-x too (per spec) -- an absolutely
   positioned panel would lose everything hanging outside the menu. Fixed escapes the clip;
   the brand row is always at the top-left of the menu, so the coordinates are stable. */
.dk2030 .loc-side .loc-panel{position:fixed;left:12px;margin-left:0;
  top:calc(58px + env(safe-area-inset-top));width:min(300px,88vw);max-width:none;}
.dk2030 .loc-pop>summary{list-style:none;cursor:pointer;outline:none;}
.dk2030 .loc-pop>summary::-webkit-details-marker{display:none;}
.dk2030 .loc-panel{position:absolute;left:0;top:calc(100% + 12px);width:300px;max-width:80vw;z-index:50;
  padding:12px;border-radius:var(--r-card);background:var(--s1);border:0;
  box-shadow:var(--edge),0 22px 54px -16px rgba(0,0,0,.55);animation:screenIn .2s var(--ease);}
@media(max-width:600px){
  /* The summary is centred in the app bar, so the panel hangs from the middle;
     anchored to its left edge it ran 62px off the right of a 375px screen. */
  /* Centred with a negative margin, NOT translateX: the panel already runs a screenIn
     animation whose keyframes own `transform`, so a transform here is overridden for the
     first 200ms and the panel opens visibly off-centre. */
  .dk2030 .loc-panel{left:50%;margin-left:calc(min(320px,88vw) * -0.5);
    width:min(320px,88vw);max-width:none;}
}
.dk2030 .loc-sec{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin:10px 2px 9px;}
.dk2030 .loc-sec:first-child{margin-top:0;}
.dk2030 .loc-chips{display:flex;flex-wrap:wrap;gap:7px;}
.dk2030 .loc-chips a{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--r-ctl);
  font-size:13px;font-weight:500;color:var(--t1);background:var(--s2);border:1px solid var(--line);transition:all .15s var(--ease);}
.dk2030 .loc-chips a:hover{border-color:var(--line-2);color:var(--a1);}
.dk2030 .loc-chips a.on{color:#fff;background:var(--a1-fill);border-color:transparent;}
.dk2030 .loc-chips a.on svg{color:#fff;}
.dk2030 .loc-all{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--a1);}

.dk2030 .dk-sideprof>a{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:inherit;}
.dk2030 .dk-theme-btn{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--t2);background:var(--s2);border:1px solid var(--line);transition:color .15s,background .15s,transform .15s;}
.dk2030 .dk-theme-btn:hover{color:var(--t1);}
.dk2030 .dk-theme-btn:active{transform:scale(.92);}
.dk2030 .dk-theme-btn svg{width:17px;height:17px;}
/* The toggle icon is a <morph-icon> custom element (morphicons): before upgrade it is an
   unknown inline element wrapping the fallback <svg>; give it a box either way. */
.dk2030 .dk-theme-btn morph-icon{display:inline-flex;line-height:0;}

/* ============================================================
   LISTING MODAL (open a card as an overlay; URL = the listing URL)
   ============================================================ */
#dk-modal:empty{display:none;}
.dk2030 .dk-modal-bg{position:fixed;inset:0;z-index:200;background:rgba(2,2,8,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
  animation:dkFade .2s var(--ease);}
@keyframes dkFade{from{opacity:0}to{opacity:1}}
.dk2030 .dk-modal{width:600px;max-width:100%;border-radius:var(--r-lg);background:var(--bg);
  border:0;position:relative;box-shadow:var(--edge),0 50px 120px -20px rgba(0,0,0,.7);
  animation:dkPop .24s var(--spring);overflow:hidden;margin:auto 0;}
@keyframes dkPop{from{transform:translateY(16px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.dk2030 .dk-modal-x{position:absolute;top:14px;right:14px;z-index:5;width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--glass-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-2);color:var(--t1);}
.dk2030 .dk-modal-x svg{width:18px;height:18px;}
.dk2030 .dk-modal-hero{aspect-ratio:1200/630;background-size:cover;background-position:center;background-color:var(--s3);position:relative;}
.dk2030 .dk-modal-hero img{width:100%;height:100%;object-fit:cover;}
.dk2030 .dk-modal-cover{display:flex;align-items:flex-end;padding:18px;background:var(--cov1);}
.dk2030 .dk-modal-cover .cv-cat{font-family:var(--font);font-weight:600;font-size:17px;color:var(--covt);}
.dk2030 .dk-modal-body{padding:16px var(--pad) 22px;}
.dk2030 .dk-modal-body .host{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.dk2030 .dk-modal-body .host .hn{font-family:var(--font);font-weight:600;font-size:15px;display:flex;align-items:center;gap:5px;}
.dk2030 .dk-modal-body .host .hm{font-size:13px;color:var(--t2);margin-top:2px;}
.dk2030 .dk-modal-ttl{font-family:var(--font);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:normal;margin:14px 0 0;}
.dk2030 .dk-listing-map{height:200px;border-radius:var(--r-card);overflow:hidden;border:0;margin-top:14px;background:var(--s2);box-shadow:var(--edge);}
.dk2030 .dk-modal .sec-h,.dk2030 .dk-listing .sec-h{font-family:var(--font);font-weight:600;font-size:14px;margin:18px 0 8px;color:var(--t1);}
.dk2030 .dk-modal .lst-desc,.dk2030 .dk-listing .lst-desc{font-size:15px;line-height:1.6;color:var(--t1);opacity:.92;white-space:pre-line;}

/* ---------- FULL DETAIL PAGE (2030) — listing card + reused classic participant partials ---------- */
.dk2030 .dk-listing{background:var(--s1);border:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--edge);}
.dk2030 .dk-listing .addr{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);margin-top:9px;}
.dk2030 .dk-listing .btn-primary{display:inline-flex;align-items:center;gap:6px;background:var(--a1-fill);color:#fff;border:0;border-radius:var(--r-ctl);padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;}
.dk2030 .dk-listing .btn-primary:hover{opacity:.92;}
.dk2030 .dk-listing .btn-secondary{display:inline-flex;align-items:center;gap:6px;background:var(--s2);color:var(--t1);border:1px solid var(--line);border-radius:var(--r-ctl);padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;}
.dk2030 .dk-listing .btn-primary.text-xs,.dk2030 .dk-listing .btn-secondary.text-xs{padding:5px 12px;font-size:12px;}
.dk2030 .dk-listing .btn-primary.opacity-60,.dk2030 .dk-listing .btn-primary.opacity-80,.dk2030 .dk-listing .cursor-default{opacity:.65;cursor:default;}
.dk2030 .dk-listing .flex{display:flex;}.dk2030 .dk-listing .inline-flex{display:inline-flex;}
.dk2030 .dk-listing .items-center{align-items:center;}.dk2030 .dk-listing .justify-between{justify-content:space-between;}
.dk2030 .dk-listing .min-w-0{min-width:0;}.dk2030 .dk-listing .flex-shrink-0{flex-shrink:0;}.dk2030 .dk-listing .ml-auto{margin-left:auto;}
.dk2030 .dk-listing .gap-1\.5{gap:6px;}.dk2030 .dk-listing .gap-2{gap:8px;}.dk2030 .dk-listing .gap-3{gap:12px;}
.dk2030 .dk-listing .w-4{width:16px;}.dk2030 .dk-listing .h-4{height:16px;}.dk2030 .dk-listing .w-8{width:32px;}.dk2030 .dk-listing .h-8{height:32px;}
.dk2030 .dk-listing .rounded-full{border-radius:9999px;}.dk2030 .dk-listing .object-cover{object-fit:cover;}.dk2030 .dk-listing .select-none{user-select:none;}
.dk2030 .dk-listing .space-y-3>*+*{margin-top:12px;}
.dk2030 .dk-listing .py-2{padding-top:8px;padding-bottom:8px;}.dk2030 .dk-listing .py-4{padding-top:16px;padding-bottom:16px;}.dk2030 .dk-listing .mt-4{margin-top:16px;}
.dk2030 .dk-listing .border-b{border-bottom:1px solid var(--line);}.dk2030 .dk-listing .border-snow300{border-color:var(--line);}
.dk2030 .dk-listing .text-xs{font-size:12px;}.dk2030 .dk-listing .text-sm{font-size:14px;}.dk2030 .dk-listing .text-center{text-align:center;}
.dk2030 .dk-listing .font-bold{font-weight:600;}.dk2030 .dk-listing .font-semibold{font-weight:600;}
.dk2030 .dk-listing .uppercase{text-transform:uppercase;}.dk2030 .dk-listing .tracking-wide{letter-spacing:.03em;}
.dk2030 .dk-listing .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dk-listing .text-white{color:#fff;}
.dk2030 .dk-listing .text-\[\#241F20\]{color:var(--t1);}
.dk2030 .dk-listing .text-\[\#979797\]{color:var(--t2);}
.dk2030 .dk-listing .text-\[\#35C061\]{color:#35C061;}
.dk2030 .dk-listing .gradient-bg{background:var(--signal);}
.dk2030 .dk-modal .addr{font-size:13px;color:var(--t2);margin-top:8px;display:flex;align-items:center;gap:6px;}
@media(max-width:600px){.dk2030 .dk-modal-bg{padding:0;} .dk2030 .dk-modal{border-radius:0;min-height:100%;}}

/* city-hub breadcrumbs (2030) */
.dk2030 .dk-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--t3);margin:0 0 10px;}
.dk2030 .dk-crumbs a{color:var(--t2);}
.dk2030 .dk-crumbs a:hover{color:var(--a1);}
.dk2030 .dk-crumbs .sep{color:var(--t3);}

/* ════════ CHAT (invme 2030) — single-page messenger ════════ */
.dk2030 .dkchat-wrap{grid-column:2 / -1;min-width:0;height:100%;padding:18px;display:flex;}
@media(max-width:600px){.dk2030 .dkchat-wrap{grid-column:1 / -1;padding:0;}}
.dk2030 .dkchat{display:flex;width:100%;height:100%;border:0;border-radius:var(--r-card);overflow:hidden;background:var(--bg);box-shadow:var(--edge);}
@media(max-width:600px){.dk2030 .dkchat{border-radius:0;border:0;}}
.dk2030 .dkchat-side{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:var(--s1);border-right:1px solid var(--line);}
.dk2030 .dkchat-side-h{display:flex;align-items:center;height:56px;padding:0 16px;font-weight:600;font-size:17px;color:var(--t1);flex-shrink:0;border-bottom:1px solid var(--line);}
.dk2030 .dkchat-list{flex:1;overflow-y:auto;scrollbar-width:none;}
.dk2030 .dkchat-list::-webkit-scrollbar{display:none;}
.dk2030 .dkchat-row{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;}
.dk2030 .dkchat-row:hover{background:var(--s2);}
.dk2030 .dkchat-row.on{background:var(--s2);}
.dk2030 .dkchat-av{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--a1-fill);color:#fff;font-weight:600;font-size:17px;overflow:hidden;}
.dk2030 .dkchat-av img{width:100%;height:100%;object-fit:cover;}
.dk2030 .dkchat-rmain{flex:1;min-width:0;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:-10px;}
.dk2030 .dkchat-rtop{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dk2030 .dkchat-rname{font-size:15px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dkchat-rtime{flex-shrink:0;font-size:12px;color:var(--t2);}
.dk2030 .dkchat-rtime.unread{color:var(--signal);}
.dk2030 .dkchat-rbot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.dk2030 .dkchat-rprev{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dkchat-badge{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:8px;background:var(--a1-fill);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.dk2030 .dkchat-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg);}
.dk2030 .dkchat-head{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--s1);}
.dk2030 .dkchat-head a{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;}
.dk2030 .dkchat-htitle{font-size:15px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dkchat-hsub{font-size:12px;color:var(--t2);}
.dk2030 .dkchat-back{display:none;color:var(--t2);}
@media(max-width:600px){.dk2030 .dkchat-side{display:none;} .dk2030 .dkchat-back{display:inline-flex;}
/* mobile single-pane: no open room -> the conversation LIST is the screen */
.dk2030 .dkchat.no-room .dkchat-side{display:flex;width:100%;border-right:0;}
.dk2030 .dkchat.no-room .dkchat-main{display:none;}}
.dk2030 #message-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:12px 0;background:var(--bg);scrollbar-width:thin;}
.dk2030 #message-list::-webkit-scrollbar{width:6px;}
.dk2030 #message-list::-webkit-scrollbar-thumb{background:rgba(120,120,120,.35);border-radius:3px;}
/* JS-built bubble utility classes (chat-centrifugo.js hardcodes these) */
.dk2030 .dkchat .msg-item{display:flex;padding:0 12px;}
.dk2030 .dkchat .msg-item.pt-1\.5{padding-top:6px;}
.dk2030 .dkchat .msg-item.pt-0\.5{padding-top:2px;}
.dk2030 .dkchat .msg-item.justify-end{justify-content:flex-end;}
.dk2030 .dkchat .msg-item.justify-start{justify-content:flex-start;}
.dk2030 .dkchat .wa-bubble{max-width:78%;padding:6px 10px;border-radius:12px;position:relative;box-shadow:0 1px .5px rgba(11,20,26,.10);}
.dk2030 .dkchat .msg-sent .wa-bubble{background:var(--a1-fill);color:#fff;border-top-right-radius:4px;}
.dk2030 .dkchat .msg-received .wa-bubble{background:var(--s2);color:var(--t1);border:1px solid var(--line);border-top-left-radius:4px;}
.dk2030 .dkchat .wa-name{font-size:13px;font-weight:600;color:var(--a1);margin-bottom:1px;}
.dk2030 .dkchat .wa-text{font-size:14px;line-height:19px;white-space:pre-wrap;word-break:break-word;}
.dk2030 .dkchat .wa-meta{display:block;font-size:11px;color:var(--t3);text-align:right;margin-top:1px;line-height:12px;}
.dk2030 .dkchat .msg-sent .wa-meta{color:rgba(255,255,255,.72);}
.dk2030 .dkchat .wa-ticks{color:rgba(255,255,255,.92);}
.dk2030 .dkchat-empty{margin:auto;text-align:center;padding:14px 18px;border-radius:12px;background:var(--s2);color:var(--t2);font-size:13px;}
.dk2030 .dkchat-side-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 16px;text-align:center;gap:6px;}
.dk2030 .dkchat-side-empty .ic{width:64px;height:64px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:6px;}
@keyframes dkBallBeat{0%{opacity:.5;transform:scale(1)}33%{opacity:.2;transform:scale(.75)}66%{opacity:.1;transform:scale(.75)}100%{opacity:1;transform:scale(1)}}
.dk2030 .typing-dot{width:5px;height:5px;border-radius:50%;background:var(--t3);animation:dkBallBeat 1.1s 0s infinite cubic-bezier(.445,.05,.55,.95);}
.dk2030 .typing-dot:nth-child(2){animation-delay:.3s;}
.dk2030 .typing-dot:nth-child(3){animation-delay:.6s;}
.dk2030 #typing-indicator{display:none;align-items:center;gap:8px;padding:4px 16px;background:var(--s1);font-size:12px;color:var(--t2);}
.dk2030 #typing-indicator.on{display:flex;}
.dk2030 .dkchat-composer{padding:10px 12px;flex-shrink:0;border-top:1px solid var(--line);background:var(--s1);}
.dk2030 .dkchat-composer form{display:flex;align-items:flex-end;gap:8px;}
.dk2030 .dkchat-iconbtn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);flex-shrink:0;background:transparent;border:0;cursor:pointer;}
.dk2030 .dkchat-iconbtn:hover{background:var(--s2);}
.dk2030 .dkchat-ta{flex:1;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:8px 12px;}
.dk2030 .dkchat-ta textarea{width:100%;background:transparent;border:0;resize:none;outline:none;color:var(--t1);font-size:15px;line-height:20px;max-height:120px;font-family:inherit;overflow-y:auto;}
.dk2030 .dkchat-send{width:42px;height:42px;border-radius:50%;background:var(--a1-fill);color:#fff;border:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
.dk2030 .dkchat-load{text-align:center;padding:8px;}
.dk2030 .dkchat-load button{padding:5px 14px;border-radius:var(--r-ctl);font-size:12px;background:var(--s2);color:var(--t2);border:0;cursor:pointer;}
.dk2030 .dkchat .msg-item.opacity-70,.dk2030 .opacity-70{opacity:.7;}

/* ════════ Global button + utility compat layer (2030) ════════ */
.dk2030 .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--a1-fill);color:#fff;border:0;border-radius:var(--r-ctl);padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;}
.dk2030 .btn-primary:hover{opacity:.92;}
.dk2030 .btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--s2);color:var(--t1);border:1px solid var(--line);border-radius:var(--r-ctl);padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;}
.dk2030 .btn-secondary:hover{background:var(--s3);}
.dk2030 .btn-naked{background:none;border:0;color:var(--t2);cursor:pointer;font-weight:600;font-size:14px;text-decoration:none;}
.dk2030 .btn-naked:hover{color:var(--t1);}
.dk2030 .btn-primary.text-sm,.dk2030 .btn-secondary.text-sm{padding:6px 14px;font-size:13px;}

/* ════════ Profile (invme 2030) ════════ */
.dk2030 .dk-prof{background:var(--s1);border:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--edge);}
.dk2030 .dk-prof-cover{height:150px;position:relative;overflow:hidden;background:linear-gradient(135deg,#447BBA,#706AFF);}
.dk2030 .dk-prof-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px);opacity:.55;}
.dk2030 .dk-prof-premium{position:absolute;top:12px;left:0;z-index:2;background:#706AFF;color:#fff;padding:4px 12px;border-radius:0 9999px 9999px 0;font-size:12px;font-weight:600;}
.dk2030 .dk-prof-body{padding:0 18px 16px;}
.dk2030 .dk-prof-avrow{display:flex;align-items:flex-end;justify-content:space-between;margin-top:-44px;margin-bottom:8px;gap:10px;}
.dk2030 .dk-prof-av{width:88px;height:88px;border-radius:50%;border:4px solid var(--bg);background:var(--a1-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;overflow:hidden;flex-shrink:0;}
.dk2030 .dk-prof-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.dk2030 .dk-prof-acts{display:flex;align-items:center;gap:8px;padding-bottom:6px;flex-wrap:wrap;justify-content:flex-end;}
.dk2030 .dk-prof-name{font-size:20px;font-weight:600;letter-spacing:normal;color:var(--t1);display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2;}
.dk2030 .dk-prof-name .age{color:var(--t2);font-weight:400;}
.dk2030 .dk-prof-plus{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-ctl);color:#fff;background:linear-gradient(135deg,#007AFF,#7847E9);font-size:11px;font-weight:600;}
.dk2030 .dk-prof-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--t2);font-size:14px;margin-top:5px;}
.dk2030 .dk-prof-meta .it{display:inline-flex;align-items:center;gap:5px;}
.dk2030 .dk-prof-bio{font-size:14px;line-height:21px;color:var(--t1);margin-top:10px;}
/* Dating-pass profile blocks: fresh presence, dormant note, completeness meter, prompts */
.dk2030 .dk-prof-fresh{display:inline-flex;align-items:center;gap:5px;color:var(--now);font-weight:600;}
.dk2030 .dk-prof-dormant{margin-top:10px;padding:9px 12px;border-radius:12px;background:var(--s2);color:var(--t2);font-size:13px;line-height:19px;}
.dk2030 .dk-prof-complete{margin-top:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--s1);}
.dk2030 .dk-prof-complete .row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--t2);}
.dk2030 .dk-prof-complete .row b{color:var(--t1);font-weight:600;}
.dk2030 .dk-prof-complete .bar{height:6px;border-radius:var(--r-ctl);background:var(--s3);margin-top:7px;overflow:hidden;}
.dk2030 .dk-prof-complete .bar span{display:block;height:100%;border-radius:var(--r-ctl);background:var(--signal);}
.dk2030 .dk-prof-complete p{margin-top:7px;font-size:12px;color:var(--t3);line-height:17px;}
.dk2030 .dk-prof-complete p a{color:var(--signal);text-decoration:none;font-weight:600;}
.dk2030 .dk-prof-prompts{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.dk2030 .dk-prof-prompt{padding:11px 13px;border-radius:12px;background:var(--s2);}
.dk2030 .dk-prof-prompt .q{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-bottom:4px;}
.dk2030 .dk-prof-prompt .a{display:block;font-size:15px;line-height:22px;color:var(--t1);}
.dk2030 .dk-prompt-slot{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.dk2030 .dk-prompt-slot select,.dk2030 .dk-prompt-slot textarea{width:100%;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--s1);color:var(--t1);font-size:14px;font-family:inherit;}
.dk2030 .dk-prof-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.dk2030 .dk-prof-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-ctl);background:var(--s2);color:var(--t2);font-size:12px;font-weight:600;text-decoration:none;}
.dk2030 a.dk-prof-tag:hover{color:var(--t1);}
.dk2030 .dk-prof-stats{display:flex;gap:18px;margin-top:14px;font-size:14px;color:var(--t2);}
.dk2030 .dk-prof-stats b{color:var(--t1);font-weight:600;}
.dk2030 .dk-prof-tabs{display:flex;gap:2px;margin:16px 0 10px;border-bottom:1px solid var(--line);}
.dk2030 .dk-prof-tab{padding:9px 14px;font-size:14px;color:var(--t2);border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;}
.dk2030 .dk-prof-tab:hover{color:var(--t1);}
.dk2030 .dk-prof-tab.on{color:var(--t1);font-weight:600;border-color:var(--signal);}
.dk2030 .dk-prof-tab .ct{color:var(--t3);}

/* ════════ Forms (invme 2030) ════════ */
.dk2030 .dk-form{display:block;}
.dk2030 .dk-form .fld{margin-bottom:18px;}
.dk2030 .dk-form .fld.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.dk2030 .dk-form .fld.row2{grid-template-columns:1fr;}}
.dk2030 .dk-form label.lbl{display:block;font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.dk2030 .dk-form input[type=text],.dk2030 .dk-form input[type=email],.dk2030 .dk-form input[type=tel],.dk2030 .dk-form input[type=url],.dk2030 .dk-form input[type=number],.dk2030 .dk-form input[type=password],.dk2030 .dk-form input[type=date],.dk2030 .dk-form input[type=datetime-local],.dk2030 .dk-form input[type=search],.dk2030 .dk-form textarea,.dk2030 .dk-form select{
  width:100%;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:15px;color:var(--t1);font-family:inherit;outline:none;transition:border-color .15s;}
.dk2030 .dk-form input:focus,.dk2030 .dk-form textarea:focus,.dk2030 .dk-form select:focus{border-color:var(--signal);}
.dk2030 .dk-form textarea{resize:vertical;min-height:90px;line-height:1.5;}
.dk2030 .dk-form input::placeholder,.dk2030 .dk-form textarea::placeholder{color:var(--t3);}
.dk2030 .dk-form .help{font-size:12px;color:var(--t3);margin-top:5px;}
.dk2030 .dk-form .err{font-size:12px;color:#ff5a5a;margin-top:5px;}
.dk2030 .dk-form .check{display:flex;align-items:center;gap:10px;margin-bottom:10px;cursor:pointer;font-size:14px;color:var(--t1);}
.dk2030 .dk-form .check input{width:18px;height:18px;accent-color:var(--signal);}
/* Group plan block: the "who gets in" question only exists for a group plan, so it is
   revealed by :has() on the checkbox — no JS, and in a browser without :has() it simply
   stays visible (an extra visible field beats a field that silently does nothing). */
.dk2030 .dk-form .dk-group{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:18px;}
.dk2030 .dk-form .dk-group .check{margin-bottom:0;}
.dk2030 .dk-form .dk-group-opts{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.dk2030 .dk-form .dk-group-opts .fld:last-child{margin-bottom:0;}
.dk2030 .dk-form .dk-group:has(.check input:not(:checked)) .dk-group-opts{display:none;}
.dk2030 .dk-form .dk-policy{display:flex;flex-direction:column;gap:8px;}
.dk2030 .dk-form .dk-policy-i{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;}
.dk2030 .dk-form .dk-policy-i:hover{background:var(--s2);}
.dk2030 .dk-form .dk-policy-i:has(input:checked){border-color:var(--signal);background:var(--s2);}
.dk2030 .dk-form .dk-policy-i input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--signal);}
.dk2030 .dk-form .dk-policy-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dk2030 .dk-form .dk-policy-t b{font-size:14px;font-weight:600;color:var(--t1);}
.dk2030 .dk-form .dk-policy-t em{font-style:normal;font-size:13px;color:var(--t3);line-height:1.4;}

.dk2030 .dk-form .sect{border-top:1px solid var(--line);padding-top:16px;margin-top:6px;margin-bottom:16px;}
.dk2030 .dk-form .sect-h{font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.dk2030 .dk-form-actions{display:flex;align-items:center;gap:16px;padding-top:6px;}
.dk2030 .dk-formcard{background:var(--s1);border:0;border-radius:var(--r-card);padding:22px;box-shadow:var(--edge);}
.dk2030 .dk-formhead{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.dk2030 .dk-formhead a{color:var(--t2);display:inline-flex;}
.dk2030 .dk-formhead h1{font-size:20px;font-weight:600;color:var(--t1);letter-spacing:normal;}
.dk2030 .dk-form-nonfield{background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.3);color:#ff7a7a;font-size:13px;font-weight:600;padding:10px 14px;border-radius:8px;margin-bottom:14px;}

/* ════════ Inline autocomplete dropdown (2030 forms) ════════ */
.dk2030 .dk-ac-wrap{position:relative;}
.dk2030 .dk-ac-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--s1);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);}
.dk2030 .dk-ac-results:empty{display:none;}
.dk2030 .dk-ac-row{display:block;width:100%;text-align:left;padding:9px 13px;font-size:14px;font-weight:600;color:var(--t1);background:none;border:0;cursor:pointer;}
.dk2030 .dk-ac-row:hover{background:var(--s2);}
.dk2030 .dk-ac-row .sub{color:var(--t3);font-weight:400;}
.dk2030 .dk-form .dropzone{display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--line-2);border-radius:12px;padding:22px;cursor:pointer;color:var(--t2);font-size:14px;font-weight:600;transition:border-color .15s,color .15s;}
.dk2030 .dk-form .dropzone:hover{border-color:var(--signal);color:var(--a1);}
.dk2030 .dk-form .dz-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.dk2030 .dk-form .dz-preview img{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--line);}
.dk2030 .dk-form .prefill{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:8px;background:var(--s2);border:1px solid var(--line);font-size:13px;color:var(--t2);margin-bottom:18px;}

/* ════════════════════════════════════════════════════════════════════
   COMPAT LAYER (2030) — maps base.html helper classes + a Tailwind-utility
   subset to 2030 theme vars, so classic partials (notifications, invite,
   allauth, error pages, search empties) render themed inside base_2030.
   base_2030's own markup uses NO bare utility classes → zero collision.
   ════════════════════════════════════════════════════════════════════ */
/* text colors */
.dk2030 .t1{color:var(--t1);} .dk2030 .t2{color:var(--t2);} .dk2030 .t3{color:var(--t3);}
.dk2030 .accent,.dk2030 .text-accent{color:var(--a1);} .dk2030 .accent2{color:var(--signal);}
/* borders */
.dk2030 .bd{border-color:var(--line);} .dk2030 .bd2{border-color:var(--line-2);}
.dk2030 .border{border:1px solid var(--line);} .dk2030 .border-b{border-bottom:1px solid var(--line);}
.dk2030 .border-t{border-top:1px solid var(--line);} .dk2030 .border-x{border-left:1px solid var(--line);border-right:1px solid var(--line);}
.dk2030 .border-border,.dk2030 .border-snow300{border-color:var(--line);}
/* backgrounds */
.dk2030 .bg-bg{background:var(--bg);} .dk2030 .bg-card{background:var(--s1);}
.dk2030 .bg-elev{background:var(--s2);} .dk2030 .bg-hover{background:var(--s2);}
.dk2030 .bg-accent2{background:var(--a1-fill);color:#fff;}
.dk2030 .hoverbg{transition:background .12s;} .dk2030 .hoverbg:hover{background:var(--s2);}
.dk2030 .divide-bd>*+*{border-top:1px solid var(--line);}
/* inputs */
.dk2030 .sf-input{width:100%;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-size:14px;color:var(--t1);outline:none;}
.dk2030 .sf-input:focus{border-color:var(--signal);}
.dk2030 .sf-input::placeholder{color:var(--t3);}
/* pill variants from classic */
.dk2030 .pill-outline{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);color:var(--t1);background:transparent;border-radius:var(--r-ctl);padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;}
.dk2030 .pill-outline:hover{border-color:var(--line-2);}
/* ── Tailwind-utility subset (only classic partials consume these) ── */
.dk2030 .flex{display:flex;} .dk2030 .inline-flex{display:inline-flex;} .dk2030 .grid{display:grid;}
.dk2030 .hidden{display:none;} .dk2030 .block{display:block;} .dk2030 .inline-block{display:inline-block;}
.dk2030 .flex-col{flex-direction:column;} .dk2030 .flex-wrap{flex-wrap:wrap;} .dk2030 .flex-1{flex:1 1 0%;}
.dk2030 .items-center{align-items:center;} .dk2030 .items-start{align-items:flex-start;} .dk2030 .items-end{align-items:flex-end;}
.dk2030 .justify-between{justify-content:space-between;} .dk2030 .justify-center{justify-content:center;} .dk2030 .justify-end{justify-content:flex-end;}
.dk2030 .shrink-0,.dk2030 .flex-shrink-0{flex-shrink:0;} .dk2030 .min-w-0{min-width:0;} .dk2030 .w-full{width:100%;} .dk2030 .h-full{height:100%;}
.dk2030 .ml-auto{margin-left:auto;} .dk2030 .mx-auto{margin-left:auto;margin-right:auto;} .dk2030 .text-center{text-align:center;} .dk2030 .text-left{text-align:left;}
.dk2030 .relative{position:relative;} .dk2030 .absolute{position:absolute;} .dk2030 .inset-0{inset:0;} .dk2030 .sticky{position:sticky;}
.dk2030 .object-cover{object-fit:cover;} .dk2030 .select-none{user-select:none;} .dk2030 .truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .uppercase{text-transform:uppercase;} .dk2030 .lowercase{text-transform:lowercase;} .dk2030 .leading-tight{line-height:1.2;} .dk2030 .cursor-pointer{cursor:pointer;}
.dk2030 .transition-opacity{transition:opacity .15s;} .dk2030 .transition-colors{transition:color .15s,background .15s,border-color .15s;}
.dk2030 .overflow-hidden{overflow:hidden;} .dk2030 .overflow-y-auto{overflow-y:auto;} .dk2030 .rounded-full{border-radius:9999px;} .dk2030 .rounded-2xl{border-radius:var(--r-card);}
.dk2030 .gap-0\.5{gap:2px;} .dk2030 .gap-1{gap:4px;} .dk2030 .gap-1\.5{gap:6px;} .dk2030 .gap-2{gap:8px;} .dk2030 .gap-2\.5{gap:10px;} .dk2030 .gap-3{gap:12px;} .dk2030 .gap-4{gap:16px;} .dk2030 .gap-5{gap:20px;} .dk2030 .gap-6{gap:24px;}
.dk2030 .w-8{width:32px;} .dk2030 .h-8{height:32px;} .dk2030 .w-9{width:36px;} .dk2030 .h-9{height:36px;} .dk2030 .w-10{width:40px;} .dk2030 .h-10{height:40px;}
.dk2030 .w-12{width:48px;} .dk2030 .h-12{height:48px;} .dk2030 .w-16{width:64px;} .dk2030 .h-16{height:64px;} .dk2030 .w-20{width:80px;} .dk2030 .h-20{height:80px;}
.dk2030 .max-w-xl{max-width:36rem;} .dk2030 .max-w-2xl{max-width:42rem;} .dk2030 .max-w-\[280px\]{max-width:280px;} .dk2030 .max-w-\[440px\]{max-width:440px;}
.dk2030 .px-2{padding-left:8px;padding-right:8px;} .dk2030 .px-2\.5{padding-left:10px;padding-right:10px;} .dk2030 .px-3{padding-left:12px;padding-right:12px;} .dk2030 .px-3\.5{padding-left:14px;padding-right:14px;} .dk2030 .px-4{padding-left:16px;padding-right:16px;} .dk2030 .px-5{padding-left:20px;padding-right:20px;} .dk2030 .px-6{padding-left:24px;padding-right:24px;} .dk2030 .px-7{padding-left:28px;padding-right:28px;}
.dk2030 .py-1{padding-top:4px;padding-bottom:4px;} .dk2030 .py-1\.5{padding-top:6px;padding-bottom:6px;} .dk2030 .py-2{padding-top:8px;padding-bottom:8px;} .dk2030 .py-2\.5{padding-top:10px;padding-bottom:10px;} .dk2030 .py-3{padding-top:12px;padding-bottom:12px;} .dk2030 .py-4{padding-top:16px;padding-bottom:16px;} .dk2030 .py-6{padding-top:24px;padding-bottom:24px;} .dk2030 .py-12{padding-top:48px;padding-bottom:48px;} .dk2030 .py-16{padding-top:64px;padding-bottom:64px;} .dk2030 .py-20{padding-top:80px;padding-bottom:80px;}
.dk2030 .p-3{padding:12px;} .dk2030 .p-4{padding:16px;} .dk2030 .p-5{padding:20px;} .dk2030 .p-6{padding:24px;} .dk2030 .p-8{padding:32px;}
.dk2030 .mt-0\.5{margin-top:2px;} .dk2030 .mt-1{margin-top:4px;} .dk2030 .mt-1\.5{margin-top:6px;} .dk2030 .mt-2{margin-top:8px;} .dk2030 .mt-3{margin-top:12px;} .dk2030 .mt-4{margin-top:16px;}
.dk2030 .mb-1{margin-bottom:4px;} .dk2030 .mb-2{margin-bottom:8px;} .dk2030 .mb-3{margin-bottom:12px;} .dk2030 .mb-4{margin-bottom:16px;} .dk2030 .mb-5{margin-bottom:20px;} .dk2030 .mb-6{margin-bottom:24px;}
.dk2030 .lc1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;} .dk2030 .lc2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .dk2030 .lc3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* extra utilities used by converted leaf pages */
.dk2030 .opacity-60{opacity:.6;} .dk2030 .opacity-80{opacity:.8;} .dk2030 .cursor-not-allowed{cursor:not-allowed;} .dk2030 .cursor-default{cursor:default;}
.dk2030 .text-right{text-align:right;} .dk2030 .text-white{color:#fff;}
.dk2030 .border-2{border:2px solid var(--line);}
.dk2030 .space-y-2>*+*{margin-top:8px;} .dk2030 .space-y-2\.5>*+*{margin-top:10px;} .dk2030 .space-y-3>*+*{margin-top:12px;} .dk2030 .space-y-4>*+*{margin-top:16px;} .dk2030 .space-y-5>*+*{margin-top:20px;}
.dk2030 .rounded-\[8px\]{border-radius:8px;} .dk2030 .rounded-\[10px\]{border-radius:8px;} .dk2030 .rounded-\[12px\]{border-radius:12px;} .dk2030 .rounded-\[14px\]{border-radius:12px;} .dk2030 .rounded-\[16px\]{border-radius:var(--r-card);} .dk2030 .rounded-\[18px\]{border-radius:var(--r-card);} .dk2030 .rounded-\[20px\]{border-radius:var(--r-card);}
.dk2030 .w-14{width:56px;} .dk2030 .h-14{height:56px;} .dk2030 .mt-0\.5{margin-top:2px;} .dk2030 .pt-0\.5{padding-top:2px;}
.dk2030 .underline{text-decoration:underline;} .dk2030 .hover\:underline:hover{text-decoration:underline;}
/* onboarding chips (native, no Alpine) */
.dk2030 .dk-onb label.chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.dk2030 .dk-onb .frow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.dk2030 .dk-onb .fl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin:22px 0 10px;}
.dk2030 .gradient-bg{background:var(--signal);} .dk2030 .text-primary{color:var(--a1);}
.dk2030 .dk-invite-cards{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;}
.dk2030 .dk-invite-cards::-webkit-scrollbar{display:none;}
.dk2030 .dk-invite-card{flex-shrink:0;width:180px;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--s1);display:block;}
.dk2030 .dk-invite-card input{position:absolute;opacity:0;pointer-events:none;}
.dk2030 .dk-invite-card .cv{width:100%;height:96px;object-fit:cover;display:block;background:var(--s3);}
.dk2030 .dk-invite-card .nm{padding:8px 10px;font-size:13px;font-weight:600;color:var(--t1);}
.dk2030 .dk-invite-card.on{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal);}

/* ════════ AUTH (invme 2030) — standalone login/signup shell ════════ */
.dk2030-auth{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--t1);font-family:var(--font);letter-spacing:normal;}
.dk2030-auth .au-head{display:flex;align-items:center;gap:10px;padding:0 20px;height:62px;flex-shrink:0;}
/* The real mark, same asset as the app shell. It is one flat blue on transparent, so
   it reads on both themes without a per-theme variant. */
.dk2030-auth .au-logo{display:flex;align-items:center;text-decoration:none;}
.dk2030-auth .au-logo img{display:block;height:24px;width:auto;}
.dk2030-auth .au-spacer{flex:1;}
.dk2030-auth .au-theme{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--s2);color:var(--t1);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.dk2030-auth .au-lang{position:relative;}
.dk2030-auth .au-lang summary{list-style:none;cursor:pointer;color:var(--t2);font-size:13px;font-weight:600;display:flex;align-items:center;gap:4px;padding:8px;}
.dk2030-auth .au-lang summary::-webkit-details-marker{display:none;}
.dk2030-auth .au-lang .au-langmenu{position:absolute;right:0;top:calc(100% + 4px);background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:5px;z-index:30;min-width:120px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);}
.dk2030-auth .au-lang .au-langmenu a{display:block;padding:8px 12px;border-radius:8px;color:var(--t1);font-size:13px;font-weight:600;text-decoration:none;}
.dk2030-auth .au-lang .au-langmenu a:hover{background:var(--s2);}
.dk2030-auth .au-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:24px 20px 48px;}
.dk2030-auth .au-card{width:100%;max-width:400px;}
.dk2030-auth .au-msg{padding:11px 14px;border-radius:12px;font-size:13px;font-weight:600;margin-bottom:10px;}
.dk2030-auth .au-msg.ok{background:rgba(53,192,97,.12);color:#35C061;}
.dk2030-auth .au-msg.err{background:rgba(255,90,90,.12);color:#ff7a7a;}
.dk2030-auth .au-msg.info{background:rgba(0,122,255,.1);color:var(--a1);}
/* allauth form fields inside the auth card */
.dk2030-auth h1,.dk2030-auth .auth-h{font-size:24px;font-weight:600;letter-spacing:normal;color:var(--t1);margin-bottom:6px;}
.dk2030-auth p{color:var(--t2);font-size:14px;}
.dk2030-auth form input[type=text],.dk2030-auth form input[type=email],.dk2030-auth form input[type=password],.dk2030-auth form input[type=tel],.dk2030-auth form input[type=number],.dk2030-auth form select{
  width:100%;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:14px;color:var(--t1);outline:none;transition:border-color .15s;font-family:inherit;}
.dk2030-auth form input:focus,.dk2030-auth form select:focus{border-color:var(--signal);}
.dk2030-auth form input::placeholder{color:var(--t3);}
.dk2030-auth form label{font-size:13px;font-weight:600;color:var(--t1);display:block;margin-bottom:6px;}
.dk2030-auth .helptext{font-size:12px;color:var(--t2);margin-top:4px;display:block;}
.dk2030-auth .errorlist{list-style:none;padding:0;margin:4px 0 0;}
.dk2030-auth .errorlist li{font-size:12px;color:#ff7a7a;}
.dk2030-auth button[type=submit],.dk2030-auth .btn-primary{width:100%;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--a1-fill);color:#fff;border:0;border-radius:var(--r-ctl);padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;}
.dk2030-auth button[type=submit]:hover,.dk2030-auth .btn-primary:hover{opacity:.92;}
.dk2030-auth a{color:var(--a1);}

/* ---- Report popover (components/_report_button.html) ---- */
/* ── Kebab (⋮) — one home for secondary actions ────────────────────────────
   Owner: "вместо этой кнопки 3 точки и туда убери уже блок + туда другие функции
   сувать будем". Native <details>, so it needs no JS to open; the shared
   outside-click/Esc handler in base_2030 closes it. Rows are full-width so new
   actions drop in without touching layout. */
.dk2030 .dk-kebab{position:relative;display:inline-flex;}
.dk2030 .dk-kebab>summary{list-style:none;cursor:pointer;}
.dk2030 .dk-kebab>summary::-webkit-details-marker{display:none;}
.dk2030 .dk-kebab[open]>summary{color:var(--t1);background:var(--s3);border-radius:var(--r-pill);}
.dk2030 .dk-kebab-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:90;min-width:224px;
  background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.3);}
.dk2030 .dk-kebab-i{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:9px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;color:var(--t1);text-align:left;
  transition:background .12s;}
.dk2030 .dk-kebab-i:hover{background:var(--s3);}
.dk2030 .dk-kebab-danger{color:#E73B3B;}
.dk2030 .dk-kebab-menu form{margin:0;}
/* Report lives inside the menu as a row that expands INLINE — its floating popover
   would otherwise hang off the menu and fight the scroll container's clipping. */
.dk2030 .dk-kebab-menu .dk-report{display:block;width:100%;}
.dk2030 .dk-kebab-menu .dk-report>summary{display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--t1);}
.dk2030 .dk-kebab-menu .dk-report>summary:hover{background:var(--s3);}
.dk2030 .dk-kebab-menu .dk-report-pop{position:static;width:auto;padding:8px 10px 2px;
  border:0;box-shadow:none;background:transparent;}
.dk2030 .dk-kebab-menu .dk-report-h{display:none;}
@media(max-width:600px){
  .dk2030 .dk-kebab-menu{position:fixed;left:12px;right:12px;top:auto;
    bottom:calc(96px + env(safe-area-inset-bottom));min-width:0;}
}

.dk2030 .dk-report{position:relative;display:inline-flex;}
.dk2030 .dk-report>summary{list-style:none;cursor:pointer;}
.dk2030 .dk-report>summary::-webkit-details-marker{display:none;}
.dk2030 .dk-report[open]>summary{color:var(--t1);}
.dk2030 .dk-report-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:80;width:272px;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.3);}
.dk2030 .dk-report-h{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:8px;}
.dk2030 .dk-report-l{display:block;font-size:12px;color:var(--t2);margin-bottom:4px;}
.dk2030 .dk-report-in{width:100%;background:var(--s1);border:1px solid var(--line);border-radius:8px;color:var(--t1);font-size:13px;padding:7px 9px;margin-bottom:8px;font-family:inherit;resize:none;}
.dk2030 .dk-report-row{display:flex;justify-content:flex-end;gap:8px;}
.dk2030 .dk-report-cancel{background:transparent;border:1px solid var(--line);border-radius:var(--r-ctl);color:var(--t2);font-size:13px;padding:6px 12px;cursor:pointer;}
.dk2030 .dk-report-send{background:#c62828;border:0;border-radius:var(--r-ctl);color:#fff;font-size:13px;font-weight:600;padding:6px 12px;cursor:pointer;}
.dk2030 .dk-report-send:hover{opacity:.9;}
/* Mobile: the popover anchors to a <details> that may sit at the right edge —
   absolute left/right both overflow. Fixed bottom sheet above the tab bar instead. */
@media (max-width:600px){
  .dk2030 .dk-report-pop{position:fixed;left:12px;right:12px;width:auto;top:auto;bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;}
  .dk2030 .pill-sm{padding:9px 16px;}  /* >=36px tap target on the pay buttons */
}

/* ==== Motion pass (D2, 2026-06-11) — page-level polish. Everything below is
   neutralized by the global prefers-reduced-motion + data-motion="off" rules. ==== */

/* Cards rise in on first paint AND when htmx appends a new page (animations
   re-run for freshly inserted nodes). --i is stamped by the shell JS. */
@keyframes dkCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dk2030 .fcard,.dk2030 .dk-up,.dk2030 .feed-empty{animation:dkCardIn .38s var(--ease) backwards;animation-delay:calc(var(--i,0)*38ms);}
.dk2030 .fcard:hover{transform:translateY(-2px);box-shadow:0 10px 30px -16px rgba(0,0,0,.4);}

/* Tactile press feedback — buttons, pills, chips, nav. */
.dk2030 :is(.pill,.btn-primary,.btn-secondary,.act,.chip,.loc-chips a,.dk-bottomnav a,.funnel,.dk-report-send,.dk-report-cancel){transition:transform .12s var(--ease),opacity .15s,background .15s,border-color .15s,color .15s,box-shadow .2s;}
.dk2030 :is(.pill,.btn-primary,.btn-secondary,.act,.chip,.loc-chips a,.dk-bottomnav a,.funnel,.dk-report-send,.dk-report-cancel):active{transform:scale(.95);}

/* Report popover joins the screenIn family (loc-panel/filterpanel already do). */
.dk2030 .dk-report-pop{animation:screenIn .18s var(--ease);}

/* Modal close — reverse of dkFade/dkPop, driven by .dk-out from dkCloseModal(). */
@keyframes dkFadeOut{to{opacity:0}}
@keyframes dkPopOut{to{transform:translateY(14px) scale(.985);opacity:0}}
.dk2030 .dk-modal-bg.dk-out{animation:dkFadeOut .16s var(--ease) forwards;}
.dk2030 .dk-modal-bg.dk-out .dk-modal{animation:dkPopOut .16s var(--ease) forwards;}

/* Toasts — django messages finally have a 2030 home. Pure CSS lifecycle:
   slide in, hold ~4s, fade out (pointer-events die with opacity). */
.dk2030 .dk-toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(480px,calc(100vw - 24px));}
@keyframes dkToastIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dkToastOut{to{opacity:0;transform:translateY(-8px)}}
.dk2030 .dk-toast{pointer-events:auto;max-width:100%;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:500;color:var(--t1);background:var(--s2);border:1px solid var(--line-2);box-shadow:0 14px 40px -12px rgba(0,0,0,.45);animation:dkToastIn .28s var(--spring) backwards,dkToastOut .4s var(--ease) 4.2s forwards;}
.dk2030 .dk-toast.success{border-color:rgba(53,192,97,.5);}
.dk2030 .dk-toast.error{border-color:rgba(231,59,59,.6);}
@media (max-width:600px){.dk2030 .dk-toasts{top:calc(10px + env(safe-area-inset-top));}}

/* Cross-document page transitions — app-like soft fade between full loads
   (Chrome/Edge 126+, harmless elsewhere). */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.17s;}
}
/* First-paint stagger ladder — pure CSS (no JS race with progressive render).
   nth-child counts ALL siblings, so the ladder is approximate where chips/banners
   sit between cards — visually that's fine. htmx-appended pages start at 0 again. */
.dk2030 .fcard:nth-child(2){--i:1}.dk2030 .fcard:nth-child(3){--i:2}
.dk2030 .fcard:nth-child(4){--i:3}.dk2030 .fcard:nth-child(5){--i:4}
.dk2030 .fcard:nth-child(6){--i:5}.dk2030 .fcard:nth-child(7){--i:6}
.dk2030 .fcard:nth-child(n+8){--i:7}

/* ---- Nav badges + bell (E2: unread counts were lost in the 2030 migration) ---- */
.dk2030 .dk-navbadge{margin-left:auto;min-width:19px;height:19px;padding:0 5px;border-radius:8px;background:var(--a1-fill);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
.dk2030 .dk-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--t2);transition:color .15s,background .15s;}
.dk2030 .dk-bell:hover{color:var(--t1);background:var(--s2);}
.dk2030 .dk-bell-dot{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--signal);border:2px solid var(--bg);}
.dk2030 .dk-navb-msg{position:relative;}
.dk2030 .dk-navb-msg .dk-bell-dot{top:8px;right:14px;}

/* Keyboard a11y: visible focus ring on everything interactive (was inputs-only). */
.dk2030 :is(a,button,summary,[role=button]):focus-visible{outline:2px solid var(--a1);outline-offset:2px;border-radius:6px;}

/* ==== City board rails (G3) — horizontal scrollers for the hub overview ==== */
.dk2030 .dk-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;}
.dk2030 .dk-rail::-webkit-scrollbar{display:none;}
.dk2030 .dk-tile{flex:1 0 168px;max-width:230px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;
  animation:dkCardIn .38s var(--ease) backwards;animation-delay:calc(var(--i,0)*38ms);}
.dk2030 .dk-tile:nth-child(2){--i:1}.dk2030 .dk-tile:nth-child(3){--i:2}
.dk2030 .dk-tile:nth-child(4){--i:3}.dk2030 .dk-tile:nth-child(n+5){--i:4}
.dk2030 .dk-tile-cover{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:12px;
  overflow:hidden;border:1px solid var(--line);transition:transform .2s var(--spring),border-color .2s;}
.dk2030 .dk-tile-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .dk-tile:hover .dk-tile-cover{transform:translateY(-2px);border-color:var(--line-2);}
.dk2030 .dk-tile:active .dk-tile-cover{transform:scale(.97);}
.dk2030 .dk-tile-badge{position:absolute;left:7px;top:7px;padding:3px 8px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;background:rgba(8,8,14,.66);color:#fff;backdrop-filter:blur(6px);}
.dk2030 .dk-tile-cat{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--covt);
  text-align:center;padding:0 10px;}
.dk2030 .dk-tile-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .dk-tile-meta{font-size:12px;color:var(--t3);}
.dk2030 .dk-board-cta{margin-top:18px;padding:18px;border-radius:var(--r-card);border:0;
  background:var(--s1);text-align:center;box-shadow:var(--edge);}
.dk2030 .dk-board-cta .big{font-size:16px;font-weight:600;color:var(--t1);}
.dk2030 .dk-board-cta .sub{font-size:13px;color:var(--t2);margin:4px 0 12px;}
/* City waitlist (gap #3): pre-launch demand gate at the TOP of the city board. */
.dk2030 .dk-waitlist{position:relative;margin:0 0 18px;padding:18px;border-radius:var(--r-card);
  border:1px solid var(--a1);background:color-mix(in srgb,var(--a1) 7%,var(--s1));}
.dk2030 .dk-wl-kick{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--a1);}
.dk2030 .dk-wl-title{font-size:17px;font-weight:600;color:var(--t1);margin:3px 0 2px;letter-spacing:normal;}
.dk2030 .dk-wl-sub{font-size:13px;color:var(--t2);margin-bottom:12px;}
.dk2030 .dk-wl-bar{height:8px;border-radius:99px;background:var(--s3);overflow:hidden;margin-bottom:6px;}
.dk2030 .dk-wl-fill{height:100%;min-width:6px;background:var(--a1);border-radius:99px;transition:width .4s var(--ease);}
.dk2030 .dk-wl-count{font-size:12px;color:var(--t2);margin-bottom:12px;}
.dk2030 .dk-wl-count b{color:var(--t1);font-weight:600;}
.dk2030 .dk-wl-form{display:flex;gap:8px;flex-wrap:wrap;}
.dk2030 .dk-wl-form .sf-input{flex:1 1 200px;}
.dk2030 .dk-wl-pos{font-size:22px;font-weight:600;color:var(--t1);letter-spacing:normal;margin-bottom:2px;}
.dk2030 .dk-wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
/* Compact plan rows — "Plans by people" on the board: full-card social proof in ~90px. */
.dk2030 .dk-row{display:flex;gap:12px;align-items:center;padding:9px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:12px;background:var(--s1);text-decoration:none;
  transition:transform .15s var(--ease),border-color .15s;animation:dkCardIn .38s var(--ease) backwards;}
.dk2030 .dk-row:nth-child(2){animation-delay:50ms}.dk2030 .dk-row:nth-child(3){animation-delay:100ms}
.dk2030 .dk-row:hover{transform:translateY(-1px);border-color:var(--line-2);}
.dk2030 .dk-row:active{transform:scale(.98);}
.dk2030 .dk-row-thumb{position:relative;flex:0 0 78px;width:78px;height:78px;border-radius:8px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;}
.dk2030 .dk-row-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .dk-row-cat{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--covt);text-align:center;padding:0 6px;}
.dk2030 .dk-row-live{position:absolute;left:5px;top:5px;}
.dk2030 .dk-row-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.dk2030 .dk-row-ttl{font-size:14px;font-weight:600;color:var(--t1);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .dk-row-sub{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dk-row-going{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);}
.dk2030 .dk-row-going .avstack .av{width:20px;height:20px;font-size:9px;}
.dk2030 .dk-row-going b{color:var(--t1);}
@media (max-width:600px){
  .dk2030 .dk-rail{margin:0 -14px;padding:2px 14px 10px;}
  .dk2030 .dk-tile{flex-basis:150px;}
  .dk2030 .dk-row-thumb{flex-basis:68px;width:68px;height:68px;}
}

/* Star rating picker (reviews) — CSS-only, reversed DOM so :hover/:checked fills left */
.dk2030 .dk-rate{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.dk2030 .dk-rate input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dk2030 .dk-rate label{font-size:26px;line-height:1;color:var(--line-2);cursor:pointer;transition:color .1s}
.dk2030 .dk-rate label:hover,
.dk2030 .dk-rate label:hover ~ label,
.dk2030 .dk-rate input:checked ~ label{color:#ffb400}
.dk2030 .dk-rate input:focus-visible + label{outline:2px solid var(--a1);outline-offset:2px;border-radius:4px}

/* ══ Blog (Wagtail) ═══════════════════════════════════════════════════════════
   Editorial typography: a comfortable reading measure and larger body text than the
   app surfaces, because these pages are read start-to-finish by first-time visitors
   arriving from search — not scanned like the feed. */
/* The article follows the FEED event card's framing (.fcard): a bordered card
   with inner padding, and the photo INSET with its own 16px rounding — not
   flush to the card edges. Without the padding the text sat against the card
   border; without the inset the hero hid the card's own frame. */
.dk2030 .blg{max-width:720px;margin:0 auto;padding:18px var(--pad) 28px}
.dk2030 .blg-hero{margin:0 0 20px;border-radius:var(--r-card);overflow:hidden;background:var(--s2)}
.dk2030 .blg-hero-img,.dk2030 .blg-hero img{width:100%;height:auto;display:block}
.dk2030 .blg-head{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.dk2030 .blg-ttl{font-size:32px;line-height:1.15;font-weight:600;letter-spacing:normal;color:var(--t1)}
.dk2030 .blg-intro{font-size:17px;line-height:1.55;color:var(--t2)}
.dk2030 .blg-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t3);
  padding-top:10px;border-top:1px solid var(--line)}

/* Table of contents — only rendered for 3+ headings (see the template). */
.dk2030 .blg-toc{background:var(--s2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:24px}
.dk2030 .blg-toc-t{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--t3);margin-bottom:8px}
.dk2030 .blg-toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.dk2030 .blg-toc a{font-size:14px;color:var(--t1);text-decoration:none}
.dk2030 .blg-toc a:hover{color:var(--a1)}
.dk2030 .blg-toc-h3{padding-left:14px}

/* Body */
.dk2030 .blg-body{font-size:17px;line-height:1.65;color:var(--t1)}
.dk2030 .blg-h2{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:normal;
  color:var(--t1);margin:34px 0 12px;scroll-margin-top:90px}
.dk2030 .blg-h3{font-size:20px;line-height:1.3;font-weight:600;color:var(--t1);
  margin:26px 0 10px;scroll-margin-top:90px}
.dk2030 .blg-rt{margin:0 0 16px}
.dk2030 .blg-rt p{margin:0 0 14px}
.dk2030 .blg-rt a{color:var(--a1);text-decoration:underline;text-underline-offset:2px}
.dk2030 .blg-rt ul,.dk2030 .blg-rt ol{margin:0 0 14px;padding-left:22px}
.dk2030 .blg-rt li{margin:0 0 6px}
.dk2030 .blg-quote{margin:24px 0;padding:2px 0 2px 18px;border-left:3px solid var(--a1)}
.dk2030 .blg-quote blockquote{font-size:20px;line-height:1.5;color:var(--t1);font-style:italic;margin:0}
.dk2030 .blg-quote figcaption{margin-top:8px;font-size:13px;color:var(--t3)}
.dk2030 .blg-fig{margin:24px 0}
.dk2030 .blg-fig img{width:100%;height:auto;display:block;border-radius:12px}
.dk2030 .blg-fig figcaption{margin-top:8px;font-size:13px;color:var(--t3);text-align:center}
.dk2030 .blg-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.dk2030 .blg-gal img{border-radius:12px}
.dk2030 .blg-embed{margin:24px 0;position:relative;border-radius:12px;overflow:hidden;background:var(--s2)}
.dk2030 .blg-embed iframe{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0}
.dk2030 .blg-embed-out{margin:18px 0}
.dk2030 .blg-embed-out a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-ctl);
  border:1px solid var(--line);background:var(--s2);color:var(--t2);font-size:13px;text-decoration:none;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk2030 .blg-embed-out a:hover{color:var(--t1);border-color:var(--line-2)}

/* Listicle — the numbered format most top-of-funnel articles use. */
.dk2030 .blg-list{list-style:none;counter-reset:blgli var(--blg-start,0);padding:0;margin:18px 0}
.dk2030 .blg-li{counter-increment:blgli;position:relative;padding-left:44px;margin:0 0 18px}
.dk2030 .blg-li::before{content:counter(blgli);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;background:var(--s3);color:var(--a1);
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.dk2030 .blg-li-t{display:block;font-size:17px;font-weight:600;color:var(--t1);line-height:1.4}
.dk2030 .blg-li-t p{display:inline;margin:0}
.dk2030 .blg-li-t a{color:var(--a1);text-decoration:underline;text-underline-offset:2px}
.dk2030 .blg-li .blg-rt{margin-top:6px;color:var(--t2);font-size:16px}

.dk2030 .blg-tags{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 8px}
.dk2030 .blg-related{margin-top:30px}

/* ── Promo: the conversion unit ──────────────────────────────────────────────
   Visually distinct from the article (accent wash + border) so it reads as an offer
   rather than as body copy, but built from the same tiles as the rest of the site so
   a click lands on familiar markup. */
.dk2030 .dk-promo{margin:30px 0;padding:18px;border-radius:var(--r-card);
  border:1px solid color-mix(in srgb,var(--a1) 28%,var(--line));
  background:color-mix(in srgb,var(--a1) 7%,var(--s2))}
.dk2030 .dk-promo-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.dk2030 .dk-promo-kicker{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--a1)}
.dk2030 .dk-promo-ttl{font-size:20px;line-height:1.25;font-weight:600;color:var(--t1);margin:0}
.dk2030 .dk-promo-sub{font-size:14px;line-height:1.5;color:var(--t2);margin:0}
/* Right-rail plan cards (blog): photo-first with a loud CTA — the rail sells
   "someone near you wants company", so it looks like a mini dating card, not a
   text link list. Gradient matches the Plus badge (brand, already in the system). */
.dk2030 .dk-railplan{display:flex;flex-direction:column;gap:6px;padding:10px;margin-top:10px;
  border:0;border-radius:var(--r-card);background:var(--s1);text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease;box-shadow:var(--edge);}
.dk2030 .dk-railplan:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.dk2030 .dk-railplan:active{transform:scale(.98)}
.dk2030 .dk-railplan-media{position:relative;display:flex;align-items:center;justify-content:center;
  height:118px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center 30%}
.dk2030 .dk-railplan-badge{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:9999px;
  font-size:11px;font-weight:600;color:#fff;background:rgba(8,8,13,.55);backdrop-filter:blur(6px)}
.dk2030 .dk-railplan-badge.hot{background:linear-gradient(135deg,#FF375F,#FF9F0A)}
.dk2030 .dk-railplan-t{font-size:14px;font-weight:600;line-height:1.3;color:var(--t1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dk2030 .dk-railplan-m{font-size:12px;color:var(--t3)}
.dk2030 .dk-railplan-cta{display:flex;align-items:center;justify-content:center;margin-top:2px;
  padding:8px 0;border-radius:9999px;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#007AFF,#7847E9)}
.dk2030 .dk-railplan:hover .dk-railplan-cta{filter:brightness(1.08)}
.dk2030 .dk-promo-rail{margin:0 -4px 14px}
.dk2030 .dk-promo-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dk2030 .dk-promo-note{font-size:12px;color:var(--t3)}

/* ── Index ─────────────────────────────────────────────────────────────────── */
.dk2030 .blg-index{max-width:860px;margin:0 auto;padding:18px var(--pad) 24px}
.dk2030 .blg-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;
  scrollbar-width:none}
.dk2030 .blg-chips::-webkit-scrollbar{display:none}
.dk2030 .blg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.dk2030 .blg-card{display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;
  border:0;background:var(--s2);text-decoration:none;padding:10px 10px 0;
  transition:transform .18s ease,box-shadow .18s ease;box-shadow:var(--edge);}
.dk2030 .blg-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.dk2030 .blg-card:active{transform:scale(.99)}
.dk2030 .blg-card-cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:12px}
.dk2030 .blg-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.dk2030 .blg-card-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.dk2030 .blg-card-ttl{font-size:16px;font-weight:600;line-height:1.3;color:var(--t1)}
.dk2030 .blg-card-sub{font-size:13px;line-height:1.45;color:var(--t2)}
.dk2030 .blg-card-meta{font-size:12px;color:var(--t3);margin-top:2px}
.dk2030 .blg-pager{display:flex;align-items:center;gap:12px;justify-content:center;margin:24px 0 8px}

@media (max-width:600px){
  .dk2030 .blg-ttl{font-size:26px}
  .dk2030 .blg-body{font-size:16px}
  .dk2030 .blg-h2{font-size:20px}
  .dk2030 .blg-grid{grid-template-columns:1fr}
}

/* Share sheet — the fallback when there is no native share (i.e. every desktop).
   Bottom sheet on mobile, centred card on desktop; same glass language as the islands. */
.dk2030 .dk-sharesheet{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;animation:dkFade .16s ease-out}
.dk2030 .dk-sharesheet-in{width:min(420px,100%);margin:12px;border-radius:var(--r-card);overflow:hidden;
  background:var(--s2);border:0;box-shadow:var(--edge),0 12px 40px rgba(0,0,0,.35);
  animation:dkPop .18s cubic-bezier(.2,.9,.3,1.2)}
.dk2030 .dk-shareopt{display:block;padding:15px 18px;font-size:15px;color:var(--t1);
  text-decoration:none;border-bottom:1px solid var(--line)}
.dk2030 .dk-shareopt:last-child{border-bottom:0;color:var(--a1)}
.dk2030 .dk-shareopt:active{background:var(--s3)}
@media(min-width:601px){.dk2030 .dk-sharesheet{align-items:center}}

/* Profile photo strip — a profile is a series, not one frame (4 034 people arrived
   from the old site with a gallery). Scrolls horizontally like the city-board rails. */
.dk2030 .dk-gallery{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.dk2030 .dk-gallery::-webkit-scrollbar{display:none}
.dk2030 .dk-gallery{scrollbar-width:none}
.dk2030 .dk-gal-item{flex:0 0 auto;width:120px;height:160px;border-radius:12px;
  overflow:hidden;background:var(--s3);scroll-snap-align:start;display:block}
.dk2030 .dk-gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .18s ease}
.dk2030 .dk-gal-item:hover img{transform:scale(1.04)}
@media(max-width:600px){.dk2030 .dk-gal-item{width:100px;height:132px}}

/* Lightbox: tapping a photo ENLARGES it (the old invme opened a fullscreen react-images
   carousel; this is the native port). The <a href> underneath stays a real link to the
   file, so no-JS still opens the image in a tab instead of dead-ending. */
.dk2030 .dk-lb{position:fixed;inset:0;z-index:260;background:rgba(4,4,6,.94);display:flex;
  align-items:center;justify-content:center;animation:dkFade .16s ease}
.dk2030 .dk-lb-stage{display:flex;align-items:center;justify-content:center;}
.dk2030 .dk-lb video{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;background:#000;}
.dk2030 .dk-lb img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;
  box-shadow:0 8px 40px rgba(0,0,0,.6);user-select:none}
.dk2030 .dk-lb-x,.dk2030 .dk-lb-prev,.dk2030 .dk-lb-next{position:absolute;border:0;cursor:pointer;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;
  transition:background .15s}
.dk2030 .dk-lb-x:hover,.dk2030 .dk-lb-prev:hover,.dk2030 .dk-lb-next:hover{background:rgba(255,255,255,.24)}
.dk2030 .dk-lb-x{top:14px;right:14px}
.dk2030 .dk-lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.dk2030 .dk-lb-next{right:12px;top:50%;transform:translateY(-50%)}
.dk2030 .dk-lb-count{position:absolute;top:24px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:13px;font-weight:600;letter-spacing:.02em}
.dk2030 .dk-lb[data-single] .dk-lb-prev,.dk2030 .dk-lb[data-single] .dk-lb-next,
.dk2030 .dk-lb[data-single] .dk-lb-count{display:none}
@media(max-width:600px){.dk2030 .dk-lb-x{top:calc(10px + env(safe-area-inset-top))}
  .dk2030 .dk-lb-prev{left:6px}.dk2030 .dk-lb-next{right:6px}}

/* ════════ Migrated-content polish (2026-08-23) ════════ */
/* Avatar above the cover: the cover is positioned, the avatar was not, so the cover
   painted over the top half of the initial-letter avatar. */
.dk2030 .dk-prof-av{position:relative;z-index:2;}
/* Photo heroes: people photos are portraits; a centered 16:9 crop cuts the face off.
   Favour the upper part of the frame. */
.dk2030 .dk-modal-hero img{object-position:50% 25%;}
/* All photos, not just the first: CSS-only swipe/scroll carousel. */
.dk2030 .dk-hero-scroll{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.dk2030 .dk-hero-scroll::-webkit-scrollbar{display:none;}
.dk2030 .dk-hero-scroll img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:50% 25%;scroll-snap-align:start;}
/* One slide = blurred backdrop + the whole photo. Portrait posters were beheaded by
   the 1.9:1 landscape crop; now the frame is 4:5 (capped so a desktop column stays
   readable) and the shot is contained inside it. */
.dk2030 .dk-modal-hero.shot{width:100%;aspect-ratio:4/5;max-height:560px;overflow:hidden;}
.dk2030 .dk-hero-slide{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;overflow:hidden;}
.dk2030 .dk-hero-slide img:not(.blurfill){position:relative;z-index:1;width:100%;height:100%;object-fit:contain;}
/* A media tile, not a bare player: the slide shows the frame, the tap opens it
   fullscreen. Native controls inside a 300 px slide look like a debug page. */
.dk2030 a.dk-hero-media{display:block;width:100%;height:100%;position:relative;}
.dk2030 .dk-hero-slide video{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;background:#000;touch-action:pan-x;pointer-events:none;}
/* Sound button on a clip tile — Instagram's placement and gesture: bottom-right, and it
   turns the sound on where you are instead of throwing you into another view. It sits
   OUTSIDE the media link on purpose: a button inside a link is invalid markup and the
   two would fight over the same tap. */
.dk2030 .dk-sound{position:absolute;right:12px;bottom:12px;z-index:3;border:0;cursor:pointer;
  width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:#fff;padding:0;
  transition:transform .16s var(--ease-invme,ease),background .16s var(--ease-invme,ease);}
.dk2030 .dk-sound:hover{background:rgba(0,0,0,.72);}
.dk2030 .dk-sound:active{transform:scale(.9);}
.dk2030 .dk-sound svg{width:16px;height:16px;}
.dk2030 .dk-sound .on{display:none;}
.dk2030 .dk-sound.on .off{display:none;}
.dk2030 .dk-sound.on .on{display:block;}
@media (prefers-reduced-motion: reduce){.dk2030 .dk-sound{transition:none;}}
.dk2030 .dk-hero-count{position:absolute;right:12px;top:12px;z-index:2;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:9999px;backdrop-filter:blur(6px);pointer-events:none;}
/* A listing without a photo used to open on a 300 px empty slab with one word in the
   corner. Keep the category label, lose the void. */
.dk2030 .dk-modal-hero.dk-modal-cover{aspect-ratio:auto;min-height:0;padding:14px 18px;}
/* Paid is not good news the way Free is — don't paint it the same green. */
.dk2030 .metabar .price.price-paid{color:var(--t1);}
.dk2030 .pill-ended{background:var(--s3);color:var(--t2);cursor:default;}

/* ── Language switcher (top-bar island) ───────────────────────────────────────
   Native <details>. The island is position:absolute with no overflow of its own,
   so an absolutely-positioned menu is never clipped by it. On phones the menu
   becomes a bottom sheet — the same escape the category grid and the report
   popover use, because a right-anchored panel clips off a 375px viewport. */
.dk2030 .dk-langpick{position:relative;flex:none;}
.dk2030 .dk-langpick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  height:34px;padding:0 9px;border-radius:var(--r-ctl);color:var(--t2);
  background:transparent;border:1px solid var(--line);
  transition:color .15s,border-color .15s,transform .15s;}
.dk2030 .dk-langpick>summary::-webkit-details-marker{display:none;}
.dk2030 .dk-langpick>summary:hover{color:var(--t1);border-color:var(--line-2);}
.dk2030 .dk-langpick>summary:active{transform:scale(.94);}
.dk2030 .dk-langpick[open]>summary{color:var(--a1);border-color:transparent;
  background:color-mix(in srgb,var(--signal) 13%,transparent);}
.dk2030 .dk-langnow{font-size:12px;font-weight:600;letter-spacing:.02em;}
.dk2030 .dk-langmenu{position:absolute;right:0;top:42px;z-index:60;min-width:172px;padding:6px;
  border-radius:var(--r-card);background:var(--s1);border:0;
  box-shadow:var(--edge),0 22px 54px -16px rgba(0,0,0,.55);animation:screenIn .18s var(--ease);
  display:flex;flex-direction:column;gap:2px;}
.dk2030 .dk-langmenu form{margin:0;}
.dk2030 .dk-langopt{width:100%;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--t2);background:none;border:0;cursor:pointer;text-align:left;
  transition:background .12s,color .12s;}
.dk2030 .dk-langopt:hover{background:var(--s2);color:var(--t1);}
.dk2030 .dk-langopt.on{background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--a1);}
.dk2030 .dk-langcode{font-size:11px;font-weight:600;opacity:.75;min-width:20px;}
/* Two placements, exactly one visible at a time: with the account in a wide sidebar
   (VK does the same), in the island once the sidebar has collapsed. */
.dk2030 .dk-lang-side{display:inline-flex;align-items:center;}
.dk2030 .dk-lang-top{display:none;}
@media(max-width:880px){
  .dk2030 .dk-lang-side{display:none;}
  .dk2030 .dk-lang-top{display:inline-flex;align-items:center;}
}
/* The sidebar copy sits at the bottom of the screen, so its menu opens UPWARD. */
.dk2030 .dk-lang-side .dk-langmenu{top:auto;bottom:44px;right:0;}
.dk2030 .dk-lang-side .dk-langnow{display:none;}
.dk2030 .dk-lang-side .dk-langpick>summary{padding:0 8px;}
@media(max-width:600px){
  /* On a phone the island carries brand + place only, so the switcher lives in the
     drawer -- where the sidebar is 320px wide and shows it. */
  .dk2030 .dk-lang-side{display:inline-flex;}
  .dk2030 .dk-lang-top{display:none;}
  .dk2030 .dk-langnow{display:none;}
  .dk2030 .dk-langpick>summary{padding:0 8px;}
  .dk2030 .dk-langmenu{position:fixed;left:12px;right:12px;top:auto;
    bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;}
}

/* ── Location picker: type-ahead ──────────────────────────────────────────────
   The chip lists are shortcuts; this is the way to any of the ~35k seeded cities.
   Rows arrive from geo:location_search as ready-made set_location links. */
.dk2030 .loc-find{position:relative;display:flex;align-items:center;margin-bottom:10px;}
.dk2030 .loc-find svg{position:absolute;left:11px;color:var(--t3);pointer-events:none;}
.dk2030 .loc-find input{width:100%;height:38px;padding:0 12px 0 34px;border-radius:var(--r-ctl);
  font-size:13px;font-weight:500;color:var(--t1);background:var(--s2);border:1px solid var(--line);
  outline:none;transition:border-color .15s,background .15s;}
.dk2030 .loc-find input::placeholder{color:var(--t3);font-weight:500;}
.dk2030 .loc-find input:focus{border-color:var(--a1);background:var(--s1);}
.dk2030 .loc-find input::-webkit-search-cancel-button{-webkit-appearance:none;}
/* Empty container must not draw a border/gap before the first keystroke. */
.dk2030 #loc-results:empty{display:none;}
.dk2030 #loc-results{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;
  max-height:250px;overflow-y:auto;scrollbar-width:none;}
.dk2030 .loc-res{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--t2);transition:background .12s,color .12s;}
.dk2030 .loc-res:hover{background:var(--s2);color:var(--t1);}
.dk2030 .loc-res-ico{flex:none;display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;color:var(--t3);}
.dk2030 .loc-res:hover .loc-res-ico{color:var(--a1);}
.dk2030 .loc-res-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .loc-res-sub{color:var(--t3);font-weight:400;}
.dk2030 .loc-res-sub::before{content:", ";}
.dk2030 .loc-res-none{padding:10px;font-size:13px;color:var(--t3);}

/* ── People deck (matching) ─────────────────────────────────────────────────
   A card is a photograph of a person, corner to corner. Everything written sits
   ON the picture: a name on a scrim, a row of glass chips, and — only when there
   is something to read — a sheet that slides up when asked for.

   This replaced a split card (photo on top, a bordered text panel underneath, two
   buttons in a footer strip). That seam is what made it read as a widget on a page
   instead of the page itself.

   Survey first, for the record: nothing on GitHub was portable enough to lift.
   Every top-starred "tinder card" repository ships GESTURES, not design, and each
   is welded to a framework — react-native (1130*), Flutter (978*), Ionic/Angular
   (389*), Compose (189*), SwiftUI (99*). The one MIT web demo (react-tinder-card,
   405*) styles a 260x300 box on a purple gradient. So this is built to the
   conventions of the category rather than copied out of one repository.

   The stack is absolutely positioned so a throw never reflows the cards behind. */
.dk2030 .mt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.dk2030 .mt-matches-link{display:inline-flex;align-items:center;gap:7px;}
.dk2030 .mt-badge{min-width:18px;height:18px;padding:0 5px;border-radius:8px;background:var(--a1-fill);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;}
.dk2030 .mt-prefs{padding:14px;min-width:min(300px,86vw);}
.dk2030 .mt-prefs-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:0 0 7px;}
.dk2030 .mt-seg{display:flex;gap:6px;margin-bottom:14px;}
.dk2030 .mt-seg-i{flex:1;text-align:center;padding:7px 4px;border:1px solid var(--line-2);border-radius:11px;font-size:13px;cursor:pointer;color:var(--t2);}
.dk2030 .mt-seg-i.on{background:var(--a1-fill);border-color:var(--signal);color:#fff;font-weight:600;}
.dk2030 .mt-seg-i{position:relative;user-select:none;}
.dk2030 .mt-seg-i input{position:absolute;opacity:0;pointer-events:none;inset:0;width:100%;height:100%;}
/* The pick shows the moment the radio flips, not after Apply: :has() lights the
   checked label and dims the one the server rendered as «on». */
.dk2030 .mt-seg-i:has(input:checked){background:var(--a1-fill);border-color:var(--signal);color:#fff;font-weight:600;}
.dk2030 .mt-seg:has(input:checked) .mt-seg-i.on:not(:has(input:checked)){background:transparent;border-color:var(--line-2);color:var(--t2);font-weight:400;}
.dk2030 .mt-ages{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.dk2030 .mt-ages .sf-input{width:84px;text-align:center;}
.dk2030 .mt-apply{width:100%;}

/* The deck fills the screen: this is a one-thing-at-a-time surface, and a card that
   stops halfway down reads as a widget rather than the page. Its height is measured
   in JS (the top island wraps on narrow phones and the tab bar carries a safe-area
   inset, so a constant in calc() puts the card under the chrome).
   width:100% is load-bearing — every card is position:absolute, so the deck has no
   content width of its own, and margin:0 auto on a flex item cancels the stretch
   that would otherwise give it one. */
.dk2030 .mt-deck{position:relative;width:100%;margin:0 auto;
  /* The width is capped by the HEIGHT that is available, not only by a constant.
     Without this the aspect-ratio loses to max-height on a short window — a 577x630
     pane produced a 548x358 card, which is landscape, the one shape this surface must
     never take. 0.75 is the 3:4 ratio, so width can never outgrow what the free
     height can carry in portrait. */
  /* 520, not 420: on a tall desktop window the height cap does not bind and the card
     sat in a 600px column with gutters on both sides. On a phone and on a 900px-tall
     window the height still decides, so nothing moves there. */
  max-width:min(520px,calc((100dvh - 300px) * 0.75));
  /* PORTRAIT is owned by CSS, not by the measuring script. The first version let JS
     set an explicit height, and the very first call ran before the layout settled —
     it clamped to the minimum and dealt a 346x360 card, which is landscape. Now the
     shape is a 3:4 box by construction and JS only ever CAPS it (max-height) to the
     free space it measures. Width is definite (100% of a max-width parent), so the
     cap clips the height alone — with an auto width, aspect-ratio + max-height
     squeezes the WIDTH instead, which is the trap this project already paid for on
     .dk-modal-hero. */
  aspect-ratio:3/4;height:auto;max-height:calc(100dvh - 300px);}
/* An empty deck must not keep reserving a screenful. */
.dk2030 .mt-deck:not(:has([data-card])){aspect-ratio:auto;height:0;max-height:0;}

.dk2030 .mt-card{position:absolute;inset:0;border-radius:28px;overflow:hidden;
  background:var(--s3);
  /* Layered elevation instead of a border: a 1px outline drawn around a photograph
     is the tell of a boxy card. The hairline is an inner ring, so it can never
     break the rounded corner. */
  box-shadow:0 28px 56px -20px rgba(0,0,0,.55),0 8px 20px -8px rgba(0,0,0,.35),
             inset 0 0 0 .5px rgba(255,255,255,.10);
  transition:transform .34s cubic-bezier(.17,.89,.32,1.05),opacity .3s var(--ease);
  /* THE CARD SCROLLS: the photo is the first screenful, the profile flows under it.
     touch-action:pan-y hands the vertical axis to the browser and keeps the horizontal
     one for the throw; the script captures the pointer only after it locks to x. */
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scroll-snap-type:y proximity;
  scrollbar-width:none;touch-action:pan-y;will-change:transform;}
.dk2030 .mt-card::-webkit-scrollbar{width:0;height:0;}
/* A card mid-throw must not also be scrollable, or the fling reads as a scroll. */
.dk2030 .mt-card.mt-dragging,.dk2030 .mt-card.mt-thrown{overflow:hidden;}
/* Light is opt-in in this stylesheet (dark is the base, see the token block at the
   top) — so the light shadow uses the SAME two selectors as the palette. The first
   version guarded with :root:not([data-theme="dark"]), which also matches the
   unstamped state and would have painted a light-mode shadow on a dark card. */
.dk2030[data-theme="light"] .mt-card,
html[data-theme="light"] .dk2030 .mt-card{box-shadow:0 24px 48px -20px rgba(16,24,40,.28),0 6px 16px -8px rgba(16,24,40,.18),inset 0 0 0 .5px rgba(16,24,40,.08);}
/* While a finger is down the card must follow it 1:1, so the transition comes off
   and goes back on release. */
.dk2030 .mt-card.mt-dragging{transition:none;cursor:grabbing;}
.dk2030 .mt-card.mt-thrown{transition:transform .38s cubic-bezier(.32,0,.67,0),opacity .38s linear;}
/* Only the top card is reachable; the ones behind are scenery that rises to meet you.
   ⚠️ The z-index is load-bearing, not decoration. Every card is position:absolute with
   no stacking order of its own, and equal-z siblings paint in DOM order — so the LAST
   card in the deck was drawn OVER the first one. Hit-testing still found the first
   (the rest are pointer-events:none), which produced the exact symptom reported: you
   drag and the card on top sits still while one underneath moves. Order it explicitly:
   first in the DOM is first on the screen. */
.dk2030 .mt-card{z-index:3;}
.dk2030 .mt-card ~ .mt-card{z-index:2;transform:scale(var(--next-s,.955)) translateY(calc(var(--next-y,12) * 1px));pointer-events:none;filter:saturate(.9) brightness(.94);}
.dk2030 .mt-card ~ .mt-card ~ .mt-card{z-index:1;transform:scale(.915) translateY(24px);filter:saturate(.75) brightness(.88);}
.dk2030 .mt-card ~ .mt-card ~ .mt-card ~ .mt-card{display:none;}

/* ---- the photograph IS the card ---- */
.dk2030 .mt-shots{position:relative;height:100%;background:var(--s3);overflow:hidden;
  scroll-snap-align:start;}
.dk2030 .mt-shot{position:absolute;inset:0;width:100%;height:100%;
  /* Portrait crop. Faces sit in the upper third of a phone photo, so the frame is
     biased up — dead centre decapitates half the base. */
  object-fit:cover;object-position:50% 28%;
  opacity:0;transition:opacity .2s var(--ease);}
.dk2030 .mt-shot.on{opacity:1;}
/* Tap zones sit above the photo and below the stamps, and stop short of the scrim so
   they never steal a tap meant for a chip. Transparent by design — the bars are the
   affordance, a visible hit area would only add furniture. */
.dk2030 .mt-zone{position:absolute;top:0;bottom:34%;width:36%;border:0;background:transparent;cursor:pointer;padding:0;z-index:2;}
.dk2030 .mt-zone-l{left:0;} .dk2030 .mt-zone-r{right:0;}
.dk2030 .mt-zone:focus-visible{outline:2px solid #fff;outline-offset:-6px;border-radius:20px;}
/* Segmented bars: how many photos there are, and how far in you are, in the same
   pixels. The drop shadow is what keeps them visible on a bright photo. */
.dk2030 .mt-dots{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:5px;z-index:3;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
.dk2030 .mt-dots i{flex:1;height:3.5px;border-radius:2px;background:rgba(255,255,255,.32);transition:background .2s var(--ease);}
.dk2030 .mt-dots i.on{background:#fff;}

/* ---- what is written on the picture ---- */
.dk2030 .mt-over{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:76px 18px 18px;color:#fff;
  /* A long, eased scrim rather than a bar: the type stays legible and the photo
     still looks like a photo. */
  background:linear-gradient(to top,
    rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 22%,rgba(0,0,0,.44) 52%,
    rgba(0,0,0,.14) 78%,transparent 100%);}
.dk2030 .mt-who{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.dk2030 .mt-name{font-size:28px;font-weight:600;letter-spacing:normal;line-height:1.1;text-shadow:0 1px 12px rgba(0,0,0,.4);}
.dk2030 .mt-age{font-size:24px;font-weight:300;opacity:.95;letter-spacing:normal;}
.dk2030 .mt-live{width:9px;height:9px;border-radius:50%;background:#32D74B;box-shadow:0 0 0 3px rgba(50,215,75,.28);display:inline-block;}
.dk2030 .mt-here{margin-left:6px;padding:2px 7px;border-radius:var(--r-ctl);font-size:10px;font-weight:600;color:var(--a1);background:color-mix(in srgb,var(--a1) 12%,transparent);text-transform:uppercase;letter-spacing:.03em;}
.dk2030 .mt-today{padding:3px 8px;border-radius:var(--r-ctl);font-size:11px;font-weight:600;color:#fff;background:var(--a1-fill);letter-spacing:.01em;}
.dk2030 .mt-today-bar{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap;}
.dk2030 .mt-sub{margin-top:5px;font-size:14px;opacity:.9;display:flex;align-items:center;gap:5px;}
.dk2030 .mt-pin{width:14px;height:14px;flex:0 0 auto;opacity:.85;}

/* Glass chips — the two things this deck is actually for, readable at a glance. */
.dk2030 .mt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.dk2030 .mt-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:5px 11px;border-radius:var(--r-ctl);font-size:12px;font-weight:500;color:#fff;
  background:rgba(255,255,255,.16);border:.5px solid rgba(255,255,255,.26);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .mt-chip svg{width:13px;height:13px;flex:0 0 auto;}
/* A shared interest is the single most useful thing on the card — it is the reason
   to say yes — so it is marked rather than left for the reader to spot. */
.dk2030 .mt-chip.on{background:rgba(0,122,255,.42);border-color:rgba(120,190,255,.6);font-weight:600;}
.dk2030 .mt-chip-go{background:rgba(255,255,255,.22);}

/* Decision stamps — opacity is driven by the drag, so they appear as you commit. */
.dk2030 .mt-stamp{position:absolute;top:26px;z-index:4;opacity:0;pointer-events:none;
  font-size:24px;font-weight:600;letter-spacing:.08em;padding:7px 16px;border-radius:12px;
  border:3px solid currentColor;text-transform:uppercase;
  background:rgba(0,0,0,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.dk2030 .mt-stamp-like{left:20px;color:#32D74B;transform:rotate(-12deg);}
.dk2030 .mt-stamp-pass{right:20px;color:#FF453A;transform:rotate(12deg);}

/* ---- the readable half, one scroll down ---- */
.dk2030 .mt-body{background:var(--s2);padding:18px var(--pad,18px) 22px;scroll-snap-align:start;}
.dk2030 .mt-hint{display:flex;justify-content:center;margin-top:10px;opacity:.75;
  animation:mtNudge 2.4s var(--ease) infinite;}
.dk2030 .mt-hint svg{width:22px;height:22px;}
@keyframes mtNudge{0%,72%,100%{transform:translateY(0)}84%{transform:translateY(4px)}}
.dk2030 .mt-quiet{font-size:13px;line-height:1.5;color:var(--t3);margin:2px 0 10px;}

.dk2030 .mt-sec{margin-bottom:15px;}
.dk2030 .mt-sec-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:7px;}
.dk2030 .mt-go{display:flex;align-items:baseline;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
.dk2030 .mt-go:last-child{border-bottom:0;}
.dk2030 .mt-go-d{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--signal);min-width:42px;}
.dk2030 .mt-go-t{flex:1 1 auto;font-size:14px;}
.dk2030 .mt-go-host{flex:0 0 auto;font-size:11px;padding:1px 6px;border-radius:5px;background:var(--s3);color:var(--t3);}
.dk2030 .mt-tags{display:flex;flex-wrap:wrap;gap:6px;}
.dk2030 .mt-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--line-2);border-radius:var(--r-ctl);font-size:12px;color:var(--t2);}
.dk2030 .mt-tag svg{width:1em;height:1em;}
.dk2030 .mt-tag.on{border-color:var(--signal);color:var(--signal);background:rgba(0,122,255,.10);font-weight:600;}
.dk2030 .mt-prompt{margin-bottom:12px;font-size:14px;line-height:1.45;}
.dk2030 .mt-prompt-q{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:2px;}
.dk2030 .mt-bio{font-size:14px;line-height:1.5;color:var(--t2);margin:0 0 12px;}
.dk2030 .mt-facts{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.dk2030 .mt-fact{display:flex;gap:8px;font-size:13px;}
.dk2030 .mt-fact-k{flex:0 0 64px;color:var(--t3);}
.dk2030 .mt-fact-v{color:var(--t2);}
.dk2030 .mt-full{display:inline-block;font-size:13px;color:var(--signal);text-decoration:none;padding:4px 0 6px;}

/* ---- the two decisions, which never move ---- */
.dk2030 .mt-actbar{display:flex;align-items:center;justify-content:center;gap:22px;
  max-width:420px;margin:16px auto 0;}
.dk2030 .mt-actbar[hidden]{display:none;}
.dk2030 .mt-act{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;padding:0;
  transition:transform .14s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);}
.dk2030 .mt-act svg{width:28px;height:28px;}
.dk2030 .mt-act:active{transform:scale(.9);}
.dk2030 .mt-act:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.dk2030 .mt-pass{background:var(--s2);color:#FF453A;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4),inset 0 0 0 1px var(--line-2);}
.dk2030 .mt-pass:hover{filter:brightness(1.08);box-shadow:0 10px 24px -8px rgba(255,69,58,.45),inset 0 0 0 1px rgba(255,69,58,.5);}
.dk2030 .mt-like{width:72px;height:72px;color:#fff;
  background:linear-gradient(145deg,#FF4E6A,#FF2D55 55%,#E0246B);
  box-shadow:0 10px 26px -8px rgba(255,45,85,.6),inset 0 1px 0 rgba(255,255,255,.28);}
.dk2030 .mt-like svg{width:34px;height:34px;}
.dk2030 .mt-like:hover{filter:brightness(1.06);box-shadow:0 14px 32px -8px rgba(255,45,85,.7),inset 0 1px 0 rgba(255,255,255,.32);}

.dk2030 .mt-empty{max-width:420px;margin:18px auto;text-align:center;padding:26px 20px;border:0;border-radius:var(--r-card);background:var(--s2);box-shadow:var(--edge);}
.dk2030 .mt-empty-i{font-size:32px;}
.dk2030 .mt-empty-t{font-size:17px;font-weight:600;margin:8px 0 6px;}
.dk2030 .mt-empty-p{font-size:14px;line-height:1.5;color:var(--t2);margin:0 0 16px;}
.dk2030 .mt-empty-a{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}

.dk2030 .mt-match{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(7px);padding:20px;}
.dk2030 .mt-match-box{background:var(--s2);border:0;border-radius:var(--r-card);padding:26px 24px;text-align:center;max-width:330px;width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;box-shadow:var(--edge);}
.dk2030 .mt-match-t{font-size:22px;font-weight:600;letter-spacing:normal;}
.dk2030 .mt-match-av{width:96px;height:96px;border-radius:50%;object-fit:cover;}
.dk2030 .mt-match-n{font-size:15px;color:var(--t2);}
.dk2030 .mt-match-box .btn-primary,.dk2030 .mt-match-box .btn-secondary{width:100%;}

.dk2030 .mt-matches{padding:6px 0;}
.dk2030 .mt-row{display:flex;align-items:center;gap:12px;padding:11px var(--pad);border-bottom:1px solid var(--line);}
.dk2030 .mt-row:last-child{border-bottom:0;}
.dk2030 .mt-row-av{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--s3);display:inline-flex;align-items:center;justify-content:center;}
.dk2030 .mt-row-av img{width:100%;height:100%;object-fit:cover;}
.dk2030 .mt-row-ini{font-weight:600;color:var(--t2);}
.dk2030 .mt-row-t{flex:1 1 auto;min-width:0;}
.dk2030 .mt-row-n{display:block;font-size:15px;font-weight:600;text-decoration:none;color:inherit;}
.dk2030 .mt-row-s{font-size:13px;color:var(--t3);margin-top:2px;}
.dk2030 .mt-row-go{flex:0 0 auto;}

@media (max-width:600px){
  /* Full bleed: the deck IS the screen here. The subtracted chrome is the floating top
     island, the action bar, and the tab bar with its safe-area inset — but JS measures
     the real free space, so this is only the pre-paint estimate. */
  .dk2030 .mt-deck{max-width:calc((100dvh - 272px - env(safe-area-inset-bottom)) * .75);
    max-height:calc(100dvh - 272px - env(safe-area-inset-bottom));}
  .dk2030 .mt-card{border-radius:26px;}
  .dk2030 .mt-name{font-size:25px;}
  .dk2030 .mt-age{font-size:20px;}
  .dk2030 .mt-actbar{gap:20px;margin-top:14px;}
  .dk2030 .mt-act{width:60px;height:60px;}
  .dk2030 .mt-like{width:68px;height:68px;}
}
@media (prefers-reduced-motion:reduce){
  .dk2030 .mt-card,.dk2030 .mt-shot{transition:none;}
  .dk2030 .mt-hint{animation:none;}
}

/* City directory on the shared geo board (region + country levels). Was inline styles
   on the country hub; moved to a class when the board became one template, so a design
   change lands on every level at once. */
.dk2030 .dk-citygrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dk2030 .dk-citygrid > a{display:block;background:var(--s1);border:0;
  border-radius:var(--r-card);padding:13px 15px;transition:transform .15s,border-color .15s;box-shadow:var(--edge);}
.dk2030 .dk-citygrid > a:hover{transform:translateY(-2px);border-color:var(--a1)}
.dk2030 .dk-citygrid > a:active{transform:scale(.98)}
.dk2030 .dk-citygrid .nm{display:block;color:var(--t1);font-size:14px;font-weight:600}
.dk2030 .dk-citygrid .ct{color:var(--t2);font-size:12px}
@media(max-width:600px){.dk2030 .dk-citygrid{grid-template-columns:minmax(0,1fr)}}

/* Article ↔ city: the two-way link between a story and the place it belongs to. */
.dk2030 .blg-city{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}


/* ═══════════════════════════════════════════════════════════════════════════
   OLD-INVME MOTION PASS — the interaction vocabulary of invme.com, on 2030 tokens.

   Read out of ../invme-old-frontend (styled-components), not from memory:
     Button.styles.js  primary rests at `box-shadow:0 0 0 0` and grows a 3px ring of
                       rgba(accent,.5) on hover, collapsing again on :active; outline
                       buttons FILL with the accent; the link button underlines itself;
                       circle buttons fill and drop to opacity .8 while pressed;
                       transition 0.25s ease-in-out throughout.
     EventCard.styles  card lifts translateY(-2px) with a softer shadow AND the cover
                       image scales to 1.05 — the lift alone always read as half the
                       effect. UserCard/BlockCategories go to 1.1 for pure-image tiles.
     Spinner.js        two concentric rings rippling out, 1s cubic-bezier(0,.2,.8,1),
                       the second delayed by half a cycle.
     *Mockup.js        skeletons pulse opacity 1 → .7 → 1, 1s ease-in (25 usages —
                       the single most-used animation in the old app).

   What is deliberately NOT ported: the landing's floating-avatar orbits
   (infinityAnimation) — that block does not exist here; and the old `scaleUp` entrance,
   which .dk-tile/.fcard already cover with dkCardIn.
   ═══════════════════════════════════════════════════════════════════════════ */

.dk2030{
  /* Declared on .dk2030, NOT :root — --glow lives there, and a token that references a
     variable its own scope cannot see resolves to nothing (silently: the hover ring
     simply never appears). The old app's easing keeps its own name so the 2030
     --ease/--spring stay untouched; this is a borrowed vocabulary, not a replacement. */
  --ease-invme:cubic-bezier(.4,0,.2,1);
  --ring:0 0 0 3px var(--glow);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Accent buttons: the ring, not a flat opacity fade. Rest state declares a zero-width
   ring so the hover animates instead of popping. */
.dk2030 :is(.pill-accent,.btn-primary,.dk-report-send){box-shadow:0 8px 24px -8px var(--glow),0 0 0 0 rgba(0,122,255,0);
  transition:box-shadow .25s ease-in-out,transform .12s var(--ease),background .15s,color .15s;}
.dk2030 :is(.pill-accent,.btn-primary,.dk-report-send):hover{opacity:1;box-shadow:0 8px 24px -8px var(--glow),var(--ring);}
.dk2030 :is(.pill-accent,.btn-primary,.dk-report-send):active{box-shadow:0 8px 24px -8px var(--glow),0 0 0 0 rgba(0,122,255,0);}
.dk2030-auth button[type=submit]:hover,.dk2030-auth .btn-primary:hover{opacity:1;box-shadow:var(--ring);}

/* Outline buttons FILL on hover (old OutlineButton). Border-colour alone was the 2030
   shorthand for this and it never read as a button state. */
.dk2030 :is(.pill-outline,.btn-secondary):hover{background:var(--a1-fill);border-color:var(--signal);color:#fff;}
.dk2030 :is(.pill-outline,.btn-secondary):hover svg{stroke:#fff;}

/* Old LinkButton: grey text that turns accent AND underlines itself. The card action
   row (.act) already answers a hover with a background, so it takes only the colour —
   two affordances on one control is noise. The underline goes where there is no
   background to begin with: the board's bare "See all" links. */
.dk2030 .act{transition:color .2s;}
.dk2030 .act:hover{color:var(--a1);}
.dk2030 .dk-h a{border-bottom:1px solid transparent;transition:border-color .2s,opacity .2s;}
.dk2030 .dk-h a:hover{border-bottom-color:currentColor;}

/* Circle icon buttons fill; pressed goes translucent rather than smaller, which is what
   the old app did and what keeps a 32px target from wobbling. */
.dk2030 :is(.icon-btn,.dk-theme-btn,.dk-bell):hover{border-color:var(--a1);color:var(--a1);}
.dk2030 :is(.icon-btn,.dk-theme-btn,.dk-bell):active{opacity:.8;}

/* Disabled: the old #c6ccd2 dead-grey, expressed in tokens. */
.dk2030 :is(.pill,.btn-primary,.btn-secondary,.pill-outline):disabled,
.dk2030 :is(.pill,.btn-primary,.btn-secondary,.pill-outline)[aria-disabled=true]{
  background:var(--s3);color:var(--t3);box-shadow:none;pointer-events:none;}

/* ── Cards: the lift AND the cover zoom ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .dk2030 :is(.fcard-media,.dk-tile-cover,.blg-card-cover,.dk-row-thumb) img{
    transition:transform .3s var(--ease-invme);}
  .dk2030 .fcard:hover .fcard-media img,
  .dk2030 .dk-row:hover .dk-row-thumb img,
  .dk2030 .blg-card:hover .blg-card-cover img{transform:scale(1.05);}
  /* Pure-image tiles went further in the old app (UserCard, BlockCategories). */
  .dk2030 .dk-tile:hover .dk-tile-cover img{transform:scale(1.1);}
}

/* ── Spinner: the old two-ring ripple ────────────────────────────────────── */
@keyframes dkRipple{
  0%{top:22px;left:22px;width:0;height:0;opacity:1;}
  100%{top:0;left:0;width:44px;height:44px;opacity:0;}
}
.dk2030 .load-spin{position:relative;height:44px;}
.dk2030 .load-spin i{position:absolute;left:50%;margin-left:-22px;width:44px;height:44px;
  border:0;border-radius:0;animation:none;}
.dk2030 .load-spin i::before,.dk2030 .load-spin i::after{content:"";position:absolute;
  border:3px solid var(--a1);border-radius:50%;opacity:1;
  animation:dkRipple 1s cubic-bezier(0,.2,.8,1) infinite;}
.dk2030 .load-spin i::after{animation-delay:-.5s;}

/* ── Skeletons: the old `pulse`, now on the modal that used to open blank ─── */
/* Its own class, not .dk-modal-bg: a loading state is a state, and reusing the real
   modal's class names would have put them in the shell's inline JS on every page. */
.dk2030 .dk-modal-load{position:fixed;inset:0;z-index:200;background:rgba(2,2,8,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;
  animation:dkFade .2s var(--ease);}
.dk2030 .dk-modal-load .dk-skel-wrap{width:600px;max-width:100%;border-radius:var(--r-lg);
  background:var(--bg);border:0;box-shadow:var(--edge),0 50px 120px -20px rgba(0,0,0,.7);}
@media(max-width:600px){.dk2030 .dk-modal-load{padding:0;}
  .dk2030 .dk-modal-load .dk-skel-wrap{border-radius:0;min-height:100%;}}
@keyframes dkPulse{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}
.dk2030 .dk-skel{background:var(--s3);border-radius:8px;animation:dkPulse 1s ease-in infinite;}
.dk2030 .dk-skel-wrap{padding:18px}
.dk2030 .dk-skel-wrap .dk-skel + .dk-skel{margin-top:10px}
.dk2030 .dk-skel.hero{height:200px;border-radius:12px;margin-bottom:16px}
.dk2030 .dk-skel.ttl{height:20px;width:70%}
.dk2030 .dk-skel.ln{height:13px}
.dk2030 .dk-skel.ln.short{width:45%}


/* ═══════════════════════════════════════════════════════════════════════════
   OLD-INVME PORT, WAVE 2 — only what costs nothing at runtime.
   Deliberately NOT ported: the real 32px blur-up (a second rendition per photo:
   sorl storage + a KV lookup per card + a second request per image) and
   scroll-reveal (it can only make content appear later than it already does).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A. Loading dim (framer `opacity: loading ? .3 : 1`) ─────────────────── */
/* HTMX marks the element that issued the request. Before this, a filter submit or a
   comment post looked like nothing had happened until the swap landed. */
.dk2030 .htmx-request{opacity:.5;transition:opacity .15s var(--ease);}
.dk2030 form.htmx-request,.dk2030 .htmx-request form{pointer-events:none;}
.dk2030 .load-spin.htmx-request{opacity:1;}   /* a spinner dimming itself is silly */

/* ── B. Smooth scrolling (smoothscroll-polyfill) ─────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
  .dk2030 .dk-scroll{scroll-behavior:smooth;}
}

/* ── C. Photo fades in when it decodes ───────────────────────────────────── */
/* The class is added BY SCRIPT and only to images that have not loaded yet, so with
   no JS (or a cached image) nothing is ever hidden — the failure mode of the naive
   version is an invisible photo. */
.dk2030 img.dk-fade{opacity:0;}
@media (prefers-reduced-motion: no-preference){
  .dk2030 img.dk-fade{transition:opacity .4s var(--ease);}
}
.dk2030 img.dk-fade.dk-in{opacity:1;}
/* Someone who asked for no motion must not be the one person who sees no photos. */
@media (prefers-reduced-motion: reduce){.dk2030 img.dk-fade{opacity:1;}}

/* ── D. Carousel dots + arrows (UI/PhotoCarousel) ────────────────────────── */
.dk2030 .dk-hero-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;
  display:flex;justify-content:center;gap:7px;pointer-events:none;}
.dk2030 .dk-hero-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(.5);transition:transform .3s var(--ease),background .3s;}
.dk2030 .dk-hero-dots i.on{transform:scale(1);background:#fff;}
/* Arrows slide in from beyond the edge on hover — the old app's exact move. Pointer
   devices only: on a phone the carousel is a swipe, and a permanent arrow is clutter. */
.dk2030 .dk-hero-nav{position:absolute;top:50%;z-index:3;width:34px;height:34px;border:0;
  border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(6px);
  transition:transform .25s var(--ease),opacity .25s var(--ease);opacity:0;}
.dk2030 .dk-hero-nav.prev{left:10px;transform:translate(-150%,-50%);}
.dk2030 .dk-hero-nav.next{right:10px;transform:translate(150%,-50%);}
@media (hover:hover){
  .dk2030 .dk-modal-hero .dk-hero-nav{display:flex;}
  .dk2030 .dk-modal-hero:hover .dk-hero-nav{opacity:1;transform:translate(0,-50%);}
}
/* The count badge and the dots share the bottom edge — move the badge up out of the way. */


/* ── E. Dual-handle range (rc-slider) ────────────────────────────────────── */
.dk2030 .dk-range{position:relative;height:26px;display:flex;align-items:center;margin:2px 0 6px;}
.dk2030 .dk-range .track{position:absolute;left:0;right:0;height:3px;border-radius:2px;background:var(--s3);}
.dk2030 .dk-range .fill{position:absolute;height:3px;border-radius:2px;background:var(--signal);}
.dk2030 .dk-range input[type=range]{position:absolute;left:0;width:100%;margin:0;background:none;
  -webkit-appearance:none;appearance:none;pointer-events:none;height:26px;}
.dk2030 .dk-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--signal);cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .12s var(--ease);}
.dk2030 .dk-range input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15);}
.dk2030 .dk-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;
  border-radius:50%;background:#fff;border:2px solid var(--signal);cursor:pointer;}
.dk2030 .dk-range-head{display:flex;justify-content:space-between;align-items:center;}
.dk2030 .dk-range-val{font-size:13px;font-weight:600;color:var(--t1);}

/* ── F. Tooltip (react-simple-tooltip) ───────────────────────────────────── */
.dk2030 [data-tip]{position:relative;}
.dk2030 [data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translate(-50%,4px);white-space:nowrap;background:var(--s3);color:var(--t1);
  border:1px solid var(--line-2);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:500;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);opacity:0;pointer-events:none;z-index:50;
  transition:opacity .15s var(--ease),transform .15s var(--ease);}
.dk2030 [data-tip]:hover::after,.dk2030 [data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0);}
@media (hover:none){.dk2030 [data-tip]::after{display:none;}}


/* ── Report a chat message ──────────────────────────────────────────────────
   One panel per room (see chat/room_detail_2030.html): the flag on a received
   bubble opens it and fills in which message. The flag stays quiet until the
   bubble is hovered, and is always visible on touch, where there is no hover. */
.dk2030 .msg-flag{background:none;border:0;padding:0 0 0 5px;cursor:pointer;
  color:var(--t3);font-size:11px;line-height:1;opacity:0;transition:opacity .15s}
.dk2030 .msg-item:hover .msg-flag,
.dk2030 .msg-flag:focus-visible{opacity:.75}
.dk2030 .msg-flag:hover{opacity:1;color:var(--t1)}
@media (hover:none){.dk2030 .msg-flag{opacity:.5}}
.dk2030 .dkchat-report{margin:8px 12px;padding:12px 14px;border-radius:12px;
  background:var(--s2);border:1px solid var(--line)}
.dk2030 .dkchat-report blockquote{margin:6px 0 10px;padding-left:9px;
  border-left:2px solid var(--line-2);color:var(--t2);font-size:13px;line-height:1.4}
.dk2030 .dkchat-report blockquote:empty{display:none}
.dk2030 .dkchat-report-hint{margin:8px 0 0;font-size:12px;color:var(--t3)}

/* ── Where the upcoming ends and the archive begins ────────────────────────
   A hard break, not a soft one. A finished event sitting quietly among things you can
   still go to is the exact defect this project spent a release fixing; the reader has
   to see the boundary without reading a single date. */
.dk2030 .dk-pastline{display:flex;align-items:center;gap:12px;margin:26px 0 14px;
  color:var(--t3);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dk2030 .dk-pastline::before,.dk2030 .dk-pastline::after{content:"";flex:1;height:1px;background:var(--line)}
.dk2030 .dk-pastline span{white-space:nowrap}

/* ============================================================================
   OLD-INVME FORM PASS — shapes ported from ../invme-old-frontend
   Input.styles.js: radius 25, padding 10/18, 2px transparent border -> accent on focus,
   shadow8 (0 4px 10px rgba(75,84,118,.1)), label above that shrinks when filled.
   SignupBoxCommon.js: emoji gender toggle, three-select birthday, 382px column.
   Everything below is CSS + :has() only — this shell has no Alpine, and the previous
   signup template still carried x-data, so its gender toggle did nothing at all.
   ============================================================================ */
.dk2030 .dk-form{--fld-r:25px;}
.dk2030 .dk-form input[type=text],.dk2030 .dk-form input[type=email],
.dk2030 .dk-form input[type=tel],.dk2030 .dk-form input[type=url],
.dk2030 .dk-form input[type=number],.dk2030 .dk-form input[type=password],
.dk2030 .dk-form input[type=date],.dk2030 .dk-form input[type=datetime-local],
.dk2030 .dk-form input[type=time],.dk2030 .dk-form input[type=search],
.dk2030 .dk-form select{
  border-radius:var(--fld-r);padding:11px 18px;border:2px solid transparent;
  background:var(--s2);box-shadow:0 4px 10px rgba(0,0,0,.10);
  transition:border-color .2s var(--ease-invme),box-shadow .2s var(--ease-invme);}
.dk2030 .dk-form textarea{
  border-radius:var(--r-card);padding:12px 18px;border:2px solid transparent;
  background:var(--s2);box-shadow:0 4px 10px rgba(0,0,0,.10);min-height:110px;max-height:260px;
  transition:border-color .2s var(--ease-invme);}
.dk2030 .dk-form input:focus,.dk2030 .dk-form textarea:focus,.dk2030 .dk-form select:focus{
  border-color:var(--signal);}
.dk2030 .dk-form .fld.bad input,.dk2030 .dk-form .fld.bad textarea,
.dk2030 .dk-form .fld.bad select{border-color:#ff5a5a;}

/* The label sits ABOVE the field and shrinks once something is in it — the old project's
   PlaceholderText. `:has(:placeholder-shown)` keeps it full size while the field is
   empty, so the shrink actually reads as "this one is done". */
.dk2030 .dk-form .fld{position:relative;}
.dk2030 .dk-form label.lbl{
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--t2);
  margin-bottom:7px;transform-origin:left center;
  transition:transform .15s var(--ease-invme),color .15s var(--ease-invme);}
.dk2030 .dk-form .fld:focus-within label.lbl{color:var(--signal);}
.dk2030 .dk-form .fld.bad label.lbl{color:#ff5a5a;}
/* `input[placeholder]` is load-bearing: a field with no placeholder attribute can
   never match `:placeholder-shown`, so without it the label would read as "filled"
   from the first paint on every allauth form we do not build ourselves. */
.dk2030 .dk-form .fld:has(input[placeholder]:not(:placeholder-shown)) label.lbl,
.dk2030 .dk-form .fld:has(textarea[placeholder]:not(:placeholder-shown)) label.lbl{
  transform:scale(.86);}
.dk2030 .dk-form .ok{font-size:12px;color:#35c061;margin-top:5px;}

/* Segmented choice — the old gender toggle. Real radios underneath, so it works with the
   keyboard, submits without script, and cannot silently hold nothing the way the Alpine
   version did once Alpine was removed. */
.dk2030 .dkf-choice{display:flex;gap:9px;flex-wrap:wrap;}
.dk2030 .dkf-choice label{
  flex:1 1 0;min-width:118px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-ctl);
  font-size:14px;font-weight:500;color:var(--t1);cursor:pointer;background:var(--s2);
  transition:border-color .15s,background .15s,transform .12s var(--ease-invme);}
.dk2030 .dkf-choice label:hover{border-color:var(--t3);}
.dk2030 .dkf-choice label:active{transform:scale(.97);}
.dk2030 .dkf-choice input{position:absolute;opacity:0;width:0;height:0;}
.dk2030 .dkf-choice label:has(input:checked){
  border-color:var(--signal);background:color-mix(in srgb,var(--signal) 12%,transparent);
  color:var(--signal);}
.dk2030 .dkf-choice label:has(input:focus-visible){outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .dkf-choice .em{font-size:16px;line-height:1;}

/* Birthday: three selects in a row, day / month / year, as the old signup had it. */
.dk2030 .dkf-date{display:grid;grid-template-columns:.8fr 1.3fr 1fr;gap:9px;}
@media(max-width:420px){.dk2030 .dkf-date{grid-template-columns:1fr;}}

/* Photo grid — UploadEventPhotos / UploadPhoto. A square well with a dashed edge, and
   thumbnails that carry their own remove control. */
.dk2030 .dkf-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;}
.dk2030 .dkf-drop{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;border:2px dashed var(--line);border-radius:var(--r-card);cursor:pointer;background:var(--s2);
  color:var(--t2);font-size:13px;text-align:center;padding:8px;
  transition:border-color .15s,background .15s,color .15s;}
.dk2030 .dkf-drop:hover,.dk2030 .dkf-drop.over{
  border-color:var(--signal);color:var(--signal);
  background:color-mix(in srgb,var(--signal) 8%,transparent);}
.dk2030 .dkf-drop svg{width:22px;height:22px;opacity:.8;}
.dk2030 .dkf-thumb{position:relative;aspect-ratio:1;border-radius:var(--r-card);overflow:hidden;
  background:var(--s3);border:0;box-shadow:var(--edge);}
.dk2030 .dkf-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .dkf-thumb .x{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);}
.dk2030 .dkf-thumb .x:hover{background:rgba(0,0,0,.8);}
.dk2030 .dkf-thumb .main{
  position:absolute;left:6px;bottom:6px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border-radius:var(--r-pill);
  background:var(--a1-fill);color:#fff;font-weight:600;}
.dk2030 .dkf-hint{font-size:12px;color:var(--t3);margin-top:8px;}

/* The auth column: 382px, the old AuthBox width. */
.dk2030 .dkf-auth{max-width:382px;margin:0 auto;}
.dk2030 .dkf-legal{font-size:11px;line-height:1.5;color:var(--t3);margin-top:18px;}
.dk2030 .dkf-legal a{color:var(--t2);text-decoration:underline;}

.dk2030 .dkf-link{color:var(--signal);font-weight:600;text-decoration:none;}
.dk2030 .dkf-link:hover{text-decoration:underline;}
.dk2030 .dkf-submit{width:100%;padding:13px 20px;font-size:15px;border-radius:var(--r-ctl);margin-top:4px;}
.dk2030 .dkf-or{display:flex;align-items:center;gap:12px;margin:22px 0 16px;}
.dk2030 .dkf-or::before,.dk2030 .dkf-or::after{content:"";flex:1;height:1px;background:var(--line);}
.dk2030 .dkf-or span{font-size:13px;color:var(--t3);font-weight:500;}
.dk2030 .dkf-social{display:flex;flex-direction:column;gap:9px;}
.dk2030 .dkf-soc{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 16px;border:1px solid var(--line);border-radius:var(--r-ctl);
  font-size:14px;font-weight:600;color:var(--t1);text-decoration:none;background:var(--s2);
  transition:border-color .15s,transform .12s var(--ease-invme);}
.dk2030 .dkf-soc:hover{border-color:var(--signal);}
.dk2030 .dkf-soc:active{transform:scale(.98);}
.dk2030 .dkf-thumb .dkf-make{position:absolute;left:6px;bottom:6px;border:0;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 7px;border-radius:var(--r-pill);background:rgba(0,0,0,.62);color:#fff;
  backdrop-filter:blur(6px);}
.dk2030 .dkf-thumb .dkf-make:hover{background:rgba(0,0,0,.82);}
.dk2030 .dkf-addform{display:contents;}
/* A pre-filled answer reads as a confirmed line, not as a field waiting for input. */
.dk2030 .dk-form .prefill{display:flex;align-items:center;gap:9px;margin-bottom:18px;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--s2);font-size:14px;color:var(--t2);}
.dk2030 .dk-form .prefill svg{flex:none;color:var(--signal);}
.dk2030 .dk-form .prefill > span{flex:1;min-width:0;}
.dk2030 .dk-form .dk-prefill-x{border:0;background:none;cursor:pointer;padding:2px 4px;
  color:var(--signal);font-size:13px;font-weight:600;font-family:inherit;}
.dk2030 .dk-form .dk-prefill-x:hover{text-decoration:underline;}
.dk2030 .dk-post-here{display:inline-flex;align-items:center;margin-top:12px;text-decoration:none;}
/* Live category guess: a suggestion you can see and override, never a silent switch. */
.dk2030 .dk-catsuggest{display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--s2);color:var(--t2);font-size:13px;font-family:inherit;cursor:pointer;
  transition:border-color .15s,transform .12s var(--ease-invme);}
.dk2030 .dk-catsuggest:hover{border-color:var(--signal);}
.dk2030 .dk-catsuggest:active{transform:scale(.97);}
.dk2030 .dk-catsuggest b{color:var(--t1);font-weight:600;}
.dk2030 .dk-catsuggest[data-applied="1"]{border-color:var(--signal);color:var(--signal);}
/* Category shortcut: a handful of chips, the full list only when none of them fit. */
.dk2030 .dk-catchips{display:flex;flex-wrap:wrap;gap:8px;}
.dk2030 .dk-catchip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--s2);
  color:var(--t1);font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s var(--ease-invme);}
.dk2030 .dk-catchip:hover{border-color:var(--t3);}
.dk2030 .dk-catchip:active{transform:scale(.97);}
.dk2030 .dk-catchip[data-on="1"]{border-color:var(--signal);color:var(--signal);
  background:color-mix(in srgb,var(--signal) 12%,transparent);}
.dk2030 .dk-catchip .em{font-size:15px;line-height:1;}
.dk2030 .dk-catmore{color:var(--t2);}
.dk2030 #cat-full{margin-top:10px;}
/* Desktop keeps the sidebar, so it needs neither a burger nor the phone panels.
   Scoped to min-width on purpose: a plain rule here sits AFTER the =<600px block and would
   win on equal specificity — the same source-order trap that once left the sidebar on
   screen at 390px. Say "desktop only" instead of racing the cascade. */
@media(min-width:601px){
  .dk2030 .dk-burger,.dk2030 .dk-scrim,.dk2030 .dk-searchpanel{display:none;}
}
/* A panel that slides is a nicety; a panel that appears is the requirement. */
@media(prefers-reduced-motion:reduce){
  .dk2030 .dk-side,.dk2030 .dk-main,.dk2030 .dk-searchpanel,.dk2030 .dk-scrim{transition:none!important;}
}
/* Right panel: search on top, filters below — two tasks, visibly separated. */
.dk2030 .dk-sp-filters{border-top:1px solid var(--line);padding:14px 14px calc(96px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;}
.dk2030 .dk-sp-sec{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);margin-bottom:10px;}
.dk2030 .dk-sp-sub{font-size:13px;font-weight:600;color:var(--t2);margin:14px 0 8px;}
.dk2030 .dk-sp-sub:first-of-type{margin-top:0;}
.dk2030 .dk-sp-chips{display:flex;flex-wrap:wrap;gap:8px;}
.dk2030 .dk-sp-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--s2);
  color:var(--t1);font-size:13px;font-weight:500;text-decoration:none;
  transition:border-color .15s,background .15s,transform .12s var(--ease-invme);}
.dk2030 .dk-sp-chip:active{transform:scale(.97);}
.dk2030 .dk-sp-chip.on{border-color:var(--signal);color:var(--signal);
  background:color-mix(in srgb,var(--signal) 12%,transparent);}
/* Badge dot on the bottom bar, and the avatar in the profile slot. */
.dk2030 .navb{position:relative;}
.dk2030 .navb-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;
  background:#ff3b30;border:2px solid var(--bg);}
.dk2030 .navb-av{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;}

/* ============================================================
   MOBILE REVIEW 2026-09-03 (measured on a 375px viewport)
   ============================================================ */
@media(max-width:600px){
  /* The island is ONE 56px row now (search folds into it); 116px of top padding was
     written for a two-row island that no longer exists and left 52px of nothing under
     the bar on every phone screen (island bottom 64px, first content at 116px). */
  .dk2030 .dk-scroll{padding-top:76px;}
  /* Chip rows (city tabs, time windows, categories) wrapped into two or three lines
     each — seven rows of pills before the first card on the afisha tab. On a phone each
     row is one swipeable line, edge to edge. */
  .dk2030 .dk-scroll > .dk-catrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin-left:-14px;margin-right:-14px;
    padding:0 14px 4px;scroll-snap-type:x proximity;}
  .dk2030 .dk-scroll > .dk-catrow::-webkit-scrollbar{display:none;}
  .dk2030 .dk-scroll > .dk-catrow .chip{flex:0 0 auto;scroll-snap-align:start;}
  /* "Be the first to go" was squeezed into a 60px column beside the button; the label
     takes the full width and the action sits under it, right-aligned. */
  .dk2030 .going{flex-wrap:wrap;}
  .dk2030 .going-who{flex:1 1 100%;}
  .dk2030 .going > .pill,.dk2030 .going > .btn-primary,.dk2030 .going > div{margin-left:auto;}
}
/* «People are going to» on the geo board: afisha row + who's-going tiles under it */
/* block, not a flex column: a flex item keeps min-width:auto, so the 440 px tiles row inside
   forced the whole row past the phone's width (measured 2026-09-04 at 375 px) */
.dk2030 .dk-going-list{display:block;}
/* one card per event: the row on top, the who's-going tiles inside the same card */
.dk2030 .dk-going-item{min-width:0;max-width:100%;margin-bottom:8px;padding:0 9px 4px;border:1px solid var(--line);border-radius:12px;background:var(--s1);}
.dk2030 .dk-going-item .dk-row{border:0;background:transparent;margin:0;padding:9px 0;animation:none;}
.dk2030 .dk-going-item .dk-row:hover{transform:none;}
.dk2030 .dk-going-item .going-block{margin:0 0 4px;padding-top:0;border-top:0;}
/* company tile: link + «Invite» form (Kaver's «Пригласить»), bio line */
.dk2030 .cp-link{display:block;text-decoration:none;color:inherit;}
.dk2030 .cp-bio{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3;color:var(--t2);margin-top:3px;white-space:normal;}
.dk2030 .cp-invite{margin:6px 0 0;}
.dk2030 .cp-invite .pill{width:100%;justify-content:center;padding:5px 8px;font-size:12px;}
/* «Your interests (N)» above the Discover filters */
.dk2030 .dk-interests{display:flex;padding:0 0 8px;}
/* card badges (Kaver's «Выбор редакции» / «Популярное»): accent for the editor, neutral for the crowd */
.dk2030 .dk-badge{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:4px 10px;font-size:11px;font-weight:600;letter-spacing:.01em;color:#fff;background:var(--a1-fill);white-space:nowrap;}
.dk2030 .dk-badge-pop{color:var(--bg);background:var(--t1);}
/* three steps for guests on detail pages (Kaver repeats its pitch on every event) */
.dk2030 .dk-steps{margin:18px 0 6px;padding:14px 16px;border:0;border-radius:var(--r-card);box-shadow:var(--edge);}
.dk2030 .dk-steps-h{font-size:14px;font-weight:600;margin:0 0 8px;}
.dk2030 .dk-steps-l{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.45;display:flex;flex-direction:column;gap:4px;}
.dk2030 .metabar .cnt{color:var(--t3);}
/* «Цель» chip on the deck card (Kaver): what they are here for */
.dk2030 .mt-goal{padding:3px 8px;border-radius:var(--r-ctl);font-size:11px;font-weight:600;color:#fff;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);}
/* mobile pass 2026-09-04: face tiles — the initial sits BEHIND the photo, so a missing file
   (onerror removes the img) shows a letter, never a dark square; online = a dot, not a pill */
.dk2030 .cp-ph .cp-ini{position:absolute;inset:0;}
.dk2030 .cp-ph img{position:absolute;inset:0;}
.dk2030 .cp-online{position:absolute;right:7px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--now);box-shadow:0 0 0 2px var(--bg);}
.dk2030 .gt{position:relative;}
/* the initial stays IN FLOW (it gives the tile its height); only the photo floats over it */
.dk2030 .gt img.gt-img{position:absolute;left:0;top:0;}
/* the deck's chips: one swipe-row on a phone, never three rows above the card */
@media (max-width:600px){
  .dk2030 .mt-today-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 8px;padding:0 14px 2px;}
  .dk2030 .mt-today-bar::-webkit-scrollbar{display:none;}
  .dk2030 .mt-today-bar > *{flex:0 0 auto;}
  .dk2030 .mt-today-bar form{display:inline-flex;}
}
/* edit profile (2026-09-04): checklist, chip pickers, photo reorder, sticky save */
.dk2030 .dk-editcomplete{margin:0 0 14px;}
.dk2030 .dk-checklist{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.dk2030 .dk-checklist a,.dk2030 .dk-checklist span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t1);text-decoration:none;}
.dk2030 .dk-checklist a:hover{color:var(--signal);}
.dk2030 .dk-checklist .done{color:var(--t3);text-decoration:line-through;}
.dk2030 .dk-checklist .done svg{color:var(--now);}
.dk2030 .dk-checklist .w{margin-left:auto;font-size:12px;font-weight:600;color:var(--signal);}
.dk2030 .dk-chips{display:flex;flex-wrap:wrap;gap:8px;}
.dk2030 .dk-chips label.chip{cursor:pointer;user-select:none;position:relative;}
.dk2030 .dk-chips label.chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.dk2030 label.chip:has(input:checked){color:var(--bg);background:var(--t1);border-color:var(--t1);font-weight:600;}
.dk2030 .dkf-thumb .mv{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;}
.dk2030 .dkf-thumb .mv form{display:contents;}
.dk2030 .dkf-thumb .mv button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer;}
.dk2030 .dkf-thumb .mv button:hover{background:rgba(0,0,0,.85);}
.dk2030 .dk-ac{position:relative;z-index:5;}
/* The bar floats over the sections below it, so it needs its own ground and an edge:
   with the page colour and no border it read as a hole punched through the card, and
   the «BASICS» heading scrolled up INTO the buttons. */
.dk2030 .dk-form-sticky{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));background:var(--s1);border-top:1px solid var(--line);box-shadow:0 -12px 18px -12px rgba(0,0,0,.55);padding:12px 0 10px;margin-top:8px;z-index:6;}
@media (min-width:881px){.dk2030 .dk-form-sticky{bottom:0;}}
/* 100 % profile: the badge and the perks panel */
.dk2030 .dk-cbadge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--a1-fill);color:#fff;margin-left:5px;vertical-align:middle;flex:none;}
.dk2030 .cp-name .dk-cbadge{width:14px;height:14px;margin-left:4px;}
.dk2030 .dk-perks{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.dk2030 .dk-perks-h{font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.dk2030 .dk-perks[data-perks-on] .dk-perks-h{color:var(--now);}
.dk2030 .dk-perks ul{margin:0;padding-left:18px;font-size:13px;line-height:1.45;color:var(--t1);display:flex;flex-direction:column;gap:3px;}
/* model card: the three-measure row on the edit page, the line on the profile, casting ranges on the deck */
.dk2030 .dk-measures-row{display:flex;align-items:center;gap:8px;}
.dk2030 .dk-measures-row input{width:100%;min-width:0;}
.dk2030 .dk-measures-row span{color:var(--t3);}
.dk2030 .dk-prof-model{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px;font-size:13px;color:var(--t2);}
.dk2030 .dk-prof-model-line{color:var(--t1);}
.dk2030 .mt-casting{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.dk2030 .mt-casting-row{display:grid;grid-template-columns:64px 1fr 1fr;gap:6px;align-items:center;font-size:12px;color:var(--t2);}
.dk2030 .mt-casting-row input{width:100%;min-width:0;padding:6px 8px;font-size:13px;}
/* create a plan (2026-09-04): compact cover control, category as a line, when chips */
.dk2030 .dkf-photos-compact{display:flex;flex-wrap:wrap;gap:10px;}
.dk2030 .dkf-photos-compact .dkf-thumb{width:96px;height:96px;flex:0 0 auto;aspect-ratio:auto;}
.dk2030 .dkf-drop-compact{aspect-ratio:auto;width:auto;height:auto;flex-direction:row;gap:8px;padding:10px 16px;border-radius:var(--r-ctl);font-size:13px;}
.dk2030 .dkf-drop-compact svg{width:16px;height:16px;}
.dk2030 .dk-catpick{border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--s1);}
.dk2030 .dk-catpick-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 0;}
.dk2030 .dk-catpick-s::-webkit-details-marker{display:none;}
.dk2030 .dk-catpick-s b{flex:1;min-width:0;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .dk-catpick-s .act{font-size:12px;}
.dk2030 .dk-catpick[open] .dk-catpick-s{border-bottom:1px solid var(--line);margin-bottom:12px;}
.dk2030 .dk-catpick .dk-catchips{margin-bottom:12px;}
.dk2030 .dk-chips a.chip{text-decoration:none;color:var(--t2);}
/* staff pulse */
.dk2030 .dk-pulse-table{width:100%;border-collapse:collapse;font-size:14px;}
.dk2030 .dk-pulse-table th,.dk2030 .dk-pulse-table td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;}
.dk2030 .dk-pulse-table td:first-child,.dk2030 .dk-pulse-table th:first-child{text-align:left;color:var(--t2);}
.dk2030 .dk-pulse-table th{font-size:12px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.03em;}
/* onboarding step 2: three picks with the attend control */
.dk2030 .dk-picks{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.dk2030 .dk-pick{border:1px solid var(--line);border-radius:12px;padding:12px 14px 6px;background:var(--s1);}
.dk2030 .dk-pick-t{display:block;font-size:15px;font-weight:600;color:var(--t1);text-decoration:none;}
.dk2030 .dk-pick-m{font-size:13px;margin-top:2px;}
.dk2030 .dk-pick .going-block{margin-top:8px;padding-top:8px;}
/* onboarding step 1 borrows the filter panel's chips, not its popover box: it flows inside the card
   (an absolute panel added nothing to the scroller, so Continue sat under the phone tab bar) */
.dk2030 .dk-onb.filterpanel{position:static;width:auto;max-width:none;z-index:auto;padding:0;background:none;
  border:0;border-radius:0;box-shadow:none;}
/* landings: the one-sentence lead and the series cards (geo/landings.py, city_events/series.py) */
.dk2030 .dk-landing-lead{font-size:14px;line-height:1.45;margin:8px 0 2px;}
.dk2030 .dk-series-row{display:flex;gap:10px;overflow-x:auto;padding:6px 0 8px;margin-top:6px;-webkit-overflow-scrolling:touch;}
.dk2030 .dk-series-card{flex:0 0 auto;min-width:160px;max-width:220px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--s1);text-decoration:none;color:var(--t1);}
.dk2030 .dk-series-name{font-size:14px;font-weight:600;line-height:1.25;}
.dk2030 .dk-series-meta{font-size:12px;margin-top:3px;}
/* series page */
.dk2030 .dk-next-edition{border:1px solid var(--line);border-radius:12px;padding:12px 14px 6px;background:var(--s1);}
.dk2030 .dk-plain-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px;font-size:14px;}
.dk2030 .dk-plain-list a{color:var(--t1);text-decoration:none;}
.dk2030 .dk-desc{font-size:15px;line-height:1.55;}
/* landing design v2 (2026-09-04): the page's face before any chrome */
.dk2030 .dk-landing-head{margin:4px 0 8px;}
.dk2030 .dk-landing-head h1.dk-h{margin:8px 0 8px;font-size:28px;line-height:1.15;}
.dk2030 .dk-promise{font-size:15px;line-height:1.5;color:var(--t2);max-width:640px;margin:0 0 10px;}
.dk2030 .dk-facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--t2);margin:0 0 12px;}
.dk2030 .dk-facts b{color:var(--t1);font-weight:600;}
.dk2030 .dk-facts-names{flex-basis:100%;}
.dk2030 .chip .n{font-size:12px;color:var(--t3);margin-left:2px;font-weight:400;}
.dk2030 .chip.on .n{color:var(--bg);opacity:.8;}
.dk2030 .dk-landing-tabs{margin-top:10px;}
.dk2030 .dk-series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0 14px;}
.dk2030 .dk-series-tile{display:block;border-radius:12px;overflow:hidden;background:var(--s1);border:1px solid var(--line);text-decoration:none;color:var(--t1);}
.dk2030 .dk-series-tile .cv{display:block;aspect-ratio:16/10;position:relative;overflow:hidden;}
.dk2030 .dk-series-tile .cv img{width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .dk-series-tile .cv .cv-cat{position:absolute;left:10px;bottom:8px;font-size:12px;font-weight:600;color:var(--covt);}
.dk2030 .dk-series-tile .nm{display:block;font-size:14px;font-weight:600;padding:8px 10px 2px;line-height:1.25;}
.dk2030 .dk-series-tile .mt{display:block;font-size:12px;color:var(--t3);padding:0 10px 9px;}
.dk2030 .dk-rankrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 -2px;}
.dk2030 .dk-ranknum{font-size:20px;font-weight:600;color:var(--t1);line-height:1;min-width:22px;font-variant-numeric:tabular-nums;}
.dk2030 .dk-rankwhy{font-size:12px;color:var(--t3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:2px 8px;line-height:1.3;}
.dk2030 .dk-more-org{font-size:13px;color:var(--t3);margin-top:6px;}
.dk2030 .dk-signup-panel .btn-primary{padding:9px 16px;}
@media (max-width:640px){
  .dk2030 .dk-landing-head h1.dk-h{font-size:22px;}
  .dk2030 .dk-series-grid{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .dk2030 .dk-series-tile{flex:0 0 160px;}
}
/* the landing's chip row is not a direct child of .dk-scroll (it sits in the head), so
   it gets the same one-line swipe treatment the tab rows have on a phone */
@media(max-width:600px){
  .dk2030 .dk-landing-head .dk-catrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;margin-left:-14px;margin-right:-14px;
    padding:0 14px 4px;scroll-snap-type:x proximity;}
  .dk2030 .dk-landing-head .dk-catrow::-webkit-scrollbar{display:none;}
  .dk2030 .dk-landing-head .dk-catrow .chip{flex:0 0 auto;scroll-snap-align:start;}
}
/* questions from the rows (geo/questions.py) + the share row (2026-09-05) */
.dk2030 .dk-questions{margin:18px 0 8px;padding:0 2px;}
/* links to the pages we want to rank, from the page itself (geo/_related_2030.html, 2026-09-25) */
.dk2030 .dk-related{margin:22px 0 8px;padding:0 2px;}
.dk2030 .dk-related .fl{margin:14px 0 8px;}
.dk2030 .dk-related-row{display:flex;flex-wrap:wrap;gap:8px;}
.dk2030 .dk-related-row .chip{border:0;border-radius:8px;padding:8px 12px;gap:7px;background:var(--s2);color:var(--t2);font-weight:500;line-height:16px;text-decoration:none;}
.dk2030 .dk-related-row .chip:hover{background:var(--s3);color:var(--t1);}
.dk2030 .dk-related-row .cat-ico{width:16px;height:16px;flex:none;color:var(--a1);}
.dk2030 .dk-questions .fl{margin-bottom:6px;}
.dk2030 .dk-qa{padding:9px 0;border-top:1px solid var(--line);}
.dk2030 .dk-qa h3{font-size:14px;font-weight:600;margin:0 0 3px;line-height:1.3;}
.dk2030 .dk-qa p{font-size:14px;line-height:1.5;color:var(--t2);margin:0;}
.dk2030 .dk-share-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0 4px;font-size:13px;}
.dk2030 .dk-share-row .chip{padding:4px 10px;font-size:12px;}
/* organizer page (2026-09-05) */
.dk2030 .dk-org-meta{font-size:14px;line-height:1.5;margin:4px 0 6px;}
.dk2030 .dk-org-meta a{color:var(--t1);}
/* Thursday reminder + series follow (2026-09-05) */
.dk2030 .dk-remind{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;}
.dk2030 .dk-remind-form{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;width:100%;}
.dk2030 .dk-series-follow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
/* people pages + the «still relevant?» strip (2026-09-05) */
.dk2030 .dk-people{margin:4px 0 12px;}
.dk2030 .dk-people-row{flex-wrap:wrap;}
@media(max-width:600px){.dk2030 .dk-people-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}}
.dk2030 .dk-people-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.dk2030 .dk-bump{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:14px;}

/* ── /artists/{slug}/ — a tour reads date-first ─────────────────────────────
   Not the afisha card: every row of one act's tour carries the SAME title, so the
   title is the last thing here and the date is the first (city_events/_tour_row_2030.html). */
.dk-tour-row{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none}
.dk-tour-row:last-child{border-bottom:0}
.dk-tour-when{flex:0 0 62px;display:flex;flex-direction:column;line-height:1.15}
.dk-tour-when b{font-size:15px;color:var(--t1);font-weight:600}
.dk-tour-when i{font-style:normal;font-size:12px;color:var(--t3)}
.dk-tour-where{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.dk-tour-city{font-size:15px;font-weight:600}
.dk-tour-venue{font-size:13px}
.dk-tour-what{flex:0 1 auto;max-width:42%;font-size:13px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  .dk-tour-what{display:none}
  .dk-tour-when{flex-basis:54px}
}

/* ── /categories/ — каждая категория со своим счётчиком ─────────────────────
   Плотная сетка, а не список: 137 строк колонкой читаются как каталог запчастей.
   Пустая категория остаётся видимой, но не кликабельной — число объясняет почему. */
.dk-catgroup h2 a{text-decoration:none}
.dk-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px}
.dk-catcell{display:flex;align-items:baseline;gap:8px;padding:5px 0;text-decoration:none;min-width:0}
.dk-catcell .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--t1)}
.dk-catcell .ct{flex:0 0 auto;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.dk-catcell.empty .nm{color:var(--t3)}
.dk-catcell:not(.empty):hover .nm{color:var(--a1)}

/* ── /submit/ — форма организатора ─────────────────────────────────────────
   Три факта до формы: сколько стоит, кто проверяет, как долго. Менеджер площадки
   не станет заполнять двенадцать полей, не зная ответов. */
.dk-submit{max-width:560px}
.dk-submit-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 22px}
.dk-submit-facts>div{background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.dk-submit-facts b{display:block;font-size:14px;color:var(--t1);font-weight:600}
.dk-submit-facts span{font-size:13px;color:var(--t2)}
.dk-submit-form{display:flex;flex-direction:column;gap:13px}
.dk-field{display:flex;flex-direction:column;gap:5px}
.dk-field .lb{font-size:13px;color:var(--t2)}
.dk-field .hp{font-size:12px;color:var(--t3)}
.dk-field .er{font-size:12px;color:#ff6369}
.dk-field.err .sf-input{border-color:#ff6369}
.dk-field input[type=checkbox]{width:auto;align-self:flex-start}
.dk-formerr{background:rgba(255,99,105,.12);color:#ff6369;border-radius:8px;padding:9px 12px;font-size:13px}

/* Category chips (owner, 2026-09-16): rounded rectangles, no outline, an icon before the word.
   The rest state is a soft tile on the page ground; the chosen one inverts. */
.dk2030 .dk-catrow .chip{border:0;border-radius:8px;padding:8px 12px;gap:7px;background:var(--s2);color:var(--t2);font-weight:500;line-height:16px;}
.dk2030 .dk-catrow .chip:hover{background:var(--s3);color:var(--t1);}
.dk2030 .dk-catrow .chip.on{background:var(--t1);color:var(--bg);font-weight:600;}
.dk2030 .dk-catrow .chip .cat-ico{width:15px;height:15px;flex:none;opacity:.9;}
.dk2030 .dk-catrow .chip .n{font-weight:400;opacity:.7;}

/* ---------- Places list: picture-first (owner, 2026-09-16) ----------
   The picture is the card: no box, no shadow, the name on the picture, the facts under it on
   the page ground. A place without a picture is a typographic tile on a generative tint
   (--cov1..6 by the last digit of its id) with its initial large and quiet — the same
   silhouette, never a grey square. Photos are 8:5 in the 570 px column, 3:2 on a phone. */
.dk2030 .plx{padding:0 0 22px;}
.dk2030 .plx-a{display:block;text-decoration:none;color:inherit;outline:none;}
.dk2030 .plx-a:focus-visible .plx-shot{box-shadow:0 0 0 3px var(--a1);}
.dk2030 .plx-shot{position:relative;width:100%;aspect-ratio:8/5;border-radius:var(--r-card);overflow:hidden;background:var(--s2);}
.dk2030 .plx-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .plx-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,13,0) 42%,rgba(8,8,13,.78) 100%);pointer-events:none;}
.dk2030 .plx-ini{position:absolute;right:16px;top:-6px;font-size:150px;line-height:1;font-weight:600;letter-spacing:normal;color:var(--covt);opacity:.16;user-select:none;pointer-events:none;}
.dk2030 .plx-typo::after{background:none;}
.dk2030 .plx-typo[data-cov="0"],.dk2030 .plx-typo[data-cov="6"]{background:var(--cov1);}
.dk2030 .plx-typo[data-cov="1"],.dk2030 .plx-typo[data-cov="7"]{background:var(--cov2);}
.dk2030 .plx-typo[data-cov="2"],.dk2030 .plx-typo[data-cov="8"]{background:var(--cov3);}
.dk2030 .plx-typo[data-cov="3"],.dk2030 .plx-typo[data-cov="9"]{background:var(--cov4);}
.dk2030 .plx-typo[data-cov="4"]{background:var(--cov5);}
.dk2030 .plx-typo[data-cov="5"]{background:var(--cov6);}
.dk2030 .plx-name{position:absolute;left:18px;right:18px;bottom:15px;z-index:1;margin:0;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:normal;color:#fff;
  text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .plx-typo .plx-name{color:var(--covt);}
/* the place's number in a ranked list: part of the name line, quieter than the name */
.dk2030 .plx-no{margin-right:9px;opacity:.7;font-variant-numeric:tabular-nums;font-weight:500;}
.dk2030 .plx-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:10px 4px 0;font-size:14px;line-height:18px;color:var(--t2);}
.dk2030 .plx-cat{display:inline-flex;align-items:center;gap:6px;color:var(--t1);}
.dk2030 .plx-cat .cat-ico{width:15px;height:15px;flex:none;}
/* The rating the list is ordered by, ON the picture (designer's pass 2026-09-19): its own dark chip, like `.plx-why`,
   because it sits on photographs and on six tints in two themes. */
.dk2030 .plx-rate{position:absolute;right:14px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  font-size:13px;line-height:16px;font-weight:600;color:#fff;background:rgba(8,10,18,.6);padding:4px 9px;border-radius:8px;
  font-variant-numeric:tabular-nums;}
.dk2030 .plx-rate small{font-size:12px;font-weight:500;color:rgba(255,255,255,.78);}
.dk2030 .plx-rate svg{width:13px;height:13px;fill:#ffb340;}
/* A ranked list is compared, not admired: from tablet width up the first place keeps the full picture and the rest
   stand two in a row — ten places took ten screens. Rows keep one height, so a place without a photograph takes the
   same frame as its neighbour instead of a low band. */
@media (min-width:601px){
  .dk2030 .dk-feed:has(> .plx){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;}
  .dk2030 .dk-feed:has(> .plx) > :not(.plx){grid-column:1/-1;}
  /* the leader takes the full width only when it has a picture to fill it: a full-width tint is an empty banner */
  .dk2030 .dk-feed > .plx:first-child:not(:has(.plx-typo)){grid-column:1/-1;}
  .dk2030 .dk-feed > .plx:not(:first-child) .plx-name,.dk2030 .dk-feed > .plx:first-child:has(.plx-typo) .plx-name{font-size:17px;left:14px;right:14px;bottom:12px;}
  .dk2030 .dk-feed > .plx .plx-typo{aspect-ratio:8/5;}
  .dk2030 .dk-feed > .plx:not(:first-child) .plx-why{max-width:calc(100% - 120px);}
}
@media (max-width:600px){
  .dk2030 .plx{padding-bottom:18px;}
  .dk2030 .plx-shot{aspect-ratio:3/2;border-radius:var(--r-card);}
  .dk2030 .plx-name{font-size:20px;left:14px;right:14px;bottom:12px;}
  .dk2030 .plx-ini{font-size:118px;right:10px;top:-4px;}
  .dk2030 .plx-meta{padding-top:9px;font-size:13px;}
}

/* Places list, second pass (2026-09-16): a place without any picture is a LOW band, not a
   picture-sized tile; a venue whose picture is its next event's poster says so on the picture;
   the facts row names the city; «N events are coming up here» under it. */
.dk2030 .plx-typo{aspect-ratio:3/1;}
.dk2030 .plx-typo .plx-ini{font-size:96px;top:-8px;right:14px;}
.dk2030 .plx-typo .plx-name{font-size:20px;bottom:12px;}
.dk2030 .plx-on{position:absolute;left:14px;top:12px;z-index:1;font-size:12px;line-height:16px;font-weight:600;color:#fff;
  background:rgba(8,10,18,.6);padding:4px 9px;border-radius:8px;white-space:nowrap;}
.dk2030 .plx-soon{padding:4px 4px 0;font-size:13px;line-height:18px;color:var(--t3);}
/* Why THIS place, on the card that has no picture to say it (2026-09-17). 97 % of the
   registry's places have no photograph, and once the ordering became real the best-ranked
   of them led every list — so a reader's first row in Zürich was a tint with the letter L.
   Its own dark chip, not a theme colour: it sits on six generative tints in two themes, the
   same reason `.live` carries its own (gotchas). Same visual language as `.plx-on`, because
   it answers the same question in the same corner. */
.dk2030 .plx-why{position:absolute;left:14px;top:12px;z-index:1;margin:0;max-width:calc(100% - 110px);width:fit-content;
  font-size:12px;line-height:16px;font-weight:600;color:#fff;background:rgba(8,10,18,.6);
  padding:4px 9px;border-radius:8px;font-variant-numeric:tabular-nums;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:600px){
  .dk2030 .plx-typo{aspect-ratio:5/2;}
  .dk2030 .plx-typo .plx-ini{font-size:80px;top:-6px;right:10px;}
  .dk2030 .plx-typo .plx-name{font-size:17px;bottom:10px;}
  .dk2030 .plx-why{left:10px;top:10px;max-width:calc(100% - 86px);font-size:12px;}
}
/* «Most reviewed in Zurich» is a whole sentence, and the city IS the point of it: clipped to one line beside the
   rating chip, the city was cut off in seven of ten languages («Am meisten bewertet in…», measured 2026-09-20), and
   in German the chip overlapped the rating. It stands lower, clear of that chip, and may take two lines. It is
   written AFTER the phone block and with the class of the base rule, because equal specificity later in the file
   wins: the first version left `top:10px` from the phone rule standing beside its own `bottom`, and an absolutely
   positioned box with both stretched into a slab over 40 % of the picture (the project's own source-order trap). */
.dk2030 .plx-why.plx-top,.dk2030 .dk-feed > .plx .plx-why.plx-top{
  top:auto;bottom:46px;max-width:calc(100% - 28px);-webkit-line-clamp:2;}
@media (max-width:600px){
  .dk2030 .plx-why.plx-top,.dk2030 .dk-feed > .plx .plx-why.plx-top{top:auto;bottom:40px;max-width:calc(100% - 20px);}
}

/* Event page, designer's pass 2026-09-19: the date as a calendar leaf, the venue as a card; on a phone an upright
   poster took the whole first screen and pushed the name and the date under the fold. */
.dk2030 .dk-ewhen{display:flex;align-items:center;gap:12px;margin-top:10px;}
.dk2030 .dk-ewhen-leaf{flex:none;width:52px;padding:6px 0;text-align:center;line-height:1.1;border:1px solid var(--line-2);border-radius:12px;}
.dk2030 .dk-ewhen-leaf span{display:block;font-size:11px;font-weight:600;color:var(--a2);}
.dk2030 .dk-ewhen-leaf b{display:block;font-size:20px;color:var(--t1);font-variant-numeric:tabular-nums;}
.dk2030 .dk-ewhen-txt{display:flex;flex-direction:column;min-width:0;}
.dk2030 .dk-ewhen-txt b{font-size:16px;color:var(--t1);}
.dk2030 .dk-ewhen-txt span{font-size:14px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .dk-evenue{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:0;
  border-radius:var(--r-card);background:var(--s1);color:var(--t1);text-decoration:none;box-shadow:var(--edge);}
.dk2030 .dk-evenue-shot{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;}
.dk2030 .dk-evenue-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .dk-evenue-txt{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;color:var(--t2);}
.dk2030 .dk-evenue-txt b{font-size:16px;color:var(--t1);}
.dk2030 .dk-evenue-txt .a{font-size:13px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:600px){
  .dk2030 .dk-listing .dk-modal-hero.shot{max-height:56vh;}
  .dk2030 .dk-listing .dk-modal-hero.shot .dk-hero-media img:not(.blurfill),.dk2030 .dk-listing .dk-modal-hero.shot video{max-height:56vh;}
}
/* Place page, designer's pass 2026-09-19: the rating under the name, the action row, the week. */
.dk2030 .dk-prate{display:inline-flex;align-items:baseline;gap:6px;margin-top:8px;color:var(--t2);font-size:14px;text-decoration:none;font-variant-numeric:tabular-nums;}
.dk2030 .dk-prate b{font-size:20px;color:var(--t1);}
.dk2030 .dk-prate .st{color:var(--warn);}
.dk2030 .dk-pacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.dk2030 .dk-phours{display:flex;flex-direction:column;max-width:340px;}
.dk2030 .dk-phour{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:14px;color:var(--t2);font-variant-numeric:tabular-nums;}
.dk2030 .dk-phour.on{color:var(--t1);font-weight:600;}
/* Place details strip (Place.facts, 2026-09-17): the source's own words as quiet tiles. */
.dk2030 .dk-pfacts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px;}
.dk2030 .dk-pfacts .fact{display:inline-flex;align-items:center;padding:5px 10px;border-radius:8px;background:var(--s2);color:var(--t2);font-size:13px;line-height:16px;text-decoration:none;}
.dk2030 .dk-pfacts a.fact{color:var(--t1);}
.dk2030 .dk-pfacts a.fact:hover{background:var(--s3);}

/* Place facts, second round (2026-09-17): rating buckets, aspect scores, «Good to know», awards. */
.dk2030 .dk-rbars{display:grid;gap:3px;margin:8px 0 2px;max-width:320px;}
.dk2030 .dk-rbar{display:grid;grid-template-columns:30px 1fr 34px;align-items:center;gap:8px;font-size:12px;color:var(--t2);}
.dk2030 .dk-rbar-t,.dk2030 .dk-sub-t{height:6px;border-radius:3px;background:var(--s2);overflow:hidden;}
.dk2030 .dk-rbar-f,.dk2030 .dk-sub-f{display:block;height:100%;background:var(--a1);border-radius:3px;}
.dk2030 .dk-rbar-n,.dk2030 .dk-sub-n{text-align:right;font-variant-numeric:tabular-nums;}
.dk2030 .dk-subs{display:grid;gap:4px;margin:10px 0 2px;max-width:320px;}
.dk2030 .dk-sub{display:grid;grid-template-columns:96px 1fr 30px;align-items:center;gap:8px;font-size:13px;color:var(--t2);}
.dk2030 .dk-pfeat{margin:14px 0 4px;}
.dk2030 .dk-pfeat-row{display:grid;grid-template-columns:132px 1fr;gap:10px;padding:5px 0;border-top:1px solid var(--line);font-size:13px;line-height:18px;}
.dk2030 .dk-pfeat-row:first-of-type{border-top:0;}
.dk2030 .dk-pfeat-g{color:var(--t3);}
.dk2030 .dk-pfeat-v{color:var(--t1);}
.dk2030 .dk-pfacts .fact-award{background:var(--a1-soft, var(--s2));color:var(--t1);}
@media (max-width:640px){.dk2030 .dk-pfeat-row{grid-template-columns:1fr;gap:2px;}}

/* Festival page (city_events/series_detail_2030.html, 2026-09-17; owner: «доработай дизайн… карточки
   эвентов не должны быть на белом фоне»). The next edition is a ticket — a date stub, a perforation,
   what / where / tickets / who's going. The programme is posters on a stage lit by the festival's
   own artwork (a blurred copy of the cover under a dark veil): dark in both themes, so a poster
   never sits as a white card on a white page, and every festival's stage has its own colour. */
.dk2030 .fx .dk-modal-body .host{border-bottom:0;padding-bottom:0;}
.dk2030 .fx .dk-modal-ttl{font-size:28px;line-height:1.12;letter-spacing:normal;text-wrap:balance;margin-top:4px;}
.dk2030 .fx-follow{margin-top:14px;}
.dk2030 .fx .dk-desc{max-width:62ch;}

.dk2030 .fx-ticket{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);margin-top:22px;border-radius:var(--r-card);background:var(--s3);}
.dk2030 .fx-ticket::before,.dk2030 .fx-ticket::after{content:"";position:absolute;left:87px;width:18px;height:18px;border-radius:50%;background:var(--s1);}
.dk2030 .fx-ticket::before{top:-9px;}
.dk2030 .fx-ticket::after{bottom:-9px;}
.dk2030 .fx-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:16px 6px;border-right:2px dashed var(--line-2);text-align:center;}
.dk2030 .fx-stub-m{font-size:13px;font-weight:600;color:var(--t2);}
.dk2030 .fx-stub-d{font-size:34px;font-weight:600;line-height:1;letter-spacing:normal;color:var(--t1);font-variant-numeric:tabular-nums;white-space:nowrap;}
.dk2030 .fx-stub-y{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums;}
.dk2030 .fx-stub-d.is-range{font-size:24px;letter-spacing:normal;}
.dk2030 .fx-ticket-main{min-width:0;padding:15px 16px 16px 18px;}
.dk2030 .fx-ticket-t{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:normal;color:var(--t1);}
.dk2030 .fx-ticket-t a{color:inherit;text-decoration:none;}
.dk2030 .fx-ticket-t a:hover{text-decoration:underline;text-underline-offset:3px;}
.dk2030 .fx-ticket-sub{font-size:14px;font-weight:600;color:var(--t1);margin-top:3px;}
.dk2030 .fx-ticket-m{font-size:13px;line-height:1.45;color:var(--t2);margin-top:5px;}
.dk2030 .fx-ticket-m a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;}
.dk2030 .fx-ticket-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:13px;}
.dk2030 .fx-ticket-cta .pill-accent{padding:9px 20px;font-size:14px;font-weight:600;border-radius:var(--r-pill);text-decoration:none;}
.dk2030 .fx-ticket .going{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);}
.dk2030 .fx-ticket .going p{margin:6px 0 0;}

.dk2030 .fx-stage{position:relative;isolation:isolate;overflow:hidden;margin:26px calc(-1 * var(--pad)) 0;padding:20px var(--pad) 24px;background:#0b0b14;color:#f4f4fb;
  --t1:#f4f4fb; --t2:#c3c3d6; --t3:#a6a6be; --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2);}
.dk2030 .fx-stage + .fx-stage{margin-top:0;border-top:1px solid rgba(255,255,255,.08);}
.dk2030 .fx-stage-glow{position:absolute;left:-20%;top:-30%;width:140%;height:160%;object-fit:cover;filter:blur(44px) saturate(1.9) brightness(1.15);opacity:.78;z-index:-2;pointer-events:none;}
.dk2030 .fx-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,20,.55) 0%,rgba(11,11,20,.42) 38%,rgba(11,11,20,.6) 72%,rgba(11,11,20,.86) 100%);}
.dk2030 .fx-stage-h{font-family:var(--font);font-size:17px;font-weight:600;line-height:1.25;letter-spacing:normal;margin:0 0 14px;color:var(--t1);}
.dk2030 .fx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:20px 14px;}
.dk2030 .fx-tile{display:flex;flex-direction:column;gap:5px;min-width:0;max-width:280px;color:var(--t1);text-decoration:none;border-radius:12px;}
.dk2030 .fx-tile:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.dk2030 .fx-tile-img{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#1c1c2b;box-shadow:0 16px 32px -14px rgba(0,0,0,.75);}
.dk2030 .fx-tile-img img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
.dk2030 .fx-tile-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);}
.dk2030 .fx-tile-img + .fx-tile-when{margin-top:5px;}
.dk2030 .fx-tile-when{font-size:12px;font-weight:600;line-height:1.3;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.dk2030 .fx-tile-t{font-size:14px;font-weight:600;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .fx-tile:hover .fx-tile-t{text-decoration:underline;text-underline-offset:3px;}
.dk2030 .fx-tile-m{font-size:12px;line-height:1.3;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.dk2030 .fx-years{margin-top:24px;}
.dk2030 .fx-years-h{font-family:var(--font);font-size:15px;font-weight:600;margin:0 0 4px;color:var(--t1);}
.dk2030 .fx-years .dk-plain-list{gap:0;}
.dk2030 .fx-years .dk-plain-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line);}
.dk2030 .fx-years .dk-plain-list li:first-child{border-top:0;}
.dk2030 .fx-foot{margin-top:26px;}

@media (max-width:640px){
  .dk2030 .fx .dk-modal-ttl{font-size:24px;}
  /* on a phone the stub lies across the top and the perforation runs sideways */
  .dk2030 .fx-ticket{grid-template-columns:minmax(0,1fr);}
  .dk2030 .fx-ticket::before,.dk2030 .fx-ticket::after{top:42px;bottom:auto;}
  .dk2030 .fx-ticket::before{left:-9px;}
  .dk2030 .fx-ticket::after{left:auto;right:-9px;}
  .dk2030 .fx-stub{box-sizing:border-box;flex-direction:row;justify-content:flex-start;align-items:baseline;gap:7px;height:52px;padding:12px 16px 0;border-right:0;border-bottom:2px dashed var(--line-2);}
  .dk2030 .fx-stub-d{order:-1;font-size:26px;line-height:26px;}
  .dk2030 .fx-stub-m{font-size:15px;color:var(--t1);}
  .dk2030 .fx-stub-y{font-size:15px;}
  .dk2030 .fx-ticket-main{padding:13px 16px 15px;}
  .dk2030 .fx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;}
}

/* A place's pictures: big frame + tiles, the old invme GalleryBox (2026-09-21). The tile count sets the layout:
   2 → two tall tiles, 3 → three, up to 6 → rows of three that stretch to fill, more → rows of four, shorter. */
.dk2030 .pg-tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.dk2030 .pg-tile{margin:0;flex:1 1 calc(33.333% - 6px);min-width:0;}
.dk2030 .pg-tiles[data-n="2"] .pg-tile{flex-basis:calc(50% - 4px);}
.dk2030 .pg-tiles[data-n="7"] .pg-tile,.dk2030 .pg-tiles[data-n="8"] .pg-tile,.dk2030 .pg-tiles[data-n="9"] .pg-tile{flex-basis:calc(25% - 6px);}
.dk2030 .pg-tiles:has(.pg-tile:nth-child(10)) .pg-tile{flex-basis:calc(20% - 7px);}
.dk2030 .pg-tiles:has(.pg-tile:nth-child(10)) .pg-thumb{height:64px;}
.dk2030 .pg-thumb{display:block;height:96px;border-radius:12px;overflow:hidden;background:var(--cov1);cursor:pointer;
  transition:box-shadow .2s ease;}
.dk2030 .pg-tiles[data-n="2"] .pg-thumb{height:160px;}
.dk2030 .pg-tiles[data-n="3"] .pg-thumb{height:120px;}
.dk2030 .pg-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .pg-thumb.on{box-shadow:0 0 0 3px var(--a1);}
.dk2030 .pg-thumb:focus-visible{outline:none;box-shadow:0 0 0 3px var(--a1);}
.dk2030 .pg-tile figcaption{font-size:10px;color:var(--t3);margin-top:3px;}
.dk2030 [data-pg-open] img{cursor:zoom-in;}
@media(max-width:600px){.dk2030 .pg-tiles[data-n] .pg-thumb{height:72px;}.dk2030 .pg-tiles[data-n="2"] .pg-thumb{height:120px;}}

/* The place overlay renders the full page's body and rail (places/_detail_modal_2030.html, 2026-09-21): the trail and
   the rail cards need the overlay's inner padding; the close button sits over the trail's right end. */
.dk2030 .dk-modal-place > .dk-crumbs{padding:16px 56px 10px 16px;margin:0;}
.dk2030 .dk-modal-rail{display:grid;gap:12px;padding:4px 16px 18px;}
.dk2030 .dk-modal-rail:empty{display:none;}

/* The registry's analysis on the place page (places/_intel_2030.html). Designer's pass 2026-09-21: one tinted panel
   answers «why go»; mention counts are bars on one scale, praise beside friction; fits are paired cards; everything to
   know before going is one list. Praise and friction differ by a MARK and a colour, never colour alone. */
.dk2030 .pi{margin-top:18px;display:grid;gap:0;}
.dk2030 .pi-why{margin-top:6px;padding:16px 18px 16px;border-radius:var(--r-card);background:var(--now-soft);
  border:1px solid color-mix(in srgb,var(--now) 22%,transparent);}
.dk2030 .pi-why-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;line-height:20px;font-weight:600;color:var(--t1);}
.dk2030 .pi-why-h svg{width:16px;height:16px;color:var(--now);flex:none;}
.dk2030 .pi-checks{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;line-height:21px;color:var(--t1);}
.dk2030 .pi-checks li{position:relative;padding-left:26px;}
.dk2030 .pi-checks li::before{content:"";position:absolute;left:2px;top:4px;width:9px;height:5px;border-left:2.2px solid var(--now);
  border-bottom:2.2px solid var(--now);transform:rotate(-45deg);}
.dk2030 .pi-vibe{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;}
.dk2030 .pi-vibe span{padding:5px 12px;border-radius:var(--r-ctl);background:var(--a1-soft,var(--s3));color:var(--t1);font-size:13px;line-height:16px;font-weight:600;}

.dk2030 .pi-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px;}
.dk2030 .pi-meter{padding:14px 16px 12px;border-radius:var(--r-card);background:var(--s2);border:0;box-shadow:var(--edge);}
.dk2030 .pi-meter h4{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px;line-height:16px;font-weight:600;color:var(--t2);}
.dk2030 .pi-meter h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--now);}
.dk2030 .pi-meter.pi-down h4::before{border-radius:2px;background:var(--warn);}
.dk2030 .pi-bar{display:grid;grid-template-columns:minmax(0,1fr) 72px 22px;align-items:center;gap:10px;padding:5px 0;font-size:14px;line-height:18px;color:var(--t1);}
.dk2030 .pi-bar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .pi-bar-t{height:6px;border-radius:3px;background:var(--s3);overflow:hidden;}
.dk2030 .pi-bar-t i{display:block;height:100%;border-radius:3px;background:var(--now);}
.dk2030 .pi-down .pi-bar-t i{background:var(--warn);}
.dk2030 .pi-bar b{text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--t2);}
.dk2030 .pi-note{margin:8px 2px 0;font-size:12px;line-height:16px;color:var(--t3);}

.dk2030 .pi-dishes{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:8px;}
.dk2030 .pi-dishes span{padding:6px 12px;border-radius:8px;background:var(--s2);border:1px solid var(--line);color:var(--t1);font-size:14px;line-height:18px;}

.dk2030 .pi-fits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:8px;}
.dk2030 .pi-fit{padding:12px 14px 12px 16px;border-radius:12px;background:var(--s2);border:1px solid var(--line);position:relative;}
.dk2030 .pi-fit b{display:block;font-size:14px;line-height:19px;font-weight:600;color:var(--t1);}
.dk2030 .pi-fit p{margin:3px 0 0;font-size:13px;line-height:18.5px;color:var(--t2);}
.dk2030 .pi-fit.pi-no{background:transparent;border-style:dashed;border-color:var(--line-2);}
.dk2030 .pi-fit.pi-no b{color:var(--t2);}

.dk2030 .pi-notes{margin:8px 0 0;padding:0;list-style:none;border-radius:var(--r-card);border:0;background:var(--s2);overflow:hidden;box-shadow:var(--edge);}
.dk2030 .pi-notes li{position:relative;padding:11px 14px 11px 42px;font-size:14px;line-height:20px;color:var(--t1);}
.dk2030 .pi-notes li + li{border-top:1px solid var(--line);}
.dk2030 .pi-notes li::before{position:absolute;left:14px;top:11px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;line-height:1;font-weight:600;}
.dk2030 .pi-n-warn::before{content:"!";background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn);}
.dk2030 .pi-n-tip::before{content:"i";background:var(--s3);color:var(--t2);font-style:italic;font-family:Georgia,serif;}
.dk2030 .pi-n-unsure::before{content:"?";background:var(--s3);color:var(--t2);}
.dk2030 .pi-n-unsure em{font-style:normal;font-weight:600;color:var(--t2);}
.dk2030 .pi-n-unsure em::after{content:" ·";}
.dk2030 .plx-line{padding:6px 4px 0;font-size:14px;line-height:19px;color:var(--t1);}
/* the card's facts where no analysis exists: award, what sets the place apart, the street */
.dk2030 .plx-facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:6px 4px 0;font-size:13px;line-height:18px;color:var(--t2);}
.dk2030 .plx-facts .plx-award{font-weight:600;color:var(--t1);}
.dk2030 .plx-facts .plx-street{color:var(--t3);}
.dk2030 .plx-line p{margin:0;}
.dk2030 .plx-line > p:first-child{color:var(--t2);}
.dk2030 .plx-praise{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin-top:7px !important;font-size:13px;line-height:16px;}
.dk2030 .plx-praise span{color:var(--t3);margin-right:2px;}
.dk2030 .plx-praise b{display:inline-flex;gap:5px;padding:3px 9px;border-radius:999px;background:var(--now-soft);font-weight:600;color:var(--t1);}
.dk2030 .plx-praise i{font-style:normal;font-weight:600;color:var(--now);font-variant-numeric:tabular-nums;}
/* four tiles are two rows of two, not three and one stretched across */
.dk2030 .pg-tiles[data-n="4"] .pg-tile{flex-basis:calc(50% - 4px);}

/* The place page, designer's pass 2026-09-21 (owner: «всё в кучу, нет акцентов»). Scoped to the place article: the
   name is large, one sentence says what the place is, the numbers people compare by stand together, one action is
   primary and the rest are an even row; sections are separated by air and a heavier heading, not by more boxes. */
.dk2030 .dk-listing .dk-modal-ttl{font-size:28px;line-height:1.12;letter-spacing:normal;text-wrap:balance;margin-top:18px;}
.dk2030 .dk-listing .dk-modal-body > .metabar{margin-top:8px;font-size:14px;}
.dk2030 .dk-listing .pl-lead{margin:12px 0 0;font-size:17px;line-height:24px;color:var(--t1);text-wrap:pretty;max-width:60ch;}
.dk2030 .dk-listing .pl-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:16px;border:0;
  border-radius:var(--r-card);background:var(--s2);overflow:hidden;box-shadow:var(--edge);}
.dk2030 .dk-listing .pl-stats:empty{display:none;}
.dk2030 .dk-listing .pl-stat{display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;gap:2px 5px;margin:0;padding:14px 16px;min-width:0;
  color:var(--t2);font-size:13px;line-height:16px;text-decoration:none;}
.dk2030 .dk-listing .pl-stat + .pl-stat{border-left:1px solid var(--line);}
.dk2030 .dk-listing .pl-stat > b{font-size:26px;line-height:28px;font-weight:600;letter-spacing:normal;color:var(--t1);font-variant-numeric:tabular-nums;}
.dk2030 .dk-listing .pl-stat > b i{font-style:normal;font-size:14px;font-weight:600;letter-spacing:0;color:var(--t3);margin-left:1px;}
.dk2030 .dk-listing .pl-stat .st{font-size:17px;color:var(--warn);}
.dk2030 .dk-listing .pl-stat > span:last-child{flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .dk-listing .pl-award > b{display:flex;align-items:center;height:28px;color:var(--warn);}
.dk2030 .dk-listing .pl-award svg{width:24px;height:24px;}
.dk2030 .dk-listing .pl-award > span:last-child{color:var(--t1);font-weight:600;}
.dk2030 .dk-listing a.pl-stat:hover{background:var(--s3);}
.dk2030 .dk-listing .pl-cta{margin-top:16px;padding-top:0;border-top:0;}
.dk2030 .dk-listing .pl-cta .btn-primary{width:100%;justify-content:center;min-height:48px;font-size:16px;}
.dk2030 .dk-listing .dk-pacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:8px;}
.dk2030 .dk-listing .dk-pacts > *{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 8px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .dk-listing .dk-pacts svg{width:16px;height:16px;flex:none;color:var(--t2);}
.dk2030 .dk-listing .pl-hint{margin:8px 0 0;font-size:12px;line-height:16px;color:var(--t3);text-align:center;}
.dk2030 .dk-listing .sec-h{font-size:17px;line-height:24px;letter-spacing:normal;margin:34px 0 12px;}
.dk2030 .dk-listing .lst-desc{font-size:15px;line-height:24px;color:var(--t1);max-width:66ch;}
.dk2030 .dk-listing .dk-pfacts{margin-top:14px;}
.dk2030 .dk-listing .dk-pfeat .dk-pfacts{margin-top:0;}
.dk2030 .dk-listing .pl-hours{border:0;border-radius:var(--r-card);background:var(--s2);overflow:hidden;box-shadow:var(--edge);}
.dk2030 .dk-listing .pl-hours summary{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;list-style:none;font-size:15px;color:var(--t1);}
.dk2030 .dk-listing .pl-hours summary::-webkit-details-marker{display:none;}
.dk2030 .dk-listing .pl-today{color:var(--t2);}
.dk2030 .dk-listing .pl-hours summary b{font-weight:600;font-variant-numeric:tabular-nums;}
.dk2030 .dk-listing .pl-week{margin-left:auto;font-size:13px;font-weight:600;color:var(--a1);}
.dk2030 .dk-listing .pl-hours[open] .pl-week{display:none;}
.dk2030 .dk-listing .pl-hours .dk-phours{max-width:none;padding:4px 16px 12px;border-top:1px solid var(--line);}
.dk2030 .dk-listing .pl-hours summary:focus-visible{outline:2px solid var(--a1);outline-offset:-2px;border-radius:var(--r-card);}
@media(max-width:600px){
  .dk2030 .dk-listing .dk-modal-ttl{font-size:24px;}
  .dk2030 .dk-listing .pl-stat{padding:12px 10px 12px 12px;font-size:12px;}
  .dk2030 .dk-listing .pl-stat > span:last-child{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .dk2030 .dk-listing .pl-stat > b{font-size:22px;line-height:26px;}
  .dk2030 .dk-listing .sec-h{margin-top:28px;font-size:17px;}
  .dk2030 .dk-listing .dk-pacts{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.dk2030 .dk-listing .pl-spread{display:grid;gap:10px;}
.dk2030 .dk-listing .pl-asof{font-size:12px;color:var(--t3);}
/* second look at the page (Le Safran, 2026-09-21): an odd last fit card spans the row; the in-page copy of «Nearby
   places» is for screens without the right rail, like the list copy beside it; the menu link is the accent chip */
.dk2030 .pi-fits > .pi-fit:last-child:nth-child(odd){grid-column:1 / -1;}
.dk2030 [data-rail-copy-tiles]{display:none;}
@media(max-width:1240px){.dk2030 [data-rail-copy-tiles]{display:block;}}
.dk2030 .dk-listing .pl-facts{margin:0 0 6px;}
.dk2030 .dk-listing .pl-facts:not(:has(*)){display:none;}
.dk2030 .dk-listing .pl-facts a.fact{background:var(--a1-soft,var(--s3));color:var(--a1);font-weight:600;}

/* Old invme's place page on our shell (2026-09-21). 1) The name stands ON the cover: the head block is pulled up over
   the photo's dark foot — white on the gradient in both themes, like every label that sits on a picture. */
.dk2030 .dk-listing [data-pg] > .dk-modal-hero:not(.dk-modal-cover)::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to top,rgba(6,6,14,.88),rgba(6,6,14,.5) 45%,rgba(6,6,14,0));pointer-events:none;}
.dk2030 .dk-listing .pl-over{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  height:132px;margin-top:-148px;padding-bottom:16px;pointer-events:none;}
.dk2030 .dk-listing .pl-over > *{pointer-events:auto;}
.dk2030 .dk-listing .pl-over .dk-modal-ttl{margin-top:0;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.45);}
.dk2030 .dk-listing .pl-over .metabar,.dk2030 .dk-listing .pl-over .metabar a,.dk2030 .dk-listing .pl-over .metabar .price{color:rgba(255,255,255,.86);}
.dk2030 .dk-listing .pl-over .metabar .sep{color:rgba(255,255,255,.5);}
.dk2030 .dk-listing .pl-over .metabar .open-now{color:#5ff0b4;}
.dk2030 .dk-listing .pl-over .metabar .closed-now{color:rgba(255,255,255,.7);}
.dk2030 .dk-listing .pl-over + .pl-lead,.dk2030 .dk-listing .pl-over + p + .pl-lead{margin-top:4px;}

/* 2) The gallery band — old GalleryBox: a title and a grid of thumbs beside ONE big frame, on a tinted band that runs
   to the edges of the card; on a phone the frame stands above the thumbs. */
/* The place's other pictures (2026-09-22; owner: «фото слишком тяжёлые, текст под фото лишний, фото не адаптивны»):
   a band with ONE stage the width of the column, the picture whole inside it over its own blurred copy (as the
   cover), one quiet caption line, and a filmstrip that scrolls sideways — the same shape for 2 pictures and for 40.
   The stage keeps its ratio on every width, the tiles keep theirs (width/height attributes), the arrows sit on the
   stage; the band is dark in both themes so posters never sit as white cards on a white page. */
.dk2030 .pgx{margin:30px calc(var(--pad) * -1) 0;padding:20px var(--pad) 18px;background:var(--s2);border-block:1px solid var(--line);}
.dk2030 .pgx-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;}
.dk2030 .pgx-h{margin:0;font-size:22px;line-height:26px;font-weight:600;letter-spacing:normal;color:var(--t3);}
.dk2030 .pgx-h span{font-size:14px;font-weight:600;letter-spacing:0;margin-left:4px;color:var(--t3);opacity:.8;}
.dk2030 .pgx-count{font-size:13px;color:var(--t3);font-variant-numeric:tabular-nums;}
.dk2030 .pgx-count b{color:var(--t1);font-weight:600;}
.dk2030 .pgx-stage{position:relative;aspect-ratio:16/10;max-height:460px;width:100%;border-radius:12px;overflow:hidden;background:var(--s3);}
.dk2030 .pgx-big{position:absolute;inset:0;z-index:1;display:block;cursor:zoom-in;}
.dk2030 .pgx-big img{width:100%;height:100%;object-fit:contain;display:block;}
.dk2030 .pgx-big:focus-visible{outline:2px solid var(--a1);outline-offset:-2px;}
/* bare arrows, no disc (owner 2026-09-22): white with a soft shadow reads on any picture */
.dk2030 .pgx-nav{position:absolute;top:50%;z-index:2;width:44px;height:64px;margin-top:-32px;padding:0;border:0;background:none;cursor:pointer;
  color:#fff;font:400 52px/60px system-ui;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 12px rgba(0,0,0,.4);
  opacity:0;transition:opacity .15s,transform .15s;}
.dk2030 .pgx-prev{left:4px;}.dk2030 .pgx-next{right:4px;}
.dk2030 .pgx-stage:hover .pgx-nav,.dk2030 .pgx-nav:focus-visible{opacity:.9;}
.dk2030 .pgx-nav:hover{opacity:1;}
.dk2030 .pgx-prev:hover{transform:translateX(-2px);}.dk2030 .pgx-next:hover{transform:translateX(2px);}
.dk2030 .pgx-nav:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:8px;}
.dk2030 .pgx-cap{margin:8px 0 0;min-height:16px;font-size:12px;line-height:16px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .pgx .pg-tiles{display:flex;flex-wrap:nowrap;gap:6px;margin:10px calc(var(--pad) * -1) 0;padding:3px var(--pad) 3px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;}
.dk2030 .pgx .pg-tiles::-webkit-scrollbar{display:none;}
.dk2030 .pgx .pg-thumb{flex:none;display:block;height:64px;min-width:48px;border-radius:8px;overflow:hidden;background:var(--s3);
  scroll-snap-align:center;opacity:.72;transition:opacity .15s,box-shadow .15s;}
/* the tile is as wide as its picture (the width/height attributes give the shape before the file arrives) */
.dk2030 .pgx .pg-thumb img{height:100%;width:auto;max-width:160px;display:block;object-fit:cover;}
.dk2030 .pgx .pg-thumb:hover{opacity:1;}
.dk2030 .pgx .pg-thumb.on{opacity:1;box-shadow:0 0 0 2px var(--a1);}
.dk2030 .pgx .pg-thumb:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 2px var(--a1);}
@media(max-width:600px){
  .dk2030 .pgx{padding:16px var(--pad) 14px;}
  .dk2030 .pgx-h{font-size:20px;line-height:24px;}
  .dk2030 .pgx-stage{aspect-ratio:4/3;border-radius:12px;}
  .dk2030 .pgx-nav{opacity:.95;width:36px;height:56px;margin-top:-28px;font-size:46px;line-height:52px;}
  .dk2030 .pgx .pg-thumb{height:56px;}
  .dk2030 .dk-listing .pl-over{height:112px;margin-top:-128px;}
}

/* The venue's programme on the place page as tickets (2026-09-22; owner: «дизайн как у билета», «даты слишком
   мелкие»). The date is a STUB — month, the day large, the weekday — behind a perforation, the same anatomy as the
   festival ticket (`.fx-ticket`) and the event page's calendar leaf (`.dk-ewhen-leaf`); the notches are cut in the
   listing's own surface (`--s1`). Then the poster (a landscape frame, its blurred copy behind a tall one), the name,
   and the line the event page prints under its leaf. «Free» and the live dot are signal colour (`--now`). */
.dk2030 .dk-listing .plw{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.dk2030 .dk-listing .plw-tkt{position:relative;display:grid;grid-template-columns:66px 118px minmax(0,1fr);align-items:center;
  border-radius:var(--r-card);background:var(--s3);border:0;color:var(--t1);text-decoration:none;
  transition:transform .2s var(--spring),border-color .2s;box-shadow:var(--edge);}
.dk2030 .dk-listing .plw-tkt::before,.dk2030 .dk-listing .plw-tkt::after{content:"";position:absolute;left:58px;width:16px;height:16px;
  border-radius:50%;background:var(--s1);border:1px solid var(--line);z-index:2;}
.dk2030 .dk-listing .plw-tkt::before{top:-9px;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;}
.dk2030 .dk-listing .plw-tkt::after{bottom:-9px;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;}
.dk2030 .dk-listing .plw-tkt:hover{transform:translateY(-2px);border-color:var(--line-2);}
.dk2030 .dk-listing .plw-tkt:hover .plw-ttl{color:var(--a1);}
.dk2030 .dk-listing .plw-stub{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:12px 4px;border-right:2px dashed var(--line-2);text-align:center;line-height:1;}
.dk2030 .dk-listing .plw-stub-m{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--a2);}
.dk2030 .dk-listing .plw-stub-d{font-size:30px;font-weight:600;letter-spacing:normal;color:var(--t1);font-variant-numeric:tabular-nums;}
.dk2030 .dk-listing .plw-stub-w{font-size:12px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums;}
.dk2030 .dk-listing .plw-stub-open{letter-spacing:.02em;text-transform:none;font-size:11px;line-height:1.2;color:var(--t2);}
.dk2030 .dk-listing .plw-shot{position:relative;display:block;aspect-ratio:4/3;margin:8px 0 8px 10px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);}
.dk2030 .dk-listing .plw-shot img:not(.blurfill){position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .dk-listing .plw-cat{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 8px;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.25;color:var(--covt);}
.dk2030 .dk-listing .plw-main{display:flex;flex-direction:column;gap:5px;min-width:0;padding:12px 16px 12px 14px;}
.dk2030 .dk-listing .plw-ttl{font-size:17px;line-height:21px;font-weight:600;letter-spacing:normal;color:var(--t1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s;}
.dk2030 .dk-listing .plw-when{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;line-height:18px;font-weight:600;
  color:var(--t2);font-variant-numeric:tabular-nums;}
.dk2030 .dk-listing .plw-dot{width:7px;height:7px;border-radius:50%;background:var(--now);margin-right:-2px;flex:none;}
.dk2030 .dk-listing .plw-price{padding:1px 8px;border-radius:var(--r-ctl);border:1px solid var(--line-2);color:var(--t1);font-weight:600;
  font-size:13px;line-height:18px;}
.dk2030 .dk-listing .plw-free{border-color:transparent;background:color-mix(in srgb,var(--now) 14%,transparent);color:var(--now);}
.dk2030 .dk-listing .plw-all{display:inline-flex;margin-top:14px;}
@media(max-width:600px){
  .dk2030 .dk-listing .plw-tkt{grid-template-columns:56px 84px minmax(0,1fr);border-radius:12px;}
  .dk2030 .dk-listing .plw-tkt::before,.dk2030 .dk-listing .plw-tkt::after{left:48px;}
  .dk2030 .dk-listing .plw-stub{padding:10px 3px;}
  .dk2030 .dk-listing .plw-stub-d{font-size:26px;}
  .dk2030 .dk-listing .plw-shot{margin:8px 0 8px 8px;border-radius:8px;}
  .dk2030 .dk-listing .plw-main{padding:10px 12px 10px 11px;gap:4px;}
  .dk2030 .dk-listing .plw-ttl{font-size:15px;line-height:19px;}
  .dk2030 .dk-listing .plw-when{font-size:13px;}
  .dk2030 .dk-listing .plw-wd{display:none;}   /* the stub already names the weekday */
}

/* 3) Contacts as label and value (old LocationInfo) */
.dk2030 .dk-listing .pl-info{margin:12px 0 0;display:grid;gap:0;border:0;border-radius:var(--r-card);background:var(--s2);overflow:hidden;box-shadow:var(--edge);}
.dk2030 .dk-listing .pl-info > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 16px;}
.dk2030 .dk-listing .pl-info > div + div{border-top:1px solid var(--line);}
.dk2030 .dk-listing .pl-info dt{font-size:13px;line-height:20px;color:var(--t2);}
.dk2030 .dk-listing .pl-info dd{margin:0;font-size:15px;line-height:20px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .dk-listing .pl-info a{color:var(--a1);text-decoration:none;}
.dk2030 .dk-listing .pl-info a:hover{text-decoration:underline;}
/* a picture-less neighbour tile: the letter reads as a monogram, not a stray character */
.dk2030 .dk-tile-cover .dk-tile-cat:only-child{font-size:15px;}

/* The place's cover: the whole picture inside the frame, its blurred copy behind it (owner 2026-09-21). The frame is
   as tall as old invme's header; the blur sheet needs the frame as its containing block and its clip. */
.dk2030 .dk-listing .pl-hero{position:relative;overflow:hidden;aspect-ratio:4/3;max-height:500px;width:100%;}
.dk2030 .dk-listing .pl-hero{display:flex;align-items:center;justify-content:center;}
.dk2030 .dk-listing .pl-hero a img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
/* the picture's size is known: its box IS the picture, so its own edges can dissolve into the blur — no seam */
.dk2030 .dk-listing .pl-hero.pl-tall a img{width:auto;height:100%;max-width:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);}
.dk2030 .dk-listing .pl-hero.pl-wide a img{width:100%;height:auto;max-height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);}
.dk2030 .dk-listing .pl-hero .blurfill{filter:blur(30px) saturate(1.25) brightness(.8);}
.dk2030 .dk-listing .pl-hero .blurfill{object-position:50% 50%;}
.dk2030 .dk-listing [data-pg] > .pl-hero::after{z-index:2;}
@media(max-width:600px){.dk2030 .dk-listing .pl-hero{aspect-ratio:1/1;}}

/* Prototype of a well-read venue website (places/_site_*_2030.html, `?demo=1`, 2026-09-21). One strong action — the
   venue's own booking or tickets — then documents, programme and practical answers; «Make a plan» stays beside it. */
.dk2030 .st-head{display:grid;gap:10px;margin-top:16px;}
.dk2030 .st-today{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:15px;font-weight:600;color:var(--t1);}
.dk2030 .st-today b{font-weight:600;color:var(--now);}
.dk2030 .st-dot{width:9px;height:9px;border-radius:50%;background:var(--now);box-shadow:0 0 0 4px var(--now-soft);}
.dk2030 .st-dot.off{background:var(--t3);box-shadow:none;}
.dk2030 .st-book{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;border-radius:var(--r-ctl);
  background:var(--a1-fill);color:#fff;text-decoration:none;font-size:16px;font-weight:600;box-shadow:0 8px 24px color-mix(in srgb,var(--a1) 35%,transparent);}
.dk2030 .st-book svg{width:19px;height:19px;flex:none;}
.dk2030 .st-book i{font-style:normal;font-weight:500;font-size:13px;opacity:.8;}
.dk2030 .st-book:hover{filter:brightness(1.07);}
.dk2030 .dk-listing .pl-cta-2{margin-top:8px;}
.dk2030 .dk-listing .pl-cta-2 .btn-primary{background:transparent;color:var(--a1);box-shadow:inset 0 0 0 1.5px var(--a1);min-height:44px;}
.dk2030 .st-menus{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.dk2030 .st-menus a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--s2);border:1px solid var(--line);
  text-decoration:none;color:var(--t1);min-width:0;}
.dk2030 .st-menus a:hover{background:var(--s3);}
.dk2030 .st-menus svg{width:20px;height:20px;flex:none;color:var(--a1);}
.dk2030 .st-menus span{display:grid;min-width:0;}
.dk2030 .st-menus b{font-size:14px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .st-menus i{font-style:normal;font-size:12px;line-height:16px;color:var(--t3);}
.dk2030 .st-menus a.fresh i{color:var(--now);font-weight:600;}
.dk2030 .st-story{margin:14px 0 0;padding-left:14px;border-left:3px solid var(--a1);font-size:15px;line-height:22px;color:var(--t1);}
.dk2030 .st-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;}
.dk2030 .st-card{padding:14px 16px;border-radius:var(--r-card);background:var(--s2);border:0;box-shadow:var(--edge);}
.dk2030 .st-card h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--t2);}
.dk2030 .st-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;line-height:19px;color:var(--t2);font-variant-numeric:tabular-nums;}
.dk2030 .st-row b{font-weight:600;color:var(--t1);white-space:nowrap;}
.dk2030 .st-row.on{color:var(--t1);font-weight:600;}
/* the current season's mark is a translated word in the markup (`st-now`) — «· now» in CSS stayed English on /ru/ */
.dk2030 .st-row .st-now{font-style:normal;color:var(--now);font-weight:600;}
.dk2030 .st-fine{margin:8px 0 0;font-size:12px;line-height:17px;color:var(--t3);}
.dk2030 .st-deals{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.dk2030 .st-deals span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px;background:var(--s3);color:var(--t1);
  font-size:13px;line-height:17px;font-weight:600;}
.dk2030 .st-deals svg{width:15px;height:15px;color:var(--t2);flex:none;}
.dk2030 .st-facts{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;line-height:20px;color:var(--t1);}
.dk2030 .st-facts li{padding-left:16px;position:relative;}
.dk2030 .st-facts li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--t3);}
.dk2030 .st-facts b{font-weight:600;margin-right:4px;}
.dk2030 .st-facts a{color:var(--a1);font-weight:600;text-decoration:none;}
.dk2030 .st-src{margin:12px 0 0;font-size:12px;color:var(--t3);}
.dk2030 .st-src a{color:var(--t2);}

/* Places list, designer's pass 2026-09-21 (owner, on Zurich: «не нравится оформление»). 1) Four wrapped rows of equal
   grey chips stood before the first place: each chip row is ONE line that scrolls, and the amenity filters are
   outlined — they narrow the list, the filled family chips change it. 2) The rank is a badge, not a pale digit glued
   to the name. 3) A place without a picture wears a monogram on a lit tint, not a giant faded letter on a slab. */
.dk2030 .dk-catrow[data-place-filters],.dk2030 .dk-catrow[data-place-filters] ~ .dk-catrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 36px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 36px),transparent 100%);}
.dk2030 .dk-catrow[data-place-filters]::-webkit-scrollbar,.dk2030 .dk-catrow[data-place-filters] ~ .dk-catrow::-webkit-scrollbar{display:none;}
.dk2030 .dk-catrow[data-place-filters] .chip,.dk2030 .dk-catrow[data-place-filters] ~ .dk-catrow .chip{flex:none;white-space:nowrap;}
.dk2030 .dk-catrow[data-place-filters] .chip:not(.on){background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);}
.dk2030 .dk-catrow[data-place-filters] .chip:not(.on):hover{background:var(--s2);}
.dk2030 .plx-no{display:block;width:max-content;margin:0 0 8px;padding:3px 10px 3px 9px;border-radius:999px;background:rgba(255,255,255,.94);
  color:#0b0b14;font-size:13px;line-height:16px;font-weight:600;letter-spacing:0;opacity:1;text-shadow:none;}
.dk2030 .plx-no::before{content:"#";font-weight:600;opacity:.55;margin-right:1px;}
.dk2030 .plx-typo{background-image:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.16),transparent 60%),linear-gradient(to top,rgba(0,0,0,.28),transparent 55%) !important;}
.dk2030 .plx-typo .plx-ini{right:auto;left:18px;top:16px;width:52px;height:52px;border-radius:var(--r-card);display:grid;place-items:center;font-size:24px;
  font-weight:600;letter-spacing:0;opacity:1;color:var(--covt);background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.dk2030 .plx-typo .plx-no{background:rgba(255,255,255,.2);color:var(--covt);}
/* the «most reviewed» line stands above the rank badge, not on it */
.dk2030 .plx-why.plx-top,.dk2030 .dk-feed > .plx .plx-why.plx-top{bottom:82px;}
@media(max-width:600px){.dk2030 .plx-why.plx-top,.dk2030 .dk-feed > .plx .plx-why.plx-top{bottom:76px;}}

/* Laurels (places/laurels.py, owner 2026-09-21): a wreath marks a PLACE IN A LIST THAT EXISTS — the badge is a link to
   that list — or a distinction the registry passes on. One drawn branch, used as a mask so it takes the text colour in
   both themes; the right branch is the same one mirrored. */
.dk2030{--laurel:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 26 48%22%3E%3Cpath d=%22M21 46 C10 40 3 26 9.5 5%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.3%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(17.83 43.96) rotate(-101.1) scale(1.00)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(17.83 43.96) rotate(-9.1) scale(0.82)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(13.15 39.41) rotate(-86.5) scale(0.94)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(13.15 39.41) rotate(5.5) scale(0.77)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(9.61 33.52) rotate(-71.7) scale(0.88)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(9.61 33.52) rotate(20.3) scale(0.72)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(7.49 26.32) rotate(-57.5) scale(0.82)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(7.49 26.32) rotate(34.5) scale(0.67)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(7.07 17.83) rotate(-44.7) scale(0.76)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(7.07 17.83) rotate(47.3) scale(0.62)%22/%3E%3Cpath d=%22M0 0 C2.5 -2.4 2.7 -6.4 0 -9.6 C-2.7 -6.4 -2.5 -2.4 0 0 Z%22 transform=%22translate(9.50 6.20) rotate(17.2) scale(.8)%22/%3E%3C/svg%3E");}
.dk2030 .lr-row{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:16px;}
.dk2030 .lr{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;
  padding:4px 34px;text-align:center;text-decoration:none;color:var(--t1);}
.dk2030 .lr::before,.dk2030 .lr::after{content:"";position:absolute;top:50%;width:26px;height:48px;margin-top:-24px;background:currentColor;
  -webkit-mask:var(--laurel) center/contain no-repeat;mask:var(--laurel) center/contain no-repeat;opacity:.78;}
.dk2030 .lr::before{left:2px;}
.dk2030 .lr::after{right:2px;transform:scaleX(-1);}
.dk2030 .lr b{font-size:20px;line-height:22px;font-weight:600;letter-spacing:normal;font-variant-numeric:tabular-nums;}
.dk2030 .lr i{font-style:normal;font-size:12px;line-height:15px;font-weight:600;color:var(--t2);max-width:150px;}
.dk2030 .lr.lr-word b{font-size:15px;line-height:18px;letter-spacing:normal;max-width:130px;}
.dk2030 a.lr:hover i{color:var(--a1);}
.dk2030 a.lr:focus-visible{outline:2px solid var(--a1);outline-offset:2px;border-radius:12px;}
.dk2030 .lr.lr-gold{color:var(--warn);}
.dk2030 .lr.lr-gold b{color:var(--t1);}
/* the head panel when a place has laurels: wreaths | rating — the two things people compare by, side by side */
.dk2030 .dk-listing .pl-honours{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:16px;padding:10px 8px;border:0;
  border-radius:var(--r-card);background:var(--s2);box-shadow:var(--edge);}
.dk2030 .dk-listing .pl-honours .lr-row{margin:0;flex:1 1 auto;justify-content:space-around;gap:6px 4px;}
/* on a list card the «most reviewed» line wears a small wreath */
.dk2030 .plx-why.plx-top{padding-inline:26px !important;}
.dk2030 .plx-why.plx-top::before,.dk2030 .plx-why.plx-top::after{content:"";position:absolute;top:50%;width:13px;height:24px;margin-top:-12px;
  background:currentColor;-webkit-mask:var(--laurel) center/contain no-repeat;mask:var(--laurel) center/contain no-repeat;}
.dk2030 .plx-why.plx-top::before{left:8px;}
.dk2030 .plx-why.plx-top::after{right:8px;transform:scaleX(-1);}
@media(max-width:600px){.dk2030 .lr{padding-inline:30px;}.dk2030 .lr b{font-size:17px;}.dk2030 .lr i{max-width:120px;}}
.dk2030 .dk-listing .pl-honours .pl-rate-solo{flex:0 0 auto;margin:0;padding:6px 16px 6px 18px;border-left:1px solid var(--line);}
@media(max-width:600px){.dk2030 .dk-listing .pl-honours{justify-content:center;}
  .dk2030 .dk-listing .pl-honours .pl-rate-solo{border-left:0;border-top:1px solid var(--line);flex-basis:100%;justify-content:center;padding:10px 0 4px;}}
.dk2030 .pi-foreign{margin:0 0 4px;padding:8px 12px;border-radius:8px;background:var(--s2);font-size:13px;line-height:17px;color:var(--t2);}
/* the honours panel: wreaths on the left, the rating on the right — one row on a desktop, stacked and centred on a phone */
.dk2030 .dk-listing .pl-honours{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;}
.dk2030 .dk-listing .pl-honours .pl-rate-solo{align-self:stretch;align-content:center;}
@media(max-width:600px){
  .dk2030 .dk-listing .pl-honours{grid-template-columns:minmax(0,1fr);}
  .dk2030 .dk-listing .pl-honours .pl-rate-solo{justify-content:center;text-align:center;}
  .dk2030 .dk-listing .pl-honours .pl-rate-solo > span:last-child{flex-basis:100%;text-align:center;}
}
/* final shape of the honours panel (2026-09-21): up to three wreaths across, the rating as one centred line under them */
.dk2030 .dk-listing .pl-honours{grid-template-columns:minmax(0,1fr);padding:14px 10px 6px;}
.dk2030 .dk-listing .pl-honours .lr-row{justify-content:space-evenly;align-items:flex-start;gap:12px 6px;}
.dk2030 .dk-listing .pl-honours .lr{flex:0 1 auto;padding-inline:30px;}
.dk2030 .dk-listing .pl-honours .lr i{max-width:118px;}
.dk2030 .dk-listing .pl-honours .pl-rate-solo{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:center;gap:6px;border-left:0;
  border-top:1px solid var(--line);margin-top:12px;padding:10px 0 6px;}
.dk2030 .dk-listing .pl-honours .pl-rate-solo > b{font-size:22px;line-height:26px;}
.dk2030 .dk-listing .pl-honours .pl-rate-solo > span:last-child{flex-basis:auto;font-size:14px;}
/* prototype, second edition (what the ten personas said, 2026-09-21): the price in figures stands in the head; a
   phone line under the booking button; last week's menu says so; a plan is the network's own action — filled, soft */
.dk2030 .st-price{margin:0;font-size:15px;line-height:21px;font-weight:600;color:var(--t1);}
.dk2030 .st-or{margin:-2px 0 0;text-align:center;font-size:13px;color:var(--t2);}
.dk2030 .st-or a{color:var(--t1);font-weight:600;text-decoration:none;}
.dk2030 .st-menus a.stale{opacity:.72;}
.dk2030 .st-menus a.stale i{color:var(--warn);font-weight:600;}
.dk2030 .dk-listing .pl-cta-2 .btn-primary{background:var(--a1-soft,color-mix(in srgb,var(--a1) 16%,transparent));color:var(--a1);box-shadow:none;min-height:46px;}

/* Third designer's pass (2026-09-22). HEAD: one line of facts, one primary action, one clear secondary, a row of
   utilities — nothing else. Documents and prices are a section; practical things are one block. */
.dk2030 .dk-listing .pl-vibe{margin:10px 0 0;}
.dk2030 .dk-listing .pl-vibe span{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:13px;padding:4px 11px;}
.dk2030 .st-head{gap:12px;margin-top:14px;}
.dk2030 .st-facts-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:14px;line-height:20px;color:var(--t1);font-weight:600;}
.dk2030 .st-facts-line b{font-weight:600;color:var(--now);}
.dk2030 .st-facts-line .st-money{color:var(--t2);font-weight:500;}
.dk2030 .st-facts-line .st-money::before{content:"·";margin-right:10px;color:var(--t3);}
.dk2030 .st-facts-line .st-money:first-child::before{content:none;}
.dk2030 .dk-listing .pl-cta-2{margin-top:10px;}
.dk2030 .dk-listing .pl-cta-2 .btn-primary{background:var(--s3);color:var(--t1);box-shadow:inset 0 0 0 1px var(--line-2);min-height:46px;font-weight:600;}
.dk2030 .dk-listing .pl-cta-2 .btn-primary:hover{background:var(--s2);}
.dk2030 .st-menucard{border:0;border-radius:var(--r-card);background:var(--s2);overflow:hidden;box-shadow:var(--edge);}
.dk2030 .st-prices{padding:12px 16px 10px;border-bottom:1px solid var(--line);}
.dk2030 .st-menucard .st-menus{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}
.dk2030 .st-menucard .st-menus a{border:0;border-radius:0;background:transparent;padding:13px 16px;box-shadow:inset 0 -1px 0 var(--line);}
.dk2030 .st-menucard .st-menus a:nth-child(odd){box-shadow:inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line);}
.dk2030 .st-menucard .st-menus a:hover{background:var(--s3);}
.dk2030 .st-extras{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.dk2030 .st-extras a{padding:7px 13px;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--a1);font-size:13px;font-weight:600;text-decoration:none;}
/* the cover: a portrait photo stood between two muddy bands with a visible seam — the fill is lighter and livelier,
   the photo's edges dissolve over a wider run */
.dk2030 .dk-listing .pl-hero .blurfill{filter:blur(34px) saturate(1.6) brightness(1.02);transform:scale(1.5);}
.dk2030 .dk-listing .pl-hero.pl-tall a img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%);}
@media(max-width:600px){.dk2030 .st-menucard .st-menus{grid-template-columns:minmax(0,1fr);}
  .dk2030 .st-menucard .st-menus a:nth-child(odd){box-shadow:inset 0 -1px 0 var(--line);}}
@media(max-width:600px){.dk2030 .dk-listing .pl-honours .lr{padding-inline:26px;}.dk2030 .dk-listing .pl-honours .lr i{max-width:92px;font-size:12px;}
  .dk2030 .dk-listing .pl-honours .lr.lr-word b{max-width:96px;font-size:14px;}.dk2030 .dk-listing .pl-honours .lr-row{gap:10px 2px;}
  .dk2030 .lr::before,.dk2030 .lr::after{width:22px;height:42px;margin-top:-21px;}}

/* The honours panel, final: ONE row — the score first, the vote count as a magnitude («11.4K»), then the wreaths.
   More wreaths than fit scroll sideways inside the panel; the score never moves. */
.dk2030 .dk-listing .pl-honours{display:flex;flex-wrap:nowrap;align-items:center;gap:0;padding:8px 6px 8px 0;grid-template-columns:none;}
.dk2030 .dk-listing .pl-score{flex:none;display:grid;justify-items:center;gap:1px;padding:4px 16px 4px 18px;margin-right:4px;border-right:1px solid var(--line);
  text-decoration:none;color:var(--t1);}
.dk2030 .dk-listing .pl-score b{display:flex;align-items:baseline;gap:3px;font-size:24px;line-height:28px;font-weight:600;letter-spacing:normal;font-variant-numeric:tabular-nums;}
.dk2030 .dk-listing .pl-score .st{font-size:15px;color:var(--warn);}
.dk2030 .dk-listing .pl-score i{font-style:normal;font-size:12px;line-height:14px;font-weight:600;color:var(--t2);}
.dk2030 .dk-listing .pl-score:hover i{color:var(--a1);}
.dk2030 .dk-listing .pl-honours .lr-row{flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:space-evenly;align-items:center;gap:0 2px;overflow-x:auto;
  scrollbar-width:none;margin:0;}
.dk2030 .dk-listing .pl-honours .lr-row::-webkit-scrollbar{display:none;}
.dk2030 .dk-listing .pl-honours .lr{flex:none;min-height:46px;padding:2px 28px;}
.dk2030 .dk-listing .pl-honours .lr b{font-size:17px;line-height:20px;}
.dk2030 .dk-listing .pl-honours .lr i{font-size:12px;line-height:14px;max-width:104px;}
.dk2030 .dk-listing .pl-honours .lr.lr-word b{font-size:14px;line-height:16px;max-width:104px;}
.dk2030 .dk-listing .pl-honours .lr::before,.dk2030 .dk-listing .pl-honours .lr::after{width:22px;height:42px;margin-top:-21px;}
@media(max-width:600px){
  .dk2030 .dk-listing .pl-honours{padding:8px 0;}
  .dk2030 .dk-listing .pl-score{padding:4px 12px 4px 14px;margin-right:2px;}
  .dk2030 .dk-listing .pl-score b{font-size:22px;}
  .dk2030 .dk-listing .pl-honours .lr-row{justify-content:flex-start;padding-right:10px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);}
  .dk2030 .dk-listing .pl-honours .lr{padding-inline:25px;}
  .dk2030 .dk-listing .pl-honours .lr i{max-width:88px;font-size:11px;}
  .dk2030 .dk-listing .pl-honours .lr.lr-word b{max-width:88px;font-size:13px;}
}
/* fit: three wreaths across on a desktop, two on a phone (a third scrolls) */
.dk2030 .dk-listing .pl-honours .lr{padding-inline:25px;}
.dk2030 .dk-listing .pl-honours .lr i,.dk2030 .dk-listing .pl-honours .lr.lr-word b{max-width:94px;}
.dk2030 .dk-listing .pl-honours .lr::before{left:0;}
.dk2030 .dk-listing .pl-honours .lr::after{right:0;}
@media(max-width:600px){
  .dk2030 .dk-listing .pl-score{padding:4px 9px 4px 12px;margin-right:0;}
  .dk2030 .dk-listing .pl-honours .lr{padding-inline:21px;}
  .dk2030 .dk-listing .pl-honours .lr i,.dk2030 .dk-listing .pl-honours .lr.lr-word b{max-width:78px;}
  .dk2030 .dk-listing .pl-honours .lr i{font-size:11px;line-height:13px;}
  .dk2030 .dk-listing .pl-honours .lr::before,.dk2030 .dk-listing .pl-honours .lr::after{width:18px;height:36px;margin-top:-18px;}
  .dk2030 .dk-listing .pl-honours .lr-row{padding-right:4px;}
}

/* ── Reviews on invme: a rating, a few words, photos (2026-09-21) ───────────────────────────────────────────────── */
.dk2030 .rv-avg{font-weight:500;color:var(--t2);font-size:13px;margin-left:6px}
.dk2030 .rv-avg span{color:#ffb400;margin-left:1px}
.dk2030 .rv-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.dk2030 .rv-row .btn-primary{margin-left:auto}
.dk2030 .rv-add{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-2);
  border-radius:var(--r-ctl);color:var(--t1);font-size:13px;font-weight:500;cursor:pointer;position:relative}
.dk2030 .rv-add svg{width:16px;height:16px}
.dk2030 .rv-add:hover{background:var(--s3)}
.dk2030 .rv-add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.dk2030 .rv-add:focus-within{outline:2px solid var(--a1);outline-offset:2px}
.dk2030 .rv-picked{font-size:12px;color:var(--t3)}
.dk2030 .rv-photos{display:flex;gap:6px;margin-top:8px;overflow-x:auto}
.dk2030 .rv-photos img{width:88px;height:88px;object-fit:cover;border-radius:8px;display:block;background:var(--s3);flex:none}
.dk2030 .rv-form textarea{font:inherit;font-size:14px}

/* ── List of places, designer's pass 2026-09-21 (Montreux museums: 8 of 9 cards were picture-sized tiles of nothing) ──
   A place with no picture is a compact ROW across the list: monogram, number, name, rating — and the facts under it.
   A picture card that would stand alone beside a hole takes the whole width. Text under a card is two lines at most and
   the praise is ONE line: the list is scanned, the page is read. */
.dk2030 .plx-row .plx-a{display:block;padding:12px 14px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);}
.dk2030 .plx-row .plx-a:hover{background:var(--s2);}
.dk2030 .plx-row{padding-bottom:10px;}
.dk2030 .plx-row .plx-typo,.dk2030 .dk-feed > .plx-row .plx-typo{aspect-ratio:auto;display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;gap:2px 12px;border-radius:0;overflow:visible;background:none !important;}
.dk2030 .plx-row .plx-typo .plx-ini{position:static;grid-row:1 / span 2;width:44px;height:44px;border-radius:13px;font-size:20px;box-shadow:none;}
.dk2030 .plx-row .plx-typo[data-cov="0"] .plx-ini,.dk2030 .plx-row .plx-typo[data-cov="6"] .plx-ini{background:var(--cov1);}
.dk2030 .plx-row .plx-typo[data-cov="1"] .plx-ini,.dk2030 .plx-row .plx-typo[data-cov="7"] .plx-ini{background:var(--cov2);}
.dk2030 .plx-row .plx-typo[data-cov="2"] .plx-ini,.dk2030 .plx-row .plx-typo[data-cov="8"] .plx-ini{background:var(--cov3);}
.dk2030 .plx-row .plx-typo[data-cov="3"] .plx-ini,.dk2030 .plx-row .plx-typo[data-cov="9"] .plx-ini{background:var(--cov4);}
.dk2030 .plx-row .plx-typo[data-cov="4"] .plx-ini{background:var(--cov5);}
.dk2030 .plx-row .plx-typo[data-cov="5"] .plx-ini{background:var(--cov6);}
.dk2030 .plx-row .plx-typo .plx-name,.dk2030 .dk-feed > .plx-row .plx-name{position:static;grid-column:2;font-size:17px;line-height:1.25;
  color:var(--t1);text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dk2030 .plx-row .plx-typo .plx-no{display:inline-block;vertical-align:1px;margin:0 8px 0 0;padding:1px 7px;font-size:12px;line-height:15px;
  background:var(--s3);color:var(--t2);}
.dk2030 .plx-row .plx-why,.dk2030 .dk-feed > .plx-row .plx-why{position:static;grid-column:2;max-width:none;padding:0;background:none;
  box-shadow:none;backdrop-filter:none;color:var(--t3);font-size:13px;font-weight:500;}
.dk2030 .plx-row .plx-rate{position:static;grid-column:3;grid-row:1 / span 2;background:none;padding:0;color:var(--t1);backdrop-filter:none;box-shadow:none;}
.dk2030 .plx-row .plx-rate small{color:var(--t3);}
.dk2030 .plx-row .plx-meta{padding:6px 0 0 56px;}
.dk2030 .plx-row .plx-line{padding:4px 0 0 56px;}
.dk2030 .plx-row .plx-soon{padding-left:56px;}
.dk2030 .plx-row .plx-meta:empty{display:none;}
.dk2030 .plx-line > p:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .plx-row .plx-line > p:first-child{-webkit-line-clamp:1;}
.dk2030 .plx-praise{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);}
.dk2030 .plx-praise b{flex:none;background:var(--s3);font-weight:500;}
@media(min-width:601px){
  .dk2030 .dk-feed > .plx-row{grid-column:1/-1;}
  .dk2030 .dk-feed > .plx-l:has(+ .plx-row),.dk2030 .dk-feed > .plx-l:has(+ :not(.plx)),.dk2030 .dk-feed > .plx-l:last-child{grid-column:1/-1;}
  .dk2030 .dk-feed > .plx-l:has(+ .plx-row) .plx-shot,.dk2030 .dk-feed > .plx-l:has(+ :not(.plx)) .plx-shot,.dk2030 .dk-feed > .plx-l:last-child .plx-shot{aspect-ratio:16/7;}
}
.dk2030 .plx-row,.dk2030 .dk-feed > .plx-row{padding:0;margin-bottom:8px;}
.dk2030 .plx-row .plx-a{box-shadow:none;background:none;}
.dk2030 .plx-row .plx-typo .plx-name{grid-row:1 / span 2;}
.dk2030 .plx-row .plx-typo:has(.plx-why) .plx-name{grid-row:1;align-self:end;}
.dk2030 .plx-row .plx-typo:has(.plx-why) .plx-why{align-self:start;}
@media(max-width:600px){.dk2030 .plx-row .plx-typo .plx-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}}

/* ── Afisha card header: the venue (or organizer) on top, like a plan's author (2026-09-21) ── */
.dk2030 .ce-head{margin-bottom:12px;}
.dk2030 .ce-av{position:relative;width:40px;height:40px;flex:none;border-radius:12px;overflow:hidden;font-size:16px;font-weight:600;
  color:var(--covt);background:var(--cov1);text-decoration:none;}
.dk2030 .ce-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.dk2030 .ce-av[data-cov="1"],.dk2030 .ce-av[data-cov="7"]{background:var(--cov2);}
.dk2030 .ce-av[data-cov="2"],.dk2030 .ce-av[data-cov="8"]{background:var(--cov3);}
.dk2030 .ce-av[data-cov="3"],.dk2030 .ce-av[data-cov="9"]{background:var(--cov4);}
.dk2030 .ce-av[data-cov="4"]{background:var(--cov5);}
.dk2030 .ce-av[data-cov="5"]{background:var(--cov6);}
.dk2030 .ce-head .nm a{color:var(--t1);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk2030 .ce-head .nm a:hover{text-decoration:underline;}
.dk2030 .ce-head .sub{font-size:13px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── Badges for a venue's own site: the «get your badge» page, the tick (2026-09-21) ── */
.dk2030 .vtick{width:.72em;height:.72em;vertical-align:-.02em;margin-left:.18em;color:var(--a1);flex:none;}
.dk2030 .pl-own{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--a1);text-decoration:none;}
.dk2030 .pl-own:hover{text-decoration:underline;}
.dk2030 .bdg{max-width:620px;}
.dk2030 .bdg-lede{font-size:16px;line-height:1.5;color:var(--t1);margin:0 0 18px;}
.dk2030 .bdg-gains{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;}
.dk2030 .bdg-gains li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);}
.dk2030 .bdg-gains b{display:block;font-size:15px;color:var(--t1);}
.dk2030 .bdg-gains li div span{display:block;font-size:14px;line-height:1.45;color:var(--t2);margin-top:2px;}
.dk2030 .bdg-tick,.dk2030 .bdg-up,.dk2030 .bdg-live{flex:none;width:28px;height:28px;border-radius:8px;background:var(--a1);position:relative;}
.dk2030 .bdg-tick::after{content:"";position:absolute;left:9px;top:6px;width:7px;height:12px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg);}
.dk2030 .bdg-up::after{content:"";position:absolute;left:8px;top:10px;width:9px;height:9px;border:solid #fff;border-width:2.4px 0 0 2.4px;transform:rotate(45deg);}
.dk2030 .bdg-live{background:var(--now);}
.dk2030 .bdg-live::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff;}
.dk2030 .bdg-state{font-size:14px;color:var(--t2);margin:0 0 6px;}
.dk2030 .bdg-state.ok{color:var(--now);font-weight:600;}
.dk2030 .bdg-h{font-size:20px;font-weight:600;letter-spacing:normal;color:var(--t1);margin:26px 0 10px;}
.dk2030 .bdg-opt{padding:14px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:12px;}
.dk2030 .bdg-opt h3{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--t1);}
.dk2030 .bdg-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.dk2030 .bdg-shot{display:grid;place-items:center;padding:16px 10px;border-radius:12px;min-width:0;}
.dk2030 .bdg-shot.dark{background:#05070a;}
.dk2030 .bdg-shot.light{background:#eef1f5;}
.dk2030 .bdg-shot img{max-width:100%;height:auto;display:block;}
.dk2030 .bdg-code{display:block;margin-top:8px;}
.dk2030 .bdg-code span{display:block;font-size:12px;color:var(--t3);margin-bottom:4px;}
.dk2030 .bdg-code textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.45;resize:vertical;}
.dk2030 .bdg-note{font-size:14px;line-height:1.55;color:var(--t2);}
@media(max-width:600px){.dk2030 .bdg-shots{grid-template-columns:1fr;}}
.dk2030 .bdg-code-h{font-size:13px;color:var(--t3);margin:0 0 8px;}
.dk2030 .bdg-shots > div{min-width:0;}
.dk2030 textarea.bdg-code{display:block;width:100%;margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;line-height:1.45;resize:vertical;}
.dk2030-auth .au-ctx{margin:-8px 0 18px;padding:10px 12px;border-radius:12px;background:var(--s2,rgba(127,127,127,.12));font-size:14px;line-height:1.45;color:var(--t1,inherit);}

/* ── «Your place on invme» — the owner's landing (2026-09-22) ─────────────────────────────────────────────────────── */
.dk2030 .own{max-width:680px;}
.dk2030 .own-hero{padding:6px 0 18px;}
.dk2030 .own-kicker{margin:0 0 6px;font-size:14px;color:var(--t2);display:flex;align-items:center;gap:8px;}
.dk2030 .own-kicker a{color:var(--t2);text-decoration:none;}
.dk2030 .own-ok{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-ctl);background:var(--now-soft);
  color:var(--now);font-size:12px;font-weight:600;}
.dk2030 .own-h1{margin:0;font-size:34px;line-height:1.08;letter-spacing:normal;font-weight:600;color:var(--t1);text-wrap:balance;}
.dk2030 .own-lede{margin:12px 0 18px;font-size:17px;line-height:1.5;color:var(--t2);max-width:60ch;}
.dk2030 .own-cta{display:flex;gap:10px;flex-wrap:wrap;}
.dk2030 .own-facts{display:flex;gap:26px;flex-wrap:wrap;margin:22px 0 0;}
.dk2030 .own-facts div{min-width:0;}
.dk2030 .own-facts dt{font-size:24px;font-weight:600;color:var(--t1);letter-spacing:normal;font-variant-numeric:tabular-nums;}
.dk2030 .own-facts dd{margin:2px 0 0;font-size:13px;color:var(--t3);}
.dk2030 .own-gains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 6px;}
.dk2030 .own-gains article{padding:16px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);}
.dk2030 .own-gains b{display:block;margin:10px 0 4px;font-size:15px;color:var(--t1);}
.dk2030 .own-gains p{margin:0;font-size:14px;line-height:1.45;color:var(--t2);}
.dk2030 .own-ico{display:block;width:30px;height:30px;border-radius:8px;background:var(--a1);position:relative;}
.dk2030 .own-ico.ico-tick::after{content:"";position:absolute;left:10px;top:6px;width:7px;height:13px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.dk2030 .own-ico.ico-up::after{content:"";position:absolute;left:9px;top:11px;width:10px;height:10px;border:solid #fff;border-width:2.5px 0 0 2.5px;transform:rotate(45deg);}
.dk2030 .own-ico.ico-live{background:var(--now);}
.dk2030 .own-ico.ico-live::after{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff;}
/* the visits bars: this rule had lost its selector (HEAD), which also swallowed `.own-sec` after it — 2026-09-23 */
.dk2030 .own-ico.ico-visits::after{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:8px;
  background:linear-gradient(90deg,#fff 0 3px,transparent 3px 5.5px,#fff 5.5px 8.5px,transparent 8.5px 11px,#fff 11px 14px);
  -webkit-mask:linear-gradient(0deg,#000 40%,transparent 40%) 0 0/3px 100%,linear-gradient(0deg,#000 100%,#000 100%);}
.dk2030 .own-sec{margin-top:34px;}
.dk2030 .own-sec h2{margin:0 0 12px;font-size:22px;font-weight:600;letter-spacing:normal;color:var(--t1);}
.dk2030 .own-group{margin-top:18px;}
.dk2030 .own-group h3{margin:0;font-size:16px;font-weight:600;color:var(--t1);}
.dk2030 .own-note{margin:3px 0 10px;font-size:14px;color:var(--t2);max-width:62ch;}
.dk2030 .own-opt{padding:12px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:10px;}
.dk2030 .own-opt-h{font-size:14px;color:var(--t1);margin:0 2px 8px;}
.dk2030 .own-shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dk2030 .own-shot{position:relative;margin:0;display:grid;place-items:center;padding:18px 10px 46px;border-radius:12px;min-width:0;}
.dk2030 .own-shot.dark{background:#05070a;}
.dk2030 .own-shot.light{background:#eef1f5;}
.dk2030 .own-shot img{max-width:100%;height:auto;display:block;}
.dk2030 .own-copy{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:6px 14px;border-radius:var(--r-ctl);border:0;
  background:var(--a1-fill);color:#fff;font:600 12.5px/1.2 inherit;cursor:pointer;}
.dk2030 .own-copy:focus-visible{outline:3px solid var(--a2);outline-offset:2px;}
.dk2030 .own-code summary{margin-top:8px;font-size:13px;color:var(--t3);cursor:pointer;}
.dk2030 .own-ways{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dk2030 .own-ways article{padding:16px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);}
.dk2030 .own-ways b{display:block;margin:8px 0 6px;font-size:15px;color:var(--t1);}
.dk2030 .own-ways p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--t2);}
.dk2030 .own-step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--s3);color:var(--t1);
  font-weight:600;font-size:13px;}
.dk2030 .own-form{display:flex;gap:8px;flex-wrap:wrap;}
.dk2030 .own-form .sf-input{max-width:150px;}
.dk2030 .own-muted{color:var(--t3);font-size:14px;}
.dk2030 .own-list{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px;line-height:1.45;color:var(--t2);}
.dk2030 .own-list b{color:var(--t1);}
.dk2030 .own-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;}
.dk2030 .own-table th{text-align:left;color:var(--t3);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);}
.dk2030 .own-table td{padding:8px;border-bottom:1px solid var(--line);color:var(--t1);}
.dk2030 .own-faq details{padding:12px 0;border-bottom:1px solid var(--line);}
.dk2030 .own-faq summary{cursor:pointer;font-weight:600;color:var(--t1);font-size:15px;}
.dk2030 .own-faq p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--t2);}
@media(max-width:600px){
  .dk2030 .own-h1{font-size:28px;}
  .dk2030 .own-gains,.dk2030 .own-ways,.dk2030 .own-shots{grid-template-columns:1fr;}
}
.dk2030 .own-ico.ico-visits::after{content:"";position:absolute;left:8px;bottom:8px;width:3px;height:6px;background:#fff;box-shadow:5px -4px 0 0 #fff,10px -8px 0 0 #fff;}
/* A row card's «most reviewed» line is in the flow (position:static), so its wreath anchored to the whole card: one branch
   sat on the letter tile, the other over the review count (walk-through 2026-09-23). The line holds its own wreath. */
.dk2030 .plx-row .plx-why.plx-top,.dk2030 .dk-feed > .plx-row .plx-why.plx-top{position:relative;top:auto;bottom:auto;
  width:fit-content;max-width:100%;padding-inline:20px !important;}
.dk2030 .plx-row .plx-why.plx-top::before{left:2px;}
.dk2030 .plx-row .plx-why.plx-top::after{right:2px;}
/* A run that has begun wears «Now» on its stub, not its END date: «APR 25 2027» at the head of a date-ordered programme
   read as an event half a year away (walk-through 2026-09-23). A date in another year shows the year, not the weekday. */
.dk2030 .dk-listing .plw-stub-live{width:14px;height:14px;margin:4px 0 9px;border-radius:50%;background:var(--now);
  box-shadow:0 0 0 5px var(--now-soft);}
/* the stub is 48 px on a phone: «Сейчас»/«Maintenant» spilled over its edge (round 2) — a short word of its own, wrapping */
.dk2030 .dk-listing .plw-stub-now{color:var(--now);font-size:11px;white-space:normal;overflow-wrap:anywhere;max-width:100%;}
/* The venue-site facts line on a phone: the wrapped flex row left the «open» dot alone on a line and a separator dot
   before the prices (walk-through 2026-09-23). Dot | today, the prices under the text, no separator. */
.dk2030 .st-facts-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:start;}
.dk2030 .st-facts-line .st-dot{margin-top:6px;}
.dk2030 .st-facts-line > b,.dk2030 .st-facts-line .st-money{grid-column:2;}
.dk2030 .st-facts-line .st-money::before{content:none;}
/* A rail tile without a picture is a slim band with its category, not a 4:5 pastel square with one letter: three
   such squares were the whole «Nearby places» of the castle on a phone (walk-through 2026-09-23). */
.dk2030 .dk-rail{align-items:flex-start;}
.dk2030 .dk-tile-cover:not(.shot){aspect-ratio:auto;height:44px;}
.dk2030 .dk-tile-cover:not(.shot) .dk-tile-cat,.dk2030 .dk-tile-cover:not(.shot) .dk-tile-cat:only-child{
  justify-content:flex-start;padding:0 12px;font-size:11px;}
/* «More photos» is a section heading like every other one on the page, not a grey caption (walk-through 2026-09-23) */
.dk2030 .pgx-h{color:var(--t1);}
/* a fact chip on a white card in the light theme had no visible ground («Visit: 1–2 hours» — walk-through 2026-09-23) */
.dk2030 .dk-pfacts .fact{border:1px solid var(--line);}
/* the cover's credit lines up with the card's text, not with the photo's edge */
.dk2030 .dk-listing .pl-credit{padding-inline:20px;}
/* the place page ends with reviews (their form says «be the first») and then a comment thread whose own «No comments yet»
   made two empty blocks in a row (walk-through 2026-09-23); the thread's form invites without the second empty line */
.dk2030 .dk-listing .dk-cmt #no-comments{display:none;}
/* a rail tile is small: the picture fills it (hotel photos «contained» with grey bands read as broken frames, 23.09) */
.dk2030 .dk-tile-cover.shot > img:not(.blurfill){object-fit:cover;}
/* list cards (walk-through 2026-09-23): the «People love» line cut its last chip mid-word with nothing to reach it —
   it scrolls sideways under the same fade; the text under a picture sat 4 px from the card's border */
.dk2030 .plx-praise{overflow-x:auto;scrollbar-width:none;padding-right:24px;}
.dk2030 .plx-praise::-webkit-scrollbar{display:none;}
.dk2030 .plx:not(.plx-row) > .plx-meta,.dk2030 .plx:not(.plx-row) > .plx-line{padding-left:12px;padding-right:12px;}
/* the slim band has room for the whole kind in two lines («Steakhouses & grills» was cut to «…GRI…», round 2) */
.dk2030 .dk-tile-cover:not(.shot) .dk-tile-cat{line-height:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;align-content:center;padding-top:9px;}
/* a poster that does not load (a site's broken certificate) folds its 300 px frame into a band — round 2 found an
   empty block the size of the picture on the highlights page */
.dk2030 .fcard-media.noimg{aspect-ratio:auto !important;height:44px !important;}
.dk2030 .fcard-media.noimg img{display:none;}
/* Content sections of a place (places/sections.py, 2026-09-23; fourth design the same night — owner: «по оформлению
   возьми что-то с cookie3.com»). Taken from it: flat grey panels with no border and no shadow, joined to the next by a
   rounded bridge; a pastel badge with an icon names the panel and the content itself is the large type; white cards sit
   inside the grey; a segmented control; the counter and square arrows in the
   panel's head. Panels are `--s3`, cards `--s1` — the same pair in both themes. */
.dk2030 .pc-zone{display:flex;flex-direction:column;gap:16px;margin-top:10px;}
.dk2030 .pc-sec{position:relative;min-width:0;padding:22px;border-radius:var(--r-card);background:var(--s3);}
/* the bridge: a neck between two panels, concave on both sides; left and right in turn */
.dk2030 .pc-zone>.pc-sec+.pc-sec::before{content:"";position:absolute;top:-17px;left:40px;width:56px;
  height:18px;background:var(--s3);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 9px,#000 9.5px) left/50% 100% no-repeat,
               radial-gradient(circle at 100% 50%,#0000 9px,#000 9.5px) right/50% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,#0000 9px,#000 9.5px) left/50% 100% no-repeat,
               radial-gradient(circle at 100% 50%,#0000 9px,#000 9.5px) right/50% 100% no-repeat;}
.dk2030 .pc-zone>.pc-sec:nth-child(odd)+.pc-sec::before{left:auto;right:40px;}
.dk2030 .pc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
/* the panel's heading, as vk.com heads a block (owner 2026-09-23: «что-то не то с акцентами»): 17 / 600 in the text
   colour, the icon in the ONE accent, the count in grey — the pastel colour per section is gone */
.dk2030 .pc-badge{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:17px;line-height:22px;font-weight:600;
  color:var(--t1);}
.dk2030 .pc-badge .pc-ic{width:20px;height:20px;color:var(--a1);}
.dk2030 .pc-badge i{font-style:normal;font-weight:400;color:var(--t3);font-variant-numeric:tabular-nums;}
.dk2030 .pc-ic{width:20px;height:20px;flex:0 0 auto;}
.dk2030 .pc-foreign{margin:-6px 0 12px;font-size:12px;color:var(--t3);}

/* «Why go»: the statements are the type */
.dk2030 .pc-why{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.dk2030 .pc-why li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:22px;font-weight:400;
  color:var(--t1);}
.dk2030 .pc-why-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;
  margin-top:1px;border-radius:8px;background:var(--s1);color:var(--a1);}
.dk2030 .pc-why-ic .pc-ic{width:17px;height:17px;}

/* facts: white story cards in the grey — a picture of the place with the fact's figure, the fact, the source */
.dk2030 .pc-deck-bar{display:flex;align-items:center;gap:6px;}
.dk2030 .pc-deck-count{margin-right:6px;font-size:14px;font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums;}
.dk2030 .pc-deck-count b{color:var(--t1);}
.dk2030 .pc-deck-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;
  border:0;background:var(--s1);color:var(--t1);cursor:pointer;}
.dk2030 .pc-deck-btn:hover{color:var(--a1);}
.dk2030 .pc-deck-btn:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-stories{list-style:none;margin:0 -22px -22px;padding:0 22px 22px;display:grid;grid-auto-flow:column;
  grid-auto-columns:min(78%,280px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 22px;
  overscroll-behavior-x:contain;scrollbar-width:none;}
.dk2030 .pc-stories::-webkit-scrollbar{display:none;}
.dk2030 .pc-story{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--s1);
  overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 24px -16px rgba(0,0,0,.35);}
.dk2030 .pc-story-pic{position:relative;display:block;height:170px;margin:8px 8px 0;border-radius:12px;overflow:hidden;
  background:var(--tone,var(--cov1));}
.dk2030 .pc-story-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .pc-story-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);}
.dk2030 .pc-story-plain .pc-story-pic{height:96px;}
.dk2030 .pc-story-plain .pc-story-pic::after{display:none;}
.dk2030 .pc-story-lead{position:absolute;left:14px;bottom:10px;right:14px;z-index:1;color:#fff;font-size:28px;line-height:1;
  font-weight:600;letter-spacing:normal;font-variant-numeric:tabular-nums;}
.dk2030 .pc-story-plain .pc-story-lead{color:var(--covt);}
.dk2030 .pc-story p{flex:1;margin:0;padding:14px 16px 10px;font-size:15px;line-height:22px;color:var(--t1);}
.dk2030 .pc-story .pc-src{margin:0 16px 14px;}
.dk2030 .pc-src{align-self:flex-start;padding:3px 9px;border-radius:7px;background:var(--s3);font-size:12px;line-height:16px;
  color:var(--t2);text-decoration:none;}
.dk2030 .pc-src:hover{color:var(--a1);}

/* Shorts: vertical cards to swipe; a tap plays the video in our overlay (.yt-lb below, the shell's handler) */
.dk2030 .pc-shorts{list-style:none;margin:0 -22px -22px;padding:0 22px 22px;display:grid;grid-auto-flow:column;
  grid-auto-columns:min(42%,168px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 22px;
  overscroll-behavior-x:contain;scrollbar-width:none;}
.dk2030 .pc-shorts::-webkit-scrollbar{display:none;}
.dk2030 .pc-shorts li{scroll-snap-align:start;min-width:0;}
.dk2030 .pc-short{display:flex;flex-direction:column;gap:6px;color:var(--t1);text-decoration:none;}
.dk2030 .pc-short-pic{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;background:#111;}
.dk2030 .pc-short-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease);}
.dk2030 .pc-short:hover .pc-short-pic img{transform:scale(1.04);}
.dk2030 .pc-short-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 45%);}
.dk2030 .pc-short-play{position:absolute;left:50%;top:50%;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.dk2030 .pc-short:focus-visible .pc-short-pic{outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-short-t{font-size:14px;line-height:18px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;}
.dk2030 .pc-short-c{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:600px){.dk2030 .pc-shorts{margin:0 -18px -18px;padding:0 18px 18px;scroll-padding:0 18px;}}
/* the player: our own overlay, the video in its own shape (9:16), never a jump to YouTube */
.dk2030 .yt-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:16px;background:rgba(6,7,10,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.dk2030 .yt-frame{position:relative;height:min(88vh,calc((100vw - 32px) * 16 / 9));aspect-ratio:9/16;border-radius:var(--r-card);
  overflow:hidden;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);}
.dk2030 .yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.dk2030 .yt-x{position:absolute;top:14px;right:14px;z-index:2;}
.dk2030 .yt-x,.dk2030 .yt-nav{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;flex:0 0 auto;}
.dk2030 .yt-x:hover,.dk2030 .yt-nav:hover{background:rgba(255,255,255,.22);}
.dk2030 .yt-x:focus-visible,.dk2030 .yt-nav:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(max-width:600px){.dk2030 .yt-lb{padding:0;gap:0;}
  .dk2030 .yt-frame{height:100vh;height:100dvh;width:100vw;aspect-ratio:auto;border-radius:0;}
  .dk2030 .yt-nav{position:absolute;top:14px;z-index:2;}
  .dk2030 .yt-prev{left:14px;}
  .dk2030 .yt-next{left:66px;}}
html.yt-open,html.yt-open body{overflow:hidden;}

/* spots (don't miss · entrances · photo spots): white cards — the thing, why, where it is, a point on the map */
.dk2030 .pc-spots{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.dk2030 .pc-spots li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:var(--s1);}
.dk2030 .pc-spots b{font-size:16px;line-height:21px;font-weight:600;color:var(--t1);}
.dk2030 .pc-spot-d{font-size:15px;line-height:22px;color:var(--t1);}
.dk2030 .pc-spots b+.pc-spot-d{color:var(--t2);}
.dk2030 .pc-spot-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:4px;font-size:13px;color:var(--t3);}
.dk2030 .pc-spot-m i{font-style:normal;}
.dk2030 .pc-spot-m a{display:inline-flex;align-items:center;gap:4px;color:var(--a1);font-weight:500;text-decoration:none;}
.dk2030 .pc-spot-m a .pc-ic{width:15px;height:15px;}
/* a visit per time budget: one white card per plan, the route numbered (it IS a sequence) */
.dk2030 .pc-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.dk2030 .pc-plan{padding:14px 16px;border-radius:12px;background:var(--s1);}
.dk2030 .pc-plan-h{display:block;margin-bottom:8px;font-size:20px;line-height:24px;font-weight:600;color:var(--t1);
  font-variant-numeric:tabular-nums;}
.dk2030 .pc-plan ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;line-height:21px;color:var(--t1);}
.dk2030 .pc-plan li::marker{color:var(--t3);font-variant-numeric:tabular-nums;}
/* what's in season: the months, this month's rows first and marked */
.dk2030 .pc-season{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.dk2030 .pc-season li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:12px;
  background:var(--s1);font-size:15px;line-height:22px;color:var(--t1);}
.dk2030 .pc-season-m{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--t2);}
.dk2030 .pc-season-m em{align-self:flex-start;font-style:normal;padding:1px 8px;border-radius:6px;background:var(--a1-fill);
  color:#fff;font-size:12px;font-weight:600;}
.dk2030 .pc-now .pc-season-m{color:var(--t1);}
@media(max-width:600px){.dk2030 .pc-season li{grid-template-columns:92px minmax(0,1fr);}}

/* history: the story in large type, then the years in the accent on hairlines (light, joined to its neighbours) */
.dk2030 .pc-p{margin:0 0 12px;font-size:15px;line-height:24px;color:var(--t2);max-width:68ch;}
.dk2030 .pc-lede{font-size:17px;line-height:25px;font-weight:400;color:var(--t1);}
.dk2030 .pc-tl{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px;}
.dk2030 .pc-tl li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:12px 0;
  border-top:1px solid var(--line-2);}
.dk2030 .pc-tl b{font-size:17px;line-height:22px;font-weight:600;letter-spacing:normal;color:var(--a1);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.dk2030 .pc-tl span{font-size:15px;line-height:23px;color:var(--t1);}
.dk2030 .pc-tl-rest{margin-top:0;}
.dk2030 .pc-more{margin-top:10px;}
.dk2030 .pc-more summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px;
  border-radius:8px;background:var(--a1-fill);color:#fff;font-size:14px;font-weight:600;list-style:none;}
.dk2030 .pc-more summary::-webkit-details-marker{display:none;}
.dk2030 .pc-more[open] summary{display:none;}
@media(max-width:600px){.dk2030 .pc-tl li{grid-template-columns:82px minmax(0,1fr);gap:12px;}
  .dk2030 .pc-tl b{font-size:17px;}}

/* the advice: a segmented control on a grey track, one panel at a time (radio + CSS; each panel keeps its heading for
   screen readers and search) */
.dk2030 .pc-tab-in{position:absolute;opacity:0;pointer-events:none;}
.dk2030 .pc-tab-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:12px;
  background:color-mix(in srgb,var(--t1) 7%,var(--s3));}
.dk2030 .pc-tab-row::-webkit-scrollbar{display:none;}
.dk2030 .pc-tab-row label{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:38px;padding:0 14px;
  border-radius:8px;font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;white-space:nowrap;}
.dk2030 .pc-tab-row label .pc-ic{width:16px;height:16px;}
.dk2030 .pc-panel{display:none;padding:18px 2px 0;}
.dk2030 .pc-panel-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.dk2030 .pc-tab-in:nth-of-type(1):checked~.pc-panel:nth-of-type(1){display:block;}
.dk2030 .pc-tab-in:nth-of-type(1):checked~.pc-tab-row label:nth-of-type(1){background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.18);}
.dk2030 .pc-tab-in:nth-of-type(1):focus-visible~.pc-tab-row label:nth-of-type(1){outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-tab-in:nth-of-type(2):checked~.pc-panel:nth-of-type(2){display:block;}
.dk2030 .pc-tab-in:nth-of-type(2):checked~.pc-tab-row label:nth-of-type(2){background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.18);}
.dk2030 .pc-tab-in:nth-of-type(2):focus-visible~.pc-tab-row label:nth-of-type(2){outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-tab-in:nth-of-type(3):checked~.pc-panel:nth-of-type(3){display:block;}
.dk2030 .pc-tab-in:nth-of-type(3):checked~.pc-tab-row label:nth-of-type(3){background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.18);}
.dk2030 .pc-tab-in:nth-of-type(3):focus-visible~.pc-tab-row label:nth-of-type(3){outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-tab-in:nth-of-type(4):checked~.pc-panel:nth-of-type(4){display:block;}
.dk2030 .pc-tab-in:nth-of-type(4):checked~.pc-tab-row label:nth-of-type(4){background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.18);}
.dk2030 .pc-tab-in:nth-of-type(4):focus-visible~.pc-tab-row label:nth-of-type(4){outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-tab-in:nth-of-type(5):checked~.pc-panel:nth-of-type(5){display:block;}
.dk2030 .pc-tab-in:nth-of-type(5):checked~.pc-tab-row label:nth-of-type(5){background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.18);}
.dk2030 .pc-tab-in:nth-of-type(5):focus-visible~.pc-tab-row label:nth-of-type(5){outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-tab-in:nth-of-type(6):checked~.pc-panel:nth-of-type(6){display:block;}
.dk2030 .pc-tab-in:nth-of-type(6):checked~.pc-tab-row label:nth-of-type(6){background:var(--s1);color:var(--t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px -6px rgba(0,0,0,.18);}
.dk2030 .pc-tab-in:nth-of-type(6):focus-visible~.pc-tab-row label:nth-of-type(6){outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.dk2030 .pc-list li{position:relative;padding-left:20px;font-size:15px;line-height:22px;color:var(--t1);}
.dk2030 .pc-list li::before{content:"";position:absolute;left:4px;top:10px;width:6px;height:6px;border-radius:2px;background:var(--t3);}

/* how to get there: white tiles in the grey */
.dk2030 .pc-ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.dk2030 .pc-ways li{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-card);background:var(--s1);min-width:0;}
.dk2030 .pc-way-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;
  background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--a1);}
.dk2030 .pc-way-ic .pc-ic{width:20px;height:20px;}
.dk2030 .pc-way-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;}
.dk2030 .pc-way-t b{font-size:20px;line-height:24px;font-weight:600;letter-spacing:normal;color:var(--t1);
  font-variant-numeric:tabular-nums;}
.dk2030 .pc-way-m{font-size:14px;font-weight:600;color:var(--t2);}
.dk2030 .pc-way-d{font-size:14px;line-height:19px;color:var(--t2);}

/* the next stop: a white card with the neighbour's picture and an arrow */
.dk2030 .pc-next{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.dk2030 .pc-next-card{display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;border-radius:var(--r-card);background:var(--s1);
  color:var(--t1);text-decoration:none;}
.dk2030 a.pc-next-card:hover b,.dk2030 a.pc-next-card:hover .pc-next-go{color:var(--a1);}
.dk2030 .pc-next-pic{position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--tone,var(--cov2));color:var(--covt);}
.dk2030 .pc-next-pic .pc-ic{width:28px;height:28px;opacity:.85;}
.dk2030 .pc-next-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .pc-next-b{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.dk2030 .pc-next-walk{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--t2);}
.dk2030 .pc-next-walk .pc-ic{width:15px;height:15px;}
.dk2030 .pc-next-b b{font-size:16px;line-height:21px;font-weight:600;letter-spacing:normal;}
.dk2030 .pc-next-note{font-size:14px;color:var(--t2);}
.dk2030 .pc-next-go{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;
  border-radius:8px;background:var(--s3);color:var(--t2);}

/* a spec sheet, checks, chips: white inside the grey */
.dk2030 .pc-kv{margin:0;display:grid;border-radius:var(--r-card);overflow:hidden;background:var(--s1);}
.dk2030 .pc-kv > div{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-top:1px solid var(--line);font-size:15px;}
.dk2030 .pc-kv > div:first-child{border-top:0;}
.dk2030 .pc-kv dt{color:var(--t2);}
.dk2030 .pc-kv dd{margin:0;text-align:right;color:var(--t1);font-weight:600;}
.dk2030 .pc-kv i,.dk2030 .pc-checks i{font-style:normal;color:var(--t3);font-size:13px;font-weight:400;}
.dk2030 .pc-checks{list-style:none;margin:0;padding:14px 16px;border-radius:var(--r-card);background:var(--s1);display:grid;gap:10px;
  font-size:15px;line-height:20px;color:var(--t1);}
.dk2030 .pc-checks li{display:flex;gap:10px;align-items:flex-start;}
.dk2030 .pc-mark{flex:0 0 18px;height:18px;margin-top:1px;border-radius:50%;border:2px solid var(--t3);}
.dk2030 .pc-check-yes .pc-mark{border-color:var(--now);background:radial-gradient(circle,var(--now) 45%,transparent 50%);}
.dk2030 .pc-check-partial .pc-mark{border-color:var(--now);background:linear-gradient(90deg,var(--now) 50%,transparent 50%);}
.dk2030 .pc-check-no .pc-mark{opacity:.6;}
.dk2030 .pc-chips{display:flex;flex-wrap:wrap;gap:6px;}
.dk2030 .pc-chips span{padding:6px 12px;border-radius:8px;background:var(--s1);font-size:14px;color:var(--t1);}
/* FAQ: white rows in the grey */
.dk2030 .pc-faq{display:grid;gap:8px;}
.dk2030 .pc-faq details{border-radius:12px;background:var(--s1);}
.dk2030 .pc-faq summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;
  font-size:16px;font-weight:600;line-height:21px;color:var(--t1);list-style:none;}
.dk2030 .pc-faq summary::-webkit-details-marker{display:none;}
.dk2030 .pc-faq summary::after{content:"+";display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;
  border-radius:8px;background:var(--s3);color:var(--t1);font-weight:500;font-size:17px;}
.dk2030 .pc-faq details[open] summary::after{content:"–";}
.dk2030 .pc-faq p{margin:0;padding:0 16px 16px;font-size:15px;line-height:23px;color:var(--t2);}
.dk2030 .pc-faq summary:focus-visible,.dk2030 .pc-more summary:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .pc-note{margin:10px 0 0;font-size:13px;color:var(--t3);}
@media(max-width:600px){.dk2030 .pc-sec{padding:18px;border-radius:var(--r-card);}
  .dk2030 .pc-stories{margin:0 -18px -18px;padding:0 18px 18px;scroll-padding:0 18px;}
}
.dk2030 .pc-sources{margin:16px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:18px;color:var(--t3);}
.dk2030 .pc-sources a{color:var(--t2);}

/* Ready-made plans for a city (places/scenarios.py, /in/…/{city}/ideas/, 2026-09-23): the choice of plans, the form of
   day · hour · budget, and the plan as a line of stops with the walk between them */
.dk2030 .idx-lede{margin:0 0 14px;font-size:15px;line-height:22px;max-width:62ch;}
.dk2030 .idx-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
@media(min-width:700px){.dk2030 .idx-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
.dk2030 .idx-card{display:flex;flex-direction:column;gap:6px;padding:15px 16px;border-radius:var(--r-card);background:var(--s2);
  border:0;color:var(--t1);text-decoration:none;box-shadow:var(--edge);}
.dk2030 .idx-card:hover{border-color:var(--a1);}
.dk2030 .idx-card:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .idx-card-t{font-size:17px;line-height:22px;}
.dk2030 .idx-card-l{font-size:14px;line-height:19px;color:var(--t2);}
.dk2030 .idx-chain{display:flex;flex-wrap:wrap;gap:4px 0;font-size:13px;color:var(--t2);}
.dk2030 .idx-chain span+span::before{content:"→";margin:0 6px;color:var(--t3);}
.dk2030 .idx-card-at{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums;}
.dk2030 .idx-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:0 0 16px;padding:12px 14px;
  border-radius:var(--r-card);background:var(--s2);border:0;box-shadow:var(--edge);}
.dk2030 .idx-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--t3);}
.dk2030 .idx-field select{min-height:38px;padding:6px 10px;border-radius:12px;border:1px solid var(--line-2,var(--line));
  background:var(--bg);color:var(--t1);font:inherit;font-size:14px;}
.dk2030 .idx-budget{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0;}
.dk2030 .idx-budget legend{width:100%;margin-bottom:4px;font-size:12px;color:var(--t3);padding:0;}
.dk2030 .idx-budget label{position:relative;cursor:pointer;}
.dk2030 .idx-budget input{position:absolute;opacity:0;pointer-events:none;}
.dk2030 .idx-budget span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line-2,var(--line));font-size:13px;color:var(--t2);}
.dk2030 .idx-budget input:checked+span{background:var(--a1-fill);border-color:var(--a1);color:#fff;}
.dk2030 .idx-budget input:focus-visible+span{outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .idx-go{min-height:38px;}
.dk2030 .idx-sum{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;}
.dk2030 .idx-plan{list-style:none;margin:0;padding:0;}
.dk2030 .idx-stop{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:start;}
.dk2030 .idx-time{padding-top:3px;font-size:15px;font-weight:600;color:var(--a1);font-variant-numeric:tabular-nums;}
.dk2030 .idx-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:var(--r-card);background:var(--s2);
  border:0;min-width:0;box-shadow:var(--edge);}
.dk2030 .idx-slot{font-size:12px;font-weight:600;color:var(--t3);}
.dk2030 .idx-place{display:flex;gap:12px;align-items:center;color:var(--t1);text-decoration:none;min-width:0;}
.dk2030 .idx-place:hover b{color:var(--a1);}
.dk2030 .idx-pic{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:12px;overflow:hidden;
  background:var(--tone,var(--s3));}
.dk2030 .idx-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.dk2030 .idx-pic-none i{position:absolute;inset:auto 6px 6px 6px;font-style:normal;font-size:11px;line-height:12px;
  color:var(--covt,#fff);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.dk2030 .idx-name{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dk2030 .idx-name b{font-size:16px;line-height:21px;overflow-wrap:anywhere;}
.dk2030 .idx-name span{font-size:13px;}
.dk2030 .idx-why{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.dk2030 .idx-why li{padding:3px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;
  color:var(--t2);font-variant-numeric:tabular-nums;}
.dk2030 .idx-alt{margin:0;font-size:13px;color:var(--t3);}
.dk2030 .idx-alt a{color:var(--t2);}
.dk2030 .idx-walk{position:relative;margin:0 0 0 24px;padding:8px 0 8px 38px;font-size:13px;color:var(--t3);}
.dk2030 .idx-walk::before{content:"";position:absolute;left:0;top:4px;bottom:4px;border-left:2px dashed var(--line-2,var(--line));}
.dk2030 .idx-note{margin:14px 0 0;font-size:13px;line-height:18px;}
.dk2030 .idx-empty{margin:6px 0;}
.dk2030 .idx-other{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.dk2030 .idx-other .pill{border:1px solid var(--line-2,var(--line));background:var(--s2);color:var(--t1);}
.dk2030 .idx-from{margin:14px 0 4px;}
.dk2030 .idx-from .pill{border:1px solid var(--line-2,var(--line));background:var(--s2);color:var(--t1);}
.dk2030 .idx-check{display:inline-flex;align-items:center;gap:6px;min-height:38px;font-size:14px;color:var(--t2);}
.dk2030 .idx-check input{width:18px;height:18px;accent-color:var(--a1);}

/* Phones: a detail page and its section panels run to the screen's edges (owner 2026-09-23: «отступов по краям в моб
   версии не должно быть») — the page card loses the scroll's 14 px gutter and its side border; the grey panels lose the
   card's 16 px padding. Text keeps its own inner padding. Written last: it overrides the phone rules above. */
@media(max-width:600px){
  .dk2030 .dk-feed>.dk-listing{width:calc(100% + 28px);max-width:none;margin-left:-14px;margin-right:-14px;
    border-left:0;border-right:0;border-radius:0;}
  .dk2030 .pc-zone{width:calc(100% + 2 * var(--pad));margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));gap:14px;}
  .dk2030 .pc-sec{border-radius:var(--r-card);}
  /* the deck is swiped on a phone: the arrows go, the count stays, the badge keeps one line */
  .dk2030 .pc-deck-btn{display:none;}
  .dk2030 .pc-badge{white-space:nowrap;}
}

/* The practical blocks as panels (2026-09-23): «Plan your visit», the listing's week and «Good to know» sit in the same
   grey panels as the content sections (`.pc-zone.pc-practical`), so what is inside takes the panel's white card. */
.dk2030 .pc-practical{margin-top:16px;}
.dk2030 .pc-practical:empty{display:none;}
.dk2030 .pc-practical .dk-pfeat{margin:0;}
.dk2030 .pc-practical .st-plan-grid{gap:12px;align-items:start;}
.dk2030 .pc-practical .st-card{background:var(--s1);border:0;}
.dk2030 .pc-practical .st-deals span{background:var(--s1);}
.dk2030 .pc-practical .st-facts{margin-top:14px;}
.dk2030 .pc-practical .st-src{margin:12px 0 0;}
.dk2030 .pc-practical .pl-hours{background:var(--s1);border:0;}
.dk2030 .pc-practical .dk-pfacts{margin:0;}
.dk2030 .pc-practical .dk-pfacts + .dk-pfacts{margin-top:8px;}
.dk2030 .pc-practical .dk-pfacts .fact{background:var(--s1);color:var(--t1);}
.dk2030 .pc-practical .dk-pfacts .fact-award{background:var(--s1);}

/* «At a glance» — the decision strip under the head of a place (places/glance.py; the owner's 60-platform benchmark,
   2026-09-23): quiet chips, the icon in the one accent, no fill of their own beyond the card surface */
.dk2030 .pl-glance{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 2px;padding:0;list-style:none;}
.dk2030 .pl-glance li{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:20px;color:var(--t1);}
.dk2030 .pl-glance .pc-ic{width:18px;height:18px;color:var(--a1);}
/* demand in our own numbers, under the actions */
.dk2030 .pl-demand{margin:8px 0 0;font-size:13px;line-height:18px;color:var(--t2);text-align:center;}

/* the place page's action bar on a phone (place_detail_2030.html, shown by dkDock) — above the tab bar, same glass */
.dk2030 .pl-dock{display:none;}
@media (max-width:600px){
  .dk2030 .pl-dock{display:flex;align-items:center;gap:8px;position:fixed;left:12px;right:12px;z-index:59;
    bottom:calc(92px + env(safe-area-inset-bottom));padding:7px;border-radius:var(--r-ctl);
    background-color:var(--glass-2);backdrop-filter:blur(24px) saturate(185%);-webkit-backdrop-filter:blur(24px) saturate(185%);
    border:1px solid var(--line-2);box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
    transform:translateY(calc(100% + 110px));opacity:0;pointer-events:none;transition:transform .28s var(--ease),opacity .2s;}
  .dk2030 .pl-dock[hidden]{display:none!important;}
  .dk2030 .pl-dock.on{transform:none;opacity:1;pointer-events:auto;}
  .dk2030 .pl-dock-go{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;height:44px;padding:0 16px;
    border-radius:var(--r-ctl);background:var(--a1-fill);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
  .dk2030 .pl-dock-alt{flex:0 1 auto;min-width:0;display:flex;align-items:center;height:44px;padding:0 14px;border-radius:var(--r-ctl);
    background:var(--s1);color:var(--t1);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .dk2030 .pl-dock-ic,.dk2030 .pl-dock-save .pill{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;
    border-radius:50%;background:var(--s1);color:var(--t1);border:0;font-size:0;}
  .dk2030 .pl-dock-ic .pc-ic{width:20px;height:20px;}
  .dk2030 .pl-dock-save .pill svg{width:18px;height:18px;}
  .dk2030 .pl-dock-save .pill.pill-accent{color:var(--a1);}
  .dk2030:has(.pl-dock) .dk-bottom-pad{height:calc(150px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion:reduce){.dk2030 .pl-dock{transition:none;}}

/* «Watch · N» on the cover (places/_photos_2030.html): opens the Shorts overlay. It sits on a photo, so it wears its own
   dark chip, not the theme's surface (design rule: a badge over a picture) */
.dk2030 [data-pg]{position:relative;}
.dk2030 .pl-watch{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px 7px 10px;border-radius:var(--r-ctl);background:rgba(10,10,14,.62);color:#fff;font-size:14px;
  font-weight:600;line-height:20px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.dk2030 .pl-watch .pc-ic{width:18px;height:18px;color:#fff;}
.dk2030 .pl-watch:hover{background:rgba(10,10,14,.78);}
.dk2030 .pl-watch:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ── Windows in VK's manner (owner 2026-09-24, «делай это всё»; docs/reference/vkui ModalPage · ModalOverlay) ──
   Overlay 40 % black without blur, fading in 0.3 s. A computer: the window in the centre, 0.2 s in (after 0.1 s), 0.1 s
   out. A phone: a sheet from the bottom — 0.5 s with VK's slide curve, 0.2 s down on close, a handle, a 48 px gap to
   the top, scrolled inside; a swipe down from its top closes it (dkSheetSwipe in the shell). */
.dk2030{--vk-overlay:rgba(0,0,0,.4);--vk-slide:cubic-bezier(.16,1,.3,1);
  --elev3:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);}
.dk2030 .dk-modal-bg,.dk2030 .dk-modal-load{background:var(--vk-overlay);-webkit-backdrop-filter:none;backdrop-filter:none;
  animation:dkFade .3s linear;}
.dk2030 .dk-modal{box-shadow:var(--edge),var(--elev3);animation:vkModalIn .2s ease-in .1s both;}
.dk2030 .dk-modal-load .dk-skel-wrap{box-shadow:var(--edge),var(--elev3);}
@keyframes vkModalIn{from{opacity:0}to{opacity:1}}
@keyframes vkModalOut{to{opacity:0}}
.dk2030 .dk-modal-bg.dk-out{animation:dkFadeOut .2s linear forwards;}
.dk2030 .dk-modal-bg.dk-out .dk-modal{animation:vkModalOut .1s ease-out forwards;}
/* the content replaces the skeleton in place: the window is already open, so it does not arrive twice */
.dk2030 #dk-modal.dk-arrived .dk-modal-bg,.dk2030 #dk-modal.dk-arrived .dk-modal{animation:none;}
@keyframes vkSheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes vkSheetOut{to{transform:translateY(100%)}}
@media(max-width:600px){
  .dk2030 .dk-modal-bg,.dk2030 .dk-modal-load{padding:48px 0 0;align-items:flex-end;overflow:hidden;}
  .dk2030 .dk-modal,.dk2030 .dk-modal-load .dk-skel-wrap{width:100%;height:100%;min-height:0;margin:0;
    border-radius:var(--r-card) var(--r-card) 0 0;overflow-y:auto;overscroll-behavior:contain;
    animation:vkSheetIn .5s var(--vk-slide) .1s both;}
  .dk2030 .dk-modal-bg.dk-out .dk-modal{animation:vkSheetOut .2s ease-in forwards;}
  /* the handle: says «pull me down» */
  .dk2030 .dk-modal::before,.dk2030 .dk-modal-load .dk-skel-wrap::before{content:"";display:block;position:sticky;top:0;
    z-index:8;width:36px;height:4px;margin:8px auto -12px;border-radius:2px;background:var(--t3);opacity:.55;}
  .dk2030 .dk-modal-load .dk-skel-wrap::before{margin-bottom:10px;}
}
@media (prefers-reduced-motion:reduce){
  .dk2030 .dk-modal,.dk2030 .dk-modal-bg,.dk2030 .dk-modal-load,.dk2030 .dk-modal-load .dk-skel-wrap{animation:none;}
}

/* ── «•••» and «Share» as VK's ActionSheet (owner 2026-09-24; docs/reference/vkui ActionSheet): a phone gets a sheet from
   the bottom — full width, 12 px top corners, 48 px rows with 16 px text, a handle, the 40 % overlay (a tap on it closes:
   the overlay belongs to the <summary>, so the tap toggles the <details>); a computer keeps the menu by the button, fading
   in like VK's Popover. */
.dk2030 .dk-kebab-menu{border:0;box-shadow:var(--edge),var(--elev3);animation:dkFade .15s ease-out;}
@media(max-width:600px){
  .dk2030 .dk-kebab[open]>summary::before{content:"";position:fixed;inset:0;z-index:89;background:var(--vk-overlay);
    animation:dkFade .3s linear;cursor:default;}
  .dk2030 .dk-kebab-menu{left:0;right:0;bottom:0;border-radius:var(--r-card) var(--r-card) 0 0;
    padding:20px 8px calc(10px + env(safe-area-inset-bottom));background:var(--s1);
    animation:vkSheetIn .3s var(--vk-slide) both;}
  .dk2030 .dk-kebab-menu::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;
    border-radius:2px;background:var(--t3);opacity:.55;}
  .dk2030 .dk-kebab-i,.dk2030 .dk-kebab-menu .dk-report>summary{min-height:48px;padding:12px 14px;font-size:16px;
    border-radius:var(--r-ctl);}
  .dk2030 .dk-kebab-i+.dk-kebab-i{box-shadow:0 -.33px 0 var(--line-2);}
  .dk2030 .dk-sharesheet{background:var(--vk-overlay);animation:dkFade .3s linear;}
  .dk2030 .dk-sharesheet-in{width:100%;margin:0;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--s1);
    padding:20px 0 env(safe-area-inset-bottom);position:relative;animation:vkSheetIn .3s var(--vk-slide) both;}
  .dk2030 .dk-sharesheet-in::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;
    border-radius:2px;background:var(--t3);opacity:.55;}
  .dk2030 .dk-shareopt{min-height:48px;padding:13px 20px;font-size:16px;border-bottom:0;box-shadow:0 .33px 0 var(--line-2);}
}
@media(min-width:601px){
  .dk2030 .dk-sharesheet{background:var(--vk-overlay);animation:dkFade .3s linear;}
  .dk2030 .dk-sharesheet-in{animation:vkModalIn .2s ease-in both;}
}
@media (prefers-reduced-motion:reduce){.dk2030 .dk-kebab-menu,.dk2030 .dk-sharesheet-in{animation:none;}}

/* ── The tab bar with labels and a count, as VK's Tabbar (owner 2026-09-24): icon over a short label, the chosen tab in
   the accent (not a grey disc), unread messages as a red number; the island stays ours. */
@media(max-width:600px){
  .dk2030 .dk-bottomnav{gap:2px;padding:5px 6px;}
  .dk2030 .navb{position:relative;width:auto;min-width:58px;height:50px;padding:0 6px;border-radius:var(--r-card);
    flex-direction:column;gap:2px;background:transparent;}
  .dk2030 .navb.on{background:transparent;color:var(--a1);}
  .dk2030 .navb svg{width:24px;height:24px;}
  .dk2030 .tb-label{font-size:11px;line-height:12px;font-weight:500;white-space:nowrap;max-width:72px;overflow:hidden;
    text-overflow:ellipsis;}
  .dk2030 .navb-cta,.dk2030 .navb-cta.on{width:50px;min-width:50px;border-radius:50%;margin:0 4px;background:var(--a1-fill);color:#fff;}
  .dk2030 .navb-cta .tb-label{display:none;}
  .dk2030 .tb-count{position:absolute;top:1px;left:calc(50% + 4px);min-width:17px;height:17px;padding:0 4px;
    border-radius:8px;background:var(--count);color:#fff;font-size:11px;line-height:17px;font-weight:600;text-align:center;
    box-shadow:0 0 0 2px var(--glass-2);}
  .dk2030 .navb .navb-av{width:24px;height:24px;}
}

/* ── The phone header's section menu (VKUI PanelHeaderContext; owner 24.09, item 4) ─────────────────────────────
   «Places ▾» under the logo; the list drops from under the island, the page behind dims (header stays lit), a
   tap outside or Esc closes it. Menu rows = VK SimpleCell: 48 px, icon 24, the current one with VK's check. */
.dk2030 .dk-ctx{display:none;}
@media(max-width:600px){
  .dk2030 .dk-ctx{display:block;}
  .dk2030 .dk-top:has(.dk-ctx) .dk-topmid{top:calc(50% - 9px);}
  .dk2030 .dk-top:has(.dk-ctx[open]){background:var(--s1);}  /* glass would show the dim through */
  .dk2030 .dk-ctx-t{position:absolute;left:50%;top:calc(50% + 12px);transform:translate(-50%,-50%);
    display:flex;align-items:center;gap:2px;padding:2px 6px;border-radius:var(--r-ctl);list-style:none;cursor:pointer;
    font-size:13px;line-height:16px;font-weight:600;color:var(--t2);white-space:nowrap;-webkit-tap-highlight-color:transparent;}
  .dk2030 .dk-ctx-t::-webkit-details-marker{display:none;}
  .dk2030 .dk-ctx-t svg{width:12px;height:12px;color:var(--t3);transition:transform .2s var(--vk-slide);}
  .dk2030 .dk-ctx[open] .dk-ctx-t svg{transform:rotate(180deg);}
  .dk2030 .dk-ctx-t:focus-visible{outline:2px solid var(--a1);outline-offset:1px;}
  .dk2030:has(.dk-ctx[open])::after{content:"";position:fixed;inset:0;z-index:39;background:var(--vk-overlay);
    animation:dkFade .2s ease both;}
  .dk2030 .dk-ctx-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);padding:8px 0;border-radius:var(--r-card);
    background:var(--s1);box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);
    animation:vkCtxIn .2s var(--vk-slide) both;}
  .dk2030 .dk-ctx-i{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 16px;color:var(--t1);
    font-size:16px;line-height:20px;text-decoration:none;}
  .dk2030 .dk-ctx-i>svg{width:24px;height:24px;flex:none;color:var(--a1);}
  .dk2030 .dk-ctx-i>span{flex:1;min-width:0;}
  .dk2030 .dk-ctx-i:active{background:var(--s3);}
  .dk2030 .dk-ctx-i.on{font-weight:600;}
  .dk2030 .dk-ctx-i>svg.dk-ctx-done{color:var(--a1);}
}
@keyframes vkCtxIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.dk2030 .dk-ctx-menu{animation:dkFade .2s ease both;}}

/* ── Skeletons as VK's (VKUI Skeleton; owner 24.09, item 5): a highlight sweeps across instead of the block pulsing;
   the next page of an infinite list shows cards (or rows) of its own shape instead of a spinner. */
.dk2030 .dk-skel{--sk-from:var(--s3);--sk-to:color-mix(in srgb,var(--s3),var(--t1) 7%);
  position:relative;display:block;overflow:hidden;background:var(--sk-from);border-radius:6px;animation:none;}
.dk2030 .dk-skel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sk-from),var(--sk-to),var(--sk-from));
  transform:translateX(-100%);animation:vkSkel 1.5s ease-in-out infinite;}
@keyframes vkSkel{to{transform:translateX(100%);}}
.dk2030 .dk-feed>#feed-sentinel-2030{grid-column:1/-1;}
.dk2030 .dk-skel-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.dk2030 .dk-skel-more.rows{grid-template-columns:1fr;gap:4px;}
.dk2030 .dk-skel-card{display:flex;flex-direction:column;gap:10px;padding-bottom:14px;border-radius:var(--r-card);
  background:var(--s1);box-shadow:var(--edge);overflow:hidden;}
.dk2030 .dk-skel-card .dk-skel.ph{aspect-ratio:16/10;border-radius:0;}
.dk2030 .dk-skel-card .dk-skel.ttl,.dk2030 .dk-skel-card .dk-skel.ln{margin:0 14px;}
.dk2030 .dk-skel-card .dk-skel.ttl{height:18px;width:62%;}
.dk2030 .dk-skel-card .dk-skel.ln.short{height:13px;width:38%;}
.dk2030 .dk-skel-row{display:flex;align-items:center;gap:12px;padding:8px 0;}
.dk2030 .dk-skel-row .dk-skel.av{width:48px;height:48px;border-radius:50%;flex:none;}
.dk2030 .dk-skel-lines{flex:1;display:flex;flex-direction:column;gap:8px;}
.dk2030 .dk-skel-lines .dk-skel.ln{height:14px;width:70%;}
.dk2030 .dk-skel-lines .dk-skel.ln.short{width:40%;}
@media (prefers-reduced-motion:reduce){.dk2030 .dk-skel::before{animation:none;display:none;}}

/* ── A plan card as a VK post (owner 24.09, item 6): the picture runs to the card's edges; several photos swipe
   (scroll-snap) with a «1/9» counter in the corner and arrows for a mouse; the action row = VK's grey pills. */
.dk2030 .fcard-pad>.fcard-media{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));
  width:calc(100% + 2 * var(--pad));border-radius:0;}
.dk2030 .fc-post{height:auto;aspect-ratio:4/5;max-height:520px;}
.dk2030 .fc-rail{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;column-gap:0;}
.dk2030 .fc-rail::-webkit-scrollbar{display:none;}
.dk2030 .fc-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;}
.dk2030 .fc-count{position:absolute;top:10px;right:10px;z-index:3;padding:2px 8px;border-radius:var(--r-ctl);
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;
  pointer-events:none;}
.dk2030 .fc-nav{display:none;}
@media (hover:hover) and (pointer:fine){
  .dk2030 .fc-nav{display:flex;position:absolute;top:50%;z-index:3;width:36px;height:36px;margin-top:-18px;
    align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;
    cursor:pointer;opacity:0;transition:opacity .15s;}
  .dk2030 .fc-nav.prev{left:10px;} .dk2030 .fc-nav.next{right:10px;}
  .dk2030 .fc-post:hover .fc-nav,.dk2030 .fc-nav:focus-visible{opacity:1;}
}
.dk2030 .fcard-actions{gap:8px;border-top:0;padding:4px var(--pad) 12px;}
.dk2030 .fcard-actions .act-vk{height:32px;padding:0 12px 0 8px;gap:6px;border-radius:16px;background:var(--s3);
  color:var(--t2);font-size:13px;font-weight:500;}
.dk2030 .fcard-actions .act-vk svg{width:22px;height:22px;}
.dk2030 .fcard-actions .act-vk:hover{background:color-mix(in srgb,var(--s3),var(--t1) 6%);color:var(--t1);}
/* A phone has no room for «Комментировать · Поделиться · Открыть» (364 px in a 361 px row: «Отк», walk 24.09, И1):
   the two pills keep their icon (and the comment count), as in VK; the words stay in aria-label. */
@media(max-width:480px){
  .dk2030 .fcard-actions .act-vk .lbl{display:none;}
  .dk2030 .fcard-actions .act-vk:not(:has(span:not(.lbl))){padding:0 8px;}
  .dk2030 .fcard-actions .dk-open{flex:none;white-space:nowrap;}
}

/* ── Large choice cards in forms (VK's own forms; owner 24.09, item 7): a picture and a word per option, the pick
   outlined in the accent with VK's check; the radio stays a real input (keyboard, no-JS). Phone: the deal type is a
   list of wide cards; the form's main button runs the full width at the bottom, as VK's «Далее». */
.dk2030 .dk-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
@media(min-width:601px){.dk2030 .dk-choice{grid-template-columns:repeat(3,minmax(0,1fr));}}
.dk2030 .dk-choice-i{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:96px;padding:14px 10px;border-radius:var(--r-card);background:var(--s2);box-shadow:inset 0 0 0 1px var(--line-2);
  text-align:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:box-shadow .15s,background-color .15s,transform .1s;}
.dk2030 .dk-choice-i input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.dk2030 .dk-choice-i>svg.ic{width:32px;height:32px;color:var(--a1);}
.dk2030 .dk-choice-i b{font-size:14px;line-height:18px;font-weight:500;color:var(--t1);}
.dk2030 .dk-choice-ok{position:absolute;top:8px;right:8px;width:20px;height:20px;color:var(--a1);opacity:0;transform:scale(.6);
  transition:opacity .15s,transform .15s;}
.dk2030 .dk-choice-i:hover{background:color-mix(in srgb,var(--s2),var(--t1) 4%);}
.dk2030 .dk-choice-i:active{transform:scale(.98);}
.dk2030 .dk-choice-i:has(input:checked){box-shadow:inset 0 0 0 2px var(--a1);background:color-mix(in srgb,var(--a1) 8%,var(--s2));}
.dk2030 .dk-choice-i:has(input:checked) .dk-choice-ok{opacity:1;transform:none;}
.dk2030 .dk-choice-i:has(input:focus-visible){outline:2px solid var(--a1);outline-offset:2px;}
@media(max-width:600px){
  .dk2030 .dk-choice-3{grid-template-columns:1fr;}
  .dk2030 .dk-choice-3 .dk-choice-i{flex-direction:row;justify-content:flex-start;min-height:56px;padding:10px 14px;gap:12px;text-align:left;}
  .dk2030 .dk-choice-3 .dk-choice-i>svg.ic{width:28px;height:28px;}
  .dk2030 .dk-choice-3 .dk-choice-ok{position:static;margin-left:auto;flex:none;}
  .dk2030 .dk-form-sticky .btn-primary{flex:1;min-height:44px;justify-content:center;border-radius:var(--r-ctl);}
}
@media (prefers-reduced-motion:reduce){.dk2030 .dk-choice-i,.dk2030 .dk-choice-ok{transition:none;}}

/* ── Notifications as VK's Snackbar (VKUI Snackbar; the «what else to adopt» pass, 24.09): at the bottom — over the tab
   bar on a phone, bottom-left on a desktop — a card with a status icon, 56 px, sliding in from below; not a pill at
   the top of the screen where the header already is. */
.dk2030 .dk-toasts{top:auto;bottom:24px;left:24px;transform:none;align-items:stretch;width:min(351px,calc(100vw - 48px));}
@media (max-width:600px){.dk2030 .dk-toasts{top:auto;left:8px;right:8px;width:auto;bottom:calc(88px + env(safe-area-inset-bottom));}}
@keyframes vkSnackIn{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:none;}}
@keyframes vkSnackOut{to{opacity:0;transform:translateY(8px);}}
.dk2030 .dk-toast{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px 12px 12px;border:0;
  border-radius:var(--r-card);background:var(--s2);color:var(--t1);font-size:14px;line-height:18px;font-weight:400;
  box-shadow:var(--edge),0 0 2px rgba(0,0,0,.08),0 16px 16px rgba(0,0,0,.16);
  animation:vkSnackIn .34s var(--vk-slide) backwards,vkSnackOut .3s ease 4.4s forwards;}
.dk2030 .dk-toast::before{content:"";flex:none;width:28px;height:28px;background:var(--a1);
  -webkit-mask:url("../icons/vk/info_circle_outline.52bbbfd1d846.svg") center/contain no-repeat;mask:url("../icons/vk/info_circle_outline.52bbbfd1d846.svg") center/contain no-repeat;}
.dk2030 .dk-toast.success::before{background:var(--now);
  -webkit-mask-image:url("../icons/vk/check_circle_outline.40b6a8cc9d4a.svg");mask-image:url("../icons/vk/check_circle_outline.40b6a8cc9d4a.svg");}
.dk2030 .dk-toast.error::before{background:var(--danger);
  -webkit-mask-image:url("../icons/vk/error_circle_outline.0696cf632303.svg");mask-image:url("../icons/vk/error_circle_outline.0696cf632303.svg");}
.dk2030 .dk-toast.warning::before{background:var(--warn);
  -webkit-mask-image:url("../icons/vk/warning_triangle_outline.32726e687714.svg");mask-image:url("../icons/vk/warning_triangle_outline.32726e687714.svg");}
@media (prefers-reduced-motion:reduce){.dk2030 .dk-toast{animation:vkSnackOut .3s ease 4.4s forwards;}}

/* ── Confirmations as VK's Alert (VKUI Alert; 24.09): the browser's grey confirm() box was the one piece of the old
   web on a phone — now a centred card, question in bold, the consequence under it, «Cancel» and the action on the
   right; a destructive action in red. `form[data-confirm]` and htmx `hx-confirm` both land here (dkAlert). */
.dk2030 .dk-alert-bg{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;
  background:var(--vk-overlay);animation:dkFade .2s ease both;}
@keyframes vkAlertIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:none;}}
.dk2030 .dk-alert{min-width:280px;max-width:416px;margin:0 24px;border-radius:var(--r-card);background:var(--s1);
  box-shadow:0 0 2px rgba(0,0,0,.08),0 16px 16px rgba(0,0,0,.16);animation:vkAlertIn .2s var(--vk-slide) both;}
.dk2030 .dk-alert-t{padding:24px 24px 16px;font-size:15px;line-height:20px;color:var(--t1);}
.dk2030 .dk-alert-t b{display:block;margin-bottom:8px;font-size:17px;line-height:22px;font-weight:600;}
.dk2030 .dk-alert-t p{margin:0;color:var(--t2);}
.dk2030 .dk-alert-a{display:flex;justify-content:flex-end;gap:8px;padding:0 12px 12px;}
.dk2030 .dk-alert-a button{min-height:36px;padding:0 16px;border:0;border-radius:var(--r-ctl);background:transparent;
  color:var(--a1);font:inherit;font-size:14px;font-weight:500;cursor:pointer;}
.dk2030 .dk-alert-a button:hover{background:var(--s3);}
.dk2030 .dk-alert-a button:focus-visible{outline:2px solid var(--a1);outline-offset:1px;}
.dk2030 .dk-alert-a button.danger{color:var(--danger);}
@media (prefers-reduced-motion:reduce){.dk2030 .dk-alert,.dk2030 .dk-alert-bg{animation:none;}}

/* ── A post's text as VK's: four lines, «Show more» opens it in place (dkMore shows the button only where it cut). */
.dk2030 .fc-text .fcard-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;
  overflow:hidden;white-space:pre-line;}
.dk2030 .fc-text.open .fcard-desc{display:block;-webkit-line-clamp:unset;line-clamp:none;}
.dk2030 .fc-more{margin-top:2px;padding:0;border:0;background:none;color:var(--a1);font:inherit;font-size:14px;
  font-weight:500;cursor:pointer;}
.dk2030 .fc-more:focus-visible{outline:2px solid var(--a1);outline-offset:2px;border-radius:4px;}

/* ── Entrance as VK's (owner's screenshots 24.09, «вход», «создание аккаунта»): a quiet page with thin lines, one card
   in the middle (12 px, the edge), the mark, a 20 px title and a grey line, 44 px fields without capital labels, one
   big button, the other ways as grey buttons, «Help» under the card, a thin footer with the rules and the language.
   The selectors carry .au-card to outrank the earlier auth rules (`form input[…]`, `button[type=submit]`). */
.au-body{margin:0;}
.dk2030-auth{position:relative;overflow:hidden;background:var(--bg);}
.dk2030-auth .au-lines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.dk2030-auth .au-lines path{fill:none;stroke:var(--line-2);stroke-width:1.2;opacity:.8;}
.dk2030-auth .au-head,.dk2030-auth .au-main,.dk2030-auth .au-foot{position:relative;z-index:1;}
.dk2030-auth .au-theme{border:0;box-shadow:var(--edge);}
.dk2030-auth .au-main{align-items:center;flex-direction:column;justify-content:center;gap:18px;padding:24px 16px 40px;}
.dk2030-auth .au-card{position:relative;max-width:432px;padding:32px 36px 28px;border-radius:var(--r-card);background:var(--s1);
  box-shadow:var(--edge),0 0 2px rgba(0,0,0,.08),0 16px 16px rgba(0,0,0,.08);}
.dk2030-auth .au-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:22px;}
.dk2030-auth .au-mark{width:auto;height:56px;display:block;margin-bottom:6px;}
.dk2030-auth .au-card h1{margin:0;font-size:20px;line-height:26px;font-weight:600;}
.dk2030-auth .au-top p{margin:0;font-size:15px;line-height:20px;color:var(--t2);text-wrap:balance;}
.dk2030-auth .au-form{display:flex;flex-direction:column;gap:12px;}
.dk2030-auth .au-step{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0;min-width:0;}
.dk2030-auth .au-form:not(.au-stepped) .au-step + .au-step{margin-top:28px;padding-top:24px;box-shadow:0 -.33px 0 var(--line-2);}
.dk2030-auth .au-form:not(.au-stepped) [data-step-next]{display:none;}
.dk2030-auth .au-field{display:flex;flex-direction:column;gap:6px;}
.dk2030-auth .au-card .au-form input[type=text],.dk2030-auth .au-card .au-form input[type=email],
.dk2030-auth .au-card .au-form input[type=password],.dk2030-auth .au-card .au-form select{
  height:44px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--line-2);background:var(--s2);
  font-size:16px;color:var(--t1);}
.dk2030-auth .au-card .au-form input:focus,.dk2030-auth .au-card .au-form select:focus{border-color:var(--a1);
  box-shadow:0 0 0 1px var(--a1);}
.dk2030-auth .au-field.bad input,.dk2030-auth .au-field.bad select{border-color:var(--danger);}
.dk2030-auth .au-field .err{font-size:13px;color:var(--danger);}
.dk2030-auth .au-lbl{margin:4px 0 0;font-size:14px;font-weight:500;color:var(--t2);}
.dk2030-auth .au-date{display:grid;grid-template-columns:1fr 1.5fr 1.1fr;gap:8px;}
.dk2030-auth .au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;}
.dk2030-auth .au-check{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:400;color:var(--t2);cursor:pointer;}
.dk2030-auth .au-check input{width:18px;height:18px;accent-color:var(--a1);}
.dk2030-auth .au-link{font-size:14px;font-weight:500;text-decoration:none;}
.dk2030-auth .au-card .au-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;
  margin:0;padding:0 16px;border:0;border-radius:var(--r-ctl);background:var(--a1-fill);color:#fff;font:inherit;font-size:15px;
  font-weight:500;text-decoration:none;cursor:pointer;box-shadow:none;}
.dk2030-auth .au-card .au-btn:hover{opacity:.92;}
.dk2030-auth .au-card .au-btn.sec{background:var(--s3);color:var(--t1);}
.dk2030-auth .au-card .au-btn.sec:hover{opacity:1;background:color-mix(in srgb,var(--s3),var(--t1) 6%);}
.dk2030-auth .au-card > .au-btn.sec{margin-top:12px;}
.dk2030-auth .au-social{display:flex;flex-direction:column;gap:8px;}
.dk2030-auth .au-or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--t3);font-size:13px;}
.dk2030-auth .au-or::before,.dk2030-auth .au-or::after{content:"";flex:1;height:0;box-shadow:0 .33px 0 var(--line-2);}
.dk2030-auth .au-legal{margin:2px 0 0;font-size:13px;line-height:17px;color:var(--t3);text-align:center;}
.dk2030-auth .au-legal a{color:var(--t2);}
.dk2030-auth .au-back{position:absolute;top:16px;left:16px;display:flex;width:40px;height:40px;align-items:center;justify-content:center;
  border-radius:50%;color:var(--t2);}
.dk2030-auth .au-back:hover{background:var(--s3);color:var(--t1);}
.dk2030-auth .au-back svg{width:26px;height:26px;}
.dk2030-auth .dk-choice-g{grid-template-columns:repeat(3,minmax(0,1fr));}
.dk2030-auth .dk-choice-g .dk-choice-i{min-height:84px;padding:12px 6px;}
.dk2030-auth .dk-choice-g .dk-choice-i>svg.ic{width:28px;height:28px;}
.dk2030-auth .au-help{font-size:14px;font-weight:600;color:var(--t1);text-decoration:none;}
.dk2030-auth .au-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:14px 24px calc(14px + env(safe-area-inset-bottom));
  font-size:13px;color:var(--t2);}
.dk2030-auth .au-foot a{color:var(--t2);text-decoration:none;}
.dk2030-auth .au-foot a:hover{color:var(--t1);}
.dk2030-auth .au-foot .au-lang summary{padding:0;color:var(--t2);font-weight:500;}
.dk2030-auth .au-foot .au-langmenu{top:auto;bottom:calc(100% + 6px);border:0;box-shadow:var(--edge),var(--elev3);}
.dk2030-auth .au-langmenu a[aria-current]{color:var(--a1);}
.dk2030-auth .au-msgs{margin-bottom:14px;}
@media(max-width:600px){
  .dk2030-auth .au-main{justify-content:flex-start;padding:8px 12px 24px;}
  .dk2030-auth .au-card{padding:28px 20px 22px;}
  .dk2030-auth .au-foot{justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));}
  .dk2030-auth .au-foot .au-spacer{display:none;}
}

/* ── The account menu as VK web's avatar card (owner's screenshot 24.09): the photo 64, the name, the account masked, one
   outlined button to the profile, then 44 px rows with a 24 px icon. Sidebar: a popover above the profile row. Phone:
   the Profile tab opens it as a sheet from below (the drawer shows it inline). */
.dk2030 .dk-acct{position:relative;display:block;padding:0;border:0;}
.dk2030 .dk-acct>summary{display:flex;align-items:center;gap:11px;padding:10px;border-radius:var(--r-card);list-style:none;
  cursor:pointer;box-shadow:var(--edge);}
.dk2030 .dk-acct>summary::-webkit-details-marker{display:none;}
.dk2030 .dk-acct>summary:hover,.dk2030 .dk-acct[open]>summary{background:var(--s2);}
.dk2030 .dk-acct-caret{width:16px;height:12px;flex:none;color:var(--t3);transition:transform .2s var(--vk-slide);}
.dk2030 .dk-acct[open] .dk-acct-caret{transform:rotate(180deg);}
.dk2030 .dk-acct-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;width:320px;animation:vkAlertIn .16s var(--vk-slide) both;}
.dk2030 .dk-acct-card{display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--s1);color:var(--t1);
  box-shadow:var(--edge),0 0 2px rgba(0,0,0,.08),0 16px 16px rgba(0,0,0,.16);overflow:hidden;}
.dk2030 .dk-acct-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 16px 14px;text-align:center;}
.dk2030 .dk-acct-av{width:64px;height:64px;font-size:24px;margin-bottom:8px;background:var(--a1-fill);color:#fff;}
.dk2030 .dk-acct-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.dk2030 .dk-acct-name{font-size:17px;line-height:22px;font-weight:600;}
.dk2030 .dk-acct-sub{font-size:14px;color:var(--t3);}
.dk2030 .dk-acct-main{display:flex;align-items:center;justify-content:center;min-height:40px;margin:0 16px 8px;border-radius:var(--r-ctl);
  box-shadow:inset 0 0 0 1px var(--line-2);color:var(--t1);font-size:15px;font-weight:500;text-decoration:none;}
.dk2030 .dk-acct-main:hover{background:var(--s2);}
.dk2030 .dk-acct-list{display:flex;flex-direction:column;padding:4px 0 8px;}
.dk2030 .dk-acct-list form{margin:0;}
.dk2030 .dk-acct-i{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:0 16px;border:0;background:none;
  color:var(--t1);font:inherit;font-size:15px;text-align:left;text-decoration:none;cursor:pointer;}
.dk2030 .dk-acct-i:hover{background:var(--s2);}
.dk2030 .dk-acct-i>svg.ic{width:24px;height:24px;flex:none;color:var(--a1);}
.dk2030 .dk-acct-i>span{flex:1;min-width:0;}
.dk2030 .dk-acct-i em{font-style:normal;}
.dk2030 .dk-acct-theme{color:var(--a1);}
.dk2030 .dk-acct-n{min-width:20px;padding:0 6px;border-radius:8px;background:var(--count);color:#fff;font-size:12px;line-height:20px;text-align:center;}
.dk2030 .dk-acct-on{color:var(--now);}
.dk2030 .dk-acct-lang{cursor:default;}
.dk2030 .dk-acct-lang .dk-langpick{margin-left:auto;}
.dk2030 .dk-acct-sheet{position:fixed;inset:0;z-index:260;display:flex;align-items:flex-end;background:var(--vk-overlay);
  animation:dkFade .2s ease both;}
.dk2030 .dk-acct-sheet[hidden]{display:none;}
.dk2030 .dk-acct-sheet-in{position:relative;width:100%;max-height:92dvh;overflow-y:auto;animation:vkSheetIn .34s var(--vk-slide) both;
  padding-bottom:env(safe-area-inset-bottom);background:var(--s1);border-radius:var(--r-card) var(--r-card) 0 0;}
.dk2030 .dk-acct-sheet-in::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;
  border-radius:2px;background:var(--line-2);}
.dk2030 .dk-acct-sheet .dk-acct-card{border-radius:0;box-shadow:none;}
@media(max-width:880px) and (min-width:601px){
  .dk2030 .dk-acct>summary{justify-content:center;padding:8px 4px;}
  .dk2030 .dk-acct-caret{display:none;}
}
@media(max-width:600px){
  .dk2030 .dk-acct-pop{position:static;width:auto;margin-top:8px;animation:none;}
}
@media (prefers-reduced-motion:reduce){.dk2030 .dk-acct-pop,.dk2030 .dk-acct-sheet-in{animation:none;}}

/* ============================================================
   HOME WITHOUT A CITY — «Pick your city» row under the heading (walk 2026-09-24, П6)
   ============================================================ */
.dk2030 .dk-pickcity{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.dk2030 .dk-pickcity::-webkit-scrollbar{display:none;}
.dk2030 .dk-pickcity .l{flex:none;font-size:13px;color:var(--t3);}
.dk2030 .dk-pickcity .chip{flex:none;white-space:nowrap;}

/* ── VK mobile shell (owner 26.09: «проверь, везде ли мы применили VK UI, особенно моб. версия» → «решай сам»). The
   header and the tab bar were ours — a floating glass «island» and a capsule with a round «+» over the content, which
   covered the page's own buttons («Publish plan», «Continue», «Claim it»). VKUI: PanelHeader is a flat bar of the full
   width, 56 px, with a hairline under it and no hide-on-scroll; Tabbar is a full-width bar with a hairline above it
   (docs/reference/vkui/…/PanelHeader, …/Tabbar). Buttons are flat — no coloured glow (VKUI Button has no shadow). */
@media(max-width:600px){
  .dk2030 .dk-top,.dk2030 .dk-top.tuck{left:0;right:0;top:0;border-radius:0;border:0;box-shadow:none;
    min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6px 0;
    background:var(--s1);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:.5px solid var(--line-2);transform:none;opacity:1;pointer-events:auto;}
  .dk2030 .dk-top:has(.dk-ctx[open]){background:var(--s1);}
  .dk2030 .dk-topmid{top:calc(50% + env(safe-area-inset-top) / 2);}
  .dk2030 .dk-scroll{padding-top:calc(56px + env(safe-area-inset-top) + 12px);}

  .dk2030 .dk-bottomnav{left:0;right:0;bottom:0;transform:none;width:auto;border-radius:0;border:0;gap:0;
    justify-content:space-around;padding:0 4px env(safe-area-inset-bottom);height:calc(56px + env(safe-area-inset-bottom));
    background-color:var(--s1);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
    border-top:.5px solid var(--line-2);}
  .dk2030 .dk-glassfx{display:none;}
  .dk2030 .navb{flex:1 1 0;min-width:0;height:56px;border-radius:0;}
  /* «+» stays the one action of the bar, but inside it: an accent circle the size of a tab icon's touch area */
  .dk2030 .navb-cta,.dk2030 .navb-cta.on{flex:0 0 auto;width:44px;min-width:44px;height:44px;margin:0 6px;
    align-self:center;box-shadow:none;}
  .dk2030 .tb-count{box-shadow:0 0 0 2px var(--s1);}
  .dk2030 .dk-bottom-pad{height:calc(56px + env(safe-area-inset-bottom) + 16px);}
  .dk2030:has(.pl-dock) .dk-bottom-pad{height:calc(56px + 58px + env(safe-area-inset-bottom) + 16px);}
  .dk2030 .dk-mapwrap{height:calc(100dvh - 56px - 56px - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
  .dk2030 .dk-map-sheet{bottom:calc(56px + 8px + env(safe-area-inset-bottom));}
}
.dk2030 :is(.pill-accent,.btn-primary,.dk-report-send,.navb-cta,.ms-go,.st-book,.funnel-wrap[open] summary),
.dk2030 :is(.pill-accent,.btn-primary,.dk-report-send):is(:hover,:active){box-shadow:none;}
.dk2030 :is(.pill-accent,.btn-primary,.dk-report-send,.st-book):focus-visible{box-shadow:var(--ring);}
/* A snapping row puts its first item at the edge of its scrollport and eats the row's padding: the city hub's «All»
   chip and the first card sat at x = 0 (VK CardScroll / HorizontalScroll keep a 16 px inset). scroll-padding restores
   the gutter for the snap. */
.dk2030 :is(.dk-catrow,.dk-rail,.pgx .pg-tiles){scroll-padding-inline:14px;}
@media(max-width:600px){
  .dk2030 .dk-rail,.dk2030 .dk-scroll > .dk-catrow,.dk2030 .dk-landing-head .dk-catrow{scroll-padding-inline:14px;}
  /* The «+» keeps its circle inside the flat bar (the bar's items are square now). */
  .dk2030 .navb-cta,.dk2030 .navb-cta.on{border-radius:50%;}
  /* A page action in the header is an icon on a phone (VK PanelHeaderButton): «📸 From poster» ran into the logo. */
  .dk2030 .dk-top .pill-sm .pill-sm-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .dk2030 .dk-top .pill-sm:has(svg){width:36px;height:36px;padding:0;justify-content:center;border-radius:50%;}
}
/* VK Placeholder: icon 56 in the secondary colour, title 20/600, text 16 secondary, one action (components/_placeholder_2030) */
.dk2030 .vk-ph{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px;}
.dk2030 .vk-ph-ic svg{width:56px;height:56px;color:var(--t3);}
.dk2030 .vk-ph-t{margin:4px 0 0;font-size:20px;line-height:24px;font-weight:600;color:var(--t1);}
.dk2030 .vk-ph-x{margin:0;max-width:300px;font-size:15px;line-height:20px;color:var(--t2);}
.dk2030 .vk-ph-a{margin-top:12px;}
/* a page the landing links that has nothing yet (geo/empty_target.py; board-cards-concept §4): the honest line (A), the
   same page around (B), the member's plan card (D), the project's advert with the site's screens (P) */
.dk2030 .bc{position:relative;display:block;margin:0 0 var(--feed-gap);padding:16px;border-radius:var(--r-card);
  background:var(--s1);box-shadow:var(--edge);color:var(--t1);}
.dk2030 .bc-t{margin:0;font-size:16px;line-height:20px;font-weight:600;color:var(--t1);text-wrap:balance;}
.dk2030 .bc .dk-related-row{margin-top:10px;}
.dk2030 .bc-empty{display:flex;align-items:flex-start;gap:10px;margin:4px 0 var(--feed-gap);font-size:15px;line-height:21px;
  color:var(--t2);}
.dk2030 .bc-empty .cat-ico{width:22px;height:22px;flex:none;color:var(--t3);}
.dk2030 .bc-empty b{color:var(--t1);font-weight:600;}
.dk2030 .bc-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px;}
.dk2030 .bc-link{font-size:14px;font-weight:600;color:var(--a1);text-decoration:none;}
.dk2030 .bc-fine{margin:8px 0 0;font-size:12px;line-height:16px;color:var(--t3);}
.dk2030 .bc-promo{padding:16px 16px 14px;}
.dk2030 .bc-brand{display:flex;align-items:center;gap:10px;}
.dk2030 .bc-brand-av{flex:none;width:40px;height:40px;border-radius:50%;}
.dk2030 .bc-brand b{display:block;font-size:15px;line-height:18px;font-weight:600;}
.dk2030 .bc-brand b + span{display:block;font-size:13px;line-height:16px;color:var(--t3);}
.dk2030 .bc-promo-t{margin:12px 0 0;font-size:20px;line-height:24px;font-weight:600;color:var(--t1);text-wrap:balance;}
.dk2030 .bc-promo-s{margin:4px 0 0;max-width:56ch;font-size:15px;line-height:20px;color:var(--t2);text-wrap:pretty;}
.dk2030 .bc-promo-s a{color:var(--t1);font-weight:600;text-decoration:none;}
.dk2030 .bc-promo-s a:hover{text-decoration:underline;text-underline-offset:3px;}
.dk2030 .bc-galw{position:relative;margin:14px -16px 0;}
.dk2030 .bc-gal{display:flex;gap:10px;overflow-x:auto;padding:0 16px 2px;scroll-snap-type:x mandatory;
  scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain;}
.dk2030 .bc-gal::-webkit-scrollbar{display:none;}
.dk2030 .bc-gal:focus-visible{outline:2px solid var(--a1);outline-offset:2px;}
.dk2030 .bc-slide{flex:0 0 150px;margin:0;scroll-snap-align:start;}
.dk2030 .bc-slide a{display:block;color:var(--t1);text-decoration:none;}
.dk2030 .bc-slide img{display:block;width:150px;height:auto;aspect-ratio:590/1278;border-radius:14px;box-shadow:var(--edge);
  background:var(--s3);}
.dk2030 .bc-slide figcaption{margin-top:8px;font-size:13px;line-height:17px;font-weight:600;}
.dk2030 .bc-slide a:hover figcaption{color:var(--a1);}
.dk2030 .bc-gal-b{position:absolute;top:150px;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;
  background:var(--s1);color:var(--t1);box-shadow:0 2px 10px rgba(0,0,0,.35),var(--edge);cursor:pointer;}
.dk2030 .bc-gal-b .bc-chev{width:18px;height:18px;color:currentColor;}
.dk2030 .bc-gal-b.is-prev{inset-inline-start:8px;}
.dk2030 .bc-gal-b.is-prev .bc-chev{transform:rotate(90deg);}
.dk2030 .bc-gal-b.is-next{inset-inline-end:8px;}
.dk2030 .bc-gal-b.is-next .bc-chev{transform:rotate(-90deg);}
/* Hebrew: the row starts at the right, so «back» stands at the right and points there */
[dir="rtl"] .dk2030 .bc-gal-b.is-prev .bc-chev{transform:rotate(-90deg);}
[dir="rtl"] .dk2030 .bc-gal-b.is-next .bc-chev{transform:rotate(90deg);}
.dk2030 .bc-gal-b[hidden]{display:none;}
@media(hover:none){.dk2030 .bc-gal-b{display:none;}}
@media(max-width:600px){
  .dk2030 .bc{padding:14px;}
  .dk2030 .bc-promo{padding:14px 14px 12px;}
  .dk2030 .bc-galw{margin:14px -14px 0;}
  .dk2030 .bc-gal{padding:0 14px 2px;scroll-padding-inline:14px;}
  .dk2030 .bc-slide{flex-basis:38vw;}          /* 390 px: two screens and 31 px of the third — the row reads as scrollable */
  .dk2030 .bc-slide img{width:100%;}
}
/* VK FormItem top / Group Header: labels and section heads in sentence case (VKUI v8 keeps caps for tiny captions
   only) — «YOUR CITY», «PHOTOS», «AT 100% YOU GET» read as template chrome. Badges on covers keep their caps. */
.dk2030 :is(.dk-form label.lbl,.dk-form .sect-h,.dk-onb .fl,.loc-sec,.filterpanel .fl,.dk-perks-h,.mf-lbl,
  .dk-prof-prompt .q,.mt-prefs-h,.mt-sec-h,.mt-prompt-q,.dk-sp-sec,.blg-toc-t){
  text-transform:none;letter-spacing:normal;font-size:14px;line-height:18px;font-weight:500;}
@media(max-width:600px){.dk2030 .dk-top .pill-sm:has(svg) svg{width:20px;height:20px;}}
/* VK FormField: fields are 8 px rounded boxes with a hairline, no drop shadow (the 25 px «pills» were ours). */
.dk2030 .dk-form{--fld-r:var(--r-ctl);}
.dk2030 .dk-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],
  input[type=password],input[type=date],input[type=datetime-local],input[type=time],input[type=search],select,textarea){
  box-shadow:inset 0 0 0 .5px var(--line-2);}
.dk2030 .dk-form textarea{border-radius:var(--r-ctl);}
/* The rows under a list («Bars nearby», «More to explore», «Questions») are section heads, smaller than the page's h1
   (they were browser-default h2 — 26 px under a 20 px title). */
.dk2030 :is(.dk-related,.dk-questions) h2.fl{font-size:17px;line-height:22px;font-weight:600;color:var(--t1);
  text-transform:none;letter-spacing:normal;}
/* the prefilled city and the category line are the same kind of row as the fields around them (VK FormField, 8 px) */
.dk2030 .dk-form :is(.prefill,.dk-catpick){border-radius:var(--r-ctl);}
/* ── Stage 0 of the VK migration (docs/research/design/vk-migration/00-plan.md): visible bugs ── */
/* «Роман , 32»: the row's gap stood between the name and «, 32» */
.dk2030 .fcard-head .nm .age{margin-left:-5px;}
/* hover took the card's hairline away and lifted it (VK cards do not move); keep the edge, a light shadow only */
.dk2030 .fcard:hover{transform:none;box-shadow:var(--edge),0 6px 20px -14px rgba(0,0,0,.35);}
/* a tile without a picture is a 44 px band: the date badge sat on its category label — the badge takes the right */
.dk2030 .dk-tile-cover:not(.shot) .dk-tile-badge{left:auto;right:7px;top:50%;transform:translateY(-50%);}
/* /categories/: the group heads were browser-default h2 (~26 px) over a 20 px page title — VK Header l, 17/22 */
.dk2030 .dk-catgroup h2.fl{font-size:17px;line-height:22px;font-weight:600;text-transform:none;letter-spacing:normal;}
/* Utilities the templates use and the compat layer never defined (VK audit 27.09): Plus lost the margins of its banners
   and hero, /categories/ its pagination padding. Stage 2 moves these pages onto classes; until then the scale holds. */
.dk2030 .mx-5{margin-left:20px;margin-right:20px;} .dk2030 .mt-5{margin-top:20px;} .dk2030 .pt-9{padding-top:36px;}
.dk2030 .pb-6{padding-bottom:24px;} .dk2030 .py-5{padding-top:20px;padding-bottom:20px;} .dk2030 .py-0\.5{padding-top:2px;padding-bottom:2px;}
@media(max-width:600px){
  /* sheets and popovers sat 96 px up — over the old floating tab bar; the bar is 56 now */
  .dk2030 .dk-ddmenu,.dk2030 .dk-langmenu,.dk2030 .dk-report-pop{bottom:calc(64px + env(safe-area-inset-bottom));}
  .dk2030 .dk-toasts{bottom:calc(64px + env(safe-area-inset-bottom));}
  .dk2030 .dk-sp-results{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
  .dk2030 .dk-sp-filters{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
  /* a field under 16 px makes iOS zoom the page on focus (city picker, report form were 13 px) */
  .dk2030 :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px;}
}
/* notification row = VK SimpleCell/RichCell (notifications/_notification.html) */
.dk2030 .vk-ntf{display:flex;align-items:flex-start;gap:12px;padding:10px 16px;text-decoration:none;color:var(--t1);}
.dk2030 .vk-ntf:hover{background:var(--s2);}
.dk2030 .vk-ntf.unread{background:color-mix(in srgb,var(--a1) 8%,transparent);}
.dk2030 .vk-ntf-av{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;display:grid;place-items:center;}
.dk2030 .vk-ntf-ini{background:var(--a1-fill);color:#fff;font-size:17px;font-weight:600;}
.dk2030 .vk-ntf-sys{background:var(--s2);color:var(--t2);}
.dk2030 .vk-ntf-sys svg{width:24px;height:24px;}
.dk2030 .vk-ntf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:2px;}
.dk2030 .vk-ntf-t{font-size:16px;line-height:20px;}
.dk2030 .vk-ntf-t b{font-weight:600;}
.dk2030 .vk-ntf-time{font-size:13px;line-height:16px;color:var(--t3);}
.dk2030 .vk-ntf-dot{flex:none;align-self:center;width:6px;height:6px;border-radius:50%;background:var(--a1);}
/* allauth elements in shell classes (allauth/elements/*, VK audit 27.09 — they were Tailwind with no Tailwind) */
.dk2030 .au-msg{padding:12px 14px;border-radius:var(--r-ctl);font-size:14px;line-height:18px;margin-bottom:12px;}
.dk2030 .au-msg.ok{background:var(--now-soft);color:var(--now);}
.dk2030 .au-msg.err{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);}
.dk2030 .au-msg.info{background:color-mix(in srgb,var(--a1) 10%,transparent);color:var(--a1);}
.dk2030 .vk-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-ctl);font-size:12px;line-height:16px;
  font-weight:500;background:var(--s2);color:var(--t2);}
.dk2030 .vk-badge.ok{background:var(--now-soft);color:var(--now);}
.dk2030 .vk-badge.warn{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);}
.dk2030 .vk-danger{background:var(--danger);}
.dk2030 .vk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.dk2030 .vk-field .hint{font-size:13px;line-height:16px;color:var(--t3);}
.dk2030 .vk-field .err{font-size:13px;line-height:16px;color:var(--danger);}
.dk2030 .vk-panel-h{margin:0 0 16px;font-size:20px;line-height:24px;font-weight:600;color:var(--t1);}
.dk2030 .vk-panel-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.dk2030 .vk-table-wrap{overflow-x:auto;border-radius:var(--r-card);box-shadow:var(--edge);}
.dk2030 .vk-table{width:100%;border-collapse:collapse;font-size:14px;}
.dk2030 .vk-table :is(th,td){padding:10px 12px;text-align:left;border-bottom:.5px solid var(--line-2);}
.dk2030 .vk-table th{font-weight:500;color:var(--t2);}
.dk2030 .vk-p{margin:0 0 12px;font-size:15px;line-height:20px;color:var(--t2);}
.dk2030 .vk-panel-h2{margin:24px 0 12px;font-size:17px;line-height:22px;font-weight:600;color:var(--t1);}

/* VK radii, stage 1: four controls the pill→8 pass kept round by their names (filter funnel, rail plan button, ticket
   button, budget chips) */
.dk2030 .funnel-wrap summary,.dk2030 .dk-railplan-cta,.dk2030 .fx-ticket-cta .pill-accent,.dk2030 .idx-budget span{border-radius:var(--r-ctl);}


/* ==== Hints (owner 2026-09-29: «разработай UI таких подсказок, чтобы потом туда ходили и брали»). Five levels, loud to
   quiet — the showcase with the rules and snippets is /ui/tips/ (core/views_ui.py, pages/ui_tips_2030.html):
   1 .dk-tip   the card of a new feature (VK «Новый интерфейс!»): a marker over the first words, one button, a drawn arrow
   2 .dk-coach an anchored bubble pointing at a control (VKUI OnboardingTooltip): steps, a pulse on the target
   3 .dk-hint  a quiet line inside the content
   4 .dk-new   a dot or a «New» pill on a menu item
   5 toasts (dkToastMsg) — «done / failed» only, never teaching
   One on screen at a time, once per person (static/js/tips.js remembers `invme.tip.<id>`), nothing without JS.
   Marker colour: VK's lime on the dark theme, a warm yellow on the light one — text on it is always dark. ==== */
.dk2030{--mark:#c8ff3c;--mark-ink:#111;--mark-line:#c8ff3c;}
html[data-theme="light"] .dk2030{--mark:#ffe14d;--mark-line:#e0a800;}
@media (prefers-color-scheme: light){html:not([data-theme="dark"]) .dk2030{--mark:#ffe14d;--mark-line:#e0a800;}}
.dk2030 [data-tip][hidden]{display:none!important}

/* 1 — the card */
.dk2030 .dk-tip{position:relative;padding:16px 44px 16px 18px;border-radius:var(--r-card);background:var(--s1);
  box-shadow:var(--edge);color:var(--t1);overflow:hidden}
.dk2030 .dk-tip.in{animation:dkTipIn .32s var(--ease,ease) both}
.dk2030 .dk-tip-t{margin:0;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.01em;text-wrap:pretty}
/* the marker: a brush stroke UNDER the words (a pseudo-element with the stroke as a mask), never a flat box —
   eight hands (img/marks/*.svg, scripts/build/make_marks.py): filled brush · brush2 · swipe · half, lines under · zigzag ·
   circle · box. --tilt: each mark its own slight angle (tips.js, fixed per hint) */
.dk2030 .dk-mark{position:relative;z-index:0;display:inline-block;white-space:nowrap;padding:0 .12em;margin:0 .32em 0 .06em;
  color:var(--mark-ink);--mk:url("../img/marks/brush.36e9c3c370fb.svg")}
.dk2030 .dk-mark::before{content:"";position:absolute;z-index:-1;inset:-.16em -.34em -.1em -.28em;background:var(--mark);
  -webkit-mask:var(--mk) center/100% 100% no-repeat;mask:var(--mk) center/100% 100% no-repeat;
  transform:rotate(var(--tilt,-1.5deg))}
.dk2030 .dk-mark--brush2{--mk:url("../img/marks/brush2.e385152ebbe7.svg")}
.dk2030 .dk-mark--swipe{--mk:url("../img/marks/swipe.e4f96c692cde.svg")}
.dk2030 .dk-mark--half{--mk:url("../img/marks/half.41d877279065.svg")}
.dk2030 .dk-mark--half{color:inherit}
/* «half» is a thick low line: the words keep their colour (dark words on the dark card lost their tops) */
.dk2030 .dk-mark--half::before{inset:.62em -.22em -.1em -.18em}
.dk2030 .dk-mark--under,.dk2030 .dk-mark--zigzag,.dk2030 .dk-mark--circle,.dk2030 .dk-mark--box{color:inherit}
.dk2030 .dk-mark--under::before,.dk2030 .dk-mark--zigzag::before,.dk2030 .dk-mark--circle::before,
.dk2030 .dk-mark--box::before{background:var(--mark-line)}
.dk2030 .dk-mark--under{--mk:url("../img/marks/under.d7d8803f6800.svg")}
.dk2030 .dk-mark--under::before{inset:auto -.2em -.42em -.18em;height:.62em}
.dk2030 .dk-mark--zigzag{--mk:url("../img/marks/zigzag.784788b5c713.svg")}
.dk2030 .dk-mark--zigzag::before{inset:auto -.1em -.4em -.1em;height:.5em}
.dk2030 .dk-mark--circle{--mk:url("../img/marks/circle.4bd51582ed3f.svg");margin:0 .3em}
.dk2030 .dk-mark--circle::before{inset:-.34em -.55em -.3em -.5em}
.dk2030 .dk-mark--box{--mk:url("../img/marks/box.4e867027b1ee.svg");margin:0 .25em}
.dk2030 .dk-mark--box::before{inset:-.2em -.35em -.16em -.32em}
.dk2030 .dk-tip-row{display:flex;align-items:center;gap:12px;margin-top:14px;min-height:40px}
.dk2030 .dk-tip-cta{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:var(--r-ctl);
  background:var(--t1);color:var(--bg);font-size:16px;font-weight:600;text-decoration:none;border:0;cursor:pointer;flex:none}
.dk2030 .dk-tip-cta:focus-visible,.dk2030 .dk-tip-x:focus-visible,.dk2030 .dk-coach-btn:focus-visible,
.dk2030 .dk-hint-x:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
/* the drawn arrow toward the button — six marker strokes (img/arrows/*.svg, scripts/build/make_arrows.py): loop · curve ·
   squiggle · spiral · hook · dash;
   drawn pointing LEFT (the button stands before it), --right and --up turn it */
.dk2030 .dk-arrow{width:150px;height:48px;flex:none;background:var(--mark-line);--ar:url("../img/arrows/loop.afbbf4c4f949.svg");
  -webkit-mask:var(--ar) center/contain no-repeat;mask:var(--ar) center/contain no-repeat;
  transform:rotate(var(--tilt,0deg))}
.dk2030 .dk-arrow--curve{--ar:url("../img/arrows/curve.72d86aa5f62a.svg")}
.dk2030 .dk-arrow--squiggle{--ar:url("../img/arrows/squiggle.42ca34333c42.svg")}
.dk2030 .dk-arrow--spiral{--ar:url("../img/arrows/spiral.92e23a053484.svg")}
.dk2030 .dk-arrow--hook{--ar:url("../img/arrows/hook.d5b7a4ed490b.svg")}
.dk2030 .dk-arrow--dash{--ar:url("../img/arrows/dash.15245af9b1a7.svg")}
.dk2030 .dk-arrow.is-right{transform:scaleX(-1) rotate(var(--tilt,0deg))}
.dk2030 .dk-arrow.is-up{transform:rotate(90deg);width:48px;height:150px;-webkit-mask-size:150px 48px;mask-size:150px 48px}
.dk2030 .dk-tip-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:0;display:grid;
  place-items:center;background:transparent;color:var(--t3);cursor:pointer}
.dk2030 .dk-tip-x:hover{background:var(--hover,rgba(255,255,255,.06));color:var(--t1)}
.dk2030 .dk-tip-x .ic,.dk2030 .dk-hint-x .ic{width:20px;height:20px}
@keyframes dkTipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 2 — the anchored bubble: accent fill, an arrow toward the target, fixed to the viewport (tips.js places it) */
.dk2030 .dk-coach{position:fixed;z-index:60;max-width:300px;padding:14px 16px 12px;border-radius:var(--r-card);
  background:var(--a1-fill);color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.dk2030 .dk-coach.in{animation:dkTipIn .28s var(--ease,ease) both}
.dk2030 .dk-coach::before{content:"";position:absolute;left:var(--ax,24px);width:14px;height:14px;margin-left:-7px;
  background:inherit;transform:rotate(45deg);border-radius:3px}
.dk2030 .dk-coach[data-side="below"]::before{top:-6px}
.dk2030 .dk-coach[data-side="above"]::before{bottom:-6px}
.dk2030 .dk-coach-t{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.3}
.dk2030 .dk-coach-p{margin:0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.88)}
.dk2030 .dk-coach-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.dk2030 .dk-coach-step{font-size:13px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.dk2030 .dk-coach-btn{height:32px;padding:0 14px;border-radius:var(--r-ctl);border:0;background:#fff;color:#0b1b33;
  font-size:14px;font-weight:600;cursor:pointer}
/* the control it points at: a soft ring that breathes twice and stays */
.dk2030 .dk-coach-target{position:relative;z-index:1;border-radius:var(--r-ctl);
  box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--a1);animation:dkCoachRing 1.2s ease-out 2}
@keyframes dkCoachRing{0%{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--a1)}
  60%{box-shadow:0 0 0 3px var(--bg),0 0 0 14px rgba(51,144,255,0)}100%{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--a1)}}
/* the showcase draws the bubble in the flow, under its sample button */
.dk2030 .dk-coach.is-static{position:relative;inset:auto;margin-top:14px}

/* 3 — the quiet line */
.dk2030 .dk-hint{display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:var(--r-card);
  background:color-mix(in srgb,var(--a1) 10%,transparent);color:var(--t1);font-size:14px;line-height:1.45}
.dk2030 .dk-hint .ic{width:22px;height:22px;flex:none;color:var(--a1)}
.dk2030 .dk-hint-b{flex:1;min-width:0}
.dk2030 .dk-hint-b a{color:var(--a1);font-weight:600;text-decoration:none}
.dk2030 .dk-hint-x{margin:-4px -4px -4px 0;width:28px;height:28px;border:0;border-radius:50%;display:grid;
  place-items:center;background:transparent;color:var(--t3);cursor:pointer;flex:none}

/* 4 — «new» on a menu item */
.dk2030 .dk-new-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--a1);vertical-align:middle;
  margin-left:6px;box-shadow:0 0 0 2px var(--bg)}
.dk2030 .dk-new-pill{display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-left:6px;border-radius:5px;
  background:var(--a1-fill);color:#fff;font-size:11px;font-weight:600;letter-spacing:.01em;vertical-align:middle}