/* Murr Mall: wishlist panel, cards, forms, and dialogs */

  /* A downward swipe over the mall must not pull the page to refresh it: the mall
     page never scrolls as a whole, so the browser gets nothing to overscroll. */
  html:has(> body:not(.home)),
  body:not(.home) { overscroll-behavior-y:none; }

  #panel-wishes, #panel-list-toolbar { display:contents; }
  .card-details-hint, .card-shop { display:none; }
  #panel-mobile-controls[hidden], #panel-tabs[hidden],
  #panel-wishes[hidden], #panel-about[hidden], #panel-list-toolbar[hidden] { display:none; }

  /* Guest filters: beside the mall they wrap onto a second line; under it, on phones,
     height is scarce, so they keep to one row that scrolls sideways. */
  #list-filters { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  @media (max-width: 880px) {
    #list-filters {
      flex-wrap:nowrap; margin:12px -18px 0; padding:0 18px 2px;
      overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
    }
    #list-filters::-webkit-scrollbar { display:none; }
  }
  #list-filters[hidden], #panel-list-toolbar[hidden] + #list-filters { display:none; }
  .filter-chip {
    display:inline-flex; align-items:center; gap:6px; flex:none; min-height:34px; padding:6px 12px;
    border:1px solid var(--ui-border); border-radius:99px; background:var(--ui-surface);
    color:var(--ui-text); font:inherit; font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
  }
  .filter-chip:hover { border-color:color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); }
  .filter-chip[aria-pressed="true"] {
    border-color:var(--ui-accent); background:color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface));
    color:color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text));
  }
  .filter-chip:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
  .filter-count { color:var(--ui-text-secondary); font-weight:650; }
  .filter-chip[aria-pressed="true"] .filter-count { color:inherit; opacity:.75; }
  #list > .filter-notice {
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding:12px 14px; border:1px dashed var(--ui-border); border-radius:12px; list-style:none;
    color:var(--ui-text-secondary); font-size:12.5px; line-height:1.4;
  }
  #panel.panel-expanded #list > .filter-notice { grid-column:1 / -1; }
  .filter-notice button {
    flex:none; min-height:32px; padding:5px 11px; border:1px solid var(--ui-border); border-radius:99px;
    background:var(--ui-surface); color:var(--ui-text); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  }

  /* ============ ПАНЕЛЬ ============ */
  #panel {
    width:30%; flex:0 0 30%; display:flex; flex-direction:column;
    background:linear-gradient(180deg, #fbf7ee, #f2e9d8);
    border-left:1px solid rgba(120,90,50,.25);
    box-shadow:-8px 0 24px rgba(50,35,15,.18); z-index:60;
  }
  #panel header { padding:18px 18px 12px; }
  .panel-mall-brand { display:none; }
  .panel-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .panel-title-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
  #panel-layout-btn { display:none; }
  #panel-layout-btn[hidden] { display:none !important; }
  #panel h1 {
    font-size:19px; color:#46392a; letter-spacing:.3px; margin-bottom:12px; font-weight:700;
    overflow-wrap:anywhere;
  }
  #my-lists-btn {
    display:inline-flex; align-items:center; gap:6px; flex-shrink:0; border:none; background:rgba(122,92,62,.1); color:#745538; cursor:pointer;
    padding:6px 8px; border-radius:8px; font-size:11px;
  }
  #my-lists-btn:hover { background:rgba(122,92,62,.18); }
  #progress-track {
    height:9px; border-radius:6px; background:rgba(120,90,50,.16); overflow:hidden;
  }
  #progress-fill {
    height:100%; width:0; border-radius:6px;
    background:linear-gradient(90deg, #d9a54e, #e7c27a);
    transition:width .5s cubic-bezier(.22,1,.36,1);
  }
  #progress-text { font-size:12px; color:#9a8264; margin-top:6px; }
  .demo-notice { margin:0 0 12px; padding:11px; border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-surface-subtle); }
  .demo-notice[hidden] { display:none; }
  .demo-notice-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
  .demo-notice-heading .category-label { margin:0; }
  .demo-notice p { margin:8px 0 0; color:var(--ui-text); font-size:12px; line-height:1.45; }
  .demo-notice .demo-disclaimer { color:var(--ui-text-secondary); font-size:11px; }
  #demo-context summary { margin-top:8px; color:var(--ui-text-secondary); font-size:12px; cursor:pointer; }
  #demo-context[open] + .demo-reset { display:none; }
  .demo-notice .demo-reset { color:var(--ui-text-secondary); font-size:11px; }
  /* The owner's own words keep their line breaks. */
  #list-description { margin:0; white-space:pre-line; overflow-wrap:anywhere; }
  @media (min-width: 881px) { #demo-context summary { display:none; } }
  body.demo img.thumb { object-fit:contain; background:#fff; }
  #list-owner-actions { display:flex; gap:8px; margin-top:12px; }
  #list-owner-actions button {
    flex:1; min-width:0; min-height:42px; padding:9px 8px; border:none; border-radius:10px;
    font-size:12px; line-height:1.2; font-weight:600; cursor:pointer; transition:background .15s;
  }
  #list-owner-actions i { margin-right:5px; }
  #add-btn { background:#7a5c3e; color:#fdf9f1; }
  #add-btn:hover { background:#63482e; }
  #list-share-btn { background:rgba(122,92,62,.12); color:#63482e; }
  #list-share-btn:hover { background:rgba(122,92,62,.2); }

  #list {
    list-style:none; flex:1; min-height:0; overflow-y:auto; padding:6px 14px 10px;
    scrollbar-width:thin; scrollbar-color:rgba(120,90,50,.35) transparent;
  }
  #list::-webkit-scrollbar { width:8px; }
  #list::-webkit-scrollbar-thumb { background:rgba(120,90,50,.3); border-radius:4px; }

  .card {
    display:block; padding:10px; margin-bottom:8px;
    background:#fff; border:1px solid rgba(120,90,50,.13); border-radius:14px;
    box-shadow:0 1px 4px rgba(80,60,30,.07); position:relative; overflow:hidden;
    transition:transform .15s, box-shadow .15s, border-color .15s;
  }
  .card:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(80,60,30,.14); }
  .card.sel { border-color:#d9a54e; box-shadow:0 0 0 2px rgba(217,165,78,.4), 0 4px 12px rgba(80,60,30,.12); }
  .card.done { background:#eef4e7; opacity:.8; border-left:4px solid #8fbe6f; }
  .card.done .nm { color:#6c7a63; text-decoration:line-through; text-decoration-color:rgba(108,122,99,.55); }
  .card.done .pr { color:#93a289; }
  .card-summary { display:flex; align-items:center; gap:12px; cursor:pointer; }

  .thumb {
    width:92px; height:92px; border-radius:12px; object-fit:cover; flex-shrink:0;
    background:#f3ead9;
  }
  .thumb.ph { display:flex; align-items:center; justify-content:center; font-size:34px; }
  .meta { flex:1; min-width:0; }
  .nm {
    font-size:13.5px; font-weight:600; color:#46392a; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .pr { font-size:12px; color:#9a8264; margin-top:2px; }
  .category-label {
    display:inline-flex; width:max-content; max-width:100%; align-items:center;
    margin-top:5px; padding:3px 7px; border-radius:99px;
    background:#f2e8d6; color:#856a49; font-size:10px; font-weight:750;
    line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .card-expanded {
    margin-top:11px; padding:13px 2px 2px; border-top:1px solid rgba(120,90,50,.14);
    animation:cardexpand .18s ease-out;
  }
  .card-expanded-row { display:none; }
  @keyframes cardexpand { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
  .card-expanded-description {
    max-height:180px; overflow:auto; color:#665541; font-size:13px; line-height:1.55;
    white-space:pre-wrap; overflow-wrap:anywhere;
  }
  .card-expanded-actions { margin-top:0; padding-top:13px; }
  .card-expanded-actions button, .card-expanded-actions a { flex:1 1 auto; }
  .badge-reserved {
    display:inline-flex; align-items:center; font-size:11px; font-weight:700;
    color:#3d6a86; background:rgba(93,168,201,.16); border:1px solid rgba(93,168,201,.35);
    padding:2px 8px; border-radius:20px; white-space:nowrap;
  }
  .empty { text-align:center; color:#a08a68; font-size:13px; padding:30px 10px; }

  /* режим просмотра (view-ссылка): без редактирования */
  body.viewer #list-owner-actions { display:none; }

  #list-dlg-error { min-height:16px; color:#b14331; font-size:13px; margin-top:7px; }
  #list-dlg { width:min(680px, 94vw); }
  .mall-skin-fieldset { margin-top:18px; border:0; }
  .mall-skin-fieldset legend {
    color:var(--ui-text, #46392a); font-size:13px; line-height:1.3; font-weight:750;
  }
  .mall-skin-help {
    margin:6px 0 12px; color:var(--ui-text-secondary, #806d53);
    font-size:12.5px; line-height:1.45;
  }
  .mall-skin-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
  dialog label.mall-skin-option {
    position:relative; display:block; min-width:0; margin:0; cursor:pointer;
  }
  .mall-skin-option input {
    position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none;
  }
  .mall-skin-card {
    position:relative; display:block; height:100%; overflow:hidden;
    border:1px solid var(--ui-border, #d9c9ac); border-radius:13px;
    background:var(--ui-surface, #fff); color:var(--ui-text, #3c3226);
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .mall-skin-option:hover .mall-skin-card { transform:translateY(-2px); }
  .mall-skin-option input:focus-visible + .mall-skin-card {
    outline:2px solid color-mix(in srgb, var(--ui-accent, #76974e) 58%, transparent);
    outline-offset:2px;
  }
  .mall-skin-option input:checked + .mall-skin-card {
    border-color:var(--ui-accent, #76974e);
    box-shadow:0 0 0 2px var(--ui-accent-soft, rgba(114,147,76,.14));
  }
  .mall-skin-preview {
    position:relative; display:block; height:72px; overflow:hidden;
    border-bottom:1px solid color-mix(in srgb, var(--ui-border, #d9c9ac) 80%, transparent);
  }
  .mall-skin-preview::before {
    content:""; position:absolute; left:9%; right:9%; top:18%; height:52%;
    border:2px solid var(--preview-frame); border-bottom-width:5px;
    background:
      linear-gradient(90deg,
        transparent 0 31%, var(--preview-frame) 31% 34%,
        transparent 34% 65%, var(--preview-frame) 65% 68%, transparent 68%),
      var(--preview-glass);
    box-shadow:0 3px 7px var(--preview-shadow);
  }
  .mall-skin-preview::after {
    content:""; position:absolute; left:-8%; right:-8%; bottom:-20px; height:47px;
    border-radius:50%; background:var(--preview-floor);
    box-shadow:inset 0 5px 13px var(--preview-floor-glow);
  }
  .mall-skin-preview.default {
    --preview-frame:#4d3d2f;
    --preview-glass:
      radial-gradient(70% 60% at 50% 8%, rgba(255,205,132,.5), transparent 68%),
      linear-gradient(180deg, #7a6248, #4f4031);
    --preview-shadow:rgba(40,25,10,.34); --preview-floor:#c4b299;
    --preview-floor-glow:rgba(255,240,210,.52);
    background:linear-gradient(180deg, #f2e6cc 0 22%, #453425 22% 25%, #d8c7a8 25% 100%);
  }
  .mall-skin-preview.warm-conservatory {
    --preview-frame:#704b34; --preview-glass:linear-gradient(#b49a7c, #76604d);
    --preview-shadow:rgba(71,43,23,.35); --preview-floor:#c39c6e;
    --preview-floor-glow:rgba(255,224,172,.48);
    background:
      radial-gradient(circle at 84% 18%, rgba(115,153,88,.55) 0 10%, transparent 11%),
      linear-gradient(180deg, #efd6ac 0 24%, #9c6746 24% 28%, #d3b083 28% 100%);
  }
  .mall-skin-preview.oceanic-dusk {
    --preview-frame:#d69757; --preview-glass:linear-gradient(#17354d, #071521);
    --preview-shadow:rgba(0,0,0,.55); --preview-floor:#15293a;
    --preview-floor-glow:rgba(49,183,220,.35);
    background:
      radial-gradient(circle at 84% 18%, rgba(46,176,212,.35) 0 8%, transparent 9%),
      linear-gradient(180deg, #071321 0 24%, #1b4060 24% 27%, #0d2030 27% 100%);
  }
  .mall-skin-copy { display:block; min-height:72px; padding:11px 30px 11px 11px; }
  .mall-skin-copy strong { display:block; font-size:13px; line-height:1.25; }
  .mall-skin-copy small {
    display:block; margin-top:4px; color:var(--ui-text-secondary, #806d53);
    font-size:11.5px; line-height:1.35; font-weight:500;
  }
  .mall-skin-check {
    position:absolute; right:9px; bottom:49px; width:18px; height:18px;
    display:grid; place-items:center; border-radius:50%;
    background:var(--ui-accent, #76974e); color:#fff; font-size:9px;
    opacity:0; transform:scale(.75); transition:opacity .16s ease, transform .16s ease;
  }
  .mall-skin-option input:checked + .mall-skin-card .mall-skin-check {
    opacity:1; transform:scale(1);
  }

  /* ============ РАСШИРЕННАЯ КАРТОЧКА ХОТЕЛКИ ============ */
  #item-detail-dlg {
    width:min(760px, calc(100vw - 28px)); max-height:min(720px, calc(100dvh - 28px));
    padding:0; overflow:auto; border-radius:22px; background:#fffaf1;
  }
  #item-detail-dlg::backdrop { background:rgba(38,27,16,.58); backdrop-filter:blur(2px); }
  #item-detail-close {
    position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; display:grid; place-items:center;
    border:none; border-radius:50%; background:rgba(60,45,28,.09); color:#6d5a43; font-size:18px; cursor:pointer;
  }
  #item-detail-close:hover { background:rgba(60,45,28,.16); }
  .item-detail-layout { display:grid; grid-template-columns:minmax(250px, 42%) minmax(0,1fr); min-height:390px; }
  .item-detail-media { min-height:390px; display:grid; place-items:center; overflow:hidden; background:#eee3cf; }
  .item-detail-media img { width:100%; height:100%; max-height:620px; display:block; object-fit:cover; }
  .item-detail-image-placeholder { font-size:64px; opacity:.7; }
  .item-detail-body { min-width:0; padding:45px 36px 32px; display:flex; flex-direction:column; }
  .item-detail-state {
    padding:4px 9px; border-radius:99px;
    background:#e7f0dd; color:#668051; font-size:12px; font-weight:800;
  }
  .item-detail-labels { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
  .item-detail-labels .category-label { margin-top:0; padding:4px 9px; font-size:12px; }
  #item-detail-name { margin:0; color:#3f3326; font-family:var(--ui-subheading-font); font-size:30px; line-height:1.14; overflow-wrap:anywhere; }
  .item-detail-price { margin-top:10px; color:#9a7041; font-size:21px; font-weight:750; }
  .item-detail-description {
    max-height:250px; margin-top:20px; padding-right:5px; overflow:auto; color:#665541;
    font-size:15px; line-height:1.58; white-space:pre-wrap; overflow-wrap:anywhere;
  }
  .item-detail-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:25px; }
  .item-detail-actions button, .item-detail-actions a {
    min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:9px 14px; border:none; border-radius:10px; font-size:13px; font-weight:750;
    cursor:pointer; text-decoration:none;
  }
  .item-detail-link, .detail-reserve { background:#745538; color:#fffaf0; }
  .item-detail-link:hover, .detail-reserve:hover { background:#5f432b; }
  .detail-toggle, .detail-edit, .detail-share, .detail-unreserve, .detail-release { background:rgba(116,85,56,.1); color:#745538; }
  .detail-toggle:hover, .detail-edit:hover, .detail-share:hover, .detail-unreserve:hover, .detail-release:hover { background:rgba(116,85,56,.18); }
  .detail-delete { background:rgba(183,64,45,.1); color:#ad432f; }
  .detail-delete:hover { background:rgba(183,64,45,.18); }
  .detail-reservation { width:100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .detail-reservation .badge-reserved { padding:5px 10px; }

  /* Маленькая hover-карточка не участвует в кликах и не содержит description. */
  #item-hover-preview {
    position:fixed; z-index:180; width:240px; min-height:70px; display:flex; align-items:center; gap:11px;
    padding:10px; border:1px solid rgba(108,82,52,.18); border-radius:14px;
    background:rgba(255,252,246,.97); box-shadow:0 12px 34px rgba(52,37,20,.23);
    pointer-events:none; backdrop-filter:blur(8px);
  }
  #item-hover-preview[hidden] { display:none; }
  #item-hover-image[hidden], #item-hover-placeholder[hidden] { display:none; }
  #item-hover-preview img, .item-hover-ph { width:52px; height:52px; flex-shrink:0; border-radius:10px; object-fit:cover; }
  .item-hover-ph { display:grid; place-items:center; background:#f1e6d2; font-size:24px; }
  .item-hover-copy { min-width:0; }
  #item-hover-name { color:#46392a; font-size:14px; font-weight:750; line-height:1.3; overflow-wrap:anywhere; }
  #item-hover-price { margin-top:3px; color:#9a8264; font-size:13px; }

  /* ============ ДИАЛОГ «ПОДЕЛИТЬСЯ» ============ */
  #share-dlg {
    width:min(447px, calc(100vw - 28px)); padding:25px 24px 24px; border-radius:17px;
    background:#fff; color:#262626; box-shadow:0 24px 70px rgba(24,31,35,.38);
  }
  #share-dlg:focus { outline:none; }
  #share-dlg::backdrop { background:rgba(41,55,63,.34); backdrop-filter:blur(1.5px); }
  .share-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:13px; }
  #share-title { margin:0; font-size:29px; line-height:1.18; color:#222; font-weight:750; letter-spacing:-.5px; }
  #share-close {
    flex-shrink:0; width:30px; height:30px; margin:-9px -9px 0 0; border:none; background:none;
    color:#9cabb6; font-size:21px; cursor:pointer; border-radius:8px;
  }
  #share-close:hover { color:#657580; background:#f0f3f5; }
  #share-options { display:flex; flex-direction:column; }
  #share-options[hidden], #qr-panel[hidden] { display:none !important; }
  .share-option[hidden] { display:none !important; }
  .share-option {
    width:100%; min-height:44px; display:flex; align-items:center; gap:9px; border:none; border-radius:9px;
    background:none; padding:5px 0; color:#2c2c2c; font:inherit; font-size:19px; text-align:left; cursor:pointer;
  }
  .share-option:hover { background:#f4f6f7; padding-left:7px; }
  .share-service-icon {
    width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; border-radius:7px;
    color:#fff; font-size:15px;
  }
  .share-service-icon.native { background:#6b65e8; }
  .share-service-icon.copy { background:#79db43; }
  .share-service-icon.telegram { background:#2ca5df; }
  .share-service-icon.vk { background:#0878f9; }
  .share-service-icon.whatsapp { background:#12d65b; }
  .share-service-icon.ok { background:#ff712b; }
  .share-service-icon.qr { background:#232323; }
  .share-option.copy-done { color:#55a92e; }
  #qr-panel { text-align:center; padding-top:4px; }
  #qr-code { width:220px; height:220px; margin:0 auto 16px; border-radius:10px; overflow:hidden; }
  #qr-code canvas, #qr-code img { display:block; width:220px; height:220px; }
  #qr-panel p { margin:0 0 16px; color:#6c7479; font-size:14px; overflow-wrap:anywhere; }
  .qr-actions { display:flex; justify-content:center; gap:9px; }
  .qr-actions i { margin-right:6px; }
  .qr-actions a { display:inline-flex; align-items:center; text-decoration:none; }

  html[data-theme="dark"] #panel {
    background:linear-gradient(180deg,#171e29,#101620);
    border-left-color:rgba(181,199,222,.18); box-shadow:-8px 0 28px rgba(0,0,0,.35);
  }
  html[data-theme="dark"] #panel h1 { color:#f2eadc; }
  html[data-theme="dark"] #my-lists-btn {
    background:rgba(224,203,169,.1); color:#e2cba4;
  }
  html[data-theme="dark"] #my-lists-btn:hover { background:rgba(224,203,169,.17); }
  html[data-theme="dark"] #progress-track { background:rgba(220,230,243,.13); }
  html[data-theme="dark"] #progress-text,
  html[data-theme="dark"] .pr,
  html[data-theme="dark"] .empty { color:#aea18f; }
  html[data-theme="dark"] #add-btn,
  html[data-theme="dark"] .item-detail-link,
  html[data-theme="dark"] .detail-reserve { background:#a8753f; color:#fff8ec; }
  html[data-theme="dark"] #add-btn:hover,
  html[data-theme="dark"] .item-detail-link:hover,
  html[data-theme="dark"] .detail-reserve:hover { background:#bb8750; }
  html[data-theme="dark"] #list-share-btn {
    background:rgba(224,203,169,.1); color:#e2cba4;
  }
  html[data-theme="dark"] #list-share-btn:hover { background:rgba(224,203,169,.17); }
  html[data-theme="dark"] #list { scrollbar-color:rgba(189,203,222,.3) transparent; }
  html[data-theme="dark"] #list::-webkit-scrollbar-thumb { background:rgba(189,203,222,.28); }
  html[data-theme="dark"] .card {
    background:#1c2532; border-color:rgba(190,207,229,.12);
    box-shadow:0 2px 7px rgba(0,0,0,.2);
  }
  html[data-theme="dark"] .card:hover { box-shadow:0 5px 16px rgba(0,0,0,.3); }
  html[data-theme="dark"] .card.sel {
    border-color:#d7a454; box-shadow:0 0 0 2px rgba(215,164,84,.34), 0 5px 16px rgba(0,0,0,.28);
  }
  html[data-theme="dark"] .card.done { background:#1c2b27; border-left-color:#78a86e; }
  html[data-theme="dark"] .card.done .nm { color:#98ad99; }
  html[data-theme="dark"] .card.done .pr { color:#809486; }
  html[data-theme="dark"] .thumb { background:#293444; }
  html[data-theme="dark"] .nm { color:#efe7db; }
  html[data-theme="dark"] .category-label { background:#303343; color:#dcc18f; }
  html[data-theme="dark"] .card-expanded { border-top-color:rgba(190,207,229,.13); }
  html[data-theme="dark"] .card-expanded-description { color:#c7bdaf; }

  html[data-theme="dark"] #item-detail-dlg { background:#19222e; }
  html[data-theme="dark"] #item-detail-close { background:rgba(230,218,199,.1); color:#d7c8b3; }
  html[data-theme="dark"] #item-detail-close:hover { background:rgba(230,218,199,.17); }
  html[data-theme="dark"] .item-detail-media { background:#111925; }
  html[data-theme="dark"] .item-detail-state { background:#263d32; color:#a9c99d; }
  html[data-theme="dark"] #item-detail-name { color:#f2eadc; }
  html[data-theme="dark"] .item-detail-price { color:#ddb174; }
  html[data-theme="dark"] .item-detail-description { color:#c7bdaf; }
  html[data-theme="dark"] .detail-toggle,
  html[data-theme="dark"] .detail-edit,
  html[data-theme="dark"] .detail-share,
  html[data-theme="dark"] .detail-unreserve, html[data-theme="dark"] .detail-release { background:rgba(224,203,169,.1); color:#e2cba4; }
  html[data-theme="dark"] .detail-toggle:hover,
  html[data-theme="dark"] .detail-edit:hover,
  html[data-theme="dark"] .detail-share:hover,
  html[data-theme="dark"] .detail-unreserve:hover, html[data-theme="dark"] .detail-release:hover { background:rgba(224,203,169,.17); }
  html[data-theme="dark"] .detail-delete { background:rgba(224,104,87,.13); color:#f0a092; }
  html[data-theme="dark"] .detail-delete:hover { background:rgba(224,104,87,.21); }
  html[data-theme="dark"] #item-hover-preview {
    background:rgba(25,34,46,.97); border-color:rgba(190,207,229,.14);
    box-shadow:0 12px 36px rgba(0,0,0,.42);
  }
  html[data-theme="dark"] .item-hover-ph { background:#293444; }
  html[data-theme="dark"] #item-hover-name { color:#efe7db; }
  html[data-theme="dark"] #item-hover-price { color:#aea18f; }
  html[data-theme="dark"] #share-dlg { background:#19222e; color:#eee7dc; }
  html[data-theme="dark"] #share-title { color:#f2eadc; }
  html[data-theme="dark"] #share-close { color:#9faec0; }
  html[data-theme="dark"] #share-close:hover { color:#dce4ee; background:#263241; }
  html[data-theme="dark"] .share-option { color:#eee7dc; }
  html[data-theme="dark"] .share-option:hover { background:#232e3d; }
  html[data-theme="dark"] .share-service-icon.qr { background:#d9e0e9; color:#16202c; }
  html[data-theme="dark"] #qr-panel p { color:#aeb9c7; }
@media (max-width: 880px) {
    #panel { width:auto; flex:1; min-height:0; border-left:none; border-top:1px solid rgba(120,90,50,.25); }
    html[data-theme="dark"] #panel { border-top-color:rgba(181,199,222,.18); }
    #item-detail-dlg { width:min(94vw, 620px); max-height:92dvh; }
    .item-detail-layout { grid-template-columns:1fr; }
    .item-detail-media { min-height:0; height:220px; }
    .item-detail-media img { max-height:220px; }
    .item-detail-body { padding:27px 20px 22px; }
    #item-detail-name { padding-right:28px; font-size:25px; }
    .item-detail-description { max-height:190px; }
    .item-detail-actions > * { flex:1; }
    #item-hover-preview { display:none !important; }
    #share-title { font-size:25px; }
    .share-option { font-size:17px; }
}
  /* Боковая панель вишлиста */
  #panel,
  html[data-theme="dark"] #panel {
    width:clamp(360px, 30%, 520px); flex:0 0 clamp(360px, 30%, 520px);
    background:var(--ui-bg); border-left:1px solid var(--ui-border);
    box-shadow:-10px 0 36px rgba(18,24,40,.10);
    transition:width .22s ease, flex-basis .22s ease;
  }
  html[data-theme="dark"] #panel { box-shadow:-10px 0 36px rgba(0,0,0,.34); }
  #panel header {
    padding:22px 20px 17px; background:color-mix(in srgb, var(--ui-surface) 95%, transparent);
    border-bottom:1px solid var(--ui-border); backdrop-filter:blur(12px);
  }
  .panel-title-row { align-items:flex-start; gap:12px; }
  .panel-title-actions { gap:7px; }
  #panel h1,
  html[data-theme="dark"] #panel h1 {
    margin:0 0 15px; color:var(--ui-text); font-family:var(--ui-heading-font);
    font-size:19px; line-height:1.22; font-weight:var(--ui-heading-weight); letter-spacing:-.3px;
  }
  #my-lists-btn,
  #panel-layout-btn,
  html[data-theme="dark"] #my-lists-btn,
  html[data-theme="dark"] #panel-layout-btn {
    min-height:34px; padding:7px 10px; border:1px solid var(--ui-border); border-radius:10px;
    background:var(--ui-surface); color:var(--ui-text-secondary); font-size:12px; font-weight:650;
  }
  #panel-layout-btn {
    width:34px; padding:0; place-items:center; cursor:pointer;
  }
  #my-lists-btn:hover,
  #panel-layout-btn:hover,
  html[data-theme="dark"] #my-lists-btn:hover,
  html[data-theme="dark"] #panel-layout-btn:hover { background:var(--ui-surface-subtle); color:var(--ui-text); }
  #panel-layout-btn[aria-pressed="true"],
  html[data-theme="dark"] #panel-layout-btn[aria-pressed="true"] {
    border-color:color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border));
    background:var(--ui-accent-soft); color:var(--ui-accent);
  }
  /* Edit and share sit as icons beside the title; guests see neither. */
  #panel .panel-icon-btn,
  html[data-theme="dark"] #panel .panel-icon-btn {
    display:grid; place-items:center; width:34px; height:34px; min-height:34px; padding:0;
    border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-surface);
    color:var(--ui-text-secondary); font-size:13px; cursor:pointer;
  }
  #panel .panel-icon-btn:hover { background:var(--ui-surface-subtle); color:var(--ui-text); }
  /* On wide screens the buttons get a row of their own above the title, "My lists"
     on the left like a way back, so the title keeps the panel's full width. */
  @media (min-width: 881px) {
    #panel .panel-title-row { flex-wrap:wrap; gap:10px; }
    #panel .panel-title-actions { order:-1; flex:1 0 100%; }
    #panel .panel-title-actions #my-lists-btn { order:-1; margin-right:auto; }
    #panel h1 { flex:1 0 100%; }
  }
  #panel .panel-icon-btn[hidden],
  html[data-theme="dark"] #panel .panel-icon-btn[hidden],
  body.viewer #panel #list-share-btn { display:none; }
  /* The description: two quiet lines under the title, the rest behind "More". */
  .list-about[hidden], #list-description-more[hidden] { display:none; }
  #panel header .list-about { margin:-7px 0 13px; }
  #panel header #list-description {
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    color:var(--ui-text-secondary); font-size:13px; line-height:1.5;
  }
  #panel header .list-about.expanded #list-description { display:block; }
  #list-description-more {
    margin-top:3px; padding:0; border:0; background:none; color:var(--ui-accent);
    font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  }
  #panel header .list-guide { display:none; }
  /* The About tab on phones: the description, then how the list works. */
  #panel-about .list-about { margin:0 0 14px; }
  #panel-about #list-description { color:var(--ui-text); font-size:14px; line-height:1.55; }
  .list-guide {
    padding:14px; border:1px solid var(--ui-border); border-radius:12px; background:var(--ui-surface-subtle);
  }
  #panel-about .demo-notice + .list-about[hidden] + .list-guide,
  #panel-about .demo-notice:not([hidden]) ~ .list-guide { margin-top:14px; }
  .list-guide h2 {
    margin:0 0 10px; color:var(--ui-text); font-family:var(--ui-subheading-font);
    font-size:15px; font-weight:var(--ui-subheading-weight);
  }
  .list-guide ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
  .list-guide li { display:flex; align-items:flex-start; gap:10px; color:var(--ui-text-secondary); font-size:13.5px; line-height:1.45; }
  .list-guide li i { width:18px; margin-top:2px; color:var(--ui-accent); text-align:center; }
  body.viewer .list-guide-owner, body:not(.viewer) .list-guide-guest { display:none; }
  .list-description-invite[hidden] { display:none; }
  .list-description-invite { margin-top:14px; padding-top:14px; border-top:1px solid var(--ui-border); }
  .list-description-invite p { margin:0 0 10px; color:var(--ui-text); font-size:13.5px; line-height:1.45; }
  #list-description-add {
    display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 13px;
    border:1px solid var(--ui-border); border-radius:11px; background:var(--ui-surface);
    color:var(--ui-text); font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  }
  #progress-track,
  html[data-theme="dark"] #progress-track {
    height:7px; border-radius:99px; background:var(--ui-surface-subtle);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-border) 72%, transparent);
  }
  #progress-fill {
    border-radius:99px; background:linear-gradient(90deg, var(--ui-accent), #d96887);
    box-shadow:0 0 12px color-mix(in srgb, var(--ui-accent) 24%, transparent);
  }
  #progress-text,
  html[data-theme="dark"] #progress-text { margin-top:8px; color:var(--ui-text-secondary); font-size:12px; }
  #list-owner-actions { gap:9px; margin-top:15px; }
  #list-owner-actions button {
    min-height:44px; border:1px solid transparent; border-radius:11px; padding:9px 10px;
    font-size:12.5px; font-weight:700; transition:background .16s ease, border-color .16s ease, transform .16s ease;
  }
  #add-btn,
  html[data-theme="dark"] #add-btn {
    background:var(--ui-accent); border-color:var(--ui-accent); color:#fff;
  }
  #add-btn:hover,
  html[data-theme="dark"] #add-btn:hover { background:var(--ui-accent-hover); border-color:var(--ui-accent-hover); }
  #list-share-btn,
  html[data-theme="dark"] #list-share-btn {
    background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text);
  }
  #list-share-btn:hover,
  html[data-theme="dark"] #list-share-btn:hover { background:var(--ui-surface-subtle); }
  #list { padding:14px 14px 18px; scrollbar-color:color-mix(in srgb, var(--ui-text-secondary) 30%, transparent) transparent; }
  #list::-webkit-scrollbar-thumb,
  html[data-theme="dark"] #list::-webkit-scrollbar-thumb {
    background:color-mix(in srgb, var(--ui-text-secondary) 28%, transparent);
  }
  .card,
  html[data-theme="dark"] .card {
    padding:11px; margin-bottom:10px; background:var(--ui-surface); border:1px solid var(--ui-border);
    border-radius:15px; box-shadow:var(--ui-shadow-sm);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .card:hover,
  html[data-theme="dark"] .card:hover {
    transform:translateY(-1px); border-color:color-mix(in srgb, var(--ui-text-secondary) 24%, var(--ui-border));
    box-shadow:0 10px 24px rgba(18,24,40,.08);
  }
  html[data-theme="dark"] .card:hover { box-shadow:0 10px 24px rgba(0,0,0,.24); }
  .card.sel,
  html[data-theme="dark"] .card.sel {
    border-color:var(--ui-accent);
    box-shadow:0 0 0 3px var(--ui-focus), var(--ui-shadow-sm);
  }
  .card.done,
  html[data-theme="dark"] .card.done {
    background:var(--ui-success-soft); border-color:color-mix(in srgb, var(--ui-success) 26%, var(--ui-border));
    border-left:3px solid var(--ui-success); opacity:1;
  }
  .card.done .nm,
  html[data-theme="dark"] .card.done .nm { color:var(--ui-text-secondary); text-decoration-color:currentColor; }
  .card.done .pr,
  html[data-theme="dark"] .card.done .pr { color:var(--ui-text-secondary); }
  .card-summary { gap:12px; border-radius:10px; }
  .thumb,
  html[data-theme="dark"] .thumb {
    width:100px; height:100px; border:1px solid var(--ui-border); border-radius:12px;
    background:var(--ui-surface-subtle);
  }
  .thumb.ph { font-size:29px; }
  .nm,
  html[data-theme="dark"] .nm { color:var(--ui-text); font-size:14px; font-weight:700; }
  .pr,
  html[data-theme="dark"] .pr { margin-top:5px; color:var(--ui-text-secondary); font-size:12.5px; }
  .category-label,
  html[data-theme="dark"] .category-label {
    margin-top:6px; padding:4px 8px; background:var(--ui-accent-soft); color:var(--ui-accent);
    font-size:10.5px; font-weight:750;
  }
  .card-expanded { margin-top:12px; padding:13px 2px 2px; border-top-color:var(--ui-border); }
  html[data-theme="dark"] .card-expanded { border-top-color:var(--ui-border); }
  .card-expanded-description,
  html[data-theme="dark"] .card-expanded-description { color:var(--ui-text-secondary); font-size:13.5px; }
  .badge-reserved {
    padding:4px 9px; border:1px solid color-mix(in srgb, var(--ui-accent) 24%, transparent);
    background:var(--ui-accent-soft); color:var(--ui-accent); font-size:11.5px;
  }
  .empty,
  html[data-theme="dark"] .empty { color:var(--ui-text-secondary); padding:42px 12px; font-size:14px; line-height:1.5; }
  #restore-archived-btn { display:flex; margin:16px auto 0; }

  #item-detail-dlg,
  html[data-theme="dark"] #item-detail-dlg {
    width:min(820px, calc(100vw - 32px)); max-height:min(740px, calc(100dvh - 32px));
    padding:0; border-radius:22px; background:var(--ui-surface);
  }
  #item-detail-dlg::backdrop { background:rgba(25,31,40,.55); backdrop-filter:blur(5px); }
  #item-detail-close,
  html[data-theme="dark"] #item-detail-close {
    top:16px; right:16px; width:36px; height:36px; border:1px solid var(--ui-border);
    background:color-mix(in srgb, var(--ui-surface) 90%, transparent); color:var(--ui-text-secondary);
    backdrop-filter:blur(8px);
  }
  #item-detail-close:hover,
  html[data-theme="dark"] #item-detail-close:hover { background:var(--ui-surface-subtle); color:var(--ui-text); }
  .item-detail-layout { grid-template-columns:minmax(280px, 44%) minmax(0,1fr); min-height:430px; }
  .item-detail-media,
  html[data-theme="dark"] .item-detail-media {
    min-height:430px; background:var(--ui-surface-subtle); border-right:1px solid var(--ui-border);
  }
  .item-detail-body { padding:54px 40px 36px; }
  .item-detail-state,
  html[data-theme="dark"] .item-detail-state {
    background:var(--ui-success-soft); color:var(--ui-success);
  }
  #item-detail-name,
  html[data-theme="dark"] #item-detail-name {
    color:var(--ui-text); font-family:var(--ui-subheading-font);
    font-size:30px; font-weight:var(--ui-subheading-weight); letter-spacing:-.45px;
  }
  .item-detail-price,
  html[data-theme="dark"] .item-detail-price { color:var(--ui-accent); font-size:21px; }
  .item-detail-description,
  html[data-theme="dark"] .item-detail-description { color:var(--ui-text-secondary); font-size:15px; }
  .item-detail-actions { gap:9px; padding-top:28px; }
  .item-detail-actions button, .item-detail-actions a {
    min-height:42px; border:1px solid transparent; border-radius:11px; padding:10px 14px; font-size:13px;
  }
  .item-detail-link, .detail-reserve,
  html[data-theme="dark"] .item-detail-link,
  html[data-theme="dark"] .detail-reserve {
    background:var(--ui-accent); border-color:var(--ui-accent); color:#fff;
  }
  .item-detail-link:hover, .detail-reserve:hover,
  html[data-theme="dark"] .item-detail-link:hover,
  html[data-theme="dark"] .detail-reserve:hover {
    background:var(--ui-accent-hover); border-color:var(--ui-accent-hover); color:#fff;
  }
  .detail-toggle, .detail-edit, .detail-share, .detail-unreserve, .detail-release,
  html[data-theme="dark"] .detail-toggle,
  html[data-theme="dark"] .detail-edit,
  html[data-theme="dark"] .detail-share,
  html[data-theme="dark"] .detail-unreserve,
  html[data-theme="dark"] .detail-release {
    background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text);
  }
  .detail-toggle:hover, .detail-edit:hover, .detail-share:hover, .detail-unreserve:hover, .detail-release:hover,
  html[data-theme="dark"] .detail-toggle:hover,
  html[data-theme="dark"] .detail-edit:hover,
  html[data-theme="dark"] .detail-share:hover,
  html[data-theme="dark"] .detail-unreserve:hover,
  html[data-theme="dark"] .detail-release:hover { background:var(--ui-surface-subtle); }
  .detail-delete,
  html[data-theme="dark"] .detail-delete {
    background:var(--ui-danger-soft); border-color:color-mix(in srgb, var(--ui-danger) 16%, transparent);
    color:var(--ui-danger);
  }
  .detail-delete:hover,
  html[data-theme="dark"] .detail-delete:hover { background:color-mix(in srgb, var(--ui-danger) 18%, var(--ui-surface)); }
  #item-hover-preview,
  html[data-theme="dark"] #item-hover-preview {
    border-color:var(--ui-border); background:color-mix(in srgb, var(--ui-surface) 96%, transparent);
    box-shadow:var(--ui-shadow-md);
  }
  .item-hover-ph,
  html[data-theme="dark"] .item-hover-ph { background:var(--ui-surface-subtle); }
  #item-hover-name,
  html[data-theme="dark"] #item-hover-name { color:var(--ui-text); }
  #item-hover-price,
  html[data-theme="dark"] #item-hover-price { color:var(--ui-text-secondary); }

  #share-dlg,
  html[data-theme="dark"] #share-dlg {
    width:min(470px, calc(100vw - 32px)); padding:28px; border-radius:20px;
    background:var(--ui-surface); color:var(--ui-text); box-shadow:var(--ui-shadow-lg);
  }
  #share-title,
  html[data-theme="dark"] #share-title {
    color:var(--ui-text); font-family:var(--ui-subheading-font);
    font-size:24px; font-weight:var(--ui-subheading-weight); letter-spacing:-.4px;
  }
  #share-close,
  html[data-theme="dark"] #share-close {
    width:34px; height:34px; margin:-6px -6px 0 0; color:var(--ui-text-secondary); border-radius:10px;
  }
  #share-close:hover,
  html[data-theme="dark"] #share-close:hover { color:var(--ui-text); background:var(--ui-surface-subtle); }
  #share-options { gap:3px; }
  .share-option,
  html[data-theme="dark"] .share-option {
    min-height:49px; gap:12px; padding:7px 8px; color:var(--ui-text); border-radius:11px; font-size:17px;
    transition:background .15s ease, padding .15s ease;
  }
  .share-option:hover,
  html[data-theme="dark"] .share-option:hover { background:var(--ui-surface-subtle); padding-left:12px; }
  .share-service-icon { width:29px; height:29px; border-radius:9px; font-size:14px; }
  .share-option.copy-done { color:var(--ui-success); }
  html[data-theme="dark"] .share-service-icon.qr { background:#eff2f6; color:#20242c; }
  #qr-code {
    padding:10px; box-sizing:content-box; border:1px solid var(--ui-border);
    border-radius:14px; background:#fff;
  }
  #qr-panel p,
  html[data-theme="dark"] #qr-panel p { color:var(--ui-text-secondary); font-size:14px; }

@media (min-width: 1100px) {
    #panel-layout-btn { display:grid; }
    #panel.panel-expanded,
    html[data-theme="dark"] #panel.panel-expanded {
      width:50vw; flex-basis:50vw;
    }
    #panel.panel-expanded #list {
      display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
      grid-auto-rows:max-content; align-content:start; align-items:stretch; gap:12px;
    }
    #panel.panel-expanded .card {
      min-width:0; margin-bottom:0;
    }
    #panel.panel-expanded .card-summary {
      flex-direction:column; align-items:flex-start;
    }
    #panel.panel-expanded .thumb {
      width:120px; height:120px; align-self:center;
    }
    #panel.panel-expanded .meta { width:100%; }
    #panel.panel-expanded .card > .card-expanded-inline { display:none; }
    #panel.panel-expanded .card-expanded-row {
      display:block; min-width:0; grid-column:1 / -1;
    }
    #panel.panel-expanded .card-expanded-row .card-expanded {
      margin:0; padding:17px; border:1px solid var(--ui-border); border-left:3px solid var(--ui-accent);
      border-radius:15px; background:var(--ui-surface); box-shadow:var(--ui-shadow-sm);
    }
    #panel.panel-expanded #list > .empty { grid-column:1 / -1; }
}
@media (max-width: 880px) {
    #panel,
    html[data-theme="dark"] #panel {
      width:auto; flex:1; border-left:none; border-top:1px solid var(--ui-border); box-shadow:none;
    }
    .thumb,
    html[data-theme="dark"] .thumb { width:78px; height:78px; }
    #panel header { padding-top:8px; }
    .panel-mall-brand {
      display:flex; align-items:center; gap:8px; min-height:12px; margin:0 0 6px;
      color:var(--ui-text-secondary); font-size:8px; line-height:1;
      font-weight:750; letter-spacing:1.5px; text-transform:uppercase;
    }
    .panel-mall-brand span + span {
      display:flex; align-items:center; gap:8px;
    }
    .panel-mall-brand span + span::before {
      content:""; width:14px; height:1px; background:var(--ui-border);
    }
    #item-detail-dlg { width:min(94vw, 650px); }
    .item-detail-layout { grid-template-columns:1fr; }
    .item-detail-media { min-height:0; height:240px; border-right:none; border-bottom:1px solid var(--ui-border); }
    .item-detail-media img { max-height:240px; }
    .item-detail-body { padding:30px 24px 25px; }
}
@media (max-width: 560px) {
    #panel header { padding:8px 14px 14px; }
    #panel h1 { font-size:21px; }
    #list-owner-actions { gap:7px; }
    #list-owner-actions button { min-height:46px; padding-inline:7px; font-size:12px; }
    #list { padding:11px 10px 16px; }
    .card { padding:10px; }
    .thumb { width:72px; height:72px; }
    .mall-skin-options { grid-template-columns:1fr; }
    .mall-skin-card { display:grid; grid-template-columns:116px 1fr; }
    .mall-skin-preview { height:86px; border-right:1px solid var(--ui-border); border-bottom:0; }
    .mall-skin-copy { min-height:86px; padding:15px 34px 12px 13px; }
    .mall-skin-check { right:10px; bottom:auto; top:10px; }
    #item-detail-dlg,
    html[data-theme="dark"] #item-detail-dlg {
      width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:18px;
    }
    .item-detail-media { height:210px; }
    .item-detail-media img { max-height:210px; }
    .item-detail-body { padding:27px 18px 20px; }
    #item-detail-name { font-size:27px; }
    .item-detail-actions > * { flex:1 1 145px; }
    #share-dlg,
    html[data-theme="dark"] #share-dlg { width:calc(100vw - 16px); padding:23px 18px; }
    #share-title { font-size:24px; }
    .share-option { font-size:17px; }
    .qr-actions { align-items:stretch; flex-direction:column-reverse; }
    .qr-actions .quiet-btn, .qr-actions .primary-btn { width:100%; }
}
/* Bottom-panel controls never affect the desktop mall/list split. */
@media (max-width: 880px) {
    #panel-wishes {
      display:flex; flex:1; flex-direction:column; min-height:0;
    }
    #panel-mobile-controls {
      display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
      flex-wrap:wrap;
    }
    #panel-tabs {
      display:flex; gap:3px; padding:3px; border:1px solid var(--ui-border);
      border-radius:11px; background:var(--ui-surface-subtle);
    }
    #panel-tabs button, #panel-mobile-expand {
      min-height:44px; border:0; border-radius:8px; padding:9px 11px;
      font:inherit; font-size:12px; font-weight:700; cursor:pointer;
      color:var(--ui-text-secondary); background:transparent;
    }
    #panel-tabs button[aria-selected="true"] {
      background:var(--ui-surface); color:var(--ui-accent); box-shadow:var(--ui-shadow-sm);
    }
    #panel-mobile-expand {
      display:inline-flex; align-items:center; justify-content:center; gap:7px;
      margin-left:auto; border:1px solid var(--ui-border); color:var(--ui-text);
      background:var(--ui-surface); flex-shrink:0;
    }
    #panel-tabs button:focus-visible, #panel-mobile-expand:focus-visible,
    #panel-about:focus-visible, #panel-wishes:focus-visible {
      outline:2px solid var(--ui-accent); outline-offset:2px;
    }
    #panel-about { flex:1; min-height:0; overflow-y:auto; padding:14px; }
    #panel-about .demo-notice { margin:0; }
    #panel-about #demo-context summary { display:none; }
    #panel-about .demo-notice p { font-size:14px; line-height:1.55; }
    #panel-about .demo-notice .demo-disclaimer { font-size:12px; }
    /* Compact header: title + expand icon, then tabs/progress/owner icons on one row. */
    .panel-mall-brand { display:none; }
    #panel header,
    html[data-theme="dark"] #panel header {
      display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 14px 6px;
      border-bottom:0;
    }
    .panel-title-row { flex:1 0 100%; align-items:center; min-width:0; }
    /* Beside the icons the title may take two lines rather than end after a word. */
    #panel h1 {
      flex:1; min-width:0; margin:0; font-size:18px; line-height:1.2;
      display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
      overflow-wrap:anywhere;
    }
    #panel-mobile-expand,
    html[data-theme="dark"] #panel-mobile-expand {
      width:40px; height:40px; min-height:40px; padding:0; margin:0; border-radius:12px; font-size:16px;
    }
    #panel-mobile-expand span, #list-owner-actions span, #scene #my-lists-btn span {
      position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
    }
    #panel-mobile-controls { flex:none; margin:0; }
    #panel-tabs button { min-height:36px; padding:7px 11px; }
    #list-filters { flex:1 0 100%; margin:2px -14px 0; padding:0 14px 2px; }
    #panel-list-toolbar {
      display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:5px 8px;
      flex:1 1 120px; min-width:0;
    }
    #panel-list-toolbar[hidden] { display:none; }
    #progress-text,
    html[data-theme="dark"] #progress-text {
      grid-column:1; grid-row:1; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    #progress-track { grid-column:1; grid-row:2; }
    #list-owner-actions { grid-column:2; grid-row:1 / span 2; gap:6px; margin:0; }
    #list-owner-actions button,
    html[data-theme="dark"] #list-owner-actions button {
      flex:none; width:40px; height:40px; min-height:40px; padding:0; border-radius:12px; font-size:15px;
    }
    #list-owner-actions i { margin:0; }

    /* "My lists" floats over the mall, matching the sound button. */
    #scene #my-lists-btn {
      position:absolute; top:max(12px, env(safe-area-inset-top)); left:12px; z-index:50;
      display:grid; place-items:center; width:42px; height:42px; min-height:0; padding:0;
      border:1px solid rgba(255,255,255,.3); border-radius:50%;
      background:rgba(40,30,18,.45); color:#fff; font-size:16px; backdrop-filter:blur(4px);
    }
    #scene #my-lists-btn:hover { background:rgba(40,30,18,.65); }
    #scene #my-lists-btn i { display:block; }
    /* The same glass as the lists icon, wide enough to say what it does. */
    #scene #my-lists-btn.is-create {
      display:inline-flex; gap:7px; width:auto; padding:0 14px 0 12px; border-radius:21px; font-size:13px; font-weight:700;
      background:rgba(40,30,18,.45); border-color:rgba(255,255,255,.3); color:#fff;
      text-shadow:0 1px 2px rgba(0,0,0,.35);
    }
    #scene #my-lists-btn.is-create:hover { background:rgba(40,30,18,.65); filter:none; }
    #scene #my-lists-btn.is-create span { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }

    /* One horizontal strip of every wish, shop by shop as in the mall. */
    #list.shop-strip {
      display:flex; flex:none; gap:10px; overflow-x:auto; overflow-y:hidden;
      padding:4px 14px 12px; scroll-snap-type:x mandatory; scroll-padding-inline:14px;
      overscroll-behavior-x:contain; scrollbar-width:none;
    }
    #list.shop-strip::-webkit-scrollbar { display:none; }
    #list.shop-strip .card {
      flex:0 0 clamp(150px, 44vw, 210px); margin:0; padding:10px; scroll-snap-align:start;
    }
    #list.shop-strip .card:hover { transform:none; }
    #list.shop-strip .card { position:relative; }
    #list.shop-strip .card-shop {
      display:block; position:absolute; top:10px; right:10px;
      color:var(--ui-text-secondary); font-size:12px; opacity:.75;
    }
    #list.shop-strip .card-summary {
      display:grid; grid-template-columns:56px minmax(0, 1fr); grid-template-areas:"thumb price" "name name";
      align-items:center; gap:8px 10px; height:100%;
    }
    #list.shop-strip .thumb { grid-area:thumb; width:56px; height:56px; }
    #list.shop-strip .thumb.ph { font-size:22px; }
    #list.shop-strip .meta { display:contents; }
    #list.shop-strip .pr { grid-area:price; margin:0; color:var(--ui-text); font-size:13.5px; font-weight:750; }
    #list.shop-strip .nm { grid-area:name; align-self:start; min-height:2.6em; font-size:13px; font-weight:650; }
    #list.shop-strip .category-label { display:none; }
    #list.shop-strip .card.sel .pr { display:none; }
    #list.shop-strip .card.sel .card-details-hint {
      grid-area:price; display:inline-flex; align-items:center; gap:4px; min-width:0;
      color:var(--ui-accent); font-size:11.5px; font-weight:750; white-space:nowrap;
    }
    #list.shop-strip > .empty { flex:1; padding:22px 12px; }
    #list.shop-strip > .filter-notice {
      flex:0 0 clamp(150px, 44vw, 210px); flex-direction:column; align-items:flex-start; justify-content:center;
      margin:0; scroll-snap-align:start;
    }

    /* The panel keeps one height across tabs, so the mall never jumps. */
    /* On short landscape screens the mall keeps 40% and the panel scrolls instead. */
    #app:not(.mobile-list-expanded) #scene { flex:1 0 40dvh; height:auto; }
    #app:not(.mobile-list-expanded) #panel {
      flex:0 1 auto; min-height:0; height:calc(266px + env(safe-area-inset-bottom));
      overflow-x:hidden; overflow-y:auto;
    }
    /* The filter row is extra height, so the strip keeps its two cards. */
    #app.has-list-filters:not(.mobile-list-expanded) #panel { height:calc(308px + env(safe-area-inset-bottom)); }
    /* Expanded, the list takes the whole screen: the mall is hidden (and paused). */
    #app.mobile-list-expanded #scene { display:none; }
    #app.mobile-list-expanded #panel header { padding-top:max(10px, env(safe-area-inset-top)); }
    #panel .panel-title-row #my-lists-btn,
    html[data-theme="dark"] #panel .panel-title-row #my-lists-btn {
      display:grid; place-items:center; flex:none; width:40px; height:40px; min-height:40px; padding:0;
      border-radius:12px; font-size:15px;
    }
    #panel .panel-title-row #my-lists-btn span {
      position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
    }
    #panel .panel-icon-btn,
    html[data-theme="dark"] #panel .panel-icon-btn { width:40px; height:40px; min-height:40px; border-radius:12px; font-size:15px; }
    #app.mobile-list-expanded #swipe-hint { display:none; }
    /* The full-size actors would be cropped in the compact preview strip. */
    #app.mobile-list-expanded #l-actors { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    #panel,
    html[data-theme="dark"] #panel { transition:none; }
}

