:root {
  --light-bg:#FAF7F2;--light-surface:#FFFFFF;--light-border:#EDE5D8;--light-ink:#1A1410;--light-inkMid:#4A3F35;--light-inkLight:#9A8A7A;
  --light-violet:#6B3FA0;--light-violetLight:#9B6DC5;--light-violetPale:#F0E8F8;--light-gold:#C9A155;--light-goldLight:#E8C97A;
  --light-rose:#C06C84;--light-green:#2D7D4F;--light-greenPale:#E8F4EE;
  --dark-bg:#0F0B14;--dark-surface:#1C1525;--dark-border:#2E2540;--dark-ink:#F0EAE0;--dark-inkMid:#C0B0A0;--dark-inkLight:#7A6A80;
  --dark-violet:#9B6DC5;--dark-violetLight:#C4A0E8;--dark-violetPale:#2A1E3A;--dark-gold:#D4AE68;--dark-goldLight:#F0CF88;
  --dark-rose:#E08AA0;--dark-green:#4AAD74;--dark-greenPale:#1A3028;
  --bg:var(--dark-bg);--surface:var(--dark-surface);--border:var(--dark-border);--ink:var(--dark-ink);--inkMid:var(--dark-inkMid);
  --inkLight:var(--dark-inkLight);--violet:var(--dark-violet);--violetLight:var(--dark-violetLight);--violetPale:var(--dark-violetPale);
  --gold:var(--dark-gold);--goldLight:var(--dark-goldLight);--rose:var(--dark-rose);--green:var(--dark-green);--greenPale:var(--dark-greenPale);
  --font-serif:'Cormorant Garamond',serif;--font-sans:'Jost',sans-serif;--radius:16px;--shadow:3px 3px 10px rgba(0,0,0,0.2);--transition:all 0.3s ease;
}
[data-theme="light"] {
  --bg:var(--light-bg);--surface:var(--light-surface);--border:var(--light-border);--ink:var(--light-ink);--inkMid:var(--light-inkMid);
  --inkLight:var(--light-inkLight);--violet:var(--light-violet);--violetLight:var(--light-violetLight);--violetPale:var(--light-violetPale);
  --gold:var(--light-gold);--goldLight:var(--light-goldLight);--rose:var(--light-rose);--green:var(--light-green);--greenPale:var(--light-greenPale);
  --shadow:3px 3px 10px rgba(0,0,0,0.05);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-tap-highlight-color:transparent;}
h1,h2,h3,h4,.serif{font-family:var(--font-serif);font-weight:600;}
.hidden{display:none!important;}
.app-container{max-width:1200px;margin:0 auto;height:100dvh;height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.fullscreen-gate{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--dark-bg);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--dark-ink);overflow-y:auto;}
.stars-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background-image:radial-gradient(1px 1px at 20px 30px,#fff,rgba(0,0,0,0)),radial-gradient(1px 1px at 40px 70px,#fff,rgba(0,0,0,0)),radial-gradient(1px 1px at 50px 160px,#fff,rgba(0,0,0,0)),radial-gradient(1px 1px at 90px 40px,#fff,rgba(0,0,0,0)),radial-gradient(1px 1px at 130px 80px,#fff,rgba(0,0,0,0)),radial-gradient(1px 1px at 160px 120px,#fff,rgba(0,0,0,0));background-repeat:repeat;background-size:200px 200px;opacity:0.3;animation:starsTwinkle 120s linear infinite;}
@keyframes starsTwinkle {
  0% { background-position: 0 0; opacity: 0.25; }
  50% { opacity: 0.45; }
  100% { background-position: 1000px 500px; opacity: 0.25; }
}
.gate-inner{display:flex;flex-direction:column;align-items:center;padding:40px 24px;width:100%;max-width:420px;}
.logo-svg{width:96px;height:96px;margin-bottom:24px;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(155,109,197,0.4));}
@keyframes float{0%{transform:translateY(0);}50%{transform:translateY(-10px);}100%{transform:translateY(0);}}
.gate-title{font-family:var(--font-serif);font-size:3rem;color:var(--dark-gold);margin-bottom:8px;letter-spacing:2px;}
.gate-sub{color:var(--dark-inkLight);margin-bottom:28px;font-size:1rem;}
.gate-input-wrap{width:100%;max-width:320px;margin-bottom:16px;}
.input-gate{width:100%;background:rgba(255,255,255,0.05);border:2px solid rgba(155,109,197,0.3);color:var(--dark-ink);padding:16px 24px;border-radius:30px;font-size:1.2rem;outline:none;transition:var(--transition);text-align:center;font-family:var(--font-sans);}
.input-gate:focus{border-color:var(--dark-violet);box-shadow:0 0 20px rgba(155,109,197,0.3);}
.gate-error{color:var(--dark-rose);margin-top:8px;font-size:0.9rem;min-height:20px;}
.gate-divider{display:flex;align-items:center;gap:12px;width:100%;max-width:320px;margin:20px 0;color:var(--dark-inkLight);font-size:0.85rem;}
.gate-divider::before,.gate-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.1);}
.btn-demo{background:transparent;border:1px dashed rgba(212,174,104,0.5);color:var(--dark-gold);padding:14px 28px;border-radius:30px;cursor:pointer;font-family:var(--font-sans);font-size:0.95rem;transition:var(--transition);width:100%;max-width:320px;}
.btn-demo:hover{background:rgba(212,174,104,0.1);border-color:var(--dark-gold);}
.demo-banner{background:linear-gradient(90deg,var(--dark-violet),var(--dark-gold));color:#fff;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;font-weight:500;z-index:200;flex-shrink:0;}
.demo-banner button{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);color:#fff;padding:4px 12px;border-radius:20px;cursor:pointer;font-size:0.8rem;transition:var(--transition);}
.demo-banner button:hover{background:rgba(255,255,255,0.3);}
.demo-info-box{background:rgba(155,109,197,0.1);border:1px solid var(--violet);border-radius:12px;padding:16px;margin-bottom:16px;font-size:0.9rem;color:var(--inkMid);}

.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violetLight));color:#fff;border:none;padding:16px 32px;border-radius:30px;font-size:1.05rem;font-family:var(--font-sans);font-weight:500;cursor:pointer;transition:var(--transition);box-shadow:0 4px 15px rgba(155,109,197,0.4);display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(155,109,197,0.5);}
.btn-primary:active{transform:scale(0.96);}
.btn-secondary{background:var(--surface);border:1px dashed var(--violet);color:var(--violet);padding:12px 24px;border-radius:var(--radius);cursor:pointer;transition:var(--transition);font-weight:500;text-align:center;width:100%;font-family:var(--font-sans);}
.btn-secondary:hover{background:var(--violetPale);}
.btn-danger{background:rgba(224,138,160,0.1);border:1px solid var(--rose);color:var(--rose);padding:12px;border-radius:8px;cursor:pointer;font-weight:500;width:100%;text-align:center;transition:var(--transition);font-family:var(--font-sans);}
.btn-danger:hover{background:var(--rose);color:#fff;}
.input-dark{background:var(--dark-surface);border:2px solid var(--dark-border);color:var(--dark-ink);padding:16px 24px;border-radius:var(--radius);font-size:1.2rem;outline:none;transition:var(--transition);text-align:center;margin-bottom:24px;font-family:var(--font-sans);width:80%;max-width:300px;}
.input-dark:focus{border-color:var(--dark-violet);box-shadow:0 0 15px rgba(155,109,197,0.3);}
.input-std{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:12px;border-radius:8px;font-size:1rem;margin-bottom:14px;outline:none;transition:var(--transition);font-family:var(--font-sans);}
.input-std:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(155,109,197,0.1);}
select.input-std{appearance:none;cursor:pointer;}
textarea.input-std{resize:vertical;}
.shake{animation:shake 0.5s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-10px);}50%{transform:translateX(10px);}75%{transform:translateX(-10px);}}
.view{display:none;}
.view.active{display:block;animation:fade-in 0.3s;}
@keyframes fade-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.ob-wrapper{overflow-y:auto;}
.ob-container{position:relative;width:100%;min-height:100vh;}
.onboarding-screen{display:none;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;width:100%;min-height:100vh;position:absolute;top:0;left:0;}
.onboarding-screen.active{display:flex;animation:fade-in 0.5s forwards;}
.ob-title{font-size:2.5rem;margin-bottom:12px;color:var(--dark-gold);font-family:var(--font-serif);}
.ob-subtitle{font-size:1.1rem;color:var(--dark-inkLight);margin-bottom:40px;line-height:1.6;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:440px;margin-bottom:28px;}
.card-select{background:var(--dark-surface);border:2px solid var(--dark-border);border-radius:var(--radius);padding:20px;text-align:center;cursor:pointer;transition:var(--transition);color:var(--dark-ink);}
.card-select.active{border-color:var(--dark-violet);background:var(--dark-violetPale);color:var(--dark-violetLight);}
.card-select span{display:block;font-size:2rem;margin-bottom:8px;}
.pill-container{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:500px;margin-bottom:30px;}
.pill{background:var(--dark-surface);border:1px solid var(--dark-border);padding:10px 16px;border-radius:20px;cursor:pointer;transition:var(--transition);font-size:0.95rem;color:var(--dark-inkMid);user-select:none;}
.pill.active{background:var(--dark-violet);color:#fff;border-color:var(--dark-violet);}
.slider-container{width:100%;max-width:320px;margin-bottom:30px;text-align:center;}
.slider{width:100%;margin:15px 0;accent-color:var(--dark-violet);}
.goal-input{font-size:4rem;background:transparent;border:none;color:var(--dark-gold);text-align:center;width:150px;font-family:var(--font-serif);outline:none;border-bottom:2px dashed var(--dark-border);}
.goal-input:focus{border-bottom-color:var(--dark-violet);}
.progress-dots{position:fixed;bottom:40px;display:flex;gap:8px;z-index:1001;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dark-border);transition:var(--transition);}
.dot.active{background:var(--dark-gold);transform:scale(1.3);}
.skip-btn{position:absolute;top:20px;right:24px;background:none;border:none;color:var(--dark-inkLight);font-size:0.9rem;cursor:pointer;font-family:var(--font-sans);}

