:root { --bg:#f2efe7; --surface:#fffdf8; --surface-2:#eae5db; --text:#272522; --muted:#766f67; --line:#ddd6ca; --accent:#dc143c; --accent-soft:#fbe2e7; --positive:#1d7f5a; --negative:#b4233f; --shadow:0 16px 50px rgba(61,49,37,.08); --radius:20px; --sidebar:248px; font-family:Inter,system-ui,sans-serif; }
html[data-theme="dark"] { --bg:#1e1c1a; --surface:#292623; --surface-2:#35302d; --text:#fbf8f0; --muted:#b4aba0; --line:#4b443d; --accent:#ef4564; --accent-soft:#51222d; --shadow:0 16px 50px rgba(0,0,0,.24); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; } button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent); outline-offset:2px; }
.layout { min-height:100vh; display:flex; } .sidebar { width:var(--sidebar); background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:24px 16px; position:fixed; inset:0 auto 0 0; z-index:10; } .sidebar-brand { display:flex; gap:11px; align-items:center; padding:4px 10px 30px; } .sidebar-brand strong { display:block; font-size:15px; letter-spacing:-.02em; } .sidebar-brand span { display:block; color:var(--muted); font-size:11px; margin-top:2px; }.brand-mark { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--accent); color:#fff; font-weight:800; font-size:23px; box-shadow:0 8px 22px rgba(220,20,60,.2); }.brand-mark.small { width:32px; height:32px; border-radius:10px; font-size:16px; }
.nav-label { color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.14em; margin:16px 10px 7px; }.nav-item { width:100%; text-align:left; display:flex; align-items:center; gap:11px; border:0; background:transparent; color:var(--muted); padding:11px 12px; border-radius:12px; margin:2px 0; transition:background .18s,color .18s,transform .18s; }.nav-item:hover { color:var(--text); background:var(--surface-2); }.nav-item.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }.icon { width:20px; text-align:center; font-size:17px; }.sidebar-footer { margin-top:auto; padding:16px 8px 0; border-top:1px solid var(--line); }.live-badge { color:var(--muted); font-size:11px; display:flex; gap:7px; align-items:center; margin-bottom:12px; }.status-dot { width:7px; height:7px; border-radius:50%; background:var(--positive); display:inline-block; box-shadow:0 0 0 4px color-mix(in srgb,var(--positive) 12%,transparent); }.logout { border:0; background:transparent; color:var(--muted); padding:8px 0; font-size:12px; }.logout:hover { color:var(--accent); }
.main { margin-left:var(--sidebar); width:calc(100% - var(--sidebar)); min-width:0; }.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px clamp(20px,4vw,56px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 90%,transparent); position:sticky; top:0; z-index:5; backdrop-filter:blur(14px); }.topbar h1 { margin:0; font-size:22px; letter-spacing:-.04em; }.eyebrow { color:var(--accent); font-size:10px; letter-spacing:.16em; font-weight:700; margin:0 0 3px; }.top-actions { display:flex; align-items:center; gap:9px; }.top-actions select,.search { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 11px; }.icon-button { min-width:42px; min-height:42px; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:12px; }.topbar > .icon-button { display:none; }.content { padding:34px clamp(20px,4vw,56px) 60px; max-width:1500px; margin:auto; }.hidden { display:none!important; }.section-head,.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }.section-head { margin-bottom:24px; }.section-head h2,.panel h3 { margin:0; letter-spacing:-.035em; }.section-head h2 { font-size:24px; }.muted { color:var(--muted); margin:4px 0 0; }.periods { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }.periods button { border:0; background:transparent; color:var(--muted); border-radius:8px; padding:7px 10px; font-size:12px; }.periods button:hover,.periods button.selected { background:var(--accent-soft); color:var(--accent); font-weight:600; }.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.stat-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.stat-card { padding:21px 22px; min-height:142px; }.stat-card.accent { background:var(--accent); border-color:var(--accent); color:#fff; }.stat-top { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }.accent .stat-top,.accent small { color:rgba(255,255,255,.78); }.stat-icon { font-weight:700; }.stat-card strong { display:block; font-size:31px; line-height:1.2; margin:22px 0 7px; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }.stat-card small { color:var(--muted); }.notice { margin:18px 0 0; padding:13px 16px; border-radius:13px; color:#895900; background:#fff1cc; border:1px solid #f0d48a; }.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,.8fr); gap:16px; margin-top:16px; }.bottom-grid { grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr); }.panel { padding:22px; min-width:0; }.panel h3 { font-size:16px; }.panel-head { margin-bottom:18px; }.text-button { border:0; background:transparent; color:var(--accent); font-weight:600; font-size:12px; padding:7px 0; }.chart-wrap { height:280px; position:relative; }.chart-wrap canvas { max-width:100%; }.panel-foot { color:var(--muted); font-size:11px; border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }.rate-list { display:grid; gap:10px; }.rate-row,.metric-line { display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }.rate-row:last-child,.metric-line:last-child { border-bottom:0; }.rate-row span,.metric-line span { color:var(--muted); }.rate-row strong,.metric-line strong { font-variant-numeric:tabular-nums; }.table-scroll { overflow-x:auto; }.table-scroll table { width:100%; border-collapse:collapse; min-width:620px; }.table-scroll th { color:var(--muted); font-weight:500; text-align:left; font-size:11px; white-space:nowrap; padding:8px 10px 12px; }.table-scroll td { padding:13px 10px; border-top:1px solid var(--line); vertical-align:middle; }.table-scroll tr:hover td { background:color-mix(in srgb,var(--accent-soft) 35%,transparent); }.table-scroll td:first-child,.table-scroll th:first-child { padding-left:0; }.table-scroll td:last-child,.table-scroll th:last-child { padding-right:0; }.empty { text-align:center; color:var(--muted); padding:34px!important; }.product-list { display:grid; gap:0; }.product-row { display:flex; justify-content:space-between; gap:15px; padding:14px 0; border-bottom:1px solid var(--line); }.product-row:last-child { border-bottom:0; }.product-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }.product-row small { color:var(--muted); }.product-value { text-align:right; font-weight:600; white-space:nowrap; }.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:11px; }.badge.ok { background:#dff3e9; color:var(--positive); }.badge.warn { background:#fff1cc; color:#895900; }.info-panel p,.settings-panel p { color:var(--muted); margin:12px 0 18px; }.metric-line { min-height:43px; align-items:center; }.button { border:0; border-radius:11px; padding:10px 14px; font-weight:600; }.button.secondary { background:var(--surface); color:var(--accent); border:1px solid var(--line); }.search { min-width:245px; }.empty-state { min-height:240px; display:grid; place-content:center; text-align:center; }.empty-state h3 { margin-top:9px; }.empty-state p { color:var(--muted); max-width:430px; }.empty-icon { color:var(--accent); font-size:33px; }.skeleton { height:42px; border-radius:10px; background:linear-gradient(90deg,var(--surface-2),var(--bg),var(--surface-2)); background-size:200% 100%; animation:shimmer 1.4s infinite; } @keyframes shimmer { to { background-position:-200% 0; } }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:22px; background:var(--bg); }.auth-card { width:min(100%,420px); text-align:center; padding:42px 34px; border-radius:26px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }.auth-card .brand-mark { margin:0 auto 20px; }.auth-card h1 { margin:0; font-size:25px; letter-spacing:-.05em; }.auth-card .muted { margin:9px auto 28px; max-width:290px; }.telegram-login { min-height:44px; display:grid; place-items:center; }.form-error { color:var(--negative); background:var(--accent-soft); padding:10px 12px; border-radius:10px; font-size:12px; }.auth-note { color:var(--muted); font-size:11px; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:28px; }
.telegram-button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 18px; border-radius:12px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; transition:opacity .18s; }.telegram-button:hover { opacity:.88; }.login-status { margin:12px 0 0; color:var(--muted); font-size:12px; }
.expense-form { display:grid; gap:12px; margin-top:18px; }.expense-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; }.expense-form input { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 11px; }
.table-input { width:100px; max-width:100%; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 8px; }
@media (max-width:1023px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }.sidebar.open { transform:translateX(0); }.main { margin-left:0; width:100%; }.topbar > .icon-button { display:block; }.stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid,.bottom-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .topbar { height:76px; padding:16px 18px; }.topbar h1 { font-size:18px; }.top-actions select { max-width:84px; }.content { padding:24px 16px 45px; }.section-head { display:block; }.section-head h2 { font-size:22px; }.periods { margin-top:16px; width:max-content; max-width:100%; overflow:auto; }.periods button { padding:7px 8px; }.stat-grid { gap:10px; }.stat-card { padding:16px; min-height:126px; }.stat-card strong { font-size:23px; margin:16px 0 5px; }.panel { padding:17px; border-radius:16px; }.chart-wrap { height:220px; }.search { width:100%; margin-top:14px; }.section-head .search { display:block; }.topbar .eyebrow { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
/* Crisp vector icon system */
.icon { width:20px; height:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center; color:currentColor; }
.icon svg { width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.stat-icon { width:22px; height:22px; }
.empty-icon { width:32px; height:32px; }
/* Analytics and catalog controls */
.date-filter { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.date-filter input { min-height:34px; border:1px solid var(--line); border-radius:9px; padding:0 8px; background:var(--surface); color:var(--text); }
.hourly-panel { margin-top:20px; }
.catalog-tree { display:grid; gap:12px; margin-bottom:18px; }
.catalog-group { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:15px 16px; }
.catalog-title { display:flex; align-items:center; gap:9px; font-weight:700; color:var(--text); }
.catalog-title small { color:var(--muted); font-weight:400; }
.catalog-subcats { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; padding-left:29px; }
.catalog-chip { border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--text); padding:8px 12px; cursor:pointer; }
.catalog-chip:hover,.catalog-chip:focus-visible { border-color:var(--accent); color:var(--accent); }
.section-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.periods.compact { gap:5px; }
.periods.compact button { padding:7px 9px; font-size:11px; }
.date-control { min-height:32px; border:1px solid var(--line); border-radius:8px; padding:0 7px; background:var(--surface); color:var(--text); }
.save-product { min-width:92px; margin-right:10px; background:var(--accent); color:#fff; border-radius:8px; padding:7px 10px; }
.view-batches { min-width:70px; }
.save-product,.view-batches { display:inline-flex; justify-content:center; align-items:center; min-height:36px; }