/* ROGER LEARNING — roger.css — Shared styles for Pilotage & Activité */

:root {
  --bg:#f0f4ff;--surface:#fff;--surface-hover:#f1f5f9;--surface-alt:#f8fafc;
  --border:#e2e8f0;--primary:#4f46e5;--primary-hover:#4338ca;--primary-light:#e0e7ff;
  --text:#0f172a;--text-muted:#64748b;
  --success:#059669;--success-light:#d1fae5;--error:#dc2626;--error-light:#fee2e2;
  --warning:#d97706;--warning-light:#fef3c7;--info:#2563eb;--info-light:#dbeafe;
  --font-main:'Inter',sans-serif;--font-mono:'Space Mono',monospace;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-lg:0 12px 30px rgba(0,0,0,.12);
  --radius-lg:20px;--radius-md:12px;--radius-sm:8px;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0f172a;--surface:#1e293b;--surface-hover:#2d3f55;--surface-alt:#253347;
  --border:#3d5068;--text:#f1f5f9;--text-muted:#94a3b8;
  --primary-light:rgba(79,70,229,.2);--success-light:rgba(5,150,105,.18);
  --error-light:rgba(220,38,38,.18);--warning-light:rgba(217,119,6,.18);
  --info-light:rgba(37,99,235,.18);
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-main);color:var(--text);background:var(--surface);min-height:100vh}
.app-container{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:1rem}
.screen{display:none;flex-direction:column;flex:1}
.screen.active{display:flex}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.5rem}
.brand{font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:.5rem;letter-spacing:-.3px}
.brand span{color:var(--primary)}
.avatar-placeholder{width:32px;height:32px;border-radius:50%;background:var(--primary-light);border:2px solid var(--primary)}

/* Stats */
.stats{display:flex;gap:.5rem}
.stat-badge{display:flex;align-items:center;gap:.3rem;background:var(--surface-hover);padding:.35rem .7rem;border-radius:99px;font-size:.82rem;font-weight:600;font-family:var(--font-mono)}
.stat-badge.xp{color:var(--warning)}.stat-badge.streak,.stat-badge.combo{color:var(--error)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--surface-hover);padding:1rem;border-radius:var(--radius-md);text-align:center}
.stat-value{font-size:1.8rem;font-weight:700;font-family:var(--font-mono);color:var(--primary);line-height:1.2}
.stat-label{font-size:.78rem;color:var(--text-muted);margin-top:.25rem}
.subtitle{color:var(--text-muted);font-size:.9rem;margin-bottom:1.5rem}

/* Buttons */
.btn-primary{background:var(--primary);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;border:none;cursor:pointer;font-family:inherit;transition:all .2s;width:100%}
.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:var(--surface-hover);color:var(--text);padding:.65rem 1.25rem;border-radius:var(--radius-md);font-weight:500;font-size:.85rem;border:1px solid var(--border);cursor:pointer;font-family:inherit;transition:all .2s;margin-top:.5rem;width:100%}
.btn-secondary:hover{background:var(--primary-light)}
.btn-danger{background:var(--error);color:#fff;padding:.65rem 1.25rem;border-radius:var(--radius-md);font-weight:600;font-size:.85rem;border:none;cursor:pointer;font-family:inherit}
.btn-danger:hover{opacity:.9}
.btn-copy-link{background:var(--surface-hover);border:1px solid var(--border);padding:.5rem .85rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text)}
.btn-copy-link:hover{background:var(--primary-light)}
.btn-hint{background:var(--warning-light);color:var(--warning);border:1px solid transparent;padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn-hint:hover{background:var(--warning);color:#fff}
.btn-skip{background:var(--surface-hover);color:var(--text-muted);border:1px solid var(--border);padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn-skip:hover{background:var(--error-light);color:var(--error)}

/* Setup */
.setup-section{margin-bottom:1.5rem}.setup-section h3{font-size:.95rem;margin-bottom:.75rem}
.setup-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.setup-control label{display:block;font-size:.82rem;font-weight:600;color:var(--text-muted);margin-bottom:.35rem}
.setup-control select{width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.85rem}
.checkbox-list{display:flex;flex-direction:column;gap:.4rem}
.checkbox-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:all .2s;font-size:.85rem}
.checkbox-item.selected{border-color:var(--primary);background:var(--primary-light)}
.checkbox-item input[type="checkbox"]{cursor:pointer}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.type-option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;font-size:.82rem;transition:all .2s}
.type-option.selected{border-color:var(--primary);background:var(--primary-light)}
.type-option input[type="checkbox"]{cursor:pointer}

/* Error types tree */
.error-types-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.85rem}
.error-types-header label{display:flex;align-items:center;gap:.4rem;cursor:pointer}
.error-types-container{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md);padding:.75rem;background:var(--surface-alt)}
.main-category{margin-bottom:.75rem}
.main-category>summary{font-weight:600;font-size:.9rem;cursor:pointer;padding:.4rem 0;color:var(--primary)}
.sub-category{margin-left:1rem;margin-top:.4rem;margin-bottom:.5rem}
.sub-cat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}
.sub-cat-label{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.82rem;cursor:pointer}
.sub-cat-items{display:flex;flex-direction:column;gap:.15rem;margin-left:1.2rem}
.item-checkbox{display:flex;align-items:center;gap:.4rem;font-size:.78rem;cursor:pointer;padding:.15rem 0}
.item-checkbox input[type="checkbox"]{cursor:pointer}
.item-code{font-family:var(--font-mono);font-size:.72rem;background:var(--surface-hover);padding:1px 5px;border-radius:3px;color:var(--text-muted)}

