html[data-v7=true] body{margin:0;font-family:"IBM Plex Sans Thai Looped",sans-serif} .v7-hub{padding-top:24px;padding-bottom:110px}.v7-hub h1{margin:12px 0}.v7-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:24px 0}.v7-cards .kt-mode{min-height:120px}.v7-art{display:block;overflow:hidden;border-radius:24px}.v7-art img{display:block;width:100%;height:auto}.v7-hub footer{margin-top:30px}.v7-hub p{font-size:16px}html[data-v7=true] .family-app>header{display:none} .kt-focus-back{margin:12px;min-height:44px}
.v7-cards .kt-mode__text strong{color:#102f57;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.kt-seg a{white-space:nowrap}@media(min-width:768px) and (max-width:1023px){.kt-seg{gap:4px}.kt-seg a{gap:4px;padding:0 8px 0 4px;font-size:14px}}
.v7-cards .kt-mode{flex-wrap:nowrap!important}.v7-cards .practice-reward-label{position:relative;flex-basis:auto;width:100%;color:#102f57;opacity:1}@media(max-width:767px){.v7-cards .kt-mode{display:grid;grid-template-columns:84px minmax(0,1fr)}.v7-cards .practice-reward-label{grid-column:1/-1}}

/* ---------- R3: full hubs + live 3D stage (Claude Code, 2026-10-21) ---------- */
[data-mode="me"] { --m-1: #C9A2FF; --m-2: #7B4BE0; --m-3: #43248F; }
.v7-cards .kt-mode[data-mode] .kt-mode__text strong { color: #FFFFFF; text-shadow: 0 4px 0 var(--m-3); }
.v7-cards .kt-mode[data-mode] .kt-mode__text span { color: #FFFFFF; }
.v7-alert { padding: 10px 14px; border-radius: 14px; background: #FFE8EC; color: #8A1230; font-weight: 600; }
.v7-home .v7-stage { display: grid; gap: 0; overflow: hidden; margin-top: 8px; }
.v7-stage__copy { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; color: #FFFFFF; }
.v7-stage__copy .kt-logo img { width: 76px; height: 76px; }
.v7-stage__copy .kt-title { font-size: clamp(30px, 6vw, 52px); }
.v7-stage__cta { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.v7-stage__cta .kt-btn { flex: 1 1 200px; }
.v7-stage__links { display: flex; flex-wrap: wrap; gap: 10px; }
.v7-stage__avatar { position: relative; height: 320px; order: -1; background: linear-gradient(180deg, #2F8CEB, #B9DEFF 70%, #E8F4FF); }
.v7-stage__note { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 36, 99, .72); color: #FFFFFF; font: 600 13px/1.2 var(--kt-ui); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 63, .7); }
@media (min-width: 768px) { .v7-stage__avatar { height: 420px; } .v7-stage__copy { padding: 28px 32px; } }
@media (min-width: 1024px) { .v7-home .v7-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; } .v7-stage__avatar { order: 0; height: auto; min-height: 520px; } .v7-stage__copy { justify-content: center; padding: 36px 40px; } .v7-stage__cta .kt-btn { flex: 0 0 auto; } }
.v7-growth { padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .94); color: var(--kt-ink); }
.v7-today { margin-top: 28px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.v7-today > * { margin: 0; }
.v7-tiles { --kt-min: 230px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) !important; gap: 14px !important; margin: 0 !important; }
.v7-primary { margin: 0 !important; }
.v7-primary--learn { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important; }
@media (max-width: 767px) { .v7-primary--learn { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.kt-subject-card.is-locked > img, .kt-game.is-locked > img, .kt-tile.is-locked > img, .kt-arena.is-locked > img { filter: grayscale(.75) brightness(1.05); }
.v7-hub .kt-arena .kt-btn { margin-top: auto; }
.v7-me { display: grid; overflow: hidden; margin-top: 8px; }
.v7-me__avatar { position: relative; height: 360px; }
.v7-me__info { display: flex; flex-direction: column; gap: 14px; padding: 22px; color: #FFFFFF; }
@media (min-width: 768px) { .v7-me { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } .v7-me__avatar { height: auto; min-height: 440px; } .v7-me__info { justify-content: center; padding: 30px; } }
.v7-supporters { display: grid; gap: 16px; align-items: center; margin-top: 40px; padding: 18px; }
.v7-supporters__img { width: 100%; border-radius: 14px; }
.v7-supporters__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (min-width: 768px) { .v7-supporters { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); padding: 22px 26px; } }
.v7-hub .kt-footer, .kt-footer { margin-top: 48px; }