:root{--navy:#09192c;--black:#0a0a0a;--steel-grey:#1b1c1c;--jeep-grey:#6f6d67;--sting-grey:#6f828b;--celestial-blue:#2c456b;--white:#fff;--cream:#f5f3ee;--bg:#f2f1ec;--card-bg:#fff;--border:#dad8d0;--text:#1b1c1c;--text-muted:#6f6d67;--danger:#b30000;--success:#2f7a4f;--warning:#9c6b00;--radius:12px;--font-head:"Prata", Georgia, "Times New Roman", serif;--font-body:"Raleway", Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;margin:0}h1,h2,h3{font-family:var(--font-head);color:var(--navy);margin:0 0 8px;font-weight:400}h1{letter-spacing:.5px;font-size:26px}h2{font-size:20px}h3{font-size:16px}p{line-height:1.5}a{color:var(--celestial-blue)}button,input,select,textarea{font-family:var(--font-body);font-size:16px}.app-shell{flex-direction:column;min-height:100%;display:flex}.topbar{background:var(--navy);color:var(--cream);padding:max(10px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex;position:sticky;top:0;box-shadow:0 2px 8px #00000026}@media (width<=720px){.topbar{padding:10px 14px}.topbar-nav{order:3;width:100%}.topbar-user{order:2;margin-left:auto}}@media (width<=420px){.topbar-brand .wordmark{font-size:14px}.topbar-user{gap:6px;font-size:12px}.topbar-user .role-pill{display:none}}.topbar-brand{align-items:center;gap:10px;display:flex}.topbar-brand .wordmark{font-family:var(--font-head);letter-spacing:1.5px;white-space:nowrap;font-size:17px}.topbar-nav{flex-wrap:wrap;gap:6px;display:flex}.topbar-nav a,.topbar-nav button.navlink{color:var(--cream);letter-spacing:.4px;cursor:pointer;opacity:.85;background:0 0;border:none;border-radius:8px;padding:8px 12px;font-size:13.5px;text-decoration:none}.topbar-nav a.active,.topbar-nav a:hover,.topbar-nav button.navlink:hover{opacity:1;background:#ffffff1f}.topbar-user{align-items:center;gap:10px;font-size:13px;display:flex}.topbar-user .role-pill{background:var(--celestial-blue);text-transform:uppercase;letter-spacing:.5px;border-radius:999px;padding:3px 9px;font-size:11px}.main{width:100%;max-width:980px;padding:24px max(18px, env(safe-area-inset-right)) max(60px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));flex:1;margin:0 auto}@media (width<=480px){.main{padding:16px 12px 48px}h1{font-size:21px}.card{padding:16px}}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;padding:20px;box-shadow:0 1px 3px #09192c0f}.card-danger-zone{border-color:var(--danger);background:#fff8f8}.card-danger-zone h2{color:var(--danger)}.card-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}.field{margin-bottom:16px}.field label{color:var(--navy);letter-spacing:.2px;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.field .req{color:var(--danger)}.field input[type=text],.field input[type=date],.field input[type=email],.field input[type=password],.field input[type=number],.field select,.field textarea{border:1px solid var(--border);width:100%;color:var(--text);background:#fff;border-radius:8px;padding:12px}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--celestial-blue);outline-offset:1px}.field .hint{color:var(--text-muted);margin-top:4px;font-size:12px}.grid-2{grid-template-columns:1fr 1fr;gap:0 16px;display:grid}@media (width<=640px){.grid-2{grid-template-columns:1fr}}.btn{letter-spacing:.3px;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:13px 22px;font-size:14.5px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--celestial-blue);color:#fff}.btn-primary:hover{background:#23385a}.btn-navy{background:var(--navy);color:var(--cream)}.btn-danger{background:var(--danger);color:#fff}.btn-outline{color:var(--navy);border:1.5px solid var(--navy);background:0 0}.btn-ghost{color:var(--celestial-blue);background:0 0}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-block{width:100%}.btn-sm{min-height:36px;padding:8px 14px;font-size:13px}.table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.items-table{border-collapse:collapse;width:100%;min-width:480px;margin-bottom:10px}.items-table th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:2px solid var(--border);padding:6px 8px;font-size:11.5px}.items-table td{vertical-align:top;padding:6px}.items-table td input{width:100%}.items-table .col-no{text-align:center;width:32px;color:var(--text-muted);padding-top:14px;font-size:13px}.items-table .col-uom{width:90px}.items-table .col-qty{width:80px}.items-table .col-remove{width:36px}.remove-row-btn{color:var(--danger);cursor:pointer;background:0 0;border:none;padding:8px;font-size:18px}.urgent-toggle{background:#fff3f0;border:1.5px solid #f0c4bb;border-radius:10px;align-items:center;gap:10px;margin-bottom:16px;padding:12px 14px;display:flex}.urgent-toggle input{width:20px;height:20px}.urgent-toggle .label{color:var(--danger);font-weight:700}.urgent-toggle .sub{color:var(--text-muted);font-size:12px}.status-badge{letter-spacing:.4px;text-transform:uppercase;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:700;display:inline-block}.status-pending_production{color:#9c6b00;background:#fff3d6}.status-pending_coo{color:var(--celestial-blue);background:#dde7f4}.status-approved{color:var(--success);background:#dcf0e3}.status-rejected{color:var(--danger);background:#fbdada}.status-declined{background:var(--danger);color:#fff}.urgent-badge{letter-spacing:.6px;background:var(--danger);color:#fff;border-radius:999px;margin-left:8px;padding:4px 10px;font-size:11px;font-weight:800;display:inline-block}.req-list-item{border-bottom:1px solid var(--border);color:inherit;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:14px 4px;text-decoration:none;display:flex}.req-list-item:last-child{border-bottom:none}.req-list-item .num{font-family:var(--font-head);color:var(--navy);font-size:18px}.req-list-item .meta{color:var(--text-muted);margin-top:2px;font-size:12.5px}.empty-state{text-align:center;color:var(--text-muted);padding:40px 20px}.attachment-list{margin:0;padding:0;list-style:none}.attachment-list li{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:2px 6px;padding:8px 0;display:flex}.attachment-list li:last-child{border-bottom:none}.attachment-list .meta{color:var(--text-muted);font-size:12.5px}.attachment-list .remove-row-btn{margin-left:auto}.link-btn{cursor:pointer;color:var(--celestial-blue);font-size:inherit;background:0 0;border:none;margin:0;padding:0;font-family:inherit;text-decoration:underline}.error-banner{color:#7a1414;background:#fbdada;border:1px solid #f0aaa0;border-radius:8px;margin-bottom:16px;padding:10px 14px;font-size:13.5px}.success-banner{color:#185c33;background:#dcf0e3;border:1px solid #b6e0c5;border-radius:8px;margin-bottom:16px;padding:10px 14px;font-size:13.5px}.offline-banner{background:var(--steel-grey);color:var(--cream);border-radius:8px;align-items:center;gap:8px;margin-bottom:16px;padding:8px 14px;font-size:13px;display:flex}.setup-banner{border:1px solid var(--border);border-radius:var(--radius);background:#eef3f8;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;max-width:980px;margin:20px auto 0;padding:14px 18px;display:flex}.setup-banner-text{color:var(--navy);flex-direction:column;gap:8px;font-size:13.5px;display:flex}.setup-banner-hint{color:var(--text-muted);margin-top:2px;font-size:12px;font-weight:400}.setup-banner-actions{flex-wrap:wrap;gap:8px;display:flex}@media (width<=480px){.setup-banner{flex-direction:column;align-items:stretch;margin:16px 12px 0}}.auth-wrap{background:var(--navy);min-height:100dvh;padding:max(40px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));justify-content:center;align-items:center;display:flex}.auth-card{border-radius:var(--radius);background:#fff;width:100%;max-width:420px;padding:32px 28px;box-shadow:0 10px 40px #00000059}.auth-logo{flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;display:flex}.auth-logo .wordmark{font-family:var(--font-head);color:var(--navy);letter-spacing:1.5px;font-size:20px}.auth-logo .tagline{color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;font-size:11.5px}.auth-switch{text-align:center;color:var(--text-muted);margin-top:14px;font-size:13.5px}.role-note{text-align:center;color:var(--text-muted);margin-bottom:18px;font-size:13px;line-height:1.6}.role-note strong{color:var(--navy)}.verify-result{text-align:center}.verify-result-icon{border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:32px;font-weight:700;line-height:1;display:flex}.verify-result-icon-ok{color:var(--success);background:#dcf0e3}.verify-result-icon-error{color:var(--danger);background:#fbdada}.verify-result-title{font-family:var(--font-head);color:var(--navy);margin:0 0 8px;font-size:21px}.verify-result-sub{color:var(--text-muted);margin:0;font-size:14px;line-height:1.6}@media (width<=480px),(height<=700px){.auth-wrap{padding:max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));align-items:flex-start}.auth-card{padding:24px 18px}}.pdf-stamp-preview{border:3px solid var(--danger);color:var(--danger);font-family:var(--font-head);letter-spacing:2px;opacity:.85;border-radius:4px;padding:4px 14px;font-weight:700;display:inline-block;transform:rotate(-6deg)}.settings-grid{grid-template-columns:1fr 1fr;gap:0 16px;display:grid}@media (width<=640px){.settings-grid{grid-template-columns:1fr}}.table-simple{border-collapse:collapse;width:100%}.table-simple th{text-align:left;color:var(--text-muted);border-bottom:2px solid var(--border);padding:8px;font-size:12px}.table-simple td{border-bottom:1px solid var(--border);padding:8px;font-size:13.5px}.spinner-wrap{color:var(--text-muted);justify-content:center;padding:40px;display:flex}