.eng-layout{width:100%;display:grid;gap:16px}
.eng-hero{display:none}
.eng-hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.eng-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:#fcd34d}
.eng-hero h2{margin:6px 0 0;font-size:28px;line-height:1.15}
.eng-hero p{margin:10px 0 0;max-width:720px;color:rgba(238,246,255,.82);line-height:1.55}
.eng-hero-badges{display:grid;gap:10px;min-width:240px}
.eng-hero-badge{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px)}
.eng-hero-badge span{font-size:12px;color:rgba(238,246,255,.76)}
.eng-hero-badge strong{display:block;margin-top:6px;font-size:24px;color:#fff}
.eng-shell{display:grid;gap:14px}
.eng-subtabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border-radius:18px;background:radial-gradient(circle at top left,#fff1db,transparent 45%),radial-gradient(circle at bottom right,#e0f2fe,transparent 40%),linear-gradient(180deg,#ffffff,#f8fafc);border:1px solid #e5e7eb;box-shadow:0 10px 24px rgba(15,23,42,.08);margin-bottom:0}
.eng-subtabs .subtab{appearance:none;border:1px solid #e5e7eb;background:#fff;color:#0f172a;font-weight:700;font-size:13px;padding:8px 12px;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.06);transition:transform .12s, box-shadow .12s, border-color .12s, background .12s}
.eng-subtabs .subtab:hover{transform:translateY(-1px);border-color:#38bdf8;background:#f0f9ff;box-shadow:0 6px 16px rgba(2,132,199,.18)}
.eng-subtabs .subtab.active{background:linear-gradient(135deg,#0ea5e9,#22c55e);color:#fff;border-color:transparent;box-shadow:0 10px 20px rgba(14,165,233,.25)}
.eng-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.eng-chip{font-size:12px;color:#475569;cursor:pointer;padding:6px 10px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;display:inline-flex;align-items:center;gap:6px}
.eng-stage{display:grid;gap:14px}
.eng-panel{width:100%;margin:0}
.eng-panel.narrow{width:100%}
.eng-panel.compact{width:min(100%,720px);margin:0 auto}
.eng-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.eng-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.eng-stat-card{text-align:center;padding:18px 16px;border-radius:18px;border:1px solid #dbe3ef;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 10px 24px rgba(15,23,42,.05);margin-bottom:0}
.eng-section-card{border-radius:18px;box-shadow:0 12px 30px rgba(15,23,42,.05)}
.eng-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.eng-section-head h3,.eng-section-head b{margin:0}
.eng-muted{font-size:12px;color:#64748b}
.fc-wrap { width:min(100%,1100px); margin:0 auto; text-align:center; }
.fc-hud { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:8px; }
.fc-streak { font-size:18px; font-weight:bold; color:#f59e0b; min-width:60px; text-align:left; }
.fc-xp-wrap { flex:1; background:#eee; border-radius:999px; height:10px; overflow:hidden; }
.fc-xp-bar  { height:100%; border-radius:999px; background:linear-gradient(90deg,#3b82f6,#8b5cf6); transition:width .4s; }
.fc-xp-label { font-size:12px; color:#888; min-width:48px; text-align:right; }
.fc-scene { perspective:800px; width:100%; min-height:160px; cursor:pointer; margin-bottom:8px; }
.fc-card-col .fc-scene { margin-bottom:0; }
.fc-card-inner {position:relative; width:100%; min-height:160px;transform-style:preserve-3d; transition:transform .45s;}
.fc-card-inner.flipped { transform:rotateY(180deg); }
.fc-face {position:absolute; width:100%; min-height:160px; border-radius:18px;display:flex; flex-direction:column; align-items:center; justify-content:center;padding:20px 24px; backface-visibility:hidden; user-select:none;}
.fc-front-face { background:#3b82f6; color:#fff; box-shadow:0 6px 20px #3b82f640; }
.fc-back-face  { background:#16a34a; color:#fff; box-shadow:0 6px 20px #16a34a40; transform:rotateY(180deg); }
.fc-word { font-size:30px; font-weight:bold; }
.fc-meaning { font-size:18px; opacity:.92; margin-top:8px; }
.fc-example { font-size:13px; opacity:.75; margin-top:8px; font-style:italic; }
.fc-feedback {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);font-size:72px; z-index:999; transition:transform .15s, opacity .3s;pointer-events:none; opacity:0;}
.fc-feedback.show { transform:translate(-50%,-50%) scale(1); opacity:1; }
.fc-feedback.hide { transform:translate(-50%,-50%) scale(1.5); opacity:0; }
.confetti-piece {position:fixed; width:8px; height:8px; border-radius:2px;animation:confetti-fall 1s ease-in forwards;pointer-events:none; z-index:998;}
@keyframes confetti-fall {0% { transform:translateY(0) rotate(0deg); opacity:1; }100% { transform:translateY(300px) rotate(720deg); opacity:0; }}
@keyframes shake {0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.fc-scene.shake .fc-card-inner { animation:shake .4s; }
.fc-timer { font-size:22px; font-weight:bold; color:#3b82f6; min-width:32px; }
.fc-timer.urgent { color:#dc2626; }
.fc-body { display:flex; gap:16px; align-items:flex-start; margin-top:8px; }
.fc-card-col { flex:1 1 0; min-width:0; text-align:center; }
.fc-choices { display:grid; grid-template-columns:1fr; gap:8px; flex:1 1 0; min-width:0; align-self:stretch; }
.fc-choice {display:flex;align-items:center;justify-content:flex-start;min-height:56px;padding:10px 14px;border-radius:14px;border:1px solid #dbe3ef;background:linear-gradient(180deg,#ffffff,#f8fbff);cursor:pointer;font-size:15px;font-weight:700;line-height:1.45;color:#0f172a;text-align:left;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:transform .15s,border-color .15s,box-shadow .15s,background .15s,color .15s;}
.fc-choice:hover { transform:translateY(-1px); border-color:#60a5fa; background:linear-gradient(180deg,#eff6ff,#ffffff); box-shadow:0 14px 28px rgba(37,99,235,.14); }
.fc-choice.correct { border-color:#22c55e; background:linear-gradient(180deg,#dcfce7,#f0fdf4); color:#166534; box-shadow:0 14px 28px rgba(34,197,94,.18); }
.fc-choice.wrong { border-color:#f87171; background:linear-gradient(180deg,#fee2e2,#fff1f2); color:#b91c1c; box-shadow:0 14px 28px rgba(239,68,68,.14); }
.fc-mode-toggle { display:flex; gap:8px; justify-content:center; margin-bottom:12px; flex-wrap:wrap; }
.fc-mode-btn { font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid #dbe3ef; background:#f8fafc; color:#475569; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(15,23,42,.05); transition:transform .12s,background .12s,border-color .12s,color .12s; }
.fc-mode-btn:hover { transform:translateY(-1px); border-color:#93c5fd; color:#1d4ed8; background:#eff6ff; }
.fc-mode-btn.active { background:linear-gradient(135deg,#2563eb,#0ea5e9); border-color:transparent; color:#fff; box-shadow:0 12px 24px rgba(37,99,235,.22); }
.review-shell{width:min(100%,1100px);margin:0 auto}
.review-stage{display:grid;grid-template-columns:minmax(320px,460px) minmax(0,1fr);gap:16px;align-items:start}
.review-card-panel{display:grid;gap:10px}
.review-side-panel{display:grid;gap:12px}
.review-side-card{padding:16px;border-radius:16px;border:1px solid #dbe3ef;background:linear-gradient(180deg,#fff,#f8fbff);text-align:left}
.review-side-card strong{display:block;font-size:18px;color:#0f172a}
.review-side-card span{display:block;margin-top:6px;font-size:13px;color:#64748b;line-height:1.55}
.rm-node{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px}
.rm-connector{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0}
.rm-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;border:2px solid transparent}
.rm-dot.locked{background:#f5f5f5;border-color:#ddd;color:#aaa}
.rm-dot.in-prog{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.rm-dot.done{background:#dcfce7;border-color:#86efac;color:#16a34a}
.rm-line{width:2px;background:#eee;flex:1;min-height:16px}
.rm-card{flex:1;background:#fff;border:1px solid #eee;border-radius:12px;padding:10px 14px;margin-bottom:12px;cursor:pointer;transition:border-color .15s}
.rm-card:hover{border-color:#ccc}
.rm-card.locked{opacity:0.5;cursor:default}
.rm-card.locked:hover{border-color:#eee}
.rm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rm-title{font-weight:500;font-size:13px;flex:1}
.rm-pct{font-size:12px;font-weight:500}
.rm-pct.locked{color:#aaa}.rm-pct.in-prog{color:#1d4ed8}.rm-pct.done{color:#16a34a}
.rm-bar-wrap{margin:6px 0 8px;background:#f0f0f0;border-radius:999px;height:6px;overflow:hidden}
.rm-bar{height:100%;border-radius:999px;transition:width .6s}
.rm-bar.locked{background:#ddd}.rm-bar.in-prog{background:#3b82f6}.rm-bar.done{background:#22c55e}
.rm-skills{display:flex;gap:6px;flex-wrap:wrap}
.rm-skill{display:flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid #ddd;color:#888;background:#fafafa}
.rm-skill.done{border-color:#86efac;color:#16a34a;background:#dcfce7}
.rm-skill.active{border-color:#93c5fd;color:#1d4ed8;background:#dbeafe}
.rm-summary-bar{display:flex;gap:12px;align-items:center;padding:10px 14px;background:#f8f8f8;border-radius:10px;margin-bottom:16px;font-size:12px;color:#666;flex-wrap:wrap}
.rm-filter{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.rm-filter button{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid #ddd;background:#f5f5f5;color:#888;cursor:pointer}
.rm-filter button.active{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.grammar-shell{display:grid;gap:14px}
.grammar-hero{padding:18px;border-radius:20px;background:radial-gradient(circle at top left,rgba(253,224,71,.28),transparent 28%),radial-gradient(circle at bottom right,rgba(251,113,133,.2),transparent 24%),linear-gradient(135deg,#0f172a,#1d4ed8 55%,#14b8a6);color:#eff6ff}
.grammar-hero h3{margin:6px 0 0;font-size:24px}
.grammar-hero p{margin:10px 0 0;max-width:780px;line-height:1.55;color:rgba(239,246,255,.86)}
.grammar-grid{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:14px}
.grammar-topic-list{display:grid;gap:10px}
.grammar-topic{padding:14px;border-radius:16px;border:1px solid #dbe3ef;background:linear-gradient(180deg,#fff,#f8fbff);cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s}
.grammar-topic:hover{transform:translateY(-1px);border-color:#60a5fa;box-shadow:0 10px 24px rgba(37,99,235,.12)}
.grammar-topic.active{border-color:#2563eb;background:linear-gradient(135deg,#dbeafe,#eff6ff);box-shadow:0 12px 28px rgba(37,99,235,.16)}
.grammar-topic-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.grammar-badge{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:#fef3c7;color:#92400e;white-space:nowrap}
.grammar-topic-title{font-weight:800;color:#0f172a}
.grammar-topic-note{font-size:12px;color:#64748b;margin-top:6px;line-height:1.45}
.grammar-main{display:grid;gap:14px}
.grammar-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grammar-summary-card{padding:14px;border-radius:16px;background:#fff;border:1px solid #dbe3ef}
.grammar-summary-card strong{display:block;font-size:22px;color:#0f172a}
.grammar-summary-card span{display:block;font-size:12px;color:#64748b;margin-top:4px}
.grammar-rule{padding:16px;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #dbe3ef}
.grammar-rule h4{margin:0;font-size:22px;color:#0f172a}
.grammar-rule-sub{margin-top:6px;font-size:13px;color:#64748b}
.grammar-formula{margin-top:14px;padding:12px 14px;border-radius:14px;background:#0f172a;color:#e2e8f0;font-family:Consolas,monospace;font-size:14px}
.grammar-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.grammar-point{padding:12px 14px;border-radius:14px;border:1px solid #e5e7eb;background:#fff}
.grammar-point b{display:block;color:#0f172a;margin-bottom:6px}
.grammar-point span{font-size:13px;color:#64748b;line-height:1.5}
.grammar-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grammar-example{padding:14px;border-radius:16px;background:#fff;border:1px solid #dbe3ef}
.grammar-example b{display:block;color:#0f172a}
.grammar-example em{display:block;margin-top:6px;color:#2563eb;font-style:normal;font-weight:700}
.grammar-example span{display:block;margin-top:6px;font-size:13px;color:#64748b}
.grammar-quiz{padding:16px;border-radius:18px;background:linear-gradient(135deg,#fff7ed,#ffffff);border:1px solid #fdba74}
.grammar-quiz-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.grammar-quiz-q{margin-top:12px;font-size:18px;font-weight:800;color:#0f172a}
.grammar-quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.grammar-quiz-options button{padding:12px 14px;text-align:left}
.grammar-quiz-options button.correct{background:#dcfce7;border-color:#86efac;color:#166534}
.grammar-quiz-options button.wrong{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.grammar-quiz-feedback{margin-top:12px;font-size:14px;font-weight:700;min-height:20px}
@media (max-width:640px){.eng-hero{padding:18px}.eng-hero h2{font-size:22px}.eng-subtabs{gap:6px}.eng-subtabs .subtab{padding:7px 10px;font-size:12px}.eng-actions{margin-left:0;justify-content:flex-start}.eng-grid-2{grid-template-columns:1fr}.fc-body{flex-direction:column}.fc-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.review-stage{grid-template-columns:1fr}}
@media (max-width:900px){.grammar-grid,.grammar-summary,.grammar-points,.grammar-examples,.grammar-quiz-options{grid-template-columns:1fr}}