/* ── Variables ── */
:root {
  --bg:#F4F4F1;--shell:#fff;--shell-border:#E0E0DA;
  --sidebar:#F8F8F5;--sidebar-border:#E8E8E3;
  --brand:#1A1A1A;--nav:#555;--nav-hover:#EEEEE9;--nav-active:#fff;--nav-active-border:#E0E0DA;
  --topbar:#fff;--topbar-border:#E8E8E3;
  --text:#1A1A1A;--text-muted:#555;--text-faint:#888;--text-tiny:#999;
  --btn-bg:#F8F8F5;--btn-border:#D8D8D3;--btn-color:#333;--btn-hover:#EEEEE9;
  --input-bg:#fff;--input-border:#E0E0DA;
  --divider:#E8E8E3;
  --primary:#3C3489;--primary-hover:#2E2870;--primary-light:#EEEDFE;
  --btn-text:#FFFFFF;
  --badge-draft-bg:#FAEEDA;--badge-draft-color:#854F0B;
  --badge-approved-bg:#EAF3DE;--badge-approved-color:#3B6D11;
  --badge-ACTIVE-bg:#EAF3DE;--badge-ACTIVE-color:#3B6D11;
  --badge-INACTIVE-bg:#FCEBEB;--badge-INACTIVE-color:#A32D2D;
  --badge-open-bg:#E0EDFF;--badge-open-color:#1D4ED8;
  --badge-completed-bg:#EAF3DE;--badge-completed-color:#3B6D11;
  --badge-aborted-bg:#F3F3F0;--badge-aborted-color:#888;
  --danger:#D32F2F;--danger-hover:#B71C1C;
  --table-header:#F8F8F5;--table-hover:#FAFAF8;--table-border:#E8E8E3;--table-sel:#EEEDFE;
  --stat-bg:#F8F8F5;--stat-border:#E8E8E3;
}
.dark {
  --bg:#0F0F0F;--shell:#1A1A1A;--shell-border:#2E2E2E;
  --sidebar:#141414;--sidebar-border:#2A2A2A;
  --brand:#E8E8E3;--nav:#AAA;--nav-hover:#252525;--nav-active:#252525;--nav-active-border:#3A3A3A;
  --topbar:#1A1A1A;--topbar-border:#2A2A2A;
  --text:#E8E8E3;--text-muted:#AAA;--text-faint:#777;--text-tiny:#666;
  --btn-bg:#252525;--btn-border:#3A3A3A;--btn-color:#CCC;--btn-hover:#2E2E2E;
  --input-bg:#252525;--input-border:#3A3A3A;
  --divider:#2A2A2A;
  --primary-light:#2A2545;
  --badge-draft-bg:#3A2800;--badge-draft-color:#FAC775;
  --badge-approved-bg:#1A2E0A;--badge-approved-color:#97C459;
  --badge-ACTIVE-bg:#1A2E0A;--badge-ACTIVE-color:#97C459;
  --badge-INACTIVE-bg:#3A0A0A;--badge-INACTIVE-color:#F09595;
  --badge-open-bg:#0A1A3A;--badge-open-color:#6BA3FF;
  --badge-completed-bg:#1A2E0A;--badge-completed-color:#97C459;
  --badge-aborted-bg:#252525;--badge-aborted-color:#888;
  --danger:#F44336;--danger-hover:#D32F2F;
  --table-header:#1E1E1E;--table-hover:#222;--table-border:#333;--table-sel:#2A2545;
  --stat-bg:#1E1E1E;--stat-border:#333;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;background:var(--bg);color:var(--text);height:100vh;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;}

/* ── Login ── */
.login-card{background:var(--shell);border-radius:12px;padding:48px 40px;width:380px;box-shadow:0 2px 12px rgba(0,0,0,.08);text-align:center;}
.login-card h1{font-size:20px;font-weight:700;margin-bottom:4px;}
.login-card p{font-size:13px;color:var(--text-muted);margin-bottom:32px;}
.login-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--divider);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;background:var(--shell);color:var(--text);text-decoration:none;margin-bottom:10px;}
.login-btn:hover{border-color:var(--primary);background:#F8F7FF;}
.login-btn.primary{background:var(--primary);color:var(--btn-text);border-color:var(--primary);}
.login-btn.primary:hover{background:var(--primary-hover);}
.login-btn svg{width:20px;height:20px;flex-shrink:0;}

/* ── Shell ── */
.shell{display:none;grid-template-columns:210px 1fr;width:100vw;height:100vh;background:var(--shell);border:1px solid var(--shell-border);border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.08);}
.shell.visible{display:grid;}

