:root{
  --bg:#f3f5fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#0f7a46;
  --primary-2:#0b5d35;
  --gold:#d1a545;
  --danger:#dc3545;
  --border:rgba(15,23,42,.10);
  --shadow:0 14px 28px rgba(15,23,42,.10);
  --shadow-sm:0 8px 18px rgba(15,23,42,.08);
  --shadow-lg:0 22px 44px rgba(15,23,42,.14);
  --ring:0 0 0 4px rgba(15,122,70,.14);
  --radius:16px;
  --radius-sm:12px;
  --max:1220px;
  --sidebar:#062a1c;
  --sidebar-2:#041f15;
  --sidebar-text:rgba(255,255,255,.86);
  --sidebar-muted:rgba(255,255,255,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
img{max-width:100%;height:auto}
input,select,textarea,button{font:inherit}

.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}

.app-shell{
  min-height:100vh;
  display:flex;
  background:var(--bg);
}

.sb-toggle{display:none}
.sidebar{
  width:270px;
  background:linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  color:var(--sidebar-text);
  padding:18px 14px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}
.sidebar-brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.sidebar-logo{
  width:66px;
  height:66px;
  border-radius:18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 16px 30px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:6px;
}
.sidebar-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.sidebar-title{font-weight:900; letter-spacing:.2px}
.sidebar-sub{font-size:12px; color:var(--sidebar-muted)}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px 6px 10px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:12px 12px;
  border-radius:14px;
  color:var(--sidebar-muted);
  border:1px solid transparent;
}
.nav-item svg{width:18px;height:18px; flex:0 0 auto}
.nav-item:hover{
  color:var(--sidebar-text);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
}
.nav-item.active{
  color:#fff;
  background:linear-gradient(90deg, rgba(15,122,70,.95), rgba(15,122,70,.55));
  border-color:rgba(255,255,255,.12);
}
.sidebar-card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:14px;
  margin:10px 6px 0;
}
.sidebar-card .q{margin:0; font-size:12px; color:rgba(255,255,255,.78)}
.sidebar-card .v{margin:10px 0 0; font-weight:800}
.sidebar-help{
  margin:12px 6px 0;
  padding:12px;
  border-radius:var(--radius);
  border:1px dashed rgba(255,255,255,.18);
  color:rgba(255,255,255,.80);
  font-size:12px;
}
.sidebar-footer{
  margin-top:14px;
  padding:10px 10px 0;
  color:rgba(255,255,255,.55);
  font-size:12px;
}

.app-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.app-topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(243,245,251,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.app-topbar-inner{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sb-btn{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  align-items:center;
  justify-content:center;
}
.sb-btn svg{width:20px;height:20px}

.top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  border-radius:999px;
  color:var(--muted);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
}
.chip strong{color:var(--text)}
.chip:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  background:linear-gradient(145deg, rgba(15,122,70,.95), rgba(209,165,69,.70));
}
.userbox{display:flex; align-items:center; gap:10px}
.userbox .name{font-weight:800; line-height:1.1}
.userbox .role{font-size:12px; color:var(--muted)}

.content{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 30px;
}

.section{padding:12px 0}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.section-title{margin:0; font-size:18px; letter-spacing:-.2px}
.section-sub{margin:0; color:var(--muted); font-size:13px}

.dash-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}
.dash-grid > [class^="col-"]{
  display:flex;
}
.dash-grid > [class^="col-"] > *{
  width:100%;
}
.col-12{grid-column:span 12}
.col-9{grid-column:span 9}
.col-8{grid-column:span 8}
.col-7{grid-column:span 7}
.col-6{grid-column:span 6}
.col-5{grid-column:span 5}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}

