:root{
  --accent:#22c55e;
  --accent-2:#16a34a;
  --accent-soft:rgba(34,197,94,.16);
  --danger:#ef4444;
  --warning:#f59e0b;
  --radius:18px;
  /* Отступ для статус-бара мобильного устройства (время, батарея и т.д.) */
  --safe-top:max(20px, env(safe-area-inset-top, 0px));
  --safe-bottom:max(20px, env(safe-area-inset-bottom, 0px));
  --mobile-status-bar:44px; /* Фиксированный отступ под системную панель */
}
body.theme-light{
  --bg:#eef2ff;
  --bg-overlay:radial-gradient(1200px 800px at 10% -10%, rgba(148,163,184,.32) 0%, transparent 60%),
  radial-gradient(1300px 900px at 110% 10%, rgba(148,163,184,.24) 0%, transparent 55%);
  --app-bg:rgba(255,255,255,.92);
  --app-border:rgba(148,163,184,.25);
  --panel:#ffffff;
  --panel-2:#f5f7ff;
  --panel-soft:#edf2ff;
  --panel-border:rgba(148,163,184,.35);
  --panel-hover:rgba(148,163,184,.25);
  --text:#0f172a;
  --text-strong:#020617;
  --muted:#475569;
  --chip-bg:#f1f5f9;
  --chip-border:rgba(148,163,184,.45);
  --ghost-bg:#e2e8f0;
  --ghost-border:rgba(148,163,184,.55);
  --ghost-color:#0f172a;
  --shadow:0 18px 40px rgba(15,23,42,.12);
  --card:#ffffff;
  --thumb-border:rgba(15,23,42,.2);
  --thumb-shadow:rgba(34,197,94,.25);
}
body.theme-dark{
  --bg:#0f172a;
  --bg-overlay:radial-gradient(1200px 800px at 10% -10%, #11203d 0%, transparent 60%),
  radial-gradient(1300px 900px at 110% 10%, #082631 0%, transparent 55%);
  --app-bg:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) , rgba(12,18,34,.65);
  --app-border:rgba(255,255,255,.06);
  --panel:#111827;
  --panel-2:#1f2937;
  --panel-soft:rgba(15,23,42,.35);
  --panel-border:rgba(255,255,255,.06);
  --panel-hover:#263141;
  --text:#e5e7eb;
  --text-strong:#f8fafc;
  --muted:#94a3b8;
  --chip-bg:#22304a;
  --chip-border:rgba(255,255,255,.06);
  --ghost-bg:rgba(255,255,255,.02);
  --ghost-border:rgba(255,255,255,.08);
  --ghost-color:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --card:#0b1223;
  --thumb-border:rgba(255,255,255,.35);
  --thumb-shadow:rgba(34,197,94,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  background-image:var(--bg-overlay);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Noto Color Emoji;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-size:16px;
  /* Учитываем safe-area и системную панель для мобильных приложений */
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
  padding-left:16px;
  padding-right:16px;
  min-height:100vh;
}
.app{
  width:min(960px, 96vw);
  /* Резервируем место под системную панель сверху */
  margin-top:var(--mobile-status-bar);
  min-height:calc(100vh - var(--mobile-status-bar) - var(--safe-top) - var(--safe-bottom));
  backdrop-filter:saturate(120%) blur(8px);
  background:var(--app-bg);
  border:1px solid var(--app-border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (max-width: 768px){
  body{
    padding-top:var(--safe-top);
    padding-bottom:var(--safe-bottom);
    padding-left:16px;
    padding-right:16px;
    min-height:100vh;
  }
  .app{
    margin-top:var(--mobile-status-bar);
    min-height:calc(100vh - var(--mobile-status-bar) - var(--safe-top) - var(--safe-bottom));
  }
}
/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:nowrap;
  /* Фиксируем высоту хедера для стабильности на мобильных */
  min-height:44px;
}
.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  flex-wrap:nowrap;
}
.header-left{ margin-right:auto; }
.header-right{ justify-content:flex-end; margin-left:auto; }
.icon-btn{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--panel-border);
  color:var(--text);
  cursor:pointer;
  transition:transform .1s ease, background .2s ease, border .2s ease;
  user-select:none;
  /* Увеличенная зона клика для мобильных */
  touch-action:manipulation;
}
.icon-btn-symbol{
  font-weight:800;
  font-size:20px;
  line-height:1;
}
.icon-btn:hover{ background:var(--panel-hover); }
.icon-btn:active{ transform:scale(.96) }
.title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--text-strong);
  font-size:clamp(20px, 3vw, 28px);
  flex:1 1 auto;
  /* Обрезка длинных заголовков на мобильных */
  min-width:0;
}
.title-icon{ font-size:26px; line-height:1; flex-shrink:0; }
.title-text{ 
  display:inline-flex; 
  align-items:center;
  /* Обрезка текста с многоточием */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Sections & cards */
.section{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:16px;
}
.section h2{
  margin:0 0 12px 0;
  font-size:18px;color:var(--text-strong);font-weight:700;
}
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.stack{ display:flex; flex-direction:column; gap:12px }
.grow{ flex:1 1 0 }
.mode-row{ 
  display:flex; 
  gap:12px; 
  flex-wrap:wrap; 
  width:100%; 
  align-items:stretch; 
}
.mode-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px 14px; border-radius:18px;
  min-height:104px;
  min-width:0;
  flex:1 1 0;
  background:var(--panel-2);
  border:1px solid var(--panel-border);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:transform .1s ease, background .2s ease, border .2s ease;
  /* Увеличенная зона клика для мобильных */
  touch-action:manipulation;
}
.mode-btn .mode-icon{ font-size:28px; }
.mode-btn:hover{ background:var(--panel-hover); }
.mode-btn:active{ transform:scale(.97); }
.mode-btn.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--text-strong); }
.menu-section{ gap:16px; }
.menu-hero{ gap:10px; }
.menu-hero h2{ margin:0; }
.menu-settings{ gap:12px; }
.menu-footer{ margin-top:4px; }
.menu-theme{
  display:flex;
  justify-content:center;
  margin-top:4px;
}
.menu-theme .theme-switch{
  justify-content:center;
  text-align:left;
  gap:16px;
}
.menu-theme .theme-switch-label{
  flex-basis:auto;
  text-align:left;
  white-space:nowrap;
}
.menu-block{ background:var(--panel-soft); border:1px solid var(--panel-border); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:12px; }
.menu-block-title{ font-weight:700; color:var(--text-strong); font-size:16px; }
.difficulty-block{ display:flex; flex-direction:column; gap:8px; }
.difficulty-title{ font-size:14px; font-weight:600; color:var(--muted); }
.difficulty-row{ display:flex; flex-wrap:wrap; gap:8px; }
.difficulty-btn{
    flex:1 1 120px;
    min-width:110px;
    padding:10px 14px;
    border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, border .2s ease, color .2s ease, transform .1s ease;
}
.dict-selector{
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
}
.dict-selector > .menu-block-title,
.dict-selector > h2{ margin:0; }
.section > .dict-selector{ margin-bottom:12px; }
.dict-selected{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.dict-summary-toggle{
  flex-shrink:0;
  display:inline-flex;
  font-family:ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Noto Color Emoji;
  align-items:center;
  justify-content:center;
  width:100%;
  gap:6px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel);
  color:var(--text);
  font-weight:600;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  transition:background .2s ease, border .2s ease, color .2s ease, transform .1s ease;
}
.dict-summary-toggle:hover{ background:var(--panel-hover); }
.dict-summary-toggle:active{ transform:translateY(1px); }
.dict-summary-toggle.is-active{ background:var(--accent-soft); border-color:var(--accent); color:var(--text-strong); }
.dict-summary-body{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
  min-width:0;
  width:100%;
}
.dict-summary-body[hidden]{ display:none; }
.dict-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; }
.dict-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--panel-border); font-size:13px; color:var(--text-strong); font-weight:500; }
.dict-chip-icon,
.dict-card-icon{
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-2);
  flex-shrink:0;
  transition:background .2s ease, border .2s ease, color .2s ease;
  font-size:18px;
  font-weight:500;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
}
.dict-chip-icon{ width:24px; height:24px; border-radius:8px; }
.dict-card-icon{ width:36px; height:36px; border-radius:12px; font-size:22px; }
.dict-icon--text{ font-weight:700; text-transform:uppercase; letter-spacing:.35px; }
.dict-chip-icon.dict-icon--text{ font-size:12px; letter-spacing:.3px; }
.dict-card-icon.dict-icon--text{ font-size:14px; letter-spacing:.4px; }
.dict-chip-label{ white-space:nowrap; }
.dict-dropdown-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  min-width:100%;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:20;
}
.dict-dropdown-panel[hidden]{ display:none; }
.dict-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:260px;
  overflow:auto;
  padding:4px 0;
}
.dict-empty{ padding:12px; border-radius:12px; border:1px dashed var(--panel-border); text-align:center; font-size:14px; background:var(--panel-2); }
.dict-card{ position:relative; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:16px; border:1px solid var(--panel-border); background:var(--panel-2); cursor:pointer; transition:background .2s ease, border .2s ease, transform .12s ease; min-height:auto; min-width:0; width:100%; box-sizing:border-box; }
.dict-card:hover{ background:var(--panel-hover); transform:translateY(-1px); }
.dict-card.is-selected{ border-color:var(--accent); background:var(--accent-soft); }
.dict-card-input{ position:absolute; opacity:0; pointer-events:none; }
.dict-card:focus-within{ box-shadow:0 0 0 2px var(--accent); }
.dict-card-check{ width:22px; height:22px; border-radius:8px; border:2px solid var(--panel-border); display:flex; align-items:center; justify-content:center; color:#fff; background:transparent; flex-shrink:0; transition:background .2s ease, border .2s ease; }
.dict-card-check svg{ width:14px; height:14px; opacity:0; }
.dict-card.is-selected .dict-card-check{ background:var(--accent); border-color:var(--accent); }
.dict-card.is-selected .dict-card-check svg{ opacity:1; }
.dict-card.is-selected .dict-card-icon{ background:var(--accent); border-color:var(--accent); color:#fff; }
.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
  font-weight:normal;
  font-style:normal;
  font-size:inherit;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
}
.dict-card-icon.material-symbols-rounded{ font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 32; }
.dict-card.is-selected .dict-card-icon.material-symbols-rounded{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 32; }
.dict-chip-icon.material-symbols-rounded{ font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; }
.dict-card-title{ font-weight:400; font-size:14px; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dict-card-custom .dict-card-title{ color:var(--text-strong); }
.dict-actions{ display:flex; justify-content:flex-end; gap:8px; }
.btn.dict-ok-btn{ min-width:60px; padding:8px 14px; font-size:14px; border-radius:12px; }

@media (max-width: 480px){
  .dict-dropdown-panel{
    padding:10px;
    border-radius:14px;
  }
  .dict-grid{
    gap:6px;
  }
  .dict-card{
    padding:6px 10px;
    gap:8px;
    border-radius:14px;
  }
  .dict-card-icon{
    width:32px;
    height:32px;
    border-radius:10px;
    font-size:18px;
  }
  .dict-card-icon.dict-icon--text{
    font-size:12px;
  }
  .dict-card-check{
    width:20px;
    height:20px;
    border-radius:6px;
  }
  .dict-card-check svg{
    width:12px;
    height:12px;
  }
  .dict-card-title{
    font-size:13px;
  }
}
.difficulty-btn:hover{ background:var(--panel-hover); }
.difficulty-btn:active{ transform:scale(.97); }
.difficulty-btn.is-active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--text-strong);
}
.difficulty-btn:disabled,
.difficulty-btn.is-disabled{
    cursor:not-allowed;
    opacity:.55;
    background:var(--panel-2);
  }

