body { background: #f4f6fb; font-family: 'Segoe UI', system-ui, sans-serif; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a237e, #3949ab); }
.login-card { width: 380px; }
.sidebar { width: 200px; min-height: calc(100vh - 56px); }
.sidebar .nav-link { border-radius: 8px; margin-bottom: 2px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,.15); }
.kpi-card { border-left: 4px solid #3949ab; }
.kpi-card .kpi-num { font-size: 1.9rem; font-weight: 700; color: #1a237e; }
.kpi-card .kpi-label { color: #666; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }
.kpi-click { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.kpi-click:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(26,35,126,.12); border-color: #3949ab !important; }
.drive-folder { cursor: pointer; border-radius: 4px; }
.drive-folder:hover { background: #f0f2f8; }
.table th { font-size: .8rem; text-transform: uppercase; color: #666; }
.badge-conf { background: #e8eaf6; color: #283593; }
/* Audio Vault folder browser */
.vault-folder { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; border: 1px solid #dfe3ef; }
.vault-folder:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(26,35,126,.12); border-color: #3949ab; }
#vault-crumb a { text-decoration: none; }
/* Trim modal — mobile audio-trimmer look */
.trim-modal { border-radius: 14px; overflow: hidden; border: 0; position: relative; }
.trim-header { background: #00579c; padding: .9rem 1rem; align-items: center; }
.trim-title .fw-bold { font-size: .95rem; max-width: 320px; }
.trim-body { background: #f4f6fb; padding: .9rem; }
.trim-fileinfo { padding: .15rem 0 .5rem; font-weight: 500; }
.trim-mode-row { display: flex; gap: .4rem; padding: 0 0 .5rem; }
.trim-mode-btn { flex: 1; border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 8px; padding: .35rem .5rem; font-size: .78rem; font-weight: 600; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.trim-mode-btn.active { background: #00579c; border-color: #00579c; color: #fff; }
.trim-mode-btn:active { transform: scale(.98); }
.trim-wave-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.trim-wave { width: 100%; height: 150px; display: block; border-radius: 6px; cursor: crosshair; touch-action: none; }
.trim-seekbar { padding: .5rem .2rem .15rem; cursor: pointer; touch-action: none; }
.trim-seek-track { position: relative; height: 24px; background: #e2e8f0; border-radius: 12px; }
.trim-seek-range { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #0284c7, #00579c); border-radius: 12px; pointer-events: none; }
.trim-seek-handle { position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #00579c; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: ew-resize; z-index: 2; pointer-events: none; }
.trim-seek-handle-l { left: clamp(13px, 0%, calc(100% - 13px)); }
.trim-seek-handle-r { left: clamp(13px, 100%, calc(100% - 13px)); }
.trim-seek-handle:active { transform: translate(-50%, -50%) scale(1.12); background: #e0f2fe; }
.trim-seek-playhead { position: absolute; top: 2px; bottom: 2px; width: 3px; background: #f59e0b; border-radius: 2px; transform: translateX(-50%); pointer-events: none; z-index: 1; }
.trim-time-row { display: flex; justify-content: space-between; padding: .35rem .2rem 0; }
.trim-time { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .78rem; color: #475569; }
.trim-time-total { color: #00579c; font-weight: 700; }
.trim-setrow { display: flex; gap: .5rem; padding: .5rem .2rem 0; }
.trim-setbtn { flex: 1; border: 1px solid #00579c; background: #fff; color: #00579c; border-radius: 8px; padding: .42rem .4rem; font-size: .8rem; font-weight: 600; }
.trim-setbtn:hover { background: #e0f2fe; }
.trim-setbtn:active { transform: scale(.98); }
.trim-saveblock { margin-top: .9rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .8rem; }
.trim-saveblock .trim-convert { width: 100%; background: #00579c; color: #fff; border: 0; border-radius: 8px; padding: .55rem 1.1rem; font-weight: 700; font-size: .95rem; }
.trim-saveblock .trim-convert:hover { background: #0070c0; }
.trim-saveblock .trim-convert:disabled { opacity: .6; }
.trim-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.28); padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); z-index: 2000; animation: trimSheetUp .22s cubic-bezier(.2,.8,.3,1); }
@keyframes trimSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.trim-sheet-title { font-weight: 700; font-size: .95rem; color: #1e293b; text-align: center; margin-bottom: .3rem; }
.trim-sheet-time { font-family: ui-monospace, Consolas, monospace; font-size: 1.7rem; font-weight: 700; color: #00579c; text-align: center; padding: .3rem 0 .6rem; }
.trim-wheel { display: flex; align-items: center; justify-content: center; gap: .15rem; background: #f1f5f9; border-radius: 12px; padding: .6rem .4rem; position: relative; user-select: none; -webkit-user-select: none; touch-action: none; }
.trim-wheel::before { content: ''; position: absolute; left: 8%; right: 8%; top: calc(50% - 19px); height: 38px; border-radius: 8px; background: #e0f2fe; z-index: 0; }
.trim-wheel-col { position: relative; width: 52px; height: 190px; overflow: hidden; cursor: ns-resize; z-index: 1; }
.trim-wheel-items { will-change: transform; }
.trim-wheel-item { height: 38px; line-height: 38px; text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; color: #94a3b8; font-weight: 600; }
.trim-wheel-item.sel { color: #00579c; font-size: 1.4rem; font-weight: 800; }
.trim-wheel-sep { font-family: ui-monospace, Consolas, monospace; font-size: 1.4rem; font-weight: 700; color: #00579c; z-index: 1; padding: 0 .1rem; }
.trim-sheet-nudge { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; }
.trim-btn-sm { width: 44px; height: 38px; border-radius: 9px; font-size: .8rem; }
.trim-sheet-actions { display: flex; gap: .6rem; margin-top: .8rem; }
.trim-sheet-actions .btn { flex: 1; }
.trim-controls { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .8rem 0 .5rem; }
.trim-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s ease, background .1s ease; }
.trim-btn:active { transform: scale(.93); }
.trim-btn-play { width: 60px; height: 60px; background: #00579c; border-color: #00579c; color: #fff; font-size: 1.35rem; box-shadow: 0 4px 12px rgba(0,87,156,.35); }
/* A–B repeat button states */
.trim-btn#trim-ab { width: 58px; font-size: .8rem; font-weight: 700; }
.trim-btn#trim-ab.trim-ab-on { background: #d97706; border-color: #d97706; color: #fff; box-shadow: 0 2px 8px rgba(217,119,6,.4); }
.trim-btn#trim-ab.trim-ab-loop { background: #059669; border-color: #059669; color: #fff; box-shadow: 0 2px 8px rgba(5,150,105,.5); }
.trim-label { color: #334155; font-weight: 600; }
.trim-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; background: #383838; border-radius: 10px; padding: .55rem .8rem; }
.trim-format { color: #cbd5e1 !important; display: flex; align-items: center; gap: .45rem; }
.trim-format-badge { background: #00579c; color: #fff; font-size: .68rem; font-weight: 700; padding: .18rem .45rem; border-radius: 5px; letter-spacing: .5px; }
.trim-convert { background: #00579c; color: #fff; border: 0; border-radius: 8px; padding: .45rem 1.1rem; font-weight: 600; font-size: .88rem; }
.trim-convert:hover { background: #0070c0; }
.trim-convert:disabled { opacity: .6; }
.alert-row td { vertical-align: middle; }
.upload-drop { border: 2px dashed #3949ab; border-radius: 12px; padding: 2rem; text-align: center; color: #3949ab; cursor: pointer; background: #eef1ff; }
.upload-drop:hover, .upload-drop-hover { background: #dde3ff; border-color: #1e88e5; color: #1e88e5; }

/* Mobile: off-canvas sidebar */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 1040;
    width: 220px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.25); }
  #sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 1035;
    background: rgba(0,0,0,.45);
  }
  #sidebar-backdrop.show { display: block; }
  main { padding: 1rem !important; }
}
@media (min-width: 768px) { #sidebar-backdrop { display: none; } }

/* Prevent wide tables from stretching the layout on small screens */
main { min-width: 0; }
.card { overflow-x: auto; }
html, body { overflow-x: hidden; }