:root{--bg:#f3ede4;--bg-2:#fbf7f2;--bg-soft:#fffaf3b3;--surface:#ffffffad;--surface-strong:#ffffffd1;--surface-muted:#f5efe88f;--surface-contrast:#ede6dcb8;--surface-dark:#163427;--ink:#1b221d;--muted:#5f665e;--accent:#1c6b4a;--accent-strong:#12492f;--accent-soft:#1c6b4a1a;--accent-2:#efb24d;--line:#2129221a;--line-strong:#131d162e;--line-soft:#ffffff8c;--danger:#a53f3f;--warning:#8a610f;--blur-lg:22px;--blur-md:18px;--blur-sm:12px;--shadow-lg:0 24px 80px #221c141f;--shadow-md:0 14px 40px #221c1414;--shadow-soft:0 10px 24px #3a2d1c14;--radius-xl:28px;--radius-lg:22px;--radius-md:16px}*{box-sizing:border-box}html,body{color:var(--ink);scroll-behavior:smooth;background:#f6f0e7;margin:0;padding:0;font-family:IBM Plex Sans,Noto Sans TC,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}main{z-index:1;flex-direction:column;gap:24px;min-height:calc(100vh - 84px);padding-bottom:40px;display:flex;position:relative}.route-shell{will-change:opacity;animation:.22s cubic-bezier(.22,.8,.24,1) route-fade-in}.topbar{z-index:30;background:#f8f2eb;border-bottom:1px solid #131d1614;justify-content:space-between;align-items:center;height:84px;padding:0 32px;display:flex;position:sticky;top:0}.brand{flex-direction:column;gap:4px;display:flex}.brand-mark{letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-size:12px;font-weight:700}.brand-title{letter-spacing:.02em;font-size:18px;font-weight:700}.nav{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.nav-menu{align-items:center}.nav-item{position:relative}.nav a{color:var(--muted);border:1px solid #0000;border-radius:999px;padding:10px 14px;font-size:14px;font-weight:600;transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}.nav a:hover,.nav a:focus-visible{box-shadow:var(--shadow-soft);color:var(--ink);background:#fff;border-color:#1c6b4a24}.nav-dropdown{min-width:220px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none;background:#fffdfa;border:1px solid #131d1614;border-radius:20px;gap:6px;padding:10px;transition:opacity .18s,transform .18s,visibility .18s;display:grid;position:absolute;top:calc(100% + 10px);right:0;transform:translateY(10px)}.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.nav-dropdown-link{color:var(--ink);border-radius:14px;padding:11px 14px;font-size:14px;font-weight:600;transition:background-color .16s,transform .16s,color .16s;display:block}.nav-dropdown-link:hover,.nav-dropdown-link:focus-visible{color:var(--accent-strong);background:#f4eee6b3;transform:translate(2px)}.header{padding:32px 32px 0}.header-compact{padding-top:18px}.hero{border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:#fffdfa;border:1px solid #131d160f;padding:30px;position:relative;overflow:hidden}.hero-compact{padding:20px 22px}.hero:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 1px #ffffffb8}.badge{color:var(--accent);letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:6px;font-size:12px;font-weight:700;display:inline-flex}.title{letter-spacing:-.02em;font-size:30px;font-weight:700;line-height:1.1}.subtitle{color:var(--muted);max-width:720px;margin-top:8px;line-height:1.6}.hero-grid{z-index:1;grid-template-columns:minmax(0,1.8fr) minmax(320px,1fr);align-items:stretch;gap:20px;display:grid;position:relative}.hero-grid-compact{align-items:start;gap:14px}.hero-actions,.hero-kpis{flex-wrap:wrap;gap:12px;margin-top:22px;display:flex}.hero-side,.aside{box-shadow:var(--shadow-soft),inset 0 1px 0 #ffffffc2;color:var(--ink);background:#fcf7f1;border:1px solid #131d160f;border-radius:24px;flex-direction:column;gap:18px;padding:22px;display:flex}.hero-side{justify-content:space-between}.hero-side-compact{gap:12px;padding:16px 18px}.hero-side:before,.aside:before{content:"";position:absolute}.hero-side p,.aside p{color:var(--muted);margin:0;line-height:1.6}.hero-side-accent{width:fit-content;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;background:#1c6b4a14;border-radius:999px;align-items:center;padding:6px 10px;font-size:12px;font-weight:700;display:inline-flex}.hero-side-stat{background:#f4ede4;border:1px solid #131d160d;border-radius:18px;gap:6px;padding:16px 18px;display:grid}.grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;padding:0 32px;display:grid}.grid-compact{gap:12px}.card,.panel{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:#fffdfa;border:1px solid #131d160f}.card{flex-direction:column;grid-column:span 4;gap:12px;min-height:190px;padding:20px;display:flex;position:relative;overflow:hidden}.card:before,.panel:before,.metric-card:before,.table-shell:before{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 1px #ffffffb8}.card:after{content:"";background:#1c6b4a38;border-radius:999px;width:3px;position:absolute;top:20px;bottom:20px;left:0}.card h3,.panel h3,.panel h4{margin:0}.card p,.panel p{color:var(--muted);margin:0;line-height:1.5}.section{grid-column:span 12;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;display:grid}.panel{grid-column:span 8;min-height:220px;padding:22px;position:relative;overflow:hidden}.panel-compact{min-height:auto;padding:16px 18px}.panel-header,.page-toolbar,.split-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.stack{gap:12px;display:grid}.aside{grid-column:span 4}.aside strong{font-size:18px}.metric-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;display:grid}.metric-grid-compact{gap:10px}.metric-card{background:#fffaf5;border:1px solid #131d160d;border-radius:20px;padding:18px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffffb8}.metric-card strong{margin-top:10px;font-size:28px;display:block}.metric-label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:12px;font-weight:700}.metric-meta{color:var(--muted);font-size:13px}.cta,.ghost-btn,.nav-btn{cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 14px;transition:transform .18s,box-shadow .18s,border-color .18s,background-color .18s,color .18s;display:inline-flex}.cta{color:#2e2112;background:#f8be54eb;border-color:#ffd784c7;font-weight:700;box-shadow:0 10px 24px #efb24d38}.cta:hover,.cta:focus-visible{transform:translateY(-1px);box-shadow:0 14px 28px #efb24d42}.ghost-btn,.nav-btn{color:var(--ink);background:#fffdfa;border-color:#131d1614;font-weight:600}.ghost-btn:hover,.nav-btn:hover,.ghost-btn:focus-visible,.nav-btn:focus-visible{color:var(--accent-strong);box-shadow:var(--shadow-soft);border-color:#1c6b4a38}.table-shell{background:#fffdfa;border:1px solid #ffffff9e;border-radius:18px;position:relative;overflow:hidden}.table{border-collapse:collapse;background:0 0;width:100%}.table th,.table td{text-align:left;vertical-align:top;border-bottom:1px solid #131d1614;padding:14px 16px;font-size:14px}.table-compact th,.table-compact td{padding:10px 12px}.table th{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;background:#f4ece3;font-size:12px;font-weight:700}.table tbody tr:hover{background:#f8f4ef70}.tag{border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:700;display:inline-flex}.tag.pending{color:var(--warning);background:#fdf0cef2}.tag.active,.tag.approved{color:var(--accent-strong);background:#daefe4f2}.tag.closed{color:#44505d;background:#dfe5ecf2}.tag.error{color:var(--danger);background:#fbe2e2f2}.input{background:#fffdfa;border:1px solid #131d161f;border-radius:12px;width:100%;padding:10px 12px;transition:border-color .2s,box-shadow .2s,background-color .2s}.input:focus{background:#ffffffe6;border-color:#1c6b4a80;outline:none;box-shadow:0 0 0 4px #1c6b4a14}.form-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;display:grid}.form-row-compact{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}.label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-size:12px;font-weight:700;display:block}.list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.list-row{background:#fffaf5;border:1px solid #131d160d;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;display:flex}.muted{color:var(--muted)}.accent-text{color:var(--accent)}.value-strong{color:var(--accent-strong);font-size:28px;font-weight:700}.compact-value{font-size:18px;font-weight:700}.truncate-cell{white-space:nowrap;text-overflow:ellipsis;max-width:220px;overflow:hidden}.compact-disclosure{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.flow-track{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.flow-stage{background:#fbf7f2ad;border:1px solid #131d161a;border-radius:16px;min-height:94px;padding:12px}.flow-stage.current{background:#dff0e894;border-color:#1c6b4a47}.flow-stage.complete{background:#e9f2ecb8}.flow-stage span{display:block}.progress-bar{background:#131d1614;border-radius:999px;height:10px;overflow:hidden}.progress-bar>span{border-radius:inherit;background:var(--accent);height:100%;display:block}.split-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:16px;display:grid}.glass-overlay{z-index:110;background:#f5efe7d6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.toast{z-index:120;min-width:280px;max-width:360px;color:var(--ink);box-shadow:var(--shadow-lg);background:#fffdfa;border:1px solid #131d160f;border-radius:20px;padding:16px 18px;position:fixed;bottom:24px;right:24px}.toast[data-tone=success]{border-color:#1c6b4a2e}.toast[data-tone=error]{border-color:#a53f3f2e}.loading-wash{position:relative;overflow:hidden}.loading-wash:after{content:"";pointer-events:none;background:#f3ece38c;animation:1s ease-in-out infinite alternate pulse-surface;position:absolute;inset:0}.loading-copy{max-width:560px}@keyframes route-fade-in{0%{opacity:0}to{opacity:1}}@keyframes soft-fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes soft-scale-in{0%{opacity:0}to{opacity:1}}@keyframes pulse-surface{0%{opacity:.5}to{opacity:.85}}.motion-fade-up{animation:.28s cubic-bezier(.2,.8,.2,1) soft-fade-up}.motion-soft-scale{animation:.22s cubic-bezier(.2,.8,.2,1) soft-scale-in}.surface-transition{transition:transform .22s,box-shadow .22s,opacity .22s,border-color .22s,background-color .22s}.surface-transition:hover{transform:translateY(-1px);box-shadow:0 18px 34px #221c141a}.stagger-rows tbody tr{animation:.28s cubic-bezier(.2,.8,.2,1) both soft-fade-up}.stagger-rows tbody tr:first-child{animation-delay:20ms}.stagger-rows tbody tr:nth-child(2){animation-delay:40ms}.stagger-rows tbody tr:nth-child(3){animation-delay:60ms}.stagger-rows tbody tr:nth-child(4){animation-delay:80ms}.stagger-rows tbody tr:nth-child(5){animation-delay:.1s}.stagger-rows tbody tr:nth-child(6){animation-delay:.12s}.stagger-rows tbody tr:nth-child(7){animation-delay:.14s}.stagger-rows tbody tr:nth-child(8){animation-delay:.16s}.stagger-rows tbody tr:nth-child(9){animation-delay:.18s}.stagger-rows tbody tr:nth-child(10){animation-delay:.2s}@media (prefers-reduced-motion:reduce){.route-shell,.motion-fade-up,.motion-soft-scale,.stagger-rows tbody tr,.loading-wash:after{animation:none!important}.surface-transition,.nav a,.nav-dropdown-link,.cta,.ghost-btn,.nav-btn{transition:none}}@media (max-width:1100px){.hero-grid,.split-grid{grid-template-columns:1fr}}@media (max-width:960px){.topbar{flex-direction:column;align-items:flex-start;gap:16px;height:auto;padding:18px 20px}.header,.grid{padding-left:20px;padding-right:20px}.grid{grid-template-columns:repeat(6,minmax(0,1fr))}.card,.panel,.aside,.section,.metric-card{grid-column:span 6}.flow-track{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.grid,.section{grid-template-columns:1fr}.card,.panel,.aside{grid-column:span 1}.hero,.panel,.card,.aside{padding:18px}.table-shell{overflow-x:auto}.flow-track{grid-template-columns:1fr}.toast{min-width:0;max-width:none;bottom:16px;left:16px;right:16px}}