/* ── Sidebar ── */
.sidebar{background:var(--sidebar);border-right:1px solid var(--sidebar-border);padding:16px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.sidebar-brand{font-size:13px;font-weight:600;color:var(--brand);padding:4px 10px 12px;border-bottom:1px solid var(--sidebar-border);margin-bottom:8px;}
.sidebar-label{font-size:10px;color:var(--text-tiny);text-transform:uppercase;letter-spacing:.07em;padding:10px 10px 4px;}
.nav-item{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:6px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--nav);background:transparent;border:1px solid transparent;}
.nav-item:hover{background:var(--nav-hover);}
.nav-item.active{background:var(--nav-active);color:var(--text);border:1px solid var(--nav-active-border);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.sidebar-footer{margin-top:auto;padding:10px 10px 0;border-top:1px solid var(--sidebar-border);font-size:11px;color:var(--text-tiny);line-height:1.6;}
.dark-toggle{background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:6px;padding:3px 8px;cursor:pointer;font-size:13px;}
.dark-toggle:hover{background:var(--btn-hover);}

/* ── Main ── */
.main{display:flex;flex-direction:column;overflow:hidden;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--topbar-border);background:var(--topbar);flex-shrink:0;}
.topbar-title{font-size:15px;font-weight:600;}
.topbar-actions{display:flex;gap:8px;align-items:center;}
.btn-group{display:flex;align-items:center;gap:4px;border:1px solid var(--divider);border-radius:6px;padding:2px 6px;}
.btn-group-label{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em;margin-right:2px;white-space:nowrap;}

/* ── Buttons ── */
.btn{padding:7px 14px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);transition:background .1s;}
.btn:hover{background:var(--btn-hover);}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn.primary:hover{background:var(--primary-hover);}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn.danger:hover{background:var(--danger-hover);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-sm{padding:3px 8px;font-size:11px;}

/* ── Pages ── */
.page{display:none;flex:1;overflow:hidden;flex-direction:column;}
.page.active{display:flex;}
.page-body{flex:1;overflow-y:auto;padding:20px;}

/* ── Badge ── */
.badge{display:inline-flex;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;}
.badge-draft{background:var(--badge-draft-bg);color:var(--badge-draft-color);}
.badge-approved{background:var(--badge-approved-bg);color:var(--badge-approved-color);}
.badge-ACTIVE{background:var(--badge-ACTIVE-bg);color:var(--badge-ACTIVE-color);}
.badge-INACTIVE{background:var(--badge-INACTIVE-bg);color:var(--badge-INACTIVE-color);}
.badge-open{background:var(--badge-open-bg);color:var(--badge-open-color);}
.badge-completed{background:var(--badge-completed-bg);color:var(--badge-completed-color);}
.badge-aborted{background:var(--badge-aborted-bg);color:var(--badge-aborted-color);}
.badge-admin{background:var(--badge-approved-bg);color:var(--badge-approved-color);}
.badge-superadmin{background:var(--badge-open-bg);color:var(--badge-open-color);}

/* ── Tables ── */
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table .col-fit{width:1%;white-space:nowrap;}
.data-table th{text-align:left;padding:8px 12px;background:var(--table-header);border-bottom:2px solid var(--table-border);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);position:sticky;top:0;z-index:2;}
.data-table td{padding:8px 12px;border-bottom:1px solid var(--table-border);}
.data-table tr:hover td{background:var(--table-hover);}
.data-table tr.clickable{cursor:pointer;}
.data-table tr.selected td{background:var(--table-sel);}
.data-table .cb-cell{width:32px;text-align:center;}
.data-table input[type="checkbox"]{cursor:pointer;width:15px;height:15px;accent-color:var(--primary);}

