:root { --blue:#287cc2; --deep:#125b98; --orange:#f7941d; --ink:#15324a; --paper:#f7fbfe; --line:rgba(21,50,74,.14); font-family:"Aptos Display","Segoe UI Variable","PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:linear-gradient(135deg,#f7fbfe,#e5f2fb); }
.hero-buttons { display:flex; gap:.6rem; flex-wrap:wrap; }
.financial-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin:1rem 0; }
.financial-grid article { border:1px solid var(--line); border-radius:12px; padding:.65rem; background:#fff8ed; }
.financial-grid strong { display:block; color:var(--deep); }
.cost-form { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.cost-form h3,.cost-form button { grid-column:1/-1; }
.document-section { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.document-list { display:grid; gap:.55rem; margin-bottom:.8rem; }
.document-card { display:grid; gap:.3rem; border:1px solid var(--line); border-radius:12px; padding:.7rem; background:#f3f9fd; }
.document-card a { justify-self:start; }
.document-form { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.document-form textarea,.document-form button { grid-column:1/-1; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; } button,input,select,textarea { font:inherit; } button,a { border-radius:999px; } button { cursor:pointer; border:0; padding:.75rem 1rem; color:#fff; font-weight:800; background:var(--deep); } a { color:var(--deep); font-weight:800; text-decoration:none; } .hidden { display:none!important; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:1rem; } .login-card { width:min(430px,100%); display:grid; gap:1rem; border:1px solid var(--line); border-radius:26px; padding:2rem; background:rgba(255,255,255,.94); box-shadow:0 24px 70px rgba(18,91,152,.16); } .login-card img, header img { width:180px; max-width:100%; } h1,h2,p { margin-top:0; } label { display:grid; gap:.4rem; font-weight:800; } input,select,textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:.75rem; background:#fff; }
.shell { width:min(1380px,calc(100% - 2rem)); margin:auto; padding:1rem 0 3rem; } header,.hero,.section-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; } header>div { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; } .hero { margin:1.5rem 0 1rem; border-radius:26px; padding:1.5rem; color:#fff; background:linear-gradient(125deg,var(--deep),var(--blue)); } .hero p { color:#ffd8a5; font-weight:900; } .hero span { color:#e5f4ff; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; } .metrics article,.workspace>*,.record-card,.detail-card { border:1px solid var(--line); border-radius:18px; padding:1rem; background:rgba(255,255,255,.9); } .metrics strong { display:block; color:var(--deep); font-size:2rem; } .metrics span,.record-card small,.detail small { color:#657783; }
.workspace { display:grid; grid-template-columns:190px minmax(0,1fr) 350px; gap:1rem; align-items:start; } .workspace>aside:first-child { display:grid; gap:.6rem; } .track-filter { color:var(--deep); background:#e8f3fb; } .track-filter.active { color:#fff; background:var(--orange); } .record-list { display:grid; gap:.7rem; } .record-card { width:100%; display:grid; grid-template-columns:1fr auto; gap:.4rem; text-align:left; color:var(--ink); } .record-card strong { font-size:1.05rem; } .record-card b { color:var(--orange); } .detail { position:sticky; top:1rem; } .timeline { display:grid; gap:.6rem; margin:1rem 0; } .timeline span { border-left:4px solid var(--blue); padding:.5rem .7rem; background:#edf6fc; } dialog { width:min(650px,calc(100% - 2rem)); border:0; border-radius:24px; padding:0; box-shadow:0 30px 100px rgba(21,50,74,.28); } dialog::backdrop { background:rgba(21,50,74,.45); } dialog form { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1.5rem; } dialog .section-title,dialog form>button,dialog form>p { grid-column:1/-1; } textarea { min-height:90px; }
@media(max-width:1000px){ .workspace{grid-template-columns:1fr;} .detail{position:static;} .metrics{grid-template-columns:repeat(2,1fr);} } @media(max-width:620px){ header,.hero,.section-title{align-items:stretch;flex-direction:column;} header>div{display:grid;} .metrics,dialog form{grid-template-columns:1fr;} .shell{width:min(100% - 1rem,1380px);} }