:root { --pine-900:#173e30; --pine-700:#24634c; --pine-100:#e7f0eb; --ink:#22322a; --muted:#738078; --line:#dce5df; --blue:#2b70a3; --blue-soft:#eaf3fa; --orange:#ba6b16; --orange-soft:#fff1df; --green:#26804f; --green-soft:#e8f5ed; --red:#af433b; --red-soft:#fbeceb; --shadow:0 18px 45px rgba(19,53,39,.14); }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; color:var(--ink); background:#f3f6f4; font:14px/1.5 "Microsoft YaHei", "Noto Sans SC", sans-serif; } button,input,select { font:inherit; } button { cursor:pointer; }
.portal-login { min-height:100vh; display:grid; place-items:center; padding:28px; background:linear-gradient(135deg,#eaf2ee 0%,#f7f8f6 60%,#e8f0ee 100%); } .portal-login-brand { position:fixed; top:28px; left:34px; display:flex; align-items:center; gap:10px; color:var(--pine-900); } .portal-login-brand > span,.portal-brand > span { display:grid; place-items:center; width:38px; height:38px; border-radius:6px; color:#fff; background:var(--pine-900); font-size:20px; font-weight:900; } .portal-login-brand strong,.portal-login-brand small { display:block; } .portal-login-brand small { color:var(--muted); font-size:11px; }
.portal-login-card { width:min(410px,100%); padding:30px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); } .eyebrow { color:var(--pine-700); font-size:11px; font-weight:800; letter-spacing:.04em; } .portal-login-card h1 { margin:5px 0 7px; font-size:25px; } .portal-login-card p { margin:0 0 23px; color:var(--muted); font-size:12px; } label { display:grid; gap:6px; margin:12px 0; color:#5f6c65; font-size:12px; } input,select { width:100%; min-height:40px; padding:0 11px; border:1px solid #cfdad3; border-radius:4px; color:var(--ink); background:#fff; outline:none; } input:focus,select:focus { border-color:var(--pine-700); box-shadow:0 0 0 3px rgba(36,99,76,.12); }
.portal-button { min-height:38px; padding:0 14px; border:1px solid transparent; border-radius:4px; color:var(--ink); background:#edf2ef; font-weight:700; } .portal-button.primary { color:#fff; background:var(--pine-700); } .portal-button.primary:hover { background:var(--pine-900); } .portal-button.ghost { border-color:var(--line); background:#fff; } .portal-button.quiet { padding:0 8px; color:var(--muted); background:transparent; } .portal-button.small { min-height:30px; padding:0 9px; font-size:12px; } .portal-button.wide { width:100%; margin-top:10px; } .portal-message { min-height:20px; margin-top:9px; color:var(--red); font-size:12px; }
.portal-shell { min-height:100vh; } .portal-header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,5vw,70px); border-bottom:1px solid var(--line); background:#fff; } .portal-brand,.portal-user { display:flex; align-items:center; gap:11px; } .portal-brand strong,.portal-brand small { display:block; } .portal-brand strong { color:var(--pine-900); } .portal-brand small { color:var(--muted); font-size:10px; } .portal-brand > span { width:36px; height:36px; overflow:hidden; } .portal-brand > span img { width:100%; height:100%; object-fit:contain; background:#fff; }
.portal-nav { display:flex; gap:3px; padding:0 clamp(18px,5vw,70px); border-bottom:1px solid var(--line); background:#fff; } .portal-nav button { min-height:46px; padding:0 16px; border:0; border-bottom:3px solid transparent; color:var(--muted); background:transparent; font-weight:700; } .portal-nav button.active { border-bottom-color:var(--pine-700); color:var(--pine-900); background:var(--pine-100); }
.portal-content { max-width:1320px; margin:0 auto; padding:28px clamp(18px,5vw,70px) 60px; } .portal-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; } .portal-heading h1 { margin:3px 0; color:var(--pine-900); font-size:25px; } .portal-heading p { margin:0; color:var(--muted); font-size:12px; } .updated-at { color:var(--muted); font-size:11px; } .portal-metrics { display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line); background:#fff; } .portal-metric { min-height:102px; padding:16px; border-right:1px solid var(--line); } .portal-metric:last-child { border-right:0; } .portal-metric span,.portal-metric strong,.portal-metric small { display:block; } .portal-metric span { color:var(--muted); font-size:11px; } .portal-metric strong { margin-top:8px; color:var(--pine-900); font-size:23px; } .portal-metric small { margin-top:5px; color:var(--muted); font-size:10px; } .portal-metric.blue strong { color:var(--blue); } .portal-metric.orange strong { color:var(--orange); } .portal-metric.green strong { color:var(--green); }
.portal-panel { margin-top:16px; border:1px solid var(--line); background:#fff; } .portal-panel > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; border-bottom:1px solid var(--line); } .portal-panel h2 { margin:0; font-size:16px; } .portal-panel header p { margin:3px 0 0; color:var(--muted); font-size:11px; } .portal-table-wrap { overflow:auto; } table { width:100%; min-width:680px; border-collapse:collapse; } th,td { padding:11px 13px; border-bottom:1px solid #edf1ee; text-align:left; white-space:nowrap; } th { color:var(--muted); background:#f7f9f8; font-size:10px; font-weight:800; } td strong,td small { display:block; } td small { margin-top:3px; color:var(--muted); font-size:10px; } .portal-clickable { cursor:pointer; } .portal-clickable:hover { background:#f4f8f5; } .portal-badge { display:inline-flex; padding:4px 7px; border-radius:3px; font-size:10px; font-weight:800; } .portal-badge.green { color:var(--green); background:var(--green-soft); } .portal-badge.blue { color:var(--blue); background:var(--blue-soft); } .portal-badge.orange { color:var(--orange); background:var(--orange-soft); } .portal-badge.red { color:var(--red); background:var(--red-soft); } .portal-muted { color:var(--muted); }
.portal-progress { display:inline-block; width:86px; height:6px; margin-right:6px; overflow:hidden; vertical-align:middle; border-radius:4px; background:#e8eeea; } .portal-progress span { display:block; height:100%; background:var(--blue); } .portal-detail-progress { display:grid; gap:14px; padding:14px 0; } .portal-detail-progress > div { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:10px; color:var(--muted); font-size:11px; } .portal-detail-progress .portal-progress { width:100%; } .portal-detail-progress small { color:var(--ink); font-weight:800; }
.portal-mes-progress { display:grid; grid-template-columns:repeat(5,minmax(62px,1fr)); gap:7px; min-width:385px; } .portal-mes-progress-item { min-width:0; } .portal-mes-progress-item > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:3px; color:var(--muted); font-size:9px; } .portal-mes-progress-item b { color:var(--ink); font-size:9px; font-weight:800; } .portal-mes-progress-item .portal-progress { display:block; width:100%; height:4px; margin:4px 0 2px; } .portal-mes-progress-item small { display:block; color:var(--ink); font-size:9px; font-weight:800; } .portal-mes-progress-detail { grid-template-columns:repeat(5,minmax(80px,1fr)); padding:14px 0; } .portal-mes-progress-state { color:var(--muted); font-size:10px; white-space:nowrap; }
.portal-filter { display:flex; gap:8px; } .portal-filter input { width:220px; } .portal-empty,.portal-loading { padding:54px 20px; text-align:center; color:var(--muted); } .portal-empty strong { display:block; margin-bottom:5px; color:var(--ink); } .portal-modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:rgba(13,39,29,.3); } .portal-modal { width:min(620px,100%); max-height:calc(100vh - 36px); overflow:auto; background:#fff; box-shadow:var(--shadow); } .portal-modal header { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); } .portal-modal header span,.portal-modal header h2 { display:block; } .portal-modal header span { color:var(--pine-700); font-size:10px; } .portal-modal header h2 { margin:3px 0 0; font-size:17px; } .portal-close { width:30px; height:30px; border:0; color:var(--muted); background:#f2f5f3; font-size:21px; } .portal-modal > div { padding:18px; } .portal-order-summary { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); } .portal-order-summary > div { padding:11px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .portal-order-summary > div:nth-child(2n) { border-right:0; } .portal-order-summary span,.portal-order-summary strong { display:block; } .portal-order-summary span { color:var(--muted); font-size:10px; } .portal-order-summary strong { margin-top:5px; } .portal-order-rail { display:grid; grid-template-columns:repeat(4,1fr); margin:15px 0; border:1px solid var(--line); } .portal-order-rail span { padding:11px 5px; color:var(--muted); background:#f6f8f7; text-align:center; font-size:10px; } .portal-order-rail span + span { border-left:1px solid var(--line); } .portal-order-rail span.done { color:var(--green); background:var(--green-soft); } .portal-modal h3 { margin:20px 0 8px; font-size:14px; }
@media (max-width:850px) { .portal-metrics { grid-template-columns:repeat(3,1fr); } .portal-metric:nth-child(3n) { border-right:0; } .portal-metric:nth-child(n+4) { border-top:1px solid var(--line); } .portal-heading { align-items:flex-start; flex-direction:column; } .portal-filter { width:100%; } .portal-filter input { flex:1; width:auto; } }
@media (max-width:560px) { .portal-login { padding:20px; } .portal-login-brand { position:static; align-self:start; margin-bottom:30px; } .portal-login { display:flex; flex-direction:column; justify-content:center; } .portal-login-card { padding:23px; } .portal-header { height:64px; padding:0 15px; } .portal-user { gap:4px; } .portal-nav { padding:0 15px; overflow:auto; } .portal-content { padding:22px 15px 50px; } .portal-metrics { grid-template-columns:repeat(2,1fr); } .portal-metric { border-right:1px solid var(--line) !important; } .portal-metric:nth-child(2n) { border-right:0 !important; } .portal-metric:nth-child(n+3) { border-top:1px solid var(--line); } .portal-order-summary { grid-template-columns:1fr; } .portal-order-summary > div { border-right:0; } .portal-order-rail span { font-size:9px; } }