/* Modern reading app theme inspired by design references */
:root{ 
  --bg:#ebe7e0;
  --fg:#1a1a1a;
  --muted:#6b6b6b;
  --accent:#e86c6c;
  --accent-hover:#d45a5a;
  --panel:#ffffff;
  --panel-hover:#fafafa;
  --border:rgba(0,0,0,.06);
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:0 16px 48px rgba(0,0,0,.12);
  --paper:#fcfbf9;
  --paper-border:transparent;
  --tip-bg:#fff9f5;
  --tip-border:#ffe5d9;
  --highlight-bg:rgba(232,108,108,.12);
  --radius:16px;
  --radius-lg:20px;
  --radius-full:999px;
}
*{ box-sizing:border-box }
html,body,#app{ height:100% }
body{ 
  margin:0; 
  background:var(--bg); 
  color:var(--fg); 
  font:16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Hiragino Kaku Gothic ProN", "Yu Gothic"; 
  text-rendering:optimizeLegibility; 
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; /* Remove blue tap highlight on iOS */
  overscroll-behavior-y:none; /* Prevent pull-to-refresh on mobile */
}

/* iOS safe area support */
@supports (padding: max(0px)) {
  body {
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  
  .bottom-bar {
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    margin-bottom:env(safe-area-inset-bottom);
  }
  
  .sidebar {
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* Button styles */
button{ 
  background:var(--panel); 
  color:var(--fg); 
  border:none;
  padding:10px 18px; 
  border-radius:var(--radius); 
  cursor:pointer; 
  font-size:15px;
  font-weight:500;
  transition:all .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
button:hover{ 
  background:var(--panel-hover);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transform:translateY(-1px);
}
button:active{ transform:translateY(0) }
button:disabled{ opacity:.5; cursor:not-allowed; transform:none }

.container{ max-width:1200px; margin:0 auto; padding:24px }
.book-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px }
.card{ 
  background:var(--panel); 
  padding:20px; 
  border-radius:var(--radius-lg); 
  border:none;
  box-shadow:var(--shadow); 
  transition:all .25s ease;
}
.card:hover{ 
  transform:translateY(-4px); 
  box-shadow:var(--shadow-lg);
}

/* Reading page */
.page{ 
  background:var(--paper); 
  padding:48px 56px; 
  border-radius:var(--radius-lg); 
  border:none;
  box-shadow:var(--shadow-lg); 
  min-height:65vh;
  max-width:850px;
  margin:0 auto;
  -webkit-user-select:text; /* Allow text selection on iOS */
  user-select:text;
  -webkit-touch-callout:default; /* Allow callout menu on iOS */
  touch-action:pan-y; /* Allow vertical scrolling but enable horizontal swipe */
}
.reader-root{ 
  display:flex; 
  flex-direction:column; 
  gap:20px;
  max-width:1100px;
  margin:0 auto;
}
.sentence{ 
  margin:0; 
  position:relative; 
  font-size:22px; 
  display:inline; 
  vertical-align:baseline;
}
.jp{ 
  display:inline; 
  font-size:28px; 
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "ヒラギノ明朝 ProN", serif; 
  letter-spacing:.02em;
  line-height:2;
}
ruby{ ruby-position:over; }
rt{ font-size:11px; color:var(--muted); font-weight:400 }

/* Tooltips */
.ftip{ 
  position:fixed; 
  background:var(--tip-bg); 
  color:var(--fg); 
  padding:12px 16px; 
  border-radius:12px; 
  font-size:14px; 
  border:1px solid var(--tip-border);
  max-width:60vw; 
  z-index:50; 
  box-shadow:0 8px 24px rgba(0,0,0,.15); 
  pointer-events:none;
  white-space:pre-line;
  line-height:1.5;
}
.ftip.token{ font-size:13px; max-width:40vw }
.ftip.center{ transform:translate(-50%, calc(-100% - 16px)); }

/* Token highlighting */
.token{ 
  padding:2px 4px; 
  border-radius:6px;
  transition:all .15s ease;
  cursor:pointer;
  user-select:none;
}
.token.highlight{ 
  background:var(--highlight-bg); 
  box-shadow:0 0 0 2px rgba(232,108,108,.25);
}
.token.selected{
  background:rgba(100,149,237,.2);
  box-shadow:0 0 0 2px rgba(100,149,237,.4);
}
.tokwrap{ 
  position:relative; 
  display:inline-block;
  user-select:none;
}

/* Settings and badges */
.settings{ display:flex; gap:14px; align-items:center }
.settings label{ display:inline-flex; gap:8px; align-items:center; color:var(--muted); font-size:14px }
.settings input[type="checkbox"]{ accent-color:var(--accent) }
.badge{ 
  padding:4px 10px; 
  border-radius:var(--radius-full); 
  background:rgba(232,108,108,.1); 
  color:var(--accent); 
  font-size:13px;
  font-weight:500;
  border:none;
}

/* Bottom control bar - floating, modern design */
.bottom-bar{ 
  position:sticky; 
  bottom:16px;
  display:flex; 
  align-items:center; 
  gap:16px; 
  padding:14px 20px; 
  background:rgba(255,255,255,.95); 
  border:none;
  border-radius:var(--radius-full); 
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
  max-width:900px;
  margin:0 auto;
}
.bottom-bar .bar-center{ 
  display:flex; 
  align-items:center; 
  gap:12px; 
  flex:1;
}
.bottom-bar .bar-right{ 
  display:flex; 
  gap:10px; 
  align-items:center;
}
.bottom-bar .page-slider{ 
  width:100%; 
  max-width:320px;
  height:6px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(0,0,0,.08);
  border-radius:3px;
  outline:none;
}
.bottom-bar .page-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(232,108,108,.4);
}
.bottom-bar .page-slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  border:none;
  box-shadow:0 2px 8px rgba(232,108,108,.4);
}
.bottom-bar .ghost{ 
  background:transparent; 
  border:none;
  box-shadow:none;
  padding:8px 12px;
  color:var(--muted);
  font-weight:500;
}
.bottom-bar .ghost:hover{
  background:rgba(0,0,0,.04);
  color:var(--fg);
}
.bottom-bar button{
  min-width:42px;
  height:42px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

/* Circular icon buttons */
.icon-btn{ 
  width:40px; 
  height:40px; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  border-radius:50%; 
  border:none;
  background:#fff; 
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  font-size:18px;
  transition:all .2s ease;
}
.icon-btn:hover{
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transform:translateY(-2px);
}
.icon-btn:active{ transform:translateY(0) }

/* Reader toggles */
.toggle{ 
  width:42px; 
  height:42px; 
  border-radius:50%; 
  border:none;
  background:#fff; 
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  font-weight:600;
  font-size:16px;
  transition:all .2s ease;
}
.toggle:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.toggle.on{ 
  background:var(--accent); 
  color:#fff;
  box-shadow:0 4px 12px rgba(232,108,108,.3);
}

/* Floating sentence selection bubble */
.selection-bubble{ 
  position:fixed; 
  display:flex; 
  gap:6px; 
  background:rgba(255,255,255,.98); 
  padding:8px; 
  border-radius:var(--radius-full); 
  border:none;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
  z-index:60;
}

/* Selection mode indicator */
.selection-mode .page{
  cursor:crosshair;
}

/* Icon button variants */
.icon-btn.primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 4px 12px rgba(232,108,108,.3);
}
.icon-btn.primary:hover{
  background:var(--accent-hover);
  box-shadow:0 6px 16px rgba(232,108,108,.4);
}
.icon-btn.primary:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.icon-btn.done{
  background:#666;
  color:#fff;
}
.icon-btn.done:hover{
  background:#555;
}

/* Grammar explanation popup */
.grammar-explanation{
  position:fixed;
  transform:translate(-50%, -50%);
  max-width:600px;
  width:90vw;
  background:var(--panel);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:0;
  z-index:100;
  animation:fadeIn .2s ease;
}

@keyframes fadeIn {
  from { opacity:0; transform:translate(-50%, -45%); }
  to { opacity:1; transform:translate(-50%, -50%); }
}

.grammar-explanation-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}

