/* ── RESET & VARIABLES ── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#111210;--surface:#1a1b18;--surface2:#222320;--border:#2d2e2a;
  --owned:#6dbe8b;--owned-bg:rgba(109,190,139,0.1);
  --want-text:#555650;--accent:#c9a84c;--accent2:#e8c97a;
  --text:#e2ddd4;--muted:#55564f;--danger:#c46060;--must:#a78bfa;
  --safe-top:env(safe-area-inset-top,0px);--safe-bot:env(safe-area-inset-bottom,0px)
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;display:flex;flex-direction:column}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;background:var(--bg);z-index:999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px}
#login-screen.done{display:none}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px 28px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}
.login-title{font-family:'Playfair Display',serif;font-style:italic;font-size:1.3rem;color:var(--accent2);text-align:center;margin-bottom:4px}
.login-input{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.9rem;outline:none;transition:border-color .15s;width:100%}
.login-input:focus{border-color:var(--accent)}
.login-err{font-size:.75rem;color:var(--danger);text-align:center;min-height:16px}
.login-btn{background:var(--accent);border:none;border-radius:10px;padding:12px;color:#111;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .15s}
.login-btn:hover{background:var(--accent2)}

/* ── TOPBAR ── */
#topbar{flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);
  padding:10px 16px;padding-top:calc(10px + var(--safe-top));display:flex;flex-direction:column;gap:8px;z-index:100}
.row1{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
h1{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--accent2);font-style:italic;white-space:nowrap}
.stats-row{display:flex;gap:10px;font-size:.71rem;flex-wrap:wrap}
.stat{color:var(--muted)}.stat b{color:var(--owned)}.stat em{color:var(--accent);font-style:normal}
.acts{display:flex;gap:5px;flex-wrap:wrap;align-items:center}

/* ── PROFILE SWITCHER ── */
#profile-switcher{display:flex;align-items:center;gap:6px}
#profile-select{background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:5px 8px;color:var(--accent);font-family:'DM Sans',sans-serif;font-size:.75rem;
  outline:none;cursor:pointer;max-width:130px}
.role-badge{font-size:.65rem;padding:2px 7px;border-radius:10px;font-weight:500;white-space:nowrap}
.role-badge.owner{background:rgba(201,168,76,.15);color:var(--accent);border:1px solid rgba(201,168,76,.3)}
.role-badge.guest{background:rgba(167,139,250,.15);color:var(--must);border:1px solid rgba(167,139,250,.3)}

/* ── BUTTONS ── */
.btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:6px 11px;color:var(--muted);font-size:.74rem;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap;line-height:1}
.btn:hover,.btn:active{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#111;font-weight:500}
.btn.pri:active{background:var(--accent2)}
.btn.dng{color:var(--danger);border-color:transparent}
.btn.dng:hover{border-color:rgba(196,96,96,.4)}
.btn.sm{font-size:.68rem;padding:4px 8px}
.btn.must-btn{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3);color:var(--must)}
.btn.must-btn:hover{background:rgba(167,139,250,.25)}

/* ── SEARCH ── */
#sw{position:relative}
#search{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:8px 14px 8px 34px;color:var(--text);font-family:'DM Sans',sans-serif;
  font-size:.87rem;outline:none;transition:border-color .15s}
#search:focus{border-color:var(--accent)}
#search::placeholder{color:var(--muted)}
.si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85rem;pointer-events:none}

/* ── FILTER TABS + SORT ── */
.tabs-row{display:flex;gap:5px;align-items:center}
.tabs{display:flex;gap:4px;flex:1}
.tab{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:6px 4px;font-size:.71rem;color:var(--muted);text-align:center;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;user-select:none}
.tab.on{background:var(--surface2);border-color:var(--accent);color:var(--accent)}
#sort-sel{background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:5px 7px;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.71rem;
  outline:none;flex-shrink:0;cursor:pointer}

/* ── CAT NAV ── */
#nav{display:flex;gap:7px;padding:8px 16px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border);flex-shrink:0}
#nav::-webkit-scrollbar{display:none}
.pill{flex-shrink:0;background:var(--surface2);border:1px solid var(--border);
  border-radius:20px;padding:5px 13px;font-size:.71rem;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:all .15s;user-select:none;position:relative;overflow:hidden}
