/* ============================================================
   ChapterTune v4 — Design System (Multi-Page)
   ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');

@font-face { font-family:'Chillax'; src:url('../assets/fonts/Chillax-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Chillax'; src:url('../assets/fonts/Chillax-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Chillax'; src:url('../assets/fonts/Chillax-Semibold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Chillax'; src:url('../assets/fonts/Chillax-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Scalter'; src:url('../assets/fonts/Scalter-SerifCondensed.otf') format('opentype'); font-display:swap; }

:root {
  --bg:#E3E7D3; --text:#0C2B1C; --accent:#d62828; --highlight:#ffb703; --highlight2:#fb8500;
  --card-bg:rgba(12,43,28,0.03); --border:rgba(12,43,28,0.1); --border-hover:rgba(12,43,28,0.25);
  --font-body:'Satoshi',sans-serif; --font-heading:'Chillax',sans-serif; --font-display:'Scalter',serif;
  --radius:1.25rem; --transition:cubic-bezier(0.25,1,0.5,1);
  --pad:clamp(1.5rem,4vw,5rem);
}

@keyframes pageIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--text); background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; animation:pageIn 0.5s ease both; }
/* Custom Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--border); }
*::-webkit-scrollbar-thumb { background: rgba(12, 43, 28, 0.25); border-radius: 4px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: rgba(12, 43, 28, 0.45); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); }

.content-wrap { max-width:1100px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.mesh-bg { position:fixed; inset:0; z-index:-2; background:var(--bg); }
.static-grain { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.12; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.reveal { opacity:0; transform:translateY(35px); transition:opacity 0.9s var(--transition),transform 0.9s var(--transition); }
.reveal.active { opacity:1; transform:translateY(0); }
.delay-100 { transition-delay:100ms; } .delay-200 { transition-delay:200ms; }

.scalter-accent { font-family:var(--font-display); color:var(--highlight); -webkit-text-stroke:1.5px #111; text-transform:uppercase; letter-spacing:0.04em;
  text-shadow:1px 1px 0 var(--highlight2),2px 2px 0 var(--highlight2),3px 3px 0 var(--highlight2),4px 4px 0 #111,5px 5px 0 #111; padding:0 2px; }

/* ============ SHARED NAV ============ */
.site-nav { display:flex; align-items:center; justify-content:space-between; padding:2.5rem var(--pad); position:relative; z-index:10; }
.site-nav .logo-link { text-decoration:none; color:var(--text); display:flex; align-items:center; gap:0.6rem; }
.site-nav .brand-logo { flex-shrink:0; }
.site-nav .logo-text { font-family:var(--font-heading); font-size:1.65rem; font-weight:700; letter-spacing:-0.03em; }
.site-nav .nav-links { display:flex; align-items:center; gap:0.25rem; }
.site-nav .nav-link { display:inline-flex; align-items:center; gap:0.35rem; padding:0.45rem 0.85rem; border-radius:8px; text-decoration:none; color:var(--text); font-family:var(--font-body); font-size:0.78rem; font-weight:500; letter-spacing:0.02em; transition:background 0.3s ease, opacity 0.3s ease, transform 0.2s ease; opacity:0.55; }
.site-nav .nav-link svg { width:16px; height:16px; flex-shrink:0; }
.site-nav .nav-link:hover { opacity:0.85; background:rgba(12,43,28,0.05); transform:translateY(-1px); }
.site-nav .nav-link.active { opacity:1; background:var(--text); color:var(--bg); font-weight:600; box-shadow:0 2px 8px rgba(12,43,28,0.15); }

