@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900&display=swap');

/* ═══════════════════════════════════════════════════════════
   VARIABLES
═══════════════════════════════════════════════════════════ */
:root {
  --bg:              #070b14;
  --bg2:             #0d1117;
  --bg3:             #111827;
  --card:            rgba(255,255,255,0.03);
  --card-hover:      rgba(255,255,255,0.06);
  --border:          rgba(255,255,255,0.07);
  --border-accent:   rgba(37,211,102,0.3);

  --accent:          #25d366;
  --accent-dark:     #128c7e;
  --accent-light:    #4ade80;
  --accent-glow:     rgba(37,211,102,0.12);
  --accent-glow2:    rgba(37,211,102,0.22);

  --danger:          #f87171;
  --warning:         #fbbf24;

  --text:            #f1f5f9;
  --text2:           #94a3b8;
  --text3:           #475569;

  --sidebar-w:       260px;
  --topbar-h:        64px;
  --r:               12px;
  --r-lg:            16px;
  --r-xl:            20px;

  --shadow:          0 4px 24px rgba(0,0,0,.45);
  --shadow-lg:       0 8px 48px rgba(0,0,0,.6);
  --shadow-accent:   0 4px 24px rgba(37,211,102,.18);
  --trans:           .2s ease;
}

/* ═══════════════════════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Ambient glow */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 600px 500px at -10% -5%, rgba(37,211,102,.055) 0%, transparent 60%),
    radial-gradient(ellipse 500px 400px at 110% 110%, rgba(18,140,126,.04) 0%, transparent 60%);
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */
.app-layout { display:flex; min-height:100vh; position:relative; z-index:1; }
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.page-content { padding:28px 32px; flex:1; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.sidebar {
  width:var(--sidebar-w);
  background:rgba(7,11,20,.92);
  border-right:1px solid var(--border);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh;
  z-index:200;
}

.sidebar-logo {
  padding:22px 18px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border);
}
.sidebar-logo-icon {
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow:0 0 24px var(--accent-glow2);
}
.sidebar-logo-text {
  font-size:15px; font-weight:700; letter-spacing:-.3px;
  background:linear-gradient(120deg,#fff 30%,var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sidebar-logo-sub { font-size:11px; color:var(--text3); margin-top:1px; }

.sidebar-nav { flex:1; padding:14px 10px; overflow-y:auto; }
.nav-section-title {
  font-size:10px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:1.5px;
  padding:0 8px; margin:14px 0 6px;
}
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r);
  text-decoration:none; color:var(--text2);
  font-size:14px; font-weight:500;
  transition:all var(--trans); margin-bottom:2px;
  border:1px solid transparent;
}
.nav-link .nav-icon { font-size:18px; width:22px; text-align:center; flex-shrink:0; }
.nav-link:hover { background:var(--card-hover); color:var(--text); }
.nav-link.active {
  background:var(--accent-glow); color:var(--accent);
  border-color:rgba(37,211,102,.2);
}

.sidebar-footer { padding:14px; border-top:1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════════════ */
.topbar {
  height:var(--topbar-h);
  background:rgba(7,11,20,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; align-items:center; gap:12px;
  padding:0 32px; position:sticky; top:0; z-index:100;
}
.page-title  { font-size:18px; font-weight:700; letter-spacing:-.3px; }
.page-subtitle { font-size:12px; color:var(--text3); margin-top:1px; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ═══════════════════════════════════════════════════════════
   STATUS BADGE
═══════════════════════════════════════════════════════════ */
.status-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; border-radius:20px;
  font-size:13px; font-weight:500;
}
.status-badge.connected  { background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.25); color:var(--accent); }
.status-badge.disconnected { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.25); color:var(--danger); }
.status-dot {
  width:7px; height:7px; border-radius:50%;
  flex-shrink:0;
}
.connected  .status-dot { background:var(--accent); animation:pulse-dot 2s infinite; }
.disconnected .status-dot { background:var(--danger); }
@keyframes pulse-dot {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  50%      { opacity:.7; box-shadow:0 0 0 5px rgba(37,211,102,0); }
}