/* ── Column sort/filter ── */
.col-sortable{position:relative;white-space:nowrap;user-select:none;}
.col-header-label{cursor:pointer;}
.col-header-label:hover{color:var(--primary);}
.col-filter-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:10px;padding:0 2px;margin-left:2px;vertical-align:middle;line-height:1;}
.col-filter-btn:hover,.col-filter-btn.col-filter-active{color:var(--primary);}
.col-filter-active{color:var(--primary);font-weight:700;}
.col-filter-dropdown{display:none;position:absolute;top:100%;left:0;z-index:50;background:var(--shell);border:1px solid var(--divider);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:6px;min-width:180px;text-transform:none;letter-spacing:0;font-weight:400;}
.col-filter-dropdown.open{display:block;}
.col-filter-sort{display:block;width:100%;text-align:left;background:none;border:none;padding:6px 8px;font-size:12px;cursor:pointer;border-radius:4px;color:var(--text);}
.col-filter-sort:hover{background:var(--nav-hover);}
.col-filter-sep{border-top:1px solid var(--divider);margin:4px 0;}
.col-filter-input{width:100%;margin:4px 0;font-size:12px;padding:5px 8px;}
.col-filter-actions{display:flex;gap:4px;justify-content:flex-end;margin-top:4px;}
.col-filter-wide{min-width:220px;}
.col-filter-textarea{width:100%;margin:4px 0;font-size:12px;padding:5px 8px;resize:none;height:120px;overflow-y:auto;font-family:inherit;}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px;max-width:500px;}
.stat-card{background:var(--stat-bg);border:1px solid var(--stat-border);border-radius:8px;padding:14px 16px;}
.stat-value{font-size:24px;font-weight:700;}
.stat-label{font-size:11px;color:var(--text-muted);margin-top:2px;}

/* ── Forms ── */
.form-row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.form-input{padding:7px 12px;border-radius:6px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text);font-size:13px;font-family:inherit;}
.form-input:focus{outline:2px solid var(--primary);outline-offset:-1px;}
.form-input-sm{padding:4px 8px;font-size:12px;}
select.form-input{cursor:pointer;}

/* ── Crew container ── */
.crew-container{display:flex;flex-direction:column;flex:1 1 0;overflow:hidden;}
.crew-toolbar{padding:12px 20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--divider);flex-shrink:0;}
.crew-toolbar .form-input{margin:0;}
.crew-count{font-size:11px;color:var(--text-muted);margin-left:auto;white-space:nowrap;}
.crew-body{display:flex;flex:1 1 0;overflow:hidden;}
.crew-list-col{display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow:hidden;}
.crew-list-wrap{flex:1 1 0;overflow-y:auto;}

/* ── Crew detail panel (vertical / side) ── */
.crew-detail-pane{display:none;flex-direction:column;border-left:2px solid var(--divider);overflow-y:auto;width:40%;position:relative;flex-shrink:0;}
.crew-detail-pane.open{display:flex;}
.crew-detail-pane .resize-handle{width:6px;height:100%;cursor:ew-resize;background:transparent;flex-shrink:0;position:absolute;left:0;top:0;}
.crew-detail-pane .resize-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:40px;border-radius:2px;background:var(--divider);}
.crew-detail-pane .resize-handle:hover::after{background:var(--primary);}
.crew-detail-header{display:flex;align-items:center;padding:6px 16px;border-bottom:1px solid var(--divider);flex-shrink:0;gap:8px;flex-wrap:wrap;}
.crew-detail-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
.crew-detail-tabs{display:flex;gap:0;}
.crew-detail-tab{padding:5px 14px;border:1px solid var(--btn-border);font-size:12px;cursor:pointer;background:var(--btn-bg);color:var(--btn-color);transition:background .1s;}
.crew-detail-tab:first-child{border-radius:5px 0 0 5px;}
.crew-detail-tab:last-child{border-radius:0 5px 5px 0;}
.crew-detail-tab:not(:first-child){border-left:0;}
.crew-detail-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.tab-count{font-weight:700;background:rgba(0,0,0,.15);padding:1px 6px;border-radius:8px;font-size:11px;margin-left:2px;}
.crew-detail-tab.active .tab-count{background:rgba(255,255,255,.25);}
.crew-detail-close{margin-left:auto;}
.crew-detail-content{flex:1;overflow-y:auto;padding:12px 16px;}

