:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; --bg:#0b1220; --panel:#111c2e; --line:#24334a; --text:#ecf3ff; --muted:#8fa1ba; --blue:#2f83f7; --green:#26c281; --red:#ff6677; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-size:14px; } button,input,textarea,select { font:inherit; } button { cursor:pointer; }
.hidden { display:none !important; }.muted,.panel p { color:var(--muted); }.message { min-height:20px; color:#77c6ff; }.message.error { color:#ff8c99; }
.login-view { min-height:100dvh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 0,#17345d 0,transparent 40%),var(--bg); }
.login-card { width:min(420px,100%); padding:34px; border:1px solid var(--line); border-radius:18px; background:rgba(17,28,46,.96); box-shadow:0 22px 70px #0008; display:grid; gap:16px; }.login-card h1,.login-card p { margin:0;text-align:center; }.brand-mark,.logo span { display:grid;place-items:center;background:linear-gradient(145deg,#3192ff,#1555c8);color:#fff;font-weight:800; }.brand-mark { width:56px;height:56px;margin:auto;border-radius:16px;font-size:26px; }
label { display:grid; gap:7px; color:#cbd7e8; } input,textarea,select { width:100%; border:1px solid #354862; border-radius:9px; padding:11px 12px; background:#0b1627; color:#fff; outline:none; } input:focus,textarea:focus,select:focus { border-color:#3c91ff; box-shadow:0 0 0 3px #2f83f722; }
.primary,.secondary,.ghost,.icon-button { border:0;border-radius:9px;padding:10px 15px;color:#fff; }.primary { background:var(--blue); }.primary:hover { background:#4995fb; }.secondary { background:#1d385b;border:1px solid #315278; }.ghost { background:transparent;border:1px solid var(--line); }.icon-button { background:transparent;font-size:26px;padding:0 8px;color:var(--muted); }
.admin-shell { min-height:100dvh; display:grid; grid-template-columns:250px minmax(0,1fr); }.sidebar { position:sticky;top:0;height:100dvh;padding:24px 16px;display:flex;flex-direction:column;background:#0d1727;border-right:1px solid var(--line);z-index:20; }.logo { display:flex;align-items:center;gap:11px;padding:0 8px 28px;font-size:17px; }.logo span { width:36px;height:36px;border-radius:10px; }.sidebar nav { display:grid;gap:7px; }.nav-item { border:0;background:transparent;color:#9fb0c8;border-radius:10px;padding:12px 14px;text-align:left;display:flex;gap:12px;align-items:center; }.nav-item:hover,.nav-item.active { color:#fff;background:#1a2b43; }.nav-item.active { box-shadow:inset 3px 0 var(--blue); }.sidebar-foot { margin-top:auto;display:grid;gap:8px;padding:16px 8px 0;border-top:1px solid var(--line); }.sidebar-foot small { color:var(--muted); }
.main { min-width:0;padding:0 28px 40px; }.topbar { height:88px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line);margin-bottom:24px; }.topbar h1,.topbar p { margin:0; }.topbar h1 { font-size:24px; }.topbar p { color:var(--muted);margin-top:3px; }.online-dot { margin-left:auto;color:var(--green); }.menu-toggle { display:none;background:transparent;border:0;color:#fff;font-size:24px; }.page { display:none; }.page.active { display:block; }.floating { position:fixed;right:24px;top:92px;z-index:60;padding:8px 14px;background:#13243a;border-radius:8px;box-shadow:0 8px 30px #0006; }.floating:empty { display:none; }
.summary-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px; }.summary-card,.server-card,.panel { border:1px solid var(--line);background:var(--panel);border-radius:14px; }.summary-card { padding:20px; }.summary-card span { color:var(--muted); }.summary-card strong { display:block;font-size:30px;margin-top:8px; }.panel { padding:20px;margin-bottom:18px; }.panel h2,.panel p { margin:0; }.panel-title { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px; }.panel-title p { margin-top:4px; }.server-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }.server-card { padding:16px;background:#0d1828; }.server-card .status { display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--red); }.server-card.healthy .status { color:var(--green); }.server-card h3 { margin:0 0 4px;font-size:15px;overflow-wrap:anywhere; }.server-card p { font-size:12px; }
.table-wrap { overflow:auto; }.table-wrap table { width:100%;border-collapse:collapse;min-width:1240px; }.table-wrap th,.table-wrap td { padding:13px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle; }.table-wrap th { color:#8fa1ba;font-size:12px;font-weight:600; }.table-wrap td { color:#dbe5f3; }.customer-ad-thumb { display:block;width:72px;height:46px;border:1px solid #30425c;border-radius:6px;background:#09111d;object-fit:cover; }.ad-cell { max-width:230px;white-space:pre-line;word-break:break-word; }.visit-count { min-width:48px;border:1px solid #245a79;border-radius:99px;padding:4px 10px;background:#102e43;color:#74d5ff;font-weight:700;cursor:pointer; }.badge { display:inline-block;border-radius:99px;padding:3px 9px;font-size:12px;background:#38202a;color:#ff91a0; }.badge.on { background:#153a30;color:#68e4b1; }.actions { display:flex;gap:7px;white-space:nowrap; }.actions button { border:0;border-radius:7px;padding:7px 10px;color:#fff;background:#1c3b60; }.actions .copy-button { background:#21529a;color:#bdddff; }.actions .visit-button { background:#18584a;color:#8cf0c7; }.actions .delete { background:#4b222c;color:#ff9baa; }.empty { padding:50px;text-align:center;color:var(--muted); }
.settings-grid { display:grid;grid-template-columns:2fr 1fr;gap:18px; }.settings-grid .panel:first-child { grid-row:span 2; }.config-list { display:grid;gap:10px; }.config-row { display:grid;grid-template-columns:180px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line); }.config-row span:first-child { color:var(--muted); }.config-row span:last-child { overflow-wrap:anywhere; }.form-stack { display:grid;gap:12px;margin-top:16px; }
.upstream-panel { grid-column:1/-1; }.upstream-form small { color:var(--muted); }.field-gap { display:block;margin:14px 0 7px;color:#cbd7e8; }.upstream-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.desk-check{display:grid;grid-template-columns:auto 72px;align-items:center;gap:8px}.desk-check input{padding:9px}.upstream-check-result{padding:12px;border:1px solid var(--line);border-radius:9px;background:#0b1627}.check-attempt{padding:10px 0;border-bottom:1px solid var(--line)}.check-attempt:last-child{border-bottom:0}.check-attempt strong{overflow-wrap:anywhere}.check-ok{color:var(--green)}.check-fail{color:var(--red)}
.frontend-form { display:grid;grid-template-columns:1fr 1.6fr auto;gap:10px;margin-bottom:16px; }.frontend-list { display:grid;gap:10px; }.frontend-row { display:grid;grid-template-columns:minmax(120px,.7fr) minmax(220px,1.5fr) 90px auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:10px;background:#0d1828; }.frontend-row .address { color:var(--muted);overflow-wrap:anywhere; }.frontend-row .health { color:var(--red); }.frontend-row .health.on { color:var(--green); }.frontend-actions { display:flex;gap:7px;justify-content:flex-end; }.frontend-actions button { border:0;border-radius:7px;padding:7px 10px;color:#fff;background:#1d385b; }.frontend-actions .delete { background:#4b222c;color:#ff9baa; }.device-cell { min-width:240px;max-width:360px;white-space:normal;word-break:break-word;color:#adbed3; }
.modal-open { overflow:hidden; }.modal { position:fixed;inset:0;z-index:100;background:#000b;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:clamp(12px,4dvh,36px) 18px; }.modal-card { width:min(720px,100%);max-height:calc(100dvh - clamp(24px,8dvh,72px));margin:auto;overflow:hidden;background:#111c2e;border:1px solid #30425c;border-radius:16px;box-shadow:0 30px 90px #000b;display:flex;flex-direction:column; }.modal-head { position:relative;z-index:2;flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:#111c2e;border-bottom:1px solid var(--line); }.modal-head h2 { margin:0; }.customer-form { min-height:0;padding:20px 22px;display:grid;gap:15px;overflow-y:auto;overscroll-behavior:contain; }.two-cols { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.switch-row { display:flex;gap:24px;padding:4px 0; }.switch-row label { display:flex;align-items:center;gap:8px; }.switch-row input { width:auto; }.upload-box { border:1px dashed #3a5272;border-radius:11px;padding:15px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center; }.upload-box p { margin:4px 0 0;color:var(--muted); }.upload-button { display:inline-block;background:#1d385b;padding:9px 13px;border-radius:8px;cursor:pointer; }.upload-button input { display:none; }.image-preview { grid-column:1/-1;max-width:100%;max-height:190px;border-radius:9px;object-fit:contain;background:#09111d; }.modal-actions { position:sticky;bottom:-20px;z-index:2;display:flex;justify-content:flex-end;gap:10px;margin:0 -22px -20px;padding:14px 22px 18px;background:#111c2ef5;border-top:1px solid var(--line); }
.visitor-modal-card { width:min(1240px,100%); }.modal-head-actions { display:flex;align-items:center;gap:8px; }.visitor-content { min-height:0;padding:20px 22px;display:grid;gap:24px;overflow:auto; }.visitor-content h3,.visitor-content p { margin:0 0 8px; }
.card-toolbar-actions{display:flex;align-items:end;gap:9px}.card-toolbar-actions label{grid-template-columns:auto 90px;align-items:center}.card-toolbar-actions select{padding:9px}.collector-state{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;background:#0b1627}.collector-state span{color:var(--muted)}.card-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:10px}.card-summary-grid article{padding:14px;border:1px solid var(--line);border-radius:10px;background:#0d1828}.card-summary-grid span{display:block;color:var(--muted);font-size:12px}.card-summary-grid strong{display:block;margin-top:6px;font-size:22px;color:#fff}.rank-stat-grid{display:grid;grid-template-columns:repeat(13,minmax(68px,1fr));gap:7px;overflow-x:auto}.rank-stat-grid article{min-width:68px;padding:11px 6px;border:1px solid var(--line);border-radius:9px;display:grid;gap:4px;text-align:center;background:#0d1828}.rank-stat-grid strong{font-size:20px;color:#ffd579}.rank-stat-grid span,.rank-stat-grid em,.rank-stat-grid small{font-size:11px;font-style:normal;color:var(--muted)}.rank-stat-grid em{color:#72e3ae}.card-detail-table{min-width:1050px!important}.card-detail-table th,.card-detail-table td{text-align:center!important}.card-detail-table td strong,.card-detail-table td small{display:block}.card-detail-table td strong{font-size:17px}.card-detail-table td small{margin-top:3px;color:#6ee0aa}.card-detail-table .suit-2,.card-detail-table .suit-4{color:#ff7d88}.cards-two-column{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}.cards-two-column table{min-width:720px}.card-codes{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.card-codes b{margin-left:6px;color:#ffd579}
.panel{min-width:0}.cards-two-column{min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.cards-two-column>.panel{min-width:0}
.cards-analysis-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}.compact-analysis-grid,.point-stat-grid{display:grid;gap:8px}.compact-analysis-grid{grid-template-columns:repeat(4,1fr)}.point-stat-grid{grid-template-columns:repeat(10,1fr)}.compact-analysis-grid article,.point-stat-grid article{min-width:0;padding:12px 8px;border:1px solid var(--line);border-radius:9px;display:grid;gap:4px;text-align:center;background:#0d1828}.compact-analysis-grid strong,.point-stat-grid strong{color:#ffd579}.compact-analysis-grid span,.compact-analysis-grid em,.point-stat-grid span,.point-stat-grid em{font-size:11px;font-style:normal;color:var(--muted)}.compact-analysis-grid em,.point-stat-grid em{color:#72e3ae}.compact-analysis-grid .suit-2 strong,.compact-analysis-grid .suit-4 strong{color:#ff7d88}
@media(max-width:1050px){.summary-grid,.server-grid{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}.settings-grid .panel:first-child{grid-row:auto}}
@media(max-width:1050px){.card-summary-grid{grid-template-columns:repeat(3,1fr)}.cards-two-column,.cards-analysis-grid{grid-template-columns:1fr}.point-stat-grid{overflow-x:auto;grid-template-columns:repeat(10,minmax(58px,1fr))}}
@media(max-width:760px){.admin-shell{display:block}.sidebar{position:fixed;left:-270px;width:250px;transition:left .2s;box-shadow:20px 0 50px #0008}.admin-shell.menu-open .sidebar{left:0}.main{padding:0 14px 30px}.topbar{height:74px;margin-bottom:16px}.menu-toggle{display:block}.topbar h1{font-size:20px}.topbar p,.online-dot{display:none}.summary-grid,.server-grid{grid-template-columns:1fr 1fr;gap:10px}.summary-card{padding:15px}.summary-card strong{font-size:25px}.panel{padding:15px}.panel-title{align-items:flex-start}.two-cols{grid-template-columns:1fr}.switch-row{flex-wrap:wrap}.modal{padding:0;overflow:hidden}.modal-card{width:100%;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}.modal-head{padding:14px 16px}.customer-form{flex:1;padding:16px;padding-bottom:24px}.modal-actions{bottom:-16px;margin:0 -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.upload-box{grid-template-columns:1fr}.upload-button{text-align:center}.floating{top:76px;right:12px;left:12px}.login-card{padding:25px}.frontend-form,.frontend-row{grid-template-columns:1fr}.frontend-actions{justify-content:flex-start}.card-toolbar{display:grid}.card-toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.card-toolbar-actions label{grid-column:1/-1}.card-summary-grid{grid-template-columns:1fr 1fr}.collector-state{display:grid;gap:7px}}
@media(max-width:420px){.summary-grid{grid-template-columns:1fr}.panel-title{display:grid}.panel-title .primary,.panel-title .secondary{width:100%}}