.theme-switch{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.theme-switch-label{ font-weight:700; color:var(--text-strong); font-size:15px; white-space:nowrap; }
.theme-slider{ display:flex; align-items:center; gap:8px; }
.theme-slider span{ font-size:18px; }
.theme-slider input[type="range"]{
  width:72px;
  height:6px;
  border-radius:999px;
  background:var(--panel-border);
  outline:none;
  -webkit-appearance:none;
}
.theme-slider input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:var(--panel-border);
}
.theme-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--thumb-border);
  box-shadow:0 4px 12px var(--thumb-shadow);
  margin-top:-9px;
  cursor:pointer;
}
.theme-slider input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:var(--panel-border);
}
.theme-slider input[type="range"]::-moz-range-thumb{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--thumb-border);
  box-shadow:0 4px 12px var(--thumb-shadow);
  cursor:pointer;
}
.theme-toggle-icons{
  display:none;
  align-items:center;
  gap:8px;
}
.theme-icon-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  color:var(--text);
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border .2s ease, transform .1s ease;
}
.theme-icon-btn:active{ transform:scale(.95); }
.theme-icon-btn.is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--text-strong);
}

/* Buttons */
.btn{
  background:var(--accent);
  color:#03240f;
  font-weight:700;
  padding:12px 16px;
  border:none;border-radius:14px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(34,197,94,.25);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* Минимальная высота для удобного тапа на мобильных */
  min-height:48px;
  touch-action:manipulation;
}
.btn:hover{ background:var(--accent-2) }
.btn:active{ transform:translateY(1px) }
.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.btn.ghost{
  background:var(--ghost-bg);
  color:var(--ghost-color);
  border:1px solid var(--ghost-border);
  box-shadow:none;
}
.btn.warn{ background:var(--warning); color:#211a05 }
.btn.danger{ background:var(--danger); color:#280707 }

/* Inputs */
.select,.input{
  min-height:48px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--panel-border);
  outline:none;
  font-size:16px;
  /* Увеличенная зона клика */
  touch-action:manipulation;
}
.select{ width:100% }
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--text);
  /* Разрешить перенос на маленьких экранах */
  flex-wrap:wrap;
}
.chip.disabled{
  opacity:.55;
}
.chip input[type="checkbox"]{ margin-right:6px; accent-color:var(--accent); }
.pts-controls{
  display:flex;
  align-items:center;
  gap:12px;
}
.pts-controls.is-disabled{ opacity:.5; }
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
.chip.check-only{
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
}
.chip.check-only input[type="checkbox"]{
  margin-right:0;
  width:20px;
  height:20px;
  margin:0;
}
.pts-controls{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Word card */
.word-card{ 
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), var(--card);
  border:1px solid var(--panel-border);
  border-radius:22px;
  padding:32px 24px;
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:var(--shadow);
  /* Адаптивные отступы для мобильных */
  max-width:100%;
}
.word-breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}
.word-breadcrumbs .crumb{
  display:flex;
  align-items:center;
  gap:6px;
}
.word-breadcrumbs .crumb-label{
  font-weight:600;
  color:var(--muted-strong, var(--text));
}
.word-breadcrumbs .crumb-value{
  color:var(--text);
}
.word-breadcrumbs .crumb-separator{
  color:var(--muted);
  font-size:12px;
}
.word-card.word-card-expanded{
  align-items:stretch;
  text-align:left;
}
.word-card-main{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}
.word-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.word-meta{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.word-description{
  font-size:14px;
  color:var(--muted);
  flex:1 1 auto;
  /* Разрешить перенос описания на мобильных */
  word-wrap:break-word;
}
.word-description.is-empty{ opacity:.75; }
.word-help-btn{
  width:48px;
  height:48px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, border .2s ease, transform .1s ease;
  flex-shrink:0;
  /* Увеличенная зона клика */
  touch-action:manipulation;
}
.word-help-btn:hover{ background:var(--panel-hover); }
.word-help-btn:active{ transform:scale(.95); }
.word-help-btn:disabled,
.word-help-btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  background:var(--panel-2);
}
.word-help{
  font-size:14px;
  line-height:1.45;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:12px;
}
.word-help[hidden]{ display:none; }
.word{
  font-size:clamp(34px, 7vw, 60px);
  font-weight:800;
  letter-spacing:.5px;
  color:var(--text-strong);
  word-break:break-word;
  hyphens:auto;
}
.muted{ color:var(--muted); font-size:14px }
.custom-gen-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.custom-gen-hint{
  color:var(--muted);
  font-size:14px;
}
.custom-gen-status{
  min-height:18px;
  font-size:14px;
  color:var(--muted-strong, var(--text));
}
.custom-gen-status.is-error{ color:var(--danger); }
.custom-gen-status.is-success{ color:var(--accent-2); }
.kbd{ background:var(--panel-2);border:1px solid var(--panel-border);border-radius:6px;padding:2px 6px;font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--text); }

