:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --ink: #1f2933;
  --muted: #667085;
  --line: #d8dee6;
  --panel: #ffffff;
  --accent: #176b87;
  --accent-strong: #0f4f64;
  --good: #13795b;
  --bad: #b42318;
  --soft: #eef7f9;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { min-height: 36px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; padding: 0 14px; white-space: nowrap; }
button:hover { background: var(--accent-strong); }
button:disabled { cursor: not-allowed; opacity: .52; }
input, select { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); padding: 7px 9px; width: 100%; }
input:focus, select:focus { border-color: var(--accent); outline: 2px solid rgba(23,107,135,.14); }
h1, h2, p { margin: 0; }
h1 { font-size: 23px; }
h2 { font-size: 17px; }
label { color: var(--muted); display: grid; gap: 6px; font-size: 13px; }

.login-view { align-items: center; background: linear-gradient(135deg, #eef7f9, #f8fafc); display: grid; min-height: 100vh; padding: 20px; place-items: center; }
.login-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 45px rgba(31,41,51,.10); display: grid; gap: 14px; padding: 28px; width: min(420px, 100%); }
.login-panel p { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.login-error { color: var(--bad); font-size: 13px; min-height: 18px; }
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.sidebar p { color: var(--muted); font-size: 12px; margin-top: 6px; word-break: break-word; }
.nav { display: grid; gap: 8px; }
.nav-btn { background: transparent; color: var(--ink); justify-content: flex-start; text-align: left; }
.nav-btn.active, .nav-btn:hover { background: var(--soft); color: var(--accent-strong); }
.content { min-width: 0; padding: 18px; }
.topbar { align-items: end; display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.filters { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; }
.filters label { min-width: 150px; }
.userbar { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.userbar button { background: #e8eef2; color: var(--ink); }
.view { display: none; }
.view.active { display: block; }

.metrics { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.metrics article, .panel, .table-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.metrics article { padding: 16px; }
.metrics span { color: var(--muted); display: block; font-size: 13px; }
.metrics strong { display: block; font-size: 27px; margin-top: 6px; }

.dashboard { align-items: stretch; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.dashboard .table-panel { min-width: 0; }
.algorithm-panel { grid-column: span 2; }
.chart-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.chart-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-height: 300px; }
.wide-chart { grid-column: span 2; }
.chart-box { min-height: 238px; }
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-axis { stroke: #d8dee6; stroke-width: 1; }
.chart-grid-line { stroke: #edf1f5; stroke-width: 1; }
.chart-label { fill: var(--muted); font-size: 11px; }
.chart-value { fill: var(--ink); font-size: 12px; font-weight: 650; }
.chart-bar { fill: var(--accent); cursor: pointer; transition: opacity .15s ease; }
.chart-bar:hover { opacity: .78; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 3; }
.chart-dot { fill: var(--accent-strong); }
.chart-empty { color: var(--muted); display: grid; place-items: center; min-height: 220px; }
.rank-list { display: grid; gap: 12px; padding-top: 4px; }
.rank-row { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); display: grid; gap: 10px; min-height: 58px; padding: 10px 12px; text-align: left; width: 100%; }
.rank-row:hover { background: var(--soft); }
.rank-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; min-width: 0; }
.rank-name { align-items: center; display: inline-flex; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name b { background: var(--accent); border-radius: 999px; color: #fff; display: inline-grid; flex: 0 0 26px; font-size: 13px; height: 26px; place-items: center; width: 26px; }
.rank-head strong { flex: 0 0 auto; font-size: 17px; }
.rank-track { background: #e8eef2; border-radius: 999px; display: block; height: 10px; overflow: hidden; }
.rank-track i { border-radius: inherit; display: block; height: 100%; min-width: 4px; }
.rank-positive { color: var(--good); }
.rank-negative { color: var(--bad); }
.rank-track .rank-positive { background: var(--accent); }
.rank-track .rank-negative { background: var(--bad); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.legend span { align-items: center; color: var(--muted); display: inline-flex; font-size: 12px; gap: 6px; }
.legend i { border-radius: 3px; display: inline-block; height: 10px; width: 10px; }
.hint { color: var(--muted); font-size: 12px; }
.workspace { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 340px; }
.shop-workspace { grid-template-columns: 1fr; }
.config-workspace { grid-template-columns: 1fr; }
.permission-workspace { grid-template-columns: 1fr; }
.side-stack { display: grid; gap: 14px; }
.shop-form-fields { display: grid; gap: 12px; }
.config-form-fields { display: grid; gap: 12px; }
.user-form-fields { display: grid; gap: 12px; }
.panel, .table-panel { padding: 16px; }
.panel-title { align-items: center; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.entry-modal { align-items: center; background: rgba(15, 23, 42, .42); inset: 0; display: grid; padding: 22px; place-items: center; position: fixed; z-index: 40; }
.entry-modal-dialog { max-height: min(88vh, 900px); overflow: auto; position: relative; width: min(1280px, 100%); }
.modal-close-btn { align-items: center; background: #e8eef2; border: 1px solid var(--line); color: var(--ink); display: inline-grid; font-size: 22px; height: 36px; justify-content: center; line-height: 1; min-height: 36px; padding: 0; position: absolute; right: 10px; top: 10px; width: 36px; z-index: 2; }
.modal-close-btn:hover { background: var(--soft); color: var(--accent-strong); }
.entry-modal .panel:first-of-type { padding-top: 18px; }
.form-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wide { grid-column: span 4; }
.compact { display: grid; gap: 12px; }
.calc-strip { background: var(--soft); border: 1px solid #cae4ea; border-radius: 8px; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0; padding: 12px; }
.config-hint { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; margin-top: 12px; padding: 10px 12px; }
.formula-note { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; margin: -2px 0 12px; padding: 9px 12px; }
.permission-checks { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; padding: 10px; }
.permission-checks label { align-items: center; display: flex; flex-direction: row; gap: 8px; }
.permission-checks input { min-height: auto; width: auto; }
.calc-strip span { color: var(--muted); display: block; font-size: 12px; }
.calc-strip b { display: block; font-size: 18px; margin-top: 4px; }
.actions, .tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-title .actions { align-items: center; }
.panel-title .actions label { align-items: center; display: flex; flex-direction: row; gap: 6px; white-space: nowrap; }
.panel-title .actions select { width: 96px; }
.tabs { margin-bottom: 14px; }
.tabs button, .row-actions button, #resetFormBtn, #calcBtn, #hideEntryFormBtn { background: #e8eef2; color: var(--ink); }
.dashboard-more-row { display: flex; justify-content: center; margin-top: 12px; }
.more-btn { background: #e8eef2; color: var(--ink); min-width: 88px; }
.more-btn:hover { background: var(--soft); color: var(--accent-strong); }
.tabs button.active { background: var(--accent); color: #fff; }
.tables { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); margin-top: 14px; }
.tables.single { grid-template-columns: 1fr; margin-top: 0; }
.list-stack { gap: 14px; }
.table-wrap { overflow: auto; }
.dashboard-table { max-height: 320px; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); font-size: 13px; padding: 10px 8px; text-align: right; white-space: nowrap; }
.dashboard th, .dashboard td { font-size: 13px; padding: 11px 10px; }
.dashboard .table-wrap { overflow-x: auto; }
th { color: var(--muted); font-weight: 650; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2), th:nth-child(3), td:nth-child(3) { text-align: left; }
tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-actions button { min-height: 30px; padding: 0 10px; }
.row-actions .danger-btn { background: #fff1f0; color: var(--bad); }
.row-actions .danger-btn:hover:not(:disabled) { background: #ffe4e0; }
.shop-table { min-width: 760px; }
.pager { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.pager label { align-items: center; display: flex; flex-direction: row; gap: 6px; }
.pager input { width: 78px; }
.pager select { width: 82px; }
.pager button { min-height: 32px; padding: 0 10px; }
.profit-positive { color: var(--good); font-weight: 700; }
.profit-negative { color: var(--bad); font-weight: 700; }
.mode-hidden { display: none; }
.config-input { min-width: 76px; width: 100%; }
.config-date-input { min-width: 132px; }
#configBody td { vertical-align: middle; }

@media (max-width: 1120px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { height: auto; position: static; }
  .nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dashboard, .chart-grid, .workspace, .tables, .config-workspace { grid-template-columns: 1fr; }
  .wide-chart { grid-column: span 1; }
  .algorithm-panel { grid-column: span 1; }
}

@media (max-width: 720px) {
  .content { padding: 12px; }
  .filters, .topbar { display: grid; grid-template-columns: 1fr; }
  .metrics, .form-grid, .calc-strip, .nav { grid-template-columns: 1fr; }
  .wide { grid-column: span 1; }
}