@charset "UTF-8";
/* Most colors are controlled in src/styles/variables.css. Change color variables there. */
.shell{max-width:780px;margin:0 auto;padding:0 20px;min-height:100vh;display:flex;flex-direction:column;transition:max-width .2s ease}
.shell.shell--wide{max-width:1060px}
.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-brand{display:flex;flex-direction:column;gap:2px;flex-shrink:0;text-decoration:none;line-height:1.15;transition:opacity var(--tr)}
.site-brand:hover{opacity:.8}
.site-brand__name{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--accent);letter-spacing:.01em}
.site-brand__name--black{color:var(--text)}
.site-brand__tagline{font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--text2)}
.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}

.daily-activity{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;margin:18px 0 24px;background:var(--accent-light);border:1.5px solid var(--border);border-radius:var(--radius)}
.daily-activity__label{font-size:.85rem;font-weight:700;color:var(--text2);letter-spacing:.02em}
.daily-activity__stats{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto;margin-right:12px}
.daily-activity__stats.is-hidden{display:none!important}
.daily-activity__stat{font-size:.82rem;color:var(--text2);display:inline-flex;align-items:center;gap:4px}
.daily-activity__stat b{color:var(--text);font-weight:700}
.daily-activity__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.daily-activity__actions .btn{padding:8px 16px;font-size:.82rem}
.daily-activity__actions .btn.secondary:disabled{opacity:.5}

#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:28px 0 32px}
.home-hero h1{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:20px}
.home-hero p{color:var(--text2);font-size:1.05rem;margin-bottom:20px}
.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}
.tabs-divider{border:none;border-top:1px solid var(--border);margin:0 0 24px}
.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-brand,
.main-nav{
  align-self:center;
}

/* ── Intro text — real, permanent, server-rendered (no fade/hide JS trick) ─── */
.page-intro {
  max-width: 640px;
  margin: 0 auto 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  font-size: .92rem;
  line-height: 1.7;
}

[data-blang="en"] .page-intro--ru { display: none; }
[data-blang="ru"] .page-intro--en { display: none; }
:root:not([data-blang="ru"]) .page-intro--ru:not(:only-child) { display: none; }

[data-blang="en"] .site-brand__tagline--ru { display: none; }
[data-blang="ru"] .site-brand__tagline--en { display: none; }

[data-blang="en"] .topic-info__lang--ru { display: none; }
[data-blang="ru"] .topic-info__lang--en { display: none; }

[data-blang="en"] .related-topic-card__lang--ru { display: none; }
[data-blang="ru"] .related-topic-card__lang--en { display: none; }

/* ── Topic hub page: word list + "Related topics" side column ───────────── */
.topic-hub-layout{
  display:flex;
  align-items:flex-start;
  gap:36px;
}
.topic-hub-main{
  flex:1;
  min-width:0;
}
.related-topics{
  width:270px;
  flex-shrink:0;
  position:sticky;
  top:24px;
}
.related-topics__title{
  font-family:var(--font-display);
  font-size:1.1rem;
  margin-bottom:14px;
}
.related-topics__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.related-topic-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  text-decoration:none;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
}
.related-topic-card:hover,
.related-topic-card:focus-visible{
  border-color:var(--card-hover-border);
  box-shadow:var(--shadow);
  transform:translateX(2px);
}
.related-topic-card__thumb{
  width:48px;
  height:48px;
  border-radius:8px;
  flex-shrink:0;
  background-image:var(--topic-bg);
  background-color:var(--surface2);
  background-size:cover;
  background-position:center;
}
.related-topic-card__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.related-topic-card__text strong{
  font-size:.86rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.related-topic-card__text span{
  font-size:.76rem;
  color:var(--text2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 900px){
  .topic-hub-layout{
    flex-direction:column;
  }
  .related-topics{
    width:100%;
    position:static;
  }
  .related-topics__list{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .related-topic-card{
    flex:1 1 220px;
  }
}