/* QLSO — Launcher (Master Handoff §12). Token tu shared/tokens.css. */

.launcher-body { background: var(--pa-page); color: var(--pa-ink); }

.wrap { max-width: 980px; margin: 0 auto; padding: 34px 24px 48px; }

/* ── Tieu de ────────────────────────────────────────────────────────────── */
.lhead { margin-bottom: 26px; }
.lbrand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lmark {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-brand);
  background: var(--pa-brand); color: var(--pa-on-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: inset 0 0 0 1px var(--pa-brand-hairline);
}
.lmark b { font-size: var(--t-floor); font-weight: 750; letter-spacing: .06em; line-height: 1; }
.lmark i { font-style: normal; width: 20px; height: 2px; border-radius: 1px; background: var(--pa-digital); }
.ltxt h1 { margin: 0; font-size: var(--t-page); font-weight: var(--w-page); letter-spacing: -.011em; }
.ltxt p { margin: 2px 0 0; font-size: var(--t-meta); font-weight: var(--w-meta); color: var(--pa-muted); }
.lintro { margin: 0; max-width: 62ch; color: var(--pa-muted); }

/* ── The prototype ──────────────────────────────────────────────────────── */
.cards { display: grid; gap: var(--gap); margin-bottom: 30px; }
.card {
  display: flex; align-items: flex-start; gap: 15px; width: 100%; text-align: left;
  padding: 18px 20px; border: 0; border-radius: var(--r-card); cursor: pointer;
  background: var(--pa-surface); color: var(--pa-ink);
  box-shadow: var(--elev-card), inset 0 0 0 1px var(--pa-border);
  font-family: inherit;
}
.card:hover { box-shadow: var(--elev-card-hover), inset 0 0 0 1px var(--pa-digital-line); }
.card-icon {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-inner);
  display: flex; align-items: center; justify-content: center;
}
.card-pa .card-icon { background: var(--pa-control-plane); color: var(--pa-on-dark); }
.card-ta .card-icon { background: var(--ta-civic); color: var(--ta-on-dark); }
.card-mob .card-icon { background: var(--mob-community); color: var(--mob-on-dark); }
.card-body { min-width: 0; flex: 1; }
.card-title { display: block; font-size: var(--t-sect); font-weight: var(--w-sect); }
.card-sub {
  display: block; margin-top: 1px; font-size: var(--t-micro);
  font-weight: var(--w-micro); color: var(--pa-muted);
}
.card-desc { display: block; margin-top: 7px; font-size: var(--t-meta); color: var(--pa-ink-2); }
.card-go { color: var(--pa-muted); align-self: center; }

/* ── Kich ban demo ──────────────────────────────────────────────────────── */
.scnwrap {
  background: var(--pa-surface); border-radius: var(--r-card); padding: 18px 22px 20px;
  box-shadow: var(--elev-card), inset 0 0 0 1px var(--pa-border);
}
.scnwrap h2 { margin: 0 0 3px; font-size: var(--t-sect); font-weight: var(--w-sect); }
.scn-hint { margin: 0 0 14px; font-size: var(--t-meta); color: var(--pa-muted); }
.scns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.scn {
  display: block; width: 100%; text-align: left; padding: 12px 14px; cursor: pointer;
  border: 0; border-radius: var(--r-inner); background: var(--pa-surface-sunken);
  color: var(--pa-ink); font-family: inherit;
  box-shadow: inset 0 0 0 1px var(--pa-border);
}
.scn:hover { background: var(--pa-digital-soft); box-shadow: inset 0 0 0 1px var(--pa-digital-line); }
.scn-label { display: block; font-size: var(--t-meta); font-weight: 640; }
.scn-desc { display: block; margin-top: 3px; font-size: var(--t-micro); font-weight: 500; color: var(--pa-muted); }

.reset {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--r-btn); cursor: pointer; font-family: inherit;
  font-size: var(--t-meta); font-weight: 620;
  color: var(--pa-digital); background: var(--pa-digital-soft);
  box-shadow: inset 0 0 0 1px var(--pa-digital-line);
}
.reset:hover { background: var(--pa-digital-hover); }
.scn-state { margin: 12px 0 0; font-size: var(--t-micro); font-weight: var(--w-micro); color: var(--pa-muted); }

.lfoot { margin-top: 24px; font-size: var(--t-micro); font-weight: var(--w-micro); color: var(--pa-muted); }
.lfoot p { margin: 0; }

@media (max-width: 720px) {
  .scns { grid-template-columns: 1fr; }
  .wrap { padding: 24px 16px 36px; }
}

.rv-link {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
  min-height: 36px; padding: 0 14px; border-radius: var(--r-btn);
  color: var(--pa-ink-2); background: var(--pa-surface-sunken); text-decoration: none;
  font-size: var(--t-meta); font-weight: 620;
  box-shadow: inset 0 0 0 1px var(--pa-border);
}
.rv-link:hover { background: var(--pa-digital-soft); color: var(--pa-digital); }

.scut-h { margin: 16px 0 8px; font-size: var(--t-meta); font-weight: 700; }
.scuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 6px; }
.scut {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; text-align: left;
  border: 0; border-radius: var(--r-inner); cursor: pointer; font-family: inherit;
  background: var(--pa-surface-sunken); color: var(--pa-ink);
  box-shadow: inset 0 0 0 1px var(--pa-border);
}
.scut:hover { background: var(--pa-digital-soft); box-shadow: inset 0 0 0 1px var(--pa-digital-line); }
.scut-id { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-floor); font-weight: 700; color: var(--pa-digital); }
.scut-t { font-size: var(--t-micro); font-weight: var(--w-micro); color: var(--pa-ink-2); }