:root{
  --bg:#f3f4f6; --card:#ffffff; --ink:#0f172a; --muted:#6b7280; --accent:#111827; --advanced:#ADA382; --head-icon:#9ca3af;
}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
#tanulas-root{position:relative;min-height:100vh}
/* Header */
.header{position:fixed;top:0;left:0;right:0;height:56px;background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #e5e7eb;z-index:40}
.h-left{display:flex;align-items:center;gap:10px}
.h-title{font-weight:800;color:var(--accent)}
.h-sub{font-weight:300;color:var(--muted)}
.h-right{display:flex;gap:8px;align-items:center}
.icon-btn{display:inline-grid;place-items:center;border:0;background:transparent;cursor:pointer;padding:6px;color:var(--head-icon)}
.icon-btn:hover{opacity:.85}
/* Layout */
.main{padding-top:64px;display:grid;grid-template-columns:1fr;gap:12px;transition:grid-template-columns .25s ease; padding-bottom:24px}
.main.with-sidebar{grid-template-columns:300px 1fr}
/* Sidebar */
.sidebar{position:fixed;top:56px;bottom:0;left:0;width:300px;background:#fff;border-top-right-radius:25px;border-bottom-right-radius:25px;transform:translateX(-100%);transition:transform .25s ease;z-index:35;border-right:1px solid #e5e7eb;display:flex;flex-direction:column}
.sidebar.open{transform:translateX(0)}
.s-scroll{flex:1;overflow:auto}
.s-group{padding:12px 12px 6px}
.s-label{font-size:11px;color:var(--muted);margin:4px 0 6px 6px}
.s-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;cursor:pointer;transition:background .15s ease, transform .15s ease;font-size:13px}
.s-item:hover{background:#f3f4f6;transform:translateX(2px)}
.s-item.active{background:#e9eef7}
.s-item .name{flex:1;font-weight:700}
.s-item .icon{width:16px;height:16px;display:grid;place-items:center;color:#9aa4b2}
.s-item .done{color:#111827;display:grid;place-items:center}
.s-sub{display:flex;align-items:center;gap:6px;margin-left:28px;margin-top:2px;padding:6px 8px;border-radius:12px;cursor:pointer;transition:background .15s ease;font-size:12px}
.s-sub:hover{background:#f7f8fa}
.s-sub.active{background:#eef3fb}
.s-sub .name{flex:1;font-weight:300}
.s-footer{border-top:1px solid #eef2f7;background:#fff}
.s-bottom{padding:10px 12px;display:flex;gap:8px}
.s-bottom .btn{flex:1 1 50%;display:flex;gap:8px;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;padding:8px 10px}
.s-bottom .btn:hover{background:#f3f4f6}
.user-mini{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7280;padding:10px 14px}
/* Story segmented bar */
.story{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:0 12px 12px 12px;position:relative;display:flex;gap:2px;padding:2px}
.story .seg{flex:1;background:#e5e7eb;border-radius:999px;transition:background .25s ease, transform .25s ease, opacity .25s ease;opacity:.75;transform:scaleY(.95)}
.story .seg.seen{background:#cbd5e1;opacity:.95;transform:scaleY(1)}
.story .seg.current{background:var(--accent);opacity:1;transform:scaleY(1)}
/* Cards grid (subjects & eras) */
.grid{max-width:1160px;margin:12px auto;padding:0 12px 12px;display:grid;gap:24px;justify-content:center}
.grid.subjects, .grid.eras{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* Strict responsive rules for subject & era grids (phone=1, tablet=2) */
.grid.subjects, .grid.eras{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); justify-content:center}
@media (max-width: 700px){
  .grid.subjects, .grid.eras{grid-template-columns:1fr!important}
}
@media (min-width: 701px) and (max-width: 1180px){
  .grid.subjects, .grid.eras{grid-template-columns:repeat(2, minmax(280px,1fr))!important}
}
@media (min-width: 1181px){
  .grid.subjects, .grid.eras{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important}
}

@media (max-width: 640px){
  .grid.subjects, .grid.eras{grid-template-columns:1fr!important}
}
@media (min-width: 641px) and (max-width: 1024px){
  .grid.subjects, .grid.eras{grid-template-columns:repeat(2, minmax(0,1fr))!important}
}
@media (min-width: 1025px){
  .grid.subjects, .grid.eras{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important}
}
.card{position:relative;border-radius:25px;overflow:hidden;background:linear-gradient(135deg,#667085,#475569);min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transform:translateY(6px);animation:fadeInUp .25s ease forwards;transition:transform .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.card .img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18}
.card .cap{position:relative;color:#fff;font-weight:800;font-size:18px;padding:12px 14px 46px;width:100%}
.card .bar{position:absolute;left:12px;right:12px;bottom:12px;height:8px;background:#d1d5db;border-radius:999px;overflow:hidden}
.card .bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .35s ease}
.card .meta{position:absolute;left:12px;right:12px;bottom:24px;color:#e5e7eb;font-size:12px;opacity:.85}
/* Lesson bubble + hero */
.bubble{max-width:980px;margin:12px auto 28px;padding:12px}
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:260px;margin-bottom:10px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:rgba(120,120,120,.45)}
.hero-title{position:absolute;left:16px;bottom:16px;color:#fff;font-weight:800;font-size:32px;z-index:2;text-shadow:none}
.lesson{border-radius:22px;background:#fff;padding:14px;opacity:0;animation:fadeIn .2s ease forwards;width:100%}
.sec-title{font-weight:800;margin:8px 0 4px;font-size:18px}
.sec-body{line-height:1.85;font-size:15px;text-align:justify}
.sec-body h2{font-size:20px;margin:16px 0 8px}
.nav-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.nav-btn{border:none;background:transparent;cursor:pointer;padding:4px}
.nav-btn svg{display:block}
.done-btn{margin-top:12px;width:100%;padding:10px 12px;border-radius:12px;border:0;background:#111827;color:#fff;cursor:pointer;font-weight:700;font-size:14px;display:block}
.done-btn:hover{opacity:.95}
.era-caption{max-width:1200px;margin:4px auto 0;padding:0 12px;font-weight:800;font-size:18px;color:#0f172a}
.l-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.l-grid .card .cap{padding:12px 14px 18px}
.l-grid .card .bar, .l-grid .card .meta{display:none}
@keyframes fadeIn{from{opacity:0} to{opacity:1}} @keyframes fadeInUp{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}
/* Dark */
.dark body{background:#0b0f14;color:#e5e7eb}
.dark .header{background:#0f141a;border-bottom:1px solid #1f2937}
.dark .sidebar{background:#0f141a;border-right:1px solid #1f2937}
.dark .card{background:linear-gradient(135deg,#334155,#0f141a)}
.dark .lesson{background:#0f141a}
.dark .icon-btn{color:#9aa4b2}
.dark .s-item:hover{background:#101820}
.dark .hero-overlay{background:rgba(120,120,120,.55)}
.dark .era-caption{color:#e5e7eb}
/* Responsive */
@media (max-width: 640px){
  .grid{grid-template-columns:1fr!important}
  .bubble{padding:8px}
}
/* Ensure bubble sits in second column when sidebar open */
.main.with-sidebar .bubble{grid-column:2}