/* FreeriderX interface refresh
   This file is deliberately loaded last. It provides one calm, content-first
   visual contract while legacy screens are migrated without changing behavior. */

:root {
    color-scheme: dark;
    --frx-brand-700: #0369a1;
    --frx-brand-600: #0284c7;
    --frx-brand-500: #0ea5e9;
    --frx-brand-400: #38bdf8;
    --frx-brand-soft: rgba(14, 165, 233, 0.14);
    --frx-bg: #000000;
    --frx-surface: #000000;
    --frx-surface-raised: #000000;
    --frx-surface-soft: #000000;
    --frx-border: rgba(255, 255, 255, 0.18);
    --frx-border-strong: rgba(255, 255, 255, 0.30);
    --frx-text: #ffffff;
    --frx-text-muted: #ffffff;
    --frx-text-faint: #ffffff;
    --frx-success: #22c55e;
    --frx-warning: #f59e0b;
    --frx-danger: #ef4444;
    --frx-focus: #38bdf8;
    --frx-radius-sm: 10px;
    --frx-radius-md: 14px;
    --frx-radius-lg: 18px;
    --frx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --frx-shadow-lg: 0 18px 52px rgba(0, 0, 0, 0.38);
    --frx-nav-height: 66px;
    --frx-type-caption: 0.75rem;
    --frx-type-label: 0.8125rem;
    --frx-type-body: 0.9375rem;
    --frx-type-section: 1rem;
    --frx-type-page: 1.25rem;
    --frx-profile-background: var(--frx-bg);
    --frx-profile-banner-overlay: linear-gradient(rgba(0, 0, 0, 0.55), rgba(9, 11, 15, 0.92));

    /* Bridge existing Tailwind/runtime tokens to the new system. */
    --color-primary: var(--frx-brand-600);
    --color-primary-rgb: 2 132 199;
    --color-primary-hover: var(--frx-brand-500);
    --color-primary-glow: rgba(14, 165, 233, 0.18);
    --color-background: var(--frx-bg);
    --color-surface: var(--frx-surface);
    --color-elevated: var(--frx-surface-raised);
    --text-primary: var(--frx-text);
    --text-secondary: var(--frx-text-muted);
    --text-tertiary: var(--frx-text-faint);
    --border-subtle: var(--frx-border);
    --border-default: var(--frx-border);
    --frx-scrim: rgba(0, 0, 0, 0.68);
}

/* Chat presence: compact receipts and compositor-only typing motion. */
.frx-seen-indicator,
.frx-typing-indicator {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 16px 4px;
    color: var(--frx-text-faint);
    font-size: 0.75rem;
    line-height: 1.35;
}

.frx-seen-indicator { text-align: right; }

.frx-typing-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
}

.frx-seen-indicator.hidden,
.frx-typing-indicator.hidden { display: none !important; }

.frx-typing-name,
.frx-chat-profile-link,
.chat-author-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.frx-chat-profile-link { min-height: 44px; }
.chat-author-link { min-height: 28px; touch-action: manipulation; }

.frx-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 28px;
    height: 20px;
    padding: 0 7px;
    border: 1px solid var(--frx-border);
    border-radius: 999px;
    background: var(--frx-surface-raised);
}

.frx-typing-dots > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--frx-text-muted);
    animation: frx-typing-dot 1.05s ease-in-out infinite;
}

.frx-typing-dots > span:nth-child(2) { animation-delay: 120ms; }
.frx-typing-dots > span:nth-child(3) { animation-delay: 240ms; }

@keyframes frx-typing-dot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}

/* Professional badge system: content hierarchy comes from type and spacing,
   not gradients, emoji or one-off platform colors. */
#profile-badges,
#op-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#profile-badges > span,
#op-badges > span {
    background: var(--frx-surface-raised) !important;
    background-image: none !important;
    border: 1px solid var(--frx-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    color: var(--frx-text) !important;
    filter: none !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    padding: 6px 10px !important;
    text-transform: none !important;
}

#profile-badges > span > span,
#op-badges > span > span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--frx-text-muted) !important;
    padding: 0 0 0 3px !important;
}

.frx-badge-collection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 80px;
}

.frx-badge-collection-card {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 108px;
    padding: 14px;
    border: 1px solid var(--frx-border);
    border-radius: var(--frx-radius-md);
    background: var(--frx-surface-raised);
    color: var(--frx-text-muted);
}

.frx-badge-collection-card.is-earned { border-color: var(--frx-border-strong); color: var(--frx-text); }
.frx-badge-collection-name { font-size: 0.875rem; font-weight: 700; line-height: 1.35; }
.frx-badge-collection-xp { font-size: 0.75rem; color: var(--frx-text-muted); }
.frx-badge-collection-status { margin-top: auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }

/* Jury mode owns the viewport while it is open; underlying app chrome cannot
   receive touches or consume safe-area space. */
html.frx-jury-open,
body.frx-jury-open { overflow: hidden !important; overscroll-behavior: none; }

body.frx-jury-open > :not(#competition-jury-modal):not(script):not(style) { pointer-events: none; }
body.frx-jury-open #main-app { visibility: hidden !important; }

#competition-jury-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
    width: 100dvw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
    isolation: isolate;
}

#competition-jury-modal .competition-jury-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
}

.competition-jury-swipe-cues {
    position: absolute;
    z-index: 4;
    inset: 12px 12px auto;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.competition-jury-swipe-cues span {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* AI Center visual contract. Feature IDs and flows remain unchanged. */
#ai-hub-overlay,
#ai-hub-overlay #ai-main-menu,
#ai-hub-overlay .ai-screen,
#ai-hub-overlay .ai-content,
#ai-hub-overlay .frx-ai-header {
    background: var(--frx-bg) !important;
    color: var(--frx-text) !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
}

#ai-hub-overlay .frx-ai-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    border-color: var(--frx-border) !important;
}

#ai-hub-overlay #ai-hub-title,
#ai-hub-overlay [style*="color:#fff"],
#ai-hub-overlay [style*="color: #fff"] { color: var(--frx-text) !important; }

#ai-hub-overlay [style*="color:#888"],
#ai-hub-overlay [style*="color:#666"],
#ai-hub-overlay [style*="color:#71717a"] { color: var(--frx-text-muted) !important; }

#ai-hub-overlay .ai-tool-card,
#ai-hub-overlay .ai-result-box,
#ai-hub-overlay [style*="background:#161616"],
#ai-hub-overlay [style*="background: #161616"] {
    background: var(--frx-surface-raised) !important;
    background-image: none !important;
    border-color: var(--frx-border) !important;
    box-shadow: none !important;
}

#ai-hub-overlay .ai-tool-card {
    min-height: 72px;
    border-radius: var(--frx-radius-md) !important;
    transition: border-color 180ms ease, background-color 180ms ease !important;
}

#ai-hub-overlay .ai-tool-card:hover { transform: none !important; border-color: var(--frx-border-strong) !important; }

#ai-hub-overlay .ai-tool-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--frx-radius-sm) !important;
    background: var(--frx-brand-soft) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--frx-brand-500) 32%, transparent) !important;
    box-shadow: none !important;
    color: var(--frx-brand-500) !important;
}

#ai-hub-overlay .ai-tool-icon svg,
#ai-hub-overlay .ai-tool-icon svg * { stroke: currentColor !important; }

#ai-hub-overlay .frx-ai-notice {
    background: var(--frx-surface-raised) !important;
    border-color: var(--frx-border) !important;
}

#ai-hub-overlay :is(input, select, textarea, .ai-input) {
    min-height: 44px;
    background: var(--frx-surface-raised) !important;
    border: 1px solid var(--frx-border) !important;
    color: var(--frx-text) !important;
    box-shadow: none !important;
}

#ai-hub-overlay :is(input, select, textarea, .ai-input):focus {
    border-color: var(--frx-brand-500) !important;
    box-shadow: 0 0 0 3px var(--frx-brand-soft) !important;
}

#ai-hub-overlay .ai-btn,
#ai-hub-overlay button[onclick^="runAI"],
#ai-hub-overlay button[onclick*="aiAnalyzeFullBuild"] {
    background: var(--frx-brand-600) !important;
    background-image: none !important;
    border-radius: var(--frx-radius-md) !important;
    box-shadow: none !important;
    color: #fff !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#ai-hub-overlay .ai-score-ring {
    border: 3px solid var(--frx-brand-500) !important;
    background: var(--frx-surface-raised) !important;
    box-shadow: none !important;
    color: var(--frx-text) !important;
}

#ai-hub-overlay .ai-tag {
    background: var(--frx-surface-raised) !important;
    border-color: var(--frx-border) !important;
    color: var(--frx-text) !important;
    text-transform: none !important;
}

#ai-hub-overlay [class*="bg-gradient"] { background-image: none !important; }

#ai-hub-overlay [class*="text-purple"],
#ai-hub-overlay [class*="text-violet"] { color: var(--frx-brand-500) !important; }

#ai-hub-overlay [class*="border-purple"],
#ai-hub-overlay [class*="border-violet"] { border-color: var(--frx-border) !important; }

#ai-confirm-yes {
    background: var(--frx-brand-600) !important;
    background-image: none !important;
    box-shadow: none !important;
}

@media (max-width: 430px) {
    .frx-badge-collection-grid { grid-template-columns: 1fr; }
    #ai-hub-overlay #ai-main-menu,
    #ai-hub-overlay .ai-content { padding-inline: 14px !important; }
    #competition-jury-modal .competition-jury-stage { padding-block: 4px; }
    #competition-jury-modal .competition-jury-image { min-height: 180px; }
    #competition-jury-modal .competition-jury-card-copy { padding: 10px 14px 12px; }
    #competition-jury-modal .competition-jury-controls { padding-top: 4px; }
    #competition-jury-help { margin-top: 6px !important; }
}

@media (orientation: landscape) and (max-height: 540px) {
    #competition-jury-modal .competition-jury-shell {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 36vw);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 12px;
    }
    #competition-jury-modal .competition-jury-header { grid-column: 1 / -1; width: 100%; min-height: 44px; }
    #competition-jury-modal .competition-jury-stage { grid-column: 1; grid-row: 2; }
    #competition-jury-modal .competition-jury-controls { grid-column: 2; grid-row: 2; align-self: center; }
    #competition-jury-modal .competition-jury-image { min-height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .frx-typing-dots > span { animation: none !important; opacity: 0.72; transform: none; }
}

html[data-theme="light"] {
    color-scheme: light;
    --frx-bg: #ffffff;
    --frx-surface: #ffffff;
    --frx-surface-raised: #ffffff;
    --frx-surface-soft: #ffffff;
    --frx-border: rgba(0, 0, 0, 0.16);
    --frx-border-strong: rgba(0, 0, 0, 0.28);
    --frx-text: #000000;
    --frx-text-muted: #000000;
    --frx-text-faint: #000000;
    --bg-base: #ffffff;
    --bg-surface: #ffffff;
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-elevated: #ffffff;
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-tertiary: #000000;
    --frx-brand-soft: rgba(2, 132, 199, 0.10);
    --frx-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --frx-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
    --frx-profile-banner-overlay: linear-gradient(rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.96));
    --frx-scrim: rgba(0, 0, 0, 0.54);
}

