#variant-tabs { display:flex; position:relative; }
.variant-tab { z-index:1; }
.variant-tab.is-active { background:transparent; box-shadow:none; }
.variant-select { min-width:44px; padding:9px 12px; }
.variant-indicator { position:absolute; inset:0 auto 0 0; width:var(--variant-width,44px); background:var(--card); border-radius:9px; box-shadow:0 1px 2px var(--line); transform:translateX(var(--variant-left,0px)); transition:transform 140ms ease; }
.variant-options { position:relative; }
#variant-options { padding:9px 12px; }
.tile .tile-menu-button { position:absolute; top:5px; right:5px; width:22px; height:22px; min-height:22px; padding:0; border-radius:50%; border:0; color:#fff; background:rgba(18,20,24,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; font-size:14px; font-weight:700; line-height:1; letter-spacing:-1px; transition:opacity .14s ease, background .14s ease; }
.tile .tile-menu-button::after { content:""; position:absolute; inset:-10px; } /* большая невидимая зона нажатия при маленьком значке */
.tile:hover .tile-menu-button,.tile:focus-within .tile-menu-button { opacity:.8; }
.tile .tile-menu-button:hover,.tile .tile-menu-button:focus-visible { opacity:1; background:rgba(18,20,24,.62); }
.action-menu { position:fixed; top:auto; right:auto; z-index:30; }
.is-comparing .compare-boards { grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); gap:10px; }
#compare-swap { position:sticky; top:calc(var(--header-height,96px) + 45vh); margin-top:200px; }
#swap-sides { width:36px; min-height:36px; height:36px; padding:0; border-radius:50%; font-size:22px; }
@media(min-width:651px) {
  body { padding-right:0; }
  body.library-open main { width:calc(100% - 360px); transform:translateX(-180px); }
  .topbar { position:sticky; top:0; z-index:12; padding:20px 24px; flex-wrap:wrap; }
  .library { top:var(--header-height,96px); height:calc(100dvh - var(--header-height,96px)); max-height:calc(100dvh - var(--header-height,96px)); padding-top:24px; }
  .toolbar { flex-wrap:wrap; }
  main { width:100%; transform:translateX(0); transition:width 220ms ease, transform 220ms ease; }
}
@media(max-width:900px) and (min-width:651px) {
  body.library-open main { width:calc(100% - 280px); transform:translateX(-140px); }
  .library { width:280px; }
  .brand-caption { display:none; }
  .toolbar { gap:4px; }
  .toolbar button { flex:1; width:auto; min-width:60px; }
  .feed-heading { flex-wrap:wrap; }
}
@media(max-width:650px) { #compare-swap { display:none; } }
@media(hover:none),(pointer:coarse) { .tile .tile-menu-button { opacity:.75; } }
@media(prefers-reduced-motion:reduce) { .variant-indicator,body,main { transition:none; } }

/* Кнопка темы — значок, а не слово «Auto» (просьба владельца 05.10.2026) */
.toolbar #theme,.toolbar .toolbar-icon { flex:0 0 44px; width:44px; min-width:44px; height:44px; padding:0; display:inline-grid; place-items:center; }
.gallery-theme { display:inline-grid; place-items:center; width:44px; padding:0; }

/* Icon labels double as hover/keyboard hints without native title tooltips. */
.toolbar-icon { position:relative; }
.toolbar-icon::after { content:attr(aria-label); position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:20; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); font-size:11px; font-weight:400; white-space:nowrap; pointer-events:none; opacity:0; }
.toolbar-icon:hover::after,.toolbar-icon:focus-visible::after { opacity:1; }

/* Телефон (05.10.2026, просьба владельца): подпись «Move» на плитках убрана совсем, а Duplicate / Compare / Add — чистые значки без слов. */
@media(pointer:coarse),(max-width:650px) { .tile-move { display:none !important; } }
@media(max-width:650px) {
  #duplicate .btn-label, #compare .btn-label, #add .btn-label { display:none; }
  #duplicate, #compare, #add { width:44px; min-width:44px; padding:0; justify-content:center; }
}

