:root {
  --bg: #ecebea;
  --surface: #ffffff;
  --surface-soft: #f7f6f5;
  --header: #34312f;
  --text: #272523;
  --muted: #817b76;
  --line: #d8d5d2;
  --accent: #ff4b0b;
  --accent-soft: #fff0e9;
  --green: #24916c;
  --blue: #678caf;
  --shadow: 0 7px 22px rgba(50, 43, 38, .055);
  font-family: "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); }
button, select { font: inherit; }

.brandbar { height: 62px; display: flex; align-items: center; gap: 28px; padding: 0 24px; color: #fff; background: var(--header); border-bottom: 2px solid #625e5a; }
.brand { display: flex; align-items: center; padding-right: 26px; border-right: 1px solid rgba(255,255,255,.18); }
.brand-logo-viewport { width: 220px; height: 54px; display: block; overflow: hidden; }
.brand-logo { width: 335px; max-width: none; height: auto; display: block; transform: translate(-16px, -20px); }
.module { color: #ddd9d6; font-size: 14px; }
.module strong { color: #fff; }

.shell { width: min(1540px, calc(100% - 44px)); margin: 0 auto; padding: 28px 0 22px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--accent); }
h1 { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -.035em; }
.page-header p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.header-actions { display: flex; align-items: stretch; gap: 10px; }
.snapshot { min-width: 170px; display: flex; flex-direction: column; justify-content: center; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.snapshot span { margin-bottom: 2px; color: var(--muted); font-size: 10px; }
.snapshot strong { font-size: 13px; }
.refresh-button { min-width: 178px; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: var(--accent); font-weight: 700; cursor: pointer; }
.refresh-button:hover { background: #e94005; }
.refresh-button:disabled { opacity: .65; cursor: wait; }
.refresh-button.loading .refresh-icon { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.refresh-status { margin: 12px 0 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; }
.refresh-status.success { color: var(--green); border-color: #acd8c8; background: #f2fbf7; }
.refresh-status.error { color: #bc3521; border-color: #efb8ae; background: #fff5f3; }

.filters { position: sticky; top: 8px; z-index: 5; display: grid; grid-template-columns: 170px minmax(220px, 1fr) minmax(170px, .72fr) 110px 140px auto; gap: 10px; align-items: end; margin: 18px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(250,249,248,.95); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.filters label span { display: block; margin: 0 0 5px 2px; color: #706a66; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
select { width: 100%; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: #fff; outline: none; }
select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,75,11,.11); }
.reset-button { height: 42px; padding: 0 17px; border: 1px solid var(--line); border-radius: 8px; color: #5c5753; background: #fff; font-weight: 600; cursor: pointer; }
.reset-button:hover { color: var(--accent); border-color: #f6a384; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.kpi { min-height: 122px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.kpi span { color: var(--muted); font-size: 12px; font-weight: 600; }
.kpi strong { font-size: clamp(32px, 3vw, 46px); line-height: 1; letter-spacing: -.045em; }
.kpi small { color: var(--muted); font-size: 10px; }

.panel { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.panel-heading h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.02em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.chip { flex: 0 0 auto; padding: 6px 9px; border-radius: 99px; color: #6d6762; background: var(--surface-soft); font-size: 10px; }

.chart-panel { margin-bottom: 12px; }
.chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 11px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 2px; }
.legend-plan { background: var(--blue); }
.legend-fact { background: var(--accent); }
.chart-scroll { overflow-x: auto; overflow-y: hidden; padding: 6px 2px 3px; scrollbar-color: #bbb5b0 transparent; }
.monthly-chart { min-height: 300px; display: flex; align-items: flex-end; gap: 12px; padding: 24px 7px 5px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 57px, #eeecea 58px); }
.month-column { width: 54px; min-width: 54px; height: 260px; display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.bars { height: 225px; display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.bar { position: relative; width: 17px; min-height: 1px; border-radius: 4px 4px 1px 1px; transition: height .22s ease; }
.bar-plan { background: var(--blue); }
.bar-fact { background: var(--accent); }
.bar-value { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); color: #77716c; font-size: 8px; white-space: nowrap; }
.month-label { color: var(--muted); font-size: 9px; text-align: center; white-space: nowrap; }
.month-label.current { color: var(--accent); font-weight: 800; }
.chart-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; color: var(--muted); font-size: 10px; }

.audit-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 12px; margin-bottom: 12px; }
.user-list { display: grid; gap: 13px; max-height: 530px; overflow: auto; padding-right: 4px; }
.user-row { display: grid; grid-template-columns: minmax(160px, 1fr) 1fr 48px; gap: 10px; align-items: center; }
.user-name strong { display: block; font-size: 12px; }
.user-name span { color: var(--muted); font-size: 9px; }
.user-meter { height: 7px; border-radius: 99px; overflow: hidden; background: #e6e3e0; }
.user-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.user-count { color: var(--accent); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.table-wrap { overflow: auto; }
.events-wrap { max-height: 530px; }
.projects-wrap { max-height: 520px; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { position: sticky; top: 0; z-index: 2; padding: 10px 8px; border-bottom: 1px solid var(--line); color: #746d68; background: #f7f6f5; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
th[data-sort] { cursor: pointer; }
td { padding: 10px 8px; border-bottom: 1px solid #ece9e7; vertical-align: top; }
tbody tr:hover { background: #fff8f5; }
.number { text-align: right; font-variant-numeric: tabular-nums; }
.project-cell strong, .event-cell strong { display: block; font-size: 12px; }
.project-cell span, .event-cell span, .date-cell span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.change-number { color: var(--accent); font-weight: 800; }
.date-old { color: #8b817b; text-decoration: line-through; }
.date-new { color: var(--text); font-weight: 700; }
.empty { padding: 32px; color: var(--muted); text-align: center; }
.projects-panel { margin-bottom: 0; }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 4px 0; color: var(--muted); font-size: 10px; }

@media (max-width: 1080px) {
  .filters { grid-template-columns: 1fr 1fr 1fr; }
  .reset-button { grid-column: 3; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .audit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .brandbar { height: auto; min-height: 62px; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .brand { border-right: 0; padding-right: 0; }
  .module { width: 100%; font-size: 12px; }
  .shell { width: min(100% - 20px, 1540px); padding-top: 20px; }
  .page-header { align-items: stretch; flex-direction: column; }
  .header-actions { flex-direction: column; }
  .refresh-button { min-height: 44px; }
  .filters { position: static; grid-template-columns: 1fr 1fr; }
  .project-filter, .house-filter { grid-column: 1 / -1; }
  .reset-button { grid-column: 1 / -1; }
  .kpis { grid-template-columns: 1fr 1fr; }
  footer { flex-direction: column; }
}
@media (max-width: 470px) { .kpis, .filters { grid-template-columns: 1fr; } .project-filter, .house-filter, .reset-button { grid-column: auto; } }