/* Progress */
.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:.75rem}
.progress-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .4s ease;width:0%}

/* Question */
.q-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap;font-size:.78rem}
.q-text{font-size:1.05rem;font-weight:600;line-height:1.5;margin-bottom:1rem}
.difficulty{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.72rem;font-weight:700;letter-spacing:.5px}
.difficulty-easy{background:var(--success-light);color:var(--success)}
.difficulty-medium{background:var(--warning-light);color:var(--warning)}
.difficulty-hard{background:var(--error-light);color:var(--error)}
.cefr-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.72rem;font-weight:700;background:var(--primary-light);color:var(--primary)}
.hint-box{background:var(--warning-light);color:var(--warning);padding:.65rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;margin-bottom:.75rem;display:none}
.hint-box.show{display:block}
.interactive-area{margin-bottom:1rem}

/* Options */
.opt-btn{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;margin-bottom:.4rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.88rem;cursor:pointer;transition:all .2s;text-align:left}
.opt-btn:hover:not(:disabled){border-color:var(--primary);background:var(--primary-light)}
.opt-btn.selected,.opt-btn.multi-selected{border-color:var(--primary);background:var(--primary-light)}
.opt-btn.correct{border-color:var(--success);background:var(--success-light);color:var(--success)}
.opt-btn.wrong{border-color:var(--error);background:var(--error-light);color:var(--error)}
.opt-btn:disabled{opacity:.8;cursor:default}
.opt-letter{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--surface-hover);font-weight:700;font-size:.78rem;color:var(--text-muted);flex-shrink:0}
.ms-check{font-size:1rem;flex-shrink:0}

/* Text input */
.text-input{width:100%;padding:.75rem 1rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.95rem;outline:none;transition:border-color .2s}
.text-input:focus{border-color:var(--primary)}
.text-input.correct{border-color:var(--success);background:var(--success-light)}
.text-input.wrong{border-color:var(--error);background:var(--error-light)}

/* Order */
.order-zone-label{font-size:.78rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem}
.order-pool{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem;background:var(--surface-alt)}

/* Connect */
.connect-container{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.connect-col-label{font-size:.78rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem;text-align:center}
.connect-col{display:flex;flex-direction:column;gap:.35rem}
.connect-item{display:flex;align-items:center;padding:.6rem .85rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.82rem;cursor:pointer;transition:all .2s}
.connect-item:hover:not(:disabled){border-color:var(--primary)}
.connect-item.selected{border-color:var(--primary);background:var(--primary-light)}
.connect-item.paired{border-color:var(--success);background:var(--success-light);opacity:.7}
.connect-item.correct{border-color:var(--success);background:var(--success-light);color:var(--success)}
.connect-item.wrong{border-color:var(--error);background:var(--error-light);color:var(--error)}

/* Cloze */
.cloze-passage{font-size:1rem;line-height:2;margin-bottom:1rem}
.cloze-input{display:inline-block;width:120px;padding:4px 8px;border:2px solid var(--border);border-radius:4px;font-family:inherit;font-size:.9rem;background:var(--surface);color:var(--text);outline:none;transition:border-color .2s;margin:0 2px}
.cloze-input:focus{border-color:var(--primary)}
.cloze-input.correct{border-color:var(--success);background:var(--success-light)}
.cloze-input.wrong{border-color:var(--error);background:var(--error-light)}
.cloze-dict{margin-bottom:1rem;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .85rem;background:var(--surface-alt)}
.cloze-dict summary{cursor:pointer;font-weight:600;font-size:.85rem}
.cloze-dict-list{margin-top:.5rem;font-size:.82rem}
.cloze-dict-list dt{font-weight:600;margin-top:.4rem}
.cloze-dict-list dd{margin-left:1rem;color:var(--text-muted)}
.cloze-blank-counter{font-size:.8rem;color:var(--text-muted);margin-bottom:.75rem}

/* Timeline */
.timeline-svg-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem;background:var(--surface-alt)}
.timeline-svg-wrap svg{width:100%;height:auto;cursor:crosshair}
.timeline-tile{display:inline-flex;align-items:center;padding:.45rem .85rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.82rem;cursor:pointer;margin:.2rem;transition:all .2s}
.timeline-tile:hover{border-color:var(--primary)}
.timeline-tile.selected{border-color:var(--primary);background:var(--primary-light)}
.timeline-tile.placed{border-color:var(--success);background:var(--success-light);opacity:.6;cursor:default}
.timeline-placed-list{font-size:.8rem;color:var(--text-muted)}