html,
body {
    background: var(--frx-bg) !important;
    color: var(--frx-text);
    font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    font-size: var(--frx-type-body);
    line-height: 1.5;
}

body,
button,
input,
select,
textarea {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
a,
input,
select,
textarea,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

button,
[role="button"] {
    touch-action: manipulation;
}

:where(button, a[href], input, select, textarea, [role="button"]):focus-visible {
    outline: 3px solid var(--frx-focus) !important;
    outline-offset: 2px !important;
}

/* The legacy interface accumulated 7–11px one-off utilities. Keep numeric
   notification dots compact, but bring every readable label/caption back onto
   one 12px floor so screens no longer feel as if they use unrelated scales. */
:is(#main-app, #login-screen, [id$="-modal"], #notifications-screen) :is(
    [class~="text-[7px]"], [class~="text-[8px]"], [class~="text-[9px]"],
    [class~="text-[9.5px]"], [class~="text-[10px]"], [class~="text-[11px]"]
) {
    font-size: var(--frx-type-caption) !important;
    line-height: 1.4 !important;
}

:is(#notif-unread-badge, #chat-unread-badge),
:is(#main-app, [id$="-modal"]) :is(.h-4.w-4, .leaderboard-rank-badge) {
    font-size: 10px !important;
    line-height: 1 !important;
}

:is(#main-app, #login-screen, [id$="-modal"], #notifications-screen) :is(p, li) {
    line-height: 1.5;
}

:is([id$="-modal"], #notifications-screen) :is(h1, h2, h3).teko-font:not(.auth-brand-title) {
    font-family: "Outfit", system-ui, sans-serif !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
}

/* Display typography is reserved for the wordmark. Screen titles use the UI
   typeface so they no longer look like advertising banners. */
:is(#main-app, [id$="-modal"], [id$="-screen"]) .teko-font:not(.auth-brand-title),
:is(#screen-rank, #screen-competition, #screen-missions, #screen-news) .teko-font {
    font-family: "Outfit", system-ui, sans-serif !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
}

/* App shell and shared navigation */
#main-app,
#main,
:is(#screen-chat, #screen-market, #screen-rank, #screen-news, #screen-missions,
    #screen-giveaway, #screen-events, #screen-competition, #screen-profile) {
    background: var(--frx-bg) !important;
    color: var(--frx-text);
}

#app-top-header {
    min-height: 58px;
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--frx-surface) 94%, transparent) !important;
    border-bottom: 1px solid var(--frx-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
}

#bottom-nav {
    min-height: calc(var(--frx-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--frx-surface) 96%, transparent) !important;
    border-top: 1px solid var(--frx-border) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(18px);
}

#bottom-nav button {
    min-height: 52px;
    color: var(--frx-text-faint) !important;
}

#bottom-nav button > span:last-child {
    font-size: var(--frx-type-caption) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

#bottom-nav button.active,
#bottom-nav button[aria-current="page"] {
    color: var(--frx-brand-500) !important;
}

#bottom-nav svg,
#app-top-header svg,
[id$="-modal"] svg {
    stroke-width: 1.8;
}

/* Shared screen headers: one quiet surface, one clear title. */
:is(#screen-market, #screen-rank, #screen-giveaway, #screen-events, #screen-competition) > .sticky,
#screen-rank > .sticky {
    background: color-mix(in srgb, var(--frx-surface) 96%, transparent) !important;
    border-bottom: 1px solid var(--frx-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px) !important;
}

:is(#screen-market, #screen-rank, #screen-news, #screen-missions, #screen-events, #screen-competition) h1,
:is(#screen-market, #screen-rank, #screen-news, #screen-missions, #screen-events, #screen-competition) h2 {
    color: var(--frx-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    filter: none !important;
    font-family: "Outfit", system-ui, sans-serif !important;
    font-size: clamp(var(--frx-type-page), 5vw, 1.5rem) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

:is(#screen-market, #screen-rank, #screen-missions, #screen-events, #screen-competition) :is(.text-zinc-400, .text-zinc-500, .text-zinc-600) {
    color: var(--frx-text-muted) !important;
}

/* Cards, fields, tabs and secondary actions */
:is(.glass-panel, .card, .card-standard, .modal-panel-standard) {
    border-color: var(--frx-border) !important;
    background: var(--frx-surface) !important;
    box-shadow: var(--frx-shadow-sm) !important;
    backdrop-filter: none !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
    min-height: 44px;
    border: 1px solid var(--frx-border-strong) !important;
    border-radius: var(--frx-radius-sm) !important;
    background: var(--frx-surface) !important;
    color: var(--frx-text) !important;
    box-shadow: none !important;
}

:where(input, textarea)::placeholder {
    color: var(--frx-text-faint) !important;
    opacity: 1;
}

:where(select) option {
    background: var(--frx-surface);
    color: var(--frx-text);
}

.pill-toggle-btn,
:is(#rank-tab-weekly, #rank-tab-month, #rank-tab-all),
#missions-list :is(#mtab-0, #mtab-1, #mtab-2, #mtab-3),
.comp-cat-btn {
    min-height: 44px !important;
    border: 1px solid transparent !important;
    border-radius: var(--frx-radius-sm) !important;
    background: transparent !important;
    color: var(--frx-text-muted) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.pill-toggle-btn.active,
:is(#rank-tab-weekly, #rank-tab-month, #rank-tab-all)[style*="rgb(59"],
#missions-list :is(#mtab-0, #mtab-1, #mtab-2, #mtab-3).bg-zinc-800,
.comp-cat-btn[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--frx-brand-500) 35%, transparent) !important;
    background: var(--frx-brand-soft) !important;
    color: var(--frx-brand-400) !important;
}

/* Buttons keep a clear hierarchy. Legacy glow/scale effects are neutralized. */
.btn-premium-hover,
button[class*="shadow-"] {
    box-shadow: none !important;
}

.btn-premium-hover:hover,
button:hover {
    transform: none;
}

:is(#login-btn, #register-btn, #market-add-listing-btn, #competition-add-bike-btn,
    #competition-jury-submit, #premium-cta-btn, #ref-copy-btn-main) {
    min-height: 48px !important;
    border: 1px solid color-mix(in srgb, var(--frx-brand-400) 34%, transparent) !important;
    border-radius: var(--frx-radius-md) !important;
    background: var(--frx-brand-600) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
}

:is(#login-btn, #register-btn, #market-add-listing-btn, #competition-add-bike-btn,
    #competition-jury-submit, #premium-cta-btn, #ref-copy-btn-main):hover {
    background: var(--frx-brand-700) !important;
}

/* Authentication is always a real foreground layer. The old relative panel let
   underlying screens and navigation bleed through on small WebViews. */
#login-screen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
    min-height: 100dvh !important;
    isolation: isolate;
    overscroll-behavior: contain;
    background: #07090d !important;
}

/* Giriş ilk temasında yalnızca logo halkası hareket eder. Form, arka plan ve
   sekmeler sabittir; bu hem sakin bir giriş verir hem de düşük güçlü WebView'da
   gereksiz kompozit katmanları kaldırır. */
#login-screen :is(.slide-up-anim, .scale-in-anim) {
    animation: none !important;
    transform: none !important;
}

.auth-logo-orbit::after {
    content: '';
    position: absolute;
    inset: 4px;
    z-index: 1;
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-top-color: #7dd3fc;
    border-radius: 999px;
    pointer-events: none;
    animation: frx-login-orbit 16s linear infinite;
}

@keyframes frx-login-orbit {
    to { transform: rotate(360deg); }
}

#login-context-message:not(.hidden) {
    border: 1px solid rgba(56, 189, 248, 0.62) !important;
    border-left: 4px solid #38bdf8 !important;
    border-radius: var(--frx-radius-sm) !important;
    background: #0c2233 !important;
    color: #e0f2fe !important;
    box-shadow: none !important;
    text-align: left !important;
}

#login-screen > .absolute.inset-0.bg-gradient-to-b {
    background: rgba(3, 6, 11, 0.78) !important;
}

#login-screen .glass-panel {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    background: rgba(14, 18, 25, 0.96) !important;
    color: #f8fafc !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: none !important;
}

#login-screen .auth-brand-title {
    font-size: clamp(2.5rem, 6vw, 3rem) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

#login-screen .auth-brand-title span {
    color: var(--frx-brand-400) !important;
    text-shadow: none !important;
}

#login-screen :is(label, .text-zinc-300) { color: #d7dee8 !important; }
#login-screen :is(.text-zinc-400, .text-zinc-500) { color: #a5b0bf !important; }
#login-screen :is(input, select, textarea) {
    border-color: rgba(255, 255, 255, 0.17) !important;
    background: #090d13 !important;
    color: #ffffff !important;
}

#login-screen :is(#login-tab-btn, #register-tab-btn) {
    min-height: 46px;
    border-radius: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#login-screen a[onclick*="ForgotPassword"] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
}

#login-screen :is(#reg-password-hint, #reg-email-hint) {
    font-size: var(--frx-type-label) !important;
    line-height: 1.5 !important;
}

/* Authentication follows the selected light theme as a complete surface, not
   as a dark island left over from the default theme. */
html[data-theme="light"] #login-screen {
    background: var(--frx-bg) !important;
    color: var(--frx-text) !important;
}

html[data-theme="light"] #login-screen > .absolute.inset-0.bg-gradient-to-b {
    background: rgba(248, 250, 252, 0.9) !important;
}

html[data-theme="light"] #login-screen .glass-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--frx-border) !important;
    color: var(--frx-text) !important;
    box-shadow: var(--frx-shadow-lg) !important;
}

html[data-theme="light"] #login-context-message:not(.hidden) {
    border-color: #7dd3fc !important;
    border-left-color: #0284c7 !important;
    background: #f0f9ff !important;
    color: #0c4a6e !important;
}

html[data-theme="light"] #login-screen .auth-brand-title {
    color: var(--frx-text) !important;
    text-shadow: none !important;
}

html[data-theme="light"] #login-screen .auth-brand-title span {
    color: var(--frx-brand-600) !important;
    text-shadow: none !important;
}

html[data-theme="light"] #login-screen :is(label, .text-zinc-300) {
    color: var(--frx-text) !important;
}

html[data-theme="light"] #login-screen :is(.text-zinc-400, .text-zinc-500) {
    color: var(--frx-text-muted) !important;
}

html[data-theme="light"] #login-screen :is(input, select, textarea) {
    background: #ffffff !important;
    border-color: var(--frx-border-strong) !important;
    color: var(--frx-text) !important;
}

html[data-theme="light"] #login-screen :is(input, textarea)::placeholder {
    color: #64748b !important;
}

