/* mCaptions Speaker Manager – styles (colours come from theme.css tokens) */

/* ── help modal ── */
#help-modal{display:none;position:fixed;inset:0;background:var(--overlay);
            z-index:1000;align-items:flex-start;justify-content:center;
            padding:40px 16px;overflow-y:auto}
#help-modal.open{display:flex}
#help-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;
          width:640px;max-width:100%;box-shadow:var(--shadow);
          display:flex;flex-direction:column;overflow:hidden}
#help-header{display:flex;justify-content:space-between;align-items:center;
             padding:12px 18px;border-bottom:1px solid var(--border);
             font-size:.92rem;color:var(--purple);font-weight:600;letter-spacing:.3px}
#help-header button,.modal-hdr button{background:none;border:none;color:var(--text-4);font-size:1.05rem;
             cursor:pointer;width:var(--tap);height:var(--tap);border-radius:8px;
             transition:color .15s,background .15s;flex-shrink:0;margin:-6px -8px -6px 0}
#help-header button:hover,.modal-hdr button:hover{color:var(--text);background:var(--hover)}
#help-body{padding:18px 22px}
#help-body > div{display:flex;flex-direction:column;gap:18px}
.help-section-title{font-size:.7rem;color:var(--purple);text-transform:uppercase;
                    letter-spacing:1px;margin-bottom:6px;font-weight:700}
.help-section p,.help-section li{font-size:.84rem;color:var(--text-2);line-height:1.65}
.help-section ul{margin:0;padding-left:18px}
.help-section li{margin-bottom:6px;list-style-type:disc}
.help-section strong{color:var(--text)}
.help-section em{color:var(--warn);font-style:normal}
.help-section code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;
                   background:var(--bg-sunk);padding:1px 5px;border-radius:4px;color:var(--purple)}

/* ── loading spinner ── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-lg{width:34px;height:34px;border:3px solid var(--border);
            border-top-color:var(--accent);border-radius:50%;
            animation:spin .75s linear infinite}
#spinner-overlay{display:none;position:fixed;inset:0;background:var(--overlay);
                 z-index:2000;align-items:center;justify-content:center;
                 flex-direction:column;gap:14px}
#spinner-overlay.active{display:flex}
#spinner-msg{font-size:.86rem;color:var(--text);background:var(--surface);
             padding:6px 14px;border-radius:8px}

/* ── pane tabs (phone only) ── */
#pane-tabs{display:none}

/* ── two-column layout ── */
#cols{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── shared column styles ── */
#source-col,#archive-col{display:flex;flex-direction:column;overflow:hidden;min-width:0}
#source-col{width:46%;min-width:200px;flex-shrink:0;background:var(--surface-2)}
#resize-handle{width:5px;background:var(--border);cursor:col-resize;flex-shrink:0;
               transition:background .15s;position:relative;z-index:1}
#resize-handle:hover,#resize-handle.dragging{background:var(--accent-border-strong)}
#archive-col{flex:1;background:var(--bg)}

.col-hdr{background:var(--surface);padding:7px 12px;border-bottom:1px solid var(--border);
         display:flex;align-items:center;justify-content:space-between;
         flex-shrink:0;gap:8px;min-height:48px}
.col-hdr > span{font-size:.9rem;color:var(--text-2);text-transform:uppercase;letter-spacing:1px;
                font-weight:600;display:flex;align-items:center;gap:7px}
.col-hdr > span i{color:var(--accent-muted)}
.col-hdr-btn{padding:0 11px;height:32px;border:1px solid var(--accent-border);border-radius:7px;
             background:var(--accent-bg);color:var(--accent);font-size:.76rem;font-weight:600;
             font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;
             transition:background .15s,border-color .15s;white-space:nowrap}
.col-hdr-btn:hover:not(:disabled){background:var(--accent-bg-hover);border-color:var(--accent-border-strong)}
.col-hdr-btn:disabled{opacity:.35;cursor:not-allowed}
#snapshots-btn{margin-left:auto}