/* ═══════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════ */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:border-color var(--trans);
}
.card:hover { border-color:rgba(255,255,255,.12); }
.card-body { padding:22px; }
.card-header { padding:20px 22px 0; display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:15px; font-weight:600; }
.card-subtitle { font-size:12px; color:var(--text3); margin-top:3px; }
.mb-6 { margin-bottom:24px; }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════════════════════════ */
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; margin-bottom:22px;
}
.stat-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px 22px; display:flex; align-items:center; gap:16px;
  transition:all var(--trans);
}
.stat-card:hover { background:var(--card-hover); transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-icon {
  width:48px; height:48px; border-radius:var(--r); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.stat-icon.green  { background:rgba(37,211,102,.1); }
.stat-icon.blue   { background:rgba(59,130,246,.1); }
.stat-icon.purple { background:rgba(139,92,246,.1); }
.stat-icon.orange { background:rgba(249,115,22,.1); }
.stat-value { font-size:30px; font-weight:800; line-height:1; letter-spacing:-1px; }
.stat-label { font-size:12px; color:var(--text3); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════════════════ */
.grid   { display:grid; gap:20px; }
.grid-2 { grid-template-columns:1fr 1fr; }
.grid-3 { grid-template-columns:1fr 1fr 1fr; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--r);
  font-size:14px; font-weight:500; font-family:inherit;
  border:none; cursor:pointer;
  transition:all var(--trans); text-decoration:none; white-space:nowrap;
}
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; }
.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#000; font-weight:600;
  box-shadow:0 4px 16px var(--accent-glow);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px var(--accent-glow2); }
.btn-secondary {
  background:var(--card-hover); color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.15); }
.btn-danger {
  background:rgba(248,113,113,.12); color:var(--danger);
  border:1px solid rgba(248,113,113,.2);
}
.btn-danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-sm   { padding:6px 12px; font-size:13px; }
.btn-icon { padding:7px; }
.w-full   { width:100%; justify-content:center; }

/* ═══════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════ */
.form-group   { margin-bottom:18px; }
.form-label   { display:block; font-size:13px; font-weight:500; color:var(--text2); margin-bottom:7px; }
.form-hint    { font-size:11px; color:var(--text3); margin-top:5px; }
.form-input,.form-select,.form-textarea {
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:var(--r);
  padding:10px 13px; font-size:14px; color:var(--text);
  font-family:inherit; outline:none;
  transition:border-color var(--trans),box-shadow var(--trans);
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--text3); }
.form-textarea { resize:vertical; min-height:76px; }
.form-select option { background:var(--bg2); }

/* ═══════════════════════════════════════════════════════════
   TOGGLE
═══════════════════════════════════════════════════════════ */
.toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:var(--text3);
  border-radius:24px; cursor:pointer; transition:var(--trans);
}
.toggle-slider::before {
  content:''; position:absolute;
  width:18px; height:18px; background:#fff;
  border-radius:50%; left:3px; top:3px;
  transition:var(--trans);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.toggle input:checked + .toggle-slider { background:var(--accent); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ═══════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════ */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text3);
  padding:10px 16px; text-align:left;
  border-bottom:1px solid var(--border);
}
td { padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.03); font-size:14px; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.015); }

/* ═══════════════════════════════════════════════════════════
   IMAGE GRID
═══════════════════════════════════════════════════════════ */
.image-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
}
.image-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  transition:all var(--trans);
}
.image-card:hover {
  border-color:var(--border-accent);
  transform:translateY(-3px);
  box-shadow:var(--shadow-accent);
}
.image-card img { width:100%; height:150px; object-fit:cover; display:block; }
.image-card-body { padding:12px; }
.image-card-name {
  font-size:13px; font-weight:500; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.image-card-caption {
  font-size:12px; color:var(--text3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-height:18px;
}
.image-card-actions { display:flex; gap:7px; margin-top:10px; }

/* ═══════════════════════════════════════════════════════════
   UPLOAD ZONE
═══════════════════════════════════════════════════════════ */
.upload-zone {
  border:2px dashed var(--border); border-radius:var(--r-lg);
  padding:48px 24px; text-align:center; cursor:pointer;
  transition:all var(--trans); background:var(--card);
  position:relative; overflow:hidden;
}
.upload-zone::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--accent-glow),transparent);
  opacity:0; transition:opacity var(--trans);
}
.upload-zone:hover::before,
.upload-zone.drag-over::before { opacity:1; }
.upload-zone:hover,
.upload-zone.drag-over { border-color:var(--accent); }
.upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; z-index:10; }
.upload-zone-icon { font-size:52px; margin-bottom:12px; position:relative; z-index:2; }
.upload-zone-title { font-size:16px; font-weight:600; margin-bottom:5px; position:relative; z-index:2; }
.upload-zone-subtitle { font-size:13px; color:var(--text2); position:relative; z-index:2; }

