/* ============================================================
   GRAMMAR LAB — Redesigned with Cyan/Navy Palette
   ============================================================ */

/* === Tab Navigation === */
.gl-tabs {
  display:flex; gap:4px;
  background:rgba(13,21,38,0.7); padding:4px;
  border-radius:var(--radius); border:1px solid rgba(0,229,255,0.1);
  margin-bottom:22px; overflow-x:auto;
}
.gl-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 14px; border-radius:11px; border:none;
  background:transparent; color:var(--text-secondary);
  font-family:inherit; font-size:0.83rem; font-weight:600;
  cursor:pointer; transition:var(--transition); white-space:nowrap;
}
.gl-tab:hover { background:rgba(0,229,255,0.06); color:var(--text-primary); }
.gl-tab.active { background:linear-gradient(135deg,#0077b6,var(--accent-3)); color:#fff; box-shadow:0 4px 14px rgba(0,119,182,0.35); }
.gl-tab .material-icons { font-size:17px; }

/* === Panels === */
.gl-panel { display:none; animation:glFadeIn 0.3s ease; }
.gl-panel.active { display:block; }
@keyframes glFadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

/* === Sentence Display === */
.gl-sentence-box {
  background:rgba(0,229,255,0.04); border:1px solid rgba(0,229,255,0.18);
  border-radius:var(--radius); padding:22px; margin-bottom:22px; position:relative;
}
.gl-sentence-label {
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:5px;
}
#gl-sentence-display { font-size:1.1rem; line-height:2; color:var(--text-primary); font-weight:500; }

/* === Highlight Spans === */
.gl-hl {
  background:color-mix(in srgb,var(--hl) 15%,transparent);
  border-bottom:2px solid var(--hl);
  padding:2px 4px; border-radius:4px; cursor:help;
  position:relative; transition:var(--transition);
}
.gl-hl:hover { background:color-mix(in srgb,var(--hl) 28%,transparent); }
.gl-hl::after {
  content:attr(data-tooltip); position:absolute;
  bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%) scale(0.9);
  background:var(--bg-secondary); color:var(--text-primary);
  padding:5px 11px; border-radius:8px; font-size:0.73rem; font-weight:600;
  white-space:nowrap; opacity:0; pointer-events:none; transition:0.2s ease;
  border:1px solid rgba(0,229,255,0.2); box-shadow:var(--shadow); z-index:10;
}
.gl-hl:hover::after { opacity:1; transform:translateX(-50%) scale(1); }

/* === MODULE 1: Timeline === */
.gl-timeline { position:relative; height:100px; margin:28px 20px 36px; }
.gl-timeline-line {
  position:absolute; top:50%; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--warning),var(--accent),var(--success));
  border-radius:2px; box-shadow:0 0 10px rgba(0,229,255,0.3);
}
.gl-timeline-labels {
  position:absolute; top:calc(50% + 28px); left:0; right:0;
  display:flex; justify-content:space-between;
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted);
}
.gl-timeline-point { position:absolute; top:50%; transform:translate(-50%,-50%); cursor:pointer; text-align:center; }
.gl-timeline-dot {
  width:15px; height:15px; border-radius:50%; background:var(--dot-color);
  margin:0 auto; box-shadow:0 0 14px color-mix(in srgb,var(--dot-color) 60%,transparent);
  transition:0.3s ease; border:3px solid var(--bg-primary);
}
.gl-timeline-point:hover .gl-timeline-dot { transform:scale(1.4); box-shadow:0 0 22px color-mix(in srgb,var(--dot-color) 80%,transparent); }
.gl-timeline-label { margin-top:-30px; font-size:0.7rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; }

