:root{
    --ink:#1f2532;
    --paper:#f7f4ee;
    --panel:#ffffff;
    --line:#e2ddd0;
    --gold:#b3872f;
    --gold-dark:#8f6c23;
    --green:#3c6e52;
    --red:#a6402f;
    --amber:#9a6b1e;
    --ok:var(--green);
    --warn:var(--red);
    --muted:#6b6455;
    --desc:#3a3a3a;
    --field-bg:#fffdf9;
    --soft:#efe8d8;
    --soft-2:#f3eee1;
    --on-accent:#ffffff;
    --radius:10px;
    --toggle-on:var(--green);
  }
  :root[data-theme="dark"]{
    --ink:#e7e3d8;
    --paper:#161a20;
    --panel:#1f242d;
    --line:#333b46;
    --gold:#caa151;
    --gold-dark:#d8b877;
    --green:#5cae86;
    --red:#e0765f;
    --amber:#d6a24e;
    --muted:#9c968a;
    --desc:#c7c2b6;
    --field-bg:#161a20;
    --soft:#2a313c;
    --soft-2:#242b34;
    --on-accent:#12151a;
    --toggle-on:var(--gold-dark);
  }
  :root[data-theme="colour_blind"]{
    /* Okabe–Ito status colours so red/green is never the only signal */
    --ink:#14181f;
    --paper:#f6f5f2;
    --panel:#ffffff;
    --line:#d7d5cd;
    --gold:#005a9c;
    --gold-dark:#004f88;
    --green:#0072B2;
    --red:#D55E00;
    --amber:#E69F00;
    --muted:#5b5850;
    --desc:#2c2c2c;
    --field-bg:#ffffff;
    --soft:#e4ecf3;
    --soft-2:#eef2f6;
    --on-accent:#ffffff;
    --toggle-on:var(--gold-dark);
  }
  @media (prefers-color-scheme: dark){
    :root[data-theme="system"]{
      --ink:#e7e3d8;
      --paper:#161a20;
      --panel:#1f242d;
      --line:#333b46;
      --gold:#caa151;
      --gold-dark:#d8b877;
      --green:#5cae86;
      --red:#e0765f;
      --amber:#d6a24e;
      --muted:#9c968a;
      --desc:#c7c2b6;
      --field-bg:#161a20;
      --soft:#2a313c;
      --soft-2:#242b34;
      --on-accent:#12151a;
      --toggle-on:var(--gold-dark);
    }
  }
  /* Reserve the vertical scrollbar's width always, so a tab whose content
     loads in and crosses the viewport-height threshold (Wishlist, mainly —
     but this could hit any tab) doesn't make the scrollbar appear/disappear
     and shove the whole centered layout sideways by its width. */
  html{ scrollbar-gutter: stable; }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Georgia', 'Iowan Old Style', serif;
    background:var(--paper);
    color:var(--ink);
  }
  #boot-loading{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper);
  }
  #boot-loading.hidden{ display:none; }
  .boot-mark{ display:flex; flex-direction:column; align-items:center; gap:14px; }
  .boot-word{
    font-family:'Palatino Linotype','Book Antiqua',Georgia,serif;
    font-size:1.15rem; letter-spacing:.02em; color:var(--ink);
  }
  .boot-spinner{
    width:32px; height:32px; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--gold);
    animation:boot-spin .8s linear infinite;
  }
  @keyframes boot-spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .boot-spinner{ animation:none; border-top-color:var(--gold); }
  }
  h1,h2,h3{
    font-family:'Palatino Linotype','Book Antiqua',Georgia,serif;
    letter-spacing:.01em;
    margin:0 0 .4em 0;
  }
  .sans{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
  button, input, select, textarea{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  a{ color: var(--gold-dark); }
  .hidden{ display:none !important; }

  /* ---------- Layout shells ---------- */
  #splash-screen{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:56px 20px 80px;
  }
  .brand-mark{
    text-align:center;
    margin-bottom:36px;
  }
  .brand-mark .eyebrow{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:11px;
    color:var(--gold-dark);
    margin-bottom:6px;
  }
  .brand-mark h1{ font-size:2.4rem; }
  .brand-mark p{ color:var(--muted); margin-top:6px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}

  .splash-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    width:100%;
    max-width:860px;
    align-items:start;
  }
  /* "New here?" account-creation switcher on the splash */
  .signup-switch{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
    width:100%; max-width:860px; margin:26px 0 0;
  }
  .signup-switch .lbl{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    color:var(--muted); font-size:.9rem; margin-right:2px;
  }
  .signup-switch .btn[aria-expanded="true"]{
    background:var(--gold); border-color:var(--gold); color:#fff;
  }
  .card.signup-card{ width:100%; max-width:560px; margin:0 auto; }
  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
  }
  .card h2{ font-size:1.15rem; }
  .card .sub{ color:var(--muted); font-size:.85rem; margin-bottom:16px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
  .card.wide{ width:100%; max-width:1000px; margin:20px auto 0; }
  .field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 20px; }

  label{
    display:block;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    margin:14px 0 6px;
  }
  label:first-of-type{ margin-top:0; }
  input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=search], select, textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:.95rem;
    background:var(--field-bg);
    color:var(--ink);
  }
  /* type="search" also ships a browser-native inset "appearance" (WebKit)
     that ignores our theme colors — the rule above alone doesn't override it. */
  input[type=search]{ -webkit-appearance:none; appearance:none; }
  input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
  input:focus, select:focus, textarea:focus{
    outline:2px solid var(--gold);
    outline-offset:1px;
    border-color:var(--gold);
  }
  .btn{
    display:inline-block;
    margin-top:18px;
    padding:11px 18px;
    border:none;
    border-radius:8px;
    background:var(--ink);
    color:var(--on-accent);
    font-weight:600;
    font-size:.9rem;
    cursor:pointer;
  }
  .btn:hover{ opacity:.9; }
  .btn:disabled{ opacity:.5; cursor:progress; }
  .btn.gold{ background:var(--gold-dark); }
  .btn.outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
  .btn.danger{ background:var(--red); }
  .btn.small{ padding:7px 12px; font-size:.8rem; margin-top:0; }
  .msg{ font-size:.82rem; margin-top:10px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; min-height:1em;}
  .msg.error{ color:var(--red); }
  .msg.success{ color:var(--green); }

  .fee-note{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:.82rem; color:var(--muted);
    margin-top:14px; padding:10px 12px;
    background:var(--soft-2); border-radius:8px;
  }
  .switch{ display:flex; align-items:center; gap:10px; margin:16px 0 4px; }
  .switch input{ width:auto; }
  .switch label{ margin:0; text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--ink); }

  /* ---------- App shell ---------- */
  #app-screen{ min-height:100vh; }
  header.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 28px;
    border-bottom:1px solid var(--line);
    background:var(--panel);
    position:sticky; top:0; z-index:5;
    flex-wrap:wrap;
  }
  header.topbar .title{ font-size:1.3rem; }
  header.topbar .title small{
    display:block; font-size:.72rem; color:var(--muted);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    text-transform:uppercase; letter-spacing:.08em; margin-top:2px;
  }
  header.topbar .who{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:.85rem; color:var(--muted);
  }
  .pill{
    background:var(--soft); color:var(--gold-dark);
    padding:3px 10px; border-radius:999px; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  }
  nav.tabs{
    display:flex; gap:6px; padding:14px 28px 0;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    flex-wrap:wrap;
  }
  nav.tabs button{
    background:none; border:none; padding:10px 16px;
    font-size:.88rem; color:var(--muted); cursor:pointer;
    border-bottom:2px solid transparent;
  }
  nav.tabs button.active{ color:var(--ink); border-bottom-color:var(--gold-dark); font-weight:600; }

  /* Compact "menu" nav mode: the same <nav class="tabs"> becomes a closed-by-
     default dropdown instead of a horizontal bar. applyNavMode() actually
     *moves* the <nav> element into header.topbar in the DOM when this mode
     is on (and back out, next to <main>, when it's off) -- position:absolute
     only anchors to a positioned *ancestor*, and nav.tabs normally sits as a
     *sibling* of header.topbar, not inside it. Anchored to the header itself
     (always full-width, position:sticky) rather than the small toggle
     button, same reasoning as #notif-panel below. */
  nav.tabs.dropdown-mode{
    display:none; flex-direction:column; flex-wrap:nowrap; gap:2px;
    position:absolute; right:0; top:calc(100% + 6px); z-index:20;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 8px 28px rgba(0,0,0,.28); padding:8px; min-width:200px; max-height:70vh;
    overflow-y:auto;
  }
  nav.tabs.dropdown-mode.open{ display:flex; }
  nav.tabs.dropdown-mode button{
    text-align:left; border-bottom:none; border-radius:6px; padding:10px 12px;
  }
  nav.tabs.dropdown-mode button.active{ background:var(--soft); border-bottom:none; }

  /* Navigation order list (Account tab) */
  .nav-order-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 0; border-top:1px solid var(--line); font-size:.88rem;
  }
  .nav-order-row:first-child{ border-top:none; }
  .nav-order-row > span:first-child{ flex:1 1 auto; min-width:0; }
  .nav-order-row .row-actions{ flex:0 0 auto; flex-wrap:nowrap; gap:4px; }
  .nav-order-row .row-actions button{ padding:6px 10px; }

  main{ padding:24px 28px 60px; max-width:1100px; margin:0 auto; }
  .section{ display:none; }
  .section.active{ display:block; }

  .banner{
    background:var(--soft); border:1px solid var(--line); border-radius:var(--radius);
    padding:12px 16px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:.85rem; margin-bottom:18px;
  }
  .banner.warn{ background:transparent; border-color:var(--warn); color:var(--warn); }
  .muted-small{
    color:var(--muted); font-size:.8rem;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  /* One-line description preview under a title in the church's book tables --
     keeps rows short instead of letting a long description stretch them. */
  .desc-preview{ max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .book-grid{
    display:grid;
    /* minmax(0,1fr), not a bare 1fr -- a bare 1fr track still won't shrink
       below its content's min-content width (e.g. a category chip's
       white-space:nowrap), which blows the grid out past its container on a
       narrow screen at 3 columns instead of wrapping the content inside. */
    grid-template-columns:repeat(var(--book-cols, 3), minmax(0, 1fr));
    gap:16px;
    margin-top:18px;
  }
  .book-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px;
  }
  .book-card h3{ font-size:1.05rem; }
  .book-card .author{ color:var(--muted); font-size:.85rem; margin-bottom:8px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
  .book-card .desc{ font-size:.88rem; color:var(--desc); margin-bottom:12px; }
  .book-card .status{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:.75rem; }
  .book-card .cover{
    width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px;
    border:1px solid var(--line); margin-bottom:10px; background:var(--soft-2); display:block;
  }
  img.thumb{ width:34px; height:46px; object-fit:cover; border-radius:3px; border:1px solid var(--line); display:block; }

  /* Shelf view modes -- Large icons (default, unchanged) / List / Details.
     The card markup is identical in every mode (cover, .card-info wrapping
     title/author/chips/desc/status, .card-action holding the request/waitlist
     button) -- only the layout around it changes. */
  .book-grid.view-list, .book-grid.view-details{
    display:grid; grid-template-columns:repeat(var(--book-cols, 3), minmax(0, 1fr)); gap:8px;
  }
  .view-list .book-card, .view-details .book-card{
    display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 14px;
  }
  .view-list .book-card{ padding:8px 14px; }
  .view-details .book-card{ padding:14px 16px; align-items:flex-start; }
  .view-list .book-card .cover, .view-details .book-card .cover{
    width:auto; aspect-ratio:auto; margin-bottom:0; flex:0 0 auto;
  }
  .view-list .book-card .cover{ width:40px; height:56px; }
  .view-details .book-card .cover{ width:84px; height:118px; }
  .view-list .book-card .card-info, .view-details .book-card .card-info{
    flex:1 1 160px; min-width:0;
  }
  .view-list .book-card h3{
    font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .view-list .book-card .author, .view-list .book-card .status{
    margin-bottom:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .view-list .book-card .chips, .view-list .book-card .desc{ display:none; }
  .view-list .book-card .card-action, .view-details .book-card .card-action{
    flex:0 0 auto; margin-left:auto;
  }
  .view-details .book-card .card-action{ align-self:center; }
  .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .chip{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:.7rem; letter-spacing:.02em; padding:2px 8px; border-radius:999px;
    background:var(--soft); color:var(--desc); border:1px solid var(--line); white-space:nowrap;
  }
  .chip.kids{ background:var(--soft-2); color:var(--gold-dark); border-color:var(--gold); }
  /* Tags: quieter than the category chip, with a "#"; on a book card they're
     buttons that filter the shelf to that tag. */
  .chip.tag{ background:transparent; color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .chip.tag::before{ content:"#"; opacity:.6; }
  button.chip.tag{ cursor:pointer; line-height:inherit; }
  button.chip.tag:hover, button.chip.tag:focus-visible{ border-color:var(--gold); color:var(--gold-dark); outline:none; }
  .tags-line{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
  .check-row{
    display:flex; align-items:center; gap:8px;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:.9rem;
  }
  .check-row input{ width:auto; }
  .shelf-controls{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 2px;
  }
  .shelf-controls input[type="search"]{ flex:1 1 220px; min-width:160px; }
  .shelf-controls select{ flex:0 0 auto; width:auto; }
  .shelf-controls .check-row{ flex:0 0 auto; }

  /* Every checkbox in the app is a boolean on/off setting, not a form
     multi-select — styled as a toggle switch everywhere (.check-row and
     .switch alike) rather than a plain tickbox. Comes after their `width:auto`
     rules above on purpose, so this wins the cascade at equal specificity. */
  input[type=checkbox]{
    appearance:none; -webkit-appearance:none;
    width:38px !important; height:22px; min-width:38px; flex:0 0 auto;
    background:var(--line); border:1px solid var(--line); border-radius:999px;
    position:relative; margin:0; padding:0; cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
    vertical-align:middle;
  }
  input[type=checkbox]::before{
    content:""; position:absolute; top:1px; left:1px;
    width:18px; height:18px; border-radius:50%;
    background:var(--panel); box-shadow:0 1px 2px rgba(0,0,0,.3);
    transition:transform .15s ease;
  }
  input[type=checkbox]:checked{ background:var(--toggle-on); border-color:var(--toggle-on); }
  input[type=checkbox]:checked::before{ transform:translateX(16px); }
  input[type=checkbox]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  input[type=checkbox]:disabled{ opacity:.5; cursor:not-allowed; }

  /* show/hide toggle sitting inside a password field */
  .pw-field{ position:relative; display:block; }
  .pw-field input{ padding-right:62px; }
  .pw-toggle{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    margin:0; padding:4px 8px; border:none; background:none; cursor:pointer;
    color:var(--gold-dark); font-size:.76rem;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  /* small inline "copy" affordance */
  .link-btn{
    background:none; border:none; padding:0 2px; margin:0; cursor:pointer;
    color:var(--gold-dark); font-size:.78rem; text-decoration:underline;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }

  /* notifications bell + panel */
  /* #notif-panel is positioned absolute -- deliberately NOT relative to
     #notif-wrap (a small inline element that can end up almost anywhere once
     the topbar's buttons wrap on a narrow phone), but to header.topbar
     itself, which always spans the full width, so the panel can never be
     anchored somewhere that pushes it off the side of the screen. */
  #notif-btn{ position:relative; }
  #notif-count{
    position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px;
    border-radius:999px; background:var(--warn); color:#fff; font-size:.62rem; line-height:16px;
    text-align:center; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  #notif-panel{
    position:absolute; right:0; top:calc(100% + 6px); width:min(320px, 84vw); z-index:20;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 8px 28px rgba(0,0,0,.28); max-height:60vh; overflow-y:auto;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  #notif-panel .n-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; border-bottom:1px solid var(--line); font-size:.8rem;
  }
  .n-item{
    display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
    padding:10px 12px; border-bottom:1px solid var(--line); font-size:.82rem; color:var(--ink);
  }
  .n-item:hover{ background:var(--soft-2); }
  .n-item.unread{ background:var(--soft); }
  .n-item .n-when{ display:block; color:var(--muted); font-size:.7rem; margin-top:3px; }
  .n-empty{ padding:16px 12px; color:var(--muted); font-size:.82rem; text-align:center; }

  table.data{
    width:100%; border-collapse:collapse; margin-top:14px;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:.85rem; background:var(--panel);
  }
  .table-wrap{ overflow-x:auto; }
  table.data th, table.data td{
    text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);
    vertical-align:top;
  }
  table.data th{ color:var(--muted); text-transform:uppercase; font-size:.7rem; letter-spacing:.05em; }
  table.data td .btn.small{ margin-right:6px; }

  /* CSV import (My Lending): the file picker, and a colour per row outcome in
     the preview table -- good / imported-with-a-note / skipped / not imported. */
  input[type=file]{
    width:100%; max-width:100%; color:var(--ink); font-family:inherit; font-size:.85rem;
  }
  input[type=file]::file-selector-button{
    font:inherit; font-weight:600; cursor:pointer; margin-right:10px;
    background:transparent; color:var(--ink); border:1.5px solid var(--line);
    border-radius:var(--radius); padding:7px 12px;
  }
  #import-table td{ word-break:break-word; }
  #import-table .imp-ok{ color:var(--ok); }
  #import-table .imp-warn{ color:var(--amber); }
  #import-table .imp-skip{ color:var(--muted); }
  #import-table .imp-err{ color:var(--red); }

  /* My Lending's tables, as stacked cards on a phone instead of a table you
     have to scroll sideways through to reach the action buttons at the end
     of the row (that's how "Delete" on a listed book used to end up
     off-screen). Each <td> needs a data-label so its column name still shows
     next to the value once the header row is hidden. */
  @media (max-width: 640px){
    #incoming-table, #borrowed-table, #mybooks-table, #history-table{ border:0; }
    #incoming-table thead, #borrowed-table thead, #mybooks-table thead, #history-table thead{
      display:none;
    }
    #incoming-table tbody, #borrowed-table tbody, #mybooks-table tbody, #history-table tbody{
      display:block;
    }
    #incoming-table tr, #borrowed-table tr, #mybooks-table tr, #history-table tr{
      display:block; border:1px solid var(--line); border-radius:var(--radius);
      background:var(--panel); padding:4px 12px; margin-bottom:12px;
    }
    #incoming-table td, #borrowed-table td, #mybooks-table td, #history-table td{
      display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
      border-bottom:1px solid var(--line); padding:8px 0; text-align:right;
    }
    #incoming-table td:last-child, #borrowed-table td:last-child,
    #mybooks-table td:last-child, #history-table td:last-child{ border-bottom:none; }
    #incoming-table td:empty, #borrowed-table td:empty, #mybooks-table td:empty, #history-table td:empty{
      display:none;
    }
    #incoming-table td[data-label]::before, #borrowed-table td[data-label]::before,
    #mybooks-table td[data-label]::before, #history-table td[data-label]::before{
      content:attr(data-label); font-weight:600; color:var(--muted); text-align:left; flex:0 0 auto;
    }
    #incoming-table td.row-actions, #borrowed-table td.row-actions, #mybooks-table td.row-actions{
      display:block; text-align:left;
    }
    #mybooks-table td:first-child{ justify-content:center; }
    #mybooks-table td:first-child img.thumb{ max-height:120px; }
  }

  .empty-state{
    padding:40px 20px; text-align:center; color:var(--muted);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    border:1px dashed var(--line); border-radius:var(--radius); margin-top:16px;
  }
  .stack{ display:flex; flex-direction:column; gap:24px; }

  label .opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--muted); }
  .row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
  .inline-row{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
  .inline-row > div{ flex:1 1 160px; }
  .phone-country{ flex:0 0 auto; min-width:150px; }

  .contact-block{
    background:var(--soft-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px; margin:14px 0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:.9rem;
  }
  .contact-block .c-row{ margin:4px 0; }
  .contact-block .c-row b{ color:var(--muted); font-weight:600; margin-right:6px; }

  .badge{
    display:inline-block; padding:2px 8px; border-radius:999px; font-size:.72rem;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-weight:600;
    border:1px solid currentColor;
  }
  .badge.ok{ color:var(--ok); } .badge.soon{ color:var(--amber); } .badge.late{ color:var(--warn); }
  .badge.plain{ color:var(--muted); }

  .stat-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:10px; margin-bottom:4px;
  }
  .stat-grid .stat{
    border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--soft-2);
  }
  .stat-grid .stat .n{ font-size:1.5rem; font-weight:700; line-height:1.1; }
  .stat-grid .stat .k{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; margin-top:2px;
  }
  .stat-lists{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:16px; margin-top:14px;
  }
  .stat-lists-h{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; margin-bottom:4px;
  }

  .code-panel{
    margin-top:10px; padding:14px; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--panel); text-align:center;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  .code-panel .big-code{
    font-size:1.9rem; letter-spacing:.28em; font-weight:700; margin:6px 0 2px; color:var(--ink);
  }
  .code-panel .qr-box{ display:flex; justify-content:center; margin:10px 0; }
  .code-panel .qr-box svg{ width:172px; height:172px; background:#fff; padding:8px; border-radius:8px; }

  .modal-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:50;
    display:flex; align-items:center; justify-content:center; padding:18px;
  }
  .modal-card{
    background:var(--panel); border-radius:var(--radius); max-width:440px; width:100%;
    padding:20px; border:1px solid var(--line);
  }
  .modal-card.lg{ max-width:640px; max-height:86vh; overflow-y:auto; }
  #scanner-view{ width:100%; border-radius:8px; overflow:hidden; background:#000; min-height:240px; }
  #scanner-view video{ width:100%; display:block; }

  .help-body h3{ font-size:1rem; margin-top:18px; }
  .help-body p, .help-body li{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:.9rem; line-height:1.5; }
  .help-body .doc{ white-space:pre-wrap; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:.88rem; background:var(--soft-2); border-radius:8px; padding:12px 14px; }
  .brand-mark .help-link{ display:inline-block; margin-top:14px; font-size:.85rem;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

  .notice-area{ width:100%; min-height:180px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem; line-height:1.45; white-space:pre; }

  #print-area{ position:absolute; left:-9999px; top:0; width:1px; overflow:hidden; }
  @media print {
    body > *:not(#print-area){ display:none !important; }
    #print-area{ position:static; left:auto; width:auto; overflow:visible; padding:0; }
    #print-area .notice-print{ white-space:pre-wrap; font-family:Georgia,serif; font-size:15px; line-height:1.5; }
    #print-area svg{ width:200px; height:200px; }
  }