:root{
  --bg: #eef2f7;                 /* soft gray background */
  --card: #ffffff;
  --card2: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;               /* dark slate */
  --muted: #64748b;              /* muted gray */
  --accent: #1e40af;             /* deep corporate blue */
  --accent2: #2563eb;            /* brighter blue */
  --danger: #dc2626;
}

html,body{height:100%}
body{
  background:
    radial-gradient(1200px 500px at 10% 10%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, rgba(30,64,175,.05), transparent 60%),
    var(--bg);
  color: var(--text);
}

a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{
  color: var(--accent2);
}

/* Layout */
.app-shell{min-height:100vh}

.glass{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}

.soft-border{border:1px solid var(--border)}
.muted{color:var(--muted)}

/* Brand Dot */
.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 10px rgba(30,64,175,.4);
  display:inline-block; margin-right:10px;
}

/* Buttons */
.btn-accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 600;
}
.btn-accent:hover{
  filter: brightness(1.05);
}

.btn-ghost{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
}
.btn-ghost:hover{
  background: #f1f5f9 !important;
}

/* Forms */
.form-control, .form-select, textarea.form-control{
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.form-control::placeholder{
  color: #94a3b8;
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15) !important;
  border-color: var(--accent) !important;
}

/* Tables */
.table{
  color: var(--text) !important;
}
.table thead th{
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted);
  font-weight: 600;
}
.table td, .table th{
  border-color: var(--border) !important;
}
.table-hover tbody tr:hover{
  background: rgba(37,99,235,.04) !important;
}

/* Badges */
.badge-soft{
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.15);
  color: var(--accent);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
}

/* Timer */
.timer-pill{
  font-variant-numeric: tabular-nums;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  font-weight: 600;
}

/* KPI Cards */
.kpi{display:flex; gap:14px; flex-wrap:wrap}
.kpi-card{
  flex: 1 1 220px;
  padding: 18px;
}
.kpi-num{
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}
.kpi-label{
  color: var(--muted);
}

/* ===== Home Hero + Tiles (Animated) ===== */

.hero{
  position: relative;
  padding: 34px 22px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(700px 320px at 90% 10%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  overflow: hidden;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(14,165,233,.12), transparent 55%);
  pointer-events:none;
}

.hero h1{font-weight:800; letter-spacing:-.02em}
.hero .sub{color: var(--muted)}

/* CTA button: hover animation + pulse glow */
@keyframes softPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.35); transform: translateY(0); }
  60%  { box-shadow: 0 0 0 14px rgba(37,99,235,0); transform: translateY(-1px); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); transform: translateY(0); }
}

.btn-cta{
  position: relative;
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
  animation: softPulse 2.4s ease-in-out infinite;
}

.btn-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.btn-cta:active{
  transform: translateY(0);
  animation: none;
}

/* Dashboard Tiles */
.tiles{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.tile{
  grid-column: span 12;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,1));
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
  border-color: rgba(37,99,235,.25);
}

.tile .t-title{font-weight:800; margin:0}
.tile .t-sub{color: var(--muted); margin:6px 0 0 0}
.tile .t-icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.16);
}

@media (min-width: 768px){
  .tile.span-6{grid-column: span 6;}
  .tile.span-4{grid-column: span 4;}
}

/* Sticky submit bar */
.sticky-submit{
  position: sticky;
  bottom: 12px;
  z-index: 20;
  padding: 12px;
  border-radius: 16px;
}

/* question jump pills */
.qjump{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.qjump a{
  width:36px;height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--text);
  font-weight:700;
  transition: transform .15s ease;
}
.qjump a:hover{transform: translateY(-2px);}
.qjump a.active{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.25);
  color: #1e40af;
}

.t-icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.16);
}

/* Header icon colors */
.nav-icon{
  margin-right: 6px;
  font-size: 15px;
}

/* Home */
.icon-home{
  color: #2563eb; /* blue */
}

/* Quizzes */
.icon-quiz{
  color: #7c3aed; /* violet */
}

/* Attempts */
.icon-attempt{
  color: #0ea5e9; /* sky */
}

/* Admin */
.icon-admin{
  color: #dc2626; /* red */
}

/* User */
.icon-user{
  color: #059669; /* emerald */
}

/* Logout */
.icon-logout{
  color: #f59e0b; /* amber */
}

.brand-logo{
  height: 38px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 576px){
  .brand-logo{
    height: 30px;
  }
}

.login-logo{
  height: 70px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 576px){
  .login-logo{
    height: 55px;
  }
}