:root{
    --paper: #F7F2E7;
    --paper-deep: #EFE7D6;
    --ink: #21281F;
    --navy: #1C2B3A;
    --forest: #2F4538;
    --brass: #A8813F;
    --brass-bright: #C79A4B;
    --burgundy: #6E2E2E;
    --line: rgba(33,40,31,0.14);
    --shadow: 0 8px 24px rgba(28,43,58,0.14);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Zen Kaku Gothic New', sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .texture{
    position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(28,43,58,0.03) 0, transparent 40%),
      radial-gradient(circle at 80% 60%, rgba(110,46,46,0.03) 0, transparent 45%);
  }
  header.hero{
    position:relative; z-index:1;
    padding: 56px 32px 40px;
    max-width:960px; margin:0 auto;
  }
  .eyebrow{
    font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--brass); font-weight:700; margin-bottom:14px;
  }
  h1.title{
    font-family:'Zen Old Mincho', serif;
    font-weight:700;
    font-size:clamp(38px, 7vw, 64px);
    margin:0 0 10px 0;
    color:var(--navy);
    letter-spacing:0.02em;
    line-height:1.1;
  }
  h1.title .roman{
    font-family:'Fraunces', serif;
    font-style:italic;
    font-weight:500;
    font-size:0.4em;
    color:var(--brass);
    margin-left:14px;
    letter-spacing:0;
  }
  .tagline{
    font-size:15px; color:rgba(33,40,31,0.68); max-width:520px; line-height:1.7;
  }
 
  .stats-row{
    display:flex; gap:28px; margin-top:28px; flex-wrap:wrap;
  }
  .stat{ font-family:'Fraunces', serif; }
  .stat .num{ font-size:30px; font-weight:600; color:var(--navy); }
  .stat .label{
    font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(33,40,31,0.55);
    font-family:'Zen Kaku Gothic New', sans-serif;
  }
  /* --- The Shelf: signature element --- */
  .shelf-wrap{
    position:relative; z-index:1;
    max-width:960px; margin:0 auto; padding: 8px 32px 0;
  }
  #shelf{ padding-top:8px; }
  .shelf-row{
    display:flex; align-items:flex-end; gap:2px;
    padding: 0 14px;
  }
  .plank{
    height:16px;
    background: linear-gradient(180deg, #8a5a2b, #6b4522 60%, #5a3a1c);
    border-radius:2px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.15);
    margin: 0 0 22px 0;
  }
  .spine{
    flex:0 0 auto;
    width:30px;
    border-radius:3px 3px 1px 1px;
    display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:8px;
    cursor:pointer;
    position:relative;
    transition: transform .18s ease, box-shadow .18s ease, opacity .15s ease;
    box-shadow: inset -3px 0 6px rgba(0,0,0,0.18), inset 2px 0 0 rgba(255,255,255,0.12), 0 3px 6px rgba(0,0,0,0.15);
    border-top:3px solid rgba(255,255,255,0.25);
  }
  .spine:hover{ transform: translateY(-6px); }
  .spine[draggable="true"]{ cursor:grab; }
  .spine.dragging{ opacity:0.35; }
  .spine.drag-over{ outline:2px dashed var(--brass-bright); outline-offset:2px; }
  .spine .spine-title{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family:'Zen Old Mincho', serif;
    font-size:11px;
    color:rgba(255,255,255,0.92);
    letter-spacing:0.04em;
    max-height:calc(100% - 10px);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .spine.want{ opacity:0.55; border-style:dashed; border-width:1px; border-color:rgba(255,255,255,0.5); box-shadow:none; }
  .spine .badge{
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%;
    background: var(--brass-bright);
    box-shadow:0 0 0 2px rgba(0,0,0,0.15);
  }
  .group-divider{
    flex:0 0 auto; width:18px; align-self:stretch;
    display:flex; align-items:flex-end; justify-content:center;
    position:relative; padding-bottom:8px;
  }
  .group-divider::before{
    content:''; position:absolute; left:50%; bottom:0; top:6px; width:2px;
    background:rgba(33,40,31,0.18); transform:translateX(-50%);
  }
  .group-divider .div-label{
    writing-mode: vertical-rl; text-orientation:mixed;
    font-family:'Zen Kaku Gothic New', sans-serif; font-size:9.5px; font-weight:700;
    letter-spacing:0.05em; color:var(--brass); white-space:nowrap; overflow:hidden;
    max-height:100%; opacity:0.85;
  }
   .empty-shelf{
    color:rgba(33,40,31,0.45); font-size:14px; padding: 30px 20px; font-family:'Fraunces',serif; font-style:italic;
  }
 
  /* --- Controls --- */
  .controls{
    max-width:960px; margin: 26px auto 0; padding: 0 32px;
    display:flex; flex-direction:column; gap:14px;
    position:relative; z-index:1;
  }
  .controls-line{
    display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .control-group{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .control-group .group-label{
    font-size:11px; color:rgba(33,40,31,0.5); letter-spacing:0.06em; margin-right:4px;
  }
  .filter-btn{
    border:1px solid var(--line); background:transparent; color:var(--ink);
    padding:7px 14px; border-radius:20px; font-size:12.5px; cursor:pointer;
    font-family:'Zen Kaku Gothic New', sans-serif;
    transition: all .15s ease;
  }
  .filter-btn.active{ background:var(--navy); color:var(--paper); border-color:var(--navy); }
  .filter-btn:hover:not(.active){ border-color:var(--navy); }
 
  .add-btn{
    background:var(--burgundy); color:var(--paper); border:none;
    padding:10px 20px; border-radius:20px; font-size:13.5px; cursor:pointer;
    font-weight:700; letter-spacing:0.02em;
    box-shadow: var(--shadow);
    transition: transform .12s ease, background .15s ease;
  }
  .add-btn:hover{ background:#7d3636; transform:translateY(-1px); }
 
  /* --- Book list --- */
  .list{
    max-width:960px; margin: 10px auto 80px; padding: 0 32px;
    display:grid; gap:12px;
    position:relative; z-index:1;
  }
  .group-header{
    font-family:'Zen Old Mincho', serif; font-size:13.5px; color:var(--brass);
    padding: 16px 4px 6px; border-bottom:1px solid var(--line); margin-top:2px;
    letter-spacing:0.05em;
  }
  .card{
    background:var(--paper-deep);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 16px;
    display:flex; gap:14px; align-items:center;
  }
  .card:hover{ border-color:var(--brass); }
  .swatch{ width:8px; align-self:stretch; border-radius:4px; flex:0 0 auto; }
  .card-body{ flex:1; min-width:0; cursor:pointer; }
  .card-title{ font-family:'Zen Old Mincho', serif; font-weight:700; font-size:16.5px; color:var(--navy); }
  .card-meta{ font-size:12px; color:rgba(33,40,31,0.6); margin-top:3px; }
  .progress-track{
    height:5px; background:rgba(33,40,31,0.1); border-radius:3px; margin-top:9px; overflow:hidden;
  }
  .progress-fill{ height:100%; background:var(--brass); border-radius:3px; }
  .stars{ font-size:13px; color:var(--brass); letter-spacing:1px; white-space:nowrap; }
  .status-chip{
    font-size:10.5px; padding:4px 9px; border-radius:12px; white-space:nowrap;
    text-transform:uppercase; letter-spacing:0.06em; font-weight:700;
  }
  .status-chip.reading{ background:rgba(47,69,56,0.15); color:var(--forest); }
  .status-chip.completed{ background:rgba(168,129,63,0.18); color:var(--brass); }
  .status-chip.want{ background:rgba(28,43,58,0.1); color:var(--navy); }
  .move-btns{ display:flex; flex-direction:column; gap:3px; flex:0 0 auto; }
  .move-btns button{
    width:24px; height:20px; border:1px solid var(--line); background:white; color:var(--navy);
    border-radius:5px; cursor:pointer; font-size:11px; line-height:1; padding:0;
  }
  .move-btns button:hover{ border-color:var(--brass); }
  .move-btns button:disabled{ opacity:0.3; cursor:default; }
 
  /* --- Modal --- */
  .overlay{
    position:fixed; inset:0; background:rgba(28,20,12,0.45); backdrop-filter: blur(2px);
    display:none; align-items:center; justify-content:center; z-index:10; padding:20px;
  }
  .overlay.open{ display:flex; }
  .modal{
    background:var(--paper); border-radius:14px; width:100%; max-width:460px;
    max-height:88vh; overflow-y:auto;
    padding:28px 26px; box-shadow:0 30px 60px rgba(0,0,0,0.35);
  }
  .modal h2{ font-family:'Zen Old Mincho', serif; margin:0 0 6px; color:var(--navy); font-size:22px; }
  .modal .hint{ font-size:11.5px; color:rgba(33,40,31,0.5); margin-bottom:16px; line-height:1.6; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:11.5px; color:rgba(33,40,31,0.6); margin-bottom:5px; letter-spacing:0.05em; }
  .field input, .field select, .field textarea{
    width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
    font-family:'Zen Kaku Gothic New', sans-serif; font-size:14px; background:white; color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:56px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .row3{ display:grid; grid-template-columns:2fr 1fr; gap:12px; }
  .modal-actions{ display:flex; gap:10px; margin-top:20px; }
  .btn{ flex:1; padding:11px; border-radius:8px; border:none; font-size:13.5px; font-weight:700; cursor:pointer; }
  .btn.primary{ background:var(--forest); color:white; }
  .btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
  .btn.danger{ background:transparent; color:var(--burgundy); border:1px solid var(--burgundy); }
  .star-picker{ font-size:22px; letter-spacing:4px; cursor:pointer; color:rgba(33,40,31,0.25); }
  .star-picker span.on{ color:var(--brass); }
   .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--navy); color:var(--paper); padding:11px 20px; border-radius:24px;
    font-size:13px; opacity:0; transition: all .25s ease; pointer-events:none; z-index:20;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
 
  @media (max-width:560px){
    .row2, .row3{ grid-template-columns:1fr; }
    header.hero{ padding:40px 18px 28px; }
    .shelf-wrap, .controls, .list{ padding-left:18px; padding-right:18px; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }
  .footer{
  margin:60px 0 30px;
  text-align:center;
  font-size:14px;
  color:#777;
}

.footer a{
  color:#555;
  text-decoration:none;
}

.footer a:hover{
  text-decoration:underline;
}
.about{
    max-width:900px;
    margin:60px auto;
    padding:28px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.about h2{
    margin-bottom:16px;
}

.about p{
    line-height:1.9;
    margin-bottom:12px;
}