.action-row{ 
  display:flex; 
  width:100%; 
  gap:12px; 
  flex-wrap:wrap; 
  align-items:stretch; 
}
.action-row + .action-row{ margin-top:12px; }
.action-row-inline{ flex-wrap:wrap; justify-content:space-between; }
.action-row-inline > .btn{ flex:1 1 0; min-width:0; }
.action-row-primary{
  margin-top:14px;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
.action-row-primary > .btn{ flex:1 1 0; min-width:0; }
.action-wide{ flex:1 1 0; min-width:0; }
.btn-hero{
  font-size:clamp(20px, 4.8vw, 26px);
  padding:27px 16px;
  font-weight:800;
  box-shadow:0 10px 28px rgba(34,197,94,.25);
  /* Минимальная высота для удобного тапа */
  min-height:56px;
}
.btn-hero.warn{ box-shadow:0 10px 28px rgba(245,158,11,.35); }
.action-extra{ margin-top:16px; width:100%; }
.btn-full{ width:100%; display:flex; justify-content:center; }
.team-grid{
  display:grid;
  gap:10px;
  /* Адаптивная сетка: от 1 до 3 колонок в зависимости от ширины */
  grid-template-columns:repeat(auto-fit, minmax(min(140px, calc((100% - 20px)/3)), 1fr));
}
.team-actions{
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}
.team-card{
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.team-card-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.team-avatar-btn{
  width:64px;
  height:64px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background-size:cover;
  background-position:center;
  color:#0b0b0b;
  box-shadow:0 6px 16px rgba(15,23,42,.35);
  flex:0 0 auto;
  border:none;
  cursor:pointer;
  transition:transform .1s ease;
}
.team-avatar-btn span{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.team-avatar-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.team-avatar-btn:active{ transform:scale(.96); }
.team-body{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.team-name{
  font-size:14px;
  font-weight:700;
  color:var(--text-strong);
  text-align:center;
  word-break:break-word;
}
.team-name[data-editable="true"]{
  cursor:pointer;
}
.team-name[data-editable="true"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:12px;
}
.team-card.is-editing .team-name{ display:none; }
.team-edit{
  display:none;
  width:100%;
  flex-direction:column;
  gap:8px;
}
.team-card.is-editing .team-edit{ display:flex; }
.team-edit-input{ width:100%; font-size:14px; }
.team-edit-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn-small{
  padding:8px 12px;
  min-height:auto;
  font-size:14px;
}
.team-delete{
  width:32px;
  height:32px;
  border-radius:12px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.18);
  color:#fecaca;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .1s ease;
}
.team-delete:hover{ background:rgba(239,68,68,.28); }
.team-delete:active{ transform:scale(.95); }
.team-chip{ display:flex; align-items:center; gap:8px; }
.team-chip-icon{ font-size:20px; line-height:1; }
#turnTeamName{ display:inline-flex; align-items:center; gap:6px; }
.round-status{
  text-align:center;
  font-weight:600;
  color:var(--muted);
}
.chip input[type="checkbox"]{ margin-right:6px; accent-color:var(--accent); }
.footer{ 
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:auto;
}
.footer .btn-full{ flex:1 1 100%; }

.help-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.55);
  z-index:2000;
}
.help-overlay[hidden]{
  display:none;
}
.help-overlay__backdrop{
  position:absolute;
  inset:0;
  background:transparent;
}
.help-overlay__dialog{
  position:relative;
  z-index:1;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:28px 24px 24px;
  max-width:min(720px, 100%);
  max-height:100%;
  overflow:auto;
}
.help-overlay__close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  transition:background .2s ease, transform .1s ease, border .2s ease;
}
.help-overlay__close:hover{
  background:var(--panel-hover);
}
.help-overlay__close:active{
  transform:scale(.95);
}
.crocomim-help{
  font-family:system-ui, sans-serif;
  line-height:1.5;
  padding:0;
  max-width:600px;
  color:var(--text);
}
.crocomim-help h1{
  font-size:1.4rem;
  margin:0 0 16px;
}
.crocomim-help h2{
  font-size:1.1rem;
  margin:20px 0 8px;
}
.crocomim-help ul{
  padding-left:20px;
  margin:4px 0 0;
}
.crocomim-help p{
  margin:12px 0;
}
body.theme-dark .help-overlay{
  background:rgba(8,15,28,.72);
}