.grammar-explanation-title{
  font-weight:600;
  font-size:16px;
}

.grammar-explanation-close{
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:all .2s ease;
  padding:0;
  min-width:auto;
  box-shadow:none;
}

.grammar-explanation-close:hover{
  background:rgba(0,0,0,.05);
  color:var(--fg);
}

.grammar-explanation-selected{
  padding:12px 20px;
  background:rgba(100,149,237,.08);
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size:24px;
  text-align:center;
  border-bottom:1px solid var(--border);
}

.grammar-explanation-content{
  padding:20px;
  line-height:1.8;
  font-size:15px;
  color:var(--fg);
  max-height:60vh;
  overflow-y:auto;
}

.grammar-explanation-content p{
  margin:0 0 12px 0;
}

.grammar-explanation-content p:last-child{
  margin-bottom:0;
}

.grammar-explanation-content strong{
  color:var(--accent);
  font-weight:600;
}

.grammar-explanation-content em{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-style:normal;
  font-weight:500;
  color:var(--fg);
  background:rgba(100,149,237,.1);
  padding:2px 6px;
  border-radius:4px;
}

/* Rate limit notice */
.rate-limit-notice{
  padding:16px 20px;
  background:rgba(232,108,108,.08);
  color:var(--accent);
  border-radius:var(--radius);
  text-align:center;
  font-size:14px;
  line-height:1.6;
}

