/* ============ «Подано заяв» БДМУ — стилі ============ */
/* SHELL: перенесено з frontend/app.css (header/footer/стани/оболонка) */
:root{
  --paper:#f4f1ea;
  --card:#fbf9f4;
  --ink:#15211d;
  --ink-soft:#4a564f;
  --line:#e0d9cb;
  --accent:#0e7c66;       /* смарагд-тіл */
  --accent-deep:#0a5c4c;
  --gold:#b8860b;         /* бурштин — бюджет/рекомендовано */
  --gold-soft:#f5ecd2;
  --blue:#2b5f8a;
  --danger:#9a4a3f;
  --shadow:0 1px 2px rgba(20,32,29,.06),0 8px 30px rgba(20,32,29,.07);
  --radius:16px;
  --maxw:1080px;
  --font-display:"Unbounded",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(14,124,102,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(184,134,11,.07), transparent 55%);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line);background:rgba(251,249,244,.7);backdrop-filter:blur(8px)}
.masthead__inner{max-width:var(--maxw);margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:22px}
.brand{display:flex;flex-direction:row;align-items:center;gap:12px;text-decoration:none;color:var(--accent-deep);flex:none}
.brand__logo{height:46px;width:auto;display:block}
.brand__txt{display:flex;flex-direction:column}
.brand__mark{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:.02em;line-height:1}
.brand__sub{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
@media(max-width:520px){
  .brand__logo{height:36px}
  .brand__mark{font-size:1.2rem}
  .masthead__inner{gap:14px}
}
.masthead__title h1{font-family:var(--font-display);font-weight:600;font-size:1.25rem;margin:0;letter-spacing:-.01em}
.masthead__title p{margin:2px 0 0;font-size:.82rem;color:var(--ink-soft)}

.app{max-width:var(--maxw);margin:0 auto;padding:26px 20px 60px;min-height:50vh}

/* ---------- state / spinner ---------- */
.state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 20px;color:var(--ink-soft)}
.spinner{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state--error{color:var(--danger)}

/* ---------- embed-режим (вбудовано в iframe на сайті) ---------- */
html.embed, html.embed body{background:transparent}
html.embed .masthead, html.embed .foot, html.embed .grain, html.embed .to-top{display:none!important}
html.embed body{min-height:0}
html.embed .app{min-height:0;padding-top:4px}

/* ---------- to-top ---------- */
.to-top{position:fixed;right:18px;bottom:18px;z-index:20;width:46px;height:46px;border-radius:50%;
  border:none;background:var(--accent);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;transform:translateY(10px);transition:.2s}
.to-top.show{opacity:1;transform:none}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:40px}
.foot p{max-width:var(--maxw);margin:0 auto;padding:22px 20px;font-size:.8rem;color:var(--ink-soft)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── «Подано заяв» специфіка ─────────────────────────────────── */
.updated { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1.1rem; }
.updated b { color: var(--ink); font-weight: 700; }
.section { margin: 2rem 0; }
.section__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; margin: 0 0 .9rem;
}

/* KPI-плитки */
.kpis {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
.kpi__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 2rem; line-height: 1.1; color: var(--accent-deep);
}
.kpi__label { color: var(--ink-soft); font-size: .85rem; margin-top: .3rem; }

/* горизонтальні бари */
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem;
  align-items: center; margin: .45rem 0; }
.bar-row__label { font-size: .9rem; }
.bar-row__track { grid-column: 1 / -1; height: 8px; border-radius: 6px;
  background: rgba(20,32,29,.08); overflow: hidden; }
.bar-row__fill { height: 100%; border-radius: 6px;
  background: linear-gradient(90deg,var(--accent-deep),var(--accent)); }
.bar-row__val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* графік динаміки */
.chart { display: block; height: auto; max-width: none; }
.chart__wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 14px 8px; box-shadow: var(--shadow); }
.chart-line { fill: none; stroke: #c2410c; stroke-width: 2; }
.chart-area { fill: rgba(194,65,12,.12); }
.chart-bar { fill: rgba(13,155,108,.55); }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-lbl { font-size: 10px; fill: var(--ink-soft); font-family: var(--font-body); }
.chart-val { font-size: 10px; font-weight: 700; fill: var(--accent-deep);
  font-family: var(--font-body); }

/* таблиця спеціальностей */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td { text-align: left; padding: .5rem .6rem;
  border-bottom: 1px solid var(--line); }
.tbl th { color: var(--ink-soft); font-weight: 600; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.tbl a:hover { text-decoration: underline; }
.tbl tfoot td { font-weight: 700; border-top: 2px solid var(--line);
  border-bottom: none; color: var(--ink); }
.tbl sup.up { color: var(--accent); font-weight: 700; font-size: .68em;
  margin-left: 1px; vertical-align: super; }
.tbl__wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 14px; box-shadow: var(--shadow); }