/* Trang kích hoạt. Layout: a night band carries the title and a three-step bar; the working card rises over its lower edge.
   Built for phones first (people scan the App's QR code with one), one column at every width. */
:root {
  --night: #0E1522;
  --night-line: rgba(180, 190, 208, .14);
  --on-night: #EEF2F8;
  --on-night-2: #A9B4C7;
  --accent-night: #5EA0DE;
  --ok-night: #3DBEA8;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
}

.kh-main { padding-block: 0 80px; background: var(--desk); }
.kh-main .wrap { display: block; max-width: none; }
.kh-wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Night band ---------- */
.kh-hero {
  position: relative; overflow: hidden; isolation: isolate; padding-block: 34px 104px; color: var(--on-night-2);
  background: linear-gradient(180deg, var(--rail) 0%, var(--night) 100%);
}
.kh-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 10%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 10%, #000 25%, transparent 75%);
}
.kh-hero::after {
  content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; left: 50%; top: -360px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 90, 153, .55), rgba(26, 90, 153, 0));
}
.kh-hero .kh-wrap { display: grid; gap: 14px; }
.kh-hero > .kh-wrap > * { animation: rise .6s var(--ease) both; }
.kh-hero > .kh-wrap > :nth-child(2) { animation-delay: .06s; }
.kh-hero > .kh-wrap > :nth-child(3) { animation-delay: .12s; }
.kh-hero > .kh-wrap > :nth-child(4) { animation-delay: .18s; }
.kh-pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(94, 160, 222, .35); background: rgba(94, 160, 222, .1); color: var(--on-night); font-size: 13px; font-weight: 600;
}
.kh-pill .ic { color: var(--accent-night); }
.kh-hero h1 { font-family: var(--display); font-size: clamp(28px, 5vw, 40px); line-height: 1.12; letter-spacing: -.02em; color: var(--on-night); }
.kh-hero p { max-width: 58ch; font-size: 16.5px; }

/* Three steps: done, current, next. */
.stepper { list-style: none; padding: 0; margin-top: 8px; display: flex; gap: 6px; }
.stepper li { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; color: var(--on-night-2); font-size: 13.5px; }
.stepper .bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.stepper .bar::after { content: ""; display: block; height: 100%; width: 0; background: var(--accent-night); transition: width .5s var(--ease); }
.stepper .label { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper .dot { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .3); font-size: 11px; font-weight: 700; }
.stepper .is-current { color: var(--on-night); }
.stepper .is-current .bar::after { width: 45%; }
.stepper .is-current .dot { border-color: var(--accent-night); background: var(--accent-night); color: var(--night); }
.stepper .is-done { color: var(--on-night); }
.stepper .is-done .bar::after { width: 100%; background: var(--ok-night); }
.stepper .is-done .dot { border-color: var(--ok-night); background: var(--ok-night); color: var(--night); }
/* Phones: the three bars and numbers stay in a row, the current step is named once below them. */
@media (max-width: 420px) {
  .stepper { position: relative; }
  .stepper:has(.is-current) { padding-bottom: 28px; }
  .stepper .label span:last-child { display: none; }
  .stepper .is-current .label span:last-child { display: block; position: absolute; left: 0; right: 0; bottom: 0; line-height: 20px; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Working area ---------- */
.kh-body { position: relative; z-index: 1; display: grid; gap: 18px; margin-top: -76px; }
.kh-card {
  display: grid; gap: 22px; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 24px 60px rgba(16, 24, 40, .16); animation: rise .6s .12s var(--ease) both;
}
@media (max-width: 520px) { .kh-card { padding: 20px; } }
.kh-card h2 { font-size: 21px; }
.kh-card-head { display: flex; gap: 14px; align-items: flex-start; }
.kh-card-head > div { display: grid; gap: 4px; min-width: 0; }
.kh-card-head p { color: var(--ink-2); }

.kh-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.kh-step + .kh-step { padding-top: 22px; border-top: 1px solid var(--line); }
.kh-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-tint);
  color: var(--accent-2); font-weight: 700; transition: background-color .3s, border-color .3s, color .3s;
}
.kh-step.is-ok .kh-num { background: var(--sugg); border-color: var(--sugg); color: var(--paper); }
.kh-step-body { display: grid; gap: 10px; min-width: 0; }
.kh-step-body > label, .kh-step-title { font-weight: 600; font-size: 16px; }
.kh-hint { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 14px; }
.kh-hint .ic { color: var(--accent); margin-top: 2px; }