/* ── Profile layout ── */
.profile-top{display:flex;gap:20px;align-items:flex-start;}
.profile-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0;}
.profile-fields{flex:1;min-width:0;}
.profile-section-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}
.profile-link{font-size:11px;color:var(--primary);cursor:pointer;text-decoration:underline;background:none;border:none;padding:0;}


/* ── Card history grid ── */
.card-history-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card-history-item{display:flex;flex-direction:column;gap:6px;}
.card-history-card-wrap{width:100%;overflow:hidden;}
.card-preview-mini{transform-origin:top left;margin:0;}
.card-history-info{font-size:11px;color:var(--text-muted);line-height:1.5;}
.card-history-info{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}

/* ── Card preview status (outside frame) ── */
.card-preview-status{margin-bottom:6px;display:flex;gap:6px;align-items:center;}

/* ── Detail grid ── */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.detail-item{background:var(--stat-bg);border:1px solid var(--stat-border);border-radius:6px;padding:10px 12px;}
.detail-item .label{font-size:10px;color:var(--text-tiny);text-transform:uppercase;letter-spacing:.04em;}
.detail-item .value{font-size:13px;margin-top:2px;word-break:break-word;overflow-wrap:break-word;}

/* ── Photo grid ── */
.photo-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.photo-thumb-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;}
.photo-date{font-size:10px;color:var(--text-faint);}
.photo-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;border:2px solid var(--divider);}

