.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar-width); padding: 22px 16px 17px; background: var(--bg-soft); border-right: 1px solid var(--border); }
.brand-row { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 7px; margin-bottom: 34px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; color: white; font-size: 13px; font-weight: 850; letter-spacing: -.08em; border-radius: 13px; background: linear-gradient(145deg, #8d7dff, #4b8ee9); box-shadow: 0 8px 25px rgba(110,97,240,.3); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { color: var(--text); font-size: 17px; letter-spacing: -.06em; }
.brand-copy strong span { color: #9e91ff; }
.brand-copy small { margin-top: 5px; color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.sidebar-label { padding: 0 11px 10px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.sidebar-label-spaced { margin-top: 24px; }
.primary-nav { display: grid; gap: 4px; }
.primary-nav a { display: flex; align-items: center; min-height: 43px; gap: 12px; padding: 0 11px; color: var(--muted); font-size: 12px; font-weight: 620; border: 1px solid transparent; border-radius: 10px; transition: color var(--transition), background var(--transition), border-color var(--transition); }
.primary-nav a:hover { color: var(--text); background: var(--surface); }
.primary-nav a.active { color: var(--text); background: linear-gradient(100deg, rgba(132,115,255,.18), rgba(87,119,226,.08)); border-color: rgba(142,126,255,.17); box-shadow: inset 3px 0 #8978ff; }
.nav-icon { display: grid; width: 19px; place-items: center; color: #8996b3; font-size: 18px; line-height: 1; }
.primary-nav a.active .nav-icon { color: #a89cff; }
.nav-tag { margin-left: auto; padding: 3px 6px; color: #9fe5ee; background: rgba(72,194,215,.1); border-radius: 5px; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.sidebar-bottom { margin-top: auto; }
.sidebar-quest-card { position: relative; overflow: hidden; padding: 15px; background: linear-gradient(145deg, rgba(111,93,220,.16), rgba(58,124,181,.08)); border: 1px solid rgba(137,120,255,.16); border-radius: 14px; }
.quest-spark { display: block; margin-bottom: 9px; color: #a89cff; font-size: 19px; }
.sidebar-quest-card strong { display: block; font-size: 11px; }
.sidebar-quest-card p { margin: 5px 0 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sidebar-quest-card a { color: #a99eff; font-size: 10px; font-weight: 750; }
.sidebar-quest-card a span { padding-left: 4px; }
.sidebar-foot { display: flex; align-items: center; gap: 7px; margin: 15px 2px 0; color: var(--muted-2); font-size: 9px; }
.status-dot, .live-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px rgba(75,212,160,.65); }
.app-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; height: var(--topbar-height); padding: 0 clamp(20px, 3vw, 46px); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 16px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.breadcrumb strong { color: var(--text-soft); font-weight: 700; }
.breadcrumb-sep { color: var(--muted-2); }
.topbar-streak { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.topbar-streak span { font-size: 13px; }
.topbar-streak strong { color: var(--text); font-size: 11px; }
.topbar-streak small { color: var(--muted); font-size: 9px; }
.profile-chip { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 5px; border: 1px solid var(--border); border-radius: 11px; transition: background var(--transition); }
.profile-chip:hover { background: var(--surface); }
.avatar { display: grid; width: 32px; height: 32px; place-items: center; color: white; background: linear-gradient(140deg, #8f7aff, #568adf); border-radius: 9px; font-weight: 800; }
.profile-copy { display: grid; line-height: 1.2; }
.profile-copy strong { font-size: 10px; }
.profile-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.chevron { color: var(--muted); font-size: 15px; }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.icon-button:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.menu-toggle, .sidebar-close, .mobile-scrim { display: none; }
.welcome-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin: 5px 0 25px; }
.welcome-row h1 { max-width: 740px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .9fr); gap: 25px; }
.main-column, .side-column { min-width: 0; }
.side-column { display: grid; align-content: start; gap: 16px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 30px 0 15px; }
.section-heading h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.035em; }
.section-heading h3 { margin: 4px 0 0; font-size: 15px; letter-spacing: -.025em; }
.section-heading.compact { align-items: flex-start; margin: 0 0 17px; }
.section-heading-spaced { margin-top: 32px; }
.subtle-link { color: #a99eff; font-size: 10px; font-weight: 750; white-space: nowrap; }
.subtle-link:hover { color: var(--cyan); }

/* Secondary page layouts */
.feature-banner, .campaign-feature, .challenge-banner, .test-intro-card, .sandbox-hero { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: space-between; min-height: 250px; padding: 30px 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-xl); }
.feature-banner-copy, .campaign-feature-copy, .test-intro-card > div:first-child, .sandbox-copy { position: relative; z-index: 2; max-width: 570px; }
.feature-banner h2, .campaign-feature h2, .challenge-banner h2, .test-intro-card h2, .sandbox-hero h2 { margin: 12px 0 9px; font-size: clamp(24px,2.5vw,34px); line-height: 1.13; letter-spacing: -.05em; }
.feature-banner p, .campaign-feature p, .challenge-banner p, .test-intro-card p, .sandbox-hero p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.feature-banner .button { margin-top: 19px; }
.feature-learn { background: linear-gradient(105deg, rgba(61,48,129,.45), rgba(25,67,98,.42)); }
.feature-practice { background: linear-gradient(105deg, rgba(31,78,110,.48), rgba(42,49,105,.42)); }
.lesson-illustration, .practice-orbit { position: relative; width: 270px; height: 210px; flex: 0 0 270px; }
.lesson-ring, .practice-orbit-circle { position: absolute; inset: 6px 25px; border: 1px solid rgba(157,145,255,.28); border-radius: 50%; box-shadow: inset 0 0 40px rgba(110,100,239,.12), 0 0 45px rgba(110,100,239,.12); }
.lesson-key { position: absolute; display: grid; width: 43px; height: 43px; place-items: center; color: white; background: linear-gradient(145deg, #8273ef, #435ea2); border: 1px solid rgba(255,255,255,.25); border-radius: 11px; box-shadow: 0 9px 20px rgba(0,0,0,.22); font-weight: 850; }.lesson-key-1 { top: 22px; left: 46px; }.lesson-key-2 { top: 78px; left: 16px; }.lesson-key-3 { bottom: 27px; left: 82px; }.lesson-key-4 { top: 58px; right: 27px; }.lesson-hand { position: absolute; right: 75px; bottom: 11px; font-size: 56px; filter: drop-shadow(0 9px 17px rgba(0,0,0,.25)); transform: rotate(-17deg); }
.practice-orbit-circle { border-style: dashed; }.practice-key { position: absolute; z-index: 2; display: grid; width: 48px; height: 48px; place-items: center; color: #eff9ff; background: linear-gradient(145deg, rgba(95,190,220,.42), rgba(105,95,200,.42)); border: 1px solid rgba(255,255,255,.24); border-radius: 13px; box-shadow: 0 10px 20px rgba(0,0,0,.22); font-size: 18px; font-weight: 850; }.pk-a { top: 27px; left: 47px; transform: rotate(-12deg); }.pk-b { top: 52px; right: 32px; transform: rotate(9deg); }.pk-c { bottom: 17px; left: 111px; transform: rotate(-5deg); }.practice-center { position: absolute; top: 50%; left: 50%; display: grid; width: 67px; height: 67px; place-items: center; color: white; background: rgba(118,105,234,.65); border: 1px solid rgba(255,255,255,.25); border-radius: 20px; font-size: 30px; transform: translate(-50%,-50%); }.practice-spark { position: absolute; color: #b9f3e5; font-size: 21px; }.ps-1 { top: 2px; right: 90px; }.ps-2 { bottom: 8px; right: 23px; color: #ffd99b; }
.level-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }.level-card-item { min-width: 0; padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: transform var(--transition), border-color var(--transition); }.level-card-item:hover { transform: translateY(-2px); border-color: var(--border-strong); }.level-current { background: linear-gradient(145deg, rgba(113,98,230,.16), var(--surface) 75%); border-color: rgba(137,120,255,.3); }.level-locked { opacity: .68; }.level-card-top, .level-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.level-number { color: var(--muted); font-size: 10px; font-weight: 850; }.level-state { color: #ac9fff; font-size: 7px; font-weight: 850; letter-spacing: .1em; }.level-locked .level-state { color: var(--muted-2); }.level-symbol { display: grid; width: 39px; height: 39px; place-items: center; margin: 17px 0 11px; color: #b7adff; background: rgba(137,120,255,.13); border-radius: 11px; font-size: 17px; font-weight: 800; }.level-card-item h3 { margin: 0; font-size: 11px; }.level-card-item p { min-height: 43px; margin: 5px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.55; }.level-bottom { padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 8px; }
.learning-note { display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; padding: 17px 19px; }.note-icon { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; color: #b5aaff; background: rgba(137,120,255,.13); border-radius: 9px; font-size: 16px; }.learning-note strong { font-size: 11px; }.learning-note p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.activity-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.activity-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; transition: transform var(--transition), border-color var(--transition), background var(--transition); }.activity-icon { display: grid; flex: 0 0 auto; width: 37px; height: 37px; place-items: center; border-radius: 10px; font-size: 16px; font-weight: 800; }.activity-icon.blue, .mode-icon.blue { color: #91c7ff; background: rgba(83,153,228,.13); }.activity-icon.green, .mode-icon.green { color: #83e6ba; background: rgba(75,212,160,.12); }.activity-icon.orange, .mode-icon.orange { color: #ffd18b; background: rgba(255,189,103,.12); }.activity-icon.pink, .mode-icon.pink { color: #ff9bb1; background: rgba(244,107,152,.12); }.activity-card h3 { margin: 0; font-size: 10px; }.activity-card p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }.activity-arrow { margin-left: auto; color: var(--muted-2); }
.campaign-feature { min-height: 280px; color: white; background: linear-gradient(110deg,#24265a,#31527b 100%); border-color: rgba(158,152,255,.24); }.campaign-feature-copy { max-width: 520px; }.campaign-feature p { color: #c1c8e5; }.campaign-facts { display: flex; flex-wrap: wrap; gap: 15px; margin: 17px 0 20px; color: #c6d0ef; font-size: 9px; }.campaign-feature:before { pointer-events: none; }.campaign-map-art { position: absolute; top: 0; right: 0; width: 43%; height: 100%; min-width: 300px; background: radial-gradient(circle at 52% 50%, rgba(105,214,215,.22), transparent 54%); }.map-path { position: absolute; top: 24%; left: 20%; width: 65%; height: 57%; border: 2px dashed rgba(176,216,228,.47); border-left-color: transparent; border-radius: 49% 40% 55% 35%; transform: rotate(-18deg); }.map-node { position: absolute; display: grid; width: 47px; height: 47px; place-items: center; color: white; background: linear-gradient(140deg,#8a7afa,#467fbd); border: 2px solid rgba(255,255,255,.42); border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,.2); font-size: 18px; }.node-one { top: 20%; left: 18%; }.node-two { top: 50%; left: 54%; background: linear-gradient(140deg,#3f9a9e,#4761b6); }.node-three { right: 9%; bottom: 14%; background: linear-gradient(140deg,#d39252,#a9577f); }.map-flag { position: absolute; top: 14%; right: 6%; color: #b7f1e6; font-size: 8px; font-weight: 850; letter-spacing: .15em; }.map-stars { position: absolute; left: 30%; bottom: 12%; color: rgba(255,225,153,.68); font-size: 17px; }.campaign-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.campaign-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }.campaign-card-art { position: relative; display: flex; height: 105px; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg,#263a70,#263052); }.campaign-card-art:before { position: absolute; inset: 0; content: ""; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px); background-size: 20px 20px; }.campaign-card-art > span { position: relative; color: rgba(255,255,255,.88); font-size: 48px; text-shadow: 0 8px 25px rgba(0,0,0,.2); }.campaign-card-art small { position: absolute; right: 12px; bottom: 10px; color: rgba(255,255,255,.65); font-size: 7px; font-weight: 850; letter-spacing: .15em; }.tone-purple .campaign-card-art { background: linear-gradient(135deg,#51418a,#263c71); }.tone-orange .campaign-card-art { background: linear-gradient(135deg,#8e5e3d,#4d4268); }.tone-green .campaign-card-art { background: linear-gradient(135deg,#286b67,#344a77); }.tone-cyan .campaign-card-art { background: linear-gradient(135deg,#276b83,#34456e); }.tone-pink .campaign-card-art { background: linear-gradient(135deg,#874a78,#45416f); }.campaign-card-copy { padding: 14px; }.campaign-card-copy h3 { margin: 9px 0 4px; font-size: 13px; }.campaign-card-copy p { min-height: 34px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.campaign-card-foot { display: flex; justify-content: space-between; gap: 7px; margin-top: 13px; padding-top: 10px; color: var(--muted-2); border-top: 1px solid var(--border); font-size: 8px; }.lock-label { color: var(--muted-2); font-weight: 850; letter-spacing: .08em; }
.challenge-banner { min-height: 240px; background: linear-gradient(105deg,rgba(32,78,105,.53),rgba(62,49,119,.44)); }.challenge-banner > div:first-child { position: relative; z-index: 2; }.challenge-banner h2 { max-width: 500px; }.challenge-banner p { max-width: 500px; }.challenge-banner-meta { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 18px; color: var(--muted); font-size: 9px; }.challenge-banner-art { position: absolute; top: 0; right: 4%; width: 250px; height: 100%; }.target-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(138,210,220,.28); border-radius: 50%; transform: translate(-50%,-50%); }.ring-a { width: 190px; height: 190px; }.ring-b { width: 130px; height: 130px; border-style: dashed; }.target-core { position: absolute; top: 50%; left: 50%; display: grid; width: 68px; height: 68px; place-items: center; color: white; background: linear-gradient(140deg,#5daec0,#7773e6); border: 1px solid rgba(255,255,255,.3); border-radius: 23px; font-size: 25px; transform: translate(-50%,-50%) rotate(12deg); box-shadow: 0 10px 35px rgba(84,139,195,.28); }.target-star { position: absolute; top: 21%; right: 7%; color: #ffe29c; font-size: 23px; }.challenge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.challenge-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }.challenge-card-top { display: flex; justify-content: space-between; align-items: center; }.challenge-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; font-size: 16px; }.challenge-icon.green { color: #83e6ba; background: rgba(75,212,160,.12); }.challenge-icon.orange { color: #ffd18b; background: rgba(255,189,103,.12); }.challenge-icon.cyan { color: #86e6ef; background: rgba(74,197,216,.11); }.challenge-icon.violet { color: #b8afff; background: rgba(137,120,255,.13); }.challenge-icon.blue { color: #91c7ff; background: rgba(83,153,228,.13); }.challenge-icon.pink { color: #ff9bb1; background: rgba(244,107,152,.12); }.challenge-card h3 { margin: 14px 0 4px; font-size: 12px; }.challenge-card p { min-height: 31px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.challenge-reward { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; color: var(--muted); border-top: 1px solid var(--border); font-size: 8px; }.challenge-reward strong { color: #b9adff; }
.test-intro-card { min-height: 270px; background: linear-gradient(110deg,rgba(58,47,120,.48),rgba(27,69,100,.45)); }.test-intro-card > div:first-child { max-width: 570px; }.test-intro-card h2 { max-width: 490px; }.test-preview-stats { display: flex; gap: 30px; margin-top: 22px; }.test-preview-stats span { display: grid; gap: 1px; }.test-preview-stats strong { font-size: 15px; }.test-preview-stats small { color: var(--muted); font-size: 8px; }.test-visual { position: relative; width: 280px; height: 195px; flex: 0 0 280px; }.test-visual-ring { position: absolute; inset: 0 28px; border: 1px solid rgba(167,157,255,.3); border-radius: 50%; }.test-screen { position: absolute; top: 47px; left: 24px; width: 220px; height: 115px; padding: 14px; background: rgba(13,24,50,.87); border: 1px solid rgba(255,255,255,.19); border-radius: 13px; transform: rotate(-5deg); box-shadow: 0 17px 35px rgba(0,0,0,.24); }.test-screen-dots { display: flex; gap: 4px; margin-bottom: 13px; }.test-screen-dots i { width: 5px; height: 5px; background: #8b83ee; border-radius: 50%; }.test-screen-line { height: 6px; margin: 9px 0; background: rgba(184,201,238,.28); border-radius: 5px; }.test-screen-line.long { width: 92%; }.test-screen-line.medium { width: 73%; background: rgba(100,202,217,.5); }.test-screen-line.short { width: 52%; }.test-caret { position: absolute; top: 63px; left: 117px; width: 2px; height: 8px; background: #8ee5ee; box-shadow: 0 0 9px #8ee5ee; }.test-visual-label { position: absolute; right: 6px; bottom: 4px; color: #aee5e9; font-size: 7px; font-weight: 850; letter-spacing: .15em; }.test-mode-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }.test-mode-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }.mode-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; font-size: 15px; font-weight: 800; }.test-mode-card h3 { margin: 12px 0 4px; font-size: 11px; }.test-mode-card p { min-height: 31px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.mode-status { display: block; margin-top: 13px; padding-top: 9px; color: var(--muted-2); border-top: 1px solid var(--border); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.sandbox-hero { min-height: 245px; background: linear-gradient(105deg,rgba(27,78,91,.48),rgba(44,54,109,.48)); }.sandbox-benefits { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 17px; color: #9de6d0; font-size: 9px; }.sandbox-art { position: absolute; top: 0; right: 5%; width: 280px; height: 100%; }.sandbox-window { position: absolute; top: 51px; left: 41px; z-index: 2; width: 180px; height: 130px; padding: 12px; background: rgba(12,25,44,.85); border: 1px solid rgba(255,255,255,.2); border-radius: 13px; transform: rotate(7deg); box-shadow: 0 15px 30px rgba(0,0,0,.25); }.window-bar { display: flex; gap: 4px; }.window-bar i { width: 5px; height: 5px; background: #7892ad; border-radius: 50%; }.window-glyph { display: block; margin: 18px 0 0 11px; color: #8de2e7; font-size: 48px; font-weight: 800; }.window-cursor { position: absolute; right: 51px; bottom: 26px; width: 2px; height: 21px; background: #c5afff; }.sandbox-orbit { position: absolute; inset: 13px 5px; border: 1px dashed rgba(117,214,206,.28); border-radius: 50%; }.sandbox-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(220px,.7fr); gap: 15px; margin-top: 22px; }.sandbox-settings { padding: 20px; }.form-preview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.form-preview-field label { display: block; margin-bottom: 7px; color: var(--text-soft); font-size: 9px; font-weight: 750; }.fake-select, .fake-textarea { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; font-size: 10px; }.full-field { margin-top: 15px; }.fake-textarea { min-height: 86px; align-items: flex-start; padding-top: 11px; }.sandbox-preview-note { display: flex; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 9px; line-height: 1.5; }.sandbox-preview-note span { color: var(--cyan); }.sandbox-side { align-self: start; padding: 21px; }.sandbox-side-icon { display: grid; width: 39px; height: 39px; place-items: center; color: #a9a0ff; background: rgba(137,120,255,.13); border-radius: 11px; font-size: 18px; }.sandbox-side h3 { margin: 13px 0 6px; font-size: 14px; }.sandbox-side p { margin: 0 0 13px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.profile-overview { display: flex; align-items: center; gap: 18px; padding: 21px; }.profile-avatar-large { display: grid; flex: 0 0 auto; width: 66px; height: 66px; place-items: center; color: white; background: linear-gradient(140deg,#8f7aff,#568adf); border-radius: 20px; font-size: 27px; font-weight: 850; box-shadow: 0 9px 25px rgba(110,100,239,.24); }.profile-overview-copy { min-width: 0; flex: 1; }.profile-overview-copy h2 { margin: 6px 0 3px; font-size: 17px; }.profile-overview-copy p { margin: 0; color: var(--muted); font-size: 10px; }.profile-overview-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: var(--muted-2); font-size: 8px; }.profile-xp-box { width: 185px; padding-left: 18px; border-left: 1px solid var(--border); }.profile-xp-box > strong { display: block; font-size: 25px; letter-spacing: -.05em; }.profile-xp-box > strong small { color: var(--muted); font-size: 10px; }.profile-xp-box > span, .profile-xp-box > small { display: block; color: var(--muted); font-size: 8px; }.profile-xp-box .progress-track { margin: 10px 0 5px; }.progress-stat-grid { margin-top: 14px; }.analytics-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(250px,.8fr); gap: 14px; margin-top: 15px; }.chart-card, .achievement-preview { min-height: 240px; }.chart-empty { position: relative; height: 160px; overflow: hidden; }.chart-skeleton { position: absolute; inset: 12px 0 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to bottom,transparent 0 37px,var(--border) 38px); }.chart-skeleton span { width: 8%; background: linear-gradient(180deg,rgba(135,120,255,.25),rgba(135,120,255,.02)); border-radius: 5px 5px 0 0; }.chart-skeleton span:nth-child(1){height:25%}.chart-skeleton span:nth-child(2){height:38%}.chart-skeleton span:nth-child(3){height:31%}.chart-skeleton span:nth-child(4){height:55%}.chart-skeleton span:nth-child(5){height:47%}.chart-skeleton span:nth-child(6){height:67%}.chart-empty-message { position: absolute; top: 50%; left: 50%; display: grid; justify-items: center; width: 80%; padding: 12px; text-align: center; background: color-mix(in srgb,var(--surface) 88%,transparent); border: 1px solid var(--border); border-radius: 12px; transform: translate(-50%,-50%); }.chart-empty-message span { color: #a99eff; font-size: 19px; }.chart-empty-message strong { margin-top: 3px; font-size: 9px; }.chart-empty-message small { margin-top: 3px; color: var(--muted); font-size: 8px; }.achievement-empty { display: grid; justify-items: center; padding: 14px 5px; text-align: center; }.achievement-empty > span { display: grid; width: 43px; height: 43px; place-items: center; color: #ffdb92; background: rgba(255,189,103,.1); border-radius: 14px; font-size: 22px; }.achievement-empty strong { margin-top: 9px; font-size: 10px; }.achievement-empty p { max-width: 210px; margin: 4px 0 8px; color: var(--muted); font-size: 9px; }.history-card { margin-top: 14px; }.empty-history { display: flex; align-items: center; gap: 13px; padding: 15px 5px 3px; border-top: 1px solid var(--border); }.empty-history > span { display: grid; width: 37px; height: 37px; place-items: center; color: var(--muted); background: var(--surface-2); border-radius: 10px; font-size: 18px; }.empty-history strong { font-size: 10px; }.empty-history p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.settings-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(230px,.7fr); gap: 15px; }.settings-main { display: grid; gap: 14px; }.settings-section { padding: 20px; }.settings-section-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }.settings-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; font-size: 17px; }.settings-icon.green { color: #83e6ba; background: rgba(75,212,160,.12); }.settings-section-heading h2 { margin: 0; font-size: 13px; }.settings-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--border); }.settings-row:last-child { border-bottom: 0; padding-bottom: 0; }.settings-row strong, .settings-row small { display: block; }.settings-row strong { font-size: 10px; }.settings-row small { margin-top: 3px; color: var(--muted); font-size: 8px; }.settings-value { color: var(--muted); font-size: 9px; }.theme-options { display: flex; gap: 5px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }.theme-option { padding: 6px 9px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 9px; }.theme-option.active { color: var(--text); background: var(--surface-3); box-shadow: 0 1px 4px rgba(0,0,0,.12); }.privacy-note { display: flex; gap: 10px; padding: 13px; margin-top: 13px; background: rgba(75,212,160,.06); border: 1px solid rgba(75,212,160,.12); border-radius: 10px; }.privacy-note > span { color: var(--green); font-size: 15px; }.privacy-note strong { font-size: 9px; }.privacy-note p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.6; }.settings-aside { align-self: start; padding: 21px; }.settings-aside-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #b8afff; background: rgba(137,120,255,.13); border-radius: 13px; font-size: 20px; }.settings-aside h3 { margin: 13px 0 5px; font-size: 14px; }.settings-aside p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }.settings-aside-divider { height: 1px; margin: 18px 0 13px; background: var(--border); }.settings-aside > strong, .settings-aside > small { display: block; }.settings-aside > strong { margin-top: 7px; font-size: 11px; }.settings-aside > small { margin-top: 4px; color: var(--muted); font-size: 8px; }