/* ═══════════════════════════════════════════════════════════════════════════
   GRAMMAR ENGINE — Styles
   Quizzman Mandarin — Modern Chinese Grammar Learning UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ────────────────────────────────────────────────────── */
:root {
  --ge-primary: #4f46e5;
  --ge-primary-light: #818cf8;
  --ge-primary-dark: #3730a3;
  --ge-secondary: #7c3aed;
  --ge-success: #10b981;
  --ge-error: #ef4444;
  --ge-warning: #f59e0b;
  --ge-text: #1e293b;
  --ge-text-2: #64748b;
  --ge-text-3: #94a3b8;
  --ge-bg: #f8fafc;
  --ge-surface: #ffffff;
  --ge-border: #e2e8f0;
  --ge-border-2: #cbd5e1;
  --ge-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --ge-shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --ge-shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --ge-shadow-xl: 0 20px 48px rgba(0,0,0,.16);
  --ge-radius-sm: 6px;
  --ge-radius-md: 10px;
  --ge-radius-lg: 14px;
  --ge-radius-xl: 20px;
  --ge-transition: 0.2s cubic-bezier(.4,0,.2,1);
  --ge-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ge-font-cn: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ─── Reset & Base ─────────────────────────────────────────────────────── */
.grammar-app {
  font-family: var(--ge-font);
  color: var(--ge-text);
  background: var(--ge-bg);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.grammar-app * { box-sizing: border-box; }
.hidden { display: none !important; }

/* ─── Header ───────────────────────────────────────────────────────────── */
.ge-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ge-border);
  padding: 0 1.5rem;
}

.ge-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.ge-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ge-text);
}

.ge-logo img {
  border-radius: 8px;
}

.ge-brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
}

.ge-brand-sub {
  display: block;
  font-size: .72rem;
  color: var(--ge-text-3);
  font-family: var(--ge-font-cn);
  letter-spacing: 1px;
}

.ge-nav {
  display: flex;
  gap: 4px;
}

.ge-nav-link {
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ge-text-2);
  font-size: .875rem;
  font-weight: 500;
  transition: var(--ge-transition);
}

.ge-nav-link:hover { background: var(--ge-bg); color: var(--ge-text); }
.ge-nav-link.active { background: var(--ge-primary); color: #fff; }

/* ─── Unified Bar (macOS / Spotify) ─────────────────────────────────── */
.ge-bar {
  position: sticky;
  top: 56px;
  z-index: 90;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 0 1.5rem;
}

.ge-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ge-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  gap: 1rem;
}

/* ── Title block ─────────────────────────────────── */
.ge-bar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ge-bar-title h1 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--ge-primary), var(--ge-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ge-bar-count {
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  background: var(--ge-primary);
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 26px;
  text-align: center;
  line-height: 1.4;
}

/* ── Actions row ─────────────────────────────────── */
.ge-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ge-bar .ge-search-wrap {
  max-width: 220px;
  min-width: 140px;
}

.ge-bar .ge-search {
  padding: 6px 10px 6px 32px;
  font-size: .82rem;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  border-color: transparent;
}

.ge-bar .ge-search:focus {
  background: var(--ge-surface);
  border-color: var(--ge-primary-light);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}

.ge-bar .ge-search-icon {
  left: 10px;
}

.ge-bar .ge-view-toggle {
  border-color: rgba(0,0,0,.08);
  border-radius: 8px;
}

.ge-bar .ge-view-btn {
  padding: 5px 8px;
}

/* ── Filter chips ────────────────────────────────── */
.ge-bar-filters {
  display: flex;
  gap: 6px;
  padding: 0 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ge-bar-filters::-webkit-scrollbar { display: none; }

.ge-bar-filters:empty { padding: 0; }

.ge-bar-filters .ge-filter-btn {
  padding: 4px 14px;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--ge-border);
  background: var(--ge-surface);
  color: var(--ge-text-2);
  cursor: pointer;
  transition: var(--ge-transition);
}

.ge-bar-filters .ge-filter-btn:hover {
  border-color: var(--ge-primary-light);
  color: var(--ge-primary);
}

.ge-bar-filters .ge-filter-btn.active {
  background: var(--ge-primary);
  color: #fff;
  border-color: var(--ge-primary);
  box-shadow: 0 2px 8px rgba(79,70,229,.25);
}

.ge-view-toggle {
  display: flex;
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-sm);
  overflow: hidden;
}

.ge-view-btn {
  padding: 6px 10px;
  background: var(--ge-surface);
  border: none;
  cursor: pointer;
  color: var(--ge-text-3);
  transition: var(--ge-transition);
  display: flex;
  align-items: center;
}

