:root { color-scheme: light; --ink:#12263a; --muted:#64778b; --line:#d9e4ed; --bg:#f3f7fa; --panel:#fff; --primary:#087f8c; --primary-dark:#05616b; --danger:#bd4a4a; --shadow:0 8px 24px rgba(25,60,85,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei", "Segoe UI", Arial, sans-serif; font-size:14px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; }
.shell { max-width:1440px; margin:0 auto; padding:24px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px 24px; box-shadow:var(--shadow); }
.brand { font-size:24px; font-weight:800; letter-spacing:0; }.subbrand,.muted { color:var(--muted); margin-top:5px; }.top-actions { display:flex; align-items:center; gap:16px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.login-panel { max-width:760px; margin:72px auto; padding:36px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.eyebrow { color:var(--primary); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }.login-copy h1,.section-heading h2 { margin:8px 0 0; font-size:28px; }.login-copy p { color:var(--muted); line-height:1.7; }.login-form { display:grid; gap:10px; }.login-form label,.release-form label,.filters label { color:var(--muted); font-weight:600; }.login-form input,.release-form input,.release-form select,.release-form textarea,.filters select { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:#fff; color:var(--ink); }.primary,.secondary,.ghost,.link-button { border-radius:6px; padding:10px 16px; font-weight:700; }.primary { background:var(--primary); color:#fff; }.primary:hover { background:var(--primary-dark); }.secondary { background:#e9f4f5; color:var(--primary-dark); }.ghost { background:#eef3f6; color:var(--ink); }.link-button { background:transparent; color:var(--primary); padding:3px; }.error { min-height:20px; color:var(--danger); }.message { min-height:22px; color:var(--primary-dark); margin-top:14px; }
.tabs { display:flex; gap:8px; margin:24px 0 18px; border-bottom:1px solid var(--line); }.tab { padding:12px 18px; background:transparent; color:var(--muted); font-weight:700; border-bottom:3px solid transparent; }.tab.active { color:var(--primary-dark); border-color:var(--primary); }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:18px 0; }.section-heading h3 { margin:0; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }.metric { padding:20px; }.metric .label { color:var(--muted); }.metric .value { font-size:30px; font-weight:800; margin-top:8px; }.grid-two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.table-panel { padding:18px; overflow:hidden; }.table-scroll { overflow:auto; }.data-table { width:100%; border-collapse:collapse; min-width:720px; }.data-table th,.data-table td { text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }.data-table th { color:var(--muted); font-size:12px; background:#f8fbfc; }.data-table tr:last-child td { border-bottom:0; }.status { display:inline-flex; align-items:center; gap:6px; }.status:before { content:""; width:7px; height:7px; border-radius:50%; background:#aebcc7; }.status.online:before { background:#1ca675; }.status.disabled:before { background:var(--danger); }.status.online { color:#17825f; }.status.disabled { color:var(--danger); }.device-name { font-weight:700; }.small { color:var(--muted); font-size:12px; margin-top:3px; }.action-row { display:flex; gap:7px; flex-wrap:wrap; }.mini { padding:6px 9px; border-radius:5px; background:#eef4f7; color:var(--ink); font-size:12px; }.mini.danger { color:var(--danger); }.filters { display:flex; gap:14px; margin-bottom:16px; max-width:500px; }.filters label { flex:1; }.release-form-panel { padding:22px; margin-bottom:18px; }.release-form-panel h3 { margin-top:0; }.release-form { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end; }.release-form label { display:grid; gap:6px; }.release-form .wide { grid-column:span 3; }.release-form button { height:41px; }.download { color:var(--primary); text-decoration:none; }.toast { position:fixed; right:24px; bottom:24px; padding:12px 16px; border-radius:6px; background:#173348; color:#fff; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:.2s; pointer-events:none; }.toast.show { opacity:1; transform:translateY(0); }.hidden { display:none !important; }
@media (max-width:900px) { .shell { padding:14px; }.login-panel,.grid-two { grid-template-columns:1fr; }.metrics { grid-template-columns:repeat(2,1fr); }.release-form { grid-template-columns:1fr 1fr; }.release-form .wide { grid-column:span 2; } }
@media (max-width:560px) { .topbar,.section-heading { align-items:flex-start; flex-direction:column; }.metrics { grid-template-columns:1fr; }.release-form { grid-template-columns:1fr; }.release-form .wide { grid-column:span 1; }.tabs { overflow:auto; }.tab { white-space:nowrap; } }
.danger-button { background:#fff1f1; color:#a52f38; border:1px solid #efc4c7; border-radius:6px; padding:10px 16px; font-weight:700; }.danger-button:hover { background:#fde2e3; }
.empty-state { padding:36px 18px; text-align:center; color:var(--muted); background:#f8fbfc; border:1px dashed var(--line); border-radius:8px; }.check-line { display:flex; align-items:center; gap:7px; margin-bottom:8px; color:var(--ink); }.sharing-select { width:100%; min-width:220px; border:1px solid var(--line); border-radius:6px; padding:6px; background:#fff; color:var(--ink); }
.telemetry-filters { max-width:none; flex-wrap:wrap; align-items:end; }.telemetry-filters label { min-width:150px; }.telemetry-filters input,.telemetry-filters select { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:#fff; color:var(--ink); }
.exception-result { max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.exception-review-state,.exception-assignee,.exception-note { width:150px; border:1px solid var(--line); border-radius:5px; padding:6px; display:block; margin-bottom:5px; }.exception-note { resize:vertical; }