:root {
  --bg: #0b0f14;
  --card: #121820;
  --text: #e6eef7;
  --muted: #a8b3c7;
  --primary: #3ea0ff;
  --primary-600: #2b7ad1;
  --danger: #ff5d5d;
  --accent: #7de38b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }

.app-header { padding: 16px; text-align: center; }
.app-header h1 { margin: 8px 0 0; font-size: 22px; font-weight: 700; }
.app-header .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

main { padding: 12px; display: grid; gap: 16px; }

.capture-section, .preview-section { background: var(--card); border-radius: 14px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.capture-section h2, .preview-section h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }

.upload-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.upload-actions.ios .btn { border-radius: 12px; }

.images-list { display: grid; grid-auto-rows: 88px; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-y: auto; max-height: 42vh; padding-right: 2px; }
.thumb { position: relative; width: 100%; height: 88px; border-radius: 8px; overflow: hidden; border: 1px solid #1b2430; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 12px; padding: 2px 6px; font-size: 12px; }

.btn { background: #1a2430; color: var(--text); border: 1px solid #223042; border-radius: 12px; padding: 12px 14px; font-size: 15px; transition: transform 80ms ease, box-shadow 120ms ease; }
.btn.pressed { transform: scale(0.97); box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }
.btn:disabled { opacity: 0.5; }
.btn.primary { background: var(--primary); border-color: var(--primary-600); color: #081018; font-weight: 600; }
.btn.danger { background: var(--danger); border-color: #c34545; color: #2b0a0a; }
.btn.full-width { grid-column: 1 / -1; width: 100%; margin-top: 10px; }

.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* iOS-like segmented control */
.tabs.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #0f1620; border: 1px solid #223042; border-radius: 10px; overflow: hidden; }
.tabs.segmented .tab { background: transparent; border: none; color: var(--muted); padding: 8px; font-weight: 600; }
.tabs.segmented .tab.active { background: #162233; color: var(--text); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.text-block { background: #0e141b; border: 1px solid #1d2a3a; border-radius: 12px; padding: 14px; white-space: pre-wrap; line-height: 1.7; min-height: 140px; font-size: 16px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

.page { background: #0e141b; border: 1px solid #1d2a3a; border-radius: 10px; padding: 10px; margin-bottom: 8px; white-space: pre-wrap; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 8px 12px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .2s ease; max-width: 80vw; text-align: center; z-index: 100; }
.toast.show { opacity: 1; }

.popover { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; display: grid; place-items: center; background: rgba(0,0,0,0.35); z-index: 1000; }
.popover.hidden { display: none; }
.popover-content { width: min(86vw, 420px); background: #0f1620; border: 1px solid #1c2a3d; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden; font-size: 14px; opacity: 0; transform: scale(0.96); transition: opacity .18s ease, transform .18s ease; }
.popover-content.visible { opacity: 1; transform: scale(1); }
.popover-content.fixed { position: fixed; transform: translate(-50%, 0); }
.popover-text { padding: 10px; white-space: pre-wrap; line-height: 1.6; font-size: 14px; max-height: 50vh; overflow-y: auto; }
.popover-actions { display: grid; grid-auto-flow: column; gap: 8px; padding: 6px; border-top: 1px solid #1c2a3d; }

.hidden { display: none !important; }

/* Immersive reading view */
.immersive { position: fixed; inset: 0; background: #000; color: #f0f0f0; padding: 12px; display: flex; flex-direction: column; z-index: 10; overflow: hidden; }
.reading-header { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.reading-header h2 { flex: 1; margin: 0; font-size: 18px; }
.immersive-text { flex: 1; overflow: hidden; background: #111; border: none; padding: 16px; font-size: 17px; line-height: 1.85; letter-spacing: 0.2px; }
.reading-actions { display: grid; grid-auto-flow: column; gap: 8px; padding: 8px 0; border-top: 1px solid #333; }

.hl { background: rgba(255, 230, 150, 0.6); border-radius: 4px; padding: 0 2px; box-shadow: 0 0 0 0 rgba(255,255,255,0.25); animation: hl-pulse 180ms ease-out; }
.hl.word { background: rgba(255, 241, 173, 0.9); }
.hl.sentence { background: rgba(173, 216, 255, 0.35); }
@keyframes hl-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25); } 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }

/* removed keyframes, use transition for iOS-like feel */

@media (min-width: 720px) {
  main#uploadView { grid-template-columns: 1fr 1fr; align-items: start; }
}

.doc-icons { margin-left: auto; display: grid; grid-auto-flow: column; gap: 8px; }
.icon-btn { width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; background: #1a2430; border: 1px solid #223042; color: #d7e6ff; font-size: 16px; }
.icon-btn.pressed { transform: scale(0.95); }

.upload-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.capture-section { margin-bottom: 16px; }

.preview-section { max-height: 68vh; overflow: hidden; display: flex; flex-direction: column; }
.preview-header { position: sticky; top: 0; background: var(--card); padding-bottom: 8px; z-index: 2; }
.preview-section h2, .tabs { flex: 0 0 auto; }
.tab-panel { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* Immersive reading scroll enabled */
.immersive { position: fixed; inset: 0; background: #000; color: #f0f0f0; padding: 12px; display: flex; flex-direction: column; z-index: 10; overflow: hidden; }
.reading-header { flex-shrink: 0; }
.immersive-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #111; border: none; padding: 16px; font-size: 17px; line-height: 1.85; letter-spacing: 0.2px; }