.lop-runner-shell{font-family:Inter,Segoe UI,sans-serif;background:var(--lop-app-bg);min-height:100vh;padding:clamp(1.5rem,4vw,3rem)}.lop-header{max-width:1100px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left}.lop-header h1{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--lop-text-primary);font-weight:800}.lop-header p{margin:.25rem 0 0;color:var(--lop-text-secondary);font-size:.95rem}.lop-status{background:var(--lop-status-badge-bg);color:var(--lop-status-badge-text);padding:.35rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem}.lop-card{background:var(--lop-card-bg);border-radius:18px;box-shadow:var(--lop-shadow);border:1px solid var(--lop-border);width:100%;max-width:900px;min-height:420px;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem);text-align:center;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}.lop-card.active{display:flex}.lop-card h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--lop-text-primary);margin:0}.lop-instruction{font-size:1rem;color:var(--lop-text-secondary);line-height:1.6;max-width:640px;margin:0 auto}.lop-btn-primary{background:var(--lop-accent-primary);color:#fff;border:none;padding:.85rem 2.4rem;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 6px -2px #4f46e54d;transition:transform .2s,background .2s}.lop-btn-primary:hover{background:var(--lop-accent-hover);transform:translateY(-1px)}.lop-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.lop-btn-secondary{background:#fff;border:1px solid var(--lop-border);color:var(--lop-text-primary);padding:.75rem 1.6rem;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer}.lop-btn-secondary:hover{border-color:var(--lop-accent-primary);color:var(--lop-accent-primary);background:var(--lop-accent-light)}.lop-choice-group{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.lop-btn-choice{background:#fff;border:2px solid var(--lop-border);color:var(--lop-text-primary);padding:.9rem 2.4rem;border-radius:12px;font-size:1.15rem;font-weight:600;cursor:pointer;transition:all .2s}.lop-btn-choice:hover{border-color:var(--lop-accent-primary);color:var(--lop-accent-primary);background:var(--lop-accent-light)}.lop-question{font-size:1.2rem;color:var(--lop-accent-primary);font-weight:600}.lop-word{font-size:clamp(2.2rem,6vw,3.8rem);font-weight:800;color:var(--lop-text-primary);letter-spacing:.2em;transition:opacity .25s ease,transform .25s ease}.lop-word.hidden{opacity:0;transform:scale(.92)}.lop-math-display{font-size:clamp(2rem,4vw,2.6rem);font-weight:700}.lop-timer{width:min(520px,100%);height:6px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:1.5rem}.lop-timer-fill{height:100%;background:var(--lop-accent-primary);transition:width .3s linear}.lop-recall-input{width:min(560px,100%);min-height:150px;padding:1rem;border-radius:12px;border:2px solid var(--lop-border);font-size:1rem;resize:none;font-family:inherit}.lop-recall-input:focus{outline:none;border-color:var(--lop-accent-primary)}.lop-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;width:100%}.lop-result{background:#f8fafc;border-radius:12px;border:1px solid var(--lop-border);padding:1.25rem;text-align:left}.lop-stat-label{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--lop-text-secondary);font-weight:700}.lop-stat-value{font-size:2.4rem;font-weight:800;color:var(--lop-accent-primary);margin:.5rem 0}.lop-bar-bg{width:100%;height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}.lop-bar-fill{height:100%;border-radius:999px;transition:width .4s ease}.lop-note{font-size:.9rem;color:var(--lop-text-secondary)}.lop-context{max-width:900px;margin:1.5rem auto 0;padding:1.5rem clamp(1.5rem,5vw,2.5rem);background:var(--lop-card-bg);border-radius:16px;border:1px solid var(--lop-border);box-shadow:var(--lop-shadow);color:var(--lop-text-secondary);line-height:1.7}.lop-context h3{margin:0 0 .75rem;color:var(--lop-text-primary);font-size:1.25rem}.lop-config{max-width:900px;margin:1.5rem auto 0;padding:1.75rem clamp(1.5rem,5vw,2.5rem);background:var(--lop-card-bg);border-radius:16px;border:1px solid var(--lop-border);box-shadow:var(--lop-shadow)}.lop-config h3{margin:0 0 1rem;color:var(--lop-text-primary);font-size:1.35rem}.lop-config-grid{display:grid;gap:1.5rem}@media(min-width:768px){.lop-config-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.lop-config-panel{background:#f8fafc;border-radius:14px;border:1px solid var(--lop-border);padding:1.25rem}.lop-config-panel h4{margin:0 0 .4rem;color:var(--lop-text-primary)}.lop-config-panel p{margin:0 0 .9rem;color:var(--lop-text-secondary);font-size:.9rem}.lop-level-options{display:grid;gap:.75rem}.lop-checkbox{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:var(--lop-text-primary)}.lop-checkbox input{margin-top:.2rem}.lop-level-description{display:block;font-size:.8rem;color:var(--lop-text-secondary);margin-top:.15rem}.lop-level-counts{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem}.lop-math-toggle{margin-top:1rem;padding:.85rem 1rem;border-radius:14px;border:1px solid var(--lop-border);background:#f8fafc;display:flex;justify-content:space-between;align-items:center;gap:1rem}.lop-math-toggle h4{margin:0;font-size:.95rem;color:var(--lop-text-primary)}.lop-math-toggle p{margin:.25rem 0 0;font-size:.8rem;color:var(--lop-text-secondary)}.lop-level-hint{margin:.4rem 0 0;font-size:.85rem;color:var(--lop-text-secondary)}.lop-level-count{border:1px solid var(--lop-border);background:#fff;border-radius:999px;padding:.35rem .8rem;font-size:.85rem;display:flex;align-items:center;gap:.4rem}.lop-radio-group{display:flex;flex-direction:column;gap:.6rem;font-size:.95rem;color:var(--lop-text-primary)}.lop-config-warning{margin-top:.75rem;color:#b45309;font-size:.9rem}.lop-custom-builder{margin-top:1.5rem;display:grid;gap:1.5rem;align-items:stretch}@media(min-width:900px){.lop-custom-builder{grid-template-columns:repeat(2,minmax(0,1fr))}}.lop-custom-form,.lop-custom-list{background:#f8fafc;border-radius:14px;border:1px solid var(--lop-border);padding:1.25rem;height:100%}.lop-custom-header h4{margin:0 0 .4rem}.lop-custom-header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.lop-help-button{border:1px solid var(--lop-border);background:#fff;color:var(--lop-text-primary);border-radius:999px;padding:.3rem .9rem;font-size:.85rem;font-weight:600;cursor:pointer}.lop-help-button:hover{border-color:var(--lop-accent-primary);color:var(--lop-accent-primary);background:var(--lop-accent-light)}.lop-help-panel{margin-top:.75rem;border-radius:12px;border:1px solid var(--lop-border);background:#fff;padding:.9rem 1rem}.lop-help-panel h5{margin:0 0 .6rem;color:var(--lop-text-primary);font-size:.95rem}.lop-help-grid{display:grid;gap:.75rem}@media(min-width:720px){.lop-help-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.lop-help-grid strong{color:var(--lop-text-primary)}.lop-help-grid p{margin:.35rem 0 0;font-size:.82rem;color:var(--lop-text-secondary)}.lop-help-example span{color:var(--lop-text-primary);font-weight:600}.lop-custom-header p{margin:0 0 1rem;color:var(--lop-text-secondary);font-size:.9rem}.lop-custom-fields{display:grid;gap:.9rem}.lop-custom-fields label{display:grid;gap:.35rem;font-size:.85rem;color:var(--lop-text-secondary)}.lop-custom-fields input,.lop-custom-fields select{border-radius:10px;border:1px solid var(--lop-border);padding:.6rem .8rem;font-size:.95rem;color:var(--lop-text-primary)}.lop-custom-question{grid-column:1 / -1}.lop-custom-actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}.lop-custom-list ul{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}.lop-custom-list li{display:flex;justify-content:space-between;gap:.75rem;padding:.75rem;border-radius:12px;border:1px solid var(--lop-border);background:#fff}.lop-custom-list li strong{display:block;color:var(--lop-text-primary)}.lop-custom-list li span{display:inline-block;margin-top:.25rem;font-size:.8rem;color:var(--lop-text-secondary)}.lop-custom-list li p{margin:.4rem 0 0;font-size:.85rem;color:var(--lop-text-secondary)}.lop-custom-list-actions{display:flex;flex-direction:column;gap:.4rem}.lop-custom-list-actions button{border:none;background:transparent;color:var(--lop-accent-primary);font-weight:600;cursor:pointer;padding:0;text-align:right}.lop-custom-list-actions button:last-child{color:#dc2626}.lop-empty{color:var(--lop-text-secondary);font-size:.9rem}.lop-data-shell{max-width:1100px;margin:3rem auto 0;display:flex;flex-direction:column;gap:1.75rem}.lop-data-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.lop-data-header h2{margin:0;color:var(--lop-text-primary);font-size:1.4rem}.lop-data-header p{margin:.3rem 0 0;color:var(--lop-text-secondary);font-size:.95rem}.lop-live-shell{max-width:900px;margin:1.5rem auto 0}.lop-live-card{background:var(--lop-card-bg);border-radius:18px;border:1px solid var(--lop-border);box-shadow:var(--lop-shadow);padding:2rem;text-align:center}.lop-live-card h2{margin:0 0 .8rem;color:var(--lop-text-primary);font-size:1.5rem}.lop-live-status{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;padding:.35rem .9rem;border-radius:999px;background:#f1f5f9;color:var(--lop-text-secondary);font-weight:600;font-size:.85rem}.lop-live-status.done{background:#dcfce7;color:#15803d}.lop-setup-panel{max-width:1100px;margin:1.5rem auto 0;padding:0;background:transparent;border:none;box-shadow:none}.lop-setup-panel-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}.lop-setup-panel-icon{width:36px;height:36px;border-radius:10px;background:#e0f2fe;display:grid;place-items:center;font-size:1.1rem}.lop-setup-panel-header h2{margin:0;color:var(--lop-text-primary);font-size:1.2rem}.lop-setup-panel-header p{margin:.25rem 0 0;color:var(--lop-text-secondary);font-size:.9rem}.lop-setup-shell{display:grid;gap:2rem}@media(min-width:1024px){.lop-setup-shell{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}}.lop-setup-main{display:grid;gap:1.5rem}.lop-step-card{background:var(--lop-card-bg);border-radius:18px;border:1px solid var(--lop-border);box-shadow:var(--lop-shadow);padding:1.5rem}.lop-step-header{display:flex;justify-content:space-between;gap:1rem}.lop-step-header h2{margin:0;color:var(--lop-text-primary);font-size:1.2rem}.lop-step-header p{margin:.35rem 0 0;color:var(--lop-text-secondary);font-size:.9rem}.lop-step-pill{background:#eef2ff;color:#4338ca;border-radius:999px;padding:.35rem .8rem;font-size:.7rem;font-weight:700;letter-spacing:.15em;height:fit-content}.lop-level-grid{display:grid;gap:1rem;margin-top:1rem}@media(min-width:900px){.lop-level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.lop-level-card{position:relative;border:1px solid var(--lop-border);border-radius:16px;background:#f8fafc;padding:1rem;display:grid;gap:.6rem;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}.lop-level-card input{position:absolute;opacity:0;pointer-events:none}.lop-level-card.active{background:#eef2ff;box-shadow:0 10px 20px -16px #4f46e580;transform:translateY(-2px)}.lop-level-icon{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 2px 6px -4px #0f172a59}.lop-level-card h4{margin:0;color:var(--lop-text-primary)}.lop-level-card p{margin:.35rem 0 0;font-size:.82rem;color:var(--lop-text-secondary)}.lop-level-check{position:absolute;top:.8rem;right:.8rem;width:28px;height:28px;border-radius:8px;border:1px solid var(--lop-border);background:#fff;display:grid;place-items:center;font-weight:700;color:#4f46e5}.lop-level-card.active .lop-level-check{background:#4f46e5;color:#fff;border-color:#4f46e5}.lop-segmented{display:inline-flex;gap:.35rem;background:#f1f5f9;padding:.3rem;border-radius:12px}.lop-segmented button{border:none;background:transparent;padding:.45rem 1rem;border-radius:10px;font-weight:600;color:var(--lop-text-secondary);cursor:pointer}.lop-segmented button.active{background:#fff;color:var(--lop-text-primary);box-shadow:0 4px 8px -6px #0f172a40}.lop-stimuli-table{margin-top:1rem;border-radius:16px;border:1px solid var(--lop-border);overflow:hidden;background:#f8fafc}.lop-table-head,.lop-table-row{display:grid;grid-template-columns:170px 170px 1fr;gap:1rem;align-items:center}.lop-table-head{padding:.8rem 1.1rem;font-size:.8rem;font-weight:700;color:#64748b;background:#f8fafc}.lop-table-body{background:#fff;max-height:280px;overflow-y:auto}.lop-table-row{padding:.85rem 1.1rem;border-top:1px solid var(--lop-border);font-size:.9rem;color:var(--lop-text-primary)}.lop-table-empty{padding:1.4rem;text-align:center;color:var(--lop-text-secondary)}.lop-table-add{width:100%;border:none;background:#f8fafc;color:#4f46e5;font-weight:600;padding:.85rem;cursor:pointer;border-top:1px solid var(--lop-border)}.lop-word-chip{font-weight:700;color:#4f46e5;letter-spacing:.05em}.lop-level-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;border-radius:999px;padding:.25rem .7rem;width:fit-content}.lop-level-tag.structural{background:#e2e8f0;color:#475569}.lop-level-tag.phonemic{background:#e0f2fe;color:#0369a1}.lop-level-tag.semantic{background:#dcfce7;color:#15803d}.lop-question-text{color:var(--lop-text-secondary);font-style:italic}@media(max-width:720px){.lop-table-head{display:none}.lop-table-row{grid-template-columns:1fr;gap:.35rem}}.lop-setup-side{display:grid;gap:1.5rem}.lop-summary-card{background:var(--lop-card-bg);border:1px solid var(--lop-border);border-radius:18px;padding:1.5rem;box-shadow:var(--lop-shadow);display:grid;gap:1rem}.lop-summary-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.lop-summary-header h4{margin:0;font-size:1rem;color:var(--lop-text-primary)}.lop-summary-pill{border-radius:999px;padding:.25rem .7rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:1px solid transparent}.lop-summary-pill.ready{color:#16a34a;border-color:#16a34a}.lop-summary-pill.needs{color:#d97706;border-color:#f59e0b}.lop-summary-total p{margin:0;font-size:.85rem;color:var(--lop-text-secondary)}.lop-summary-total h3{margin:.25rem 0 0;font-size:2rem;color:var(--lop-text-primary)}.lop-summary-sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.8rem;border-top:1px solid var(--lop-border);padding-top:.8rem}.lop-summary-sub span{display:block;font-size:.75rem;color:var(--lop-text-secondary)}.lop-summary-sub strong{font-size:1.1rem;color:var(--lop-text-primary)}.lop-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}.lop-toggle input{position:absolute;opacity:0;pointer-events:none}.lop-toggle-slider{width:42px;height:22px;background:#94a3b859;border-radius:999px;position:relative;transition:background .2s ease}.lop-toggle-slider:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s ease}.lop-toggle input:checked+.lop-toggle-slider{background:#22c55e}.lop-toggle input:checked+.lop-toggle-slider:after{transform:translate(20px)}.lop-launch{width:100%;justify-content:center;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem}.lop-launch-note{display:block;margin-top:.35rem;font-size:.75rem;font-weight:500;color:#fffc;line-height:1.4}.lop-btn-secondary.lop-launch .lop-launch-note{color:var(--lop-text-secondary)}.lop-delivery-card{background:var(--lop-card-bg);border-radius:16px;border:1px solid var(--lop-border);padding:1.2rem;display:grid;gap:1rem}.lop-delivery-header h4{margin:0;font-size:1rem;color:var(--lop-text-primary)}.lop-delivery-header p{margin:.35rem 0 0;color:var(--lop-text-secondary);font-size:.85rem}.lop-delivery-option{border-radius:14px;border:1px solid var(--lop-border);padding:.9rem 1rem;display:grid;gap:.75rem}.lop-delivery-option h5{margin:0;font-size:.95rem;color:var(--lop-text-primary)}.lop-delivery-option p{margin:.25rem 0 0;color:var(--lop-text-secondary);font-size:.82rem}.lop-delivery-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.lop-btn-link{border:none;background:transparent;color:#4338ca;font-weight:600;font-size:.8rem;cursor:pointer;padding:.2rem .4rem}.lop-btn-link:hover{text-decoration:underline}.lop-teacher-toggle{width:100%}.lop-teacher-card{background:var(--lop-card-bg);border-radius:16px;border:1px solid var(--lop-border);padding:1.2rem;display:grid;gap:.9rem}.lop-teacher-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.lop-teacher-header h4{margin:0;font-size:1rem;color:var(--lop-text-primary)}.lop-teacher-close{border:none;background:#eef2ff;color:#4338ca;font-weight:700;font-size:.75rem;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;cursor:pointer}.lop-teacher-card ol{margin:0;padding-left:1.1rem;color:var(--lop-text-secondary);font-size:.85rem;line-height:1.5;display:grid;gap:.35rem}.lop-tip-card{background:var(--lop-card-bg);border-radius:16px;border:1px solid var(--lop-border);padding:1.2rem}.lop-tip-button{width:100%;border:none;background:transparent;display:flex;align-items:center;gap:.75rem;padding:0;cursor:pointer}.lop-tip-icon{width:36px;height:36px;border-radius:12px;background:#fef3c7;display:grid;place-items:center}.lop-tip-title{font-weight:700;color:var(--lop-text-primary);font-size:.95rem}.lop-tip-toggle{margin-left:auto;font-size:.75rem;font-weight:700;text-transform:uppercase;color:#4f46e5}.lop-tip-table{margin-top:1rem;display:grid;gap:1rem}.lop-tip-row{padding-top:.75rem;border-top:1px solid var(--lop-border)}.lop-tip-row:first-child{border-top:none;padding-top:0}.lop-tip-row h5{margin:0 0 .4rem;color:var(--lop-text-primary);font-size:.9rem}.lop-tip-row p{margin:.35rem 0 0;color:var(--lop-text-secondary);font-size:.85rem;line-height:1.5}.lop-tip-connection{color:#1d4ed8;font-weight:600}.lop-live-host-card{background:var(--lop-card-bg);border-radius:16px;border:1px solid var(--lop-border);padding:1.2rem;display:grid;gap:.9rem}.lop-live-host-card h4{margin:0;color:var(--lop-text-primary);font-size:1rem}.lop-live-host-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem}.lop-live-pill{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .7rem;border-radius:999px;background:#e2e8f0;color:#475569}.lop-live-pill.active{background:#dcfce7;color:#15803d}.lop-live-pill.ended{background:#fee2e2;color:#b91c1c}.lop-live-host-card p{margin:0;color:var(--lop-text-secondary);font-size:.9rem}.lop-join-code{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;border-radius:12px;border:1px dashed var(--lop-border);font-size:.9rem;gap:.6rem}.lop-join-code strong{font-size:1.1rem;color:var(--lop-text-primary);letter-spacing:.12em}.lop-join-copy{margin-left:auto;border:none;background:#e0e7ff;color:#4338ca;font-weight:700;font-size:.75rem;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;cursor:pointer}.lop-join-copy:disabled{opacity:.5;cursor:not-allowed}.lop-live-actions{display:flex;gap:.6rem;flex-wrap:wrap}.lop-live-actions button{flex:1}.lop-live-dashboard{width:100%}.lop-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;display:grid;place-items:center;z-index:50;padding:1.5rem}.lop-modal-card{width:min(520px,100%);background:#fff;border-radius:18px;padding:1.6rem;box-shadow:0 20px 40px -30px #0f172a99;display:grid;gap:.9rem}.lop-modal-card h2{margin:0;color:var(--lop-text-primary);font-size:1.3rem}.lop-modal-card p{margin:0;color:var(--lop-text-secondary);font-size:.95rem;line-height:1.5}.lop-modal-note{background:#f8fafc;border-radius:12px;padding:.75rem .9rem;font-size:.9rem;color:var(--lop-text-primary)}.lop-modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:.2rem}.validity-game-shell{font-family:Inter,Segoe UI,sans-serif;background-color:var(--vg-app-bg);color:var(--vg-text-primary);border-radius:32px;padding:2.5rem clamp(1.5rem,3vw,3rem);box-shadow:var(--vg-shadow);width:100%;position:relative;overflow:hidden}.validity-game-inner{width:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.vg-header-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:1rem}.vg-title-group h1{font-size:1.9rem;font-weight:700;margin:0;color:var(--vg-text-primary)}.vg-title-group p{margin:.25rem 0 0;color:var(--vg-text-secondary);font-size:.95rem}.vg-level-badge{background-color:var(--vg-level-badge-bg);color:var(--vg-level-badge-text);padding:.6rem 1.25rem;border-radius:10px;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem}.vg-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;width:100%}.vg-status-card{background:var(--vg-card-bg);padding:1rem 1.25rem;border-radius:14px;border:1px solid var(--vg-border);box-shadow:var(--vg-shadow);display:flex;align-items:center;gap:.9rem;font-weight:500}.vg-icon-box{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600}.vg-icon-blue{background-color:var(--vg-icon-blue-bg);color:var(--vg-icon-blue-text)}.vg-icon-indigo{background-color:var(--vg-icon-indigo-bg);color:var(--vg-icon-indigo-text)}.vg-workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.5rem;align-items:flex-start;width:100%;position:relative}@media(max-width:900px){.vg-workspace-grid{grid-template-columns:1fr}}.vg-connection-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:40;overflow:visible}.vg-connection-path{fill:none;stroke:var(--vg-accent);stroke-width:3px;stroke-linecap:round;opacity:0;transition:opacity .2s;filter:drop-shadow(0 0 3px rgba(79,70,229,.4))}.vg-connection-path.visible{opacity:1}.vg-paper-card{background:var(--vg-card-bg);border-radius:18px;box-shadow:var(--vg-shadow);padding:clamp(2rem,3vw,3.5rem);min-height:520px;position:relative;line-height:2;font-size:1.15rem;color:var(--vg-paper-font);transition:opacity .3s ease}.vg-journal-header{border-bottom:2px solid var(--vg-border);padding-bottom:1.5rem;margin-bottom:2rem}.vg-journal-title{font-size:1.6rem;font-weight:700;color:var(--vg-text-primary);margin:0 0 .5rem}.vg-journal-meta{font-size:.92rem;color:var(--vg-text-secondary);display:flex;flex-wrap:wrap;gap:1.25rem;font-style:italic}.vg-sidebar-column{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.75rem}.vg-sidebar-header{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--vg-text-secondary)}.vg-comment-card{background:var(--vg-card-bg);border-left:4px solid var(--vg-success);padding:1rem;border-radius:0 12px 12px 0;box-shadow:var(--vg-shadow);font-size:.9rem;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;animation:vg-slide-in .4s ease-out}.vg-comment-card:hover,.vg-comment-card.active-link{background-color:var(--vg-sidebar-highlight);box-shadow:0 10px 15px -3px #0000001a;border-left-color:var(--vg-accent)}.vg-comment-card h4{margin:0 0 .35rem;color:#065f46;font-size:.95rem}.vg-comment-card p{margin:0;color:var(--vg-text-secondary);line-height:1.4}.vg-target{cursor:pointer;padding:.1rem .25rem;border-radius:6px;transition:all .2s;border-bottom:2px dotted transparent}.vg-target:hover{background-color:var(--vg-accent-light);border-bottom-color:var(--vg-accent);color:var(--vg-accent)}.vg-target.flagged{background-color:var(--vg-comment-success-bg);color:#065f46;font-weight:600;cursor:default}.vg-target.active-link{background-color:var(--vg-accent-light);color:var(--vg-accent);box-shadow:0 0 0 2px var(--vg-accent)}.vg-target.invalid{background-color:#fee2e2}.vg-check-mark{display:inline-block;margin-left:.25rem;color:var(--vg-success);font-weight:900;font-size:1.15rem;vertical-align:middle;animation:vg-pop-in .4s cubic-bezier(.175,.885,.32,1.275) forwards}.vg-completion-bar{background:var(--vg-text-primary);color:#fff;padding:1rem 1.5rem;border-radius:12px;margin-top:1.5rem;display:none;justify-content:space-between;align-items:center;box-shadow:0 10px 15px -3px #0000001a}.vg-completion-bar.visible{display:flex;animation:vg-slide-up .4s ease-out}.vg-next-btn{background:var(--vg-accent);color:#fff;border:none;padding:.65rem 1.5rem;border-radius:10px;font-weight:600;cursor:pointer;transition:all .2s}.vg-next-btn:hover{background:var(--vg-accent-hover);transform:translateY(-1px)}.vg-instruction-card{background:var(--vg-card-bg);padding:1.25rem 1.5rem;border-radius:14px;border:1px solid var(--vg-border);display:flex;gap:1rem;align-items:center;font-size:.95rem;color:var(--vg-text-secondary);box-shadow:var(--vg-shadow)}.vg-instruction-icon{background:var(--vg-hint-icon-bg);width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600}.vg-tutorial-dimmer{position:fixed;top:0;left:0;width:100%;height:100%;background:#1e293bb3;z-index:900;opacity:0;pointer-events:none;transition:opacity .3s}.vg-tutorial-dimmer.visible{opacity:1;pointer-events:auto}.vg-tutorial-box{position:absolute;background:#fff;padding:1.5rem;border-radius:14px;width:300px;box-shadow:0 20px 25px -5px #0003;z-index:920;border:2px solid var(--vg-accent);display:none}.vg-tutorial-box.visible{display:block;animation:vg-float-up .4s ease-out}.vg-tutorial-box h3{margin:0 0 .75rem;color:var(--vg-accent);font-size:1.1rem}.vg-tutorial-box p{margin:0 0 1rem;font-size:.95rem;color:#475569;line-height:1.5}.vg-tutorial-btn{background:var(--vg-accent);color:#fff;border:none;padding:.5rem 1.25rem;border-radius:8px;font-weight:600;cursor:pointer;float:right;font-size:.9rem}.vg-tutorial-skip{position:absolute;top:.75rem;right:.75rem;background:transparent;border:none;color:var(--vg-text-secondary);font-weight:600;cursor:pointer;font-size:.85rem}.vg-tutorial-skip:hover{color:var(--vg-accent)}.vg-tutorial-highlight{position:relative;box-shadow:0 0 0 4px var(--vg-accent);z-index:910}@keyframes vg-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes vg-pop-in{0%{transform:scale(0) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes vg-slide-up{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes vg-float-up{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:640px){.vg-header-container{flex-direction:column;align-items:flex-start}.validity-game-shell{padding:1.5rem}}.vg-modal-dimmer{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172aa6;z-index:950}.vg-modal-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--vg-card-bg);border-radius:16px;padding:2rem;width:min(90vw,420px);box-shadow:0 30px 60px #0f172a40;z-index:960;border:1px solid var(--vg-border);text-align:center}.vg-modal-panel h3{margin-top:0;margin-bottom:.5rem;color:var(--vg-text-primary);font-size:1.35rem}.vg-modal-panel p{margin:0 0 1.5rem;color:var(--vg-text-secondary)}.vg-modal-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}.vg-secondary-btn{background:transparent;border:1px solid var(--vg-border);color:var(--vg-text-primary);padding:.65rem 1.5rem;border-radius:10px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}.vg-secondary-btn:hover{background:var(--vg-accent-light);color:var(--vg-accent)}.lop-live-host-page{min-height:100vh;background:var(--lop-app-bg);padding:2.5rem 1.5rem;font-family:Inter,Segoe UI,sans-serif}.lop-live-host-wrapper{max-width:960px;margin:0 auto}.lop-live-host-card{box-shadow:var(--lop-shadow);max-width:420px;width:100%;margin:0 auto}.lop-live-host-title{text-align:center;margin-bottom:1.5rem}.lop-live-host-title h1{margin:0;color:var(--lop-text-primary);font-size:clamp(1.6rem,3vw,2rem);font-weight:800}.lop-live-host-title p{margin:.5rem 0 0;color:var(--lop-text-secondary);font-size:.95rem}.lop-live-host-dashboard{margin-top:1.5rem;display:grid;gap:1.5rem}.lop-live-dashboard-card{display:grid;gap:1rem}.lop-live-dashboard-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.lop-live-dashboard-header h2{margin:0;font-size:1.2rem;font-weight:700;color:var(--lop-text-primary)}.lop-live-dashboard-header p{margin:.2rem 0 0;color:var(--lop-text-secondary);font-size:.9rem}.lop-live-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}.lop-live-metric{border-radius:14px;border:1px solid var(--lop-border);background:#f8fafc;padding:.9rem 1rem;display:grid;gap:.4rem}.lop-live-metric span{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}.lop-live-metric strong{font-size:1.4rem;color:var(--lop-text-primary)}.lop-live-note{border-radius:12px;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;font-size:.85rem;padding:.6rem .9rem}.lop-live-lobby-note{border-radius:12px;border:1px solid #bbf7d0;background:#f0fdf4;color:#15803d;font-size:.85rem;padding:.65rem .9rem;line-height:1.4}