/* Home layout with left sidebar */
.home-grid{ 
  display:grid; 
  grid-template-columns:80px 1fr; 
  gap:24px; 
  align-items:start;
  max-width:1400px;
  margin:0 auto;
}
.home-grid.noside{ 
  grid-template-columns:1fr;
  max-width:1200px;
}

.sidebar{ 
  position:sticky; 
  top:24px; 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  align-items:center; 
  padding:16px 12px; 
  background:var(--panel);
  border:none;
  border-radius:var(--radius-lg); 
  box-shadow:var(--shadow);
}
.icon-pill{ 
  width:52px; 
  height:52px; 
  border-radius:var(--radius); 
  background:transparent;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  cursor:pointer;
  transition:all .2s ease;
  color:var(--muted);
}
.icon-pill:hover{
  background:rgba(0,0,0,.04);
  color:var(--fg);
}
.icon-pill.active{ 
  background:var(--accent);
  color:#fff;
  box-shadow:0 4px 12px rgba(232,108,108,.25);
}

.main{ 
  display:flex; 
  flex-direction:column; 
  gap:32px;
  padding:8px 0;
}
.hero{ 
  padding:0;
}
.hero-title{ 
  margin:0 0 12px 0; 
  font-size:42px;
  font-weight:400;
  letter-spacing:-.01em;
  font-family:Georgia, "Times New Roman", serif;
  line-height:1.2;
}
.hero-sub{ 
  margin:0 0 20px 0; 
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}
.muted{ color:var(--muted) }
.hero-actions{ 
  display:flex; 
  gap:12px; 
  align-items:center;
}
.search{ 
  flex:1; 
  padding:14px 18px; 
  border-radius:var(--radius); 
  border:none;
  background:var(--panel);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  font-size:15px;
  transition:all .2s ease;
}
.search:focus{
  outline:none;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.search.inline{ 
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(0,0,0,.1);
  border-radius:0;
  padding-left:0;
  box-shadow:none;
}
.cta{ 
  background:var(--fg);
  color:#fff;
  border:none;
  padding:14px 24px;
  border-radius:var(--radius);
  font-weight:500;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.cta:hover{
  background:#2a2a2a;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.cta.ghost{ 
  background:transparent;
  color:var(--fg);
  box-shadow:none;
}
.section{ 
  display:flex; 
  flex-direction:column; 
  gap:16px;
}
.section-title{ 
  font-weight:600;
  font-size:18px;
}

/* Book grid */
.book-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); 
  gap:24px;
}
.book-tile{ 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
  cursor:pointer;
  transition:transform .25s ease;
}
.book-tile:hover{
  transform:translateY(-4px);
}
.book-tile:hover .book-cover{
  box-shadow:var(--shadow-lg);
}
.book-cover{ 
  aspect-ratio:3/4.2; 
  width:100%; 
  border-radius:var(--radius); 
  background:linear-gradient(135deg,#f0e6db,#e3ecf5); 
  border:none;
  box-shadow:var(--shadow);
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:700; 
  font-size:48px;
  transition:all .25s ease;
  font-family:Georgia, serif;
}
.caption{ 
  font-weight:600; 
  font-size:14px;
  line-height:1.4;
}
.author{ 
  font-size:13px;
  color:var(--muted);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet (iPad) */
@media (max-width: 1024px) {
  .container{ padding:20px }
  
  .home-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .sidebar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    top:auto;
    flex-direction:row;
    justify-content:center;
    padding:12px 16px;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    z-index:100;
    gap:8px;
  }
  
  .icon-pill{
    width:48px;
    height:48px;
    font-size:20px;
  }
  
  .main{
    gap:28px;
    padding-bottom:80px; /* Space for fixed sidebar */
  }
  
  .hero-title{
    font-size:36px;
  }
  
  .book-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:20px;
  }
  
  .page{
    padding:36px 32px;
    min-height:60vh;
  }
  
  .reader-root{
    gap:16px;
  }
  
  .bottom-bar{
    bottom:12px;
    padding:12px 16px;
    gap:12px;
  }
  
  .bottom-bar .page-slider{
    max-width:200px;
  }
}

