:root { color-scheme: light; --ink:#1f2928; --muted:#7c8988; --line:#e8eeeb; --green:#3ca87b; --blue:#6289c9; --bg:#f5f8f6; font-family:'DM Sans','Noto Sans SC',sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--bg); }
button,input { font:inherit; }
button { cursor:pointer; }
.ambient { position:fixed; z-index:-1; width:520px; height:520px; border-radius:50%; filter:blur(1px); pointer-events:none; }
.ambient-one { top:-330px; right:3%; background:radial-gradient(circle,#dff2e8 0,transparent 68%); }
.ambient-two { bottom:-420px; left:-230px; background:radial-gradient(circle,#e8edff 0,transparent 69%); }
.shell { min-height:100vh; }
.auth-screen { min-height:100vh; display:grid; place-items:center; align-content:center; padding:34px 18px; }
.auth-brand { display:flex; align-items:center; gap:10px; font:700 17px Manrope,'DM Sans',sans-serif; letter-spacing:-.5px; color:#263332; }
.auth-brand i { color:#98a5a0; font-style:normal; font-weight:500; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:white; background:linear-gradient(145deg,#51bd8c,#339b72); font:800 20px Manrope,sans-serif; box-shadow:0 5px 12px #3aa77e35; }
.auth-screen>.auth-brand { margin-bottom:27px; }
.auth-card { width:min(430px,100%); padding:36px 38px 25px; border:1px solid #e9efec; border-radius:19px; background:#ffffffed; box-shadow:0 24px 80px #30463b0c; }
.eyebrow { color:#8b9a94; font:700 10px Manrope,'DM Sans',sans-serif; letter-spacing:1.45px; }
.auth-card h1 { margin:12px 0 8px; color:#263230; font:700 25px Manrope,'Noto Sans SC',sans-serif; letter-spacing:-.6px; }
.auth-copy { margin:0 0 26px; color:#84908c; font-size:13px; line-height:1.65; }
.field { display:block; margin:16px 0; }
.field>span { display:block; margin:0 0 8px; color:#53615c; font-size:12px; font-weight:600; }
.field input { width:100%; height:45px; padding:0 13px; border:1px solid #e2e9e5; border-radius:9px; outline:none; background:#fbfcfb; color:#283530; font-size:13px; transition:border-color .18s,box-shadow .18s; }
.field input:focus { border-color:#78c39e; box-shadow:0 0 0 3px #e5f5ec; }
.field small { display:block; margin-top:6px; color:#97a29d; font-size:10px; line-height:1.6; }
.settings-dialog { width:min(510px,calc(100% - 28px)); max-height:min(90vh,780px); overflow:auto; padding:22px; border:1px solid #e5ece8; border-radius:15px; color:var(--ink); background:#fff; box-shadow:0 24px 90px #18282030; }
.settings-dialog::backdrop { background:#14231d66; backdrop-filter:blur(3px); }
.settings-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.settings-head h2 { margin:5px 0 0; color:#2c3933; font:700 19px Manrope,'Noto Sans SC',sans-serif; }
.settings-form { padding:13px 0 17px; border-top:1px solid #edf1ef; }
.settings-form h3 { margin:0 0 12px; color:#46564e; font-size:12px; }
.settings-form .field { margin:10px 0; }
.settings-form .button { margin-top:6px; }
.phone-state { margin:7px 0 10px; color:#a47c49; font-size:10px; }
.phone-state.verified { color:#448e66; }
.sms-row { display:flex; align-items:flex-end; gap:9px; }
.sms-row .field { flex:1; }
.settings-note { margin:8px 0 12px; color:#929d97; font-size:10px; line-height:1.7; }
.button { height:39px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:0 15px; border:1px solid #e3eae6; border-radius:8px; color:#586661; background:white; font-size:12px; font-weight:600; transition:.18s ease; }
.button:hover { border-color:#cbd9d2; background:#fbfdfc; }
.button:disabled { opacity:.6; cursor:wait; }
.button.primary { border-color:#3ea97a; color:white; background:linear-gradient(130deg,#4ab487,#369b70); box-shadow:0 6px 14px #3aa77e20; }
.button.primary:hover { background:linear-gradient(130deg,#40a97c,#318d67); }
.button.full { width:100%; height:45px; margin-top:10px; font-size:13px; }
.button.full span { font-size:16px; }
.form-error { min-height:18px; padding-top:10px; color:#bd4f4f; font-size:12px; }
.auth-foot { display:flex; align-items:center; justify-content:center; gap:7px; padding-top:20px; border-top:1px solid #edf1ef; color:#9aa49f; font-size:10px; }
.lock-icon { color:#5c9c7b; font-size:15px; }
.auth-caption { margin-top:25px; color:#a1aaa6; font-size:11px; letter-spacing:.2px; }
.dashboard { min-height:100vh; display:grid; grid-template-columns:228px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:25px 16px 15px; border-right:1px solid var(--line); background:#fbfcfbeb; backdrop-filter:blur(20px); }
.sidebar .auth-brand { padding:0 8px; font-size:15px; }
.sidebar .brand-mark { width:29px; height:29px; border-radius:9px; font-size:19px; }
.nav-label { margin:47px 10px 11px; color:#a1ada7; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.nav-label.separated { margin-top:30px; }
.nav-item { width:100%; height:39px; display:flex; align-items:center; gap:11px; padding:0 11px; border:0; border-radius:8px; color:#4b6257; background:#eaf5ef; text-align:left; font-size:12px; font-weight:600; }
.nav-icon { color:#46a77b; font-size:17px; }
.nav-service { height:37px; display:flex; align-items:center; gap:9px; padding:0 10px; color:#68746f; font-size:11px; }
.nav-service small { margin-left:auto; color:#a5b0aa; font:700 9px Manrope,sans-serif; letter-spacing:.5px; }
.service-mini-dot { width:7px; height:7px; border-radius:50%; }
.service-mini-dot.mint { background:#50b284; box-shadow:0 0 0 3px #e3f3ea; }
.service-mini-dot.blue { background:#7a99ce; box-shadow:0 0 0 3px #edf1fb; }
.sidebar-bottom { margin-top:auto; }
.secure-chip { height:34px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #ecf1ee; border-radius:8px; color:#87958f; font-size:10px; }
.secure-dot { width:6px; height:6px; border-radius:50%; background:#54b889; }
.secure-shield { margin-left:auto; color:#65a686; font-size:15px; }
.account { display:flex; align-items:center; gap:9px; padding:16px 1px 2px; }
.account-avatar { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; color:#407d62; background:#e1f2e8; font:700 11px Manrope,sans-serif; }
.account-meta { display:grid; gap:3px; min-width:0; }
.account-meta b { color:#45534d; font-size:11px; font-weight:600; }
.account-meta span { color:#a0aaa5; font-size:9px; }
.icon-button { width:29px; height:29px; margin-left:auto; border:0; border-radius:7px; color:#98a49f; background:transparent; font-size:15px; }
.icon-button:hover { color:#44554d; background:#eff4f1; }
.mobile-settings { display:none; }
.main-panel { min-width:0; }
.topbar { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 39px; border-bottom:1px solid var(--line); background:#ffffffa8; }
.breadcrumb { display:flex; align-items:center; gap:10px; color:#98a49f; font-size:11px; }
.breadcrumb b { color:#c4ceca; font-weight:400; }
.breadcrumb strong { color:#53605a; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:15px; color:#81908a; font-size:10px; }
.live-label { display:flex; align-items:center; gap:7px; }
.pulse-dot { width:6px; height:6px; border-radius:50%; background:#54b586; box-shadow:0 0 0 3px #e6f5ec; }
.top-divider { height:17px; width:1px; background:#e4ebe7; }
.server-label { display:flex; align-items:center; gap:7px; }
.server-icon { color:#7c9c8c; font-size:14px; }
.content { width:min(1120px,100%); margin:0 auto; padding:39px 40px 21px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-bottom:24px; }
.page-heading h1 { margin:7px 0 5px; color:#24312c; font:700 25px Manrope,'Noto Sans SC',sans-serif; letter-spacing:-.7px; }
.page-heading p { margin:0; color:#8a9690; font-size:12px; }
.refresh-button { height:35px; gap:7px; color:#68766f; }
.refresh-icon { display:inline-block; color:#61a982; font-size:17px; transition:transform .35s; }
.refresh-icon.spin { transform:rotate(360deg); }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.service-card { min-width:0; padding:19px 20px 15px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 4px 16px #233a2e04; }
.service-card-top { display:flex; align-items:center; justify-content:space-between; }
.service-mark { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; font-size:15px; font-weight:700; }
.mark-green { color:#41966d; background:#e7f5ed; }
.mark-blue { color:#6883ba; background:#edf1fb; }
.service-status { height:23px; display:flex; align-items:center; gap:6px; padding:0 9px; border-radius:20px; font-size:10px; font-weight:600; }
.service-status i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.service-status.is-up { color:#398c63; background:#eaf6ef; }
.service-status.is-down { color:#a97453; background:#f7f0e9; }
.service-name { overflow:hidden; margin-top:16px; color:#35423c; font-size:14px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.service-unit { overflow:hidden; margin-top:5px; color:#a1aaa6; font:10px Manrope,'DM Sans',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.service-card-bottom { display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:12px; border-top:1px solid #f0f3f1; color:#96a19b; font-size:9px; }
.service-card-bottom>span:first-child { display:flex; align-items:center; gap:6px; }
.service-restart { margin-left:auto; padding:0; border:0; color:#78a18d; background:transparent; font-size:9px; }
.service-restart:hover { color:#39795b; text-decoration:underline; }
.service-restart:disabled { opacity:.45; cursor:wait; }
.tiny-dot { width:5px; height:5px; border-radius:50%; background:#c6cfca; }
.tiny-dot.up { background:#61b388; }
.section-block { margin-top:33px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:13px; }
.section-heading h2 { margin:0; color:#35413c; font-size:13px; font-weight:650; }
.section-heading p { margin:5px 0 0; color:#99a39e; font-size:10px; }
.updated-label { color:#a0aaa5; font-size:9px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.resource-card { padding:15px 16px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.resource-top { display:flex; align-items:center; justify-content:space-between; color:#88958f; font-size:10px; }
.resource-symbol { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; font-size:15px; }
.resource-symbol.lavender { color:#8580bb; background:#f0effa; }
.resource-symbol.mint { color:#4d9c76; background:#e9f6ee; }
.resource-symbol.blue { color:#6e8cc6; background:#edf2fb; }
.resource-value { margin:14px 0 12px; color:#324039; white-space:nowrap; }
.resource-value b { font:700 20px Manrope,'DM Sans',sans-serif; letter-spacing:-.5px; }
.resource-value span { color:#a0aaa4; font-size:9px; }
.resource-value i { font-style:normal; }
.meter { height:4px; overflow:hidden; border-radius:5px; background:#eff3f1; }
.meter i { width:0; height:100%; display:block; border-radius:5px; background:linear-gradient(90deg,#75c39a,#4da980); transition:width .5s ease; }
#cpuMeter { background:linear-gradient(90deg,#aaa4d7,#8b85c8); }
#diskMeter { background:linear-gradient(90deg,#8aa7da,#7090c8); }
.resource-foot { display:flex; justify-content:space-between; gap:6px; margin-top:10px; color:#a0aaa5; font-size:9px; }
.resource-foot b { color:#74817a; font-weight:600; text-align:right; }
.separation-card { display:flex; align-items:center; gap:16px; margin-top:24px; padding:17px 18px; border:1px solid #e9efeb; border-radius:11px; background:linear-gradient(110deg,#f0f7f2,#f7f9f8 62%,#f2f5fb); }
.separation-icon { flex:0 0 37px; width:37px; height:37px; display:grid; place-items:center; border-radius:11px; color:#4b9670; background:#e2f2e8; font-size:19px; }
.separation-copy { min-width:0; }
.separation-copy .eyebrow { font-size:8px; letter-spacing:1px; }
.separation-copy h2 { margin:5px 0 4px; color:#45534b; font-size:12px; font-weight:650; }
.separation-copy p { margin:0; color:#87958d; font-size:9px; line-height:1.7; }
.separation-badge { display:flex; align-items:center; gap:6px; margin-left:auto; padding:7px 9px; border:1px solid #e1ebe4; border-radius:20px; color:#6e9b7c; background:#ffffff90; font-size:9px; white-space:nowrap; }
.separation-badge span { width:5px; height:5px; border-radius:50%; background:#62b583; }
.footer { display:flex; justify-content:space-between; margin-top:24px; color:#b0bab4; font:8px Manrope,'DM Sans',sans-serif; letter-spacing:.45px; }
.footer b { color:#87948c; font-weight:500; letter-spacing:0; }
.toast { position:fixed; right:24px; bottom:22px; z-index:5; max-width:calc(100vw - 40px); padding:11px 15px; border:1px solid #e3eae6; border-radius:9px; color:#52615a; background:white; box-shadow:0 10px 35px #20372a18; font-size:12px; opacity:0; pointer-events:none; transform:translateY(7px); transition:.2s ease; }
.toast.show { opacity:1; transform:translateY(0); }
[hidden] { display:none !important; }
@media (max-width:900px) { .dashboard { grid-template-columns:190px minmax(0,1fr); } .content { padding:32px 24px 20px; } .topbar { padding:0 24px; } .service-grid { gap:11px; } .service-card { padding:16px; } }
@media (max-width:650px) { .dashboard { display:block; } .sidebar { position:static; width:100%; height:57px; flex-direction:row; align-items:center; padding:0 15px; border-right:0; border-bottom:1px solid var(--line); } .sidebar .auth-brand { padding:0; } .nav-label,.nav-item,.nav-service,.sidebar-bottom { display:none; } .topbar { height:48px; padding:0 16px; } .topbar-right { gap:8px; } .content { padding:26px 15px 20px; } .page-heading { align-items:center; margin-bottom:18px; } .page-heading h1 { font-size:21px; } .page-heading p { font-size:10px; } .button.refresh-button { width:35px; padding:0; overflow:hidden; color:transparent; font-size:0; } .refresh-icon { color:#61a982; font-size:18px; } .service-grid { grid-template-columns:1fr; } .service-card { padding:14px 15px 12px; } .service-name { margin-top:12px; } .service-card-bottom { margin-top:13px; } .section-block { margin-top:25px; } .resource-grid { grid-template-columns:1fr; gap:9px; } .resource-card { padding:12px 14px; } .resource-value { margin:10px 0; } .resource-value b { font-size:18px; } .separation-card { align-items:flex-start; gap:11px; padding:14px 12px; } .separation-icon { flex-basis:32px; width:32px; height:32px; } .separation-badge { display:none; } .auth-card { padding:29px 23px 20px; } }

/* Compact server-operations layout inspired by familiar hosting panels. */
:root { --panel-bg:#f3f6f8; --panel-line:#e4e9ed; --panel-ink:#1f2933; --panel-muted:#788592; --nav-bg:#17212b; --nav-muted:#9aa8b5; --nav-active:#253442; --accent:#36b37e; }
body { color:var(--panel-ink); background:var(--panel-bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif; }
.ambient { opacity:.35; }
.dashboard { grid-template-columns:244px minmax(0,1fr); }
.sidebar { padding:24px 15px 17px; border-right:0; color:#fff; background:var(--nav-bg); box-shadow:7px 0 25px #19273414; }
.sidebar .auth-brand { padding:0 11px; color:#f6faf8; }
.sidebar .auth-brand i { color:#91a6b4; }
.sidebar .brand-mark { color:#12382b; background:linear-gradient(145deg,#78e1ae,#35b77b); }
.nav-label { margin:42px 11px 10px; color:#718391; font-size:9px; letter-spacing:1.2px; }
.nav-label.separated { margin-top:28px; }
.nav-item { height:41px; color:#dce8e2; background:transparent; }
.nav-item:hover,.nav-service:hover { color:#fff; background:#22303d; }
.nav-item.active { color:#eafff3; background:var(--nav-active); box-shadow:inset 3px 0 var(--accent); }
.nav-icon { color:#68d29f; }
.nav-service { width:100%; border:0; border-radius:7px; color:#c1ccd4; background:transparent; text-align:left; }
.nav-service small { color:#708391; }
.service-mini-dot.mint { box-shadow:0 0 0 3px #2b4b3b; }
.service-mini-dot.blue { box-shadow:0 0 0 3px #304057; }
.sidebar-bottom { margin-top:auto; }
.secure-chip { border-color:#30404d; color:#a7b4bd; background:#1b2934; }
.secure-dot { background:#57cf94; }
.secure-shield { color:#6ad4a2; }
.account { border-top:1px solid #2b3a46; }
.account-avatar { color:#c7f7dd; background:#285842; }
.account-meta b { color:#e2ece8; }
.account-meta span { color:#7f919e; }
.icon-button { color:#8294a1; }
.icon-button:hover { color:#e4f2eb; background:#263744; }
.main-panel { background:var(--panel-bg); }
.topbar { height:64px; padding:0 42px; border-bottom-color:var(--panel-line); background:#fff; }
.breadcrumb { color:#8b98a3; }
.breadcrumb strong { color:#334351; }
.topbar-right { color:#7d8b96; }
.server-icon { color:#668195; }
.content { width:min(1240px,100%); padding:36px 42px 28px; }
.page-heading { margin-bottom:22px; }
.page-heading h1 { color:#1d2a35; font-size:27px; letter-spacing:-.8px; }
.page-heading p { color:#81909c; }
.eyebrow { color:#80909d; }
.button { border-color:#dce4e8; border-radius:7px; color:#566672; }
.button:hover { border-color:#bfcdd5; background:#f8fafb; }
.button.primary { border-color:#31a872; background:linear-gradient(135deg,#3fc185,#2da56f); }
.host-strip { display:grid; grid-template-columns:minmax(240px,1.7fr) repeat(2,minmax(120px,.75fr)) auto; align-items:center; gap:24px; padding:15px 18px; border:1px solid var(--panel-line); border-radius:9px; background:#fff; box-shadow:0 3px 12px #24374605; }
.host-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.host-glyph { width:35px; height:35px; display:grid; place-items:center; flex:0 0 35px; border-radius:8px; color:#47749a; background:#edf4fa; font-size:18px; }
.host-identity div { display:grid; gap:4px; min-width:0; }
.host-identity b { overflow:hidden; color:#30404d; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.host-identity span { overflow:hidden; color:#8795a0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.host-stat { display:grid; gap:4px; padding-left:23px; border-left:1px solid #edf0f2; }
.host-stat span { color:#8a98a3; font-size:10px; }
.host-stat b { color:#3d4d59; font-size:12px; font-weight:650; }
.host-health { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #dff0e6; border-radius:7px; color:#3d946b; background:#f1fbf5; font-size:11px; white-space:nowrap; }
.host-health.warn { border-color:#f1dfc9; color:#a06e3d; background:#fff9f1; }
.host-health.warn .pulse-dot { background:#d39a58; box-shadow:0 0 0 3px #fff0dc; }
.section-block { margin-top:31px; }
.section-heading { margin-bottom:13px; }
.section-heading h2 { color:#31414d; font-size:14px; }
.section-heading p,.updated-label { color:#8997a2; }
.resource-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.resource-card { min-height:151px; padding:16px 17px 14px; border-color:var(--panel-line); border-radius:9px; box-shadow:0 3px 12px #24374605; }
.resource-top { color:#72818d; }
.resource-symbol { width:27px; height:27px; border-radius:7px; }
.resource-symbol.lavender { color:#766bb3; background:#f0effa; }
.resource-symbol.mint { color:#3f9b70; background:#e9f8ef; }
.resource-symbol.blue { color:#557eb7; background:#edf4fc; }
.resource-symbol.amber { color:#bb8535; background:#fff6e4; }
.resource-value { margin:17px 0 13px; color:#273744; }
.resource-value b { font-size:21px; }
.resource-value span { color:#8795a0; }
.meter { height:5px; background:#edf1f3; }
.resource-foot { color:#8b99a4; }
.resource-foot b { color:#61717d; }
.load-values { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:21px 0 17px; }
.load-values div { display:grid; gap:3px; }
.load-values b { color:#344856; font:650 18px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.load-values span { color:#8b99a4; font-size:9px; }
.service-count { padding:5px 9px; border:1px solid #d9e9df; border-radius:6px; color:#3d966b; background:#f1fbf5; font-size:10px; font-weight:650; white-space:nowrap; }
.service-grid { gap:14px; }
.service-card { padding:18px 19px 15px; border-color:var(--panel-line); border-radius:9px; box-shadow:0 3px 12px #24374605; }
.service-status.is-up { color:#338c63; background:#edf9f2; }
.service-status.is-down { color:#a16c3c; background:#fff7ee; }
.service-name { color:#30414d; }
.service-unit { color:#8997a2; }
.service-card-bottom { border-top-color:#edf1f3; color:#8795a0; }
.service-restart { color:#4c9b73; }
.service-restart:hover { color:#2c7f59; }
.separation-card { margin-top:27px; padding:17px 19px; border-color:#dfe9e4; border-radius:9px; background:linear-gradient(110deg,#eef8f2,#f6f9f8 62%,#eef4fb); }
.separation-copy h2 { color:#3b4d58; font-size:13px; }
.separation-copy p { color:#7e8f99; font-size:10px; }
.separation-badge { border-color:#d9e9df; color:#4b956f; background:#fff; }
.footer { color:#99a6af; }
.footer b { color:#71818c; }
.toast { border-color:#dce5e9; color:#465965; box-shadow:0 10px 35px #1d334218; }
@media (max-width:1040px) {
  .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .host-strip { grid-template-columns:minmax(200px,1.4fr) repeat(2,minmax(110px,.7fr)); }
  .host-health { grid-column:1/-1; justify-self:start; }
}
@media (max-width:900px) {
  .dashboard { grid-template-columns:205px minmax(0,1fr); }
  .content { padding:30px 24px 24px; }
  .topbar { padding:0 24px; }
  .host-strip { gap:14px; }
}
@media (max-width:650px) {
  .dashboard { display:block; }
  .sidebar { position:static; width:100%; height:57px; padding:0 15px; border-bottom:1px solid #293945; }
  .sidebar .auth-brand { padding:0; }
  .nav-label,.nav-item,.nav-service,.sidebar-bottom { display:none; }
  .topbar { height:49px; padding:0 16px; }
  .topbar-right { gap:8px; }
  .topbar-right .server-label,.top-divider { display:none; }
  .mobile-settings { display:grid; width:44px; height:44px; margin-left:0; place-items:center; }
  .content { padding:25px 15px 20px; }
  .page-heading { align-items:center; margin-bottom:18px; }
  .page-heading h1 { font-size:22px; }
  .page-heading p { font-size:10px; }
  .host-strip { grid-template-columns:1fr 1fr; gap:13px; padding:13px; }
  .host-identity { grid-column:1/-1; }
  .host-stat { padding-left:0; border-left:0; }
  .host-health { grid-column:1/-1; justify-self:stretch; justify-content:center; }
  .resource-grid { grid-template-columns:1fr; gap:9px; }
  .resource-card { min-height:0; padding:13px 14px; }
  .resource-value { margin:11px 0; }
  .resource-value b { font-size:19px; }
  .load-values { margin:15px 0 13px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { padding:14px 15px 12px; }
  .section-block { margin-top:25px; }
  .separation-card { align-items:flex-start; gap:11px; padding:14px 12px; }
  .separation-icon { flex-basis:32px; width:32px; }
  .separation-badge { display:none; }
  .footer { gap:12px; line-height:1.5; }
}

/* Management sections */
.compact-button { height:32px; padding:0 11px; font-size:10px; }
.health-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr); gap:14px; }
.health-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.health-item { min-height:66px; display:flex; align-items:center; gap:10px; padding:12px 13px; border:1px solid var(--panel-line); border-radius:8px; background:#fff; }
.health-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#9caab3; }
.health-item.ok { border-color:#dceee3; background:#fbfefc; }
.health-item.ok .health-dot { background:#45b47d; box-shadow:0 0 0 3px #e0f5e9; }
.health-item.error { border-color:#f0dfd3; background:#fffdfb; }
.health-item.error .health-dot { background:#cf7f57; box-shadow:0 0 0 3px #fff0e8; }
.health-item>div { min-width:0; display:grid; gap:4px; }
.health-item b { overflow:hidden; color:#3b4b56; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.health-item small { overflow:hidden; color:#8997a2; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.health-item strong { margin-left:auto; color:#768692; font-size:9px; font-weight:600; }
.health-item.ok strong { color:#3d966b; }
.health-item.error strong { color:#b26e4d; }
.port-card { padding:14px 15px; border:1px solid var(--panel-line); border-radius:8px; background:#fff; }
.subheading { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid #edf1f3; }
.subheading b { color:#3b4b56; font-size:11px; }
.subheading span { color:#8d9aa4; font-size:9px; }
.port-list { display:grid; }
.port-row { display:grid; grid-template-columns:1fr auto; gap:4px 8px; align-items:center; padding:10px 0; border-bottom:1px solid #f0f3f5; }
.port-row:last-child { border-bottom:0; }
.port-row>span:first-child { display:flex; align-items:baseline; gap:7px; min-width:0; }
.port-row b { color:#3a4e5c; font:650 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.port-row small { overflow:hidden; color:#8a98a3; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.port-row em { padding:3px 6px; border-radius:4px; color:#a16d43; background:#fff6ec; font-size:8px; font-style:normal; white-space:nowrap; }
.port-row em.private { color:#438b68; background:#edf9f1; }
.port-address { grid-column:1/-1; color:#a1adb5; font:9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.log-actions { display:flex; align-items:center; gap:8px; }
.log-actions select { height:32px; padding:0 8px; border:1px solid #dce4e8; border-radius:7px; color:#536673; background:#fff; font-size:10px; outline:none; }
.log-viewer { min-height:230px; max-height:390px; overflow:auto; margin:0; padding:14px 15px; border:1px solid #283744; border-radius:8px; color:#d0e0e7; background:#16222c; font:10px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-word; }
.audit-table-wrap { overflow:auto; border:1px solid var(--panel-line); border-radius:8px; background:#fff; }
.audit-table { width:100%; border-collapse:collapse; min-width:600px; font-size:10px; }
.audit-table th { color:#8795a0; background:#f8fafb; font-size:9px; font-weight:600; text-align:left; }
.audit-table th,.audit-table td { padding:10px 13px; border-bottom:1px solid #edf1f3; }
.audit-table td { color:#52636f; }
.audit-table tbody tr:last-child td { border-bottom:0; }
.audit-action { padding:3px 6px; border-radius:4px; color:#4a7ea0; background:#edf5fb; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.empty-state { padding:18px; color:#99a6af; font-size:10px; text-align:center; }
.service-detail { margin-left:auto; padding:0; border:0; color:#6f8998; background:transparent; font-size:9px; }
.service-detail:hover { color:#3e718d; text-decoration:underline; }
.service-card-bottom .service-restart { margin-left:0; }
.detail-dialog { max-width:540px; }
.detail-status-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0 15px; border-bottom:1px solid #edf1f3; color:#7d8c96; font-size:11px; }
.detail-state { padding:4px 8px; border-radius:5px; color:#8d6d4b; background:#fff5ea; font-size:10px; }
.detail-state.is-up { color:#398b65; background:#edf9f2; }
.detail-state.is-down { color:#a16d4c; background:#fff4ed; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; padding:17px 0 5px; }
.detail-grid div { display:grid; gap:5px; min-width:0; }
.detail-grid small { color:#8c9aa4; font-size:9px; }
.detail-grid b { overflow:hidden; color:#3f505c; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px) { .health-layout { grid-template-columns:1fr; } }
@media (max-width:650px) { .health-grid { grid-template-columns:1fr; } .section-heading { align-items:flex-start; gap:10px; } .section-heading>div:first-child { min-width:0; } .log-actions { flex-wrap:wrap; justify-content:flex-end; } .log-actions select { max-width:125px; } .detail-grid { gap:12px; } }
@media (max-width:650px) {
  .sidebar { position:sticky; top:0; z-index:4; display:flex; width:100%; height:52px; min-height:52px; flex-direction:row; align-items:center; gap:5px; overflow-x:auto; padding:0 10px; scrollbar-width:none; }
  .sidebar::-webkit-scrollbar { display:none; }
  .sidebar .auth-brand,.nav-label,.sidebar-bottom { display:none; }
  .nav-item,.nav-service { display:flex; flex:0 0 auto; width:auto; height:34px; padding:0 10px; white-space:nowrap; }
  .nav-item { gap:6px; font-size:10px; }
  .nav-service { gap:8px; font-size:10px; }
  .nav-service small { margin-left:2px; }
  #overview,#services,#health,#logs,#audit,#isolation { scroll-margin-top:62px; }
}

.login-modes { display:flex; gap:5px; margin:0 0 17px; padding:3px; border:1px solid #e7edef; border-radius:8px; background:#f6f9fa; }
.login-mode { flex:1; height:30px; border:0; border-radius:6px; color:#82919b; background:transparent; font-size:11px; font-weight:600; }
.login-mode.active { color:#3e7b5e; background:#fff; box-shadow:0 1px 4px #1d35400d; }
.login-sms-row { align-items:flex-end; margin-top:2px; }
.login-sms-row .button { flex:0 0 auto; margin-bottom:16px; }
.login-note { display:block; margin:-4px 0 15px; color:#91a0a8; font-size:10px; line-height:1.6; }
.register-code-row { margin:1px 0 12px; }
.human-check { display:grid; grid-template-columns:minmax(0,1fr) 188px; align-items:end; gap:12px; margin:12px 0 17px; }
.human-check .field { margin:0; }
.captcha-box { display:flex; height:58px; align-items:center; justify-content:flex-end; gap:8px; }
.captcha-box img { display:block; width:176px; height:58px; border:1px solid #e4ebe7; border-radius:8px; background:#f1f5f3; object-fit:cover; }
.captcha-box .icon-button { width:34px; height:34px; flex:0 0 34px; }
@media (max-width:650px) { .login-sms-row .button { padding:0 10px; } }
@media (max-width:650px) { .human-check { grid-template-columns:minmax(0,1fr) 160px; gap:8px; } .captcha-box { gap:4px; } .captcha-box img { width:126px; height:48px; } }
.human-check { grid-template-columns:minmax(0,1fr) 188px; }
.captcha-box { width:100%; justify-content:flex-start; gap:6px; }
.captcha-box img { width:auto; min-width:0; flex:1 1 auto; object-fit:cover; }
.captcha-box .icon-button { width:40px; height:40px; flex:0 0 40px; }
@media (max-width:650px) { .human-check { grid-template-columns:1fr; gap:7px; } .captcha-box img { width:176px; height:58px; flex:0 1 176px; } }
@media (pointer:coarse) { .captcha-box .icon-button { width:44px; height:44px; flex-basis:44px; } }
.register-cta { min-height:48px; margin:0 0 17px; font-size:13px; }
.auth-back { display:block; margin:10px auto 0; padding:8px 12px; border:0; background:transparent; color:#428862; font-size:12px; font-weight:600; }
.register-code-row { align-items:end; gap:10px; }
.register-code-row .field { min-width:0; margin:0; }
.register-code-row .button { flex:0 0 auto; height:45px; margin:0 0 0; padding:0 13px; }
.key-reveal { margin-top:15px; padding:13px; border:1px solid #d7e9df; border-radius:10px; background:#f5faf7; }
.key-reveal .field { margin:0 0 8px; }
.key-reveal input { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.3px; }
.key-reveal-status { margin-left:9px; color:#428862; font-size:11px; }
.registration-key-list { margin:13px 0 0; padding:0; list-style:none; }
.registration-key-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid #edf1ef; }
.registration-key-list li>div { display:grid; gap:3px; min-width:0; }
.registration-key-list li b { color:#47574f; font-size:11px; }
.registration-key-list li span,.registration-key-list .key-empty { color:#929d97; font-size:10px; }
.key-revoke { flex:none; padding:7px 9px; border:1px solid #eadbd5; border-radius:7px; color:#a75f4d; background:#fff; font-size:10px; }
.key-revoke:disabled { opacity:.5; }
@media (max-width:650px) { .register-code-row { gap:8px; } .register-code-row .button { padding:0 10px; } }