:root {
  --navy: #123d6a;
  --navy-2: #0b2d51;
  --blue-50: #edf5fc;
  --line: #d7e2ee;
  --muted: #667a90;
  --text: #172338;
  --green: #13795b;
  --orange: #b8650a;
  --red: #a8221c;
  --surface: #ffffff;
  --background: #f3f7fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--background);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(145deg,#f6f9fc,#e9f1f8); }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px max(18px,calc((100vw - 1180px)/2)); background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; color:var(--navy); }
.brand-mark { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--navy); color:#fff; }
.nav { display:flex; gap:6px; flex-wrap:wrap; }
.nav button,.ghost { border:0; background:transparent; color:var(--muted); padding:10px 14px; border-radius:12px; }
.nav button.active,.nav button:hover,.ghost:hover { background:var(--blue-50); color:var(--navy); }
.account { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }
.main { max-width:1180px; margin:0 auto; padding:30px 18px 100px; }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
h1 { margin:0 0 8px; font-size:clamp(26px,4vw,38px); color:var(--navy-2); }
h2 { margin:0 0 14px; font-size:21px; }
p { line-height:1.7; }
.muted { color:var(--muted); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 14px 40px rgba(33,67,101,.07); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat { min-height:126px; }
.stat-label { color:var(--muted); font-size:14px; }
.stat-value { margin-top:16px; font-size:27px; font-weight:800; color:var(--navy); }
.section { margin-top:22px; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.primary,.secondary,.danger { border:0; border-radius:13px; padding:12px 18px; font-weight:700; }
.primary { background:var(--navy); color:#fff; }
.primary:hover { background:var(--navy-2); }
.secondary { background:var(--blue-50); color:var(--navy); border:1px solid #bed2e7; }
.danger { background:#fff0ef; color:var(--red); border:1px solid #f1c1bd; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.input-short { max-width:240px; }
.input-medium { max-width:300px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:8px; color:#33445a; font-weight:600; }
.field.full { grid-column:1/-1; }
.input,.select,.textarea { width:100%; border:1px solid #cbd9e7; border-radius:14px; padding:13px 14px; color:var(--text); background:#fff; outline:none; }
.input:focus,.select:focus,.textarea:focus { border-color:#6195c6; box-shadow:0 0 0 3px rgba(97,149,198,.15); }
.textarea { min-height:92px; resize:vertical; }
.money { color:var(--navy); font-weight:800; white-space:nowrap; }
.list { display:grid; gap:12px; }
.list-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; }
.list-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.badge { display:inline-flex; padding:6px 10px; border-radius:999px; background:var(--blue-50); color:var(--navy); font-size:13px; font-weight:700; }
.badge.warn { background:#fff2df; color:var(--orange); }
.badge.ok { background:#e8f7f1; color:var(--green); }
.badge.bad { background:#fff0ef; color:var(--red); }
.notice { padding:14px 16px; border-radius:14px; background:var(--blue-50); color:#3f5872; margin-top:14px; }
.notice.warn { background:#fff4e5; color:#8e5009; }
.notice.bad { background:#fff0ef; color:var(--red); }
.item-table { width:100%; border-collapse:separate; border-spacing:0 10px; }
.item-table th { color:var(--muted); text-align:left; font-size:13px; padding:0 6px; }
.item-table td { padding:0 6px; }
.item-table .input,.item-table .select { min-width:110px; }
.cost-project-picker { min-width:min(340px,100%); }
.table-scroll { overflow-x:auto; }
.cost-table { width:100%; border-collapse:collapse; min-width:850px; }
.cost-table th,.cost-table td { padding:13px 11px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.cost-table th:first-child,.cost-table td:first-child { text-align:left; }
.cost-table th { color:var(--muted); font-size:13px; }
.cost-table small { display:block; color:var(--muted); margin-top:3px; }
.cost-table tr.cost-warning { background:#fffaf0; }
.cost-table tr.cost-critical { background:#fff2f0; }
.total { display:flex; justify-content:flex-end; align-items:center; gap:18px; padding:16px 6px 0; border-top:1px solid var(--line); font-size:20px; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:min(440px,100%); padding:32px; }
.login-card .brand { justify-content:center; margin-bottom:24px; font-size:20px; }
.login-card form { display:grid; gap:16px; }
.empty { text-align:center; padding:42px 20px; color:var(--muted); }
.toast { position:fixed; right:20px; bottom:24px; z-index:50; background:var(--navy-2); color:#fff; border-radius:14px; padding:14px 18px; transform:translateY(100px); opacity:0; transition:.2s; box-shadow:0 16px 38px rgba(0,0,0,.2); }
.toast.show { transform:none; opacity:1; }
.toast.error { background:var(--red); }
.hide { display:none!important; }
@media (max-width:760px) {
  .topbar { align-items:flex-start; flex-wrap:wrap; padding:12px 14px; }
  .brand span:last-child { display:none; }
  .account { margin-left:auto; }
  .nav { width:100%; overflow-x:auto; flex-wrap:nowrap; order:3; }
  .nav button { white-space:nowrap; flex:1; }
  .main { padding:22px 12px 96px; }
  .hero,.section-head { align-items:stretch; flex-direction:column; }
  .grid,.grid-3,.form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .card { border-radius:18px; padding:17px; }
  .item-table,.item-table tbody,.item-table tr,.item-table td { display:block; width:100%; }
  .item-table thead { display:none; }
  .item-table tr { border:1px solid var(--line); border-radius:15px; padding:10px; margin-bottom:12px; }
  .item-table td { padding:5px 0; }
  .item-table td::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
  .primary,.secondary,.danger { min-height:46px; }
}