/* Mobile (iPhone and smaller) */
@media (max-width: 768px) {
  body{
    font-size:15px;
  }
  
  .container{
    padding:16px;
  }
  
  /* Hero section */
  .hero-title{
    font-size:28px;
    margin-bottom:8px;
  }
  
  .hero-sub{
    font-size:15px;
    margin-bottom:16px;
  }
  
  .hero-actions{
    flex-direction:column;
    width:100%;
    gap:10px;
  }
  
  .search{
    width:100%;
    padding:12px 16px;
  }
  
  .cta{
    width:100%;
    text-align:center;
  }
  
  /* Book grid */
  .book-grid{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:16px;
  }
  
  .book-cover{
    font-size:36px;
  }
  
  .caption{
    font-size:13px;
  }
  
  .author{
    font-size:12px;
  }
  
  /* Reading page */
  .page{
    padding:24px 20px;
    border-radius:var(--radius);
    min-height:70vh;
  }
  
  .jp{
    font-size:24px;
    line-height:1.9;
  }
  
  rt{
    font-size:10px;
  }
  
  /* Bottom controls - more compact on mobile */
  .bottom-bar{
    bottom:8px;
    left:8px;
    right:8px;
    padding:10px 12px;
    gap:8px;
    flex-wrap:nowrap;
  }
  
  .bottom-bar button{
    min-width:40px;
    height:40px;
    font-size:14px;
  }
  
  .bottom-bar .ghost{
    padding:6px 10px;
    font-size:14px;
  }
  
  .bottom-bar .bar-center{
    gap:8px;
  }
  
  .bottom-bar .bar-right{
    gap:6px;
  }
  
  .bottom-bar .page-slider{
    max-width:120px;
    min-width:80px;
  }
  
  .toggle{
    width:40px;
    height:40px;
    font-size:15px;
  }
  
  .badge{
    padding:3px 8px;
    font-size:12px;
  }
  
  /* Tooltips - better positioning for mobile */
  .ftip{
    max-width:85vw;
    padding:10px 14px;
    font-size:13px;
  }
  
  .ftip.token{
    max-width:75vw;
    font-size:12px;
  }
  
  /* Selection bubble */
  .selection-bubble{
    padding:6px;
    gap:6px;
    top:60px !important;
  }
  
  .icon-btn{
    width:38px;
    height:38px;
    font-size:16px;
  }

  /* Grammar explanation on mobile */
  .grammar-explanation{
    max-width:calc(100vw - 32px);
    width:calc(100vw - 32px);
  }

  .grammar-explanation-selected{
    font-size:20px;
    padding:10px 16px;
  }

  .grammar-explanation-content{
    font-size:14px;
    padding:16px;
    max-height:50vh;
  }

  .grammar-explanation-header{
    padding:12px 16px;
  }
  
  /* Sidebar at bottom on mobile */
  .sidebar{
    padding:10px 12px;
    gap:6px;
  }
  
  .icon-pill{
    width:44px;
    height:44px;
    font-size:18px;
  }
  
  .main{
    padding-bottom:70px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .hero-title{
    font-size:24px;
  }
  
  .book-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  
  .page{
    padding:20px 16px;
  }
  
  .jp{
    font-size:22px;
  }
  
  .bottom-bar .page-slider{
    max-width:100px;
    min-width:60px;
  }
  
  .badge{
    font-size:11px;
    padding:2px 6px;
  }
}

/* Large screens - prevent content from being too wide */
@media (min-width: 1400px) {
  .container{
    max-width:1400px;
  }
  
  .page{
    max-width:900px;
  }
}

/* Touch improvements for all mobile devices */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  button{
    min-height:44px;
    min-width:44px;
  }
  
  .book-tile{
    transition:none; /* Disable hover animations on touch */
  }
  
  .book-tile:active .book-cover{
    transform:scale(0.98);
  }
  
  /* Disable hover effects on touch devices */
  .token.highlight{
    background:var(--highlight-bg);
  }

  /* Token selection on touch */
  .token.selected{
    background:rgba(100,149,237,.25);
  }

  .selection-mode .token{
    cursor:pointer;
  }
  
  /* Better tap feedback */
  button:active{
    transform:scale(0.96);
  }
  
  .icon-btn:active,
  .toggle:active{
    transform:scale(0.94);
  }

  /* Touch-friendly token selection */
  .token{
    padding:4px 6px;
    margin:0 1px;
  }
}