:root{--blue:#0b3fc4;--blue-dark:#0930a0;--ink:#101828;--muted:#7a8699;--label:#8a94a6;--body:#3c4757;--line:#e6eaf2;--line-soft:#eef1f6;--bg:#e9edf4;--shell:#f5f7fb;--danger:#e0451f;--success:#12854a;--radius:14px;color:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Public Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.4}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--shell)}button,textarea,input{font:inherit}button{cursor:pointer}.app-stage{background:var(--shell);justify-content:center;min-height:100dvh;display:flex}.app-shell{background:var(--shell);flex-direction:column;width:100%;max-width:720px;min-height:100dvh;display:flex}.screen{flex-direction:column;flex:1;min-height:0;display:flex}.top-menu{border-bottom:1px solid var(--line);z-index:20;background:#fff;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex;position:sticky;top:0}.top-menu__brand{align-items:center;gap:8px;min-width:0;display:flex}.top-menu__logo{object-fit:contain;flex:none;width:auto;max-width:96px;height:18px;display:block}.top-menu__brand-text{min-width:0}.top-menu__title{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:700;line-height:1.2;overflow:hidden}.top-menu__subtitle{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:11.5px;overflow:hidden}.top-menu__account{flex:none;position:relative}.top-menu__user{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:999px;align-items:center;gap:8px;padding:4px 10px 4px 4px;display:flex}.top-menu__user.is-open{background:#f5f8ff;border-color:#c8d4f5}.top-menu__avatar{width:30px;height:30px;color:var(--blue);background:#e8eefc;border-radius:999px;flex:none;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:inline-flex}.top-menu__avatar--lg{width:48px;height:48px;font-size:15px}.top-menu__user-meta{text-align:left;flex-direction:column;align-items:flex-start;min-width:0;display:flex}.top-menu__user-name{white-space:nowrap;text-overflow:ellipsis;max-width:120px;font-size:12.5px;font-weight:700;line-height:1.2;overflow:hidden}.top-menu__user-role{color:var(--muted);font-size:11px;font-weight:500}.top-menu__dropdown{border:1px solid var(--line);z-index:30;background:#fff;border-radius:12px;width:180px;padding:6px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 28px #0f172a1f}.top-menu__item{width:100%;color:var(--body);text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-size:13.5px;font-weight:600;display:flex}.top-menu__item:hover{background:#f5f7fb}.top-menu__item--danger{color:var(--danger)}.logout-modal{z-index:50;justify-content:center;align-items:center;padding:20px;animation:.16s ease-out logout-fade-in;display:flex;position:fixed;inset:0}.logout-modal__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172a7a;border:none;padding:0;position:absolute;inset:0}.logout-modal__card{text-align:center;background:#fff;border-radius:18px;width:min(340px,100%);padding:24px 22px 20px;animation:.18s cubic-bezier(.22,1,.36,1) logout-pop-in;position:relative;box-shadow:0 24px 56px #0f172a38}.logout-modal__icon{border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;margin:0 auto 14px;display:flex}.logout-modal__icon--warn{color:var(--danger);background:#fff1ee}.logout-modal__icon--ok{color:var(--success);background:#e8f8ee}.logout-modal__title{color:var(--ink);margin:0;font-size:18px;font-weight:700}.logout-modal__desc{color:var(--body);margin:8px 0 0;font-size:13.5px;line-height:1.5}.logout-modal__actions{gap:10px;margin-top:20px;display:flex}.logout-modal__confirm{background:var(--danger);color:#fff}.logout-modal__confirm:hover{background:#c93b1b}@keyframes logout-fade-in{0%{opacity:0}to{opacity:1}}@keyframes logout-pop-in{0%{opacity:0;transform:translateY(10px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.profile-modal{z-index:40;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.profile-modal__backdrop{background:#0f172a6b;border:none;padding:0;position:absolute;inset:0}.profile-modal__card{background:#fff;border-radius:16px;flex-direction:column;gap:18px;width:min(360px,100%);padding:20px;display:flex;position:relative;box-shadow:0 20px 48px #0f172a33}.profile-modal__head{align-items:center;gap:12px;display:flex}.profile-modal__title{margin:0;font-size:17px;font-weight:700}.profile-modal__role{color:var(--muted);margin:3px 0 0;font-size:13px}.profile-modal__fields{background:#f7f9fc;border-radius:12px;flex-direction:column;gap:12px;margin:0;padding:14px;display:flex}.profile-modal__fields dt{color:var(--label);margin-bottom:2px;font-size:11.5px}.profile-modal__fields dd{color:var(--ink);margin:0;font-size:14px;font-weight:600}.toolbar{border-bottom:1px solid var(--line);z-index:2;background:#fff;align-items:center;gap:10px;padding:12px 16px;display:flex;position:sticky;top:0}.toolbar__center{text-align:center;flex:1;min-width:0}.toolbar__title{color:var(--ink);font-size:15.5px;font-weight:700;line-height:1.25}.toolbar__sub{color:var(--muted);margin-top:2px;font-size:12px;font-weight:500}.toolbar__spacer{flex:none;width:22px}.icon-btn{background:0 0;border:none;align-items:center;padding:0;display:flex}.icon-btn--gray{padding:6px}.tabs{border-bottom:1px solid var(--line);z-index:2;background:#fff;padding:0 16px;display:flex;position:sticky;top:0}.tabs__btn{color:var(--label);background:0 0;border:none;border-bottom:3px solid #0000;flex:1;padding:15px 0 13px;font-size:14.5px;font-weight:600}.tabs__btn.is-active{color:var(--blue);border-bottom-color:var(--blue)}.screen__body{flex-direction:column;flex:1;gap:14px;padding:16px 16px 8px;display:flex;overflow:auto}.screen__body--detail{gap:12px;padding:14px 14px 10px}.info-banner{background:#eef1f8;border-radius:12px;align-items:flex-start;gap:12px;padding:14px;display:flex}.info-banner__icon{background:#fff0dc;border-radius:8px;flex:none;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.info-banner p{color:var(--body);margin:0;font-size:13px;line-height:1.45}.po-card{text-align:left;border:1px solid var(--line);border-radius:var(--radius);background:#fff;align-items:flex-start;gap:12px;width:100%;padding:14px;display:flex;box-shadow:0 1px 2px #0f172a0a}.po-card__icon{border-radius:10px;flex:none;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.po-card__body{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.po-card__row{justify-content:space-between;align-items:center;gap:8px;display:flex}.po-card__id{color:var(--ink);font-size:15.5px;font-weight:700}.po-card__count{align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.po-card__supplier{color:#5a6678;font-size:13px}.po-card__meta{color:var(--muted);align-items:center;gap:16px;padding-top:2px;font-size:12px;display:flex}.po-card__meta span{align-items:center;gap:6px;display:flex}.badge{letter-spacing:.2px;white-space:nowrap;border-radius:6px;align-self:flex-start;padding:3px 8px;font-size:10.5px;font-weight:700}.badge--danger{color:#d6401f;background:#fdecea}.badge--success{color:var(--success);background:#dff5e6;border-radius:7px;padding:4px 9px;font-size:11px}.badge--pending{color:#5a6678;background:#eef1f8;border-radius:7px;padding:4px 9px;font-size:11px}.showing-label{text-align:center;color:#8a94a6;margin:6px 0 0;font-size:12.5px}.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:15px}.card--product{padding:0;overflow:hidden}.card__supplier-row{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.card__building{background:#eef1fc;border-radius:10px;flex:none;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.card__block{margin-top:14px}.card__meta-row{border-top:1px solid var(--line-soft);gap:14px;margin-top:14px;padding-top:14px;display:flex}.card__meta-item{flex:1;align-items:flex-start;gap:9px;display:flex}.card__meta-item>svg{margin-top:2px}.label{color:var(--label);margin-bottom:3px;font-size:11.5px}.value{color:var(--ink);font-size:15px;font-weight:700;line-height:1.3}.value--sm{font-size:13.5px}.muted{color:var(--muted);margin-top:2px;font-size:12.5px}.product-pos{text-align:center;min-height:44px;color:var(--body);background:#f1f4f9;justify-content:center;align-items:center;gap:10px;padding:11px 14px;font-size:13px;font-weight:600;display:flex}.product-pos .badge{justify-content:center;min-width:72px;display:inline-flex}.card--product-rejected{border-color:#f3c5b8}.card--product-rejected .product-pos{color:#c93b1b;background:#fff1ee}.card--product-approved{border-color:#bfe5cb}.card--product-approved .product-pos{color:var(--success);background:#e8f8ee}.decision-note{box-sizing:border-box;border-radius:10px;min-height:72px;margin:0 16px 4px;padding:10px 13px}.decision-note--reject{background:#fff1ee;border:1px solid #f3c5b8}.decision-note--approve{background:#e8f8ee;border:1px solid #bfe5cb}.decision-note--pending{border:1px solid var(--line-soft);background:#f5f7fb}.decision-note__text{color:var(--ink);-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.8em;margin-top:3px;font-size:13.5px;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}.decision-note--approve .decision-note__text,.decision-note--pending .decision-note__text{color:var(--body);font-weight:500}.product-nav{align-items:center;gap:10px;min-height:84px;padding:14px 12px 12px;display:flex}.product-nav__info .value--clamp{-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.6em;display:-webkit-box;overflow:hidden}.product-nav--static{padding:15px}.product-nav__icon{background:#efedfd;border-radius:11px;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.product-nav__info{flex:1;min-width:0}.kv{border-top:1px solid var(--line-soft);justify-content:space-between;padding:12px 16px;font-size:13.5px;display:flex}.kv--last{align-items:flex-start;gap:12px;padding-bottom:15px}.kv__label{color:#5a6678}.kv__hint{color:#98a2b3;font-size:11.5px}.kv__value{color:var(--ink);font-weight:700}.kv__value.is-accent{color:var(--danger)}.kv__value--right{text-align:right}.kv__main{color:var(--ink);font-weight:700}.kv__delta{color:#12a150;font-size:12px;font-weight:600}.dots{justify-content:center;gap:7px;padding:2px 0 4px;display:flex}.dots__item{background:#d3dae6;border:none;border-radius:99px;width:8px;height:8px;padding:0}.dots__item.is-approved{background:#4caf74}.dots__item.is-rejected{background:#e0451f}.dots__item.is-active{outline:2px solid var(--blue);outline-offset:2px}.dots__item.is-active:not(.is-approved):not(.is-rejected){background:var(--blue);outline:none}.action-bar{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);z-index:2;background:#fff;gap:12px;display:flex;position:sticky;bottom:0}.action-bar--plain{background:#fff}.btn{border:none;border-radius:11px;flex:1;padding:15px;font-size:15px;font-weight:700}.btn--reject{color:var(--danger);background:#fff;border:1.5px solid #e8543a}.btn--approve{background:var(--blue);color:#fff}.btn--ghost{color:var(--body);background:#fff;border:1.5px solid #dce2ec}.btn--confirm-reject{color:#fff}.btn--full{width:100%}.field-label{color:var(--ink);margin-bottom:8px;font-size:13.5px;font-weight:700}.required{color:var(--danger)}.textarea-wrap{position:relative}.textarea-wrap textarea{resize:none;width:100%;height:110px;color:var(--ink);background:#fff;border:1px solid #dce2ec;border-radius:12px;outline:none;padding:13px 14px;font-size:14px}.textarea-wrap textarea:focus{border-color:var(--blue)}.textarea-count{color:#98a2b3;font-size:11.5px;position:absolute;bottom:12px;right:12px}.chips{flex-wrap:wrap;gap:9px;display:flex}.chip{color:var(--body);background:#fff;border:1px solid #dce2ec;border-radius:9px;padding:10px 13px;font-size:13px;font-weight:500}.chip.is-active{border-color:var(--blue);color:var(--blue);background:#eef3ff}.summary-po{align-items:flex-start;gap:12px;display:flex}.summary-po__icon{background:#ffede6;border-radius:10px;flex:none;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.summary-po__body{flex:1}.summary-po__top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.summary-po__bottom{justify-content:space-between;align-items:flex-end;gap:10px;margin-top:12px;display:flex}.summary-po__meta{color:var(--muted);white-space:nowrap;flex:none;gap:12px;font-size:12px;display:flex}.summary-po__done{text-align:right;min-width:0}.stats{border:1px solid var(--line);border-radius:var(--radius);text-align:center;background:#fff;grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.stats__item{border-left:1px solid var(--line-soft);padding:13px 6px}.stats__item:first-child{border-left:none}.stats__label{font-size:11.5px;font-weight:600}.stats__value{color:var(--ink);margin-top:3px;font-size:19px;font-weight:700}.items-summary-head{color:var(--body);background:#f1f4f9;padding:11px 15px;font-size:13.5px;font-weight:700}.summary-item{border-top:1px solid var(--line-soft);align-items:flex-start;gap:11px;padding:14px 15px;display:flex}.summary-item__n{width:24px;height:24px;color:var(--body);background:#eef1f8;border-radius:7px;flex:none;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.summary-item__body{flex:1;min-width:0}.summary-item__top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.summary-item__grid{color:var(--muted);grid-template-columns:1fr 1fr;gap:4px 10px;margin-top:9px;font-size:12.5px;display:grid}.summary-item__qty{text-align:right;color:var(--ink);font-weight:600}.summary-item__reason{border-top:1px solid #f1f4f9;margin-top:11px;padding-top:11px}.summary-item__reason-text{color:var(--body);font-size:13px;line-height:1.45}@media (width>=768px){.app-stage{background:var(--bg);padding:24px 16px}.app-shell{border:1px solid var(--line);border-radius:16px;min-height:calc(100dvh - 48px);overflow:hidden;box-shadow:0 8px 28px #0f172a14}.top-menu{padding:12px 24px}.top-menu__user-name{max-width:160px}.screen__body{padding:20px 24px 12px}.screen__body--detail{padding:18px 24px 12px}.action-bar,.toolbar{padding:14px 24px}.tabs{padding:0 24px}.stats{grid-template-columns:repeat(4,1fr)}}@media (width<=480px){.top-menu__subtitle{display:none}.top-menu__logo{max-width:84px;height:16px}.top-menu__title{font-size:15.5px}.top-menu__user-meta{display:none}.top-menu__user{gap:0;padding:4px}.top-menu__user svg{display:none}}@media (width<=380px){.stats{grid-template-columns:repeat(2,1fr)}.stats__item:nth-child(3),.stats__item:nth-child(4){border-top:1px solid var(--line-soft)}.summary-po__bottom{flex-direction:column;align-items:flex-start}.po-card__meta{flex-wrap:wrap;gap:8px 14px}}