.pill:active{border-color:var(--accent);color:var(--accent)}
.pill-ripple{position:absolute;border-radius:50%;background:rgba(201,168,76,0.35);
  transform:scale(0);animation:ripple .5s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ── SCROLL AREA ── */
#scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 calc(80px + var(--safe-bot))}

/* ── SECTION ── */
.sec{padding:14px 16px 0}
.sec-hd{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:4px;gap:8px;flex-wrap:wrap}
.sec-title{font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;color:var(--accent2);
  cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px}
.sec-chev{font-size:.7rem;color:var(--muted);transition:transform .2s;display:inline-block}
.sec-chev.o{transform:rotate(90deg)}
.sec-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.sec-stat{font-size:.69rem;color:var(--muted);white-space:nowrap}
.sec-stat b{color:var(--owned)}
.prog{padding:4px 0 2px}
.prog-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:var(--owned);border-radius:2px;transition:width .4s}
.prog-lbl{font-size:.62rem;color:var(--muted);margin-top:2px}

/* ── SUBCATEGORY ── */
.sub-block{margin-bottom:2px}
.sub-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 4px;cursor:pointer;user-select:none}
.sub-hl{display:flex;align-items:center;gap:7px}
.sub-chev{font-size:.63rem;color:var(--muted);transition:transform .2s;display:inline-block}
.sub-chev.o{transform:rotate(90deg)}
.sub-lbl{font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sub-cnt{font-size:.62rem;color:var(--muted)}
.sub-acts{display:flex;gap:3px;opacity:0;transition:opacity .15s}
.sub-hd:hover .sub-acts{opacity:1}
.sbtn{background:none;border:1px solid transparent;border-radius:5px;color:var(--muted);
  font-size:.66rem;padding:2px 6px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.sbtn:hover{border-color:var(--border);color:var(--text)}
.sbtn.d:hover{border-color:rgba(196,96,96,.4);color:var(--danger)}
.sub-body{display:none}.sub-body.o{display:block}

/* ── BOOK ROW ── */
.bl{display:flex;flex-direction:column;gap:1px;margin-bottom:4px}
.br{display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:8px;cursor:pointer;transition:background .12s;
  border:1px solid transparent;min-height:44px;position:relative}
.br:active{transform:scale(.99)}
.br.own{background:var(--owned-bg)}.br:hover{background:var(--surface2)}
.br.own:hover{background:rgba(109,190,139,.15)}
.br.must-row{background:rgba(167,139,250,.06);border-color:rgba(167,139,250,.15)}
.br.must-row:hover{background:rgba(167,139,250,.12)}
.bd{width:9px;height:9px;border-radius:50%;flex-shrink:0;transition:all .2s}
.own .bd{background:var(--owned);box-shadow:0 0 5px rgba(109,190,139,.4)}
.want .bd{background:transparent;border:1.5px solid var(--muted)}
.must-row .bd{background:var(--must);box-shadow:0 0 5px rgba(167,139,250,.4)}
.bt{flex:1;min-width:0}
.btitle{font-size:.83rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.own .btitle{color:var(--text)}.want .btitle{color:var(--want-text)}
.must-row .btitle{color:var(--text)}
.bauth{font-size:.69rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bauth-row{display:flex;align-items:center;gap:5px;margin-top:1px}
.blang{font-size:.6rem;color:var(--accent);background:rgba(201,168,76,0.1);
  border:1px solid rgba(201,168,76,0.25);border-radius:3px;padding:0 4px;flex-shrink:0;line-height:1.6}
.bisbn{font-size:.6rem;color:var(--muted);background:none;
  border:1px solid rgba(85,86,80,.3);border-radius:3px;padding:0 4px;flex-shrink:0;line-height:1.6}
.bdel{background:none;border:none;color:transparent;font-size:.88rem;padding:6px;
  cursor:pointer;border-radius:6px;transition:all .15s;flex-shrink:0}
.br:hover .bdel{color:var(--danger)}

/* ── MUST SECTION ── */
.must-sec{padding:14px 16px 0}
.must-grid{display:flex;flex-direction:column;gap:4px}
.mi{display:flex;align-items:center;gap:10px;padding:10px;
  border-radius:8px;background:var(--surface2);border:1px solid var(--border)}
.mit{flex:1;min-width:0}
.mi-title{font-size:.83rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-auth{font-size:.69rem;color:var(--muted)}
.mi-add{background:var(--accent);border:none;border-radius:6px;color:#111;
  font-size:.7rem;font-weight:500;padding:5px 9px;cursor:pointer;
  font-family:'DM Sans',sans-serif;white-space:nowrap}
.mi-add:active{background:var(--accent2)}

/* ── EMPTY STATE ── */
.empty-state{padding:32px 20px;text-align:center;color:var(--muted);font-size:.82rem;font-style:italic}

/* ── LOADING ── */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:998;flex-direction:column;gap:16px}
#loading.done{display:none}
.spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.load-lbl{font-size:.8rem;color:var(--muted)}

/* ── UNDO MENU ── */
.undo-item{padding:9px 14px;font-size:.76rem;color:var(--text);cursor:pointer;
  border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s}
.undo-item:last-child{border-bottom:none}
.undo-item:hover{background:var(--surface2)}
.undo-clear{color:var(--danger) !important;font-size:.72rem}

/* ── SYNC DOT ── */
#dot{width:7px;height:7px;border-radius:50%;background:var(--owned);display:inline-block;margin-left:4px;vertical-align:middle}
#dot.err{background:var(--danger)}
#dot.load{background:var(--accent);animation:pulse .8s infinite}
#dot.pend{background:#f59e0b}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── TOAST ── */
#toast{position:fixed;top:calc(12px + var(--safe-top));left:50%;transform:translateX(-50%) translateY(-60px);
  background:var(--surface2);border:1px solid var(--border);border-radius:20px;
  padding:6px 16px;font-size:.74rem;color:var(--muted);z-index:400;
  transition:transform .25s;pointer-events:none;white-space:nowrap}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ── FAB ── */
#fab{position:fixed;bottom:calc(20px + var(--safe-bot));right:20px;width:52px;height:52px;
  border-radius:50%;background:var(--accent);border:none;font-size:1.5rem;color:#111;
  cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:99;
  transition:transform .15s,background .15s;display:flex;align-items:center;justify-content:center}
#fab:active{transform:scale(.92);background:var(--accent2)}
#fab.guest-fab{background:var(--must);box-shadow:0 4px 20px rgba(167,139,250,.3)}
#fab.guest-fab:active{background:#c4b5fd}

/* ── MODAL ── */
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);
  z-index:200;align-items:flex-end;justify-content:center;padding-bottom:var(--safe-bot)}
