:root{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:light;--accent:#176f68;--accent-soft:#176f681c;--text-scale:1;--ink:#17343b;--muted:#708688;--surface:#fff;--paper:#f4f7f5;--line:#dfe8e4;--weak:#ecf3ef;--deep:#153740;--shadow:#0e322519;--border-radius:20px;background:var(--paper);color:var(--ink)}
:root[data-theme='dark']{color-scheme:dark;--ink:#e7f2ed;--muted:#9aaea9;--surface:#243036;--paper:#141c20;--line:#3a494c;--weak:#28393d;--deep:#263c43;--shadow:#0004}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100svh;background:var(--paper);font-size:calc(14px * var(--text-scale))}button,input,textarea,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}svg{flex-shrink:0;vertical-align:middle}#app{min-height:100svh}.shell{max-width:640px;margin:auto;min-height:100svh;padding:22px 18px calc(122px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.brand{display:flex;gap:11px;align-items:center}.brand-mark{width:45px;height:45px;border-radius:16px;color:#fff;background:var(--accent);display:grid;place-items:center;font-size:23px;font-weight:850}.brand h1{margin:0;font-size:21px;letter-spacing:-.5px}.brand small{font-size:9px;letter-spacing:1.3px;color:var(--muted);font-weight:800}.circle-btn{min-width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:15px;background:var(--surface);display:grid;place-items:center;color:var(--ink)}.circle-btn svg{width:20px}.eyebrow{font-weight:850;color:var(--accent);letter-spacing:2px;font-size:10px;margin:0 0 9px}.page-title{font-size:28px;font-weight:850;line-height:1.3;letter-spacing:-.8px;margin:0}.sub{color:var(--muted);font-size:12px;line-height:1.7;margin:9px 0 0}.mt24{margin-top:24px!important}.mt16{margin-top:16px!important}.full-width{width:100%}.text-center{text-align:center}.muted{color:var(--muted)}.back-row{display:flex;align-items:center;gap:10px;margin-bottom:22px}.back-row h2{font-size:18px;line-height:1.4;flex:1;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:25px 0 12px}.section-heading h2{margin:0;font-size:17px}.tiny-link{border:0;background:none;color:var(--accent);font-size:12px;font-weight:750;padding:7px 0}.tiny-link.danger,.danger{color:#d16767!important}.bar-actions{display:flex;align-items:center;gap:9px;justify-content:flex-end;margin:16px 0}.primary-btn,.secondary-btn,.danger-btn{border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;min-height:44px;font-size:13px;font-weight:800;border:0;line-height:1.3}.primary-btn{background:var(--accent);color:white}.primary-btn.dark{background:var(--accent)}.primary-btn svg,.secondary-btn svg,.danger-btn svg{width:18px;height:18px}.secondary-btn{background:var(--surface);border:1px solid var(--line);color:var(--ink)}.secondary-btn.active{background:var(--accent-soft);border-color:var(--accent)}.danger-btn{background:#a43d3d;color:white}.smalltag,.pill{font-size:11px;white-space:nowrap;padding:6px 10px;border-radius:20px;background:var(--accent-soft);color:var(--accent);font-weight:800}.duo{display:flex;gap:9px;align-items:center}.duo>*{flex:1;min-width:0}.search{display:flex;align-items:center;gap:10px;border-radius:15px;background:var(--surface);border:1px solid var(--line);padding:0 13px;margin:18px 0}.search svg{width:17px;color:var(--muted)}.search input{background:transparent;width:100%;height:49px;min-width:0;border:0;outline:0;color:var(--ink);font-size:13px}.search input::placeholder{color:var(--muted)}
.folder-card,.deck-card{background:var(--surface);border:1px solid var(--line);width:100%;border-radius:19px;color:var(--ink);display:flex;gap:13px;align-items:center;text-align:left;margin:10px 0;padding:15px}.folder-card svg:first-child{color:var(--accent);width:25px;height:25px}.folder-card span{flex:1;font-weight:750}.folder-card svg:last-child{color:var(--muted);width:15px}.deck-card>.deck-meta{flex:1;min-width:0}.deck-card>.deck-meta h3{margin:0 0 6px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-card>.deck-meta small{font-size:11px;color:var(--muted)}.deck-card>svg{color:var(--muted);width:16px}.deck-graphic{width:61px;height:61px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--deck-color) 14%,var(--surface));color:var(--deck-color);border-radius:17px;overflow:hidden}.deck-graphic img{width:100%;height:100%;object-fit:cover}.deck-graphic svg{width:27px;height:27px}.progress-track{height:6px;border-radius:20px;background:var(--weak);overflow:hidden;margin-top:11px}.progress-track>div{height:100%;background:var(--accent);transition:width .2s}.deck-overview{display:flex;gap:12px;align-items:center;justify-content:space-between}.deck-overview b{font-size:29px}.deck-overview small{color:var(--muted);font-size:12px}.tag-scroll,.chips{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:1px 0 6px;scrollbar-width:none}.tag-scroll::-webkit-scrollbar{display:none}.tag-choice,.chip{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:8px 12px;color:var(--muted);font-size:11px;font-weight:750;white-space:nowrap}.tag-choice.chosen,.chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.tag-pill{font-size:10px;color:var(--accent);background:var(--accent-soft);padding:4px 7px;border-radius:7px;white-space:nowrap}.tag-line{display:flex;gap:5px;margin-top:8px;overflow:hidden}.card-list{border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden}.word-row{display:flex;gap:9px;align-items:center;padding:14px;min-height:73px;border-bottom:1px solid var(--line);cursor:pointer}.word-row:last-child{border-bottom:0}.word-row.selected{background:var(--accent-soft)}.word-main{flex:1;min-width:0}.word-row h3{margin:0 0 4px;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.word-row p{margin:0;font-size:12px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.word-thumb{height:49px;width:49px;object-fit:cover;border-radius:11px}.word-row .mini-chevron{color:var(--muted)}.word-row .mini-chevron svg{width:16px}.due-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#db946d}.due-dot.done{background:#91caa5}.fake-checkbox{height:24px;width:24px;border:2px solid var(--accent);color:var(--accent);border-radius:6px;display:grid;place-items:center}.fake-checkbox svg{width:17px;height:17px}.selection-bar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-end;margin-bottom:10px}.selection-bar>span{flex:1;font-size:12px;font-weight:750}.selection-bar .secondary-btn,.selection-bar .danger-btn{min-height:36px;padding:8px 10px;font-size:11px}
.empty{text-align:center;padding:30px 15px;border:1px dashed var(--line);background:var(--surface);border-radius:21px;margin:12px 0}.empty-icon{height:55px;width:55px;background:var(--accent-soft);color:var(--accent);border-radius:18px;display:grid;place-items:center;margin:0 auto 12px}.empty h3{margin:0 0 8px}.empty p{margin:0 0 17px;color:var(--muted);font-size:12px;line-height:1.7}.hero{background:var(--deep);color:#fff;border-radius:27px;padding:25px 22px;box-shadow:0 14px 23px var(--shadow)}.hero .eyebrow{color:#ace5d0}.hero h2{font-size:27px;line-height:1.35;margin:0}.hero-bottom{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-top:22px}.hero-number{font-size:49px;line-height:1;font-weight:850}.hero-number span{font-size:12px;margin-left:6px}.hero .primary-btn{background:#def4e2;color:#13483f}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;text-align:center;padding:18px 8px}.stat-card b{font-size:23px;display:block}.stat-card small{font-size:10px;color:var(--muted)}.study-panel{background:var(--surface);border:1px solid var(--line);border-radius:23px;padding:21px}.study-panel h3{margin:0 0 15px;font-size:16px}.field{margin:0 0 18px}.select-label{display:block;font-size:12px;font-weight:750;margin:0 0 8px}.input{display:block;width:100%;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);padding:13px 14px;outline-color:var(--accent);font-size:14px}textarea.input{resize:vertical;min-height:69px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 23px}.choice{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 10px;text-align:left;color:var(--ink);min-height:91px}.choice.selected{outline:2px solid var(--accent);background:var(--accent-soft)}.choice svg{color:var(--accent);display:block;margin-bottom:7px}.choice strong{display:block;font-size:12px}.choice small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0;color:var(--ink);font-size:12px}.toggle-grid label{display:flex;align-items:center;gap:7px}.toggle-grid input,.toggle-line input{accent-color:var(--accent);width:17px;height:17px;flex:none}.toggle-line{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;margin:12px 0}.tiny-note{color:var(--muted);font-size:11px;line-height:1.75;margin:11px 0}.hint-box{border-radius:15px;background:var(--accent-soft);padding:16px;font-size:12px;line-height:1.8}.session-top{display:flex;justify-content:space-between;margin:13px 0}.session-top span{font-size:12px;color:var(--muted)}
.flashcard{width:100%;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:12px;padding:17px;background:var(--surface);border:1px solid var(--line);border-radius:23px;margin:21px 0 12px;color:var(--ink);text-align:center;overflow:hidden;box-shadow:0 10px 26px var(--shadow)}.card-side,.flip-hint{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:1px}.flip-hint{justify-content:center;letter-spacing:0;font-weight:600}.flip-hint svg{width:15px}.plain-card-text{font-size:clamp(23px,7vw,35px);font-weight:850;line-height:1.4;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 4px}.flashcard .plain-card-text{display:flex;align-items:center;justify-content:center;flex:1}.card-art{position:relative;width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--weak)}.card-art>img{height:100%;width:100%;object-fit:cover;display:block}.caption-band{position:absolute;bottom:0;left:0;right:0;min-height:30%;padding:11px 12px;background:rgba(86,86,86,.62);color:#fff;display:flex;justify-content:center;align-items:center;text-align:center}.caption-band>span{font-size:clamp(17px,4vw,27px);font-weight:800;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-text-stroke:1.1px #000;paint-order:stroke fill;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000}.flashcard.with-image{min-height:0;padding:12px}.flashcard.with-image .card-art{flex:1;min-height:250px}.tools-row{display:flex;gap:8px;margin-bottom:12px}.tools-row button{flex:1;min-width:0;font-size:11px;padding:9px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.action-grid button{height:51px;border-radius:15px;border:0;font-size:14px;font-weight:850}.action-grid .miss{background:#f9e9e5;color:#8b4237}.action-grid .hit{background:#dff1e8;color:#176c55}.question-panel{margin:19px 0;padding:19px 14px;background:var(--surface);border:1px solid var(--line);border-radius:20px;text-align:center}.question-panel .plain-card-text{min-height:85px}.question-panel .question-art{max-width:390px;margin:auto}.answer-grid{display:grid;gap:9px;margin:14px 0}.quiz-opt{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:15px;color:var(--ink);text-align:left}.quiz-opt b{color:var(--accent);border:1px solid var(--line);padding:6px 8px;border-radius:9px}.quiz-opt.correct{background:#def4e7;border-color:#63ac81;color:#185642}.quiz-opt.wrong{background:#fceae4;border-color:#c7826e;color:#803b2d}.feedback{padding:14px;border-radius:13px;margin:12px 0;font-weight:800}.feedback.good{background:#d8f2e1;color:#175e41}.feedback.bad{background:#f9e4df;color:#9e4135}.result-big{font-weight:900;font-size:52px;color:var(--accent)}.weekly-chart{display:flex;gap:7px;height:180px;align-items:end;padding-top:10px}.chart-col{flex:1;text-align:center;font-size:10px;color:var(--muted)}.bar-area{height:146px;display:flex;align-items:end;justify-content:center}.bar{width:min(24px,70%);border-radius:7px 7px 0 0;background:var(--accent)}
.segmented{display:flex;background:var(--weak);gap:3px;padding:4px;border-radius:13px}.segmented button{flex:1;min-width:0;border:0;background:transparent;padding:10px 5px;border-radius:10px;color:var(--muted);font-size:11px;font-weight:700}.segmented button.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px var(--shadow)}.color-options{display:flex;flex-wrap:wrap;gap:11px;align-items:center}.color-option{height:35px;width:35px;border-radius:50%;border:3px solid var(--surface);outline:1px solid var(--line)}.color-option.selected{outline:3px solid var(--ink)}.custom-color{font-size:10px;color:var(--muted);display:flex;gap:6px;align-items:center}.custom-color input{height:34px;width:38px;padding:0;border:0;background:none}.settings-list{margin:21px 0;background:var(--surface);border:1px solid var(--line);border-radius:19px;overflow:hidden}.settings-item{display:flex;align-items:center;gap:12px;padding:17px;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left}.settings-item:last-child{border-bottom:0}.settings-item>span:nth-child(2){flex:1}.settings-item strong{font-size:13px;display:block}.settings-item small{font-size:10px;color:var(--muted);display:block;margin-top:5px}.settings-glyph{height:36px;width:36px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent)}.settings-item>svg:last-child{color:var(--muted);height:16px;width:16px}
.overlay,.crop-overlay{position:fixed;inset:0;background:#07171899;z-index:20;display:flex;justify-content:center;align-items:flex-end}.sheet,.crop-sheet{width:100%;max-width:640px;max-height:93svh;overflow-y:auto;border-radius:26px 26px 0 0;background:var(--surface);color:var(--ink);padding:23px 20px calc(26px + env(safe-area-inset-bottom));animation:rise .17s ease-out}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.sheet-head h2{font-size:19px;margin:0}.sheet-actions{display:flex;gap:9px;margin-top:18px}.sheet-actions>*{flex:1}.media-control{background:var(--weak);padding:14px;margin:-5px 0 19px;border-radius:15px}.media-preview{margin-bottom:10px;display:flex;align-items:center;gap:12px}.media-preview>img{height:90px;max-width:65%;object-fit:cover;border-radius:10px}.danger-lite{border:0;background:none;display:flex;gap:5px;align-items:center;color:#cd6161;font-size:12px}.crop-overlay{z-index:30}.crop-canvas-wrap{display:flex;justify-content:center;background:#161616;border-radius:15px;padding:9px;margin-bottom:18px}.crop-canvas-wrap canvas{max-height:45svh;max-width:100%;height:auto;object-fit:contain;touch-action:none}.crop-coordinates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:9px}.crop-coordinates label{display:grid;gap:8px;font-size:11px}.range,input[type=range]{width:100%;accent-color:var(--accent)}.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:center;gap:6px;padding:9px max(14px,env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom));z-index:9;box-shadow:0 -7px 15px var(--shadow)}.nav-item{flex:1;max-width:145px;background:transparent;border:0;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:9px 0;color:var(--muted);font-size:10px;font-weight:800}.nav-item.active{background:var(--accent-soft);color:var(--accent)}.nav-item svg{height:21px;width:21px}#toast{position:fixed;z-index:70;left:50%;bottom:calc(93px + env(safe-area-inset-bottom));width:max-content;max-width:85vw;transform:translate(-50%,10px);transition:.2s;opacity:0;pointer-events:none;background:#122b31;color:#fff;padding:13px 18px;border-radius:13px;font-size:12px;font-weight:700;text-align:center}#toast.toast-display{opacity:1;transform:translate(-50%,0)}@keyframes rise{from{transform:translateY(20px);opacity:.8}to{transform:none;opacity:1}}@media(min-width:680px){.shell{padding-top:32px}.bottom-nav{max-width:640px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-radius:22px 22px 0 0}.overlay,.crop-overlay{align-items:center}.sheet,.crop-sheet{border-radius:23px;max-height:91svh}}
.word-row.compact .word-main p,.word-row.compact .tag-line{display:none}
/* Kotoba 3.0: compact iPhone viewport and accessible library controls */
html,body,#app{max-width:100%;overflow-x:hidden}
.shell{max-width:640px;width:100%;padding:calc(12px + env(safe-area-inset-top)) 12px calc(94px + env(safe-area-inset-bottom));}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 13px;min-width:0}
.page-heading .page-title{margin:0;flex:1;min-width:0;overflow-wrap:anywhere;font-size:clamp(20px,5.5vw,26px);line-height:1.3}
.settings-access,.settings-close{flex:none;width:39px;height:39px}
.bar-actions{margin:8px 0 12px;gap:6px;flex-wrap:wrap}
.bar-actions .primary-btn,.bar-actions .secondary-btn{padding:9px 10px;min-height:37px;font-size:12px}
.bar-actions .circle-btn{flex:none}
.search{margin:12px 0}
.search input{height:41px}
.section-heading{margin-top:18px;margin-bottom:7px}
.section-heading h2{font-size:15px}
.library-tools{display:flex;gap:8px;margin:8px 0 10px;flex-wrap:wrap}
.library-tools>*{flex:1;min-width:0;font-size:11px;padding:9px 6px;min-height:37px}
.deck-entry{position:relative;margin:8px 0;border-radius:15px;transition:background .12s ease}
.deck-row{display:flex;align-items:stretch;gap:6px;min-width:0}
.deck-card{min-width:0;flex:1;gap:9px;margin:0;border-radius:15px;padding:10px 8px;min-height:67px}
.deck-card .deck-meta{min-width:0}
.deck-card>.deck-meta h3{margin-bottom:2px;font-size:13px}
.deck-card>.deck-meta small{font-size:10px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-card .progress-track{margin-top:7px}
.deck-card .deck-graphic{height:46px;width:46px;border-radius:13px}
.deck-card .deck-graphic svg{height:24px;width:24px}
.deck-study{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:58px;flex:none;border:1px solid var(--line);border-radius:14px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800}
.deck-study svg{height:18px;width:18px}
.deck-chosen{background:var(--accent-soft);border-color:var(--accent)}
.folder-card{margin:7px 0;min-height:56px;padding:8px 11px;gap:10px;border-radius:14px}
.folder-card>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.folder-thumb{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);overflow:hidden}
.folder-thumb img{height:100%;width:100%;object-fit:cover}
.folder-card .folder-thumb svg{width:23px;height:23px;color:var(--accent)}
.folder-destination{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--ink);text-align:left;font-size:13px;margin-bottom:8px;overflow-wrap:anywhere}
.folder-choice-list{max-height:52svh;overflow-y:auto}
.drag-handle{flex:none;width:37px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px dashed var(--line);border-radius:12px;background:var(--weak);color:var(--muted);font-size:9px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.drag-handle svg{transform:rotate(90deg)}
.deck-entry.dragging{opacity:.52;background:var(--accent-soft)}
.deck-entry.drag-over:before{content:"";position:absolute;z-index:2;left:0;right:0;top:-4px;height:4px;background:var(--accent);border-radius:4px}
.order-actions{display:flex;gap:6px;justify-content:flex-end;padding:5px 2px 2px}
.order-actions button{padding:6px 10px;font-size:10px;min-height:31px;flex:1}
.order-actions svg{width:13px;height:13px}
.order-actions button:last-child svg{transform:rotate(90deg)}
.order-actions button:first-child svg{transform:rotate(-90deg)}
.drag-note{margin:5px 0 9px}
.back-row{display:flex;align-items:center;min-width:0;gap:6px}
.back-row h2{flex:1;min-width:0;margin:0;font-size:clamp(16px,4.4vw,20px);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.back-row .circle-btn{flex:none;width:37px;height:37px}
.back-row .pill{max-width:80px;overflow:hidden;text-overflow:ellipsis}
.deck-overview{gap:8px}
.deck-overview .deck-graphic{width:49px;height:49px}
.deck-overview .primary-btn{padding:9px 12px;min-height:38px}
.study-panel{padding:15px 12px;border-radius:17px}
.choices{gap:7px}.choice{padding:11px 8px;min-height:79px}
.flashcard{min-height:min(330px,42svh);padding:11px;margin:13px 0 9px}
.flashcard.with-image .card-art{min-height:190px}
.plain-card-text{font-size:clamp(21px,6.3vw,33px)}
.mini-stats{gap:6px}.stat-card{padding:13px 5px;border-radius:14px}.stat-card b{font-size:20px}
.hero{padding:19px 16px;border-radius:19px}.hero h2{font-size:24px}.hero-number{font-size:40px}
.bottom-nav{padding:6px max(10px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom));gap:3px}
.nav-item{padding:6px 0;gap:3px;border-radius:11px}
.nav-item svg{height:19px;width:19px}
.sheet,.crop-sheet{padding:16px 15px calc(16px + env(safe-area-inset-bottom))}
@media(max-width:370px){.shell{padding-left:9px;padding-right:9px}.deck-study{width:48px}.deck-card .deck-graphic{width:40px;height:40px}.deck-card{gap:6px}.library-tools .secondary-btn{font-size:10px}.duo{gap:5px}.duo .secondary-btn{font-size:11px;padding:7px}}

/* Kotoba 4.0: iPhone-safe controls, compact folder controls, sticky editors. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body,#app,.shell,.sheet{min-width:0;}
button,select,textarea,input{max-width:100%;}
/* iOS Safari zooms focused form fields below 16px. */
input:not([type=range]):not([type=checkbox]):not([type=color]),textarea,select,
.search input,.input{font-size:16px!important;}
.shell{overflow-x:clip;}
.shell.has-deck-add{padding-bottom:calc(161px + env(safe-area-inset-bottom));}
.folder-action-bar{display:flex;flex-wrap:nowrap;width:100%;gap:5px;justify-content:stretch;}
.folder-action-bar>.circle-btn{min-width:35px;width:35px;height:39px;flex:0 0 35px;}
.folder-action-bar>.secondary-btn,.folder-action-bar>.primary-btn{flex:1 1 0;min-width:0;padding:8px 3px;font-size:clamp(10px,2.8vw,12px);white-space:nowrap;gap:3px;}
.folder-action-bar .secondary-btn svg,.folder-action-bar .primary-btn svg{width:14px;height:14px;}
.deck-detail-header{gap:6px;margin-bottom:13px;}
.deck-detail-header h2{font-size:clamp(15px,4.2vw,18px);}
.deck-detail-header .circle-btn{min-width:36px;width:36px;height:38px;}
.deck-detail-header .study-icon-button{background:var(--accent-soft);color:var(--accent);}
.deck-add-dock{position:fixed;z-index:8;left:0;right:0;bottom:calc(65px + env(safe-area-inset-bottom));padding:8px max(14px,env(safe-area-inset-left)) 9px;background:var(--paper);border-top:1px solid var(--line);display:flex;justify-content:center;}
.deck-add-dock button{width:100%;max-width:608px;min-height:43px;box-shadow:0 3px 12px var(--shadow);}
.folder-thumb,.folder-thumb img{aspect-ratio:1/1;}
.study-picker-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;}
.study-picker-title>.select-label{flex:1;margin:0;min-width:130px;}
.study-deck-picker{max-height:210px;overflow-y:auto;border:1px solid var(--line);border-radius:13px;overscroll-behavior:contain;}
.study-deck-choice{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;min-width:0;}
.study-deck-choice:last-child{border-bottom:0;}
.study-deck-choice>input{accent-color:var(--accent);width:19px;height:19px;flex:none;}
.study-deck-choice .deck-graphic{height:34px;width:34px;border-radius:8px;}
.study-deck-choice .deck-graphic svg{width:17px;height:17px;}
.study-deck-choice>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:12px;}
.study-deck-choice small{display:block;color:var(--muted);font-size:10px;}
.study-note{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:10px 0 14px;padding:12px;}
.study-note strong{display:block;font-size:13px;color:var(--accent);margin-bottom:5px;}
.study-note p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6;margin:0;}
/* Only the form body scrolls: Close and Save remain visible above the keyboard. */
.overlay .sheet.deck-edit-sheet{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100dvh - env(safe-area-inset-top) - 12px);height:min(85dvh,720px);padding:16px 14px 0;}
.deck-edit-sheet>.sheet-head{flex:none;margin-bottom:10px;}
.deck-edit-sheet>.sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 2px 24px;}
.deck-edit-sheet .sheet-footer{flex:none;position:relative;z-index:2;margin:0;padding:10px 2px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);}
.deck-editor-extras{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px;}
.deck-editor-extras .secondary-btn{font-size:12px;min-height:39px;}
.deck-editor-extras .tiny-link{font-size:12px;}
@media(max-width:375px){.folder-action-bar{gap:4px}.folder-action-bar>.primary-btn,.folder-action-bar>.secondary-btn{font-size:10px}.study-panel{padding:13px 10px}.deck-detail-header{gap:4px}.deck-detail-header .circle-btn{min-width:34px;width:34px}}
/* Override the generic .folder-card span flex rule; keep custom folder art square. */
.folder-card > .folder-thumb{flex:0 0 42px!important;width:42px;min-width:42px;height:42px;max-width:42px;aspect-ratio:1/1;}
.folder-card > .folder-thumb img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;}