/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════════════════ */
.progress-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.progress-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  transition:width .4s ease;
}

/* ═══════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:6px;
  font-size:12px; font-weight:500;
}
.badge-success { background:rgba(37,211,102,.1); color:var(--accent); }
.badge-danger  { background:rgba(248,113,113,.1); color:var(--danger); }
.badge-warning { background:rgba(251,191,36,.1);  color:var(--warning); }
.badge-muted   { background:rgba(71,85,105,.15);  color:var(--text2); }

/* ═══════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════ */
.alert {
  padding:12px 16px; border-radius:var(--r); font-size:14px;
  margin-bottom:16px; display:flex; align-items:flex-start; gap:10px;
}
.alert-success { background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.2); color:var(--accent); }
.alert-danger  { background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2); color:var(--danger); }
.alert-info    { background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); color:#60a5fa; }
.alert a { color:inherit; }

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════ */
.empty-state { text-align:center; padding:52px 24px; color:var(--text3); }
.empty-state-icon  { font-size:48px; margin-bottom:14px; opacity:.4; }
.empty-state-title { font-size:17px; font-weight:600; color:var(--text2); margin-bottom:7px; }
.empty-state-text  { font-size:14px; }

/* ═══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; opacity:0; pointer-events:none;
  transition:opacity var(--trans);
}
.modal-overlay.active { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-xl); width:90%; max-width:540px;
  max-height:85vh; overflow-y:auto;
  transform:scale(.94) translateY(16px);
  transition:transform var(--trans);
  box-shadow:var(--shadow-lg);
}
.modal-overlay.active .modal { transform:scale(1) translateY(0); }
.modal-header { padding:22px 22px 0; display:flex; align-items:center; justify-content:space-between; }
.modal-title  { font-size:17px; font-weight:600; }
.modal-close  { background:none; border:none; color:var(--text3); cursor:pointer; font-size:20px; line-height:1; padding:2px; transition:color var(--trans); }
.modal-close:hover { color:var(--text); }
.modal-body   { padding:22px; }
.modal-footer { padding:0 22px 22px; display:flex; gap:10px; justify-content:flex-end; }

/* ═══════════════════════════════════════════════════════════
   IMAGE PICKER (in Schedule page)
═══════════════════════════════════════════════════════════ */
.image-picker-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px; max-height:320px; overflow-y:auto; padding:2px;
}
.image-picker-item {
  border:2px solid var(--border); border-radius:var(--r);
  overflow:hidden; cursor:pointer; transition:all var(--trans);
  position:relative;
}
.image-picker-item:hover { border-color:rgba(37,211,102,.5); transform:translateY(-2px); }
.image-picker-item.selected { border-color:var(--accent); }
.image-picker-item .check-overlay {
  position:absolute; top:5px; right:5px;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#000;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
  opacity:0; transition:opacity var(--trans);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.image-picker-item.selected .check-overlay { opacity:1; }
.image-picker-item img { width:100%; height:90px; object-fit:cover; display:block; }
.image-picker-item-name { font-size:11px; padding:5px 7px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ─ Selected image row ─ */
.selected-images-list { display:flex; flex-direction:column; gap:10px; }
.selected-image-item {
  display:flex; gap:10px; align-items:flex-start;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:11px;
}
.selected-image-item img {
  width:56px; height:56px; object-fit:cover;
  border-radius:8px; flex-shrink:0;
  border:1px solid var(--border);
}
.selected-image-item-info { flex:1; min-width:0; }
.selected-image-item-name { font-size:12px; font-weight:500; margin-bottom:6px; color:var(--text2); }

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════════ */
.login-page {
  min-height:100vh; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(ellipse 800px 600px at 20% 20%, rgba(37,211,102,.07) 0%, transparent 55%),
    radial-gradient(ellipse 600px 500px at 80% 80%, rgba(18,140,126,.05) 0%, transparent 55%),
    var(--bg);
}
.login-card {
  width:100%; max-width:420px;
  background:rgba(13,17,23,.9); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:44px 36px;
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  box-shadow:var(--shadow-lg);
}
.login-logo { text-align:center; margin-bottom:30px; }
.login-logo-icon {
  width:66px; height:66px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  border-radius:18px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px;
  box-shadow:0 0 48px rgba(37,211,102,.3);
}
.login-title { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.login-sub   { font-size:13px; color:var(--text3); margin-top:5px; }

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
.toast-container { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:9999; pointer-events:none; }
.toast {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg);
  animation:toastIn .28s ease; min-width:260px; max-width:360px;
  font-size:14px; pointer-events:all;
}
.toast.success { border-left:3px solid var(--accent); }
.toast.error   { border-left:3px solid var(--danger); }
.toast.info    { border-left:3px solid #3b82f6; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ═══════════════════════════════════════════════════════════
   SPINNER
═══════════════════════════════════════════════════════════ */
.spinner {
  width:16px; height:16px; flex-shrink:0;
  border:2px solid rgba(0,0,0,.2);
  border-top-color:#000; border-radius:50%;
  animation:spin .7s linear infinite;
}
.spinner-white { border-color:rgba(255,255,255,.2); border-top-color:#fff; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════════════ */
.flex            { display:flex; }
.items-center    { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; }
.mb-4  { margin-bottom:16px; }
.text-center { text-align:center; }
.text-muted  { color:var(--text3); }
.text-accent { color:var(--accent); }
.text-sm     { font-size:13px; }
.font-bold   { font-weight:700; }
.text-danger { color:var(--danger); }
code { background:rgba(255,255,255,.06); padding:2px 7px; border-radius:5px; font-size:.88em; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.animate-fade { animation:fadeIn .35s ease forwards; }

/* ═══════════════════════════════════════════════════════════
   VIDEO THUMBNAIL
═══════════════════════════════════════════════════════════ */
.video-thumb {
  width:100%; height:150px;
  background:linear-gradient(135deg,#0d1117,#111827);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  cursor:pointer; position:relative;
  gap:6px;
}
.video-play-btn {
  width:44px; height:44px; border-radius:50%;
  background:rgba(37,211,102,.85);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#000; padding-left:3px;
  transition:transform var(--trans), background var(--trans);
  box-shadow:0 0 20px rgba(37,211,102,.3);
}
.video-thumb:hover .video-play-btn { transform:scale(1.1); background:var(--accent); }
.video-badge {
  font-size:11px; font-weight:600; color:var(--text3);
  letter-spacing:.5px;
}

/* ═══════════════════════════════════════════════════════════
   SCHEDULE TYPE CARDS
═══════════════════════════════════════════════════════════ */
.schedule-type-card {
  border:2px solid var(--border); border-radius:var(--r);
  padding:14px 10px; text-align:center;
  transition:all var(--trans);
  background:var(--card);
}
input[name="repeat_type"]:checked + .schedule-type-card {
  border-color:var(--accent);
  background:var(--accent-glow);
  color:var(--accent);
}
input[name="repeat_type"] { display:none; }
.schedule-type-card:hover { border-color:rgba(37,211,102,.4); }

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--text3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text2); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); transition:transform .3s ease; }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .main-content { margin-left:0; }
  .page-content { padding:16px; }
  .topbar { padding:0 16px; }
  #sidebar-toggle { display:flex!important; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .image-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
}