:root{
    /* ---------- Core palette ---------- */
    --color-background:#F8F9FC;
    --color-surface:#FFFFFF;
    --color-surface-elevated:#F1F2F9;     /* tinted surface for wells, chips, inputs */
    --color-primary:#6366F1;
    --color-primary-hover:#4F46E5;
    --color-primary-tint:#EEF0FE;         /* soft indigo wash — active rows, focus halos */
    --color-accent:#A78BFA;               /* lavender — badges, small highlights only */
    --color-accent-tint:#F3EFFE;
    --color-text:#171923;
    --color-text-secondary:#667085;
    --color-on-accent:#FFFFFF;
    --color-success:#22C55E;
    --color-success-tint:#E8FAF0;
    --color-success-dark:#158C46;
    --color-danger:#EF4444;
    --color-danger-hover:#DC2626;
    --color-danger-tint:#FDECEC;
    --color-border:#E5E7EB;
    --color-border-strong:#DBDEE8;
    --radius-sm:10px;
    --radius:14px;
    --radius-lg:18px;
    --shadow-xs: 0 1px 2px rgba(23,25,35,0.05);
    --shadow-sm: 0 1px 2px rgba(23,25,35,0.04), 0 4px 10px -4px rgba(23,25,35,0.08);
    --shadow: 0 2px 6px rgba(23,25,35,0.05), 0 12px 28px -12px rgba(99,102,241,0.18);
    --font-ui:'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }

  /* ---------- Dark mode (designed intentionally, not inverted) ---------- */
  [data-theme="dark"]{
    --color-background:#0F1117;
    --color-surface:#181B25;
    --color-surface-elevated:#1E2230;
    --color-primary:#818CF8;
    --color-primary-hover:#6366F1;
    --color-primary-tint:rgba(129,140,248,0.14);
    --color-accent:#A78BFA;
    --color-accent-tint:rgba(167,139,250,0.14);
    --color-text:#F1F3F9;
    --color-text-secondary:#A5ADBF;
    --color-on-accent:#FFFFFF;
    --color-success:#4ADE80;
    --color-success-tint:rgba(74,222,128,0.13);
    --color-success-dark:#4ADE80;
    --color-danger:#F87171;
    --color-danger-hover:#FCA5A5;
    --color-danger-tint:rgba(248,113,113,0.13);
    --color-border:#292E3D;
    --color-border-strong:#333A4D;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.24);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.28), 0 4px 10px -4px rgba(0,0,0,0.4);
    --shadow: 0 2px 6px rgba(0,0,0,0.3), 0 14px 30px -12px rgba(0,0,0,0.55);
  }

  [data-theme="dark"] input[type="text"],
  [data-theme="dark"] input[type="number"],
  [data-theme="dark"] input[type="date"],
  [data-theme="dark"] .search-input,
  [data-theme="dark"] .rating-select,
  [data-theme="dark"] .review-notes,
  [data-theme="dark"] .auth-form input[type="email"],
  [data-theme="dark"] .auth-form input[type="password"]{
    background:var(--color-surface-elevated);
    color:var(--color-text);
  }

  [data-theme="dark"] .status-badge.reading{ background:var(--color-accent-tint); color:#C4B5FD; }
  [data-theme="dark"] .status-badge.finished{ background:var(--color-success-tint); color:var(--color-success); }
  [data-theme="dark"] .status-badge.not-started{ background:var(--color-surface-elevated); color:var(--color-text-secondary); }
  [data-theme="dark"] .week-row.today{ background:var(--color-primary-tint); }

  /* ---------- Base ---------- */
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; width:100%; }
  body{
    background:var(--color-background);
    color:var(--color-text);
    font-family:var(--font-ui);
    font-size:15px;
    line-height:1.5;
    min-height:100vh;
    width:100%;
    -webkit-font-smoothing:antialiased;
    transition:background 0.2s ease, color 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
  }

  .app{ width:100%; max-width:1040px; margin:0 auto; padding:28px clamp(16px, 4vw, 40px) 100px; }

  h1,h2{ font-family:var(--font-ui); letter-spacing:-0.01em; color:var(--color-text); }

  /* ---------- Theme toggle / icon buttons ---------- */
  .theme-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--color-border);
    border-radius:10px;
    padding:8px 12px;
    background:var(--color-surface);
    color:var(--color-text-secondary);
    font-family:var(--font-ui);
    font-size:0.8rem;
    font-weight:500;
    cursor:pointer;
    white-space:nowrap;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .theme-toggle:hover{ border-color:var(--color-primary); color:var(--color-text); background:var(--color-primary-tint); }
  .theme-toggle:active{ transform:translateY(1px); }
  .theme-toggle-icon{ font-size:0.95rem; line-height:1; }
  .theme-toggle-label{ line-height:1; }

  /* ---------- Header ---------- */
  .header-top{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding-bottom:22px;
  }
  .brass-plate{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:var(--color-primary-tint);
    padding:5px 12px 5px 8px;
    border-radius:999px;
    margin-bottom:10px;
  }
  .brass-plate-icon{
    display:block;
    width:20px; height:20px;
    border-radius:5px;
    flex-shrink:0;
  }
  .brand-name{
    font-family:var(--font-ui);
    font-weight:800;
    letter-spacing:-0.01em;
  }
  .brass-plate .brand-name{ font-size:0.82rem; }
  .brand-neutral{ color:var(--color-text); }
  .brand-accent{ color:var(--color-primary); }
  h1{
    font-weight:700;
    font-size:1.85rem;
    margin:0;
  }
  .app-title{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .app-title-icon{
    display:block;
    width:28px; height:28px;
    border-radius:7px;
    flex-shrink:0;
  }
  .tagline{ margin:5px 0 0; color:var(--color-text-secondary); font-size:0.92rem; }

  .stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:12px;
    margin:22px 0 32px;
  }
  .stat{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    padding:15px 16px;
    box-shadow:var(--shadow-xs);
    min-width:0;
  }
  .stat-label{
    font-size:0.72rem;
    font-weight:600;
    color:var(--color-text-secondary);
    margin:0 0 6px;
  }
  .stat-value{
    font-family:var(--font-ui);
    font-size:1.5rem;
    font-weight:700;
    color:var(--color-text);
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .stat-value-sub{
    font-family:var(--font-mono);
    font-size:0.9rem;
    font-weight:500;
    color:var(--color-text-secondary);
    margin-left:3px;
  }
  .stat-clickable{ cursor:pointer; transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; }
  .stat-clickable:hover{ border-color:var(--color-primary); box-shadow:var(--shadow-sm); }
  .stat-clickable:active{ transform:translateY(1px); }
  .stat-clickable:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }

  /* ---------- Add-a-book form card ---------- */
  .desk{
    position:relative;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:22px 24px 24px;
    box-shadow:var(--shadow-sm);
    margin-bottom:40px;
  }
  .desk h2{
    font-size:1.05rem;
    font-weight:700;
    margin:0 0 4px;
  }
  .desk .desk-sub{ margin:0 0 18px; font-size:0.85rem; color:var(--color-text-secondary); }
  .form-grid{
    display:grid;
    grid-template-columns:1.6fr 1.2fr 0.8fr 1.3fr auto;
    gap:14px;
    align-items:end;
  }
  label{ display:flex; flex-direction:column; gap:6px; font-size:0.78rem; color:var(--color-text-secondary); font-weight:600; }
  input[type="text"], input[type="number"], input[type="date"]{
    font-family:var(--font-ui);
    font-size:0.95rem;
    color:var(--color-text);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:10px;
    padding:10px 12px;
    width:100%;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  input:hover{ border-color:var(--color-border-strong); }
  input:focus-visible, button:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }
  input:focus{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-tint); outline:none; }

  /* ---------- Inline form validation ---------- */
  /* Forms carry `novalidate`; app.js replaces the browser's own (OS-styled,
     unthemeable) validation bubble with this instead. */
  .field-error{
    display:block;
    margin-top:5px;
    font-size:0.74rem;
    font-weight:500;
    color:var(--color-danger);
  }
  input.has-error,
  select.has-error,
  textarea.has-error{
    border-color:var(--color-danger) !important;
  }
  input.has-error:focus,
  select.has-error:focus,
  textarea.has-error:focus{
    box-shadow:0 0 0 3px var(--color-danger-tint) !important;
  }

  .btn{
    font-family:var(--font-ui);
    font-size:0.86rem;
    font-weight:600;
    border-radius:10px;
    border:1px solid transparent;
    padding:10px 17px;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--color-primary); color:#fff; }
  .btn-primary:hover{ background:var(--color-primary-hover); box-shadow:0 4px 12px -3px rgba(99,102,241,0.45); }
  .btn-sm{ padding:7px 13px; font-size:0.8rem; }
  .btn-ghost{ background:transparent; border-color:var(--color-border); color:var(--color-text-secondary); }
  .btn-ghost:hover{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-tint); }
  .btn-danger{ background:transparent; border-color:var(--color-danger); color:var(--color-danger); }
  .btn-danger:hover{ background:var(--color-danger); color:#fff; }

  /* ---------- Shelf label ---------- */
  .shelf-label{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:12px;
  }
  .shelf-label h2{
    font-size:1.05rem;
    font-weight:700;
    margin:0;
  }
  .shelf-label span{
    font-family:var(--font-mono);
    font-size:0.74rem;
    color:var(--color-text-secondary);
  }

  /* ---------- Shelf toolbar (search / filter / sort) ---------- */
  .shelf-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .search-input{
    flex:1 1 220px;
    font-family:var(--font-ui);
    font-size:0.88rem;
    padding:9px 13px;
    border:1px solid var(--color-border);
    border-radius:10px;
    background:var(--color-surface);
    color:var(--color-text);
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .search-input:focus{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-tint); outline:none; }

  .status-badge{
    display:inline-block;
    font-size:0.68rem;
    font-weight:600;
    padding:3px 10px;
    border-radius:999px;
    margin:6px 0 0 18px;
  }
  .status-badge.reading{ background:var(--color-accent-tint); color:#7C3AED; }
  .status-badge.finished{ background:var(--color-success-tint); color:var(--color-success-dark); }
  .status-badge.not-started{ background:var(--color-surface-elevated); color:var(--color-text-secondary); }

  /* ---------- Tags ---------- */
  .tags-row{
    display:flex; flex-wrap:wrap; gap:6px;
    margin:9px 0 0 18px;
  }
  .tag-chip{
    display:inline-flex; align-items:center;
    font-family:var(--font-mono);
    font-size:0.7rem;
    padding:3px 9px;
    border-radius:999px;
    background:var(--color-surface-elevated);
    border:1px solid var(--color-border);
    color:var(--color-text-secondary);
    cursor:pointer;
    transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .tag-chip:hover{ border-color:var(--color-accent); color:var(--color-text); background:var(--color-accent-tint); }
  .tag-filter-select{
    font-family:var(--font-ui);
    font-size:0.8rem;
    font-weight:500;
    padding:8px 26px 8px 13px;
    border-radius:999px;
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text-secondary);
    cursor:pointer;
    max-width:180px;
  }
  .tag-filter-select:hover{ border-color:var(--color-primary); color:var(--color-text); }

  /* ---------- Bookshelf ---------- */
  .bookshelf{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs);
    min-height:180px;
    display:flex;
    flex-direction:column;
  }
  .shelf-empty{
    margin:auto;
    color:var(--color-text-secondary);
    font-size:0.9rem;
    text-align:center;
    padding:40px 20px;
  }

  .shelf-scroll{
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:24px 20px 14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:var(--color-primary) transparent;
  }
  .shelf-scroll::-webkit-scrollbar{ height:6px; }
  .shelf-scroll::-webkit-scrollbar-track{ background:transparent; }
  .shelf-scroll::-webkit-scrollbar-thumb{ background:var(--color-border-strong); border-radius:4px; }

  /* ---------- Themed scrollbars, everywhere ---------- */
  /* The bookshelf strip above has its own (slightly thicker, to match the
     ledge); this covers the page itself and every other scrollable panel
     so nothing falls back to the browser's unthemed OS scrollbar. */
  html{
    scrollbar-width:thin;
    scrollbar-color:var(--color-border-strong) transparent;
  }
  html::-webkit-scrollbar{ width:10px; height:10px; }
  html::-webkit-scrollbar-track{ background:transparent; }
  html::-webkit-scrollbar-thumb{ background:var(--color-border-strong); border-radius:6px; border:2px solid var(--color-background); background-clip:padding-box; }
  html::-webkit-scrollbar-thumb:hover{ background:var(--color-primary); }

  .checkout-rows,
  .monthly-chart-wrap,
  .review-notes{
    scrollbar-width:thin;
    scrollbar-color:var(--color-border-strong) transparent;
  }
  .checkout-rows::-webkit-scrollbar,
  .monthly-chart-wrap::-webkit-scrollbar,
  .review-notes::-webkit-scrollbar{ width:7px; height:7px; }
  .checkout-rows::-webkit-scrollbar-track,
  .monthly-chart-wrap::-webkit-scrollbar-track,
  .review-notes::-webkit-scrollbar-track{ background:transparent; }
  .checkout-rows::-webkit-scrollbar-thumb,
  .monthly-chart-wrap::-webkit-scrollbar-thumb,
  .review-notes::-webkit-scrollbar-thumb{ background:var(--color-border-strong); border-radius:4px; }
  .checkout-rows::-webkit-scrollbar-thumb:hover,
  .monthly-chart-wrap::-webkit-scrollbar-thumb:hover,
  .review-notes::-webkit-scrollbar-thumb:hover{ background:var(--color-primary); }

  .spine{
    height:180px;
    border:none;
    border-radius:8px 8px 4px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:14px 0 10px;
    cursor:pointer;
    position:relative;
    color:#fff;
    font-family:var(--font-ui);
    box-shadow:
      inset 2px 0 0 rgba(255,255,255,0.16),
      inset -3px 0 0 rgba(0,0,0,0.16),
      0 6px 14px -8px rgba(23,25,35,0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    flex-shrink:0;
  }
  .spine:hover{ transform:translateY(-6px); }
  .spine.selected{
    transform:translateY(-14px);
    box-shadow:
      inset 2px 0 0 rgba(255,255,255,0.2),
      inset -3px 0 0 rgba(0,0,0,0.2),
      0 3px 0 var(--color-text),
      0 14px 18px -10px rgba(23,25,35,0.4);
  }

  .spine-title{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size:0.92rem;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-height:calc(100% - 40px);
    flex:1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  }

  .spine-seal{
    position:absolute;
    bottom:8px;
    width:26px; height:26px;
    border-radius:50%;
    background:rgba(255,255,255,0.22);
    color:#fff;
    font-family:var(--font-mono);
    font-size:0.58rem;
    font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }

  .shelf-ledge{
    width:100%;
    height:10px;
    margin-top:0;
    background:var(--color-surface-elevated);
    border-top:1px solid var(--color-border);
    border-radius:0 0 13px 13px;
  }

  /* ---------- Reading table (detail panel) ---------- */
  .reading-table{
    margin-top:32px;
  }
  .table-empty{
    text-align:center;
    padding:40px 20px;
    color:var(--color-text-secondary);
    border:1px dashed var(--color-border-strong);
    border-radius:var(--radius);
    font-size:0.9rem;
  }

  .open-book{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    padding:24px 26px 26px;
  }

  .book-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; min-width:0; }
  .book-head-info{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
    flex:1 1 auto;
  }
  .book-head-info > div:last-child{ min-width:0; flex:1 1 auto; }
  .book-title{
    font-size:1.3rem;
    font-weight:700;
    margin:0;
    line-height:1.28;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .book-author{ margin:4px 0 0; color:var(--color-text-secondary); font-size:0.9rem; overflow-wrap:anywhere; word-break:break-word; }

  .ring{
    --pct:0;
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    background:conic-gradient(var(--color-primary) calc(var(--pct)*1%), var(--color-surface-elevated) 0);
    position:relative;
  }
  .ring::before{
    content:"";
    position:absolute; inset:5px;
    border-radius:50%;
    background:var(--color-surface);
  }
  .ring-label{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono);
    font-size:0.7rem;
    font-weight:600;
    color:var(--color-text);
  }

  .book-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin:18px 0 4px;
  }
  .book-stats > div{ background:var(--color-surface-elevated); border-radius:11px; padding:10px 11px; }
  .book-stats dt{
    font-size:0.66rem;
    font-weight:600;
    color:var(--color-text-secondary);
    margin:0 0 3px;
  }
  .book-stats dd{
    margin:0;
    font-family:var(--font-mono);
    font-size:0.98rem;
    font-weight:600;
    color:var(--color-text);
  }

  .book-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

  /* ---------- Finished-book review ---------- */
  .review-card{
    margin:20px 0 0;
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    background:var(--color-surface-elevated);
    padding:14px;
  }
  .review-card.hidden{ display:none; }
  .review-summary .review-actions{ margin-top:2px; }
  .review-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }
  .review-title{
    margin:0;
    font-size:0.95rem;
    font-weight:700;
  }
  .review-sub{
    margin:2px 0 0;
    color:var(--color-text-secondary);
    font-size:0.74rem;
  }
  .rating-select{
    font-family:var(--font-ui);
    font-size:0.86rem;
    color:var(--color-text);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:10px;
    padding:8px 11px;
  }
  .review-notes{
    width:100%;
    min-height:96px;
    resize:vertical;
    font-family:var(--font-ui);
    font-size:0.88rem;
    line-height:1.55;
    color:var(--color-text);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:10px;
    padding:10px 11px;
  }
  .review-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:10px;
  }
  .saved-rating{
    font-family:var(--font-mono);
    font-size:0.74rem;
    color:var(--color-primary);
    white-space:nowrap;
  }

  .log-form, .edit-form{
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin:14px 0 0;
    padding:12px;
    background:var(--color-surface-elevated);
    border-radius:var(--radius);
  }
  .log-form.hidden, .edit-form.hidden{ display:none; }
  .log-form input, .edit-form input{ flex:1; min-width:110px; }
  .log-form-today{
    font-size:0.8rem;
    color:var(--color-text-secondary);
    white-space:nowrap;
  }

  .checkout-card{
    margin:20px 0 0;
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--color-surface-elevated);
  }
  .checkout-card-title{
    font-size:0.68rem;
    font-weight:700;
    color:var(--color-text-secondary);
    background:var(--color-surface);
    margin:0;
    padding:9px 13px;
    border-bottom:1px solid var(--color-border);
  }
  .checkout-head, .checkout-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .checkout-head{
    font-size:0.66rem;
    font-weight:600;
    color:var(--color-text-secondary);
    padding:7px 13px 4px;
  }
  .checkout-rows{
    max-height:180px;
    overflow-y:auto;
  }
  .checkout-row{
    padding:6px 9px 6px 13px;
    font-family:var(--font-mono);
    font-size:0.8rem;
    border-top:1px solid var(--color-border);
  }
  .checkout-row span:nth-child(2){ text-align:right; color:var(--color-primary); font-weight:600; padding-right:9px; }
  .icon-btn{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--color-text-secondary);
    font-size:0.85rem;
    line-height:1;
    padding:4px 6px;
    border-radius:8px;
  }
  .icon-btn:hover{ background:var(--color-surface-elevated); color:var(--color-text); }
  .icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
  /* Reading-log rows: date | pages | delete. The week panel reuses
     .checkout-row with two columns, so this is scoped to the log only. */
  .log-head, .log-row{ grid-template-columns:1fr auto 34px; }
  .log-row .log-delete{
    justify-self:end;
    width:26px; height:26px;
    padding:0;
    font-size:0.72rem;
    opacity:.55;
  }
  .log-row:hover .log-delete, .log-row .log-delete:focus-visible{ opacity:1; }
  .log-row .log-delete:hover{ color:var(--color-danger); background:var(--color-danger-tint); }
  @media (hover:none){ .log-row .log-delete{ opacity:1; width:34px; height:34px; } }
  .checkout-empty{
    padding:14px 13px;
    color:var(--color-text-secondary);
    font-size:0.84rem;
  }

  /* ---------- Weekly summary panel ---------- */
  .week-panel{ margin:-6px 0 32px; }
  .week-panel.hidden{ display:none; }
  .week-panel .checkout-card{ margin:0; }
  .week-row.today span:first-child{ color:var(--color-primary); font-weight:700; }
  .week-row.today{ background:var(--color-primary-tint); }
  .week-row span:first-child{ padding-left:0; }

  /* ---------- Book cover images (open-book detail) ---------- */
  .book-cover{
    width:58px;
    height:82px;
    flex:0 0 58px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--color-border);
    background:var(--color-surface-elevated);
  }
  .book-cover-placeholder{
    width:58px;
    height:82px;
    flex:0 0 58px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:6px;
    box-sizing:border-box;
    border:1px solid var(--color-border);
    border-radius:10px;
    background:var(--color-surface-elevated);
    color:var(--color-text-secondary);
    font-size:.62rem;
    line-height:1.25;
  }
  @media (max-width:720px){
    .book-cover,.book-cover-placeholder{width:48px;height:68px;flex-basis:48px;}
    .book-head-info{gap:10px;}
  }

  /* ---------- Monthly / yearly reading statistics ---------- */
  .reading-stats-panel{
    margin:0 0 32px;
    padding:20px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
  }
  .reading-stats-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
  }
  .reading-stats-head h2{
    margin:0 0 4px;
    font-size:1.05rem;
    font-weight:700;
  }
  .reading-stats-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .stats-toggle-btn{
    flex-shrink:0;
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--color-border-strong);
    background:var(--color-surface-elevated);
    border-radius:8px;
    font-size:0.75rem;
  }
  .stats-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
  }
  .stats-mode-pills{ justify-content:flex-end; }
  .stats-controls select#statsYear{
    min-width:110px;
    padding:8px 11px;
    border:1px solid var(--color-border);
    border-radius:10px;
    background:var(--color-surface-elevated);
    color:var(--color-text);
    font:inherit;
  }
  .stats-period-nav{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .stats-period-label{
    min-width:130px;
    text-align:center;
    font-size:.85rem;
    font-weight:700;
    color:var(--color-text);
  }
  .stats-period-nav .icon-btn{
    border:1px solid var(--color-border-strong);
    background:var(--color-surface-elevated);
    border-radius:8px;
  }
  .stats-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:22px;
  }
  .stats-summary-card{
    padding:13px 14px;
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    background:var(--color-surface-elevated);
  }
  .stats-summary-label{
    margin:0 0 4px;
    font-size:.74rem;
    color:var(--color-text-secondary);
  }
  .stats-summary-value{
    margin:0;
    font-size:1.15rem;
    font-weight:700;
    color:var(--color-text);
  }
  .monthly-chart-wrap{
    overflow-x:auto;
    padding-bottom:2px;
  }
  .monthly-chart{
    height:245px;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(28px,1fr);
    gap:10px;
    align-items:end;
    padding:10px 6px 0;
  }
  .month-bar{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    gap:7px;
  }
  .month-value{
    min-height:17px;
    font-size:.72rem;
    color:var(--color-text-secondary);
    white-space:nowrap;
  }
  .month-track{
    width:min(28px,72%);
    height:185px;
    display:flex;
    align-items:flex-end;
    border-bottom:1px solid var(--color-border);
  }
  .month-fill{
    width:100%;
    min-height:2px;
    border-radius:6px 6px 2px 2px;
    background:var(--color-primary);
    transition:height .2s ease;
  }
  .month-label{
    font-size:.74rem;
    color:var(--color-text-secondary);
  }
  .month-bar.current .month-label{
    color:var(--color-primary);
    font-weight:700;
  }
  .month-bar.current .month-fill{
    background:var(--color-primary-hover);
  }
  @media (max-width:720px){
    .reading-stats-head{ flex-direction:column; }
    .reading-stats-head-actions{ width:100%; justify-content:space-between; }
    .stats-controls{ width:100%; align-items:stretch; }
    .stats-mode-pills{ justify-content:flex-start; }
    .stats-controls select#statsYear{ width:100%; }
    .stats-period-nav{ justify-content:space-between; }
    .stats-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .reading-stats-panel{ padding:16px; }
  }

  /* ---------- Modal ---------- */
  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(15,17,23,0.45);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    z-index:100;
  }
  .modal-overlay.hidden{ display:none; }
  .modal-box{
    background:var(--color-surface);
    border-radius:var(--radius-lg);
    box-shadow:0 24px 48px -12px rgba(15,17,23,0.35);
    padding:22px 24px;
    max-width:360px;
    width:100%;
  }
  .modal-message{
    margin:0 0 18px;
    font-size:0.92rem;
    color:var(--color-text);
    line-height:1.5;
  }
  .modal-actions{
    display:flex; justify-content:flex-end; gap:8px;
  }

  .filter-pills{ display:flex; gap:6px; flex-wrap:wrap; }
  .pill{
    font-family:var(--font-ui);
    font-size:0.76rem;
    font-weight:600;
    padding:7px 14px;
    border-radius:999px;
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text-secondary);
    cursor:pointer;
    white-space:nowrap;
    transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .pill:hover{ border-color:var(--color-primary); color:var(--color-text); background:var(--color-primary-tint); }
  .pill.active{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:#fff;
  }

  /* ---------- Toast ---------- */
  .toast-wrap{
    position:fixed;
    left:0; right:0; bottom:22px;
    display:flex; justify-content:center;
    pointer-events:none;
    z-index:200;
  }
  .toast{
    display:flex;
    align-items:center;
    gap:12px;
    pointer-events:auto;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:11px 16px;
    font-size:0.86rem;
    color:var(--color-text);
    max-width:min(420px, 90vw);
    text-align:center;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  .toast.error{ border-color:var(--color-danger); color:var(--color-danger-hover); }
  .toast.show{ opacity:1; transform:translateY(0); }
  .toast-msg{ flex:1; }
  .toast-action{
    flex-shrink:0;
    background:none;
    border:none;
    cursor:pointer;
    font-family:var(--font-ui);
    font-size:0.82rem;
    font-weight:700;
    color:var(--color-primary);
    padding:4px 2px;
  }
  .toast-action:hover{ color:var(--color-primary-hover); }

  /* ---------- Mobile ---------- */
  @media (max-width:640px){
    .app{ padding:22px 16px 90px; }

    h1{ font-size:1.5rem; }
    .tagline{ font-size:0.82rem; }
    .theme-toggle{ padding:7px 10px; }

    .header-top{ align-items:flex-start; }

    .stats{ grid-template-columns:repeat(2, 1fr); gap:10px; margin:18px 0 26px; }
    .stat{ padding:12px 13px; }
    .stat-label{ font-size:0.66rem; }
    .stat-value{ font-size:1.25rem; }

    .desk{ padding:18px 16px 20px; margin-bottom:32px; }
    .form-grid{ grid-template-columns:1fr; gap:12px; }
    .form-grid .btn{ width:100%; padding:12px 16px; }

    .shelf-toolbar{ flex-direction:column; align-items:stretch; gap:10px; }
    .search-input{ flex:none; width:100%; }
    .filter-pills{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; }
    .filter-pills::-webkit-scrollbar{ display:none; }
    .pill{ flex-shrink:0; padding:8px 15px; }
    .spine{ height:155px; }
    .shelf-scroll{ padding:16px 14px 12px; gap:8px; }
    .shelf-ledge{ height:9px; }

    .reading-table{ margin-top:26px; }
    .open-book{ padding:20px 16px 22px; }
    .book-head{ flex-wrap:wrap; gap:12px; }
    .book-title{ font-size:1.15rem; }
    .book-stats{ grid-template-columns:repeat(2, 1fr); }
    .book-actions{ flex-direction:column; }
    .book-actions .btn{ width:100%; text-align:center; }
    .log-form, .edit-form{ flex-direction:column; align-items:stretch; }
    .log-form-today{ text-align:center; }
    .log-form input, .edit-form input{ flex:1 1 100%; min-width:0; }
    .review-head{ align-items:flex-start; flex-direction:column; }
    .rating-select{ width:100%; }
    .review-actions{ flex-direction:column; }
    .review-actions .btn{ width:100%; }

    .modal-box{ padding:20px 18px; }
    .modal-actions .btn{ flex:1; }

    input[type="text"], input[type="number"], input[type="date"], .search-input{ font-size:16px; }
    .btn{ padding:11px 16px; }
    .btn-sm{ padding:9px 14px; }
  }

  @media (max-width:400px){
    .stats{ grid-template-columns:1fr; }
    .book-stats{ grid-template-columns:1fr; }
    h1{ font-size:1.35rem; }
    .brass-plate .brand-name{ font-size:0.74rem; }
  }

  @media (hover:none) and (pointer:coarse){
    .spine:hover{ transform:none; }
    .btn, .pill, .spine{ touch-action:manipulation; }
  }

  /* ---------- Tablet (portrait tablets + landscape phones, 641–1024px) ----------
     Previously this whole band fell through to the desktop rules above
     (5-column add-book form, 4-column stat/book-stat grids), which is what
     caused the crushed inputs and overlapping numbers on iPad-portrait and
     landscape-phone widths. */
  @media (min-width:641px) and (max-width:1024px){
    .app{ padding:24px clamp(16px, 3vw, 32px) 90px; }

    .form-grid{
      grid-template-columns:repeat(2, 1fr);
      gap:14px 16px;
    }
    .form-grid .btn{ grid-column:1 / -1; }

    .stats{ grid-template-columns:repeat(3, minmax(140px, 1fr)); }
    .stats-summary{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .book-stats{ grid-template-columns:repeat(2, 1fr); }

    .header-actions{ flex-wrap:wrap; row-gap:8px; }
  }

  /* Wide tablet / small laptop in landscape: enough room for the 4-column
     stat rows again, but the 5-column add-book form is still too tight. */
  @media (min-width:1025px) and (max-width:1180px){
    .form-grid{ grid-template-columns:1fr 1fr 1fr; }
    .form-grid .btn{ grid-column:1 / -1; }
  }

  /* ---------- Short / landscape viewports (phones rotated sideways) ----------
     100vh on a landscape phone is often taller than what's actually visible
     once the browser chrome is accounted for, which clipped the sign-in
     card and the boot spinner top/bottom. Switch those screens to
     top-aligned + scrollable instead of vertically centered + clipped. */
  @media (max-height:480px) and (orientation:landscape){
    .auth-screen{ align-items:flex-start; padding:16px; }
    .auth-card{ margin:8px auto; }
    .boot-loading{ min-height:100vh; min-height:100dvh; justify-content:flex-start; padding-top:22vh; }
  }

  /* Landscape phones land in the 641–1024 band above by width, but still
     benefit from the mobile (not tablet) form/table layout since they're
     short and narrow at the same time as a portrait phone. */
  @media (max-width:900px) and (orientation:landscape) and (max-height:500px){
    .form-grid{ grid-template-columns:1fr 1fr; }
    .book-stats{ grid-template-columns:repeat(4, 1fr); }
    .reading-stats-head{ flex-direction:row; }
    .reading-stats-head-actions{ width:auto; }
    .stats-controls{ width:auto; align-items:flex-end; }
  }

  /* ---------- Print-friendly reading log ---------- */
  .print-only{ display:none; }

  @media print{
    @page{ margin:16mm; }

    :root{
      --color-background:#fff;
      --color-surface-elevated:#fff;
      --color-surface:#fff;
      --color-text:#111;
      --color-text-secondary:#555;
      --color-border:#ccc;
      --color-border-strong:#aaa;
    }

    *{
      -webkit-print-color-adjust:exact;
      print-color-adjust:exact;
    }

    html, body{
      background:#fff !important;
      color:#111 !important;
    }

    .app{
      max-width:none;
      margin:0;
      padding:0;
    }

    header,
    .desk,
    .shelf-label,
    .shelf-toolbar,
    .bookshelf,
    .theme-toggle,
    .book-actions,
    .log-form,
    .edit-form,
    .review-actions,
    .toast-wrap,
    .log-delete,
    .modal-overlay{
      display:none !important;
    }

    .reading-table{
      display:block !important;
      margin:0 !important;
      padding:0 !important;
    }

    .open-book{
      margin:0 !important;
      padding:0 !important;
      border:0 !important;
      box-shadow:none !important;
      background:#fff !important;
    }

    .book-head{
      border-bottom:1px solid #aaa;
      padding-bottom:12px;
      margin-bottom:14px;
    }

    .book-cover,
    .book-cover-placeholder{
      box-shadow:none !important;
    }

    .status-badge,
    .tags-row,
    .book-stats,
    .review-card,
    .checkout-card{
      break-inside:avoid;
    }

    .checkout-rows{
      max-height:none !important;
      overflow:visible !important;
    }

    .checkout-card{
      border:1px solid #bbb;
      box-shadow:none !important;
      background:#fff !important;
    }

    .checkout-card-title{
      color:#111 !important;
    }

    .checkout-row{
      border-bottom:1px solid #ddd;
      color:#111 !important;
    }

    .checkout-row span:nth-child(2){
      color:#111 !important;
    }

    .print-only{
      display:block !important;
    }

    .print-log-title{
      margin:0 0 3px;
      font-family:Georgia, serif;
      font-size:1.35rem;
      font-weight:700;
    }

    .print-log-subtitle{
      margin:0 0 14px;
      color:#555;
      font-size:.8rem;
    }

    .review-card{
      background:#fff !important;
      border:1px solid #bbb !important;
      box-shadow:none !important;
    }

    .review-notes{
      min-height:80px;
      background:#fff !important;
      color:#111 !important;
    }
  }

  /* ==========================================================================
     Cloud sync UI: boot loader, auth screen, migration banner, sync badge.
     Uses the same design tokens as the rest of the app.
     ========================================================================== */

  .hidden{ display:none !important; }

  /* ---------- Boot loading ---------- */
  .boot-loading{
    min-height:100vh;
    min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px;
    color:var(--color-text-secondary);
    font-family:var(--font-ui);
    font-size:0.9rem;
  }
  .boot-spinner{
    width:26px; height:26px;
    border-radius:50%;
    border:3px solid var(--color-border);
    border-top-color:var(--color-primary);
    animation:boot-spin 0.8s linear infinite;
  }
  @keyframes boot-spin{ to{ transform:rotate(360deg); } }

  /* ---------- Auth screen ---------- */
  .auth-screen{
    min-height:100vh;
    min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:var(--color-background);
    overflow-y:auto;
  }
  .auth-card{
    width:100%; max-width:380px;
    background:var(--color-surface);
    border-radius:var(--radius-lg);
    border:1px solid var(--color-border);
    box-shadow:var(--shadow);
    padding:28px 26px 26px;
  }
  .auth-heading{
    font-weight:700;
    font-size:1.4rem;
    margin:12px 0 4px;
    color:var(--color-text);
  }
  .auth-sub{ margin:0 0 20px; color:var(--color-text-secondary); font-size:0.88rem; }
  .auth-tabs{
    display:flex; gap:4px;
    background:var(--color-surface-elevated);
    border-radius:11px;
    padding:4px;
    margin-bottom:18px;
  }
  .auth-tab{
    flex:1;
    border:none; background:transparent;
    font-family:var(--font-ui);
    font-size:0.84rem; font-weight:600;
    color:var(--color-text-secondary);
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .auth-tab.active{ background:var(--color-surface); color:var(--color-primary); box-shadow:var(--shadow-xs); }
  .auth-form{ display:flex; flex-direction:column; gap:14px; }
  .auth-form.hidden{ display:none; }
  .auth-form label{ font-size:0.78rem; }
  .auth-form input[type="email"],
  .auth-form input[type="password"]{
    font-family:var(--font-ui);
    font-size:0.95rem;
    color:var(--color-text);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:10px;
    padding:10px 12px;
    width:100%;
  }
  .auth-link{
    align-self:flex-end;
    margin-top:-6px;
    padding:2px 0;
    background:none;
    border:none;
    font-family:var(--font-ui);
    font-size:0.8rem;
    font-weight:600;
    color:var(--color-primary);
    cursor:pointer;
  }
  .auth-link:hover:not(:disabled){ text-decoration:underline; text-underline-offset:2px; }
  .auth-link:disabled{ opacity:.5; cursor:default; }
  .auth-info{
    margin:0 0 10px;
    font-size:0.8rem;
    line-height:1.4;
    color:var(--color-success-dark);
  }
  .auth-info:empty{ display:none; }
  .auth-submit{ width:100%; padding:11px 16px; margin-top:2px; }
  .auth-error{
    min-height:1.1em;
    margin:0 0 10px;
    font-size:0.8rem;
    color:var(--color-danger);
  }

  /* ---------- Header actions / sync badge / logout ---------- */
  .header-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .sync-badge{
    font-family:var(--font-mono);
    font-size:0.68rem;
    color:var(--color-text-secondary);
    padding:5px 10px;
    border-radius:999px;
    border:1px solid var(--color-border);
    white-space:nowrap;
  }
  .sync-badge.sync-synced{ color:var(--color-text-secondary); }
  .sync-badge.sync-syncing{ color:var(--color-primary); border-color:var(--color-primary); }
  .sync-badge.sync-offline{ color:var(--color-danger); border-color:var(--color-danger); }

  /* ---------- Migration banner ---------- */
  .migration-banner{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:var(--color-primary-tint);
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    padding:12px 16px;
    margin:18px 0 -4px;
    font-size:0.85rem;
  }
  .migration-banner p{ margin:0; flex:1; min-width:220px; color:var(--color-text); }
  .migration-actions{ display:flex; gap:8px; flex-wrap:wrap; }

  .import-old-data-link{
    display:inline-block;
    margin-top:24px;
    font-family:var(--font-ui);
    font-size:0.8rem;
    color:var(--color-text-secondary);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .import-old-data-link:hover{ color:var(--color-primary); }

  @media (max-width:640px){
    .header-actions{ width:100%; justify-content:space-between; }
    .migration-banner{ flex-direction:column; align-items:flex-start; }
  }