html[data-theme="light"] #login-screen > button,
html[data-theme="light"] #login-screen > .flex > button {
    background: #ffffff !important;
    border-color: var(--frx-border-strong) !important;
    color: var(--frx-text) !important;
    box-shadow: var(--frx-shadow-sm) !important;
}

html[data-theme="light"] #login-screen #login-lang-text {
    color: var(--frx-text) !important;
}

html[data-theme="light"] #login-screen .glass-panel > .flex.bg-zinc-900\/90 {
    background: var(--frx-surface-raised) !important;
    border-color: var(--frx-border) !important;
}

html[data-theme="light"] #login-screen #register-tab-btn:not(.bg-primary) {
    color: var(--frx-text-muted) !important;
}

html[data-theme="light"] #login-screen :is(#login-tab-btn, #register-tab-btn).bg-primary,
html[data-theme="light"] #login-screen :is(#login-btn, #register-btn) {
    color: #ffffff !important;
}

html[data-theme="light"] #login-screen .border-t {
    border-color: var(--frx-border) !important;
}

html[data-theme="light"] #login-screen :is(.auth-field-error, .auth-form-error) {
    color: var(--frx-danger) !important;
}

#forgot-password-modal,
#password-reset-modal,
#email-verify-modal,
#new-password-modal {
    z-index: 40000 !important;
}

/* Leaflet's legacy rule forces white +/- glyphs. In light mode that became
   white-on-white, even though the control itself remained clickable. */
html[data-theme="light"] #screen-map .leaflet-control-zoom a {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--frx-border-strong) !important;
    color: var(--frx-text) !important;
}

html[data-theme="light"] #screen-map .leaflet-control-zoom a.leaflet-disabled {
    color: var(--frx-text-faint) !important;
}

/* Inactive destinations must remain readable; active state is still conveyed
   by surface, scale and weight, rather than by low opacity. */
#sidebar .tab-btn:not(.bg-zinc-800\/80) {
    color: var(--frx-text-muted) !important;
    opacity: 1 !important;
}

/* Market */
#market-add-listing-btn,
#screen-market button[onclick="executeMarketSearch()"] {
    background: var(--frx-brand-600) !important;
    color: #ffffff !important;
}

#screen-market :is(.text-emerald-300, .text-emerald-400, .text-emerald-500) {
    color: var(--frx-brand-500) !important;
}

#screen-market :is([class*="border-emerald"], [class*="focus:border-emerald"]) {
    border-color: var(--frx-border-strong) !important;
}

#screen-market :is(#market-filter-btn, #market-sort-select) {
    min-height: 44px !important;
    background: var(--frx-surface-raised) !important;
    color: var(--frx-text) !important;
    border-color: var(--frx-border) !important;
}

#screen-market :is(#market-add-listing-btn, #market-filter-btn, button[onclick="executeMarketSearch()"]),
#screen-rank :is(#rank-tab-weekly, #rank-tab-month, #rank-tab-all),
#screen-chat :is(#chat-tab-group, #chat-tab-dm, #chat-tab-rooms) {
    font-size: var(--frx-type-label) !important;
    line-height: 1.4 !important;
}

#screen-market #market-list > * {
    border-color: var(--frx-border) !important;
    box-shadow: none !important;
}

#screen-map .leaflet-control-layers label span {
    font-size: var(--frx-type-caption) !important;
    line-height: 1.4 !important;
}

#market-loading > div {
    border-color: var(--frx-brand-500) !important;
    border-top-color: transparent !important;
}

#screen-market button[onclick="executeMarketSearch()"],
#screen-rank button[onclick*="rewards-modal"],
#screen-profile button[onclick*="openLoginModal"],
#screen-events button[onclick="startAddEventFromEventsScreen()"] {
    min-height: 44px !important;
}

/* Leaderboard: achievement remains visible without casino-like gold effects. */
#screen-rank > .sticky .absolute[style*="gradient"],
#screen-rank > .sticky .h-px {
    display: none !important;
}

#screen-rank > .sticky .flex.gap-1\.5 {
    background: var(--frx-surface-raised) !important;
    border-color: var(--frx-border) !important;
    box-shadow: none !important;
}

#main-app #screen-rank > .sticky p,
#main-app #screen-missions > div > div:first-child p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

#leaderboard .leaderboard-champion,
#leaderboard > div {
    border: 1px solid var(--frx-border) !important;
    background: var(--frx-surface) !important;
    box-shadow: none !important;
}

#leaderboard .leaderboard-champion {
    border-left: 3px solid var(--frx-brand-500) !important;
}

#leaderboard .leaderboard-champion :is(.text-yellow-300, .text-yellow-400, .text-yellow-500) {
    color: var(--frx-brand-600) !important;
}

#leaderboard .leaderboard-champion img {
    border-color: var(--frx-brand-500) !important;
}

#leaderboard .leaderboard-rank-badge {
    background: var(--frx-surface-soft) !important;
    color: var(--frx-text) !important;
    border: 1px solid var(--frx-border-strong) !important;
    box-shadow: none !important;
}

#leaderboard .leaderboard-rank-badge[data-rank="1"] {
    background: var(--frx-brand-soft) !important;
    color: var(--frx-brand-400) !important;
    border-color: rgba(56, 189, 248, 0.32) !important;
}

/* Missions */
#missions-list .mission-reward-card,
#missions-list .mission-item {
    border: 1px solid var(--frx-border) !important;
    border-radius: var(--frx-radius-lg) !important;
    background: var(--frx-surface) !important;
    box-shadow: none !important;
}

#missions-list .mission-status-marker {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border: 2px solid var(--frx-brand-500);
    border-radius: 50%;
    background: transparent;
}

#missions-list .mission-item.is-complete .mission-status-marker {
    border-color: var(--frx-success);
    background: var(--frx-success);
}

#missions-list :is(.text-yellow-300, .text-yellow-400, .text-yellow-500, .text-amber-200, .text-amber-300, .text-amber-400) {
    color: var(--frx-brand-400) !important;
}

#missions-list :is([class*="bg-gradient"], [style*="gradient"], [class*="shadow-"]) {
    background-image: none !important;
    box-shadow: none !important;
}

#missions-list :is([class*="border-yellow"], [class*="border-amber"]) {
    border-color: rgba(14, 165, 233, 0.3) !important;
}

#missions-list :is([class*="bg-yellow"], [class*="bg-amber"]) {
    background: var(--frx-brand-soft) !important;
    color: var(--frx-brand-400) !important;
}

#missions-list button {
    min-height: 44px;
    animation: none !important;
    background: var(--frx-brand-600) !important;
    color: #ffffff !important;
    border-radius: var(--frx-radius-sm) !important;
    box-shadow: none !important;
}

#missions-list .progress-bar-fill {
    background: var(--frx-brand-500) !important;
}

/* Events and competition */
#screen-events button[onclick="startAddEventFromEventsScreen()"],
#screen-events #events-loading > div {
    background: var(--frx-brand-600) !important;
    border-color: var(--frx-brand-500) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#giveaway-intro-card {
    background: var(--frx-surface) !important;
    border-color: var(--frx-border) !important;
    box-shadow: none !important;
}

#giveaway-intro-card h3,
#screen-referral h3,
#screen-competition .left-col h3,
#screen-competition .right-col h2 {
    font-size: var(--frx-type-section) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

#main-app #giveaway-intro-card p {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
}

#main-app #screen-referral p.text-xs {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

#screen-competition :is(.text-orange-300, .text-orange-400, .text-orange-500) {
    color: var(--frx-brand-500) !important;
}

#screen-competition :is([class*="border-orange"], [class*="border-red"]) {
    border-color: var(--frx-border-strong) !important;
}

#screen-competition :is(.text-yellow-300, .text-yellow-400, .text-yellow-500,
                        .text-orange-300, .text-orange-400, .text-orange-500) {
    color: var(--frx-brand-500) !important;
}

#screen-competition :is(.bg-yellow-500, .bg-orange-500) {
    background: var(--frx-brand-600) !important;
    color: #ffffff !important;
}

#screen-competition [class*="bg-gradient"] {
    background-image: none !important;
}

#screen-competition :is(#comp-week-label, .comp-cat-btn),
#competition-jury-modal :is(#competition-jury-category, label[for="competition-jury-score"]) {
    font-size: var(--frx-type-caption) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
}

#main-app #competition-jury-open [data-i18n="competition.jury_subtitle"],
#main-app #screen-competition [data-i18n="competition.monthly_reward_desc"] {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

#competition-jury-open {
    border-color: rgba(14, 165, 233, 0.3) !important;
    background: var(--frx-brand-soft) !important;
    box-shadow: none !important;
}

#competition-jury-open svg { color: var(--frx-brand-500) !important; }

#competition-jury-modal .competition-jury-shell {
    background: #05070a !important;
}

#competition-jury-modal .competition-jury-card {
    border-radius: 20px;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

#competition-jury-modal :is(#competition-jury-progress, #competition-jury-score-output) {
    color: var(--frx-brand-400) !important;
}

#competition-jury-score { accent-color: var(--frx-brand-500) !important; }

#competition-jury-skip {
    min-height: 48px;
    background: #171c24 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#competition-jury-help {
    color: #a9b3c1 !important;
    font-size: 12px !important;
}

/* Premium stays special through restrained gold accents, not heavy gradients. */
#screen-premium {
    background: var(--frx-bg) !important;
    color: var(--frx-text) !important;
    font-family: "Outfit", system-ui, sans-serif !important;
}

#premium-hero-container {
    min-height: 22vh !important;
    border-color: var(--frx-border) !important;
    border-radius: 0 0 24px 24px !important;
    background: var(--frx-surface) !important;
    box-shadow: none !important;
}

#premium-hero-glow {
    background: linear-gradient(to top, rgba(9, 11, 15, 0.68), rgba(9, 11, 15, 0.08)) !important;
}

#premium-hero-title,
#premium-daily-price {
    background: none !important;
    color: var(--frx-text) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

#premium-hero-title {
    font-size: clamp(1.75rem, 8vw, 2rem) !important;
    letter-spacing: -0.03em !important;
}

#premium-hero-desc {
    font-size: var(--frx-type-body) !important;
    line-height: 1.55 !important;
}

#main-app #premium-hero-social-proof,
#main-app #premium-price-note {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

#premium-plan-heading > span:first-child {
    font-size: 0.875rem !important;
    letter-spacing: 0.04em !important;
}

#main-app #screen-premium details summary {
    font-size: var(--frx-type-label) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

#main-app #screen-premium details p {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
}

#plan-duration-selector button {
    line-height: 1.4 !important;
}

#premium-buy-section > div > :is(.text-center, div:last-child) {
    line-height: 1.45 !important;
    letter-spacing: 0.04em !important;
}

#screen-premium :is([class*="bg-gradient"], [class*="radial-gradient"]) {
    background-image: none !important;
}