/* ── drop zone (legacy ZIP import) ── */
#drop-zone{margin:10px 12px 12px;padding:14px 12px;
           background:var(--input-bg);border:1.5px dashed var(--accent-border);border-radius:8px;
           text-align:center;cursor:pointer;flex-shrink:0;
           transition:border-color .15s,background .15s;
           display:flex;flex-direction:column;align-items:center;gap:4px}
#drop-zone:hover,#drop-zone.drag-over{border-color:var(--accent);background:var(--accent-bg)}
#drop-zone.drag-over{border-style:solid}
.dz-icon{font-size:1.3rem;color:var(--accent-muted);transition:color .15s}
#drop-zone:hover .dz-icon,#drop-zone.drag-over .dz-icon{color:var(--accent)}
.dz-text{font-size:.78rem;color:var(--text-2)}
.dz-text strong{color:var(--text)}
.dz-hint{font-size:.7rem;color:var(--text-4)}

/* ── job lookup ── */
#job-lookup{display:flex;gap:6px;padding:10px 12px 6px;flex-shrink:0}
#job-id-input{flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--border);color:var(--text);
              padding:0 10px;height:36px;border-radius:7px;font-size:.82rem;
              font-family:ui-monospace,SFMono-Regular,Menlo,monospace;outline:none;transition:border-color .15s}
#job-id-input:focus{border-color:var(--accent-border-strong)}
#job-id-input::placeholder{color:var(--text-4);font-family:'Segoe UI',system-ui,Arial,sans-serif}
#job-load-btn{padding:0 14px;height:36px;border:1px solid var(--accent-border);border-radius:7px;
              background:var(--accent-bg);color:var(--accent);font-size:.8rem;font-weight:600;
              font-family:inherit;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;
              transition:background .15s}
#job-load-btn:hover{background:var(--accent-bg-hover)}
#job-status{padding:0 12px 6px;font-size:.72rem;min-height:16px;transition:color .2s;flex-shrink:0}
#job-status.status-error{color:var(--danger)}
#job-status.status-ok{color:var(--ok)}
#job-status.status-info{color:var(--text-3)}

/* ── profile lists ── */
#source-list,#archive-list{flex:1;overflow-y:auto;padding:4px 0}
.empty-hint{padding:28px 16px;color:var(--text-4);font-size:.82rem;text-align:center;line-height:1.7}
.empty-hint i{font-size:1.4rem;display:block;margin-bottom:6px;color:var(--text-5)}
.empty-hint .sub{font-size:.85em;opacity:.8}

/* ── source profile rows: grid (name · comments · #clips · weight · origin · remove) ── */
.prof-row,.src-header{display:grid;
          grid-template-columns: minmax(0,2fr) minmax(0,3fr) 55px 55px minmax(0,160px) 30px;
          align-items:center;gap:6px;padding:5px 10px 5px 12px}
.prof-row{border-bottom:1px solid var(--border-soft);transition:background .1s,border-left-color .1s;
          font-size:.8rem;cursor:pointer;border-left:3px solid transparent;user-select:none}
.src-header,.arch-header{font-size:.64rem;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);
            border-bottom:1px solid var(--border);background:var(--surface-3);padding-top:6px;padding-bottom:6px}