.ge-view-btn:hover { color: var(--ge-text); }
.ge-view-btn.active { background: var(--ge-primary); color: #fff; }
.ge-view-btn + .ge-view-btn { border-left: 1px solid var(--ge-border); }

/* ─── Main Content ─────────────────────────────────────────────────────── */
.ge-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  min-height: 60vh;
}

.ge-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--ge-text-3);
  font-size: 1.1rem;
}

/* ─── Tree/MindMap View ────────────────────────────────────────────────── */
.ge-tree-category {
  margin-bottom: 2.5rem;
}

.ge-tree-category + .ge-tree-category {
  padding-top: 2rem;
  border-top: 1px solid var(--ge-border);
}

.ge-tree-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  padding: .65rem 1rem;
  background: var(--ge-surface);
  color: var(--ge-text);
  border-radius: var(--ge-radius-md);
  border: 1px solid var(--ge-border);
  margin-bottom: 1.25rem;
  box-shadow: var(--ge-shadow-sm);
}

.ge-tree-cat-header span:first-child {
  font-size: 1.15rem;
}

.ge-tree-cat-content {
  padding-left: .75rem;
}

.ge-tree-level {
  margin-bottom: 1.25rem;
  position: relative;
}

.ge-tree-level-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .8rem;
  color: var(--ge-primary-dark);
  padding: 3px 12px;
  background: rgba(79,70,229,.06);
  border: 1px solid rgba(79,70,229,.12);
  border-radius: 8px;
  margin-bottom: .6rem;
  position: relative;
}

.ge-tree-connector {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 2px;
  height: 6px;
  background: rgba(79,70,229,.2);
}

.ge-tree-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: .75rem;
  border-left: 2px solid rgba(79,70,229,.1);
  margin-left: .75rem;
}

.ge-tree-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ge-text);
  font-size: .82rem;
  font-weight: 500;
  transition: var(--ge-transition);
  position: relative;
}

.ge-tree-item:hover {
  border-color: var(--ge-primary-light);
  box-shadow: 0 2px 8px rgba(79,70,229,.1);
  transform: translateY(-1px);
  color: var(--ge-primary);
  background: rgba(79,70,229,.02);
}

.ge-tree-item.new::after {
  content: 'Mới';
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--ge-error);
  color: #fff;
  font-size: .58rem;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.4;
}

/* ─── Grid/Card View ───────────────────────────────────────────────────── */
.ge-cat-header h3 {
  font-size: 1rem;
  font-weight: 700;
  padding: .65rem 1rem;
  background: var(--ge-surface);
  color: var(--ge-text);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--ge-shadow-sm);
}

.ge-cat-count {
  font-weight: 400;
  opacity: .7;
  font-size: .9rem;
}

.ge-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 2rem;
}

.ge-card {
  display: block;
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--ge-text);
  transition: var(--ge-transition);
  border-left: 4px solid var(--ge-primary-light);
}

.ge-card:hover {
  box-shadow: var(--ge-shadow-md);
  border-left-color: var(--ge-primary);
  transform: translateY(-2px);
}

.ge-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ge-card-head h3 {
  font-size: .95rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.ge-card-arrow {
  font-size: 1.4rem;
  color: var(--ge-text-3);
  transition: var(--ge-transition);
  flex-shrink: 0;
  margin-left: 8px;
}

.ge-card:hover .ge-card-arrow { color: var(--ge-primary); transform: translateX(2px); }

.ge-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ge-chip {
  padding: 2px 8px;
  background: rgba(79,70,229,.06);
  border-radius: 12px;
  font-size: .72rem;
  color: var(--ge-text-2);
  font-weight: 500;
}

.ge-badge-new {
  padding: 2px 8px;
  background: var(--ge-error);
  color: #fff;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 700;
}

.ge-badge-premium {
  padding: 2px 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 700;
}

/* ─── Detail View ──────────────────────────────────────────────────────── */
.ge-detail {
  max-width: 900px;
  margin: 0 auto;
}

.ge-detail-hero {
  background: linear-gradient(135deg, #1e293b, #334155);
  border-radius: var(--ge-radius-lg);
  padding: 1.5rem 2rem;
  color: #fff;
  margin-bottom: 1.5rem;
}

.ge-detail-hero-main {
  margin-bottom: 1rem;
}

.ge-detail-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}

.ge-detail-tags {
  display: flex;
  gap: 6px;
}

.ge-detail-tag {
  padding: 3px 10px;
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 500;
}

.ge-detail-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.ge-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--ge-radius-sm);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
  cursor: pointer;
  transition: var(--ge-transition);
}

