:root{
  --primary:#6d28d9;      /* Purple */
  --primary-dark:#5b21b6;
  --primary-light:#8b5cf6;
  --morning:#f59e0b; 
  --evening:#6366f1;
  --success:#16a34a;      /* Green */
  --error:#dc2626;        /* Red */
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;
}

/* ==========================================
   FRONTEND (Student Search)
========================================== */
.app{max-width:500px;margin:0 auto;padding:1rem;min-height:100vh;display:flex;flex-direction:column}

.app-header{text-align:center;padding:1.5rem 0.5rem 1rem}
.logo-img{
  width:90px; height:90px; object-fit:contain; margin-bottom:0.75rem;
  border-radius:50%; box-shadow:0 8px 20px rgba(0,0,0,0.1);
}
.app-header h1{
  font-size:1.5rem;font-weight:800;color:var(--primary);
  letter-spacing:-0.5px;margin-bottom:0.5rem;text-transform:uppercase;
}
.subtitle{color:var(--muted);font-size:0.9rem;font-weight:500}

.search-container{flex:1;padding:1rem 0}
.search-card{background:var(--card);padding:1.5rem;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,0.05);border:1px solid var(--border)}
.input-label{display:block;font-size:0.875rem;font-weight:700;color:var(--text);margin-bottom:0.5rem}
.input-row{display:flex;gap:0.5rem;flex-direction:column}
.input-row input{
  width:100%;padding:1rem 1.25rem;border:2px solid var(--border);border-radius:12px;
  font-size:1.1rem;background:#f9fafb;transition:.2s;font-weight:600;color:var(--primary-dark);
}
.input-row input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(109,40,217,.1)}
button{cursor:pointer;border:none;font-family:inherit;font-weight:700;transition:.2s}
#searchBtn{
  background:var(--primary);color:#fff;padding:1rem 1.5rem;border-radius:12px;font-size:1.1rem;
  box-shadow:0 4px 14px rgba(109,40,217,.3);text-transform:uppercase;letter-spacing:0.5px;
}
#searchBtn:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(109,40,217,.4)}
#searchBtn:disabled{opacity:.6;cursor:not-allowed}

.search-msg{margin-top:1rem;padding:0.75rem 1rem;border-radius:12px;font-size:0.9rem;font-weight:600;text-align:center}
.search-msg.error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.search-msg.success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}