.app-container{max-width:1200px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.content-col{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);}
.header-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--ink);}
.sidebar-brand{display:none;}
.header-logo svg{width:32px;height:32px;}
.header-actions{display:flex;gap:12px;align-items:center;}
.icon-btn{background:none;border:none;color:var(--ink);font-size:1.2rem;cursor:pointer;padding:8px;border-radius:50%;transition:var(--transition);}
.icon-btn:hover{background:var(--violetPale);}
.main-content{flex:1;overflow-y:auto;padding:20px;padding-bottom:100px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.bottom-nav{position:fixed;bottom:0;left:0;width:100%;background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:10px 0 calc(10px + env(safe-area-inset-bottom));z-index:100;box-shadow:0 -4px 20px rgba(0,0,0,0.1);backdrop-filter:blur(10px);}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--inkLight);text-decoration:none;font-size:0.7rem;font-weight:500;transition:var(--transition);cursor:pointer;padding:4px 8px;border-radius:12px;min-width:48px;}
.nav-item svg{width:22px;height:22px;fill:currentColor;}
.nav-item.active{color:var(--violet);}
.nav-item.active svg{filter:drop-shadow(0 0 6px rgba(155,109,197,0.5));}
.greeting{font-size:1.8rem;margin-bottom:16px;color:var(--ink);}
.reader-level-card{background:linear-gradient(135deg,var(--surface),var(--violetPale));border:1px solid var(--gold);border-radius:var(--radius);padding:18px 20px;margin-bottom:20px;cursor:pointer;box-shadow:var(--shadow);transition:var(--transition);}
.reader-level-card:hover{transform:translateY(-2px);}
.rlc-top{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.rlc-emoji{font-size:2.2rem;flex-shrink:0;}
.rlc-level-label{font-size:0.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);}
.reader-level-card h4{margin:2px 0;font-size:1.1rem;color:var(--ink);}
.rlc-xp{font-weight:700;color:var(--violet);font-size:0.95rem;flex-shrink:0;}
.rlc-progress-bar{width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:6px;}
.rlc-progress-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--gold));border-radius:4px;transition:width 0.5s ease;}
.rlc-sub{font-size:0.75rem;color:var(--inkLight);}
.home-snapshot-row{display:flex;gap:10px;margin:0 0 20px 0;}
.home-snapshot-item{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 8px;text-align:center;box-shadow:var(--shadow);}
.home-snapshot-item .hs-num{display:block;font-size:1.6rem;font-weight:700;font-family:var(--font-serif);color:var(--violet);line-height:1.1;}
.home-snapshot-item .hs-label{display:block;font-size:0.65rem;color:var(--inkLight);margin-top:4px;text-transform:uppercase;letter-spacing:0.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-daily-game-card{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--violet),var(--gold));border-radius:var(--radius);padding:18px 20px;margin-bottom:24px;cursor:pointer;box-shadow:0 10px 30px rgba(155,109,197,0.35);transition:var(--transition);color:#fff;}
.home-daily-game-card:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(155,109,197,0.45);}
.home-daily-game-emoji{font-size:2.5rem;flex-shrink:0;}
.home-daily-game-label{font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:0.85;}
.home-daily-game-card h4{margin:2px 0;font-size:1.1rem;color:#fff;}
.home-daily-game-card p{margin:0;font-size:0.8rem;opacity:0.9;}
.home-daily-game-arrow{margin-left:auto;font-size:1.3rem;flex-shrink:0;}
.year-progress-card{background:linear-gradient(135deg,var(--surface),var(--violetPale));border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:24px;box-shadow:var(--shadow);}
.yp-label{display:flex;justify-content:space-between;font-size:0.95rem;color:var(--inkMid);margin-bottom:10px;font-weight:500;}
.yp-sub{font-size:0.78rem;color:var(--inkLight);margin-top:8px;}
.section-title{font-size:1.1rem;color:var(--inkMid);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-serif);}
.mood-selector {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 4px 14px 4px;
  margin-bottom: 24px;
  scrollbar-width: none;
}
.mood-selector::-webkit-scrollbar {
  display: none;
}
.mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 95px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.mood-btn span:first-child {
  font-size: 1.8rem;
  transition: transform 0.3s ease;
}
.mood-btn span:last-child {
  font-size: 0.75rem;
  color: var(--inkMid);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.mood-btn:hover {
  transform: translateY(-4px);
  border-color: var(--violetLight);
  box-shadow: 0 8px 20px rgba(155, 109, 197, 0.15);
}
.mood-btn:hover span:first-child {
  transform: scale(1.2);
}
.mood-btn.active {
  border-color: var(--violet);
  background: linear-gradient(135deg, var(--surface), var(--violetPale));
  box-shadow: 0 8px 25px rgba(155, 109, 197, 0.25);
  transform: scale(1.05) translateY(-2px);
}
.mood-btn.active span:first-child {
  transform: scale(1.1);
}
.mood-btn.active span:last-child {
  color: var(--violet);
}
.reading-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;gap:14px;box-shadow:var(--shadow);margin-bottom:14px;position:relative;overflow:hidden;transition:var(--transition);}
.book-card-hover:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15);border-color:var(--violet);}
.book-cover{width:80px;height:120px;border-radius:8px;background:linear-gradient(135deg,var(--border),var(--violetPale));flex-shrink:0;box-shadow:2px 2px 8px rgba(0,0,0,0.15);display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--violet);overflow:hidden;}
.book-cover img{width:100%;height:100%;object-fit:cover;}
.book-info{flex:1;display:flex;flex-direction:column;min-width:0;}
.book-title{font-size:1.1rem;font-family:var(--font-serif);margin-bottom:4px;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.book-author{font-size:0.85rem;color:var(--inkLight);margin-bottom:8px;}
.book-review{font-size:0.82rem;color:var(--inkMid);font-style:italic;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.badges{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.badge{font-size:0.7rem;padding:4px 8px;border-radius:12px;font-weight:500;}
.badge-rose{background:rgba(192,108,132,0.15);color:var(--rose);}
.badge-violet{background:rgba(107,63,160,0.15);color:var(--violet);}
.badge-gold{background:rgba(201,161,85,0.15);color:var(--gold);}
.badge-green{background:rgba(45,125,79,0.15);color:var(--green);}
.stars-display{font-size:0.85rem;letter-spacing:1px;}
.progress-container{margin-top:auto;}
.progress-text{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--inkLight);margin-bottom:6px;}
.progress-bar{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--gold));border-radius:3px;transition:width 0.5s ease;}
.progress-fill.shimmer{background:linear-gradient(90deg,var(--violet),var(--gold),var(--violet));background-size:200% 100%;animation:shimmer 2s infinite linear;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow);transition:var(--transition);}
.stat-card:hover{border-color:var(--violet);transform:translateY(-2px);}
.stat-card h4{font-size:1.5rem;color:var(--ink);margin-bottom:4px;font-family:var(--font-sans);}
.stat-card p{font-size:0.72rem;color:var(--inkLight);text-transform:uppercase;letter-spacing:0.5px;}
.milestone-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:24px;display:flex;align-items:center;gap:16px;}
.milestone-icon{font-size:2.5rem;flex-shrink:0;}
.empty-state{text-align:center;padding:40px 20px;color:var(--inkLight);}
.empty-state p{font-size:1rem;}