.ge-toolbar-btn:hover { background: rgba(255,255,255,.2); }

.ge-detail-view-toggle {
  display: flex;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--ge-radius-sm);
  overflow: hidden;
}

.ge-dv-btn {
  padding: 6px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.6);
  transition: var(--ge-transition);
  display: flex;
  align-items: center;
}

.ge-dv-btn:hover { color: #fff; }
.ge-dv-btn.active { background: rgba(255,255,255,.2); color: #fff; }
.ge-dv-btn + .ge-dv-btn { border-left: 1px solid rgba(255,255,255,.1); }

.ge-auto-collapse {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  margin-left: auto;
}

.ge-auto-collapse input { display: none; }

.ge-toggle-slider {
  width: 32px;
  height: 18px;
  background: rgba(255,255,255,.2);
  border-radius: 9px;
  position: relative;
  transition: var(--ge-transition);
}

.ge-toggle-slider::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: var(--ge-transition);
}

.ge-auto-collapse input:checked + .ge-toggle-slider {
  background: var(--ge-success);
}

.ge-auto-collapse input:checked + .ge-toggle-slider::after {
  left: 16px;
}

/* ─── Summary ──────────────────────────────────────────────────────────── */
.ge-summary {
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.ge-summary:not(.expanded) .ge-summary-content {
  max-height: 100px;
  overflow: hidden;
}

.ge-summary-fade {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, var(--ge-surface));
  pointer-events: none;
  transition: var(--ge-transition);
}

.ge-summary.expanded .ge-summary-fade { opacity: 0; }

.ge-summary-content p {
  margin: 0 0 .5rem;
  color: var(--ge-text-2);
  font-size: .92rem;
  line-height: 1.7;
}

.ge-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 6px 0;
  background: none;
  border: none;
  border-top: 1px solid var(--ge-border);
  color: var(--ge-primary);
  font-size: .82rem;
  cursor: pointer;
  transition: var(--ge-transition);
  margin-top: .5rem;
}

.ge-summary-toggle:hover { color: var(--ge-primary-dark); }

.ge-summary.expanded .ge-summary-toggle svg {
  transform: rotate(180deg);
}

/* ─── Locked Banner ────────────────────────────────────────────────────── */
.ge-locked-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: var(--ge-radius-sm);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: #92400e;
  text-align: center;
  margin-bottom: 1rem;
}

.ge-locked-banner.small { font-size: .8rem; padding: .5rem 1rem; }

.ge-unlock-cta {
  text-align: center;
  margin-bottom: 1rem;
}

.ge-btn-unlock {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--ge-primary), var(--ge-secondary));
  color: #fff;
  border: none;
  border-radius: var(--ge-radius-md);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ge-transition);
}

.ge-btn-unlock:hover { transform: scale(1.03); box-shadow: var(--ge-shadow-md); }

/* ─── Patterns ─────────────────────────────────────────────────────────── */
.ge-patterns {
  margin-bottom: 2rem;
}

.ge-patterns-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ge-pattern {
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  overflow: hidden;
  transition: var(--ge-transition);
}

.ge-pattern.active {
  border-color: var(--ge-primary-light);
  box-shadow: var(--ge-shadow-sm);
}

.ge-pattern-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: inherit;
  color: inherit;
  transition: var(--ge-transition);
}

.ge-pattern-header:hover { background: rgba(79,70,229,.03); }

.ge-pattern-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ge-pattern-num {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ge-text-3);
  background: var(--ge-bg);
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.ge-pattern-title-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.ge-pattern-text {
  font-weight: 600;
  font-size: .95rem;
}

.ge-pattern-hint {
  color: var(--ge-text-3);
  font-size: .82rem;
  font-style: italic;
}

.ge-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s ease;
}

.ge-chevron::before,
.ge-chevron::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 2px;
  background: var(--ge-text-3);
  top: 50%;
  border-radius: 1px;
  transition: var(--ge-transition);
}

.ge-chevron::before { left: 2px; transform: rotate(45deg); }
.ge-chevron::after { right: 2px; transform: rotate(-45deg); }

.ge-pattern.active .ge-chevron::before { transform: rotate(-45deg); }
.ge-pattern.active .ge-chevron::after { transform: rotate(45deg); }

/* Pattern Body */
.ge-pattern-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  padding: 0 1.25rem;
}

.ge-pattern-body.open {
  max-height: 4000px;
  opacity: 1;
  padding: 0 1.25rem 1.25rem;
}

