/* kl2/sc3/sc3.css — khoi «Xem trong khong gian» trang SP-SC3 (sinh tu mockup/space-sc3/index.html bang render/build_web.py — sua o do, khong sua tay) */
.kl-sc3 { --bg: #000; --card: #121212; --card2: #171717; --line: #2a2a2a; --line2: #3a3a3a; --fg: #f2f2f2; --fg2: #d6d6d6; --muted: #a8a8a8;
  --gold: #ecae20; --gold2: #f5c24c; --f-ui: inherit; --f-data: "IBM Plex Mono", ui-monospace, Consolas, monospace; color: var(--fg); font-size: 15px; line-height: 1.55; }
.kl-sc3 *, .kl-sc3 *::before, .kl-sc3 *::after { box-sizing: border-box; }
.kl-sc3 .ks-row { margin: 0; }
.kl-sc3 .ks-head { display: grid; gap: 4px; margin-bottom: 14px; }
.kl-sc3 .ks-head p { margin: 0; color: var(--fg2); font-size: 14px; max-width: 70ch; }
.kl-sc3 .ks-stage-card { display: grid; gap: 14px; }
.kl-sc3 .ks-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #050505 center / cover no-repeat; border: 1px solid var(--line); }
.kl-sc3 .ks-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kl-sc3 #ks-ov { pointer-events: none; }
.kl-sc3 .ks-stage.ks-pick #ks-ov { pointer-events: auto; cursor: crosshair; }
.kl-sc3 .ks-hud { position: absolute; pointer-events: none; font-size: 13px; }
.kl-sc3 .ks-hud-name { display: inline-grid; gap: 1px; padding: 6px 12px; border-radius: 12px; background: rgba(10,10,10,.62); border: 1px solid var(--line2); backdrop-filter: blur(6px); }
.kl-sc3 .ks-hud-name b { font-size: clamp(14px, 2vw, 19px); font-weight: 700; }
.kl-sc3 .ks-hud-name span { font-family: var(--f-data); font-size: 12px; color: var(--fg2); }
.kl-sc3 .ks-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(10,10,10,.68); border: 1px solid var(--line2); backdrop-filter: blur(6px); font-weight: 600; font-size: 13px; }
.kl-sc3 .ks-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, #ffb060); box-shadow: 0 0 10px var(--dot, #ffb060); }
.kl-sc3 .ks-hud-b { left: 12px; right: 12px; bottom: 10px; display: grid; gap: 6px; justify-items: start; }
.kl-sc3 .ks-hud-row { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-sc3 .ks-hud-stats { display: contents; }
.kl-sc3 .ks-hud-stats .ks-pill { font-family: var(--f-data); font-weight: 500; font-size: 12px; padding: 4px 10px; }
.kl-sc3 .ks-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kl-sc3 .ks-loading[hidden] { display: none !important; }
@media (max-width: 560px) { .kl-sc3 .ks-hud-b { left: 6px; right: 6px; bottom: 6px; gap: 4px; } .kl-sc3 .ks-hud-stats, .kl-sc3 .ks-hud-name span { display: none; } .kl-sc3 .ks-hud-name { padding: 3px 8px; border-radius: 8px; } .kl-sc3 .ks-hud-name b { font-size: 12.5px; } .kl-sc3 .ks-hud-row .ks-pill { font-size: 11px; padding: 3px 8px; gap: 6px; } .kl-sc3 .ks-pill i { width: 8px; height: 8px; } }
.kl-sc3 .ks-controls { display: grid; gap: 12px; grid-template-columns: 1fr; }
.kl-sc3 .ks-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-sc3 .ks-row > .ks-lab { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 118px; }
.kl-sc3 .ks-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-sc3 button { font: inherit; color: inherit; cursor: pointer; }
.kl-sc3 .ks-chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
.kl-sc3 .ks-chip:hover { border-color: var(--gold); }
.kl-sc3 .ks-chip[aria-pressed="true"], .kl-sc3 .ks-chip[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #111; }
.kl-sc3 .ks-chip:disabled { opacity: .45; cursor: default; }
.kl-sc3 .ks-chip:focus-visible, .kl-sc3 .ks-act:focus-visible, .kl-sc3 .copy:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.kl-sc3 .ks-chip small { font-family: var(--f-data); font-weight: 500; opacity: .75; }
.kl-sc3 .ks-act { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-weight: 700; font-size: 13px; }
.kl-sc3 .ks-act[aria-pressed="true"] { background: rgba(236,174,32,.14); }
.kl-sc3 .ks-act:disabled { opacity: .45; cursor: default; }
.kl-sc3 .ks-note { font-size: 12.5px; color: var(--muted); margin: 0; }
.kl-sc3 .ks-tn { font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .kl-sc3 .ks-controls { grid-template-columns: 1fr auto; align-items: start; } }
@media (prefers-reduced-motion: reduce) { .kl-sc3 .ks-chip { transition: none; } }