#overlay.on{display:flex}
#modal{background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0;
  padding:20px;width:100%;max-width:600px;animation:su .22s ease;
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(20px + var(--safe-bot))}
@keyframes su{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
#modal h2{font-family:'Playfair Display',serif;font-style:italic;color:var(--accent2);
  margin-bottom:16px;font-size:1.05rem}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:.67rem;color:var(--muted);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.08em}
.fld input,.fld select,.fld textarea{width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;color:var(--text);font-family:'DM Sans',sans-serif;
  font-size:.87rem;outline:none;transition:border-color .15s;-webkit-appearance:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent)}
.fld select option{background:var(--surface)}
.fld-err{border-color:var(--danger) !important}
.err-msg{font-size:.68rem;color:var(--danger);margin-top:3px}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;
  border-top:1px solid var(--border);margin-bottom:14px}
.tog-lbl{font-size:.86rem;color:var(--text)}
.tog{position:relative;width:46px;height:26px}
.tog input{opacity:0;width:0;height:0}
.tog-sl{position:absolute;inset:0;background:var(--border);border-radius:26px;cursor:pointer;transition:background .2s}
.tog-sl:before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;
  background:white;border-radius:50%;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tog input:checked+.tog-sl{background:var(--owned)}
.tog input:checked+.tog-sl:before{transform:translateX(20px)}
.mbtns{display:flex;gap:10px}
.mbtns .btn{flex:1;text-align:center;padding:12px;font-size:.84rem}

/* ── ISBN RESULTS ── */
.isbn-result-row{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.isbn-result-row:last-child{border-bottom:none}
.isbn-result-row:hover{background:var(--surface2)}
.isbn-result-title{font-size:.82rem;color:var(--text)}
.isbn-result-meta{font-size:.7rem;color:var(--muted);margin-top:2px}

/* ── GUEST MUST MODAL ── */
.guest-header{text-align:center;padding:8px 0 16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.guest-icon{font-size:2rem;margin-bottom:8px}
.guest-desc{font-size:.8rem;color:var(--muted);line-height:1.5}