/* ============ ОКНО ТОВАРА: состояние видно трижды ============
   On the photo (a tag or the "received" stamp), in a banner under the price, and
   in the buttons: only a free wish has the green action. */
  :root { --item-mine-bg:#e7effa; --item-mine-text:#2c5a94; }
  html[data-theme="dark"] { --item-mine-bg:rgba(108,156,224,.18); --item-mine-text:#a9c6f0; }
  .item-detail-media { position:relative; }
  .item-detail-tag {
    position:absolute; top:16px; left:16px; padding:5px 11px; border-radius:99px;
    font-size:12px; font-weight:700;
  }
  .item-state-mine .item-detail-tag { background:var(--item-mine-bg); color:var(--item-mine-text); }
  .item-state-taken .item-detail-tag { background:var(--ui-warning-soft); color:var(--ui-warning); }
  .item-detail-stamp {
    position:absolute; right:20px; bottom:20px; display:inline-flex; align-items:center; gap:6px;
    padding:6px 13px; border:2px solid var(--ui-success); border-radius:10px;
    background:var(--ui-surface); color:var(--ui-success);
    font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    transform:rotate(-8deg); pointer-events:none;
  }
  .item-state-taken .item-detail-media img,
  .item-state-received .item-detail-media img { filter:saturate(.4); opacity:.7; }
  .item-state-taken #item-detail-name { color:var(--ui-text-secondary); }
  .item-state-received .item-detail-price { color:var(--ui-text-secondary); text-decoration:line-through; }
  .item-detail-banner {
    display:flex; align-items:flex-start; gap:10px; margin-top:18px; padding:12px 14px;
    border-radius:12px; font-size:14px; line-height:1.45; font-weight:600;
  }
  .item-detail-banner i { margin-top:2px; font-size:15px; }
  .item-state-mine .item-detail-banner { background:var(--item-mine-bg); color:var(--item-mine-text); }
  .item-state-taken .item-detail-banner { background:var(--ui-warning-soft); color:var(--ui-warning); }
  .item-state-received .item-detail-banner { background:var(--ui-success-soft); color:var(--ui-success); }
  :root .item-detail-actions .detail-primary {
    background:var(--ui-accent); border-color:var(--ui-accent); color:#fff;
  }
  :root .item-detail-actions .detail-primary:hover { background:var(--ui-accent-hover); border-color:var(--ui-accent-hover); }
  :root .item-detail-actions .item-detail-link {
    background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text);
  }
  :root .item-detail-actions .item-detail-link:hover { background:var(--ui-surface-subtle); color:var(--ui-text); }
  :root .item-detail-actions .detail-icon { width:42px; min-width:42px; padding:0; flex:0 0 auto; border-color:var(--ui-border); }

  /* Мур-карта: the owner's private loyalty card. */
  .stamps-btn { position:relative; }
  .stamps-btn[hidden] { display:none; }
  .stamps-btn.has-new::after {
    content:""; position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%;
    background:var(--ui-accent); box-shadow:0 0 0 2px var(--ui-surface);
  }
  #stamp-dlg {
    width:min(470px, calc(100vw - 32px)); padding:28px; border:none; border-radius:20px;
    background:var(--ui-surface); color:var(--ui-text); box-shadow:var(--ui-shadow-lg);
  }
  #stamp-dlg:focus { outline:none; }
  #stamp-dlg::backdrop { background:rgba(41,55,63,.34); backdrop-filter:blur(1.5px); }
  #stamp-title { margin:0; font-family:var(--ui-heading-font); font-weight:var(--ui-heading-weight); font-size:24px; line-height:1.2; }
  #stamp-close {
    flex-shrink:0; width:32px; height:32px; margin:-4px -6px 0 0; border:none; border-radius:9px;
    background:none; color:var(--ui-text-secondary); font-size:18px; cursor:pointer;
  }
  #stamp-close:hover { background:var(--ui-surface-subtle); color:var(--ui-text); }
  #stamp-progress { margin:0 0 16px; color:var(--ui-text-secondary); font-size:14px; }
  #stamp-grid {
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; padding:10px;
    border:1px solid var(--ui-border); border-radius:16px; background:var(--ui-surface-subtle);
  }
  .stamp-slot {
    display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; padding:10px 4px;
    border:none; border-radius:12px; background:none; color:var(--ui-text-secondary);
    font:inherit; cursor:pointer;
  }
  .stamp-slot:hover, .stamp-slot[aria-pressed="true"] { background:var(--ui-surface); }
  .stamp-slot:focus-visible { outline:2px solid var(--ui-accent); outline-offset:-2px; }
  .stamp-mark { position:relative; display:grid; place-items:center; width:76px; height:76px; }
  .stamp-mark img { width:100%; height:100%; object-fit:contain; filter:grayscale(1); opacity:.38; }
  /* A secret shows only its outline until it is found. */
  .stamp-mark.is-secret img { filter:brightness(0); opacity:.16; }
  html[data-theme="dark"] .stamp-mark.is-secret img { filter:brightness(0) invert(1); }
  .stamp-mark > i { position:absolute; color:var(--ui-text-secondary); font-size:20px; }
  .stamp-name { font-size:12px; font-weight:700; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
  .stamp-slot.is-earned { color:var(--ui-text); }
  .stamp-slot.is-earned .stamp-mark img { filter:drop-shadow(0 3px 4px rgba(60,40,20,.28)); opacity:1; }
  .stamp-slot.is-fresh .stamp-mark { animation:stamp-in .45s cubic-bezier(.2,.9,.3,1.2) both; }
  @keyframes stamp-in {
    from { opacity:0; transform:scale(1.7); }
    to { opacity:1; transform:scale(1); }
  }
  @media (min-width: 641px) {
    #stamp-dlg { width:min(580px, calc(100vw - 32px)); }
    #stamp-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  }
  #stamp-detail { min-height:66px; margin:14px 0 0; font-size:14px; line-height:1.5; }
  #stamp-detail p { margin:0; }
  #stamp-detail .stamp-condition { margin-top:4px; color:var(--ui-text-secondary); font-size:13px; }
  #stamp-detail .stamp-condition b { font-weight:700; }
  /* Slides up from the bottom of the mall, like an achievement in a game. */
  #stamp-toast, #undo-toast {
    inset:auto auto var(--toast-bottom, 20px) var(--toast-x, 50%); transform:translateX(-50%);
    width:max-content; max-width:var(--toast-max, calc(100vw - 24px)); margin:0;
    padding:10px 12px; border:1px solid var(--ui-border); border-radius:16px;
    background:var(--ui-surface); color:var(--ui-text); box-shadow:var(--ui-shadow-lg);
  }
  #stamp-toast:popover-open, #undo-toast:popover-open {
    display:flex; align-items:center; gap:12px;
    animation:stamp-toast-in .5s cubic-bezier(.2,.9,.3,1.12) both;
  }
  #stamp-toast:popover-open.is-leaving, #undo-toast:popover-open.is-leaving { animation:stamp-toast-out .35s ease-in both; }
  @keyframes stamp-toast-in {
    from { opacity:0; transform:translate(-50%, calc(100% + 28px)); }
    to { opacity:1; transform:translate(-50%, 0); }
  }
  @keyframes stamp-toast-out {
    from { opacity:1; transform:translate(-50%, 0); }
    to { opacity:0; transform:translate(-50%, calc(100% + 28px)); }
  }
  #stamp-toast-icons { display:flex; flex-shrink:0; }
  #stamp-toast-icons img {
    width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(60,40,20,.28));
    animation:stamp-in .45s .25s cubic-bezier(.2,.9,.3,1.2) both;
  }
  #stamp-toast-icons img + img { margin-left:-28px; }
  .stamp-toast-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
  #stamp-toast-label, #undo-toast-label { color:var(--ui-accent); font-size:12px; font-weight:700; }
  #stamp-toast-text, #undo-toast-text { font-size:15px; font-weight:700; line-height:1.25; }
  @media (max-width: 640px) {
    #stamp-toast-icons img { width:44px; height:44px; }
    #stamp-toast-icons img + img { margin-left:-32px; }
    #stamp-toast-text, #undo-toast-text { font-size:14px; }
  }
  #stamp-toast-open, #undo-toast-button {
    flex-shrink:0; min-height:32px; padding:4px 11px; border:none; border-radius:9px; background:var(--ui-surface-subtle);
    color:var(--ui-text); font:inherit; font-size:13px; cursor:pointer;
  }
  #stamp-toast-open:hover, #undo-toast-button:hover { background:var(--ui-border); }
  @media (prefers-reduced-motion: reduce) {
    .stamp-slot.is-fresh .stamp-mark, #stamp-toast-icons img { animation:none; }
    #stamp-toast:popover-open, #stamp-toast:popover-open.is-leaving,
    #undo-toast:popover-open, #undo-toast:popover-open.is-leaving { animation:none; }
  }

  /* Undoing a deletion: the stamp notice's layout, with the wish's own picture. */
  #undo-toast-image {
    display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; overflow:hidden;
    border-radius:10px; background:#fff; font-size:22px;
  }
  #undo-toast-image img { width:100%; height:100%; object-fit:contain; }
  #undo-toast-text { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #undo-toast-button { font-weight:700; }

  /* The promise beside the reserve button: whatever the owner's settings, they won't know who. */
  .detail-secret {
    display:flex; align-items:center; gap:7px; flex:1 0 100%; order:1; margin:2px 0 0;
    color:var(--ui-text-secondary); font-size:12.5px; line-height:1.4;
  }
  .detail-secret i { font-size:11px; color:var(--ui-accent); }

  /* For a visitor without an account the lists button invites them to start one. */
  #my-lists-btn.is-create,
  html[data-theme="dark"] #my-lists-btn.is-create {
    border-color:transparent; background:var(--ui-accent); color:#fff;
  }
  #my-lists-btn.is-create:hover,
  html[data-theme="dark"] #my-lists-btn.is-create:hover { background:var(--ui-accent); color:#fff; filter:brightness(.92); }

  /* A guest's own reservations: marked on the cards, gathered in one window. */
  .card-mine {
    display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px; white-space:nowrap;
    background:var(--item-mine-bg); color:var(--item-mine-text); font-size:11px; font-weight:700; line-height:1.4;
  }
  .card-mine[hidden] { display:none; }
  @media (max-width: 880px) {
    /* In the phone strip it shares the space beside the photo with the price. */
    #list.shop-strip .card-mine { grid-area:price; align-self:end; justify-self:start; margin:0; }
    #list.shop-strip .card:has(.card-mine:not([hidden])) .pr,
    #list.shop-strip .card:has(.card-mine:not([hidden])) .card-details-hint { align-self:start; }
  }
  #reservations-dlg {
    width:min(470px, calc(100vw - 32px)); padding:28px; border:none; border-radius:20px;
    background:var(--ui-surface); color:var(--ui-text); box-shadow:var(--ui-shadow-lg);
  }
  #reservations-dlg:focus { outline:none; }
  #reservations-dlg::backdrop { background:rgba(41,55,63,.34); backdrop-filter:blur(1.5px); }
  #reservations-title { margin:0; font-family:var(--ui-heading-font); font-weight:var(--ui-heading-weight); font-size:24px; line-height:1.2; }
  #reservations-close {
    flex-shrink:0; width:32px; height:32px; margin:-4px -6px 0 0; border:none; border-radius:9px;
    background:none; color:var(--ui-text-secondary); font-size:18px; cursor:pointer;
  }
  #reservations-close:hover { background:var(--ui-surface-subtle); color:var(--ui-text); }
  #reservations-list { display:flex; flex-direction:column; gap:8px; margin:6px 0 0; padding:0; list-style:none; }
  .reservation-row {
    display:grid; grid-template-columns:56px minmax(0, 1fr) auto; align-items:center; gap:12px; width:100%; padding:8px;
    border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface); color:var(--ui-text);
    font:inherit; text-align:left; cursor:pointer;
  }
  .reservation-row:hover { background:var(--ui-surface-subtle); }
  .reservation-row:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
  .reservation-row img, .reservation-ph {
    display:grid; place-items:center; width:56px; height:56px; border-radius:10px; object-fit:cover;
    background:var(--ui-surface-subtle); font-size:22px;
  }
  .reservation-name { font-size:14px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
  .reservation-price { color:var(--ui-text-secondary); font-size:13px; font-weight:700; white-space:nowrap; }