.ge-pattern-meaning {
  font-size: .95rem;
  color: var(--ge-primary-dark);
  font-weight: 600;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  background: rgba(79,70,229,.05);
  border-radius: var(--ge-radius-sm);
  border-left: 3px solid var(--ge-primary);
}

/* Usage formatting */
.ge-pattern-usage {
  font-size: .9rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ge-usage-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ge-primary-dark);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 1rem 0 .5rem;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(79,70,229,.15);
}

.ge-usage-sub {
  display: flex;
  gap: 8px;
  margin: .4rem 0;
  padding-left: .5rem;
}

.ge-sub-num {
  font-weight: 700;
  color: var(--ge-primary);
  font-size: .82rem;
  flex-shrink: 0;
}

.ge-usage-ex {
  padding: .4rem .75rem;
  background: rgba(16,185,129,.05);
  border-left: 3px solid var(--ge-success);
  border-radius: 0 var(--ge-radius-sm) var(--ge-radius-sm) 0;
  margin: .4rem 0;
  font-size: .88rem;
}

.ge-ex-label {
  font-weight: 600;
  color: var(--ge-success);
  font-size: .8rem;
}

.ge-usage-bullet {
  display: flex;
  gap: 8px;
  margin: .3rem 0;
  padding-left: .5rem;
}

.ge-bullet {
  color: var(--ge-primary);
  font-weight: 700;
  flex-shrink: 0;
}

.ge-usage-text {
  margin: .3rem 0;
  font-size: .9rem;
  color: var(--ge-text-2);
  line-height: 1.7;
}

.ge-usage-ex-inline {
  padding: .3rem .5rem;
  background: rgba(79,70,229,.03);
  border-radius: var(--ge-radius-sm);
  margin: .3rem 0;
  font-size: .88rem;
}

.ge-term-header {
  margin: .75rem 0 .25rem;
}

/* Inline formatting classes */
.ge-han {
  color: var(--ge-text);
  font-family: var(--ge-font-cn);
  font-weight: 600;
}

.ge-pinyin {
  color: #0d9488;
  font-style: italic;
  font-size: .92em;
}

.ge-pinyin-label {
  color: var(--ge-text-3);
  font-size: .8em;
  text-transform: uppercase;
}

.ge-term {
  background: rgba(124,58,237,.08);
  color: var(--ge-secondary);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}

.ge-ling {
  background: rgba(79,70,229,.08);
  color: var(--ge-primary);
  padding: 0 3px;
  border-radius: 3px;
  font-family: 'Fira Code', monospace;
  font-size: .85em;
  font-weight: 600;
}

.ge-arrow {
  color: var(--ge-primary);
  font-weight: 700;
  margin: 0 4px;
}

.ge-vi {
  color: var(--ge-text-2);
  font-style: italic;
}

/* Pattern tokens */
.ge-pt-op { color: var(--ge-error); font-weight: 700; margin: 0 2px; }
.ge-pt-paren { color: var(--ge-text-3); }
.ge-pt-focus { color: var(--ge-error); font-weight: 700; font-family: var(--ge-font-cn); }
.ge-pt-particle { color: var(--ge-secondary); font-family: var(--ge-font-cn); }
.ge-pt-term { color: var(--ge-primary-dark); font-family: var(--ge-font-cn); font-weight: 600; background: rgba(79,70,229,.06); padding: 1px 4px; border-radius: 3px; }
.ge-pt-text { font-family: var(--ge-font-cn); }

/* Examples */
.ge-pattern-examples {
  margin-top: 1rem;
}

.ge-pattern-examples h4 {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ge-text);
  margin: 0 0 .5rem;
}

.ge-ex-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ge-ex-item {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--ge-border);
  transition: var(--ge-transition);
}

.ge-ex-item:last-child { border-bottom: none; }
.ge-ex-item:hover { background: rgba(79,70,229,.02); }

.ge-ex-item.collapsed { display: none; }

.ge-ex-zh {
  font-family: var(--ge-font-cn);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ge-text);
}

.ge-ex-vi {
  font-size: .85rem;
  color: var(--ge-text-2);
  font-style: italic;
  margin-top: 2px;
}

.ge-btn-more {
  display: inline-block;
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--ge-border);
  border-radius: 16px;
  color: var(--ge-primary);
  font-size: .78rem;
  cursor: pointer;
  margin-top: .5rem;
  transition: var(--ge-transition);
}

.ge-btn-more:hover { background: rgba(79,70,229,.05); }

/* Notes */
.ge-pattern-notes {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: rgba(245,158,11,.06);
  border-left: 3px solid var(--ge-warning);
  border-radius: 0 var(--ge-radius-sm) var(--ge-radius-sm) 0;
}

