/* ============================================================
   t11-theme.css — Think11Plus Modern Theme
   Standalone: no dependency on main.css or HTML5UP
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  --c-primary:      #4361c2;
  --c-primary-dark: #2d46a0;
  --c-secondary:    #4fa49a;
  --c-accent:       #ffe066;
  --c-accent-alt:   #ff7e67;
  --c-dark:         #1a2236;
  --c-dark-2:       #252f4a;
  --c-gray:         #475569;
  --c-gray-light:   #94a3b8;
  --c-bg:           #f4f7fb;
  --c-white:        #ffffff;
  --c-border:       #e2e8f0;
  --c-success:      #16a34a;
  --c-warn:         #d97706;
  --font:           'Nunito', system-ui, -apple-system, sans-serif;
  --radius:         1rem;
  --radius-sm:      0.5rem;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.07);
  --shadow:         0 2px 14px rgba(67,97,194,.09);
  --shadow-md:      0 6px 28px rgba(67,97,194,.14);
  --transition:     0.2s ease;
  --max-w:          1200px;
}

/* ── Full Reset ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-dark);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: var(--c-primary); text-decoration:none; transition: color var(--transition); }
a:hover { color: var(--c-primary-dark); }
ul,ol { list-style:none; }
button,input,select,textarea { font-family:inherit; }
h1,h2,h3,h4,h5,h6 { line-height:1.25; font-weight:800; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--c-bg); }
::-webkit-scrollbar-thumb { background:var(--c-gray-light); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--c-gray); }

/* ── Layout Utilities ──────────────────────────────────────── */
.t11-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.t11-section {
  padding: 4rem 0;
  background: var(--c-bg);
}
.t11-section-white { background: var(--c-white); }
.t11-section-dark  { background: var(--c-dark); }
.t11-section-gradient {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.text-center { text-align:center; }
.muted { color: var(--c-gray-light); font-size:.875rem; }
.match-highlight { background:var(--c-accent); padding:0 .15em; border-radius:.25em; }

/* Flex utilities */
.flex        { display:flex; }
.flex-wrap   { flex-wrap:wrap; }
.flex-center { align-items:center; justify-content:center; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.gap-3 { gap:1.5rem; }

/* ── Typography ────────────────────────────────────────────── */
h1 { font-size:clamp(2rem,5vw,3rem); }
h2 { font-size:clamp(1.5rem,3vw,2.1rem); }
h3 { font-size:1.25rem; }
p  { line-height:1.7; }

.gradient-text {
  background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-alt) 60%, var(--c-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 2px solid transparent;
  border-radius: 2rem;
  padding: .7rem 1.4rem;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--c-primary);
  color: var(--c-white) !important;
  border-color: var(--c-primary);
}
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-white) !important; }

.btn-secondary {
  background: var(--c-secondary);
  color: var(--c-white) !important;
  border-color: var(--c-secondary);
}
.btn-secondary:hover { background: #3d8a81; border-color: #3d8a81; color: var(--c-white) !important; }

.btn-outline {
  background: transparent;
  color: var(--c-white) !important;
  border-color: rgba(255,255,255,.6);
}
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: var(--c-white); }

.btn-ghost {
  background: rgba(255,255,255,.1);
  color: var(--c-white) !important;
  border-color: rgba(255,255,255,.2);
}
.btn-ghost:hover { background: rgba(255,255,255,.2); }

