/* Murr Mall: sign-in, dashboard, and profile */

  body.home { overflow:auto; -webkit-user-select:text; user-select:text; }
  body.home #app, body.home #fx { display:none; }
  body.mall-loading #home { display:none; }
  /* когда смонтирована уличная сценка, фон кабинета отдаём её небу */
  body.ods-active { background:#cfe3ec; }
  body.ods-active #home { background:none; }
  body.ods-active .home-shell { padding-bottom:190px; } /* контент не прячется за полосой улицы */

  /* ============ ЛИЧНЫЙ КАБИНЕТ ============ */
  #home {
    min-height:100vh; min-height:100dvh; color:#46392a;
    background:
      radial-gradient(900px 520px at 15% 0%, rgba(255,232,178,.68), transparent 70%),
      radial-gradient(720px 500px at 95% 20%, rgba(164,196,145,.26), transparent 70%),
      linear-gradient(145deg,#f9f0dd,#e8d7b8);
  }
  body:not(.home) #home { display:none; }
  .home-shell { width:min(1020px, calc(100% - 32px)); margin:0 auto; padding:36px 0 70px; }
  /* the same header as the landing pages, with the tagline under the wordmark */
  .home-top {
    display:flex; align-items:center; justify-content:space-between; gap:16px 24px;
    max-width:1240px; margin:0 auto; padding:26px 32px 0;
  }
  .home-top-brand { min-width:0; }
  .home-wordmark {
    font-family:var(--brand-font); font-weight:650; font-size:23px;
    letter-spacing:.01em; line-height:1.2; color:inherit; text-decoration:none;
  }
  .home-tagline { display:block; margin-top:2px; font-size:13px; line-height:1.35; }
  .home-top-actions { display:flex; align-items:center; justify-content:flex-end; gap:20px; flex-shrink:0; }
  .profile-select { position:relative; display:block; }
  .profile-select::after {
    content:'\f078'; position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none;
    font:900 10px/1 "Font Awesome 6 Free";
  }
  .profile-field select {
    width:100%; min-height:46px; padding:12px 38px 12px 14px; appearance:none; -webkit-appearance:none;
    font:inherit; font-size:16px; font-weight:400; cursor:pointer;
  }
  #profile-appearance, #profile-account { margin-top:18px; padding:28px; }
  #profile-appearance h2, #profile-account h2 { font-family:var(--ui-subheading-font); font-size:22px; font-weight:var(--ui-subheading-weight); }
  #profile-appearance p, #profile-account p { margin-top:5px; font-size:13px; overflow-wrap:anywhere; }
  #profile-account .danger-btn { margin-top:18px; }
  #profile-account .profile-legal { margin-top:18px; font-size:12px; }
  .profile-legal a, #auth-legal a { color:inherit; text-underline-offset:2px; }
  .profile-appearance-fields { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:17px; margin-top:20px; }
  .home-card {
    background:rgba(255,252,245,.88); border:1px solid rgba(122,92,62,.15); border-radius:24px;
    box-shadow:0 18px 60px rgba(68,48,25,.13); backdrop-filter:blur(10px);
  }
  #signed-out { max-width:550px; margin:8vh auto 0; padding:36px; text-align:center; }
  #signed-out h1 { font-family:var(--ui-heading-font); font-size:34px; font-weight:var(--ui-heading-weight); }
  #signed-out p { color:#806d53; line-height:1.55; margin:12px auto 22px; max-width:430px; }
  #auth-form { display:flex; gap:9px; max-width:430px; margin:0 auto; }
  #auth-form input, #list-form input {
    flex:1; min-width:0; padding:12px 13px; border:1px solid #d7c4a3; border-radius:11px;
    background:#fff; color:#3c3226; font-size:15px;
  }
  #auth-form input:focus, #list-form input:focus { outline:2px solid rgba(217,165,78,.48); border-color:#d9a54e; }
  #auth-status { min-height:20px; margin-top:13px; color:#7a684f; font-size:13px; }
  #auth-status.error { color:#b14331; }
  #file-warning {
    display:none; margin:18px auto 0; padding:10px 12px; max-width:450px; border-radius:10px;
    background:#fff0cd; color:#765523; font-size:12px; line-height:1.45;
  }
  #demo-link { display:inline-block; margin-top:12px; color:#887154; font-size:12px; }
  /* Where the email is asked for, so the terms and privacy policy are a click away. */
  #auth-legal { display:block; max-width:400px; margin:12px auto 0; color:var(--ui-text-secondary); font-size:12px; line-height:1.45; }
  .dash-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:24px 0; }
  .dash-head h1 { font-family:var(--ui-heading-font); font-size:34px; font-weight:var(--ui-heading-weight); }
  .dash-head p { margin-top:5px; color:#947d60; font-size:13px; }
  .dash-actions { display:flex; align-items:center; gap:9px; }
  #dashboard-profile-link {
    min-width:0; min-height:48px; align-self:stretch; display:flex; align-items:center; gap:9px; padding:3px 3px 3px 12px;
    border:none; border-radius:24px; background:rgba(116,85,56,.08); color:#68543d; cursor:pointer;
  }
  #dashboard-profile-link[hidden] { display:none; }
  #dashboard-profile-link:hover { background:rgba(116,85,56,.15); }
  #dashboard-profile-label { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
  .dashboard-avatar {
    width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; overflow:hidden;
    border-radius:50%; background:#e8dcc7; color:#8f7759; font-size:16px;
  }
  .dashboard-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .dashboard-avatar img[hidden], .dashboard-avatar i[hidden] { display:none; }
  :is(#wishlists, #archived-lists) { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:15px; }
  .wishlist-card { padding:19px; min-height:158px; display:flex; flex-direction:column; }
  .wishlist-open { width:100%; border:none; background:none; text-align:left; cursor:pointer; color:inherit; flex:1; }
  .wishlist-open h2 { font-size:18px; line-height:1.3; overflow-wrap:anywhere; }
  .wishlist-open p { color:#9a8264; font-size:12px; margin-top:7px; }
  .wishlist-preview { display:grid; grid-template-columns:repeat(3,52px); gap:7px; margin-top:15px; }
  .wishlist-preview-tile {
    width:52px; height:52px; display:grid; place-items:center; overflow:hidden;
    border-radius:10px; background:#f1e6d2; color:#9d8567; font-size:23px;
  }
  .wishlist-preview-tile img { width:100%; height:100%; display:block; object-fit:cover; }
  .wishlist-card-actions { display:flex; justify-content:flex-end; gap:5px; margin-top:18px; flex-wrap:wrap; }
  .wishlist-card-actions button { padding:7px 8px; font-size:10.5px; }
  .wishlist-card-actions i { margin-right:4px; }
  .wishlist-card-actions .icon-only { width:32px; padding:7px; }
  .wishlist-card-actions .icon-only i { margin-right:0; }
  :is(#dashboard-empty, #archive-empty) { padding:58px 25px; text-align:center; }
  :is(#dashboard-empty, #archive-empty) .paw { font-size:38px; margin-bottom:10px; }
  :is(#dashboard-empty, #archive-empty) h2 { font-size:18px; }
  :is(#dashboard-empty, #archive-empty) p { color:#947d60; font-size:13px; margin-top:7px; }
  :is(#dashboard-status, #archive-status) { color:#806d53; font-size:13px; padding:18px 2px; }
  #profile-view { max-width:760px; margin:24px auto 0; }
  .profile-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
  .profile-head-actions { display:flex; align-items:center; gap:8px; }
  .profile-head h1 { font-family:var(--ui-heading-font); font-size:34px; font-weight:var(--ui-heading-weight); }
  .profile-head p { margin-top:5px; color:#947d60; font-size:13px; }
  .profile-head button i, .dash-actions button i { margin-right:6px; }
  #profile-form { padding:28px; }
  .profile-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; align-items:start; }
  .profile-avatar-panel { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .profile-avatar {
    width:136px; height:136px; display:grid; place-items:center; overflow:hidden; border-radius:50%;
    border:4px solid rgba(255,255,255,.86); background:#e8dac1; color:#9c866a; font-size:46px;
    box-shadow:0 10px 28px rgba(73,52,29,.17);
  }
  .profile-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .profile-avatar img[hidden] { display:none; }
  .profile-avatar-actions { display:flex; flex-direction:column; gap:7px; width:100%; }
  .profile-avatar-actions label { display:block; }
  .profile-avatar-actions .quiet-btn, .profile-avatar-actions .danger-btn { width:100%; }
  #avatar-remove-btn[hidden] { display:none; }
  #avatar-input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .avatar-hint { color:#9a8264; font-size:11px; line-height:1.4; }
  .profile-fields { display:grid; gap:17px; }
  .profile-field { display:grid; gap:7px; color:#65533e; font-size:13px; font-weight:700; }
  .profile-field input, .profile-field textarea {
    width:100%; padding:12px 13px; border:1px solid #d7c4a3; border-radius:11px;
    background:#fff; color:#3c3226; font:inherit; font-size:15px; font-weight:400;
  }
  .profile-field input:focus, .profile-field textarea:focus { outline:2px solid rgba(217,165,78,.48); border-color:#d9a54e; }
  .profile-field input[readonly] { background:rgba(232,220,198,.43); color:#806d53; cursor:default; }
  .profile-field textarea { min-height:116px; resize:vertical; line-height:1.5; }
  .profile-field-meta { display:flex; justify-content:space-between; gap:12px; color:#9a8264; font-size:11px; font-weight:400; }
  .profile-footer { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:24px; padding-top:21px; border-top:1px solid rgba(122,92,62,.13); }
  #profile-status { flex:1; min-height:20px; color:#6f805d; font-size:13px; }
  #profile-status.error { color:#b14331; }

  html[data-theme="dark"] #home {
    color:#f2eadc;
    background:
      radial-gradient(900px 520px at 15% 0%, rgba(93,119,158,.24), transparent 70%),
      radial-gradient(720px 500px at 95% 20%, rgba(76,112,91,.18), transparent 70%),
      linear-gradient(145deg,#111a28,#0b111b);
  }
  html[data-theme="dark"] body.ods-active #home { background:none; }
  html[data-theme="dark"] .dash-head p,
  html[data-theme="dark"] .profile-head p,
  html[data-theme="dark"] .wishlist-open p,
  html[data-theme="dark"] :is(#dashboard-empty, #archive-empty) p,
  html[data-theme="dark"] .avatar-hint,
  html[data-theme="dark"] .profile-field-meta { color:#b5a68f; }
  html[data-theme="dark"] #dashboard-profile-link {
    background:rgba(230,210,176,.09); color:#eee4d3; border:1px solid rgba(230,210,176,.08);
  }
  html[data-theme="dark"] #dashboard-profile-link:hover { background:rgba(230,210,176,.15); }
  html[data-theme="dark"] .dashboard-avatar {
    background:#2a3443; color:#c6b69d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  }
  html[data-theme="dark"] .home-card {
    background:rgba(18,25,37,.9); border-color:rgba(232,206,162,.13);
    box-shadow:0 18px 60px rgba(0,0,0,.28);
  }
  html[data-theme="dark"] #signed-out p,
  html[data-theme="dark"] #auth-status,
  html[data-theme="dark"] :is(#dashboard-status, #archive-status) { color:#b9aa92; }
  html[data-theme="dark"] #demo-link { color:#d7bd8f; }
  html[data-theme="dark"] .profile-field { color:#d9cbb6; }
  html[data-theme="dark"] .profile-field input[readonly] { background:#192230; color:#aeb8c5; }
  html[data-theme="dark"] .profile-avatar {
    border-color:rgba(203,216,234,.2); background:#263244; color:#acb8c8;
    box-shadow:0 10px 28px rgba(0,0,0,.32);
  }
  html[data-theme="dark"] .profile-footer { border-top-color:rgba(230,210,176,.12); }
  html[data-theme="dark"] .wishlist-preview-tile { background:#253041; color:#c5b69f; }
  html[data-theme="dark"] #file-warning { background:#3a2e18; color:#f0d9a7; }
@media (max-width: 880px) {
    .home-shell { width:min(100% - 22px, 720px); padding-top:18px; }
    #signed-out { margin-top:3vh; padding:27px 20px; }
    #signed-out h1, .dash-head h1 { font-size:28px; }
    #auth-form { flex-direction:column; }
    .dash-head { align-items:flex-start; flex-direction:column; }
    .dash-actions { width:100%; flex-wrap:wrap; }
    .dash-actions #create-list-btn { order:-1; flex:1; }
    .home-top { padding:20px 20px 0; }
    #dashboard-profile-label { max-width:90px; }
    #profile-view { margin-top:14px; }
    .profile-head { align-items:flex-start; flex-direction:column; }
    .profile-head-actions { width:100%; }
    .profile-head-actions button { flex:1; }
    .profile-head h1 { font-size:28px; }
    #profile-form { padding:22px 18px; }
    .profile-layout { grid-template-columns:1fr; gap:24px; }
    .profile-avatar-panel { max-width:220px; margin:0 auto; }
    .profile-field input, .profile-field textarea { font-size:16px; }
    .profile-footer { align-items:stretch; flex-direction:column; }
    .profile-footer .primary-btn { width:100%; }
}
  #home {
    color:var(--ui-text);
    background:
      radial-gradient(900px 540px at -5% -5%, rgba(194,65,100,.09), transparent 68%),
      radial-gradient(760px 520px at 105% 14%, rgba(107,126,164,.10), transparent 70%),
      var(--ui-bg);
  }
  html[data-theme="dark"] body { background:var(--ui-bg); }
  html[data-theme="dark"] #home {
    color:var(--ui-text);
    background:
      radial-gradient(880px 520px at -5% -5%, rgba(216,91,124,.10), transparent 68%),
      radial-gradient(760px 520px at 105% 14%, rgba(90,111,154,.13), transparent 70%),
      var(--ui-bg);
  }
  body.ods-active #home,
  html[data-theme="dark"] body.ods-active #home { background:none; }
  .home-shell { width:min(1080px, calc(100% - 40px)); padding:24px 0 80px; }
  .home-wordmark { color:var(--ui-text); }
  .home-tagline { color:var(--ui-text-secondary); }
  .profile-field select,
  html[data-theme="dark"] .profile-field select {
    border:1px solid var(--ui-border); border-radius:11px; background:var(--ui-surface);
    color:var(--ui-text); box-shadow:0 1px 2px rgba(18,24,40,.025);
    transition:border-color .16s ease, box-shadow .16s ease;
  }
  .profile-field select:focus { outline:none; border-color:var(--ui-accent); box-shadow:0 0 0 3px var(--ui-focus); }
  .profile-select::after { color:var(--ui-text-secondary); }
  #profile-appearance h2, #profile-account h2 { color:var(--ui-text); font-family:var(--ui-subheading-font); }
  #profile-appearance p, #profile-account p { color:var(--ui-text-secondary); }
  #profile-account b { color:var(--ui-text); font-weight:650; }
  /* An on/off switch for settings that are a yes or a no. */
  .profile-toggle {
    display:flex; align-items:flex-start; gap:12px; margin-top:20px; padding-top:18px;
    border-top:1px solid var(--ui-border); cursor:pointer;
  }
  .profile-toggle input {
    position:relative; flex:none; width:44px; height:26px; margin:1px 0 0; border-radius:99px;
    background:var(--ui-border); appearance:none; -webkit-appearance:none; cursor:pointer;
    transition:background .18s ease;
  }
  .profile-toggle input::after {
    content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease;
  }
  .profile-toggle input:checked { background:var(--ui-accent); }
  .profile-toggle input:checked::after { transform:translateX(18px); }
  .profile-toggle input:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ui-focus); }
  .profile-toggle input:disabled { opacity:.6; cursor:wait; }
  .profile-toggle[hidden] { display:none; }
  .profile-toggle-copy { display:grid; gap:3px; }
  .profile-toggle-copy b { color:var(--ui-text); font-size:14px; font-weight:700; }
  .profile-toggle-copy small { color:var(--ui-text-secondary); font-size:12.5px; line-height:1.4; }

  #dashboard-profile-link,
  html[data-theme="dark"] #dashboard-profile-link {
    min-height:46px; border:1px solid var(--ui-border); border-radius:14px;
    background:color-mix(in srgb, var(--ui-surface) 92%, transparent); color:var(--ui-text-secondary);
    box-shadow:0 1px 2px rgba(18,24,40,.03);
    transition:border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  #dashboard-profile-link:hover,
  html[data-theme="dark"] #dashboard-profile-link:hover {
    background:var(--ui-surface); border-color:color-mix(in srgb, var(--ui-accent) 34%, var(--ui-border));
    color:var(--ui-text);
  }
  .profile-field option { background:var(--ui-surface); color:var(--ui-text); }
  #dashboard-profile-link { min-height:46px; padding:3px 4px 3px 13px; }
  #dashboard-profile-label { font-size:13px; font-weight:650; }
  .dashboard-avatar,
  html[data-theme="dark"] .dashboard-avatar {
    width:36px; height:36px; background:var(--ui-accent-soft); color:var(--ui-accent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 15%, transparent);
  }

  .home-card,
  html[data-theme="dark"] .home-card {
    background:color-mix(in srgb, var(--ui-surface) 97%, transparent);
    border:1px solid var(--ui-border); border-radius:var(--ui-radius);
    box-shadow:var(--ui-shadow-sm); backdrop-filter:blur(14px);
  }
  #signed-out {
    max-width:590px; margin:7vh auto 0; padding:46px 48px 42px; position:relative; overflow:hidden;
  }
  #signed-out::before {
    content:""; position:absolute; box-sizing:border-box; width:150px; height:150px; top:-128px; right:-66px;
    border:28px solid var(--ui-accent-soft); border-radius:50%; pointer-events:none;
  }
  #signed-out h1,
  .dash-head h1,
  .profile-head h1 {
    color:var(--ui-text); font-family:var(--ui-heading-font);
    font-weight:var(--ui-heading-weight); letter-spacing:-.65px;
  }
  #signed-out h1 { font-size:38px; line-height:1.08; }
  #signed-out p,
  html[data-theme="dark"] #signed-out p {
    max-width:440px; margin:15px auto 27px; color:var(--ui-text-secondary);
    font-size:16px; line-height:1.6;
  }
  #auth-form { max-width:460px; gap:10px; }

  .dash-head { margin:24px 0 26px; align-items:flex-end; }
  .dash-head h1, .profile-head h1 { font-size:38px; line-height:1.08; }
  .dash-head p, .profile-head p,
  html[data-theme="dark"] .dash-head p,
  html[data-theme="dark"] .profile-head p {
    margin-top:8px; color:var(--ui-text-secondary); font-size:14px;
  }
  .dash-actions .primary-btn { min-height:44px; }
  :is(#wishlists, #archived-lists) { grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:18px; }
  .wishlist-card {
    min-height:226px; padding:22px; position:relative; overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .wishlist-card::before {
    content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ui-accent);
    opacity:0; transition:opacity .18s ease;
  }
  .wishlist-card:hover {
    transform:translateY(-3px); border-color:color-mix(in srgb, var(--ui-accent) 22%, var(--ui-border));
    box-shadow:0 18px 40px rgba(18,24,40,.09);
  }
  html[data-theme="dark"] .wishlist-card:hover { box-shadow:0 18px 40px rgba(0,0,0,.28); }
  .wishlist-card:hover::before { opacity:1; }
  .wishlist-open { padding:0; border-radius:10px; }
  .wishlist-open h2 {
    color:var(--ui-text); font-family:var(--ui-subheading-font);
    font-size:23px; font-weight:var(--ui-subheading-weight); letter-spacing:-.2px;
  }
  .wishlist-open p,
  html[data-theme="dark"] .wishlist-open p { margin-top:6px; color:var(--ui-text-secondary); font-size:13px; }
  .wishlist-open .wishlist-description {
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    line-height:1.45; overflow-wrap:anywhere;
  }
  .wishlist-preview { grid-template-columns:repeat(3,58px); gap:8px; margin-top:18px; }
  .wishlist-preview-tile,
  html[data-theme="dark"] .wishlist-preview-tile {
    width:58px; height:58px; border:1px solid var(--ui-border); border-radius:12px;
    background:var(--ui-surface-subtle); color:var(--ui-text-secondary); font-size:22px;
  }
  .wishlist-card-actions {
    justify-content:flex-start; align-items:center; gap:7px; margin-top:20px;
    padding-top:16px; border-top:1px solid var(--ui-border);
  }
  .wishlist-card-actions button { min-height:34px; padding:7px 10px; font-size:12px; }
  .wishlist-card-actions .icon-only { width:34px; min-width:34px; padding:7px; }
  .wishlist-card-actions :is(.archive-list, .delete-list) { margin-left:auto; }
  /* An archived card is not a link: its wishlist is closed until it is restored. */
  div.wishlist-open { cursor:default; }
  .wishlist-card.archived:hover { transform:none; }
  .wishlist-card.archived:hover::before { opacity:0; }
  .wishlist-card.archived .wishlist-preview { opacity:.7; }
  #archive-link { margin-top:22px; }
  #archive-link[hidden] { display:none; }
  #archive-empty .paw i { font-size:24px; }
  :is(#dashboard-empty, #archive-empty) { padding:66px 28px; }
  :is(#dashboard-empty, #archive-empty) .paw {
    width:60px; height:60px; display:grid; place-items:center; margin:0 auto 17px;
    border-radius:20px; background:var(--ui-accent-soft); color:var(--ui-accent); font-size:27px;
  }
  :is(#dashboard-empty, #archive-empty) h2 { color:var(--ui-text); font-family:var(--ui-subheading-font); font-size:24px; }
  :is(#dashboard-empty, #archive-empty) p,
  html[data-theme="dark"] :is(#dashboard-empty, #archive-empty) p { margin-top:8px; color:var(--ui-text-secondary); font-size:14px; }

  #profile-view { max-width:820px; }
  .profile-head { margin-bottom:22px; }
  #profile-form { padding:34px; }
  .profile-layout { grid-template-columns:190px minmax(0,1fr); gap:38px; }
  .profile-avatar {
    width:142px; height:142px; border:5px solid var(--ui-surface);
    background:var(--ui-accent-soft); color:var(--ui-accent);
    box-shadow:0 0 0 1px var(--ui-border), 0 16px 34px rgba(18,24,40,.10);
  }
  html[data-theme="dark"] .profile-avatar {
    border-color:var(--ui-surface); background:var(--ui-accent-soft); color:var(--ui-accent);
    box-shadow:0 0 0 1px var(--ui-border), 0 16px 34px rgba(0,0,0,.28);
  }
  .avatar-hint,
  .profile-field-meta,
  html[data-theme="dark"] .avatar-hint,
  html[data-theme="dark"] .profile-field-meta { color:var(--ui-text-secondary); font-size:12px; }
  .profile-fields { gap:19px; }
  .profile-field,
  html[data-theme="dark"] .profile-field {
    gap:8px; color:var(--ui-text); font-size:13px; font-weight:700; letter-spacing:.1px;
  }
  .profile-footer {
    margin-top:28px; padding-top:22px; border-top-color:var(--ui-border);
  }
  html[data-theme="dark"] .profile-footer { border-top-color:var(--ui-border); }
  #auth-status, :is(#dashboard-status, #archive-status), #profile-status { font-size:14px; }
  #file-warning, #demo-link { font-size:13px; }
  #profile-status { color:var(--ui-success); }
@media (max-width: 880px) {
    .home-shell { width:min(100% - 28px, 760px); padding-top:20px; }
    #signed-out { margin-top:3vh; padding:36px 28px 32px; }
    #signed-out h1, .dash-head h1, .profile-head h1 { font-size:32px; }
    .dash-head { align-items:flex-start; }
    :is(#wishlists, #archived-lists) { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
    .profile-layout { grid-template-columns:1fr; gap:28px; }
    .profile-avatar-panel { max-width:240px; }
    /* Safari on iPhone gives a date field its own minimum width, wider than a narrow
       card; without the native look it fits the column like the other fields. */
    .profile-fields, .profile-field { min-width:0; }
    .profile-field input[type="date"] {
      display:block; min-width:0; max-width:100%; min-height:46px;
      -webkit-appearance:none; appearance:none;
    }
    .profile-field input[type="date"]::-webkit-date-and-time-value { text-align:left; }
}
@media (max-width: 560px) {
    .home-shell { width:calc(100% - 20px); padding:14px 0 52px; }
    .home-top { padding:16px 14px 0; gap:12px; }
    .home-top-actions { gap:8px; }
    .home-wordmark { font-size:21px; }
    .home-tagline { font-size:12px; }
    #dashboard-profile-link { min-height:42px; }
    #dashboard-profile-label { display:none; }
    #dashboard-profile-link, html[data-theme="dark"] #dashboard-profile-link { padding:3px; }
    #profile-appearance, #profile-account { padding:22px 17px; }
    #profile-account .danger-btn { width:100%; }
    .profile-appearance-fields { grid-template-columns:1fr; }
    .dashboard-avatar { width:34px; height:34px; }
    #signed-out { padding:33px 20px 28px; border-radius:17px; }
    #signed-out h1 { font-size:30px; }
    #signed-out p { font-size:15px; }
    #auth-form { gap:9px; }
    #auth-form .primary-btn { width:100%; min-height:46px; }
    .dash-head { margin:18px 0 22px; gap:17px; }
    .dash-actions .primary-btn { width:100%; }
    :is(#wishlists, #archived-lists) { grid-template-columns:1fr; gap:12px; }
    .wishlist-card { min-height:0; padding:19px; }
    .wishlist-preview { grid-template-columns:repeat(3,52px); }
    .wishlist-preview-tile { width:52px; height:52px; }
    .wishlist-card-actions { margin-top:17px; }
    :is(#dashboard-empty, #archive-empty) { padding:52px 20px; }
    .profile-head-actions { gap:7px; }
    .profile-head-actions button { min-width:0; padding-inline:10px; }
    #profile-form { padding:22px 17px; }
    .profile-avatar { width:126px; height:126px; }
    .profile-footer { gap:10px; }
}
@media (max-width: 640px) {
    /* Mobile keeps a comfortable form rhythm while the translucent surface
       lets the landmark band remain visible beneath the card. */
    #signed-out {
      margin-top:0; padding:26px 20px 23px;
      background:color-mix(in srgb, var(--ui-surface) 32%, transparent);
      border-color:color-mix(in srgb, var(--ui-border) 54%, transparent);
      box-shadow:0 8px 26px rgba(18,24,40,.06);
      -webkit-backdrop-filter:blur(2px) saturate(.96);
      backdrop-filter:blur(2px) saturate(.96);
    }
    html[data-theme="dark"] #signed-out { box-shadow:0 8px 28px rgba(0,0,0,.12); }
    #signed-out::before { opacity:.32; }
    #signed-out h1 {
      max-width:310px; margin-inline:auto;
      font-size:clamp(24px, 7vw, 27px); line-height:1.04; letter-spacing:-.45px;
    }
    #signed-out h1,
    #signed-out p {
      text-shadow:0 1px 1px var(--ui-surface), 0 0 14px var(--ui-surface);
    }
    #signed-out p,
    html[data-theme="dark"] #signed-out p {
      margin:12px auto 18px; font-size:13px; line-height:1.38;
    }
    #auth-form { gap:12px; }
    #auth-status { min-height:18px; margin-top:9px; }
    #auth-status:empty { min-height:12px; margin-top:0; }
    #demo-link {
      margin-top:10px; padding:5px 10px; border-radius:999px;
      background:color-mix(in srgb, var(--ui-surface) 42%, transparent);
      font-size:12px;
    }
}
@media (max-width: 640px) and (max-height: 700px) {
    .home-shell { padding-top:8px; }
    #signed-out { padding:21px 17px 20px; }
    #signed-out h1 { max-width:280px; font-size:23px; }
    #signed-out p,
    html[data-theme="dark"] #signed-out p {
      display:block; margin:10px auto 15px;
      font-size:12.5px; line-height:1.35;
    }
    #auth-form { gap:10px; }
    #auth-form input { padding-block:11px; }
    #auth-form .primary-btn { min-height:45px; }
}
@media (max-width: 360px) {
    .home-wordmark { font-size:19px; }
}

/* Followish import */
#import-dlg {
  width:min(820px, calc(100vw - 32px));
  max-height:min(900px, calc(100vh - 32px));
  overflow:auto;
  overscroll-behavior:contain;
}
/* The link step is a short form: fit the dialog to it. :where keeps the phone sheet rules winning. */
#import-dlg:where(:has(#import-source-step:not([hidden]))) { width:min(720px, calc(100vw - 32px)); }
#import-dlg [hidden] { display:none !important; }
#import-dlg h2 { margin:0; }
.import-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  margin-bottom:22px;
}
.import-title-row { display:flex; align-items:center; gap:9px; }
.import-title-row h2 { font-size:24px; }
.import-beta {
  display:inline-flex; align-items:center; min-height:22px; padding:3px 8px;
  border-radius:999px; background:var(--ui-warning-soft); color:var(--ui-warning);
  font-size:11px; line-height:1; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.import-head p {
  max-width:650px; margin-top:8px; color:var(--ui-text-secondary);
  font-size:14px; line-height:1.5;
}
.import-close {
  width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center;
  border:1px solid var(--ui-border); border-radius:11px; background:var(--ui-surface);
  color:var(--ui-text-secondary); cursor:pointer;
}
.import-close:hover { color:var(--ui-text); background:var(--ui-surface-subtle); }
.import-hint {
  margin:7px 0 0; color:var(--ui-text-secondary); font-size:12.5px; line-height:1.45;
}
.import-status {
  min-height:20px; margin-top:12px; color:var(--ui-text-secondary);
  font-size:13px; line-height:1.4;
}
.import-status.error { color:var(--ui-danger); }
.import-summary {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:18px; padding:15px 17px; border:1px solid var(--ui-border);
  border-radius:14px; background:var(--ui-surface-subtle);
}
.import-summary > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.import-summary strong {
  overflow:hidden; color:var(--ui-text); font-size:16px; text-overflow:ellipsis; white-space:nowrap;
}
.import-summary span { color:var(--ui-text-secondary); font-size:12.5px; }
.import-provider {
  flex:0 0 auto; padding:5px 9px; border:1px solid var(--ui-border);
  border-radius:999px; background:var(--ui-surface); font-weight:750;
}
.import-destination {
  margin:0; padding:15px 16px 16px; border:1px solid var(--ui-border);
  border-radius:14px;
}
.import-destination legend {
  padding:0 6px; color:var(--ui-text); font-size:13px; font-weight:800;
}
.import-destination-options { display:flex; flex-wrap:wrap; gap:9px 20px; margin-bottom:13px; }
#import-dlg .import-radio,
#import-dlg .import-completed-toggle,
#import-dlg .import-item-select {
  display:flex; align-items:center; margin:0; color:var(--ui-text);
}
#import-dlg .import-radio { gap:8px; cursor:pointer; }
#import-dlg .import-radio.is-disabled { opacity:.46; cursor:not-allowed; }
#import-dlg input[type="checkbox"],
#import-dlg input[type="radio"] {
  appearance:auto; width:17px; height:17px; flex:0 0 auto;
  display:inline-block; margin:0; padding:0; box-shadow:none;
  accent-color:var(--ui-accent);
}
.import-destination-fields {
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(180px, .7fr); gap:12px;
}
.import-destination-fields > label { margin:0; }
#import-existing-fields { grid-template-columns:1fr; }
.import-selection-bar {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:17px;
}
#import-dlg .import-completed-toggle { gap:8px; cursor:pointer; }
.import-selection-actions { display:flex; gap:6px; }
.import-selection-actions button {
  padding:6px 9px; border:1px solid var(--ui-border); border-radius:9px;
  background:var(--ui-surface); color:var(--ui-text-secondary);
  font-size:12px; font-weight:700; cursor:pointer;
}
.import-selection-actions button:hover { background:var(--ui-surface-subtle); color:var(--ui-text); }
.import-selected-count {
  margin:10px 0 8px; color:var(--ui-text-secondary); font-size:12.5px; font-weight:650;
}
.import-items {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px;
  max-height:330px; overflow:auto; padding:1px 4px 1px 1px;
}
.import-item {
  min-width:0; padding:11px; border:1px solid var(--ui-border); border-radius:13px;
  background:var(--ui-surface);
}
.import-item.is-completed { background:color-mix(in srgb, var(--ui-success-soft) 40%, var(--ui-surface)); }
#import-dlg .import-item-select {
  display:grid; grid-template-columns:17px 48px minmax(0, 1fr);
  gap:9px; cursor:pointer;
}
.import-item-image {
  width:48px; height:48px; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-surface-subtle);
  font-size:20px;
}
.import-item-image img { width:100%; height:100%; object-fit:cover; }
.import-item-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
.import-item-copy strong {
  overflow:hidden; color:var(--ui-text); font-size:13px; line-height:1.25;
  text-overflow:ellipsis; white-space:nowrap;
}
.import-item-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
  color:var(--ui-text-secondary); font-size:11.5px; font-weight:550;
}
.import-item-meta em {
  padding:2px 5px; border-radius:999px; background:var(--ui-success-soft);
  color:var(--ui-success); font-size:10px; font-style:normal; font-weight:800;
}
#import-dlg .import-category {
  display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center;
  gap:7px; margin:9px 0 0 26px;
}
.import-category > span { font-size:10.5px; color:var(--ui-text-secondary); }
#import-dlg .import-category select {
  min-height:32px; margin:0; padding:5px 8px; font-size:11.5px;
}
.import-category-hint { margin-top:9px; }
#import-dlg .dlg-btns button { gap:7px; }
#import-dlg #import-cancel,
#import-dlg #import-back {
  background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-text);
}

@media (max-width: 880px) {
  .dash-actions #create-list-btn { order:0; flex:1; }
  .dash-actions #import-list-btn { flex:1; }
}
@media (max-width: 650px) {
  #import-dlg {
    width:calc(100vw - 18px); max-height:calc(100vh - 18px); padding:20px 16px;
    border-radius:17px;
  }
  .import-title-row h2 { font-size:21px; }
  .import-head { gap:12px; }
  .import-head p { font-size:13px; }
  .import-destination-fields { grid-template-columns:1fr; }
  .import-selection-bar { align-items:flex-start; flex-direction:column; }
  .import-items { grid-template-columns:1fr; max-height:360px; }
}
@media (max-width: 560px) {
  .dash-actions #import-list-btn,
  .dash-actions #create-list-btn { width:100%; }
  .import-summary { align-items:flex-start; }
  .import-summary strong { white-space:normal; }
  #import-dlg .dlg-btns { flex-direction:column-reverse; }
}