:root{
  --bg:#f8fafc; --text:#0f172a; --muted:#64748b; --card:#ffffff;
  --border:#e2e8f0; --accent:#0ea5e9; --green:#0b5;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Helvetica,Arial,sans-serif; }
.container{ max-width:1280px; margin:0 auto; padding:16px; }
.header-sub{ margin-top:4px; color:var(--muted); font-size:12px; }
.muted{ color:var(--muted); } .small{ font-size:12px; }
.red{ color:#dc2626; font-weight:700; } .mass{ font-weight:800; color:var(--green); }
.label-text.nowrap{ white-space:nowrap; }

.header-bar{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title lang"
    "meta  lang";
  align-items:center;
  gap:10px 16px;
}
.app-title{ grid-area:title; margin:16px 0 0; }
.lang-switch{ grid-area:lang; display:flex; align-items:center; gap:8px; }
.header-meta{ grid-area:meta; }
.lang-switch select{ padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; }

.grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:16px; }
@media (max-width:1100px){ .grid{ grid-template-columns:1fr; } }

.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }

label{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
input,select{ padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff; }

h1{ font-size:28px; margin:0; } h2{ font-size:20px; margin:0 0 12px; }

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:8px; }
@media (max-width:900px){ .kpis{ grid-template-columns:1fr 1fr; } }
.kpi{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; }
.kpi-label{ font-size:12px; color:var(--muted); } .kpi-value{ font-size:22px; font-weight:700; }

.hint{ margin-top:10px; padding:10px; border-radius:10px; background:#fff; border:1px solid var(--border);
  font-size:12px; color:#334155; }
.field-hint{ margin-top:6px; color:#475569; }

.table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border);
  border-radius:12px; overflow:hidden; margin-bottom:16px; }
.table th,.table td{ border-bottom:1px solid var(--border); padding:8px 10px; text-align:center; font-size:14px;
  vertical-align:middle; white-space:nowrap; font-variant-numeric:tabular-nums; }
.table thead th{ background:#f1f5f9; font-weight:700; }

.actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.btn{ background:var(--accent); color:#fff; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; }
.btn.outline{ background:#fff; color:#0f172a; border:1px solid var(--border); }

.summary{ display:grid; gap:8px; }
.sumrow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  border:1px solid var(--border); border-radius:10px; padding:10px; background:#fff; }
.badge{ border-radius:999px; padding:2px 8px; border:1px solid var(--border); font-size:12px; }

.title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

input:focus, select:focus, .btn:focus{ outline:2px solid rgba(14,165,233,.4); outline-offset:2px; }

@media (max-width: 720px){
  .header-bar{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lang"
      "meta";
    align-items:flex-start;
  }
  .lang-switch{ justify-content:flex-start; }
}