.btn-accent {
  background: var(--c-accent);
  color: var(--c-dark) !important;
  border-color: var(--c-accent);
}
.btn-accent:hover { background: #ffe27a; }

.btn-burst {
  background: linear-gradient(115deg, #ff1e4b 0%, #ff5138 28%, #ff8d26 60%, #ffd64d 100%);
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 16px rgba(255,80,60,.35);
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.btn-burst:hover { filter: brightness(1.08); box-shadow: 0 8px 28px rgba(255,80,60,.5); }

.btn-whatsapp {
  background: #25d366;
  color: #fff !important;
  border-color: #25d366;
  box-shadow: 0 2px 12px rgba(37,211,102,.3);
}
.btn-whatsapp:hover { background: #1fb558; border-color: #1fb558; }

.btn-sm { padding:.45rem .9rem; font-size:.8rem; }
.btn-lg { padding:.9rem 1.8rem; font-size:1rem; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-body { padding: 1.5rem; }

.feature-card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--c-border);
  padding: 1.75rem 1.5rem;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-card h3 { font-size:1.1rem; color:var(--c-dark); }
.feature-card p  { font-size:.9rem; color:var(--c-gray); flex:1; }
.feature-icon {
  width: 3rem; height: 3rem;
  border-radius: var(--radius-sm);
  display: flex; align-items:center; justify-content:center;
  font-size: 1.25rem;
  flex-shrink:0;
}

/* ── Badge / Tag ───────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .3em .75em;
  border-radius: 2rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.badge-primary   { background: #dbeafe; color: var(--c-primary); }
.badge-secondary { background: #ccfbf1; color: #0f766e; }
.badge-accent    { background: #fef9c3; color: #92400e; }
.badge-success   { background: #dcfce7; color: var(--c-success); }
.badge-muted     { background: #f1f5f9; color: var(--c-gray); }

.t11-tag {
  display: inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 2rem;
  padding: .4rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}

/* ── Hero ──────────────────────────────────────────────────── */
.t11-hero {
  min-height: 85vh;
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 50%, #1e3a5f 100%);
  display: flex;
  align-items: center;
  padding: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.t11-hero::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 70% 40%, rgba(67,97,194,.25) 0%, transparent 65%),
              radial-gradient(ellipse at 20% 80%, rgba(79,164,154,.15) 0%, transparent 50%);
  pointer-events:none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-content { display:flex; flex-direction:column; gap:1.25rem; }
.hero-tag {
  display: inline-flex; align-items:center; gap:.5rem;
  background: rgba(79,164,154,.2);
  border: 1px solid rgba(79,164,154,.4);
  border-radius: 2rem;
  padding: .4rem 1rem;
  font-size: .8rem; font-weight:700; letter-spacing:.06em;
  color: var(--c-secondary);
  text-transform: uppercase;
  width: fit-content;
}
.hero-title { font-size: clamp(2.1rem,5vw,3.2rem); color:#fff; line-height:1.15; }
.hero-desc { color: rgba(255,255,255,.75); font-size:1.05rem; max-width:480px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.hero-stats {
  display: flex; gap:2rem; flex-wrap:wrap;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 1.25rem;
  margin-top: .25rem;
}
.hero-stat { display:flex; flex-direction:column; gap:.2rem; }
.stat-val { font-size:1.5rem; font-weight:900; color:var(--c-accent); line-height:1; }
.stat-lbl { font-size:.72rem; font-weight:600; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em; }
.hero-visual { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.hero-logo {
  width: 220px; height: 220px; object-fit:cover;
  border-radius: 50%;
  box-shadow: 0 16px 50px rgba(0,0,0,.4);
  border: 4px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
}
.hero-feature-pills {
  display: flex; flex-wrap:wrap; gap:.5rem; justify-content:center; max-width:380px;
}
.hero-pill {
  display: inline-flex; align-items:center; gap:.35rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 2rem;
  padding: .45rem .9rem;
  font-size: .78rem; font-weight:700;
  color: rgba(255,255,255,.85);
  transition: all var(--transition);
}
.hero-pill:hover { background:rgba(255,255,255,.18); color:#fff; transform:translateY(-1px); }

/* ── Announcement Bar ──────────────────────────────────────── */
.t11-announce {
  background: var(--c-accent);
  color: var(--c-dark);
  text-align: center;
  padding: .7rem 1rem;
  font-size: .88rem;
  font-weight: 700;
  display: flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
}
.t11-announce a { color: var(--c-dark); text-decoration:underline; }
.t11-announce a:hover { color: var(--c-primary-dark); }

/* ── Section Headers ───────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: .7rem; font-weight:700; letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: .5rem;
}
.section-title { font-size: clamp(1.4rem,3vw,2rem); margin-bottom:.75rem; }
.section-desc { color:var(--c-gray); max-width:600px; margin:0 auto; font-size:.95rem; }

/* ── Pedagogy Pillars ──────────────────────────────────────── */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  text-align: left;
}
.pillar {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.4rem 1.5rem;
  border-top: 4px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}
.pillar::before {
  content:'';
  position:absolute; top:-4px; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
  border-radius: var(--radius) var(--radius) 0 0;
}
.pillar:hover { box-shadow: var(--shadow-md); transform:translateY(-3px); }
.pillar-icon {
  font-size: 1.5rem; margin-bottom:.75rem;
  color: var(--c-primary);
}
.pillar h3 { font-size:1rem; margin-bottom:.5rem; color:var(--c-dark); }
.pillar p  { font-size:.85rem; color:var(--c-gray); line-height:1.6; }
.pillar-badge {
  display: inline-block;
  background: #f1f5f9;
  color: var(--c-primary);
  font-size: .65rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  padding:.25em .65em;
  border-radius:2rem;
  margin-top:.75rem;
}

/* ── QuestionLine Box ──────────────────────────────────────── */
.questionline-box {
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
}
.ql-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1rem;
  margin-top: 1rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.ql-method {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .75rem;
  padding: 1.25rem 1rem;
  font-size: .9rem;
  color: rgba(255,255,255,.9);
  line-height: 1.6;
}
.ql-icon { font-size:1.5rem; display:block; margin-bottom:.5rem; }

/* ── Footer ────────────────────────────────────────────────── */
.t11-footer {
  background: var(--c-dark);
  color: rgba(255,255,255,.7);
  padding: 3rem 0 0;
}
.t11-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.t11-footer-brand { display:flex; flex-direction:column; gap:.75rem; }
.t11-footer-brand img { width:60px; height:60px; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,.15); }
.t11-footer-brand h3 { color:#fff; font-size:1.1rem; }
.t11-footer-brand p  { font-size:.85rem; line-height:1.6; max-width:280px; }
.t11-footer-social { display:flex; gap:.6rem; flex-wrap:wrap; }
.t11-footer-social a {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  font-size:.95rem;
  transition: all var(--transition);
}
.t11-footer-social a:hover { background:var(--c-primary); border-color:var(--c-primary); color:#fff; transform:translateY(-2px); }
.t11-footer-links h4 { color:#fff; margin-bottom:.9rem; font-size:.95rem; }
.t11-footer-links ul { display:flex; flex-direction:column; gap:.5rem; }
.t11-footer-links a { color:rgba(255,255,255,.65); font-size:.875rem; transition:color var(--transition); }
.t11-footer-links a:hover { color:#fff; }
.t11-footer-bottom {
  text-align: center; padding: 1.1rem;
  font-size: .8rem; color:rgba(255,255,255,.4);
}

/* ── Form Controls ─────────────────────────────────────────── */
.t11-label { display:block; font-weight:700; font-size:.8rem; margin-bottom:.35rem; color:var(--c-dark); }
.t11-input, .t11-select {
  display: block; width:100%;
  padding: .6rem .85rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: var(--c-dark);
  background: var(--c-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.t11-input:focus, .t11-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(67,97,194,.12);
}
.t11-fieldset {
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: .5rem .85rem .65rem;
}
.t11-fieldset legend { font-size:.75rem; font-weight:700; color:var(--c-primary); padding:0 .3rem; }
.t11-fieldset label { font-size:.875rem; font-weight:600; cursor:pointer; }

/* ── Tab Filters ───────────────────────────────────────────── */
.t11-tabs { display:flex; flex-wrap:wrap; gap:.35rem; }
.t11-tab {
  padding:.4rem .85rem;
  border-radius:2rem;
  border: 1.5px solid var(--c-border);
  background:var(--c-white);
  color:var(--c-gray);
  font-size:.78rem; font-weight:700;
  cursor:pointer;
  transition: all var(--transition);
}
.t11-tab:hover    { border-color:var(--c-primary); color:var(--c-primary); }
.t11-tab.active   { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }

/* ── VocabZone Page ────────────────────────────────────────── */
body.vz-page { background: var(--c-bg); }

.vz-header {
  background: linear-gradient(135deg, var(--c-dark) 0%, #1e3a5f 60%, var(--c-dark-2) 100%);
  padding: 3.5rem 0 2.5rem;
  position: relative; overflow:hidden;
}
.vz-header::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 60% 40%, rgba(67,97,194,.25) 0%, transparent 60%);
  pointer-events:none;
}
.vz-header .t11-wrap { position:relative; z-index:1; }
.vz-header .section-label { color:var(--c-secondary); margin-bottom:.5rem; }
.vz-header h1 { color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.5rem; }
.vz-header p  { color:rgba(255,255,255,.75); max-width:560px; font-size:.95rem; }

.vz-main { padding:1.5rem 0 3rem; }
.vz-controls { padding:.75rem 0; }
.vz-controls-row { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; margin-top:.5rem; }
.search-box { display:flex; flex-direction:column; }

/* Vocab Table */
.vz-table-wrap { overflow-x:auto; }
table.vocab-table {
  width:100%; border-collapse:collapse;
  background:var(--c-white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
table.vocab-table th {
  background: var(--c-dark);
  color: #fff;
  font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  padding:.85rem 1rem;
  text-align:left;
  white-space:nowrap;
}
table.vocab-table td {
  padding:.7rem 1rem;
  border-bottom:1px solid var(--c-border);
  font-size:.85rem;
  vertical-align:top;
}
table.vocab-table tr:last-child td { border-bottom:none; }
table.vocab-table tbody tr:hover { background:#f8fafc; }

.level-badge {
  display:inline-block;
  padding:.25em .6em;
  border-radius:2rem;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
}
tr.level-easy  .level-badge, td.level-easy  .level-badge { background:#dcfce7; color:#15803d; }
tr.level-medium .level-badge, td.level-medium .level-badge { background:#fef3c7; color:#b45309; }
tr.level-hard  .level-badge, td.level-hard  .level-badge { background:#fee2e2; color:#b91c1c; }

/* Vocab Cards (mobile) */
.vocab-cards { display:none; }
.vocab-cards .card {
  position:relative;
  padding:1.1rem .95rem;
  display:flex; flex-direction:column; gap:.55rem;
  border-radius:var(--radius); border:2px solid var(--c-border);
  background:var(--c-white);
  box-shadow:var(--shadow);
  min-height:190px;
}
.vocab-cards .card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.vocab-cards .word {
  font-size:1.25rem; font-weight:800; text-align:center;
  min-height:40px; display:flex; align-items:center; justify-content:center;
}
.vocab-cards .definition { font-size:.78rem; color:var(--c-gray); text-align:center; min-height:30px; }
.vocab-cards .bubble {
  background:#f8fafc; border:1px solid var(--c-border);
  border-radius:.75rem; padding:.5rem .7rem;
  display:flex; flex-direction:column; gap:.2rem;
}
.vocab-cards .bubble h4 { font-size:.6rem; letter-spacing:.15em; font-weight:700; color:var(--c-primary); opacity:.85; text-transform:uppercase; margin:0; }
.vocab-cards .bubble .vals { font-size:.72rem; word-break:break-word; }
.vocab-cards .bubble.syn { background:linear-gradient(135deg,#e6f7ff,#f8fafc); border-color:rgba(79,164,154,.3); }
.vocab-cards .bubble.ant { background:linear-gradient(135deg,#fff5f5,#f8fafc); border-color:rgba(185,28,28,.2); }
.vocab-cards .card.card-easy   { background:linear-gradient(135deg,#dcfce7 0%,#fff 70%); border-color:rgba(21,128,61,.25); }
.vocab-cards .card.card-medium { background:linear-gradient(135deg,#fef3c7 0%,#fff 70%); border-color:rgba(180,83,9,.25); }
.vocab-cards .card.card-hard   { background:linear-gradient(135deg,#fee2e2 0%,#fff 70%); border-color:rgba(185,28,28,.25); }
.vocab-cards .level-flag {
  position:absolute; top:8px; right:10px;
  font-size:.58rem; font-weight:700; letter-spacing:.08em;
  padding:.35em .6em; border-radius:2rem;
  background:var(--c-primary); color:#fff;
}
.card.card-easy   .level-flag { background:#15803d; }
.card.card-medium .level-flag { background:#b45309; }
.card.card-hard   .level-flag { background:#b91c1c; }

/* Lesson Plan */
.vz-lesson-panel {
  background: var(--c-white);
  border: 2px solid var(--c-primary);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
}
.vz-lesson-panel h3 { color:var(--c-primary); font-size:1rem; display:flex; align-items:center; gap:.5rem; }
.lp-badge {
  background: var(--c-primary);
  color: #fff;
  font-size:.7rem; font-weight:800;
  padding:.2em .55em;
  border-radius:2rem;
  min-width:1.5em; text-align:center;
}
.lesson-word-chip {
  display: inline-flex; align-items:center; gap:.35rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 2rem;
  padding:.3em .7em;
  font-size:.75rem; font-weight:700;
  color: var(--c-primary);
}
.lesson-word-chip.covered {
  background: #dcfce7; border-color:#bbf7d0; color:var(--c-success);
  text-decoration: line-through;
}
.lesson-word-chip button {
  background:none; border:none; cursor:pointer;
  color:inherit; opacity:.65; font-size:.75rem; line-height:1; padding:0;
}
.lesson-word-chip button:hover { opacity:1; }
.lp-empty { color:var(--c-gray-light); font-size:.85rem; font-style:italic; padding:.5rem 0; }

/* Review/Lesson action buttons */
.btn-add-review {
  display:inline-flex; align-items:center; gap:.3rem;
  background:#eff6ff; border:1px solid #bfdbfe;
  color:var(--c-primary); border-radius:.4rem;
  padding:.2em .5em; font-size:.7rem; font-weight:700;
  cursor:pointer; transition:all var(--transition);
  white-space:nowrap;
}
.btn-add-review:hover { background:var(--c-primary); color:#fff; }
.btn-add-review.in-lesson { background:#dcfce7; border-color:#bbf7d0; color:var(--c-success); }
.btn-add-review.in-lesson:hover { background:var(--c-success); color:#fff; }

.btn-mark-covered {
  display:inline-flex; align-items:center; gap:.3rem;
  background:#f0fdf4; border:1px solid #bbf7d0;
  color:var(--c-success); border-radius:.4rem;
  padding:.2em .5em; font-size:.7rem; font-weight:700;
  cursor:pointer; transition:all var(--transition);
  white-space:nowrap;
}
.btn-mark-covered:hover { background:var(--c-success); color:#fff; }
.btn-mark-covered.covered { background:#dcfce7; font-style:italic; }

/* Pagination */
.vz-pagination { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.vz-pagination a.page {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; padding:0 .5rem;
  border-radius:.4rem;
  border:1.5px solid var(--c-border);
  background:var(--c-white);
  color:var(--c-primary);
  font-size:.8rem; font-weight:700;
  transition:all var(--transition);
  text-decoration:none;
}
.vz-pagination a.page:hover    { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.vz-pagination a.page.current  { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.vz-pagination a.page.disabled { opacity:.4; pointer-events:none; }

/* Notice */
.t11-notice {
  background:#fffbeb; border:1px solid #fde68a;
  border-radius:var(--radius-sm);
  padding:.7rem 1rem;
  font-size:.82rem; color:#92400e;
  margin-bottom:.75rem;
}

/* ── Page Hero (inner pages) ───────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--c-dark) 0%, #1e3a5f 55%, var(--c-dark-2) 100%);
  padding: 3.5rem 0 2.5rem;
  position:relative; overflow:hidden;
  text-align:center;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 40% 60%, rgba(67,97,194,.25) 0%, transparent 65%);
  pointer-events:none;
}
.page-hero .t11-wrap { position:relative; z-index:1; }
.page-hero h1 { color:#fff; font-size:clamp(1.9rem,4vw,2.8rem); margin-bottom:.5rem; }
.page-hero p  { color:rgba(255,255,255,.75); max-width:620px; margin:.5rem auto 0; font-size:1rem; }
.page-hero .section-label { color:var(--c-secondary); }
.page-hero .page-hero-badges { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem; }

/* ── Content Sections (inner pages) ───────────────────────── */
.content-section { padding: 3rem 0; }
.content-card {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
  margin-bottom: 1.5rem;
}
.content-card h2 { color:var(--c-primary); font-size:1.45rem; margin-bottom:.75rem; }
.content-card h3 { color:var(--c-secondary); font-size:1.1rem; margin:1.5rem 0 .5rem; }
.content-card p  { color:var(--c-gray); line-height:1.7; margin-bottom:.75rem; }
.content-card ul, .content-card ol { margin:.5rem 0 1rem 1.25rem; }
.content-card li { margin:.4rem 0; color:var(--c-gray); font-size:.9rem; }
.content-card li::marker { color:var(--c-primary); }
.content-card blockquote {
  border-left:4px solid var(--c-secondary);
  background:#f8fafc; border-radius:0 .5rem .5rem 0;
  padding:.85rem 1rem; margin:1rem 0;
  font-style:italic; color:var(--c-gray);
}
.content-card .pull-quote {
  background:linear-gradient(135deg,#f0f7ff,#f8fafc);
  border-left:5px solid var(--c-secondary);
  border-radius:0 .75rem .75rem 0;
  padding:1rem 1.1rem; margin:1rem 0;
  font-size:1.03rem; font-style:italic; color:var(--c-dark);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.content-card .highlight-box {
  background:#f0f7ff; border:1px solid #d2e6f7;
  border-radius:.6rem; padding:.85rem 1rem;
  font-size:.9rem; color:var(--c-dark);
}
.content-card-dark {
  background: linear-gradient(135deg, var(--c-dark), var(--c-dark-2));
  color:#fff;
  border-radius:var(--radius); padding:2rem 1.75rem; margin-bottom:1.5rem;
}
.content-card-dark h2 { color:var(--c-accent); }
.content-card-dark p  { color:rgba(255,255,255,.8); }

/* Takeaways box */
.takeaways-card {
  background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
  color:#fff; border-radius:var(--radius); padding:2rem 1.75rem; margin-bottom:1.5rem;
}
.takeaways-card h2 { color:var(--c-accent); margin-bottom:.9rem; }
.takeaways-card ul { margin:.4rem 0 1rem 1.25rem; }
.takeaways-card li { margin:.45rem 0; }
.takeaways-card .big-one {
  background:#fff; color:var(--c-primary);
  border-radius:.75rem; padding:.9rem 1rem;
  font-weight:700; box-shadow:0 2px 10px rgba(67,97,194,.15);
  margin-top:1rem;
}

/* References details */
details.refs-details {
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:.9rem; padding:1rem 1.1rem 1.3rem;
  box-shadow:var(--shadow-sm); margin-bottom:1.5rem;
}
details.refs-details[open] { border-color:var(--c-primary); }
details.refs-details summary {
  cursor:pointer; font-weight:700; color:var(--c-primary);
  list-style:none;
}
details.refs-details summary::-webkit-details-marker { display:none; }
details.refs-details ol { margin:.75rem 0 0 1.25rem; font-size:.85rem; color:var(--c-gray); }
details.refs-details li { margin:.45rem 0; }

/* TTS bar */
.tts-bar { display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin:1.5rem 0; }

/* Floating WhatsApp */
.floating-whatsapp {
  position:fixed; bottom:18px; right:18px;
  background:#25d366; color:#fff !important;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  box-shadow:0 4px 22px rgba(37,211,102,.45);
  z-index:50; transition:all var(--transition);
  text-decoration:none;
}
.floating-whatsapp:hover { background:#1fb558; transform:translateY(-3px) scale(1.05); }

/* Nav links */
.nav-links {
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
  margin:2rem 0 0;
}
.nav-links a {
  background:var(--c-primary); color:#fff !important;
  padding:.6rem 1.1rem; border-radius:2rem;
  font-weight:600; font-size:.82rem;
  transition:background var(--transition);
}
.nav-links a:hover { background:var(--c-secondary); }

/* Back link */
.back-link {
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--c-primary); font-weight:600;
  font-size:.875rem;
  border:1px solid var(--c-primary);
  border-radius:2rem;
  padding:.5rem 1rem;
  transition:all var(--transition);
}
.back-link:hover { background:var(--c-primary); color:#fff !important; }

/* Quotes grid */
.quotes-grid {
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:1rem 0;
}
.quote-card {
  background:#fff; border:1px solid var(--c-border);
  border-radius:.9rem; padding:1.1rem 1rem;
  font-size:.9rem; line-height:1.5;
  box-shadow:var(--shadow-sm); position:relative;
}
.quote-card::before {
  content:'\201C'; position:absolute; top:-10px; left:10px;
  font-size:2.8rem; line-height:1; color:rgba(79,164,154,.25);
  font-family:Georgia,serif;
}

/* Contact box */
.contact-box { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:1.25rem; }

/* WhatsApp workshops subscribe dark box */
.subscribe-card {
  background: var(--c-dark);
  border-radius:var(--radius); padding:2.5rem 1.75rem;
  text-align:center; margin-bottom:1.5rem;
}
.subscribe-card .subscribe-title { color:var(--c-accent); font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.subscribe-card .subscribe-sub   { color:rgba(255,255,255,.75); font-size:.9rem; margin-bottom:1.2rem; }
.subscribe-form {
  display:flex; flex-direction:column; gap:.85rem;
  max-width:480px; margin:0 auto;
}
.subscribe-form-row { display:flex; align-items:center; gap:.7rem; width:100%; }
.subscribe-form-row label { min-width:130px; text-align:right; color:#fff; font-weight:600; font-size:.85rem; }
.subscribe-form-row input, .subscribe-form-row select {
  flex:1; padding:.5em .75em; border-radius:.5rem;
  border:1px solid #555; background:#1e293b; color:#fff;
  font-size:.9rem;
}
.subscribe-form button[type=submit] {
  padding:.7em 1.5em; border-radius:.5rem; border:none;
  background:linear-gradient(90deg,var(--c-secondary) 0%,var(--c-primary) 100%);
  color:#fff; font-weight:700; font-size:.95rem;
  cursor:pointer; margin-top:.5rem;
  transition:filter var(--transition);
}
.subscribe-form button[type=submit]:hover { filter:brightness(1.1); }

/* Share icons */
.share-icons {
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:1rem;
}
.share-icons a, .share-icons button {
  color:var(--c-primary); font-size:1.2rem;
  background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color var(--transition); text-decoration:none;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-desc    { max-width:100%; }
  .hero-actions { justify-content:center; }
  .hero-stats   { justify-content:center; }
  .hero-visual  { order:-1; }
  .hero-logo    { width:160px; height:160px; }
}
@media (max-width:768px) {
  .t11-section     { padding:2.5rem 0; }
  .pillar-grid     { grid-template-columns:1fr; }
  .grid-auto       { grid-template-columns:1fr; }
  .t11-footer-inner { grid-template-columns:1fr; gap:2rem; }
  .vz-controls-row { flex-direction:column; }
  .ql-methods      { grid-template-columns:1fr; }
  table.vocab-table { display:none; }
  .vocab-cards      { display:grid; grid-template-columns:1fr; gap:.9rem; margin-top:.6rem; }
  .vz-table-wrap    { display:none; }
  .subscribe-form-row { flex-direction:column; align-items:flex-start; }
  .subscribe-form-row label { min-width:auto; text-align:left; }
}
@media (max-width:480px) {
  .hero-actions  { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { text-align:center; }
  .t11-announce  { flex-direction:column; }
  .hero-stats    { gap:1rem; }
}