:root{
  --bg1:#0e132a;
  --bg2:#1b1c3a;
  --grad1:#6a5cff; /* indigo-violet */
  --grad2:#40e0d0; /* turquoise */
  --card-bg:rgba(255,255,255,0.08);
  --card-stroke:rgba(255,255,255,0.12);
  --text:#eaf0ff;
  --muted:#b9c0d6;
  --accent:#7af0ff;
  --heart:#ff647c;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter","Heebo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(122,240,255,0.15), transparent 60%),
    radial-gradient(1000px 600px at -20% 100%, rgba(106,92,255,0.18), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
}

.page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

.stack{ position:relative; width:min(740px, 92vw); }

.card{
  position:relative;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid var(--card-stroke);
  box-shadow: var(--shadow);
  padding: clamp(18px, 4.5vw, 36px);
  overflow:hidden;
  transform-origin:center;
  touch-action: pan-y;
  animation: slideIn .35s ease;
}

.quote-wrap{ padding: 8px 6px 2px; }

/* Split quotes area */
.quotes-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 24px);
  align-items:start;
  padding-bottom: 6px;
}
.quotes-grid::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  transform: translateX(-0.5px);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.18), transparent);
  opacity:.6;
}

blockquote{ margin:0; }

.quote{
  font-size: clamp(18px, 4.2vw, 30px);
  font-weight: 600;
  line-height:1.25;
  letter-spacing: 0.2px;
  word-break: break-word;
}
.quote--hebrew{
  font-family: "Heebo","Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  direction: rtl;
  text-align: right;
}
.quote--english{
  direction: ltr;
  text-align: left;
}

.author{
  text-align: right;
  margin: 10px 2px 6px;
  font-size: clamp(14px, 2.6vw, 16px);
  color: var(--muted);
  font-weight: 400;
}

/* Bottom toolbar (unchanged) */
.toolbar{
  margin-top: 12px;
  display:flex;
  gap:10px;
  padding-top: 12px;
  border-top: 1px solid var(--card-stroke);
}
.icon-btn{
  -webkit-tap-highlight-color: transparent;
  border:0;
  outline:0;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;
}
.icon-btn svg{ fill: var(--muted); transition: fill .2s ease, transform .12s ease; }
.icon-btn:hover svg, .icon-btn:focus-visible svg{ fill: var(--accent); }
.icon-btn:active{ transform: translateY(1px) scale(0.98); }
.icon-btn.favorited svg{ fill: var(--heart); }

/* Edge arrows */
.edge-arrow{
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: rgba(234,240,255,0.55);
  display:grid;
  place-items:center;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.edge-arrow--left{ left: max(6px, 2vw) }
.edge-arrow--right{ right: max(6px, 2vw) }
.edge-arrow:hover,
.edge-arrow:focus-visible{
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
.edge-arrow:active{ transform: scale(0.98) }

.toast{
  position:absolute;
  left:50%;
  bottom:-24px;
  translate:-50% 0;
  background: rgba(255,255,255,0.1);
  border:1px solid var(--card-stroke);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, bottom .25s ease;
}
.toast.show{ opacity:1; bottom:-12px; }

.info{ border:0; padding:0; width: min(520px, 92vw); background: transparent; }
.info::backdrop{ background: rgba(0,0,0,0.5); }
.info__body{
  border-radius: var(--radius);
  background: var(--card-bg);
  border:1px solid var(--card-stroke);
  padding: 20px 20px 16px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.pill-btn{
  margin-top:12px;
  padding:10px 16px;
  border-radius:999px;
  border:0;
  color:#0f1224;
  background: linear-gradient(90deg, var(--grad1), var(--grad2));
  font-weight: 600;
  cursor: pointer;
}

/* Swipe animations */
@keyframes slideIn{
  from{opacity:.5; transform: translateY(14px) scale(0.985)}
  to{opacity:1; transform: translateY(0) scale(1)}
}
.swipe-left{
  transition: transform .28s ease, opacity .28s ease;
  transform: translateX(-120%) rotate(-6deg) scale(0.96);
  opacity:0;
}
.swipe-right{
  transition: transform .28s ease, opacity .28s ease;
  transform: translateX(120%) rotate(6deg) scale(0.96);
  opacity:0;
}
.card.dragging{
  transition: none !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .swipe-left, .swipe-right{
    animation: none !important;
    transition: none !important;
  }
}