:root {
  color-scheme: dark;
  --background: #0e0b14;
  --panel: #18131f;
  --panel-light: #211a2c;
  --text: #f6f2fb;
  --muted: #aaa0b7;
  --border: rgba(255, 255, 255, 0.09);
  --orange: #ff7a1a;
  --orange-light: #ff9d52;
  --purple: #6f42d9;
  --purple-light: #9b76f2;
  --danger: #e34b5f;
  --radius: 18px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

body { margin: 0; color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }

.landing-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 0%, rgba(111, 66, 217, 0.26), transparent 34rem),
    radial-gradient(circle at 10% 100%, rgba(255, 122, 26, 0.16), transparent 32rem),
    var(--background);
}
.landing-topbar {
  min-height: 72px;
  padding: 14px max(24px, calc((100% - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
}
.landing-brand { display: flex; align-items: center; color: var(--text); text-decoration: none; font-size: 18px; font-weight: 800; }
.landing-login { padding: 9px 13px; color: #cbb9f8; background: rgba(111, 66, 217, 0.12); border: 1px solid rgba(155, 118, 242, 0.34); border-radius: 10px; font-size: 13px; font-weight: 750; text-decoration: none; }
.landing-login:hover { color: var(--text); border-color: var(--purple-light); }
.landing-login[hidden], .landing-account[hidden] { display: none; }
.landing-account { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; }
.landing-account:hover { border-color: var(--purple-light); }
.landing-account img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: var(--panel-light); }
.landing-account > span { display: grid; gap: 1px; }
.landing-account strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.landing-account small { color: var(--muted); font-size: 11px; }
.landing-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 88px 0 70px; }
.landing-hero { max-width: 880px; }
.landing-hero h1 { margin: 14px 0 22px; font-size: clamp(42px, 7vw, 76px); letter-spacing: -0.045em; line-height: 1.02; }
.landing-hero > p { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(18px, 2.3vw, 23px); line-height: 1.55; }
.landing-actions { margin: 32px 0 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.landing-actions .button { min-height: 50px; padding-inline: 22px; }
.landing-hero > small { color: #776d82; }
.landing-footer { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:24px 0 36px; display:flex; align-items:center; gap:18px; color:#756b7d; border-top:1px solid var(--border); font-size:13px; }
.landing-footer span { margin-right:auto; font-weight:800; }
.landing-footer a { color:#b9a8c5; text-decoration:none; }
.landing-footer a:hover { color:#fff; }
.landing-steps { margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing-steps article { padding: 22px; background: rgba(24, 19, 31, 0.78); border: 1px solid var(--border); border-radius: 16px; }
.landing-steps article > span { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 18px; color: #180c03; background: var(--orange); border-radius: 9px; font-weight: 900; }
.landing-steps strong { font-size: 17px; }
.landing-steps p { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }
.landing-capabilities { margin-top:72px; }
.landing-section-heading { max-width:840px; }
.landing-section-heading h2 { margin:10px 0 12px; font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-.035em; }
.landing-section-heading > p { max-width:690px; margin:0; color:#a99db3; font-size:17px; line-height:1.5; }
.landing-capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:24px; }
.capability-card { position:relative; display:flex; gap:15px; min-height:180px; padding:22px; overflow:hidden; border:1px solid #392c43; border-radius:18px; background:linear-gradient(145deg,#181220,#100d16); box-shadow:0 18px 48px rgba(0,0,0,.2); }
.capability-card::after { content:""; position:absolute; right:-60px; bottom:-80px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(134,73,211,.13),transparent 66%); pointer-events:none; }
.capability-card > span { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:1px solid #6f478d; border-radius:13px; color:#d8b9f8; background:#261a30; font-size:13px; font-weight:950; }
.capability-card > div { position:relative; z-index:1; display:grid; align-content:start; gap:8px; min-width:0; }
.capability-card strong { font-size:19px; line-height:1.2; }
.capability-card p { margin:0; color:#aaa0b7; line-height:1.5; }
.capability-card small { width:max-content; max-width:100%; padding:5px 8px; overflow:hidden; border-radius:999px; color:#d8cce0; background:#271d2e; font-size:9px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.capability-card-primary,.capability-card-device { border-color:#71469a; background:linear-gradient(145deg,rgba(255,122,26,.1),rgba(124,70,194,.1)),#15101b; }
.capability-card-primary > span,.capability-card-device > span { border-color:#ff9553; color:#1a0b03; background:linear-gradient(135deg,#ff7a1a,#ffa568); }

.control-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 0%, rgba(111, 66, 217, 0.18), transparent 28rem),
    radial-gradient(circle at 0% 100%, rgba(255, 122, 26, 0.12), transparent 30rem),
    var(--background);
}

.topbar {
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(14, 11, 20, 0.8);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 9px;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(145deg, var(--orange), var(--purple));
  box-shadow: 0 7px 22px rgba(111, 66, 217, 0.32);
}

.brand-name { font-size: 18px; font-weight: 750; vertical-align: middle; }
.connection { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.connection span:first-child { width: 9px; height: 9px; border-radius: 50%; background: #c49332; }
.connection span.online { background: #45c985; box-shadow: 0 0 12px rgba(69, 201, 133, 0.7); }
.connection span.offline { background: var(--danger); }

.control-shell {
  width: min(1500px, calc(100% - 48px));
  margin: 24px auto;
}

.control-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(500px, 1.28fr);
  gap: 20px;
  align-items: start;
}

.setup-strip {
  margin-bottom: 20px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: minmax(180px,.6fr) minmax(520px,1.55fr) minmax(360px,1fr);
  gap: 16px;
  align-items: center;
  background: rgba(24, 19, 31, 0.92);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.setup-intro { display: grid; gap: 5px; }
.setup-intro strong { font-size: 17px; }
.setup-step { min-width:0; min-height: 48px; display: flex; align-items: center; gap: 11px; }
.setup-step > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 9px; color: #160b03; background: var(--orange); font-weight: 900; }
.setup-step div { display: grid; gap: 4px; }
.setup-step small { color: var(--muted); }
.setup-step a, .setup-step button { color: #cbb9f8; cursor: pointer; }
.setup-step-copy, .setup-step .setup-share-copy { min-width: 0; width: 100%; align-self: start; }
.setup-step-actions .setup-step-copy { width: 100%; }
.setup-step-actions, .setup-step-share { align-items: flex-start; }
.setup-step .setup-button-stack { min-width:0; width: min(176px,100%); margin-top: 4px; display: grid; gap: 6px; }
.setup-step-obs .setup-step-copy { display:grid; grid-template-columns:max-content minmax(120px,1fr) auto; align-items:center; gap:7px 10px; }
.setup-step-obs .setup-step-copy > strong { white-space:nowrap; }
.setup-step-obs .setup-button-stack { width:auto; margin:0; display:flex; gap:6px; }
.setup-step-obs .setup-action-button { width:auto; min-width:116px; }
.setup-step-share .setup-button-stack { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
.setup-step .setup-action-button {
  width: 100%; min-height: 31px; box-sizing: border-box; padding: 6px 10px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #493c59; border-radius: 8px; color: #ded3e6; background: #211929;
  font: 750 11px/1.2 Inter,"Segoe UI",sans-serif; text-align: center; text-decoration: none; white-space: nowrap;
}

.brand-lockup { display:inline-flex; align-items:center; gap:11px; }
.brand-symbol {
  width:40px; height:40px; flex:0 0 auto; display:block;
  filter:drop-shadow(0 7px 15px rgba(126,50,216,.28));
}
.brand-wordmark { display:grid; justify-items:start; gap:4px; color:#fff8f2; font-family:Inter,"Segoe UI",Arial,sans-serif; line-height:1; }
.brand-wordmark strong { font-size:16px; font-weight:950; letter-spacing:.17em; }
.brand-wordmark small { color:#bd73ff; font-size:7px; font-weight:900; letter-spacing:.34em; }
.brand-wordmark.auth-wordmark { justify-items:center; margin-bottom:4px; }
.brand-wordmark.auth-wordmark strong { font-size:17px; }
.brand-wordmark.auth-wordmark small { font-size:8px; }
.brand-symbol.auth-brand { width:74px; height:74px; margin:0 auto 16px; }
.brand-symbol-large { width:82px; height:82px; margin-bottom:8px; }
.setup-step .setup-action-button:hover { border-color: #80669a; color: #fff; background: #2a2033; }
.setup-step .setup-action-button-primary { border-color: rgba(255,122,26,.58); color: #ffd0ad; background: rgba(255,122,26,.12); }
.setup-step .setup-action-button-primary.active { border-color: #74d7a4; color: #a9f1ca; background: rgba(54,171,111,.12); }
.setup-step .setup-action-button:disabled { opacity: .55; cursor: wait; }
.setup-step .obs-size-note { grid-column:1/3; margin-top:1px; display:block; max-width:100%; color:#d8cadd; font-size:12px; line-height:1.42; }
.setup-step .obs-size-note b { color:#fff; }
.obs-status { grid-column:3; grid-row:2; min-height:28px; padding:5px 9px; display:inline-flex!important; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(255,126,139,.46); border-radius:999px; color:#ff9aa5; background:rgba(196,57,75,.14); font-size:11px!important; font-weight:900; white-space:nowrap; }
.obs-status i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }
.obs-status[data-state="connected"] { color:#77e5a7; border-color:rgba(73,201,134,.4); background:rgba(54,171,111,.1); }

.activity-toolbar { margin-bottom: 20px; padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; border: 1px solid var(--border); border-radius: 15px; background: rgba(24, 19, 31, .9); }
.studio-layer-controls { display:grid; grid-template-columns:1fr minmax(330px,auto) 1fr; align-items:center; gap:18px; }
.studio-layer-controls .activity-current { grid-column:1; }
.studio-layer-controls .pet-quick-card { grid-column:2; justify-self:center; }
.studio-layer-controls { min-width: 0; display: flex; align-items: center; gap: 12px; }
.activity-current, .activity-tools { display: flex; align-items: center; gap: 11px; }
.activity-current > div { display: grid; gap: 2px; }
.activity-current small { color: var(--muted); font-size: 11px; }
.activity-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #1b0d04; background: var(--orange); font-weight: 950; }
.activity-current .button { min-height: 36px; margin-left: 7px; padding: 7px 11px; font-size: 12px; }
.test-mode-menu { position: relative; }
.test-mode-menu summary { padding: 8px 11px; list-style: none; color: #cbb9f8; border: 1px solid rgba(155,118,242,.3); border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 750; }
.test-mode-menu summary::-webkit-details-marker { display: none; }
.test-mode-menu[open] .integration-toggle { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(330px, 80vw); padding: 14px; background: #211a2c; border: 1px solid rgba(155,118,242,.38); border-radius: 12px; box-shadow: 0 18px 55px rgba(0,0,0,.45); }
.activity-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.activity-card { min-height: 180px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--text); text-align: left; background: var(--panel-light); border: 1px solid var(--border); border-radius: 15px; }
.activity-card > span { display: grid; place-items: center; width: 38px; height: 38px; color: #190c02; background: var(--orange); border-radius: 10px; font-weight: 900; }
.activity-card small { color: var(--muted); line-height: 1.4; }
.activity-card em { margin-top: auto; color: var(--purple-light); font-size: 11px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.activity-card.selected { border-color: rgba(255,122,26,.55); }
.activity-card:disabled { opacity: .6; }
.activity-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.pet-quick-card { min-width: 360px; padding:0 13px; display: flex; align-items: center; gap: 10px; border-inline: 1px solid var(--border); }
.pet-quick-card > div { min-width: 120px; display: grid; gap: 1px; }
.pet-quick-card small, .pet-quick-card em { color: var(--muted); font-size: 10px; font-style: normal; }
.pet-quick-card em { color: var(--purple-light); }
.pet-quick-icon { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 13px; background: radial-gradient(circle,#3b224b,#17101e); box-shadow: 0 0 18px rgba(255,122,26,.22); }
.pet-quick-icon img { width: 100%; height: 100%; object-fit: contain; }
.pet-thresholds { margin: 0 0 18px; padding: 15px; display: grid; gap: 13px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.025); }
.pet-thresholds p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.pet-threshold-inputs { display: grid; grid-template-columns: repeat(3,minmax(120px,1fr)) auto; gap: 9px; align-items: end; }
.pet-threshold-inputs label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.pet-threshold-inputs label div { position: relative; }.pet-threshold-inputs input { width:100%; padding-right:32px; }.pet-threshold-inputs em { position:absolute; right:11px; top:50%; transform:translateY(-50%); font-style:normal; }
.pet-threshold-submit { display: grid; gap: 5px; }
.pet-threshold-submit > span { visibility: hidden; font-size: 12px; }
.pet-threshold-submit .button { min-height: 43px; }
.pet-animation-preview { margin: 0 0 18px; padding: 15px; display: grid; grid-template-columns: minmax(170px,1fr) 2fr auto; align-items: center; gap: 13px; border: 1px solid rgba(155,118,242,.35); border-radius: 13px; background: linear-gradient(135deg,rgba(111,66,217,.1),rgba(255,122,26,.045)); }
.pet-animation-preview p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.pet-preview-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.pet-preview-actions .button { min-height: 38px; padding: 7px 10px; font-size: 12px; }
.inline-error { display:block; margin-top:9px; color:#ff8494; }
.pet-quick-card .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.pet-dialog { width: min(920px, calc(100% - 28px)); }
.pet-active-summary { margin: 20px 0; padding: 14px; display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 14px; border: 1px solid rgba(255,122,26,.35); border-radius: 14px; background: linear-gradient(135deg,rgba(111,66,217,.12),rgba(255,122,26,.08)); }
.pet-active-summary > img { width: 76px; height: 76px; object-fit: contain; }
.pet-active-summary > div:not(.pet-dialog-actions) { display: grid; gap: 3px; }
.pet-active-summary small, .pet-active-summary span { color: var(--muted); }
.pet-rename-row { margin: -6px 0 18px; padding: 13px 14px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.pet-rename-row label { display: grid; gap: 6px; }
.pet-rename-row label span { color: var(--muted); font-size: 12px; }
.pet-dialog-actions { display: flex; gap: 8px; }
.pet-catalog { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.pet-catalog-card { min-height: 240px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--text); text-align: left; border: 1px solid var(--border); border-radius: 15px; background: var(--panel-light); }
.pet-catalog-card:not(:disabled):hover { border-color: rgba(255,122,26,.55); transform: translateY(-2px); }
.pet-catalog-card.selected { border-color: rgba(255,122,26,.72); box-shadow: inset 0 0 0 1px rgba(255,122,26,.18), 0 12px 35px rgba(255,92,18,.08); }
.pet-catalog-card.selected em { color: var(--orange-light); }
.pet-catalog-card:disabled { opacity: .56; }
.pet-catalog-card small { color: var(--muted); line-height: 1.4; }
.pet-catalog-card em { margin-top: auto; color: var(--purple-light); font-size: 11px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.pet-catalog-visual { width: 100%; height: 120px; display: grid; place-items: center; border-radius: 11px; background: radial-gradient(circle,rgba(255,122,26,.16),rgba(111,66,217,.08),transparent 68%); }
.pet-catalog-visual img { width: 108px; height: 112px; object-fit: contain; }
.pet-catalog-placeholder { width: 100%; height: 120px; display: grid; place-items: center; color: var(--purple-light); font-size: 52px; border-radius: 11px; background: rgba(255,255,255,.025); }
.pet-danger-zone { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.pet-danger-zone p { margin: 5px 0 12px; color: var(--muted); }
.pet-danger-zone > div { display: flex; gap: 8px; }
.pet-danger-zone input { flex: 1; }
.studio-lower-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.studio-lower-grid .auction-history-panel { margin-top: 0; }
.payment-journal-panel { min-width: 0; }
.payment-journal-panel .provider-log-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.panel {
  padding: 26px;
  background: rgba(24, 19, 31, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.auth-gate { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: var(--background); }
.auth-gate[hidden] { display: none; }
.auth-card { width: min(430px, 100%); padding: 34px; text-align: center; background: rgba(24, 19, 31, 0.96); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4); }
.auth-brand { margin: 0 0 18px; width: 48px; height: 48px; border-radius: 14px; font-size: 20px; }
.auth-card h1 { margin: 8px 0 12px; }
.auth-card p { margin: 0 auto 22px; color: var(--muted); line-height: 1.55; }
.auth-button { width: 100%; min-height: 50px; }
.auth-card small { display: block; margin-top: 14px; color: #ff8997; line-height: 1.4; }
.auth-card small[hidden] { display: none; }
.auth-loading > .topbar, .auth-loading > .control-shell, .auth-loading > .toast,
.auth-required > .topbar, .auth-required > .control-shell, .auth-required > .toast { display: none; }

.topbar-actions { display: flex; align-items: center; gap: 16px; }
.account-chip { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 5px; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.account-chip[hidden] { display: none; }
.account-chip img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; background: var(--panel-light); }
.account-dashboard-link { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.account-dashboard-link:hover { color: var(--orange-light); }
.account-chip button { padding: 5px 7px; color: var(--muted); background: none; border: 0; cursor: pointer; font-size: 12px; }
.account-chip button:hover { color: var(--orange-light); }

.panel-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.panel-heading-actions .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.auction-history-panel { margin-top: 20px; }
.history-library-heading h2 { margin-bottom: 8px; }
.history-library-heading p { margin: 0; max-width: 820px; color: var(--muted); line-height: 1.45; }
.auction-list { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auction-record { min-width: 0; padding: 15px; display: grid; gap: 12px; background: rgba(255, 255, 255, 0.028); border: 1px solid var(--border); border-radius: 13px; }
.auction-record-top { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.auction-record-title { min-width: 0; display: grid; gap: 5px; }
.auction-record-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auction-record-title small { color: var(--muted); }
.auction-record-status { flex: 0 0 auto; padding: 5px 8px; color: var(--muted); background: var(--panel-light); border-radius: 999px; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.auction-record-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.auction-record-stats div { padding: 9px; display: grid; gap: 3px; background: rgba(255, 255, 255, 0.025); border-radius: 9px; }
.auction-record-stats span { color: var(--muted); font-size: 10px; }
.auction-record-stats strong { color: var(--orange-light); font-size: 14px; }
.auction-record-winner { overflow: hidden; color: #cbb9f8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.auction-record-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.auction-record-actions .button { min-height: 35px; padding: 7px 10px; font-size: 11px; }
.team-battle-record { align-content: start; }
.team-battle-record-result { padding: 10px 11px; overflow: hidden; display:grid; gap:3px; color: var(--orange-light); background: rgba(255, 122, 26, 0.08); border: 1px solid rgba(255, 122, 26, 0.18); border-radius: 9px; font-size: 14px; font-weight: 850; }
.team-battle-record-result small { overflow:hidden; color:var(--muted); font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.team-battle-record-result[data-result="draw"] { color:#f3e7ff; border-color:rgba(183,132,255,.34); background:rgba(145,88,215,.13); }
.team-battle-record-sides { display: grid; gap: 7px; }
.team-battle-record-sides > div { min-width: 0; padding: 10px 11px; display: grid; gap: 4px; background: rgba(255, 255, 255, 0.025); border-radius: 9px; }
.team-battle-record-sides span { overflow: hidden; color: var(--text); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.team-battle-record-sides strong { overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.show-more-history { min-width: 210px; margin: 18px auto 0; display: flex; }
.show-more-history[hidden] { display: none; }

.management-dialog, .template-editor-dialog, .archive-dialog { max-height: calc(100vh - 40px); padding: 24px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7); }
.management-dialog { width: min(1060px, calc(100% - 28px)); }
.template-editor-dialog { width: min(720px, calc(100% - 28px)); }
.archive-dialog { width: min(760px, calc(100% - 28px)); }
.management-dialog::backdrop, .template-editor-dialog::backdrop, .archive-dialog::backdrop { background: rgba(5, 3, 8, 0.78); backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dialog-heading h2 { margin-bottom: 8px; }
.dialog-heading p { margin: 0; color: var(--muted); }
.dialog-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.dialog-section-heading { margin-bottom: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-section-heading h3 { margin: 0 0 5px; font-size: 18px; }
.dialog-section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.dialog-actions .button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.template-list-heading { display: grid; grid-template-columns: 170px 1fr; gap: 9px; align-items: stretch; }
.template-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.template-record { min-width: 0; display: grid; grid-template-rows: 1fr auto; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.template-card { width: 100%; min-height: 112px; padding: 14px; display: grid; align-content: start; gap: 7px; color: var(--text); text-align: left; background: transparent; border: 0; cursor: pointer; }
.template-card:hover:not(:disabled) { background: rgba(255, 122, 26, 0.08); }
.template-card:disabled { opacity: 0.4; cursor: not-allowed; }
.template-card strong { font-size: 14px; }
.template-card span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.template-card-custom { min-height: 100%; border: 1px dashed rgba(155, 118, 242, 0.42); border-radius: 12px; background: rgba(111, 66, 217, 0.07); }
.template-record-actions { padding: 8px 10px; display: flex; gap: 12px; border-top: 1px solid var(--border); }
.text-button { padding: 0; color: #cbb9f8; background: none; border: 0; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--orange-light); }
.danger-text { color: #ff8997; }
#restore-templates { margin-top: 14px; color: var(--muted); }
.draft-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.draft-record { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(111, 66, 217, 0.07); border: 1px solid rgba(155, 118, 242, 0.2); border-radius: 11px; }
.draft-record-copy { min-width: 0; display: grid; gap: 5px; }
.draft-record-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-record-copy small { color: var(--muted); }
.draft-record .button { min-height: 34px; padding: 7px 10px; font-size: 11px; }
.draft-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.draft-delete { color: #ff8997; }
.template-editor-dialog form { margin-top: 16px; }
.template-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.template-settings-grid small { color: var(--muted); }
#add-template-lot { width: 100%; margin: 2px 0 17px; }
.archive-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.archive-dialog-heading h2 { margin-bottom: 16px; }
.archive-result-summary { margin-bottom: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.archive-result-summary div { padding: 12px; display: grid; gap: 4px; background: rgba(255, 255, 255, 0.035); border-radius: 10px; }
.archive-result-summary span { color: var(--muted); font-size: 11px; }
.archive-result-summary strong { color: var(--orange-light); }
.archive-lots { display: grid; gap: 7px; }
.archive-lot { padding: 11px 12px; display: flex; justify-content: space-between; gap: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 9px; }
.archive-lot.winner { border-color: rgba(255, 122, 26, 0.45); }
.archive-lot strong { color: var(--orange-light); }
.archive-top-donor { margin-top: 16px; padding: 14px 16px; display: grid; gap: 4px; border: 1px solid rgba(255, 122, 26, 0.38); border-radius: 12px; background: linear-gradient(135deg, rgba(255, 122, 26, 0.11), rgba(125, 76, 255, 0.09)); }
.archive-top-donor span { color: var(--orange-light); font-size: 11px; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.archive-top-donor strong { font-size: 17px; }
.archive-top-donor small { color: var(--muted); }
.archive-history-title { margin: 18px 0 9px; }

.panel-heading, .live-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

h1, h2 { margin: 4px 0 18px; line-height: 1.15; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
.eyebrow { color: var(--orange-light); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

label { display: grid; gap: 8px; margin-bottom: 17px; color: var(--muted); font-size: 14px; }
.field-title { margin-bottom: 8px; color: var(--muted); font-size: 14px; }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.toggle-field { padding: 12px; display: flex; align-items: flex-start; gap: 10px; color: var(--text); background: rgba(111, 66, 217, 0.1); border: 1px solid rgba(155, 118, 242, 0.24); border-radius: 11px; cursor: pointer; }
.toggle-field input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange); }
.toggle-field > span { display: grid; gap: 4px; }
.toggle-field small { color: var(--muted); line-height: 1.35; }
.anti-snipe-field[hidden] { display: none; }
input, textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--text);
  background: #100c16;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(111, 66, 217, 0.18); }
select {
  width: 100%;
  padding: 9px 32px 9px 10px;
  color: var(--text);
  background: #100c16;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
}
select:focus { border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(111, 66, 217, 0.18); }
select:disabled { opacity: 0.48; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.lot-input-row { display: grid; grid-template-columns: 1fr 42px; gap: 8px; margin-bottom: 8px; }
.remove-lot { border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; font-size: 24px; }
.remove-lot:hover { border-color: var(--danger); color: #ff8997; }

.button {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 750;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.button:disabled { opacity: 0.42; cursor: not-allowed; }
.button-primary { color: #160b03; background: linear-gradient(135deg, var(--orange), var(--orange-light)); }
.button-secondary { background: rgba(111, 66, 217, 0.16); border-color: rgba(155, 118, 242, 0.42); }
.button-new-run:not(:disabled) { color:#f5ebff; background:linear-gradient(135deg,rgba(111,66,217,.42),rgba(155,118,242,.24)); border-color:rgba(185,145,255,.78); box-shadow:0 0 0 1px rgba(170,120,255,.14),0 8px 22px rgba(75,38,135,.24); }
.button-new-run:not(:disabled):hover { border-color:#d2adff; background:linear-gradient(135deg,rgba(129,76,236,.54),rgba(173,129,255,.32)); }
.button-danger { background: rgba(227, 75, 95, 0.14); border-color: rgba(227, 75, 95, 0.45); }
.button-ghost { color: var(--muted); background: transparent; border-color: var(--border); }
.full-width { width: 100%; margin-top: 5px; }

/* Питомец живёт на отдельном прозрачном слое OBS и не меняет размер активности. */
.pet-overlay-page { min-height: 100vh; overflow: hidden; background: transparent; }
.pet-stage { position: relative; width: min(420px, 100vw); height: min(520px, 100vh); padding: 25px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pet-character { position: relative; width: 310px; height: 350px; display: grid; place-items: end center; transform-origin: center bottom; animation: pet-idle 3.8s ease-in-out infinite; }
.pet-character img { position: relative; z-index: 2; width: 285px; max-height: 335px; object-fit: contain; filter: drop-shadow(0 14px 10px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,91,0,.38)); image-rendering: auto; }
.pet-character[data-species="octopus"] img { width: 325px; filter: drop-shadow(0 14px 10px rgba(0,0,0,.42)) drop-shadow(0 0 20px rgba(151,92,255,.5)); }
.pet-character[data-species="cat"] img { width: 310px; filter: drop-shadow(0 14px 10px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(113,64,255,.45)); }
.pet-aura { position: absolute; z-index: 0; left: 50%; bottom: 34px; width: 230px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(127,49,220,.35), rgba(255,92,0,.16) 48%, transparent 72%); transform: translateX(-50%); animation: pet-aura 2.4s ease-in-out infinite; }
.pet-ground-glow { position: absolute; z-index: 1; left: 50%; bottom: 15px; width: 220px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,104,0,.68), rgba(112,42,196,.24) 48%, transparent 75%); transform: translateX(-50%); filter: blur(4px); }
.pet-plaque { position: relative; z-index: 4; width: 100%; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; color: #fff8f2; border: 1px solid rgba(255,122,26,.45); border-radius: 13px; background: linear-gradient(135deg, rgba(20,12,27,.91), rgba(48,23,35,.88)); box-shadow: 0 12px 35px rgba(0,0,0,.32); font-family: Inter, "Segoe UI", Arial, sans-serif; }
.pet-plaque > div { display: grid; gap: 2px; }
.pet-plaque strong { font-size: 16px; }
.pet-plaque span { color: #cdbed4; font-size: 11px; }
.pet-plaque > span { align-self: center; color: #ffae70; font-weight: 800; }
.pet-progress { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.pet-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7844de,#ff7518,#ffd15a); transition: width .45s ease; }
.pet-reaction { position: absolute; z-index: 8; top: 8px; left: 50%; width: max-content; max-width: 390px; padding: 12px 17px; color: #fff; text-align: center; font: 850 16px/1.32 Inter,"Segoe UI",Arial,sans-serif; border: 1px solid rgba(255,174,112,.68); border-radius: 14px; background: linear-gradient(135deg,rgba(24,12,31,.96),rgba(49,22,39,.94)); box-shadow:0 10px 28px rgba(0,0,0,.36),0 0 22px rgba(255,122,26,.18); opacity: 0; transform: translate(-50%, 12px) scale(.92); transition: .24s ease; }
.pet-reaction.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pet-character[data-reaction="reset"] { animation: pet-reset 1.4s ease; }
.pet-character[data-reaction="sleep"] { animation: pet-sleep 4.8s ease-in-out infinite; filter: brightness(.7) saturate(.7); }
.pet-rig { position:relative; z-index:2; width:100%; height:100%; }
.pet-pose,.pet-effects { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.pet-pose { z-index:2; opacity:0; transition:opacity .11s linear; filter:drop-shadow(0 14px 10px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,91,0,.38)); }
.pet-pose-visible { opacity:1; }
.pet-effects { z-index:5; }
.pet-character[data-species="octopus"] .pet-pose { filter:drop-shadow(0 14px 10px rgba(0,0,0,.42)) drop-shadow(0 0 20px rgba(151,92,255,.5)); }
.pet-character[data-species="cat"] .pet-pose { filter:drop-shadow(0 14px 10px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(113,64,255,.45)); }
@keyframes pet-idle { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-7px) rotate(.5deg); } }
@keyframes pet-aura { 0%,100% { opacity: .62; transform: translateX(-50%) scale(.94); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } }
@keyframes pet-reset { 0% { opacity: 0; transform: scale(.45) rotate(-12deg); } 65% { opacity: 1; transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1); } }
@keyframes pet-sleep { 0%,100% { transform: translateY(2px) scale(.99); } 50% { transform: translateY(5px) scale(.965); } }
#add-lot { width: 100%; margin: 2px 0 17px; }

.status-badge { padding: 7px 11px; border-radius: 999px; background: var(--panel-light); color: var(--muted); font-size: 13px; font-weight: 750; }
.status-badge[data-status="running"] { color: #64e1a0; background: rgba(69, 201, 133, 0.13); }
.status-badge[data-status="finished"] { color: #ff8494; background: rgba(227, 75, 95, 0.13); }
.status-badge[data-status="paused"] { color: #bba4f6; background: rgba(111, 66, 217, 0.18); }

.big-timer { min-width: 115px; text-align: right; color: var(--orange-light); font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; }
.live-rules { margin: -10px 0 15px; color: var(--muted); font-size: 13px; }
.action-row { display: flex; flex-wrap: wrap; gap: 9px; }
.live-summary { margin-top: 18px; display: grid; grid-template-columns: 0.7fr 1fr 1.6fr; gap: 9px; }
.live-summary > div { min-width: 0; padding: 13px 14px; display: grid; gap: 5px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); border-radius: 11px; }
.live-summary span { color: var(--muted); font-size: 12px; }
.live-summary strong { overflow: hidden; color: var(--orange-light); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.winner-card { margin-top: 12px; padding: 15px 17px; display: grid; gap: 5px; border: 1px solid rgba(255, 122, 26, 0.45); border-radius: 12px; background: linear-gradient(135deg, rgba(111, 66, 217, 0.22), rgba(255, 122, 26, 0.16)); }
.winner-card[hidden] { display: none; }
.winner-card span { color: var(--orange-light); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.winner-card strong { font-size: 19px; }
.moderation-section { margin-top: 22px; }
.moderation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.moderation-heading h2 { margin-bottom: 11px; }
.proposal-count { padding: 6px 9px; color: var(--muted); background: var(--panel-light); border-radius: 999px; font-size: 12px; font-weight: 800; }
.proposal-count.has-items { color: #1a0c02; background: var(--orange); }
.proposal-list { display: grid; gap: 8px; }
.proposal-card { padding: 13px; display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(420px, 1.7fr); gap: 13px; align-items: center; background: rgba(255, 122, 26, 0.06); border: 1px solid rgba(255, 122, 26, 0.22); border-radius: 12px; }
.proposal-copy { min-width: 0; display: grid; gap: 4px; }
.proposal-copy span, .proposal-copy small { color: var(--muted); font-size: 12px; }
.proposal-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proposal-actions { display: grid; grid-template-columns: auto auto minmax(150px, 1fr) auto; gap: 7px; }
.proposal-actions .button { min-height: 38px; padding: 8px 10px; font-size: 12px; }
.empty-state.compact { padding: 14px; }
.divider { height: 1px; margin: 24px 0; background: var(--border); }
.link-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.history-heading { margin-top: 24px; }
.history-heading h2 { margin-bottom: 9px; }
.history-heading p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.history { display: grid; gap: 6px; }
.history-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(140px, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.025); border-radius: 9px; }
.auction-history-row { grid-template-columns: minmax(180px, 1fr) minmax(240px, 320px) 96px 84px; }
.history-row.excluded { opacity: 0.62; }
.history-row.excluded > strong { text-decoration: line-through; }
.history-donor-cell { min-width: 0; display: grid; gap: 3px; }
.history-donor, .history-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-message { color: var(--muted); }
.history-lot-control { margin: 0; }
.history-row strong { color: var(--orange-light); }
.auction-history-row > strong { min-width:96px; text-align:right; }
.history-action { padding: 7px 9px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12px; }
.history-action:hover { color: var(--text); border-color: var(--purple-light); }
.empty-state { padding: 22px; color: var(--muted); text-align: center; border: 1px dashed var(--border); border-radius: 10px; }

.toast { position: fixed; z-index: 10000; right: 24px; bottom: 24px; padding: 13px 18px; border-radius: 11px; background: #2d2340; opacity: 0; transform: translateY(12px); pointer-events: none; transition: 160ms ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: #5b202c; }

.overlay-page { min-height: 100vh; overflow: hidden; background: transparent; --widget-bg: #181020; --widget-panel: #21162d; --widget-primary: #ff7a1a; --widget-secondary: #7a48df; --widget-timer: #ff7a1a; --widget-text: #fff8f2; --widget-muted: #b9a9c5; --widget-radius: 18px; --widget-opacity: 94%; --widget-opacity-decimal: .94; --widget-option-opacity: 82%; --widget-scale: 1; --widget-font: Inter, "Segoe UI", Arial, sans-serif; }
.overlay-card {
  position: relative;
  width: min(850px, calc(100vw - 40px));
  margin: 20px;
  padding: 24px;
  color: var(--widget-text, var(--text));
  font-family: var(--widget-font, inherit);
  border: 1px solid color-mix(in srgb, var(--widget-primary, var(--orange)) 38%, white 8%);
  border-radius: var(--widget-radius, 22px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--widget-bg, #120d1a) var(--widget-opacity, 94%), transparent), color-mix(in srgb, var(--widget-panel, #1c1328) var(--widget-opacity, 94%), transparent));
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.45);
  transform: scale(var(--widget-scale, 1));
  transform-origin: top left;
}
.overlay-topline { display: flex; justify-content: flex-end; align-items: center; }
[data-timer-position="left"] .overlay-topline { justify-content: flex-start; }
[data-timer-position="center"] .overlay-topline { justify-content: center; }
[data-timer-position="right"] .overlay-topline { justify-content: flex-end; }
.overlay-brand { width: max-content; margin: 14px auto 0; color: var(--widget-muted, #d9cfdf); font-size: 13px; font-weight: 800; }
.overlay-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.overlay-timer { color: var(--widget-primary, var(--orange-light)); font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }
.overlay-timer[data-status="paused"] { color: var(--purple-light); }
.overlay-timer[data-status="finished"] { color: #ff8494; }
.overlay-card h1 { margin: 22px 0; max-width: 700px; color:var(--widget-title,var(--widget-text)); font-size: 34px; }
.overlay-lots { display: grid; gap: 11px; }
.overlay-lot { padding: 14px 16px; border-radius: calc(var(--widget-radius, 18px) * .62); background: color-mix(in srgb, color-mix(in srgb, var(--widget-panel, #21162d) 90%, white 10%) var(--widget-option-opacity), transparent); border: 1px solid transparent; transition: 180ms ease; }
.overlay-lot.leader { border-color: var(--widget-primary, var(--orange)); background: color-mix(in srgb, color-mix(in srgb, var(--widget-primary, var(--orange)) 12%, var(--widget-panel, #21162d)) var(--widget-option-opacity), transparent); }
.overlay-lot-info { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; }
.overlay-position { display: grid; place-items: center; width: 26px; height: 26px; border-radius: calc(var(--widget-radius, 18px) * .38); color: var(--widget-text, #cdbce1); background: color-mix(in srgb, var(--widget-secondary, #6f42d9) 35%, transparent); font-weight: 850; }
.overlay-lot-title { font-size: 19px; font-weight: 750; }
.overlay-lot strong,.overlay-timer { color: var(--widget-amount,var(--widget-primary)); }.overlay-lot strong { font-size: 20px; }
.progress-track { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.075); }
.progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--widget-secondary, var(--purple)), var(--widget-primary, var(--orange))); transition: width 380ms cubic-bezier(.2,.8,.2,1); }
.overlay-result { margin-top: 16px; padding: 14px 16px; border-radius: calc(var(--widget-radius, 18px) * .6); text-align: center; color: var(--widget-text, #fff); font-size: 20px; font-weight: 850; background: linear-gradient(135deg, var(--widget-secondary, #6f42d9), var(--widget-primary, #ff7a1a)); }
.donation-flash { position: absolute; left: 50%; bottom: -65px; max-width: calc(100% - 70px); padding: 12px 18px; border-radius: 999px; background: var(--widget-primary, var(--orange)); color: var(--widget-bg, #1a0c02); font-weight: 850; opacity: 0; transform: translate(-50%, 15px) scale(0.96); transition: 220ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donation-flash.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Каждый пресет получает собственную фактуру и оригинальную векторную рамку. */
.overlay-card[data-widget-theme]::before { content: ""; position: absolute; z-index: 1; inset: -1px; pointer-events: none; border-radius: inherit; background: var(--widget-primary); opacity: .34; -webkit-mask: var(--theme-decoration) center / 100% 100% no-repeat; mask: var(--theme-decoration) center / 100% 100% no-repeat; }
.overlay-card > .overlay-topline, .overlay-card > h1, .overlay-card > .overlay-lots, .overlay-card > .overlay-result, .overlay-card > .overlay-brand { position: relative; z-index: 2; }
.overlay-card > .donation-flash { z-index: 4; }

[data-widget-theme="classic"].overlay-card { --theme-decoration: url("/theme-classic.svg"); background: radial-gradient(circle at 4% 8%, color-mix(in srgb, var(--widget-primary) 18%, transparent), transparent 28%), radial-gradient(circle at 96% 92%, color-mix(in srgb, var(--widget-secondary) 24%, transparent), transparent 30%), linear-gradient(145deg, color-mix(in srgb, var(--widget-bg) var(--widget-opacity), transparent), color-mix(in srgb, var(--widget-panel) var(--widget-opacity), transparent)); }
[data-widget-theme="minimal"].overlay-card { box-shadow: 0 12px 36px rgba(0,0,0,.28); border-color: color-mix(in srgb, var(--widget-text) 16%, transparent); }
[data-widget-theme="minimal"].overlay-card::before { display: none; }
[data-widget-theme="minimal"] .overlay-brand, [data-widget-theme="minimal"].overlay-card .overlay-brand { font-weight: 500; opacity: .72; }
[data-widget-theme="minimal"] .overlay-timer, [data-widget-theme="minimal"].overlay-card .overlay-timer { padding: 5px 9px; color: var(--widget-text); border: 1px solid color-mix(in srgb, var(--widget-text) 16%, transparent); border-radius: 7px; font-size: 24px; }
[data-widget-theme="minimal"] .overlay-lot, [data-widget-theme="minimal"].overlay-card .overlay-lot { background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--widget-text) 12%, transparent); border-radius: 0; }
[data-widget-theme="minimal"] .overlay-position, [data-widget-theme="minimal"].overlay-card .overlay-position { color: var(--widget-muted); background: transparent; }
[data-widget-theme="minimal"] .progress-fill, [data-widget-theme="minimal"].overlay-card .progress-fill { background: var(--widget-primary); }

[data-widget-theme="gothic"].overlay-card {
  padding: 108px 108px 92px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 8%, rgba(86,71,101,.35), transparent 43%), linear-gradient(155deg, color-mix(in srgb,#100e13 var(--widget-opacity),transparent), color-mix(in srgb,#040406 var(--widget-opacity),transparent));
  box-shadow: 0 30px 85px rgba(0,0,0,.72);
}
[data-widget-theme="gothic"].overlay-card::before { display: none; }
[data-widget-theme="gothic"].overlay-card::after { content:""; position:absolute; z-index:1; inset:0; box-sizing:border-box; border: 105px solid transparent; border-image-source:url("/theme-gothic-realistic.webp"); border-image-slice:22% 18% fill; border-image-width:105px 108px 92px; border-image-repeat:stretch; opacity:var(--widget-opacity-decimal); pointer-events:none; }
[data-widget-theme="gothic"] .overlay-card h1, [data-widget-theme="gothic"].overlay-card h1 { margin: 18px 0 20px; color: #f2edf5; text-align: center; letter-spacing: .045em; text-shadow: 0 3px 2px #000, 0 0 20px rgba(162,137,184,.28); }
[data-widget-theme="gothic"] .overlay-brand, [data-widget-theme="gothic"].overlay-card .overlay-brand { color: #c5bbc9; font-family: Georgia, serif; letter-spacing: .04em; }
[data-widget-theme="gothic"] .overlay-lot, [data-widget-theme="gothic"].overlay-card .overlay-lot { background: linear-gradient(90deg, color-mix(in srgb,#0c0a0e var(--widget-option-opacity),transparent), color-mix(in srgb,#1f1922 var(--widget-option-opacity),transparent)); border: 1px solid rgba(176,164,186,.22); border-bottom-color: rgba(184,168,194,.5); border-radius: 2px; box-shadow: inset 0 0 18px rgba(0,0,0,.58); }
[data-widget-theme="gothic"] .overlay-lot.leader, [data-widget-theme="gothic"].overlay-card .overlay-lot.leader { border-color: #9a3656; box-shadow: inset 4px 0 #a8224b, inset 0 0 18px #000; }
[data-widget-theme="gothic"] .overlay-timer, [data-widget-theme="gothic"].overlay-card .overlay-timer { min-width: 112px; padding: 8px 14px; text-align: center; border: 2px solid #736b79; border-radius: 50% 50% 7px 7px; background: linear-gradient(#18131a,#050406); box-shadow: inset 0 0 14px #000, 0 0 0 2px #171219; text-shadow: 0 0 10px var(--widget-primary); }
[data-widget-theme="gothic"] .overlay-position, [data-widget-theme="gothic"].overlay-card .overlay-position { width: 27px; border: 1px solid #8d8493; border-radius: 50% 50% 3px 3px; background: linear-gradient(#28202c,#09070a); }
[data-widget-theme="gothic"] .progress-track, [data-widget-theme="gothic"].overlay-card .progress-track { height: 4px; border-radius: 0; background: #030304; }

[data-widget-theme="pixel"].overlay-card { --theme-decoration: url("/theme-pixel.svg"); image-rendering: pixelated; border-width: 4px; background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), color-mix(in srgb, var(--widget-bg) var(--widget-opacity), transparent); background-size: 16px 16px; box-shadow: 10px 10px 0 color-mix(in srgb, var(--widget-secondary) 55%, black); }
[data-widget-theme="pixel"].overlay-card::before { opacity: .72; image-rendering: pixelated; }
[data-widget-theme="pixel"] .overlay-lot, [data-widget-theme="pixel"].overlay-card .overlay-lot { border: 2px solid color-mix(in srgb, var(--widget-secondary) 30%, transparent); box-shadow: 4px 4px 0 rgba(0,0,0,.28); }
[data-widget-theme="pixel"] .progress-track, [data-widget-theme="pixel"].overlay-card .progress-track { height: 9px; border-radius: 0; }
[data-widget-theme="pixel"] .progress-fill, [data-widget-theme="pixel"].overlay-card .progress-fill { border-radius: 0; background: repeating-linear-gradient(90deg, var(--widget-secondary) 0 13px, var(--widget-primary) 13px 25px, transparent 25px 28px); }
[data-widget-theme="pixel"] .overlay-timer, [data-widget-theme="pixel"].overlay-card .overlay-timer { padding: 7px 10px; color: #4b369c; background: #fff0a8; box-shadow: 5px 5px 0 var(--widget-secondary); font-size: 26px; }
[data-widget-theme="pixel"] .overlay-card h1, [data-widget-theme="pixel"].overlay-card h1 { text-transform: uppercase; letter-spacing: -.04em; text-shadow: 4px 4px 0 color-mix(in srgb, var(--widget-secondary) 58%, black); }
[data-widget-theme="pixel"] .overlay-position, [data-widget-theme="pixel"].overlay-card .overlay-position { border-radius: 0; background: var(--widget-secondary); }

[data-widget-theme="anime"].overlay-card { padding: 92px 90px 78px; overflow:visible; border:0; border-radius:0; background:linear-gradient(145deg,color-mix(in srgb,#241830 var(--widget-opacity),transparent),color-mix(in srgb,#3b2147 var(--widget-opacity),transparent)); box-shadow:0 18px 72px #8c7cff44; }
[data-widget-theme="anime"].overlay-card::before { display:none; }
[data-widget-theme="anime"].overlay-card::after { content:""; position:absolute; z-index:1; inset:0; box-sizing:border-box; border:95px solid transparent; border-image-source:url("/theme-anime-realistic.png"); border-image-slice:22% 17% fill; border-image-width:95px 90px 78px; border-image-repeat:stretch; opacity:var(--widget-opacity-decimal); pointer-events:none; }
[data-widget-theme="anime"] .overlay-lot, [data-widget-theme="anime"].overlay-card .overlay-lot { border: 1px solid color-mix(in srgb, var(--widget-primary) 25%, white 12%); box-shadow: inset 0 0 18px color-mix(in srgb, var(--widget-secondary) 12%, transparent); }
[data-widget-theme="anime"] .overlay-card h1, [data-widget-theme="anime"].overlay-card h1 { width: max-content; max-width: 85%; margin-inline: auto; padding: 8px 20px; text-align: center; border-radius: 999px; background: color-mix(in srgb, var(--widget-primary) 17%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--widget-primary) 18%, transparent); }
[data-widget-theme="anime"] .overlay-timer, [data-widget-theme="anime"].overlay-card .overlay-timer { padding: 7px 13px; color: #4e285f; border: 1px solid #a997e8; border-radius: 999px; background: linear-gradient(135deg, #ffe2f1, #dcd6ff); box-shadow: 0 4px 18px color-mix(in srgb, var(--widget-secondary) 35%, transparent); }
[data-widget-theme="anime"] .overlay-position, [data-widget-theme="anime"].overlay-card .overlay-position { border-radius: 50%; background: linear-gradient(135deg, var(--widget-primary), var(--widget-secondary)); }
[data-widget-theme="anime"] .progress-track, [data-widget-theme="anime"].overlay-card .progress-track { height: 10px; padding: 2px; background: color-mix(in srgb, white 14%, transparent); }
[data-widget-theme="anime"] .progress-fill, [data-widget-theme="anime"].overlay-card .progress-fill { background: repeating-linear-gradient(45deg, var(--widget-primary) 0 9px, var(--widget-secondary) 9px 18px); }

[data-widget-theme="blood"].overlay-card {
  padding: 112px 98px 88px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: linear-gradient(145deg, color-mix(in srgb,#171516 var(--widget-opacity),transparent), color-mix(in srgb,#050405 var(--widget-opacity),transparent));
  box-shadow: 0 34px 90px rgba(45,0,4,.75);
  font-family: "Segoe UI", Arial, sans-serif;
}
[data-widget-theme="blood"].overlay-card::before { display: none; }
[data-widget-theme="blood"].overlay-card::after { content:""; position:absolute; z-index:1; inset:0; box-sizing:border-box; border:105px solid transparent; border-image-source:url("/theme-horror-realistic.webp"); border-image-slice:22% 18% fill; border-image-width:112px 98px 88px; border-image-repeat:stretch; opacity:var(--widget-opacity-decimal); pointer-events:none; }
[data-widget-theme="blood"] .overlay-brand, [data-widget-theme="blood"].overlay-card .overlay-brand { color: #ded1cb; text-shadow: 0 2px 2px #000; }
[data-widget-theme="blood"] .overlay-lot, [data-widget-theme="blood"].overlay-card .overlay-lot { background: linear-gradient(90deg, color-mix(in srgb,#140f10 var(--widget-option-opacity),transparent), color-mix(in srgb,#2d1316 var(--widget-option-opacity),transparent)); border: 1px solid rgba(121,28,39,.58); border-left: 5px solid #7c111e; border-radius: 2px; box-shadow: inset 0 0 19px rgba(0,0,0,.72); }
[data-widget-theme="blood"] .overlay-lot.leader, [data-widget-theme="blood"].overlay-card .overlay-lot.leader { border-color: #c51b2d; background: linear-gradient(90deg, rgba(54,10,16,.96), rgba(30,14,16,.93)); }
[data-widget-theme="blood"] .overlay-card h1, [data-widget-theme="blood"].overlay-card h1 { margin-block: 18px 20px; color: #fff7f2; text-transform: uppercase; letter-spacing: .025em; text-shadow: 0 3px 2px #000, 0 0 14px rgba(184,11,29,.36); }
[data-widget-theme="blood"] .overlay-timer, [data-widget-theme="blood"].overlay-card .overlay-timer { padding: 8px 13px; color: #fff; border: 1px solid #83111e; border-radius: 2px; background: linear-gradient(#2d0c10,#080607); box-shadow: inset 0 0 13px #000; text-shadow: 0 0 8px #d71f32; }
[data-widget-theme="blood"] .overlay-position, [data-widget-theme="blood"].overlay-card .overlay-position { border: 1px solid #e0535f; border-radius: 2px; background: linear-gradient(#c9192c,#5e0711); box-shadow: 0 2px 5px #000; }
[data-widget-theme="blood"] .progress-track, [data-widget-theme="blood"].overlay-card .progress-track { height: 8px; border: 1px solid #421016; border-radius: 1px; background: #050304; }
[data-widget-theme="blood"] .progress-fill, [data-widget-theme="blood"].overlay-card .progress-fill { background: linear-gradient(90deg, #5b050d, #d51629 65%, #ff4653); box-shadow: 0 0 9px rgba(173,0,18,.62); }

[data-widget-theme="cyberpunk"].overlay-card { --theme-decoration: url("/theme-cyberpunk.svg"); padding: 32px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); background: linear-gradient(rgba(0,230,230,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,230,230,.035) 1px, transparent 1px), linear-gradient(145deg, color-mix(in srgb, #06121d var(--widget-opacity), transparent), color-mix(in srgb, #0b1e30 var(--widget-opacity), transparent)); background-size: 28px 28px; box-shadow: 0 0 34px color-mix(in srgb, var(--widget-primary) 30%, transparent); }
[data-widget-theme="cyberpunk"].overlay-card::before { opacity: .78; filter: drop-shadow(0 0 5px var(--widget-primary)); }
[data-widget-theme="cyberpunk"] .overlay-lot, [data-widget-theme="cyberpunk"].overlay-card .overlay-lot { border-left: 3px solid var(--widget-secondary); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
[data-widget-theme="cyberpunk"] .overlay-lot.leader, [data-widget-theme="cyberpunk"].overlay-card .overlay-lot.leader { box-shadow: inset 5px 0 0 var(--widget-primary), 0 0 14px color-mix(in srgb, var(--widget-primary) 16%, transparent); }
[data-widget-theme="cyberpunk"] .overlay-card h1, [data-widget-theme="cyberpunk"].overlay-card h1 { text-transform: uppercase; letter-spacing: .08em; text-shadow: 2px 0 var(--widget-secondary), -2px 0 var(--widget-primary); }
[data-widget-theme="cyberpunk"] .overlay-timer, [data-widget-theme="cyberpunk"].overlay-card .overlay-timer { padding: 6px 15px; border-right: 4px solid var(--widget-secondary); border-left: 4px solid var(--widget-primary); background: rgba(0,0,0,.36); box-shadow: 0 0 14px color-mix(in srgb, var(--widget-primary) 25%, transparent); }
[data-widget-theme="cyberpunk"] .overlay-position, [data-widget-theme="cyberpunk"].overlay-card .overlay-position { border-radius: 0; clip-path: polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%); background: var(--widget-secondary); }
[data-widget-theme="cyberpunk"] .progress-track, [data-widget-theme="cyberpunk"].overlay-card .progress-track { height: 8px; border-radius: 0; }
[data-widget-theme="cyberpunk"] .progress-fill, [data-widget-theme="cyberpunk"].overlay-card .progress-fill { background: repeating-linear-gradient(135deg, var(--widget-primary) 0 12px, var(--widget-secondary) 12px 17px, transparent 17px 20px); }

[data-widget-theme="royal"].overlay-card {
  padding: 112px 105px 92px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at top, rgba(119,52,30,.42), transparent 47%), linear-gradient(145deg, color-mix(in srgb,#2d1a0d var(--widget-opacity),transparent), color-mix(in srgb,#0e0804 var(--widget-opacity),transparent));
  box-shadow: 0 32px 85px rgba(0,0,0,.66);
}
[data-widget-theme="royal"].overlay-card::before { display: none; }
[data-widget-theme="royal"].overlay-card::after { content:""; position:absolute; z-index:1; inset:0; box-sizing:border-box; border:105px solid transparent; border-image-source:url("/theme-royal-realistic.webp"); border-image-slice:22% 18% fill; border-image-width:112px 105px 92px; border-image-repeat:stretch; opacity:var(--widget-opacity-decimal); pointer-events:none; }
[data-widget-theme="royal"] .overlay-brand, [data-widget-theme="royal"].overlay-card .overlay-brand { color: #e9d098; text-shadow: 0 2px 2px #000; }
[data-widget-theme="royal"] .overlay-lot, [data-widget-theme="royal"].overlay-card .overlay-lot { background: linear-gradient(90deg, color-mix(in srgb,#120904 var(--widget-option-opacity),transparent), color-mix(in srgb,#442712 var(--widget-option-opacity),transparent), color-mix(in srgb,#150a05 var(--widget-option-opacity),transparent)); border: 1px solid #8d6229; border-radius: 3px; box-shadow: inset 0 0 16px rgba(0,0,0,.64), 0 1px #d1a45d33; }
[data-widget-theme="royal"] .overlay-lot.leader, [data-widget-theme="royal"].overlay-card .overlay-lot.leader { border-color: #e0b45f; box-shadow: inset 0 0 18px rgba(117,66,17,.58), 0 0 10px rgba(217,164,65,.2); }
[data-widget-theme="royal"] .overlay-card h1, [data-widget-theme="royal"].overlay-card h1 { margin: 16px auto 20px; text-align: center; color: #ffe9b3; letter-spacing: .025em; text-shadow: 0 3px 2px #000, 0 0 15px rgba(217,164,65,.2); }
[data-widget-theme="royal"] .overlay-timer, [data-widget-theme="royal"].overlay-card .overlay-timer { min-width: 110px; padding: 8px 12px; color: #ffe5a4; text-align: center; border: 2px solid #b2823e; border-radius: 3px; background: linear-gradient(#4a2d12,#160b04); box-shadow: inset 0 0 11px #000, 0 0 0 2px #42250f; }
[data-widget-theme="royal"] .overlay-position, [data-widget-theme="royal"].overlay-card .overlay-position { border: 2px solid #8c5b1f; border-radius: 50%; color: #261203; background: radial-gradient(circle at 35% 30%, #fff0b5, #d9a441 48%, #6e430d); box-shadow: 0 2px 3px #000; }
[data-widget-theme="royal"] .progress-track, [data-widget-theme="royal"].overlay-card .progress-track { height: 9px; padding: 2px; border: 1px solid #7d4f19; border-radius: 2px; background: #0a0603; }
[data-widget-theme="royal"] .progress-fill, [data-widget-theme="royal"].overlay-card .progress-fill { background: linear-gradient(#fff0b5, #d9a441 42%, #8b5613); box-shadow: 0 0 8px rgba(217,164,65,.42); }

/* Карточки выбора дают миниатюрное представление о характере темы. */
.theme-card[data-preset-id="gothic"] .theme-swatch { border: 1px solid #736b79; border-radius: 2px; background: #08080b url("/theme-gothic-realistic.webp") center / cover no-repeat; }
.theme-card[data-preset-id="pixel"] .theme-swatch { border-radius: 0; box-shadow: 4px 4px 0 #6f64ff; image-rendering: pixelated; }
.theme-card[data-preset-id="anime"] .theme-swatch { border: 3px solid #ffb7dc; border-radius: 22px; background:#2c1938 url("/theme-anime-kawaii-v2.png") center/cover no-repeat; box-shadow: 0 0 14px #8c7cff66; }
.theme-card[data-preset-id="blood"] .theme-swatch { border: 1px solid #79111b; border-radius: 1px; background: #090708 url("/theme-horror-realistic.webp") center / cover no-repeat; }
.theme-card[data-preset-id="cyberpunk"] .theme-swatch { border: 2px solid #00e6e6; border-radius: 0; clip-path: polygon(0 0,85% 0,100% 15%,100% 100%,0 100%); }
.theme-card[data-preset-id="royal"] .theme-swatch { border: 2px solid #b48136; border-radius: 2px; background: #211309 url("/theme-royal-realistic.webp") center / cover no-repeat; }
[data-density="compact"] .overlay-card, [data-density="compact"].overlay-card { padding: 17px; }
[data-density="compact"] .overlay-lot, [data-density="compact"].overlay-card .overlay-lot { padding: 9px 12px; }
[data-density="compact"] .overlay-lots, [data-density="compact"].overlay-card .overlay-lots { gap: 7px; }
/* Реалистичным рамкам нужен безопасный внутренний отступ даже в компактном режиме. */
[data-density="compact"][data-widget-theme="gothic"].overlay-card { padding: 86px 88px 76px; }
[data-density="compact"][data-widget-theme="blood"].overlay-card { padding: 88px 80px 72px; }
[data-density="compact"][data-widget-theme="royal"].overlay-card { padding: 88px 84px 76px; }
[data-animation="active"] .progress-fill, [data-animation="active"].overlay-card .progress-fill { animation: widget-pulse 1.2s ease-in-out infinite alternate; }
[data-animation="calm"] .progress-fill, [data-animation="calm"].overlay-card .progress-fill { transition-duration: 800ms; }
[data-animation="none"] *, [data-animation="none"].overlay-card * { animation: none !important; transition: none !important; }
@keyframes widget-pulse { to { filter: brightness(1.35); box-shadow: 0 0 12px var(--widget-primary); } }

/* Завершение аукциона — отдельный характер для каждого готового оформления. */
.overlay-card.auction-complete { animation:complete-classic 1.1s ease 2; }
[data-widget-theme="minimal"].auction-complete { animation:complete-minimal .75s ease 1; }
[data-widget-theme="gothic"].auction-complete { animation:complete-gothic 1.8s ease 1; }
[data-widget-theme="blood"].auction-complete { animation:complete-horror .38s steps(2) 6; }
[data-widget-theme="pixel"].auction-complete { animation:complete-pixel .32s steps(2) 7; }
[data-widget-theme="anime"].auction-complete { animation:complete-anime 1.4s cubic-bezier(.2,.9,.2,1) 1; }
[data-widget-theme="cyberpunk"].auction-complete { animation:complete-cyber .18s steps(2) 10; }
[data-widget-theme="royal"].auction-complete { animation:complete-royal 1.6s ease 1; }
.auction-complete .overlay-result { animation:result-reveal .8s cubic-bezier(.2,.9,.2,1) both; }
@keyframes result-reveal{0%{opacity:0;transform:scale(.78) translateY(18px)}70%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes complete-classic{50%{filter:brightness(1.45);box-shadow:0 0 65px var(--widget-primary)}}
@keyframes complete-minimal{0%{opacity:.2;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes complete-gothic{45%{filter:brightness(.55) contrast(1.3)}70%{filter:brightness(1.35) sepia(.25)}}
@keyframes complete-horror{0%{transform:translate(0) scale(1)}50%{transform:translate(-7px,3px) scale(1.012);filter:saturate(1.8)}100%{transform:translate(6px,-2px)}}
@keyframes complete-pixel{50%{transform:translate(6px,-6px);filter:hue-rotate(35deg) brightness(1.4)}}
@keyframes complete-anime{45%{transform:scale(1.035) rotate(-.4deg);filter:brightness(1.4) saturate(1.2)}75%{transform:scale(.995) rotate(.2deg)}}
@keyframes complete-cyber{50%{transform:translateX(-8px);filter:hue-rotate(90deg) contrast(1.5)}}
@keyframes complete-royal{45%{transform:scale(1.025);filter:sepia(.45) brightness(1.35);box-shadow:0 0 80px #d9a44188}}
.overlay-card h1 { color:var(--widget-title,var(--widget-text)) !important; }
.overlay-card .overlay-lot-title { color:var(--widget-text) !important; }
.overlay-card .overlay-lot strong { color:var(--widget-amount,var(--widget-primary)) !important; }
.overlay-card .overlay-timer { color:var(--widget-timer,var(--widget-amount,var(--widget-primary))) !important; }
[data-widget-theme="pixel"].overlay-card .overlay-timer { color:#4b369c !important; }
[data-widget-theme="anime"].overlay-card .overlay-timer { color:#4e285f !important; }

.studio-brand-link { color: var(--text); text-decoration: none; }
.design-shell { width: min(1540px, calc(100% - 48px)); margin: 28px auto 60px; }
.design-heading { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.design-heading h1 { margin: 6px 0 8px; font-size: 36px; }
.design-heading p, .preview-heading p { margin: 0; color: var(--muted); line-height: 1.45; }
.design-save-actions { display: flex; align-items: center; gap: 12px; }
.design-save-actions span { color: var(--muted); font-size: 12px; }
.design-steps { margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.design-step { padding: 14px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: 13px; background: rgba(24,19,31,.82); }
.design-step > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--panel-light); font-weight: 900; }
.design-step > div { display: grid; gap: 3px; }
.design-step small { color: var(--muted); }
.design-step.active { border-color: rgba(255,122,26,.5); }
.design-step.active > span { color: #1a0c02; background: var(--orange); }
.design-step.coming { opacity: .55; }
.design-layout { display: grid; grid-template-columns: minmax(470px, .9fr) minmax(560px, 1.1fr); gap: 20px; align-items: start; }
.compact-heading { margin-bottom: 15px; }
.theme-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-card { min-height: 122px; padding: 13px; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto 1fr; gap: 5px 12px; color: var(--text); text-align: left; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 13px; cursor: pointer; }
.theme-card:hover { border-color: rgba(155,118,242,.55); }
.theme-card.selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,26,.08); }
.theme-swatch { grid-row: 1 / 3; width: 70px; height: 70px; padding: 9px; display: flex; align-items: flex-end; gap: 4px; overflow: hidden; border-radius: 10px; background: var(--card-bg); }
.theme-swatch i { flex: 1; border-radius: 3px; background: var(--card-primary); }
.theme-swatch i:nth-child(1) { height: 28%; background: var(--card-secondary); }.theme-swatch i:nth-child(2) { height: 75%; }.theme-swatch i:nth-child(3) { height: 48%; background: var(--card-secondary); }
.theme-card strong { align-self: end; }.theme-card small { color: var(--muted); line-height: 1.3; }
.advanced-design { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; }
.advanced-design summary { cursor: pointer; font-weight: 800; }.advanced-design > p { color: var(--muted); font-size: 12px; }
.design-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.design-controls label { margin: 0; }.design-controls input[type="color"] { min-height: 44px; padding: 5px; }
.design-controls input[type="range"] { padding: 0; accent-color: var(--orange); }
.design-controls label > small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.design-controls .control-disabled { opacity: .56; }
.design-brand-toggle { margin-top: 12px; }.advanced-design > .text-button { margin-top: 10px; }
.preview-heading { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.preview-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.preview-heading h2 { margin: 3px 0 6px; }
.design-preview-stage { min-height: 560px; padding: 28px; overflow: hidden; background-color: #101115; background-image: linear-gradient(45deg,#191b21 25%,transparent 25%),linear-gradient(-45deg,#191b21 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#191b21 75%),linear-gradient(-45deg,transparent 75%,#191b21 75%); background-size: 28px 28px; background-position: 0 0,0 14px,14px -14px,-14px 0; border-radius: 15px; }
.design-widget-preview { width: 760px; max-width: none; margin: 0; --widget-opacity: 94%; }
.design-help { margin-top: 15px; padding: 13px 15px; display: grid; gap: 4px; color: #77d8a7; background: rgba(69,201,133,.08); border: 1px solid rgba(69,201,133,.22); border-radius: 11px; }
.design-help span { color: var(--muted); font-size: 12px; }

.viewer-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% -10%, rgba(111, 66, 217, 0.28), transparent 32rem),
    radial-gradient(circle at -10% 80%, rgba(255, 122, 26, 0.18), transparent 34rem),
    var(--background);
}
.viewer-topbar {
  min-height: 72px;
  padding: 14px max(20px, calc((100% - 860px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(14, 11, 20, 0.82);
}
.viewer-brand { display:flex; align-items:center; color:var(--text); text-decoration:none; font-size:18px; font-weight:800; }
.viewer-brand:hover { color:#fff; }
.demo-badge { padding: 7px 11px; border: 1px solid rgba(155, 118, 242, 0.35); border-radius: 999px; color: #cbb9f8; background: rgba(111, 66, 217, 0.12); font-size: 12px; font-weight: 750; }
.viewer-shell { width: min(1180px, calc(100% - 28px)); margin: 40px auto 70px; }
.viewer-intro { margin-bottom: 22px; }
.viewer-intro h1 { margin: 7px 0 10px; font-size: clamp(30px, 5vw, 48px); }
.viewer-intro p { max-width: 680px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.viewer-content { width: min(820px, 100%); display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.viewer-content.has-pet { width: 100%; grid-template-columns: minmax(0,1.65fr) minmax(320px,.75fr); align-items: start; }
.viewer-auction-column { min-width: 0; }
.viewer-payment-card {
  padding: 26px;
  background: rgba(24, 19, 31, 0.94);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}
.viewer-state { margin-bottom: 24px; padding: 13px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.04); }
.viewer-state span { color: var(--muted); }
.viewer-timer { color: var(--orange-light); font-size: 20px; font-variant-numeric: tabular-nums; }
.viewer-state[data-status="running"] { background: rgba(69, 201, 133, 0.12); }
.viewer-state[data-status="running"] strong { color: #67daa0; }
.viewer-state[data-status="finished"] { background: rgba(227, 75, 95, 0.1); }
#viewer-team-battle-state[data-status="finished"] { grid-template-columns:1fr; gap:5px; padding:18px 20px; border:1px solid rgba(255,255,255,.13); text-align:center; }
#viewer-team-battle-state[data-status="finished"] strong { font-size:24px; line-height:1.1; }
#viewer-team-battle-state[data-status="finished"] span { color:#cfc1d8; font-size:13px; }
#viewer-team-battle-state[data-result="draw"] { border-color:rgba(183,132,255,.45); background:linear-gradient(135deg,rgba(145,88,215,.22),rgba(255,255,255,.04)); box-shadow:inset 0 0 28px rgba(145,88,215,.08); }
#viewer-team-battle-state[data-result="draw"] strong { color:#f5eaff; font-size:28px; text-transform:uppercase; letter-spacing:.08em; }
#team-battle-result[data-result="draw"] { color:#f3e7ff; border-color:rgba(183,132,255,.34); background:rgba(145,88,215,.13); font-weight:800; }
fieldset { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
legend { width: 100%; margin-bottom: 12px; color: #d6cce0; font-size: 14px; font-weight: 800; }
.viewer-lots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.viewer-lots legend { grid-column: 1 / -1; }
.viewer-lot {
  min-height: 108px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--text);
  text-align: left;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: 150ms ease;
}
.viewer-lot:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255, 122, 26, 0.65); }
.viewer-lot.selected { border-color: var(--orange); background: rgba(255, 122, 26, 0.1); box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.08); }
.viewer-lot-custom { border-style: dashed; }
.viewer-lot.leader:not(.selected) { border-color: rgba(155, 118, 242, 0.42); }
.viewer-lot:disabled { opacity: 0.45; cursor: not-allowed; }
.viewer-lot-check { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 8px; color: transparent; background: rgba(255, 255, 255, 0.07); font-weight: 900; }
.viewer-lot.selected .viewer-lot-check { color: #190c02; background: var(--orange); }
.viewer-lot-copy { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.viewer-lot-copy strong { overflow-wrap: anywhere; }
.viewer-lot-copy small { color: var(--muted); }
.viewer-lot-copy em { width: max-content; padding: 3px 7px; color: #cbb9f8; background: rgba(111, 66, 217, 0.2); border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.proposal-field { margin: -10px 0 24px; padding: 14px; background: rgba(111, 66, 217, 0.1); border: 1px solid rgba(155, 118, 242, 0.28); border-radius: 12px; }
.proposal-field[hidden] { display: none; }
.proposal-field small { color: var(--muted); line-height: 1.4; }
.amount-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amount-buttons button { padding: 12px 8px; color: var(--text); background: #110d17; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 800; }
.amount-buttons button.selected { color: #1a0c02; background: var(--orange); border-color: var(--orange); }
.amount-buttons button:disabled { opacity: 0.35; cursor: not-allowed; }
.minimum-donation-note { margin: -5px 0 11px; color: var(--muted); font-size: 12px; }
.custom-amount { margin: 13px 0 0; }
.custom-amount div { position: relative; }
.custom-amount div span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--muted); }
.custom-amount input { padding-right: 38px; }
.viewer-details { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; }
.viewer-details legend { grid-column: 1 / -1; }
.viewer-details label { margin: 0; }
.viewer-details small { color: #776d82; }
.viewer-pay-button { width: 100%; min-height: 54px; font-size: 17px; }
.payment-note { margin-top: 11px; color: #776d82; text-align: center; font-size: 12px; }
.payment-success { padding: 26px; display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; background: rgba(24, 19, 31, 0.94); border: 1px solid rgba(69, 201, 133, 0.32); border-radius: 22px; }
.payment-success[hidden] { display: none; }
.success-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #092014; background: #58d393; font-size: 26px; font-weight: 900; }
.payment-success strong { font-size: 20px; }
.payment-success p { margin: 6px 0 0; color: var(--muted); }
.viewer-pet-card { position: sticky; top: 18px; padding: 20px; border: 1px solid rgba(255,122,26,.3); border-radius: 22px; background: linear-gradient(145deg,rgba(28,18,38,.97),rgba(22,15,30,.96)); box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.viewer-pet-heading { display: grid; grid-template-columns: 1fr 105px; gap: 10px; align-items: center; }
.viewer-pet-heading h2 { margin: 5px 0 3px; }
.viewer-pet-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.viewer-pet-heading img { width: 105px; height: 115px; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(0,0,0,.4)); }
.viewer-pet-card form { margin-top: 12px; display: grid; gap: 11px; }
.viewer-pet-card form > p { margin: 0 0 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.viewer-pet-card form label { margin: 0; }
.viewer-pet-card form > small { color: #776d82; text-align: center; }
.viewer-pet-progress > div { margin-bottom: 7px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.viewer-pet-progress i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.viewer-pet-progress b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--purple-light),var(--orange),#ffd15a); transition: width .35s ease; }
.pet-action-choices { margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; border:0; }
.pet-action-choices legend { margin-bottom:8px; font-weight:800; }
.pet-action-choice { min-height:44px; padding:9px 10px; color:var(--text); border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.025); cursor:pointer; }
.pet-action-choice:hover { border-color:var(--purple-light); }.pet-action-choice.selected { color:#170b03; border-color:var(--orange); background:var(--orange); font-weight:850; }
.pet-amount-field { position: relative; }
.pet-amount-field span { position: absolute; top: 50%; right: 13px; color: var(--muted); transform: translateY(-50%); }
.pet-amount-field input { padding-right: 34px; }
.viewer-pet-offline { margin-top: 13px; padding: 13px; display: grid; gap: 4px; border-radius: 11px; background: rgba(255,255,255,.035); }
.viewer-pet-offline span { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Интеграция 0.12.0: один понятный блок вместо технической консоли. */
.integration-panel { margin-bottom: 18px; }
.integration-heading, .provider-log-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.integration-heading h2 { margin: 5px 0 6px; }
.integration-heading p, .provider-log-heading small { margin: 0; color: var(--muted); }
.integration-actions { display: flex; align-items: center; gap: 10px; }
.integration-status { padding: 8px 11px; border-radius: 999px; color: #d7c8f7; background: rgba(111, 66, 217, 0.16); font-size: 12px; font-weight: 800; white-space: nowrap; }
.integration-status[data-state="connected"] { color: #67daa0; background: rgba(69, 201, 133, 0.12); }
.integration-status[data-state="error"], .integration-status[data-state="reauthorization_required"] { color: #ff8ca0; background: rgba(227, 75, 95, 0.12); }
.integration-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(280px, .7fr) minmax(420px, 1.3fr); gap: 16px; }
.integration-toggle { height: max-content; margin: 0; }
.provider-log-block { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .018); }
.provider-log-heading > div { display: grid; gap: 4px; }
.provider-events { margin-top: 12px; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.provider-event { padding: 11px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 11px; background: var(--panel-light); }
.provider-event-copy { min-width: 0; display: grid; gap: 3px; }
.provider-event-copy strong { overflow-wrap: anywhere; }
.provider-event-copy small { color: var(--muted); }
.provider-event-message { margin: 6px 0 0; padding: 8px 10px; color: #ddd2e6; background: rgba(255,255,255,.035); border-left: 3px solid var(--purple-light); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
.provider-routing-actions { grid-column:1/-1; display:grid; grid-template-columns:minmax(180px,1fr) auto auto; gap:8px; align-items:center; }
.provider-routing-actions select { min-width:0; }.provider-routing-actions .button { min-height:38px; padding:8px 13px; }
.provider-routing-actions > span { color:#ffca74; font-size:12px; }
.provider-event-assigned, .provider-event-ignored { opacity: .66; }
.provider-event-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.provider-event-actions select { width: min(220px, 28vw); }
.provider-event-actions .button { min-height: 39px; padding: 8px 13px; }

@media (max-width: 980px) {
  .auction-list { grid-template-columns: 1fr 1fr; }
  .setup-strip { grid-template-columns: 1fr 1fr; }
  .control-layout { grid-template-columns: 1fr; }
  .proposal-card { grid-template-columns: 1fr; }
  .template-list-heading { grid-template-columns: 1fr; }
  .template-card-custom { min-height: 92px; }
  .integration-grid { grid-template-columns: 1fr; }
  .pet-animation-preview { grid-template-columns: 1fr; }
  .studio-lower-grid, .design-layout { grid-template-columns: 1fr; }
  .activity-toolbar, .design-heading { align-items: flex-start; flex-direction: column; }
  .studio-layer-controls { width: 100%; flex-direction: column; align-items: stretch; }
  .pet-quick-card { min-width: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .activity-tools { width: 100%; flex-wrap: wrap; }
  .design-preview-stage { min-height: 470px; }
  .viewer-content.has-pet { grid-template-columns: 1fr; }
  .viewer-pet-card { position: static; }
}

@media (max-width: 1280px) and (min-width: 981px) {
  .setup-strip { grid-template-columns: 1fr 1fr; }
  .setup-step-share { min-height: 86px; }
}

@media (max-width: 620px) {
  .landing-topbar { padding-inline: 16px; }
  .landing-login { max-width: 150px; text-align: center; }
  .landing-main { width: calc(100% - 28px); padding-top: 54px; }
  .landing-hero h1 { font-size: 42px; }
  .landing-steps { margin-top: 48px; grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .topbar-actions { gap: 8px; }
  .account-chip { max-width: 170px; }
  .account-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-chip button { padding-inline: 4px; }
  .connection-text { display: none; }
  .control-shell { width: calc(100% - 24px); margin: 12px auto; }
  .setup-strip { grid-template-columns: 1fr; padding: 16px; }
  .panel { padding: 18px; }
  .panel-heading { display: grid; }
  .panel-heading-actions { justify-content: flex-start; margin-bottom: 14px; }
  .live-header { display: block; }
  .link-actions { justify-content: flex-start; margin: 12px 0; }
  .big-timer { text-align: left; margin-bottom: 14px; }
  .settings-row, .live-summary, .template-settings-grid { grid-template-columns: 1fr; }
  .proposal-actions { grid-template-columns: 1fr; }
  .history-row { grid-template-columns: 1fr auto; }
  .history-lot-control { grid-column: 1 / -1; grid-row: 2; }
  .auction-list, .template-list, .draft-list { grid-template-columns: 1fr; }
  .management-dialog, .template-editor-dialog, .archive-dialog { padding: 18px; }
  .dialog-heading, .dialog-section-heading { display: grid; }
  .dialog-actions { justify-content: flex-start; }
  .archive-result-summary { grid-template-columns: 1fr; }
  .viewer-topbar { align-items: flex-start; }
  .demo-badge { max-width: 150px; text-align: center; }
  .viewer-shell { margin-top: 26px; }
  .viewer-payment-card { padding: 18px; }
  .viewer-state { grid-template-columns: 1fr auto; }
  .viewer-state span { grid-column: 1 / -1; grid-row: 2; }
  .viewer-timer { grid-column: 2; grid-row: 1; }
  .viewer-lots { grid-template-columns: 1fr; }
  .amount-buttons { grid-template-columns: 1fr 1fr; }
  .viewer-details { grid-template-columns: 1fr; }
  .viewer-details legend { grid-column: auto; }
  .payment-success { grid-template-columns: 52px 1fr; }
  .payment-success .button { grid-column: 1 / -1; }
  .integration-heading, .provider-log-heading { display: grid; }
  .integration-actions { align-items: flex-start; flex-wrap: wrap; }
  .provider-event { grid-template-columns: 1fr; }
  .provider-event-actions { justify-content: flex-start; flex-wrap: wrap; }
  .provider-event-actions select { width: 100%; }
  .activity-current { width: 100%; flex-wrap: wrap; }
  .activity-current .button { margin-left: auto; }
  .activity-catalog, .design-steps, .theme-presets, .design-controls { grid-template-columns: 1fr; }
  .pet-quick-card { flex-wrap: wrap; }
  .pet-quick-card > div { flex: 1; }
  .pet-catalog { grid-template-columns: 1fr; }
  .pet-active-summary { grid-template-columns: 70px 1fr; }
  .pet-dialog-actions { grid-column: 1 / -1; flex-direction: column; }
  .pet-threshold-inputs { grid-template-columns: 1fr; }
  .pet-threshold-submit > span { display: none; }
  .design-shell { width: calc(100% - 24px); margin-top: 16px; }
  .design-heading h1 { font-size: 30px; }
  .design-save-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .design-preview-panel { padding: 14px; }
  .preview-heading { flex-direction: column; }
  .design-preview-stage { min-height: 400px; padding: 15px; }
  .design-widget-preview { width: 760px; }
}
/* v0.18+: главная, каталог сервисов и рейд-босс. */
.landing-session { display: flex; align-items: center; gap: 12px; }
.landing-studio-button { min-height: 42px; padding: 10px 18px; }
.landing-products { width: min(1180px, calc(100% - 40px)); margin: 22px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.product-card { display: flex; gap: 16px; min-height: 142px; padding: 20px; border: 1px solid #342a42; border-radius: 18px; background: linear-gradient(145deg, #17121f, #110e17); opacity: .72; }
.product-card > span { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px; background: #2b2138; color: #b896ff; font-weight: 900; }
.product-card div { display: grid; align-content: start; gap: 5px; }
.product-card small { color: #8d829b; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.product-card strong { font-size: 19px; color: #f8f1ff; }
.product-card p { margin: 0; color: #aaa0b7; line-height: 1.45; }
.product-card-live { border-color: #694196; opacity: 1; box-shadow: inset 0 0 28px rgba(115, 60, 160, .12); }
.product-card-live > span { background: linear-gradient(135deg, #ff6b13, #8449d8); color: #fff; }
.product-card-live small { color: #ff914d; }

.pet-coming-soon { pointer-events: none; opacity: .82; }
.pet-trio { display: flex !important; align-items: center; width: 72px !important; }
.pet-trio img { width: 38px !important; height: 38px !important; object-fit: contain; margin-right: -16px; filter: drop-shadow(0 4px 6px #09070c); }
.coming-soon-badge { padding: 6px 10px; border: 1px solid #5b446f; border-radius: 999px; color: #c5a3e9; background: #251b30; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

.boss-studio { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(520px, 1.25fr); gap: 18px; margin-top: 18px; }
.boss-settings-panel form { display: grid; gap: 16px; }
.boss-settings-row { grid-template-columns: repeat(3, 1fr); }
.boss-settings-row label { min-width: 0; }
.boss-settings-row label > span { min-height: 18px; white-space: nowrap; }
.field-hint { margin: -4px 0 0; color: #978ba4; font-size: 13px; line-height: 1.45; }
.boss-control-panel { overflow: hidden; }
.boss-studio-preview { position: relative; min-height: 270px; overflow: hidden; border: 1px solid #5b3429; border-radius: 18px; background: radial-gradient(circle at 72% 50%, rgba(255,93,16,.21), transparent 34%), linear-gradient(140deg, #21101a 0%, #100c17 55%, #25100b 100%); }
.boss-studio-preview::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,105,21,.025) 7px 8px); mix-blend-mode: screen; }
.boss-studio-preview img { position: absolute; right: 2%; bottom: 4%; height: 92%; width: auto; max-width: 48%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 15px 30px rgba(0,0,0,.8)); transition: filter .4s, transform .4s; }
.boss-studio-preview[data-phase="2"] img { filter: drop-shadow(0 15px 30px #000) saturate(1.2) brightness(1.07); }
.boss-studio-preview[data-phase="3"] img { filter: drop-shadow(0 0 25px #ff4d00) saturate(1.45) contrast(1.05); transform: scale(1.03); }
.boss-preview-copy { position: relative; z-index: 2; width: 48%; padding: 26px; }
.boss-preview-copy h2 { margin: 8px 0; font-size: 30px; }
.boss-preview-copy p { margin: 0; color: #b9a9be; line-height: 1.5; }
.boss-health-card, .viewer-boss-health, .boss-overlay-health { margin-top: 15px; }
.boss-health-card > div, .viewer-boss-health > div, .boss-overlay-health > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.boss-health-card i, .viewer-boss-health i, .boss-overlay-health i { display: block; height: 18px; overflow: hidden; border: 1px solid #713524; border-radius: 999px; background: #0d0911; box-shadow: inset 0 2px 8px #000; }
.boss-health-card i b, .viewer-boss-health i b, .boss-overlay-health i b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d82d1c, #ff6b17 60%, #ffd36c); box-shadow: 0 0 18px #ff5b17; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.boss-history-row > span { display: grid; gap: 3px; }
.boss-history-row > b { color: #ff7640; font-size: 17px; }

.viewer-boss { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); gap: 18px; width: 100%; align-items: start; }
.viewer-boss-aside, .viewer-boss-action { min-width: 0; display: grid; gap: 18px; align-content: start; }
.viewer-boss-stage { position: relative; height: clamp(480px, 68vh, 660px); overflow: hidden; border: 1px solid #503127; border-radius: 24px; background: radial-gradient(circle at 50% 38%, rgba(255,88,14,.28), transparent 30%), linear-gradient(#160c12, #08070b); }
.viewer-boss-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(255,61,0,.11)); }
.viewer-boss-stage img { position: absolute; z-index: 2; left: 50%; bottom: 0; width: min(122%, 720px); max-width: none; max-height: 94%; object-fit: contain; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 22px 35px #000); }
.viewer-boss-stage[data-phase="3"] img { filter: drop-shadow(0 0 25px #ff4b00) saturate(1.4); }
.viewer-boss-name { position: absolute; z-index: 3; top: 24px; left: 24px; display: grid; gap: 5px; }
.viewer-boss-name span { color: #ff7b34; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.viewer-boss-name strong { color: #fff; font-size: 27px; }
.viewer-boss-name small { color:#ffc28f; font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.viewer-boss-health { margin: 0; padding: 18px; border: 1px solid #403044; border-radius: 16px; background: #15101b; }
.viewer-boss-leaderboard { padding: 18px; border: 1px solid #392b40; border-radius: 16px; background: #15101b; }
.viewer-boss-leaderboard:empty { display: none; }
.viewer-boss-leaderboard ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: leader; }
.viewer-boss-leaderboard li { counter-increment: leader; display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-top: 1px solid #2c2231; }
.viewer-boss-leaderboard li::before { content: counter(leader); color: #ff7635; font-weight: 900; }
.viewer-boss-leaderboard li span { margin-right: auto; }

.overlay-card.boss-mode { width: 100vw; height: 100vh; max-width: none; transform: none !important; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; overflow: hidden; }
.boss-overlay { position: absolute; inset: 0; overflow: hidden; font-family: var(--widget-font, Inter, sans-serif); color: var(--widget-text, #fff); }
.boss-overlay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255,85,10,.14), transparent 32%), linear-gradient(180deg, rgba(5,3,8,.06), rgba(12,4,5,.35)); }
.boss-overlay[data-phase="2"]::before { background: radial-gradient(circle at 50% 55%, rgba(255,104,15,.25), transparent 35%), linear-gradient(180deg, rgba(5,3,8,.1), rgba(30,5,1,.45)); }
.boss-overlay[data-phase="3"]::before { animation: boss-rage-pulse 1.6s ease-in-out infinite; background: radial-gradient(circle at 50% 55%, rgba(255,46,0,.35), transparent 38%), linear-gradient(180deg, rgba(5,3,8,.1), rgba(42,3,0,.55)); }
.boss-overlay::after { content: ""; position: absolute; z-index: 15; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, rgba(255,230,150,.92), rgba(255,70,0,.5) 25%, transparent 58%); }
.boss-overlay.phase-shift::after { animation: boss-phase-shift 2.1s ease-out; }
.boss-overlay-heading { position: absolute; z-index: 4; top: 5%; left: 5%; display: grid; gap: 4px; padding: 14px 18px; border-left: 4px solid var(--widget-primary, #ff6b17); background: rgba(10,7,13,.76); backdrop-filter: blur(6px); }
.boss-overlay-heading span { color: var(--widget-primary, #ff7b34); font-size: clamp(12px, 1vw, 18px); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.boss-overlay-heading strong { font-size: clamp(25px, 3vw, 52px); text-shadow: 0 3px #000; }
.boss-overlay-heading b { color: #ffd5bd; font-size: clamp(20px, 2.2vw, 38px); }
.boss-character-wrap { position: absolute; z-index: 2; left: 50%; bottom: 7%; width: min(62vh, 54vw); aspect-ratio: 1; transform: translateX(-50%); }
.boss-character-wrap img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2.5vh 2vh rgba(0,0,0,.8)); transform-origin: 50% 72%; }
.boss-overlay[data-phase="2"] .boss-character-wrap img { filter: drop-shadow(0 2vh 2vh #000) saturate(1.2) brightness(1.05); }
.boss-overlay[data-phase="3"] .boss-character-wrap img { filter: drop-shadow(0 0 2.3vh #ff4100) saturate(1.45) contrast(1.08); }
.boss-character-wrap img.boss-hit { animation: boss-hit .48s steps(4); }
.boss-character-wrap img.boss-critical-hit { animation: boss-critical-hit .72s steps(6); }
.boss-damage-number { position: absolute; z-index: 8; top: 28%; left: 50%; opacity: 0; color: #fff4d2; font: 900 clamp(34px, 5vw, 92px)/1 monospace; -webkit-text-stroke: 3px #7b1600; text-shadow: 0 0 18px #ff3d00, 6px 7px #120305; transform: translate(-50%, 0); }
.boss-damage-number.visible { animation: boss-damage 1.25s ease-out; }
.boss-overlay-health { position: absolute; z-index: 5; left: 7%; right: 7%; bottom: 5%; padding: 16px 22px; border: 1px solid color-mix(in srgb, var(--widget-primary, #ff6b17) 55%, #1b121f); border-radius: var(--widget-radius, 15px); background: rgba(11,7,14,.84); backdrop-filter: blur(7px); }
.boss-overlay-health > div { font-size: clamp(17px, 1.6vw, 30px); }
.boss-overlay-health i { height: clamp(18px, 2.4vh, 34px); }
.boss-overlay-footer { position: absolute; z-index: 5; right: 5%; top: 6%; display: grid; justify-items: end; gap: 8px; padding: 14px 18px; border-right: 4px solid var(--widget-primary, #ff6b17); background: rgba(10,7,13,.76); }
.boss-overlay-footer span { font-size: clamp(13px, 1.2vw, 22px); }
.boss-overlay-footer strong { color: #ff9861; font-size: clamp(15px, 1.3vw, 24px); letter-spacing: .12em; text-transform: uppercase; }
.boss-particles { position: absolute; z-index: 7; left: 50%; top: 55%; width: 1px; height: 1px; }
.boss-particle { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: #ffb138; box-shadow: 0 0 14px #ff4b00; animation: boss-particle 1.35s ease-out var(--delay) forwards; }
.boss-victory { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; background: radial-gradient(circle, rgba(255,91,12,.65), rgba(10,3,8,.94) 55%); animation: boss-victory-in .8s ease-out; }
.boss-victory[hidden] { display: none; }
.boss-victory span { color: #ffd66b; font: 900 clamp(50px, 9vw, 150px)/1 monospace; text-transform: uppercase; text-shadow: 0 0 30px #ff4b00, 8px 8px #3b0900; }
.boss-victory strong { font-size: clamp(35px, 5vw, 80px); }
.boss-victory small { font-size: clamp(17px, 2vw, 32px); color: #ffd8c3; }
.boss-victory[data-result="timeout"],.boss-victory[data-result="stopped"] { background:radial-gradient(circle,rgba(111,66,217,.58),rgba(10,3,18,.96) 58%); }
.boss-victory[data-result="timeout"] span,.boss-victory[data-result="stopped"] span { color:#e7c8ff;text-shadow:0 0 30px #6f42d9,8px 8px #16082b; }
.preview-final-replay { animation:preview-final-replay .78s ease-out !important; }
@keyframes preview-final-replay { 0% { opacity:0;transform:scale(1.08) } 65% { opacity:1;transform:scale(.985) } 100% { opacity:1;transform:scale(1) } }

@keyframes boss-hit { 0% { transform: translateX(0); filter: brightness(1); } 25% { transform: translateX(-2.2%); filter: brightness(3) sepia(1); } 50% { transform: translateX(1.6%); } 100% { transform: translateX(0); } }
@keyframes boss-critical-hit { 0% { transform: scale(1); } 20% { transform: translateX(-4%) scale(.97); filter: brightness(4); } 42% { transform: translateX(3%) scale(1.02); } 65% { transform: translateX(-1.5%); } 100% { transform: scale(1); } }
@keyframes boss-damage { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.45); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.16); } 65% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90px) scale(.9); } }
@keyframes boss-particle { from { opacity: 1; transform: translate(0,0) rotate(0); } to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(540deg); } }
@keyframes boss-rage-pulse { 50% { opacity: .62; filter: saturate(1.6); } }
@keyframes boss-victory-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes boss-phase-shift { 0% { opacity: 0; transform: scale(.75); } 18% { opacity: 1; } 45% { opacity: .62; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.28); } }

@media (max-width: 1050px) {
  .landing-products { grid-template-columns: repeat(2, 1fr); }
  .landing-capability-grid { grid-template-columns:repeat(2,1fr); }
  .boss-studio { grid-template-columns: 1fr; }
  .viewer-boss { grid-template-columns: 1fr; }
  .viewer-boss-aside, .viewer-boss-action { display: contents; }
  .viewer-boss-stage { height: 560px; order: 1; }
  .viewer-boss-health { order: 2; }
  .viewer-boss .viewer-payment-card { order: 3; }
  .viewer-boss-leaderboard { order: 4; }
}
@media (max-width: 680px) {
  .landing-session { flex-wrap: wrap; justify-content: flex-end; }
  .landing-products { grid-template-columns: 1fr; }
  .landing-capabilities { margin-top:48px; }
  .landing-capability-grid { grid-template-columns:1fr; }
  .capability-card { min-height:0; }
  .boss-settings-row { grid-template-columns: 1fr; }
  .boss-studio-preview { min-height: 240px; }
  .boss-preview-copy { width: 58%; padding: 20px; }
  .viewer-boss-stage { height: 430px; }
}

/* v0.20 — отдельные композиции полноэкранных активностей.
   Авторская рамка остаётся декором по краям и больше не определяет размеры контента. */
.overlay-card:is(.boss-mode,.marathon-mode)::before,
.overlay-card:is(.boss-mode,.marathon-mode)::after { display: none !important; }
.overlay-card:is(.boss-mode,.marathon-mode) > .overlay-brand {
  position: fixed; z-index: 40; right: clamp(18px, 2.4vw, 44px); bottom: clamp(12px, 1.8vw, 30px);
  margin: 0; opacity: .68;
}
.boss-overlay,.marathon-overlay { isolation: isolate; background: transparent; }
.activity-backdrop { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.activity-frame { position: absolute; z-index: 1; inset: clamp(10px, 1.5vw, 28px); pointer-events: none; }

/* Марафон: заголовок, часы и статистика всегда живут в собственных зонах. */
.marathon-overlay::before {
  content: ""; position: absolute; z-index: 0; inset: clamp(20px, 4vw, 72px);
  border: 1px solid color-mix(in srgb,var(--widget-primary) 42%,transparent);
  border-radius: max(10px,var(--widget-radius));
  background:
    radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--widget-secondary) 18%,transparent),transparent 36%),
    linear-gradient(145deg,color-mix(in srgb,var(--widget-bg) var(--widget-opacity),transparent),color-mix(in srgb,var(--widget-panel) var(--widget-opacity),transparent));
  box-shadow: inset 0 0 90px rgba(0,0,0,.26),0 30px 80px rgba(0,0,0,.32);
}
.marathon-overlay-aura { inset: 12%; opacity: .42; filter: blur(4px); }
.marathon-overlay-heading {
  position: absolute; z-index: 5; top: clamp(42px, 9vh, 110px); left: clamp(50px, 9vw, 160px); right: clamp(50px, 9vw, 160px);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; min-width: 0;
}
.marathon-overlay-heading span {
  grid-row: 1; grid-column: 1; width: max-content; padding: 7px 12px;
  border: 1px solid color-mix(in srgb,var(--widget-primary) 55%,transparent); border-radius: 999px;
  background: color-mix(in srgb,var(--widget-primary) 12%,transparent);
  color: var(--widget-primary); font-size: clamp(11px,1vw,18px); letter-spacing: .16em;
}
.marathon-overlay-heading strong {
  grid-row: 2; grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--widget-title);
  font-size: clamp(28px,3.6vw,66px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap;
}
.marathon-overlay-heading small {
  grid-row: 1; grid-column: 2; justify-self: end; color: var(--widget-muted); font-size: clamp(12px,1.1vw,20px); font-weight: 750;
}
.marathon-clock {
  position: absolute; z-index: 5; top: 50%; left: 50%; width: min(72vw,1120px);
  display: grid; justify-items: center; gap: clamp(7px,1.2vh,18px); transform: translate(-50%,-44%);
}
.marathon-clock > span { color: var(--widget-muted); font-size: clamp(11px,1.05vw,19px); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.marathon-overlay-timer {
  position: static; color: var(--widget-amount); font: 900 clamp(58px,10.5vw,190px)/.88 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: -.075em; text-shadow: 0 0 36px color-mix(in srgb,var(--widget-primary) 32%,transparent); transform: none;
  white-space: nowrap;
}
.marathon-progress { width: min(72vw,1050px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; }
.marathon-progress i { grid-column: 1 / -1; display: block; height: clamp(8px,1.2vh,15px); overflow: hidden; border: 1px solid color-mix(in srgb,var(--widget-primary) 35%,transparent); border-radius: 999px; background: rgba(0,0,0,.35); }
.marathon-progress i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--widget-secondary),var(--widget-primary)); box-shadow: 0 0 18px color-mix(in srgb,var(--widget-primary) 55%,transparent); transition: width .55s ease; }
.marathon-progress small { grid-column: 1 / -1; justify-self: center; color: var(--widget-muted); font-size: clamp(11px,.95vw,17px); }
.marathon-overlay-stats {
  position: absolute; z-index: 5; left: clamp(50px,9vw,160px); right: clamp(50px,9vw,160px); bottom: clamp(45px,9vh,110px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,2vw,30px); padding: 0; border: 0; font-size: inherit;
}
.marathon-overlay-stats > span {
  display: grid; gap: 6px; min-width: 0; padding: clamp(12px,1.5vw,24px) clamp(14px,2vw,30px);
  border: 1px solid color-mix(in srgb,var(--widget-primary) 30%,transparent); border-radius: max(8px,calc(var(--widget-radius) * .65));
  background: color-mix(in srgb,var(--widget-panel) var(--widget-opacity),transparent); backdrop-filter: blur(8px);
}
.marathon-overlay-stats > span:last-child { text-align: right; }
.marathon-overlay-stats small { color: var(--widget-muted); font-size: clamp(10px,.8vw,15px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.marathon-overlay-stats b { min-width: 0; overflow: hidden; color: var(--widget-text); font-size: clamp(15px,1.45vw,27px); text-overflow: ellipsis; white-space: nowrap; }
.marathon-overlay-stats strong { color: var(--widget-amount); }
.marathon-time-flash {
  z-index: 30; top: 52%; min-width: min(70vw,900px); padding: clamp(18px,2.4vw,38px);
  border: 1px solid color-mix(in srgb,var(--widget-primary) 50%,transparent); border-radius: max(12px,var(--widget-radius));
  background: color-mix(in srgb,var(--widget-panel) 94%,transparent); box-shadow: 0 24px 80px rgba(0,0,0,.55); backdrop-filter: blur(12px);
}
.marathon-time-flash strong { font-size: clamp(42px,6vw,105px); }
.marathon-time-flash span { max-width: 90%; overflow: hidden; font-size: clamp(15px,1.7vw,30px); text-overflow: ellipsis; white-space: nowrap; }
.marathon-complete { inset: clamp(20px,4vw,72px); }

/* Рейд-босс: персонаж остаётся главным, HUD никогда не заходит на него. */
.boss-overlay::before {
  content: ""; position: absolute; z-index: 0; inset: clamp(20px,3.4vw,62px);
  border: 1px solid color-mix(in srgb,var(--widget-primary) 38%,transparent); border-radius: max(10px,var(--widget-radius));
  background: radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--widget-primary) 18%,transparent),transparent 38%),linear-gradient(180deg,color-mix(in srgb,var(--widget-bg) 72%,transparent),color-mix(in srgb,var(--widget-panel) 84%,transparent));
}
.boss-overlay-heading,.boss-overlay-footer {
  top: clamp(42px,7vh,90px); padding: clamp(12px,1.5vw,24px) clamp(14px,1.8vw,28px);
  border: 1px solid color-mix(in srgb,var(--widget-primary) 30%,transparent); border-radius: max(8px,calc(var(--widget-radius) * .7));
  background: color-mix(in srgb,var(--widget-panel) 88%,transparent); backdrop-filter: blur(9px);
}
.boss-overlay-heading { left: clamp(45px,7vw,130px); width: min(40vw,640px); border-left: 4px solid var(--widget-primary); }
.boss-overlay-heading strong { overflow: hidden; color: var(--widget-title); font-size: clamp(23px,2.8vw,50px); text-overflow: ellipsis; white-space: nowrap; }
.boss-overlay-heading b { color: var(--widget-amount); }
.boss-overlay-footer { right: clamp(45px,7vw,130px); width: min(34vw,520px); border-right: 4px solid var(--widget-primary); }
.boss-overlay-footer span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-overlay-footer strong { color: var(--widget-amount); }
.boss-character-wrap { bottom: clamp(80px,10vh,150px); width: min(38vw,620px); height: min(70vh,760px); }
.boss-character-wrap img { width: 100%; height: 100%; object-fit: contain; }
.boss-overlay-health {
  left: clamp(55px,8vw,150px); right: clamp(55px,8vw,150px); bottom: clamp(44px,6vh,80px);
  padding: clamp(13px,1.4vw,22px) clamp(16px,2vw,32px); border-radius: max(8px,calc(var(--widget-radius) * .72));
}
.boss-victory { inset: clamp(20px,4vw,72px); }

/* Тема меняет характер сцены, но не ломает её геометрию. */
[data-widget-theme="minimal"] :is(.boss-overlay,.marathon-overlay)::before { background: rgba(8,8,10,.76); border-color: rgba(255,255,255,.18); box-shadow: none; }
[data-widget-theme="minimal"] :is(.boss-overlay-heading,.boss-overlay-footer,.boss-overlay-health,.marathon-overlay-stats>span,.marathon-time-flash) { border-radius: 0; background: rgba(8,8,10,.82); box-shadow: none; }
[data-widget-theme="minimal"] .marathon-overlay-heading span { border-radius: 0; background: transparent; }

[data-widget-theme="pixel"] :is(.boss-overlay,.marathon-overlay)::before { border: 5px solid var(--widget-primary); border-radius: 0; background: linear-gradient(rgba(255,255,255,.025) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.025) 2px,transparent 2px),color-mix(in srgb,var(--widget-bg) 92%,transparent); background-size: 24px 24px; box-shadow: 12px 12px 0 color-mix(in srgb,var(--widget-secondary) 55%,#000); }
[data-widget-theme="pixel"] :is(.boss-overlay-heading,.boss-overlay-footer,.boss-overlay-health,.marathon-overlay-stats>span,.marathon-time-flash) { border: 3px solid var(--widget-primary); border-radius: 0; box-shadow: 6px 6px 0 var(--widget-secondary); }
[data-widget-theme="pixel"] :is(.boss-overlay-health i,.marathon-progress i,.marathon-progress i b) { border-radius: 0; }

[data-widget-theme="anime"] :is(.boss-overlay,.marathon-overlay)::before { border: 3px solid color-mix(in srgb,var(--widget-primary) 75%,#fff); border-radius: 42px; background: radial-gradient(circle at 13% 18%,rgba(255,255,255,.16) 0 5%,transparent 5.5%),radial-gradient(circle at 86% 72%,color-mix(in srgb,var(--widget-secondary) 28%,transparent) 0 9%,transparent 9.5%),linear-gradient(145deg,color-mix(in srgb,var(--widget-bg) 82%,transparent),color-mix(in srgb,var(--widget-panel) 88%,transparent)); box-shadow: 0 20px 70px color-mix(in srgb,var(--widget-primary) 23%,transparent),inset 0 0 0 8px rgba(255,255,255,.04); }
[data-widget-theme="anime"] .activity-frame::before,[data-widget-theme="anime"] .activity-frame::after { content:"✦"; position:absolute; color:color-mix(in srgb,var(--widget-primary) 75%,#fff); font-size:clamp(28px,4vw,70px); text-shadow:0 0 18px var(--widget-primary); }
[data-widget-theme="anime"] .activity-frame::before { top:5%; right:5%; }
[data-widget-theme="anime"] .activity-frame::after { bottom:6%; left:5%; }
[data-widget-theme="anime"] :is(.boss-overlay-heading,.boss-overlay-footer,.boss-overlay-health,.marathon-overlay-stats>span,.marathon-time-flash) { border: 2px solid color-mix(in srgb,var(--widget-primary) 55%,#fff); border-radius: 24px; }

[data-widget-theme="cyberpunk"] :is(.boss-overlay,.marathon-overlay)::before { border: 2px solid var(--widget-primary); border-radius: 0; clip-path: polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,36px 100%,0 calc(100% - 36px)); background: linear-gradient(rgba(0,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.055) 1px,transparent 1px),linear-gradient(145deg,rgba(3,12,22,.92),rgba(5,24,37,.88)); background-size: 34px 34px; box-shadow: inset 0 0 70px color-mix(in srgb,var(--widget-secondary) 18%,transparent),0 0 35px color-mix(in srgb,var(--widget-primary) 28%,transparent); }
[data-widget-theme="cyberpunk"] .activity-frame { border: 2px solid var(--widget-secondary); clip-path: polygon(0 0,20% 0,20% 3px,80% 3px,80% 0,100% 0,100% 100%,80% 100%,80% calc(100% - 3px),20% calc(100% - 3px),20% 100%,0 100%); filter:drop-shadow(0 0 8px var(--widget-primary)); }
[data-widget-theme="cyberpunk"] :is(.boss-overlay-heading,.boss-overlay-footer,.boss-overlay-health,.marathon-overlay-stats>span,.marathon-time-flash) { border-radius:0; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); }

[data-widget-theme="gothic"] .activity-frame,[data-widget-theme="blood"] .activity-frame,[data-widget-theme="royal"] .activity-frame { inset: clamp(4px,.7vw,14px); box-sizing:border-box; border:clamp(38px,5.5vw,92px) solid transparent; border-image-slice:22% 18% fill; border-image-repeat:stretch; opacity:var(--widget-opacity-decimal); }
[data-widget-theme="gothic"] .activity-frame { border-image-source:url("/theme-gothic-realistic.webp"); }
[data-widget-theme="blood"] .activity-frame { border-image-source:url("/theme-horror-realistic.webp"); }
[data-widget-theme="royal"] .activity-frame { border-image-source:url("/theme-royal-realistic.webp"); }
[data-widget-theme="gothic"] :is(.boss-overlay,.marathon-overlay)::before { inset:clamp(38px,6vw,100px); border-color:#77707e66; border-radius:2px; background:radial-gradient(ellipse at 50% 8%,rgba(98,84,112,.2),transparent 42%),linear-gradient(155deg,rgba(14,12,17,.94),rgba(3,3,5,.96)); }
[data-widget-theme="blood"] :is(.boss-overlay,.marathon-overlay)::before { inset:clamp(38px,6vw,100px); border-color:#78142188; border-radius:2px; background:radial-gradient(circle at 50% 50%,rgba(93,9,19,.22),transparent 52%),linear-gradient(145deg,rgba(22,18,19,.95),rgba(4,3,4,.98)); }
[data-widget-theme="royal"] :is(.boss-overlay,.marathon-overlay)::before { inset:clamp(38px,6vw,100px); border-color:#a77d34aa; border-radius:5px; background:radial-gradient(ellipse at 50% 0,rgba(136,74,27,.28),transparent 46%),linear-gradient(145deg,rgba(45,25,10,.95),rgba(11,6,3,.98)); }
[data-widget-theme="gothic"] :is(.boss-overlay-heading,.boss-overlay-footer,.boss-overlay-health,.marathon-overlay-stats>span,.marathon-time-flash),
[data-widget-theme="blood"] :is(.boss-overlay-heading,.boss-overlay-footer,.boss-overlay-health,.marathon-overlay-stats>span,.marathon-time-flash),
[data-widget-theme="royal"] :is(.boss-overlay-heading,.boss-overlay-footer,.boss-overlay-health,.marathon-overlay-stats>span,.marathon-time-flash) { border-radius:2px; box-shadow:inset 0 0 24px rgba(0,0,0,.72),0 8px 24px rgba(0,0,0,.34); }
[data-widget-theme="royal"] .marathon-overlay-heading::before { content:"♛"; color:#d7ae54; font-size:clamp(25px,3vw,54px); }
[data-widget-theme="royal"] .marathon-overlay-heading { grid-template-columns:auto auto 1fr; }
[data-widget-theme="royal"] .marathon-overlay-heading span { grid-column:2; }
[data-widget-theme="royal"] .marathon-overlay-heading strong { grid-column:1 / -1; font-family:Georgia,"Times New Roman",serif; }
[data-widget-theme="royal"] .marathon-overlay-heading small { grid-column:3; }
[data-widget-theme="blood"] .marathon-overlay-timer { text-shadow:0 0 12px #b40018,0 4px 2px #000; }

/* Положение таймера из редактора сохраняет смысл и в марафоне. */
[data-timer-position="left"] .marathon-clock { left:clamp(70px,11vw,200px); transform:translate(0,-44%); justify-items:start; }
[data-timer-position="left"] .marathon-progress small { justify-self:start; }
[data-timer-position="right"] .marathon-clock { left:auto; right:clamp(70px,11vw,200px); transform:translate(0,-44%); justify-items:end; }
[data-timer-position="right"] .marathon-progress small { justify-self:end; }
[data-timer-position="center"] .marathon-clock { left:50%; right:auto; transform:translate(-50%,-44%); justify-items:center; }

/* Редактор показывает настоящую сцену 16:9 целиком, без внутреннего скролла. */
.design-preview-stage { min-height:0; overflow:hidden; aspect-ratio:16/9; padding:0; border-radius:18px; }
.design-widget-preview.boss-mode,.design-widget-preview.marathon-mode { width:960px; height:540px; }
.design-widget-preview .design-activity-preview { min-height:0; }
.design-widget-preview .boss-character-wrap { width:300px; height:390px; bottom:64px; }
.design-widget-preview .boss-overlay-heading,.design-widget-preview .boss-overlay-footer { top:38px; }
.design-widget-preview .boss-overlay-heading { left:55px; }
.design-widget-preview .boss-overlay-footer { right:55px; }

/* v0.21 — полноценная рейдовая группа: пять лучших бойцов видны в OBS. */
.boss-party {
  position: absolute; z-index: 6; left: clamp(42px, 5vw, 96px); bottom: clamp(105px, 14vh, 185px);
  width: min(28vw, 440px); display: grid; gap: clamp(5px, .7vh, 10px);
}
.boss-party-slot {
  min-width: 0; display: grid; grid-template-columns: clamp(32px, 3vw, 48px) minmax(0, 1fr); align-items: center;
  gap: clamp(8px, .8vw, 13px); padding: clamp(7px, .7vw, 11px) clamp(9px, 1vw, 15px);
  border: 1px solid color-mix(in srgb, var(--widget-primary, #ff6b17) 38%, transparent);
  border-left: 3px solid var(--widget-primary, #ff6b17); border-radius: max(5px, calc(var(--widget-radius, 15px) * .55));
  background: color-mix(in srgb, var(--widget-panel, #130e18) 88%, transparent);
  box-shadow: 0 8px 24px rgba(0,0,0,.28); backdrop-filter: blur(7px);
}
.boss-party-slot.empty { opacity: .48; border-left-color: var(--widget-muted, #80758a); }
.boss-party-avatar {
  display: grid; place-items: center; width: clamp(32px, 3vw, 48px); aspect-ratio: 1; border-radius: 50%;
  color: #fff; font: 900 clamp(13px, 1.2vw, 20px)/1 var(--widget-font, Inter, sans-serif);
  background: linear-gradient(135deg, var(--widget-primary, #ff6b17), var(--widget-secondary, #6f42d9));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 0 16px color-mix(in srgb, var(--widget-primary, #ff6b17) 34%, transparent);
}
.boss-party-slot > div { min-width: 0; display: grid; gap: 2px; }
.boss-party-slot strong,.boss-party-slot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-party-slot strong { color: var(--widget-text, #fff); font-size: clamp(12px, 1vw, 17px); }
.boss-party-slot small { color: var(--widget-muted, #a99db2); font-size: clamp(10px, .82vw, 14px); }
[data-widget-theme="pixel"] .boss-party-slot { border-width: 2px; border-radius: 0; box-shadow: 4px 4px 0 var(--widget-secondary); }
[data-widget-theme="cyberpunk"] .boss-party-slot { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-widget-theme="gothic"] .boss-party-slot,
[data-widget-theme="blood"] .boss-party-slot,
[data-widget-theme="royal"] .boss-party-slot { border-radius: 2px; box-shadow: inset 0 0 16px rgba(0,0,0,.68), 0 7px 18px rgba(0,0,0,.3); }
.design-widget-preview .boss-party { left: 45px; bottom: 105px; width: 250px; gap: 4px; }
.design-widget-preview .boss-party-slot { grid-template-columns: 28px minmax(0,1fr); gap: 7px; padding: 5px 8px; }
.design-widget-preview .boss-party-avatar { width: 28px; font-size: 11px; }
.design-widget-preview .boss-party-slot strong { font-size: 10px; }
.design-widget-preview .boss-party-slot small { font-size: 8px; }
@media (max-aspect-ratio: 4/3) {
  .boss-party { width: min(34vw, 410px); left: 4%; bottom: 15%; }
}

/* v0.24 — рейд, плавная битва и один авторитетный слой безопасных зон. */
[data-design-for][hidden] { display: none !important; }

.boss-roster-picker { display: grid; gap: 10px; }
.boss-roster-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.boss-roster-grid button { min-width: 0; padding: 8px; display: grid; grid-template-rows: 105px auto; gap: 7px; border: 1px solid #44314c; border-radius: 13px; color: #f8f1fa; background: #17111d; cursor: pointer; }
.boss-roster-grid button:hover { border-color: #79528a; }
.boss-roster-grid button.selected { border-color: #ff7a25; box-shadow: inset 0 0 0 1px #ff7a25,0 0 22px rgba(255,122,37,.12); background: #241624; }
.boss-roster-grid img { width: 100%; height: 105px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.65)); }
.boss-roster-grid span { min-width: 0; display: grid; gap: 2px; text-align: left; }
.boss-roster-grid strong,.boss-roster-grid small { overflow: hidden; text-overflow: ellipsis; }
.boss-roster-grid strong { font-size: 11px; white-space: nowrap; }
.boss-roster-grid small { color: #aa9ab3; font-size: 9px; line-height: 1.25; }

.boss-top-heading { display: grid; gap: 4px; margin-bottom: 9px; }
.boss-top-heading small { color: #ad9db7; font-size: 11px; line-height: 1.4; font-weight: 500; }
.boss-studio-party-panel > div:first-child { align-items: flex-start; }
.boss-studio-party-panel > div:first-child small { max-width: 55%; text-align: right; line-height: 1.35; }

.boss-class-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
.boss-class-options button:last-child { grid-column: auto; }

/* В полноэкранных активностях рамка живёт только внутри сцены. Вторая рамка корневой карточки отключена. */
.overlay-card:is(.boss-mode,.marathon-mode,.team-battle-mode) {
  position: relative; width: 100vw; height: 100vh; max-width: none; padding: 0 !important; overflow: hidden;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important;
}
.overlay-card:is(.boss-mode,.marathon-mode,.team-battle-mode)::before,
.overlay-card:is(.boss-mode,.marathon-mode,.team-battle-mode)::after { display: none !important; }
[data-widget-theme="gothic"] .activity-frame,
[data-widget-theme="blood"] .activity-frame,
[data-widget-theme="royal"] .activity-frame {
  z-index: 2; border-width: clamp(30px,4.5vw,72px); border-image-slice: 24% 20% !important; pointer-events: none;
}
:is(.boss-overlay,.marathon-overlay,.team-battle-overlay) > :not(.activity-backdrop,.activity-frame,.boss-particles) { z-index: 5; }

/* На аукционе тяжёлая рамка остаётся одна и контент никогда не заходит под её внутренний рисунок. */
[data-widget-theme="gothic"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after,
[data-widget-theme="blood"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after,
[data-widget-theme="royal"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after {
  border-image-slice: 27% 23% !important; border-image-width: 84px 76px 72px !important;
}
[data-widget-theme="gothic"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after,
[data-widget-theme="blood"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after {
  border: 0 !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
[data-widget-theme="gothic"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after { background-image:url("/theme-gothic-auction-v2.svg"); }
[data-widget-theme="blood"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after { background-image:url("/theme-horror-auction-v2.svg"); }

/* Таймер — отдельный контрастный токен: суммы и фирменные акценты темы не меняются. */
[data-widget-theme="pixel"] :is(.boss-overlay-heading b,.marathon-overlay-timer,.marathon-time-flash strong,.team-battle-hud-center b,.team-battle-hud-timer strong),
[data-widget-theme="anime"] :is(.boss-overlay-heading b,.marathon-overlay-timer,.marathon-time-flash strong,.team-battle-hud-center b,.team-battle-hud-timer strong) {
  color: var(--widget-timer) !important;
}
.design-widget-preview[data-widget-theme="gothic"] #preview-auction,
.design-widget-preview[data-widget-theme="blood"] #preview-auction,
.design-widget-preview[data-widget-theme="royal"] #preview-auction { padding: 126px 148px 112px !important; }

/* Поле битвы теперь является полноценной сценой, а здоровье баз лежит поверх нижнего HUD. */
.team-battle-control { overflow: hidden; }
.team-battle-live-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.team-battle-live-heading h2 { margin: 3px 0 0; font-size: 24px; }
.team-battle-live-heading p { max-width: 320px; margin: 0; color: #aa9bb5; text-align: right; font-size: 12px; line-height: 1.45; }
.team-battle-arena-shell { position: relative; overflow: hidden; border: 1px solid #4b3659; border-radius: 18px; background: #11131d; box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.team-battle-canvas { border-radius: inherit; image-rendering: auto; }
.team-battle-arena-shell .team-base-bars { position: absolute; z-index: 6; left: 18px; right: 18px; bottom: 15px; margin: 0; padding: 10px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(7,8,14,.82); backdrop-filter: blur(8px); }
.team-base-bars > strong { min-width: 78px; text-align: center; color: #fff3e7; font: 900 20px/1 ui-monospace,monospace; }
.team-base-bars i { height: 8px; border: 1px solid rgba(255,255,255,.08); }
.team-unit-legend { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.team-unit-legend > span { min-width: 0; display: grid; grid-template-columns: 28px 1fr; gap: 1px 7px; align-items: center; padding: 9px; border: 1px solid #3c2d45; border-radius: 11px; background: #17111d; }
.team-unit-legend i { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 34px; color: #ff9b54; font-style: normal; font-size: 19px; }
.team-unit-legend b { font-size: 11px; }
.team-unit-legend small { overflow: hidden; color: #9e8fab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.team-battle-overlay { overflow: hidden; }
.team-battle-overlay .team-battle-canvas { z-index: 0; border-radius: 0; }
.team-battle-overlay .activity-frame { z-index: 3; }
.team-battle-overlay-title { z-index: 7; left: max(5%,var(--scene-x,5%)); right: max(5%,var(--scene-x,5%)); top: max(5%,var(--scene-y,5%)); }
.team-battle-overlay-result { z-index: 10; }
.design-widget-preview.team-battle-mode { width: 1280px; height: 720px; }
.design-widget-preview.team-battle-mode .team-battle-overlay-title { left: 78px; right: 78px; top: 58px; }

@media (max-width: 900px) {
  .boss-roster-grid { grid-template-columns: 1fr; }
  .boss-roster-grid button { grid-template-columns: 88px 1fr; grid-template-rows: auto; align-items: center; }
  .boss-roster-grid img { height: 76px; }
  .boss-studio-party-panel > div:first-child { display: grid; }
  .boss-studio-party-panel > div:first-child small { max-width: none; text-align: left; }
  .team-unit-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .boss-class-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-battle-live-heading { align-items: flex-start; flex-direction: column; }
  .team-battle-live-heading p { text-align: left; }
}
.design-widget-preview .boss-overlay-health { left:70px; right:70px; bottom:34px; }
.design-widget-preview .marathon-overlay-heading { top:54px; left:85px; right:85px; }
.design-widget-preview .marathon-overlay-heading strong { font-size:36px; }
.design-widget-preview .marathon-clock { width:680px; }
.design-widget-preview .marathon-overlay-timer { font-size:102px; }
.design-widget-preview .marathon-overlay-stats { left:85px; right:85px; bottom:54px; font-size:inherit; }
.design-widget-preview .marathon-overlay-stats b { font-size:17px; }
.design-widget-preview .marathon-overlay-stats small { font-size:10px; }
.design-widget-preview .activity-frame { border-width:46px; }

/* v0.19 · общий слой активности и стрим-марафон */
.activity-current #toggle-main-widget { white-space: nowrap; }
.activity-current #toggle-main-widget.widget-hidden { border-color: #ff874b; color: #ffad7a; }
.marathon-studio { display: grid; grid-template-columns: minmax(330px, .82fr) minmax(480px, 1.18fr); gap: 18px; }
.marathon-settings-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marathon-rate-card { display: grid; gap: 14px; margin: 18px 0; padding: 17px; border: 1px solid #46304f; border-radius: 16px; background: #17111d; }
.marathon-rate-card > strong { font-size: 17px; }
.marathon-rate-card > small { color: #cbbbd5; }
.marathon-studio-preview { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 225px; margin-bottom: 18px; padding: 28px; overflow: hidden; border: 1px solid #563675; border-radius: 22px; background: radial-gradient(circle at 82% 48%, rgba(255,111,29,.22), transparent 28%), linear-gradient(135deg, #160d22, #241035 55%, #12101c); }
.marathon-studio-preview h2 { margin: 7px 0; font-size: clamp(25px, 3vw, 43px); }
.marathon-big-timer { color: #ff9b52; font: 900 clamp(36px, 5.4vw, 76px)/1 monospace; letter-spacing: -.06em; text-shadow: 0 0 28px rgba(255,100,26,.35); }
.marathon-history-row > span { display: grid; gap: 3px; }
.marathon-history-row > b, .marathon-added-preview { color: #ff9b52; }

.viewer-marathon { display: grid; gap: 18px; width: min(900px, 100%); margin-inline: auto; }
.viewer-marathon-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border: 1px solid #50335e; border-radius: 24px; background: radial-gradient(circle at 84% 50%, rgba(255,112,25,.2), transparent 31%), linear-gradient(135deg, #171020, #281238); }
.viewer-marathon-hero h2 { margin: 5px 0 8px; font-size: clamp(27px, 4vw, 46px); }
.viewer-marathon-hero > strong { color: #ff9952; font: 900 clamp(37px, 7vw, 76px)/1 monospace; white-space: nowrap; }
.viewer-marathon-rule { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border: 1px solid #3d2e45; border-radius: 15px; background: #17121c; }
.viewer-marathon-rule span { font-weight: 850; }
.viewer-marathon-rule small { color: #ad9bb9; }
.marathon-added-preview { display: block; margin-top: 12px; font-size: 16px; }

.overlay-card.marathon-mode { width: 100vw; height: 100vh; max-width: none; transform: none !important; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; overflow: hidden; }
.marathon-overlay { position: absolute; inset: 0; overflow: hidden; font-family: var(--widget-font, Inter, sans-serif); color: var(--widget-text, #fff); }
.marathon-overlay::before { content: ""; position: absolute; inset: 5%; border: 1px solid color-mix(in srgb, var(--widget-primary, #ff741c) 55%, transparent); border-radius: var(--widget-radius, 20px); background: color-mix(in srgb, var(--widget-panel, #17111d) var(--widget-opacity, 90%), transparent); box-shadow: inset 0 0 80px color-mix(in srgb, var(--widget-primary, #ff741c) 10%, transparent), 0 25px 70px rgba(0,0,0,.3); }
.marathon-overlay-aura { position: absolute; inset: 10%; opacity: .4; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--widget-primary, #ff741c) 28%, transparent), transparent 45%); animation: marathon-aura 4s ease-in-out infinite; }
.marathon-overlay-heading { position: absolute; z-index: 2; top: 11%; left: 10%; display: grid; gap: 6px; }
.marathon-overlay-heading span { color: var(--widget-primary, #ff8a3d); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.marathon-overlay-heading strong { color: var(--widget-title, #fff); font-size: clamp(30px, 4.2vw, 74px); }
.marathon-overlay-timer { position: absolute; z-index: 2; top: 39%; left: 50%; color: var(--widget-amount, var(--widget-primary, #ff8a3d)); font: 900 clamp(70px, 13vw, 230px)/1 monospace; letter-spacing: -.08em; text-shadow: 0 0 38px color-mix(in srgb, var(--widget-primary, #ff741c) 45%, transparent); transform: translate(-50%, -50%); }
.marathon-overlay-stats { position: absolute; z-index: 2; left: 10%; right: 10%; bottom: 12%; display: flex; justify-content: space-between; gap: 20px; padding: 18px 22px; border-top: 1px solid color-mix(in srgb, var(--widget-primary, #ff741c) 45%, transparent); font-size: clamp(18px, 2vw, 34px); }
.marathon-overlay-stats strong { color: var(--widget-amount, var(--widget-primary, #ff8a3d)); }
.marathon-time-flash { position: absolute; z-index: 5; top: 58%; left: 50%; display: grid; justify-items: center; gap: 6px; opacity: 0; transform: translate(-50%, 25px) scale(.8); }
.marathon-time-flash strong { color: var(--widget-amount, #ff9a52); font: 900 clamp(38px, 6vw, 100px)/1 monospace; text-shadow: 0 0 25px color-mix(in srgb, var(--widget-primary, #ff741c) 60%, transparent); }
.marathon-time-flash span { font-size: clamp(17px, 2vw, 34px); font-weight: 800; }
.marathon-time-flash.visible { animation: marathon-time-in 4.4s ease both; }
.marathon-complete { position: absolute; z-index: 10; inset: 5%; display: grid; place-content: center; justify-items: center; gap: 12px; border-radius: var(--widget-radius, 20px); background: radial-gradient(circle, color-mix(in srgb, var(--widget-primary, #ff741c) 32%, #160d22), rgba(10,7,14,.96) 65%); }
.marathon-complete[hidden] { display: none; }
.marathon-complete span { color: var(--widget-primary, #ff9a52); font-size: clamp(20px, 3vw, 50px); font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.marathon-complete strong { font-size: clamp(45px, 7vw, 120px); }

.preview-actions { flex-wrap: wrap; }
.preview-select { display: grid; gap: 5px; min-width: 145px; }
.preview-select span { color: #aa98b5; font-size: 11px; font-weight: 750; }
.preview-select select { min-height: 42px; }
.design-widget-preview.boss-mode, .design-widget-preview.marathon-mode { position: relative; width: 760px; height: 470px; max-width: none; padding: 0; transform: none !important; overflow: hidden; }
.design-widget-preview .design-activity-preview { position: relative; min-height: 420px; }
.design-widget-preview .design-preview-boss, .design-widget-preview .design-preview-marathon { position: absolute; inset: 0; min-height: 0; }
.design-widget-preview .boss-character-wrap { width: 270px; }
.design-widget-preview .boss-overlay-heading { top: 22px; left: 24px; }
.design-widget-preview .boss-overlay-footer { top: 22px; right: 24px; }
.design-widget-preview .boss-overlay-health { left: 30px; right: 30px; bottom: 25px; }
.design-widget-preview .marathon-overlay-timer { font-size: 92px; }
.design-widget-preview .marathon-overlay-heading { top: 55px; }
.design-widget-preview .marathon-overlay-stats { bottom: 55px; font-size: 17px; }
.design-preview-pulse { animation: design-preview-pulse .65s ease-out; }

@keyframes marathon-aura { 50% { opacity: .75; transform: scale(1.06); } }
@keyframes marathon-time-in { 0% { opacity: 0; transform: translate(-50%, 35px) scale(.72); } 14%, 70% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -35px) scale(.95); } }
@keyframes design-preview-pulse { 45% { filter: brightness(1.35); } }

@media (max-width: 1050px) {
  .marathon-studio { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .marathon-settings-row { grid-template-columns: 1fr; }
  .marathon-studio-preview, .viewer-marathon-hero, .viewer-marathon-rule { align-items: flex-start; flex-direction: column; }
  .marathon-big-timer, .viewer-marathon-hero > strong { font-size: 42px; }
}

/* Финальный каскад v0.20: перекрывает прежнюю экспериментальную раскладку марафона. */
.boss-overlay[data-phase]::before {
  inset:clamp(20px,3.4vw,62px); border:1px solid color-mix(in srgb,var(--widget-primary) 38%,transparent); border-radius:max(10px,var(--widget-radius));
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--widget-primary) 18%,transparent),transparent 38%),linear-gradient(180deg,color-mix(in srgb,var(--widget-bg) 72%,transparent),color-mix(in srgb,var(--widget-panel) 84%,transparent));
}
.boss-overlay[data-phase="2"]::before { background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--widget-primary) 27%,transparent),transparent 40%),linear-gradient(180deg,color-mix(in srgb,var(--widget-bg) 76%,transparent),color-mix(in srgb,var(--widget-panel) 88%,transparent)); }
.boss-overlay[data-phase="3"]::before { background:radial-gradient(circle at 50% 60%,color-mix(in srgb,#ff3217 32%,transparent),transparent 42%),linear-gradient(180deg,color-mix(in srgb,var(--widget-bg) 78%,transparent),color-mix(in srgb,#2d0705 88%,transparent)); }
[data-widget-theme="gothic"] .boss-overlay[data-phase]::before { inset:clamp(38px,6vw,100px); border-radius:2px; background:radial-gradient(ellipse at 50% 58%,rgba(116,91,131,.28),transparent 42%),linear-gradient(155deg,rgba(14,12,17,.94),rgba(3,3,5,.96)); }
[data-widget-theme="blood"] .boss-overlay[data-phase]::before { inset:clamp(38px,6vw,100px); border-radius:2px; background:radial-gradient(circle at 50% 58%,rgba(132,10,24,.32),transparent 45%),linear-gradient(145deg,rgba(22,18,19,.95),rgba(4,3,4,.98)); }
[data-widget-theme="royal"] .boss-overlay[data-phase]::before { inset:clamp(38px,6vw,100px); border-radius:5px; background:radial-gradient(ellipse at 50% 55%,rgba(142,81,31,.32),transparent 46%),linear-gradient(145deg,rgba(45,25,10,.95),rgba(11,6,3,.98)); }
.marathon-overlay::before {
  inset:clamp(20px,4vw,72px); border-color:color-mix(in srgb,var(--widget-primary) 42%,transparent);
  border-radius:max(10px,var(--widget-radius));
  background:radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--widget-secondary) 18%,transparent),transparent 36%),linear-gradient(145deg,color-mix(in srgb,var(--widget-bg) var(--widget-opacity),transparent),color-mix(in srgb,var(--widget-panel) var(--widget-opacity),transparent));
  box-shadow:inset 0 0 90px rgba(0,0,0,.26),0 30px 80px rgba(0,0,0,.32);
}
.marathon-overlay-heading {
  z-index:5; top:clamp(42px,9vh,110px); left:clamp(50px,9vw,160px); right:clamp(50px,9vw,160px);
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 18px; min-width:0;
}
.marathon-overlay-heading span { grid-row:1; grid-column:1; width:max-content; padding:7px 12px; border:1px solid color-mix(in srgb,var(--widget-primary) 55%,transparent); border-radius:999px; background:color-mix(in srgb,var(--widget-primary) 12%,transparent); font-size:clamp(11px,1vw,18px); }
.marathon-overlay-heading strong { grid-row:2; grid-column:1/-1; min-width:0; overflow:hidden; font-size:clamp(28px,3.6vw,66px); line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.marathon-overlay-heading small { grid-row:1; grid-column:2; justify-self:end; color:var(--widget-muted); font-size:clamp(12px,1.1vw,20px); font-weight:750; }
.marathon-overlay-timer { position:static; z-index:auto; top:auto; left:auto; font:900 clamp(58px,10.5vw,190px)/.88 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.075em; transform:none; white-space:nowrap; }
.marathon-overlay-stats { z-index:5; left:clamp(50px,9vw,160px); right:clamp(50px,9vw,160px); bottom:clamp(45px,9vh,110px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,30px); padding:0; border:0; font-size:inherit; }
.marathon-time-flash { z-index:30; top:52%; min-width:min(70vw,900px); padding:clamp(18px,2.4vw,38px); border:1px solid color-mix(in srgb,var(--widget-primary) 50%,transparent); border-radius:max(12px,var(--widget-radius)); background:color-mix(in srgb,var(--widget-panel) 94%,transparent); box-shadow:0 24px 80px rgba(0,0,0,.55); backdrop-filter:blur(12px); }
.marathon-complete { inset:clamp(20px,4vw,72px); }
.design-preview-stage { min-height:0; overflow:hidden; aspect-ratio:16/9; padding:0; }
.design-widget-preview { width:960px; max-width:none; }
.design-widget-preview.boss-mode,.design-widget-preview.marathon-mode { width:960px; height:540px; }
.design-widget-preview .design-activity-preview { min-height:0; }
.design-widget-preview .design-preview-boss,.design-widget-preview .design-preview-marathon { position:absolute; inset:0; min-height:0; }
.design-widget-preview .boss-character-wrap { width:300px; height:390px; bottom:64px; }
.design-widget-preview .boss-overlay-heading,.design-widget-preview .boss-overlay-footer { top:38px; }
.design-widget-preview .boss-overlay-heading { left:55px; }
.design-widget-preview .boss-overlay-footer { right:55px; }
.design-widget-preview .boss-overlay-health { left:70px; right:70px; bottom:34px; }
.design-widget-preview .marathon-overlay-heading { top:54px; left:85px; right:85px; }
.design-widget-preview .marathon-overlay-heading strong { font-size:36px; }
.design-widget-preview .marathon-clock { width:680px; }
.design-widget-preview .marathon-overlay-timer { font-size:102px; }
.design-widget-preview .marathon-overlay-stats { left:85px; right:85px; bottom:54px; font-size:inherit; }
.design-widget-preview .marathon-overlay-stats b { font-size:17px; }
.design-widget-preview .marathon-overlay-stats small { font-size:10px; }
.design-widget-preview .activity-frame { border-width:46px; }

/* v0.22 — единая сцена 16:9, безопасные зоны и управляемая композиция. */
:is(.boss-overlay,.marathon-overlay) {
  --scene-x: clamp(56px, 6vw, 112px);
  --scene-y: clamp(42px, 6vh, 78px);
}
[data-widget-theme="gothic"] :is(.boss-overlay,.marathon-overlay),
[data-widget-theme="blood"] :is(.boss-overlay,.marathon-overlay),
[data-widget-theme="royal"] :is(.boss-overlay,.marathon-overlay) {
  --scene-x: clamp(92px, 10vw, 178px);
  --scene-y: clamp(72px, 10vh, 126px);
}
.overlay-card:is(.boss-mode,.marathon-mode) > .overlay-brand {
  position: absolute !important;
  z-index: 40;
  right: var(--scene-x, 6vw);
  bottom: clamp(12px, 2vh, 28px);
  margin: 0;
  opacity: .72;
}
.boss-overlay-heading {
  top: var(--scene-y); left: var(--scene-x); right: auto; width: min(31vw, 560px);
  box-sizing: border-box; text-align: left; justify-items: start; transform: none;
}
[data-boss-heading-position="center"] .boss-overlay-heading {
  left: 50%; right: auto; width: min(36vw, 650px); text-align: center; justify-items: center; transform: translateX(-50%);
}
[data-boss-heading-position="right"] .boss-overlay-heading {
  left: auto; right: var(--scene-x); text-align: right; justify-items: end;
}
.boss-overlay-footer {
  top: var(--scene-y); right: var(--scene-x); left: auto; width: min(29vw, 520px); box-sizing: border-box;
}
[data-boss-heading-position="right"] .boss-overlay-footer { right: auto; left: var(--scene-x); justify-items: start; text-align: left; border-right-width: 1px; border-left: 4px solid var(--widget-primary); }
[data-boss-heading-position="center"] .boss-overlay-footer { top: calc(var(--scene-y) + clamp(112px, 14vh, 160px)); }
.boss-character-wrap {
  left: 50%; bottom: clamp(112px, 15vh, 160px); width: min(39vw, 630px); height: min(62vh, 620px); transform: translateX(-50%);
}
.boss-party {
  left: var(--scene-x); right: auto; bottom: clamp(126px, 18vh, 188px); width: min(24vw, 370px);
}
[data-boss-party-position="right"] .boss-party { left: auto; right: var(--scene-x); }
.boss-overlay-health {
  left: var(--scene-x); right: var(--scene-x); bottom: var(--scene-y); margin: 0;
}
.boss-party-slot { min-height: 38px; box-sizing: border-box; }

.marathon-overlay-heading {
  top: var(--scene-y); left: var(--scene-x); right: var(--scene-x); width: auto; text-align: left; justify-items: start;
}
[data-marathon-heading-position="center"] .marathon-overlay-heading { text-align: center; justify-items: center; }
[data-marathon-heading-position="center"] .marathon-overlay-heading small { justify-self: center; }
[data-marathon-heading-position="right"] .marathon-overlay-heading { text-align: right; justify-items: end; }
[data-marathon-heading-position="right"] .marathon-overlay-heading small { justify-self: end; }
.marathon-clock { top: 49%; width: min(70vw, 1040px); }
.marathon-overlay-stats { left: var(--scene-x); right: var(--scene-x); bottom: var(--scene-y); }

/* Авторские рамки лежат по краям, контент начинается только внутри рамки. */
[data-widget-theme="gothic"] .activity-frame,
[data-widget-theme="blood"] .activity-frame,
[data-widget-theme="royal"] .activity-frame { z-index: 2; }
:is(.boss-overlay,.marathon-overlay) > :not(.activity-backdrop,.activity-frame,.boss-particles) { z-index: 5; }

/* Редактор рендерит тот же виртуальный холст 1280×720, а не урезанную карточку. */
.design-preview-stage { min-height: 0; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; }
.design-widget-preview,
.design-widget-preview.boss-mode,
.design-widget-preview.marathon-mode {
  position: relative; width: 1280px; height: 720px; max-width: none; margin: 0; padding: 0 !important;
  overflow: hidden; transform: none !important;
}
.design-widget-preview .design-activity-preview { position: relative; z-index: 3; box-sizing: border-box; min-height: 0; }
.design-widget-preview #preview-auction { width: 100%; height: 100%; padding: 52px 68px 48px; }
.design-widget-preview[data-widget-theme="gothic"] #preview-auction,
.design-widget-preview[data-widget-theme="blood"] #preview-auction,
.design-widget-preview[data-widget-theme="royal"] #preview-auction { padding: 116px 138px 102px; }
.design-widget-preview[data-widget-theme="anime"] #preview-auction { padding: 92px 100px 82px; }
.design-widget-preview::before,.design-widget-preview::after { z-index: 1 !important; pointer-events: none; }
.design-widget-preview .design-preview-boss,
.design-widget-preview .design-preview-marathon { position: absolute; z-index: 3; inset: 0; width: 1280px; height: 720px; min-height: 0; }
.design-widget-preview :is(.boss-overlay,.marathon-overlay) { --scene-x: 78px; --scene-y: 58px; }
.design-widget-preview[data-widget-theme="gothic"] :is(.boss-overlay,.marathon-overlay),
.design-widget-preview[data-widget-theme="blood"] :is(.boss-overlay,.marathon-overlay),
.design-widget-preview[data-widget-theme="royal"] :is(.boss-overlay,.marathon-overlay) { --scene-x: 126px; --scene-y: 92px; }
.design-widget-preview .boss-overlay-heading { top: var(--scene-y); left: var(--scene-x); right: auto; width: 390px; transform: none; }
.design-widget-preview[data-boss-heading-position="center"] .boss-overlay-heading { left: 50%; right: auto; width: 440px; transform: translateX(-50%); }
.design-widget-preview[data-boss-heading-position="right"] .boss-overlay-heading { left: auto; right: var(--scene-x); }
.design-widget-preview .boss-overlay-footer { top: var(--scene-y); right: var(--scene-x); left: auto; width: 360px; }
.design-widget-preview[data-boss-heading-position="right"] .boss-overlay-footer { left: var(--scene-x); right: auto; }
.design-widget-preview[data-boss-heading-position="center"] .boss-overlay-footer { top: calc(var(--scene-y) + 118px); }
.design-widget-preview .boss-character-wrap { left: 50%; bottom: 116px; width: 430px; height: 500px; transform: translateX(-50%); }
.design-widget-preview .boss-party { left: var(--scene-x); right: auto; bottom: 142px; width: 292px; gap: 5px; }
.design-widget-preview[data-boss-party-position="right"] .boss-party { left: auto; right: var(--scene-x); }
.design-widget-preview .boss-party-slot { grid-template-columns: 30px minmax(0,1fr); min-height: 38px; gap: 8px; padding: 5px 8px; }
.design-widget-preview .boss-party-avatar { width: 30px; font-size: 11px; }
.design-widget-preview .boss-party-slot strong { font-size: 11px; }
.design-widget-preview .boss-party-slot small { font-size: 9px; }
.design-widget-preview .boss-overlay-health { left: var(--scene-x); right: var(--scene-x); bottom: var(--scene-y); }
.design-widget-preview .marathon-overlay-heading { top: var(--scene-y); left: var(--scene-x); right: var(--scene-x); }
.design-widget-preview .marathon-overlay-heading strong { font-size: 48px; }
.design-widget-preview .marathon-clock { top: 49%; width: 890px; }
.design-widget-preview .marathon-overlay-timer { font-size: 132px; }
.design-widget-preview .marathon-progress { width: 840px; }
.design-widget-preview .marathon-overlay-stats { left: var(--scene-x); right: var(--scene-x); bottom: var(--scene-y); }
.design-widget-preview .marathon-overlay-stats b { font-size: 20px; }
.design-widget-preview .marathon-overlay-stats small { font-size: 11px; }
.design-widget-preview .activity-frame { border-width: 62px; }
.design-widget-preview[data-widget-theme="gothic"] .activity-frame,
.design-widget-preview[data-widget-theme="blood"] .activity-frame,
.design-widget-preview[data-widget-theme="royal"] .activity-frame { border-width: 82px; }
.design-widget-preview > .overlay-brand { position: absolute !important; right: var(--scene-x, 78px); bottom: 18px; z-index: 20; }

/* Отряд виден и в студии, и на зрительской странице до первого доната. */
.boss-control-panel > .boss-health-card { margin: 16px 0 0; }
.boss-control-panel > .action-row { position: relative; z-index: 2; margin-top: 16px; }
.boss-studio-party-panel { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid #3c2d43; border-radius: 16px; background: #15101a; }
.boss-studio-party-panel > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.boss-studio-party-panel small { color: #a899b2; }
.boss-studio-party { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.boss-studio-party-slot { min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 10px 7px; text-align: center; border: 1px solid #45324e; border-radius: 12px; background: #1c1423; }
.boss-studio-party-slot > span { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 50%; color: #fff; font-weight: 900; background: linear-gradient(135deg,#ff741d,#7445dc); }
.boss-studio-party-slot > div { min-width: 0; display: grid; gap: 2px; }
.boss-studio-party-slot strong,.boss-studio-party-slot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-studio-party-slot strong { font-size: 12px; }
.boss-studio-party-slot small { font-size: 10px; }
.boss-studio-party-slot.empty { opacity: .5; }
.viewer-boss-leaderboard:empty { display: block; }
.viewer-boss-leaderboard li.empty { opacity: .48; }

/* Числа вводятся напрямую: браузерные и собственные стрелки не нужны. */
input[type="number"] { appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; }

@media (max-width: 900px) {
  .boss-studio-party { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .boss-studio-party-slot:last-child { grid-column: 1 / -1; }
}

/* Общая геометрия самостоятельных JRPG-бойцов рейда. */
.boss-hero-sprite {
  display: block; aspect-ratio: 2 / 3; color: transparent !important;
  background-repeat: no-repeat; background-position:center; background-size:contain;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.72));
}
.boss-party-avatar.boss-hero-sprite { width: 46px; height: 58px; aspect-ratio: auto; border-radius: 5px; background-color: transparent; box-shadow: none; }
.boss-studio-party-slot > span.boss-hero-sprite { width: 34px; height: 54px; aspect-ratio: auto; border-radius: 0; background-color: transparent; }

.team-battle-studio{display:grid;grid-template-columns:minmax(330px,.75fr) minmax(520px,1.25fr);gap:16px}.team-battle-studio[hidden]{display:none}.team-battle-history{grid-column:1/-1}.team-battle-canvas{display:block;width:100%;aspect-ratio:16/9;border-radius:15px;background:#11131d;image-rendering:pixelated}.team-base-bars{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:12px 0}.team-base-bars>span{display:grid;gap:5px}.team-base-bars>span:last-child{text-align:right}.team-base-bars i{height:9px;overflow:hidden;border-radius:99px;background:#09080d}.team-base-bars em{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff4d67,#ff9d61)}.team-base-bars>span:last-child em{margin-left:auto;background:linear-gradient(90deg,#39bfff,#766cff)}.team-battle-overlay{position:absolute;inset:0}.team-battle-overlay .team-battle-canvas{position:absolute;inset:0;width:100%;height:100%}.team-battle-overlay-title{position:absolute;left:4%;right:4%;top:4%;display:flex;align-items:center;gap:18px;padding:12px 18px;background:rgba(8,9,16,.78);border:1px solid var(--widget-primary);border-radius:12px}.team-battle-overlay-title span{text-transform:uppercase;letter-spacing:.12em}.team-battle-overlay-title strong{font-size:28px}.team-battle-overlay-title b{margin-left:auto;font-size:30px}.team-battle-overlay-result{position:absolute;inset:38% 20% auto;padding:20px;display:grid;gap:7px;text-align:center;font-size:40px;font-weight:1000;background:#0c0d17e8;border:2px solid var(--widget-primary);border-radius:14px}.team-battle-overlay-result strong{font:inherit}.team-battle-overlay-result span{font-size:clamp(14px,1.25vw,21px);font-weight:700;letter-spacing:0;text-transform:none;color:#e0d4e6}.viewer-team-battle{display:grid;gap:18px}.viewer-team-battle-stage{padding:12px;border:1px solid var(--border);border-radius:18px;background:#17121e}.team-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}.team-choice button,.team-unit-row button{border:1px solid var(--border);border-radius:10px;background:#17121e;color:var(--text);font-weight:800}.team-choice button{padding:15px}.team-choice button.selected{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}.team-unit-cart{display:grid;gap:8px}.team-unit-row{display:grid;grid-template-columns:1fr 38px 36px 38px;align-items:center;gap:8px;padding:10px;border:1px solid var(--border);border-radius:12px}.team-unit-row>div{display:grid}.team-unit-row small{color:var(--muted)}.team-unit-row button{height:36px}.team-unit-row b{text-align:center}.team-cart-total{display:block;margin-top:12px;text-align:right;font-size:20px;color:var(--orange)}.team-grade-explainer{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.5}
.team-pricing-guide{margin:14px 0 16px;padding:16px;border:1px solid rgba(159,103,231,.36);border-radius:16px;background:radial-gradient(circle at 94% 0,rgba(255,122,37,.12),transparent 38%),linear-gradient(145deg,rgba(33,22,43,.94),rgba(20,16,27,.94));box-shadow:inset 0 1px rgba(255,255,255,.025)}
.team-pricing-heading{display:grid;gap:5px;margin-bottom:13px}.team-pricing-heading>div>span{display:block;margin-bottom:3px;color:var(--orange-light);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.team-pricing-heading h3{margin:0;font-size:17px}.team-pricing-heading p{margin:0;color:#a697af;font-size:11px;line-height:1.45}
.team-pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.team-pricing-grid article{min-width:0;padding:11px;display:grid;gap:6px;border:1px solid #3f3048;border-radius:12px;background:rgba(14,11,19,.7)}.team-pricing-grid article>div{display:flex;align-items:center;gap:7px;min-width:0}.team-pricing-grid article>div>span{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;color:#1a0c05;border-radius:8px;background:linear-gradient(145deg,#ff8a36,#a56ff0);font-size:13px;font-weight:950}.team-pricing-grid article strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.team-pricing-grid article>b{color:#ffad72;font-size:18px;line-height:1}.team-pricing-grid article small{min-height:28px;color:#908198;font-size:10px;line-height:1.35}.team-pricing-grid article[data-unit="guard"]>div>span{background:linear-gradient(145deg,#ff8059,#df4d67)}.team-pricing-grid article[data-unit="ranger"]>div>span{background:linear-gradient(145deg,#ff9a4b,#a679ee)}.team-pricing-grid article[data-unit="titan"]>div>span{background:linear-gradient(145deg,#ffd064,#ff7a25)}
.team-pricing-example{margin:11px 0 0;padding:10px 11px;display:grid;gap:3px;border-left:3px solid var(--orange);border-radius:8px;background:rgba(255,122,37,.07);color:#b9a9c1;font-size:10px;line-height:1.45}.team-pricing-example strong{color:#f5ebf8;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:430px){.team-pricing-grid{grid-template-columns:1fr}.team-pricing-grid article small{min-height:0}}
.team-battle-control > #team-battle-result { margin-top: 14px; }
@media(max-width:900px){.activity-toolbar{display:flex}.studio-layer-controls{display:flex;flex-direction:column;align-items:stretch}.pet-quick-card{border-inline:0}.team-battle-studio{grid-template-columns:1fr}}
.viewer-boss-leaderboard li { align-items: center; }
.viewer-boss-leaderboard li::before { display: none; }
.viewer-boss-leaderboard li > i { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 54px; font-style: normal; font-weight: 900; }
.viewer-boss-leaderboard .boss-empty-slot { height: 34px; border-radius: 50%; color: #9b8da6; background: #251c2a; }

.boss-hero-picker { display: grid; gap: 12px; }
.boss-hero-picker-layout { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 14px; align-items: stretch; }
.boss-hero-preview { width: 132px; height: 188px; margin-inline: auto; background-repeat:no-repeat; background-position:center; background-size:contain; filter:drop-shadow(0 10px 12px #08060a); }
.boss-class-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.boss-class-options button { display: grid; gap: 2px; min-width: 0; padding: 9px 10px; text-align: left; border: 1px solid #46334f; border-radius: 10px; color: #f5eef8; background: #1a1320; cursor: pointer; }
.boss-class-options button:last-child { grid-column: 1 / -1; }
.boss-class-options button small { color: #9f90aa; font-size: 10px; }
.boss-class-options button.selected { border-color: #ff7a25; box-shadow: inset 3px 0 #ff7a25; background: #281827; }

/* Ближний герой делает выпад; дальний остаётся на позиции и посылает снаряд. */
.boss-party-slot.hero-attacking[data-hero-range="melee"] { animation: boss-hero-melee-left 1.15s cubic-bezier(.25,.8,.25,1); }
[data-boss-party-position="right"] .boss-party-slot.hero-attacking[data-hero-range="melee"] { animation-name: boss-hero-melee-right; }
.boss-party-slot.hero-attacking[data-hero-range="ranged"] .boss-hero-sprite { animation: boss-hero-cast .8s ease; }
.boss-hero-projectile { position: absolute; z-index: 12; left: 23%; top: 56%; width: 34px; height: 10px; border-radius: 999px; background: #ffd35c; box-shadow: 0 0 18px #ff7d17; animation: boss-projectile-left .9s ease-in forwards; }
[data-boss-party-position="right"] .boss-hero-projectile { left: auto; right: 23%; animation-name: boss-projectile-right; }
.boss-hero-projectile.projectile-mage { width: 26px; height: 26px; border-radius: 50%; background: #a655ff; box-shadow: 0 0 26px #d692ff; }
.boss-hero-projectile.projectile-priest { width: 24px; height: 24px; border-radius: 2px; background: #fff1a2; box-shadow: 0 0 28px #fff6c7; transform: rotate(45deg); }
@keyframes boss-hero-melee-left { 0%,100%{transform:translate(0)} 42%,58%{transform:translate(36vw,-10vh) scale(1.15)} }
@keyframes boss-hero-melee-right { 0%,100%{transform:translate(0)} 42%,58%{transform:translate(-36vw,-10vh) scale(1.15)} }
@keyframes boss-hero-cast { 0%,100%{transform:translateY(0)} 35%{transform:translateY(-10px) scale(1.08);filter:brightness(1.7)} }
@keyframes boss-projectile-left { from{transform:translate(0,0) scale(.7);opacity:0} 15%{opacity:1} to{transform:translate(27vw,-8vh) scale(1.4);opacity:0} }
@keyframes boss-projectile-right { from{transform:translate(0,0) scale(.7);opacity:0} 15%{opacity:1} to{transform:translate(-27vw,-8vh) scale(1.4);opacity:0} }

@media (max-width: 640px) {
  .boss-hero-picker-layout { grid-template-columns: 1fr; }
  .boss-hero-preview { width: 108px; height: 154px; }
}

@media (max-aspect-ratio: 4/3) {
  .marathon-overlay-heading { top:8%; left:8%; right:8%; }
  .marathon-clock { width:82vw; }
  .marathon-overlay-stats { left:8%; right:8%; bottom:8%; }
  .boss-overlay-heading { left:6%; }
  .boss-overlay-footer { right:6%; }
  [data-boss-heading-position="center"] .boss-overlay-heading { left:50%; right:auto; }
  [data-boss-heading-position="right"] .boss-overlay-heading { left:auto; right:6%; }
  [data-boss-heading-position="right"] .boss-overlay-footer { left:6%; right:auto; }
}

/* v0.24 final: эти правила намеренно завершают накопленный каскад старых сцен. */
.boss-class-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.boss-class-options button:last-child { grid-column:auto; }

.overlay-card:is(.boss-mode,.marathon-mode,.team-battle-mode) { position:relative;width:100vw;height:100vh;max-width:none;padding:0!important;overflow:hidden;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important; }
.overlay-card:is(.boss-mode,.marathon-mode,.team-battle-mode)::before,
.overlay-card:is(.boss-mode,.marathon-mode,.team-battle-mode)::after { display:none!important; }
[data-widget-theme="gothic"] .activity-frame,
[data-widget-theme="blood"] .activity-frame,
[data-widget-theme="royal"] .activity-frame { z-index:2;border-width:clamp(30px,4.5vw,72px);border-image-slice:24% 20%!important;pointer-events:none; }
:is(.boss-overlay,.marathon-overlay,.team-battle-overlay)>:not(.activity-backdrop,.activity-frame,.boss-particles) { z-index:5; }
[data-widget-theme="gothic"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after,
[data-widget-theme="blood"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after,
[data-widget-theme="royal"].overlay-card:not(.boss-mode):not(.marathon-mode):not(.team-battle-mode)::after { border-image-slice:27% 23%!important;border-image-width:84px 76px 72px!important; }
.design-widget-preview[data-widget-theme="gothic"] #preview-auction,
.design-widget-preview[data-widget-theme="blood"] #preview-auction,
.design-widget-preview[data-widget-theme="royal"] #preview-auction { padding:126px 148px 112px!important; }

.team-battle-control { overflow:hidden; }
.team-battle-live-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:13px; }
.team-battle-live-heading h2 { margin:3px 0 0;font-size:24px; }
.team-battle-live-heading p { max-width:320px;margin:0;color:#aa9bb5;text-align:right;font-size:12px;line-height:1.45; }
.team-battle-arena-shell { position:relative;overflow:hidden;border:1px solid #4b3659;border-radius:18px;background:#11131d;box-shadow:0 18px 45px rgba(0,0,0,.28); }
.team-battle-canvas { border-radius:inherit;image-rendering:auto; }
.team-battle-arena-shell .team-base-bars { position:absolute;z-index:6;left:18px;right:18px;bottom:15px;margin:0;padding:10px 13px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(7,8,14,.82);backdrop-filter:blur(8px); }
.team-base-bars>strong { min-width:78px;text-align:center;color:#fff3e7;font:900 20px/1 ui-monospace,monospace; }
.team-base-bars i { height:8px;border:1px solid rgba(255,255,255,.08); }
.team-unit-legend { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0; }
.team-unit-legend>span { min-width:0;display:grid;grid-template-columns:28px 1fr;gap:1px 7px;align-items:center;padding:9px;border:1px solid #3c2d45;border-radius:11px;background:#17111d; }
.team-unit-legend i { grid-row:1/3;display:grid;place-items:center;width:28px;height:34px;color:#ff9b54;font-style:normal;font-size:19px; }
.team-unit-legend b { font-size:11px; }.team-unit-legend small { overflow:hidden;color:#9e8fab;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }
.team-battle-overlay { overflow:hidden; }.team-battle-overlay .team-battle-canvas { z-index:0;border-radius:0; }.team-battle-overlay .activity-frame { z-index:3; }
.team-battle-overlay-title { z-index:7;left:max(5%,var(--scene-x,5%));right:max(5%,var(--scene-x,5%));top:max(5%,var(--scene-y,5%)); }
.team-battle-overlay-result { z-index:10; }.design-widget-preview.team-battle-mode { width:1280px;height:720px; }.design-widget-preview.team-battle-mode .team-battle-overlay-title { left:78px;right:78px;top:58px; }

@media(max-width:640px){.boss-class-options{grid-template-columns:repeat(2,minmax(0,1fr))}.team-battle-live-heading{align-items:flex-start;flex-direction:column}.team-battle-live-heading p{text-align:left}}

/* v0.25: каждый класс и каждый пол — отдельный прозрачный арт без атласов и реколора. */
.boss-hero-sprite,
.boss-hero-preview {
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 7px 8px rgba(0,0,0,.78)) !important;
}
.boss-hero-sprite.hero-warrior.variant-male,.boss-hero-preview.hero-warrior.variant-male { background-image:url("/boss-hero-warrior-male.png") !important; }
.boss-hero-sprite.hero-warrior.variant-female,.boss-hero-preview.hero-warrior.variant-female { background-image:url("/boss-hero-warrior-female.png") !important; }
.boss-hero-sprite.hero-knight.variant-male,.boss-hero-preview.hero-knight.variant-male { background-image:url("/boss-hero-knight-male.png") !important; }
.boss-hero-sprite.hero-knight.variant-female,.boss-hero-preview.hero-knight.variant-female { background-image:url("/boss-hero-knight-female.png") !important; }
.boss-hero-sprite.hero-rogue.variant-male,.boss-hero-preview.hero-rogue.variant-male { background-image:url("/boss-hero-rogue-male.png") !important; }
.boss-hero-sprite.hero-rogue.variant-female,.boss-hero-preview.hero-rogue.variant-female { background-image:url("/boss-hero-rogue-female.png") !important; }
.boss-hero-sprite.hero-archer.variant-male,.boss-hero-preview.hero-archer.variant-male { background-image:url("/boss-hero-archer-male.png") !important; }
.boss-hero-sprite.hero-archer.variant-female,.boss-hero-preview.hero-archer.variant-female { background-image:url("/boss-hero-archer-female.png") !important; }
.boss-hero-sprite.hero-mage.variant-male,.boss-hero-preview.hero-mage.variant-male { background-image:url("/boss-hero-mage-male.png") !important; }
.boss-hero-sprite.hero-mage.variant-female,.boss-hero-preview.hero-mage.variant-female { background-image:url("/boss-hero-mage-female.png") !important; }
.boss-hero-sprite.hero-priest.variant-male,.boss-hero-preview.hero-priest.variant-male { background-image:url("/boss-hero-priest-male.png") !important; }
.boss-hero-sprite.hero-priest.variant-female,.boss-hero-preview.hero-priest.variant-female { background-image:url("/boss-hero-priest-female.png") !important; }

.boss-hero-preview { width:148px; height:204px; }
.boss-hero-variant { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid #382a40; }
.boss-hero-variant > span { color:#b8a8c1; font-size:11px; font-weight:750; }
.boss-variant-options { display:flex; gap:7px; }
.boss-variant-options button { display:flex; align-items:center; gap:5px; min-height:34px; padding:6px 10px; border:1px solid #493650; border-radius:9px; background:#17111d; color:#b9aabd; font-size:11px; font-weight:800; cursor:pointer; }
.boss-variant-options button b { color:#ff9250; font-size:15px; line-height:1; }
.boss-variant-options button.selected { border-color:#ff7a25; color:#fff; background:#2a1723; box-shadow:inset 0 0 0 1px rgba(255,122,37,.28); }

.viewer-team-battle { width:min(1120px,100%); margin-inline:auto; }
.viewer-team-battle-stage { position:relative; padding:17px; overflow:hidden; border-color:#4b345b; border-radius:24px; background:linear-gradient(145deg,#1c1324,#0e0b14); box-shadow:0 24px 60px rgba(0,0,0,.34),inset 0 0 50px rgba(116,65,155,.08); }
.viewer-team-battle-stage::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,111,38,.07),transparent 30%,transparent 70%,rgba(57,191,255,.07)); }
.team-battle-stage-kicker { position:absolute; z-index:3; top:27px; left:50%; padding:6px 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(8,7,13,.72); color:#c7b7cf; font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; transform:translateX(-50%); backdrop-filter:blur(8px); }
.viewer-team-battle-stage .team-battle-canvas { position:relative; z-index:1; border:1px solid rgba(255,255,255,.08); border-radius:17px; background:#090812; image-rendering:auto; box-shadow:inset 0 0 60px #000,0 12px 28px rgba(0,0,0,.35); }
.viewer-team-battle-result { position:absolute; z-index:8; left:50%; top:50%; width:min(520px,70%); box-sizing:border-box; padding:20px 24px; display:grid; gap:6px; border:2px solid rgba(255,151,79,.7); border-radius:16px; color:#fff; background:rgba(12,9,18,.94); text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.6); transform:translate(-50%,-50%); backdrop-filter:blur(10px); }
.viewer-team-battle-result[hidden] { display:none; }
.viewer-team-battle-result strong { font-size:clamp(24px,4vw,42px); line-height:1.05; }
.viewer-team-battle-result span { color:#d6c9dc; font-size:clamp(12px,1.6vw,17px); font-weight:700; }
.viewer-team-battle-result[data-result="draw"] { border-color:rgba(190,147,255,.8); background:linear-gradient(135deg,rgba(68,38,101,.96),rgba(15,10,22,.96)); box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 38px rgba(153,94,232,.25); }
.viewer-team-battle-result[data-result="draw"] strong { letter-spacing:.08em; text-transform:uppercase; }

@media(max-width:680px){
  .viewer-boss-stage img{width:min(108%,560px);max-height:90%}
  .boss-hero-preview{width:116px;height:166px}
  .boss-hero-variant{align-items:flex-start;flex-direction:column}
  .boss-variant-options{width:100%}.boss-variant-options button{flex:1;justify-content:center}
  .viewer-team-battle-stage{padding:9px;border-radius:16px}.team-battle-stage-kicker{display:none}
}

/* v0.60.0 — на главной показаны собственные слои сцены без скрытых интеграций чатов. */
.landing-v56-qr {
  position:absolute; z-index:3; right:3.5%; top:11%; width:29%; padding:11px;
  display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:9px;
  border:1px solid #69478a; border-radius:13px;
  background:linear-gradient(145deg,rgba(31,21,39,.97),rgba(15,10,20,.97));
  box-shadow:0 17px 45px rgba(0,0,0,.4);
}
.landing-v56-qr-pattern {
  width:58px; height:58px; position:relative; border:5px solid #f4edf7; border-radius:5px;
  background:
    linear-gradient(90deg,transparent 58%,#17101d 58% 72%,transparent 72%),
    linear-gradient(transparent 44%,#17101d 44% 58%,transparent 58% 72%,#17101d 72% 86%,transparent 86%),
    repeating-conic-gradient(#17101d 0 25%,#f4edf7 0 50%) 50%/14px 14px;
  box-shadow:inset 0 0 0 2px #17101d;
}
.landing-v56-qr-pattern::before,.landing-v56-qr-pattern::after {
  content:""; position:absolute; width:14px; height:14px; border:4px solid #17101d; background:#f4edf7;
}
.landing-v56-qr-pattern::before { left:4px; top:4px; }
.landing-v56-qr-pattern::after { right:4px; bottom:4px; }
.landing-v56-qr strong { color:#f1e7f5; font-size:9px; line-height:1.25; }
.landing-v56-qr small { grid-column:2; margin-top:-27px; color:#9f91a7; font-size:7px; line-height:1.35; }
.editor-block.frame-camera { right:4%; top:8%; width:31%; height:28%; }
.editor-block.frame-guest { right:4%; top:42%; width:31%; height:22%; border-style:solid; border-color:#785497; }
.editor-block.qr { left:5%; bottom:18%; width:14%; height:18%; color:#ffd2b0; border-style:solid; border-color:#b86632; }
.editor-block.ticker { left:22%; right:4%; }
@media(max-width:680px){
  .landing-v56-qr { width:31%; padding:7px; grid-template-columns:38px minmax(0,1fr); }
  .landing-v56-qr-pattern { width:38px; height:38px; border-width:3px; background-size:auto,auto,10px 10px; }
  .landing-v56-qr-pattern::before,.landing-v56-qr-pattern::after { width:9px; height:9px; border-width:3px; }
  .landing-v56-qr strong { font-size:6px; }
  .landing-v56-qr small { display:none; }
}

/* Публичные документы для подключённых платформ. */
.legal-page { min-height:100vh; background:radial-gradient(circle at 85% 0,rgba(106,56,190,.12),transparent 34rem),#0c0910; }
.legal-page .landing-topbar { background:rgba(12,9,16,.88); backdrop-filter:blur(16px); }
.legal-main { width:min(900px,calc(100% - 40px)); margin:0 auto; padding:68px 0 80px; }
.legal-main > h1 { margin:11px 0 16px; font-size:clamp(40px,6vw,68px); letter-spacing:-.05em; line-height:1; }
.legal-lead { margin:0 0 35px; color:#b7aabb; font-size:17px; line-height:1.65; }
.legal-main a { color:#c9aaff; }
.legal-main section { margin-top:13px; padding:24px 26px; border:1px solid #34293c; border-radius:15px; background:rgba(22,16,28,.72); }
.legal-main section h2 { margin:0 0 10px; font-size:20px; }
.legal-main section p,.legal-main section li { color:#b2a5b8; font-size:13px; line-height:1.65; }
.legal-main section p { margin:9px 0 0; }
.legal-main section ul,.legal-main section ol { margin:9px 0 0; padding-left:22px; display:grid; gap:7px; }
.legal-main section b { color:#eee5f2; }
.landing-footer [aria-current="page"] { color:#fff; }
@media(max-width:600px){
  .legal-main { width:calc(100% - 28px); padding-top:42px; }
  .legal-main > h1 { font-size:38px; }
  .legal-lead { font-size:15px; }
  .legal-main section { padding:19px; }
}

.help-faq-list { margin-top:14px; display:grid; gap:8px; }
.help-faq-list details { overflow:hidden; border:1px solid #3a2e43; border-radius:12px; background:rgba(255,255,255,.02); }
.help-faq-list summary { padding:13px 15px; color:#eee5f2; cursor:pointer; font-size:14px; font-weight:850; }
.help-faq-list details[open] summary { border-bottom:1px solid #34283c; }
.help-faq-list p { margin:0; padding:13px 15px; color:#a99cad; font-size:13px; line-height:1.55; }
.help-content h3 { margin:25px 0 9px; font-size:18px; }

/* Постоянный HUD битвы: здоровье крепостей и время видны поверх сцены
   одновременно в OBS и на зрительской странице. */
.team-battle-overlay-hud {
  position:absolute; z-index:8; left:max(4%,var(--scene-x,4%)); right:max(4%,var(--scene-x,4%)); top:max(4%,var(--scene-y,4%));
  display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,.65fr) minmax(0,1fr); gap:20px; align-items:center;
  padding:15px 20px; color:#fff; background:rgba(7,8,15,.88); border:1px solid rgba(255,255,255,.16); border-radius:16px;
  box-shadow:0 12px 38px rgba(0,0,0,.4); backdrop-filter:blur(9px);
}
.team-battle-hud-side { min-width:0; display:grid; gap:7px; }
.team-battle-hud-side > div { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.team-battle-hud-side strong { overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.team-battle-hud-side b { flex:0 0 auto; color:#f8edf9; font:850 15px/1 ui-monospace,monospace; }
.team-battle-commander { min-width:0; overflow:hidden; color:#cbbfd2; font-size:11px; font-weight:750; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.team-battle-hud-side.right > .team-battle-commander { text-align:right; }
.team-base-bars .team-battle-commander { color:#c9bdcf; font-size:10px; }
.team-battle-hud-side > i { display:block; height:10px; overflow:hidden; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); border-radius:99px; }
.team-battle-hud-side > i > em { display:block; width:100%; height:100%; background:#ff4d67; border-radius:inherit; transition:width .35s ease; }
.team-battle-hud-side.right > div { flex-direction:row-reverse; }
.team-battle-hud-side.right { text-align:right; }
.team-battle-hud-side.right > i > em { margin-left:auto; background:#39bfff; }
.team-battle-hud-center { min-width:0; display:grid; place-items:center; gap:2px; text-align:center; }
.team-battle-hud-center span { color:#bbaec3; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.team-battle-hud-center strong { max-width:100%; overflow:hidden; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.team-battle-hud-center b { color:#fff3e7; font:1000 30px/1.05 ui-monospace,monospace; }
.viewer-team-battle-hud {
  position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:center;
  margin-bottom:12px; padding:12px 14px; color:#fff; background:#0c0b13; border:1px solid #49344f; border-radius:13px;
}
.viewer-team-battle-hud .team-battle-hud-side strong { font-size:14px; }
.viewer-team-battle-hud .team-battle-hud-side b { font-size:12px; }
.viewer-team-battle-hud .team-battle-commander { font-size:9px; }
.viewer-team-battle-hud .team-battle-hud-side > i { height:8px; }
.team-battle-hud-timer { display:grid; place-items:center; min-width:78px; text-align:center; }
.team-battle-hud-timer span { color:#aa9bb5; font-size:10px; font-weight:800; text-transform:uppercase; }
.team-battle-hud-timer strong { color:#fff3e7; font:1000 22px/1.1 ui-monospace,monospace; }

@media(max-width:900px){
  .viewer-team-battle-hud { grid-template-columns:1fr 1fr; }
  .viewer-team-battle-hud .team-battle-hud-timer { grid-column:1/-1; grid-row:1; }
}
@media(max-width:560px){
  .viewer-team-battle-hud { gap:10px; padding:10px; }
  .viewer-team-battle-hud .team-battle-hud-side > div,
  .viewer-team-battle-hud .team-battle-hud-side.right > div { display:grid; gap:3px; }
}

/* ЗБТ: короткая инструкция остаётся ненавязчивой, а код оплаты невозможно пропустить. */
.viewer-beta-guide { width:min(900px,100%); margin:22px 0 0; border:1px solid #3e2d48; border-radius:16px; background:#15101b; }
.viewer-beta-guide summary { padding:15px 18px; color:#f2e9f6; font-weight:850; cursor:pointer; }
.viewer-beta-guide > div { padding:0 18px 16px; color:#b9a9c4; font-size:13px; line-height:1.55; }
.viewer-beta-guide p { margin:9px 0; }
.payment-code-dialog { position:relative; width:min(560px,calc(100% - 28px)); padding:30px; color:#fff; border:1px solid #704b83; border-radius:24px; background:radial-gradient(circle at 100% 0,rgba(255,122,26,.17),transparent 35%),linear-gradient(145deg,#211529,#100d16); box-shadow:0 35px 120px #000; }
.payment-code-dialog::backdrop { background:rgba(5,3,8,.82); backdrop-filter:blur(7px); }
.payment-code-dialog h2 { margin:8px 0 10px; font-size:30px; }
.payment-code-dialog > p { margin:0 0 20px; color:#c5b7cd; line-height:1.5; }
.payment-code-close { position:absolute; top:13px; right:14px; width:36px; height:36px; color:#c8b8d0; border:0; border-radius:50%; background:rgba(255,255,255,.07); font-size:25px; cursor:pointer; }
.payment-code-value { display:block; width:100%; padding:18px; color:#201126; border:0; border-radius:15px; background:linear-gradient(135deg,#ffc07d,#bd9cff); font:1000 clamp(34px,9vw,58px)/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.07em; cursor:pointer; }
.payment-code-amount { display:block; margin:14px 0 0; color:#ffb377; text-align:center; font-size:26px; }
.payment-code-dialog ol { margin:20px 0; padding-left:22px; color:#d1c5d7; line-height:1.65; }
.payment-code-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.payment-code-actions .button { display:grid; place-items:center; min-height:48px; text-decoration:none; }
.payment-code-dialog > small { display:block; margin-top:15px; color:#8f8197; text-align:center; line-height:1.4; }
@media(max-width:560px){.payment-code-dialog{padding:24px 18px}.payment-code-actions{grid-template-columns:1fr}}

/* v0.36: постоянная навигация и отдельная временная зона ЗБТ. */
.topbar-utility { padding:8px 11px; color:#cbb9f8; border:1px solid rgba(155,118,242,.28); border-radius:9px; background:transparent; text-decoration:none; font:750 12px/1 inherit; cursor:pointer; }
.topbar-utility:hover { color:#fff; border-color:#76558f; background:#241a2c; }
.topbar-utility.beta { color:#ffd0ad; border-color:rgba(255,122,26,.42); background:rgba(255,122,26,.08); }
.topbar-utility.owner { color:#a9f1ca; border-color:rgba(69,201,133,.34); background:rgba(69,201,133,.07); }
.activity-toolbar { display:block; padding:14px; }
.activity-toolbar .studio-layer-controls { display:grid; grid-template-columns:minmax(360px,1fr) minmax(250px,.72fr) minmax(330px,1fr); gap:12px; align-items:stretch; }
.activity-toolbar .activity-current,.activity-toolbar .suggest-widget-card,.activity-toolbar .pet-quick-card { grid-column:auto; min-width:0; }
.suggest-widget-card { display:flex; align-items:center; gap:11px; padding:11px 14px; color:#eee5f2; text-align:left; border:1px dashed #654879; border-radius:13px; background:linear-gradient(135deg,rgba(111,66,217,.1),rgba(255,122,26,.055)); cursor:pointer; }
.suggest-widget-card > span { display:grid; place-items:center; flex:0 0 34px; height:34px; color:#e4d3ff; border-radius:10px; background:rgba(126,83,214,.2); font-size:22px; }
.suggest-widget-card > div { min-width:0; display:grid; gap:2px; }
.suggest-widget-card small,.suggest-widget-card em { overflow:hidden; color:#9f90aa; font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.suggest-widget-card strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.suggest-widget-card:hover { border-style:solid; border-color:#8a62a4; background:linear-gradient(135deg,rgba(111,66,217,.17),rgba(255,122,26,.09)); }
.obs-status { display:block; max-width:176px; color:#8f8297; font-size:9px; line-height:1.25; }
.obs-status[data-state="connected"] { color:#67daa0; }
.obs-status[data-state="stale_cache"] { color:#ffc174; }
.obs-status[data-state="disconnected"] { color:#ff8ca0; }
.beta-center-dialog,.feedback-dialog { width:min(720px,calc(100% - 28px)); padding:24px; color:var(--text); border:1px solid var(--border); border-radius:20px; background:#18131f; box-shadow:0 30px 100px #000; }
.beta-center-dialog::backdrop,.feedback-dialog::backdrop { background:rgba(5,3,8,.78); backdrop-filter:blur(5px); }
.beta-center-status { margin-top:20px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid #3c2c45; border-radius:14px; background:#120e17; }
.beta-center-status > div { min-width:0; display:grid; gap:6px; }
.beta-center-status p { margin:0; color:#a99bb2; font-size:12px; }
.beta-test-toggle { margin:14px 0; padding:16px; border:1px solid #45324e; border-radius:14px; background:#16101c; }
.beta-center-actions { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:9px; }
.beta-center-actions .button { display:grid; place-items:center; text-align:center; text-decoration:none; }
.feedback-dialog form { margin-top:18px; display:grid; gap:14px; }
.feedback-dialog textarea { resize:vertical; }
.feedback-contact-grid { display:grid; grid-template-columns:minmax(170px,.65fr) minmax(240px,1.35fr); gap:12px; }
.feedback-contact-grid label { min-width:0; }
.feedback-privacy { margin:0; padding:12px 14px; color:#aa9bb4; font-size:12px; line-height:1.45; border:1px solid #392b40; border-radius:12px; background:#120e17; }
.provider-event-routing-note { display:block; margin-top:6px; color:#ffbb7c; line-height:1.35; }
@media(max-width:1050px){.activity-toolbar .studio-layer-controls{grid-template-columns:1fr 1fr}.activity-toolbar .pet-quick-card{grid-column:1/-1}}
@media(max-width:720px){.topbar-actions{flex-wrap:wrap}.activity-toolbar .studio-layer-controls{grid-template-columns:1fr}.activity-toolbar .pet-quick-card{grid-column:auto}.beta-center-status{align-items:flex-start;flex-direction:column}.beta-center-actions{grid-template-columns:1fr}}

/* v0.38: продуктовая статистика без тестовых платежей. */
.statistics-dialog {
  width:min(1040px,calc(100% - 28px)); max-height:min(900px,calc(100vh - 32px)); padding:26px;
  overflow:auto; color:var(--text); border:1px solid #493650; border-radius:22px;
  background:radial-gradient(circle at 100% 0,rgba(111,66,217,.16),transparent 34%),#18131f;
  box-shadow:0 34px 110px #000;
}
.statistics-dialog::backdrop { background:rgba(5,3,8,.8); backdrop-filter:blur(6px); }
.statistics-periods { margin:22px 0 16px; padding:4px; display:flex; width:max-content; max-width:100%; gap:4px; border:1px solid #3f3048; border-radius:12px; background:#100d15; }
.statistics-periods button { min-width:104px; padding:9px 14px; color:#a99ab3; border:0; border-radius:9px; background:transparent; font-size:12px; font-weight:850; cursor:pointer; }
.statistics-periods button:hover { color:#fff; }
.statistics-periods button.selected { color:#1a0c03; background:linear-gradient(135deg,var(--orange),var(--orange-light)); }
.statistics-loading { min-height:210px; display:grid; place-items:center; color:#a99ab3; }
.statistics-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.statistics-summary-grid article { min-width:0; padding:16px; display:grid; gap:5px; border:1px solid #3b2d43; border-radius:14px; background:linear-gradient(145deg,#1e1726,#130f19); }
.statistics-summary-grid span { color:#a99ab3; font-size:11px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.statistics-summary-grid strong { overflow:hidden; color:#fff2e6; font-size:clamp(24px,3vw,34px); line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.statistics-summary-grid small { color:#766b7e; font-size:10px; line-height:1.35; }
.statistics-best { margin-top:11px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid rgba(255,122,26,.28); border-radius:13px; background:rgba(255,122,26,.07); }
.statistics-best span { color:#ae9db6; font-size:11px; font-weight:850; text-transform:uppercase; }
.statistics-best strong { color:#ffc493; text-align:right; }
.statistics-breakdown { margin-top:20px; }
.statistics-section-heading { margin-bottom:10px; display:flex; align-items:end; justify-content:space-between; gap:16px; }
.statistics-section-heading small { color:var(--orange-light); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.statistics-section-heading h3 { margin:3px 0 0; font-size:21px; }
.statistics-section-heading > span { color:#918399; font-size:12px; }
.statistics-activities { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.statistics-activity-card { min-width:0; padding:15px; border:1px solid #3a2c42; border-radius:14px; background:rgba(17,13,22,.72); }
.statistics-activity-title { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; }
.statistics-activity-title > span { display:grid; place-items:center; width:34px; height:34px; color:#1b0c03; border-radius:10px; background:linear-gradient(145deg,#ff8b38,#9d78ef); font-size:11px; font-weight:950; }
.statistics-activity-title > div { min-width:0; display:grid; gap:2px; }
.statistics-activity-title strong,.statistics-activity-title small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.statistics-activity-title strong { font-size:14px; }
.statistics-activity-title small { color:#817588; font-size:10px; }
.statistics-activity-title > b { color:#cdbaf6; font-size:12px; }
.statistics-activity-values { margin-top:13px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.statistics-activity-values > div { min-width:0; padding:9px 10px; display:grid; gap:3px; border-radius:9px; background:rgba(255,255,255,.025); }
.statistics-activity-values span { color:#82758a; font-size:9px; font-weight:800; text-transform:uppercase; }
.statistics-activity-values strong { overflow:hidden; color:#e9e0ed; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.statistics-share { height:4px; margin-top:12px; display:block; overflow:hidden; border-radius:999px; background:#2a2230; }
.statistics-share em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple-light),var(--orange)); }
.statistics-empty { min-height:180px; display:grid; place-items:center; align-content:center; gap:7px; color:#9b8da3; text-align:center; border:1px dashed #45354e; border-radius:15px; }
.statistics-empty strong { color:#e8dfea; font-size:18px; }
.statistics-note { margin:14px 0 0; color:#766b7e; font-size:11px; line-height:1.5; }
@media(max-width:780px){.statistics-summary-grid{grid-template-columns:1fr 1fr}.statistics-activities{grid-template-columns:1fr}}
@media(max-width:520px){.statistics-dialog{padding:19px 15px}.statistics-periods{width:100%}.statistics-periods button{min-width:0;flex:1;padding-inline:7px}.statistics-summary-grid{grid-template-columns:1fr}.statistics-best{align-items:flex-start;flex-direction:column}.statistics-best strong{text-align:left}}
@media(max-width:1100px){.topbar{height:auto;min-height:72px;padding-block:10px}.topbar-actions{justify-content:flex-end;gap:7px;flex-wrap:wrap}.connection{display:none}}
@media(max-width:680px){.brand-name,.topbar .brand-wordmark{display:none}.topbar-utility{font-size:11px}.topbar{align-items:flex-start}.account-chip{order:-1}}

.owner-page { min-height:100vh; background:radial-gradient(circle at 82% 0,rgba(111,66,217,.2),transparent 32rem),radial-gradient(circle at 0 100%,rgba(255,122,26,.1),transparent 28rem),var(--background); }
.owner-brand { display:flex; align-items:center; color:var(--text); text-decoration:none; }
.owner-shell { width:min(1500px,calc(100% - 48px)); margin:0 auto; padding:34px 0 80px; }
.owner-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; }
.owner-heading h1 { margin:7px 0 8px; font-size:clamp(32px,5vw,52px); letter-spacing:-.035em; }
.owner-heading p { margin:0; color:#a99bb2; font-size:16px; }
.owner-heading .statistics-periods { margin:0; flex:0 0 auto; }
.owner-loading { min-height:360px; display:grid; place-items:center; color:#a99bb2; }
.owner-summary-grid { margin-top:24px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.owner-summary-grid article { min-width:0; min-height:132px; padding:17px; display:flex; flex-direction:column; gap:7px; border:1px solid #3a2c42; border-radius:15px; background:linear-gradient(145deg,rgba(31,23,39,.96),rgba(18,14,24,.96)); }
.owner-summary-grid article > span { color:#97899f; font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.owner-summary-grid article > strong { margin:auto 0 0; overflow:hidden; color:#fff2e7; font-size:clamp(25px,2.8vw,38px); line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.owner-summary-grid article > small { color:#716678; font-size:10px; line-height:1.35; }
.owner-summary-grid .owner-money-card { border-color:rgba(255,122,26,.32); background:linear-gradient(145deg,rgba(80,38,22,.34),rgba(27,17,28,.96)); }
.owner-summary-grid .owner-money-card > strong { color:#ffc08a; }
.owner-panel { margin-top:18px; padding:20px; border:1px solid #382b40; border-radius:17px; background:rgba(22,17,29,.9); }
.owner-panel-heading { margin-bottom:14px; display:flex; align-items:end; justify-content:space-between; gap:16px; }
.owner-panel-heading small { color:var(--orange-light); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.owner-panel-heading h2 { margin:3px 0 0; font-size:23px; }
.owner-panel-heading > span { color:#8e8196; font-size:12px; }
.owner-activities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.owner-activity-card { min-width:0; padding:15px; border:1px solid #3a2d42; border-radius:13px; background:#120f18; }
.owner-activity-card > div { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; align-items:center; }
.owner-activity-card > div > span { display:grid; place-items:center; width:30px; height:30px; color:#1b0c03; border-radius:9px; background:linear-gradient(145deg,#ff8b38,#a47ef0); font-size:10px; font-weight:950; }
.owner-activity-card > div > strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.owner-activity-card > div > b { color:#c9b6f3; font-size:11px; }
.owner-activity-card > strong { margin-top:15px; display:block; overflow:hidden; color:#fff0e3; font-size:24px; text-overflow:ellipsis; white-space:nowrap; }
.owner-activity-card p { margin:5px 0 11px; color:#827589; font-size:10px; }
.owner-activity-card > i { height:4px; display:block; overflow:hidden; border-radius:999px; background:#29212f; }
.owner-activity-card > i > em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple-light),var(--orange)); }
.owner-table-wrap { overflow:auto; border:1px solid #35283d; border-radius:13px; }
.owner-table { width:100%; min-width:1040px; border-collapse:collapse; background:#100d15; }
.owner-table th,.owner-table td { padding:12px 13px; text-align:right; border-bottom:1px solid #2c2232; font-size:12px; }
.owner-table th { position:sticky; top:0; z-index:1; color:#8f8297; background:#17111d; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.owner-table th:first-child,.owner-table td:first-child { text-align:left; }
.owner-table tr:last-child td { border-bottom:0; }
.owner-table tbody tr:hover { background:rgba(111,66,217,.055); }
.owner-table td:first-child { min-width:210px; }
.owner-table td:first-child strong,.owner-table td:first-child small { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.owner-table td:first-child small { margin-top:3px; color:#7f7287; }
.owner-table td b { color:#ffc08a; }
.owner-table time { color:#8f8297; white-space:nowrap; }
.owner-access { min-height:calc(100vh - 72px); padding:30px; display:grid; place-items:center; align-content:center; gap:12px; text-align:center; }
.owner-access .brand-mark { margin:0 0 8px; }
.owner-access h1 { margin:0; font-size:36px; }
.owner-access p { max-width:520px; margin:0 0 10px; color:#a99bb2; line-height:1.55; }
.owner-access .button { text-decoration:none; }
@media(max-width:1250px){.owner-summary-grid{grid-template-columns:repeat(3,1fr)}.owner-activities{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.owner-shell{width:calc(100% - 24px);padding-top:22px}.owner-heading{align-items:flex-start;flex-direction:column}.owner-heading .statistics-periods{width:100%}.owner-summary-grid{grid-template-columns:1fr 1fr}.owner-panel{padding:15px}.owner-activities{grid-template-columns:1fr}}
@media(max-width:500px){.owner-summary-grid{grid-template-columns:1fr}.owner-topbar .brand-name,.owner-topbar .brand-wordmark{display:none}}

/* v0.41 — разделы админ-панели, страницы данных и единый бренд. */
.owner-tabs {
  margin-top:24px; padding:6px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
  border:1px solid #3a2d43; border-radius:17px; background:rgba(16,12,21,.86);
}
.owner-tabs a {
  position:relative; min-width:0; min-height:64px; padding:11px 15px; display:grid; align-content:center; gap:3px;
  color:#9f91a7; border:1px solid transparent; border-radius:12px; text-decoration:none;
}
.owner-tabs a:hover { color:#f3e9f6; background:#17111d; }
.owner-tabs a.selected { color:#fff5ec; border-color:rgba(255,122,26,.28); background:linear-gradient(135deg,rgba(255,122,26,.12),rgba(111,66,217,.13)); }
.owner-tabs span { font-size:14px; font-weight:900; }
.owner-tabs small { overflow:hidden; color:#756a7d; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.owner-tabs a.selected small { color:#9f8fa8; }
.owner-tabs b {
  position:absolute; top:9px; right:10px; min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center;
  color:#fff; border:2px solid #160f1b; border-radius:999px; background:#e74767; box-shadow:0 5px 14px rgba(231,71,103,.32); font-size:10px;
}
.owner-tabs b[hidden] { display:none; }
.owner-users-panel,.owner-feedback-panel { margin-top:24px; }
.owner-section-loading { margin-bottom:12px; padding:11px 13px; color:#b3a4bb; border:1px solid #3a2d43; border-radius:11px; background:#100d15; font-size:11px; }
.owner-section-loading[hidden] { display:none; }
.owner-pagination { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:12px; }
.owner-pagination[hidden] { display:none; }
.owner-pagination button {
  min-width:90px; min-height:38px; padding:8px 13px; color:#d9c9e1; border:1px solid #4a3855; border-radius:9px;
  background:#1b1421; font:inherit; font-size:11px; font-weight:850; cursor:pointer;
}
.owner-pagination button:hover:not(:disabled) { color:#fff; border-color:#875dad; background:#25192e; }
.owner-pagination button:disabled { opacity:.35; cursor:default; }
.owner-pagination span { min-width:245px; color:#8e8196; font-size:11px; text-align:center; }
.owner-telegram-meta { margin-top:3px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.owner-telegram-meta small { color:#756a7d; font-size:10px; }
@media(max-width:760px){
  .owner-tabs { grid-template-columns:1fr; }
  .owner-tabs a { min-height:54px; }
  .owner-pagination { gap:7px; }
  .owner-pagination span { min-width:0; flex:1; }
  .brand-symbol { width:35px; height:35px; }
}

/* Панель продукта 0.39 */
.owner-shell { width:min(1600px,calc(100% - 48px)); }
.owner-live-grid { margin-top:24px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.owner-live-grid article {
  position:relative; min-width:0; min-height:104px; padding:16px 17px 15px 42px; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:start; gap:7px 12px; overflow:hidden; border:1px solid rgba(69,201,133,.24); border-radius:15px;
  background:linear-gradient(145deg,rgba(25,41,37,.82),rgba(17,14,23,.96));
}
.owner-live-dot { position:absolute; top:19px; left:17px; width:12px; height:12px; border:3px solid rgba(123,240,177,.2); border-radius:50%; background:#55d895; box-shadow:0 0 15px rgba(85,216,149,.55); }
.owner-live-grid span { color:#a7beb2; font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.owner-live-grid strong { grid-row:1/3; grid-column:2; color:#dfffea; font-size:34px; line-height:1; }
.owner-live-grid small { color:#6f897b; font-size:10px; }
.owner-summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.owner-insights-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr); gap:18px; }
.owner-insight-panel { min-width:0; }
.owner-funnel { display:grid; gap:8px; }
.owner-funnel-step { display:grid; grid-template-columns:28px minmax(0,1fr) 86px; align-items:center; gap:10px; padding:9px 11px; border:1px solid #33263b; border-radius:11px; background:#100d15; }
.owner-funnel-step > span { display:grid; place-items:center; width:28px; height:28px; color:#1a0c03; border-radius:9px; background:linear-gradient(145deg,#ff8a37,#a77df1); font-size:11px; font-weight:950; }
.owner-funnel-step > div { min-width:0; display:grid; gap:7px; }
.owner-funnel-step > div strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.owner-funnel-step > div i,.owner-themes i { height:4px; display:block; overflow:hidden; border-radius:999px; background:#29212f; }
.owner-funnel-step > div em,.owner-themes em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple-light),var(--orange)); }
.owner-funnel-step > b { display:grid; justify-items:end; color:#fff0e4; font-size:15px; }
.owner-funnel-step > b small { color:#786d80; font-size:9px; font-weight:750; }
.owner-retention-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.owner-retention-grid > div { padding:13px; display:grid; gap:5px; border:1px solid #35283d; border-radius:11px; background:#100d15; }
.owner-retention-grid span,.owner-payment-funnel span { color:#817589; font-size:9px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.owner-retention-grid strong { color:#f5eaf7; font-size:25px; }
.owner-payment-funnel { margin-top:10px; padding:12px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:7px; border:1px solid rgba(255,122,26,.2); border-radius:12px; background:rgba(255,122,26,.045); }
.owner-payment-funnel > div { min-width:0; display:grid; justify-items:center; gap:3px; text-align:center; }
.owner-payment-funnel > div strong { color:#ffc08b; font-size:19px; }
.owner-payment-funnel > div small { color:#776a7d; font-size:9px; }
.owner-payment-funnel > i { color:#5d4c67; font-style:normal; }
.owner-activity-card > small { min-height:16px; margin:-4px 0 10px; display:block; color:#887a90; font-size:9px; }
.owner-themes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.owner-themes > div { min-width:0; padding:12px; display:grid; grid-template-columns:minmax(0,1fr) 70px auto; align-items:center; gap:9px; border:1px solid #34273c; border-radius:11px; background:#100d15; }
.owner-themes span { overflow:hidden; font-size:11px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.owner-themes strong { color:#cbb6f6; font-size:12px; }
.owner-themes > p { grid-column:1/-1; margin:0; padding:18px; color:#84768c; text-align:center; }
.owner-lower-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr); gap:18px; }
.owner-lower-grid > .owner-panel { min-width:0; }
.owner-layouts { margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.owner-layouts > div { padding:10px 12px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; border:1px solid #34273c; border-radius:10px; background:#100d15; }
.owner-layouts span { grid-column:1/-1; color:#817489; font-size:9px; font-weight:850; text-transform:uppercase; }
.owner-layouts strong { color:#e9dff0; font-size:11px; }
.owner-layouts b { color:#bfa8ec; font-size:11px; }
.owner-system-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.owner-system-grid > div { min-width:0; padding:13px; display:grid; gap:5px; border:1px solid #35283d; border-radius:11px; background:#100d15; }
.owner-system-grid span { color:#817589; font-size:9px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.owner-system-grid strong { overflow:hidden; color:#b8edca; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
#owner-system-backup { text-overflow:clip; white-space:normal; }
.owner-user-tools { margin:0 0 13px; display:grid; grid-template-columns:minmax(220px,1.25fr) minmax(190px,.8fr) minmax(210px,1fr) auto; align-items:end; gap:9px; }
.owner-user-tools label { min-width:0; display:grid; gap:5px; }
.owner-user-tools label > span { color:#8b7d93; font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.owner-user-tools input,.owner-user-tools select,.owner-sort-direction { width:100%; min-height:42px; padding:9px 11px; color:#eee4f1; border:1px solid #42324b; border-radius:10px; outline:0; background:#100d15; font:inherit; font-size:12px; }
.owner-user-tools input:focus,.owner-user-tools select:focus { border-color:#825bc2; box-shadow:0 0 0 3px rgba(126,81,198,.13); }
.owner-sort-direction { width:auto; color:#cdbaf2; cursor:pointer; font-weight:800; white-space:nowrap; }
.owner-table { min-width:1480px; }
.owner-table th,.owner-table td { padding:11px 12px; vertical-align:middle; }
.owner-table th button { padding:0; color:inherit; border:0; background:transparent; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.owner-table th button:hover { color:#f3e9f6; }
.owner-table th:first-child,.owner-table td:first-child { position:sticky; left:0; z-index:2; background:#100d15; }
.owner-table th:first-child { z-index:3; background:#17111d; }
.owner-table tbody tr:hover td:first-child { background:#17121d; }
.owner-table td:nth-child(2),.owner-table th:nth-child(2),.owner-table td:nth-child(3),.owner-table th:nth-child(3) { text-align:left; }
.owner-table td:nth-child(2) { min-width:190px; }
.owner-table td:nth-child(3) { min-width:190px; }
.owner-statuses { display:flex; flex-wrap:wrap; gap:4px; }
.owner-status { padding:4px 7px; color:#b9a8c2; border:1px solid #44334e; border-radius:999px; background:#19121f; font-size:8px; font-weight:900; letter-spacing:.04em; white-space:nowrap; text-transform:uppercase; }
.owner-status.good { color:#9de9bd; border-color:rgba(69,201,133,.3); background:rgba(69,201,133,.08); }
.owner-status.warning { color:#ffd08e; border-color:rgba(255,178,71,.3); background:rgba(255,178,71,.08); }
.owner-status.live { color:#ffb27d; border-color:rgba(255,122,26,.35); background:rgba(255,122,26,.09); }
.owner-status.muted { color:#706578; }
.owner-activity-counts { display:flex; gap:4px; }
.owner-activity-counts span { min-width:38px; padding:4px 6px; display:flex; align-items:center; gap:4px; color:#c2b4c9; border-radius:7px; background:#1c1622; font-size:9px; }
.owner-activity-counts b { color:#9d80da; font-size:8px; }
.owner-details-button { padding:6px 9px; color:#d6c2ff; border:1px solid #563f68; border-radius:8px; background:#1d1525; font-size:9px; font-weight:900; cursor:pointer; }
.owner-details-button:hover { color:#fff; border-color:#805ca0; }
.owner-user-dialog { position:relative; width:min(1120px,calc(100% - 28px)); max-height:92vh; padding:0; overflow:auto; color:#f7eff8; border:1px solid #513d5d; border-radius:22px; background:radial-gradient(circle at 100% 0,rgba(116,69,218,.17),transparent 30rem),#100d15; box-shadow:0 40px 140px #000; }
.owner-user-dialog::backdrop { background:rgba(5,3,8,.86); backdrop-filter:blur(7px); }
.owner-user-dialog .payment-code-close { position:sticky; top:14px; float:right; z-index:5; margin:14px 14px -50px 0; }
.owner-user-content { padding:30px; }
.owner-user-heading { padding-right:45px; display:flex; align-items:end; justify-content:space-between; gap:24px; }
.owner-user-heading h2 { margin:5px 0 3px; font-size:34px; }
.owner-user-heading p { margin:0; color:#9a8ca2; }
.owner-profile-links { margin-top:11px; display:flex; flex-wrap:wrap; gap:7px; }
.owner-profile-link { min-height:32px; padding:7px 10px; display:inline-flex; align-items:center; gap:5px; color:#e7d8ff; border:1px solid #604677; border-radius:9px; background:#21172a; text-decoration:none; font-size:10px; font-weight:900; }
.owner-profile-link:hover { color:#fff; border-color:#966dc0; background:#2a1c35; }
.owner-profile-link.disabled { color:#6f6476; border-color:#382d3e; background:#17121b; cursor:not-allowed; }
.owner-integration-error { margin-top:18px; padding:13px 15px; display:grid; gap:4px; color:#ffd8a2; border:1px solid rgba(255,167,56,.3); border-radius:12px; background:rgba(255,143,0,.07); }
.owner-integration-error span { color:#bfa98c; font-size:11px; }
.owner-detail-grid { margin-top:20px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.owner-detail-grid article,.owner-detail-live > div { min-width:0; padding:13px; display:grid; gap:5px; border:1px solid #35283d; border-radius:11px; background:#17111d; }
.owner-detail-grid span,.owner-detail-live span { color:#82758a; font-size:9px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.owner-detail-grid strong,.owner-detail-live strong { overflow:hidden; color:#ece2ef; font-size:12px; text-overflow:ellipsis; }
.owner-detail-section { margin-top:22px; }
.owner-detail-heading { margin-bottom:9px; display:flex; align-items:end; justify-content:space-between; gap:15px; }
.owner-detail-heading small { color:var(--orange-light); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.owner-detail-heading h3 { margin:3px 0 0; font-size:19px; }
.owner-detail-heading > span { color:#8b7d93; font-size:10px; }
.owner-detail-live { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.owner-detail-table-wrap { overflow:auto; border:1px solid #35283d; border-radius:12px; }
.owner-detail-table-wrap table { width:100%; min-width:700px; border-collapse:collapse; background:#120e17; }
.owner-detail-table-wrap th,.owner-detail-table-wrap td { padding:10px 12px; text-align:right; border-bottom:1px solid #2c2232; font-size:11px; }
.owner-detail-table-wrap th:first-child,.owner-detail-table-wrap td:first-child { text-align:left; }
.owner-detail-table-wrap th { color:#817589; background:#17111d; font-size:8px; text-transform:uppercase; }
.owner-detail-table-wrap tr:last-child td { border-bottom:0; }
.owner-detail-table-wrap b { color:#ffc08a; }
.owner-event-list { margin:0; padding:0; display:grid; gap:5px; list-style:none; }
.owner-event-list li { padding:9px 11px; display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid #302438; border-radius:10px; background:#151019; }
.owner-event-list li > i { width:7px; height:7px; border-radius:50%; background:#8b65dc; box-shadow:0 0 10px rgba(139,101,220,.5); }
.owner-event-list li > div { min-width:0; display:grid; gap:2px; }
.owner-event-list strong { font-size:11px; }
.owner-event-list span,.owner-event-list time { color:#7f7287; font-size:9px; }
.owner-event-list time { white-space:nowrap; }
.owner-detail-loading,.owner-detail-empty { min-height:250px; display:grid; place-items:center; color:#998ba1; text-align:center; }
.owner-privacy-note { margin:22px 0 0; color:#695f6f; font-size:9px; text-align:center; }

@media(max-width:1150px){
  .owner-live-grid,.owner-summary-grid{grid-template-columns:1fr 1fr}
  .owner-insights-grid{grid-template-columns:1fr}
  .owner-lower-grid{grid-template-columns:1fr}
  .owner-themes{grid-template-columns:1fr 1fr}
  .owner-user-tools{grid-template-columns:1fr 1fr}
  .owner-detail-grid,.owner-detail-live{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .owner-live-grid,.owner-summary-grid,.owner-themes,.owner-user-tools,.owner-detail-grid,.owner-detail-live,.owner-layouts,.owner-system-grid{grid-template-columns:1fr}
  .owner-live-grid strong{font-size:28px}
  .owner-payment-funnel{grid-template-columns:1fr}.owner-payment-funnel>i{display:none}
  .owner-user-content{padding:23px 15px}.owner-user-heading{align-items:flex-start;flex-direction:column}.owner-user-heading h2{font-size:27px}
  .owner-event-list li{grid-template-columns:8px minmax(0,1fr)}.owner-event-list time{grid-column:2}
}

/* Индексируемый центр помощи использует ту же визуальную систему, но читается как документация. */
.help-page { min-height:100vh; background:radial-gradient(circle at 82% 0,rgba(111,66,217,.22),transparent 34rem),var(--background); }
.help-main { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:54px 0 90px; display:grid; grid-template-columns:230px minmax(0,760px); gap:54px; align-items:start; }
.help-nav { position:sticky; top:24px; padding:18px; display:grid; gap:7px; border:1px solid var(--border); border-radius:16px; background:rgba(24,19,31,.88); }
.help-nav strong { margin:0 8px 8px; font-size:16px; }
.help-nav a { padding:9px 10px; color:#ac9cb8; border-radius:9px; text-decoration:none; font-size:13px; }
.help-nav a:hover { color:#fff; background:#241b2d; }
.help-content h1 { max-width:720px; margin:12px 0 16px; font-size:clamp(38px,6vw,64px); letter-spacing:-.04em; line-height:1.02; }
.help-lead { margin:0; color:#b7a9c0; font-size:19px; line-height:1.6; }
.help-content section { padding-top:58px; scroll-margin-top:20px; }
.help-content h2 { margin:0 0 16px; font-size:29px; }
.help-content p { color:#b4a6bd; line-height:1.7; }
.help-steps { margin:20px 0 0; padding:0; display:grid; gap:10px; list-style:none; counter-reset:help-step; }
.help-steps li { position:relative; min-height:70px; padding:15px 16px 15px 62px; display:grid; gap:4px; border:1px solid var(--border); border-radius:13px; background:rgba(24,19,31,.72); counter-increment:help-step; }
.help-steps li::before { content:counter(help-step); position:absolute; top:15px; left:16px; width:30px; height:30px; display:grid; place-items:center; color:#190c02; border-radius:9px; background:var(--orange); font-weight:950; }
.help-steps span { color:#a99bb2; font-size:14px; line-height:1.55; }
.help-download-card {
  margin:20px 0; padding:15px; display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center;
  gap:14px; border:1px solid rgba(155,118,242,.4); border-radius:15px;
  background:linear-gradient(135deg,rgba(111,66,217,.11),rgba(255,122,26,.045));
}
.help-download-card img { width:54px; height:54px; }
.help-download-card > div { min-width:0; display:grid; gap:3px; }
.help-download-card small { color:var(--orange-light); font-size:9px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.help-download-card strong { font-size:15px; }
.help-download-card span { color:var(--muted); font-size:10px; line-height:1.4; }
.help-download-card .button { text-decoration:none; white-space:nowrap; }
.help-checksum { overflow-wrap:anywhere; font-size:11px; }
.help-checksum code { color:#d9c5ff; }
.help-content code { padding:2px 6px; color:#e3d5ff; border:1px solid #55406a; border-radius:6px; background:#21172a; font-weight:800; }
.help-callout { margin:20px 0; padding:17px 18px; display:grid; gap:6px; color:#f2e8f7; border:1px solid rgba(255,122,26,.36); border-radius:14px; background:rgba(255,122,26,.08); }
.help-callout span { color:#c3b3ca; line-height:1.55; }
.help-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.help-status-grid span { padding:12px 14px; color:#96899f; border:1px solid var(--border); border-radius:11px; background:#17111d; font-size:13px; }
.help-status-grid .ok { color:#67daa0; }.help-status-grid .warn { color:#ffc174; }.help-status-grid .bad { color:#ff8ca0; }
@media(max-width:800px){.help-main{grid-template-columns:1fr;gap:18px;padding-top:28px}.help-nav{position:static;grid-template-columns:1fr 1fr}.help-nav strong{grid-column:1/-1}.help-content section{padding-top:42px}}
@media(max-width:620px){.help-download-card{grid-template-columns:48px minmax(0,1fr)}.help-download-card img{width:48px;height:48px}.help-download-card .button{grid-column:1/-1;text-align:center}}
@media(max-width:520px){.landing-footer{align-items:flex-start;flex-direction:column}.landing-footer span{margin-right:0}.help-nav{grid-template-columns:1fr}.help-status-grid{grid-template-columns:1fr}}

/* v0.37 — финальная полировка студии, оплаты и редактора. */
.widget-layout-settings { align-items:end; }
.widget-editor-callout { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; margin-bottom:16px; padding:13px 14px; border:1px solid rgba(255,122,26,.32); border-radius:13px; background:linear-gradient(135deg,rgba(255,122,26,.09),rgba(111,66,217,.07)),#15101b; }
.widget-editor-callout > span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#211006; background:#ff914d; font-size:18px; font-weight:900; }
.widget-editor-callout > div { display:grid; gap:3px; min-width:0; }
.widget-editor-callout strong { font-size:13px; }
.widget-editor-callout small { color:#b8a9c2; font-size:10px; line-height:1.35; }
.widget-editor-callout a { padding:8px 11px; border:1px solid #65477b; border-radius:9px; color:#f4e9fa; background:#21172a; font-size:11px; font-weight:850; text-decoration:none; white-space:nowrap; }
.widget-editor-callout a:hover { border-color:#ff914d; color:#fff; }
.compact-position-field[hidden] { display:none !important; }
.boss-live-rank {
  display:block; width:max-content; max-width:100%; margin-top:4px; color:#ffc28f;
  font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase;
}
.boss-overlay-heading > small {
  min-width:0; max-width:100%; overflow:hidden; color:var(--widget-muted,#b9aabd);
  font-size:clamp(11px,.92vw,16px); font-weight:800; line-height:1.15; text-overflow:ellipsis; white-space:nowrap;
}

.team-battle-arena-shell .team-battle-studio-hud {
  left:18px; right:18px; top:16px; grid-template-columns:minmax(0,1fr) minmax(190px,.72fr) minmax(0,1fr);
  gap:12px; padding:11px 14px; border-radius:13px;
}
.team-battle-arena-shell .team-battle-studio-hud .team-battle-hud-side strong { font-size:14px; }
.team-battle-arena-shell .team-battle-studio-hud .team-battle-hud-side b { font-size:12px; }
.team-battle-arena-shell .team-battle-studio-hud .team-battle-commander { font-size:9px; }
.team-battle-arena-shell .team-battle-studio-hud .team-battle-hud-center strong { font-size:14px; }
.team-battle-arena-shell .team-battle-studio-hud .team-battle-hud-center b { font-size:23px; }

.payment-code-exact {
  display:grid; justify-items:center; gap:4px; margin:0 0 14px; padding:15px 18px;
  border:1px solid rgba(255,174,112,.28); border-radius:15px; background:rgba(255,122,26,.08);
}
.payment-code-exact > span { color:#d7c8dd; font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.payment-code-exact .payment-code-amount {
  margin:0; color:#ffc087; font-size:clamp(38px,10vw,64px); line-height:1; letter-spacing:-.04em;
  text-shadow:0 0 24px rgba(255,122,26,.25);
}
.payment-code-actions { grid-template-columns:1fr 1.18fr; }
.payment-code-actions #open-memealerts { order:2; }
.payment-code-actions #copy-payment-code { order:1; }

.design-save-actions-inline {
  margin-top:18px; padding-top:16px; border-top:1px solid #392b40;
}
.design-save-actions-inline > span { min-width:0; color:#a99bb2; }
.feedback-dialog label > span { font-weight:800; }
.help-feedback-action { margin-top:24px; }

/* v0.40 — входящие обращения и состояние Telegram в панели владельца. */
.owner-feedback-heading { align-items:center; }
.owner-telegram-state { padding:6px 10px; border:1px solid #493a52; border-radius:999px; background:#17121c; font-weight:800; }
.owner-telegram-state[data-state="connected"] { color:#72e2a6; border-color:rgba(73,201,134,.35); background:rgba(73,201,134,.08); }
.owner-telegram-state[data-state="ready"],.owner-telegram-state[data-state="starting"] { color:#ffc174; }
.owner-telegram-state[data-state="error"] { color:#ff8ca0; border-color:rgba(255,91,119,.35); }
.owner-telegram-card { padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid #3e3047; border-radius:13px; background:linear-gradient(135deg,rgba(111,66,217,.11),rgba(255,122,26,.05)); }
.owner-telegram-copy { min-width:0; display:grid; gap:4px; }
.owner-telegram-copy strong { font-size:14px; }
.owner-telegram-copy span { color:#a89aae; font-size:12px; line-height:1.4; }
.owner-connect-panel { margin-top:10px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid rgba(255,122,26,.3); border-radius:13px; background:rgba(255,122,26,.06); }
.owner-connect-panel[hidden] { display:none; }
.owner-connect-panel > div { min-width:0; display:grid; gap:5px; }
.owner-connect-panel small,.owner-connect-panel span { color:#a99bb2; font-size:11px; }
.owner-connect-panel code { width:max-content; max-width:100%; padding:7px 10px; overflow:auto; color:#fff; border:1px solid #624366; border-radius:8px; background:#100c15; font-size:14px; font-weight:900; white-space:nowrap; }
.owner-feedback-summary { margin:14px 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.owner-feedback-summary article { padding:12px 13px; display:grid; gap:4px; border:1px solid #382c41; border-radius:11px; background:#130f18; }
.owner-feedback-summary span { color:#908297; font-size:10px; font-weight:850; text-transform:uppercase; }
.owner-feedback-summary strong { font-size:24px; }
.owner-feedback-tools { margin-bottom:12px; display:grid; grid-template-columns:minmax(240px,1.35fr) minmax(170px,.7fr) minmax(170px,.7fr) auto; align-items:end; gap:9px; }
.owner-feedback-tools label { min-width:0; display:grid; gap:5px; }
.owner-feedback-tools label > span { color:#8b7d93; font-size:9px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.owner-feedback-tools input,.owner-feedback-tools select { width:100%; min-height:42px; padding:9px 11px; color:#eee4f1; border:1px solid #42324b; border-radius:10px; outline:0; background:#100d15; font:inherit; font-size:12px; }
.owner-feedback-tools input:focus,.owner-feedback-tools select:focus { border-color:#825bc2; box-shadow:0 0 0 3px rgba(126,81,198,.13); }
.owner-feedback-list { display:grid; gap:8px; }
.owner-feedback-ticket { border:1px solid #392d41; border-radius:13px; overflow:hidden; background:#130f18; }
.owner-feedback-ticket:hover { border-color:#654977; background:#18111f; }
.owner-feedback-ticket > button { width:100%; padding:14px; display:grid; gap:8px; color:inherit; border:0; background:transparent; text-align:left; cursor:pointer; }
.owner-feedback-ticket-top { display:flex; align-items:center; gap:7px; }
.owner-feedback-id { color:#ffb47c; font-size:11px; font-weight:950; letter-spacing:.07em; }
.owner-feedback-type { color:#aa9cb1; font-size:11px; }
.owner-feedback-status { margin-left:auto; padding:4px 8px; color:#d8c9de; border:1px solid #4b3a55; border-radius:999px; background:#211828; font-size:10px; font-weight:850; white-space:nowrap; }
.owner-feedback-status[data-status="new"] { color:#ffc174; border-color:rgba(255,193,116,.32); }
.owner-feedback-status[data-status="in_progress"] { color:#baa0ff; border-color:rgba(150,111,255,.38); }
.owner-feedback-status[data-status="needs_info"] { color:#ff9eb0; border-color:rgba(255,107,136,.38); }
.owner-feedback-status[data-status="resolved"] { color:#72e2a6; border-color:rgba(73,201,134,.38); }
.owner-feedback-status[data-status="rejected"] { color:#92879a; }
.owner-feedback-status.large { align-self:flex-start; padding:7px 11px; font-size:12px; }
.owner-feedback-ticket > button > strong { font-size:14px; }
.owner-feedback-ticket > button > strong small { color:#8f8297; font-weight:650; }
.owner-feedback-ticket p { margin:0; overflow:hidden; color:#d7cadc; font-size:12px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.owner-feedback-ticket footer { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; color:#8f8297; font-size:10px; }
.owner-feedback-ticket footer span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.owner-feedback-ticket footer i { padding:3px 6px; color:#72e2a6; border-radius:6px; background:rgba(73,201,134,.08); font-style:normal; font-weight:800; }
.owner-feedback-ticket footer i[data-delivery="pending"],.owner-feedback-ticket footer i[data-delivery="failed"] { color:#ffc174; background:rgba(255,193,116,.08); }
.owner-feedback-dialog { width:min(920px,calc(100% - 28px)); }
.owner-feedback-message { margin:18px 0; padding:18px; border:1px solid #413249; border-radius:14px; background:#15101b; }
.owner-feedback-message small { color:#ffb47c; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.owner-feedback-message p { margin:9px 0 0; color:#f1e8f3; font-size:14px; line-height:1.65; }
.owner-feedback-contact a { color:#d7bcff; }
.owner-feedback-status-actions { margin-top:18px; padding:16px; display:grid; gap:10px; border:1px solid #3b2e44; border-radius:14px; background:#120e17; }
.owner-feedback-status-actions > span { color:#9d8fa5; font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.owner-feedback-status-actions > div { display:flex; flex-wrap:wrap; gap:7px; }
.owner-feedback-status-actions button { padding:8px 11px; color:#ded2e3; border:1px solid #4b3a55; border-radius:9px; background:#201725; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.owner-feedback-status-actions button:hover:not(:disabled) { border-color:#865fc0; background:#2a1d32; }
.owner-feedback-status-actions button:disabled { opacity:.42; cursor:default; }

/* В пустом месте рейтинга цифра всегда остаётся в центре кружка. */
:is([data-widget-theme="royal"],[data-widget-theme="gothic"],[data-widget-theme="blood"]) .boss-party-slot.empty .boss-party-avatar {
  display:grid; place-items:center; padding:0; text-align:center; text-indent:0; line-height:1;
}

@media(max-width:760px){
  .feedback-contact-grid { grid-template-columns:1fr; }
  .owner-telegram-card,.owner-connect-panel { align-items:stretch; flex-direction:column; }
  .owner-feedback-summary { grid-template-columns:1fr 1fr; }
  .owner-feedback-tools { grid-template-columns:1fr; }
  .owner-feedback-ticket footer { grid-template-columns:1fr auto; }
  .owner-feedback-ticket footer i { display:none; }
  .widget-layout-settings { grid-template-columns:1fr; }
  .widget-editor-callout { grid-template-columns:auto minmax(0,1fr); }
  .widget-editor-callout a { grid-column:1/-1; text-align:center; }
  .team-battle-arena-shell .team-battle-studio-hud { left:8px; right:8px; top:8px; grid-template-columns:1fr 1fr; }
  .team-battle-arena-shell .team-battle-studio-hud .team-battle-hud-center { grid-column:1/-1; grid-row:1; }
}

/* v0.51 — безопасное сопряжение и каталог версий приложений. */
.topbar-utility.connections {
  color:#f0e3ff; border-color:rgba(155,118,242,.48); background:rgba(111,66,217,.12);
}
.connections-dialog { width:min(900px,calc(100% - 28px)); overflow:auto; }
.connections-heading { padding-bottom:18px; border-bottom:1px solid var(--border); }
.connections-heading p { max-width:660px; line-height:1.45; }
.connections-view,.connections-pair-view { margin-top:20px; }
.connections-summary { margin-bottom:15px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.integration-downloads {
  margin-bottom:18px; overflow:hidden; border:1px solid rgba(155,118,242,.38); border-radius:15px;
  background:linear-gradient(135deg,rgba(111,66,217,.1),rgba(255,122,26,.035));
}
.integration-downloads > summary {
  min-height:70px; padding:13px 15px; display:grid; grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center; gap:12px; cursor:pointer; list-style:none;
}
.integration-downloads > summary::-webkit-details-marker { display:none; }
.integration-downloads > summary:hover { background:rgba(255,255,255,.025); }
.integration-downloads > summary > span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.integration-downloads > summary strong { font-size:15px; }
.integration-downloads > summary small { color:var(--muted); font-size:11px; }
.integration-downloads > summary em { color:#bca5e8; font-size:11px; font-style:normal; font-weight:800; }
.integration-downloads[open] > summary em { font-size:0; }
.integration-downloads[open] > summary em::after { content:"Скрыть"; font-size:11px; }
.integration-downloads-icon {
  width:42px; height:42px; display:grid; place-items:center; color:#1b0c03; border-radius:12px;
  background:linear-gradient(145deg,#ff7a1a,#ff9d59); font-size:22px; font-weight:950;
}
.integration-download-list { padding:0 12px 12px; display:grid; gap:8px; }
.integration-download-loading { padding:18px; color:var(--muted); text-align:center; font-size:12px; }
.integration-download-card {
  min-width:0; padding:13px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center;
  gap:13px; border:1px solid var(--border); border-radius:12px; background:rgba(12,9,16,.55);
}
.integration-download-card-icon {
  width:46px; height:46px; display:grid; place-items:center; color:#ffc18f; border-radius:12px;
  background:rgba(255,122,26,.1); font-size:24px; font-weight:900;
}
.integration-download-copy { min-width:0; display:grid; gap:4px; }
.integration-download-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.integration-download-title strong { font-size:14px; }
.integration-download-title span { padding:3px 7px; color:#d7c2ff; border-radius:999px; background:rgba(155,118,242,.13); font-size:9px; font-weight:900; }
.integration-download-copy p { margin:0; color:var(--muted); font-size:11px; line-height:1.38; }
.integration-download-copy small { color:#796d80; font-size:9px; }
.integration-download-update { color:#9e8eab; font-size:10px; line-height:1.35; }
.integration-download-update::before { content:"↻ "; color:#7ce7ac; font-weight:900; }
.integration-download-actions { min-width:124px; display:grid; justify-items:stretch; gap:6px; text-align:center; }
.integration-download-actions .button { min-height:38px; padding:9px 12px; text-decoration:none; white-space:nowrap; }
.integration-download-actions .text-button { font-size:10px; }
.connections-summary > div { min-width:0; display:grid; gap:4px; }
.connections-summary > div strong { font-size:16px; }
.connections-summary > div span { color:var(--muted); font-size:13px; }
.connections-list { display:grid; gap:10px; }
.connections-empty { min-height:145px; display:grid; place-items:center; align-content:center; gap:5px; }
.connections-empty strong { color:var(--text); }
.connections-empty span { font-size:12px; }
.connection-device-card {
  min-width:0; padding:15px; display:grid; grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center; gap:14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.025);
}
.connection-device-icon {
  width:48px; height:48px; display:grid; place-items:center; color:var(--orange-light);
  border-radius:13px; background:rgba(255,122,26,.11); font-size:24px; font-weight:900;
}
.connection-device-copy { min-width:0; }
.connection-device-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.connection-device-title h3 { margin:0; overflow-wrap:anywhere; font-size:16px; }
.connection-device-status {
  padding:4px 8px; display:inline-flex; align-items:center; gap:5px; color:var(--muted);
  border-radius:999px; background:rgba(170,160,183,.08); font-size:10px; font-weight:850;
}
.connection-device-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.connection-device-status[data-online="true"] { color:#7ce7ac; background:rgba(73,201,134,.09); }
.connection-device-capabilities { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
.connection-device-bridge-state { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.connection-device-bridge-state[hidden] { display:none; }
.connection-device-bridge-state span {
  padding:4px 8px; color:#a99caf; border:1px solid rgba(169,156,175,.14); border-radius:999px;
  background:rgba(169,156,175,.055); font-size:10px; font-weight:800;
}
.connection-device-bridge-state span[data-ok="true"] { color:#79e2aa; border-color:rgba(73,201,134,.22); background:rgba(73,201,134,.08); }
.connection-device-last { margin-top:5px; display:block; color:#7f7389; font-size:11px; line-height:1.35; }
.connection-device-actions { display:flex; align-items:center; gap:13px; }
.connections-security-note {
  margin:15px 0 0; display:flex; align-items:flex-start; gap:9px; color:var(--muted); font-size:12px; line-height:1.45;
}
.connections-security-note > span { color:var(--purple-light); }
.connections-pair-view > h3 { margin:12px 0 17px; }
.connections-back { color:#cbb9f8; text-decoration:none; }
.connections-pair-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr); gap:20px; align-items:stretch; }
.connections-steps { display:grid; align-content:start; gap:15px; }
.connections-steps > div { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; }
.connections-steps > div > span {
  width:34px; height:34px; display:grid; place-items:center; color:var(--orange-light);
  border-radius:10px; background:rgba(255,122,26,.11); font-weight:900;
}
.connections-steps p { margin:0; display:grid; gap:3px; }
.connections-steps strong { font-size:14px; }
.connections-steps small { color:var(--muted); font-size:12px; line-height:1.42; }
.connections-code-panel {
  padding:21px; display:grid; justify-items:center; align-content:center; text-align:center;
  border:1px solid rgba(155,118,242,.48); border-radius:16px; background:rgba(255,255,255,.025);
}
.connections-code-panel > small { color:var(--muted); }
.connections-code { margin:15px 0 7px; font-size:clamp(31px,5vw,44px); line-height:1; letter-spacing:.12em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.connections-code-time { color:#7ce7ac; font-size:12px; font-variant-numeric:tabular-nums; }
.connections-code-time[data-expired="true"] { color:#ff8997; }
.connections-code-actions { margin-top:18px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.connections-code-panel > p { margin:14px 0 0; color:#7f7389; font-size:11px; line-height:1.42; }

@media(max-width:720px){
  .connections-summary { align-items:stretch; flex-direction:column; }
  .connections-summary .button { width:100%; }
  .connection-device-card { grid-template-columns:48px minmax(0,1fr); }
  .connection-device-actions { grid-column:2; justify-content:flex-end; }
  .connections-pair-grid { grid-template-columns:1fr; }
  .integration-download-card { grid-template-columns:46px minmax(0,1fr); }
  .integration-download-actions { grid-column:2; grid-template-columns:auto auto; align-items:center; }
}
@media(max-width:460px){
  .connection-device-card { grid-template-columns:1fr; }
  .connection-device-icon { width:42px; height:42px; }
  .connection-device-actions { grid-column:1; justify-content:flex-start; }
  .connections-code { letter-spacing:.06em; }
  .connections-code-actions { width:100%; display:grid; }
  .integration-downloads > summary { grid-template-columns:42px minmax(0,1fr); }
  .integration-downloads > summary em { display:none; }
  .integration-download-card { grid-template-columns:1fr; }
  .integration-download-actions { grid-column:1; grid-template-columns:1fr; }
}

/* v0.54 — компактный старт, заметный OBS и подключения чатов. */
.setup-step-obs .obs-status {
  grid-column:3; grid-row:2; max-width:none; min-height:28px; padding:5px 9px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid rgba(255,126,139,.36); border-radius:999px;
  color:#ff9aa5; background:rgba(196,57,75,.1); font-size:10px; font-weight:850; line-height:1.2; white-space:nowrap;
}
.setup-step-obs .obs-status i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }
.setup-step-obs .obs-status[data-state="connected"] { color:#77e5a7; border-color:rgba(73,201,134,.4); background:rgba(54,171,111,.1); }
.setup-step-obs .obs-status[data-state="stale_cache"] { color:#ffc174; border-color:rgba(255,176,90,.4); background:rgba(255,155,55,.08); }
.platform-connections-section { margin-bottom:18px; padding:15px; border:1px solid rgba(155,118,242,.38); border-radius:15px; background:linear-gradient(135deg,rgba(111,66,217,.1),rgba(255,122,26,.035)); }
.platform-connections-heading { margin-bottom:12px; display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.platform-connections-heading > div { display:grid; gap:3px; }
.platform-connections-heading strong { font-size:16px; }
.platform-connections-heading span { color:var(--muted); font-size:12px; line-height:1.4; }
.platform-connections-heading a { color:#cdb9f5; font-size:11px; font-weight:800; white-space:nowrap; }
.platform-connections-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.platform-connection-card { min-width:0; padding:12px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; border:1px solid #3b3045; border-radius:12px; background:rgba(11,8,15,.55); }
.platform-connection-card[data-state="connected"] { border-color:rgba(71,202,135,.42); }
.platform-connection-card[data-state="error"] { border-color:rgba(242,93,113,.45); }
.platform-connection-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; color:#fff; font-size:17px; font-weight:950; }
.platform-connection-icon.youtube { background:#d52c36; }
.platform-connection-icon.twitch { background:#6f42d9; }
.platform-connection-copy { min-width:0; display:grid; gap:2px; }
.platform-connection-copy strong { font-size:14px; }
.platform-connection-copy > span { overflow:hidden; color:#eee5f2; font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.platform-connection-copy small { color:#95879e; font-size:10px; line-height:1.35; }
.platform-connection-actions { display:grid; justify-items:end; gap:6px; }
.platform-connection-actions .button { min-height:34px; padding:7px 10px; font-size:11px; text-decoration:none; }
.platform-connection-actions .button.disabled { opacity:.48; cursor:not-allowed; }
.platform-connection-actions .text-button { font-size:10px; }
.platform-connections-legal { margin:11px 0 0; color:#817489; font-size:10px; line-height:1.45; }
.platform-connections-legal a,.account-data-management a,.platform-policy-check a { color:#cdb9f5; }
.account-data-management { margin-top:14px; padding:11px 13px; border:1px solid #302638; border-radius:11px; color:#8e8196; font-size:11px; }
.account-data-management summary { width:max-content; max-width:100%; color:#ad9db6; cursor:pointer; font-weight:800; }
.account-data-management p { margin:9px 0; line-height:1.45; }
.account-data-management > div { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.platform-consent-dialog,.delete-account-dialog { width:min(620px,calc(100% - 28px)); }
.platform-consent-body,.delete-account-body { padding:20px; display:grid; gap:15px; }
.platform-consent-provider { padding:13px; display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:12px; border:1px solid #3c3046; border-radius:13px; background:rgba(17,12,22,.66); }
.platform-consent-provider > span { width:46px; height:46px; display:grid; place-items:center; color:#fff; border-radius:12px; font-size:18px; font-weight:950; }
.platform-consent-provider > span.twitch { background:#6f42d9; }
.platform-consent-provider > span.youtube { background:#d52c36; }
.platform-consent-provider > div { display:grid; gap:3px; }
.platform-consent-provider strong { font-size:16px; }
.platform-consent-provider small { color:var(--muted); font-size:11px; }
.platform-consent-access { padding:14px 15px; border:1px solid #33293b; border-radius:12px; background:rgba(8,6,11,.38); }
.platform-consent-access > strong { font-size:13px; }
.platform-consent-access ul { margin:9px 0 0; padding-left:19px; display:grid; gap:7px; color:#b9acbf; font-size:12px; line-height:1.45; }
.platform-consent-limits { margin:0; padding:10px 12px; color:#bbaebf; border-left:3px solid #ff8a3d; background:rgba(255,126,35,.07); font-size:11px; line-height:1.5; }
.platform-policy-check { padding:12px; display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; gap:9px; border:1px solid #44334f; border-radius:11px; cursor:pointer; }
.platform-policy-check input { width:18px; height:18px; margin:0; accent-color:#ff7a1a; }
.platform-policy-check span { color:#c1b5c6; font-size:12px; line-height:1.5; }
.platform-consent-actions { display:flex; justify-content:flex-end; gap:8px; }
.form-error { margin:0; color:#ff8997; font-size:11px; line-height:1.45; }
.delete-account-body > p { margin:0; color:#b7aabb; font-size:12px; line-height:1.55; }
.delete-account-body label { display:grid; gap:7px; color:#d7cbdc; font-size:12px; }
.delete-account-body input { width:100%; }
@media(max-width:1280px) and (min-width:981px){
  .setup-step-obs .setup-step-copy { grid-template-columns:max-content minmax(0,1fr); }
  .setup-step-obs .obs-size-note { grid-column:1/2; }
  .setup-step-obs .obs-status { grid-column:2; }
}
@media(max-width:760px){
  .setup-step-obs .setup-step-copy { grid-template-columns:1fr; }
  .setup-step-obs .setup-step-copy > strong,.setup-step-obs .setup-button-stack,.setup-step-obs .obs-size-note,.setup-step-obs .obs-status { grid-column:1; grid-row:auto; }
  .setup-step-obs .setup-button-stack { display:grid; grid-template-columns:1fr 1fr; }
  .setup-step-share .setup-button-stack { grid-template-columns:1fr; }
  .platform-connections-grid { grid-template-columns:1fr; }
}
@media(max-width:520px){
  .platform-connections-heading { display:grid; }
  .platform-connection-card { grid-template-columns:38px minmax(0,1fr); }
  .platform-connection-icon { width:38px; height:38px; }
  .platform-connection-actions { grid-column:2; display:flex; justify-content:flex-start; }
}

/* v0.60.0 — три ровных шага без микрокнопок. */
.setup-strip {
  grid-template-columns:minmax(210px,.72fr) minmax(0,1.65fr) minmax(360px,1.08fr);
  gap:0;
  padding:0;
  align-items:stretch;
  overflow:hidden;
}
.setup-step {
  min-height:106px;
  padding:15px 16px;
  align-items:flex-start;
  gap:12px;
  border-right:1px solid var(--border);
}
.setup-step:last-child { border-right:0; }
.setup-step > span { flex-basis:34px; height:34px; border-radius:10px; font-size:15px; }
.setup-step > div { min-width:0; padding-top:2px; }
.setup-step > div > strong { font-size:16px; line-height:1.25; }
.setup-step > div > small { font-size:12px; line-height:1.45; }
.setup-step-obs .setup-step-copy {
  grid-template-columns:minmax(190px,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:9px 12px;
}
.setup-step-obs .setup-step-copy > strong { grid-column:1; grid-row:1; }
.setup-step-obs .setup-button-stack { grid-column:2; grid-row:1; gap:7px; }
.setup-step-obs .obs-size-note { grid-column:1; grid-row:2; margin:0; font-size:12px; }
.setup-step-obs .obs-status { grid-column:2; grid-row:2; min-height:32px; padding:6px 10px; font-size:11px; }
.setup-step .setup-action-button { min-height:36px; padding:8px 12px; font-size:12px; }
.setup-step-share .setup-share-copy { gap:9px; }
.setup-step-share .setup-button-stack { margin:0; gap:7px; }

.platform-connection-card[data-state="unavailable"] {
  grid-template-columns:42px minmax(0,1fr);
  align-items:start;
  border-color:rgba(255,151,79,.34);
}
.platform-connection-card[data-state="unavailable"] .platform-connection-copy > span {
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  line-height:1.3;
}
.platform-connection-card[data-state="unavailable"] .platform-connection-actions {
  grid-column:2;
  justify-items:start;
}

@media(max-width:1220px){
  .setup-strip { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); }
  .setup-step:nth-of-type(2) { border-right:0; }
  .setup-step-share { grid-column:1/-1; border-top:1px solid var(--border); }
  .setup-step-share .setup-share-copy { grid-template-columns:max-content minmax(0,1fr); align-items:center; }
  .setup-step-share .setup-button-stack { width:100%; }
}
@media(max-width:760px){
  .setup-strip { grid-template-columns:1fr; }
  .setup-step,.setup-step:nth-of-type(2) { min-height:0; border-right:0; border-bottom:1px solid var(--border); }
  .setup-step-share { grid-column:1; border-top:0; border-bottom:0; }
  .setup-step-obs .setup-step-copy { grid-template-columns:1fr; }
  .setup-step-obs .setup-step-copy > strong,.setup-step-obs .setup-button-stack,.setup-step-obs .obs-size-note,.setup-step-obs .obs-status { grid-column:1; grid-row:auto; }
  .setup-step-share .setup-share-copy { grid-template-columns:1fr; }
}

/* v0.54 — новая главная: продукт показывается в контексте живой OBS-сцены. */
.landing-v54-page { background:radial-gradient(circle at 82% 7%,rgba(104,49,195,.17),transparent 34rem),radial-gradient(circle at 4% 19%,rgba(255,112,24,.09),transparent 28rem),#0c0910; }
.landing-v54-topbar { height:68px; background:rgba(12,9,16,.8); backdrop-filter:blur(18px); }
.landing-v54-nav { display:flex; align-items:center; gap:25px; margin-left:auto; margin-right:28px; }
.landing-v54-nav a { color:#9f92a7; font-size:12px; font-weight:750; text-decoration:none; }
.landing-v54-nav a:hover { color:#fff; }
.landing-v54-main { width:min(1280px,calc(100% - 40px)); padding:62px 0 76px; }
.landing-v54-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(570px,1.1fr); align-items:center; gap:62px; min-height:610px; }
.landing-v54-hero-copy h1 { max-width:660px; margin:14px 0 22px; font-size:clamp(50px,5.7vw,78px); letter-spacing:-.055em; line-height:.98; }
.landing-v54-hero-copy h1 em { color:#ff8d40; font-style:normal; }
.landing-v54-hero-copy > p { max-width:620px; margin:0; color:#b1a5b8; font-size:19px; line-height:1.58; }
.landing-v54-hero-copy .landing-actions { margin:28px 0 21px; }
.landing-v54-hero-copy .button { min-height:48px; padding:11px 18px; }
.landing-v54-trust { display:flex; flex-wrap:wrap; gap:7px; }
.landing-v54-trust span { padding:6px 9px; color:#94879c; border:1px solid #2e2535; border-radius:999px; font-size:10px; font-weight:750; }
.landing-v54-scene { position:relative; aspect-ratio:16/10; min-width:0; overflow:hidden; border:1px solid #50395e; border-radius:22px; background:radial-gradient(circle at 40% 18%,rgba(111,66,217,.24),transparent 38%),linear-gradient(145deg,#18101f,#09070c); box-shadow:0 35px 100px rgba(0,0,0,.55),0 0 70px rgba(110,65,217,.08); }
.landing-v54-scene::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(#000,transparent 85%); }
.landing-v54-scene-top { height:40px; padding:0 14px; position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #302439; background:rgba(7,5,10,.72); }
.landing-v54-scene-top span { display:flex; align-items:center; gap:6px; color:#ff919d; font-size:9px; font-weight:900; letter-spacing:.08em; }
.landing-v54-scene-top span i { width:7px; height:7px; border-radius:50%; background:#ef4258; box-shadow:0 0 10px #ef4258; }
.landing-v54-scene-top small { color:#756a7c; font-size:8px; font-weight:800; letter-spacing:.08em; }
.landing-v54-game { position:absolute; z-index:2; left:4.5%; top:16%; width:59%; padding:18px; border:1px solid rgba(255,135,61,.48); border-radius:16px; background:linear-gradient(155deg,rgba(35,19,39,.96),rgba(18,12,23,.96)); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.landing-v54-game-heading { margin-bottom:13px; display:grid; gap:4px; }.landing-v54-game-heading small { color:#ff9852; font-size:9px; font-weight:900; }.landing-v54-game-heading strong { font-size:20px; }
.landing-v54-option { margin-top:7px; padding:10px; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid #50365b; border-radius:10px; background:rgba(126,72,196,.13); }
.landing-v54-option span { width:24px; height:24px; display:grid; place-items:center; color:#160a02; border-radius:7px; background:#ff852f; font-size:10px; font-weight:950; }.landing-v54-option b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.landing-v54-option em { color:#ffd1ae; font-size:10px; font-style:normal; font-weight:850; }.landing-v54-option.dim { opacity:.63; }
.landing-v54-chat { position:absolute; z-index:3; right:3.5%; top:10.5%; width:33%; padding:10px; border:1px solid #463650; border-radius:13px; background:rgba(17,12,22,.94); box-shadow:0 17px 45px rgba(0,0,0,.4); }
.landing-v54-chat header { margin-bottom:8px; display:flex; justify-content:space-between; color:#eee4f2; font-size:9px; font-weight:900; }.landing-v54-chat header b { color:#b995ff; font-size:7px; }
.landing-v54-chat p { margin:5px 0; display:grid; grid-template-columns:20px minmax(0,1fr); align-items:start; gap:6px; color:#b8abbf; font-size:8px; line-height:1.35; }.landing-v54-chat p i { width:19px; height:19px; display:grid; place-items:center; color:#fff; border-radius:5px; font-size:7px; font-style:normal; font-weight:900; }.landing-v54-chat p i.yt { background:#d8313b; }.landing-v54-chat p i.tw { background:#7043dc; }.landing-v54-chat p b { color:#f0e8f4; }
.landing-v54-camera { position:absolute; z-index:2; right:4%; bottom:13%; width:27%; aspect-ratio:16/9; border:2px solid #a978f2; border-radius:11px; background:linear-gradient(145deg,#26192f,#100c16); box-shadow:0 0 0 3px rgba(126,79,218,.11); }.landing-v54-camera span { position:absolute; left:8px; top:7px; padding:3px 5px; color:#e1d4e7; border-radius:5px; background:rgba(5,3,8,.72); font-size:6px; font-weight:900; }
.landing-v54-ticker { position:absolute; z-index:4; left:3.5%; right:3.5%; bottom:3%; height:36px; padding:0 12px; display:flex; align-items:center; gap:19px; overflow:hidden; border:1px solid #5d3a6d; border-radius:9px; background:rgba(18,12,23,.92); font-size:8px; white-space:nowrap; }.landing-v54-ticker b { color:#ff9852; }.landing-v54-ticker span { color:#ded2e4; }
.landing-v54-proof { margin:18px 0 96px; padding:18px 0; display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid #2d2433; }
.landing-v54-proof article { min-height:55px; padding:0 24px; display:flex; align-items:center; gap:12px; border-right:1px solid #2d2433; }.landing-v54-proof article:last-child { border-right:0; }.landing-v54-proof strong { color:#ff9148; font-size:31px; letter-spacing:-.04em; }.landing-v54-proof span { max-width:120px; color:#a89bab; font-size:11px; line-height:1.35; }
.landing-v54-section { display:grid; grid-template-columns:minmax(310px,.72fr) minmax(520px,1.28fr); gap:80px; align-items:start; }
.landing-v54-section-copy h2 { margin:10px 0 15px; font-size:clamp(34px,4.2vw,56px); letter-spacing:-.045em; line-height:1.03; }.landing-v54-section-copy > p { margin:0; color:#a99cad; font-size:16px; line-height:1.6; }
.landing-v54-activity-list { display:grid; gap:9px; }.landing-v54-activity-list article { padding:16px 17px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:14px; border:1px solid #352a3d; border-radius:15px; background:rgba(24,18,30,.76); transition:.2s ease; }.landing-v54-activity-list article:hover,.landing-v54-activity-list article.active { border-color:#714b86; transform:translateX(4px); }.landing-v54-activity-list article > span { width:46px; height:46px; display:grid; place-items:center; color:#180a02; border-radius:13px; background:linear-gradient(145deg,#ff7a1a,#ff9b58); font-size:18px; font-weight:950; }.landing-v54-activity-list article > div { display:grid; gap:2px; }.landing-v54-activity-list small { color:#9c72df; font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }.landing-v54-activity-list strong { font-size:16px; }.landing-v54-activity-list p { margin:2px 0 0; color:#968a9e; font-size:11px; line-height:1.4; }.landing-v54-activity-list em { color:#796585; font-size:22px; font-style:normal; }
.landing-v54-editor { margin-top:120px; display:grid; grid-template-columns:minmax(560px,1.15fr) minmax(330px,.85fr); gap:80px; align-items:center; }
.landing-v54-editor-visual { overflow:hidden; border:1px solid #44344e; border-radius:19px; background:#121017; box-shadow:0 27px 80px rgba(0,0,0,.4); }.landing-v54-editor-bar { height:46px; padding:0 12px; display:flex; align-items:center; gap:5px; border-bottom:1px solid #33273b; }.landing-v54-editor-bar span { padding:7px 9px; color:#8b7e93; border-radius:7px; font-size:9px; font-weight:800; }.landing-v54-editor-bar .selected { color:#fff; background:#6d42c8; }
.landing-v54-editor-canvas { position:relative; aspect-ratio:16/9; background:radial-gradient(circle at 65% 15%,rgba(111,66,217,.18),transparent 35%),#09070c; }.editor-block { position:absolute; display:grid; place-items:center; color:#9c8fa5; border:1px dashed #5d4968; border-radius:8px; background:rgba(42,31,51,.55); font-size:7px; font-weight:900; letter-spacing:.08em; }.editor-block.activity { left:5%; top:8%; width:54%; height:48%; color:#ffd2b0; border-style:solid; border-color:#b86632; }.editor-block.chat { right:4%; top:8%; width:31%; height:55%; }.editor-block.camera { right:5%; bottom:9%; width:26%; height:25%; }.editor-block.ticker { left:4%; right:4%; bottom:5%; height:9%; color:#ddc9ff; border-color:#8b62bf; }
.editor-effect-badge { position:absolute; right:4%; top:8%; padding:7px 9px; color:#ffd5b9; border:1px solid rgba(255,129,48,.58); border-radius:999px; background:rgba(43,20,12,.88); box-shadow:0 0 26px rgba(255,122,26,.18); font-size:7px; font-weight:900; letter-spacing:.08em; }
.landing-v54-editor .landing-v54-section-copy ul { margin:22px 0 0; padding:0; display:grid; gap:10px; list-style:none; }.landing-v54-editor .landing-v54-section-copy li { padding-left:20px; position:relative; color:#c1b5c6; font-size:13px; }.landing-v54-editor .landing-v54-section-copy li::before { content:"✓"; position:absolute; left:0; color:#ff9148; font-weight:950; }
.landing-v54-how { margin-top:120px; }.landing-v54-how > .landing-v54-section-copy { max-width:680px; }.landing-v54-how-grid { margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }.landing-v54-how-grid article { min-height:145px; padding:19px; display:grid; grid-template-columns:38px minmax(0,1fr); align-content:start; gap:13px; border:1px solid #382c41; border-radius:15px; background:rgba(24,18,30,.72); }.landing-v54-how-grid article > span { color:#ff9148; font-size:11px; font-weight:950; }.landing-v54-how-grid article div { display:grid; gap:7px; }.landing-v54-how-grid strong { font-size:16px; }.landing-v54-how-grid p { margin:0; color:#9b8fa3; font-size:12px; line-height:1.5; }
.landing-v54-final { margin-top:100px; padding:28px 30px; display:grid; grid-template-columns:68px minmax(0,1fr) auto; align-items:center; gap:22px; border:1px solid #624174; border-radius:20px; background:radial-gradient(circle at 84% 0,rgba(255,122,26,.14),transparent 28rem),linear-gradient(135deg,#21152a,#130f19); }.landing-v54-final img { width:68px; height:68px; }.landing-v54-final small { color:#ff9a56; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }.landing-v54-final h2 { margin:5px 0 4px; font-size:26px; }.landing-v54-final p { margin:0; color:#a99cac; font-size:12px; }.landing-v54-final .button { min-height:46px; padding-inline:19px; }
@media(max-width:1080px){
  .landing-v54-nav { display:none; }.landing-v54-hero { grid-template-columns:1fr; gap:45px; }.landing-v54-hero-copy { max-width:760px; }.landing-v54-scene { width:min(760px,100%); }.landing-v54-section,.landing-v54-editor { grid-template-columns:1fr; gap:38px; }.landing-v54-editor-visual { width:min(760px,100%); }.landing-v54-activities .landing-v54-section-copy,.landing-v54-editor .landing-v54-section-copy { max-width:720px; }
}
@media(max-width:680px){
  .landing-v54-main { width:calc(100% - 28px); padding-top:42px; }.landing-v54-hero { min-height:0; }.landing-v54-hero-copy h1 { font-size:43px; }.landing-v54-hero-copy > p { font-size:16px; }.landing-v54-scene { border-radius:15px; }.landing-v54-game { padding:10px; }.landing-v54-game-heading strong { font-size:12px; }.landing-v54-option { padding:6px; grid-template-columns:20px minmax(0,1fr); }.landing-v54-option span { width:19px; height:19px; }.landing-v54-option em { display:none; }.landing-v54-chat { padding:7px; }.landing-v54-chat p:nth-of-type(n+3) { display:none; }.landing-v54-camera { display:none; }.landing-v54-proof { margin-bottom:70px; grid-template-columns:1fr 1fr; }.landing-v54-proof article { border-bottom:1px solid #2d2433; }.landing-v54-proof article:nth-child(2) { border-right:0; }.landing-v54-proof article:nth-child(n+3) { border-bottom:0; }.landing-v54-editor,.landing-v54-how { margin-top:80px; }.landing-v54-how-grid { grid-template-columns:1fr; }.landing-v54-how-grid article { min-height:0; }.landing-v54-final { margin-top:75px; grid-template-columns:48px 1fr; padding:22px; }.landing-v54-final img { width:48px; height:48px; }.landing-v54-final .button { grid-column:1/-1; text-align:center; }.landing-v54-section-copy h2 { font-size:36px; }
}

.landing-v54-editor-canvas .editor-block.ticker { left:22%; right:4%; }
.landing-v57-bridge {
  padding:clamp(28px,4vw,58px); display:grid; grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr);
  align-items:center; gap:clamp(34px,5vw,82px); border:1px solid rgba(155,118,242,.25); border-radius:30px;
  background:radial-gradient(circle at 85% 10%,rgba(111,66,217,.17),transparent 36%),rgba(12,8,16,.72);
}
.landing-v57-bridge .landing-v54-section-copy ul { margin:20px 0 0; padding:0; display:grid; gap:11px; list-style:none; }
.landing-v57-bridge .landing-v54-section-copy li { padding-left:24px; position:relative; color:#d4c7d9; line-height:1.45; }
.landing-v57-bridge .landing-v54-section-copy li::before { content:"◆"; position:absolute; left:0; top:1px; color:#ff832c; font-size:11px; }
.landing-v57-safety { margin-top:22px; padding:14px 16px; display:grid; gap:4px; border:1px solid rgba(73,201,134,.32); border-radius:13px; background:rgba(73,201,134,.055); }
.landing-v57-safety b { color:#83e1ad; }
.landing-v57-safety span { color:#aa9caf; font-size:12px; line-height:1.45; }
.landing-v57-bridge-window { padding:18px; display:grid; gap:14px; border:1px solid rgba(155,118,242,.38); border-radius:20px; background:#120d18; box-shadow:0 28px 70px rgba(0,0,0,.38); }
.landing-v57-bridge-title { min-width:0; padding-bottom:14px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.075); }
.landing-v57-bridge-title img { width:42px; height:42px; }
.landing-v57-bridge-title span { min-width:0; display:grid; gap:3px; }
.landing-v57-bridge-title strong { font-size:13px; letter-spacing:.08em; }
.landing-v57-bridge-title small { color:#8e8096; }
.landing-v57-bridge-title i { color:#77e5a7; font-size:12px; font-style:normal; text-shadow:0 0 12px currentColor; }
.landing-v57-bridge-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.landing-v57-bridge-status article { padding:13px; display:grid; gap:5px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.025); }
.landing-v57-bridge-status small { color:#897b91; font-size:9px; font-weight:900; }
.landing-v57-bridge-status strong { color:#75e0a5; font-size:13px; }
.landing-v57-bridge-status span { overflow:hidden; color:#a796b0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.landing-v57-bridge-frame { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:11px; background:rgba(255,126,49,.07); }
.landing-v57-bridge-frame span { font-size:12px; font-weight:750; }
.landing-v57-bridge-frame b { color:#ffb177; font-size:10px; letter-spacing:.05em; }
.landing-v57-bridge-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.landing-v57-bridge-actions span { padding:11px 8px; overflow:hidden; color:#eadff0; border:1px solid rgba(155,118,242,.28); border-radius:10px; background:rgba(111,66,217,.075); font-size:10px; font-weight:800; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:1000px){ .landing-v57-bridge { grid-template-columns:1fr; } }
@media(max-width:600px){
  .landing-v57-bridge { padding:24px 18px; border-radius:22px; }
  .landing-v57-bridge-status,.landing-v57-bridge-actions { grid-template-columns:1fr; }
}

/* 0.60: readable FAQ and an additional scene module in the illustration. */
.landing-v54-editor-bar{flex-wrap:wrap;gap:8px}.landing-v060-faq{margin-top:90px;max-width:900px}.landing-v060-faq h2{font-size:32px;margin-bottom:24px}.landing-v060-faq details{border-bottom:1px solid #44324f;padding:18px 0}.landing-v060-faq summary{font-size:17px;font-weight:650;cursor:pointer}.landing-v060-faq p{font-size:15px;line-height:1.65;color:#c3b5cc;max-width:760px;margin:14px 0 0}

/* Compact Studio: long instructions and QR actions stay inside their cells. */
.setup-step-obs .setup-step-copy > strong{white-space:normal}
.setup-step-share .setup-action-button{white-space:normal;line-height:1.25}

/* 0.61: start with activities; custom production tools come afterwards. */
.landing-v061-quick-start{margin-top:44px}.landing-v061-quick-start .landing-v54-section-copy{max-width:780px}.landing-v061-quick-start .landing-v54-how-grid strong{font-size:18px}.landing-v061-quick-start .landing-v54-how-grid p{font-size:14px}.landing-v061-next-level{margin-top:110px;padding:45px 0 0;border-top:1px solid #493441;max-width:100%}.landing-v061-next-level h2{font-size:clamp(32px,4vw,54px);line-height:1.08;letter-spacing:-.03em;margin:12px 0 18px}.landing-v061-next-level p{max-width:760px;font-size:18px;line-height:1.6;color:#b7aabb}.landing-v061-next-level+.landing-v54-editor{margin-top:40px}
.control-page .studio-layer-controls{display:flex;align-items:center;gap:20px;min-width:0}.control-page .activity-current{flex:1;min-width:0}.control-page .activity-toolbar{padding:8px 14px}.control-page .activity-current .button{padding:7px 11px;min-height:34px;font-size:12px}.control-page .activity-current strong{font-size:16px}
.studio-tools-button{display:flex;align-items:center;gap:24px;margin-left:auto;flex:0 0 auto;min-height:60px;padding:10px 16px;border:1px solid #71543f;border-radius:10px;background:#2b2029;color:#f4e9f5;font:inherit;text-align:left;cursor:pointer}.studio-tools-button>span{display:grid;gap:4px}.studio-tools-button strong{font-size:18px;line-height:1.25;font-weight:750}.studio-tools-button small{font-size:12px;line-height:1.35;color:#c9b9ce}.studio-tools-button i{font-style:normal;font-size:18px;color:#ffb880}.studio-tools-button:hover{border-color:#bc7757;background:#352630}.studio-tools-button:focus-visible{outline:2px solid #ffb880;outline-offset:3px}
.studio-extras-dialog{box-sizing:border-box;width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #675269;border-radius:18px;padding:26px;background:#18131f;color:#eee5f1;box-shadow:0 20px 80px #0008}.studio-extras-dialog::backdrop{background:#08050dc9;backdrop-filter:blur(4px)}.studio-extras-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.studio-extras-heading h2{margin:5px 0;font-size:26px}.studio-extras-intro{color:#bcafc6;margin:12px 0 20px;line-height:1.5}.studio-extras-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:22px}.studio-extras-links a{padding:16px;border:1px solid #514055;border-radius:10px;text-decoration:none;color:#fff;display:grid;gap:8px}.studio-extras-links a:hover{border-color:#bc7757}.studio-extras-links span{font-size:13px;line-height:1.5;color:#b9a9c2}.studio-extras-footer{display:none}
@media(max-width:1200px){.control-page .studio-layer-controls{gap:12px}.control-page .activity-current{gap:10px}.control-page .activity-current .activity-icon{display:none}}
@media(max-width:800px){.control-page .studio-layer-controls{flex-wrap:wrap}.control-page .activity-current{flex-basis:100%}.studio-tools-button{margin-left:0;width:100%;justify-content:space-between}.studio-extras-links{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-extras-dialog{padding:18px}.landing-v061-next-level{margin-top:70px}.landing-v061-quick-start{margin-top:48px}}
@media(max-width:480px){.studio-extras-links{grid-template-columns:1fr}.studio-extras-heading{align-items:flex-start}.studio-extras-heading h2{font-size:22px}.studio-tools-button strong{font-size:17px}}

/* 0.62: subtitles are a prominent optional feature after the simple start. */
.landing-v062-captions{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:38px;margin-top:32px;padding:42px;border:1px solid #755038;border-radius:24px;background:radial-gradient(ellipse at 5% 5%,#ff791a1c,transparent 60%),linear-gradient(135deg,#211622,#17121e);text-align:left;overflow:hidden}
.landing-v062-speech-copy{min-width:0}.landing-v062-speech-copy h3{margin:14px 0 22px;font-size:clamp(30px,3.15vw,48px);line-height:1.12;letter-spacing:-.035em;color:#fff}.landing-v062-speech-copy h3 .speech-language{white-space:nowrap}.landing-v062-speech-copy h3 em{font-style:normal;color:#ff9c50}.landing-v062-speech-copy>p{max-width:560px;font-size:17px;line-height:1.65;color:#d6cadc}.landing-v062-speech-copy>small{display:block;max-width:440px;margin-top:14px;line-height:1.5;color:#baaac5}.landing-v062-speech-copy .button{height:auto;white-space:normal;text-align:center;line-height:1.4}
.landing-v062-speech-benefits{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}.landing-v062-speech-benefits span{padding:7px 10px;border:1px solid #785332;border-radius:8px;background:#ff812410;font-size:12px;font-weight:700;color:#ffd4b3}
.landing-v062-speech-preview{align-self:center;min-width:0;padding:24px;background:linear-gradient(160deg,#37243f,#140f1a);border:1px solid #735282;border-radius:18px;box-shadow:0 20px 50px #08060b55}.landing-v062-speech-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.12em;font-weight:800;color:#d6bde4}.landing-v062-speech-top span:last-child{color:#ffb477}
.landing-v062-speech-wave{height:130px;display:flex;align-items:center;justify-content:center;gap:8px}.landing-v062-speech-wave i{width:9px;height:30px;border-radius:8px;background:linear-gradient(#ffb077,#b48cdf)}.landing-v062-speech-wave i:nth-child(2n){height:58px}.landing-v062-speech-wave i:nth-child(3n){height:90px}.landing-v062-speech-wave i:nth-child(5){height:110px}
.landing-v062-speech-lines{padding:18px;background:#0c0911d9;border:1px solid #ffffff1c;border-radius:12px}.landing-v062-speech-lines p{display:flex;gap:12px;align-items:flex-start;margin:0;line-height:1.5;font-size:18px;color:#fff}.landing-v062-speech-lines p+p{margin-top:14px;padding-top:14px;border-top:1px solid #ffffff1a;font-size:21px;font-weight:700}.landing-v062-speech-lines b{flex:none;padding-top:5px;font-size:10px;color:#ffad6c;letter-spacing:.1em}.landing-v062-speech-lines span{min-width:0;overflow-wrap:anywhere}.landing-v062-speech-note{margin:20px 0 9px;font-size:13px!important;color:#e0ccec!important;text-align:center}.landing-v062-speech-preview>small{display:block;text-align:center;font-size:11px;line-height:1.55;color:#bca9c6}
@media(max-width:900px){.landing-v062-captions{grid-template-columns:1fr;padding:28px;gap:28px}.landing-v062-speech-copy h3{font-size:38px}.landing-v062-speech-preview{width:100%;max-width:560px;justify-self:center;box-sizing:border-box}}
@media(max-width:480px){.landing-v062-captions{padding:20px 16px;border-radius:18px}.landing-v062-speech-copy h3{font-size:31px}.landing-v062-speech-copy>p{font-size:15px}.landing-v062-speech-preview{padding:16px}.landing-v062-speech-wave{height:105px}.landing-v062-speech-lines{padding:13px}.landing-v062-speech-lines p{font-size:15px}.landing-v062-speech-lines p+p{font-size:17px}.landing-v062-speech-copy .button{width:100%;box-sizing:border-box}}