/* RPB 1.0.0 :: pakiet wygenerowany automatycznie 2026-11-02T19:50:50+00:00 - nie edytuj, zmieniaj pliki źródłowe w assets/css/ */

/* --- css/base/fonts.css --- */
@font-face { font-family: "Exo 2"; src: url("/assets/fonts/exo2-variable.woff2") format("woff2"), url("/assets/fonts/exo2-variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("/assets/fonts/exo2-italic-variable.woff2") format("woff2"), url("/assets/fonts/exo2-italic-variable.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-variable.woff2") format("woff2"), url("/assets/fonts/inter-variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* --- css/base/tokens.css --- */
:root {
--font-display: "Exo 2", "Rajdhani", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
--r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
--topbar-h: 64px;
--container: 1240px;
--ease: cubic-bezier(.2, .7, .2, 1);
--fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.375rem; --fs-2xl: 1.85rem;
--gradient-brand: linear-gradient(92deg, #ffffff 0%, #ffd3bd 26%, #ff8a4c 52%, #fa5300 74%, #ff9a5c 100%);
}
:root, [data-theme="dark"] {
color-scheme: dark;
--bg: #070a0e; --bg-2: #0a0f15; --bg-elev: rgba(9, 14, 20, .88);
--surface: #0c131b; --surface-2: #121b25; --surface-3: #18232f; --surface-hover: #141e29;
--border: #19242f; --border-strong: #273544;
--text: #f2f5f8; --text-2: #b4bfcb; --muted: #7b8897; --faint: #56626f;
--accent: #fa5300; --accent-hover: #ff6a1f; --accent-text: #ff7633; --on-accent: #fff;
--accent-soft: rgba(250, 83, 0, .13); --accent-softer: rgba(250, 83, 0, .07); --accent-border: rgba(250, 83, 0, .45);
--success: #2ec770; --warn: #f5a524; --danger: #f04848; --info: #4c9aff; --live: #ff3b3b;
--success-soft: rgba(46, 199, 112, .14); --warn-soft: rgba(245, 165, 36, .14); --danger-soft: rgba(240, 72, 72, .14); --info-soft: rgba(76, 154, 255, .14);
--featured-bg: linear-gradient(120deg, rgba(250, 83, 0, .26) 0%, rgba(250, 83, 0, .07) 48%, rgba(12, 19, 27, .9) 100%);
--hero-glow: radial-gradient(60% 70% at 50% 0%, rgba(250, 83, 0, .16) 0%, rgba(250, 83, 0, 0) 70%);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--shadow: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 16px 36px -22px rgba(0, 0, 0, .9);
--shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03);
--overlay: rgba(2, 4, 7, .74);
--skeleton: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
--logo-src: url("/assets/img/logo-rpb-orange.png");
--title-gradient: linear-gradient(92deg, #ffffff 0%, #ffe2d3 22%, #ff9d66 50%, #fa5300 78%, #ff8a4c 100%);
}
[data-theme="light"] {
color-scheme: light;
--bg: #f3f5f9; --bg-2: #eceff4; --bg-elev: rgba(255, 255, 255, .9);
--surface: #ffffff; --surface-2: #f2f4f8; --surface-3: #e7ebf1; --surface-hover: #f7f8fb;
--border: #e3e7ee; --border-strong: #cdd5e0;
--text: #0d141c; --text-2: #3a4655; --muted: #66727f; --faint: #98a2ae;
--accent: #ec4f00; --accent-hover: #d24600; --accent-text: #cf4500; --on-accent: #fff;
--accent-soft: rgba(236, 79, 0, .09); --accent-softer: rgba(236, 79, 0, .05); --accent-border: rgba(236, 79, 0, .4);
--success: #16884a; --warn: #b07000; --danger: #d42c2c; --info: #1f6fdc; --live: #e11d1d;
--success-soft: rgba(22, 136, 74, .1); --warn-soft: rgba(176, 112, 0, .11); --danger-soft: rgba(212, 44, 44, .09); --info-soft: rgba(31, 111, 220, .09);
--featured-bg: linear-gradient(120deg, rgba(236, 79, 0, .14) 0%, rgba(236, 79, 0, .04) 50%, #ffffff 100%);
--hero-glow: radial-gradient(60% 70% at 50% 0%, rgba(236, 79, 0, .1) 0%, rgba(236, 79, 0, 0) 70%);
--shadow-sm: 0 1px 2px rgba(13, 20, 28, .06);
--shadow: 0 1px 2px rgba(13, 20, 28, .04), 0 12px 28px -18px rgba(13, 20, 28, .2);
--shadow-lg: 0 24px 60px -24px rgba(13, 20, 28, .35), 0 0 0 1px rgba(13, 20, 28, .04);
--overlay: rgba(13, 20, 28, .45);
--skeleton: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
--title-gradient: linear-gradient(92deg, #0d141c 0%, #3a2416 24%, #b8440c 52%, #ec4f00 76%, #ff7a2e 100%);
}

/* --- css/base/reset.css --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 var(--fs-md)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: var(--r-sm); z-index: 1000; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; }
body.modal-open { overflow: hidden; }

/* --- css/base/typography.css --- */
h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.005em; }
.page-title { font-size: clamp(1.65rem, 3vw, 2.15rem); }
.page-lead { color: var(--text-2); margin-top: .45rem; max-width: 68ch; }
.section-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.eyebrow { display: flex; align-items: center; gap: .45rem; font: 700 var(--fs-xs)/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .4rem; }
.eyebrow i.sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .8; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .text-2 { color: var(--text-2); }
.small { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 700; }
.pos { color: var(--success); } .neg { color: var(--danger); } .accent { color: var(--accent-text); }
.link { color: var(--accent-text); font-weight: 600; } .link:hover { text-decoration: underline; }
.nowrap { white-space: nowrap; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-grad { background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font: 700 var(--fs-xs)/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); margin-bottom: .75rem; }
.crumbs .sep { color: var(--muted); } .crumbs a:hover { text-decoration: underline; } .crumbs span:last-child { color: var(--text-2); }
.prose { color: var(--text-2); line-height: 1.72; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.3rem; color: var(--text); margin: 1.6em 0 .55em; } .prose h3 { font-size: 1.08rem; color: var(--text); margin: 1.3em 0 .4em; }
.prose p, .prose ul, .prose ol { margin: .7em 0; } .prose ul { list-style: disc; padding-left: 1.3em; } .prose ol { list-style: decimal; padding-left: 1.3em; } .prose li { margin: .25em 0; }
.prose a { color: var(--accent-text); text-decoration: underline; } .prose strong, .prose b { color: var(--text); font-weight: 650; }
.prose code { background: var(--surface-2); padding: .1em .4em; border-radius: 4px; font-size: .9em; }
.prose blockquote { border-left: 3px solid var(--accent); background: var(--surface-2); padding: .6em 1em; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: .8em 0; }
.prose blockquote[data-author]::before { content: attr(data-author) " napisał(a):"; display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: .2em; }
.prose .lead { font-size: 1.08rem; color: var(--text); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.fs-s { font-size: .85em; } .fs-l { font-size: 1.2em; } .fs-xl { font-size: 1.45em; font-weight: 700; } .txt-accent { color: var(--accent-text); }
.brand-logo { display: inline-block; width: 74px; height: 24px; background: var(--accent); -webkit-mask: url("/assets/img/logo-rpb-white.png") center / contain no-repeat; mask: url("/assets/img/logo-rpb-white.png") center / contain no-repeat; }
.brand-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); border-radius: 9px; padding: 8px 12px; }
.brand-badge::before { content: ""; width: 54px; height: 18px; background: url("/assets/img/logo-rpb-white.png") center / contain no-repeat; }

/* --- css/components/buttons.css --- */
.ic { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -.2em; }
.ic--sm { width: .95em; height: .95em; } .ic--lg { width: 1.4em; height: 1.4em; } .ic--xl { width: 1.9em; height: 1.9em; }
.btn { --h: 40px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: var(--h); padding: 0 1.05rem; border-radius: var(--r-sm); font: 600 var(--fs-md)/1 var(--font-display); letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s; user-select: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .55; pointer-events: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px -8px rgba(250, 83, 0, .7); } .btn--primary:hover { background: var(--accent-hover); }
.btn--soft { background: var(--surface-2); color: var(--text); border-color: var(--border); } .btn--soft:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn--outline { border-color: var(--border-strong); color: var(--text); } .btn--outline:hover { border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-softer); }
.btn--ghost { color: var(--text-2); } .btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--accent-soft { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); } .btn--accent-soft:hover { background: var(--accent); color: #fff; }
.btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover { filter: brightness(1.08); }
.btn--danger-soft { background: var(--danger-soft); color: var(--danger); } .btn--danger-soft:hover { background: var(--danger); color: #fff; }
.btn--success-soft { background: var(--success-soft); color: var(--success); } .btn--success-soft:hover { background: var(--success); color: #fff; }
.btn--sm { --h: 32px; padding: 0 .75rem; font-size: var(--fs-sm); border-radius: 8px; } .btn--xs { --h: 26px; padding: 0 .55rem; font-size: var(--fs-xs); border-radius: 7px; gap: .3rem; }
.btn--lg { --h: 48px; padding: 0 1.4rem; font-size: 1.02rem; border-radius: 11px; } .btn--xl { --h: 54px; padding: 0 1.8rem; font-size: 1.08rem; border-radius: 12px; }
.btn--block { width: 100%; } .btn--pill { border-radius: var(--r-pill); }
.btn--icon { width: var(--h); padding: 0; } .btn--round { border-radius: 50%; }
.btn.is-loading { color: transparent !important; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-color: rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn--soft.is-loading::after, .btn--ghost.is-loading::after, .btn--outline.is-loading::after { border-color: var(--accent) var(--accent) transparent transparent; }
.btn .badge-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); font-size: var(--fs-xs); display: inline-flex; align-items: center; justify-content: center; }
.btn-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); transition: .15s; position: relative; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn.is-active { color: var(--accent-text); }
.chip { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .8rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: 600 var(--fs-sm)/1 var(--font-display); white-space: nowrap; transition: .15s; }
.chip:hover { border-color: var(--accent-border); color: var(--text); } .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip .count { font-size: var(--fs-2xs); background: var(--surface-3); color: var(--text-2); padding: 2px 6px; border-radius: 9px; } .chip.is-active .count { background: rgba(255,255,255,.22); color: #fff; }
.chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .chips::-webkit-scrollbar { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- css/components/forms.css --- */
.form { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; } .form-grid .span-2 { grid-column: 1 / -1; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .form-grid, .form-grid--3 { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; min-width: 0; align-content: start; }
.field > label, .label { font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--text-2); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.label .req { color: var(--accent-text); } .field > label .req { color: var(--accent-text); margin-right: auto; margin-left: -.3rem; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field__error { font-size: var(--fs-xs); color: var(--danger); min-height: 0; }
.field__error:empty { display: none; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea, .field.has-error .editor { border-color: var(--danger); }
.input, .select, .textarea { width: 100%; height: 44px; padding: 0 .9rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-md); transition: border-color .15s, background .15s, box-shadow .15s; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--accent-border); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-softer); }
.input:disabled { opacity: .6; }
.textarea { height: auto; min-height: 110px; padding: .7rem .9rem; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238b97a6' stroke-width='2'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; cursor: pointer; }
.input--sm, .select--sm { height: 36px; font-size: var(--fs-sm); }
.input-group { position: relative; display: flex; align-items: center; } .input-group > .ic { position: absolute; left: .85rem; color: var(--muted); pointer-events: none; } .input-group > .ic + .input { padding-left: 2.5rem; }
.input-group .input-addon { position: absolute; right: .35rem; } .input-group .input + .input-addon { }
.input-group--pw .input { padding-right: 2.8rem; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; line-height: 1.45; }
.field > label.check, .field > label.switch-inline { justify-content: flex-start; } .field > label.check { font-weight: 400; }
.check input { appearance: none; flex: none; width: 19px; height: 19px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--surface-2); display: grid; place-items: center; cursor: pointer; transition: .15s; }
.check input:checked { background: var(--accent); border-color: var(--accent); } .check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type=radio] { border-radius: 50%; } .check input[type=radio]:checked::after { width: 7px; height: 7px; border: 0; background: #fff; border-radius: 50%; transform: none; }
.check a { color: var(--accent-text); text-decoration: underline; }
.switch { position: relative; display: inline-flex; flex: none; width: 42px; height: 24px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; z-index: 1; width: 100%; height: 100%; }
.switch span, .switch i { position: absolute; inset: 0; pointer-events: none; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 12px; transition: .2s; }
.switch span::after, .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s var(--ease); }
.switch input:checked + span, .switch input:checked + i { background: var(--accent); border-color: var(--accent); } .switch input:checked + span::after, .switch input:checked + i::after { transform: translateX(18px); }
.switch input:disabled + span, .switch input:disabled + i { opacity: .5; cursor: not-allowed; } .switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; }
.seg button, .seg a { height: 32px; padding: 0 .85rem; border-radius: 8px; font: 600 var(--fs-sm)/1 var(--font-display); color: var(--text-2); display: inline-flex; align-items: center; gap: .4rem; }
.seg button:hover, .seg a:hover { color: var(--text); } .seg button.is-active, .seg a.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .seg button.is-active, [data-theme="dark"] .seg a.is-active { background: var(--surface-3); }
.form__error { font-size: var(--fs-sm); color: var(--danger); background: var(--danger-soft); padding: .65rem .85rem; border-radius: var(--r-sm); }
.form__error:empty { display: none; }
.form__ok { font-size: var(--fs-sm); color: var(--success); background: var(--success-soft); padding: .65rem .85rem; border-radius: var(--r-sm); }
.counter { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .counter.is-bad { color: var(--danger); } .counter.is-good { color: var(--success); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.stepper button { width: 40px; height: 42px; color: var(--text-2); font-size: 1.2rem; } .stepper button:hover { background: var(--surface-3); color: var(--text); }
.stepper input { width: 52px; text-align: center; border: 0; background: transparent; height: 42px; font: 700 1.05rem var(--font-display); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.seg--sm button, .seg--sm a { height: 28px; padding: 0 .7rem; font-size: var(--fs-xs); }
.seg--block { display: flex; width: 100%; } .seg--block button { flex: 1; justify-content: center; }
.seg--sm button { height: 28px; padding: 0 .65rem; font-size: var(--fs-xs); }
.btn--glass { background: rgba(0, 0, 0, .45); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .18); } .btn--glass:hover { background: rgba(0, 0, 0, .6); }
.cselect { position: relative; width: 100%; min-width: 0; }
.cselect--sm, .cselect--auto { width: auto; display: inline-block; min-width: 150px; max-width: 100%; }
.cselect__native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.cselect__btn { width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 .8rem 0 .9rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-md); text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.cselect--sm .cselect__btn { height: 36px; font-size: var(--fs-sm); }
.cselect__btn:hover { border-color: var(--border-strong); }
.cselect__btn:focus-visible, .cselect.is-open .cselect__btn { outline: 0; border-color: var(--accent-border); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-softer); }
.cselect__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__chev { flex: none; width: 12px; height: 8px; color: var(--muted); transition: transform .2s; } .cselect.is-open .cselect__chev { transform: rotate(180deg); color: var(--accent-text); }
.cselect.is-disabled { opacity: .55; } .field.has-error .cselect__btn { border-color: var(--danger); }
.cselect__menu { padding: .3rem; max-height: 320px; display: flex; flex-direction: column; overflow: hidden; animation: cs-in .12s ease-out; }
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px); } }
.cselect__list { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; }
.cselect__opt { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; padding: .55rem .75rem; border-radius: 8px; text-align: left; color: var(--text); font-size: var(--fs-sm); line-height: 1.3; }
.cselect__opt:hover, .cselect__opt:focus-visible { background: var(--surface-2); outline: 0; }
.cselect__opt.is-selected { color: var(--accent-text); font-weight: 600; background: var(--accent-softer); } .cselect__opt.is-selected::after { content: "✓"; }
.cselect__opt[disabled] { opacity: .45; cursor: not-allowed; } .cselect__opt[hidden] { display: none; }
.cselect__group { padding: .5rem .75rem .25rem; font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cselect__search { padding: .2rem .2rem .4rem; } .cselect__search input { width: 100%; height: 36px; padding: 0 .7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); outline: 0; } .cselect__search input:focus { border-color: var(--accent-border); }
.cselect-backdrop { position: fixed; inset: 0; z-index: 440; background: rgba(0, 0, 0, .5); animation: fade-in .15s; }
.cselect__menu.is-sheet { position: fixed !important; left: 0 !important; right: 0; bottom: 0; top: auto !important; max-height: 72vh; border-radius: 18px 18px 0 0; padding: .4rem .6rem calc(.8rem + env(safe-area-inset-bottom)); animation: sheet-up .2s ease-out; }
.cselect__menu.is-sheet .cselect__opt { padding: .85rem .9rem; font-size: 1rem; }
.cselect__sheet-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .4rem .6rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
@keyframes sheet-up { from { transform: translateY(100%); } } @keyframes fade-in { from { opacity: 0; } }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg::-webkit-scrollbar { display: none; } .seg button { flex: none; }
@media (max-width: 760px) { .input, .select, .textarea, .cselect__btn, .editor__area, input[type=search], .tips-search input, .forum-search input { font-size: 16px !important; } }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.form, .tf, .tf-step { grid-template-columns: minmax(0, 1fr); }
.form > *, .tf > *, .tf-step > *, .field > *, .modal__panel > * { min-width: 0; }
@media (max-width: 640px) { .form-grid--addr { grid-template-columns: 1fr; } .chips--wrap-sm { flex-wrap: wrap; } }
.phone-input { display: flex; align-items: stretch; } .phone-input .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.phone-input__prefix { flex: none; display: grid; place-items: center; padding: 0 .85rem; border: 1px solid var(--border); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--surface-3); color: var(--text-2); font-weight: 650; user-select: none; }
.auth-ref { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: .88rem; line-height: 1.4; }
.auth-ref .ic { flex: none; margin-top: .1rem; color: var(--accent); }

