:root{
  --paper:#FDF8F2;--ink:#2C2416;--cream:#F5EDE0;--border:#E3D4C3;
  --card-bg:#ffffff;--shadow:rgba(44,36,22,0.10);
  --header-bg:#2C2416;--header-text:#FDF8F2;--header-sub:#EDD5C6;
  --nav-bg:#F5EDE0;--tab-active:#D4967A;
  --btn-primary-bg:#D4967A;--btn-primary-text:#ffffff;
  --btn-sage-bg:#8FAF8A;--progress-fill:#D4967A;--accent:#9B7E9E;
  --blush-light:#EDD5C6;--mauve-light:#DDD0DF;
  --badge-tbr-bg:#D4E5D2;--badge-tbr-text:#3d6b3a;
  --badge-reading-bg:#FFF3CD;--badge-reading-text:#7a5800;
  --badge-read-bg:#EDD5C6;--badge-read-text:#8a3a1a;
  --badge-dnf-bg:#f0e0e0;--badge-dnf-text:#8a3030;
  --font-display:'Playfair Display',serif;
  --font-body:'Lato',sans-serif;
  --font-accent:'Dancing Script',cursive;
  --card-radius:14px;--pill-radius:24px;
  --shelf-wood:#8B5E3C;--shelf-wood-dark:#6B3F1E;
  --shelf-bg-top:rgba(80,40,10,.04);--shelf-bg-bot:rgba(80,40,10,.11);
  --shelf-plank-h:24px;--shelf-spine-h:175px;
  --shelf-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='100'%3E%3Cline x1='2' y1='0' x2='2' y2='100' stroke='rgba(0,0,0,.06)' stroke-width='1'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);min-height:100vh;transition:background .3s,color .3s;}