#premium-plan-heading > span:last-child,
#plan-6ay-trial-badge,
#btn-plan-12ay > span:first-child {
    border-radius: 999px !important;
    background-color: var(--frx-brand-600) !important;
    color: #ffffff !important;
}

#activation-code-btn,
#screen-reels :is(#toggle-mode-reels, #toggle-mode-discover) {
    font-size: var(--frx-type-label) !important;
    line-height: 1.4 !important;
}

#premium-compare-block,
#screen-premium details,
#premium-settings-section > div,
#premium-buy-section > div {
    border-color: var(--frx-border) !important;
    background: var(--frx-surface) !important;
    box-shadow: none !important;
}

#premium-buy-section {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    background: linear-gradient(to top, var(--frx-bg) 76%, transparent) !important;
}

#premium-buy-section a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-inline: 4px;
}

#activation-code-btn {
    min-height: 44px;
    background: var(--frx-brand-600) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="light"] #premium-hero-container {
    background: #eef6fb !important;
}

html[data-theme="light"] #premium-hero-container > .absolute {
    display: none !important;
}

html[data-theme="light"] #premium-hero-title {
    color: #101828 !important;
}

html[data-theme="light"] #premium-hero-desc {
    color: #344054 !important;
    text-shadow: none !important;
}

html[data-theme="light"] #premium-hero-social-proof {
    color: #475467 !important;
}

html[data-theme="light"] #premium-hero-container button {
    border-color: rgba(15, 23, 42, 0.14) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #101828 !important;
}

html[data-theme="light"] #premium-plan-heading {
    border-color: var(--frx-border) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="light"] #premium-plan-heading > span:first-child {
    color: #101828 !important;
}

html[data-theme="light"] #plan-duration-selector button {
    border-color: var(--frx-border) !important;
    background: #ffffff !important;
    color: #475467 !important;
    box-shadow: none !important;
}

html[data-theme="light"] #plan-duration-selector button[class*="border-2"] {
    border-color: var(--frx-brand-500) !important;
    background: var(--frx-brand-soft) !important;
    color: var(--frx-brand-700) !important;
}

html[data-theme="light"] #btn-plan-12ay > span:first-child {
    background: var(--frx-brand-600) !important;
    color: #ffffff !important;
}

html[data-theme="light"] #premium-compare-block :is(.text-zinc-200, .text-zinc-300) {
    color: #344054 !important;
}

html[data-theme="light"] #premium-compare-block :is(.text-zinc-400, .text-zinc-500, .text-zinc-600),
html[data-theme="light"] #premium-price-note {
    color: #667085 !important;
}

/* Chat and DM */
#screen-chat :is(button, [role="button"]),
#chat-dm-thread-area :is(button, [role="button"]) {
    min-height: 44px;
    min-width: 44px;
}

#screen-chat :is(#chat-input-area, #dm-input-area) {
    border-color: var(--frx-border) !important;
    background: color-mix(in srgb, var(--frx-surface) 96%, transparent) !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14) !important;
}

#screen-chat :is(#chat-input, #dm-input) {
    min-height: 44px;
}

/* Tek bir yüzey dili: DM ve genel sohbet balonları temada belirgin kalır,
   ama kart gibi ağırlaşmaz. Sabit genişlik/taşma kuralları yatay kaymayı
   engeller; etkileşim geri bildirimi yalnızca yanıt eşiğinde verilir. */
#screen-chat .frx-chat-bubble {
    max-width: min(100%, 34rem);
    overflow-wrap: anywhere;
    border: 1px solid var(--frx-border-strong);
    box-shadow: var(--frx-shadow-sm);
}

#screen-chat .frx-chat-bubble--outgoing {
    background: #075985;
    border-color: #0c4a6e;
    color: #ffffff;
}

#screen-chat .frx-chat-bubble--incoming {
    background: #18181b;
    border-color: #3f3f46;
    color: #fafafa;
}

html[data-theme="light"] #screen-chat .frx-chat-bubble--outgoing {
    background: #0369a1;
    border-color: #075985;
    color: #ffffff;
}

html[data-theme="light"] #screen-chat .frx-chat-bubble--incoming {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #111827;
}

.frx-dm-notification-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem 4.5rem;
}

.frx-dm-notification-actions button {
    min-height: 32px;
    border: 1px solid var(--frx-border-strong);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: var(--frx-surface-soft);
    color: var(--frx-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.frx-dm-notification-actions button:hover,
.frx-dm-notification-actions button:focus-visible {
    border-color: var(--frx-brand-500);
    color: var(--frx-brand-500);
}

#dm-reply-preview-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.5rem 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--frx-border-strong);
    border-left: 3px solid var(--frx-brand-500);
    border-radius: var(--frx-radius-sm);
    background: var(--frx-surface-soft);
    color: var(--frx-text);
    font-size: 0.75rem;
}

#dm-reply-preview-container button {
    min-width: 32px !important;
    min-height: 32px !important;
    color: var(--frx-text-muted);
}

/* Sohbet, layout viewport yerine klavyenin daralttığı gerçek görünür alana
   oturur. Normal durumda alt menü payı korunur; klavye açılınca bu pay ve DM'in
   pb-28 boşluğu kaldırılarak composer doğrudan klavyenin üstüne gelir. */
#screen-chat {
    height: var(--fr-vvh, calc(100dvh - env(safe-area-inset-top, 0px))) !important;
    max-height: var(--fr-vvh, calc(100dvh - env(safe-area-inset-top, 0px))) !important;
    overflow: hidden !important;
}

body.frx-chat-keyboard-open #bottom-nav {
    display: none !important;
}

body.frx-chat-keyboard-open #screen-chat :is(#chat-input-area, #dm-input-area) {
    margin-bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
    transition: none !important;
}

body.frx-chat-keyboard-open #chat-dm-thread-area {
    padding-bottom: 0 !important;
}

#screen-chat :is(#chat-group-tab, #chat-dm-tab, #chat-rooms-tab) {
    min-height: 44px !important;
}

#main-app #profile-guest-banner [data-i18n="guest.banner_subtitle"] {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

#main-app #profile-guest-banner button {
    font-size: var(--frx-type-label) !important;
    line-height: 1.4 !important;
}

/* Profile totals are supporting information, not a second page title. */
#profile-xp {
    font-size: 1.375rem !important;
    font-variant-numeric: tabular-nums;
}

#profile-xp + [data-i18n="profile.total_xp"] {
    font-size: var(--frx-type-caption) !important;
    line-height: 1.4 !important;
}

#profile-settings-btn,
#profile-logout-btn {
    min-height: 48px;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}

#profile-settings-btn {
    background: var(--frx-surface-raised) !important;
    border-color: var(--frx-border-strong) !important;
    color: var(--frx-text) !important;
}

#profile-settings-btn:hover {
    background: var(--frx-surface-soft) !important;
}

#profile-logout-btn {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    color: #fca5a5 !important;
}

#profile-logout-btn:hover {
    background: rgba(239, 68, 68, 0.16) !important;
}

#profile-settings-btn:active,
#profile-logout-btn:active {
    transform: scale(0.99);
}

#profile-settings-btn:disabled,
#profile-logout-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

html[data-theme="light"] #profile-logout-btn {
    background: #fff5f5 !important;
    border-color: #f2b8b5 !important;
    color: #b42318 !important;
}

html[data-theme="light"] #profile-logout-btn:hover {
    background: #fee4e2 !important;
    border-color: #e88983 !important;
}

/* Reels are intentionally media-dark, but controls stay aligned and tappable. */
#screen-reels :is(button, [role="button"]),
#reel-comment-modal :is(button, [role="button"]) {
    min-width: 44px;
    min-height: 44px;
}

#screen-reels :is([class*="from-pink"], [class*="to-pink"], [class*="from-purple"], [class*="to-purple"]) {
    background: var(--frx-brand-600) !important;
}

#screen-reels :is(.reel-action-count, .reel-like-count),
#screen-reels button[onclick^="openReelComments"] > span {
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#reels-mode-header :is(#toggle-mode-reels, #toggle-mode-discover, #reels-close-btn) {
    min-height: 44px !important;
}

#reels-close-btn {
    min-width: 44px !important;
}

#top-create-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
}

#app-top-header.is-contextual-actions {
    justify-content: flex-start !important;
    position: relative;
}

#app-top-header.is-contextual-actions #top-header-actions {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

#app-top-header.is-contextual-actions #top-map-brand {
    position: absolute;
    left: 50%;
    width: auto;
    max-width: 42%;
    flex: none;
    transform: translateX(-50%);
    justify-content: center;
    z-index: 1;
}

#app-top-header.is-contextual-actions #user-search-btn {
    margin-left: auto;
}

#profile-avatar {
    width: 84px !important;
    height: 84px !important;
    aspect-ratio: 1;
    object-fit: cover !important;
    object-position: center;
}

#reels-audience-select {
    min-height: 44px;
    color: var(--frx-text) !important;
    background-color: var(--frx-surface-raised) !important;
    border-color: var(--frx-border) !important;
}

#profile-create-modal button {
    min-height: 52px;
    touch-action: manipulation;
}

html[data-theme="light"] #profile-create-modal > div {
    background: #ffffff !important;
    border-color: #d4d4d8 !important;
}

html[data-theme="light"] #profile-create-modal :is(h3, button) {
    color: #000000 !important;
}

#reels-pull-spinner,
#reels-loading > div > div,
#discover-loading > div {
    border-top-color: var(--frx-brand-500) !important;
}

#reels-empty button,
#reel-upload-modal :is(#reel-submit-btn, #reel-photo-btn) {
    background: var(--frx-brand-600) !important;
    border-color: rgba(56, 189, 248, 0.38) !important;
    color: #ffffff !important;
}

/* Profile density pass: keep the identity, follow summary and progression
   visible without turning the screen into a stack of oversized cards. */
#screen-profile {
    overflow-x: hidden !important;
}

#profile-avatar-section {
    gap: 10px !important;
    padding: 12px 14px 8px !important;
}

#profile-avatar-wrap {
    padding: 2px !important;
    box-shadow: none !important;
}

#profile-name {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
}

#profile-bio {
    margin-top: 4px !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

#profile-social-summary {
    margin: 0 12px 8px !important;
    border-radius: 12px !important;
}

#profile-social-summary > :is(div, button) {
    min-height: 52px !important;
}

#profile-social-summary strong {
    font-size: 1rem !important;
    font-variant-numeric: tabular-nums;
}

#profile-social-summary span {
    margin-top: 3px !important;
    font-size: 0.6875rem !important;
    line-height: 1.2 !important;
}

#profile-stats-container {
    padding: 0 12px 7px !important;
}

#profile-stats-container > div {
    gap: 6px !important;
}

#profile-stats-container > div > div {
    padding: 9px 10px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
}

#profile-xp {
    font-size: 1.35rem !important;
}

#profile-coins {
    font-size: 1.05rem !important;
}

