:root{
  --bg: #f6fbff;

  --pastelBlue:   #7dd3fc;
  --pastelMint:   #86efac;
  --pastelLilac:  #c4b5fd;
  --pastelPink:   #fda4af;
  --pastelYellow: #fde68a;
  --pastelAqua:   #67e8f9;
  --pastelOrange: #fdba74;

  --ink: #0f172a;
  --muted: #334155;
  --card: #ffffff;

  --shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
  --shadowSoft: 0 10px 22px rgba(15, 23, 42, 0.10);

  --radius: 22px;
  --radius2: 28px;
  --max: 1100px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    linear-gradient(135deg, rgba(125,211,252,.28), rgba(134,239,172,.22)),
    var(--bg);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(253,164,175,.55) 0 8px, transparent 9px),
    radial-gradient(circle at 86% 14%, rgba(125,211,252,.55) 0 9px, transparent 10px),
    radial-gradient(circle at 18% 82%, rgba(196,181,253,.50) 0 10px, transparent 11px),
    radial-gradient(circle at 78% 84%, rgba(253,186,116,.48) 0 9px, transparent 10px),
    radial-gradient(circle at 54% 10%, rgba(253,230,138,.55) 0 7px, transparent 8px),
    radial-gradient(circle at 44% 90%, rgba(103,232,249,.52) 0 8px, transparent 9px);
  opacity:.55;
}

.page{ min-height:100vh; display:flex; flex-direction:column; }
.content{ flex:1; width:100%; max-width:var(--max); margin:0 auto; padding:18px; }

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background: rgba(255,255,255,.92);
  border-bottom: 4px solid rgba(15,23,42,.10);
  box-shadow: var(--shadowSoft);
}

.brand{ display:flex; gap:12px; align-items:center; }
.brand-bubble{
  width:52px; height:52px; border-radius:18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--pastelBlue), var(--pastelAqua));
  border: 3px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow);
  font-size:24px;
}
.brand-title{ font-size:18px; font-weight:1000; letter-spacing:.2px; }
.brand-subtitle{ font-size:12px; color:var(--muted); margin-top:2px; }

.topbar-right{ display:flex; align-items:center; gap:12px; }
.hello{ font-size:14px; color:var(--muted); }

/* Menu */
.menu{
  width:100%;
  max-width:var(--max);
  margin:12px auto 0;
  padding:0 18px;
  display:flex; gap:10px; flex-wrap:wrap;
}

.menu.sub,
.menu.admin-sub,
.menu.teacher-sub{
  margin-top:8px;
  padding-bottom:6px;
}

.menu-item{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  color: var(--ink);
  font-weight:1000;
  border: 3px solid rgba(15,23,42,.12);
  box-shadow: var(--shadowSoft);
  transform: translateY(0);
  transition: transform .12s ease, filter .12s ease;
  background:#fff;
}
.menu-item:hover{ transform: translateY(-2px); filter: saturate(1.06); }

.menu-item.active{
  outline: 3px solid rgba(15,23,42,.16);
  filter: saturate(1.2) contrast(1.05);
}

.menu-item.library{ background: rgba(125,211,252,.85); }
.menu-item.results{ background: rgba(134,239,172,.85); }
.menu-item.teacher{ background: rgba(196,181,253,.85); }
.menu-item.admin{ background: rgba(253,230,138,.88); }

.menu-item.admin-books{ background: rgba(125,211,252,.55); }
.menu-item.admin-quizzes{ background: rgba(196,181,253,.55); }
.menu-item.admin-levels{ background: rgba(134,239,172,.55); }
.menu-item.admin-badges{ background: rgba(253,186,116,.55); }
.menu-item.admin-teachers{ background: rgba(253,164,175,.55); }
.menu-item.admin-assign{ background: rgba(253,230,138,.55); }

.menu-item.t-classes{ background: rgba(125,211,252,.55); }
.menu-item.t-students{ background: rgba(134,239,172,.55); }
.menu-item.t-progress{ background: rgba(253,230,138,.55); }

