/* Единое оформление кабинетов «Чекни Чек». */ :root{ color-scheme: light dark; --sky:#0ea5e9; --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --violet:#8b5cf6; --bg:#f6f8fb; --card:#ffffff; --text:#0f1c2e; --muted:#5b6b80; --line: rgba(15,28,46,.10); --shadow: 0 10px 30px rgba(15,28,46,.08); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0b1220; --card:#111b2e; --text:#e8eef7; --muted:#93a4bb; --line: rgba(232,238,247,.12); --shadow: 0 10px 30px rgba(0,0,0,.45); } } /* Ручной переключатель темы главнее настройки ОС: JS выставляет data-theme на при загрузке (см. inline-скрипт в каждой страницы) и по клику — тема не мигает и не зависит от системы. */ :root[data-theme="dark"]{ color-scheme: dark; --bg:#0b1220; --card:#111b2e; --text:#e8eef7; --muted:#93a4bb; --line: rgba(232,238,247,.12); --shadow: 0 10px 30px rgba(0,0,0,.45); } :root[data-theme="light"]{ color-scheme: light; } *{box-sizing:border-box} body{ margin:0;background:var(--bg);color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.5;-webkit-font-smoothing:antialiased; } .wrap{max-width:1100px;margin:0 auto;padding:16px 16px 56px} header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em} /* Лого: белый чек с «выбитой» галочкой на фирменном градиенте. Глиф внутри спана прячем — рисунок целиком в фоне, чтобы не менять разметку на всех страницах. */ .brand .logo{ width:34px;height:34px;border-radius:11px;display:inline-flex; color:transparent;font-size:0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Cpath d='M24 12.5h16q4 0 4 4v31l-4-3.2-4 3.2-4-3.2-4 3.2-4-3.2-4 3.2v-31q0-4 4-4z' fill='%23fff'/%3E%3Cpath d='M26 31l5.5 5.5L40 26.5' fill='none' stroke='%23000' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='64' height='64' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E") center/100% no-repeat, linear-gradient(135deg,#8b7bff,#657eea 55%,#22d3ee); box-shadow:0 6px 18px rgba(101,126,234,.40); } .who{font-size:.86rem;color:var(--muted);text-align:right} .who b{color:var(--text);display:block;font-size:.92rem} .nav{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 20px;overflow-x:auto} .nav a{ padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted); border:1px solid var(--line);font-size:.9rem;font-weight:500;white-space:nowrap;background:var(--card); } .nav a.on{background:linear-gradient(135deg,#7c6df2,#657eea);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(101,126,234,.30)} .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)} .grid{display:grid;gap:14px} .grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid.c3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} h1{font-size:1.35rem;margin:0 0 4px;letter-spacing:-.02em} h2{font-size:1.1rem;margin:0 0 12px} .sub{color:var(--muted);font-size:.92rem;margin:0 0 16px} .stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)} .stat .label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px} .stat .value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat .value.sm{font-size:1.15rem} .stat.accent{background:linear-gradient(135deg,#7c6df2,#657eea);color:#fff;border-color:transparent;box-shadow:0 12px 30px rgba(91,83,202,.30)} .stat.accent .label{color:rgba(255,255,255,.85)} .stat.warn .value{color:var(--amber)} .stat.danger .value{color:var(--red)} .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap} .pill.draft{background:rgba(91,107,128,.14);color:var(--muted)} .pill.sub{background:rgba(245,158,11,.16);color:#b45309} .pill.ok{background:rgba(34,197,94,.16);color:#15803d} .pill.no{background:rgba(239,68,68,.14);color:#b91c1c} .pill.paid{background:rgba(14,165,233,.16);color:#0369a1} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill.sub{color:#fbbf24} :root:not([data-theme="light"]) .pill.ok{color:#4ade80} :root:not([data-theme="light"]) .pill.no{color:#f87171} :root:not([data-theme="light"]) .pill.paid{color:#38bdf8} } :root[data-theme="dark"] .pill.sub{color:#fbbf24} :root[data-theme="dark"] .pill.ok{color:#4ade80} :root[data-theme="dark"] .pill.no{color:#f87171} :root[data-theme="dark"] .pill.paid{color:#38bdf8} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 18px;border-radius:12px;font-weight:600;text-decoration:none; border:1px solid transparent;font-size:.94rem;cursor:pointer;font-family:inherit; } .btn.primary{background:linear-gradient(135deg,#7c6df2,#657eea);color:#fff;box-shadow:0 8px 22px rgba(91,83,202,.30)} .btn.ghost{background:transparent;color:inherit;border-color:var(--line)} .btn.ok{background:var(--green);color:#fff} .btn.no{background:var(--red);color:#fff} .btn.sm{padding:7px 13px;font-size:.86rem;border-radius:10px} .btn:disabled{opacity:.55;cursor:default} input,select,textarea{ font:inherit;padding:11px 13px;border-radius:12px;border:1px solid var(--line); background:var(--card);color:inherit;width:100%; } input:focus,select:focus{outline:2px solid var(--sky);outline-offset:1px} label{display:block;font-size:.86rem;color:var(--muted);margin:0 0 5px;font-weight:500} .field{margin-bottom:14px} .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:.9rem} th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle} th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .status{margin:10px 0;font-size:.9rem;min-height:1.2em} .status.ok{color:var(--green)} .status.err{color:var(--red)} .status.muted{color:var(--muted)} .empty{text-align:center;padding:36px 16px;color:var(--muted)} .empty .big{font-size:2.2rem;margin-bottom:8px} .flag{ display:block;font-size:.82rem;padding:6px 10px;border-radius:8px;margin-top:5px; background:rgba(245,158,11,.13);color:#b45309;border-left:3px solid var(--amber); } .flag.high{background:rgba(239,68,68,.11);color:#b91c1c;border-left-color:var(--red)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .flag{color:#fbbf24} :root:not([data-theme="light"]) .flag.high{color:#f87171} } :root[data-theme="dark"] .flag{color:#fbbf24} :root[data-theme="dark"] .flag.high{color:#f87171} .bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:7px} .bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7c6df2,#22d3ee)} /* Переключатель темы — фиксированная кнопка в углу, одинаковая на всех страницах. */ .theme-toggle{ position:fixed; top:calc(12px + env(safe-area-inset-top)); right:12px; z-index:999; width:40px; height:40px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--card); color:var(--text); box-shadow:var(--shadow); cursor:pointer; font-size:18px; line-height:1; font-family:inherit; } .theme-toggle:active{transform:scale(.94)} /* Левое меню (десктоп ≥980px): бренд + пункты + профиль в одном фиксированном сайдбаре — единый вид на всех страницах вместо смеси верхних вкладок и старого отдельного сайдбара, который раньше был только на «Расходах». Разметку добавляет mountSideNav() из app.js. */ @media (min-width:980px){ body{padding-left:216px} header.top{display:none} .nav{display:none} .side-nav{ position:fixed;left:0;top:0;bottom:0;width:216px;z-index:80; display:flex;flex-direction:column;gap:2px;padding:20px 12px; border-right:1px solid var(--line);background:var(--card);overflow-y:auto; } .side-nav .brand{padding:0 10px 20px;display:flex;align-items:center;gap:10px;font-weight:700} .side-nav nav{display:flex;flex-direction:column;gap:2px} .side-nav a{ display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px; text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:500; } .side-nav a .ic{width:18px;flex:none;text-align:center;font-size:1.05rem} .side-nav a.on{background:linear-gradient(135deg,#7c6df2,#657eea);color:#fff;box-shadow:0 6px 16px rgba(101,126,234,.30)} .side-nav a:hover:not(.on){background:color-mix(in oklab, var(--card) 80%, var(--text) 6%)} .side-nav .who{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);line-height:1.5} .side-nav .who b{color:var(--text);display:block;font-size:.9rem} .side-nav .who a{display:inline;padding:0;color:var(--muted);text-decoration:underline} } @media (max-width:979px){ .side-nav{display:none} } /* Нижнее меню (мобильные): то же, что на странице расходов, — стеклянная плашка с крупными иконками. Разметку добавляет mountBottomNav() из app.js, поэтому страницам достаточно подключить ui.css + app.js. */ .bottom-nav{ position:fixed;z-index:90;left:12px;right:12px; bottom:max(10px,env(safe-area-inset-bottom)); min-height:66px;display:flex;padding:5px; border:1px solid var(--line);border-radius:20px; background:rgba(255,255,255,.90);backdrop-filter:blur(20px); box-shadow:0 14px 40px rgba(15,28,46,.14); } .bottom-nav a{ flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:1px;border-radius:15px;color:var(--muted); text-decoration:none;font-weight:800;font-size:22px;line-height:1.15; } .bottom-nav a span{ font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .bottom-nav a.active{color:#4c3fd0;background:rgba(124,109,242,.12)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bottom-nav{ background:rgba(12,19,45,.88);border-color:rgba(112,120,218,.2); box-shadow:0 14px 50px rgba(0,0,0,.4); } :root:not([data-theme="light"]) .bottom-nav a.active{ color:#dedaff;background:linear-gradient(145deg,rgba(124,109,242,.3),rgba(101,126,234,.16)); } } :root[data-theme="dark"] .bottom-nav{ background:rgba(12,19,45,.88);border-color:rgba(112,120,218,.2); box-shadow:0 14px 50px rgba(0,0,0,.4); } :root[data-theme="dark"] .bottom-nav a.active{ color:#dedaff;background:linear-gradient(145deg,rgba(124,109,242,.3),rgba(101,126,234,.16)); } /* На мобильных нижнее меню заменяет верхние пилюли; контенту — запас снизу. */ @media (max-width:979px){ .nav{display:none} body{padding-bottom:calc(88px + env(safe-area-inset-bottom))} } @media (min-width:980px){ .bottom-nav{display:none} } /* Тёмная тема: фирменное сине-фиолетовое свечение фона вместо плоского цвета, как на переработанной странице расходов. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body{ background: radial-gradient(1000px 620px at 80% -10%, rgba(102,126,234,.20), transparent 62%), linear-gradient(145deg,#101a38,#0a122a 70%); } } :root[data-theme="dark"] body{ background: radial-gradient(1000px 620px at 80% -10%, rgba(102,126,234,.20), transparent 62%), linear-gradient(145deg,#101a38,#0a122a 70%); }