/* Control centrum — stejný vizuál jako mobile-app (cream + tmavá zelená + serif). */

:root {
  --cream: #F4EEE1;
  --card: #FBF7EC;
  --border: #E3D9C4;
  --green: #1C3B2D;
  --green-soft: #2E5743;
  --ink: #20301F;
  --muted: #8C846E;
  --danger: #A4452F;
  --ok: #3C6E47;
  --radius: 18px;
  --serif: ui-serif, "Iowan Old Style", "Palatino", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 16px; }

.hdr { background: var(--green); color: #F2EAD8; display: flex; align-items: center;
       gap: 1.2rem; padding: .8rem 1.4rem; }
.hdr .logo { height: 44px; }
.hdr-title { font-family: var(--mono); letter-spacing: .14em; font-weight: 700; }
.hdr-meta { margin-left: auto; font-family: var(--mono); font-size: .8rem; opacity: .7; }

#app { max-width: 1080px; margin: 0 auto; padding: 1.2rem 1.4rem 2rem; }
section { margin-top: 1.6rem; }
h2 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .7rem; color: var(--green); }
h2 .sub { font-family: var(--mono); font-size: .75rem; color: var(--muted); letter-spacing: .08em; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
       padding: .9rem 1.1rem; }
.kpi .n { font-family: var(--serif); font-size: 2rem; color: var(--green); }
.kpi .n.bad { color: var(--danger); }
.kpi .l { font-family: var(--mono); font-size: .72rem; color: var(--muted); letter-spacing: .08em;
          text-transform: uppercase; margin-top: .15rem; }

.cards { display: flex; flex-direction: column; gap: .55rem; }
.row { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
       padding: .65rem 1rem; }
.row .top { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.row .name { font-weight: 600; }
.row .nums { margin-left: auto; font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.row .nums b { color: var(--ink); }
.row .nums .bad { color: var(--danger); font-weight: 700; }
.row .nums .money { color: var(--ok); font-weight: 700; }

.bar { height: 9px; background: var(--cream); border: 1px solid var(--border);
       border-radius: 99px; margin-top: .5rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green-soft); border-radius: 99px; }
.bar i.warn { background: var(--danger); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

footer { text-align: center; font-family: var(--mono); font-size: .72rem; color: var(--muted);
         padding: 1rem 1rem 2rem; }
.err { background: #f3ded8; border: 1px solid var(--danger); color: var(--danger);
       border-radius: var(--radius); padding: .8rem 1rem; margin-top: 1rem; font-family: var(--mono); }