/* ── Selection bar ── */
.selection-bar{display:none;align-items:center;gap:10px;padding:10px 20px;background:var(--primary);color:#fff;flex-shrink:0;}
.selection-bar.visible{display:flex;}
.selection-bar .sel-count{font-size:13px;font-weight:500;}
.selection-bar .btn{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:#fff;}
.selection-bar .btn:hover{background:rgba(255,255,255,.3);}
.selection-bar .btn.sel-primary{background:#fff;color:var(--primary);border-color:#fff;}

/* ── Modal ── */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:100;align-items:center;justify-content:center;}
.modal-overlay.visible{display:flex;}
.modal{background:var(--shell);border-radius:10px;padding:24px;max-width:480px;width:90%;max-height:80vh;overflow-y:auto;}
.modal h2{font-size:16px;font-weight:600;margin-bottom:16px;}
.modal .form-row{flex-direction:column;align-items:stretch;}
.modal label{font-size:12px;color:var(--text-muted);margin-bottom:4px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 0;}
.pagination .btn{padding:5px 10px;font-size:11px;}
.pagination .page-info{font-size:12px;color:var(--text-muted);}

/* ── Batch container ── */
.batch-container{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.batch-list-wrap{flex:1;overflow-y:auto;}

/* ── Batch progress bar ── */
.batch-progress{display:flex;align-items:center;gap:10px;padding:0 20px 0 0;}
.batch-progress-track{flex:1;height:6px;background:var(--divider);border-radius:3px;min-width:80px;overflow:hidden;}
.batch-progress-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .3s;}
.batch-progress-text{font-size:11px;color:var(--text-muted);white-space:nowrap;}

/* ── Batch review panel ── */
.batch-review-pane{display:none;flex-direction:column;border-top:2px solid var(--divider);min-height:0;overflow:hidden;}
.batch-review-pane.open{display:flex;}
.batch-review-header{display:flex;align-items:center;padding:6px 16px;border-bottom:1px solid var(--divider);flex-shrink:0;gap:8px;}
.batch-review-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.batch-review-nav{display:flex;gap:4px;align-items:center;}
.batch-review-nav .btn{padding:4px 10px;font-size:11px;}
.batch-review-nav .nav-label{font-size:11px;color:var(--text-muted);min-width:50px;text-align:center;}
.batch-review-close{margin-left:8px;}
.batch-review-content{flex:1;overflow-y:auto;padding:16px;display:flex;gap:20px;flex-wrap:wrap;}

/* ── Card preview ── */
.card-preview-wrap{flex-shrink:0;}
.card-preview{width:340px;height:215px;border-radius:6px;border:1px solid var(--table-border);background-color:#e8e8e8;background-size:100% 100%;background-repeat:no-repeat;position:relative;overflow:hidden;font-size:11px;transform-origin:top left;box-shadow:0 4px 20px rgba(0,0,0,.2);}
.card-preview.tpl-lauda::before{content:'';position:absolute;left:26px;top:36px;width:117px;height:7px;background:#fff;}
.card-zoom-bar{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--text-muted);}
.card-zoom-bar input[type=range]{flex:1;max-width:120px;cursor:pointer;}
.card-preview-photo{position:absolute;left:29px;top:43px;width:114px;height:109px;background-color:#fff;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;cursor:grab;}
.card-preview-photo:active{cursor:grabbing;}
.card-preview-photo.dragging{outline:1.5px solid rgba(255,80,80,0.6);outline-offset:-1.5px;}
.card-preview-photo.dragging::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,80,80,0.6);z-index:10;pointer-events:none;}
.card-preview-photo.dragging::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,80,80,0.6);z-index:10;pointer-events:none;}
.card-preview-photo.empty{display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:10px;background-color:rgba(200,200,200,0.6);}
.card-preview-photo.locked{cursor:default;}
.card-preview-fields{position:absolute;left:183px;top:38px;width:150px;}
.card-preview-field{margin-bottom:6px;line-height:1.15;}
.card-preview-field .f-label{font-weight:700;font-size:11px;color:#000;}
.card-preview-field .f-value{font-size:11px;font-weight:700;color:#000;}

/* ── Review side panel (right of card preview) ── */
.review-side{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px;}
.review-section h4{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.review-photos{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;}
.review-photos{display:flex;flex-wrap:wrap;gap:10px;}
.photo-pair{display:flex;gap:6px;padding:6px;border:1px solid var(--divider);border-radius:8px;background:var(--table-header);}
.review-photos .photo-thumb-wrap{cursor:pointer;min-width:60px;text-align:center;}
.review-photos .photo-thumb-wrap.locked{cursor:default;opacity:.5;pointer-events:none;}
.review-photos .photo-thumb{width:60px;height:60px;cursor:pointer;transition:border-color .1s;}
.review-photos .photo-thumb.active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary);}
.photo-label{font-size:9px;color:var(--text-faint);display:block;text-align:center;margin-top:2px;}
.photo-label.nobg{color:var(--primary);}
.nobg-placeholder{display:flex;align-items:center;justify-content:center;width:60px;min-height:60px;}
.nobg-buttons{flex-direction:column;gap:4px;width:auto;padding:4px;}
.nobg-placeholder .btn{font-size:9px;padding:2px 6px;white-space:nowrap;}
.review-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;}
.review-actions .btn{font-size:12px;}
.offset-reset{font-size:11px;color:var(--primary);cursor:pointer;background:none;border:none;padding:2px 0;text-decoration:underline;}

