/*
 * FabrikaTycoon theme authority (2026-09).
 *
 * Loaded last by layouts/main.php. Every earlier stylesheet grew its own
 * hard-coded palette (navy in professional.css, pink in light-red-accent.css,
 * zinc/blue in theme-mode-compat1.css), so the light theme leaked dark
 * surfaces and the dark theme mixed pink, blue and navy. This file owns the
 * palette for both modes:
 *
 *   1. --ft-* tokens: the only colour decisions, one set per mode.
 *   2. The legacy --tc-* tokens are re-pointed at them.
 *   3. Shared components are painted from the tokens under #ft (the body id),
 *      which outranks the class-only !important rules in the older layers.
 *
 * New UI should use --ft-* tokens directly. Contrast targets: body text
 * >= 7:1, secondary text >= 4.5:1 on every surface in both modes.
 */

/* ------------------------------------------------------------------ tokens */
:root:root:root {
  --ft-bg: #f7f0f2;
  --ft-bg-2: #efe3e7;
  --ft-surface: #ffffff;
  --ft-surface-2: #fbf6f7;
  --ft-surface-3: #f4e8ec;
  --ft-line: #e2cdd4;
  --ft-line-2: #c5a3ae;
  --ft-text: #1f1318;
  --ft-text-2: #46323b;
  --ft-text-3: #67525b;
  --ft-accent: #c0263f;
  --ft-accent-hover: #9f1c33;
  --ft-accent-soft: #fbe3e8;
  --ft-accent-ink: #971b31;
  --ft-btn: #c0263f;
  --ft-btn-hover: #a31d34;
  --ft-btn-edge: #7f1427;
  --ft-on-accent: #ffffff;
  --ft-code-bg: #f7eaee;
  --ft-code-text: #8a1a2e;
  --ft-code-line: #e7ccd4;
  --ft-success: #1c7342;
  --ft-success-soft: #e3f4ea;
  --ft-warning: #845400;
  --ft-warning-soft: #fdf1d8;
  --ft-danger: #b42318;
  --ft-danger-soft: #fde6e4;
  --ft-info: #1b5b87;
  --ft-info-soft: #e2f0fa;
  --ft-nav: #ffffff;
  /* Flat neutral gray slab (auth brand panel) and the text that sits on it:
   * --ft-on-gray is 7.7:1 on the light value and 10.4:1 on the dark one. */
  --ft-gray: #52525b;
  --ft-on-gray: #ffffff;
  --ft-on-gray-2: #e4e4e7;
  --ft-shadow: 0 3px 0 rgba(92, 34, 50, .11);
  --ft-shadow-hard: 0 3px 0 rgba(92, 34, 50, .12);
  --ft-focus: 0 0 0 3px rgba(192, 38, 63, .28);
  --ft-radius: 4px;
  --ft-radius-sm: 3px;
  --ft-mono: var(--tc-font-mono, "JetBrains Mono", ui-monospace, monospace);
  color-scheme: light;
}

:root:root:root[data-color-theme="dark"] {
  --ft-bg: #09090b;
  --ft-bg-2: #121215;
  --ft-surface: #18181b;
  --ft-surface-2: #1d1d21;
  --ft-surface-3: #27272a;
  --ft-line: #27272a;
  --ft-line-2: #3f3f46;
  --ft-text: #f4f4f5;
  --ft-text-2: #b4b4bd;
  --ft-text-3: #8e8e98;
  --ft-accent: #f0506b;
  --ft-accent-hover: #ff6d85;
  --ft-accent-soft: rgba(240, 80, 107, .15);
  --ft-accent-ink: #ff9fb0;
  --ft-btn: #d1304d;
  --ft-btn-hover: #e33e5b;
  --ft-btn-edge: #8f1b30;
  --ft-on-accent: #ffffff;
  --ft-code-bg: #1f1f23;
  --ft-code-text: #ffb4c1;
  --ft-code-line: #303036;
  --ft-success: #5fd08f;
  --ft-success-soft: rgba(95, 208, 143, .13);
  --ft-warning: #f2c35b;
  --ft-warning-soft: rgba(242, 195, 91, .13);
  --ft-danger: #ff8a80;
  --ft-danger-soft: rgba(255, 138, 128, .13);
  --ft-info: #7cc0f2;
  --ft-info-soft: rgba(124, 192, 242, .13);
  --ft-nav: #0a0a0c;
  --ft-gray: #3f3f46;
  --ft-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  --ft-shadow-hard: 0 3px 0 rgba(0, 0, 0, .45);
  --ft-focus: 0 0 0 3px rgba(240, 80, 107, .35);
  color-scheme: dark;
}

