@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: dark;
    --bg: #050706;
    --panel: #0b100e;
    --panel-2: #101713;
    --line: rgba(184, 255, 214, .14);
    --text: #f2fff7;
    --muted: #91a99b;
    --green: #52f28f;
    --green-dark: #07150d;
    --danger: #ff7185;
    --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 78% 8%, rgba(40, 180, 99, .15), transparent 25rem),
        radial-gradient(circle at 10% 70%, rgba(30, 110, 70, .08), transparent 30rem),
        var(--bg);
    color: var(--text);
    font: 16px/1.6 Manrope, Arial, sans-serif;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.ambient {
    position: fixed;
    z-index: -2;
    width: 34rem;
    height: 34rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .12;
    pointer-events: none;
    animation: float-light 12s ease-in-out infinite alternate;
}
.ambient-one { top: -12rem; right: -8rem; background: #35ff8a; }
.ambient-two { bottom: -18rem; left: -10rem; background: #2a8cff; animation-delay: -5s; }

@keyframes float-light {
    to { transform: translate3d(-3rem, 4rem, 0) scale(1.12); }
}

.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease var(--delay, 0ms), transform .7s ease var(--delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

a { color: var(--green); }

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

nav {
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -.02em;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(82, 242, 143, .55);
    border-radius: 9px;
    background: rgba(82, 242, 143, .09);
    color: var(--green);
    font: 500 18px DM Mono, monospace;
    box-shadow: inset 0 0 20px rgba(82,242,143,.08), 0 0 25px rgba(82,242,143,.08);
    animation: mark-pulse 3s ease-in-out infinite;
}

@keyframes mark-pulse {
    50% { box-shadow: inset 0 0 25px rgba(82,242,143,.15), 0 0 32px rgba(82,242,143,.18); }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}
.nav-form { margin: 0; }
.nav-form .nav-button { min-height: auto; box-shadow: none; }
.nav-form .nav-link:not(.nav-button) {
    min-height: auto;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.nav-link {
    color: var(--muted);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}

.nav-link:hover { color: var(--text); }

.nav-button {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 15px;
    background: rgba(255,255,255,.025);
    color: var(--text);
}

.hero {
    display: grid;
    min-height: 640px;
    align-items: center;
    padding: 64px 0 90px;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
}
.hero-copy { position: relative; z-index: 1; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--green);
    font: 500 .76rem DM Mono, monospace;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.eyebrow::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 14px var(--green);
    content: "";
}

h1 {
    max-width: 720px;
    margin: 18px 0 22px;
    font-size: clamp(3.5rem, 7vw, 6.7rem);
    line-height: .94;
    letter-spacing: -.075em;
}

h1 span {
    color: transparent;
    background: linear-gradient(100deg, var(--green), #d9ffe7);
    background-clip: text;
    -webkit-background-clip: text;
}

h2 {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    letter-spacing: -.045em;
}

.lead {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.16rem);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.button,
button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--green);
    border-radius: 11px;
    padding: 11px 19px;
    background: var(--green);
    box-shadow: 0 8px 28px rgba(82, 242, 143, .11);
    color: var(--green-dark);
    font: 750 .94rem Manrope, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.button:hover,
button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 35px rgba(82, 242, 143, .2);
}

.button.secondary {
    border-color: var(--line);
    background: rgba(255,255,255,.03);
    box-shadow: none;
    color: var(--text);
}

.microcopy {
    margin-top: 18px;
    color: #6f8378;
    font: .76rem DM Mono, monospace;
}

.terminal {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(7, 12, 9, .89);
    box-shadow: 0 36px 90px rgba(0,0,0,.45);
    transform: perspective(1000px) rotateY(-2deg) rotateX(1deg);
    animation: terminal-float 6s ease-in-out infinite;
}
@keyframes terminal-float { 50% { transform: perspective(1000px) rotateY(1deg) rotateX(-1deg) translateY(-8px); } }

.terminal::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 80px rgba(82, 242, 143, .025);
    content: "";
    pointer-events: none;
}

.terminal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 14px 17px;
    background: rgba(255,255,255,.025);
    color: #708279;
    font: .72rem DM Mono, monospace;
}