/* HEADER */
header{background:var(--header-bg);padding:0 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(0,0,0,.2);min-height:78px;overflow:hidden;}
.header-illus{flex-shrink:0;width:60px;height:60px;display:flex;align-items:center;justify-content:center;}
.header-center{display:flex;flex-direction:column;align-items:center;flex:1;padding:10px 6px;}
.header-title{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;color:var(--header-text);line-height:1.1;text-align:center;}
.header-sub{font-family:var(--font-accent);font-size:.95rem;color:var(--header-sub);margin-top:3px;text-align:center;}
.gear-btn{background:none;border:none;cursor:pointer;color:var(--header-text);font-size:1.2rem;padding:6px;border-radius:50%;transition:background .18s,transform .25s;opacity:.75;width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gear-btn:hover{background:rgba(255,255,255,.15);opacity:1;transform:rotate(45deg);}

/* NAV */
nav{display:flex;background:var(--nav-bg);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
nav::-webkit-scrollbar{display:none;}
.tab{padding:11px 18px;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:#8a7060;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font-body);text-transform:uppercase;}
.tab:hover{color:var(--tab-active);}
.tab.active{color:var(--tab-active);border-bottom-color:var(--tab-active);}

main{padding:16px;max-width:900px;margin:0 auto;}
.section{display:none;}.section.active{display:block;}

/* INPUTS */
.search-bar{display:flex;gap:8px;margin-bottom:14px;}
.search-bar input{flex:1;padding:10px 16px;border:1.5px solid var(--border);border-radius:var(--pill-radius);font-family:var(--font-body);font-size:.88rem;background:var(--card-bg);color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s;}
.search-bar input:focus{border-color:var(--btn-primary-bg);box-shadow:0 0 0 3px rgba(212,150,122,.15);}

/* BUTTONS */
.btn{padding:10px 18px;border-radius:var(--pill-radius);border:none;font-family:var(--font-body);font-weight:700;font-size:.82rem;cursor:pointer;letter-spacing:.04em;transition:all .18s;}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text);}
.btn-primary:hover{filter:brightness(.9);transform:translateY(-1px);}
.btn-sage{background:var(--btn-sage-bg);color:#fff;}.btn-sage:hover{filter:brightness(.9);}
.btn-ghost{background:transparent;color:var(--btn-primary-bg);border:1.5px solid var(--btn-primary-bg);}.btn-ghost:hover{background:var(--blush-light);}
.btn-sm{padding:6px 14px;font-size:.75rem;}.btn-xs{padding:4px 10px;font-size:.7rem;}

/* FILTERS + VIEW TOGGLE */
.lib-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.filters{display:flex;gap:6px;flex-wrap:wrap;}
.filter-pill{padding:6px 15px;border-radius:var(--pill-radius);font-size:.72rem;font-weight:700;cursor:pointer;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid var(--border);background:var(--card-bg);color:#7a6a5a;transition:all .18s;font-family:var(--font-body);}
.filter-pill:hover{border-color:var(--btn-primary-bg);color:var(--btn-primary-bg);}
.filter-pill.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.view-toggle{display:flex;gap:4px;background:var(--cream);border-radius:10px;padding:3px;}
.view-btn{background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:7px;font-size:.9rem;transition:all .18s;color:#8a7060;}
.view-btn.active{background:var(--card-bg);color:var(--btn-primary-bg);box-shadow:0 1px 4px var(--shadow);}
.section-heading{font-family:var(--font-display);font-size:1.1rem;margin-bottom:16px;color:var(--ink);display:flex;align-items:center;gap:8px;}
.section-heading::after{content:'';flex:1;height:1px;background:var(--border);}

/* BOOK GRID */
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:14px;}
.book-card{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:0 2px 10px var(--shadow);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid var(--border);}
.book-card:hover{transform:translateY(-5px);box-shadow:0 8px 24px var(--shadow);}
.book-card.ghost-card{opacity:.38;filter:grayscale(.85);}
.book-cover{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--cream);display:block;}
.book-cover-placeholder{width:100%;aspect-ratio:2/3;background:linear-gradient(135deg,var(--blush-light),var(--mauve-light));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.75rem;color:var(--ink);text-align:center;padding:12px;line-height:1.4;}
.book-info{padding:9px 11px 11px;}
.book-title{font-family:var(--font-display);font-size:.8rem;font-weight:600;line-height:1.25;margin-bottom:3px;}
.book-author{font-size:.68rem;color:#8a7060;margin-bottom:7px;}
.status-badge{display:inline-block;font-size:.62rem;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.05em;text-transform:uppercase;font-family:var(--font-body);}
.status-tbr{background:var(--badge-tbr-bg);color:var(--badge-tbr-text);}
.status-reading{background:var(--badge-reading-bg);color:var(--badge-reading-text);}
.status-read{background:var(--badge-read-bg);color:var(--badge-read-text);}
.status-dnf{background:var(--badge-dnf-bg);color:var(--badge-dnf-text);}
.series-pill{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--mauve-light);color:var(--ink);margin-bottom:4px;letter-spacing:.03em;}
.progress-wrap{margin-top:6px;}
.progress-track{height:5px;background:var(--cream);border-radius:5px;overflow:hidden;}
.progress-fill{height:100%;background:var(--progress-fill);border-radius:5px;transition:width .4s;}
.progress-label{font-size:.63rem;color:#8a7060;margin-top:3px;}

/* BOOKSHELF VIEW */
#shelf-view{display:none;}
.shelf-section{margin-bottom:4px;}
.shelf-section-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a7060;padding:0 4px 6px;font-family:var(--font-body);}
.shelf-row-wrap{overflow-x:auto;padding-bottom:2px;width:100%;display:block;}
.shelf-row{display:flex;align-items:flex-end;min-height:200px;width:max-content;padding:14px 16px 0;position:relative;background:linear-gradient(180deg,var(--shelf-bg-top) 0%,var(--shelf-bg-bot) 100%);border-radius:8px 8px 0 0;}
.shelf-plank{width:100%;height:var(--shelf-plank-h,24px);background:linear-gradient(180deg,var(--shelf-wood) 0%,var(--shelf-wood-dark) 60%,#4a2a0e 100%),var(--shelf-grain);background-blend-mode:normal,overlay;border-radius:0 0 4px 4px;box-shadow:0 6px 20px rgba(44,22,8,.4),0 2px 4px rgba(0,0,0,.3);position:relative;margin-bottom:26px;display:block;}
.shelf-plank::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(180deg,rgba(255,200,120,.28),transparent);border-radius:2px;}
.shelf-plank::after{content:'';position:absolute;bottom:-4px;left:10px;right:10px;height:7px;background:rgba(0,0,0,.2);filter:blur(5px);border-radius:50%;}

/* BOOK SPINES */
.book-spine{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  cursor:pointer;border-radius:3px 0 0 3px;position:relative;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
  flex-shrink:0;min-width:26px;max-width:54px;height:var(--shelf-spine-h,175px);
  /* Depth shadow: right edge darker, left edge light catch */
  box-shadow:4px 0 8px rgba(0,0,0,.45),inset -4px 0 10px rgba(0,0,0,.25),inset 2px 0 4px rgba(255,255,255,.18);
  overflow:hidden;margin-right:2px;
  /* Fallback color when no cover */
  background:#4a3020;
}
.book-spine:hover{transform:translateY(-14px) scaleY(1.02);box-shadow:6px 0 20px rgba(0,0,0,.6),inset -4px 0 10px rgba(0,0,0,.3);}
.book-spine.ghost-spine{opacity:.35;filter:grayscale(.9) brightness(.85);cursor:pointer;}
.book-spine.ghost-spine:hover{transform:translateY(-5px);opacity:.5;filter:grayscale(.6) brightness(.92);}

/* THE KEY CHANGE: cover image is the spine — full opacity, no blend */
.spine-cover-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  opacity:1;
  /* Slight left-edge light to simulate spine curvature */
  border-left:2px solid rgba(255,255,255,.12);
}
/* Dark scrim at top and bottom so text is always readable */
.book-spine::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.0) 35%,
    rgba(0,0,0,.0) 65%,
    rgba(0,0,0,.45) 100%
  );
  pointer-events:none;
}
.spine-title{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-family:var(--font-display);font-size:.62rem;font-weight:700;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.7);
  padding:8px 3px 4px;line-height:1.1;
  overflow:hidden;max-height:115px;white-space:nowrap;text-overflow:ellipsis;
  letter-spacing:.03em;position:relative;z-index:2;
}
.spine-author{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-size:.48rem;color:rgba(255,255,255,.85);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  padding:3px 3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-body);position:relative;z-index:2;
}
.spine-num{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  font-size:.46rem;font-weight:800;
  background:rgba(0,0,0,.55);color:rgba(255,255,255,.95);
  padding:1px 5px;border-radius:5px;white-space:nowrap;z-index:2;
  font-family:var(--font-body);backdrop-filter:blur(2px);
}
.shelf-add-btn{width:34px;height:175px;border:2px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#c0a080;font-size:1.3rem;flex-shrink:0;transition:all .18s;margin-left:6px;}
.shelf-add-btn:hover{border-color:var(--btn-primary-bg);color:var(--btn-primary-bg);background:rgba(212,150,122,.07);}

/* BOOK SEARCH RESULTS */
.search-modal-results{display:flex;flex-direction:column;max-height:420px;overflow-y:auto;}
.search-result-card{display:flex;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;align-items:flex-start;}
.search-result-card:hover{background:var(--cream);}
.src-cover{width:52px;height:76px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--cream);box-shadow:2px 2px 8px var(--shadow);}
.src-cover-ph{width:52px;height:76px;border-radius:6px;flex-shrink:0;background:linear-gradient(135deg,var(--blush-light),var(--mauve-light));display:flex;align-items:center;justify-content:center;font-size:.6rem;text-align:center;padding:4px;font-family:var(--font-display);}
.src-info{flex:1;min-width:0;}
.src-title{font-family:var(--font-display);font-size:.92rem;font-weight:600;line-height:1.25;margin-bottom:2px;}
.src-author{font-size:.74rem;color:#8a7060;margin-bottom:5px;font-style:italic;}
.src-meta{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:4px;}
.src-badge{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.04em;text-transform:uppercase;}
.src-series-badge{background:var(--mauve-light);color:var(--ink);}
.src-pages-badge{background:var(--cream);color:#7a6a5a;border:1px solid var(--border);}
.src-rating-badge{background:#FFF3CD;color:#7a5800;}
.src-desc{font-size:.72rem;color:#8a7060;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* RATING */
.rating-scale-toggle{display:flex;gap:6px;margin-bottom:8px;}
.scale-opt{padding:5px 14px;border-radius:20px;font-size:.72rem;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:var(--card-bg);color:#7a6a5a;transition:all .15s;font-family:var(--font-body);}
.scale-opt.active{background:var(--btn-primary-bg);color:#fff;border-color:var(--btn-primary-bg);}
.star-pick{font-size:1.4rem;cursor:pointer;color:#d4c0a0;transition:color .12s,transform .1s;display:inline-block;}
.star-pick:hover,.star-pick.lit{color:#E8A838;}
.star-pick:hover{transform:scale(1.15);}
.ten-scale{display:flex;gap:4px;flex-wrap:wrap;}
.ten-btn{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);background:var(--card-bg);color:var(--ink);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font-body);}
.ten-btn.active{background:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:var(--btn-primary-bg);}
.series-notice{background:var(--mauve-light);border-radius:10px;padding:10px 13px;font-size:.78rem;line-height:1.5;margin-bottom:12px;border:1px solid var(--border);}
.series-notice strong{font-family:var(--font-display);}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,10,5,.52);z-index:200;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--paper);border-radius:20px;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;box-shadow:0 12px 48px rgba(44,36,22,.3);border:1px solid var(--border);}
.modal-wide{max-width:620px;}.modal-search{max-width:560px;}
.modal-header{padding:16px 20px 13px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--paper);z-index:2;}
.modal-header h2{font-family:var(--font-display);font-size:1.1rem;color:var(--ink);}
.modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:#8a7060;line-height:1;border-radius:50%;transition:background .15s;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{background:var(--cream);}
.modal-body{padding:16px 20px 24px;}
.form-group{margin-bottom:13px;}
.form-group label{display:block;font-size:.74rem;font-weight:700;color:#7a6a5a;margin-bottom:5px;letter-spacing:.05em;text-transform:uppercase;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 13px;border:1.5px solid var(--border);border-radius:10px;font-family:var(--font-body);font-size:.88rem;background:var(--card-bg);color:var(--ink);outline:none;transition:border-color .18s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--btn-primary-bg);box-shadow:0 0 0 3px rgba(212,150,122,.1);}
.form-group textarea{resize:vertical;min-height:80px;}

/* DETAIL */
.detail-cover{width:100%;max-height:240px;object-fit:cover;border-radius:18px 18px 0 0;}
.detail-cover-ph{width:100%;height:170px;background:linear-gradient(135deg,var(--blush-light),var(--mauve-light));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.1rem;color:var(--ink);border-radius:18px 18px 0 0;}
.detail-title{font-family:var(--font-display);font-size:1.25rem;margin-bottom:4px;line-height:1.2;}
.detail-author{color:#8a7060;font-size:.86rem;margin-bottom:4px;font-style:italic;}
.detail-series{font-size:.78rem;color:var(--accent);font-weight:700;margin-bottom:10px;}
.detail-row{display:flex;gap:7px;align-items:center;margin-bottom:9px;flex-wrap:wrap;}
.review-box{background:var(--cream);border-radius:10px;padding:11px 13px;font-size:.84rem;line-height:1.6;color:var(--ink);border:1px solid var(--border);white-space:pre-wrap;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.stat-card{background:var(--card-bg);border-radius:var(--card-radius);padding:15px 16px;box-shadow:0 2px 8px var(--shadow);border:1px solid var(--border);}
.stat-num{font-family:var(--font-display);font-size:2.1rem;font-weight:600;color:var(--btn-primary-bg);line-height:1;}
.stat-label{font-size:.67rem;color:#8a7060;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;}
.genre-bar-wrap{background:var(--card-bg);border-radius:var(--card-radius);padding:15px 16px;box-shadow:0 2px 8px var(--shadow);margin-bottom:12px;border:1px solid var(--border);}
.genre-bar-wrap h3{font-family:var(--font-display);font-size:.93rem;margin-bottom:10px;}
.genre-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.genre-name{font-size:.72rem;width:95px;color:#7a6a5a;flex-shrink:0;}
.genre-track{flex:1;height:7px;background:var(--cream);border-radius:7px;overflow:hidden;}
.genre-fill{height:100%;background:var(--btn-sage-bg);border-radius:7px;}
.genre-count{font-size:.68rem;color:#8a7060;width:20px;text-align:right;}

/* READING CARD */
.reading-card{display:flex;gap:13px;border-radius:var(--card-radius);margin-bottom:13px;cursor:pointer;background:var(--card-bg);box-shadow:0 2px 10px var(--shadow);border:1px solid var(--border);overflow:hidden;transition:transform .18s,box-shadow .18s;padding:13px;}
.reading-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px var(--shadow);}

/* EMPTY + TOAST + UTIL */
.empty-state{text-align:center;padding:50px 20px;color:#b0988a;}
.empty-icon{font-size:3.5rem;margin-bottom:12px;}
.empty-state h3{font-family:var(--font-display);font-size:1.1rem;color:var(--ink);margin-bottom:7px;}
.empty-state p{font-size:.84rem;line-height:1.6;}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--ink);color:var(--paper);padding:10px 22px;border-radius:var(--pill-radius);font-size:.82rem;z-index:400;transition:transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;font-family:var(--font-body);box-shadow:0 4px 20px rgba(0,0,0,.2);}
.toast.show{transform:translateX(-50%) translateY(0);}
.divider{height:1px;background:var(--border);margin:14px 0;}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;}
.data-bar{display:flex;gap:8px;flex-wrap:wrap;background:var(--cream);border-radius:11px;padding:10px 13px;margin-bottom:11px;align-items:center;border:1px solid var(--border);}
.data-bar span{font-size:.74rem;color:#7a6a5a;font-weight:700;flex:1;}

/* STYLE STUDIO */
.studio-top-tabs{display:flex;border-bottom:2px solid var(--border);background:var(--cream);border-radius:14px 14px 0 0;overflow:hidden;}
.studio-top-tab{flex:1;padding:11px 8px;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:none;background:none;color:#8a7060;font-family:var(--font-body);border-bottom:3px solid transparent;transition:all .18s;text-align:center;}
.studio-top-tab:hover{color:var(--btn-primary-bg);background:var(--blush-light);}
.studio-top-tab.active{color:var(--btn-primary-bg);border-bottom-color:var(--btn-primary-bg);background:var(--paper);}
.studio-top-panel{display:none;}.studio-top-panel.active{display:block;}
.sub-tab-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;scrollbar-width:none;}
.sub-tab-bar::-webkit-scrollbar{display:none;}
.sub-tab{padding:8px 14px;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:none;background:none;color:#8a7060;font-family:var(--font-body);border-bottom:3px solid transparent;margin-bottom:-1px;transition:all .18s;white-space:nowrap;}
.sub-tab:hover{color:var(--btn-primary-bg);}
.sub-tab.active{color:var(--btn-primary-bg);border-bottom-color:var(--btn-primary-bg);}
.sub-panel{display:none;}.sub-panel.active{display:block;}
.aesthetic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px;margin-bottom:8px;}
.aesthetic-chip{border-radius:13px;overflow:hidden;cursor:pointer;border:2.5px solid transparent;transition:all .2s;position:relative;}
.aesthetic-chip:hover{transform:translateY(-3px);box-shadow:0 6px 18px var(--shadow);}
.aesthetic-chip.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(155,126,158,.3);}
.aesthetic-chip-icon{height:48px;display:flex;align-items:center;justify-content:center;}
.aesthetic-chip-body{padding:6px 7px 8px;text-align:center;}
.aesthetic-chip-name{font-size:.7rem;font-weight:700;line-height:1.2;}
.aesthetic-chip-sub{font-size:.6rem;opacity:.65;margin-top:1px;}
.chip-badge{position:absolute;top:3px;right:3px;background:var(--accent);color:#fff;font-size:.55rem;padding:1px 5px;border-radius:6px;font-weight:700;text-transform:uppercase;}
.font-category{margin-bottom:16px;}
.font-category-label{font-size:.71rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a7060;margin-bottom:7px;}
.font-grid{display:flex;flex-direction:column;gap:5px;}
.font-option{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;border:1.5px solid var(--border);cursor:pointer;background:var(--card-bg);transition:all .18s;}
.font-option:hover{border-color:var(--btn-primary-bg);background:var(--cream);}
.font-option.selected{border-color:var(--btn-primary-bg);background:var(--blush-light);}
.font-option-preview{flex:1;font-size:1rem;line-height:1.1;}
.font-option-meta{font-size:.66rem;color:#8a7060;font-family:'Lato',sans-serif;white-space:nowrap;}
.font-upload-zone{border:2px dashed var(--border);border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all .18s;background:var(--cream);margin-bottom:10px;}
.font-upload-zone:hover{border-color:var(--btn-primary-bg);background:var(--blush-light);}
.font-upload-zone p{font-size:.78rem;color:#8a7060;margin-top:5px;}
.custom-font-tag{display:inline-flex;align-items:center;gap:5px;background:var(--blush-light);border:1px solid var(--border);border-radius:20px;padding:3px 10px 3px 8px;font-size:.72rem;margin:3px;}
.custom-font-tag .tag-del{cursor:pointer;color:#8a7060;font-size:.8rem;}
.custom-font-tag .tag-del:hover{color:#8a3030;}
.color-pickers-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:4px;}
.color-row{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:9px;padding:7px 10px;border:1px solid var(--border);}
.color-row label{font-size:.68rem;font-weight:700;color:#7a6a5a;flex:1;line-height:1.2;font-family:'Lato',sans-serif;}
.color-swatch-btn{width:26px;height:26px;border-radius:6px;border:2px solid var(--border);cursor:pointer;flex-shrink:0;position:relative;overflow:hidden;transition:transform .15s;}
.color-swatch-btn:hover{transform:scale(1.12);}
.color-swatch-btn input[type=color]{position:absolute;inset:0;width:140%;height:140%;opacity:0;cursor:pointer;border:none;padding:0;}
.saved-themes-list{display:flex;flex-direction:column;gap:7px;margin-bottom:4px;}
.saved-theme-row{display:flex;align-items:center;gap:9px;background:var(--cream);border-radius:10px;padding:9px 12px;border:1px solid var(--border);}
.saved-theme-swatches{display:flex;gap:3px;}
.saved-theme-swatch{width:14px;height:14px;border-radius:4px;border:1px solid var(--border);}
.saved-theme-name{flex:1;font-size:.8rem;font-weight:700;color:var(--ink);font-family:var(--font-display);}
.saved-theme-actions{display:flex;gap:5px;}
.icon-preview-wrap{display:flex;align-items:center;justify-content:center;margin:10px 0;}
.icon-preview-canvas{width:80px;height:80px;border-radius:14px;overflow:hidden;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;}
.color-split-row{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.color-split-row label{font-size:.72rem;font-weight:700;color:#7a6a5a;width:80px;flex-shrink:0;}
.emoji-picker-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px;}
.emoji-opt{font-size:1.3rem;cursor:pointer;padding:4px 6px;border-radius:8px;border:2px solid transparent;transition:all .15s;}
.emoji-opt:hover{background:var(--cream);border-color:var(--border);}
.emoji-opt.selected{border-color:var(--btn-primary-bg);background:var(--blush-light);}

/* ── NAV BOTTOM POSITION ─────────────────────────── */
body.nav-at-bottom{padding-bottom:52px;}
nav.nav-bottom{position:fixed;bottom:0;left:0;right:0;top:auto;border-top:1px solid var(--border);border-bottom:none;box-shadow:0 -2px 12px var(--shadow);z-index:100;}
nav.nav-bottom .tab{flex:1;text-align:center;padding:8px 6px 10px;}
body.nav-at-bottom main{padding-bottom:24px;}

/* ── NAV SETTINGS PANEL ──────────────────────────── */
.nav-setting-row{display:flex;align-items:center;gap:10px;background:var(--cream);border-radius:10px;padding:9px 12px;margin-bottom:6px;border:1px solid var(--border);cursor:grab;user-select:none;transition:background .15s,box-shadow .15s;}
.nav-setting-row:active{cursor:grabbing;box-shadow:0 4px 14px var(--shadow);}
.nav-drag-handle{font-size:1rem;color:#b0988a;flex-shrink:0;cursor:grab;}
.nav-setting-icon{font-size:1.1rem;flex-shrink:0;}
.nav-setting-label{flex:1;font-size:.82rem;font-weight:700;color:var(--ink);font-family:var(--font-display);}
/* Toggle switch */
.toggle-switch{position:relative;display:inline-block;width:38px;height:21px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-track{position:absolute;inset:0;background:#ccc;border-radius:21px;cursor:pointer;transition:background .2s;}
.toggle-track::before{content:'';position:absolute;width:15px;height:15px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle-switch input:checked + .toggle-track{background:var(--btn-primary-bg);}
.toggle-switch input:checked + .toggle-track::before{transform:translateX(17px);}

/* ── SERIES REVIEW MODAL ──────────────────────────────────────────── */
/* Row styles are inline for explicit sizing control — no classes needed */