/* Legacy token bridge: older layers keep working, now on one palette. */
html #ft {
  --tc-ink: var(--ft-bg);
  --tc-ink-2: var(--ft-bg-2);
  --tc-surface: var(--ft-surface);
  --tc-surface-2: var(--ft-surface-2);
  --tc-surface-3: var(--ft-surface-3);
  --tc-line: var(--ft-line-2);
  --tc-line-soft: var(--ft-line);
  --tc-text: var(--ft-text);
  --tc-text-muted: var(--ft-text-2);
  --tc-text-dim: var(--ft-text-3);
  --tc-primary: var(--ft-accent);
  --tc-gold: var(--ft-accent);
  --tc-gold-deep: var(--ft-accent-hover);
  --tc-gold-soft: var(--ft-accent-soft);
  --tc-ember: var(--ft-accent);
  --tc-pink: var(--ft-accent);
  --tc-pink-deep: var(--ft-accent-hover);
  --tc-pink-soft: var(--ft-accent-soft);
  --tc-grad-gold-line: var(--ft-line-2);
  --tc-border-gold: 2px solid var(--ft-accent);
  --tc-nav-bg: var(--ft-nav);
  --tc-nav-bg-solid: var(--ft-surface);
  --tc-nav-line: var(--ft-line);
  --tc-nav-text: var(--ft-text);
  --tc-nav-muted: var(--ft-text-2);
  --tc-shadow-sm: var(--ft-shadow-hard);
  --tc-shadow: var(--ft-shadow);
  --tc-shadow-lg: var(--ft-shadow);
  --ft-primary: var(--ft-accent);
}

/* -------------------------------------------------------------- page canvas */
html:root { background: var(--ft-bg) !important; }
html #ft {
  background: var(--ft-bg) !important;
  color: var(--ft-text) !important;
}
html #ft::before,
html #ft::after { background-image: none !important; }
html #ft .tc-main { background: transparent !important; }
/* Zero-specificity default: components that sit on photos (home hero, world
 * previews) keep their own light-on-image heading colours. */
:where(#ft) :where(h1, h2, h3, h4, h5, h6) { color: var(--ft-text); }
html #ft :is(.tc-home-hero, .tc-world-preview) :is(h1, h2, h3, h4, .tc-display) { color: #fff !important; }
html #ft ::selection { background: var(--ft-accent); color: var(--ft-on-accent); }
html #ft :focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
html #ft :is(.tc-text-muted, .text-muted, .text-secondary) { color: var(--ft-text-2) !important; }
html #ft :is(.tc-text-dim) { color: var(--ft-text-3) !important; }
/* Kickers and prices: the dark legacy layer paints them blue through
 * -webkit-text-fill-color, which beats `color`, so the fill follows the token.
 * Prices keep the accent they have in the light theme. */
html #ft :is(.tc-kicker, .tc-eyebrow, .tc-readable-eyebrow) { color: var(--ft-accent-ink) !important; -webkit-text-fill-color: currentColor !important; }
html #ft :is(.tc-text-gold, .text-primary, .text-pink, .tc-store-product__price, .tc-product__price) { color: var(--ft-accent) !important; -webkit-text-fill-color: currentColor !important; }
html #ft :is(.tc-section--muted) { background: var(--ft-bg-2) !important; border-color: var(--ft-line) !important; }
html #ft .tc-text-link { color: var(--ft-accent-ink) !important; }
html #ft .tc-text-link:hover { color: var(--ft-accent) !important; }

/* ------------------------------------------------------------------- header */
html #ft .tc-nav {
  border-bottom: 1px solid var(--ft-line) !important;
  background: var(--ft-nav) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html #ft .tc-nav :is(.tc-nav__link, .tc-nav__ip-group, .tc-nav__avatar, .tc-nav__theme-toggle, .tc-nav__toggle, .tc-nav__discord, .tc-btn-ghost) {
  border: 1px solid var(--ft-line) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  box-shadow: none !important;
}
html #ft .tc-nav :is(.tc-nav__link, .tc-nav__theme-toggle, .tc-nav__toggle, .tc-nav__discord, .tc-btn-ghost):hover,
html #ft .tc-nav .tc-nav__link.is-active {
  border-color: var(--ft-line-2) !important;
  background: var(--ft-surface-3) !important;
  color: var(--ft-text) !important;
}
html #ft .tc-nav .tc-nav__brand { border: 0 !important; background: transparent !important; }
html #ft .tc-nav__ip { border-left: 1px solid var(--ft-line) !important; color: var(--ft-text) !important; background: transparent !important; }
html #ft .tc-nav__ip:hover { background: var(--ft-surface-3) !important; }
html #ft .tc-nav__online { background: transparent !important; border: 0 !important; }
html #ft .tc-nav__online-text { color: var(--ft-success) !important; font-weight: 800; }
html #ft .tc-nav__online-dot { background: var(--ft-success) !important; box-shadow: 0 0 0 3px var(--ft-success-soft) !important; }
html #ft .tc-nav .tc-btn-primary { border-color: var(--ft-btn-edge) !important; }

