/* ============================================================
   v11 - Clickable home cards / learner UX / payment modal
   ============================================================ */

/* Clickable cards */
.stat-card.clickable, .feature-card.clickable { cursor:pointer; position:relative; }
.stat-card.clickable:hover, .feature-card.clickable:hover {
  transform:translateY(-4px); box-shadow:var(--c-shadow-lg); border-color:var(--c-primary-light);
}
.stat-card.clickable:active, .feature-card.clickable:active { transform:translateY(-1px); }
.card-enter {
  margin-top:8px; font-size:12px; font-weight:600; color:var(--c-primary);
  opacity:0; transition:var(--c-transition);
}
.stat-card.clickable:hover .card-enter { opacity:1; }
.card-arrow { color:var(--c-primary); font-weight:700; opacity:.5; transition:var(--c-transition); }
.feature-card.clickable:hover .card-arrow { opacity:1; }

/* CTA banner */
.cta-banner {
  margin:28px 0; padding:24px 28px; border-radius:var(--c-radius-lg);
  background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  color:#fff; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  box-shadow:var(--c-shadow-lg);
}
.cta-banner h3 { font-size:20px; margin-bottom:6px; }
.cta-banner p { font-size:14px; opacity:.92; }
.cta-banner .btn-primary { background:#fff; color:var(--c-primary); border:none; white-space:nowrap; }
.cta-banner .btn-primary:hover { background:var(--c-accent-bg); }

/* Vocabulary overall progress */
.vocab-overall-progress {
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--c-radius);
  padding:14px 18px; margin-bottom:18px; box-shadow:var(--c-shadow);
}
.vop-info { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; margin-bottom:8px; }
.vop-info b { color:var(--c-secondary); font-size:18px; }
.vop-tip { color:var(--c-text-3); font-size:13px; }
.vop-bar { height:8px; background:var(--c-border); border-radius:4px; overflow:hidden; }
.vop-fill { height:100%; background:linear-gradient(90deg, var(--c-secondary), var(--c-secondary-light)); border-radius:4px; transition:width .4s; }

/* Category learned badge */
.cat-learned { font-size:11px; color:var(--c-secondary); font-weight:700; margin-left:4px; }

