.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; font-size: 11px; font-weight: 780; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(110deg, #7768f2, #688de9); box-shadow: 0 8px 25px rgba(110,100,239,.22); }
.button-primary:hover { box-shadow: 0 10px 28px rgba(110,100,239,.34); }
.button-secondary { color: var(--text); background: var(--surface-3); border-color: var(--border-strong); }
.button-secondary:hover { background: var(--surface-hover); }
.button-light { color: #24213f; background: #fff; box-shadow: 0 8px 24px rgba(11,16,32,.16); }
.button-light:hover { background: #f0edff; }
.button-arrow { font-size: 16px; }
.button-glow { white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; border-radius: 6px; font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.pill-violet { color: #b8afff; background: rgba(137,120,255,.12); border: 1px solid rgba(137,120,255,.16); }
.pill-cyan { color: #86e6ef; background: rgba(74,197,216,.1); border: 1px solid rgba(74,197,216,.14); }
.pill-muted { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }
.hero-card { position: relative; display: flex; min-height: 280px; overflow: hidden; align-items: center; justify-content: space-between; padding: 34px 42px; background: linear-gradient(110deg, #28265c 0%, #252b62 48%, #174c69 100%); border: 1px solid rgba(153,146,255,.25); border-radius: var(--radius-xl); box-shadow: 0 18px 50px rgba(14,23,62,.25); }
.hero-copy { position: relative; z-index: 2; max-width: 490px; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: #b8c8f6; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.hero-copy h2 { margin: 14px 0 10px; color: white; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.05em; }
.hero-copy h2 span { color: #9de8ef; }
.hero-copy p { max-width: 390px; margin: 0; color: #c3c9ea; font-size: 12px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin-top: 22px; }
.hero-text-link { color: #d7d8ff; font-size: 10px; font-weight: 700; }
.hero-art { position: absolute; top: 0; right: 0; width: 43%; height: 100%; min-width: 310px; }
.orbit { position: absolute; top: 50%; left: 54%; border: 1px solid rgba(162,202,255,.17); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 250px; height: 250px; }
.orbit-two { width: 330px; height: 330px; border-style: dashed; }
.hero-center { position: absolute; top: 50%; left: 54%; display: grid; width: 94px; height: 94px; place-content: center; text-align: center; color: white; background: linear-gradient(145deg, rgba(133,123,255,.5), rgba(64,193,224,.26)); border: 1px solid rgba(255,255,255,.26); border-radius: 27px; box-shadow: 0 12px 55px rgba(105,124,255,.45); transform: translate(-50%,-50%) rotate(-8deg); }
.hero-center span { font-size: 34px; line-height: 1; }
.hero-center small { margin-top: 7px; font-size: 7px; font-weight: 850; letter-spacing: .15em; }
.hero-key { position: absolute; display: grid; width: 39px; height: 39px; place-items: center; color: #e8eeff; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.21); border-radius: 11px; box-shadow: 0 8px 20px rgba(0,0,0,.18); font-size: 12px; font-weight: 800; transform: rotate(-8deg); }
.key-a { top: 22%; left: 29%; }.key-s { top: 35%; left: 18%; }.key-d { top: 66%; left: 27%; }.key-f { top: 76%; left: 51%; }.key-j { top: 23%; right: 13%; }.key-k { top: 67%; right: 19%; }.key-l { top: 42%; right: 7%; }
.hero-float { position: absolute; display: flex; align-items: center; gap: 7px; padding: 8px 11px; color: white; background: rgba(21,36,79,.8); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; font-size: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.float-xp { top: 17%; right: 29%; color: #b9f4e2; }.float-spark { right: 6%; bottom: 17%; color: #ffe19b; font-size: 21px; }
.hero-grid-glow { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(90deg, transparent, #000); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; margin-top: 18px; }
.stat-card, .panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.stat-card { min-width: 0; padding: 16px 17px 14px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.stat-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; font-size: 16px; }
.stat-icon.violet, .quick-icon.purple, .activity-icon.violet, .mode-icon.violet, .settings-icon.violet { color: #b8afff; background: rgba(137,120,255,.13); }
.stat-icon.cyan, .quick-icon.blue, .activity-icon.cyan, .mode-icon.cyan, .settings-icon.cyan { color: #86e6ef; background: rgba(74,197,216,.11); }
.stat-icon.amber { color: #ffd18b; background: rgba(255,189,103,.12); }
.stat-icon.green { color: #7ce5b9; background: rgba(75,212,160,.11); }
.stat-trend { font-size: 8px; font-weight: 800; letter-spacing: .08em; }.stat-trend.neutral { color: var(--muted-2); }
.stat-value { margin-top: 13px; font-size: 25px; font-weight: 780; line-height: 1.1; letter-spacing: -.055em; }
.stat-value small { margin-left: 4px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 0; }
.stat-card p { margin: 5px 0 11px; color: var(--text-soft); font-size: 10px; font-weight: 700; }
.stat-foot { padding-top: 9px; color: var(--muted-2); border-top: 1px solid var(--border); font-size: 9px; }
.continue-card { display: grid; grid-template-columns: minmax(150px,.75fr) minmax(0,1.25fr); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.continue-art { position: relative; display: grid; min-height: 218px; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(112,95,245,.27), transparent 60%), linear-gradient(145deg, #20234e, #162e4a); }
.continue-art:before, .campaign-feature:before { position: absolute; inset: 0; content: ""; opacity: .18; background-image: radial-gradient(rgba(255,255,255,.4) .7px, transparent .7px); background-size: 14px 14px; }
.mini-keyboard { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 38px); gap: 7px; transform: rotate(-9deg); }
.mini-keyboard span { display: grid; height: 38px; place-items: center; color: #e8e5ff; background: linear-gradient(145deg, #514b9b, #343f75); border: 1px solid rgba(255,255,255,.17); border-radius: 9px; box-shadow: 0 8px 16px rgba(0,0,0,.25); font-size: 12px; font-weight: 800; }
.art-glow { position: absolute; width: 130px; height: 130px; border: 1px solid rgba(151,136,255,.4); border-radius: 50%; box-shadow: 0 0 50px rgba(128,112,255,.24); }
.continue-copy { padding: 22px; }
.continue-copy h3 { margin: 10px 0 5px; font-size: 17px; letter-spacing: -.03em; }
.continue-copy p { max-width: 370px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.card-meta { display: flex; flex-wrap: wrap; gap: 14px; margin: 15px 0; color: var(--muted); font-size: 9px; }
.quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.quick-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 13px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.quick-card:hover, .activity-card:hover { transform: translateY(-2px); border-color: rgba(137,120,255,.35); background: var(--surface-hover); }
.quick-icon { display: grid; flex: 0 0 auto; width: 33px; height: 33px; place-items: center; border-radius: 9px; font-size: 16px; }.quick-icon.orange { color: #ffd18b; background: rgba(255,189,103,.12); }
.quick-card strong, .quick-card small { display: block; }.quick-card strong { font-size: 9px; }.quick-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }.quick-arrow { margin-left: auto; color: var(--muted-2); }
.panel-card { padding: 18px; }.level-card, .daily-card { padding: 18px; }
.level-emblem { display: grid; width: 30px; height: 30px; place-items: center; color: #bdb4ff; background: rgba(137,120,255,.14); border: 1px solid rgba(137,120,255,.18); border-radius: 9px; font-size: 14px; font-weight: 850; }
.xp-line { display: flex; justify-content: space-between; margin: 17px 0 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.progress-track { height: 7px; overflow: hidden; background: var(--surface-3); border-radius: 99px; }.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, #8170f5, #4ecde1); border-radius: inherit; }
.level-card .small-muted { display: block; margin-top: 10px; }
.quest-icon { color: #b9aaff; font-size: 20px; }.empty-quest { display: grid; justify-items: center; padding: 12px 8px 1px; text-align: center; }.empty-quest-icon { display: grid; width: 41px; height: 41px; place-items: center; margin-bottom: 10px; color: #ffc97f; background: rgba(255,189,103,.1); border-radius: 13px; font-size: 19px; }.empty-quest strong { font-size: 10px; }.empty-quest p { max-width: 230px; margin: 5px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.tip-card { position: relative; overflow: hidden; padding: 17px 18px; background: linear-gradient(140deg, rgba(37,89,108,.23), rgba(40,51,92,.24)); border: 1px solid rgba(91,190,209,.13); border-radius: var(--radius-md); }.tip-label { color: #8ee1e9; font-size: 8px; font-weight: 850; letter-spacing: .14em; }.tip-label span { margin-right: 5px; font-size: 13px; }.tip-card h3 { margin: 9px 0 5px; font-size: 13px; }.tip-card p { position: relative; z-index: 1; max-width: 300px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }.tip-decoration { position: absolute; right: 13px; bottom: -37px; color: rgba(130,219,226,.1); font-family: Georgia,serif; font-size: 120px; }