:root{
  --p:#4f46e5;
  --p2:#7c3aed;
  --s:#06b6d4;
  --accent:#f59e0b;
  --d:#0f172a;
  --text:#1e293b;
  --m:#64748b;
  --bg:#eef2ff;
  --panel:#ffffff;
  --panel-2:#f8fbff;
  --line:#e2e8f0;
  --ok:#10b981;
  --bad:#ef4444;
  --warn:#f59e0b;
  --shadow-lg:0 24px 80px rgba(15,23,42,.12);
  --shadow-md:0 14px 40px rgba(30,41,59,.08);
  --shadow-sm:0 8px 24px rgba(15,23,42,.06);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,.12), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(6,182,212,.12), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}
a{color:var(--p);text-decoration:none;transition:.2s ease}
a:hover{opacity:.92}
h1,h2,h3,h4{margin:0 0 12px;line-height:1.08;color:var(--d)}
h1{letter-spacing:-.03em}
p{line-height:1.62;margin:0 0 12px}
small{color:var(--m)}
input,select,textarea{
  width:100%;padding:13px 15px;border:1px solid #d8e1f0;border-radius:14px;margin:6px 0 14px;
  background:rgba(255,255,255,.95);font:inherit;color:var(--text);outline:none;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.02);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(79,70,229,.55);
  box-shadow:0 0 0 4px rgba(79,70,229,.12);
}
label{font-weight:800;font-size:12px;letter-spacing:.02em;color:#334155;display:block}
.btn{
  border:0;border-radius:14px;padding:12px 17px;background:#e9eef8;color:var(--d);font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.12)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--p),var(--p2) 52%,var(--s));color:#fff}
.btn.secondary{background:linear-gradient(135deg,#0ea5e9,#06b6d4);color:#fff}
.btn.small{padding:9px 12px;font-size:12px;border-radius:12px}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316);color:#fff}
.full{width:100%}
.muted{color:var(--m)}
.eyebrow{
  text-transform:uppercase;letter-spacing:.16em;color:var(--s);font-weight:900;font-size:11px;
  margin-bottom:10px
}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#eef2ff;color:#4338ca;border:1px solid rgba(99,102,241,.12)}
.badge.ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.badge.info{background:#e0f2fe;color:#0c4a6e;border-color:#bae6fd}
.badge.warn{background:#fef3c7;color:#92400e;border-color:#fde68a}
.badge.bad{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.badge.muted{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
.alert{padding:14px 16px;border-radius:16px;margin:0 0 18px;font-weight:800;border:1px solid transparent;box-shadow:var(--shadow-sm)}
.alert.ok{background:#ecfdf5;color:#166534;border-color:#bbf7d0}
.alert.bad{background:#fef2f2;color:#991b1b;border-color:#fecaca}

/* Public site */
.site-nav{
  display:flex;justify-content:space-between;align-items:center;padding:18px min(6vw,84px);
  background:rgba(255,255,255,.72);backdrop-filter:blur(22px);border-bottom:1px solid rgba(226,232,240,.8);
  position:sticky;top:0;z-index:10;box-shadow:0 10px 30px rgba(15,23,42,.04)
}
.site-nav div{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.site-nav div a:not(.btn){color:#334155;font-weight:700;position:relative}
.site-nav div a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--p),var(--s));transition:width .2s ease
}
.site-nav div a:not(.btn):hover::after{width:100%}
.brand{display:flex;align-items:center;gap:12px;color:inherit}
.brand-mark{
  width:46px;height:46px;border-radius:16px;
  background:linear-gradient(135deg,var(--p),var(--p2) 55%, var(--s));
  display:grid;place-items:center;color:white;font-weight:1000;
  box-shadow:0 10px 24px rgba(79,70,229,.35)
}
.brand strong{display:block;font-size:15px}
.brand small{display:block;color:var(--m);margin-top:1px}
.hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.08fr .92fr;gap:42px;
  padding:92px min(6vw,84px) 82px;background:
  radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 30%),
  radial-gradient(circle at 80% 10%, rgba(255,255,255,.14), transparent 22%),
  linear-gradient(135deg, #312e81 0%, #4338ca 35%, #7c3aed 68%, #06b6d4 100%);
  color:#fff
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:999px;filter:blur(2px);opacity:.45}
.hero::before{width:280px;height:280px;right:-60px;top:-80px;background:rgba(255,255,255,.14)}
.hero::after{width:180px;height:180px;left:48%;bottom:-70px;background:rgba(255,255,255,.12)}
.hero > *{position:relative;z-index:1}
.hero h1{font-size:clamp(44px,7vw,88px);line-height:.93;color:#fff}
.hero p{font-size:18px;color:#e0e7ff;max-width:680px}
.hero .btn:not(.primary){background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none}
.hero .btn:not(.primary):hover{background:rgba(255,255,255,.22)}
.section{padding:76px min(6vw,84px)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid31{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px}
.card,.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,252,255,.98));
  border:1px solid rgba(226,232,240,.92);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-md)
}
.card:hover,.hero-card:hover{box-shadow:var(--shadow-lg)}
.hero-card{position:relative;overflow:hidden;color:var(--d);background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,255,.98))}
.hero-card::after{content:"";position:absolute;inset:auto -50px -60px auto;width:180px;height:180px;border-radius:999px;background:radial-gradient(circle, rgba(79,70,229,.18), transparent 65%)}
.hero-card h3{margin-bottom:18px}
.section .card h3{margin-bottom:8px}
.auth{
  min-height:100vh;display:grid;place-items:center;
  background:
    radial-gradient(circle at 18% 14%, rgba(124,58,237,.24), transparent 28%),
    radial-gradient(circle at 84% 80%, rgba(6,182,212,.22), transparent 24%),
    linear-gradient(135deg,#0f172a,#1e1b4b 55%, #312e81 100%);
  padding:28px
}
.auth .card{width:min(470px,100%);padding:32px 30px;position:relative;overflow:hidden}
.auth .card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--p),var(--p2),var(--s))}
.auth h1{font-size:34px;margin-bottom:8px}

/* App shell */
.app{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
.side{
  background:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,.25), transparent 26%),
    radial-gradient(circle at 100% 100%, rgba(6,182,212,.18), transparent 25%),
    linear-gradient(180deg,#0f172a 0%, #111827 48%, #0b1220 100%);
  color:#cbd5e1;padding:24px 18px 24px 24px;position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid rgba(255,255,255,.05)
}
.side .brand{padding:6px 6px 18px 4px}
.side .brand strong{color:#fff;font-size:16px}
.side .brand small{color:#94a3b8}
.nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.nav a{
  padding:11px 14px;border-radius:14px;color:#cbd5e1;font-weight:700;position:relative;
  border:1px solid transparent
}
.nav a:hover,.nav a.active{
  background:linear-gradient(135deg, rgba(79,70,229,.28), rgba(6,182,212,.16));
  color:#fff;border-color:rgba(148,163,184,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
.nav-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#64748b;margin:22px 14px 7px;font-weight:900}
.main{padding:28px;min-width:0}
.top{
  display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px;
  position:sticky;top:16px;z-index:5;padding:18px 20px;border-radius:22px;
  background:rgba(255,255,255,.66);backdrop-filter:blur(18px);border:1px solid rgba(226,232,240,.85);box-shadow:var(--shadow-sm)
}
.pill{
  background:linear-gradient(180deg,#fff,#f8fbff);border-radius:999px;padding:12px 16px;box-shadow:var(--shadow-sm);font-weight:800;border:1px solid #e2e8f0
}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}
.stat{
  position:relative;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.98));
  border:1px solid rgba(226,232,240,.92);border-radius:24px;padding:24px;box-shadow:var(--shadow-md)
}
.stat::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--p),var(--p2),var(--s))}
.stat span{display:block;color:var(--m);font-weight:800;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.stat strong{display:block;font-size:34px;margin-top:10px;color:var(--d);letter-spacing:-.03em}
.table-wrap{overflow-x:auto;border-radius:18px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:transparent}
th,td{padding:14px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{
  text-transform:uppercase;font-size:11px;color:#64748b;letter-spacing:.12em;font-weight:900;background:#f8fafc;position:sticky;top:0
}
tr:hover td{background:rgba(79,70,229,.018)}
table tr:first-child th:first-child{border-top-left-radius:16px}
table tr:first-child th:last-child{border-top-right-radius:16px}
.item{padding:16px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item strong{display:block;margin-bottom:4px}
.skill{height:36px;background:#edf2ff;border-radius:999px;margin:14px 0;overflow:hidden;position:relative;border:1px solid rgba(99,102,241,.08)}
.skill span{position:absolute;left:14px;top:8px;font-weight:900;font-size:13px;color:#1f2937;z-index:2}
.skill b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#818cf8,#7c3aed 55%,#22d3ee)}
.inline,.mini-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline input,.inline select,.mini-form select{margin:0}
.stack{display:flex;flex-direction:column;gap:22px}
.report{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.print-page table{width:100%;border-collapse:collapse}
.print-page th,.print-page td{border:1px solid #e2e8f0;padding:12px}
.print-page th{background:#f8fafc}
.cert{background:linear-gradient(180deg,#fff,#f8fafc)}

/* Generic card spacing improvements */
.card > :last-child{margin-bottom:0}
.card form:last-child{margin-bottom:0}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:1100px){
  .app,.hero,.grid,.grid2,.grid31{grid-template-columns:1fr}
  .side{height:auto;position:static}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top{position:relative;top:0}
}
@media (max-width:700px){
  .section,.hero,.main,.site-nav{padding-left:18px;padding-right:18px}
  .stats{grid-template-columns:1fr}
  .site-nav{align-items:flex-start;flex-direction:column;gap:14px}
  .top{flex-direction:column;align-items:flex-start}
  .hero{padding-top:64px}
  .hero h1{font-size:44px}
  .card,.hero-card{padding:20px}
}



/* V4.1 student monitoring upgrades */
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: rgba(79,70,229,.055) !important; }
.student-profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 26px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #312e81, #4f46e5 52%, #06b6d4);
  color: white;
  box-shadow: var(--shadow-lg);
}
.student-profile-hero h2,
.student-profile-hero p,
.student-profile-hero .eyebrow { color: white; }
.student-profile-hero .badge { background: rgba(255,255,255,.18); color: white; border-color: rgba(255,255,255,.24); }
.grade-card,
.grade-chip {
  background: rgba(255,255,255,.96);
  color: var(--d);
  border: 1px solid rgba(226,232,240,.75);
  box-shadow: var(--shadow-md);
}
.grade-card {
  min-width: 180px;
  border-radius: 24px;
  padding: 18px 20px;
  text-align: center;
}
.grade-card span,
.grade-chip span {
  display: block;
  color: var(--m);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.grade-card strong {
  display: block;
  font-size: 42px;
  line-height: 1;
  margin: 8px 0 4px;
  color: var(--p);
}
.grade-card small,
.grade-chip small { color: var(--m); font-weight: 700; }
.grade-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
}
.grade-chip strong {
  font-size: 24px;
  color: var(--p);
  line-height: 1;
}
.dashboard-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.info-grid,
.mini-stats {
  display: grid;
  gap: 14px;
}
.info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 12px; }
.info-grid div,
.mini-stats div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.info-grid span,
.mini-stats span {
  display: block;
  color: var(--m);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.info-grid strong,
.mini-stats strong {
  color: var(--d);
  font-size: 16px;
}
.mini-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mini-stats strong { font-size: 26px; }
@media(max-width:700px){
  .student-profile-hero { flex-direction: column; align-items: flex-start; }
  .grade-card { width: 100%; }
  .info-grid, .mini-stats { grid-template-columns: 1fr; }
  .dashboard-actions { justify-content: flex-start; }
}



/* V4.2 dashboard redesign and clickable widgets */
.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
  padding: 28px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #312e81, #4f46e5 52%, #06b6d4);
  color: white;
  box-shadow: var(--shadow-lg);
}
.dashboard-hero h2,
.dashboard-hero p,
.dashboard-hero .eyebrow { color: white; }
.dashboard-widget {
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.dashboard-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(15,23,42,.18);
}
.stat-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.stat-link em {
  display: block;
  margin-top: 8px;
  color: var(--m);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}
a.stat-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.item-link {
  display: block;
  color: inherit;
  border-radius: 18px;
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
}
.item-link:hover {
  background: rgba(79,70,229,.045);
  opacity: 1;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.quick-grid a {
  display: block;
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--d);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.quick-grid a:hover {
  background: #eef2ff;
  transform: translateY(-1px);
}
.mini-stats a {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  color: inherit;
  display: block;
}
.mini-stats a:hover {
  background: #eef2ff;
  transform: translateY(-1px);
}
.teacher-hero {
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #0f172a, #4338ca 55%, #0ea5e9);
}
@media(max-width:700px){
  .dashboard-hero { flex-direction: column; align-items: flex-start; }
  .dashboard-widget { width: 100%; }
  .quick-grid { grid-template-columns: 1fr; }
}



/* V4.3 Japanese proficiency and cleaner student navigation */
.hero-widget-pair {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.proficiency-card strong {
  font-size: 30px;
  white-space: nowrap;
}
.proficiency-card small {
  white-space: nowrap;
}
@media(max-width:700px){
  .hero-widget-pair { width: 100%; justify-content: stretch; }
  .hero-widget-pair .grade-card { width: 100%; }
}



/* V4.4 lesson info and assignment status polish */
.lesson-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #1e1b4b, #4f46e5 50%, #0891b2);
}
.lesson-hero .grade-card strong {
  font-size: 24px;
  line-height: 1.08;
}
.badge.warn {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.badge.info {
  background: #e0f2fe;
  color: #0c4a6e;
  border-color: #bae6fd;
}



/* V4.5 material download buttons */
.material-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.material-item > div {
  min-width: 0;
}
.material-item .btn {
  white-space: nowrap;
}
@media(max-width:700px){
  .material-item {
    align-items: flex-start;
    flex-direction: column;
  }
}



/* V4.6 richer account profile */
.profile-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #111827, #4f46e5 54%, #06b6d4);
}
.profile-hero .grade-card strong {
  font-size: 24px;
  line-height: 1.1;
}



/* V5 WhatsApp reminders */
.btn.whatsapp {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
}
.whatsapp-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #064e3b, #16a34a 54%, #06b6d4);
}
.whatsapp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.whatsapp-item > div {
  min-width: 0;
}
.whatsapp-item .btn {
  white-space: nowrap;
}
@media(max-width:700px){
  .whatsapp-item {
    flex-direction: column;
    align-items: flex-start;
  }
}



/* V5.1 + V5.2 logs and notifications */
.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  margin-left: 6px;
}
.notification-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #1e1b4b, #7c3aed 52%, #06b6d4);
}
.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 18px;
  padding-left: 14px;
  padding-right: 14px;
}
.notification-item.unread {
  background: #eef2ff;
  border: 1px solid rgba(79,70,229,.16);
}
.notification-item.read {
  opacity: .78;
}
.notification-item > div {
  min-width: 0;
}
@media(max-width:700px){
  .notification-item {
    align-items: flex-start;
    flex-direction: column;
  }
}



/* V5.5 search/filter, weekly calendar, and CSV import */
.filter-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 18px 50px rgba(15,23,42,.06);
}
.filter-card h2 {
  margin: 0 0 4px;
}
.filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.filter-form input,
.filter-form select {
  min-width: 150px;
}
.weekly-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.calendar-day {
  min-height: 180px;
  border-radius: 22px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.95));
  border: 1px solid rgba(148,163,184,.18);
}
.calendar-day h3 {
  margin: 0 0 10px;
  font-size: 14px;
}
.calendar-event {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(79,70,229,.16);
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}
.calendar-event strong,
.calendar-event span,
.calendar-event small {
  display: block;
}
.calendar-event span {
  margin-top: 4px;
  font-weight: 700;
}
.calendar-event small {
  color: #64748b;
  margin-top: 2px;
}
.calendar-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(79,70,229,.13);
}
.small-muted {
  font-size: 12px;
}
@media(max-width:900px){
  .filter-card {
    align-items: stretch;
    flex-direction: column;
  }
  .filter-form {
    justify-content: stretch;
  }
  .filter-form input,
  .filter-form select,
  .filter-form .btn {
    width: 100%;
  }
  .weekly-calendar {
    grid-template-columns: repeat(7, 220px);
  }
}



