/* HSK Mastery — landing product tour (datafa.st-inspired).
   CTA block + browser-framed, inner-scrolling replica of the real study room.
   Everything namespaced .tour- ; brand tokens come from styles.css :root. */

/* ---------- CTA block ---------- */
.tour-cta { max-width: 560px; margin: 0 auto 40px; text-align: center; }
.tour-capture { display: flex; flex-direction: column; gap: 12px; }
.tour-capture input {
  width: 100%; padding: 15px 18px; font: 16px/1.4 var(--serif-body); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 12px;
  text-align: center; outline: none; transition: border-color .2s, box-shadow .2s;
}
.tour-capture input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(168,50,42,0.12); }
.tour-capture input::placeholder { color: var(--ink-whisper); }
.tour-cta-btn { width: 100%; justify-content: center; }
.tour-trial { font-size: 13.5px; color: var(--ink-faded); margin: 12px 0 0; }
.tour-proof { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.tour-avatars { display: inline-flex; }
.tour-avatars i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-family: var(--han); font-style: normal;
  font-size: 15px; color: var(--paper-raised); background: var(--accent); border: 2px solid var(--paper);
  margin-left: -8px;
}
.tour-avatars i:first-child { margin-left: 0; }
.tour-avatars i:nth-child(2) { background: var(--hsk1); }
.tour-avatars i:nth-child(3) { background: var(--hsk3); }
.tour-avatars i:nth-child(4) { background: var(--hsk5); }
.tour-avatars i:nth-child(5) { background: var(--hsk6); }
.tour-proof-line { font-size: 14px; color: var(--ink-faded); }
.tour-capture-ok { margin: 12px 0 0; font-size: 14px; color: var(--correct); }

/* ---------- demo label ---------- */
.tour-label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-whisper); margin-bottom: 14px;
}
.tour-label-mark {
  font-family: var(--han); font-size: 13px; color: var(--paper-raised); background: var(--accent);
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- browser frame ---------- */
.tour-browser {
  border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden;
  background: var(--paper-raised); box-shadow: 0 24px 60px rgba(31,27,22,0.16);
}
.tour-chrome {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--paper-sunken); border-bottom: 1px solid var(--hairline);
}
.tour-dots { display: inline-flex; gap: 6px; }
.tour-dots i { width: 11px; height: 11px; border-radius: 50%; background: #DE5F57; }
.tour-dots i:nth-child(2) { background: #E0A93E; }
.tour-dots i:nth-child(3) { background: #5FA65C; }
.tour-urlbar {
  flex: 1; max-width: 420px; margin: 0 auto; padding: 5px 14px; font-size: 12.5px;
  color: var(--ink-faded); background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tour-chip { font-size: 11px; letter-spacing: 0.06em; color: var(--ink-whisper); white-space: nowrap; }
.tour-viewport {
  height: 640px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--paper); scrollbar-width: thin; scrollbar-color: var(--ink-whisper) transparent;
}
.tour-fallback { padding: 40px; text-align: center; color: var(--ink-whisper); }

/* ---------- inside the frame: app shell replica ---------- */
.tour-app { padding: 0 0 36px; }
.tour-appbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: 12px 26px; background: var(--paper-raised); border-bottom: 1px solid var(--hairline);
}
.tour-appbar .tour-seal {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--paper-raised);
  font-family: var(--han); font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
}
.tour-appbar .tour-brandname { font-family: var(--serif-display); font-weight: 600; font-size: 16px; }
.tour-appbar nav { margin-left: auto; display: flex; gap: 16px; font-size: 13px; color: var(--ink-faded); }
.tour-appbar nav span { cursor: default; }
.tour-appbar nav span:hover { color: var(--ink); }
.tour-member {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--correct); background: var(--correct-bg); padding: 3px 9px; border-radius: 999px;
}
.tour-inner { padding: 26px 26px 0; max-width: 860px; margin: 0 auto; }

