/* ── Design Tokens ── */
:root, [data-theme="light"] {
  --bg:        #f8fafc;
  --bg-1:      #ffffff;
  --bg-2:      #f1f5f9;
  --primary:   #7c3aed;
  --primary-h: #6d28d9;
  --gold:      #d97706; /* slightly darker for light mode contrast */
  --gold-h:    #b45309;
  --danger:    #ef4444;
  --success:   #10b981;
  --info:      #0ea5e9;
  --text:      #0f172a;
  --text-muted:#64748b;
  --border:    rgba(124,58,237,.15);
  --glass:     rgba(124,58,237,.04);
  --glass-h:   rgba(124,58,237,.08);
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --sidebar-w: 240px;
  --font:      'Inter', system-ui, sans-serif;
  --transition:all .2s ease;
}

[data-theme="dark"] {
  --bg:        #0d0221;
  --bg-1:      #160a33;
  --bg-2:      #1e1040;
  --primary:   #7c3aed;
  --primary-h: #6d28d9;
  --gold:      #f59e0b;
  --gold-h:    #d97706;
  --danger:    #ef4444;
  --success:   #22c55e;
  --info:      #38bdf8;
  --text:      #f1f5f9;
  --text-muted:#94a3b8;
  --border:    rgba(124,58,237,.25);
  --glass:     rgba(124,58,237,.08);
  --glass-h:   rgba(124,58,237,.15);
  --shadow:    0 4px 24px rgba(0,0,0,.4);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5}
a{color:var(--primary);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
img{display:block;max-width:100%}
ul,ol{list-style:none}

/* ── Splash ── */
#app-splash{position:fixed;inset:0;z-index:9999;background:#ffffff;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.splash-title{font-size:2.75rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#3b82f6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.splash-spinner{width:32px;height:32px;border:2px solid rgba(124,58,237,.2);border-top-color:#7c3aed;border-radius:50%;animation:spin .8s linear infinite}

/* ── Display Mode ── */
#display-root,#display-wrap{position:fixed;inset:0;background:#000;overflow:hidden}
.display-layer{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:center;justify-content:center}
.display-layer.active{opacity:1}
.display-layer video,.display-layer img{width:100%;height:100%;object-fit:contain}
.fallback-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#ffffff}
.fallback-name{font-size:2.75rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#3b82f6,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fallback-sub{font-size:1rem;color:#94a3b8;font-weight:400}
.display-error{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);background:rgba(239,68,68,.15);border:1px solid var(--danger);color:var(--danger);padding:.5rem 1.5rem;border-radius:var(--radius);font-size:.875rem}
/* Not Authorised Screen */
.not-authorised-screen{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1e1040 0%,#0d0221 70%);display:flex;align-items:center;justify-content:center}
.not-authorised-box{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;padding:2rem}
.not-authorised-icon{font-size:6rem;line-height:1}
.not-authorised-box h2{font-size:2.5rem;font-weight:700;color:var(--gold)}
.not-authorised-box p{font-size:1.1rem;color:var(--text-muted);max-width:420px;line-height:1.6}

/* ── Admin Layout ── */
#admin-root{position:fixed;inset:0;overflow:hidden}
.admin-layout{display:flex;height:100%;overflow:hidden}

/* Sidebar */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);height:100%;background:var(--bg-1);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease;z-index:100}
.sidebar-brand{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1rem;border-bottom:1px solid var(--border)}
.sidebar-brand img{border-radius:8px}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-size:.95rem;font-weight:700;color:var(--text)}
.brand-version{font-size:.7rem;color:var(--text-muted)}
.sidebar-nav{flex:1;padding:.75rem .5rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .875rem;border:none;background:transparent;color:var(--text-muted);border-radius:var(--radius-sm);font-size:.9rem;width:100%;text-align:left;transition:var(--transition)}
.nav-item:hover{background:var(--glass);color:var(--text)}
.nav-item.active{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(124,58,237,.1));color:var(--primary);font-weight:600}
.nav-icon{font-size:1.1rem;width:1.5rem;text-align:center}
.sidebar-footer{padding:1rem;border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;overflow:hidden}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;flex-shrink:0}
.user-email{font-size:.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-actions{display:flex;gap:.5rem;align-items:center}
.signout-btn{justify-content:center}
/* Device Authorisation strip in sidebar footer */
.device-auth-strip{margin-top:.75rem;padding-top:.65rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.device-auth-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.device-auth-indicator--ok{background:var(--success)}
.device-auth-indicator--no{background:var(--danger)}
.device-auth-label{font-size:.72rem;color:var(--text-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-toggle{display:none;position:fixed;top:1rem;right:1rem;z-index:200;background:var(--primary);color:white;border:none;border-radius:var(--radius-sm);padding:.5rem .75rem;font-size:1.2rem;box-shadow:var(--shadow)}
.nav-separator{height:1px;background:var(--border);margin:.5rem .875rem}
.nav-item--display{color:var(--info) !important}
.nav-item--display:hover{background:rgba(14,165,233,.1) !important;color:var(--info) !important}
.nav-item--cast{color:#00b4d8 !important}
.nav-item--cast:hover{background:rgba(0,180,216,.1) !important;color:#00b4d8 !important}

/* Main */
.admin-main{flex:1;overflow-y:auto;background:var(--bg);min-height:0}
.tab-panel{display:none;padding:1.5rem;min-height:100%}
.tab-panel.active{display:block}

/* Content width limit for readability - approximately 50% on wide screens */
.admin-panel, .sequence-panel {
  width: 50%;
  min-width: 600px;
}
#panel-media {
  max-width: none;
}

/* Panel Header */
.panel-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.panel-header h2{font-size:1.4rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.panel-subtitle{color:var(--text-muted);font-size:.875rem;margin-top:.25rem}

/* Cards */
.card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border)}
.card-header h3{font-size:1rem;font-weight:600}
.card-body{padding:1.25rem}
.mt-4{margin-top:1rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border-radius:var(--radius-sm);border:none;font-size:.875rem;font-weight:500;transition:var(--transition);white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-h));color:white}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,.4)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--glass);color:var(--text);border-color:var(--primary)}
.btn-danger{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3)}
.btn-danger:hover{background:rgba(239,68,68,.25)}
.btn-sm{padding:.3rem .75rem;font-size:.8rem}
.btn-full{width:100%;justify-content:center}
.btn-icon{font-size:.95rem}
.btn-icon-close{background:transparent;border:none;color:var(--text-muted);font-size:1.2rem;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:var(--transition)}
.btn-icon-close:hover{background:rgba(239,68,68,.15);color:var(--danger)}