/* ── Batch setup ── */
.batch-apply-all{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--nav-hover);border-bottom:1px solid var(--divider);flex-wrap:wrap;flex-shrink:0;}
.batch-apply-label{font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap;}
.apply-group{display:flex;flex-direction:column;align-items:center;gap:4px;}
.apply-group .btn{font-size:10px;padding:2px 8px;white-space:nowrap;}
.apply-group .btn .spinner{width:12px;height:12px;border-width:2px;display:inline-block;vertical-align:middle;}
.batch-apply-all .form-input{font-size:12px;padding:4px 6px;min-width:100px;}
.batch-edit-table .form-input{font-size:12px;padding:3px 4px;}
.batch-edit-table select.form-input{min-width:90px;}
.batch-edit-table input[type="text"].form-input{min-width:130px;}
.batch-edit-table input[type="date"].form-input{min-width:120px;}

/* ── Payments ── */
.payment-container{display:flex;flex:1;overflow:hidden;}
.payment-list-wrap{display:flex;flex-direction:column;flex:1;min-width:0;overflow-y:auto;}
.payment-review-pane{display:none;flex-direction:column;border-left:2px solid var(--divider);overflow-y:auto;width:40%;position:relative;flex-shrink:0;}
.payment-review-pane.open{display:flex;}
.payment-review-pane .resize-handle{width:6px;height:100%;cursor:ew-resize;background:transparent;flex-shrink:0;position:absolute;left:0;top:0;}
.payment-review-pane .resize-handle::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:40px;border-radius:2px;background:var(--divider);}
.payment-review-pane .resize-handle:hover::after{background:var(--primary);}
.payment-review-header{display:flex;align-items:center;padding:6px 16px;border-bottom:1px solid var(--divider);flex-shrink:0;gap:8px;}
.payment-review-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.payment-review-nav{display:flex;gap:4px;align-items:center;}
.payment-review-nav .btn{padding:4px 10px;font-size:11px;}
.payment-review-nav .nav-label{font-size:11px;color:var(--text-muted);min-width:50px;text-align:center;}
.payment-review-close{margin-left:8px;}
.payment-review-content{flex:1;overflow-y:auto;padding:16px;}
.payment-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.payment-detail .detail-item{background:var(--stat-bg);border:1px solid var(--stat-border);border-radius:6px;padding:8px 10px;}
.payment-detail .label{font-size:10px;color:var(--text-tiny);text-transform:uppercase;letter-spacing:.04em;}
.payment-detail .value{font-size:13px;margin-top:2px;}
.crew-payment-card{display:flex;align-items:center;gap:12px;background:var(--stat-bg);border:1px solid var(--stat-border);border-radius:8px;padding:10px 14px;margin-bottom:6px;}
.crew-payment-amount{font-size:15px;font-weight:600;white-space:nowrap;}
.crew-payment-info{flex:1;min-width:0;}
.crew-payment-reason{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crew-payment-meta{font-size:11px;color:var(--text-faint);margin-top:2px;}
.suggestion-card{border:1px solid var(--divider);border-radius:8px;padding:12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;}
.suggestion-card:hover{border-color:var(--primary);}
.suggestion-card.selected{border-color:var(--primary);background:var(--primary-light);}
.suggestion-match-type{font-size:10px;padding:2px 6px;border-radius:10px;font-weight:600;text-transform:uppercase;}
.match-code-name{background:#EAF3DE;color:#3B6D11;}
.match-code{background:#FAEEDA;color:#854F0B;}
.match-name{background:#E0EDFF;color:#1D4ED8;}
.payment-search-wrap{margin-top:12px;display:flex;gap:6px;}
.payment-search-wrap .form-input{flex:1;}

/* ── Utilities ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1A1A1A;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;}
.toast.show{opacity:1;}
.spinner{width:32px;height:32px;margin:0 auto;border:3px solid var(--divider);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-faint);}
.empty-state-icon{font-size:32px;opacity:.4;margin-bottom:8px;}
.empty-state-text{font-size:13px;}
.loading-inline{text-align:center;padding:40px;color:var(--text-faint);}