.menu-feedback{
  margin-top:16px;
}

.feedback-menu-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
}

.feedback-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:3000;
}

.feedback-modal[aria-hidden="false"]{
  display:flex;
}

.feedback-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
}

body.theme-dark .feedback-modal__backdrop{
  background:rgba(8,15,28,.72);
}

.feedback-modal__panel{
  position:relative;
  z-index:1;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:28px 24px 24px;
  width:min(520px, 100%);
  max-height:100%;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.feedback-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .1s ease;
}

.feedback-modal__close:hover{
  background:var(--panel-hover);
}

.feedback-modal__close:active{
  transform:scale(.95);
}

.feedback-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.feedback-title{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:var(--text-strong);
}

.feedback-fieldset{
  border:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.feedback-fieldset legend{
  font-weight:600;
  color:var(--text-strong);
  margin-bottom:4px;
}

.feedback-radio{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  cursor:pointer;
  transition:background .2s ease, border .2s ease;
}

.feedback-radio:hover{
  background:var(--panel-hover);
}

.feedback-radio input[type="radio"]{
  accent-color:var(--accent);
}

.feedback-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
  color:var(--text-strong);
}

.feedback-label span{
  font-weight:400;
  color:var(--muted);
  font-size:13px;
}

.feedback-textarea,
.feedback-input{
  width:100%;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background:var(--panel-2);
  padding:10px 12px;
  font-size:15px;
  color:var(--text);
}