/* --- css/components/cards.css --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow); min-width: 0; }
.card--flush { padding: 0; overflow: hidden; } .card--tight { padding: .9rem 1rem; } .card--hover { transition: border-color .15s, transform .15s; } .card--hover:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.card--accent { background: var(--featured-bg); border-color: var(--accent-border); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.card__title { font: 700 1.08rem/1.25 var(--font-display); display: flex; align-items: center; gap: .55rem; } .card__title .ic { color: var(--accent-text); }
.card__sub { color: var(--muted); font-size: var(--fs-sm); margin-top: .15rem; }
.section { margin-top: 2.3rem; } .section:first-child { margin-top: 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.05rem; flex-wrap: wrap; }
.section__head .section-title { margin: 0; }
.list-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.list-row + .list-row { margin-top: .5rem; }
.list-row__icon { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); } .list-row__icon .ic { width: 20px; height: 20px; }
.list-row__main { flex: 1; min-width: 0; } .list-row__title { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .list-row__sub { font-size: var(--fs-sm); color: var(--muted); margin-top: .1rem; overflow-wrap: anywhere; }
.list-row__aside { flex: none; display: flex; gap: .4rem; align-items: center; }
.table-wrap { overflow-x: auto; } .table { font-size: var(--fs-sm); }
.table th { text-align: left; font: 700 var(--fs-2xs)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .8rem 1rem; white-space: nowrap; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; }
.table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-hover); } .table .num-col { text-align: right; font-variant-numeric: tabular-nums; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; font-size: var(--fs-sm); } .kv dt { color: var(--muted); } .kv dd { color: var(--text); text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: .9rem 1rem; min-width: 0; }
.stat__label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.stat__value { font: 800 1.55rem/1.15 var(--font-display); margin-top: .35rem; font-variant-numeric: tabular-nums; }
.stat__hint { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; }

/* --- css/components/modal.css --- */
.modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal__backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(4px); animation: fade .18s ease; }
.modal__panel { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 2rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 1.6rem; animation: pop .22s var(--ease); overscroll-behavior: contain; }
.modal__panel--wide { max-width: 760px; } .modal__panel--xl { max-width: 980px; } .modal__panel--sm { max-width: 400px; }
.modal__close { position: absolute; top: .8rem; right: .8rem; z-index: 2; }
.modal__title { font: 700 1.3rem/1.25 var(--font-display); margin-bottom: .35rem; padding-right: 2rem; } .modal__lead { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: 1.1rem; }
.modal__foot { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.4rem; flex-wrap: wrap; }
.modal--sheet .modal__panel { }
.modal__panel--auth { max-width: 560px; padding: 2.4rem 2.4rem 2rem; overflow-x: hidden; }
.modal__panel--auth::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--title-gradient, linear-gradient(90deg, #fa5300, #ff8a3d)); }
.modal__panel--auth::after { content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(250, 83, 0, .16), transparent 70%); pointer-events: none; }
.modal__panel--auth .modal__title { font-size: 1.75rem; margin-bottom: .45rem; } .modal__panel--auth .modal__lead { font-size: var(--fs-md); margin-bottom: 1.5rem; }
.modal__panel--auth .input, .modal__panel--auth .cselect__btn { height: 50px; font-size: 1rem; } .modal__panel--auth .btn--primary[type=submit], .modal__panel--auth .btn--block { min-height: 50px; font-size: 1rem; }
@media (max-width: 560px) {
.modal { align-items: flex-end; padding: 0; }
.modal__panel { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 94dvh; padding: 1.3rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); animation: sheet .25s var(--ease); max-width: 100%; }
.modal__panel::before { content: ""; display: block; width: 42px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: -.5rem auto .8rem; }
.modal__panel--auth { height: 100dvh; max-height: 100dvh; border-radius: 0; padding: calc(1.6rem + env(safe-area-inset-top)) 1.3rem calc(1.4rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: center; animation: fade .2s ease; }
.modal__panel--auth::before { position: absolute; display: block; width: auto; height: 4px; margin: 0; border-radius: 0; background: linear-gradient(90deg, #fa5300, #ff8a3d); }
.modal__panel--auth .modal__close { top: calc(.8rem + env(safe-area-inset-top)); }
.modal__foot { position: sticky; bottom: calc(-1.2rem - env(safe-area-inset-bottom)); margin: 1.2rem -1.1rem calc(-1.2rem - env(safe-area-inset-bottom)); padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.modal__foot .btn { flex: 1; }
}
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } } @keyframes sheet { from { transform: translateY(40px); opacity: .5; } }
.confirm-text { color: var(--text-2); }

/* --- css/components/misc.css --- */
.avatar { --s: 40px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; background: var(--surface-3); color: var(--text); display: inline-grid; place-items: center; font: 700 calc(var(--s) * .38)/1 var(--font-display); text-transform: uppercase; overflow: visible; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar { aspect-ratio: 1 / 1; min-width: var(--s); min-height: var(--s); max-width: var(--s); max-height: var(--s); }
.avatar--xs { --s: 24px; } .avatar--sm { --s: 32px; } .avatar--md { --s: 44px; } .avatar--lg { --s: 64px; } .avatar--xl { --s: 104px; }
.avatar[data-c="0"] { background: #7c2d12; color: #ffd8c2; } .avatar[data-c="1"] { background: #1e3a8a; color: #cfdcff; } .avatar[data-c="2"] { background: #14532d; color: #c8f2d6; } .avatar[data-c="3"] { background: #581c87; color: #ead6ff; } .avatar[data-c="4"] { background: #134e4a; color: #c9f4ee; } .avatar[data-c="5"] { background: #78350f; color: #ffe6b8; } .avatar[data-c="6"] { background: #831843; color: #ffd3e6; } .avatar[data-c="7"] { background: #334155; color: #e2e8f0; }
.avatar--ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.avatar .dot { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); }
.user-chip { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.user-chip__text { display: grid; line-height: 1.2; min-width: 0; }
.user-chip__first { font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; text-transform: none; }
.user-chip__name { font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.user-chip:hover .user-chip__name { color: var(--accent-text); }
.role-tag { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; height: 18px; min-width: 26px; padding: 1px 5px 0 calc(5px + .06em); border-radius: 5px;
font: 800 10px/1 var(--font-display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--rc, var(--muted)); white-space: nowrap; vertical-align: middle; position: relative; top: -.05em; transform: none; }
@supports (text-box: trim-both cap alphabetic) { .role-tag { padding-top: 0; text-box: trim-both cap alphabetic; } }
.pill { display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .6rem; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1 var(--font-display); background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.pill--accent { background: var(--accent-soft); color: var(--accent-text); } .pill--success { background: var(--success-soft); color: var(--success); } .pill--danger { background: var(--danger-soft); color: var(--danger); } .pill--warn { background: var(--warn-soft); color: var(--warn); } .pill--info { background: var(--info-soft); color: var(--info); }
.pill--live { background: var(--danger-soft); color: var(--live); } .pill--live::before, .dot-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }
.pill--lg { height: 30px; padding: 0 .85rem; font-size: var(--fs-sm); }
.pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@keyframes pulse { 50% { opacity: .35; } }
.badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 800 .65rem/18px var(--font-display); text-align: center; border: 2px solid var(--bg); }
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--border); margin-bottom: 1.4rem; } .tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: .8rem .95rem; font: 600 .95rem/1 var(--font-display); color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; }
.tab:hover { color: var(--text); } .tab.is-active { color: var(--accent-text); } .tab.is-active::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); }
.tab .count { font-size: var(--fs-2xs); background: var(--surface-3); color: var(--text-2); padding: 2px 6px; border-radius: 9px; }
.toasts { position: fixed; z-index: 600; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; width: min(380px, calc(100vw - 2rem)); }
.toast { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); color: var(--text); animation: pop .2s var(--ease); }
.toast .ic { margin-top: 1px; } .toast--success .ic { color: var(--success); } .toast--error .ic { color: var(--danger); } .toast--warn .ic { color: var(--warn); } .toast--info .ic { color: var(--info); }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: .2s; }
.toast a { color: var(--accent-text); font-weight: 600; }
@media (max-width: 760px) { .toasts { bottom: calc(70px + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; width: auto; } }
.skeleton { background: var(--skeleton); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--r-md); }
.skeleton--block { height: 140px; } .skeleton--line { height: 14px; margin: .4rem 0; } .skeleton--card { height: 220px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.spinner { display: inline-block; width: 26px; height: 26px; border: 3px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.page-loader { display: grid; place-items: center; min-height: 50vh; }
.loader-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 700; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; animation: loadbar 1s infinite linear; }
@keyframes loadbar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.empty { display: grid; justify-items: center; text-align: center; gap: .4rem; padding: 2.4rem 1rem; color: var(--muted); }
.empty > .ic { width: 42px; height: 42px; color: var(--faint); margin-bottom: .3rem; } .empty strong { color: var(--text); font: 700 1.05rem var(--font-display); } .empty .btn { margin-top: .6rem; }
.dropdown { position: absolute; z-index: 450; min-width: 210px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: .35rem; animation: pop .15s var(--ease); }
.dd-item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .6rem .7rem; border-radius: 8px; font-size: var(--fs-sm); color: var(--text-2); text-align: left; } .dd-item:hover { background: var(--surface-2); color: var(--text); }
.dd-item .ic { color: var(--muted); } .dd-item:hover .ic { color: var(--accent-text); }
.dd-danger, .dd-danger .ic { color: var(--danger) !important; } .dropdown hr { border: 0; border-top: 1px solid var(--border); margin: .3rem 0; }
.dd-label { padding: .45rem .7rem .25rem; font: 700 var(--fs-2xs)/1 var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pager { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 1.4rem; }
.pager button { min-width: 38px; height: 38px; padding: 0 .6rem; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); font: 600 var(--fs-sm) var(--font-display); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.pager button:hover:not(:disabled) { border-color: var(--accent-border); color: var(--text); } .pager button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .pager button:disabled { opacity: .45; }
.alert { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1.05rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.alert > .ic { margin-top: 2px; width: 20px; height: 20px; } .alert strong { color: var(--text); }
.alert--warn { background: var(--warn-soft); border-color: transparent; } .alert--warn > .ic { color: var(--warn); }
.alert--danger { background: var(--danger-soft); border-color: transparent; } .alert--danger > .ic { color: var(--danger); }
.alert--info { background: var(--info-soft); border-color: transparent; } .alert--info > .ic { color: var(--info); }
.alert--success { background: var(--success-soft); border-color: transparent; } .alert--success > .ic { color: var(--success); }
.alert--accent { background: var(--accent-soft); border-color: var(--accent-border); } .alert--accent > .ic { color: var(--accent-text); }
[data-tip] { position: relative; }
.tooltip { position: fixed; z-index: 800; max-width: min(280px, calc(100vw - 16px)); background: #0b1118; color: #e8edf3; font: 500 .74rem/1.35 var(--font-body); padding: .4rem .6rem; border-radius: 7px; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); animation: tip-in .12s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }
.acc { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.acc + .acc { margin-top: .7rem; }
.acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.2rem; font: 650 .98rem/1.35 var(--font-body); color: var(--text); text-align: left; }
.acc__head:hover { background: var(--surface-hover); }
.acc__head .plus { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent-text); transition: transform .2s; }
.acc.is-open .acc__head .plus { transform: rotate(45deg); }
.acc__body { padding: 0 1.2rem 1.15rem; border-top: 1px solid transparent; } .acc.is-open .acc__head { border-bottom: 1px solid var(--border); } .acc.is-open .acc__body { padding-top: 1rem; }
.progress { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 1.2rem 0; }
.reactions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.react-btn { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .7rem; border-radius: 9px; color: var(--text-2); font: 600 var(--fs-sm)/1 var(--font-display); transition: .15s; }
.react-btn:hover { background: var(--surface-2); color: var(--text); } .react-btn.is-active { color: var(--accent-text); background: var(--accent-softer); }
.react-sum { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin-right: .2rem; }
.react-sum__i { display: inline-flex; align-items: center; gap: .25rem; height: 26px; padding: 0 .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .78rem; color: var(--text-2); }
.react-sum__i .emo { font-size: .9rem; line-height: 1; } .react-sum__i b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.react-pick { display: flex; gap: .2rem; padding: .3rem; } .react-pick button { font-size: 1.35rem; width: 40px; height: 40px; border-radius: 9px; transition: transform .1s; } .react-pick button:hover { background: var(--surface-2); transform: scale(1.15); }
.countdown { display: inline-flex; gap: .35rem; font-variant-numeric: tabular-nums; }
.kbd { font: 600 .72rem var(--font-display); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--border-strong); color: var(--muted); }
.mini-bars { display: flex; gap: 3px; align-items: center; } .mini-bars i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font: 800 .62rem/1 var(--font-display); color: #fff; font-style: normal; }
.mini-bars i.w { background: var(--success); } .mini-bars i.l { background: var(--danger); } .mini-bars i.v { background: var(--surface-3); color: var(--text-2); }
.avatar--2xl { --s: 132px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-t { font: 500 13px var(--font-body); fill: var(--muted); }
.chart-grid { stroke: var(--border); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart-zero { stroke: var(--border-strong); vector-effect: non-scaling-stroke; }
.chart-empty .empty { padding: 2rem 1rem; }
.donut { width: 100%; max-width: 150px; display: block; }
.donut__bg { fill: none; stroke: var(--surface-3); stroke-width: 10; }
.donut__fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.donut__v { font: 800 22px var(--font-display); fill: var(--text); } .donut__s { font: 500 9px var(--font-body); fill: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hbars { display: grid; gap: .65rem; }
.hbar { display: grid; grid-template-columns: 110px 1fr 90px; gap: .7rem; align-items: center; font-size: var(--fs-sm); }
.hbar__label { display: flex; gap: .4rem; align-items: center; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar__track { height: 10px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }
.hbar__track span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--accent), #ff8a3d); } .hbar__track span.neg { background: var(--danger); }
.hbar__v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.vbars { display: flex; gap: .6rem; align-items: stretch; height: 160px; padding-top: .5rem; }
.vbar { flex: 1; display: flex; flex-direction: column; gap: .4rem; align-items: center; min-width: 0; }
.vbar__col { flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.vbar__col span { display: block; width: 100%; background: linear-gradient(180deg, #34d399, var(--success)); border-radius: 8px 8px 0 0; } .vbar__col span.neg { background: linear-gradient(180deg, #fb7185, var(--danger)); }
.vbar small { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; }
.kpi { background: var(--surface-2); border-radius: 12px; padding: .75rem .85rem; } .kpi small { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.kpi b { display: block; font: 800 1.3rem var(--font-display); margin: .15rem 0; } .kpi > span { font-size: var(--fs-xs); color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.table--compact td, .table--compact th { padding: .55rem .6rem; }
.count { font-size: var(--fs-2xs); background: var(--surface-3); color: var(--text-2); padding: 2px 7px; border-radius: 9px; font-weight: 700; }
.pill--sm { height: 20px; font-size: .68rem; padding: 0 .5rem; }
.info-row { display: grid; grid-template-columns: 22px 1fr auto; gap: .7rem; align-items: center; padding: .55rem 0; font-size: var(--fs-sm); color: var(--text-2); }
.info-row .ic { color: var(--text-2); } .info-row b, .info-row a { color: var(--text); font-weight: 600; text-align: right; word-break: break-all; }
.vbar__col span.zero { background: var(--surface-3); }
.donut__s { font-size: 7.5px; letter-spacing: .03em; }
.card > .card__title, .card > .card__head { margin-bottom: 1rem; }
.anon-toggle { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 11px; border: 1px dashed var(--accent-border); background: var(--accent-softer); cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); margin-top: .8rem; user-select: none; }
.anon-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.anon-toggle__box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: transparent; background: var(--surface); transition: .15s; }
.anon-toggle input:checked + .anon-toggle__box { background: var(--accent); border-color: var(--accent); color: #fff; } .anon-toggle input:focus-visible + .anon-toggle__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.reply-box__foot { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; } .reply-box__foot .anon-toggle { margin: 0 auto 0 0; }
.comment-form { flex-wrap: wrap; } .comment-form__anon { flex-basis: 100%; } .comment-form__anon .anon-toggle { margin-top: .2rem; }
.um-item--admin { background: var(--surface-2); }
.load-more { display: flex; justify-content: center; margin-top: .9rem; } .comments__more { display: flex; justify-content: center; margin-top: .7rem; }
.role-tag[data-tip] { cursor: help; }
.tip__edited { display: inline-flex; align-items: center; gap: .2rem; color: var(--text-3); cursor: help; }
.tip__edited .ic { opacity: .8; }
.pay-consent { margin-top: .8rem; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-2); }
.pay-consent.is-invalid span { color: var(--danger); }

/* --- css/components/editor.css --- */
.editor { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.editor:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-softer); }
.editor__bar { position: relative; display: flex; flex-wrap: wrap; gap: .15rem; padding: .35rem; border-bottom: 1px solid var(--border); align-items: center; }
.editor__btn { flex: none; min-width: 34px; height: 34px; padding: 0 .45rem; border-radius: 8px; color: var(--text-2); display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: .35rem; font: 600 var(--fs-xs)/1 var(--font-display); white-space: nowrap; }
.editor__btn:hover { background: var(--surface-3); color: var(--text); } .editor__btn.is-active { background: var(--accent-soft); color: var(--accent-text); }
.editor__btn--accent { color: var(--accent-text); }
.editor__btn .chev { width: 12px; height: 12px; opacity: .7; }
.editor__sep { flex: none; width: 1px; height: 20px; background: var(--border); margin: 0 .2rem; }
.editor__area { min-height: 140px; max-height: 420px; overflow-y: auto; padding: .8rem .95rem; outline: 0; line-height: 1.6; overflow-wrap: anywhere; color: var(--text); font-size: 1rem; }
.editor__area:empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }
.editor__area p, .editor__area div { margin: 0 0 .5em; }
.editor__area blockquote { margin: 0 0 .6em; padding: .45rem .7rem; border-left: 3px solid var(--accent); background: var(--surface-3); border-radius: 0 8px 8px 0; color: var(--text-2); font-size: .92em; }
.editor__foot { display: flex; justify-content: space-between; align-items: center; padding: .35rem .7rem; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted); gap: .5rem; }
.editor__foot .counter.is-bad { color: var(--danger); } .editor__foot .counter.is-good { color: var(--success); }
.size-menu { padding: .3rem; min-width: 190px; display: grid; gap: 2px; }
.size-menu button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: .45rem .7rem; border-radius: 8px; color: var(--text); font-family: var(--font-body); line-height: 1.2; }
.size-menu button:hover, .size-menu button.is-active { background: var(--surface-2); } .size-menu button.is-active::after { content: "✓"; color: var(--accent-text); font-size: .9rem; }
.size-menu .s-n { font-size: 1rem; } .size-menu .s-s { font-size: .85rem; } .size-menu .s-l { font-size: 1.2rem; } .size-menu .s-xl { font-size: 1.45rem; font-weight: 700; }
.emoji-menu { min-width: 0; }
.emoji-pop { display: grid; grid-template-columns: repeat(8, 38px); gap: 2px; padding: .4rem; max-height: 240px; overflow-y: auto; }
.emoji-pop button { width: 38px; height: 38px; font-size: 1.3rem; line-height: 1; border-radius: 8px; display: grid; place-items: center; } .emoji-pop button:hover { background: var(--surface-2); transform: scale(1.12); }
@media (max-width: 640px) { .emoji-pop { grid-template-columns: repeat(7, 38px); } }
.editor__area font[size="1"], .editor__area font[size="2"] { font-size: .85em; } .editor__area font[size="3"] { font-size: 1em; }
.editor__area font[size="4"], .editor__area font[size="5"] { font-size: 1.2em; } .editor__area font[size="6"], .editor__area font[size="7"] { font-size: 1.45em; font-weight: 700; }
.editor__area ul, .editor__area ol { margin: .2em 0 .6em 1.3em; } .editor__area ul { list-style: disc; } .editor__area ol { list-style: decimal; }
.editor__btn [data-size-label] { min-width: 4.6em; text-align: left; }
@media (max-width: 640px) { .editor__btn [data-size-label] { display: none; } .editor__btn { min-width: 36px; height: 36px; } }

/* --- css/components/tip.css --- */
.tip { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.tip:hover { border-color: var(--border-strong); }
.tip.is-featured::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #fa5300, #ffb02e); z-index: 1; pointer-events: none; }
.tip.is-hidden { opacity: .6; }
.tip[data-status="won"] { border-color: rgba(46, 199, 112, .45); } .tip[data-status="lost"] { border-color: rgba(240, 72, 72, .4); }
.tip__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem .8rem; border-bottom: 1px solid var(--border); }
.tip__author { flex: 1; min-width: 0; } .tip__author .user-chip__name { font-size: 1.02rem; font-weight: 700; }
.tip__menu { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); } .tip__menu:hover { color: var(--text); border-color: var(--accent-border); }
.tip__flags { display: flex; gap: .4rem; flex-wrap: wrap; padding: .7rem 1rem 0; }
.tip__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: 1rem 1rem .7rem; text-align: center; }
.fact { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; }
.fact__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); margin-bottom: .45rem; overflow: hidden; }
.fact__ic .ic { width: 20px; height: 20px; } .fact__ic--bm { background: transparent; border: 0; } .fact__ic--bm img { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; }
.bm-ph { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bm); color: #fff; font: 800 .72rem var(--font-display); }
.fact small { font: 700 .66rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: var(--accent-text); }
.fact b { font: 700 .98rem/1.25 var(--font-display); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fact__date { font-weight: 500; color: var(--muted); font-size: .82em; }
.fact__cd { font-size: .7rem; color: var(--warn); font-weight: 600; }
.tip__wr { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .3rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); cursor: default; }
.tip__ring { width: 34px; height: 34px; flex: none; } .tip__ring .bg { fill: none; stroke: var(--surface-3); stroke-width: 4; } .tip__ring .fg { fill: none; stroke: var(--muted); stroke-width: 4; stroke-linecap: round; }
.tip__wr.good .fg { stroke: var(--success); } .tip__wr.mid .fg { stroke: var(--warn); } .tip__wr.bad .fg { stroke: var(--danger); }
.tip__wr-txt { display: grid; line-height: 1.1; } .tip__wr-txt b { font: 800 .95rem var(--font-display); color: var(--text); } .tip__wr-txt small { font-size: .66rem; color: var(--muted); }
.tip__wr.good .tip__wr-txt b { color: var(--success); } .tip__wr.bad .tip__wr-txt b { color: var(--danger); }
.tip__wr.is-anon { padding: .35rem .75rem .35rem .5rem; border-color: var(--accent-border); background: var(--accent-softer); } .tip__wr.is-anon > .ic { color: var(--accent-text); width: 22px; height: 22px; }
.tip__match { margin: .1rem 1rem .7rem; padding: .75rem .9rem; border-radius: 14px; background: linear-gradient(180deg, var(--surface-2), transparent 140%); border: 1px solid var(--border); }
.tip__league { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: var(--fs-xs); color: var(--muted); margin-bottom: .5rem; text-align: center; } .tip__league .ic { color: var(--accent-text); }
.tip__teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; color: var(--text); }
.tip__team { font: 700 1rem/1.25 var(--font-display); overflow-wrap: anywhere; } .tip__team--home { text-align: right; } .tip__team--away { text-align: left; }
a.tip__teams:hover .tip__team { color: var(--accent-text); }
.tip__vs { display: grid; place-items: center; align-content: center; min-width: 40px; min-height: 40px; padding: 0 .4rem; border-radius: 12px; background: var(--surface-3); color: var(--muted); font: 800 .72rem var(--font-display); letter-spacing: .06em; }
.tip__score { font: 800 .95rem var(--font-display); color: var(--live); font-variant-numeric: tabular-nums; } .tip__score.final { color: var(--text); }
.tip__ticket { position: relative; display: flex; margin: 0 1rem .6rem; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); overflow: hidden; }
.tip__ticket-main { flex: 1; min-width: 0; padding: .7rem .9rem; display: grid; gap: .2rem; border-left: 4px solid var(--accent); }
.tip__ticket-main small { display: inline-flex; align-items: center; gap: .3rem; font: 700 .66rem var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .tip__ticket-main small .ic { color: var(--accent-text); }
.tip__pick { font: 700 1.05rem/1.3 var(--font-display); color: var(--text); overflow-wrap: anywhere; }
.tip__ticket-side { flex: none; display: grid; justify-items: center; align-content: center; gap: .3rem; padding: .6rem .9rem; border-left: 2px dashed var(--border-strong); position: relative; background: var(--accent-softer); }
.tip__ticket-side::before, .tip__ticket-side::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); }
.tip__ticket-side::before { top: -9px; } .tip__ticket-side::after { bottom: -9px; }
.tip__odds { font: 800 1.35rem/1 var(--font-display); color: var(--accent-text); letter-spacing: -.01em; white-space: nowrap; }
.tip__stake { display: inline-flex; align-items: center; gap: .35rem; font: 700 .68rem var(--font-display); color: var(--muted); } .tip__stake .bars { display: flex; gap: 1.5px; } .tip__stake .bars i { width: 3px; height: 9px; border-radius: 1px; background: var(--surface-3); } .tip__stake .bars i.on { background: var(--accent); }
.tip__slip { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: 7px; font: 600 .7rem var(--font-display); color: var(--text-2); border: 1px solid var(--border-strong); background: var(--surface); } .tip__slip:hover { color: var(--accent-text); border-color: var(--accent-border); }
.tip[data-status="won"] .tip__ticket-main { border-left-color: var(--success); } .tip[data-status="won"] .tip__ticket-side { background: var(--success-soft); } .tip[data-status="won"] .tip__odds { color: var(--success); }
.tip[data-status="lost"] .tip__ticket-main { border-left-color: var(--danger); } .tip[data-status="lost"] .tip__ticket-side { background: var(--danger-soft); } .tip[data-status="lost"] .tip__odds { color: var(--danger); text-decoration: line-through; text-decoration-thickness: 2px; }
.tip[data-status="void"] .tip__ticket-main { border-left-color: var(--muted); }
.tip.is-link { cursor: pointer; } .tip.is-link:hover { border-color: var(--accent-border); }
.tip__analysis { padding: .35rem 1rem 0; }
.tip__analysis .prose { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); }
.tip__analysis.is-clamped .prose { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tip__more { margin-top: .3rem; display: inline-flex; align-items: center; gap: .25rem; font: 600 var(--fs-sm) var(--font-display); color: var(--accent-text); }
.tip__time { padding: .35rem 1rem .8rem; font-size: var(--fs-xs); color: var(--muted); }
.tip__foot { margin-top: auto; display: flex; align-items: center; gap: .2rem; padding: .55rem .8rem; border-top: 1px solid var(--border); }
.tip__foot .grow { flex: 1; }
.tip__like { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .6rem; border-radius: 9px; color: var(--text-2); font-weight: 600; font-size: var(--fs-sm); }
.tip__like:hover { background: var(--surface-2); color: var(--text); } .tip__like.is-active { color: var(--accent-text); } .tip__like small { color: var(--muted); font-weight: 500; } .tip__like .emo { font-size: 1.05rem; }
.tip__act { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--text-2); } .tip__act:hover { background: var(--surface-2); color: var(--text); } .tip__act.is-active { color: var(--accent-text); }
.tip__comments-btn { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; padding: .4rem .5rem; border-radius: 8px; } .tip__comments-btn:hover { color: var(--text); background: var(--surface-2); } .tip__comments-btn span { color: var(--muted); font-weight: 500; }
.tip__quick { display: flex; gap: .6rem; align-items: center; padding: .65rem .9rem .8rem; background: var(--bg-2); border-top: 1px solid var(--border); }
.tip__quick[hidden] { display: none; }
.tip__quick-input { flex: 1; display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 .8rem; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: var(--fs-sm); text-align: left; } .tip__quick-input:hover { border-color: var(--accent-border); }
.tip__comments { border-top: 1px solid var(--border); padding: 1rem; background: var(--bg-2); }
.tip--compact .tip__analysis, .tip--compact .tip__quick { display: none; }
.tips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; align-items: stretch; }
.tips-list { display: grid; gap: 1rem; }
.comments { display: grid; gap: .8rem; }
.comment { display: flex; gap: .7rem; } .comment__body { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .6rem .8rem; }
.comment__head { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; } .comment__head b { color: var(--text); font-size: var(--fs-sm); }
.comment__text { font-size: var(--fs-sm); margin-top: .2rem; white-space: pre-wrap; overflow-wrap: anywhere; } .comment.is-deleted .comment__text { color: var(--muted); font-style: italic; }
.comment__actions { display: flex; gap: .7rem; margin-top: .3rem; font-size: var(--fs-xs); } .comment__actions button { color: var(--muted); font-weight: 600; } .comment__actions button:hover { color: var(--accent-text); }
.comment--reply { margin-left: 2.6rem; }
.comment-form { display: flex; gap: .6rem; align-items: flex-end; } .comment-form .textarea { min-height: 44px; height: 44px; resize: none; }
.coupon { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.coupon__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem .6rem; }
.coupon__title { padding: 0 1.15rem .7rem; font: 700 1.12rem/1.3 var(--font-display); display: flex; align-items: center; gap: .5rem; }
.coupon__title .ic { color: var(--accent-text); }
.coupon__legs { margin: 0 1.15rem; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.leg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; padding: .65rem .8rem; }
.leg + .leg { border-top: 1px dashed var(--border-strong); }
.leg__ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent-text); }
.leg__event { font-weight: 650; font-size: var(--fs-sm); } .leg__sub { font-size: var(--fs-xs); color: var(--muted); }
.leg__pick { font-size: var(--fs-sm); color: var(--text-2); text-align: right; } .leg__odds { font: 700 1rem var(--font-display); color: var(--accent-text); min-width: 46px; text-align: right; }
.leg[data-status="won"] .leg__ic { background: var(--success-soft); color: var(--success); } .leg[data-status="lost"] .leg__ic { background: var(--danger-soft); color: var(--danger); }
.coupon__sum { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .9rem 1.15rem; }
.coupon__sum .k { font: 700 var(--fs-2xs)/1 var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: block; margin-bottom: .3rem; }
.coupon__sum .v { font: 800 1.25rem/1 var(--font-display); } .coupon__sum .v.odds { color: var(--accent-text); font-size: 1.55rem; }
.slip { position: fixed; right: 1rem; bottom: 1rem; z-index: 250; width: min(360px, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.slip__head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; background: var(--accent); color: #fff; font: 700 var(--fs-md) var(--font-display); cursor: pointer; }
.slip__body { max-height: 46vh; overflow-y: auto; padding: .5rem; }
.slip__item { display: flex; gap: .5rem; align-items: center; padding: .5rem .55rem; border-radius: 9px; font-size: var(--fs-sm); } .slip__item:hover { background: var(--surface-2); }
.slip__foot { padding: .7rem .9rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.slip.is-collapsed .slip__body, .slip.is-collapsed .slip__foot { display: none; }
@media (max-width: 760px) { .slip { bottom: calc(70px + env(safe-area-inset-bottom)); } }
@media (max-width: 560px) { .tip__pick { grid-template-columns: 1fr 1fr; } .tip__pick .pickcell { grid-column: 1 / -1; border-bottom: 1px solid var(--border); } .tip__pick > div + div { border-left: 0; } .tip__pick .stake { border-left: 1px solid var(--border) !important; } .leg { grid-template-columns: auto minmax(0, 1fr) auto; } .leg__pick { grid-column: 2; text-align: left; } }
.cmodal .comments { max-height: min(52dvh, 520px); overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
.cmodal .comment-form { position: sticky; bottom: 0; background: var(--surface); padding-top: .6rem; }
.one-comments { margin-top: 1rem; } .one-comments .card__title { margin-bottom: 1rem; }
.tips-list { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.tip__analysis.is-clamp3.is-clamped .prose { -webkit-line-clamp: 3; line-clamp: 3; }
.tips-grid > .tip .tip__time { margin-top: auto; } .tips-grid > .tip .tip__foot { margin-top: 0; }
.comment.is-flash .comment__body { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tf-bm-other { margin-top: .7rem; max-width: 360px; } .tf-bm-other[hidden] { display: none; }
.tf-quick { flex-wrap: wrap; overflow: visible; }
.tf .chips { max-width: 100%; }
.tip__notice { margin: .2rem 0 .6rem; font-size: var(--fs-sm); }
@keyframes evFlash { 0% { background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); } 100% { background: transparent; box-shadow: none; } }
.ev-flash { animation: evFlash 1.6s ease-out; border-radius: 8px; }
.comment-compose { display: flex; align-items: center; gap: .6rem; width: 100%; margin-top: .8rem; padding: .45rem .55rem .45rem .45rem; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-3); font: inherit; font-size: var(--fs-sm); text-align: left; }
.comment-compose span { flex: 1; } .comment-compose > .ic { color: var(--accent-text); }
.comment-compose:active { background: var(--surface-3); }
@media (max-width: 560px) {
.modal__panel--comments { height: 92dvh; display: flex; flex-direction: column; padding-bottom: 0; }
.modal__panel--comments .modal__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal__panel--comments .cmodal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.modal__panel--comments .cmodal .comments { flex: 1 1 auto; max-height: none; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: .8rem; }
.modal__panel--comments .cmodal .comments > * { flex: none; }
.modal__panel--comments .comment-form { position: static; margin: .6rem -1.1rem 0 !important; padding: .7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.modal__panel--comments .comment-form .textarea { font-size: 16px; }
}
.tip__sx { display: block; font: 600 .62rem var(--font-body, inherit); color: var(--muted); letter-spacing: 0; white-space: nowrap; margin-top: -.1rem; }

/* --- css/components/chat.css --- */
.pdot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); }
.pill .pdot { position: static; display: inline-block; width: 8px; height: 8px; border: 0; margin-right: .1rem; }
.typing-dots { display: inline-flex; gap: 3px; align-items: center; padding: .55rem .7rem; border-radius: 16px; background: var(--surface-3); }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: tdots 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.cv, .lc { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--surface); }
.cv__body, .lc__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: auto; padding: .8rem .85rem .4rem; scroll-behavior: auto; }
.cv__list { display: flex; flex-direction: column; gap: 2px; }
.cv__more { display: flex; justify-content: center; padding: .4rem; }
.cv__more .spinner { width: 18px; height: 18px; }
.cv__loading { display: flex; justify-content: center; align-items: center; min-height: 120px; }
.cv__empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 2.2rem 1rem; color: var(--muted); font-size: var(--fs-sm); }
.cv__empty b { color: var(--text); font: 700 1.05rem/1.2 var(--font-display); margin-top: .3rem; }
.cv__empty--live .ic { color: var(--faint); }
.cv__day { display: flex; justify-content: center; margin: .8rem 0 .5rem; }
.cv__day span { font: 600 var(--fs-2xs)/1 var(--font-body); letter-spacing: .02em; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: .3rem .6rem; border-radius: var(--r-pill); }
.cv__typing { padding: .25rem 0 .2rem 32px; }
.cv__jump { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .75rem; border-radius: var(--r-pill);
background: var(--accent); color: var(--on-accent); font: 600 var(--fs-xs)/1 var(--font-body); box-shadow: var(--shadow-lg); border: 0; cursor: pointer; }
.cv__notice { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); background: var(--surface-2); }
.cv__form { display: flex; align-items: flex-end; gap: .35rem; padding: .55rem .6rem; border-top: 1px solid var(--border); background: var(--surface); }
.cv__form textarea { flex: 1 1 auto; min-width: 0; resize: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 18px; padding: .55rem .85rem; font: 400 var(--fs-md)/1.35 var(--font-body);
max-height: 132px; min-height: 38px; outline: none; transition: border-color .15s; }
.cv__form textarea:focus { border-color: var(--accent-border); }
.cv__form .icon-btn { flex: 0 0 auto; margin-bottom: 2px; }
.cv__send { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; position: relative; }
.cv__send[data-wait]::after { content: attr(data-wait); position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); border-radius: 50%; font: 700 var(--fs-xs)/1 var(--font-body); }
.msg { position: relative; display: flex; align-items: flex-end; gap: .4rem; max-width: 100%; }
.msg--first { margin-top: .45rem; }
.msg__av { flex: 0 0 24px; width: 24px; }
.msg__bubble { max-width: min(78%, 520px); padding: .5rem .78rem; border-radius: 18px; background: var(--surface-3); color: var(--text); font-size: var(--fs-md); line-height: 1.4; overflow-wrap: anywhere; white-space: normal; }
.msg__bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg:not(.msg--own):not(.msg--last) .msg__bubble { border-bottom-left-radius: 6px; }
.msg:not(.msg--own):not(.msg--first) .msg__bubble { border-top-left-radius: 6px; }
.msg--own { flex-direction: row-reverse; }
.msg--own .msg__bubble { background: var(--accent); color: var(--on-accent); }
.msg--own:not(.msg--last) .msg__bubble { border-bottom-right-radius: 6px; }
.msg--own:not(.msg--first) .msg__bubble { border-top-right-radius: 6px; }
.msg__bubble--emoji { background: none !important; padding: 0 .1rem; font-size: 2.2rem; line-height: 1.15; }
.msg__bubble--deleted { background: transparent !important; color: var(--muted) !important; border: 1px dashed var(--border-strong); font-style: italic; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: .3rem; }
.msg.is-pending .msg__bubble { opacity: .6; }
.msg.is-failed .msg__bubble { background: var(--danger-soft); color: var(--text); border: 1px solid var(--danger); }
.msg__act { opacity: 0; width: 28px; height: 28px; transition: opacity .12s; }
.msg:hover .msg__act, .msg__act:focus-visible { opacity: 1; }
@media (hover: none) { .msg__act { opacity: .55; } }
.msg__state { align-self: flex-end; display: inline-flex; align-items: center; gap: .2rem; font-size: var(--fs-2xs); color: var(--muted); padding: .15rem .25rem 0; }
.msg__state--err { color: var(--danger); }
.msg__state .link { color: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.lc__head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lc__head .card__title { margin-right: auto; }
.lc__head .pill { display: inline-flex; align-items: center; gap: .3rem; }
.lc__head-acts { display: flex; align-items: center; gap: .3rem; }
.lc__ann { display: flex; align-items: flex-start; gap: .6rem; margin: .6rem .7rem 0; padding: .6rem .7rem; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-border); font-size: var(--fs-sm); }
.lc__ann-ic { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.lc__ann-ic .ic { background: currentColor; }
.lc__ann-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; overflow-wrap: anywhere; }
.lc__ann-main b { font: 700 var(--fs-xs)/1.2 var(--font-display); color: var(--accent-text); text-transform: uppercase; letter-spacing: .04em; }
.lc__list { display: flex; flex-direction: column; gap: 1px; }
.lcm { position: relative; display: flex; align-items: flex-start; gap: .55rem; padding: .32rem .45rem; border-radius: var(--r-sm); }
.lcm:hover { background: var(--surface-hover); }
.lcm .avatar { margin-top: 1px; flex: 0 0 auto; }
.lcm__main { min-width: 0; flex: 1 1 auto; font-size: var(--fs-sm); line-height: 1.42; }
.lcm__head { display: inline-flex; align-items: center; gap: .3rem; margin-right: .35rem; }
.lcm__name { font-weight: 700; color: var(--text); }
.lcm__name:hover { text-decoration: underline; }
.lcm__head time { font-size: var(--fs-2xs); color: var(--faint); }
.lcm__text { color: var(--text-2); overflow-wrap: anywhere; }
.lcm__text a { color: var(--accent-text); text-decoration: underline; }
.lcm__text--emoji { font-size: 1.6rem; line-height: 1.2; display: block; }
.lcm--own .lcm__name { color: var(--accent-text); }
.lcm__act { opacity: 0; position: absolute; right: .25rem; top: .2rem; width: 26px; height: 26px; background: var(--surface-2); }
.lcm:hover .lcm__act, .lcm__act:focus-visible { opacity: 1; }
@media (hover: none) { .lcm__act { opacity: .5; } }
.lcm--sys { justify-content: center; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--fs-xs); font-style: italic; padding: .35rem; text-align: center; }
.lcm--sys:hover { background: none; }
.match-chat { padding: 0; overflow: hidden; height: min(560px, 72vh); display: flex; flex-direction: column; }
.match-chat .lc { border-radius: inherit; }
@media (max-width: 760px) { .match-chat { height: 70vh; } .lc__dock-btn { display: none; } }
.chat-dock { position: fixed; right: 1rem; bottom: 0; z-index: 260; display: flex; flex-direction: row-reverse; gap: .7rem; align-items: flex-end; pointer-events: none; }
.chat-dock[hidden] { display: none; }
.chat-dock > * { pointer-events: auto; }
.dw { width: 328px; height: 456px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-lg); overflow: hidden; animation: dwIn .18s var(--ease); }
@keyframes dwIn { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.dw__in { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dw .cv, .dw .lc { height: 100%; }
.dw.is-min { height: auto; width: 248px; }
.dw.is-min .cv__body, .dw.is-min .lc__body, .dw.is-min .cv__form, .dw.is-min .cv__notice, .dw.is-min .lc__ann, .dw.is-min .cv__jump, .dw.is-min [data-dw-menu], .dw.is-min [data-dw-mod] { display: none !important; }
.dw__head { display: flex; align-items: center; gap: .45rem; padding: .45rem .4rem .45rem .6rem; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; background: var(--surface); flex: 0 0 auto; }
.dw.has-unread .dw__head { background: var(--accent-soft); }
.dw__who { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; }
.dw__av { position: relative; flex: 0 0 auto; display: inline-flex; }
.dw__live-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.dw__live-ic .ic { background: currentColor; }
.dw__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dw__names b { font: 700 var(--fs-sm)/1.2 var(--font-display); color: var(--text); max-width: 100%; }
.dw__names small { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw__acts { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
.dw__acts .icon-btn { width: 28px; height: 28px; }
.dw__badge { position: static; }
.dw .cv__jump { bottom: 62px; }
.dw .cv__body, .dw .lc__body { padding: .6rem .6rem .3rem; }
.dw .msg__bubble { font-size: var(--fs-sm); max-width: 82%; }
.dw .cv__form textarea { font-size: var(--fs-sm); }
@media (max-width: 760px) { .chat-dock { display: none !important; } }
.rpick__search { display: flex; align-items: center; gap: .5rem; padding: .2rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.rpick__search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-softer); }
.rpick__search .ic { color: var(--muted); }
.rpick__to { font-weight: 600; color: var(--muted); font-size: var(--fs-sm); }
.rpick__search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; color: var(--text); font: 400 var(--fs-md)/1 var(--font-body); padding: .65rem 0; }
.rpick__label { margin: 1rem 0 .4rem; font: 700 var(--fs-2xs)/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rpick__list { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 420px); overflow-y: auto; margin: 0 -.4rem; padding: 0 .4rem; }
.rpick__item { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .5rem .55rem; border-radius: var(--r-md); border: 0; background: none; color: var(--text); cursor: pointer; }
.rpick__item:hover, .rpick__item.is-active { background: var(--surface-hover); }
.rpick__item.is-active { box-shadow: inset 0 0 0 1px var(--accent-border); }
.rpick__item.is-off { opacity: .5; cursor: not-allowed; }
.rpick__av { position: relative; flex: 0 0 auto; display: inline-flex; }
.rpick__main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: .1rem; }
.rpick__main b { font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.rpick__main small { color: var(--muted); font-size: var(--fs-xs); }
.rpick__empty { padding: 1.4rem .5rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.chat-panel { width: min(380px, calc(100vw - 1.2rem)); }
.chat-panel .panel__body { overflow-y: auto; padding: .3rem; min-height: 120px; }
.cl-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem; border-radius: var(--r-md); color: var(--text); text-decoration: none; position: relative; }
.cl-item:hover { background: var(--surface-hover); }
.cl-item.is-active { background: var(--accent-softer); box-shadow: inset 3px 0 0 var(--accent); }
.cl-item__av { position: relative; display: inline-flex; flex: 0 0 auto; }
.cl-item__main { display: flex; flex-direction: column; gap: .18rem; min-width: 0; flex: 1 1 auto; }
.cl-item__top, .cl-item__bottom { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.cl-item__top b { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.cl-item__top time { flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--muted); }
.cl-item__bottom { color: var(--muted); font-size: var(--fs-sm); }
.cl-item__bottom > span:first-child { flex: 1 1 auto; min-width: 0; }
.cl-item__bottom .badge { position: static; flex: 0 0 auto; }
.cl-item.is-unread .cl-item__top b, .cl-item.is-unread .cl-item__bottom > span:first-child { color: var(--text); font-weight: 700; }
.cl-more { display: flex; justify-content: center; padding: .5rem; }
.dw .cv__body, .dw .lc__body, .cv--page .cv__body, .panel .lc__body, .panel .cv__body { overscroll-behavior-y: contain; }

/* --- css/pages/chat.css --- */
body.is-chat-page #footer { display: none; }
.chat-page { padding-top: 1rem; padding-bottom: 1rem; }
.chat-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - var(--topbar-h) - 2rem); min-height: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.chat-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.chat-side__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 1rem 1rem .6rem; }
.chat-side__head h1 { font: 800 1.45rem/1 var(--font-display); }
.chat-side__search { display: flex; align-items: center; gap: .45rem; margin: 0 1rem .6rem; padding: 0 .75rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.chat-side__search:focus-within { border-color: var(--accent-border); }
.chat-side__search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; color: var(--text); padding: .55rem 0; font: 400 var(--fs-sm)/1 var(--font-body); }
.chat-side__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 .5rem .5rem; }
.chat-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.chat-main__empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 2rem; color: var(--muted); }
.chat-main__empty .ic { color: var(--faint); }
.chat-main__empty h2 { font: 800 1.3rem/1.2 var(--font-display); color: var(--text); }
.chat-main__conv { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.chat-main__view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-main__head { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); min-height: 64px; }
.chat-main__who { display: flex; align-items: center; gap: .65rem; min-width: 0; color: var(--text); text-decoration: none; flex: 1 1 auto; }
.chat-main__names { display: flex; flex-direction: column; min-width: 0; }
.chat-main__names b { font: 700 1rem/1.2 var(--font-display); display: flex; align-items: center; gap: .35rem; }
.chat-main__names small { font-size: var(--fs-xs); color: var(--muted); }
.chat-main__acts { display: flex; align-items: center; gap: .4rem; }
.chat-main__acts .pill { display: inline-flex; align-items: center; gap: .25rem; }
.chat-back { display: none; }
.chat-main .cv__body { padding: 1rem 1.2rem .5rem; }
@media (max-width: 960px) { .chat-shell { grid-template-columns: 290px minmax(0, 1fr); height: calc(100dvh - var(--topbar-h) - 2rem - 62px - env(safe-area-inset-bottom)); } }
@media (max-width: 760px) {
.chat-page { padding: 0; max-width: none; }
.chat-shell { display: block; height: calc(100dvh - var(--topbar-h) - 62px - env(safe-area-inset-bottom)); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.chat-side, .chat-main { height: 100%; }
.chat-shell .chat-main { display: none; }
.chat-shell.is-conv .chat-side { display: none; }
.chat-shell.is-conv .chat-main { display: flex; }
.chat-back { display: inline-flex; }
.chat-side { border-right: 0; }
.chat-side__head .btn span { display: none; }
.chat-main__head { padding: .5rem .6rem; min-height: 56px; }
.chat-main .cv__body { padding: .7rem .7rem .4rem; }
}
@media (max-width: 760px) {
body.is-chat-page .chat-shell { position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); height: auto; z-index: 5; }
body.is-chat-page .chat-shell.is-conv { bottom: 0; z-index: 215; }
body.is-chat-page:has(.chat-shell.is-conv) .bottom-nav { display: none !important; }
.chat-shell.is-conv .cv__form { padding-bottom: calc(.55rem + env(safe-area-inset-bottom)); }
}

