:root { --ink:#1d2433; --muted:#748097; --line:#e8edf4; --surface:#fff; --canvas:#f6f8fb; --nav:#111b30; --nav-soft:#25324c; --blue:#246bfe; --blue-deep:#1356db; --blue-pale:#edf3ff; --green:#17a673; --orange:#f59f32; --red:#df5252; --shadow:0 10px 28px rgba(24,40,72,.07); --radius:12px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.5 "HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; }
.login-page { min-height:100vh; display:grid; grid-template-columns:1.15fr .85fr; background:#fff; }
.login-visual { position:relative; overflow:hidden; padding:48px 8vw; color:white; background:linear-gradient(145deg,#102c68 0%,#173d90 48%,#256bff 130%); }
.login-visual:before,.login-visual:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; } .login-visual:before { width:620px;height:620px; right:-250px;bottom:-230px; } .login-visual:after { width:400px;height:400px; right:-150px;bottom:-120px; }
.login-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent); }
.login-brand,.app-brand { display:flex;align-items:center;gap:11px;position:relative;z-index:1; } .login-brand strong,.app-brand strong { display:block;font-size:18px;letter-spacing:.2px; }.login-brand small,.app-brand small { display:block;opacity:.68;font-size:11px;letter-spacing:1.2px; }
.brand-orbit { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px;font-weight:800;color:#1455d5;background:linear-gradient(135deg,#fff,#dce8ff);box-shadow:inset 0 0 0 4px rgba(36,107,254,.11); }.brand-orbit.small{width:34px;height:34px;font-size:18px}
.login-copy { position:relative;z-index:1; margin-top:20vh; }.eyebrow { display:block;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; }.eyebrow.light { color:#b9d0ff; }.login-copy h1 { margin:14px 0;font-size:44px;line-height:1.22;letter-spacing:-1.5px; }.login-copy p { color:#cddcff;font-size:16px; }.login-foot { position:absolute;bottom:45px;left:8vw;color:#adc7fb;font-size:12px;letter-spacing:.5px; }
.login-form-wrap { display:grid;place-items:center;padding:32px; }.login-card{width:min(380px,100%)}.login-card-head{margin-bottom:30px}.login-card h2{font-size:28px;margin:7px 0}.login-card p{color:var(--muted);margin:0}.login-card label,.form-grid label{display:block;font-size:13px;font-weight:600;color:#465168}.login-card label+label{margin-top:18px}.login-card input,.form-grid input,.form-grid select,.form-grid textarea,.filter-bar input,.filter-bar select{display:block;width:100%;border:1px solid #dce3ed;border-radius:8px;outline:none;background:#fff;color:var(--ink);transition:.18s;border-radius:8px}.login-card input{height:46px;margin-top:7px;padding:0 13px}.login-card input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.filter-bar input:focus,.filter-bar select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,107,254,.11)}.login-submit{width:100%;height:46px;margin-top:28px;justify-content:space-between}.login-tip{margin-top:15px!important;font-size:12px;text-align:center}
.app{min-height:100vh}.sidebar{position:fixed;z-index:5;top:0;bottom:0;left:0;width:238px;padding:28px 14px 18px;background:var(--nav);color:#fff;display:flex;flex-direction:column}.app-brand{padding:0 11px}.workspace-label{margin:40px 12px 9px;color:#6f819f;font-size:11px;font-weight:700;letter-spacing:1px}.nav{display:grid;gap:4px}.nav-item{height:44px;display:flex;align-items:center;gap:12px;border:0;border-radius:8px;background:transparent;color:#aab7ce;padding:0 12px;text-align:left;font-weight:600;transition:.16s}.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}.nav-item.active{color:#fff;background:linear-gradient(90deg,#275fdd,#244c9e);box-shadow:0 5px 12px rgba(0,0,0,.14)}.nav-icon{width:18px;text-align:center;font-size:16px}.sidebar-user{display:flex;align-items:center;gap:10px;margin-top:auto;padding:14px 10px 3px;border-top:1px solid rgba(255,255,255,.1)}.sidebar-user strong{display:block;font-size:13px}.sidebar-user small{display:block;color:#8492a9;font-size:11px}.avatar{width:32px;height:32px;display:grid;place-items:center;background:#3268de;border-radius:9px;font-weight:800}.icon-button{margin-left:auto;border:0;background:transparent;color:#90a0b9;font-size:22px}.icon-button:hover{color:#fff}
.main{margin-left:238px;padding:0 34px 50px}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{font-size:12px;color:#9ba6b8;margin-bottom:2px}.topbar h1{margin:0;font-size:22px;letter-spacing:-.4px}.top-actions{display:flex;align-items:center;gap:15px}.today{color:var(--muted);font-size:12px}.screen{display:none}.screen.active{display:block}.section-heading,.welcome-row{display:flex;justify-content:space-between;align-items:end;margin:8px 0 22px}.section-heading h2,.welcome-row h2{margin:0 0 4px;font-size:22px;letter-spacing:-.5px}.section-heading p,.welcome-row p{margin:0;color:var(--muted)}.quick-actions{display:flex;gap:8px}
.button{border:0;border-radius:8px;height:36px;padding:0 14px;display:inline-flex;gap:8px;align-items:center;justify-content:center;font-weight:700;white-space:nowrap;transition:.16s}.button.primary{background:var(--blue);color:#fff;box-shadow:0 5px 12px rgba(36,107,254,.18)}.button.primary:hover{background:var(--blue-deep)}.button.quiet{background:#fff;color:#43506a;border:1px solid #dfe5ee}.button.quiet:hover{border-color:#b9c9e9;color:var(--blue);background:#f8faff}.button.link{background:transparent;color:#718098}.button.link:hover{color:var(--blue)}.small-btn{height:31px;padding:0 10px;font-size:12px}.text-button{padding:0;border:0;background:transparent;color:var(--blue);font-weight:700}.text-button:hover{text-decoration:underline}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;width:72px;height:72px;right:-19px;top:-23px;border-radius:50%;background:var(--metric-bg,#edf3ff)}.metric-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}.metric-icon{position:relative;z-index:1;width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:var(--metric-bg,#edf3ff);font-size:15px}.metric-value{margin:11px 0 4px;font-size:25px;font-weight:800;letter-spacing:-.8px}.metric-caption{color:var(--muted);font-size:12px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.dashboard-grid.main-grid{grid-template-columns:1.55fr 1fr}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.panel-head{padding:18px 20px 14px;display:flex;align-items:flex-start;justify-content:space-between}.panel-head h3{margin:0;font-size:15px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.panel-number{font-size:17px;font-weight:800;color:var(--blue)}.trend-chart{height:176px;padding:12px 20px 0;display:flex;align-items:end;justify-content:space-between;gap:15px;border-bottom:1px solid #edf0f5;background:linear-gradient(to bottom,transparent 32%,#f4f6fa 33%,transparent 34%,transparent 65%,#f4f6fa 66%,transparent 67%)}.bar-column{height:100%;flex:1;display:flex;align-items:end;justify-content:center}.bar{width:min(36px,80%);min-height:4px;border-radius:5px 5px 0 0;background:linear-gradient(to top,#246bfe,#75a5ff);transition:height .4s ease}.chart-labels{padding:8px 20px 16px;display:flex;justify-content:space-between;color:#8994a7;font-size:11px}.compact-list,.rank-list{padding:0 20px 10px}.compact-item,.rank-item{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #eff2f6}.compact-item:first-child,.rank-item:first-child{border-top:0}.compact-symbol{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#fff5e8;color:#e88712}.compact-info,.rank-name{min-width:0;flex:1}.compact-info strong,.rank-name strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.compact-info small,.rank-name small{display:block;color:var(--muted);font-size:11px}.compact-amount,.rank-value{font-weight:800;font-size:13px}.rank-index{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:#f0f3f8;color:#778399;font-size:11px;font-weight:800}.rank-index.top{color:#be7a10;background:#fff1d5}
.filter-bar{display:flex;align-items:center;gap:9px;margin:0 0 16px}.filter-bar .search{position:relative;width:300px}.search span{position:absolute;left:12px;top:7px;color:#99a5b9;font-size:17px}.filter-bar input,.filter-bar select{height:36px;padding:0 11px}.filter-bar .search input{padding-left:32px}.filter-bar select{width:150px;color:#566278}.data-layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:16px}.table-panel{overflow:hidden}.table-wrap{overflow:auto;max-height:610px}table{border-collapse:collapse;width:100%;min-width:690px}th{height:44px;padding:0 16px;background:#fafbfd;color:#8b96a8;font-size:11px;font-weight:700;letter-spacing:.1px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}td{height:58px;padding:9px 16px;border-bottom:1px solid #eff2f6;font-size:13px;white-space:nowrap}tbody tr{transition:.12s}tbody tr:hover{background:#f8faff}tbody tr.selected{background:#edf3ff}.table-primary{font-weight:700}.table-sub{display:block;color:#8c98aa;font-size:11px;margin-top:2px;max-width:170px;overflow:hidden;text-overflow:ellipsis}.money{font-weight:800;font-variant-numeric:tabular-nums}.money.positive{color:var(--green)}.money.negative{color:var(--red)}.row-action{border:0;padding:4px;background:transparent;color:var(--blue);font-weight:700}.badge{display:inline-flex;align-items:center;border-radius:5px;padding:3px 7px;font-size:11px;font-weight:700}.badge.active,.badge.published{color:#168359;background:#eaf8f1}.badge.inactive,.badge.offline{color:#8390a4;background:#f0f2f5}.badge.draft{color:#9a6a15;background:#fff6de}.detail-panel{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-height:380px}.empty-state{height:300px;display:grid;place-content:center;text-align:center;color:var(--muted)}.empty-state span{font-size:35px;color:#a9bce3}.empty-state strong{margin-top:8px;color:#526077}.empty-state p{font-size:12px;margin:4px}.detail-head{padding:20px 20px 15px;display:flex;justify-content:space-between}.detail-head h3{font-size:19px;margin:4px 0}.detail-head p{margin:0;color:var(--muted);font-size:12px}.balance-card{margin:0 20px;padding:17px;background:linear-gradient(135deg,#1c50b7,#2c74ff);border-radius:10px;color:white}.balance-card small{color:#cbdcff}.balance-card strong{display:block;margin:4px 0 8px;font-size:27px;letter-spacing:-1px}.balance-card div{display:flex;justify-content:space-between;font-size:11px;color:#cbdcff}.detail-actions{display:flex;gap:8px;padding:14px 20px}.detail-section{border-top:1px solid var(--line);padding:14px 20px}.detail-section h4{margin:0 0 8px;font-size:13px}.transaction-item{display:flex;align-items:center;gap:9px;padding:10px 0;border-top:1px solid #f0f2f6}.transaction-item:first-child{border-top:0}.transaction-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#edf3ff;color:var(--blue)}.transaction-info{flex:1;min-width:0}.transaction-info strong{display:block;font-size:12px}.transaction-info small{display:block;color:var(--muted);font-size:10px}.transaction-amount{font-weight:800;font-size:12px}
.assignment-panel{min-width:0}.form-grid{display:grid;gap:14px;padding:0 20px 20px}.form-grid.compact{gap:12px}.form-grid input,.form-grid select,.form-grid textarea{margin-top:6px;padding:0 10px;min-height:36px}.form-grid textarea{padding:9px 10px;resize:vertical}.field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.assignment-divider{border-top:1px solid var(--line)}.assignment-list{padding:8px 20px 16px}.assignment-item{display:flex;justify-content:space-between;gap:9px;padding:10px 0;border-bottom:1px solid #eff2f6}.assignment-item strong{display:block;font-size:12px}.assignment-item small{display:block;color:var(--muted);font-size:11px}.assignment-item span{font-weight:800;color:var(--blue);font-size:12px}
.settings-panel{max-width:860px}.settings-form{padding-top:0}.settings-form .form-actions{display:flex;justify-content:flex-end;gap:8px}.settings-form .full{grid-column:1/-1}.settings-form .two-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-form .notice{padding:10px 12px;border-radius:8px;background:#fff7e8;color:#9a6712;font-size:12px}
.settings-stack{margin-top:16px}.upload-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px}.upload-row input[type=file]{padding:7px 10px}@media(max-width:760px){.upload-row{grid-template-columns:1fr}}.modal{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(15,25,46,.42);backdrop-filter:blur(2px)}.modal-card{position:relative;z-index:1;width:min(580px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(8,19,43,.25);padding:24px}.modal-card.wide{width:min(760px,100%)}.modal-close{position:absolute;right:15px;top:13px;border:0;background:transparent;font-size:25px;color:#8692a5}.modal-title{margin:0 0 5px;font-size:20px}.modal-desc{margin:0 0 22px;color:var(--muted);font-size:12px}.modal .form-grid{padding:0}.modal .form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.modal .full{grid-column:1/-1}.modal .two-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal .notice{padding:10px 12px;border-radius:8px;background:#fff7e8;color:#9a6712;font-size:12px}.toast{position:fixed;z-index:30;right:24px;top:20px;transform:translateY(-18px);opacity:0;pointer-events:none;background:#16223a;color:#fff;border-radius:8px;padding:10px 14px;box-shadow:0 10px 28px rgba(15,25,45,.22);transition:.2s;font-size:13px}.toast.show{transform:translateY(0);opacity:1}.empty-table{text-align:center;color:var(--muted);padding:30px}.log-detail{max-width:230px;overflow:hidden;text-overflow:ellipsis;color:#69768a}
@media(max-width:1180px){.metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid.main-grid{grid-template-columns:1fr}.data-layout{grid-template-columns:1fr}.detail-panel{min-height:0}.sidebar{width:210px}.main{margin-left:210px;padding-left:22px;padding-right:22px}}@media(max-width:760px){.login-page{grid-template-columns:1fr}.login-visual{display:none}.sidebar{position:static;width:100%;height:auto;padding:15px;flex-direction:row;align-items:center}.workspace-label,.nav{display:none}.sidebar-user{margin:0 0 0 auto;padding:0;border:0}.main{margin:0;padding:0 14px 30px}.topbar{height:72px}.today{display:none}.section-heading,.welcome-row{align-items:flex-start;gap:12px}.section-heading h2,.welcome-row h2{font-size:19px}.metrics,.dashboard-grid{grid-template-columns:1fr}.filter-bar{flex-wrap:wrap}.filter-bar .search{width:100%}.filter-bar select{flex:1}.quick-actions{display:none}.field-row,.modal .two-cols,.settings-form .two-cols{grid-template-columns:1fr}.modal-card{padding:20px}.top-actions .button{font-size:0;width:35px;padding:0}.top-actions .button:after{content:'↻';font-size:16px}}