.feedback-textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.45;
}

.feedback-input::placeholder,
.feedback-textarea::placeholder{
  color:var(--muted);
}

.feedback-counter{
  align-self:flex-end;
  font-size:12px;
  color:var(--muted);
}

.feedback-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--muted);
}

.feedback-consent input[type="checkbox"]{
  margin-top:3px;
  accent-color:var(--accent);
}

.feedback-consent a{
  color:var(--accent);
}

.feedback-context{
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:var(--panel-2);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
}

.feedback-context__row{
  display:flex;
  gap:8px;
  justify-content:space-between;
}

.feedback-context__label{
  color:var(--muted);
  font-weight:600;
}

.feedback-context__value{
  color:var(--text);
  text-align:right;
  word-break:break-word;
}

.feedback-status{
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:var(--panel-soft);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
  color:var(--muted);
}

.feedback-status[hidden]{
  display:none;
}

.feedback-mailto-btn{
  align-self:flex-start;
}

.feedback-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.feedback-actions .btn{
  min-width:130px;
}

.toast-container{
  position:fixed;
  bottom:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:4000;
}

.toast{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:12px 16px;
  min-width:240px;
  color:var(--text);
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.toast__message{
  flex:1 1 auto;
}

.toast__close{
  border:none;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

body.feedback-modal-open{
  overflow:hidden;
}

@media (max-width:600px){
  .help-overlay{
    padding:16px;
  }
  .help-overlay__dialog{
    padding:22px 18px 18px;
  }
  .crocomim-help{
    font-size:.95rem;
    line-height:1.35;
  }
  .crocomim-help h1{
    font-size:1.2rem;
    margin:0 0 12px;
  }
  .crocomim-help h2{
    font-size:1rem;
    margin:16px 0 6px;
  }
  .crocomim-help p{
    margin:8px 0;
    line-height:1.4;
  }
  .crocomim-help ul{
    margin:2px 0 0;
    padding-left:18px;
  }
  .feedback-modal{
    padding:16px;
  }
  .feedback-modal__panel{
    width:100%;
    max-height:calc(100% - 16px);
    padding:24px 18px 18px;
  }
  .toast-container{
    left:16px;
    right:16px;
    bottom:16px;
  }
  .toast{
    min-width:auto;
  }
}

@media (max-width:960px){
  body{
    padding-left:14px;
    padding-right:14px;
  }
  .app{
    min-height:calc(100vh - var(--mobile-status-bar) - var(--safe-top) - var(--safe-bottom));
  }
}

@media (max-width:768px){
  body{
    align-items:flex-start;
    padding-left:14px;
    padding-right:14px;
    font-size:17px;
  }
  .app{
    width:100%;
    max-width:720px;
    border-radius:20px;
    padding:16px;
    gap:14px;
    margin-top:var(--mobile-status-bar);
    min-height:calc(100vh - var(--mobile-status-bar) - var(--safe-top) - var(--safe-bottom));
  }
  .section{ padding:14px; }
  .mode-row{ gap:10px; }
  .mode-btn{
    padding:20px 12px;
    min-height:96px;
  }
  .mode-btn .mode-icon{ font-size:26px; }
  .word-card{
    padding:26px 18px;
    min-height:170px;
  }
  .word{ font-size:clamp(30px, 9vw, 54px); }
  .footer{ margin-top:0; }
}

@media (max-width:640px){
  body{ 
    padding-left:12px;
    padding-right:12px;
  }
  .header{ gap:12px; }
  .header-left,
  .header-right{ gap:10px; }
  .theme-slider{ display:none; }
  .theme-toggle-icons{ display:flex; }
  .action-row-primary{ gap:12px; }
  /* Оптимизация кнопок режима для маленьких экранов */
  .mode-row{
    flex-wrap:wrap;
  }
  .mode-btn{
    flex:1 1 calc(50% - 5px);
    min-height:80px;
    padding:16px 10px;
  }
}

@media (max-width:520px){
  body{
    padding-left:10px;
    padding-right:10px;
    font-size:18px;
  }
  .app{
    padding:14px;
    gap:12px;
    border-radius:18px;
    margin-top:var(--mobile-status-bar);
    min-height:calc(100vh - var(--mobile-status-bar) - var(--safe-top) - var(--safe-bottom));
  }
  .section{ padding:12px; }
  .header{ gap:10px; }
  .theme-switch{ gap:8px; }
  .theme-switch-label{ font-size:14px; }
  .action-row{ gap:10px; }
  .action-row + .action-row{ margin-top:10px; }
  .action-row-inline,
  .action-row-primary{ gap:10px; }
  .btn-hero{ font-size:clamp(18px, 6vw, 24px); padding:24px 14px; }
  .mode-btn{
    padding:16px 10px;
    min-height:88px;
  }
  .mode-btn .mode-icon{ font-size:24px; }
  .word-card{
    padding:22px 16px;
    min-height:150px;
  }
  .word{ font-size:clamp(26px, 10vw, 48px); }
  .menu-section{ gap:14px; }
  .menu-hero{ gap:10px; }
  .menu-settings{ gap:10px; }
  .menu-block{ padding:12px; gap:10px; }
  /* Кнопки режима в одну колонку на очень маленьких экранах */
  .mode-btn{
    flex:1 1 100%;
  }
}

body.theme-dark {
  margin-top:0;
}

body.theme-light {
  margin-top:0;
}