@charset "UTF-8";
/* Most colors are controlled in assets/css/variables.css. Change color variables there. */
.shell{max-width:780px;margin:0 auto;padding:0 20px;min-height:100vh;display:flex;flex-direction:column}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--border);margin-bottom:0;gap:16px}
.site-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.logo-img{height:200px;width:auto;display:block;transition:opacity var(--tr)}
.logo-img:hover{opacity:.75}
.header-right{display:flex;align-items:center;gap:14px}
.main-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.main-nav a{text-decoration:none;color:var(--nav-text);font-size:.85rem;font-weight:600;padding:6px 9px;border-radius:999px;transition:background var(--tr),color var(--tr)}
.main-nav a:hover,.main-nav a.active{background:var(--nav-hover-bg);color:var(--nav-hover-text)}

.learning-status{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:10px 0 12px;border-bottom:1px solid var(--border);margin-bottom:8px}
.learning-status.is-hidden{display:none!important}
#main{flex:1;padding:32px 0 60px}
@keyframes pageEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pageExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-14px)}}
.page-enter{animation:pageEnter .3s cubic-bezier(.22,1,.36,1) forwards}
.page-exit{animation:pageExit .25s ease-in forwards;pointer-events:none}
.home-hero{text-align:center;padding:40px 0 48px}
.home-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.15;margin-bottom:12px}
.home-hero h1 em{color:var(--accent);font-style:italic}
.home-hero p{color:var(--text2);font-size:1.05rem;margin-bottom:40px}
.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;max-width:680px;margin:0 auto}
.page-header{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.page-header h1{font-family:var(--font-display);font-size:1.9rem;line-height:1.2}
.topic-list{display:flex;flex-direction:column;gap:12px}
.lesson-nav{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.section-divider{border:none;border-top:1.5px solid var(--border);margin:36px 0}
.loading{text-align:center;padding:60px 20px;color:var(--text2);font-size:1.1rem}
.loading::after{content:'';display:inline-block;width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-left:10px;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.simple-page{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.simple-page h1{font-family:var(--font-display);font-size:2rem;margin-bottom:14px}
.simple-page p{color:var(--text2);margin-bottom:14px}

.site-footer{margin-top:auto;padding:24px 0;border-top:1px solid var(--border);color:var(--footer-text);font-size:.85rem}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;text-align:center}
.footer-inner strong{color:var(--footer-strong);font-weight:700}
.site-footer a{color:var(--footer-link);font-weight:700;text-decoration:none;transition:color var(--tr)}
.site-footer a:hover{color:var(--footer-link-hover);text-decoration:underline}

/* Language switcher row: keep EN/RU above logo and level navigation. */
.site-header{
  flex-wrap:wrap;
}

.header-right{
  order:-1;
  width:100%;
  justify-content:flex-end;
  margin-left:0;
  padding-top:4px;
}

.site-logo,
.main-nav{
  align-self:center;
}