/* Forms */
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.875rem}
.form-group label{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.form-control{background:var(--bg-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:.55rem .875rem;font-size:.9rem;width:100%;transition:var(--transition)}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.form-control:disabled{opacity:.5;cursor:not-allowed}
.form-row{display:flex;gap:1rem;flex-wrap:wrap}
.form-row .form-group{flex:1;min-width:140px}
.form-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}
.inline-form{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.inline-form .form-control{min-width:260px}

/* Toggle */
.toggle-group{flex-direction:row;align-items:center;justify-content:space-between}
.toggle-switch{position:relative;display:inline-flex;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:var(--transition)}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:2px;top:2px;background:var(--text-muted);border-radius:50%;transition:var(--transition)}
.toggle-switch input:checked+.toggle-slider{background:rgba(124,58,237,.3);border-color:var(--primary)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:var(--primary)}

/* Drawer */
.drawer{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.5rem}
.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.drawer-header h3{font-size:1rem;font-weight:600}

/* Tabs */
.tab-bar{display:flex;gap:.5rem;margin-bottom:1.25rem;border-bottom:1px solid var(--border);padding-bottom:.75rem}
.tab-btn{background:transparent;border:none;color:var(--text-muted);padding:.4rem .875rem;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;transition:var(--transition)}
.tab-btn:hover{background:var(--glass);color:var(--text)}
.tab-btn.active{background:var(--glass-h);color:var(--primary)}
.tab-content{display:none}
.tab-content.active{display:block}

/* File Drop Zone */
.file-drop-zone{position:relative;border:2px dashed var(--border);border-radius:var(--radius);padding:2rem;text-align:center;transition:var(--transition);cursor:pointer}
.file-drop-zone:hover,.file-drop-zone.drag-over{border-color:var(--primary);background:var(--glass)}
.file-drop-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-hint{display:flex;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none}
.drop-icon{font-size:2rem}
.drop-types{font-size:.75rem;color:var(--text-muted)}
.link{color:var(--primary);cursor:pointer;text-decoration:underline;pointer-events:all}
.file-selected{color:var(--primary);font-size:.875rem;font-weight:500}

/* Progress */
.progress-wrap{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0}
.progress-bar{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--gold));border-radius:3px;transition:width .3s ease;width:0}