/* dashboard head: greeting + ring + streak */
.tour-dashhead { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.tour-greet h3 { font-family: var(--serif-display); font-size: 30px; font-weight: 600; margin: 0 0 4px; }
.tour-greet p { font-size: 14px; color: var(--ink-faded); margin: 0; }
.tour-stats { display: flex; align-items: center; gap: 16px; }
.tour-ring { position: relative; width: 74px; height: 74px; }
.tour-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tour-ring .rbg { fill: none; stroke: var(--paper-sunken); stroke-width: 7; }
.tour-ring .rfg { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.tour-ring .rlabel {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--serif-display); font-weight: 600; font-size: 18px; line-height: 1;
}
.tour-ring .rlabel small { font-size: 10px; color: var(--ink-whisper); font-family: var(--serif-body); margin-top: 2px; }
.tour-streak {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13.5px;
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-faded);
}
.tour-streak .mark { font-family: var(--han); color: var(--accent); }

/* continue card */
.tour-continue {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 20px 0 26px; padding: 16px 20px;
  background: var(--accent); color: var(--paper-raised); border: 0; border-radius: 14px;
  font: 600 16px var(--serif-body); cursor: pointer; text-align: left;
  box-shadow: 0 10px 26px rgba(168,50,42,0.28); transition: transform .15s ease, box-shadow .15s ease;
}
.tour-continue:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(168,50,42,0.34); }
.tour-continue .ceyebrow { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; font-weight: 700; }
.tour-continue .arrow { margin-left: auto; font-size: 20px; }