html #ft :is(.tc-dropdown__menu, .tc-mega, .dropdown-menu) {
  border: 1px solid var(--ft-line) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  box-shadow: var(--ft-shadow) !important;
}
html #ft :is(.tc-dropdown__item, .tc-mega__item, .dropdown-item) { color: var(--ft-text) !important; background: transparent !important; }
html #ft :is(.tc-dropdown__item, .tc-mega__item, .dropdown-item):hover { background: var(--ft-surface-3) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-mega__item small, .tc-mega__desc, .tc-dropdown__item small) { color: var(--ft-text-3) !important; }
html #ft :is(.tc-mega__icon, .tc-icon-badge) {
  border: 1px solid var(--ft-line) !important;
  background: var(--ft-accent-soft) !important;
  color: var(--ft-accent-ink) !important;
  box-shadow: none !important;
}

html #ft .tc-drawer { background: var(--ft-surface) !important; border-color: var(--ft-line) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-drawer__item, .tc-drawer__title, .tc-drawer__close) { color: var(--ft-text) !important; }
html #ft .tc-drawer__item:hover { background: var(--ft-surface-3) !important; }
html #ft .tc-drawer__item--sub { color: var(--ft-text-2) !important; }
html #ft .tc-drawer__sep { background: var(--ft-line) !important; border-color: var(--ft-line) !important; }

html #ft .tc-mobile-nav { border-top: 1px solid var(--ft-line) !important; background: var(--ft-surface) !important; backdrop-filter: none !important; }
html #ft .tc-mobile-nav__item { color: var(--ft-text-2) !important; }
html #ft .tc-mobile-nav__item:is(:hover, .is-active) { color: var(--ft-accent-ink) !important; }

html #ft .tc-breadcrumb :is(a, li) { color: var(--ft-text-2) !important; }
html #ft .tc-breadcrumb a:hover { color: var(--ft-accent-ink) !important; }
html #ft .tc-breadcrumb .tc-breadcrumb__current { color: var(--ft-text) !important; font-weight: 700; }

/* ------------------------------------------------------------------ buttons */
html #ft :is(.tc-btn, .btn) {
  border: 1px solid var(--ft-line-2) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  box-shadow: var(--ft-shadow-hard) !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease !important;
}
html #ft :is(.tc-btn, .btn):hover { background: var(--ft-surface-3) !important; border-color: var(--ft-text-3) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-btn, .btn):active { transform: translateY(2px); box-shadow: none !important; }
html #ft :is(.tc-btn-primary, .btn-primary),
html #ft .tc-nav .tc-btn-primary {
  border-color: var(--ft-btn-edge) !important;
  background: var(--ft-btn) !important;
  color: var(--ft-on-accent) !important;
  box-shadow: 0 3px 0 var(--ft-btn-edge) !important;
}
html #ft :is(.tc-btn-primary, .btn-primary):hover,
html #ft .tc-nav .tc-btn-primary:hover { background: var(--ft-btn-hover) !important; color: var(--ft-on-accent) !important; }
html #ft :is(.tc-btn-outline, .tc-btn-ghost, .btn-outline-primary, .btn-outline-secondary) { background: var(--ft-surface) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-btn-success, .btn-success) { border-color: transparent !important; background: var(--ft-success) !important; color: #fff !important; }
html[data-color-theme="dark"] #ft :is(.tc-btn-success, .btn-success) { color: #08140d !important; }
html #ft :is(.tc-btn-danger, .btn-danger) { border-color: transparent !important; background: var(--ft-danger) !important; color: #fff !important; }
html[data-color-theme="dark"] #ft :is(.tc-btn-danger, .btn-danger) { color: #1f0806 !important; }

