@import url("https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css");
:root{--bg:#f5f6f1;--surface:#fff;--ink:#172019;--muted:#7b837d;--line:#e7e9e3;--green:#1f6d4e;--green2:#dcece4;--yellow:#f3c657;--danger:#c75b4d;--shadow:0 12px 32px rgba(31,50,39,.08);font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:238px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px;background:#153d2e;color:white;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;font-weight:800;font-size:19px;padding:0 10px 28px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#f3c657;color:#17382c;font-size:18px}.side-nav{display:grid;gap:6px}.nav-item{border:0;background:transparent;color:#a9c0b5;border-radius:12px;padding:13px 14px;text-align:left;font-weight:650;display:flex;gap:12px;align-items:center}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.11);color:white}.nav-item span{font-size:18px}.side-foot{margin-top:auto;padding:15px 10px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:9px;align-items:center}.side-foot strong,.side-foot small{display:block}.side-foot strong{font-size:12px}.side-foot small{font-size:10px;color:#9db6aa;margin-top:2px}.status-dot{width:8px;height:8px;border-radius:50%;background:#7de0a7;box-shadow:0 0 0 4px rgba(125,224,167,.12)}main{padding:0 42px 50px;min-width:0}.topbar{height:112px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:12px;color:var(--muted);margin:0 0 5px;font-weight:700}.topbar h1{font-size:25px;margin:0;letter-spacing:-.04em}.top-actions{display:flex;gap:10px}.icon-button,.close-button,.back-button{border:1px solid var(--line);background:white;border-radius:12px;width:42px;height:42px;display:grid;place-items:center;color:#58615a}.icon-button.small{width:34px;height:34px}.primary-button,.secondary-button{border:0;border-radius:11px;padding:11px 16px;font-weight:750}.primary-button{background:var(--green);color:white;box-shadow:0 7px 15px rgba(31,109,78,.18)}.secondary-button{background:white;color:#38413a;border:1px solid var(--line)}.primary-button.large,.secondary-button.large{padding:14px 22px}.hero-card{border-radius:24px;background:linear-gradient(120deg,#e8efe8 0%,#f1eadb 100%);min-height:218px;padding:32px 38px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;position:relative}.hero-card:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.25);right:-70px;top:-110px}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:white;color:var(--green);font-size:11px;font-weight:800}.hero-card h2{font-size:30px;line-height:1.22;margin:13px 0 9px;letter-spacing:-.05em}.hero-card h2 em{color:var(--green);font-style:normal}.hero-card p{color:#68716b;margin:0;font-size:14px}.camera-cta{z-index:1;width:295px;border:0;border-radius:17px;background:#173f30;color:white;padding:20px;display:flex;align-items:center;gap:14px;text-align:left;box-shadow:0 16px 30px rgba(22,58,44,.18)}.camera-cta .camera-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#f3c657;color:#193e31;font-size:22px}.camera-cta strong,.camera-cta small{display:block}.camera-cta small{font-size:11px;color:#a8c1b5;margin-top:4px}.camera-cta b{margin-left:auto;font-size:20px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.metric-card,.panel{background:white;border:1px solid var(--line);border-radius:18px}.metric-card{padding:20px}.metric-head{display:flex;justify-content:space-between;align-items:center;color:#6e776f;font-size:13px}.metric-card>strong{font-size:24px;display:block;margin:13px 0 7px;letter-spacing:-.03em}.metric-card small{color:#8a918c}.metric-card small b{color:#d1942d}.metric-card .up{color:var(--green)}.soft-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:800}.soft-icon.green{background:#e1efe7;color:#3b765d}.soft-icon.yellow{background:#fbf1d6;color:#b2821f}.soft-icon.blue{background:#e7ecf3;color:#587298}.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:18px}.panel{padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel h3{margin:0 0 5px;font-size:16px}.panel-head p,.items-head p{margin:0;color:#929892;font-size:11px}.text-button{border:0;background:transparent;color:var(--green);font-weight:800;font-size:12px}.document-list{margin-top:14px}.document-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:13px;align-items:center;padding:13px 0;border-top:1px solid #eef0eb}.document-card:first-child{border-top:0}.doc-icon{width:42px;height:48px;border-radius:9px;background:#f0f2ed;display:grid;place-items:center;color:#6f786f}.document-card strong,.document-card small{display:block}.document-card strong{font-size:13px}.document-card small{font-size:11px;color:#929892;margin-top:4px}.document-card .amount{text-align:right;font-size:13px}.status{font-size:10px;font-weight:800;padding:5px 8px;border-radius:999px;white-space:nowrap}.status.done{background:#e4f1e9;color:#297052}.status.review{background:#fff2d3;color:#9a6a13}.donut-wrap{display:grid;place-items:center;padding:20px}.donut{width:145px;height:145px;border-radius:50%;background:conic-gradient(#1f6d4e 0 38%,#76a88f 38% 65%,#f2c860 65% 86%,#e8e9e4 86%);display:grid;place-items:center}.donut:before{content:"";grid-area:1/1;width:93px;height:93px;border-radius:50%;background:white}.donut>div{grid-area:1/1;text-align:center;z-index:1}.donut strong,.donut small{display:block}.donut strong{font-size:18px}.donut small{font-size:10px;color:#979d98;margin-top:3px}.legend{display:grid;gap:10px}.legend p{display:flex;align-items:center;margin:0;font-size:11px}.legend i{width:8px;height:8px;border-radius:3px;margin-right:8px}.legend span{color:#707871}.legend b{margin-left:auto}.c1{background:#1f6d4e}.c2{background:#76a88f}.c3{background:#f2c860}.c4{background:#e8e9e4}.view{display:none}.view.active{display:block}.list-toolbar{display:flex;justify-content:space-between;margin-bottom:14px}.search-field{background:white;border:1px solid var(--line);border-radius:11px;padding:10px 14px;width:min(420px,60%);color:#8a918c}.search-field input{border:0;outline:0;width:90%;margin-left:7px}.full-list-panel{padding:0;overflow:hidden}.table-head,.full-document-row{display:grid;grid-template-columns:1.5fr 1fr .7fr 1fr .8fr;gap:12px;align-items:center;padding:15px 20px}.table-head{background:#f9faf7;font-size:11px;color:#858d87;font-weight:800}.full-document-row{border-top:1px solid var(--line);font-size:13px}.full-document-row small{color:#8b928d}.empty-view{min-height:60vh;place-items:center;text-align:center;color:#8a928c}.empty-view.active{display:grid}.empty-view span{font-size:60px;color:#c8cec9}.empty-view h2{color:#354039}.bottom-nav{display:none}.sheet-dialog,.review-dialog{border:0;padding:0;background:transparent}.sheet-dialog::backdrop,.review-dialog::backdrop{background:rgba(18,30,23,.56);backdrop-filter:blur(5px)}.dialog-card{width:min(560px,calc(100vw - 28px));background:white;border-radius:24px;padding:25px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2,.review-header h2{margin:4px 0 0;letter-spacing:-.04em}.step-label{text-transform:uppercase;color:var(--green);font-size:10px;font-weight:850;letter-spacing:.08em}.close-button{font-size:23px}.upload-zone{margin-top:22px;padding:42px 20px;border:1.5px dashed #b9c9bf;background:#f7faf7;border-radius:18px;text-align:center}.upload-visual{width:62px;height:62px;border-radius:20px;background:#e1eee6;color:var(--green);display:grid;place-items:center;margin:0 auto;font-size:28px}.upload-zone h3{font-size:17px;margin:17px 0 7px}.upload-zone p{font-size:12px;color:#858e88}.upload-actions{display:flex;justify-content:center;gap:9px;margin-top:22px}.capture-tips{display:flex;justify-content:center;gap:20px;font-size:11px;color:#7e8780;margin-top:15px}.review-dialog{width:100vw;height:100vh;max-width:none;max-height:none}.review-shell{background:var(--bg);min-height:100vh}.review-header{height:82px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px}.review-header>div{display:flex;align-items:center;gap:13px}.review-header h2{font-size:19px}.review-actions{display:flex;align-items:center;gap:10px}.confidence-badge{color:var(--green);background:#e5f1e9;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800}.review-content{height:calc(100vh - 82px);display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px}.image-review-panel,.data-review-panel{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden}.image-tools{height:50px;padding:0 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800}.image-tools button{border:0;background:#f2f4f0;border-radius:8px;margin-left:5px;padding:6px 9px}.image-stage{height:calc(100% - 50px);display:grid;place-items:center;background:#e9ebe7;overflow:auto;padding:24px}.image-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .25s;box-shadow:0 8px 22px rgba(0,0,0,.14)}.data-review-panel{padding:20px;overflow:auto}.review-note{display:flex;gap:12px;background:#f0f7f2;border:1px solid #dcebe1;border-radius:12px;padding:13px;color:#466252;font-size:12px}.review-note span{color:var(--green);font-size:18px}.review-note p{margin:0;line-height:1.5}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.form-grid label{font-size:11px;color:#747c76;font-weight:750}.form-grid .wide{grid-column:1/-1}.form-grid input,.form-grid select{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:6px;color:#263029;background:white}.items-head{display:flex;align-items:flex-start;justify-content:space-between;margin:22px 0 10px}.items-table{border:1px solid var(--line);border-radius:11px;overflow:hidden}.item-row{display:grid;grid-template-columns:minmax(120px,2fr) .6fr .8fr .9fr 28px;gap:8px;align-items:center;padding:9px;border-top:1px solid var(--line)}.item-row:first-child{border-top:0}.item-header{background:#f8f9f6;color:#858c86;font-size:10px;font-weight:800}.item-row input{width:100%;border:1px solid transparent;background:transparent;border-radius:6px;padding:6px;font-size:12px}.item-row input:focus{border-color:#8bb7a1;outline:0;background:white}.item-row input.needs-review{background:#fff7df;border-color:#eed492}.remove-item{border:0;background:transparent;color:#a8ada9}.totals{margin:16px 5px 0}.totals p{display:flex;justify-content:space-between;margin:8px 0;color:#737b75;font-size:12px}.totals .grand-total{border-top:1px solid var(--line);padding-top:13px;color:#263129}.grand-total strong{font-size:19px;color:var(--green)}.processing-overlay{position:fixed;inset:0;background:rgba(18,29,22,.74);z-index:20;display:grid;place-items:center;backdrop-filter:blur(6px)}.processing-overlay[hidden]{display:none}.scanner-card{width:min(390px,calc(100vw - 34px));background:white;border-radius:22px;padding:34px;text-align:center}.scan-document{width:100px;height:128px;border:2px solid #bad0c2;border-radius:9px;margin:0 auto 24px;position:relative;overflow:hidden;background:repeating-linear-gradient(#fff 0 13px,#e7ebe7 14px 15px)}.scan-document span{position:absolute;left:0;right:0;height:3px;background:#38a06f;box-shadow:0 0 12px #38a06f;animation:scan 1.3s infinite ease-in-out}.scanner-card h2{font-size:19px}.scanner-card p{color:#8a928c;font-size:12px}.progress{height:6px;background:#ecf0ec;border-radius:999px;overflow:hidden;margin-top:22px}.progress i{display:block;width:10%;height:100%;background:var(--green);transition:width .5s}@keyframes scan{0%{top:4px}50%{top:120px}100%{top:4px}}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#183d2f;color:white;padding:12px 18px;border-radius:11px;opacity:0;pointer-events:none;transition:.25s;z-index:40;font-size:12px;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){.app-shell{grid-template-columns:190px 1fr}main{padding:0 24px 40px}.content-grid{grid-template-columns:1fr}.spend-panel{display:none}.hero-card{padding:28px}.hero-card h2{font-size:27px}.camera-cta{width:270px}.review-content{grid-template-columns:.85fr 1.15fr}.item-row{grid-template-columns:minmax(105px,2fr) .5fr .8fr .9fr 24px}}
@media(max-width:720px){body{padding-bottom:78px}.app-shell{display:block}.sidebar{display:none}main{padding:0 15px 24px}.topbar{height:86px}.topbar h1{font-size:21px}.topbar .primary-button{display:none}.icon-button{width:39px;height:39px}.hero-card{min-height:auto;padding:24px;display:block}.hero-card h2{font-size:26px}.hero-card p{font-size:12px}.camera-cta{margin-top:24px;width:100%;padding:16px}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric-card{padding:16px}.metric-card:nth-child(3){display:none}.metric-card>strong{font-size:20px}.content-grid{display:block}.panel{padding:17px}.spend-panel{display:none}.bottom-nav{position:fixed;z-index:10;bottom:0;left:0;right:0;height:72px;background:white;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{border:0;background:white;color:#8b938d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.bottom-nav button.active{color:var(--green)}.bottom-nav button small{font-size:9px}.bottom-nav .capture-fab{width:52px;height:52px;border-radius:18px;align-self:center;justify-self:center;background:var(--green);color:white;font-size:27px;box-shadow:0 7px 16px rgba(31,109,78,.28);transform:translateY(-12px)}.list-toolbar{gap:8px}.search-field{width:100%}.table-head{display:none}.full-document-row{grid-template-columns:1fr auto;gap:5px}.full-document-row span:nth-child(2),.full-document-row span:nth-child(3){display:none}.full-document-row span:nth-child(5){grid-column:2}.capture-tips{display:grid;gap:7px}.review-dialog{margin:0}.review-header{height:74px;padding:0 14px}.review-header h2{font-size:15px}.confidence-badge{display:none}.review-actions .primary-button{position:fixed;z-index:3;left:14px;right:14px;bottom:14px;width:calc(100% - 28px);padding:14px}.review-content{display:block;height:calc(100vh - 74px);overflow:auto;padding:10px 10px 85px}.image-review-panel{height:330px;margin-bottom:10px}.data-review-panel{overflow:visible}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.item-row{grid-template-columns:minmax(90px,1.6fr) .55fr .8fr .9fr 20px;padding:7px;gap:3px}.item-row input{padding:5px 3px;font-size:11px}.dialog-card{padding:20px}.upload-zone{padding:30px 12px}.upload-actions{display:grid}.document-card{grid-template-columns:38px minmax(0,1fr) auto}.document-card .status{display:none}}

.camera-dialog{border:0;padding:0;background:transparent;width:min(720px,100vw);max-width:none}.camera-dialog::backdrop{background:rgba(18,30,23,.7);backdrop-filter:blur(5px)}.camera-shell{background:#0d1511;border-radius:22px;overflow:hidden;color:white}.camera-header{height:68px;padding:0 18px;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;text-align:center}.camera-header span,.camera-header small{display:block}.camera-header span{font-weight:800}.camera-header small{font-size:10px;color:#92a39a;margin-top:3px}.camera-close{border:0;background:rgba(255,255,255,.1);color:white;width:38px;height:38px;border-radius:12px;font-size:22px}.camera-viewport{position:relative;width:100%;aspect-ratio:4/3;background:#17221c;overflow:hidden}.camera-viewport video{width:100%;height:100%;object-fit:cover}.document-guide{position:absolute;inset:8% 10%;border:1px solid rgba(255,255,255,.45);border-radius:8px;pointer-events:none}.document-guide i{position:absolute;width:30px;height:30px;border-color:#f4cc63;border-style:solid}.document-guide i:nth-child(1){left:-2px;top:-2px;border-width:3px 0 0 3px}.document-guide i:nth-child(2){right:-2px;top:-2px;border-width:3px 3px 0 0}.document-guide i:nth-child(3){left:-2px;bottom:-2px;border-width:0 0 3px 3px}.document-guide i:nth-child(4){right:-2px;bottom:-2px;border-width:0 3px 3px 0}.camera-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(13,21,17,.88);text-align:center;padding:28px}.camera-message[hidden]{display:none}.camera-message strong,.camera-message small{display:block}.camera-message small{color:#aebbb4;font-size:11px;margin-top:7px;line-height:1.5;max-width:330px}.camera-message-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:18px}.camera-message-actions button{border:0;border-radius:12px;padding:11px 14px;font-size:12px;font-weight:850}.camera-start-button{background:#f3c657;color:#13382b}.camera-native-button{background:white;color:#173f30}.camera-controls{height:112px;display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;padding:0 24px}.camera-controls button{justify-self:center}.shutter{width:70px;height:70px;border-radius:50%;border:4px solid white;background:transparent;padding:5px}.shutter span{display:block;width:100%;height:100%;border-radius:50%;background:white}.shutter:disabled{opacity:.3}.camera-gallery,.camera-retry{border:0;background:transparent;color:white;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:20px}.camera-gallery small,.camera-retry small{font-size:9px;color:#a9b7af}

@media(max-width:720px){.camera-dialog{width:100vw;height:100vh;max-height:none;margin:0}.camera-shell{height:100vh;border-radius:0;display:grid;grid-template-rows:68px 1fr 112px}.camera-viewport{aspect-ratio:auto}}

.guide-modes{position:absolute;z-index:3;top:16px;left:50%;transform:translateX(-50%);display:flex;padding:4px;border-radius:12px;background:rgba(9,17,13,.68);backdrop-filter:blur(8px)}.guide-modes button{border:0;background:transparent;color:#b8c5be;padding:8px 11px;border-radius:9px;font-size:10px;font-weight:750;white-space:nowrap}.guide-modes button.active{background:white;color:#1c4937}.document-guide{inset:auto;left:50%;top:50%;width:min(40%,270px);height:78%;transform:translate(-50%,-47%);transition:width .25s,height .25s}.camera-viewport.landscape-guide .document-guide{width:82%;height:54%}.guide-caption{position:absolute;z-index:2;left:50%;bottom:17px;transform:translateX(-50%);margin:0;padding:7px 11px;border-radius:999px;background:rgba(9,17,13,.68);color:white;font-size:10px;white-space:nowrap}.camera-message{z-index:4}

@media(max-width:720px){.document-guide{width:58%;height:76%}.camera-viewport.landscape-guide .document-guide{width:88%;height:48%}}

.api-dialog .dialog-card{text-align:center}.api-visual{display:grid;place-items:center;width:60px;height:60px;border-radius:20px;margin:0 auto 16px;background:#e3f0e8;color:var(--green);font-size:26px}.api-dialog h2{margin:7px 0 10px}.api-dialog p{font-size:12px;line-height:1.6;color:#737d76}.api-key-field{display:block;margin:22px 0 12px;text-align:left;font-size:11px;font-weight:800;color:#59635c}.api-key-field input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:11px;padding:13px;outline:0}.api-key-field input:focus{border-color:#68a186;box-shadow:0 0 0 3px #e2f0e8}.api-dialog .api-error{margin:0 0 10px;padding:9px;border-radius:9px;background:#fff0ed;color:#a34c40}.api-connect-button{width:100%}.api-help{display:block;color:#9aa09c;font-size:10px;margin-top:12px}
.empty-documents{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#929a94;text-align:center}.empty-documents span{font-size:30px;color:#c3cac5;margin-bottom:10px}.empty-documents strong{color:#4f5a52;font-size:13px}.empty-documents small{margin-top:5px}.spend-panel[hidden]{display:none}.content-grid:has(.spend-panel[hidden]){grid-template-columns:1fr}

.camera-viewport.auto-guide .document-guide{width:44%;height:72%;opacity:.72;animation:guidePulse 1.5s ease-in-out infinite}.camera-viewport.auto-guide .document-guide.auto-positioned{animation:none;opacity:1}.camera-viewport.auto-guide .document-guide.stable{border-color:#62e19d;box-shadow:0 0 0 1px rgba(98,225,157,.45),0 0 28px rgba(98,225,157,.22)}.camera-viewport.auto-guide .document-guide.stable i{border-color:#62e19d}.camera-viewport.auto-guide .guide-caption.stable{background:#186844}.guide-modes{max-width:calc(100% - 24px)}@keyframes guidePulse{0%,100%{opacity:.48}50%{opacity:.95}}
.focus-ring{position:absolute;z-index:5;width:62px;height:62px;border:2px solid #f5d05f;border-radius:50%;transform:translate(-50%,-50%) scale(1.35);opacity:0;pointer-events:none}.focus-ring.show{animation:focusPulse .75s ease-out}@keyframes focusPulse{0%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}

.document-card,.full-document-row{cursor:pointer}.document-card:hover,.full-document-row:hover{background:#fafbf8}.document-card:focus-visible,.full-document-row:focus-visible{outline:2px solid #6ca488;outline-offset:2px}.section-intro{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px}.section-intro h2{margin:0 0 6px;font-size:23px}.section-intro p{margin:0;color:var(--muted);font-size:12px}.compact-metrics{grid-template-columns:repeat(2,1fr)}.supplier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.supplier-card{border:1px solid var(--line);background:white;border-radius:17px;padding:20px;cursor:pointer;text-align:left}.supplier-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.supplier-card-head{display:flex;justify-content:space-between;gap:10px}.supplier-card h3{margin:0;font-size:15px}.supplier-card .supplier-rank{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#edf4ef;color:var(--green);font-size:10px;font-weight:850}.supplier-card strong{display:block;font-size:22px;margin:20px 0 8px}.supplier-card p{display:flex;justify-content:space-between;margin:7px 0;color:#858d87;font-size:11px}.supplier-card p b{color:#4b554e}.report-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.monthly-chart{height:270px;display:flex;align-items:flex-end;gap:13px;padding:32px 8px 8px}.month-bar{flex:1;min-width:42px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.month-bar b{font-size:9px;color:#637067}.month-bar i{display:block;width:min(46px,80%);min-height:5px;border-radius:8px 8px 3px 3px;background:linear-gradient(#4d9272,#1f6d4e)}.month-bar span{font-size:10px;color:#8a928c}.top-items{margin-top:16px}.top-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--line)}.top-item:first-child{border-top:0}.top-item .rank{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#f0f3ee;color:#657068;font-size:10px;font-weight:800}.top-item strong,.top-item small{display:block}.top-item strong{font-size:12px}.top-item small{font-size:10px;color:#949b96;margin-top:3px}.top-item>b{font-size:12px}.report-empty{min-height:180px;display:grid;place-items:center;color:#919994;font-size:12px;text-align:center}.detail-dialog{border:0;padding:0;background:transparent;width:100vw;height:100vh;max-width:none;max-height:none}.detail-dialog::backdrop{background:rgba(18,30,23,.6);backdrop-filter:blur(5px)}.detail-shell{min-height:100vh;background:var(--bg)}.detail-header{height:92px;background:white;border-bottom:1px solid var(--line);padding:0 30px;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px}.detail-header h2{margin:3px 0 2px;font-size:19px}.detail-header p{margin:0;color:#8a928c;font-size:10px}.detail-header>strong{font-size:22px;color:var(--green)}.detail-content{height:calc(100vh - 92px);display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;padding:18px}.detail-image-card{border:1px solid var(--line);background:#e8eae6;border-radius:18px;overflow:hidden}.detail-image-stage{height:100%;display:grid;place-items:center;padding:24px;color:#8d958f;font-size:12px}.detail-image-stage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 10px 25px rgba(0,0,0,.14)}.detail-data-card{overflow:auto}.detail-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.detail-summary div{padding:13px;border-radius:11px;background:#f6f8f4}.detail-summary span,.detail-summary strong{display:block}.detail-summary span{font-size:9px;color:#8a928c}.detail-summary strong{font-size:13px;margin-top:5px}.detail-item-head,.detail-item{display:grid;grid-template-columns:2fr .55fr .8fr .9fr;gap:8px;align-items:center}.detail-item-head{padding:9px 12px;background:#f7f8f5;border:1px solid var(--line);border-radius:10px 10px 0 0;color:#858d87;font-size:9px;font-weight:800}.detail-item{padding:12px;border:1px solid var(--line);border-top:0;font-size:11px}.detail-item:last-child{border-radius:0 0 10px 10px}.detail-item span:not(:first-child){text-align:right}.detail-items .report-empty{min-height:110px;border:1px solid var(--line);border-top:0}

@media(max-width:980px){.supplier-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.section-intro{margin-top:0}.compact-metrics,.report-metrics{grid-template-columns:1fr 1fr}.report-metrics .metric-card:nth-child(3){display:none}.supplier-cards{grid-template-columns:1fr}.report-grid{display:block}.report-grid>.panel+ .panel{margin-top:12px}.monthly-chart{height:220px;overflow-x:auto}.detail-dialog{margin:0}.detail-header{height:82px;padding:0 14px;grid-template-columns:40px 1fr}.detail-header>strong{grid-column:2;font-size:16px;margin-top:-23px;justify-self:end}.detail-content{display:block;height:calc(100vh - 82px);overflow:auto;padding:10px}.detail-image-card{height:330px;margin-bottom:10px}.detail-data-card{overflow:visible}.detail-summary{grid-template-columns:repeat(3,1fr)}.detail-item-head,.detail-item{grid-template-columns:1.6fr .55fr .75fr .85fr}.detail-item{padding:10px 8px}}

.supplier-card>div:first-child{display:flex;justify-content:space-between;gap:10px}.supplier-card>div:first-child strong{font-size:15px;margin:0}.supplier-card>div:first-child small{color:#8a928c;font-size:10px}.supplier-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 16px}.supplier-card dl div{background:#f6f8f4;border-radius:10px;padding:10px}.supplier-card dt{color:#8a928c;font-size:9px}.supplier-card dd{margin:5px 0 0;font-size:12px;font-weight:800}.supplier-card>span{display:block;color:var(--green);font-size:11px;font-weight:800;text-align:right}

.detail-header-actions{display:flex;align-items:center;gap:14px}.detail-header-actions strong{font-size:22px;color:var(--green);white-space:nowrap}.image-stage:has(img[hidden])::after{content:"저장된 원본 이미지가 없습니다.";color:#8d958f;font-size:12px}
.danger-button{border:1px solid #efcdc8;background:#fff4f2;color:#b94d41;border-radius:11px;padding:10px 14px;font-weight:750}.danger-button:hover{background:#ffe9e5}
@media(max-width:720px){.review-actions{position:fixed;z-index:4;left:0;right:0;bottom:0;display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:white;border-top:1px solid var(--line)}.review-actions .primary-button{position:static;width:auto;padding:14px}.review-actions .secondary-button{padding:14px}.review-actions .confidence-badge{display:none}#retakeDocument[hidden]+.primary-button{grid-column:1/-1}.detail-header-actions{grid-column:2;justify-self:end;gap:8px;margin-top:-25px}.detail-header-actions strong{font-size:16px}.detail-header-actions .secondary-button{padding:7px 11px;font-size:11px}}

.auth-dialog{border:0;padding:0;background:transparent;width:min(430px,calc(100vw - 28px));max-width:none}.auth-dialog::backdrop{background:linear-gradient(135deg,#173f30 0%,rgba(23,63,48,.9) 45%,rgba(242,198,87,.38));backdrop-filter:blur(8px)}.auth-card{background:white;border-radius:24px;padding:34px;box-shadow:0 24px 70px rgba(11,34,25,.3)}.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:30px}.auth-brand strong{font-size:18px}.auth-card h1{margin:7px 0 8px;font-size:29px;letter-spacing:-.05em}.auth-card>p{margin:0 0 18px;color:#7b837d;font-size:13px}.kakao-login-button{width:100%;border:0;border-radius:14px;background:#fee500;color:#171717;padding:14px 16px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:850;box-shadow:0 8px 16px rgba(31,50,39,.08)}.kakao-login-button span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#381e1f;color:#fee500;font-size:9px}.kakao-login-button:disabled{opacity:.6}.auth-divider{display:flex;align-items:center;gap:12px;margin:17px 0;color:#9ba29d;font-size:10px;font-weight:750}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f1f3ef;border-radius:12px;padding:4px;margin-bottom:18px}.auth-tabs button{border:0;background:transparent;border-radius:9px;padding:10px;color:#7b837d;font-weight:750}.auth-tabs button.active{background:white;color:var(--green);box-shadow:0 3px 9px rgba(31,50,39,.08)}.auth-card label{display:block;color:#59635c;font-size:11px;font-weight:800;margin-top:13px}.auth-card label input,.auth-card label select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:11px;padding:13px;outline:0;background:white}.auth-card label input:focus,.auth-card label select:focus{border-color:#68a186;box-shadow:0 0 0 3px #e2f0e8}.auth-card>.primary-button{width:100%;margin-top:18px}.auth-card>small{display:block;text-align:center;color:#969d98;font-size:10px;margin-top:14px}.auth-message{padding:10px!important;margin:13px 0 0!important;border-radius:10px;background:#fff0ed;color:#a34c40!important}.auth-message.success{background:#eaf5ee;color:#2d7554!important}.account-button{font-size:11px}
@media(max-width:720px){.auth-card{padding:26px 22px}.topbar .account-button{display:block;padding:9px 10px;font-size:10px}}
.auth-card [hidden]{display:none!important}
.auth-link-button{display:block;width:100%;border:0;background:transparent;color:var(--green);font-weight:800;margin-top:12px;padding:8px;cursor:pointer}.auth-link-button:hover{text-decoration:underline}.password-dialog{width:min(470px,calc(100vw - 28px))}.password-field{display:block;color:#59635c;font-size:12px;font-weight:800;margin-top:14px}.password-field input{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:14px;padding:14px;outline:0;font-size:15px}.password-field input:focus{border-color:#68a186;box-shadow:0 0 0 3px #e2f0e8}.password-dialog .primary-button{width:100%;margin-top:18px}
.team-open[hidden]{display:none!important}.team-dialog{width:min(660px,calc(100vw - 28px))}.team-dialog .dialog-card{max-height:min(820px,calc(100vh - 28px));overflow:auto}.team-description{margin:8px 0 20px;color:var(--muted);font-size:12px}.team-invite-form{display:grid;grid-template-columns:1fr 190px auto;gap:9px;align-items:end;padding:15px;border-radius:14px;background:#f5f7f3}.team-invite-form label{font-size:10px;font-weight:800;color:#68716b}.team-invite-form input,.team-invite-form select{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:9px;background:white}.team-help{font-size:10px;color:#8c948e;margin:9px 2px 22px}.team-list-head{display:flex;justify-content:space-between;align-items:center;margin:17px 2px 8px;font-size:12px}.team-list-head span{color:var(--muted)}.team-member-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}.team-member{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--line)}.team-member:first-child{border-top:0}.team-member strong,.team-member small{display:block}.team-member strong{font-size:12px}.team-member small{font-size:9px;color:#929a94;margin-top:3px}.team-role{padding:6px 9px;border-radius:999px;background:#e7f2eb;color:var(--green);font-size:9px;font-weight:800}.team-remove{border:0;background:#fff1ef;color:#b85347;border-radius:8px;padding:7px 9px;font-size:9px}.team-empty{padding:18px;text-align:center;color:#969d98;font-size:10px}
@media(max-width:720px){.team-invite-form{grid-template-columns:1fr}.team-dialog{width:100vw;height:100vh;max-height:none;margin:0}.team-dialog .dialog-card{max-height:100vh;height:100vh;border-radius:0}.team-member{grid-template-columns:1fr auto}.team-remove{grid-column:2}.top-actions{gap:6px}}
.team-message{margin:10px 0!important;padding:10px 12px;border-radius:10px;background:#eaf5ee;color:#2d7554!important;font-size:11px!important}.team-message.error{background:#fff0ed;color:#a34c40!important}.team-message[hidden]{display:none!important}
.invite-copy{display:grid;gap:5px;align-self:center}.invite-copy strong{font-size:13px}.invite-copy small{color:#8c948e;font-size:10px;line-height:1.45}
.sheet-dialog,.auth-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0}
.auth-card label>small{display:inline;color:#8d958f;font-size:9px;font-weight:500;margin-left:5px}
.signup-type-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 18px}.signup-type-tabs[hidden]{display:none!important}.signup-type-tabs button{border:1px solid var(--line);background:white;border-radius:11px;padding:12px;text-align:left;color:#6e776f}.signup-type-tabs button strong,.signup-type-tabs button small{display:block}.signup-type-tabs button strong{font-size:11px}.signup-type-tabs button small{font-size:9px;margin-top:4px;color:#969d98}.signup-type-tabs button.active{border-color:#4f9474;background:#edf6f0;color:var(--green);box-shadow:0 0 0 2px #dcece4}
.store-profile-dialog{width:min(620px,calc(100vw - 28px))}.store-profile-dialog .dialog-card{max-height:min(820px,calc(100vh - 28px));overflow:auto}.store-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.store-profile-grid .wide{grid-column:1/-1}.store-profile-grid label{display:block;color:#59635c;font-size:11px;font-weight:850}.store-profile-grid input,.store-profile-grid select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);border-radius:12px;padding:13px;background:white;outline:0}.store-profile-grid input:focus,.store-profile-grid select:focus{border-color:#68a186;box-shadow:0 0 0 3px #e2f0e8}.store-profile-grid label small{display:inline;color:#8d958f;font-size:9px;font-weight:500;margin-left:5px}.store-profile-dialog .primary-button{width:100%;margin-top:14px}
@media(max-width:720px){.store-profile-dialog{width:100vw;height:100vh;max-height:none;margin:0}.store-profile-dialog .dialog-card{height:100vh;max-height:100vh;border-radius:0}.store-profile-grid{grid-template-columns:1fr}}

/* Upvoice brand refresh */
:root{
  --bg:#f4f9ff;
  --surface:#fff;
  --ink:#10141b;
  --muted:#6f7683;
  --line:#edf1f7;
  --green:#2378ff;
  --green2:#e8f2ff;
  --yellow:#55e78c;
  --danger:#ef5b57;
  --shadow:0 18px 44px rgba(27,62,115,.1);
  --blue:#2378ff;
  --sky:#eaf6ff;
  --mint:#dcf8df;
  --lavender:#f0eaff;
}

.pull-refresh-indicator{
  display:none;
}
body{background:linear-gradient(180deg,#eef7ff 0,#fff 42%,#f7faff 100%);color:var(--ink)}
.app-shell{grid-template-columns:254px 1fr}
.sidebar{background:#fff;color:var(--ink);border-right:1px solid var(--line);box-shadow:12px 0 38px rgba(39,72,112,.05)}
.brand{color:var(--ink);font-size:22px;letter-spacing:0;padding-bottom:30px}
.brand-mark{position:relative;width:42px;height:42px;border-radius:15px;background:linear-gradient(145deg,#2378ff,#26c8ff);color:#fff;font-size:0;box-shadow:0 12px 24px rgba(35,120,255,.25)}
.brand-mark::before{content:"";width:18px;height:18px;border:3px solid currentColor;border-left:0;border-bottom:0;transform:translate(-2px,2px) rotate(0deg);border-radius:2px}
.brand-mark::after{content:"";position:absolute;width:18px;height:3px;border-radius:999px;background:#fff;transform:rotate(-45deg) translate(-1px,4px)}
.nav-item{color:#757e8c;border-radius:18px;padding:14px 15px;font-weight:800}
.nav-item:hover,.nav-item.active{background:#edf6ff;color:#1269ef}
.nav-item span,.bottom-nav button span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#f4f7fb;color:#2378ff;font-size:15px}
.nav-item.active span,.bottom-nav button.active span{background:#2378ff;color:#fff}
.side-foot{border-top-color:#edf1f7;color:#17202c;background:#f7fbff;border-radius:18px;padding:14px;margin:0 4px}
.side-foot small{color:#798390}
.status-dot{background:#31d77a;box-shadow:0 0 0 5px rgba(49,215,122,.16)}
main{padding:0 44px 54px}
.topbar{height:96px;position:sticky;top:0;z-index:7;background:linear-gradient(180deg,#eef7ff 0,rgba(238,247,255,.92) 72%,rgba(238,247,255,0) 100%);backdrop-filter:blur(12px)}
.eyebrow{color:#7d8795;font-size:12px;letter-spacing:0}
.topbar h1{font-size:27px;letter-spacing:0;font-weight:900}
.primary-button,.secondary-button,.icon-button,.close-button,.back-button{border-radius:16px}
.primary-button{background:#2378ff;box-shadow:0 12px 24px rgba(35,120,255,.24)}
.secondary-button{background:#fff;color:#313947;border-color:#edf1f7}
.icon-button,.close-button,.back-button{border-color:#edf1f7;color:#1f2733;box-shadow:0 8px 18px rgba(31,48,78,.06)}
.hero-card{min-height:270px;margin-top:4px;border-radius:30px;background:#fff;padding:34px 42px;box-shadow:var(--shadow);border:0;isolation:isolate}
.hero-card::before{content:"";position:absolute;inset:16px auto auto -18px;width:100%;height:100%;border-radius:30px;background:linear-gradient(90deg,#fff7de,#eef7ff,#f2ecff);z-index:-2;transform:translateX(-4px)}
.hero-card::after{width:250px;height:250px;background:#eff7ff;right:48px;top:48px;z-index:-1}
.pill{background:#eef5ff;color:#2378ff;font-weight:900;padding:7px 11px}
.hero-card h2{font-size:34px;letter-spacing:0;line-height:1.25;margin-top:18px}
.hero-card h2 em{color:#2378ff}
.hero-card p{font-size:15px;color:#667080;line-height:1.65;max-width:420px}
.camera-cta{width:270px;min-height:132px;border-radius:28px;background:#eef7ff;color:#111927;box-shadow:none;padding:22px}
.camera-cta .camera-icon{width:58px;height:58px;border-radius:20px;background:linear-gradient(145deg,#2378ff,#2bc8ff);color:#fff}
.camera-cta small{color:#75808e}.camera-cta b{color:#2378ff}
.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0}
.metric-card,.panel,.supplier-card{border:0;border-radius:26px;background:#fff;box-shadow:0 12px 30px rgba(46,82,130,.07)}
.metric-card{padding:22px;min-height:132px}
.metric-head{color:#727b89;font-weight:850}
.metric-card>strong{letter-spacing:0;font-size:25px}
.soft-icon{width:44px;height:44px;border-radius:50%;font-size:17px}
.soft-icon.green{background:#e8fff0;color:#16a362}
.soft-icon.yellow{background:#fff7dd;color:#cf8b00}
.soft-icon.blue{background:#eaf3ff;color:#2378ff}
.content-grid{grid-template-columns:minmax(0,1.45fr) minmax(310px,.8fr);gap:20px}
.panel{padding:26px}.panel h3{font-size:20px;letter-spacing:0}.panel-head p,.items-head p{font-size:12px;color:#7b8491}
.text-button{color:#7b8491;font-size:13px}
.document-card{border-top-color:#f0f3f8;padding:16px 0}
.doc-icon{border-radius:15px;background:#f0f7ff;color:#2378ff}
.status.done{background:#e9fff1;color:#148b53}.status.review{background:#fff6dc;color:#b17500}
.donut{background:conic-gradient(#2378ff 0 38%,#56d2ff 38% 65%,#55e78c 65% 86%,#edf1f7 86%)}
.search-field{border:0;border-radius:19px;box-shadow:0 10px 24px rgba(46,82,130,.06)}
.table-head{background:#f5f9ff}
.full-document-row{border-top-color:#edf1f7}
.section-intro h2{font-size:24px;letter-spacing:0}.section-intro p{color:#737d8b}
.monthly-chart .month-bar i{background:linear-gradient(#56d2ff,#2378ff)}
.bottom-nav{box-shadow:0 -12px 32px rgba(39,72,112,.08)}
.bottom-nav .capture-fab{background:#2378ff;box-shadow:0 12px 24px rgba(35,120,255,.28)}
.auth-dialog::backdrop{background:linear-gradient(180deg,#eaf6ff 0%,rgba(255,255,255,.88) 100%);backdrop-filter:blur(8px)}
.auth-card,.dialog-card,.scanner-card{border-radius:30px;box-shadow:0 24px 70px rgba(38,74,122,.16)}
.auth-card h1{letter-spacing:0}
.auth-tabs,.signup-type-tabs button,.team-invite-form,.detail-summary div{background:#f4f8fd}
.auth-tabs button.active{color:#2378ff}
.auth-link-button,.step-label,.grand-total strong,.detail-header-actions strong{color:#2378ff}
.auth-card label input:focus,.auth-card label select:focus,.api-key-field input:focus,.password-field input:focus,.store-profile-grid input:focus,.store-profile-grid select:focus{border-color:#74b6ff;box-shadow:0 0 0 4px #e4f2ff}
.kakao-login-button{border-radius:18px}
.review-header,.detail-header{border-bottom:1px solid #edf1f7}
.review-shell,.detail-shell{background:#f4f9ff}
.review-note{background:#edf7ff;border-color:#dceeff;color:#3d536e}
.confidence-badge{background:#e8f2ff;color:#2378ff}
.upload-zone{border-color:#cfe3ff;background:#f6fbff;border-radius:24px}
.upload-visual,.api-visual{background:#e8f2ff;color:#2378ff;border-radius:22px}
.toast{background:#14243b;border-radius:16px}

@media(max-width:980px){
  .app-shell{grid-template-columns:210px 1fr}
  main{padding:0 24px 42px}
  .hero-card{padding:30px}.camera-cta{width:245px}
}

@media(max-width:720px){
  body{background:#fff;padding-bottom:82px}
  main{padding:0 24px 24px}
  .topbar{height:80px;margin:0 -24px;padding:0 24px;background:#fff;border-bottom:1px solid #eef2f7}
  .topbar .eyebrow{display:none}
  .topbar h1{font-size:22px;font-weight:900}
  .top-actions .account-button{display:none}
  .icon-button{border:0;box-shadow:none;background:#fff;font-size:23px}
  .hero-card{margin:30px 10px 34px;padding:32px 28px;border-radius:24px;box-shadow:0 14px 30px rgba(36,67,110,.12)}
  .hero-card::before{inset:10px auto auto -22px;width:calc(100% + 44px);background:linear-gradient(90deg,#fff7df,#eef7ff,#f4edff);opacity:.9}
  .hero-card::after{right:28px;top:auto;bottom:28px;width:160px;height:160px}
  .pill{float:right;background:#7f8791;color:#fff;padding:5px 10px}
  .hero-card h2{clear:both;font-size:27px;margin-top:36px}
  .hero-card p{font-size:14px;max-width:210px}
  .camera-cta{width:100%;margin-top:34px;border-radius:22px;background:#f2f8ff}
  .metrics{grid-template-columns:repeat(3,1fr);gap:12px;margin:0 -2px 34px;overflow-x:auto;padding:0 2px 4px}
  .metric-card{min-width:118px;min-height:92px;padding:14px;text-align:center;border-radius:22px;box-shadow:none;background:#fff}
  .metric-head{display:grid;place-items:center;gap:9px;font-size:12px}
  .metric-head span{order:2;white-space:nowrap}
  .soft-icon{order:1;width:54px;height:54px}
  .metric-card>strong,.metric-card small{display:none}
  .metric-card:nth-child(3){display:block}
  .panel{border-radius:22px;padding:24px;background:#fff;box-shadow:none}
  .panel h3{font-size:24px}
  .recent-panel{padding-left:0;padding-right:0}
  .recent-panel .panel-head{padding:0 0 10px}
  .document-card{padding:18px 0}
  .bottom-nav{height:74px;border-top-color:#eef2f7}
  .bottom-nav button span{width:34px;height:34px}
  .bottom-nav .capture-fab{border-radius:20px}
  .list-toolbar{margin-top:20px}
  .auth-dialog{width:min(430px,calc(100vw - 28px))}
}

/* Mobile hierarchy and detail action refinement */
.detail-total{font-size:22px;color:#2378ff;white-space:nowrap}
.detail-header{grid-template-columns:46px minmax(0,1fr) auto auto}
.detail-header-actions{display:flex;align-items:center;gap:10px}

.full-list-panel,.recent-panel,.detail-data-card{background:#fbfdff}
.document-card,.full-document-row{border-color:#e2eaf5}
.document-card:hover,.full-document-row:hover{background:#f3f8ff}
.detail-image-card{background:#dfe6ee;border-color:#d4deea}
.detail-summary div{background:#eef5ff;border:1px solid #e0ebf8}
.detail-item-head{background:#f1f6fc;border-color:#dce6f2;color:#697484}
.detail-item{background:#fff;border-color:#dce6f2}
.detail-item:nth-child(even){background:#f8fbff}

@media(max-width:720px){
  .sheet-dialog,.auth-dialog{inset:auto;transform:none;margin:auto}
  body{background:#eef4fb}
  main{background:#f7faff}
  .topbar{background:#fff;box-shadow:0 1px 0 #e3ebf5}
  .hero-card{box-shadow:0 18px 44px rgba(35,75,130,.16)}
  .metrics{background:#f7faff}
  .metric-card{background:#f0f7ff;border:1px solid #dfeaf7}
  .panel{background:#f9fcff;border:1px solid #e0e9f5;box-shadow:0 10px 24px rgba(42,78,122,.06)}
  .recent-panel{background:transparent;border:0;box-shadow:none}
  .document-card{background:#fff;border:1px solid #e1eaf5;border-radius:18px;padding:15px;margin:10px 0;box-shadow:0 8px 18px rgba(39,74,118,.05)}
  .document-card:first-child{border-top:1px solid #e1eaf5}
  .full-list-panel{background:transparent;border:0;box-shadow:none;padding:0}
  .full-document-row{background:#fff;border:1px solid #e1eaf5;border-radius:18px;margin:10px 0;padding:16px;box-shadow:0 8px 18px rgba(39,74,118,.05)}
  .full-document-row:hover{background:#f8fbff}
  .search-field{border:1px solid #dde8f5;box-shadow:none;background:#fff}
  .detail-shell{background:#eef4fb}
  .detail-header{height:auto;min-height:108px;padding:14px 16px 14px;grid-template-columns:52px minmax(0,1fr) auto;background:#fff;border-bottom:1px solid #dfe8f3;box-shadow:0 8px 22px rgba(37,70,112,.06)}
  .detail-header .back-button{width:44px;height:44px;border:1px solid #e0e9f5;background:#fff;box-shadow:none}
  .detail-header h2{font-size:24px;line-height:1.15;margin:4px 0 6px;word-break:keep-all}
  .detail-header p{font-size:12px;color:#7b8491;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .detail-total{grid-column:3;grid-row:1 / span 2;align-self:end;font-size:21px;font-weight:900;color:#2378ff}
  .detail-header-actions{position:fixed;z-index:12;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #dfe8f3;box-shadow:0 -14px 30px rgba(39,74,118,.12);backdrop-filter:blur(12px)}
  .detail-header-actions .danger-button,.detail-header-actions .secondary-button{height:50px;border-radius:16px;font-size:15px;font-weight:900}
  .detail-header-actions .secondary-button{background:#2378ff;color:#fff;border-color:#2378ff}
  .danger-button{background:#fff1f1;border-color:#f2caca;color:#c8423d}
  .detail-content{height:calc(100vh - 108px);padding:14px 12px calc(92px + env(safe-area-inset-bottom));background:#eef4fb}
  .detail-image-card{height:340px;margin-bottom:14px;border-radius:24px;background:#dfe6ee;border:1px solid #d4deea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
  .detail-image-stage{padding:20px}
  .detail-data-card{background:#fff;border:1px solid #dde7f3;border-radius:24px;box-shadow:0 12px 28px rgba(39,74,118,.07);padding:20px}
  .detail-summary{gap:10px}
  .detail-summary div{background:#f0f6fd;border:1px solid #dfe9f5;border-radius:16px;padding:14px}
  .detail-summary span{font-size:11px;color:#778291}
  .detail-summary strong{font-size:16px;color:#10141b}
  .detail-data-card .items-head{margin:28px 0 14px}
  .detail-data-card .items-head h3{font-size:28px}
  .detail-item-head,.detail-item{grid-template-columns:1.45fr .5fr .75fr .85fr}
  .detail-item-head{background:#f2f6fb;border-color:#dfe8f3;border-radius:16px 16px 0 0;padding:12px 10px;font-size:11px}
  .detail-item{background:#fff;border-color:#dfe8f3;padding:14px 10px;font-size:13px}
  .detail-item:nth-child(even){background:#f8fbff}
  .bottom-nav{background:rgba(255,255,255,.97);border-top-color:#dfe8f3}
}

/* Overall polish pass: clearer type, quieter banking tone */
:root{
  --bg:#f2f6fb;
  --surface:#ffffff;
  --surface-2:#f7faff;
  --surface-3:#eef5fd;
  --ink:#111827;
  --muted:#697386;
  --line:#dbe6f2;
  --green:#2563eb;
  --blue:#2563eb;
  --shadow:0 14px 34px rgba(24,52,88,.09);
  font-family:SUIT,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{font-size:17px}
body{background:#f2f6fb;color:#111827;font-size:1rem;letter-spacing:0}
button,input,select{font-family:inherit}

.topbar h1{font-size:30px;font-weight:900}
.eyebrow,.step-label{font-size:12px}
.primary-button,.secondary-button{font-size:15px;font-weight:850}
.brand{font-size:23px}
.nav-item{font-size:16px}
.side-foot strong{font-size:13px}.side-foot small{font-size:12px}

.hero-card{
  min-height:238px;
  padding:32px 36px;
  border:1px solid #dfe8f3;
  box-shadow:0 18px 42px rgba(23,54,94,.11);
}
.hero-card::before{opacity:.75}
.hero-card h2{font-size:34px;line-height:1.28;font-weight:950}
.hero-card p{font-size:17px;line-height:1.7;color:#5f6b7d}
.pill{font-size:12px}
.camera-cta{background:#f4f8ff;border:1px solid #dce8f6}
.camera-cta strong{font-size:18px}.camera-cta small{font-size:13px}

.metric-card,.panel,.supplier-card{
  border:1px solid #dfe8f3;
  box-shadow:0 10px 26px rgba(29,63,105,.07);
}
.metric-head{font-size:15px}.metric-card>strong{font-size:27px}.metric-card small{font-size:13px}
.panel h3{font-size:22px}.panel-head p,.items-head p{font-size:14px}
.text-button{font-size:14px}

.document-card{
  border:1px solid #e0e9f4;
  border-radius:18px;
  margin:10px 0;
  padding:16px;
  background:#fff;
}
.document-card:first-child{border-top:1px solid #e0e9f4}
.document-card strong{font-size:16px}
.document-card small{font-size:13px;color:#6f7a8b}
.document-card .amount{font-size:16px}
.doc-icon{width:46px;height:50px}
.status{font-size:12px;padding:6px 10px}

.table-head,.full-document-row{font-size:15px}
.table-head{background:#eef5fd;color:#5e6b7d}
.full-document-row{background:#fff;border-top-color:#dfe8f3}
.search-field{font-size:16px;border:1px solid #dfe8f3}

.auth-card{padding:38px}
.auth-card h1{font-size:32px;font-weight:950}
.auth-card>p{font-size:15px;line-height:1.65}
.auth-brand strong{font-size:21px}
.auth-tabs button{font-size:16px}
.signup-type-tabs button strong{font-size:14px}.signup-type-tabs button small{font-size:12px}
.auth-card label,.password-field,.api-key-field{font-size:13px}
.auth-card label input,.auth-card label select,.password-field input,.api-key-field input,.store-profile-grid input,.store-profile-grid select{
  font-size:16px;
  min-height:54px;
  border-color:#dfe8f3;
}
.auth-card>small{font-size:12px;line-height:1.5}
.kakao-login-button{font-size:17px;min-height:58px}
.auth-link-button{font-size:15px}

.dialog-head h2,.review-header h2{font-size:24px;font-weight:950;letter-spacing:0}
.team-description,.api-dialog p{font-size:15px;line-height:1.65}
.dialog-card{border:1px solid #dfe8f3}

.detail-header h2{font-size:23px}.detail-header p{font-size:13px}.detail-total{font-size:24px}
.detail-summary span{font-size:12px}.detail-summary strong{font-size:17px}
.detail-item-head{font-size:12px}.detail-item{font-size:14px}
.detail-data-card .items-head h3{font-size:26px}

@media(max-width:720px){
  html{font-size:18px}
  body{font-size:1rem;background:#eef4fb}
  main{padding:0 18px 24px;background:#f5f8fc}
  .topbar{height:88px;margin:0 -18px;padding:0 18px}
  .topbar h1{font-size:28px;line-height:1.15}
  .icon-button{font-size:24px}

  .hero-card{
    margin:22px 0 26px;
    padding:28px 24px;
    min-height:0;
    border-radius:26px;
    border:1px solid #dce6f2;
    box-shadow:0 16px 38px rgba(28,62,104,.13);
  }
  .hero-card h2{font-size:30px;line-height:1.24;margin-top:30px}
  .hero-card p{font-size:17px;line-height:1.65;max-width:270px}
  .pill{font-size:12px}
  .camera-cta{
    min-height:112px;
    margin-top:28px;
    padding:18px;
    border-radius:22px;
  }
  .camera-cta .camera-icon{width:62px;height:62px}
  .camera-cta strong{font-size:20px}.camera-cta small{font-size:14px}

  .metrics{gap:10px;margin:0 0 26px;padding:0}
  .metric-card{
    min-width:112px;
    min-height:102px;
    border-radius:22px;
    background:#fff;
    box-shadow:0 8px 18px rgba(33,68,110,.06);
  }
  .metric-head{font-size:14px}
  .soft-icon{width:58px;height:58px;font-size:20px}

  .panel{padding:20px;border-radius:24px;background:#fff}
  .panel h3{font-size:26px}
  .panel-head p,.items-head p{font-size:15px}
  .document-card{
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:13px;
    padding:16px;
    margin:12px 0;
    border-radius:20px;
  }
  .document-card strong{font-size:17px}
  .document-card small{font-size:14px;line-height:1.45}
  .document-card .amount{font-size:17px}
  .doc-icon{width:48px;height:52px}

  .list-toolbar{margin-top:18px}
  .search-field{font-size:16px;padding:13px 15px;border-radius:18px}
  .full-document-row{font-size:16px;border-radius:20px;padding:17px}

  .bottom-nav{height:82px}
  .bottom-nav button small{font-size:12px;font-weight:750}
  .bottom-nav button span{width:38px;height:38px;font-size:17px}
  .bottom-nav .capture-fab{width:64px;height:64px;font-size:34px;border-radius:24px}

  .auth-dialog{width:min(430px,calc(100vw - 24px))}
  .auth-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0}
  .auth-card{padding:30px 24px}
  .auth-card h1{font-size:32px}
  .auth-card>p{font-size:16px}
  .auth-tabs button{font-size:16px}
  .auth-card label input,.auth-card label select{font-size:16px;min-height:56px}

  .detail-header{min-height:116px;padding:16px}
  .detail-header h2{font-size:26px}
  .detail-header p{font-size:14px}
  .detail-total{font-size:22px}
  .detail-content{height:calc(100vh - 116px);padding:14px 12px calc(96px + env(safe-area-inset-bottom))}
  .detail-image-card{height:320px}
  .detail-data-card{padding:20px;border-radius:24px}
  .detail-summary strong{font-size:17px}
  .detail-data-card .items-head h3{font-size:30px}
  .detail-item-head{font-size:12px}
  .detail-item{font-size:15px;padding:15px 10px}
}

/* Detail actions: keep edit/delete near the title on phone and tablet widths */
@media(max-width:1100px){
  .detail-header{
    height:auto;
    min-height:118px;
    grid-template-columns:52px minmax(0,1fr) auto;
    align-items:center;
    padding:16px 18px;
    row-gap:8px;
  }
  .detail-header h2{line-height:1.15}
  .detail-total{
    grid-column:3;
    grid-row:1 / span 2;
    align-self:center;
    font-size:24px;
  }
  .detail-header-actions{
    position:static;
    grid-column:2 / 4;
    justify-self:end;
    display:flex;
    gap:8px;
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
  }
  .detail-header-actions .danger-button,
  .detail-header-actions .secondary-button{
    width:auto;
    height:44px;
    min-width:86px;
    padding:0 18px;
    border-radius:14px;
    font-size:15px;
    font-weight:900;
  }
  .detail-header-actions .secondary-button{
    background:#2563eb;
    color:#fff;
    border-color:#2563eb;
  }
  .detail-content{
    height:calc(100vh - 118px);
    padding-bottom:18px;
  }
}

@media(max-width:720px){
  .detail-header{
    min-height:132px;
    grid-template-columns:50px minmax(0,1fr);
    padding:16px;
  }
  .detail-total{
    grid-column:2;
    grid-row:auto;
    justify-self:start;
    align-self:start;
    font-size:22px;
  }
  .detail-header-actions{
    grid-column:2;
    justify-self:start;
    width:100%;
  }
  .detail-header-actions .danger-button,
  .detail-header-actions .secondary-button{
    flex:1;
    min-width:0;
  }
  .detail-content{
    height:calc(100vh - 132px);
    padding-bottom:18px;
  }
}

/* Dialog width fix: keep the card inside the centered dialog */
.sheet-dialog{
  width:min(560px,calc(100vw - 32px));
  max-width:calc(100vw - 32px);
}
.sheet-dialog>.dialog-card{
  width:100%;
  max-width:100%;
}
.password-dialog{
  width:min(520px,calc(100vw - 32px));
}
.password-dialog>.dialog-card{
  overflow:hidden;
}
.store-profile-dialog{width:min(620px,calc(100vw - 32px))}
.team-dialog{width:min(660px,calc(100vw - 32px))}

@media(max-width:720px){
  .password-dialog,.sheet-dialog{
    width:min(430px,calc(100vw - 24px));
    max-width:calc(100vw - 24px);
  }
  .team-dialog,.store-profile-dialog{
    width:100vw;
    max-width:100vw;
  }
}

/* Mobile dialog positioning: keep compact popups visible and centered */
.sheet-dialog,.auth-dialog{
  position:fixed;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  margin:0;
}

@media(max-width:720px){
  .sheet-dialog,.auth-dialog{
    position:fixed;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    margin:0;
    max-height:calc(100dvh - 28px);
  }
  .sheet-dialog>.dialog-card{
    max-height:calc(100dvh - 28px);
    overflow:auto;
  }
  .team-dialog,.store-profile-dialog{
    inset:0 auto auto 0;
    transform:none;
    width:100vw;
    height:100dvh;
    max-width:100vw;
    max-height:100dvh;
    margin:0;
  }
  .team-dialog>.dialog-card,
  .store-profile-dialog>.dialog-card{
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }
}

/* Device-mode lock: mobile browsers sometimes report a desktop-sized viewport */
html.mobile-device body{
  padding-bottom:78px;
  background:#eef4fb;
  font-size:18px;
}
html.mobile-device .app-shell{display:block}
html.mobile-device .sidebar{display:none}
html.mobile-device main{
  padding:0 18px 24px;
  background:#f5f8fc;
}
html.mobile-device .topbar{
  height:86px;
  background:#fff;
  box-shadow:0 1px 0 #e3ebf5;
}
html.mobile-device .topbar h1{font-size:24px}
html.mobile-device .topbar .primary-button{display:none}
html.mobile-device .top-actions{gap:6px}
html.mobile-device .icon-button{width:39px;height:39px}
html.mobile-device .hero-card{
  min-height:auto;
  padding:28px;
  display:block;
  box-shadow:0 18px 44px rgba(35,75,130,.16);
}
html.mobile-device .hero-card h2{font-size:30px;line-height:1.25}
html.mobile-device .hero-card p{font-size:16px;line-height:1.55}
html.mobile-device .camera-cta{
  margin-top:24px;
  width:100%;
  padding:18px;
}
html.mobile-device .metrics{
  grid-template-columns:1fr 1fr;
  gap:10px;
  background:#f7faff;
}
html.mobile-device .metric-card{
  padding:17px;
  background:#f0f7ff;
  border:1px solid #dfeaf7;
}
html.mobile-device .metric-card:nth-child(3){display:none}
html.mobile-device .metric-card>strong{font-size:22px}
html.mobile-device .content-grid{display:block}
html.mobile-device .panel{
  padding:17px;
  background:#f9fcff;
  border:1px solid #e0e9f5;
  box-shadow:0 10px 24px rgba(42,78,122,.06);
}
html.mobile-device .spend-panel{display:none}
html.mobile-device .recent-panel{
  background:transparent;
  border:0;
  box-shadow:none;
}
html.mobile-device .document-card{
  grid-template-columns:38px minmax(0,1fr) auto;
  background:#fff;
  border:1px solid #e1eaf5;
  border-radius:18px;
  padding:15px;
  margin:10px 0;
  box-shadow:0 8px 18px rgba(39,74,118,.05);
}
html.mobile-device .document-card:first-child{border-top:1px solid #e1eaf5}
html.mobile-device .document-card .status{display:none}
html.mobile-device .bottom-nav{
  position:fixed;
  z-index:10;
  bottom:0;
  left:0;
  right:0;
  height:72px;
  background:white;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
html.mobile-device .bottom-nav button{
  border:0;
  background:white;
  color:#8b938d;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
html.mobile-device .bottom-nav button.active{color:var(--green)}
html.mobile-device .bottom-nav button small{font-size:10px}
html.mobile-device .bottom-nav .capture-fab{
  width:64px;
  height:64px;
  border-radius:24px;
  align-self:center;
  justify-self:center;
  background:#2378ff;
  color:white;
  font-size:34px;
  box-shadow:0 12px 24px rgba(35,120,255,.28);
  transform:translateY(-12px);
}
html.mobile-device .list-toolbar{gap:8px}
html.mobile-device .search-field{
  width:100%;
  border:1px solid #dde8f5;
  box-shadow:none;
  background:#fff;
}
html.mobile-device .table-head{display:none}
html.mobile-device .full-list-panel{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}
html.mobile-device .full-document-row{
  grid-template-columns:1fr auto;
  gap:5px;
  background:#fff;
  border:1px solid #e1eaf5;
  border-radius:18px;
  margin:10px 0;
  padding:16px;
  box-shadow:0 8px 18px rgba(39,74,118,.05);
}
html.mobile-device .full-document-row span:nth-child(2),
html.mobile-device .full-document-row span:nth-child(3){display:none}
html.mobile-device .full-document-row span:nth-child(5){grid-column:2}
html.mobile-device .sheet-dialog,
html.mobile-device .auth-dialog{
  position:fixed;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  margin:0;
  width:min(430px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 28px);
}
html.mobile-device .sheet-dialog>.dialog-card{
  width:100%;
  max-width:100%;
  max-height:calc(100dvh - 28px);
  overflow:auto;
  padding:20px;
}
html.mobile-device .team-dialog,
html.mobile-device .store-profile-dialog{
  inset:0 auto auto 0;
  transform:none;
  width:100vw;
  height:100dvh;
  max-width:100vw;
  max-height:100dvh;
  margin:0;
}
html.mobile-device .team-dialog>.dialog-card,
html.mobile-device .store-profile-dialog>.dialog-card{
  height:100dvh;
  max-height:100dvh;
  border-radius:0;
}
html.mobile-device .upload-zone{padding:30px 12px}
html.mobile-device .upload-actions{display:grid}
html.mobile-device .section-intro{margin-top:0}
html.mobile-device .compact-metrics,
html.mobile-device .report-metrics{grid-template-columns:1fr 1fr}
html.mobile-device .report-metrics .metric-card:nth-child(3){display:none}
html.mobile-device .supplier-cards{grid-template-columns:1fr}
html.mobile-device .report-grid{display:block}
html.mobile-device .report-grid>.panel+.panel{margin-top:12px}
html.mobile-device .monthly-chart{
  height:220px;
  overflow-x:auto;
}
html.mobile-device .review-dialog{margin:0}
html.mobile-device .review-header{
  height:74px;
  padding:0 14px;
}
html.mobile-device .review-header h2{font-size:15px}
html.mobile-device .confidence-badge{display:none}
html.mobile-device .review-content{
  display:block;
  height:calc(100vh - 74px);
  overflow:auto;
  padding:10px 10px 85px;
}
html.mobile-device .image-review-panel{
  height:330px;
  margin-bottom:10px;
}
html.mobile-device .data-review-panel{overflow:visible}
html.mobile-device .form-grid{grid-template-columns:1fr}
html.mobile-device .form-grid .wide{grid-column:auto}
html.mobile-device .review-actions{
  position:fixed;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:white;
  border-top:1px solid var(--line);
}
html.mobile-device .review-actions .primary-button,
html.mobile-device .review-actions .secondary-button{
  position:static;
  width:auto;
  padding:14px;
}
html.mobile-device .detail-dialog{margin:0}
html.mobile-device .detail-shell{background:#eef4fb}
html.mobile-device .detail-header{
  height:auto;
  min-height:132px;
  padding:16px;
  grid-template-columns:50px minmax(0,1fr);
  background:#fff;
  border-bottom:1px solid #dfe8f3;
  box-shadow:0 8px 22px rgba(37,70,112,.06);
}
html.mobile-device .detail-header .back-button{
  width:44px;
  height:44px;
  border:1px solid #e0e9f5;
  background:#fff;
  box-shadow:none;
}
html.mobile-device .detail-header h2{
  font-size:24px;
  line-height:1.15;
  margin:4px 0 6px;
  word-break:keep-all;
}
html.mobile-device .detail-header p{
  font-size:12px;
  color:#7b8491;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
html.mobile-device .detail-total{
  grid-column:2;
  grid-row:auto;
  justify-self:start;
  align-self:start;
  font-size:22px;
  font-weight:900;
  color:#2378ff;
}
html.mobile-device .detail-header-actions{
  grid-column:2;
  justify-self:start;
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  position:static;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
html.mobile-device .detail-header-actions .danger-button,
html.mobile-device .detail-header-actions .secondary-button{
  flex:1;
  min-width:0;
  width:auto;
  height:44px;
  padding:0 18px;
  border-radius:14px;
  font-size:15px;
  font-weight:900;
}
html.mobile-device .detail-header-actions .secondary-button{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
html.mobile-device .detail-content{
  display:block;
  height:calc(100vh - 132px);
  overflow:auto;
  padding:10px 10px 18px;
}
html.mobile-device .detail-image-card{
  height:330px;
  margin-bottom:10px;
}
html.mobile-device .detail-data-card{overflow:visible}
html.mobile-device .detail-summary{grid-template-columns:repeat(3,1fr)}
html.mobile-device .detail-item-head,
html.mobile-device .detail-item{
  grid-template-columns:1.6fr .55fr .75fr .85fr;
}
html.mobile-device .detail-item{padding:10px 8px}

html.pc-device body{
  min-width:980px;
}

/* Mobile density correction after device lock */
html.mobile-device body{
  font-size:16px;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
html.mobile-device main{
  padding:0 14px 24px;
}
html.mobile-device .topbar{
  height:78px;
  margin:0 -14px;
  padding:0 14px;
}
html.mobile-device .topbar .eyebrow{display:block;font-size:11px}
html.mobile-device .topbar h1{
  font-size:23px;
  line-height:1.15;
}
html.mobile-device .account-button{
  padding:8px 10px;
  font-size:11px;
  border-radius:12px;
}
html.mobile-device .hero-card{
  margin:18px 0 22px;
  padding:26px 22px;
  border-radius:24px;
}
html.mobile-device .pill{
  font-size:12px;
  padding:6px 10px;
}
html.mobile-device .hero-card h2{
  font-size:26px;
  line-height:1.24;
  margin-top:24px;
}
html.mobile-device .hero-card p{
  font-size:14px;
  line-height:1.6;
  max-width:250px;
}
html.mobile-device .camera-cta{
  min-height:92px;
  margin-top:26px;
  padding:16px;
  border-radius:20px;
}
html.mobile-device .camera-cta .camera-icon{
  width:52px;
  height:52px;
  border-radius:18px;
}
html.mobile-device .camera-cta strong{font-size:17px}
html.mobile-device .camera-cta small{font-size:12px}
html.mobile-device .metrics{
  margin:14px 0 24px;
  gap:10px;
}
html.mobile-device .metric-card{
  min-height:104px;
  padding:16px;
  text-align:left;
  border-radius:20px;
}
html.mobile-device .metric-head{
  font-size:13px;
}
html.mobile-device .metric-card>strong,
html.mobile-device .metric-card small{
  display:block;
}
html.mobile-device .metric-card>strong{
  font-size:21px;
  margin:12px 0 6px;
}
html.mobile-device .metric-card small{
  font-size:12px;
}
html.mobile-device .metric-card:nth-child(3){
  display:none;
}
html.mobile-device .soft-icon{
  width:38px;
  height:38px;
  border-radius:50%;
}
html.mobile-device .section-intro h2,
html.mobile-device .panel h3{
  font-size:22px;
}
html.mobile-device .document-card{
  padding:14px;
  border-radius:17px;
}
html.mobile-device .document-card strong{
  font-size:16px;
}
html.mobile-device .document-card small{
  font-size:13px;
}
html.mobile-device .document-card .amount{
  font-size:15px;
}
html.mobile-device .bottom-nav{
  height:72px;
}
html.mobile-device .bottom-nav button small{
  font-size:9px;
}
html.mobile-device .bottom-nav .capture-fab{
  width:58px;
  height:58px;
  border-radius:22px;
  font-size:30px;
}

/* SOL Pay inspired visual direction for Upvoice */
:root{
  --sol-navy:#071225;
  --sol-navy-2:#0b1d3a;
  --sol-paper:#ffffff;
  --sol-bg:#eef3fa;
  --sol-line:#e1e7f0;
  --sol-text:#101827;
  --sol-sub:#738095;
  --sol-blue:#2f7cff;
}

html.pc-device body{
  background:#eef3fa;
}
html.pc-device .sidebar{
  background:#fff;
  border-right:1px solid #e0e7f1;
  color:#101827;
}
html.pc-device .brand,
html.pc-device .nav-item{
  color:#101827;
}
html.pc-device .nav-item{
  color:#6f7a8c;
}
html.pc-device .nav-item:hover,
html.pc-device .nav-item.active{
  background:#eef4ff;
  color:#2f7cff;
}
html.pc-device .nav-item span{
  background:#f3f6fb;
  color:#2f7cff;
}
html.pc-device .side-foot{
  background:#f5f8fc;
  color:#101827;
}
html.pc-device main{
  background:#eef3fa;
}
html.pc-device .topbar{
  background:transparent;
  backdrop-filter:none;
}
html.pc-device .hero-card{
  background:#fff;
  border:1px solid #e0e7f1;
  border-radius:32px;
  box-shadow:0 22px 60px rgba(12,28,55,.12);
}
html.pc-device .hero-card::before{
  background:linear-gradient(90deg,#f8fbff,#edf4ff);
  opacity:.9;
}
html.pc-device .hero-card h2 em,
html.pc-device .text-button{
  color:#2f7cff;
}
html.pc-device .camera-cta,
html.pc-device .primary-button{
  background:#2f7cff;
  color:#fff;
}
html.pc-device .camera-cta{
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 18px 36px rgba(47,124,255,.24);
}
html.pc-device .camera-cta strong{
  color:#fff;
  font-weight:950;
}
html.pc-device .camera-cta small{
  color:rgba(255,255,255,.86);
  font-weight:800;
}
html.pc-device .camera-cta .camera-icon{
  background:rgba(255,255,255,.18);
  color:#fff;
}
html.pc-device .camera-cta b{
  color:#fff;
}
html.pc-device .metric-card,
html.pc-device .panel,
html.pc-device .supplier-card{
  border:1px solid #e0e7f1;
  box-shadow:none;
}

html.mobile-device body{
  background:#eef3fa;
  color:var(--sol-text);
}
html.mobile-device main{
  position:relative;
  min-height:100vh;
  padding:0 16px 96px;
  background:#eef4fb;
  overflow:hidden;
}
html.mobile-device main::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;
  height:274px;
  background:
    radial-gradient(circle at 78% 18%,rgba(47,124,255,.14),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#f4f8ff 64%,#eef4fb 100%);
}
html.mobile-device main::after{
  content:"";
  position:absolute;
  z-index:0;
  left:-8px;
  right:-8px;
  top:260px;
  min-height:calc(100% - 260px);
  bottom:0;
  background:var(--sol-paper);
  border-radius:32px 32px 0 0;
}
html.mobile-device main>*{
  position:relative;
  z-index:1;
}
html.mobile-device .topbar{
  height:106px;
  margin:0 -16px;
  padding:18px 18px 12px;
  align-items:flex-end;
  background:transparent;
  box-shadow:none;
  color:#101827;
}
html.mobile-device .topbar .eyebrow{
  display:none;
}
html.mobile-device .topbar h1{
  font-size:30px;
  color:#101827;
  font-weight:950;
  letter-spacing:0;
}
html.mobile-device .top-actions{
  align-items:center;
}
html.mobile-device .topbar .account-button{
  display:none;
}
html.mobile-device .topbar .icon-button{
  width:42px;
  height:42px;
  border:1px solid #e3eaf3;
  background:#fff;
  color:#101827;
  font-size:22px;
  box-shadow:0 8px 22px rgba(26,55,95,.08);
}
html.mobile-device .hero-card{
  margin:18px -16px 0;
  padding:34px 32px 30px;
  border-radius:30px 30px 0 0;
  background:#fff;
  border:0;
  box-shadow:none;
  min-height:0;
}
html.mobile-device .hero-card::before,
html.mobile-device .hero-card::after{
  display:none;
}
html.mobile-device .hero-card .pill{
  background:#eef4ff;
  color:#2f7cff;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  padding:8px 12px;
}
html.mobile-device .hero-card h2{
  margin:22px 0 8px;
  font-size:28px;
  line-height:1.28;
  font-weight:950;
  letter-spacing:0;
}
html.mobile-device .hero-card h2 em{
  color:var(--sol-text);
}
html.mobile-device .hero-card p{
  max-width:100%;
  color:var(--sol-sub);
  font-size:15px;
  line-height:1.6;
}
html.mobile-device .camera-cta{
  min-height:78px;
  margin-top:26px;
  width:100%;
  border-radius:20px;
  border:1px solid #dfe7f2;
  background:#f1f5fb;
  color:var(--sol-text);
  box-shadow:none;
}
html.mobile-device .camera-cta strong{
  color:#101827;
}
html.mobile-device .camera-cta small{
  color:#5f6b7e;
  font-weight:800;
}
html.mobile-device .camera-cta .camera-icon{
  width:50px;
  height:50px;
  border-radius:17px;
  background:#2f7cff;
  color:#fff;
}
html.mobile-device .camera-cta strong{
  font-size:17px;
  font-weight:950;
}
html.mobile-device .camera-cta small{
  color:#7b8798;
}
html.mobile-device .camera-cta b{
  color:#2f7cff;
  font-size:24px;
}
html.mobile-device .metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:0 -16px;
  padding:26px 18px 24px;
  background:#fff;
  border-bottom:10px solid #eef3fa;
}
html.mobile-device .metric-card,
html.mobile-device .metric-card:nth-child(3){
  display:block;
}
html.mobile-device .metric-card{
  min-height:92px;
  padding:0 4px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
}
html.mobile-device .metric-head{
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  color:#2d3748;
  font-size:14px;
  font-weight:950;
}
html.mobile-device .soft-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  font-size:22px;
}
html.mobile-device .metric-card:nth-child(1) .soft-icon{background:#eaf3ff;color:#2f7cff}
html.mobile-device .metric-card:nth-child(2) .soft-icon{background:#eef2f7;color:#6b7688}
html.mobile-device .metric-card:nth-child(3) .soft-icon{background:#eef6ff;color:#4f7cff}
html.mobile-device .metric-card>strong,
html.mobile-device .metric-card small{
  display:none;
}
html.mobile-device .content-grid{
  margin:0 -16px;
  padding:30px 18px 120px;
  background:#fff;
}
html.mobile-device .recent-panel{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
html.mobile-device .panel-head{
  align-items:center;
  margin-bottom:16px;
}
html.mobile-device .panel-head h3{
  font-size:27px;
  font-weight:950;
  letter-spacing:0;
}
html.mobile-device .panel-head p{
  display:none;
}
html.mobile-device .text-button{
  color:#111827;
  font-size:0;
}
html.mobile-device .text-button::after{
  content:"›";
  font-size:34px;
  font-weight:500;
}
html.mobile-device .document-list{
  margin-top:0;
  padding:22px 18px;
  background:#fff;
  border:1px solid #e0e7f1;
  border-radius:24px;
}
html.mobile-device .document-card{
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:16px 0;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
html.mobile-device .document-card+.document-card{
  border-top:1px solid #edf1f6;
}
html.mobile-device .document-card .doc-icon,
html.mobile-device .document-card .status{
  display:none;
}
html.mobile-device .document-card strong{
  font-size:17px;
  line-height:1.35;
}
html.mobile-device .document-card small{
  font-size:14px;
  color:#748096;
}
html.mobile-device .document-card .amount{
  align-self:start;
  font-size:17px;
  color:#111827;
  font-weight:950;
}
html.mobile-device .bottom-nav{
  height:82px;
  padding:0 12px env(safe-area-inset-bottom);
  background:rgba(255,255,255,.96);
  border-top:1px solid #e5ebf3;
  box-shadow:0 -10px 30px rgba(16,24,39,.08);
}
html.mobile-device .bottom-nav button{
  color:#b4bdca;
  font-weight:900;
}
html.mobile-device .bottom-nav button.active{
  color:#111827;
}
html.mobile-device .bottom-nav button span{
  width:36px;
  height:36px;
  border-radius:14px;
  background:transparent;
  color:inherit;
  font-size:24px;
}
html.mobile-device .bottom-nav button small{
  font-size:12px;
}
html.mobile-device .bottom-nav .capture-fab{
  width:58px;
  height:58px;
  border-radius:20px;
  background:#2f7cff;
  color:#fff;
  transform:translateY(-10px);
  box-shadow:0 12px 28px rgba(47,124,255,.28);
}
html.mobile-device #documentsView,
html.mobile-device #suppliersView,
html.mobile-device #reportsView{
  margin:0 -16px;
  padding:24px 18px 120px;
  background:#fff;
  min-height:calc(100vh - 106px);
  border-radius:30px 30px 0 0;
}
html.mobile-device .list-toolbar{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
html.mobile-device .list-toolbar .secondary-button{
  display:none;
}
html.mobile-device .search-field{
  border-radius:18px;
  background:#f4f7fb;
  border:1px solid #e2e8f2;
  min-height:50px;
}
html.mobile-device .full-document-row{
  grid-template-columns:minmax(0,1fr) auto;
  padding:18px;
  border-radius:22px;
  border:1px solid #e0e7f1;
  box-shadow:none;
}
html.mobile-device .section-intro{
  margin:0 0 20px;
}
html.mobile-device .section-intro h2{
  font-size:28px;
  font-weight:950;
}
html.mobile-device .supplier-card,
html.mobile-device .report-grid .panel{
  border:1px solid #e0e7f1;
  border-radius:24px;
  box-shadow:none;
}


/* Simple bottom tabs + warm AI emphasis */
:root{--upvoice-blue:#1f63d8;--upvoice-blue-2:#174fb3;--ai-yellow:var(--capture-yellow,#ffd45c)}
.hero-card h2 em{color:var(--upvoice-blue)}
.primary-button{background:var(--upvoice-blue)}
.pill{
  position:relative;
  color:#6f4b00!important;
  background:var(--ai-yellow)!important;
  box-shadow:0 0 0 0 rgba(255,212,92,.72),0 0 22px rgba(255,212,92,.38);
  animation:aiGlow 2.2s ease-in-out infinite;
}
@keyframes aiGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(255,212,92,.45),0 0 14px rgba(255,212,92,.28);filter:brightness(1)}
  50%{box-shadow:0 0 0 8px rgba(255,212,92,.2),0 0 30px rgba(255,212,92,.66);filter:brightness(1.06)}
}
.update-roadmap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.update-card{background:#fff;border:1px solid #dfe8f3;border-radius:24px;padding:24px;box-shadow:0 12px 30px rgba(46,82,130,.07)}
.update-card span{display:inline-flex;padding:7px 10px;border-radius:999px;background:#edf4ff;color:var(--upvoice-blue);font-size:12px;font-weight:950}
.update-card h3{margin:18px 0 8px;font-size:22px;letter-spacing:0}
.update-card p{margin:0;color:#687589;line-height:1.65;font-size:15px}
.update-card.spotlight{background:linear-gradient(135deg,#fff8d7,#f3f8ff);border-color:#f2dfa7}
html.pc-device .camera-cta,html.pc-device .primary-button{background:var(--upvoice-blue)}
html.pc-device .camera-cta{box-shadow:0 18px 36px rgba(31,99,216,.22)}
html.pc-device .nav-item:hover,html.pc-device .nav-item.active{color:var(--upvoice-blue);background:#edf4ff}
html.pc-device .nav-item span{color:var(--upvoice-blue)}
html.mobile-device .hero-card .pill{background:var(--ai-yellow)!important;color:#6f4b00!important}
html.mobile-device .camera-cta .camera-icon{background:var(--upvoice-blue)}
html.mobile-device .camera-cta b{color:var(--upvoice-blue)}
html.mobile-device .bottom-nav{grid-template-columns:repeat(5,1fr);height:78px;padding:0 8px env(safe-area-inset-bottom)}
html.mobile-device .bottom-nav .capture-fab{display:none}
html.mobile-device .bottom-nav button{min-width:0;color:#a9b3c2}
html.mobile-device .bottom-nav button.active{color:var(--upvoice-blue)}
html.mobile-device .bottom-nav button span{font-size:22px;width:34px;height:34px}
html.mobile-device .bottom-nav button small{font-size:11px;white-space:nowrap}
html.mobile-device #documentsView,html.mobile-device #suppliersView,html.mobile-device #reportsView,html.mobile-device #updatesView{margin:0 -16px;padding:24px 18px 120px;background:#fff;min-height:calc(100vh - 106px);border-radius:30px 30px 0 0}
html.mobile-device .update-roadmap{grid-template-columns:1fr;gap:12px}
html.mobile-device .update-card{border-radius:22px;padding:20px;box-shadow:none}
html.mobile-device .update-card h3{font-size:20px}


/* Deep blue capture CTA + visible summary data */
:root{--capture-blue:#12449f;--capture-blue-2:#0b347c;--capture-yellow:#ffd45c}
html.pc-device .camera-cta,
html.mobile-device .camera-cta{
  background:linear-gradient(135deg,var(--capture-blue),var(--capture-blue-2))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 18px 38px rgba(18,68,159,.24)!important;
}
html.pc-device .camera-cta .camera-icon,
html.mobile-device .camera-cta .camera-icon{
  background:var(--capture-yellow)!important;
  color:#14396f!important;
  box-shadow:0 8px 18px rgba(255,212,92,.28);
}
html.pc-device .camera-cta strong,
html.mobile-device .camera-cta strong{color:#fff!important}
html.pc-device .camera-cta small,
html.mobile-device .camera-cta small{color:rgba(255,255,255,.78)!important}
html.pc-device .camera-cta b,
html.mobile-device .camera-cta b{color:#fff!important}
html.mobile-device .hero-card h2 em,
html.pc-device .hero-card h2 em{color:var(--capture-blue)!important}
html.mobile-device .metrics{
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  padding:24px 18px 28px!important;
}
html.mobile-device .metric-card:nth-child(3){display:none!important}
html.mobile-device .metric-card{
  min-height:132px!important;
  padding:18px!important;
  border:1px solid #e2e8f2!important;
  border-radius:22px!important;
  background:#fff!important;
  text-align:left!important;
  box-shadow:0 10px 26px rgba(31,55,90,.06)!important;
}
html.mobile-device .metric-head{
  flex-direction:row!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  color:#7b8492!important;
  font-size:14px!important;
}
html.mobile-device .metric-card>strong,
html.mobile-device .metric-card small{
  display:block!important;
}
html.mobile-device .metric-card>strong{
  margin:18px 0 8px!important;
  font-size:25px!important;
  line-height:1.1!important;
  color:#111827!important;
  font-weight:950!important;
}
html.mobile-device .metric-card small{
  font-size:13px!important;
  color:#8b95a3!important;
  line-height:1.4!important;
}
html.mobile-device .metric-card small b{color:#d29216!important}
html.mobile-device .metric-card .soft-icon{
  width:42px!important;
  height:42px!important;
  border-radius:16px!important;
  font-size:18px!important;
  flex:0 0 auto!important;
}
html.mobile-device .metric-card:nth-child(1) .soft-icon{background:#e6f1ff!important;color:var(--capture-blue)!important}
html.mobile-device .metric-card:nth-child(2) .soft-icon{background:#fff4d6!important;color:#c98700!important}


/* Mobile detail layout repair */
html.mobile-device .detail-dialog,
html.mobile-device .detail-shell{
  background:#eef4fb!important;
}
html.mobile-device .detail-header{
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  gap:8px 14px!important;
  align-items:start!important;
  padding:18px 18px 16px!important;
  background:#fff!important;
  border-bottom:1px solid #dfe8f3!important;
  box-shadow:0 8px 22px rgba(37,70,112,.06)!important;
}
html.mobile-device .detail-header .back-button{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  border:1px solid #dbe7f4!important;
  box-shadow:none!important;
}
html.mobile-device .detail-header>div:not(.detail-header-actions){
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
}
html.mobile-device .detail-header .step-label{
  display:block!important;
  margin-bottom:4px!important;
  font-size:13px!important;
  letter-spacing:0!important;
}
html.mobile-device .detail-header h2{
  margin:0 0 6px!important;
  font-size:24px!important;
  line-height:1.18!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html.mobile-device .detail-header p{
  margin:0!important;
  font-size:13px!important;
  line-height:1.4!important;
  color:#7b8491!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%!important;
}
html.mobile-device .detail-total{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:start!important;
  align-self:start!important;
  margin:0!important;
  font-size:23px!important;
  line-height:1.15!important;
  color:#1f63d8!important;
  white-space:nowrap!important;
}
html.mobile-device .detail-header-actions{
  grid-column:1 / -1!important;
  grid-row:3!important;
  position:static!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  width:100%!important;
  margin:8px 0 0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html.mobile-device .detail-header-actions .danger-button,
html.mobile-device .detail-header-actions .secondary-button{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  border-radius:16px!important;
  padding:0 14px!important;
  font-size:16px!important;
  font-weight:950!important;
}
html.mobile-device .detail-header-actions .secondary-button{
  background:#1f63d8!important;
  border-color:#1f63d8!important;
  color:#fff!important;
}
html.mobile-device .detail-content{
  display:block!important;
  height:calc(100vh - 190px)!important;
  overflow:auto!important;
  padding:10px 10px 28px!important;
  background:#eef4fb!important;
}
html.mobile-device .detail-image-card{
  height:300px!important;
  margin:0 0 12px!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
html.mobile-device .detail-image-stage{
  padding:16px!important;
}
html.mobile-device .detail-data-card{
  padding:18px!important;
  border-radius:24px!important;
  background:#fff!important;
  overflow:visible!important;
}
html.mobile-device .detail-summary{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
html.mobile-device .detail-summary div{
  min-width:0!important;
  padding:12px 10px!important;
  border-radius:16px!important;
}
html.mobile-device .detail-summary span{
  font-size:12px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
html.mobile-device .detail-summary strong{
  margin-top:8px!important;
  font-size:18px!important;
  line-height:1.15!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
}
html.mobile-device .detail-data-card .items-head{
  margin:26px 0 14px!important;
}
html.mobile-device .detail-data-card .items-head h3{
  font-size:28px!important;
  line-height:1.15!important;
}
html.mobile-device .detail-data-card .items-head p{
  display:block!important;
  font-size:15px!important;
  line-height:1.45!important;
}
html.mobile-device .detail-item-head,
html.mobile-device .detail-item{
  grid-template-columns:minmax(0,1.7fr) 38px minmax(58px,.72fr) minmax(74px,.9fr)!important;
  gap:6px!important;
}
html.mobile-device .detail-item-head{
  padding:11px 10px!important;
  font-size:13px!important;
}
html.mobile-device .detail-item{
  padding:13px 10px!important;
  font-size:14px!important;
  line-height:1.3!important;
}
html.mobile-device .detail-item strong{
  min-width:0!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
}
html.mobile-device .detail-item span:not(:first-child){
  text-align:right!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:380px){
  html.mobile-device .detail-header{grid-template-columns:48px minmax(0,1fr)!important;padding:16px 14px 14px!important}
  html.mobile-device .detail-header .back-button{width:48px!important;height:48px!important}
  html.mobile-device .detail-header h2{font-size:22px!important}
  html.mobile-device .detail-total{font-size:21px!important}
  html.mobile-device .detail-summary strong{font-size:16px!important}
  html.mobile-device .detail-item-head,html.mobile-device .detail-item{grid-template-columns:minmax(0,1.5fr) 32px minmax(50px,.7fr) minmax(64px,.85fr)!important;font-size:12px!important}
}


/* Toss-like mobile top service header */
.mobile-topbar{display:none}
html.mobile-device .topbar{
  height:154px!important;
  margin:0 -16px!important;
  padding:18px 18px 14px!important;
  display:block!important;
  background:linear-gradient(180deg,#f6f8fb 0%,#eef4fb 100%)!important;
  box-shadow:none!important;
  position:relative!important;
  overflow:visible!important;
}
html.mobile-device .desktop-title,
html.mobile-device .top-actions{
  display:none!important;
}
html.mobile-device .mobile-topbar{
  display:block!important;
  position:relative!important;
  z-index:5!important;
}
html.mobile-device .mobile-service-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:48px!important;
}
html.mobile-device .mobile-service-brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#111827!important;
  font-weight:950!important;
  font-size:25px!important;
  letter-spacing:0!important;
}
html.mobile-device .mobile-service-brand .brand-mark{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  box-shadow:0 10px 20px rgba(31,99,216,.18)!important;
}
html.mobile-device .mobile-menu-button{
  width:44px!important;
  height:44px!important;
  border:0!important;
  border-radius:16px!important;
  background:#fff!important;
  color:#111827!important;
  font-size:25px!important;
  font-weight:950!important;
  box-shadow:0 8px 22px rgba(26,55,95,.08)!important;
}
html.mobile-device .mobile-store-card{
  margin-top:18px!important;
  width:100%!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:0 18px!important;
  border:1px solid #e2e8f2!important;
  border-radius:22px!important;
  background:#fff!important;
  color:#111827!important;
  box-shadow:0 10px 24px rgba(31,55,90,.07)!important;
  text-align:left!important;
}
html.mobile-device .mobile-store-card strong{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:21px!important;
  font-weight:950!important;
}
html.mobile-device .mobile-store-card span{
  flex:0 0 auto!important;
  color:#9aa5b5!important;
  font-size:30px!important;
  line-height:1!important;
}
html.mobile-device .mobile-account-menu{
  position:absolute!important;
  top:54px!important;
  right:0!important;
  width:214px!important;
  padding:8px!important;
  border:1px solid #dfe7f2!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 18px 42px rgba(15,23,42,.16)!important;
  z-index:30!important;
}
html.mobile-device .mobile-account-menu[hidden]{display:none!important}
html.mobile-device .mobile-account-menu button{
  display:block!important;
  width:100%!important;
  min-height:44px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#263244!important;
  text-align:left!important;
  font-size:15px!important;
  font-weight:850!important;
}
html.mobile-device .mobile-account-menu button:hover,
html.mobile-device .mobile-account-menu button:active{
  background:#f1f6ff!important;
  color:#1f63d8!important;
}
html.mobile-device main::before{height:316px!important}
html.mobile-device main::after{top:302px!important}
html.mobile-device .hero-card{margin-top:12px!important}
html.mobile-device #documentsView,
html.mobile-device #suppliersView,
html.mobile-device #reportsView,
html.mobile-device #updatesView{
  min-height:calc(100vh - 154px)!important;
}


/* Mobile detail polish: compact actions and no currency wrap */
html.mobile-device .detail-header-actions{
  grid-template-columns:auto auto!important;
  justify-content:start!important;
  gap:8px!important;
  margin-top:10px!important;
}
html.mobile-device .detail-header-actions .danger-button,
html.mobile-device .detail-header-actions .secondary-button{
  width:auto!important;
  min-width:86px!important;
  height:40px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  font-size:14px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
html.mobile-device .detail-header-actions .danger-button{
  background:#fff5f5!important;
  border:1px solid #f2c9c9!important;
  color:#bf3838!important;
}
html.mobile-device .detail-header-actions .secondary-button{
  background:#eef4ff!important;
  border:1px solid #cfe0ff!important;
  color:#1f63d8!important;
}
html.mobile-device .detail-content{
  height:calc(100vh - 176px)!important;
}
html.mobile-device .detail-item-head,
html.mobile-device .detail-item{
  grid-template-columns:minmax(0,1.5fr) 34px minmax(68px,.78fr) minmax(86px,1fr)!important;
  column-gap:6px!important;
}
html.mobile-device .detail-item-head span,
html.mobile-device .detail-item span{
  min-width:0!important;
}
html.mobile-device .detail-item span:nth-child(3),
html.mobile-device .detail-item span:nth-child(4){
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  font-size:13px!important;
}
html.mobile-device .detail-item span:nth-child(2){
  white-space:nowrap!important;
  font-size:13px!important;
}
html.mobile-device .detail-item strong{
  font-size:14px!important;
  line-height:1.35!important;
}
@media(max-width:380px){
  html.mobile-device .detail-item-head,html.mobile-device .detail-item{grid-template-columns:minmax(0,1.35fr) 30px minmax(60px,.72fr) minmax(76px,.92fr)!important;column-gap:4px!important}
  html.mobile-device .detail-item span:nth-child(3),html.mobile-device .detail-item span:nth-child(4){font-size:12px!important}
  html.mobile-device .detail-header-actions .danger-button,html.mobile-device .detail-header-actions .secondary-button{min-width:78px!important;height:38px!important;padding:0 15px!important}
}


/* Mobile detail bottom actions and amount wrapping */
.detail-footer-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #e3ebf5;
}
.detail-footer-actions .danger-button,
.detail-footer-actions .secondary-button{
  width:auto;
  min-width:64px;
  height:34px;
  padding:0 13px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
  font-weight:850;
  box-shadow:none;
}
.detail-footer-actions .danger-button{
  background:#fff6f6;
  border:1px solid #efcaca;
  color:#bd3737;
}
.detail-footer-actions .secondary-button{
  background:#eef5ff;
  border:1px solid #cfe0ff;
  color:#1f63d8;
}
.detail-footer-actions .danger-button:hover{background:#ffefef}
.detail-footer-actions .secondary-button:hover{background:#e4efff}
html.mobile-device .detail-header-actions{display:none!important}
html.mobile-device .detail-header{
  grid-template-columns:54px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
}
html.mobile-device .detail-header>div:not(.detail-header-actions){
  min-width:0!important;
}
html.mobile-device .detail-header h2{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html.mobile-device .detail-total{
  grid-column:2!important;
  justify-self:start!important;
  margin-top:0!important;
  white-space:nowrap!important;
}
html.mobile-device .detail-content{
  height:calc(100vh - 132px)!important;
  padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
}
html.mobile-device .detail-data-card,
html.mobile-device .detail-summary{
  position:static!important;
  transform:none!important;
}
html.mobile-device .detail-summary{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
html.mobile-device .detail-summary div{
  min-width:0!important;
  padding:12px 9px!important;
}
html.mobile-device .detail-summary span{
  font-size:11px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
html.mobile-device .detail-summary strong{
  display:block!important;
  width:100%!important;
  margin-top:8px!important;
  font-size:clamp(14px,4.05vw,17px)!important;
  line-height:1.08!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
html.mobile-device .detail-footer-actions{
  justify-content:flex-end!important;
  margin-top:12px!important;
  padding-bottom:2px!important;
}
html.mobile-device .detail-footer-actions .danger-button,
html.mobile-device .detail-footer-actions .secondary-button{
  min-width:58px!important;
  height:32px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:850!important;
}
@media(max-width:380px){
  html.mobile-device .detail-summary div{padding:11px 7px!important}
  html.mobile-device .detail-summary strong{font-size:13px!important}
  html.mobile-device .detail-footer-actions .danger-button,
  html.mobile-device .detail-footer-actions .secondary-button{min-width:54px!important;padding:0 10px!important}
}


/* Supplier card wrapping and softer typography */
#topSupplierName{
  display:block;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:keep-all;
}
.supplier-card>div:first-child,
.metric-card{min-width:0}
.supplier-card strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:keep-all;
}
html.mobile-device .section-intro h2,
html.mobile-device .topbar h1,
html.mobile-device .mobile-service-brand strong,
html.mobile-device .mobile-store-card strong,
html.mobile-device .hero-card h2,
html.mobile-device .panel h3,
html.mobile-device .items-head h3,
html.mobile-device .metric-card>strong,
html.mobile-device .document-card strong,
html.mobile-device .full-document-row strong,
html.mobile-device .supplier-card strong,
html.mobile-device .detail-header h2,
html.mobile-device .detail-item strong{
  font-weight:800!important;
  letter-spacing:0!important;
}
html.mobile-device .metric-head,
html.mobile-device .section-intro p,
html.mobile-device .panel-head p,
html.mobile-device .items-head p,
html.mobile-device .document-card small,
html.mobile-device .full-document-row small,
html.mobile-device .supplier-card small{
  font-weight:500!important;
}
html.mobile-device #suppliersView .metrics{
  align-items:stretch!important;
}
html.mobile-device #suppliersView .metric-card{
  overflow:hidden!important;
}
html.mobile-device #suppliersView .metric-card:nth-child(2){
  text-align:left!important;
}
html.mobile-device #topSupplierName{
  font-size:clamp(22px,5.2vw,27px)!important;
  line-height:1.12!important;
  margin-top:22px!important;
}
html.mobile-device #topSupplierAmount{
  display:block!important;
  margin-top:10px!important;
  font-size:18px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
html.mobile-device #supplierCards .supplier-card{
  overflow:hidden!important;
}
html.mobile-device #supplierCards .supplier-card>div:first-child{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center!important;
  gap:10px!important;
}
html.mobile-device #supplierCards .supplier-card>div:first-child strong{
  font-size:22px!important;
  line-height:1.15!important;
}
html.mobile-device #supplierCards .supplier-card>div:first-child small{
  justify-self:end!important;
  white-space:nowrap!important;
  font-size:13px!important;
  color:#8b95a3!important;
}
html.pc-device .topbar h1,
html.pc-device .hero-card h2,
html.pc-device .panel h3,
html.pc-device .metric-card>strong,
html.pc-device .document-card strong,
html.pc-device .supplier-card strong{
  font-weight:800!important;
  letter-spacing:0!important;
}


/* Mobile menu logout visibility */
html.mobile-device .mobile-account-menu button.mobile-menu-danger{
  color:#c8423d!important;
  border-top:1px solid #eef2f7!important;
  margin-top:6px!important;
}
html.mobile-device .mobile-account-menu button.mobile-menu-danger:hover,
html.mobile-device .mobile-account-menu button.mobile-menu-danger:active{
  background:#fff1f1!important;
  color:#bd3737!important;
}


/* Auth dialog fallback */
.auth-dialog.modal-fallback{display:block!important;position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;margin:0!important;z-index:9999!important}
.auth-dialog.modal-fallback::backdrop{background:transparent}
.auth-pending .auth-dialog{z-index:9999}


/* Kakao in-app and mobile logout */
.external-browser-button{width:100%;margin-top:10px;border:1px solid #d6e5ff;background:#edf5ff;color:#1f63d8;border-radius:14px;padding:13px 16px;font-weight:900}
.external-browser-button[hidden]{display:none!important}
html.mobile-device .mobile-account-menu .mobile-menu-danger{color:#ef5b57!important}
html.mobile-device .mobile-account-menu .mobile-menu-danger:hover,html.mobile-device .mobile-account-menu .mobile-menu-danger:active{background:#fff1f1!important;color:#d83d3a!important}


/* Mobile browser layout repair */
html.mobile-device,html.mobile-device body{width:100%;max-width:100%;overflow-x:hidden!important}
html.mobile-device body{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;background:#eef4fb!important}
html.mobile-device main{width:100%!important;max-width:none!important;margin:0!important;padding-left:14px!important;padding-right:14px!important}
html.mobile-device .topbar{margin-left:-14px!important;margin-right:-14px!important}
html.mobile-device .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;max-width:none!important;margin:0!important;left:0!important;right:0!important;transform:none!important;width:100%!important}
html.mobile-device .mobile-bottom-logout{display:none!important}
html.mobile-device .mobile-account-menu{right:0!important;z-index:80!important}
html.mobile-device .hero-card{padding:24px 16px!important;border-radius:28px!important}
html.mobile-device .hero-card h2{font-size:clamp(27px,7vw,32px)!important;line-height:1.2!important}
html.mobile-device .camera-cta{min-height:86px!important;border-radius:20px!important}
html.mobile-device .document-list{padding:0!important;border:0!important;background:transparent!important}
html.mobile-device .document-card{background:#fff!important;border:1px solid #e1eaf5!important;border-radius:18px!important;padding:16px!important;margin:10px 0!important}
@media(max-width:430px){html.mobile-device main{padding-left:12px!important;padding-right:12px!important}html.mobile-device .topbar{margin-left:-12px!important;margin-right:-12px!important}html.mobile-device .metrics{gap:8px!important}html.mobile-device .metric-card{padding:16px 14px!important}html.mobile-device .metric-card>strong{font-size:24px!important}}


/* Mobile account menu compact fix */
html.mobile-device .mobile-topbar{overflow:visible!important}
html.mobile-device .mobile-account-menu{position:absolute!important;top:52px!important;right:0!important;width:min(232px,calc(100vw - 32px))!important;max-height:none!important;padding:8px!important;border-radius:18px!important;overflow:visible!important;z-index:200!important}
html.mobile-device .mobile-account-menu button{display:flex!important;align-items:center!important;width:100%!important;height:50px!important;min-height:50px!important;max-height:50px!important;padding:0 14px!important;border-radius:12px!important;font-size:17px!important;line-height:1!important;font-weight:800!important;letter-spacing:0!important;white-space:nowrap!important}
html.mobile-device .mobile-account-menu button[hidden]{display:none!important}
html.mobile-device .mobile-account-menu .mobile-menu-danger{margin-top:6px!important;border-top:1px solid #eef2f7!important;color:#e04646!important}


/* Full-width mobile browser override */
html.mobile-device main{max-width:none!important;margin:0!important;width:100%!important}
html.mobile-device .bottom-nav{max-width:none!important;left:0!important;right:0!important;transform:none!important;width:100%!important}

/* Toss-like mobile pull refresh */
html.mobile-device{
  --pull-distance:0px;
  overscroll-behavior-y:contain!important;
}
html.mobile-device body{
  overscroll-behavior-y:contain!important;
}
html.mobile-device .pull-refresh-indicator{
  position:fixed!important;
  top:calc(env(safe-area-inset-top) + 10px)!important;
  left:50%!important;
  z-index:1200!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  height:42px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  color:#6f7a88!important;
  box-shadow:0 12px 32px rgba(22,43,74,.14)!important;
  opacity:0!important;
  transform:translate(-50%,calc(-62px + var(--pull-distance))) scale(.92)!important;
  transition:opacity .18s ease,transform .18s ease!important;
  pointer-events:none!important;
  backdrop-filter:blur(12px)!important;
}
html.mobile-device .pull-refresh-indicator span{
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  border:3px solid #d8e3f2!important;
  border-top-color:#2266d8!important;
}
html.mobile-device .pull-refresh-indicator b{
  font-size:13px!important;
  font-weight:760!important;
}
html.mobile-device body.pulling .pull-refresh-indicator,
html.mobile-device body.pull-refreshing .pull-refresh-indicator{
  opacity:1!important;
  transform:translate(-50%,var(--pull-distance)) scale(1)!important;
}
html.mobile-device body.pull-ready .pull-refresh-indicator{
  color:#1f63d8!important;
}
html.mobile-device body.pull-refreshing .pull-refresh-indicator{
  --pull-distance:52px;
}
html.mobile-device body.pull-refreshing .pull-refresh-indicator span{
  animation:pullSpin .75s linear infinite!important;
}
html.mobile-device body.pulling main{
  transform:translateY(calc(var(--pull-distance) * .28))!important;
  transition:none!important;
}
html.mobile-device body.pull-refreshing main{
  transform:translateY(10px)!important;
  transition:transform .28s ease!important;
}
@keyframes pullSpin{to{transform:rotate(360deg)}}

/* Mobile account menu visible logout override */
html.mobile-device .mobile-account-menu{
  position:fixed!important;
  top:calc(env(safe-area-inset-top) + 116px)!important;
  right:14px!important;
  left:auto!important;
  width:min(248px,calc(100vw - 28px))!important;
  max-height:none!important;
  padding:8px!important;
  border:1px solid #dfe7f2!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 18px 48px rgba(15,23,42,.18)!important;
  overflow:visible!important;
  z-index:999!important;
}
html.mobile-device .mobile-account-menu[hidden]{display:none!important}
html.mobile-device .mobile-account-menu button{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:0 14px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:#263244!important;
  text-align:left!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:750!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
html.mobile-device .mobile-account-menu .mobile-menu-danger{
  margin:0 0 4px!important;
  border-top:0!important;
  color:#e04646!important;
  background:#fff4f4!important;
}

/* Mobile more page */
html.mobile-device body.more-mode .topbar{
  display:none!important;
}
html.mobile-device body.more-mode main{
  padding-top:0!important;
}
html.mobile-device body.more-mode main::before,
html.mobile-device body.more-mode main::after{
  display:none!important;
}
html.mobile-device #moreView{
  margin:0 -14px!important;
  padding:18px 18px 118px!important;
  min-height:100vh!important;
  background:#fff!important;
  border-radius:0!important;
}
html.mobile-device .more-top{
  display:grid!important;
  grid-template-columns:48px 1fr 48px!important;
  align-items:center!important;
  min-height:56px!important;
  margin-bottom:18px!important;
}
html.mobile-device .more-top h2{
  margin:0!important;
  text-align:center!important;
  color:#182233!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:750!important;
  letter-spacing:0!important;
}
html.mobile-device .more-back{
  width:48px!important;
  height:48px!important;
  border:0!important;
  border-radius:16px!important;
  background:#f4f7fb!important;
  color:#1f2937!important;
  font-size:25px!important;
  line-height:1!important;
}
html.mobile-device .more-store-card{
  width:100%!important;
  min-height:88px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:18px!important;
  border:0!important;
  border-radius:22px!important;
  background:#f4f6f8!important;
  color:#182233!important;
  text-align:left!important;
}
html.mobile-device .more-store-card strong,
html.mobile-device .more-store-card small{
  display:block!important;
  min-width:0!important;
}
html.mobile-device .more-store-card strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:22px!important;
  line-height:1.2!important;
  font-weight:760!important;
}
html.mobile-device .more-store-card small{
  margin-top:8px!important;
  color:#7a8492!important;
  font-size:14px!important;
  font-weight:520!important;
}
html.mobile-device .more-store-card span{
  color:#8c97a5!important;
  font-size:30px!important;
}
html.mobile-device .more-helper{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:18px 0 22px!important;
  color:#6f7a88!important;
  font-size:15px!important;
  line-height:1.45!important;
  font-weight:520!important;
}
html.mobile-device .more-helper i{
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:999px!important;
  background:#c9f4e3!important;
  color:#11996b!important;
  font-style:normal!important;
  font-weight:800!important;
}
html.mobile-device .more-list,
html.mobile-device .more-section{
  margin:0 -18px!important;
  border-top:10px solid #f4f7fa!important;
  background:#fff!important;
}
html.mobile-device .more-section p{
  margin:0!important;
  padding:24px 18px 10px!important;
  color:#929aa5!important;
  font-size:16px!important;
  font-weight:600!important;
}
html.mobile-device .more-row{
  width:100%!important;
  min-height:72px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:0 18px!important;
  border:0!important;
  border-bottom:1px solid #f1f4f8!important;
  border-radius:0!important;
  background:#fff!important;
  color:#323c49!important;
  text-align:left!important;
}
html.mobile-device .more-row span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:720!important;
  letter-spacing:0!important;
}
html.mobile-device .more-row b{
  color:#8f9aa7!important;
  font-size:28px!important;
  font-weight:520!important;
}
html.mobile-device .more-row.danger span,
html.mobile-device .more-row.danger b{
  color:#e14b4b!important;
}
@media(max-width:430px){
  html.mobile-device #moreView{margin-left:-12px!important;margin-right:-12px!important;padding-left:16px!important;padding-right:16px!important}
}

/* Final app typography scale */
html.mobile-device{
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}
html.mobile-device .mobile-service-brand strong{
  font-size:22px!important;
  line-height:1.12!important;
  font-weight:760!important;
}
html.mobile-device .mobile-store-card strong{
  font-size:18px!important;
  line-height:1.18!important;
  font-weight:740!important;
}
html.mobile-device .hero-card h2{
  max-width:100%!important;
  font-size:clamp(23px,6.1vw,27px)!important;
  line-height:1.24!important;
  font-weight:760!important;
  letter-spacing:0!important;
}
html.mobile-device .hero-card p{
  font-size:13px!important;
  line-height:1.55!important;
}
html.mobile-device .hero-card .pill{
  font-size:12px!important;
  font-weight:780!important;
}
html.mobile-device .camera-cta strong{
  font-size:17px!important;
  line-height:1.2!important;
  font-weight:760!important;
}
html.mobile-device .camera-cta small{
  font-size:12px!important;
  line-height:1.35!important;
}
html.mobile-device .metric-head{
  font-size:13px!important;
  line-height:1.2!important;
}
html.mobile-device .metric-card>strong{
  font-size:clamp(22px,6.4vw,27px)!important;
  line-height:1.08!important;
  font-weight:760!important;
  letter-spacing:0!important;
}
html.mobile-device .metric-card small{
  font-size:12px!important;
  line-height:1.3!important;
}
html.mobile-device .panel-head h3,
html.mobile-device .section-intro h2,
html.mobile-device .items-head h3{
  font-size:clamp(22px,5.8vw,26px)!important;
  line-height:1.22!important;
  font-weight:760!important;
  letter-spacing:0!important;
}
html.mobile-device .panel-head p,
html.mobile-device .section-intro p,
html.mobile-device .items-head p{
  font-size:13px!important;
  line-height:1.5!important;
}
html.mobile-device .document-card strong,
html.mobile-device .full-document-row strong,
html.mobile-device .supplier-card strong{
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:740!important;
}
html.mobile-device .document-card small,
html.mobile-device .full-document-row small,
html.mobile-device .supplier-card small{
  font-size:13px!important;
  line-height:1.35!important;
}
html.mobile-device .document-card .amount,
html.mobile-device .full-document-row .amount{
  font-size:15px!important;
  font-weight:760!important;
}
html.mobile-device .bottom-nav button span{
  font-size:23px!important;
  line-height:1!important;
}
html.mobile-device .bottom-nav button small{
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
html.mobile-device .detail-header h2{
  font-size:clamp(20px,5.5vw,24px)!important;
  line-height:1.18!important;
  font-weight:760!important;
}
html.mobile-device .detail-total{
  font-size:clamp(20px,5.8vw,25px)!important;
  line-height:1.1!important;
  font-weight:780!important;
}
html.mobile-device .detail-data-card .items-head h3{
  font-size:clamp(22px,5.9vw,26px)!important;
}
html.mobile-device .detail-summary strong{
  font-size:clamp(14px,3.9vw,17px)!important;
}
html.mobile-device .more-top h2{
  font-size:22px!important;
}
html.mobile-device .more-store-card strong{
  font-size:18px!important;
}
html.mobile-device .more-row span{
  font-size:17px!important;
  font-weight:700!important;
}
html.mobile-device .more-row b{
  font-size:23px!important;
}
@media(max-width:430px){
  html.mobile-device .hero-card h2{font-size:clamp(22px,5.9vw,25px)!important}
  html.mobile-device .metric-card>strong{font-size:clamp(20px,6vw,25px)!important}
  html.mobile-device .panel-head h3,
  html.mobile-device .section-intro h2,
  html.mobile-device .items-head h3{font-size:clamp(21px,5.6vw,24px)!important}
}

/* Final visual balance pass */
html.mobile-device main{
  padding-left:16px!important;
  padding-right:16px!important;
}
html.mobile-device .mobile-service-row{
  align-items:center!important;
}
html.mobile-device .mobile-service-brand{
  gap:10px!important;
}
html.mobile-device .mobile-service-brand .brand-mark{
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
}
html.mobile-device .mobile-menu-button{
  width:48px!important;
  height:48px!important;
  border-radius:17px!important;
}
html.mobile-device .mobile-store-card{
  min-height:66px!important;
  margin-top:16px!important;
  padding:0 18px!important;
  border-radius:22px!important;
}
html.mobile-device .hero-card{
  display:grid!important;
  grid-template-columns:1fr!important;
  min-height:0!important;
  margin:12px -16px 0!important;
  padding:36px 18px 28px!important;
  border-radius:28px!important;
  align-items:start!important;
  overflow:hidden!important;
}
html.mobile-device .hero-card::before{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  border-radius:28px!important;
  background:linear-gradient(150deg,#ffffff 0%,#f8fbff 54%,#eef4ff 100%)!important;
}
html.mobile-device .hero-card::after{
  right:-56px!important;
  top:32px!important;
  bottom:auto!important;
  width:180px!important;
  height:180px!important;
  opacity:.78!important;
}
html.mobile-device .hero-card .pill{
  justify-self:start!important;
  margin:0 0 18px!important;
  padding:7px 13px!important;
  border-radius:999px!important;
  box-shadow:0 10px 28px rgba(255,218,66,.28)!important;
}
html.mobile-device .hero-card h2{
  clear:none!important;
  max-width:310px!important;
  margin:0!important;
}
html.mobile-device .hero-card p{
  max-width:330px!important;
  margin:14px 0 0!important;
}
html.mobile-device .camera-cta{
  width:100%!important;
  min-height:78px!important;
  margin:28px 0 0!important;
  padding:16px 18px!important;
  border-radius:20px!important;
  gap:14px!important;
}
html.mobile-device .camera-cta .camera-icon{
  flex:0 0 54px!important;
  width:54px!important;
  height:54px!important;
  border-radius:17px!important;
}
html.mobile-device .camera-cta b{
  font-size:24px!important;
}
html.mobile-device .metrics{
  margin:22px 0 20px!important;
  gap:10px!important;
  overflow:visible!important;
  padding:0!important;
}
html.mobile-device .metric-card{
  min-width:0!important;
  min-height:112px!important;
  padding:16px!important;
  border-radius:20px!important;
  text-align:left!important;
}
html.mobile-device .metric-head{
  align-items:flex-start!important;
  gap:8px!important;
}
html.mobile-device .metric-head span{
  max-width:72px!important;
  line-height:1.25!important;
}
html.mobile-device .metric-card .soft-icon{
  width:40px!important;
  height:40px!important;
  border-radius:14px!important;
}
html.mobile-device .metric-card>strong,
html.mobile-device .metric-card small{
  display:block!important;
}
html.mobile-device .metric-card>strong{
  margin:18px 0 7px!important;
}
html.mobile-device .metric-card small{
  color:#8a95a5!important;
}
html.mobile-device .recent-panel{
  width:100%!important;
  margin:20px 0 0!important;
  padding:22px 16px!important;
  border-radius:22px!important;
  border:1px solid #e1eaf5!important;
  background:#fff!important;
}
html.mobile-device .recent-panel .panel-head{
  padding:0!important;
  margin:0 0 12px!important;
}
html.mobile-device .document-list{
  margin-top:12px!important;
}
html.mobile-device .recent-panel .document-list{
  width:100%!important;
  margin:12px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
html.mobile-device .recent-panel .document-card{
  width:100%!important;
  margin:10px 0 0!important;
  padding:14px!important;
  border:1px solid #e1eaf5!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:none!important;
}
html.mobile-device .recent-panel .document-card:first-child{
  margin-top:0!important;
}
html.mobile-device .hero-card .pill,
html.pc-device .hero-card .pill,
.hero-card .pill{
  position:relative!important;
  z-index:2!important;
  overflow:visible!important;
  isolation:isolate!important;
  background:linear-gradient(180deg,#ffe477 0%,#ffd25b 100%)!important;
  color:#5f3b00!important;
  box-shadow:0 8px 20px rgba(255,206,63,.26),inset 0 1px 0 rgba(255,255,255,.55)!important;
  animation:aiHaloBadge 2.05s ease-in-out infinite!important;
}
html.mobile-device .hero-card .pill::before,
html.pc-device .hero-card .pill::before,
.hero-card .pill::before{
  content:""!important;
  position:absolute!important;
  inset:-20px -26px!important;
  z-index:-1!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at center,rgba(255,225,95,.72) 0%,rgba(255,218,66,.48) 42%,rgba(255,218,66,.18) 68%,rgba(255,218,66,0) 100%)!important;
  opacity:.32!important;
  transform:scale(.94)!important;
  filter:blur(8px)!important;
  animation:aiHaloGlow 2.05s ease-in-out infinite!important;
  pointer-events:none!important;
}
html.mobile-device .hero-card .pill::after,
html.pc-device .hero-card .pill::after,
.hero-card .pill::after{
  content:""!important;
  position:absolute!important;
  inset:-7px -10px!important;
  z-index:-1!important;
  border-radius:999px!important;
  background:rgba(255,232,112,.38)!important;
  opacity:.34!important;
  filter:blur(3px)!important;
  transform:scale(.98)!important;
  animation:aiHaloCore 2.05s ease-in-out infinite!important;
  pointer-events:none!important;
}
@keyframes aiHaloBadge{
  0%,100%{
    filter:brightness(.98) saturate(1);
    transform:translateZ(0) scale(1);
    box-shadow:0 8px 20px rgba(255,206,63,.22),inset 0 1px 0 rgba(255,255,255,.5);
  }
  48%{
    filter:brightness(1.08) saturate(1.08);
    transform:translateZ(0) scale(1.008);
    box-shadow:0 10px 24px rgba(255,206,63,.38),inset 0 1px 0 rgba(255,255,255,.64);
  }
}
@keyframes aiHaloGlow{
  0%,100%{
    opacity:.22;
    transform:scale(.88);
  }
  48%{
    opacity:.9;
    transform:scale(1.18);
  }
}
@keyframes aiHaloCore{
  0%,100%{
    opacity:.22;
    transform:scale(.94);
  }
  48%{
    opacity:.72;
    transform:scale(1.08);
  }
}
html.mobile-device body{
  min-width:0!important;
}
html.mobile-device main{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-shadow:none!important;
}
html.mobile-device .bottom-nav{
  width:100%!important;
  max-width:none!important;
  left:0!important;
  right:0!important;
  transform:none!important;
}
html.mobile-device .app-shell,
html.mobile-device main,
html.mobile-device .topbar,
html.mobile-device .bottom-nav{
  min-width:100vw!important;
}
html.pc-device .topbar{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  backdrop-filter:none!important;
}
@media (hover:none) and (pointer:coarse){
  html.mobile-device,
  html.mobile-device body{
    width:100vw!important;
    max-width:none!important;
  }
  html.mobile-device .app-shell,
  html.mobile-device main{
    width:100vw!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  html.mobile-device .topbar,
  html.mobile-device .bottom-nav{
    width:100vw!important;
    max-width:none!important;
    left:0!important;
    right:0!important;
    transform:none!important;
  }
}
@media(max-width:430px){
  html.mobile-device main{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  html.mobile-device .hero-card{
    margin-left:-14px!important;
    margin-right:-14px!important;
  }
  html.mobile-device .hero-card{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  html.mobile-device .metric-card{
    padding:15px 13px!important;
  }
  html.mobile-device .metric-head span{
    max-width:68px!important;
  }
}

html.mobile-device .bottom-nav{
  height:84px!important;
  padding-top:6px!important;
  padding-bottom:calc(6px + env(safe-area-inset-bottom))!important;
}

html.mobile-device .bottom-nav button{
  gap:4px!important;
  min-width:0!important;
}

html.mobile-device .bottom-nav button span{
  width:38px!important;
  height:38px!important;
  font-size:24px!important;
  line-height:1!important;
}

html.mobile-device .bottom-nav button small{
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:800!important;
  white-space:nowrap!important;
}


/* Uppaper rebrand logo assets */
.brand-logo-icon{
  width:42px;
  height:42px;
  border-radius:15px;
  object-fit:cover;
  display:block;
  flex:0 0 auto;
  box-shadow:0 12px 24px rgba(35,120,255,.18);
}
.mobile-service-brand .brand-logo-icon,
.auth-brand .brand-logo-icon{
  width:42px;
  height:42px;
  border-radius:15px;
}
html.mobile-device .mobile-service-brand .brand-logo-icon{
  width:44px!important;
  height:44px!important;
  border-radius:14px!important;
}
html.mobile-device .auth-brand .brand-logo-icon{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
}


/* PWA install prompt */
.install-sheet[hidden]{
  display:none!important;
}
.install-sheet{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:9998;
  width:min(440px, calc(100vw - 32px));
  padding:14px;
  border:1px solid rgba(210,224,242,.92);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 60px rgba(15,45,84,.18);
  backdrop-filter:blur(18px);
}
.install-sheet-main{
  display:flex;
  align-items:center;
  gap:12px;
}
.install-sheet-main img{
  width:44px;
  height:44px;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(35,120,255,.18);
}
.install-sheet-main strong{
  display:block;
  color:#101827;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
}
.install-sheet-main p{
  margin:4px 0 0;
  color:#7b8798;
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}
.install-sheet-actions{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:8px;
  margin-top:12px;
}
.install-sheet-actions button{
  border:0;
  border-radius:15px;
  min-height:44px;
  font-size:14px;
  font-weight:850;
  cursor:pointer;
}
#dismissInstallSheet{
  color:#667386;
  background:#f1f5f9;
}
#installAppButton{
  color:#fff;
  background:#17499a;
  box-shadow:0 10px 22px rgba(23,73,154,.18);
}

.install-sheet.guide #installAppButton{
  color:#fff;
  background:#101827;
  box-shadow:0 10px 22px rgba(16,24,39,.16);
}
.install-sheet.guide .install-sheet-main strong{
  color:#101827;
}
html.mobile-device .install-sheet{
  bottom:calc(96px + env(safe-area-inset-bottom));
  width:calc(100vw - 28px);
}
@media(max-width:430px){
  .install-sheet{
    border-radius:20px;
    padding:12px;
  }
  .install-sheet-main strong{
    font-size:15px;
  }
  .install-sheet-main p{
    font-size:12px;
  }
}

html.mobile-device .more-row[hidden]{display:none!important}

/* Mobile scroll and detail Excel action fix */
html.mobile-device,
html.mobile-device body{
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}
html.mobile-device .app-shell,
html.mobile-device main,
html.mobile-device .view.active,
html.mobile-device .detail-content,
html.mobile-device .review-content{
  -webkit-overflow-scrolling:touch;
}
.detail-footer-actions .excel-button{
  background:#eefbf4;
  border:1px solid #c8ead7;
  color:#168150;
}
.detail-footer-actions .excel-button:hover{
  background:#e4f8ee;
}
html.mobile-device .detail-footer-actions .excel-button{
  min-width:104px!important;
}

.review-dialog.manual-entry-mode .image-review-panel{
  display:none;
}
.review-dialog.manual-entry-mode .review-content{
  grid-template-columns:minmax(0,760px);
  justify-content:center;
  height:auto;
  min-height:calc(100vh - 82px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.review-dialog.manual-entry-mode .data-review-panel{
  width:100%;
  max-width:760px;
  justify-self:center;
  overflow:visible;
}
.review-dialog.manual-entry-mode .item-row:not(.item-header) input{
  border-color:#d7e2ec;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.review-dialog.manual-entry-mode .item-row:not(.item-header) input:focus{
  border-color:#65a6d9;
  box-shadow:0 0 0 3px rgba(101,166,217,.16);
}
.item-add-row{
  border-top:1px solid var(--line);
  padding:10px;
  background:#fbfcfa;
}
.item-add-row .text-button{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 8px;
}
.detail-dialog.no-image .detail-image-card{
  display:none;
}
.detail-dialog.no-image .detail-content{
  grid-template-columns:minmax(0,820px);
  justify-content:center;
}
.detail-dialog.no-image .detail-data-card{
  width:100%;
  max-width:820px;
  justify-self:center;
}
html.mobile-device .review-dialog.manual-entry-mode .review-content{
  display:block;
  height:auto;
  min-height:calc(100dvh - 74px);
  overflow-y:auto;
  overscroll-behavior-y:auto;
  touch-action:pan-y;
  padding-bottom:calc(118px + env(safe-area-inset-bottom));
}
html.mobile-device .review-dialog.manual-entry-mode .data-review-panel{
  max-width:none;
  overflow:visible;
}
html.mobile-device .detail-dialog.no-image .detail-content{
  display:block;
}
html.mobile-device .detail-dialog.no-image .detail-data-card{
  max-width:none;
}

.dashboard-alerts{
  display:grid;
  gap:12px;
  margin:0 0 22px;
}

.dashboard-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 18px;
  border-radius:18px;
  cursor:pointer;
}

.dashboard-alert.hidden,
.dashboard-alert-details.hidden{
  display:none;
}

.document-alert{
  border:1px solid #b9dbff;
  background:#eef7ff;
  color:#164fa8;
  box-shadow:0 12px 26px rgba(34,104,217,.08);
}

.purchase-alert{
  border:1px solid #ffd1d1;
  background:#fff1f1;
  color:#b4232c;
  box-shadow:0 12px 26px rgba(218,61,71,.08);
}

.dashboard-alert strong{
  min-width:0;
  font-size:15px;
  line-height:1.4;
  word-break:keep-all;
}

.dashboard-alert-close{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:rgba(22,79,168,.1);
  color:#164fa8;
  font-size:20px;
  line-height:1;
}

.purchase-alert .dashboard-alert-close{
  background:rgba(180,35,44,.1);
  color:#b4232c;
}

.dashboard-alert-details{
  display:grid;
  gap:12px;
  margin:-4px 0 6px;
  padding:15px;
  border:1px solid #cfe4fb;
  border-radius:18px;
  background:#f7fbff;
  box-shadow:0 12px 26px rgba(34,104,217,.06);
}

.purchase-alert-details{
  border-color:#ffdada;
  background:#fffafa;
  box-shadow:0 12px 26px rgba(218,61,71,.05);
}

.dashboard-alert-details-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#101827;
  font-size:14px;
}

.dashboard-alert-details-header span{
  flex:0 0 auto;
  color:#718096;
  font-size:13px;
  font-weight:850;
}

.dashboard-alert-list{
  display:grid;
  gap:8px;
}

.dashboard-alert-row{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(108px,.45fr) auto;
  align-items:center;
  gap:14px;
  width:100%;
  padding:13px 14px;
  border:1px solid #dbeafe;
  border-radius:13px;
  background:#fff;
  color:#172033;
  text-align:left;
}

.dashboard-alert-row strong,
.dashboard-alert-row small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dashboard-alert-row strong{
  font-size:14px;
  font-weight:900;
}

.dashboard-alert-row small{
  margin-top:4px;
  color:#718096;
  font-size:12px;
  font-weight:700;
}

.dashboard-alert-row b{
  color:#111827;
  font-size:13px;
  text-align:right;
}

.dashboard-alert-row em{
  color:#164fa8;
  font-size:12px;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}

.dashboard-alert-empty{
  margin:0;
  padding:16px 14px;
  border:1px dashed #cfe4fb;
  border-radius:13px;
  color:#718096;
  background:#fff;
  font-size:13px;
  font-weight:750;
}

.purchase-alert-details .dashboard-alert-row{
  border-color:#ffe1e1;
}

.purchase-alert-details .dashboard-alert-row em{
  color:#b4232c;
}

html.mobile-device .dashboard-alerts{
  margin:0 0 22px!important;
  gap:10px!important;
}

html.mobile-device .dashboard-alert{
  padding:13px 14px!important;
  border-radius:16px!important;
}

html.mobile-device .dashboard-alert strong{
  font-size:13px!important;
}

html.mobile-device .dashboard-alert-close{
  width:28px!important;
  height:28px!important;
  font-size:18px!important;
}

html.mobile-device .dashboard-alert-details{
  padding:13px!important;
  border-radius:16px!important;
}

html.mobile-device .dashboard-alert-row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 10px;
  padding:12px!important;
}

html.mobile-device .dashboard-alert-row b{
  grid-column:2;
  grid-row:1;
}

html.mobile-device .dashboard-alert-row em{
  grid-column:1 / -1;
  grid-row:2;
}

.total-check-panel{
  margin:14px 0 2px;
  padding:14px;
  border:1px solid #f0c98e;
  background:#fff8ea;
  border-radius:12px;
  color:#4f3d1f;
}
.total-check-panel[hidden]{display:none}
.total-check-panel strong{display:block;font-size:14px;margin-bottom:6px;color:#6a4200}
.total-check-panel p{margin:0;color:#6d604e;font-size:12px;line-height:1.55}
.total-check-panel small{display:block;margin-top:8px;color:#9a5f00;font-size:12px;font-weight:850}
.total-check-panel small[hidden]{display:none}
.total-check-panel dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.total-check-panel dl div{background:white;border:1px solid #f4dfba;border-radius:9px;padding:9px}
.total-check-panel dt{font-size:10px;color:#8b7a61;font-weight:800;margin-bottom:4px}
.total-check-panel dd{margin:0;font-size:13px;font-weight:850;color:#263129}
.total-check-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.total-check-actions button{min-width:0;padding:10px 8px;font-size:12px;white-space:normal;line-height:1.25}
.total-check-panel.attention{animation:totalCheckPulse .42s ease}
.merged-page-notice{display:grid;gap:4px;margin:0 0 12px;padding:12px 13px;border:1px solid #bfd8ff;background:#eef6ff;border-radius:12px;color:#24426a}
.merged-page-notice[hidden]{display:none}
.merged-page-notice strong{font-size:13px;color:#1559b7}
.merged-page-notice span{font-size:12px;line-height:1.45;color:#52667d}
@keyframes totalCheckPulse{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.upload-actions{flex-wrap:wrap}
.upload-actions button{min-width:128px}

@media(max-width:720px){
  .total-check-panel{padding:13px;margin-top:12px}
  .total-check-panel dl{grid-template-columns:1fr}
  .total-check-actions{grid-template-columns:1fr}
  .total-check-actions button{width:100%;font-size:13px;padding:12px 10px}
}