.code-input { min-height: 84px; font: 15px/1.5 var(--font-mono); letter-spacing: .03em; word-break: break-all; }
.code-preview {
  display: grid; grid-template-columns: repeat(4, max-content); gap: 4px 14px; justify-content: start; padding: 12px 14px;
  border: 1px solid var(--sugg-line); border-radius: var(--r); background: var(--sugg-tint); color: var(--sugg-ink); font: 15px/1.5 var(--font-mono);
}
.code-preview .prefix { grid-column: 1 / -1; font-size: 12.5px; opacity: .8; }
@media (min-width: 560px) { .code-preview { grid-template-columns: repeat(8, max-content); } }

.dropzone {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r2);
  background: var(--paper-2); color: var(--ink-2); font-size: 14.5px; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone .ic { color: var(--accent); }
.dropzone b { color: var(--accent-2); }

.key-wrap { position: relative; }
.key-input { width: 100%; min-height: 54px; padding-right: 46px; font: 600 19px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.key-state { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: none; }
.key-wrap.is-ok .key-state-ok { display: block; color: var(--sugg); }
.key-wrap.is-bad .key-state-bad { display: block; color: var(--err); }
.key-wrap.is-ok .key-input { border-color: var(--sugg); }

.btn-xl { min-height: 54px; padding: 0 24px; font-size: 17px; border-radius: 10px; }
.kh-submit { display: grid; gap: 10px; }
.kh-submit .btn { width: 100%; }
.kh-submit .small { text-align: center; }

.where-code { border-top: 1px solid var(--line); padding-top: 16px; }
.where-code summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14.5px; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.where-code summary::-webkit-details-marker { display: none; }
.where-code img { margin-top: 12px; max-width: 420px; width: 100%; border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--shadow-card); }

/* ---------- Results ---------- */
.done-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sugg-tint); color: var(--sugg); }
.done-mark svg { width: 34px; height: 34px; }
.done-mark path { stroke-dasharray: 30; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .done-mark path { animation: draw .6s .25s var(--ease) both; } }
:root[data-motion="on"] .done-mark path { animation: draw .6s .25s var(--ease) both; }
@keyframes draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.result-top { display: grid; justify-items: center; gap: 10px; text-align: center; }
.result-top h2 { font-size: 24px; }
.result-top p { color: var(--ink-2); max-width: 46ch; }
.file-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--r2); background: var(--paper-2);
}
.file-icon {
  grid-row: span 2; display: grid; place-items: center; width: 46px; height: 54px; border-radius: 6px; background: var(--accent); color: var(--paper);
  font: 700 10px/1 var(--font-ui); letter-spacing: .04em; box-shadow: 0 8px 18px rgba(26, 90, 153, .25);
}
.file-icon .ic { width: 26px; height: 26px; stroke-width: 2; }
.file-card b { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 14px; }
.file-card > span:not(.file-icon) { color: var(--ink-2); font-size: 14px; }
.result-actions { display: grid; gap: 10px; }
@media (min-width: 560px) { .result-actions { grid-template-columns: 1fr 1fr; } }
.code-reveal summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14.5px; list-style: none; }
.code-reveal summary::-webkit-details-marker { display: none; }
.code-reveal .codebox { margin-top: 10px; }
.next-steps { list-style: none; padding: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .next-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.next-steps li { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); font-size: 14px; color: var(--ink-2); }
.next-steps .ic { color: var(--accent); }
.next-steps b { color: var(--ink); font-size: 15px; }

.transfer-art { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; border-radius: var(--r2); background: var(--paper-2); }
.transfer-art .dev { display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.transfer-art .dev span:first-child { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.transfer-art .dev.is-new span:first-child { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.transfer-art .arrow { color: var(--accent); }

.switch { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--line); }
.switch button {
  flex: 1 1 0; min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 600 14.5px/1.2 var(--font-ui); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s;
}
.switch button[aria-selected="true"] { background: var(--paper); color: var(--accent-2); box-shadow: var(--shadow-card); }
.switch-panel { display: grid; gap: 14px; }
.js-switch .switch-panel[hidden] { display: none; }
.js-switch .switch-panel:not([hidden]) { animation: rise .35s var(--ease) both; }

/* ---------- Other tasks ---------- */
.kh-tasks { display: grid; gap: 12px; }
@media (min-width: 640px) { .kh-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kh-task {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; align-content: start; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--r2); background: var(--paper); color: var(--ink); text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.kh-task:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: 0 12px 28px rgba(16, 24, 40, .08); color: var(--ink); }
.kh-task .icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); }
.kh-task b { font-size: 15.5px; }
.kh-task span:not(.icon):not(.go) { grid-column: 2; font-size: 14px; color: var(--ink-2); }
.kh-task .go { grid-row: 1 / span 2; grid-column: 3; color: var(--ink-3); }
.kh-section-title { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.kh-demo-note { font-size: 14px; }