/* === Tense Cards === */
.gl-tense-cards { display:flex; flex-direction:column; gap:10px; }
.gl-tense-card {
  background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08);
  border-radius:var(--radius-sm); overflow:hidden; transition:var(--transition);
  border-left:3px solid var(--tc);
}
.gl-tense-card:hover { border-color:var(--tc); }
.gl-tense-header { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; cursor:pointer; }
.gl-tense-name { display:flex; align-items:center; gap:9px; font-size:0.88rem; }
.gl-tense-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.gl-expand-icon { color:var(--text-muted); transition:0.3s ease; }
.gl-tense-card.open .gl-expand-icon { transform:rotate(180deg); }
.gl-tense-body { max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1),padding 0.3s ease; padding:0 16px; }
.gl-tense-card.open .gl-tense-body { max-height:600px; padding:0 16px 16px; }
.gl-info-row { display:flex; gap:10px; align-items:baseline; padding:5px 0; font-size:0.83rem; border-bottom:1px solid rgba(255,255,255,0.04); }
.gl-label { font-size:0.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; min-width:95px; flex-shrink:0; }
.gl-value { color:var(--text-primary); }
.gl-value code { background:rgba(0,229,255,0.08); padding:2px 7px; border-radius:4px; font-size:0.83rem; color:var(--accent); }
.gl-verb-badge { display:inline-block; padding:2px 9px; border-radius:20px; font-weight:600; font-size:0.8rem; }
.gl-why-box {
  display:flex; gap:10px; margin-top:10px; padding:12px;
  background:rgba(0,229,255,0.03); border-radius:var(--radius-sm);
  border:1px solid rgba(0,229,255,0.08); font-size:0.83rem; line-height:1.6; color:var(--text-secondary);
}
.gl-why-box .material-icons { font-size:20px; flex-shrink:0; margin-top:2px; }

/* === MODULE 2: Connectors === */
.gl-connector-card {
  background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08);
  border-radius:var(--radius-sm); padding:18px; margin-bottom:14px;
  border-left:3px solid var(--cc); transition:var(--transition);
}
.gl-connector-card:hover { border-color:var(--cc); }
.gl-connector-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.gl-connector-word { font-size:1.15rem; font-weight:700; }
.gl-connector-type {
  font-size:0.7rem; padding:2px 9px; border-radius:20px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  color:var(--text-secondary); font-weight:600;
}
.gl-connector-fn { display:flex; align-items:center; gap:5px; font-size:0.8rem; color:var(--text-secondary); margin-bottom:8px; }
.gl-connector-explain { font-size:0.83rem; line-height:1.7; color:var(--text-secondary); margin-bottom:10px; }
.gl-alt-box { padding:10px; background:rgba(0,214,143,0.05); border-radius:var(--radius-sm); margin-bottom:8px; font-size:0.8rem; }
.gl-alt-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.gl-alt-tag { padding:2px 9px; border-radius:20px; background:rgba(0,214,143,0.1); border:1px solid rgba(0,214,143,0.28); color:var(--success); font-size:0.75rem; font-weight:600; }
.gl-warn-box { display:flex; align-items:center; gap:7px; padding:9px 12px; background:rgba(255,77,109,0.06); border:1px solid rgba(255,77,109,0.14); border-radius:var(--radius-sm); font-size:0.78rem; color:var(--danger); }

/* === Flow Diagram === */
.gl-flow-diagram { margin-top:20px; padding:18px; background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08); border-radius:var(--radius); }
.gl-flow-diagram h3 { display:flex; align-items:center; gap:7px; font-size:0.92rem; margin-bottom:18px; color:var(--text-primary); }
.gl-flow-steps { display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; }
.gl-flow-step {
  flex:1; min-width:130px; padding:14px;
  background:color-mix(in srgb,var(--fc) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--fc) 22%,transparent);
  border-radius:var(--radius-sm); text-align:center;
}
.gl-flow-icon { font-size:1.5rem; margin-bottom:5px; }
.gl-flow-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--fc); margin-bottom:5px; }
.gl-flow-text { font-size:0.8rem; color:var(--text-secondary); line-height:1.4; }
.gl-flow-arrow { font-size:1.2rem; color:var(--text-muted); font-weight:700; }