/* Kotoba 4.1: real fullscreen card editor, mobile-safe footer and compact study book selector. */
:root[data-theme='black']{color-scheme:dark;--ink:#f2f5f4;--muted:#a0aaa8;--surface:#101214;--paper:#000000;--line:#303436;--weak:#191c1f;--deep:#0b0e10;--shadow:#000a;}
/* Prevent double-tap zoom while preserving two-finger pinch accessibility. */
html,body,#app,.shell,button,a,label,.word-row,.deck-card,.folder-card,.flashcard,.study-picker-toggle{touch-action:manipulation;}
.theme-segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
.theme-segmented button{min-height:39px;}
.sound-setting{margin-top:18px;min-height:35px;font-size:14px;}
.study-picker-title{margin-bottom:8px;}
.study-picker-toggle{display:flex;width:100%;align-items:center;gap:9px;text-align:left;color:var(--ink);background:var(--weak);border:1px solid var(--line);border-radius:14px;min-height:46px;padding:9px 12px;font-weight:750;}
.study-picker-toggle>svg:first-child{width:20px;height:20px;color:var(--accent);}
.study-picker-toggle #study-selected-summary{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;}
.study-picker-toggle .picker-chevron{color:var(--muted);display:flex;}
.study-picker-toggle[aria-expanded='true'] .picker-chevron{transform:rotate(90deg);}
.study-picker-content{margin-top:8px;padding:10px;background:var(--weak);border:1px solid var(--line);border-radius:14px;}
.study-picker-content[hidden],.study-deck-choice[hidden]{display:none!important;}
.study-picker-tools{display:flex;gap:7px;flex-direction:column;padding-bottom:9px;}
.study-picker-tools .input{min-height:40px;padding:9px 11px;background:var(--surface);}
.study-picker-actions{display:flex;justify-content:space-between;gap:13px;}
.study-picker-actions .tiny-link{font-size:12px;}
.study-deck-picker{max-height:min(205px,30svh);background:var(--surface);}
body.modal-open{overflow:hidden;}
.card-overlay{background:var(--surface);align-items:stretch;top:var(--visual-top,0px);bottom:auto;height:var(--visual-height,100dvh);overflow:hidden;}
.card-overlay .card-edit-sheet{box-sizing:border-box;width:100%;max-width:640px;height:100%;max-height:none;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 14px 0;display:flex;flex-direction:column;overflow:hidden;animation:none;}
.card-edit-sheet>.sheet-head{flex:0 0 auto;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--line);}
.card-edit-sheet>.sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 2px 25px;}
.card-edit-sheet .sheet-footer{flex:0 0 auto;position:relative;z-index:2;margin:0;padding:10px 3px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -4px 14px var(--shadow);}
.card-edit-sheet .sheet-footer button{min-height:46px;}
:root.keyboard-visible .card-edit-sheet .sheet-footer{padding-bottom:7px;}
@media(min-width:680px){.card-overlay{align-items:center;}.card-overlay .card-edit-sheet{border-radius:0;}}