.ge-pattern-notes h4 {
  font-size: .82rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: #92400e;
}

.ge-pattern-notes p {
  margin: 0;
  font-size: .88rem;
  color: var(--ge-text-2);
}

/* Sub-patterns */
.ge-subpatterns {
  margin-top: 1rem;
  border-top: 1px dashed var(--ge-border);
  padding-top: .75rem;
}

.ge-subp-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ge-text-2);
  margin-bottom: .5rem;
}

.ge-subp-item {
  padding: .5rem .75rem;
  background: var(--ge-bg);
  border-radius: var(--ge-radius-sm);
  margin-bottom: .5rem;
}

.ge-subp-name { font-weight: 600; font-size: .88rem; color: var(--ge-text); }
.ge-subp-formula { font-size: .85rem; margin-top: 2px; }
.ge-subp-desc { font-size: .82rem; color: var(--ge-text-2); margin-top: 4px; }
.ge-subp-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ge-subp-ex { font-size: .8rem; background: rgba(79,70,229,.05); padding: 2px 8px; border-radius: 10px; color: var(--ge-text-2); }

/* ─── Badges ───────────────────────────────────────────────────────────── */
.ge-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  flex-shrink: 0;
}

.ge-badge-default     { background: #e5e7eb; color: #374151; }
.ge-badge-overview    { background: #dbeafe; color: #1e40af; }
.ge-badge-usage       { background: #d1fae5; color: #065f46; }
.ge-badge-structure   { background: #ede9fe; color: #5b21b6; }
.ge-badge-summary     { background: #ffedd5; color: #9a3412; }
.ge-badge-comparison  { background: #ccfbf1; color: #134e4a; }
.ge-badge-criteria    { background: #fee2e2; color: #991b1b; }
.ge-badge-theory      { background: #e0e7ff; color: #3730a3; }
.ge-badge-classification { background: #fce7f3; color: #9d174d; }
.ge-badge-syntax      { background: #cffafe; color: #155e75; }
.ge-badge-history     { background: #fef3c7; color: #92400e; }
.ge-badge-language    { background: #d1fae5; color: #065f46; }
.ge-badge-connection  { background: #ede9fe; color: #5b21b6; }

/* ─── Source Preview ───────────────────────────────────────────────────── */
.ge-source {
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.ge-source-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ge-source-info h4 {
  margin: 0 0 4px;
  font-size: .95rem;
}

.ge-source-info p {
  margin: 0;
  font-size: .82rem;
  color: var(--ge-text-2);
}

.ge-source-sub {
  font-style: italic;
}

.ge-source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(79,70,229,.06);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-sm);
  color: var(--ge-primary);
  font-size: .82rem;
  cursor: pointer;
  transition: var(--ge-transition);
  flex-shrink: 0;
}

.ge-source-toggle:hover { background: rgba(79,70,229,.1); }

.ge-source-gallery {
  overflow: hidden;
  transition: max-height 0.4s ease, margin-top 0.3s ease;
  max-height: 600px;
  margin-top: 1rem;
}

.ge-source-gallery.collapsed {
  max-height: 0;
  margin-top: 0;
}

.ge-source-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ge-src-thumb {
  width: 80px;
  border-radius: var(--ge-radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--ge-transition);
  position: relative;
}

.ge-src-thumb:hover { border-color: var(--ge-primary); }
.ge-src-thumb img { width: 100%; display: block; }

.ge-src-page {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  text-align: center;
  font-size: .6rem;
  padding: 2px 0;
}

/* Lightbox */
.ge-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ge-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
}

.ge-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ge-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

.ge-lightbox-content img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: var(--ge-radius-sm);
}

.ge-lightbox-counter {
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  margin-top: .5rem;
}

.ge-lightbox-nav {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 1rem .75rem;
  cursor: pointer;
  border-radius: var(--ge-radius-sm);
  transition: var(--ge-transition);
}

.ge-lightbox-nav:hover { background: rgba(255,255,255,.25); }

/* ─── Memory Tips ──────────────────────────────────────────────────────── */
.ge-tips {
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.ge-tips-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ge-text);
  cursor: pointer;
  transition: var(--ge-transition);
}

.ge-tips-toggle:hover { background: rgba(79,70,229,.03); }

.ge-tips-toggle small {
  color: var(--ge-text-3);
  font-weight: 400;
}

.ge-tips-chevron {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.ge-tips:not(.collapsed) .ge-tips-chevron { transform: rotate(180deg); }

.ge-tips-content {
  padding: 0 1.25rem 1.25rem;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.ge-tips.collapsed .ge-tips-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
}

.ge-tips-grid {
  display: grid;
  gap: 12px;
}

.ge-tip-card {
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  overflow: hidden;
  border-top: 3px solid var(--tip-color, var(--ge-primary));
}

.ge-tip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 1.25rem;
  background: rgba(0,0,0,.02);
}

.ge-tip-icon { font-size: 1.5rem; }
.ge-tip-title { font-weight: 700; font-size: .95rem; }
.ge-tip-cn { font-size: .82rem; color: var(--ge-text-3); font-family: var(--ge-font-cn); }

.ge-tip-body {
  padding: .5rem 1.25rem 1rem;
}

.ge-tip-sec {
  margin-bottom: .75rem;
}

.ge-tip-sec-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ge-text-2);
  margin-bottom: .25rem;
}

.ge-tip-sec ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: .85rem;
  color: var(--ge-text-2);
}

.ge-tip-sec ul li { margin-bottom: 2px; }

.ge-tip-ex {
  padding: .3rem .5rem;
  background: var(--ge-bg);
  border-radius: var(--ge-radius-sm);
  font-size: .85rem;
  margin-bottom: 4px;
}

.ge-tips-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: .75rem;
  font-size: .82rem;
  color: var(--ge-text-2);
}

.ge-tips-prev,
.ge-tips-next {
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--ge-border);
  border-radius: 16px;
  font-size: .78rem;
  cursor: pointer;
  color: var(--ge-primary);
  transition: var(--ge-transition);
}

.ge-tips-prev:disabled,
.ge-tips-next:disabled { opacity: .4; cursor: default; }

/* ─── Quiz ─────────────────────────────────────────────────────────────── */
.ge-quiz-start {
  margin: 2rem 0;
}

.ge-quiz-start-card {
  text-align: center;
  padding: 2.5rem;
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  box-shadow: var(--ge-shadow-sm);
}

.ge-quiz-start-icon { font-size: 3rem; margin-bottom: 1rem; }
.ge-quiz-start-card h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.ge-quiz-start-card p { color: var(--ge-text-2); margin: 0 0 1.5rem; }

.ge-btn-start-quiz {
  padding: 12px 28px;
  font-size: 1rem;
}

/* Quiz wrap */
.ge-quiz {
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-lg);
  padding: 2rem;
  position: relative;
}

.ge-quiz.ge-quiz-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  border-radius: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}

body.ge-quiz-active { overflow: hidden; }

.ge-quiz-exit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--ge-text-3);
  cursor: pointer;
}

