:root {
      --bg: #eef4f8;
      --panel: #ffffff;
      --text: #14202b;
      --muted: #56687a;
      --border: #cfdbe7;
      --accent: #0a7a66;
      --accent-2: #185089;
      --warn: #92400e;
      --soft: #f8fbff;
    }
    body { margin: 0; font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; background: linear-gradient(180deg, #f4f9ff 0%, var(--bg) 35%); color: var(--text); }
    .wrap { max-width: 1280px; margin: 24px auto 44px; padding: 0 16px; }
    .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 14px; box-shadow: 0 4px 18px rgba(12, 37, 62, 0.04); }
    h1, h2, h3 { margin: 0 0 6px; letter-spacing: .1px; }
    p { margin: 0 0 8px; color: var(--muted); line-height: 1.4; }
    .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:10px; align-items:end; }
    label { display:block; font-size:.8rem; color: var(--muted); margin-bottom:4px; font-weight: 600; }
    input, select, button { width:100%; box-sizing:border-box; border-radius:10px; border:1px solid var(--border); padding:10px 11px; font-size:.92rem; background:#fff; }
    input:focus, select:focus { outline:2px solid #b7d7ff; border-color:#8ab4e1; }
    button { border:none; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; transition: filter .15s ease; }
    button:hover { filter: brightness(1.05); }
    button.secondary { background: var(--accent-2); }
    .stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
    .stat { border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--soft); }
    .stat .k { font-size:1.35rem; font-weight:800; }
    .stat .l { color: var(--muted); font-size:.82rem; }
    table { width:100%; border-collapse:collapse; font-size:.9rem; margin-top:8px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
    th, td { border-bottom:1px solid var(--border); padding:9px 10px; text-align:left; vertical-align:top; }
    th { color:var(--muted); font-weight:700; background:#f6fafe; position:sticky; top:0; }
    tr:nth-child(even) td { background:#fcfeff; }
    a { color:#0b5fb4; text-decoration:none; font-weight:600; }
    a:hover { text-decoration:underline; }
    #statusLine { color: var(--warn); font-weight: 700; }
.hero { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.chip { border:1px solid var(--border); background:var(--soft); color:var(--muted); border-radius:999px; padding:6px 10px; font-size:.78rem; font-weight:700; }
.chip-quiet { background:#fff; }
.status-message { color:#92400e; font-weight:700; margin:6px 0 0; font-size:.8rem; }
.app-nav-panel { padding:10px 12px; }
.app-nav-shell { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.app-nav-main { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; flex:1 1 720px; min-width:0; }
.app-nav-group { display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.app-nav-label { color:var(--muted); font-size:.76rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding-top:7px; }
.app-nav-links { display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0; }
.app-nav-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.app-build-version { font-size:.78rem; color:var(--muted, #56687a); white-space:nowrap; }

@media (max-width: 720px) {
    .wrap { margin:16px auto 28px; padding:0 12px; }
    .panel { border-radius:12px; padding:14px; }
    .app-nav-shell { align-items:stretch; }
    .app-nav-main { flex-direction:column; gap:10px; flex-basis:100%; }
    .app-nav-group { flex-direction:column; gap:6px; align-items:stretch; }
    .app-nav-label { padding-top:0; }
    .app-nav-links { gap:6px; }
    .app-nav-meta { width:100%; justify-content:space-between; }
    .chip { padding:8px 11px; }
}