#profile-stats-container [data-i18n="profile.total_xp"],
#profile-stats-container [data-i18n="profile.total_coin"] {
    font-size: 0.625rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.035em !important;
}

#profile-stats-container > div > div:first-child > div:nth-child(3) {
    margin-top: 6px !important;
    padding-top: 6px !important;
}

#profile-stats-container > div > div:last-child {
    padding-top: 10px !important;
}

#profile-title {
    font-size: 0.8125rem !important;
}

#profile-title + #profile-xp-progress {
    margin-top: 5px !important;
}

#profile-stats-container [data-i18n="profile.title_map"] {
    font-size: 0.6875rem !important;
}

#profile-social-content {
    margin: 0 12px 8px !important;
}

#profile-social-content .profile-content-tab {
    min-height: 40px !important;
    font-size: 0.75rem !important;
}

#profile-badges-row {
    margin: 0 12px 7px !important;
}

#profile-badges-row button {
    padding: 9px 10px !important;
    border-radius: 12px !important;
}

#profile-badges-row button > div:first-child > div:first-child {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
}

#profile-badges-row button > div:first-child {
    gap: 8px !important;
}

#profile-badges-row [data-i18n="profile.badges"] {
    font-size: 0.8125rem !important;
}

#profile-badges-row #profile-badge-count-sub {
    font-size: 0.6875rem !important;
}

/* The verified creator strip remains clearly labelled and tappable, but is a
   compact identity affordance instead of a second profile card. */
#profile-creator-badges > div,
#op-creator-badges > div {
    max-width: 100% !important;
    margin-top: 8px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
}

#profile-creator-badges > div > div:first-child,
#op-creator-badges > div > div:first-child {
    margin-bottom: 5px !important;
}

#profile-creator-badges > div > div:nth-child(2),
#op-creator-badges > div > div:nth-child(2) {
    gap: 5px !important;
}

#profile-creator-badges a,
#op-creator-badges a {
    gap: 2px !important;
    padding: 5px 4px !important;
    border-radius: 8px !important;
}

#profile-creator-badges a svg,
#op-creator-badges a svg {
    width: 15px !important;
    height: 15px !important;
}

#profile-creator-badges a span.text-\[11px\],
#op-creator-badges a span.text-\[11px\] {
    font-size: 0.625rem !important;
}

/* Other profiles use the same compact rhythm as the signed-in profile. */
#other-profile-modal > div {
    overflow-x: hidden !important;
}

#other-profile-modal #op-profile-header {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
}

#other-profile-modal #op-avatar {
    width: 76px !important;
    height: 76px !important;
    border-width: 3px !important;
}

#other-profile-modal #op-username {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
}

#other-profile-modal #op-bio {
    margin-top: 4px !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
}

#other-profile-modal #op-social-stats {
    margin-top: 12px !important;
    border-radius: 12px !important;
}

#other-profile-modal #op-social-stats > :is(div, button) {
    min-height: 52px !important;
}

#other-profile-modal #op-social-stats strong {
    font-size: 1rem !important;
    font-variant-numeric: tabular-nums;
}

#other-profile-modal #op-social-stats span {
    margin-top: 3px !important;
    font-size: 0.6875rem !important;
}

#other-profile-modal #op-actions {
    padding-top: 12px !important;
    margin-top: 12px !important;
}

#other-profile-modal #op-social-content {
    margin-top: 12px !important;
}

/* Follow is a secondary action: neutral outlined text, no saturated filled
   pill. JS keeps the same treatment after optimistic state updates. */
.fr-follow-btn,
#screen-reels .fr-follow-btn {
    background: transparent !important;
    border: 1px solid var(--frx-border-strong) !important;
    color: var(--frx-text) !important;
    box-shadow: none !important;
}

.fr-follow-btn:hover,
.fr-follow-btn:focus-visible {
    border-color: var(--frx-brand-500) !important;
    background: var(--frx-brand-soft) !important;
}

.fr-follow-btn.fr-following {
    color: var(--frx-text-muted) !important;
}

@media (max-width: 359px) {
    #reels-mode-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

}

/* Modals, sheets and toast layers */
[id$="-modal"]:not(#competition-jury-modal):not(#forgot-password-modal):not(#password-reset-modal):not(#email-verify-modal):not(#new-password-modal):not(.hidden),
#notifications-screen:not(.hidden) {
    z-index: 20000 !important;
}

[id$="-modal"] > :is(.glass-panel, .bg-zinc-900, .bg-zinc-950, [class*="rounded-"]) {
    border-color: var(--frx-border) !important;
}

#notifications-screen {
    background: var(--frx-bg) !important;
    color: var(--frx-text) !important;
}

#notifications-screen > div:first-child {
    background: color-mix(in srgb, var(--frx-surface) 96%, transparent) !important;
    border-color: var(--frx-border) !important;
}

#toast-container,
.toast-container {
    z-index: 40000 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* Light theme repair for legacy hard-coded dark utilities. Media surfaces and
   auth remain dark by design; every normal app surface follows light tokens. */
html[data-theme="light"] :is(#screen-market, #screen-rank, #screen-news, #screen-missions,
    #screen-giveaway, #screen-events, #screen-competition, #screen-profile) :is(
        .bg-black, .bg-zinc-950, .bg-zinc-900, [class*="bg-black/"],
        [class*="bg-zinc-950/"], [class*="bg-zinc-900/"]
    ) {
    background-color: var(--frx-surface) !important;
}

html[data-theme="light"] :is(#screen-market, #screen-rank, #screen-news, #screen-missions,
    #screen-giveaway, #screen-events, #screen-competition, #screen-profile) :is(
        .text-white, .text-zinc-100, .text-zinc-200, .text-zinc-300
    ) {
    color: var(--frx-text) !important;
}

html[data-theme="light"] :is(#screen-market, #screen-rank, #screen-news, #screen-missions,
    #screen-giveaway, #screen-events, #screen-competition, #screen-profile) :is(
        .border-zinc-700, .border-zinc-800, [class*="border-zinc-"]
    ) {
    border-color: var(--frx-border) !important;
}

/* Profile/admin sheets had higher-specificity inline dark surfaces that escaped
   the shared light-theme repair. Keep their backdrop, but repair the sheet. */
html[data-theme="light"] #screen-profile #my-garage-modal > .glass-panel,
html[data-theme="light"] #other-profile-modal > .glass-panel,
html[data-theme="light"] #user-activity-modal > div {
    background: var(--frx-surface) !important;
    border-color: var(--frx-border) !important;
    color: var(--frx-text) !important;
}

html[data-theme="light"] :is(#other-profile-modal, #user-activity-modal) :is(
    .bg-black, .bg-zinc-950, .bg-zinc-900, [class*="bg-black/"],
    [class*="bg-zinc-950/"], [class*="bg-zinc-900/"]
) {
    background-color: var(--frx-surface-raised) !important;
}

html[data-theme="light"] :is(#other-profile-modal, #user-activity-modal) :is(
    .text-white, .text-zinc-100, .text-zinc-200, .text-zinc-300
) {
    color: var(--frx-text) !important;
}

/* Small-screen/WebView ergonomics */
@media (max-width: 767px) {
    :where(button, [role="button"], select,
           input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) {
        min-height: 44px;
    }

    :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: 16px !important;
    }

    #login-screen {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    #login-screen > .flex.flex-col.items-center {
        padding-top: 64px !important;
    }

    #login-screen .auth-brand-title {
        font-size: clamp(2.25rem, 9vw, 2.5rem) !important;
    }

    #screen-market > .sticky .flex.items-center.gap-1\.5 {
        gap: 4px !important;
    }

    #market-add-listing-btn {
        padding-inline: 10px !important;
    }

    #missions-list .mission-item {
        gap: 12px !important;
        padding: 14px !important;
    }

    #premium-buy-section {
        padding-inline: 12px !important;
    }

    #premium-buy-section > div {
        padding: 12px !important;
    }

    #competition-jury-modal .competition-jury-shell {
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 430px) {
    #screen-market > .sticky > .flex.justify-between.items-center {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    #screen-market > .sticky > .flex.justify-between.items-center > .flex.items-center {
        width: 100%;
        justify-content: flex-end;
    }

    #screen-market > .sticky h2 {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Exact two-tone theme contract. Neutral UI surfaces never drift into slate,
   zinc or tinted gradients: dark is true black/white, light is true white/black.
   Semantic actions (primary, success and destructive) keep their meaning. */
html:not([data-theme="light"]) :is(
    body, #main-app, #main, #sidebar, #bottom-nav, #app-top-header,
    #notifications-screen, .bg-darker, .glass-panel, .card, .card-standard,
    .modal-panel-standard, .bg-black, .bg-zinc-950, .bg-zinc-900,
    .bg-zinc-800, .bg-zinc-700, .bg-zinc-600,
    [class*="bg-black/"], [class*="bg-zinc-950/"], [class*="bg-zinc-900/"],
    [class*="bg-zinc-800/"], [class*="bg-zinc-700/"], [class*="bg-slate-9"]
) {
    background-color: #000000 !important;
    background-image: none !important;
}

html:not([data-theme="light"]) :is(
    .text-white, .text-zinc-100, .text-zinc-200, .text-zinc-300,
    .text-zinc-400, .text-zinc-500, .text-zinc-600,
    .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400,
    .text-gray-500, .text-gray-600, .text-neutral-100, .text-neutral-200,
    .text-neutral-300, .text-neutral-400, .text-neutral-500, .text-neutral-600,
    .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400,
    .text-slate-500, .text-slate-600
) {
    color: #ffffff !important;
}

html[data-theme="light"] :is(
    body, #main-app, #main, #sidebar, #bottom-nav, #app-top-header,
    #notifications-screen, .bg-darker, .glass-panel, .card, .card-standard,
    .modal-panel-standard, .bg-black, .bg-zinc-950, .bg-zinc-900,
    .bg-zinc-800, .bg-zinc-700, .bg-zinc-600,
    [class*="bg-black/"], [class*="bg-zinc-950/"], [class*="bg-zinc-900/"],
    [class*="bg-zinc-800/"], [class*="bg-zinc-700/"], [class*="bg-slate-9"]
):not(.theme-media-dark):not(.theme-media-dark *):not(.force-dark-surface):not(.force-dark-surface *) {
    background-color: #ffffff !important;
    background-image: none !important;
}

html[data-theme="light"] :is(
    .text-white, .text-black, .text-zinc-100, .text-zinc-200, .text-zinc-300,
    .text-zinc-400, .text-zinc-500, .text-zinc-600,
    .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400,
    .text-gray-500, .text-gray-600, .text-neutral-100, .text-neutral-200,
    .text-neutral-300, .text-neutral-400, .text-neutral-500, .text-neutral-600,
    .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400,
    .text-slate-500, .text-slate-600
):not(.theme-media-dark *):not(.force-dark-surface *):not(
    .bg-primary, .btn-primary, .ai-btn, [class*="bg-blue-"], [class*="bg-sky-"],
    [class*="bg-cyan-"], [class*="bg-teal-"], [class*="bg-emerald-"],
    [class*="bg-green-"], [class*="bg-red-"], [class*="bg-rose-"],
    [class*="bg-orange-"], [class*="bg-gradient-"]
) {
    color: #000000 !important;
}

