/* Shared chrome and account journeys. Media/card layout stays in gallery.css. */
html { scroll-padding-top: 160px; }
@media (min-width:1001px) { html { zoom:.8; } }
[hidden] { display: none !important; }
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 32px; min-height: 96px; padding: 18px var(--page-gutter);
  background: #0c0e12f7; backdrop-filter: blur(16px); border-bottom: 1px solid #252c35;
}
.site-nav { display: flex; justify-content: center; align-items: center; gap: 8px; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  padding: 12px 16px; border-radius: 8px; color: #bbc2cf;
  white-space: nowrap; font-size: 14px; font-weight: 550;
}
.site-nav a:hover { background: #1b222c; color: #fff; }
.site-nav a[aria-current=page] { background: #263322; color: #c8ef9d; }
.account-cluster { display: flex; align-items: center; gap: 20px; }
.balance-link {
  padding: 13px 17px; border: 1px solid #425139; border-radius: 10px;
  background: #1b2718; color: #d5efbc; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.account-menu { position: relative; margin: 0; }
.account-menu summary {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; list-style: none;
}
.account-menu summary:hover, .account-menu[open] summary { background: #1d242e; }
.account-menu summary::after { content: '⌄'; color: #9ea9b9; margin-left: 4px; }
.account-menu summary::-webkit-details-marker { display: none; }
.avatar { width: 38px; height: 38px; display: block; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.account-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.account-menu-content {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 50;
  display: grid; gap: 8px; width: 280px; max-width: calc(100vw - 32px);
  max-height: 75vh; overflow: auto; padding: 14px; border: 1px solid #3c4654;
  border-radius: 14px; background: #181e28; box-shadow: 0 24px 64px #000b, 0 0 0 1px #0003;
}
.account-menu-content strong { display: block; padding: 12px 14px 18px; border-bottom: 1px solid #333d4b; overflow-wrap: anywhere; }
.account-menu-content>a { padding: 14px; border-radius: 8px; font-size: 15px; }
.account-menu-content>a:hover { background: #263141; color: #fff; }
.account-menu-content form { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid #333d4b; }
.account-menu-content button { width: 100%; padding: 13px 16px; }
.steam-signin { padding: 13px 18px; border: 1px solid #394454; border-radius: 9px; font-size: 14px; white-space: nowrap; }
.steam-signin:hover { background: #1b242d; }
button:disabled { opacity: .45; cursor: not-allowed; }
.secondary-action, .amount-preset { background: #252f3d; color: #edf0f6; border: 1px solid #445064; }
.secondary-action:hover, .amount-preset:hover { background: #344252; color: #fff; }

.account-page { max-width: var(--page-width); padding-top: 54px; padding-bottom: 100px; }
.account-page>h1 { margin-bottom: 22px; font-size: clamp(34px, 4vw, 46px); }
.account-page>p { max-width: 76ch; margin: 22px 0; line-height: 1.85; color: #b3bdcc; }
.account-page>h2 { margin: 54px 0 24px; }
.account-page>form {
  display: grid; gap: 28px; padding: 36px; margin: 36px 0;
  border: 1px solid #303947; border-radius: 16px; background: #151b24;
}
.account-page form p { margin: 0; line-height: 1.85; color: #b0bac9; }
.account-page form a, .text-link { color: #bbdf97; text-decoration: underline; text-underline-offset: 4px; }
.account-page form button { justify-self: start; min-height: 48px; }
.account-page>article {
  padding: 32px; margin: 28px 0; border: 1px solid #303947;
  border-radius: 14px; background: #151b24;
}
.account-page article h3 { margin-bottom: 20px; }
.account-page article p { margin: 18px 0; line-height: 1.8; color: #b0bac9; }
.account-page article form { margin-top: 26px; }
.account-page label, .landing-page label { display: grid; gap: 12px; margin: 0; color: #e6eaf0; font-size: 15px; font-weight: 550; }
.account-page input, .account-page select, .landing-page input { max-width: 100%; min-width: 0; }
.account-page input:not([type=checkbox]), .account-page select, .landing-page input { min-height: 50px; border-color: #414d5e; }
input[type=file] { height: auto; padding: 18px; font-size: 14px; line-height: 1.6; }
input[type=file]::file-selector-button { padding: 9px 12px; margin-right: 16px; border: 1px solid #4a586d; border-radius: 6px; background: #283649; color: #f0f3f8; }
.surface { padding: 36px; border: 1px solid #303947; border-radius: 16px; background: #151b24; }
.stack { display: grid; gap: 26px; }
.stack>p { line-height: 1.85; color: #b0bac9; }
.stack h2 { font-size: 26px; line-height: 1.4; }
.stack input { margin: 0; }
.stack details>summary { cursor: pointer; color: #badc97; padding: 14px 0; line-height: 1.5; }
.connection-fields { padding: 22px 0 6px; }
.history-connections { display: grid; gap: 24px; margin-top: 32px; }
.account-page .match-card { padding: 28px 32px; }
.match-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.match-heading>div { min-width: 0; }
.account-page .match-meta { margin: 0 0 10px; font-size: 13px; color: #a9b7c8; }
.account-page .match-heading h3 { margin: 0; font-size: 26px; overflow-wrap: anywhere; }
.match-result { display: grid; gap: 8px; text-align: right; flex-shrink: 0; }
.match-result strong { font-size: 27px; letter-spacing: 1px; }
.match-result span { font-size: 13px; }
.result-win { color: #76dd9e; }.result-loss { color: #f18c95; }.result-draw,.result-unknown { color: #bbc3d0; }
.account-page .match-production { margin: 22px 0; font-size: 14px; }
.match-actions { gap: 14px; }.match-actions .button { font-size: 14px; padding: 13px 17px; }
.match-scoreboard { border-top: 1px solid #354152; margin-top: 26px !important; }
.match-scoreboard>summary { padding: 22px 0 0; cursor: pointer; color: #c2dca7; }
.scoreboard-team { margin-top: 28px; }
.scoreboard-team h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 15px; overflow-wrap: anywhere; }
.scoreboard-team h4>strong { margin-left: auto; font-size: 22px; }
.scoreboard-team h4>span,.is-you th>span { color: #b8e495; font-size: 12px; font-weight: 400; }
.scoreboard-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #354152; border-radius: 10px; }
.scoreboard-scroll table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 14px; }
.scoreboard-scroll th,.scoreboard-scroll td { padding: 12px 14px; text-align: right; border-bottom: 1px solid #293442; white-space: nowrap; }
.scoreboard-scroll th:first-child { text-align: left; white-space: normal; min-width: 155px; max-width: 300px; overflow-wrap: anywhere; }
.scoreboard-scroll thead { color: #9facc0; background: #101721; }
.scoreboard-scroll tbody th { font-weight: 500; }.scoreboard-scroll tbody tr:last-child>* { border-bottom: 0; }
.scoreboard-scroll .is-you { background: #233528; }
[data-scoreboard-body][aria-busy=true]::before { content: 'Loading match statistics…'; display: block; margin-top: 20px; color: #aebace; font-size: 14px; }
.account-page .provider-details>summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 0; color: #eff4eb; font-size: 21px; font-weight: 650; cursor: pointer; list-style: none; }
.provider-details>summary::-webkit-details-marker { display: none; }
.provider-details>summary::after { content: '+'; margin-left: auto; font-size: 24px; color: #b7d99c; }
.provider-details[open]>summary::after { content: '−'; }
.provider-state { font-size: 13px; font-weight: 400; color: #abb9a3; }
.provider-details>summary:focus-visible { outline: 2px solid #b7ed55; outline-offset: 8px; border-radius: 3px; }
.account-page .fine-print, .account-page form .fine-print { font-size: 13px; font-style: italic; line-height: 1.75; color: #a8b4c5; }
.settings-actions [data-dirty]:empty { display: none; }
.form-actions, .preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.form-actions { margin-top: 12px; }
.amount-preset { min-width: 86px; min-height: 48px; }
.balance-overview { display: grid; gap: 18px; margin: 32px 0 42px; }
.balance-overview .balance-total { font-size: 50px; font-weight: 700; line-height: 1.15; letter-spacing: -1px; }
.balance-overview>p:last-child { color: #aeb9c9; line-height: 1.7; }

.account-page>.settings-form { padding: 0; border: 0; background: transparent; gap: 40px; margin-top: 38px; }
.settings-section { gap: 28px; }
.section-heading { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid #303b4a; }
.section-step { display: grid; place-items: center; flex: 0 0 42px; height: 42px; margin-top: 1px; background: #263329; border-radius: 10px; color: #b7d99c; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.section-heading h2 { margin: 0 0 8px; }
.section-heading p { font-size: 15px; line-height: 1.7; }
.connection-status { font-size: 14px; }
.account-page .option-card {
  display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: start;
  gap: 18px; padding: 24px; border: 1px solid #455267; border-radius: 12px;
  background: #101722; cursor: pointer; font-weight: 400;
}
.option-card:hover { border-color: #728365; }
.option-card:has(input:checked) { border-color: #698553; background: #1b291c; }
.account-page .option-card input[type=checkbox], .account-page .check input[type=checkbox] {
  appearance: auto; width: 24px; height: 24px; min-height: 24px; flex: 0 0 24px;
  margin: 3px 0 0; accent-color: #66d388; border: 1px solid #a9b4c1; cursor: pointer;
}
.option-card strong { display: block; margin: 0 0 8px; font-size: 18px; font-weight: 650; line-height: 1.45; color: #f0f4f9; }
.option-description { display: block; font-size: 14px; font-weight: 400; line-height: 1.8; color: #b8c3d0; }
.account-page .check { display: flex; align-items: flex-start; gap: 16px; font-weight: 400; line-height: 1.7; }
.paid-settings { padding: 28px; background: #101722; border: 1px solid #39495c; border-radius: 12px; }
.settings-actions {
  position: relative; z-index: 15; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 22px 28px;
  background: #1b2430; border-color: #455269; box-shadow: 0 12px 40px #0008;
}
.settings-actions [data-dirty] { max-width: 42ch; font-size: 14px; line-height: 1.65; }
.settings-actions .form-actions { margin: 0; gap: 18px; }
.account-page .save-action, .front-page .save-action { background: #45cb80; color: #092517; padding: 14px 26px; }
.account-page .save-action:hover { background: #6edb9d; color: #092517; }
.account-page .discard-action { background: #ce4856; color: #fff; padding: 14px 24px; }
.account-page .discard-action:hover { background: #e5606c; color: #fff; }
.form-error { padding: 24px; border: 1px solid #92515e; border-radius: 12px; background: #351c25; color: #ffdae0 !important; }
.form-error a { color: inherit; text-decoration: underline; }
.notice { padding: 24px; border: 1px solid #4d7146; border-radius: 12px; background: #203522; }
.visibility-row { padding: 20px 0; border-bottom: 1px solid #354051; }
.visibility-row span { overflow-wrap: anywhere; }
.account-page details { margin: 0; }
.account-page details p { margin: 18px 0; line-height: 1.8; }
.purchase-page h2 { margin: 38px 0 20px; }
.purchase-page h3 { margin: 30px 0 18px; }
.purchase-page p { margin: 22px 0; line-height: 1.85; }
.upload-intro { max-width: 70ch; margin: 24px 0 36px; }
.upload-intro p { margin: 16px 0; line-height: 1.8; color: #b7c1ce; }
.field-help { color: #aab6c7; font-size: 14px; line-height: 1.75; font-weight: 400; }
.upload-file { padding: 26px; border: 1px dashed #56677f; background: #0e151f; border-radius: 12px; }
.upload-file input[type=file] { padding: 0; border: 0; background: transparent; }
.upload-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.upload-meta span { border: 1px solid #3c4e35; background: #1c291a; color: #c4e2a8; border-radius: 99px; padding: 7px 14px; font-size: 13px; }
.quote-summary { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; padding: 28px; margin: 30px 0; background: #151e2a; border: 1px solid #374458; border-radius: 14px; }
.quote-summary p { margin: 8px 0; line-height: 1.75; }
.quote-summary .metadata-label { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: #9aaac0; }
.quote-summary>div { min-width: 0; }
.quote-summary a { color: #c5e6a9; overflow-wrap: anywhere; }
.status-badge { display: inline-block; border: 1px solid #536d40; border-radius: 99px; padding: 5px 12px; color: #c7e6ac; background: #22311d; font-size: 13px; }
.free-offer { border-color: #4b7040 !important; background: #172b1c !important; }
.free-offer .offer-price { font-size: 34px; font-weight: 750; color: #b9ed92; }
.account-page .form-actions button { white-space: normal; }

.landing-page { max-width: var(--page-width); padding-top: 64px; }
.landing-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.landing-hero h1 { font-size: clamp(38px,4.5vw,68px); letter-spacing: -2px; }
.landing-hero .lead { font-size: 21px; line-height: 1.75; color: #f1f3f8; }
.offer-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.offer-pills span { padding: 8px 14px; border: 1px solid #405038; border-radius: 99px; color: #b7ed55; font-size: 13px; }
.landing-details { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 64px 0 32px; }
.landing-details article { align-content: start; }
.landing-page strong { color: #f1f3f8; }
.landing-page ol { display: grid; gap: 18px; margin: 0; padding-left: 24px; color: #b0bac9; line-height: 1.75; }
.landing-page .button { justify-self: start; white-space: normal; }
.landing-footnote { margin-top: 32px; }
.landing-footnote p { max-width: 100ch; }
.account-menu summary:focus-visible { outline: 3px solid #b7ed55; outline-offset: 4px; }

@media(max-width:1200px) {
  .site-header { grid-template-columns: 1fr auto; gap: 12px 24px; }
  .site-nav { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; overflow-x: auto; padding-top: 4px; gap: 10px; }
  .site-nav a { padding: 10px 16px; }
  .landing-hero { gap: 34px; }
}
@media(max-width:700px) {
  .account-page .match-card { padding: 24px 20px; }
  .match-heading { gap: 16px; align-items: flex-start; }
  .account-page .match-heading h3 { font-size: 23px; }
  .match-result strong { font-size: 24px; }
  .match-actions { display: grid; }
  .match-actions .button { white-space: normal; text-align: center; }
  html { scroll-padding-top: 160px; }
@media (min-width:1001px) { html { zoom:.8; } }
  .site-header { padding: 12px var(--page-gutter); gap: 8px 12px; }
  .site-header .brand { font-size: 20px; }
  .brand-mark { display: none; }
  .account-cluster { gap: 8px; }
  .account-name { display: none; }
  .avatar { width: 32px; height: 32px; }
  .account-menu summary { padding: 6px; gap: 0; }
  .account-menu summary::after { font-size: 12px; margin-left: 5px; }
  .balance-link { padding: 11px 12px; font-size: 13px; }
  .site-nav { gap: 4px; padding-top: 6px; }
  .site-nav a { padding: 10px 12px; font-size: 13px; }
  .steam-signin { padding: 11px 12px; font-size: 12px; }
  .account-page { padding-top: 34px; padding-bottom: 64px; }
  .account-page>h1 { font-size: 34px; margin-bottom: 20px; }
  .account-page>form, .surface, .account-page>article { padding: 24px 20px; }
  .account-page>.settings-form { padding: 0; gap: 30px; }
  .stack, .settings-section { gap: 24px; }
  .section-heading { gap: 14px; padding-bottom: 22px; }
  .section-step { flex-basis: 34px; height: 34px; }
  .section-heading h2 { font-size: 23px; }
  .account-page .option-card { padding: 20px 16px; gap: 14px; }
  .option-card strong { font-size: 17px; }
  .paid-settings { padding: 22px 16px; }
  .settings-actions { position: static; gap: 20px; padding: 24px 20px; }
  .settings-actions .form-actions { gap: 12px; width: 100%; }
  .account-page .save-action { padding: 14px 22px; }
  .account-page .discard-action { padding: 14px 18px; }
  .balance-overview .balance-total { font-size: 40px; }
  .visibility-row { font-size: 14px; }
  .upload-file { padding: 20px 16px; }
  input[type=file] { font-size: 12px; }
  .landing-page { padding-top: 36px; }
  .landing-hero, .landing-details { grid-template-columns: 1fr; gap: 30px; }
  .landing-hero h1 { letter-spacing: -1px; }
  .landing-hero .lead { font-size: 19px; }
  .landing-details { margin-top: 40px; }
  footer { gap: 22px; flex-wrap: wrap; line-height: 1.7; }
}
/* Inline setup and the shared public library. */
.front-page { max-width: var(--page-width); padding-top:20px; }
@media (min-width:1001px) {
  .front-page { --promo-extra:clamp(0px,calc((100vw / .8 - var(--page-width))/2),240px); width:calc(100% - max(0px,calc((100% - var(--page-width))/2))); max-width:calc(var(--page-width) + var(--promo-extra)); margin-left:max(0px,calc((100% - var(--page-width))/2)); margin-right:0; }
  .front-page .front-layout { grid-template-columns:minmax(0,1fr) calc(320px + var(--promo-extra)); }
}
.front-heading { margin: 0 0 20px; }
.front-heading h1 { font-size: clamp(24px, 2.6vw, 42px); letter-spacing: -.8px; line-height: 1.15; margin: 0 0 16px; }
.front-heading>.front-explainer { color: #b6c0ce; font-size: 20px; line-height: 1.6; max-width: 80ch; }
.front-blocks { display: grid; gap: 32px; }
.front-blocks>.surface { padding: 36px; min-width: 0; scroll-margin-top: 30px; }
.front-page .section-heading { margin-bottom: 28px; }
.front-page .section-heading h2 { font-size: 28px; line-height: 1.3; }
.front-page .section-heading p { margin-top: 10px; color: #aab7c7; line-height: 1.6; }
.front-start-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: 32px; align-items: start; }
.front-start-grid>* { min-width: 0; }
.front-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; column-gap:32px; align-items:start; }
.front-main { display:block; min-width:0; }
.front-intro { min-width:0; }
.front-layout .front-start-grid { display:block; min-width:0; }
.front-layout>.free-offer { min-width:0; margin-top:0; overflow-wrap:anywhere; }
.front-library { container-type:inline-size; }
@media (max-width:1000px) {
  .front-layout { grid-template-columns:minmax(0,1fr); }
  .front-main { display:contents; }
  .front-intro { grid-column:1; grid-row:1; }
  .front-layout .front-start-grid { grid-column:1; grid-row:2; }
  .front-layout>.free-offer { grid-column:1; grid-row:3; margin-top:32px; }
  .front-main>.front-library { grid-column:1; grid-row:4; min-width:0; }
  .front-main>.retention-note { grid-column:1; grid-row:5; }
}
.free-offer { background: #1b251d; border: 1px solid #354735; border-radius: 14px; padding: 28px; gap: 22px; }
.free-offer h3 { font-size: 26px; line-height: 1.35; margin: 0; }
.name-example { padding: 16px; background: #111b14; border-radius: 8px; color: #c8e7a9; line-height: 1.6; overflow-wrap: anywhere; }
.free-offer details p { margin-top: 18px; }
.front-fields { align-items: start; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.front-page .provider-details>summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; cursor: pointer; padding: 16px 0; list-style: none; font-weight: 600; color: #e8eddf; }
.front-page .provider-details { border-block: 1px solid #34404d; }
.front-page .provider-details[open] { padding-bottom: 24px; }
.front-setup .setup-automatic { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 17px; line-height: 1.6; }
.front-setup .setup-automatic input[type=checkbox] { appearance: auto; flex: 0 0 22px; width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 3px 0 0; accent-color: #67d596; }
.front-setup .setup-automatic input:focus-visible { outline: 3px solid #b7ed55; outline-offset: 3px; }
.setup-allowance { color: #aab7c7; font-weight: 400; }
.front-page button:disabled { opacity: .55; cursor: not-allowed; }
.front-page .text-button { background: transparent; color: #b6d69b; padding: 0; font-size: 14px; text-decoration: underline; }
.front-library { margin-top: 40px; padding-top: 44px; border-top: 1px solid #34404d; scroll-margin-top: 30px; }
.video-library-heading { margin: 0 0 24px; }
.video-library-heading h1, .front-library .video-library-heading h2 { font-size: clamp(28px,3vw,36px); letter-spacing: -.8px; line-height: 1.2; }
.gallery-pages { justify-content: center; margin: 32px 0; color: #b1bdca; }
.retention-note { margin: 42px 0 0; }
@media (max-width: 850px) {
  .front-start-grid { grid-template-columns: 1fr; gap: 32px; }
  .front-fields { grid-template-columns: 1fr; gap: 26px; }
  .free-offer { padding: 24px; }
}
@media (max-width: 600px) {
  .front-heading { margin-bottom: 24px; }

  .front-heading>.front-explainer { font-size: 18px; }
  .front-blocks>.surface { padding: 24px 20px; }
  .front-page .section-heading { margin-bottom: 24px; }
  .front-page .section-heading h2 { font-size: 24px; }
  .front-library { margin-top: 32px; padding-top: 30px; }
}
.front-page .front-heading { display: block; padding: 0; border: 0; min-height: 0; }
.front-page .front-heading .eyebrow { margin: 0; }
/* One shared setup disclosure. */
.front-setup { --setup-inset:36px; padding: 0; scroll-margin-top: 130px; }
.matches-page .front-start-grid { margin: 24px 0 38px; }
.matches-page #history-submit { scroll-margin-top: 130px; }
.account-page .front-start-grid p, .history-workspace .front-setup p, .history-sidebar>.free-offer p { margin: 0; }
.front-setup>summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px 36px; list-style: none; cursor: pointer; }
.front-setup>summary::-webkit-details-marker { display: none; }
.front-setup>summary:focus-visible { outline: 3px solid #b7ed55; outline-offset: 5px; border-radius: 14px; }
.setup-summary-copy { display: flex; flex: 1 1 auto; align-items: center; flex-wrap: wrap; gap: 4px 24px; min-width: 0; }
.setup-chevron { display: grid; place-items: center; flex: 0 0 auto; font-size: 37.5px; line-height: 1; }
.setup-title { display: block; flex: 0 0 auto; font-size: 28px; font-weight: 700; line-height: 1.3; }
.setup-subtitle { display: block; flex: 1 1 280px; min-width: 0; text-align: center; color: #aab7c7; font-size: 16px; line-height: 1.6; }
.setup-chevron::after { display: block; content: '+'; color: #b7d99c; font-size: 37.5px; line-height: 1; transform: translateY(-.08em); }
.front-setup[open]>summary .setup-chevron::after, .setup-provider[open]>summary .setup-chevron::after { content: '−'; }
.front-setup[open]>summary { border-bottom: 1px solid #34404d; }
.setup-content { padding: 16px var(--setup-inset); }
.front-setup form.stack { row-gap:12px; }
.front-setup label { gap:8px; }
.front-setup input:not([type=checkbox]) { min-height:44px; height:44px; }
.setup-profile-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.setup-profile-row>label { flex: 1 1 280px; min-width: 0; }
.setup-signin-alternative { display: flex; align-items: center; gap: 24px; max-width: 100%; color: #aab7c7; }
.front-setup .setup-signin-alternative .button { text-align: center; color: #edf0f6; text-decoration: none; }
.front-setup .setup-provider { min-width: 0; margin: 0 calc(-1 * var(--setup-inset)); padding: 0; border: 0; border-block: 1px solid #34404d; }
.front-setup .setup-provider>summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px var(--setup-inset); color: #c7d1df; font-size: 17px; font-weight: 650; list-style: none; cursor: pointer; }
.setup-provider>summary::-webkit-details-marker { display: none; }
.setup-provider>summary:focus-visible { outline: 3px solid #b7ed55; outline-offset: -3px; }
.setup-provider-content { padding: 12px var(--setup-inset) 16px; }
.front-setup .authentication-help, .front-setup .authentication-help:visited { color: #8adea9; font-size: 13px; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; }
.front-setup .authentication-help:hover { color: #b4f6cc; }
.front-start-grid>.free-offer h2, .front-layout>.free-offer h2, .history-sidebar>.free-offer h2 { font-size: 27px; line-height: 1.4; }
.name-examples { display: grid; gap: 14px; padding: 18px; background: #111b14; border-radius: 8px; color: #c8e7a9; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 0; }
.front-setup .setup-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 17px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 650; line-height: 1.4; text-align: center; white-space: normal; text-decoration: none; transition: background-color .15s ease,border-color .15s ease,color .15s ease; }
.front-setup .setup-action-primary { background: #45cb80; color: #092517; }
.front-setup .setup-action-primary:hover { background: #6edb9d; color: #092517; }
.front-setup .setup-action-secondary { background: #253640; border-color: #5b7680; color: #e4f1ef; }
.front-setup .setup-action-secondary:hover { background: #314953; border-color: #8eabb1; color: #fff; }
.front-setup .setup-action-tertiary { background: transparent; border-color: #465766; color: #c5d6dd; }
.front-setup .setup-action-tertiary:hover { background: #25313c; color: #fff; }
.offer-actions { display: grid; gap: 10px; }
.front-setup .setup-action-offer { background: #b7ed9d; color: #102314; }
.front-setup .setup-action-offer:hover { background: #d2f6bd; color: #102314; }
.front-setup .setup-action-offer-secondary { background: #233f2b; border-color: #648265; color: #e1f5dc; }
.front-setup .setup-action-offer-secondary:hover { background: #305339; border-color: #9dbe96; color: #fff; }
.front-setup .setup-action:focus-visible { outline: 3px solid #d5fba9; outline-offset: 3px; }
.front-setup [aria-busy="true"] .setup-action-primary { opacity: .6; }
@media (max-width: 600px) {
  .front-setup { --setup-inset:20px; }
  .front-setup>summary { padding: 12px 20px; gap: 16px; }
  .setup-title { font-size: 24px; }
  .setup-subtitle { font-size: 14px; }
  .setup-content { padding: 16px var(--setup-inset); }
  .setup-profile-row>label { flex-basis: 100%; }
  .front-start-grid>.free-offer h2, .front-layout>.free-offer h2, .history-sidebar>.free-offer h2 { font-size: 24px; }
  .setup-actions .setup-action { flex: 1 1 100%; }
}
/* Explicit navigation choices for both settings editors. */
.settings-nav-dialog { width: min(540px, calc(100vw - 36px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 34px; border: 1px solid #4d5d70; border-radius: 16px; background: #171e28; color: #edf3fa; box-shadow: 0 24px 90px #0009; }
.settings-nav-dialog::backdrop { background: #05090dc9; }
.settings-nav-dialog h2 { padding-right: 24px; font-size: 25px; line-height: 1.35; margin-bottom: 18px; }
.settings-nav-dialog p { margin: 18px 0; line-height: 1.7; }
.settings-nav-dialog .form-actions { margin-top: 28px; gap: 16px; }
.settings-nav-dialog .dialog-close { position: absolute; top: 12px; right: 12px; padding: 4px 12px; font-size: 24px; background: transparent; color: #bdc8d8; }
.settings-nav-dialog .save-action { background: #45cb80; color: #092517; }
.settings-nav-dialog .discard-action { background: #ce4856; color: #fff; }
.settings-nav-dialog button:disabled { opacity: .55; cursor: wait; }
.settings-nav-dialog [data-dialog-next], [data-save-next] { color: #8adea9; text-decoration: underline; text-underline-offset: 3px; }
.front-page .sharing-code-hint { font-size: 12px; font-weight: 400; font-style: italic; color: #a8b4c5; line-height: 1.7; }
[data-dirty]:empty { display: none; }
[hidden] { display: none !important; }
.upload-spinner { display:inline-block; width:1em; height:1em; margin-right:.6em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-.1em; animation:upload-spin .8s linear infinite; }
@keyframes upload-spin { to { transform:rotate(360deg); } }
.upload-progress { margin-block:24px; }
.upload-progress label { display:grid; gap:10px; margin-block:18px; }
.upload-progress progress { display:block; width:100%; height:16px; accent-color:#69d694; }
.upload-progress label>span { color:#becbd8; font-size:14px; }
.upload-results { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.upload-result { min-width:0; padding:20px; border:1px solid #41505e; border-radius:10px; overflow-wrap:anywhere; }
.upload-result>strong { display:block; margin-bottom:10px; }
.upload-result p { margin-block:12px; line-height:1.6; }
.upload-status { display:inline-block; border-radius:5px; padding:4px 8px; font-size:13px; color:#c7d4e3; background:#293543; }
.upload-status.status-ready,.upload-status.status-admitted,.upload-status.status-valid { color:#b6efc9; background:#17412c; }
.upload-status.status-invalid,.upload-status.status-transfer_failed { color:#ffd2d2; background:#522732; }
.upload-result input[type=file] { max-width:100%; min-width:0; flex:1 1 230px; }
.upload-dialog { width:min(680px,calc(100vw - 36px)); }
.upload-dialog h3 { margin-top:24px; font-size:18px; }
.upload-dialog li { margin-block:12px; line-height:1.6; overflow-wrap:anywhere; }
[data-upload-error] { color:#ffd0d0; padding:16px; border:1px solid #963f50; border-radius:8px; }
[data-upload-controller] .form-actions { flex-wrap:wrap; }
[data-upload-controller] button:disabled { opacity:.6; cursor:wait; }
@media (prefers-reduced-motion:reduce) { .upload-spinner { animation:none; } }
@media (max-width: 600px) { .settings-nav-dialog { padding: 28px 22px; } .settings-nav-dialog h2 { font-size: 22px; } }
.plan-link{display:inline-flex;align-items:center;padding:.55rem .8rem;border-radius:.5rem;background:#e5e7eb;color:#20252b;font-weight:700;text-decoration:none;white-space:nowrap}.plan-link.plan-premium{background:#237b49;color:#fff}.plan-link:focus-visible{outline:3px solid #88bfff;outline-offset:3px}
.history-page { --history-extra:clamp(0px,calc((100vw - var(--page-width))/2),160px); width:100%; max-width:calc(var(--page-width) + var(--history-extra)); margin-left:max(0px,calc((100% - var(--page-width))/2)); margin-right:0; padding-inline:var(--page-gutter); }
.history-page .history-connections { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; margin-top:24px; }
.history-page .provider-details { min-width:0; padding:0 20px; border-radius:12px; }
.history-page .provider-details>summary { padding:18px 0; min-height:64px; font-size:16px; }
.history-page .provider-state { font-size:13px; }
.history-page .connection-fields { border-top:1px solid #303947; padding:20px 0; gap:20px; }
.history-page .connection-fields label { font-size:14px; gap:8px; }
.history-page .connection-fields .field-help { font-size:13px; }
.history-page .connection-fields p { font-size:13px; line-height:1.5; }
.history-workspace { display:grid; grid-template-columns:minmax(0,1fr) calc(360px + var(--history-extra,0px)); grid-template-areas:"setup sidebar" "heading sidebar" "list sidebar"; grid-template-rows:min-content min-content 1fr; gap:16px 24px; align-items:start; margin-top:24px; }
.history-workspace>.front-setup { grid-area:setup; min-width:0; margin-bottom:8px; }
.history-sidebar { grid-area:sidebar; display:flex; flex-direction:column; gap:24px; min-width:0; }
.history-list-heading { grid-area:heading; }
.history-list-heading h2 { margin:0; font-size:24px; }
.history-list-heading p { margin:6px 0 0; font-size:13px; line-height:1.5; }
.history-list { grid-area:list; }
.history-submit { grid-area:tools; display:grid; gap:20px; }
.history-list,.history-submit,.history-submit>* { min-width:0; }
.account-page .history-submit { padding:0; }
.history-submit>.surface { padding:20px; border-radius:12px; }
.history-submit h2,.history-submit [data-batch-results] h2 { font-size:20px; line-height:1.35; margin:0; }
.history-submit p { font-size:13px; line-height:1.5; margin:10px 0; }
.history-submit .field-help { font-size:13px; font-weight:400; }
.history-submit input { min-width:0; width:100%; }
.history-page .history-count-label { font-size:13px; margin:16px 0 8px; }
.history-open { display:grid; grid-template-columns:minmax(5.5em,.4fr) minmax(0,1fr); gap:10px; }
.history-page .history-submit input:not([type=checkbox]) { min-height:44px; }
.history-submit button { min-width:0; max-width:100%; min-height:44px; font-size:13px; padding:10px 12px; white-space:normal; overflow-wrap:anywhere; }
.history-links { max-height:220px; overflow:auto; font-size:13px; padding-left:22px; margin:12px 0; }
.history-links:empty { display:none; }
.history-popup-help { border-left:2px solid #e5b663; padding-left:12px; margin:12px 0; }
.history-popup-help p { color:#e5c997; }
.history-opener [data-open-next] { width:100%; }
.history-links li { padding:6px 4px; }
.history-links a { overflow-wrap:anywhere; }
.history-links a[aria-disabled=true] { color:#a9b7c8; }
.match-open-state { display:block; color:#a9b7c8; font-size:13px; margin-top:3px; }
.history-page .history-list .match-card { padding:10px 14px; margin:0 0 10px; border-left:4px solid #788896; }
.history-page .history-list .match-card h3 { font-size:20px; margin:2px 0 0; line-height:1.3; }
.history-page .history-list .match-meta { margin:0; font-size:13px; line-height:1.3; }
.history-list .match-heading { gap:12px; }
.history-list .match-result { gap:2px; }
.history-list .match-result strong { font-size:22px; line-height:1.25; }
.history-list .match-subline { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:6px; }
.history-page .history-list .match-production { margin:0; font-size:13px; line-height:1.4; font-weight:600; }
.history-list .button,.history-list .match-subline button { min-height:32px; padding:6px 10px; font-size:13px; line-height:1.4; }
.history-page .history-list .match-scoreboard { margin-top:6px !important; padding-top:0; }
.history-list .match-scoreboard>summary { padding:6px 0 0; font-size:13px; line-height:1.5; }
.history-page .history-submit .upload-form { display:grid; gap:16px; margin-top:16px; }
.history-page .history-submit .upload-form p { margin:0; font-size:13px; line-height:1.5; }
.history-submit [data-staged-files] { margin:0; padding:0; list-style:none; }
.history-submit [data-staged-files]:empty { display:none; }
.history-submit [data-staged-files] li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; padding:12px 0; border-bottom:1px solid #303947; }
.history-page .history-submit [data-remove-staged] { margin:0; min-height:44px; padding:8px 10px; font-size:13px; background:#252f3d; color:#edf0f6; border:1px solid #445064; }
.history-page .history-submit [data-remove-staged]:hover { background:#344252; }
.history-submit [data-batch-results] { gap:16px; }
.history-submit [data-batch-items] { margin:0; }
.history-submit [data-batch-items] li { overflow-wrap:anywhere; }
.history-page .history-submit label { gap:8px; font-size:13px; }
.history-submit .upload-file { padding:14px; border-radius:10px; }
.history-submit .upload-dropzone { padding:20px 14px; }
.history-submit .folder-import { display:grid; gap:10px; min-width:0; padding:14px; border:1px solid #445064; border-radius:10px; }
.history-submit .folder-import button { min-height:44px; white-space:normal; }
.history-submit .folder-import ul { margin:0; padding-left:18px; font-size:13px; }
.history-submit .folder-import li { margin-block:8px; overflow-wrap:anywhere; }
.history-submit .folder-help { margin:0; font-size:13px; }
.history-submit .folder-help summary { min-height:32px; }
.history-submit .form-actions { margin:0; gap:10px; }
.history-submit [data-validate] { width:100%; }
.account-page .history-list [data-production-state=ready] { border-left-color:#e5b663; background:#302b20; }
.history-list [data-production-state=ready] .match-production { color:#ffdaa0; }
.account-page .history-list [data-production-state=progress] { border-left-color:#74b6f4; background:#1d2c40; }
.history-list [data-production-state=progress] .match-production { color:#b4d9ff; }
.account-page .history-list [data-production-state=complete] { border-left-color:#67cc92; background:#1b3027; }
.history-list [data-production-state=complete] .match-production { color:#a7ebc3; }
.account-page .history-list [data-production-state=attention] { border-left-color:#ea9595; background:#36262e; }
.history-list [data-production-state=attention] .match-production { color:#ffbcbc; }
.upload-dropzone { display:grid; gap:8px; border:2px dashed #6f8197; border-radius:10px; padding:24px 16px; text-align:center; font-size:14px; }
.upload-dropzone.is-dragging { border-color:#a8d8ff; background:#253f58; }
.upload-picker-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.upload-picker-actions button { min-height:44px; padding:8px 12px; font-size:13px; }
.upload-dropzone .folder-import,.history-submit .upload-dropzone .folder-import { border:0; padding:0; text-align:left; min-width:0; }
.upload-dropzone .folder-import p { margin:4px 0; font-size:13px; }
.upload-dropzone .folder-help { font-size:13px; }
.upload-dropzone .folder-import ul { padding-left:18px; overflow-wrap:anywhere; font-size:13px; }
.history-submit [data-validate-create] { width:100%; }
.personal-gallery .personal-pending { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#172331,#293344); min-height:0; aspect-ratio:16/9; }
.personal-gallery .pending-label { padding:16px; color:#ccd6e4; text-align:center; font-weight:600; }
.personal-gallery .personal-state { color:#cadbab; }
.personal-gallery .card-body { overflow-wrap:anywhere; }
.staged-demos { padding-left:22px; font-size:13px; }
.staged-demos li { overflow-wrap:anywhere; padding-block:6px; }
.staged-demos button { margin-left:10px; padding:5px 10px; font-size:12px; }
.history-submit .upload-progress,.history-submit [data-batch-results] { padding:16px; margin-top:20px; }
.history-submit [data-previous-batches] { overflow-wrap:anywhere; }
@media(max-width:950px) {
  .history-workspace { grid-template-columns:minmax(0,1fr); grid-template-areas:"setup" "sidebar" "heading" "list"; grid-template-rows:auto; }
  .history-submit { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
}
@media(max-width:650px) {
  .history-page { width:100%; }
  .history-page .history-connections { grid-template-columns:minmax(0,1fr); }
  .history-page .provider-details { padding-inline:16px; }
  .history-submit { grid-template-columns:minmax(0,1fr); }
  .history-submit>.surface { padding:16px; }
  .history-page .history-list .match-card { padding:12px; }
  .history-list .button,.history-list .match-subline button { min-height:44px; display:inline-flex; align-items:center; }
  .history-list .match-scoreboard>summary { min-height:44px; padding-top:12px; }
}

.style-profile { border: 1px solid var(--border, #d8dfdc); border-radius: 12px; padding: 1rem; }
.style-profile legend { padding: 0 .5rem; font-weight: 650; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1rem; padding: 1rem 0; }
.style-grid label { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.style-grid input { width:5rem; }
.style-profile:disabled { opacity:.65; }




/* Participant menus stay separate from poster and collection navigation. */
.card-body, .video-entry-body, .video-control-bar { position: relative; }
.video-menu { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 3; }
.video-menu[open] { z-index: 20; }
.video-menu > summary { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; list-style: none; cursor: pointer; border-radius: 6px; color: #b7ed55; font-size: 28px; line-height: 1; }
.video-menu > summary::-webkit-details-marker { display: none; }
.video-menu > summary:hover, .video-menu > summary:focus-visible { background: #263142; outline: 2px solid #b7ed55; }
.video-menu-panel { position: absolute; right: 0; top: 44px; width: 230px; max-width: calc(100vw - 48px); padding: 8px; border: 1px solid #596574; border-radius: 8px; background: #1b222e; box-shadow: 0 8px 24px #0009; }
.video-menu-panel strong { display: block; padding: 8px 10px; font-size: 14px; color: #aab7c7; }
.video-menu-panel form { display: block; margin: 0; padding: 0; border: 0; background: none; }
.video-menu-panel button, .video-menu-panel a { display: block; width: 100%; padding: 10px; margin: 0; border: 0; border-radius: 4px; background: none; color: #f1f3f8; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.video-menu-panel button:hover, .video-menu-panel a:hover { background: #34404d; color: #b7ed55; }
.match-card:has(.video-menu[open]), .reel-row:has(.video-menu[open]) { overflow: visible; position: relative; z-index: 10; }
.card-body:has(.video-menu) > .video-activity, .video-entry-body:has(.video-menu) > .eyebrow { padding-right: 34px; }
.unlisted-marker { display: inline-block; margin: 0 0 6px; padding: 2px 6px; border: 1px solid #596574; border-radius: 4px; color: #cad5e5; font-size: 12px; }
.video-control-bar { min-height: 56px; }
.video-control-page { max-width: 760px; margin: 0 auto; overflow-wrap: anywhere; }
.video-control-page h1 { font-size: 32px; }
.video-control-page a { color: #b7ed55; text-decoration: underline; }
.video-control-page textarea { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #596574; border-radius: 6px; background: #10141c; color: white; font: inherit; resize: vertical; }
.deletion-reason { white-space: pre-wrap; }