/* ============================================================
   Ticket Platform — shared design system
   Tokens taken verbatim from the hall constructor so the whole
   product reads as one coherent surface.
   ============================================================ */
:root{
  --paper:#F4F3EE; --grid-dot:#D8D5CB; --panel:#FFFFFF; --line:#E5E2D9; --line2:#D5D2C8;
  --ink:#21242A; --muted:#7A766A; --faint:#A9A599;
  --brand:#8A2230; --brand-ink:#5E1620;
  --action:#23262B; --action-h:#3A3E45;
  --select:#1F6FEB; --select-bg:rgba(31,111,235,.12);
  --ok:#2E7D32; --ok-bg:rgba(46,125,50,.12);
  --warn:#B8860B; --warn-bg:rgba(184,134,11,.12);
  --danger:#C03434; --danger-bg:rgba(192,52,52,.10);
  --chart-sales:#2E9E5B; --chart-funnel:#2F6FED;
  --r:10px; --r-s:7px; --r-l:14px;
  --shadow:0 1px 2px rgba(30,28,20,.06), 0 8px 28px rgba(30,28,20,.09);
  --shadow-sm:0 1px 2px rgba(30,28,20,.08);
  --font:'Archivo',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{font-family:var(--font); color:var(--ink); background:var(--paper); font-size:13.5px; -webkit-font-smoothing:antialiased; line-height:1.5}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
a{color:var(--select); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--select); outline-offset:1px}
h1,h2,h3,h4{font-weight:700; line-height:1.25}
img{max-width:100%; display:block}
/* Default size for inline UI glyphs from icon(); per-context rules below override */
svg[aria-hidden="true"]{width:19px; height:19px; flex:none}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.hidden{display:none !important}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.grow{flex:1}
.row{display:flex; align-items:center; gap:10px}
.col{display:flex; flex-direction:column; gap:10px}
.wrap{flex-wrap:wrap}
.gap-s{gap:6px}.gap-l{gap:18px}
.mt{margin-top:12px}.mt-l{margin-top:22px}.mb{margin-bottom:12px}

/* ───── buttons ───── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line2); background:#FCFBF8; border-radius:var(--r-s); padding:8px 13px; font-weight:600; font-size:13px; color:var(--ink); transition:border-color .12s, background .12s; white-space:nowrap}
.btn:hover{border-color:#BDB9AC; text-decoration:none}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--action); border-color:var(--action); color:#fff}
.btn.primary:hover{background:var(--action-h); border-color:var(--action-h)}
.btn.brand{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.brand:hover{background:var(--brand-ink); border-color:var(--brand-ink)}
.btn.danger{color:var(--danger); border-color:#E5C8C8; background:#FDF7F7}
.btn.danger:hover{border-color:var(--danger)}
.btn.ghost{background:transparent; border-color:transparent}
.btn.ghost:hover{background:#F0EEE7; border-color:transparent}
.btn.sm{padding:5px 9px; font-size:12px}
.btn.lg{padding:11px 18px; font-size:14.5px}
.btn.block{width:100%}
.btn svg{width:17px; height:17px}

/* ───── segmented control ───── */
/* Segmented control: the active pill sits inset inside the frame (with its own
   rounded corners) so it never clips the frame's radius at the ends, and gets a
   brand-coloured ring so the selection reads clearly. */