/* === MODULE 3: Syntax === */
.gl-syntax-summary {
  display:flex; align-items:flex-start; gap:9px; padding:14px;
  background:rgba(0,229,255,0.04); border:1px solid rgba(0,229,255,0.12);
  border-radius:var(--radius-sm); margin-bottom:18px;
  font-size:0.83rem; line-height:1.6; color:var(--text-secondary);
}
.gl-syntax-summary .material-icons { color:var(--accent); font-size:19px; flex-shrink:0; margin-top:2px; }
.gl-clause-card {
  background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08);
  border-radius:var(--radius-sm); padding:18px; margin-bottom:14px;
  border-left:3px solid var(--clc); transition:var(--transition);
}
.gl-clause-card:hover { border-color:var(--clc); }
.gl-clause-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.gl-clause-badge { padding:3px 11px; border-radius:20px; color:#fff; font-size:0.73rem; font-weight:700; }
.gl-clause-role { font-size:0.78rem; color:var(--text-secondary); font-style:italic; }
.gl-clause-text {
  font-size:0.92rem; font-weight:500; color:var(--text-primary);
  margin-bottom:14px; font-style:italic; padding:9px 12px;
  background:rgba(0,229,255,0.03); border-radius:var(--radius-sm);
}
.gl-parts-grid { display:flex; flex-wrap:wrap; gap:7px; }
.gl-part {
  padding:7px 12px; border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--pc) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--pc) 22%,transparent);
  min-width:90px; transition:0.2s ease;
}
.gl-part:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.gl-part-role { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--pc); margin-bottom:3px; }
.gl-part-text { font-size:0.83rem; font-weight:600; color:var(--text-primary); }

