/* EngTopics — https://engtopics.ru | mobile-first, tokens: #FFFFFF #F6F9FF #2563EB #FFC82E #16A34A #DC2626 #1E293B #E5E9F0 #64748B */
:root{
  --bg:#FFFFFF;--bg-soft:#F6F9FF;--text:#1E293B;--muted:#64748B;--line:#E5E9F0;
  --blue:#2563EB;--blue-dark:#1D4ED8;--yellow:#FFC82E;--green:#16A34A;--red:#DC2626;
  --a1:#16A34A;--a2:#0284C7;--b1:#EA580C;--b2c1:#7C3AED;--c2:#B45309;
  --radius:14px;--shadow:0 2px 12px rgba(30,41,59,.08);--shadow-hover:0 8px 24px rgba(30,41,59,.14);
  --max:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:18px;line-height:1.7}
h1,h2,h3{line-height:1.3;margin:1.4em 0 .6em}
h1{font-size:1.7rem}h2{font-size:1.35rem}h3{font-size:1.1rem}
p{margin:.7em 0}
a{color:var(--blue)}
img{max-width:100%;height:auto}
*:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
/* ===== banner slot (empty by default, no layout shift) ===== */
#site-banner{min-height:0}
#site-banner:empty{display:none}
#site-banner aside{position:relative}
#site-banner img{display:block;max-height:90px;width:auto}
/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--max);margin:0 auto;padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.1rem;color:var(--text);text-decoration:none;white-space:nowrap}
.logo span{color:var(--blue)}
.search-wrap{position:relative;flex:1;min-width:180px;max-width:420px}
#search-input{width:100%;padding:10px 14px;font-size:1rem;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);color:var(--text)}
#search-results{position:absolute;top:110%;left:0;right:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-hover);overflow:hidden;z-index:60}
#search-results:empty{display:none}
#search-results a{display:block;padding:8px 14px;text-decoration:none;color:var(--text);font-size:.95rem}
#search-results a:hover{background:var(--bg-soft)}
.btn{display:inline-block;min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid var(--blue);
  background:var(--blue);color:#fff;font-size:1rem;text-decoration:none;cursor:pointer;line-height:1.4}
.btn:hover{background:var(--blue-dark)}
.btn-ghost{background:var(--bg);color:var(--blue)}
.btn-ghost:hover{background:var(--bg-soft)}
#continue-btn{white-space:nowrap}
/* ===== layout ===== */
.layout{max-width:var(--max);margin:0 auto;padding:0 16px 48px;display:block}
main#main{min-width:0}
/* ===== sidebar ===== */
.sidebar{margin:16px 0}
.sidebar details{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--bg);overflow:hidden}
.sidebar summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px}
.sidebar summary::-webkit-details-marker{display:none}
.sidebar summary:hover{background:var(--bg-soft)}
.sidebar .lvl-list{padding:0 14px 12px;display:flex;flex-direction:column;gap:2px}
.sidebar .lvl-list a{padding:6px 4px;text-decoration:none;color:var(--text);font-size:.95rem;border-radius:6px}
.sidebar .lvl-list a:hover{background:var(--bg-soft);color:var(--blue)}
.lvl-pct{margin-left:auto;font-size:.8rem;color:var(--muted);font-weight:400}
/* ===== breadcrumbs ===== */
.breadcrumbs{font-size:.9rem;color:var(--muted);margin:16px 0 0}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumbs li+li::before{content:"›";margin-right:6px}
/* ===== catalog cards ===== */
.catalog{display:grid;gap:24px;grid-template-columns:1fr;margin:24px 0}
.lvl-card{background:var(--bg);border:1px solid var(--line);border-left:6px solid var(--blue);
  border-radius:16px;box-shadow:var(--shadow);padding:20px;transition:transform .15s,box-shadow .15s}
