[hidden] { display:none !important; }
#gallery { display:grid; grid-template-columns:210px minmax(0,1fr); min-height:100dvh; }
.gallery-nav { padding:40px 16px; border-right:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; gap:8px; }
.gallery-nav .eyebrow { padding-left:12px; }
.gallery-nav button { display:flex; align-items:center; gap:12px; justify-content:space-between; text-align:left; border:0; background:transparent; }
.gallery-nav [aria-current=page] { color:var(--accent); background:var(--accent-bg); }
.mobile-label { display:none; }
.gallery-content { padding:40px clamp(16px,3vw,48px); min-width:0; }
.gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.gallery-heading h1 { margin:0; font-size:32px; letter-spacing:-.02em; }
.gallery-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:28px; }
.gallery-tools input { flex:1; min-width:140px; border:1px solid var(--line); border-radius:10px; padding:11px 14px; background:var(--card); color:var(--ink); font:inherit; }
.gallery-layout { display:flex; padding:3px; background:var(--pill); border-radius:12px; }
.gallery-layout button { border:0; background:transparent; }
.gallery-layout [aria-pressed=true] { background:var(--card); color:var(--accent); }
.project-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:24px; }
.project-card { position:relative; min-width:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); }
.project-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:3px; padding:18px; width:100%; aspect-ratio:4/3; border:0; border-radius:0; background:var(--card); }
.project-preview:disabled { opacity:.7; }
.project-preview span { position:relative; display:block; overflow:hidden; background:var(--pill); border-radius:2px; }
.project-preview img { position:absolute; width:100%; height:100%; object-fit:cover; }
.project-details { padding:12px 42px 16px 16px; background:var(--bg); min-width:0; }
.project-name { display:block; width:100%; padding:0; min-height:28px; border:0; background:transparent; text-align:left; font-size:15px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-details p { margin:4px 0 0; font-size:11px; }
.project-menu { position:absolute; right:8px; bottom:35px; min-height:30px; width:30px; padding:0; font-size:22px; border:0; background:transparent; }
.project-name-input { width:100%; min-width:0; padding:4px; font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--accent); border-radius:6px; }
.board-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
#board-project-name { max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:0; background:transparent; font-weight:650; }
#board,#gallery { animation:project-enter 160ms ease; }
.project-switching #board,.project-switching #gallery { pointer-events:none; }
.project-picker { width:min(400px,calc(100vw - 32px)); padding:24px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:16px; }
.project-picker button { display:block; width:100%; margin-top:10px; overflow-wrap:anywhere; }
.project-picker::backdrop { background:#0005; }
.gallery-theme { position:fixed; bottom:16px; left:16px; z-index:15; }
@keyframes project-enter { from { opacity:.45; } to { opacity:1; } }
@media(max-width:650px) {
  #gallery { display:block; }
  .gallery-nav { flex-direction:row; padding:16px; border:0; background:transparent; }
  .gallery-nav .eyebrow,.desktop-label { display:none; }
  .mobile-label { display:inline; }
  .gallery-nav button { flex:1; justify-content:center; background:var(--pill); }
  .gallery-nav [aria-current=page] { background:var(--card); }
  .gallery-content { padding:16px 16px 76px; }
  .gallery-heading h1 { font-size:26px; }
  .gallery-heading .eyebrow { display:none; }
  .gallery-heading { gap:8px; }
  .gallery-heading button { font-size:12px; padding:10px; }
  .gallery-tools { gap:8px; }
  .gallery-tools input { width:100%; flex-basis:100%; }
  .gallery-tools button { font-size:12px; padding:8px; }
  .project-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .project-preview { padding:10px; gap:2px; }
  .project-details { padding:10px 30px 12px 10px; }
  .project-name { font-size:13px; }
  .project-details p { font-size:10px; line-height:1.5; }
  .project-menu { right:3px; bottom:36px; }
  #board-project-name { max-width:180px; }
}
@media(prefers-reduced-motion:reduce) { #board,#gallery { animation:none; } }

body:not(.in-gallery) .gallery-theme { display:none; }

.library .tile .tile-menu-button { top:auto; bottom:5px; right:5px; }
::view-transition-old(root),::view-transition-new(root) { animation-duration:160ms; }
@media(prefers-reduced-motion:reduce) { ::view-transition-group(*) { animation-duration:0s; } }

:root.project-transition { view-transition-name:root; }
:root.project-transition #grid { view-transition-name:none; }

/* Gallery controls share the board's quiet Add treatment. */
[data-testid="new-project"],[data-testid="import-as-new"] { height:44px; background:var(--card); color:color-mix(in srgb,var(--accent) 78%,var(--muted)); border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
[data-testid="new-project"]:hover,[data-testid="import-as-new"]:hover { background:var(--accent-bg); }
.gallery-tools input { height:44px; }
.gallery-layout button { height:38px; min-height:38px; }
.project-date { display:block; padding:0 16px 12px; background:var(--bg); color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.project-row-actions { position:absolute; right:8px; bottom:48px; display:flex; align-items:center; gap:2px; }
.project-row-actions button { position:static; width:30px; min-height:30px; height:30px; padding:0; border:0; background:transparent; color:var(--muted); font-size:22px; }
.project-row-actions button:hover { background:var(--pill); color:var(--ink); }
.is-trash .project-details { padding-right:76px; }
.project-list-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:0 44px 0 66px; border-bottom:1px solid var(--line); }
.gallery-content:has(.is-trash) .project-list-heading { padding-right:76px; }
.project-list-heading button { border:0; background:transparent; color:var(--muted); padding:4px 0; min-height:32px; font-size:12px; text-align:left; }
.project-list-heading button:last-child { text-align:right; }
.project-cards.as-list { grid-template-columns:minmax(0,1fr); gap:0; }
.as-list .project-card { display:grid; grid-template-columns:54px minmax(0,1fr) auto 30px; gap:12px; align-items:center; height:64px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; overflow:visible; }
.as-list.is-trash .project-card { grid-template-columns:54px minmax(0,1fr) auto 62px; }
.as-list .project-card:hover,.as-list .project-card:focus-within { background:var(--line); }
.as-list .project-preview { width:54px; height:42px; min-height:0; aspect-ratio:auto; padding:3px; gap:1px; border:1px solid var(--line); border-radius:8px; }
.as-list .project-preview span { border-radius:1px; }
.as-list .project-details { padding:0; background:transparent; }
.as-list .project-name { min-height:22px; font-size:15px; font-weight:600; line-height:22px; }
.as-list .project-details p { margin:0; font-size:11px; line-height:16px; }
.as-list .project-date { padding:0; background:transparent; text-align:right; white-space:nowrap; }
.as-list .project-row-actions { position:static; }
.as-list .project-menu { opacity:0; }
.as-list .project-card:hover .project-menu,.as-list .project-card:focus-within .project-menu,.as-list .project-menu[aria-expanded=true] { opacity:1; }
@media(max-width:650px) {
  .project-date { padding:0 10px 10px; font-size:11px; }
  .project-row-actions { right:3px; bottom:43px; }
  .project-list-heading,.gallery-content:has(.is-trash) .project-list-heading { padding:0 0 0 52px; }
  .as-list .project-card,.as-list.is-trash .project-card { grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:38px 17px; column-gap:12px; row-gap:0; padding:4px 0; }
  .as-list .project-preview { grid-row:1 / 3; width:40px; height:40px; }
  .as-list .project-details { align-self:end; }
  .as-list .project-date { grid-column:2; grid-row:2; text-align:left; font-size:11px; line-height:17px; }
  .as-list .project-row-actions { grid-column:3; grid-row:1 / 3; }
  .as-list .project-menu { opacity:1; }
}
@media(hover:none),(pointer:coarse) { .as-list .project-menu { opacity:1; } }

/* Переименование проекта (05.10.2026): поле встаёт на место названия в той же строке, без прыжка вёрстки, и одна рамка вместо двух
   (раньше поверх своей рамки рисовалось ещё и кольцо фокуса). */
.board-navigation { flex-wrap:nowrap; }
.board-navigation .project-name-input { flex:0 1 260px; width:260px; max-width:100%; height:44px; box-sizing:border-box; padding:0 12px; border-radius:12px; outline:none; box-shadow:none; }
.board-navigation .project-name-input:focus, .board-navigation .project-name-input:focus-visible { outline:none; box-shadow:none; border-color:var(--accent); }

/* Пока при обновлении открывается проект, галерею не показываем (см. boot.js). */
html.boot-project #gallery { display:none !important; }