.shelf-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.filter-pills{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.filter-pill{background:var(--surface);border:1px solid var(--border);color:var(--inkLight);padding:6px 16px;border-radius:20px;cursor:pointer;font-size:0.85rem;white-space:nowrap;transition:var(--transition);font-family:var(--font-sans);}
.filter-pill.active{background:var(--violet);border-color:var(--violet);color:#fff;}
.wishlist-banner{background:linear-gradient(135deg,var(--violet),var(--violetLight));padding:20px;border-radius:var(--radius);color:#fff;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 20px rgba(155,109,197,0.3);}
.star-rating{display:flex;gap:8px;margin-bottom:16px;justify-content:center;}
.star-btn{background:none;border:none;font-size:2rem;cursor:pointer;transition:var(--transition);color:var(--border);filter:grayscale(1);padding:4px;}
.star-btn.active{color:var(--gold);filter:grayscale(0);transform:scale(1.1);}
.star-btn:hover{transform:scale(1.2);}
.bf-avatar{width:64px;height:64px;border-radius:50%;background:var(--violetPale);display:flex;align-items:center;justify-content:center;font-size:2rem;margin-right:14px;flex-shrink:0;border:2px solid var(--border);}
.crush-hearts{font-size:1.1rem;letter-spacing:2px;}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.65);z-index:2000;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.active{display:flex;animation:fade-in 0.2s;}
.modal-content{background:var(--surface);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;border-radius:24px 24px 0 0;padding:24px;box-shadow:0 -10px 40px rgba(0,0,0,0.3);animation:slide-up 0.4s cubic-bezier(0.16,1,0.3,1);}
@keyframes slide-up{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.close-btn{background:none;border:none;font-size:1.5rem;color:var(--inkLight);cursor:pointer;padding:4px;line-height:1;}
.search-results{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:220px;overflow-y:auto;border:1px solid var(--border);border-radius:12px;padding:8px;}
.search-item{display:flex;gap:12px;padding:8px;border-radius:8px;cursor:pointer;transition:var(--transition);align-items:center;width:100%;border:0;background:transparent;text-align:left;font-family:var(--font-sans);}
.search-item:hover{background:var(--violetPale);}
.search-item img,.cover-placeholder{width:36px;height:54px;object-fit:cover;border-radius:4px;flex-shrink:0;background:var(--border);display:flex;align-items:center;justify-content:center;}
.search-item h5{font-size:0.9rem;color:var(--ink);margin-bottom:2px;}
.search-item p{font-size:0.78rem;color:var(--inkLight);}
.settings-section{margin-bottom:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);}
.settings-row:last-child{border-bottom:none;}
.toggle-switch{position:relative;display:inline-block;width:50px;height:28px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.slider-toggle{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--border);transition:.4s;border-radius:34px;}
.slider-toggle:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:white;transition:.4s;border-radius:50%;}
input:checked+.slider-toggle{background-color:var(--violet);}
input:checked+.slider-toggle:before{transform:translateX(22px);}
.chart-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:24px;box-shadow:var(--shadow);position:relative;height:280px;width:100%;}
.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;margin-bottom:20px;}
.cal-day-header{font-size:0.75rem;color:var(--inkLight);padding-bottom:8px;font-weight:600;}
.cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:0.85rem;border-radius:8px;position:relative;transition:var(--transition);cursor:default;}
.cal-cell.today{background:var(--violetPale);color:var(--violet);font-weight:700;}
.cal-cell.has-book{border:2px solid var(--gold);background:rgba(212,174,104,0.08);}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);position:absolute;bottom:3px;}
.cal-legend{margin-top:8px;}
.cal-book-entry{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:0.9rem;}
.cal-day-badge{background:var(--gold);color:#1a1410;padding:2px 8px;border-radius:12px;font-weight:600;font-size:0.8rem;flex-shrink:0;}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:12px 24px;border-radius:30px;font-size:0.9rem;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,0.2);animation:fade-in 0.3s;backdrop-filter:blur(10px);}
.confetti{position:fixed;top:-20px;width:8px;height:8px;opacity:0;z-index:9999;animation:confetti-fall var(--dur,2s) ease-in forwards;pointer-events:none;}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(0deg);opacity:1;}80%{opacity:1;}100%{transform:translateY(110vh) rotate(720deg);opacity:0;}}
.streak-badge{background:linear-gradient(135deg,rgba(212,174,104,0.08),rgba(155,109,197,0.08));border:1px solid rgba(212,174,104,0.4);border-radius:var(--radius);padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:20px;transition:var(--transition);}
.streak-badge:hover{border-color:var(--gold);}
.streak-badge>span{font-size:2rem;flex-shrink:0;}
.streak-badge strong{font-size:1.15rem;color:var(--gold);display:block;}
.streak-badge p{font-size:0.8rem;color:var(--inkLight);margin-top:2px;}
.genre-list{margin-bottom:24px;}
.genre-row{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);gap:4px;}
.genre-row:last-child{border-bottom:none;}
.genre-name{font-size:0.88rem;color:var(--inkMid);width:110px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.genre-count{font-size:0.88rem;color:var(--inkLight);width:24px;text-align:right;flex-shrink:0;}
.wrapup-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:var(--shadow);}
.wrapup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.wrapup-book-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);}
.wrapup-book-row:last-child{border-bottom:none;}
#header-timer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  font-family: var(--font-sans);
}
#header-timer-btn:hover {
  background: var(--violetPale);
  border-color: var(--violet);
  transform: translateY(-1px);
}
#header-timer-btn.running {
  border-color: var(--green);
  background: var(--greenPale);
  color: var(--green);
  box-shadow: 0 0 10px rgba(74, 173, 116, 0.2);
  animation: header-timer-pulse 2s infinite;
}
@keyframes header-timer-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 173, 116, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(74, 173, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 173, 116, 0); }
}
.shelf-filter-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.shelf-sort{margin:0;padding:8px 10px;font-size:0.82rem;flex-shrink:0;width:auto;}
.btn-clear-filters{margin-left:auto;padding:6px 14px;font-size:0.75rem;font-family:var(--font-sans);font-weight:500;color:var(--inkLight);background:rgba(255,255,255,0.02);border:1px dashed var(--border);border-radius:20px;cursor:pointer;transition:var(--transition);white-space:nowrap;flex-shrink:0;}
.btn-clear-filters:hover{color:var(--rose);border-color:var(--rose);background:rgba(224,138,160,0.05);}
.badge-dnf{background:rgba(224,138,160,0.1);color:var(--rose);border:1px solid rgba(224,138,160,0.3);}
.quotes-list{max-height:260px;overflow-y:auto;}
.quote-row{padding:12px 0;border-bottom:1px solid var(--border);}
.quote-row:last-child{border-bottom:none;}
.quote-text{font-size:0.9rem;color:var(--ink);font-style:italic;line-height:1.5;}
.quote-page{font-size:0.78rem;color:var(--inkLight);margin-top:4px;}
@media(min-width:768px){
  .app-container{flex-direction:row;overflow:hidden;max-width:100%;width:100vw;position:relative;}
  
  /* Add beautiful desktop glowing orbs in the background */
  .app-container::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(155, 109, 197, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -2;
  }
  .app-container::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(192, 108, 132, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: -2;
  }

  .bottom-nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 240px;
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    border-top: none;
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    padding: 32px 24px 24px;
    z-index: 100;
    background: linear-gradient(180deg, var(--surface) 0%, rgba(var(--surface-rgb, 28, 21, 37), 0.8) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding-left: 10px;
    text-decoration: none;
    transition: var(--transition);
  }
  .sidebar-brand:hover .sidebar-logo-svg {
    transform: rotate(15deg) scale(1.08);
    filter: drop-shadow(0 0 8px rgba(155, 109, 197, 0.6));
  }
  .sidebar-logo-svg {
    width: 38px;
    height: 38px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  }
  .sidebar-brand span {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--violet), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    transition: var(--transition);
  }
  .sidebar-brand:hover span {
    filter: drop-shadow(0 0 4px rgba(212, 174, 104, 0.3));
  }
  
  .nav-item{flex-direction:row;justify-content:flex-start;gap:16px;width:100%;padding:12px 16px;font-size:0.95rem;border-radius:12px;margin:4px 0;min-height:48px;align-items:center;}
  .nav-item svg{width:20px;height:20px;margin-bottom:0;flex-shrink:0;}
  .nav-item span{font-size:0.95rem;font-weight:500;}
  .nav-item:hover{background:rgba(155,109,197,0.08);color:var(--violetLight);}
  .nav-item.active{background:var(--violetPale);color:var(--violet);}
  
  .header-logo{display:none!important;}
  .header{padding:20px 40px;justify-content:space-between;align-items:center;}
  .header-view-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--violet);
    letter-spacing: 1px;
    margin-right: auto;
    padding-left: 10px;
    text-shadow: 0 0 10px rgba(155, 109, 197, 0.15);
  }
  .header-view-title::after {
    content: " ✦";
    color: var(--gold);
    margin-left: 6px;
    font-size: 0.95em;
  }
  
  .main-content{padding:40px;padding-bottom:40px;max-width:1200px;margin:0 auto;width:100%;}
  .modal-overlay{align-items:center;}
  .modal-content{border-radius:24px;max-height:80vh;}
  .grid-2{grid-template-columns:repeat(4,1fr);max-width:600px;}
  
  /* GRID SYSTEMS FOR DESKTOP LISTS */
  .shelf-books-grid, .wishlist-grid, .journal-grid, .challenges-grid, .bfs-grid, .authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
  }
  .reading-card, .journal-card, .author-card {
    margin-bottom: 0 !important;
  }
}
@media(min-width:1024px){
  .main-content{max-width:100%;width:calc(100% - 240px);max-width:1300px;}
  .stats-row{grid-template-columns:repeat(4,1fr);}
}