/* Vocab card actions and learned state */
.vc-actions { flex-shrink:0; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.vc-learn-btn {
  border:1px solid var(--c-border); background:var(--c-surface-alt); color:var(--c-text-2);
  border-radius:20px; padding:4px 10px; font-size:12px; cursor:pointer; transition:var(--c-transition); white-space:nowrap;
}
.vc-learn-btn:hover { border-color:var(--c-secondary); color:var(--c-secondary); }
.vc-learn-btn.learned { background:var(--c-secondary-bg); border-color:var(--c-secondary); color:var(--c-secondary); font-weight:600; }
.vocab-card.is-learned { border-color:var(--c-secondary-light); background:linear-gradient(0deg, rgba(46,125,50,.03), rgba(46,125,50,.03)), var(--c-surface); }

/* Example sentence audio row */
.vc-ex-row { display:flex; align-items:center; gap:8px; }
.vc-ex-row .ex-uz { flex:1; min-width:0; }
.ex-audio-btn {
  width:26px; height:26px; min-width:26px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--c-border); background:var(--c-secondary-bg); color:var(--c-secondary); cursor:pointer;
}
.ex-audio-btn svg { width:13px; height:13px; }
.ex-audio-btn:hover { background:var(--c-secondary); color:#fff; }
.ex-audio-btn.playing { background:var(--c-secondary); color:#fff; }

/* Load more */
.vocab-load-more { display:block; margin:20px auto; padding:12px 32px; }

/* ===== Payment modal ===== */
.pay-modal-mask {
  position:fixed; inset:0; background:rgba(10,15,30,.55); z-index:1200;
  display:none; align-items:center; justify-content:center; padding:16px;
}
.pay-modal-mask.show { display:flex; }
.pay-modal {
  background:#fff; border-radius:var(--c-radius-lg); max-width:420px; width:100%;
  max-height:92vh; overflow-y:auto; padding:28px 26px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25); animation:payPop .25s cubic-bezier(.4,0,.2,1);
}
@keyframes payPop { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }
.pay-close {
  position:absolute; top:12px; right:14px; border:none; background:none;
  font-size:22px; color:var(--c-text-3); cursor:pointer; line-height:1; padding:4px;
}
.pay-close:hover { color:var(--c-text); }
.pay-title { font-size:20px; font-weight:800; text-align:center; margin-bottom:4px; color:var(--c-text); }
.pay-price { text-align:center; margin-bottom:16px; }
.pay-price .amount { font-size:34px; font-weight:800; color:var(--c-red); }
.pay-price .amount small { font-size:16px; font-weight:600; }
.pay-price .days { display:inline-block; margin-left:8px; font-size:13px; background:var(--c-accent-bg); color:var(--c-accent); padding:3px 10px; border-radius:12px; font-weight:600; }
.pay-qr-box { text-align:center; margin-bottom:14px; }
.pay-qr-box img {
  width:210px; height:210px; object-fit:cover; border-radius:var(--c-radius);
  border:1px solid var(--c-border); box-shadow:var(--c-shadow); background:#fff;
}
.pay-qr-tip { font-size:13px; color:var(--c-text-2); margin-top:8px; }
.pay-steps { background:var(--c-surface-alt); border-radius:var(--c-radius); padding:14px 16px; margin-bottom:14px; }
.pay-steps li { font-size:13.5px; color:var(--c-text-2); margin:7px 0 7px 18px; line-height:1.5; }
.pay-steps b { color:var(--c-text); }
.pay-wechat-row {
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px;
  font-size:14px; color:var(--c-text-2);
}
.pay-wechat-row .wid { font-weight:700; color:var(--c-secondary); font-size:16px; }
.pay-note { font-size:12px; color:var(--c-text-3); text-align:center; line-height:1.6; }

/* Buy button in hero */
.hero-actions .btn-buy {
  background:linear-gradient(135deg, #F9A825, #F57F17); color:#fff; border:none;
  box-shadow:0 4px 14px rgba(249,168,37,.4);
}
.hero-actions .btn-buy:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(249,168,37,.55); }

/* Access badge in header (days left) */
.access-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  background:var(--c-secondary-bg); color:var(--c-secondary); border-radius:14px; padding:4px 10px;
  cursor:pointer; border:none;
}
.access-badge.expiring { background:var(--c-accent-bg); color:var(--c-accent); }

/* Buy button on PIN gate */
.pin-buy-btn {
  margin-top:14px; width:100%; padding:13px 16px; border:none; border-radius:var(--c-radius);
  background:linear-gradient(135deg, #F9A825, #F57F17); color:#fff;
  font-size:15px; font-weight:700; cursor:pointer; transition:var(--c-transition);
  box-shadow:0 4px 14px rgba(249,168,37,.35);
}
.pin-buy-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(249,168,37,.5); }

@media (max-width:640px) {
  .cta-banner { padding:20px; }
  .cta-banner h3 { font-size:17px; }
  .pay-modal { padding:22px 18px; }
}

