:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #161616; background: #f5f5f7; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f5f5f7; }
button { font: inherit; border: 0; cursor: pointer; }
.app-shell { min-height: 100vh; padding-bottom: 92px; }
.loading-screen { display: grid; min-height: 180px; place-items: center; align-content: center; gap: 14px; padding: 28px; color: #777; text-align: center; }
.loading-screen img { width: 58px; height: 58px; object-fit: contain; animation: grafana-bounce 1s ease-in-out infinite; }
.loading-screen p { margin: 0; font-size: 13px; }
@keyframes grafana-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-13px) rotate(-4deg); } 60% { transform: translateY(0) rotate(4deg); } }
.logged-out .app-shell { display: grid; min-height: 100vh; padding: 20px; place-items: center; }
.logged-out .page { width: min(100%, 430px); padding: 0; }
.logged-out .bottom-nav { display: none; }
.login-card { padding: 32px 24px; border-radius: 30px; background: #fff; box-shadow: 0 18px 40px #00000012; }
.login-mark { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 24px; border-radius: 22px; background: #eee6ff; }
.login-mark img { width: 52px; height: 52px; object-fit: contain; }
.login-card h1 { margin-bottom: 10px; }
.login-subtitle { margin: 0 0 28px; color: #6d6d6d; font-size: 14px; line-height: 1.5; }
.login-card form { display: grid; gap: 16px; }
.login-card label { display: grid; gap: 7px; color: #353535; font-size: 13px; font-weight: 700; }
.login-card input { width: 100%; padding: 15px 16px; border: 1px solid #e0e0e0; border-radius: 15px; outline-color: #cb4b16; font: inherit; font-weight: 400; }
.login-card .primary:disabled { opacity: .65; cursor: wait; }
.login-error { margin: 0; color: #c00000; font-size: 13px; }
.profile-card { display: flex; align-items: center; gap: 16px; padding: 22px; margin-bottom: 16px; border-radius: 24px; background: #fff; box-shadow: 0 7px 20px #0000000a; }
.profile-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; border-radius: 50%; background: #eee6ff; color: #cb4b16; font-size: 25px; font-weight: 800; }
.profile-label { margin: 0 0 5px; color: #999; font-size: 11px; font-weight: 700; letter-spacing: .8px; }
.profile-card h2 { margin: 0 0 6px; font-size: 20px; }
.profile-status { margin: 0; color: #3b9259; font-size: 13px; }
.profile-status i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #31a75e; }
.logout-button { width: 100%; padding: 15px 20px; border-radius: 17px; background: #fff; color: #c00000; box-shadow: 0 7px 20px #0000000a; font-weight: 700; }
.page { width: min(100%, 760px); margin: 0 auto; padding: 18px 20px 28px; }
.header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.avatar { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; background: #eee6ff; }
.avatar img { width: 36px; height: 36px; object-fit: contain; }
.brand { margin: 0 0 6px; color: #8a8a8a; font-size: 13px; font-weight: 700; letter-spacing: 1.1px; }
h1 { margin: 0 0 6px; font-size: clamp(28px, 7vw, 34px); line-height: 1.05; }
.subtitle { margin: 0; color: #6d6d6d; font-size: 14px; line-height: 1.35; }
.card, .info-panel { border-radius: 24px; background: #fff; }
.info-panel { padding: 20px; margin-bottom: 14px; }
.info-panel h2 { margin: 0 0 8px; font-size: 16px; }
.info-panel p { margin: 0; color: #666; font-size: 14px; line-height: 1.45; }
.overview { display: flex; gap: 14px; align-items: flex-start; padding: 18px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.dot { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 4px; border-radius: 50%; background: var(--accent); }
.overview h2 { margin: 0 0 8px; font-size: 22px; }
.overview p { margin: 0; color: #666; font-size: 15px; line-height: 1.45; }
.list-header { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; color: #8a8a8a; font-size: 14px; font-weight: 700; letter-spacing: .8px; }
.refresh-button { padding: 8px 12px; border-radius: 12px; background: #fff; color: #cb4b16; font-size: 12px; font-weight: 700; }
.problem-row, .host-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px; margin-bottom: 10px; border-radius: 18px; background: #fff; box-shadow: 0 5px 16px #0000000a; }
.host-row { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.host-row:hover, .host-row:focus { outline: none; transform: translateY(-1px); box-shadow: 0 8px 20px #00000016; }
.problem-main { flex: 1; min-width: 0; }
.problem-main h2 { margin: 0 0 5px; overflow: hidden; font-size: 15px; line-height: 1.3; text-overflow: ellipsis; }
.problem-main p, .problem-main small { display: block; margin: 0 0 4px; overflow: hidden; color: #686868; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.problem-main small { margin: 0; color: #9a9a9a; }
.severity-dot { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 4px; border-radius: 50%; background: #999; }
.severity-5, .severity-text-5 { color: #c00000; background-color: #c00000; }
.severity-4, .severity-text-4 { color: #e95353; background-color: #e95353; }
.severity-3, .severity-text-3 { color: #e98900; background-color: #e98900; }
.severity-2, .severity-text-2 { color: #d6aa00; background-color: #d6aa00; }
.severity-1, .severity-text-1 { color: #1e88ff; background-color: #1e88ff; }
.severity-label { flex: 0 0 auto; font-size: 11px; font-weight: 700; }
.severity-text-5, .severity-text-4, .severity-text-3, .severity-text-2, .severity-text-1 { background: none; }
.search-box { display: flex; gap: 8px; margin-bottom: 20px; }
.search-box input { min-width: 0; flex: 1; padding: 15px 16px; border: 1px solid #e2e2e2; border-radius: 16px; outline-color: #cb4b16; font: inherit; }
.search-box button { padding: 0 18px; border-radius: 16px; background: #cb4b16; color: #fff; font-weight: 700; }
.host-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; background: #eee6ff; color: #cb4b16; font-size: 21px; }
.host-status { width: 10px; height: 10px; flex: 0 0 10px; margin-top: 5px; border-radius: 50%; background: #aaa; }
.host-status.online { background: #28a745; box-shadow: 0 0 0 4px #28a74522; }
.dashboard-select { display: grid; gap: 8px; margin-bottom: 18px; color: #8a8a8a; font-size: 13px; font-weight: 700; letter-spacing: .8px; }
.dashboard-updated { margin: -10px 0 18px; color: #8a8a8a; font-size: 12px; }
.dashboard-select select { width: 100%; padding: 15px 16px; border: 1px solid #e2e2e2; border-radius: 16px; background: #fff; color: #252525; font: inherit; font-weight: 600; }
.dashboard-host-name { display: grid; gap: 7px; margin-bottom: 18px; padding: 0 2px; }
.dashboard-host-name span { color: #8a8a8a; font-size: 13px; font-weight: 700; letter-spacing: .8px; }
.dashboard-host-name strong { overflow: hidden; color: #292929; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grid { display: grid; gap: 14px; }
.metric-card { min-width: 0; overflow: hidden; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 7px 20px #0000000a; }
.metric-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.metric-title h2 { margin: 0; font-size: 18px; }
.metric-title span { max-width: 58%; overflow: hidden; color: #909090; font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.timeseries { display: block; width: 100%; height: 150px; overflow: visible; border-bottom: 1px solid #eee; background: repeating-linear-gradient(to bottom, transparent 0, transparent 32%, #f0f0f0 33%, transparent 34%); }
.chart-axis { position: relative; height: 18px; margin-top: 8px; color: #999; font-size: 10px; white-space: nowrap; }
.chart-axis span { position: absolute; transform: translateX(-50%); }
.chart-axis span:first-child { transform: translateX(0); }
.chart-axis span:last-child { transform: translateX(-100%); }
.chart-empty { display: grid; height: 150px; place-items: center; border-radius: 12px; background: #fafafa; color: #999; font-size: 13px; }
.series-layout { display: flex; gap: 8px; }
.series-y-axis { display: flex; width: 42px; flex: 0 0 42px; flex-direction: column; justify-content: space-between; padding: 2px 0 25px; color: #8a8a8a; font-size: 10px; text-align: right; }
.series-plot { min-width: 0; flex: 1; }
.series-plot .timeseries { height: 150px; border: 0; background: transparent; }
.series-gridline { stroke: #ececef; stroke-width: .7; vector-effect: non-scaling-stroke; }
.series-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0 0 50px; margin-top: 5px; border-top: 1px solid #ececef; color: #555; font-size: 12px; }
.series-legend span { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-legend i { width: 12px; height: 3px; flex: 0 0 12px; border-radius: 3px; }
.series-legend strong { color: #333; white-space: nowrap; }
.network-series-legend { display: grid; gap: 6px; padding: 9px 0 0 50px; margin-top: 5px; border-top: 1px solid #ececef; color: #555; font-size: 12px; }
.network-series-legend div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.network-series-legend span { display: flex; align-items: center; gap: 7px; }
.network-series-legend i { width: 12px; height: 3px; border-radius: 3px; }
.network-series-legend strong { color: #333; white-space: nowrap; }
.network-chart-layout { display: flex; align-items: stretch; gap: 16px; }
.network-plot { min-width: 0; flex: 1; }
.network-plot .timeseries { height: 150px; }
.network-legend { display: flex; min-width: 112px; flex-direction: column; justify-content: center; gap: 18px; }
.network-legend span { display: grid; grid-template-columns: 10px 1fr; align-items: center; column-gap: 7px; color: #656565; font-size: 11px; }
.network-legend small { grid-column: 2; }
.network-legend strong { grid-column: 2; color: #222; font-size: 12px; }
.network-legend i { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; }
.legend-in { background: #1685cb; }
.legend-out { background: #28a36a; }
.disk-gauge-list { display: grid; gap: 15px; }
.disk-gauge-row { display: grid; width: 100%; min-width: 0; gap: 7px; }
.disk-gauge-label { display: flex; width: 100%; min-width: 0; justify-content: space-between; gap: 12px; color: #4b4b4b; font-size: 13px; }
.disk-gauge-label span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disk-gauge-label strong { flex: 0 0 auto; color: #333; }
.disk-gauge-track { width: 100%; height: 13px; overflow: hidden; border-radius: 10px; background: #ececef; }
.disk-gauge-track i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: #3a9c65; }
.disk-gauge-track i.warning { background: #e3a522; }
.disk-gauge-track i.critical { background: #cf3d3d; }
.oracle-session-grid { display: grid; gap: 20px; }
.oracle-session-grid h3 { margin: 0 0 8px; color: #555; font-size: 14px; }
.legend-in { background: #7cc66b; }
.legend-out { background: #f0ca25; }
.legend-in { background: #1685cb; }
.legend-out { background: #28a36a; }
.primary { width: 100%; padding: 16px 20px; border-radius: 18px; background: #cb4b16; color: #fff; font-weight: 700; }
.segmented { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; border-radius: 32px; background: #e9e9eb; }
.segmented button { flex: 1; padding: 16px 8px; border-radius: 28px; background: transparent; color: #2e2e2e; font-weight: 700; }
.segmented button.active { background: #fff; color: #161616; box-shadow: 0 4px 12px #0000000f; }
.section-label { margin: 0 0 12px; color: #8a8a8a; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.filters { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px 18px; padding: 0 20px 3px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.pill { flex: 0 0 auto; padding: 16px 22px; border-radius: 28px; background: #fff; color: #353535; box-shadow: 0 6px 16px #0000000f; font-weight: 700; }
.pill.active { background: #cb4b16; color: #fff; }
.incident-card, .composition-card, .activity-card { padding: 18px; margin-bottom: 26px; border-radius: 30px; background: #fff; }
.incident-card { border: 1px solid #f0c7c2; }
.incident-head { display: flex; align-items: center; gap: 16px; }
.incident-symbol { display: grid; place-items: center; flex: 0 0 84px; width: 84px; height: 84px; border-radius: 20px; background: #f8e1e0; color: #c00000; font-size: 28px; }
.incident-head h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.08; }
.incident-head p { margin: 0; color: #c41414; font-size: 16px; font-weight: 700; }
.chevron { margin-left: auto; color: #7e7e7e; font-size: 32px; }
.bar { display: flex; height: 12px; margin-top: 16px; overflow: hidden; border-radius: 12px; }
.bar i { flex: var(--size); background: var(--color); }
.composition-card { padding: 20px; box-shadow: 0 10px 20px #0000000a; }
.composition-content { display: flex; align-items: center; gap: 18px; }
.ring-wrap { display: grid; place-items: center; position: relative; flex: 0 0 170px; width: 170px; height: 170px; }
.ring { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from -63deg, #c00 0 21.7%, #fa6a61 21.7% 59.2%, #ffa31a 59.2% 68.3%, #ffd31a 68.3% 79.8%, #1e88ff 79.8% 100%); mask: radial-gradient(transparent 54%, #000 55%); -webkit-mask: radial-gradient(transparent 54%, #000 55%); }
.ring-text { position: absolute; text-align: center; }
.ring-text strong { display: block; font-size: 50px; line-height: 1; }
.ring-text small { color: #8e8e8e; font-weight: 700; letter-spacing: 1.1px; }
.legend { flex: 1; }
.legend-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.legend-row i { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background: var(--color); }
.legend-row span { flex: 1; color: #3b3b3b; }
.legend-row strong { color: var(--color); }
.activity-card { height: 250px; }
.activity-title { display: flex; justify-content: space-between; font-size: 22px; font-weight: 800; }
.activity-title span:last-child { color: #c00000; font-size: 14px; }
.activity-chart { position: relative; height: 150px; margin-top: 12px; background: linear-gradient(#fff 69%, #ececec 69%, #ececec 70%, #fff 70%); }
.activity-chart i { position: absolute; bottom: 30%; width: 18px; border-radius: 18px; background: #dc0000; }
.activity-chart i:first-child { left: 28%; height: 84%; }
.activity-chart i:last-child { left: 82%; height: 60%; background: #b0b0b0; }
.activity-labels { display: flex; justify-content: space-between; color: #8a8a8a; }
.bottom-nav { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: 2px; padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background: #fbe7e3; box-shadow: 0 -4px 18px #0000000a; }
.bottom-nav button { display: flex; flex: 1; max-width: 150px; flex-direction: column; align-items: center; gap: 3px; padding: 8px 3px; border-radius: 18px; background: transparent; color: #5a433b; font-size: 11px; font-weight: 700; }
.bottom-nav button.active { background: #ffd9cc; }
.nav-icon { height: 22px; font-size: 20px; line-height: 22px; }
.network-subtitle { margin-top: 22px; }
.proxmox-vm-list { padding: 8px 18px; }
.proxmox-vm-row { display: grid; grid-template-columns: minmax(180px, 1.8fr) repeat(3, minmax(90px, .7fr)) auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #ececec; }
.proxmox-vm-row:last-child { border-bottom: 0; }
.proxmox-vm-row strong, .proxmox-vm-row small { display: block; }
.proxmox-vm-row small { margin-top: 5px; color: #8a8a8a; }
.proxmox-vm-row span { color: #8a8a8a; font-size: 11px; }
.proxmox-vm-row b { display: block; margin-top: 4px; color: #313131; font-size: 14px; }
@media (max-width: 700px) { .proxmox-vm-row { grid-template-columns: 1fr 1fr; gap: 9px 12px; } .proxmox-vm-row > div { grid-column: 1 / -1; } .proxmox-vm-row button { justify-self: start; } }
@media (max-width: 429px) { .composition-content { flex-direction: column; } .ring-wrap { flex-basis: 156px; width: 156px; height: 156px; } .ring-text strong { font-size: 44px; } .legend { width: 100%; } }
@media (max-width: 429px) { .chart-axis { overflow: hidden; font-size: 8px; } .series-y-axis { width: 38px; flex-basis: 38px; font-size: 9px; } .series-legend { padding-left: 46px; } .disk-gauge-label { font-size: 12px; } }
@media (min-width: 760px) { .bottom-nav { right: auto; left: 50%; width: 760px; transform: translateX(-50%); border-radius: 24px 24px 0 0; } }