.ge-quiz-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.ge-quiz-logo {
  height: 32px;
  width: auto;
  margin-bottom: .5rem;
}

.ge-quiz-progress {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: .82rem;
  color: var(--ge-text-2);
}

.ge-quiz-progress-bar {
  height: 4px;
  background: var(--ge-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: .5rem;
}

.ge-quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ge-primary), var(--ge-secondary));
  border-radius: 2px;
  transition: width 0.3s ease;
}

.ge-quiz-q-num {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ge-primary);
  margin-bottom: .5rem;
}

.ge-quiz-q-text {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.ge-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1rem;
}

.ge-quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: .75rem 1rem;
  background: var(--ge-bg);
  border: 2px solid var(--ge-border);
  border-radius: var(--ge-radius-md);
  cursor: pointer;
  transition: var(--ge-transition);
  text-align: left;
  font-size: inherit;
  color: inherit;
}

.ge-quiz-option:hover:not(.disabled) { border-color: var(--ge-primary-light); background: rgba(79,70,229,.04); }
.ge-quiz-option.selected { border-color: var(--ge-primary); background: rgba(79,70,229,.08); }
.ge-quiz-option.correct { border-color: var(--ge-success); background: rgba(16,185,129,.08); }
.ge-quiz-option.wrong { border-color: var(--ge-error); background: rgba(239,68,68,.08); }
.ge-quiz-option.disabled { cursor: default; }

.ge-opt-letter {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ge-surface);
  border: 1px solid var(--ge-border);
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
}