.seg{position:relative; display:inline-flex; gap:3px; padding:3px; border:1px solid var(--line2); border-radius:var(--r-s); background:#EFEDE6}
/* Sliding active pill: a single element that glides between buttons (its
   position/size are set in JS from the active button's box). */
.seg-ind{position:absolute; top:0; left:0; z-index:0; opacity:0; background:var(--panel); border-radius:calc(var(--r-s) - 2px); box-shadow:inset 0 0 0 1.5px var(--brand), 0 1px 2px rgba(0,0,0,.07); transition:transform .24s cubic-bezier(.4,0,.2,1), width .24s cubic-bezier(.4,0,.2,1); pointer-events:none}
.seg button{position:relative; z-index:1; border:0; background:transparent; padding:6px 13px; font-size:12.5px; color:var(--muted); font-weight:600; border-radius:calc(var(--r-s) - 2px); transition:color .14s}
.seg button:hover:not(.on){color:var(--ink)}
.seg button.on{color:var(--brand)}
/* dashboard data swap: dim panels in place while a new range loads */
.dash-loading{opacity:.45; transition:opacity .15s; pointer-events:none}

/* ───── form controls ───── */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:13px}
.field>label{font-size:11.5px; letter-spacing:.04em; color:#55514A; font-weight:600}
.field .hint{font-size:11px; color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],input[type=search],input[type=tel],
input[type=url],select,textarea{
  width:100%; border:1px solid var(--line2); border-radius:var(--r-s); padding:9px 11px;
  background:#FCFBF8; font-size:13.5px; transition:border-color .12s, box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--select); box-shadow:0 0 0 3px var(--select-bg); outline:none}
input[type=number]{font-family:var(--mono)}
textarea{resize:vertical; min-height:80px; line-height:1.55}
input[type=color]{width:34px; height:34px; border:1px solid var(--line2); border-radius:6px; padding:2px; background:#fff; cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--faint)}
label.check{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px}
label.check input{width:auto}
.err-text{color:var(--danger); font-size:11.5px}
input.err,select.err,textarea.err{border-color:var(--danger)}

/* ───── cards & panels ───── */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm)}
.card.pad{padding:18px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.sec-title{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:10px}

/* ───── badges / pills ───── */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.02em; text-transform:uppercase}
.badge.dot::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.draft{background:#EFEDE6; color:var(--muted)}
.badge.published{background:var(--ok-bg); color:var(--ok)}
.badge.paused{background:var(--warn-bg); color:var(--warn)}
.badge.archived{background:#EAE7DF; color:var(--faint)}
.badge.paid{background:var(--ok-bg); color:var(--ok)}
.badge.held,.badge.pending{background:var(--warn-bg); color:var(--warn)}
.badge.cancelled,.badge.expired,.badge.refunded{background:var(--danger-bg); color:var(--danger)}

/* ───── tables ───── */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.tbl td{padding:11px 12px; border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:default}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr.clickable:hover{background:#F1EFE7}
.tbl td.num,.tbl th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ───── dropdown menu (replaces the constructor's "ugly" native selects) ───── */
.menu-anchor{position:relative; display:inline-block}
.menu-pop{position:absolute; z-index:200; min-width:190px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:5px; margin-top:5px; max-height:60vh; overflow:auto}
.menu-pop.right{right:0}
.menu-item{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-s); font-size:13px; color:var(--ink); white-space:nowrap}
.menu-item:hover{background:#F0EEE7}
.menu-item.on{background:var(--select-bg); color:var(--select-ink,var(--ink))}
.menu-item.danger{color:var(--danger)}
.menu-item .ic{width:16px; height:16px; opacity:.7; flex:none}
.menu-note{margin-left:auto; padding-left:14px; color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.menu-sep{height:1px; background:var(--line); margin:5px 4px}
.menu-label{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:6px 10px 3px; font-weight:700}

/* dropdown trigger that looks like a select but is fully styled by us */
.select{display:inline-flex; align-items:center; gap:8px; justify-content:space-between; border:1px solid var(--line2); background:#FCFBF8; border-radius:var(--r-s); padding:8px 11px; font-size:13.5px; min-width:120px; cursor:pointer; transition:border-color .12s}
.select:hover{border-color:#BDB9AC}
.select .chev{width:15px; height:15px; opacity:.55; flex:none}
.select .val{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* org switcher: partner number shown under the name */
.select .val .org-pid{display:block; color:var(--muted); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px}

/* ───── modal / sheet ───── */
.scrim{position:fixed; inset:0; background:rgba(30,28,20,.42); backdrop-filter:blur(2px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; animation:fade .14s ease}
.modal{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow); width:min(560px,100%); max-height:90vh; display:flex; flex-direction:column; animation:pop .16s ease}
.modal.wide{width:min(880px,100%)}
.modal-head{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px; flex:1}
.modal-body{padding:20px; overflow:auto}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--line)}
.icon-btn{width:32px; height:32px; border-radius:var(--r-s); display:grid; place-items:center; color:var(--muted)}
.icon-btn:hover{background:#F0EEE7; color:var(--ink)}
/* Back arrow: a clearly tappable button, standardised across every screen. */
.back-btn{width:34px; height:34px; border:1px solid var(--line2,#E0DCD2); background:#FAF9F5; color:var(--ink); cursor:pointer; transition:background .12s, border-color .12s, box-shadow .12s}
.back-btn:hover{background:#F0EEE7; border-color:#BDB9AC; box-shadow:0 1px 2px rgba(0,0,0,.06)}
.back-btn:active{background:#E8E5DC}
.back-btn svg{width:18px; height:18px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98)}to{opacity:1; transform:none}}

/* ───── toasts ───── */
#toasts{position:fixed; bottom:18px; right:18px; z-index:900; display:flex; flex-direction:column; gap:9px; max-width:340px}
.toast{display:flex; gap:10px; align-items:flex-start; background:var(--action); color:#fff; padding:12px 15px; border-radius:var(--r); box-shadow:var(--shadow); font-size:13px; animation:slidein .18s ease}
.toast.ok{background:var(--ok)} .toast.err{background:var(--danger)} .toast.warn{background:var(--warn)}
@keyframes slidein{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:none}}

/* ───── empty / loading ───── */
.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty .big{font-size:15px; color:var(--ink); font-weight:600; margin-bottom:6px}
.spinner{width:22px; height:22px; border:2.5px solid var(--line2); border-top-color:var(--action); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid; place-items:center; padding:60px}

/* ───── app shell ───── */
#app{min-height:100%}
.appshell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.sidebar{background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
.brandmark{display:flex; align-items:center; gap:10px; padding:16px 18px 12px; user-select:none}
.brandmark .chair{width:24px; height:24px; border-radius:7px 7px 3px 3px; background:var(--brand); position:relative; flex:none}
.brandmark .chair::after{content:""; position:absolute; left:4px; right:4px; bottom:4px; height:8px; border-radius:3px; background:rgba(255,255,255,.85)}
.brandmark b{font-weight:800; font-stretch:85%; letter-spacing:.03em; font-size:15px}
.side-div{border-top:1px solid var(--line)}
.orgswitch{margin:12px; }
.orgswitch:empty{display:none}
.navlist{flex:1; overflow:auto; padding:6px 10px}
.navlink{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-s); color:#54514A; font-weight:600; font-size:13.5px; margin-bottom:2px; cursor:pointer}
.navlink:hover{background:#F0EEE7; text-decoration:none; color:var(--ink)}
.navlink.on{background:var(--action); color:#fff}
.navlink svg{width:18px; height:18px; flex:none; opacity:.85}
.nav-sec{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:700; padding:14px 12px 5px}
.usermenu{padding:6px 11px 11px}
.content{min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:14px; padding:0 26px; height:60px; border-bottom:1px solid var(--line); background:rgba(244,243,238,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:40}
.topbar h1{font-size:19px; font-stretch:90%}
.page{padding:26px; max-width:1180px; width:100%; margin:0 auto}
.page-head{display:flex; align-items:center; gap:14px; margin-bottom:22px}
/* The page title already lives in the topbar (above the divider); drop the
   duplicated in-content heading on every screen. */
.page-head h1{display:none}
/* If a header held nothing but that (now hidden) title — no back button,
   actions or subtitle — collapse it so it leaves no empty gap. */
.page-head:not(:has(button)):not(:has(a)):not(:has(input)):not(:has(select)):not(:has(.sub)):not(:has(.badge)){display:none}
.page-head .sub{color:var(--muted); font-size:13px}

/* stat tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.tile .lbl{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.tile .val{font-family:var(--mono); font-weight:600; font-size:25px; margin-top:7px; font-variant-numeric:tabular-nums}
.tile .sub{font-size:11.5px; color:var(--muted); margin-top:3px}
.tile.tile-live{background:color-mix(in srgb, var(--brand) 9%, var(--panel)); border-color:color-mix(in srgb, var(--brand) 35%, var(--line))}
.tile.tile-live .val{color:var(--brand)}
/* Compact one-line variant: all stat tiles fit on a single row. */
.tiles--row{display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; scrollbar-width:none}
.tiles--row::-webkit-scrollbar{display:none}
.tiles--row .tile{flex:1 1 0; min-width:0; padding:12px 13px}
.tiles--row .tile .lbl{font-size:9.5px; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tiles--row .tile .val{font-size:19px; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tiles--row .tile .sub{font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Charts row: funnel at 1/3 width, the rest left for a future chart. */
.dash-charts-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start}
.dash-charts-row .funnel-card{grid-column:span 1}

/* Conversion funnel: 5 decreasing bars, percent relative to the first. */
.funnel-host{padding:16px}
.funnel-bars{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:end; height:240px}
.funnel-col{display:flex; flex-direction:column; align-items:center; height:100%}
.funnel-col .funnel-val{font-family:var(--mono); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; margin-bottom:6px}
.funnel-track{flex:1; width:100%; display:flex; align-items:flex-end; min-height:0}
.funnel-fill{width:100%; background:var(--chart-funnel); border-radius:6px 6px 0 0; min-height:2px; transition:height .25s ease}
.funnel-col .funnel-pct{font-family:var(--mono); font-weight:600; font-size:12px; margin-top:6px}
.funnel-col .funnel-lbl{font-size:10px; color:var(--muted); text-align:center; margin-top:3px; line-height:1.2}
@media(max-width:980px){.dash-charts-row{grid-template-columns:1fr}}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-form{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media(max-width:820px){.grid2,.grid-form{grid-template-columns:1fr}}

/* ───── responsive: collapse sidebar on mobile ───── */
.menu-toggle{display:none}
@media(max-width:860px){
  .appshell{grid-template-columns:1fr}
  .sidebar{position:fixed; z-index:600; transform:translateX(-100%); transition:transform .2s; width:256px; box-shadow:var(--shadow)}
  .sidebar.open{transform:none}
  .menu-toggle{display:grid}
  .page{padding:18px}
  .topbar{padding:0 16px}
}

/* ───── RTL (right-to-left languages) ─────
   Setting <html dir="rtl"> flips the inline axis automatically (grid columns,
   text, flex), so the sidebar lands on the right. These rules fix the few
   places that use physical (left/right) properties. */
[dir=rtl] .sidebar{border-right:0; border-left:1px solid var(--line)}
[dir=rtl] .right{text-align:left}
[dir=rtl] #toasts{right:auto; left:18px}
@media(max-width:860px){
  [dir=rtl] .sidebar{transform:translateX(100%)}
  [dir=rtl] .sidebar.open{transform:none}
}
/* brief green outline confirming an inline save */
.ok-flash{outline:2px solid var(--ok); transition:outline .2s}

/* per-language localization editor: source (ru) on the left, override on the right */
.loc-grid{display:flex; flex-direction:column; gap:10px}
.loc-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; padding:8px 0; border-top:1px solid var(--line)}
.loc-row:first-child{border-top:0}
.loc-src{min-width:0; font-size:13px; line-height:1.4}
.loc-key{font-size:10.5px; color:var(--muted); margin-bottom:2px; word-break:break-all}
.loc-inp{width:100%; font-size:13px}
textarea.loc-inp{resize:vertical; min-height:38px; font-family:inherit}
@media(max-width:680px){.loc-row{grid-template-columns:1fr}}

/* ============================================================
   Storefront ("Афиша") — public buyer catalog (light, rounded)
   Cards overlay their text directly on the poster image, with a
   per-event light/dark text mode for legibility on any artwork.
   ============================================================ */
.store{max-width:1240px; margin:0 auto; padding:0 20px 80px; background:var(--paper)}

/* ---- top navigation (sticky) ---- */
.store-nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  padding:14px 0; background:linear-gradient(var(--paper) 80%, transparent); flex-wrap:wrap}
.store-brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--ink); text-decoration:none; flex:none}
.store-brand:hover{text-decoration:none}
.store-brand .chair{width:22px; height:22px}
.store-logo{height:26px; width:auto; max-width:120px; object-fit:contain; display:block; flex:none}
/* smaller search — no longer the dominant element of the nav */
.store-search{display:flex; align-items:center; gap:8px; flex:0 1 320px; min-width:160px; background:var(--panel);
  border:1px solid var(--line2); border-radius:99px; padding:7px 14px; color:var(--muted); transition:border-color .12s, box-shadow .12s}
.store-search:focus-within{border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.store-search svg{width:16px; height:16px; flex:none}
.store-search input{border:0; background:none; padding:0; width:100%; font-size:13.5px; color:var(--ink)}
.store-search input:focus{outline:none; box-shadow:none}
.store-nav-tools{display:flex; align-items:center; gap:10px; flex:none; margin-left:auto}
.store-login{flex:none; border-radius:99px}
.store-user{display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line2); color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s}
.store-user:hover{border-color:var(--ink)}
.store-user svg{width:20px; height:20px}

/* ---- genre buttons (primary category navigation) ---- */
.store-cats{display:flex; flex-wrap:wrap; gap:9px; padding:6px 0 16px}
.store-chip{border:1px solid var(--line2); background:var(--panel); border-radius:99px; padding:8px 16px;
  font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .12s}
.store-chip:hover{border-color:#BDB9AC; color:var(--ink)}
.store-chip.on{background:var(--action); border-color:var(--action); color:#fff}

/* ---- promo banner carousel — full event cards, crossfade ("наплыв") ---- */
.store-banner{position:relative; border-radius:var(--r-l); overflow:hidden; margin:4px 0 26px; box-shadow:var(--shadow-sm)}
.store-banner-stage{position:relative; width:100%; aspect-ratio:1600/520} /* tall hero so the full event card breathes */
.store-banner-slide{position:absolute; inset:0; display:block; text-decoration:none; color:inherit;
  opacity:0; visibility:hidden; transition:opacity .7s ease; pointer-events:none}
.store-banner-slide.on{opacity:1; visibility:visible; pointer-events:auto}
.store-banner-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.9); border:0; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm)}
.store-banner-nav:hover{background:#fff}
.store-banner-nav svg{width:20px; height:20px}
.store-banner-nav.prev{left:14px} .store-banner-nav.next{right:14px}
.store-banner-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:7px}
.store-banner-dots button{width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0; transition:all .15s}
.store-banner-dots button.on{background:#fff; width:22px; border-radius:99px}

/* ---- section heading ---- */
.store-section{margin:8px 0 14px}
.store-section h2{font-size:22px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:baseline; gap:9px}
.store-section h2 .muted{font-size:15px; font-weight:600}

/* ---- two large featured cards (identical) ---- */
.store-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:2px 0 30px}

/* ---- vertical card grid ---- */
.store-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px}

/* ---- event card: text overlaid on the poster image ---- */
.ev-card{position:relative; display:block; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-sm);
  color:inherit; text-decoration:none; cursor:pointer; aspect-ratio:3/4; isolation:isolate;
  transition:transform .14s, box-shadow .14s}
.ev-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none}
.ev-poster{position:absolute; inset:0; z-index:0; background:#ECEAE2 center/cover no-repeat; transition:transform .35s}
.ev-card:hover .ev-poster{transform:scale(1.05)}
.ev-poster--ph{display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand-ink))}
.ev-poster--ph svg{width:44px; height:44px; color:rgba(255,255,255,.45)}

/* gradient scrims tuned per text mode so text stays readable on any artwork */
.ev-card::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; transition:opacity .2s}
.ev-card--lighttext::before{background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.82) 100%)}
.ev-card--darktext::before{background:linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 56%, rgba(255,255,255,.92) 100%)}

/* top badge row */
.ev-top{position:absolute; top:0; left:0; right:0; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; padding:12px 12px 0; pointer-events:none}
.ev-badges{display:flex; flex-wrap:wrap; gap:6px}
.ev-type{display:inline-block; background:rgba(255,255,255,.94); color:var(--ink); font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:99px; backdrop-filter:blur(4px); box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ev-age{display:inline-block; background:rgba(0,0,0,.5); color:#fff; font-size:11px; font-weight:700; padding:3px 7px; border-radius:6px; backdrop-filter:blur(4px)}

/* like button (top-right) */
.ev-like{position:absolute; top:11px; right:11px; z-index:4; display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; border:0; background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.18); transition:transform .12s, color .12s}
.ev-like:hover{transform:scale(1.08)}
.ev-like.on{color:var(--brand)}
.ev-like svg{width:20px; height:20px}

/* bottom overlay carrying the textual content */
.ev-overlay{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; gap:6px; padding:16px 16px 16px}
.ev-title{font-weight:800; font-size:17px; line-height:1.22; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ev-sub{font-size:12.5px; line-height:1.3; opacity:.9; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
/* prominent, year/time-free date block: big day number + month/weekday */
.ev-dateblock{display:inline-flex; align-items:center; gap:8px; margin-bottom:3px; line-height:1}
.ev-dateblock .d{font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:.86}
.ev-dateblock .mw{display:flex; flex-direction:column; gap:1px}
.ev-dateblock .mo{font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.05em}
.ev-dateblock .wd{font-size:11px; font-weight:600; opacity:.8; text-transform:capitalize}
.ev-dateblock--text .dt{font-size:17px; font-weight:800; letter-spacing:-.01em}
.ev-meta{display:flex; flex-direction:column; gap:3px; margin-top:1px}
.ev-venue{display:flex; align-items:center; gap:7px; font-size:12.5px; opacity:.88}
.ev-venue svg{width:14px; height:14px; flex:none; opacity:.85}
.ev-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:8px}
.ev-price{font-size:12.5px; opacity:.9}
.ev-price b{font-weight:800; font-size:15.5px; opacity:1}
.ev-actions{display:flex; align-items:center; gap:8px}
.ev-buy svg{width:15px; height:15px}

/* --- text modes: white text on dark scrim vs black text on light scrim --- */
.ev-card--lighttext, .store-banner-slide.ev-card--lighttext{color:#fff}
.ev-card--lighttext .ev-sub, .ev-card--lighttext .ev-venue, .ev-card--lighttext .ev-price{color:rgba(255,255,255,.92)}
.ev-card--lighttext .ev-dateblock .d{color:#fff}
.ev-card--lighttext .ev-more{border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.08)}
.ev-card--lighttext .ev-more:hover{background:rgba(255,255,255,.18)}
.ev-card--darktext, .store-banner-slide.ev-card--darktext{color:var(--ink)}
.ev-card--darktext .ev-sub, .ev-card--darktext .ev-venue, .ev-card--darktext .ev-price{color:#3a3d44}
.ev-card--darktext .ev-dateblock .d{color:var(--brand)}
.ev-card--darktext .ev-more{border-color:rgba(0,0,0,.28); color:var(--ink); background:rgba(255,255,255,.5)}
.ev-card--darktext .ev-more:hover{background:#fff}

/* ---- big featured card = horizontal poster (uses wide image) ---- */
.ev-card--big{aspect-ratio:16/7}
.ev-card--big .ev-overlay{padding:22px 24px 22px; gap:8px; max-width:72%}
.ev-card--big .ev-title{font-size:26px; -webkit-line-clamp:2}
.ev-card--big .ev-sub{font-size:14px; -webkit-line-clamp:2}
.ev-card--big .ev-dateblock .d{font-size:42px}
.ev-card--big .ev-dateblock .mo{font-size:16px}
.ev-card--big.ev-card--lighttext::before{background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 80%)}
.ev-card--big.ev-card--darktext::before{background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 80%)}

/* ---- banner slides reuse the card overlay styling ---- */
.store-banner-slide .ev-overlay{padding:24px 28px 26px; gap:9px; max-width:68%}
.store-banner-slide .ev-title{font-size:clamp(20px,2.6vw,30px); -webkit-line-clamp:2}
.store-banner-slide .ev-sub{font-size:14px; -webkit-line-clamp:2}
.store-banner-slide .ev-dateblock .d{font-size:clamp(36px,4vw,48px)}
.store-banner-slide .ev-dateblock .mo{font-size:16px}
.store-banner-slide.ev-card--lighttext::before{background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 80%)}
.store-banner-slide.ev-card--darktext::before{background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 80%)}
.store-banner-slide::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none}
.store-banner-slide .ev-poster{position:absolute; inset:0; z-index:0; background:#ECEAE2 center/cover no-repeat}

/* ---- footer ---- */
.store-footer{margin-top:60px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; align-items:center; flex-wrap:wrap; gap:18px 28px}
.store-footer-brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; color:var(--ink)}
.store-footer-brand .chair{width:20px; height:20px}
.store-footer-links{display:flex; flex-wrap:wrap; gap:8px 22px; flex:1}
.store-footer-links a{font-size:14px; color:var(--muted); text-decoration:none}
.store-footer-links a:hover{color:var(--ink)}
.store-footer-copy{font-size:13px; color:var(--muted)}

/* ---- responsive ---- */
@media(max-width:860px){
  .store-hero-grid{grid-template-columns:1fr}
  .ev-card--big{aspect-ratio:16/9}
  .store-banner-stage{aspect-ratio:16/9}
}
@media(max-width:640px){
  .store{padding:0 14px 60px}
  .store-nav{gap:10px}
  .store-search{order:3; flex-basis:100%; min-width:0}
  .store-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
  .store-banner-slide .ev-overlay, .ev-card--big .ev-overlay{max-width:100%}
  .ev-title{font-size:15px}
  .ev-card--big .ev-title, .store-banner-slide .ev-title{font-size:20px}
  .ev-dateblock .d{font-size:28px}
  .ev-card--big .ev-dateblock .d, .store-banner-slide .ev-dateblock .d{font-size:34px}
  .ev-actions .ev-more{display:none}
  .store-footer{flex-direction:column; align-items:flex-start}
}

/* ============================================================
   Buyer flow — responsive two-column layout (map + sticky cart)
   ============================================================ */
.ev-hero{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start}
@media(max-width:720px){ .ev-hero{grid-template-columns:1fr} .ev-hero .card{min-width:0 !important; width:100%} }
.buy-2col{display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start}
.buy-side{position:sticky; top:16px}
.seatwrap{height:62vh; position:relative; background:radial-gradient(var(--grid-dot) 1px,transparent 1px); background-size:18px 18px}
.seatwrap canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none}
@media(max-width:820px){
  .buy-2col{grid-template-columns:1fr}
  .buy-side{position:static}
  .seatwrap{height:72vh}
}

/* ---- analytics dashboard ---- */
.dash-range{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.seg-sm button{padding:5px 11px; font-size:11.5px}
.seg-btn.seg-period{min-width:134px; justify-content:center; text-align:center}
.period-pop{display:flex; flex-direction:column; gap:10px; padding:13px; min-width:220px}
.period-pop label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; letter-spacing:.04em; color:#55514A; font-weight:600}
.period-pop input[type=date]{padding:7px 9px; font-size:13px}
.period-pop .period-apply{width:100%; margin-top:2px}
.dash-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; min-height:33px; border-bottom:1px solid var(--line); flex-wrap:wrap; box-sizing:content-box}
.dash-chart .chart-host{padding:16px}
/* Bar chart: left y-axis scale + plot with horizontal gridlines. */
.chart{display:flex; align-items:flex-start; gap:9px}
.chart-yaxis{flex:0 0 auto; height:200px; display:flex; flex-direction:column; justify-content:space-between;
  text-align:right; font-family:var(--mono); font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums}
.chart-yaxis span{line-height:1; transform:translateY(-50%)}
.chart-yaxis span:first-child{transform:translateY(0)}
.chart-yaxis span:last-child{transform:translateY(50%)}
.chart-plot{flex:1 1 auto; min-width:0; position:relative}
.chart-grid{position:absolute; left:0; right:0; top:0; height:200px; pointer-events:none;
  background-image:repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25%)}
.chart-bars{display:flex; align-items:flex-end; gap:3px; overflow:visible; position:relative}
.chart-col{flex:1 1 0; display:flex; flex-direction:column; align-items:center; min-width:0}
.chart-barwrap{height:200px; width:100%; display:flex; align-items:flex-end; position:relative}
.chart-bar-fill{position:relative; width:100%; background:var(--chart-sales); border-radius:3px 3px 0 0; min-height:2px; transition:height .25s}
.chart-bar-fill.is-future{background:transparent}
.chart-col:hover .chart-bar-fill:not(.is-future){filter:brightness(1.08)}
.chart-bar-val{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:3px;
  font-family:var(--mono); font-size:10px; font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.chart-x{font-size:10px; color:var(--muted); margin-top:5px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:100%}
.chart-x--future{color:var(--faint); opacity:.6}
.dash-cols .card{display:flex; flex-direction:column}
.dash-list{display:flex; flex-direction:column}
.dash-row{display:flex; align-items:center; gap:11px; padding:9px 14px; border-bottom:1px solid var(--line)}
.dash-row:last-child{border-bottom:0}
.dash-row.clickable{cursor:pointer}
.dash-row.clickable:hover{background:var(--hover,#F4F2EC)}
.dash-rank{flex:0 0 22px; text-align:center; font-family:var(--mono); font-weight:700; color:var(--muted); font-size:13px}
.dash-thumb{flex:0 0 38px; width:38px; height:54px; object-fit:cover; border-radius:6px; background:#E7E4DC}
.dash-thumb--ph{background:linear-gradient(135deg,#E7E4DC,#D8D4C9)}
.dash-meta{flex:1 1 auto; min-width:0}
.dash-name{font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dash-sub{font-size:11.5px; color:var(--muted); margin-top:1px}
.dash-val{flex:0 0 auto; font-family:var(--mono); font-weight:600; font-size:13px; text-align:right; font-variant-numeric:tabular-nums}
@media(max-width:820px){.chart-yaxis,.chart-grid,.chart-barwrap{height:150px}}

/* ---- platform-admin nav tree (Мероприятия → Архив/Черновики/Корзина) ---- */
.nav-tree{margin-bottom:2px}
.nav-tree .navlink{margin-bottom:0}
.nav-exp{margin-left:auto; display:grid; place-items:center; width:22px; height:22px; border-radius:5px; background:transparent; border:0; color:inherit; cursor:pointer; opacity:.7}
.nav-exp:hover{background:rgba(0,0,0,.06); opacity:1}
.nav-exp svg{width:14px; height:14px; transition:transform .15s}
.nav-tree.open .nav-exp svg{transform:rotate(180deg)}
/* Smoothly slide the sub-menu open/closed via grid-template-rows (0fr↔1fr),
   which animates an unknown content height. The inner wrapper is clipped. */
.nav-sub{display:grid; grid-template-rows:0fr; padding-left:30px; transition:grid-template-rows .22s ease}
.nav-tree.open .nav-sub{grid-template-rows:1fr}
.nav-sub-inner{overflow:hidden; min-height:0; padding:2px 0 4px}
.navlink.sub{padding:7px 11px; font-size:13px; font-weight:500; color:#6B675E}
.navlink.sub.on{background:var(--brand); color:#fff}

/* ---- platform-admin events command-centre table ---- */
.events-tbl .ev-thumb{width:46px; height:62px; border-radius:6px; background:#EFEDE6 center/cover no-repeat; flex:none}
.events-tbl .ev-thumb.ph{display:grid; place-items:center; color:var(--faint)}
.events-tbl .ev-thumb.ph svg{width:20px; height:20px}
.events-tbl .ev-name{font-size:14px; display:block; margin-bottom:2px}
.events-tbl .ev-sub{font-size:11.5px; margin-bottom:3px}
.occ-bar{height:6px; background:#EFEDE6; border-radius:3px; overflow:hidden; display:flex}
.occ-fill{height:100%; background:var(--ok)}
.occ-comp{height:100%; background:var(--warn)}
/* two-line fraction cell: sold (green) over total/gross (grey) */
.frac-top{color:var(--ok); font-weight:600}
.frac-bot{color:var(--muted); font-size:11px}
/* inline pause/start control in the events list; play (resume) stands out */
.sales-toggle.is-paused{color:var(--brand)}

/* ---- event workspace: secondary nav (underline tabs under the header) ---- */
.ev-subnav{display:flex; gap:2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin-bottom:18px}
.ev-subnav::-webkit-scrollbar{display:none}
.ev-subnav button{flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; padding:10px 11px; border:0; background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0; transition:color .12s, border-color .12s}
.ev-subnav button:hover{color:var(--ink)}
.ev-subnav button.on{color:var(--ink); border-bottom-color:var(--brand)}
.ev-subnav button svg{width:18px; height:18px}
.ev-subnav .ev-sales{border-bottom-color:transparent}
.ev-subnav .ev-sales.stop{color:var(--brand)}
.ev-subnav .ev-sales.stop:hover{color:var(--brand); filter:brightness(.88)}
.ev-subnav .ev-sales.start{color:var(--ok)}
.ev-subnav .ev-sales.start:hover{color:var(--ok); filter:brightness(.9)}

/* ---- multilingual event-card tabs ---- */
.langtabs{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.langtab{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; border:1.5px solid #D7D3C8; background:#fff; color:#4A463E; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .12s, box-shadow .12s}
.langtab .dot{width:8px; height:8px; border-radius:50%; background:#C9C4B8}
.langtab.empty{border-color:#E0B4B0} .langtab.empty .dot{background:#D9534F}
.langtab.partial{border-color:#E6CE92} .langtab.partial .dot{background:#E0A800}
.langtab.full{border-color:#A9CFA0} .langtab.full .dot{background:#3D9A50}
.langtab.active{box-shadow:0 0 0 2px var(--brand) inset; border-color:var(--brand)}
.langcard .ml-hint{font-size:12px; color:var(--faint); margin-top:6px}