/* --- css/pages/support.css --- */
.help-contact__btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.sup-av { display: inline-grid; place-items: center; background: var(--accent); color: #fff; border-radius: 50%; }
.sup-av .sup-av__t { font: 800 .62rem/1 var(--font-display); letter-spacing: .02em; }
.avatar--md.sup-av .sup-av__t, .avatar--sm.sup-av .sup-av__t { font-size: .7rem; } .avatar--lg.sup-av .sup-av__t { font-size: 1.05rem; } .avatar--xs.sup-av .sup-av__t { font-size: .45rem; }
.sup-online { display: inline-flex; align-items: center; gap: .35rem; color: var(--success); font-weight: 600; }
.sup-offline { color: var(--muted); }
.pdot--static { position: static; display: inline-block; width: 8px; height: 8px; border: 0; }
.sup-team-tag { display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem; padding: 1px 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font: 700 .62rem/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }
.sup-team-tag .ic { width: 10px; height: 10px; }
.sup-page .crumbs { margin-bottom: .7rem; }
.sup-page { padding-top: 1rem; }
.sup-page .chat-shell { height: calc(100dvh - var(--topbar-h) - 6.5rem); min-height: 440px; }
.sup-team-box { margin: 0 1rem .8rem; padding: .75rem .8rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.sup-team { display: flex; align-items: center; gap: .65rem; } .sup-team > div { min-width: 0; display: grid; gap: .1rem; } .sup-team b { font: 700 .98rem/1.2 var(--font-display); } .sup-team small { font-size: var(--fs-xs); }
.sup-list-h { margin: .7rem .5rem .3rem; font: 700 var(--fs-2xs)/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sup-item { display: flex; align-items: center; gap: .65rem; padding: .65rem .6rem; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.sup-item:hover { background: var(--surface-hover); } .sup-item.is-active { background: var(--accent-soft); }
.sup-item__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.sup-item__txt { flex: 1; min-width: 0; display: grid; gap: .1rem; } .sup-item__txt b { font-weight: 600; font-size: var(--fs-sm); } .sup-item__txt small { color: var(--muted); font-size: var(--fs-xs); }
.sup-item.is-unread .sup-item__txt b { font-weight: 800; } .sup-item.is-unread .sup-item__txt small { color: var(--text-2); }
.sup-item__meta { flex: none; display: grid; justify-items: end; gap: .2rem; } .sup-item__meta small { color: var(--muted); font-size: var(--fs-2xs); }
.sup-list-empty { display: grid; justify-items: center; gap: .4rem; text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: var(--fs-sm); } .sup-list-empty .ic { color: var(--faint); }
@media (max-width: 760px) {
.sup-page .crumbs { display: none; }
.sup-page .chat-shell { height: calc(100dvh - var(--topbar-h)); }
body.is-chat-page .sup-page .chat-shell { bottom: 0; }
}
.sup-welcome { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 1.6rem 1rem 1.2rem; color: var(--text-2); font-size: var(--fs-sm); max-width: 420px; margin: 0 auto; }
.sup-welcome b { color: var(--text); font: 700 1.05rem/1.2 var(--font-display); margin-top: .3rem; }
.sup-sys { display: flex; justify-content: center; align-items: center; gap: .3rem; margin: .6rem auto; padding: .3rem .7rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); width: fit-content; max-width: 90%; text-align: center; }
.sup-who { font-size: var(--fs-2xs); color: var(--muted); margin: .5rem 0 .15rem 34px; display: flex; align-items: center; gap: .3rem; }
.sup-who--own { justify-content: flex-end; margin-left: 0; margin-right: .2rem; }
.sup-who .sup-team-tag { margin-left: 0; }
.msg--note .msg__bubble { background: var(--warn-soft) !important; color: var(--text) !important; border: 1px dashed var(--warn); }
.sup-closed { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .7rem .9rem; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); }
.sup-closed > span:first-child { display: inline-flex; align-items: center; gap: .4rem; }
.sup-closed__btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.sup-closed[hidden] { display: none; }
.cv__form.is-note textarea { background: var(--warn-soft); border-color: var(--warn); }
.sup-note-btn.is-on { color: var(--warn); background: var(--warn-soft); }
.sup-adm { display: grid; grid-template-columns: 320px minmax(0, 1fr) 320px; gap: 0; height: calc(100dvh - var(--topbar-h) - 13rem); min-height: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.sup-adm__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.sup-adm__filters { display: grid; gap: .5rem; padding: .75rem; border-bottom: 1px solid var(--border); }
.sup-adm__filters .chips { display: flex; gap: .3rem; flex-wrap: wrap; } .sup-adm__filters .chip { font-size: var(--fs-xs); padding: .3rem .55rem; }
.sup-adm__items { flex: 1; min-height: 0; overflow-y: auto; padding: .35rem; }
.sup-adm__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sup-adm__side { border-left: 1px solid var(--border); overflow-y: auto; padding: .8rem; display: grid; gap: .8rem; align-content: start; }
.sup-adm__side .card { margin: 0; }
.sup-adm__head { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); min-height: 60px; flex-wrap: wrap; }
.sup-adm__head .grow { flex: 1 1 200px; min-width: 0; }
.sup-adm__acts { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sup-adm__head b { font: 700 .98rem/1.2 var(--font-display); }
.sup-adm__view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sup-adm .chat-main__empty { margin: auto; }
.sup-tk { display: flex; gap: .55rem; padding: .6rem .55rem; border-radius: var(--r-md); color: inherit; text-decoration: none; cursor: pointer; align-items: flex-start; }
.sup-tk:hover { background: var(--surface-hover); } .sup-tk.is-active { background: var(--accent-soft); }
.sup-tk__txt { flex: 1; min-width: 0; display: grid; gap: .12rem; } .sup-tk__txt b { font-size: var(--fs-sm); display: flex; gap: .3rem; align-items: center; } .sup-tk__txt small { color: var(--muted); font-size: var(--fs-xs); }
.sup-tk__meta { flex: none; display: grid; justify-items: end; gap: .2rem; } .sup-tk__meta small { color: var(--muted); font-size: var(--fs-2xs); }
.sup-tk.is-waiting .sup-tk__txt b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex: none; }
.sup-set-av { display: flex; align-items: center; gap: .8rem; }
@media (max-width: 1440px) { .sup-adm { grid-template-columns: 290px minmax(0, 1fr); } .sup-adm__side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); max-height: none; } .sup-adm { height: auto; } .sup-adm__main { height: 560px; } .sup-adm__list { max-height: 560px; } }
@media (max-width: 760px) { .sup-adm { grid-template-columns: 1fr; } .sup-adm__list { max-height: 380px; border-right: 0; border-bottom: 1px solid var(--border); } .sup-adm.is-open .sup-adm__list { display: none; } .sup-adm__main { height: 72dvh; } }
.dw--support .dw__head { background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--surface); }