/* V5.5.1 search/filter title alignment polish */
.filter-card {
  align-items: center;
}
.filter-card > div:first-child {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  min-height: 44px;
}
.filter-card h2 {
  margin: 0;
  line-height: 1.15;
}
.filter-card .muted {
  margin-top: 6px;
  margin-bottom: 0;
  max-width: 520px;
}
.filter-form {
  flex: 0 1 auto;
}
@media(max-width:900px){
  .filter-card {
    align-items: stretch;
  }
  .filter-card > div:first-child {
    min-height: auto;
  }
}



/* V5.5.2 fuller filter widget visual polish */
.filter-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 118px;
  align-items: stretch;
  background:
    linear-gradient(90deg, rgba(79,70,229,.98) 0%, rgba(6,182,212,.88) 42%, rgba(255,255,255,.96) 42%, rgba(255,255,255,.92) 100%);
}
.filter-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 48%;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(255,255,255,.18), transparent 30%);
  pointer-events: none;
}
.filter-card > div:first-child {
  position: relative;
  z-index: 1;
  flex: 0 0 42%;
  padding: 24px 28px;
  color: #fff;
  justify-content: center;
  text-align: justify;
  text-align-last: left;
}
.filter-card h2 {
  font-size: 24px;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}
.filter-card .muted {
  color: rgba(255,255,255,.86);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 100%;
  text-align: justify;
  text-align-last: left;
}
.filter-form {
  position: relative;
  z-index: 1;
  flex: 1 1 58%;
  padding: 22px 24px;
  align-content: center;
  justify-content: flex-end;
}
.filter-form input,
.filter-form select {
  min-height: 44px;
  font-size: 14.5px;
}
.filter-form .btn {
  min-height: 44px;
}
@media(max-width:900px){
  .filter-card {
    background: linear-gradient(180deg, rgba(79,70,229,.98), rgba(6,182,212,.88) 42%, rgba(255,255,255,.96) 42%);
  }
  .filter-card::before {
    width: 100%;
    height: 45%;
    bottom: auto;
  }
  .filter-card > div:first-child,
  .filter-form {
    flex: auto;
    padding: 22px;
  }
  .filter-card > div:first-child {
    text-align: left;
  }
  .filter-card .muted {
    text-align: left;
  }
}



/* V5.8 academic operations polish */
.attendance-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #064e3b, #16a34a 54%, #0ea5e9);
}
.assignment-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #312e81, #7c3aed 54%, #ec4899);
}
.timeline-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #0f172a, #4f46e5 54%, #06b6d4);
}
.email-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #7c2d12, #ea580c 54%, #f59e0b);
}
.attendance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 16px;
}
.submission-answer {
  max-width: 360px;
  max-height: 120px;
  overflow: auto;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(148,163,184,.18);
  margin-bottom: 8px;
  white-space: normal;
}
.timeline {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(#4f46e5, #06b6d4);
  opacity: .35;
}
.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.timeline-dot {
  width: 16px;
  height: 16px;
  margin: 18px 0 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  box-shadow: 0 0 0 6px rgba(79,70,229,.12);
  z-index: 1;
}
.active-item {
  border-color: rgba(79,70,229,.35) !important;
  background: #eef2ff !important;
}
@media(max-width:700px){
  .timeline-row {
    grid-template-columns: 28px 1fr;
  }
  .timeline::before {
    left: 13px;
  }
  .timeline-dot {
    margin-left: 6px;
  }
}



/* V5.9 admin control, backups, setup wizard, empty states */
.setup-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #0f172a, #4f46e5 52%, #06b6d4);
}
.users-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #312e81, #7c3aed 52%, #ec4899);
}
.backup-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #14532d, #16a34a 52%, #84cc16);
}
.audit-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #1e293b, #475569 52%, #0ea5e9);
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.setup-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(148,163,184,.2);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 18px 42px rgba(15,23,42,.06);
}
.setup-step span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: #e0e7ff;
  color: #4338ca;
  flex: 0 0 auto;
}
.setup-step.done {
  background: linear-gradient(135deg, rgba(220,252,231,.95), rgba(255,255,255,.95));
  border-color: rgba(22,163,74,.28);
}
.setup-step.done span {
  background: #16a34a;
  color: #fff;
}
.setup-step strong {
  display: block;
  margin-bottom: 4px;
}
.setup-step p {
  margin: 0;
  color: #64748b;
}
.empty-state {
  padding: 28px;
  border: 1px dashed rgba(148,163,184,.45);
  border-radius: 20px;
  background: #f8fafc;
  text-align: center;
}
.empty-state strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}
.empty-state p {
  margin: 0 0 12px;
  color: #64748b;
}
.danger-card {
  border-color: rgba(239,68,68,.22) !important;
  background: linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,255,255,.96)) !important;
}
.mini-form input[name="new_password"] {
  max-width: 145px;
}



/* V6.0 reports, analytics, and risk detection */
.executive-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #0f172a, #2563eb 52%, #06b6d4);
}
.analytics-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #1e1b4b, #4f46e5 52%, #22c55e);
}
.risk-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #7f1d1d, #e11d48 52%, #f97316);
}
.reports-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #3b0764, #9333ea 52%, #ec4899);
}
.chart-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 14px;
  align-items: center;
  margin: 14px 0;
}
.chart-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chart-row strong {
  font-size: 14px;
}
.chart-row span {
  color: #64748b;
  font-weight: 700;
}
.chart-row b {
  display: block;
  height: 13px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.chart-row i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
}
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 18px 0;
}
.report-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.print-total {
  font-size: 28px;
  font-weight: 900;
}
@media(max-width:760px){
  .chart-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}



/* V6.1 QA, UI consistency, and system check polish */
.system-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #111827, #2563eb 52%, #14b8a6);
}
.card h2 {
  letter-spacing: -.02em;
}
.table-head {
  gap: 12px;
}
.item,
.report,
.notification-item,
.whatsapp-item {
  border: 1px solid rgba(148,163,184,.18);
}
.item:hover,
.report:hover,
.notification-item:hover,
.whatsapp-item:hover {
  box-shadow: 0 16px 34px rgba(15,23,42,.07);
}
.check-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 14px;
  margin: 10px 0;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: #f8fafc;
}
.check-item span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex: 0 0 auto;
}
.check-item.ok span {
  background: #dcfce7;
  color: #15803d;
}
.check-item.bad span {
  background: #fee2e2;
  color: #b91c1c;
}
.check-item strong {
  display: block;
  margin-bottom: 3px;
}
.check-item p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}
.form-hint {
  color: #64748b;
  font-size: 12px;
  margin-top: 4px;
}
.alert.ok,
.alert.bad,
.alert.warn {
  border-radius: 16px;
}
main .card > table,
main .card .table-wrap table {
  margin-top: 8px;
}
@media(max-width:760px){
  .check-item {
    padding: 12px;
  }
}



/* V6.2 Communication Center + Class Chat */
.comm-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #0f172a, #7c3aed 52%, #06b6d4);
}
.chat-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #064e3b, #0ea5e9 52%, #8b5cf6);
}
.inbox-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, #1e1b4b, #4f46e5 52%, #f97316);
}
.comm-log {
  align-items: center;
}
.chat-card {
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.chat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(15,23,42,.1);
}
.chat-box {
  padding: 0;
  overflow: hidden;
}
.chat-messages {
  max-height: 580px;
  overflow: auto;
  padding: 22px;
  background:
    radial-gradient(circle at 12% 10%, rgba(79,70,229,.08), transparent 24%),
    linear-gradient(180deg, #f8fafc, #eef2ff);
}
.chat-message {
  display: flex;
  margin: 12px 0;
}
.chat-message > div {
  max-width: 72%;
  padding: 14px 16px;
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.2);
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
}
.chat-message.mine {
  justify-content: flex-end;
}
.chat-message.mine > div {
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #fff;
}
.chat-message strong,
.chat-message small,
.chat-message p {
  display: block;
}
.chat-message small {
  opacity: .75;
  margin-top: 2px;
}
.chat-message p {
  margin: 8px 0 0;
}
.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border-top: 1px solid rgba(148,163,184,.18);
}
.notification-item.important {
  border-left: 5px solid #f97316;
}
.notification-item.unread {
  background: #fff7ed;
}
@media(max-width:760px){
  .chat-form {
    grid-template-columns: 1fr;
  }
  .chat-message > div {
    max-width: 92%;
  }
}