.ge-quiz-option.selected .ge-opt-letter { background: var(--ge-primary); color: #fff; border-color: var(--ge-primary); }
.ge-quiz-option.correct .ge-opt-letter { background: var(--ge-success); color: #fff; border-color: var(--ge-success); }
.ge-quiz-option.wrong .ge-opt-letter { background: var(--ge-error); color: #fff; border-color: var(--ge-error); }

.ge-quiz-actions { text-align: center; }

.ge-quiz-explain {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--ge-bg);
  border-radius: var(--ge-radius-md);
  animation: ge-fadeIn 0.3s ease;
}

.ge-exp-result {
  font-weight: 700;
  margin-bottom: .5rem;
  font-size: 1rem;
}

.ge-exp-result.correct { color: var(--ge-success); }
.ge-exp-result.wrong { color: var(--ge-error); }

.ge-exp-text {
  font-size: .9rem;
  color: var(--ge-text-2);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.ge-quiz-result {
  text-align: center;
  padding: 2rem;
  animation: ge-fadeIn 0.4s ease;
}

.ge-quiz-result-icon { font-size: 3rem; margin-bottom: 1rem; }
.ge-quiz-result h3 { font-size: 1.3rem; margin: 0 0 1rem; }

.ge-quiz-score {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ge-primary);
  margin-bottom: .5rem;
}

/* Quiz highlight */
.ge-hl-pending { background: transparent; transition: var(--ge-transition); }
.ge-hl { background: rgba(79,70,229,.15); padding: 1px 4px; border-radius: 3px; font-weight: 600; position: relative; }
.ge-hl.animated { animation: ge-highlightPulse 0.5s ease; }
.ge-hl-tooltip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: .72rem; white-space: nowrap; pointer-events: none; }

/* Slide animations */
.ge-slide-out { animation: ge-slideOut 0.2s ease forwards; }
.ge-slide-in { animation: ge-slideIn 0.3s ease; }

@keyframes ge-slideOut { to { opacity: 0; transform: translateX(-20px); } }
@keyframes ge-slideIn { from { opacity: 0; transform: translateX(20px); } }
@keyframes ge-fadeIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes ge-highlightPulse { 0% { background: rgba(79,70,229,.4); } 100% { background: rgba(79,70,229,.15); } }

/* ─── Slideshow ────────────────────────────────────────────────────────── */
.ge-slideshow {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-radius: var(--ge-radius-lg);
  padding: 2rem;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
  color: #e2e8f0;
}

.ge-slideshow.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9500;
  border-radius: 0;
}

body.ge-slideshow-fs { overflow: hidden; }

.ge-slides {
  flex: 1;
  position: relative;
  min-height: 350px;
}

.ge-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.ge-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.ge-slide-content {
  max-width: 700px;
  width: 100%;
  text-align: center;
}

/* Title slide */
.ge-slide-title .ge-slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ge-slide-pnum {
  font-size: .8rem;
  opacity: .5;
}

.ge-slide-pattern {
  font-size: 1.8rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.ge-slide-meaning {
  font-size: 1.05rem;
  opacity: .75;
  margin: 0;
}

.ge-slide-hint {
  font-size: .82rem;
  opacity: .4;
  margin-top: 1rem;
}

/* Content slide */
.ge-slide-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.ge-slide-pattern-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}

.ge-slide-body {
  text-align: left;
}

.ge-slide-line {
  margin-bottom: .75rem;
  line-height: 1.7;
}

.ge-sl-section-title {
  font-size: .9rem;
  font-weight: 700;
  margin-top: 1rem;
}

.ge-sl-usage,
.ge-sl-notes { font-size: .92rem; opacity: .85; }
.ge-sl-usage-formatted { font-size: .88rem; }

.ge-sl-example {
  padding: .4rem .75rem;
  background: rgba(255,255,255,.05);
  border-radius: var(--ge-radius-sm);
  margin-bottom: .5rem;
  font-size: .9rem;
}

.ge-ex-num { color: var(--ge-primary-light); font-weight: 700; margin-right: 4px; }

/* Feedback slide */
.ge-slide-feedback .ge-slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ge-feedback-icon { font-size: 3rem; }
.ge-feedback-form { max-width: 400px; width: 100%; }

.ge-rating {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.ge-star {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  opacity: .4;
  transition: var(--ge-transition);
}

.ge-star.active,
.ge-star:hover { opacity: 1; transform: scale(1.15); }

.ge-feedback-form textarea {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--ge-radius-sm);
  color: #e2e8f0;
  padding: .75rem;
  font-size: .9rem;
  resize: vertical;
  margin-bottom: 1rem;
}

.ge-feedback-form textarea:focus {
  outline: none;
  border-color: var(--ge-primary-light);
}

.ge-fb-done p { font-size: 1.1rem; }

/* Slide indicators */
.ge-slide-indicators {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.ge-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  transition: var(--ge-transition);
}

.ge-indicator.active { background: var(--ge-primary-light); width: 20px; border-radius: 4px; }
.ge-indicator:hover { background: rgba(255,255,255,.4); }