/* ============ BUTTONS ============ */
.btn-primary { padding:0.5rem 1.35rem; border-radius:8px; border:none; background:var(--text); color:var(--bg); font-family:var(--font-body); font-size:0.85rem; font-weight:600; cursor:pointer; transition:transform 0.3s ease,box-shadow 0.3s ease; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(12,43,28,0.2); }
.btn-text { color:var(--text); font-weight:500; font-size:0.85rem; text-decoration:underline; text-underline-offset:4px; transition:opacity 0.3s ease; }
.btn-text:hover { opacity:0.65; }
.btn-pill { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 1rem; border-radius:8px; border:1px solid var(--text); background:transparent; color:var(--text); font-family:var(--font-body); font-size:0.8rem; font-weight:500; cursor:pointer; position:relative; overflow:hidden; z-index:1; transition:color 0.4s ease; }
.btn-pill::before { content:''; position:absolute; inset:0; background:var(--text); transform:scaleX(0); transform-origin:right; transition:transform 0.5s cubic-bezier(0.86,0,0.07,1); z-index:-1; }
.btn-pill:hover { color:var(--bg); } .btn-pill:hover::before { transform:scaleX(1); transform-origin:left; }
.btn-icon-sm { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.3s ease; }
.btn-icon-sm:hover { background:var(--card-bg); }

/* ============ PAGE CONTENT ============ */
.page-main { padding:0 0 5rem; }
.page-header { margin-bottom:2rem; }
.page-title { font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-0.02em; margin-bottom:0.4rem; }
.page-desc { font-size:0.9rem; opacity:0.6; }

/* ============ HERO (Landing) ============ */
.hero { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 6rem); padding:0 var(--pad) 4rem; }
.hero-content { max-width:52rem; text-align:center; }
.hero-title { font-family:var(--font-heading); font-size:clamp(2.5rem,7vw,5.5rem); line-height:1.1; letter-spacing:-0.02em; margin-bottom:1.5rem; }
.hero-desc { font-size:1.05rem; line-height:1.7; opacity:0.8; max-width:34rem; margin:0 auto 2.5rem; }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; }

/* ============ LOGIN ============ */
.login-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(12,43,28,0.4); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:2rem; }
.login-overlay.active { display:flex; }
.login-card { width:100%; max-width:400px; padding:3rem 2.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); box-shadow:0 30px 80px rgba(0,0,0,0.15); }
.login-brand { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem; }
.login-title { font-size:1.8rem; font-weight:700; letter-spacing:-0.03em; }
.login-subtitle { font-size:0.9rem; opacity:0.5; margin-bottom:2rem; }
.login-form { display:flex; flex-direction:column; gap:1rem; }
.input-group { display:flex; flex-direction:column; gap:0.3rem; }
.input-group label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; opacity:0.5; }
.input-group input { padding:0.7rem 1rem; border:1px solid var(--border); border-radius:0.625rem; background:transparent; font-family:var(--font-body); font-size:0.9rem; color:var(--text); outline:none; transition:border-color 0.3s ease; }
.input-group input:focus { border-color:var(--text); }
.login-btn { width:100%; margin-top:0.5rem; }
.login-hint { font-size:0.7rem; text-align:center; opacity:0.35; margin-top:0.25rem; }
.login-divider { text-align:center; margin:1.5rem 0; position:relative; }
.login-divider::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border); }
.login-divider span { background:var(--bg); padding:0 1rem; position:relative; font-size:0.75rem; opacity:0.5; }
.login-socials { display:flex; gap:0.75rem; }
.login-social-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.6rem; border:1px solid var(--border); border-radius:0.625rem; background:transparent; font-family:var(--font-body); font-size:0.8rem; font-weight:500; color:var(--text); cursor:pointer; transition:background 0.3s ease; }
.login-social-btn:hover { background:var(--card-bg); }

/* ============ CATEGORIES ============ */
.section-title { font-size:clamp(2rem,4.5vw,3.5rem); text-align:center; letter-spacing:-0.02em; margin-bottom:3rem; }
.categories-section { padding:4rem 0 5rem; }
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.cat-card { padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); cursor:pointer; text-align:center; transition:border-color 0.4s ease,box-shadow 0.4s ease,transform 0.4s ease; }
.cat-card:hover { border-color:var(--border-hover); box-shadow:0 12px 30px rgba(12,43,28,0.08); transform:translateY(-4px); }
.cat-icon { font-size:2rem; margin-bottom:0.5rem; display:block; }
.cat-name { font-family:var(--font-heading); font-size:0.9rem; font-weight:600; }

