/* Global styles for Protucte pages */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Roboto:wght@400;700&display=swap');
:root{
  --max-width:980px;
  --accent:#4f46e5; /* richer purple-blue */
  --muted:#6b7280;
  --bg:#f7f9ff;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, Roboto, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial;background:linear-gradient(180deg,var(--bg),#ffffff);color:#0f172a;-webkit-font-smoothing:antialiased}
.wrap{min-height:100vh;display:flex;flex-direction:column}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:22px}
/* Header */
header{background:transparent;padding:18px 0}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Ensure nav handles long (Cyrillic) labels */
.site-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.site-nav a{white-space:nowrap}
.brand{font-weight:700;font-size:18px;color:var(--accent);text-decoration:none}
.site-nav{display:flex;gap:14px;align-items:center}
.site-nav a{color:#0f172a;text-decoration:none;padding:8px 10px;border-radius:8px;transition:background .15s,color .15s}
.site-nav a:hover{background:rgba(79,70,229,0.08)}
.site-nav a.danger{color:#ef4444}
/* language toggle */
.lang{display:flex;gap:10px;align-items:center}
.lang label{font-size:13px;color:var(--muted)}
.lang button{border:1px solid rgba(15,23,42,0.06);background:linear-gradient(180deg,#fff,#fafafa);padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600;color:#0f172a}
.lang button[aria-pressed="true"]{background:linear-gradient(90deg,var(--accent),#7c3aed);color:white;border-color:transparent;box-shadow:0 6px 18px rgba(79,70,229,0.12)}
/* Hero / Card */
main{flex:1;padding:18px 0}
.card{background:linear-gradient(180deg,var(--card),#ffffff);border-radius:14px;padding:26px;box-shadow:0 10px 30px rgba(15,23,42,0.06);border:1px solid rgba(15,23,42,0.03)}
h1{margin:0 0 10px;font-size:26px;color:#0b1220}
h2{margin-top:22px;color:#111827}
p{margin:0 0 12px;line-height:1.6;color:#334155}
/* Page utilities */
.content-intro{font-size:15px;color:var(--muted);margin-bottom:12px}
.toc{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.toc a{font-size:14px;color:var(--accent);text-decoration:none}
/* Problems accordion tweaks */
.problem{cursor:pointer;margin-bottom:10px;padding-left:20px;position:relative}
.problem::before{content:'>';position:absolute;left:0;top:1px;transition:transform 0.18s ease-in-out;color:var(--accent);display:inline-block;transform-origin:center;line-height:1}
.problem.open::before{transform:rotate(90deg)}
.solution{display:none;padding-left:20px;margin-bottom:10px;border-left:2px solid rgba(15,23,42,0.06);margin-left:6px}
/* Footer */
footer{padding:26px 0;border-top:1px solid rgba(15,23,42,0.03);text-align:center;font-size:13px;color:var(--muted)}
/* Responsive */
@media (max-width:800px){
  .top{flex-direction:column;align-items:flex-start;gap:8px}
  .site-nav{order:2;gap:8px;width:100%;justify-content:flex-start;flex-wrap:wrap;margin-top:6px}
  .lang{order:3;align-self:flex-end;margin-top:6px}
  .site-nav a{padding:8px 10px;font-size:15px}
}
@media (max-width:420px){
  .container{padding:16px}
  .brand{font-size:16px}
  h1{font-size:20px}
  .lang{align-self:flex-end}
  .lang button{padding:6px 8px}
  .site-nav a{display:block;width:100%;padding:10px 0;border-radius:0}
}
/* Small utility */
.small{font-size:13px;color:var(--muted)}