@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f7f7f4;--white:#fff;--ink:#182721;--muted:#76817b;--line:#e4e8e3;--green:#1f6d56;--green2:#e7f3ed;--lime:#d9ed76;--red:#a43e37;--redbg:#f9e7e5;--shadow:0 12px 34px rgba(30,49,39,.07)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}.app-shell{min-height:100vh;display:grid;grid-template-columns:252px minmax(0,1fr)}.sidebar{height:100vh;position:sticky;top:0;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);padding:27px 18px 17px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit;padding:0 8px 33px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--green);color:#fff;font:800 21px Manrope;box-shadow:0 5px 11px #1f6d5630}.brand strong{font:800 16px Manrope;letter-spacing:-.7px}.brand strong span{color:#a5bf52}.brand small{display:block;font:700 8px 'DM Sans';letter-spacing:1.6px;color:#86928c;margin-top:2px}.side-label{font-size:10px;font-weight:700;letter-spacing:1.3px;color:#93a099;padding:0 10px 12px}.side-label span{float:right;font-size:10px;letter-spacing:0;color:#68766e}.tree{overflow:auto;flex:1}.tree-row{display:flex;align-items:center;gap:8px;min-height:35px;padding:6px 9px;border-radius:8px;cursor:pointer;color:#54615b;font-size:13px;user-select:none}.tree-row:hover{background:#f4f7f3}.tree-row.active{background:#eaf3ed;color:#205e4b;font-weight:700}.tree-row.folder{font-weight:600;color:#34463c}.tree-row .tree-icon{width:17px;text-align:center;color:#75847a;font-size:13px}.tree-row .tree-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.tree-row .count{font-size:10px;color:#9aa59f}.tree-row .row-menu{opacity:0;border:0;background:transparent;color:#7e8a82;cursor:pointer}.tree-row:hover .row-menu{opacity:1}.tree-children{margin-left:15px;border-left:1px solid #e6ebe6;padding-left:7px}.side-bottom{border-top:1px solid var(--line);padding-top:14px;display:flex;gap:8px;align-items:center}.icon-button{height:34px;width:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:#748077;font-size:17px;cursor:pointer}.mode-switch{flex:1;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;color:#59675e;font-size:11px;font-weight:600;cursor:pointer}.mode-dot{width:7px;height:7px;border-radius:50%;background:#9bb65a}.mode-switch.admin .mode-dot{background:#cb8951}.mode-chevron{margin-left:auto;color:#9aa49e}.main-area{min-width:0}.topbar{height:65px;padding:0 34px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.65)}.crumbs{font-size:10px;letter-spacing:1.3px;color:#8b9790;font-weight:700}.crumbs strong{color:#46574d;letter-spacing:0;font-size:12px}.top-actions{display:flex;align-items:center;gap:16px}.local-pill{font-size:10px;color:#77857c}.local-pill i{display:inline-block;width:6px;height:6px;background:#8ab66d;border-radius:50%;margin-right:6px}.avatar{width:29px;height:29px;border-radius:50%;border:1px solid #dbe3dc;background:#edf3eb;color:#52634e;font-weight:700}.view{padding:29px 34px 42px;max-width:1500px;margin:auto}.welcome{display:flex;align-items:flex-end;justify-content:space-between;margin:7px 0 23px}.eyebrow{color:#8b978f;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}.welcome h1{font:700 clamp(23px,2.8vw,35px) Manrope;letter-spacing:-1.3px;margin:8px 0 6px}.welcome p{margin:0;color:#78847d;font-size:13px}.btn{border:1px solid var(--line);border-radius:9px;background:#fff;color:#36463c;padding:10px 14px;font:600 12px 'DM Sans';cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s}.btn:hover{border-color:#b5c8b8;transform:translateY(-1px)}.btn.primary{background:var(--green);border-color:var(--green);color:#fff}.btn.primary:hover{background:#165c47}.btn.lime{background:var(--lime);border-color:var(--lime);color:#27321f}.btn.ghost{background:transparent}.btn.small{font-size:11px;padding:7px 10px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.image-card,.panel,.library-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.image-card{overflow:hidden}.image-toolbar{height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #edf0ec}.image-title{font-size:12px;font-weight:700}.image-meta{color:#97a19a;font-size:10px;margin-left:8px;font-weight:500}.toolbar-actions{display:flex;gap:7px}.image-pad{padding:16px;min-height:390px;display:grid;place-items:center;background:#fbfcfa}.image-stage{position:relative;max-width:100%;max-height:68vh;line-height:0;overflow:hidden;background:#fff;border-radius:5px}.image-stage img{display:block;max-width:100%;max-height:68vh;width:auto;height:auto;object-fit:contain}.overlay-layer{position:absolute;inset:0;pointer-events:none;line-height:normal}.label-hit{position:absolute;transform:translate(-3px,-2px);min-width:25px;min-height:22px;border:1px dashed #68a48c;background:rgba(255,255,255,.94);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:1px 3px;box-shadow:0 1px 5px #294b391a;pointer-events:auto}.label-hit input{border:0;outline:0;background:transparent;width:100%;min-width:20px;text-align:center;font:600 clamp(9px,1vw,14px) 'DM Sans';color:#234234;padding:0}.label-hit .hint-btn{position:absolute;right:-25px;top:50%;transform:translateY(-50%);height:21px;width:21px;border:1px solid #dce7de;border-radius:50%;background:#fff;color:#487760;font-size:10px;cursor:pointer;line-height:1}.label-hit.correct{background:#dff1e3;border:1px solid #70a982}.label-hit.wrong{background:#f8e3e0;border:1px solid #d8887d}.label-hit.review{border:1px dashed #d29955;background:rgba(255,249,234,.97)}.letter.good{color:#277052}.letter.bad{color:#c03f38;text-decoration:underline;text-decoration-color:#d58c86}.char-feedback{position:absolute;left:0;right:0;top:calc(100% + 3px);font:700 11px 'DM Sans';text-align:center;white-space:nowrap;line-height:1.2}.image-caption{padding:11px 16px;color:#8b9790;font-size:10px;border-top:1px solid #edf0ec}.panel{padding:17px}.panel+.panel{margin-top:13px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.panel-title{font:700 13px Manrope;letter-spacing:-.2px}.panel-count{font-size:10px;color:#8a968f}.info-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #edf0ec;font-size:11px;color:#758179}.info-row:last-child{border:0}.info-row b{font-weight:600;color:#34463c;text-align:right}.game-actions{display:grid;gap:8px}.game-actions .btn{justify-content:center}.hint-note{font-size:10px;color:#8a968f;line-height:1.5;margin:12px 1px 0}.status-row{display:flex;align-items:center;gap:7px;color:#718078;font-size:10px}.status-dot{width:7px;height:7px;border-radius:50%;background:#92b879}.empty-state{min-height:420px;background:#fff;border:1px solid var(--line);border-radius:15px;display:grid;place-items:center;text-align:center;padding:35px;box-shadow:var(--shadow)}.empty-inner{max-width:425px}.empty-art{width:74px;height:74px;border-radius:24px;background:#eaf2e9;display:grid;place-items:center;color:#4e8066;margin:0 auto 20px;font:800 28px Manrope;transform:rotate(-4deg)}.empty-inner h2{font:700 21px Manrope;margin:0 0 8px;letter-spacing:-.5px}.empty-inner p{font-size:12px;color:#7b8880;line-height:1.7;margin:0 auto 18px}.empty-actions{display:flex;justify-content:center;gap:8px}.admin-head{display:flex;justify-content:space-between;align-items:flex-start;margin:7px 0 20px}.admin-head h1{font:700 29px Manrope;letter-spacing:-1px;margin:7px 0}.admin-head p{color:#7a877f;font-size:12px;margin:0}.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:17px;align-items:start}.review-panel{padding:0}.review-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid var(--line)}.review-head strong{font:700 13px Manrope}.review-body{padding:14px}.review-stage-wrap{max-height:62vh;overflow:auto;background:#fafbf9;border:1px solid var(--line);border-radius:9px;padding:9px;text-align:center}.review-stage{position:relative;display:inline-block;line-height:0;max-width:100%}.review-stage img{display:block;max-width:100%;max-height:62vh;width:auto}.review-poly{position:absolute;border:1.5px solid #e9a95c;background:#e9a95c26;cursor:pointer}.review-poly.selected{border:2px solid #347d61;background:#347d6125}.review-poly span{position:absolute;left:-1px;bottom:100%;font:700 9px 'DM Sans';background:#fff;color:#345746;padding:2px 4px;border:1px solid #dce8de;border-radius:3px;white-space:nowrap}.review-help{padding:10px 2px 0;color:#8b968f;font-size:10px;line-height:1.5}.term-list{display:grid;gap:8px;max-height:48vh;overflow:auto}.term-row{display:grid;grid-template-columns:17px minmax(0,1fr) 34px 18px;align-items:center;gap:7px;padding:7px;border:1px solid #e8ece8;border-radius:8px}.term-row input[type=checkbox]{accent-color:var(--green)}.term-row input[type=text]{width:100%;border:0;outline:none;background:transparent;font:500 11px 'DM Sans';color:#32443a}.term-row .score{font-size:9px;color:#9aa49e;text-align:right}.admin-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.admin-note{font-size:10px;color:#8b968f;line-height:1.6;margin-top:10px}.drop-zone{border:1.5px dashed #cbd8ce;background:#f8fbf7;border-radius:11px;padding:22px;text-align:center;cursor:pointer}.drop-zone:hover{border-color:#6e9d7d;background:#f3f8f2}.drop-zone strong{display:block;font-size:12px;margin:6px}.drop-zone span{font-size:10px;color:#89958d}.collection-list{display:grid;gap:8px}.collection-item{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:9px;font-size:11px}.collection-item strong{flex:1}.collection-item small{color:#909b94}.pill{display:inline-block;border-radius:999px;background:#f1f4f0;padding:4px 8px;font-size:9px;color:#748078}.game-banner{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}.game-banner h2{font:700 18px Manrope;margin:5px 0}.game-banner p{font-size:11px;color:#7b8780;margin:0}.bank{display:flex;flex-wrap:wrap;gap:8px}.bank-card{border:1px solid #e3e9e3;background:#fff;padding:8px 10px;border-radius:8px;font-size:11px;color:#46564c;cursor:grab;user-select:none}.bank-card.used{opacity:.38;pointer-events:none}.bank-card.dragging{opacity:.45}.game-summary{font-size:10px;color:#859188}.learn-note{padding:12px 14px;border-radius:9px;background:#f3f6f0;color:#69776d;font-size:10px;line-height:1.5;margin-top:12px}.admin-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:17px}.review-empty{padding:40px 18px;text-align:center;color:#829087;font-size:12px;line-height:1.7}.modal-card{width:min(450px,calc(100vw - 32px));background:#fff;border-radius:15px;padding:25px;position:relative;box-shadow:0 20px 65px #0d221540}.modal-close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:22px;color:#839088;cursor:pointer}.modal-card h2{font:700 20px Manrope;margin:0 0 8px}.modal-card p{font-size:12px;color:#7a877f;line-height:1.6}.modal-card input,.modal-card select{width:100%;padding:10px 11px;border:1px solid #dce4dd;border-radius:8px;font:12px 'DM Sans';margin:7px 0 12px}.modal-card label{font-size:10px;font-weight:700;color:#758178;letter-spacing:.5px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,18px);padding:10px 15px;background:#1e3027;color:#fff;border-radius:8px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-library{display:none}.file-input{display:none}.skeleton{color:#9aa49e;font-size:11px}.loading{display:flex;align-items:center;gap:9px;color:#728078;font-size:11px;padding:13px}.spinner{width:15px;height:15px;border:2px solid #dbe5dc;border-top-color:#388067;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1050px){.workspace,.admin-grid,.admin-layout{grid-template-columns:minmax(0,1fr) 260px}.view{padding-left:23px;padding-right:23px}.topbar{padding:0 23px}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative;z-index:3;padding:12px 15px 10px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 4px 10px}.side-label,.side-bottom{display:none}.tree{display:flex;gap:4px;overflow:auto;max-height:40px;border-top:1px solid #f0f2ef;padding-top:6px}.tree-row{min-width:max-content;min-height:30px;padding:5px 9px;background:#f5f7f4;font-size:11px}.tree-children{display:contents}.tree-row .count,.tree-row .row-menu{display:none}.topbar{height:49px;padding:0 16px}.view{padding:20px 14px 30px}.welcome{align-items:flex-start;gap:12px;flex-direction:column}.workspace,.admin-grid,.admin-layout{grid-template-columns:1fr}.image-pad{min-height:260px;padding:9px}.image-stage img{max-height:55vh}.panel{padding:14px}.panel+.panel{margin-top:10px}.mobile-library{display:block}.desktop-only{display:none}.admin-head{gap:10px}.admin-head h1{font-size:24px}.admin-head .btn{white-space:nowrap}.admin-grid .term-list{max-height:32vh}.review-stage img{max-height:48vh}.local-pill{font-size:9px}.image-toolbar{padding:0 10px}.toolbar-actions .btn{padding:7px 9px}.image-title{max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.term-remove{border:0;background:transparent;color:#b36f61;cursor:pointer;font-size:15px;line-height:1;padding:0}.bank-card.selected{border-color:#6d9d7d;background:#eff7ec;box-shadow:0 0 0 2px #d9ebd8}.bank-card{font-family:inherit}