/* Media Gallery */
.media-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}
.gallery-section{margin-bottom:2rem}
.gallery-date-heading{font-size:.85rem;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;padding-bottom:.5rem;border-bottom:1px solid var(--border);margin-bottom:1rem}
.media-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column}
.media-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.media-thumb{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:1.5rem;position:relative;background-size:contain !important;background-position:center !important;background-repeat:no-repeat !important}
.media-thumb--video{background-color:#0d0221;background-image:linear-gradient(135deg,#1e1040,#0d0221)}
.media-thumb--image{background-color:#0d1a2d;background-image:linear-gradient(135deg,#1a2740,#0d1a2d)}

.video-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2);transition:var(--transition)}
.video-play-btn{width:40px;height:40px;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border:2px solid white;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:var(--transition)}
.media-card:hover .video-play-overlay{background:rgba(0,0,0,0)}
.media-card:hover .video-play-btn{transform:scale(1.1);background:rgba(255,255,255,0.4)}

.media-card-body{padding:.5rem .75rem;flex:1}
.media-card-title{font-size:.825rem;font-weight:600;margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-card-meta{display:none} /* Hidden as per request */

.media-card-actions{display:flex;gap:.35rem;padding:.4rem .5rem;border-top:1px solid var(--border)}
.media-card-actions .btn{flex:1;justify-content:center;padding:.35rem;font-size:1rem;min-height:32px}

/* --- Media Spreadsheet --- */
.media-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 250px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.search-input {
  width: 100%;
  padding: 0.65rem 0.65rem 0.65rem 2.5rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-select {
  padding: 0.6rem 2rem 0.6rem 1rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.btn-sort-dir {
  padding: 0.6rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--transition);
}

.btn-sort-dir:hover {
  background: var(--bg-2);
  border-color: var(--primary);
}

.media-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-1);
}

