:root{
  --bg:#eef1f6; --ink:#1c2430; --muted:#657084; --line:#e3e8ef;
  --brand:#2f6fed; --brand-ink:#1e4fb8;
  --green:#1a9e5f; --yellow:#d9990a; --red:#d6473f; --gray:#aab3c0;
  --radius:18px; --shadow:0 1px 2px rgba(20,30,50,.05),0 8px 24px rgba(20,30,50,.06);
}
*{box-sizing:border-box}
/* атрибут hidden должен реально прятать даже элементы с display:block (напр. .btn.big) */
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:400 18px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
/* на всю ширину экрана; блоки 1-2-3-4 друг под другом (одна колонка) */
.wrap{width:100%; margin:0 auto; padding:22px clamp(12px,3vw,40px) 56px}
.top{max-width:920px; margin:0 auto}
.grid{max-width:920px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
.grid .card{margin:0}
.foot{max-width:920px; margin:16px auto 0}
.top h1{font-size:32px; margin:6px 0 6px; letter-spacing:-.02em}
.sub{color:var(--muted); margin:0 0 20px; font-size:17px}
h2{font-size:22px; margin:0; letter-spacing:-.01em}
h3{font-size:17px; margin:16px 0 6px}

/* Карточки-секции с разными подложками */
.card{border-radius:var(--radius); padding:20px; margin:0 0 18px; box-shadow:var(--shadow); border:1px solid var(--line)}
.s1{background:linear-gradient(160deg,#e9f9f0,#dff3ff); border-color:#c7ecd8}
.s2{background:linear-gradient(160deg,#eef4ff,#f6f9ff); border-color:#d5e3ff}
.s3{background:linear-gradient(160deg,#f4f0ff,#fbf6ff); border-color:#e3d9fb}
.s4{background:linear-gradient(160deg,#fff7e9,#fffdf6); border-color:#f6e6c2}
.s4b{background:#fff; border-color:var(--line)}

.head{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.num{flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:19px; color:#fff; background:var(--brand)}
.s1 .num{background:#1a9e5f} .s2 .num{background:#2f6fed} .s3 .num{background:#7a4fe0} .s4 .num{background:#d9990a}

.muted{color:var(--muted)} .small{font-size:15px}

/* Секция 1 */
.steps{margin:8px 0; padding-left:22px}
.steps li{margin:6px 0}
.btn{display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  padding:12px 18px; border-radius:12px; font:inherit; font-size:17px; font-weight:600}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.s1 .btn.primary{background:#1a9e5f; border-color:#1a9e5f}
.btn.big{display:block; width:100%; font-size:18px; padding:15px}
.btn:active{filter:brightness(.95)}
.btn:disabled{opacity:.5; cursor:default}

/* Вердикт */
.verdict{display:flex; gap:16px; align-items:center; background:rgba(255,255,255,.7); border-radius:14px; padding:14px}
.light{flex:0 0 auto; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#e7ecf3}
.light span{width:34px; height:34px; border-radius:50%; background:var(--gray); transition:background .3s}
.verdict.green  .light span{background:var(--green); box-shadow:0 0 0 7px rgba(26,158,95,.15)}
.verdict.yellow .light span{background:var(--yellow); box-shadow:0 0 0 7px rgba(217,153,10,.15)}
.verdict.red    .light span{background:var(--red); box-shadow:0 0 0 7px rgba(214,71,63,.15)}
.verdict.testing .light span{background:var(--brand); animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.vtitle{font-size:21px; font-weight:600}
.vdesc{color:var(--muted); margin-top:2px; font-size:16px}

.fix{margin-top:12px; padding:12px 14px; border-radius:12px; background:#fff4f2; border:1px solid #f6d3cd; font-size:16px}
.fix.warn{background:#fff8e8; border-color:#f2e0af}
.fix.ok{background:#eefaf2; border-color:#c7ecd8}

/* статус вычисления */
.netstatus{display:flex; align-items:center; gap:10px; font-size:17px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.7); margin-bottom:12px}
.netstatus.busy{color:#1e4fb8}
.netstatus.done{color:#0f6d40; background:#eefaf2}
.netstatus.bad{color:#a5322c; background:#fff4f2}
.spin{flex:0 0 auto; width:18px; height:18px; border:3px solid #ccd8f0; border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite}
.netstatus.done .spin,.netstatus.bad .spin{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* 4 отдельных графика пингов (стиль php.spb.ru/ping) */
.pinggraphs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
@media(max-width:560px){ .pinggraphs{grid-template-columns:1fr} }
.pinggraphs .pg{min-width:0}
.pg{background:rgba(255,255,255,.75); border-radius:12px; padding:8px 10px; overflow:hidden}
.pg-head{display:flex; justify-content:space-between; align-items:baseline; gap:2px 8px; flex-wrap:wrap; margin-bottom:4px}
.pg-title{font-weight:600; font-size:15px; min-width:0}
.pg-val{font:600 13px/1.3 ui-monospace,Menlo,Consolas,monospace; margin-left:auto; white-space:nowrap}
.pg-val.bad{color:var(--red)} .pg-val.ok{color:#127a48} .pg-val.warn{color:#8a6207}
.pg-canvas{width:100%; max-width:100%; height:64px; display:block}
.snapnote{margin-top:12px; padding:10px 14px; border-radius:12px; background:#eef4ff; border:1px solid #d5e3ff; color:#1e4fb8; font-size:15px}
#newReportBtn{margin-top:14px}
details.tests{margin-top:12px}
details.tests>summary{cursor:pointer; font-weight:600; color:var(--brand-ink); padding:6px 0}
details.tests[open]>summary{margin-bottom:4px}

/* примитивный график-история за час (spark) в статусе серверов */
.spark{display:inline-flex; gap:2px; align-items:flex-end; height:16px; margin-left:8px}
.spark i{width:3px; border-radius:1px; background:var(--gray)}
.spark i.g{background:var(--green)} .spark i.y{background:var(--yellow)} .spark i.r{background:var(--red)}
.row .right{display:flex; align-items:center; gap:8px; margin-left:auto}

.rowsttl{display:flex; gap:8px; align-items:baseline}
.legend{margin-top:8px}

/* Строки проверок/статуса */
.rows{display:flex; flex-direction:column; background:rgba(255,255,255,.6); border-radius:12px; overflow:hidden}
.row{display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid rgba(0,0,0,.05)}
.row:last-child{border-bottom:0}
.dot{flex:0 0 auto; width:12px; height:12px; border-radius:50%; background:var(--gray)}
.dot.green{background:var(--green)} .dot.yellow{background:var(--yellow)} .dot.red{background:var(--red)}
.dot.wait{background:var(--brand); animation:pulse 1s infinite}
.row .name{flex:1 1 auto}
.row .grp{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:9px 12px 3px; background:rgba(255,255,255,.4)}
.row .val{color:var(--muted); font-size:15px; text-align:right; white-space:nowrap}
.row .val.ok{color:#127a48} .row .val.bad{color:#a5322c}

.pill{font-size:14px; padding:3px 11px; border-radius:999px; background:#fff; color:var(--muted); margin-left:auto}
.pill.green{background:rgba(26,158,95,.16); color:#0f6d40}
.pill.yellow{background:rgba(217,153,10,.18); color:#8a6207}
.pill.red{background:rgba(214,71,63,.16); color:#a5322c}

/* Форма: группы чекбоксов */
.grp-title{font-weight:700; font-size:16px; margin:16px 0 8px}
.grp-title .muted{font-weight:400}
.req{color:#c0392b; font-weight:600}
.checks{display:flex; flex-direction:column; gap:2px}
.chk{display:flex; align-items:flex-start; gap:10px; padding:9px 8px; border-radius:10px; cursor:pointer; font-size:16px; line-height:1.35}
.chk:hover{background:rgba(255,255,255,.5)}
.chk input{flex:0 0 auto; width:22px; height:22px; margin:0; accent-color:var(--brand); cursor:pointer}
.chk span{flex:1 1 auto}
.chk:has(input:checked){background:rgba(47,111,237,.10)}
.chk:has(input:checked) span{font-weight:600}

/* Форма */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.chip{border:1.5px solid #ecdcb6; background:#fff; border-radius:999px; padding:10px 15px; font-size:16px; cursor:pointer; user-select:none}
.chip:hover{border-color:#e0c98a}
.chip.on{border-color:#d9990a; background:#fff2d6; color:#8a6207; font-weight:600}
textarea,input[type=text]{width:100%; margin:8px 0; padding:13px 15px; font:inherit; font-size:16px;
  border:1.5px solid #eadfc6; border-radius:12px; background:#fff; color:var(--ink)}
textarea:focus,input:focus{outline:none; border-color:#d9990a}
.sendmsg{margin-top:10px; font-size:16px}
.sendmsg.ok{color:#0f6d40} .sendmsg.err{color:#a5322c}

/* Раскрытые «скрытые» поля */
.reveal{margin-top:16px; border-top:1px dashed #e6d6ae; padding-top:12px}
.reveal summary{cursor:pointer; font-weight:600; color:#8a6207}
/* простой единый текстовый кусок, шрифт чуть меньше стандартного, разделы через 2 пустые строки */
.reveal-body{margin:10px 0 0; font-size:15px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
  color:var(--muted); font-family:inherit}

.foot{text-align:center; margin-top:8px}
a{color:var(--brand-ink)}

/* Скромная история обращений (сверху) */
.history{max-width:920px; margin:0 auto 14px; padding:10px 14px; background:#fff; border:1px solid var(--line); border-radius:12px}
.hist-title{font-size:14px; font-weight:600; color:var(--muted); margin-bottom:2px}
.hist-row{display:flex; gap:10px; align-items:baseline; padding:7px 4px; border-top:1px solid var(--line); text-decoration:none; color:var(--ink)}
.hist-row:first-of-type{border-top:0}
.hist-row:hover{background:#f5f8fc}
.hist-id{flex:0 0 auto; font:600 13px/1.3 ui-monospace,Menlo,Consolas,monospace; color:var(--brand-ink)}
.hist-txt{flex:1 1 auto; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hist-when{flex:0 0 auto; color:var(--muted); font-size:13px}

/* Карточка одного баг-репорта (страница ?r=) */
.reportview{max-width:720px; margin:0 auto}
.rv-title{font-size:23px; line-height:1.25; margin:0 0 6px; color:#0f6d40}
.rv-block{margin:14px 0}
.rv-block>b{display:block; margin-bottom:4px}
.rv-list{margin:4px 0; padding-left:22px}
.rv-list li{margin:3px 0}
.rv-kv{margin:4px 0}
.rv-net{margin-top:6px; background:rgba(0,0,0,.02); border:1px solid var(--line); border-radius:10px; padding:8px 10px}
.rv-net-verdict{font-weight:600; margin-bottom:6px}
.rv-ping{display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:14px}
.rv-ping .ok{color:#127a48} .rv-ping .bad{color:var(--red)}
.rv-back{margin-top:18px}

/* Предупреждение о повторной отправке */
.warn{margin-bottom:12px; padding:12px 14px; border-radius:12px; background:#fff3f0; border:1px solid #f3c9c0; color:#a5322c; font-size:16px}

/* Метки полей формы */
.fld-label{display:block; margin-top:14px; font-weight:600; font-size:16px}
.fld-label .req{color:#c0392b}
.nomargin{margin:2px 0 0}
input.miss{border-color:#c0392b; background:#fff6f4}

/* ─────────── МОБИЛЬНАЯ ВЕРСТКА: компактнее, мельче ─────────── */
@media (max-width:640px){
  body{font-size:15px; line-height:1.45}
  .wrap{padding:12px 10px 36px}
  .top h1{font-size:22px; margin:4px 0 4px}
  .sub{font-size:14px; margin-bottom:14px}
  h2{font-size:18px}
  h3{font-size:15px}
  .grid{gap:12px}
  .card{padding:13px; border-radius:14px; margin:0}
  .head{gap:9px; margin-bottom:8px}
  .num{width:26px; height:26px; font-size:15px}
  .btn{font-size:15px; padding:11px 14px}
  .btn.big{font-size:16px; padding:13px}
  .steps{padding-left:20px}
  .steps li{margin:5px 0}

  /* блок 2 */
  .netstatus{font-size:15px; padding:8px 10px; gap:8px}
  .fix{font-size:14px; padding:9px 11px; margin-top:10px}
  .pinggraphs{gap:8px; margin-top:10px}
  .pg{padding:6px 8px}
  .pg-title{font-size:13px}
  .pg-val{font-size:11.5px}
  .pg-canvas{height:48px}
  .verdict,.snapnote{font-size:14px}

  /* блок 3 */
  .row{padding:9px 8px}
  .row .val{font-size:13px}

  /* форма */
  .grp-title{font-size:15px; margin:12px 0 6px}
  .checks{gap:0}
  .chk{font-size:14px; padding:6px 4px; gap:9px; line-height:1.3}
  .chk input{width:19px; height:19px}
  .fld-label{font-size:14px; margin-top:12px}
  textarea,input[type=text]{font-size:15px; padding:10px 12px}  /* 15px чтоб iOS не зумил */
  .warn,.sendmsg{font-size:14px}
  .reveal summary,.reveal-body{font-size:13px}

  /* баннер обращений */
  .topbanner{padding:12px 13px; margin-bottom:12px}
  .tb-title{font-size:16px}
  .tb-row{padding:8px 4px}
  .tb-id{font-size:12px}
  .tb-when{font-size:12px}
}