/* ── READMOON 3.0 NEW STYLES ──────────────────────────────────────────────── */
.spice-row{font-size:0.85rem;margin:4px 0;min-height:18px;}
.series-badge{display:inline-block;background:var(--violetPale);color:var(--violetLight);font-size:0.7rem;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle;}
.series-info{font-size:0.8rem;color:var(--violet);margin:3px 0;}
.book-review{font-size:0.82rem;color:var(--inkLight);font-style:italic;margin-top:6px;line-height:1.5;border-left:2px solid var(--violet);padding-left:8px;}
.filter-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.filter-pill{background:var(--surface);border:1px solid var(--border);color:var(--inkMid);padding:6px 14px;border-radius:20px;cursor:pointer;font-size:0.82rem;transition:var(--transition);font-family:var(--font-sans);}
.filter-pill.active,.filter-pill:hover{background:var(--violet);border-color:var(--violet);color:#fff;}
.spice-chart{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.spice-bar-wrap{display:flex;align-items:center;gap:8px;}
.spice-bar-label{min-width:80px;font-size:0.8rem;color:var(--inkLight);}
.milestone-card{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:16px 0;}
.milestone-icon{font-size:2.5rem;flex-shrink:0;}
.genre-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.genre-row{display:flex;align-items:center;gap:8px;}
.genre-name{min-width:120px;font-size:0.85rem;color:var(--inkMid);}
.genre-count{font-size:0.8rem;color:var(--inkLight);}
.shimmer{position:relative;overflow:hidden;}
.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);animation:shimmer 2s infinite;}
@keyframes shimmer{0%{left:-100%;}100%{left:100%;}}
.book-card-hover {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.book-card-hover:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 12px 30px rgba(155, 109, 197, 0.18);
  border-color: var(--violet);
}
.anticipating-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;margin-bottom:8px;}
.anticipating-card{flex-shrink:0;width:80px;text-align:center;}
.anticipating-card .book-cover.mini{width:70px;height:100px;margin:0 auto 6px;}
.anticipating-title{font-size:0.72rem;color:var(--inkLight);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wishlist-banner{background:linear-gradient(135deg,var(--violet),var(--violetLight));padding:24px;border-radius:var(--radius);color:#fff;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;}
.calendar-grid-covers{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:20px;}
.cal-cell{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px;min-height:52px;display:flex;flex-direction:column;align-items:center;font-size:0.75rem;color:var(--inkMid);position:relative;overflow:hidden;}
.cal-cell.today{border-color:var(--violet);background:var(--violetPale);}
.cal-cell.today .cal-num{color:var(--violet);font-weight:700;}
.cal-cell.has-book{border-color:var(--gold);}
.cal-cell.empty{background:transparent;border-color:transparent;}
.cal-num{font-size:0.72rem;align-self:flex-start;padding:1px 3px;font-weight:500;}
.cal-cover-wrap{width:72%;aspect-ratio:2/3;overflow:hidden;border-radius:3px;margin:2px auto 0;flex-shrink:0;}
.cal-cover-wrap img{width:100%;height:100%;object-fit:cover;}
.cal-rating{font-size:0.44rem;color:var(--gold);display:block;text-align:center;margin-top:2px;letter-spacing:0.5px;line-height:1;}
.cal-mood{position:absolute;bottom:2px;right:2px;font-size:0.65rem;}
.cal-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;margin-top:auto;}
/* Month accent colors — has-book cells */
.cal-month-0 .cal-cell.has-book{background:rgba(38,208,206,0.12);border-color:#26D0CE;}
.cal-month-1 .cal-cell.has-book{background:rgba(251,194,235,0.15);border-color:#e8a0d8;}
.cal-month-2 .cal-cell.has-book{background:rgba(132,250,176,0.13);border-color:#84fab0;}
.cal-month-3 .cal-cell.has-book{background:rgba(166,193,238,0.15);border-color:#a6c1ee;}
.cal-month-4 .cal-cell.has-book{background:rgba(255,154,118,0.13);border-color:#ff9a76;}
.cal-month-5 .cal-cell.has-book{background:rgba(253,160,133,0.15);border-color:#fda085;}
.cal-month-6 .cal-cell.has-book{background:rgba(245,87,108,0.13);border-color:#f5576c;}
.cal-month-7 .cal-cell.has-book{background:rgba(94,231,223,0.13);border-color:#5ee7df;}
.cal-month-8 .cal-cell.has-book{background:rgba(255,136,100,0.13);border-color:#ff8864;}
.cal-month-9 .cal-cell.has-book{background:rgba(180,140,100,0.15);border-color:#b48c64;}
.cal-month-10 .cal-cell.has-book{background:rgba(205,156,242,0.15);border-color:#cd9cf2;}
.cal-month-11 .cal-cell.has-book{background:rgba(100,170,220,0.15);border-color:#64aadc;}
.cal-day-header{text-align:center;font-size:0.72rem;font-weight:600;color:var(--inkLight);padding:4px 0;}
.cal-legend{margin-top:16px;}
.cal-book-entry{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.cal-day-badge{background:var(--violetPale);color:var(--violet);padding:4px 8px;border-radius:20px;font-size:0.8rem;font-weight:600;min-width:36px;text-align:center;}
.cal-entry-cover{width:36px;height:54px;border-radius:6px;overflow:hidden;flex-shrink:0;}
.cal-entry-cover img{width:100%;height:100%;object-fit:cover;}
.journal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;}
.journal-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;}
.journal-mood{font-size:1.8rem;flex-shrink:0;}
.journal-date{font-size:0.8rem;color:var(--inkLight);display:block;}
.journal-book{font-size:0.82rem;color:var(--violet);display:block;margin-top:2px;}
.journal-pages{margin-left:auto;background:var(--violetPale);color:var(--violetLight);padding:4px 10px;border-radius:20px;font-size:0.78rem;white-space:nowrap;}
.journal-entry{font-size:0.9rem;line-height:1.7;color:var(--inkMid);}
.journal-meta{font-size:0.78rem;color:var(--inkLight);margin-top:6px;}
.personality-card{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--violetPale),var(--surface));border:1px solid var(--violet);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
.author-card{display:flex;align-items:flex-start;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;}
.author-avatar{width:52px;height:52px;border-radius:50%;background:var(--violetPale);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;}
.bf-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--violetPale),var(--rose));display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;}
.crush-hearts{font-size:0.9rem;margin:6px 0;}
.cover-upload-section{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;}
.cover-upload-label{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px dashed var(--border);color:var(--inkLight);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:0.82rem;margin-top:6px;transition:var(--transition);}
.cover-upload-label:hover{border-color:var(--violet);color:var(--violet);}
.cover-upload-label input[type=file]{display:none;}
.star-rating{display:flex;justify-content:center;gap:8px;margin-bottom:16px;}
.star-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:var(--border);transition:var(--transition);}
.star-btn.active{color:var(--gold);}
.more-sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--surface);border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:20px 16px 32px;z-index:500;}
.more-sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.more-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:0.85rem;cursor:pointer;transition:var(--transition);}
.more-item span:first-child{font-size:1.8rem;}
.more-item:hover{border-color:var(--violet);background:var(--violetPale);}

/* ── PHASE C STYLES ───────────────────────────────────────────────────────── */
.bingo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
}
.bingo-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 75px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  word-break: break-word;
}
.bingo-cell:hover {
  background: var(--violetPale);
  border-color: var(--violet);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 12px rgba(155, 109, 197, 0.2);
  color: var(--violet);
}
.bingo-cell.done {
  background: linear-gradient(135deg, var(--violet), var(--violetLight));
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(155, 109, 197, 0.4);
  transform: scale(0.96);
}
.bingo-cell.free-space {
  background: linear-gradient(135deg, var(--surface) 0%, var(--violetPale) 100%);
  border: 2px dashed var(--gold);
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 0 2px rgba(212, 174, 104, 0.2);
}
.bingo-cell.free-space.done {
  background: linear-gradient(135deg, #D4AE68 0%, #B58A5F 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(212, 174, 104, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Challenges & Extras Layouts */
.challenge-card {
  display: flex;
  gap: 16px;
  align-items: center;
}
.challenge-emoji {
  font-size: 2.2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.challenge-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

@media(max-width:480px){
  .bingo-grid {
    gap: 5px;
    padding: 6px;
  }
  .bingo-cell {
    font-size: 0.58rem;
    min-height: 58px;
    border-radius: 6px;
    padding: 4px 2px;
  }
  .challenge-card {
    flex-direction: column;
    text-align: center;
    padding: 18px;
  }
  .challenge-emoji {
    font-size: 2.6rem;
    margin-bottom: 4px;
  }
  .challenge-actions {
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .challenge-actions button {
    width: 100%;
    margin: 0 !important;
  }
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}

.wrapup-export{position:fixed;top:-2000px;left:-2000px;width:1080px;height:1920px;background:#0F0B14;color:#F0EAE0;font-family:var(--font-sans);display:flex;align-items:center;justify-content:center;z-index:-1;}
.wrapup-inner{width:900px;height:1600px;background:linear-gradient(180deg,#1C1525 0%,#0F0B14 100%);border-radius:60px;padding:80px;display:flex;flex-direction:column;align-items:center;border:4px solid #2E2540;position:relative;overflow:hidden;}
.wrapup-inner::before{content:'';position:absolute;top:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(155,109,197,0.3) 0%,transparent 70%);}
.wrapup-title{font-size:5rem;color:#D4AE68;margin-bottom:60px;text-align:center;z-index:1;text-transform:uppercase;letter-spacing:4px;}
.wrapup-stats{display:flex;gap:40px;margin-bottom:80px;z-index:1;width:100%;justify-content:center;}
.w-stat{background:rgba(255,255,255,0.05);padding:30px 40px;border-radius:30px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:1.8rem;color:#C0B0A0;border:2px solid rgba(155,109,197,0.3);}
.w-stat strong{font-size:3.5rem;color:#fff;}
.w-stat span{font-size:3rem;margin-bottom:10px;}
.wrapup-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;z-index:1;}
.w-cover{width:200px;height:300px;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,0.6);border:2px solid rgba(255,255,255,0.1);}
.w-cover img{width:100%;height:100%;object-fit:cover;}
.w-cover.more{background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;color:#D4AE68;border:2px dashed #D4AE68;}
.wrapup-footer{position:absolute;bottom:60px;font-size:2rem;color:#7A6A80;font-family:var(--font-serif);letter-spacing:2px;z-index:1;}

/* --- INSTAGRAM STORY EXPORTS --- */
.story-export-wrap { position: fixed; top: -9999px; left: -9999px; width: 1080px; height: 1920px; background-color: var(--bg); z-index: -99; font-family: 'Jost', sans-serif; }
.bg-month-0 { background: linear-gradient(135deg, #1A2980, #26D0CE); color: #fff; } .bg-month-1 { background: linear-gradient(135deg, #a18cd1, #fbc2eb); color: #fff; } .bg-month-2 { background: linear-gradient(135deg, #84fab0, #8fd3f4); color: #111; } .bg-month-3 { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); color: #111; } .bg-month-4 { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: #111; } .bg-month-5 { background: linear-gradient(135deg, #f6d365, #fda085); color: #fff; } .bg-month-6 { background: linear-gradient(135deg, #f093fb, #f5576c); color: #fff; } .bg-month-7 { background: linear-gradient(135deg, #5ee7df, #b490ca); color: #fff; } .bg-month-8 { background: linear-gradient(135deg, #ff0844, #ffb199); color: #fff; } .bg-month-9 { background: linear-gradient(135deg, #434343, #000000); color: #fff; } .bg-month-10 { background: linear-gradient(135deg, #cd9cf2, #f6f3ff); color: #111; } .bg-month-11 { background: linear-gradient(135deg, #243949, #517fa4); color: #fff; }
.bg-design-pastel-dreams { background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%); color: #1e1b4b; }
.bg-design-pastel-dreams .wu-check { color: #5b21b6; }
.bg-design-pastel-dreams .wu-book-meta { color: #5b21b6; }
.bg-design-pastel-dreams .wu-list-item { border-bottom-color: rgba(30, 27, 75, 0.15); }

.bg-design-midnight-moon { background: linear-gradient(135deg, #0f0c20 0%, #15102a 50%, #06040a 100%); color: #f3f4f6; }
.bg-design-midnight-moon .wu-check { color: #c084fc; }
.bg-design-midnight-moon .wu-book-meta { color: #c084fc; }
.bg-design-midnight-moon .wu-list-item { border-bottom-color: rgba(243, 244, 246, 0.15); }

.bg-design-sage-garden { background: linear-gradient(135deg, #cad2c5 0%, #84a98c 50%, #52b788 100%); color: #1b4332; }
.bg-design-sage-garden .wu-check { color: #2d6a4f; }
.bg-design-sage-garden .wu-book-meta { color: #2d6a4f; }
.bg-design-sage-garden .wu-list-item { border-bottom-color: rgba(27, 67, 50, 0.15); }

.bg-design-cozy-coffee { background: linear-gradient(135deg, #efe5dc 0%, #d3b8ae 50%, #8d6e63 100%); color: #3e2723; }
.bg-design-cozy-coffee .wu-check { color: #5d4037; }
.bg-design-cozy-coffee .wu-book-meta { color: #5d4037; }
.bg-design-cozy-coffee .wu-list-item { border-bottom-color: rgba(62, 39, 35, 0.15); }

.bg-design-rose-gold { background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 50%, #e8c5c8 100%); color: #4a0e17; }
.bg-design-rose-gold .wu-check { color: #b8506c; }
.bg-design-rose-gold .wu-book-meta { color: #b8506c; }
.bg-design-rose-gold .wu-list-item { border-bottom-color: rgba(74, 14, 23, 0.15); }
.wu-header { text-align: center; padding: 120px 40px 60px; } .wu-title { font-family: 'Cormorant Garamond', serif; font-size: 7rem; line-height: 1.1; font-weight: 700; margin-bottom: 20px; } .wu-subtitle { font-size: 2.5rem; font-weight: 500; opacity: 0.9; letter-spacing: 4px; text-transform: uppercase; } .wu-grid { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 40px; padding: 40px; height: calc(1920px - 500px); } .wu-book { display: flex; flex-direction: column; align-items: center; } .wu-cover { border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,0.3); object-fit: cover; margin-bottom: 15px; } .wu-rating { font-size: 1.8rem; text-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.wu-story-wrap { display: flex; flex-direction: column; position: relative; }
.wu-list { display: flex; flex-direction: column; padding: 20px 90px 20px 80px; flex: 1; justify-content: center; }
.wu-list-item { display: flex; align-items: flex-start; gap: 36px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.wu-list-item:last-child { border-bottom: none; }
.wu-check { flex-shrink: 0; color: #D4AE68; font-weight: 700; line-height: 1.3; }
.wu-book-info { flex: 1; min-width: 0; }
.wu-book-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; line-height: 1.2; margin-bottom: 8px; word-break: break-word; }
.wu-book-author { opacity: 0.72; margin-bottom: 10px; }
.wu-book-meta { opacity: 0.9; letter-spacing: 1px; color: #D4AE68; }
.wu-stats-bar { text-align: center; font-size: 2rem; padding: 28px 80px 20px; opacity: 0.82; border-top: 1px solid rgba(255,255,255,0.22); }
.cal-export { padding: 120px 60px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; position: relative; } .cal-export-title { font-family: 'Cormorant Garamond', serif; font-size: 6rem; text-align: center; margin-bottom: 80px; } .cal-export-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; flex: 1; } .cal-export-day-header { text-align: center; font-size: 2.2rem; font-weight: 600; opacity: 0.8; margin-bottom: 20px; } .cal-export-cell { background: rgba(255,255,255,0.1); border-radius: 16px; border: 2px solid rgba(255,255,255,0.2); display: flex; flex-direction: column; padding: 10px; position: relative; overflow: hidden; box-sizing: border-box; } .cal-export-cell.empty { background: transparent; border: none; } .cal-export-num { font-size: 1.6rem; font-weight: 600; opacity: 0.8; margin-bottom: 10px; } .cal-export-cover-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } 
.cal-export-cover { width: 100px; height: 150px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.35); } 
.cal-export-mood { position: absolute; bottom: 10px; right: 10px; font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .cal-export-logo { text-align: center; font-size: 2.2rem; font-family: 'Jost', sans-serif; letter-spacing: 6px; opacity: 0.7; margin-top: 40px; }

/* Custom Fallback for Books Missing Covers */
.cal-export-fallback {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px dashed rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  color: inherit;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.cal-export-fallback .fallback-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.2;
  word-break: break-word;
  max-height: 75px;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* Background Overlay Decorations */
.wu-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.decor-item {
  position: absolute;
  opacity: 0.12;
  transform: rotate(-15deg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.bg-design-midnight-moon .decor-item {
  opacity: 0.07;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));
}
.bg-design-sage-garden .decor-item {
  opacity: 0.1;
}
.bg-design-cozy-coffee .decor-item {
  opacity: 0.08;
}
.bg-design-rose-gold .decor-item {
  opacity: 0.14;
}

/* Ensure foreground elements sit on top of background overlays */
.wu-header, .wu-grid, .wu-list, .wu-stats-bar, .cal-export-logo, .cal-export-title, .cal-export-grid {
  position: relative !important;
  z-index: 2 !important;
}

/* ── TRENDING GENRE THEMES ── */
[data-theme="fantasy"] {
  --bg: #0F0A1C; --surface: #1A122B; --border: #32234D;
  --ink: #F3E8FF; --inkMid: #C084FC; --inkLight: #818CF8;
  --violet: #8B5CF6; --violetLight: #A78BFA; --violetPale: #2E1065;
  --gold: #F59E0B; --goldLight: #FCD34D; --rose: #EC4899;
  --green: #10B981; --greenPale: #064E3B;
  --shadow: 0 8px 32px rgba(139, 92, 246, 0.2);
  --surface-rgb: 26, 18, 43;
}
[data-theme="thriller"] {
  --bg: #0A0A0F; --surface: #14141E; --border: #2A2A3C;
  --ink: #F1F5F9; --inkMid: #94A3B8; --inkLight: #64748B;
  --violet: #E11D48; --violetLight: #F43F5E; --violetPale: #4C0519;
  --gold: #06B6D4; --goldLight: #67E8F9; --rose: #F43F5E;
  --green: #10B981; --greenPale: #022C22;
  --shadow: 0 8px 32px rgba(225, 29, 72, 0.2);
  --surface-rgb: 20, 20, 30;
}
[data-theme="dark-romance"] {
  --bg: #120A10; --surface: #1F101A; --border: #3B1B30;
  --ink: #FDF2F8; --inkMid: #F472B6; --inkLight: #9D174D;
  --violet: #991B1B; --violetLight: #DC2626; --violetPale: #450A0A;
  --gold: #FB7185; --goldLight: #FECDD3; --rose: #F43F5E;
  --green: #059669; --greenPale: #064E3B;
  --shadow: 0 8px 32px rgba(153, 27, 27, 0.25);
  --surface-rgb: 31, 16, 26;
}
[data-theme="romance"], [data-theme="light"] {
  --bg: #FAF5F7; --surface: #FFFFFF; --border: #F3E2E9;
  --ink: #2D1A24; --inkMid: #70485E; --inkLight: #A88297;
  --violet: #E11D48; --violetLight: #FB7185; --violetPale: #FFF1F2;
  --gold: #D97706; --goldLight: #FBBF24; --rose: #F43F5E;
  --green: #059669; --greenPale: #E6F4EA;
  --shadow: 0 10px 30px rgba(225, 29, 72, 0.08);
  --surface-rgb: 255, 255, 255;
}
[data-theme="celestial"], [data-theme="midnight-moon"], [data-theme="dark"] {
  --bg: #0F0B14; --surface: #1C1525; --border: #2D213B;
  --ink: #F5EEFC; --inkMid: #CBB4EA; --inkLight: #8C75B5;
  --violet: #9B6DC5; --violetLight: #B68FE0; --violetPale: #281A38;
  --gold: #D4AE68; --goldLight: #E6C88B; --rose: #E07A9A;
  --green: #6DBE91; --greenPale: #1A3626;
  --shadow: 0 8px 32px rgba(155, 109, 197, 0.2);
  --surface-rgb: 28, 21, 37;
}

/* ── VISUAL BOOKSHELF ── */
.real-wood-shelf-row {
  position: relative;
  margin-bottom: 48px;
  background: radial-gradient(ellipse at 50% -20%, rgba(212, 174, 104, 0.15), transparent 70%),
              linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%);
  padding: 30px 24px 0 24px;
  border-radius: 12px 12px 0 0;
}

.real-wood-plank {
  height: 24px;
  background: linear-gradient(180deg, #b08253 0%, #7e532b 30%, #523113 70%, #341e08 100%);
  border-top: 4px solid #d9a56c;
  border-radius: 2px 2px 8px 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.3);
  position: relative;
  z-index: 5;
  margin-top: -6px;
}

.real-wood-plank::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  pointer-events: none;
}

.shelf-real-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  align-items: flex-end;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.shelf-real-grid::-webkit-scrollbar { display: none; }

.book-spine {
  height: 180px;
  border-radius: 4px 4px 0 0;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
  box-shadow: inset -4px 0 8px rgba(0,0,0,0.4), inset 4px 0 8px rgba(255,255,255,0.2), 2px 0 5px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: bottom center;
  flex-shrink: 0;
  border-right: 1px solid rgba(0,0,0,0.15);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-top: 3.5px solid rgba(255,255,255,0.2);
}
.book-spine::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.book-spine::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.book-spine:hover {
  transform: translateY(-12px) scaleX(1.03) rotate(-1deg);
  box-shadow: inset -4px 0 8px rgba(0,0,0,0.3), inset 4px 0 8px rgba(255,255,255,0.35), 0 12px 24px rgba(0,0,0,0.4);
  z-index: 10;
}
.book-spine-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.72rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(100% - 48px);
  user-select: none;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0 2px;
  box-sizing: border-box;
}

/* Genre-specific spine enhancements */
.book-spine.genre-romantasy, .book-spine.genre-fantasy, .book-spine.genre-fantasia, .book-spine.genre-fantasia {
  border-top: 3.5px solid #d4ae68;
}
.book-spine.genre-romantasy .book-spine-text, .book-spine.genre-fantasy .book-spine-text, .book-spine.genre-fantasia .book-spine-text, .book-spine.genre-fantasia .book-spine-text {
  text-shadow: 0 0 4px #d4ae68, 1px 1px 2px rgba(0,0,0,0.9);
}
.book-spine.genre-dark-romance, .book-spine.genre-romance-oscuro {
  border-top: 3.5px solid #6b7280;
  box-shadow: inset -4px 0 10px rgba(0,0,0,0.6), inset 4px 0 6px rgba(255,255,255,0.05), 2px 0 6px rgba(0,0,0,0.4);
}
.book-spine.genre-dark-romance .book-spine-text, .book-spine.genre-romance-oscuro .book-spine-text {
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.95);
}
.book-spine.genre-romance, .book-spine.genre-contemporary, .book-spine.genre-contemporaneo, .book-spine.genre-contemporaneo {
  border-top: 3.5px solid #ec4899;
}
.book-spine.genre-romance .book-spine-text, .book-spine.genre-contemporary .book-spine-text, .book-spine.genre-contemporaneo .book-spine-text, .book-spine.genre-contemporaneo .book-spine-text {
  text-shadow: 1px 1px 3px #be185d, 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.book-spine.genre-thriller, .book-spine.genre-mystery, .book-spine.genre-horror, .book-spine.genre-misterio, .book-spine.genre-terror {
  border-top: 3.5px solid #065f46;
}
.book-spine.genre-thriller .book-spine-text, .book-spine.genre-mystery .book-spine-text, .book-spine.genre-horror .book-spine-text, .book-spine.genre-misterio .book-spine-text, .book-spine.genre-terror .book-spine-text {
  text-shadow: 1px 1px 3px #047857, 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.book-spine.tbr-spine {
  /* Keep spine full color to display beautiful genre themes! */
  opacity: 1;
}

/* ── MULTI-DIMENSIONAL RATING ── */
.star-btn-sm {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--border);
  transition: var(--transition);
  padding: 2px;
}
.star-btn-sm.active {
  color: var(--gold);
}

/* ── PRINT STYLESHEET ── */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .bottom-nav, .header, .demo-banner, .timer-fab, .btn-primary, .btn-secondary, .btn-danger, .icon-btn, .filter-pills, input, select, textarea, .more-sheet, .modal-overlay, #current-modal {
    display: none !important;
  }
  .app-container {
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
  }
  .main-content {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }
  .view.active {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .card-select, .reading-card, .stat-card, .milestone-card, .settings-section, .author-card, .journal-card {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    color: #000000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .calendar-grid-covers {
    gap: 8px !important;
  }
  .cal-cell {
    background: #ffffff !important;
    border: 1px solid #999999 !important;
    color: #000000 !important;
    min-height: 85px !important;
    page-break-inside: avoid;
  }
  .cal-cell.today {
    border-color: #000000 !important;
    font-weight: 700 !important;
  }
  .cal-cell.has-book {
    border-color: #000000 !important;
    background: #f0f0f0 !important;
  }
  .cal-legend {
    page-break-before: always;
  }
  .cal-book-entry {
    border-bottom: 1px solid #cccccc !important;
    color: #000000 !important;
  }
  .chart-container {
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    background: #ffffff !important;
    height: 320px !important;
    page-break-inside: avoid;
  }
}

/* --- INSTAGRAM 4:5 SOCIAL CARD EXPORTS --- */
.social-share-wrap {
  width: 1080px;
  height: 1350px;
  background-color: #0F0B14;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

.social-share-glow {
  position: absolute;
  top: -150px;
  left: -150px;
  width: 1380px;
  height: 1380px;
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}

.social-share-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-image: 
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), 
    radial-gradient(white, rgba(255,255,255,.15) 1.5px, transparent 30px), 
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px);
  background-size: 550px 550px, 350px 350px, 250px 250px;
  background-position: 0 0, 40px 60px, 130px 270px;
  opacity: 0.12;
}

.social-share-container {
  position: relative;
  z-index: 2;
  width: 960px;
  height: 1210px;
  background: rgba(15, 11, 20, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 40px;
  padding: 45px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  backdrop-filter: blur(25px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

.social-share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 22px;
}

.social-share-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: #9B6DC5;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.social-share-badge {
  background: linear-gradient(135deg, #9B6DC5, #D4AE68);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 20px;
  letter-spacing: 1.5px;
}

.social-share-main {
  display: flex;
  gap: 50px;
  margin-top: 35px;
  flex: 1;
  align-items: flex-start;
}

.social-share-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 300px;
  flex-shrink: 0;
}

.social-share-cover-wrap {
  width: 280px;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(155, 109, 197, 0.15);
  border: 3px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-share-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-share-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}

.social-share-cover-fallback .fallback-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  word-break: break-word;
}

.social-share-cover-fallback .fallback-author {
  font-size: 1.2rem;
  opacity: 0.8;
  font-family: 'Jost', sans-serif;
}

.social-share-overall-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.social-share-stars-row {
  font-size: 2.8rem;
  color: #D4AE68;
  letter-spacing: 4px;
}

.social-share-rating-label {
  font-size: 1.15rem;
  color: var(--inkLight, #a89f9d);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.social-share-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.social-share-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-share-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin: 0;
  word-break: break-word;
}

.social-share-author {
  font-family: 'Jost', sans-serif;
  font-size: 1.9rem;
  color: #a89f9d;
  margin: 0;
  font-weight: 400;
}

.social-share-series {
  font-size: 1.4rem;
  color: #9B6DC5;
  font-weight: 500;
  font-style: italic;
  margin-top: 2px;
}

.social-share-genre-badge {
  align-self: flex-start;
  background: rgba(192, 108, 132, 0.15);
  color: #C06C84;
  font-size: 1.0rem;
  padding: 8px 18px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 8px;
}

.social-share-ratings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 22px;
  border-radius: 20px;
}

.social-share-grid-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grid-icon {
  font-size: 2.2rem;
}

.grid-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.grid-label {
  font-size: 0.92rem;
  color: #a89f9d;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.grid-stars {
  font-size: 1.4rem;
  color: #D4AE68;
  letter-spacing: 2px;
  line-height: 1;
}

.social-share-bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 15px;
}

.social-share-review-box {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 24px 40px;
  box-sizing: border-box;
  min-height: 100px;
  max-height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-mark-open {
  position: absolute;
  top: 8px;
  left: 14px;
  font-size: 3.5rem;
  font-family: 'Cormorant Garamond', serif;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
}

.quote-mark-close {
  position: absolute;
  bottom: -15px;
  right: 14px;
  font-size: 3.5rem;
  font-family: 'Cormorant Garamond', serif;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
}

.social-share-review-text {
  font-size: 1.45rem;
  line-height: 1.6;
  font-style: italic;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Cormorant Garamond', serif;
  color: #EFE5DC;
}

.social-share-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1.5px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  margin-top: 5px;
}

.social-share-hashtags {
  font-size: 1.15rem;
  color: #9B6DC5;
  font-weight: 500;
  font-family: 'Jost', sans-serif;
  letter-spacing: 0.5px;
}

.social-share-watermark {
  font-size: 1.0rem;
  color: #a89f9d;
  opacity: 0.5;
  letter-spacing: 0.5px;
}

/* ── ADDITIONAL COMPONENT STYLES ── */

.header-view-title {
  display: none;
}

.floating-lang-wrap {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px;
  z-index: 1005;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.lang-btn {
  background: transparent;
  border: none;
  color: var(--inkLight);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: var(--transition);
}
.lang-btn.active {
  background: linear-gradient(135deg, var(--violet), var(--violetLight));
  color: #fff;
  box-shadow: 0 2px 8px rgba(155, 109, 197, 0.3);
}
.lang-btn:hover:not(.active) {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}

/* ── NETFLIX / TV SHOWS STYLES ── */
.tv-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
  background-size: cover;
  background-position: center;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
}
.tv-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(15, 11, 20, 0.75) 50%, rgba(0,0,0,0.3) 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
.tv-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(229, 9, 20, 0.85);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tv-hero-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.tv-hero-subtitle {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}
.tv-progress-container {
  width: 100%;
  background: rgba(255,255,255,0.15);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0;
}
.tv-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #E50914, #FF5252);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.tv-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.tv-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4), 0 0 15px rgba(229, 9, 20, 0.2);
  border-color: rgba(229, 9, 20, 0.5);
}
.tv-poster-wrap {
  position: relative;
  aspect-ratio: 2/3;
  width: 100%;
  overflow: hidden;
}
.tv-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv-platform-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid rgba(255,255,255,0.15);
}
.tv-card-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.tv-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-card-meta {
  font-size: 0.7rem;
  color: var(--inkLight);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tv-poster-wrap img{width:100%;height:100%;object-fit:cover;}
.tv-row-title{font-size:1rem;font-weight:700;margin:20px 0 10px 0;font-family:'Cormorant Garamond',serif;}
.tv-filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.tv-filter-pill{padding:8px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--inkMid);font-size:0.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all 0.2s ease;}
.tv-filter-pill.active{background:linear-gradient(135deg,#E50914,#FF5252);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(229,9,20,0.3);}

/* ── READER GAMES STYLES ── */
.games-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.game-tab {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--inkMid);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.game-tab.active {
  background: linear-gradient(135deg, var(--violet), var(--gold));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(155, 109, 197, 0.3);
}
.habit-pixel{aspect-ratio:1;border-radius:4px;background:var(--surface);border:1px solid var(--border);transition:transform 0.15s ease;}
.habit-pixel.intensity-1{background:rgba(155,109,197,0.35);border-color:rgba(155,109,197,0.5);}
.habit-pixel.intensity-2{background:rgba(155,109,197,0.65);border-color:rgba(155,109,197,0.8);}
.habit-pixel.intensity-3{background:var(--violet);border-color:var(--gold);}
.habit-pixel.today{border:2px solid var(--gold);cursor:pointer;}
.habit-pixel.today:hover{transform:scale(1.15);}
.ws-cell{aspect-ratio:1;background:var(--surface);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s ease;}
.ws-cell:hover{border-color:var(--violet);}
.ws-cell.selected{background:var(--violet);color:#fff;border-color:var(--violet);}
.ws-cell.found{background:linear-gradient(135deg,rgba(155,109,197,0.25),rgba(212,174,104,0.25));border-color:var(--gold);color:var(--gold);}
.wordle-grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  max-width: 300px;
  margin: 16px auto;
}
.wordle-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.wordle-tile {
  aspect-ratio: 1;
  border: 2px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--ink);
  transition: all 0.3s ease;
}
.wordle-tile.correct { background: #10B981; border-color: #10B981; color: #fff; }
.wordle-tile.present { background: #F59E0B; border-color: #F59E0B; color: #fff; }
.wordle-tile.absent { background: #374151; border-color: #374151; color: #9CA3AF; }

/* ── BOOKSTAGRAM SHARE CARDS ── */
.share-card-offscreen {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: -999;
}
.social-share-wrap.fmt-square {
  width: 1080px;
  height: 1080px;
}
.social-share-wrap.fmt-square .social-share-container {
  height: 990px;
  padding: 38px 48px;
}
.social-share-wrap.fmt-square .social-share-cover-wrap {
  width: 230px;
  height: 340px;
}
.social-share-wrap.fmt-square .social-share-main {
  gap: 38px;
  margin-top: 22px;
}
.social-share-wrap.fmt-square .social-share-bottom {
  gap: 16px;
  margin-top: 6px;
}
.social-share-wrap.fmt-square .social-share-review-box {
  max-height: 110px;
  padding: 16px 30px;
}
.social-share-wrap.fmt-square .social-share-title {
  font-size: 3.4rem;
}
.social-share-wrap.fmt-story {
  width: 1080px;
  height: 1920px;
}
.social-share-wrap.fmt-story .social-share-container {
  height: 1830px;
  padding: 55px 55px;
}
.social-share-wrap.fmt-story .social-share-main {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 36px;
  margin-top: 50px;
}
.social-share-wrap.fmt-story .social-share-left {
  width: 100%;
}
.social-share-wrap.fmt-story .social-share-cover-wrap {
  width: 440px;
  height: 640px;
  margin: 0 auto;
}
.social-share-wrap.fmt-story .social-share-right {
  align-items: center;
  text-align: center;
  width: 100%;
}
.social-share-wrap.fmt-story .social-share-meta {
  align-items: center;
}
.social-share-wrap.fmt-story .social-share-genre-badge {
  align-self: center;
}
.social-share-wrap.fmt-story .social-share-title {
  font-size: 5.2rem;
  text-align: center;
}
.social-share-wrap.fmt-story .social-share-ratings-grid {
  max-width: 640px;
  margin: 0 auto;
}

/* ── HYPER-AESTHETIC AMBIENT STARDUST & GLOWING ORBS ── */
.ambient-stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.28;
  animation: floatOrb 25s ease-in-out infinite alternate;
}

.ambient-orb.orb-1 {
  top: -10%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, var(--violet) 0%, rgba(155,109,197,0) 70%);
  animation-duration: 22s;
}

.ambient-orb.orb-2 {
  bottom: -10%;
  left: -15%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, var(--gold) 0%, rgba(212,174,104,0) 70%);
  animation-duration: 28s;
  animation-delay: -5s;
}

.ambient-orb.orb-3 {
  top: 35%;
  right: 10%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, var(--rose) 0%, rgba(224,138,160,0) 70%);
  animation-duration: 26s;
  animation-delay: -10s;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-35px, 45px) scale(1.1); }
  100% { transform: translate(45px, -25px) scale(0.95); }
}

.stardust-particles {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 15%, var(--gold) 100%, transparent),
    radial-gradient(2px 2px at 35% 65%, #ffffff 100%, transparent),
    radial-gradient(1.5px 1.5px at 75% 25%, var(--violetLight) 100%, transparent),
    radial-gradient(2px 2px at 85% 75%, var(--goldLight) 100%, transparent),
    radial-gradient(1px 1px at 50% 45%, #ffffff 100%, transparent),
    radial-gradient(2.5px 2.5px at 60% 85%, var(--rose) 100%, transparent),
    radial-gradient(1.5px 1.5px at 25% 80%, var(--gold) 100%, transparent),
    radial-gradient(2px 2px at 90% 10%, #ffffff 100%, transparent),
    radial-gradient(1px 1px at 10% 90%, var(--violetLight) 100%, transparent);
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: 0.6;
  animation: stardustTwinkle 6s ease-in-out infinite alternate, stardustDrift 80s linear infinite;
}

@keyframes stardustTwinkle {
  0% { opacity: 0.4; transform: scale(0.98); }
  50% { opacity: 0.75; transform: scale(1.02); }
  100% { opacity: 0.5; transform: scale(1); }
}

@keyframes stardustDrift {
  from { background-position: 0 0; }
  to { background-position: 600px 1200px; }
}

[data-theme="romance"] .ambient-orb {
  opacity: 0.14;
}
[data-theme="romance"] .stardust-particles {
  opacity: 0.35;
}