:root{--s1: 6px;--s2: 10px;--s3: 14px;--s4: 18px;--s5: 24px;--s6: 32px;--r-sm: 10px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--radius-sm: var(--r-sm);--radius-md: var(--r-md);--radius-lg: var(--r-lg);--gap-1: var(--s1);--gap-2: var(--s2);--gap-3: var(--s3);--bg: #060b16;--panel: rgba(13, 22, 39, .78);--panel2: rgba(16, 28, 50, .86);--border: rgba(137, 168, 228, .28);--text: #eaf1ff;--muted: #a7b5d1;--accent: #5aa0ff;--accent2: #8b5cf6;--shadow: 0 18px 50px rgba(2, 8, 23, .48);--radius: 16px;--app-bg: var(--bg);--surface-1: rgba(7, 14, 26, .95);--surface-2: var(--panel);--surface-3: var(--panel2);--border-1: var(--border);--border-2: rgba(137, 168, 228, .45);--panel-bg: var(--panel);--panel-hero-bg: var(--panel2);--panel-muted: color-mix(in oklab, var(--panel2) 82%, transparent);--panel-border: var(--border);--text-main: var(--text);--text-muted: var(--muted);--primary: var(--accent);--warning: #f59e0b;--danger-fg: #ff7c9d;--success-fg: #4ade80;--on-primary: #051225;--success-bg-soft: rgba(74, 222, 128, .15);--danger-bg-soft: rgba(255, 124, 157, .14);--chain-line: rgba(167, 181, 209, .35);--progress-track: rgba(167, 181, 209, .2);--progress-fill: var(--accent);--cta-border: var(--accent);--cta-bg: rgba(90, 160, 255, .15);--campaign-mastered-bg: rgba(74, 222, 128, .16);--campaign-mastered-border: rgba(74, 222, 128, .4);--campaign-mastered-dot: #4ade80;--campaign-completed-bg: rgba(90, 160, 255, .18);--campaign-completed-border: rgba(90, 160, 255, .45);--campaign-completed-dot: #5aa0ff;--campaign-current-bg: rgba(245, 158, 11, .2);--campaign-current-border: rgba(245, 158, 11, .45);--campaign-current-dot: #f59e0b;--campaign-locked-bg: rgba(122, 136, 167, .18);--campaign-locked-border: rgba(122, 136, 167, .38);--campaign-locked-dot: #8f9ab4;--primary-soft: var(--cta-bg);--success-soft: var(--success-bg-soft);--danger-soft: var(--danger-bg-soft);--warning-soft: rgba(245, 158, 11, .2);--shadow-sm: 0 8px 24px rgba(2, 6, 23, .35);--shadow-md: 0 16px 40px rgba(2, 6, 23, .5);--focus-ring: rgba(90, 160, 255, .45);--sh-sm: var(--shadow-sm);--sh-md: var(--shadow-md);--text-h1: clamp(30px, 4.4vw, 44px);--text-h2: clamp(24px, 3.4vw, 32px);--text-h3: clamp(18px, 2.5vw, 24px);--text-body: 15px;--text-muted-size: 13px;--app-content-max: 980px;--public-content-max: 1120px;--app-gutter: 14px}[data-theme=light]{--bg: #eef3ff;--panel: rgba(255, 255, 255, .88);--panel2: rgba(245, 249, 255, .9);--border: rgba(47, 98, 216, .22);--text: #0f172a;--muted: #475569;--accent: #2f62d8;--accent2: #2563eb;--shadow: 0 18px 50px rgba(15, 23, 42, .15);--on-primary: #ffffff;--panel-muted: color-mix(in oklab, #e2e8f0 72%, transparent);--danger-fg: #b00020;--success-fg: #0f8a3f;--success-bg-soft: rgba(34, 197, 94, .12);--danger-bg-soft: rgba(239, 68, 68, .12)}html,body,#root{min-height:100%;width:100%;max-width:100%;overflow-x:hidden}body{margin:0;color:var(--text-main);background:radial-gradient(850px 420px at -10% -10%,rgba(90,160,255,.22),transparent 55%),radial-gradient(900px 460px at 110% 0%,rgba(139,92,246,.2),transparent 52%),linear-gradient(180deg,#070f1d,#060b16 55%,#050914);font-family:Segoe UI,SF Pro Text,Nunito Sans,system-ui,sans-serif}.container{width:100%;max-width:1120px;margin:0 auto;padding:0 14px}.app-shell{min-height:100dvh;background:var(--app-bg);color:var(--text-main)}.app-private-wrap{width:min(calc(100% - (2 * var(--app-gutter, 14px))),var(--app-content-max, 980px));margin:0 auto;max-width:100%}.app-public-wrap{width:min(calc(100% - (2 * var(--app-gutter, 14px))),var(--public-content-max, 1120px));margin:0 auto;max-width:100%}.app-center{min-height:100dvh;display:grid;place-items:center;background:var(--app-bg);color:var(--text-main)}.app-page{max-width:980px;margin:0 auto;padding:14px}.glass{background:linear-gradient(150deg,color-mix(in oklab,var(--panel-bg) 86%,transparent),color-mix(in oklab,var(--panel-hero-bg) 84%,transparent));border:1px solid var(--panel-border);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-lg)}.glow{box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 30%,transparent),var(--shadow)}.ring{box-shadow:0 0 0 3px var(--focus-ring)}.muted{color:var(--text-muted)}.section{padding:var(--s4);border-radius:var(--radius-lg)}.t-h1{margin:0;font-size:var(--text-h1);line-height:1.1;font-weight:800}.t-h2{margin:0;font-size:var(--text-h2);line-height:1.15;font-weight:800}.t-h3{margin:0;font-size:var(--text-h3);line-height:1.2;font-weight:700}.t-body{font-size:var(--text-body);line-height:1.5}.t-muted{font-size:var(--text-muted-size);color:var(--text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 14px;border-radius:12px;cursor:pointer;border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text-main);font-weight:700;transition:transform .14s ease,box-shadow .16s ease,border-color .12s ease}.btn.primary{border-color:var(--primary);background:linear-gradient(120deg,color-mix(in oklab,var(--accent) 82%,white 10%),color-mix(in oklab,var(--accent2) 70%,var(--accent) 30%));color:var(--on-primary)}.btn.ghost{background:color-mix(in oklab,var(--panel-bg) 90%,transparent)}.btn.soft{background:var(--primary-soft)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.badge{display:inline-flex;align-items:center;border:1px solid var(--panel-border);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--text-main);background:color-mix(in oklab,var(--panel-bg) 70%,transparent)}.stat{padding:14px;border-radius:14px;border:1px solid var(--panel-border);background:color-mix(in oklab,var(--panel-bg) 84%,transparent)}.stat .label{font-size:12px;color:var(--text-muted)}.stat .value{margin-top:6px;font-size:24px;font-weight:800}.hover-lift{transition:transform .18s ease,box-shadow .18s ease}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.hero-premium{position:relative;overflow:hidden;min-height:min(78vh,640px);display:flex;align-items:center;border-radius:var(--radius-lg);border:1px solid var(--panel-border);box-shadow:var(--shadow-sm)}.hero-premium-bg,.hero-premium-grid,.hero-premium-overlay{position:absolute;top:0;right:0;bottom:0;left:0}.hero-premium-bg{z-index:1;background:linear-gradient(145deg,#070e1a4d,#070e1a61),url(/images/opometro_hero.webp),radial-gradient(760px 340px at -5% -10%,rgba(90,160,255,.36),transparent 62%),radial-gradient(820px 360px at 110% -4%,rgba(139,92,246,.28),transparent 62%),linear-gradient(145deg,color-mix(in oklab,var(--panel-hero-bg) 92%,#071126 8%),color-mix(in oklab,var(--panel-bg) 88%,#050b18 12%));background-position:center,center,-8% -14%,108% -6%,center;background-size:cover,cover,auto,auto,auto;background-repeat:no-repeat;background-blend-mode:normal,soft-light,screen,screen,normal;will-change:transform}.hero-premium-grid{z-index:2;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;opacity:.36;pointer-events:none;will-change:transform}.hero-premium-overlay{z-index:3;background:linear-gradient(180deg,#070d1833,#070d1861 54%,#050b1594)}.hero-premium-content{position:relative;z-index:4;width:100%;display:grid;gap:14px;align-content:center}.image-premium{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--panel-border);display:block}.image-medium{max-width:420px;margin:0 auto}.image-wide{max-width:560px;margin:0 auto}.split-marketing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}.game-card{overflow:hidden}.game-card__media{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:var(--r-lg, 16px);overflow:hidden;background:var(--panel-muted);box-shadow:var(--sh-sm)}.game-card__media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.01)}.game-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,color-mix(in oklab,black 55%,transparent),transparent 62%)}.game-card__body{padding-top:12px}.game-card__titleRow{display:flex;align-items:center;gap:8px}.game-card__icon{font-size:18px;line-height:1}.game-card__desc{margin-top:8px;color:var(--text-muted)}.game-card__tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}.game-card__actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.public-games-grid{display:grid;gap:10px;grid-template-columns:1fr}@media (min-width: 720px){.public-games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.public-games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.drive-question-card,.game-question-card{position:relative;overflow:hidden;padding:16px;border:1px solid var(--panel-border);border-radius:12px;background:radial-gradient(520px 240px at -10% -30%,color-mix(in oklab,var(--accent) 34%,transparent),transparent 70%),radial-gradient(620px 260px at 110% -24%,color-mix(in oklab,var(--accent2) 30%,transparent),transparent 72%),linear-gradient(145deg,color-mix(in oklab,var(--panel-hero-bg) 90%,#060d1a 10%),color-mix(in oklab,var(--panel-bg) 90%,#050b15 10%));background-size:auto,auto,auto;background-position:left top,right top,center;box-shadow:var(--shadow-sm)}.game-question-card--exam{background:radial-gradient(480px 220px at -12% -22%,color-mix(in oklab,#60a5fa 34%,transparent),transparent 70%),radial-gradient(560px 240px at 112% -22%,color-mix(in oklab,#38bdf8 28%,transparent),transparent 72%),linear-gradient(145deg,color-mix(in oklab,var(--panel-hero-bg) 90%,#07111f 10%),color-mix(in oklab,var(--panel-bg) 90%,#050b15 10%))}.game-question-card--sprint{background:radial-gradient(480px 220px at -12% -22%,color-mix(in oklab,#f59e0b 28%,transparent),transparent 70%),radial-gradient(560px 240px at 112% -22%,color-mix(in oklab,#f97316 24%,transparent),transparent 72%),linear-gradient(145deg,color-mix(in oklab,var(--panel-hero-bg) 90%,#101319 10%),color-mix(in oklab,var(--panel-bg) 90%,#070b12 10%))}.game-question-card--transfer{background:radial-gradient(480px 220px at -12% -22%,color-mix(in oklab,#22c55e 28%,transparent),transparent 70%),radial-gradient(560px 240px at 112% -22%,color-mix(in oklab,#0ea5e9 24%,transparent),transparent 72%),linear-gradient(145deg,color-mix(in oklab,var(--panel-hero-bg) 90%,#0a1519 10%),color-mix(in oklab,var(--panel-bg) 90%,#050d14 10%))}.drive-question-card__overlay,.game-question-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#060b1538,#060b1585),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 28px)}.drive-question-card__content,.game-question-card__content{position:relative;z-index:1}.app-header-private{background:linear-gradient(145deg,color-mix(in oklab,var(--panel-bg) 92%,#040a14 8%),color-mix(in oklab,var(--panel-hero-bg) 92%,#050b14 8%));border-color:color-mix(in oklab,var(--panel-border) 84%,transparent);box-shadow:0 8px 24px #02081761}.game-result-card{position:relative;overflow:hidden;border:1px solid var(--panel-border);border-radius:12px;box-shadow:var(--shadow-sm)}.game-result-card--exam{background:radial-gradient(460px 220px at -12% -20%,color-mix(in oklab,#3b82f6 30%,transparent),transparent 72%),radial-gradient(540px 240px at 112% -22%,color-mix(in oklab,#22d3ee 24%,transparent),transparent 72%),linear-gradient(145deg,color-mix(in oklab,var(--panel-hero-bg) 92%,#06101c 8%),color-mix(in oklab,var(--panel-bg) 92%,#040b15 8%))}.game-result-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#060b153d,#060b1580),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 26px)}.game-result-card__content{position:relative;z-index:1;padding:16px}.game-result-card__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 12px}@media (max-width: 900px){.split-marketing{grid-template-columns:1fr}}@media (prefers-reduced-motion: no-preference){.image-hover{transition:transform .18s ease,box-shadow .18s ease}.image-hover:hover{transform:scale(1.02)}}@keyframes opometro-shimmer{0%{background-position:200% 0}to{background-position:-20% 0}}.desktop-nav{display:flex}.mobile-nav,.mobile-nav-pills,.mobile-identity-chip{display:none}.account-home-identity{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;align-items:center}input,select,textarea,button{font:inherit}input,select,textarea{min-height:44px;border:1px solid color-mix(in oklab,var(--border-1) 90%,transparent);border-radius:var(--radius-md);padding:10px 12px;background:color-mix(in oklab,var(--surface-2) 86%,transparent);color:var(--text-main);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}input::placeholder,textarea::placeholder{color:var(--text-muted)}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.62;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring),var(--shadow-sm)}a,button{color:inherit}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(90,160,255,.45) transparent}img,video,canvas,svg{max-width:100%}@media (max-width: 720px){.app-private-wrap,.app-public-wrap{width:calc(100% - 16px)}.section{padding:14px}.desktop-nav{display:none!important}.mobile-nav{display:none}.mobile-nav-pills{margin-top:8px;display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.mobile-nav-pills::-webkit-scrollbar{display:none}.mobile-nav-pills .btn{flex:0 0 auto;min-height:34px;padding:6px 10px}.mobile-identity-chip{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--panel-border);border-radius:999px;padding:4px 8px 4px 4px;background:color-mix(in oklab,var(--panel-bg) 88%,transparent)}.mobile-identity-name{font-size:13px;font-weight:700;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-home-identity{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}.account-home-avatar{margin:0 auto}.account-home-actions{display:grid!important;grid-template-columns:1fr}.account-home-actions .btn{width:100%}.account-home-logout-btn{width:100%;max-width:220px}}@media (prefers-reduced-motion: reduce){.hero-premium-bg,.hero-premium-grid{transform:none!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}