.terminal-dots { display: flex; gap: 7px; }
.terminal-dots i { width: 8px; height: 8px; border-radius: 50%; background: #32423a; }
.terminal-dots i:first-child { background: #ff6876; }
.terminal-dots i:nth-child(2) { background: #ffc45b; }
.terminal-dots i:last-child { background: var(--green); }

.terminal-body {
    min-height: 355px;
    padding: 29px 25px;
    color: #a7b9af;
    font: .82rem/1.8 DM Mono, monospace;
}

.terminal-body p { margin: 0 0 9px; }
.prompt { color: var(--green); }
.command { color: var(--text); }
.dim { color: #52645a; }
.success { color: var(--green); }
.danger { color: var(--danger); }

.progress-line {
    overflow: hidden;
    height: 5px;
    margin: 21px 0;
    border-radius: 10px;
    background: #152019;
}

.progress-line span {
    display: block;
    width: 72%;
    height: 100%;
    background: linear-gradient(90deg, #1a9c51, var(--green));
    box-shadow: 0 0 15px var(--green);
}

.stats {
    display: grid;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
}

.stat-item {
    padding: 27px 20px;
    text-align: center;
}

.stat-item + .stat-item { border-left: 1px solid var(--line); }
.stat-item strong { display: block; color: var(--text); font-size: 1.25rem; }
.stat-item span { color: var(--muted); font-size: .78rem; }

.section {
    padding: 110px 0;
}

.section-heading { max-width: 650px; margin-bottom: 38px; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.feature-card,
.stat {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.feature-card {
    min-height: 245px;
    padding: 27px;
    transition: border-color .2s, transform .2s;
    position: relative;
    overflow: hidden;
}
.feature-card::before,
.mission-card::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(350px circle at var(--x, 50%) var(--y, 0%), rgba(82,242,143,.1), transparent 45%);
    content: "";
    pointer-events: none;
}

.feature-card:hover { transform: translateY(-4px); border-color: rgba(82,242,143,.35); }
.feature-card .number { color: var(--green); font: .78rem DM Mono, monospace; }
.feature-card h3 { margin: 45px 0 10px; font-size: 1.18rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .91rem; }

.site-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding: 28px 0 40px;
    color: #62756a;
    font-size: .78rem;
}

.auth-shell {
    display: grid;
    min-height: calc(100vh - 84px);
    place-items: center;
    padding: 30px 0 80px;
}

.card {
    width: min(470px, 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px;
    background: rgba(11,16,14,.9);
    box-shadow: 0 35px 80px rgba(0,0,0,.3);
}

.card-intro { margin: 0 0 25px; color: var(--muted); }

label {
    display: block;
    margin: 17px 0 7px;
    color: #b9c9c0;
    font-size: .82rem;
    font-weight: 600;
}

input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 13px 14px;
    background: #070b09;
    color: var(--text);
    font: inherit;
}

input:focus {
    border-color: var(--green);
    outline: 3px solid rgba(82,242,143,.08);
}

.card button { width: 100%; }
.code-input {
    font: 500 1.7rem DM Mono, monospace;
    letter-spacing: .35em;
    text-align: center;
}
.resend-form { margin-top: 12px; text-align: center; }
.resend-form .text-button {
    min-height: auto;
    border: 0;
    padding: 7px;
    background: transparent;
    box-shadow: none;
    color: var(--green);
    font-size: .84rem;
}
.resend-form .text-button:hover { transform: none; box-shadow: none; text-decoration: underline; }
.card-footer { margin: 23px 0 0; color: var(--muted); font-size: .88rem; text-align: center; }
.field-help { margin-top: 8px; font-size: .8rem; text-align: right; }
.account-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 25px 0 80px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    background: rgba(255,255,255,.02);
}
.account-panel h2 { margin-top: 10px; }
.account-panel .button { flex: 0 0 auto; }

.message {
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: .85rem;
}

.message.error { border-color: rgba(255,113,133,.45); color: #ffc2cb; }
.message.success { border-color: rgba(82,242,143,.4); color: var(--green); }

.dashboard-header { padding: 65px 0 10px; }
.dashboard-header h1 { margin-bottom: 18px; font-size: clamp(2.7rem, 6vw, 5rem); }

.dashboard-grid {
    display: grid;
    margin: 42px 0;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.level-strip {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    background: rgba(255,255,255,.025);
}
.level-strip > div:first-child { display:flex; justify-content:space-between; gap:20px; }
.level-strip span { color:var(--muted); font-size:.82rem; }
.level-track { overflow:hidden; height:8px; margin-top:14px; border-radius:99px; background:#142019; }
.level-track span { display:block; height:100%; background:linear-gradient(90deg,var(--green),#84ffd9); box-shadow:0 0 18px rgba(82,242,143,.35); }
.profile-hero { display:flex; align-items:center; gap:28px; padding:75px 0 35px; }
.profile-hero h1,.page-hero h1 { margin:8px 0 15px; }
.profile-avatar,.rank-avatar { display:grid; place-items:center; border:1px solid rgba(82,242,143,.4); background:rgba(82,242,143,.08); color:var(--green); font-weight:800; }
.profile-avatar { width:110px; height:110px; border-radius:30px; font-size:2.6rem; }
.section.compact { padding-top:60px; }
.badge-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.badge-card { border:1px solid var(--line); border-radius:18px; padding:22px; background:rgba(255,255,255,.02); }
.badge-card.locked { opacity:.4; filter:grayscale(1); }
.badge-card.unlocked { border-color:rgba(82,242,143,.35); }
.badge-symbol { display:grid; width:44px; height:44px; place-items:center; border-radius:50%; background:var(--green); color:#06100b; font-weight:900; }
.badge-card p,.badge-card span { color:var(--muted); font-size:.8rem; }
.page-hero { padding:75px 0 45px; }
.ranking,.admin-list { display:grid; gap:10px; padding-bottom:80px; }
.rank-row,.admin-row { display:grid; align-items:center; gap:18px; border:1px solid var(--line); border-radius:15px; padding:15px 20px; background:rgba(255,255,255,.022); }
.rank-row { grid-template-columns:55px 42px 1fr auto 90px; }
.rank-row.is-you { border-color:rgba(82,242,143,.45); background:rgba(82,242,143,.045); }
.rank-avatar { width:38px; height:38px; border-radius:11px; }
.rank-number { color:#61756a; font-family:DM Mono,monospace; }
.rank-row span { color:var(--muted); font-size:.82rem; }
.rank-row b { color:var(--green); text-align:right; }
.admin-row { grid-template-columns:1fr auto 80px; }
.admin-row div { display:grid; gap:4px; }
.admin-row div span { color:var(--muted); font-size:.8rem; }
.admin-row button { min-height:38px; padding:7px 12px; }
.switch input { width:auto; }

.stat { padding: 25px; color: var(--muted); }
.stat strong { display: block; margin-bottom: 8px; color: var(--green); font-size: 2rem; }
.certificate-link {
    display: block;
    margin-top: 13px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}
.certificate-check { width: min(560px, 100%); }
.verification-result {
    display: grid;
    gap: 7px;
    margin-top: 28px;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 24px;
    text-align: center;
}
.verification-result.valid { border-color: rgba(82,242,143,.4); background: rgba(82,242,143,.035); }
.verification-result.invalid { border-color: rgba(255,113,133,.4); color: #ffc2cb; }
.verification-result strong { font-size: 1.25rem; }
.verification-result span, .verification-result small { color: var(--muted); }
.verification-result code { margin-top: 8px; color: var(--green); }

.dashboard-hero {
    display: flex;
    min-height: 420px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px 0;
}
.dashboard-hero h1 { margin-bottom: 20px; font-size: clamp(3.2rem, 7vw, 6rem); }
.progress-orbit {
    display: grid;
    width: 220px;
    height: 220px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--green) var(--progress), rgba(255,255,255,.07) 0);
    box-shadow: 0 0 60px rgba(82,242,143,.12);
    animation: orbit-in 1s ease both;
}
.progress-orbit::before {
    position: absolute;
    width: 185px;
    height: 185px;
    border-radius: 50%;
    background: var(--bg);
    content: "";
}
.progress-orbit div { position: relative; z-index: 1; text-align: center; }
.progress-orbit strong { display: block; font-size: 2.6rem; line-height: 1; }
.progress-orbit span { color: var(--muted); font-size: .8rem; }
@keyframes orbit-in { from { opacity: 0; transform: scale(.72) rotate(-60deg); } }

.stat { position: relative; overflow: hidden; }
.stat-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #577065;
    font: .7rem DM Mono, monospace;
}
.mission-section { padding: 70px 0 100px; }
.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.mission-card {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 25px;
    background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mission-card:hover {
    transform: translateY(-7px);
    border-color: rgba(82,242,143,.4);
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
}
.mission-card.is-complete { border-color: rgba(82,242,143,.32); }
.mission-top, .mission-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.mission-number { color: #52655b; font: .78rem DM Mono, monospace; }
.mission-status {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--muted);
    font-size: .68rem;
}
.is-complete .mission-status { color: var(--green); border-color: rgba(82,242,143,.3); }
.mission-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-top: 35px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--green);
    background: rgba(82,242,143,.05);
    font: 500 .82rem DM Mono, monospace;
}
.mission-category { margin: 22px 0 5px; color: var(--green) !important; font: .7rem DM Mono, monospace; text-transform: uppercase; }
.mission-card h3 { margin: 0 0 9px; font-size: 1.2rem; }
.mission-card p { color: var(--muted); font-size: .88rem; }
.mission-footer { position: absolute; right: 25px; bottom: 23px; left: 25px; font-size: .76rem; }
.mission-footer span { color: #62766a; font-family: DM Mono, monospace; }
.mission-footer a { font-weight: 700; text-decoration: none; }

.lab-layout {
    display: grid;
    min-height: calc(100vh - 85px);
    align-items: center;
    padding: 55px 0 90px;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
}
.lab-copy h1 { font-size: clamp(3.2rem, 6vw, 5.5rem); }
.lesson-box, .hint-box {
    margin-top: 30px;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 20px;
    background: rgba(255,255,255,.025);
}
.lesson-box span { color: var(--green); font: .7rem DM Mono, monospace; }
.lesson-box p { margin: 8px 0 0; }
.hint-box { color: var(--muted); }
.hint-link { display: inline-block; margin-top: 18px; font-size: .85rem; }
.lab-console {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(8,12,10,.94);
    box-shadow: 0 40px 100px rgba(0,0,0,.38);
}
.lab-console pre {
    min-height: 190px;
    margin: 0;
    padding: 32px;
    border-bottom: 1px solid var(--line);
    color: #d3ffe3;
    white-space: pre-wrap;
    font: .9rem/1.8 DM Mono, monospace;
}
.answer-form, .solution-panel { padding: 30px; }
.answer-form button { width: 100%; margin-top: 18px; }
.solution-panel { text-align: center; }
.solution-panel p { color: var(--muted); }
.solution-check {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: var(--green-dark);
    font-size: 1.8rem;
    box-shadow: 0 0 45px rgba(82,242,143,.25);
    animation: check-in .5s cubic-bezier(.2,1.6,.5,1) both;
}
@keyframes check-in { from { opacity: 0; transform: scale(.2) rotate(-30deg); } }

@media (max-width: 850px) {
    .hero { grid-template-columns: 1fr; gap: 35px; padding-top: 55px; }
    .feature-grid, .dashboard-grid { grid-template-columns: 1fr; }
    .terminal { max-width: 600px; }
    .mission-grid { grid-template-columns: repeat(2, 1fr); }
    .lab-layout { grid-template-columns: 1fr; gap: 35px; }
    .dashboard-grid { grid-template-columns:repeat(2,1fr); }
    .badge-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 600px) {
    .container { width: min(100% - 26px, 1180px); }
    nav { min-height: 72px; }
    .nav-link:not(.nav-button) { display: none; }
    .hero { min-height: auto; padding: 55px 0 70px; }
    h1 { font-size: clamp(3.1rem, 17vw, 4.6rem); }
    .terminal-body { min-height: 315px; padding: 22px 18px; font-size: .72rem; }
    .stats { grid-template-columns: 1fr; }
    .stat-item + .stat-item { border-top: 1px solid var(--line); border-left: 0; }
    .section { padding: 75px 0; }
    .card { padding: 27px 20px; }
    .site-footer { flex-direction: column; gap: 8px; }
    .account-panel { align-items: flex-start; flex-direction: column; }
    .dashboard-hero { align-items: flex-start; flex-direction: column; }
    .progress-orbit { width: 170px; height: 170px; }
    .progress-orbit::before { width: 142px; height: 142px; }
    .mission-grid { grid-template-columns: 1fr; }
    .terminal { transform: none; animation: none; }
    .dashboard-grid,.badge-grid { grid-template-columns:1fr; }
    .profile-hero { align-items:flex-start; flex-direction:column; }
    .rank-row { grid-template-columns:38px 36px 1fr; }
    .rank-row > span:not(.rank-number),.rank-row b { grid-column:3; text-align:left; }
    .admin-row { grid-template-columns:1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}

/* Modern product theme */
:root {
    color-scheme: light;
    --bg: #f5f7fc;
    --panel: #ffffff;
    --panel-2: #f0f3fb;
    --line: #e2e7f2;
    --text: #172033;
    --muted: #68748b;
    --green: #635bff;
    --green-dark: #ffffff;
    --danger: #db4660;
}

body {
    background:
        radial-gradient(circle at 85% 5%, rgba(99,91,255,.14), transparent 30rem),
        radial-gradient(circle at 5% 45%, rgba(52,211,153,.09), transparent 25rem),
        var(--bg);
    color: var(--text);
}
body::before { opacity: .45; background-image: radial-gradient(#cbd3e6 1px, transparent 1px); background-size: 26px 26px; }
.ambient-one { background:#776dff; opacity:.1; }
.ambient-two { background:#37cfa0; opacity:.08; }
a,.eyebrow,.feature-card .number,.mission-category,.mission-footer a,.certificate-link { color:var(--green); }
.brand { color:var(--text); }
.brand-mark { border:0; background:linear-gradient(135deg,#7168ff,#4c46d8); color:#fff; box-shadow:0 10px 28px rgba(99,91,255,.28); animation:none; }
.nav-link { color:#68748b; }
.nav-link:hover { color:var(--text); }
.nav-button { border:0; background:#fff; box-shadow:0 5px 20px rgba(32,43,74,.08); color:var(--text); }
.eyebrow::before { background:#635bff; box-shadow:none; }
h1 span { background:linear-gradient(110deg,#635bff,#9a55e8); background-clip:text; -webkit-background-clip:text; }
.button,button { border:0; background:linear-gradient(135deg,#6d64ff,#554ce5); color:#fff; box-shadow:0 10px 28px rgba(99,91,255,.2); }
.button.secondary { border:1px solid var(--line); background:#fff; color:var(--text); box-shadow:0 5px 18px rgba(32,43,74,.06); }
.microcopy { color:#8a94a8; }

.product-preview {
    overflow:hidden;
    border:1px solid rgba(255,255,255,.8);
    border-radius:28px;
    padding:22px;
    background:rgba(255,255,255,.86);
    box-shadow:0 38px 90px rgba(48,54,100,.18);
    backdrop-filter:blur(18px);
    animation:terminal-float 7s ease-in-out infinite;
}
.preview-head,.preview-progress,.preview-cards { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.preview-head { padding-bottom:18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.preview-head b { border-radius:99px; padding:6px 10px; background:#eeeefe; color:#635bff; }
.preview-welcome { padding:28px 4px 18px; }
.preview-welcome small,.soft-label { color:#7a72ed; font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.preview-welcome h3 { margin:7px 0 4px; font-size:1.55rem; }
.preview-welcome p { margin:0; color:var(--muted); }
.preview-progress { margin:8px 0 18px; border-radius:20px; padding:20px; background:linear-gradient(135deg,#635bff,#8f6bea); color:#fff; }
.preview-progress strong { display:block; font-size:2.2rem; }
.preview-progress span { font-size:.78rem; opacity:.8; }
.preview-ring { width:72px; height:72px; border:8px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; transform:rotate(25deg); }
.preview-cards { align-items:stretch; }
.preview-cards article { flex:1; border:1px solid var(--line); border-radius:17px; padding:16px; background:#fff; }
.preview-cards span,.preview-cards small { display:block; color:var(--muted); font-size:.7rem; }
.preview-cards strong { display:block; margin:8px 0; font-size:.92rem; }

.stats { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 15px 45px rgba(35,48,85,.06); }
.stat-item + .stat-item { border-color:var(--line); }
.feature-card,.stat,.mission-card,.level-strip,.account-panel,.card,.ranking,.modern-panel {
    border-color:var(--line);
    background:#fff;
    box-shadow:0 14px 45px rgba(32,43,74,.07);
}
.feature-card:hover,.mission-card:hover { border-color:#bcb8ff; box-shadow:0 24px 60px rgba(76,67,150,.13); }
.feature-card::before,.mission-card::before { background:radial-gradient(350px circle at var(--x,50%) var(--y,0%),rgba(99,91,255,.1),transparent 45%); }
.card input,input,select { border:1px solid var(--line); background:#f9faff; color:var(--text); }
input:focus,select:focus { border-color:#7c74ff; outline:3px solid rgba(99,91,255,.1); }
textarea {
    width:100%;
    min-height:100px;
    resize:vertical;
    border:1px solid var(--line);
    border-radius:10px;
    padding:13px 14px;
    background:#f9faff;
    color:var(--text);
    font:inherit;
}
textarea:focus { border-color:#7c74ff; outline:3px solid rgba(99,91,255,.1); }
.message.success { border-color:#aeead3; color:#147a58; background:#effcf7; }
.message.error { border-color:#f3b9c3; color:#b92e48; background:#fff2f4; }
.progress-orbit { background:conic-gradient(#635bff var(--progress),#e7e9f4 0); box-shadow:0 20px 60px rgba(99,91,255,.18); }
.progress-orbit::before { background:var(--bg); }
.stat strong,.rank-row b { color:#635bff; }
.stat-icon { color:#9aa3b5; }
.level-track { background:#e9ebf4; }
.level-track span { background:linear-gradient(90deg,#635bff,#9a6bea); box-shadow:none; }
.mission-icon,.profile-avatar,.rank-avatar { border:0; background:#eeedff; color:#635bff; }
.mission-card.is-complete { border-color:#a9e5d0; }
.is-complete .mission-status { border-color:#a9e5d0; color:#16805d; background:#effbf7; }
.badge-card { background:#fff; box-shadow:0 10px 30px rgba(32,43,74,.06); }
.badge-card.unlocked { border-color:#bdb9ff; }
.badge-symbol,.solution-check { background:linear-gradient(135deg,#6e65ff,#8a62dc); color:#fff; box-shadow:0 10px 25px rgba(99,91,255,.2); }
.rank-row,.admin-row { background:#fff; border-color:var(--line); }
.rank-row.is-you { border-color:#bdb9ff; background:#f5f4ff; }
.lab-console { border-color:var(--line); background:#fff; box-shadow:0 30px 80px rgba(32,43,74,.15); }
.terminal-top { background:#f5f6fb; color:#778298; border-color:var(--line); }
.lab-console pre { border-color:var(--line); background:#202538; color:#e8edff; }
.lesson-box,.hint-box { border-color:var(--line); background:#fff; box-shadow:0 10px 30px rgba(32,43,74,.05); }
.verification-result.valid { border-color:#a9e5d0; background:#effbf7; }

.app-body { background:#f3f5fa; }
.app-shell { display:grid; min-height:100vh; grid-template-columns:250px 1fr; }
.app-sidebar { position:sticky; top:0; height:100vh; padding:28px 22px; background:#fff; border-right:1px solid var(--line); }
.sidebar-label { margin:42px 10px 12px; color:#9aa3b5; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.side-nav { display:grid; gap:6px; }
.side-nav a { border-radius:11px; padding:11px 13px; color:#657087; font-weight:650; text-decoration:none; }
.side-nav a:hover,.side-nav a.active { background:#efefff; color:#554ce5; }
.sidebar-back { position:absolute; bottom:28px; left:32px; color:#7d879a; font-size:.82rem; text-decoration:none; }
.app-content { min-width:0; padding:34px 42px 70px; }
.app-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.app-topbar h1 { margin:5px 0 0; font-size:2.2rem; letter-spacing:-.04em; }
.admin-chip { border:1px solid var(--line); border-radius:99px; padding:9px 13px; background:#fff; color:#657087; font-size:.78rem; }
.metric-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
.metric-grid article { border:1px solid var(--line); border-radius:18px; padding:20px; background:#fff; box-shadow:0 10px 30px rgba(32,43,74,.05); }
.metric-grid span { display:block; color:var(--muted); font-size:.75rem; }
.metric-grid strong { display:block; margin-top:12px; font-size:2rem; }
.modern-panel { border:1px solid var(--line); border-radius:20px; padding:22px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:17px; }
.panel-heading h2 { margin:4px 0 0; font-size:1.35rem; }
.panel-heading > span,.panel-heading a { color:var(--muted); font-size:.78rem; }
.simple-row { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:13px; padding:13px 4px; border-top:1px solid var(--line); }
.simple-row div:nth-child(2) { display:grid; }
.simple-row span { color:var(--muted); font-size:.75rem; }
.simple-row b { color:#635bff; }
.certificate-mini { display:grid; width:38px; height:38px; place-items:center; border-radius:10px; background:#fff5dc; color:#aa7416; font-weight:800; }
.user-admin-row { display:grid; grid-template-columns:42px 1fr 120px 70px; align-items:center; gap:13px; padding:13px 4px; border-top:1px solid var(--line); }
.user-admin-row > div:nth-child(2) { display:grid; }
.user-admin-row span { color:var(--muted); font-size:.74rem; }
.user-admin-row button { min-height:38px; padding:7px 10px; }
.mission-admin-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.mission-editor { padding:20px; }
.mission-editor label { margin-top:9px; }
.mission-editor button { width:100%; margin-top:15px; }
.editor-grid { display:grid; grid-template-columns:1fr 110px; gap:12px; }
.check-line { display:flex; align-items:center; gap:8px; }
.check-line input { width:auto; }
.certificate-control { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:20px; }
.certificate-control p { margin:4px 0 0; color:var(--muted); }
.create-mission { margin-bottom:18px; }
.create-mission summary { cursor:pointer; color:#554ce5; font-weight:800; }
.create-mission form { margin-top:20px; }
.editor-grid.wide { grid-template-columns:1fr 1fr; }
.certificate-note { display:block; margin-top:10px; color:var(--muted); font-size:.72rem; line-height:1.5; }
.continue-card,.daily-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    border:1px solid var(--line);
    border-radius:22px;
    padding:25px;
    background:#fff;
    box-shadow:0 14px 45px rgba(32,43,74,.07);
}
.continue-card { margin-top:20px; }
.continue-card h2 { margin:6px 0; font-size:1.5rem; }
.continue-card p { margin:0; color:var(--muted); }
.daily-card { margin-top:14px; justify-content:flex-start; }
.daily-card > div:nth-child(2) { display:grid; flex:1; }
.daily-card span { color:var(--muted); font-size:.78rem; }
.daily-card a { font-weight:750; text-decoration:none; }
.daily-badge { border-radius:10px; padding:8px 10px; background:#fff4d6; color:#a96b00; font-size:.68rem; font-weight:900; }
.mission-tools { display:flex; gap:12px; margin:0 0 22px; }
.mission-tools input { flex:1; }
.mission-tools select { width:190px; }
.mission-card[hidden] { display:none; }

@media (max-width:1000px) {
    .metric-grid { grid-template-columns:repeat(2,1fr); }
    .mission-admin-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
    .app-shell { grid-template-columns:1fr; }
    .app-sidebar { position:relative; height:auto; }
    .side-nav { grid-template-columns:repeat(2,1fr); }
    .sidebar-back { position:static; display:block; margin:20px 10px 0; }
    .app-content { padding:25px 16px 55px; }
    .app-topbar { align-items:flex-start; flex-direction:column; gap:12px; }
    .user-admin-row { grid-template-columns:38px 1fr; }
    .user-admin-row select,.user-admin-row button { grid-column:2; }
    .certificate-control,.continue-card { align-items:flex-start; flex-direction:column; }
    .editor-grid.wide { grid-template-columns:1fr; }
    .mission-tools { flex-direction:column; }
    .mission-tools select { width:100%; }
}