/* --------------------------------------------------------------- surfaces */
html #ft :is(
  .card, .tc-card, .tc-panel, .tc-surface, .tc-glass-card, .tc-news-card, .tc-feature, .tc-info, .tc-info-card,
  .tc-product, .tc-store-product, .tc-store-category, .card-product, .tc-guide-link, .tc-step-card, .tc-focus-card,
  .tc-result-card, .tc-play-card, .tc-accordion-item, .tc-cart-summary, .tc-cart-item, .tc-store-sidebar,
  .tc-store-toolbar, .tc-payment-success__panel, .modal-content, .tc-modal__panel, .list-group-item, .tc-mc-stat,
  .tc-wiki-card, .tc-wiki-panel, .tc-wiki-fact, .tc-wiki-stat, .tc-wiki-header, .tc-wiki-nav, .tc-quest-card,
  .tc-adv-card, .tc-item-card, .tc-world-route a, .tc-mini-quest-list > div, .tc-wiki-list li
) {
  border-color: var(--ft-line) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  backdrop-filter: none !important;
}
html #ft :is(.card, .tc-card, .tc-news-card, .tc-feature, .tc-product, .tc-store-product, .card-product, .tc-guide-link, .tc-focus-card, .tc-wiki-card, .tc-quest-card, .tc-item-card):hover {
  border-color: var(--ft-line-2) !important;
}
html #ft :is(.card-header, .tc-card-header, .card-footer, .tc-news-card__body, .tc-cta-band) {
  border-color: var(--ft-line) !important;
  background: var(--ft-surface-2) !important;
  color: var(--ft-text) !important;
}
html #ft :is(.card, .tc-card, .tc-news-card, .tc-feature, .tc-info-card, .tc-guide-link, .tc-step-card, .tc-focus-card, .tc-product, .modal-content, .tc-wiki-card, .tc-wiki-panel) :is(p, small, .card-text, .tc-news-card__meta, time) {
  color: var(--ft-text-2) !important;
}
html #ft :is(.card-title, .tc-card-title, .tc-news-card h3 a, .tc-section-header h2, .tc-section-head__title, .tc-section-title) { color: var(--ft-text) !important; }
html #ft :is(.card-img-top, .card-img-right, .tc-news-card__image) { background-color: var(--ft-surface-3) !important; }
html #ft :is(.tc-feature__icon, .tc-wiki-card__icon, .tc-wiki-header__icon) {
  border: 1px solid var(--ft-line) !important;
  background: var(--ft-accent-soft) !important;
  color: var(--ft-accent-ink) !important;
}

/* Badges: previously navy (#1a2a3c) in every theme. */
html #ft :is(.tc-badge, .badge) {
  border: 1px solid var(--ft-line) !important;
  background: var(--ft-surface-3) !important;
  color: var(--ft-text) !important;
}
html #ft :is(.tc-badge-gold, .tc-badge-primary, .badge.bg-primary, .bg-primary-lt, .bg-pink-lt) { border-color: transparent !important; background: var(--ft-accent-soft) !important; color: var(--ft-accent-ink) !important; }
html #ft :is(.tc-badge-success, .badge.bg-success, .bg-success-lt) { border-color: transparent !important; background: var(--ft-success-soft) !important; color: var(--ft-success) !important; }
html #ft :is(.tc-badge-info, .badge.bg-info, .bg-info-lt) { border-color: transparent !important; background: var(--ft-info-soft) !important; color: var(--ft-info) !important; }
html #ft :is(.tc-badge-warning, .badge.bg-warning, .bg-warning-lt) { border-color: transparent !important; background: var(--ft-warning-soft) !important; color: var(--ft-warning) !important; }
html #ft :is(.tc-badge-danger, .badge.bg-danger, .bg-danger-lt) { border-color: transparent !important; background: var(--ft-danger-soft) !important; color: var(--ft-danger) !important; }

html #ft :is(code, kbd, .tc-cmd, .tc-wiki-step__cmd, .tc-quest-card__cmd, .tc-mc-slot__cmd) {
  border: 1px solid var(--ft-code-line) !important;
  background: var(--ft-code-bg) !important;
  color: var(--ft-code-text) !important;
}