html[data-theme="light"] :is(
    .bg-primary, .btn-primary, .ai-btn, [class*="bg-blue-"], [class*="bg-sky-"],
    [class*="bg-cyan-"], [class*="bg-teal-"], [class*="bg-emerald-"],
    [class*="bg-green-"], [class*="bg-red-"], [class*="bg-rose-"],
    [class*="bg-orange-"], [class*="bg-gradient-"]
) :is(.text-white, .text-zinc-100, .text-gray-100, .text-neutral-100),
html[data-theme="light"] :is(
    .bg-primary, .btn-primary, .ai-btn, [class*="bg-blue-"], [class*="bg-sky-"],
    [class*="bg-cyan-"], [class*="bg-teal-"], [class*="bg-emerald-"],
    [class*="bg-green-"], [class*="bg-red-"], [class*="bg-rose-"],
    [class*="bg-orange-"], [class*="bg-gradient-"]
):is(.text-white, .text-zinc-100, .text-gray-100, .text-neutral-100) {
    color: #ffffff !important;
}

html:not([data-theme="light"]) #login-screen,
html:not([data-theme="light"]) #login-screen .glass-panel,
html:not([data-theme="light"]) #login-screen :is(input, select, textarea) {
    background: #000000 !important;
}

html[data-theme="light"] body > .max-w-md,
html[data-theme="light"] .bg-darker,
html[data-theme="light"] [class*="bg-darker"] {
    background: #ffffff !important;
}

/* Sidebar navigation is organized by purpose: each heading and its rows share
   one calm surface, instead of appearing as disconnected mini-cards. */
#sidebar .sidebar-menu-list {
    gap: 10px !important;
    padding-block: 12px !important;
}

#sidebar .sidebar-menu-group {
    overflow: hidden;
    margin: 0 1px;
    border: 1px solid var(--frx-border) !important;
    border-radius: var(--frx-radius-sm);
    background: var(--frx-surface) !important;
    box-shadow: var(--frx-shadow-sm);
}

#sidebar .sidebar-menu-heading {
    min-height: 36px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 13px !important;
    border-bottom: 1px solid var(--frx-border) !important;
    background: var(--frx-surface-soft) !important;
    color: var(--frx-text-muted) !important;
}

#sidebar .sidebar-menu-group-items {
    display: grid;
    gap: 2px;
    padding: 5px;
}

#sidebar .sidebar-menu-item {
    min-height: 44px;
    justify-content: flex-start;
    gap: 0 !important;
    margin: 0 !important;
    padding-inline: 10px !important;
    text-align: left;
    color: var(--frx-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: background-color 180ms ease, border-color 180ms ease !important;
}

#sidebar .sidebar-menu-item:hover,
#sidebar .sidebar-menu-item:focus-visible,
#sidebar .sidebar-menu-item[aria-current="page"] {
    background: var(--frx-surface-soft) !important;
    border-color: var(--frx-border-strong) !important;
}

#sidebar .sidebar-menu-item[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--frx-brand-500) !important;
}

#sidebar .sidebar-menu-item:focus-visible {
    outline: 2px solid var(--frx-brand-500);
    outline-offset: -2px;
}

#sidebar .sidebar-theme-switch {
    margin: 0 !important;
    padding: 5px !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
}

#sidebar .sidebar-theme-switch .pill-toggle-btn {
    border: 1px solid transparent;
}

#sidebar .sidebar-theme-switch .pill-toggle-btn:not(.active) {
    color: var(--frx-text-muted) !important;
}

#sidebar .sidebar-theme-switch .pill-toggle-btn.active {
    border-color: var(--frx-border-strong) !important;
}

/* Marketplace actions use readable text instead of ambiguous icon-only buttons.
   The search action keeps a small glyph inside a full-size touch target. */
#screen-market .market-quick-action {
    min-width: 0;
    min-height: 44px;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--frx-border);
    border-radius: var(--frx-radius-sm);
    background: var(--frx-surface);
    color: var(--frx-text);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    touch-action: manipulation;
    transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

#screen-market .market-quick-action:hover,
#screen-market .market-quick-action:focus-visible {
    border-color: var(--frx-text);
    background: var(--frx-surface-soft);
}

#screen-market .market-quick-action-primary,
#screen-market .market-quick-action-primary:hover,
#screen-market .market-quick-action-primary:focus-visible {
    border-color: #0284c7;
    background: #0284c7;
    color: #ffffff;
}

#screen-market #market-add-listing-btn.market-quick-action-primary {
    font-size: 0.6875rem !important;
}

#screen-market .market-search-submit {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    border-radius: var(--frx-radius-sm);
    color: var(--frx-text);
    background: transparent;
    touch-action: manipulation;
    transition: background-color 180ms ease, opacity 180ms ease;
}

#screen-market .market-search-submit:hover,
#screen-market .market-search-submit:focus-visible {
    background: color-mix(in srgb, var(--frx-text) 10%, transparent);
}

#screen-market #market-search-clear:not(.hidden) {
    display: inline-flex;
}

/* Mission navigation remains readable before the asynchronous language file
   arrives and communicates the active section without gray-on-gray styling. */
#missions-list .mission-tabs {
    border-color: var(--frx-border) !important;
    border-radius: var(--frx-radius-md);
    background: var(--frx-bg) !important;
}

#missions-list .mission-tab {
    min-width: 0;
    min-height: 44px;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: var(--frx-radius-sm) !important;
    background: transparent !important;
    color: var(--frx-text) !important;
    font-size: var(--frx-type-caption) !important;
    font-weight: 700;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

#missions-list .mission-tab.is-active {
    border-color: var(--frx-brand-500) !important;
    background-color: var(--frx-brand-600) !important;
    background-image: none !important;
    color: #ffffff !important;
}

html[data-theme="light"] body #main-app #screen-missions #missions-list .mission-tab.is-active,
html:not([data-theme="light"]) body #main-app #screen-missions #missions-list .mission-tab.is-active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

#missions-list .mission-item.is-complete {
    opacity: 1 !important;
}

#missions-list [style*="border-top:24px solid #ffffff"] {
    border-top-color: var(--frx-text) !important;
}

@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):hover,
    a[href]:hover,
    [role="button"]:hover {
        filter: brightness(1.04);
    }
}

/* Shared card contract: enough separation in both themes without neon or
   coloured shadows. Full-screen Reels use an inset edge so snap sizing stays
   unchanged. */
:is(
    #profile-social-summary,
    #profile-stats-container > div > div,
    #profile-badges-row > button,
    #profile-garage-container > button,
    #op-social-stats,
    #op-badges-wrapper,
    #screen-market #market-list > *,
    #missions-list .mission-item,
    #leaderboard > div
) {
    border-color: var(--frx-border-strong) !important;
    box-shadow: var(--frx-shadow-sm) !important;
}

#reels-feed > [data-reel-id] {
    box-shadow: inset 0 0 0 1px var(--frx-border) !important;
}

/* Reels'teki takip kontrolü görsel olarak kısa/yataydır; görünmez taşan alan
   44px dokunma hedefini korur. */
#screen-reels .fr-follow-btn {
    position: relative;
    min-width: 88px !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 9px !important;
    background: rgba(9, 11, 15, 0.76) !important;
    color: #ffffff !important;
    font-size: var(--frx-type-caption) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26) !important;
}

#screen-reels .fr-follow-btn:hover,
#screen-reels .fr-follow-btn:focus-visible {
    border-color: #ffffff !important;
    background: rgba(2, 132, 199, 0.90) !important;
    color: #ffffff !important;
}

#screen-reels .fr-follow-btn::before {
    content: "";
    position: absolute;
    inset: -5px 0;
}

/* Açık temada Reels, diğer uygulama yüzeyleriyle aynı beyaz zemini kullanır.
   Gerçek video üzerindeki altyazı/eylemler ise okunurluk için kendi koyu
   katmanında beyaz kalır. */
html[data-theme="light"] #screen-reels,
html[data-theme="light"] #reels-mode-header,
html[data-theme="light"] #reels-audience-filter,
html[data-theme="light"] #following-suggestions,
html[data-theme="light"] #reels-feed,
html[data-theme="light"] #reels-feed > [data-reel-id] {
    background: #ffffff !important;
    color: #000000 !important;
}

html[data-theme="light"] #reels-mode-header,
html[data-theme="light"] #reels-audience-filter,
html[data-theme="light"] #following-suggestions {
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] #reels-audience-select {
    background: #ffffff !important;
    border-color: #94a3b8 !important;
    color: #000000 !important;
}

html[data-theme="light"] #reels-audience-select option {
    background: #ffffff;
    color: #000000;
}

html[data-theme="light"] #reels-mode-header :is(#toggle-mode-reels, #toggle-mode-discover) {
    border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] #reels-mode-header :is(#toggle-mode-reels, #toggle-mode-discover)[aria-pressed="true"] {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

html[data-theme="light"] #reels-mode-header :is(#toggle-mode-reels, #toggle-mode-discover)[aria-pressed="false"],
html[data-theme="light"] #reels-close-btn {
    background: #ffffff !important;
    color: #000000 !important;
}

html[data-theme="light"] #reels-feed > [data-reel-id] :is(.text-white, .text-zinc-100),
html[data-theme="light"] #screen-reels .fr-follow-btn {
    color: #ffffff !important;
}

/* Açık temada medya yüklenemese bile Reels eylemleri beyaz kartın üzerinde
   kaybolmamalı. İkonlar ortak koyu bir kontrol yüzeyinde; sayaçlar ayrı açık
   bir pill'de okunur kalır. */
html[data-theme="light"] #main-app #screen-reels #reels-feed > [data-reel-id] .reel-sound-toggle {
    background: rgba(15, 23, 42, 0.90) !important;
    border-color: rgba(255, 255, 255, 0.88) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28) !important;
}

/* Reels eylemleri yüzey değil, yalnızca okunaklı SVG ikonlardır. Hafif gölge
   farklı video/fotoğraf tonlarında görünürlüğü korur; açık temada koyu, koyu
   temada beyaz ikon kullanılır. */
#screen-reels .reel-action-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}

#screen-reels .reel-action-icon svg {
    display: block;
}

#screen-reels .reel-action-control {
    padding: 0;
    border: 0;
    background: transparent;
}

html[data-theme="light"] #screen-reels .reel-action-icon:not(.text-red-500) {
    color: #0f172a !important;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.86));
}

html[data-theme="light"] #main-app #screen-reels #reels-feed > [data-reel-id] :is(
    .reel-like-count,
    button[onclick^="openReelComments"] > span
) {
    min-width: 22px !important;
    min-height: 20px !important;
    padding: 1px 5px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #0f172a !important;
    line-height: 18px !important;
    text-shadow: none !important;
}

