/* Global variables */
:root{
  --bg: #0b1020;
  --panel: #10172a;
  --text: #d1d5db;
  --muted: #94a3b8;
  --brand: #2563eb;
  --brand-600: #1d4ed8;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --line: #23314d;
  --chip: #1f2937;
  --bp-lg: 1024px;
  --bp-md: 768px;
  --bp-sm: 640px;
  --bp-xs: 480px;
}

/* Base layout */
html,body{height:100%;}
body{margin:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text);} 

.layout{display:flex; min-height:100vh; position:relative;}
.sidebar{width:240px; background: #0f162b; color: var(--text); padding: 1rem 0; border-right:1px solid var(--line); transition: transform .22s ease-in-out;} 
.sidebar h1{font-size:1rem; margin:0 1rem 1rem; padding-bottom:.75rem; border-bottom:1px solid var(--line); letter-spacing:.04em; color:#fff}
.nav a{display:block; padding:.65rem 1rem; text-decoration:none; color: var(--muted); border-left:3px solid transparent;}
.nav a:hover{background:#0d1427; color:#fff}
.nav a.active{background:#0d1427; color:#fff; border-left-color: var(--brand)}

.sidebar-backdrop{display:none;}
.sidebar-toggle{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line); background:#0b1224; color:var(--text); padding:.45rem .75rem; border-radius:8px; cursor:pointer; font-size:.95rem;}
.sidebar-toggle span.icon{font-size:1.1rem; line-height:1;}
.sidebar-toggle:focus-visible{outline:2px solid rgba(96,165,250,.55); outline-offset:3px;}

.content{flex:1; padding:1.25rem; min-width:0;}
.topbar{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem;}
.topbar-left{display:flex; align-items:center; gap:.75rem;}
.topbar-right{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.95rem; flex-wrap:wrap; justify-content:flex-end;}
.topbar-title{font-size:1.05rem; font-weight:600; letter-spacing:.03em; color:#f1f5f9; text-transform:uppercase;}
.logout a{color:#eab308; text-decoration:none}
.panel{background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:1rem; box-shadow: 0 8px 24px rgba(0,0,0,.25)}

.panel + .panel{margin-top:1rem;}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
select,
textarea{
  background:#0b1224;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.5rem .65rem;
  color:var(--text);
  font:inherit;
  width:100%;
  box-sizing:border-box;
}

textarea{min-height:140px;}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
  outline:2px solid rgba(96,165,250,.35);
  outline-offset:2px;
}

input::placeholder,
textarea::placeholder{color:rgba(148,163,184,.8);}

select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, rgba(148,163,184,.8) 50%), linear-gradient(135deg, rgba(148,163,184,.8) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 4px), calc(100% - 12px) calc(50% - 4px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

select:disabled,
input:disabled,
textarea:disabled{opacity:.65; cursor:not-allowed;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.muted{color:var(--muted);}

@media (max-width: 1024px){
  .layout{flex-direction:column;}
  .sidebar{position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); width:min(260px, 82vw); z-index:1500; box-shadow:0 18px 46px rgba(0,0,0,.45);}
  body.sidebar-open .sidebar{transform:translateX(0);}
  .sidebar-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1400;}
  body.sidebar-open .sidebar-backdrop{opacity:1; pointer-events:auto;}
  .sidebar-toggle{display:inline-flex;}
  .content{padding:1.25rem 1.1rem 2.5rem;}
  .topbar{margin-bottom:1.25rem;}
}

@media (min-width: 1025px){
  .sidebar{transition:transform .22s ease-in-out;}
  body.sidebar-collapsed .sidebar{display:none;}
  body.sidebar-collapsed .content{padding-left:1.25rem;}
}

@media (max-width: 768px){
  .topbar{flex-wrap:wrap; align-items:flex-start;}
  .topbar-left{width:100%; justify-content:space-between;}
  .topbar-right{width:100%; justify-content:flex-start; text-align:left; gap:.6rem;}
  .actions{flex-wrap:wrap;}
}

@media (max-width: 640px){
  .content{padding:.9rem;}
  .topbar{gap:.75rem; align-items:flex-start;}
  .topbar-right{font-size:.9rem; width:100%; justify-content:flex-start;}
  .panel{padding:.85rem;}
}

@media (max-width: 480px){
  .content{padding:.75rem;}
  .panel{padding:.75rem;}
  .topbar-right{font-size:.85rem;}
}

.flash{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem;}
.alert{padding:.65rem .85rem; border-radius:8px; border:1px solid var(--line); background:#0d1427; color:var(--text); font-weight:500;}
.alert.success{border-color:#047857; color:#34d399}
.alert.error{border-color:#7f1d1d; color:#fca5a5}
.alert.warning{border-color:#92400e; color:#fbbf24}
.alert.info{border-color:#1d4ed8; color:#93c5fd}

.page-subheader{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap;}
.jobs-filters{display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end;}
.jobs-filters .filter{display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; color:var(--muted);}
.jobs-filters input,
.jobs-filters select{background:#0b1224; border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; color:var(--text); min-width:140px;}
.jobs-filters input:focus,
.jobs-filters select:focus{outline:2px solid rgba(96,165,250,.35);}
.jobs-summary{color:var(--muted); font-size:.9rem; display:flex; gap:.45rem; align-items:center;}
@media (max-width: 768px){
  .page-subheader{align-items:flex-start;}
  .jobs-summary{width:100%; justify-content:flex-start;}
}

@media (max-width: 640px){
  .jobs-filters{width:100%;}
  .jobs-filters .filter{width:100%;}
  .jobs-filters input,
  .jobs-filters select{min-width:0; width:100%;}
}

/* Dropzone */
.dropzone{border:2px dashed #334155; padding:1.5rem; text-align:center; border-radius:8px; background:#0d1427; color:#93a3bf;}
.dropzone.drag{background:#0a1a35; border-color:#0ea5e9;}

@media (max-width: 640px){
  .dropzone{padding:1.2rem;}
}

@media (max-width: 480px){
  .dropzone{padding:1rem;}
}

/* Table */
table{width:100%; border-collapse: collapse; font-size:.9rem;}
th, td{padding:.6rem .7rem; text-align:left;}
th{background:#0d1427; color:#e5e7eb; font-weight:600; position:sticky; top:0;}
tr{border-bottom:1px solid var(--line)}
tr:nth-child(even){background:#0d1427}

.table-wrap{width:100%; overflow-x:auto; margin-top:1rem; position:relative;}
.table-wrap table{min-width:720px;}
@media (max-width: 1024px){
  .table-wrap table{min-width:640px;}
}
@media (max-width: 768px){
  .table-wrap{overflow:visible;}
  .table-wrap table{min-width:0;}
}

/* Jobs table fixed layout and column widths per breakpoint */
.jobs-table{table-layout: fixed; width:100%;}
.jobs-table th, .jobs-table td{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jobs-table td.actions-cell .btn-group{display:flex; gap:.45rem; flex-wrap:wrap;}

/* Desktop (>=1025px) - widths as percentages */
@media (min-width: 1025px){
  .jobs-table col.col-filename{width:14%}
  .jobs-table col.col-status{width:8%}
  .jobs-table col.col-stage{width:20%}
  .jobs-table col.col-uploaded{width:10%}
  .jobs-table col.col-pages{width:6%}
  .jobs-table col.col-pdfsize{width:6%}
  .jobs-table col.col-outsize{width:6%}
  .jobs-table col.col-task{width:10%}
  .jobs-table col.col-actions{width:20%}
}

/* Tablet (641px–1024px) */
@media (min-width: 641px) and (max-width: 1024px){
  .jobs-table col.col-filename{width:16%}
  .jobs-table col.col-status{width:8%}
  .jobs-table col.col-stage{width:18%}
  .jobs-table col.col-uploaded{width:10%}
  .jobs-table col.col-pages{width:6%}
  .jobs-table col.col-pdfsize{width:8%}
  .jobs-table col.col-outsize{width:8%}
  .jobs-table col.col-task{width:8%}
  .jobs-table col.col-actions{width:18%}
}
/* Mobile (<=768px): convert jobs table rows into cards */
@media (max-width: 768px){
  .jobs-table colgroup{display:none;}
  .jobs-table thead{display:none;}
  .jobs-table{table-layout:auto;}
  .jobs-table tbody{display:flex; flex-direction:column; gap:.85rem;}
  .jobs-table tr{display:flex; flex-direction:column; gap:.45rem; border:1px solid var(--line); border-radius:12px; padding:.9rem; background:#0d1427; box-shadow:0 10px 28px rgba(0,0,0,.22);}
  .jobs-table tr:nth-child(even){background:#0d1427;}
  .jobs-table td{display:flex; gap:.6rem; align-items:flex-start; padding:0; border-bottom:0; white-space:normal; overflow:visible; text-overflow:initial; word-break:break-word;}
  .jobs-table td::before{content:attr(data-label); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); min-width:108px; flex:0 0 auto; padding-top:.15rem;}
  .jobs-table td.stage-cell{flex-direction:column;}
  .jobs-table td.stage-cell::before{margin-bottom:.2rem;}
  .jobs-table td.actions-cell{flex-direction:column;}
  .jobs-table td.actions-cell::before{margin-bottom:.35rem;}
  .jobs-table td.actions-cell .btn-group{display:flex; flex-direction:column; gap:.45rem; width:100%;}
  .jobs-table td.actions-cell .btn{width:100%;}
  .jobs-table td code{word-break:break-all;}
}

/* Generic stacked table layout for narrow screens */
.stack-table{width:100%; border-collapse:collapse;}
.stack-table th,
.stack-table td{padding:.6rem .7rem; text-align:left;}

@media (max-width: 768px){
  .stack-table colgroup{display:none;}
  .stack-table thead{display:none;}
  .stack-table tbody{display:flex; flex-direction:column; gap:.75rem;}
  .stack-table tr{display:flex; flex-direction:column; gap:.45rem; border:1px solid var(--line); border-radius:12px; padding:.85rem; background:#0d1427; box-shadow:0 10px 24px rgba(0,0,0,.22);}
  .stack-table tr:nth-child(even){background:#0d1427;}
  .stack-table td{display:flex; gap:.55rem; align-items:flex-start; padding:0 !important; border-bottom:0 !important; white-space:normal; overflow:visible; text-overflow:initial; word-break:break-word;}
.stack-table td::before{content:attr(data-label); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); min-width:96px; flex:0 0 auto; padding-top:.12rem;}
  .stack-table td.actions{flex-direction:column;}
  .stack-table td.actions::before{margin-bottom:.3rem;}
  .stack-table td.actions .btn{width:100%; justify-content:center;}
  .stack-table td.actions details{width:100%;}
  .stack-table td.actions details summary{width:100%; justify-content:center;}
  .stack-table td.actions form{width:100%;}
}

@media (max-width: 480px){
  .stack-table td::before{min-width:80px;}
}

.kv-table{width:100%; border-collapse:collapse;}
.kv-table th,
.kv-table td{padding:.55rem .75rem; text-align:left; border-bottom:1px solid var(--line);}
.kv-table th{font-weight:600; color:#e5e7eb; width:220px;}

@media (max-width: 640px){
  .kv-table tbody{display:flex; flex-direction:column; gap:.75rem;}
  .kv-table tr{display:flex; flex-direction:column; gap:.25rem; border:1px solid var(--line); border-radius:10px; padding:.75rem; background:#0d1427; box-shadow:0 8px 20px rgba(0,0,0,.2);}
  .kv-table th,
  .kv-table td{padding:0; border:0; width:100%;}
  .kv-table th{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  .kv-table td{color:#e2e8f0; font-weight:600;}
}

.table-wrap.loading tbody{opacity:.25; transition:opacity .2s ease;}
.table-empty{margin-top:1rem; padding:.85rem; border:1px dashed var(--line); border-radius:10px; text-align:center; color:var(--muted); background:#0d1427;}
.table-skeleton{display:none; position:absolute; inset:64px 1rem 1rem; pointer-events:none; background:linear-gradient(180deg, rgba(11,16,32,.88) 0%, rgba(11,16,32,.6) 100%); border-radius:12px; padding:1rem; backdrop-filter:blur(3px); gap:.7rem; flex-direction:column;}
.table-wrap.loading .table-skeleton{display:flex;}
.skeleton-row{display:flex; gap:.75rem; flex-wrap:wrap;}
.skeleton-box{flex:1 1 18%; min-width:120px; height:14px; border-radius:999px; background:linear-gradient(90deg, rgba(148,163,184,.15) 0%, rgba(148,163,184,.45) 50%, rgba(148,163,184,.15) 100%); background-size:220px 100%; animation:skeleton-shimmer 1.2s ease-in-out infinite;}
@keyframes skeleton-shimmer{0%{background-position:-220px 0;}100%{background-position:220px 0;}}

#vmGrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.75rem;}
#vmGrid img{display:block; width:100%; border-radius:6px; background:#0b1224;}
.download-thumb{border:1px solid var(--line); border-radius:8px; padding:.6rem; background:#0b1224; display:flex; flex-direction:column; gap:.35rem;}
.download-thumb-caption{color:var(--muted); font-size:.85rem;}

@media (max-width: 768px){
  #vmGrid{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));}
}

@media (max-width: 640px){
  #vmGrid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
}

.jobs-pagination{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:.85rem; font-size:.9rem; color:var(--muted); flex-wrap:wrap;}
.jobs-pagination .pager{display:flex; gap:.5rem; align-items:center;}
.jobs-pagination .btn{min-width:96px;}
.jobs-pagination .page-indicator{font-weight:600; color:#e2e8f0;}

/* Button widths per breakpoint to balance column space */
.btn-fixed{min-width:96px;}
@media (min-width: 1025px){ .btn-fixed{width:110px} }
@media (min-width: 641px) and (max-width: 1024px){ .btn-fixed{width:96px} }
@media (max-width: 768px){ .btn-fixed{width:100%; min-width:0;} }
/* Stage column: concise, let colgroup control width */
.stage-cell{white-space: nowrap; overflow: hidden; text-overflow: ellipsis}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.4rem; border:none; border-radius:8px; padding:.45rem .8rem; cursor:pointer; font-weight:600; transition: transform .06s ease, background .15s ease;}
.btn:active{transform: translateY(1px)}
/* Fixed width so Start/Cancel/Delete never shift layout */
.btn-fixed{justify-content:center}
.btn-primary{background: var(--brand); color:#fff}
.btn-primary:hover{background: var(--brand-600)}
.btn-secondary{background:#e5e7eb; color:#111}
.btn-secondary:hover{background:#d1d5db}
.btn-success{background: var(--success); color:#fff}
.btn-success:hover{filter:brightness(.95)}
.btn-danger{background: var(--danger); color:#fff}
.btn-danger:hover{filter:brightness(.95)}
details summary.btn::-webkit-details-marker{display:none;}
details summary.btn::marker{content:'';}

/* Chips / badges */
.chip{display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.75rem; background:var(--chip); color:#cbd5e1}
.chip.success{background:#053d2f; color:#34d399}
.chip.warn{background:#3c2f05; color:#fbbf24}
.chip.info{background:#0f172a; color:#93c5fd}
.chip.fail{background:#3a0a0a; color:#fca5a5}

/* Admin utilities */
#frmAdd{gap:.75rem;}
#frmAdd div{min-width:220px;}

@media (max-width: 768px){
  #frmAdd div{width:calc(50% - .5rem);}
}

@media (max-width: 640px){
  #frmAdd{flex-direction:column; align-items:stretch;}
  #frmAdd div{width:100%; min-width:0;}
  #frmAdd button{width:100%;}
}

.table-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;}
.table-actions .btn{white-space:nowrap;}
.table-actions details{flex:1 1 auto;}

@media (max-width: 768px){
  .table-actions .btn{flex:1 1 calc(33% - .4rem);} 
}

@media (max-width: 640px){
  .table-actions{gap:.5rem;}
  .table-actions .btn{flex:1 1 calc(50% - .5rem);}
}

@media (max-width: 480px){
  .table-actions .btn{flex:1 1 100%;}
  .table-actions details{width:100%;}
}

.form-inline{display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end;}
.form-inline .form-field{display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color:var(--muted);}
.form-inline .form-field label{font-weight:500;}
.form-inline .form-inline-checkbox{display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.9rem; margin-left:.25rem;}
.form-inline .form-inline-checkbox input{width:auto;}

@media (max-width: 640px){
  .form-inline{flex-direction:column; align-items:stretch;}
  .form-inline .form-inline-checkbox{margin-left:0;}
}

.inline-setpwd{display:flex; gap:.35rem; align-items:center; margin-top:.35rem;}
.inline-setpwd input{flex:1 1 180px;}

@media (max-width: 640px){
  .inline-setpwd{flex-direction:column; align-items:stretch;}
  .inline-setpwd input{width:100%; flex:1 1 auto;}
  .inline-setpwd button{width:100%;}
}

.toolbar-flex{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.toolbar-flex .btn{white-space:nowrap;}

/* Modals */
.modal-overlay{position:fixed; inset:0; background: rgba(0,0,0,.60); z-index:1000; display:none; align-items:center; justify-content:center;} 
.modal{background:#0d1427; width:90%; max-width:1200px; max-height:90vh; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 20px 60px rgba(0,0,0,.5);} 
.modal-header{display:flex; justify-content:space-between; align-items:center; padding:.7rem 1rem; background:#0b1224; color:#fff; border-bottom:1px solid var(--line)}
.modal-body{padding:1rem; overflow:auto; flex:1 1 auto;}
.modal-footer{display:flex; justify-content:flex-end; gap:.6rem; padding:.7rem 1rem; border-top:1px solid var(--line); flex-wrap:wrap;}

.modal-header,
.modal-footer{flex:0 0 auto;}

@media (max-width: 768px){
  .modal-overlay .modal{width:min(100vw, 640px); max-height:calc(100vh - 2rem);}
  .modal-overlay .modal-footer{justify-content:center;}
  .modal-overlay .modal-footer .btn{flex:1 1 auto;}
}

@media (max-width: 640px){
  .modal-overlay{align-items:stretch;}
  .modal-overlay .modal{width:100vw; height:100vh; max-height:none; border-radius:0;}
  .modal-overlay .modal-header{position:sticky; top:0; z-index:2;}
  .modal-overlay .modal-footer{position:sticky; bottom:0; z-index:2; background:#0b1224; border-top:1px solid var(--line);}
  .modal-overlay .modal-body{padding:1rem 1rem 1.5rem;}
  .modal-overlay .modal-footer .btn{width:100%;}
}

@media (max-width: 480px){
  .modal-overlay .modal-body{padding:.85rem .85rem 1.4rem;}
  .modal-overlay .modal-header,
  .modal-overlay .modal-footer{padding:.65rem .85rem;}
}

/* Train grid */
#trainGrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap:1rem;}

@media (max-width: 1024px){
  #trainGrid{grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
}

@media (max-width: 768px){
  #trainGrid{grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
}

@media (max-width: 640px){
  #trainGrid{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
}
.tile{position:relative; background:#0b1224; border:1px solid var(--line); border-radius:10px; padding:.5rem; text-align:center; display:flex; flex-direction:column; min-width:0;}
.tile.landscape{aspect-ratio: 4 / 3}
.tile.portrait{aspect-ratio: 3 / 4}
.tile img{width:100%; height:100%; object-fit:contain; cursor:pointer; display:block}
.tile .cap{margin-top:.35rem; font-size:.8rem; color:#a7b1c2}
.deg{position:absolute; top:6px; left:6px; background:#111827; color:#fff; font-size:.7rem; padding:2px 6px; border-radius:10px; opacity:.9}
.ctrls{position:absolute; top:6px; right:6px; display:flex; gap:6px}
.ctrls button{background:#1f2937; color:#e5e7eb; border:none; padding:2px 6px; border-radius:6px; cursor:pointer}
.ctrls button:hover{background:#334155}

/* Excluded training tiles: dim + badge */
.tile.excluded{opacity:.5}
.tile.excluded::after{
  content: 'excluded';
  position:absolute; bottom:6px; left:6px;
  background: rgba(245, 158, 11, .15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, .35);
  font-size:.7rem; padding:2px 6px; border-radius:10px;
  letter-spacing:.02em;
}

/* Header actions */
.actions{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;}
.page-header{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem;}
.page-title{margin:0; font-size:1.45rem; color:#e2e8f0;}
@media (max-width: 768px){
  .page-header{align-items:flex-start; gap:.75rem;}
}

@media (max-width: 640px){
  .actions{width:100%; justify-content:stretch;}
  .actions .btn{flex:1 1 48%;}
}

@media (max-width: 480px){
  .actions .btn{flex:1 1 100%;}
}

/* Search page */
.search-page h2{margin:0 0 1rem;}
.search-controls{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; position:relative;}
.btn-compact{padding:.35rem .7rem; font-size:.85rem; line-height:1.2;}
.search-status{margin-top:6px; font-size:.9rem;}
.query-rows{display:flex; flex-direction:column; gap:.5rem; width:100%;}
.query-row{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;}
.query-row input[type="text"]{flex:1; min-width:220px;}
.menu{position:absolute; top:100%; right:0; background:#0d1427; border:1px solid var(--line); border-radius:8px; padding:.65rem .75rem; box-shadow:0 14px 40px rgba(0,0,0,.35); z-index:20;}
.menu label{display:block; margin:4px 0; color:var(--text); font-size:.9rem;}
.menu.hidden{display:none;}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #475569; border-radius:6px; background:#1e293b; color:#e2e8f0; cursor:pointer; transition:background .15s ease, border-color .15s ease;}
.icon-btn:hover{background:#334155; border-color:#64748b;}
.icon-btn.add{color:#0ea5e9; border-color:#38bdf8; background:rgba(14,165,233,.12);}
.icon-btn.rem{color:#f87171; border-color:#fca5a5; background:rgba(248,113,113,.12);}
.results-grid{margin-top:12px; display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));}
.result-card{border:1px solid rgba(148,163,184,.25); border-radius:12px; padding:12px; background:#0b1224; color:var(--text); box-shadow:0 10px 28px rgba(0,0,0,.22); display:flex; flex-direction:column; gap:.45rem; transition:transform .12s ease, box-shadow .12s ease; min-width:0;}
.result-card .meta{font-size:.85rem; color:var(--muted);}
.result-card .thumb{max-width:100%; border-radius:8px; display:block;}
.result-card:hover{cursor:pointer; transform:translateY(-2px); box-shadow:0 14px 36px rgba(37,99,235,.25);}
.chip.kie{background:#fde68a; color:#78350f;}
.chip.ocr{background:#d1fae5; color:#047857;}
.chip.fusion{background:#e0e7ff; color:#3730a3;}

#viewer.modal{position:fixed; inset:0; z-index:2200; display:none; align-items:center; justify-content:center; width:100%; height:100%; max-width:none; max-height:none; padding:0; background:transparent; border:none; box-shadow:none;}
#viewer.modal.hidden{display:none;}
#viewer.modal:not(.hidden){display:grid; place-items:center;}
#viewer.modal .overlay{position:absolute; inset:0; background:rgba(0,0,0,.65); z-index:0;}
#viewer.modal .window{position:relative; z-index:1; margin:0; width:clamp(920px, 75vw, 1440px); height:clamp(600px, 75vh, 960px); max-height:clamp(600px, 75vh, 960px); background:#0b1020; color:var(--text); border-radius:12px; border:1px solid var(--line); display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden;}
#viewer.modal .toolbar{display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:#0f162b;}
#viewer.modal .toolbar .right{display:flex; gap:.4rem; align-items:center;}
#viewer.modal .toolbar button{border:none; background:#1f2937; color:#e2e8f0; padding:.35rem .65rem; border-radius:6px; cursor:pointer;}
#viewer.modal .toolbar button:hover{background:#334155;}
#viewer-close{background:#ef4444; color:#fff; font-weight:700; padding:.35rem .7rem;}
#viewer-close:hover{background:#dc2626;}
.viewer-flex{display:flex; gap:12px; align-items:stretch; padding:12px; flex:1 1 auto; min-height:0; height:100%; overflow:hidden;}
.viewer-main{position:relative; flex:1 1 auto; min-height:0; display:flex; justify-content:center; align-items:center; overflow:auto; max-height:100%; overscroll-behavior:contain; scrollbar-gutter:stable both-edges;}
.viewer-canvas{position:relative; display:inline-block; max-width:100%; max-height:100%; margin:0 auto; overflow:hidden;}
#viewer-img{max-width:100%; max-height:100%; display:block;}
.viewer-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); z-index:3;}
.viewer-main-sel{position:absolute; top:8px; left:8px; background:#34d399; color:#073b2a; border-radius:6px; padding:2px 8px; font-size:.85rem; font-weight:700; z-index:4;}
.viewer-canvas.selected{outline:2px solid #34d399; box-shadow:0 0 0 2px rgba(52,211,153,.35);}
.viewer-guard{position:absolute; inset:0; z-index:2; background:transparent;}
.viewer-side{flex:0 0 240px; width:240px; height:100%; max-height:80vh; min-height:0; overflow:auto; border-left:1px solid var(--line); padding:8px 10px; background:#0f172a; position:relative; z-index:1; overscroll-behavior:contain; scrollbar-gutter:stable both-edges;}
.viewer-side-header{font-weight:600; margin-bottom:6px; color:#e5e7eb;}
.viewer-thumbs{display:flex; flex-direction:column; gap:6px; overscroll-behavior:contain;}
.thumb-item{position:relative; border:1px solid #334155; border-radius:8px; padding:4px; background:#0b1224; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; overflow:hidden;}
.thumb-item.active{outline:2px solid #60a5fa;}
.thumb-item.selected{border-color:#34d399; box-shadow:0 0 0 2px rgba(52,211,153,.35);}
.thumb-item canvas{display:block; width:100%; height:auto; max-width:100%; border-radius:4px;}
.thumb-item .sel{position:absolute; top:4px; left:4px; background:#34d399; color:#073b2a; border-radius:4px; padding:2px 6px; font-size:.75rem; font-weight:700;}
.thumb-item .idx{position:absolute; bottom:4px; right:6px; background:#0b1020; color:#e2e8f0; border-radius:4px; padding:1px 6px; font-size:.7rem;}

.bottom-nav{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:10px 12px; border-top:1px solid var(--line); background:#0f162b; flex-wrap:wrap; position:relative; z-index:2;}
.bottom-center{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;}
.bottom-right{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;}
.btn-large{font-size:1.05rem; padding:.55rem 1rem;}

@media (max-width: 1024px){
  .results-grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));}
  #viewer.modal .window{width:min(960px, 96vw); height:auto; max-height:min(90vh, 880px);}
  .viewer-flex{flex-direction:column;}
  .viewer-side{flex:0 0 auto; width:100%; max-height:260px; order:-1; border-left:0; border-bottom:1px solid var(--line); display:flex; flex-direction:column;}
}

@media (max-width: 768px){
  .search-controls{align-items:flex-start;}
  .results-grid{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));}
  .bottom-nav{flex-direction:column; align-items:stretch; padding:0.8rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px)); gap:0.85rem;}
  .bottom-center{width:100%; display:flex; flex-direction:row; gap:0.65rem; flex-wrap:nowrap;}
  .bottom-center .btn{flex:1 1 calc(50% - 0.4rem);}
  .bottom-right{width:100%; justify-content:space-between; gap:0.75rem;}
  .viewer-side{max-height:240px;}
  #viewer.modal .window{width:100vw; max-width:none; height:100vh; max-height:none; border-radius:0; border-left:0; border-right:0; padding-top:env(safe-area-inset-top, 0px);}
  #viewer.modal .overlay{background:rgba(0,0,0,.8);}
  .viewer-flex{padding:0.85rem 0.85rem 0.75rem; gap:0.75rem; flex:1 1 auto;}
  .viewer-main{flex:1 1 auto; align-items:center; padding:0;}
  .viewer-canvas{max-width:100%; max-height:100%;}
  #viewer-img{max-width:100%;}
}

@media (max-width: 640px){
  .query-row input[type="text"]{min-width:0; width:100%;}
  .bottom-right{justify-content:space-between;}
  .bottom-center{gap:0.6rem; flex-wrap:nowrap;}
  .bottom-center .btn{flex:1 1 50%; min-width:0;}
  .bottom-right .btn{flex:1 1 48%; min-width:0;}
  .viewer-flex{padding:0.75rem 0.75rem 0.5rem;}
  .viewer-side{flex:0 0 auto; order:2; width:100%; max-height:none; border:0; padding:0; background:transparent;}
  .viewer-side-header{font-size:0.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(148,163,184,.85); padding:0 0.75rem 0.35rem;}
  .viewer-thumbs{flex-direction:row; gap:0.6rem; overflow-x:auto; overflow-y:hidden; padding:0 0.75rem 0.65rem; margin:0 -0.75rem; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;}
  .viewer-thumbs::-webkit-scrollbar{height:6px;}
  .viewer-thumbs::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35); border-radius:999px;}
  .thumb-item{flex:0 0 96px; scroll-snap-align:center;}
  .thumb-item canvas{width:100%; height:auto;}
  #viewer-img{max-height:calc(100vh - 255px);}
  .btn-large{width:100%; justify-content:center;}
  .bottom-center{width:100%;}
  .bottom-right{width:100%;}
}

@media (max-width: 640px){
  #viewer.modal .toolbar{flex-wrap:wrap; gap:.5rem; padding:0.65rem 0.75rem;}
  #viewer.modal .toolbar .center{order:-1; width:100%; text-align:left; font-size:0.95rem;}
  #viewer.modal .toolbar .right{width:100%; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0.4rem;}
  #viewer.modal .toolbar button{width:100%; padding:0.45rem 0.5rem; font-size:0.9rem;}
}

@media (max-width: 480px){
  #viewer.modal .toolbar{gap:0.4rem; padding:0.6rem 0.7rem;}
  #viewer.modal .toolbar .center{font-size:0.88rem;}
  #viewer.modal .toolbar .right{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0.35rem;}
  #viewer.modal .toolbar button{padding:0.38rem 0.45rem; font-size:0.82rem;}
  .bottom-right{gap:0.6rem;}
}

#trainRunModal .modal-body{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; border-bottom:1px solid var(--line);}
#trainRunModal .modal-body label{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;}
#trainRunModal .modal-body label select{min-width:0;}
#trainRunModal .modal-body > *{flex:0 1 auto;}
#trainRunModal .modal-body button{white-space:nowrap;}

@media (max-width: 768px){
  #trainRunModal .modal-body{align-items:flex-start;}
  #trainRunModal .modal-body label{flex:1 1 calc(50% - .5rem);}
}

@media (max-width: 640px){
  #trainRunModal .modal-body label{flex-direction:column; align-items:flex-start; gap:.35rem;}
  #trainRunModal .modal-body label input:not([type="checkbox"]),
  #trainRunModal .modal-body label select{width:100%; margin-left:0 !important;}
  #trainRunModal .modal-body > button{flex:1 1 48%; width:100%;}
  #trainRunModal .modal-body label input[type="checkbox"]{width:auto;}
}

@media (max-width: 480px){
  #trainRunModal .modal-body{gap:.6rem;}
  #trainRunModal .modal-body > button{flex:1 1 100%;}
}

@supports selector(:has(*)){
  #trainRunModal .modal-body label:has(input[type="checkbox"]){flex-direction:row; align-items:center;}
}

.train-autoscroll{margin-left:auto; display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.9rem;}
.train-autoscroll input{width:auto;}

@media (max-width: 640px){
  .train-autoscroll{margin-left:0;}
}

@media (max-width: 640px){
  .search-controls{flex-direction:column; align-items:stretch; gap:.4rem;}
  .search-controls > *{width:100%;}
  .search-controls .chip{align-self:flex-start;}
  .search-controls .menu{position:static; width:100%; margin-top:.25rem;}
}

@media (max-width: 480px){
  .results-grid{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));}
}

/* Toasts */
.toast-container{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:.5rem; z-index:2000}
.toast{background:#0d1427; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:.6rem .8rem; box-shadow:0 10px 30px rgba(0,0,0,.35); min-width:220px; max-width:360px; animation: slidein .15s ease-out;}
.toast.success{border-color:#065f46}
.toast.error{border-color:#7f1d1d}
.toast.info{border-color:#1e3a8a}
@keyframes slidein{from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:1}}

/* Global loading overlay */
.loading-overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:3000; background: rgba(0,0,0,.25); backdrop-filter: blur(1px);} 
.loading-box{display:flex; flex-direction:column; align-items:center; gap:.75rem; background: rgba(13,20,39,.85); border:1px solid var(--line); padding:1rem 1.25rem; border-radius:12px; box-shadow: 0 12px 40px rgba(0,0,0,.5);} 
.spinner{width:48px; height:48px; border:4px solid rgba(255,255,255,.2); border-top-color:#60a5fa; border-radius:50%; animation: spin 0.8s linear infinite}
.loading-text{color:#d1d5db; font-weight:600; letter-spacing:.03em}
@keyframes spin{to{transform: rotate(360deg)}}
/* Train info blocks */
.train-info .chip{padding:.1rem .5rem}
.train-info .progress{height:8px}
/* Prevent background scroll when overlays are open */
body.modal-open,
body.sidebar-open{ overflow: hidden; }

/* MFA layout */
.mfa-header{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem;}
.mfa-lead{color:var(--muted); max-width:720px; font-size:.95rem; margin:.35rem 0 0;}
.mfa-actions{display:flex; gap:.5rem;}
.mfa-grid{display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));}
.mfa-section{background:#0d1427; border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:1rem; min-height:0;}
.mfa-section-header{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;}
.mfa-section-header h3{margin:0; font-size:1.1rem; color:#e2e8f0;}
.mfa-section-header p{margin:.35rem 0 0; color:var(--muted); font-size:.9rem;}
.mfa-steps{margin:0; padding-left:1.1rem; color:var(--muted); font-size:.9rem; display:flex; flex-direction:column; gap:.35rem;}
.mfa-qr{display:flex; gap:1rem; align-items:center; flex-wrap:wrap;}
.mfa-qr img{background:#0b1224; border:1px solid var(--line); border-radius:8px; padding:.4rem; width:160px; height:160px; object-fit:contain;}
.mfa-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.mfa-secret{font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size:1.05rem; letter-spacing:.12em; background:#0b1224; padding:.45rem .6rem; border-radius:8px; display:inline-block; border:1px solid var(--line);}
.mfa-note{color:var(--muted); font-size:.8rem; display:block; margin-top:.35rem;}
.mfa-form{display:flex; flex-direction:column; gap:.5rem;}
.mfa-form label{font-size:.85rem; color:var(--muted);}
.mfa-form input[type="text"],
.mfa-form input[type="number"],
.mfa-form input[type="password"],
.mfa-form input[type="email"]{background:#0b1224; border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem; color:var(--text); font-size:1rem;}
.mfa-form input[type="text"]:focus{outline:2px solid rgba(96,165,250,.4);}
.mfa-inline-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem;}
.mfa-inline-form{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; background:#0b1224; border:1px solid var(--line); border-radius:10px; padding:.6rem .75rem;}
.mfa-inline-form input[type="text"]{background:#091020; border:1px solid var(--line); border-radius:8px; padding:.45rem .6rem; color:var(--text); min-width:120px;}
.mfa-inline-form button{margin-left:auto;}
.mfa-inline-label{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.mfa-key-list ul{list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-direction:column; gap:.6rem;}
.mfa-key-list li{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem; background:#0b1224; border:1px solid var(--line); border-radius:8px; padding:.65rem .8rem;}
.mfa-key-list li form{display:flex; align-items:center;}
.mfa-key-list li form button{white-space:nowrap;}
.mfa-meta{color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;}
.mfa-empty{color:var(--muted); font-size:.9rem; margin:0;}
.mfa-verify-grid{display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top:1.25rem;}
.mfa-remember{display:flex; align-items:center; gap:.45rem; font-size:.85rem; color:var(--muted);}
.mfa-remember input{width:1rem; height:1rem;}
.mfa-codes{display:grid; gap:.6rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top:1rem;}
.mfa-codes code{background:#0b1224; border:1px solid var(--line); border-radius:8px; padding:.55rem .65rem; text-align:center; font-size:1.05rem; letter-spacing:.18em;}
.mfa-device-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.8rem;}
.mfa-device-list.full li{background:#0b1224; border:1px solid var(--line); border-radius:10px; padding:.75rem .9rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;}
.mfa-device-list li{display:flex; justify-content:space-between; align-items:center; gap:.75rem;}
.device-meta{display:flex; flex-direction:column; gap:.2rem;}
.device-actions{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;}
.device-actions form{display:flex; gap:.4rem; align-items:center;}
.device-actions input[type="text"]{background:#0b1224; border:1px solid var(--line); border-radius:6px; padding:.4rem .6rem; color:var(--text);}
.mfa-trusted .btn-danger{background:var(--danger);}

@media (max-width: 640px){
  .mfa-grid{grid-template-columns: 1fr;}
  .mfa-verify-grid{grid-template-columns:1fr;}
  .mfa-qr{flex-direction:column; align-items:flex-start;}
}

@media (max-width: 640px){
  .mfa-inline-actions{flex-direction:column; align-items:stretch; width:100%;}
  .mfa-inline-actions > *{width:100%;}
  .mfa-inline-form{flex-direction:column; align-items:stretch;}
  .mfa-inline-form button{width:100%;}
  .device-actions{flex-direction:column; align-items:stretch;}
  .device-actions form{width:100%;}
  .device-actions button{width:100%;}
}

@media (max-width: 480px){
  .mfa-inline-form{gap:.4rem;}
}