/* Reckon — оформление по макету Reckon.dc.html.
Тёплая бумажная палитра, Georgia в заголовках и крупных числах,
моноширинный шрифт в таблицах. Тема переключается атрибутом
data-theme на . */
:root {
--bg: #FAF9F5; --card: #FFFFFF; --line: #E8E3DA; --line-soft: #EEEAE2;
--sidebar: #F0EEE6; --text: #1F1E1D; --muted: #6E6A63; --faint: #A39D94;
--accent: #D97757; --accent-hover: #C4633F; --accent-soft: #B3554D;
--sage: #7D9B76; --brick: #B3554D; --loss-bg: #F9EFED;
--zebra: #FBFAF7; --hover: #F5F1EA; --pill: #FFFFFF; --field: #FFFFFF;
--bar: #8A7A66; --bar-2: #B9AC97; --tip-bg: #1F1E1D; --tip-text: #FFFFFF; --tip-label: #C9B99B;
--shadow: 0 1px 2px rgba(31, 30, 29, .06);
--serif: Georgia, 'Times New Roman', serif;
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"] {
--bg: #1A1917; --card: #232120; --line: #37342F; --line-soft: #2E2B27;
--sidebar: #141312; --text: #EDE9E1; --muted: #9C968C; --faint: #6E6A63;
--accent: #E08862; --accent-hover: #EFA07E; --accent-soft: #E8A183;
--sage: #93B389; --brick: #CC7268; --loss-bg: #3A2723;
--zebra: #262423; --hover: #2C2926; --pill: #322F2B; --field: #1C1B19;
--bar: #9A8A73; --bar-2: #6E6355; --tip-bg: #0F0E0D; --tip-text: #F5F2EC; --tip-label: #C9B99B;
--shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg); color: var(--text);
-webkit-font-smoothing: antialiased;
font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
input, button, select { font-family: inherit; }
input::placeholder { color: var(--faint); }
code { font-family: var(--mono); font-size: .92em; }
.shell { display: flex; min-height: 100vh; }
/* ---------- боковая панель ---------- */
.sidebar {
width: 220px; flex: 0 0 220px;
background: var(--sidebar); border-right: 1px solid var(--line);
display: flex; flex-direction: column; padding: 24px 0;
/* Панель всегда на виду: иначе переключатель темы и «Обновить данные»
уезжают в самый низ длинной страницы, и до них надо скроллить.
align-self обязателен — растянутый flex-элемент не липнет. */
position: sticky; top: 0; align-self: flex-start;
height: 100vh; overflow-y: auto;
}
.brand { padding: 0 18px 26px; display: flex; align-items: center; gap: 11px; }
.brand__mark {
width: 36px; height: 26px; flex: none;
color: var(--accent);
overflow: visible;
}
.brand__name { font-family: var(--serif); font-size: 19px; letter-spacing: -.2px; line-height: 1.1; }
.brand__stage {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
color: var(--accent); border: 1px solid var(--accent);
border-radius: 999px; padding: 1px 6px; vertical-align: 3px; margin-left: 4px;
}
.brand__sub {
font-size: 9px; text-transform: uppercase; letter-spacing: .8px;
color: var(--muted); margin-top: 3px;
}
.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
.nav--util { margin: 18px 8px 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.nav__item {
display: block; width: 100%; text-align: left;
font-size: 13px; padding: 9px 12px; border: 0; border-radius: 8px;
background: transparent; color: var(--muted); cursor: pointer;
}
.nav__item:hover { background: var(--hover); }
.nav__item.is-active {
background: var(--card); color: var(--accent-hover);
font-weight: 600; box-shadow: var(--shadow);
}
.sidebar__foot {
margin-top: auto; padding: 24px 20px 0;
display: flex; flex-direction: column; gap: 12px;
}
.sidebar__meta { font-size: 11px; color: var(--muted); line-height: 1.5; }
.sidebar__account {
display: flex; flex-direction: column; gap: 8px;
padding-top: 12px; border-top: 1px solid var(--line);
}
.sidebar__account .sidebar__meta { word-break: break-all; }
.sidebar__meta b { font-weight: 600; color: var(--text); }
/* ---------- сегментированные переключатели ---------- */
[hidden] { display: none !important; }
.seg {
display: flex; gap: 4px; padding: 3px; border-radius: 8px;
background: var(--bg); border: 1px solid var(--line);
}
.seg--period { gap: 6px; border-radius: 9px; background: var(--sidebar); }
.seg__item {
flex: 1; border: 0; background: transparent; cursor: pointer;
font-size: 11px; text-align: center; padding: 5px 6px;
border-radius: 6px; color: var(--muted); white-space: nowrap;
}
.seg--period .seg__item { flex: none; font-size: 12px; padding: 6px 12px; }
.seg__item:hover { color: var(--text); }
.seg__item.is-active { background: var(--pill); color: var(--text); box-shadow: var(--shadow); }
/* ---------- кнопки и поля ---------- */
.btn {
font-size: 13px; padding: 9px 12px;
border: 1px solid var(--line); border-radius: 8px;
background: var(--card); color: var(--text); cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hover); }
.btn:disabled { opacity: .55; cursor: default; }
.btn--ghost { background: transparent; }
.btn--sm { font-size: 12px; padding: 7px 13px; }
.field {
font-size: 13px; padding: 9px 12px;
border: 1px solid var(--line); border-radius: 8px;
background: var(--field); color: var(--text);
}
.field--mono { font-family: var(--mono); font-size: 12px; }
.shop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shop:last-of-type { border-bottom: none; }
.shop .field { flex: 1 1 200px; }
.shop__mp { min-width: 110px; font-size: 13px; color: var(--muted); }
.shop__label { flex: 1 1 260px; font-size: 13px; }
.explain__text { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.finding { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.finding:last-of-type { border-bottom: none; }
.finding__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.finding__text { font-size: 13px; color: var(--muted); margin: 4px 0 8px; line-height: 1.5; }
.finding__sum { font-family: var(--mono); font-size: 12px; color: var(--muted); }
/* Точка важности: цвет несёт смысл, поэтому рядом всегда есть текст —
на него и опирается тот, кто цвета не различает. */
.finding__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; }
.finding__dot.is-alarm { background: var(--brick); }
.finding__dot.is-warn { background: var(--accent); }
.finding__dot.is-note { background: var(--faint); }
/* Клетка, которую можно раскрыть. Подчёркивание — только при наведении:
пунктир под каждым числом превратил бы таблицу в решето. */
.cell-drill {
border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
font: inherit; color: inherit; text-align: right;
}
.cell-drill:hover { text-decoration: underline; text-underline-offset: 3px; }
td.is-drill.is-open { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); }
.shop__sum { color: var(--muted); }
.field:focus { border-color: var(--accent); outline: none; }
/* ---------- основная область ---------- */
.main { flex: 1; min-width: 0; padding: 32px; }
.page { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
/* Панели экрана — тоже колонка с тем же шагом. Без этого #screen оставался
обычным блоком, и блоки стояли вплотную: у .page отступ есть только между
шапкой, уведомлениями и экраном, но не внутри него. */
#screen, #notices { display: flex; flex-direction: column; gap: 24px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head h1 {
margin: 0 0 6px; font-family: var(--serif);
font-size: 26px; font-weight: 400; letter-spacing: -.3px;
}
.page-head__sub { font-size: 13px; color: var(--muted); }
.page-head__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Площадка без данных остаётся в переключателе, но видно, что она пуста. */
.seg__item.is-empty { opacity: .55; }
.notice {
border-radius: 12px; padding: 14px 18px;
border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
font-size: 13px; line-height: 1.55; color: var(--muted);
}
.notice p { margin: 3px 0; }
.notice--warn { border-color: var(--accent); color: var(--text); }
/* ---------- карточки показателей ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stat {
background: var(--card); border: 1px solid var(--line);
border-radius: 12px; box-shadow: var(--shadow); padding: 20px 24px;
}
.stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.stat__value { font-family: var(--serif); font-size: 30px; margin-top: 10px; line-height: 1.15; }
.stat__value.is-accent { color: var(--accent); }
.stat__value.is-loss { color: var(--brick); }
.stat__hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.stat__hint.is-up { color: var(--sage); }
.stat__hint.is-down { color: var(--brick); }
/* ---------- панели ---------- */
.panel {
background: var(--card); border: 1px solid var(--line);
border-radius: 12px; box-shadow: var(--shadow); padding: 24px;
}
.panel__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.panel h2 { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 400; }
.panel__note { font-size: 11px; color: var(--muted); }
/* Панель-тревога: расхождение в цифрах не должно выглядеть как ещё один
раздел отчёта. Отбивка слева, а не заливка — фон здесь несёт таблицу. */
.panel--alarm { border-color: var(--accent); border-left-width: 3px; }
.panel--alarm h2 { color: var(--accent); }
.panel__tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.panel__tools label { display: inline-flex; gap: 6px; align-items: center; }
/* ---------- таблицы ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
.table--pnl { min-width: 680px; }
th {
font-size: 11px; font-weight: 400; text-transform: uppercase;
letter-spacing: .5px; color: var(--muted);
padding: 0 0 10px 20px; text-align: right;
border-bottom: 1px solid var(--line); white-space: nowrap;
}
th.col--name { text-align: left; padding: 0 12px 10px 0; }
th.is-sortable { cursor: pointer; }
th.is-sortable:hover, th.is-sorted { color: var(--text); }
td {
font-size: 13px; padding: 11px 0 11px 20px;
text-align: right; white-space: nowrap;
}
td.cell--name { text-align: left; padding: 11px 12px 11px 0; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.is-compact td { padding-top: 7px; padding-bottom: 7px; }
.table--wide th, .table--wide td { padding-left: 12px; }
.table--wide th:first-child, .table--wide td:first-child { padding-left: 0; }
tbody tr:hover { background: var(--hover); }
tr.is-zebra { background: var(--zebra); }
tr.is-result { background: var(--sidebar); }
tr.is-result td { font-weight: 600; border-top: 1px solid var(--line); }
tr.is-alert td { background: var(--loss-bg); }
td.c-cost { color: var(--brick); }
td.c-gain { color: var(--sage); }
td.c-result-up { color: var(--sage); }
td.c-result-down { color: var(--brick); background: var(--loss-bg); }
td.c-zero { color: var(--faint); }
td.c-muted { color: var(--muted); }
.badge-once {
margin-left: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--accent); border: 1px solid var(--accent);
border-radius: 999px; padding: 2px 7px; vertical-align: 1px;
}
/* ---------- график ---------- */
.chart { display: flex; gap: 16px; }
.chart__axis {
width: 60px; flex: 0 0 60px;
display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
font-family: var(--mono); font-size: 10px; color: var(--muted);
}
.chart__plot { flex: 1; min-width: 0; position: relative; }
.chart__grid {
position: absolute; left: 0; right: 0; top: 0;
display: flex; flex-direction: column; justify-content: space-between;
}
.chart__grid i { height: 1px; background: var(--line-soft); }
.chart__grid i:last-child { background: var(--line); }
.chart__cols { position: relative; z-index: 2; display: flex; align-items: flex-end; }
.chart__col {
flex: 1; height: 100%; min-width: 0;
display: flex; align-items: flex-end; justify-content: center;
gap: 2px; position: relative; cursor: default;
}
.chart__bar { flex: 1; min-width: 1px; max-width: 72px; border-radius: 4px 4px 0 0; background: var(--bar); }
.chart__bar--alt { background: var(--bar-2); }
.chart__svg { position: absolute; left: 0; top: 0; width: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.chart__labels { display: flex; margin-top: 12px; }
.chart__labels span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--muted); }
.spacer { height: 14px; }
.legend { display: flex; gap: 18px; font-size: 11px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend i.line { width: 14px; height: 2px; border-radius: 0; }
.tip {
position: absolute; bottom: 100%; left: 50%;
transform: translate(-50%, -10px);
background: var(--tip-bg); color: var(--tip-text);
border-radius: 8px; padding: 10px 12px; min-width: 168px;
z-index: 5; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); pointer-events: none;
}
.tip__label { font-size: 11px; letter-spacing: .3px; color: var(--tip-label); }
.tip__row { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; margin-top: 5px; }
.tip__row b { font-family: var(--mono); font-weight: 400; }
/* ---------- экран настроек ---------- */
.src { padding: 20px 0; border-bottom: 1px solid var(--line); }
.src:first-child { padding-top: 0; }
.src:last-child { padding-bottom: 0; border-bottom: 0; }
.src__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.src__name { font-size: 14px; font-weight: 600; }
.src__hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.src__scopes { font-size: 11px; color: var(--faint); margin-top: 9px; }
.src__value {
font-family: var(--mono); font-size: 12px; color: var(--muted);
margin-top: 12px; word-break: break-all;
}
.badge-status {
font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}
.badge-status.is-ok { border-color: var(--sage); color: var(--sage); }
.kv { display: flex; flex-direction: column; gap: 14px; }
.kv__row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; font-size: 13px;
}
.kv__row + .kv__row { padding-top: 14px; border-top: 1px solid var(--line); }
.kv__val { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; word-break: break-all; }
.kv__val.is-ok { color: var(--sage); }
/* ---------- загрузка файлов ---------- */
.upload { display: flex; flex-direction: column; gap: 12px; }
.upload__zone {
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 26px 20px; border-radius: 12px;
border: 1px dashed var(--line); background: var(--zebra);
transition: border-color .12s, background .12s;
}
.upload__zone.is-over { border-color: var(--accent); background: var(--hover); }
.upload__hint { font-size: 13px; color: var(--muted); text-align: center; }
.upload__input { display: none; }
.upload__status { font-size: 12px; color: var(--muted); }
.upload__results { display: flex; flex-direction: column; gap: 6px; }
.upload__row {
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.upload__name { color: var(--text); }
.upload__ok { color: var(--sage); font-family: var(--mono); }
.upload__err { color: var(--brick); }
/* ---------- честный статус беты ---------- */
.trust { display: flex; flex-direction: column; gap: 18px; }
.trust__group { display: flex; flex-direction: column; gap: 8px; }
.trust__title {
font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
display: inline-flex; align-items: center; gap: 7px;
}
.trust__title i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.trust__title.is-ok { color: var(--sage); }
.trust__title.is-ok i { background: var(--sage); }
.trust__title.is-unknown { color: var(--accent); }
.trust__title.is-unknown i { background: var(--accent); }
.trust__title.is-missing { color: var(--muted); }
.trust__title.is-missing i { background: var(--faint); }
.trust__list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.trust__list li { margin: 2px 0; }
.trust__note { font-size: 12px; color: var(--muted); line-height: 1.55; }
/* ---------- пустое состояние ---------- */
.empty { padding: 56px 32px; text-align: center; }
.empty__title { font-family: var(--serif); font-size: 18px; margin-bottom: 10px; }
.empty__text { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 460px; margin: 0 auto; }
/* ---------- страница входа ---------- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login { width: 100%; max-width: 380px; }
.login__brand { padding: 0 0 22px; justify-content: center; }
.login__form { display: flex; flex-direction: column; gap: 16px; }
.login__title { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 400; }
.login__field { display: flex; flex-direction: column; gap: 6px; }
.login__field span small { text-transform: none; letter-spacing: 0; color: var(--faint); }
.login__field span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.login__field .field { width: 100%; }
.login__submit { width: 100%; padding: 11px 12px; background: var(--accent); border-color: var(--accent); color: #FFF; }
.login__submit:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFF; }
.login__error { margin: 0; font-size: 13px; color: var(--brick); }
.login__note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.login__sent { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* Код набирают с одного взгляда — цифры крупные и разрежённые. */
.login__code { font-size: 20px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.login__switch { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.login__switch:hover { color: var(--text); }
.login__providers { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.login__or { display: flex; align-items: center; gap: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); }
.login__or::before, .login__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.login__provider { width: 100%; padding: 10px 12px; text-align: center; text-decoration: none; }
/* Колонка полей внутри строки настроек. Сбрасываем flex у самих полей:
в колонке правило .shop .field (flex-basis 200px) задаёт им не ширину,
а высоту, и поля растягиваются на пол-экрана. */
/* Блок регистрации — один ребёнок формы, поэтому отступы между его полями
задаются здесь, а не общим gap формы. */
#signup-fields { display: flex; flex-direction: column; gap: 16px; }
.login__pair { display: flex; gap: 12px; }
.login__pair .login__field { flex: 1; min-width: 0; }
.field--warn { border-color: var(--brick); }
.login__warn { margin: -4px 0 0; font-size: 12px; line-height: 1.4; color: var(--brick); }
.login__hint { margin: -4px 0 0; font-size: 12px; line-height: 1.4; color: var(--faint); }
.login__captcha { display: flex; justify-content: center; }
.login__fields { display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; }
.login__fields .field { flex: 0 0 auto; }
.login__links { display: flex; justify-content: space-between; gap: 12px; }
.login__links:empty { display: none; }
/* Спокойная подсказка отличается от отказа: красным здесь пугать нечем. */
.login__error--calm { color: var(--muted); }
.login__signup { margin-top: 12px; padding: 14px 16px; display: flex; justify-content: center;
align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); }
.login__link { padding: 0; border: 0; background: none; font: inherit; color: var(--accent);
cursor: pointer; }
.login__link:hover { text-decoration: underline; }
/* ---------- адаптив ---------- */
@media (max-width: 1240px) {
.stats--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
.stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.shell { flex-direction: column; }
.sidebar {
width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--line);
padding: 16px 0;
/* На узком экране панель ложится сверху — липнуть ей незачем. */
position: static; height: auto; align-self: auto; overflow: visible;
}
.nav { flex-direction: row; flex-wrap: wrap; }
.nav--util { margin: 12px 8px 0; }
.sidebar__foot { margin-top: 16px; }
.main { padding: 20px 16px; }
.stats { grid-template-columns: 1fr; }
}