.health-page { min-height:100vh; padding-bottom:1.2rem; background:linear-gradient(145deg,#edf5f0 0%,#fafaf7 52%,#f5edcf 100%); }
.system-shell { max-width:1420px; margin:0 auto; padding:1rem clamp(1rem,4vw,4rem) 0; }
.system-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding:.25rem 0 .85rem; }
.system-heading h1 { margin:.2rem 0 .25rem; font-size:clamp(2.15rem,4.2vw,4rem); line-height:.92; letter-spacing:-.085em; }.system-heading h1 em { color:var(--orange); font-style:normal; }.system-heading > div:first-child > p:last-child { margin:0; color:var(--muted); font-size:.7rem; }
.health-overall { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.58rem; min-width:300px; padding:.62rem .7rem; border:1px solid #bfd5c5; background:rgba(255,255,255,.84); }.health-overall > span { width:9px; height:9px; border-radius:50%; background:#b48719; box-shadow:0 0 0 4px #f4e6ad; }.health-overall small,.health-overall strong { display:block; }.health-overall small { color:var(--muted); font:500 .48rem "DM Mono",monospace; }.health-overall strong { margin-top:.08rem; font-size:.7rem; }.health-overall button { border:0; padding:.42rem .56rem; background:var(--ink); color:#fff; font-size:.62rem; font-weight:700; cursor:pointer; }.health-overall.is-healthy > span { background:#2f795d; box-shadow:0 0 0 4px #d8ebde; }.health-overall.is-critical > span { background:#c64d3d; box-shadow:0 0 0 4px #f6d8d2; }
.system-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:.8rem; border:1px solid var(--line); background:rgba(255,255,255,.7); }.system-summary > div { display:grid; grid-template-columns:auto 1fr; gap:.02rem .5rem; padding:.62rem .75rem; border-right:1px solid var(--line); }.system-summary > div:last-child { border-right:0; }.system-summary small { grid-column:1/-1; color:#718078; font:600 .48rem "DM Mono",monospace; letter-spacing:.08em; }.system-summary strong { align-self:end; color:var(--ink); font-size:1.25rem; line-height:1; }.system-summary span { align-self:end; color:var(--muted); font-size:.56rem; }
.services-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.42rem; }.services-heading h2 { margin:.14rem 0 0; font-size:1rem; letter-spacing:-.035em; }.services-heading > span { color:var(--muted); font:500 .52rem "DM Mono",monospace; }
.health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }.health-card { --health-color:#b48719; --health-soft:#fff8df; display:flex; flex-direction:column; min-height:196px; padding:.72rem; border-top:3px solid var(--health-color); background:linear-gradient(145deg,#fff 0%,var(--health-soft) 100%); }.health-card.is-healthy { --health-color:#2f795d; --health-soft:#edf7f0; }.health-card.is-critical { --health-color:#c64d3d; --health-soft:#fff0ed; }.health-card header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.4rem; }.health-dot { width:7px; height:7px; border-radius:50%; background:var(--health-color); }.health-card header small { overflow:hidden; color:#64736b; font:600 .49rem "DM Mono",monospace; letter-spacing:.07em; text-overflow:ellipsis; white-space:nowrap; }.health-card header b { padding:.17rem .25rem; background:rgba(255,255,255,.66); color:var(--health-color); font-size:.55rem; }.health-card p { min-height:2.25em; margin:.52rem 0; color:#627168; font-size:.63rem; line-height:1.35; }.health-facts { display:grid; gap:0; margin-top:auto; border-top:1px solid rgba(86,112,97,.15); }.health-facts div { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:25px; border-bottom:1px solid rgba(86,112,97,.12); }.health-facts span { color:#77847d; font-size:.51rem; }.health-facts b { overflow:hidden; color:var(--ink); font-size:.54rem; font-weight:600; text-align:right; text-overflow:ellipsis; white-space:nowrap; }.health-progress { height:4px; margin-top:.5rem; overflow:hidden; background:rgba(75,99,85,.14); }.health-progress i { display:block; height:100%; background:var(--health-color); }.health-progress-label { display:flex; justify-content:space-between; margin-top:.18rem; color:#738078; font-size:.48rem; }.health-loading { grid-column:1/-1; min-height:80px; color:var(--muted); }.health-loading.is-error { color:#b23f32; }
.telegram-setup { margin-top:.65rem; border:1px solid #bfd2c4; border-top:3px solid #2f795d; background:rgba(255,255,255,.76); }.telegram-setup summary { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.58rem .72rem; cursor:pointer; list-style:none; }.telegram-setup summary::-webkit-details-marker { display:none; }.telegram-setup summary > span:first-child { display:flex; align-items:center; gap:.7rem; }.telegram-setup summary b { color:#2f795d; font:600 .49rem "DM Mono",monospace; letter-spacing:.08em; }.telegram-setup summary strong { font-size:.7rem; }.telegram-setup summary > span:nth-child(2) { margin-left:auto; padding:.18rem .32rem; background:#edf5ef; color:#2f795d; font-size:.54rem; font-weight:700; }.telegram-setup summary i { color:#b48719; font-size:1rem; font-style:normal; transition:transform .2s; }.telegram-setup[open] summary i { transform:rotate(45deg); }.telegram-setup-body { display:grid; grid-template-columns:minmax(210px,.55fr) minmax(0,1.7fr); gap:1rem; padding:.75rem; border-top:1px solid #d8e2da; background:linear-gradient(120deg,#edf6ef,#fff 58%,#fff7dd); }.telegram-setup-copy h2 { margin:0 0 .28rem; font-size:1.3rem; letter-spacing:-.055em; }.telegram-setup-copy h2 em { color:var(--orange); font-style:normal; }.telegram-setup-copy p { margin:0; color:var(--muted); font-size:.6rem; line-height:1.4; }.telegram-settings-form { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(125px,.72fr) minmax(150px,.86fr) minmax(120px,.65fr) auto; align-items:end; gap:.45rem; }.telegram-settings-form label span,.telegram-settings-form label small { display:block; }.telegram-settings-form label span { margin-bottom:.2rem; color:#52665b; font:600 .49rem "DM Mono",monospace; text-transform:uppercase; }.telegram-settings-form label small { margin-top:.16rem; color:var(--muted); font-size:.47rem; }.telegram-settings-form input { width:100%; min-height:36px; padding:.45rem .52rem; border:1px solid #b9cbbf; background:#fff; color:var(--ink); font:500 .62rem "Space Grotesk",sans-serif; }.telegram-settings-form input:focus { outline:2px solid #e2ba3d; outline-offset:1px; }.telegram-settings-form button { min-height:36px; padding:.45rem .65rem; border:0; background:#2f795d; color:#fff; font-size:.6rem; font-weight:700; white-space:nowrap; cursor:pointer; }.telegram-settings-form button b { margin-left:.25rem; color:#f2ca42; }.telegram-settings-form button:disabled { opacity:.62; cursor:wait; }.telegram-settings-notice { grid-column:1/-1; min-height:.7em; margin:0; color:#2f795d; font-size:.53rem; }.telegram-settings-notice.is-error { color:#b23f32; }
.ai-setup { border-color:#d9cb96; border-top-color:#b48719; }.ai-setup summary b,.ai-setup summary > span:nth-child(2) { color:#8e6810; }.ai-setup summary > span:nth-child(2) { background:#fff7dd; }.ai-setup .telegram-setup-body { background:linear-gradient(120deg,#fff7dd,#fff 58%,#eff5fb); }.ai-connection-form { grid-template-columns:minmax(230px,1.4fr) minmax(120px,.7fr) minmax(120px,.7fr) auto; }.ai-model-note { min-height:36px; padding:.38rem .48rem; border:1px solid #d6c98f; background:#fffdf5; }.ai-model-note span,.ai-model-note b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ai-model-note span { margin-bottom:.14rem; color:#7d713e; font:600 .46rem "DM Mono",monospace; text-transform:uppercase; }.ai-model-note b { color:#4c512e; font-size:.52rem; }
.health-fact-action { padding:0; border:0; background:transparent; color:#2f795d; font:600 .54rem "Space Grotesk",sans-serif; text-decoration:underline; text-decoration-color:#b48719; text-underline-offset:2px; cursor:pointer; }.health-fact-action:hover { color:#b25d30; }.ai-model-dialog { width:min(560px,calc(100vw - 2rem)); margin:auto; padding:0; border:1px solid #c9d5ca; border-top:4px solid #b48719; background:#fffdf7; box-shadow:0 24px 72px rgba(32,49,38,.25); }.ai-model-dialog::backdrop { background:rgba(28,42,34,.42); }.ai-model-dialog header { display:flex; align-items:start; justify-content:space-between; gap:1rem; padding:.8rem .9rem .62rem; border-bottom:1px solid #e1e5d8; }.ai-model-dialog h2 { margin:.1rem 0 0; font-size:1.25rem; letter-spacing:-.05em; }.ai-model-dialog header button { width:28px; height:28px; border:0; background:#eff4ee; color:#46604d; font-size:1.2rem; line-height:1; cursor:pointer; }.ai-model-dialog-content { display:grid; gap:.5rem; padding:.75rem .9rem .9rem; }.ai-model-dialog-content article { padding:.6rem .65rem; border-left:3px solid #2f795d; background:#f3f8f2; }.ai-model-dialog-content small { color:#718078; font:600 .47rem "DM Mono",monospace; text-transform:uppercase; }.ai-model-dialog-content h3 { margin:.16rem 0 .35rem; font-size:.72rem; }.ai-model-dialog-content ul { display:grid; gap:.22rem; margin:0; padding:0; list-style:none; }.ai-model-dialog-content code { display:block; overflow:hidden; padding:.28rem .35rem; background:#fff; color:#486051; font:.55rem "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.health-note { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.65rem; padding:.58rem .72rem; border-top:1px solid var(--line); background:rgba(255,255,255,.42); }.health-note strong,.health-note small { display:block; }.health-note strong { margin:.12rem 0; font-size:.65rem; }.health-note small,.health-note > p { color:var(--muted); font-size:.53rem; }.health-note > p { max-width:520px; margin:0; text-align:right; }
@media (max-width:1120px) { .health-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.telegram-setup-body { grid-template-columns:1fr; } }
@media (max-width:1100px) { .telegram-settings-form { grid-template-columns:1fr 1fr; } } @media (max-width:900px) { .system-heading { align-items:flex-start; flex-direction:column; }.health-overall { width:100%; min-width:0; }.health-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.telegram-settings-form { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .system-summary { grid-template-columns:1fr 1fr; }.system-summary > div:nth-child(2) { border-right:0; }.system-summary > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }.health-grid,.telegram-settings-form { grid-template-columns:1fr; }.health-card { min-height:0; }.telegram-setup summary > span:first-child { align-items:flex-start; flex-direction:column; gap:.15rem; }.health-note { align-items:flex-start; flex-direction:column; }.health-note > p { text-align:left; } }