:root{--mobile-nav:calc(58px + env(safe-area-inset-bottom));--header-height:116px;color-scheme:light}html,body{width:100%;height:100%;overflow:hidden}body{padding-top:env(safe-area-inset-top);background:#f5f8fa}button,.button,input,select{font-size:14px}button,.button{min-height:42px}input,select,textarea{font-size:16px}.topbar{height:var(--header-height);padding:10px 14px;gap:8px;display:grid;grid-template-columns:1fr auto;box-sizing:border-box}.brand{grid-column:1;font-size:16px}.brand h1{font-size:19px;margin:0}.brand-piece{width:27px;height:33px}.book-controls{grid-column:1 / -1;grid-row:2;width:100%;gap:7px}.book-controls select{min-width:0;width:100%;height:42px}.top-actions{display:none}.workspace{height:calc(100dvh - var(--header-height) - var(--mobile-nav) - env(safe-area-inset-top));min-height:0;display:block;overflow:hidden}.reader-pane{height:100%;min-height:0;width:100%;display:flex;flex-direction:column}.reader-toolbar{padding:7px 10px;flex-wrap:wrap;gap:8px;min-height:54px}.reader-toolbar button{min-width:35px}.pager input{width:53px}.reader-options{gap:7px}.reader-options .sync{font-size:12px}.pdf-scroll{min-height:0;padding:10px;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}.reader-footer{padding:9px 10px;gap:8px;min-height:70px;font-size:12px}.reader-footer button{font-size:12px;min-width:83px;padding:5px 8px}.reader-footer small{font-size:11px}.reader-footer .wheel-help{display:none}.study-pane{height:100%;overflow:auto;min-width:0;max-width:none;padding:12px 14px 22px;box-sizing:border-box;overscroll-behavior:contain}.study-head h2{font-size:18px}.board-area{width:100%;max-width:610px;margin:auto}.board{width:100%;aspect-ratio:1}.board-wrap{margin:14px 12px 12px 0}.board .cell{min-height:0;min-width:0;padding:0;touch-action:manipulation}.piece{font-size:clamp(19px,6.2vw,36px)}.piece.long{font-size:clamp(11px,3.8vw,22px);line-height:1.02}.board-info{gap:5px;flex-wrap:wrap}.board-info button{font-size:12px;padding:6px 9px}.hand-row{font-size:11px}.hand-pieces button{min-height:36px}.playback{position:relative;gap:5px}.playback button{min-width:38px;padding:6px}.playback #ply-label{font-size:13px}.move-slider{height:27px;margin:4px 0 10px}.ai-panel{margin-top:10px;padding:12px}.ai-controls{gap:5px;flex-wrap:wrap}.ai-controls label{font-size:12px}.ai-controls select{font-size:14px}.ai-head button{font-size:13px}.ai-candidates button{font-size:12px}.mobile-queue-actions{display:flex;gap:8px;margin:10px 0}.mobile-queue-actions button{flex:1;font-size:12px}.import-actions{flex-wrap:wrap;gap:7px}.import-actions button{flex:1;min-width:100px;font-size:13px}.mobile-tabs{position:fixed;bottom:0;left:0;right:0;z-index:12;display:flex;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));height:var(--mobile-nav);box-sizing:border-box;background:#102e3d;box-shadow:0 -2px 10px #102e3d22}.mobile-tabs button{flex:1;padding:6px 3px;min-width:0;color:#eaf2f7;background:transparent;border-color:transparent;font-size:13px}.mobile-tabs button[aria-pressed=true]{background:#23546b;border-color:#477289}.pane-splitter{display:none}body[data-view=book] .study-pane{display:none}body[data-view=board] .reader-pane{display:none}dialog{width:calc(100vw - 26px);max-width:600px;max-height:calc(100dvh - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:20px;border-radius:15px;box-sizing:border-box}dialog .dialog-head h2{font-size:19px}#connection-form label{display:flex;flex-direction:column;gap:7px;margin:15px 0}#connection-form input{width:100%;box-sizing:border-box;padding:11px}#connection-status,#queue-status{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.analysis-history article{border:1px solid #bfd0dc;border-radius:9px;margin:12px 0;padding:12px}.analysis-history p{font-size:12px}.mobile-menu{display:flex;flex-direction:column;gap:9px}.toast{bottom:calc(var(--mobile-nav) + 12px);max-width:calc(100vw - 36px);box-sizing:border-box}#engine-dialog,#engine-file-dialog{display:none}[hidden]{display:none!important}
@media(min-width:760px),(orientation:landscape) and (min-width:600px){:root{--header-height:68px}.topbar{display:flex;flex-wrap:nowrap;height:68px}.brand{white-space:nowrap}.book-controls{max-width:560px}.workspace{display:grid;grid-template-columns:var(--book-width,55%) 14px minmax(0,1fr)}body[data-view] .reader-pane,body[data-view] .study-pane{display:flex}.study-pane{display:block!important}.pane-splitter{display:flex;touch-action:none}.reader-toolbar{justify-content:space-between}.piece{font-size:clamp(18px,3.5vw,34px)}.piece.long{font-size:clamp(11px,2vw,21px)}.mobile-tabs [data-view]{display:none}.mobile-tabs{justify-content:flex-end}.mobile-tabs button{flex:0 1 180px}.study-pane{padding:12px 18px}.reader-footer{min-height:64px}}
@media(max-width:380px){.reader-toolbar{padding:5px;gap:3px}.reader-options{gap:3px}.reader-toolbar button{min-width:30px;padding:4px}.reader-options .sync{font-size:11px}.study-pane{padding:10px}.topbar{padding:8px 10px}.mobile-tabs button{font-size:12px}}
.study-layout-controls{flex-wrap:wrap;gap:8px}.study-layout-controls label{min-width:0}.study-layout-controls button{font-size:12px}.board .piece{font-size:min(30px,7cqw)}.board .piece.long{font-size:min(20px,4.5cqw)}.reader-footer{flex-wrap:wrap}.reader-footer>div:first-child{flex:1 1 180px}.study-pane{overflow:auto}.dialog-actions{flex-wrap:wrap}.game-row{white-space:normal}.game-row span{min-width:0}.game-row small{flex-shrink:0}
@media(max-width:800px){.study-deck{display:block}.study-board-pane,.study-analysis-pane,.study-board-pane .study-board-view{overflow:visible}.study-board-pane{display:block}.study-pane{height:100%;overflow:auto}.study-board-pane .board-area{max-width:100%}.study-layout-controls{max-width:none}}
@media(min-width:801px){body[data-view] .study-pane{display:flex!important;flex-direction:column;overflow:hidden}.study-deck{min-height:0;flex:1}.study-board-pane .study-board-view{overflow:auto}.study-analysis-pane{overflow:auto}}
@media(max-height:600px){body[data-view] .study-pane{display:block!important;overflow:auto}.study-deck{display:block}.study-board-pane{display:block}.study-board-pane,.study-analysis-pane,.study-board-pane .study-board-view{overflow:visible;padding-right:0}.study-splitter{display:none}.study-board-pane .board-area{max-width:100%}}

#ocr-check-preview canvas{display:block;width:100%;height:auto;border:1px solid #bfd0dc;border-radius:8px}#ocr-check-status{white-space:pre-wrap;overflow-wrap:anywhere}#ocr-check-results{padding-left:22px;line-height:1.8}

/* iPhone landscape notch: web CSS owns the safe area (contentInset=never). */
body{box-sizing:border-box;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.mobile-tabs{padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}

/* Book removal is available in the touch-friendly settings menu. */
@media(max-width:900px){.topbar #delete-book{display:none}}

@media(max-width:800px){.topbar #app-update-button,.topbar #pc-sharing-button{display:none}}

.book-controls select{background:#f5f8fa;color:#152f3c;-webkit-text-fill-color:#152f3c}.book-controls select option{background:#f5f8fa;color:#152f3c}