.reel-comment-like {
    width: 28px;
    min-width: 28px !important;
    height: 26px;
    min-height: 26px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 3px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--frx-text-muted);
    font-size: var(--frx-type-caption);
}

.reel-comment-like.is-liked {
    border-color: var(--frx-brand-500);
    color: var(--frx-brand-500);
}

.reel-comment-like:disabled {
    opacity: 0.75;
}

[data-group-start="0"] .chat-msg-bubble {
    margin-top: 0 !important;
}

.fr-profile-modal-open #other-profile-modal {
    pointer-events: auto;
    overscroll-behavior: contain;
}

/* Other-profile information hierarchy: identity/actions first, then compact
   garage and badges; Reels/Activities is appended last by follow_system.js. */
#other-profile-modal #op-garage-section {
    margin-top: 12px !important;
    padding: 11px !important;
    padding-bottom: 11px !important;
    border-color: var(--frx-border) !important;
    border-radius: var(--frx-radius-md) !important;
    background: var(--frx-surface-raised) !important;
}

#other-profile-modal #op-garage-section > h3 {
    margin-bottom: 8px !important;
    color: var(--frx-text-secondary) !important;
}

#other-profile-modal #op-garage {
    gap: 8px !important;
}

#other-profile-modal #op-garage > div {
    border-color: var(--frx-border) !important;
    border-radius: 10px !important;
    background: var(--frx-surface-soft) !important;
    box-shadow: none !important;
}

#other-profile-modal #op-garage > div > img {
    height: 76px !important;
}

#other-profile-modal #op-garage > div > div {
    padding: 6px 7px !important;
}

#other-profile-modal #op-badges-section {
    margin-top: 8px !important;
}

#other-profile-modal #op-badges-toggle {
    min-height: 44px !important;
    padding: 7px 10px !important;
    border-color: var(--frx-border) !important;
    border-radius: 12px !important;
    background: var(--frx-surface-raised) !important;
    color: var(--frx-text) !important;
    box-shadow: none !important;
}

#other-profile-modal #op-badges-toggle > span:first-child {
    gap: 7px !important;
    font-size: 0.6875rem !important;
}

#other-profile-modal #op-badges-toggle svg {
    width: 14px !important;
    height: 14px !important;
}

#other-profile-modal #op-badge-toggle-arrow {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--frx-text-secondary) !important;
    font-size: 0.625rem !important;
}

#other-profile-modal #op-badges-wrapper {
    max-height: 106px;
    margin-top: 5px !important;
    padding: 7px !important;
    overflow-y: auto;
    border-radius: 10px !important;
    background: var(--frx-surface-soft) !important;
    box-shadow: none !important;
}

#other-profile-modal #op-badges {
    gap: 4px !important;
}

#other-profile-modal #op-badges > span {
    gap: 3px !important;
    padding: 3px 6px !important;
    border-radius: 7px !important;
    font-size: 0.5625rem !important;
    line-height: 1.2 !important;
}

#other-profile-modal #op-social-content {
    margin-top: 10px !important;
    padding-bottom: 8px;
}

/* Tüm profil çerçeveleri: aynı ince halka, düşük parlama ve sakin hareket.
   Bu sınıflar mağaza, kendi profilin, diğer profiller ve küçük avatarlar
   tarafından ortak kullanıldığı için düzeltme bağlama özel değildir. */
:is(
    .premium-wrap-gold,
    .premium-wrap-neon,
    .premium-wrap-fire,
    .premium-wrap-dh-1,
    .premium-wrap-dh-2,
    .premium-wrap-ice-1,
    .premium-wrap-ice-2
)::before {
    inset: -3px !important;
    box-shadow: 0 0 5px rgba(148, 163, 184, 0.2) !important;
    animation: none !important;
}

:is(
    .premium-wrap-gold,
    .premium-wrap-neon,
    .premium-wrap-fire,
    .premium-wrap-dh-1,
    .premium-wrap-dh-2,
    .premium-wrap-ice-1,
    .premium-wrap-ice-2
)::after {
    inset: -2px !important;
    filter: none !important;
    opacity: 0.58 !important;
    animation: none !important;
}

:is(
    .premium-wrap-gold,
    .premium-wrap-neon,
    .premium-wrap-fire,
    .premium-wrap-dh-1,
    .premium-wrap-dh-2,
    .premium-wrap-ice-1,
    .premium-wrap-ice-2
) img {
    border-width: 1px !important;
    box-shadow: 0 0 4px rgba(148, 163, 184, 0.2) !important;
    animation: none !important;
}

/* ultra_gating.js bazı küçük avatarların üzerine doğrudan bu sınıfları koyuyor. */
:is(.frame-anim-fire, .frame-anim-gold, .frame-anim-neon) {
    border-width: 1px !important;
    box-shadow: 0 0 4px rgba(148, 163, 184, 0.2) !important;
    animation: none !important;
}

#fullscreen-img-modal {
    overflow: hidden;
    overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   App-wide surface boundary contract
   The legacy screens use many different utility classes and inline styles.
   Keep state colours intact, but make neutral surfaces obey one predictable
   border, radius and elevation system in both themes.
   -------------------------------------------------------------------------- */

/* Reels and premium deliberately remain dark in the light theme. Their local
   boundary tokens must therefore stay light instead of inheriting black. */
html[data-theme="light"] :is(.theme-media-dark, .force-dark-surface) {
    --frx-border: rgba(255, 255, 255, 0.18);
    --frx-border-strong: rgba(255, 255, 255, 0.30);
    --border-subtle: var(--frx-border);
    --border-default: var(--frx-border);
}

/* Neutral legacy borders. Semantic danger/success and active blue states are
   intentionally excluded so status and selection information is preserved. */
:is(#main-app, #login-screen, [id$="-modal"], [id$="-overlay"]) :is(
    [class*="border-zinc-"],
    [class*="border-gray-"],
    [class*="border-neutral-"],
    [class*="border-slate-"],
    .border-black
) {
    border-color: var(--frx-border) !important;
}

/* Real content cards: one visible boundary, no coloured decorative shell. */
:is(
    .card,
    .card-standard,
    .market-card,
    .mission-item,
    .mission-reward-card,
    .frx-badge-collection-card,
    #profile-social-summary,
    #profile-stats-container > div > div,
    #profile-badges-row > button,
    #profile-garage-container > button,
    #op-social-stats,
    #op-garage-section,
    #op-badges-toggle,
    #market-list > div,
    #giveaway-list > div,
    #events-list > div,
    #comp-entries-list > div,
    #news-list > div,
    #leaderboard > div,
    #premium-compare-block,
    #screen-premium details,
    #premium-settings-section > div,
    #ai-hub-overlay .ai-tool-card
) {
    border: 1px solid var(--frx-border) !important;
    border-radius: var(--frx-radius-md) !important;
    box-shadow: var(--frx-shadow-sm) !important;
}

/* Dynamic event markup carries an old purple inline surface. Override only its
   shell; event status chips and action buttons keep their semantic colours. */
#events-list > div {
    background: var(--frx-surface) !important;
}

/* Referral is a short flow with three true panels. The readonly code behaves
   as content inside its parent panel, not as a second nested input card. */
#screen-referral :is(.frx-ref-panel, .reward-card-option > div) {
    border: 1px solid var(--frx-border) !important;
    border-radius: var(--frx-radius-md) !important;
    background: var(--frx-surface) !important;
    box-shadow: var(--frx-shadow-sm) !important;
}

#screen-referral .reward-card-option.active > div {
    border-color: var(--frx-brand-500) !important;
}

#my-ref-code[readonly] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Dense collections are rows, not nested cards. The divider provides enough
   structure while unread and selected row backgrounds remain untouched. */
:is(
    #notif-list [role="listitem"],
    #dm-users-list > div,
    #user-search-results .fr-user-row,
    #follow-list-items .fr-user-row,
    #room-discover-list > div,
    #room-members-list > div
) {
    margin-block: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--frx-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

:is(
    #notif-list [role="listitem"],
    #dm-users-list > div,
    #user-search-results .fr-user-row,
    #follow-list-items .fr-user-row,
    #room-discover-list > div,
    #room-members-list > div
):last-child {
    border-bottom-color: transparent !important;
}

/* Modal and bottom-sheet boundaries. Full-screen media viewers are not matched,
   so photos, videos and the map itself never receive a decorative border. */
.modal-backdrop {
    background-color: var(--frx-scrim) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overscroll-behavior: contain;
}

[id$="-modal"].modal-backdrop > div:first-child,
:is(#badges-modal, #user-activity-modal, #pd-mic-modal, #pd-photo-modal) > div:first-child,
#message-action-box,
:is(#marker-sheet, #event-sheet) {
    border: 1px solid var(--frx-border-strong) !important;
    box-shadow: var(--frx-shadow-lg) !important;
}

[id$="-modal"].modal-backdrop > div:first-child:not([class*="rounded-t-"]),
:is(#badges-modal, #user-activity-modal, #pd-mic-modal, #pd-photo-modal) > div:first-child,
#message-action-box {
    border-radius: var(--frx-radius-lg) !important;
}

[id$="-modal"].modal-backdrop > div:first-child[class*="rounded-t-"],
:is(#marker-sheet, #event-sheet) {
    border-radius: var(--frx-radius-lg) var(--frx-radius-lg) 0 0 !important;
}

/* Form controls use the stronger resting boundary, then the brand colour only
   for focus. Disabled controls stay recognisable without looking interactive. */
:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    border-color: var(--frx-border-strong) !important;
    border-radius: var(--frx-radius-sm) !important;
}

:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
    border-color: var(--frx-focus) !important;
}

:is(input, select, textarea, button):disabled,
:is(input, select, textarea, button)[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: 0.56 !important;
}

:is(input, select, textarea):disabled {
    border-color: var(--frx-border) !important;
    background: var(--frx-surface-soft) !important;
}

/* Upload areas read as interactive containers before a file is selected. */
:is(
    #mk-photo-dropzone,
    label[for="gw-img-input"],
    label[for="bike-photo"],
    label[for="new-marker-photo"],
    label[for="news-photo"],
    label[for="story-photo-input"],
    #reel-photo-btn
) {
    border: 1px dashed var(--frx-border-strong) !important;
    border-radius: var(--frx-radius-md) !important;
    background: var(--frx-surface-soft) !important;
}

:is(
    #mk-photo-dropzone,
    label[for="gw-img-input"],
    label[for="bike-photo"],
    label[for="new-marker-photo"],
    label[for="news-photo"],
    label[for="story-photo-input"],
    #reel-photo-btn
):is(:hover, :focus-visible, :focus-within) {
    border-color: var(--frx-focus) !important;
}

/* Chat composers are functional panels, while message bubbles retain their
   directional grouping instead of gaining card borders. */
