/* Shared brand colors for Kinoflix-owned controls. */
:root {
  --kf-control-ink:#fff;
  --kf-control-border:#a98bef;
  --kf-control-fill:linear-gradient(120deg,#1b557b,#41469a 60%,#64358b);
  --kf-control-primary:linear-gradient(120deg,#185e85,#4c43a1 55%,#69358d);
  --kf-field-fill:linear-gradient(115deg,#10394d,#252d50 55%,#35254c);
  --kf-field-focus:linear-gradient(115deg,#164b61,#303f65 55%,#463061);
}
html :is(button,input[type=button],input[type=submit],input[type=reset],a.primary,a.outline,a.creator-button,a.cinema-button,a.owner-payments-button,a.creator-link,a.creator-watch):not(.danger) {
  color:var(--kf-control-ink);
  background:var(--kf-control-fill);
  border-color:var(--kf-control-border);
}
html :is(button.primary,input[type=submit],a.primary,a.creator-button,a.cinema-button):not(.danger) {
  background:var(--kf-control-primary);
}
html :is(button,input[type=submit],a.primary,a.outline,a.creator-button,a.cinema-button):not(:disabled):hover {
  filter:brightness(1.13);
}
/* Keep native control affordances while giving editable fields a shared color treatment. */
html :is(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=image],[type=button],[type=submit],[type=reset]),textarea,select) {
  color:#f5edff;
  color-scheme:dark;
  background-image:var(--kf-field-fill) !important;
  border-color:#8f79c3;
  box-shadow:inset 2px 0 #36d9f5a6,inset -2px 0 #8d71dd91;
  caret-color:#7dedff;
}
html :is(input:not([type=hidden],[type=checkbox],[type=radio],[type=range],[type=color],[type=image],[type=button],[type=submit],[type=reset]),textarea,select):focus {
  background-image:var(--kf-field-focus) !important;
  border-color:#8ae7ff;
}
html :is(input,textarea)::placeholder {color:#c4b8d7;opacity:1}
html :is(input[type=checkbox],input[type=radio],input[type=range]) {accent-color:#a589ff}
html input[type=file]::file-selector-button {color:#fff;background:var(--kf-control-primary);border:1px solid var(--kf-control-border);border-radius:5px}
@media (forced-colors:active) {
  html :is(input,textarea,select):focus-visible {outline-color:Highlight}
}
html :is(button,input,textarea,select,a.primary,a.outline,a.creator-button):focus-visible {outline:2px solid #7dedff;outline-offset:3px}
html :is(button,input,textarea,select):disabled {opacity:.58;cursor:not-allowed}
#earnings-preview-form {display:flex;align-items:end;flex-wrap:wrap;gap:12px}
#earnings-preview-form label {display:grid;gap:6px;min-width:0}
#earnings-preview-form :is(input,select) {margin:0;max-width:100%;padding:9px;border:1px solid #9b80da;border-radius:7px}
#earnings-preview-results details {margin-top:8px;padding:10px;border:1px solid #8e75d462;border-radius:8px}
#earnings-preview-results summary {cursor:pointer;color:#b9eeff}

/* Match publishing legends and live badges wherever they appear. */
html .status-badge {
  background:linear-gradient(115deg,#163247,#342148);
  border-color:#a98bef;
  color:#f1e5ff;
}
html .status-badge[data-state="draft"] {
  background:linear-gradient(115deg,#12435a,#1d2b54);
  border-color:#54c5f0;
  color:#c4f1ff;
}
html .status-badge[data-state="pending"] {
  background:linear-gradient(115deg,#372363,#50246b);
  border-color:#ad8aff;
  color:#eee0ff;
}
html .status-badge[data-state="published"] {
  background:linear-gradient(115deg,#104d51,#123b5e);
  border-color:#50dbc9;
  color:#c5fff3;
}
html .status-badge:is([data-state="unpublished"],[data-state="withdrawn"]) {
  background:linear-gradient(115deg,#48254c,#5a214c);
  border-color:#eb83c9;
  color:#ffdef3;
}
.publishing-legend .status-badge {
  letter-spacing:normal;
}

/* Colorful workspace and section actions, shared by all page templates. */
html .workspace-tabs a,
html .site-shell .section-navigation a,
html a:is(.text-button,.creator-link,.creator-watch) {
  color:#fff;
  background:linear-gradient(120deg,#125b78,#354a91);
  border:1px solid #58cce8;
  box-shadow:inset 0 1px 0 #ffffff18,0 3px 14px #0878ad1c;
}
html .workspace-tabs a:nth-child(3n+2),
html .site-shell .section-navigation a:nth-child(3n+2) {
  background:linear-gradient(120deg,#514198,#713b96);
  border-color:#b99afa;
}
html .workspace-tabs a:nth-child(3n),
html .site-shell .section-navigation a:nth-child(3n) {
  background:linear-gradient(120deg,#264f84,#644294);
  border-color:#a58ae8;
}
html .workspace-tabs a:hover,
html .site-shell .section-navigation a:hover {
  color:#fff;filter:brightness(1.18);border-color:#a7efff;
}
html .workspace-tabs a:focus-visible {outline:2px solid #8ceeff;outline-offset:3px}
html :is(input,textarea,select):not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=button],[type=submit],[type=reset],[type=color],[type=image]):focus-visible {
  box-shadow:inset 3px 0 #59e4f5,inset -2px 0 #9a83ed,0 0 0 3px #64dff51a;
}
html select option,html select optgroup {background:#211d37;color:#fff}
html input:-webkit-autofill {-webkit-text-fill-color:#f5edff;box-shadow:inset 0 0 0 1000px #24314b;caret-color:#7dedff}
@media(forced-colors:active){
 html .workspace-tabs a,html .site-shell .section-navigation a {border-color:ButtonText;color:LinkText}
}

/* Page-specific background shorthands must not remove the shared field fill. */
html input[type=file] {
  background-image:var(--kf-field-fill) !important;
  border-color:#a98bef;
  border-radius:8px;
}
html input[type=file]::file-selector-button {
  padding:9px 15px;
  margin-right:12px;
  font:inherit;
  cursor:pointer;
}
@media(forced-colors:active) {
  html :is(input,textarea,select) {background-image:none !important}
}

/* Shared outline for content surfaces. The overlay preserves artwork, fills and layout. */
:where(
  .panel, .recovery-panel, .discovery-panel, .film, .flow-card,
  .submission-card, .owner-review-card, .delivery-tools,
  .subscription-card, .tier-card, .subscription-faq, .membership-spotlight,
  .creator-form-panel, .creator-format-section, .creator-format-grid > article,
  .creator-introduce, .creator-plan, .creator-identity, .creator-film, .creator-empty,
  .terms-hero, .launch-hero, .launch-section, .collection, .home-creator-callout,
  .founder-hero, .vision-section, .closing-section, .founding-offer, .principles > article
) {
  position: relative;
  --kf-surface-edge: linear-gradient(120deg, #28869c, #4e64ac 52%, #8250b0);
}

@supports (mask-composite: exclude) {
  :where(
    .panel, .recovery-panel, .discovery-panel, .film, .flow-card,
    .submission-card, .owner-review-card, .delivery-tools,
    .subscription-card, .tier-card, .subscription-faq, .membership-spotlight,
    .creator-form-panel, .creator-format-section, .creator-format-grid > article,
    .creator-introduce, .creator-plan, .creator-identity, .creator-film, .creator-empty,
    .terms-hero, .launch-hero, .launch-section, .collection, .home-creator-callout,
    .founder-hero, .vision-section, .closing-section, .founding-offer, .principles > article
  )::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    border-radius: inherit;
    background: var(--kf-home-surface-edge, var(--kf-surface-edge));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

}

/* On the homepage, reserve the shared outline for the creator callout. */
.kinoflix-home {
  --kf-home-surface-edge: transparent;
}
.kinoflix-home .home-creator-callout {
  --kf-home-surface-edge: var(--kf-surface-edge);
}

/* Keep the page backdrop continuous behind centered content and its gutters. */
body {
  background-image: linear-gradient(115deg, #0b1823 0%, #0b1019 48%, #131326 100%);
}

/* Use the brand palette to distinguish heading levels across the site. */
main :where(h1, h2) {
  color: #8eeaf8;
}

main :where(h3, h4) {
  color: #d9b9ff;
}

#visitor-locations h2 {
  color: #8eeaf8;
}

#visitor-locations .location-controls label,
#visitor-locations #location-table th {
  color: #d9b9ff;
}

@supports (background-clip: text) {
  #visitor-locations h2 {
    background-image: linear-gradient(100deg, #8eeaf8, #8caeff, #b39af1);
    background-clip: text;
    color: transparent;
    width: fit-content;
    max-width: 100%;
  }
}

@media (forced-colors: active) {
  #visitor-locations h2 {
    color: CanvasText;
    background-image: none;
  }
}

/* Soften the wordmark on page surfaces while keeping its original colors. */
img[src^="/assets/kinoflix-wordmark-transparent-v3.png"]:not(.player-watermark) {
  opacity: 0.88;
}

/* Reference palette: cyan titles, teal primary action, blue/violet shortcuts. */
html #profile button.primary {background:linear-gradient(120deg,#086575,#075364);border-color:#218b9d}
html .account-shortcuts a {background:linear-gradient(120deg,#1b557b,#4c43a1 55%,#69358d);border-color:#a98bef}
html #sign-out {background:linear-gradient(120deg,#7536a7,#643194);border-color:#ad7eed}

/* Keep destructive controls in the same cool brand family. */
html button.danger {background:linear-gradient(120deg,#3b327b,#593280);color:#fff;border-color:#ac8ae0}

.test-signin-actions{display:flex!important;flex-wrap:wrap;gap:12px;align-items:stretch;justify-content:center;width:100%;margin:18px 0 4px;box-sizing:border-box}.test-signin-actions a{display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;padding:12px 18px;border:1px solid #62c7ea;border-radius:12px;background:linear-gradient(115deg,#126783,#5840a4);color:#fff!important;font-size:14px;font-weight:700;text-align:center;text-decoration:none;max-width:230px;flex:1}.test-signin-actions a:last-child{border-color:#b18aef;background:linear-gradient(115deg,#384ea5,#84369c)}.test-signin-actions a:focus-visible{outline:3px solid #7de8ff;outline-offset:3px}

/* Transparent wordmark across every dark Kinoflix surface. */
img[src*="kinoflix-wordmark-transparent-v3.png"]{background:transparent!important;mix-blend-mode:screen;opacity:1}

img[src*="kinoflix-wordmark-clear-v4.png"]{background:transparent!important;mix-blend-mode:normal!important;opacity:1}

body.public-page header.site-header{height:76px;min-height:76px;gap:24px;box-shadow:0 6px 24px #0002}body.public-page .site-header .navlink{padding:9px 11px;font-size:13px}body.public-page .site-header:after{height:1px;opacity:.45}@media(max-width:900px){body.public-page header.site-header{height:auto;min-height:70px;gap:8px}}