.src-header .col-clips,.src-header .col-weight,
.arch-header .col-clips,.arch-header .col-weight{text-align:right;font-family:inherit;font-size:inherit;color:inherit}
.prof-row:hover{background:var(--hover)}
.prof-row.selected{background:var(--selected-strong);border-left-color:var(--accent)}
.prof-row.dragging{opacity:.4;cursor:grabbing}
.prof-name-cell{display:flex;align-items:center;gap:6px;min-width:0}
.prof-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.prof-meta{font-size:.74rem;color:var(--text-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
           text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-source{font-size:.7rem;color:var(--accent);padding:1px 7px;border-radius:9px;
             background:var(--accent-bg);white-space:nowrap;
             overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.prof-remove,.arch-remove-btn{background:none;border:none;color:var(--text-4);
              font-size:.8rem;cursor:pointer;width:28px;height:28px;border-radius:6px;
              transition:color .12s,background .12s;flex-shrink:0;line-height:1}
.prof-remove:hover,.arch-remove-btn:hover{color:var(--danger);background:var(--danger-bg)}

/* ── unconfirmed portfolio suggestions in the Source pane ── */
.prof-row.prof-suggested .prof-name{font-style:italic;color:var(--text-2);opacity:.85}
.prof-confirm{flex-shrink:0;background:transparent;border:1px solid var(--orange);
              color:var(--orange);cursor:pointer;padding:2px 9px;font-size:.7rem;font-family:inherit;
              font-weight:600;letter-spacing:.4px;border-radius:5px;
              transition:background .15s,color .15s;line-height:1.4}
.prof-confirm:hover{background:var(--orange);color:var(--surface)}

/* ── archive rows: grid (name · groups · comments · #clips · weight · actions) ── */
.arch-row,.arch-header{display:grid;
          grid-template-columns: minmax(0,2fr) minmax(48px,1.3fr) minmax(0,2.4fr) 55px 55px 30px;
          align-items:center;gap:6px;padding:5px 10px 5px 12px}
.arch-row{border-bottom:1px solid var(--border-soft);transition:background .1s,border-left-color .1s;
          cursor:pointer;border-left:3px solid transparent;user-select:none}
.arch-row.grp-drop{background:var(--ok-bg);border-left-color:var(--ok)}
.col-clips,.col-weight{font-size:.74rem;color:var(--text-3);
                       font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right;white-space:nowrap;
                       overflow:hidden;text-overflow:ellipsis}
.arch-row:hover{background:var(--hover)}
.arch-row.selected{background:var(--selected-strong);border-left-color:var(--accent)}
.arch-row.dragging{opacity:.4;cursor:grabbing}

/* archive panel drag-over highlight */
#archive-list.drop-target{outline:2px dashed var(--accent);outline-offset:-3px;background:var(--accent-bg)}
/* edit cell = input + pencil sitting side by side inside the grid column */
.arch-edit-cell{display:flex;align-items:center;gap:4px;min-width:0}
.arch-edit-pen{flex-shrink:0;background:none;border:none;color:var(--text-4);
               font-size:.74rem;cursor:pointer;padding:3px 5px;border-radius:5px;
               opacity:0;transition:opacity .12s,color .12s,background .12s;line-height:1}
.arch-row:hover .arch-edit-pen{opacity:.85}
.arch-edit-pen:hover{color:var(--accent);background:var(--accent-bg);opacity:1}
.arch-name-input,.arch-comments-input{background:transparent;border:1px solid transparent;
                 padding:3px 6px;border-radius:5px;font-family:inherit;outline:none;min-width:0;width:100%;
                 transition:border-color .15s,background .15s,color .15s;text-overflow:ellipsis}
.arch-name-input{color:var(--text);font-size:.82rem;font-weight:600}
.arch-comments-input{color:var(--text-2);font-size:.76rem}
.arch-comments-input:hover{border-color:var(--border)}
.arch-name-input:focus,.arch-comments-input:focus{background:var(--input-bg);border-color:var(--accent-border-strong);
                 color:var(--text);cursor:text}
.arch-comments-input::placeholder{color:var(--text-5);font-style:italic}
/* Readonly inputs let clicks pass through to the row so row-selection works.  */
.arch-name-input[readonly],
.arch-comments-input[readonly]{pointer-events:none;cursor:pointer}

/* ── footers ── */
#source-footer,#archive-footer{background:var(--surface);border-top:1px solid var(--border);
                                padding:8px 10px;display:flex;align-items:center;
                                gap:8px;flex-shrink:0}
#archive-footer{position:sticky;bottom:0;border-bottom:1px solid var(--border)}
#sel-count{font-size:.76rem;color:var(--text-3);margin-right:auto}
#add-btn,#merge-btn,#remove-sel-btn,#clear-source-btn{
  padding:0 13px;height:34px;border-radius:7px;font-size:.8rem;font-weight:600;font-family:inherit;
  cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:background .15s,opacity .15s,border-color .15s,transform .1s;white-space:nowrap}
#add-btn{border:1px solid var(--ok-border);background:var(--ok-bg);color:var(--ok)}
#add-btn:hover:not(:disabled){filter:brightness(1.1)}
#add-btn:disabled{opacity:.3;cursor:not-allowed}
#merge-btn{border:1px solid var(--purple-border);background:var(--purple-bg);color:var(--purple)}
#merge-btn i,#remove-sel-btn i{font-size:1rem}
#merge-btn:hover{background:var(--purple-hover)}
#merge-btn.drag-active{border-color:var(--purple);box-shadow:0 0 0 2px var(--purple-border);transform:scale(1.06)}
#remove-sel-btn{border:1px solid var(--danger-border);background:var(--danger-bg);color:var(--danger)}
#remove-sel-btn:hover{filter:brightness(1.1)}
#remove-sel-btn.drag-active{border-color:var(--danger);box-shadow:0 0 0 2px var(--danger-border);transform:scale(1.06)}
#clear-source-btn{border:1px solid var(--border);background:var(--surface);color:var(--text-3);margin-left:auto;
                  padding:0 11px}