/* level tabs + lesson list */
.tour-h {
  display: flex; align-items: baseline; gap: 10px; font-family: var(--serif-display);
  font-size: 19px; font-weight: 600; margin: 26px 0 12px;
}
.tour-h .hmark { font-family: var(--han); font-size: 14px; color: var(--accent); }
.tour-h small { font-family: var(--serif-body); font-size: 12.5px; font-weight: 400; color: var(--ink-whisper); margin-left: auto; }
.tour-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tour-tab {
  padding: 7px 14px; font: 600 13px var(--serif-body); color: var(--ink-faded);
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 999px;
  cursor: pointer; transition: all .15s ease;
}
.tour-tab:hover { border-color: var(--accent-2); color: var(--accent); }
.tour-tab.on { background: var(--accent); border-color: var(--accent); color: var(--paper-raised); }
.tour-lessons { display: flex; flex-direction: column; gap: 8px; }
.tour-lesson {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-align: left; width: 100%;
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 12px;
  cursor: pointer; font: inherit; color: inherit; transition: all .15s ease;
}
.tour-lesson:hover { border-color: var(--accent-2); transform: translateX(2px); }
.tour-lesson .lzh {
  font-family: var(--han); font-size: 15px; color: var(--accent); flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 10px; background: var(--wrong-bg);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.tour-lesson .lbody { min-width: 0; }
.tour-lesson .lt { display: block; font-weight: 600; font-size: 15px; }
.tour-lesson .lsub { display: block; font-size: 12.5px; color: var(--ink-whisper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-lesson .lplay {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--accent); background: var(--wrong-bg); padding: 4px 10px; border-radius: 999px;
}
.tour-lesson.locked { opacity: 0.62; cursor: default; }
.tour-lesson.locked:hover { border-color: var(--hairline); transform: none; }
.tour-lesson.locked .lplay { color: var(--ink-whisper); background: var(--paper-sunken); }

/* mastery overview bars */
.tour-levels { display: flex; flex-direction: column; gap: 7px; }
.tour-lv { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-faded); }
.tour-lv .bar { height: 8px; border-radius: 999px; background: var(--paper-sunken); overflow: hidden; }
.tour-lv .bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.tour-lv .pct { text-align: right; font-variant-numeric: tabular-nums; }

/* stat cards + sparkline */
.tour-statrow { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 10px; margin-top: 14px; }
.tour-stat { background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; }
.tour-stat .n { display: block; font-family: var(--serif-display); font-size: 24px; font-weight: 600; }
.tour-stat .l { display: block; font-size: 11.5px; color: var(--ink-whisper); margin-top: 2px; }
.tour-spark { width: 100%; height: 34px; margin-top: 6px; }

/* task list */
.tour-tasks { display: flex; flex-direction: column; gap: 8px; }
.tour-task {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px;
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 12px; color: var(--ink-faded);
}
.tour-task .tzh { font-family: var(--han); color: var(--accent); }
.tour-task .txp { margin-left: auto; font-size: 12px; color: var(--ink-whisper); font-variant-numeric: tabular-nums; }

/* ---------- lesson player view (inside frame) ---------- */
.tour-player { padding: 22px 26px 30px; max-width: 760px; margin: 0 auto; }
.tour-back {
  font: 600 13.5px var(--serif-body); color: var(--ink-faded); background: none; border: 0;
  cursor: pointer; padding: 6px 0; margin-bottom: 6px;
}
.tour-back:hover { color: var(--accent); }
.tour-ptitle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.tour-ptitle .pzh { font-family: var(--han); font-size: 26px; color: var(--ink); }
.tour-ptitle .pen { font-family: var(--serif-display); font-style: italic; font-size: 17px; color: var(--ink-faded); }
.tour-ptitle .plv { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.tour-md { font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.tour-md h4 { font-family: var(--serif-display); font-size: 20px; font-weight: 600; margin: 18px 0 8px; }
.tour-md p { margin: 0 0 12px; }
.tour-md ul, .tour-md ol { margin: 0 0 12px; padding-left: 22px; }
.tour-md li { margin: 4px 0; }
.tour-ex { background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; margin: 12px 0; }
.tour-ex .xzh { display: block; font-family: var(--han); font-size: 21px; line-height: 1.6; }
.tour-ex .xpy { display: block; font-family: var(--serif-display); font-style: italic; font-size: 14.5px; color: var(--ink-faded); margin-top: 3px; }
.tour-ex .xen { display: block; font-size: 14px; color: var(--ink-faded); margin-top: 3px; }
.tour-practice-h { margin-top: 26px; }
.tour-q { background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 14px; padding: 20px 22px; margin: 12px 0; }
.tour-q .qzh { font-family: var(--han); font-size: 22px; line-height: 1.7; margin: 0 0 4px; }
.tour-q .qpy { font-family: var(--serif-display); font-style: italic; font-size: 14px; color: var(--ink-whisper); margin: 0 0 14px; }
.tour-q .qchoices { display: flex; flex-wrap: wrap; gap: 9px; }
.tour-q .qc {
  padding: 9px 16px; font: 15px var(--han); background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer; transition: all .15s ease;
}
.tour-q .qc:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tour-q .qc.correct { background: var(--correct-bg); border-color: var(--correct); color: var(--correct); }
.tour-q .qc.wrong { background: var(--wrong-bg); border-color: var(--wrong); color: var(--wrong); }
.tour-q .qc:disabled { cursor: default; }
.tour-q .qres { display: none; margin-top: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.6;
  color: var(--ink-faded); background: var(--paper-sunken); border-left: 3px solid var(--correct); border-radius: 8px; }
.tour-q .qres.show { display: block; }
.tour-q .qres.wrong { border-left-color: var(--wrong); }
.tour-q .qres b { color: var(--ink); }
.tour-done {
  text-align: center; padding: 26px 20px; margin-top: 20px; background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 14px;
}
.tour-done .dzh { font-family: var(--han); font-size: 30px; color: var(--accent); display: block; margin-bottom: 8px; }
.tour-done p { font-size: 15px; color: var(--ink-faded); margin: 0 0 16px; }
.tour-done .btn { justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .tour-viewport { height: 70vh; min-height: 480px; }
  .tour-chip { display: none; }
  .tour-inner, .tour-player { padding-left: 16px; padding-right: 16px; }
  .tour-appbar { padding: 10px 16px; }
  .tour-appbar nav span:nth-child(n+3) { display: none; }
  .tour-statrow { grid-template-columns: repeat(2, 1fr); }
  .tour-stat.spark { grid-column: span 2; }
  .tour-greet h3 { font-size: 24px; }
}