body[data-theme='dark']{--ink:#e2e9ff;--muted:#8e9db9;--blue:#7b9cff;--border:#35435e;--glass:#1c2943f0;--glass-hover:#273653;--field:#202e49;--soft:#27344f;background:#111b30}body[data-theme='dark'] .scenery{background:linear-gradient(180deg,#101b3180,#101b3165 55%,#111b30 100%),url('landscape.png') center 65%/cover}body[data-theme='dark'] .topbar{background:#192640df;border-color:#4355774a}body[data-theme='dark'] .brand small,body[data-theme='dark'] .top-actions{border-color:#41517055}body[data-theme='dark'] .top-nav-item{color:#9cadca}body[data-theme='dark'] .top-nav-item.active{color:var(--blue)}body[data-theme='dark'] .appearance-button{background:#293854;color:#afc3ea}body[data-theme='dark'] .hero h1{color:#eef3ff;text-shadow:0 2px 8px #0e1b3266}body[data-theme='dark'] .hero p{color:#bac9e5}body[data-theme='dark'] .search-box{background:#1e2e49ed;border-color:#6c82ad4f}body[data-theme='dark'] .search-box kbd{background:#34415c;color:#a7b5d0}body[data-theme='dark'] .nav-item,body[data-theme='dark'] .nav-manage{background:#243652dc;color:#aabbd5;border-color:#5470953b}body[data-theme='dark'] .nav-item.active{background:#385282;color:#fff;border-color:#6988bd}body[data-theme='dark'] .site-section{border-color:#42547550}body[data-theme='dark'] .site-card{background:#23324c}body[data-theme='dark'] .site-card:hover{border-color:#6b8aba}body[data-theme='dark'] .site-icon.photo{background:#dae6fc!important}body[data-theme='dark'] .section-count,body[data-theme='dark'] .view-toggle{background:#25344f;border-color:#435576}body[data-theme='dark'] .view-toggle button.selected{background:#3b5279}body[data-theme='dark'] .card-tools{background:#2d3e5b;border-color:#465c80}body[data-theme='dark'] .card-tools button:hover{background:#425674}body[data-theme='dark'] .card-arrow,body[data-theme='dark'] .section-right button{color:#95a9cb}body[data-theme='dark'] .button.primary{background:#5073ee;color:#fff}body[data-theme='dark'] dialog{background:#202e46;color:#e2e9ff}body[data-theme='dark'] dialog label,body[data-theme='dark'] .modal-head h2{color:#c8d7f1}body[data-theme='dark'] dialog input,body[data-theme='dark'] dialog textarea,body[data-theme='dark'] dialog select{background:#293953;color:#e2e9ff;border-color:#465e80}body[data-theme='dark'] .demo-tip,body[data-theme='dark'] .backup-tools{background:#25354f;border-color:#435977}body[data-theme='dark'] .icon-preview{background:#263650;border-color:#435977}
@media(min-width:1600px){.hero{margin-top:73px}.hero h1{font-size:47px}.scenery{height:515px}.sidebar{margin-bottom:46px}}
@media(max-width:1200px){.brand small{display:none}.top-nav{gap:23px}.site-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.featured .site-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.featured .card-main{gap:9px}.featured .site-icon{width:43px;height:43px}.featured .card-title{font-size:12px}.featured .card-description{font-size:10px}.section-description{font-size:11px}.sidebar nav{justify-content:flex-start}.hero h1{font-size:39px}}
@media(max-width:900px){.topbar,.content{width:calc(100% - 36px)}.topbar{padding:0 16px;gap:16px}.brand strong{font-size:21px}.top-actions{gap:8px;padding-left:13px}.top-nav{gap:20px}.site-grid,.featured .site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.featured .card-main{gap:14px}.featured .site-icon{width:51px;height:51px}.featured .card-title{font-size:14px}.featured .card-description{font-size:11px}.hero{margin-top:52px}.hero h1{font-size:35px;letter-spacing:2px}.hero p{font-size:13px}.search-row{max-width:640px}.section-description{display:none}.section-heading h2{font-size:18px}.sidebar{margin-bottom:32px}.scenery{height:460px}.list-mode .site-grid{grid-template-columns:1fr}.list-mode .card-title{width:180px}.list-mode .card-title-wrap{gap:15px}.section-right{gap:11px}}
@media(max-width:600px){.topbar,.content{width:calc(100% - 28px)}.topbar{height:62px;margin-top:10px;padding:0 12px;gap:10px;border-radius:17px}.brand{gap:5px}.brand-mark,.brand-mark svg{width:32px;height:32px}.brand strong{font-size:18px;letter-spacing:0}.top-nav{gap:12px}.top-nav-item{font-size:11px;gap:0}.top-nav-item svg{display:none}.top-nav-item.active:after{bottom:10px;height:2px}.top-actions{border:0;padding:0;gap:5px}.appearance-button{width:29px;height:29px;padding:5px}.appearance-button svg{width:16px;height:16px}.login-button{font-size:10px;min-height:29px;padding:6px 8px;border-radius:8px}.login-button svg{display:none}.hero{margin:47px 0 22px}.hero h1{font-size:29px;letter-spacing:1px;line-height:1.6}.hero p{font-size:11px;letter-spacing:0}.search-box{height:56px;padding:6px 6px 6px 17px;gap:11px;border-radius:29px}.search-box>svg{width:20px;height:20px}.search-box input{font-size:12px}.search-box kbd{display:none}.search-box .button{height:42px;min-width:69px;font-size:13px;border-radius:24px}.sidebar{margin:19px auto 27px}.nav-item{padding:7px 12px;font-size:11px;gap:4px}.sidebar nav{gap:7px}.nav-count{font-size:9px}.scenery{height:390px;background-position:40% 65%}.results-line{font-size:10px;padding:0 3px;margin-bottom:10px}.site-section{padding:17px 14px 18px;margin-bottom:14px;border-radius:18px}.section-heading{gap:8px;margin-bottom:14px;min-height:23px}.section-heading h2{font-size:16px}.section-icon{width:24px}.section-icon svg{width:22px;height:22px}.section-right button{font-size:10px}.section-count{font-size:9px;padding:2px 5px}.site-grid,.featured .site-grid{gap:9px}.card-link{padding:12px 9px;min-height:82px;gap:4px}.card-main,.featured .card-main{gap:8px}.site-icon,.featured .site-icon{width:38px;height:42px;border-radius:10px;font-size:19px}.site-icon.photo img{width:29px;height:29px}.site-icon.text-long{font-size:10px;padding:5px;letter-spacing:0}.card-title,.featured .card-title{font-size:11px}.card-description,.featured .card-description{font-size:9px}.card-arrow{margin:0}.card-arrow svg{width:11px;height:11px}.card-tools{opacity:1;top:-7px;right:6px;padding:1px}.card-tools button{padding:2px}.card-tools svg{width:10px;height:10px}.access-badge{font-size:8px}.list-mode .card-title-wrap{display:block}.list-mode .card-title{width:auto;margin-bottom:3px}.list-mode .card-description{font-size:11px}.list-mode .card-link{padding:11px 14px}.list-mode .site-icon{width:44px;height:44px}.list-mode .card-main{gap:13px}footer{font-size:9px;padding:15px 3px 25px}.edit-layout{grid-template-columns:1fr;gap:15px}.icon-editor{border:0;border-top:1px solid #e4ebf0;padding:18px 0 0;display:grid;grid-template-columns:90px 1fr;column-gap:18px}.plain-label{grid-column:1/-1}.icon-preview{grid-row:2/5;height:100px}.icon-tabs{margin-bottom:8px}.color-label,.color-options{grid-column:2}.color-label{margin-top:10px;margin-bottom:7px}dialog{padding:22px 20px}.modal-head h2{font-size:19px}.form-two{gap:10px}.group-edit-row{gap:3px}.group-edit-row input{padding:7px;width:100px}.group-edit-row button{padding:4px}.group-edit-row small{width:30px}.modal-footer{gap:8px}.toast{font-size:11px}body.is-admin .top-nav-item[data-action='settings']{display:none!important}}
@media(max-width:370px){.top-nav{gap:9px}.brand strong{font-size:16px}.top-actions{gap:3px}.site-grid,.featured .site-grid{grid-template-columns:1fr}.hero h1{font-size:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body.is-admin .mobile-settings{display:none!important}@media(max-width:600px){body.is-admin .mobile-settings{display:inline-flex!important}.results-actions{gap:7px}.results-line{flex-wrap:wrap;gap:7px}}
@media(min-width:901px){.hero{margin-top:55px}.sidebar{margin-bottom:26px}.results-line{margin-bottom:9px}.site-section{padding-top:20px;padding-bottom:20px}.section-heading{margin-bottom:14px;min-height:27px}.card-link{min-height:76px;padding-top:11px;padding-bottom:11px}}

/* Host information follows the same card rhythm as the shared navigation. */
.system-status{padding:24px;border-radius:22px;background:var(--glass);border:1px solid var(--border);box-shadow:0 8px 30px #416db008;margin-bottom:20px}
.system-status .status-header{justify-content:space-between;gap:16px;margin-bottom:20px}
.status-heading{display:flex;align-items:center;gap:10px;min-width:0}
.status-live-dot{width:8px;height:8px;background:#0caf84;border-radius:50%;box-shadow:0 0 0 4px #0caf8410;flex-shrink:0}
.system-status .status-header strong{font-size:18px;font-weight:650;letter-spacing:.2px;color:var(--ink)}
.system-status .status-header span:not(.status-live-dot){font-size:13px;color:var(--muted)}
.system-status .status-header small{font-size:12px;color:var(--muted);margin:0;text-align:right;line-height:1.6}
.system-status .status-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.system-status .status-metric{padding:18px 16px 15px;border:1px solid var(--border);border-radius:14px;background:var(--soft);gap:10px;min-width:0}
.system-status .metric-top{gap:8px;align-items:center}
.system-status .metric-top small{font-size:14px;color:var(--ink);font-weight:500;white-space:nowrap}
.system-status .metric-top strong{font-size:27px;font-weight:650;letter-spacing:-.6px;line-height:1.2;font-variant-numeric:tabular-nums}
.system-status .status-bar{height:6px;margin:2px 0 0;background:#6c83a112;border-radius:8px}
.system-status .status-bar i{background:#0daf83;border-radius:8px}
.system-status .metric-cpu .status-bar i{background:#537cf5}
.system-status .metric-disk .status-bar i{background:#9b7aed}
.system-status .metric-quota .status-bar i{background:#24aabb}
.system-status .status-metric>span{font-size:13px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere;letter-spacing:0}
.system-status .status-transfer{display:block;margin-top:16px}
.traffic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.traffic-card{min-width:0;border:1px solid var(--border);border-radius:14px;padding:17px 18px;background:var(--panel,var(--glass))}
.traffic-heading{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:16px}
.traffic-heading h3{font-size:14px;font-weight:600;margin:0;color:var(--ink);white-space:nowrap}
.traffic-heading>span{font-size:12px;color:var(--muted);white-space:nowrap;line-height:1.6}
.traffic-live .traffic-heading>span{color:#0b966e;background:#0caf8410;padding:2px 8px;border-radius:6px}
.traffic-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.traffic-values>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.traffic-label{font-size:13px;color:var(--muted);line-height:1.5}
.traffic-label i{font-style:normal;font-size:15px;font-weight:650;margin-right:3px}
.traffic-up{color:#079c76}.traffic-down{color:#4475ed}
.traffic-values strong{font-size:23px;font-weight:600;letter-spacing:-.4px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.traffic-values strong small{font-size:13px;font-weight:500;color:var(--muted);margin-left:3px;letter-spacing:0}
.traffic-card p{font-size:12px;color:var(--muted);line-height:1.5;margin:14px 0 0}
.traffic-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 2px 0;font-size:12px;color:var(--muted);line-height:1.7;flex-wrap:wrap}
.traffic-footer strong{font-size:13px;color:var(--ink);font-weight:500;margin-left:8px;font-variant-numeric:tabular-nums}
.system-status .latency-line{margin-top:16px;padding-top:16px;gap:16px;align-items:center;font-size:13px;flex-wrap:wrap}
.system-status .latency-line>span{font-size:13px;color:var(--ink);font-weight:500}
.system-status .latency-line>div{display:flex;gap:10px;flex-wrap:wrap}
.system-status .latency-line>div>span{font-size:12px;border:1px solid var(--border);border-radius:7px;background:var(--soft);padding:5px 10px;color:var(--muted)}
.system-status .latency-line b{font-size:13px;color:var(--ink);font-weight:500}
.system-status .latency-line>small{font-size:12px;color:var(--muted);margin-left:auto}
@media(max-width:1100px){.system-status .metric-top strong{font-size:24px}.traffic-values strong{font-size:20px}.traffic-card{padding:16px 14px}.traffic-heading{flex-wrap:wrap;gap:4px}.traffic-values{gap:8px}}
@media(max-width:800px){.system-status .status-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.traffic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.traffic-live{grid-column:1/-1}.traffic-live .traffic-values{grid-template-columns:repeat(2,minmax(0,1fr))}.traffic-live .traffic-heading{flex-wrap:nowrap}.traffic-values strong{font-size:22px}.traffic-footer{align-items:flex-start;flex-direction:column;gap:4px}.system-status .latency-line>small{margin-left:0}}
@media(max-width:540px){.system-status{padding:18px 16px}.system-status .status-header{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:16px}.system-status .status-header small{width:auto;text-align:left;margin-left:18px}.system-status .status-metric{padding:14px 12px;gap:8px}.system-status .metric-top small{font-size:13px}.system-status .metric-top strong{font-size:24px}.system-status .status-metric>span{font-size:12px}.traffic-grid{grid-template-columns:1fr}.traffic-live{grid-column:auto}.traffic-heading{flex-wrap:nowrap}.traffic-card{padding:16px}.traffic-values strong{font-size:24px}.system-status .latency-line{gap:10px}.traffic-footer strong{margin-left:0;display:block}.system-status .status-header span:not(.status-live-dot){font-size:12px}}
@media(max-width:540px){.system-status .metric-top{flex-direction:column;align-items:flex-start;gap:6px}.traffic-values strong small{font-size:13px;letter-spacing:0;white-space:nowrap}}