/* ------------------------------------------------------------------- forms */
html #ft :is(.form-control, .form-select, .tc-input, .tc-select, .tc-textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], textarea, select, .select2-container .select2-selection, .input-group-text) {
  border: 1px solid var(--ft-line-2) !important;
  background: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  box-shadow: none !important;
}
html #ft :is(input, textarea)::placeholder { color: var(--ft-text-3) !important; opacity: 1; }
html #ft :is(.form-control, .form-select, .tc-input, .tc-select, .tc-textarea, input, textarea, select):focus {
  border-color: var(--ft-accent) !important;
  box-shadow: var(--ft-focus) !important;
  outline: 0;
}
html #ft :is(.form-check-input, input[type="checkbox"], input[type="radio"]) { accent-color: var(--ft-accent); }
html #ft :is(.form-label, label) { color: var(--ft-text); }

/* ------------------------------------------------------------------ tables */
html #ft :is(.table, .tc-table) { color: var(--ft-text) !important; background: var(--ft-surface) !important; --bs-table-bg: transparent; }
html #ft :is(.table, .tc-table) :is(td, th) { border-color: var(--ft-line) !important; background: transparent !important; color: var(--ft-text) !important; }
html #ft :is(.table, .tc-table) th { background: var(--ft-surface-2) !important; color: var(--ft-text-2) !important; font-weight: 800; }
html #ft .table-hover tbody tr:hover { background: var(--ft-surface-3) !important; }

/* ------------------------------------------------------ tabs & pagination */
html #ft :is(.nav-link, .tc-tab, .page-link) { border-color: var(--ft-line) !important; background: var(--ft-surface) !important; color: var(--ft-text-2) !important; }
html #ft :is(.nav-link.active, .tc-tab.is-active, .page-item.active .page-link) { border-color: var(--ft-accent) !important; background: var(--ft-accent-soft) !important; color: var(--ft-accent-ink) !important; }
html #ft :is(.tc-pagination a, .tc-pagination span) { border-color: var(--ft-line) !important; background: var(--ft-surface) !important; color: var(--ft-text) !important; }

/* ------------------------------------------------------------------ alerts */
html #ft :is(.tc-alert, .alert) { border: 1px solid var(--ft-line) !important; background: var(--ft-surface-2) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-alert--info, .alert-info) { border-color: transparent !important; background: var(--ft-info-soft) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-alert--info, .alert-info) > i { color: var(--ft-info) !important; }
html #ft :is(.tc-alert--warning, .alert-warning) { border-color: transparent !important; background: var(--ft-warning-soft) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-alert--warning, .alert-warning) > i { color: var(--ft-warning) !important; }
html #ft :is(.tc-alert--success, .alert-success) { border-color: transparent !important; background: var(--ft-success-soft) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-alert--danger, .alert-danger) { border-color: transparent !important; background: var(--ft-danger-soft) !important; color: var(--ft-text) !important; }
html #ft :is(.tc-toast) { border: 1px solid var(--ft-line-2) !important; background: var(--ft-surface) !important; color: var(--ft-text) !important; box-shadow: var(--ft-shadow) !important; }

/* ------------------------------------------------------------------ footer */
html #ft .tc-footer {
  border-top: 1px solid var(--ft-line) !important;
  background: var(--ft-bg-2) !important;
  color: var(--ft-text-2) !important;
}
html #ft .tc-footer :is(.tc-footer__col-title, .tc-footer__brand, .tc-footer__brand *) { color: var(--ft-text) !important; }
html #ft .tc-footer :is(.tc-footer__link, a, p, .tc-text-dim, .tc-footer__bottom, .tc-footer__bottom *) { color: var(--ft-text-2) !important; }
html #ft .tc-footer :is(.tc-footer__link, a):hover { color: var(--ft-accent-ink) !important; }
html #ft .tc-footer__bottom { border-top: 1px solid var(--ft-line) !important; }
html #ft .tc-footer__social-link { border: 1px solid var(--ft-line) !important; background: var(--ft-surface) !important; color: var(--ft-text) !important; }
html #ft .tc-footer__social-link:hover { border-color: var(--ft-accent) !important; color: var(--ft-accent-ink) !important; }
html #ft :is(.tc-back-to-top) { border: 1px solid var(--ft-line-2) !important; background: var(--ft-surface) !important; color: var(--ft-text) !important; }
html #ft .tc-scroll-progress { background: var(--ft-accent) !important; }
html #ft .tc-cookie-consent { border-color: var(--ft-line-2) !important; background: var(--ft-surface) !important; color: var(--ft-text) !important; }
html #ft .tc-cookie-consent p span { color: var(--ft-text-2) !important; }