.media-table-header {
  display: grid;
  grid-template-columns: 80px 1fr 150px 100px;
  background: var(--bg-2);
  border-bottom: 2px solid var(--border);
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.media-table-row {
  display: grid;
  grid-template-columns: 80px 1fr 150px 100px;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

.media-table-row:last-child {
  border-bottom: none;
}

.media-table-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.media-table-thumb {
  width: 50px;
  height: 28px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.media-table-name {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 1rem;
}

.media-table-date {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.media-table-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}


/* Picker (legacy card styles kept for reference) */
.picker-card{cursor:pointer;border:2px solid transparent}
.picker-card.selected{border-color:var(--primary);background:var(--glass)}

/* Picker — spreadsheet table */
.picker-table-header{display:grid;grid-template-columns:44px 64px 1fr 90px 80px;padding:.55rem 1rem;background:var(--bg-2);border-bottom:2px solid var(--border);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);position:sticky;top:0;z-index:1}
.picker-table-row{display:grid;grid-template-columns:44px 64px 1fr 90px 80px;align-items:center;padding:.55rem 1rem;border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition)}
.picker-table-row:last-child{border-bottom:none}
.picker-table-row:hover:not(.picker-row-disabled){background:var(--glass)}
.picker-table-row.picker-row-selected{background:rgba(124,58,237,.12);border-left:3px solid var(--primary)}
.picker-row-disabled{opacity:.55;cursor:not-allowed}
.picker-check-cell{display:flex;align-items:center;justify-content:center}
.picker-check{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.picker-row-disabled .picker-check{cursor:not-allowed}
.picker-thumb{width:58px;height:33px;border-radius:4px;background-size:cover;background-position:center;background-color:var(--bg-2);border:1px solid var(--border)}
.picker-name{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.75rem}
.picker-duration{font-size:.8rem;color:var(--text-muted)}
#picker-table-wrap{overflow-y:auto;max-height:58vh}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:20px;font-size:.72rem;font-weight:600;white-space:nowrap}
.badge-image{background:rgba(56,189,248,.15);color:var(--info)}
.badge-video{background:rgba(245,158,11,.15);color:var(--gold)}
.badge-info{background:rgba(124,58,237,.15);color:#a78bfa}
.badge-time{background:rgba(34,197,94,.1);color:var(--success)}
.badge-priority{background:rgba(245,158,11,.1);color:var(--gold)}
.badge-gold{background:rgba(245,158,11,.2);color:var(--gold);border:1px solid rgba(245,158,11,.3)}

/* Schedules */
.sched-list{display:flex;flex-direction:column;gap:.75rem}
.sched-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;transition:var(--transition)}
.sched-card:hover{border-color:var(--primary)}
.sched-card--inactive{opacity:.55}
.sched-card-title{font-size:.95rem;font-weight:600;margin-bottom:.4rem}
.sched-card-meta{display:flex;gap:.4rem;flex-wrap:wrap}
.sched-card-controls{display:flex;align-items:center;gap:.5rem}

/* Day selector */
.day-selector{display:flex;gap:.5rem;flex-wrap:wrap}
.day-chip{cursor:pointer}
.day-chip input{display:none}
.day-chip span{display:block;padding:.3rem .65rem;border:1px solid var(--border);border-radius:20px;font-size:.8rem;font-weight:600;color:var(--text-muted);transition:var(--transition)}
.day-chip input:checked+span{background:var(--primary);color:white;border-color:var(--primary)}
.day-chip:hover span{border-color:var(--primary);color:var(--text)}

/* Sequence */
.sequence-panel{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-top:1rem}
.sequence-controls{display:flex;justify-content:flex-end;margin-bottom:1rem}
.seq-list{display:flex;flex-direction:column;gap:.5rem}

/* Each row is the draggable unit — touch-action:none prevents browser scroll interception */
.seq-item-row{
  display:flex;align-items:center;gap:.75rem;
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.65rem .85rem;
  cursor:grab;
  touch-action:none;  /* essential: stops iOS/Android treating the drag as a page scroll */
  user-select:none;-webkit-user-select:none;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  position:relative;
}
.seq-item-row:hover{border-color:var(--primary);background:var(--bg-2)}

/* Drag states */
.seq-item-row.seq-dragging{
  opacity:.35;
  border:2px dashed var(--primary);
  background:var(--glass);
  box-shadow:none;
}
.seq-item-row.seq-drag-over{
  border-color:var(--gold);
  background:rgba(245,158,11,.08);
  box-shadow:0 0 0 2px var(--gold);
  transform:scale(1.01);
}

/* Floating ghost clone that follows the pointer during drag */
.seq-drag-ghost{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  opacity:.88;
  transform:scale(1.03) rotate(.8deg);
  box-shadow:0 14px 44px rgba(0,0,0,.45);
  border-radius:var(--radius-sm);
  border:2px solid var(--primary);
  cursor:grabbing;
}

/* Grip dots handle (visual affordance only — whole row is draggable) */
.seq-drag-handle{
  font-size:1.1rem;
  color:var(--text-muted);
  opacity:.45;
  flex-shrink:0;
  line-height:1;
  cursor:grab;
  padding:0 2px;
}
.seq-item-row:hover .seq-drag-handle{opacity:.8;color:var(--primary)}

.seq-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}

/* Custom Inline Duration Input */
.seq-duration-input-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.seq-duration-input {
  width: 68px;
  padding: 3px 6px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  text-align: center;
  transition: all 0.2s ease;
}
.seq-duration-input:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.seq-duration-input:focus {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}

/* Change 4: allow name to wrap — removes the 2-letter truncation on mobile */
.seq-name{
  font-size:.92rem;font-weight:600;color:var(--text);
  white-space:normal;       /* allow wrapping */
  overflow-wrap:anywhere;   /* break long words if needed */
  word-break:break-word;
  line-height:1.3;
}
.seq-thumb{width:72px;height:41px;border-radius:6px;background-size:cover;background-position:center;background-color:var(--bg-2);flex-shrink:0;border:1px solid var(--border)}

/* Change 5: bin icon delete button — smaller than the old ✕ */
.btn-remove-seq{padding:.25rem .45rem;font-size:.85rem;border-radius:6px;margin-left:auto;flex-shrink:0;line-height:1}

/* Data Table */
.data-table{width:100%;border-collapse:collapse;font-size:.875rem}
.data-table th{padding:.625rem 1rem;text-align:left;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.data-table td{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.05)}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--glass)}
.col-actions{text-align:right;white-space:nowrap}
.uid-cell{font-size:.75rem}
.uid-text{color:var(--text-muted);font-family:monospace}
.email-chip{background:var(--glass);padding:.2rem .6rem;border-radius:20px}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:500;backdrop-filter:blur(4px)}
.modal-box{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);width:90%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal-box--wide{max-width:780px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-1);z-index:1}
.modal-header h3{font-size:1rem;font-weight:600}
.modal-form{padding:1.25rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.25rem;border-top:1px solid var(--border)}