.hero-banner{
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:210px;
  background:
    linear-gradient(90deg, rgba(6,42,28,.92), rgba(6,42,28,.62)),
    radial-gradient(500px 240px at 35% 10%, rgba(209,165,69,.22), transparent 60%),
    var(--hero-image, none);
  background-size:cover;
  background-position:center;
}
.hero-inner{padding:22px}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.80);
  font-size:13px;
}
.dot{width:8px;height:8px;border-radius:999px;background:var(--gold)}
.hero-title{
  margin:10px 0 8px;
  font-size: clamp(22px, 4vw, 36px);
  line-height:1.12;
  letter-spacing:-.5px;
  color:var(--text);
}
.hero-lead{margin:0; color:var(--muted); max-width:70ch}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.hero-banner .hero-title{color:#fff}
.hero-banner .hero-lead{color:rgba(255,255,255,.84)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  color:var(--text);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn svg{width:18px;height:18px}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(420px 140px at 20% 0%, rgba(209,165,69,.18), transparent 55%);
  opacity:.0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.btn.primary{
  background:linear-gradient(180deg, rgba(15,122,70,.98), rgba(11,93,53,.95));
  border-color:rgba(15,122,70,.58);
  color:#fff;
}
.btn.primary::before{opacity:.22}
.btn.primary:hover{filter:brightness(1.03); box-shadow:0 18px 32px rgba(15,122,70,.22)}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:hover::before{opacity:.22}
.btn:active{transform:translateY(0)}
.btn:focus{outline:none}
.btn:focus-visible{box-shadow:var(--ring), var(--shadow)}
.btn:disabled, .btn[disabled]{opacity:.6; cursor:not-allowed; transform:none; box-shadow:var(--shadow-sm)}
.btn.ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
  box-shadow:none;
}
.hero-banner .btn.ghost{
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.btn.ghost:hover{background:rgba(15,23,42,.03); box-shadow:var(--shadow-sm)}
.btn.soft{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.btn.danger{
  background:rgba(220,53,69,.10);
  border-color:rgba(220,53,69,.25);
  color:var(--danger);
}
.btn.sm{padding:10px 12px; border-radius:12px}
.btn.block{width:100%}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  color:var(--muted);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
}
.pill strong{color:var(--text)}
.pill:hover{box-shadow:var(--shadow); transform:translateY(-1px)}

.card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.hero-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-main{padding:18px}
.hero-side{padding:14px}
.hero-kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}
.card-body{padding:14px}
.card-title{margin:0 0 6px; font-weight:900; letter-spacing:-.2px}
.card-meta{color:var(--muted); font-size:12px}
.card-text{margin:10px 0 0; color:var(--muted)}

.card-surface{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,252,.98)),
    radial-gradient(340px 140px at 100% 0%, rgba(209,165,69,.10), transparent 58%);
  height:100%;
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}
.metric-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  padding:14px;
  color:#fff;
}
.metric-card .label{font-size:12px; color:rgba(255,255,255,.72)}
.metric-card .value{margin-top:6px; font-size:20px; font-weight:900}

.feature-list{display:grid; gap:10px}
.feature-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
}
.feature-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(15,122,70,.12), rgba(209,165,69,.14));
  display:grid;
  place-items:center;
  color:var(--primary);
  flex:0 0 auto;
}
.feature-icon svg{width:20px;height:20px}
.feature-copy strong{display:block; margin-bottom:3px}
.feature-copy span{color:var(--muted); font-size:13px}

.course-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.course-cover{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, rgba(15,122,70,.15), rgba(209,165,69,.10));
  overflow:hidden;
}
.course-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.02);
  transition:transform .25s ease, filter .25s ease;
}
.course-card:hover .course-cover img{transform:scale(1.03); filter:saturate(1.07) contrast(1.03)}
.course-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(15,23,42,.35));
  pointer-events:none;
}
.course-badges{
  position:absolute;
  inset:auto 12px 12px 12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.course-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  backdrop-filter:blur(8px);
}
.course-badge.free{border-color:rgba(209,165,69,.35); background:rgba(209,165,69,.18)}
.course-meta-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.course-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.inline-course-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.inline-course-card{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  box-shadow:var(--shadow-sm);
}
.inline-course-card:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.inline-course-thumb{
  width:94px;
  height:94px;
  flex:0 0 auto;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(15,122,70,.14), rgba(209,165,69,.14));
}
.inline-course-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.inline-course-copy{min-width:0}
.inline-course-copy .title{font-weight:900; line-height:1.25}
.inline-course-copy .meta{font-size:12px; color:var(--muted); margin-top:5px}

.spotlight-card{
  position:relative;
  min-height:100%;
  overflow:hidden;
  height:100%;
}
.spotlight-cover{
  position:relative;
  min-height:260px;
  background:
    linear-gradient(180deg, rgba(6,42,28,.14), rgba(6,42,28,.48)),
    var(--card-image, linear-gradient(135deg, rgba(15,122,70,.15), rgba(209,165,69,.12)));
  background-size:cover;
  background-position:center;
  border-radius:inherit;
}
.spotlight-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 20%, rgba(15,23,42,.72) 100%);
}
.spotlight-body{
  position:absolute;
  inset:auto 0 0 0;
  padding:18px;
  color:#fff;
  z-index:1;
}
.spotlight-body .eyebrow{font-size:12px; color:rgba(255,255,255,.72)}
.spotlight-body .title{font-size:24px; line-height:1.1; font-weight:900; margin:8px 0}
.spotlight-body .text{color:rgba(255,255,255,.84); margin:0}

