:root { font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #e6edf3; background: #0b1118; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #0b1118; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app[data-state="loading"] { opacity: 0; }
.dashboard-screen { display: none; min-height: 100vh; }
.app[data-state="dashboard"] .dashboard-screen { display: block; }
.app[data-state="login"] .login-screen { display: block; }
.login-screen { position: relative; display: none; min-height: 100vh; overflow: hidden; color: #e7eef4; background: #071b2a; }
.login-grid { position: absolute; inset: 0; opacity: .68; background-image: linear-gradient(rgba(108,156,188,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(108,156,188,.08) 1px, transparent 1px); background-size: 28px 28px; }
.login-lines { position: absolute; inset: 0 41% 0 0; overflow: hidden; opacity: .82; }
.login-lines i { position: absolute; top: 56%; left: 49%; height: 1px; transform-origin: left center; background: #2f678b; }
.login-lines i:nth-child(1) { width: 48%; transform: rotate(-36deg); }.login-lines i:nth-child(2) { width: 43%; transform: rotate(-11deg); }.login-lines i:nth-child(3) { width: 47%; transform: rotate(20deg); }.login-lines i:nth-child(4) { width: 33%; transform: rotate(48deg); }.login-lines i:nth-child(5) { width: 30%; transform: rotate(-71deg); }
.login-node { position: absolute; z-index: 2; width: 14px; height: 14px; border: 2px solid #67c3eb; border-radius: 50%; background: #0c2738; box-shadow: 0 0 0 5px rgba(84,177,221,.08); }.node-a { top: 30%; left: 51%; }.node-b { top: 60%; left: 49%; border-color: #62d49a; background: #113a38; }.node-c { top: 76%; left: 22%; }
.login-m { position: absolute; z-index: 2; top: 26%; left: 13%; width: 46%; height: 48%; color: #168dde; opacity: .78; pointer-events: none; }
.login-brand { position: absolute; z-index: 3; top: 11%; left: 6.4%; display: flex; gap: 13px; align-items: center; }.login-brand img { width: 47px; height: 47px; object-fit: contain; }.login-brand strong { display: block; color: #f3f7fa; font-size: 29px; }.login-brand span { display: block; margin-top: 1px; color: #9dc9df; font-size: 14px; font-weight: 700; }
.login-meta { position: absolute; z-index: 3; left: 6.4%; bottom: 6%; display: flex; align-items: center; gap: 7px; color: #8ca6b6; font-size: 11px; }.login-meta i { width: 7px; height: 7px; border-radius: 50%; background: #5dd095; box-shadow: 0 0 0 4px rgba(93,208,149,.1); }
.login-panel { position: absolute; inset: 0 0 0 auto; z-index: 5; display: grid; width: 41%; min-width: 410px; place-items: center; padding: 42px; border-left: 1px solid #294151; background: #101a23; }.login-form-wrap { width: min(100%, 340px); }.login-form-wrap h1 { margin: 0; color: #f2f6f9; font-size: 25px; }.login-form-wrap > p { margin: 7px 0 0; color: #8d9fab; font-size: 13px; }.login-form-wrap form { margin-top: 30px; }.login-form-wrap label { display: block; margin: 18px 0 7px; color: #a8b6c1; font-size: 12px; }.login-form-wrap input, .login-form-wrap select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #344555; border-radius: 5px; outline: none; color: #e6edf2; background: #16232e; }.login-form-wrap input:focus { border-color: #56b8e5; box-shadow: 0 0 0 3px rgba(86,184,229,.12); }.password-field { position: relative; }.password-field input { padding-right: 60px; }.text-icon { position: absolute; top: 4px; right: 5px; height: 34px; padding: 0 8px; border: 0; border-radius: 4px; color: #9db0bc; background: transparent; font-size: 11px; }.text-icon:hover { color: #d9edf8; background: #203444; }.login-button { width: 100%; height: 44px; margin-top: 29px; border: 0; border-radius: 5px; color: #f6fbff; background: #1979b0; font-size: 14px; font-weight: 700; }.login-button:hover { background: #2388c0; }.login-button:disabled { background: #315c74; cursor: wait; }.login-error { min-height: 18px; margin: 11px 0 0; color: #ff7d89; font-size: 11px; }.login-form-wrap small { display: block; margin-top: 19px; color: #758795; font-size: 10px; text-align: center; }.login-version { position: absolute; z-index: 6; right: 27px; bottom: 22px; color: #718391; font-size: 10px; }
.topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #2a3947; background: #161f29; }.product-brand { display: flex; align-items: center; gap: 10px; }.product-brand img { width: 30px; height: 30px; object-fit: contain; }.product-brand strong { color: #f1f5f8; font-size: 16px; }.product-brand span { color: #8292a1; font-size: 13px; }.top-status { display: flex; align-items: center; gap: 16px; color: #8998a7; font-size: 11px; }.status-dot { display: inline-flex; align-items: center; gap: 7px; color: #8f9fab; font-weight: 700; }.status-dot::before { width: 8px; height: 8px; border-radius: 50%; background: #748493; content: ""; }.status-dot.online { color: #70d9a0; }.status-dot.online::before { background: #58cf8c; box-shadow: 0 0 0 4px rgba(88,207,140,.12); }.quiet-button { padding: 5px 8px; border: 1px solid #354351; border-radius: 4px; color: #a9bac7; background: transparent; font-size: 11px; }.quiet-button:hover { color: #e4edf2; background: #21303d; }
.app-layout { display: grid; min-height: calc(100vh - 62px); grid-template-columns: 188px minmax(0, 1fr); }.sidebar { padding: 16px 11px; border-right: 1px solid #2a3947; background: #121a24; }.nav-label { margin: 5px 11px 11px; color: #718191; font-size: 10px; font-weight: 700; }.nav-label.lower { margin-top: 25px; }.nav-item { width: 100%; height: 40px; margin: 3px 0; padding: 0 12px; border: 0; border-radius: 5px; color: #9caab8; background: transparent; font-size: 13px; text-align: left; }.nav-item:hover { background: #1b2936; }.nav-item.active { color: #bce5ff; background: #1d3a54; font-weight: 700; }.nav-note { margin: 24px 11px 0; padding-top: 14px; border-top: 1px solid #293746; color: #718191; font-size: 10px; line-height: 1.8; }.content { padding: 23px 26px 30px; background: #111923; }.view { display: none; max-width: 1450px; margin: 0 auto; }.view.shown { display: block; }.page-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.page-title h1 { margin: 0; color: #edf3f7; font-size: 23px; }.page-title p { margin: 5px 0 0; color: #8393a2; font-size: 12px; }.read-only { display: inline-flex; align-items: center; min-height: 24px; color: #82c9f2; font-size: 11px; white-space: nowrap; }.metrics { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); margin: 20px 0; overflow: hidden; border: 1px solid #2b3a49; border-radius: 6px; background: #151f2a; }.metric { min-height: 72px; padding: 14px 16px; border-right: 1px solid #2b3a49; }.metric:last-child { border-right: 0; }.metric span { color: #8595a4; font-size: 10px; }.metric b { display: block; margin-top: 6px; color: #eaf0f5; font-size: 21px; }.metric b.good { color: #69d99d; }.metric b.blue { color: #83cef8; }.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 9px; }.section-head h2 { margin: 0; color: #e7edf2; font-size: 14px; }.section-head span { color: #8292a2; font-size: 10px; }.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 12px; }.site-card, .site-list, .site-detail, .list-panel, .settings-panel { overflow: hidden; border: 1px solid #2b3a49; border-radius: 6px; background: #151f2a; }.site-card { width: 100%; min-height: 147px; padding: 16px; color: inherit; text-align: left; }.site-card:hover { border-color: #3b6981; background: #182633; }.site-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.site-card b { display: block; color: #e6edf2; font-size: 14px; }.site-card small { color: #8191a0; font-size: 10px; }.site-state { display: inline-flex; align-items: center; gap: 5px; color: #899aa7; font-size: 10px; font-weight: 700; }.site-state::before { width: 7px; height: 7px; border-radius: 50%; background: #738391; content: ""; }.site-state.online { color: #6bd99e; }.site-state.online::before { background: #59d18c; }.site-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }.site-card-grid span { display: block; color: #8191a0; font-size: 10px; }.site-card-grid strong { display: block; margin-top: 3px; color: #dbe5ec; font-size: 12px; }.site-workspace { display: grid; grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr); gap: 18px; margin-top: 20px; }.site-list { min-height: 420px; }.site-choice { width: 100%; min-height: 67px; padding: 12px 13px; border: 0; border-bottom: 1px solid #2a3846; color: #c7d4de; background: transparent; text-align: left; }.site-choice:hover, .site-choice.active { background: #1a2d3c; box-shadow: inset 3px 0 0 #5bc4f2; }.site-choice:last-child { border-bottom: 0; }.site-choice b { display: block; color: #e5edf2; font-size: 12px; }.site-choice span { display: block; margin-top: 4px; color: #8393a2; font-size: 10px; }.site-detail { min-height: 420px; padding: 18px; }.empty-state { display: grid; min-height: 380px; place-items: center; color: #8393a2; font-size: 12px; }.detail-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.detail-title h2 { margin: 0; color: #edf3f7; font-size: 18px; }.detail-title p { margin: 5px 0 0; color: #8393a2; font-size: 11px; }.detail-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0; overflow: hidden; border: 1px solid #2b3a49; border-radius: 5px; }.detail-metric { min-height: 61px; padding: 10px 12px; border-right: 1px solid #2b3a49; }.detail-metric:last-child { border-right: 0; }.detail-metric span { color: #8191a0; font-size: 10px; }.detail-metric b { display: block; margin-top: 5px; color: #e4edf3; font-size: 15px; }.detail-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(200px, .8fr); gap: 18px; }.inline-section h3 { margin: 0 0 8px; color: #dce6ed; font-size: 12px; }.table, .health { overflow: hidden; border: 1px solid #2b3a49; border-radius: 5px; }.table-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) 70px; gap: 9px; align-items: center; min-height: 46px; padding: 0 12px; border-bottom: 1px solid #2a3846; color: #aab8c5; font-size: 10px; }.table-row:last-child { border-bottom: 0; }.table-row.header { min-height: 31px; color: #778897; background: #18232e; font-weight: 700; }.table-row b { overflow: hidden; color: #e0e8ef; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }.call-tag { color: #83cef8; }.health-row { padding: 11px 12px; border-bottom: 1px solid #2a3846; }.health-row:last-child { border-bottom: 0; }.health-row div { display: flex; justify-content: space-between; gap: 8px; color: #b9c5cf; font-size: 11px; }.health-row b { color: #6bd99e; font-size: 11px; }.health-bar { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: #263847; }.health-bar i { display: block; height: 100%; border-radius: inherit; background: #5fc6ef; }.list-panel { margin-top: 20px; }.list-row { min-height: 65px; padding: 13px 15px; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid #2a3846; }.list-row:last-child { border-bottom: 0; }.list-mark { min-height: 37px; border-radius: 4px; background: #59c7f3; }.list-mark.green { background: #59d18c; }.list-mark.amber { background: #e7b457; }.list-row b { display: block; overflow: hidden; color: #e0e8ef; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }.list-row p { margin: 4px 0 0; overflow: hidden; color: #8797a7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.list-row time { color: #7c8d9d; font-size: 10px; white-space: nowrap; }.page-title select { height: 32px; padding: 0 9px; border: 1px solid #354554; border-radius: 4px; color: #b9c6d1; background: #182430; font-size: 11px; }.settings-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 20px; }.settings-panel div { min-height: 166px; padding: 17px; border-right: 1px solid #2b3a49; }.settings-panel div:last-child { border-right: 0; }.settings-panel b { display: block; color: #e2eaf0; font-size: 12px; }.settings-panel span { display: block; margin-top: 9px; color: #82c9f2; font-size: 11px; }.settings-panel p { margin: 12px 0 0; color: #8393a2; font-size: 11px; line-height: 1.6; }.empty-list { padding: 32px 16px; color: #8595a4; font-size: 12px; text-align: center; }
@media (max-width: 850px) { .login-panel { position: relative; width: 100%; min-width: 0; min-height: 490px; margin-top: 270px; padding: 34px 25px; border-top: 1px solid #294151; border-left: 0; }.login-screen { min-height: 760px; }.login-lines { right: 0; height: 270px; }.login-m { top: 4px; right: 2%; left: auto; width: 47%; height: 244px; }.login-brand { top: 48px; left: 25px; }.login-brand strong { font-size: 24px; }.login-meta, .login-version { display: none; }.app-layout { grid-template-columns: 56px minmax(0, 1fr); }.sidebar { padding: 16px 6px; }.nav-label, .nav-note { display: none; }.nav-item { padding: 0; text-align: center; font-size: 0; }.nav-item::first-letter { font-size: 13px; }.content { padding: 18px 14px; }.site-workspace, .detail-columns { grid-template-columns: 1fr; }.site-list { min-height: 0; }.settings-panel { grid-template-columns: 1fr; }.settings-panel div { border-right: 0; border-bottom: 1px solid #2b3a49; }.settings-panel div:last-child { border-bottom: 0; } }
@media (max-width: 590px) { .topbar { padding: 0 13px; }.product-brand span, .top-status time { display: none; }.top-status { gap: 9px; }.metrics { grid-template-columns: repeat(2, 1fr); }.metric:nth-child(2n) { border-right: 0; }.metric { border-bottom: 1px solid #2b3a49; }.metric:nth-last-child(-n + 2) { border-bottom: 0; }.detail-metrics { grid-template-columns: repeat(2, 1fr); }.detail-metric:nth-child(2n) { border-right: 0; }.detail-metric { border-bottom: 1px solid #2b3a49; }.detail-metric:nth-last-child(-n + 2) { border-bottom: 0; }.page-title { align-items: flex-start; }.page-title select { max-width: 132px; }.list-row { grid-template-columns: 5px minmax(0, 1fr); }.list-row time { grid-column: 2; }.site-card-grid { grid-template-columns: repeat(2, 1fr); } }