/* Gate */
.gate-circuit{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.gate-clause{flex:1;min-width:120px;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;font-size:.88rem;text-align:center}
.gate-node{padding:.6rem 1.2rem;border-radius:var(--radius-sm);border:2px dashed var(--border);font-weight:700;font-size:.85rem;color:var(--text-muted);text-align:center;transition:all .3s;min-width:80px}
.gate-node.active{border-style:solid;border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.gate-node.correct{border-color:var(--success);color:var(--success);background:var(--success-light)}
.gate-node.wrong{border-color:var(--error);color:var(--error);background:var(--error-light)}
.gate-cards{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.gate-card{padding:.6rem 1rem;border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:inherit;font-size:.85rem;cursor:pointer;transition:all .2s;text-align:center}
.gate-card:hover{border-color:var(--primary)}
.gate-card.selected{border-color:var(--primary);background:var(--primary-light)}
.gate-card.correct{border-color:var(--success);background:var(--success-light);color:var(--success)}
.gate-card.wrong{border-color:var(--error);background:var(--error-light);color:var(--error)}
.gate-card:disabled{opacity:.8;cursor:default}
.gate-type-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}

/* Explanation */
.explanation{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem 1rem;font-size:.88rem;line-height:1.6;margin-bottom:1rem;display:none}
.explanation.show{display:block}

/* Action rows */
.action-row{display:flex;gap:.5rem;margin-top:.5rem}
.action-row .btn-primary,.action-row .btn-secondary,.action-row .btn-danger{flex:1}

/* Combo */
.combo-banner{position:fixed;top:-80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--warning),var(--error));color:#fff;padding:.75rem 2rem;border-radius:99px;text-align:center;z-index:100;transition:top .4s ease;box-shadow:var(--shadow-lg)}
.combo-banner.show{top:16px}
.combo-text{font-weight:700;font-size:1.1rem}
.combo-sub{font-size:.75rem;opacity:.85}

/* Toast */
.toast{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);padding:.6rem 1.5rem;border-radius:99px;font-size:.85rem;font-weight:600;z-index:100;transition:bottom .35s ease;box-shadow:var(--shadow-sm);white-space:nowrap;background:var(--text);color:var(--surface)}
.toast.show{bottom:24px}
.toast.success{background:var(--success);color:#fff}
.toast.error{background:var(--error);color:#fff}
.toast.info{background:var(--info);color:#fff}

/* Badges */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:.5rem;margin-bottom:1.5rem}
.badge-item{text-align:center;padding:.75rem .5rem;border-radius:var(--radius-sm);background:var(--surface-hover);opacity:.4;transition:all .3s}
.badge-item.unlocked{opacity:1}
.badge-icon{font-size:1.8rem;margin-bottom:.25rem}
.badge-name{font-size:.7rem;font-weight:600;color:var(--text-muted)}

/* Achievement popup */
.achievement-popup{position:fixed;top:-120px;left:50%;transform:translateX(-50%);background:var(--surface);border:2px solid var(--warning);border-radius:var(--radius-md);padding:1rem 2rem;text-align:center;z-index:110;transition:top .5s ease;box-shadow:var(--shadow-lg)}
.achievement-popup.show{top:16px}
.achievement-icon{font-size:2rem;margin-bottom:.25rem}
.achievement-title{font-weight:700;font-size:.9rem}
.achievement-desc{font-size:.78rem;color:var(--text-muted)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);padding:2rem;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.modal-icon{font-size:2.5rem;margin-bottom:.5rem}
.modal-title{font-weight:700;font-size:1.1rem;margin-bottom:.5rem}
.modal-msg{font-size:.88rem;color:var(--text-muted);margin-bottom:1.25rem}