/* * Дизайн «Графит» — по мотивам SL UI Library (github.com/SLtowl/sl-ui-library, MIT): * матовые графитовые карточки, Instrument Sans, мягкий подъём кнопок. * Включается data-design="graphite" на (переключатель в сайдбаре или ?design=graphite). * Все правила ограничены этим атрибутом — остальные дизайны не затрагиваются. * * Карточки тёмные в обеих темах, поэтому «внутренние» токены (--ink, --muted, --line, …) * переопределяются на .module и формах входа, а корневые описывают страницу вокруг. */ @font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } html[data-design="graphite"] { font-size: 106.25%; color-scheme: light; --g-ease: cubic-bezier(0.2, 0, 0, 1); --g-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1); --font-display: "Instrument Sans", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --radius: 18px; --gap: 0.9rem; /* страница */ --bg: #f5f4f2; --bg-main: #f5f4f2; --sidebar: #efeeeb; --ink: #1d1d1d; --muted: #6f6f6f; --line: rgba(120, 120, 120, 0.22); --page-edge: rgba(0, 0, 0, 0.08); --nav-hover: rgba(0, 0, 0, 0.045); --sage: #3a3a3a; --sage-deep: #222222; --online: #3f8f5a; --offline: #b04a4a; /* графитовые поверхности */ --g-card: #222222; --g-card-hover: #2e2e2e; --g-raised: #292929; --g-recess: #1a1a1a; --g-edge: rgba(255, 255, 255, 0.08); --g-edge-strong: rgba(255, 255, 255, 0.16); --g-text: #f6f6f6; --g-muted: #a9a9a9; --g-accent: #e0e0e0; --g-card-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 36px -20px rgba(0, 0, 0, 0.45); --g-card-fill: linear-gradient(155deg, rgba(255, 255, 255, 0.035), transparent 68%); --toast-bg: #222222; --toast-ink: #f6f6f6; --flash-bg: #222222; --flash-ink: #f6f6f6; --flash-line: rgba(255, 255, 255, 0.08); } html[data-design="graphite"][data-theme="dark"] { color-scheme: dark; --bg: #020303; --bg-main: #020303; --sidebar: #060707; --ink: #f3f5f6; --muted: #929a9f; --line: rgba(231, 239, 244, 0.1); --page-edge: rgba(231, 239, 244, 0.09); --nav-hover: rgba(255, 255, 255, 0.04); --g-card: #101214; --g-card-hover: #191c1e; --g-raised: #191d1f; --g-recess: #08090a; --g-edge: rgba(231, 239, 244, 0.12); --g-edge-strong: rgba(231, 239, 244, 0.2); --g-text: #f3f5f6; --g-muted: #929a9f; --g-card-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 18px 40px -18px rgba(0, 0, 0, 0.75); --g-card-fill: linear-gradient(145deg, rgba(25, 29, 31, 0.82), transparent 72%); --toast-bg: #191d1f; --flash-bg: #191d1f; } /* Внутренние токены графитовых поверхностей */ html[data-design="graphite"] .module, html[data-design="graphite"] .login-form, html[data-design="graphite"] .scripts-panel, html[data-design="graphite"] .page-toast, html[data-design="graphite"] .taxi-toast { color-scheme: dark; --ink: var(--g-text); --muted: var(--g-muted); --line: rgba(255, 255, 255, 0.085); --module-line: var(--g-edge); --card: var(--g-card); --surface: var(--g-recess); --surface-soft: var(--g-recess); --surface-muted: var(--g-raised); --surface-tint: rgba(255, 255, 255, 0.03); --row-bg: rgba(255, 255, 255, 0.025); --sage: var(--g-accent); --sage-deep: var(--g-accent); --online: #8fd19e; --offline: #efb8a6; --warn: #e8d4a5; --disabled-bg: #333333; --disabled-ink: #8a8a8a; --accent: var(--g-accent); --accent-tint: rgba(255, 255, 255, 0.05); --chart-accent: #ededed; --chart-fill: rgba(255, 255, 255, 0.06); --chart-steam: #8c9296; --chart-rub: #b9c9bd; color: var(--ink); } /* ---------- База ---------- */ html[data-design="graphite"] body { font-size: 0.9375rem; line-height: 1.5; font-synthesis: none; letter-spacing: -0.005em; } html[data-design="graphite"] h1, html[data-design="graphite"] h2, html[data-design="graphite"] .brand, html[data-design="graphite"] .page-title { font-weight: 650; letter-spacing: -0.035em; } html[data-design="graphite"] ::selection { background: rgba(120, 120, 120, 0.3); } html[data-design="graphite"] :focus-visible { outline: 2px solid #737373; outline-offset: 3px; } /* ---------- Кнопки ---------- */ /* :not(...) — и для исключений, и чтобы перебить специфичность правил из app.css */ html[data-design="graphite"] button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear), html[data-design="graphite"] .button { position: relative; padding: 0.58rem 1rem; border: 1px solid transparent; border-radius: 12px; background: #ececec linear-gradient(155deg, rgba(255, 255, 255, 0.6), transparent 68%); color: #1a1a1a; font-size: 0.875rem; font-weight: 550; letter-spacing: -0.02em; box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.12); transition: transform 350ms var(--g-ease-out), background-color 200ms var(--g-ease), box-shadow 300ms var(--g-ease), color 200ms var(--g-ease), opacity 200ms var(--g-ease); } html[data-design="graphite"] button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled):not(.is-disabled), html[data-design="graphite"] .button:hover { background-color: #ffffff; color: #111111; box-shadow: inset 0 1px #ffffff, 0 8px 16px -10px rgba(0, 0, 0, 0.55); transform: translateY(-2px); opacity: 1; } html[data-design="graphite"] button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):active:not(:disabled):not(.is-disabled), html[data-design="graphite"] .button:active { background-color: #dcdcdc; color: #111111; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); transform: translateY(1px) scale(0.98); transition-duration: 100ms; } html[data-design="graphite"] form.htmx-request button[type="submit"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear), html[data-design="graphite"] button.htmx-request:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear), html[data-design="graphite"] #cashback-save.htmx-request ~ .settings-actions button[form="cashback-save"], html[data-design="graphite"] #cashback-run.htmx-request ~ .settings-actions button[form="cashback-run"] { background-color: #cfcfcf; color: #3a3a3a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); transform: none; cursor: progress; } html[data-design="graphite"] button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):disabled, html[data-design="graphite"] button.is-disabled:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { background: #3a3a3a; color: #8a8a8a; box-shadow: none; cursor: not-allowed; opacity: 1; } /* Вторичные: графитовые, как «Design / Code» в библиотеке */ html[data-design="graphite"] button.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear), html[data-design="graphite"] .button.secondary { background: var(--g-card) var(--g-card-fill); color: var(--g-text); border-color: var(--g-edge); box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.1); } html[data-design="graphite"] button.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled):not(.is-disabled), html[data-design="graphite"] .button.secondary:hover { background-color: var(--g-card-hover); color: var(--g-text); border-color: var(--g-edge-strong); box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 6px 12px -8px rgba(0, 0, 0, 0.45); } html[data-design="graphite"] button.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):active:not(:disabled):not(.is-disabled) { background-color: var(--g-recess); color: var(--g-text); } html[data-design="graphite"] button.row-delete:hover:not(:disabled), html[data-design="graphite"] button.row-delete-yes:hover:not(:disabled) { background: rgba(239, 184, 166, 0.12); color: var(--offline); } html[data-design="graphite"] button.row-delete-no:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--ink); } /* ---------- Поля ---------- */ html[data-design="graphite"] label { font-size: 0.8125rem; font-weight: 450; color: var(--muted); } html[data-design="graphite"] .check { color: var(--ink); font-size: 0.875rem; } html[data-design="graphite"] .check input, html[data-design="graphite"] .settings-section .check input { accent-color: #d9d9d9; } html[data-design="graphite"] input[type="text"], html[data-design="graphite"] input[type="password"], html[data-design="graphite"] input[type="number"], html[data-design="graphite"] input[type="url"], html[data-design="graphite"] input[type="search"], html[data-design="graphite"] select, html[data-design="graphite"] .cashback-search-form input[type="search"], html[data-design="graphite"] .eda-benefit-controls select, html[data-design="graphite"] .taxi-track select, html[data-design="graphite"] .taxi-track-threshold { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 11px; background: var(--g-recess); color: var(--g-text); font: 450 0.875rem/1.25 var(--font-body); letter-spacing: -0.01em; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); transition: border-color 360ms ease, box-shadow 420ms var(--g-ease), background-color 360ms ease; } html[data-design="graphite"] input:hover, html[data-design="graphite"] select:hover { border-color: rgba(255, 255, 255, 0.13); } html[data-design="graphite"] input:focus, html[data-design="graphite"] select:focus, html[data-design="graphite"] .cashback-search-form input[type="search"]:focus { outline: none; border-color: #9a9a9a; box-shadow: 0 0 0 2px rgba(150, 150, 150, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.35); } html[data-design="graphite"] input::placeholder { color: #7a7a7a; } html[data-design="graphite"] .cashback-search-form input[type="search"]:-webkit-autofill { -webkit-text-fill-color: var(--g-text); box-shadow: 0 0 0 1000px var(--g-recess) inset; } /* ---------- Тосты ---------- */ html[data-design="graphite"] .page-toast, html[data-design="graphite"] .taxi-toast { border: 1px solid var(--g-edge); background: var(--g-card) var(--g-card-fill); color: var(--g-text); font-weight: 500; box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 14px 32px -12px rgba(0, 0, 0, 0.5); } html[data-design="graphite"] .page-toast { top: 1.1rem; padding: 0.7rem 1.1rem; border-radius: 14px; font-size: 0.875rem; transform: translate(-50%, -10px) scale(0.98); transition: opacity 250ms var(--g-ease), transform 350ms var(--g-ease-out); } html[data-design="graphite"] .page-toast.is-visible { transform: translate(-50%, 0) scale(1); } html[data-design="graphite"] .taxi-toast { border-radius: 10px; } html[data-design="graphite"] .flash { border-radius: 14px; } /* ---------- Каркас ---------- */ html[data-design="graphite"] .app { grid-template-columns: 240px 1fr; } html[data-design="graphite"] .sidebar { background: var(--sidebar); border-right: 1px solid var(--page-edge); padding: 1.2rem 0.8rem 0.9rem; gap: 1.6rem; } html[data-design="graphite"][data-theme="dark"] .sidebar { background: linear-gradient(180deg, #121415, #080909 60%); box-shadow: inset -1px 0 rgba(255, 255, 255, 0.02); } html[data-design="graphite"] .brand { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.05em; padding: 0.25rem 0.6rem; } html[data-design="graphite"] .nav { gap: 0.2rem; } html[data-design="graphite"] .nav a { padding: 0.55rem 0.75rem; border-radius: 12px; border: 1px solid transparent; color: var(--muted); font-size: 0.9rem; font-weight: 500; transition: background 220ms var(--g-ease), color 220ms var(--g-ease), border-color 220ms var(--g-ease); } html[data-design="graphite"] .nav a:hover { color: var(--ink); background: var(--nav-hover); } html[data-design="graphite"] .nav a.active { background: var(--g-card) var(--g-card-fill); color: var(--g-text); border-color: var(--g-edge); box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.25); } html[data-design="graphite"][data-theme="dark"] .nav a.active { background: linear-gradient(135deg, #2b2e30, rgba(34, 38, 41, 0.82)); border-color: rgba(247, 251, 255, 0.28); } html[data-design="graphite"] .sidebar-foot { gap: 0.45rem; } html[data-design="graphite"] .theme-toggle.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { padding: 0.55rem 0.75rem; border-radius: 12px; font-weight: 500; } html[data-design="graphite"] .user-chip { padding: 0.65rem 0.75rem; border-radius: 12px; background: transparent; border: 1px solid var(--page-edge); font-size: 0.8125rem; } html[data-design="graphite"] .user-chip strong { font-weight: 600; font-size: 0.875rem; } html[data-design="graphite"] .sidebar-foot form button.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { font-size: 0.8125rem; padding: 0.5rem 0.75rem; } html[data-design="graphite"] .main { background: var(--bg-main); padding: 2.1rem 2rem 3rem; } html[data-design="graphite"][data-theme="dark"] .main { background: radial-gradient(ellipse at 25% 0%, rgba(25, 27, 28, 0.33), transparent 68%), var(--bg-main); } html[data-design="graphite"] .page-header { margin-bottom: 1.6rem; } html[data-design="graphite"] .page-title { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -0.045em; } html[data-design="graphite"] .page-header .muted { margin-top: 0.35rem; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.02em; } html[data-design="graphite"] #updated-at, html[data-design="graphite"] #refresh-countdown { color: var(--ink); font-variant-numeric: tabular-nums; } html[data-design="graphite"] .content { align-content: start; } /* Переключатель дизайна */ html[data-design="graphite"] .design-switch { gap: 0; padding: 3px; border-radius: 13px; background: var(--g-recess); border: 1px solid var(--g-edge); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); } html[data-design="graphite"] .design-switch button.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { padding: 0.4rem 0.2rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--g-muted); font-size: 0.72rem; box-shadow: none; } html[data-design="graphite"] .design-switch button.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled):not(.is-disabled) { background: rgba(255, 255, 255, 0.04); color: var(--g-text); border-color: transparent; box-shadow: none; transform: none; } html[data-design="graphite"] .design-switch button.secondary[aria-pressed="true"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear), html[data-design="graphite"] .design-switch button.secondary[aria-pressed="true"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled):not(.is-disabled) { background: linear-gradient(135deg, #2b2e30, #222527); color: var(--g-text); border-color: rgba(247, 251, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); } /* ---------- Карточки модулей ---------- */ html[data-design="graphite"] .module { background: var(--g-card) var(--g-card-fill); border: 1px solid var(--g-edge); border-radius: var(--radius); box-shadow: var(--g-card-shadow); padding: 1.25rem 1.35rem 1.15rem; } html[data-design="graphite"] .module:hover { box-shadow: var(--g-card-shadow); } html[data-design="graphite"] .module::before { display: none; } html[data-design="graphite"] .module-head { gap: 0.7rem; margin-bottom: 1.05rem; } /* Иконка модуля — как .fb-icon: полупрозрачная плашка с тонкой рамкой */ html[data-design="graphite"] .module-icon { border-radius: 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--g-accent); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; } html[data-design="graphite"] .module-head h2 { font-size: 1.05rem; font-weight: 550; letter-spacing: -0.02em; } html[data-design="graphite"] .module-foot { padding-top: 1rem; } html[data-design="graphite"] .module-foot a { color: var(--g-muted); font-size: 0.8125rem; font-weight: 500; transition: gap 200ms var(--g-ease), color 200ms var(--g-ease); } html[data-design="graphite"] .module-foot a:hover { color: var(--g-text); opacity: 1; } html[data-design="graphite"] .hint, html[data-design="graphite"] .more-hint { font-size: 0.8125rem; } html[data-design="graphite"] .dot { box-shadow: 0 0 0 3px rgba(239, 184, 166, 0.14); } html[data-design="graphite"] .dot.on { box-shadow: 0 0 0 3px rgba(143, 209, 158, 0.14); } /* Лог-строки */ html[data-design="graphite"] .log li, html[data-design="graphite"] .items li { padding: 0.55rem 0; font-size: 0.875rem; } html[data-design="graphite"] .log li:first-child, html[data-design="graphite"] .items li:first-child { padding-top: 0; } html[data-design="graphite"] .log li > .muted { font-size: 0.78rem; line-height: 1.7; } html[data-design="graphite"] .item-vals { font-size: 0.8125rem; color: var(--muted); } html[data-design="graphite"] .item-vals strong { font-size: 0.9rem; font-weight: 600; color: var(--ink); } /* TF2: крупная цифра как в «The collection» */ html[data-design="graphite"] .mono-price .big { font-family: var(--font-body); font-size: 2.6rem; font-weight: 650; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } html[data-design="graphite"] .mono-price .big-sub { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: var(--muted); letter-spacing: -0.02em; } html[data-design="graphite"] .metrics { gap: 0.35rem; font-size: 0.8125rem; } html[data-design="graphite"] .metrics > span { padding: 0.12rem 0.6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); font-variant-numeric: tabular-nums; } html[data-design="graphite"] .metrics .metric-strong { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: var(--ink); } /* ---------- Кэшбэк ---------- */ html[data-design="graphite"] .content > .module--cashback { display: flex; gap: 0; } html[data-design="graphite"] .cashback-search-form { gap: 0.55rem; } html[data-design="graphite"] .cashback-search-form input[type="search"] { padding: 0 0.9rem; } html[data-design="graphite"] .cashback-search-form button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { padding: 0 1.3rem; } html[data-design="graphite"] .cashback-msg { font-size: 0.8125rem; } html[data-design="graphite"] .cashback-table-wrap { border-color: rgba(255, 255, 255, 0.08); border-radius: 13px; background: rgba(0, 0, 0, 0.12); } html[data-design="graphite"] .cashback-table { font-size: 0.8125rem; } html[data-design="graphite"] .cashback-table th, html[data-design="graphite"] .cashback-table td { padding: 0.6rem 0.6rem; } html[data-design="graphite"] .cashback-table th { background: var(--g-raised); color: var(--muted); font-size: 0.75rem; font-weight: 450; letter-spacing: 0; text-transform: none; } html[data-design="graphite"] .cashback-table tbody tr:hover { background: rgba(224, 224, 224, 0.045); } html[data-design="graphite"] .cashback-benefit { color: var(--ink); font-weight: 600; } html[data-design="graphite"] .cashback-partner-link--tbank, html[data-design="graphite"] .cashback-partner-link--tbank:visited { color: #e8d4a5; } html[data-design="graphite"] .cashback-partner-link--ozon, html[data-design="graphite"] .cashback-partner-link--ozon:visited { color: #a9c1ff; } /* ---------- Такси ---------- */ html[data-design="graphite"] .taxi-track select, html[data-design="graphite"] .taxi-track-threshold, html[data-design="graphite"] .taxi-track-btn:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { height: 2.35rem; } html[data-design="graphite"] .taxi-track select { padding: 0 0.6rem; } html[data-design="graphite"] .taxi-track-clear.is-active { color: var(--offline); } html[data-design="graphite"] .taxi-track-clear.is-active:hover { background: rgba(239, 184, 166, 0.12); } html[data-design="graphite"] .taxi-stats { margin: 0.4rem 0 0.65rem; padding: 0.95rem 1rem; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); } html[data-design="graphite"] .taxi-stats-now { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.04em; } html[data-design="graphite"] .taxi-forecast-label { font-weight: 450; letter-spacing: 0.075em; } html[data-design="graphite"] .taxi-delta.is-down { color: #8fd19e; } html[data-design="graphite"] .taxi-delta.is-up { color: #efb8a6; } html[data-design="graphite"] .taxi-table { font-size: 0.8125rem; } html[data-design="graphite"] .taxi-table th { font-size: 0.75rem; font-weight: 450; letter-spacing: 0; text-transform: none; } html[data-design="graphite"] .empty-state { min-height: 100px; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: 13px; font-size: 0.875rem; } /* ---------- Лог модуля / график ---------- */ html[data-design="graphite"] .chart-range { gap: 0; padding: 3px; border-radius: 13px; background: var(--g-recess); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); } html[data-design="graphite"] .chart-range a { padding: 0.3rem 0.75rem; border: 1px solid transparent; border-radius: 10px; color: var(--muted); font-size: 0.8125rem; font-weight: 550; } html[data-design="graphite"] .chart-range a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); } html[data-design="graphite"] .chart-range a.active { background: linear-gradient(135deg, #2b2e30, #222527); border-color: rgba(247, 251, 255, 0.3); color: var(--ink); } /* Вкладки ASF лежат на фоне страницы, а не в карточке — оформлены как пункты сайдбара. */ html[data-design="graphite"] .asf-tabs a { border-radius: 12px; border-color: transparent; background: transparent; color: var(--muted); font-weight: 500; } html[data-design="graphite"] .asf-tabs a:hover { color: var(--ink); background: var(--nav-hover); } html[data-design="graphite"] .asf-tabs a.active { background: var(--g-card) var(--g-card-fill); color: var(--g-text); border-color: var(--g-edge); box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.25); } html[data-design="graphite"][data-theme="dark"] .asf-tabs a.active { background: linear-gradient(135deg, #2b2e30, rgba(34, 38, 41, 0.82)); border-color: rgba(247, 251, 255, 0.28); } html[data-design="graphite"] .pager a { color: var(--ink); font-weight: 550; } /* ---------- Настройки ---------- */ html[data-design="graphite"] .settings-section input[type="text"], html[data-design="graphite"] .settings-section input[type="password"], html[data-design="graphite"] .settings-section input[type="number"], html[data-design="graphite"] .settings-section input[type="url"] { padding: 0.52rem 0.7rem; border-radius: 10px; } html[data-design="graphite"] .row-card { border-radius: 13px; padding: 0.8rem 0.85rem; border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); } html[data-design="graphite"] .row-card--new { border-color: rgba(255, 255, 255, 0.12); background: transparent; } html[data-design="graphite"] .settings-subhead { font-weight: 550; letter-spacing: -0.02em; } html[data-design="graphite"] .settings-divider { border-top-color: rgba(255, 255, 255, 0.08); } /* ---------- Вход и публичные страницы ---------- */ html[data-design="graphite"] .login-body, html[data-design="graphite"] .scripts-body { background: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.7), transparent 60%), var(--bg); } html[data-design="graphite"][data-theme="dark"] .login-body, html[data-design="graphite"][data-theme="dark"] .scripts-body { background: radial-gradient(ellipse at 25% 0%, rgba(25, 27, 28, 0.33), transparent 68%), var(--bg); } html[data-design="graphite"] .login-form, html[data-design="graphite"] .scripts-panel { border-radius: 20px; background: var(--g-card) var(--g-card-fill); border: 1px solid var(--g-edge); box-shadow: var(--g-card-shadow), 0 30px 60px -30px rgba(0, 0, 0, 0.45); } html[data-design="graphite"] .login-form { width: min(370px, 92vw); gap: 0.9rem; padding: 1.9rem 1.6rem 1.6rem; } html[data-design="graphite"] .login-form h1 { font-size: 2rem; letter-spacing: -0.05em; } html[data-design="graphite"] .login-form input { padding: 0.7rem 0.85rem; } html[data-design="graphite"] .login-form button[type="submit"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { margin-top: 0.35rem; padding: 0.72rem 1rem; } html[data-design="graphite"] .scripts-header h1 { font-family: var(--font-display); letter-spacing: -0.045em; } html[data-design="graphite"] .scripts-kicker { color: var(--muted); font-size: 0.72rem; font-weight: 450; letter-spacing: 0.075em; } html[data-design="graphite"] .script-card { border-radius: 14px; background: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.08); } html[data-design="graphite"] .script-install { border-radius: 12px; background: #ececec; color: #1a1a1a; box-shadow: inset 0 1px rgba(255, 255, 255, 0.7); transition: transform 350ms var(--g-ease-out), background-color 200ms var(--g-ease); } html[data-design="graphite"] .script-install:hover:not(:disabled) { background: #ffffff; transform: translateY(-2px); } html[data-design="graphite"] .script-install-secondary { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; } html[data-design="graphite"] .script-install-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); } html[data-design="graphite"] .scripts-note a { color: var(--ink); } /* ---------- Мобильная вёрстка ---------- */ @media (max-width: 860px) { html[data-design="graphite"] .app { grid-template-columns: 1fr; } html[data-design="graphite"] .sidebar { position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-right: 0; border-bottom: 1px solid var(--page-edge); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); } html[data-design="graphite"] .nav { grid-auto-flow: column; margin-right: auto; } html[data-design="graphite"] .sidebar-foot { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; } html[data-design="graphite"] .theme-toggle.secondary:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { width: auto; } html[data-design="graphite"] .theme-toggle-label, html[data-design="graphite"] .user-chip { display: none; } html[data-design="graphite"] .main { padding: 1.25rem 1rem 2rem; } html[data-design="graphite"] .module-head { flex-direction: row; align-items: center; } } @media (prefers-reduced-motion: reduce) { html[data-design="graphite"] button, html[data-design="graphite"] .page-toast { transition: none !important; transform: none !important; } } /* ---------- Цвета модулей — общие, из --mod-* в app.css ---------- */ /* Нужны явные правила: базовый блок graphite выше ставит --accent всем .module. */ html[data-design="graphite"] .module--tf2 { --accent: var(--mod-tf2); --chart-cloudtf2: #f5b83d; --chart-clover: #34d399; --chart-tf2crypto: #8b8f98; --chart-steam: #60a5fa; } html[data-design="graphite"] .module--steam { --accent: var(--mod-steam); } html[data-design="graphite"] .module--ozon { --accent: var(--mod-ozon); } html[data-design="graphite"] .module--cashback { --accent: var(--mod-cashback); } html[data-design="graphite"] .module--taxi { --accent: var(--mod-taxi); } html[data-design="graphite"] .module--asf { --accent: var(--mod-asf); } html[data-design="graphite"] .module, html[data-design="graphite"] .login-form, html[data-design="graphite"] .scripts-panel { --online: #34d399; --offline: #f87171; } html[data-design="graphite"] .module .module-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); } html[data-design="graphite"] .metrics .metric-strong { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); } html[data-design="graphite"] .check input, html[data-design="graphite"] .settings-section .check input { accent-color: var(--accent, #8b8cf6); } html[data-design="graphite"] .module input:focus, html[data-design="graphite"] .module select:focus, html[data-design="graphite"] .module .cashback-search-form input[type="search"]:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 3px rgba(0, 0, 0, 0.35); } html[data-design="graphite"] .login-form input:focus { border-color: #8b8cf6; box-shadow: 0 0 0 2px rgba(139, 140, 246, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.35); } /* Основные кнопки модулей — цветом модуля (как «Поиск» и «Отслеживать» в Modern) */ html[data-design="graphite"] .cashback-search-form button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear), html[data-design="graphite"] .taxi-track-btn:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear), html[data-design="graphite"] .settings-section button[type="submit"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { background: var(--accent) linear-gradient(155deg, rgba(255, 255, 255, 0.22), transparent 68%); color: #141414; box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); } html[data-design="graphite"] .cashback-search-form button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled):not(.is-disabled), html[data-design="graphite"] .taxi-track-btn:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled):not(.is-disabled), html[data-design="graphite"] .settings-section button[type="submit"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled):not(.is-disabled) { background-color: color-mix(in srgb, var(--accent) 82%, #ffffff); color: #111111; box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 8px 16px -10px color-mix(in srgb, var(--accent) 70%, #000000); } html[data-design="graphite"] .cashback-search-form button:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):active:not(:disabled):not(.is-disabled), html[data-design="graphite"] .taxi-track-btn:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):active:not(:disabled):not(.is-disabled), html[data-design="graphite"] .settings-section button[type="submit"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):active:not(:disabled):not(.is-disabled) { background-color: color-mix(in srgb, var(--accent) 85%, #000000); color: #111111; } html[data-design="graphite"] .taxi-track-btn:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):disabled, html[data-design="graphite"] .taxi-track-btn.is-disabled:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { background: #3a3a3a; color: #8a8a8a; box-shadow: none; } html[data-design="graphite"] .taxi-delta.is-down { color: #34d399; } html[data-design="graphite"] .taxi-delta.is-up { color: #f87171; } html[data-design="graphite"] .cashback-benefit { color: var(--accent); } html[data-design="graphite"] .cashback-partner-link--tbank, html[data-design="graphite"] .cashback-partner-link--tbank:visited { color: #fbbf24; } html[data-design="graphite"] .cashback-partner-link--ozon, html[data-design="graphite"] .cashback-partner-link--ozon:visited { color: #6b9bff; } /* Активные элементы — индиго из Modern */ html[data-design="graphite"] .design-switch button.secondary[aria-pressed="true"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { border-color: rgba(139, 140, 246, 0.55); } html[data-design="graphite"] .login-form button[type="submit"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear) { background: #8b8cf6 linear-gradient(155deg, rgba(255, 255, 255, 0.22), transparent 68%); color: #0e0e1a; } html[data-design="graphite"] .login-form button[type="submit"]:not(.row-delete):not(.row-delete-yes):not(.row-delete-no):not(.taxi-track-clear):hover:not(:disabled) { background-color: #a5a6ff; color: #0e0e1a; } html[data-design="graphite"] .scripts-kicker, html[data-design="graphite"] .scripts-note a { color: #a5a6ff; } /* ---------- Логотип «Панель модулей» ---------- */ html[data-design="graphite"] .brand, html[data-design="graphite"] .login-form h1 { display: flex; align-items: center; gap: 0.6rem; } html[data-design="graphite"] .brand-logo { display: block; width: 1.55rem; height: 1.55rem; flex-shrink: 0; --logo-tile: rgba(0, 0, 0, 0.16); } html[data-design="graphite"][data-theme="dark"] .brand-logo, html[data-design="graphite"] .login-form .brand-logo { --logo-tile: rgba(255, 255, 255, 0.16); } html[data-design="graphite"] .login-form .brand-logo { width: 1.75rem; height: 1.75rem; } html[data-design="graphite"] .tf2-site .mono-price .big { font-size: 1.7rem; }