/* --- css/layout/shell.css --- */
.app { flex: 1; width: 100%; outline: 0; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 1.8rem clamp(1rem, 3vw, 1.75rem) 3.5rem; }
.container--narrow { max-width: 900px; } .container--mid { max-width: 1080px; } .container--wide { max-width: 1480px; }
.layout-2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.layout-2--left { grid-template-columns: 300px minmax(0, 1fr); }
.sticky-side { position: sticky; top: calc(var(--topbar-h) + 1rem); display: grid; gap: 1rem; }
@media (max-width: 1020px) { .layout-2, .layout-2--left { grid-template-columns: minmax(0, 1fr); } .sticky-side { position: static; } }
.layout-2 > *, .layout-2--left > * { min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-enter { animation: pageIn .25s var(--ease); } @keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }
.topbar { position: sticky; top: 0; z-index: 200; height: var(--topbar-h); background: var(--bg-elev); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--border); }
.topbar__in { height: 100%; display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); padding: 0 clamp(.9rem, 2vw, 1.6rem); max-width: 1680px; margin: 0 auto; }
.topbar__brand { display: flex; align-items: center; flex: none; }
.topbar__brand .brand-logo { width: 76px; height: 26px; }
.topbar__brand .beta { margin-left: .5rem; font: 800 .6rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-text); }
.nav { display: flex; align-items: stretch; height: 100%; gap: clamp(.4rem, 1.4vw, 1.4rem); }
.nav a { position: relative; display: flex; align-items: center; gap: .45rem; font: 600 1.05rem/1 var(--font-display); color: var(--text-2); padding: 0 .3rem; transition: color .15s; }
.nav a:hover { color: var(--text); } .nav a.is-active { color: var(--accent-text); } .nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.nav--public a { font-size: .95rem; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: .5rem; }
.tb-btn { position: relative; height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: 0 .75rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font: 600 .95rem/1 var(--font-display); transition: .15s; }
.tb-btn:hover, .tb-btn.is-open { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); } .tb-btn--icon { padding: 0; width: 40px; }
.tb-btn .ic { width: 20px; height: 20px; }
.tb-avatar { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; aspect-ratio: 1; border-radius: 50%; padding: 0; border: 2px solid transparent; transition: border-color .15s; } .tb-avatar .avatar { --s: 34px; } .tb-avatar:hover, .tb-avatar.is-open { border-color: var(--accent); }
.tb-social { display: flex; gap: .2rem; }
@media (max-width: 960px) { .nav--app { display: none; } }
@media (max-width: 760px) { .nav--public { display: none; } .tb-btn .tb-label { display: none; } .tb-btn--chat { padding: 0; width: 40px; } .tb-social { display: none; } }
.panel { position: fixed; z-index: 320; top: calc(var(--tb-bottom, var(--topbar-h)) + 8px); right: clamp(.6rem, 2vw, 1.6rem); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: pop .16s var(--ease); display: flex; flex-direction: column; max-height: calc(100dvh - var(--tb-bottom, var(--topbar-h)) - 24px); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--border); flex: none; }
.panel__head h3 { font-size: 1.05rem; } .panel__foot { padding: .6rem; border-top: 1px solid var(--border); flex: none; }
.panel__body { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.notif-panel { width: min(420px, calc(100vw - 1.2rem)); }
.notif { display: flex; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); position: relative; cursor: pointer; transition: background .12s; }
.notif:hover { background: var(--surface-hover); } .notif:last-child { border-bottom: 0; }
.notif.is-unread { background: var(--accent-softer); } .notif.is-unread::after { content: ""; position: absolute; right: .9rem; top: 1.1rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.notif__icon { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent-text); }
.notif__main { flex: 1; min-width: 0; padding-right: .9rem; } .notif__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.35; } .notif__body { font-size: var(--fs-xs); color: var(--text-2); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notif__time { font-size: var(--fs-2xs); color: var(--muted); margin-top: .25rem; }
.user-menu { width: min(360px, calc(100vw - 1.2rem)); }
.um-head { display: flex; gap: .85rem; align-items: center; padding: 1.1rem 1.1rem .95rem; border-bottom: 1px solid var(--border); }
.um-head__name { font: 700 1.05rem/1.2 var(--font-display); } .um-head__first { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; } .um-head__email { font-size: var(--fs-xs); color: var(--muted); }
.um-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.um-stats div { background: var(--surface-2); border-radius: 10px; padding: .5rem .55rem; text-align: center; } .um-stats b { display: block; font: 800 1rem/1.1 var(--font-display); } .um-stats small { font-size: var(--fs-2xs); color: var(--muted); }
.um-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; padding: .5rem; }
.um-item { display: flex; align-items: center; gap: .6rem; padding: .62rem .7rem; border-radius: 10px; font-size: var(--fs-sm); font-weight: 550; color: var(--text-2); } .um-item:hover { background: var(--surface-2); color: var(--text); } .um-item .ic { color: var(--muted); } .um-item:hover .ic { color: var(--accent-text); }
.um-item--wide { grid-column: 1 / -1; } .um-item--accent { background: var(--accent-soft); color: var(--accent-text); } .um-item--accent .ic { color: var(--accent-text); }
.um-theme { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.um-foot { padding: .5rem; border-top: 1px solid var(--border); }
.announce { position: relative; z-index: 190; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .55rem 2.6rem; font-size: var(--fs-sm); text-align: center; background: var(--accent); color: #fff; }
.announce a { text-decoration: underline; font-weight: 700; } .announce .close { position: absolute; right: .7rem; color: #fff; opacity: .8; }
.announce--warning { background: #b45309; } .announce--danger { background: #b91c1c; } .announce--success { background: #15803d; } .announce--info { background: #1d4ed8; }
.footer { border-top: 1px solid var(--border); background: var(--bg-2); }
.footer__in { max-width: var(--container); margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 1.75rem) 1.6rem; display: grid; gap: 1.2rem; }
.footer__top { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.footer__links { display: flex; gap: .4rem 1.3rem; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); } .footer__links a:hover { color: var(--accent-text); }
.footer__legal { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__18 { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--danger); color: var(--danger); font: 800 .72rem/1 var(--font-display); flex: none; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; display: none; grid-template-columns: repeat(5, 1fr); height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg-elev); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
.bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; font: 600 .66rem/1 var(--font-display); color: var(--muted); }
.bottom-nav a .ic { width: 22px; height: 22px; } .bottom-nav a.is-active { color: var(--accent-text); }
.bottom-nav .badge { top: 6px; right: calc(50% - 22px); }
@media (max-width: 960px) { .bottom-nav:not([hidden]) { display: grid; } body.has-bottom-nav { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } }
.social-row { display: flex; gap: .5rem; justify-content: center; } .social-row a { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2); transition: .15s; } .social-row a:hover { color: var(--accent-text); background: var(--surface-2); }
.panel__grip { display: none; }
.panel-backdrop { position: fixed; inset: 0; z-index: 315; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); animation: fade-in .15s; }
@media (max-width: 760px) {
.panel { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0; width: 100% !important; max-width: none; max-height: 88dvh; border-radius: 20px 20px 0 0; border-bottom: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); animation: sheet-up .22s ease-out; }
.panel__grip { display: block; width: 44px; height: 5px; border-radius: 5px; background: var(--border-strong); margin: .55rem auto .2rem; }
.notif-panel .panel__body { max-height: calc(88dvh - 140px); }
.user-menu .um-item { padding: .8rem .75rem; font-size: var(--fs-md); }
html.has-sheet, html.has-sheet body { overflow: hidden; }
}
.nav a { white-space: nowrap; }
@media (max-width: 1280px) { .nav--app a { font-size: .95rem; } }
@media (max-width: 1120px) { .nav--app { gap: .5rem; } .nav--app a { font-size: .88rem; padding: 0 .15rem; } }
@media (min-width: 961px) { .um-item--m { display: none !important; } }
.announce-stack { position: relative; z-index: 190; display: grid; } .announce-stack[hidden] { display: none; }
.announce-stack > .announce + .announce { border-top: 1px solid rgba(255, 255, 255, .18); }
.announce__body p, .announce__body div, .announce__body h2, .announce__body h3, .announce__body ul, .announce__body ol { display: inline; margin: 0; font: inherit; padding: 0; }
.announce__body li { display: inline; } .announce__body li + li::before { content: ' · '; }
.announce__body p + p::before, .announce__body div + div::before { content: ' '; }
.tb-search { height: 40px; display: inline-flex; align-items: center; gap: .5rem; padding: 0 .55rem 0 .75rem; min-width: 210px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-3); font: 500 var(--fs-sm) var(--font-body); transition: .15s; cursor: text; }
.tb-search:hover { border-color: var(--border-strong); color: var(--text-2); } .tb-search .ic { width: 18px; height: 18px; flex: none; }
.tb-search__txt { flex: 1; text-align: left; } .tb-search__kbd { font: 700 .66rem var(--font-body); padding: .15rem .35rem; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-3); }
@media (max-width: 1280px) { .tb-search { min-width: 0; width: 40px; padding: 0; justify-content: center; cursor: pointer; } .tb-search__txt, .tb-search__kbd { display: none; } .tb-search .ic { width: 20px; height: 20px; } }
.srch { position: fixed; inset: 0; z-index: 900; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 1rem 1rem; }
.srch__backdrop { position: absolute; inset: 0; background: rgba(4, 7, 10, .62); backdrop-filter: blur(3px); animation: fade .15s ease-out; }
.srch__panel { position: relative; width: 100%; max-width: 680px; max-height: 76vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .18s var(--ease); }
.srch__bar { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); } .srch__bar > .ic { width: 22px; height: 22px; color: var(--accent-text); flex: none; }
.srch__bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 500 1.08rem var(--font-body); }
.srch__bar input::-webkit-search-cancel-button { display: none; }
.srch__spin { width: 18px; height: 18px; border-width: 2px; visibility: hidden; } .srch.is-loading .srch__spin { visibility: visible; }
.srch__esc { font: 700 .7rem var(--font-body); padding: .25rem .45rem; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text-3); background: var(--surface-2); }
.srch__scopes { padding: .6rem 1rem; border-bottom: 1px solid var(--border); flex: none; } .srch__scopes .chip { height: 30px; font-size: var(--fs-xs); }
.srch__results { overflow-y: auto; overscroll-behavior: contain; padding: .35rem .5rem .6rem; min-height: 120px; }
.srch-group + .srch-group { border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .3rem; }
.srch-group__head { display: flex; align-items: center; gap: .4rem; padding: .55rem .55rem .3rem; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--text-3); }
.srch-group__head .link { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.srch-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem; border-radius: var(--r-md); color: var(--text); text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.srch-item:hover, .srch-item.is-sel { background: var(--surface-hover); } .srch-item.is-sel { box-shadow: inset 3px 0 0 var(--accent); }
.srch-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--accent-text); }
.srch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .srch-main b, .srch-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-main b { font-weight: 650; font-size: var(--fs-sm); } .srch-main small { color: var(--text-3); font-size: var(--fs-xs); }
.srch-main mark { background: var(--accent-soft); color: var(--accent-text); border-radius: 3px; padding: 0 1px; }
.srch-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; } .srch-when { color: var(--text-3); font-size: var(--fs-2xs); white-space: nowrap; } .srch-score { font-family: var(--font-display); }
.srch-empty, .srch-hint { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding: 1.6rem 1rem; color: var(--text-2); } .srch-empty > .ic { color: var(--text-3); }
.srch-hint { flex-direction: row; align-items: flex-start; text-align: left; padding: .8rem .6rem; font-size: var(--fs-xs); color: var(--text-3); } .srch-hint .ic { flex: none; margin-top: .1rem; }
.srch__foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--border); font-size: var(--fs-2xs); color: var(--text-3); flex: none; }
.srch__foot kbd { display: inline-block; min-width: 1.4em; text-align: center; padding: 0 .3em; margin-right: .2em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); font: 700 .65rem var(--font-body); }
.srch__foot-r { margin-left: auto; }
html.srch-open { overflow: hidden; }
@media (max-width: 640px) {
.srch { padding: 0; } .srch__panel { max-width: none; max-height: none; height: 100dvh; border-radius: 0; border: 0; }
.srch__foot { display: none; } .srch__bar { padding: .7rem .8rem; }
}
html.is-maint, html.is-maint body { overflow: hidden; }
html.is-maint .modal, html.is-maint .toasts, html.is-maint .loader-bar { z-index: 2100; }
.maint { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1.25rem; overflow-y: auto;
background: radial-gradient(1100px 600px at 50% -10%, rgba(250, 83, 0, .22), transparent 60%), radial-gradient(800px 500px at 100% 110%, rgba(250, 83, 0, .1), transparent 60%), var(--bg); }
.maint__card { width: min(560px, 100%); display: grid; justify-items: center; gap: 1rem; text-align: center; padding: clamp(1.5rem, 5vw, 2.6rem); border: 1px solid var(--border); border-radius: 22px; background: var(--surface, rgba(255, 255, 255, .03)); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.maint__logo { height: 34px; width: auto; opacity: .95; } [data-theme="light"] .maint__logo { filter: invert(1) brightness(.2); }
.maint__ic { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(250, 83, 0, .14); color: var(--accent-text); box-shadow: 0 0 0 10px rgba(250, 83, 0, .06); }
.maint__ic .ic { width: 34px; height: 34px; animation: maint-swing 2.6s ease-in-out infinite; transform-origin: 70% 30%; }
@keyframes maint-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .maint__ic .ic { animation: none; } }
.maint__title { margin: 0; font: 800 clamp(1.45rem, 4.5vw, 1.95rem)/1.15 var(--font-display); letter-spacing: -.01em; }
.maint__body { color: var(--text-2); font-size: var(--fs-md, 1rem); line-height: 1.6; max-width: 46ch; } .maint__body p { margin: 0 0 .5rem; } .maint__body ul { text-align: left; }
.maint__msg { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.maint__eta { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; padding: .9rem 1.1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.maint__eta > .ic { width: 26px; height: 26px; color: var(--accent-text); flex: none; }
.maint__eta div { display: grid; gap: .1rem; } .maint__eta small { color: var(--muted); font-size: var(--fs-xs, .75rem); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.maint__eta b { font: 800 1.15rem var(--font-display); } .maint__eta span { color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.maint__eta.is-late > .ic { color: var(--warn); }
.maint__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; color: var(--muted); font-size: var(--fs-xs, .78rem); }
.maint__live { display: inline-flex; align-items: center; gap: .45rem; } .maint__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }
.tech-notice { justify-content: center; padding-left: 1rem; padding-right: 1rem; } .tech-notice > .ic { flex: none; }
.tech-notice__eta { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .2); font-weight: 700; white-space: nowrap; }
.tech-notice__tag { padding: .05rem .45rem; border-radius: 6px; background: rgba(0, 0, 0, .25); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

/* --- css/pages/home.css --- */
.hero { position: relative; text-align: center; padding: clamp(3.5rem, 9vw, 6.5rem) 1rem clamp(3rem, 7vw, 5rem); overflow: hidden; }
.hero__glow { position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; }
.hero__in { position: relative; max-width: 980px; margin: 0 auto; display: grid; justify-items: center; gap: 1.1rem; }
.hero__eyebrow { font: 700 .9rem/1 var(--font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.hero__title { font: 800 clamp(2.3rem, 6.6vw, 4.6rem)/1.04 var(--font-display); letter-spacing: -.02em; }
.hero__title .text-grad { background-size: 200% 100%; animation: gradShift 9s ease-in-out infinite alternate; padding-bottom: .06em; }
@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.hero__date { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font: 700 .95rem/1 var(--font-display); }
.hero__lead { max-width: 640px; color: var(--text-2); font-size: 1.08rem; }
.hero__cta { margin-top: .6rem; }
.cd { display: flex; gap: clamp(.9rem, 3.5vw, 2.6rem); margin: .4rem 0 .3rem; }
.cd__cell { display: grid; justify-items: center; gap: .35rem; min-width: 64px; }
.cd__cell b { font: 300 clamp(2.4rem, 7vw, 4.2rem)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: .02em; }
.cd__cell small { font: 700 .7rem/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.home-sec { padding: clamp(3rem, 7vw, 5rem) 1rem; }
.home-wrap { max-width: 800px; margin: 0 auto; text-align: center; }
.home-h2 { font: 800 clamp(1.7rem, 3.5vw, 2.3rem)/1.1 var(--font-display); margin-bottom: 1.8rem; }
.home-banner { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: #fa5300; }
.home-banner img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.home-intro { margin: 1.6rem auto 2rem; color: var(--text-2); max-width: 760px; line-height: 1.75; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.6rem 1.4rem; display: grid; justify-items: center; gap: .55rem; transition: border-color .2s, transform .2s; }
.feat:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.feat__ic { width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent); } .feat__ic .ic { width: 30px; height: 30px; }
.feat h3 { font-size: 1.05rem; } .feat p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.faq { text-align: left; }
.home-contact { background: var(--bg-2); border-top: 1px solid var(--border); padding: clamp(3rem, 7vw, 4.5rem) 1rem; }
.home-contact .home-h2 { margin-bottom: .9rem; } .home-contact .btn { margin: 1.4rem 0 1.1rem; }
.contact-mail { color: var(--text); font-weight: 700; } .contact-mail:hover { color: var(--accent-text); }
.footer--simple .footer__in { text-align: center; padding: 1.6rem 1rem; gap: .7rem; }
.footer__links--center { justify-content: center; } .footer__copy { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } .cd__cell { min-width: 52px; } }

/* --- css/pages/dashboard.css --- */
.vbanner { display: flex; gap: 1.6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: clamp(1.3rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem); border-radius: var(--r-xl); position: relative; overflow: hidden; isolation: isolate; color: #fff;
background: radial-gradient(120% 140% at 100% 0%, rgba(255, 196, 120, .45), transparent 45%), radial-gradient(90% 120% at 0% 100%, rgba(120, 20, 0, .55), transparent 55%), linear-gradient(118deg, #7a1d00 0%, #d63f00 38%, #fa5300 62%, #ff8a3d 100%);
box-shadow: 0 24px 60px -28px rgba(250, 83, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .18); }
.vbanner::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 14px); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.vbanner::after { content: ""; position: absolute; z-index: -1; right: clamp(-30px, 2vw, 20px); bottom: -40px; width: 240px; height: 240px; opacity: .13; background: #fff; -webkit-mask: url(/assets/icons/trophy.svg) center / contain no-repeat; mask: url(/assets/icons/trophy.svg) center / contain no-repeat; transform: rotate(-12deg); }
.vbanner--results { background: radial-gradient(110% 140% at 100% 0%, rgba(255, 213, 74, .45), transparent 45%), linear-gradient(118deg, #3a1500 0%, #9c3a00 40%, #e2730b 75%, #ffb02e 100%); }
.vbanner .eyebrow { color: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; gap: .5rem; padding: 4px 10px; border-radius: 99px; background: rgba(0, 0, 0, .2); backdrop-filter: blur(4px); }
.vbanner .eyebrow .sep { background: rgba(255, 255, 255, .6); }
.vbanner__main { flex: 1; min-width: min(100%, 260px); position: relative; }
.vbanner__title { font: 800 clamp(1.4rem, 3vw, 2.1rem)/1.12 var(--font-display); margin-top: .55rem; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.vbanner__text { color: rgba(255, 255, 255, .9); margin-top: .5rem; font-size: var(--fs-sm); max-width: 620px; }
.vbanner__side { display: grid; justify-items: center; gap: .75rem; padding: 1.1rem 1.4rem; border-radius: var(--r-lg); position: relative; min-width: 270px; background: rgba(20, 8, 0, .28); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vbanner__label { font: 700 var(--fs-2xs)/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .8); }
.vbanner .btn--primary { background: #fff; color: #c43d00; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); } .vbanner .btn--primary:hover { background: #fff3ea; }
.vbanner .btn--soft { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); } .vbanner .btn--soft:hover { background: rgba(255, 255, 255, .26); }
.cd--sm { gap: .5rem; margin: 0; } .cd--sm .cd__cell { min-width: 52px; padding: .45rem .3rem; border-radius: 10px; background: rgba(255, 255, 255, .14); text-align: center; } .cd--sm .cd__cell b { display: block; font: 800 1.7rem/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; } .cd--sm .cd__cell small { font-size: .6rem; letter-spacing: .08em; color: rgba(255, 255, 255, .8); text-transform: uppercase; }
.podium { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .9rem; }
.podium__item { display: flex; align-items: center; gap: .6rem; padding: .5rem .85rem .5rem .5rem; border-radius: 14px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(6px); }
.podium__item b { display: block; font-size: var(--fs-sm); } .podium__item small { color: rgba(255, 255, 255, .8); font-size: var(--fs-xs); }
.podium__place { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 .8rem var(--font-display); background: var(--surface-3); }
.podium__item--1 .podium__place { background: #f5b301; color: #241a00; } .podium__item--2 .podium__place { background: #c5ced8; color: #1b232c; } .podium__item--3 .podium__place { background: #cd7f32; color: #fff; }
.podium__item--1 { border-color: rgba(255, 213, 74, .8); background: rgba(255, 213, 74, .2); }
.live-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .live-bar .chips { flex: 1 1 320px; min-width: 0; flex-wrap: wrap; overflow: visible; }
.team { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-weight: 650; }
.team img { width: 24px; height: 24px; object-fit: contain; } .team__ph { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font: 700 .7rem var(--font-display); color: var(--text-2); }
.team b { font: 800 1.2rem var(--font-display); min-width: 18px; text-align: right; color: var(--text); }
.ltable { padding: 0; overflow: hidden; }
.ltable__group + .ltable__group { border-top: 1px solid var(--border); }
.ltable__head { display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--border); min-width: 0; }
.ltable__head .ic { color: var(--accent-text); flex: none; } .ltable__head small { margin-left: auto; color: var(--muted); font-weight: 600; flex: none; }
.lrow { display: grid; grid-template-columns: 76px minmax(0, 1fr) 74px minmax(0, 1fr) 96px; align-items: center; gap: .6rem; padding: .55rem 1rem; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); transition: background .12s; }
.lrow:last-child { border-bottom: 0; } .lrow:hover { background: var(--surface-hover); }
.lrow__clock { display: grid; justify-items: start; gap: .1rem; min-width: 0; } .lrow__clock small { font-size: .68rem; color: var(--muted); }
.lrow__team { display: flex; align-items: center; gap: .5rem; min-width: 0; font-weight: 650; }
.lrow__team--home { flex-direction: row-reverse; text-align: right; }
.lrow__team img, .lrow__team .team__ph { width: 22px; height: 22px; flex: none; object-fit: contain; }
.lrow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lrow__score { display: flex; justify-content: center; align-items: center; gap: .3rem; font: 800 1.05rem var(--font-display); color: var(--live); background: var(--surface-2); border-radius: var(--r-sm, 8px); padding: .2rem .4rem; }
.lrow__score i { font-style: normal; color: var(--muted); font-weight: 600; } .lrow.is-upcoming .lrow__score { color: var(--muted); background: transparent; }
.lrow__chat { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.lrow__chat.has-activity { color: var(--accent-text); } .lrow__cs { display: inline-flex; align-items: center; gap: .25rem; } .lrow__cs .pdot { position: static; width: 7px; height: 7px; border: 0; } .lrow__cs--msg { color: var(--text-2); } .lrow:hover .lrow__chat { color: var(--accent-text); }
.mclock { display: inline-flex; align-items: center; gap: .3rem; font: 800 var(--fs-xs) var(--font-display); color: var(--live); white-space: nowrap; max-width: 100%; }
.mclock > span { overflow: hidden; text-overflow: ellipsis; }
.mclock__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; animation: pulse 1.4s infinite; }
.mclock--sched { color: var(--warn); } .mclock--break { color: var(--warn); } .mclock--warn { color: var(--warn); } .mclock--end { color: var(--muted); }
.mclock--xs { font-size: .68rem; } .mclock--lg { font-size: var(--fs-sm); padding: .25rem .6rem; border-radius: 999px; background: var(--danger-soft); }
.mclock--lg.mclock--end, .mclock--lg.mclock--sched { background: var(--surface-2); }
@media (max-width: 640px) {
.lrow { grid-template-columns: 58px minmax(0, 1fr) auto auto; grid-template-areas: "clock home score chat" "clock away score chat"; row-gap: .25rem; padding: .55rem .75rem; }
.lrow__clock { grid-area: clock; } .lrow__team--home { grid-area: home; flex-direction: row; text-align: left; } .lrow__team--away { grid-area: away; }
.lrow__score { grid-area: score; flex-direction: column; gap: .25rem; padding: .25rem .5rem; } .lrow__score i { display: none; }
.lrow.is-upcoming .lrow__score { display: none; } .lrow.is-upcoming { grid-template-columns: 58px minmax(0, 1fr) auto; grid-template-areas: "clock home chat" "clock away chat"; }
.lrow__chat { grid-area: chat; }
.ltable__head { padding: .5rem .75rem; }
}
.cal { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
.cal__side { position: sticky; top: calc(var(--topbar-h) + 1rem); }
.cal__list { padding: .8rem; min-height: 200px; }
.mcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .mcal__head b { font-family: var(--font-display); }
.mcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.mcal__dow { font: 700 .66rem/2 var(--font-display); color: var(--muted); text-transform: uppercase; }
.mcal__day { height: 34px; border-radius: 9px; font: 600 var(--fs-sm) var(--font-display); color: var(--text-2); }
.mcal__day:hover { background: var(--surface-2); color: var(--text); } .mcal__day.is-today { color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-border); } .mcal__day.is-active { background: var(--accent); color: #fff; }
.mcal__quick { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; } .mcal__quick .chip { height: 28px; font-size: var(--fs-xs); }
.cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .3rem .5rem .8rem; } .cal-head b { font: 700 1.1rem var(--font-display); }
.cal-group + .cal-group { margin-top: .9rem; }
.cal-group__head { display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; border-radius: 9px; background: var(--accent-soft); font: 600 var(--fs-sm) var(--font-body); color: var(--text); }
.cal-group__head .ic { color: var(--accent-text); }
.cal-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; gap: .9rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.cal-row:hover { background: var(--surface-hover); } .cal-row:last-child { border-bottom: 0; }
.cal-row__time { text-align: center; font: 600 var(--fs-sm) var(--font-display); color: var(--text-2); display: flex; justify-content: center; }
.cal-row__teams, .cal-row__score { display: grid; gap: .2rem; } .cal-row__teams span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row__score { text-align: right; font: 700 var(--fs-sm) var(--font-display); color: var(--text-2); min-width: 20px; } .cal-row__score.live { color: var(--live); }
.dot-live { display: inline-flex; align-items: center; gap: .3rem; } .dot-live::after { content: "LIVE"; font: 800 .62rem var(--font-display); color: var(--live); }
.presence { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; } .presence.on { color: var(--success); } .presence.on i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
@media (max-width: 900px) { .cal { grid-template-columns: 1fr; } .cal__side { position: static; } .vbanner__side { width: 100%; } }
.ddays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.dday { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .15s, border-color .15s, box-shadow .15s; overflow: hidden; }
.dday:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: 0 14px 30px -18px rgba(250, 83, 0, .6); }
.dday__top { display: inline-flex; gap: .35rem; align-items: center; font: 700 var(--fs-xs) var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .dday__top .ic { color: var(--accent-text); }
.dday__label { font: 800 1.35rem/1.15 var(--font-display); color: var(--text); }
.dday__wd { font-size: var(--fs-xs); color: var(--muted); }
.dday__count { margin-top: .5rem; display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; padding: .3rem .7rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-sm); font-weight: 600; }
.dday__count b { font: 800 1rem var(--font-display); } .dday__count .ic { transition: transform .15s; } .dday:hover .dday__count .ic { transform: translateX(3px); }
.dday.is-today { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border-color: var(--accent-border); }
@media (max-width: 900px) { .ddays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vbanner__side { min-width: 0; width: 100%; } .cd--sm .cd__cell { min-width: 0; flex: 1; } .cd--sm { width: 100%; display: flex; } .dday { padding: .85rem; } .dday__label { font-size: 1.15rem; } }
.more-wrap { display: flex; justify-content: center; padding: .9rem 0 .2rem; }
.cal__list .more-wrap { padding-bottom: .4rem; }
[data-announce]:empty { display: none; } [data-announce] { display: grid; gap: .6rem; margin-bottom: 1rem; }
.ann-pin { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--info); background: color-mix(in srgb, var(--info) 12%, var(--surface)); }
.ann-pin > .ic { flex: none; color: var(--info); } .ann-pin > div { flex: 1; min-width: 0; } .ann-pin p { margin: .15rem 0 0; color: var(--text-2); font-size: var(--fs-sm); } .ann-pin .btn { flex: none; }
.ann-pin--success { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); } .ann-pin--success > .ic { color: var(--success); }
.ann-pin--warning { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); } .ann-pin--warning > .ic { color: var(--warn); }
.ann-pin--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); } .ann-pin--danger > .ic { color: var(--danger); }
@media (max-width: 560px) { .ann-pin { flex-wrap: wrap; } .ann-pin .btn { width: 100%; justify-content: center; } }
@media (max-width: 640px) { .lrow__chat { flex-direction: column; align-items: flex-end; gap: .15rem; min-width: 24px; } }
.mclock__add { font-style: normal; font-size: .82em; font-weight: 800; padding: 0 .3em; border-radius: 4px; background: var(--danger-soft); color: var(--live); }
.cal-tools { display: flex; flex-direction: column; gap: .6rem; padding: .3rem .4rem .9rem; border-bottom: 1px solid var(--border); margin-bottom: .6rem; }
.cal-search { display: flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-3); }
.cal-search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.cal-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); outline: none; }
.cal-filters .chip { height: 30px; font-size: var(--fs-xs); }
.cal-filters .chip .pdot { position: static; width: 7px; height: 7px; border: 0; background: var(--danger); }
.cal-filters .chip.is-active .pdot { background: #fff; }
.hot-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .65rem; }
.hot-head b { display: inline-flex; align-items: center; gap: .35rem; font: 700 var(--fs-md, 1rem) var(--font-display); }
.hot-head b .ic { color: var(--accent-text); }
.hot-head--rest { margin-top: 1.2rem; }
.ctiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.ctile { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: .85rem .95rem; border-radius: var(--r-lg); border: 1px solid var(--accent-border);
background: linear-gradient(160deg, var(--accent-soft), var(--surface) 55%); box-shadow: var(--shadow-sm, none); transition: transform .15s, border-color .15s, box-shadow .15s; min-width: 0; }
.ctile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 28px rgba(250, 83, 0, .16); }
.ctile__top { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; min-width: 0; }
.ctile__top .ic { color: var(--accent-text); flex: none; } .ctile__top .ellipsis { flex: 1; min-width: 0; }
.ctile__time { flex: none; font-weight: 700; color: var(--text); }
.ctile__match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.ctile__team { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; font-weight: 700; font-size: var(--fs-sm); min-width: 0; }
.ctile__team img, .ctile__team .team__ph { width: 34px; height: 34px; object-fit: contain; }
.ctile__team .ellipsis { max-width: 100%; }
.ctile__score { font: 800 1.45rem var(--font-display); white-space: nowrap; } .ctile__score i { font-style: normal; color: var(--muted); margin: 0 .15rem; }
.ctile__chat { display: flex; align-items: center; gap: .7rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-2); }
.ctile__msgs { display: inline-flex; align-items: center; gap: .3rem; } .ctile__msgs .ic { color: var(--accent-text); } .ctile__msgs b { color: var(--text); }
.ctile__view { display: inline-flex; align-items: center; gap: .3rem; } .ctile__view .pdot { position: static; width: 7px; height: 7px; border: 0; }
.ctile__go { margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; color: var(--accent-text); }
@media (max-width: 640px) { .ctiles { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .3rem; scrollbar-width: none; } .ctile { scroll-snap-align: start; } }
.ann-pin__body { margin: .2rem 0 0; color: var(--text-2); font-size: var(--fs-sm); }
.ann-pin__body p { margin: 0 0 .3rem; } .ann-pin__body p:last-child { margin-bottom: 0; } .ann-pin__body ul, .ann-pin__body ol { margin: .2rem 0; padding-left: 1.2rem; }
.pen-col { display: grid; gap: .2rem; text-align: right; font: 700 var(--fs-sm) var(--font-display); color: var(--text-2); margin-right: -.45rem; opacity: .75; }
.pen-col span { font-size: .74em; line-height: 1.35rem; } .cal-row__score span { line-height: 1.35rem; }
.lrow__pen { font: 700 .66rem var(--font-display); color: var(--muted); white-space: nowrap; }
.ctile__score small { display: block; font: 600 .7rem var(--font-body, inherit); color: var(--muted); text-align: center; }

