*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;background:#edf1f7;color:#1f2937;min-height:100vh}
button,input,select,textarea{font-family:inherit}
button{border:0;cursor:pointer}
.hidden{display:none!important}

.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#667eea,#764ba2)}
.login-panel{width:min(430px,100%);background:#fff;border-radius:20px;padding:34px 28px 26px;box-shadow:0 20px 60px rgba(0,0,0,.16)}
.bolt{text-align:center;font-size:54px;line-height:1;margin-bottom:12px;color:#667eea}
.login h1{text-align:center;font-size:21px;margin-bottom:6px}
.login p{text-align:center;color:#8a94a6;font-size:13px;margin-bottom:24px}
.login label{display:block;font-size:13px;font-weight:700;color:#475569;margin-bottom:14px}
.login input{width:100%;height:44px;margin-top:6px;border:0;background:#f5f7fa;border-radius:12px;padding:0 14px;font-size:15px;outline:none}
.login button{width:100%;height:46px;border-radius:12px;background:#667eea;color:#fff;font-size:16px;font-weight:800;margin-top:8px}
.login-msg{min-height:22px;text-align:center;color:#ef4444;font-size:13px;margin-top:10px}

.app{max-width:520px;margin:0 auto;min-height:100vh;background:#f5f7fa;box-shadow:0 0 30px rgba(15,23,42,.08)}
.app-head{position:sticky;top:0;z-index:20;min-height:74px;display:grid;grid-template-columns:58px 1fr 58px;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(135deg,#1a1a2e,#16213e 55%,#0f3460);color:#fff}
.page-title{text-align:center;font-size:17px;font-weight:800;line-height:1.25}
.page-sub{text-align:center;font-size:11px;color:rgba(255,255,255,.66);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.text-btn{height:32px;border-radius:16px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18);font-size:12px}
.screen{padding:16px 16px 30px}

.hero{background:#fff;border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.hero.compact{padding-top:12px}
.hero-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hero-title{font-size:21px;font-weight:850;margin-bottom:5px}
.hero-sub{font-size:13px;color:#8a94a6;line-height:1.55}
.shortcut-btn{border:1px solid #d9def4;background:#f0f2ff;color:#667eea;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:850;white-space:nowrap;box-shadow:0 2px 5px rgba(102,126,234,.12)}
.shortcut-btn:active{transform:translateY(1px)}
.period-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:21px;font-weight:850;margin-bottom:6px}
.period-line select{height:34px;border:1px solid #dbe1ee;border-radius:17px;background:#f6f7ff;color:#667eea;padding:0 10px;font-weight:800;outline:none}
.action-row{display:flex;gap:8px;margin-top:14px}
.action-row button,.primary-btn,.secondary-btn{height:40px;border-radius:12px;padding:0 14px;font-weight:800}
.primary-btn,.action-row .primary{background:#07c160;color:#fff}
.secondary-btn,.action-row .secondary{background:#eef0ff;color:#667eea}

.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.kpi-grid.three{grid-template-columns:repeat(3,1fr)}
.kpi{min-width:0;border-radius:12px;padding:13px 10px;text-align:center;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.kpi b{font-size:21px;line-height:1.18;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.kpi span{font-size:11px;opacity:.86;margin-top:4px;display:block}
.g1{background:linear-gradient(135deg,#11998e,#38ef7d)}
.g2{background:linear-gradient(135deg,#667eea,#764ba2)}
.g3{background:linear-gradient(135deg,#f2994a,#f2c94a)}
.g4{background:linear-gradient(135deg,#1a1a2e,#16213e)}
.g5{background:linear-gradient(135deg,#e63946,#f94144)}
.g6{background:linear-gradient(135deg,#0d7377,#14a085)}

.card,.panel{background:#fff;border-radius:14px;padding:14px 16px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card{cursor:pointer}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card h3{font-size:15px;line-height:1.35;margin-bottom:5px}
.meta,.small{font-size:12px;color:#8a94a6;line-height:1.55}
.badge{font-size:11px;padding:4px 10px;border-radius:999px;background:#eef0ff;color:#667eea;white-space:nowrap;font-weight:800}
.badge.green{background:#e8f7ef;color:#07a755}
.badge.orange{background:#fff3e0;color:#f57c00}
.badge.red{background:#fee2e2;color:#dc2626}

.toolbar{display:flex;gap:8px;margin-bottom:12px}
.toolbar input,.toolbar select{height:38px;border:1px solid #e0e0e0;border-radius:19px;background:#fff;padding:0 13px;min-width:0;outline:none}
.toolbar input{flex:1}
.toolbar select{width:112px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{height:30px;padding:0 14px;border-radius:15px;background:#fff;border:1px solid #e0e0e0;color:#667085;font-size:12px;font-weight:800}
.chip.active{background:#667eea;color:#fff;border-color:#667eea}

.section-title{font-size:15px;font-weight:850;margin:16px 0 9px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-head .section-title{margin:16px 0 9px}
.view-all-btn{height:30px;border-radius:15px;background:#eef0ff;color:#667eea;font-size:12px;font-weight:900;padding:0 12px;white-space:nowrap}
.inline-title{min-width:0;margin:0;line-height:1.25}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #f1f3f5;cursor:pointer}
.row:last-child{border-bottom:0}
.row-main{min-width:0}
.row-name{font-size:14px;font-weight:800;line-height:1.4}
.row-value{text-align:right;font-size:13px;font-weight:850;white-space:nowrap}
.rank{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef0ff;color:#667eea;font-size:12px;font-weight:900;flex-shrink:0}
.rank.top{background:linear-gradient(135deg,#f94144,#f8961e);color:#fff}

.chart{height:160px;border-radius:14px;background:linear-gradient(180deg,#fbfcff,#f3f6fb);border:1px solid #eef0f4;display:flex;align-items:end;gap:8px;padding:18px 14px;margin-top:8px}
.bar{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#667eea,#764ba2);min-height:18px}
.bar:nth-child(2n){background:linear-gradient(180deg,#07c160,#38ef7d)}
.line-chart{height:198px;border-radius:14px;background:
  radial-gradient(circle at 70% 20%,rgba(168,85,247,.34),transparent 32%),
  radial-gradient(circle at 18% 70%,rgba(6,182,212,.16),transparent 30%),
  linear-gradient(135deg,#21124f 0%,#31206c 48%,#4a2380 100%);
  border:1px solid rgba(255,255,255,.16);padding:10px 10px 6px;margin-top:8px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px rgba(23,14,62,.16)}
.line-chart svg{width:100%;height:156px;display:block}
.chart-unit{position:absolute;right:14px;top:9px;color:#aef6ff;font-size:9px;font-weight:800;text-shadow:0 0 10px rgba(79,233,255,.35)}
.line-chart .grid-lines line{stroke:rgba(210,225,255,.26);stroke-width:1;stroke-dasharray:0;opacity:.75}
.line-chart .area{fill:url(#chartFill)}
.line-chart .line-glow{fill:none;stroke:#4fe9ff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.16;filter:drop-shadow(0 0 7px rgba(79,233,255,.38))}
.line-chart .line{fill:none;stroke:#4fe9ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(79,233,255,.36))}
.line-chart .compare-line{fill:none;stroke:#ff5b76;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;opacity:.88;filter:drop-shadow(0 0 4px rgba(255,91,118,.26))}
.line-chart circle{fill:#f7fffe;stroke:#7df7a7;stroke-width:1.4;filter:drop-shadow(0 0 5px rgba(125,247,167,.35))}
.line-chart .point-value{fill:#e8fdff;font-size:7px;font-weight:850;text-anchor:middle;paint-order:stroke;stroke:#23164f;stroke-width:2.8px;stroke-linejoin:round}
.x-labels{display:flex;justify-content:space-between;color:#d8dcff;font-size:11px;line-height:1;font-weight:800;padding:0 18px;text-shadow:0 0 8px rgba(216,220,255,.18)}
.legend{display:flex;gap:16px;justify-content:flex-end;font-size:12px;color:#8a94a6;margin-top:8px}
.legend i{display:inline-block;width:18px;height:3px;border-radius:3px;margin-right:5px;vertical-align:middle;background:#667eea}
.legend i.dash{background:#ff5b76}
.bucket-bars{display:grid;gap:10px}
.bucket-row{display:grid;grid-template-columns:74px 1fr 48px;align-items:center;gap:10px;font-size:12px;color:#596579}
.bucket-name{font-weight:900;color:#0f172a}
.bucket-name span{display:block;font-size:10px;font-weight:700;color:#8a94a6;margin-top:2px}
.bucket-track{height:10px;border-radius:999px;background:#eef0ff;overflow:hidden}
.bucket-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4fe9ff,#7df7a7)}
.bucket-row b{text-align:right;color:#0f172a}
.advice-box{font-size:14px;line-height:1.7;color:#0f172a;background:#f8fafc;border:1px solid #eef0f4;border-radius:12px;padding:12px}
.price-formula{font-size:14px;line-height:1.7;color:#596579;background:#f8fafc;border:1px solid #eef0f4;border-radius:12px;padding:12px}
.price-formula b{color:#0f172a;font-size:16px}
.price-periods{display:grid;gap:8px}
.price-period{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f8fafc;border:1px solid #eef0f4;border-radius:12px;padding:10px 12px;color:#596579;font-size:13px;line-height:1.4}
.price-period b{color:#0f172a;font-size:14px;white-space:nowrap}
.copy-btn{height:32px;border-radius:16px;background:#f1f0ff;color:#667eea;font-size:12px;font-weight:900;padding:0 10px;white-space:nowrap;flex-shrink:0}

.form{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.form h3{font-size:15px;margin:10px 0 12px}
.form label{display:block;font-size:12px;color:#596579;font-weight:800;margin-bottom:12px}
.form input,.form textarea,.form select{width:100%;min-height:40px;margin-top:5px;border:1px solid #e0e0e0;border-radius:10px;padding:0 12px;background:#fff;outline:none;font-size:14px}
.form textarea{height:72px;padding-top:10px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-tip{margin:-4px 0 10px}
.save-bar{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(245,247,250,0),#f5f7fa 30%);padding:18px 0 2px;margin-top:4px}
.save-bar button{width:100%;height:46px;border-radius:14px;background:#07c160;color:#fff;font-size:16px;font-weight:900}
.photo-box{height:76px;border:1px dashed #cbd5e1;border-radius:12px;display:grid;place-items:center;color:#94a3b8;background:#fafbff;margin-top:5px}
.empty{min-height:130px;display:grid;place-items:center;text-align:center;color:#a0a8b6;padding:24px}

@media(min-width:760px){
  body{padding:22px 0}
  .app{border-radius:22px;overflow:hidden;min-height:calc(100vh - 44px)}
}