/* ============ FEATURES ============ */
.features-section { padding:4rem 0 5rem; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.feature-card { padding:2rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); transition:border-color 0.4s ease,box-shadow 0.4s ease,transform 0.4s ease; }
.feature-card:hover { border-color:var(--border-hover); box-shadow:0 16px 40px rgba(12,43,28,0.08); transform:translateY(-4px); }
.feature-icon { width:48px; height:48px; margin-bottom:1rem; }
.feature-card h3 { font-size:1.1rem; margin-bottom:0.5rem; letter-spacing:-0.01em; }
.feature-card p { font-size:0.85rem; line-height:1.65; opacity:0.7; }

.landing-footer { border-top:1px solid var(--border); padding:2rem 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-logo { font-family:var(--font-heading); font-size:1.2rem; font-weight:700; letter-spacing:-0.02em; }
.footer-copy { font-size:0.8rem; opacity:0.6; }

/* ============ LIBRARY ============ */
.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
.book-card { border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); overflow:hidden; cursor:pointer; transition:border-color 0.4s ease,box-shadow 0.4s ease,transform 0.4s var(--transition); }
.book-card:hover { border-color:var(--border-hover); box-shadow:0 20px 50px rgba(12,43,28,0.1); transform:translateY(-6px); }
.book-card-cover { height:160px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.book-card-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,var(--bg) 100%); }
.book-card-body { padding:1.25rem 1.5rem 1.5rem; }
.book-card-body h3 { font-size:1rem; margin-bottom:0.3rem; letter-spacing:-0.01em; }
.book-card-body p { font-size:0.8rem; opacity:0.55; }
.book-meta { display:flex; align-items:center; gap:0.5rem; margin-top:0.6rem; flex-wrap:wrap; }
.book-meta span { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; padding:0.15rem 0.5rem; border-radius:50px; border:1px solid var(--border); }
.book-cover-icon { width:48px; height:48px; color:rgba(12,43,28,0.3); position:relative; z-index:2; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }

/* Search */
.search-box { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1.25rem; border-radius:50px; border:1px solid var(--border); background:var(--card-bg); transition:border-color 0.3s ease; }
.search-box:focus-within { border-color:var(--text); }
.search-box input { border:none; background:transparent; font-family:var(--font-body); font-size:0.9rem; color:var(--text); outline:none; flex:1; }
.search-box input::placeholder { color:var(--text); opacity:0.35; }

/* Upload Card */
.upload-card { margin-top:1.5rem; }
.upload-card-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem; padding:3rem 2rem; border-radius:var(--radius); border:2px dashed var(--border); background:rgba(12,43,28,0.015); cursor:pointer; transition:border-color 0.3s ease,background 0.3s ease; text-align:center; }
.upload-card-inner:hover { border-color:var(--text); background:rgba(12,43,28,0.03); }
.upload-card-inner svg { opacity:0.3; }
.upload-card-inner h3 { font-size:1rem; }
.upload-card-inner p { font-size:0.8rem; opacity:0.4; }

.panel-section-title { font-size:0.85rem; font-weight:600; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }

