:root {
    /* Z-index scale */
    --z-overlay: 10500;
    --z-drawer:  10100;
    --z-import:  10150;
    --z-toast:   10700;

    /* Neutral palette — Linear-inspired */
    --bg: #F8F9FA;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-overlay: rgba(255,255,255,0.9);

    /* Text */
    --text-primary: #0F1117;
    --text-secondary: #5C6370;
    --text-tertiary: #9DA3AE;
    --text-inverse: #FFFFFF;

    /* Brand */
    --brand: #E8590C;
    --brand-hover: #D44E08;
    --brand-pale: #FEF3EE;
    --brand-muted: rgba(232,89,12,0.12);

    /* Semantic */
    --success: #16A34A;
    --success-pale: #F0FDF4;
    --danger: #DC2626;
    --danger-pale: #FEF2F2;
    --warning: #D97706;
    --warning-pale: #FFFBEB;
    --info: #2563EB;
    --info-pale: #EFF6FF;

    /* Structure */
    --border: #E5E7EB;
    --border-focus: var(--brand);
    --divider: #F3F4F6;

    /* Shadows — subtle, layered */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg: 0 10px 15px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.04);
    --shadow-xl: 0 20px 25px rgba(0,0,0,.08), 0 8px 10px rgba(0,0,0,.04);

    /* Radii — 8px grid */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-full: 9999px;

    /* Sidebar */
    --sidebar-w: 232px;

    /* Legacy aliases for compatibility */
    --bg-old: var(--bg); --cream: var(--bg); --cream-dark: #F3F4F6;
    --card-bg: var(--surface); --sidebar-bg: var(--surface);
    --ink: var(--text-primary); --ink-muted: var(--text-secondary); --ink-light: var(--text-tertiary);
    --orange: var(--brand); --orange-light: var(--brand-hover); --orange-pale: var(--brand-pale);
    --green: var(--success); --green-pale: var(--success-pale);
    --rust: var(--danger); --forest: var(--success); --forest-pale: var(--success-pale);
    --amber: var(--brand); --amber-light: var(--brand-hover); --amber-pale: var(--brand-pale);
    --border-light: var(--divider);
    --shadow-sm-old: var(--shadow-sm); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg);
    --radius-sm: var(--r-sm); --radius-md: var(--r-lg); --radius-lg: var(--r-xl); --radius-xl: var(--r-2xl);
  }

  /* ── Reset & base ── */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  #app { display: none; min-height: 100vh; }

  /* ── Typography scale ── */
  h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
  h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
  h3 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
  p  { line-height: 1.6; }

  /* ── Focus rings ── */
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

  /* ── Auth screen ── */
  #auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--bg);}
  .auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);padding:40px;max-width:400px;width:100%;box-shadow:var(--shadow-xl);}
  .auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:36px;justify-content:center;}
  .auth-logo-icon{width:40px;height:40px;background:var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;}
  .auth-logo-text{font-family:'Crimson Pro',serif;font-size:24px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em;}
  .auth-logo-text span{color:var(--amber);}
  .auth-sub{font-size:14px;color:var(--ink-light);text-align:center;margin-bottom:28px;font-weight:300;line-height:1.5;}
  .auth-tabs{display:flex;background:var(--bg);border-radius:var(--r-lg);padding:4px;gap:4px;margin-bottom:24px;border:1px solid var(--border);}
  .auth-tab{flex:1;padding:9px;background:transparent;border:none;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--ink-light);cursor:pointer;border-radius:var(--radius-sm);transition:all .2s;}
  .auth-tab.active{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-sm);}
  .auth-field{margin-bottom:16px;}
  .auth-field label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);margin-bottom:7px;}
  .auth-field input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:14px;color:var(--text-primary);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;}
  .auth-field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-muted);}
  .btn-auth{width:100%;padding:11px;background:var(--brand);color:#fff;border:none;border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;margin-top:8px;}
  .btn-auth:hover{background:var(--brand-hover);box-shadow:0 2px 8px rgba(232,89,12,.2);}
  .btn-auth:active{transform:translateY(0);}
  .btn-auth:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;}
  .auth-error{background:#FDF0ED;color:var(--rust);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;margin-bottom:16px;display:none;border-left:3px solid var(--rust);}
  .auth-error.visible{display:block;}
  .auth-success{background:var(--forest-pale);color:var(--forest);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;margin-bottom:16px;display:none;border-left:3px solid var(--forest);}
  .auth-success.visible{display:block;}


  /* ── App layout: sidebar + content ── */
  .app-layout{display:flex;min-height:100vh;}

  /* Sidebar */
  .sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;transition:transform .3s;}
  .sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 16px;border-bottom:1px solid var(--divider);}
  .sidebar-logo-icon{width:32px;height:32px;background:var(--brand);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
  .sidebar-logo-text{font-family:'Crimson Pro',serif;font-size:19px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;}
  .sidebar-logo-text span{color:var(--orange);}
  .sidebar-nav{flex:1;padding:8px;overflow-y:auto;}
  .sidebar-section-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);padding:12px 8px 4px;}
  .sidebar-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .15s;border:none;background:transparent;width:100%;text-align:left;margin-bottom:1px;}
  .sidebar-item:hover{background:var(--bg);color:var(--text-primary);}
  .sidebar-item.active{background:var(--brand-pale);color:var(--brand);font-weight:600;}
  .sidebar-item .si-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
  .sidebar-item .si-badge{margin-left:auto;background:var(--brand);color:#fff;font-size:10px;font-weight:600;border-radius:var(--r-full);padding:1px 7px;font-family:'JetBrains Mono',monospace;min-width:20px;text-align:center;letter-spacing:.02em;}
  .sidebar-item .si-badge.green{background:var(--green);}
  .sidebar-bottom{padding:8px;border-top:1px solid var(--divider);}
  .sidebar-user-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);cursor:pointer;transition:background .18s;width:100%;background:transparent;border:none;text-align:left;}
  .sidebar-user-btn:hover{background:var(--bg);}
  .sidebar-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .sidebar-user-info{flex:1;min-width:0;}
  .sidebar-user-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sidebar-user-role{font-size:11px;color:var(--ink-light);}

  /* Content area */
  .content-area{flex:1;margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;}
  .content-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:var(--surface);border-bottom:1px solid var(--divider);position:sticky;top:0;z-index:100;overflow:visible;}
  .content-topbar-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;}
  .content-topbar-right{display:flex;align-items:center;gap:12px;}
  .topbar-stats-group{display:flex;align-items:center;gap:12px;}
  .topbar-stat{font-size:12px;color:var(--text-tertiary);}
  .topbar-divider{width:1px;height:20px;background:var(--border);margin:0 4px;}
  .topbar-user-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;background:transparent;border:1px solid var(--border);border-radius:var(--r-full);cursor:pointer;transition:all .15s;color:var(--text-secondary);font-family:'Inter',sans-serif;font-size:13px;}
  .topbar-user-btn:hover{background:var(--bg);border-color:var(--text-tertiary);}
  .topbar-avatar{width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .topbar-user-name{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .header-user{position:relative;}
  .topbar-stat strong{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace;}

  /* Dropdown (now appears from sidebar user btn) */
  .header-user{position:relative;}
  .logo{font-family:'Crimson Pro',serif;font-size:21px;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--ink);}
  .logo-icon{width:30px;height:30px;background:var(--orange);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;}
  .logo span{color:var(--orange);}
  .header-right{display:flex;align-items:center;gap:16px;}
  .header-stats{display:flex;gap:16px;font-size:12px;color:var(--ink-light);}
  .header-stats strong{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace;}

  main{padding:24px;flex:1;}

  /* ── Loading overlay ── */
  #loading-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:500;flex-direction:column;gap:20px;}
  .loading-logo{font-family:'Inter',sans-serif;font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:-.03em;}
  .loading-logo span{color:var(--amber);}
  .loading-spinner{width:28px;height:28px;border:2.5px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite;}

  /* ── Page system ── */
  .page{display:none;}
  .page.active{display:block;}
  .page-header{display:flex;align-items:center;gap:12px;padding:20px 24px 0;max-width:1200px;margin:0 auto;}
  .btn-back{background:transparent;border:none;color:var(--ink-muted);font-family:'Inter',sans-serif;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 0;transition:color .15s;}
  .btn-back:hover{color:var(--ink);}
  .btn-back svg{flex-shrink:0;}

  /* ── Hero ── */
  .hero{text-align:left;margin-bottom:24px;}
  .hero-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;}
  .hero h1{font-family:'Inter',sans-serif;font-size:24px;font-weight:700;line-height:1.2;margin-bottom:8px;letter-spacing:-.03em;color:var(--text-primary);}
  .hero h1 em{color:var(--amber);font-style:italic;}
  .hero-sub{font-size:14px;color:var(--text-secondary);max-width:480px;line-height:1.6;}

  /* ── Search ── */
  .search-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;margin-bottom:28px;box-shadow:var(--shadow-sm);}
  .search-label{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-light);margin-bottom:12px;display:block;}
  .search-row{display:flex;gap:10px;}
  .search-input-wrap{position:relative;flex:1;display:flex;align-items:center;}
  .search-input-wrap .search-input{width:100%;padding-right:36px;}
  .search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:var(--text-tertiary);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;line-height:1;transition:background .15s;flex-shrink:0;padding:0;}
  .search-clear:hover{background:var(--text-secondary);}
  .search-clear.visible{display:flex;}
  .search-input{flex:1;padding:9px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:14px;color:var(--text-primary);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;}
  .search-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(194,123,42,.1);}
  .search-input::placeholder{color:var(--ink-light);}
  .btn-search{padding:9px 18px;background:var(--brand);color:#fff;border:none;border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:8px;}
  .btn-search:hover{background:var(--brand-hover);box-shadow:0 2px 8px rgba(232,89,12,.25);}
  .btn-search:active{transform:scale(.98) translateY(0);}
  #search-results{display:none;margin-top:20px;border-top:1px solid var(--border);padding-top:20px;}
  #search-results.visible{display:block;}
  .results-title{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);margin-bottom:14px;}
  .results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
  .result-card{display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);align-items:flex-start;transition:all .15s;}
  .result-card:hover{border-color:var(--text-tertiary);box-shadow:var(--shadow-sm);}
  .result-cover{width:52px;height:72px;object-fit:cover;border-radius:4px;flex-shrink:0;}
  .result-cover-placeholder{width:52px;height:72px;border-radius:4px;flex-shrink:0;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:22px;}
  .result-info{flex:1;min-width:0;}
  .result-title{font-family:'Crimson Pro',serif;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .result-author{font-size:12px;color:var(--ink-muted);margin-bottom:3px;}
  .result-year{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;margin-bottom:8px;}
  .result-btns{display:flex;gap:6px;flex-wrap:wrap;}
  .btn-add-read,.btn-add-wishlist{padding:5px 11px;border:none;border-radius:6px;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;cursor:pointer;transition:background .2s;}
  .btn-preview-card{padding:5px 11px;border:1px solid var(--border);border-radius:6px;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;cursor:pointer;background:transparent;color:var(--ink-muted);transition:all .15s;}
  .btn-preview-card:hover{border-color:var(--ink);color:var(--ink);}
  .btn-add-read{background:var(--amber);color:#fff;}
  .btn-add-read:hover:not(:disabled){background:#A06E10;}
  .btn-add-wishlist{background:var(--forest);color:#fff;}
  .btn-add-wishlist:hover:not(:disabled){background:#1E4029;}
  .btn-add-read:disabled,.btn-add-wishlist:disabled{background:#9B8E7E;cursor:default;}
  .search-loading{text-align:center;padding:32px;color:var(--ink-muted);font-size:14px;display:none;}
  .search-loading.visible{display:block;}

  /* ── Tabs ── */
  .tabs-row{display:flex;border-bottom:2px solid var(--border);margin-bottom:32px;}
  .tab-btn{padding:10px 20px;background:transparent;border:none;border-bottom:2px solid transparent;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--text-tertiary);cursor:pointer;transition:color .15s,border-color .15s;margin-bottom:-1px;display:flex;align-items:center;gap:6px;}
  .tab-btn.active{color:var(--brand);border-bottom-color:var(--brand);}
  .tab-btn.tab-wish.active{color:var(--forest);border-bottom-color:var(--forest);}
  .tab-badge{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;background:var(--cream-dark);color:var(--ink-light);border-radius:20px;padding:2px 8px;transition:background .2s,color .2s;}
  .tab-btn.active .tab-badge{background:var(--ink);color:var(--cream);}
  .tab-btn.tab-wish.active .tab-badge{background:var(--forest);}

  /* ── Shelf ── */
  .shelf-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
  .shelf-title{font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;}
  .shelf-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .filter-btn{padding:5px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .15s;}
  .filter-btn:hover{border-color:var(--text-tertiary);color:var(--text-primary);}
  .filter-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);}
  .sort-select{padding:5px 12px;border:1px solid var(--border);border-radius:var(--r-full);font-family:'Inter',sans-serif;font-size:12px;color:var(--text-secondary);background:var(--surface);outline:none;cursor:pointer;transition:border-color .15s;}
  .sort-select:hover{border-color:var(--ink-light);}

  /* ── Books grid ── */
  .books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:16px;}
  .book-card{position:relative;cursor:pointer;animation:fadeIn .4s ease both;}
  @keyframes fadeIn {from{opacity:0}to{opacity:1;transform:translateY(0)}}
  .book-cover-wrap{position:relative;aspect-ratio:2/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:box-shadow .25s,transform .25s;margin-bottom:8px;}
  .book-card:hover .book-cover-wrap{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
  .book-cover-img{width:100%;height:100%;object-fit:cover;}
  .book-cover-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--cream-dark) 0%,#D4C9B0 100%);font-size:32px;gap:8px;}
  .book-cover-placeholder span{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-light);text-align:center;padding:0 8px;line-height:1.4;}
  .book-cover-wrap::before{content:'';position:absolute;left:0;top:0;width:6px;height:100%;background:rgba(26,20,16,.12);z-index:1;}
  .book-cover-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(255,255,255,.06) 0%,transparent 30%);z-index:2;pointer-events:none;}
  .wish-overlay{position:absolute;inset:0;background:rgba(45,90,61,.5);display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none;}
  .wish-badge{background:var(--forest);color:#fff;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:20px;}
  .book-delete{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(26,20,16,.75);border:none;border-radius:50%;color:var(--cream);font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:10;transition:background .15s;line-height:1;}
  .book-card:hover .book-delete{display:flex;}
  .book-delete:hover{background:var(--rust);}
  .book-rating{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(to top,rgba(26,20,16,.8) 0%,transparent 100%);display:flex;justify-content:center;font-size:11px;z-index:3;}
  .book-info .book-title{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.35;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.01em;}
  .book-info .book-author{font-size:11.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .book-info .book-date{font-size:11px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;margin-top:1px;}
  .book-date-reading{font-size:10.5px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;margin-top:3px;display:flex;align-items:center;gap:3px;}
  .book-list-date-reading{font-size:10px;color:var(--brand);font-family:'JetBrains Mono',monospace;display:flex;align-items:center;gap:2px;font-weight:500;white-space:nowrap;}

  /* ── View toggle ── */
  .view-toggle{display:flex;gap:2px;background:var(--cream-dark);border-radius:8px;padding:3px;}
  .view-btn{width:30px;height:30px;border:none;border-radius:6px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;color:var(--ink-light);}
  .view-btn.active{background:var(--card-bg);color:var(--ink);box-shadow:0 1px 4px rgba(26,20,16,.1);}
  .view-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  /* ── List view ── */
  .books-list{display:flex;flex-direction:column;}
  .book-list-item{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;border-radius:0;animation:fadeIn .25s ease;}
  .book-list-item:last-child{border-bottom:none;}
  .book-list-item:hover{background:var(--cream-dark);margin:0 -12px;padding:12px;border-radius:8px;}
  .book-list-item:hover .book-list-delete{display:flex;}
  .book-list-cover{width:36px;height:50px;object-fit:cover;border-radius:4px;flex-shrink:0;box-shadow:1px 2px 6px rgba(26,20,16,.15);}
  .book-list-cover-ph{width:36px;height:50px;border-radius:4px;flex-shrink:0;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:1px 2px 6px rgba(26,20,16,.1);}
  .book-list-info{flex:1;min-width:0;}
  .book-list-title{font-family:'Crimson Pro',serif;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .book-list-author{font-size:13px;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .book-list-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;max-width:140px;}
  .book-list-rating{font-size:12px;}
  .book-list-year{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .book-list-date{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .book-list-wish{font-size:10px;font-weight:500;background:var(--forest-pale);color:var(--forest);padding:2px 8px;border-radius:20px;}
  .book-list-delete{width:26px;height:26px;background:rgba(26,20,16,.08);border:none;border-radius:50%;color:var(--ink-muted);font-size:12px;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;line-height:1;}
  .book-list-delete:hover{background:var(--rust);color:#fff;}

  /* ── Empty state ── */
  .empty-state{text-align:center;padding:80px 24px;}
  .empty-icon{font-size:48px;margin-bottom:20px;opacity:.45;}
  .empty-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:6px;}
  .empty-sub{font-size:13px;color:var(--text-secondary);}

  /* ── Year group ── */
  .year-group{margin-bottom:40px;}
  .author-group{margin-bottom:36px;}
  .author-label{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
  .author-label-text{font-family:'Crimson Pro',serif;font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;}
  .author-label-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-light);background:var(--cream-dark);padding:2px 8px;border-radius:20px;flex-shrink:0;}
  .author-label::after{content:'';flex:1;height:1px;background:var(--border);}
  .year-label{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .year-label span{font-size:11px;font-weight:600;color:var(--text-tertiary);letter-spacing:.06em;text-transform:uppercase;font-family:'Inter',sans-serif;}
  .year-label::after{content:'';flex:1;height:1px;background:var(--divider);}

  /* ── Modal ── */
  
  
  .modal{background:var(--surface);border-radius:var(--r-2xl);padding:28px;max-width:440px;width:100%;box-shadow:var(--shadow-xl);animation:modalIn .25s cubic-bezier(.16,1,.3,1);border:1px solid var(--border);}
  @keyframes modalIn{from{opacity:0}to{opacity:1}}
  .modal-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;}
  .modal-cover{width:64px;height:88px;object-fit:cover;border-radius:6px;flex-shrink:0;box-shadow:3px 3px 12px rgba(26,20,16,.2);}
  .modal-cover-ph{width:64px;height:88px;border-radius:6px;flex-shrink:0;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:3px 3px 12px rgba(26,20,16,.2);}
  .modal-book-title{font-family:'Crimson Pro',serif;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.3;}
  .modal-book-author{font-size:13px;color:var(--ink-muted);margin-bottom:3px;}
  .modal-book-year{font-size:12px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .modal-section-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);margin-bottom:10px;}
  .shelf-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
  .shelf-btn{padding:16px 12px;border-radius:var(--radius-md);border:2px solid var(--border);background:var(--cream);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:all .18s;text-align:center;line-height:1.4;}
  .shelf-btn .sbi{font-size:26px;display:block;margin-bottom:6px;}
  .shelf-btn:hover{border-color:var(--ink-light);color:var(--ink);}
  .shelf-btn.sel-read{border-color:var(--orange);background:var(--orange-pale);color:var(--orange);}
  .shelf-btn.sel-wish{border-color:var(--green);background:var(--green-pale);color:var(--green);}
  .rating-area{overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease,opacity .25s ease;}
  .rating-area.open{max-height:400px;opacity:1;}
  .star-rating{display:flex;gap:4px;margin-bottom:20px;align-items:center;}
  .star{width:32px;height:32px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s;opacity:.25;color:var(--brand);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .star svg{width:28px;height:28px;fill:currentColor;transition:fill .15s;}
  .star.active{opacity:1;transform:scale(1.0);}
  .star:hover{opacity:1;transform:scale(1.2);}
  .star.active{opacity:1;}
  .star.hovered{opacity:1;transform:scale(1.15);}
  .star.dimmed{opacity:.2;}
  .notes-textarea{width:100%;height:80px;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--cream);outline:none;resize:none;transition:border-color .2s;margin-bottom:20px;}
  .notes-textarea:focus{border-color:var(--amber);}
  .modal-actions{display:flex;gap:10px;}
  .btn-cancel{flex:1;padding:10px 16px;background:transparent;border:1px solid var(--border);border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .15s;}
  .btn-cancel:hover{border-color:var(--text-secondary);color:var(--text-primary);background:var(--bg);}
  .btn-confirm{flex:2;padding:10px 16px;background:var(--brand);border:none;border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:#fff;cursor:pointer;transition:all .15s;}
  .btn-confirm:hover:not(:disabled){background:var(--brand-hover);box-shadow:0 2px 8px rgba(232,89,12,.2);}
  .btn-confirm:disabled{opacity:.4;cursor:not-allowed;}

  /* ── Search preview panel ── */
  
  
  .preview-panel{background:var(--card-bg);border-radius:20px;padding:0;max-width:560px;width:100%;box-shadow:0 24px 80px rgba(26,20,16,.3);max-height:90vh;overflow-y:auto;}
  .preview-hero{position:relative;border-radius:20px 20px 0 0;overflow:hidden;background:var(--cream-dark);}
  .preview-hero-blur{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(24px) brightness(.6);transform:scale(1.1);}
  .preview-hero-content{position:relative;display:flex;gap:20px;padding:28px 28px 24px;align-items:flex-end;}
  .preview-cover{width:90px;height:126px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:4px 8px 24px rgba(26,20,16,.4);}
  .preview-cover-ph{width:90px;height:126px;border-radius:8px;flex-shrink:0;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:36px;}
  .preview-hero-info{flex:1;min-width:0;}
  .preview-hero-title{font-family:'Crimson Pro',serif;font-size:20px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,.3);}
  .preview-hero-author{font-size:14px;color:rgba(255,255,255,.8);margin-bottom:4px;}
  .preview-hero-meta{font-size:12px;color:rgba(255,255,255,.6);font-family:'JetBrains Mono',monospace;}
  .preview-body{padding:24px 28px 28px;}
  .preview-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
  .preview-tag{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:var(--cream-dark);color:var(--ink-muted);}
  .preview-desc-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);margin-bottom:8px;}
  .preview-desc{font-size:14px;line-height:1.75;color:var(--ink-muted);margin-bottom:24px;}
  .preview-desc.collapsed{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  .preview-read-more{background:none;border:none;color:var(--amber);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;padding:0;margin-bottom:20px;display:block;}
  .preview-actions{display:flex;gap:10px;}
  .btn-preview-close{flex:1;padding:13px;background:transparent;border:1.5px solid var(--border);border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:all .15s;}
  .btn-preview-close:hover{border-color:var(--ink);color:var(--ink);}
  .btn-preview-read{flex:2;padding:13px;background:var(--amber);border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:background .2s;}
  .btn-preview-read:hover:not(:disabled){background:#A06E10;}
  .btn-preview-wish{flex:2;padding:13px;background:var(--forest);border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:background .2s;}
  .btn-preview-wish:hover:not(:disabled){background:#1E4029;}
  .btn-preview-read:disabled,.btn-preview-wish:disabled{background:#9B8E7E;cursor:default;}

  /* ── Detail panel ── */
  /* detail-overlay overridden in mobile fixes */
  
  /* detail-panel overridden in mobile fixes */
  @keyframes panelIn{from{opacity:0}to{opacity:1}}
  .detail-top{display:flex;gap:16px;margin-bottom:20px;min-width:0;}
  .detail-cover{width:80px;height:110px;object-fit:cover;border-radius:8px;flex-shrink:0;box-shadow:4px 4px 20px rgba(26,20,16,.25);}
  .detail-cover-ph{width:80px;height:110px;border-radius:8px;flex-shrink:0;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:4px 4px 20px rgba(26,20,16,.25);}
  .detail-shelf-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:8px;}
  .detail-shelf-tag.read{background:var(--brand-pale);color:var(--brand);}
  .detail-shelf-tag.wish{background:var(--success-pale);color:var(--success);}
  .detail-title{font-family:'Crimson Pro',serif;font-size:17px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:4px;word-break:break-word;}
  .detail-author{font-size:13px;color:var(--ink-muted);margin-bottom:4px;word-break:break-word;}
  .detail-meta{font-size:12px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;margin-bottom:10px;}
  .detail-stars{font-size:20px;margin-bottom:6px;}
  .detail-rating-section{border-top:1px solid var(--divider);padding-top:16px;margin-bottom:18px;}
  .detail-rating-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
  .detail-star-row{display:flex;gap:4px;align-items:center;}
  .d-star{width:30px;height:30px;cursor:pointer;opacity:.2;color:var(--brand);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s;background:none;border:none;padding:0;}
  .d-star svg{width:26px;height:26px;fill:currentColor;}
  .d-star.active{opacity:1;}
  .d-star.hovered{opacity:1;transform:scale(1.2);}
  .d-star.dimmed{opacity:.15;}
  .detail-rating-current{font-size:12px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;margin-left:8px;}
  .detail-rating-current.rated{color:var(--brand);font-weight:600;}
  .detail-date{font-size:11px;color:var(--ink-light);}
  .detail-desc{font-size:13px;line-height:1.7;color:var(--ink-muted);border-top:1px solid var(--border);padding-top:16px;margin-bottom:16px;}
  .detail-notes{background:var(--amber-pale);border-left:3px solid var(--amber);padding:12px 16px;border-radius:0 8px 8px 0;font-size:13px;color:var(--ink-muted);font-style:italic;margin-bottom:20px;line-height:1.6;}
  /* overridden */
  .btn-close-d{flex:1;min-width:70px;padding:10px 8px;background:transparent;border:1.5px solid var(--border);border-radius:10px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:all .15s;}
  .btn-close-d:hover{border-color:var(--ink);color:var(--ink);}
  .btn-mark-read{flex:2;min-width:100px;padding:10px 8px;background:var(--amber);border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#fff;cursor:pointer;transition:background .2s;}
  .btn-mark-read:hover{background:#A06E10;}
  .btn-start-reading{flex:2;min-width:120px;padding:12px;background:#185FA5;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:background .2s;}
  .btn-start-reading:hover{background:#0C447C;}
  .btn-del{flex:1;min-width:70px;padding:10px 8px;background:transparent;border:1.5px solid var(--border);border-radius:10px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--rust);cursor:pointer;transition:all .15s;}
  .btn-del:hover{background:var(--rust);color:#fff;border-color:var(--rust);}

  /* ── Detail notes editor ── */
  .detail-notes-section{border-top:1px solid var(--divider);padding-top:16px;margin-bottom:20px;}
  .detail-notes-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;}
  .btn-edit-notes{font-size:11px;font-weight:500;color:var(--amber);background:transparent;border:none;cursor:pointer;font-family:'Inter',sans-serif;padding:0;}
  .btn-edit-notes:hover{color:#A06E10;}
  .notes-display{background:var(--brand-pale);border-left:3px solid var(--brand);padding:12px 16px;border-radius:0 8px 8px 0;font-size:13px;color:var(--ink-muted);font-style:italic;line-height:1.6;}
  .notes-display.empty{font-style:normal;color:var(--ink-light);}
  .notes-edit-area{display:none;}
  .notes-edit-area.open{display:block;}
  .detail-notes-textarea{width:100%;height:90px;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--cream);outline:none;resize:none;transition:border-color .2s;margin-bottom:10px;}
  .detail-notes-textarea:focus{border-color:var(--amber);}
  .notes-edit-actions{display:flex;gap:8px;}
  .btn-save-notes{flex:2;padding:10px;background:var(--ink);border:none;border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--cream);cursor:pointer;transition:background .2s;}
  .btn-save-notes:hover{background:#2D2420;}
  .btn-save-notes:disabled{opacity:.5;cursor:default;}
  .btn-cancel-notes{flex:1;padding:10px;background:transparent;border:1.5px solid var(--border);border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink-muted);cursor:pointer;}
  .btn-cancel-notes:hover{border-color:var(--ink-muted);color:var(--ink);}

  /* ── Quotes section ── */
  .quotes-section{border-top:1px solid var(--border);padding-top:18px;margin-bottom:20px;}
  .quotes-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .quotes-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);}
  .btn-add-quote{font-size:11px;font-weight:500;color:var(--amber);background:transparent;border:none;cursor:pointer;font-family:'Inter',sans-serif;padding:0;display:flex;align-items:center;gap:4px;}
  .btn-add-quote:hover{color:#A06E10;}
  .quotes-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
  .quote-item{background:var(--cream);border:1px solid var(--border);border-left:3px solid var(--ink-light);border-radius:0 8px 8px 0;padding:12px 14px;position:relative;}
  .quote-item:hover .quote-delete{opacity:1;}
  .quote-text{font-family:'Crimson Pro',serif;font-size:14px;font-style:italic;color:var(--ink);line-height:1.6;margin-bottom:4px;}
  .quote-text::before{content:'"';opacity:.4;}
  .quote-text::after{content:'"';opacity:.4;}
  .quote-page{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .quote-delete{position:absolute;top:8px;right:8px;width:22px;height:22px;background:transparent;border:none;color:var(--ink-light);font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s,color .15s;border-radius:4px;display:flex;align-items:center;justify-content:center;}
  .quote-delete:hover{color:var(--rust);}
  .quotes-empty{font-size:13px;color:var(--ink-light);font-style:italic;text-align:center;padding:8px 0 4px;}
  .quote-add-form{display:none;background:var(--cream-dark);border-radius:10px;padding:14px;margin-top:4px;}
  .quote-add-form.open{display:block;}
  .quote-add-form textarea{width:100%;height:80px;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:'Crimson Pro',serif;font-size:14px;font-style:italic;color:var(--ink);background:var(--cream);outline:none;resize:none;transition:border-color .2s;margin-bottom:8px;}
  .quote-add-form textarea:focus{border-color:var(--amber);}
  .quote-form-row{display:flex;gap:8px;align-items:center;}
  .quote-page-input{flex:1;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink);background:var(--cream);outline:none;transition:border-color .2s;}
  .quote-page-input:focus{border-color:var(--amber);}
  .btn-save-quote{padding:9px 18px;background:var(--ink);border:none;border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--cream);cursor:pointer;transition:background .2s;white-space:nowrap;}
  .btn-save-quote:hover{background:#2D2420;}
  .btn-save-quote:disabled{opacity:.5;cursor:default;}
  .btn-cancel-quote{padding:9px 14px;background:transparent;border:1.5px solid var(--border);border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;color:var(--ink-muted);cursor:pointer;}
  .btn-cancel-quote:hover{border-color:var(--ink-muted);color:var(--ink);}
  .quotes-loading{font-size:13px;color:var(--ink-light);text-align:center;padding:8px 0;}

  /* ── Reviews section in preview ── */
  .preview-reviews{border-top:1px solid var(--border);margin-top:0;background:var(--cream);border-radius:0 0 20px 20px;}
  .preview-reviews-inner{padding:20px 28px 0;}
  .reviews-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .reviews-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);}
  .reviews-avg{display:flex;align-items:center;gap:8px;}
  .reviews-avg-stars{font-size:16px;}
  .reviews-avg-num{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--ink);}
  .reviews-avg-count{font-size:12px;color:var(--ink-light);}
  .reviews-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;max-height:280px;overflow-y:auto;}
  .review-item{background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
  .review-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  .review-item-user{font-size:12px;font-weight:500;color:var(--ink);}
  .review-item-stars{font-size:13px;}
  .review-item-date{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .review-item-text{font-size:13px;color:var(--ink-muted);line-height:1.6;}
  .review-item-mine{border-color:var(--amber);}
  .review-delete-btn{background:none;border:none;color:var(--ink-light);font-size:12px;cursor:pointer;padding:0 4px;transition:color .15s;}
  .review-delete-btn:hover{color:var(--rust);}
  .reviews-empty{font-size:13px;color:var(--ink-light);text-align:center;padding:12px 0 4px;font-style:italic;}
  .reviews-loading{font-size:13px;color:var(--ink-light);text-align:center;padding:12px 0;}
  .write-review-section{background:var(--cream-dark);border-radius:10px;padding:14px;margin-bottom:4px;}
  .write-review-title{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-light);margin-bottom:10px;}
  .write-review-stars{display:flex;gap:5px;margin-bottom:10px;}
  .rev-star{width:28px;height:28px;cursor:pointer;opacity:.25;color:var(--brand);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s;background:none;border:none;padding:0;}
  .rev-star svg{width:24px;height:24px;fill:currentColor;}
  .rev-star.active{opacity:1;}
  .rev-star:hover{opacity:1;transform:scale(1.15);}
  .write-review-textarea{width:100%;height:70px;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;color:var(--ink);background:var(--cream);outline:none;resize:none;transition:border-color .2s;margin-bottom:10px;}
  .write-review-textarea:focus{border-color:var(--amber);}
  .btn-submit-review{padding:9px 20px;background:var(--ink);color:var(--cream);border:none;border-radius:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s;}
  .btn-submit-review:hover{background:#2D2420;}
  .btn-submit-review:disabled{opacity:.5;cursor:default;}
  .already-reviewed-note{font-size:12px;color:var(--ink-light);font-style:italic;text-align:center;padding:6px 0;}

  /* ── Load more ── */
  .btn-load-more{display:block;margin:16px auto 0;padding:10px 24px;background:transparent;border:1.5px solid var(--border);border-radius:20px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:all .2s;}
  .btn-load-more:hover{border-color:var(--ink);color:var(--ink);}
  .btn-load-more:disabled{opacity:.5;cursor:default;}

  /* ── Header dropdown ── */
  .header-user{position:relative;font-size:12px;color:rgba(245,240,232,0.5);display:flex;align-items:center;gap:8px;}
  .btn-user-menu{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg);border:1px solid var(--border);border-radius:20px;cursor:pointer;color:var(--ink-muted);font-family:'Inter',sans-serif;font-size:12px;transition:background .2s;}
  .btn-user-menu:hover{background:var(--border-light);}
  .btn-user-menu .user-avatar{width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .user-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);min-width:220px;z-index:10400;display:none;overflow:hidden;animation:modalIn .2s cubic-bezier(.16,1,.3,1);}
  .user-dropdown.open{display:block !important; z-index:10400 !important;}
  .dropdown-header{padding:14px 16px;border-bottom:1px solid var(--border);}
  .dropdown-username{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px;}
  .dropdown-email{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .dropdown-item{display:flex;align-items:center;gap:10px;padding:8px 12px;font-family:'Inter',sans-serif;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:background .12s;border:none;background:transparent;width:100%;text-align:left;border-radius:var(--r-sm);margin:1px 4px;width:calc(100% - 8px);}
  .dropdown-item:hover{background:var(--bg);color:var(--text-primary);}
  .dropdown-item.danger{color:var(--rust);}
  .dropdown-item.danger:hover{background:#FCEBEB;}
  .dropdown-divider{height:1px;background:var(--border);margin:4px 0;}

  /* ── Profile page ── */
  .profile-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(26,20,16,.5);z-index:var(--z-overlay);align-items:center;justify-content:center;padding:16px;}
  .profile-overlay.visible{display:flex;}
  .profile-panel{background:var(--surface);border-radius:var(--r-2xl);max-width:580px;width:100%;box-shadow:0 24px 80px rgba(26,20,16,.3);max-height:min(92dvh,800px);overflow:hidden;display:flex;flex-direction:column;}
  .profile-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--surface);position:sticky;top:0;z-index:2;}
  .profile-avatar{width:56px;height:56px;border-radius:50%;background:var(--orange);color:var(--ink);font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .profile-header-info{flex:1;}
  .profile-name{font-family:'Crimson Pro',serif;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:3px;}
  .profile-email-small{font-size:12px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .profile-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 32px;transition:opacity .15s;}
  .profile-tab{padding:12px 20px;background:transparent;border:none;border-bottom:3px solid transparent;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--ink-light);cursor:pointer;transition:all .15s;margin-bottom:-1px;}
  .profile-tab.active{color:var(--brand);border-bottom-color:var(--brand);}
  .profile-body{padding:28px 32px;}
  .profile-section-title{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);margin-bottom:14px;margin-top:20px;}
  .profile-section-title:first-child{margin-top:0;}
  .profile-field{margin-bottom:16px;}
  .profile-field label{display:block;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-light);margin-bottom:7px;}
  .profile-input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);background:var(--cream);outline:none;transition:border-color .2s;}
  .profile-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-muted);}
  .btn-profile-save{padding:9px 20px;background:var(--brand);color:#fff;border:none;border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s;}
  .btn-profile-save:hover{background:var(--brand-hover);}
  .btn-profile-save:disabled{opacity:.5;cursor:default;}
  .profile-msg{font-size:13px;padding:8px 14px;border-radius:8px;margin-top:10px;display:none;}
  .profile-msg.ok{background:var(--forest-pale);color:var(--forest);display:block;}
  .profile-msg.err{background:#FCEBEB;color:var(--rust);display:block;}

  /* ── Activity section ── */
  .activity-book{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);align-items:center;}
  .activity-book:last-child{border-bottom:none;}
  .activity-cover{width:36px;height:50px;object-fit:cover;border-radius:4px;flex-shrink:0;box-shadow:1px 2px 6px rgba(26,20,16,.15);}
  .activity-cover-ph{width:36px;height:50px;border-radius:4px;flex-shrink:0;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:16px;}
  .activity-info{flex:1;min-width:0;}
  .activity-title{font-family:'Crimson Pro',serif;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .activity-meta{font-size:12px;color:var(--ink-muted);margin-top:2px;}
  .activity-date{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;flex-shrink:0;}
  .review-activity-item{padding:12px 0;border-bottom:1px solid var(--border);}
  .review-activity-item:last-child{border-bottom:none;}
  .review-activity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
  .review-activity-title{font-family:'Crimson Pro',serif;font-size:14px;font-weight:600;color:var(--ink);}
  .review-activity-stars{font-size:13px;}
  .review-activity-text{font-size:13px;color:var(--ink-muted);line-height:1.5;}
  .wishlist-profile-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);align-items:center;}
  .wishlist-profile-item:last-child{border-bottom:none;}
  .profile-empty{font-size:13px;color:var(--ink-light);font-style:italic;text-align:center;padding:20px 0;}
  .profile-close-btn{background:none;border:none;font-size:20px;color:var(--ink-light);cursor:pointer;padding:4px;line-height:1;transition:color .15s;}
  .profile-close-btn:hover{color:var(--ink);}

  /* ── Page system ── */
  .page{display:none;}
  .page.active{display:block;}
  .page-header{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
  .btn-back{display:flex;align-items:center;gap:6px;padding:8px 14px;background:transparent;border:1.5px solid var(--border);border-radius:20px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:all .15s;}
  .btn-back:hover{border-color:var(--ink);color:var(--ink);}

  /* ── Statistics page ── */
  .stats-header{margin-bottom:24px;}
  .stats-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
  .kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s;}
  .kpi-card:hover{box-shadow:var(--shadow-md);}
  .kpi-icon{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
  .kpi-value{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--text-primary);line-height:1;}
  .kpi-label{font-size:12px;color:var(--text-tertiary);font-weight:500;}
  .stats-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
  @media(max-width:700px){.stats-two-col{grid-template-columns:1fr;}.stats-kpi-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:400px){.stats-kpi-grid{grid-template-columns:repeat(2,1fr);}}
  .stats-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;}
  .stats-card-title{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
  /* Monthly chart */
  .monthly-chart{display:flex;flex-direction:column;gap:8px;}
  .month-row{display:flex;align-items:center;gap:10px;}
  .month-label{font-size:11px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;width:48px;flex-shrink:0;text-align:right;}
  .month-bar-wrap{flex:1;height:20px;background:var(--divider);border-radius:var(--r-full);overflow:hidden;}
  .month-bar{height:100%;background:var(--brand);border-radius:var(--r-full);transition:width .5s cubic-bezier(.4,0,.2,1);}
  .month-count{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-tertiary);width:20px;text-align:right;flex-shrink:0;}
  /* Rating distribution */
  .rating-dist{display:flex;flex-direction:column;gap:8px;}
  .rating-row{display:flex;align-items:center;gap:10px;}
  .rating-stars-label{font-size:12px;color:var(--brand);width:60px;flex-shrink:0;}
  .rating-bar-wrap{flex:1;height:18px;background:var(--divider);border-radius:var(--r-full);overflow:hidden;}
  .rating-bar{height:100%;background:var(--brand);border-radius:var(--r-full);transition:width .5s cubic-bezier(.4,0,.2,1);}
  .rating-count{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text-tertiary);width:20px;text-align:right;}
  /* Reading progress */
  .stat-progress-item{margin-bottom:14px;}
  .stat-progress-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
  .stat-progress-title{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;}
  .stat-progress-pct{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--brand);font-weight:600;}
  .stat-progress-bar{height:8px;background:var(--divider);border-radius:var(--r-full);overflow:hidden;}
  .stat-progress-fill{height:100%;background:linear-gradient(to right,var(--brand),var(--brand-hover));border-radius:var(--r-full);transition:width .5s ease;}
  /* Records */
  .record-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--divider);}
  .record-item:last-child{border-bottom:none;}
  .record-icon{font-size:20px;flex-shrink:0;}
  .record-label{font-size:12px;color:var(--text-tertiary);margin-bottom:1px;}
  .record-value{font-size:14px;font-weight:600;color:var(--text-primary);}
  /* Genres */
  .genres-wrap{display:flex;flex-wrap:wrap;gap:8px;}
  .genre-chip{padding:6px 14px;background:var(--divider);border-radius:var(--r-full);font-size:12px;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:6px;}
  .genre-chip-count{background:var(--brand);color:#fff;border-radius:var(--r-full);font-size:10px;font-weight:700;padding:1px 6px;font-family:'JetBrains Mono',monospace;}
  .stats-empty{text-align:center;padding:32px;color:var(--text-tertiary);font-size:13px;}

  /* ── Toast ── */
  .toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(28,28,30,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 11px 22px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 500;
    z-index: var(--z-toast);
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
    letter-spacing: .01em;
    max-width: calc(100vw - 32px);
    text-overflow: ellipsis;
    overflow: hidden;
    /* Hidden by default: invisible + tiny */
    opacity: 0;
    pointer-events: none;
    scale: 0.85;
    transition: opacity .2s ease, scale .2s ease;
  }
  .toast.show {
    opacity: 1;
    pointer-events: auto;
    scale: 1;
  }
  /* toast.show defined in .toast block above */
  .spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(245,240,232,.3);border-top-color:var(--cream);border-radius:50%;animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ── Reading tab ── */
  .tab-btn.tab-reading.active{color:#185FA5;border-bottom-color:#185FA5;}
  .tab-btn.tab-reading.active .tab-badge{background:#185FA5;}
  .reading-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
  .reading-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px;display:flex;gap:16px;align-items:flex-start;transition:box-shadow .2s;}
  .reading-card:hover{box-shadow:0 4px 20px rgba(26,20,16,.1);}
  .reading-cover{width:64px;height:90px;object-fit:cover;border-radius:6px;flex-shrink:0;box-shadow:2px 4px 12px rgba(26,20,16,.2);}
  .reading-cover-ph{width:64px;height:90px;border-radius:6px;flex-shrink:0;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:2px 4px 12px rgba(26,20,16,.1);}
  .reading-info{flex:1;min-width:0;}
  .reading-title{font-family:'Crimson Pro',serif;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.3;}
  .reading-author{font-size:12px;color:var(--ink-muted);margin-bottom:12px;}
  .progress-wrap{margin-bottom:10px;}
  .progress-bar-bg{height:8px;background:var(--cream-dark);border-radius:20px;overflow:hidden;margin-bottom:6px;}
  .progress-bar-fill{height:100%;border-radius:20px;background:linear-gradient(to right,var(--orange),var(--orange-light));transition:width .4s ease;}
  .progress-labels{display:flex;justify-content:space-between;align-items:center;}
  .progress-pct{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--orange);}
  .progress-pages{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;}
  .reading-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .page-input-wrap{display:flex;align-items:center;gap:6px;flex:1;}
  .page-input-label{font-size:11px;color:var(--ink-light);white-space:nowrap;}
  .page-input{width:70px;padding:7px 10px;border:1.5px solid var(--border);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink);background:var(--cream);outline:none;text-align:center;transition:border-color .2s;}
  .page-input:focus{border-color:#378ADD;}
  .btn-update-page{padding:7px 14px;background:var(--orange);color:#fff;border:none;border-radius:8px;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s;white-space:nowrap;}
  .btn-update-page:hover{background:var(--orange-light);}
  .btn-update-page:disabled{opacity:.5;cursor:default;}
  .btn-mark-done{padding:7px 14px;background:var(--success);color:#fff;border:none;border-radius:var(--r-md);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s;white-space:nowrap;}
  .btn-mark-done:hover{background:#1E4029;}
  .reading-empty{text-align:center;padding:80px 24px;}

  /* ── Suggestions ── */
  .tab-btn.tab-suggest.active{color:var(--amber);border-bottom-color:var(--amber);}
  .suggest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
  .suggest-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px;display:flex;gap:14px;align-items:flex-start;transition:box-shadow .2s,transform .15s;}
  .suggest-card:hover{box-shadow:0 4px 20px rgba(26,20,16,.1);transform:translateY(-2px);}
  .suggest-cover{width:56px;height:78px;object-fit:cover;border-radius:6px;flex-shrink:0;box-shadow:2px 2px 8px rgba(26,20,16,.15);}
  .suggest-cover-ph{width:56px;height:78px;border-radius:6px;flex-shrink:0;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:2px 2px 8px rgba(26,20,16,.1);}
  .suggest-info{flex:1;min-width:0;}
  .suggest-reason{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:5px;}
  .suggest-title{font-family:'Crimson Pro',serif;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .suggest-author{font-size:12px;color:var(--ink-muted);margin-bottom:8px;}
  .suggest-btns{display:flex;gap:6px;}
  .btn-suggest-read,.btn-suggest-wish{padding:5px 10px;border:none;border-radius:6px;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;cursor:pointer;transition:background .2s;}
  .btn-suggest-read{background:var(--amber);color:#fff;}
  .btn-suggest-read:hover:not(:disabled){background:#A06E10;}
  .btn-suggest-wish{background:var(--forest);color:#fff;}
  .btn-suggest-wish:hover:not(:disabled){background:#1E4029;}
  .btn-suggest-read:disabled,.btn-suggest-wish:disabled{background:#9B8E7E;cursor:default;}
  .suggest-loading{text-align:center;padding:60px 24px;color:var(--ink-muted);}
  .suggest-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px;}
  .suggest-empty{text-align:center;padding:80px 24px;}
  .suggest-year{font-size:11px;color:var(--ink-light);font-family:'JetBrains Mono',monospace;margin-bottom:6px;}
  .btn-refresh-suggest{display:flex;align-items:center;gap:6px;padding:8px 16px;background:transparent;border:1.5px solid var(--border);border-radius:20px;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--ink-muted);cursor:pointer;transition:all .2s;}
  .btn-refresh-suggest:hover{border-color:var(--ink);color:var(--ink);}
  .btn-refresh-suggest:disabled{opacity:.5;cursor:default;}

  /* ── Header nav (desktop) ── */
  .header-nav{display:none;}
  .nav-btn{padding:6px 14px;background:transparent;border:none;border-radius:20px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:rgba(245,240,232,.5);cursor:pointer;transition:all .2s;white-space:nowrap;letter-spacing:.01em;}
  .nav-btn:hover{background:rgba(255,255,255,.08);color:rgba(245,240,232,.9);}
  .nav-btn.active{background:rgba(255,255,255,.1);color:rgba(232,168,74,.95);box-shadow:inset 0 0 0 1px rgba(232,168,74,.2);}
  @media(max-width:900px){.header-nav{display:none;}}

  /* ── Bottom nav (mobile) ── */
  .bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);z-index:9999;padding:0 0 env(safe-area-inset-bottom,0);}
  .bottom-nav-inner{display:flex;align-items:stretch;}
  .bottom-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px 7px;background:transparent;border:none;cursor:pointer;color:var(--ink-light);transition:color .15s;min-width:0;}
  .bottom-nav-btn.active{color:var(--brand);}
  .bottom-nav-btn .bn-icon{font-size:19px;line-height:1;}
  .bottom-nav-btn .bn-label{font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .bottom-nav-btn .bn-badge{display:none;position:absolute;top:6px;right:calc(50% - 16px);background:var(--amber);color:#fff;font-size:9px;font-weight:700;border-radius:20px;padding:1px 5px;min-width:16px;text-align:center;}
  .bottom-nav-btn{position:relative;}
  .bottom-nav-btn .bn-badge.visible{display:block;}
  @media(max-width:900px){
    .sidebar{transform:translateX(-100%);}
    .content-area{margin-left:0;}
    .bottom-nav{display:block;}
    main{padding:16px;padding-bottom:calc(76px + env(safe-area-inset-bottom,0));}
    /* Mobile topbar: solo titolo + avatar, nascondi stats e nome */
    .topbar-stats-group{display:none;}
    .content-topbar{padding:0 14px;height:52px;}
    .topbar-user-name{display:none;}
    .topbar-user-btn{padding:4px;gap:0;border:none;background:transparent;}
    .topbar-user-btn:hover{background:var(--bg);}
    .topbar-avatar{width:30px;height:30px;font-size:13px;}
    .content-topbar-right{gap:4px;}
  }

  @media(max-width:600px){
    .search-row{flex-direction:column;}
    .books-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
    .header-stats{display:none;}
    .tab-btn{padding:10px 16px;font-size:13px;}
    .auth-card{padding:32px 24px;}
    .content-topbar-title{font-size:14px;}
    /* overridden */
  }

  /* ── Dark mode ── */
  [data-theme="dark"] {
    --bg:#111318; --surface:#1C1F26; --surface-raised:#242830;
    --text-primary:#F0F2F5; --text-secondary:#9AA3B0; --text-tertiary:#5E6675; --text-inverse:#0F1117;
    --brand:#F2701F; --brand-hover:#E8590C; --brand-pale:rgba(242,112,31,0.12); --brand-muted:rgba(242,112,31,0.15);
    --success:#22C55E; --success-pale:rgba(34,197,94,0.1);
    --danger:#EF4444; --danger-pale:rgba(239,68,68,0.1);
    --warning:#F59E0B; --warning-pale:rgba(245,158,11,0.1);
    --info:#3B82F6; --info-pale:rgba(59,130,246,0.1);
    --border:#2A2F3A; --divider:#1F2330;
    --shadow-xs:0 1px 2px rgba(0,0,0,.25);
    --shadow-sm:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
    --shadow-md:0 4px 6px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.25);
    --shadow-lg:0 10px 15px rgba(0,0,0,.4),0 4px 6px rgba(0,0,0,.25);
    --shadow-xl:0 20px 25px rgba(0,0,0,.5),0 8px 10px rgba(0,0,0,.3);
    --cream:var(--bg); --cream-dark:#242830; --card-bg:var(--surface); --sidebar-bg:var(--surface);
    --ink:var(--text-primary); --ink-muted:var(--text-secondary); --ink-light:var(--text-tertiary);
    --orange:var(--brand); --orange-light:var(--brand-hover); --orange-pale:var(--brand-pale);
    --green:var(--success); --green-pale:var(--success-pale);
    --rust:var(--danger); --forest:var(--success); --forest-pale:var(--success-pale);
    --amber:var(--brand); --amber-light:var(--brand-hover); --amber-pale:var(--brand-pale);
    --border-light:var(--divider);
  }
  [data-theme="dark"] body { background:var(--bg); color:var(--text-primary); }
  [data-theme="dark"] .sidebar { background:var(--surface); border-right-color:var(--border); }
  [data-theme="dark"] .content-topbar { background:var(--surface); border-bottom-color:var(--border); }
  [data-theme="dark"] .bottom-nav { background:var(--surface); border-top-color:var(--border); }
  [data-theme="dark"] .auth-card,
  [data-theme="dark"] .modal,
  [data-theme="dark"] .detail-panel,
  [data-theme="dark"] .preview-panel,
  [data-theme="dark"] .profile-panel { background:var(--surface) !important; }
  [data-theme="dark"] .modal-overlay,
  [data-theme="dark"] .detail-overlay,
  [data-theme="dark"] .preview-overlay,
  [data-theme="dark"] .profile-overlay { background:rgba(0,0,0,.7) !important; }
  [data-theme="dark"] .user-dropdown { background:var(--surface-raised); border-color:var(--border); }
  [data-theme="dark"] input,
  [data-theme="dark"] textarea,
  [data-theme="dark"] select { background:var(--surface-raised) !important; color:var(--text-primary) !important; border-color:var(--border) !important; }
  [data-theme="dark"] .result-card,
  [data-theme="dark"] .suggest-card,
  [data-theme="dark"] .reading-card,
  [data-theme="dark"] .kpi-card,
  [data-theme="dark"] .stats-card { background:var(--surface) !important; border-color:var(--border) !important; }
  [data-theme="dark"] .review-item,
  [data-theme="dark"] .quote-item,
  [data-theme="dark"] .write-review-section,
  [data-theme="dark"] .quote-add-form { background:var(--surface-raised) !important; border-color:var(--border) !important; }
  [data-theme="dark"] .progress-bar-bg,
  [data-theme="dark"] .month-bar-wrap,
  [data-theme="dark"] .rating-bar-wrap,
  [data-theme="dark"] .stat-progress-bar { background:var(--surface-raised) !important; }
  [data-theme="dark"] .shelf-btn { background:var(--surface-raised) !important; border-color:var(--border) !important; color:var(--text-secondary) !important; }
  [data-theme="dark"] .book-cover-placeholder { background:var(--surface-raised) !important; }
  [data-theme="dark"] .notes-display { background:var(--brand-pale) !important; }
  [data-theme="dark"] .genre-chip { background:var(--surface-raised) !important; }
  [data-theme="dark"] .dropdown-item:hover { background:var(--surface-raised) !important; }
  [data-theme="dark"] .sidebar-item:hover { background:var(--surface-raised) !important; }
  [data-theme="dark"] .filter-btn { background:var(--surface) !important; border-color:var(--border) !important; }
  [data-theme="dark"] .sort-select { background:var(--surface) !important; }
  [data-theme="dark"] .view-btn { background:transparent; border-color:var(--border); color:var(--text-secondary); }
  [data-theme="dark"] .auth-tabs { background:var(--surface-raised); border-color:var(--border); }
  [data-theme="dark"] .auth-tab.active { background:var(--surface); color:var(--text-primary); }
  [data-theme="dark"] .preview-hero-blur { filter:blur(24px) brightness(.3); }
  [data-theme="dark"] .books-list { background:var(--surface); }
  [data-theme="dark"] .book-list-item { border-bottom-color:var(--border); }
  [data-theme="dark"] .book-list-item:hover { background:var(--surface-raised); }

  /* smooth transition */
  body, .sidebar, .content-topbar, .bottom-nav, .modal, .auth-card,
  .detail-panel, .preview-panel, .kpi-card, .stats-card { transition:background-color .2s, border-color .2s, color .15s; }

  /* ── Theme toggle button ── */
  .theme-toggle { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-md); border:1px solid var(--border); background:transparent; cursor:pointer; color:var(--text-secondary); transition:all .15s; flex-shrink:0; }
  .theme-toggle:hover { background:var(--divider); color:var(--text-primary); }
  .theme-toggle svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

  /* ── Mobile hamburger menu ── */
  .mobile-menu-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-md); border:1px solid var(--border); background:transparent; cursor:pointer; color:var(--text-secondary); transition:all .15s; flex-shrink:0; }
  .mobile-menu-btn:hover { background:var(--divider); color:var(--text-primary); }
  .mobile-menu-btn svg { width:18px; height:18px; }
  .mobile-drawer { position:fixed; inset:0; z-index:10000; display:none; }
  .mobile-drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:10000; }
  .mobile-drawer-panel {
    position: absolute; top: 0; left: 0;
    width: 280px; height: 100%;
    background: #FFFFFF;
    display: flex; flex-direction: column;
    animation: slideInLeft .25s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    z-index: 10001;
    /* Safe area: push content below status bar on Android/iOS */
    padding-top: env(safe-area-inset-top, 0px);
  }
  [data-theme="dark"] .mobile-drawer-panel { background: #1C1F26; }
  [data-theme="dark"] .mobile-drawer-panel { background:#1C1F26; }
  @keyframes slideInLeft { from{} to{transform:translateX(0)} }
  .mobile-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 16px; border-bottom:1px solid #E5E7EB; }
  [data-theme="dark"] .mobile-drawer-header { border-bottom-color:#2A2F3A; }
  .mobile-drawer-logo { font-family:'Crimson Pro',serif; font-size:20px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
  .mobile-drawer-logo-icon { width:28px; height:28px; background:var(--brand); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:14px; }
  .mobile-drawer-close { width:32px; height:32px; border:none; background:transparent; border-radius:var(--r-md); cursor:pointer; color:var(--text-tertiary); font-size:18px; display:flex; align-items:center; justify-content:center; }
  .mobile-drawer-close:hover { background:var(--divider); color:var(--text-primary); }
  .mobile-drawer-nav { flex:1; padding:8px; overflow-y:auto; }
  .mobile-drawer-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md); font-size:15px; font-weight:500; color:#374151; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; margin-bottom:2px; transition:all .15s; }
  [data-theme="dark"] .mobile-drawer-item { color:#D1D5DB; }
  .mobile-drawer-item:hover { background:var(--bg); color:var(--text-primary); }
  .mobile-drawer-item .mi-icon { font-size:18px; width:24px; text-align:center; flex-shrink:0; }
  .mobile-drawer-footer { padding:12px; border-top:1px solid #E5E7EB; background:#F9FAFB; border-radius:0 0 0 0; }
  [data-theme="dark"] .mobile-drawer-footer { border-top-color:#2A2F3A; background:#1C1F26; }
  .mobile-drawer-theme { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:8px; background:#F3F4F6; cursor:pointer; border:none; width:100%; text-align:left; }
  [data-theme="dark"] .mobile-drawer-theme { background:#242830; }
  .mobile-drawer-theme-label { font-size:14px; font-weight:500; color:#374151; display:flex; align-items:center; gap:10px; }
  [data-theme="dark"] .mobile-drawer-theme-label { color:#D1D5DB; }
  .mobile-drawer-theme-toggle { width:36px; height:20px; border-radius:var(--r-full); background:var(--border); position:relative; transition:background .2s; flex-shrink:0; }
  .mobile-drawer-theme-toggle.on { background:var(--brand); }
  .mobile-drawer-theme-toggle::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:var(--shadow-sm); }
  .mobile-drawer-theme-toggle.on::after { transform:translateX(16px); }
  [data-theme="dark"] .mobile-drawer-panel { background:var(--surface); }
  [data-theme="dark"] .mobile-drawer-item:hover { background:var(--surface-raised); }
  @media(min-width:901px) { .mobile-menu-btn { display:none; } }


  /* ═══════════════════════════════════════════════════════
     MYREADS — iOS-inspired Design System
     Inspired by BookTrack reference UI
  ═══════════════════════════════════════════════════════ */

  /* ── Override root variables to match iOS aesthetic ── */
  :root {
    --bg: #F2F2F7;
    --surface: #FFFFFF;
    --surface-raised: #F2F2F7;
    --text-primary: #1A1A1A;
    --text-secondary: #6C6C70;
    --text-tertiary: #AEAEB2;
    --border: #E5E5EA;
    --divider: #F2F2F7;
    --brand: #F8A732;
    --brand-hover: #E8950A;
    --brand-pale: rgba(248,167,50,0.12);
    --brand-muted: rgba(248,167,50,0.2);
    --accent-blue: #1D7AFC;
    --accent-green: #34C759;
    --accent-red: #FF3B30;
    --accent-yellow: #F8D568;
    --accent-orange: #F8A732;
    --success: #34C759;
    --success-pale: rgba(52,199,89,0.12);
    --danger: #FF3B30;
    --danger-pale: rgba(255,59,48,0.12);
    --info: #1D7AFC;
    --info-pale: rgba(29,122,252,0.12);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
    --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-2xl:22px; --r-full:9999px;
    --sidebar-w: 240px;
    /* legacy */
    --cream:#F2F2F7; --cream-dark:#E5E5EA; --card-bg:#FFFFFF; --sidebar-bg:#FFFFFF;
    --ink:#1A1A1A; --ink-muted:#6C6C70; --ink-light:#AEAEB2;
    --orange:var(--brand); --orange-light:var(--brand-hover); --orange-pale:var(--brand-pale);
    --amber:var(--brand); --amber-light:var(--brand-hover); --amber-pale:var(--brand-pale);
    --green:var(--accent-green); --green-pale:var(--success-pale);
    --rust:var(--danger); --forest:var(--accent-green); --forest-pale:var(--success-pale);
    --border-light:var(--divider);
    --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --radius-xl:var(--r-xl);
  }

  [data-theme="dark"] {
    --bg: #000000;
    --surface: #1C1C1E;
    --surface-raised: #2C2C2E;
    --text-primary: #FFFFFF;
    --text-secondary: #AEAEB2;
    --text-tertiary: #6C6C70;
    --border: #38383A;
    --divider: #1C1C1E;
    --brand: #F8A732;
    --brand-pale: rgba(248,167,50,0.15);
    --brand-muted: rgba(248,167,50,0.2);
    --success-pale: rgba(52,199,89,0.15);
    --danger-pale: rgba(255,59,48,0.15);
    --info-pale: rgba(29,122,252,0.15);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
    --cream:#000000; --cream-dark:#2C2C2E; --card-bg:#1C1C1E; --sidebar-bg:#1C1C1E;
    --ink:#FFFFFF; --ink-muted:#AEAEB2; --ink-light:#6C6C70;
  }

  /* ── Smooth dark transitions ── */
  body, .sidebar, .content-topbar, .bottom-nav, .surface,
  .kpi-card, .stats-card, .book-list-item, .result-card { transition:background-color .2s, color .15s, border-color .2s; }

  /* ── body ── */
  body { background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Display',sans-serif; }

  /* ── Sidebar iOS style ── */
  .sidebar { background:var(--surface); border-right:1px solid var(--border); }
  .sidebar-logo { padding:24px 20px 18px; border-bottom:none; }
  .sidebar-logo-icon { background:var(--brand); border-radius:10px; }
  .sidebar-logo-text { font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; font-size:18px; font-weight:700; letter-spacing:-.02em; }
  .sidebar-section-label { font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--text-tertiary); padding:16px 12px 6px; }
  .sidebar-item { padding:9px 12px; border-radius:var(--r-md); font-size:14px; gap:10px; }
  .sidebar-item.active { background:var(--brand-pale); color:var(--brand); }
  .sidebar-item .si-badge { background:var(--brand); border-radius:var(--r-full); font-size:11px; padding:2px 8px; }
  .sidebar-item .si-badge.green { background:var(--accent-green); }

  /* ── Topbar iOS style ── */
  .content-topbar { background:var(--surface); border-bottom:1px solid var(--border); height:52px; }
  .content-topbar-title { font-size:16px; font-weight:700; letter-spacing:-.02em; }

  /* ── Main content area ── */
  main { padding:20px; background:var(--bg); }

  /* ── Book list items — iOS style ── */
  .books-list { display:flex; flex-direction:column; gap:0; background:var(--surface); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-sm); }
  .book-list-item { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; border-radius:0; margin:0; background:var(--surface); }
  .book-list-item:last-child { border-bottom:none; }
  .book-list-item:hover { background:var(--surface-raised); }
  .book-list-cover { width:52px; height:72px; object-fit:cover; border-radius:6px; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.15); }
  .book-list-cover-ph { width:52px; height:72px; border-radius:6px; flex-shrink:0; background:var(--brand-pale); display:flex; align-items:center; justify-content:center; font-size:22px; }
  .book-list-info { flex:1; min-width:0; }
  .book-list-title { font-size:15px; font-weight:600; color:var(--text-primary); line-height:1.3; margin-bottom:3px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .book-list-author { font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
  .book-list-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; max-width:none; justify-content:flex-start; margin-top:0; }
  .book-list-date { font-size:11px; color:var(--text-tertiary); font-family:'JetBrains Mono',monospace; }
  .book-list-date-reading { font-size:11px; color:var(--brand); font-family:'JetBrains Mono',monospace; font-weight:500; }
  .book-list-rating { font-size:12px; }
  .book-list-year { display:none; } /* hide pub year */
  .book-list-delete { width:28px; height:28px; border-radius:50%; background:var(--danger-pale); color:var(--danger); border:none; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
  .book-list-item:hover .book-list-delete { display:flex; }

  /* ── Genre/tag badges iOS style ── */
  .book-list-wish { font-size:11px; font-weight:600; background:var(--info-pale); color:var(--accent-blue); padding:3px 10px; border-radius:var(--r-full); }

  /* ── Completion checkmark ── */
  .book-list-check { width:22px; height:22px; border-radius:50%; background:var(--accent-green); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:4px; }
  .book-list-check svg { width:12px; height:12px; stroke:#fff; stroke-width:2.5; fill:none; }

  /* ── Book grid cards ── */
  .books-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
  .book-card { cursor:pointer; animation:fadeIn .35s ease; }
  .book-cover-wrap { position:relative; aspect-ratio:2/3; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.15); transition:transform .25s, box-shadow .25s; margin-bottom:8px; }
  .book-card:hover .book-cover-wrap { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
  .book-info .book-title { font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.3; margin-bottom:2px; letter-spacing:-.01em; }
  .book-info .book-author { font-size:11.5px; color:var(--text-secondary); }
  .book-date-reading { font-size:10px; color:var(--brand); font-family:'JetBrains Mono',monospace; margin-top:2px; }
  .book-rating { position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); border-radius:var(--r-full); padding:2px 8px; font-size:11px; color:#fff; }

  /* ── Shelf header ── */
  .shelf-header { margin-bottom:14px; }
  .shelf-title { font-size:22px; font-weight:700; color:var(--text-primary); letter-spacing:-.03em; }
  .filter-btn { border-radius:var(--r-full); font-size:12px; padding:5px 14px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); font-weight:500; }
  .filter-btn.active { background:var(--brand); color:#fff; border-color:var(--brand); }
  .sort-select { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full); font-size:12px; padding:5px 12px; color:var(--text-secondary); }

  /* ── Search section ── */
  .search-section { background:var(--surface); border:none; border-radius:var(--r-xl); padding:18px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
  .search-input { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-full); padding:10px 36px 10px 16px; font-size:15px; color:var(--text-primary); }
  .search-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-muted); }
  .search-input::placeholder { color:var(--text-tertiary); }
  .btn-search { background:var(--brand); border-radius:var(--r-full); padding:10px 20px; font-size:14px; font-weight:600; }
  .btn-search:hover { background:var(--brand-hover); }

  /* ── Result cards ── */
  .result-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; transition:box-shadow .15s; }
  .result-card:hover { box-shadow:var(--shadow-md); border-color:var(--brand); }
  .result-title { font-size:14px; font-weight:600; color:var(--text-primary); }
  .result-author { font-size:12px; color:var(--text-secondary); }

  /* ── Modal — iOS sheet style ── */
  .modal { background:var(--surface); border-radius:var(--r-2xl); padding:24px; }
  .modal-book-title { font-size:16px; font-weight:700; color:var(--text-primary); }
  .shelf-btn { border-radius:var(--r-lg); border:1.5px solid var(--border); background:var(--surface-raised); }
  .shelf-btn.sel-read { border-color:var(--brand); background:var(--brand-pale); color:var(--brand); }
  .shelf-btn.sel-wish { border-color:var(--accent-green); background:var(--success-pale); color:var(--accent-green); }
  .btn-confirm { background:var(--brand); border-radius:var(--r-full); font-weight:600; }
  .btn-confirm:hover:not(:disabled) { background:var(--brand-hover); }
  .btn-cancel { border-radius:var(--r-full); border:1px solid var(--border); }
  .btn-auth { background:var(--brand); border-radius:var(--r-full); font-weight:600; }
  .btn-auth:hover { background:var(--brand-hover); }

  /* ── Auth card ── */
  .auth-card { border-radius:var(--r-2xl); border:none; box-shadow:var(--shadow-lg); }
  .auth-tabs { background:var(--bg); border-radius:var(--r-xl); border:none; }
  .auth-tab.active { background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }
  .auth-field input { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); }
  .auth-field input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-muted); }

  /* ── Detail panel — premium iOS style ── */
  
  .detail-title { font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:-.02em; }
  .detail-author { font-size:14px; color:var(--text-secondary); }
  .detail-shelf-tag { border-radius:var(--r-full); font-size:11px; font-weight:600; }
  .detail-shelf-tag.read { background:var(--brand-pale); color:var(--brand); }
  .detail-shelf-tag.wish { background:var(--success-pale); color:var(--accent-green); }
  .btn-close-d { border-radius:var(--r-full); font-size:13px; padding:10px 16px; }
  .btn-mark-read { background:var(--brand); border-radius:var(--r-full); font-size:13px; padding:10px 16px; }
  .btn-start-reading { background:var(--accent-blue); border-radius:var(--r-full); font-size:13px; padding:10px 16px; }
  .btn-del { border-radius:var(--r-full); font-size:13px; padding:10px 16px; }
  .notes-display { background:var(--brand-pale); border-left:3px solid var(--brand); border-radius:0 var(--r-md) var(--r-md) 0; }
  .detail-rating-section { border-top:1px solid var(--divider); }

  /* ── KPI stats cards ── */
  .kpi-card { background:var(--surface); border:none; border-radius:var(--r-xl); box-shadow:var(--shadow-sm); padding:18px; }
  .kpi-value { font-size:28px; font-weight:700; color:var(--text-primary); letter-spacing:-.03em; }
  .kpi-label { font-size:12px; color:var(--text-secondary); font-weight:500; }
  .stats-card { background:var(--surface); border:none; border-radius:var(--r-xl); box-shadow:var(--shadow-sm); padding:20px; }
  .stats-card-title { font-size:12px; font-weight:600; color:var(--text-secondary); letter-spacing:.05em; }
  .month-bar { background:var(--accent-yellow); border-radius:var(--r-full); }
  .rating-bar { background:var(--brand); border-radius:var(--r-full); }
  .stat-progress-fill { background:var(--brand); }
  .genre-chip { background:var(--info-pale); color:var(--accent-blue); border-radius:var(--r-full); font-weight:600; border:none; padding:5px 12px; }
  .genre-chip-count { background:var(--accent-blue); }

  /* ── Reading progress cards ── */
  .reading-card { background:var(--surface); border:none; border-radius:var(--r-xl); box-shadow:var(--shadow-sm); }
  .progress-bar-fill { background:linear-gradient(to right,var(--brand),var(--brand-hover)); border-radius:var(--r-full); }
  .progress-pct { color:var(--brand); font-weight:600; }
  .btn-update-page { background:var(--brand); border-radius:var(--r-full); }
  .btn-mark-done { background:var(--accent-green); border-radius:var(--r-full); }

  /* ── Suggest cards ── */
  .suggest-card { background:var(--surface); border:none; border-radius:var(--r-xl); box-shadow:var(--shadow-sm); }
  .suggest-reason { color:var(--brand); }
  .btn-suggest-read { background:var(--brand); border-radius:var(--r-full); font-size:11px; }
  .btn-suggest-wish { background:var(--accent-green); border-radius:var(--r-full); font-size:11px; }
  .btn-refresh-suggest { border-radius:var(--r-full); border:1.5px solid var(--border); }

  /* ── Toast ── */
  /* toast style consolidated above */

  /* ── Bottom nav iOS style ── */
  .bottom-nav { background:rgba(255,255,255,0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); }
  [data-theme="dark"] .bottom-nav { background:rgba(28,28,30,0.92); }
  .bottom-nav-btn { color:var(--text-tertiary); }
  .bottom-nav-btn.active { color:var(--brand); }
  .bn-badge { background:var(--accent-red); }

  /* ── Mobile drawer ── */
  .mobile-drawer-panel { background:var(--surface); }
  .mobile-drawer-item { color:var(--text-secondary); font-size:15px; }
  .mobile-drawer-item:hover { background:var(--bg); color:var(--text-primary); }

  /* ── User dropdown ── */
  .user-dropdown { background:var(--surface); border-radius:var(--r-xl); border:1px solid var(--border); }
  .dropdown-item:hover { background:var(--bg); }

  /* ── Profile panel ── */
  .profile-panel { background:var(--surface); border-radius:var(--r-2xl); }
  .profile-avatar { background:var(--brand); }
  .profile-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
  .btn-profile-save { background:var(--brand); border-radius:var(--r-full); }

  /* ── Preview panel ── */
  .preview-panel { background:var(--surface); border-radius:var(--r-2xl); }
  .btn-preview-read { background:var(--brand); border-radius:var(--r-full); }
  .btn-preview-wish { background:var(--accent-green); border-radius:var(--r-full); }

  /* ── Topbar theme toggle ── */
  .theme-toggle { border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); border-radius:var(--r-full); }
  .theme-toggle:hover { background:var(--bg); }

  /* ── View toggle buttons ── */
  .view-btn { border:1px solid var(--border); background:var(--surface); color:var(--text-tertiary); border-radius:var(--r-sm); }
  .view-btn.active { background:var(--brand); border-color:var(--brand); color:#fff; }

  /* ── iOS-style book list checkmark for read books ── */
  .book-check-wrap { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--accent-green); flex-shrink:0; }
  .book-check-wrap svg { width:13px; height:13px; stroke:#fff; stroke-width:2.5; fill:none; }

  /* ── Quotes ── */
  .btn-add-quote { color:var(--brand); }
  .btn-save-quote { background:var(--brand); border-radius:var(--r-full); }
  .quote-item { border-left:3px solid var(--brand); border-radius:0 var(--r-md) var(--r-md) 0; }

  /* ── Reviews ── */
  .btn-submit-review { background:var(--brand); border-radius:var(--r-full); }
  .profile-tab.active { color:var(--brand); border-bottom-color:var(--brand); }

  /* ── Load more ── */
  .btn-load-more { border-radius:var(--r-full); border:1.5px solid var(--border); }

  /* ── Sidebar item badges ── */
  .sidebar-item.active { background:var(--brand-pale); color:var(--brand); }

  /* ── Search clear button ── */
  .search-clear { background:var(--text-tertiary); border-radius:50%; }
  .search-clear:hover { background:var(--text-secondary); }

  /* ── Dark mode specifics ── */
  [data-theme="dark"] .books-list { background:var(--surface); }
  [data-theme="dark"] .book-list-item { background:var(--surface); border-bottom-color:var(--border); }
  [data-theme="dark"] .book-list-item:hover { background:var(--surface-raised); }
  [data-theme="dark"] .search-section { background:var(--surface); }
  [data-theme="dark"] .search-input { background:var(--surface-raised); }
  [data-theme="dark"] .result-card { background:var(--surface); border-color:var(--border); }
  [data-theme="dark"] .suggest-card { background:var(--surface); }
  [data-theme="dark"] .kpi-card { background:var(--surface); }
  [data-theme="dark"] .stats-card { background:var(--surface); }
  [data-theme="dark"] .reading-card { background:var(--surface); }
  [data-theme="dark"] .modal { background:var(--surface); }
  [data-theme="dark"] 
  [data-theme="dark"] .preview-panel { background:var(--surface); }
  [data-theme="dark"] .profile-panel { background:var(--surface); }
  [data-theme="dark"] .user-dropdown { background:var(--surface-raised); }
  [data-theme="dark"] .shelf-btn { background:var(--surface-raised); border-color:var(--border); }
  [data-theme="dark"] .filter-btn { background:var(--surface); border-color:var(--border); }
  [data-theme="dark"] .sort-select { background:var(--surface); }
  [data-theme="dark"] .auth-card { background:var(--surface); }
  [data-theme="dark"] .auth-tabs { background:var(--surface-raised); }
  [data-theme="dark"] .mobile-drawer-panel { background:var(--surface); }
  [data-theme="dark"] .mobile-drawer-footer { background:var(--surface); border-color:var(--border); }
  [data-theme="dark"] .mobile-drawer-theme { background:var(--surface-raised); }
  [data-theme="dark"] .book-cover-placeholder { background:var(--surface-raised); }
  [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
    background:var(--surface-raised) !important; color:var(--text-primary) !important; border-color:var(--border) !important;
  }


  /* ══ Homepage & Goals — Design System Aligned ══ */

  /* Numbers font */
  .kpi-value, .home-stat-num, .goal-current,
  #home-stat-read,#home-stat-wish,#home-stat-reading,#home-stat-pages,
  #stat-read,#stat-wish,#stat-avg { font-family:'DM Mono',monospace; letter-spacing:-.02em; }

  /* ── Greeting ── */
  .home-greeting { font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:-.02em; margin-bottom:3px; }
  .home-greeting span { color:var(--brand); }
  .home-subtitle { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }

  /* ── Stat cards ── */
  .home-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
  @media(min-width:600px){ .home-stat-grid { grid-template-columns:repeat(4,1fr); } }
  .home-stat-card { background:var(--surface); border-radius:var(--r-xl); padding:16px 14px; cursor:pointer; box-shadow:var(--shadow-sm); border:1px solid var(--border); transition:transform .15s,box-shadow .15s; }
  .home-stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .home-stat-accent { width:32px; height:32px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px; }
  .home-stat-accent.orange { background:var(--brand-pale); }
  .home-stat-accent.green  { background:var(--success-pale); }
  .home-stat-accent.blue   { background:var(--info-pale); }
  .home-stat-accent.purple { background:rgba(147,51,234,.1); }
  .home-stat-num  { font-family:'DM Mono',monospace; font-size:26px; font-weight:600; color:var(--text-primary); line-height:1; margin-bottom:4px; letter-spacing:-.03em; }
  .home-stat-label { font-size:11px; color:var(--text-secondary); font-weight:500; }

  /* ── Home widgets ── */
  /* home-widgets: flex column on mobile, row on desktop */
  .home-widgets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
  }
  /* "In lettura" always first (order:1), "Ultime" always second (order:2) */
  .home-widget-reading { order: 1; }
  .home-widget-recent  { order: 2; }
  @media(min-width:700px){
    .home-widgets { flex-direction: row; }
    .home-widget-reading, .home-widget-recent { flex:1; }
  }
  .home-widget { background:var(--surface); border-radius:var(--r-xl); padding:16px; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
  .home-widget-title { font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
  .home-widget-link { font-size:11px; color:var(--brand); font-weight:600; cursor:pointer; border:none; background:none; padding:0; text-transform:none; letter-spacing:0; }
  .recent-book-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--divider); cursor:pointer; transition:opacity .12s; }
  .recent-book-row:hover { opacity:.75; }
  .recent-book-row:last-child { border-bottom:none; padding-bottom:0; }
  .recent-book-cover { width:34px; height:48px; object-fit:cover; border-radius:var(--r-sm); flex-shrink:0; box-shadow:var(--shadow-xs); }
  .recent-book-cover-ph { width:34px; height:48px; border-radius:var(--r-sm); flex-shrink:0; background:var(--brand-pale); display:flex; align-items:center; justify-content:center; font-size:14px; }
  .recent-book-info { flex:1; min-width:0; }
  .recent-book-title { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .recent-book-author { font-size:11px; color:var(--text-secondary); margin-top:1px; }
  .recent-book-date { font-size:10px; color:var(--text-tertiary); font-family:'DM Mono',monospace; flex-shrink:0; }

  /* ── Goals page ── */
  .goals-page-title { font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:-.02em; margin-bottom:3px; }
  .goals-page-sub { font-size:13px; color:var(--text-secondary); margin-bottom:18px; }
  .goal-card { background:var(--surface); border-radius:var(--r-xl); padding:18px; box-shadow:var(--shadow-sm); border:1px solid var(--border); margin-bottom:10px; }
  .goal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .goal-label-wrap { display:flex; align-items:center; gap:10px; }
  .goal-icon { width:32px; height:32px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
  .goal-icon.orange { background:var(--brand-pale); }
  .goal-icon.green  { background:var(--success-pale); }
  .goal-icon.blue   { background:var(--info-pale); }
  .goal-icon.purple { background:rgba(147,51,234,.1); }
  .goal-title { font-size:14px; font-weight:600; color:var(--text-primary); }
  .goal-edit-btn { font-size:11px; color:var(--brand); font-weight:600; border:none; background:var(--brand-pale); cursor:pointer; padding:4px 12px; border-radius:var(--r-full); transition:background .15s; }
  .goal-edit-btn:hover { background:var(--brand-muted); }
  .goal-numbers-row { display:flex; align-items:baseline; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
  .goal-current { font-family:'DM Mono',monospace; font-size:28px; font-weight:600; color:var(--text-primary); line-height:1; letter-spacing:-.03em; }
  .goal-of { font-size:13px; color:var(--text-tertiary); margin:0 2px; }
  .goal-target { font-family:'DM Mono',monospace; font-size:13px; color:var(--text-secondary); font-weight:500; }
  .goal-unit { font-size:12px; color:var(--text-tertiary); margin-left:2px; }
  .goal-pct-badge { margin-left:auto; font-family:'DM Mono',monospace; font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-full); flex-shrink:0; }
  .goal-pct-badge.orange { background:var(--brand-pale); color:var(--brand); }
  .goal-pct-badge.green  { background:var(--success-pale); color:var(--accent-green); }
  .goal-pct-badge.blue   { background:var(--info-pale); color:var(--accent-blue); }
  .goal-pct-badge.purple { background:rgba(147,51,234,.1); color:#9333EA; }
  .goal-bar-bg, .goal-bar {
    height: 8px;
    background: var(--divider);
    border-radius: var(--r-full);
    overflow: hidden;
    margin: 6px 0 4px;
  }
  .goal-bar-fill { height:100%; border-radius:var(--r-full); transition:width .6s cubic-bezier(.4,0,.2,1); }
  .goal-bar-fill.orange { background:var(--brand); }
  .goal-bar-fill.green  { background:var(--accent-green); }
  .goal-bar-fill.blue   { background:var(--accent-blue); }
  .goal-bar-fill.purple { background:#9333EA; }
  .goal-hint { font-size:11px; color:var(--text-tertiary); margin-top:6px; }
  .goal-edit-form { display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--divider); }
  .goal-edit-form.open { display:block; }
  .goal-edit-label { font-size:12px; color:var(--text-secondary); margin-bottom:8px; }
  .goal-edit-row { display:flex; gap:8px; align-items:center; }
  .goal-input { flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--r-md); font-family:'DM Mono',monospace; font-size:15px; font-weight:600; color:var(--text-primary); background:var(--bg); outline:none; transition:border-color .15s,box-shadow .15s; }
  .goal-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-muted); }
  .goal-save-btn { padding:10px 20px; background:var(--brand); color:#fff; border:none; border-radius:var(--r-full); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; white-space:nowrap; font-family:'Inter',sans-serif; }
  .goal-save-btn:hover { background:var(--brand-hover); }

  /* Goals home preview */
  .home-goals-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .home-goals-row:last-child { margin-bottom:0; }
  .home-goals-label { font-size:13px; color:var(--text-secondary); flex:1; }
  .home-goals-val { font-family:'DM Mono',monospace; font-size:12px; font-weight:600; color:var(--text-primary); white-space:nowrap; }
  .home-goals-mini { height:4px; background:var(--divider); border-radius:var(--r-full); overflow:hidden; margin-top:3px; }
  .home-goals-mini-fill { height:100%; border-radius:var(--r-full); transition:width .5s ease; }

  /* Dark mode for new elements */
  [data-theme="dark"] .home-stat-card,
  [data-theme="dark"] .home-widget,
  [data-theme="dark"] .goal-card { background:var(--surface); border-color:var(--border); }


  /* ══════════════════════════════════════════════════════
     MOBILE SAFE AREA & LAYOUT FIXES
     Covers: status bar, bottom nav overlap, panels, APK
  ══════════════════════════════════════════════════════ */

  /* ── Safe area CSS variables ── */
  :root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --topbar-h: 52px;
    --bottomnav-h: 60px;
  }

  /* ── Status bar fix: topbar must start BELOW status bar ── */
  .content-topbar {
    padding-top: var(--sat);
    height: calc(var(--topbar-h) + var(--sat));
  }

  /* ── Bottom nav: account for home indicator on modern Android/iOS ── */
  .bottom-nav {
    padding-bottom: max(var(--sab), 8px);
    height: calc(var(--bottomnav-h) + var(--sab));
  }
  .bottom-nav-inner {
    height: var(--bottomnav-h);
  }

  /* ── Main content: pad for topbar + status bar + bottom nav ── */
  @media(max-width:900px) {
    .content-area { padding-top: 0; }
    main {
      padding: 16px;
      padding-top: 20px;
      padding-bottom: calc(var(--bottomnav-h) + var(--sab) + 20px);
      padding-left: max(16px, calc(16px + var(--sal)));
      padding-right: max(16px, calc(16px + var(--sar)));
    }
    /* Topbar: compact but below status bar */
    .content-topbar {
      padding-left: max(14px, calc(14px + var(--sal)));
      padding-right: max(14px, calc(14px + var(--sar)));
    }
  }

  /* ── Detail panel: never hidden behind bottom nav ── */
  
  
  /* Detail actions always visible — add explicit bottom space */
  

  /* ── Modal: safe area bottom ── */
  .modal {
    padding-bottom: max(24px, calc(20px + var(--sab)));
  }

  /* ── Preview panel: safe area bottom ── */
  .preview-panel {
    padding-bottom: max(20px, calc(16px + var(--sab)));
  }

  /* ── Profile panel: safe area ── */
  .profile-panel {
    padding-bottom: max(20px, calc(16px + var(--sab)));
  }

  /* ── Mobile: panel as bottom sheet with proper clearance ── */
  @media(max-width:600px) {
    
    
    
    
    .modal {
      border-radius: 20px 20px 0 0 !important;
      padding: 20px 20px max(24px, calc(16px + var(--sab))) !important;
      max-width: 100vw !important;
      width: 100vw !important;
      max-height: calc(92vh - var(--sat)) !important;
      overflow-y: auto !important;
    }
    
    .preview-panel {
      border-radius: 20px 20px 0 0 !important;
      max-height: calc(95vh - var(--sat)) !important;
      width: 100vw !important;
      padding-bottom: max(20px, calc(12px + var(--sab))) !important;
    }
    /* Buttons: thumb-friendly minimum size */
    .btn-close-d, .btn-del { min-height: 44px !important; min-width: 64px !important; padding: 10px 8px !important; font-size: 13px !important; }
    .btn-mark-read, .btn-start-reading { min-height: 44px !important; min-width: 88px !important; padding: 10px 8px !important; font-size: 13px !important; }
    .goal-save-btn, .btn-search, .btn-auth, .btn-confirm { min-height: 44px !important; }
    /* Stat cards: 2 columns always on small screens */
    .home-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    /* Book list items: larger tap area */
    .book-list-item { min-height: 72px; }
    /* Bottom nav buttons: larger tap area */
    .bottom-nav-btn { min-height: var(--bottomnav-h); padding-bottom: 4px; }
  }

  /* ── Capacitor/WebView specific fixes ── */
  /* Prevent content from going under status bar in WebView */
  @supports (padding-top: env(safe-area-inset-top)) {
    .content-topbar {
      padding-top: env(safe-area-inset-top, 0px);
      height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    }
    .bottom-nav {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    @media(max-width:900px) {
      main {
        padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 20px);
      }
    }
  }

  /* ── Prevent horizontal scroll on mobile ── */
  @media(max-width:900px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .app-layout { overflow-x: hidden; }
    main { overflow-x: hidden; }
    .books-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .stats-two-col { grid-template-columns: 1fr; }
    .stats-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .reading-grid { grid-template-columns: 1fr; }
    .home-widgets { flex-direction: column; }
    .suggest-grid { grid-template-columns: 1fr; }
  }
  @media(max-width:400px) {
    .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .shelf-controls { flex-wrap: wrap; gap: 6px; }
  }


  /* ══ DEFINITIVE DETAIL PANEL FIX ══ */

  /* Overlay: always full screen, flex center */
  
  

  /* Panel: flex column so actions always stay at bottom */
  

  /* On larger screens: centered card style */
  @media(min-width:601px) {
    
    
  }

  /* Drag handle on mobile */
  .detail-panel::before {
    content:'';
    display:block;
    width:36px; height:4px;
    background:var(--border);
    border-radius:2px;
    margin:12px auto 4px;
    flex-shrink:0;
  }
  @media(min-width:601px){ .detail-panel::before { display:none; } }

  /* Scroll area: takes all remaining height */
  .detail-scroll-area {
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:16px 20px 8px;
    -webkit-overflow-scrolling:touch;
  }

  /* Actions bar: NEVER scrolls, always at bottom */
  

  /* Action buttons: equal width, readable */
  .btn-close-d, .btn-del, .btn-mark-read, .btn-start-reading {
    flex:1;
    min-height:44px;
    font-size:13px;
    padding:10px 8px;
    border-radius:var(--r-full);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Detail top section */
  .detail-top {
    display:flex;
    gap:16px;
    margin-bottom:16px;
    min-width:0;
  }
  .detail-cover { width:72px; height:100px; object-fit:cover; border-radius:8px; flex-shrink:0; box-shadow:var(--shadow-md); }
  .detail-cover-ph { width:72px; height:100px; border-radius:8px; flex-shrink:0; background:var(--brand-pale); display:flex; align-items:center; justify-content:center; font-size:32px; }
  .detail-title { font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.3; margin-bottom:4px; word-break:break-word; }
  .detail-author { font-size:13px; color:var(--text-secondary); margin-bottom:3px; }

  /* ── Stats page start date setting ── */
  .stats-date-filter {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:14px 16px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .stats-date-label { font-size:13px; color:var(--text-secondary); font-weight:500; flex:1; min-width:120px; }
  .stats-date-input {
    padding:7px 12px;
    border:1.5px solid var(--border);
    border-radius:var(--r-md);
    font-size:13px;
    font-family:'DM Mono',monospace;
    color:var(--text-primary);
    background:var(--bg);
    outline:none;
    cursor:pointer;
    transition:border-color .15s;
  }
  .stats-date-input:focus { border-color:var(--brand); }
  .stats-date-reset {
    font-size:12px; color:var(--text-tertiary);
    border:none; background:none; cursor:pointer;
    padding:4px 8px; border-radius:var(--r-full);
    transition:background .15s, color .15s;
  }
  .stats-date-reset:hover { background:var(--danger-pale); color:var(--danger); }
  [data-theme="dark"] .stats-date-input { background:var(--surface-raised); }

  /* Stats section labels */
  .stats-section-label {
    font-size:11px; font-weight:600; color:var(--text-tertiary);
    text-transform:uppercase; letter-spacing:.08em;
    margin-bottom:10px; display:block;
  }

  /* ── Homepage compact stat cards ── */
  .home-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  @media(max-width:500px){ .home-stat-grid { grid-template-columns: repeat(2,1fr); gap:8px; } }
  .home-stat-card {
    background: var(--surface);
    border-radius: var(--r-lg);       /* smaller radius = more compact */
    padding: 12px 10px;               /* less padding */
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform .15s, box-shadow .15s;
  }
  .home-stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .home-stat-accent {
    width: 26px; height: 26px;        /* smaller icon container */
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;                  /* smaller emoji */
    margin-bottom: 8px;
  }
  .home-stat-num {
    font-family: 'DM Mono', monospace;
    font-size: 22px;                  /* was 26px */
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 3px;
    letter-spacing: -.03em;
  }
  .home-stat-label {
    font-size: 10px;                  /* was 11px */
    color: var(--text-secondary);
    font-weight: 500;
  }

  /* ══ Half-star rating system ══ */
  /* Star container */
  .star-rating, .detail-star-row, .write-review-stars {
    display:flex; gap:2px; align-items:center; position:relative;
  }
  /* Each star button = full star width, contains two clickable halves */
  .star-btn {
    width:32px; height:32px; position:relative; cursor:pointer;
    background:none; border:none; padding:0; flex-shrink:0;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  }
  .star-btn:hover { transform:scale(1.15); }
  .star-btn svg { width:28px; height:28px; display:block; }
  /* Half-left and half-right invisible click zones */
  .star-btn .star-half-l,
  .star-btn .star-half-r {
    position:absolute; top:0; bottom:0; width:50%;
    cursor:pointer; z-index:1;
  }
  .star-btn .star-half-l { left:0; }
  .star-btn .star-half-r { right:0; }
  /* Star fill states */
  .star-btn .star-fill {
    fill: var(--brand); opacity:0.18; transition:opacity .12s, fill .12s;
  }
  .star-btn .star-stroke { fill:none; stroke:var(--brand); stroke-width:1.5; opacity:.3; transition:opacity .12s; }
  .star-btn.full .star-fill   { opacity:1; }
  .star-btn.full .star-stroke { opacity:1; }
  .star-btn.half .star-fill   { opacity:1; }  /* handled via clipPath */
  .star-btn.half .star-stroke { opacity:1; }
  .star-btn.empty .star-fill  { opacity:.1; }
  .star-btn.empty .star-stroke{ opacity:.2; }
  /* Hover preview states */
  .star-btn.preview-full .star-fill  { opacity:.75; fill:var(--brand); }
  .star-btn.preview-half .star-fill  { opacity:.75; }
  /* Half-star clip definition is inline per star */

  /* Detail inline stars (smaller) */
  .d-star-btn { width:28px; height:28px; }
  .d-star-btn svg { width:24px; height:24px; }

  /* Review stars (medium) */
  .rev-star-btn { width:30px; height:30px; }
  .rev-star-btn svg { width:26px; height:26px; }

  /* Star display (read-only, for list items) */
  .star-display { display:inline-flex; gap:1px; align-items:center; line-height:1; }
  .star-display .sd-star { font-size:13px; }

  /* Rating distribution — support half buckets */
  .rating-dist { display:flex; flex-direction:column; gap:6px; }
  .rating-row  { display:flex; align-items:center; gap:8px; }
  .rating-stars-label { font-size:12px; color:var(--brand); width:56px; flex-shrink:0; letter-spacing:1px; }
  .rating-bar-wrap { flex:1; height:16px; background:var(--divider); border-radius:var(--r-full); overflow:hidden; }
  .rating-bar { height:100%; background:var(--brand); border-radius:var(--r-full); transition:width .5s cubic-bezier(.4,0,.2,1); }
  .rating-count { font-size:11px; font-family:'DM Mono',monospace; color:var(--text-tertiary); width:18px; text-align:right; flex-shrink:0; }


  /* ══ Star Rating — redesigned for clarity ══ */
  .star-btn {
    width:36px; height:36px; position:relative;
    cursor:pointer; background:none; border:none; padding:2px;
    flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    transition:transform .15s ease;
  }
  .star-btn:hover { transform:scale(1.1); }
  .star-btn svg { width:30px; height:30px; pointer-events:none; display:block; }

  /* Fill layers */
  .star-btn .star-bg   { fill:var(--divider); }
  .star-btn .star-full { fill:var(--brand); opacity:0; transition:opacity .1s; }
  .star-btn .star-half-fill {
    fill:var(--brand); opacity:0; transition:opacity .1s;
    clip-path:inset(0 50% 0 0); /* left half only */
  }

  /* States */
  .star-btn.s-full  .star-full       { opacity:1; }
  .star-btn.s-half  .star-half-fill  { opacity:1; }
  .star-btn.s-empty .star-full,
  .star-btn.s-empty .star-half-fill  { opacity:0; }

  /* Hover preview */
  .star-btn.h-full  .star-full       { opacity:.6; }
  .star-btn.h-half  .star-half-fill  { opacity:.6; }
  .star-btn.h-full  .star-half-fill  { opacity:0; }

  /* star-zone spans removed — click handled by button directly */

  /* Detail / review smaller stars */
  .d-star-btn { width:30px; height:30px; }
  .d-star-btn svg { width:25px; height:25px; }
  .rev-star-btn { width:32px; height:32px; }
  .rev-star-btn svg { width:27px; height:27px; }

  /* Read-only display */
  .star-display { display:inline-flex; align-items:center; gap:1px; }
  .star-display .sd-full { color:var(--brand); font-size:14px; line-height:1; }
  .star-display .sd-half { color:var(--brand); font-size:11px; line-height:1; }
  .star-display .sd-empty { color:var(--divider); font-size:14px; line-height:1; }
  .star-display .sd-num { font-size:11px; color:var(--text-tertiary); font-family:'DM Mono',monospace; margin-left:3px; }

  /* ── Action sheet (replaces modal for shelf-choice) ── */
  .action-sheet-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.5); z-index:400;
    align-items:flex-end; justify-content:center;
  }
  .action-sheet-overlay.visible { display:flex; }
  .action-sheet {
    background:var(--surface);
    border-radius:20px 20px 0 0;
    width:100%; max-width:480px;
    padding:16px 20px max(20px, calc(16px + env(safe-area-inset-bottom,0px)));
    box-shadow:0 -4px 32px rgba(0,0,0,.2);
    animation:slideUp .25s ease;
  }
  .action-sheet-title {
    font-size:13px; font-weight:600; color:var(--text-tertiary);
    text-align:center; margin-bottom:14px; padding-bottom:12px;
    border-bottom:1px solid var(--divider);
  }
  .action-sheet-btn {
    display:flex; align-items:center; gap:12px;
    width:100%; padding:14px 16px;
    background:var(--surface); border:none;
    border-radius:var(--r-lg); cursor:pointer;
    font-size:15px; font-weight:500; color:var(--text-primary);
    text-align:left; transition:background .15s;
    margin-bottom:6px;
  }
  .action-sheet-btn:hover, .action-sheet-btn:active { background:var(--bg); }
  .action-sheet-btn .as-icon { font-size:22px; width:32px; text-align:center; }
  .action-sheet-btn .as-sub { font-size:12px; color:var(--text-tertiary); font-weight:400; display:block; margin-top:1px; }
  .action-sheet-btn.danger { color:var(--danger); }
  .action-sheet-cancel {
    width:100%; padding:14px; background:var(--bg);
    border:none; border-radius:var(--r-lg); cursor:pointer;
    font-size:15px; font-weight:600; color:var(--text-secondary);
    margin-top:8px;
  }
  @keyframes slideUp { from{opacity:0} to{opacity:1} }

  /* ── Modal bottom safe area ── */
  .modal {
    padding-bottom: max(24px, calc(20px + env(safe-area-inset-bottom,0px))) !important;
  }
  
  .preview-actions {
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom,0px)));
  }

  /* ── Detail actions: prevent hiding under bottom nav ── */
  @media(max-width:600px){
    
    
  }

  /* ── Page input inline ── */
  .start-page-row {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; background:var(--bg);
    border-radius:var(--r-lg); margin-top:8px;
  }
  .start-page-row label { font-size:13px; color:var(--text-secondary); flex:1; }
  .start-page-row input { width:80px; }

  /* ════════════════════════════════════════════════════════════
     OVERLAY SCROLL FIX — body lock + inner scroll
  ════════════════════════════════════════════════════════════ */

  /* Lock background when any overlay is open */
  /* body.overlay-open removed — use html overflow:hidden instead */

  /* ── Detail overlay ── */
  
  

  /* ── Detail panel: flex column, fixed height, inner scroll ── */
  

  /* Drag handle */
  .detail-panel::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Scrollable content area — only this scrolls */
  .detail-scroll-area {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 20px 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Actions bar — fixed at bottom, never scrolls */
  

  /* Desktop: centered card */
  @media(min-width: 601px) {
    
    
    .detail-panel::before { display: none; }
  }

  /* ── Preview overlay: same treatment ── */
  
  .preview-panel {
    display: flex;
    flex-direction: column;
    height: min(94vh, 720px);
    overflow: hidden;
  }
  .preview-body {
    flex: 1 1 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ── Modal overlay ── */
  
  .modal {
    max-height: min(88vh, 700px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
  }

  /* ════════════════════════════════════════════════════════════
     STAR RATING — always visible, clear states
  ════════════════════════════════════════════════════════════ */

  /* Container */
  .star-rating, .detail-star-row, .write-review-stars {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
  }

  /* Star button */
  .star-btn {
    width: 38px; height: 38px;
    position: relative;
    cursor: pointer;
    background: none; border: none; padding: 3px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .12s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .star-btn:hover  { transform: scale(1.18); }
  .star-btn:active { transform: scale(0.95); }
  .star-btn svg { width: 30px; height: 30px; pointer-events: none; display: block; }

  /* THREE SVG layers stacked:
     1. star-bg    — always visible outline/fill (low opacity)
     2. star-half-fill — left half filled (for .5 ratings)
     3. star-full  — full fill (for whole ratings)
  */
  .star-btn .star-bg {
    /* Always visible empty star — solid stroke */
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.5;
    opacity: 0.35;
    transition: opacity .1s;
  }
  .star-btn .star-full {
    fill: var(--brand);
    opacity: 0;
    transition: opacity .12s;
  }
  .star-btn .star-half-fill {
    fill: var(--brand);
    opacity: 0;
    transition: opacity .12s;
    clip-path: inset(0 50% 0 0);
  }

  /* ── Permanent states (after click) ── */
  .star-btn.s-full .star-bg        { opacity: 0; }
  .star-btn.s-full .star-full      { opacity: 1; }
  .star-btn.s-half .star-bg        { opacity: 0.2; }
  .star-btn.s-half .star-half-fill { opacity: 1; }
  .star-btn.s-empty .star-bg       { opacity: 0.35; }
  .star-btn.s-empty .star-full     { opacity: 0; }
  .star-btn.s-empty .star-half-fill{ opacity: 0; }

  /* ── Hover preview states ── */
  .star-btn.h-full .star-bg        { opacity: 0; }
  .star-btn.h-full .star-full      { opacity: 0.65; }
  .star-btn.h-half .star-bg        { opacity: 0.15; }
  .star-btn.h-half .star-half-fill { opacity: 0.65; }

  /* Dark mode: slightly brighter empty star */
  [data-theme="dark"] .star-btn.s-empty .star-bg,
  [data-theme="dark"] .star-btn .star-bg { opacity: 0.45; stroke: var(--brand); }

  /* Detail panel stars — slightly smaller */
  .d-star-btn { width: 34px; height: 34px; }
  .d-star-btn svg { width: 26px; height: 26px; }

  /* Rating label */
  .detail-rating-label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; font-size: 13px; color: var(--text-secondary);
  }
  .detail-rating-current {
    font-size: 13px; color: var(--text-tertiary); font-family: 'DM Mono', monospace;
    transition: color .15s;
  }
  .detail-rating-current.rated { color: var(--brand); font-weight: 600; }

  /* Read-only star display */
  .star-display { display: inline-flex; align-items: center; gap: 1px; }
  .star-display .sd-full  { color: var(--brand); font-size: 14px; line-height: 1; }
  .star-display .sd-half  { color: var(--brand); font-size: 11px; line-height: 1; }
  .star-display .sd-empty { color: var(--border); font-size: 14px; line-height: 1; }
  .star-display .sd-num   {
    font-size: 11px; color: var(--text-tertiary);
    font-family: 'DM Mono', monospace; margin-left: 3px;
  }

  /* Rating area in modal */
  #rating-area { margin-top: 4px; }
  #star-rating  { min-height: 46px; }


  /* ══ MODAL — definitive scroll fix ══
     On mobile: bottom sheet with fixed height and internal scroll
     Actions always visible at bottom
  ══════════════════════════════════════ */

  /* Overlay: flex centering, no overflow */
  
  

  /* Modal panel: fixed height, flex column */
  .modal {
    background: var(--surface) !important;
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 480px !important;
    /* Fixed height — leaves room for status bar */
    height: min(90vh, 680px) !important;
    max-height: min(90vh, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;   /* clip — scroll only inside */
    box-shadow: 0 -4px 32px rgba(0,0,0,.2) !important;
    padding: 0 !important;         /* padding managed by children */
    animation: slideUp .25s ease !important;
    position: relative;
  }

  /* Drag handle */
  .modal::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Scrollable content area inside modal */
  .modal-scroll-body {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 20px 8px;
  }

  /* Actions bar — always at bottom, never scrolls */
  .modal-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    padding-bottom: max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--divider) !important;
  }

  /* Desktop: centered card */
  @media(min-width: 601px) {
    
    .modal {
      border-radius: var(--r-2xl) !important;
      height: min(85vh, 640px) !important;
      max-height: min(85vh, 640px) !important;
    }
    .modal::before { display: none; }
  }

  /* Dark mode modal */
  [data-theme="dark"] .modal { background: var(--surface) !important; }

  /* ══ MODAL FINAL FIX ══ */
  
  
  .modal {
    background: var(--surface) !important;
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 500px !important;
    /* Use dvh for dynamic viewport (accounts for browser chrome) */
    max-height: 85dvh !important;
    max-height: 85vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,.3) !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: slideUp .25s ease !important;
    /* Critical: push up above bottom nav */
    margin-bottom: calc(var(--bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Drag handle */
  .modal::before {
    content: '' !important;
    display: block !important;
    width: 40px !important; height: 4px !important;
    background: var(--border) !important;
    border-radius: 2px !important;
    margin: 12px auto 4px !important;
    flex-shrink: 0 !important;
  }
  /* On desktop: no bottom nav, center vertically */
  @media(min-width: 901px) {
    
    .modal {
      border-radius: 16px !important;
      margin-bottom: 0 !important;
      max-height: 88vh !important;
    }
    .modal::before { display: none !important; }
  }
  /* Scrollable body */
  .modal-scroll-body {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 20px 8px !important;
  }
  /* Actions — always pinned to bottom */
  .modal-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--divider) !important;
    position: relative !important;
    z-index: 1 !important;
  }
  [data-theme="dark"] .modal { background: var(--surface) !important; }

  /* ══ MODAL LAYOUT FIX — content area fills available space ══ */

  /* Bottom nav height as CSS var (already defined as --bottomnav-h: 60px) */
  /* Modal total height = 85vh MINUS bottom nav height */
  .modal {
    /* Fixed height so flex children can fill it */
    height: calc(85vh - var(--bottomnav-h, 60px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(85vh - var(--bottomnav-h, 60px) - env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: calc(var(--bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 400px !important;
  }

  /* scroll body: takes ALL remaining space after actions bar */
  .modal-scroll-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;   /* critical for flex overflow */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 20px 8px !important;
  }

  /* Actions: fixed height at bottom */
  .modal-actions {
    flex-shrink: 0 !important;
    min-height: 64px !important;
  }

  /* Desktop: no bottom nav interference */
  @media(min-width: 901px) {
    .modal {
      height: min(82vh, 640px) !important;
      max-height: min(82vh, 640px) !important;
      margin-bottom: 0 !important;
    }
  }

  /* Shelf buttons: enough height to breathe */
  .shelf-choice {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .shelf-btn {
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
  }
  .shelf-btn .sbi {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  /* Rating area spacing */
  .rating-area {
    padding-top: 4px !important;
  }
  #star-rating {
    gap: 6px !important;
    margin: 8px 0 16px !important;
  }
  .notes-textarea {
    min-height: 80px !important;
    resize: none !important;
  }

  /* Modal header spacing */
  .modal-header {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid var(--divider) !important;
  }

  /* ══ DARK MODE — shelf button selected states ══ */

  /* Base shelf-btn in dark mode */
  [data-theme="dark"] .shelf-btn {
    background: var(--surface-raised) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
  }
  [data-theme="dark"] .shelf-btn:hover {
    border-color: var(--text-tertiary) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
  }

  /* Selected: "Già letto" — brand orange */
  [data-theme="dark"] .shelf-btn.sel-read {
    border-color: var(--brand) !important;
    background: var(--brand-pale) !important;
    color: var(--brand) !important;
    box-shadow: 0 0 0 1px var(--brand) !important;
  }

  /* Selected: "Da leggere" — green */
  [data-theme="dark"] .shelf-btn.sel-wish {
    border-color: var(--success) !important;
    background: var(--success-pale) !important;
    color: var(--success) !important;
    box-shadow: 0 0 0 1px var(--success) !important;
  }

  /* Selected: "Sto leggendo" — reuse sel-read class */
  [data-theme="dark"] .shelf-btn.sel-reading {
    border-color: var(--info) !important;
    background: var(--info-pale) !important;
    color: var(--info) !important;
    box-shadow: 0 0 0 1px var(--info) !important;
  }

  /* ── Dark mode: filter buttons ── */
  [data-theme="dark"] .filter-btn {
    background: var(--surface-raised) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
  }
  [data-theme="dark"] .filter-btn.active {
    background: var(--brand-pale) !important;
    border-color: var(--brand) !important;
    color: var(--brand) !important;
  }

  /* ── Dark mode: action sheet buttons ── */
  [data-theme="dark"] .action-sheet {
    background: var(--surface) !important;
  }
  [data-theme="dark"] .action-sheet-btn {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
  }
  [data-theme="dark"] .action-sheet-btn:hover,
  [data-theme="dark"] .action-sheet-btn:active {
    background: var(--surface-raised) !important;
  }
  [data-theme="dark"] .action-sheet-cancel {
    background: var(--surface-raised) !important;
    color: var(--text-secondary) !important;
  }

  /* ══ UNIVERSAL — shelf-btn selected states (light + dark) ══ */
  .shelf-btn {
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s !important;
    cursor: pointer !important;
    position: relative !important;
  }
  /* Checkmark on selected shelf button */
  .shelf-btn.sel-read::after,
  .shelf-btn.sel-wish::after,
  .shelf-btn.sel-reading::after {
    content: '✓';
    position: absolute;
    top: 6px; right: 8px;
    font-size: 11px;
    font-weight: 700;
    opacity: .8;
  }

  /* ══ MODAL — ensure it always renders above bottom nav on ALL screen sizes ══ */

  /* Base: always account for bottom nav on mobile */
  @media(max-width: 900px) {
    .modal {
      margin-bottom: calc(var(--bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
      /* Use viewport units minus bottom nav */
      max-height: calc(100vh
        - var(--bottomnav-h, 60px)
        - env(safe-area-inset-bottom, 0px)
        - 20px) !important;
      height: auto !important;
      min-height: min(420px, 60vh) !important;
    }
  }

  /* Small phones (< 380px) */
  @media(max-width: 380px) {
    .modal {
      max-height: calc(100vh - var(--bottomnav-h, 60px) - env(safe-area-inset-bottom, 0px) - 10px) !important;
    }
    .shelf-btn {
      min-height: 60px !important;
      font-size: 12px !important;
    }
    .shelf-btn .sbi { font-size: 22px !important; }
    .modal-scroll-body { padding: 10px 16px 6px !important; }
    .modal-actions { padding: 10px 16px !important; }
  }

  /* Large phones / tablets (> 600px but still mobile) */
  @media(min-width: 601px) and (max-width: 900px) {
    .modal {
      max-width: 480px !important;
      border-radius: 20px 20px 0 0 !important;
    }
  }

  /* ══ MODAL ACTIONS — guaranteed visible ══ */
  .modal-actions {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    padding: 12px 20px !important;
    padding-bottom: max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--divider) !important;
    z-index: 2 !important;
    position: relative !important;
    /* Ensure it's never clipped */
    overflow: visible !important;
  }
  .btn-cancel, .btn-confirm {
    flex: 1 !important;
    min-height: 46px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--r-full) !important;
    padding: 12px 16px !important;
  }
  .btn-confirm {
    flex: 2 !important;
    background: var(--brand) !important;
    color: #fff !important;
    border: none !important;
  }
  .btn-confirm:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
  }
  .btn-cancel {
    background: transparent !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text-secondary) !important;
  }
  [data-theme="dark"] .btn-cancel {
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
  }
  [data-theme="dark"] .btn-confirm {
    background: var(--brand) !important;
    color: #fff !important;
  }

  /* ── "Sto leggendo" selected state (light mode) ── */
  .shelf-btn.sel-reading {
    border-color: var(--info, #3B82F6) !important;
    background: var(--info-pale, rgba(59,130,246,.1)) !important;
    color: var(--info, #3B82F6) !important;
    box-shadow: 0 0 0 1px var(--info, #3B82F6) !important;
  }

  /* ══ Homepage customization panel ══ */
  .home-settings-btn {
    position: absolute; top: 0; right: 0;
    background: none; border: none;
    padding: 4px 8px; cursor: pointer;
    color: var(--text-tertiary); font-size: 16px;
    border-radius: var(--r-md);
    transition: color .15s, background .15s;
  }
  .home-settings-btn:hover { color: var(--text-primary); background: var(--bg); }

  .home-customize-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: var(--z-overlay);
    align-items: flex-end; justify-content: center;
  }
  .home-customize-overlay.visible { display: flex; }
  .home-customize-panel {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 480px;
    padding: 0;
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 -4px 32px rgba(0,0,0,.2);
    animation: slideUp .25s ease;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
  .home-customize-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
  }
  .home-customize-header h3 {
    font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0;
  }
  .home-customize-body {
    flex: 1; overflow-y: auto; padding: 12px 20px;
  }
  .home-section-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--divider);
    user-select: none;
  }
  .home-section-row:last-child { border-bottom: none; }
  .home-section-drag { color: var(--text-tertiary); font-size: 18px; cursor: grab; flex-shrink: 0; }
  .home-section-label { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-primary); }
  .home-section-sub { font-size: 11px; color: var(--text-tertiary); font-weight: 400; display: block; }
  /* Toggle switch */
  .home-section-toggle {
    position: relative; width: 44px; height: 24px; flex-shrink: 0;
  }
  .home-section-toggle input { opacity: 0; width: 0; height: 0; }
  .home-section-toggle .slider {
    position: absolute; inset: 0;
    background: var(--border); border-radius: 24px;
    cursor: pointer; transition: background .2s;
  }
  .home-section-toggle .slider::before {
    content: ''; position: absolute;
    height: 18px; width: 18px; border-radius: 50%;
    left: 3px; bottom: 3px; background: #fff;
    transition: transform .2s;
  }
  .home-section-toggle input:checked + .slider { background: var(--brand); }
  .home-section-toggle input:checked + .slider::before { transform: translateX(20px); }
  [data-theme="dark"] .home-customize-panel { background: var(--surface); }

  /* ── Star button: reliable click/touch on Android ── */
  .star-btn {
    /* Touch action: none prevents scroll interference during tap */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Cursor and interaction */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .star-btn svg {
    pointer-events: none; /* SVG must not capture events — button does */
  }

  /* ── Rating area: never clip stars ── */
  .rating-area {
    overflow: visible !important;
  }
  .rating-area.open {
    max-height: 400px !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  /* Star row in modal: large touch targets */
  #star-rating {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    overflow: visible !important;
    min-height: 54px !important;
  }
  #star-rating .star-btn {
    width: 42px !important;
    height: 42px !important;
    overflow: visible !important;
  }
  #star-rating .star-btn svg {
    width: 34px !important;
    height: 34px !important;
  }

  /* ══ Rating picker — slider + stars ══ */
  .rating-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 8px;
  }
  .rating-stars-display {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    letter-spacing: 2px;
    min-height: 40px;
    user-select: none;
  }
  .rating-stars-display .rs {
    cursor: pointer;
    transition: transform .1s;
    -webkit-tap-highlight-color: transparent;
    padding: 4px;
  }
  .rating-stars-display .rs:active { transform: scale(1.3); }
  .rating-value-label {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    font-family: 'DM Mono', monospace;
    min-height: 20px;
  }
  .rating-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .rating-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    outline: none;
    cursor: pointer;
  }
  .rating-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .rating-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand);
    cursor: pointer;
    border: none;
  }
  .rating-clear-btn {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px 6px;
    white-space: nowrap;
  }
  .rating-clear-btn:hover { color: var(--danger); }

  /* ── Goals monthly graph ── */
  .goals-monthly-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 18px 16px 14px;
    margin-top: 16px;
  }
  .goals-monthly-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 4px;
  }
  .goals-monthly-sub {
    font-size: 11px; color: var(--text-tertiary); margin-bottom: 14px;
  }
  .goals-bar-chart {
    display: flex; align-items: flex-end; gap: 6px;
    height: 100px; padding-bottom: 20px; position: relative;
  }
  .goals-bar-col {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 3px; position: relative;
  }
  .goals-bar-wrap {
    width: 100%; flex: 1; display: flex; align-items: flex-end;
    position: relative;
  }
  .goals-bar {
    width: 100%; border-radius: 4px 4px 0 0;
    min-height: 3px;
    transition: height .4s cubic-bezier(.4,0,.2,1);
    position: relative;
  }
  .goals-bar.achieved { background: var(--success); }
  .goals-bar.partial  { background: var(--brand); }
  .goals-bar.empty    { background: var(--divider); }
  /* Goal line overlay */
  .goals-bar-goal-line {
    position: absolute; left: 0; right: 0;
    height: 2px; background: var(--danger);
    opacity: .6; pointer-events: none;
  }
  .goals-bar-label {
    font-size: 9px; color: var(--text-tertiary);
    font-family: 'DM Mono', monospace;
    text-align: center; white-space: nowrap;
    position: absolute; bottom: -18px; left: 50%;
    transform: translateX(-50%);
  }
  .goals-bar-val {
    font-size: 9px; color: var(--text-tertiary);
    font-family: 'DM Mono', monospace; text-align: center;
    position: absolute; top: -14px; left: 50%;
    transform: translateX(-50%); white-space: nowrap;
  }
  .goals-bar-col.current-month .goals-bar { opacity: 1; }
  .goals-bar-col:not(.current-month) .goals-bar { opacity: .75; }

  /* ══ STREAK WIDGET ══ */
  .home-streak-wrap {
    background: linear-gradient(135deg, var(--brand) 0%, #FF8C42 100%);
    border-radius: var(--r-xl);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 16px rgba(232,89,12,.25);
    position: relative;
    overflow: hidden;
  }
  .home-streak-wrap:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,89,12,.3); }
  .home-streak-wrap::before {
    content: '';
    position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
  }
  .streak-flame {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
    animation: flicker 2s ease-in-out infinite;
  }
  @keyframes flicker {
    0%,100% { transform: scale(1) rotate(-2deg); }
    50%      { transform: scale(1.08) rotate(2deg); }
  }
  .streak-info { flex: 1; min-width: 0; }
  .streak-number {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-family: 'DM Mono', monospace;
    letter-spacing: -.04em;
  }
  .streak-label {
    font-size: 12px;
    color: rgba(255,255,255,.85);
    font-weight: 500;
    margin-top: 1px;
  }
  .streak-best {
    font-size: 11px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
  }
  .streak-dots {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .streak-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .streak-dot-circle {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    border: 1.5px solid rgba(255,255,255,.4);
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
  }
  .streak-dot-letter {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    line-height: 1;
    letter-spacing: 0;
    transition: color .2s;
  }
  .streak-dot.active .streak-dot-circle {
    background: #fff;
    border-color: #fff;
  }
  .streak-dot.active .streak-dot-letter { color: rgba(255,255,255,.9); }
  .streak-dot.today .streak-dot-circle  {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,.7);
  }
  .streak-dot.today .streak-dot-letter  { color: #fff; font-weight: 800; }

  /* Zero streak — light background */
  .home-streak-wrap.no-streak {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
  }
  .home-streak-wrap.no-streak .streak-number { color: var(--text-tertiary); }
  .home-streak-wrap.no-streak .streak-label  { color: var(--text-secondary); }
  .home-streak-wrap.no-streak .streak-dot-circle {
    background: var(--divider);
    border-color: var(--border);
  }
  .home-streak-wrap.no-streak .streak-dot-letter { color: var(--text-tertiary); }
  .home-streak-wrap.no-streak .streak-dot.active .streak-dot-circle {
    background: var(--brand);
    border-color: var(--brand);
  }
  .home-streak-wrap.no-streak .streak-dot.active .streak-dot-letter { color: var(--brand); }
  .home-streak-wrap.no-streak .streak-dot.today .streak-dot-circle {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 0 6px rgba(232,89,12,.4);
  }

  /* ══ GOALS VISUAL BARS ══ */
  .home-goals-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 16px;
    margin-bottom: 0;
  }
  .home-goals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .home-goals-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .home-goals-link {
    font-size: 12px;
    color: var(--brand);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
  }
  .goal-bar-item {
    margin-bottom: 12px;
  }
  .goal-bar-item:last-child { margin-bottom: 0; }
  .goal-bar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
  }
  .goal-bar-name {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .goal-bar-value {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 700;
    font-family: 'DM Mono', monospace;
  }
  .goal-bar-track {
    height: 8px;
    background: var(--bg);
    border-radius: var(--r-full);
    overflow: hidden;
    position: relative;
  }
  .goal-bar-fill {
    height: 100%;
    border-radius: var(--r-full);
    transition: width .6s cubic-bezier(.4,0,.2,1);
    position: relative;
  }
  .goal-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 6px; height: 100%;
    background: rgba(255,255,255,.4);
    border-radius: var(--r-full);
  }
  .goal-bar-fill.complete {
    background: var(--success);
  }
  .goal-bar-fill.complete::after { display: none; }
  /* Completion badge */
  .goal-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--success-pale);
    color: var(--success);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-full);
  }

  /* ══ PUSH NOTIFICATION PROMPT ══ */
  .notif-prompt {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--r-xl);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: transform .15s;
    box-shadow: 0 4px 16px rgba(102,126,234,.3);
  }
  .notif-prompt:hover { transform: translateY(-1px); }
  .notif-prompt-icon { font-size: 28px; flex-shrink: 0; }
  .notif-prompt-text { flex: 1; }
  .notif-prompt-title { font-size: 13px; font-weight: 700; color: #fff; }
  .notif-prompt-sub   { font-size: 11px; color: rgba(255,255,255,.8); margin-top: 1px; }
  .notif-prompt-close {
    background: rgba(255,255,255,.2); border: none;
    color: #fff; cursor: pointer;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  [data-theme="dark"] .home-streak-wrap.no-streak { background: var(--surface); }
  [data-theme="dark"] .home-goals-card { background: var(--surface); }
  [data-theme="dark"] .goal-bar-track  { background: var(--surface-raised); }

  /* ══════════════════════════════════════════════════════════
     SUGGERIMENTI — Community feature
  ══════════════════════════════════════════════════════════ */

  .sugg-page-header {
    margin-bottom: 20px;
  }
  .sugg-page-title {
    font-size: 22px; font-weight: 800;
    color: var(--text-primary); letter-spacing: -.03em;
    margin-bottom: 4px;
  }
  .sugg-page-sub {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.5;
  }

  /* ── New suggestion form ── */
  .sugg-new-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 16px;
    margin-bottom: 20px;
  }
  .sugg-new-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
  }
  .sugg-input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg);
    font-size: 14px; color: var(--text-primary);
    font-family: inherit;
    transition: border-color .15s;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .sugg-input:focus { outline: none; border-color: var(--brand); }
  .sugg-textarea {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg);
    font-size: 13px; color: var(--text-primary);
    font-family: inherit; resize: none;
    min-height: 80px;
    transition: border-color .15s;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .sugg-textarea:focus { outline: none; border-color: var(--brand); }
  .sugg-submit-row {
    display: flex; justify-content: flex-end;
  }
  .sugg-submit-btn {
    background: var(--brand); color: #fff;
    border: none; border-radius: var(--r-full);
    padding: 10px 20px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background .15s, transform .1s;
  }
  .sugg-submit-btn:hover  { background: var(--brand-hover); }
  .sugg-submit-btn:active { transform: scale(.97); }
  .sugg-submit-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* ── Filters & sort ── */
  .sugg-controls {
    display: flex; gap: 8px; flex-wrap: wrap;
    align-items: center; margin-bottom: 16px;
  }
  .sugg-filter-btn {
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer; font-family: inherit;
    transition: all .15s;
  }
  .sugg-filter-btn.active {
    border-color: var(--brand);
    background: var(--brand-pale);
    color: var(--brand);
  }
  .sugg-sort-select {
    margin-left: auto;
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    font-size: 12px; color: var(--text-secondary);
    font-family: inherit; cursor: pointer;
  }

  /* ── Suggestion card ── */
  .sugg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 16px;
    margin-bottom: 12px;
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
  }
  .sugg-card:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 12px rgba(232,89,12,.08);
  }
  .sugg-card.top-voted {
    border-color: var(--warning);
    background: linear-gradient(135deg, var(--surface) 0%, var(--warning-pale) 100%);
  }
  .sugg-card-top {
    display: flex; align-items: flex-start; gap: 12px;
  }

  /* Vote button */
  .sugg-vote-btn {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 8px 10px; cursor: pointer;
    min-width: 44px; flex-shrink: 0;
    font-family: inherit;
    transition: all .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .sugg-vote-btn:hover { border-color: var(--brand); color: var(--brand); }
  .sugg-vote-btn.voted {
    background: var(--brand-pale);
    border-color: var(--brand);
    color: var(--brand);
  }
  .sugg-vote-icon { font-size: 14px; line-height: 1; }
  .sugg-vote-count {
    font-size: 13px; font-weight: 700;
    font-family: 'DM Mono', monospace;
    line-height: 1;
  }

  /* Card body */
  .sugg-card-body { flex: 1; min-width: 0; }
  .sugg-card-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px;
    margin-bottom: 6px;
  }
  .sugg-card-title {
    font-size: 15px; font-weight: 700;
    color: var(--text-primary); line-height: 1.3;
  }

  /* Status badge */
  .sugg-status {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: var(--r-full);
    white-space: nowrap; flex-shrink: 0;
    letter-spacing: .03em; text-transform: uppercase;
  }
  .sugg-status.pending     { background: var(--bg);          color: var(--text-tertiary); border: 1px solid var(--border); }
  .sugg-status.reviewing   { background: var(--warning-pale); color: var(--warning); }
  .sugg-status.in_progress { background: var(--info-pale);    color: var(--info); }
  .sugg-status.completed   { background: var(--success-pale); color: var(--success); }
  .sugg-status.rejected    { background: var(--danger-pale);  color: var(--danger); }

  .sugg-card-desc {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.5; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .sugg-card-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 11px; color: var(--text-tertiary);
  }
  .sugg-card-meta span { display: flex; align-items: center; gap: 3px; }

  /* Admin status selector */
  .sugg-admin-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0 0;
    border-top: 1px solid var(--divider);
    margin-top: 10px;
  }
  .sugg-admin-label {
    font-size: 11px; color: var(--text-tertiary); font-weight: 600;
  }
  .sugg-status-select {
    flex: 1; padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    font-size: 12px; font-weight: 600;
    color: var(--text-primary); font-family: inherit;
    cursor: pointer;
  }

  /* ── Detail overlay ── */
  
  
  .sugg-detail-panel {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 560px;
    height: min(92vh, 720px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -6px 40px rgba(0,0,0,.2);
    animation: slideUp .25s ease;
  }
  .sugg-detail-panel::before {
    content: ''; display: block;
    width: 40px; height: 4px;
    background: var(--border); border-radius: 2px;
    margin: 10px auto 0; flex-shrink: 0;
  }
  .sugg-detail-scroll {
    flex: 1; overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
  }
  .sugg-detail-title {
    font-size: 18px; font-weight: 800;
    color: var(--text-primary); margin-bottom: 6px;
    letter-spacing: -.02em;
  }
  .sugg-detail-desc {
    font-size: 14px; color: var(--text-secondary);
    line-height: 1.6; margin-bottom: 14px;
  }
  .sugg-detail-actions {
    flex-shrink: 0; padding: 12px 20px;
    padding-bottom: max(14px, calc(10px + env(safe-area-inset-bottom,0px)));
    background: var(--surface);
    border-top: 1px solid var(--divider);
    display: flex; gap: 10px; align-items: center;
  }

  /* Comments */
  .sugg-comments-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary); margin: 16px 0 10px;
    display: flex; align-items: center; gap: 6px;
  }
  .sugg-comment {
    background: var(--bg); border-radius: var(--r-lg);
    padding: 10px 12px; margin-bottom: 8px;
  }
  .sugg-comment-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 4px;
  }
  .sugg-comment-author {
    font-size: 12px; font-weight: 700; color: var(--brand);
  }
  .sugg-comment-date {
    font-size: 11px; color: var(--text-tertiary);
  }
  .sugg-comment-text {
    font-size: 13px; color: var(--text-primary); line-height: 1.5;
  }
  .sugg-comment-input-row {
    display: flex; gap: 8px; margin-top: 12px;
  }
  .sugg-comment-input {
    flex: 1; padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--bg); font-family: inherit;
    font-size: 13px; color: var(--text-primary);
    transition: border-color .15s;
  }
  .sugg-comment-input:focus { outline: none; border-color: var(--brand); }
  .sugg-comment-send {
    background: var(--brand); color: #fff;
    border: none; border-radius: var(--r-full);
    padding: 10px 16px; font-size: 13px;
    font-weight: 600; cursor: pointer;
    font-family: inherit; white-space: nowrap;
  }
  .sugg-empty {
    text-align: center; padding: 40px 20px;
    color: var(--text-tertiary); font-size: 14px;
  }
  .sugg-loading { text-align: center; padding: 24px; color: var(--text-tertiary); font-size: 13px; }

  @media(min-width:601px){
    .sugg-detail-panel { border-radius: var(--r-2xl); height: min(88vh,700px); }
    .sugg-detail-panel::before { display: none; }
  }
  [data-theme="dark"] .sugg-card { background: var(--surface); }
  [data-theme="dark"] .sugg-comment { background: var(--surface-raised); }
  [data-theme="dark"] .sugg-vote-btn { background: var(--surface-raised); }

  /* ── Forgot password link ── */
  .auth-forgot-link {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--brand);
    font-weight: 500;
    margin-top: -4px;
    margin-bottom: 12px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-decoration: none;
  }
  .auth-forgot-link:hover { text-decoration: underline; }

  /* ── Auth views (login / signup / forgot / reset) ── */
  .auth-view { display: none; }
  .auth-view.active { display: block; }

  /* ── Back button ── */
  .auth-back-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    font-size: 13px; color: var(--text-secondary);
    font-family: inherit; font-weight: 500;
    padding: 0; margin-bottom: 16px;
    transition: color .15s;
  }
  .auth-back-btn:hover { color: var(--text-primary); }

  /* ── Email verification banner ── */
  .verify-banner {
    background: var(--warning-pale);
    border: 1px solid var(--warning);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 16px;
  }
  .verify-banner-icon { font-size: 18px; flex-shrink: 0; }
  .verify-banner-text { flex: 1; font-size: 12px; color: var(--text-primary); line-height: 1.5; }
  .verify-banner-title { font-weight: 700; margin-bottom: 2px; }
  .verify-banner-resend {
    background: none; border: none; cursor: pointer;
    color: var(--brand); font-size: 12px; font-weight: 600;
    font-family: inherit; padding: 0; margin-top: 4px;
    text-decoration: underline; display: block;
  }

  /* ── Reset password screen (full page) ── */
  #reset-password-screen {
    position: fixed; inset: 0;
    background: var(--bg);
    display: none;
    align-items: center; justify-content: center;
    z-index: 99999;
    padding: 24px;
  }
  #reset-password-screen.visible { display: flex; }
  .reset-card {
    background: var(--surface);
    border-radius: var(--r-2xl);
    padding: 32px 28px;
    width: 100%; max-width: 420px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
  }
  .reset-card-logo {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 24px;
  }
  .reset-card-title {
    font-size: 20px; font-weight: 800;
    color: var(--text-primary); letter-spacing: -.03em;
    margin-bottom: 6px;
  }
  .reset-card-sub {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.5; margin-bottom: 20px;
  }
  .reset-field { margin-bottom: 14px; }
  .reset-field label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: .05em;
  }
  .reset-input {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg);
    font-size: 14px; color: var(--text-primary);
    font-family: inherit; transition: border-color .15s;
    box-sizing: border-box;
  }
  .reset-input:focus { outline: none; border-color: var(--brand); }
  .reset-msg {
    padding: 10px 14px;
    border-radius: var(--r-lg);
    font-size: 13px; margin-bottom: 14px;
    display: none;
  }
  .reset-msg.ok  { background: var(--success-pale); color: var(--success); display: block; }
  .reset-msg.err { background: var(--danger-pale);  color: var(--danger);  display: block; }
  .reset-msg.info{ background: var(--info-pale);    color: var(--info);    display: block; }

  /* Goal edit form — needs .open to show */
  .goal-edit-form {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
  }
  .goal-edit-form.open {
    max-height: 80px;
    opacity: 1;
  }
  /* Manual minutes log row */
  .goal-log-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
  }

  /* ── Goal progress layout ── */
  .goal-progress-wrap {
    margin: 8px 0 4px;
  }
  .goal-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
  }
  .goal-progress-label span:last-child {
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'DM Mono', monospace;
  }
