:root {
  --ink: #102a43;
  --muted: #627d98;
  --paper: #f5f7fb;
  --card: #ffffff;
  --line: #d9e2ec;
  --blue: #1769e0;
  --blue-dark: #0f4ca8;
  --mint: #dff7ee;
  --mint-ink: #146c52;
  --yellow: #fff4c2;
  --yellow-ink: #765900;
  --red: #ffe3e3;
  --red-ink: #a32929;
  --shadow: 0 16px 40px rgba(16, 42, 67, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
body:has(.focus-page) { background: #102a43; overflow: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #86b7ff; outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(16,42,67,.96); color: white; padding: 14px max(20px, calc((100% - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 8px 24px rgba(16,42,67,.12); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; }
.brand strong { display: block; font-size: 1rem; }
.brand small { display: block; margin-top: 2px; color: rgba(255,255,255,.68); font-size: .66rem; font-weight: 600; letter-spacing: .01em; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #5dd6ad; color: var(--ink); font-weight: 900; }
.topbar nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.language-control { margin: 0; }
.language-control select { border: 1px solid rgba(255,255,255,.35); border-radius: 10px; padding: 9px 10px; background: var(--ink); color: white; }
.track-control { margin: 0; }
.track-control select { border: 1px solid rgba(255,255,255,.35); border-radius: 10px; padding: 9px 10px; background: var(--ink); color: white; max-width: 150px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nav-button, .ghost-button { border: 1px solid rgba(255,255,255,.35); color: white; background: transparent; border-radius: 10px; padding: 9px 13px; }
.nav-button:hover, .ghost-button:hover { background: rgba(255,255,255,.12); }
.page { max-width: 1180px; margin: 0 auto; padding: 40px 20px 70px; }
.focus-page { min-height: 100vh; padding: 0; background: radial-gradient(circle at 50% 0%, #264d72 0, #102a43 52%, #081827 100%); color: white; overflow: hidden; }
.focus-simulation { width: 100%; height: 100vh; display: grid; justify-items: center; align-content: center; gap: 0; }
.focus-progress { position: fixed; top: 10px; z-index: 5; width: min(calc(100% - 28px), 510px); display: flex; justify-content: space-between; padding: 0 7px; color: rgba(255,255,255,.72); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.focus-simulation .device-frame { width: min(100vw, 540px); height: 100vh; margin: 0; padding: 12px; border-radius: 28px; display: flex; flex-direction: column; }
.focus-simulation .device-screen { min-height: 0; flex: 1; }
.focus-simulation .device-screen { overflow-y: auto; }
.focus-simulation .device-screen .platform-simulator { min-height: 100%; display: flex; flex-direction: column; }
.focus-simulation .platform-simulator > .step-screen-body { flex: 1 1 auto; min-height: 0; }
.focus-simulation .platform-simulator > .roblox-content,
.focus-simulation .platform-simulator > .youtube-content,
.focus-simulation .platform-simulator > .tiktok-video,
.focus-simulation .platform-simulator > .snap-chat,
.focus-simulation .platform-simulator > .wa-chat-list,
.focus-simulation .platform-simulator > .ig-post,
.focus-simulation .platform-simulator > .fb-post { flex: 1 1 auto; min-height: 0; }
.focus-simulation .platform-simulator > .mobile-interaction { margin-top: auto; }
.hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: stretch; margin-bottom: 30px; }
.hero-copy, .progress-card, .panel, .platform-card, .lesson-card, .admin-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.hero-copy { padding: clamp(26px, 5vw, 54px); background: linear-gradient(135deg, #ffffff 25%, #e8f3ff); }
.school-hero { position: relative; }
.school-hero .hero-copy { background: linear-gradient(135deg, #ffffff 8%, #e7f5ff 62%, #dff7ee); }
.school-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: -4px 0 34px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); box-shadow: 0 8px 22px rgba(16,42,67,.04); }
.school-proof div { display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 13px 15px; background: #fff; }
.school-proof strong { color: #1769e0; font-size: .7rem; letter-spacing: .08em; }
.school-proof span { color: #36566f; font-size: .78rem; line-height: 1.25; font-weight: 750; }
.package-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.package-meta span { padding: 7px 10px; border: 1px solid rgba(23,105,224,.18); border-radius: 99px; background: rgba(255,255,255,.75); color: var(--blue-dark); font-size: .74rem; font-weight: 800; }
.eyebrow { color: var(--blue-dark); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.3rem, 6vw, 5rem); line-height: .97; letter-spacing: -.065em; margin: 13px 0 18px; max-width: 720px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.04em; margin-bottom: 9px; }
h3 { margin-bottom: 8px; }
.lede { font-size: 1.15rem; color: var(--muted); line-height: 1.65; max-width: 650px; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.primary-button, .secondary-button, .danger-button { border: 0; border-radius: 11px; padding: 12px 16px; font-weight: 750; }
.primary-button { background: var(--blue); color: white; }
.primary-button:hover { background: var(--blue-dark); }
.secondary-button { background: #eaf2ff; color: var(--blue-dark); }
.danger-button { background: var(--red); color: var(--red-ink); }
.progress-card { padding: 25px; display: flex; flex-direction: column; justify-content: space-between; }
.progress-number { font-size: 3.6rem; font-weight: 850; letter-spacing: -.08em; margin: 12px 0 4px; }
.progress-bar { height: 11px; border-radius: 99px; background: #e7eef5; overflow: hidden; margin: 18px 0 8px; }
.progress-fill { height: 100%; background: #52c89d; border-radius: inherit; transition: width .3s ease; }
.reward-summary { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: baseline; margin-top: 15px; color: #765900; }
.reward-summary strong { font-size: 1.35rem; }
.reward-summary span { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; margin-top: 3px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.badge { padding: 6px 8px; border: 1px solid #d9e2ec; border-radius: 99px; color: #8291a3; font-size: .68rem; font-weight: 750; }
.badge.earned { border-color: #9bdfc5; background: #dff7ee; color: #146c52; }
.muted { color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 32px 0 15px; }
.review-page { max-width: 980px; margin: 0 auto; padding-bottom: 48px; }
.review-page .section-heading { align-items: start; }
.review-page .final-grade-card { min-width: 170px; margin-top: 0; }
.review-list { display: grid; gap: 12px; margin: 24px 0; }
.review-card { padding: 16px 18px; border: 1px solid var(--line); border-left: 5px solid #d9e2ec; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(16,42,67,.05); }
.review-card.review-safe { border-left-color: #52c89d; }
.review-card.review-missed { border-left-color: #edb84d; }
.review-card-top { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .78rem; }
.review-card h2 { margin: 8px 0 5px; font-size: 1.08rem; letter-spacing: -.02em; }
.review-card p { margin-bottom: 6px; color: var(--muted); line-height: 1.45; font-size: .9rem; }
.review-card .review-context { color: var(--ink); }
.review-number { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #edf3f8; color: var(--blue-dark); font-size: .72rem; font-weight: 800; }
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.platform-card { padding: 18px; min-height: 166px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s ease, border-color .2s ease; }
.platform-card:hover { transform: translateY(-3px); border-color: #8fbaf2; }
.platform-card h3 { margin: 12px 0 5px; }
.platform-card p { color: var(--muted); line-height: 1.45; margin-bottom: 0; font-size: .94rem; }
.platform-chip { align-self: flex-start; padding: 6px 9px; background: #eff5fb; border-radius: 8px; color: var(--blue-dark); font-size: .75rem; font-weight: 800; }
.platform-card.completed .platform-chip { background: var(--mint); color: var(--mint-ink); }
.lesson-route { margin-top: 38px; }
.route-heading { margin-bottom: 15px; }
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.route-grid article { min-height: 175px; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(16,42,67,.05); }
.route-number { display: inline-grid; place-items: center; width: 35px; height: 35px; margin-bottom: 18px; border-radius: 10px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 850; }
.route-grid h3 { margin-bottom: 7px; }
.route-grid p, .teacher-strip p { margin-bottom: 0; color: var(--muted); line-height: 1.55; font-size: .92rem; }
.teacher-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 28px 0 42px; padding: 24px 26px; border: 1px solid #bfe4d5; border-radius: 19px; background: linear-gradient(115deg, #effbf6, #fff); }
.teacher-strip h2 { margin: 8px 0 7px; font-size: clamp(1.35rem, 3vw, 1.85rem); }
.teacher-strip .secondary-button { flex: 0 0 auto; }
.package-page { max-width: 1040px; margin: 0 auto; padding-bottom: 50px; }
.package-hero { padding: clamp(28px, 5vw, 52px); border: 1px solid #cfe0ed; border-radius: 24px; background: linear-gradient(135deg, #102a43 0%, #1769e0 58%, #52c89d 150%); color: white; box-shadow: 0 18px 40px rgba(16,42,67,.16); }
.package-hero .eyebrow { color: #b9f0de; }
.package-hero .lede { color: rgba(255,255,255,.78); }
.package-hero .package-meta span { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: white; }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 22px 0; }
.package-file { display: grid; align-content: start; gap: 8px; min-height: 170px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: white; color: var(--ink); box-shadow: 0 9px 24px rgba(16,42,67,.05); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.package-file:hover { transform: translateY(-3px); border-color: #8fbaf2; box-shadow: 0 14px 28px rgba(16,42,67,.1); }
.package-file-number { color: #1769e0; font-size: .7rem; font-weight: 850; letter-spacing: .1em; }
.package-file strong { font-size: 1rem; }
.package-file > span:not(.package-file-number):not(.package-file-link) { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.package-file-link { margin-top: auto; color: #1769e0; font-size: .76rem; font-weight: 800; }
.package-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }
.package-html-link { text-decoration: none; }
.layout-two { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.panel { padding: 25px; }
.lesson-card { padding: 25px; margin-top: 18px; }
.simulation-head { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.scenario-label { color: var(--muted); font-size: .9rem; }
.fake-screen { border: 1px solid var(--line); border-radius: 17px; margin: 20px 0; overflow: hidden; background: #fbfcfe; }
.fake-top { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 16px; display: flex; justify-content: space-between; gap: 10px; font-weight: 750; }
.fake-content { padding: 22px; }
.fake-avatar { width: 44px; height: 44px; border-radius: 14px; background: #cfe3ff; color: var(--blue-dark); display: grid; place-items: center; font-weight: 900; margin-bottom: 14px; }
.fake-message { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 15px; line-height: 1.55; }
.platform-simulator { border: 1px solid #b8c9d9; border-radius: 18px; overflow: hidden; background: #f7faff; box-shadow: inset 0 0 0 5px #edf3f8; margin: 20px 0; }
.device-frame { width: min(100%, 410px); margin: 18px auto 24px; padding: 12px; border: 8px solid #202b3b; border-radius: 38px; background: #101827; box-shadow: 0 18px 35px rgba(16,42,67,.2); position: relative; }
.device-speaker { position: absolute; top: 5px; left: 50%; z-index: 2; width: 76px; height: 15px; transform: translateX(-50%); border-radius: 0 0 12px 12px; background: #202b3b; }
.device-screen { overflow: hidden; border-radius: 25px; background: white; }
.device-screen .platform-simulator { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.reward-pill { padding: 7px 9px; border-radius: 99px; background: #fff4c2; color: #765900; font-size: .73rem; font-weight: 800; white-space: nowrap; }
.lesson-score-card, .final-grade-card { display: grid; gap: 3px; margin-top: 12px; padding: 10px; border: 1px solid #d9e2ec; border-radius: 10px; background: #f7f9fb; color: #36566f; font-size: .76rem; }
.lesson-score-card span, .final-grade-card span { color: #627d98; font-size: .7rem; }
.mobile-interaction { padding: 0 12px 14px; background: #f7f9fb; }
.live-event-card, .live-control-card { margin: 0 -2px 10px; overflow: hidden; border: 1px solid #c8d5e3; border-radius: 13px; background: #fff; box-shadow: 0 6px 15px rgba(16,42,67,.08); animation: event-in .32s ease-out; }
.live-event-head, .live-control-head { display: flex; align-items: center; gap: 7px; padding: 10px 11px; background: #eef5fc; color: #36566f; font-size: .72rem; }
.live-event-head small { margin-left: auto; color: #8294a7; }
.live-notification-dot { width: 8px; height: 8px; border-radius: 50%; background: #ed5a67; box-shadow: 0 0 0 4px rgba(237,90,103,.14); animation: notification-pulse 1.5s infinite; }
.live-event-body, .live-message-copy { padding: 12px 11px 8px; }
.live-event-body strong, .live-message-copy strong { font-size: .8rem; }
.live-event-body p, .live-message-copy p { margin: 5px 0 0; color: #526b82; font-size: .74rem; line-height: 1.42; }
.live-native-message { padding: 11px; background: #fff; }
.live-native-head { display: flex; align-items: center; gap: 8px; }
.live-native-head > div { display: grid; gap: 2px; flex: 1; }
.live-native-head strong { color: #102a43; font-size: .76rem; }
.live-native-head small { color: #8294a7; font-size: .64rem; }
.native-more { color: #8294a7; font-weight: 900; letter-spacing: .08em; }
.live-native-bubble { margin: 9px 0 0 35px; padding: 10px 11px; border-radius: 12px 12px 12px 3px; background: #eef5fc; color: #243b53; font-size: .77rem; line-height: 1.42; animation: event-in .35s ease-out; }
.live-native-followup { margin: 6px 0 0 35px; padding: 8px 10px; border-left: 3px solid #ed5a67; color: #a32929; font-size: .7rem; line-height: 1.35; animation: event-in .35s ease-out; }
.native-action-bar { margin-top: 11px; padding: 10px 0 0; border-top: 1px solid #e6edf4; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); }
.native-action-bar .icon-action { min-height: 36px; border: 0; border-radius: 50%; background: transparent; color: #627d98; }
.native-action-bar .icon-action:hover, .native-action-bar .icon-action:focus-visible { background: #eef5ff; color: #1769e0; }
.platform-inline-actions { display: flex; align-items: center; justify-content: space-around; gap: 4px; margin: 10px 0; padding: 7px 5px; border-top: 1px solid rgba(188, 202, 216, .72); border-bottom: 1px solid rgba(188, 202, 216, .72); background: rgba(255, 255, 255, .88); }
.platform-inline-actions .icon-action { width: 38px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #526b82; font-size: 1.15rem; }
.platform-inline-actions .icon-action:hover, .platform-inline-actions .icon-action:focus-visible { background: #eef5ff; color: #1769e0; outline: none; }
.platform-inline-menu { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; margin: 10px 0; padding: 8px 5px 5px; border: 1px solid #c8d5e3; border-radius: 10px; background: #f8fbfe; color: #36566f; font-size: .7rem; }
.platform-inline-menu .platform-inline-actions { grid-column: 1 / -1; margin: 0; border-bottom: 0; }
.inline-result { margin: 10px 0; }
.live-event-actions { padding: 0 11px 11px; }
.live-event-actions button, .live-platform-actions button { border: 1px solid #b8c7d8; border-radius: 9px; padding: 9px 10px; background: #f9fbfd; color: #102a43; font-size: .73rem; font-weight: 800; }
.live-event-actions button { width: 100%; border: 0; background: #1769e0; color: #fff; }
.live-control-head { justify-content: space-between; }
.live-close { border: 0; background: transparent; color: #627d98; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.live-platform-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 11px 11px; }
.live-platform-actions button:hover, .live-platform-actions button:focus-visible { border-color: #1769e0; background: #eef5ff; outline: none; }
.live-platform-actions .icon-action { min-height: 42px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; }
.live-platform-actions .icon-action.safe-control { color: #146c52; }
.live-platform-actions .safe-control { border-color: #78c9aa; background: #f1fbf6; }
.live-result-label { margin-bottom: 10px; color: #627d98; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
@keyframes notification-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(237,90,103,.12); } 50% { box-shadow: 0 0 0 7px rgba(237,90,103,.03); } }
.mobile-action-deck { margin: 0 -2px 10px; padding: 11px; border: 1px solid #c8d5e3; border-radius: 13px; background: #fff; animation: event-in .3s ease-out; }
.mobile-action-title { display: block; margin-bottom: 8px; color: #486581; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.mobile-action-grid { display: grid; gap: 7px; }
.mobile-action-button { width: 100%; border: 1px solid #b8c7d8; border-radius: 9px; padding: 10px; background: #f9fbfd; color: #102a43; text-align: left; font-size: .74rem; line-height: 1.3; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.mobile-action-button:hover, .mobile-action-button:focus-visible { border-color: #1769e0; background: #eef5ff; transform: translateY(-1px); outline: none; }
.mobile-inspect, .mobile-next { width: 100%; border: 0; border-radius: 10px; padding: 12px; background: #1769e0; color: white; font-weight: 800; }
.mobile-inspect:hover, .mobile-next:hover { background: #0f4ca8; }
.mobile-inspected { display: grid; gap: 3px; padding: 11px 12px; border-radius: 10px; background: #dff7ee; color: #146c52; font-size: .78rem; animation: event-in .28s ease-out; }
.mobile-inspected span { color: #347966; }
.mobile-test-panel { margin-top: 10px; padding: 13px; border-radius: 13px; background: white; border: 1px solid #d9e2ec; }
.mobile-step { display: block; margin-bottom: 8px; color: #627d98; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mobile-test-panel > p { font-size: .78rem; line-height: 1.45; margin-bottom: 11px; }
.mobile-choices { display: grid; gap: 7px; }
.mobile-choice { width: 100%; border: 1px solid #d9e2ec; border-radius: 9px; padding: 10px; background: white; color: #102a43; text-align: left; font-size: .75rem; line-height: 1.35; }
.mobile-choice:hover { border-color: #1769e0; background: #f5f9ff; }
.mobile-choice.selected.correct { border-color: #38ad83; background: #dff7ee; color: #146c52; }
.mobile-choice.selected.incorrect { border-color: #dc7373; background: #ffe3e3; color: #a32929; }
.mobile-feedback { display: grid; gap: 5px; margin: 10px 0; padding: 10px; border-radius: 9px; font-size: .75rem; line-height: 1.4; }
.mobile-feedback.good { background: #dff7ee; color: #146c52; }
.mobile-feedback.try { background: #fff4c2; color: #765900; }
.urgent-action { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(163,41,41,.2); color: #a32929; }
.dynamic-platform-event { margin: 12px 17px 0; border: 1px solid #c8d5e3; border-radius: 13px; background: #fff; overflow: hidden; box-shadow: 0 7px 16px rgba(16,42,67,.08); animation: event-in .28s ease-out; }
.dynamic-event-head { display: flex; justify-content: space-between; padding: 9px 11px; background: #eef5fc; color: #49657e; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.dynamic-event-head small { color: #8a9bad; font-weight: 600; text-transform: none; letter-spacing: 0; }
.dynamic-event-body { display: flex; gap: 9px; padding: 12px 11px 8px; }
.dynamic-event-body > div { flex: 1; }
.dynamic-event-body strong { font-size: .78rem; }
.dynamic-event-body p { margin: 4px 0 0; color: #526b82; font-size: .73rem; line-height: 1.4; }
.dynamic-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 9px; background: #ffe3e3; color: #a32929; font-weight: 900; }
.event-roblox .dynamic-icon, .event-whatsapp .dynamic-icon { background: #dff7ee; color: #146c52; }
.event-youtube .dynamic-icon, .event-tiktok .dynamic-icon { background: #ffe8f0; color: #a82f61; }
.event-snapchat .dynamic-icon { background: #fff4c2; color: #765900; }
.dynamic-event-button { margin: 0 11px 11px; width: calc(100% - 22px); border: 0; border-radius: 8px; padding: 9px; background: #1769e0; color: white; font-size: .73rem; font-weight: 800; }
.dynamic-event-button:disabled { background: #52c89d; color: #0d543f; }
@keyframes event-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.step-screen-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 17px 12px; background: white; font-size: .86rem; }
.step-screen-head span { color: #1769e0; font-size: .7rem; font-weight: 800; }
.step-screen-meta { padding: 10px 17px; background: #eef5fc; color: #627d98; font-size: .74rem; }
.step-screen-body { min-height: 420px; padding: 19px 17px; background: #f7f9fb; animation: event-in .28s ease-out; }
.ai-scene { height: clamp(205px, 30vh, 310px); position: relative; overflow: hidden; margin: -19px -17px 0; background-image: url("assets/question-scenes-atlas.png"); background-repeat: no-repeat; background-size: 300% 500%; background-position: center; border-radius: 0 0 14px 14px; box-shadow: inset 0 -34px 35px rgba(9,21,38,.28); animation: ai-scene-breathe 5s ease-in-out infinite alternate; }
.ai-scene-question-0 { background-position: 0% 0%; }
.ai-scene-question-1 { background-position: 50% 0%; }
.ai-scene-question-2 { background-position: 100% 0%; }
.ai-scene-question-3 { background-position: 0% 25%; }
.ai-scene-question-4 { background-position: 50% 25%; }
.ai-scene-question-5 { background-position: 100% 25%; }
.ai-scene-question-6 { background-position: 0% 50%; }
.ai-scene-question-7 { background-position: 50% 50%; }
.ai-scene-question-8 { background-position: 100% 50%; }
.ai-scene-question-9 { background-position: 0% 75%; }
.ai-scene-question-10 { background-position: 50% 75%; }
.ai-scene-question-11 { background-position: 100% 75%; }
.ai-scene-question-12 { background-position: 0% 100%; }
.ai-scene-question-13 { background-position: 50% 100%; }
.ai-scene-question-14 { background-position: 100% 100%; }
.ai-scene-shimmer { position: absolute; inset: -20% -35%; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%); transform: translateX(-45%); animation: ai-scene-shimmer 4.8s ease-in-out infinite; }
.ai-scene-frame { position: absolute; left: 11px; bottom: 10px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; background: rgba(8,20,35,.55); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(5px); }
@keyframes ai-scene-breathe { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes ai-scene-shimmer { 0%, 48% { transform: translateX(-45%); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(45%); opacity: 0; } }
.live-signal { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 7px 9px; border-radius: 9px; background: #eef5fc; color: #627d98; font-size: .62rem; }
.live-signal strong { color: #36566f; font-size: .69rem; }
.screen-request, .screen-comment, .screen-message, .screen-group-invite { margin-top: 14px; padding: 13px; border-radius: 12px; background: white; border: 1px solid #d9e2ec; font-size: .78rem; line-height: 1.45; }
.screen-comment, .screen-message { display: flex; gap: 9px; }
.screen-comment div, .screen-message div { flex: 1; }
.screen-comment p, .screen-message p, .screen-group-invite p { margin: 6px 0 0; color: #526b82; }
.screen-comment small, .screen-message small, .screen-group-invite small { display: block; margin-top: 4px; color: #8a9bad; font-size: .68rem; }
.screen-snap-preview { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 7px; border-radius: 14px; background: linear-gradient(145deg, #f5c848, #ec8f62); color: white; text-align: center; }
.screen-snap-preview .platform-inline-actions { width: calc(100% - 20px); margin: 16px 10px 0; border-color: rgba(255,255,255,.42); background: rgba(28, 30, 35, .22); }
.screen-snap-preview .platform-inline-actions .icon-action { color: white; }
.screen-snap-preview .platform-inline-actions .icon-action:hover, .screen-snap-preview .platform-inline-actions .icon-action:focus-visible { background: rgba(255,255,255,.24); color: white; }
.screen-snap-preview span { font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
.screen-snap-preview strong { font-size: 1.25rem; }
.screen-snap-preview small { opacity: .8; }
.screen-snap-preview p { max-width: 90%; margin: 5px auto 0; font-size: .75rem; line-height: 1.35; }
.screen-group-invite { display: grid; grid-template-columns: 35px 1fr; gap: 7px 10px; align-items: center; }
.screen-group-invite .round-avatar { grid-row: span 2; }
.screen-group-invite p { grid-column: 1 / -1; }
.screen-actions { display: flex; gap: 8px; margin-top: 13px; }
.screen-actions button { flex: 1; border: 1px solid #c8d5e3; border-radius: 9px; padding: 10px; background: white; color: #1769e0; font-size: .74rem; font-weight: 800; }
.screen-actions button[data-action="inspect"] { border-color: #1769e0; background: #1769e0; color: white; }
.motion-visual { position: relative; min-height: 145px; margin: 13px 17px 0; overflow: hidden; border-radius: 13px; color: white; animation: scene-in .35s ease-out; }
.motion-visual small { opacity: .8; font-size: .68rem; }
.youtube-motion { padding: 13px; background: linear-gradient(145deg, #252b58, #b85f75); }
.live-dot { display: inline-block; padding: 4px 6px; border-radius: 4px; background: #e3254f; font-size: .62rem; font-weight: 900; animation: blink 1.2s infinite; }
.motion-video { height: 38px; margin: 8px 0 7px; border-radius: 7px; background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.05)); }
.motion-progress { height: 4px; width: 75%; border-radius: 99px; background: #ff4e6e; animation: progress-move 2.3s infinite alternate; }
.motion-progress.short { width: 42%; }
.youtube-link-message { display: flex; align-items: flex-start; gap: 9px; min-height: 82px; margin-bottom: 12px; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.92); color: #243b53; box-shadow: 0 6px 16px rgba(8,20,35,.14); }
.youtube-link-message > div { min-width: 0; flex: 1; }
.youtube-link-message strong { display: block; font-size: .73rem; }
.youtube-link-message p { margin: 4px 0 7px; color: #526b82; font-size: .68rem; line-height: 1.35; }
.youtube-link-url { display: inline-block; padding: 3px 6px; border-radius: 5px; background: #eaf2ff; color: #1769e0; font-size: .62rem; font-weight: 800; }
.tiktok-motion { min-height: 160px; padding: 15px 48px 15px 14px; background: linear-gradient(145deg, #233b43, #d16e7b 60%, #ebbc72); }
.swipe-label { position: absolute; top: 10px; right: 10px; font-size: .61rem; font-weight: 900; animation: float-label 1.6s infinite; }
.motion-portrait { width: 80%; height: 100px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(0,0,0,.12)); font-weight: 900; letter-spacing: .08em; animation: portrait-shift 2s infinite alternate; }
.motion-portrait.warm { background: linear-gradient(145deg, rgba(255,225,166,.55), rgba(117,38,104,.3)); }
.motion-rail { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 8px; font-size: 1.15rem; text-align: center; }
.snap-motion { display: grid; place-items: center; gap: 4px; min-height: 102px; background: linear-gradient(145deg, #f3c848, #e78f63); }
.snap-motion.yellow { background: linear-gradient(145deg, #f6d96a, #dba72d); }
.snap-countdown { width: 41px; height: 41px; border: 4px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: spin 1.5s linear infinite; }
.snap-countdown.pulse { animation: spin 1.5s linear infinite, scale-pulse 1s infinite alternate; }
.instagram-motion { padding: 13px; background: linear-gradient(145deg, #f7a86f, #ba5b9c 58%, #424a91); }
.story-progress { display: flex; gap: 4px; }
.story-progress span { height: 3px; flex: 1; border-radius: 99px; background: rgba(255,255,255,.45); }
.story-progress span:first-child, .story-progress .active { background: white; animation: story-fill 1.8s infinite; }
.story-card { display: grid; place-items: center; min-height: 70px; text-align: center; font-size: .8rem; font-weight: 900; letter-spacing: .08em; animation: card-bob 1.8s infinite alternate; }
.story-card.message { background: rgba(255,255,255,.12); border-radius: 9px; }
.roblox-motion { display: grid; place-items: center; gap: 6px; min-height: 110px; background: linear-gradient(145deg, #4656ba, #67b8e9); }
.roblox-motion.purple { background: linear-gradient(145deg, #7e4bb4, #d36aa2); }
.game-pulse { display: grid; place-items: center; width: 63px; height: 63px; border-radius: 15px; background: rgba(255,255,255,.22); text-align: center; font-size: .72rem; font-weight: 900; animation: scale-pulse 1.2s infinite alternate; }
.whatsapp-motion, .facebook-motion { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 74px; background: #d7f9c9; color: #0e806a; }
.facebook-motion { background: #e7f0ff; color: #1877f2; }
.typing-dots { font-weight: 900; letter-spacing: 3px; animation: blink 1s infinite; }
@keyframes scene-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: .35; } }
@keyframes progress-move { from { width: 35%; } to { width: 88%; } }
@keyframes float-label { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes portrait-shift { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scale-pulse { from { transform: scale(.94); } to { transform: scale(1.08); } }
@keyframes story-fill { from { transform: scaleX(.2); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes card-bob { from { transform: translateY(2px); } to { transform: translateY(-4px); } }
.simulator-banner { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 13px; background: #102a43; color: white; font-size: .76rem; }
.simulator-banner span { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.simulator-banner small { color: #d9e2ec; }
.incoming-toast { display: flex; align-items: center; gap: 7px; min-height: 31px; padding: 7px 12px; background: #172334; color: #fff; font-size: .64rem; animation: incoming-slide .35s ease-out; }
.incoming-toast strong { color: #ffe27d; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
.incoming-toast .toast-name { font-weight: 800; }
.incoming-toast small { min-width: 0; margin-left: auto; max-width: 42%; overflow: hidden; color: #cdd8e5; text-overflow: ellipsis; white-space: nowrap; }
.incoming-pulse { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #ed5a67; box-shadow: 0 0 0 4px rgba(237,90,103,.18); animation: notification-pulse 1.4s infinite; }
.avatar-photo { background-position: center; background-size: cover; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(15,35,60,.18); }
.tiktok-logo, .snap-logo { font-weight: 900; margin-right: 3px; }
.instagram-word { font-family: Georgia, serif; font-size: 1.04rem; font-style: italic; }
.simulator-nav { display: flex; justify-content: space-between; gap: 12px; padding: 18px 17px 12px; background: white; }
.simulator-nav span { color: var(--blue-dark); font-size: .82rem; font-weight: 750; }
.simulator-links { padding: 0 17px 13px; background: white; color: var(--muted); font-size: .77rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simulator-meta { padding: 10px 17px; background: #eef5fc; color: var(--muted); font-size: .78rem; }
.simulator-body { padding: 18px 17px; display: grid; gap: 13px; }
.simulator-tip { margin: 0 17px 17px; padding: 12px 13px; border-radius: 11px; background: var(--yellow); color: var(--yellow-ink); font-size: .86rem; line-height: 1.45; }
.game-tile, .video-block { min-height: 132px; border-radius: 13px; padding: 18px; color: white; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #3855b8, #6b9fe8); }
.video-block { background: linear-gradient(135deg, #6b2a90, #e56f9e); }
.video-block.warm { background: linear-gradient(135deg, #dd5b46, #f5ba55); }
.game-art { font-weight: 900; letter-spacing: .09em; font-size: 1.25rem; line-height: .92; }
.play-icon { align-self: flex-start; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; padding: 4px 7px; font-size: .7rem; font-weight: 800; }
.game-tile small, .video-block small, .profile-row small { display: block; opacity: .8; }
.snap-actions, .group-row, .profile-row { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 11px; background: white; border: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
.snap-actions span { flex: 1; text-align: center; padding: 8px; background: #eef5fc; border-radius: 8px; }
.profile-row { color: var(--ink); }
.profile-row .fake-avatar { margin: 0; flex: 0 0 42px; }
.small-avatar { width: 34px; height: 34px; border-radius: 10px; margin: 0; font-size: .85rem; }
.scenario-prompt { border-top: 1px solid var(--line); padding-top: 20px; }
.simulator-roblox, .simulator-youtube, .simulator-tiktok, .simulator-snapchat, .simulator-whatsapp, .simulator-instagram, .simulator-facebook { color: #172b4d; }
.roblox-head, .youtube-head, .tiktok-head, .snap-head, .wa-head, .ig-head, .fb-head { display: flex; align-items: center; gap: 13px; padding: 15px 17px; background: #fff; border-bottom: 1px solid #e1e8f0; }
.roblox-head strong, .youtube-head strong, .tiktok-head strong, .snap-head strong, .wa-head strong, .ig-head strong { letter-spacing: -.03em; }
.square-menu, .fb-logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #1f8ee5; color: #fff; font-weight: 900; }
.search-pill { flex: 1; max-width: 150px; background: #f0f3f7; color: #728096; border-radius: 99px; padding: 8px 13px; font-size: .75rem; }
.search-pill.wide { max-width: none; }
.round-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: #d6e7ff; color: #17569c; font-size: .7rem; font-weight: 900; }
.round-avatar.pink, .story-ring.pink { background: #f2b3c8; color: #8a2750; }
.round-avatar.red { background: #ffb6b6; color: #a32929; }
.round-avatar.blue, .story-ring.blue { background: #b9d8ff; color: #17569c; }
.round-avatar.green, .story-ring.green { background: #b7ecd5; color: #146c52; }
.yellow-avatar { background: #ffe77d; color: #7a5b00; }
.roblox-head { background: #fff; color: #1d2433; }
.roblox-head strong { font-size: 1.1rem; }
.roblox-tabs, .youtube-tabs, .wa-tabs, .ig-bottom, .fb-tabs { display: flex; gap: 18px; padding: 11px 17px; background: #fff; border-bottom: 1px solid #e6edf4; color: #7a8797; font-size: .77rem; }
.roblox-tabs strong, .youtube-tabs strong, .wa-tabs strong, .fb-tabs strong { color: #1f73c9; }
.roblox-content, .youtube-content, .wa-chat-list { padding: 15px 17px; background: #f7f9fb; }
.roblox-home-row { display: flex; align-items: center; justify-content: space-between; }
.roblox-home-row .screen-kicker { margin-bottom: 9px; }
.roblox-badge { padding: 4px 7px; border-radius: 6px; background: #eef1f5; color: #627d98; font-size: .62rem; font-weight: 800; }
.screen-kicker { margin: 0 0 9px; font-weight: 800; font-size: .8rem; }
.roblox-game { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid #e1e8f0; }
.game-art { height: 88px; display: grid; place-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #4c62cc, #7cc7f2); color: white; border-radius: 9px; font-weight: 900; font-size: .75rem; line-height: .88; text-align: center; }
.game-art span { position: relative; z-index: 1; text-shadow: 0 2px 4px rgba(0,0,0,.45); }
.game-photo { position: absolute; inset: 0; opacity: .48; }
.roblox-game small, .video-meta small, .snap-contact small, .wa-chat small, .profile-row small { display: block; color: #7d8b9c; font-size: .73rem; margin-top: 3px; }
.roblox-game button, .video-meta button { border: 0; border-radius: 7px; padding: 8px 11px; background: #1f8ee5; color: white; font-weight: 750; font-size: .75rem; }
.roblox-chat { margin-top: 13px; padding: 13px; background: #fff; border-radius: 12px; border: 1px solid #e1e8f0; }
.chat-title { display: flex; justify-content: space-between; border-bottom: 1px solid #edf1f5; padding-bottom: 9px; font-size: .78rem; }
.chat-title small { color: #c34e57; }
.chat-line { display: flex; gap: 9px; padding-top: 12px; }
.chat-line[data-action] { cursor: pointer; border-radius: 10px; transition: background .18s ease; }
.chat-line[data-action]:hover, .chat-line[data-action]:focus-visible { background: #eef5ff; outline: none; }
.chat-line p { margin: 5px 0 0; color: #4b5f73; font-size: .8rem; line-height: 1.45; }
.youtube-head { color: #202124; }
.youtube-word { font-size: .95rem; white-space: nowrap; }
.yt-play { display: inline-grid; place-items: center; width: 22px; height: 16px; border-radius: 5px; margin-right: 4px; background: #ff1744; color: white; font-size: .62rem; }
.youtube-tabs { overflow-x: auto; }
.youtube-content { background: #fff; }
.yt-video { height: clamp(230px, 38vh, 350px); display: grid; place-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #292d50, #a85c74); color: white; }
.sim-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; }
.yt-video > :not(.sim-video), .tiktok-video > :not(.sim-video) { position: relative; z-index: 1; }
.video-time { position: absolute; right: 9px; bottom: 9px; border-radius: 4px; background: #df274d; padding: 4px 5px; font-size: .65rem; font-weight: 800; }
.big-play { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.82); color: #334e68; font-size: .8rem; }
.youtube-content h3 { margin: 10px 0; font-size: .92rem; }
.video-meta { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #edf1f5; padding-bottom: 12px; font-size: .78rem; }
.video-meta div { flex: 1; }
.yt-comment { margin-top: 13px; padding: 12px; border-radius: 10px; background: #f7f8fa; font-size: .78rem; }
.yt-comment p { margin: 6px 0; line-height: 1.45; }
.yt-comment small { color: #748397; }
.tiktok-head { justify-content: center; background: #101014; color: #fff; border: 0; }
.tiktok-head span { color: #aeb2be; }
.tiktok-head span:last-child { margin-left: auto; }
.tiktok-video { min-height: clamp(430px, 68vh, 690px); position: relative; display: flex; align-items: end; padding: 18px 64px 22px 17px; background: linear-gradient(145deg, #233a43 0%, #cc6c76 58%, #f1c179 100%); color: #fff; }
.tiktok-video .big-play { position: absolute; top: 45%; left: calc(50% - 17px); }
.tiktok-caption { line-height: 1.45; }
.tiktok-creator { display: flex; align-items: center; gap: 8px; }
.tiktok-creator button { border: 1px solid rgba(255,255,255,.8); border-radius: 5px; padding: 3px 8px; background: transparent; color: #fff; font-size: .64rem; font-weight: 800; }
.tiktok-caption p { margin: 6px 0; font-size: .8rem; }
.tiktok-caption small { opacity: .8; }
.tiktok-actions { position: absolute; right: 16px; bottom: 23px; display: grid; gap: 15px; justify-items: center; }
.tiktok-actions b { display: grid; gap: 2px; justify-items: center; font-size: 1.35rem; }
.tiktok-actions small { font-size: .62rem; font-weight: 500; }
.tiktok-bottom, .snap-bottom, .fb-bottom { display: flex; justify-content: space-around; padding: 12px 8px; background: #101014; color: #bbc0ca; font-size: .72rem; }
.tiktok-bottom b { color: #fff; font-size: 1.15rem; }
.snap-head { background: #f7c844; color: #1d2433; }
.snap-story-row { display: flex; gap: 15px; padding: 14px 17px; background: #fff; border-bottom: 1px solid #edf1f5; }
.story-ring { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #f6c643; background: #e0ebfa; color: #345d91; font-size: .7rem; font-weight: 800; }
.story-ring.orange { background: #ffd7ac; border-color: #f38c4c; }
.snap-chat { min-height: 365px; padding: 17px; background: #f7f8fa; }
.snap-contact { display: flex; gap: 10px; align-items: center; }
.snap-contact div { display: grid; }
.snap-contact { min-width: 0; }
.snap-contact > div { flex: 1; }
.snap-streak { color: #e1682c; font-size: .7rem; font-weight: 800; }
.snap-status { margin-top: 9px; color: #8793a2; font-size: .64rem; }
.snap-photo { display: block; width: 100%; height: 180px; margin-top: 16px; border-radius: 13px; object-fit: cover; object-position: center; }
.snap-bubble { max-width: 85%; margin: 12px 0 15px auto; padding: 11px 13px; border-radius: 15px 15px 4px 15px; background: #d7e6ff; font-size: .8rem; line-height: 1.45; }
.snap-input, .wa-input { display: flex; justify-content: space-between; gap: 10px; padding: 10px; background: #fff; border: 1px solid #e0e7ef; border-radius: 99px; color: #8491a2; font-size: .75rem; }
.snap-input b { color: #d4a900; }
.snap-bottom { background: #fff; color: #6c798b; border-top: 1px solid #e2e8ef; }
.snap-bottom strong { color: #d6aa00; }
.wa-head { background: #0e806a; color: white; }
.wa-tabs { background: #0e806a; color: #b6e6da; border: 0; }
.wa-tabs strong { color: white; border-bottom: 2px solid white; padding-bottom: 8px; }
.wa-chat { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #edf1f5; }
.wa-chat div { flex: 1; font-size: .8rem; }
.wa-chat b { color: #0e806a; font-size: .67rem; }
.wa-message { min-height: 205px; padding: 19px 17px; background: #eee8de; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wa-chat-head { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #0e806a; color: #fff; font-size: .76rem; }
.wa-chat-head > div { flex: 1; }
.wa-chat-head small { display: block; color: #b6e6da; font-size: .63rem; }
.wa-encrypted { padding: 5px 12px; background: #fff5c8; color: #887125; text-align: center; font-size: .6rem; }
.chat-photo { width: 86px; height: 86px; border-radius: 10px; object-fit: cover; object-position: center; opacity: .9; }
.wa-media-card { position: relative; flex: 0 0 86px; width: 86px; height: 108px; overflow: hidden; border-radius: 10px; background: #d8e3dc; }
.wa-media-card .chat-photo { display: block; width: 86px; height: 86px; border-radius: 10px 10px 0 0; }
.wa-media-card span { display: block; padding: 4px 6px; background: #fff; color: #718096; font-size: .58rem; }
.wa-bubble { max-width: 86%; padding: 10px 11px; border-radius: 11px 2px 11px 11px; background: #d7f9c9; font-size: .79rem; line-height: 1.45; }
.wa-bubble span { display: block; margin-top: 5px; color: #73816c; text-align: right; font-size: .64rem; }
.wa-input { margin: 12px 17px; }
.wa-input b { color: #0e806a; }
.ig-head { justify-content: space-between; color: #202124; }
.ig-stories { display: flex; gap: 15px; padding: 13px 17px; background: white; overflow: hidden; }
.ig-stories > div { display: grid; justify-items: center; gap: 4px; flex: 0 0 42px; }
.ig-stories small { width: 55px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6d7888; font-size: .62rem; }
.ig-post { background: #fff; border-top: 1px solid #edf1f5; }
.ig-post-head, .ig-post-actions { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: .76rem; }
.ig-post-head strong { flex: 1; }
.ig-photo { height: 270px; display: grid; place-items: center; position: relative; overflow: hidden; background: linear-gradient(145deg, #ffa86f, #c8629f 55%, #40438d); color: #fff; font-weight: 900; letter-spacing: .15em; text-align: center; }
.ig-photo img, .fb-photo { width: 100%; height: 100%; object-fit: cover; }
.ig-photo img { position: absolute; inset: 0; opacity: .72; }
.ig-photo span { position: relative; z-index: 1; text-shadow: 0 2px 5px rgba(0,0,0,.45); }
.ig-photo i { position: absolute; z-index: 2; top: 9px; right: 10px; padding: 4px 6px; border-radius: 99px; background: rgba(0,0,0,.4); color: #fff; font-size: .62rem; font-style: normal; }
.verified-dot { color: #2589e8; font-size: .72rem; }
.ig-post-actions strong { font-size: 1.1rem; }
.ig-post-actions span { margin-left: auto; }
.ig-likes { padding: 0 14px 6px; color: #243b53; font-size: .7rem; font-weight: 800; }
.ig-post > p { padding: 0 14px 13px; margin: 0; font-size: .76rem; line-height: 1.45; }
.ig-comment-line { padding: 0 14px 14px; color: #8a98a8; font-size: .7rem; }
.ig-bottom { justify-content: space-around; border-top: 1px solid #edf1f5; border-bottom: 0; }
.fb-head { background: #fff; }
.fb-composer { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #edf1f5; color: #7a8797; font-size: .74rem; }
.fb-composer span:nth-child(2) { flex: 1; padding: 8px 11px; border: 1px solid #e1e8f0; border-radius: 99px; }
.fb-logo { width: 27px; height: 27px; border-radius: 50%; background: #1877f2; font-size: 1.25rem; }
.fb-tabs { justify-content: space-around; }
.fb-tabs strong { color: #1877f2; border-bottom: 3px solid #1877f2; padding-bottom: 9px; }
.fb-post { background: #fff; padding: 14px 17px; }
.fb-post .profile-row { padding: 0 0 12px; border: 0; }
.fb-post .profile-row div { flex: 1; }
.fb-photo { display: block; height: 220px; margin: 0 -17px; width: calc(100% + 34px); object-position: center; }
.fb-copy { padding: 14px 0; border-top: 1px solid #edf1f5; line-height: 1.5; font-size: .83rem; }
.fb-reactions { padding: 0 0 9px; color: #627d98; font-size: .68rem; }
.fb-reactions span { float: right; }
.fb-actions { display: flex; justify-content: space-around; border-top: 1px solid #edf1f5; padding-top: 11px; color: #6e7c8d; font-size: .75rem; }
.fb-bottom { background: #fff; color: #1877f2; border-top: 1px solid #e2e8ef; }
.game-chat-card, .feed-comment-card, .dm-card, .wa-incoming-chat, .fb-incoming-post { margin-top: 13px; padding: 12px; border: 1px solid #d9e2ec; border-radius: 13px; background: #fff; }
.game-chat-head, .feed-comment-head, .snap-incoming-head, .wa-incoming-head { display: flex; align-items: center; gap: 9px; }
.game-chat-head > div, .feed-comment-head > div, .snap-incoming-head > div, .wa-incoming-head > div { flex: 1; min-width: 0; }
.game-chat-head small, .feed-comment-head small, .snap-incoming-head small, .wa-incoming-head small, .dm-card-head small { display: block; margin-top: 3px; color: #7d8b9c; font-size: .68rem; }
.game-chat-message, .feed-comment-card p, .dm-card p, .wa-incoming-bubble, .fb-incoming-post p { margin: 10px 0 0; color: #334e68; font-size: .78rem; line-height: 1.45; }
.game-chat-meta, .comment-actions { margin-top: 10px; color: #7d8b9c; font-size: .65rem; }
.feed-comment-card p { margin-bottom: 0; }
.dm-card { display: flex; gap: 9px; }
.dm-card > div { flex: 1; min-width: 0; }
.dm-card-head { display: flex; justify-content: space-between; gap: 7px; }
.dm-card-head small { white-space: nowrap; }
.dm-reply-line { margin-top: 10px; padding: 8px 10px; border: 1px solid #e1e8f0; border-radius: 99px; color: #8a98a8; font-size: .67rem; }
.screen-snap-preview .snap-incoming-head { width: 100%; align-self: start; color: #202b3c; }
.screen-snap-preview .snap-incoming-head small { color: #627d98; }
.screen-snap-preview .snap-incoming-head > span { margin-left: auto; color: #d86f2e; font-size: .68rem; }
.wa-incoming-chat { background: #eee8de; }
.wa-incoming-bubble { max-width: 90%; padding: 10px; border-radius: 3px 11px 11px 11px; background: #fff; }
.wa-incoming-bubble span { display: block; margin-top: 5px; color: #8491a2; text-align: right; font-size: .62rem; }
.fb-incoming-post .profile-row { padding: 0; border: 0; }
.fb-incoming-post .profile-row div { flex: 1; }
.fb-incoming-post .fb-actions { margin-top: 10px; }
@keyframes incoming-slide { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes notification-pulse { 0%, 100% { opacity: .75; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.18); } }
.choice-grid { display: grid; gap: 10px; }
.choice { text-align: left; border: 1px solid var(--line); background: white; border-radius: 12px; padding: 14px; color: var(--ink); }
.choice:hover { border-color: var(--blue); background: #f5f9ff; }
.choice.selected.correct { border-color: #38ad83; background: var(--mint); }
.choice.selected.incorrect { border-color: #dc7373; background: var(--red); }
.feedback { border-radius: 13px; padding: 15px; margin-top: 16px; line-height: 1.55; }
.feedback.good { background: var(--mint); color: var(--mint-ink); }
.feedback.try { background: var(--yellow); color: var(--yellow-ink); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.tag-list li { padding: 8px 10px; border-radius: 9px; background: #eff5fb; color: #334e68; font-size: .86rem; }
.rules-list { padding-left: 21px; color: var(--muted); line-height: 1.8; }
.progress-list { display: grid; gap: 11px; }
.progress-item { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.status { font-size: .8rem; font-weight: 800; color: var(--mint-ink); }
.admin-card { padding: 20px; margin-top: 18px; }
.admin-note { border-left: 4px solid #f0bd3b; background: #fffaf0; padding: 13px 15px; line-height: 1.5; }
label { display: block; font-weight: 750; margin: 14px 0 7px; }
textarea, input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; color: var(--ink); }
.small { font-size: .86rem; }
.empty { color: var(--muted); padding: 18px 0; }
.footer { max-width: 1180px; margin: 0 auto; padding: 0 20px 36px; color: var(--muted); font-size: .85rem; }
.no-script { max-width: 650px; padding: 50px 20px; margin: auto; }

@media (max-width: 900px) { .hero, .layout-two { grid-template-columns: 1fr; } .platform-grid { grid-template-columns: repeat(2, 1fr); } .route-grid { grid-template-columns: 1fr; } .package-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .topbar { align-items: flex-start; flex-direction: column; } .topbar nav { justify-content: flex-start; } .page { padding-top: 25px; } .platform-grid, .package-grid { grid-template-columns: 1fr; } .school-proof { grid-template-columns: repeat(2, 1fr); } .school-proof div { min-height: 62px; } .hero-copy { padding: 28px 22px; } h1 { font-size: 3rem; } .teacher-strip { align-items: flex-start; flex-direction: column; margin-bottom: 30px; } .package-footer { flex-direction: column-reverse; } }

/* SocialsWise portal redesign */
body { background: #eef2f5; }
.topbar { background: #0b172a; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { border-radius: 13px; background: #73e0bc; }
.page { max-width: 1240px; padding: 30px 24px 72px; }
.portal-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; min-height: 520px; padding: clamp(28px, 5vw, 62px); border-radius: 30px; overflow: hidden; position: relative; background: #0b172a; color: white; box-shadow: 0 24px 55px rgba(11,23,42,.2); }
.portal-hero:before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(62,190,155,.5), rgba(62,190,155,0) 68%); pointer-events: none; }
.portal-hero-copy { position: relative; z-index: 1; align-self: center; max-width: 650px; }
.portal-hero .eyebrow { color: #73e0bc; }
.portal-hero h1 { max-width: 640px; margin: 14px 0 20px; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .94; letter-spacing: -.075em; }
.hero-lede { max-width: 560px; margin-bottom: 0; color: #b9c9d8; font-size: 1.05rem; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.hero-actions .primary-button { border: 0; border-radius: 10px; background: #73e0bc; color: #0b172a; box-shadow: 0 10px 20px rgba(115,224,188,.16); }
.hero-actions .primary-button:hover { background: #a3f1d4; }
.hero-actions .primary-button span, .hero-link span { margin-left: 8px; }
.hero-link { border: 0; padding: 10px 0; background: transparent; color: white; font-weight: 800; }
.hero-link:hover { color: #73e0bc; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 28px; color: #8fa4b8; font-size: .78rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #73e0bc; box-shadow: 0 0 0 5px rgba(115,224,188,.12); }
.portal-hero-visual { position: relative; z-index: 1; align-self: center; justify-self: end; width: min(100%, 390px); padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(255,255,255,.08); box-shadow: 0 20px 45px rgba(0,0,0,.2); transform: rotate(2deg); }
.preview-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 5px 12px; color: #9db0c2; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.preview-live { display: inline-flex; align-items: center; gap: 6px; color: #73e0bc; }
.preview-live i { width: 7px; height: 7px; border-radius: 50%; background: #73e0bc; animation: notification-pulse 1.5s infinite; }
.preview-phone { overflow: hidden; border-radius: 17px; background: #f7f9fb; color: #102a43; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.preview-phone-top { display: flex; justify-content: space-between; padding: 14px 15px; background: white; font-size: .8rem; }
.preview-phone-top strong { letter-spacing: -.03em; }
.preview-image { height: 190px; position: relative; background: linear-gradient(145deg, #efad75, #8b61d3 58%, #344f8f); }
.preview-badge { position: absolute; left: 13px; top: 13px; padding: 5px 8px; border-radius: 7px; background: rgba(11,23,42,.66); color: white; font-size: .64rem; font-weight: 900; }
.preview-avatar { position: absolute; right: 16px; bottom: 14px; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid white; border-radius: 50%; background: #eb668a; color: white; font-weight: 900; }
.preview-message { display: grid; gap: 5px; padding: 15px; background: white; }
.preview-message small { color: #8291a3; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.preview-message strong { font-size: .83rem; line-height: 1.35; }
.preview-question { margin: 0 15px; padding: 10px 0 8px; border-bottom: 1px solid #e5ebf1; color: #627d98; font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.preview-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px 15px 15px; }
.preview-action { display: grid; gap: 5px; justify-items: center; padding: 9px 4px; border: 1px solid #d9e2ec; border-radius: 9px; color: #627d98; font-size: .63rem; text-align: center; }
.preview-action b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #edf3f8; color: #1769e0; font-size: .62rem; }
.preview-action.active { border-color: #7ed5b6; background: #effbf6; color: #146c52; }
.preview-action.active b { background: #52c89d; color: #0b4535; }
.portal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0 54px; overflow: hidden; border: 1px solid #d7e0e8; border-radius: 15px; background: #d7e0e8; }
.portal-stats > div { min-height: 84px; display: grid; align-content: center; gap: 4px; padding: 15px 18px; background: #fff; }
.portal-stats strong { color: #102a43; font-size: 1.35rem; letter-spacing: -.04em; }
.portal-stats span { color: #7890a5; font-size: .72rem; font-weight: 700; }
.portal-stat-action { display: flex !important; align-items: center; justify-content: flex-end; }
.portal-stat-action button { border: 0; background: none; color: #1769e0; font-weight: 850; }
.portal-stat-action button span { margin-left: 7px; color: #1769e0; font-size: 1rem; }
.platform-section { margin-top: 0; }
.platform-heading { margin-bottom: 18px; }
.platform-heading h2 { margin-bottom: 0; }
.platform-card { min-height: 190px; padding: 20px; border: 1px solid #d7e0e8; border-radius: 15px; box-shadow: 0 8px 20px rgba(16,42,67,.04); }
.platform-card:hover { transform: translateY(-4px); border-color: #73a9ef; box-shadow: 0 16px 30px rgba(16,42,67,.1); }
.platform-chip { border-radius: 6px; background: #eef5fc; color: #1769e0; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.platform-card h3 { letter-spacing: -.03em; }
.platform-card p { font-size: .86rem; }
.platform-card .secondary-button { border-radius: 8px; padding: 9px 12px; background: #eef5fc; color: #1769e0; }
.modern-route { margin-top: 58px; padding-top: 35px; border-top: 1px solid #d7e0e8; }
.modern-route .route-grid article { min-height: 160px; border: 1px solid #d7e0e8; border-radius: 15px; box-shadow: none; }
.modern-route .route-number { background: #0b172a; border-radius: 8px; }
.footer { padding: 26px 20px 38px; color: #7890a5; font-size: .76rem; text-align: center; }
@media (max-width: 900px) { .portal-hero { grid-template-columns: 1fr; } .portal-hero-visual { justify-self: start; width: min(100%, 420px); transform: rotate(0); } }
@media (max-width: 650px) { .portal-hero { min-height: auto; padding: 28px 22px; border-radius: 22px; } .portal-hero h1 { font-size: 3.25rem; } .portal-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 40px; } .portal-stat-action { justify-content: flex-start; } .preview-image { height: 150px; } }

/* SocialsWise portal redesign v2: editorial classroom studio */
body { background: #f7f1e7; color: #20233d; }
.topbar { background: #f7f1e7; border-bottom: 1px solid #ded4c5; }
.topbar .brand-mark { background: #ff6b57; color: #20233d; border-radius: 9px; box-shadow: 4px 4px 0 #20233d; }
.topbar .brand strong { color: #20233d; }
.topbar .brand small, .topbar nav button, .topbar nav span { color: #746f68; }
.topbar nav button:hover { color: #ff6b57; }
.page { max-width: 1320px; padding: 30px 28px 80px; }
.portal-hero { grid-template-columns: 1.15fr .85fr; gap: 42px; min-height: 585px; padding: clamp(30px, 5vw, 78px); border: 1px solid #ded4c5; border-radius: 0; background: #f7f1e7; color: #20233d; box-shadow: none; }
.portal-hero:before { width: 300px; height: 300px; right: 20%; top: -130px; background: #ffd166; opacity: .8; filter: blur(1px); }
.portal-hero:after { content: ""; position: absolute; width: 150px; height: 150px; right: 10%; bottom: -50px; border-radius: 50%; background: #48c6b2; opacity: .7; }
.portal-hero-copy { max-width: 690px; }
.portal-hero .eyebrow { color: #ff6b57; font-size: .72rem; letter-spacing: .14em; }
.portal-hero h1 { max-width: 700px; margin: 17px 0 24px; color: #20233d; font-size: clamp(3.5rem, 7vw, 7.4rem); line-height: .87; letter-spacing: -.085em; }
.hero-lede { max-width: 525px; color: #5e5c61; font-size: 1.08rem; line-height: 1.62; }
.hero-actions { margin-top: 34px; }
.hero-actions .primary-button { border-radius: 0; background: #20233d; color: #fffaf2; box-shadow: 5px 5px 0 #ff6b57; }
.hero-actions .primary-button:hover { background: #ff6b57; color: #20233d; }
.hero-link { color: #20233d; text-decoration: underline; text-decoration-color: #ff6b57; text-underline-offset: 5px; }
.hero-link:hover { color: #ff6b57; }
.hero-note { color: #746f68; }
.status-dot { background: #48c6b2; box-shadow: 0 0 0 5px rgba(72,198,178,.16); }
.portal-hero-visual { width: min(100%, 410px); padding: 18px; border: 2px solid #20233d; border-radius: 0; background: #ff6b57; box-shadow: 12px 12px 0 #20233d; transform: rotate(3deg); }
.preview-top { color: #20233d; }
.preview-live { color: #20233d; }
.preview-live i { background: #20233d; }
.preview-phone { border-radius: 0; box-shadow: 0 8px 0 rgba(32,35,61,.14); }
.preview-phone-top { background: #20233d; color: #fffaf2; }
.preview-image { height: 220px; background: linear-gradient(135deg, #5a4de0 0%, #48c6b2 100%); }
.preview-badge { border-radius: 0; background: #ffd166; color: #20233d; }
.preview-avatar { background: #ff6b57; border-color: #fffaf2; color: #20233d; }
.preview-question { color: #ff6b57; }
.preview-action { border-radius: 0; border-color: #ded4c5; }
.preview-action b { border-radius: 0; background: #ffd166; color: #20233d; }
.preview-action.active { border-color: #48c6b2; background: #e7f8f3; color: #176f64; }
.preview-action.active b { background: #48c6b2; color: #20233d; }
.portal-stats { grid-template-columns: repeat(4, 1fr); gap: 0; margin: 30px 0 70px; border: 2px solid #20233d; border-radius: 0; background: #20233d; }
.portal-stats > div { min-height: 104px; padding: 18px 20px; background: #fffaf2; }
.portal-stats > div:nth-child(2) { background: #ffd166; }
.portal-stats > div:nth-child(3) { background: #48c6b2; }
.portal-stats > div:nth-child(4) { background: #ff6b57; }
.portal-stats strong, .portal-stats span { color: #20233d; }
.portal-stat-action { justify-content: flex-start; }
.portal-stat-action button { color: #20233d; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.portal-stat-action button span { color: #20233d; }
.platform-section { margin-top: 0; }
.platform-heading { align-items: end; margin-bottom: 24px; }
.platform-heading .eyebrow { color: #ff6b57; }
.platform-heading h2 { color: #20233d; font-size: clamp(2rem, 4vw, 3.7rem); letter-spacing: -.07em; }
.platform-heading p { max-width: 290px; color: #746f68; }
.platform-grid { gap: 14px; }
.platform-card { min-height: 220px; padding: 24px; border: 1px solid #ded4c5; border-radius: 0; background: #fffaf2; box-shadow: 5px 5px 0 #ded4c5; }
.platform-card:nth-child(3n + 2) { background: #fff0c7; }
.platform-card:nth-child(3n + 3) { background: #e4f6f1; }
.platform-card:hover { transform: translate(-3px, -3px); border-color: #20233d; box-shadow: 8px 8px 0 #20233d; }
.platform-chip { border-radius: 0; background: transparent; color: #ff6b57; font-size: .68rem; font-weight: 900; }
.platform-card h3 { color: #20233d; font-size: 1.55rem; }
.platform-card p { color: #5e5c61; }
.platform-card .secondary-button { border-radius: 0; background: #20233d; color: #fffaf2; }
.platform-card .secondary-button:hover { background: #ff6b57; color: #20233d; }
.modern-route { margin-top: 76px; padding: 42px 0 0; border-top: 2px solid #20233d; }
.modern-route .eyebrow { color: #ff6b57; }
.modern-route h2 { color: #20233d; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.07em; }
.modern-route .route-grid { gap: 14px; }
.modern-route .route-grid article { min-height: 190px; border: 1px solid #ded4c5; border-radius: 0; background: #fffaf2; box-shadow: none; }
.modern-route .route-grid article:nth-child(2) { background: #ffd166; }
.modern-route .route-grid article:nth-child(3) { background: #48c6b2; }
.modern-route .route-number { border-radius: 0; background: #20233d; color: #fffaf2; }
.footer { color: #746f68; }
@media (max-width: 900px) { .portal-hero { grid-template-columns: 1fr; gap: 24px; } .portal-hero-visual { justify-self: start; } }
@media (max-width: 650px) { .page { padding: 18px 15px 56px; } .portal-hero { padding: 30px 22px 44px; } .portal-hero h1 { font-size: 3.7rem; } .portal-hero-visual { width: calc(100% - 12px); } .portal-stats { margin: 22px 0 48px; } }

/* SocialsWise portal redesign v3: modern school platform */
body { background: #f5f7fb; color: #17233f; }
.topbar { background: #ffffff; border-bottom: 1px solid #e5eaf2; }
.topbar .brand-mark { border-radius: 12px; background: #2447d8; color: #ffffff; box-shadow: none; }
.topbar .brand strong { color: #17233f; }
.topbar .brand small, .topbar nav button, .topbar nav span { color: #6b7892; }
.topbar nav button:hover { color: #2447d8; }
.page { max-width: 1260px; padding: 26px 26px 76px; }
.portal-hero { grid-template-columns: 1.05fr .95fr; gap: 34px; min-height: 500px; padding: clamp(28px, 5vw, 58px); border: 1px solid #dfe6f1; border-radius: 24px; background: #ffffff; color: #17233f; box-shadow: 0 14px 38px rgba(37,58,100,.07); }
.portal-hero:before { width: 280px; height: 280px; right: -80px; top: -100px; background: #dff36f; opacity: .75; filter: none; }
.portal-hero:after { content: ""; position: absolute; right: 45%; bottom: -100px; width: 180px; height: 180px; border-radius: 50%; background: #e8edff; }
.portal-hero-copy { max-width: 650px; }
.portal-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #2447d8; font-size: .72rem; letter-spacing: .1em; }
.portal-hero .eyebrow:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b7dd35; }
.portal-hero h1 { max-width: 650px; margin: 15px 0 20px; color: #17233f; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .93; letter-spacing: -.075em; }
.hero-lede { max-width: 525px; color: #62708a; font-size: 1.03rem; line-height: 1.63; }
.hero-actions { margin-top: 30px; }
.hero-actions .primary-button { border-radius: 11px; background: #2447d8; color: #ffffff; box-shadow: 0 7px 14px rgba(36,71,216,.2); }
.hero-actions .primary-button:hover { background: #1734ae; }
.hero-link { color: #2447d8; }
.hero-link:hover { color: #17233f; }
.hero-note { color: #73809a; }
.status-dot { background: #b7dd35; box-shadow: 0 0 0 5px rgba(183,221,53,.18); }
.portal-hero-visual { width: min(100%, 390px); padding: 14px; border: 1px solid #dfe6f1; border-radius: 20px; background: #eef2ff; box-shadow: 0 16px 28px rgba(37,58,100,.12); transform: rotate(0); }
.preview-top { color: #62708a; }
.preview-live { color: #2447d8; }
.preview-live i { background: #b7dd35; }
.preview-phone { border-radius: 14px; box-shadow: 0 10px 25px rgba(37,58,100,.14); }
.preview-phone-top { padding: 13px 15px; color: #17233f; }
.preview-image { height: 200px; background: linear-gradient(145deg, #6b7ff0, #b8c5ff); }
.preview-badge { border-radius: 6px; background: #ffffff; color: #2447d8; }
.preview-avatar { background: #b7dd35; border-color: #ffffff; color: #17233f; }
.preview-question { color: #62708a; }
.preview-action { border-radius: 8px; border-color: #dfe6f1; color: #62708a; }
.preview-action b { border-radius: 6px; background: #eef2ff; color: #2447d8; }
.preview-action.active { border-color: #b7dd35; background: #f4fbdc; color: #486000; }
.preview-action.active b { background: #b7dd35; color: #17233f; }
.portal-stats { grid-template-columns: repeat(4, 1fr); gap: 0; margin: 22px 0 58px; border: 1px solid #dfe6f1; border-radius: 16px; background: #ffffff; box-shadow: 0 8px 20px rgba(37,58,100,.05); }
.portal-stats > div { min-height: 92px; padding: 16px 19px; background: #ffffff; }
.portal-stats > div:nth-child(2), .portal-stats > div:nth-child(3), .portal-stats > div:nth-child(4) { background: #ffffff; }
.portal-stats > div + div { border-left: 1px solid #e5eaf2; }
.portal-stats strong { color: #17233f; font-size: 1.42rem; }
.portal-stats span { color: #71809b; }
.portal-stat-action { justify-content: flex-start; }
.portal-stat-action button { color: #2447d8; text-align: left; }
.portal-stat-action button span { color: #2447d8; }
.platform-heading { align-items: end; margin-bottom: 20px; }
.platform-heading .eyebrow { color: #2447d8; }
.platform-heading h2 { color: #17233f; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.065em; }
.platform-heading p { max-width: 310px; color: #71809b; }
.platform-grid { gap: 14px; }
.platform-card { min-height: 190px; padding: 21px; border: 1px solid #dfe6f1; border-radius: 16px; background: #ffffff; box-shadow: 0 7px 18px rgba(37,58,100,.045); }
.platform-card:nth-child(3n + 2), .platform-card:nth-child(3n + 3) { background: #ffffff; }
.platform-card:hover { transform: translateY(-4px); border-color: #aebcf6; box-shadow: 0 14px 26px rgba(37,58,100,.1); }
.platform-chip { border-radius: 6px; background: #eef2ff; color: #2447d8; font-size: .67rem; }
.platform-card h3 { color: #17233f; font-size: 1.35rem; }
.platform-card p { color: #687791; font-size: .84rem; }
.platform-card .secondary-button { border-radius: 9px; background: #eef2ff; color: #2447d8; }
.platform-card .secondary-button:hover { background: #2447d8; color: #ffffff; }
.modern-route { margin-top: 62px; padding-top: 34px; border-top: 1px solid #dfe6f1; }
.modern-route .eyebrow { color: #2447d8; }
.modern-route h2 { color: #17233f; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.065em; }
.modern-route .route-grid { gap: 14px; }
.modern-route .route-grid article, .modern-route .route-grid article:nth-child(2), .modern-route .route-grid article:nth-child(3) { min-height: 165px; border: 1px solid #dfe6f1; border-radius: 16px; background: #ffffff; box-shadow: 0 7px 18px rgba(37,58,100,.04); }
.modern-route .route-grid article:nth-child(2) { background: #f4fbdc; }
.modern-route .route-grid article:nth-child(3) { background: #eef2ff; }
.modern-route .route-number { border-radius: 8px; background: #2447d8; color: #ffffff; }
.footer { color: #71809b; }
@media (max-width: 900px) { .portal-hero { grid-template-columns: 1fr; gap: 26px; } .portal-hero-visual { justify-self: start; } }
@media (max-width: 650px) { .page { padding: 16px 14px 52px; } .portal-hero { padding: 28px 22px 40px; border-radius: 18px; } .portal-hero h1 { font-size: 3.3rem; } .portal-hero-visual { width: 100%; } .portal-stats { grid-template-columns: repeat(2, 1fr); } .portal-stats > div + div { border-left: 0; } .portal-stats > div:nth-child(odd) { border-right: 1px solid #e5eaf2; } }

/* SocialsWise portal redesign v4: phone-led school workspace */
.topbar { position: sticky; top: 0; z-index: 100; width: 100%; }
.school-landing { display: grid; gap: 64px; }
.landing-hero { min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .85fr); align-items: center; gap: 35px; padding: clamp(34px, 6vw, 74px); overflow: hidden; position: relative; border-radius: 28px; background: #2447d8; color: #ffffff; box-shadow: 0 20px 42px rgba(36,71,216,.2); }
.landing-hero:before { content: ""; position: absolute; width: 460px; height: 460px; right: 13%; top: -205px; border-radius: 50%; background: #b7dd35; opacity: .95; }
.landing-hero:after { content: ""; position: absolute; width: 210px; height: 210px; left: 42%; bottom: -130px; border-radius: 50%; background: #6d7ff0; }
.landing-copy, .landing-visual { position: relative; z-index: 1; }
.landing-copy { max-width: 650px; }
.landing-copy .eyebrow { color: #dff36f; }
.landing-copy h1 { max-width: 680px; margin: 16px 0 22px; color: #ffffff; font-size: clamp(3.5rem, 6vw, 6.3rem); line-height: .9; letter-spacing: -.085em; }
.landing-copy > p { max-width: 540px; color: #dce4ff; font-size: 1.08rem; line-height: 1.65; }
.landing-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 32px; }
.landing-actions .primary-button { border-radius: 11px; background: #dff36f; color: #17233f; box-shadow: 0 8px 0 rgba(23,35,63,.22); }
.landing-actions .primary-button:hover { background: #ffffff; }
.text-button { padding: 10px 0; border: 0; background: transparent; color: #ffffff; font-weight: 800; }
.text-button:hover { color: #dff36f; }
.landing-audience { display: flex; align-items: center; gap: 10px; margin-top: 38px; color: #dce4ff; font-size: .77rem; font-weight: 750; }
.audience-check { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #dff36f; color: #17233f; }
.audience-divider { width: 1px; height: 18px; margin: 0 4px; background: rgba(255,255,255,.35); }
.landing-visual { min-height: 535px; display: grid; place-items: center; }
.landing-phone-wrap { position: relative; z-index: 3; width: min(100%, 360px); padding-top: 12px; }
.phone-caption { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #ffffff; font-size: .7rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.phone-caption b { margin-left: auto; color: #dff36f; }
.landing-phone { position: relative; width: 100%; padding: 8px; border: 7px solid #17233f; border-radius: 30px; background: #17233f; box-shadow: 14px 20px 0 rgba(23,35,63,.25), 0 28px 50px rgba(11,22,84,.25); transform: rotate(3deg); }
.landing-phone .phone-notch { position: absolute; z-index: 5; top: 9px; left: calc(50% - 38px); width: 76px; height: 17px; border-radius: 0 0 12px 12px; background: #17233f; }
.landing-phone .preview-phone-top { padding-top: 22px; }
.landing-phone .preview-image { height: 230px; }
.landing-phone .preview-message strong { font-size: .9rem; }
.landing-phone .preview-action { padding: 11px 4px; }
.phone-play { position: absolute; top: 45%; left: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); color: #2447d8; font-size: .8rem; }
.visual-orbit { position: absolute; z-index: 1; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { width: 390px; height: 170px; }
.orbit-two { width: 330px; height: 500px; border-color: rgba(223,243,111,.7); transform: rotate(27deg); }
.visual-sticker { position: absolute; z-index: 4; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: #dff36f; color: #17233f; font-size: .65rem; font-weight: 950; text-align: center; letter-spacing: .08em; transform: rotate(-13deg); }
.sticker-top { top: 33px; right: 0; }
.sticker-bottom { bottom: 35px; left: 3px; background: #ff9d66; transform: rotate(12deg); }
.lesson-workspace { display: grid; gap: 28px; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.workspace-heading .eyebrow, .class-route .eyebrow { color: #2447d8; }
.workspace-heading h2, .class-route h2 { margin: 8px 0 7px; color: #17233f; font-size: clamp(2.2rem, 4vw, 3.8rem); letter-spacing: -.075em; }
.workspace-heading p { margin: 0; color: #71809b; }
.workspace-package { border: 0; border-bottom: 2px solid #2447d8; padding: 10px 0; background: transparent; color: #2447d8; font-weight: 850; white-space: nowrap; }
.workspace-package span { margin-left: 9px; }
.workspace-layout { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.workspace-sidebar { padding: 22px; border: 1px solid #dfe6f1; border-radius: 18px; background: #ffffff; box-shadow: 0 8px 20px rgba(37,58,100,.05); }
.sidebar-label { margin-bottom: 8px; color: #71809b; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.workspace-sidebar > strong { color: #17233f; font-size: 2rem; letter-spacing: -.07em; }
.workspace-sidebar > strong small { color: #8794aa; font-size: .9rem; letter-spacing: 0; }
.workspace-sidebar p { margin: 6px 0 0; color: #71809b; font-size: .74rem; line-height: 1.4; }
.progress-track { height: 7px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: #e8edf5; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #b7dd35; }
.sidebar-rule { height: 1px; margin: 24px 0; background: #e5eaf2; }
.lesson-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lesson-platform-grid .platform-card { min-height: 205px; }
.class-route { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 38px; border-top: 1px solid #dfe6f1; }
.class-route h2 { margin-bottom: 0; }
.class-route-steps { display: flex; gap: 24px; color: #62708a; font-size: .8rem; font-weight: 750; }
.class-route-steps span { display: grid; grid-template-columns: 32px auto; align-items: center; gap: 8px; }
.class-route-steps b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #eef2ff; color: #2447d8; }
@media (max-width: 900px) { .landing-hero { grid-template-columns: 1fr; } .landing-visual { min-height: 500px; } .workspace-layout { grid-template-columns: 1fr; } .workspace-sidebar { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 16px; align-items: center; } .workspace-sidebar .sidebar-rule, .workspace-sidebar p { display: none; } .lesson-platform-grid { grid-template-columns: repeat(2, 1fr); } .class-route { align-items: flex-start; flex-direction: column; } }
@media (max-width: 600px) { .landing-hero { padding: 28px 21px 40px; border-radius: 20px; } .landing-copy h1 { font-size: 3.7rem; } .landing-audience { align-items: flex-start; flex-wrap: wrap; } .landing-visual { min-height: 480px; } .landing-phone-wrap { width: min(100%, 310px); } .landing-phone .preview-image { height: 195px; } .visual-sticker { width: 88px; height: 88px; font-size: .55rem; } .sticker-top { right: -8px; } .sticker-bottom { left: -4px; } .workspace-heading { align-items: flex-start; flex-direction: column; } .lesson-platform-grid { grid-template-columns: 1fr; } .class-route-steps { display: grid; gap: 12px; } }

/* Shared portal navigation and secondary screens */
.nav-home { display: inline-flex; align-items: center; gap: 6px; }
.home-icon { font-size: 1.1rem; line-height: 1; }
.package-page, .review-page { max-width: 1120px; padding: 24px 0 64px; }
.package-hero { padding: 42px 48px; border-radius: 24px; background: #2447d8; color: #ffffff; box-shadow: 0 16px 32px rgba(36,71,216,.14); }
.package-hero .eyebrow, .review-page .eyebrow { color: #dff36f; }
.package-hero h1, .review-page h1 { margin: 12px 0; color: #ffffff; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .95; letter-spacing: -.075em; }
.package-hero .lede, .review-page .lede { max-width: 640px; color: #dce4ff; }
.package-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.package-meta span { padding: 8px 11px; border-radius: 99px; background: rgba(255,255,255,.14); color: #ffffff; font-size: .75rem; font-weight: 750; }
.package-grid { gap: 16px; margin-top: 24px; }
.package-file { min-height: 185px; padding: 24px; border: 1px solid #dfe6f1; border-radius: 18px; background: #ffffff; box-shadow: 0 8px 20px rgba(37,58,100,.05); }
.package-file:hover { transform: translateY(-4px); border-color: #aebcf6; box-shadow: 0 15px 28px rgba(37,58,100,.1); }
.package-file-number { color: #2447d8; }
.package-file strong { color: #17233f; font-size: 1.2rem; }
.package-file > span:not(.package-file-number):not(.package-file-link) { color: #71809b; line-height: 1.5; }
.package-file-link { color: #2447d8; font-weight: 850; }
.package-source-note { color: #71809b; font-size: .82rem; }
.package-footer { margin-top: 28px; }
.review-page .section-heading { padding: 34px 40px; border-radius: 24px; background: #2447d8; }
.review-page .section-heading > div:first-child { color: #ffffff; }
.review-page .final-grade-card { border-color: #dff36f; background: #dff36f; color: #17233f; }
.review-page .final-grade-card strong, .review-page .final-grade-card span { color: #17233f; }
.review-list { display: grid; gap: 12px; margin: 24px 0; }
.review-card { border: 1px solid #dfe6f1; border-radius: 16px; background: #ffffff; box-shadow: 0 7px 18px rgba(37,58,100,.04); }
.review-card.review-safe { border-left: 5px solid #b7dd35; }
.review-card.review-missed { border-left: 5px solid #ff9d66; }
.review-card-top strong { color: #2447d8; }
@media (max-width: 600px) { .package-page, .review-page { padding-top: 10px; } .package-hero, .review-page .section-heading { padding: 28px 22px; border-radius: 18px; } .package-hero h1, .review-page h1 { font-size: 3.1rem; } .package-meta { gap: 6px; } }

/* Local teacher results demo */
.results-page { max-width: 1120px; padding: 24px 0 64px; }
.results-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 40px 46px; border-radius: 24px; background: #2447d8; color: #ffffff; box-shadow: 0 18px 36px rgba(36,71,216,.14); }
.results-hero .eyebrow { color: #dff36f; }
.results-hero h1 { margin: 12px 0; color: #ffffff; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .95; letter-spacing: -.075em; }
.results-hero p { max-width: 620px; margin: 0; color: #dce4ff; line-height: 1.55; }
.results-hero-stat { min-width: 150px; padding: 18px; border-radius: 16px; background: #dff36f; color: #17233f; }
.results-hero-stat strong, .results-hero-stat span { display: block; }
.results-hero-stat strong { font-size: 2rem; letter-spacing: -.07em; }
.results-hero-stat span { margin-top: 4px; font-size: .72rem; font-weight: 800; line-height: 1.35; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0; padding: 16px 18px; border: 1px solid #dfe6f1; border-radius: 16px; background: #ffffff; }
.results-toolbar strong, .results-toolbar span { display: block; }
.results-toolbar strong { color: #17233f; }
.results-toolbar span { margin-top: 3px; color: #71809b; font-size: .76rem; }
.results-toolbar .primary-button { border-radius: 10px; }
.results-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.dashboard-card { min-height: 128px; padding: 20px; border-radius: 18px; box-shadow: 0 8px 20px rgba(37,58,100,.06); }
.dashboard-card span, .dashboard-card small { display: block; }
.dashboard-card span { font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-card strong { display: block; margin: 13px 0 5px; color: #17233f; font-size: 2rem; letter-spacing: -.06em; }
.dashboard-card small { color: #53617a; font-size: .76rem; }
.dashboard-card-blue { background: #e8edff; color: #2447d8; }
.dashboard-card-lime { background: #f1f8d3; color: #597600; }
.dashboard-card-sand { background: #fff2d7; color: #956516; }
.dashboard-card-rose { background: #ffe8e2; color: #a74c3a; }
.dashboard-meter, .mini-meter { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(23,35,63,.12); }
.dashboard-meter { margin-top: 14px; }
.dashboard-meter span, .mini-meter span { display: block; height: 100%; border-radius: inherit; background: #2447d8; }
.dashboard-meter-lime span, .mini-meter-lime span { background: #7ca500; }
.mini-meter { width: 92px; margin-top: 6px; }
.dashboard-platform-panel { grid-column: 1 / -1; margin-top: 0; }
.results-panel { margin-top: 16px; padding: 26px; border: 1px solid #dfe6f1; border-radius: 18px; background: #ffffff; box-shadow: 0 8px 20px rgba(37,58,100,.05); }
.results-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.results-panel h2 { margin: 7px 0 0; color: #17233f; font-size: 1.55rem; letter-spacing: -.04em; }
.results-panel .eyebrow { color: #2447d8; }
.results-badge { padding: 7px 10px; border-radius: 99px; background: #f4fbdc; color: #4f7100; font-size: .7rem; font-weight: 850; }
.results-table-wrap { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; color: #53617a; font-size: .82rem; }
.results-table th { padding: 10px 12px; border-bottom: 1px solid #dfe6f1; color: #71809b; font-size: .69rem; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.results-table td { padding: 14px 12px; border-bottom: 1px solid #edf0f5; }
.results-table tr:last-child td { border-bottom: 0; }
.results-table td:first-child { color: #17233f; }
.results-table td small { display: block; margin-top: 3px; color: #8a96aa; font-size: .68rem; }
.results-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.learner-code-field { display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; color: #6b7892; font-size: .78rem; font-weight: 800; }
.learner-code-field input { width: 105px; border: 1px solid #dfe6f1; border-radius: 8px; padding: 7px 9px; color: #17233f; font: inherit; text-transform: uppercase; }
.review-choice { margin: 10px 0; padding: 9px 12px; border-left: 3px solid #b7dd35; border-radius: 0 9px 9px 0; background: #f5f9e8; color: #39451d; }
.review-missed .review-choice { border-left-color: #ff8a73; background: #fff5f2; color: #6e3328; }
.review-typed-response { margin: 14px 0; padding: 12px 14px; border: 1px solid #dbe4f0; border-radius: 13px; background: #f8faff; }
.review-typed-response strong, .review-typed-response small { display: block; color: #2447d8; font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.review-typed-response p { margin: 7px 0 5px; color: #17233f; font-size: .86rem; line-height: 1.45; }
.review-typed-response small { color: #71809b; font-size: .66rem; text-transform: none; letter-spacing: 0; }
.review-guidance { padding: 10px 12px; border-radius: 10px; background: #fff8e6; color: #805a11 !important; font-size: .78rem; }
.focus-simulation .platform-simulator > .platform-home-body,
.focus-simulation .platform-simulator > .instagram-home-modern,
.focus-simulation .platform-simulator > .tiktok-fullscreen-home,
.focus-simulation .platform-simulator > .snap-camera-home,
.focus-simulation .platform-simulator > .message-detail-shell { flex: 1 1 auto; min-height: 0; }
.platform-home-body, .instagram-home-modern { min-height: 500px; padding: 14px 16px 22px; background: #f7f9fb; animation: event-in .28s ease-out; }
.home-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #172b4d; font-size: .86rem; }
.home-heading span { color: #7d8b9c; font-size: 1.25rem; }
.modern-game { margin-bottom: 16px; }
.modern-game img { width: 70px; height: 70px; border-radius: 9px; object-fit: cover; }
.modern-game button { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.home-feed-tabs { display: flex; gap: 18px; margin: -3px -2px 13px; padding-bottom: 9px; border-bottom: 1px solid #e1e8f0; color: #7a8797; font-size: .73rem; }
.home-feed-tabs strong { color: #202124; border-bottom: 2px solid #ff1744; padding-bottom: 8px; }
.modern-video { height: 235px; border-radius: 12px; }
.home-video-title { display: grid; gap: 4px; padding: 11px 1px 14px; }
.home-video-title strong { font-size: .88rem; }
.home-video-title small { color: #7d8b9c; font-size: .7rem; }
.sim-incoming-card { position: relative; display: grid; grid-template-columns: 8px 34px 1fr 16px; gap: 9px; align-items: start; width: 100%; margin: 13px 0 0; padding: 12px; border: 1px solid #cbd8e5; border-radius: 14px; background: #fff; color: #172b4d; text-align: left; box-shadow: 0 7px 17px rgba(16,42,67,.08); animation: incoming-slide .35s ease-out; }
.sim-incoming-card:hover, .sim-incoming-card:focus-visible { border-color: #1769e0; background: #f4f8ff; transform: translateY(-1px); outline: none; }
.sim-notification-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #ed5a67; box-shadow: 0 0 0 4px rgba(237,90,103,.13); animation: notification-pulse 1.5s infinite; }
.sim-notification-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d6e7ff; color: #17569c; font-size: .72rem; font-weight: 900; }
.sim-notification-copy { display: grid; gap: 3px; min-width: 0; }
.sim-notification-copy strong { font-size: .76rem; }
.sim-notification-copy small { color: #7d8b9c; font-size: .64rem; }
.sim-notification-copy em { overflow: hidden; color: #526b82; font-size: .71rem; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.sim-notification-arrow { align-self: center; color: #8294a7; font-size: 1.4rem; }
.tiktok-fullscreen-home { position: relative; display: flex; min-height: 650px; flex-direction: column; justify-content: space-between; overflow: hidden; background-position: center; background-size: cover; color: #fff; animation: event-in .28s ease-out; }
.tiktok-fullscreen-home .tiktok-head { flex: 0 0 auto; background: transparent; }
.tiktok-fullscreen-home > .tiktok-home-video { z-index: 0; opacity: .76; }
.tiktok-fullscreen-home > .tiktok-head, .tiktok-fullscreen-home > .tiktok-home-copy, .tiktok-fullscreen-home > .tiktok-home-rail, .tiktok-fullscreen-home > .sim-incoming-card, .tiktok-fullscreen-home > .tiktok-bottom { position: relative; z-index: 1; }
.tiktok-fullscreen-home .sim-incoming-card { width: calc(100% - 28px); margin: auto 14px 70px; background: rgba(12,14,20,.82); border-color: rgba(255,255,255,.24); color: #fff; backdrop-filter: blur(8px); }
.tiktok-fullscreen-home .sim-notification-copy small, .tiktok-fullscreen-home .sim-notification-copy em { color: rgba(255,255,255,.72); }
.tiktok-home-copy { margin: auto 80px 18px 17px; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.tiktok-home-copy p { margin: 6px 0; font-size: .8rem; }
.tiktok-home-copy small { opacity: .78; font-size: .68rem; }
.tiktok-home-rail { position: absolute; right: 15px; bottom: 152px; display: grid; gap: 15px; justify-items: center; }
.tiktok-home-rail b { display: grid; gap: 2px; justify-items: center; font-size: 1.35rem; }
.tiktok-home-rail small { font-size: .6rem; font-weight: 500; }
.snap-camera-home { position: relative; min-height: 650px; overflow: hidden; background: #f7c844; color: #202b3c; animation: event-in .28s ease-out; }
.snap-camera-home .snap-head { position: relative; z-index: 2; }
.snap-camera-lens { min-height: 468px; display: grid; place-items: center; background-position: center; background-size: cover; color: white; text-align: center; }
.snap-camera-lens .sim-video { opacity: .74; }
.snap-camera-lens span, .snap-camera-lens b { position: relative; z-index: 1; }
.snap-camera-lens span { margin-top: 250px; font-size: .72rem; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.snap-camera-lens b { position: absolute; bottom: 105px; display: grid; place-items: center; width: 58px; height: 58px; border: 4px solid white; border-radius: 50%; font-size: 1.7rem; }
.snap-chat-peek { display: flex; justify-content: space-between; gap: 10px; padding: 10px 15px; background: #fff; font-size: .72rem; }
.snap-chat-peek span { color: #7d8b9c; }
.snap-camera-home .sim-incoming-card { position: absolute; right: 12px; bottom: 148px; z-index: 3; width: calc(100% - 24px); }
.whatsapp-home-modern { min-height: 500px; background: #eee8de; }
.wa-chat-row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 3px; border-bottom: 1px solid rgba(92,109,101,.15); }
.wa-chat-row > div { display: flex; align-items: center; gap: 10px; }
.wa-chat-row span { display: grid; gap: 3px; }
.wa-chat-row small { color: #71816f; font-size: .68rem; }
.wa-chat-row > b { color: #0e806a; font-size: .65rem; }
.whatsapp-home-modern .sim-incoming-card { border-color: #b7d7c4; }
.instagram-home-modern { background: #fff; }
.instagram-home-modern .ig-stories { margin: -14px -16px 0; }
.ig-feed-card { overflow: hidden; margin-top: 14px; border-bottom: 1px solid #edf1f5; }
.ig-feed-card > img { display: block; width: 100%; height: 275px; object-fit: cover; }
.ig-feed-caption { display: grid; gap: 3px; padding: 10px 2px; font-size: .75rem; }
.ig-feed-caption span { color: #526b82; }
.facebook-home-modern { min-height: 500px; background: #f0f2f5; }
.fb-feed-card { margin-top: 13px; padding: 12px 14px; background: #fff; }
.fb-feed-card .profile-row { padding: 0 0 12px; border: 0; }
.fb-feed-card .profile-row div { flex: 1; }
.fb-feed-card .fb-photo { width: calc(100% + 28px); height: 205px; margin: 0 -14px 12px; }
.facebook-home-modern .sim-incoming-card { border-color: #b9d2f5; }
.message-detail-shell { min-height: 570px; background: #f7f9fb; animation: event-in .28s ease-out; }
.native-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; background: #fff; border-bottom: 1px solid #e1e8f0; color: #526b82; font-size: .73rem; }
.native-detail-bar strong { color: #172b4d; font-size: .82rem; }
.native-chat-detail { min-height: 490px; padding: 28px 18px 18px; background: #f7f9fb; text-align: center; }
.native-chat-detail > .round-avatar { width: 46px; height: 46px; margin: 0 auto 8px; }
.native-chat-detail > strong, .native-chat-detail > small { display: block; }
.native-chat-detail > strong { font-size: .85rem; }
.native-chat-detail > small { margin-top: 3px; color: #7d8b9c; font-size: .66rem; }
.native-chat-detail > p { max-width: 310px; margin: 22px auto 18px; padding: 14px; border-radius: 15px; background: #fff; color: #334e68; font-size: .82rem; line-height: 1.5; text-align: left; box-shadow: 0 6px 16px rgba(16,42,67,.06); }
.native-chat-detail .platform-inline-actions { max-width: 325px; margin: 18px auto; border-radius: 12px; }
.native-reply-bar { display: flex; justify-content: space-between; gap: 10px; max-width: 325px; margin: 22px auto 0; padding: 10px 13px; border: 1px solid #d9e2ec; border-radius: 99px; background: #fff; color: #8a98a8; font-size: .7rem; text-align: left; }
.native-reply-bar span { color: #1769e0; }
.native-reply-form { display: flex; gap: 8px; max-width: 325px; margin: 22px auto 0; padding: 6px; border: 1px solid #d9e2ec; border-radius: 99px; background: #fff; box-shadow: 0 5px 13px rgba(16,42,67,.05); }
.native-reply-form input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 8px 10px; color: #172b4d; background: transparent; font: inherit; font-size: .76rem; }
.native-reply-form button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #1769e0; color: #fff; cursor: pointer; font-size: 1rem; }
.native-reply-form button:hover, .native-reply-form button:focus-visible { background: #0c4eb3; transform: translateY(-1px); }
.sent-reply-state { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 325px; margin: 22px auto 0; padding: 12px; border-radius: 99px; background: #e9f8ee; color: #19713a; font-size: .76rem; font-weight: 800; animation: event-in .25s ease-out; }
.sent-reply-state span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2da45a; color: #fff; }
.reaction-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; margin: 18px auto 0; padding: 8px; border: 1px solid #d9e2ec; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 10px 22px rgba(16,42,67,.14); animation: reaction-pop .18s ease-out; }
.reaction-choice { display: grid; justify-items: center; gap: 2px; min-width: 39px; padding: 6px 4px; border: 0; border-radius: 12px; background: transparent; color: #526b82; cursor: pointer; }
.reaction-choice span { font-size: 1.45rem; line-height: 1; transition: transform .15s ease; }
.reaction-choice small { font-size: .52rem; font-weight: 800; white-space: nowrap; }
.reaction-choice:hover, .reaction-choice:focus-visible { background: #edf4ff; outline: 0; }
.reaction-choice:hover span, .reaction-choice:focus-visible span { transform: translateY(-4px) scale(1.12); }
.tiktok-detail .native-reply-form { background: #202127; border-color: #40424a; }
.tiktok-detail .native-reply-form input { color: #fff; }
.message-detail-shell { position: relative; overflow: hidden; }
.message-detail-shell > *:not(.ambient-activity) { position: relative; z-index: 1; }
.ambient-activity { position: absolute; inset: 58px 0 auto; z-index: 2; height: 180px; overflow: hidden; pointer-events: none; opacity: .28; }
.ambient-activity span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #1769e0; animation: ambient-float 4.8s ease-in-out infinite; }
.ambient-activity span:nth-child(1) { left: 12%; top: 52px; animation-delay: -.8s; }
.ambient-activity span:nth-child(2) { left: 78%; top: 96px; background: #ff6b8a; animation-delay: -2.2s; }
.ambient-activity span:nth-child(3) { left: 48%; top: 18px; background: #f7c844; animation-delay: -3.4s; }
@keyframes reaction-pop { from { opacity: 0; transform: translateY(5px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ambient-float { 0%, 100% { transform: translate3d(0, 10px, 0) scale(.75); opacity: .25; } 50% { transform: translate3d(13px, -12px, 0) scale(1.25); opacity: .85; } }
.youtube-detail-video { position: relative; height: 235px; overflow: hidden; background: #202b3c; }
.native-comment-detail { display: flex; gap: 10px; padding: 15px; background: #fff; text-align: left; }
.native-comment-detail > div { flex: 1; }
.native-comment-detail small { display: block; margin-top: 3px; color: #7d8b9c; font-size: .65rem; }
.native-comment-detail p { margin: 9px 0; color: #334e68; font-size: .78rem; line-height: 1.45; }
.native-comment-detail span { color: #7d8b9c; font-size: .66rem; }
.dark-detail, .tiktok-detail { background: #101014; color: #fff; }
.tiktok-detail { min-height: 535px; background: #101014; }
.tiktok-detail > strong { color: #fff; }
.tiktok-detail > p { background: #25262d; color: #fff; }
.tiktok-detail .native-reply-bar { background: #202127; border-color: #40424a; color: #aeb2be; }
.snapchat-detail { background: #f7c844; }
.snapchat-detail > img { display: block; width: 100%; max-height: 220px; margin: 19px auto 0; border-radius: 14px; object-fit: cover; }
.snapchat-detail > p { background: #fff; }
.whatsapp-detail { background: #eee8de; }
.whatsapp-detail-bar { background: #0e806a; color: #b6e6da; }
.whatsapp-detail-bar strong { color: #fff; }
.whatsapp-detail .wa-bubble { max-width: 325px; margin: 24px auto 18px; text-align: left; }
.instagram-detail { background: #fff; }
.facebook-detail { background: #f0f2f5; }
.facebook-detail > p { background: #fff; }
@media (max-width: 520px) { .sim-incoming-card { grid-template-columns: 7px 30px 1fr 12px; gap: 7px; padding: 10px; } .sim-notification-avatar { width: 30px; height: 30px; } .tiktok-fullscreen-home, .snap-camera-home { min-height: 610px; } .native-chat-detail { padding-left: 13px; padding-right: 13px; } }
.code-gate { max-width: 620px; margin: 54px auto; padding: 38px; border: 1px solid #dfe6f1; border-radius: 24px; background: #ffffff; box-shadow: 0 18px 36px rgba(37,58,100,.08); }
.code-gate h1 { margin: 10px 0 12px; color: #17233f; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.07em; }
.code-gate .lede { max-width: 510px; color: #53617a; line-height: 1.6; }
.code-gate-form { display: grid; gap: 12px; max-width: 360px; margin: 28px 0 14px; }
.code-gate-form label { display: grid; gap: 7px; color: #17233f; font-size: .8rem; font-weight: 850; }
.code-gate-form input { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e5; border-radius: 11px; padding: 13px 14px; color: #17233f; background: #fbfcff; font: inherit; font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.code-gate-form input:focus { outline: 3px solid rgba(36,71,216,.16); border-color: #2447d8; }
@media (max-width: 600px) { .code-gate { margin: 24px 0; padding: 28px 22px; border-radius: 18px; } .code-gate h1 { font-size: 3.1rem; } }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .results-page { padding-top: 10px; } .results-hero { align-items: start; flex-direction: column; padding: 29px 22px; border-radius: 18px; } .results-hero h1 { font-size: 3.3rem; } .results-hero-stat { width: 100%; } .results-toolbar { align-items: start; flex-direction: column; } .results-toolbar-actions { width: 100%; justify-content: stretch; } .results-toolbar-actions button { flex: 1; } .results-toolbar .primary-button { width: 100%; } .results-panel { padding: 20px 14px; } .learner-code-field { margin: 12px 0 0; } }