.news-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.news-cover{
  aspect-ratio:16/9;
  background:
    linear-gradient(180deg, rgba(6,42,28,.12), rgba(6,42,28,.28)),
    var(--news-image, linear-gradient(135deg, rgba(15,122,70,.12), rgba(209,165,69,.10)));
  background-size:cover;
  background-position:center;
}
.news-content{padding:16px}
.news-content .actions{margin-top:auto}

.donation-shell{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
}
.donation-aside{
  display:grid;
  gap:14px;
}
.donation-cover{
  min-height:240px;
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(6,42,28,.18), rgba(6,42,28,.58)),
    var(--donation-image, linear-gradient(135deg, rgba(15,122,70,.14), rgba(209,165,69,.12)));
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.donation-copy{
  position:absolute;
  inset:auto 0 0 0;
  padding:22px;
  color:#fff;
}
.donation-copy h2{margin:8px 0 6px; font-size:28px; line-height:1.1}
.donation-copy p{margin:0; color:rgba(255,255,255,.84)}

.inner-hero{
  position:relative;
  min-height:260px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  background:
    linear-gradient(90deg, rgba(6,42,28,.90), rgba(6,42,28,.60)),
    radial-gradient(460px 220px at 18% 10%, rgba(209,165,69,.20), transparent 60%),
    var(--hero-card-image, linear-gradient(135deg, rgba(15,122,70,.18), rgba(209,165,69,.16)));
  background-size:cover;
  background-position:center;
}
.inner-hero-body{
  position:relative;
  z-index:1;
  padding:28px;
  color:#fff;
  max-width:760px;
}
.inner-hero .eyebrow{font-size:13px; color:rgba(255,255,255,.78)}
.inner-hero h1{margin:10px 0 8px; font-size:clamp(26px, 4vw, 40px); line-height:1.08}
.inner-hero p{margin:0; color:rgba(255,255,255,.86)}

.editorial-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:16px;
}

.glass-panel{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  border-radius:20px;
  padding:16px;
  color:#fff;
}
.glass-panel .muted{color:rgba(255,255,255,.74); font-size:12px}
.glass-panel .strong{font-size:24px; font-weight:900; margin-top:6px}

.profile-hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
}
.profile-avatar{
  width:88px;
  height:88px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(15,122,70,.98), rgba(209,165,69,.80));
  color:#fff;
  display:grid;
  place-items:center;
  font-size:32px;
  font-weight:900;
  box-shadow:0 16px 34px rgba(15,122,70,.18);
}
.profile-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.stream-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.stream-media{
  position:relative;
  padding-top:56.25%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#0f172a;
}
.stream-media iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.level-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.level-cover{
  aspect-ratio:16/9;
  background:
    linear-gradient(180deg, rgba(6,42,28,.18), rgba(6,42,28,.54)),
    var(--level-image, linear-gradient(135deg, rgba(15,122,70,.14), rgba(209,165,69,.12)));
  background-size:cover;
  background-position:center;
}
.level-content{padding:16px}

.panel-stack{
  display:grid;
  gap:14px;
}

.audio-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, #ffffff, #f5f8fc);
  box-shadow:var(--shadow-sm);
  padding:18px;
}
.audio-card audio{width:100%}

.muted-list{
  display:grid;
  gap:10px;
}
.muted-list .item{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  background:var(--surface-2);
}
.muted-list .item strong{display:block; margin-bottom:4px}
.muted-list .item span{color:var(--muted); font-size:13px}

.auth-shell{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:18px;
}
.auth-panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,252,.98));
  box-shadow:var(--shadow);
  padding:22px;
}
.auth-panel .form{padding:0; background:transparent; border:none; box-shadow:none}
.auth-aside{
  min-height:100%;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(180deg, rgba(6,42,28,.22), rgba(6,42,28,.68)),
    var(--auth-image, linear-gradient(135deg, rgba(15,122,70,.18), rgba(209,165,69,.16)));
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow);
}
.auth-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:24px;
  color:#fff;
}
.auth-overlay h2{margin:8px 0 6px; font-size:30px; line-height:1.08}
.auth-overlay p{margin:0; color:rgba(255,255,255,.86)}

.course-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
}
.course-main-card{
  position:relative;
  overflow:hidden;
  min-height:100%;
}
.course-main-card .course-cover{min-height:260px}
.course-main-card .card-body{position:relative}
.course-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}
.course-stat{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.course-stat .label{font-size:12px; color:var(--muted)}
.course-stat .value{margin-top:6px; font-size:18px; font-weight:900}

.lesson-list{
  display:grid;
  gap:12px;
}
.lesson-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  box-shadow:var(--shadow-sm);
}
.lesson-index{
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(15,122,70,.14), rgba(209,165,69,.14));
  color:var(--primary);
  display:grid;
  place-items:center;
  font-weight:900;
}
.lesson-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}