/* Feedback */
.feedback-msg{font-size:.825rem;min-height:1.25rem;margin-top:.25rem}
.feedback-msg.error{color:var(--danger)}
.feedback-msg.success{color:var(--success)}

/* States */
.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem;color:var(--text-muted);text-align:center}
.empty-icon{font-size:2.5rem}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}

/* Auth */
.auth-screen{position:fixed;inset:0;background:radial-gradient(ellipse at 60% 40%,#2e1065 0%,var(--bg) 70%);display:flex;align-items:center;justify-content:center}
.auth-card{background:var(--bg-1);border:1px solid var(--border);border-radius:20px;padding:2.5rem;width:90%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:2rem}
.auth-logo img{border-radius:16px;box-shadow:0 0 30px rgba(124,58,237,.4)}
.auth-title{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,#fff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-subtitle{color:var(--text-muted);font-size:.875rem}
.login-form{display:flex;flex-direction:column;gap:.875rem}
.auth-footer{text-align:center;color:var(--text-muted);font-size:.8rem;margin-top:1.25rem}

/* Help */
.help-toc{padding:1rem 1.25rem}
.help-toc h3{font-size:.9rem;font-weight:600;margin-bottom:.5rem}
.toc-list{display:flex;flex-direction:column;gap:.3rem;padding-left:1.25rem;list-style:decimal}
.toc-list a{color:var(--primary);font-size:.875rem}
.help-section{padding:1.25rem}
.help-section h3{font-size:1.05rem;font-weight:700;margin-bottom:.875rem;color:var(--gold)}
.help-section h4{font-size:.9rem;font-weight:600;margin:.875rem 0 .4rem;color:var(--text)}
.help-section p,.help-section li{color:var(--text-muted);font-size:.875rem;line-height:1.7;margin-bottom:.4rem}
.help-section ul,.help-section ol{padding-left:1.25rem}
.help-section ul{list-style:disc}
.help-section ol{list-style:decimal}
.help-section code{background:var(--bg-2);padding:.15rem .4rem;border-radius:4px;font-size:.8rem;color:var(--gold)}
.help-tip,.help-warning{display:flex;gap:.75rem;padding:.875rem;border-radius:var(--radius-sm);margin:.875rem 0;font-size:.825rem}
.help-tip{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.2)}
.help-tip p,.help-warning p{color:var(--text);margin:0}
.help-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2)}
.help-table{width:100%;border-collapse:collapse;font-size:.825rem;margin:.75rem 0}
.help-table th{padding:.5rem .75rem;text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.help-table td{padding:.5rem .75rem;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text-muted)}

/* Upload form */
.upload-form{max-width:680px}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}

/* ── Responsive ── */
@media(max-width:768px){
  .sidebar{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-toggle{display:block}
  .admin-main{padding-top:1rem}
  .tab-panel{padding:1rem}
  .media-gallery{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .form-row{flex-direction:column}
  .form-row .form-group{min-width:auto}
  .panel-header{flex-direction:column;align-items:flex-start}
  .sched-card{flex-direction:column;align-items:flex-start}
  .admin-panel, .sequence-panel {
    width: 100%;
    min-width: auto;
  }
  /* Smaller thumbnail on mobile so media name has more horizontal room */
  .seq-thumb{width:54px;height:30px}
  /* Keep drag handle visible but compact */
  .seq-drag-handle{font-size:.9rem;padding:0}

  .media-table-header { display: none; }
  .media-table-row {
    grid-template-columns: 60px 1fr 80px;
    padding: 0.75rem;
  }
  .media-table-date { display: none; }
  .media-table-actions { grid-column: 3; }
}