*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:-apple-system,system-ui,sans-serif;color:#222;line-height:1.45;padding:.6em}

h1{font-size:1.1rem;font-weight:600;margin:.5em 0}
h2{font-size:1rem;font-weight:600;color:#333;margin:1.2em 0 .4em;
  border-bottom:1px solid #ccc;padding-bottom:.2em}
h3{font-size:.95rem;font-weight:600;color:#444;margin:.8em 0 .3em}

/* Карти: само граници, без заобляния */
.card{border:1px solid #ccc;padding:.7em;margin:.4em 0;background:#fff}
.dev-card{border-left:3px solid #2c5f7c}

/* Редове — на мобилно stacked (label отгоре, val отдолу); на wide in-line */
.row{margin:.4em 0;font-size:.95rem}
.row .label{display:block;color:#666;font-size:.8rem;text-transform:uppercase;letter-spacing:.02em}
.row .val{display:block;color:#222;word-break:break-word}
@media (min-width:540px){
  .row{display:flex;justify-content:space-between;align-items:baseline;gap:.6em}
  .row .label{display:inline;color:#666;font-size:.9rem;text-transform:none;letter-spacing:0}
  .row .val{display:inline;text-align:right}
}

/* Бутони — touch-friendly (min 44px wide/tall) */
.btn{display:inline-block;background:#e9ecef;color:#222;border:1px solid #adb5bd;
  padding:.55em 1em;font-size:.95rem;text-decoration:none;font-family:inherit;
  min-height:2.6em;cursor:pointer;margin:.15em}
.btn:hover{background:#dee2e6}
.btn:active{background:#ced4da}
.btn.green{background:#2c5f7c;color:#fff;border-color:#2c5f7c}
.btn.green:hover{background:#234a63}
.btn.red{background:#c62828;color:#fff;border-color:#c62828}
.btn.red:hover{background:#a11f1f}
.btn.orange{background:#e67e22;color:#fff;border-color:#e67e22}
.btn.orange:hover{background:#b86518}

/* Форми */
input,select,textarea{padding:.55em;border:1px solid #999;font-size:1rem;width:100%;
  font-family:inherit;background:#fff;color:#222;min-height:2.6em}
input[type=checkbox],input[type=radio]{width:auto;min-height:auto}
label{display:block;margin:.3em 0}

/* Таблици — хоризонтален scroll при нужда */
.tbl-wrap{overflow-x:auto;margin:.4em 0}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{border:1px solid #ccc;padding:.45em .5em;text-align:left;vertical-align:top}
th{background:#f1f3f5;font-weight:600}

/* Preformatted — за debug output */
pre{background:#1a1a1a;color:#ddd;padding:.7em;overflow:auto;font-size:.8rem;
  white-space:pre-wrap;word-break:break-all;max-height:250px;margin:.3em 0;
  font-family:ui-monospace,Menlo,Monaco,Consolas,monospace}

/* Tag chips */
.tag{display:inline-block;padding:.1em .5em;font-size:.75rem;
  background:#e9ecef;color:#495057;border:1px solid #ced4da}
.tag.ok{background:#d4edda;color:#155724;border-color:#b8dfc1}
.tag.err{background:#f8d7da;color:#721c24;border-color:#f5c6cb}
.tag.new{background:#fff3cd;color:#856404;border-color:#ffc107}
.tag.dev{background:#e3edf5;color:#1e3a5c;border-color:#b6cfe4}

.ok{color:#155724}.err{color:#a11f1f}

code{background:#f1f3f5;padding:.1em .3em;font-family:ui-monospace,monospace;font-size:.9em}

details{margin:.4em 0}
summary{cursor:pointer;padding:.5em 0;font-weight:600;color:#333}

footer{margin-top:2em;padding-top:.8em;border-top:1px solid #ccc;
  text-align:center;color:#888;font-size:.85rem;line-height:1.8}
footer a{color:#888}

/* Wide screens — ограничаваме ширината за читимост */
@media (min-width:700px){
  body{max-width:800px;margin:1em auto;padding:1em}
}