.article-shell{
  display:grid;
  gap:18px;
}
.article-card{overflow:hidden}
.article-cover{
  aspect-ratio:16/7;
  background:
    linear-gradient(180deg, rgba(6,42,28,.12), rgba(6,42,28,.34)),
    var(--article-image, linear-gradient(135deg, rgba(15,122,70,.12), rgba(209,165,69,.10)));
  background-size:cover;
  background-position:center;
}
.article-body{padding:22px}

.admin-shell{
  display:grid;
  gap:18px;
}
.admin-overview{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}
.admin-stat{
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  box-shadow:var(--shadow-sm);
  padding:18px;
}
.admin-stat .label{font-size:12px; color:var(--muted)}
.admin-stat .value{font-size:28px; font-weight:900; margin-top:8px}
.admin-tools{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.admin-tool-card{
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  box-shadow:var(--shadow-sm);
  padding:18px;
}
.admin-content-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.admin-form-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,252,.98));
  box-shadow:var(--shadow);
  padding:20px;
}
.admin-table-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.admin-table-card .card-body{padding:18px}

.simple-list{
  display:grid;
  gap:10px;
}
.simple-list .row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-2);
}
.simple-list .row strong{font-size:14px}
.simple-list .row span{font-size:12px; color:var(--muted)}

.mini-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}

.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
}

.stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:14px;
  padding:12px;
}
.stat .l{color:var(--muted); font-size:12px}
.stat .v{font-weight:900}

.progress{
  height:10px;
  border-radius:999px;
  background:rgba(15,23,42,.10);
  overflow:hidden;
}
.progress > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(15,122,70,.95), rgba(209,165,69,.65));
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
}
.badge.live{border-color:rgba(220,53,69,.30); background:rgba(220,53,69,.08); color:var(--danger)}
.badge.ok{border-color:rgba(15,122,70,.30); background:rgba(15,122,70,.08); color:var(--primary)}

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
}
.table th,.table td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.table th{color:var(--muted); font-size:12px; font-weight:800; background:var(--surface-2)}
.table tr:last-child td{border-bottom:none}
.table .right{text-align:right}
.table .nowrap{white-space:nowrap}

.form{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  padding:14px;
}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{color:var(--muted); font-size:12px; font-weight:700}
.field input,.field select,.field textarea{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff, #f7f9fd);
  color:var(--text);
  outline:none;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(15,122,70,.45);
  box-shadow:var(--ring);
}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.hint{color:var(--muted); font-size:12px; margin-top:10px}

.flash{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  margin:12px 0;
  color:var(--text);
}
.flash.ok{border-color:rgba(15,122,70,.30); background:rgba(15,122,70,.06)}
.flash.err{border-color:rgba(220,53,69,.30); background:rgba(220,53,69,.06)}

.footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.footer-inner{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  padding:16px 0;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}
.footer-links{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}

@media (max-width: 980px){
  .col-9,.col-8,.col-7{grid-column:span 12}
  .col-6,.col-5,.col-4,.col-3{grid-column:span 6}
  .grid{grid-template-columns:repeat(2, 1fr)}
  .split{grid-template-columns:1fr}
  .hero-metrics{grid-template-columns:1fr}
  .inline-course-list{grid-template-columns:1fr}
  .donation-shell{grid-template-columns:1fr}
  .editorial-grid{grid-template-columns:1fr}
  .profile-kpis{grid-template-columns:1fr}
  .auth-shell,.course-hero,.admin-content-grid,.admin-overview,.admin-tools,.course-stat-grid{grid-template-columns:1fr}
  .lesson-row{grid-template-columns:1fr}
}

.prose{
  color:var(--text);
  line-height:1.72;
  font-size:15px;
}
.prose p{margin:0 0 12px}
.prose p:last-child{margin-bottom:0}

.media-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.media-card img{width:100%; height:auto; display:block}

@media (max-width: 720px){
  .sidebar{
    position:fixed;
    left:-290px;
    top:0;
    height:100vh;
    z-index:60;
    transition:left .22s ease;
  }
  .sb-btn{display:inline-flex}
  .sb-toggle:checked ~ .app-shell .sidebar{left:0}
  .sb-toggle:checked ~ .app-shell .backdrop{opacity:1; pointer-events:auto}
  .backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.35);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    z-index:55;
  }
  .col-6,.col-5,.col-4,.col-3{grid-column:span 12}
  .fields{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero-inner{padding:18px}
}