/* ===== Material Design (light) ===== */
:root{
  --md-primary:#6750A4;--md-primary-rgb:103,80,164;
  --md-on-primary:#FFFFFF;
  --md-primary-container:#EADDFF;
  --md-on-primary-container:#21005D;
  --md-secondary:#625B71;
  --md-secondary-container:#E8DEF8;
  --md-on-secondary-container:#21005D;
  --md-surface:#FEF7FF;
  --md-surface-dim:#DED8E1;
  --md-background:#F4EFF7;
  --md-on-surface:#1D1B20;
  --md-on-surface-var:#49454F;
  --md-outline:#79747E;
  --md-outline-var:#CAC4D0;--md-outline-var-rgb:202,196,208;
  --md-error:#B3261E;--md-error-rgb:179,38,30;
  --md-on-error:#FFFFFF;
  --md-success:#146C2E;
  --md-elev1:0 1px 2px rgba(0,0,0,.30),0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev2:0 1px 2px rgba(0,0,0,.30),0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev3:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.30);
  --md-radius:12px;
  --md-font:"Space Grotesk",system-ui,sans-serif;
  --md-mono:"Space Mono",ui-monospace,Consolas,monospace;
  --editor-font:14px;
  --tab-size:4;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--md-font);
  color:var(--md-on-surface);
  background:var(--md-background);
  -webkit-font-smoothing:antialiased;
  /* змінні панелі навігації */
  --nav-w:112px; --nav-h:68px; --nav-ico:22px; --nav-font:12px;
}
body[data-nav-size="small"]{--nav-w:88px;--nav-h:56px;--nav-ico:18px;--nav-font:10px}
body[data-nav-size="large"]{--nav-w:140px;--nav-h:84px;--nav-ico:26px;--nav-font:13px}

/* режим «лише іконки» (без підписів) */
body.no-nav-labels{--nav-w:64px;--nav-h:48px}
body[data-nav-size="small"].no-nav-labels{--nav-w:56px;--nav-h:44px}
body[data-nav-size="large"].no-nav-labels{--nav-w:76px;--nav-h:56px}
body.no-nav-labels .rail-label{display:none}
body.no-nav-labels .rail-btn{gap:0}
body.no-nav-labels .rail-ico{width:44px;height:36px}
body.no-nav-labels .rail-ico .material-icons{font-size:calc(var(--nav-ico) + 2px)}
.material-icons{font-size:20px;line-height:1;vertical-align:middle;user-select:none}
.hidden{display:none!important}
.muted{color:var(--md-on-surface-var)}

/* ===== Top app bar ===== */
.appbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:12px;
  height:64px;padding:0 16px;
  background:var(--md-surface);
  box-shadow:var(--md-elev2);
}
.appbar-logo{color:var(--md-on-primary);background:var(--md-primary);border-radius:12px;padding:6px;cursor:pointer}
.appbar-title{font-size:20px;font-weight:500;letter-spacing:.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;user-select:none}
.appbar-spacer{flex:1}
.icon-btn{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--md-on-surface-var);display:grid;place-items:center;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.icon-btn:hover{background:rgba(29,27,32,.08)}
.icon-btn[aria-pressed="false"]{opacity:.4}
#focusToggle{opacity:1}
#focusToggle[aria-pressed="true"]{color:var(--md-primary);background:var(--md-primary-container)}
#musicToggle[aria-pressed="true"]{color:var(--md-primary);background:var(--md-primary-container)}
.chip-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--md-outline-var);background:var(--md-surface);border-radius:8px;padding:4px 14px 4px 4px;cursor:pointer;font-family:var(--md-font);font-weight:500;font-size:14px;color:var(--md-on-surface);position:relative;overflow:hidden}
.chip-btn:hover{background:rgba(29,27,32,.06)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;font-size:14px;font-weight:500}
.avatar.big{width:64px;height:64px;font-size:28px}

/* ===== Navigation rail ===== */
.navrail{
  position:fixed;left:0;top:64px;bottom:0;width:var(--nav-w);z-index:25;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--md-surface);border-right:1px solid var(--md-outline-var);
  padding:16px 0;overflow-y:auto;
}
.rail-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:0;background:transparent;cursor:pointer;width:calc(var(--nav-w) - 16px);padding:6px 0;
  font-family:var(--md-font);color:var(--md-on-surface-var);position:relative;overflow:hidden;
}
.rail-btn:hover{background:rgba(29,27,32,.06);border-radius:16px}
.rail-ico{width:56px;height:32px;border-radius:16px;display:grid;place-items:center;transition:.2s}
.rail-ico .material-icons{font-size:var(--nav-ico)}
.rail-label{font-size:var(--nav-font);font-weight:500;letter-spacing:.4px;white-space:normal;line-height:1.2;text-align:center}
.rail-btn.active{color:var(--md-on-surface)}
.rail-btn.active .rail-ico{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}

/* компактний рейл, щоб усі розділи вміщались на невисоких екранах */
.navrail{scrollbar-width:thin}
@media(min-width:761px) and (max-height:900px){
  .navrail{gap:2px;padding:8px 0}
  .rail-btn{gap:2px;padding:3px 0}
  .rail-ico{height:26px;width:48px}
  .rail-ico .material-icons{font-size:20px}
  .rail-label{font-size:10px;line-height:1.1}
}
@media(min-width:761px) and (max-height:700px){
  .navrail{gap:0;padding:4px 0}
  .rail-btn{gap:0;padding:2px 0}
  .rail-ico{height:22px;width:44px}
  .rail-ico .material-icons{font-size:18px}
  .rail-label{font-size:9px}
}

