.sr-app { max-width: 720px; margin: 0 auto; padding: 8px 12px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.sr-header { padding: 8px 4px; }
.sr-header h2 { margin: 8px 0; font-size: 24px; font-weight: 800; }

.sr-list { display: grid; gap: 12px; }
.sr-item { background: #f5f5f5; border-radius: 14px; }
.sr-open { display:block; width:100%; text-align:left; background:transparent; border:0; padding:14px 16px; cursor:pointer; }
.sr-item-title { font-weight: 800; font-size: 18px; color: #ec6e7a;}
.sr-item-title:hover{ font-weight: 800; font-size: 18px; color: #000;}
.sr-item-meta { color:#616161; font-size: 12px; margin-top: 2px; }
.sr-item-excerpt { color:#424242; font-size: 14px; margin-top: 6px; }

.sr-reader { }
.sr-reader-head { display:flex; gap: 12px; align-items:center; padding: 8px 0 12px; position: sticky; top: 0; background: #fff; z-index: 2; }
#sr-back { border:0; background:#e0e0e0; padding:8px 12px; border-radius:10px; font-weight:700; }
.sr-reader-title { font-weight:800; font-size: 18px; }

.sr-reader-body { display: grid; gap: 12px; padding-bottom: 80px; }
.sr-section { background:#fafafa; border-radius: 14px; padding: 14px 16px; }
.sr-sec-title { font-weight: 800; margin-bottom: 6px; }
.sr-sec-body { line-height: 1.55; }

.sr-audio-btn { border:0; background: #1e88e5; color:#fff; padding: 8px 12px; border-radius: 10px; font-weight:700; margin-top:10px; }
.sr-audio-btn.playing { background:#d32f2f; }

/* Flashlight floating button */
.sr-flashlight { position: fixed; bottom: 40px; z-index: 3; }
.sr-flashlight.sr-pos-right { right: 18px; }
.sr-flashlight.sr-pos-left { left: 18px; }
#sr-flash-btn { border:0; background:#212121; color:#fff; padding: 12px 16px; border-radius: 22px; font-weight:800; }

/* Overlay fallback: fullscreen white */
#sr-flash-overlay { position: fixed; inset: 0; background: #fff; z-index: 2; }
.sr-no-scroll { overflow: hidden; }