/* Layout grid */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }
.col-2{ grid-column: span 2; }
@media (max-width: 900px){
  .col-6,.col-4,.col-3,.col-2{ grid-column: span 12; }
}

/* Cards */
.card{
  background: var(--card);
  border-radius: var(--radius2);
  border: 3px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow);
  padding:16px;
}

/* Headings */
h1{ font-size:28px; margin:0 0 8px; }
h2{ font-size:20px; margin:0 0 8px; }
p{ margin:0 0 10px; color:var(--muted); line-height:1.35; }
.tiny{ font-size:12px; color:var(--muted); margin-top:6px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  text-decoration:none;
  padding:12px 16px;
  border-radius:18px;
  font-weight:1000;
  border: 3px solid rgba(15,23,42,.14);
  box-shadow: var(--shadowSoft);
  color: var(--ink);
  background: rgba(196,181,253,.90);
  transform: translateY(0);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-2px); filter: saturate(1.1); }
.btn.small{ padding:9px 12px; border-radius:16px; font-size:14px; }

.btn.green{ background: rgba(134,239,172,.92); }
.btn.danger{ background: rgba(253,164,175,.92); }
.btn.lock{ background: rgba(253,186,116,.92); cursor: default; }
.btn.lock:hover{ transform:none; filter:none; }

/* Inputs */
.input{
  width:100%;
  padding:12px 12px;
  border-radius:18px;
  border: 3px solid rgba(15,23,42,.12);
  outline:none;
  font-size:16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 0 rgba(15,23,42,.06);
}
.label{ font-weight:1000; margin:10px 0 6px; display:block; }

/* Notices */
.notice{
  padding:10px 12px;
  border-radius:18px;
  border: 3px solid rgba(15,23,42,.12);
  margin:10px 0;
  box-shadow: var(--shadowSoft);
  background: rgba(125,211,252,.35);
}
.notice.ok{ background: rgba(134,239,172,.35); }
.notice.bad{ background: rgba(253,164,175,.35); }
.notice.warn{ background: rgba(253,230,138,.45); }

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:18px;
  border: 3px solid rgba(15,23,42,.12);
  box-shadow: var(--shadowSoft);
}
.table th, .table td{
  padding:10px 12px;
  border-bottom: 2px solid rgba(15,23,42,.10);
  text-align:left;
}
.table th{
  background: rgba(125,211,252,.35);
  font-size:14px;
  font-weight:1000;
}
.table tr:last-child td{ border-bottom:none; }

/* Footer */
.footer{
  padding:16px;
  text-align:center;
  border-top: 4px solid rgba(15,23,42,.10);
  color:var(--muted);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadowSoft);
}
.rank-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  font-size:13px;
  font-weight:900;
}

/* =========================================
   ✅ LIBRARY BOOK CARD FIX (sizes)
========================================= */
.book-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.book-card .cover{
  width:88px;
  height:120px;
  flex:0 0 auto;
  object-fit:cover;
  border-radius:16px;
  border:3px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 18px rgba(15,23,42,.10);
  background:#fff;
}

.badge-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  border: 2px solid rgba(15,23,42,.10);
  font-weight:900;
  font-size:12px;
  color: var(--ink);
}

@media (max-width: 520px){
  .book-card .cover{
    width:72px;
    height:98px;
    border-radius:14px;
  }
}
/* =========================================
   🔥 FORCE library book cover sizing
   (matches real HTML, not assumptions)
========================================= */

/* Common library layouts */
.library-grid img,
.library-list img,
.book-card img,
.book-tile img,
.book img,
img.book-cover,
img.cover,
img.cover-img{
  width: 90px !important;
  height: 125px !important;
  max-width: 90px !important;
  max-height: 125px !important;
  object-fit: cover !important;
  border-radius: 14px;
  display: block;
  flex-shrink: 0;
}