/* ===== Study mode overlay ===== */
.vocab-study-entry { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.study-mode-btn { padding:12px 22px; font-size:15px; }
.study-mode-tip { font-size:12.5px; color:var(--c-text-3); }
.study-overlay {
  position:fixed; inset:0; z-index:1300; display:none;
  align-items:center; justify-content:center; padding:16px;
  background:linear-gradient(160deg, #0d2242 0%, #123059 60%, #0d2242 100%);
}
.study-overlay.show { display:flex; }
.study-card {
  width:100%; max-width:560px; background:#fff; border-radius:22px;
  padding:22px 26px 20px; box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:payPop .3s cubic-bezier(.4,0,.2,1);
}
.study-topbar { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.study-counter { font-weight:700; color:var(--c-primary); font-size:15px; }
.study-autoplay { margin-left:auto; font-size:13px; color:var(--c-text-2); display:flex; align-items:center; gap:5px; cursor:pointer; }
.study-close { border:none; background:none; font-size:26px; color:var(--c-text-3); cursor:pointer; line-height:1; padding:2px 6px; }
.study-close:hover { color:var(--c-text); }
.study-body { text-align:center; padding:18px 6px 14px; min-height:190px; }
.study-uz { font-size:38px; font-weight:800; color:var(--c-primary); font-family:var(--font-uz); word-break:break-word; }
.study-zh { font-size:20px; font-weight:600; color:var(--c-text); margin-top:8px; }
.study-meta { margin-top:10px; }
.study-cat { font-size:12px; color:var(--c-text-3); margin-left:6px; }
.study-example { margin-top:16px; padding-top:14px; border-top:1px dashed var(--c-border); }
.study-ex-uz { font-size:16px; color:var(--c-secondary); font-weight:600; font-family:var(--font-uz); }
.study-ex-zh { font-size:14px; color:var(--c-text-3); margin-top:4px; }
.study-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:8px 0 14px; }
.study-nav { display:flex; gap:10px; justify-content:space-between; align-items:center; }
.study-learn { font-size:13px; padding:8px 14px; }
@media (max-width:640px) {
  .study-uz { font-size:30px; }
  .study-card { padding:18px 16px 14px; }
}

/* ===== Hero slogan "一天一元" ===== */
.hero-slogan {
  display:inline-block; margin:10px 0 16px; padding:8px 20px;
  border-radius:24px; font-size:16px; font-weight:700;
  background:linear-gradient(135deg, var(--c-accent-bg) 0%, var(--c-primary-bg) 100%);
  color:var(--c-primary); border:2px solid var(--c-primary-light);
  letter-spacing:0.5px;
}

/* ===== PIN gate slogan ===== */
.pin-gate-slogan {
  margin:8px 0 20px; padding:8px 16px; border-radius:8px;
  font-size:15px; font-weight:700; text-align:center;
  background:linear-gradient(135deg, var(--c-accent-bg), var(--c-primary-bg));
  color:var(--c-primary);
}

/* ===== Pay modal slogan ===== */
.pay-slogan {
  text-align:center; font-size:18px; font-weight:700; margin:8px 0 16px;
  color:var(--c-primary); padding:8px 0;
  border-top:2px solid var(--c-accent-bg); border-bottom:2px solid var(--c-accent-bg);
}

/* ===== Special letters deep-dive (Oʻ & Gʻ) ===== */
.special-letters-section { margin-top:28px; }
.special-letter-card {
  background:var(--c-bg); border-radius:var(--c-radius); padding:24px;
  margin-bottom:20px; border:1px solid var(--c-border); border-left:4px solid var(--c-primary);
  transition:var(--c-transition);
}
.special-letter-card:hover { box-shadow:var(--c-shadow-lg); }
.special-letter-header {
  display:flex; align-items:center; gap:16px; margin-bottom:16px;
}
.special-letter-glyph {
  font-size:48px; font-weight:800; color:var(--c-primary);
  font-family:var(--font-uz); line-height:1;
}
.special-letter-name { font-size:18px; font-weight:700; }
.special-letter-similar { font-size:13px; color:var(--c-text-2); }
.special-letter-audio { margin-left:auto; display:flex; gap:8px; }
.special-letter-detail-title { font-size:14px; font-weight:600; margin-bottom:6px; }
.special-letter-detail-text {
  font-size:14px; color:var(--c-text-2); line-height:1.7; margin:0;
}
.special-letter-meta { display:flex; gap:24px; margin-bottom:16px; flex-wrap:wrap; }
.special-letter-meta-col { flex:1; min-width:200px; }
.special-letter-meta-title { font-size:13px; font-weight:600; margin-bottom:4px; }
.special-letter-meta-text { font-size:13px; color:var(--c-text-2); margin:0; }
.special-letter-examples-title { font-size:13px; font-weight:600; margin-bottom:8px; }
.special-letter-examples { display:flex; gap:12px; flex-wrap:wrap; }
.sp-example {
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px;
  padding:10px 14px; display:flex; align-items:center; gap:10px;
  transition:var(--c-transition);
}
.sp-example:hover { border-color:var(--c-primary-light); box-shadow:var(--c-shadow); }
.sp-example-uz {
  font-size:16px; font-weight:700; font-family:var(--font-uz); color:var(--c-primary);
}
.sp-example-meta { font-size:12px; color:var(--c-text-2); }

/* ===== Floating Speed Control (global) ===== */
.speed-fab {
  position:fixed; bottom:20px; right:20px; z-index:1100;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
  color:#fff; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(13,71,161,.35);
  transition:var(--c-transition); font-family:var(--font-sans);
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.speed-fab:hover { transform:scale(1.08); box-shadow:0 6px 22px rgba(13,71,161,.45); }
.speed-fab:active { transform:scale(0.95); }
.speed-fab svg { width:20px; height:20px; margin-bottom:1px; }
.speed-fab .sf-label { font-size:10px; font-weight:700; line-height:1; }

.speed-panel {
  position:fixed; bottom:82px; right:20px; z-index:1100;
  background:var(--c-surface); border-radius:var(--c-radius);
  box-shadow:var(--c-shadow-lg); border:1px solid var(--c-border);
  padding:16px 18px; min-width:200px;
  display:none; flex-direction:column; gap:6px;
  animation:speedPanelIn .2s cubic-bezier(.4,0,.2,1);
}
.speed-panel.show { display:flex; }
@keyframes speedPanelIn {
  from { opacity:0; transform:translateY(10px) scale(.95); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.speed-panel-title {
  font-size:13px; font-weight:700; color:var(--c-text);
  margin-bottom:4px; display:flex; align-items:center; gap:6px;
}
.speed-panel-hint { font-size:11px; color:var(--c-text-3); margin-bottom:6px; }
.speed-option {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; border-radius:var(--c-radius-sm);
  border:1px solid var(--c-border); background:var(--c-surface-alt);
  color:var(--c-text); font-size:14px; font-weight:600; cursor:pointer;
  transition:var(--c-transition); font-family:var(--font-sans);
}
.speed-option:hover { border-color:var(--c-primary-light); background:var(--c-primary-bg); }
.speed-option:active { transform:scale(.97); }
.speed-option.active {
  background:var(--c-primary); color:#fff; border-color:var(--c-primary);
}
.speed-option .so-check { font-size:16px; opacity:0; }
.speed-option.active .so-check { opacity:1; }

/* Mobile adjustments */
@media (max-width: 480px) {
  .speed-fab { bottom:16px; right:16px; width:48px; height:48px; }
  .speed-fab svg { width:18px; height:18px; }
  .speed-panel { bottom:74px; right:16px; min-width:180px; padding:14px 16px; }
  .speed-option { padding:8px 12px; font-size:13px; }
}

/* ===== Mobile responsive fixes ===== */
@media (max-width: 480px) {
  /* Reduce content padding on small screens */
  #content { padding:20px 16px 50px; }
  /* Special letter card: stack header vertically */
  .special-letter-card { padding:18px 16px; }
  .special-letter-header { flex-wrap:wrap; gap:10px; }
  .special-letter-glyph { font-size:40px; }
  .special-letter-audio { margin-left:0; width:100%; justify-content:flex-start; }
  .special-letter-meta { gap:16px; }
  .special-letter-meta-col { min-width:100%; }
  .sp-example { padding:8px 12px; }
  .sp-example-uz { font-size:15px; }
  /* Grammar table: smaller font on mobile */
  .grammar-table th, .grammar-table td { padding:8px 10px; font-size:13px; }
  /* PIN gate: smaller padding */
  .pin-gate-card { padding:32px 24px 24px; }
}