/* Keep game coordinates and typography in the same image coordinate space. */
.image-stage:has(#game-image){overflow:visible;max-height:none;border-radius:0}
#game-overlay{width:100%;height:100%}
#game-overlay .label-hit{transform:none;min-width:0;min-height:0;padding:0 2px;border-radius:2px}
#game-overlay .label-hit input{min-width:0;height:100%;line-height:1.1;letter-spacing:0}
#game-overlay .label-hit input::placeholder{opacity:1;color:#677b70}
#game-overlay .label-hit:focus-within{z-index:40;outline:2px solid #70a982}
#game-overlay .label-hit:has(.char-feedback){z-index:30}
#game-overlay .char-feedback{right:auto;width:max-content;min-width:140px;max-width:240px;white-space:normal;overflow-wrap:anywhere;background:#fff;border:1px solid #dfb5ad;border-radius:6px;padding:7px 9px;box-shadow:0 4px 14px #203b2930;font-size:12px;line-height:1.5;pointer-events:none;z-index:50}
.image-card:has(#game-image){overflow:visible}
#game-overlay .hint-btn{right:-18px;width:16px;height:16px;font-size:9px;z-index:2}
.game-banner{flex-wrap:wrap;gap:12px}
.image-card:has(#game-image){min-width:0;width:100%;position:relative;z-index:1}
.image-pad:has(#game-image){display:block;min-width:0;min-height:0}
.image-stage:has(#game-image){width:100%}
.image-stage #game-image{width:100%;height:auto;max-height:none}
#game-overlay .label-hit:has(.char-feedback){z-index:50}
/* Allow the library and illustration to shrink inside a narrow screen. */
.sidebar,.workspace,.workspace>*,.image-card{min-width:0}
.image-pad{display:block;min-width:0;min-height:0}
.image-stage{width:100%;max-height:none}
.image-stage img{width:100%;height:auto;max-height:none}
/* The book's Bulgarian headings need room at every nesting level. */
@media(min-width:761px){
 .app-shell{grid-template-columns:320px minmax(0,1fr)}
 .tree-children{margin-left:10px;padding-left:0}
 .tree-row.folder{padding-left:6px!important;gap:5px;align-items:flex-start}
 .tree-row.folder .tree-name{white-space:normal;overflow:visible;overflow-wrap:anywhere;font-size:11px;line-height:1.4}
 .tree-row .tree-icon{flex-shrink:0;width:13px}
 .tree-row .count{flex-shrink:0}
}
.ocr-options{display:grid;gap:6px;margin-bottom:16px}
.ocr-options label{font-size:10px;font-weight:700;color:#607467}
.ocr-options select,.ocr-options input{width:100%;min-width:0;border:1px solid #dce4dd;border-radius:6px;padding:8px;font:11px 'DM Sans',sans-serif;color:#34463c;background:#fff}
.ocr-options small{font-size:10px;color:#839087;line-height:1.5}
.review-head strong{overflow-wrap:anywhere}
.welcome h1{overflow-wrap:anywhere}
.library-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
@media(max-width:760px){.admin-head{flex-wrap:wrap}.library-tools{justify-content:flex-start}.admin-head>div{min-width:0}}
.auth-gate{position:fixed;inset:0;z-index:1000;overflow:auto;background:#f3f5f0;display:grid;place-items:center;padding:28px}
.auth-gate[hidden]{display:none}
.auth-card{width:min(100%,460px);background:#fff;border:1px solid #dce4dd;border-radius:20px;padding:42px;box-shadow:0 24px 80px #263d3210;display:grid;gap:16px}
.auth-card .brand-mark{margin-bottom:12px}
.auth-card h1{font-size:36px;line-height:1.12;letter-spacing:-1.4px;margin:0;color:#263d32}
.auth-card p{line-height:1.6;color:#637368;margin:0}
.auth-card small{line-height:1.6;color:#78877d}
.auth-card .btn{justify-content:center;min-height:46px}
.auth-card .auth-status{font-size:12px;min-height:20px;color:#805140}
@media(max-width:500px){.auth-card{padding:26px}.auth-card h1{font-size:30px}}
[hidden]{display:none!important}
.trash-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}
.trash-delete{color:#a43e37;min-width:32px;padding:5px 9px;font-size:20px;line-height:1}