#clear-source-btn:hover{color:var(--text);background:var(--hover)}

/* ── modals ── */
.sm-modal{display:none;position:fixed;inset:0;background:var(--overlay);
          z-index:1001;align-items:center;justify-content:center}
.sm-modal.open{display:flex}
#wipe-modal{z-index:1002}
.sm-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;
        padding:22px 26px;width:460px;max-width:95vw;max-height:95dvh;overflow-y:auto;display:flex;
        flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.sm-box.wide{width:540px}
.sm-box label{font-size:.8rem;color:var(--text-2);margin-top:2px}
.sm-box input[type=text]{background:var(--input-bg);border:1px solid var(--border);color:var(--text);
                  border-radius:7px;padding:0 11px;height:38px;font-size:.86rem;width:100%;
                  font-family:inherit;outline:none;transition:border-color .15s}
.sm-box input[type=text]:focus{border-color:var(--accent-border-strong)}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;gap:10px;
           font-size:.95rem;color:var(--purple);font-weight:600;letter-spacing:.3px}
.modal-desc{font-size:.82rem;color:var(--text-3);line-height:1.55}
.modal-desc strong,.modal-desc b{color:var(--text)}
#merge-status{font-size:.76rem;color:var(--text-3);min-height:15px;text-align:center}
#merge-status.err{color:var(--danger)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modal-cancel,.modal-plain,.modal-confirm{padding:0 18px;height:38px;border-radius:8px;
              font-size:.84rem;font-family:inherit;cursor:pointer;
              display:inline-flex;align-items:center;justify-content:center;gap:7px;
              transition:color .15s,background .15s}
.modal-cancel,.modal-plain{border:1px solid var(--border);background:var(--surface);color:var(--text-2)}
.modal-cancel:hover,.modal-plain:hover{color:var(--text);background:var(--hover)}
.modal-confirm{border:1px solid var(--purple-border);background:var(--purple-bg);color:var(--purple);font-weight:700}
.modal-confirm:hover:not(:disabled){background:var(--purple-hover)}
.modal-confirm:disabled{opacity:.45;cursor:not-allowed}

/* ── snapshots ── */
#snap-list,#snap-restore-list{display:flex;flex-direction:column;gap:6px;
  max-height:46vh;overflow-y:auto;margin:2px 0}
.snap-empty{font-size:.82rem;color:var(--text-4);text-align:center;padding:18px 8px;font-style:italic}
.snap-row{display:flex;align-items:center;gap:10px;background:var(--surface-3);
  border:1px solid var(--border-faint);border-radius:8px;padding:9px 11px}