/* Slide toolbar */
.ge-slide-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.ge-slide-btn {
  padding: 6px 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--ge-radius-sm);
  color: rgba(255,255,255,.8);
  font-size: .82rem;
  cursor: pointer;
  transition: var(--ge-transition);
}

.ge-slide-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

.ge-slide-progress {
  text-align: center;
  font-size: .78rem;
  opacity: .6;
}

.ge-slide-bar {
  width: 120px;
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.ge-slide-fill {
  height: 100%;
  background: var(--ge-primary-light);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ─── Modal ────────────────────────────────────────────────────────────── */
.ge-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ge-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}

.ge-modal-card {
  position: relative;
  background: var(--ge-surface);
  border-radius: var(--ge-radius-lg);
  padding: 2rem;
  width: 90%;
  max-width: 420px;
  box-shadow: var(--ge-shadow-xl);
  text-align: center;
}

.ge-modal-title { font-size: 1.2rem; margin: 0 0 1rem; }

.ge-modal-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ge-border);
  border-radius: var(--ge-radius-sm);
  font-size: .95rem;
  margin-bottom: 1rem;
  outline: none;
}

.ge-modal-input:focus { border-color: var(--ge-primary-light); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }

.ge-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 1rem;
}

.ge-modal-help {
  font-size: .8rem;
  color: var(--ge-text-3);
}

.ge-modal-help a { color: var(--ge-primary); }

.ge-modal-error {
  font-size: .85rem;
  color: var(--ge-error);
  margin-top: .5rem;
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.ge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--ge-radius-sm);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ge-transition);
  border: none;
}

.ge-btn-primary {
  background: linear-gradient(135deg, var(--ge-primary), var(--ge-secondary));
  color: #fff;
}

.ge-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--ge-shadow-md); }
.ge-btn-primary.disabled, .ge-btn-primary:disabled { opacity: .5; cursor: default; transform: none; }

.ge-btn-outline {
  background: transparent;
  border: 1px solid var(--ge-border);
  color: var(--ge-text-2);
}

.ge-btn-outline:hover { border-color: var(--ge-text-2); color: var(--ge-text); }

/* ─── Toast ────────────────────────────────────────────────────────────── */
.ge-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30,41,59,.92);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: var(--ge-radius-md);
  font-size: .9rem;
  z-index: 99999;
  opacity: 0;
  transition: var(--ge-transition);
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.ge-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Detail Footer ────────────────────────────────────────────────────── */
.ge-detail-footer {
  text-align: right;
  padding: 1rem 0;
  border-top: 1px solid var(--ge-border);
  margin-top: 2rem;
  font-size: .82rem;
  color: var(--ge-text-3);
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ge-hero {
    padding: 2rem 1rem;
  }

  .ge-hero-title { font-size: 1.5rem; }
  .ge-hero-subtitle { font-size: .9rem; }

  .ge-hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .ge-toolbar-inner {
    flex-direction: column;
    gap: .75rem;
  }

  .ge-search-wrap {
    max-width: 100%;
  }

  .ge-card-grid {
    grid-template-columns: 1fr;
  }

  .ge-detail-hero {
    padding: 1rem;
  }

  .ge-detail-title { font-size: 1.2rem; }

  .ge-detail-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .ge-auto-collapse { margin-left: 0; }

  .ge-nav { display: none; }

  .ge-pattern-title-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .ge-slide-pattern { font-size: 1.2rem; }

  .ge-slideshow {
    padding: 1rem;
    min-height: 400px;
  }

  .ge-slide-toolbar {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .ge-tree-items {
    margin-left: .5rem;
  }

  .ge-source-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .ge-main { padding: .75rem; }
  .ge-hero { padding: 1.5rem .75rem; }
  .ge-detail-hero { padding: .75rem; border-radius: var(--ge-radius-sm); }
  .ge-pattern-header { padding: .75rem; }
  .ge-pattern-body.open { padding: 0 .75rem .75rem; }
}

/* ─── Print ────────────────────────────────────────────────────────────── */
@media print {
  .ge-header,
  .ge-hero,
  .ge-toolbar,
  .ge-detail-toolbar,
  .ge-unlock-cta,
  .ge-modal,
  .ge-toast,
  .ge-quiz-start,
  .ge-quiz,
  .ge-slideshow,
  .ge-btn-more { display: none !important; }

  .ge-pattern-body { max-height: none !important; opacity: 1 !important; padding: .5rem !important; }
  .ge-pattern { break-inside: avoid; page-break-inside: avoid; }
  .ge-detail { max-width: none; }
  .ge-summary { max-height: none !important; }
  .ge-summary-fade { display: none; }
  .ge-summary-toggle { display: none; }
}