.results{margin-top:1.5rem}
.results-header{text-align:center;margin-bottom:1rem}
.results-header h2{font-size:1.2rem;font-weight:800;color:var(--text)}
.roll-num{color:var(--primary);background:#ede9fe;padding:0.1rem 0.5rem;border-radius:6px}
.result-count{color:var(--muted);font-size:0.8rem;margin-top:0.25rem;text-transform:uppercase;letter-spacing:0.5px;font-weight:700}

.result-card{background:var(--card);border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);margin-bottom:1.5rem;animation:slideUp .3s ease both}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.card-header{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.25rem;color:#fff;font-weight:800;font-size:0.85rem;text-transform:uppercase;letter-spacing:1px}
.result-card.morning .card-header{background:linear-gradient(135deg,#f59e0b,#d97706)}
.result-card.evening .card-header{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.result-card.other .card-header{background:linear-gradient(135deg,#10b981,#059669)}

.session-badge{display:flex;align-items:center;gap:0.3rem}
.exam-time{background:rgba(255,255,255,.25);padding:0.2rem 0.6rem;border-radius:6px;font-size:0.75rem}

.card-body{padding:1.25rem}

.hero-tiles{display:flex;gap:0.75rem;margin-bottom:1.25rem}
.hero-tile{flex:1;padding:1rem;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.room-tile{background:#dcfce7;border:2px solid #bbf7d0;}
.seat-tile{background:#fee2e2;border:2px solid #fecaca;max-width:120px;}

.tile-label{font-size:0.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:0.25rem}
.room-tile .tile-label{color:#15803d}
.seat-tile .tile-label{color:#b91c1c}

.tile-value{font-size:1rem;font-weight:800;line-height:1.2}
.room-tile .tile-value{color:#14532d;font-size:0.95rem}
.seat-tile .tile-value{color:#7f1d1d;font-size:2rem}

.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem}
.meta-item{background:#f9fafb;padding:0.75rem;border-radius:12px;display:flex;align-items:center;gap:0.75rem;border:1px solid #f3f4f6;}
.meta-icon{font-size:1.25rem}
.meta-text{display:flex;flex-direction:column}
.meta-label{font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:700}
.meta-value{font-size:0.9rem;font-weight:700;color:var(--text)}

.app-footer{text-align:center;padding:1.5rem 0 1rem;color:var(--muted);font-size:0.8rem}
.app-footer a{color:var(--primary);text-decoration:none;font-weight:700}

.loader{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:2rem auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================
   ADMIN DASHBOARD
========================================== */
.admin-app{max-width:960px}
.admin-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--border);margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.admin-header-left{display:flex;align-items:center;gap:1rem}
.admin-header-left .logo-img{width:48px;height:48px;margin:0}
.admin-header-left h1{font-size:1.25rem;color:var(--text)}
.admin-header-right{display:flex;gap:.5rem}
.btn-ghost{background:transparent;color:var(--text);padding:.5rem 1rem;border:1px solid var(--border);border-radius:8px;text-decoration:none;font-size:.85rem;font-weight:600}
.btn-ghost:hover{background:var(--bg)}

.admin-main{padding-bottom:3rem}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--card);padding:1.5rem;border-radius:14px;text-align:center;border:1px solid var(--border);box-shadow:var(--shadow)}
.stat-value{font-size:2rem;font-weight:800;color:var(--primary)}
.morning-stat .stat-value{color:var(--morning)}
.evening-stat .stat-value{color:var(--evening)}
.stat-label{color:var(--muted);font-size:.85rem;margin-top:.25rem;font-weight:600}

.upload-section,.uploads-section,.danger-section{background:var(--card);padding:1.75rem;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:1.5rem}
.upload-section h2,.uploads-section h2,.danger-section h2{font-size:1.1rem;margin-bottom:.5rem;color:var(--text)}
.muted{color:var(--muted);font-size:.85rem}
.small{font-size:.75rem}

.drop-zone{border:2px dashed var(--border);border-radius:14px;padding:2rem;text-align:center;cursor:pointer;transition:.2s;margin:1rem 0;background:var(--bg)}
.drop-zone:hover,.drop-zone.drag-active{border-color:var(--primary);background:rgba(109,40,217,.04)}
.drop-zone-content p{margin:.4rem 0}
.upload-icon{font-size:2.5rem;margin-bottom:.5rem}
.upload-progress{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg);border-radius:10px}
.upload-progress .loader{margin:0;width:24px;height:24px;border-width:2px}
.upload-result{margin-top:1rem}

.uploads-table{width:100%;border-collapse:collapse;font-size:.9rem}
.table-wrapper{overflow-x:auto}
.uploads-table th,.uploads-table td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.uploads-table th{background:var(--bg);font-weight:700;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}

.btn-danger{background:var(--error);color:#fff;padding:.6rem 1.2rem;border-radius:8px;font-size:.85rem;margin-top:.75rem;box-shadow:0 4px 12px rgba(220,38,38,.2)}
.btn-danger:hover{background:#b91c1c}
.btn-primary{background:var(--primary);color:#fff;padding:.85rem 1.5rem;border-radius:12px;font-size:1rem;box-shadow:0 4px 14px rgba(109,40,217,.3);width:100%}

.admin-login{max-width:400px;margin:0 auto}
.admin-login input{width:100%;padding:.85rem 1rem;border:2px solid var(--border);border-radius:10px;font-size:1rem;background:var(--bg)}
.admin-login input:focus{outline:none;border-color:var(--primary);background:#fff}
code{background:var(--bg);padding:.15rem .4rem;border-radius:4px;font-size:.85rem;color:var(--primary-dark)}

@media (max-width:600px){
  .app-header h1{font-size:1.2rem}
  .input-row{flex-direction:column}
  #searchBtn{width:100%}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-value{font-size:1.5rem}
  .admin-header-left h1{font-size:1.1rem}
}
@media (min-width:400px){
  .input-row{flex-direction:row}
  .input-row input{flex:1}
  #searchBtn{width:auto;padding:1rem 2rem}
}