:root{--mobile-font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mobile-font-scale-title:1;--mobile-font-scale-body:1;--mobile-font-scale-label:1;--mobile-font-scale-caption:1;--mobile-font-scale-value:1;font-family:var(--mobile-font-family);color:#172338;background:#eef1f7;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#172338;--muted:#7d899c;--blue:#315bea;--blue-soft:#eaf0ff;--line:#e9edf4;--card:#fff;--green:#138a63;--green-soft:#e5f6ef;--amber:#ad6b13;--amber-soft:#fff3dc;--red:#c34e53;--shadow:0 12px 30px rgba(26,42,74,.06)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#e5ebff 0,transparent 42%),#f2f4f8}.phone-shell{width:min(100%,520px);min-height:100vh;margin:0 auto;background:#f7f8fb;position:relative;padding-bottom:calc(78px + env(safe-area-inset-bottom));box-shadow:0 0 70px rgba(29,49,88,.08);overflow:hidden}.topbar{height:74px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.88);border-bottom:1px solid rgba(231,235,242,.85);position:sticky;top:0;z-index:5;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.brand-mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,#436df1,#2547bd);color:#fff;display:grid;place-items:center;font:600 calc(18px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);box-shadow:0 5px 12px #315bea40}.brand-mark.brand-logo{object-fit:contain;background:#fff;padding:2px;box-shadow:0 3px 9px rgba(31,47,77,.12)}.brand b,.brand small{display:block;line-height:1.1}.brand b{font:600 calc(15px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);letter-spacing:-.3px}.brand small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));font-weight:700;letter-spacing:1.4px;color:#92a0b3;margin-top:4px}.top-actions{display:flex;align-items:center;gap:11px}.demo-chip{font-size:calc(10px * var(--mobile-font-scale-label, 1));font-weight:700;color:#77849a;background:#f0f2f7;padding:7px 10px;border-radius:20px}.demo-chip i{display:inline-block;width:6px;height:6px;background:#e0a23c;border-radius:50%;margin:0 4px 1px 0}.icon-button,.avatar-button{border:0;cursor:pointer}.icon-button{position:relative;width:34px;height:34px;border-radius:12px;color:#55647b;background:#f5f6fa;font-size:calc(17px * var(--mobile-font-scale-label, 1))}.icon-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.bell-icon{display:block;transform:rotate(180deg);font-size:calc(19px * var(--mobile-font-scale-body, 1))}.notification-button em{position:absolute;right:7px;top:6px;width:6px;height:6px;background:#ec7b6b;border:1px solid #fff;border-radius:50%}.avatar-button{width:34px;height:34px;border-radius:50%;background:#e8edff;color:#3655bb;font-size:calc(11px * var(--mobile-font-scale-label, 1));font-weight:600}.screen{padding:23px 20px 28px;animation:fade-in .24s ease}@keyframes fade-in{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}.hello-row{display:flex;justify-content:space-between;align-items:flex-start;margin:4px 0 19px}.eyebrow{font-size:calc(10px * var(--mobile-font-scale-caption, 1));font-weight:600;letter-spacing:1.35px;color:#8491a5;margin:0 0 7px}.hello-row h1,.page-heading h1{font:600 calc(21px * var(--mobile-font-scale-title, 1))/1.22 var(--mobile-font-family);letter-spacing:-.8px;margin:0;color:var(--ink)}.hello-row h1 span{color:#315bea}.subtitle{font-size:calc(12px * var(--mobile-font-scale-caption, 1));color:var(--muted);margin:7px 0 0}.date-pill{white-space:nowrap;margin-top:5px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:#69778d;font-size:calc(10px * var(--mobile-font-scale-caption, 1));font-weight:700}.role-switch{display:flex;padding:4px;border-radius:13px;background:#edf0f6;margin-bottom:20px;gap:3px}.role-switch button{flex:1;border:0;border-radius:10px;padding:9px 3px;background:transparent;color:#79869a;font:700 calc(10px * var(--mobile-font-scale-label, 1)) var(--mobile-font-family);cursor:pointer}.role-switch button.active{background:#fff;color:#315bea;box-shadow:0 2px 8px #293c6414}.section-head{display:flex;align-items:center;justify-content:space-between;margin:21px 0 11px}.section-head h2{font:600 calc(14px * var(--mobile-font-scale-title, 1)) var(--mobile-font-family);margin:0;letter-spacing:-.2px}.text-link{border:0;background:transparent;color:#315bea;font-size:calc(10px * var(--mobile-font-scale-body, 1));font-weight:700;cursor:pointer}.company-select{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:15px}.company-logo{width:34px;height:34px;border-radius:11px;background:#f0efff;color:#6a55b8;font:600 calc(11px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);display:grid;place-items:center}.company-select strong,.company-select small{display:block}.company-select strong{font-size:calc(11px * var(--mobile-font-scale-body, 1))}.company-select small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:var(--muted);margin-top:4px}.chevron{margin-left:auto;color:#9ca8b8;font-size:calc(17px * var(--mobile-font-scale-body, 1))}.kpi-card{background:linear-gradient(135deg,#273f94 0%,#315bea 65%,#4974f0 100%);border-radius:20px;color:#fff;padding:17px 17px 15px;position:relative;overflow:hidden;box-shadow:0 12px 24px #315bea2c}.kpi-card:after{content:"";position:absolute;width:170px;height:170px;border:1px solid #ffffff20;border-radius:50%;right:-55px;top:-105px;box-shadow:0 0 0 22px #ffffff0a,0 0 0 46px #ffffff08}.kpi-top{display:flex;align-items:center;justify-content:space-between}.kpi-top span:first-child{font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#d7e1ff;font-weight:600}.period-switch{border:1px solid #ffffff48;background:#ffffff15;border-radius:20px;padding:6px 9px;color:#fff;font-size:calc(10px * var(--mobile-font-scale-body, 1));font-weight:700}.kpi-value{font:600 calc(24px * var(--mobile-font-scale-value, 1)) var(--mobile-font-family);letter-spacing:-1px;margin:10px 0 6px}.kpi-bottom{display:flex;align-items:center;gap:6px;font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#dbe4ff}.trend{color:#87efc2;font-weight:600}.kpi-spark{position:absolute;right:18px;bottom:17px;width:88px;height:30px;opacity:.86}.kpi-spark svg{width:100%;height:100%;overflow:visible}.kpi-spark path{fill:none;stroke:#96f0c9;stroke-width:2.2;stroke-linecap:round}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-card,.panel,.list-card,.summary-card{background:#fff;border:1px solid #edf0f5;border-radius:16px;box-shadow:0 4px 14px rgba(31,47,77,.025)}.stat-card{padding:13px 13px 12px;min-height:88px}.stat-label{font-size:calc(10px * var(--mobile-font-scale-label, 1));color:#8290a4;font-weight:600;display:flex;align-items:center;gap:6px}.stat-icon{width:22px;height:22px;display:grid;place-items:center;background:#f1f4fb;border-radius:7px;font-size:calc(11px * var(--mobile-font-scale-body, 1))}.stat-value{font:600 calc(16px * var(--mobile-font-scale-value, 1)) var(--mobile-font-family);letter-spacing:-.5px;margin:8px 0 2px}.stat-foot{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8a96a8}.positive{color:#188c65;font-weight:700}.negative{color:#bf7a1a;font-weight:700}.chart-card{padding:14px 14px 10px}.chart-heading{display:flex;justify-content:space-between;align-items:flex-start}.chart-heading strong{font:600 calc(12px * var(--mobile-font-scale-title, 1)) var(--mobile-font-family)}.chart-heading small{display:block;color:#8a96a8;font-size:calc(10px * var(--mobile-font-scale-title, 1));margin-top:4px}.chart-total{font:600 calc(14px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);text-align:right}.chart-total small{display:block;font:500 calc(10px * var(--mobile-font-scale-caption, 1)) var(--mobile-font-family);color:#8895a8;margin-top:4px}.chart{width:100%;height:122px;margin-top:9px;overflow:visible}.chart .gridline{stroke:#edf0f5;stroke-width:1}.chart .area{fill:url(#areaFill)}.chart .line{fill:none;stroke:#456cf0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.chart .dot{fill:white;stroke:#456cf0;stroke-width:2}.chart-labels{display:flex;justify-content:space-between;color:#9aa5b5;font-size:calc(10px * var(--mobile-font-scale-label, 1));margin-top:-3px}.list-card{overflow:hidden}.list-row{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #f0f2f6}.list-row:last-child{border-bottom:0}.row-icon{width:34px;height:34px;flex:none;border-radius:11px;background:#f3f5fb;display:grid;place-items:center;font-size:calc(15px * var(--mobile-font-scale-body, 1))}.row-main{flex:1;min-width:0}.row-main strong{font-size:calc(10px * var(--mobile-font-scale-body, 1));display:block}.row-main small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8c98a8;display:block;margin-top:4px}.row-value{text-align:right;font:600 calc(10px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family)}.row-value small{display:block;color:#8b98aa;font:500 calc(10px * var(--mobile-font-scale-caption, 1)) var(--mobile-font-family);margin-top:4px}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:5px 8px;font-size:calc(10px * var(--mobile-font-scale-label, 1));font-weight:600;white-space:nowrap}.badge.green{color:#138461;background:#e8f7f0}.badge.amber{color:#9a6619;background:#fff4df}.badge.blue{color:#3b5fc9;background:#edf2ff}.badge.gray{color:#79869a;background:#f0f2f6}.badge.red{color:#b74e54;background:#fff0ef}.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.page-heading{margin:4px 0 18px}.page-heading .subtitle{line-height:1.5}.segmented{display:flex;background:#edf0f6;border-radius:11px;padding:3px;gap:3px}.segmented button{border:0;background:transparent;border-radius:8px;color:#8190a5;font-size:calc(10px * var(--mobile-font-scale-label, 1));font-weight:700;padding:7px 9px}.segmented button.active{color:#315bea;background:white;box-shadow:0 2px 6px #273c6512}.report-tile{padding:14px;margin-bottom:9px}.report-top{display:flex;justify-content:space-between;align-items:center}.report-top strong{font:600 calc(11px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family)}.report-number{font:600 calc(18px * var(--mobile-font-scale-value, 1)) var(--mobile-font-family);margin:9px 0 3px}.report-note{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8693a6}.bar-mini{height:5px;border-radius:10px;background:#edf0f5;margin-top:11px;overflow:hidden}.bar-mini i{display:block;height:100%;background:#5375ec;border-radius:10px}.report-title-wrap{display:flex;align-items:center;gap:8px}.report-symbol{width:27px;height:27px;border-radius:9px;background:#f0f3ff;display:grid;place-items:center}.field-label{display:block;font-size:calc(10px * var(--mobile-font-scale-label, 1));font-weight:600;color:#65738a;margin:13px 0 6px}.input,.form-control,select,textarea{width:100%;border:1px solid #e4e9f0;border-radius:11px;background:#fff;padding:11px 12px;color:#25334a;font:500 calc(11px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);outline:none}.input:focus,.form-control:focus,select:focus,textarea:focus{border-color:#7591f3;box-shadow:0 0 0 3px #315bea15}.upload-zone{display:block;text-align:center;border:1.5px dashed #cbd4e2;background:#fafbfe;border-radius:14px;padding:16px 12px;cursor:pointer}.upload-zone:hover{border-color:#7891eb;background:#f7f9ff}.upload-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#eef2ff;color:#4568de;margin:0 auto 8px;font-size:calc(16px * var(--mobile-font-scale-body, 1))}.upload-zone strong{display:block;font-size:calc(10px * var(--mobile-font-scale-body, 1))}.upload-zone small{display:block;color:#8e9bad;font-size:calc(10px * var(--mobile-font-scale-caption, 1));margin-top:5px}.file-input{display:none}.file-list{margin-top:9px;display:grid;gap:7px}.file-item{display:flex;align-items:center;gap:8px;background:#f5f7fb;padding:8px 9px;border-radius:10px}.file-type{width:25px;height:28px;border-radius:6px;background:#fff;color:#da695c;font-size:calc(10px * var(--mobile-font-scale-body, 1));font-weight:600;display:grid;place-items:center}.file-meta{flex:1;min-width:0}.file-meta strong,.file-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta strong{font-size:calc(10px * var(--mobile-font-scale-caption, 1))}.file-meta small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8e99aa;margin-top:3px}.file-remove{border:0;background:transparent;color:#97a2b1;font-size:calc(17px * var(--mobile-font-scale-body, 1));cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.form-grid .field{min-width:0}.form-divider{height:1px;background:#edf0f5;margin:16px 0 12px}.button{border:0;border-radius:12px;padding:11px 14px;font:600 calc(10px * var(--mobile-font-scale-label, 1)) var(--mobile-font-family);cursor:pointer;transition:transform .12s,filter .12s}.button:active{transform:scale(.98)}.button-primary{background:#315bea;color:white;box-shadow:0 7px 14px #315bea27}.button-quiet{background:#f0f2f7;color:#65738a}.button-block{width:100%;margin-top:15px}.button-outline{background:#fff;border:1px solid #dce3ee;color:#53637b}.button-success{background:#158660;color:#fff}.button-danger{background:#fff1f0;color:#b34f52}.notice{display:flex;align-items:flex-start;gap:9px;background:#eef3ff;color:#536786;border-radius:12px;padding:11px;margin:12px 0;font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.5}.notice-icon{color:#456ce3;font-size:calc(14px * var(--mobile-font-scale-caption, 1))}.status-stepper{display:flex;align-items:center;margin:15px 0 12px}.step{display:flex;align-items:center;gap:6px;font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#8290a4;font-weight:700;white-space:nowrap}.step-circle{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#eef1f6;color:#8996a7;font-size:calc(10px * var(--mobile-font-scale-body, 1))}.step.done{color:#198360}.step.done .step-circle{background:#e0f5eb;color:#168360}.step.active{color:#315bea}.step.active .step-circle{background:#e9efff;color:#315bea}.step-line{height:1px;background:#e5e9ef;flex:1;margin:0 6px}.partner-stock-hero{background:linear-gradient(135deg,#203b85,#315bea);color:white;border-radius:18px;padding:16px;margin-bottom:12px}.partner-stock-hero small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#d1dcff}.partner-stock-hero strong{display:block;font:600 calc(21px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);margin-top:7px}.partner-stock-hero span{font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#d7e0ff}.stock-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stock-mini{background:#fff;border:1px solid #edf0f5;border-radius:14px;padding:11px}.stock-mini small{color:#8a97aa;font-size:calc(10px * var(--mobile-font-scale-caption, 1))}.stock-mini strong{display:block;font:600 calc(16px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);margin-top:6px}.stock-mini em{font-style:normal;color:#16906a;font-size:calc(10px * var(--mobile-font-scale-body, 1))}.summary-card{padding:13px;margin:10px 0}.summary-line{display:flex;justify-content:space-between;padding:6px 0;font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#728097}.summary-line strong{font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#29374e}.summary-line.total{border-top:1px solid var(--line);margin-top:5px;padding-top:10px;font-weight:600}.summary-line.total strong{font:600 calc(13px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);color:#315bea}.file-count{color:#315bea;font-size:calc(10px * var(--mobile-font-scale-body, 1));font-weight:600}.review-card{padding:13px;margin-bottom:10px}.review-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.review-code{font:600 calc(11px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family)}.review-card p{font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#7e8ba0;line-height:1.45;margin:7px 0 10px}.review-meta{display:flex;gap:13px;color:#8c98a9;font-size:calc(10px * var(--mobile-font-scale-caption, 1))}.attachment-strip{display:flex;gap:6px;margin-top:10px}.attachment-pill{display:flex;align-items:center;gap:5px;border:1px solid #edf0f4;background:#fafbfc;border-radius:7px;padding:5px 7px;font-size:calc(10px * var(--mobile-font-scale-label, 1));color:#68778c}.review-actions{display:flex;gap:7px;margin-top:12px}.review-actions .button{flex:1;padding:9px}.profile-head{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #edf0f5;border-radius:16px;padding:14px;margin-bottom:12px}.profile-avatar{width:45px;height:45px;border-radius:15px;background:linear-gradient(145deg,#e5eaff,#d4dcff);display:grid;place-items:center;color:#3655bb;font:600 calc(13px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family)}.profile-head strong{font:600 calc(12px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);display:block}.profile-head small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8996a8;display:block;margin-top:4px}.payslip-hero{background:linear-gradient(145deg,#18396e,#2870a4);color:#fff;border-radius:19px;padding:17px;margin-bottom:11px;position:relative;overflow:hidden}.payslip-hero:after{content:"";position:absolute;width:120px;height:120px;border:1px solid #ffffff2b;border-radius:50%;right:-22px;top:-55px;box-shadow:0 0 0 20px #ffffff0b,0 0 0 40px #ffffff08}.payslip-hero small{color:#c8ddf3;font-size:calc(10px * var(--mobile-font-scale-caption, 1))}.payslip-hero strong{font:600 calc(22px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);display:block;margin:9px 0 5px}.payslip-hero span{font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#d3e5f5}.pay-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f2f5;font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#718097}.pay-item strong{color:#34435a}.pay-item:last-child{border-bottom:0}.attendance-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}.day-cell{padding:7px 1px;border-radius:9px;background:#f7f8fb}.day-cell small{display:block;color:#9aa5b3;font-size:calc(10px * var(--mobile-font-scale-caption, 1))}.day-cell strong{display:block;font-size:calc(10px * var(--mobile-font-scale-body, 1));margin-top:5px}.day-cell.present{background:#e9f7f0;color:#147e5d}.day-cell.leave{background:#fff3dd;color:#aa751d}.empty-state{text-align:center;padding:26px 12px;color:#8c98a9;font-size:calc(10px * var(--mobile-font-scale-caption, 1))}.bottom-nav{position:fixed;width:min(100%,520px);bottom:0;left:50%;transform:translateX(-50%);height:calc(68px + env(safe-area-inset-bottom));padding:7px 8px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;align-items:flex-start;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-top:1px solid #e9edf3;z-index:10}.nav-item{flex:1;border:0;background:transparent;color:#9aa5b4;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 1px;font-size:calc(10px * var(--mobile-font-scale-label, 1));font-weight:700;cursor:pointer}.nav-icon{font-size:calc(17px * var(--mobile-font-scale-body, 1));line-height:20px}.nav-item.active{color:#315bea}.nav-item.active .nav-icon{filter:drop-shadow(0 2px 4px #315bea3a)}.toast{position:fixed;z-index:30;left:50%;bottom:calc(82px + env(safe-area-inset-bottom));transform:translate(-50%,15px);background:#1b2a41;color:white;border-radius:12px;padding:11px 15px;font-size:calc(10px * var(--mobile-font-scale-body, 1));font-weight:600;box-shadow:0 8px 22px #13203930;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.review-dialog{border:0;padding:0;background:transparent;width:min(440px,calc(100% - 30px));max-width:440px}.review-dialog::backdrop{background:#12203962;backdrop-filter:blur(3px)}.dialog-card{position:relative;background:#fff;border-radius:21px;padding:24px;box-shadow:0 20px 70px #0f1b3038}.dialog-close{position:absolute;top:12px;right:13px;background:#f1f3f7;border:0;border-radius:50%;width:27px;height:27px;color:#7c899c;font-size:calc(18px * var(--mobile-font-scale-body, 1));cursor:pointer}.dialog-symbol{width:39px;height:39px;border-radius:13px;background:#e4f6ee;color:#148360;display:grid;place-items:center;font-size:calc(18px * var(--mobile-font-scale-body, 1));margin-bottom:17px}.dialog-card h2{font:600 calc(17px * var(--mobile-font-scale-title, 1)) var(--mobile-font-family);margin:0 0 7px}.muted{color:#8290a4;font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.5;margin:0}.dialog-actions{display:flex;gap:8px;margin-top:17px}.dialog-actions .button{flex:1}.mini-tabs{display:flex;gap:7px;overflow:auto;padding:1px 0 3px}.mini-tabs button{border:1px solid #e4e9f0;background:#fff;color:#76849a;border-radius:20px;white-space:nowrap;padding:7px 10px;font-size:calc(10px * var(--mobile-font-scale-label, 1));font-weight:700}.mini-tabs button.active{border-color:#ccd8ff;background:#eef2ff;color:#315bea}.muted{color:#8290a4}.spacer{height:8px}
@media(min-width:700px){body{padding:24px 0}.phone-shell{min-height:calc(100vh - 48px);border-radius:30px;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}.topbar{border-radius:30px 30px 0 0}.bottom-nav{bottom:24px;border-radius:0 0 30px 30px}.toast{bottom:105px}}
@media(max-width:360px){.screen{padding-left:15px;padding-right:15px}.hello-row h1{font-size:calc(20px * var(--mobile-font-scale-title, 1))}.demo-chip{font-size:calc(10px * var(--mobile-font-scale-label, 1));padding:7px 8px}.date-pill{font-size:calc(10px * var(--mobile-font-scale-caption, 1))}.stats-grid{gap:7px}.stat-card{padding:11px}.kpi-value{font-size:calc(22px * var(--mobile-font-scale-value, 1))}}

.action-stat{width:100%;text-align:left;color:var(--ink);cursor:pointer}.action-stat:active,.voucher-card:active{transform:scale(.99)}.voucher-card{display:block;width:100%;text-align:left;padding:13px;margin-bottom:9px;color:var(--ink);cursor:pointer}.voucher-card .text-link{display:block;margin-top:8px}.back-link{padding:0;margin-bottom:4px}

.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.account-grid .field-label{margin-top:10px}.item-edit-card{padding:12px;margin-bottom:9px}.item-code-select{font-weight:700}.item-detail-line{display:flex;justify-content:space-between;gap:8px;margin-top:8px;color:#718097;font-size:calc(10px * var(--mobile-font-scale-body, 1))}.item-detail-line strong{color:#29374e;font-size:calc(10px * var(--mobile-font-scale-body, 1))}

.voucher-totals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:12px 0;padding:10px;background:#eaf0ff;border:1px solid #dae4ff;border-radius:14px}.voucher-totals>div{min-width:0}.voucher-totals small{display:block;color:#6f7f9d;font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.25}.voucher-totals strong{display:block;color:#263c79;font:600 calc(11px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);margin-top:5px;white-space:nowrap}.voucher-totals .voucher-grand-total strong{color:#315bea}.voucher-line-card{padding:9px;margin-bottom:8px}.voucher-line-card .field-label{font-size:calc(10px * var(--mobile-font-scale-label, 1));margin:0 0 4px}.voucher-line-card select{padding:8px 9px;font-size:calc(10px * var(--mobile-font-scale-body, 1));border-radius:9px}.voucher-line-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 9px;margin-top:8px}.voucher-line-field{min-width:0}.voucher-line-field small{display:block;color:#8895a8;font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.2}.voucher-line-field strong{display:block;color:#35435a;font-size:calc(10px * var(--mobile-font-scale-body, 1));margin-top:3px;overflow-wrap:anywhere}.voucher-line-field.amount strong{color:#253d84}.voucher-line-grid .wide{grid-column:1/-1}
.voucher-line-head{display:flex;align-items:center;gap:7px}.voucher-line-head .item-code-select{flex:1;min-width:0;width:auto}.voucher-line-sequence{flex:0 0 38px;width:38px;height:35px;padding:6px 3px;text-align:center;border:1px solid #e4e9f0;border-radius:9px;background:#f3f5f9;color:#748197;font:700 calc(10px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family)}.voucher-line-tax-summary{display:grid;gap:6px;align-content:start}.voucher-line-tax-summary .voucher-line-field strong{margin-top:2px}.voucher-line-field .line-account-select{width:100%;min-width:0}.voucher-number-row{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;align-items:stretch;margin:0 0 14px}.voucher-number-cell{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px}.voucher-number-cell>small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.2;color:#8895a8}.voucher-number-cell>strong,.voucher-number-cell select{height:36px;min-width:0;border:1px solid #e4e9f0;border-radius:9px;background:#fff;padding:8px;color:#25334a;font:700 calc(10px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voucher-number-cell>strong{display:flex;align-items:center}.voucher-status-cell .badge{align-self:flex-start;min-height:36px;display:inline-flex;justify-content:center;padding:0 8px;font-size:calc(10px * var(--mobile-font-scale-label, 1))}@media(max-width:360px){.voucher-number-row{grid-template-columns:.9fr .9fr 1.2fr;gap:5px}.voucher-number-cell>strong,.voucher-number-cell select{padding-left:6px;padding-right:6px;font-size:calc(10px * var(--mobile-font-scale-body, 1))}}.role-switch button{display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}.role-switch button[data-role="owner"]{--role-accent:#7655c7}.role-switch button[data-role="employee"]{--role-accent:#2583bd}.role-switch button[data-role="partner"]{--role-accent:#d28a24}.role-switch button[data-role="accountant"]{--role-accent:#168562}.role-switch button.active{color:var(--role-accent)}.role-switch .role-icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--role-accent)}.voucher-line-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.voucher-line-grid>.voucher-line-field:nth-child(1){grid-column:1/span 2;grid-row:1}.voucher-line-grid>.voucher-line-field:nth-child(2){grid-column:3/span 2;grid-row:1}.voucher-line-grid>.voucher-line-field:nth-child(3){grid-column:1/span 3;grid-row:2}.voucher-line-grid>.voucher-line-tax-summary{grid-column:4/span 3;grid-row:2}.voucher-line-grid>.voucher-line-field.amount{grid-column:5/span 2;grid-row:1}.voucher-number-row{grid-template-columns:minmax(74px,.9fr) minmax(105px,1.3fr) minmax(90px,1fr)}.voucher-status-cell{align-items:flex-end;text-align:right}.voucher-status-cell>small{text-align:right}.voucher-status-cell .badge{align-self:flex-end}.voucher-line-head .item-code-select{height:32px}.voucher-line-sequence{flex:0 0 32px;width:32px;height:32px;padding:0 2px;font-size:calc(10px * var(--mobile-font-scale-body, 1))}.voucher-line-grid>.voucher-line-field:nth-child(3){grid-column:1/span 2;grid-row:2}.voucher-line-grid>.voucher-line-tax-summary{display:contents}.voucher-line-tax-summary>.voucher-line-field:first-child{grid-column:3/span 2;grid-row:2}.voucher-line-tax-summary>.voucher-line-field:nth-child(2){grid-column:5/span 2;grid-row:2}.voucher-line-grid>.voucher-line-field.amount{grid-column:5/span 2;grid-row:1}.voucher-line-grid .line-account-select{font-size:calc(10px * var(--mobile-font-scale-body, 1));padding:8px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-info{flex:1;min-width:0}.profile-partner-select{width:100%;min-width:0;border:0;border-radius:6px;background:transparent;padding:2px 18px 2px 0;color:#29374e;font:600 calc(12px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none}.profile-partner-select:focus{box-shadow:0 0 0 2px #315bea18}.profile-info small{display:block;color:#8996a8;font-size:calc(10px * var(--mobile-font-scale-caption, 1));margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-stock-list{display:grid;gap:9px}.material-stock-card{padding:11px 12px}.material-stock-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.material-stock-head>div:first-child{min-width:0}.material-stock-head small,.material-stock-head strong{display:block}.material-stock-head small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8996a8;margin-bottom:4px}.material-stock-head>div:first-child strong{font-size:calc(10px * var(--mobile-font-scale-body, 1));line-height:1.35}.material-stock-onhand{text-align:right;flex:none}.material-stock-onhand strong{font:600 calc(16px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);color:#244895}.material-stock-onhand small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#75839a;margin:2px 0 0}.material-stock-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid #f0f2f6}.material-stock-breakdown>div{display:flex;justify-content:space-between;gap:5px;align-items:center}.material-stock-breakdown small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8996a8}.material-stock-breakdown strong{font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#45536a;white-space:nowrap}.report-shortcut{cursor:pointer;text-align:left}.report-shortcut:active{transform:scale(.99)}.report-shortcut:focus-visible{outline:2px solid #315bea;outline-offset:2px}.report-debt-switch[hidden]{display:none!important}.drill-row-card{padding:13px;margin:10px 0}.drill-row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.drill-row-top>div:first-child{min-width:0}.drill-row-top strong,.drill-row-top small{display:block}.drill-row-top>div:first-child strong{font-size:calc(11px * var(--mobile-font-scale-body, 1));line-height:1.4}.drill-row-top>div:first-child small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8996a8;margin-top:4px}.drill-row-amount{text-align:right;flex:none}.drill-row-amount strong{font:600 calc(12px * var(--mobile-font-scale-value, 1)) var(--mobile-font-family);color:#253d84}.drill-row-amount small{font-size:calc(10px * var(--mobile-font-scale-value, 1));color:#8290a4;margin-top:3px}.drill-row-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid #f0f2f6}.drill-row-details>div{display:flex;justify-content:space-between;gap:5px}.drill-row-details small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8996a8}.drill-row-details strong{font-size:calc(10px * var(--mobile-font-scale-body, 1));color:#45536a;text-align:right}
.searchable-select{position:relative;width:100%;min-width:0}
.searchable-select>.searchable-native-select{display:none!important}
.searchable-select-input{display:block;width:100%;min-width:0;border:1px solid #e4e9f0;border-radius:11px;background:#fff;padding:10px 11px;color:#25334a;font:500 calc(11px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);outline:none}
.searchable-select-input:focus{border-color:#7591f3;box-shadow:0 0 0 3px #315bea15}
.searchable-select-list{position:absolute;z-index:120;top:calc(100% + 4px);left:0;right:0;max-height:220px;overflow:auto;border:1px solid #dfe5ee;border-radius:11px;background:#fff;box-shadow:0 10px 25px #17233b24;padding:4px}
.searchable-select-list[hidden]{display:none}
.searchable-select-option{min-height:34px;display:flex;align-items:center;padding:7px 9px;border-radius:7px;color:#2f3d53;font:500 calc(12px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);line-height:1.35;cursor:pointer}
.searchable-select-option:hover,.searchable-select-option:focus{background:#eef2ff;color:#253d84;outline:none}
.searchable-select-option[aria-selected="true"]{font-weight:700;background:#f4f6ff}
.searchable-select-empty{padding:10px 9px;color:#8996a8;font:400 calc(11px * var(--mobile-font-scale-caption, 1)) var(--mobile-font-family)}
.profile-searchable-select{width:100%;min-width:0}
.profile-searchable-select .searchable-select-input{border:0;border-radius:6px;background:transparent;padding:2px 18px 2px 0;color:#29374e;font:600 calc(12px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-searchable-select .searchable-select-input:focus{box-shadow:0 0 0 2px #315bea18}
.profile-searchable-select .searchable-select-option{font-size:calc(13px * var(--mobile-font-scale-body, 1))}
.mobile-passkey-card{display:grid;gap:8px;margin:12px 0}.passkey-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:4px}.passkey-heading>div{min-width:0}.passkey-heading strong,.passkey-heading small{display:block}.passkey-heading strong{font-size:calc(13px * var(--mobile-font-scale-body, 1));line-height:1.35}.passkey-heading small{margin-top:4px;color:#8290a4;font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.45}.passkey-symbol{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:#edf2ff;color:#315bea;font-size:22px;font-weight:700}.mobile-passkey-card .field-label{margin:3px 0 0}.passkey-message{font-size:calc(11px * var(--mobile-font-scale-caption, 1));color:#607086;line-height:1.4}.mobile-passkey-list{display:grid;gap:7px}.mobile-passkey-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:1px solid #edf0f5;border-radius:10px;background:#f8f9fc}.mobile-passkey-item span,.mobile-passkey-item strong,.mobile-passkey-item small{display:block;min-width:0}.mobile-passkey-item strong{font-size:calc(11px * var(--mobile-font-scale-body, 1));overflow-wrap:anywhere}.mobile-passkey-item small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8290a4;margin-top:3px}.mobile-passkey-item button{flex:none}.danger-link{color:#c33b4b}
.voucher-line-grid .searchable-select-input{font-size:calc(10px * var(--mobile-font-scale-body, 1));padding:8px 4px;border-radius:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voucher-line-grid .searchable-select-option{font-size:calc(10px * var(--mobile-font-scale-body, 1))}
.voucher-line-grid .searchable-select-list{min-width:165px;right:auto;width:max(100%,165px)}

@supports (-webkit-touch-callout:none){
 .searchable-select-input:focus{font-size:max(16px,calc(16px * var(--mobile-font-scale-body, 1)))!important;-webkit-text-size-adjust:100%}
 .profile-searchable-select .searchable-select-input:focus{font-size:max(16px,calc(16px * var(--mobile-font-scale-body, 1)))!important}
 .voucher-line-grid .searchable-select-input:focus{font-size:max(16px,calc(16px * var(--mobile-font-scale-body, 1)))!important}
}

.appearance-button{width:38px;height:38px;border:1px solid #e6eaf1;border-radius:13px;background:#fff;color:#315bea;font:600 calc(13px * var(--mobile-font-scale-label, 1)) var(--mobile-font-family);cursor:pointer}
.appearance-button:active{transform:scale(.96)}
.appearance-dialog{width:min(420px,calc(100% - 32px));max-width:420px;border:0;border-radius:22px;padding:0;box-shadow:0 24px 70px #17233b42}
.appearance-dialog::backdrop{background:#101a2e66;backdrop-filter:blur(3px)}
.appearance-card{position:relative;padding:24px}
.appearance-card h2{margin:8px 0;font-size:calc(19px * var(--mobile-font-scale-title, 1));color:#202d43}
.appearance-card>.muted{font-size:calc(12px * var(--mobile-font-scale-caption, 1));line-height:1.5;margin:0 0 20px}
.appearance-symbol{width:44px;height:44px;border-radius:15px;background:#edf1ff;color:#315bea;display:grid;place-items:center;font:600 calc(16px * var(--mobile-font-scale-body, 1)) var(--mobile-font-family);margin-bottom:14px}
.appearance-size-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:#34445c;font-size:calc(13px * var(--mobile-font-scale-body, 1))}
.appearance-size-row strong{color:#315bea;font-size:calc(13px * var(--mobile-font-scale-body, 1))}
.appearance-slider{width:100%;accent-color:#315bea}
.appearance-range-labels{display:flex;justify-content:space-between;color:#8793a6;font-size:calc(10px * var(--mobile-font-scale-label, 1));margin-top:3px}
.appearance-preview{display:grid;gap:6px;padding:13px;margin:17px 0 4px;border:1px solid #e8edf4;border-radius:13px;background:#f8faff}
.appearance-preview strong{font-size:calc(14px * var(--mobile-font-scale-body, 1));color:#263650}
.appearance-preview span{font-size:calc(12px * var(--mobile-font-scale-body, 1));color:#69778d;line-height:1.45}

.appearance-dialog{max-height:88dvh}
.appearance-card{max-height:88dvh;overflow:auto}
.appearance-controls{display:grid;gap:13px}
.appearance-control>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;color:#34445c}
.appearance-control label{font-size:calc(12px * var(--mobile-font-scale-label, 1));font-weight:600}
.appearance-control strong{font-size:calc(12px * var(--mobile-font-scale-label, 1));color:#315bea}
.appearance-preview{display:grid;gap:6px}
.appearance-preview small{font-size:calc(11px * var(--mobile-font-scale-caption, 1));color:#8290a4}
.appearance-preview b{font-size:calc(16px * var(--mobile-font-scale-value, 1));color:#253d84}

:root{--mobile-font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mobile-user-bg-color:#f7f8fb;--mobile-user-bg-image:linear-gradient(140deg,#e8eeff 0%,#f7f8fb 52%,#e3f5f0 100%)}
.phone-shell{background-color:var(--mobile-user-bg-color);background-image:var(--mobile-user-bg-image);background-size:cover;background-position:center}
.appearance-background{padding:13px;margin:16px 0 5px;border:1px solid #e8edf4;border-radius:14px;background:#fff}
.appearance-background-head{display:flex;align-items:center;justify-content:space-between;color:#34445c;font-size:calc(13px * var(--mobile-font-scale-label, 1))}
.appearance-background-head button{border:0;background:transparent;color:#315bea;font-size:calc(10px * var(--mobile-font-scale-label, 1));line-height:1.15;text-align:center;cursor:pointer}
.appearance-background>p{margin:5px 0 10px;color:#8390a4;font-size:calc(10px * var(--mobile-font-scale-caption, 1))}
.appearance-swatches{display:flex;gap:8px;justify-content:space-between}
.appearance-swatch{width:48px;padding:0;border:0;background:transparent;color:#748198;display:grid;gap:4px;justify-items:center;font:500 calc(10px * var(--mobile-font-scale-label, 1)) var(--mobile-font-family);cursor:pointer}
.appearance-swatch i{width:38px;height:38px;border:2px solid #fff;border-radius:12px;box-shadow:0 0 0 1px #e0e6ef;display:block}
.appearance-swatch.active i{box-shadow:0 0 0 2px #315bea}
.appearance-swatch[data-bg-preset="mist"] i{background:linear-gradient(140deg,#e8eeff,#f7f8fb 55%,#e3f5f0)}
.appearance-swatch[data-bg-preset="ocean"] i{background:linear-gradient(140deg,#d8eaff,#edf5ff 55%,#d9eee9)}
.appearance-swatch[data-bg-preset="blush"] i{background:linear-gradient(140deg,#ffe3e9,#fff5f2 54%,#f2eaff)}
.appearance-swatch[data-bg-preset="sage"] i{background:linear-gradient(140deg,#dcebdc,#f1f6eb 54%,#e0eee8)}
.appearance-swatch[data-bg-preset="sand"] i{background:linear-gradient(140deg,#f4e3c9,#fbf5eb 54%,#e9efe9)}
.appearance-photo-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.appearance-photo-actions .button{padding:8px 11px;font-size:calc(11px * var(--mobile-font-scale-label, 1))}
#appearance-background-status{display:block;color:#8592a5;font-size:calc(10px * var(--mobile-font-scale-caption, 1));margin-top:7px}

.account-page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.account-page-head h2{margin:0;font-size:calc(18px * var(--mobile-font-scale-title, 1));color:#263650}
.account-page-head .eyebrow{margin-bottom:5px}
.account-page-head .button{white-space:nowrap;padding:10px 12px;font-size:calc(11px * var(--mobile-font-scale-label, 1))}
.account-user-group{margin-bottom:18px}
.account-user-group .section-head{margin:0 0 8px}
.account-user-group .section-head h3{font-size:calc(13px * var(--mobile-font-scale-title, 1));margin:0}
.account-user-card{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:11px;margin:8px 0}
.account-user-card .profile-avatar{flex:none}
.account-user-card .row-main{min-width:0;flex:1}
.account-user-card .row-main strong,.account-user-card .row-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-user-card .row-main strong{font-size:calc(12px * var(--mobile-font-scale-body, 1))}
.account-user-card .row-main small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8491a4;margin-top:3px}
.account-user-card>.badge{flex:none;font-size:calc(10px * var(--mobile-font-scale-label, 1))}
.account-row-actions{display:flex;gap:5px;flex:none;margin-left:47px;width:calc(100% - 47px);justify-content:flex-end}
.account-row-actions .button{padding:7px 8px;font-size:calc(10px * var(--mobile-font-scale-label, 1));white-space:nowrap}
.account-empty{padding:12px;border-radius:12px;background:#fff;color:#8996a8;font-size:calc(11px * var(--mobile-font-scale-caption, 1))}
.invite-dialog{width:min(420px,calc(100% - 32px));max-width:420px;max-height:90dvh;padding:0;border:0;border-radius:22px;box-shadow:0 24px 70px #17233b42}
.invite-dialog::backdrop{background:#101a2e66;backdrop-filter:blur(3px)}
.invite-card{position:relative;max-height:90dvh;overflow:auto;padding:24px}
.invite-card h2{margin:8px 0;font-size:calc(19px * var(--mobile-font-scale-title, 1));color:#202d43}
.invite-card>.muted{font-size:calc(12px * var(--mobile-font-scale-caption, 1));line-height:1.5}
.invite-card .field-label{margin-top:12px}
.invite-card .dialog-actions{margin-top:19px}

.company-select{width:100%;border:1px solid var(--line);text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.company-select:active,.period-switch:active{transform:scale(.99)}
.filter-picker-dialog{width:min(420px,calc(100% - 32px));max-width:420px;padding:0;border:0;border-radius:22px;box-shadow:0 24px 70px #17233b42}
.filter-picker-dialog::backdrop{background:#101a2e66;backdrop-filter:blur(3px)}
.filter-picker-card{position:relative;padding:24px}
.filter-picker-card h2{margin:6px 0 16px;font-size:calc(18px * var(--mobile-font-scale-title, 1));color:#202d43}
.filter-picker-options{display:grid;gap:8px}
.filter-picker-option{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid #e7ebf2;border-radius:13px;background:#fff;text-align:left;color:#34445c;cursor:pointer}
.filter-picker-option span{min-width:0}
.filter-picker-option strong,.filter-picker-option small{display:block}
.filter-picker-option strong{font-size:calc(13px * var(--mobile-font-scale-body, 1))}
.filter-picker-option small{margin-top:4px;color:#8290a4;font-size:calc(10px * var(--mobile-font-scale-caption, 1))}
.filter-picker-option i{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#eef1f6;color:transparent;font-style:normal;flex:none}
.filter-picker-option.selected{border-color:#8da3f5;background:#f6f8ff}
.filter-picker-option.selected i{background:#315bea;color:#fff}

.account-inactive-badge{background:#edf0f4;color:#6d7888}

.filter-month-custom{margin-top:16px;padding-top:14px;border-top:1px solid #e8edf4}.filter-month-custom>label{display:block;margin-bottom:8px;color:#66758b;font-size:12px;font-weight:600}.filter-month-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.filter-month-row input[type="month"]{width:100%;min-width:0;height:42px;padding:0 10px;border:1px solid #dce3ed;border-radius:11px;background:#fff;color:#26364e;font:inherit;font-size:14px}.filter-month-row .button{min-height:42px;padding:0 16px}

.account-status-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 14px;padding:4px;border:1px solid #e7ebf2;border-radius:14px;background:#f4f6fa}.account-status-tab{display:flex;align-items:center;justify-content:center;gap:4px;min-height:42px;padding:7px 4px;border:0;border-radius:10px;background:transparent;color:#67758a;font:inherit;font-size:calc(11px * var(--mobile-font-scale-label, 1));cursor:pointer}.account-status-tab b{display:grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border-radius:99px;background:#e7ebf2;color:#66758b;font-size:10px}.account-status-tab.selected{background:#fff;color:#2448bb;box-shadow:0 2px 8px #22365a12}.account-status-tab.selected b{background:#e9efff;color:#315bea}

.account-status-tab{font-size:calc(10px * var(--mobile-font-scale-label, 1));line-height:1.15;text-align:center}

.account-status-toggle{appearance:none;border:0;cursor:pointer;font:inherit;line-height:inherit;white-space:nowrap}.account-status-toggle:focus-visible{outline:2px solid #315bea;outline-offset:2px}

.account-status-dialog{width:min(420px,calc(100% - 32px));max-width:420px;max-height:90dvh;padding:0;border:0;border-radius:22px;box-shadow:0 24px 70px #17233b42}.account-status-dialog::backdrop{background:#101a2e66;backdrop-filter:blur(3px)}.account-status-card{position:relative;padding:24px}.account-status-card h2{margin:8px 0;font-size:calc(19px * var(--mobile-font-scale-title, 1));color:#202d43}.account-status-card>.muted{font-size:calc(12px * var(--mobile-font-scale-caption, 1));line-height:1.5}.account-status-options{display:grid;gap:9px;margin:18px 0}.account-status-option{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e4e9f1;border-radius:13px;background:#fff;cursor:pointer}.account-status-option:has(input:checked){border-color:#8da3f5;background:#f6f8ff}.account-status-option input{width:18px;height:18px;accent-color:#315bea;flex:none}.account-status-option strong,.account-status-option small{display:block}.account-status-option strong{font-size:calc(12px * var(--mobile-font-scale-body, 1));color:#34445c}.account-status-option small{margin-top:4px;font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.35;color:#8491a4}.account-status-card .dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

.dialog-close{background:#fff1f0;color:#b34f52}

/* Slightly tighter content cards for mobile screens */
.kpi-card{padding:15px 15px 13px}.stat-card{padding:10px}.chart-card{padding:12px 12px 9px}.list-row{padding:10px}.report-tile{padding:12px}.summary-card{padding:11px}.review-card{padding:11px}.voucher-card{padding:11px}.item-edit-card{padding:10px}.drill-row-card{padding:11px}.material-stock-card{padding:10px 11px}.account-user-card{padding:9px 10px}.voucher-totals{padding:9px}.voucher-line-card{padding:8px}

/* Mobile internal chat prototype */
.chat-launch{color:#315bea;background:#edf1ff}.chat-launch em{position:absolute;right:-3px;top:-3px;min-width:16px;height:16px;padding:0 4px;background:#e96e69;color:#fff;border:2px solid #fff;border-radius:12px;font:700 9px/12px var(--mobile-font-family);font-style:normal;text-align:center}.chat-screen{padding-top:14px}.chat-page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.chat-page-head h1{font:600 calc(21px * var(--mobile-font-scale-title,1))/1.2 var(--mobile-font-family);margin:0;letter-spacing:-.5px}.chat-page-head p{font-size:calc(12px * var(--mobile-font-scale-caption,1));color:var(--muted);margin:5px 0 0}.chat-back{border:0;background:#fff;color:#56657c;border-radius:12px;width:38px;height:38px;font-size:20px;box-shadow:0 3px 12px #1a2a4a10}.chat-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 13px;margin-bottom:12px}.chat-search span{font-size:18px;color:#8491a5}.chat-search input{width:100%;height:44px;border:0;outline:0;background:transparent;font:500 13px var(--mobile-font-family);color:var(--ink)}.chat-filters{display:flex;gap:8px;margin-bottom:12px}.chat-filter{border:1px solid var(--line);border-radius:20px;padding:7px 13px;background:#fff;color:#64728a;font-size:11px;font-weight:700}.chat-filter.active{background:#eaf0ff;color:#315bea;border-color:#dce5ff}.chat-list{display:grid;gap:7px}.chat-row{width:100%;display:flex;align-items:center;gap:11px;padding:11px;background:#fff;border:1px solid #edf0f5;border-radius:15px;text-align:left;color:inherit;box-shadow:0 5px 16px #1a2a4a06}.chat-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#e8edff;color:#3655bb;font-weight:600;font-size:12px;position:relative}.chat-avatar.green{background:#e3f5ec;color:#14835f}.chat-avatar.amber{background:#fff0d8;color:#a36916}.chat-avatar.coral{background:#ffebe8;color:#be5d50}.chat-presence{position:absolute;width:10px;height:10px;right:0;bottom:0;border:2px solid #fff;border-radius:50%;background:#25b27d}.chat-row-main{min-width:0;flex:1}.chat-row-head{display:flex;justify-content:space-between;gap:6px;align-items:center}.chat-row-head strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-row-head time{font-size:10px;color:#98a3b4;white-space:nowrap}.chat-row-preview{display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:#7c899d;font-size:11px}.chat-row-preview span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chat-unread{display:grid;place-items:center;min-width:18px;height:18px;border-radius:12px;padding:0 5px;background:#315bea;color:#fff;font-size:9px;font-weight:600}.chat-context{font-size:10px;color:#9aa5b5;margin:12px 3px}.chat-conversation{height:min(66vh,650px);min-height:440px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 7px 20px #1a2a4a08}.chat-conversation-head{height:62px;display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}.chat-conversation-head .chat-avatar{width:38px;height:38px;flex-basis:38px}.chat-conversation-head strong,.chat-conversation-head small{display:block}.chat-conversation-head strong{font-size:13px}.chat-conversation-head small{font-size:10px;color:#7e8b9f;margin-top:3px}.chat-message-list{flex:1;overflow:auto;padding:14px 12px;background:linear-gradient(180deg,#f8f9fc,#f5f7fb)}.chat-day-divider{text-align:center;font-size:10px;color:#9aa5b5;margin:2px 0 14px}.chat-message{max-width:83%;margin:0 0 11px}.chat-message.mine{margin-left:auto}.chat-sender{font-size:10px;color:#8090a6;margin:0 0 4px 4px}.chat-bubble{padding:10px 12px;border-radius:15px 15px 15px 5px;background:#fff;border:1px solid #edf0f5;color:#344258;font-size:12px;line-height:1.45;box-shadow:0 2px 7px #1a2a4a06;overflow-wrap:anywhere}.chat-message.mine .chat-bubble{background:#eaf0ff;border-color:#e0e8ff;border-radius:15px 15px 5px 15px}.chat-time{font-size:9px;color:#9aa5b5;margin:4px 4px 0}.chat-attachment{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#fff;border:1px solid #e7ebf2;border-radius:12px;font-size:11px;color:#42516a}.chat-attachment b{display:grid;place-items:center;width:29px;height:31px;border-radius:8px;background:#fff0ee;color:#cf6157;font-size:9px}.chat-composer{display:flex;align-items:flex-end;gap:7px;padding:10px;border-top:1px solid var(--line);background:#fff}.chat-composer button{width:35px;height:35px;flex:0 0 35px;border:0;border-radius:11px;background:#f1f3f8;color:#66758b;font-size:17px}.chat-composer textarea{flex:1;min-height:36px;max-height:90px;resize:none;border:1px solid #e9edf4;border-radius:12px;padding:9px 10px;font:400 12px/1.35 var(--mobile-font-family);outline:none}.chat-composer .chat-send{background:#315bea;color:#fff;font-size:15px}.chat-empty{padding:34px 15px;text-align:center;color:#8591a4;background:#fff;border-radius:15px;font-size:12px}.chat-empty b{display:block;color:#52617a;margin-bottom:5px}.chat-context-note{font-size:10px;color:#98a3b4;text-align:center;padding:8px 12px 0}.chat-compose-meta{display:flex;align-items:center;gap:6px}.chat-row:active,.chat-back:active,.chat-filter:active{transform:scale(.99)}

/* Keep the Owner company selector close to the role switch on the overview. */
.overview-header{padding-bottom:5px}.overview-header .role-switch{margin-bottom:0}.owner-home-screen{padding-top:10px}

.action-stat .action-count{margin:0 0 0 auto;font-size:14px;line-height:1;letter-spacing:0;color:var(--ink)}

.action-stat{padding:8px 9px;min-height:0;border-radius:14px}.action-stat .stat-label{gap:6px;font-weight:700;color:#55647b}.action-stat .stat-icon{width:19px;height:19px;border-radius:6px;font-size:10px}.action-stat .action-kind{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border-radius:7px;font-size:10px;line-height:1.15;font-weight:600;white-space:nowrap}.action-kind.purchase{color:#3c59b8;background:#edf1ff}.action-kind.sales{color:#16845f;background:#e7f6ee}.action-kind.credit{color:#167d78;background:#e5f6f3}.action-kind.debit{color:#a76a19;background:#fff3df}.action-stat .action-count{font-size:14px}.action-stat .stat-foot{margin-top:5px;font-size:9px;line-height:1.2}

/* Slightly reduce page gutters to give mobile content more usable room. */
.screen{padding:20px 16px 24px}.overview-header{padding-bottom:5px}.owner-home-screen{padding-top:10px}.chat-screen{padding-top:14px}@media(max-width:360px){.screen{padding-left:14px;padding-right:14px}}

.topbar{padding-left:16px;padding-right:16px}.top-actions{gap:8px}

.mobile-login-link{font-size:calc(10px * var(--mobile-font-scale-label,1));font-weight:700;color:#315bea;text-decoration:none;white-space:nowrap}.demo-chip.connected{color:#137a56;background:#e8f7ef}.demo-chip.connected i{background:#20a46a}.filter-picker-option[hidden]{display:none}

[hidden]{display:none!important}.mobile-data-scope{margin:0 0 12px}

.period-select{font-size:max(16px,calc(10px * var(--mobile-font-scale-body,1)));appearance:none;-webkit-appearance:none;padding-right:25px;background-color:#ffffff15;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;cursor:pointer}.period-select option{color:#202d43;background:#fff}

.partner-debt-balance{padding:18px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#2946a5,#4771ec);box-shadow:0 12px 28px #2446a51f}.partner-debt-balance>small,.partner-debt-balance>strong,.partner-debt-balance>span{display:block}.partner-debt-balance>small{font-size:calc(9px * var(--mobile-font-scale-caption,1));font-weight:600;letter-spacing:.8px;color:#d8e2ff}.partner-debt-balance>strong{margin:6px 0;font:600 calc(22px * var(--mobile-font-scale-value,1)) var(--mobile-font-family);letter-spacing:-.5px}.partner-debt-balance>span{font-size:calc(11px * var(--mobile-font-scale-body,1));color:#e5ebff}.partner-debt-balance-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff30;font-size:calc(10px * var(--mobile-font-scale-body,1));color:#e4eaff}.partner-debt-balance-foot b{color:#fff}.partner-debt-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:11px}.partner-debt-stats .panel{padding:12px}.partner-debt-stats small,.partner-debt-stats strong,.partner-debt-stats span{display:block}.partner-debt-stats small{color:#78869c;font-size:calc(9px * var(--mobile-font-scale-caption,1))}.partner-debt-stats strong{margin:4px 0;font:600 calc(17px * var(--mobile-font-scale-value,1)) var(--mobile-font-family)}.partner-debt-stats span{color:#718097;font-size:calc(10px * var(--mobile-font-scale-caption,1))}.partner-debt-filters{margin-top:14px}.partner-debt-document{padding:13px;margin-bottom:10px}.partner-debt-document>p{margin:9px 0;color:#66758b;font-size:calc(11px * var(--mobile-font-scale-body,1))}.partner-debt-lines{display:grid;gap:7px;padding:10px 0}.partner-debt-lines>div{display:flex;justify-content:space-between;gap:8px;font-size:calc(10px * var(--mobile-font-scale-body,1));color:#718097}.partner-debt-lines strong{color:#34445c}.partner-debt-lines .remaining{padding-top:8px;border-top:1px solid #edf0f5;color:#24324a;font-weight:700}.partner-debt-lines .remaining strong{color:#315bea}

/* Mobile live workspace polish */
.mobile-company-search{margin:0 0 10px;box-sizing:border-box}
#kpi-period-select{box-sizing:border-box;width:50%;max-width:50%;flex:0 0 50%;}

/* Compact, non-modal Home Screen invitation. */
.pwa-install-banner{position:fixed;z-index:1200;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));box-sizing:border-box;max-width:430px;margin:auto;display:flex;align-items:flex-start;gap:10px;padding:11px 11px 10px;border:1px solid #dbe4f6;border-radius:16px;background:#fff;box-shadow:0 12px 34px #14295238;color:#263755}
.pwa-install-icon{width:42px;height:42px;flex:0 0 42px;border-radius:11px;object-fit:cover}
.pwa-install-copy{min-width:0;flex:1}.pwa-install-copy strong{display:block;font-size:13px;line-height:1.25}.pwa-install-message{margin:4px 0 0;font-size:11px;line-height:1.4;color:#56657c}
.pwa-install-action{margin-top:8px;border:0;border-radius:8px;padding:7px 12px;background:#315bea;color:#fff;font-family:inherit;font-size:11px;font-weight:700;line-height:1.2;cursor:pointer}
.pwa-install-close{border:0;background:transparent;color:#7b899f;font-size:22px;line-height:22px;width:25px;height:25px;flex:0 0 25px;cursor:pointer}
.pwa-install-action:focus-visible,.pwa-install-close:focus-visible{outline:2px solid #315bea;outline-offset:2px}

.profile-form-panel{display:grid;gap:8px;margin-bottom:12px}.profile-form-panel .field-label{margin:4px 0 0}.profile-form-panel textarea{resize:vertical}.profile-role{border-top:1px solid #edf0f5;margin-top:4px;padding-top:12px}
.mobile-passkey-card{display:grid;gap:8px;margin:12px 0}.passkey-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:4px}.passkey-heading>div{min-width:0}.passkey-heading strong,.passkey-heading small{display:block}.passkey-heading strong{font-size:calc(13px * var(--mobile-font-scale-body, 1));line-height:1.35}.passkey-heading small{margin-top:4px;color:#8290a4;font-size:calc(10px * var(--mobile-font-scale-caption, 1));line-height:1.45}.passkey-symbol{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:#edf2ff;color:#315bea;font-size:22px;font-weight:700}.mobile-passkey-card .field-label{margin:3px 0 0}.passkey-message{font-size:calc(11px * var(--mobile-font-scale-caption, 1));color:#607086;line-height:1.4}.mobile-passkey-list{display:grid;gap:7px}.mobile-passkey-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border:1px solid #edf0f5;border-radius:10px;background:#f8f9fc}.mobile-passkey-item span,.mobile-passkey-item strong,.mobile-passkey-item small{display:block;min-width:0}.mobile-passkey-item strong{font-size:calc(11px * var(--mobile-font-scale-body, 1));overflow-wrap:anywhere}.mobile-passkey-item small{font-size:calc(10px * var(--mobile-font-scale-caption, 1));color:#8290a4;margin-top:3px}.mobile-passkey-item button{flex:none}.danger-link{color:#c33b4b}

/* Native controls use the same family as the company selector. */
button,input,select,textarea{font-family:var(--mobile-font-family)}

/* Keep period controls readable without the heavy display weight. */
.period-switch,.period-select{font-weight:500;line-height:1.3}

.personal-menu-item{width:100%;text-align:left;background:#fff;color:var(--ink);border:0;border-bottom:1px solid var(--line);cursor:pointer}.leave-request-panel{padding:14px}.leave-request-panel .button:disabled{opacity:.5;cursor:not-allowed}

.leave-tabs{margin:14px 0}.leave-request-row{margin:10px 0}.leave-request-row .section-head{margin:0}.leave-text{white-space:pre-wrap;overflow-wrap:anywhere}

/* Keep controls at a stable readable size before focus on touch devices. */
@media (any-pointer:coarse){
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),html body select,html body textarea,html body .searchable-select-input,html body .searchable-select-input:focus{font-size:max(16px,calc(16px * var(--mobile-font-scale-body,1)))!important;touch-action:manipulation}
html body input,html body textarea{user-select:text;-webkit-user-select:text}
.filter-picker{max-height:calc(100dvh - 24px);overflow-y:auto}
}

.profile-top-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.profile-top-actions .text-link{min-height:44px;margin:0;padding:8px 0}.profile-top-actions #profile-logout{color:#b34f52}

/* Personal information card follows the selected mobile background. */
#mobile-profile-form > .profile-form-panel{background:transparent;border-color:transparent;box-shadow:none}

#mobile-passkey-register,#profile-save{display:block;width:50%;margin-left:auto;margin-right:auto;white-space:normal}

/* Account status colors. */
.account-status-tab[data-account-status-tab="active"] b{color:#315bea}
.account-status-tab[data-account-status-tab="inactive"] b{color:#dc3545}
[data-live-action="unlock"]{color:#dc3545}

.profile-top-actions > .button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:10px 14px;margin-bottom:0}
#profile-logout svg{flex-shrink:0}

.account-status-tab[data-account-status-tab="pending"] b{color:#b77900}

/* Compact greeting: only greeting and shortened user name. */
#overview-header .hello-row .eyebrow,#overview-header #role-subtitle,#overview-header .date-pill{display:none}

.mobile-chat-avatar-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar-button{overflow:hidden;padding:0}.chat-avatar{overflow:hidden}.chat-bubble{white-space:pre-wrap;overflow-wrap:anywhere}.chat-composer textarea{min-width:0}.chat-conversation [data-live-messages]{max-height:55dvh;overflow-y:auto}

.account-role-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}.account-user-card .account-role-status small{margin:0;min-width:0;overflow-wrap:anywhere}.account-role-status [data-live-account]{margin-left:auto;text-align:right;flex-shrink:0;padding:4px 0}.account-user-card .row-main>strong{overflow-wrap:anywhere}

.management-sections{margin:0 0 16px}.management-sections button{flex:1;min-height:40px}.leave-embedded{padding:12px 0!important}

/* Compact user identity row. */
.account-user-card .row-main>strong{font-weight:500;line-height:1.25}.account-user-card .account-role-status{margin-top:1px;gap:8px}.account-user-card .account-role-status [data-live-account]{padding-top:1px;padding-bottom:1px}.account-user-card .profile-avatar{position:relative;width:32px;height:32px;flex:0 0 32px;border-radius:50%;overflow:hidden;font-size:11px}.account-avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.account-avatar-fallback{display:grid;place-items:center;width:100%;height:100%}

/* Pending approval notifications */
.push-dialog{width:min(92vw,480px);max-height:85dvh;overflow:auto;border:1px solid #e5eaf5;border-radius:24px;padding:24px;color:#1e293b;background:#fff;box-shadow:0 20px 70px #17255430}.push-dialog::backdrop{background:#0f172a60}.push-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.push-heading h2{font-size:20px;margin:0}.push-group{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:16px;margin:12px 0;border:1px solid #e2e8f0;border-radius:16px;background:#f5f7ff;color:#334155;text-decoration:none;font:inherit;text-align:left;box-sizing:border-box}.push-group b{color:#3156ee;background:#e8edff;padding:4px 10px;border-radius:20px}.push-controls{display:flex;flex-wrap:wrap;gap:8px}.push-status{font-size:14px;line-height:1.5}.icon-button em[hidden]{display:none!important}

.push-work-item{padding:12px;border-bottom:1px solid #e2e8f0}.push-work-item strong{display:block;font-size:15px;font-weight:500}.push-work-item small{color:#64748b}