* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  background: linear-gradient(180deg, #1a0e2e 0%, #2a1547 50%, #1a0e2e 100%);
  background-attachment: fixed;
  color: #f3e9ff;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

#app { padding-bottom: 72px; min-height: 100vh; }
.hidden { display: none !important; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(26,14,46,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212,175,55,0.2);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-icon { color: #d4af37; font-size: 20px; }
.brand-title { font-weight: 600; letter-spacing: 2px; }
.icon-btn {
  background: transparent; border: 1px solid rgba(212,175,55,0.3); color: #d4af37;
  width: 36px; height: 36px; border-radius: 8px; font-size: 18px; cursor: pointer;
}

/* Settings */
.settings-panel {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.settings-card {
  background: #2a1547; border: 1px solid rgba(212,175,55,0.3);
  border-radius: 16px; padding: 20px; max-width: 420px; width: 100%;
}
.settings-card h3 { margin: 0 0 12px; color: #d4af37; }
.warn { font-size: 12px; color: #ffb84d; background: rgba(255,184,77,0.1); padding: 8px; border-radius: 8px; }

/* Views */
.view { display: none; padding: 16px; max-width: 720px; margin: 0 auto; animation: fade .3s; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } }

.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.page-header h2 { margin: 0; font-size: 20px; color: #d4af37; }
.back-btn {
  background: transparent; border: 1px solid rgba(212,175,55,0.3); color: #f3e9ff;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 14px;
}

/* Hero */
.hero {
  position: relative; text-align: center; padding: 32px 16px 24px;
  border-radius: 16px; margin-bottom: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(212,175,55,0.15), transparent 60%);
  overflow: hidden;
}
.hero h1 { margin: 0 0 8px; font-size: 26px; color: #f3e9ff; letter-spacing: 2px; }
.hero p { margin: 0; color: #c9b3e8; font-size: 13px; }
.hero-stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent),
    radial-gradient(1px 1px at 40% 80%, #d4af37 50%, transparent),
    radial-gradient(1px 1px at 85% 25%, #fff 50%, transparent);
  opacity: 0.5;
}

/* Grid tiles */
.grid-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tile {
  background: linear-gradient(160deg, rgba(212,175,55,0.08), rgba(154,103,255,0.08));
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 14px; padding: 18px 12px; color: #f3e9ff;
  text-align: center; cursor: pointer; font-family: inherit;
  transition: transform .15s, border-color .15s;
}
.tile:active { transform: scale(0.97); border-color: #d4af37; }
.tile-icon { font-size: 32px; margin-bottom: 8px; }
.tile-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.tile-sub { font-size: 12px; color: #c9b3e8; }

/* Tabs */
.tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;
  margin-bottom: 12px; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 20px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.2);
  color: #f3e9ff; font-size: 13px; cursor: pointer; font-family: inherit;
}
.tab.active { background: rgba(212,175,55,0.25); border-color: #d4af37; color: #fff; }

/* Card list */
.card-list, .lesson-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (min-width: 540px) { .card-list, .lesson-list { grid-template-columns: 1fr 1fr 1fr; } }

.card-item, .lesson-item {
  background: linear-gradient(160deg, rgba(154,103,255,0.12), rgba(74,42,130,0.3));
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 12px; padding: 12px; cursor: pointer; font-family: inherit;
  text-align: left; color: #f3e9ff; transition: transform .15s;
}
.card-item:active, .lesson-item:active { transform: scale(0.97); }
.card-num, .lesson-num { font-size: 11px; color: #d4af37; letter-spacing: 1px; }
.card-name, .lesson-title { font-weight: 600; margin-top: 4px; font-size: 14px; }
.card-en, .lesson-sub { font-size: 11px; color: #c9b3e8; margin-top: 2px; }

/* Card / lesson detail */
.detail-section {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.15);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.detail-section h3 { margin: 0 0 8px; font-size: 15px; color: #d4af37; }
.detail-section p { margin: 0 0 8px; }
.kw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.kw {
  background: rgba(212,175,55,0.15); color: #d4af37;
  padding: 3px 10px; border-radius: 12px; font-size: 12px;
}
.card-hero {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(154,103,255,0.15));
  border-radius: 14px; margin-bottom: 14px; border: 1px solid rgba(212,175,55,0.3);
}
.card-art {
  width: 70px; height: 110px; flex-shrink: 0;
  background: linear-gradient(160deg, #4a2a82, #1a0e2e);
  border: 2px solid #d4af37; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #d4af37; font-size: 28px;
}
.card-hero-info h2 { margin: 0; font-size: 22px; }
.card-hero-info .en { color: #c9b3e8; font-size: 13px; margin-top: 2px; }

/* Forms */
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 13px; color: #c9b3e8; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.25);
  color: #f3e9ff; font-size: 14px; font-family: inherit; outline: none;
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #d4af37; }

.btn {
  padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(212,175,55,0.3);
  background: rgba(255,255,255,0.05); color: #f3e9ff; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.btn.primary { background: linear-gradient(135deg, #d4af37, #b8932e); color: #1a0e2e; border: none; font-weight: 600; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Practice / reading */
.practice-intro, .practice-controls, .reading-controls {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.15);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.practice-question {
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(154,103,255,0.12));
  border-left: 3px solid #d4af37; padding: 12px 14px; border-radius: 8px;
  margin-bottom: 12px;
}

.draw {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px 4px;
  margin-bottom: 12px; scrollbar-width: thin;
}
.drawn-card {
  flex: 0 0 auto; width: 110px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.drawn-art {
  width: 100px; height: 150px;
  background: linear-gradient(160deg, #4a2a82, #1a0e2e);
  border: 2px solid #d4af37; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #d4af37; text-align: center; padding: 8px;
  line-height: 1.3; font-weight: 600;
}
.drawn-art.reversed { transform: rotate(180deg); }
.drawn-pos { font-size: 11px; color: #d4af37; text-align: center; font-weight: 600; }
.drawn-name { font-size: 12px; color: #f3e9ff; text-align: center; }
.drawn-rev { font-size: 10px; color: #ffb84d; }

.ai-box {
  background: linear-gradient(135deg, rgba(154,103,255,0.1), rgba(212,175,55,0.05));
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
  white-space: pre-wrap; word-wrap: break-word;
}
.ai-box h4 { margin: 0 0 8px; color: #d4af37; font-size: 14px; }
.ai-content { font-size: 14px; line-height: 1.7; }

.followup {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.15);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.followup h4 { margin: 0 0 8px; color: #d4af37; font-size: 14px; }
.followup-q { padding: 8px 0; border-bottom: 1px dashed rgba(212,175,55,0.2); }
.followup-q:last-child { border-bottom: none; }

.loading { color: #c9b3e8; font-style: italic; }
.error { color: #ff8888; }

/* Chat thread for follow-ups */
.chat-thread {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.2);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.chat-thread h4 { margin: 0 0 10px; color: #d4af37; font-size: 14px; }
.chat-log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.chat-log:empty { display: none; }
.chat-msg {
  padding: 10px 12px; border-radius: 12px; max-width: 92%;
  font-size: 14px; line-height: 1.6; word-wrap: break-word;
}
.chat-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(184,147,46,0.2));
  border: 1px solid rgba(212,175,55,0.35); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.ai {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(154,103,255,0.15), rgba(74,42,130,0.25));
  border: 1px solid rgba(154,103,255,0.3); color: #f3e9ff;
  border-bottom-left-radius: 4px;
  white-space: pre-wrap;
}
.chat-msg.ai .ai-content { font-size: 14px; }
.chat-msg.loading { font-style: italic; color: #c9b3e8; }
.chat-suggested {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.chat-suggested:empty { display: none; }
.chip-q {
  font-size: 12px; padding: 6px 10px; border-radius: 14px;
  background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.3);
  color: #f3e9ff; cursor: pointer; font-family: inherit; text-align: left;
  max-width: 100%;
}
.chip-q:active { background: rgba(212,175,55,0.25); }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-input-row textarea {
  flex: 1; padding: 10px 12px; border-radius: 10px; resize: none;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.25);
  color: #f3e9ff; font-size: 14px; font-family: inherit; outline: none;
}
.chat-input-row textarea:focus { border-color: #d4af37; }
.chat-input-row .btn { flex: 0 0 auto; padding: 10px 14px; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around;
  background: rgba(26,14,46,0.95); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(212,175,55,0.25);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; color: #c9b3e8; cursor: pointer;
  padding: 6px 0; font-family: inherit;
}
.nav-btn span { font-size: 20px; }
.nav-btn label { font-size: 10px; pointer-events: none; }
.nav-btn.active { color: #d4af37; }