/* Task009: presentation only. Pulang VI navy/orange; no price or approval logic. */
:root{--navy:#002d69;--brand:#002d69;--orange:#f86816;--ink:#182b45;--muted:#617087;--line:#dfe5ed;--surface:#fff;--bg:#f4f6f9;--radius:6px}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);font-family:MiSans,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:14px}button,input,select,textarea{font:inherit;border-radius:var(--radius)}button{min-height:36px;background:var(--navy);border-color:var(--navy)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f86816;outline-offset:2px}.ghost{color:var(--navy);background:#fff;border-color:var(--line)}button:hover{filter:brightness(.97)}h1,h2,h3,p{overflow-wrap:anywhere}.brand-logo{display:block;width:176px;height:auto;object-fit:contain;flex-shrink:0}.login-shell{background:#f5f7fa;grid-template-columns:1fr 1fr}.login-story{background:#f0f4fa;color:var(--navy);padding:10vw 8vw;border-right:1px solid var(--line)}.login-story .brand-logo{width:min(320px,100%);margin-bottom:44px}.login-story h1{font-size:34px;line-height:1.65;letter-spacing:0;margin-top:12px}.login-story h1 span{font-size:23px;font-weight:500}.login-story .eyebrow{color:var(--muted)}.login-story p{color:var(--muted);font-size:15px}.login-story .env-badge{color:var(--navy);border-color:#c2cfdf;background:#fff}.login-card{box-shadow:none;border:1px solid var(--line);border-radius:10px;padding:32px;width:min(400px,90%)}.login-card h2{font-size:23px}.login-card button{background:var(--navy)}
aside{width:240px;background:#fff;color:var(--ink);border-right:1px solid var(--line);padding:20px 12px 12px;display:flex;flex-direction:column;height:100dvh;position:fixed;top:0;left:0;z-index:25}.brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:2px 14px 16px}.brand>div{font-size:17px;font-weight:650;line-height:1.5}.brand small{display:block;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:1px}.brand-logo{max-width:100%}#mobile-menu{display:none}.nav-tools{display:flex;gap:4px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:10px}.nav-tools button{padding:6px;font-size:12px;min-height:32px;border:0;color:var(--muted)}.nav-tools #nav-collapse{width:32px;flex-shrink:0}.ui-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0}#navigation{overflow-y:auto;flex:1;min-height:0;display:block;margin:0;padding:0}#navigation button{margin:0;min-height:42px;display:flex;align-items:center;border:0;background:transparent;color:var(--ink);text-align:left;border-radius:6px;line-height:1.35;width:100%;gap:10px;font-size:14px;font-weight:500;white-space:normal}#navigation button:hover{background:#f2f5f9}#navigation button span{color:inherit;font-size:inherit}.nav-group{margin:2px 0 4px}.nav-group-row,.nav-item-row{display:flex;min-width:0;position:relative}.nav-group-button{padding:11px 10px}.nav-label{flex:1}.nav-chevron{font-size:18px!important;color:#8b97a8!important}#navigation .active-group>.nav-group-row>.nav-group-button{color:var(--navy);font-weight:650;background:#edf3fa}#navigation .nav-children{padding:5px 0 4px 16px}#navigation .nav-children[hidden]{display:none}#navigation .nav-item-row>button{font-size:13px;padding:9px 10px 9px 17px;min-height:36px;color:#5a6980}#navigation button[aria-current="page"]{background:#eaf1fa;color:var(--navy);font-weight:600;box-shadow:inset 3px 0 var(--orange)}.nav-item-row .unread-dot{margin-left:auto}.nav-group-row[draggable],.nav-item-row[draggable],.order-title,.order-item{cursor:grab}.dragging{opacity:.45}.sort-controls{display:flex;align-items:center;flex-shrink:0}.sort-controls .sort-move{min-height:30px!important;min-width:24px;width:24px!important;padding:4px!important;font-size:12px!important;color:var(--muted)!important}.aside-foot{padding:12px 10px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted);margin-top:8px;position:static}.aside-foot small{color:var(--muted);font-size:10px}.aside-foot .dot{background:#db9b31}.is-collapsed{width:64px;padding:18px 6px 12px}.is-collapsed .brand,.is-collapsed #nav-arrange,.is-collapsed #nav-reset,.is-collapsed .aside-foot,.is-collapsed .nav-label,.is-collapsed .nav-chevron{display:none}.is-collapsed .nav-tools{border-top:0;justify-content:center}.is-collapsed .nav-group-button{justify-content:center;padding:12px 0}.is-collapsed .sort-controls{display:none}main{margin-left:240px;padding:0 24px 28px;min-width:0;width:calc(100% - 240px)}.nav-collapsed main{margin-left:64px;width:calc(100% - 64px)}header{min-height:84px;padding:17px 0;gap:14px;border-bottom:1px solid var(--line);margin-bottom:12px}header h1{font-size:23px;letter-spacing:0;line-height:1.4}header .eyebrow{font-size:11px;letter-spacing:.3px;margin-bottom:5px}header .account{gap:9px;font-size:12px;flex-shrink:0}header button{min-height:32px;font-size:12px}.dev-notice{font-size:11px;line-height:1.6;background:#fdf8eb;color:#866921;border:1px solid #efe5c5;border-radius:5px;padding:7px 12px;margin-bottom:16px}#message{font-size:13px;padding:10px 12px;margin:0 0 12px;background:#eaf3ff;border-radius:6px}.panel{border:1px solid var(--line);border-radius:7px;box-shadow:none;margin-bottom:16px;padding:20px}.panel-head{gap:16px;margin-bottom:18px}.panel h2{font-size:17px}.panel-head p{font-size:12px;line-height:1.6}.toolbar{gap:8px;flex-wrap:wrap}.small{font-size:12px;min-height:30px}.table-wrap{border:1px solid var(--line);border-radius:5px}table{font-size:13px}th{background:#f2f5f9;color:#475971;font-weight:600;font-size:12px;padding:11px 12px;white-space:nowrap}td{padding:12px;line-height:1.55;border-bottom:1px solid #e9edf3}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafbfd}.badge{border-radius:4px;padding:3px 7px;font-size:11px;white-space:nowrap}.details dt,.muted{color:var(--muted)}dialog{border-radius:10px;border:1px solid var(--line);box-shadow:0 12px 60px #162c4530;width:min(600px,94vw);max-height:90dvh}dialog::backdrop{background:#10223d70}label{font-size:13px;color:#40516b}input,select,textarea{min-height:39px;border:1px solid #cbd5e1;padding:9px 11px;color:var(--ink);background:#fff;min-width:0}textarea{min-height:90px}.dialog-title h2{font-size:20px}.workbench-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:6px 0 20px}.workbench-heading h2{font-size:22px;margin:0}.workbench-heading p{color:var(--muted);margin:7px 0 0;font-size:13px}.workbench-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}.workbench-action{display:flex;gap:16px;align-items:center;background:#fff;color:var(--navy);text-align:left;border:1px solid var(--line);padding:18px 20px}.workbench-action>.ui-icon{width:26px;height:26px;color:var(--orange)}.workbench-action span{display:flex;flex-direction:column;gap:5px;font-weight:500}.workbench-action strong{font-size:27px;line-height:1.2}.workbench-action small{font-size:13px;color:var(--muted);padding-top:8px}.shortcut-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.shortcut-grid button{text-align:left;padding:12px;font-size:13px}.expense-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}.expense-card{box-shadow:none;border-radius:6px;padding:17px;border-color:var(--line)}.expense-card .expense-amount{font-size:25px}.expense-card p{font-size:13px;margin:9px 0}.expense-card.unread{border-left:3px solid var(--orange)}.expense-actionbar{background:#fff;border:1px solid var(--line);border-radius:7px;padding:12px;box-shadow:0 -4px 18px #243f6710;z-index:15}.expense-actionbar button{min-height:42px}.approval-overview{display:grid;grid-template-columns:90px 1fr 90px 1fr;gap:10px 14px;font-size:13px;margin:20px 0 10px}.approval-overview dt{color:var(--muted)}.approval-overview dd{margin:0;overflow-wrap:anywhere}.expense-line{border:1px solid var(--line);border-radius:6px;padding:12px;margin:10px 0}.expense-line summary{gap:12px;min-height:30px;align-items:center}.expense-timeline{padding:0 0 0 22px;list-style:none}.expense-timeline li{position:relative;padding:0 0 22px 20px;border-left:2px solid #dce5f0;display:flex;gap:5px;flex-direction:column}.expense-timeline li:before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;background:var(--navy);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c5d4e7}.expense-timeline li:last-child{border-left-color:transparent;padding-bottom:10px}.expense-timeline small,.expense-timeline span{font-size:12px;color:var(--muted)}.history-item{border-bottom:1px solid #e9edf3;padding:12px 0}.history-item>span{font-weight:600}.history-item>small{color:var(--muted);margin-left:12px}.history-item p{margin-bottom:0;font-size:13px}.expense-editor-line{border-radius:6px;border:1px solid var(--line);margin:20px 0;padding:16px}.expense-editor-line legend{font-size:14px;color:var(--navy);padding:0 7px}.expense-files a{overflow-wrap:anywhere}.company-order{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}.order-group{border:1px solid var(--line);border-radius:6px;min-width:0}.order-title,.order-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;gap:8px}.order-title{background:#f1f5fa;border-bottom:1px solid var(--line)}.order-item{margin-left:12px;font-size:13px}.db-heading{margin:4px 0 14px}.db-heading h2{font-size:22px}.db-heading p{font-size:12px}.db-filter{padding:16px;border-radius:6px;background:#fff}.db-filter-grid{gap:10px}.db-section{padding:18px;border-radius:7px;border:1px solid var(--line);margin-top:16px}.db-section h2{font-size:18px}.db-metrics{gap:10px}.db-metric{min-height:106px;padding:15px;border-radius:6px;box-shadow:none}.db-metric strong{font-size:27px}.db-metric p{font-size:12px}.db-metric small{font-size:11px}.db-funds{background:#f3f8fa}.db-funds .db-metric{background:#fff}.db-filter button{min-height:34px}#mobile-tabs{display:none}.my-profile{text-align:center;padding:10px 0 24px}.my-profile>.ui-icon{display:block;width:42px;height:42px;margin:12px auto;color:var(--navy)}.my-profile strong{font-size:20px}.mobile-actions{display:grid;gap:10px}.mobile-actions button{min-height:46px;text-align:left}
@media(max-width:1200px) and (min-width:651px){aside{width:218px}main{margin-left:218px;width:calc(100% - 218px);padding:0 18px 24px}.brand-logo{width:164px}.brand>div{font-size:16px}.approval-overview{grid-template-columns:90px 1fr}.panel{padding:16px}.db-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.workbench-actions{gap:10px}.workbench-action{padding:15px}.db-metric strong{font-size:23px}.company-order{grid-template-columns:1fr}}
@media(max-width:650px){.login-shell{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:28px 16px;min-height:100dvh}.login-story{display:block!important;width:100%;padding:8px 14px 20px;border:0;background:transparent}.login-story .brand-logo{width:230px;margin:0 auto 18px}.login-story h1{font-size:23px;text-align:center;margin:0;line-height:1.5}.login-story h1 span{font-size:17px}.login-story .eyebrow,.login-story>p,.login-story .env-badge{display:none}.login-card{width:100%;max-width:390px;margin:0 auto;padding:22px;box-shadow:none}.login-card h2{font-size:20px}.login-card input{font-size:16px}.login-card button{min-height:46px}aside{display:none!important}main,.nav-collapsed main{margin:0;width:100%;padding:0 12px calc(88px + env(safe-area-inset-bottom))}header{min-height:75px;padding:14px 2px;align-items:center;gap:8px;margin:0 0 10px}header h1{font-size:20px}header .eyebrow{font-size:10px;letter-spacing:0}header .account{gap:0}#account-name,#logout{display:none}#notification-button{font-size:0;padding:8px;min-width:38px;background:transparent;border:0}#notification-button:before{content:'通知';font-size:12px}#notification-button .unread-dot{font-size:10px}.dev-notice{font-size:10px;line-height:1.5;margin-bottom:14px;padding:6px 8px}.panel{padding:15px 12px;margin-bottom:13px;border-radius:6px;max-width:100%;min-width:0}.panel-head{gap:10px;align-items:flex-start;margin-bottom:14px}.panel h2{font-size:17px}.panel-head p{font-size:11px}.toolbar{gap:7px}.workbench-heading{align-items:flex-start;margin:8px 2px 18px;gap:12px}.workbench-heading h2{font-size:20px}.workbench-heading p{font-size:12px;line-height:1.6}.workbench-heading>button{white-space:nowrap;min-height:43px;padding:10px 13px}.workbench-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}.workbench-action{padding:13px 7px;flex-direction:column;align-items:flex-start;gap:9px;min-height:110px;font-size:12px}.workbench-action>.ui-icon{width:21px;height:21px}.workbench-action strong{font-size:24px}.workbench-action small{font-size:11px;padding-top:7px}.expense-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.expense-card{padding:15px;min-width:0}.expense-card .expense-amount{font-size:26px}.expense-card>button{width:100%;min-height:42px}.expense-amount{font-size:26px}.card-top{flex-wrap:wrap;gap:8px}.expense-files a{max-width:100%;white-space:normal}.expense-form-grid{grid-template-columns:minmax(0,1fr);gap:13px}.expense-editor-line{padding:14px 10px;margin:18px 0}.expense-editor-line legend{font-size:14px}.expense-editor-line input,.expense-editor-line select,input,select,textarea{font-size:16px;width:100%;max-width:100%}.expense-line{padding:11px 9px}.expense-line summary{align-items:flex-start;gap:8px;display:flex}.expense-line summary>span{min-width:0;overflow-wrap:anywhere;flex:1}.expense-line summary strong{font-size:14px;flex-shrink:0}.expense-line dl{grid-template-columns:78px minmax(0,1fr);font-size:12px}.expense-line dd{min-width:0;overflow-wrap:anywhere}.approval-overview{grid-template-columns:74px minmax(0,1fr);font-size:13px;gap:10px}.history-item>small{display:block;margin:5px 0;font-size:11px}.expense-timeline{padding-left:8px}.expense-actionbar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));padding:9px 8px;gap:7px;border-radius:7px;display:flex;flex-wrap:wrap}.expense-actionbar button{flex:1;min-width:0;min-height:46px;padding:10px 5px;font-size:14px;white-space:nowrap}.expense-actionbar>span{font-size:12px}.upload-choice{padding:12px;border:1px dashed #b3c5df;border-radius:6px;background:#f8faff;overflow-wrap:anywhere}.upload-choice input{font-size:12px;margin-top:10px;padding:5px}.dialog-title h2{font-size:18px}.dialog-title button{min-height:42px}dialog{width:calc(100% - 24px);max-width:480px;padding:18px;max-height:88dvh}#save-form{width:100%;min-height:46px}#mobile-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom));padding:5px 10px calc(5px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);z-index:20;margin:0}#mobile-tabs button{border:0;border-radius:6px;background:transparent;color:#788599;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;position:relative;min-height:50px;padding:4px}#mobile-tabs button[aria-current="page"]{color:var(--navy);background:#eef4fb;font-weight:650}#mobile-tabs .ui-icon{width:21px;height:21px}#mobile-tabs .unread-dot{position:absolute;left:55%;top:0;font-size:9px}#content{min-width:0}#expense-editor{min-width:0}.my-profile p{font-size:12px}.mobile-actions button{font-size:14px}#pwa-status{font-size:12px;line-height:1.8}body{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Compact desktop hierarchy. */
@media(min-width:651px){.brand{margin-bottom:0}.db-heading h2,.db-heading .eyebrow{display:none}.db-heading p{margin:0}.db-heading{margin:2px 0 12px}.db-filter{grid-template-columns:repeat(6,minmax(0,1fr));padding:0;gap:8px 12px}.db-filter label{font-size:12px;margin:0}.db-filter input,.db-filter select{padding:7px 8px;font-size:12px;min-height:36px}.db-filter button{grid-column:6;min-height:34px;margin:0}.db-metric>strong{font-size:26px;margin:9px 0 7px}.db-metric>span{font-size:13px}.db-metrics{margin-top:14px}.panel:has(#db-filter){padding:16px}.panel:has(#db-filter) .panel-head{margin-bottom:14px}.panel:has(#db-filter) .toolbar{margin-top:10px}.db-section-head{gap:10px}.db-section-head p{margin-top:0}.db-section-head h2{margin:4px 0}.db-section>p{font-size:12px;line-height:1.6}.db-metric{min-height:106px}.db-section{padding:16px}}
@media(min-width:651px) and (max-width:1200px){.db-filter{grid-template-columns:repeat(3,minmax(0,1fr))}.db-filter button{grid-column:3}}

[data-drag-type]{touch-action:pan-y;cursor:grab}.menu-sorting,.menu-sorting *{cursor:grabbing!important;user-select:none!important}.sort-target{box-shadow:inset 0 3px var(--orange)}

.mobile-brand-logo{display:none}@media(max-width:650px){.mobile-brand-logo{display:block;width:130px;height:auto;margin:0 0 6px}header .eyebrow{display:none}#notification-button{font-size:12px}#notification-button:before{content:none}}

/* Mobile brand and page title share a quiet, balanced top bar. */
.notification-icon{width:18px;height:18px;vertical-align:middle;margin-right:4px}
@media(max-width:650px){header{min-height:64px;padding:14px 2px;margin-bottom:10px;align-items:center;gap:10px}header>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}.mobile-brand-logo{width:108px;height:auto;margin:0;flex-shrink:0}header h1{font-size:16px;font-weight:600;line-height:1.4;margin:0;padding-left:12px;border-left:1px solid #cdd6e3;min-width:0}#notification-button{position:relative;width:38px;height:38px;padding:8px;min-width:38px}#notification-button .notification-label{display:none}.notification-icon{width:22px;height:22px;margin:0}#notification-button .unread-dot{position:absolute;right:-1px;top:0;min-width:16px;height:16px;line-height:16px;padding:0 4px;font-size:9px}.dev-notice{margin-top:0}.panel>.card-top{margin-top:4px}}

#version-notice:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin:12px 0;background:#fff8e5;border:1px solid #e4c779;border-radius:8px;color:#725218}#version-notice button{flex-shrink:0}#message[data-tone=error]{background:#fff0f0;border-color:#efc4c4;color:#922626}@media(max-width:650px){#version-notice:not([hidden]){font-size:12px;align-items:flex-start;flex-direction:column}}

/* Approved contract identity: preserve aspect ratio and readable subtitle. */
aside .brand{gap:4px}aside .brand-logo{width:190px}aside .brand small{padding-left:6px;font-size:11px;letter-spacing:2px}
@media(max-width:650px){.mobile-brand-logo{width:124px}header>div:first-child{gap:9px}header h1{padding-left:9px}}