/* --- css/pages/tips.css --- */
.daynav-wrap { margin-bottom: 1rem; }
.daynav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.daybtn { position: relative; display: grid; justify-items: center; gap: .15rem; padding: .7rem .4rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); transition: .15s; min-width: 0; }
.daybtn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.daybtn.is-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.daybtn__rel { font: 700 .98rem/1.1 var(--font-display); color: var(--text); } .daybtn.is-active .daybtn__rel { color: var(--accent-text); }
.daybtn__date { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.daybtn__n { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font: 800 .66rem/20px var(--font-display); }
.daybtn--cal .ic { color: var(--accent-text); width: 18px; height: 18px; }
.daybtn--cal { grid-template-columns: auto; }
@media (max-width: 620px) { .daynav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; } .daybtn { padding: .55rem .2rem; } .daybtn__rel { font-size: .85rem; } .daybtn__date { font-size: .66rem; } .daybtn__n { top: -7px; right: -5px; min-width: 18px; height: 18px; line-height: 18px; font-size: .6rem; } .daybtn--cal { grid-column: span 4; grid-auto-flow: column; justify-content: center; gap: .5rem; } }
.mcal__day.has-dot { position: relative; } .mcal__day.has-dot::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.mcal__day.is-active.has-dot::after { background: #fff; }
.tips-filters { display: grid; gap: .7rem; margin-bottom: 1.1rem; }
.tips-filters__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tips-filters__row .select, .tips-filters__row .cselect { width: auto; min-width: 150px; }
@media (max-width: 640px) { .tips-filters__row .cselect { flex: 1 1 calc(50% - .5rem); min-width: 0; } .tips-filters__row .check { flex-basis: 100%; } .tips-search .btn--primary { padding: 0 .7rem; } }
.day-title { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .4rem 0 1rem; } .day-title h2 { font-size: 1.25rem; }
.back-link { margin-bottom: 1rem; }
.mini-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.mini-stats div { background: var(--surface-2); border-radius: 10px; padding: .6rem .7rem; } .mini-stats b { display: block; font: 800 1.15rem/1.1 var(--font-display); } .mini-stats small { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.top-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .3rem; border-radius: 9px; font-size: var(--fs-sm); font-weight: 600; } .top-row:hover { background: var(--surface-2); }
.rank-pos { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font: 800 .8rem var(--font-display); background: var(--surface-3); color: var(--text-2); }
.rank-pos--1 { background: #f5b301; color: #241a00; } .rank-pos--2 { background: #c5ced8; color: #1b232c; } .rank-pos--3 { background: #cd7f32; color: #fff; }
.side-tip { display: flex; gap: .8rem; } .side-tip > .ic { color: var(--accent-text); width: 22px; height: 22px; margin-top: 2px; } .side-tip p { margin: .3rem 0 .5rem; }
.match { text-align: center; }
.match__league { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; } .match__league .ic { color: var(--accent-text); }
.match__board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 1.2rem 0 .8rem; }
.match__team { display: grid; justify-items: center; gap: .55rem; } .match__team img, .match__team .team__ph { width: 56px; height: 56px; } .match__team .team__ph { font-size: 1.3rem; }
.match__team b { font: 700 clamp(1rem, 2vw, 1.25rem) var(--font-display); }
.match__score { display: grid; gap: .4rem; justify-items: center; } .match__score > b { font: 800 clamp(1.8rem, 5vw, 2.6rem)/1 var(--font-display); } .match__score > b.live { color: var(--live); } .match__score span { font-size: var(--fs-sm); color: var(--muted); }
.match__meta { display: inline-flex; gap: .4rem; align-items: center; font-size: var(--fs-sm); color: var(--text-2); }
.match-chat { margin-top: 1rem; }
[data-ev-tips] { margin-top: 1.75rem; } [data-ev-tips] > .section { margin-top: 0; }
.match-chat.is-locked { height: auto; min-height: 260px; }
.tips-page--event > .page-head, .tips-page--event > [data-main-tabs] { display: none; }
.tips-page--event > .layout-2 { margin-top: .25rem; }
.match__score .match__cd { color: var(--warn); font-weight: 700; }
.match__foot { display: flex; align-items: center; justify-content: center; gap: .6rem 1.2rem; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .9rem; }
.match__meta .sep-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); display: inline-block; margin: 0 .2rem; }
@media (max-width: 560px) { .match__foot .btn { width: 100%; justify-content: center; } }
.settle-opts { display: grid; gap: .5rem; }
.settle-opt { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-weight: 600; }
.settle-opt input { accent-color: var(--accent); } .settle-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); }
.settle-opt--success .ic { color: var(--success); } .settle-opt--danger .ic { color: var(--danger); }
.tf { display: grid; gap: 1.3rem; }
.tf-step { display: grid; gap: .7rem; }
.tf-step__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .tf-step__head b { font: 700 1.02rem var(--font-display); }
.tf-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font: 800 .8rem var(--font-display); flex: none; }
.tf-sports, .chips--wrap { flex-wrap: wrap; overflow: visible; }
.tf-results { display: grid; gap: .35rem; margin-top: .7rem; max-height: 300px; overflow-y: auto; padding-right: 2px; }
.tf-ev { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); transition: .12s; }
.tf-ev:hover { border-color: var(--accent-border); } .tf-ev.is-picked { border-color: var(--accent); background: var(--accent-softer); cursor: default; }
.tf-ev__time { display: grid; justify-items: center; min-width: 54px; } .tf-ev__time b { font: 700 1rem var(--font-display); } .tf-ev__time small { font-size: var(--fs-2xs); color: var(--muted); }
.tf-ev__main { flex: 1; min-width: 0; display: grid; } .tf-ev__main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-ev__main small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-loading { display: grid; place-items: center; padding: 1.2rem; }
.tf-odds { font: 700 1.2rem var(--font-display) !important; }
.tf-bars { display: flex; gap: 3px; } .tf-bars i { width: 8px; height: 22px; border-radius: 3px; background: var(--surface-3); } .tf-bars i.on { background: var(--accent); }
.tf-bms { display: flex; flex-wrap: wrap; gap: .4rem; }
.tf-bm { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .8rem; border-radius: 9px; border: 1px solid var(--border-strong); font: 600 var(--fs-sm) var(--font-display); color: var(--text-2); }
.tf-bm i { width: 10px; height: 10px; border-radius: 3px; } .tf-bm:hover { color: var(--text); border-color: var(--accent-border); } .tf-bm.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.tf-add summary { list-style: none; cursor: pointer; } .tf-add summary::-webkit-details-marker { display: none; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; margin-top: -.5rem; }
.pw-meter span { height: 4px; border-radius: 2px; background: var(--surface-3); } .pw-meter span.on[data-s="1"] { background: var(--danger); } .pw-meter span.on[data-s="2"] { background: var(--warn); } .pw-meter span.on[data-s="3"], .pw-meter span.on[data-s="4"] { background: var(--success); }
.pw-meter small { margin-left: .4rem; font-size: var(--fs-2xs); }
.otp-input { text-align: center; font: 700 1.6rem/1 var(--font-display) !important; letter-spacing: .35em; height: 58px !important; }
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; } @media (max-width: 520px) { .scope-grid { grid-template-columns: 1fr; } }
.mod-user { padding: .8rem; border-radius: var(--r-md); background: var(--surface-2); }
.cal-pop .mcal__day { height: 36px; }
.tips-search { display: flex; align-items: center; gap: .4rem; padding: .3rem; border-radius: 13px; background: var(--surface); border: 1px solid var(--border-strong); margin-bottom: .9rem; }
.tips-search:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.tips-search .ic-wrap { padding: 0 .2rem 0 .6rem; color: var(--muted); display: flex; }
.tips-search input { flex: 1; min-width: 0; border: 0; background: transparent; height: 40px; outline: 0; color: var(--text); font-size: 1rem; }
.match__added { display: block; margin-top: .3rem; color: var(--live); font-weight: 700; font-size: var(--fs-xs); }
.tf-reason { border: 1px solid var(--accent-border); background: var(--accent-softer); border-radius: var(--r-lg); padding: .9rem 1rem; }
.tf-reason .tf-num { background: var(--accent); color: #fff; } .tf-reason .req { color: var(--danger); margin-left: .2rem; }
.tips-filters [data-sports] { flex-wrap: wrap; overflow: visible; }
@media (max-width: 760px) {
.tips-filters [data-sports] { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-right: 2rem; margin-right: -1rem;
-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tips-filters [data-sports] .chip { scroll-snap-align: start; }
}
.cal-pop { max-width: calc(100vw - 16px); box-sizing: border-box; }
.match__sx { display: grid; gap: .15rem; justify-items: center; text-align: center; } .match__sx small { font-size: var(--fs-xs, .78rem); color: var(--muted); } .match__sx b { color: var(--text); }
.daybtn__cp { display: inline-flex; align-items: center; gap: .2rem; margin-top: .1rem; padding: 1px 6px; border-radius: 9px; background: var(--warn-soft); color: var(--text-2); font-size: .66rem; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; }
.daybtn__cp .ic { width: 11px; height: 11px; flex: none; }
@media (max-width: 620px) { .daybtn__cp { font-size: .6rem; padding: 0 4px; } }
@media (max-width: 480px) { .daybtn__cpw { display: none; } }
.day-title h2 { flex: 1; min-width: 0; }
.mcal__day.has-cp { position: relative; } .mcal__day.has-cp::before { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 2px; background: var(--warn); }
.mcal__legend { margin-top: .5rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.mcal__k { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .mcal__k--cp { border-radius: 2px; background: var(--warn); margin-left: .4rem; }
.day-title .pill--cp { display: inline-flex; align-items: center; gap: .3rem; background: var(--warn-soft); color: var(--text); text-decoration: none; } .day-title .pill--cp:hover { filter: brightness(.97); }
.tab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font: 800 .68rem/1 var(--font-display); }
.tab-badge[hidden] { display: none; }
.settle-head { margin-bottom: 1rem; } .settle-head .section-title { margin-bottom: .25rem; } .settle-head p { margin: 0; }
.settle-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem 1rem; background: var(--warn-soft); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text); }
.settle-bar > span { flex: 1 1 220px; } .settle-bar > .ic { color: var(--warn); }

/* --- css/pages/forum.css --- */
.forum-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px) auto; gap: 1.6rem; align-items: start; margin-bottom: 1.6rem; }
.forum-new { margin-top: .2rem; }
.forum-search { display: flex; align-items: center; gap: .4rem; padding: .3rem; border-radius: 13px; background: var(--surface); border: 1px solid var(--border-strong); position: relative; }
.forum-search .ic-wrap { padding: 0 .3rem 0 .7rem; color: var(--muted); display: flex; }
.forum-search input { flex: 1; min-width: 0; border: 0; background: transparent; height: 42px; outline: 0; color: var(--text); }
.forum-tags { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .9rem; font-size: var(--fs-sm); color: var(--text-2); } .forum-tags > span { font-weight: 600; margin-right: .2rem; }
.forum-tags .chip { height: 30px; font-family: var(--font-body); font-weight: 500; }
.forum-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.3rem; align-items: start; }
.card-h { font: 800 1.45rem var(--font-display); margin: .2rem 0 1rem; }
.cat-head, .cat-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 260px 20px; gap: 1rem; align-items: center; }
.cat-head { padding: .3rem 1rem .7rem; font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .cat-head span:nth-child(2), .cat-head span:nth-child(3) { text-align: center; }
.cat-row { padding: 1rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); margin-bottom: .6rem; transition: border-color .15s, background .15s; }
[data-theme="light"] .cat-row { background: var(--surface); }
.cat-row:hover { border-color: var(--accent-border); }
.cat-row__main { display: flex; gap: 1rem; align-items: center; min-width: 0; } .cat-row__main b { font: 700 1.08rem var(--font-display); } .cat-row__main p { font-size: var(--fs-sm); color: var(--text-2); margin-top: .15rem; }
.cat-row__icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -10px rgba(250, 83, 0, .8); }
.cat-row__icon .ic { width: 24px; height: 24px; }
.cat-row__n { text-align: center; font: 700 1rem var(--font-display); }
.cat-row__last { display: flex; gap: .7rem; align-items: center; min-width: 0; } .cat-row__last b { display: block; font-size: var(--fs-sm); } .cat-row__last small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.cat-row__chev { color: var(--muted); }
.forum-side { display: grid; gap: 1rem; }
.side-title { display: flex; align-items: center; gap: .55rem; font-size: 1.12rem; margin-bottom: .7rem; } .side-title .ic { color: var(--accent); }
.mini-thread { display: flex; justify-content: space-between; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--border); } .mini-thread:first-of-type { border-top: 0; }
.mini-thread b { display: block; font-size: var(--fs-sm); } .mini-thread small { font-size: var(--fs-xs); color: var(--muted); } .mini-thread small i { font-style: normal; opacity: .5; margin: 0 .2rem; } .mini-thread:hover b { color: var(--accent-text); }
.count-badge { flex: none; align-self: flex-start; background: var(--accent-soft); color: var(--accent-text); font: 700 .78rem var(--font-display); padding: 2px 9px; border-radius: 7px; }
.mini-cat { display: flex; align-items: center; gap: .7rem; padding: .55rem .3rem; font-size: var(--fs-sm); border-radius: 8px; } .mini-cat:hover { background: var(--surface-2); }
.mini-cat > .ic:first-child { color: var(--accent); } .mini-cat span { flex: 1; } .mini-cat b { color: var(--text-2); font-weight: 600; }
.forum-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; text-align: center; } .forum-stats b { display: block; font: 800 1.15rem var(--font-display); } .forum-stats small { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.forum-cat-head { display: flex; gap: 1rem; align-items: center; }
.forum-bar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .forum-bar .forum-search { flex: 1; min-width: 260px; max-width: 460px; }
.thread-head, .thread-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 80px 80px 170px; gap: 1rem; align-items: center; }
.thread-head { padding: .75rem 1.2rem; font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); border-bottom: 1px solid var(--border); }
.thread-head span:first-child { grid-column: 1 / 3; } .thread-head span:nth-child(2), .thread-head span:nth-child(3) { text-align: center; }
.thread-row { padding: .9rem 1.2rem; border-bottom: 1px solid var(--border); } .thread-row:last-child { border-bottom: 0; } .thread-row:hover { background: var(--surface-hover); }
.thread-row.is-pinned { background: var(--accent-softer); }
.thread-row__main { min-width: 0; } .thread-row__main b { display: block; font-weight: 650; } .thread-row:hover .thread-row__main b { color: var(--accent-text); } .thread-row__main small { color: var(--muted); font-size: var(--fs-xs); }
.thread-row__n { text-align: center; font: 700 .98rem var(--font-display); } .thread-row__n small { display: block; font: 500 .66rem var(--font-body); color: var(--muted); }
.thread-row__last { display: flex; gap: .5rem; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.thread { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.4rem; align-items: start; }
.thread__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; flex-wrap: wrap; }
.thread__icon { flex: none; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.post { display: flex; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.post + .post { margin-top: .7rem; } .post--op { padding: 1.3rem 1.4rem; }
.post__body { flex: 1; min-width: 0; }
.post__head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; margin-bottom: .6rem; }
.post__time { font-size: var(--fs-xs); color: var(--muted); margin-top: .1rem; } .post__num { font: 700 var(--fs-xs) var(--font-display); color: var(--muted); }
.post__replyto { display: flex; gap: .4rem; align-items: center; font-size: var(--fs-xs); color: var(--muted); background: var(--surface-2); padding: .4rem .6rem; border-radius: 8px; margin-bottom: .6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .post__replyto:hover { color: var(--accent-text); }
.post__text { color: var(--text); }
.post__foot { display: flex; align-items: center; gap: .2rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.post.is-flash { animation: flash 1.8s; } @keyframes flash { 0%, 40% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: var(--shadow); } }
.replies-head { display: flex; justify-content: space-between; align-items: center; margin: 1.8rem 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--border); position: relative; }
.replies-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 130px; height: 2px; background: var(--accent); } .replies-head h2 { font-size: 1.25rem; } .replies-head .select { width: auto; }
.thread__side { display: grid; gap: 1rem; position: sticky; top: calc(var(--topbar-h) + 1rem); }
.quick { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .75rem; border-radius: 9px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); text-align: left; }
.quick:hover { background: var(--surface-2); color: var(--text); } .quick--accent { background: var(--accent); color: #fff; } .quick--accent:hover { background: var(--accent-hover); color: #fff; }
.avatars { display: flex; gap: .45rem; flex-wrap: wrap; }
.reply-box { margin-top: 1.4rem; }
.reply-context { display: flex; justify-content: space-between; gap: .8rem; align-items: center; background: var(--accent-soft); border-radius: 9px; padding: .55rem .8rem; margin-bottom: .7rem; font-size: var(--fs-sm); }
@media (max-width: 1150px) { .forum-top { grid-template-columns: minmax(0, 1fr); } .forum-new { justify-self: start; } .forum-grid, .thread { grid-template-columns: minmax(0, 1fr); } .thread__side { position: static; } }
.forum-top > *, .forum-grid > *, .thread > * { min-width: 0; }
@media (max-width: 760px) { .cat-head { display: none; } .cat-row { grid-template-columns: minmax(0, 1fr) auto; } .cat-row > :nth-child(2), .cat-row > :nth-child(3), .cat-row__last { display: none; }
.thread-head { display: none; } .thread-row { grid-template-columns: 36px minmax(0, 1fr) 54px; } .thread-row > :nth-child(4), .thread-row__last { display: none; } .post { padding: .9rem; } .post > .avatar { --s: 36px; } }
.post-children { display: grid; gap: .55rem; margin: .55rem 0 0 clamp(1.2rem, 4vw, 3.2rem); padding-left: clamp(.6rem, 2vw, 1rem); border-left: 2px solid var(--border-strong); }
.post-children + .post { margin-top: .7rem; }
.post--child { padding: .85rem 1rem; box-shadow: none; background: var(--surface-2); } .post + .post--child, .post--child + .post--child { margin-top: 0; }
.post--child .post__text { font-size: var(--fs-sm); }
.post--deleted { padding: .7rem 1rem; box-shadow: none; background: transparent; border-style: dashed; }
button.post__replyto { display: inline-flex; width: auto; max-width: 100%; cursor: pointer; border: 0; } button.post__replyto b { color: var(--accent-text); font-weight: 650; } button.post__replyto:hover { color: var(--text); }
.post.is-flash { animation: none; border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent), 0 0 24px -6px rgba(250, 83, 0, .55); transition: box-shadow .3s, border-color .3s; }
.posts { display: grid; gap: .7rem; } .posts > .post + .post { margin-top: 0; }

