.sidebar .level-card { display: grid; gap: 10px; width: 100%; padding: 16px; border: var(--hairline); border-radius: 12px; background: var(--color-accent-soft); color: var(--color-on-surface); font: inherit; text-align: left; cursor: pointer; }
.level-card:hover { border-color: var(--color-primary); }
.level-card-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.level-card-heading strong { flex: 1; font-size: var(--ui-font); }
.level-card-number { color: var(--color-muted); font-size: var(--ui-small); }
.level-card progress { display: block; width: 100%; height: 7px; appearance: none; border: 0; border-radius: 8px; overflow: hidden; background: var(--color-line); accent-color: var(--color-primary); }
.level-card progress::-webkit-progress-bar { background: var(--color-line); border-radius: 8px; }
.level-card progress::-webkit-progress-value { background: var(--gradient-brand); border-radius: 8px; }
.level-card progress::-moz-progress-bar { background: var(--color-primary); }
.level-card-count, .level-card small { color: var(--color-muted); font-size: var(--ui-small); line-height: 1.5; overflow-wrap: anywhere; }
.level-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; overflow-y: auto; }
.level-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.level-modal-heading h2 { margin: 0; font-size: var(--ui-title); }
.level-modal-heading .eyebrow { margin-bottom: 8px; }
.level-summary { display: grid; gap: 8px; margin-block: 22px; }
.level-summary span, .level-explanation { color: var(--color-muted); font-size: var(--ui-font); }
.level-timeline-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-block: 8px 16px; scrollbar-width: thin; }
.level-timeline { display: flex; min-width: 720px; gap: 0; margin: 0; padding: 0; list-style: none; }
.level-step { position: relative; display: grid; flex: 1; gap: 10px; align-content: start; padding: 8px; text-align: center; font-size: var(--ui-small); }
.level-step::before { position: absolute; top: 28px; left: -50%; width: 100%; height: 2px; background: var(--color-line); content: ''; }
.level-step:first-child::before { display: none; }
.level-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-inline: auto; border: 2px solid var(--color-line-strong); border-radius: 50%; color: var(--color-muted); background: var(--color-surface); font-weight: 700; }
.level-step-dot svg { width: 22px; height: 22px; }
.level-step--earned .level-step-dot { background: var(--color-primary); color: var(--color-on-brand); border-color: var(--color-primary); }
.level-step--earned::before { background: var(--color-primary); }
.level-step--current .level-step-dot { outline: 4px solid var(--color-accent-soft); outline-offset: 3px; }
.level-step > strong { font-size: var(--ui-font); }
.level-step > span:not(.level-step-dot), .level-step > small { color: var(--color-muted); }
.level-step > b { color: var(--color-success); }
.level-step--current > small { color: var(--color-primary); font-weight: 650; }
.level-next { padding: 16px; border-radius: 10px; background: var(--color-accent-soft); line-height: 1.7; }
.level-explanation { margin-bottom: 0; line-height: 1.7; }
.level-celebration { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; overflow: auto; text-align: center; }
.level-celebration-close { position: absolute; right: 12px; top: 12px; }
.level-robot { position: relative; display: block; margin: 10px auto 20px; object-fit: contain; }
.level-celebration[open] .level-robot { animation: level-robot-bounce 1s ease-out 2; }
.level-celebration h2 { font-size: var(--ui-title); margin-block: 12px; }
.level-reward-amount { display: block; color: var(--color-success); font-size: clamp(1.4rem, 5vw, 1.8rem); margin-block: 18px; }
.level-celebration p { line-height: 1.6; }
.level-celebration > .button { width: 100%; margin-top: 10px; }
.level-modal-status { color: var(--color-danger); font-size: var(--ui-small); }
.level-modal-status:empty { display: none; }
.level-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.level-confetti i { position: absolute; top: -12px; left: calc(var(--piece) * 8%); width: 7px; height: 12px; border-radius: 2px; background: var(--color-primary); opacity: 0; }
.level-confetti i:nth-child(3n) { background: var(--color-success); }
.level-confetti i:nth-child(3n + 1) { background: var(--color-action-warning); }
.level-celebration[open] .level-confetti i { animation: level-confetti 2.2s ease-out both; animation-delay: calc(var(--piece) * 50ms); }
.meta-badge--credits { color: var(--color-muted); font-size: var(--ui-small); padding: 6px 10px; white-space: normal; }
.account-menu-action > span:not(.account-menu-action-icon):not(.mini-tag) { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.account-menu-action > .mini-tag { flex: none; margin-left: auto; white-space: nowrap; }
@keyframes level-robot-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-10px) rotate(-5deg); } 65% { transform: translateY(-5px) rotate(5deg); } }
@keyframes level-confetti { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: .8; } 100% { opacity: 0; transform: translateY(360px) rotate(320deg); } }
@media (max-width: 800px) { .sidebar-panel { gap: 14px; } .level-dialog { padding: 18px; } .level-celebration { padding: 24px 18px; } }
@media (max-height: 620px) { .sidebar-panel { overflow-y: auto; } .organization-tree { flex: 0 0 auto; min-height: 100px; max-height: 32dvh; } .sidebar .level-card { gap: 7px; padding: 12px; } .level-robot { width: 96px; height: 96px; margin-block: 4px 10px; } }
@media (prefers-reduced-motion: reduce) { .level-celebration[open] .level-robot, .level-celebration[open] .level-confetti i { animation: none; } }