/* ------------------------------------------------------------------ home */
/* The image heroes stay dark by design (text sits on a photo), but the
 * homepage news meta and world routes follow the theme. */
html #ft .tc-news-card__meta span { color: var(--ft-accent-ink) !important; }
html #ft .tc-news-card__meta time { color: var(--ft-text-3) !important; }

/* Join band + supporter period switch (homepage) */
html #ft .tc-join-band {
  border-color: var(--ft-btn-edge) !important;
  background: var(--ft-btn) !important;
}
html #ft .tc-join-band :is(h2, p, .tc-kicker, .tc-eyebrow) { color: #fff !important; }
html #ft .tc-supporters-periods { border-color: var(--ft-line) !important; background: var(--ft-surface-2) !important; }
html #ft .tc-supporters-period { color: var(--ft-text-2) !important; }
html #ft .tc-supporters-period.is-active { background: var(--ft-btn) !important; color: var(--ft-on-accent) !important; box-shadow: inset 0 -3px 0 var(--ft-btn-edge) !important; }
/* First-place amount: the legacy gold (#9a6900) is 4.3:1 on the light page. */
html:not([data-color-theme="dark"]) #ft .tc-supporter-entry[data-rank="1"] .tc-supporter-amount { --supporter-amount-color: var(--ft-warning); }

/* Play page server card: tycooncore-data.css still paints its text for the
 * old dark slab (#fff address, #ead8df line), which vanished on the light
 * surface above. The status dot is an inline span, so it needs a box. */
html #ft .tc-play-card h2 { color: var(--ft-text) !important; }
html #ft .tc-play-card p { color: var(--ft-text-2) !important; }
html #ft .tc-play-card p strong { color: var(--ft-text) !important; }
html #ft .tc-play-card .tc-status-dot { display: inline-block; margin-right: 8px; vertical-align: 1px; border: 0 !important; background: var(--ft-text-3) !important; }
html #ft .tc-play-card .tc-status-dot.is-online { background: var(--ft-success) !important; box-shadow: 0 0 0 3px var(--ft-success-soft) !important; }
html #ft .tc-play-card .tc-status-dot.is-offline { background: var(--ft-danger) !important; box-shadow: 0 0 0 3px var(--ft-danger-soft) !important; }

/* --------------------------------------------------------------- auth */
html #ft.tc-page-auth,
html #ft.tc-page-auth :is(.tc-auth-wrap, .tc-auth-main) { background: var(--ft-bg) !important; }
html #ft.tc-page-auth .tc-noise { display: none !important; }
html #ft.tc-page-auth .tc-auth-main :is(h1, h2, h3, .card-title) { color: var(--ft-text) !important; }
html #ft.tc-page-auth .tc-auth-main :is(p, .text-muted, .form-hint) { color: var(--ft-text-2) !important; }
html #ft.tc-page-auth .tc-auth-main a:not(.btn) { color: var(--ft-accent-ink) !important; }
html #ft.tc-page-auth .tc-auth-powered, html #ft.tc-page-auth .tc-auth-powered * { color: var(--ft-text-3) !important; }
html #ft :is(.input-group, .input-group-flat) { background: var(--ft-surface) !important; border-color: var(--ft-line-2) !important; }
html #ft .input-group-flat :is(.input-group-text, .form-control) { background: var(--ft-surface) !important; color: var(--ft-text) !important; }
html #ft .input-group-flat .input-group-text a { color: var(--ft-text-2) !important; }

/* ------------------------------------------------------- payment result
 * Two colours only: the accent (mark, primary action, finished steps) and
 * the neutral surface (everything else). One even border, no bottom bar.
 * The mark keeps normal priority so a result page can tint it inline.
 */