.lvl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.lvl-card[data-level="A1"]{border-left-color:var(--a1)}
.lvl-card[data-level="A2"]{border-left-color:var(--a2)}
.lvl-card[data-level="B1"]{border-left-color:var(--b1)}
.lvl-card[data-level="B2-C1"]{border-left-color:var(--b2c1)}
.lvl-card[data-level="C2"]{border-left-color:var(--c2)}
.lvl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lvl-head h2{margin:0;font-size:1.25rem}
.badge{display:inline-block;padding:2px 12px;border-radius:999px;color:#fff;font-size:.85rem;font-weight:700}
.badge-A1{background:var(--a1)}.badge-A2{background:var(--a2)}.badge-B1{background:var(--b1)}
.badge-B2-C1{background:var(--b2c1)}.badge-C2{background:var(--c2)}
.progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:12px 0}
.progress i{display:block;height:100%;background:var(--green);border-radius:99px}
.topic-pills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;padding:0;list-style:none}
.topic-pills a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:.9rem;text-decoration:none;color:var(--text);background:var(--bg-soft)}
.topic-pills a:hover{border-color:var(--blue);color:var(--blue)}
.topic-pills a.soon{opacity:.5;pointer-events:none}
.status-done{color:var(--green)}.status-half{color:var(--b1)}
/* ===== level topic grid ===== */
.topic-grid{display:grid;gap:12px;grid-template-columns:1fr;margin:20px 0}
.topic-card{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--text);background:var(--bg);box-shadow:var(--shadow)}
.topic-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.topic-card b{display:block}
/* ===== content blocks ===== */
.rule-box{background:var(--bg-soft);border-left:5px solid var(--yellow);border-radius:0 12px 12px 0;padding:12px 18px;margin:16px 0}
.formula{font-family:ui-monospace,Consolas,monospace;background:#1E293B;color:#F6F9FF;border-radius:12px;padding:12px 18px;overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:.95rem}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
th{background:var(--bg-soft)}
table.examples td:first-child{font-weight:600}
/* ===== test ===== */
.test .q{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:12px 0;background:var(--bg)}
.test .q p{font-weight:700;margin-top:0}
.test label{display:block;padding:8px 10px;margin:4px 0;border-radius:8px;cursor:pointer;min-height:44px}
.test label:hover{background:var(--bg-soft)}
.test .q.correct{border-color:var(--green);background:#F0FDF4}
.test .q.wrong{border-color:var(--red);background:#FEF2F2}
.test .explanation{font-size:.92rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.score-line{font-size:1.15rem;font-weight:800;margin:14px 0}
.verdict{padding:10px 16px;border-radius:10px;background:var(--bg-soft);font-weight:700}
/* ===== faq ===== */
.faq details,details.faq-item{border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:0 16px;background:var(--bg)}
.faq summary,details.faq-item summary{cursor:pointer;font-weight:700;padding:12px 0;min-height:44px}
/* ===== prev/next, related, toc ===== */
.toc{position:sticky;top:70px;background:var(--bg-soft);border-radius:12px;padding:8px 16px;margin:16px 0;font-size:.95rem}
.toc a{margin-right:14px}
.prev-next{display:flex;justify-content:space-between;gap:12px;margin:28px 0;flex-wrap:wrap}
.related{border-top:1px solid var(--line);margin-top:24px;padding-top:12px}
/* ===== footer ===== */
.site-footer{border-top:1px solid var(--line);background:var(--bg-soft);margin-top:32px}
.footer-inner{max-width:var(--max);margin:0 auto;padding:24px 16px;font-size:.9rem;color:var(--muted)}
/* ===== 404 / search ===== */
.center{max-width:640px;margin:48px auto;text-align:center;padding:0 16px}
/* ===== breakpoints ===== */
@media (min-width:768px){
  h1{font-size:2rem}
  .layout{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start}
  .sidebar{position:sticky;top:130px}
  .catalog{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
  .topic-grid{grid-template-columns:1fr 1fr}
  #site-banner img{max-height:90px}
}
@media (min-width:1024px){
  .topic-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:1440px){
  :root{--max:1280px}
}
/* ===== mobile tables -> cards (<=640px) ===== */
@media (max-width:640px){
  body{font-size:17px}
  #site-banner img{max-height:60px}
  table.examples,table.examples tbody,table.examples tr,table.examples td{display:block;width:100%}
  table.examples thead{display:none}
  table.examples td{padding:8px 12px;border:none}
  table.examples td::before{content:attr(data-label);display:block;font-weight:600;font-size:12px;color:#64748B;margin-bottom:4px}
  table.examples tr{border:1px solid #E5E9F0;border-radius:12px;margin-bottom:12px;padding:8px;display:block}
  .header-inner{gap:8px}
  #continue-btn{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}