/* ============ DASHBOARD ============ */
.dash-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); transition:border-color 0.3s ease,transform 0.3s ease; }
.stat-card:hover { border-color:var(--border-hover); transform:translateY(-2px); }
.stat-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon-streak { background:rgba(251,133,0,0.12); color:#fb8500; }
.stat-icon-books { background:rgba(124,168,124,0.15); color:#5a8a5a; }
.stat-icon-time { background:rgba(214,40,40,0.1); color:#d62828; }
.stat-icon-wpm { background:rgba(255,183,3,0.15); color:#c69200; }
.stat-number { font-family:var(--font-heading); font-size:1.6rem; font-weight:700; display:block; line-height:1; }
.stat-label { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; opacity:0.5; }

.dash-records { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.record-card { display:flex; align-items:center; gap:0.75rem; padding:1rem 1.25rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); }
.record-icon { font-size:1.4rem; }
.record-card strong { font-size:0.8rem; display:block; margin-bottom:0.1rem; }
.record-card span { font-size:0.75rem; opacity:0.5; }

.dash-charts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.chart-card { padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); }
.chart-title { font-size:0.85rem; font-weight:600; margin-bottom:1rem; }
.mood-chart { display:flex; align-items:center; gap:1.5rem; }
.donut-chart { width:100px; height:100px; flex-shrink:0; }
.donut-svg { width:100%; height:100%; transform:rotate(-90deg); }
.mood-legend { display:flex; flex-direction:column; gap:0.4rem; }
.legend-item { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:500; }
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.legend-pct { opacity:0.5; margin-left:auto; font-size:0.7rem; }
.wpm-chart { width:100%; }
.line-chart-svg { width:100%; height:120px; }
.chart-x-labels { display:flex; justify-content:space-between; font-size:0.6rem; opacity:0.4; font-weight:500; margin-top:0.4rem; }
.chart-legend-row { display:flex; gap:1rem; margin-top:0.6rem; font-size:0.65rem; font-weight:600; }
.chart-legend-you { color:var(--text); } .chart-legend-friend { color:var(--accent); opacity:0.6; }

.dash-leaderboard { margin-bottom:1.5rem; padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); }
.lb-list { display:flex; flex-direction:column; }
.lb-item { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid rgba(12,43,28,0.06); }
.lb-item:last-child { border-bottom:none; }
.lb-rank { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; flex-shrink:0; }
.lb-rank-1 { background:rgba(255,183,3,0.2); color:#c69200; }
.lb-rank-2 { background:rgba(192,192,192,0.2); color:#666; }
.lb-rank-3 { background:rgba(205,127,50,0.2); color:#96622e; }
.lb-rank-n { background:rgba(12,43,28,0.05); color:var(--text); opacity:0.5; }
.lb-info { flex:1; }
.lb-name { font-size:0.85rem; font-weight:600; display:block; }
.lb-stat { font-size:0.7rem; opacity:0.5; }
.lb-highlight { background:rgba(12,43,28,0.04); border-radius:0.5rem; padding:0.75rem 0.75rem !important; }

.dash-activity { padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); }
.activity-list { display:flex; flex-direction:column; }
.activity-item { display:flex; align-items:flex-start; gap:1rem; padding:0.75rem 0; border-bottom:1px solid rgba(12,43,28,0.06); }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:0.3rem; }
.activity-content { flex:1; } .activity-content strong { font-size:0.85rem; display:block; margin-bottom:0.1rem; }
.activity-content p { font-size:0.72rem; opacity:0.5; }
.activity-time { font-size:0.65rem; opacity:0.4; white-space:nowrap; }

/* ============ SOCIAL ============ */
.social-layout { display:grid; grid-template-columns:320px 1fr; gap:1.5rem; }
.friends-panel,.feed-panel { padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); }
.badge { font-size:0.65rem; font-weight:700; padding:0.1rem 0.45rem; border-radius:50px; background:var(--text); color:var(--bg); }
.avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; flex-shrink:0; color:#fff; }
.avatar-sm { width:36px; height:36px; font-size:0.65rem; }
.friend-item { display:flex; align-items:center; gap:0.75rem; padding:0.65rem 0; border-bottom:1px solid rgba(12,43,28,0.06); }
.friend-item:last-child { border-bottom:none; }
.friend-info { flex:1; min-width:0; } .friend-name { font-size:0.85rem; font-weight:600; display:block; }
.friend-reading { font-size:0.7rem; opacity:0.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.friend-online { width:8px; height:8px; border-radius:50%; background:#7ca87c; flex-shrink:0; }
.friend-offline { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
.feed-item { display:flex; gap:0.75rem; padding:1rem; margin-bottom:0.75rem; border-radius:0.875rem; border:1px solid rgba(12,43,28,0.06); background:rgba(12,43,28,0.01); transition:border-color 0.3s ease; }
.feed-item:hover { border-color:var(--border); }
.feed-content { flex:1; } .feed-content strong { font-size:0.825rem; }
.feed-content p { font-size:0.75rem; opacity:0.55; margin-top:0.2rem; }
.feed-time { font-size:0.65rem; opacity:0.35; white-space:nowrap; }
.feed-action { font-size:0.7rem; color:var(--accent); font-weight:600; margin-top:0.4rem; display:inline-block; }

/* ============ MESSAGES ============ */
.msg-wrap { display:flex; height:calc(100vh - 10rem); overflow:hidden; background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); }
.msg-sidebar { width:320px; min-width:320px; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.msg-sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; }
.msg-sidebar-title { font-size:1.1rem; font-weight:700; }
.msg-conv-list { flex:1; overflow-y:auto; }
.msg-conv-item { display:flex; align-items:center; gap:0.75rem; padding:0.9rem 1.5rem; cursor:pointer; transition:background 0.2s ease; border-left:3px solid transparent; }
.msg-conv-item:hover { background:rgba(12,43,28,0.03); }
.msg-conv-item.active { background:rgba(12,43,28,0.05); border-left-color:var(--text); }
.msg-conv-info { flex:1; min-width:0; } .msg-conv-name { font-size:0.85rem; font-weight:600; display:block; }
.msg-conv-preview { font-size:0.7rem; opacity:0.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.msg-conv-time { font-size:0.6rem; opacity:0.35; } .msg-unread { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.msg-thread { flex:1; display:flex; flex-direction:column; }
.msg-thread-header { display:flex; align-items:center; padding:1rem 1.5rem; border-bottom:1px solid var(--border); }
.msg-thread-user { display:flex; align-items:center; gap:0.75rem; } .msg-thread-user strong { font-size:0.9rem; }
.msg-status { font-size:0.7rem; opacity:0.4; display:block; }
.msg-thread-body { flex:1; overflow-y:auto; padding:1.5rem; display:flex; flex-direction:column; gap:0.75rem; }
.msg-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:0.75rem; }
.msg-empty-state p { font-size:0.85rem; opacity:0.35; }
.msg-bubble { max-width:70%; padding:0.75rem 1rem; border-radius:1rem; font-size:0.85rem; line-height:1.5; animation:bubbleIn 0.3s var(--transition); }
@keyframes bubbleIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.msg-bubble.sent { align-self:flex-end; background:var(--text); color:var(--bg); border-bottom-right-radius:0.3rem; }
.msg-bubble.received { align-self:flex-start; background:rgba(12,43,28,0.06); border-bottom-left-radius:0.3rem; }
.msg-bubble-time { font-size:0.6rem; opacity:0.5; margin-top:0.2rem; display:block; }
.msg-input-area { display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1.5rem; border-top:1px solid var(--border); }
.msg-input-area input { flex:1; border:1px solid var(--border); border-radius:50px; padding:0.6rem 1rem; font-family:var(--font-body); font-size:0.85rem; color:var(--text); background:transparent; outline:none; transition:border-color 0.3s ease; }
.msg-input-area input:focus { border-color:var(--text); }
.msg-send-btn { width:38px; height:38px; border-radius:50%; border:none; background:var(--text); color:var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease; flex-shrink:0; }
.msg-send-btn:hover { transform:scale(1.05); }

/* ============ PROFILE ============ */
.profile-wrap { max-width:560px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.profile-card { text-align:center; padding:2.5rem 2rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); margin-bottom:1.5rem; width:100%; }
.profile-avatar-large { width:80px; height:80px; border-radius:50%; background:var(--text); color:var(--bg); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; margin:0 auto 1.5rem; position:relative; overflow:hidden; background-size:cover; background-position:center; }
.pfp-edit { position:absolute; bottom:0; left:0; right:0; height:28px; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity 0.3s ease; color:#fff; }
.profile-avatar-large:hover .pfp-edit { opacity:1; }
.profile-name { font-size:1.4rem; font-weight:700; margin-bottom:0.2rem; }
.profile-handle { font-size:0.8rem; opacity:0.5; margin-bottom:1.5rem; }
.profile-stats-row { display:flex; justify-content:center; gap:3rem; }
.profile-stat { text-align:center; } .profile-stat strong { font-size:1.3rem; font-weight:700; display:block; line-height:1; }
.profile-stat span { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; opacity:0.5; }
.profile-section { padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); margin-bottom:1.5rem; width:100%; }
.pref-list { display:flex; flex-direction:column; }
.pref-item { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid rgba(12,43,28,0.06); }
.pref-item:last-child { border-bottom:none; }
.pref-info { display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; font-weight:500; } .pref-info svg { opacity:0.4; }
.pref-value { font-size:0.8rem; font-weight:600; opacity:0.55; }
.logout-btn { margin-top:1rem; width:auto; min-width:140px; padding:0.6rem 2.5rem; justify-content:center; display:inline-flex; border-radius:50px; border:1px solid var(--text); background:transparent; color:var(--text); transition:all 0.3s ease; }
.logout-btn:hover { background:var(--text); color:var(--bg); transform:translateY(-2px); }

/* ============ READER ============ */
.reader-layout { display:flex; height:100vh; overflow:hidden; }
.reader-sidebar { width:280px; min-width:280px; height:100vh; border-right:1px solid var(--border); background:var(--bg); display:flex; flex-direction:column; z-index:20; }
.sidebar-brand { display:flex; align-items:center; gap:0.75rem; padding:1.75rem 1.5rem; margin-bottom:1rem; }
.sidebar-brand-name { font-family:var(--font-heading)!important; font-size:1.4rem; font-weight:700; letter-spacing:-0.03em; }
.sidebar-body { padding:1rem 1.25rem; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:0.5rem; }
.sidebar-panel { padding:0.75rem 0.5rem; border:none; background:transparent; transition:none; border-bottom:1px solid rgba(12,43,28,0.06); border-radius:0; }
.sidebar-panel:last-child { border-bottom:none; }
.panel-header { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.6rem; }
.panel-icon { width:28px; height:28px; border-radius:8px; background:rgba(12,43,28,0.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.panel-title { font-family:var(--font-heading); font-size:0.8rem; font-weight:600; flex:1; }
.panel-value { font-size:0.75rem; font-weight:700; background:rgba(12,43,28,0.06); padding:0.15rem 0.5rem; border-radius:50px; }
.range-slider { -webkit-appearance:none; appearance:none; width:100%; height:4px; background:var(--border); border-radius:4px; outline:none; cursor:pointer; margin-top:0.25rem; }
.range-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--text); cursor:pointer; transition:transform 0.2s ease; }
.range-slider::-webkit-slider-thumb:hover { transform:scale(1.2); }
.range-labels { display:flex; justify-content:space-between; font-size:0.65rem; opacity:0.4; margin-top:0.3rem; }
.audio-modes { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.audio-mode-btn { display:flex; width:100%; max-width:220px; justify-content:center; align-items:center; gap:0.6rem; padding:0.55rem 0.75rem; border-radius:0.625rem; border:1px solid transparent; background:transparent; color:var(--text); opacity:0.55; font-family:var(--font-body); font-size:0.8rem; font-weight:500; cursor:pointer; transition:all 0.3s ease; }
.audio-mode-btn:hover { opacity:0.85; background:rgba(12,43,28,0.04); border-color:var(--border); }
.audio-mode-btn.active { background:var(--text); color:var(--bg); opacity:1; font-weight:600; border-color:var(--text); }
.toggle-switch { width:38px; height:22px; border-radius:50px; background:var(--border); border:none; cursor:pointer; position:relative; transition:background 0.3s ease; flex-shrink:0; }
.toggle-switch.active { background:var(--text); }
.toggle-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--bg); transition:transform 0.3s ease; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.toggle-switch.active .toggle-knob { transform:translateX(16px); }
.sidebar-panel-status { display:flex; flex-direction:column; gap:0.75rem; }
.tts-options { display:none; margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid rgba(12,43,28,0.06); }
.tts-options.expanded { display:block; }
.status-row { margin-bottom:0; } .status-item { min-width:0; }
.mood-indicator { display:inline-flex; width:max-content; align-items:center; gap:0.5rem; padding:0.4rem 0.8rem; border-radius:50px; background:rgba(12,43,28,0.04); }
.mood-dot { width:8px; height:8px; border-radius:50%; background:var(--highlight); transition:background 0.5s ease; box-shadow:0 0 6px rgba(255,183,3,0.4); }
.mood-text { font-size:0.8rem; font-weight:500; text-transform:capitalize; }
.progress-bar-container { width:100%; height:4px; background:var(--border); border-radius:4px; margin-top:0.4rem; overflow:hidden; }
.progress-bar { height:100%; width:0%; background:var(--text); border-radius:4px; transition:width 0.3s ease; }
.sidebar-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:center; }
.sidebar-back-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; width:auto; padding:0.65rem 1.75rem; border-radius:50px; border:1px solid var(--border); background:transparent; color:var(--text); font-family:var(--font-body); font-size:0.825rem; font-weight:500; cursor:pointer; transition:all 0.3s ease; text-decoration:none; }
.sidebar-back-btn:hover { background:var(--text); color:var(--bg); border-color:var(--text); }
.sidebar-toggle { display:none; position:fixed; top:1rem; right:1rem; z-index:30; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.reader-main { flex:1; display:flex; flex-direction:column; position:relative; background:var(--bg); }
.reader-top-bar { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 3rem; border-bottom:1px solid rgba(12,43,28,0.05); }
.reader-book-title { font-size:1.25rem; letter-spacing:-0.01em; font-family:var(--font-heading); }
.reader-book-author { font-size:0.8rem; opacity:0.5; display:block; margin-top:0.15rem; }
.reader-percent { font-size:0.95rem; font-weight:600; letter-spacing:0; color:var(--text); font-family:var(--font-heading); }
.mood-tint-overlay { position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0; transition:opacity 1.5s ease,background 2s ease; }
.mood-tint-overlay.active { opacity:1; }
.reader-scroll { flex:1; overflow-y:auto; padding:3rem 3rem 6rem; scroll-behavior:smooth; position:relative; z-index:2; }
.reader-text-container { max-width:680px; margin:0 auto; }
.reader-text { font-size:1.35rem; line-height:2.2; color:rgba(12,43,28,0.2); font-weight:300; letter-spacing:0.01em; }
.reader-text .word { display:inline; cursor:pointer; transition:color 0.3s ease,background 0.3s ease; border-radius:3px; padding:1px 0; }
.reader-text .word.far-ahead { color:rgba(12,43,28,0.12); }
.reader-text .word.ahead { color:rgba(12,43,28,0.2); }
.reader-text .word.near { color:rgba(12,43,28,0.35); }
.reader-text .word.passed { color:rgba(12,43,28,0.55); }
.reader-text .word.current-sentence { color:rgba(12,43,28,0.45); }
.reader-text .word.current { color:var(--text); font-weight:600; padding:0 2px; margin:0 -2px; border-bottom:2px solid var(--highlight); background:transparent; }
.reader-text .word.current[data-mood="suspense"] { border-color:var(--accent); }
.reader-text .word.current[data-mood="action"] { border-color:var(--highlight2); }
.reader-text .word.current[data-mood="eerie"] { border-color:rgba(12,43,28,0.5); }
.reader-text .word.current[data-mood="happy"] { border-color:var(--highlight); }
.reader-text .word.current[data-mood="calm"] { border-color:rgba(124,168,124,0.8); }
.reader-end-spacer { height:12rem; }
.reader-controls { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); height:4.5rem; padding:0 2rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; background:rgba(227,231,211,0.6); backdrop-filter:blur(24px) saturate(1.5); border:1px solid rgba(12,43,28,0.15); border-radius:50px; box-shadow:0 12px 40px rgba(0,0,0,0.12); z-index:10; }
.ctrl-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--bg); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color 0.3s ease,transform 0.2s ease; opacity:0.6; }
.ctrl-btn:hover { border-color:var(--border-hover); opacity:1; transform:scale(1.05); }
.ctrl-play { width:56px; height:56px; border-radius:50%; border:none; background:var(--text); color:var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.2s ease,box-shadow 0.3s ease; }
.ctrl-play:hover { transform:scale(1.08); box-shadow:0 8px 24px rgba(12,43,28,0.25); }

/* Cover colors */
.cover-calm { background:linear-gradient(135deg,#d4e4d0,#b8ceb4); } .cover-suspense { background:linear-gradient(135deg,#e8d0d0,#d4a0a0); }
.cover-action { background:linear-gradient(135deg,#f0dcc0,#e8c090); } .cover-happy { background:linear-gradient(135deg,#e8e4c0,#dcd490); }
.cover-eerie { background:linear-gradient(135deg,#d0d4d8,#a8b0b8); } .cover-mixed { background:linear-gradient(135deg,#d8dcd0,#c0c8b8); }
.cover-romance { background:linear-gradient(135deg,#f0d0d8,#e4a0b8); } .cover-adventure { background:linear-gradient(135deg,#d8e4d0,#a0d0a0); }
.cover-mystery { background:linear-gradient(135deg,#d4d0e4,#b0a8c8); } .cover-horror { background:linear-gradient(135deg,#c8c0c0,#9a8a8a); }

/* Scroll to top */
.scroll-top-btn { position:fixed; bottom:2rem; right:2rem; z-index:90; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:rgba(227,231,211,0.85); backdrop-filter:blur(12px); color:var(--text); cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,0.1); transition:transform 0.2s ease; }
.scroll-top-btn:hover { transform:translateY(-2px); }

/* ============ RESPONSIVE ============ */
@media (max-width:768px) {
  .site-nav { flex-direction:column; gap:1rem; padding:1.5rem; }
  .site-nav .nav-links { flex-wrap:wrap; justify-content:center; }
  .hero { padding:0 1.5rem 3rem; } .hero-title { font-size:2.2rem; }
  .features-section,.categories-section { padding:2rem 0 3rem; }
  .categories-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .features-grid,.library-grid { grid-template-columns:1fr; }
  .dash-stats { grid-template-columns:1fr 1fr; } .dash-charts { grid-template-columns:1fr; }
  .dash-records { grid-template-columns:1fr; }
  .social-layout { grid-template-columns:1fr; }
  .reader-sidebar { position:fixed; left:-340px; top:0; z-index:50; transition:left 0.4s var(--transition); box-shadow:none; }
  .reader-sidebar.open { left:0; box-shadow:20px 0 60px rgba(0,0,0,0.15); }
  .sidebar-toggle { display:flex; }
  .reader-top-bar { padding:1rem 1.25rem; } .reader-scroll { padding:1.5rem 1.25rem 6rem; }
  .reader-text { font-size:1.1rem; line-height:2; }
  .msg-wrap { flex-direction:column; } .msg-sidebar { width:100%; min-width:100%; height:auto; max-height:40vh; border-right:none; border-bottom:1px solid var(--border); }
}