/* позиції панелі (десктоп) */
@media(min-width:761px){
  body[data-nav-pos="left"] main{padding-left:var(--nav-w);padding-right:16px}
  body[data-nav-pos="right"] main{padding-left:16px;padding-right:var(--nav-w)}
  body[data-nav-pos="top"] main{padding-left:16px;padding-top:calc(64px + var(--nav-h) + 24px)}
  body[data-nav-pos="bottom"] main{padding-left:16px;padding-bottom:calc(var(--nav-h) + 32px)}

  body[data-nav="classic"][data-nav-pos="right"] .navrail{left:auto;right:0;border-right:0;border-left:1px solid var(--md-outline-var)}
  body[data-nav="classic"][data-nav-pos="top"] .navrail{top:64px;bottom:auto;left:0;right:0;width:auto;height:var(--nav-h);flex-direction:row;justify-content:center;gap:4px;border-right:0;border-bottom:1px solid var(--md-outline-var)}
  body[data-nav="classic"][data-nav-pos="bottom"] .navrail{top:auto;bottom:0;left:0;right:0;width:auto;height:var(--nav-h);flex-direction:row;justify-content:center;gap:4px;border-right:0;border-top:1px solid var(--md-outline-var)}
  body[data-nav="classic"][data-nav-pos="top"] .rail-btn,
  body[data-nav="classic"][data-nav-pos="bottom"] .rail-btn{width:auto;flex:1 1 0;min-width:0;max-width:132px}
  body[data-nav="classic"][data-nav-pos="top"] .rail-label,
  body[data-nav="classic"][data-nav-pos="bottom"] .rail-label{line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
}

/* ===== Дизайн «плаваюча пігулка» ===== */
body[data-nav="pill"]{--pill-bg:#151319;--pill-on:#f5f2f8}
body[data-nav="pill"]:not(.dark){--pill-bg:#f6f3f9;--pill-on:#1c1b20}
.pill-drop{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  background:var(--md-primary);opacity:0;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  transition:transform .45s cubic-bezier(.34,1.4,.44,1),opacity .2s ease,width .2s,height .2s;
}
.pill-drop.on{opacity:1}
body[data-nav="pill"] .rail-ico,body[data-nav="pill"] .rail-label{position:relative;z-index:1}
body[data-nav="pill"] .rail-btn.active .rail-ico{background:transparent}
@media(min-width:761px){
  body[data-nav="pill"] .navrail{background:var(--pill-bg);color:var(--pill-on);border:1px solid var(--md-outline-var);box-shadow:0 14px 34px rgba(0,0,0,.28);overflow:visible}
  body[data-nav="pill"] .rail-btn{color:var(--pill-on);overflow:visible}
  body[data-nav="pill"] .rail-btn:hover{background:rgba(128,128,128,.15)}
  body[data-nav="pill"] .rail-btn.active{color:var(--pill-on)}
  body[data-nav="pill"][data-nav-pos="left"] .navrail{left:12px;top:76px;bottom:12px;width:var(--nav-w);border-radius:28px}
  body[data-nav="pill"][data-nav-pos="right"] .navrail{left:auto;right:12px;top:76px;bottom:12px;width:var(--nav-w);border-radius:28px;border-right:1px solid var(--md-outline-var);border-left:0}
  body[data-nav="pill"][data-nav-pos="top"] .navrail{left:50%;transform:translateX(-50%);top:76px;bottom:auto;width: 94vw;width: min(94vw,680px);height:calc(var(--nav-h) + 6px);flex-direction:row;justify-content:space-around;border-radius:999px;padding:0 8px}
  body[data-nav="pill"][data-nav-pos="bottom"] .navrail{left:50%;transform:translateX(-50%);top:auto;bottom:12px;width: 94vw;width: min(94vw,680px);height:calc(var(--nav-h) + 6px);flex-direction:row;justify-content:space-around;border-radius:999px;padding:0 8px}
  body[data-nav="pill"][data-nav-pos="top"] .rail-btn,
  body[data-nav="pill"][data-nav-pos="bottom"] .rail-btn{width:auto;flex:1 1 0;min-width:0;height:100%}
  body[data-nav="pill"][data-nav-pos="top"] .rail-label,
  body[data-nav="pill"][data-nav-pos="bottom"] .rail-label{line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
}

/* ===== Мобільна панель (фикс обрезки подписей) ===== */
@media(max-width:760px){
  .navrail{
    top:auto;bottom:0;left:0;right:0;width:auto;
    height:calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding:0 4px env(safe-area-inset-bottom);
    flex-direction:row;justify-content:space-around;
    border-right:0;border-top:1px solid var(--md-outline-var);
  }
  .rail-btn{width:auto;flex:1 1 0;min-width:0}
  .rail-label{line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
  main{padding:20px 12px calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px) 12px!important}
  body[data-nav-pos="top"] .navrail{top:64px;bottom:auto;border-top:0;border-bottom:1px solid var(--md-outline-var)}
  body[data-nav-pos="top"] main{padding-top:calc(var(--nav-h) + 24px)!important;padding-bottom:24px!important}

  body[data-nav="pill"] .navrail{
    left:50%;transform:translateX(-50%);right:auto;
    bottom:calc(10px + env(safe-area-inset-bottom));
    width: 94vw;    width: min(94vw,560px);height:calc(var(--nav-h) + 6px);
    border:1px solid var(--md-outline-var);border-radius:999px;
    background:var(--pill-bg);color:var(--pill-on);
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    padding:0 8px;overflow:visible;
  }
  body[data-nav="pill"][data-nav-pos="top"] .navrail{top:70px;bottom:auto}
  body[data-nav="pill"][data-nav-pos="left"] .navrail,
  body[data-nav="pill"][data-nav-pos="right"] .navrail{top:auto;bottom:calc(10px + env(safe-area-inset-bottom))}
  body[data-nav="pill"] .rail-btn{color:var(--pill-on);overflow:visible}
  body[data-nav="pill"] .rail-btn.active{color:var(--pill-on)}
  body[data-nav="pill"] main{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 34px)!important}
  body[data-nav="pill"][data-nav-pos="top"] main{padding-bottom:24px!important;padding-top:calc(var(--nav-h) + 34px)!important}
}

/* ===== Layout ===== */
main{max-width:1200px;margin:0 auto;padding:24px 16px 80px var(--nav-w)}
.view{display:none;animation:mdfade .25s ease}
.view.active{display:block}
@keyframes mdfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.section-head{display:flex;align-items:center;gap:12px;margin:4px 0 20px}
.section-head h2{margin:0;font-size:24px;font-weight:400;letter-spacing:.25px}

/* ===== Buttons (Material) ===== */
.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--md-font);font-size:14px;font-weight:500;letter-spacing:.1px;
  height:40px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;transition:box-shadow .2s,background .2s;
}
.btn.contained{background:var(--md-primary);color:var(--md-on-primary)}
.btn.contained:hover{box-shadow:var(--md-elev1)}
.btn.outlined{background:transparent;border:1px solid var(--md-outline);color:var(--md-primary)}
.btn.outlined:hover{background:rgba(103,80,164,.08)}
.btn.outlined.danger{border-color:var(--md-error);color:var(--md-error)}
.btn.outlined.danger:hover{background:rgba(179,38,30,.08)}
.btn.text{background:transparent;color:var(--md-primary);padding:0 12px;height:36px}
.btn.text:hover{background:rgba(103,80,164,.08)}
.btn:disabled{background:var(--md-surface-dim);color:var(--md-on-surface-var);opacity:.6;cursor:not-allowed;box-shadow:none}
.btn .material-icons{font-size:18px}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .5s ease-out;pointer-events:none}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ===== Chips ===== */
.md-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:6px 12px;border-radius:8px;border:1px solid var(--md-outline-var);color:var(--md-on-surface-var);background:var(--md-surface)}
.md-chip .material-icons{font-size:15px}
.md-chip.ready{color:var(--md-success);border-color:var(--md-success);background:#E6F4EA}
.md-chip.error{color:var(--md-error);border-color:var(--md-error);background:#FCE8E6}
.md-chip.loading{color:var(--md-secondary);background:var(--md-secondary-container)}

/* ===== Hero + cards ===== */
.hero{text-align:center;padding:40px 16px 28px}
.hero h2{font-size: 5vw;font-size: clamp(28px,5vw,44px);font-weight:400;letter-spacing:.25px;margin:0 0 12px;color:var(--md-on-surface)}
.hero p{color:var(--md-on-surface-var);max-width:640px;margin:0 auto 24px;font-size:16px;line-height:1.6}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.hero-cta .btn{flex:0 1 auto;white-space:nowrap;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px}
.card{background:var(--md-surface);border-radius:var(--md-radius);overflow:hidden}
.elev1{box-shadow:var(--md-elev1)}
.elev2{box-shadow:var(--md-elev2)}
.card[data-goto]{cursor:pointer;transition:box-shadow .2s,transform .2s;padding:24px}
.card[data-goto]:hover{box-shadow:var(--md-elev3);transform:translateY(-2px)}
.card-ico{font-size:36px;width:56px;height:56px;border-radius:16px;background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;margin-bottom:16px}
.card h3{margin:0 0 6px;font-size:18px;font-weight:500}
.card p{margin:0;color:var(--md-on-surface-var);font-size:14px;line-height:1.5}

/* ===== Python ===== */
.py-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media(max-width:880px){.py-layout{grid-template-columns:1fr}}
.card-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--md-outline-var);flex-wrap:wrap}
.bar-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--md-on-surface-var)}
.bar-title .material-icons{font-size:18px;color:var(--md-primary)}
.bar-actions{display:flex;align-items:center;gap:8px}
.md-select{font-family:var(--md-font);font-size:13px;color:var(--md-surface);background:var(--md-surface-dim);border:1px solid var(--md-outline-var);border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--md-on-surface)}
.editor-wrap{display:flex;background:#1E1E2E}
.line-numbers{padding:16px 10px 16px 14px;color:#6C7086;font-family:var(--md-mono);font-size:var(--editor-font);line-height:1.6;text-align:right;user-select:none;min-width:44px;border-right:1px solid #313244}
#code{flex:1;background:transparent;border:0;outline:none;color:#CDD6F4;font-family:var(--md-mono);font-size:var(--editor-font);line-height:1.6;padding:16px;resize:vertical;min-height:300px;tab-size:var(--tab-size)}
body.no-linenumbers .line-numbers{display:none}
body.no-wrap #code{white-space:pre;overflow-x:auto}
body.no-hints .hint-bar{display:none}
.console{display:block;flex:1;background:#11111B;color:#A6E3A1;font-family:var(--md-mono);font-size:13px;line-height:1.6;padding:16px;min-height:300px;white-space:pre-wrap;word-break:break-word;overflow:auto}
.console .err{color:#F38BA8}
.hint-bar{border-top:1px solid var(--md-outline-var);padding:12px 16px;background:var(--md-surface)}
.hint-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--md-on-surface-var)}
.hint-label .material-icons{font-size:16px;color:#B08900}
.hint-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{font-family:var(--md-mono);font-size:12px;color:var(--md-on-secondary-container);background:var(--md-secondary-container);border:0;border-radius:8px;padding:6px 12px;cursor:pointer;transition:.15s}
.chip:hover{box-shadow:var(--md-elev1);filter:brightness(1.05)}
.autocomplete{position:absolute;background:var(--md-surface);border-radius:12px;box-shadow:var(--md-elev3);z-index:50;max-height:220px;overflow:auto;display:none;min-width:180px;padding:6px 0}
.autocomplete div{padding:9px 16px;cursor:pointer;font-family:var(--md-mono);font-size:13px;color:var(--md-on-surface)}
.autocomplete div:hover,.autocomplete div.sel{background:var(--md-primary-container);color:var(--md-on-primary-container)}

/* ===== Games ===== */
.games-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.game-card{background:var(--md-surface);border-radius:var(--md-radius);box-shadow:var(--md-elev1);padding:24px;text-align:center;cursor:pointer;transition:box-shadow .2s,transform .2s}
.game-card:hover{box-shadow:var(--md-elev3);transform:translateY(-2px)}
.game-card .ico{font-size:44px}
.game-card h3{margin:12px 0 4px;font-size:16px;font-weight:500}
.game-card p{margin:0;color:var(--md-on-surface-var);font-size:13px}
.game-card .best{margin-top:10px;font-size:12px;font-weight:500;color:var(--md-primary);background:var(--md-primary-container);display:inline-block;padding:4px 10px;border-radius:999px}
.game-stage{padding:20px}
.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.game-title{font-size:20px;font-weight:500;margin:0}
.game-score{font-size:14px;color:var(--md-on-surface-var);font-weight:500;background:var(--md-surface-dim);padding:6px 12px;border-radius:999px}
.game-area{display:flex;flex-direction:column;align-items:center;gap:16px}
.ttt{display:grid;grid-template-columns:repeat(3,88px);gap:8px}
.ttt button{width:88px;height:88px;font-size:40px;font-family:var(--md-font);border-radius:12px;background:var(--md-surface-dim);border:0;color:var(--md-on-surface);cursor:pointer;transition:.15s}
.ttt button:hover{background:var(--md-primary-container)}
.mem{display:grid;grid-template-columns:repeat(4,72px);gap:8px}
.mem .mcard{width:72px;height:72px;border-radius:12px;background:var(--md-primary);display:grid;place-items:center;font-size:30px;cursor:pointer;color:transparent;user-select:none;transition:.2s}
.mem .mcard.flip{background:var(--md-surface-dim);color:var(--md-on-surface)}
.mem .mcard.done{opacity:.45;cursor:default}
.g2048{display:grid;grid-template-columns:repeat(4,74px);gap:8px;background:var(--md-surface-dim);padding:8px;border-radius:12px}
.g2048 .cell{width:74px;height:74px;border-radius:8px;background:#cdc1b4;display:grid;place-items:center;font-weight:700;font-size:22px;color:#776e65;transition:.1s}
#snakeCanvas{background:#11111B;border-radius:12px;touch-action:none}
.rps{display:flex;gap:12px}
.rps button{font-size:40px;width:80px;height:80px;border-radius:16px;background:var(--md-surface-dim);border:0;cursor:pointer;transition:.15s}
.rps button:hover{background:var(--md-primary-container)}
.react-box{width:300px;height:190px;border-radius:16px;display:grid;place-items:center;font-size:20px;font-weight:500;cursor:pointer;background:var(--md-surface-dim);color:var(--md-on-surface);text-align:center;padding:12px;user-select:none;transition:background .1s}
.react-box.wait{background:#F9AB00;color:#201A00}
.react-box.go{background:#188038;color:#fff}
.dpad{display:grid;grid-template-columns:repeat(3,56px);gap:6px}
.dpad button{height:46px;border-radius:12px;background:var(--md-surface-dim);border:0;color:var(--md-on-surface);font-size:18px;cursor:pointer}
.dpad button:active{background:var(--md-primary-container)}

/* ===== Auth / profile ===== */
.auth-panel{max-width:420px;margin:0 auto;padding:24px}
.auth-tabs{display:flex;gap:8px;margin-bottom:20px;background:var(--md-surface-dim);border-radius:999px;padding:4px}
.tab-btn{flex:1;border:0;background:transparent;color:var(--md-on-surface-var);font-family:var(--md-font);font-weight:500;font-size:14px;padding:10px;border-radius:999px;cursor:pointer;transition:.2s}
.tab-btn.active{background:var(--md-primary);color:var(--md-on-primary)}
.auth-form{display:flex;flex-direction:column;gap:18px}
.field{position:relative}
.field input{width:100%;font-family:var(--md-font);font-size:15px;color:var(--md-on-surface);background:var(--md-surface-dim);border:0;border-bottom:2px solid var(--md-outline);border-radius:8px 8px 0 0;padding:22px 16px 8px;outline:none;transition:border-color .2s}
.field input:focus{border-bottom-color:var(--md-primary)}
.field label{position:absolute;left:16px;top:16px;color:var(--md-on-surface-var);font-size:15px;pointer-events:none;transition:.18s ease}
.field input:focus+label,.field input:not(:placeholder-shown)+label{top:6px;font-size:11px;color:var(--md-primary)}
.auth-msg{margin:0;font-size:13px;min-height:18px}
.auth-msg.ok{color:var(--md-success)}
.auth-msg.err{color:var(--md-error)}
.auth-note{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:12px;color:var(--md-on-surface-var)}
.auth-note .material-icons{font-size:16px}
.profile-panel{max-width:640px;margin:0 auto;padding:24px}
.profile-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.profile-head h3{margin:0;font-size:22px;font-weight:500}
.profile-head .btn{margin-left:auto}
.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.record{background:var(--md-surface-dim);border-radius:12px;padding:16px;text-align:center}
.record .g{font-size:13px;color:var(--md-on-surface-var)}
.record .v{font-size:24px;font-weight:500;color:var(--md-primary);margin-top:6px}

/* ===== Snackbar ===== */
.snackbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(24px);background:#322F35;color:#F5EFF7;padding:14px 20px;border-radius:8px;box-shadow:var(--md-elev3);opacity:0;pointer-events:none;transition:.28s;z-index:60;font-size:14px;letter-spacing:.25px;max-width:90vw}
.snackbar.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Settings ===== */
.settings-card{max-width:640px;margin:0 auto;padding:8px 0 16px}
.settings-group{margin:20px 16px 8px;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--md-primary)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--md-outline-var)}
.setting-row:last-of-type{border-bottom:0}
.setting-name{font-size:15px;color:var(--md-on-surface)}
.about-text{display:flex;align-items:center;gap:10px;margin:8px 16px 0;color:var(--md-on-surface-var);font-size:14px;line-height:1.5}
.about-text .material-icons{color:var(--md-primary)}
.switch{position:relative;display:inline-block;width:52px;height:32px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--md-surface-dim);border:2px solid var(--md-outline);border-radius:999px;cursor:pointer;transition:.2s}
.track::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--md-outline);transition:.2s}
.switch input:checked+.track{background:var(--md-primary);border-color:var(--md-primary)}
.switch input:checked+.track::after{width:24px;height:24px;top:2px;left:24px;background:var(--md-on-primary)}

/* ===== Dark theme ===== */
body.dark{
  --md-primary:#D0BCFF;--md-primary-rgb:208,188,255;
  --md-on-primary:#381E72;
  --md-primary-container:#4F378B;
  --md-on-primary-container:#EADDFF;
  --md-secondary-container:#4A4458;
  --md-on-secondary-container:#E8DEF8;
  --md-surface:#171223;
  --md-surface-dim:#241E30;
  --md-background:#141021;
  --md-on-surface:#E6E0E9;
  --md-on-surface-var:#CAC4D0;
  --md-outline:#938F99;
  --md-outline-var:#49454F;--md-outline-var-rgb:73,69,79;
  --md-error:#F2B8B5;--md-error-rgb:242,184,181;
  --md-success:#7FCB9A;
}
body.dark .rail-btn:hover,body.dark .icon-btn:hover,body.dark .chip-btn:hover{background:rgba(230,224,233,.10)}
body.dark .btn.text:hover{background:rgba(230,224,233,.10)}
body.dark .md-chip.ready{background:#1E3A29}
body.dark .md-chip.error{background:#41272B}
body.dark .md-chip.loading{background:var(--md-secondary-container)}
body.dark .mp-btn:hover{background:rgba(230,224,233,.10)}
body.dark .mp-track:hover{background:rgba(230,224,233,.08)}
body.dark .mp-ctrls button:hover{background:rgba(230,224,233,.10)}

.footer{text-align:center;padding:24px;color:var(--md-on-surface-var);font-size:13px;border-top:1px solid var(--md-outline-var)}

/* ===== Background FX ===== */
.bg-fx{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(60% 50% at 20% 10%,rgba(103,80,164,.20),transparent 60%),
             radial-gradient(50% 40% at 85% 80%,rgba(34,211,238,.14),transparent 60%);}
body.bg-glow-on .bg-glow{opacity:1}
.blob{position:absolute;width:38vmax;height:38vmax;border-radius:50%;filter:blur(90px);opacity:0;transition:opacity .4s}
body.bg-animate-on .blob{opacity:.16;animation:blobfloat 20s ease-in-out infinite}
.b1{background:var(--md-primary);top:-12vmax;left:-10vmax}
.b2{background:#22d3ee;bottom:-14vmax;right:-10vmax;animation-delay:-7s}
.b3{background:#f0b429;top:45%;left:55%;animation-delay:-13s}
@keyframes blobfloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vmax,-4vmax) scale(1.12)}}
.cursor-glow{position:absolute;top:0;left:0;width:500px;height:500px;border-radius:50%;opacity:0;transition:opacity .3s;background:radial-gradient(circle,rgba(103,80,164,.28),transparent 65%);will-change:transform}
body.cursor-glow-on .cursor-glow{opacity:1}
main,.footer{position:relative;z-index:1}
.appbar,.navrail{z-index:30}

/* ===== Accent palettes ===== */
body[data-accent="blue"]{--md-primary:#1565C0;--md-primary-rgb:21,101,192;--md-primary-container:#D6E3FF;--md-on-primary-container:#001B3F;--md-on-primary:#fff;--md-secondary-container:#DCE2F0;--md-on-secondary-container:#101C2C}
body[data-accent="green"]{--md-primary:#2E7D32;--md-primary-rgb:46,125,50;--md-primary-container:#C8F0CC;--md-on-primary-container:#002106;--md-on-primary:#fff;--md-secondary-container:#DCE8DC;--md-on-secondary-container:#102010}
body[data-accent="orange"]{--md-primary:#E65100;--md-primary-rgb:230,81,0;--md-primary-container:#FFDCC5;--md-on-primary-container:#331200;--md-on-primary:#fff;--md-secondary-container:#F5DFD2;--md-on-secondary-container:#201A16}
body[data-accent="pink"]{--md-primary:#C2185B;--md-primary-rgb:194,24,91;--md-primary-container:#FFD9E2;--md-on-primary-container:#3E001D;--md-on-primary:#fff;--md-secondary-container:#F2DCE2;--md-on-secondary-container:#27191C}
body[data-accent="cyan"]{--md-primary:#0097A7;--md-primary-rgb:0,151,167;--md-primary-container:#CFF7FA;--md-on-primary-container:#002629;--md-on-primary:#fff;--md-secondary-container:#D6EBEE;--md-on-secondary-container:#0C2022}
body[data-accent="red"]{--md-primary:#C62828;--md-primary-rgb:198,40,40;--md-primary-container:#FFDAD6;--md-on-primary-container:#410002;--md-on-primary:#fff;--md-secondary-container:#F7DBD7;--md-on-secondary-container:#241311}
body[data-accent="gold"]{--md-primary:#F57C00;--md-primary-rgb:245,124,0;--md-primary-container:#FFE1B9;--md-on-primary-container:#2D1600;--md-on-primary:#fff;--md-secondary-container:#F9E2CD;--md-on-secondary-container:#201300}
body[data-accent="mint"]{--md-primary:#00796B;--md-primary-rgb:0,121,107;--md-primary-container:#B7F0E2;--md-on-primary-container:#002019;--md-on-primary:#fff;--md-secondary-container:#D8EBE3;--md-on-secondary-container:#0E1E19}
body.dark[data-accent="blue"]{--md-primary:#9CCAFF;--md-primary-rgb:156,202,255;--md-on-primary:#003062;--md-primary-container:#004888;--md-on-primary-container:#D6E3FF}
body.dark[data-accent="green"]{--md-primary:#8ED99A;--md-primary-rgb:142,217,154;--md-on-primary:#00390F;--md-primary-container:#00531A;--md-on-primary-container:#C8F0CC}
body.dark[data-accent="orange"]{--md-primary:#FFB59C;--md-primary-rgb:255,181,156;--md-on-primary:#572000;--md-primary-container:#7A2F00;--md-on-primary-container:#FFDCC5}
body.dark[data-accent="pink"]{--md-primary:#FFB1C8;--md-primary-rgb:255,177,200;--md-on-primary:#63002E;--md-primary-container:#8E0044;--md-on-primary-container:#FFD9E2}
body.dark[data-accent="cyan"]{--md-primary:#80D8E4;--md-primary-rgb:128,216,228;--md-on-primary:#00363C;--md-primary-container:#004E56;--md-on-primary-container:#CFF7FA}
body.dark[data-accent="red"]{--md-primary:#FFB4AB;--md-primary-rgb:255,180,171;--md-on-primary:#690005;--md-primary-container:#93000A;--md-on-primary-container:#FFDAD6}
body.dark[data-accent="gold"]{--md-primary:#FFB86B;--md-primary-rgb:255,184,107;--md-on-primary:#4B2B00;--md-primary-container:#6B3F00;--md-on-primary-container:#FFE1B9}
body.dark[data-accent="mint"]{--md-primary:#93D4C4;--md-primary-rgb:147,212,196;--md-on-primary:#00332A;--md-primary-container:#004B3E;--md-on-primary-container:#B7F0E2}

/* ===== Reduce motion / compact ===== */
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important}
body.compact main{padding-top:12px}
body.compact .card-bar,body.compact .setting-row{padding:8px 12px}
body.compact .hero{padding:20px 12px 16px}
body.compact .btn{height:34px}

/* ===== Range control ===== */
.range-box{display:flex;align-items:center;gap:12px;min-width:180px}
.range-box input[type=range]{flex:1;accent-color:var(--md-primary);cursor:pointer}
.range-val{font-size:12px;color:var(--md-on-surface-var);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.about-card{margin-top:16px}

/* ===== Lang switch fade ===== */
.appbar,.navrail,main{transition:opacity .18s ease,transform .18s ease}
body.lang-fade .appbar,body.lang-fade .navrail,body.lang-fade main{opacity:0;transform:translateY(6px)}

/* ===== Simon / Mines / Guess ===== */
.simon{display:grid;grid-template-columns:repeat(2,110px);gap:10px}
.simon button{width:110px;height:110px;border-radius:16px;border:0;cursor:pointer;opacity:.55;transition:.12s}
.simon button.lit{opacity:1;transform:scale(1.06);box-shadow:var(--md-elev2)}
.mines{display:grid;grid-template-columns:repeat(9,34px);gap:3px}
.mines button{width:34px;height:34px;border-radius:6px;border:0;background:var(--md-surface-dim);cursor:pointer;font-size:15px;font-weight:700;color:var(--md-on-surface);font-family:var(--md-font);padding:0}
.mines button.op{background:var(--md-primary-container);cursor:default}
.mines button.fl{background:var(--md-secondary-container)}
.mines button.n1{color:#1565C0}.mines button.n2{color:#2E7D32}.mines button.n3{color:#C62828}
.guess{display:flex;gap:10px;align-items:center}
.guess input{width:120px;font-family:var(--md-font);font-size:16px;padding:10px 12px;border-radius:8px;border:1px solid var(--md-outline-var);background:var(--md-surface-dim);color:var(--md-on-surface);outline:none}

/* ===== Onboarding modal ===== */
.ob-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;animation:mdfade .25s ease}
.ob-card{background:var(--md-surface);color:var(--md-on-surface);border-radius:24px;box-shadow:var(--md-elev3);max-width:460px;width:100%;padding:28px 24px;text-align:center}
.ob-emoji{font-size:64px;line-height:1;margin-bottom:12px}
.ob-card h3{margin:0 0 8px;font-size:22px;font-weight:500}
.ob-card p{margin:0 0 18px;color:var(--md-on-surface-var);font-size:14px;line-height:1.6}
.ob-langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px;max-height:44vh;overflow:auto;padding:2px;margin-bottom:8px}
.ob-langs button{font-family:var(--md-font);font-size:15px;font-weight:500;padding:10px 12px;border-radius:14px;border:1px solid var(--md-outline-var);background:var(--md-surface-dim);color:var(--md-on-surface);cursor:pointer;transition:.15s;text-align:center}
.ob-langs button:hover{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.ob-langs button.is-current{border-color:var(--md-primary);background:var(--md-primary-container);color:var(--md-on-primary-container);font-weight:600}
.ob-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ob-input{width:100%;font-family:var(--md-font);font-size:15px;color:var(--md-on-surface);background:var(--md-surface-dim);border:1px solid var(--md-outline-var);border-radius:10px;padding:12px 14px;outline:none;margin-bottom:16px;transition:border-color .2s;text-align:center}
.ob-input:focus{border-color:var(--md-primary)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0 18px}
.emoji-btn{font-size:26px;width:100%;aspect-ratio:1;border-radius:12px;border:1px solid var(--md-outline-var);background:var(--md-surface-dim);cursor:pointer;transition:.15s;display:grid;place-items:center;padding:0}
.emoji-btn:hover{background:var(--md-primary-container);transform:scale(1.08)}
#avatarBig{cursor:pointer;transition:transform .15s}
#avatarBig:hover{transform:scale(1.06)}
#profileDisplayName{cursor:pointer}
#avatarTop{cursor:pointer}
@media(max-width:480px){.emoji-grid{grid-template-columns:repeat(5,1fr)}}

/* ===== Liquid Glass ===== */
body.glass-on{--glass-bg:rgba(254,247,255,.55);--glass-brd:rgba(255,255,255,.35)}
body.dark.glass-on{--glass-bg:rgba(23,18,35,.55);--glass-brd:rgba(255,255,255,.10)}
body.glass-on .appbar,body.glass-on .navrail,body.glass-on .card,body.glass-on .ob-card,body.glass-on .snackbar,body.glass-on .autocomplete,body.glass-on #musicPanel{
  background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
}
body.glass-on .appbar{box-shadow:none;border-bottom:1px solid var(--glass-brd)}
body.glass-on .navrail{border-color:var(--glass-brd)}
body.glass-on .card{box-shadow:0 8px 32px rgba(0,0,0,.14);border:1px solid var(--glass-brd)}
body.glass-on .ob-card{box-shadow:0 12px 40px rgba(0,0,0,.25);border:1px solid var(--glass-brd)}

/* ===== Learn cards ===== */
#learnSection{display:contents}
.learn-card{padding:24px}
.learn-ico{font-size:34px;width:56px;height:56px;border-radius:16px;background:var(--md-primary-container);display:grid;place-items:center;margin-bottom:16px}
.learn-card h3{margin:0 0 8px;font-size:18px;font-weight:500}
.learn-card p{margin:0;color:var(--md-on-surface-var);font-size:14px;line-height:1.6}

/* ===== Tools ===== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}
.tool-card{padding:20px}
.tool-card .bar-title{margin-bottom:14px}
.calc-display{background:var(--md-surface-dim);border:1px solid var(--md-outline-var);border-radius:12px;padding:14px 16px;font-family:var(--md-mono);font-size:26px;text-align:right;min-height:58px;word-break:break-all;margin-bottom:12px;color:var(--md-on-surface)}
.calc-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calc-pad button{height:52px;border-radius:12px;border:0;background:var(--md-surface-dim);color:var(--md-on-surface);font-size:18px;font-family:var(--md-font);cursor:pointer;transition:.15s;padding:0}
.calc-pad button:hover{background:var(--md-primary-container)}
.calc-pad button.op{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.calc-pad button.eq{background:var(--md-primary);color:var(--md-on-primary)}
.conv-row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.md-input{flex:1;min-width:90px;font-family:var(--md-font);font-size:15px;padding:10px 12px;border-radius:8px;border:1px solid var(--md-outline-var);background:var(--md-surface-dim);color:var(--md-on-surface);outline:none}
.md-input:focus{border-color:var(--md-primary)}
.conv-result{font-size:20px;font-weight:500;text-align:center;padding:12px;background:var(--md-primary-container);border-radius:12px;color:var(--md-on-primary-container);word-break:break-all}
.rand-block{margin-bottom:18px}
.rand-block:last-child{margin-bottom:0}
.rand-label{font-size:13px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:var(--md-on-surface-var);margin-bottom:10px}
.rand-out{font-size:22px;font-weight:500;text-align:center;padding:12px;background:var(--md-surface-dim);border-radius:12px;margin-top:10px;min-height:48px;color:var(--md-on-surface)}
.pwd-len{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pwd-len label{font-size:13px;color:var(--md-on-surface-var);white-space:nowrap}
.pwd-len input[type=range]{flex:1;accent-color:var(--md-primary)}
.pwd-out{font-family:var(--md-mono);font-size:16px;text-align:center;padding:12px;background:var(--md-surface-dim);border-radius:12px;margin-bottom:12px;word-break:break-all;min-height:46px;color:var(--md-on-surface);user-select:all}
.pwd-btns{display:flex;gap:8px}
.pwd-btns .btn{flex:1}

/* ===== Pomodoro ===== */
.pomo{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0}
.pomo-ring{position:relative;width:170px;height:170px}
.pomo-ring svg{transform:rotate(-90deg);display:block}
.pomo-ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.pomo-ring .bg{stroke:var(--md-outline-var)}
.pomo-ring .fg{stroke:var(--md-primary);transition:stroke-dashoffset .8s linear}
.pomo-time{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:32px;font-weight:500;color:var(--md-on-surface);font-variant-numeric:tabular-nums;font-family:var(--md-mono)}
.pomo-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pomo-mode{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pomo-mode button{padding:6px 14px;border-radius:999px;border:1px solid var(--md-outline-var);background:var(--md-surface);color:var(--md-on-surface);font-family:var(--md-font);font-size:13px;cursor:pointer}
.pomo-mode button.active{background:var(--md-primary);color:var(--md-on-primary);border-color:var(--md-primary)}

/* ===== Feedback ===== */
.feedback-card{max-width:860px;margin:0 auto;padding:0 0 16px}
.feedback-card .card-bar{position:relative}
.bar-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
@media(max-width:640px){.feedback-card .bar-center{position:static;transform:none;margin-left:auto}}
.feedback-intro{margin:16px 16px 0;color:var(--md-on-surface-var);font-size:14px;line-height:1.6}
.feedback-body{margin:16px}
.feedback-frame{width:100%;height:1400px;border:0;border-radius:12px;background:var(--md-surface-dim);display:block}
.feedback-empty{text-align:center;padding:48px 16px;color:var(--md-on-surface-var)}
.feedback-empty .material-icons{font-size:48px;color:var(--md-primary)}
.feedback-empty h3{margin:12px 0 6px;font-size:18px;font-weight:500;color:var(--md-on-surface)}
.feedback-empty p{margin:0;font-size:14px}
.feedback-note{margin:16px}

/* ===== Secret room ===== */
.secret-imgs{display:flex;flex-direction:column;gap:6px;margin:4px 0 16px}
.secret-img{width:100%;border-radius:12px;border:1px solid var(--md-outline-var)}
.secret-cap{font-size:12px;color:var(--md-on-surface-var);margin:0 0 8px}

/* ===== Music panel (редизайн) ===== */
#musicPanel{
  --mp-bottom: 16vh;  --mp-bottom: clamp(88px,16vh,190px);
  position:fixed;right:16px;bottom:var(--mp-bottom);z-index:55;
  width: 400px;  width: min(400px,calc(100vw - 32px));max-height:min(78vh,640px,calc(100vh - var(--mp-bottom) - 24px));
  max-height:min(78dvh,640px,calc(100dvh - var(--mp-bottom) - 24px));
  display:none;flex-direction:column;
  background:var(--md-surface);border:1px solid var(--md-outline-var);border-radius:24px;
  box-shadow:var(--md-elev3);overflow:hidden;
}
#musicPanel.show{display:flex;animation:mpin .25s ease}
@keyframes mpin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.mp-hero-wrap{position:relative;height:150px;flex:none;overflow:hidden;touch-action:none;cursor:grab}
#musicPanel.dragging .mp-hero-wrap{cursor:grabbing}
.mp-hero{position:absolute;top:-24px;right:-24px;bottom:-24px;left:-24px;background-size:cover;background-position:center;filter:blur(26px) saturate(1.4);transform:scale(1.1)}
.mp-hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,rgba(0,0,0,.5),rgba(0,0,0,.18))}
.mp-hero-front{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:96px;height:96px;border-radius:16px;background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.mp-hero-text{position:absolute;left:126px;right:16px;top:50%;transform:translateY(-50%);color:#fff}
.mp-hero-t{font-size:17px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-hero-a{font-size:12px;opacity:.9;margin-top:2px}
.mp-progress{display:flex;align-items:center;gap:8px;padding:10px 16px 4px;font-size:11px;color:var(--md-on-surface-var);font-variant-numeric:tabular-nums;flex:none}
.mp-progress input[type=range]{flex:1;accent-color:var(--md-primary);height:4px;cursor:pointer}
.mp-body{padding:4px 8px;overflow-y:auto;min-height:0;flex:1}
.mp-list{display:flex;flex-direction:column;gap:2px}
.mp-track{display:flex;align-items:center;gap:10px;text-align:left;border:0;background:transparent;border-radius:12px;padding:6px 8px;cursor:pointer;font-family:var(--md-font);width:100%}
.mp-track:hover{background:var(--md-surface-dim)}
.mp-track.playing{background:var(--md-primary-container)}
.mp-track.playing .t,.mp-track.playing .a{color:var(--md-on-primary-container)}
.mp-cover{width:44px;height:44px;flex:none;border-radius:10px;background-size:cover;background-position:center;box-shadow:var(--md-elev1)}
.mp-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mp-track .t{font-size:14px;font-weight:500;color:var(--md-on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-track .a{font-size:12px;color:var(--md-on-surface-var);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-like{margin-left:auto;flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--md-on-surface-var);cursor:pointer;display:grid;place-items:center}
.mp-like .material-icons{font-size:18px}
.mp-track.liked .mp-like{color:var(--md-error)}
.mp-extra{display:flex;justify-content:center;gap:10px;padding:6px 12px 0;flex:none}
.mp-extra .icon-btn.on{color:var(--md-primary);background:var(--md-primary-container);opacity:1}
.mp-ctrls{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0 10px;flex:none}
.mp-ctrls button{border:0;background:transparent;color:var(--md-on-surface);cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:.15s}
.mp-ctrls button:hover{background:var(--md-surface-dim)}
.mp-ctrls button .material-icons{font-size:24px}
.mp-ctrls .big{width:56px;height:56px;background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--md-elev2)}
.mp-ctrls .big:hover{background:var(--md-primary);filter:brightness(1.08)}
.mp-ctrls .big .material-icons{font-size:30px}
.mp-foot{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--md-outline-var);flex:none}
.mp-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:999px;border:1px solid var(--md-outline-var);background:transparent;color:var(--md-on-surface-var);font-family:var(--md-font);font-size:13px;font-weight:500;cursor:pointer;transition:.2s}
.mp-btn:hover{background:rgba(29,27,32,.06)}
.mp-btn .material-icons{font-size:18px}
.mp-btn.off{color:var(--md-error);border-color:var(--md-error)}
.mp-btn.off:hover{background:rgba(179,38,30,.08)}
@media(max-width:640px){#musicPanel{left:8px;right:8px;bottom:8px;width:auto;max-height:70vh}
  .mp-hero-wrap{touch-action:auto;cursor:default}}

/* ===== Focus mode ===== */
body.focus-mode .appbar,body.focus-mode .navrail,body.focus-mode .footer{display:none}
body.focus-mode main{padding:16px!important;max-width:900px}

/* ===== Teacher greeting ===== */
.teacher-greet{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:none;place-items:center;padding:24px;
  background:linear-gradient(135deg,#6750A4 0%,#22d3ee 100%);
  opacity:0;transition:opacity .45s ease;overflow:hidden;
}
.teacher-greet.show{opacity:1}
.teacher-card{
  background:#fff;color:#1a1a1a;border-radius:28px;max-width:520px;width:100%;
  padding:40px 32px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:scale(.9);transition:transform .6s cubic-bezier(.2,.9,.3,1.3);
  max-height:90vh;overflow-y:auto;
}
.teacher-greet.show .teacher-card{transform:scale(1)}
.teacher-flower{font-size:76px;line-height:1;margin-bottom:8px;animation:bloom 1.6s ease-out}
.teacher-card h2{margin:0 0 10px;font-size:28px;font-weight:600}
.teacher-card .to{font-size:18px;color:#6750A4;font-weight:500;margin-bottom:18px}
.teacher-card p{margin:0 0 14px;line-height:1.6;font-size:15px}
.teacher-card .signature{font-style:italic;color:#666;margin-top:14px;font-size:14px}
.teacher-close{margin-top:16px}
@keyframes bloom{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.15) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.confetti{position:absolute;width:8px;height:14px;top:-20px;opacity:.9;animation:fall 3s linear forwards;pointer-events:none;border-radius:2px}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ===== Режим проєктора / інтерактивної дошки =====
   Зумимо шапку, панель і вміст ОДНАКОВО: якщо лишити шапку поза масштабом,
   панель («фіксована» від 64px) стає нижчою за неї, а її ширина перевищує
   відступ контенту — звідси порожня смуга під шапкою й наїзд на текст.
   Вікна й підказки Пайтончика не зумимо: вони рахують координати у звичайних
   пікселях і в іншому разі почали б світити повз ціль.
   Сам масштаб рахує device.js (--proj-scale): на дошці 1024×768 усе велике й
   так, тому там він прямує до 1. */
:root{--proj-scale:1.2}
body.projector-mode .appbar,
body.projector-mode .navrail,
body.projector-mode main{zoom:var(--proj-scale)}
body.projector-mode main{max-width:none}
body[data-style="new"].projector-mode main{max-width:none}
body.projector-mode .footer{display:none}

/* Світлові плями на проєкторі з'їдають контраст — залишаємо лише читабельність. */
body.projector-mode .bg-glow,
body.projector-mode .blob,
body.projector-mode .nu-beam,
body.projector-mode .cursor-glow{display:none!important}

/* Сірий «підпис» з останньої парти не читається взагалі. */
body[data-style="new"].projector-mode{
  --nu-dim:#DED8EE;
  --nu-faint:#C4BCD9;
  --nu-line:rgba(255,255,255,.24);
  --nu-line-soft:rgba(255,255,255,.17);
  --nu-line-strong:rgba(255,255,255,.40);
  --nu-surface:rgba(255,255,255,.075);
}
body.projector-mode{--editor-font:20px}

/* Дошка часто сенсорна: палець має влучати без прицілювання. */
body.projector-mode .btn{min-height:52px}
body.projector-mode .icon-btn{width:48px;height:48px}
body[data-style="new"].projector-mode .rail-btn{min-height:48px}

/* Зумлена панель вища за свій вміст, а флекс стискає те, що не має min-height:
   підпис групи схлопувався до нуля й зникав. Нехай краще панель гортається. */
body.projector-mode .navrail>*{flex-shrink:0}
body.projector-mode .nav-group-label{overflow:visible}

/* ===== Firefox без zoom (усе, що старе за 126) =====
   Шкільний ПК на Windows 7 з Firefox ESR — саме той випадок, коли `zoom`
   мовчки ігнорується і «режим проєктора» не робить нічого. Робимо те саме
   через transform: scale, але scale НЕ рухає layout, тому кожен блок доводиться
   компенсувати вручну: ширину ділимо на масштаб (візуально вийде 100%),
   а зміщення під шапку та під панель множимо на масштаб. */
body.projector-mode.no-zoom .appbar,
body.projector-mode.no-zoom .navrail,
body.projector-mode.no-zoom main{zoom:1}
body.projector-mode.no-zoom .appbar{
  transform:scale(var(--proj-scale));transform-origin:0 0;
  width:calc(100vw / var(--proj-scale))}
body.projector-mode.no-zoom .navrail{
  transform:scale(var(--proj-scale));transform-origin:0 0;
  top:calc(64px * var(--proj-scale));
  height:calc((100vh - 64px * var(--proj-scale)) / var(--proj-scale))}
body.projector-mode.no-zoom main{
  transform:scale(var(--proj-scale));transform-origin:0 0;
  width:calc(100vw / var(--proj-scale));max-width:none;
  /* base правило головне це margin:0 auto — з фіксованою шириною блок
     центрується і відʼїжджає вправо від панелі, тому ліній привʼязуємо до 0 */
  margin-left:0;
  margin-top:calc(64px * var(--proj-scale) - 64px)}

/* ===== Легкий режим для старих і слабких машин =====
   На 2-ядерних Celeron із Intel GMA розмите скло й анімовані плями вбивають
   кадри. Програма сама їх знімає, коли залізо не тягне (див. Device.probePerf). */
body.low-power .bg-glow,
body.low-power .blob,
body.low-power .nu-beam,
body.low-power .cursor-glow{display:none!important}
body.low-power{--glass-blur:none}
body.low-power *,
body.low-power *::before,
body.low-power *::after{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  animation-duration:.001s!important;animation-iteration-count:1!important;
  transition-duration:.001s!important}