:root {
  --ink: #17233c;
  --muted: #718096;
  --line: #e8edf5;
  --paper: #f5f7fb;
  --blue: #2878f0;
  --teal: #18a999;
  --orange: #f59b42;
  --purple: #7667f5;
  --danger: #ef6b70;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; }
.app-shell { min-height: 100vh; background: var(--paper); }
.mobile-shell { width: 390px; min-height: 844px; margin: 0 auto; background: #f7f9fc; position: relative; overflow: hidden; border: 1px solid #dbe3ef; border-radius: 22px; box-shadow: 0 18px 45px rgba(31, 55, 88, .14), inset 0 0 0 1px rgba(255,255,255,.8); }
.mobile-main { padding: 18px 18px 86px; }
.mobile-header { padding: 44px 18px 14px; background: linear-gradient(135deg,#eaf5ff,#f7fbff); }
.mobile-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand { font-weight:800; letter-spacing:.03em; }
.brand em { color: var(--blue); font-style:normal; }
.city-pill,.soft-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid #dfe8f4; background:#fff; color:var(--muted); border-radius:999px; padding:7px 11px; font-size:12px; }
.search { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e8eef8; border-radius:14px; padding:12px 14px; color:#98a5b8; box-shadow:0 6px 20px rgba(35,91,150,.06); }
.hero { border-radius:22px; padding:22px; color:#fff; background:linear-gradient(135deg,#2878f0,#62b8ff); box-shadow:0 15px 25px rgba(40,120,240,.2); }
.hero h1 { margin:0 0 8px; font-size:25px; line-height:1.25; }
.hero p { margin:0; opacity:.86; font-size:13px; }
.section-head { display:flex; justify-content:space-between; align-items:center; margin:22px 0 12px; }
.section-head h2 { margin:0; font-size:17px; }
.section-head a { color:var(--blue); font-size:12px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:15px; box-shadow:0 5px 16px rgba(36,59,94,.04); }
.icon-tile { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:19px; margin-bottom:9px; }
.tile-blue { background:#e9f2ff; color:var(--blue); } .tile-teal { background:#e4f8f2; color:var(--teal); } .tile-orange { background:#fff0df; color:#e58b2f; } .tile-purple { background:#efedff; color:var(--purple); }
.muted { color:var(--muted); font-size:12px; } .small { font-size:12px; } .strong { font-weight:750; }
.list-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); } .list-row:last-child { border-bottom:0; }
.thumb { width:64px; height:52px; border-radius:12px; background:linear-gradient(135deg,#d9eaff,#f1f7ff); display:grid; place-items:center; color:var(--blue); font-size:20px; flex:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:12px; padding:10px 14px; font-weight:700; font-size:13px; }
.btn-primary { background:var(--blue); color:#fff; } .btn-soft { background:#edf4ff; color:var(--blue); } .btn-teal { background:var(--teal); color:#fff; } .btn-outline { background:#fff; color:var(--ink); border:1px solid var(--line); }
.tag { display:inline-block; padding:4px 8px; border-radius:7px; font-size:10px; font-weight:700; } .tag-blue{background:#e8f1ff;color:var(--blue)} .tag-green{background:#e4f8f2;color:#15927e} .tag-orange{background:#fff0df;color:#d97c20} .tag-red{background:#ffebed;color:#d9545c}
.tabbar { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-around; padding:12px 8px 18px; background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(16px); }
.tabbar a { text-decoration:none; text-align:center; color:#9aa7ba; font-size:10px; } .tabbar a.active { color:var(--blue); } .tabbar i { display:block; font-size:18px; margin-bottom:4px; }
.dashboard { display:flex; min-height:100vh; background:#f6f8fc; }
.sidebar { width:238px; flex:none; padding:25px 16px; background:#fff; border-right:1px solid var(--line); }
.side-logo { font-size:19px; font-weight:850; padding:0 12px 28px; } .side-logo span { color:var(--blue); }
.side-group { color:#a0aabd; font-size:11px; padding:18px 12px 7px; text-transform:uppercase; letter-spacing:.08em; }
.side-link { display:flex; align-items:center; gap:11px; padding:12px; border-radius:10px; color:#59667e; text-decoration:none; font-size:13px; margin:3px 0; }
.side-link.active,.side-link:hover { color:var(--blue); background:#edf4ff; font-weight:700; }
.workspace { flex:1; min-width:0; padding:28px 34px; } .topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.topbar h1 { margin:0; font-size:24px; } .topbar p { margin:7px 0 0; color:var(--muted); font-size:13px; }
.profile { display:flex; align-items:center; gap:10px; } .avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue),#7fbaff); font-weight:700; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:18px; } .metric { padding:18px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.metric .value { font-size:27px; font-weight:800; margin:9px 0 4px; } .metric .delta { color:var(--teal); font-size:11px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:18px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; } .panel-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; } .panel-title h2 { font-size:16px; margin:0; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-size:12px; } th { text-align:left; color:#98a4b7; font-weight:600; padding:11px 8px; border-bottom:1px solid var(--line); } td { padding:13px 8px; border-bottom:1px solid #f0f3f7; white-space:nowrap; }
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .input,.select { border:1px solid var(--line); border-radius:10px; background:#fff; padding:10px 12px; color:var(--ink); font-size:12px; }
.chart { height:210px; border-radius:12px; background:linear-gradient(180deg,#f5f9ff,#fff); display:flex; align-items:flex-end; gap:12px; padding:20px 17px 17px; } .bar { flex:1; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#65b1ff,var(--blue)); min-height:25px; position:relative; } .bar span { position:absolute; bottom:-19px; width:100%; text-align:center; color:#9aa7ba; font-size:10px; }
.notice { border-left:3px solid var(--orange); background:#fff8ee; border-radius:10px; padding:12px 14px; font-size:12px; color:#8d6a3b; }
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(17,30,54,.36); z-index:20; align-items:center; justify-content:center; } .modal-backdrop.show{display:flex} .modal{width:min(420px,90vw); background:#fff;border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
@media(max-width:900px){.sidebar{width:190px}.workspace{padding:22px}.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}}