/* Vanity's 2026 visual system: city-night photography, clean typography, cyan accents. */
:root {
  color-scheme: dark;
  --clr-bg: #080e16;
  --clr-bg2: #0d1621;
  --clr-surface: #111d2a;
  --clr-surface2: #172737;
  --clr-navy: #f3f7fb;
  --clr-navy2: #0d1621;
  --clr-white: #f3f7fb;
  --clr-grey: #a8b7c6;
  --clr-grey2: #728599;
  --clr-border: #243647;
  --clr-green: #038da1;
  --clr-green2: #4bc7d5;
  --clr-teal: #038da1;
  --clr-green-dim: #02667b;
  --clr-green-glow: rgba(3,141,161,.24);
  --font-display: 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Helvetica Neue', Arial, sans-serif;
  --nav-height: 76px;
}

html { scroll-padding-top: 90px; }
body { background: var(--clr-bg); color: var(--clr-white); font-family: var(--font-body); }
::selection { background: rgba(3,141,161,.5); color: #fff; }
:focus-visible { outline: 2px solid var(--clr-green2); outline-offset: 3px; }

.nav {
  padding-inline: max(24px, calc((100vw - 1320px) / 2));
  background: rgba(8,14,22,.84) !important;
  border-left: 0 !important;
  border-bottom-color: rgba(149,184,207,.15) !important;
  backdrop-filter: blur(18px) saturate(130%);
}
.nav.scrolled { background: rgba(8,14,22,.96) !important; box-shadow: 0 8px 28px rgba(0,0,0,.25) !important; }
.nav__container { max-width: 1320px; margin-inline: auto; width: 100%; }
.nav__logo img { object-fit: contain; }
.nav__logo-text { color: #f3f7fb !important; letter-spacing: .025em; }
.nav__logo-sub { color: #91a9ba !important; letter-spacing: .11em; }
.nav__links { gap: 4px; }
.nav__links a { color: #b7c6d3 !important; padding: 9px 13px; }
.nav__links a:hover, .nav__links a.active { color: #55c6d4 !important; }
.nav__links a::after { background: #038da1 !important; }
.nav__cta, .btn--primary, .btn-primary, .nav__cta:hover {
  background: linear-gradient(135deg, #038da1, #02667b) !important;
  color: #fff !important;
  border: 1px solid rgba(101,221,232,.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(3,141,161,.17);
}
.btn--primary:hover, .btn-primary:hover, .nav__cta:hover { filter: brightness(1.09); transform: translateY(-1px); }
.btn--secondary, .btn-outline { border-radius: 8px !important; border-color: #385468 !important; color: #e9f2f8 !important; }
.btn--secondary:hover, .btn-outline:hover { background: rgba(3,141,161,.12) !important; border-color: #038da1 !important; }
.btn, button { transition-duration: .18s; }
.mobile-menu { background: rgba(8,14,22,.985) !important; }
.mobile-menu a { font-family: var(--font-body) !important; font-size: clamp(1.3rem,6vw,2rem) !important; font-weight: 700; }
#navUserBtn { background: var(--clr-surface) !important; border-color: var(--clr-border) !important; }
.nav-dropdown { background: #111d2a !important; border-color: var(--clr-border) !important; }

.hero { min-height: min(860px, 100svh); justify-content: flex-start; padding-inline: max(24px, calc((100vw - 1320px) / 2)); }
.hero__photo { opacity: .48 !important; filter: saturate(.78) contrast(1.08) !important; }
.hero__glow { background: linear-gradient(90deg, rgba(7,13,21,.92) 0%, rgba(7,13,21,.66) 48%, rgba(7,13,21,.16) 100%), linear-gradient(0deg, #080e16 0%, transparent 36%) !important; }
.hero__content { text-align: left; max-width: 780px; }
.hero__logo-img { width: 76px; height: 76px; margin: 0 0 20px; animation: none !important; }
.hero__eyebrow { justify-content: flex-start; letter-spacing: .14em; font-family: var(--font-body); font-size: .78rem; }
.hero__eyebrow::after { display: none; }
.hero__title { font-size: clamp(3.5rem,9vw,7.8rem); letter-spacing: -.045em; line-height: .9; }
.hero__title span { display: inline; margin-left: .18em; }
.hero__subtitle { max-width: 640px; margin: 24px 0 28px; font-size: clamp(1rem,1.5vw,1.18rem); line-height: 1.65; }
.hero__badges { justify-content: flex-start; margin: 0 0 28px; }
.hb { border-radius: 7px !important; }
.hb--orange, .hb--amber { background: rgba(3,141,161,.1) !important; border-color: rgba(3,141,161,.27) !important; color: #a4e7ee !important; }
.hero__actions { justify-content: flex-start; }
.hero__scroll { display: none; }

.stats-bar, .rules-statsbar { background: #0d1621 !important; border-color: rgba(149,184,207,.15) !important; }
.section { padding-block: clamp(64px,8vw,112px); }
.section__title, .page-hero__title, .rules-cat-title { color: #f2f6fa !important; letter-spacing: -.035em; }
.section__title { font-size: clamp(2.25rem,5vw,4rem); }
.section__title span, .page-hero__title span { color: #4bc7d5 !important; }
.section__desc, .about-text p, .feature-card__desc { color: #a8b7c6 !important; }
.features-grid { gap: 1px; border-color: #22394c !important; background: #22394c !important; }
.feature-card, .about-card, .stat-card { background: #111d2a !important; }
.feature-card { padding: clamp(22px,3vw,36px); }
.feature-card__icon { color: #4bc7d5 !important; }
.feature-card__title { color: #f2f6fa !important; }
.about-visual__frame { background: linear-gradient(145deg,#102334,#0c1622) !important; border-color: #2b465b !important; }
.gallery-section, #about.section { background: #0d1621 !important; }
.gallery-overlay { background: linear-gradient(transparent,rgba(6,13,21,.91)) !important; }
.cta-banner { background: linear-gradient(120deg,rgba(3,141,161,.16),#111d2a 65%) !important; border-color: rgba(3,141,161,.3) !important; }

.cine-hero { min-height: clamp(440px,62vh,650px) !important; text-align: left !important; justify-content: flex-start !important; padding-inline: max(24px,calc((100vw - 1180px)/2)) !important; }
.cine-hero__media { filter: saturate(.82) contrast(1.07) brightness(.52) !important; animation: none !important; }
.cine-hero__scrim { background: linear-gradient(90deg,rgba(7,13,21,.94),rgba(7,13,21,.58) 60%,rgba(7,13,21,.1)),linear-gradient(0deg,var(--clr-bg),transparent 40%) !important; }
.cine-hero__inner { max-width: 780px !important; margin: 0 !important; animation: none !important; }
.cine-eyebrow { color: #80dbe4 !important; letter-spacing: .13em !important; }
.cine-eyebrow::after { display:none !important; }
.cine-title { font-size: clamp(3.2rem,8vw,6rem) !important; letter-spacing: -.045em !important; }
.cine-title span { color: #4bc7d5 !important; text-shadow: none !important; }
.cine-sub { margin: 0 !important; max-width: 620px !important; color: #d0dce5 !important; font-weight: 400 !important; }
.cine-stats { justify-content: flex-start !important; }
.cine-stat { min-width: 132px; border-radius: 8px !important; background: rgba(10,20,30,.8) !important; box-shadow: none !important; }
.cine-stat__lbl { font-family: var(--font-body) !important; letter-spacing: .04em !important; text-transform: none !important; }

.about-section { padding: clamp(56px,7vw,96px) 24px !important; }
.about-section--alt { background: #0b141f !important; border-color: #223647 !important; }
.about-container { max-width: 1180px !important; }
.section-eyebrow { color: #54c5d3 !important; font-family: var(--font-body) !important; letter-spacing: .06em !important; text-transform: none !important; }
.section-title { color: #f3f7fb !important; letter-spacing: -.035em !important; }
.section-title span, .value-card h4 { color: #4bc7d5 !important; }
.mission-split { gap: clamp(36px,7vw,96px) !important; }
.mission-text p, .value-card p, .founder-desc, .tl-item p { color: #a8b7c6 !important; }
.value-card, .founder-card, .about-cta { border-radius: 9px !important; background: #111d2a !important; border-color: #263d50 !important; box-shadow: none !important; }
.value-card:hover, .founder-card:hover { border-color: rgba(75,199,213,.55) !important; transform: translateY(-2px) !important; }
.founder-grid, .founders-grid { max-width: 860px !important; }
.founder-avatar, .founder-avatar-ring { border-color: rgba(75,199,213,.38) !important; }
.founder-role, .tl-date { color: #62cfdb !important; font-family: var(--font-body) !important; letter-spacing: .04em !important; text-transform: none !important; }
.tl-dot { background: #38bbca !important; box-shadow: 0 0 0 5px rgba(56,187,202,.13) !important; }
.tl-dot--upcoming { background: #79d9e1 !important; box-shadow: 0 0 0 5px rgba(121,217,225,.14) !important; }
.tl-date--upcoming { color: #79d9e1 !important; }
.timeline::before { background: linear-gradient(#38bbca,rgba(56,187,202,.12)) !important; }
.about-cta::before { display:none !important; }
.about-cta h2 span { color: #55c6d4 !important; }

/* Rule pages use their own inline styles; these scoped rules take precedence. */
.rules-hero__bg { background: linear-gradient(90deg,rgba(8,14,22,.94),rgba(8,14,22,.62)),linear-gradient(0deg,#080e16,transparent 55%) !important; }
.rules-hero__badge { color: #a9eaf0 !important; background: rgba(3,141,161,.12) !important; border-color: rgba(3,141,161,.36) !important; }
.rules-hero__meta span, .rstat__val { color: #4bc7d5 !important; }
.rcbtn:hover, .rcbtn.active { background: rgba(3,141,161,.1) !important; border-color: rgba(75,199,213,.48) !important; }
.rcbtn__name, .rules-sec-title { color: #eaf2f8 !important; }
.rcbtn.active .rcbtn__name, .rcbtn:hover .rcbtn__name { color: #70d6e0 !important; }
.rcbtn__icon, .rules-sec-icon { background: rgba(3,141,161,.13) !important; }
.rcbtn__icon svg, .rules-sec-icon svg, .rules-footnote svg { color: #54c5d3 !important; }
.rcbtn__badge, .rules-sec-badge, .rule-num { color: #74d5df !important; border-color: rgba(75,199,213,.28) !important; background: rgba(3,141,161,.11) !important; }
.rules-section, .rule-item { background: #0d1722 !important; border-color: #26394a !important; border-radius: 9px !important; }
.rule-item:hover { background: #132231 !important; border-color: rgba(75,199,213,.35) !important; }
.rules-sec-desc, .rule-item__text, .rules-callout, .rules-footnote { color: #afbfcc !important; }
.rules-callout, .rules-footnote { background: rgba(3,141,161,.07) !important; border-color: rgba(75,199,213,.2) !important; }
.rules-callout { border-left-color: #038da1 !important; }
#backToTop { background: #02667b !important; }
.rules-info { margin: 0 0 26px; padding: 24px; border: 1px solid #294657; border-radius: 10px; background: linear-gradient(135deg,rgba(3,141,161,.11),rgba(13,23,34,.96) 55%); }
.rules-info[hidden] { display: none; }
.rules-info__eyebrow { color: #70d6e0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rules-info h2 { margin: 5px 0 16px; color: #f3f7fb; font-size: 1.45rem; }
.rules-info__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.rules-info__item { padding: 18px; border: 1px solid #263d50; border-radius: 8px; background: rgba(8,14,22,.72); }
.rules-info__item h3 { margin: 0 0 8px; color: #eaf2f8; font-size: 1rem; }
.rules-info__item p { margin: 0; color: #a8b7c6; font-size: .9rem; line-height: 1.65; }
body.admin-page .info-card { border-left: 3px solid #038da1; background: #0e1b26; }
body.admin-page .info-card .rule-card__num { min-width: 42px; color: #77d8e1; background: rgba(3,141,161,.13); border-color: rgba(75,199,213,.3); font-size: .58rem; }

.site-footer { background: #070c12 !important; border-color: #223647 !important; }
.footer-heading { color: #62cfdb !important; font-family: var(--font-body) !important; letter-spacing: .06em !important; text-transform: none !important; }
.footer-brand p, .footer-bottom p { color: #92a5b5 !important; }
.footer-links a:hover { color: #71d5df !important; }
.divider { background: #213647 !important; }
.page-hero { background: linear-gradient(135deg,#0b1723,#080e16) !important; }
.page-hero__bg { background: radial-gradient(ellipse at 85% 0%,rgba(3,141,161,.15),transparent 52%),linear-gradient(180deg,#0d1722,#080e16) !important; }
.page-hero__sub { color: #adbdca !important; }

body.admin-page .cat-tab.active { color: #66d0dc !important; }

/* Consistent page surfaces across account, legal, application and teaser pages. */
.page-shell, .legal-page, .login-page, .profile-page, .portal-page, .teasers-page { color: #eaf2f8; }
.card, .legal-card, .faq-item, .teaser-card, .profile-card, .portal-card { border-color: #263d50 !important; background: #111d2a !important; border-radius: 9px !important; }
input, select, textarea { color: #eef5fa; background-color: #0b141f; border-color: #31495d; }
input:focus, select:focus, textarea:focus { border-color: #4bc7d5; box-shadow: 0 0 0 3px rgba(3,141,161,.14); }
.admin-sidebar a.active, .admin-nav a.active { color: #70d6e0; background: rgba(3,141,161,.12); }

@media (max-width: 760px) {
  .nav { padding-inline: 18px !important; }
  .nav__logo img { width: 35px; height: 35px; }
  .hero { min-height: 88svh; padding-inline: 22px; align-items: flex-end; padding-bottom: 64px; }
  .hero__photo { background-position: 61% center !important; }
  .hero__glow { background: linear-gradient(0deg,#080e16 2%,rgba(8,14,22,.86) 37%,rgba(8,14,22,.22) 100%) !important; }
  .hero__content { text-align: left; }
  .hero__logo-img { width: 58px; height: 58px; margin-bottom: 14px; }
  .hero__title { font-size: clamp(3.1rem,17vw,5.4rem); }
  .hero__title span { display: block; margin-left: 0; }
  .hero__subtitle { margin: 18px 0 20px; }
  .hero__badges { gap: 7px; }
  .hb { font-size: .74rem; padding: 7px 10px; }
  .hero__actions { align-items: stretch; }
  .hero__actions .btn { flex: 1; justify-content: center; padding: 12px 14px; }
  .cine-hero { min-height: 520px !important; padding-inline: 22px !important; }
  .cine-stats { gap: 8px !important; }
  .cine-stat { min-width: calc(33.333% - 8px); padding: 14px 10px !important; }
  .cine-stat__num { font-size: 1.6rem !important; }
  .mission-split { grid-template-columns: 1fr !important; }
  .values-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .rules-info__grid { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .values-grid, .footer-grid { grid-template-columns: 1fr !important; }
  .hero__badges .hb--green { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Final shared pass: cleaner editorial layout on public pages and Koadic-style admin. */
:root {
  --clr-green: #038da1;
  --clr-green2: #55c6d4;
  --clr-green-dim: #02667b;
  --clr-green-glow: rgba(3,141,161,.22);
  --vanity-line: rgba(148,181,203,.16);
}

body:not(.admin-page) { line-height: 1.55; }
body:not(.admin-page) main > section:not(.hero):not(.stats-bar) { position: relative; }
.hero__eyebrow, .cine-eyebrow, .section-eyebrow, .page-hero__eyebrow {
  color: #71d5df !important;
}
.hero__title, .cine-title, .page-hero__title { text-wrap: balance; }
.hero__subtitle, .cine-sub, .section__desc, .page-hero__sub { text-wrap: pretty; }
.hero__actions .btn, .cta-btns .btn, .about-cta .btn { min-height: 46px; }
.stats-bar { border-top: 1px solid var(--vanity-line); border-bottom: 1px solid var(--vanity-line); }
.stat-item__num { color: #55c6d4 !important; }
.features-grid { overflow: hidden; border-radius: 12px; }
.feature-card, .about-card, .stat-card, .teasers__item, .teaser-post,
.legal, .policy, .page-shell, .login-card, .profile-card, .portal-card {
  box-shadow: 0 18px 48px rgba(0,0,0,.14);
}
.feature-card, .about-card, .stat-card { border: 1px solid var(--vanity-line); }
.feature-card:hover, .stat-card:hover { border-color: rgba(85,198,212,.48); transform: translateY(-3px); }
.site-footer { border-top: 1px solid var(--vanity-line); }
.footer-social, .footer-social a, .site-footer .social-links a {
  border-color: rgba(148,181,203,.2);
}
.footer-social a:hover, .site-footer .social-links a:hover {
  border-color: #55c6d4; color: #71d5df; transform: translateY(-2px);
}

/* Every standalone information page uses the same readable, calm surface. */
.teasers { padding-top: 132px !important; }
.teasers__intro { max-width: 820px; text-align: left !important; margin-left: 0 !important; }
.teasers__intro p { margin-left: 0 !important; }
.teasers__gallery { gap: 18px; }
.teasers__item { border-radius: 10px !important; border-color: var(--vanity-line) !important; }
.teasers__item a { background: #060a0e; }
.teasers__item figcaption { letter-spacing: .02em !important; text-transform: none !important; }
.teasers__announcement { width: fit-content; margin-left: 0 !important; border-radius: 8px !important; }
.teaser-post { padding: clamp(20px,4vw,42px); border: 1px solid var(--vanity-line); border-radius: 12px; background: linear-gradient(145deg,#111d2a,#0c1520); }
.teaser-post__intro { text-align: left !important; margin-left: 0 !important; }
.teaser-post__intro p { margin-left: 0 !important; }
.teaser-post__list { justify-content: flex-start !important; }
.teaser-post__list li { border-radius: 7px !important; border-color: rgba(85,198,212,.28) !important; background: rgba(3,141,161,.08); }
.legal, .policy { max-width: 900px !important; padding-top: 132px !important; }
.legal h1, .policy h1 { letter-spacing: -.045em; }
.legal h2, .policy h2 { color: #f3f7fb; }
.legal a, .policy a { color: #71d5df !important; }
.legal__todo { border-left-color: #038da1 !important; border-radius: 0 8px 8px 0; }
.policy__updated { color: #8fa5b7; }
.accordion-item { border-color: var(--vanity-line) !important; border-radius: 9px !important; overflow: hidden; }
.accordion-item__header { min-height: 58px; }
.accordion-item__title { color: #edf4f8; }
.faq-group-title { color: #71d5df; }
.accordion-item__num { display: none !important; }

/* Keep every admin subpage in Vanity's dark navy and teal visual system. */
body.admin-page {
  --rx-acc: #53c6d1; --rx-acc2: #038da1; --rx-accsoft: rgba(3,141,161,.15);
  --rx-blue: #69c9d5; --clr-green: #53c6d1; --clr-green2: #53c6d1; --clr-teal: #53c6d1;
  background: #08151d !important; color: #ecf5f6 !important;
}
body.admin-page #adminSidebarMount, body.admin-page .admin-sidebar, body.admin-page .sidebar,
body.admin-page aside.admin-sidebar { background: #0b1b24 !important; border-color: #263e48 !important; }
body.admin-page .admin-main, body.admin-page main { background: #08151d !important; color: #ecf5f6 !important; }
body.admin-page .admin-topbar {
  background: rgba(8,21,29,.94) !important; border-color: #263e48 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
body.admin-page .admin-page-title, body.admin-page .admin-page-title span,
body.admin-page .regler-title, body.admin-page .regler-title span { color: #ecf5f6 !important; }
body.admin-page .admin-nav a.active { color: #7cdae2 !important; background: rgba(3,141,161,.17) !important; }
body.admin-page .admin-nav a.active::before { background: #53c6d1 !important; }
body.admin-page .rx-card, body.admin-page .card, body.admin-page .panel,
body.admin-page .info-card, body.admin-page .rule-card, body.admin-page .stat-card {
  background: #10232d !important; color: #ecf5f6 !important; border-color: #263e48 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.16) !important; border-radius: 14px !important;
}
body.admin-page .info-card .rule-card__num { color: #7cdae2 !important; background: rgba(3,141,161,.17) !important; border-color: #36545f !important; }
body.admin-page input, body.admin-page select, body.admin-page textarea {
  color: #ecf5f6 !important; background: #10232d !important; border-color: #36545f !important;
}
body.admin-page input:focus, body.admin-page select:focus, body.admin-page textarea:focus {
  border-color: #53c6d1 !important; box-shadow: 0 0 0 3px rgba(3,141,161,.2) !important;
}
body.admin-page button:not(.danger):not(.delete), body.admin-page .rx-btn:not(.rx-btn--acc) {
  border-radius: 8px;
}
body.admin-page .rx-btn--acc, body.admin-page .rx-btn--acc:hover,
body.admin-page .btn--primary, body.admin-page .btn-primary {
  background: linear-gradient(135deg,#038da1,#02667b) !important; color: white !important;
}
body.admin-page .save-bar, body.admin-page .admin-unsaved-bar {
  background: #10232d !important; color: #ecf5f6 !important; border-color: #36545f !important;
}
body.admin-page .save-bar button, body.admin-page .admin-unsaved-bar button { color: inherit; }

@media (max-width: 760px) {
  .teasers { padding-inline: 18px !important; }
  .teaser-post { padding: 20px 16px; }
  .legal, .policy { padding-inline: 18px !important; }
  body.admin-page .admin-sidebar, body.admin-page #adminSidebarMount { background: #0b1b24 !important; }
  body.admin-page .admin-main { padding-inline: 18px !important; }
}