/* --- css/pages/ranking.css --- */
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.tabs--lg .tab { font-size: 1.02rem; padding: .95rem 1.1rem; }
.rank-bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.select-wrap { position: relative; display: inline-flex; align-items: center; } .select-wrap > .ic { position: absolute; left: .8rem; color: var(--accent); pointer-events: none; } .select-wrap .select { padding-left: 2.4rem; min-width: 220px; }
.medal, .pos-badge { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 .8rem var(--font-display); background: var(--surface-3); color: var(--text-2); flex: none; }
.medal--gold { background: linear-gradient(135deg, #ffd54a, #e9a400); color: #2b1d00; } .medal--silver { background: linear-gradient(135deg, #e6ebf1, #a9b4c0); color: #1b232c; } .medal--bronze { background: linear-gradient(135deg, #e7a467, #b8692a); color: #fff; }
.prize-strip { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; } .prize-strip > p { flex-basis: 100%; }
.prize { display: flex; gap: .7rem; align-items: center; padding: .7rem 1.1rem .7rem .7rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.prize small { display: block; font-size: var(--fs-xs); color: var(--muted); } .prize b { font: 800 1.2rem var(--font-display); } .prize--1 { border-color: rgba(245, 179, 1, .45); background: linear-gradient(135deg, rgba(245, 179, 1, .12), var(--surface) 70%); }
.rpodium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; max-width: 760px; margin: .5rem auto 1.8rem; }
.rpodium__slot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; position: relative; padding-top: .4rem; }
.rpodium__slot b { font: 700 1.02rem var(--font-display); margin-top: .35rem; } .rpodium__slot small { color: var(--muted); font-size: var(--fs-xs); }
.rpodium__medal { position: absolute; top: 0; right: calc(50% - 46px); z-index: 2; } .rpodium__slot--1 .rpodium__medal { right: calc(50% - 56px); width: 32px; height: 32px; }
.rpodium__medal.medal--gold, .rpodium__medal { display: grid; place-items: center; border-radius: 50%; font: 800 .8rem var(--font-display); width: 28px; height: 28px; }
.rpodium__val { display: flex; flex-direction: column; align-items: center; margin-top: .2rem; }
.rpodium__bar { width: 100%; border-radius: 14px 14px 4px 4px; margin-top: .7rem; background: linear-gradient(180deg, var(--surface-3), var(--surface)); border: 1px solid var(--border); border-bottom: 0; }
.rpodium__slot--1 .rpodium__bar { height: 120px; background: linear-gradient(180deg, rgba(250, 83, 0, .35), rgba(250, 83, 0, .04)); border-color: var(--accent-border); }
.rpodium__slot--2 .rpodium__bar { height: 84px; } .rpodium__slot--3 .rpodium__bar { height: 60px; }
.rpodium__slot:hover b { color: var(--accent-text); }
.rank-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.3rem; align-items: start; }
.rank-side { display: grid; gap: 1rem; position: sticky; top: calc(var(--topbar-h) + 1rem); }
.rank-table tbody tr { cursor: pointer; } .rank-table tr.is-cand td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .rank-table tr.is-me td { background: var(--accent-softer); }
.user-cell { display: flex; gap: .65rem; align-items: center; min-width: 160px; } .user-cell b { display: block; font-weight: 650; } .user-cell small { color: var(--muted); font-size: var(--fs-xs); }
.wr-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 70px; } .wr-cell i { display: block; width: 70px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--success) var(--v), var(--surface-3) var(--v)); }
.my-rank__pos { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; } .my-rank__pos b { font: 800 2.4rem var(--font-display); color: var(--accent-text); } .my-rank__pos small { color: var(--muted); }
.my-rank .alert, .my-rank .progress { margin: .8rem 0 .5rem; } .my-rank .btn { margin-top: .9rem; }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .kv-grid > div { background: var(--surface-2); border-radius: 10px; padding: .6rem .75rem; } .kv-grid small { display: block; font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .kv-grid b { font: 700 1.05rem var(--font-display); }
.vote-hero { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; flex-wrap: wrap; padding: 1.8rem 2rem; border-radius: var(--r-xl); margin-bottom: 1.4rem; color: #fff;
background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .15), transparent 45%), linear-gradient(120deg, #c43d00, #fa5300 55%, #ff8a3d); box-shadow: 0 20px 50px -25px rgba(250, 83, 0, .9); }
.vote-hero--done { background: radial-gradient(circle at 85% 20%, rgba(255, 213, 74, .25), transparent 45%), linear-gradient(120deg, #1d2430, #2b3445); }
.vote-hero .eyebrow { color: rgba(255, 255, 255, .85); display: inline-flex; gap: .4rem; align-items: center; } .vote-hero h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: .3rem 0 .5rem; color: #fff; } .vote-hero p { max-width: 560px; opacity: .92; } .vote-hero .btn { margin-top: 1rem; background: #fff; color: #c43d00; }
.vote-hero__timer { text-align: center; background: rgba(0, 0, 0, .18); border-radius: 16px; padding: 1rem 1.3rem; } .vote-hero__timer small { display: block; opacity: .85; font-size: var(--fs-xs); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .08em; }
.countdown--lg { font-size: 1.15rem; }
.cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.cand { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 1.4rem 1.1rem 1.1rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.cand:hover { transform: translateY(-2px); border-color: var(--accent-border); } .cand.is-voted { border-color: var(--success); box-shadow: 0 0 0 1px var(--success), var(--shadow); }
.cand__pos { position: absolute; top: .8rem; left: .9rem; font: 800 var(--fs-xs) var(--font-display); color: var(--muted); }
.cand__name b { display: block; font: 700 1.1rem var(--font-display); } .cand__name small { color: var(--muted); } .cand__name:hover b { color: var(--accent-text); }
.cand__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; width: 100%; margin: .3rem 0 .5rem; } .cand__stats > div { background: var(--surface-2); border-radius: 9px; padding: .45rem; } .cand__stats small { display: block; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .cand__stats b { font: 700 .98rem var(--font-display); }
.cand__votes { display: inline-flex; gap: .3rem; align-items: center; font-size: var(--fs-xs); color: var(--muted); }
.results-list { display: grid; gap: .45rem; margin-top: 1rem; }
.res-row { display: grid; grid-template-columns: 28px 32px minmax(90px, 160px) 1fr 40px 54px; gap: .7rem; align-items: center; font-size: var(--fs-sm); } .res-row a { font-weight: 600; } .res-row small { color: var(--muted); text-align: right; }
.res-row__bar { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; } .res-row__bar i { display: block; height: 100%; background: var(--accent); border-radius: 8px; }
.prizes-card { margin-top: 1.4rem; } .prizes-card .prize-strip { margin: .4rem 0 .6rem; }
.hist-list { display: grid; gap: .8rem; } .hist summary { list-style: none; display: flex; align-items: center; gap: 1rem; cursor: pointer; } .hist summary::-webkit-details-marker { display: none; }
.hist__month { display: flex; gap: .55rem; align-items: center; font: 700 1.08rem var(--font-display); flex: 1; } .hist__month .ic { color: var(--accent); }
.hist__winner { display: flex; gap: .55rem; align-items: center; } .hist__winner small { color: var(--muted); } .hist__chev { transition: transform .2s; } .hist[open] .hist__chev { transform: rotate(180deg); }
@media (max-width: 1100px) { .rank-grid { grid-template-columns: 1fr; } .rank-side { position: static; grid-row: 1; } }
@media (max-width: 640px) { .rpodium { gap: .4rem; } .rpodium__slot .avatar--xl { --s: 64px; } .vote-hero { padding: 1.3rem; } .res-row { grid-template-columns: 26px 28px 1fr 34px; } .res-row__bar, .res-row small { display: none; } .hist__winner small { display: none; } }
.streaks { margin-top: 2rem; }
.streaks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.streaks__head { display: grid; gap: .15rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); }
.streaks__head h3 { display: flex; align-items: center; gap: .45rem; font: 700 1rem var(--font-display); margin: 0; } .streaks__head h3 .ic { color: var(--accent-text); }
.streak-list { list-style: none; margin: 0; padding: 0; }
.streak-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; padding: .6rem 1.1rem; border-bottom: 1px solid var(--border); }
.streak-list li:last-child { border-bottom: 0; }
.streak-list__pos { font: 800 var(--fs-sm) var(--font-display); color: var(--muted); text-align: center; }
.streak-list__meta { text-align: right; } .streak-list__meta small { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.streak-len { display: inline-flex; align-items: baseline; gap: .3rem; font: 800 1.3rem var(--font-display); color: var(--text); min-width: 74px; justify-content: flex-end; }
.streak-len small { font: 600 var(--fs-xs) var(--font-body); color: var(--muted); } .streak-len.is-active { color: var(--accent-text); } .streak-len .ic { align-self: center; }
.streaks__note { margin-top: .7rem; display: flex; gap: .35rem; align-items: center; }
.streaks .empty { padding: 1.4rem; }
@media (max-width: 900px) { .streaks__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .streak-list li { grid-template-columns: 22px minmax(0, 1fr) auto; } .streak-list__meta { grid-column: 2 / -1; grid-row: 2; text-align: left; } }

/* --- css/pages/profile.css --- */
.prof-head { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.2rem; }
.prof-banner { height: 210px; background: radial-gradient(circle at 80% 10%, rgba(255, 138, 61, .55), transparent 50%), linear-gradient(120deg, #2a1206, #a63400 55%, #fa5300); background-size: cover; background-position: center; }
.prof-head__body { display: flex; gap: 1.4rem; align-items: flex-start; padding: 0 1.8rem 1.2rem; margin-top: -58px; flex-wrap: wrap; }
.prof-head__body > .avatar { box-shadow: 0 0 0 5px var(--surface), 0 0 0 7px var(--accent); }
.prof-id { flex: 1; min-width: 220px; padding-top: 68px; }
.prof-first { display: block; color: var(--text-2); font-weight: 600; font-size: 1rem; }
.prof-id h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.prof-meta { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .45rem; font-size: var(--fs-sm); color: var(--text-2); } .prof-meta > span { display: inline-flex; gap: .35rem; align-items: center; }
.prof-bio { margin-top: .7rem; color: var(--text-2); max-width: 680px; white-space: pre-line; }
.prof-actions { display: flex; gap: .5rem; padding-top: 72px; }
.prof-awards { display: flex; gap: .5rem; flex-wrap: wrap; padding: 0 1.8rem 1rem; }
.award { display: inline-flex; gap: .4rem; align-items: center; height: 30px; padding: 0 .8rem; border-radius: 99px; font: 700 var(--fs-xs) var(--font-display); }
.award--1 { background: rgba(245, 179, 1, .15); color: #c48f00; } [data-theme="dark"] .award--1 { color: #ffd54a; } .award--2 { background: rgba(169, 180, 192, .18); color: var(--text-2); } .award--3 { background: rgba(205, 127, 50, .16); color: #c06e22; }
.prof-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 1px solid var(--border); }
.prof-counters > div { padding: 1rem; text-align: center; border-right: 1px solid var(--border); } .prof-counters > div:last-child { border-right: 0; }
.prof-counters b { display: block; font: 800 1.35rem var(--font-display); } .prof-counters small { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.prof-tabs { margin-bottom: 1.2rem; }
.prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.2rem; align-items: start; }
.prof-col { display: grid; gap: 1rem; min-width: 0; } .prof-side { position: sticky; top: calc(var(--topbar-h) + 1rem); }
.stat-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.stat-hero__main .seg { margin-bottom: .8rem; }
.sport-cell { display: inline-flex; gap: .45rem; align-items: center; } .sport-cell .ic { color: var(--accent); }
.odds-profit { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: 1rem; text-align: center; font-size: var(--fs-sm); font-weight: 650; } .odds-profit small { display: block; font-size: .66rem; color: var(--muted); font-weight: 500; }
.months-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-top: .9rem; text-align: center; font-size: var(--fs-sm); }
.months-table > div { background: var(--surface-2); border-radius: 9px; padding: .45rem .2rem; } .months-table small { display: block; font-size: .66rem; color: var(--muted); text-transform: uppercase; } .months-table b { display: block; } .months-table span { font-size: var(--fs-xs); color: var(--text-2); } .months-table em { display: block; font-style: normal; font-size: .68rem; color: var(--accent-text); font-weight: 700; }
.form-dots { display: flex; gap: .35rem; flex-wrap: wrap; } .fd { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 800 .75rem var(--font-display); color: #fff; } .fd--won { background: var(--success); } .fd--lost { background: var(--danger); }
.best-win__odds { display: block; font: 800 2.4rem var(--font-display); color: var(--success); margin: .2rem 0; } .best-win p { font-weight: 600; }
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ach { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .2rem; border-radius: 12px; background: var(--surface-2); color: var(--muted); opacity: .55; text-align: center; }
.ach small { font-size: .66rem; line-height: 1.2; font-weight: 600; } .ach .ic { width: 22px; height: 22px; } .ach.is-on { opacity: 1; color: var(--accent-text); background: var(--accent-soft); }
.act-row { display: flex; gap: .9rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--border); } .act-row:last-child { border-bottom: 0; } .act-row:hover { background: var(--surface-hover); }
.act-row__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }
.act-row small { color: var(--muted); font-size: var(--fs-xs); } .act-row b { display: block; font-weight: 650; } .act-row p { font-size: var(--fs-sm); color: var(--text-2); margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tip-list, .coupon-list { display: grid; gap: .9rem; }
.mod-actions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-top: .4rem; }
.mod-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .95rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); text-align: left; transition: border-color .15s, transform .15s; }
.mod-btn:hover:not([disabled]) { border-color: var(--accent-border); transform: translateY(-1px); } .mod-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mod-btn > .ic { width: 22px; height: 22px; color: var(--accent-text); margin-bottom: .3rem; } .mod-btn b { font: 700 1rem var(--font-display); } .mod-btn small { font-size: var(--fs-xs); color: var(--muted); }
.mod-btn--danger > .ic { color: var(--danger); } .mod-btn--danger:hover:not([disabled]) { border-color: var(--danger); } .mod-btn--ok > .ic { color: var(--success); }
.sanc { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 0; border-top: 1px solid var(--border); } .card__title + .sanc { border-top: 0; }
.sanc.is-revoked { opacity: .6; }
.sanc__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; } .sanc__ic--warn { background: var(--warn-soft); color: var(--warn); } .sanc__ic--accent { background: var(--accent-soft); color: var(--accent-text); } .sanc__ic--danger { background: var(--danger-soft); color: var(--danger); }
.sanc__main { flex: 1; min-width: 0; } .sanc__top { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .sanc p { font-size: var(--fs-sm); margin: .2rem 0; } .sanc small { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 1100px) { .prof-grid { grid-template-columns: 1fr; } .prof-side { position: static; } }
@media (max-width: 640px) { .prof-banner { height: 140px; } .prof-head__body { padding: 0 1rem 1rem; margin-top: -44px; gap: .8rem; } .prof-id { padding-top: 0; } .prof-actions { padding-top: 0; } .prof-head__body > .avatar { --s: 92px; } .prof-awards { padding: 0 1rem 1rem; }
.stat-hero { grid-template-columns: 1fr; justify-items: center; } .stat-hero__main { width: 100%; } .months-table { grid-template-columns: repeat(3, 1fr); } .ach-grid { grid-template-columns: repeat(4, 1fr); } .prof-counters > div { border-bottom: 1px solid var(--border); } }
.follow-btns { display: inline-flex; gap: .4rem; }

/* --- css/pages/settings.css --- */
.settings { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.set-nav { position: sticky; top: calc(var(--topbar-h) + 1rem); padding: .6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.set-nav__user { padding: .8rem .8rem 1rem; border-bottom: 1px solid var(--border); margin-bottom: .4rem; }
.set-nav > a { display: flex; gap: .8rem; align-items: center; padding: .7rem .8rem; border-radius: 11px; color: var(--text-2); position: relative; }
.set-nav > a > .ic:first-child { flex: none; width: 20px; height: 20px; }
.set-nav > a span { flex: 1; min-width: 0; } .set-nav > a b { display: block; font: 600 .95rem var(--font-display); color: var(--text); } .set-nav > a small { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-nav > a:hover { background: var(--surface-2); }
.set-nav > a.is-active { background: var(--accent-soft); } .set-nav > a.is-active > .ic:first-child, .set-nav > a.is-active b { color: var(--accent-text); }
.set-nav > a.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); }
.set-nav__chev { color: var(--muted); opacity: .6; }
.set-nav__profile { margin-top: .4rem; border-top: 1px solid var(--border); border-radius: 0 0 11px 11px !important; }
.set-main { min-width: 0; display: grid; gap: 1rem; } .set-main > .page-title { margin-bottom: .2rem; }
[data-set-body] { display: grid; gap: 1rem; }
.set-card { padding: 1.4rem 1.5rem; } .set-card__head { margin-bottom: 1.1rem; } .set-card__head h2 { font-size: 1.18rem; } .set-card__head p { color: var(--text-2); font-size: var(--fs-sm); margin-top: .25rem; max-width: 720px; }
.set-card--danger { border-color: rgba(239, 68, 68, .35); } .set-card--danger h2 { color: var(--danger); }
.set-sub { font: 700 .82rem var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 1.4rem 0 .7rem; padding-top: 1rem; border-top: 1px solid var(--border); } form > .set-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.set-actions { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; margin-top: 1.1rem; flex-wrap: wrap; } .set-actions .form__error { flex: 1; margin: 0; }
.set-more { margin-top: 1rem; } .set-more > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-weight: 600; color: var(--accent-text); font-size: var(--fs-sm); list-style: none; } .set-more > summary::-webkit-details-marker { display: none; } .set-more[open] > summary { margin-bottom: 1rem; }
.kv-line { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .kv-line > .ic { color: var(--accent); }
.switch-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.switch-row b { display: block; font-weight: 600; } .switch-row small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .1rem; } .switch-row.is-disabled { opacity: .6; cursor: default; }
.media-edit { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.media-edit__banner { height: 170px; background: radial-gradient(circle at 80% 10%, rgba(255, 138, 61, .55), transparent 50%), linear-gradient(120deg, #2a1206, #a63400 55%, #fa5300); background-size: cover; background-position: center; position: relative; }
.media-edit__btns { position: absolute; right: .8rem; top: .8rem; display: flex; gap: .4rem; z-index: 2; }
.media-edit__avatar { display: flex; align-items: flex-end; gap: 1rem 1.2rem; padding: 0 1.2rem 1.1rem; margin-top: -48px; position: relative; pointer-events: none; flex-wrap: wrap; } .media-edit__avatar > * { pointer-events: auto; }
.media-edit__avatar > div { padding-top: 60px; } .media-edit__avatar > div .btn { margin: .15rem 0; }
@media (max-width: 520px) { .media-edit__avatar > div { padding-top: .6rem; flex-basis: 100%; } } .media-edit__avatar .avatar { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent); }
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.theme-opt { cursor: pointer; display: grid; gap: .5rem; } .theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt > span:last-child { display: flex; gap: .4rem; align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-sm); }
.theme-opt__prev { height: 74px; border-radius: 12px; border: 2px solid var(--border); padding: .55rem; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 1fr; gap: 5px; background: #f3f5f9; transition: border-color .15s; }
.theme-opt__prev i { border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .theme-opt__prev i:first-child { grid-row: span 2; background: #e6e9ef; } .theme-opt__prev i:last-child { background: #fa5300; opacity: .8; }
.theme-opt--dark .theme-opt__prev { background: #070a0e; } .theme-opt--dark .theme-opt__prev i { background: #141a22; } .theme-opt--dark .theme-opt__prev i:first-child { background: #0e1319; }
.theme-opt--system .theme-opt__prev { background: linear-gradient(135deg, #f3f5f9 50%, #070a0e 50%); }
.theme-opt input:checked + .theme-opt__prev { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pw-meter { display: flex; align-items: center; gap: .7rem; margin: -.2rem 0 .9rem; } .pw-meter i { flex: 1; max-width: 260px; height: 6px; border-radius: 6px; background: var(--surface-3); position: relative; overflow: hidden; }
.pw-meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; transition: width .25s, background .25s; } .pw-meter span { font-size: var(--fs-xs); color: var(--muted); }
.pw-meter[data-s="0"] i::after { width: 15%; background: var(--danger); } .pw-meter[data-s="1"] i::after { width: 32%; background: var(--danger); } .pw-meter[data-s="2"] i::after { width: 55%; background: var(--warn); } .pw-meter[data-s="3"] i::after { width: 78%; background: var(--success); } .pw-meter[data-s="4"] i::after { width: 100%; background: var(--success); }
.twofa { display: flex; gap: 1.2rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; } .twofa__qr { width: 170px; flex: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #fff; } .twofa__qr .qr { display: block; width: 100%; height: auto; }
.twofa__key { display: block; font: 600 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; margin: .3rem 0 .6rem; word-break: break-all; }
.steps-list { padding-left: 1.2rem; display: grid; gap: .35rem; font-size: var(--fs-sm); color: var(--text-2); list-style: decimal; }
.sessions { display: grid; gap: .6rem; }
.session { display: flex; gap: .9rem; align-items: center; padding: .85rem 1rem; border-radius: 13px; background: var(--surface-2); border: 1px solid transparent; flex-wrap: wrap; } .session.is-current { border-color: var(--accent-border); }
.session__ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--accent-text); }
.session__main { flex: 1; min-width: 200px; } .session__main b { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-weight: 650; } .session__main small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .1rem; }
.notif-prefs__head, .notif-prefs__row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px; gap: 1rem; align-items: center; }
.notif-prefs__head { font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-bottom: .6rem; border-bottom: 1px solid var(--border); } .notif-prefs__head span:not(:first-child) { display: inline-flex; gap: .3rem; align-items: center; justify-content: center; }
.notif-prefs__row { padding: .85rem 0; border-bottom: 1px solid var(--border); } .notif-prefs__row b { display: block; font-weight: 600; } .notif-prefs__row small { font-size: var(--fs-xs); color: var(--muted); } .notif-prefs__row .switch { justify-self: center; }
.blocked-list { display: grid; gap: .5rem; } .blocked { display: flex; gap: .8rem; align-items: center; } .blocked > :first-child { flex: 1; }
.sub-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-bottom: 1rem; } .sub-status > div { background: var(--surface-2); border-radius: 12px; padding: .8rem 1rem; } .sub-status small { display: block; font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.sub-status + .alert, .alert + .alert { margin-top: .6rem; }
.due-list { display: grid; gap: .5rem; margin-top: 1rem; } .due { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--accent-border); background: var(--accent-softer); } .due > div { flex: 1; } .due small { display: block; color: var(--muted); font-size: var(--fs-xs); } .due > .ic { color: var(--accent-text); }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 380px)); gap: 1rem; }
.plan { padding: 1.3rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: .7rem; } .plan.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan__price { font: 800 2rem var(--font-display); } .plan__price small { font: 500 var(--fs-sm) var(--font-body); color: var(--muted); margin-left: .3rem; } .plan p { color: var(--text-2); font-size: var(--fs-sm); }
.plan ul { display: grid; gap: .35rem; flex: 1; font-size: var(--fs-sm); } .plan li { display: flex; gap: .45rem; align-items: flex-start; } .plan li .ic { color: var(--success); margin-top: 2px; }
.pm { display: flex; gap: .7rem; align-items: center; padding: .7rem 0; } .pm small { color: var(--muted); }
.po-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; } .po-totals > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.2rem; box-shadow: var(--shadow); }
.po-totals small { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .po-totals b { display: flex; gap: .4rem; align-items: center; font: 800 1.3rem var(--font-display); margin-top: .2rem; }
.method-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.method { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: 13px; border: 2px solid var(--border); cursor: pointer; } .method input { position: absolute; opacity: 0; }
.method:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); } .method.is-disabled { opacity: .5; cursor: not-allowed; }
.method__ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; } .method b { display: block; font-weight: 650; font-size: var(--fs-sm); } .method small { font-size: var(--fs-xs); color: var(--muted); }
.form-grid--addr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-pesel], [data-birth] { display: contents; } [data-pesel][hidden], [data-birth][hidden] { display: none; }
@media (max-width: 980px) { .settings { grid-template-columns: 1fr; } .set-nav { position: static; display: flex; overflow-x: auto; padding: .4rem; scrollbar-width: none; } .set-nav__user, .set-nav__profile, .set-nav > a small, .set-nav__chev { display: none; } .set-nav > a { flex: none; } .set-nav > a.is-active::before { display: none; } }
@media (max-width: 640px) { .set-card { padding: 1.1rem; } .po-totals { grid-template-columns: 1fr; } .notif-prefs__head, .notif-prefs__row { grid-template-columns: minmax(0, 1fr) 54px 54px; gap: .5rem; } .notif-prefs__head span:not(:first-child) { font-size: 0; } .notif-prefs__head span .ic { font-size: 1rem; } .theme-opt__prev { height: 56px; } }
.set-group { display: grid; gap: .8rem; } .set-group + .set-group { margin-top: .6rem; }
.set-group__head h2 { font-size: 1.15rem; } .set-group__head p { color: var(--muted); font-size: var(--fs-sm); margin-top: .15rem; }
.set-rows { display: grid; gap: 4px; border-radius: var(--r-lg); overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); text-align: left; color: inherit; border-radius: 6px; transition: background .12s, border-color .12s; min-width: 0; }
.set-rows > .set-row:first-child { border-radius: var(--r-lg) var(--r-lg) 6px 6px; } .set-rows > .set-row:last-child { border-radius: 6px 6px var(--r-lg) var(--r-lg); } .set-rows > .set-row:only-child { border-radius: var(--r-lg); }
button.set-row:hover { background: var(--surface-hover); border-color: var(--accent-border); }
.set-row.is-current { border-color: var(--accent-border); }
.set-row__ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--text); background: var(--surface-2); } .set-row__ic .ic { width: 21px; height: 21px; }
.set-row__main { flex: 1; min-width: 0; display: grid; gap: .1rem; } .set-row__main b { font-weight: 650; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .set-row__main > span { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.set-row__chev { flex: none; color: var(--muted); } button.set-row:hover .set-row__chev { color: var(--accent-text); transform: translateX(2px); }
.set-alerts { display: grid; gap: .6rem; }
.sub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sub-card { position: relative; padding: 1.3rem 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--surface); display: flex; flex-direction: column; gap: .3rem; min-width: 0; overflow: hidden; }
.sub-card--plan { border-color: rgba(250, 83, 0, .55); background: radial-gradient(120% 120% at 0% 0%, rgba(250, 83, 0, .28), transparent 60%), var(--surface); }
.sub-card__eyebrow { font: 800 .68rem var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); }
.sub-card h3 { font: 800 1.55rem/1.15 var(--font-display); }
.sub-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }
.sub-card__kv { display: grid; gap: .15rem; } .sub-card__kv span { font-size: var(--fs-xs); color: var(--muted); } .sub-card__kv b { font-weight: 650; }
.sub-card__btns { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.sub-card__pm { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; } .sub-card__pm .card-num { color: var(--muted); letter-spacing: .12em; } .sub-card__pm b { font: 800 1.3rem var(--font-display); letter-spacing: .06em; } .sub-card__pm small { flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); }
.btn--pill { border-radius: 99px; }
.pay-amount { flex: none; padding: .3rem .8rem; border-radius: 99px; background: var(--surface-2); font-weight: 650; font-size: var(--fs-sm); }
.pill--neutral { background: var(--surface-2); }
@media (max-width: 760px) { .sub-cards { grid-template-columns: 1fr; } .set-row { padding: .85rem .9rem; gap: .75rem; } .set-row .pill { display: none; } .set-row .pay-amount + .pill { display: inline-flex; } .hide-sm { display: none; } }
.set-alerts .alert { align-items: center; flex-wrap: wrap; } .set-alerts .alert > span { flex: 1 1 260px; } .set-alerts .alert .btn { flex: none; }
.set-row--due { background: var(--accent-softer); }
.pay-plan { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 65%), var(--surface-2); border: 1px solid var(--accent-border); }
.pay-plan b { font: 800 1.15rem/1.2 var(--font-display); display: block; } .pay-plan small { color: var(--muted); font-size: var(--fs-xs); }
.pay-plan > span { font: 800 1.5rem/1 var(--font-display); white-space: nowrap; } .pay-plan > span small { font: 500 var(--fs-xs) var(--font-body); margin-left: .2rem; }
.pay-feats { list-style: none; display: grid; gap: .35rem; margin: .9rem 0 0; padding: 0; font-size: var(--fs-sm); color: var(--text-2); }
.pay-feats li { display: flex; gap: .45rem; align-items: center; } .pay-feats .ic { color: var(--success); }
.pay-opts { display: grid; gap: .6rem; margin-top: 1rem; }
.pay-opt { position: relative; display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 13px; border: 2px solid var(--border); cursor: pointer; transition: border-color .15s, background .15s; }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); }
.pay-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.pay-opt__ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }
.pay-opt__main { display: grid; gap: .15rem; min-width: 0; } .pay-opt__main b { font-weight: 650; font-size: var(--fs-sm); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .pay-opt__main small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
.pay-widget { display: grid; gap: .9rem; }
.pay-widget__sum { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--surface-2); } .pay-widget__sum b { font: 800 1.4rem var(--font-display); }
.pay-widget__brand { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: var(--fs-xs); color: var(--muted); }
.pay-result { text-align: center; padding: 2.6rem 1.5rem; display: grid; justify-items: center; gap: .7rem; margin-top: 2rem; }
.pay-result h1 { font: 800 1.6rem/1.2 var(--font-display); } .pay-result p { color: var(--text-2); max-width: 46ch; }
.pay-result__ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.pay-result--ok .pay-result__ic { background: var(--success-soft); color: var(--success); } .pay-result--err .pay-result__ic { background: var(--danger-soft); color: var(--danger); }
.pay-result--warn .pay-result__ic { background: var(--warn-soft); color: var(--warn); }
.pay-result__ic .ic { background: currentColor; }
.pay-result .btn-group { justify-content: center; margin-top: .6rem; flex-wrap: wrap; }
@media (max-width: 760px) {
.set-row--static:has(.pay-amount) { flex-wrap: wrap; row-gap: .5rem; }
.set-row--static:has(.pay-amount) .set-row__main { flex: 1 1 calc(100% - 60px); }
.set-row--static:has(.pay-amount) .pay-amount { margin-left: calc(36px + .75rem); }
.set-row--static:has(.pay-amount) .btn { margin-left: auto; }
.set-alerts .alert .btn { width: 100%; }
}
.plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .7rem; }
.plan-tile { position: relative; display: block; cursor: pointer; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); padding: 1rem 1rem .9rem; transition: border-color .15s, box-shadow .15s; }
.plan-tile:hover { border-color: var(--border-strong); }
.plan-tile input { position: absolute; opacity: 0; pointer-events: none; }
.plan-tile:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 65%), var(--surface-2); }
.plan-tile.has-badge { padding-top: 1.35rem; }
.plan-tile__badge { position: absolute; top: -.6rem; left: .9rem; padding: .2rem .55rem; border-radius: 999px; background: var(--accent); color: #fff; font: 800 .66rem/1.2 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.plan-tile__body { display: grid; gap: .3rem; }
.plan-tile__name { font: 800 1.05rem/1.2 var(--font-display); }
.plan-tile__kind { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); color: var(--muted); }
.plan-tile__price { font: 800 1.45rem/1.1 var(--font-display); margin-top: .2rem; } .plan-tile__price small { font: 500 var(--fs-xs) var(--font-body); color: var(--muted); }
.plan-tile__per-m { color: var(--success); font-size: var(--fs-xs); font-weight: 600; }
.plan-tile__desc { color: var(--text-2); font-size: var(--fs-sm); }
.plan-tile .pay-feats { margin-top: .4rem; }
.pay-h { font: 700 var(--fs-sm)/1.2 var(--font-display); margin: 1.1rem 0 .5rem; color: var(--text-2); }
.paywall { max-width: 920px; margin: 0 auto; display: grid; gap: 1.2rem; }
.paywall__hero { text-align: center; padding: 2rem 1.25rem 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: radial-gradient(120% 120% at 50% 0%, var(--accent-soft), transparent 60%), var(--surface); }
.paywall__ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: .9rem; }
.paywall__ic .ic { width: 30px; height: 30px; }
.paywall__hero h1 { font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--font-display); margin: 0 0 .5rem; }
.paywall__hero p { color: var(--text-2); max-width: 560px; margin: 0 auto; }
.paywall__act { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.paywall__foot { text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.access-box { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--r-md); border: 1px solid var(--accent-border); background: var(--accent-softer, var(--accent-soft)); margin-bottom: 1rem; }
.access-box .ic { color: var(--accent-text); margin-top: .15rem; flex: none; }
.follow-flags { display: inline-flex; gap: .25rem; flex-wrap: wrap; } .follow-list .blocked { flex-wrap: wrap; }
.set-note { display: flex; gap: .35rem; align-items: center; margin: 0 0 .8rem; }
.cp-filter { margin: -.2rem 0 1rem; display: flex; gap: .4rem; }

/* --- css/pages/notifications.css --- */
.nfilters { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.nfilters .chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.switch-inline { display: inline-flex; gap: .6rem; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); cursor: pointer; }
.nlist { overflow: hidden; }
.nday { font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .9rem 1.2rem .5rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.nitem { display: flex; gap: .9rem; align-items: flex-start; padding: .95rem 1.2rem; border-bottom: 1px solid var(--border); position: relative; transition: background .12s; }
.nitem:hover { background: var(--surface-hover); } .nitem:last-child { border-bottom: 0; }
.nitem.is-unread { background: var(--accent-softer); } .nitem.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.nitem__ic { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text); }
.nitem__ic > em { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.nitem__ic > em .ic { width: 12px; height: 12px; } .nitem__ic .avatar { --s: 44px; }
.nitem__ic--moderation { background: var(--warn-soft); color: var(--warn); } .nitem__ic--billing { background: var(--info-soft); color: var(--info); } .nitem__ic--ranking { background: rgba(245, 179, 1, .14); color: #d49b00; } .nitem__ic--tips { background: var(--success-soft); color: var(--success); }
.nitem__ic--lg { width: 56px; height: 56px; border-radius: 15px; } .nitem__ic--lg .ic { width: 26px; height: 26px; }
.nitem__main { flex: 1; min-width: 0; } .nitem__main b { display: block; font-weight: 650; line-height: 1.35; } .nitem__main p { font-size: var(--fs-sm); color: var(--text-2); margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nitem__main small { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .3rem; }
.nitem__more { opacity: 0; transition: opacity .12s; } .nitem:hover .nitem__more, .nitem__more:focus-visible { opacity: 1; } @media (hover: none) { .nitem__more { opacity: 1; } }
.nsentinel { display: flex; justify-content: center; padding: 1.2rem; min-height: 40px; }
.nfoot { text-align: center; padding-bottom: 1rem; } .nfoot .link { display: inline-flex; gap: .35rem; align-items: center; color: var(--muted); }
.ndetail { padding: 1.6rem 1.8rem; } .ndetail__head { display: flex; gap: 1rem; align-items: flex-start; } .ndetail__head h1 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: .4rem 0 .25rem; }
.ndetail__actor { margin-top: 1.2rem; padding: .8rem 1rem; background: var(--surface-2); border-radius: 12px; display: inline-flex; }
.ndetail__body { margin-top: 1.2rem; font-size: 1.02rem; line-height: 1.65; color: var(--text); }
.ndetail__dl { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ndetail__dl > div { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); } .ndetail__dl > div:last-child { border-bottom: 0; } .ndetail__dl > div:nth-child(odd) { background: var(--surface-2); }
.ndetail__dl dt { color: var(--muted); font-weight: 600; text-transform: capitalize; } .ndetail__dl dd { word-break: break-word; }
.ndetail__foot { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .ndetail { padding: 1.1rem; } .ndetail__dl > div { grid-template-columns: 1fr; gap: .15rem; } .nitem { padding: .85rem 1rem; } }

/* --- css/pages/help.css --- */
.topbar--help .topbar__in { gap: 1rem; }
.help-sep { width: 1px; height: 28px; background: var(--border-strong); }
.help-title { font: 700 1.05rem var(--font-display); color: var(--text-2); white-space: nowrap; }
a.help-title:hover { color: var(--text); }
.help-search { position: relative; display: flex; align-items: center; width: 100%; max-width: 360px; }
.help-search .ic-wrap { position: absolute; left: .85rem; color: var(--muted); display: flex; }
.help-search input { width: 100%; height: 40px; padding: 0 1rem 0 2.5rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); }
.help-search input:focus { outline: 0; border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-softer); }
.help-search--hero { max-width: 560px; margin: 1.8rem auto 0; } .help-search--hero input { height: 54px; font-size: var(--fs-md); border-radius: 12px; padding-left: 3rem; } .help-search--hero .ic-wrap { left: 1.1rem; }
@media (max-width: 900px) { .help-search--top { display: none; } .topbar--help .tb-social { display: none; } }
@media (max-width: 520px) { .topbar--help .help-sep, .topbar--help .help-title { display: none; } }
.help-hero { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem clamp(2.5rem, 6vw, 3.8rem); border-bottom: 1px solid var(--border); background: radial-gradient(50% 80% at 50% 0%, rgba(250, 83, 0, .1), transparent 70%); }
.help-hero h1 { font: 800 clamp(1.9rem, 4.6vw, 2.9rem)/1.1 var(--font-display); }
.help-hero p { color: var(--text-2); margin-top: .9rem; }
.help-wrap { max-width: 1000px; margin: 0 auto; padding: clamp(2.2rem, 5vw, 3.4rem) 1rem 3.5rem; }
.help-h2 { font: 800 1.55rem/1.2 var(--font-display); margin: 0 0 1.4rem; } .help-h2 + * { margin-bottom: 3rem; }
.help-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.help-cat { display: grid; gap: .5rem; align-content: start; padding: 1.6rem 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color .2s, transform .2s, background .2s; }
[data-theme="light"] .help-cat { background: var(--surface); }
.help-cat:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.help-cat__ic { color: var(--accent); margin-bottom: .4rem; display: flex; } .help-cat__ic .ic { width: 34px; height: 34px; }
.help-cat h3 { font: 700 1.12rem/1.3 var(--font-body); } .help-cat p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.help-faq .acc { background: var(--surface-2); } [data-theme="light"] .help-faq .acc { background: var(--surface); }
.help-faq .acc__head { font-weight: 700; font-size: var(--fs-md); padding: 1.15rem 1.4rem; }
.help-faq .acc__body { padding: 0 1.4rem 1.3rem; } .help-faq .acc.is-open .acc__body { padding-top: 1.2rem; }
.help-contact { text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2.6rem 1.4rem; margin-top: 3rem; }
[data-theme="light"] .help-contact { background: var(--surface); }
.help-contact h2 { font: 800 1.4rem/1.25 var(--font-display); } .help-contact p { color: var(--text-2); margin: .7rem 0 1.4rem; font-size: var(--fs-sm); }
.help-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100dvh - var(--topbar-h) - 70px); }
.help-side { border-right: 1px solid var(--border); padding: 1.6rem 1rem; position: sticky; top: var(--topbar-h); align-self: start; max-height: calc(100dvh - var(--topbar-h)); overflow-y: auto; }
.hs-cat + .hs-cat { margin-top: .3rem; }
.hs-cat__head { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .7rem .5rem; font: 700 .95rem/1.25 var(--font-body); color: var(--text); text-align: left; border-radius: 9px; }
.hs-cat__head:hover { background: var(--surface-2); } .hs-cat__head > .ic:first-child { color: var(--accent); width: 20px; height: 20px; }
.hs-cat__head span { flex: 1; } .hs-chev { color: var(--muted); transition: transform .2s; } .hs-cat.is-open .hs-chev { transform: rotate(180deg); color: var(--accent-text); }
.hs-cat__list { display: grid; gap: .15rem; padding: .3rem 0 .6rem 1rem; }
.hs-cat__list a { padding: .55rem .75rem; border-radius: 8px; font-size: var(--fs-sm); color: var(--text-2); border-left: 3px solid transparent; }
.hs-cat__list a:hover { color: var(--text); background: var(--surface-2); } .hs-cat__list a.is-active { background: var(--surface-3); color: var(--text); font-weight: 700; border-left-color: var(--accent); }
.help-main { padding: 2rem clamp(1rem, 4vw, 3.5rem) 3.5rem; max-width: 900px; width: 100%; }
.crumbs--help { text-transform: none; letter-spacing: 0; font: 500 var(--fs-sm)/1.2 var(--font-body); color: var(--text-2); }
.crumbs--help a:hover { color: var(--accent-text); text-decoration: none; } .crumbs--help span:last-child { color: var(--text); font-weight: 650; }
.help-main .help-title { font: 800 clamp(1.8rem, 3.5vw, 2.4rem)/1.15 var(--font-display); color: var(--text); white-space: normal; margin: .8rem 0 1.6rem; }
.help-lead { color: var(--text-2); margin: -.8rem 0 1.6rem; }
.help-topic { margin-bottom: 2rem; } .help-topic h2 { font-size: 1.2rem; margin-bottom: .9rem; } .help-topic h2 a:hover { color: var(--accent-text); }
.help-feedback { display: flex; gap: .6rem; align-items: center; margin-top: 1.6rem; color: var(--text-2); font-size: var(--fs-sm); flex-wrap: wrap; }
.help-results { display: grid; gap: .7rem; }
.help-result { display: grid; gap: .25rem; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .help-result:hover { border-color: var(--accent-border); }
.prose .callout, .acc__body .callout { border-left: 3px solid var(--accent); background: var(--accent-softer); padding: .9rem 1rem; border-radius: 0 10px 10px 0; color: var(--text); }
@media (max-width: 900px) { .help-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .help-layout { grid-template-columns: 1fr; } .help-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); } }
@media (max-width: 560px) { .help-cats { grid-template-columns: 1fr; } }

/* --- css/pages/static.css --- */
.static-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.6rem; }
.static-head__ic { width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; flex: none; }
.static-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.static-toc { position: sticky; top: calc(var(--topbar-h) + 1rem); display: grid; gap: .2rem; padding: 1rem; }
.static-toc b { font: 700 var(--fs-xs) var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .4rem; }
.static-toc a { font-size: var(--fs-sm); color: var(--text-2); padding: .4rem .55rem; border-radius: 7px; } .static-toc a:hover { background: var(--surface-2); color: var(--accent-text); }
.static-card { padding: clamp(1.3rem, 3vw, 2.2rem); }
.static-layout:not(:has(.static-toc)) { grid-template-columns: 1fr; }
@media (max-width: 860px) { .static-layout { grid-template-columns: 1fr; } .static-toc { position: static; } }
.link-card { text-align: center; display: grid; justify-items: center; gap: .9rem; padding: 3rem 1.5rem; margin-top: 2rem; }
.link-card > .ic { color: var(--accent-text); }