/* === Tree Diagram === */
.gl-tree-section { margin-top:20px; padding:18px; background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08); border-radius:var(--radius); }
.gl-tree-section h3 { display:flex; align-items:center; gap:7px; font-size:0.92rem; margin-bottom:20px; color:var(--text-primary); }
.gl-tree { text-align:center; }
.gl-tree-root {
  display:inline-block; padding:9px 22px;
  background:linear-gradient(135deg,#0077b6,var(--accent-3));
  color:#fff; border-radius:var(--radius-sm); font-weight:700; font-size:0.88rem;
  margin-bottom:22px; box-shadow:0 4px 14px rgba(0,119,182,0.35);
}
.gl-tree-branches { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gl-tree-branch { text-align:center; }
.gl-tree-node {
  padding:9px 12px;
  background:color-mix(in srgb,var(--tn,var(--accent)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--tn,var(--accent)) 28%,transparent);
  border-radius:var(--radius-sm); font-size:0.78rem; font-weight:600;
  color:var(--text-primary); margin-bottom:9px;
}
.gl-tree-node small { font-weight:400; color:var(--text-muted); font-size:0.68rem; }
.gl-tree-leaves { display:flex; flex-direction:column; gap:3px; }
.gl-tree-leaves span {
  padding:4px 9px; border-radius:6px; font-size:0.7rem; font-weight:600;
  background:color-mix(in srgb,var(--tn) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--tn) 20%,transparent); color:var(--tn);
}

/* === MODULE 4: Semantics === */
.gl-sem-overview { padding:18px; background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08); border-radius:var(--radius-sm); margin-bottom:20px; }
.gl-sem-meaning { display:flex; gap:10px; margin-bottom:12px; font-size:0.86rem; line-height:1.7; color:var(--text-secondary); }
.gl-sem-meaning .material-icons { font-size:22px; flex-shrink:0; margin-top:2px; }
.gl-sem-meaning p { margin-top:5px; }
.gl-sem-tone { display:flex; align-items:center; gap:9px; }
.gl-tone-badge { padding:3px 13px; border-radius:20px; font-size:0.76rem; font-weight:600; background:rgba(0,214,143,0.1); border:1px solid rgba(0,214,143,0.28); color:var(--success); }
.gl-section-title { display:flex; align-items:center; gap:7px; font-size:0.97rem; font-weight:700; color:var(--text-primary); margin:22px 0 14px; }
.gl-section-title .material-icons { font-size:19px; color:var(--accent); }
.gl-nuance-card { background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08); border-radius:var(--radius-sm); padding:18px; margin-bottom:10px; transition:var(--transition); }
.gl-nuance-card:hover { border-color:rgba(0,229,255,0.2); }
.gl-nuance-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.gl-nuance-word { font-size:1.1rem; font-weight:700; color:var(--warning); }
.gl-nuance-level { padding:2px 9px; border-radius:20px; font-size:0.68rem; font-weight:700; background:rgba(0,229,255,0.1); border:1px solid rgba(0,229,255,0.25); color:var(--accent); }
.gl-nuance-meaning { font-size:0.83rem; color:var(--text-secondary); margin-bottom:7px; }
.gl-nuance-explain { font-size:0.83rem; line-height:1.7; color:var(--text-secondary); margin-bottom:10px; }
.gl-syn-ant { display:flex; gap:18px; flex-wrap:wrap; font-size:0.78rem; }
.gl-syn-group, .gl-ant-group { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.gl-syn-tag { padding:2px 9px; border-radius:20px; background:rgba(0,214,143,0.09); border:1px solid rgba(0,214,143,0.24); color:var(--success); font-size:0.73rem; font-weight:600; }
.gl-ant-tag { padding:2px 9px; border-radius:20px; background:rgba(255,77,109,0.09); border:1px solid rgba(255,77,109,0.24); color:var(--danger); font-size:0.73rem; font-weight:600; }

/* === Paraphrases === */
.gl-para-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.gl-para-card { background:rgba(13,21,38,0.8); border:1px solid rgba(0,229,255,0.08); border-radius:var(--radius-sm); padding:14px; transition:var(--transition); }
.gl-para-card:hover { border-color:rgba(0,229,255,0.2); transform:translateY(-2px); }
.gl-para-level { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-bottom:7px; }
.gl-para-text { font-size:0.83rem; line-height:1.6; color:var(--text-secondary); font-style:italic; }

/* === Culture Note === */
.gl-culture-note {
  display:flex; gap:10px; padding:14px; margin-top:18px;
  background:rgba(124,58,237,0.06); border:1px solid rgba(124,58,237,0.15);
  border-radius:var(--radius-sm); font-size:0.83rem; line-height:1.6; color:var(--text-secondary);
}
.gl-culture-note .material-icons { color:var(--accent-3); font-size:20px; flex-shrink:0; margin-top:2px; }

/* === Responsive === */
@media (max-width:768px) {
  .gl-tabs { flex-wrap:nowrap; overflow-x:auto; }
  .gl-tab { font-size:0.73rem; padding:9px 10px; }
  .gl-tab span:not(.material-icons) { display:none; }
  .gl-tree-branches { grid-template-columns:1fr; }
  .gl-flow-steps { flex-direction:column; }
  .gl-flow-arrow { transform:rotate(90deg); }
  .gl-info-row { flex-direction:column; gap:3px; }
  .gl-label { min-width:unset; }
}

/* === Source-backed TOEIC curriculum === */
.gl-curriculum-intro { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px; margin-bottom:14px; border:1px solid rgba(0,229,255,.15); border-radius:14px; background:linear-gradient(120deg,rgba(0,229,255,.07),rgba(124,58,237,.07)); }
.gl-curriculum-intro > div { display:flex; flex-direction:column; }
.gl-curriculum-intro b { font-size:.95rem; }
.gl-curriculum-intro span { color:var(--text-secondary); font-size:.72rem; }
.gl-curriculum-intro > span { display:flex; align-items:center; gap:5px; color:var(--success); font-weight:700; white-space:nowrap; }
.gl-curriculum-intro .material-icons { font-size:17px; }
.gl-curriculum-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.gl-curriculum-card { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:13px; text-align:left; color:var(--text-primary); border:1px solid var(--border); border-radius:11px; background:rgba(13,21,38,.76); cursor:pointer; }
.gl-curriculum-card:hover { border-color:rgba(0,229,255,.3); transform:translateY(-1px); }
.gl-curriculum-index { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--accent); background:rgba(0,229,255,.08); font-weight:800; font-size:.74rem; }
.gl-curriculum-card > span:nth-child(2) { display:flex; flex-direction:column; min-width:0; }
.gl-curriculum-card b { font-size:.82rem; }
.gl-curriculum-card small { color:var(--text-muted); font-size:.65rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.gl-curriculum-card em { color:var(--accent); font-size:.62rem; font-style:normal; }
.gl-curriculum-detail-card { margin-top:18px; padding:22px; border:1px solid rgba(0,229,255,.2); border-radius:15px; background:rgba(8,16,30,.95); }
.gl-curriculum-detail-head { display:flex; justify-content:space-between; gap:14px; }
.gl-curriculum-detail-head small { color:var(--accent); font-weight:700; }
.gl-curriculum-detail-head h2 { margin:3px 0 15px; font-size:1.25rem; }
.gl-curriculum-rule,.gl-curriculum-trap { display:flex; gap:10px; padding:13px; border-radius:10px; background:rgba(0,229,255,.05); margin-bottom:10px; }
.gl-curriculum-rule .material-icons { color:var(--accent); }
.gl-curriculum-trap { background:rgba(255,183,3,.06); }
.gl-curriculum-trap .material-icons { color:var(--warning); }
.gl-curriculum-rule p,.gl-curriculum-trap p { margin:4px 0 0; color:var(--text-secondary); font-size:.78rem; line-height:1.6; }
.gl-curriculum-examples { display:grid; gap:6px; margin:12px 0; }
.gl-curriculum-examples code { padding:9px 11px; border:1px solid var(--border); border-radius:8px; color:#b9e7f4; background:rgba(255,255,255,.025); white-space:normal; }
.gl-curriculum-quiz { margin-top:14px; padding:15px; border:1px solid var(--border); border-radius:11px; }
.gl-curriculum-quiz > p { margin:7px 0 10px; }
.gl-curriculum-quiz > div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.gl-curriculum-quiz button { display:flex; gap:8px; align-items:center; padding:9px; text-align:left; color:var(--text-primary); border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.025); cursor:pointer; }
.gl-curriculum-quiz button span { color:var(--accent); font-weight:800; }
.gl-curriculum-quiz button.correct { border-color:var(--success); background:rgba(0,214,143,.1); }
.gl-curriculum-quiz button.wrong { border-color:var(--danger); background:rgba(255,77,109,.1); }
.gl-curriculum-quiz small { display:block; min-height:20px; margin-top:10px; line-height:1.5; }
.gl-curriculum-quiz small.is-correct { color:var(--success); }
.gl-curriculum-quiz small.is-wrong { color:var(--danger); }
.gl-curriculum-source { display:flex; align-items:center; gap:5px; width:max-content; max-width:100%; margin-top:13px; color:var(--accent); font-size:.68rem; }
.gl-curriculum-source .material-icons { font-size:15px; }
.gl-curriculum-source.is-warning { color:var(--warning); }
.gl-wordfamily-intro { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px; margin-bottom:10px; border:1px solid rgba(0,229,255,.18); border-radius:14px; background:rgba(0,229,255,.05); }
.gl-wordfamily-intro > div { display:flex; flex-direction:column; gap:4px; }
.gl-wordfamily-intro b { font-size:.9rem; }
.gl-wordfamily-intro span { color:var(--text-secondary); font-size:.68rem; }
.gl-wordfamily-intro label { display:flex; align-items:center; gap:6px; min-width:240px; padding:0 9px; border:1px solid var(--border); border-radius:9px; background:rgba(13,21,38,.86); }
.gl-wordfamily-intro label .material-icons { font-size:17px; color:var(--text-muted); }
.gl-wordfamily-intro input { width:100%; padding:8px 0; border:0; outline:0; color:var(--text-primary); background:transparent; font:inherit; font-size:.7rem; }
.gl-wordfamily-count { margin:0 0 10px; color:var(--text-muted); font-size:.63rem; text-align:right; }
.gl-wordfamily-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.gl-wordfamily-card { padding:14px; border:1px solid var(--border); border-radius:12px; background:rgba(13,21,38,.74); }
.gl-wordfamily-forms { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.gl-wordfamily-forms span { min-width:0; padding:7px; border-radius:8px; background:rgba(255,255,255,.035); }
.gl-wordfamily-forms small { display:block; margin-bottom:2px; color:var(--accent); font-size:.52rem; font-weight:800; }
.gl-wordfamily-forms b { display:block; overflow:hidden; color:var(--text-primary); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.gl-wordfamily-card > p { margin:10px 0 7px; color:#cbd5e1; font-size:.68rem; line-height:1.5; }
.gl-wordfamily-card > div:last-child { display:flex; align-items:flex-start; gap:5px; color:var(--text-muted); font-size:.61rem; line-height:1.45; }
.gl-wordfamily-card > div:last-child .material-icons { color:var(--warning); font-size:14px; }
@media (max-width:800px) { .gl-wordfamily-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .gl-wordfamily-intro { align-items:stretch; flex-direction:column; } .gl-wordfamily-intro label { min-width:0; } .gl-wordfamily-forms { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .gl-curriculum-grid { grid-template-columns:1fr; } .gl-curriculum-intro { align-items:flex-start; flex-direction:column; } .gl-curriculum-quiz > div { grid-template-columns:1fr; } }