:root{
  --bg: var(--tg-theme-bg-color, #f4f6fb);
  --card: var(--tg-theme-secondary-bg-color, rgba(255,255,255,.78));
  --ink: var(--tg-theme-text-color, #0b1220);
  --muted: var(--tg-theme-hint-color, #445268);
  --border: rgba(0,0,0,.12);
  --a: var(--tg-theme-button-color, #0b5cff);
  --a_text: var(--tg-theme-button-text-color, #ffffff);
  --b: #00b7a8;

  --shadow: 0 14px 50px rgba(11,18,32,.14);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.9}

.bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 16% 10%, rgba(11,92,255,.14), transparent 55%),
    radial-gradient(circle at 86% 20%, rgba(0,183,168,.12), transparent 60%),
    radial-gradient(circle at 60% 90%, rgba(11,92,255,.10), transparent 62%);
}

.wrap{max-width:980px; margin:0 auto; padding:18px 16px 28px}

.top{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:rgba(244,246,251,.72);
  backdrop-filter: blur(10px) saturate(160%);
  border-bottom:1px solid var(--border);
}

.brand{display:flex; align-items:center; gap:10px}
.brand__mark{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, var(--a), var(--b));
  color:#fff;
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
}
.brand__name{font-weight:800; letter-spacing:.1px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  font-weight:800;
  box-shadow:0 6px 18px rgba(11,18,32,.06);
}
.btn--primary{border-color:transparent; background:linear-gradient(135deg, var(--a), var(--b)); color:var(--a_text); box-shadow:0 16px 38px rgba(11,92,255,.16)}
.btn--ghost{background:rgba(255,255,255,.6)}

.hero{padding:12px 0 4px}
.hero__title{font-size:22px; font-weight:900; letter-spacing:-.3px}
.hero__sub{margin-top:6px; color:var(--muted)}
.status{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.70);
  font-family:var(--mono);
  font-size:12px;
}
.status.is-ok{border-color:rgba(0,183,168,.55)}
.status.is-bad{border-color:rgba(225,29,72,.55)}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}

.card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow);
}
.card--wide{margin-top:12px}

.card__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.card__k{font-family:var(--mono); font-size:12px; color:var(--muted)}
.card__v{margin-top:6px; font-weight:900; letter-spacing:-.2px}

.pill{
  font-family:var(--mono);
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.66);
  color:var(--muted);
}

.rows{margin-top:10px; display:grid; gap:8px}
.row{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:12px}
.row__k{color:var(--muted)}
.row__v{font-weight:700}

.refbox{margin-top:8px}
.refbox__code{
  display:block;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  font-family:var(--mono);
  font-size:12px;
  overflow-wrap:anywhere;
}
.refbox__actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.fine{margin-top:10px; color:var(--muted); font-size:12px}

.seg{
  display:flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.60);
}
.seg__btn{
  border:0;
  padding:8px 12px;
  border-radius:999px;
  font-family:var(--mono);
  font-weight:800;
  cursor:pointer;
  background:transparent;
  color:var(--muted);
}
.seg__btn.is-on{
  background:linear-gradient(135deg, var(--a), var(--b));
  color:#fff;
}

.materials{display:grid; gap:10px; margin-top:12px}
.mat{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.64);
  padding:12px;
}
.mat__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.mat__title{font-weight:900}
.mat__actions{display:flex; gap:8px; flex-wrap:wrap}
.mat__text{
  margin-top:10px;
  width:100%;
  min-height:132px;
  resize:vertical;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.45;
  color:var(--ink);
}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.foot{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.foot__fine{font-family:var(--mono); font-size:12px; color:var(--muted)}
.foot__links{display:flex; gap:12px; font-weight:800}

@media (max-width: 820px){
  .grid{grid-template-columns:1fr}
}
