/* =========================================================
   ZNACH ACADEMY PORTAL — DESIGN SYSTEM
   ========================================================= */

:root{
  --zn-navy: #0B1F3A;
  --zn-navy-light: #142c52;
  --zn-navy-lighter: #1d3a6b;
  --zn-gold: #C49A4A;
  --zn-gold-light: #d9b876;
  --zn-white: #FFFFFF;
  --zn-bg: #F5F6F8;
  --zn-border: #E4E7EC;
  --zn-text: #1B2430;
  --zn-text-muted: #5B6572;
  --zn-success: #1E8E5A;
  --zn-danger: #C4402F;
  --zn-warning: #B7791F;
  --zn-radius-sm: 8px;
  --zn-radius-md: 14px;
  --zn-radius-lg: 20px;
  --zn-shadow-sm: 0 1px 2px rgba(11,31,58,0.06);
  --zn-shadow-md: 0 8px 24px rgba(11,31,58,0.08);
  --zn-shadow-lg: 0 20px 48px rgba(11,31,58,0.14);
  --zn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --zn-sidebar-w: 268px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body.znach-portal{
  margin:0;
  font-family: var(--zn-font);
  color: var(--zn-text);
  background: var(--zn-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.znach-portal img{ max-width:100%; display:block; }
.znach-portal a{ color: var(--zn-navy); text-decoration:none; }
.znach-portal a:focus-visible,
.znach-portal button:focus-visible,
.znach-portal input:focus-visible,
.znach-portal select:focus-visible,
.znach-portal textarea:focus-visible{
  outline: 2px solid var(--zn-gold);
  outline-offset: 2px;
}
.znach-portal h1, .znach-portal h2, .znach-portal h3, .znach-portal h4{
  color: var(--zn-navy);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
.znach-portal p{ margin: 0 0 1em; color: var(--zn-text-muted); }
.znach-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.znach-skip-link{
  position:absolute; left:-9999px; top:0; background:var(--zn-navy); color:#fff;
  padding:.75em 1.25em; z-index:9999; border-radius: 0 0 var(--zn-radius-sm) 0;
}
.znach-skip-link:focus{ left:0; }

/* =========================================================
   BUTTONS
   ========================================================= */
.zn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--zn-font); font-weight:600; font-size:.95rem;
  padding: .85em 1.6em; border-radius: var(--zn-radius-sm);
  border: 1px solid transparent; cursor:pointer; transition: all .15s ease;
  text-decoration:none; line-height:1;
}
.zn-btn-primary{ background: var(--zn-navy); color:#fff; }
.zn-btn-primary:hover{ background: var(--zn-navy-light); color:#fff; }
.zn-btn-gold{ background: var(--zn-gold); color: var(--zn-navy); }
.zn-btn-gold:hover{ background: var(--zn-gold-light); color: var(--zn-navy); }
.zn-btn-outline{ background:transparent; color:var(--zn-navy); border-color: var(--zn-navy); }
.zn-btn-outline:hover{ background: var(--zn-navy); color:#fff; }
.zn-btn-block{ width:100%; }
.zn-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   AUTH LAYOUT (login / register / forgot password)
   ========================================================= */
.zn-auth-page{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(196,154,74,0.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(196,154,74,0.08), transparent 45%),
    linear-gradient(160deg, var(--zn-navy) 0%, var(--zn-navy-light) 55%, var(--zn-navy) 100%);
  padding: 32px 16px;
}
.zn-auth-wrap{ width:100%; max-width: 460px; }
.zn-auth-brand{ text-align:center; margin-bottom: 28px; }
.zn-auth-brand img{ height:44px; margin: 0 auto 14px; }
.zn-auth-brand .zn-brand-fallback{
  font-size:1.4rem; font-weight:800; color:#fff; letter-spacing:.02em;
}
.zn-auth-brand .zn-brand-tag{
  color: var(--zn-gold-light); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.12em; margin-top:4px;
}
.zn-auth-card{
  background: var(--zn-white);
  border-radius: var(--zn-radius-lg);
  box-shadow: var(--zn-shadow-lg);
  padding: 40px 36px;
}
.zn-auth-card h1{ font-size:1.5rem; margin-bottom:.25em; }
.zn-auth-sub{ font-size:.95rem; margin-bottom:1.75em; }
.zn-field{ margin-bottom: 20px; }
.zn-field label{
  display:block; font-size:.82rem; font-weight:700; color: var(--zn-navy);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;
}
.zn-input,
.zn-select,
.zn-textarea{
  width:100%; padding: .85em 1em; font-size:1rem; font-family: var(--zn-font);
  border: 1.5px solid var(--zn-border); border-radius: var(--zn-radius-sm);
  background:#fff; color:var(--zn-text); transition: border-color .15s ease;
}
.zn-input:focus, .zn-select:focus, .zn-textarea:focus{
  border-color: var(--zn-gold); outline:none;
}
.zn-textarea{ resize:vertical; min-height:100px; }
.zn-password-wrap{ position:relative; }
.zn-password-wrap .zn-input{ padding-right: 3em; }
.zn-toggle-pass{
  position:absolute; right:.75em; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--zn-text-muted);
  padding:4px; display:flex;
}
.zn-toggle-pass:hover{ color: var(--zn-navy); }
.zn-auth-row-between{
  display:flex; align-items:center; justify-content:space-between; margin: 4px 0 22px;
  font-size:.9rem;
}
.zn-auth-footer-note{
  text-align:center; margin-top: 22px; font-size:.92rem; color: var(--zn-text-muted);
}
.zn-auth-footer-note a{ font-weight:700; color: var(--zn-navy); }
.zn-back-to-site{
  display:block; text-align:center; margin-top: 22px; color: rgba(255,255,255,0.75); font-size:.88rem;
}
.zn-back-to-site:hover{ color:#fff; }
.zn-notice{
  padding: 12px 16px; border-radius: var(--zn-radius-sm); font-size:.9rem; margin-bottom: 20px;
  border: 1px solid transparent;
}
.zn-notice-error{ background:#FCEAE7; color:#8A2E22; border-color:#F2C3BA; }
.zn-notice-success{ background:#E7F5EE; color:#146341; border-color:#BFE6D3; }
.zn-notice-info{ background:#EAF0FB; color:#1E3A6E; border-color:#C7D8F5; }
.zn-field-error{ color:#8A2E22; font-size:.8rem; margin-top:4px; }

/* =========================================================
   PORTAL LANDING (logged-out home)
   ========================================================= */
.zn-landing-hero{
  background: linear-gradient(160deg, var(--zn-navy) 0%, var(--zn-navy-light) 100%);
  color:#fff; padding: 96px 24px 110px; text-align:center;
}
.zn-landing-hero h1{ color:#fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom:.4em; }
.zn-landing-hero p{ color: rgba(255,255,255,0.8); max-width:560px; margin: 0 auto 2em; }
.zn-landing-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.zn-landing-strip{
  max-width: 960px; margin: -60px auto 60px; background:#fff; border-radius: var(--zn-radius-lg);
  box-shadow: var(--zn-shadow-lg); padding: 32px; display:grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.zn-landing-strip .zn-mini-card{ text-align:center; padding: 12px; }
.zn-landing-strip .zn-mini-card .zn-icon{ color: var(--zn-gold); margin-bottom:10px; }
.zn-landing-strip .zn-mini-card h3{ font-size:1.05rem; margin-bottom:.3em; }
.zn-landing-strip .zn-mini-card p{ font-size:.88rem; margin:0; }

/* =========================================================
   DASHBOARD SHELL
   ========================================================= */
.zn-app{ display:flex; min-height:100vh; }
.zn-sidebar{
  width: var(--zn-sidebar-w); flex-shrink:0; background: var(--zn-navy); color:#fff;
  position: sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column;
  transition: transform .25s ease; z-index: 40;
}
.zn-sidebar-brand{
  display:flex; align-items:center; gap:10px; padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.zn-sidebar-brand img{ height:30px; }
.zn-sidebar-brand .zn-brand-fallback{ color:#fff; font-weight:800; font-size:1.1rem; }
.zn-nav{ list-style:none; margin:0; padding: 14px 12px; flex:1; }
.zn-nav li{ margin-bottom:2px; }
.zn-nav a{
  display:flex; align-items:center; gap:12px; color: rgba(255,255,255,0.75);
  padding: .7em .9em; border-radius: var(--zn-radius-sm); font-size:.93rem; font-weight:500;
  transition: all .15s ease;
}
.zn-nav a svg{ flex-shrink:0; opacity:.85; }
.zn-nav a:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.zn-nav a.is-active{ background: var(--zn-gold); color: var(--zn-navy); font-weight:700; }
.zn-nav a.is-active svg{ opacity:1; }
.zn-nav-section-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,0.4);
  padding: 16px 14px 6px;
}
.zn-sidebar-footer{ padding: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.zn-logout-link{
  display:flex; align-items:center; gap:10px; color: rgba(255,255,255,0.75); font-size:.9rem; padding:.6em .5em;
}
.zn-logout-link:hover{ color:#fff; }

.zn-main{ flex:1; min-width:0; }
.zn-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 16px 28px; background:#fff; border-bottom: 1px solid var(--zn-border);
  position: sticky; top:0; z-index: 30;
}
.zn-topbar h1{ font-size:1.15rem; margin:0; }
.zn-sidebar-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:6px; color: var(--zn-navy);
}
.zn-topbar-user{ display:flex; align-items:center; gap:10px; }
.zn-avatar{
  width:36px; height:36px; border-radius:50%; background: var(--zn-gold); color: var(--zn-navy);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem;
}
.zn-topbar-user-name{ font-size:.88rem; font-weight:600; color: var(--zn-navy); }
.zn-topbar-user-role{ font-size:.75rem; color: var(--zn-text-muted); }

.zn-content{ padding: 28px; max-width: 1200px; }

/* =========================================================
   CARDS / DASHBOARD WIDGETS
   ========================================================= */
.zn-card{
  background:#fff; border-radius: var(--zn-radius-md); border: 1px solid var(--zn-border);
  box-shadow: var(--zn-shadow-sm); padding: 24px;
}
.zn-card + .zn-card{ margin-top: 20px; }
.zn-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.zn-card-header h2{ font-size:1.05rem; margin:0; }
.zn-card-header a{ font-size:.85rem; font-weight:700; }
.zn-grid{ display:grid; gap:20px; }
.zn-grid-2{ grid-template-columns: repeat(2, 1fr); }
.zn-grid-3{ grid-template-columns: repeat(3, 1fr); }
.zn-grid-4{ grid-template-columns: repeat(4, 1fr); }

.zn-welcome-banner{
  background: linear-gradient(120deg, var(--zn-navy), var(--zn-navy-lighter));
  color:#fff; border-radius: var(--zn-radius-md); padding: 28px 32px; margin-bottom: 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.zn-welcome-banner h1{ color:#fff; font-size:1.4rem; margin-bottom:.2em; }
.zn-welcome-banner p{ color: rgba(255,255,255,0.75); margin:0; }
.zn-welcome-meta{ display:flex; gap: 28px; flex-wrap:wrap; }
.zn-welcome-meta div{ min-width:100px; }
.zn-welcome-meta .zn-meta-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--zn-gold-light); }
.zn-welcome-meta .zn-meta-value{ font-size:1rem; font-weight:700; }

.zn-stat-card{ display:flex; align-items:flex-start; gap:14px; }
.zn-stat-icon{
  width:44px; height:44px; border-radius: var(--zn-radius-sm); background: rgba(196,154,74,0.12);
  color: var(--zn-gold); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.zn-stat-label{ font-size:.8rem; color: var(--zn-text-muted); margin-bottom:2px; }
.zn-stat-value{ font-size:1.3rem; font-weight:800; color: var(--zn-navy); }

.zn-progress-track{
  width:100%; height:10px; background: var(--zn-border); border-radius: 999px; overflow:hidden; margin: 10px 0;
}
.zn-progress-fill{ height:100%; background: linear-gradient(90deg, var(--zn-gold), var(--zn-gold-light)); border-radius: 999px; }

.zn-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:700;
  padding: .3em .75em; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
}
.zn-badge-success{ background:#E7F5EE; color:#146341; }
.zn-badge-warning{ background:#FBF1DF; color:#8A5A0C; }
.zn-badge-danger{ background:#FCEAE7; color:#8A2E22; }
.zn-badge-neutral{ background:#EEF0F3; color: var(--zn-text-muted); }
.zn-badge-info{ background:#EAF0FB; color:#1E3A6E; }

/* =========================================================
   EMPTY STATES
   ========================================================= */
.zn-empty-state{
  text-align:center; padding: 48px 24px; color: var(--zn-text-muted);
}
.zn-empty-state .zn-icon{ color: var(--zn-border); margin-bottom: 14px; }
.zn-empty-state h3{ color: var(--zn-navy); font-size:1.05rem; margin-bottom:.3em; }
.zn-empty-state p{ max-width: 420px; margin: 0 auto; font-size:.9rem; }

/* =========================================================
   TABLES
   ========================================================= */
.zn-table-wrap{ overflow-x:auto; }
.zn-table{ width:100%; border-collapse: collapse; font-size:.9rem; }
.zn-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--zn-text-muted); padding: 10px 14px; border-bottom: 2px solid var(--zn-border);
  white-space:nowrap;
}
.zn-table td{ padding: 14px; border-bottom: 1px solid var(--zn-border); color: var(--zn-text); white-space:nowrap; }
.zn-table tr:last-child td{ border-bottom:none; }

/* =========================================================
   PROFILE
   ========================================================= */
.zn-profile-header{ display:flex; align-items:center; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.zn-profile-avatar{
  width:84px; height:84px; border-radius:50%; background: var(--zn-gold); color: var(--zn-navy);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.8rem; flex-shrink:0;
  border: 3px solid #fff; box-shadow: var(--zn-shadow-md);
}
.zn-profile-header h1{ margin-bottom:.15em; }
.zn-field-static{ padding: .85em 1em; background: var(--zn-bg); border-radius: var(--zn-radius-sm); color: var(--zn-text-muted); font-size:.95rem; }

/* =========================================================
   HEADER / FOOTER (public + fallback)
   ========================================================= */
.zn-site-header{
  background: var(--zn-navy); padding: 16px 28px; display:flex; align-items:center; justify-content:space-between;
}
.zn-site-header .zn-logo{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; }
.zn-site-header .zn-logo img{ height:32px; }
.zn-header-actions{ display:flex; gap:12px; }
.zn-site-footer{
  background: var(--zn-navy); color: rgba(255,255,255,0.65); text-align:center;
  padding: 22px 16px; font-size:.85rem; margin-top:auto;
}
.zn-site-footer a{ color: var(--zn-gold-light); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .zn-grid-4{ grid-template-columns: repeat(2,1fr); }
  .zn-grid-3{ grid-template-columns: repeat(2,1fr); }
  .zn-landing-strip{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .zn-sidebar{
    position:fixed; left:0; top:0; transform: translateX(-100%); box-shadow: var(--zn-shadow-lg);
  }
  .zn-sidebar.is-open{ transform: translateX(0); }
  .zn-sidebar-toggle{ display:inline-flex; }
  .zn-sidebar-backdrop{
    display:none; position:fixed; inset:0; background: rgba(11,31,58,0.5); z-index:35;
  }
  .zn-sidebar-backdrop.is-open{ display:block; }
}
@media (max-width: 640px){
  .zn-grid-2, .zn-grid-3, .zn-grid-4{ grid-template-columns: 1fr; }
  .zn-auth-card{ padding: 28px 22px; }
  .zn-content{ padding: 18px; }
  .zn-topbar{ padding: 14px 16px; }
  .zn-welcome-banner{ padding: 22px 20px; }
  .zn-table td, .zn-table th{ padding: 10px; }
}

/* Phase 1 / Fix 09: responsive curriculum cards */
.zn-lesson-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));gap:18px;align-items:start}
.zn-lesson-module{grid-column:1/-1;margin:20px 0 0;padding-top:12px;border-top:1px solid var(--zn-border)}
.zn-lesson-tile{border:1px solid var(--zn-border);border-radius:14px;padding:14px;min-width:0;overflow:hidden;background:var(--zn-surface,#fff)}
.zn-lesson-tile.is-locked{opacity:.65}
.zn-lesson-thumbnail{display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,#19375d,#427b9e);color:white;font-size:2.3rem;border-radius:10px;margin-bottom:12px}
.zn-lesson-tile iframe,.zn-lesson-tile video{max-width:100%;width:100%;aspect-ratio:16/9;height:auto}
.zn-lesson-tile .zn-btn{white-space:normal}

/* Compact course lesson gallery: ~4 cm x 3 cm thumbnails */
.zn-compact-lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(151px,151px));gap:18px;margin:18px 0 26px}
.zn-compact-lesson-card{width:151px;max-width:100%}
.zn-compact-thumb{width:151px;max-width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#102342,#254776);border-radius:10px;color:#fff;text-decoration:none;font-size:32px;overflow:hidden}
.zn-compact-lesson-card.is-locked .zn-compact-thumb{background:#e7ebf0;color:#637083}
.zn-compact-title{font-weight:700;margin-top:7px;overflow-wrap:anywhere}
.zn-compact-status{font-size:12px;color:#596779;margin-top:3px}
.zn-lesson-viewer{margin-top:18px}
.zn-lesson-player{max-width:740px;margin:12px 0 18px}
.zn-lesson-player iframe{width:100%;aspect-ratio:16/9;height:auto}
.zn-complete-message{color:#16824c;font-weight:700}
@media(max-width:430px){.zn-compact-lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zn-compact-lesson-card,.zn-compact-thumb{width:100%}}

/* Znach chocolate / gold brand refresh and reliable button contrast */
.znach-portal{--zn-navy:#2b160f;--zn-navy-light:#4b291d;--zn-navy-lighter:#70462f;--zn-gold:#c59a4b;--zn-gold-light:#e1bb72}
.znach-portal .zn-sidebar{background:linear-gradient(170deg,#20100b,#43261b 55%,#603c29)!important}
.znach-portal .zn-btn,.znach-portal a.zn-btn,.znach-portal button.zn-btn{color:#fff!important;background:linear-gradient(135deg,#3d2118,#75432c)!important;border:1px solid #815435!important;text-decoration:none!important;opacity:1}
.znach-portal .zn-btn:hover,.znach-portal .zn-btn:focus,.znach-portal a.zn-btn:hover{color:#fff!important;background:linear-gradient(135deg,#603b27,#9b633c)!important}
.znach-portal .zn-btn:disabled{opacity:.6!important}
.znach-portal .zn-nav a:hover,.znach-portal .zn-nav .active>a{background:linear-gradient(110deg,#b58b43,#e0b66b)!important;color:#27140c!important}
.zn-custom-sidebar-logo{display:block;max-width:215px;width:100%;height:auto;max-height:78px;object-fit:contain}
.zn-lesson-modal[hidden]{display:none!important}.zn-lesson-modal{position:fixed;inset:0;background:rgba(17,8,5,.86);z-index:99999;display:flex;align-items:center;justify-content:center;padding:22px}
.zn-lesson-modal-inner{background:#fff;border-radius:15px;width:min(900px,100%);max-height:90vh;overflow:auto;padding:20px;position:relative}
.zn-lesson-modal .zn-lesson-player iframe{width:100%!important;aspect-ratio:16/9!important;height:auto!important}
.zn-lesson-modal-close{float:right;background:#42261b;color:#fff;border:0;padding:8px 14px;border-radius:8px;cursor:pointer}

/* Blue academy redesign, inspired by supplied reference */
:root{--zn-primary:#173f94;--zn-primary-dark:#0a2464;--zn-accent:#5279d3;--zn-gold:#e5ac4c}
.zn-sidebar{background:linear-gradient(165deg,#274f9f 0%,#102c76 50%,#081d58 100%)!important}
.zn-sidebar-brand{min-height:94px!important;padding:14px 18px!important}
.zn-sidebar-brand a{width:100%;justify-content:center}
.zn-custom-sidebar-logo{display:block!important;width:210px!important;max-width:100%!important;height:65px!important;object-fit:contain!important}
.zn-sidebar a:not(.zn-sidebar-brand a){color:#f1f5ff!important}
.zn-sidebar a.active,.zn-sidebar .current-menu-item a{background:linear-gradient(105deg,#5077cf,#355caf)!important;color:white!important}
.zn-btn,.zn-btn-primary,button[type=submit]{background:linear-gradient(110deg,#234caa,#102e79)!important;color:#fff!important;border-color:#254b9e!important}
.zn-btn:hover,.zn-btn-primary:hover,button[type=submit]:hover{background:linear-gradient(110deg,#3e66c3,#1b3b8c)!important;color:#fff!important}
.zn-dashboard-welcome,.zn-welcome-card{background:linear-gradient(105deg,#102e7a,#3158ad)!important}
.zn-card{border-radius:15px}
.zn-profile-photo-help{font-size:.83rem;color:#52637f;margin-top:5px}

.znach-portal .zn-sidebar{background:linear-gradient(160deg,#3157ad 0%,#17377e 48%,#081c58 100%)!important}
.znach-portal .zn-nav a:hover,.znach-portal .zn-nav .active>a{background:linear-gradient(105deg,#5b82d8,#355db2)!important;color:#fff!important}
.znach-portal .zn-btn,.znach-portal a.zn-btn,.znach-portal button.zn-btn{background:linear-gradient(110deg,#2a52ad,#13357f)!important;border-color:#244ba4!important;color:#fff!important}
.znach-portal .zn-btn:hover,.znach-portal .zn-btn:focus,.znach-portal a.zn-btn:hover{background:linear-gradient(110deg,#4c76cc,#22469b)!important;color:#fff!important}

/* Video UI friction: does not make YouTube unlisted videos private. */
.zn-video-protected{position:relative;user-select:none;-webkit-user-select:none}
.zn-video-protected iframe{display:block;max-width:100%}
.zn-video-notice{padding:18px;border:1px solid #d5deef;border-radius:10px;color:#263b64;background:#f3f6ff}

/* Znach consistent blue identity */
.zn-sidebar-brand .zn-custom-sidebar-logo{width:178px!important;max-width:90%!important;height:55px!important;max-height:55px!important;object-fit:contain!important}
.zn-sidebar-brand{min-height:78px!important;padding:10px 16px!important}
.zn-welcome-banner,.zn-dashboard-welcome,.zn-welcome-card{background:linear-gradient(115deg,#102b70 0%,#244a9e 55%,#3769bb 100%)!important;color:#fff!important}
.zn-welcome-banner .zn-meta-label{color:#dbe6ff!important}
.zn-welcome-banner .zn-meta-value{color:#fff!important}
.zn-lesson-section .zn-compact-thumb:not(.is-locked){background:linear-gradient(140deg,#122d72,#3567bb)!important}
.zn-progress-fill{background:linear-gradient(90deg,#2858b8,#6792ed)!important}
.zn-avatar{object-fit:cover}
/* Sidebar: thin, low-contrast scrollbar, without disabling scrolling. */
.zn-sidebar{scrollbar-width:thin;scrollbar-color:rgba(218,229,255,.38) transparent}
.zn-sidebar::-webkit-scrollbar{width:5px}
.zn-sidebar::-webkit-scrollbar-track{background:transparent}
.zn-sidebar::-webkit-scrollbar-thumb{background:rgba(218,229,255,.38);border-radius:20px}
.zn-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(218,229,255,.65)}
/* Obscure two promotional link hotspots shown on YouTube's paused embed.
   This is cosmetic only, and can conceal some lower-corner video content. */
.zn-lesson-modal .zn-video-embed::before,.zn-lesson-modal .zn-video-embed::after{
 content:"";position:absolute;bottom:0;z-index:3;pointer-events:auto;
 background:linear-gradient(to top,rgba(0,0,0,.94),rgba(0,0,0,.70));
}
.zn-lesson-modal .zn-video-embed::before{left:0;width:10%;height:12%}
.zn-lesson-modal .zn-video-embed::after{right:0;width:32%;height:13%}

.zn-private-youtube-notice{border:1px solid #b9c9eb;background:#eff4ff;color:#193467;border-radius:12px;padding:14px 18px;margin:14px 0}.zn-private-youtube-notice p{margin:7px 0 0;line-height:1.5}

/* Student notification badges */
.zn-nav a .zn-notification-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#d6a346;color:#122b57;font-size:11px;font-weight:800;line-height:1}

/* Unified red notification indicators */
.zn-nav a .zn-notification-badge{background:#dc2626;color:#fff;border-radius:999px;min-width:21px;height:21px;}

/* Assessment submission action */
.zn-submit-to-teacher, button[name="zn_submit_assessment"] {background:linear-gradient(115deg,#1aaf70,#08734e)!important;color:#fff!important;padding:9px 16px!important;font-size:13px!important;border-radius:8px!important;}

/* Study Materials: readable vertical cards on narrow screens. */
@media (max-width: 650px) {
 .zn-material-mobile {overflow-x:visible; width:100%;}
 .zn-material-mobile .zn-table, .zn-material-mobile tbody, .zn-material-mobile tr, .zn-material-mobile td {display:block;width:100%;box-sizing:border-box;}
 .zn-material-mobile thead {display:none;}
 .zn-material-mobile tr {border:1px solid #e1e6ef;border-radius:12px;padding:12px;margin-bottom:14px;background:#fff;}
 .zn-material-mobile .zn-table td {display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:normal;overflow-wrap:anywhere;border:0;padding:9px 4px;}
 .zn-material-mobile .zn-table td::before {content:attr(data-label);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#64748b;}
 .zn-material-mobile .zn-btn {display:inline-flex;justify-content:center;align-items:center;white-space:normal!important;max-width:100%;width:auto;box-sizing:border-box;text-align:center;}
}