#screen-chat :is(#chat-input-area, #dm-input-area),
#message-action-box {
    border-color: var(--frx-border-strong) !important;
    border-radius: var(--frx-radius-md) !important;
}

/* Settings rows use separators inside their parent panel to avoid card-in-card
   noise. This is deliberately scoped so toggles and status controls are intact. */
#settings-modal .space-y-2 > label {
    border: 0 !important;
    border-bottom: 1px solid var(--frx-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The map stays borderless. Only controls floating above it receive elevation
   and a strong edge so they remain discoverable on bright satellite imagery. */
#screen-map :is(
    #map-actions-toggle-btn,
    #map-actions-menu > button,
    #map-floating-actions > button,
    .leaflet-control-zoom a,
    .leaflet-control-layers
) {
    border-color: var(--frx-border-strong) !important;
    box-shadow: var(--frx-shadow-sm) !important;
}

#map-confirm-btn-container > button {
    border: 1px solid var(--frx-brand-400) !important;
    background: var(--frx-brand-600) !important;
    box-shadow: var(--frx-shadow-sm) !important;
}

#screen-map :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip) {
    border-color: var(--frx-border) !important;
}

/* Onboarding is also a floating panel and follows the same modal geometry. */
.introjs-tooltip {
    border: 1px solid var(--frx-border-strong) !important;
    border-radius: var(--frx-radius-lg) !important;
    box-shadow: var(--frx-shadow-lg) !important;
}

/* Reels media stays edge-to-edge. Only loading feedback and controls use the
   boundary system; the thumbnails themselves are not boxed. */
#discover-grid > div {
    border: 0 !important;
    box-shadow: none !important;
}

#reels-pull-spinner,
#discover-loading > div {
    border-color: var(--frx-border-strong) !important;
    border-top-color: var(--frx-brand-500) !important;
}

/* Map marker system -------------------------------------------------------
   One restrained component family is shared by category pins, meetups,
   clusters and the add-location category selector. The 44px host remains the
   hit target while the visible shield stays compact on dense map views. */
.leaflet-marker-icon.fr-marker-host,
.leaflet-marker-icon.fr-cluster-host {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.leaflet-marker-icon.fr-marker-host {
    display: grid !important;
    place-items: center;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer;
    touch-action: manipulation;
}

.fr-map-marker {
    --fr-marker-fill: var(--frx-brand-600);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #ffffff;
    transform-origin: 50% 88%;
    transition: transform 180ms ease-out;
}

.fr-map-marker--service { --fr-marker-fill: #334155; }
.fr-map-marker--danger { --fr-marker-fill: #b91c1c; }
.fr-map-marker--event { --fr-marker-fill: #075985; }

.fr-map-marker__shield {
    display: grid;
    place-items: center;
    width: 30px;
    height: 32px;
    padding-bottom: 2px;
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 10px 10px 12px 12px;
    background: var(--fr-marker-fill);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.78), 0 2px 5px rgba(15, 23, 42, 0.28);
}

.fr-marker-glyph {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.fr-map-marker.is-selected {
    transform: scale(1.08);
}

.fr-map-marker.is-selected .fr-map-marker__shield {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.96), 0 0 0 4px rgba(56, 189, 248, 0.9), 0 4px 9px rgba(15, 23, 42, 0.32);
}

.leaflet-marker-icon.fr-marker-host:focus-visible {
    outline: 3px solid var(--frx-focus) !important;
    outline-offset: 2px !important;
    border-radius: 14px;
}

.fr-map-cluster {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: var(--frx-brand-600);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.76), 0 2px 6px rgba(15, 23, 42, 0.28);
    color: #ffffff;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    line-height: 1;
}

.fr-cluster-host:focus-visible .fr-map-cluster {
    outline: 3px solid var(--frx-focus);
    outline-offset: 2px;
}

.fr-live-user-marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid var(--frx-success);
    border-radius: 50%;
    background: #0f172a;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(15, 23, 42, 0.28);
    transition: transform 180ms ease-out;
}

.fr-live-user-marker img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.fr-live-user-marker__status {
    position: absolute;
    right: -1px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--frx-success);
}

.fr-live-user-marker__premium {
    position: absolute;
    top: -2px;
    right: 1px;
    width: 7px;
    height: 7px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: var(--frx-brand-400);
}

.fr-live-user-marker.is-selected {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(56, 189, 248, 0.9), 0 3px 8px rgba(15, 23, 42, 0.3);
}

.fr-my-location {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

.fr-my-location__accuracy {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(56, 189, 248, 0.82);
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.14);
}

.fr-my-location__dot {
    position: relative;
    width: 12px;
    height: 12px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--frx-brand-500);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.7);
}

.fr-map-marker-label {
    padding: 5px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28) !important;
    color: #ffffff !important;
    font-family: "Outfit", system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    white-space: nowrap;
}

.fr-map-marker-label::before { display: none !important; }

.fr-location-proof-hint {
    margin: -10px 0 14px;
    padding: 9px 11px;
    border: 1px solid var(--frx-border);
    border-radius: var(--frx-radius-sm);
    background: var(--frx-surface-soft);
    color: var(--frx-text-muted);
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.35;
}

.fr-marker-verification {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 12px;
    padding: 6px 8px 6px 10px;
    gap: 8px;
    border: 1px solid var(--frx-border);
    border-radius: var(--frx-radius-sm);
    background: var(--frx-surface-soft);
}

.fr-marker-verification__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--frx-warning);
}

.fr-marker-verification.is-attested .fr-marker-verification__dot {
    background: var(--frx-brand-500);
}

.fr-marker-verification.is-unverified {
    border-color: var(--frx-warning) !important;
}

.fr-marker-verification.is-unverified .fr-marker-verification__button {
    min-height: 36px;
    border-color: var(--frx-warning) !important;
    background: var(--frx-surface-raised) !important;
    color: var(--frx-text) !important;
}

.fr-marker-verification.is-verified .fr-marker-verification__dot {
    background: var(--frx-success);
}

.fr-marker-verification__text {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--frx-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}

.fr-marker-verification__button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid var(--frx-border-strong) !important;
    border-radius: 9px;
    background: transparent !important;
    color: var(--frx-text) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.fr-marker-verification__button:is(:hover, :focus-visible) {
    border-color: var(--frx-focus) !important;
}

/* Category picker -------------------------------------------------------- */
#category-select-modal {
    z-index: 10020 !important;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
}

#category-select-modal .fr-category-sheet {
    max-height: min(88dvh, 760px) !important;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain;
    background: var(--frx-surface-raised) !important;
    color: var(--frx-text) !important;
    animation: none !important;
    transform: none !important;
}

#category-select-modal :is(h2, p, span) { color: inherit; }

.fr-category-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--frx-border);
    border-radius: 50%;
    background: var(--frx-surface-soft);
    color: var(--frx-text);
}

.fr-category-close svg,
.fr-category-search-wrap > svg {
    width: 20px;
    height: 20px;
}

.fr-category-search-label {
    display: block;
    margin: 0 0 6px 2px;
    color: var(--frx-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.fr-category-search-wrap {
    position: relative;
    margin-bottom: 18px;
}

.fr-category-search-wrap > svg {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: var(--frx-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

#marker-category-search {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px 10px 42px;
    border: 1px solid var(--frx-border-strong) !important;
    border-radius: var(--frx-radius-md) !important;
    background: var(--frx-surface-soft) !important;
    color: var(--frx-text) !important;
    font-size: 1rem;
}

#marker-category-search::placeholder { color: var(--frx-text-faint) !important; opacity: 0.68; }

#category-select-modal .fr-category-heading {
    margin: 18px 2px 8px !important;
    padding: 0 !important;
    color: var(--frx-text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
}

#category-select-modal .fr-category-heading > svg { display: none !important; }

#category-select-modal .fr-category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
}

#category-select-modal .fr-category-grid[hidden],
#category-select-modal .fr-category-heading[hidden],
#category-select-modal .fr-category-option[hidden] { display: none !important; }

#category-select-modal .fr-category-option {
    display: flex !important;
    min-width: 0;
    min-height: 82px;
    padding: 10px 7px !important;
    gap: 7px !important;
    border: 1px solid var(--frx-border) !important;
    border-radius: var(--frx-radius-md) !important;
    background: var(--frx-surface-soft) !important;
    box-shadow: none !important;
    color: var(--frx-text) !important;
    cursor: pointer;
    touch-action: manipulation;
    transform: none !important;
    transition: border-color 160ms ease-out, background-color 160ms ease-out !important;
}

#category-select-modal .fr-category-option:is(:hover, :focus-visible) {
    border-color: var(--frx-border-strong) !important;
    background: var(--frx-surface) !important;
}

#category-select-modal .fr-category-option:is(.is-selected, [aria-pressed="true"]) {
    border-color: var(--frx-brand-500) !important;
    background: var(--frx-brand-soft) !important;
    color: var(--frx-brand-400) !important;
}

.fr-category-option__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--frx-brand-500) !important;
}

.fr-category-glyph { width: 24px; height: 24px; }

#category-select-modal .fr-category-option__label {
    max-width: 100%;
    color: inherit !important;
    font-size: 0.75rem !important;
    font-weight: 650 !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
}

.fr-category-empty {
    padding: 24px 12px;
    color: var(--frx-text-muted) !important;
    font-size: 0.875rem;
    text-align: center;
}

#category-select-modal .fr-category-cancel {
    min-height: 48px;
    margin-top: 18px;
    border: 1px solid var(--frx-border-strong) !important;
    background: var(--frx-surface-soft) !important;
    color: var(--frx-text) !important;
}

/* Marker and meetup detail sheets use the same category glyph and one clear
   primary action. Secondary actions stay neutral in both themes. */
#ms-category {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--frx-brand-soft) !important;
    color: var(--frx-brand-400) !important;
}

#ms-category .fr-category-glyph { width: 15px; height: 15px; }

.fr-sheet-category-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--frx-border-strong);
    border-radius: 11px;
    background: var(--frx-brand-soft);
    color: var(--frx-brand-400) !important;
}

.fr-sheet-category-icon svg { width: 20px; height: 20px; }

#marker-sheet :is(#ms-btn-like, #ms-btn-dislike, button[title="Paylaş"]) {
    border-color: var(--frx-border) !important;
    background: var(--frx-surface-soft) !important;
    color: var(--frx-text-muted) !important;
}

#marker-sheet #ms-btn-directions,
#event-sheet #btn-directions {
    border-color: var(--frx-brand-500) !important;
    background: var(--frx-brand-600) !important;
    color: #ffffff !important;
}

@media (min-width: 480px) {
    #category-select-modal .fr-category-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    #category-select-modal .fr-category-sheet { max-height: 96dvh !important; }
    #category-select-modal .fr-category-option { min-height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .fr-map-marker,
    .fr-live-user-marker,
    #category-select-modal .fr-category-option { transition: none !important; }
}