/* V6.3 Personalization + Comfort Settings */
body.theme-indigo{--p:#4f46e5;--p2:#7c3aed;--s:#06b6d4;--accent:#f59e0b}
body.theme-emerald{--p:#059669;--p2:#10b981;--s:#14b8a6;--accent:#84cc16}
body.theme-rose{--p:#e11d48;--p2:#f43f5e;--s:#fb7185;--accent:#f59e0b}
body.theme-orange{--p:#ea580c;--p2:#f97316;--s:#f59e0b;--accent:#06b6d4}
body.theme-slate{--p:#334155;--p2:#475569;--s:#64748b;--accent:#0ea5e9}
body.theme-violet{--p:#7c3aed;--p2:#a855f7;--s:#ec4899;--accent:#22c55e}
body.theme-ocean{--p:#0284c7;--p2:#0ea5e9;--s:#06b6d4;--accent:#6366f1}

body.mode-soft{
  --bg:#fff7ed;
  --panel:#fffaf5;
  --panel-2:#fffbeb;
  --line:#fed7aa;
  background:
    radial-gradient(circle at 0% 0%, rgba(251,146,60,.10), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(20,184,166,.10), transparent 26%),
    linear-gradient(180deg, #fffaf5 0%, #fffbeb 100%);
}
body.mode-dark,
body.mode-midnight{
  --d:#f8fafc;
  --text:#e2e8f0;
  --m:#94a3b8;
  --bg:#020617;
  --panel:#0f172a;
  --panel-2:#111827;
  --line:#334155;
  background:
    radial-gradient(circle at 0% 0%, rgba(79,70,229,.18), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(6,182,212,.16), transparent 26%),
    linear-gradient(180deg, #020617 0%, #0f172a 100%);
}
body.mode-midnight{
  --panel:#020617;
  --panel-2:#0b1120;
  --line:#1e293b;
}
body.mode-dark .card,
body.mode-midnight .card,
body.mode-dark .side,
body.mode-midnight .side,
body.mode-dark .top,
body.mode-midnight .top,
body.mode-dark input,
body.mode-dark select,
body.mode-dark textarea,
body.mode-midnight input,
body.mode-midnight select,
body.mode-midnight textarea{
  background:rgba(15,23,42,.92);
  color:var(--text);
  border-color:var(--line);
}
body.mode-dark h1,body.mode-dark h2,body.mode-dark h3,body.mode-dark h4,
body.mode-midnight h1,body.mode-midnight h2,body.mode-midnight h3,body.mode-midnight h4{color:var(--d)}
body.mode-dark table,body.mode-midnight table{background:rgba(15,23,42,.72)}
body.mode-dark th,body.mode-midnight th{background:#111827;color:#e2e8f0}
body.mode-dark td,body.mode-midnight td{border-color:#334155}
body.mode-dark .item,body.mode-midnight .item,
body.mode-dark .report,body.mode-midnight .report{background:rgba(15,23,42,.75);border-color:#334155}
body.mode-dark .muted,body.mode-midnight .muted,body.mode-dark small,body.mode-midnight small{color:#94a3b8}

body.text-small{font-size:14px}
body.text-normal{font-size:16px}
body.text-large{font-size:18px}
body.text-xl{font-size:20px}
body.text-large .btn,body.text-xl .btn{padding:.9em 1.15em}
body.text-large input,body.text-large select,body.text-large textarea,
body.text-xl input,body.text-xl select,body.text-xl textarea{font-size:1em}

body.density-compact .main{padding:18px}
body.density-compact .card{padding:18px}
body.density-compact input,body.density-compact select,body.density-compact textarea{padding:10px 12px;margin-bottom:9px}
body.density-compact .stats{gap:12px}
body.density-compact .grid2,body.density-compact .grid{gap:14px}
body.density-spacious .main{padding:34px}
body.density-spacious .card{padding:32px}
body.density-spacious input,body.density-spacious select,body.density-spacious textarea{padding:16px 18px;margin-bottom:18px}
body.density-spacious .stats{gap:22px}
body.density-spacious .grid2,body.density-spacious .grid{gap:24px}

body.corners-sharp{--radius-xl:6px;--radius-lg:6px;--radius-md:5px;--radius-sm:4px}
body.corners-soft{--radius-xl:16px;--radius-lg:14px;--radius-md:12px;--radius-sm:10px}
body.corners-rounded{--radius-xl:28px;--radius-lg:22px;--radius-md:16px;--radius-sm:12px}
body.corners-pill{--radius-xl:38px;--radius-lg:30px;--radius-md:22px;--radius-sm:18px}
body.corners-sharp .card,body.corners-soft .card,body.corners-rounded .card,body.corners-pill .card{border-radius:var(--radius-lg)}
body.corners-sharp .btn,body.corners-soft .btn,body.corners-rounded .btn,body.corners-pill .btn,
body.corners-sharp input,body.corners-soft input,body.corners-rounded input,body.corners-pill input,
body.corners-sharp select,body.corners-soft select,body.corners-rounded select,body.corners-pill select,
body.corners-sharp textarea,body.corners-soft textarea,body.corners-rounded textarea,body.corners-pill textarea{border-radius:var(--radius-sm)}

body.motion-reduced *,body.motion-reduced *::before,body.motion-reduced *::after{
  transition:none!important;
  animation:none!important;
  scroll-behavior:auto!important;
}
body.motion-reduced .btn:hover,
body.motion-reduced .item:hover,
body.motion-reduced .card:hover{transform:none!important}

body.contrast-high{
  --text:#020617;
  --m:#334155;
  --line:#64748b;
}
body.contrast-high.mode-dark,
body.contrast-high.mode-midnight{
  --text:#f8fafc;
  --m:#cbd5e1;
  --line:#94a3b8;
}
body.contrast-high .card,
body.contrast-high input,
body.contrast-high select,
body.contrast-high textarea,
body.contrast-high table,
body.contrast-high .item{
  border-width:2px!important;
}
body.contrast-high .btn{box-shadow:none;border:2px solid rgba(15,23,42,.18)}

body.dash-clean .dashboard-hero,
body.dash-clean .student-profile-hero,
body.dash-clean .lesson-hero{
  background:var(--panel)!important;
  color:var(--text)!important;
  border:1px solid var(--line);
}
body.dash-clean .dashboard-hero h2,
body.dash-clean .dashboard-hero p,
body.dash-clean .dashboard-hero .eyebrow{color:var(--text)!important}
body.dash-glass .dashboard-hero,
body.dash-glass .student-profile-hero,
body.dash-glass .lesson-hero{
  background:rgba(255,255,255,.48)!important;
  backdrop-filter:blur(24px);
  color:var(--text)!important;
  border:1px solid rgba(255,255,255,.45);
}
body.mode-dark.dash-glass .dashboard-hero,
body.mode-midnight.dash-glass .dashboard-hero{background:rgba(15,23,42,.55)!important;color:#fff!important}

body.tables-striped table tr:nth-child(even) td{background:rgba(148,163,184,.08)}
body.tables-carded table{border-collapse:separate;border-spacing:0 10px;background:transparent}
body.tables-carded th{border:0}
body.tables-carded td{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
body.tables-carded td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}
body.tables-carded td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}

body.sidebar-compact .side{width:210px}
body.sidebar-compact .brand small,
body.sidebar-compact .nav-label{display:none}
body.sidebar-compact .nav a{padding:10px 12px}
body.sidebar-soft .side{
  background:rgba(255,255,255,.56);
  backdrop-filter:blur(22px);
  border-right:1px solid rgba(255,255,255,.7);
}
body.mode-dark.sidebar-soft .side,
body.mode-midnight.sidebar-soft .side{background:rgba(15,23,42,.62);border-color:#334155}

body.font-classic{font-family:Georgia,"Times New Roman",serif}
body.font-classic input,body.font-classic select,body.font-classic textarea,body.font-classic button{font-family:inherit}
body.font-wide{letter-spacing:.01em}
body.font-wide p,body.font-wide td,body.font-wide input,body.font-wide textarea{line-height:1.8}

.appearance-hero{
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg,var(--p),var(--p2) 52%,var(--s));
}
.appearance-section{
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  margin-bottom:16px;
  background:var(--panel-2);
}
.appearance-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.appearance-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin:18px 0;
}
.appearance-preview{
  min-height:130px;
  border-radius:22px;
  padding:18px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,var(--p),var(--p2) 55%,var(--s));
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:var(--shadow-sm);
}
.appearance-preview span{
  width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.28);display:block;margin-bottom:auto;
}
.appearance-preview strong,.appearance-preview small{color:#fff}
.appearance-preview.theme-slate{--p:#334155;--p2:#475569;--s:#64748b}
.appearance-preview.theme-ocean{--p:#0284c7;--p2:#0ea5e9;--s:#06b6d4}
.appearance-preview.theme-emerald{--p:#059669;--p2:#10b981;--s:#14b8a6}
@media(max-width:900px){
  body.sidebar-compact .side{width:auto}
}



/* V6.3.1 Strong Theme Application Fix
   Makes theme color visibly affect sidebar, dashboard, cards, widgets, nav, tables, and background. */
body.theme-indigo{--p:#4f46e5;--p2:#7c3aed;--s:#06b6d4;--accent:#f59e0b;--theme-rgb:79,70,229;--theme2-rgb:124,58,237;--theme3-rgb:6,182,212}
body.theme-emerald{--p:#059669;--p2:#10b981;--s:#14b8a6;--accent:#84cc16;--theme-rgb:5,150,105;--theme2-rgb:16,185,129;--theme3-rgb:20,184,166}
body.theme-rose{--p:#e11d48;--p2:#f43f5e;--s:#fb7185;--accent:#f59e0b;--theme-rgb:225,29,72;--theme2-rgb:244,63,94;--theme3-rgb:251,113,133}
body.theme-orange{--p:#ea580c;--p2:#f97316;--s:#f59e0b;--accent:#06b6d4;--theme-rgb:234,88,12;--theme2-rgb:249,115,22;--theme3-rgb:245,158,11}
body.theme-slate{--p:#334155;--p2:#475569;--s:#64748b;--accent:#0ea5e9;--theme-rgb:51,65,85;--theme2-rgb:71,85,105;--theme3-rgb:100,116,139}
body.theme-violet{--p:#7c3aed;--p2:#a855f7;--s:#ec4899;--accent:#22c55e;--theme-rgb:124,58,237;--theme2-rgb:168,85,247;--theme3-rgb:236,72,153}
body.theme-ocean{--p:#0284c7;--p2:#0ea5e9;--s:#06b6d4;--accent:#6366f1;--theme-rgb:2,132,199;--theme2-rgb:14,165,233;--theme3-rgb:6,182,212}

/* Make the entire app background theme-aware */
body[class*="theme-"]{
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--theme-rgb),.16), transparent 28%),
    radial-gradient(circle at 100% 18%, rgba(var(--theme3-rgb),.18), transparent 26%),
    linear-gradient(180deg, rgba(var(--theme-rgb),.045) 0%, rgba(var(--theme3-rgb),.075) 100%);
}

/* Brand + sidebar should be one of the most obvious theme areas */
body[class*="theme-"] .brand-mark,
body[class*="theme-"] .btn.primary,
body[class*="theme-"] .grade-card,
body[class*="theme-"] .proficiency-card{
  background:linear-gradient(135deg,var(--p),var(--p2) 55%,var(--s))!important;
  box-shadow:0 14px 32px rgba(var(--theme-rgb),.26)!important;
}
body[class*="theme-"] .side{
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--theme3-rgb),.22), transparent 30%),
    linear-gradient(180deg, rgba(var(--theme-rgb),.13), rgba(255,255,255,.94) 42%, rgba(var(--theme3-rgb),.10));
  border-right:1px solid rgba(var(--theme-rgb),.16);
}
body.mode-dark[class*="theme-"] .side,
body.mode-midnight[class*="theme-"] .side{
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--theme3-rgb),.25), transparent 32%),
    linear-gradient(180deg, rgba(var(--theme-rgb),.28), rgba(15,23,42,.96) 46%, rgba(var(--theme3-rgb),.18));
  border-right:1px solid rgba(var(--theme3-rgb),.2);
}
body[class*="theme-"] .nav a:hover,
body[class*="theme-"] .nav a.active{
  background:linear-gradient(135deg, rgba(var(--theme-rgb),.13), rgba(var(--theme3-rgb),.13));
  color:var(--p);
}
body[class*="theme-"] .nav-count{
  background:var(--p);
  color:#fff;
}

/* Dashboard heroes and all feature heroes should follow the selected theme */
body[class*="theme-"] .dashboard-hero,
body[class*="theme-"] .student-profile-hero,
body[class*="theme-"] .lesson-hero,
body[class*="theme-"] .teacher-hero,
body[class*="theme-"] .whatsapp-hero,
body[class*="theme-"] .notification-hero,
body[class*="theme-"] .profile-hero,
body[class*="theme-"] .attendance-hero,
body[class*="theme-"] .assignment-hero,
body[class*="theme-"] .timeline-hero,
body[class*="theme-"] .email-hero,
body[class*="theme-"] .setup-hero,
body[class*="theme-"] .users-hero,
body[class*="theme-"] .backup-hero,
body[class*="theme-"] .audit-hero,
body[class*="theme-"] .executive-hero,
body[class*="theme-"] .analytics-hero,
body[class*="theme-"] .risk-hero,
body[class*="theme-"] .reports-hero,
body[class*="theme-"] .system-hero,
body[class*="theme-"] .comm-hero,
body[class*="theme-"] .chat-hero,
body[class*="theme-"] .inbox-hero,
body[class*="theme-"] .appearance-hero{
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.26), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(135deg,var(--p),var(--p2) 52%,var(--s))!important;
  color:#fff!important;
  box-shadow:0 24px 70px rgba(var(--theme-rgb),.24);
}
body[class*="theme-"] .dashboard-hero h1,
body[class*="theme-"] .dashboard-hero h2,
body[class*="theme-"] .dashboard-hero h3,
body[class*="theme-"] .dashboard-hero p,
body[class*="theme-"] .dashboard-hero .eyebrow,
body[class*="theme-"] .student-profile-hero h2,
body[class*="theme-"] .student-profile-hero p,
body[class*="theme-"] .lesson-hero h2,
body[class*="theme-"] .lesson-hero p{
  color:#fff!important;
}

/* Clean and glass dashboard styles still respect theme */
body[class*="theme-"].dash-clean .dashboard-hero,
body[class*="theme-"].dash-clean .student-profile-hero,
body[class*="theme-"].dash-clean .lesson-hero{
  background:
    linear-gradient(135deg, rgba(var(--theme-rgb),.10), rgba(var(--theme3-rgb),.10)),
    var(--panel)!important;
  color:var(--text)!important;
  border:1px solid rgba(var(--theme-rgb),.25);
  box-shadow:0 20px 55px rgba(var(--theme-rgb),.10);
}
body[class*="theme-"].dash-clean .dashboard-hero h2,
body[class*="theme-"].dash-clean .dashboard-hero p,
body[class*="theme-"].dash-clean .dashboard-hero .eyebrow{
  color:var(--text)!important;
}
body[class*="theme-"].dash-glass .dashboard-hero,
body[class*="theme-"].dash-glass .student-profile-hero,
body[class*="theme-"].dash-glass .lesson-hero{
  background:
    linear-gradient(135deg, rgba(var(--theme-rgb),.35), rgba(var(--theme3-rgb),.25)),
    rgba(255,255,255,.42)!important;
  backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.55);
}

/* Cards, widgets, tables and forms get a visible themed accent */
body[class*="theme-"] .card{
  border-color:rgba(var(--theme-rgb),.13);
  box-shadow:0 18px 46px rgba(var(--theme-rgb),.055);
}
body[class*="theme-"] .card h2::after{
  content:"";
  display:block;
  width:46px;
  height:3px;
  border-radius:999px;
  margin-top:9px;
  background:linear-gradient(90deg,var(--p),var(--s));
}
body[class*="theme-"] .stat{
  background:
    linear-gradient(135deg, rgba(var(--theme-rgb),.10), rgba(var(--theme3-rgb),.10)),
    var(--panel);
  border:1px solid rgba(var(--theme-rgb),.16);
}
body[class*="theme-"] .stat strong{
  color:var(--p);
}
body[class*="theme-"] input:focus,
body[class*="theme-"] select:focus,
body[class*="theme-"] textarea:focus{
  border-color:rgba(var(--theme-rgb),.62);
  box-shadow:0 0 0 4px rgba(var(--theme-rgb),.14);
}
body[class*="theme-"] th{
  background:linear-gradient(135deg, rgba(var(--theme-rgb),.12), rgba(var(--theme3-rgb),.10));
  color:var(--d);
}
body[class*="theme-"] .badge.info{
  background:rgba(var(--theme3-rgb),.12);
  color:var(--p);
  border-color:rgba(var(--theme3-rgb),.25);
}
body[class*="theme-"] .item:hover,
body[class*="theme-"] .report:hover,
body[class*="theme-"] .notification-item:hover,
body[class*="theme-"] .whatsapp-item:hover{
  border-color:rgba(var(--theme-rgb),.25);
  box-shadow:0 18px 42px rgba(var(--theme-rgb),.10);
}

/* Topbar and profile pill theme response */
body[class*="theme-"] .top{
  border-bottom:1px solid rgba(var(--theme-rgb),.13);
}
body[class*="theme-"] .pill{
  background:linear-gradient(135deg, rgba(var(--theme-rgb),.12), rgba(var(--theme3-rgb),.12));
  border:1px solid rgba(var(--theme-rgb),.18);
  color:var(--p);
}

/* Dark mode improvements for themed cards */
body.mode-dark[class*="theme-"] .card,
body.mode-midnight[class*="theme-"] .card,
body.mode-dark[class*="theme-"] .stat,
body.mode-midnight[class*="theme-"] .stat{
  border-color:rgba(var(--theme3-rgb),.22);
  box-shadow:0 18px 46px rgba(0,0,0,.25);
}
body.mode-dark[class*="theme-"] .card h2::after,
body.mode-midnight[class*="theme-"] .card h2::after{
  opacity:.95;
}
body.mode-dark[class*="theme-"] th,
body.mode-midnight[class*="theme-"] th{
  background:linear-gradient(135deg, rgba(var(--theme-rgb),.24), rgba(var(--theme3-rgb),.18));
  color:#fff;
}
body.mode-dark[class*="theme-"] .pill,
body.mode-midnight[class*="theme-"] .pill{
  background:rgba(var(--theme-rgb),.20);
  color:#fff;
  border-color:rgba(var(--theme3-rgb),.25);
}

/* Public pages also respond if later extended to saved/default theme */
body[class*="theme-"] .site-nav{
  border-bottom-color:rgba(var(--theme-rgb),.16);
}
body[class*="theme-"] .hero{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg,var(--p),var(--p2) 55%,var(--s))!important;
}



/* V6.3.2 Tasteful Theme Rebalance
   Indigo/Cyan is restored to the original look. Other themes are subtler and cleaner. */

/* Better palette helpers */
body.theme-indigo{--theme-deep:#312e81;--theme-soft:rgba(79,70,229,.10);--theme-soft2:rgba(6,182,212,.10)}
body.theme-emerald{--theme-deep:#064e3b;--theme-soft:rgba(5,150,105,.09);--theme-soft2:rgba(20,184,166,.10)}
body.theme-rose{--theme-deep:#881337;--theme-soft:rgba(225,29,72,.08);--theme-soft2:rgba(251,113,133,.09)}
body.theme-orange{--theme-deep:#7c2d12;--theme-soft:rgba(234,88,12,.08);--theme-soft2:rgba(245,158,11,.10)}
body.theme-slate{--theme-deep:#0f172a;--theme-soft:rgba(51,65,85,.08);--theme-soft2:rgba(100,116,139,.10)}
body.theme-violet{--theme-deep:#4c1d95;--theme-soft:rgba(124,58,237,.08);--theme-soft2:rgba(236,72,153,.08)}
body.theme-ocean{--theme-deep:#075985;--theme-soft:rgba(2,132,199,.08);--theme-soft2:rgba(6,182,212,.10)}

/* Make theme visible but less messy */
body[class*="theme-"]{
  background:
    radial-gradient(circle at 0% 0%, var(--theme-soft), transparent 28%),
    radial-gradient(circle at 100% 20%, var(--theme-soft2), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}
body[class*="theme-"] .side{
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--theme-rgb),.18), transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(var(--theme3-rgb),.13), transparent 24%),
    linear-gradient(180deg,#0f172a 0%, #111827 48%, #0b1220 100%);
  border-right:1px solid rgba(255,255,255,.05);
}
body[class*="theme-"] .nav a:hover,
body[class*="theme-"] .nav a.active{
  background:linear-gradient(135deg, rgba(var(--theme-rgb),.25), rgba(var(--theme3-rgb),.14));
  color:#fff;
  border-color:rgba(148,163,184,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body[class*="theme-"] .dashboard-hero,
body[class*="theme-"] .student-profile-hero,
body[class*="theme-"] .lesson-hero,
body[class*="theme-"] .teacher-hero,
body[class*="theme-"] .whatsapp-hero,
body[class*="theme-"] .notification-hero,
body[class*="theme-"] .profile-hero,
body[class*="theme-"] .attendance-hero,
body[class*="theme-"] .assignment-hero,
body[class*="theme-"] .timeline-hero,
body[class*="theme-"] .email-hero,
body[class*="theme-"] .setup-hero,
body[class*="theme-"] .users-hero,
body[class*="theme-"] .backup-hero,
body[class*="theme-"] .audit-hero,
body[class*="theme-"] .executive-hero,
body[class*="theme-"] .analytics-hero,
body[class*="theme-"] .risk-hero,
body[class*="theme-"] .reports-hero,
body[class*="theme-"] .system-hero,
body[class*="theme-"] .comm-hero,
body[class*="theme-"] .chat-hero,
body[class*="theme-"] .inbox-hero,
body[class*="theme-"] .appearance-hero{
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, var(--theme-deep), var(--p) 56%, var(--s))!important;
  box-shadow:var(--shadow-lg);
}
body[class*="theme-"] .card{
  border-color:rgba(226,232,240,.92);
  box-shadow:var(--shadow-md);
}
body[class*="theme-"] .card h2::after{
  display:none!important;
}
body[class*="theme-"] .stat{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.98));
  border:1px solid rgba(226,232,240,.92);
  box-shadow:var(--shadow-md);
}
body[class*="theme-"] .stat strong{color:var(--d)}
body[class*="theme-"] th{
  background:#f8fafc;
  color:#64748b;
}
body[class*="theme-"] .pill{
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid #e2e8f0;
  color:var(--d);
}
body[class*="theme-"] .item:hover,
body[class*="theme-"] .report:hover,
body[class*="theme-"] .notification-item:hover,
body[class*="theme-"] .whatsapp-item:hover{
  border-color:rgba(var(--theme-rgb),.18);
  box-shadow:0 16px 34px rgba(15,23,42,.07);
}
body[class*="theme-"] .top{
  border:1px solid rgba(226,232,240,.85);
}

/* Indigo/Cyan should look exactly like the original default premium UI */
body.theme-indigo{
  --p:#4f46e5;
  --p2:#7c3aed;
  --s:#06b6d4;
  --accent:#f59e0b;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,.12), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(6,182,212,.12), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}
body.theme-indigo .side{
  background:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,.25), transparent 26%),
    radial-gradient(circle at 100% 100%, rgba(6,182,212,.18), transparent 25%),
    linear-gradient(180deg,#0f172a 0%, #111827 48%, #0b1220 100%);
  color:#cbd5e1;
  border-right:1px solid rgba(255,255,255,.05);
}
body.theme-indigo .nav a:hover,
body.theme-indigo .nav a.active{
  background:linear-gradient(135deg, rgba(79,70,229,.28), rgba(6,182,212,.16));
  color:#fff;
  border-color:rgba(148,163,184,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.theme-indigo .dashboard-hero,
body.theme-indigo .student-profile-hero,
body.theme-indigo .lesson-hero,
body.theme-indigo .teacher-hero,
body.theme-indigo .whatsapp-hero,
body.theme-indigo .notification-hero,
body.theme-indigo .profile-hero,
body.theme-indigo .attendance-hero,
body.theme-indigo .assignment-hero,
body.theme-indigo .timeline-hero,
body.theme-indigo .email-hero,
body.theme-indigo .setup-hero,
body.theme-indigo .users-hero,
body.theme-indigo .backup-hero,
body.theme-indigo .audit-hero,
body.theme-indigo .executive-hero,
body.theme-indigo .analytics-hero,
body.theme-indigo .risk-hero,
body.theme-indigo .reports-hero,
body.theme-indigo .system-hero,
body.theme-indigo .comm-hero,
body.theme-indigo .chat-hero,
body.theme-indigo .inbox-hero,
body.theme-indigo .appearance-hero{
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #312e81, #4f46e5 52%, #06b6d4)!important;
  box-shadow:var(--shadow-lg);
}
body.theme-indigo .brand-mark,
body.theme-indigo .btn.primary,
body.theme-indigo .grade-card,
body.theme-indigo .proficiency-card{
  background:linear-gradient(135deg,#4f46e5,#7c3aed 55%, #06b6d4)!important;
  box-shadow:0 10px 24px rgba(79,70,229,.35)!important;
}

/* Non-indigo: color is visible but not overdone */
body.theme-emerald .brand-mark,
body.theme-rose .brand-mark,
body.theme-orange .brand-mark,
body.theme-slate .brand-mark,
body.theme-violet .brand-mark,
body.theme-ocean .brand-mark,
body.theme-emerald .btn.primary,
body.theme-rose .btn.primary,
body.theme-orange .btn.primary,
body.theme-slate .btn.primary,
body.theme-violet .btn.primary,
body.theme-ocean .btn.primary{
  background:linear-gradient(135deg,var(--p),var(--p2) 60%,var(--s))!important;
  box-shadow:0 10px 24px rgba(var(--theme-rgb),.24)!important;
}
body.theme-emerald .grade-card,
body.theme-rose .grade-card,
body.theme-orange .grade-card,
body.theme-slate .grade-card,
body.theme-violet .grade-card,
body.theme-ocean .grade-card,
body.theme-emerald .proficiency-card,
body.theme-rose .proficiency-card,
body.theme-orange .proficiency-card,
body.theme-slate .proficiency-card,
body.theme-violet .proficiency-card,
body.theme-ocean .proficiency-card{
  background:linear-gradient(135deg,var(--theme-deep),var(--p) 55%,var(--s))!important;
  box-shadow:0 14px 32px rgba(var(--theme-rgb),.20)!important;
}

/* Dark modes should stay readable and not become neon */
body.mode-dark[class*="theme-"],
body.mode-midnight[class*="theme-"]{
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--theme-rgb),.16), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(var(--theme3-rgb),.13), transparent 26%),
    linear-gradient(180deg, #020617 0%, #0f172a 100%);
}
body.mode-dark[class*="theme-"] .card,
body.mode-midnight[class*="theme-"] .card,
body.mode-dark[class*="theme-"] .stat,
body.mode-midnight[class*="theme-"] .stat{
  border-color:#334155;
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}
body.mode-dark[class*="theme-"] th,
body.mode-midnight[class*="theme-"] th{
  background:#111827;
  color:#e2e8f0;
}
body.mode-dark[class*="theme-"] .pill,
body.mode-midnight[class*="theme-"] .pill{
  background:rgba(15,23,42,.85);
  color:#e2e8f0;
  border-color:#334155;
}



/* V6.3.3 Top-right Widget Contrast Fix
   Keeps hero widgets readable in every theme/mode. */
body[class*="theme-"] .dashboard-hero .grade-card,
body[class*="theme-"] .student-profile-hero .grade-card,
body[class*="theme-"] .lesson-hero .grade-card,
body[class*="theme-"] .hero-widget-pair .grade-card,
body[class*="theme-"] .dashboard-widget.grade-card,
body[class*="theme-"] .proficiency-card {
  background:rgba(255,255,255,.96)!important;
  color:#0f172a!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.16)!important;
}
body[class*="theme-"] .dashboard-hero .grade-card span,
body[class*="theme-"] .student-profile-hero .grade-card span,
body[class*="theme-"] .lesson-hero .grade-card span,
body[class*="theme-"] .hero-widget-pair .grade-card span,
body[class*="theme-"] .dashboard-widget.grade-card span,
body[class*="theme-"] .proficiency-card span {
  color:#475569!important;
}
body[class*="theme-"] .dashboard-hero .grade-card strong,
body[class*="theme-"] .student-profile-hero .grade-card strong,
body[class*="theme-"] .lesson-hero .grade-card strong,
body[class*="theme-"] .hero-widget-pair .grade-card strong,
body[class*="theme-"] .dashboard-widget.grade-card strong,
body[class*="theme-"] .proficiency-card strong {
  color:var(--p)!important;
  text-shadow:none!important;
}
body[class*="theme-"] .dashboard-hero .grade-card small,
body[class*="theme-"] .student-profile-hero .grade-card small,
body[class*="theme-"] .lesson-hero .grade-card small,
body[class*="theme-"] .hero-widget-pair .grade-card small,
body[class*="theme-"] .dashboard-widget.grade-card small,
body[class*="theme-"] .proficiency-card small {
  color:#64748b!important;
}

/* Dark / Midnight version: readable dark card instead of washed-out text. */
body.mode-dark[class*="theme-"] .dashboard-hero .grade-card,
body.mode-dark[class*="theme-"] .student-profile-hero .grade-card,
body.mode-dark[class*="theme-"] .lesson-hero .grade-card,
body.mode-dark[class*="theme-"] .hero-widget-pair .grade-card,
body.mode-dark[class*="theme-"] .dashboard-widget.grade-card,
body.mode-dark[class*="theme-"] .proficiency-card,
body.mode-midnight[class*="theme-"] .dashboard-hero .grade-card,
body.mode-midnight[class*="theme-"] .student-profile-hero .grade-card,
body.mode-midnight[class*="theme-"] .lesson-hero .grade-card,
body.mode-midnight[class*="theme-"] .hero-widget-pair .grade-card,
body.mode-midnight[class*="theme-"] .dashboard-widget.grade-card,
body.mode-midnight[class*="theme-"] .proficiency-card {
  background:rgba(15,23,42,.92)!important;
  color:#f8fafc!important;
  border:1px solid rgba(148,163,184,.32)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28)!important;
}
body.mode-dark[class*="theme-"] .dashboard-hero .grade-card span,
body.mode-dark[class*="theme-"] .student-profile-hero .grade-card span,
body.mode-dark[class*="theme-"] .lesson-hero .grade-card span,
body.mode-dark[class*="theme-"] .hero-widget-pair .grade-card span,
body.mode-dark[class*="theme-"] .dashboard-widget.grade-card span,
body.mode-dark[class*="theme-"] .proficiency-card span,
body.mode-midnight[class*="theme-"] .dashboard-hero .grade-card span,
body.mode-midnight[class*="theme-"] .student-profile-hero .grade-card span,
body.mode-midnight[class*="theme-"] .lesson-hero .grade-card span,
body.mode-midnight[class*="theme-"] .hero-widget-pair .grade-card span,
body.mode-midnight[class*="theme-"] .dashboard-widget.grade-card span,
body.mode-midnight[class*="theme-"] .proficiency-card span {
  color:#cbd5e1!important;
}
body.mode-dark[class*="theme-"] .dashboard-hero .grade-card strong,
body.mode-dark[class*="theme-"] .student-profile-hero .grade-card strong,
body.mode-dark[class*="theme-"] .lesson-hero .grade-card strong,
body.mode-dark[class*="theme-"] .hero-widget-pair .grade-card strong,
body.mode-dark[class*="theme-"] .dashboard-widget.grade-card strong,
body.mode-dark[class*="theme-"] .proficiency-card strong,
body.mode-midnight[class*="theme-"] .dashboard-hero .grade-card strong,
body.mode-midnight[class*="theme-"] .student-profile-hero .grade-card strong,
body.mode-midnight[class*="theme-"] .lesson-hero .grade-card strong,
body.mode-midnight[class*="theme-"] .hero-widget-pair .grade-card strong,
body.mode-midnight[class*="theme-"] .dashboard-widget.grade-card strong,
body.mode-midnight[class*="theme-"] .proficiency-card strong {
  color:#ffffff!important;
}
body.mode-dark[class*="theme-"] .dashboard-hero .grade-card small,
body.mode-dark[class*="theme-"] .student-profile-hero .grade-card small,
body.mode-dark[class*="theme-"] .lesson-hero .grade-card small,
body.mode-dark[class*="theme-"] .hero-widget-pair .grade-card small,
body.mode-dark[class*="theme-"] .dashboard-widget.grade-card small,
body.mode-dark[class*="theme-"] .proficiency-card small,
body.mode-midnight[class*="theme-"] .dashboard-hero .grade-card small,
body.mode-midnight[class*="theme-"] .student-profile-hero .grade-card small,
body.mode-midnight[class*="theme-"] .lesson-hero .grade-card small,
body.mode-midnight[class*="theme-"] .hero-widget-pair .grade-card small,
body.mode-midnight[class*="theme-"] .dashboard-widget.grade-card small,
body.mode-midnight[class*="theme-"] .proficiency-card small {
  color:#cbd5e1!important;
}

/* Make tiny badges/text inside those widgets readable too. */
body[class*="theme-"] .dashboard-hero .grade-card .badge,
body[class*="theme-"] .hero-widget-pair .grade-card .badge {
  background:rgba(var(--theme-rgb),.10)!important;
  color:var(--p)!important;
  border-color:rgba(var(--theme-rgb),.20)!important;
}
body.mode-dark[class*="theme-"] .dashboard-hero .grade-card .badge,
body.mode-midnight[class*="theme-"] .dashboard-hero .grade-card .badge,
body.mode-dark[class*="theme-"] .hero-widget-pair .grade-card .badge,
body.mode-midnight[class*="theme-"] .hero-widget-pair .grade-card .badge {
  background:rgba(var(--theme3-rgb),.18)!important;
  color:#fff!important;
  border-color:rgba(var(--theme3-rgb),.26)!important;
}



/* V6.3.4 Public Landing Simplification */
.landing-hero {
  min-height: 560px;
  align-items: center;
}
.landing-hero h1 {
  font-size: clamp(64px, 8vw, 118px);
  line-height: .9;
  letter-spacing: -.07em;
  margin-bottom: 18px;
}
.landing-slogan {
  font-size: clamp(25px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -.04em;
  max-width: 720px;
}
.landing-copy {
  max-width: 720px;
  font-size: 18px;
  opacity: .92;
}
.landing-ghost {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: none;
}
.landing-card {
  background: rgba(255,255,255,.92);
  color: #0f172a;
}
.landing-card h3 {
  font-size: 30px;
  color: #0f172a;
}
.landing-card p {
  color: #475569;
}
.landing-note {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(148,163,184,.24);
}
.landing-note span {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg,var(--p),var(--p2) 55%,var(--s));
  box-shadow: 0 12px 26px rgba(79,70,229,.22);
}
.landing-note strong {
  color: #0f172a;
  font-size: 16px;
}
.landing-note small {
  color: #64748b;
}
.landing-section {
  padding-top: 70px;
  padding-bottom: 80px;
}
.landing-message {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 38px;
  border-radius: 30px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.88);
  box-shadow: var(--shadow-md);
}
.landing-message h2 {
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -.05em;
}
.landing-message p:not(.eyebrow) {
  color: #64748b;
  font-size: 18px;
}
@media(max-width:900px){
  .landing-hero {
    grid-template-columns: 1fr;
  }
  .landing-hero h1 {
    font-size: 62px;
  }
}



/* V6.3.5 Cleaner Sidebar + Role Workspaces */
.workspace-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg,var(--p),var(--p2) 52%,var(--s));
}
.workspace-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:18px;
}
.workspace-group {
  display:flex;
  flex-direction:column;
  min-height:260px;
}
.workspace-group h2 {
  margin-bottom:8px;
}
.workspace-group .muted {
  margin-bottom:18px;
}
.workspace-links {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin-top:auto;
}
.workspace-links a {
  display:block;
  padding:15px;
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(var(--theme-rgb,79,70,229),.08), rgba(var(--theme3-rgb,6,182,212),.08)),
    #fff;
  border:1px solid rgba(226,232,240,.92);
  color:var(--text);
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.workspace-links a:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(var(--theme-rgb,79,70,229),.22);
}
.workspace-links strong {
  display:block;
  font-size:15px;
  color:var(--d);
  margin-bottom:4px;
}
.workspace-links small {
  display:block;
  color:var(--m);
}
body.mode-dark .workspace-links a,
body.mode-midnight .workspace-links a {
  background:rgba(15,23,42,.82);
  border-color:#334155;
}
body.mode-dark .workspace-links strong,
body.mode-midnight .workspace-links strong {
  color:#f8fafc;
}

/* Sidebar compactness after workspace cleanup */
.side .nav {
  gap:7px;
}
.side .nav a {
  font-size:15px;
  padding:12px 14px;
}
.side .nav-label {
  margin-top:22px;
}
@media(max-width:760px){
  .workspace-grid {
    grid-template-columns:1fr;
  }
  .workspace-links {
    grid-template-columns:1fr;
  }
}



/* V6.3.6 Tidy Role Workspaces */
.workspace-hero-clean {
  align-items:flex-start;
}
.workspace-hero-clean > div {
  max-width:860px;
}
.workspace-grid {
  align-items:start;
}
.workspace-group {
  min-height:0!important;
  display:block!important;
}
.workspace-group .muted {
  margin-bottom:16px;
}
.workspace-links {
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-top:0!important;
}
.workspace-links a {
  display:grid!important;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  min-height:68px;
  padding:14px 16px!important;
}
.workspace-links a strong {
  margin:0!important;
  line-height:1.2;
}
.workspace-links a small {
  text-align:right;
  line-height:1.25;
}
.workspace-links a small::after {
  content:" →";
  font-weight:900;
}
@media(max-width:760px){
  .workspace-links a {
    grid-template-columns:1fr;
  }
  .workspace-links a small {
    text-align:left;
  }
}



/* V6.3.7 Visual Appearance Selector */
.appearance-card-form {
  display:grid;
  gap:18px;
}
.appearance-panel {
  background:var(--panel);
  border:1px solid rgba(226,232,240,.92);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow-md);
}
.appearance-panel-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:18px;
}
.appearance-panel-head h2 {
  margin:0;
}
.appearance-panel-head small {
  max-width:420px;
  text-align:right;
}
.appearance-choice-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
}
.theme-grid {
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.appearance-choice {
  position:relative;
  display:block;
  padding:12px;
  border:2px solid rgba(226,232,240,.95);
  border-radius:22px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#f8fbff);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height:155px;
}
.appearance-choice:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(var(--theme-rgb,79,70,229),.28);
}
.appearance-choice input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.appearance-choice.selected,
.appearance-choice:has(input:checked) {
  border-color:var(--p);
  box-shadow:0 18px 44px rgba(var(--theme-rgb,79,70,229),.18);
}
.appearance-choice.selected::after,
.appearance-choice:has(input:checked)::after {
  content:"✓";
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--p),var(--s));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:0 10px 22px rgba(var(--theme-rgb,79,70,229),.28);
}
.appearance-choice > strong {
  display:block;
  margin-top:12px;
  color:var(--d);
  font-size:15px;
}
.appearance-thumb {
  display:block;
  position:relative;
  height:92px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg,#312e81,#4f46e5 55%,#06b6d4);
  border:1px solid rgba(148,163,184,.22);
}
.appearance-thumb i,
.appearance-thumb b,
.appearance-thumb em {
  position:absolute;
  display:block;
  border-radius:999px;
  content:"";
}
.appearance-thumb i {
  width:38px;
  height:38px;
  left:13px;
  top:13px;
  background:rgba(255,255,255,.88);
}
.appearance-thumb b {
  left:13px;
  right:18px;
  height:10px;
  bottom:20px;
  background:rgba(255,255,255,.82);
}
.appearance-thumb em {
  width:44%;
  height:10px;
  left:13px;
  bottom:38px;
  background:rgba(255,255,255,.56);
}

/* theme thumbnails */
.preview-theme-indigo{background:linear-gradient(135deg,#312e81,#4f46e5 55%,#06b6d4)}
.preview-theme-emerald{background:linear-gradient(135deg,#064e3b,#059669 55%,#14b8a6)}
.preview-theme-rose{background:linear-gradient(135deg,#881337,#e11d48 58%,#fb7185)}
.preview-theme-orange{background:linear-gradient(135deg,#7c2d12,#ea580c 58%,#f59e0b)}
.preview-theme-slate{background:linear-gradient(135deg,#0f172a,#334155 58%,#64748b)}
.preview-theme-violet{background:linear-gradient(135deg,#4c1d95,#7c3aed 58%,#ec4899)}
.preview-theme-ocean{background:linear-gradient(135deg,#075985,#0284c7 58%,#06b6d4)}

/* mode thumbnails */
.preview-mode-light{background:linear-gradient(135deg,#ffffff,#eef4ff)}
.preview-mode-light i{background:#4f46e5}
.preview-mode-light b,.preview-mode-light em{background:#c7d2fe}
.preview-mode-soft{background:linear-gradient(135deg,#fff7ed,#fffbeb)}
.preview-mode-soft i{background:#f97316}
.preview-mode-soft b,.preview-mode-soft em{background:#fed7aa}
.preview-mode-dark{background:linear-gradient(135deg,#0f172a,#1e293b)}
.preview-mode-midnight{background:linear-gradient(135deg,#020617,#0b1120)}
.preview-mode-dark i,.preview-mode-midnight i{background:#64748b}
.preview-mode-dark b,.preview-mode-dark em,.preview-mode-midnight b,.preview-mode-midnight em{background:#cbd5e1}

/* density thumbnails */
.preview-density-compact b{height:7px;bottom:18px}.preview-density-compact em{height:7px;bottom:32px}
.preview-density-comfortable b{height:10px}.preview-density-comfortable em{height:10px}
.preview-density-spacious b{height:13px;bottom:18px}.preview-density-spacious em{height:13px;bottom:42px}

/* text thumbnails */
.preview-text-small::after,.preview-text-normal::after,.preview-text-large::after,.preview-text-xl::after{
  content:"Aa";
  position:absolute;
  right:16px;
  top:18px;
  color:#fff;
  font-weight:900;
}
.preview-text-small::after{font-size:18px}
.preview-text-normal::after{font-size:24px}
.preview-text-large::after{font-size:31px}
.preview-text-xl::after{font-size:38px}

/* dashboard thumbnails */
.preview-dash-gradient{background:linear-gradient(135deg,var(--p),var(--p2) 55%,var(--s))}
.preview-dash-clean{background:#f8fafc}
.preview-dash-clean i{background:var(--p)}
.preview-dash-clean b,.preview-dash-clean em{background:#cbd5e1}
.preview-dash-glass{background:linear-gradient(135deg,rgba(79,70,229,.45),rgba(6,182,212,.35)),rgba(255,255,255,.48);backdrop-filter:blur(10px)}
.preview-dash-glass i,.preview-dash-glass b,.preview-dash-glass em{background:rgba(255,255,255,.72)}

/* sidebar thumbnails */
.preview-sidebar-expanded::before,.preview-sidebar-compact::before,.preview-sidebar-soft::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  background:#0f172a;
}
.preview-sidebar-expanded::before{width:34%}
.preview-sidebar-compact::before{width:22%}
.preview-sidebar-soft::before{width:34%;background:rgba(255,255,255,.52);border-right:1px solid rgba(255,255,255,.5)}
.preview-sidebar-soft{background:linear-gradient(135deg,#eef2ff,#dff7ff)}

/* table thumbnails */
.preview-table-standard b,.preview-table-standard em{left:18px;right:18px}
.preview-table-striped{background:linear-gradient(180deg,#f8fafc 0 25%,#e2e8f0 25% 50%,#f8fafc 50% 75%,#e2e8f0 75%)}
.preview-table-striped i{background:#4f46e5}
.preview-table-carded{background:#eef2ff}
.preview-table-carded b,.preview-table-carded em{height:18px;border-radius:12px;background:#fff;box-shadow:0 8px 18px rgba(15,23,42,.08)}

/* corner thumbnails */
.preview-corner-sharp,.preview-corner-sharp i,.preview-corner-sharp b,.preview-corner-sharp em{border-radius:4px}
.preview-corner-soft,.preview-corner-soft i,.preview-corner-soft b,.preview-corner-soft em{border-radius:12px}
.preview-corner-rounded,.preview-corner-rounded i,.preview-corner-rounded b,.preview-corner-rounded em{border-radius:20px}
.preview-corner-pill,.preview-corner-pill i,.preview-corner-pill b,.preview-corner-pill em{border-radius:999px}

/* motion/contrast/font thumbnails */
.preview-motion-reduced::after{content:"–";position:absolute;right:18px;top:18px;color:#fff;font-size:36px;font-weight:900}
.preview-motion-normal::after{content:"↗";position:absolute;right:18px;top:18px;color:#fff;font-size:28px;font-weight:900}
.preview-contrast-high{background:linear-gradient(135deg,#000,#1f2937)}
.preview-contrast-high i,.preview-contrast-high b,.preview-contrast-high em{background:#fff}
.preview-contrast-normal{background:linear-gradient(135deg,#4f46e5,#06b6d4)}
.preview-font-classic::after{content:"Serif";position:absolute;right:14px;top:18px;color:#fff;font-family:Georgia,serif;font-weight:900}
.preview-font-modern::after{content:"Sans";position:absolute;right:14px;top:18px;color:#fff;font-weight:900}
.preview-font-wide::after{content:"W i d e";position:absolute;right:14px;top:18px;color:#fff;font-weight:900;letter-spacing:.14em}

.appearance-sticky-actions {
  position:sticky;
  bottom:18px;
  z-index:8;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  border:1px solid rgba(226,232,240,.92);
  box-shadow:var(--shadow-md);
}
body.mode-dark .appearance-panel,
body.mode-midnight .appearance-panel,
body.mode-dark .appearance-choice,
body.mode-midnight .appearance-choice {
  background:rgba(15,23,42,.92);
  border-color:#334155;
}
body.mode-dark .appearance-choice > strong,
body.mode-midnight .appearance-choice > strong {
  color:#f8fafc;
}
body.mode-dark .appearance-sticky-actions,
body.mode-midnight .appearance-sticky-actions {
  background:rgba(15,23,42,.82);
  border-color:#334155;
}
@media(max-width:760px){
  .appearance-panel-head {
    align-items:flex-start;
    flex-direction:column;
  }
  .appearance-panel-head small {
    text-align:left;
  }
  .appearance-sticky-actions {
    flex-direction:column;
  }
}



/* V6.3.8 Language Settings + Japanese Helper Text */
.nav-link-duo {
  display:flex!important;
  flex-direction:column;
  gap:2px;
}
.nav-link-duo span {
  display:block;
}
.nav-link-duo small {
  display:block;
  color:#94a3b8;
  font-size:11px;
  letter-spacing:.02em;
  line-height:1.25;
  font-weight:700;
}
.nav-link-duo:hover small,
.nav-link-duo.active small {
  color:#dbeafe;
}
.nav-count-floating {
  margin:4px 0 8px 14px;
  width:max-content;
}
.language-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg,var(--p),var(--p2) 52%,var(--s));
}
.language-card-form {
  display:grid;
  gap:18px;
}
.language-panel {
  background:var(--panel);
  border:1px solid rgba(226,232,240,.92);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow-md);
}
.language-panel h2 {
  margin-bottom:8px;
}
.language-choice-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:18px;
}
.language-choice {
  position:relative;
  display:block;
  cursor:pointer;
  padding:18px;
  border-radius:22px;
  border:2px solid rgba(226,232,240,.92);
  background:
    linear-gradient(135deg, rgba(var(--theme-rgb,79,70,229),.07), rgba(var(--theme3-rgb,6,182,212),.08)),
    #fff;
  min-height:118px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.language-choice:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(var(--theme-rgb,79,70,229),.28);
}
.language-choice input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.language-choice.selected,
.language-choice:has(input:checked) {
  border-color:var(--p);
  box-shadow:0 18px 44px rgba(var(--theme-rgb,79,70,229),.16);
}
.language-choice.selected::after,
.language-choice:has(input:checked)::after {
  content:"✓";
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--p),var(--s));
  color:#fff;
  font-weight:900;
}
.language-choice strong {
  display:block;
  color:var(--d);
  font-size:17px;
  margin-bottom:10px;
}
.language-choice small {
  display:block;
  color:var(--m);
  line-height:1.45;
}
body.mode-dark .language-panel,
body.mode-midnight .language-panel,
body.mode-dark .language-choice,
body.mode-midnight .language-choice {
  background:rgba(15,23,42,.92);
  border-color:#334155;
}
body.mode-dark .language-choice strong,
body.mode-midnight .language-choice strong {
  color:#f8fafc;
}
body.mode-dark .language-choice small,
body.mode-midnight .language-choice small {
  color:#cbd5e1;
}
.workspace-links a small {
  font-size:13px;
  letter-spacing:.03em;
}



/* V6.4 Daily Dashboard + Mobile-First Polish */
.daily-hero {
  min-height: 210px;
}
.daily-hero .landing-ghost {
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:none;
}
.daily-grid {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:18px;
  margin-bottom:18px;
  align-items:start;
}
.daily-primary {
  min-height:260px;
}
.daily-lesson {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  margin:12px 0;
  border-radius:20px;
  border:1px solid rgba(226,232,240,.92);
  background:
    linear-gradient(135deg, rgba(var(--theme-rgb,79,70,229),.06), rgba(var(--theme3-rgb,6,182,212),.08)),
    #fff;
  box-shadow:var(--shadow-sm);
}
.daily-lesson strong {
  display:block;
  color:var(--d);
  font-size:17px;
}
.daily-lesson p {
  margin:4px 0;
}
.daily-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.urgent-item {
  border-left:5px solid var(--accent);
}
.mobile-bottom-nav {
  display:none;
}

/* PWA/mobile comfort */
@media(max-width:900px){
  .app {
    grid-template-columns:1fr;
  }
  .side {
    display:none;
  }
  .main {
    padding:18px 14px 96px;
  }
  .top {
    top:8px;
    border-radius:18px;
    padding:14px;
  }
  .top .pill {
    display:none;
  }
  .dashboard-hero,
  .daily-hero,
  .workspace-hero {
    padding:22px;
    border-radius:24px;
  }
  .dashboard-hero {
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-widget-pair {
    width:100%;
    justify-content:stretch;
  }
  .hero-widget-pair .grade-card {
    flex:1 1 160px;
  }
  .daily-grid,
  .grid2 {
    grid-template-columns:1fr!important;
  }
  .stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .stat {
    padding:18px;
    border-radius:20px;
  }
  .stat strong {
    font-size:28px;
  }
  .daily-lesson {
    align-items:flex-start;
    flex-direction:column;
  }
  .daily-actions {
    width:100%;
    justify-content:stretch;
  }
  .daily-actions .btn {
    flex:1 1 120px;
  }
  .mobile-bottom-nav {
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:40;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    padding:8px;
    border-radius:24px;
    background:rgba(15,23,42,.90);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 60px rgba(15,23,42,.30);
  }
  .mobile-bottom-nav a {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#cbd5e1;
    text-decoration:none;
    padding:8px 6px;
    border-radius:18px;
    font-weight:800;
  }
  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav a:focus {
    background:linear-gradient(135deg, rgba(var(--theme-rgb,79,70,229),.35), rgba(var(--theme3-rgb,6,182,212),.24));
    color:#fff;
  }
  .mobile-bottom-nav span {
    font-size:18px;
    line-height:1;
  }
  .mobile-bottom-nav small {
    color:inherit;
    font-size:10px;
    line-height:1;
  }

  /* Mobile-friendly tables: turn rows into readable cards */
  .table-wrap {
    overflow:visible;
  }
  table {
    display:block;
    background:transparent;
  }
  table thead,
  table tbody,
  table tr,
  table th,
  table td {
    display:block;
  }
  table tr:first-child {
    display:none;
  }
  table tr {
    margin:0 0 14px;
    border:1px solid rgba(226,232,240,.92);
    border-radius:20px;
    background:var(--panel);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
  }
  table td {
    border:0;
    border-bottom:1px solid rgba(226,232,240,.72);
    padding:12px 14px;
  }
  table td:last-child {
    border-bottom:0;
  }
  table td::before {
    content:attr(data-label);
    display:block;
    color:var(--m);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    margin-bottom:4px;
  }

  /* Forms and save buttons feel more app-like on phones */
  form button[type="submit"],
  .sticky-mobile-action {
    position:sticky;
    bottom:86px;
    z-index:20;
  }
  .chat-box {
    border-radius:22px;
  }
  .chat-messages {
    max-height:62vh;
    padding:14px;
  }
  .chat-message > div {
    max-width:94%;
  }
  .chat-form {
    position:sticky;
    bottom:84px;
    grid-template-columns:1fr;
    padding:12px;
  }
}
@media(max-width:560px){
  .stats {
    grid-template-columns:1fr;
  }
  .quick-grid,
  .workspace-links,
  .appearance-choice-grid,
  .language-choice-grid {
    grid-template-columns:1fr!important;
  }
  .btn {
    width:100%;
  }
  .table-head {
    align-items:flex-start;
    flex-direction:column;
  }
}
body.mode-dark .daily-lesson,
body.mode-midnight .daily-lesson {
  background:rgba(15,23,42,.82);
  border-color:#334155;
}
body.mode-dark .daily-lesson strong,
body.mode-midnight .daily-lesson strong {
  color:#f8fafc;
}



/* V6.5 NihonGo by DIDAW Default Brand Theme */
:root {
  --nihongo-red:#D62828;
  --nihongo-navy:#0D1B2A;
  --nihongo-gray:#6B7280;
}
body.theme-nihongo,
body:not([class*="theme-"]) {
  --p:#D62828;
  --p2:#B91C1C;
  --s:#0D1B2A;
  --accent:#D62828;
  --theme-deep:#0D1B2A;
  --theme-soft:rgba(214,40,40,.08);
  --theme-soft2:rgba(13,27,42,.08);
  --theme-rgb:214,40,40;
  --theme2-rgb:185,28,28;
  --theme3-rgb:13,27,42;
  background:
    radial-gradient(circle at 0% 0%, rgba(214,40,40,.08), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(13,27,42,.08), transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%);
}
body.theme-nihongo .side,
body:not([class*="theme-"]) .side {
  background:
    radial-gradient(circle at 0% 0%, rgba(214,40,40,.22), transparent 28%),
    linear-gradient(180deg,#0D1B2A 0%, #111827 58%, #07111f 100%)!important;
}
body.theme-nihongo .dashboard-hero,
body.theme-nihongo .student-profile-hero,
body.theme-nihongo .lesson-hero,
body.theme-nihongo .teacher-hero,
body.theme-nihongo .whatsapp-hero,
body.theme-nihongo .notification-hero,
body.theme-nihongo .profile-hero,
body.theme-nihongo .attendance-hero,
body.theme-nihongo .assignment-hero,
body.theme-nihongo .timeline-hero,
body.theme-nihongo .email-hero,
body.theme-nihongo .setup-hero,
body.theme-nihongo .users-hero,
body.theme-nihongo .backup-hero,
body.theme-nihongo .audit-hero,
body.theme-nihongo .executive-hero,
body.theme-nihongo .analytics-hero,
body.theme-nihongo .risk-hero,
body.theme-nihongo .reports-hero,
body.theme-nihongo .system-hero,
body.theme-nihongo .comm-hero,
body.theme-nihongo .chat-hero,
body.theme-nihongo .inbox-hero,
body.theme-nihongo .appearance-hero,
body.theme-nihongo .language-hero,
body.theme-nihongo .workspace-hero,
body.theme-nihongo .daily-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(214,40,40,.25), transparent 24%),
    linear-gradient(135deg,#0D1B2A 0%, #14233A 48%, #D62828 100%)!important;
}
body.theme-nihongo .brand-logo {
  background:#fff!important;
  padding:5px!important;
  box-shadow:0 12px 26px rgba(13,27,42,.18)!important;
}
.brand-logo img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
body.theme-nihongo .btn.primary,
body.theme-nihongo .grade-card,
body.theme-nihongo .proficiency-card {
  background:linear-gradient(135deg,#D62828,#B91C1C 60%,#0D1B2A)!important;
}
body.theme-nihongo .nav a:hover,
body.theme-nihongo .nav a.active {
  background:linear-gradient(135deg,rgba(214,40,40,.28),rgba(255,255,255,.08))!important;
  color:#fff!important;
}
body.theme-nihongo .eyebrow {
  color:#D62828;
}
body.theme-nihongo .dashboard-hero .eyebrow,
body.theme-nihongo .hero .eyebrow {
  color:#fff;
}
.preview-theme-nihongo {
  background:linear-gradient(135deg,#0D1B2A 0%,#14233A 52%,#D62828 100%)!important;
}

/* public NihonGo landing */
.nihongo-landing {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(214,40,40,.28), transparent 24%),
    linear-gradient(135deg,#0D1B2A 0%, #13243A 52%, #D62828 100%)!important;
}
.landing-logo-full {
  width:min(560px, 94%);
  height:auto;
  display:block;
  margin:0 0 24px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.20));
  background:rgba(255,255,255,.96);
  border-radius:26px;
  padding:18px 24px;
}
.nihongo-landing .landing-slogan {
  color:#fff;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:clamp(20px,2.4vw,34px);
}
.nihongo-landing .landing-copy {
  color:rgba(255,255,255,.88);
}
body.theme-nihongo .landing-note span {
  background:linear-gradient(135deg,#D62828,#0D1B2A)!important;
}
.security-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg,#0D1B2A,#1e293b 55%,#D62828)!important;
}
.permission-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}
.permission-card {
  min-height:230px;
}
.permission-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.permission-list span {
  padding:8px 10px;
  border-radius:999px;
  background:rgba(214,40,40,.08);
  color:#0D1B2A;
  border:1px solid rgba(214,40,40,.14);
  font-weight:800;
  font-size:12px;
}
body.mode-dark .permission-list span,
body.mode-midnight .permission-list span {
  color:#fff;
  background:rgba(214,40,40,.22);
  border-color:rgba(214,40,40,.28);
}
.error-page {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(214,40,40,.10), transparent 28%),
    linear-gradient(180deg,#fff,#f4f7fb);
}
.error-card {
  max-width:560px;
  padding:42px;
  border-radius:32px;
  background:#fff;
  border:1px solid rgba(226,232,240,.92);
  box-shadow:0 28px 80px rgba(13,27,42,.12);
  text-align:center;
}
.error-card span {
  display:inline-grid;
  place-items:center;
  width:76px;
  height:76px;
  border-radius:28px;
  margin-bottom:18px;
  background:linear-gradient(135deg,#0D1B2A,#D62828);
  color:#fff;
  font-weight:900;
  font-size:28px;
}



/* V6.5.2 Humanized Landing + Exact User Logo */
body.theme-nihongo .btn.primary,
body.theme-nihongo .btn.small.primary,
body.theme-nihongo .site-nav .btn.primary,
body.theme-nihongo .mobile-bottom-nav a:hover,
body.theme-nihongo .mobile-bottom-nav a:focus {
  background:#D62828!important;
  background-image:none!important;
  border:1px solid #D62828!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(214,40,40,.20)!important;
}
body.theme-nihongo .btn.primary:hover,
body.theme-nihongo .btn.small.primary:hover {
  background:#b91c1c!important;
  border-color:#b91c1c!important;
}
body.theme-nihongo .landing-ghost {
  background:#0D1B2A!important;
  border:1px solid #0D1B2A!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(13,27,42,.16)!important;
}
.brand-logo {
  overflow:hidden;
}
.brand-logo img {
  width:100%;
  height:100%;
  object-fit:cover!important;
  border-radius:999px;
}
.landing-logo-full {
  width:min(310px, 82%);
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  display:block;
  margin:0 0 22px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.16));
  background:none!important;
  border-radius:0!important;
  padding:0!important;
}
.welcome-card h3 {
  font-size:34px;
  margin-bottom:10px;
  color:#0D1B2A;
}
.welcome-card > p {
  font-size:18px;
  color:#334155;
  margin-bottom:18px;
}
.nihongo-landing .landing-slogan {
  text-transform:none!important;
  letter-spacing:-.03em!important;
  font-size:clamp(24px,3vw,44px)!important;
  line-height:1.12;
  max-width:760px;
}
.nihongo-landing .landing-copy {
  max-width:760px;
  font-size:18px;
}
@media(max-width:900px){
  .landing-logo-full {
    width:min(240px,72%);
  }
  .welcome-card h3 {
    font-size:28px;
  }
}



/* V6.5.3 Final logo swap + copy tweak */
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  border-radius: 999px;
}
.landing-logo-full {
  width: min(320px, 84%);
  height: auto;
  object-fit: contain;
}
.nihongo-landing .landing-slogan {
  display: block;
}



/* V6.5.4 Final brand cleanup */
.brand .brand-mark.brand-logo{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.brand-logo img{
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 8px 18px rgba(13,27,42,.18));
}
.landing-logo-full{
  width:min(360px,84%);
  height:auto;
  object-fit:contain;
  background:none !important;
  border-radius:0 !important;
  padding:0 !important;
  filter:drop-shadow(0 14px 28px rgba(13,27,42,.18));
}
.landing-tagline{
  color:#fff;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:16px;
  margin:6px 0 12px;
}
.nihongo-landing .landing-slogan{
  margin-top:0;
}



/* V6.5.5 White splash logo */
.brand .brand-mark.brand-logo{
  width:58px;
  height:58px;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:16px !important;
}
.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  border-radius:0 !important;
  filter:none !important;
}
.landing-logo-full{
  width:min(520px, 92%) !important;
  height:auto;
  object-fit:contain;
  background:none !important;
  border-radius:0 !important;
  padding:0 !important;
  filter:none !important;
}



/* V6.5.6 Sharp paint splash + landing hierarchy */
.landing-logo-full{
  width:min(540px, 94%) !important;
  height:auto;
  object-fit:contain;
  background:none !important;
  border-radius:0 !important;
  padding:0 !important;
  filter:none !important;
}
.nihongo-landing .landing-slogan{
  color:#fff;
  font-size:clamp(34px,4vw,62px) !important;
  line-height:1.05;
  letter-spacing:-0.04em !important;
  text-transform:none !important;
  font-weight:900;
  margin:14px 0 10px;
  max-width:760px;
}
.nihongo-landing .landing-copy-small{
  color:rgba(255,255,255,.86) !important;
  font-size:21px !important;
  line-height:1.5;
  max-width:760px;
  margin:0 0 24px;
}
.landing-tagline{
  display:none !important;
}
.brand .brand-mark.brand-logo{
  width:58px;
  height:58px;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:16px !important;
}
.brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  border-radius:0 !important;
  filter:none !important;
}



/* V6.5.7 Extra-large splash logo */
.landing-logo-full{
  width:min(960px, 98%) !important;
  max-width:none !important;
  height:auto;
  object-fit:contain;
  background:none !important;
  border-radius:0 !important;
  padding:0 !important;
  filter:none !important;
}
.brand .brand-mark.brand-logo{
  width:64px;
  height:64px;
}
@media(max-width:900px){
  .landing-logo-full{
    width:min(760px, 100%) !important;
  }
}



/* V6.5.8 Balanced splash logo */
.landing-logo-full{
  width:min(720px, 96%) !important;
  max-width:none !important;
  height:auto;
  object-fit:contain;
}
.brand .brand-mark.brand-logo{
  width:60px;
  height:60px;
}
@media(max-width:900px){
  .landing-logo-full{
    width:min(560px, 98%) !important;
  }
}



/* V6.5.9 Inline notification badge */
.nav-link-with-badge .nav-main-text {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.nav-count-inline {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  margin-left:auto;
  background:#4f46e5;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 14px rgba(79,70,229,.28);
}
.nav-count-floating {
  display:none!important;
}
body.theme-nihongo .nav-count-inline {
  background:#D62828;
  box-shadow:0 6px 14px rgba(214,40,40,.28);
}



/* V6.6.0 Sidebar badge + compact filter polish */
.nav-link-with-badge .nav-main-text {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
}
.nav-link-with-badge .nav-main-text > span:first-child {
  display:block!important;
  min-width:0;
}
.nav-link-with-badge .nav-count-inline,
.nav-link-duo .nav-count-inline {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:22px!important;
  max-width:max-content!important;
  height:22px!important;
  padding:0 7px!important;
  margin-left:auto!important;
  border-radius:999px!important;
  line-height:1!important;
  font-size:12px!important;
}
.nav-link-with-badge.active .nav-count-inline,
.nav-link-with-badge:hover .nav-count-inline {
  background:#D62828!important;
  color:#fff!important;
}

/* Replace the oversized split-gradient filter block with a tidy compact search/filter bar */
.filter-card {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:0!important;
  padding:14px 16px!important;
  margin-bottom:16px!important;
  overflow:visible!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98))!important;
  border:1px solid rgba(226,232,240,.92)!important;
  box-shadow:0 12px 30px rgba(15,23,42,.05)!important;
}
.filter-card::before {
  display:none!important;
}
.filter-card > div:first-child {
  flex:0 0 290px!important;
  min-height:0!important;
  padding:0!important;
  color:var(--text)!important;
  display:block!important;
  text-align:left!important;
}
.filter-card h2 {
  font-size:18px!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  margin:0 0 4px!important;
  color:var(--d)!important;
}
.filter-card .muted {
  color:var(--m)!important;
  font-size:13px!important;
  line-height:1.35!important;
  margin:0!important;
  max-width:340px!important;
  text-align:left!important;
}
.filter-form {
  position:relative!important;
  z-index:1!important;
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  padding:0!important;
  align-content:center!important;
}
.filter-form input,
.filter-form select {
  min-height:42px!important;
  height:42px!important;
  min-width:170px!important;
  max-width:250px!important;
  flex:0 1 220px!important;
  font-size:14px!important;
  margin:0!important;
  border-radius:14px!important;
  background:#fff!important;
}
.filter-form .btn {
  min-height:42px!important;
  height:42px!important;
  padding:0 18px!important;
  margin:0!important;
  border-radius:14px!important;
  width:auto!important;
}
body.theme-nihongo .filter-card {
  border-top:3px solid #D62828!important;
}
body.mode-dark .filter-card,
body.mode-midnight .filter-card {
  background:rgba(15,23,42,.92)!important;
  border-color:#334155!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
}
body.mode-dark .filter-card h2,
body.mode-midnight .filter-card h2 {
  color:#f8fafc!important;
}
body.mode-dark .filter-form input,
body.mode-dark .filter-form select,
body.mode-midnight .filter-form input,
body.mode-midnight .filter-form select {
  background:#0f172a!important;
  border-color:#334155!important;
  color:#f8fafc!important;
}
@media(max-width:900px){
  .filter-card {
    align-items:stretch!important;
    flex-direction:column!important;
    padding:14px!important;
  }
  .filter-card > div:first-child {
    flex:auto!important;
    width:100%!important;
  }
  .filter-form {
    width:100%!important;
    justify-content:stretch!important;
  }
  .filter-form input,
  .filter-form select,
  .filter-form .btn {
    flex:1 1 100%!important;
    width:100%!important;
    max-width:none!important;
  }
}



/* V6.6.1 Class Details + Late Submission Status */
.class-detail-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg,#0D1B2A,#1e293b 55%,#D62828)!important;
}
.class-card-link {
  text-decoration:none;
  color:inherit;
  display:block;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.class-card-link:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(214,40,40,.22);
}
.item-link-text {
  color:var(--d);
  font-weight:900;
  text-decoration:none;
}
.item-link-text:hover {
  color:var(--p);
}
.checkline {
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(226,232,240,.92);
  background:#f8fafc;
  margin-bottom:14px;
  font-weight:800;
}
.checkline input {
  width:auto!important;
  margin:0!important;
}
.policy-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  border-top:3px solid #D62828;
}
.inline-policy-form {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.inline-policy-form .checkline {
  margin:0;
}
.schedule-mini {
  border-left:4px solid #0ea5e9;
}
body.mode-dark .checkline,
body.mode-midnight .checkline {
  background:#0f172a;
  border-color:#334155;
}
@media(max-width:760px){
  .policy-card,
  .inline-policy-form {
    align-items:stretch;
    flex-direction:column;
  }
}



/* V6.7 + V6.8 Permission Control Center + Translation Polish */
.permission-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg,#0D1B2A,#1f2937 54%,#D62828)!important;
}
.permission-check-card,
.access-result-card {
  min-height:230px;
}
.permission-check-form {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  align-items:end;
}
.permission-check-form label {
  margin-bottom:-4px;
}
.access-result-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-top:4px solid #94a3b8;
}
.access-result-card.allowed {
  border-top-color:#16a34a;
}
.access-result-card.denied {
  border-top-color:#D62828;
}
.access-result-card h2 {
  font-size:42px;
  margin:4px 0 10px;
}
.access-result-card.allowed h2 {
  color:#16a34a;
}
.access-result-card.denied h2 {
  color:#D62828;
}
.permission-table th,
.permission-table td {
  text-align:center;
}
.permission-table th:first-child,
.permission-table td:first-child,
.permission-table th:nth-child(2),
.permission-table td:nth-child(2) {
  text-align:left;
}
.permission-category-row td {
  background:rgba(214,40,40,.08)!important;
  color:#0D1B2A;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.permission-dot {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  font-weight:900;
}
.permission-dot.allowed {
  background:rgba(22,163,74,.12);
  color:#15803d;
}
.permission-dot.denied {
  background:rgba(148,163,184,.14);
  color:#94a3b8;
}
.permission-list-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.permission-page-card {
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(226,232,240,.92);
  background:
    linear-gradient(135deg, rgba(214,40,40,.04), rgba(13,27,42,.04)),
    #fff;
}
.permission-page-card > span {
  display:block;
  color:#D62828;
  font-weight:900;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.permission-page-card strong {
  display:block;
  font-size:16px;
  color:#0D1B2A;
}
.permission-page-card small {
  display:block;
  margin:4px 0 12px;
  color:#64748b;
}
.permission-page-card div {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.permission-page-card em {
  font-style:normal;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(13,27,42,.06);
  font-size:11px;
  font-weight:900;
  color:#0D1B2A;
}
body.mode-dark .permission-page-card,
body.mode-midnight .permission-page-card {
  background:rgba(15,23,42,.92);
  border-color:#334155;
}
body.mode-dark .permission-page-card strong,
body.mode-midnight .permission-page-card strong,
body.mode-dark .permission-category-row td,
body.mode-midnight .permission-category-row td,
body.mode-dark .permission-page-card em,
body.mode-midnight .permission-page-card em {
  color:#f8fafc;
}
@media(max-width:760px){
  .permission-check-form {
    grid-template-columns:1fr;
  }
  .permission-table {
    min-width:760px;
  }
}



/* V6.9 Online Launch Readiness */
.launch-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg,#0D1B2A,#111827 52%,#D62828)!important;
}
.launch-notes {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
.launch-notes p {
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(226,232,240,.92);
  background:#f8fafc;
  margin:0;
}
.log-viewer {
  max-height:560px;
  overflow:auto;
  padding:18px;
  border-radius:18px;
  background:#0b1220;
  color:#d1fae5;
  font-size:12px;
  line-height:1.55;
  white-space:pre-wrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.mini-warning {
  margin-top:16px;
  padding:18px;
  border-radius:20px;
}
body.mode-dark .launch-notes p,
body.mode-midnight .launch-notes p {
  background:#0f172a;
  border-color:#334155;
}