/* --- css/pages/admin.css --- */
.admin { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: calc(100dvh - var(--topbar-h)); }
.admin__nav { border-right: 1px solid var(--border); background: var(--surface); }
.admin__nav-in { position: sticky; top: var(--topbar-h); max-height: calc(100dvh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain; padding: 1rem .7rem 2rem; scrollbar-width: thin; }
.admin__brand { display: flex; gap: .55rem; align-items: center; padding: .3rem .6rem 1rem; font-family: var(--font-display); } .admin__brand .ic { color: var(--accent-text); }
.admin__group { display: grid; gap: 2px; margin-bottom: 1rem; } .admin__group > small { padding: .2rem .7rem .35rem; font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.admin__link { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 9px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; }
.admin__link:hover { background: var(--surface-2); color: var(--text); } .admin__link.is-active { background: var(--accent-soft); color: var(--accent-text); }
.admin__link span { flex: 1; } .admin__link em { font-style: normal; font-size: .62rem; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--muted); } .admin__link.is-soon { opacity: .75; }
.admin__main { padding: clamp(1rem, 3vw, 2rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.admin-tile { display: grid; gap: .4rem; } .admin-tile .ic { color: var(--accent-text); } .admin-tile small { color: var(--muted); } .admin-tile:hover { border-color: var(--accent-border); }
.chips--wrap { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip--tag { gap: .3rem; padding-right: .3rem; } .chip--tag button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); } .chip--tag button:hover { background: var(--danger-soft); color: var(--danger); }
.bl-add, .bl-test { display: flex; gap: .5rem; margin-top: .9rem; align-items: center; flex-wrap: wrap; } .bl-add .input, .bl-test .input { flex: 1; min-width: 200px; }
.anon-avs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.anon-av { display: flex; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--r-lg); background: var(--surface-2); } .anon-av img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; } .anon-av small { display: block; color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 900px) { .admin { grid-template-columns: minmax(0, 1fr); } .admin__nav { min-width: 0; border-right: 0; border-bottom: 1px solid var(--border); } .admin__nav-in { position: static; max-height: none; display: flex; gap: .3rem; overflow-x: auto; padding: .6rem; } .admin__brand, .admin__group > small { display: none; } .admin__group { display: flex; margin: 0; } .admin__link { white-space: nowrap; } .admin__link em { display: none; } }
.adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.adm-head p { max-width: 70ch; margin-top: .3rem; } .adm-head .btn-group { align-items: center; flex-wrap: wrap; }
.adm-head .pill { display: inline-flex; align-items: center; gap: .3rem; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.adm-stat { display: grid; gap: .2rem; padding: 1rem 1.1rem; } .adm-stat .ic { color: var(--accent-text); margin-bottom: .2rem; } .adm-stat b { font: 800 1.45rem/1.1 var(--font-display); } .adm-stat small { color: var(--muted); font-size: var(--fs-xs); }
.adm-grid { display: grid; gap: 1rem; }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.adm-card-head h2 { font: 700 1.05rem var(--font-display); }
.adm-filter { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .adm-filter .input { width: min(320px, 100%); }
.adm-filter .chip { display: inline-flex; align-items: center; gap: .3rem; }
.adm-months tbody tr { cursor: pointer; } .adm-months tr.is-active td { background: var(--accent-softer); }
.adm-months tfoot td { padding: .7rem .6rem; font-weight: 650; border-top: 1px solid var(--border-strong); }
.adm-bar { width: 38%; } .adm-bar i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); min-width: 3px; }
.adm-user { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--text); }
.adm-pay td small { font-size: var(--fs-2xs); }
.upick { position: relative; }
.upick__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; padding: .3rem; }
.upick__list button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .5rem; border: 0; background: none; border-radius: var(--r-sm); text-align: left; color: var(--text); cursor: pointer; }
.upick__list button:hover { background: var(--surface-hover); } .upick__list button > span:not(.pill) { display: grid; min-width: 0; flex: 1; } .upick__list small, .upick__sel small { color: var(--muted); font-size: var(--fs-xs); }
.upick__empty { padding: .7rem; color: var(--muted); font-size: var(--fs-sm); }
.upick__sel { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--accent-border); background: var(--accent-softer); border-radius: var(--r-md); }
.upick__sel > span { display: grid; flex: 1; min-width: 0; }
.copy-field { display: flex; gap: .5rem; } .copy-field .input { flex: 1; min-width: 0; font-size: var(--fs-sm); }
@media (max-width: 760px) { .adm-bar { display: none; } .adm-filter .input { width: 100%; } }
.admin__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font: 800 .66rem/20px var(--font-display); text-align: center; }
.admin__link.is-active .admin__badge { background: var(--accent-text); }
.adm-tabs { margin-bottom: 0; }
.adm-pad { padding: 1.1rem 1.2rem; }
.card--flush .adm-pad + .adm-pad { padding-top: 0; }
.adm-h2 { font: 700 1.05rem/1.3 var(--font-display); margin-bottom: .9rem; display: flex; align-items: center; gap: .45rem; }
.adm-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.adm-deleted { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--radius, 12px); border: 1px solid color-mix(in srgb, var(--danger, #e5484d) 40%, transparent); background: color-mix(in srgb, var(--danger, #e5484d) 8%, transparent); font-size: .88rem; line-height: 1.5; }
.adm-deleted .ic { margin-top: .2rem; color: var(--danger, #e5484d); flex: none; }
.adm-split--wide { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
.adm-col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.adm-stats--sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.adm-stats--sm .adm-stat { padding: .85rem 1rem; } .adm-stats--sm .adm-stat b { font-size: 1.25rem; }
a.adm-stat { color: var(--text); transition: border-color .15s, transform .15s; } a.adm-stat:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.adm-stat.is-warn { border-color: rgba(245, 165, 36, .45); } .adm-stat.is-warn .ic { color: var(--warn); }
.adm-stat.is-danger { border-color: rgba(240, 72, 72, .5); } .adm-stat.is-danger .ic { color: var(--danger); } .adm-stat.is-danger b { color: var(--danger); }
.adm-stat.is-ok .ic { color: var(--success); }
.adm-filters { align-items: center; }
.adm-card-head .adm-filter { margin-left: auto; }
.adm-card-head h2 { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.adm-table td { font-size: var(--fs-sm); } .adm-table td small { font-size: var(--fs-xs); }
.adm-table tr.is-link, .table tr.is-link { cursor: pointer; }
.adm-table tr.is-active td { background: var(--accent-softer); }
.adm-table tr.is-muted td { opacity: .55; }
.adm-table code, .adm-ip { font: 500 var(--fs-xs) ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 6px; border-radius: 5px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.adm-det { display: inline-block; max-width: 340px; overflow-wrap: anywhere; }
.adm-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.adm-bulk { display: flex; gap: .5rem; flex-wrap: wrap; }
.adm-user span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user .role-tag { margin-left: .1rem; }
.icon-btn--xs { width: 24px; height: 24px; } .icon-btn--xs .ic { width: 14px; height: 14px; }
.adm-kv { display: grid; gap: .1rem; }
.adm-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--border); min-width: 0; }
.adm-kv > div:last-child { border-bottom: 0; }
.adm-kv > div > span { color: var(--muted); font-size: var(--fs-sm); flex: none; }
.adm-kv > div > b { font-weight: 600; font-size: var(--fs-sm); text-align: right; min-width: 0; overflow-wrap: anywhere; display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.adm-kv--tight > div { padding: .35rem 0; }
.adm-kv__full { display: block !important; } .adm-kv__full p { margin-top: .3rem; font-size: var(--fs-sm); color: var(--text-2); white-space: pre-line; }
.adm-kv .set-sub { margin: .2rem 0 .4rem; display: flex; gap: .35rem; align-items: center; }
.adm-kv__bar { display: block !important; height: 8px; padding: 0 !important; margin: .2rem 0 .5rem; border-radius: 4px; background: var(--surface-3); overflow: hidden; border: 0 !important; }
.adm-kv__bar i { display: block; height: 100%; border-radius: 4px; background: var(--success); }
.adm-kv__bar i.is-warn { background: var(--warn); } .adm-kv__bar i.is-danger { background: var(--danger); }
.adm-kv__bar--lg { height: 12px; border-radius: 6px; } .adm-kv__bar--lg i { border-radius: 6px; }
.adm-list { display: grid; }
.adm-list__row { display: flex; align-items: center; gap: .65rem; padding: .65rem 1.1rem; border-bottom: 1px solid var(--border); min-width: 0; color: var(--text); font-size: var(--fs-sm); }
.adm-list__row:last-child { border-bottom: 0; }
.adm-list__row > :last-child { margin-left: auto; }
.adm-list__row > small { color: var(--muted); }
a.adm-list__row:hover { background: var(--surface-hover); }
.adm-list__row--wrap { flex-wrap: wrap; } .adm-list__row--wrap > :last-child { margin-left: 0; flex-basis: 100%; }
.adm-pad .adm-list__row, .modal .adm-list__row { padding-left: 0; padding-right: 0; }
.adm-chips { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.adm-rank { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); font: 800 .75rem var(--font-display); }
.adm-list__row:nth-child(1) .adm-rank { background: #f5b301; color: #1a1300; } .adm-list__row:nth-child(2) .adm-rank { background: #c3ccd6; color: #141a20; } .adm-list__row:nth-child(3) .adm-rank { background: #d08a4f; color: #1c0f05; }
.adm-alerts { display: grid; gap: .5rem; margin-top: .8rem; } .adm-alerts .alert { align-items: center; } .adm-alerts .alert > span { flex: 1; }
.adm-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.adm-chart-card { padding: 1rem 1rem .6rem; display: grid; gap: .4rem; }
.adm-chart-card header { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.adm-chart-card header span { display: inline-flex; gap: .4rem; align-items: center; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; } .adm-chart-card header .ic { color: var(--muted); }
.adm-chart-card header b { font: 800 1.2rem var(--font-display); }
.adm-chart { width: 100%; height: auto; display: block; overflow: visible; }
.adm-chart .chart-t { font-size: 18px; }
.chart-hit { fill: transparent; cursor: crosshair; } .chart-hit:hover { fill: var(--accent-soft); }
.adm-frame { width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; display: block; }
.adm-user-head { padding: 0; overflow: hidden; }
.adm-user-head__banner { height: 110px; background: var(--surface-3) center/cover no-repeat; }
.adm-user-head__in { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; flex-wrap: wrap; }
.adm-user-head__banner + .adm-user-head__in { margin-top: -40px; } .adm-user-head__banner + .adm-user-head__in .avatar { box-shadow: 0 0 0 4px var(--surface); }
.adm-user-head__main { flex: 1; min-width: 200px; } .adm-user-head__main h1 { font: 800 1.5rem/1.2 var(--font-display); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.adm-user-head__banner + .adm-user-head__in .adm-user-head__main { padding-top: 40px; }
.adm-user-head .btn-group { flex-wrap: wrap; }
.adm-role-pick { display: grid; gap: .45rem; max-width: 420px; } .adm-role-pick label { font-weight: 600; font-size: var(--fs-sm); }
.perm-group { margin-bottom: 1.3rem; } .perm-group:last-of-type { margin-bottom: .5rem; }
.perm-group h3 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font: 700 var(--fs-xs) var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-bottom: .5rem; margin-bottom: .3rem; border-bottom: 1px solid var(--border); }
.perm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: .8rem; align-items: center; padding: .45rem 0; border-bottom: 1px dashed var(--border); }
.perm-row:last-child { border-bottom: 0; }
.perm-row > span:first-child { display: grid; min-width: 0; } .perm-row b { font-weight: 600; font-size: var(--fs-sm); } .perm-row small { color: var(--muted); font-size: var(--fs-2xs); font-family: ui-monospace, Menlo, monospace; }
.perm-eff { display: grid; place-items: center; }
.seg--sm button { padding: .3rem .6rem; font-size: var(--fs-xs); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem 1rem; }
.perm-grid .check span { display: grid; } .perm-grid .check small { color: var(--muted); font-size: var(--fs-2xs); font-family: ui-monospace, Menlo, monospace; }
.adm-roles { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
.adm-roles__list { padding: .4rem; display: grid; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 1rem); }
.adm-role { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: 10px; color: var(--text); }
.adm-role:hover { background: var(--surface-2); } .adm-role.is-active { background: var(--accent-soft); }
.adm-role > span:nth-child(2) { display: grid; flex: 1; min-width: 0; } .adm-role b { font-weight: 650; font-size: var(--fs-sm); } .adm-role small { color: var(--muted); font-size: var(--fs-xs); }
.adm-role__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px var(--surface-2); }
.adm-roles__edit .form-grid { margin-bottom: 1rem; }
.rep-list { display: grid; }
.rep-row { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--border); padding-right: 1rem; } .rep-row:last-child { border-bottom: 0; } .rep-row:hover { background: var(--surface-hover); }
.rep-row__link, a.rep-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .85rem 1.1rem; color: var(--text); text-decoration: none; }
.rep-row__act { flex: none; } .rep-row--open { box-shadow: inset 3px 0 0 var(--warn); }
.rep-row__main { display: grid; gap: .2rem; min-width: 0; } .rep-row__main b { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-weight: 650; }
.rep-row__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); } .rep-row__main small:not(.muted) { color: var(--text-2); }
.rep-row__st { display: grid; justify-items: end; gap: .2rem; } .rep-row__st small { font-size: var(--fs-2xs); }
.rep-snap { margin: 0; padding: .9rem 1rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--text-2); max-height: 360px; overflow-y: auto; }
.rep-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.rep-conv { display: grid; gap: .45rem; max-height: 420px; overflow-y: auto; padding: .2rem; }
.rep-msg { display: grid; gap: .1rem; padding: .55rem .75rem; border-radius: 12px; background: var(--surface-2); max-width: 85%; font-size: var(--fs-sm); }
.rep-msg.is-target { justify-self: end; background: var(--danger-soft); border: 1px solid rgba(240, 72, 72, .35); }
.rep-msg b { font-size: var(--fs-xs); } .rep-msg span { overflow-wrap: anywhere; white-space: pre-line; } .rep-msg small { color: var(--muted); font-size: var(--fs-2xs); }
.rep-thread { display: grid; }
.rep-note { padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.rep-note > div { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .3rem; }
.rep-note p { white-space: pre-line; overflow-wrap: anywhere; color: var(--text-2); }
.rep-note.is-internal { background: var(--surface-2); }
.rep-reply { padding: .9rem 1.1rem; display: grid; gap: .6rem; }
.rep-reply__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .rep-reply__bar .btn { margin-left: auto; }
.help-adm { padding: 0; overflow: hidden; }
.help-adm__topic { border-bottom: 1px solid var(--border); } .help-adm__topic:last-child { border-bottom: 0; }
.help-adm__th { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.1rem; background: var(--surface-2); flex-wrap: wrap; } .help-adm__th .btn-group { margin-left: auto; }
.help-adm__item { display: flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem .55rem 2rem; border-top: 1px dashed var(--border); font-size: var(--fs-sm); }
.help-adm__item > span:first-child { flex: 1; min-width: 0; }
.bm-logo { display: inline-grid; place-items: center; width: 34px; height: 22px; vertical-align: middle; } .bm-logo img { max-width: 34px; max-height: 22px; border-radius: 4px; } .bm-logo i { width: 14px; height: 14px; border-radius: 50%; }
.camp-view { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.camp-view__meta { display: grid; gap: .8rem; align-content: start; } .camp-view__preview { display: grid; gap: .4rem; min-width: 0; }
.camp-count { margin: .8rem 0; padding: .7rem .9rem; border-radius: var(--r-md); background: var(--accent-softer); border: 1px solid var(--accent-border); font-size: var(--fs-sm); }
.seg-box { display: grid; gap: .9rem; padding: 1rem; border-radius: var(--r-md); background: var(--surface-2); margin-top: .7rem; }
.seg-box__row { display: flex; gap: .5rem 1.2rem; flex-wrap: wrap; }
.chip-check { position: relative; display: inline-flex; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .8rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: 600 var(--fs-sm)/1 var(--font-display); transition: .15s; }
.chip-check span[style*="--ec"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ec); }
.chip-check input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.is-ok { border-color: rgba(46, 199, 112, .4); color: var(--success); } .chip.is-danger { border-color: rgba(240, 72, 72, .45); color: var(--danger); }
.list-add { display: flex; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; } .list-add .textarea { flex: 1; }
.adm-toggles { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.adm-wl-inv { align-self: end; }
.adm-set-nav { display: flex; flex-wrap: wrap; gap: .4rem; position: sticky; top: calc(var(--topbar-h) + .4rem); z-index: 5; padding: .5rem; border-radius: var(--r-md); background: var(--bg-elev); backdrop-filter: blur(12px); border: 1px solid var(--border); }
.adm-set-nav a { padding: .35rem .7rem; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .adm-set-nav a:hover { background: var(--surface-2); color: var(--text); }
.adm-set { scroll-margin-top: calc(var(--topbar-h) + 4.5rem); }
.adm-set-bool { align-self: center; } .adm-set-bool .switch-inline { display: flex; align-items: center; gap: .65rem; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; }
.adm-plan__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .adm-plan__head .adm-h2 { margin-bottom: .2rem; }
.adm-quota { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; } .adm-quota b { font: 800 2rem/1 var(--font-display); } .adm-quota span { color: var(--muted); font-size: var(--fs-sm); }
.adm-usage { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 1rem; }
.adm-usage > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.adm-usage i { width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; background: var(--info); opacity: .85; } .adm-usage i.has-err { background: var(--warn); }
.adm-usage small { font-size: var(--fs-2xs); color: var(--muted); }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; padding: 1.1rem; }
.emp-card { position: relative; display: grid; gap: .7rem; padding: 1rem; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--surface-2); overflow: hidden; }
.emp-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ec, var(--accent)); }
.emp-card.is-off { opacity: .6; }
.emp-card header { display: flex; gap: .7rem; align-items: center; } .emp-card header > div { display: grid; min-width: 0; } .emp-card header b { font-weight: 700; } .emp-card header small { color: var(--muted); font-size: var(--fs-xs); }
.emp-card__st { display: flex; gap: .35rem; flex-wrap: wrap; }
.emp-card footer { flex-wrap: wrap; }
.emp-av { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ec, var(--accent)) 22%, transparent); color: var(--ec, var(--accent-text)); font: 800 .9rem var(--font-display); text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--ec, var(--accent)) 45%, transparent); }
.emp-av--sm { width: 30px; height: 30px; border-radius: 9px; font-size: .72rem; }
.emp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ec, var(--accent)); margin-right: .45rem; vertical-align: middle; }
.form-grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sch-bar { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; }
.sch-range { font: 700 1.05rem var(--font-display); }
.sch-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.sch-kind { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--text-2); padding: .25rem .55rem; border-radius: 6px; background: var(--surface-2); }
.sch-kind::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--kc); }
.sch-kind--shift { --kc: var(--accent); } .sch-kind--task { --kc: var(--info); } .sch-kind--meeting { --kc: #a26bfa; } .sch-kind--leave { --kc: var(--muted); } .sch-kind--oncall { --kc: var(--warn); }
.sch-wrap { overflow-x: auto; }
.sch { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.sch th, .sch td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; }
.sch thead th { padding: .7rem .5rem; font: 700 var(--fs-xs) var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; background: var(--surface); }
.sch thead th small { font-weight: 600; color: var(--text-2); margin-left: .2rem; }
.sch thead th:first-child { width: 210px; }
.sch th.is-today, .sch td.is-today { background: var(--accent-softer); } .sch thead th.is-today { color: var(--accent-text); }
.sch tr > :last-child { border-right: 0; } .sch tbody tr:last-child > * { border-bottom: 0; }
.sch-emp { padding: .6rem .7rem; display: flex; gap: .55rem; align-items: center; text-align: left; font-weight: 400; }
.sch-emp > span:last-child { display: grid; min-width: 0; } .sch-emp b { font-size: var(--fs-sm); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sch-emp small { color: var(--muted); font-size: var(--fs-2xs); }
.sch-cell { padding: .35rem; min-height: 64px; height: 64px; cursor: pointer; transition: background .12s; }
.sch-cell:hover { background: var(--surface-hover); }
.sch-cell > * + * { margin-top: .3rem; }
.sch-item { display: grid; gap: .05rem; width: 100%; text-align: left; padding: .35rem .45rem; border-radius: 7px; border: 0; border-left: 3px solid var(--kc); background: color-mix(in srgb, var(--kc) 14%, var(--surface)); color: var(--text); font-size: var(--fs-xs); line-height: 1.25; cursor: pointer; }
button.sch-item:hover { background: color-mix(in srgb, var(--kc) 24%, var(--surface)); }
.sch-item b { font-weight: 700; font-variant-numeric: tabular-nums; } .sch-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); } .sch-item small { color: var(--muted); font-size: var(--fs-2xs); white-space: normal; }
.sch-item.sch-kind--shift { --kc: var(--accent); } .sch-item.sch-kind--task { --kc: var(--info); } .sch-item.sch-kind--meeting { --kc: #a26bfa; } .sch-item.sch-kind--leave { --kc: var(--muted); } .sch-item.sch-kind--oncall { --kc: var(--warn); }
.sch-item[style*="--kc"] { border-left-color: var(--kc); }
.sch-item.is-canceled { opacity: .5; text-decoration: line-through; } .sch-item.is-done { box-shadow: inset 0 0 0 1px rgba(46, 199, 112, .45); }
.sch-actual { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--fs-2xs); font-weight: 650; color: var(--success); }
.ts-days { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding: 1rem 1.1rem .5rem; border-bottom: 1px solid var(--border); }
.ts-day { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.ts-day i { width: 100%; max-width: 22px; min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--accent); }
.ts-day.is-zero i { background: var(--surface-3); } .ts-day.is-we small { color: var(--accent-text); }
.ts-day small { font-size: .6rem; color: var(--muted); }
@media (max-width: 1100px) { .adm-split--wide { grid-template-columns: 1fr; } .camp-view { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .adm-roles { grid-template-columns: 1fr; } .adm-roles__list { position: static; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (max-width: 760px) {
.rep-row__link { grid-template-columns: minmax(0, 1fr) auto; } .rep-row__type { display: none; } .rep-row { flex-wrap: wrap; padding-bottom: .6rem; } .rep-row__act { margin-left: 1.1rem; }
.perm-row { grid-template-columns: minmax(0, 1fr) 24px; } .perm-row .seg { grid-column: 1 / -1; grid-row: 2; }
.adm-card-head .adm-filter { margin-left: 0; width: 100%; } .adm-filter .select { flex: 1 1 140px; }
.adm-kv > div { flex-wrap: wrap; } .adm-kv > div > b { text-align: left; justify-content: flex-start; }
.sch-legend { margin-left: 0; } .ts-days { gap: 1px; } .ts-day small { display: none; }
.list-add { flex-direction: column; align-items: stretch; }
.adm-user-head__in { align-items: flex-start; }
}
.admin__main > .back-link { justify-self: start; }
.adm-filter--audit { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); align-items: center; }
.adm-filter--audit .input-group { flex: 1 1 340px; min-width: 0; } .adm-filter--audit .input-group .input { width: 100%; }
.adm-filter--audit > .input, .adm-filter--audit > .select { flex: 0 1 190px; min-width: 140px; }
.audit-list { display: grid; }
.audit-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); align-items: start; }
.audit-row:hover { background: var(--surface-hover); }
.audit-row__when { display: grid; gap: .1rem; } .audit-row__when b { font: 700 var(--fs-sm) var(--font-display); } .audit-row__when small { color: var(--muted); font-size: var(--fs-xs); }
.audit-row__main { display: grid; gap: .35rem; min-width: 0; }
.audit-row__line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .6rem; align-items: center; font-size: var(--fs-sm); min-width: 0; }
.audit-row__line--meta { align-items: start; }
.audit-row__k { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.audit-row__v { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.audit-row__ip { text-align: right; }
.adm-act { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .adm-act b { font-weight: 700; }
.adm-act code { font-size: .7rem; padding: .05rem .4rem; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.adm-tt { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: .05rem .45rem; border-radius: 6px; margin-right: .1rem; }
.adm-tlink { color: var(--accent-text); font-weight: 600; overflow-wrap: anywhere; } .adm-tlink:hover { text-decoration: underline; }
.adm-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .8rem; margin: 0; font-size: var(--fs-sm); }
.adm-meta dt { color: var(--muted); font-weight: 600; } .adm-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.adm-meta__arr { color: var(--accent-text); font-weight: 700; } .adm-meta__sub { margin-right: .4rem; } .adm-meta__txt { font-size: var(--fs-sm); color: var(--text-2); }
.adm-table .adm-meta { font-size: var(--fs-xs); }
@media (max-width: 760px) {
.audit-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.audit-row__when { display: flex; gap: .5rem; } .audit-row__ip { text-align: left; }
.audit-row__line { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
.adm-meta { grid-template-columns: minmax(0, 1fr); } .adm-meta dt { margin-top: .2rem; }
}
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.tpl-card { display: grid; gap: .55rem; padding: 1rem 1.1rem; transition: border-color .15s; align-content: start; }
.tpl-card:hover { border-color: var(--accent-border); } .tpl-card.is-off { opacity: .75; }
.tpl-card__top { display: flex; align-items: center; gap: .5rem; } .tpl-card__top .ic { color: var(--accent-text); }
.tpl-card p { margin: 0; }
.tpl-card__subj { display: grid; gap: .1rem; background: var(--surface-2); border-radius: 8px; padding: .45rem .6rem; font-size: var(--fs-sm); min-width: 0; }
.tpl-card__subj small { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .tpl-card__subj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-card__foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .tpl-card__foot .grow { flex: 1; }
.tpl-help { margin-top: 1rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .tpl-help code, .tpl-ed code { font-size: .78rem; }
.tpl-ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.tpl-ed__form { padding: 1.1rem; } .tpl-ed__form form { display: grid; gap: .9rem; } .tpl-ed__form .field { margin: 0; }
.tpl-ed__on { font-weight: 600; }
.tpl-ed__bar { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .35rem; } .tpl-ed__bar label { margin: 0; } .tpl-ed__bar .grow { flex: 1; }
.tpl-ed__code { font: 500 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 420px; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; overflow: auto; }
.tpl-ed__acts { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .tpl-ed__acts .grow { flex: 1; }
.chip--var { display: inline-flex; align-items: center; gap: .4rem; } .chip--var code { color: var(--accent-text); } .chip--var span { color: var(--muted); font-size: .72rem; }
.tpl-ed__prev { position: sticky; top: calc(var(--topbar-h) + 1rem); overflow: hidden; }
.tpl-ed__subj { padding: .6rem 1rem; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); overflow-wrap: anywhere; } .tpl-ed__subj small { color: var(--muted); }
.tpl-ed__frame { background: #070a0e; display: flex; justify-content: center; } .tpl-ed__frame iframe { width: 100%; height: 640px; border: 0; background: #070a0e; transition: width .2s; }
.tpl-ed__note { padding: .5rem 1rem; margin: 0; }
@media (max-width: 1100px) { .tpl-ed { grid-template-columns: minmax(0, 1fr); } .tpl-ed__prev { position: static; } .tpl-ed__code { min-height: 300px; } }
@media (max-width: 760px) { .adm-filter--audit > .input, .adm-filter--audit > .select, .adm-filter--audit .input-group { flex: 1 1 100%; max-width: none; } .adm-filter--audit > .btn { flex: 1 1 auto; justify-content: center; } }
.adm-usage--days { gap: 2px; } .adm-usage--days small { font-size: .55rem; } .adm-usage--days > .is-future i { background: var(--surface-3); }
@media (max-width: 560px) { .adm-usage--days small { display: none; } }
.adm-h3 { font: 700 .92rem/1.3 var(--font-display); margin: 1.1rem 0 .5rem; }
.adm-h3 small { font-weight: 500; font-family: var(--font-body, inherit); }
.adm-aff-link { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.adm-aff-link code { padding: .35rem .6rem; border-radius: 8px; background: var(--surface-2, rgba(255,255,255,.05)); word-break: break-all; font-size: .85rem; }
.ust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ust-grid .card { margin: 0; }
.ust { padding: .45rem 0; } .ust + .ust { border-top: 1px dashed var(--border); }
.ust__top { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); } .ust__top .ic { color: var(--accent-text); flex: none; }
.ust__top span { flex: 1; min-width: 0; color: var(--text-2); } .ust__top b { font-family: var(--font-display); } .ust__top small { width: 3.2em; text-align: right; color: var(--muted); font-weight: 700; }
.ust__bar { height: 6px; border-radius: 6px; background: var(--surface-3); margin-top: .35rem; overflow: hidden; } .ust__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #ff9a3c); }
.ust-cols { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: .4rem; }
.ust-li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 2.4em; align-items: center; gap: .5rem; font-size: var(--fs-xs); padding: .2rem 0; } .ust-li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-li__bar { height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; } .ust-li__bar i { display: block; height: 100%; background: var(--info); }
.ust-li b { text-align: right; }
.ust-yes { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(46, 199, 112, .15); color: var(--success); } .ust-no { color: var(--muted); }
.ust-dev { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-size: var(--fs-xs); } .ust-dev .ic { color: var(--text-3); }
.mq-kinds { margin: -.2rem 0 1rem; } .mq-kinds .chip { height: 34px; }
.mq-quick { padding: 1.1rem 1.2rem; margin-bottom: 1rem; border: 1px solid var(--accent-border); background: linear-gradient(170deg, var(--accent-softer), var(--surface) 40%); }
.mq-quick__bar { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem; } .mq-quick__bar b { font: 700 1rem var(--font-display); }
.mq-keys { margin-left: auto; } .mq-keys kbd { display: inline-block; padding: 0 .35em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; font: 700 .7rem var(--font-body); background: var(--surface-2); }
.mq-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-bottom: .7rem; border-bottom: 1px solid var(--border); }
.mq-kind { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: var(--fs-sm); } .mq-kind .ic { color: var(--accent-text); }
.mq-open { margin-left: auto; }
.mq-quick__body { padding: .9rem 0; display: grid; gap: .7rem; }
.mq-quick__actions { display: flex; gap: .6rem; flex-wrap: wrap; padding-top: .8rem; border-top: 1px solid var(--border); }
.mq-quick__actions .btn:last-child { margin-left: auto; }
.mq-quick--done { display: flex; align-items: center; gap: 1rem; border-style: dashed; background: var(--surface); } .mq-quick--done > .ic { color: var(--success); }
.mq-tip { display: grid; gap: .45rem; } .mq-tip__head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .mq-tip__head b { font: 700 1.05rem var(--font-display); }
.mq-tip__row { display: flex; gap: .4rem 1rem; flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); color: var(--text-2); } .mq-tip__row b { color: var(--text); }
.mq-box { padding: .7rem .85rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); }
.mq-quote { margin: .4rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-sm); max-height: 220px; overflow: auto; }
.mq-txt { max-width: 360px; } .ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .mq-keys { display: none; } .mq-quick__actions .btn { flex: 1 1 auto; justify-content: center; } .mq-quick__actions .btn:last-child { margin-left: 0; } }
.ntf-read { display: inline-flex; gap: .4rem; align-items: flex-start; } .ntf-read > .ic { color: var(--success); margin-top: .1rem; }
.ntf-unread { display: inline-flex; gap: .35rem; align-items: center; color: var(--warn); font-weight: 600; font-size: var(--fs-sm); }
.bmo-users { display: flex; align-items: center; gap: .15rem; } .bmo-users a { display: inline-flex; } .bmo-users small { margin-left: .3rem; }
.mlinks { display: grid; gap: .5rem; }
.mlink { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto; gap: .4rem .9rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; }
.mlink--strong { border-left-color: var(--danger); } .mlink--medium { border-left-color: var(--warn); } .mlink.is-dismissed { opacity: .6; }
.mlink__why { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; } .mlink__why small { color: var(--text-2); }
.mlink__act { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; }
.mlink__pair { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
@media (max-width: 700px) { .mlink { grid-template-columns: 1fr; } .mlink__act { justify-content: flex-start; } }
.adm-checklist { list-style: none; padding: 0; margin: .7rem 0; display: grid; gap: .3rem; font-size: var(--fs-sm); } .adm-checklist li { display: flex; gap: .4rem; align-items: center; } .adm-checklist code { font-size: .8em; }
.acc-preview:empty { display: none; } .acc-preview { margin-top: 1rem; }
.sms-tpl .field { margin-bottom: .7rem; }
.sms-prev { display: grid; gap: .35rem; margin: .2rem 0 .8rem; }
.sms-bubble { max-width: 420px; padding: .7rem .9rem; border-radius: 16px 16px 16px 4px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.sms-count { font-size: var(--fs-xs); color: var(--muted); } .sms-count.is-multi { color: var(--warn); }
.chip--xs { font-size: .72rem; padding: .1rem .45rem; height: auto; cursor: pointer; font-family: var(--font-mono, monospace); }
.pop-ed .adm-h3 { margin: 1.3rem 0 .6rem; }
.pq-row, .pr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.pr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; }
.ps-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-areas: 't ti b' 'x x x'; gap: .45rem; padding: .6rem; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: .5rem; background: var(--surface-2); }
.ps-row [data-ps-target] { grid-area: t; } .ps-row [data-ps-title] { grid-area: ti; } .ps-row__btns { grid-area: b; display: flex; } .ps-row textarea { grid-area: x; }
@media (max-width: 700px) { .pq-row, .pr-row { grid-template-columns: 1fr auto; } .ps-row { grid-template-columns: 1fr auto; grid-template-areas: 't b' 'ti ti' 'x x'; } }
.chip-check { padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 999px; }
.pop-res { display: grid; gap: 1rem; } .pop-res__q { display: grid; gap: .4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .pop-res__q:last-child { border: 0; padding: 0; }
.pop-res__avg { display: flex; align-items: baseline; gap: .5rem; } .pop-res__avg span { font: 800 1.6rem/1 var(--font-display); color: var(--accent-text); }
.pop-res__dist { display: grid; grid-template-columns: repeat(5, 46px); gap: .4rem; height: 90px; align-items: end; }
.pop-res__dist div { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center; position: relative; } .pop-res__dist i { width: 100%; align-self: end; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; }
.pop-res__dist small { color: var(--muted); font-size: var(--fs-xs); } .pop-res__dist em { position: absolute; top: -2px; font-style: normal; font-size: .7rem; color: var(--text-2); }
.pop-res__c summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-text); } .pop-res__c ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: var(--fs-sm); }
.mq-tabs { margin-bottom: 1rem; } .mq-tabs .count { margin-left: .35rem; }
.mq-kinds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.mq-kind-tile { display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); }
.mq-kind-tile span { flex: 1; min-width: 0; } .mq-kind-tile b { font: 800 1rem/1 var(--font-display); color: var(--muted); }
.mq-kind-tile.has-open { border-color: var(--warn); color: var(--text); } .mq-kind-tile.has-open b { color: var(--warn); } .mq-kind-tile:hover { border-color: var(--border-strong); }
.ubr { padding: 1rem; display: grid; gap: .7rem; } .ubr--notes { padding: 0; }
.ubr__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ubr__chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ubr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .4rem; }
.ubr-stat { display: grid; padding: .45rem .55rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); text-decoration: none; }
.ubr-stat b { font: 800 1.05rem/1.1 var(--font-display); color: var(--muted); } .ubr-stat small { font-size: .68rem; line-height: 1.2; } .ubr-stat.has b { color: var(--warn); }
.ubr__sanct { display: grid; gap: .3rem; }
.ubr__h { display: flex; align-items: center; gap: .35rem; margin: .3rem 0 0; font: 700 var(--fs-sm)/1.2 var(--font-display); }
.ubr-notes { display: grid; gap: .45rem; max-height: 340px; overflow-y: auto; }
.ubr-note { padding: .55rem .7rem; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--border-strong); font-size: var(--fs-sm); }
.ubr-note.is-pinned { border-left-color: var(--warn); background: var(--warn-soft); }
.ubr-note__head { display: flex; align-items: center; gap: .35rem; } .ubr-note__head .grow { flex: 1; } .ubr-note p { margin: .25rem 0 0; overflow-wrap: anywhere; }
.ubr-form { display: grid; gap: .4rem; margin-top: .5rem; } .ubr-form__row { display: flex; align-items: center; gap: .5rem; } .ubr-form__row .grow { flex: 1; }
.ubr__acts { display: inline-flex; gap: .25rem; align-items: center; }
.uns-hint { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.uns-day { margin-bottom: 1rem; }
.uns-btns { display: inline-flex; gap: .25rem; }
.uns-btn { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); transition: .12s; }
.uns-btn:hover { transform: translateY(-1px); }
.uns-btn--won:hover { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.uns-btn--lost:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.uns-btn--void:hover { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.uns-btn:disabled { opacity: .45; pointer-events: none; }
.uns-score { font-family: var(--font-display); }
.uns-legs { display: grid; gap: .3rem; margin-top: .5rem; }
.uns-leg { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .4rem .55rem; border-radius: 9px; background: var(--surface-2); border-left: 3px solid var(--border-strong); font-size: var(--fs-sm); }
.uns-leg--won { border-left-color: var(--success); } .uns-leg--lost { border-left-color: var(--danger); } .uns-leg--void { border-left-color: var(--info); }
.uns-leg__m { flex: 1 1 260px; min-width: 0; } .uns-leg__i { flex: none; }

/* --- css/pages/staff.css --- */
.tb-staff { height: 40px; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .8rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font: 700 var(--fs-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tb-staff:hover { color: var(--text); border-color: var(--border-strong); }
.tb-staff.is-on { color: var(--success); border-color: rgba(46, 199, 112, .45); background: var(--success-soft); }
.tb-staff.is-break { color: var(--warn); border-color: rgba(245, 165, 36, .45); background: var(--warn-soft); }
.tb-staff[hidden] { display: none; }
.tb-staff__t--off { font-weight: 600; }
.tb-staff__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(46, 199, 112, .6); animation: staffPulse 2s infinite; flex: none; display: inline-block; }
@keyframes staffPulse { 0% { box-shadow: 0 0 0 0 rgba(46, 199, 112, .55); } 70% { box-shadow: 0 0 0 7px rgba(46, 199, 112, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 199, 112, 0); } }
@media (max-width: 760px) { .tb-staff { padding: 0 .6rem; } .tb-staff__t--off { display: none; } }
.team-page { padding-top: 1.5rem; padding-bottom: 2rem; }
.team-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.team-main, .team-side { display: grid; gap: 1rem; min-width: 0; }
.team-clock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; padding: 1.4rem 1.5rem; position: relative; overflow: hidden; }
.team-clock--on { border-color: rgba(46, 199, 112, .45); background: radial-gradient(120% 140% at 0% 0%, var(--success-soft), transparent 60%), var(--surface); }
.team-clock--break { border-color: rgba(245, 165, 36, .45); background: radial-gradient(120% 140% at 0% 0%, var(--warn-soft), transparent 60%), var(--surface); }
.team-clock__state { display: grid; gap: .4rem; justify-items: start; } .team-clock__state .pill { display: inline-flex; align-items: center; gap: .4rem; } .team-clock__state small { color: var(--muted); font-size: var(--fs-sm); }
.team-clock__time { grid-row: span 2; display: grid; justify-items: end; } .team-clock__time b { font: 800 3rem/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .team-clock__time span { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.team-clock__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.team-clock__afk { grid-column: 1 / -1; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; padding-top: .9rem; border-top: 1px dashed var(--border); color: var(--text-2); font-size: var(--fs-sm); margin: 0; }
.team-clock__afk .link { background: none; border: 0; padding: 0; color: var(--accent-text); text-decoration: underline; cursor: pointer; font: inherit; }
.team-sched { padding: 0; overflow: hidden; }
.team-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; padding: .6rem 1.1rem; border-bottom: 1px solid var(--border); align-items: start; }
.team-day:last-child { border-bottom: 0; }
.team-day.is-today { background: var(--accent-softer); box-shadow: inset 3px 0 0 var(--accent); }
.team-day.is-past { opacity: .6; }
.team-day__d { display: grid; line-height: 1.2; } .team-day__d b { font: 700 var(--fs-sm) var(--font-display); } .team-day__d small { color: var(--muted); font-size: var(--fs-xs); }
.team-day__items { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.team-week-sep { padding: .45rem 1.1rem; background: var(--surface-2); font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--border); }
.team-month { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.team-month > div { display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: var(--r-md); background: var(--surface-2); }
.team-month b { font: 800 1.05rem var(--font-display); } .team-month small { color: var(--muted); font-size: var(--fs-xs); }
.warn-t { color: var(--warn); }
@media (max-width: 1000px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .team-clock { grid-template-columns: 1fr; padding: 1.1rem; } .team-clock__time { grid-row: auto; justify-items: start; } .team-clock__time b { font-size: 2.4rem; } .team-clock__btns .btn { flex: 1 1 auto; } .team-day { grid-template-columns: 48px minmax(0, 1fr); padding: .6rem .8rem; } }
.afk { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.afk p { color: var(--text-2); font-size: var(--fs-sm); max-width: 34ch; }
.afk__ring { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.afk__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.afk__bg { fill: none; stroke: var(--surface-3); stroke-width: 3.5; }
.afk__fg { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear; }
.afk__ring b { font: 800 1.6rem var(--font-display); font-variant-numeric: tabular-nums; }
.tl-days, .tl-team { display: grid; }
.tl-day { display: grid; grid-template-columns: 150px minmax(0, 1fr) 112px; gap: .8rem; align-items: center; padding: .45rem 1rem; border-bottom: 1px solid var(--border); min-width: 0; }
.tl-day:last-child { border-bottom: 0; }
.tl-day--axis { padding-top: .5rem; padding-bottom: .1rem; border-bottom: 0; }
.tl-day.is-today { background: var(--accent-softer); box-shadow: inset 3px 0 0 var(--accent); }
.tl-day.is-we .tl-day__d b { color: var(--accent-text); }
.tl-day.is-future { opacity: .55; }
.tl-day.is-leave .tl-track { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted) 14%, transparent) 6px 12px); }
a.tl-day--emp:hover { background: var(--surface-hover); }
.tl-day__d { display: grid; min-width: 0; line-height: 1.25; } .tl-day__d b { font: 700 var(--fs-sm) var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.tl-day__d small { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.tl-day__d .emp-dot { margin-right: .4rem; flex: none; }
.tl-day__sum { display: grid; justify-items: end; line-height: 1.25; font-variant-numeric: tabular-nums; } .tl-day__sum b { font: 700 var(--fs-sm) var(--font-display); } .tl-day__sum small { color: var(--muted); font-size: var(--fs-2xs); white-space: nowrap; } .tl-day__sum i { font-style: normal; font-weight: 700; }
.tl-axis { position: relative; height: 16px; }
.tl-axis span { position: absolute; transform: translateX(-50%); font-size: .64rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-axis span:first-child { transform: none; } .tl-axis span:last-child { transform: translateX(-100%); }
.tl-track { position: relative; height: 26px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.tl-track--sm { height: 16px; border-radius: 5px; }
.tl-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--border) 70%, transparent); }
.tl-plan { position: absolute; top: 0; height: 5px; border-radius: 0 0 3px 3px; background: var(--kc, var(--accent)); opacity: .9; }
.tl-plan--task { --kc: var(--info); } .tl-plan--meeting { --kc: #a26bfa; } .tl-plan--on_call { --kc: var(--warn); }
.tl-plan--leave { top: 0; bottom: 0; height: auto; border-radius: 0; opacity: .25; background: var(--muted); }
.tl-blk { position: absolute; top: 7px; bottom: 3px; border-radius: 4px; background: var(--success); cursor: default; }
.tl-track--sm .tl-blk { top: 5px; bottom: 2px; border-radius: 3px; }
.tl-blk--break { background: var(--warn); top: 10px; bottom: 6px; z-index: 1; opacity: .95; } .tl-track--sm .tl-blk--break { top: 7px; bottom: 4px; }
.tl-blk.is-open { background-image: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, .35)); animation: tlPulse 2s infinite; }
.tl-blk.is-afk { box-shadow: inset -3px 0 0 var(--danger); }
.tl-blk[data-ts-edit] { cursor: pointer; } .tl-blk[data-ts-edit]:hover { filter: brightness(1.15); }
@keyframes tlPulse { 50% { opacity: .75; } }
.tl-afk { position: absolute; bottom: 1px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; border: 1.5px solid var(--surface); z-index: 2; background: var(--success); }
.tl-afk--missed { background: var(--danger); } .tl-afk--pending { background: var(--warn); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger); z-index: 3; }
.tl-week { display: flex; gap: .6rem; align-items: baseline; justify-content: flex-end; padding: .4rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); }
.tl-week span { margin-right: auto; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .tl-week b { font: 700 var(--fs-sm) var(--font-display); } .tl-week small { color: var(--muted); }
.tl-days--compact .tl-day { padding-top: .25rem; padding-bottom: .25rem; }
.tl-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .7rem 1rem; font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--border); }
.adm-pad > .tl-legend { border-top: 0; padding: 0; }
.tl-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tl-lg { width: 14px; height: 8px; border-radius: 2px; display: inline-block; } .tl-lg--work { background: var(--success); } .tl-lg--break { background: var(--warn); } .tl-lg--plan { background: var(--accent); height: 4px; }
.tl-lg--afk-ok, .tl-lg--afk-miss { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .tl-lg--afk-miss { background: var(--danger); }
.ts-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.ts-stats > div { display: grid; gap: .15rem; padding: .7rem .85rem; border-radius: var(--r-md); background: var(--surface-2); }
.ts-stats span { color: var(--muted); font-size: var(--fs-xs); } .ts-stats b { font: 800 1.15rem var(--font-display); font-variant-numeric: tabular-nums; } .ts-stats b small { font-size: .75rem; color: var(--muted); font-weight: 600; }
.ts-entries { border-top: 1px solid var(--border); } .ts-entries > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 650; display: flex; gap: .4rem; align-items: center; list-style: none; } .ts-entries > summary::-webkit-details-marker { display: none; }
.ts-entries > summary::after { content: "›"; margin-left: auto; transform: rotate(90deg); transition: transform .15s; color: var(--muted); } .ts-entries:not([open]) > summary::after { transform: none; }
@media (max-width: 760px) {
.tl-day { grid-template-columns: 92px minmax(0, 1fr) 62px; gap: .5rem; padding: .4rem .7rem; }
.tl-day__sum small { display: none; } .tl-axis span { font-size: .58rem; }
.tl-week { padding: .35rem .7rem; }
}
.emp-filter { flex-wrap: wrap; gap: .6rem; } .emp-filter h2 small { font-size: var(--fs-sm); margin-left: .3rem; }
.emp-filter .input-group { flex: 1 1 220px; max-width: 340px; margin-left: auto; } .emp-filter .input-group .input { width: 100%; }
.emp-list { display: grid; }
.emp-row { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(160px, 1fr) minmax(170px, 1fr) minmax(220px, 1.3fr) 128px; gap: 1rem; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); position: relative; }
.emp-row::before { content: ""; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--ec, var(--accent)); }
.emp-row--head { padding-top: .55rem; padding-bottom: .55rem; font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
.emp-row--head::before { display: none; }
.emp-row:last-child { border-bottom: 0; } .emp-row[hidden] { display: none; }
.emp-row.is-off { opacity: .6; } .emp-row.is-working { background: linear-gradient(90deg, var(--success-soft), transparent 35%); }
.emp-row__who { display: flex; gap: .7rem; align-items: center; min-width: 0; } .emp-row__who > div { display: grid; min-width: 0; line-height: 1.3; }
.emp-row__who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emp-row__who small { color: var(--text-2); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emp-row__who small.muted { color: var(--muted); }
.emp-av--img { background: none; border: 0; width: auto; height: auto; } .emp-av--img .avatar { box-shadow: 0 0 0 2px var(--ec, var(--accent)); }
.emp-row__st { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-width: 0; } .emp-row__st .pill { display: inline-flex; align-items: center; gap: .35rem; }
.emp-next { display: flex; align-items: flex-start; gap: .3rem; width: 100%; font-size: var(--fs-2xs); line-height: 1.35; } .emp-next .ic { margin-top: .1rem; flex: none; }
.emp-row__time { display: grid; gap: .2rem; font-variant-numeric: tabular-nums; min-width: 0; }
.emp-row__time > div { display: flex; align-items: baseline; gap: .35rem; font-size: var(--fs-sm); } .emp-row__time > div span { color: var(--muted); font-size: var(--fs-xs); width: 58px; } .emp-row__time > div small { color: var(--muted); font-size: var(--fs-xs); }
.emp-row__time > small { font-size: var(--fs-2xs); display: flex; gap: .25rem; align-items: center; }
.emp-bar { display: block; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-bottom: .2rem; } .emp-bar i { display: block; height: 100%; background: var(--success); border-radius: 2px; } .emp-bar i.is-over { background: var(--warn); }
.emp-acc { display: grid; gap: .3rem; min-width: 0; } .emp-acc small { font-size: var(--fs-2xs); overflow-wrap: anywhere; }
.emp-acc--none { display: flex; gap: .45rem; align-items: center; color: var(--warn); font-size: var(--fs-sm); } .emp-acc--none small { font-size: var(--fs-2xs); }
.emp-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.emp-badge { display: inline-flex; align-items: center; gap: .2rem; font-size: .66rem; font-weight: 700; padding: .1rem .4rem; border-radius: 5px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.emp-badge.is-ok { background: var(--success-soft); color: var(--success); } .emp-badge.is-bad { background: var(--warn-soft); color: var(--warn); }
.emp-row__acts { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; } .emp-row__acts .btn { justify-content: flex-start; }
.emp-none { padding: 1rem; }
@media (max-width: 1180px) {
.emp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "who st" "time acc" "acts acts"; }
.emp-row--head { display: none; }
.emp-row__who { grid-area: who; } .emp-row__st { grid-area: st; } .emp-row__time { grid-area: time; } .emp-row__acc { grid-area: acc; }
.emp-row__acts { grid-area: acts; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
.emp-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "st" "time" "acc" "acts"; gap: .6rem; padding: .85rem .9rem; }
.emp-filter .input-group { max-width: none; margin-left: 0; }
}
.acc-field__in { position: relative; } .acc-field .input-group .input { width: 100%; }
.acc-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg, var(--shadow)); padding: .3rem; max-height: 320px; overflow: auto; }
.acc-sug__it { display: flex; gap: .6rem; align-items: center; width: 100%; padding: .45rem .55rem; border-radius: 8px; text-align: left; color: var(--text); }
.acc-sug__it:hover, .acc-sug__it.is-hl { background: var(--surface-hover); }
.acc-sug__it > span:nth-child(2) { display: grid; min-width: 0; flex: 1; } .acc-sug__it b { font-weight: 650; } .acc-sug__it small { color: var(--muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-sug__it.is-taken { opacity: .55; cursor: not-allowed; }
.acc-sug__b { display: grid; justify-items: end; gap: .15rem; } .acc-sug__b small { font-size: .66rem; }
.acc-sug__none { padding: .7rem; color: var(--muted); font-size: var(--fs-sm); }
.acc-picked:empty { display: none; } .acc-picked { margin-top: .45rem; }
.acc-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .3rem .25rem .35rem; border-radius: 999px; background: var(--accent-softer); border: 1px solid var(--accent-border); font-size: var(--fs-sm); }
.acc-chip .icon-btn { width: 22px; height: 22px; }
.sch--month { min-width: 1500px; }
.sch--month thead th:first-child { width: 190px; }
.sch--month thead th { text-align: center; padding: .4rem .1rem; } .sch--month thead th span { display: block; font-size: .6rem; } .sch--month thead th b { font-size: var(--fs-sm); color: var(--text); }
.sch--month .sch-cell { height: 54px; padding: .2rem; } .sch--month .sch-item { padding: .2rem .25rem; border-left-width: 2px; } .sch--month .sch-item b { font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch--month .sch-actual { font-size: .6rem; }
.sch th.is-we:not(.is-today), .sch td.is-we:not(.is-today) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.sch .sch-emp { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.sch thead th:first-child { position: sticky; left: 0; z-index: 2; }
.sch-hint { margin-top: .6rem; display: flex; gap: .35rem; align-items: center; }
.sch-days { display: grid; gap: .35rem; } .sch-days-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.sch-days-head { display: flex; align-items: center; gap: .3rem; margin-bottom: .35rem; } .sch-days-head label { margin: 0; } .sch-days-head .grow { flex: 1; }
.chip-check.is-we span { color: var(--accent-text); }
.team-view { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.team-view .grow { flex: 1; }
.team-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.team-month-grid > div { background: var(--surface); min-height: 86px; padding: .35rem; display: grid; align-content: start; gap: .25rem; min-width: 0; }
.team-month-grid .tmg-dow { min-height: 0; padding: .4rem; font: 700 var(--fs-2xs) var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
.team-month-grid .tmg-day b { font: 700 var(--fs-xs) var(--font-display); color: var(--text-2); }
.team-month-grid .tmg-day.is-today { background: var(--accent-softer); } .team-month-grid .tmg-day.is-today b { color: var(--accent-text); }
.team-month-grid .tmg-day.is-out { background: var(--surface-2); } .team-month-grid .tmg-day.is-out b { opacity: .45; }
.team-month-grid .sch-item { padding: .2rem .3rem; font-size: .66rem; } .team-month-grid .sch-item span { display: none; }
.team-report .tl-days { border-top: 1px solid var(--border); }
@media (max-width: 640px) { .team-month-grid > div { min-height: 60px; padding: .2rem; } .team-month-grid .sch-item b { font-size: .58rem; } }
.hm-s { display: none; }
@media (max-width: 760px) { .tl-day__sum .hm-l { display: none; } .tl-day__sum .hm-s { display: inline; } }

/* --- css/pages/sources.css --- */
.page-head__act { display: flex; gap: .5rem; align-items: center; flex: none; }
.src-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.1rem; }
.src-bar .chips { flex: 1 1 100%; }
.chips--scroll { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll .chip { flex: none; display: inline-flex; align-items: center; gap: .3rem; } .chip small { opacity: .7; font-weight: 600; }
.src-search { position: relative; flex: 1 1 260px; } .src-search .ic-wrap { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; } .src-search .input { padding-left: 2.3rem; height: 40px; }
.src-bar .select--sm { width: auto; flex: 0 1 200px; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .9rem; }
.src-card { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; border-left: 3px solid var(--border-strong); }
.src-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.src-card--verified_positive { border-left-color: var(--success); } .src-card--verified_negative { border-left-color: var(--danger); } .src-card--verifying { border-left-color: var(--warn); } .src-card--reviewing, .src-card--checking { border-left-color: var(--info); }
.src-card__top { display: flex; gap: .7rem; align-items: flex-start; }
.src-card__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.src-card__ic--lg { width: 56px; height: 56px; border-radius: 16px; } .src-card__ic--lg .ic { width: 26px; height: 26px; }
.src-card__name { min-width: 0; flex: 1; display: grid; gap: .1rem; } .src-card__name b { font: 700 1rem/1.25 var(--font-display); overflow-wrap: anywhere; } .src-card__name small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.src-card__sum { margin: 0; font-size: var(--fs-sm); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.src-card__foot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; } .src-card__foot .grow { flex: 1; }
.src-pill { display: inline-flex; align-items: center; gap: .3rem; }
.src-stars { display: inline-flex; gap: 2px; } .src-star { width: 12px; height: 12px; background: var(--border-strong); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .src-star.is-on { background: #f5b301; }
.src-note { display: flex; gap: .4rem; align-items: flex-start; margin-top: 1.2rem; }
.src-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.1rem; align-items: start; }
@media (max-width: 980px) { .src-detail { grid-template-columns: 1fr; } }
.src-main, .src-side { display: grid; gap: 1rem; min-width: 0; }
.src-head { padding: 1.3rem 1.3rem 1.1rem; display: grid; gap: .9rem; }
.src-head__top { display: flex; gap: .9rem; align-items: center; } .src-head__top .page-title { margin: 0; overflow-wrap: anywhere; } .src-head__top p { margin: .15rem 0 0; }
.src-head__meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .src-head__meta .grow { flex: 1; }
.src-head__sum { margin: 0; color: var(--text-2); }
.src-link { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-sm); color: var(--accent-text); text-decoration: none; } .src-link:hover { text-decoration: underline; }
.src-steps { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; counter-reset: s; }
.src-steps li { position: relative; display: grid; justify-items: center; gap: .3rem; text-align: center; color: var(--muted); font-size: var(--fs-xs); }
.src-steps li span { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-strong); }
.src-steps li::before { content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--border-strong); } .src-steps li:first-child::before { display: none; }
.src-steps li.is-done { color: var(--text-2); } .src-steps li.is-done span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); } .src-steps li.is-done::before, .src-steps li.is-cur::before { background: var(--accent); }
.src-steps li.is-cur { color: var(--text); font-weight: 700; } .src-steps li.is-cur span { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.src-steps li.is-cur.is-verified_positive span { background: var(--success); border-color: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.src-steps li.is-cur.is-verified_negative span { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
@media (max-width: 520px) { .src-steps small { font-size: .62rem; } .src-steps li span { width: 28px; height: 28px; } .src-steps li::before { top: 14px; } }
.src-verdict { padding: 1.2rem 1.3rem; border-left: 4px solid var(--info); } .src-verdict h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font: 700 1.05rem/1.3 var(--font-display); margin: 0 0 .6rem; }
.src-verdict--verified_positive { border-left-color: var(--success); background: linear-gradient(90deg, var(--success-soft), transparent 60%), var(--surface); } .src-verdict--verified_positive h2 .ic { color: var(--success); }
.src-verdict--verified_negative { border-left-color: var(--danger); background: linear-gradient(90deg, var(--danger-soft), transparent 60%), var(--surface); } .src-verdict--verified_negative h2 .ic { color: var(--danger); }
.src-tl { padding: 1.1rem 1.2rem; } .src-tl__title { font: 700 1.05rem/1.3 var(--font-display); margin: 0 0 .8rem; }
.src-evs { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.src-ev { position: relative; padding: .7rem 0 .7rem 1.1rem; border-left: 2px solid var(--border); }
.src-ev::before { content: ''; position: absolute; left: -6px; top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.src-ev--status::before { background: var(--accent); border-color: var(--accent); } .src-ev.is-internal { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--warn-soft) 8px 9px); border-radius: 0 10px 10px 0; padding-right: .6rem; }
.src-ev__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-sm); } .src-ev__head .grow { flex: 1; }
.src-ev__what { color: var(--text-2); } .src-ev__body { margin-top: .35rem; font-size: var(--fs-sm); line-height: 1.55; overflow-wrap: anywhere; }
.src-team { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--accent-text); }
.src-cform { margin-top: 1rem; display: grid; gap: .5rem; } .src-cform__row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .src-cform__row .grow { flex: 1; }
.src-staff .form { display: grid; gap: .6rem; } .src-staff__btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.danger-text { color: var(--danger) !important; }
.src-how { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: var(--fs-sm); color: var(--text-2); }
.src-team--user { color: var(--text-2); font-weight: 600; }
.container > .back-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); } .container > .back-link:hover { color: var(--text); }