/* Kotoba 4.2: consistent preference labels and whole-card sort. */
.settings-panel .select-label,
.settings-panel .toggle-line,
.settings-panel .sound-setting,
.settings-panel .custom-color,
.settings-panel .theme-segmented button {font-size:14px;line-height:1.5;}
.settings-panel .input{font-size:16px;} /* Prevent Safari input auto-zoom. */
.settings-list .settings-item strong{font-size:14px;}
.deck-card.sort-grabbable{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.deck-entry.dragging .deck-card.sort-grabbable{cursor:grabbing;border-color:var(--accent);box-shadow:0 5px 14px var(--shadow);}
.deck-card.sort-grabbable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}


/* Kotoba 4.3: always-visible quiz Next, distinguished deck/folder thumbnails,
   left-stacked sort controls and consistent appearance settings. */
.entry-kind-text{display:flex;align-items:center;gap:4px;font-size:10px!important;line-height:1.15;font-weight:800;letter-spacing:.02em;color:var(--accent);margin:0 0 3px;white-space:nowrap;}
.entry-kind-text svg{width:11px!important;height:11px!important;color:var(--accent)!important;}
.deck-meta .entry-kind-text{flex:none;}
.deck-card>.deck-meta h3{margin:0 0 3px;}
.folder-card > .folder-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;gap:3px;font-weight:750;}
.folder-card > .folder-info strong{font-size:13px;font-weight:800;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.folder-card > .folder-info .entry-kind-text{flex:0 0 auto;}
.folder-card > svg:last-child{color:var(--muted);width:15px;flex:none;}
.folder-thumb,.deck-graphic{position:relative;}
.folder-thumb > .entry-photo-kind,.deck-graphic > .entry-photo-kind{position:absolute;bottom:0;right:0;z-index:1;width:19px;height:19px;display:grid;place-items:center;border-radius:8px 0 0 0;background:var(--accent);color:white;flex:0 0 19px;}
.folder-card .folder-thumb > .entry-photo-kind svg,.deck-graphic > .entry-photo-kind svg{width:13px!important;height:13px!important;color:white!important;}
/* The control group lives on the left, within the horizontal deck row. */
.deck-row > .order-actions{display:flex;flex-direction:column;flex:0 0 77px;width:77px;gap:5px;align-self:stretch;justify-content:center;padding:0;min-width:0;}
.deck-row > .order-actions button{flex:1 1 0;min-height:36px;max-height:52px;width:100%;padding:6px 3px;gap:2px;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.12;font-size:10px;border-radius:10px;white-space:nowrap;}
.deck-row > .order-actions button svg{height:13px;width:13px;}
.deck-row > .deck-card.sort-grabbable{flex:1;min-width:0;}
@media(max-width:370px){.deck-row > .order-actions{flex-basis:69px;width:69px;}.deck-row > .order-actions button{font-size:9px;}.deck-row > .deck-card.sort-grabbable{padding-left:5px;padding-right:5px;gap:5px;}.deck-row > .deck-card.sort-grabbable .deck-graphic{width:38px;height:38px;}}
.display-settings .display-option-title{font-size:14px;line-height:1.5;font-weight:750;margin:0 0 8px;}
/* Fixed over bottom navigation: no scrolling required even with lengthy answers or notes. */
.shell.has-quiz-next{padding-bottom:calc(var(--kotoba-nav-height,70px) + 95px + env(safe-area-inset-bottom));}
.session-next-dock{position:fixed;z-index:8;left:0;right:0;bottom:var(--kotoba-nav-height,70px);display:flex;justify-content:center;background:var(--paper);border-top:1px solid var(--line);padding:9px max(14px,env(safe-area-inset-left)) 10px;box-shadow:0 -7px 18px var(--shadow);}
.session-next-dock button{width:100%;max-width:608px;min-height:48px;box-shadow:0 3px 12px var(--shadow);}

/* Kotoba 4.4: smaller order buttons; hierarchical study folder selection; photo adjustments. */
.deck-row>.order-actions{flex:0 0 56px;width:56px;gap:4px;}
.deck-row>.order-actions button{font-size:9px;padding:5px 1px;min-height:35px;max-height:46px;}
.deck-row>.order-actions button svg{width:12px;height:12px;}
@media(max-width:370px){.deck-row>.order-actions{flex-basis:47px;width:47px}.deck-row>.order-actions button{font-size:8px;padding:4px 0}}
.entry-photo-kind{display:none!important;}
.study-deck-picker{max-height:min(320px,45svh);overflow:auto;overscroll-behavior:contain;}
.study-tree-folder{border-bottom:1px solid var(--line);min-width:0;}
.study-tree-folder:last-child{border-bottom:0;}
.study-tree-folder[hidden],.study-root-decks .study-deck-choice[hidden]{display:none!important;}
.study-folder-row{display:flex;align-items:center;gap:8px;padding:5px 9px;min-width:0;}
.study-folder-check{width:19px;height:19px;flex:none;accent-color:var(--accent);margin:0;}
.study-folder-toggle{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;text-align:left;padding:5px 0;background:transparent;color:var(--ink);border:0;min-height:45px;}
.study-folder-toggle>.folder-thumb{width:33px;height:33px;flex:0 0 33px;border-radius:8px;}
.study-folder-toggle>.folder-thumb svg{width:19px;height:19px;}
.study-folder-name{flex:1;min-width:0;font-size:13px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.study-folder-name small{display:block;color:var(--muted);font-size:10px;font-weight:400;}
.study-folder-toggle>.picker-chevron{display:grid;place-items:center;color:var(--muted);transition:transform .15s;}
.study-folder-toggle>.picker-chevron svg{width:17px;height:17px;}
.study-folder-toggle[aria-expanded=true]>.picker-chevron{transform:rotate(90deg);}
.study-folder-branch{border-left:2px solid var(--line);margin-left:19px;padding:0 0 3px 7px;min-width:0;}
.study-folder-branch[hidden]{display:none!important;}
.study-folder-branch .study-tree-folder{border-bottom:0;}
.study-folder-branch .study-deck-choice{padding:7px 5px;}
.study-root-label{background:var(--weak);font-size:12px;font-weight:700;padding:9px 10px;color:var(--muted);}
.crop-adjustments{display:grid;gap:8px;margin:10px 0 12px;}
.crop-slider-label{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink);}
.crop-slider-label output{color:var(--accent);font-variant-numeric:tabular-nums;}
.crop-adjustments .range{width:100%;margin:0;}
.crop-sheet{max-height:95dvh;overflow-y:auto;overscroll-behavior:contain;}

/* Kotoba 4.5 — Folder management and fixed study start control. */
.folder-row{display:flex;align-items:stretch;gap:8px;margin:7px 0;min-width:0}
.folder-entry{min-width:0;touch-action:pan-y}
.folder-entry .folder-card{flex:1 1 auto;min-width:0;width:auto;margin:0}
.folder-entry .folder-card.folder-chosen{border-color:var(--accent);background:var(--accent-soft)}
.folder-entry .folder-card.sort-grabbable{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.folder-entry.dragging .folder-card{outline:2px solid var(--accent);background:var(--accent-soft);opacity:.85}
.folder-entry.drag-over .folder-card{border-top:3px solid var(--accent)}
.folder-row>.order-actions{display:flex;flex-direction:column;justify-content:center;flex:0 0 56px;width:56px;gap:4px;align-self:stretch;padding:0}
.folder-row>.order-actions button{flex:1 1 0;min-height:34px;max-height:46px;width:100%;font-size:9px;white-space:nowrap;padding:5px 1px;display:flex;flex-direction:column;gap:2px;border-radius:10px}
.folder-row>.order-actions button svg{width:12px;height:12px}
@media(max-width:370px){.folder-row>.order-actions{flex-basis:47px;width:47px}.folder-row>.order-actions button{font-size:8px;padding:4px 0}}
.shell.has-study-start{padding-bottom:calc(var(--kotoba-nav-height,70px) + 95px + env(safe-area-inset-bottom))}
.study-start-dock{position:fixed;z-index:8;left:0;right:0;bottom:var(--kotoba-nav-height,70px);display:flex;justify-content:center;background:var(--paper);border-top:1px solid var(--line);padding:9px max(14px,env(safe-area-inset-left)) 10px;box-shadow:0 -7px 18px var(--shadow)}
.study-start-dock button{width:100%;max-width:608px;min-height:48px}
#deck-name::placeholder,#folder-name::placeholder{color:var(--muted);opacity:.7}

/* Kotoba 4.6: independent folder and deck controls, tree count directly below picker. */
.folder-library-tools,.deck-library-tools{margin-top:3px;margin-bottom:8px;}
.study-count-below-tree{margin:8px 1px 14px;color:var(--muted);}
.study-count-below-tree strong{font-weight:850;color:var(--ink);font-variant-numeric:tabular-nums;}


/* Kotoba 4.7: folder selection checkboxes match deck checkboxes.
   Override .folder-card span{flex:1} and span:nth-child(2) safely. */
.folder-entry .folder-card > .fake-checkbox,
.deck-entry .deck-card > .fake-checkbox {
  flex:0 0 24px;inline-size:24px;block-size:24px;min-inline-size:24px;min-block-size:24px;
  border:2px solid var(--accent);border-radius:6px;
  padding:0;margin:0;display:grid;place-items:center;
  overflow:visible;white-space:normal;line-height:1;
}
.folder-entry .folder-card > .fake-checkbox svg,
.deck-entry .deck-card > .fake-checkbox svg {
  inline-size:17px;block-size:17px;flex:none;color:var(--accent);
}
/* Match the horizontal inset and spacing of selected deck rows. */
.folder-entry .folder-card:has(> .fake-checkbox){padding-inline-start:8px;gap:9px;}

/* Three equal-sized selection actions on both folder and deck lists. */
.library-selection-bar {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
  align-items:stretch;justify-content:stretch;
}
.library-selection-bar > span:first-child {
  grid-column:1 / -1;font-size:12px;font-weight:750;
}
.library-selection-bar > :is(.secondary-btn,.primary-btn,.danger-btn) {
  inline-size:100%;min-inline-size:0;min-height:42px;
  padding:8px 3px;gap:4px;
  font-size:12px;line-height:1.2;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;border-radius:12px;
}
.library-selection-bar > :is(.secondary-btn,.primary-btn,.danger-btn) svg {
  flex:0 0 16px;inline-size:16px;block-size:16px;
}
@media(max-width:350px){
  .library-selection-bar {gap:5px;}
  .library-selection-bar > :is(.secondary-btn,.primary-btn,.danger-btn){font-size:11px;gap:2px;padding-inline:1px;}
  .library-selection-bar > :is(.secondary-btn,.primary-btn,.danger-btn) svg {flex-basis:14px;inline-size:14px;block-size:14px;}
}

/* Kotoba 4.8: optional per-card clue, shown on explicit request only */
.study-hint-wrapper{margin:10px 0 14px;}
.study-hint-toggle{min-height:42px;width:100%;font-size:14px;}
.study-hint{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;margin-top:9px;padding:12px;color:var(--ink);}
.study-hint strong{display:block;color:var(--accent);font-size:13px;margin-bottom:5px;}
.study-hint p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:14px;margin:0;}

/* Import progress stays visible while importing image archives or Wikimedia photographs. */
.image-import-progress{position:fixed;inset:0;z-index:1300;background:#0008;display:flex;align-items:center;justify-content:center;padding:20px;}
.image-import-panel{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;max-width:380px;width:100%;padding:22px;box-shadow:0 10px 40px #0004;}
.image-import-panel>strong{display:block;font-size:16px;}
.image-import-panel p{font-size:13px;line-height:1.6;margin:12px 0;}
.image-import-panel button{width:100%;}

/* Kotoba 5.0 · SNS learning feed — no third party fonts/assets */
.sns-head{display:flex;align-items:center;justify-content:space-between;min-height:47px;padding:4px 6px 14px;border-bottom:1px solid var(--line);}
.sns-head h2{font-size:24px;letter-spacing:-.8px;margin:0;font-weight:850;}
.sns-head-settings,.sns-back,.sns-ellipsis{border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;border-radius:24px;}
.sns-back{font-size:13px;font-weight:800;white-space:nowrap;justify-content:start;}.sns-back svg{width:19px;height:19px;}
.sns-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:sticky;top:0;z-index:8;border-bottom:1px solid var(--line);background:var(--paper);margin:0 -12px;padding:0 12px;}
.sns-tabs button{border:0;background:transparent;color:var(--muted);height:48px;font-size:13px;font-weight:800;position:relative;}
.sns-tabs button.active{color:var(--ink);}.sns-tabs button.active:after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:4px;background:var(--accent);border-radius:6px 6px 0 0;}
.sns-toolbar{padding:9px 4px;border-bottom:1px solid var(--line);display:flex;justify-content:flex-end;}
.sns-toolbar label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:10px;}
.sns-toolbar select{font-size:13px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;color:var(--ink);background:var(--surface);}
.sns-feed{min-height:35vh;}.sns-post{padding:15px 5px 12px;border-bottom:1px solid var(--line);position:relative;min-width:0;}
.sns-post-head{display:flex;gap:6px;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:8px;}
.sns-profile-open{display:flex;align-items:center;gap:11px;min-width:0;flex:1;border:0;background:transparent;color:var(--ink);text-align:left;padding:0;}
.sns-profile-open strong{font-size:14px;font-weight:850;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.sns-avatar{width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;background:var(--avatar,var(--accent));color:white;border-radius:50%;overflow:hidden;}
.sns-avatar svg{width:24px;height:24px;}.sns-avatar img{width:100%;height:100%;object-fit:cover;}
.sns-ellipsis{color:var(--muted);min-width:38px;min-height:38px;width:38px;}
.sns-post-menu{position:absolute;right:4px;top:53px;z-index:7;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 28px #0003;padding:6px;min-width:min(280px,88vw);}
.sns-post-menu button{display:flex;gap:11px;align-items:center;width:100%;border:0;color:var(--ink);background:transparent;padding:12px 9px;text-align:left;font-size:12px;font-weight:650;border-radius:8px;}.sns-post-menu button:active{background:var(--accent-soft);}
.sns-post-menu svg{color:var(--muted);width:19px;height:19px;}
.sns-post-body{margin:1px 1px 8px 53px;min-width:0;overflow-wrap:anywhere;}
.sns-text,.sns-answer-styled{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;font-size:calc(15px * var(--text-scale,1));}
.sns-text.sns-clamp{overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;line-clamp:6;}
.sns-more-text{background:transparent;border:0;color:var(--accent);padding:6px 0;font-size:13px;font-weight:700;}
.sns-answer-styled strong{font-weight:850;}.sns-answer-note{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;color:var(--muted);font-size:13px;margin-top:18px;}
.sns-image{display:flex;align-items:center;justify-content:center;margin:9px 0 8px;max-height:300px;max-width:100%;min-width:0;width:100%;background:var(--weak);border:1px solid var(--line);border-radius:15px;overflow:hidden;padding:3px;cursor:zoom-in;}
.sns-image img{display:block;max-height:294px;max-width:100%;height:auto;width:auto;object-fit:contain;border-radius:11px;}
.sns-actions{display:flex;justify-content:space-around;align-items:center;padding:0 0 0 50px;gap:4px;}
.sns-act{color:var(--muted);border:0;background:transparent;border-radius:18px;height:40px;flex:1;min-width:0;display:grid;place-items:center;}
.sns-act svg{width:21px;height:21px;}.sns-act.sns-on{color:var(--accent);}.sns-act[disabled]{opacity:.24;cursor:not-allowed;}.sns-act:active:not(:disabled){background:var(--accent-soft);}
.sns-reply{margin:8px 0 0 54px;display:flex;gap:9px;align-items:stretch;min-height:52px;}
.sns-reply-line{width:2px;flex:none;border-radius:1px;background:var(--line);}
.sns-reply-bubble{flex:1;background:var(--weak);padding:12px;border-radius:13px;color:var(--ink);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;}
.sns-reply-bubble small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:4px;}.sns-reply-bubble svg{height:15px;width:15px;}
.sns-complete{text-align:center;padding:60px 18px;display:flex;align-items:center;flex-direction:column;gap:14px;}.sns-complete>svg{color:var(--accent);height:44px;width:44px;}.sns-complete h3{margin:0;font-size:21px;}.sns-complete p{font-size:13px;color:var(--muted);margin:0 0 8px;}
.sns-end{text-align:center;color:var(--muted);font-size:12px;padding:24px 4px;}
.sns-profile-banner{text-align:center;padding:21px 10px;display:flex;gap:9px;align-items:center;flex-direction:column;}.sns-profile-banner .sns-avatar{width:76px;height:76px;}.sns-profile-banner .sns-avatar svg{width:34px;height:34px;}.sns-profile-banner h2{font-size:20px;margin:0;overflow-wrap:anywhere;}.sns-profile-banner p{color:var(--muted);font-size:12px;margin:0 0 5px;}
.sns-setting-panel{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:16px;margin:15px 0;display:flex;flex-direction:column;gap:12px;}.sns-setting-panel h3{font-size:15px;margin:0 0 2px;}.sns-setting-panel label{font-size:13px;display:flex;align-items:center;gap:9px;}.sns-setting-panel input{accent-color:var(--accent);}.sns-setting-help{font-size:12px;color:var(--muted);margin:4px 0 12px;line-height:1.6;}.sns-deck-check small{margin-left:auto;color:var(--muted);}.sns-setting-link{border:1px solid var(--line);border-radius:15px;gap:13px;font-size:13px;margin-top:15px;}.sns-setting-link strong{flex:1;}.sns-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}.sns-stat-row>div{text-align:center;background:var(--weak);border-radius:10px;padding:12px 4px;}.sns-stat-row strong{font-size:19px;display:block;}.sns-stat-row small{font-size:10px;color:var(--muted);}
.sns-excluded-row{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:15px 2px;}.sns-excluded-row strong{font-size:12px;}.sns-excluded-row p{font-size:12px;color:var(--muted);margin:5px 0 0;max-width:65vw;overflow-wrap:anywhere;}.sns-excluded-row button{border:1px solid var(--line);color:var(--accent);background:var(--surface);border-radius:12px;padding:9px 14px;}
.sns-undo-bar{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:11;background:#102e34;color:white;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:12px;padding:12px 15px;width:min(530px,92vw);box-shadow:0 5px 18px #0004;font-size:12px;}.sns-undo-bar button{border:0;background:none;color:#9df5da;font-weight:850;white-space:nowrap;}
.sns-backup-alert{background:var(--accent-soft);border-radius:12px;display:flex;align-items:center;gap:8px;margin:12px 1px;padding:12px;font-size:12px;flex-wrap:wrap;}.sns-backup-alert button{border:0;border-radius:8px;background:var(--surface);color:var(--accent);padding:7px 9px;font-size:11px;font-weight:750;}
.sns-image-overlay{position:fixed;inset:0;z-index:80;background:#08090a;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;}
.sns-image-close{position:absolute;right:calc(18px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));border:0;border-radius:50%;background:#353637;color:white;height:42px;width:42px;display:grid;place-items:center;z-index:2;}
.sns-image-overlay img{display:block;max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;touch-action:none;user-select:none;-webkit-user-drag:none;}
@media(max-width:360px){.sns-post-body{margin-left:46px;}.sns-actions{padding-left:42px;}.sns-reply{margin-left:46px;}.sns-avatar{width:38px;height:38px;flex-basis:38px;}}
.sns-answer-styled.sns-clamp{overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;line-clamp:6;}

/* Kotoba v5.1 SNS finish — mobile gestures, pinned navigation, and feedback. */
.sns-head{position:sticky;top:0;z-index:23;height:56px;min-height:56px;padding:4px 6px;background:var(--paper);box-shadow:0 1px 0 var(--line);}
.sns-head-top{display:flex;align-items:center;align-self:stretch;justify-content:flex-start;flex:1;min-width:0;padding:0 6px;border:0;background:transparent;color:var(--ink);text-align:left;touch-action:manipulation;}
.sns-feed-head .sns-head-settings{position:relative;z-index:2;flex:0 0 44px;}
.sns-tabs{top:56px;z-index:22;box-shadow:0 2px 5px #00000005;}
.sns-avatar{aspect-ratio:1/1;min-width:42px;min-height:42px;flex-shrink:0;}
.sns-profile-banner .sns-avatar{width:76px;height:76px;min-width:76px;min-height:76px;flex:0 0 76px;aspect-ratio:1/1;border-radius:50%;}
.sns-profile-banner .sns-avatar img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;}
.sns-actions{padding:0;margin-left:33px;margin-right:4px;display:flex;justify-content:space-between;gap:8px;}
.sns-act{flex:0 0 40px;width:40px;position:relative;isolation:isolate;}
.sns-reply{margin-left:54px;display:block;min-height:0;}
.sns-reply-line{display:none!important;}
.sns-reply-bubble{width:100%;}
.sns-feed{transition:transform .4s cubic-bezier(.15,.9,.25,1);will-change:transform;}
.sns-pull-cue{position:fixed;left:50%;top:116px;z-index:21;opacity:0;pointer-events:none;display:flex;gap:9px;align-items:center;justify-content:center;min-width:153px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 14px;box-shadow:0 5px 17px var(--shadow);transform:translate(-50%,-54px);font-size:12px;font-weight:750;transition:opacity .13s,transform .16s;}
.sns-pull-wheel{width:19px;height:19px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;transform:rotate(-25deg);transition:transform .15s;}
.sns-pull-cue.ready .sns-pull-wheel{transform:rotate(130deg);border-top-color:#d7a165;}
.sns-pull-cue.refreshing .sns-pull-wheel{animation:sns-spin .6s linear infinite;}
@keyframes sns-spin{to{transform:rotate(360deg)}}
.sns-act.sns-heart-pop{color:#ff254f!important;transform-origin:center center;animation:sns-heart-bounce .46s cubic-bezier(.24,.8,.25,1.4) both;}
.sns-act.sns-heart-pop svg{fill:currentColor;stroke:#ff254f;filter:drop-shadow(0 0 7px #ff345fa5);}
.sns-act.sns-heart-pop:before{content:"";position:absolute;inset:3px;border:2px solid #ff406ca3;border-radius:50%;animation:sns-heart-ring .45s ease-out both;pointer-events:none;}
.sns-act.sns-heart-pop:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#ff254f;box-shadow:-20px -11px 0 #ff4165,20px -10px 0 #ff4165,-15px 17px 0 #ff879b,18px 17px 0 #ff879b,0 -26px 0 #ff254f;pointer-events:none;animation:sns-heart-sparks .45s ease-out both;}
@keyframes sns-heart-bounce{0%{transform:scale(.62)}40%{transform:scale(1.49)}67%{transform:scale(.88)}100%{transform:scale(1.1)}}
@keyframes sns-heart-ring{0%{transform:scale(.48);opacity:.9}90%{transform:scale(1.6);opacity:0}100%{transform:scale(1.7);opacity:0}}
@keyframes sns-heart-sparks{0%{opacity:0;transform:scale(.4)}32%{opacity:1}100%{opacity:0;transform:scale(1.42)}}
.sns-tree-folder{border:1px solid var(--line);border-radius:11px;margin:4px 0;overflow:hidden;}
.sns-tree-folder>summary{list-style:none;display:flex;align-items:center;gap:9px;padding:11px 9px;cursor:pointer;min-height:48px;}
.sns-tree-folder>summary::-webkit-details-marker{display:none;}
.sns-folder-chevron,.sns-folder-glyph{display:grid;place-items:center;flex:none;color:var(--muted);}
.sns-folder-chevron svg{width:16px;height:16px;transition:transform .2s;transform:rotate(-90deg);}
.sns-tree-folder[open]>.sns-folder-chevron svg,.sns-tree-folder[open]>summary .sns-folder-chevron svg{transform:rotate(0);}
.sns-folder-glyph svg{width:20px;height:20px;color:var(--accent);}
.sns-folder-name{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:750;}
.sns-tree-folder>summary small{font-size:11px;color:var(--muted);white-space:nowrap;}
.sns-tree-folder>summary input{flex:none;accent-color:var(--accent);height:19px;width:19px;margin-left:4px;cursor:pointer;}
.sns-tree-children{padding:0 7px 7px 13px;border-left:2px solid var(--line);margin-left:17px;}
.sns-tree-deck{display:flex;min-height:44px;padding:7px 3px;gap:9px;align-items:center;min-width:0;}
.sns-tree-deck input{accent-color:var(--accent);flex:none;width:19px;height:19px;}
.sns-tree-deck span{flex:1;min-width:0;overflow-wrap:anywhere;}
.sns-tree-deck small{white-space:nowrap;margin-left:auto;}
.sns-tree-empty{color:var(--muted);font-size:11px;padding:3px 7px;}
@media(max-width:360px){.sns-avatar{min-width:38px;min-height:38px;}.sns-profile-banner .sns-avatar{min-width:76px;min-height:76px}.sns-actions{margin-left:26px;margin-right:1px;}.sns-reply{margin-left:46px;}}
@media(prefers-reduced-motion:reduce){.sns-act.sns-heart-pop,.sns-act.sns-heart-pop:before,.sns-act.sns-heart-pop:after,.sns-pull-wheel{animation:none!important;}.sns-feed{transition:none!important;}}
/* Do not turn #app into a hidden scroll container: this breaks position:sticky on iOS/Chromium. */
html,body,#app{overflow-x:clip;overflow-y:visible;}


/* Kotoba v5.2 refinement */
/* The left edge of the reply SVG meets the left edge of post text;
   the bookmark SVG center meets the ellipsis SVG center. */
.sns-actions{display:grid;grid-template-columns:repeat(4,40px);justify-content:space-between;
 margin-left:43.5px;margin-right:-1px;padding:0;gap:0;}
.sns-actions .sns-act{width:40px;height:42px;min-width:40px;flex:none;}
.sns-profile-open strong{font-weight:400;}
.sns-post-body .sns-text{font-weight:760;}
.sns-tree-folder>summary .sns-folder-chevron svg{transform:rotate(0deg);}
.sns-tree-folder[open]>summary .sns-folder-chevron svg{transform:rotate(90deg);}
.sns-main-tabs{grid-template-columns:repeat(4,minmax(0,1fr));}
.sns-main-tabs button{font-size:12px;letter-spacing:-.15px;}
.sns-main-tabs button.active:after{left:20%;right:20%;}
.sns-profile-page{will-change:transform;position:relative;min-height:60vh;}
.sns-profile-leaving{pointer-events:none;box-shadow:-12px 0 28px #00000015;}
/* Preserve native vertical scrolling in both library sort modes.
   JavaScript starts moving a row only after the long-press threshold. */
.deck-card.sort-grabbable,.folder-card.sort-grabbable{touch-action:pan-y!important;}
.deck-entry.dragging .deck-card.sort-grabbable,.folder-entry.dragging .folder-card.sort-grabbable{cursor:grabbing;}
@media(max-width:360px){.sns-actions{margin-left:36.5px;margin-right:-1px;}}
@media(prefers-reduced-motion:reduce){.sns-profile-page{transition:none!important;}}

/* Kotoba v5.3: native scroll isolation + sticky library and card controls. */
html{scroll-behavior:auto;}
.library-sticky-head,.deck-detail-sticky{position:sticky;top:0;z-index:8;background:var(--paper);padding:7px 0 9px;box-shadow:0 1px 0 var(--line);}
.library-sticky-head .bar-actions{margin:8px 0 1px;}
.deck-detail-sticky .deck-detail-header{margin:0 0 9px;}
.deck-detail-sticky .deck-overview{min-height:52px;}
.deck-detail-sticky .search{margin:7px 0;}
.deck-detail-sticky .section-heading{margin:7px 0 3px;}
.deck-detail-sticky .selection-bar{margin:4px 0 0;}
.deck-detail-sticky .deck-top-trigger{width:37px;min-width:37px;height:37px;}
.deck-detail-sticky .deck-top-trigger svg{transform:rotate(-90deg);}
.deck-detail-sticky .deck-detail-header h2{font-size:clamp(14px,4vw,19px);}
.sns-profile-open{flex:0 0 42px;min-width:42px;width:42px;justify-content:center;}
.sns-post-head .sns-deck-name{font-size:14px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
@media(max-width:360px){.sns-profile-open{min-width:38px;flex-basis:38px;width:38px;}}

.library-sticky-head .library-fixed-search{margin:8px 0 3px;}
/* Kotoba 5.4: align deck author and card body; floating drag; gestures. */
.sns-post-head .sns-deck-name{margin-left:5px;}
@media(max-width:360px){.sns-post-head .sns-deck-name{margin-left:9px;}}
.deck-detail-sticky .deck-bottom-trigger{height:37px;width:37px;min-width:37px;}
.deck-detail-sticky .deck-bottom-trigger svg{transform:rotate(90deg);}
.deck-entry.dragging .deck-card.sort-grabbable,.folder-entry.dragging .folder-card.sort-grabbable{opacity:.36;box-shadow:none;}
.sort-floating{border:1px solid var(--accent)!important;border-radius:15px!important;background:var(--surface)!important;box-shadow:0 22px 38px #0005,0 7px 13px #0002!important;opacity:.98!important;will-change:transform;transition:box-shadow .12s ease;}
.sort-floating *{pointer-events:none!important;}
.kotoba-swiping-back{position:relative;will-change:transform;box-shadow:-18px 0 32px #0002;z-index:2;}
@media(prefers-reduced-motion:reduce){.sort-floating{transition:none!important}.kotoba-swiping-back{transition:none!important}}

/* Kotoba v5.5: fixes requested for touch-back, tall SNS art and pinned tab headings. */
.sns-image{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;}
.sns-image img{max-height:300px!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
.tab-study .page-heading,.tab-stats .page-heading{
 position:sticky;top:0;z-index:12;background:var(--paper);margin:0 -12px 14px;
 padding:7px 12px 9px;box-shadow:0 1px 0 var(--line);min-height:52px;
}
@media(max-width:370px){.tab-study .page-heading,.tab-stats .page-heading{margin-left:-9px;margin-right:-9px;padding-left:9px;padding-right:9px;}}

/* v5.6: Always fit the ENTIRE saved image in the learning card / quiz image region.
   Only the editor decides any crop: the study UI must never crop further. */
.card-art>img { object-fit:contain!important; object-position:center center; }

/* v5.7: horizontal SNS feed gestures and native page-pull suppression on other tabs. */
.sns-swipe-stage{min-width:0;touch-action:pan-y;}
html.kotoba-no-pull,body.kotoba-no-pull{overscroll-behavior-y:none;}
@media(prefers-reduced-motion:reduce){.sns-swipe-stage{transition:none!important;}}

/* Kotoba v5.8: full-width opaque SNS heading, appended answer, fading undo bars */
.tab-sns .sns-feed-head{
 margin-left:-12px;margin-right:-12px;
 padding-left:18px;padding-right:18px;
 background:var(--paper);
}
.sns-answer-section{
 margin-top:1.65em; /* a full blank line between front and answer */
 padding:0;
}
.sns-answer-label{
 display:inline-flex;align-items:center;gap:6px;
 font-size:12px;font-weight:800;line-height:1.55;
 color:var(--accent);background:var(--accent-soft);
 border-radius:7px;padding:4px 10px;margin-bottom:9px;
}
.sns-answer-label svg{height:14px;width:14px;}
.sns-answer-section .sns-answer-styled{font-weight:400;}
.sns-answer-section .sns-answer-styled strong{font-weight:850;}
.sns-answer-section .sns-answer-note{margin-top:17px;}
.sns-undo-bar{opacity:1;transform:translate(-50%,0);transition:opacity .4s ease,transform .4s ease;}
.sns-undo-bar.sns-undo-fading{opacity:0;transform:translate(-50%,10px);pointer-events:none;}
@media(prefers-reduced-motion:reduce){.sns-undo-bar{transition:opacity .4s linear,transform 0s;}}

/* Kotoba v5.9: thumb feedback, empty-feed swipe area, and soft-edge motion. */
.sns-act .sns-thumb{display:block;font-size:23px;line-height:1;filter:grayscale(1);transition:filter .16s,transform .16s;user-select:none;-webkit-user-select:none;}
.sns-act.sns-heart-pop{color:#f4bb18!important;animation:sns-heart-bounce .46s cubic-bezier(.24,.8,.25,1.4) both;}
.sns-act.sns-heart-pop .sns-thumb{filter:grayscale(0) drop-shadow(0 0 6px #ffdc56);transform:scale(1.08);}
.sns-act.sns-heart-pop:before{border-color:#ffd53b;box-shadow:0 0 12px #ffc62972;}
.sns-act.sns-heart-pop:after{background:#ffdf45;box-shadow:-20px -11px 0 #ffd12c,20px -10px 0 #ffec79,-15px 17px 0 #fbbd16,18px 17px 0 #ffe27d,0 -26px 0 #ffde4a;}
.sns-act.sns-heart-pop svg{fill:none;stroke:none;filter:none;}
.sns-swipe-stage{min-height:calc(100dvh - 129px - var(--kotoba-nav-height,76px) - env(safe-area-inset-top));}
.sns-answer-label{gap:0;}
.kotoba-edge-elastic{will-change:transform;}
@media(prefers-reduced-motion:reduce){.kotoba-edge-elastic{transform:none!important;transition:none!important}.sns-act .sns-thumb{transition:none}}