.share-glyph { display:none; }
/* Телефон: верхняя панель в ОДНУ строку (05.10.2026): ← имя проекта … отмена, библиотека, тема, Share — всё значками по 40 px. */
@media(max-width:650px) {
  .topbar { flex-wrap:nowrap; gap:8px; min-height:0; padding:10px 12px; padding-top:max(10px,env(safe-area-inset-top)); }
  .topbar .board-navigation { flex:1 1 auto; min-width:0; display:flex; flex-wrap:nowrap; align-items:center; gap:4px; }
  .topbar .board-navigation .project-name-input { flex:1 1 auto; width:auto; min-width:0; height:40px; box-sizing:border-box; }
  .topbar #board-project-name { max-width:none; }
  .topbar { align-items:center; }
  #back-to-gallery { flex:none; width:40px; height:40px; padding:0; font-size:18px; }
  #back-to-gallery .btn-label, #share-open .btn-label { display:none; }
  #board-project-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; padding:0 6px; }
  .toolbar { flex:none; width:auto; flex-wrap:nowrap; gap:4px; }
  .toolbar button, .toolbar #theme, .toolbar .toolbar-icon, .toolbar #share-open { flex:0 0 40px; width:40px; min-width:40px; height:40px; padding:0; display:inline-grid; place-items:center; }
  .share-glyph { display:block; }
  .account-bar { height:44px; padding-block:6px; }
  /* только аватарка, без имени и фамилии; без фото остаётся имя, чтобы значок не пропал */
  .account-bar summary img + span { display:none; }
  .account-bar summary img { width:32px; height:32px; }
}

/* Телефон: заголовок ленты («Your next chapter / Make room for the next. / подпись / N frames») убран; варианты ленты и значки действий — в одну строку. */
@media(max-width:650px) {
  .feed-heading { display:none; }
  .variant-toolbar { flex-wrap:nowrap; gap:6px; margin-bottom:14px; align-items:center; }
  .variant-segments { flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .variant-segments::-webkit-scrollbar { display:none; }
  .variant-segments button { flex:0 0 auto; min-width:40px; height:40px; }
  .variant-toolbar > button, .variant-options button { flex:0 0 40px; width:40px; min-width:40px; height:40px; padding:0; justify-content:center; }
  #variant-add { flex:0 0 40px; }
}

@media(max-width:650px) { main { padding-top:10px !important; } .feed-heading + .variant-toolbar { margin-top:0; } }

/* Batch 7: selection controls and touch-only refinements. */
.library-selection { position:sticky; bottom:0; display:flex; gap:8px; padding:12px; background:var(--card); z-index:5; }
.library-selection[hidden] { display:none; }
.library-selection button { min-height:44px; }
.is-selecting .tile-menu-button,.is-selecting .tile-move,.is-selecting .tile-to-feed,.is-selecting .library-slide { display:none !important; }
.is-selecting .tile::after { content:'○'; position:absolute; top:8px; right:8px; color:white; background:#2229; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; pointer-events:none; }
.is-selecting .tile.is-picked::after { content:'✓'; background:var(--accent); }
.tile:active { transform:none; }
@media(max-width:650px),(pointer:coarse) {
  #compare-mobile button,#compare-select,#swap-sides,#compare,.variant-select { -webkit-tap-highlight-color:transparent; }
  .action-menu button { min-height:44px; }
}
@media(max-width:650px) { .export-preview-wrap { display:none; } }

/* Телефон: долгое нажатие на плитке не должно выделять текст и открывать системное меню; кнопки обрезки без задержки касания. */
@media(pointer:coarse) {
  #grid .tile, #grid .tile *, #library-grid .tile, #library-grid .tile * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .inline-crop button, .inline-crop input[type=range] { touch-action:manipulation; }
}

/* First-cell shift/remove control; transparent border extends the touch target. */
.tile button.tile-shift { position:absolute; z-index:3; top:50%; right:3px; left:auto; transform:translateY(-50%); box-sizing:content-box; width:20px; height:20px; min-height:0; padding:0; border:12px solid transparent; border-radius:50%; background:rgba(0,0,0,.28); background-clip:padding-box; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:rgba(255,255,255,.9); font-size:13px; line-height:20px; opacity:0; transition:opacity .15s; }
/* Просьба владельца 05.10.2026: стрелка маленькая и менее заметная, справа по центру плитки, только при наведении. */
.tile:hover .tile-shift,.tile:focus-within .tile-shift { opacity:.75; }
.tile .tile-shift:hover { opacity:1; }
.is-comparing .tile-shift,body:has(.library.is-selecting) .tile-shift { display:none; }
@media(max-width:650px),(hover:none),(pointer:coarse) {
  .tile button.tile-shift { width:20px; height:20px; line-height:20px; opacity:.45; }
  .tile .tile-shift:focus-visible { opacity:1; }
}