/* --- css/components/popups.css --- */
.pop { display: grid; gap: 1rem; }
.pop__body { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); } .pop__body p { margin: 0 0 .6rem; } .pop__body p:last-child { margin: 0; } .pop__body strong { color: var(--text); }
.pop-survey { display: grid; gap: 1rem; padding: 1rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.pop-q { display: grid; gap: .5rem; } .pop-q__label { font-weight: 700; font-size: var(--fs-sm); }
.pop-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.pop-scale__b { display: grid; justify-items: center; gap: .15rem; padding: .5rem .2rem; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer; transition: .12s; }
.pop-scale__b b { font: 800 1.1rem/1 var(--font-display); } .pop-scale__b small { font-size: .62rem; line-height: 1.15; text-align: center; color: var(--muted); }
.pop-scale__b:hover { border-color: var(--accent); color: var(--text); }
.pop-scale__b.is-on { background: var(--accent); border-color: var(--accent); color: #fff; } .pop-scale__b.is-on small { color: rgba(255, 255, 255, .85); }
.pop-q__more summary { cursor: pointer; font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; list-style: none; } .pop-q__more summary::-webkit-details-marker { display: none; }
.pop-q__more[open] summary { margin-bottom: .4rem; }
.pop-terms { padding: .8rem .9rem; border-radius: var(--r-md); border: 1px solid var(--accent-border); background: var(--accent-soft); }
.pop-terms a { color: var(--accent-text); text-decoration: underline; font-weight: 600; }
@media (max-width: 520px) { .pop-scale__b small { display: none; } .pop-scale__b { padding: .6rem .2rem; } }
.tour { position: fixed; inset: 0; z-index: 2200; }
.tour__shade { position: absolute; inset: 0; background: rgba(4, 7, 11, .62); }
.tour__shade.is-cut { background: transparent; }
.tour__ring { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(4, 7, 11, .62), 0 0 0 3px var(--accent), 0 0 24px 6px rgba(250, 83, 0, .45); transition: top .25s, left .25s, width .25s, height .25s; pointer-events: none; }
.tour__card { position: fixed; width: min(360px, calc(100vw - 20px)); padding: 1.1rem 1.15rem 1rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: pop .18s var(--ease); outline: none; }
.tour__card.is-center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 24px)); }
.tour__card h3 { font: 800 1.1rem/1.25 var(--font-display); margin: .5rem 0 .4rem; } .tour__card p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.tour__dots { display: flex; gap: 4px; } .tour__dots i { width: 18px; height: 4px; border-radius: 4px; background: var(--border-strong); } .tour__dots i.is-done { background: var(--accent-soft); } .tour__dots i.is-on { background: var(--accent); width: 28px; }
.tour__btns { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; } .tour__btns .grow { flex: 1; }
.tour__rules { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.tour__rules li { display: flex; gap: .7rem; align-items: flex-start; } .tour__rules li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: #fff; font: 800 .95rem/1 var(--font-display); }
.tour__rules b { display: block; font-size: var(--fs-sm); margin-bottom: .1rem; }
html.has-tour body { overflow: hidden; }