* { margin: 0; padding: 0; box-sizing: border-box; }
:global(html), :global(body) { background-color: #0A1813 !important; color: #ECF2EC; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
:global(body) { background-image: radial-gradient(circle at 15% 0%, rgba(200, 230, 74, 0.08) 0%, transparent 45%), radial-gradient(circle at 85% 100%, rgba(95, 227, 161, 0.06) 0%, transparent 50%); }
.container { max-width: 720px; margin: 0 auto; padding: 28px 22px 80px; }
.top-bar { display: flex; justify-content: center; align-items: center; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 1px solid #1E3A2E; }
.brand-logo { height: 45px; width: auto; display: block; }
.support-link { font-size: 12px; color: #B8C7BC; text-decoration: none; padding: 8px 14px; border: 1px solid #2A5040; border-radius: 100px; font-weight: 500; }
.eyebrow { font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: #C8E64A; margin-bottom: 14px; font-weight: 600; }
h1 { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 18px; color: #ECF2EC; }
h1 span.accent { color: #C8E64A; }
.tracking-code { display: inline-block; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 12px; background: #112620; border: 1px solid #1E3A2E; padding: 7px 12px; border-radius: 6px; letter-spacing: 0.05em; color: #B8C7BC; }
.tracking-code::before { content: "# "; color: #C8E64A; }
.status-card { background: #14352A; border: 1px solid #2A5040; border-radius: 16px; padding: 26px; margin-top: 32px; margin-bottom: 36px; position: relative; overflow: hidden; }
.status-card::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 3px; background: linear-gradient(180deg, #C8E64A, #5FE3A1); }
.status-label { font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: #C8E64A; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.pulse-dot { width: 8px; height: 8px; background: #C8E64A; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 230, 74, 0.6); } 50% { box-shadow: 0 0 0 10px rgba(200, 230, 74, 0); } }
.status-title { font-size: 23px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; letter-spacing: -0.015em; color: #ECF2EC; }
.status-message { color: #B8C7BC; font-size: 15px; margin-bottom: 18px; }
.status-date { display: inline-block; background: rgba(200, 230, 74, 0.12); border: 1px solid rgba(200, 230, 74, 0.35); padding: 8px 14px; border-radius: 100px; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 12px; font-weight: 600; color: #C8E64A; }
.progress-section { margin-bottom: 44px; }
.progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.progress-label { font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11px; color: #6F8276; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; }
.progress-percentage { font-size: 28px; font-weight: 700; color: #C8E64A; letter-spacing: -0.02em; }
.progress-percentage span { font-size: 16px; color: #6F8276; font-weight: 500; }
.progress-bar { height: 6px; background: #112620; border-radius: 100px; overflow: hidden; border: 1px solid #1E3A2E; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #5FE3A1 0%, #C8E64A 100%); border-radius: 100px; box-shadow: 0 0 12px rgba(200, 230, 74, 0.4); }
.timeline-title { font-size: 20px; font-weight: 700; margin-bottom: 26px; letter-spacing: -0.015em; color: #ECF2EC; display: flex; align-items: center; gap: 12px; }
.timeline-title::after { content: ""; flex: 1; height: 1px; background: #1E3A2E; }
.timeline { position: relative; padding-left: 38px; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: #2A5040; border-radius: 2px; }
.step { position: relative; padding-bottom: 22px; }
.step:last-child { padding-bottom: 0; }
.step-dot { position: absolute; left: -38px; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: #0A1813; border: 2px solid #2A5040; display: flex; align-items: center; justify-content: center; z-index: 2; }
.step.done .step-dot { background: #5FE3A1; border-color: #5FE3A1; }
.step.done .step-dot::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #0A1813; border-bottom: 2px solid #0A1813; transform: rotate(-45deg) translate(1px, -1px); }
.step.current .step-dot { background: #C8E64A; border-color: #C8E64A; box-shadow: 0 0 0 6px rgba(200, 230, 74, 0.18), 0 0 20px rgba(200, 230, 74, 0.4); animation: pulseLime 2s infinite; }
@keyframes pulseLime { 0%, 100% { box-shadow: 0 0 0 6px rgba(200, 230, 74, 0.18), 0 0 20px rgba(200, 230, 74, 0.3); } 50% { box-shadow: 0 0 0 12px rgba(200, 230, 74, 0), 0 0 24px rgba(200, 230, 74, 0.5); } }
.step.current .step-dot::after { content: ""; width: 8px; height: 8px; background: #0A1813; border-radius: 50%; }
.step-label { font-size: 15px; color: #6F8276; font-weight: 500; line-height: 1.4; padding-top: 4px; }
.step.done .step-label { color: #B8C7BC; }
.step.current .step-label { color: #ECF2EC; font-weight: 700; font-size: 16px; }
.step-date { display: block; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 11px; color: #6F8276; margin-top: 4px; letter-spacing: 0.02em; }
.step.done .step-date { color: #5FE3A1; }
.step.current .step-date { color: #C8E64A; }
.footer { margin-top: 56px; padding-top: 28px; border-top: 1px solid #1E3A2E; text-align: center; }
.footer-help { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: #ECF2EC; }
.footer-sub { font-size: 13px; color: #6F8276; margin-bottom: 22px; }
.footer-contacts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.footer-contacts a { color: #ECF2EC; text-decoration: none; font-size: 13px; font-weight: 500; padding: 10px 18px; border: 1px solid #2A5040; border-radius: 100px; background: #112620; }
.footer-fineprint { font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 10px; color: #6F8276; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 480px) { .container { padding: 20px 16px 60px; } .footer-contacts { flex-direction: column; } }

html,
body {
    background-color: #0A1813 !important;
    color: #ECF2EC;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.phase-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
    cursor: help;
    opacity: .75;
    font-size: .85rem;
}

.phase-tooltip:hover {
    opacity: 1;
}