:root {
  color-scheme: dark;
  --bg: #050609;
  --panel: rgba(10, 13, 18, .86);
  --panel-strong: rgba(13, 17, 23, .97);
  --line: rgba(211, 228, 245, .11);
  --line-strong: rgba(221, 235, 249, .28);
  --text: #f7f9fc;
  --muted: #8995a3;
  --red: #ff304d;
  --red-hot: #ff5870;
  --blue: #5d88b5;
  --steel: #9caebf;
  --ice: #e7f1fb;
  --yellow: #f0bd62;
  --green: #37e68a;
  --radius: 16px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .48);
  --hover-shadow: 0 18px 48px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 48, 77, .08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(5, 6, 9, .62) 0%, rgba(5, 6, 9, .74) 44%, rgba(5, 6, 9, .90) 100%),
    radial-gradient(ellipse at 8% -8%, rgba(255, 35, 66, .20), transparent 31rem),
    radial-gradient(ellipse at 92% 4%, rgba(75, 119, 164, .22), transparent 34rem),
    url("/assets/server-room-cinematic-v2.png?v=1") center top / cover fixed no-repeat,
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: linear-gradient(rgba(190,211,231,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(190,211,231,.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 160px rgba(0, 0, 0, .78);
}

a { color: inherit; }
button, input { font: inherit; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 5; }
.login-card { width: min(430px, 100%); padding: 36px; border: 1px solid rgba(211,228,245,.18); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.055), transparent 42%), rgba(7,10,15,.94); box-shadow: 0 32px 100px rgba(0,0,0,.72), 0 0 60px rgba(255,48,77,.10); backdrop-filter: blur(26px); }
.login-security { display: block; color: #75f0ad; font-size: 12px; font-weight: 760; letter-spacing: .16em; text-align: center; }
.login-mark { width: 66px; height: 66px; margin: 24px auto 17px; border-radius: 18px; }
.login-mark svg { width: 49px; height: 49px; }
.login-card h1 { text-align: center; font-size: 34px; }
.login-card h1 span { color: var(--red); }
.login-card > p { margin: 9px 0 26px; color: #a8b3bf; font-size: 15px; text-align: center; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 7px; color: #c8d2dc; font-size: 14px; font-weight: 650; }
.login-form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(211,228,245,.16); border-radius: 11px; outline: 0; background: rgba(255,255,255,.045); color: #fff; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.login-form input:focus { border-color: rgba(93,136,181,.82); background: rgba(255,255,255,.065); box-shadow: 0 0 0 4px rgba(93,136,181,.11); }
.login-form button { min-height: 48px; margin-top: 12px; border: 1px solid #e52945; border-radius: 11px; background: linear-gradient(135deg, #c81430, var(--red)); color: #fff; font-size: 15px; font-weight: 760; cursor: pointer; box-shadow: 0 14px 35px rgba(255,48,77,.18); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.login-form button:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 18px 42px rgba(255,48,77,.26); }
.login-form button:active { transform: scale(.98); }
.login-form button:disabled { cursor: wait; opacity: .65; transform: none; }
.login-result { min-height: 20px; margin: 3px 0 0 !important; color: #ff91a2 !important; font-size: 13px !important; text-align: center; }

.ambient { position: fixed; width: 22rem; height: 22rem; border-radius: 50%; filter: blur(110px); opacity: .1; pointer-events: none; }
.ambient-a { background: var(--red); left: -11rem; top: 37%; }
.ambient-b { background: var(--blue); right: -11rem; top: 58%; }

.shell { width: min(1500px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 34px; position: relative; z-index: 1; }

.topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; border-radius: 12px; transition: transform .22s ease, filter .22s ease; }
.brand:hover { transform: translateY(-2px); filter: brightness(1.13); }
.brand:active { transform: translateY(0) scale(.985); }
.brand > span:last-child { display: grid; grid-template-columns: auto auto; align-items: baseline; }
.brand strong { font-size: 22px; font-weight: 720; letter-spacing: -.045em; }
.brand b { color: var(--red); font-size: 22px; letter-spacing: -.045em; text-shadow: 0 0 22px rgba(255,48,77,.35); }
.brand small { grid-column: 1 / -1; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .28em; }
.brand-mark { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgba(199,218,236,.2); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); box-shadow: inset 0 0 20px rgba(83,126,171,.12), 0 0 24px rgba(255,48,77,.08); }
.brand-mark svg { width: 35px; height: 35px; overflow: visible; }
.brand-mark .mark-frame { fill: none; stroke: var(--steel); stroke-width: 1.7; }
.brand-mark .mark-signal { fill: none; stroke: var(--ice); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .mark-cut { fill: none; stroke: var(--blue); stroke-width: 1.4; opacity: .72; }
.brand-mark circle { fill: var(--red); filter: drop-shadow(0 0 5px rgba(255,48,77,.95)); }

.topbar-meta { display: flex; align-items: center; gap: 20px; }
.secure-pill { padding: 6px 9px; border: 1px solid rgba(55,230,138,.18); border-radius: 999px; background: rgba(55,230,138,.07); color: #75f0ad; font-size: 10px; font-weight: 760; letter-spacing: .08em; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; color: #c1cad4; font-size: 13px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,214,107,.08); }
.pulse.healthy { background: var(--green); box-shadow: 0 0 0 5px rgba(55,230,138,.10), 0 0 11px rgba(55,230,138,.45); }
.pulse.alert { background: var(--red); box-shadow: 0 0 0 5px rgba(255,48,77,.10); }
#clock { color: #e7edf3; font-size: 14px; font-variant-numeric: tabular-nums; }
.logout-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); color: #aeb9c4; font-size: 12px; cursor: pointer; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; }
.logout-button:hover { transform: translateY(-2px); color: #fff; border-color: rgba(255,48,77,.42); background: rgba(255,48,77,.08); }

.command-row { display: grid; grid-template-columns: minmax(240px, 480px) auto; justify-content: space-between; gap: 18px; align-items: stretch; margin: 20px 0 24px; }
.google-search, .summary-strip { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 48%), rgba(10,13,18,.86); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.google-search { height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-radius: 15px; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.google-search:focus-within { border-color: rgba(255,48,77,.58); transform: translateY(-2px); box-shadow: var(--hover-shadow); }
.google-search > span { color: var(--red); font-size: 28px; transform: rotate(-16deg); }
.google-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 17px; }
.google-search input::placeholder { color: #707b88; }
kbd { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px; color: #95a4b3; background: rgba(255,255,255,.025); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); border-radius: 17px; overflow: hidden; }
.summary-strip div { min-width: 100px; padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
.summary-strip div:first-child { border-left: 0; }
.summary-strip strong { font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.summary-strip span { margin-top: 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.section-heading p { margin: 0 0 7px; color: var(--red-hot); font-size: 10px; font-weight: 720; letter-spacing: .22em; }
h1, h2 { margin: 0; letter-spacing: -.045em; }
h1 { font-size: clamp(25px, 2.8vw, 38px); font-weight: 660; }
h2 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 660; }
.refresh-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); color: #cbd5df; cursor: pointer; transition: transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease; }
.refresh-button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.16) 50%, transparent 72%); transform: translateX(-140%); transition: transform .45s ease; }
.refresh-button:hover { transform: translateY(-2px); border-color: rgba(255,48,77,.52); color: #fff; background: rgba(255,48,77,.08); box-shadow: 0 10px 30px rgba(255,48,77,.12); }
.refresh-button:hover::after { transform: translateX(140%); }
.refresh-button:active { transform: translateY(0) scale(.97); }
.refresh-button:focus-visible, .filter:focus-visible, .service-card:focus-visible, .brand:focus-visible, .logout-button:focus-visible, .login-form button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.refresh-button.loading span { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.host-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.host-card { --accent: var(--steel); min-height: 228px; padding: 19px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-top: 3px solid var(--accent); border-radius: var(--radius); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%), var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); position: relative; overflow: hidden; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.host-card::after { content: ""; position: absolute; width: 90px; height: 90px; top: -46px; right: -30px; border-radius: 50%; background: var(--accent); filter: blur(42px); opacity: .14; }
.host-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 38%, transparent); border-top-color: var(--accent); box-shadow: var(--hover-shadow); }
.host-card.red { --accent: var(--red); }
.host-card.steel { --accent: var(--steel); }
.host-card.blue { --accent: var(--blue); }
.host-card.ice { --accent: var(--ice); }
.host-card.cyan { --accent: #20d9f2; }
.host-card.violet { --accent: #be75ff; }
.host-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.host-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 800; }
.state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(55,230,138,.10); color: #75f0ad; font-size: 10px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.state.offline { color: #ff7385; background: rgba(255,48,77,.11); }
.state.alert { color: #ff7385; background: rgba(255,48,77,.11); }
.state.sleeping { color: #adc2d5; background: rgba(112,143,173,.10); }
.host-card h3 { margin: 20px 0 3px; font-size: 18px; letter-spacing: -.025em; }
.host-address { color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.host-issue { margin-top: 8px; color: #ff8da0; font-size: 10px; font-weight: 650; }
.meter-row { margin-top: 18px; display: grid; gap: 11px; }
.meter-label { display: flex; justify-content: space-between; color: #9aa7b4; font-size: 11px; }
.meter-label strong { color: #edf2f7; font-weight: 600; }
.meter { width: 100%; height: 4px; margin-top: 6px; display: block; border: 0; border-radius: 999px; appearance: none; background: rgba(255,255,255,.07); overflow: hidden; }
.meter::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.07); }
.meter::-webkit-progress-value { border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }
.meter::-moz-progress-bar { border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }
.host-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.host-footer strong { color: var(--text); font-weight: 650; }
.disk-health { margin-top: 12px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(93,136,181,.22); border-radius: 11px; background: linear-gradient(135deg, rgba(93,136,181,.11), rgba(255,255,255,.025)); }
.disk-health > div { min-width: 0; display: flex; flex-direction: column; }
.disk-health small { color: #8498ab; font-size: 8px; font-weight: 750; letter-spacing: .13em; }
.disk-health strong { margin-top: 3px; overflow: hidden; color: #eef4fa; font-size: 11px; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
.disk-health em { margin-top: 3px; overflow: hidden; color: #8795a3; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.disk-health-status { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; background: rgba(93,136,181,.13); color: #bcd2e7; font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.disk-health.warning, .disk-health.critical { border-color: rgba(255,48,77,.30); background: linear-gradient(135deg, rgba(255,48,77,.13), rgba(255,255,255,.02)); }
.disk-health.warning .disk-health-status, .disk-health.critical .disk-health-status { color: #ff9aaa; background: rgba(255,48,77,.14); }
.disk-health.sleeping, .disk-health.unknown { opacity: .72; }

.updates-panel { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(120deg, rgba(255,48,77,.065), transparent 37%), linear-gradient(300deg, rgba(93,136,181,.07), transparent 40%), rgba(10,13,18,.82); box-shadow: var(--shadow); }
.updates-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.updates-head p { margin: 0 0 5px; color: var(--red-hot); font-size: 9px; font-weight: 720; letter-spacing: .2em; }
.updates-head h2 { font-size: 20px; }
.updates-body { margin-top: 14px; color: var(--muted); font-size: 13px; }
.updates-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.update-item { min-width: 0; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(255,48,77,.22); border-radius: 11px; background: linear-gradient(135deg, rgba(255,48,77,.09), rgba(93,136,181,.04)); }
.update-item > div { min-width: 0; }
.update-item strong { display: block; overflow: hidden; color: #f2f5fb; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.update-item span { display: block; margin-top: 4px; overflow: hidden; color: #b8c9da; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.update-action { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,48,77,.36); border-radius: 8px; background: rgba(255,48,77,.10); color: #ffb0bd; font-size: 10px; font-weight: 750; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.update-action:hover { transform: translateY(-2px); border-color: var(--red); background: rgba(255,48,77,.20); box-shadow: 0 8px 24px rgba(255,48,77,.16); }
.update-action:active { transform: scale(.96); }
.updates-note { display: flex; align-items: center; gap: 9px; min-height: 32px; }
.updates-note::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(93,136,181,.10); }
.updates-note.warning::before { background: var(--yellow); box-shadow: 0 0 0 4px rgba(240,189,98,.09); }
.updates-note-spaced { margin-top: 10px; }

.services-section { margin-top: 42px; }
.services-heading { align-items: center; }
.service-search { min-width: 245px; height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); color: var(--muted); transition: border-color .22s ease, box-shadow .22s ease; }
.service-search:focus-within { border-color: rgba(93,136,181,.58); box-shadow: 0 0 24px rgba(93,136,181,.10); }
.service-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.filter:hover { transform: translateY(-2px); color: #fff; border-color: rgba(255,48,77,.5); background: rgba(255,48,77,.08); box-shadow: 0 8px 22px rgba(255,48,77,.10); }
.filter.active { color: #fff; border-color: var(--red); background: linear-gradient(135deg, #d81734, var(--red)); box-shadow: 0 7px 22px rgba(255,48,77,.20); }
.filter:active { transform: translateY(0) scale(.96); }
.service-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; margin-top: 16px; }
.service-card { min-height: 142px; padding: 14px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 45%), rgba(10,13,18,.80); text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease; }
.service-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.09) 47%, transparent 68%); transform: translateX(-145%); transition: transform .55s cubic-bezier(.2,.75,.25,1); }
.service-card::after { content: "↗"; position: absolute; right: 13px; bottom: 12px; color: var(--red-hot); font-size: 13px; opacity: 0; transform: translate(-5px, 5px); transition: opacity .22s ease, transform .22s ease; }
.service-card:hover { transform: translateY(-5px) scale(1.012); border-color: rgba(150,180,210,.38); background: rgba(17,22,29,.96); box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 25px rgba(82,126,170,.10); }
.service-card:hover::before { transform: translateX(145%); }
.service-card:hover::after { opacity: 1; transform: translate(0, 0); }
.service-card:active { transform: translateY(-1px) scale(.98); }
.service-top { display: flex; justify-content: space-between; align-items: flex-start; }
.service-logo { width: 38px; height: 38px; display: grid; place-items: center; padding: 6px; border-radius: 10px; background: linear-gradient(145deg, #fff, #cdd9e5); box-shadow: 0 8px 20px rgba(0,0,0,.22); transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover .service-logo { transform: scale(1.08) rotate(-2deg); box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 16px rgba(255,255,255,.08); }
.service-logo img { width: 100%; height: 100%; object-fit: contain; }
.service-logo .fallback { color: #0d211c; font-size: 12px; font-weight: 800; }
.service-state { width: 8px; height: 8px; border-radius: 50%; background: #6c7f78; box-shadow: 0 0 0 4px rgba(108,127,120,.08); }
.service-state.healthy { background: var(--green); box-shadow: 0 0 0 4px rgba(55,230,138,.09), 0 0 12px rgba(55,230,138,.55); }
.service-state.degraded, .service-state.offline { background: var(--red); box-shadow: 0 0 0 4px rgba(255,48,77,.09), 0 0 12px rgba(255,48,77,.48); }
.service-state.sleeping { background: var(--steel); box-shadow: 0 0 0 4px rgba(156,174,191,.09); }
.service-card h3 { margin: auto 0 5px; font-size: 14px; font-weight: 650; line-height: 1.2; }
.service-card p { margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.empty-state { padding: 36px; text-align: center; color: var(--muted); }

.portals-section { margin-bottom: 30px; }
.portals-section .section-heading { margin-bottom: 14px; }
.portal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.portal-card { min-height: 132px; border-top-color: rgba(131,167,201,.38); background: linear-gradient(135deg, rgba(82,126,170,.12), transparent 70%), rgba(10,13,18,.9); }
.portal-card .service-top { gap: 10px; margin-bottom: 16px; align-items: center; }
.portal-card .service-logo { flex-shrink: 0; }
.portal-card h3 { font-size: 15px; }
.portal-status { display: inline-flex; align-items: center; gap: 8px; color: #c9d5e0; font-size: 14px; }
.portal-status .service-state { flex-shrink: 0; }

footer { margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #73808d; font-size: 11px; }
.update-dialog { width: min(460px, calc(100% - 28px)); padding: 0; border: 1px solid rgba(202,220,238,.18); border-radius: 17px; background: rgba(9,12,17,.97); color: var(--text); box-shadow: 0 34px 100px rgba(0,0,0,.75), 0 0 50px rgba(255,48,77,.10); backdrop-filter: blur(24px); }
.update-dialog::backdrop { background: rgba(2,3,5,.72); backdrop-filter: blur(5px); }
.update-dialog-card { padding: 24px; }
.update-dialog-kicker { color: var(--red-hot); font-size: 9px; font-weight: 780; letter-spacing: .18em; }
.update-dialog h2 { margin-top: 7px; font-size: 24px; }
.update-dialog p { color: #a4afba; font-size: 13px; line-height: 1.55; }
.update-dialog-warning { margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(240,189,98,.18); border-radius: 10px; background: rgba(240,189,98,.06); color: #cbb88f; font-size: 11px; line-height: 1.45; }
.update-dialog-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 9px; }
.dialog-cancel, .dialog-confirm { padding: 9px 13px; border-radius: 9px; color: #d7e0e8; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.dialog-cancel { border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.dialog-confirm { border: 1px solid #e52945; background: linear-gradient(135deg, #c81430, var(--red)); color: #fff; }
.dialog-cancel:hover, .dialog-confirm:hover { transform: translateY(-2px); filter: brightness(1.12); }
.dialog-confirm:disabled { cursor: wait; opacity: .65; transform: none; }
.update-dialog-result { min-height: 18px; margin-bottom: 0; }
.update-dialog-result.success { color: #75f0ad; }
.update-dialog-result.error { color: #ff8da0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1180px) {
  .portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .host-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .updates-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body { background-attachment: scroll; background-position: center top; }
  .shell { width: min(100% - 28px, 680px); padding-top: 14px; }
  .topbar-meta .live-pill { display: none; }
  .secure-pill { display: none; }
  .command-row { grid-template-columns: 1fr; margin-top: 20px; }
  .summary-strip div { min-width: 0; padding-inline: 14px; }
  .host-grid { grid-template-columns: 1fr; }
  .services-heading { align-items: flex-end; }
  .service-search { min-width: 0; width: 48%; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .updates-list { grid-template-columns: 1fr; }
  h1 { max-width: 300px; }
}

@media (max-width: 460px) {
  .portal-grid { grid-template-columns: 1fr; }
  .brand small { display: none; }
  .brand strong, .brand b { font-size: 19px; }
  .topbar-meta { gap: 10px; }
  .logout-button { padding: 7px 8px; font-size: 0; }
  .logout-button::before { content: "Salir"; font-size: 11px; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .summary-strip div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .summary-strip div:nth-child(4) { border-top: 1px solid var(--line); }
  .section-heading { align-items: flex-start; }
  .refresh-button { padding: 9px; font-size: 0; }
  .refresh-button span { font-size: 16px; }
  .services-heading { display: grid; }
  .updates-panel { padding: 15px; }
  .service-search { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}