.snap-info{flex:1;min-width:0}
.snap-label{font-size:.86rem;color:var(--text);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.snap-meta{font-size:.72rem;color:var(--text-3);margin-top:2px}
.snap-actions{display:flex;align-items:center;gap:6px}
.snap-restore{padding:0 12px;height:32px;border-radius:7px;border:1px solid var(--accent-border);
  background:var(--accent-bg);color:var(--accent);font-size:.78rem;font-family:inherit;cursor:pointer;
  transition:background .15s}
.snap-restore:hover{background:var(--accent-bg-hover)}
.snap-del{background:none;border:none;color:var(--text-4);font-size:.9rem;cursor:pointer;
  width:32px;height:32px;border-radius:7px;transition:color .15s,background .15s}
.snap-del:hover{color:var(--danger);background:var(--danger-bg)}
#snap-take-row{display:flex;gap:8px;border-top:1px solid var(--border-faint);padding-top:12px}
#snap-take-row input{flex:1}
.snap-status{font-size:.76rem;color:var(--text-3);min-height:15px}
.snap-status.err{color:var(--danger)}
.snap-prev-row{display:grid;grid-template-columns:1fr auto 1.4fr;gap:10px;
  align-items:center;background:var(--surface-3);border:1px solid var(--border-faint);border-radius:7px;padding:7px 10px}
.snap-prev-name{font-size:.82rem;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snap-prev-meta{font-size:.72rem;color:var(--text-3);white-space:nowrap}
.snap-prev-cmt{font-size:.74rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snap-dim{color:var(--text-3);font-weight:400}
.snap-warn{color:var(--orange)}
.modal-confirm.snap-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}
.modal-confirm.snap-danger:hover:not(:disabled){filter:brightness(1.1)}

/* ── danger zone (inside the Snapshots panel) + full-wipe modal ── */
#wipe-zone{border:1px solid var(--danger-border);background:var(--danger-surface);
  border-radius:10px;margin-top:4px;padding:12px 14px}
#wipe-zone-hdr{font-size:.74rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--danger)}
#wipe-zone-body{display:flex;align-items:center;gap:12px;margin-top:6px}
#wipe-zone-body span{flex:1;font-size:.78rem;color:var(--text-2)}
#wipe-portfolio-btn{flex-shrink:0;padding:0 14px;height:36px;border-radius:8px;
  border:none;background:var(--danger-btn);color:#fff;font-size:.8rem;font-weight:700;
  font-family:inherit;cursor:pointer;white-space:nowrap;transition:filter .15s}
#wipe-portfolio-btn:hover{filter:brightness(1.1)}
#wipe-box{border-color:var(--danger-border)}
#wipe-box code{background:var(--input-bg);border:1px solid var(--danger-border);border-radius:4px;
  padding:1px 6px;color:var(--danger);font-weight:700}
#wipe-box input{border-color:var(--danger-border);font-size:.95rem;letter-spacing:.1em}
#wipe-box input:focus{border-color:var(--danger)}
#wipe-alert{display:flex;gap:12px;background:var(--danger-surface);border:1px solid var(--danger-border);
  border-radius:8px;padding:12px 14px;color:var(--text);font-size:.82rem;line-height:1.5}
#wipe-alert > i{color:var(--danger);font-size:1.5rem;flex-shrink:0;margin-top:2px}
#wipe-alert strong{color:var(--danger)}
#wipe-alert ul{margin:6px 0;padding-left:18px}
#wipe-alert li{margin:2px 0}
.modal-confirm.wipe-danger{background:var(--danger-btn);color:#fff;border-color:var(--danger-btn)}
.modal-confirm.wipe-danger:hover:not(:disabled){filter:brightness(1.1)}
.modal-confirm.wipe-danger:disabled{opacity:.4;cursor:not-allowed}

/* ── groups: patch column ── */
.arch-groups{display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-height:18px;cursor:pointer}
.grp-patch{width:12px;height:12px;border-radius:3px;display:inline-block;
           box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.col-groups{overflow:hidden}

/* ── groups panel ── */
#groups-section{flex-shrink:0;border-top:1px solid var(--border);background:var(--surface-3);
                display:flex;flex-direction:column;max-height:34%}
#groups-hdr{display:flex;align-items:center;gap:8px;padding:6px 12px;
            border-bottom:1px solid var(--border-faint);min-height:44px}
#groups-hdr > span{font-size:.76rem;color:var(--text-2);text-transform:uppercase;letter-spacing:1px;
                   font-weight:600;display:flex;align-items:center;gap:7px}