html #ft .tc-payment-success__panel {
  border: 1px solid var(--ft-line) !important;
  border-radius: var(--ft-radius) !important;
  box-shadow: none !important;
}
html #ft .tc-payment-success__mark {
  border: 1px solid var(--ft-btn-edge);
  border-bottom-width: 4px;
  border-radius: var(--ft-radius);
  background: var(--ft-btn);
  color: var(--ft-on-accent);
}
html #ft .tc-payment-success h1 { color: var(--ft-text) !important; }
html #ft .tc-payment-success__intro { color: var(--ft-text-2) !important; }
html #ft .tc-payment-success__steps {
  gap: 8px;
  border: 0 !important;
  background: transparent !important;
}
html #ft .tc-payment-success__steps > div {
  border: 1px solid var(--ft-line) !important;
  border-radius: var(--ft-radius-sm);
  background: var(--ft-surface-2) !important;
  color: var(--ft-text-2) !important;
  font-size: .78rem;
}
html #ft .tc-payment-success__steps > div > i { color: var(--ft-text-3) !important; }
html #ft .tc-payment-success__steps > .is-complete { background: var(--ft-accent-soft) !important; color: var(--ft-text) !important; }
html #ft .tc-payment-success__steps > .is-complete > i { color: var(--ft-accent-ink) !important; }
html #ft .tc-payment-success__note {
  border: 1px solid var(--ft-line) !important;
  border-radius: var(--ft-radius-sm);
  background: var(--ft-surface-2) !important;
  color: var(--ft-text-2) !important;
  font-size: .8rem;
}
html #ft .tc-payment-success__note > i { color: var(--ft-text-3) !important; }
html #ft .tc-payment-success__panel :is(.tc-payment-success__steps, .tc-payment-success__note) span { color: inherit !important; }
@media (max-width: 640px) {
  html #ft .tc-payment-success__actions { flex-direction: column; align-items: stretch; }
  html #ft .tc-payment-success__actions .tc-btn { justify-content: center; }
}

/* ---------------------------------------------------- flat effects policy
 * The site uses flat colour only: no gradients, no blur, no glow/neon.
 * Text that sits on a photo gets a solid scrim instead of a gradient fade.
 */
html #ft :is(.tc-nav, .tc-nav *, .tc-mobile-nav, .tc-mobile-nav *) { text-shadow: none !important; }
html #ft .tc-home-hero::after { background: rgba(14, 10, 12, .64) !important; }
html #ft .tc-home-hero :is(h1, h2, p, span) { text-shadow: none !important; }
html #ft .tc-world-preview::after { background: none !important; }
html #ft .tc-world-preview > div { align-self: stretch; margin-top: auto; padding: 10px 14px 12px; background: rgba(14, 10, 12, .82); }
html #ft .tc-world-preview { align-items: stretch !important; flex-direction: column; justify-content: flex-end; }
html #ft .tc-world-preview :is(h3, p, i) { text-shadow: none !important; }
html #ft .tc-store-hero { background: var(--ft-surface) !important; }
html #ft .tc-store-hero::before { display: none !important; }
/* Store section bar ("Kategoriler  5 kategori"): text off the edges, soft corners. */
html #ft .tc-store-toolbar { align-items: center; padding: 14px 20px !important; border: 1px solid var(--ft-line) !important; border-radius: 8px !important; }
html #ft .tc-store-toolbar :is(h2, h3) { margin: 0; }
/* Store category list: the active category follows the active-tab accent
 * (wiki-visual-compat1.css painted it amber in the dark theme). */
html #ft :is(.tebex-list-item, .tebex-list-subitem).active { background: var(--ft-accent-soft) !important; color: var(--ft-accent-ink) !important; }
html #ft .tebex-list-item.active { border-left-color: var(--ft-accent) !important; }
html #ft :is(.card, .tc-card)::after { background-image: none !important; }
/* Auth brand panel: one flat gray slab, no photo (desktop aside and the
 * mobile header strip that reused the same picture). */
html #ft.tc-page-auth .tc-auth-aside { background: var(--ft-gray) !important; color: var(--ft-on-gray) !important; }
html #ft.tc-page-auth .tc-auth-aside::before,
html #ft.tc-page-auth .tc-auth-aside__bg,
html #ft.tc-page-auth .tc-auth-main::before { display: none !important; }
html #ft.tc-page-auth .tc-auth-aside :is(h1, .tc-display, .tc-auth-aside__brand, .tc-auth-features li i) { color: var(--ft-on-gray) !important; text-shadow: none !important; }
html #ft.tc-page-auth .tc-auth-aside :is(.tc-lead, .tc-auth-features li) { color: var(--ft-on-gray-2) !important; text-shadow: none !important; }
html #ft :is(.tc-btn, .btn, .tc-badge, .badge, .tc-card, .card) { text-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  html #ft *, html #ft *::before, html #ft *::after { transition-duration: 0s !important; }
}