:root{--primary:#f3701e;--primary-hover:#d65b14;--primary-glow:#f3701e26;--primary-light:#f3701e0f;--primary-border:#f3701e33;--bg-app:#f8fafc;--bg-card:#fff;--border-card:#e8d8c9;--text-main:#374151;--text-title:#1f2937;--text-muted:#6b7280;--shadow-sm:0 1px 3px #0000000d;--shadow-md:0 8px 30px #4b607f0d;--shadow-lg:0 20px 40px #4b607f14;--shadow-glow:0 0 25px #f3701e14;--glass-blur:blur(16px);--input-bg:#fdfcfb;--input-border:#e8d8c9;--input-focus:#4b607f;--accent-blue:#4b607f;--accent-blue-hover:#3b4d66;--accent-blue-light:#4b607f14;--accent-blue-border:#4b607f33;--success:#10b981;--success-bg:#10b98114;--success-border:#10b98133;--danger:#ef4444;--danger-bg:#ef444414;--danger-border:#ef444433;--font-sans:"Inter", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}[data-theme=dark]{--bg-app:#121315;--bg-card:#1c1d21;--border-card:#e8d8c91a;--text-main:#d1c9bf;--text-title:#fbfaf8;--text-muted:#8e8982;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 10px 15px -3px #0006, 0 4px 6px -2px #0000004d;--shadow-lg:0 25px 30px -5px #00000080, 0 15px 15px -5px #0006;--shadow-glow:0 0 30px #f3701e26;--input-bg:#121315;--input-border:#e8d8c926;--input-focus:#4b607f;--accent-blue:#4b607f;--accent-blue-hover:#60738f;--accent-blue-light:#4b607f26;--success-bg:#10b98126;--danger-bg:#ef444426}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--text-main);background-color:var(--bg-app);background-image:linear-gradient(90deg,#4b607f05 1px,#0000 1px),linear-gradient(#4b607f05 1px,#0000 1px);background-size:40px 40px;background-attachment:fixed;min-height:100vh;padding-bottom:3rem;font-size:16px;line-height:1.6;transition:background-color .3s,color .3s;animation:180s linear infinite moveGrid;position:relative;overflow-x:hidden}body:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 30%,#f3701e0a 0%,#0000 50%),radial-gradient(circle at 80% 70%,#4b607f08 0%,#0000 50%);width:100%;height:100%;animation:25s ease-in-out infinite alternate pulseGlow;position:fixed;top:0;left:0}[data-theme=dark] body{background-color:var(--bg-app);background-image:linear-gradient(90deg,#e8d8c904 1px,#0000 1px),linear-gradient(#e8d8c904 1px,#0000 1px)}[data-theme=dark] body:before{background:radial-gradient(circle at 20% 30%,#f3701e0d 0%,#0000 50%),radial-gradient(circle at 80% 70%,#4b607f0d 0%,#0000 50%)}@keyframes moveGrid{0%{background-position:0 0}to{background-position:40px 80px}}@keyframes pulseGlow{0%{opacity:.8;transform:scale(1)translate(0)}50%{opacity:1;transform:scale(1.15)translate(3%,-4%)}to{opacity:.8;transform:scale(.9)translate(-3%,4%)}}#root{width:100%;max-width:1100px;margin:0 auto;padding:2rem 1.5rem}#root:has(.desktop-preview-active){max-width:min(1480px,100%);padding:1.25rem 1rem 2rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--input-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}.header{-webkit-backdrop-filter:blur(12px);color:var(--text-title);background:linear-gradient(135deg,#fdf6f0f2 0%,#fffffff2 100%);border:1px solid #f3701e2e;border-radius:50px;justify-content:space-between;align-items:center;margin-bottom:2.5rem;padding:.85rem 2rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 10px 30px #f3701e0f,inset 0 1px 2px #fff9}[data-theme=dark] .header{-webkit-backdrop-filter:blur(12px);color:var(--text-title);background:linear-gradient(135deg,#18191ce6 0%,#121315e6 100%);border:1px solid #ffffff14;box-shadow:0 10px 30px #00000073,inset 0 1px 2px #ffffff0d}.logo-container{flex-direction:column;align-items:flex-start;gap:.25rem;display:flex}.logo-text{letter-spacing:.15em;color:var(--text-title);font-family:Inter,sans-serif;font-size:1.75rem;font-weight:800;line-height:1}.logo-subtext{text-transform:uppercase;letter-spacing:.3em;color:var(--primary);font-size:.7rem;font-weight:600}.card{background:var(--bg-card);border:1px solid var(--border-card);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-md);border-radius:1.25rem;margin-bottom:2rem;padding:2.25rem;transition:border-color .3s,box-shadow .3s}.card:hover{border-color:var(--primary-border);box-shadow:var(--shadow-lg), var(--shadow-glow)}.card-title{color:var(--text-title);border-bottom:1px solid var(--border-card);align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:.75rem;font-size:1.35rem;font-weight:700;display:flex}.approval-inbox-card{margin-bottom:.25rem;padding:1.5rem}.approval-inbox-card-content{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:1rem;display:grid}.approval-inbox-card-main{flex-direction:column;gap:4px;min-width:0;display:flex}.approval-inbox-card-meta,.approval-inbox-card-companies{color:var(--text-muted);overflow-wrap:anywhere}.approval-inbox-card-meta{font-size:.8rem}.approval-inbox-card-title{color:var(--text-title);overflow-wrap:anywhere;margin:0;font-size:1.05rem;font-weight:700;line-height:1.35}.approval-inbox-card-companies{margin-top:2px;font-size:.82rem}.approval-inbox-card-actions{grid-template-columns:36px auto;justify-self:end;align-items:center;gap:.5rem;display:grid}.approval-inbox-card-actions .btn-icon-only{width:36px;height:36px;min-height:36px;padding:0}.approval-inbox-review-btn{white-space:nowrap;min-width:204px;min-height:36px;padding:.4rem 1rem;font-size:.85rem}.request-history-card{margin-bottom:.25rem;padding:1.5rem}.request-history-card-header,.request-history-card-footer{grid-template-columns:minmax(0,1fr) auto;gap:1rem;display:grid}.request-history-card-header{align-items:start}.request-history-card-footer{border-top:1px solid var(--border-card);align-items:center;margin-top:1rem;padding-top:.75rem}.request-history-card-main{flex-direction:column;gap:4px;min-width:0;display:flex}.request-history-card-meta,.request-history-card-companies,.request-history-card-signers{color:var(--text-muted);overflow-wrap:anywhere}.request-history-card-meta,.request-history-card-signers{font-size:.8rem}.request-history-card-title{color:var(--text-title);overflow-wrap:anywhere;margin:0;font-size:1.05rem;font-weight:700;line-height:1.35}.request-history-card-companies{margin-top:2px;font-size:.82rem}.request-history-card-status{text-align:right;justify-self:end;min-width:188px}.request-history-status-badge{white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;gap:4px;max-width:100%;min-height:28px;padding:.2rem .6rem;font-size:.8rem;font-weight:700;line-height:1.2;display:inline-flex}.request-history-status-draft{color:#475569;background:#f1f5f9}.request-history-status-approved{background:var(--success-bg);color:var(--success)}.request-history-status-rejected{background:var(--danger-bg);color:var(--danger)}.request-history-status-progress{background:var(--primary-light);color:var(--primary)}.request-history-card-actions{grid-template-columns:repeat(3,34px);justify-content:end;gap:.5rem;display:grid}.request-history-card-actions .btn-icon-only{width:34px;height:34px;min-height:34px;padding:0}.drafts-toolbar{flex-direction:column;gap:.85rem;margin-bottom:.35rem;display:flex}.drafts-toolbar-header{min-width:0}.drafts-title{color:var(--text-title);white-space:nowrap;margin:0;font-size:1.35rem;line-height:1.25}.drafts-toolbar-subtitle{color:var(--text-muted);margin:.25rem 0 0;font-size:.82rem}.drafts-toolbar-actions{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.5rem;display:flex}.drafts-action-btn{white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:.35rem;min-height:38px;padding:.35rem 1rem;font-size:.84rem;font-weight:700;display:inline-flex;box-shadow:0 5px 14px #0f172a0f}.drafts-delete-selected-btn{color:#fff;background:#ef4444;border:1px solid #ef4444;box-shadow:0 8px 18px #ef444433}.drafts-delete-selected-btn:hover:not(:disabled){background:#dc2626;border-color:#dc2626;transform:translateY(-1px)}.drafts-delete-selected-btn:disabled{color:#9ca3af;border-color:var(--input-border);box-shadow:none;opacity:1;cursor:not-allowed;background:#f8fafc;transform:none}.draft-card{margin-bottom:.25rem;padding:1.5rem;transition:border-color .2s,box-shadow .2s,background-color .2s}.draft-card-selected{border-color:var(--accent-blue);background:linear-gradient(180deg, #4b607f14, #fff0), var(--bg-card);box-shadow:0 0 0 1px #4b607f2e,0 10px 24px #4b607f1f}.draft-card-main{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.75rem;min-width:0;display:grid}.draft-select-toggle{border:1px solid var(--border-card);background:var(--bg-card);width:34px;height:34px;color:var(--text-muted);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;transition:color .2s,border-color .2s,background-color .2s,transform .2s;display:inline-flex}.draft-select-toggle:hover{color:var(--accent-blue);border-color:var(--accent-blue);transform:translateY(-1px)}.draft-select-toggle.selected{color:#fff;border-color:var(--accent-blue);background:var(--accent-blue)}.approver-history-card{margin-bottom:.25rem;padding:1.5rem}.approver-history-card-header,.approver-history-card-footer{grid-template-columns:minmax(0,1fr) auto;gap:1rem;display:grid}.approver-history-card-header{align-items:start}.approver-history-card-footer{border-top:1px solid var(--border-card);align-items:center;margin-top:1rem;padding-top:.75rem}.approver-history-card-main{flex-direction:column;gap:4px;min-width:0;display:flex}.approver-history-card-meta,.approver-history-card-companies,.approver-history-card-reviewers{color:var(--text-muted);overflow-wrap:anywhere}.approver-history-card-meta,.approver-history-card-reviewers{font-size:.8rem}.approver-history-card-title{color:var(--text-title);overflow-wrap:anywhere;margin:0;font-size:1.05rem;font-weight:700;line-height:1.35}.approver-history-card-companies{margin-top:2px;font-size:.82rem}.approver-history-card-status{text-align:right;justify-self:end;min-width:148px}.approver-history-status-badge{white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;max-width:100%;min-height:28px;padding:.2rem .6rem;font-size:.8rem;font-weight:700;line-height:1.2;display:inline-flex}.approver-history-status-approved{background:var(--success-bg);color:var(--success)}.approver-history-status-rejected{background:var(--danger-bg);color:var(--danger)}.approver-history-card-actions{grid-template-columns:minmax(152px,auto) repeat(3,34px);justify-content:end;gap:.5rem;display:grid}.approver-history-details-btn{white-space:nowrap;min-height:34px;padding:.2rem .8rem;font-size:.8rem}.approver-history-card-actions .btn-icon-only{width:34px;height:34px;min-height:34px;padding:0}@media (width<=720px){.approval-inbox-card-content{grid-template-columns:1fr}.approval-inbox-card-actions{justify-self:stretch;width:100%}.approval-inbox-review-btn{width:100%;min-width:0}.request-history-card-header,.request-history-card-footer{grid-template-columns:1fr}.request-history-card-status{text-align:left;justify-self:stretch;min-width:0}.request-history-status-badge{white-space:normal;justify-content:flex-start}.request-history-card-actions{justify-content:start}.drafts-toolbar-actions{justify-content:flex-start}.approver-history-card-header,.approver-history-card-footer{grid-template-columns:1fr}.approver-history-card-status{text-align:left;justify-self:stretch;min-width:0}.approver-history-status-badge{white-space:normal;justify-content:flex-start}.approver-history-card-actions{grid-template-columns:minmax(0,1fr) repeat(3,34px);justify-content:start}.approver-history-details-btn{min-width:0}}.form-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.5rem;display:grid}.form-group-full{grid-column:span 2}.input-container{flex-direction:column;display:flex;position:relative}.input-label{color:var(--text-title);margin-bottom:.5rem;font-size:.9rem;font-weight:600}.form-input,.form-textarea,.form-select{background-color:var(--input-bg);border:1.5px solid var(--input-border);width:100%;font-family:var(--font-sans);color:var(--text-main);border-radius:.75rem;outline:none;min-height:48px;padding:.8rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-textarea{resize:vertical;tab-size:4;min-height:120px}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--primary-glow)}.btn{font-family:var(--font-sans);cursor:pointer;border:none;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;min-height:48px;padding:.8rem 1.75rem;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--accent-blue);color:#fff;box-shadow:0 4px 12px #4b607f40}.btn-primary:hover{background-color:var(--accent-blue-hover);transform:translateY(-1px);box-shadow:0 6px 16px #4b607f59}.btn-secondary{background-color:var(--input-bg);border:1.5px solid var(--input-border);color:var(--text-main)}.btn-secondary:hover{border-color:var(--accent-blue);color:var(--accent-blue);background-color:var(--accent-blue-light)}.btn-danger{background-color:var(--danger);color:#fff}.btn-danger:hover{opacity:.9}.btn-icon-only{border-radius:50%;width:40px;height:40px;min-height:40px;padding:0}.theme-toggle{background:var(--bg-card);border:1px solid var(--border-card);color:var(--text-main);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:.5rem;transition:all .2s;display:flex}.theme-toggle:hover{color:var(--accent-blue);border-color:var(--accent-blue);transform:rotate(15deg)}.header .user-profile-header{-webkit-backdrop-filter:blur(8px);transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--text-title)!important;background:#f3701e0d!important;border:1px solid #f3701e26!important;border-radius:50px!important;padding:.4rem 1.2rem!important}[data-theme=dark] .header .user-profile-header{background:#ffffff08!important;border:1px solid #ffffff14!important}.header .user-profile-header:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f3701e0d;background:#f3701e14!important;border-color:#f3701e40!important}[data-theme=dark] .header .user-profile-header:hover{box-shadow:none;background:#ffffff0f!important;border-color:#ffffff26!important}.header .user-profile-header span{color:var(--text-title)!important}.header .user-profile-header span:last-child{color:var(--text-muted)!important}.header .user-profile-avatar{border:none;font-weight:700;box-shadow:0 2px 4px #f3701e26;background-color:var(--primary)!important;color:#fff!important}.header .theme-toggle,.header .btn-secondary{-webkit-backdrop-filter:blur(8px);color:var(--text-title)!important;background:#f3701e0d!important;border:1px solid #f3701e26!important;border-radius:50px!important;font-weight:600!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}[data-theme=dark] .header .theme-toggle,[data-theme=dark] .header .btn-secondary{color:var(--text-title)!important;background:#ffffff08!important;border:1px solid #ffffff14!important}.header .theme-toggle:hover,.header .btn-secondary:hover{transform:translateY(-1px);box-shadow:0 4px 10px #f3701e14;border-color:var(--primary)!important;color:var(--primary)!important;background:#f3701e1a!important}[data-theme=dark] .header .theme-toggle:hover,[data-theme=dark] .header .btn-secondary:hover{box-shadow:none;border-color:var(--primary)!important;color:var(--primary)!important;background:#ffffff0f!important}.header .user-profile-header button:hover{color:var(--danger)!important}.tab-navigation{border-bottom:2px solid var(--border-card);gap:2rem;margin-bottom:2.5rem;display:flex}.tab-item{font-family:var(--font-sans);color:var(--text-muted);cursor:pointer;background:0 0;border:none;outline:none;align-items:center;gap:.5rem;padding:.75rem .25rem;font-size:1.05rem;font-weight:600;transition:all .2s;display:flex;position:relative}.tab-item:after{content:"";background-color:var(--primary);border-radius:3px 3px 0 0;width:100%;height:3px;transition:transform .25s cubic-bezier(.4,0,.2,1);position:absolute;bottom:-2px;left:0;transform:scaleX(0)}.tab-item:hover{color:var(--primary)}.tab-item.active{color:var(--primary);font-weight:700}.tab-item.active:after{transform:scaleX(1)}.tab-badge-unread{background:var(--danger);color:#fff;border-radius:20px;justify-content:center;align-items:center;padding:.15rem .5rem;font-size:.75rem;font-weight:700;line-height:1;display:inline-flex}.tab-badge-count{color:var(--text-main);background:#0000000f;border-radius:20px;justify-content:center;align-items:center;padding:.15rem .5rem;font-size:.75rem;font-weight:700;line-height:1;display:inline-flex}[data-theme=dark] .tab-badge-count{color:var(--text-main);background:#ffffff14}.tab-dropdown-container{display:inline-block;position:relative}.tab-dropdown-menu{background-color:var(--bg-card);border:1px solid var(--border-card);box-shadow:var(--shadow-lg);z-index:999;border-radius:.75rem;flex-direction:column;min-width:260px;margin-top:.5rem;padding:.35rem 0;animation:.2s cubic-bezier(.16,1,.3,1) fadeInDropdown;display:flex;position:absolute;top:100%;right:0;overflow:hidden}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.tab-dropdown-item{color:var(--text-main);font-family:var(--font-sans);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:.75rem;width:100%;padding:.75rem 1.25rem;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.tab-dropdown-item:hover{background-color:var(--primary-light);color:var(--primary)}.tab-dropdown-item.active{background-color:var(--primary-light);color:var(--primary);font-weight:700}.empty-state-card{background:var(--bg-card);border:1px solid var(--border-card);text-align:center;box-shadow:var(--shadow-sm);border-radius:1.25rem;flex-direction:column;justify-content:center;align-items:center;padding:4.5rem 2rem;transition:all .3s;display:flex}.empty-state-card:hover{border-color:var(--primary-border);box-shadow:var(--shadow-md), var(--shadow-glow)}.empty-state-icon-wrapper{background-color:var(--success-bg);width:72px;height:72px;color:var(--success);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.5rem;animation:2s infinite alternate pulseSuccess;display:flex;box-shadow:0 4px 10px #10b9811a}@keyframes pulseSuccess{0%{transform:scale(1);box-shadow:0 4px 10px #10b9811a}to{transform:scale(1.05);box-shadow:0 4px 16px #10b98140}}.empty-state-title{color:var(--text-title);margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.empty-state-subtitle{color:var(--text-muted);font-size:.95rem}.tab-container{border-bottom:2px solid var(--border-card)!important}.dropzone{border:2px dashed var(--input-border);text-align:center;background:var(--primary-light);cursor:pointer;border-radius:1rem;flex-direction:column;align-items:center;gap:.75rem;padding:2rem;transition:border-color .2s,background-color .2s;display:flex}.dropzone.dragover{border-color:var(--primary);background:#f3701e1a}.dropzone-icon{color:var(--primary)}.dropzone-text{color:var(--text-title);font-weight:500}.dropzone-hint{color:var(--text-muted);font-size:.85rem}.file-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-top:1rem;display:grid}.file-card{background:var(--input-bg);border:1px solid var(--input-border);border-radius:.5rem;justify-content:space-between;align-items:center;gap:.5rem;padding:.75rem;font-size:.85rem;display:flex}.file-card-info{align-items:center;gap:.5rem;display:flex;overflow:hidden}.file-card-name{color:var(--text-title);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.photos-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1rem;display:grid}.photo-slot{border:1px dashed var(--input-border);background:var(--input-bg);border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:200px;padding:1.5rem;display:flex;position:relative;overflow:hidden}.photo-preview{object-fit:contain;border-radius:.5rem;width:100%;height:200px}.photo-actions{z-index:10;gap:.5rem;display:flex;position:absolute;top:.5rem;right:.5rem}.camera-preview-container{background:#000;border-radius:.5rem;width:100%;height:200px;position:relative;overflow:hidden}.camera-stream{object-fit:cover;width:100%;height:100%}.approval-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.05rem;display:grid}.approval-checkbox-label{background:linear-gradient(180deg, #ffffffb8, #fff0), var(--input-bg);border:1.5px solid var(--input-border);cursor:pointer;min-height:84px;color:var(--text-title);border-radius:.8rem;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:.85rem;padding:.95rem 1rem;font-weight:500;transition:border-color .2s,background-color .2s,box-shadow .2s,transform .2s;display:grid;position:relative;overflow:hidden}.approval-checkbox-label:before{content:"";background:0 0;width:4px;transition:background-color .2s;position:absolute;inset:0 auto 0 0}.approval-checkbox-label:hover{border-color:var(--accent-blue);background:var(--accent-blue-light);transform:translateY(-1px)}.approval-checkbox-label.checked{border-color:var(--accent-blue);background:linear-gradient(180deg, #ffffffc7, #ffffff14), var(--accent-blue-light);box-shadow:0 0 0 1px #4b607f2e,0 8px 18px #4b607f1f}.approval-checkbox-label.checked:before{background:var(--accent-blue)}.approval-checkbox-label input[type=checkbox]{opacity:0;pointer-events:none;position:absolute}.approval-checkbox-box{background:#fff;border:1.5px solid #9ca3af;border-radius:5px;width:20px;height:20px;transition:border-color .2s,background-color .2s,box-shadow .2s;position:relative;box-shadow:inset 0 1px 1px #0f172a0a}.approval-checkbox-label.checked .approval-checkbox-box{border-color:var(--accent-blue);background:var(--accent-blue);box-shadow:0 3px 8px #4b607f38}.approval-checkbox-box:after{content:"";opacity:0;border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:10px;transition:opacity .15s,transform .15s;position:absolute;top:2px;left:6px;transform:rotate(45deg)scale(.85)}.approval-checkbox-label.checked .approval-checkbox-box:after{opacity:1;transform:rotate(45deg)scale(1)}.approval-checkbox-text{flex-direction:column;justify-content:center;align-items:center;gap:.12rem;width:100%;min-width:0;height:100%;display:flex}.approval-checkbox-role-thai,.approval-checkbox-role-eng{width:100%;color:var(--text-title);font-size:.9rem;font-weight:700;line-height:1.28;display:block}.approval-checkbox-role-thai{white-space:nowrap;letter-spacing:0}.approval-checkbox-role-eng{color:var(--text-muted);white-space:nowrap;font-size:.82rem;line-height:1.1}.approval-checkbox-role-sm{font-size:.76rem;line-height:1.14}.approval-checkbox-role-xs{font-size:.68rem;line-height:1.1}@media (width<=900px){.approval-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.approval-list{grid-template-columns:1fr}}.signature-card{border-left:4px solid var(--accent-blue)}.signature-container{border:1.5px solid var(--input-border);background:#fff;border-radius:.75rem;width:100%;height:180px;margin-bottom:.75rem;position:relative}.signature-canvas{cursor:crosshair;width:100%;height:100%;display:block}.signature-overlay-text{color:#94a3b8;pointer-events:none;text-align:center;font-size:.9rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.signature-controls{justify-content:flex-end;gap:.5rem;display:flex}.approver-decision{gap:1rem;margin-bottom:1.25rem;display:flex}.decision-btn{border:1.5px solid var(--input-border);background:var(--input-bg);color:var(--text-main);cursor:pointer;border-radius:.5rem;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.75rem;font-weight:600;transition:all .2s;display:flex}.decision-btn.approve.active{background-color:var(--success-bg);border-color:var(--success);color:var(--success)}.decision-btn.reject.active{background-color:var(--danger-bg);border-color:var(--danger);color:var(--danger)}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#0f172a99;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-app);border:1px solid var(--border-card);width:100%;max-width:900px;max-height:90vh;box-shadow:var(--shadow-lg);border-radius:1.25rem;flex-direction:column;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--border-card);background:var(--bg-card);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-body{flex-grow:1;padding:1.5rem;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-card);background:var(--bg-card);justify-content:flex-end;gap:1rem;padding:1.25rem 1.5rem;display:flex}.form-actions{justify-content:center;gap:1.5rem;margin-top:2rem;display:flex}.sticky-action-bar{z-index:50;background:var(--bg-card);border:1.5px solid var(--border-card);box-shadow:var(--shadow-lg), var(--shadow-glow);-webkit-backdrop-filter:blur(12px);border-radius:.75rem;justify-content:space-between;align-items:center;margin-top:1.5rem;margin-bottom:0;padding:.75rem 1.25rem;transition:all .3s;display:flex;position:sticky;bottom:0}[data-theme=light] .sticky-action-bar{background:#ffffffd9}[data-theme=dark] .sticky-action-bar{background:#1c1d21d9}.sticky-action-bar-status{align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;transition:color .3s;display:flex}.sticky-action-bar-buttons{flex-wrap:nowrap;align-items:center;gap:1rem;display:flex}@media (width<=768px){.sticky-action-bar-buttons{flex-wrap:wrap;justify-content:flex-end}}@keyframes spin-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mini-spinner{border:2px solid #0000;border-top-color:var(--primary);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin-rotate}.print-only{display:none}@media print{@page{size:A4;margin:0}html,body{color:#000!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;background:#fff!important;margin:0!important;padding:0!important;font-family:Sarabun,Inter,sans-serif!important;font-size:11pt!important;line-height:1.4!important}.hide-on-print{display:none!important}.print-only{display:block!important}#root{max-width:100%!important;margin:0!important;padding:0!important}.memo-document{box-sizing:border-box!important;width:210mm!important;height:296mm!important;min-height:296mm!important;max-height:296mm!important;box-shadow:none!important;page-break-inside:avoid!important;page-break-after:always!important;background:#fff!important;border:1.5px solid #000!important;flex-direction:column!important;justify-content:space-between!important;margin:0 auto!important;padding:0!important;display:flex!important;position:relative!important;overflow:hidden!important}.memo-body{box-sizing:border-box!important;flex-direction:column!important;flex-grow:1!important;justify-content:space-between!important;min-height:0!important;padding:0 15mm 2mm!important;display:flex!important}.memo-content-area{word-break:break-all!important;word-wrap:break-word!important;overflow-wrap:break-word!important;white-space:pre-wrap!important;box-sizing:border-box!important;tab-size:4!important;flex-grow:1!important;width:100%!important;max-width:100%!important;min-height:0!important;margin-bottom:.35rem!important}.memo-bottom-block{flex-shrink:0!important;width:100%!important;padding-bottom:0!important;position:absolute!important;bottom:3mm!important;left:0!important;right:0!important}.memo-signatures-container{width:100%!important;margin-left:auto!important;margin-right:auto!important}.page-break{page-break-before:always}}.memo-document{color:#1e293b;box-shadow:var(--shadow-md);box-sizing:border-box;background:#fff;border:1.5px solid #000;border-radius:0;flex-direction:column;justify-content:space-between;width:210mm;height:297mm;min-height:297mm;max-height:297mm;margin:2rem auto;padding:0;display:flex;position:relative;overflow:hidden}.memo-body{box-sizing:border-box;flex-direction:column;flex-grow:1;justify-content:space-between;min-height:0;padding:0 15mm 2mm;display:flex}.memo-bottom-block{flex-shrink:0;width:100%;padding-bottom:0;position:absolute;bottom:3mm;left:0;right:0}.memo-signatures-container{width:100%;margin-left:auto;margin-right:auto}@media (width<=768px){.memo-document{width:100%;min-height:auto;margin:1rem auto;padding:1.5rem;display:block}}.memo-header-table{border-collapse:collapse;width:100%;margin-bottom:1.5rem}.memo-header-table td{vertical-align:middle;padding:.5rem}.memo-title-block{text-align:right;vertical-align:bottom}.memo-title-th{color:#0f172a;letter-spacing:2px;font-size:1.8rem;font-weight:800}.memo-title-en{color:#64748b;letter-spacing:3px;text-transform:uppercase;font-size:.9rem}.memo-meta-grid{border-top:3px double #0f172a;border-bottom:3px double #0f172a;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:2rem;padding:.75rem 0;font-size:1rem;display:grid}.memo-meta-item{gap:.5rem;display:flex}.memo-meta-label{color:#000;white-space:nowrap;font-weight:700}.memo-meta-value{color:#1e293b;border-bottom:1px dotted #cbd5e1;flex-grow:1}.memo-content-area{white-space:pre-wrap;word-break:break-all;word-wrap:break-word;overflow-wrap:break-word;box-sizing:border-box;color:#1e293b;tab-size:4;flex-grow:1;width:100%;max-width:100%;min-height:0;margin-bottom:.35rem;font-size:1.05rem;line-height:1.6}.memo-photos-section{border-top:1px solid #e2e8f0;margin-bottom:2.5rem;padding-top:1.5rem}.memo-photos-section-title{color:#0f172a;margin-bottom:1rem;font-size:1.1rem;font-weight:700}.memo-photos-layout{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.memo-photo-container{text-align:center;background:#f8fafc;border:1px solid #cbd5e1;border-radius:.25rem;padding:.5rem}.memo-photo-img{object-fit:contain;max-width:100%;max-height:250px}.memo-signatures-grid{border-top:1px solid #cbd5e1;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;padding-top:2rem;display:grid}.memo-signature-block{text-align:center;background:#fff;border:1px solid #cbd5e1;border-radius:.25rem;flex-direction:column;justify-content:space-between;align-items:center;min-height:160px;padding:1rem;font-size:.85rem;display:flex}.memo-sig-role{color:#0f172a;border-bottom:1px solid #e2e8f0;width:100%;margin-bottom:.5rem;padding-bottom:.25rem;font-weight:700}.memo-sig-img{object-fit:contain;max-width:120px;max-height:50px;margin:.5rem 0}.memo-sig-status{text-transform:uppercase;border-radius:.25rem;margin-bottom:.25rem;padding:.15rem .5rem;font-size:.8rem;font-weight:700}.memo-sig-status.approved{color:#065f46;background-color:#d1fae5}.memo-sig-status.rejected{color:#991b1b;background-color:#fee2e2}.memo-sig-reason{color:#991b1b;text-overflow:ellipsis;max-width:100%;margin-bottom:.25rem;font-size:.75rem;font-style:italic;overflow:hidden}.memo-sig-name{color:#64748b}[data-theme=dark] .memo-document{color:#1e293b;background:#fff}[data-theme=dark] .memo-meta-value,[data-theme=dark] .memo-content-area{color:#1e293b}.login-container{background:radial-gradient(circle at 18% 18%,#f3701e2e,#0000 30%),radial-gradient(circle at 82% 74%,#4b607f2e,#0000 34%),linear-gradient(135deg,#fff8f2 0%,#f8fafc 44%,#edf3f8 100%);justify-content:center;align-items:center;width:100%;min-height:100vh;padding:2rem;display:flex;position:fixed;inset:0;overflow:hidden}[data-theme=dark] .login-container{background:radial-gradient(circle at 18% 18%,#f3701e26,#0000 30%),radial-gradient(circle at 82% 74%,#60738f38,#0000 34%),linear-gradient(135deg,#14110f 0%,#121315 46%,#18202a 100%)}.login-scene{pointer-events:none;position:absolute;inset:0;overflow:hidden}.login-grid{background-image:linear-gradient(#4b607f14 1px,#0000 1px),linear-gradient(90deg,#4b607f14 1px,#0000 1px);background-size:48px 48px;animation:26s linear infinite loginGridDrift;position:absolute;inset:-20%;-webkit-mask-image:radial-gradient(circle,#000 0%,#0000 68%);mask-image:radial-gradient(circle,#000 0%,#0000 68%)}[data-theme=dark] .login-grid{background-image:linear-gradient(#ffffff0b 1px,#0000 1px),linear-gradient(90deg,#ffffff0b 1px,#0000 1px)}.login-aurora{filter:blur(16px);opacity:.42;border-radius:50%;width:34rem;height:34rem;animation:12s ease-in-out infinite alternate loginFloat;position:absolute}.login-aurora-one{background:radial-gradient(circle,#f3701e57,#0000 66%);top:5rem;left:-8rem}.login-aurora-two{background:radial-gradient(circle,#4b607f5c,#0000 68%);animation-delay:-5s;bottom:-6rem;right:-10rem}.login-orbit{width:4.25rem;height:4.25rem;color:var(--accent-blue);-webkit-backdrop-filter:blur(18px);background:#ffffff9e;border:1px solid #ffffffc7;border-radius:1.25rem;place-items:center;animation:9s ease-in-out infinite loginCardDrift;display:grid;position:absolute;box-shadow:0 24px 56px #4b607f29}[data-theme=dark] .login-orbit{color:#f7a469;background:#1c1d219e;border-color:#ffffff1a}.login-orbit-one{top:16%;left:13%}.login-orbit-two{animation-delay:-2.5s;top:21%;right:13%}.login-orbit-three{animation-delay:-5s;bottom:15%;right:18%}.login-flowline{opacity:.55;background:linear-gradient(90deg,#0000,#f3701e8c,#0000);width:34vw;max-width:520px;height:2px;animation:3.6s ease-in-out infinite loginFlowPulse;position:absolute}.login-flowline-a{top:30%;left:18%;transform:rotate(10deg)}.login-flowline-b{animation-delay:-1.8s;bottom:28%;right:18%;transform:rotate(-14deg)}.login-shell{z-index:1;grid-template-columns:minmax(0,1.1fr) minmax(360px,430px);align-items:center;gap:2rem;width:min(1040px,100%);display:grid;position:relative}.login-hero-panel{color:var(--text-title);padding:1rem 1rem 1rem 0}.login-pill{width:fit-content;color:var(--primary);letter-spacing:.04em;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(14px);background:#ffffff8c;border:1px solid #ffffffc7;border-radius:999px;align-items:center;gap:.45rem;padding:.45rem .75rem;font-size:.8rem;font-weight:800;display:inline-flex}[data-theme=dark] .login-pill{background:#1c1d2194;border-color:#ffffff1a}.login-hero-panel h1{max-width:560px;color:var(--text-title);margin:1.35rem 0 1rem;font-size:clamp(2rem,4.2vw,3.85rem);font-weight:850;line-height:1.04}.login-hero-panel p{max-width:520px;color:var(--text-main);font-size:.96rem;line-height:1.65}.login-flow-preview{grid-template-columns:auto minmax(48px,1fr) auto minmax(48px,1fr) auto;align-items:center;gap:.7rem;width:min(560px,100%);margin-top:2rem;display:grid}.flow-node{min-height:44px;color:var(--text-title);-webkit-backdrop-filter:blur(14px);background:#ffffffa8;border:1px solid #fffc;border-radius:.85rem;align-items:center;gap:.5rem;padding:.65rem .8rem;font-size:.86rem;font-weight:800;display:inline-flex;box-shadow:0 16px 36px #4b607f1c}.flow-node.active{color:#fff;background:linear-gradient(135deg, var(--primary), #f99a4b);border-color:#ffffff73}[data-theme=dark] .flow-node{background:#1c1d21ad;border-color:#ffffff1a}.flow-track{background:linear-gradient(90deg,#f3701eb8,#4b607f38);border-radius:999px;min-width:32px;height:2px;position:relative;overflow:hidden}.flow-track:after{content:"";background:#ffffffe6;width:35%;animation:2.4s ease-in-out infinite loginTrackMove;position:absolute;inset:0}.login-card{text-align:center;-webkit-backdrop-filter:blur(24px);background:#ffffffb8;border:1px solid #ffffffbd;border-radius:1.5rem;flex-direction:column;align-items:center;width:100%;margin:0;padding:2.5rem;display:flex;box-shadow:0 28px 78px #4b607f2e}[data-theme=dark] .login-card{background:#1c1d21c2;border-color:#ffffff1a;box-shadow:0 28px 78px #0000006b}.login-brand{margin-bottom:2rem}.login-logo{object-fit:contain;filter:drop-shadow(0 12px 20px #4b607f2e);height:112px;margin:0 auto;animation:.8s both loginLogoRise;display:block}.login-brand p{text-align:center;letter-spacing:.18em;color:var(--primary);margin-top:.85rem;font-size:.72rem;font-weight:800}.login-copy h2{color:var(--text-title);margin-bottom:.45rem;font-size:1.55rem;font-weight:850}.login-copy p{color:var(--text-muted);margin-bottom:1.5rem;font-size:.9rem}.login-form{text-align:left;width:100%}.login-input{background:#ffffffc7;border-color:#4b607f2e;min-height:54px;padding-inline:1rem}[data-theme=dark] .login-input{background:#1213159e;border-color:#ffffff1f}.login-submit{background:linear-gradient(135deg, var(--accent-blue), #324157);justify-content:space-between;width:100%;min-height:54px;margin-top:1rem;padding-inline:1.2rem;font-size:1rem;box-shadow:0 18px 32px #4b607f4d}.login-submit:hover{background:linear-gradient(135deg, var(--accent-blue-hover), #28364a)}.login-assurance{width:100%;color:var(--text-muted);border-top:1px solid #4b607f1f;justify-content:center;align-items:center;gap:.45rem;margin-top:1.1rem;padding-top:1.1rem;font-size:.82rem;display:flex}[data-theme=dark] .login-assurance{border-top-color:#ffffff17}@keyframes loginGridDrift{0%{transform:translate(0,0)}to{transform:translate(48px,48px)}}@keyframes loginFloat{0%{transform:translate(0,0)scale(1)}to{transform:translate(3rem,-1.5rem)scale(1.08)}}@keyframes loginCardDrift{0%,to{transform:translate(0,0)rotate(0)}50%{transform:translate(.5rem,-.85rem)rotate(3deg)}}@keyframes loginFlowPulse{0%,to{opacity:.18;filter:blur()}50%{opacity:.72;filter:blur(.5px)}}@keyframes loginTrackMove{0%{transform:translate(-120%)}to{transform:translate(300%)}}@keyframes loginLogoRise{0%{opacity:0;transform:translateY(.7rem)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=900px){.login-container{min-height:calc(100vh - 4rem);padding:1.25rem 0;position:relative}.login-shell{grid-template-columns:1fr;gap:1.25rem}.login-hero-panel{text-align:center;padding:0}.login-pill{margin-inline:auto}.login-hero-panel h1{margin-inline:auto;font-size:2rem}.login-hero-panel p{margin-inline:auto;font-size:.9rem}.login-flow-preview{margin-inline:auto}}@media (width<=560px){.login-container{padding:.5rem 0}.login-hero-panel h1{font-size:1.65rem}.login-flow-preview{grid-template-columns:auto minmax(18px,1fr) auto minmax(18px,1fr) auto;gap:.35rem}.flow-track{width:auto;min-width:16px;height:2px}.flow-track:after{width:35%;height:100%;animation-name:loginTrackMove}.flow-node{justify-content:center;gap:.32rem;min-height:40px;padding:.55rem .45rem;font-size:.78rem}.login-card{border-radius:1.1rem;padding:2rem 1.25rem}.login-logo{height:92px}.login-copy h2{font-size:1.35rem}.login-orbit,.login-flowline{display:none}}.profile-select-grid{flex-direction:column;gap:.75rem;width:100%;margin:1.5rem 0;display:flex}.profile-select-btn{border:1.5px solid var(--input-border);background:var(--input-bg);cursor:pointer;color:var(--text-main);font-family:var(--font-sans);text-align:left;border-radius:.75rem;justify-content:space-between;align-items:center;width:100%;padding:.8rem 1.2rem;transition:all .2s;display:flex}.profile-select-btn:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}.profile-select-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.profile-avatar{background-color:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:.95rem;font-weight:700;display:flex;box-shadow:0 2px 4px #f3701e33}.user-profile-header{background:var(--primary-light);border:1.5px solid var(--primary-border);border-radius:.75rem;align-items:center;gap:.75rem;padding:.4rem .8rem;font-size:.9rem;display:flex}.user-profile-avatar{background-color:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;font-weight:700;display:flex}.locked-field-badge{color:var(--text-muted);background-color:var(--bg-app);border:1px solid var(--border-card);border-radius:.25rem;align-items:center;gap:.25rem;margin-top:.25rem;padding:.15rem .5rem;font-size:.75rem;display:inline-flex}.swal2-popup{font-family:var(--font-sans)!important;background:var(--bg-card)!important;color:var(--text-main)!important;border:1px solid var(--border-card)!important;box-shadow:var(--shadow-lg)!important;border-radius:1.25rem!important}.swal2-title{color:var(--text-title)!important;font-weight:700!important}.swal2-html-container{color:var(--text-main)!important}.swal2-confirm{background-color:var(--accent-blue)!important;color:#fff!important;border-radius:.75rem!important;padding:.75rem 2rem!important;font-weight:600!important;transition:all .2s!important;box-shadow:0 4px 12px #0052cc33!important}.swal2-confirm:hover{background-color:var(--accent-blue-hover)!important}.swal2-cancel{background-color:var(--input-bg)!important;color:var(--text-main)!important;border:1.5px solid var(--input-border)!important;border-radius:.75rem!important;padding:.75rem 2rem!important;font-weight:600!important}.app-routed-content-container{box-sizing:border-box;flex-direction:column;flex-grow:1;width:100%;margin:0 auto;transition:max-width .4s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1);display:flex}.split-layout-container{align-items:stretch;gap:0;width:100%;min-height:calc(100vh - 180px);transition:gap .4s cubic-bezier(.4,0,.2,1);display:flex}.split-layout-container.preview-active{gap:1rem}.split-left-panel{flex:100%;width:100%;max-width:800px;margin:0 auto;transition:all .4s cubic-bezier(.4,0,.2,1)}.split-left-panel.preview-active{flex:0 0 clamp(560px,42vw,680px);width:clamp(560px,42vw,680px);max-width:680px;margin:0}.split-left-panel.preview-active .approval-list{grid-template-columns:repeat(2,minmax(0,1fr))}.split-right-panel{opacity:0;pointer-events:none;width:0;max-width:0;height:calc(100vh - 120px);box-shadow:none;border-left:0 solid #0000;border-radius:.75rem;flex:0 0;transition:flex .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1),max-width .4s cubic-bezier(.4,0,.2,1),opacity .3s,transform .4s cubic-bezier(.25,1,.5,1),border-left .4s cubic-bezier(.4,0,.2,1),box-shadow .4s;position:sticky;top:10px;overflow:hidden;transform:translate(50px)scale(.98)}.split-right-panel.open{opacity:1;pointer-events:auto;border-left:1px solid var(--border-card);width:auto;min-width:560px;max-width:none;box-shadow:var(--shadow-md);flex:1 1 0;transform:translate(0)scale(1)}.mobile-preview-overlay{z-index:9999;background-color:var(--bg-app);animation:.35s cubic-bezier(.16,1,.3,1) forwards slideUp;position:fixed;inset:0}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}