.reading-modal{--reading-gold:#e2bf62;--reading-line:#364961;--reading-muted:#a9bbd1;position:fixed;inset:0;z-index:160;display:grid;place-items:stretch;padding:0;border:0;border-radius:0;color-scheme:dark}
.reading-modal.hidden,.reading-modal [hidden],.reading-import-panel.hidden{display:none!important}
.reading-backdrop{position:absolute;inset:0;width:100%;height:100%;background:#020611d9;border:0}
.reading-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100dvh;min-height:0;overflow:hidden;border:0;border-radius:0;background:#08111f;color:#e7edf8;box-shadow:none}
.reading-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 26px;border-bottom:1px solid #2d3e55;background:linear-gradient(110deg,#0a1424,#172130)}
.reading-header p{margin:0 0 3px;color:#9ebfdc;font-size:9px;letter-spacing:2.4px}
.reading-header h1{margin:0;color:#f0d37d;font-size:26px;line-height:1.3}
.reading-header small{display:block;margin-top:5px;color:var(--reading-muted);font-size:12px}
.reading-header>button{flex:none;width:44px;height:44px;border:1px solid #455b77;border-radius:12px;background:#172438;color:#f5d77d;font-size:28px;cursor:pointer}
.reading-workspace{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#405572 #0b1523;padding:0 24px 36px}
.reading-modal :is(button,input,textarea,select){font-family:inherit}
.reading-modal :is(button,input,textarea,select):focus-visible{outline:2px solid #f0cd71;outline-offset:3px}
.reading-modal button{cursor:pointer}
.reading-modal button:disabled{cursor:not-allowed;opacity:.5}
.reading-tabs{box-sizing:border-box;position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 56px;gap:12px;width:calc(100% + 48px);margin:0 -24px;padding:18px 24px 16px;border-bottom:1px solid #2d3e55;background:#08111f}
.reading-tabs button{min-height:50px;padding:10px 12px;border:1px solid var(--reading-line);border-radius:12px;background:#111d2d;color:#c7d4e5;font-size:14px;font-weight:650;white-space:nowrap;transition:border-color .15s,color .15s,box-shadow .15s}
.reading-tabs button[aria-pressed=true]{border-color:var(--reading-gold);color:#f5d67b;box-shadow:inset 0 -2px var(--reading-gold)}
.reading-tabs .reading-ai-open{display:grid;place-items:center;min-width:0;padding:0;border-color:#a7894e;background:#111d2d;box-shadow:inset 0 0 15px #d7b65e13}
.reading-ai-open img{display:block;width:48px;height:48px;object-fit:contain;pointer-events:none}
@media(hover:hover){.reading-tabs .reading-ai-open:hover{border-color:#f0cd71;box-shadow:0 0 15px #e2bf6240}}
@media(hover:hover){.reading-tabs button:hover,.reading-header>button:hover{border-color:#f0cd71;color:#ffe4a0}}
.reading-feature-status{margin:0 0 14px;padding:10px 14px;border-left:2px solid #6c9dc8;background:#101e30;border-radius:4px;color:#c0d0e3;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.reading-feature-status:empty{display:none}
.reading-feature-status.is-error{border-color:#f09188;background:#2d1d26;color:#ffc1b8}
.reading-import-panel{margin-bottom:20px;padding:22px;border:1px solid var(--reading-line);border-radius:16px;background:#0e1929}
.reading-import-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.reading-import-heading h2{margin:0;color:#f0d37d;font-size:19px}
.reading-import-heading p{margin:5px 0 0;color:var(--reading-muted);font-size:12px}
.reading-saved-controls{display:flex;gap:8px;max-width:55%;min-width:0}
.reading-modal :is(.reading-saved-controls select,.reading-article-fields input,.reading-article-fields textarea){min-width:0;border:1px solid #405571;border-radius:9px;background:#08111e;color:#e6edf7;font:inherit}
.reading-saved-controls select{max-width:360px;padding:9px 12px;min-height:44px;flex:1;width:100%}
.reading-saved-controls button,.reading-dropzone button{flex:none;min-height:44px;padding:9px 16px;border:1px solid #50627b;border-radius:9px;background:#19283d;color:#e6d196;font-size:13px}
.reading-dropzone{margin-top:20px;padding:16px;border:1px solid #587494;border-radius:14px;background:#08111e;color:#dce7f5;transition:border-color .15s,box-shadow .15s}
.reading-composer:focus-within{border-color:var(--reading-gold);box-shadow:0 0 0 1px #e2bf6233}
.reading-composer>textarea{display:block;box-sizing:border-box;width:100%;min-height:160px;max-height:360px;resize:vertical;padding:4px 2px 14px;border:0;border-radius:0;background:transparent;color:#e6edf7;font:inherit;font-size:16px;line-height:1.9;outline:none!important;box-shadow:none}
.reading-composer>textarea::placeholder{color:#91a6bf;opacity:1}
.reading-composer.has-ocr>textarea{min-height:76px}
.reading-composer-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid #26394e}
.reading-composer-toolbar>p{flex:1;min-width:100px;margin:0;font-size:12px;overflow-wrap:anywhere}
.reading-composer-toolbar>span{font-size:11px;color:var(--reading-muted);white-space:nowrap;margin-left:auto}
.reading-composer-toolbar button span{font-size:19px;vertical-align:-1px;margin-right:3px}
.reading-dropzone.is-dragging{border-color:#f0cf71;box-shadow:inset 0 0 0 1px #f0cf71}
.reading-dropzone strong{font-size:14px;font-weight:600}
.reading-dropzone p{margin:6px 0 0;color:var(--reading-muted);font-size:12px;overflow-wrap:anywhere}
.reading-article-fields{display:grid;gap:8px;margin-top:20px}
.reading-article-fields label{color:#bdcce0;font-size:13px}
.reading-article-fields>input{padding:10px 12px;min-height:44px}
.reading-editor-heading{display:flex;justify-content:space-between;gap:8px;margin-top:8px;align-items:center}
.reading-editor-heading span{color:var(--reading-muted);font-size:11px}
.reading-article-fields textarea{min-height:220px;max-height:480px;padding:14px;resize:vertical;font-size:16px!important;line-height:1.9}
.reading-article-fields :is(input,textarea)::placeholder{color:#849bb5;opacity:1}
.reading-editor-footer{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:12px}
.reading-editor-footer>span{color:var(--reading-muted);font-size:12px}
.reading-editor-footer>div{display:flex;gap:10px}
.reading-editor-footer button{min-height:44px;padding:10px 18px;border:1px solid #d8b657;border-radius:10px;background:var(--reading-gold);color:#101827;font-size:14px;font-weight:700}
.reading-editor-footer #readingSaveArticle{border-color:#455b77;background:#18263a;color:#e4d29e}
#readingAnalyzer{display:block;scroll-margin-top:14px}
.reading-open{overflow:hidden}
.reading-open #aiOrb{visibility:hidden}
@media(max-width:700px){
 .reading-modal{padding:0;place-items:stretch}
 .reading-shell{width:100%;height:100dvh;border:0;border-radius:0}
 .reading-header{min-height:52px;padding:6px 10px}
 .reading-header p{display:none}
 .reading-header h1{font-size:23px}
 .reading-header small{font-size:11px}
 .reading-header>button{width:40px;height:40px}
 .reading-workspace{padding:0 10px max(20px,env(safe-area-inset-bottom))}
 .reading-tabs{position:static;display:flex;align-items:center;gap:8px;width:calc(100% + 20px);margin:0 -10px;padding:8px 10px 10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
 .reading-tabs::-webkit-scrollbar{display:none}
 .reading-tabs [data-reading-tab]{flex:none;min-height:40px;padding:8px 14px;font-size:12px;scroll-snap-align:start}
 .reading-tabs .reading-ai-open{position:fixed;top:7px;right:62px;z-index:6;width:42px;height:42px;min-height:42px;padding:0}
 .reading-ai-open img{width:38px;height:38px}
 .reading-import-panel{padding:14px;border-radius:12px}
 .reading-import-heading{align-items:stretch;flex-direction:column;gap:12px}
 .reading-saved-controls{max-width:none}
 .reading-saved-controls select{max-width:none;font-size:16px}
 .reading-dropzone{padding:14px;gap:12px;flex-wrap:wrap;margin-top:14px}
 .reading-dropzone strong{font-size:13px}
 .reading-composer-toolbar{gap:10px}
 .reading-composer-toolbar>p{flex-basis:calc(100% - 135px)}
 .reading-composer-toolbar>span{margin-left:0}
 .reading-article-fields{margin-top:16px}
 .reading-article-fields>input{font-size:16px}
 .reading-article-fields textarea{min-height:240px}
 .reading-editor-footer{align-items:stretch;flex-direction:column}
 .reading-editor-footer{position:sticky;bottom:-1px;z-index:2;margin:12px -14px -14px;padding:12px 14px max(12px,env(safe-area-inset-bottom));border-top:1px solid #344960;border-radius:0 0 12px 12px;background:#0e1929;box-shadow:0 -10px 20px #08111f66}
 .reading-editor-footer>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px}
 .reading-editor-footer button{padding:10px 6px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.reading-modal *{scroll-behavior:auto!important;transition:none!important}}

/* The site's global text-selection rule stays in place for explanations.
   Students can still select and copy the Japanese source they entered. */
.reading-modal #readingArticleText,.reading-modal #readingOcrText{-webkit-user-select:text!important;user-select:text!important}

.reading-history-panel{padding:22px;border:1px solid var(--reading-line);border-radius:16px;background:#0e1929}
.reading-history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.reading-history-heading h2{margin:0;color:#f0d37d;font-size:19px}
.reading-history-heading span,.reading-history-meta,#readingHistoryState{color:var(--reading-muted);font-size:12px}
#readingHistorySearch,.reading-history-edit input{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #405571;border-radius:9px;background:#08111e;color:#e6edf7;font:inherit}
#readingHistoryState:empty{display:none}
.reading-history-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.reading-history-row{display:flex;align-items:center;gap:20px;padding:14px 16px;border:1px solid #354962;border-radius:12px;background:#101d2d;min-width:0}
.reading-history-content{flex:1;min-width:0}
.reading-history-title{display:block;max-width:100%;padding:4px 0;border:0;background:transparent;color:#e7edf8;text-align:left;font-size:16px;line-height:1.6;overflow-wrap:anywhere;min-height:44px}
.reading-history-title:hover{color:#f5d67b}
.reading-history-meta{margin:4px 0 0}
.reading-history-actions{display:flex;gap:8px;flex:none}
.reading-history-actions button,.reading-history-edit button{min-height:44px;padding:8px 12px;border:1px solid #455b77;border-radius:9px;background:#19283d;color:#d6e1ef;font-size:13px;white-space:nowrap}
.reading-history-actions button:hover{border-color:#e2bf62}
.reading-history-pin[aria-pressed=true]{border-color:#bca154;color:#f5d67b}
.reading-history-edit{display:flex;gap:8px;align-items:center}
.reading-history-edit input{font-size:16px}
@media(max-width:700px){
 .reading-tabs [data-reading-tab=history]{grid-column:auto}
 .reading-history-panel{padding:14px;border-radius:12px}
 #readingHistorySearch{font-size:16px}
 .reading-history-row{padding:12px;gap:10px;flex-wrap:wrap}
 .reading-history-content{flex-basis:100%}
 .reading-history-actions{margin-left:auto}
 .reading-history-edit{flex-wrap:wrap}
 .reading-history-edit input{flex-basis:100%}
}