/* Felhasználónként választható, teljes oldalas színvilágok. */ html[data-skin="dark"] { color-scheme: dark; --bg: #000000; --surface: #0b0b0b; --surface2: #121212; --surface-subtle: #080808; --surface-hover: #1a1a1a; --control-bg: #0a0a0a; --control-focus: #050505; --border: #222222; --border-soft: #1e1e1e; --border-medium: #2f2f2f; --primary: #737373; --primary-hover: #929292; --color-primary: #737373; --color-primary-strong: #929292; --text: #ededed; --muted: #858585; --color-text: #ededed; --color-muted: #858585; --color-link: #d2d2d2; --color-link-hover: #ffffff; --nav-bg: #000000; --on-primary: #ffffff; --focus-ring: rgba(255,255,255,.10); --selection-bg: rgba(255,255,255,.20); --page-glow: rgba(255,255,255,.025); --scroll-track: #080808; --scroll-thumb: #3b3b3b; --scroll-thumb-hover: #565656; --code-color: #d3d3d3; } html[data-skin="light"] { color-scheme: light; --bg: #f6f3ed; --surface: #fffdf9; --surface2: #ece7de; --surface-subtle: #f2eee7; --surface-hover: #e2dcd2; --control-bg: #fffdfa; --control-focus: #ffffff; --border: #d7d0c5; --border-soft: #e2dcd2; --border-medium: #c8c0b4; --primary: #356c72; --primary-hover: #28575c; --color-primary: #356c72; --color-primary-strong: #28575c; --text: #252a2b; --muted: #677174; --color-text: #252a2b; --color-muted: #677174; --color-link: #315f66; --color-link-hover: #173e43; --nav-bg: #fffdf9; --on-primary: #ffffff; --focus-ring: rgba(53,108,114,.18); --selection-bg: rgba(53,108,114,.24); --page-glow: rgba(53,108,114,.08); --scroll-track: #ece7de; --scroll-thumb: #aaa195; --scroll-thumb-hover: #81786d; --code-color: #28575c; } html[data-skin="green"] { color-scheme: dark; --bg: #07130e; --surface: #0c1b14; --surface2: #12271d; --surface-subtle: #0a1711; --surface-hover: #193527; --control-bg: #0a1a13; --control-focus: #08140f; --border: #1d3b2d; --border-soft: #173225; --border-medium: #28513d; --primary: #45a978; --primary-hover: #58bd8b; --color-primary: #45a978; --color-primary-strong: #58bd8b; --text: #e7f2eb; --muted: #86a494; --color-text: #e7f2eb; --color-muted: #86a494; --color-link: #a9d8bc; --color-link-hover: #dcf8e7; --nav-bg: #08150f; --on-primary: #06150d; --focus-ring: rgba(69,169,120,.20); --selection-bg: rgba(69,169,120,.30); --page-glow: rgba(69,169,120,.10); --scroll-track: #0a1711; --scroll-thumb: #315d47; --scroll-thumb-hover: #477b60; --code-color: #9ed8b7; } html[data-skin="blue"] { color-scheme: dark; --bg: #071321; --surface: #0b1b2c; --surface2: #10263d; --surface-subtle: #091827; --surface-hover: #18334f; --control-bg: #091a2b; --control-focus: #071522; --border: #1d3c5d; --border-soft: #17334f; --border-medium: #285176; --primary: #4e91d2; --primary-hover: #66a6e2; --color-primary: #4e91d2; --color-primary-strong: #66a6e2; --text: #e8f0f8; --muted: #829eb9; --color-text: #e8f0f8; --color-muted: #829eb9; --color-link: #aecdea; --color-link-hover: #e1f1ff; --nav-bg: #081624; --on-primary: #061321; --focus-ring: rgba(78,145,210,.22); --selection-bg: rgba(78,145,210,.32); --page-glow: rgba(78,145,210,.11); --scroll-track: #091827; --scroll-thumb: #315777; --scroll-thumb-hover: #47769d; --code-color: #a8d2f5; } html[data-skin="brown"] { color-scheme: dark; --bg: #160e09; --surface: #211710; --surface2: #2d2017; --surface-subtle: #1b120d; --surface-hover: #3a291d; --control-bg: #1c130e; --control-focus: #150e0a; --border: #493426; --border-soft: #3a2a20; --border-medium: #604635; --primary: #bd8558; --primary-hover: #d19a6c; --color-primary: #bd8558; --color-primary-strong: #d19a6c; --text: #f2eae3; --muted: #ad9584; --color-text: #f2eae3; --color-muted: #ad9584; --color-link: #dfb893; --color-link-hover: #fff0df; --nav-bg: #180f0a; --on-primary: #201108; --focus-ring: rgba(189,133,88,.22); --selection-bg: rgba(189,133,88,.31); --page-glow: rgba(189,133,88,.10); --scroll-track: #1b120d; --scroll-thumb: #674a35; --scroll-thumb-hover: #89664b; --code-color: #e3b991; } html[data-skin="red"] { color-scheme: dark; --bg: #17090c; --surface: #221014; --surface2: #30171d; --surface-subtle: #1c0c10; --surface-hover: #3d2027; --control-bg: #1d0d11; --control-focus: #16090c; --border: #4c2931; --border-soft: #3d2027; --border-medium: #633540; --primary: #cc6572; --primary-hover: #df7b87; --color-primary: #cc6572; --color-primary-strong: #df7b87; --text: #f5e9eb; --muted: #b28b92; --color-text: #f5e9eb; --color-muted: #b28b92; --color-link: #e6a5ad; --color-link-hover: #ffe5e8; --nav-bg: #190a0e; --on-primary: #26090e; --focus-ring: rgba(204,101,114,.22); --selection-bg: rgba(204,101,114,.31); --page-glow: rgba(204,101,114,.10); --scroll-track: #1c0c10; --scroll-thumb: #6b3943; --scroll-thumb-hover: #914d5a; --code-color: #ebb2b9; } html[data-skin="purple"] { color-scheme: dark; --bg: #130b19; --surface: #1d1226; --surface2: #291936; --surface-subtle: #180e20; --surface-hover: #362247; --control-bg: #190f21; --control-focus: #120a18; --border: #422d53; --border-soft: #362342; --border-medium: #59406c; --primary: #a470bd; --primary-hover: #b887cf; --color-primary: #a470bd; --color-primary-strong: #b887cf; --text: #f1eaf4; --muted: #a790b2; --color-text: #f1eaf4; --color-muted: #a790b2; --color-link: #cfaddc; --color-link-hover: #f5e4fb; --nav-bg: #150c1c; --on-primary: #1d0d25; --focus-ring: rgba(164,112,189,.22); --selection-bg: rgba(164,112,189,.31); --page-glow: rgba(164,112,189,.11); --scroll-track: #180e20; --scroll-thumb: #5d426d; --scroll-thumb-hover: #7c5990; --code-color: #d8b5e5; } html[data-skin] body { color: var(--color-text); background: radial-gradient(circle at 82% -10%, var(--page-glow), transparent 34rem), var(--bg); } html[data-skin] { --accent-soft: color-mix(in srgb, var(--color-primary) 13%, var(--surface)); --accent-raised: color-mix(in srgb, var(--color-primary) 21%, var(--surface2)); --accent-border: color-mix(in srgb, var(--color-primary) 48%, var(--border-medium)); --theme-shadow: color-mix(in srgb, var(--bg) 72%, transparent); --status-success: #3da66c; --status-danger: #d45b68; --status-warning: #d69a35; --status-info: #4b9fc8; --on-success: #ffffff; --on-danger: #ffffff; --on-warning: #241805; --on-info: #07141a; --success-soft: color-mix(in srgb, var(--status-success) 15%, var(--surface)); --danger-soft: color-mix(in srgb, var(--status-danger) 15%, var(--surface)); --warning-soft: color-mix(in srgb, var(--status-warning) 16%, var(--surface)); --info-soft: color-mix(in srgb, var(--status-info) 15%, var(--surface)); --success-border: color-mix(in srgb, var(--status-success) 48%, var(--border-medium)); --danger-border: color-mix(in srgb, var(--status-danger) 48%, var(--border-medium)); --warning-border: color-mix(in srgb, var(--status-warning) 50%, var(--border-medium)); --info-border: color-mix(in srgb, var(--status-info) 48%, var(--border-medium)); } html[data-skin] ::selection { color: var(--on-primary); background: var(--selection-bg); } html[data-skin] { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); } html[data-skin]::-webkit-scrollbar { width: 11px; height: 11px; } html[data-skin]::-webkit-scrollbar-track { background: var(--scroll-track); } html[data-skin]::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--scroll-track); border-radius: 999px; } html[data-skin]::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } html[data-skin] .navbar.bg-dark, html[data-skin] .app-navbar { background: var(--nav-bg) !important; border-color: var(--border-medium); } html[data-skin] .card, html[data-skin] .list-group-item { background: var(--surface); border-color: var(--border-soft); color: var(--color-text); } html[data-skin] .card-header, html[data-skin] .input-group-text { background: var(--surface2); border-color: var(--border-soft); color: var(--color-text); } html[data-skin] .card .card-header { color: var(--color-text) !important; background: var(--surface2) !important; border-color: var(--border-soft); } html[data-skin] .app-nav-icon, html[data-skin] .app-mobile-actions .btn, html[data-skin] .navbar-toggler, html[data-skin] .app-nav-mobile-user-card, html[data-skin] .app-scroll-donate { background: var(--surface2); border-color: var(--border-medium); color: var(--color-text); } html[data-skin] .app-nav-mobile-avatar, html[data-skin] .app-nav-user-summary .app-nav-mobile-avatar { background: var(--surface-hover); border-color: var(--border-medium); color: var(--color-text); } html[data-skin] .app-health-badge { color: var(--color-text); background: var(--surface2); border-color: var(--border-medium); } html[data-skin] .app-health-badge:hover, html[data-skin] .app-health-badge:focus { color: var(--color-text); background: var(--surface-hover); border-color: var(--border-medium); } html[data-skin] .navbar .nav-link, html[data-skin] .navbar .navbar-brand, html[data-skin] .app-nav-mobile-user-copy strong { color: var(--color-text) !important; } html[data-skin] .app-navbar .app-nav-link:hover, html[data-skin] .app-navbar .app-nav-link:focus, html[data-skin] .app-navbar .app-nav-link.active, html[data-skin] .app-nav-icon:hover, html[data-skin] .settings-quick-actions a:hover { background: var(--surface-hover); border-color: var(--border-medium); color: var(--color-text) !important; } html[data-skin] .app-navbar .app-nav-link:hover i, html[data-skin] .app-navbar .app-nav-link:focus i, html[data-skin] .app-navbar .app-nav-link.active i { color: var(--color-text); } html[data-skin] .form-control, html[data-skin] .form-select, html[data-skin] .custom-select, html[data-skin] textarea, html[data-skin] select { color: var(--color-text); background: var(--control-bg); border-color: var(--border-soft); } html[data-skin] .form-control:focus, html[data-skin] .form-select:focus, html[data-skin] textarea:focus, html[data-skin] select:focus { color: var(--color-text); background: var(--control-focus); border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; } html[data-skin] select option { color: var(--color-text); background: var(--surface2); } html[data-skin] .form-control:disabled, html[data-skin] .form-control[readonly] { color: var(--color-muted); background: var(--surface2); } html[data-skin] .form-check-input { background-color: var(--control-bg); border-color: var(--border-medium); } html[data-skin] .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } html[data-skin] .form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); } html[data-skin] .form-control.is-valid, html[data-skin] .form-select.is-valid { border-color: var(--status-success); } html[data-skin] .form-control.is-invalid, html[data-skin] .form-select.is-invalid { border-color: var(--status-danger); } html[data-skin] .valid-feedback { color: var(--status-success); } html[data-skin] .invalid-feedback { color: var(--status-danger); } html[data-skin] .form-range::-webkit-slider-thumb { background: var(--color-primary); } html[data-skin] .form-range::-moz-range-thumb { background: var(--color-primary); border-color: var(--color-primary); } html[data-skin] .btn-primary { color: var(--on-primary); background: var(--color-primary); border-color: var(--color-primary); } html[data-skin] .btn-primary:hover, html[data-skin] .btn-primary:focus { color: var(--on-primary); background: var(--color-primary-strong); border-color: var(--color-primary-strong); } html[data-skin] .btn-secondary, html[data-skin] .btn-outline-secondary { color: var(--color-text); background: var(--surface2); border-color: var(--border-medium); } html[data-skin] .btn-secondary:hover, html[data-skin] .btn-outline-secondary:hover { color: var(--color-text); background: var(--surface-hover); border-color: var(--border-medium); } html[data-skin] .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-strong); --bs-btn-hover-border-color: var(--color-primary-strong); --bs-btn-active-bg: var(--color-primary-strong); --bs-btn-active-border-color: var(--color-primary-strong); --bs-btn-color: var(--on-primary); --bs-btn-hover-color: var(--on-primary); --bs-btn-active-color: var(--on-primary); } html[data-skin] .btn-secondary, html[data-skin] .btn-dark { --bs-btn-bg: var(--surface2); --bs-btn-border-color: var(--border-medium); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-border-color: var(--accent-border); --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--color-primary); --bs-btn-color: var(--color-text); --bs-btn-hover-color: var(--color-text); --bs-btn-active-color: var(--color-text); } html[data-skin] .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--accent-border); --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-hover-color: var(--color-text); } html[data-skin] .btn-success { --bs-btn-color: var(--on-success); --bs-btn-bg: var(--status-success); --bs-btn-border-color: var(--status-success); --bs-btn-hover-color: var(--on-success); --bs-btn-hover-bg: color-mix(in srgb, var(--status-success) 82%, black); --bs-btn-hover-border-color: var(--status-success); --bs-btn-active-color: var(--on-success); --bs-btn-active-bg: color-mix(in srgb, var(--status-success) 72%, black); --bs-btn-active-border-color: var(--status-success); } html[data-skin] .btn-danger { --bs-btn-color: var(--on-danger); --bs-btn-bg: var(--status-danger); --bs-btn-border-color: var(--status-danger); --bs-btn-hover-color: var(--on-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--status-danger) 82%, black); --bs-btn-hover-border-color: var(--status-danger); --bs-btn-active-color: var(--on-danger); --bs-btn-active-bg: color-mix(in srgb, var(--status-danger) 72%, black); --bs-btn-active-border-color: var(--status-danger); } html[data-skin] .btn-warning { --bs-btn-color: var(--on-warning); --bs-btn-bg: var(--status-warning); --bs-btn-border-color: var(--status-warning); --bs-btn-hover-color: var(--on-warning); --bs-btn-hover-bg: color-mix(in srgb, var(--status-warning) 84%, black); --bs-btn-hover-border-color: var(--status-warning); --bs-btn-active-color: var(--on-warning); --bs-btn-active-bg: color-mix(in srgb, var(--status-warning) 74%, black); --bs-btn-active-border-color: var(--status-warning); } html[data-skin] .btn-info { --bs-btn-color: var(--on-info); --bs-btn-bg: var(--status-info); --bs-btn-border-color: var(--status-info); --bs-btn-hover-color: var(--on-info); --bs-btn-hover-bg: color-mix(in srgb, var(--status-info) 84%, black); --bs-btn-hover-border-color: var(--status-info); --bs-btn-active-color: var(--on-info); --bs-btn-active-bg: color-mix(in srgb, var(--status-info) 74%, black); --bs-btn-active-border-color: var(--status-info); } html[data-skin] .btn-outline-success { --bs-btn-color: var(--status-success); --bs-btn-border-color: var(--success-border); --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--success-soft); --bs-btn-hover-border-color: var(--status-success); } html[data-skin] .btn-outline-danger { --bs-btn-color: var(--status-danger); --bs-btn-border-color: var(--danger-border); --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-border-color: var(--status-danger); } html[data-skin] .btn-outline-warning { --bs-btn-color: var(--status-warning); --bs-btn-border-color: var(--warning-border); --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--warning-soft); --bs-btn-hover-border-color: var(--status-warning); } html[data-skin] .btn-outline-info { --bs-btn-color: var(--status-info); --bs-btn-border-color: var(--info-border); --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--info-soft); --bs-btn-hover-border-color: var(--status-info); } html[data-skin] .btn-outline-dark, html[data-skin] .btn-light, html[data-skin] .btn-outline-light { --bs-btn-color: var(--color-text); --bs-btn-border-color: var(--border-medium); --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--surface-hover); --bs-btn-hover-border-color: var(--accent-border); } html[data-skin] .btn-link { color: var(--color-link); } html[data-skin] .btn-link:hover { color: var(--color-link-hover); } html[data-skin] .btn:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); } html[data-skin] .btn:disabled, html[data-skin] .btn.disabled { filter: saturate(.55); opacity: .58; } html[data-skin] .btn-outline-light { color: var(--color-text); border-color: var(--border-medium); } html[data-skin] .btn-outline-light:hover { color: var(--color-text); background: var(--surface-hover); border-color: var(--border-medium); } html[data-skin] .badge-primary, html[data-skin] .bg-primary { color: var(--on-primary) !important; background: var(--color-primary) !important; border-color: var(--color-primary); } html[data-skin] .badge-secondary, html[data-skin] .bg-secondary, html[data-skin] .badge-dark, html[data-skin] .bg-dark { color: var(--color-text) !important; background: var(--accent-soft) !important; border-color: var(--accent-border); } html[data-skin] .badge-success, html[data-skin] .bg-success { color: var(--on-success) !important; background: var(--status-success) !important; border-color: var(--status-success); } html[data-skin] .badge-danger, html[data-skin] .bg-danger { color: var(--on-danger) !important; background: var(--status-danger) !important; border-color: var(--status-danger); } html[data-skin] .badge-warning, html[data-skin] .bg-warning { color: var(--on-warning) !important; background: var(--status-warning) !important; border-color: var(--status-warning); } html[data-skin] .badge-info, html[data-skin] .bg-info { color: var(--on-info) !important; background: var(--status-info) !important; border-color: var(--status-info); } html[data-skin] .badge-light, html[data-skin] .bg-light { color: var(--color-text) !important; background: var(--surface-hover) !important; border-color: var(--border-medium); } html[data-skin] .alert { color: var(--color-text); box-shadow: inset 3px 0 0 currentColor; } html[data-skin] .alert-primary { --bs-alert-color: var(--color-text); --bs-alert-bg: var(--accent-soft); --bs-alert-border-color: var(--accent-border); color: var(--color-text); background: var(--accent-soft); border-color: var(--accent-border); box-shadow: inset 3px 0 0 var(--color-primary); } html[data-skin] .alert-secondary, html[data-skin] .alert-light, html[data-skin] .alert-dark { --bs-alert-color: var(--color-text); --bs-alert-bg: var(--surface2); --bs-alert-border-color: var(--border-medium); color: var(--color-text); background: var(--surface2); border-color: var(--border-medium); } html[data-skin] .alert-success { --bs-alert-color: var(--color-text); --bs-alert-bg: var(--success-soft); --bs-alert-border-color: var(--success-border); color: var(--color-text); background: var(--success-soft); border-color: var(--success-border); box-shadow: inset 3px 0 0 var(--status-success); } html[data-skin] .alert-danger { --bs-alert-color: var(--color-text); --bs-alert-bg: var(--danger-soft); --bs-alert-border-color: var(--danger-border); color: var(--color-text); background: var(--danger-soft); border-color: var(--danger-border); box-shadow: inset 3px 0 0 var(--status-danger); } html[data-skin] .alert-warning { --bs-alert-color: var(--color-text); --bs-alert-bg: var(--warning-soft); --bs-alert-border-color: var(--warning-border); color: var(--color-text); background: var(--warning-soft); border-color: var(--warning-border); box-shadow: inset 3px 0 0 var(--status-warning); } html[data-skin] .alert-info { --bs-alert-color: var(--color-text); --bs-alert-bg: var(--info-soft); --bs-alert-border-color: var(--info-border); color: var(--color-text); background: var(--info-soft); border-color: var(--info-border); box-shadow: inset 3px 0 0 var(--status-info); } html[data-skin] .alert a, html[data-skin] .alert .alert-link { color: inherit; text-decoration-color: currentColor; } html[data-skin] .alert .btn-close { filter: none; opacity: .7; } html[data-skin] .dropdown-menu, html[data-skin] .modal-content, html[data-skin] .offcanvas, html[data-skin] .popover, html[data-skin] .toast { color: var(--color-text); background: var(--surface); border-color: var(--border-medium); } html[data-skin] .dropdown-item { color: var(--color-text); } html[data-skin] .dropdown-item:hover, html[data-skin] .dropdown-item:focus { color: var(--color-text); background: var(--surface-hover); } html[data-skin] .dropdown-item.active, html[data-skin] .dropdown-item:active { color: var(--on-primary); background: var(--color-primary); } html[data-skin] .dropdown-item.disabled { color: var(--color-muted); } html[data-skin] .dropdown-divider { border-color: var(--border-soft); } html[data-skin] .modal-header, html[data-skin] .modal-footer, html[data-skin] .offcanvas-header, html[data-skin] .toast-header { color: var(--color-text); background: var(--surface2); border-color: var(--border-soft); } html[data-skin] #kh-modal .modal-content { color: var(--color-text); background: var(--surface); border-color: var(--border-medium); } html[data-skin] #kh-modal .modal-header { color: var(--color-text); background: var(--surface2); border-color: var(--border-soft); } html[data-skin] #kh-modal .auth-modal-title, html[data-skin] #kh-modal .auth-input-label { color: var(--color-text); } html[data-skin] #kh-modal .auth-modal-subtitle { color: var(--color-muted); } html[data-skin] #kh-modal .auth-input-wrap .input-group-text, html[data-skin] #kh-modal .auth-input-wrap .form-control { color: var(--color-text); background: var(--control-bg); border-color: var(--border-soft); } html[data-skin] #kh-modal .btn-close { background-color: var(--danger-soft); border-color: var(--danger-border); } html[data-skin] #kh-modal .btn-close:hover { background-color: var(--surface-hover); border-color: var(--status-danger); } html[data-skin] .nav-tabs { border-color: var(--border-medium); } html[data-skin] .nav-tabs .nav-link { color: var(--color-muted); border-color: transparent; } html[data-skin] .nav-tabs .nav-link:hover { color: var(--color-text); background: var(--surface-hover); border-color: var(--border-soft); } html[data-skin] .nav-tabs .nav-link.active { color: var(--color-text); background: var(--accent-soft); border-color: var(--accent-border) var(--accent-border) var(--surface); } html[data-skin] .nav-pills .nav-link { color: var(--color-muted); } html[data-skin] .nav-pills .nav-link.active { color: var(--on-primary); background: var(--color-primary); } html[data-skin] .accordion-item, html[data-skin] .accordion-button { color: var(--color-text); background: var(--surface2); border-color: var(--border-soft); } html[data-skin] .accordion-button:not(.collapsed) { color: var(--color-text); background: var(--accent-soft); box-shadow: inset 0 -1px 0 var(--accent-border); } html[data-skin] .accordion-button:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); } html[data-skin] .accordion-button::after { filter: var(--accordion-icon-filter, invert(1) grayscale(1)); } html[data-skin="light"] { --accordion-icon-filter: none; } html[data-skin] .breadcrumb-item, html[data-skin] .breadcrumb-item.active, html[data-skin] .breadcrumb-item::before { color: var(--color-muted); } html[data-skin] .progress { background: var(--surface2); } html[data-skin] .progress-bar { color: var(--on-primary); background: var(--color-primary); } html[data-skin] code, html[data-skin] pre { color: var(--code-color); background: var(--surface2); } html[data-skin] .pagination .page-link { color: var(--color-text); background: var(--surface2); border-color: var(--border-soft); } html[data-skin] .pagination .page-link:hover { color: var(--color-text); background: var(--surface-hover); } html[data-skin] .pagination .page-item.active .page-link { color: var(--on-primary); background: var(--color-primary); border-color: var(--color-primary); } html[data-skin] .pagination .page-item.disabled .page-link { color: var(--color-muted); background: var(--surface-subtle); } html[data-skin] .list-group-item.active { color: var(--on-primary); background: var(--color-primary); border-color: var(--color-primary); } html[data-skin] .list-group-item.disabled { color: var(--color-muted); background: var(--surface-subtle); } html[data-skin] .table { --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-border-color: var(--border-soft); --bs-table-striped-bg: var(--surface-subtle); --bs-table-hover-bg: var(--surface-hover); } html[data-skin] .table thead th { color: var(--color-muted) !important; } html[data-skin] .table tbody tr, html[data-skin] .table tbody tr > td { background: var(--surface2) !important; color: var(--color-text) !important; } html[data-skin] .table tbody tr:hover, html[data-skin] .table tbody tr:hover > td { background: var(--surface-hover) !important; } html[data-skin] .table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--color-text); background: var(--surface-subtle) !important; } html[data-skin] .table-striped > tbody > tr:nth-of-type(odd):hover > * { background: var(--surface-hover) !important; } html[data-skin] hr { color: var(--border-medium); opacity: 1; } html[data-skin] :is( .header-support-callout, .settings-summary-grid > div, .settings-blocked-item, .profile-overview, .profile-overview-item, .profile-wall-item, .profile-wall-reply-item, .images-page .images-item-card, .images-page .images-item-preview, .image-detail-preview-wrap, .image-detail-meta-grid > div, .image-links-box, .image-rating, .comment-item, .gallery-page .gallery-overview-grid > div, .gallery-page .gallery-desc-box, .gallery-page .gallery-list-item, .messages-sidebar, .messages-thread-header, .messages-compose, .messages-bubble, .guest-chat-history-row, .guest-chat-join, .guest-chat-members, .guest-chat-compose, .guest-chat-message, .admincp-item, .admin-message-pair, .admin-message-item, .admin-sync-result, .health-summary-item, .health-group, .health-issue, .supporter-profile-privacy, .donate-buymeacoffee-help, .donate-buymeacoffee-form, .donate-support-notes > div, .donate-method-card, .image-proxy-result, .image-proxy-flow > div, .image-proxy-embed-grid > div ) { color: var(--color-text); background: var(--surface-subtle); border-color: var(--border-soft); } html[data-skin] :is( .profile-overview-item:hover, .guest-chat-history-list a.guest-chat-history-row:hover, .admincp-item:hover, .admin-message-pair:hover, .settings-quick-actions a:hover ) { color: var(--color-text); background: var(--surface-hover); border-color: var(--border-medium); } html[data-skin] .messages-thread { background: var(--control-focus); } html[data-skin] .messages-bubble.own, html[data-skin] .guest-chat-message.own { color: var(--color-text); background: var(--surface-hover); border-color: var(--color-primary); } /* A régi szürke komponensek minden palettán az adott skin tónusait öröklik. */ html[data-skin] :is( .admin-ranks-page > .card, .admin-permissions-page > .card, .admin-schedule-page > .card, .admin-ranks-section, .admin-permissions-row, .schedule-task-card, .profile-action-card, .profile-permission-panel, .admin-sync-panel, .profile-moderation-form, .profile-moderation-section, .profile-moderation-form > .row, .profile-moderation-form > .mb-3, .profile-wall-composer, .profile-wall-image-picker, .profile-wall-edit-form, .moderator-stats-filter, .moderator-summary-grid > div, .moderator-stats-card, .donate-benefits-grid > div, .admin-env-summary, .admin-env-grid > section, .users-page .users-quicklink-item, .reports-admin-page .reports-admin-table-wrap, .comments-admin-page .comments-admin-table-wrap, .messages-user-results, .messages-image-picker, .guest-chat-image-picker, .image-proxy-code-list .accordion-item, .image-proxy-code-list .accordion-body, .admin-sync-result pre, .schedule-task-output ) { color: var(--color-text); background: linear-gradient(145deg, var(--surface2), var(--surface-subtle)); border-color: var(--border-medium); box-shadow: 0 12px 30px var(--theme-shadow); } html[data-skin] :is( .admin-ranks-section-head > span, .profile-action-icon, .admin-sync-panel-head > span, .settings-profile-editor-head > span, .moderator-summary-grid i, .moderator-position, .profile-avatar-placeholder, .profile-rank-pill, .schedule-status, .profile-overview-status ) { color: var(--color-link); background: var(--accent-soft); border-color: var(--accent-border); } html[data-skin] :is( .admin-ranks-section-head p, .profile-action-card-head p, .admin-sync-panel-head p, .schedule-task-meta, .moderator-action-label, .moderator-summary-grid span, .moderator-action-details, .users-page .users-search-hint, .users-page .users-letter-label, .users-page .users-quicklinks-hint ) { color: var(--color-muted); } html[data-skin] .admin-permissions-check { color: var(--color-muted); background: var(--surface2); border-color: var(--border-medium); } html[data-skin] .admin-permissions-check:has(input:checked) { color: var(--color-text); background: var(--accent-raised); border-color: var(--color-primary); } html[data-skin] .admin-ranks-permissions-link a { color: var(--color-link); background: var(--accent-soft); border-color: var(--accent-border); } html[data-skin] .admin-ranks-permissions-link a:hover { color: var(--color-text); background: var(--accent-raised); border-color: var(--color-primary); } html[data-skin] .moderator-stats-hero { color: var(--color-text); background: radial-gradient(circle at 88% 18%, var(--page-glow), transparent 30%), linear-gradient(135deg, var(--surface2), var(--surface-subtle) 68%); border-color: var(--accent-border); } html[data-skin] .moderator-stats-hero > i, html[data-skin] .moderator-stats-eyebrow, html[data-skin] .moderator-card-head > strong { color: var(--color-link); } html[data-skin] .moderator-period-chip { color: var(--color-muted); background: var(--surface2); border-color: var(--border-medium); } html[data-skin] .moderator-period-chip:hover, html[data-skin] .moderator-period-chip.active { color: var(--color-text); background: var(--accent-raised); border-color: var(--color-primary); } html[data-skin] :is(.profile-identity-head h4, .profile-wall-item-head a, .profile-wall-topic-title) { color: var(--color-text); } html[data-skin] .profile-wall-item-body { color: var(--color-text); } html[data-skin] .profile-wall-composer textarea { background: var(--control-bg); } html[data-skin] .profile-wall-item-image-link { background: var(--surface-subtle); border-color: var(--border-medium); } html[data-skin] .profile-wall-item-image-link span { color: var(--color-muted); } html[data-skin] .profile-action-card::before, html[data-skin] .profile-action-card--support::before, html[data-skin] .profile-action-card--ip::before { background: var(--color-primary); } html[data-skin] .users-page .users-quicklink-item:hover { color: var(--color-text); background: var(--accent-soft); border-color: var(--accent-border); } html[data-skin] .image-proxy-code-list .accordion-button { color: var(--color-text); background: var(--surface2); } html[data-skin] :is(.messages-image-choice, .guest-chat-image-choice, .profile-wall-image-choice, .image-proxy-preview) { background: var(--control-focus); border-color: var(--border-soft); } html[data-skin] .settings-api-snippet-toast { color: var(--color-text); background: var(--success-soft); border-color: var(--success-border); } html[data-skin] .settings-api-snippet-toast.is-error { color: var(--color-text); background: var(--danger-soft); border-color: var(--danger-border); } html[data-skin] #image_input_overlay { color: var(--color-muted); background: linear-gradient(135deg, var(--control-bg), var(--surface-subtle)); border-color: var(--border-medium); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-soft) 55%, transparent); transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } html[data-skin] #image_input_overlay i { margin-right: .55rem; color: var(--color-primary); font-size: 1.3rem; } html[data-skin] #image_dropzone:hover #image_input_overlay { color: var(--color-text); background: var(--accent-soft); border-color: var(--accent-border); } html[data-skin].dragging #image_dropzone #image_input_overlay { color: var(--color-link-hover); background: var(--accent-raised); border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 4px var(--focus-ring); } html[data-skin="light"] .text-white:not(.btn):not(.badge) { color: var(--color-text) !important; } html[data-skin="light"] .btn-close { filter: none; } /* A világos változat finomabb mélysége és visszafogott, meleg semlegesei. */ html[data-skin="light"] .app-navbar { box-shadow: 0 10px 30px rgba(72, 62, 49, .09); } html[data-skin="light"] .card { box-shadow: 0 2px 9px rgba(72, 62, 49, .045); } html[data-skin="light"] .app-navbar .app-nav-link { color: #606a6b !important; } html[data-skin="light"] .app-navbar .app-nav-link i { color: #788181; } html[data-skin="light"] .app-navbar .app-nav-link:hover, html[data-skin="light"] .app-navbar .app-nav-link:focus { color: var(--color-text) !important; background: #eee9e1; border-color: #d8d0c5; } html[data-skin="light"] .app-navbar .app-nav-link.active { color: #193f43 !important; background: #e4eeeb; border-color: #b9cfca; box-shadow: inset 3px 0 0 var(--color-primary); } html[data-skin="light"] .app-navbar .app-nav-link:hover i, html[data-skin="light"] .app-navbar .app-nav-link:focus i, html[data-skin="light"] .app-navbar .app-nav-link.active i { color: var(--color-primary); } html[data-skin="light"] .app-health-badge.is-ok { background: #e7f2eb; border-color: #b9d5c2; } html[data-skin="light"] .app-health-badge.is-ok:hover, html[data-skin="light"] .app-health-badge.is-ok:focus { background: #dcece2; border-color: #9fc7ac; } html[data-skin="light"] .app-health-badge.is-ok > i { color: #2d8d5b; } html[data-skin="light"] .header-support-callout { background: #f3efe8; border-color: #ddd5ca; } html[data-skin="light"] .header-support-callout:hover { color: var(--color-text); background: #eee8df; border-color: #ccc1b3; } html[data-skin="light"] .alert-success { color: #214d31; background: #e3f1e6; border-color: #abd0b5; } html[data-skin="light"] .alert-primary { color: #214e53; background: #e4efee; border-color: #b6cecb; } html[data-skin="light"] .form-control[readonly] { color: #657072; background: #eee9e1; border-color: #dbd3c8; } html[data-skin="light"] .skin-choice:has(input:checked) { background: #edf4f2; } html[data-skin="light"] .skin-choice-check { background: #faf8f4; } html[data-skin="light"] .skin-choice:has(input:checked) .skin-choice-check { background: var(--color-primary); } /* A navbar saját scrollja ugyanazt a dizájnt követi minden skinben. */ html[data-skin] .app-navbar, html[data-skin] .app-navbar .navbar-collapse { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); } html[data-skin] .app-navbar::-webkit-scrollbar, html[data-skin] .app-navbar .navbar-collapse::-webkit-scrollbar { width: 8px; } html[data-skin] .app-navbar::-webkit-scrollbar-track, html[data-skin] .app-navbar .navbar-collapse::-webkit-scrollbar-track { margin: 8px 0; background: var(--scroll-track); border-radius: 999px; } html[data-skin] .app-navbar::-webkit-scrollbar-thumb, html[data-skin] .app-navbar .navbar-collapse::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 999px; } html[data-skin] .app-navbar::-webkit-scrollbar-thumb:hover, html[data-skin] .app-navbar .navbar-collapse::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } /* Komponensszintű semleges felületek: a régi fix fekete/szürke értékeket a skin írja felül. */ html[data-skin] :is( .settings-page .settings-overview .card, .settings-summary-grid > div, .settings-quick-actions a, .settings-profile-editor, .settings-profile-editor-section, .settings-media-visibility-grid > label, .ip-bans-page .ip-bans-filter, .settings-api-page .settings-api-list-item, .users-page .users-search-form .form-control, .users-page .users-letter-filter, .users-page .users-quicklink-item, .images-page .images-search-form .form-select, .images-page .images-check-wide, .images-page .images-toggle-all-uploaders, .images-page .images-item-card, .images-page .images-item-preview, .images-page .images-item-actions a, .gallery-page .gallery-overview-grid > div, .gallery-page .gallery-desc-box, .gallery-page .gallery-list-item, .gallery-page .gallery-permission-item, .viewimage-page .viewimage-thumb-link, .profile-overview, .profile-overview-item, .profile-moderation-block, .image-detail-preview-wrap, .image-detail-meta-grid > div, .image-links-box, .image-rating, .image-rating-star, .comment-item, .comment-edit-box, .comment-vote-btn, .reports-admin-page .reports-admin-table-wrap, .reports-admin-page .reports-admin-reason-box, .reports-admin-page .reports-admin-resolution, .comments-admin-page .comments-admin-table-wrap, .donate-buymeacoffee-help, .donate-buymeacoffee-form, .donate-support-notes > div, .donate-method-card, .image-proxy-result, .image-proxy-preview, .image-proxy-flow > div, .image-proxy-embed-grid > div, .image-proxy-code-list .accordion-item, .image-proxy-code-list .accordion-body, .messages-sidebar, .messages-user-results, .messages-thread-header, .messages-bubble, .messages-compose, .messages-image-picker, .messages-image-choice, .guest-chat-history-row, .guest-chat-join, .guest-chat-members, .guest-chat-message, .guest-chat-compose, .guest-chat-image-picker, .guest-chat-image-choice, .admincp-item, .admin-message-pair, .admin-message-item, .profile-wall-composer, .profile-wall-image-picker, .profile-wall-image-choice, .profile-wall-item, .profile-wall-item-image-link, .profile-wall-reply-item, .profile-wall-edit-form, .admin-sync-result, .admin-sync-result pre, .schedule-task-output ) { color: var(--color-text); background: var(--surface-subtle); border-color: var(--border-soft); } html[data-skin] :is( .settings-quick-actions a:hover, .users-page .users-quicklink-item:hover, .images-page .images-item-actions a:hover, .profile-overview-item:hover, .messages-user-results a:hover, .messages-conversation.active, .guest-chat-history-list a.guest-chat-history-row:hover, .admincp-item:hover, .admin-message-pair:hover, .images-preview-nav:hover:not(:disabled) ) { color: var(--color-text); background: var(--surface-hover); border-color: var(--border-medium); } html[data-skin] :is( .users-page .users-card--search .card-header, .users-page .users-card--quicklinks .card-header, .users-page .users-card--results .card-header, .gallery-page .gallery-card .card-header ) { color: var(--color-text); background: var(--accent-soft); border-color: var(--accent-border); } html[data-skin] :is(.images-page .images-item-card.is-delete-marked, .images-page .images-item-delete-select, .images-page .images-moderation-delete-toggle) { color: var(--color-text); background: var(--danger-soft); border-color: var(--danger-border); } html[data-skin] .images-page tr.is-delete-marked > td { color: var(--color-text) !important; background: var(--danger-soft) !important; border-color: var(--danger-border) !important; } html[data-skin] :is(.comment-vote-like.is-active, .moderator-approved-row) { color: var(--color-text); background: var(--success-soft); border-color: var(--success-border); } html[data-skin] .comment-vote-dislike.is-active { color: var(--color-text); background: var(--danger-soft); border-color: var(--danger-border); } html[data-skin] :is(.image-rating-star.is-active, .image-rating-star.is-preview, .profile-restriction-item) { color: var(--color-text); background: var(--warning-soft); border-color: var(--warning-border); } html[data-skin] :is(.comment-rules-alert, .reports-admin-page .reports-admin-empty) { color: var(--color-text); background: var(--info-soft); border-color: var(--info-border); } html[data-skin] :is(.images-page .images-table tbody tr, .profile-summary-table tbody tr, .reports-admin-page .reports-admin-row) > td { color: var(--color-text) !important; background: var(--surface2) !important; } html[data-skin] :is(.images-page .images-table tbody tr, .profile-summary-table tbody tr, .reports-admin-page .reports-admin-row):hover > td { background: var(--surface-hover) !important; } html[data-skin] :is(.images-item-name:hover, .profile-action-card-head h6, .profile-identity-head h4, .profile-wall-item-head a, .profile-wall-topic-title, .moderator-stats-hero h1, .moderator-summary-grid strong, .moderator-card-head a, .admin-ranks-page h6) { color: var(--color-text); } html[data-skin] :is(.image-proxy-page pre, .reports-admin-page textarea, .comments-admin-page .form-control, .donate-buymeacoffee-form .form-control) { color: var(--color-text); background: var(--control-bg); border-color: var(--border-medium); } /* Képek mögött sötét vászon marad, hogy az átlátszó tartalom minden skinben ellenőrizhető legyen. */ html[data-skin] :is(.images-preview-modal-image, .viewimage-page .viewimage-thumb, .image-detail-preview, .profile-wall-item-image-link img) { background: #05070c; } /* Skinválasztó és azonnali előnézet. */ .skin-onboarding { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; overflow-y: auto; padding: 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); } .skin-onboarding.is-hidden, html.site-skin-cookie-restored .skin-onboarding.is-required { display: none; } .skin-onboarding-panel { position: relative; width: min(760px, 100%); padding: clamp(22px, 4vw, 38px); border: 1px solid var(--accent-border); border-radius: 22px; color: var(--color-text); background: radial-gradient(circle at 90% 0, var(--page-glow), transparent 20rem), var(--surface); box-shadow: 0 28px 80px var(--theme-shadow); text-align: center; } .skin-onboarding-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-medium); border-radius: 50%; color: var(--color-muted); background: var(--surface2); } .skin-onboarding-close:hover { color: var(--color-text); background: var(--surface-hover); border-color: var(--accent-border); } .skin-onboarding.is-required .skin-onboarding-close { display: none; } .skin-onboarding-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border: 1px solid var(--accent-border); border-radius: 16px; color: var(--color-link); background: var(--accent-soft); font-size: 1.35rem; } .skin-onboarding-panel h2 { margin: 0 0 8px; color: var(--color-text); font-size: clamp(1.35rem, 3vw, 1.9rem); } .skin-onboarding-panel > p { max-width: 610px; margin: 0 auto 22px; color: var(--color-muted); } .skin-onboarding-picker { margin-bottom: 20px; text-align: left; } .skin-onboarding-panel > .btn { min-width: min(100%, 260px); } .skin-onboarding-status { min-height: 24px; margin-top: -10px; color: var(--status-danger); font-size: .88rem; } body:has(.skin-onboarding:not(.is-hidden)) { overflow: hidden; } .skin-picker { display: grid; grid-template-columns: repeat(4, minmax(112px, 1fr)); gap: 9px; } .skin-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 62px; margin: 0; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface-subtle); color: var(--color-text); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .skin-choice:hover { transform: translateY(-1px); border-color: var(--border-medium); background: var(--surface-hover); } .skin-choice input { position: absolute; opacity: 0; pointer-events: none; } .skin-choice:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; } .skin-choice:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--focus-ring); } .skin-choice-preview { display: flex; width: 42px; height: 40px; overflow: hidden; border: 1px solid var(--choice-border); border-radius: 9px; background: var(--choice-bg); box-shadow: inset 0 0 0 4px var(--choice-surface); } .skin-choice-preview i { align-self: end; display: block; width: 8px; height: 8px; margin: 0 0 6px 4px; border-radius: 50%; background: var(--choice-accent); } .skin-choice-preview i:nth-child(2) { height: 15px; opacity: .72; } .skin-choice-preview i:nth-child(3) { height: 22px; opacity: .42; } .skin-choice-name { min-width: 0; font-size: .82rem; font-weight: 700; line-height: 1.15; } .skin-choice-check { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--border-medium); border-radius: 50%; color: transparent; font-size: .62rem; } .skin-choice:has(input:checked) .skin-choice-check { color: var(--on-primary); background: var(--color-primary); border-color: var(--color-primary); } .skin-choice--dark { --choice-bg: #000; --choice-surface: #111; --choice-border: #333; --choice-accent: #aaa; } .skin-choice--light { --choice-bg: #f6f3ed; --choice-surface: #fffdf9; --choice-border: #c8c0b4; --choice-accent: #356c72; } .skin-choice--green { --choice-bg: #07130e; --choice-surface: #12271d; --choice-border: #28513d; --choice-accent: #45a978; } .skin-choice--blue { --choice-bg: #071321; --choice-surface: #10263d; --choice-border: #285176; --choice-accent: #4e91d2; } .skin-choice--brown { --choice-bg: #160e09; --choice-surface: #2d2017; --choice-border: #604635; --choice-accent: #bd8558; } .skin-choice--red { --choice-bg: #17090c; --choice-surface: #30171d; --choice-border: #633540; --choice-accent: #cc6572; } .skin-choice--purple { --choice-bg: #130b19; --choice-surface: #291936; --choice-border: #59406c; --choice-accent: #a470bd; } @media (max-width: 768px) { .skin-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .skin-picker { grid-template-columns: 1fr; } .skin-onboarding { padding: 12px; } .skin-onboarding-panel { border-radius: 16px; } }