#groups-hdr > span i{color:var(--accent-muted)}
#add-group-btn{margin-left:auto}
#groups-list{overflow-y:auto;padding:4px 0}
.groups-empty{font-size:.8rem;color:var(--text-4);text-align:center;padding:14px 8px;font-style:italic}
.group-row{display:grid;grid-template-columns:16px 1fr auto 30px;gap:8px;align-items:center;
           padding:6px 12px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background .1s}
.group-row:hover{background:var(--hover)}
.group-row.dragging{opacity:.4}
.group-row.grp-drop{background:var(--ok-bg)}
.grp-swatch{width:14px;height:14px;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.group-name{font-size:.84rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-count{font-size:.72rem;color:var(--text-3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
             background:var(--hover);padding:1px 7px;border-radius:9px}
.group-del{background:none;border:none;color:var(--text-4);font-size:.85rem;cursor:pointer;
           width:28px;height:28px;border-radius:6px;transition:color .15s,background .15s}
.group-del:hover:not(:disabled){color:var(--danger);background:var(--danger-bg)}
.group-del:disabled{opacity:.25;cursor:not-allowed}

/* ── group editor + leave popups ── */
#group-color-choices{display:flex;flex-wrap:wrap;gap:8px}
.color-choice{width:26px;height:26px;border-radius:6px;cursor:pointer;
              box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;transition:transform .1s}
.color-choice:hover{transform:scale(1.12)}
.color-choice.sel{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--text)}
#group-member-list{max-height:34vh;overflow-y:auto;background:var(--input-bg);border:1px solid var(--border-faint);
                   border-radius:8px;padding:4px}
.member-item{display:flex;align-items:center;gap:9px;padding:6px 8px;font-size:.84rem;
             color:var(--text);cursor:pointer;border-radius:6px}
.member-item:hover{background:var(--hover)}
.member-item input{accent-color:var(--accent);width:16px;height:16px}
.leave-row{display:flex;align-items:center;gap:10px;background:var(--surface-3);border:1px solid var(--border-faint);
           border-radius:8px;padding:7px 10px;margin-bottom:6px}
.leave-name{flex:1;font-size:.84rem;color:var(--text)}
.leave-btn{padding:0 12px;height:30px;border-radius:7px;border:1px solid var(--danger-border);background:var(--danger-bg);
           color:var(--danger);font-size:.78rem;font-family:inherit;cursor:pointer}
.leave-btn:hover{filter:brightness(1.1)}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE  ≤ 768 px — one pane at a time (tabs), rows as touch cards
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  #pane-tabs{display:flex;gap:6px;padding:8px 12px;background:var(--surface);
             border-bottom:1px solid var(--border);flex-shrink:0}
  #pane-tabs button{flex:1;height:44px;border-radius:10px;border:1px solid var(--border);
                    background:var(--surface);color:var(--text-2);font-size:.9rem;font-weight:600;
                    font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  #pane-tabs button i{font-size:1.1rem}
  #pane-tabs button[aria-selected=true]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}

  #cols{flex-direction:column}
  #resize-handle{display:none}
  #source-col,#archive-col{width:100% !important;flex:1;min-height:0}
  body:not(.pane-source) #source-col{display:none}
  body.pane-source #archive-col{display:none}
  #source-col{background:var(--bg)}

  .col-hdr{min-height:52px;padding:8px 12px}
  .col-hdr > span{font-size:.92rem}
  .col-hdr-btn{height:42px;padding:0 14px;font-size:.86rem;border-radius:10px}
  .col-hdr-btn i{font-size:1.05rem}
  #source-col .col-hdr{display:none}         /* the tab already names the pane */

  #job-lookup{padding:12px 12px 6px;gap:8px}
  #job-id-input{height:46px;font-size:1rem;border-radius:10px}
  #job-load-btn{height:46px;padding:0 16px;font-size:.92rem;border-radius:10px}
  #job-status{font-size:.84rem}
  .src-header,.arch-header{display:none}
  #source-list,#archive-list{padding:6px 12px}
  .empty-hint{font-size:.95rem}

  /* source row card: name · weight · remove, origin underneath */
  .prof-row{grid-template-columns:minmax(0,1fr) auto 40px;grid-template-areas:"name weight remove" "origin origin origin";
            background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:12px;
            padding:10px 8px 10px 12px;margin-bottom:8px;font-size:1rem;row-gap:6px}
  .prof-row .col-name{grid-area:name}
  .prof-row .col-comments,.prof-row .col-clips{display:none}
  .prof-row .col-weight{grid-area:weight;font-size:.84rem}
  .prof-row .col-origin{grid-area:origin;justify-self:start;max-width:100%;font-size:.78rem}
  .prof-row .col-action{grid-area:remove}
  .prof-remove,.arch-remove-btn{width:40px;height:40px;font-size:1rem;border-radius:10px}
  .prof-confirm{font-size:.84rem;padding:6px 12px;border-radius:8px}

  /* portfolio row card: name · groups · remove, comment underneath */
  .arch-row{grid-template-columns:minmax(0,1fr) auto 40px;
            grid-template-areas:"name groups remove" "comments comments comments";
            background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:12px;
            padding:8px 8px 8px 10px;margin-bottom:8px;row-gap:2px}
  .arch-row > .col-name{grid-area:name}
  .arch-row > .col-groups{grid-area:groups;justify-content:flex-end;max-width:90px;min-height:40px;padding:0 4px}
  .arch-row > .col-comments{grid-area:comments}
  .arch-row > .col-clips,.arch-row > .col-weight{display:none}
  .arch-row > .col-action{grid-area:remove}
  .arch-name-input{font-size:1.02rem;height:40px}
  .arch-comments-input{font-size:.88rem;height:36px}
  .arch-edit-pen{opacity:.85;width:40px;height:40px;font-size:.95rem;border-radius:10px}
  .grp-patch{width:16px;height:16px;border-radius:4px}

  #source-footer,#archive-footer{padding:10px 12px;gap:10px}
  #archive-footer{margin:0 -12px;border-radius:0}
  #add-btn,#merge-btn,#remove-sel-btn,#clear-source-btn{height:48px;font-size:.95rem;padding:0 16px;border-radius:10px}
  #add-btn{flex:1;justify-content:center}
  #sel-count{font-size:.88rem}
  #drop-zone{padding:16px 12px}

  #groups-section{max-height:40%}
  #groups-hdr{min-height:54px}
  #groups-hdr > span{font-size:.84rem}
  .group-row{grid-template-columns:18px 1fr auto 40px;padding:10px 12px;min-height:52px}
  .group-name{font-size:1rem}
  .grp-swatch{width:18px;height:18px}
  .group-del{width:40px;height:40px;font-size:1rem}

  /* modals full-page */
  .sm-modal{align-items:stretch}
  .sm-box,.sm-box.wide{width:100%;max-width:100%;max-height:none;min-height:100dvh;border-radius:0;border:none;
          padding:max(18px,env(safe-area-inset-top)) 18px 28px;gap:14px}
  .modal-hdr{font-size:1.08rem}
  .modal-desc{font-size:.92rem}
  .sm-box label{font-size:.92rem}
  .sm-box input[type=text]{height:48px;font-size:1rem;border-radius:10px}
  .modal-actions{gap:10px}
  .modal-cancel,.modal-plain,.modal-confirm{height:48px;font-size:.95rem;flex:1 1 auto;border-radius:10px}
  .snap-row{padding:12px}
  .snap-restore,.snap-del{height:42px}
  .snap-del{width:42px}
  #snap-take-row{flex-direction:column}
  #snap-take-row input{flex:none}
  #wipe-zone-body{flex-direction:column;align-items:stretch}
  #wipe-portfolio-btn{height:48px;font-size:.95rem}
  .snap-prev-row{grid-template-columns:1fr auto}
  .snap-prev-cmt{grid-column:1 / -1}
  .color-choice{width:36px;height:36px;border-radius:8px}
  .member-item{padding:10px;font-size:1rem}
  .member-item input{width:22px;height:22px}
  .leave-btn{height:40px}

  #help-modal{padding:0}
  #help-box{width:100%;min-height:100dvh;border-radius:0;border:none}
  #help-header{font-size:1rem;padding:8px 10px 8px 16px}
  #help-body{padding:16px 18px 28px}
  .help-section p,.help-section li{font-size:.95rem}
}