op: 12px;
    border-top: 1px solid var(--divider);
  }

  /* ── Roadmap detail: clear bottom nav on mobile ── */
  @media(max-width: 900px) {
    .sugg-detail-panel {
      /* Push above bottom nav (60px) + safe area */
      margin-bottom: calc(var(--bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px));
      /* Reduce total height to compensate */
      height: calc(92vh - var(--bottomnav-h, 60px) - env(safe-area-inset-bottom, 0px)) !important;
    }
  }
  .sugg-detail-actions {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    padding-bottom: max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--divider) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }
  /* Comment input inside detail actions */
  .sugg-detail-actions .sugg-comment-input {
    min-width: 0 !important;
    flex: 1 !important;
  }
  /* Close button — never hidden */
  .sugg-detail-actions button:last-child {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ── Goal card typography ── */
  .goal-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.01em;
    line-height: 1.3;
  }
  .goal-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 2px;
    min-height: 14px; /* reserve space even when empty */
  }
  /* Header layout */
  .goal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .goal-label-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }
  .goal-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  /* Edit button */
  .goal-edit-btn {
    font-size: 12px;
    color: var(--brand);
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: var(--r-md);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .goal-edit-btn:hover { background: var(--brand-pale); }
  /* Goal card base */
  .goal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 16px 16px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
  }
  /* Progress bar track */
  .goal-bar {
    height: 8px;
    background: var(--divider);
    border-radius: var(--r-full);
    overflow: hidden;
  }
  /* Progress numbers row */
  .goal-progress-wrap { margin: 6px 0 2px; }
  .goal-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
  }
  .goal-progress-label span:last-child {
    font-weight: 700;
    color: var(--brand);
    font-family: 'DM Mono', monospace;
    font-size: 13px;
  }
  /* Page title */
  .goals-page-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -.03em;
    margin-bottom: 4px;
  }
  .goals-page-sub {
    font-size: 12px;
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 18px;
    display: block;
  }
  /* Save btn */
  .goal-save-btn {
    padding: 8px 16px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .goal-save-btn:hover { background: var(--brand-hover); }
  .goal-input {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg);
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
  }
  .goal-input:focus { outline: none; border-color: var(--brand); }

  /* ══ IMPORT GOODREADS ══ */
  
  
  .import-panel {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 540px;
    /* Height set dynamically by JS in openImport() for accurate Android measurement */
    height: 70vh;
    max-height: 680px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -6px 40px rgba(0,0,0,.2);
    animation: slideUp .25s ease;
  }
  .import-panel::before {
    content: ''; display: block;
    width: 40px; height: 4px;
    background: var(--border); border-radius: 2px;
    margin: 10px auto 0; flex-shrink: 0;
  }
  .import-header {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
  }
  .import-header h3 {
    font-size: 17px; font-weight: 800;
    color: var(--text-primary); letter-spacing: -.02em;
    margin-bottom: 2px;
  }
  .import-header p {
    font-size: 12px; color: var(--text-secondary); line-height: 1.5;
  }
  .import-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    /* Ensure scroll area doesn't push footer off screen */
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  /* Drop zone */
  .import-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--r-xl);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    margin-bottom: 16px;
  }
  .import-dropzone:hover, .import-dropzone.drag-over {
    border-color: var(--brand);
    background: var(--brand-pale);
  }
  .import-dropzone-icon { font-size: 36px; margin-bottom: 10px; }
  .import-dropzone-text { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
  .import-dropzone-sub  { font-size: 12px; color: var(--text-tertiary); }
  .import-dropzone input[type=file] { display: none; }

  /* Preview table */
  .import-preview-wrap {
    background: var(--bg); border-radius: var(--r-lg);
    padding: 12px; margin-bottom: 16px; display: none;
  }
  #import-preview-list {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .import-preview-title {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  }
  .import-preview-badge {
    background: var(--brand-pale); color: var(--brand);
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: var(--r-full);
  }
  .import-preview-badge.green {
    background: var(--success-pale); color: var(--success);
  }
  .import-preview-badge.yellow {
    background: var(--warning-pale); color: var(--warning);
  }
  .import-book-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--divider);
    font-size: 13px;
  }
  .import-book-row:last-child { border-bottom: none; }
  .import-book-shelf {
    font-size: 10px; font-weight: 700; padding: 2px 6px;
    border-radius: var(--r-full); flex-shrink: 0; white-space: nowrap;
  }
  .import-book-shelf.read    { background: var(--brand-pale);   color: var(--brand); }
  .import-book-shelf.wish    { background: var(--success-pale); color: var(--success); }
  .import-book-shelf.reading { background: var(--info-pale);    color: var(--info); }
  .import-book-title  { flex: 1; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .import-book-author { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .import-book-rating { font-size: 11px; color: var(--warning); flex-shrink: 0; }

  /* Options */
  .import-options { margin-bottom: 16px; }
  .import-option-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--divider);
  }
  .import-option-row:last-child { border-bottom: none; }
  .import-option-label { flex: 1; font-size: 13px; color: var(--text-primary); font-weight: 500; }
  .import-option-sub   { font-size: 11px; color: var(--text-tertiary); display: block; }

  /* Progress */
  .import-progress-wrap { display: none; margin-bottom: 16px; }
  .import-progress-bar-track {
    height: 8px; background: var(--divider);
    border-radius: var(--r-full); overflow: hidden; margin: 8px 0;
  }
  .import-progress-bar-fill {
    height: 100%; background: var(--brand);
    border-radius: var(--r-full);
    transition: width .3s ease;
  }
  .import-progress-text { font-size: 12px; color: var(--text-secondary); }

  /* Footer */
  .import-footer {
    flex-shrink: 0 !important;
    padding: 12px 20px;
    /* Add extra bottom padding to clear the bottom nav bar */
    padding-bottom: max(
      calc(var(--bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px) + 8px),
      20px
    );
    border-top: 1px solid var(--divider);
    background: var(--surface);
    display: flex !important;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
  .import-btn-cancel {
    flex: 1; padding: 12px;
    background: transparent; border: 1.5px solid var(--border);
    border-radius: var(--r-full); font-size: 14px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
  }
  .import-btn-start {
    flex: 2; padding: 12px;
    background: var(--brand); color: #fff; border: none;
    border-radius: var(--r-full); font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background .15s;
  }
  .import-btn-start:hover    { background: var(--brand-hover); }
  .import-btn-start:disabled { opacity: .4; cursor: not-allowed; }

  @media(min-width:601px){
    
    .import-panel { border-radius: var(--r-2xl); }
    .import-panel::before { display: none; }
  }
  [data-theme="dark"] .import-panel { background: var(--surface); }
  [data-theme="dark"] .import-preview-wrap { background: var(--surface-raised); }

  /* ── Result card buttons — simplified to 2 buttons ── */
  .result-btns {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .btn-result-add {
    flex: 1;
    padding: 8px 12px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
    white-space: nowrap;
  }
  .btn-result-add:hover    { background: var(--brand-hover); }
  .btn-result-add:disabled { opacity: .5; cursor: not-allowed; background: var(--text-tertiary); }
  .btn-result-details {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
  }
  .btn-result-details:hover { border-color: var(--brand); color: var(--brand); }

  /* ── Add flow shelf picker (action sheet style) ── */
  .shelf-picker-overlay {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.55); z-index: 9200;
    align-items: flex-end; justify-content: center;
  }
  .shelf-picker-overlay.visible { display: flex; }
  .shelf-picker-panel {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%; max-width: 480px;
    padding: 20px 20px;
    padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom,0px)));
    box-shadow: 0 -4px 32px rgba(0,0,0,.2);
    
  }
  .shelf-picker-title {
    font-size: 16px; font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -.02em;
  }
  .shelf-picker-author {
    font-size: 12px; color: var(--text-tertiary);
    margin-bottom: 16px;
  }
  .shelf-picker-btn {
    width: 100%; padding: 14px 16px;
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    cursor: pointer; font-family: inherit;
    text-align: left;
    margin-bottom: 8px;
    transition: all .15s;
    display: flex; align-items: center; gap: 10px;
  }
  .shelf-picker-btn:hover { border-color: var(--brand); background: var(--brand-pale); }
  .shelf-picker-btn:last-of-type { margin-bottom: 0; }
  .shelf-picker-cancel {
    width: 100%; padding: 12px;
    background: transparent; border: none;
    color: var(--text-tertiary); font-size: 14px;
    font-weight: 600; cursor: pointer;
    font-family: inherit; margin-top: 8px;
  }
  /* Page input inside shelf picker */
  .shelf-picker-page-row {
    display: none;
    align-items: center; gap: 10px;
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--r-xl); padding: 12px 16px;
    margin-bottom: 8px;
  }
  .shelf-picker-page-row.visible { display: flex; }
  .shelf-picker-page-row label {
    font-size: 13px; color: var(--text-secondary);
    font-weight: 500; flex: 1;
  }
  .shelf-picker-page-input {
    width: 80px; padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    font-size: 14px; font-weight: 600;
    font-family: inherit; text-align: center;
    background: var(--surface);
    color: var(--text-primary);
  }
  .shelf-picker-page-input:focus { outline: none; border-color: var(--brand); }

  /* ── Global bottom safe area for modals/panels ── */
  .modal-actions,
  .detail-actions,
  .preview-actions,
  .import-footer {
    padding-bottom: max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* ── Modal scroll body — ensures content scrollable above actions ── */
  .modal-scroll-body {
    max-height: calc(70vh - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .btn-preview-reading {
    padding: 10px 16px;
    background: var(--info-pale);
    color: var(--info);
    border: 1.5px solid var(--info);
    border-radius: var(--r-full);
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
    transition: all .15s;
  }
  .btn-preview-reading:hover { background: var(--info); color: #fff; }
  .btn-preview-reading:disabled { opacity:.4; cursor:not-allowed; }

  /* ══ SAFE AREA — tutti i pannelli bottom sheet ══
     Questi elementi si trovano in fondo ai pannelli e devono stare
     SOPRA la bottom navigation bar su Android/iOS              */

  /* Detail panel actions */
  

  /* Preview panel actions */
  .preview-actions {
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Action sheet (bottom sheet scelte) */
  .action-sheet {
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Add modal actions */
  .modal-actions {
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Profile panel — fondo scrollabile */
  .profile-body {
    padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Sugg detail actions */
  .sugg-detail-actions {
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Import footer */
  .import-footer {
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
  }

 
  /* Import overlay — push panel above bottom nav on mobile */

 /* Shelf picker panel */
  .shelf-picker-panel {
    padding-bottom: max(28px, calc(20px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Bottom nav overlay: tutti i pannelli bottom-sheet devono
     avere margin-bottom = altezza bottom nav su mobile */
  @media (max-width: 900px) {
    .detail-panel,
    .preview-panel,
    .action-sheet {
      margin-bottom: 0;  /* i panel coprono tutta l'area, le actions hanno padding */
    }
  }

  /* ── Fix white strip below bottom nav on Android ────────────────────────── */
  .bottom-nav {
    /* Extend background into safe area */
    background-color: var(--surface) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* ── Prevent Android auto font zoom ── */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
  }
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* ══ PREVENT HORIZONTAL OVERFLOW / ZOOM ON ANDROID ══ */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  .page, main, .content-area {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Streak widget: prevent overflow on small screens */
  .home-streak-wrap {
    overflow: hidden;
    max-width: 100%;
  }
  .streak-dots {
    flex-wrap: nowrap;
    overflow: hidden;
    /* Shrink dots gap on very small screens */
    gap: clamp(2px, 1vw, 5px);
  }
  .streak-dot {
    flex-shrink: 1;
    min-width: 0;
  }
  .streak-dot-circle {
    width: clamp(7px, 2.5vw, 10px);
    height: clamp(7px, 2.5vw, 10px);
  }
  .streak-dot-letter {
    font-size: clamp(6px, 1.8vw, 8px);
  }
  /* Streak number: shrink on small screens */
  .streak-number {
    font-size: clamp(22px, 7vw, 32px);
  }
  .streak-flame {
    font-size: clamp(24px, 8vw, 36px);
  }

  /* Home greeting: prevent overflow */
  .home-greeting {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Stat grid: never wider than container */
  .home-stat-grid {
    max-width: 100%;
    box-sizing: border-box;
  }
  .home-stat-card {
    min-width: 0;
    overflow: hidden;
  }

  /* General safety net */
  * {
    box-sizing: border-box;
  }
  img, svg {
    max-width: 100%;
  }

  /* ══ ABANDONED & LIBRARY SECTIONS ══ */

  /* Shelf tag colors */
  .shelf-tag-abandoned {
    background: var(--danger-pale); color: var(--danger);
    padding: 2px 8px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 700;
  }
  .shelf-tag-library {
    background: #EDE9FE; color: #7C3AED;
    padding: 2px 8px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 700;
  }

  /* Abandoned card */
  .abandoned-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); border-radius: var(--r-xl);
    padding: 14px; margin-bottom: 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    cursor: pointer;
    transition: box-shadow .15s;
  }
  .abandoned-card:hover { box-shadow: var(--shadow-sm); }
  .abandoned-cover {
    width: 44px; height: 60px; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
  }
  .abandoned-cover-ph {
    width: 44px; height: 60px; background: var(--bg);
    border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; border: 1px solid var(--border);
  }
  .abandoned-info { flex: 1; min-width: 0; }
  .abandoned-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .abandoned-author {
    font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;
  }
  .abandoned-meta {
    font-size: 11px; color: var(--text-tertiary);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .abandoned-notes {
    font-size: 12px; color: var(--text-secondary);
    font-style: italic; margin-top: 4px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .abandoned-actions {
    display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
  }
  .abandoned-actions button {
    padding: 5px 10px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 600; cursor: pointer;
    font-family: inherit; border: 1.5px solid var(--border);
    background: var(--bg); color: var(--text-secondary);
    transition: all .15s;
  }
  .abandoned-actions button:hover { border-color: var(--brand); color: var(--brand); }
  .abandoned-actions .btn-resume {
    background: var(--brand); color: #fff; border-color: var(--brand);
  }
  .abandoned-actions .btn-resume:hover { background: var(--brand-hover); }

  /* Library card */
  .library-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); border-radius: var(--r-xl);
    padding: 14px; margin-bottom: 10px;
    border: 1px solid var(--border);
    border-left: 3px solid #7C3AED;
    cursor: pointer;
    transition: box-shadow .15s;
  }
  .library-card:hover { box-shadow: var(--shadow-sm); }
  .library-cover {
    width: 44px; height: 60px; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
  }
  .library-cover-ph {
    width: 44px; height: 60px; background: var(--bg);
    border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; border: 1px solid var(--border);
  }
  .library-info { flex: 1; min-width: 0; }
  .library-title {
    font-size: 14px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .library-author {
    font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;
  }
  .library-lent {
    font-size: 11px; color: var(--warning); font-weight: 600;
    display: flex; align-items: center; gap: 4px;
  }
  .library-actions {
    display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
  }
  .library-actions button {
    padding: 5px 10px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 600; cursor: pointer;
    font-family: inherit; border: 1.5px solid var(--border);
    background: var(--bg); color: var(--text-secondary);
    transition: all .15s;
  }
  .library-actions button:hover { border-color: var(--brand); color: var(--brand); }
  .btn-lend {
    background: var(--warning-pale) !important;
    color: var(--warning) !important;
    border-color: var(--warning) !important;
  }

  /* Shelf picker new options */
  .shelf-picker-btn.abandoned-opt {
    border-color: var(--danger-pale);
    color: var(--danger);
  }
  .shelf-picker-btn.abandoned-opt:hover {
    background: var(--danger-pale);
    border-color: var(--danger);
  }
  .shelf-picker-btn.library-opt {
    border-color: #EDE9FE;
    color: #7C3AED;
  }
  .shelf-picker-btn.library-opt:hover {
    background: #EDE9FE;
    border-color: #7C3AED;
  }

  /* Lent input row in shelf picker */
  .shelf-picker-lent-row {
    display: none;
    align-items: center; gap: 10px;
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--r-xl); padding: 12px 16px;
    margin-bottom: 8px;
  }
  .shelf-picker-lent-row.visible { display: flex; }
  .shelf-picker-lent-row label {
    font-size: 13px; color: var(--text-secondary);
    font-weight: 500; flex-shrink: 0;
  }
  .shelf-picker-lent-input {
    flex: 1; padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    font-size: 13px; font-family: inherit;
    background: var(--surface); color: var(--text-primary);
  }
  .shelf-picker-lent-input:focus { outline: none; border-color: #7C3AED; }

  /* Abandon notes row */
  .shelf-picker-notes-row {
    display: none;
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--r-xl); padding: 12px 16px;
    margin-bottom: 8px;
  }
  .shelf-picker-notes-row.visible { display: block; }
  .shelf-picker-notes-row label {
    font-size: 13px; color: var(--text-secondary);
    font-weight: 500; display: block; margin-bottom: 6px;
  }
  .shelf-picker-notes-textarea {
    width: 100%; padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    font-size: 13px; font-family: inherit;
    background: var(--surface); color: var(--text-primary);
    resize: none; height: 70px;
    box-sizing: border-box;
  }
  .shelf-picker-notes-textarea:focus { outline: none; border-color: var(--danger); }

  /* ══ DETAIL PANEL — single consolidated definition ══ */
  
  

  .detail-panel {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 560px;
    /* Leave room for bottom nav + safe area */
    height: min(
      calc(92vh - var(--bottomnav-h, 60px) - env(safe-area-inset-bottom, 0px)),
      700px
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -6px 40px rgba(0,0,0,.25);
    
  }
  @supports not (height: 1dvh) {
    .detail-panel {
      height: min(calc(92vh - 60px), 700px);
    }
  }

  .detail-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  .detail-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    /* Always clear bottom nav + safe area */
    padding-bottom: max(
      20px,
      calc(var(--bottomnav-h, 60px) + env(safe-area-inset-bottom, 0px) + 8px)
    ) !important;
    background: var(--surface);
    border-top: 1px solid var(--divider);
    z-index: 2;
    position: relative;
  }

  @media (min-width: 601px) {
    
    .detail-panel {
      border-radius: var(--r-2xl);
      height: min(88vh, 680px);
      max-width: 520px;
    }
  }

  /* ══ SOCIAL SECTION ══════════════════════════════════════════════════════ */

  /* Tabs */
  .social-tabs {
    display: flex; gap: 8px; margin-bottom: 20px;
    border-bottom: 1px solid var(--divider); padding-bottom: 0;
  }
  .social-tab {
    padding: 10px 16px; font-size: 14px; font-weight: 600;
    color: var(--text-secondary); background: none; border: none;
    border-bottom: 2px solid transparent; cursor: pointer;
    font-family: inherit; transition: all .15s;
    margin-bottom: -1px;
  }
  .social-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
  .social-tab:hover  { color: var(--text-primary); }

  /* Friend card */
  .friend-card {
    background: var(--surface); border-radius: var(--r-xl);
    border: 1px solid var(--border); padding: 14px 16px;
    margin-bottom: 10px; display: flex; align-items: flex-start; gap: 12px;
  }
  .friend-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; flex-shrink: 0;
  }
  .friend-info { flex: 1; min-width: 0; }
  .friend-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
  .friend-books { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .friend-book-chip {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 3px 8px;
    font-size: 11px; color: var(--text-secondary);
    display: flex; align-items: center; gap: 4px;
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .friend-book-rating { color: var(--warning); font-size: 10px; }
  .friend-actions { display: flex; gap: 6px; margin-top: 8px; }
  .friend-actions button {
    padding: 5px 12px; border-radius: var(--r-full);
    font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: inherit; border: 1.5px solid var(--border);
    background: var(--bg); color: var(--text-secondary); transition: all .15s;
  }
  .friend-actions .btn-accept {
    background: var(--success); color: #fff; border-color: var(--success);
  }
  .friend-actions .btn-reject {
    background: var(--danger-pale); color: var(--danger); border-color: var(--danger);
  }
  .friend-actions .btn-remove { color: var(--danger); }

  /* Add friend form */
  .social-add-friend {
    background: var(--surface); border-radius: var(--r-xl);
    border: 1px solid var(--border); padding: 16px; margin-bottom: 16px;
  }
  .social-add-friend h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); }
  .social-input-row { display: flex; gap: 8px; }
  .social-email-input {
    flex: 1; padding: 10px 14px; border: 1.5px solid var(--border);
    border-radius: var(--r-xl); font-size: 14px; font-family: inherit;
    background: var(--bg); color: var(--text-primary);
  }
  .social-email-input:focus { outline: none; border-color: var(--brand); }
  .social-send-btn {
    padding: 10px 18px; background: var(--brand); color: #fff;
    border: none; border-radius: var(--r-xl); font-size: 14px;
    font-weight: 600; cursor: pointer; font-family: inherit;
    white-space: nowrap; transition: background .15s;
  }
  .social-send-btn:hover { background: var(--brand-hover); }

  /* Section headers */
  .social-section-title {
    font-size: 12px; font-weight: 700; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: .06em;
    margin: 16px 0 8px;
  }

  /* Book Club card */
  .club-card {
    background: var(--surface); border-radius: var(--r-xl);
    border: 1px solid var(--border); padding: 16px;
    margin-bottom: 12px; cursor: pointer; transition: box-shadow .15s;
  }
  .club-card:hover { box-shadow: var(--shadow-sm); }
  .club-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .club-icon {
    width: 44px; height: 44px; border-radius: var(--r-lg);
    background: linear-gradient(135deg, #7C3AED, #C4B5FD);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  .club-name { font-size: 16px; font-weight: 800; color: var(--text-primary); }
  .club-members-count { font-size: 12px; color: var(--text-tertiary); }
  .club-current-book {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg); border-radius: var(--r-lg);
    padding: 10px 12px; margin-bottom: 10px;
  }
  .club-current-cover {
    width: 36px; height: 50px; object-fit: cover; border-radius: 3px; flex-shrink: 0;
  }
  .club-current-cover-ph {
    width: 36px; height: 50px; background: var(--divider);
    border-radius: 3px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
  }
  .club-current-info { flex: 1; min-width: 0; }
  .club-current-label { font-size: 10px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }
  .club-current-title { font-size: 13px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .club-current-author { font-size: 11px; color: var(--text-secondary); }

  /* Member progress */
  .club-member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--divider);
  }
  .club-member-row:last-child { border-bottom: none; }
  .club-member-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-pale); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
  }
  .club-member-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .club-member-progress { font-size: 12px; color: var(--text-secondary); }
  .club-member-done { color: var(--success); font-weight: 600; }
  .club-progress-bar-wrap { flex: 1; max-width: 80px; }
  .club-progress-bar {
    height: 4px; background: var(--divider); border-radius: 2px; overflow: hidden;
  }
  .club-progress-fill { height: 100%; background: var(--brand); border-radius: 2px; transition: width .3s; }

  /* Club detail panel */
  
  
  .club-detail-panel {
    background: var(--surface); border-radius: 20px 20px 0 0;
    width: 100%; max-width: 560px;
    /* dvh = dynamic viewport, excludes system bars on Android */
    height: min(90dvh, 720px);
    max-height: 90dvh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 -6px 40px rgba(0,0,0,.2);
    animation: slideUp .25s ease;
  }
  .club-detail-header {
    padding: 16px 20px 12px; border-bottom: 1px solid var(--divider); flex-shrink: 0;
  }
  .club-detail-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; }
  .club-detail-footer {
    flex-shrink: 0;
    padding: 12px 20px;
    padding-bottom: max(20px, calc(16px + env(safe-area-inset-bottom, 0px)));
    border-top: 1px solid var(--divider);
    background: var(--surface);
    display: flex;
    gap: 8px;
  }

  /* Suggested books pool */
  .pool-book {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--divider);
  }
  .pool-book:last-child { border-bottom: none; }
  .pool-book-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .pool-book-author { font-size: 11px; color: var(--text-tertiary); }
  .pool-book-proposer { font-size: 10px; color: var(--brand); }
  .btn-pick-random {
    width: 100%; padding: 12px; background: linear-gradient(135deg,#7C3AED,#C4B5FD);
    color: #fff; border: none; border-radius: var(--r-full);
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: opacity .15s;
  }
  .btn-pick-random:hover { opacity: .9; }

  /* Update progress in club */
  .club-my-progress {
    background: var(--brand-pale); border-radius: var(--r-xl);
    padding: 14px 16px; margin-bottom: 16px;
    border: 1px solid var(--brand);
  }
  .club-my-progress h4 { font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 10px; }
  .club-progress-input-row { display: flex; align-items: center; gap: 8px; }
  .club-page-input {
    width: 80px; padding: 8px 10px; border: 1.5px solid var(--border);
    border-radius: var(--r-lg); font-size: 14px; font-weight: 600;
    font-family: inherit; text-align: center;
    background: var(--surface); color: var(--text-primary);
  }
  .club-page-input:focus { outline: none; border-color: var(--brand); }

  @media (min-width: 601px) {
    .club-detail-panel { border-radius: var(--r-2xl); height: min(88vh,700px); }
    
  }

  /* ══ FRIEND BOOKS GRID ══ */
  .friend-books-grid {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .friend-books-grid::-webkit-scrollbar { display: none; }

  .friend-book-cover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .15s;
  }
  .friend-book-cover-card:hover { transform: translateY(-2px); }

  .friend-book-cover-img {
    width: 66px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
    display: block;
  }
  .friend-book-cover-ph {
    width: 66px;
    height: 96px;
    background: var(--divider);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
  }
  .friend-book-cover-stars {
    font-size: 10px;
    color: var(--warning);
    margin-top: 5px;
    text-align: center;
    line-height: 1;
    letter-spacing: 1px;
  }
  .friend-book-cover-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-top: 4px;
    line-height: 1.3;
    max-width: 68px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .friend-book-cover-author {
    font-size: 9px;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 2px;
    max-width: 68px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .friend-no-books {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 8px;
  }

  /* ══ CLUB BOOK POOL ══ */
  .pool-book {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--divider);
  }
  .pool-book:last-child { border-bottom: none; }
  .pool-book-cover {
    width: 44px; height: 60px; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }
  .pool-book-cover-ph {
    width: 44px; height: 60px; background: var(--divider);
    border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
  }
  .pool-book-info { flex: 1; min-width: 0; }
  .pool-book-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
  .pool-book-author { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
  .pool-book-proposer { font-size: 10px; color: var(--brand); font-weight: 600; }
  .pool-book-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

  /* Vote button */
  .pool-vote-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--r-full);
    border: 1.5px solid var(--border); background: var(--bg);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all .15s;
  }
  .pool-vote-btn.voted {
    background: var(--brand-pale); color: var(--brand); border-color: var(--brand);
  }
  .pool-vote-btn:hover { border-color: var(--brand); color: var(--brand); }
  .pool-vote-count { font-weight: 700; }

  /* Most voted badge */
  .pool-top-badge {
    font-size: 10px; font-weight: 700; color: var(--warning);
    background: var(--warning-pale); padding: 2px 6px;
    border-radius: var(--r-full); flex-shrink: 0;
  }

  /* Book search in pool */
  .pool-search-results {
    max-height: 280px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--r-xl);
    background: var(--surface); margin-top: 6px;
    display: none;
  }
  .pool-search-results.visible { display: block; }
  .pool-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; cursor: pointer;
    border-bottom: 1px solid var(--divider); transition: background .1s;
  }
  .pool-search-item:last-child { border-bottom: none; }
  .pool-search-item:hover { background: var(--bg); }
  .pool-search-item img {
    width: 32px; height: 44px; object-fit: cover; border-radius: 3px; flex-shrink: 0;
  }
  .pool-search-item-ph {
    width: 32px; height: 44px; background: var(--divider);
    border-radius: 3px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
  }
  .pool-search-item-info { flex: 1; min-width: 0; }
  .pool-search-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .pool-search-item-author { font-size: 11px; color: var(--text-tertiary); }

  /* ══ CLUB V3 ══ */
  .club-completed-book {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); border-radius: var(--r-xl);
    border: 1px solid var(--border); border-left: 3px solid var(--success);
    padding: 14px; margin-bottom: 10px;
  }
  .club-completed-cover {
    width: 44px; height: 60px; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }
  .club-completed-cover-ph {
    width: 44px; height: 60px; background: var(--divider);
    border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
  }
  .club-completed-info { flex: 1; min-width: 0; }
  .club-completed-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
  .club-completed-author { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
  .club-completed-meta {
    display: flex; gap: 10px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-tertiary);
  }
  .club-completed-rating { color: var(--warning); font-weight: 700; }
  .club-completed-date   { color: var(--text-tertiary); }

  /* Rating stars for post-book rating */
  .club-rating-stars {
    display: flex; gap: 4px; align-items: center; margin: 8px 0;
  }
  .club-star {
    font-size: 22px; cursor: pointer; transition: transform .1s;
    color: var(--divider); line-height: 1;
    -webkit-text-stroke: 1px var(--warning);
  }
  .club-star.active, .club-star:hover { color: var(--warning); transform: scale(1.1); }

  /* Completion date picker */
  .club-date-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0; border-bottom: 1px solid var(--divider);
    margin-bottom: 10px;
  }
  .club-date-row label { font-size: 13px; color: var(--text-secondary); font-weight: 500; flex: 1; }
  .club-date-input {
    padding: 6px 10px; border: 1.5px solid var(--border);
    border-radius: var(--r-lg); font-size: 13px; font-family: inherit;
    background: var(--surface); color: var(--text-primary);
  }
  .club-date-input:focus { outline: none; border-color: var(--brand); }

  /* Admin actions bar */
  .club-admin-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 12px 0; border-bottom: 1px solid var(--divider);
    margin-bottom: 12px;
  }
  .club-admin-btn {
    padding: 7px 14px; border-radius: var(--r-full);
    font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: inherit; border: 1.5px solid var(--border);
    background: var(--bg); color: var(--text-secondary);
    transition: all .15s;
  }
  .club-admin-btn:hover { border-color: var(--brand); color: var(--brand); }
  .club-admin-btn.danger { border-color: var(--danger-pale); color: var(--danger); background: var(--danger-pale); }
  .club-admin-btn.success { border-color: var(--success); color: var(--success); }

  /* ══ GLOBAL SAFE-AREA FIXES ══════════════════════════════════════════════ */

  /* All panels that slide up from bottom need bottom nav clearance */
  .detail-panel,
  .club-detail-panel,
  .import-panel,
  .preview-panel,
  .sugg-detail-panel {
    /* Never overlap the bottom nav */
    margin-bottom: 0;
  }

  /* All overlays must sit above bottom-nav */
  .detail-overlay,
  .preview-overlay,
  .sugg-detail-overlay,
  .modal-overlay,
  .club-detail-overlay,
  .import-overlay,
  #create-club-overlay {
    z-index: var(--z-overlay) !important;
  }

  /* Toast is always above everything */
  /* toast z-index consolidated above */

  /* Bottom nav: always on top of content, below overlays */
  .bottom-nav {
    z-index: 9999 !important;
    background: var(--surface) !important;
  }

  /* Scrollable areas inside panels: never overflow outside panel */
  .detail-scroll-area,
  .club-detail-scroll,
  .import-scroll {
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
; background: var(--success-pale); }
  .club-admin-btn.purple { border-color: #C4B5FD; color: #7C3AED; background: #EDE9FE; }

  /* ══════════════════════════════════════════════════════
     OVERLAYS — single canonical definitions
     All overlays sit above bottom-nav (z:9999)
     ══════════════════════════════════════════════════════ */

  /* Base overlay — hidden by default */
  .detail-overlay,
  .preview-overlay,
  .sugg-detail-overlay,
  .modal-overlay,
  .import-overlay,
  .club-detail-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.55);
    z-index: var(--z-overlay);
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
  }

  /* Show when .visible is added */
  .detail-overlay.visible,
  .preview-overlay.visible,
  .sugg-detail-overlay.visible,
  .modal-overlay.visible,
  .import-overlay.visible,
  .club-detail-overlay.visible {
    display: flex;
  }

  /* Desktop: center vertically */
  @media (min-width: 601px) {
    .detail-overlay,
    .preview-overlay,
    .sugg-detail-overlay,
    .modal-overlay,
    .club-detail-overlay {
      align-items: center;
  }

  /* Profile panel — sticky header, scrollable body */
  .profile-body-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  .profile-tabs {
    flex-shrink: 0;
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  /* Mobile: bottom sheet, no padding so panel fills width */
  @media (max-width: 600px) {
    .profile-overlay {
      padding: 0 !important;
      align-items: flex-end !important;
    }
    .profile-panel {
      border-radius: 20px 20px 0 0 !important;
      max-width: 100vw !important;
      width: 100vw !important;
      /* Leave room for bottom nav */
      max-height: min(
        92dvh,
        calc(100dvh - env(safe-area-inset-bottom, 0px))
      ) !important;
    }
    .profile-header {
      padding: 14px 16px 12px !important;
      /* Ensure header never clips */
      min-height: 60px;
    }
    .profile-avatar {
      width: 40px !important;
      height: 40px !important;
      font-size: 16px !important;
      flex-shrink: 0 !important;
    }
    /* Profile name area shrinks on small screens */
    .profile-header-info {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }
    .profile-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .profile-email-small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10px !important;
    }
    /* Header buttons always visible */
    .profile-header > div:last-child {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  }
      padding: 24px;
    }
    .import-overlay {
      align-items: center;
      padding: 24px;
    }
  }

  /* Profile close button — always visible, easy to tap */
  .profile-close-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    background: var(--bg) !important;
    border: 1.5px solid var(--border) !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    color: var(--text-secondary);
  }
  .profile-close-btn:hover {
    background: var(--divider) !important;
  }

  /* ── Profile panel scroll fix ───────────────────────────────────────── */
  .profile-overlay.visible { display: flex; }

  /* Panel must have explicit height for flex children to scroll */
  .profile-panel {
    height: min(92dvh, 800px);
  }

  /* Header: always visible, never scrolls away */
  .profile-header {
    flex-shrink: 0 !important;
    background: var(--surface);
    position: relative;
    z-index: 2;
  }

  /* Tabs bar: sticky below header */
  .profile-tabs {
    flex-shrink: 0 !important;
    background: var(--surface);
  }

  /* Scrollable body — must fill remaining space */
  .profile-body-scroll {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;   /* critical for flex scroll */
  }

  /* Close button: always visible, circular, easy tap target */
  .profile-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--bg) !important;
    border: 1.5px solid var(--border) !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    color: var(--text-secondary);
  }

  @media (max-width: 600px) {
    .profile-overlay {
      padding: 0 !important;
      align-items: flex-end !important;
    }
    .profile-panel {
      border-radius: 20px 20px 0 0 !important;
      max-width: 100vw !important;
      width: 100vw !important;
      height: 90dvh !important;
      max-height: 90dvh !important;
    }
    .profile-header {
      padding: 14px 16px 12px !important;
    }
  }

  /* Shelf picker must be above all other overlays */
  .shelf-picker-overlay {
    z-index: 10300 !important;
  }

  /* ══ RESULT CARDS — clean layout ══ */
  .result-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    transition: box-shadow .15s;
    cursor: pointer;
  }
  .result-card:hover { box-shadow: var(--shadow-sm); }
  .result-card-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .result-cover {
    width: 52px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .result-cover-ph {
    width: 52px;
    height: 72px;
    background: var(--divider);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }
  .result-info {
    flex: 1;
    min-width: 0;
  }
  .result-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 3px;
    word-break: break-word;
  }
  .result-author {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
  }
  .result-year {
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .result-actions {
    display: flex;
    gap: 8px;
  }
  .btn-result-add {
    flex: 2;
    padding: 9px 12px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background .15s;
  }
  .btn-result-add:disabled {
    background: var(--success);
    cursor: default;
    opacity: 1;
  }
  .btn-result-details {
    flex: 1;
    padding: 9px 12px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .15s;
  }
  .btn-result-details:hover { border-color: var(--brand); color: var(--brand); }

  /* ══ PREVIEW PANEL — definitive layout ══ */
  .preview-panel {
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface) !important;
    border-radius: 20px 20px 0 0 !important;
    width: 100vw !important;
    max-width: 560px !important;
    height: min(92dvh, 780px) !important;
    max-height: min(92dvh, 780px) !important;
    overflow: hidden !important;
    box-shadow: 0 -6px 40px rgba(0,0,0,.2) !important;
  }
  .preview-hero {
    flex-shrink: 0 !important;
    min-height: 130px !important;
    max-height: 190px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .preview-body {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 16px 20px 8px !important;
    min-height: 0 !important;
  }
  .preview-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--divider) !important;
  }
  .btn-preview-close,
  .btn-preview-read,
  .btn-preview-reading,
  .btn-preview-wish {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 46px !important;
    padding: 10px 6px !important;
    border-radius: var(--r-full) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .btn-preview-close {
    background: transparent !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text-secondary) !important;
  }
  .btn-preview-read {
    background: var(--brand) !important;
    border: none !important;
    color: #fff !important;
  }
  .btn-preview-reading {
    background: var(--info-pale) !important;
    border: 1.5px solid var(--info) !important;
    color: var(--info) !important;
  }
  .btn-preview-wish {
    background: var(--success) !important;
    border: none !important;
    color: #fff !important;
  }
  .btn-preview-read:disabled,
  .btn-preview-reading:disabled,
  .btn-preview-wish:disabled { opacity:.4 !important; cursor:not-allowed !important; }
  .preview-reviews { border-top:1px solid var(--divider); margin-top:16px; padding-top:16px; }

  /* ── Book cards: ensure touch events work on Android ── */
  .book-card {
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    cursor: pointer;
    touch-action: manipulation;
  }
  .book-list-item {
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
    touch-action: manipulation;
  }

  /* ── Rating row in shelf picker ── */
  #sp-rating-row.visible {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    background: var(--bg) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: var(--r-xl) !important;
  }

  /* Avatar button — always opens profile directly */
  .topbar-user-btn { cursor: pointer; }
  /* Hide dropdown on mobile since avatar opens profile directly */
  @media(max-width:900px) {
    /* user-dropdown handled by JS toggle */
  }

  /* Profile overlay must be above topbar */
  .profile-overlay {
    z-index: 10500 !important;
  }
  .detail-overlay,
  .preview-overlay,
  .shelf-picker-overlay,
  .sugg-detail-overlay,
  .modal-overlay,
  .import-overlay,
  .club-detail-overlay {
    z-index: 10500 !important;
  }

  /* ── Start Reading Modal ── */
  .start-reading-modal {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
    z-index: 10600;
    align-items: center; justify-content: center;
  }
  .start-reading-modal.visible { display: flex; }
  .srm-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
  }
  .srm-panel {
    position: relative;
    background: var(--surface);
    border-radius: var(--r-2xl);
    width: min(340px, 90vw);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    
  }
  .srm-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
  }
  .srm-icon { font-size: 28px; flex-shrink: 0; }
  .srm-label {
    font-size: 11px; font-weight: 600; color: var(--text-tertiary);
    text-transform: uppercase; letter-spacing: .06em;
  }
  .srm-title {
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    margin-top: 2px; line-height: 1.3;
  }
  .srm-input-label {
    display: block; font-size: 13px; color: var(--text-secondary);
    font-weight: 500; margin-bottom: 10px;
  }
  .srm-input-row {
    display: flex; align-items: center; gap: 10px;
  }
  .srm-input {
    flex: 1; padding: 12px 14px;
    border: 2px solid var(--border); border-radius: var(--r-lg);
    font-size: 22px; font-family: 'DM Mono', monospace; font-weight: 600;
    color: var(--text-primary); background: var(--bg);
    outline: none; text-align: center;
    transition: border-color .15s;
    -webkit-appearance: none;
  }
  .srm-input:focus { border-color: var(--brand); }
  .srm-pages-label {
    font-size: 13px; color: var(--text-tertiary);
    font-family: 'DM Mono', monospace; white-space: nowrap; flex-shrink: 0;
  }
  .srm-error {
    margin-top: 8px; font-size: 12px;
    color: var(--danger); font-weight: 500;
  }
  .srm-actions {
    display: flex; gap: 10px; margin-top: 20px;
  }
  .srm-btn-cancel {
    flex: 1; padding: 12px;
    background: transparent; border: 1.5px solid var(--border);
    border-radius: var(--r-full); font-size: 14px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
  }
  .srm-btn-confirm {
    flex: 2; padding: 12px;
    background: var(--brand); border: none;
    border-radius: var(--r-full); font-size: 14px; font-weight: 700;
    color: #fff; cursor: pointer; font-family: inherit;
    transition: background .15s;
  }
  .srm-btn-confirm:hover { background: var(--brand-hover); }

  /* ── Wish list: quick start button ── */
  .book-list-start-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    white-space: nowrap;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .book-list-start-btn:hover { background: var(--brand-hover); }

  /* ── Wish card: start button overlay ── */
  .book-cover-wrap { position: relative; }
  .wish-start-btn {
    position: absolute;
    bottom: 8px; left: 50%; transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    border: none; border-radius: var(--r-full);
    font-size: 11px; font-weight: 700;
    padding: 5px 12px; cursor: pointer;
    font-family: inherit; white-space: nowrap;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .wish-start-btn:hover { background: var(--brand-hover); }

  /* Wish card start button — below cover, outside overflow:hidden */
  .wish-start-btn-below {
    display: block;
    width: 100%;
    margin: -2px 0 6px;
    padding: 7px 0;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-full);
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
  }
  .wish-start-btn-below:hover { background: var(--brand-hover); }

  /* ── Start buttons: reliable touch on Android ── */
  .wish-start-btn-below,
  .book-list-start-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(248,167,50,0.3);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 10;
    cursor: pointer;
  }

  /* ── Book list item: clickable area separate from action buttons ── */
  .book-list-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    min-height: 72px;
  }
  .book-list-item:last-child { border-bottom: none; }
  .book-list-item-main {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 14px;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
  }

  /* Start reading modal visibility is controlled exclusively via inline style */

  /* Wish card wrapper - allows startBtn outside book-card onclick */
  .wish-card-wrap {
    display: flex;
    flex-direction: column;
  }
  /* Wish list wrapper - allows startBtn outside list-item onclick */
  .wish-list-wrap {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
  }
  .wish-list-wrap .book-list-item {
    flex: 1;
    border-bottom: none;
  }
  .wish-list-wrap .book-list-start-btn {
    flex-shrink: 0;
    margin-right: 12px;
  }