*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a18;background:#f9f9f8;justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem 1rem;font-family:system-ui,-apple-system,sans-serif;display:flex}.scene{width:100%;max-width:420px}.hdr{justify-content:space-between;align-items:center;margin-bottom:1.1rem;display:flex}.ttl{font-size:15px;font-weight:500}select{color:#555;cursor:pointer;background:#f1f0eb;border:.5px solid #ccc;border-radius:8px;padding:4px 8px;font-size:12px}.prog-row{align-items:center;gap:10px;margin-bottom:1rem;display:flex}.prog-bar{background:#ddd;border-radius:2px;flex:1;height:4px;overflow:hidden}.prog-fill{background:#3a8c5c;border-radius:2px;height:100%;transition:width .4s}.prog-txt{color:#777;white-space:nowrap;font-size:12px}.tabs{background:#efefec;border-radius:8px;gap:3px;margin-bottom:1.1rem;padding:3px;display:flex}.tab{text-align:center;cursor:pointer;color:#777;-webkit-user-select:none;user-select:none;border-radius:6px;flex:1;padding:6px;font-size:12px;transition:background .15s}.tab.on{color:#1a1a18;background:#fff;border:.5px solid #ddd;font-weight:500}.wrap{perspective:1200px;cursor:pointer;width:100%;height:220px;margin-bottom:1rem}.card{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.45,0,.55,1);position:relative}.card.flip{transform:rotateY(180deg)}.face{backface-visibility:hidden;background:#fff;border:.5px solid #ddd;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:1.25rem;display:flex;position:absolute}.back{transform:rotateY(180deg)}.lbl{color:#aaa;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-size:11px}.ref{text-align:center;font-size:26px;font-weight:500}.hint{color:#bbb;margin-top:16px;font-size:12px}.badge{color:#2a6ab5;background:#e8f0fb;border-radius:99px;margin-bottom:12px;padding:3px 9px;font-size:11px;font-weight:500}.vtxt{text-align:center;font-size:13px;line-height:1.75}.vref{color:#aaa;margin-top:10px;font-size:12px}.ctrls{gap:8px;display:flex}.btn{cursor:pointer;color:#1a1a18;background:#fff;border:.5px solid #ddd;border-radius:8px;flex:1;padding:10px;font-size:13px;font-weight:500;transition:background .15s}.btn:hover{background:#f5f5f2}.btn-ok{color:#2d7a52;border-color:#a3d4b8}.btn-ok:hover{background:#edf7f1}.btn-learn{color:#9a6c10;border-color:#f0d49a}.btn-learn:hover{background:#fdf8ec}.btn-sk{color:#aaa;flex:none;padding:10px 14px;font-weight:400}.ti{flex-direction:column;gap:8px;display:flex}input[type=text]{color:#1a1a18;background:#f9f9f8;border:.5px solid #ddd;border-radius:8px;width:100%;padding:10px;font-family:system-ui,-apple-system,sans-serif;font-size:14px}.fb{text-align:center;color:#aaa;min-height:18px;font-size:12px}.test-btns{gap:8px;display:flex}.stats{gap:8px;margin-top:1rem;display:flex}.pill{text-align:center;background:#f1f0eb;border-radius:8px;flex:1;padding:8px 4px}.pill .v{font-size:20px;font-weight:500;display:block}.pill .k{color:#777;font-size:11px}.un .v{color:#888}.le .v{color:#9a6c10}.ma .v{color:#2d7a52}.avatar{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:600;transition:opacity .15s;display:flex}.avatar:hover{opacity:.85}.user-panel-wrap{position:relative}.user-panel{z-index:100;background:#fff;border:.5px solid #ddd;border-radius:12px;width:240px;animation:.15s panelIn;position:absolute;top:calc(100% + 8px);left:0;overflow:hidden;box-shadow:0 4px 16px #00000014}@keyframes panelIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.user-row{cursor:pointer;align-items:center;gap:10px;padding:10px 14px;transition:background .1s;display:flex}.user-row:hover{background:#f9f9f8}.user-row.active{background:#f1f0eb}.user-row .uname{flex:1;font-size:13px;font-weight:500}.user-row .utrans{color:#999;text-transform:uppercase;font-size:11px}.panel-divider{background:#eee;height:.5px;margin:0}.add-btn{text-align:left;color:#555;cursor:pointer;background:0 0;border:none;width:100%;padding:10px 14px;font-size:13px;transition:background .1s;display:block}.add-btn:hover{background:#f9f9f8}.add-btn:disabled{color:#bbb;cursor:default}.user-form{flex-direction:column;gap:10px;padding:12px 14px;display:flex}.user-form input,.user-form select{color:#1a1a18;background:#f9f9f8;border:.5px solid #ddd;border-radius:8px;width:100%;padding:8px 10px;font-size:13px}.user-form label{color:#999;margin-bottom:2px;font-size:11px;display:block}.swatches{flex-wrap:wrap;gap:6px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;transition:border-color .1s}.swatch.selected{border-color:#1a1a18}.form-btns{gap:8px;display:flex}.form-btns .btn{padding:8px;font-size:12px}.badge{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s;position:relative}.badge:hover{background:#d8e8f8}.badge-override{color:#9a6c10;background:#fde8c8}.badge-override:hover{background:#f8dab0}.badge-dot{vertical-align:middle;background:#9a6c10;border-radius:50%;width:5px;height:5px;margin-bottom:1px;margin-left:4px;display:inline-block}.trans-picker{gap:4px;margin-top:8px;animation:.12s panelIn;display:flex}.trans-opt{cursor:pointer;color:#555;background:#f1f0eb;border:.5px solid #ddd;border-radius:99px;padding:4px 8px;font-size:11px;font-weight:500;transition:background .1s}.trans-opt:hover{background:#e5e4de}.trans-opt.active{color:#fff;background:#1a1a18;border-color:#1a1a18}.add-verse-btn{color:#999;cursor:pointer;background:0 0;border:.5px dashed #ccc;border-radius:8px;width:100%;margin-top:10px;padding:9px;font-size:13px;transition:border-color .15s,color .15s;display:block}.add-verse-btn:hover{color:#555;border-color:#aaa}.add-verse-panel{background:#fff;border:.5px solid #ddd;border-radius:12px;margin-top:8px;padding:14px;animation:.15s panelIn;box-shadow:0 4px 16px #00000012}.search-row{gap:8px;display:flex}.search-row input{flex:1}.verse-preview{margin-top:12px}.preview-ref{margin-bottom:10px;font-size:15px;font-weight:500}.preview-block{margin-bottom:8px}.preview-label{color:#aaa;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;font-size:11px}.preview-text{color:#333;font-size:13px;line-height:1.7}.btn-add{color:#fff;cursor:pointer;background:#3a8c5c;border:none;border-radius:8px;width:100%;margin-top:10px;padding:10px;font-size:13px;font-weight:500;transition:background .15s}.btn-add:hover{background:#2d7a52}.btn-add:disabled{cursor:default;background:#aaa}.status-msg{text-align:center;margin-top:8px;font-size:12px}.status-msg.error{color:#c0392b}.status-msg.muted{color:#aaa}.status-msg.success{color:#2d7a52}.cancel-link{text-align:center;color:#aaa;cursor:pointer;margin-top:8px;font-size:12px;display:block}.cancel-link:hover{color:#555}.already-msg{text-align:center;color:#aaa;background:#f1f0eb;border-radius:8px;margin-top:10px;padding:8px;font-size:12px}