/* === Teachoy — общий каркас (тема, топбар, навигация) ===
   Подключается во всех страницах перед инлайновыми стилями.
   Специфичные для страницы стили остаются в самих HTML. */
:root{
  --bg-page:#F4F5F7;--bg-card:#fff;--bg-secondary:#f4f5f7;--bg-input:#fff;--bg-chip:#f4f5f7;
  --text-primary:#1a1a2e;--text-secondary:#666;--text-muted:#888;--text-faint:#aaa;--text-chip:#444;
  --border:#e8e8f0;--border-input:#e0e0ee;--border-dashed:#d0d0e0;
  --accent:#00704A;--accent-hover:#005c3e;--accent-bg:#e6f5f0;--accent-text:#00704A;
  --red:#E8002D;--red-bg:#fff0f0;
  --hw-bg:#f9f9fb;--row-border:#f0f0f0;
}
body.dark,html.dark-early body{
  --bg-page:#111318;--bg-card:#1c1f2b;--bg-secondary:#252836;--bg-input:#1c1f2b;--bg-chip:#252836;
  --text-primary:#e8eaf2;--text-secondary:#9099b5;--text-muted:#6b748f;--text-faint:#4d5570;--text-chip:#9099b5;
  --border:#2a2f45;--border-input:#333a55;--border-dashed:#333a55;
  --accent:#00a066;--accent-hover:#00704A;--accent-bg:#0a2e1e;--accent-text:#00c47a;
  --red:#ff3a5c;--red-bg:#2d0a12;
  --hw-bg:#202333;--row-border:#2a2f45;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-page);color:var(--text-primary);min-height:100vh;transition:background 0.2s,color 0.2s}
.app{display:flex;flex-direction:column;min-height:100vh}
/* Topbar */
.topbar{display:flex;align-items:center;gap:16px;padding:0 24px;height:56px;background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;color:var(--text-primary);text-decoration:none;letter-spacing:0.2px}
.logo-img{height:30px;width:30px;display:block;border-radius:7px}
/* Аватарка ученика (форма; цвет/размер задаются инлайн через avatarMarkup) */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%}
/* Role dropdown */
.role-dropdown{position:relative}
.role-btn{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);cursor:pointer;padding:5px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card)}
.role-btn:hover{background:var(--bg-secondary)}
.role-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,0.12);min-width:160px;z-index:200;overflow:hidden}
.role-menu.hidden{display:none}
.role-menu-item{padding:10px 14px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.role-menu-item:hover{background:var(--bg-secondary)}
.role-menu-item.active{color:var(--accent-text);font-weight:500}
/* Nav */
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-size:14px;padding:7px 14px;border-radius:8px;color:var(--text-secondary);text-decoration:none;cursor:pointer}
.nav a.active,.nav a:hover{color:var(--text-primary);background:var(--bg-secondary)}
.theme-btn{background:none;border:1px solid var(--border);border-radius:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:18px}
.theme-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}
.avatar{width:34px;height:34px;border-radius:50%;background:#00704A;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:500;margin-left:4px;cursor:pointer}