:root {
    --background: #FFFFFF;
    --background-secondary: #F7F9FA;
    --background-soft: #F3F8FC;
    --surface: #F7F9FA;
    --surface-elevated: #FFFFFF;
    --surface-muted: #F7F9FA;
    --surface-soft: #F3F7F9;
    --surface-blue: #F2F8FC;
    --card: #FFFFFF;
    --text: #101820;
    --text-primary: #101820;
    --heading: #0B1117;
    --text-heading: #0B1117;
    --text-secondary: #5F6975;
    --text-muted: #7B8490;
    --text-label: #38434D;
    --placeholder: #9AA3AD;
    --border: #E3E8EC;
    --border-strong: #D5DEE5;
    --border-input: #DCE3E8;
    --brand: #FF9800;
    --brand-hover: #F28C00;
    --brand-soft: #FFF4E2;
    --gold: #F5A000;
    --soft-orange: #FFF3DF;
    --positive: #169B62;
    --success: #169B62;
    --success-soft: #ECF8F2;
    --success-text: #147A4D;
    --info: #3178C6;
    --info-soft: #EDF5FC;
    --warning: #D98600;
    --warning-soft: #FFF7E8;
    --warning-text: #A76500;
    --danger: #C93C3C;
    --danger-soft: #FFF0F0;
    --danger-text: #B63232;
    --shadow-sm: 0 4px 16px rgba(20, 40, 60, .04);
    --shadow-card: 0 8px 28px rgba(20, 40, 60, .06);
    --shadow-card-hover: 0 10px 28px rgba(20, 40, 60, .075);
    --shadow-elevated: 0 18px 50px rgba(20, 40, 60, .10);
    --shadow-panel: 0 12px 40px rgba(20, 40, 60, .07);
    --radius-input: 10px;
    --radius-btn: 12px;
    --radius-card: 16px;
    --radius-major: 20px;
}

html body {
    background: var(--background) !important;
    color: var(--text);
}
html body.app-shell,
html body.guest-shell {
    background: var(--surface) !important;
    color: var(--text);
}

/* ========== NAVBAR ========== */
html body .hero-nav,
html body .pub-nav {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #E8ECEF;
    backdrop-filter: blur(16px);
}
html body .hero-nav.is-scrolled,
html body .pub-nav {
    background: rgba(255, 255, 255, .98);
}
html body .hero-brand-name,
html body .pub-brand-name {
    color: #17202A;
}
html body .hero-nav-link,
html body .pub-nav-link {
    color: #17202A;
}
html body .hero-nav-link:hover,
html body .pub-nav-link:hover,
html body .hero-nav-link.is-active,
html body .pub-nav-link.is-active {
    color: #FF9800;
}
html body .hero-nav .gt-hero-btn,
html body .pub-nav .gt-hero-btn,
html body .pub-lang-btn {
    color: #17202A;
}
html body .hero-nav .gt-hero-panel,
html body .pub-nav .gt-hero-panel {
    background: #FFFFFF;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
html body .hero-btn-login,
html body .pub-btn-login {
    color: #17202A;
    background: #FFFFFF;
    border: 1px solid #D9E0E5;
}
html body .hero-btn-login:hover,
html body .pub-btn-login:hover {
    background: var(--surface);
}
html body .hero-btn-signup,
html body .hero-btn-dash,
html body .pub-btn-signup,
html body .pub-btn-dash {
    color: #101820;
    background: var(--brand);
    border-color: var(--brand);
    border-radius: 12px;
}
html body .hero-btn-signup:hover,
html body .hero-btn-dash:hover,
html body .pub-btn-signup:hover,
html body .pub-btn-dash:hover {
    background: var(--brand-hover);
}
html body .hero-menu-btn,
html body .pub-menu-btn {
    color: #17202A;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
}
html body .hero-mobile,
html body .pub-mobile {
    background: #FFFFFF;
    border-top: 1px solid #E8ECEF;
}
html body .hero-mobile a,
html body .pub-mobile a {
    color: #17202A;
    border-bottom-color: var(--border);
}
html body .hero-mobile-auth,
html body .pub-mobile-auth {
    border-top-color: var(--border);
}

@media (max-width: 1023px) {
    html body .hero-nav .gt-hero-btn,
    html body .pub-nav .gt-hero-btn,
    html body .pub-lang-btn {
        background: #FFFFFF;
        border: 1px solid var(--border);
        color: #17202A;
    }
}

/* ========== HERO ========== */
html body .hero-shell {
    background: #F2F8FC;
    min-height: auto;
}
html body .hero-bg img {
    object-fit: cover;
    object-position: 65% 55%;
}
html body .hero-scrim {
    background: linear-gradient(90deg,
        rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 36%,
        rgba(255,255,255,.78) 44%, rgba(255,255,255,.15) 57%,
        rgba(255,255,255,0) 65%);
}
html body .az-image-caption {
    margin: 12px 0 0;
    color: #4f5751;
    font-size: 12px;
    line-height: 1.4;
}
html body .hero-stage {
    padding-bottom: 48px;
}
html body .hero-badge {
    background: rgba(255,255,255,.88);
    border: 1px solid var(--border);
}
html body .hero-badge-item { color: #17202A; }
html body .hero-badge-item.is-accent { color: var(--brand); }
html body .hero-title { color: #101820; }
html body .hero-title-accent { color: #FF9800; }
html body .hero-desc { color: #5F6975; }
html body .hero-cta-primary {
    color: #101820;
    background: var(--brand);
    box-shadow: none;
    border-radius: 12px;
}
html body .hero-cta-primary:hover { background: var(--brand-hover); }
html body .hero-cta-secondary {
    color: #17202A;
    background: #FFFFFF;
    border: 1px solid #D9E0E5;
    border-radius: 12px;
}
html body .hero-cta-secondary:hover { background: var(--surface); }
html body .hero-feature + .hero-feature { border-left-color: var(--border); }
html body .hero-feature svg { color: var(--brand); }
html body .hero-feature-title { color: #101820; }
html body .hero-feature-sub { color: #5F6975; }
html body .hero-energy { display: none; }
html body .hero-stats {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-panel);
    backdrop-filter: none;
    margin-top: 28px;
}
html body .hero-stats--facts {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 18px 24px;
}
html body .hero-stats--facts .hero-stat { justify-content: flex-start; }
html body .hero-stat-value { font-size: clamp(18px, 2vw, 24px); }
html body .hero-stat + .hero-stat { border-left-color: var(--border); }
html body .hero-stat svg { color: var(--brand); }
html body .hero-stat-value { color: #101820; }
html body .hero-stat-label { color: #5F6975; }

/* ========== CALCULATOR ========== */
html body #calculator {
    background-color: #F2F8FC;
    min-height: 720px;
}
html body #calculator .calc-bg-img { object-fit: cover; object-position: 50% 50%; }
html body #calculator .calc-bg-readability {
    background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 28%, rgba(255,255,255,.28) 48%, transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 22%);
}
html body #calculator .calc-copy::before { display: none; }
html body #calculator .calc-badge {
    color: var(--brand);
    background: transparent;
    border: 0;
}
html body #calculator .calc-title,
html body #calculator .calc-title-lead { color: #101820; }
html body #calculator .calc-title-accent { color: #FF9800; }
html body #calculator .calc-intro { color: #5F6975; }
html body #calculator .calc-card {
    background: rgba(255,255,255,.96);
    border: 1px solid #E3E8EC;
    box-shadow: 0 20px 60px rgba(30,50,70,.10);
    border-radius: 20px;
}
html body #calculator .calc-label { color: #5F6975; }
html body #calculator .calc-amount-value { color: #101820; }
html body #calculator .calc-return { color: var(--positive); }

/* ========== HOW IT WORKS ========== */
html body #how-it-works {
    background: #FFFFFF;
    padding: 96px 0 88px;
}
html body #how-it-works::before { display: none; }
html body .hiw-kicker { color: var(--brand); letter-spacing: .12em; }
html body .hiw-kicker::before,
html body .hiw-kicker::after { background: var(--brand); opacity: .45; }
html body .hiw-title,
html body .hiw-title-line { color: #0B1117; }
html body .hiw-title-accent { color: #FF9800; }
html body .hiw-body { color: #5F6975; }
html body .hiw-card {
    min-height: 0;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
html body .hiw-card:hover {
    transform: translateY(-2px);
    border-color: #D7DEE4;
    box-shadow: var(--shadow-card-hover);
}
html body .hiw-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    height: auto;
    background: #f5f4f0;
}
html body .hiw-card--solar img { object-fit: cover; object-position: 55% 60%; }
html body .hiw-card--ai img,
html body .hiw-card--cloud img { object-fit: contain; object-position: center; }
html body .hiw-card-scrim { display: none; }
html body .hiw-card-body { padding: 22px 22px 26px; }
html body .hiw-num {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--soft-orange);
    border: 1px solid rgba(255,152,0,.28);
    box-shadow: none;
    color: var(--brand);
    font-size: 20px;
}
html body .hiw-card-title { color: #0B1117; margin-top: 8px; }
html body .hiw-card-desc { color: #5F6975; }

@media (max-width: 767px) {
    html body .hiw-card { min-height: 0; }
    html body .hiw-card-media { height: auto; }
}

/* ========== FEATURED PLANS ========== */
html body #featured-plans.fmp {
    min-height: 0;
    padding: 88px 0 80px;
    background: var(--surface);
}
html body .fmp-bg,
html body .fmp-scrim { display: none; }
html body .fmp-title { color: #0B1117; }
html body .fmp-title span { color: #FF9800; }
html body .fmp-intro { color: #5F6975; }
html body .fmp-card {
    background: #FFFFFF;
    border: 1px solid #E1E6EA;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(20,40,60,.07);
    backdrop-filter: none;
}
html body .fmp-card:hover {
    transform: translateY(-2px);
    border-color: #D7DEE4;
    box-shadow: var(--shadow-card-hover);
}
html body .fmp-popular {
    background: var(--soft-orange);
    color: #9A5B00;
    border: 1px solid rgba(255,152,0,.28);
}
html body .fmp-name { color: #101820; }
html body .fmp-row dt { color: #69737E; }
html body .fmp-row dd { color: #101820; }
html body .fmp-row dd.is-daily { color: #F29900; }
html body .fmp-return { color: var(--positive); }
html body .fmp-start {
    background: var(--brand);
    color: #101820;
    box-shadow: none;
    border-radius: 12px;
}
html body .fmp-start:hover { background: var(--brand-hover); filter: none; }
html body .fmp-all {
    background: #FFFFFF;
    color: #17202A;
    border: 1px solid #D9E0E5;
    box-shadow: none;
}
html body .fmp-all:hover { background: var(--surface); }
html body .fmp-trial { color: #5F6975; }
html body .fmp-trial a { color: var(--brand); }

/* ========== TESTIMONIALS ========== */
html body .hp-reviews {
    position: relative;
    isolation: isolate;
    background: #FFFFFF;
    border: 0;
    padding: 88px 0;
}
html body .hp-reviews-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
html body .hp-reviews-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
html body .hp-reviews > .max-w-7xl { position: relative; z-index: 1; }
html body .hp-reviews .hp-reviews-kicker {
    color: var(--brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
html body .hp-reviews h2 { color: #0B1117; }
html body .hp-reviews .hp-reviews-intro { color: #5F6975; }
html body .hp-review-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}
html body .hp-review-card p { color: #5F6975; }
html body .hp-review-card .hp-review-name { color: #101820; }
html body .hp-review-card .hp-review-loc { color: #7B8490; }
html body .hp-review-avatar {
    background: var(--soft-orange);
    border: 1px solid rgba(255,152,0,.22);
    color: #9A5B00;
}

/* ========== FAQ + AFFILIATE ========== */
html body #faq.hp-faq {
    background: var(--surface);
    padding: 88px 0 48px;
}
html body #affiliate.hp-aff {
    background: #FFFFFF;
    padding: 48px 0 96px;
}
html body .hp-faq-title,
html body .hp-aff-title { color: #0B1117; }
html body .hp-faq-intro,
html body .hp-aff-intro { color: #5F6975; }
html body .hp-faq-visual {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #f7f7f4;
}
html body .hp-faq-visual img {
    object-position: 25% 70%;
}
html body .hp-faq-visual::after { display: none; }
html body .hp-faq-item {
    background: #FFFFFF;
    border: 1px solid #E2E7EB;
    border-radius: 14px;
}
html body .hp-faq-item:hover,
html body .hp-faq-item.is-open { border-color: #D7DEE4; }
html body .hp-faq-q { color: #17202A; }
html body .hp-faq-icon { color: #FF9800; }
html body .hp-faq-a p { color: #68727D; }
html body .hp-faq-link { color: var(--brand); }
html body .hp-aff-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
html body .hp-aff-card:hover {
    transform: translateY(-2px);
    border-color: #D7DEE4;
}
html body .hp-aff-card-label { color: #69737E; }
html body .hp-aff-card-pct { color: #FF9800; }
html body .hp-aff-card-desc { color: #5F6975; }
html body .hp-aff-join {
    background: var(--brand);
    color: #101820;
    box-shadow: none;
    border-radius: 12px;
}
html body .hp-aff-join:hover { filter: none; background: var(--brand-hover); }
html body .hp-aff-terms { color: #17202A; }
html body .hp-aff-visual {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #FFFFFF;
    min-height: 420px;
}
html body .hp-aff-visual::after { display: none; }
html body .hp-aff-visual picture,
html body .hp-aff-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: contain;
    object-position: 75% 50%;
    background: #FFFFFF;
}

@media (max-width: 1199px) {
    html body .hp-faq-visual::after,
    html body .hp-aff-visual::after { display: none; }
}

/* ========== FINAL CTA ========== */
html body .hp-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 96px 24px;
    background: #F2F8FC;
}
html body .hp-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
html body .hp-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
html body .hp-cta-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.58) 50%, rgba(255,255,255,.48) 100%);
}
html body .hp-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
html body .hp-cta-inner h2 {
    margin: 0;
    color: #0B1117;
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
html body .hp-cta-inner p { color: #5F6975; }
html body .hp-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 12px;
    background: var(--brand);
    color: #101820;
    font-weight: 700;
    text-decoration: none;
}
html body .hp-cta-primary:hover { background: var(--brand-hover); }
html body .hp-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #D9E0E5;
    color: #17202A;
    font-weight: 700;
    text-decoration: none;
}
html body .hp-cta-secondary:hover { background: var(--surface); }

/* ========== FOOTER ========== */
html body .site-foot,
html body footer {
    background: #FFFFFF !important;
    border-top: 1px solid #E5E9ED !important;
    color: #69737E;
}
html body .site-foot .text-white,
html body footer .text-white,
html body .site-foot .font-semibold,
html body footer .font-semibold {
    color: #17202A !important;
}
html body .site-foot .text-amber-400,
html body footer .text-amber-400 {
    color: #101820 !important;
}
html body .site-foot a,
html body footer a {
    color: #69737E;
}
html body .site-foot a:hover,
html body footer a:hover {
    color: #101820;
}
html body .site-foot .border-white\/5,
html body footer .border-white\/5 {
    border-color: #E5E9ED !important;
}
html body .site-foot-desktop {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}
html body .site-foot-mobile { display: none !important; }
@media (max-width: 1023px) {
    html body .site-foot-desktop { display: none !important; }
    html body .site-foot-mobile { display: block !important; }
}

@media (max-width: 767px) {
    html body .hero-nav-inner,
    html body .hero-stage,
    html body .pub-nav-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    html body .hero-shell {
        display: flex;
        flex-direction: column;
    }
    html body .hero-bg {
        position: relative;
        order: 3;
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
    html body .hero-scrim { display: none; }
    html body .hero-nav { order: 0; }
    html body .hero-stage {
        order: 1;
        background: #FFFFFF;
        padding-top: 8px;
    }
    html body .hero-bg img {
        object-position: 80% 58%;
    }
    html body #calculator .calc-bg-img { object-position: 30% 62%; }
    html body .hp-faq-visual img { object-position: 25% 70%; }
    html body .hp-aff-visual img {
        object-fit: cover;
        object-position: 100% 50%;
        min-height: 240px;
    }
}

/* ========== SHARED PRODUCT PRIMITIVES ========== */
html body .azi-page {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}
html body header .azi-page {
    padding-top: 22px;
    padding-bottom: 22px;
}
html body .azi-page-title {
    margin: 0;
    color: var(--heading);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
html body .azi-page-desc {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
}
html body .azi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
html body .azi-card {
    background: #FFFFFF;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--text);
}
html body .azi-card-major {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-panel);
}
html body .azi-card-clickable {
    transition: transform .18s ease, box-shadow .18s ease;
}
html body .azi-card-clickable:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}
html body .azi-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-label);
    font-size: 14px;
    font-weight: 600;
}
html body .azi-help {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}
html body .azi-input,
html body .azi-select,
html body .azi-textarea,
html body input.azi-input,
html body select.azi-select,
html body textarea.azi-textarea {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    background: #FFFFFF;
    color: var(--text);
    font: inherit;
    box-shadow: none;
}
html body .azi-textarea,
html body textarea.azi-textarea {
    min-height: 140px;
    padding: 12px 14px;
    resize: vertical;
}
html body .azi-input::placeholder,
html body .azi-textarea::placeholder {
    color: var(--placeholder);
}
html body .azi-input:focus,
html body .azi-select:focus,
html body .azi-textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, .12);
}
html body .azi-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235F6975' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
html body .azi-btn,
html body a.azi-btn,
html body button.azi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html body .azi-btn-primary,
html body a.azi-btn-primary,
html body button.azi-btn-primary {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #101820;
    box-shadow: none;
}
html body .azi-btn-primary:hover,
html body a.azi-btn-primary:hover,
html body button.azi-btn-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}
html body .azi-btn-secondary,
html body a.azi-btn-secondary,
html body button.azi-btn-secondary {
    background: #FFFFFF;
    border: 1px solid #D8E0E6;
    color: #101820;
}
html body .azi-btn-secondary:hover,
html body a.azi-btn-secondary:hover,
html body button.azi-btn-secondary:hover {
    background: var(--surface);
}
html body .azi-btn:disabled,
html body .azi-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
html body .azi-link {
    color: #F28C00;
    font-weight: 600;
    text-decoration: none;
}
html body .azi-link:hover { color: #D97706; }
html body .azi-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
}
html body .azi-alert-success {
    background: var(--success-soft);
    border: 1px solid rgba(22, 155, 98, .20);
    color: var(--success-text);
}
html body .azi-alert-error {
    background: var(--danger-soft);
    border: 1px solid #F4CCCC;
    color: #A72E2E;
}
html body .azi-alert-warning {
    background: var(--warning-soft);
    border: 1px solid rgba(217, 134, 0, .22);
    color: var(--warning-text);
}
html body .azi-alert-info {
    background: var(--info-soft);
    border: 1px solid rgba(49, 120, 198, .18);
    color: #1F5F9A;
}
html body .azi-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: capitalize;
}
html body .azi-badge-success { background: var(--success-soft); color: var(--success-text); }
html body .azi-badge-pending { background: var(--warning-soft); color: var(--warning-text); }
html body .azi-badge-danger { background: var(--danger-soft); color: var(--danger-text); }
html body .azi-badge-info { background: var(--info-soft); color: #1F5F9A; }
html body .azi-badge-brand { background: var(--brand-soft); color: #B86A00; }
html body .azi-badge-muted { background: #F3F5F7; color: #5F6975; }
html body .azi-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
html body .azi-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}
html body .azi-table thead th {
    background: #F7F9FA;
    color: #6B7580;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 20px;
    border-bottom: 1px solid #E8ECEF;
}
html body .azi-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #E8ECEF;
    color: var(--text);
    background: #FFFFFF;
    vertical-align: middle;
}
html body .azi-table tbody tr:hover td { background: #FAFBFC; }
html body .azi-table .is-muted { color: #6B7580; }
html body .azi-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}
html body .azi-empty p { margin: 0; }
html body .azi-progress {
    height: 8px;
    background: #EEF1F3;
    border-radius: 999px;
    overflow: hidden;
}
html body .azi-progress > span {
    display: block;
    height: 100%;
    background: var(--brand);
    border-radius: inherit;
}
html body .azi-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
html body .azi-icon-blue { background: var(--info-soft); color: #3178C6; }
html body .azi-icon-green { background: var(--success-soft); color: #169B62; }
html body .azi-icon-purple { background: #F3EEF8; color: #6D4AA8; }
html body .azi-icon-orange { background: var(--brand-soft); color: #F28C00; }
html body .azi-portfolio {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9EF 55%, #F3F8FC 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}
html body .azi-balance {
    color: var(--heading);
    font-size: clamp(40px, 6vw, 56px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
html body .azi-metric {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
html body .azi-metric-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body .azi-metric-value {
    margin-top: 10px;
    color: var(--heading);
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
html body .azi-metric-desc {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
}
html body .azi-app-nav {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
}
html body .azi-app-link { color: #38434D; }
html body .azi-app-link:hover { color: var(--heading); }
html body .azi-app-link.is-active {
    color: var(--brand);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--brand);
}
html body .azi-dropdown {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 40, 60, .12);
    color: var(--text);
}
html body .azi-dropdown a,
html body .gt-hero-panel a {
    color: #38434D;
}
html body .azi-dropdown a:hover,
html body .azi-dropdown button:hover,
html body .gt-hero-panel a:hover {
    background: #FFF4E2;
    color: #101820;
}
html body .guest-panel {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-elevated);
}
html body .legal-doc {
    color: var(--text-secondary);
}
html body .legal-doc h1,
html body .legal-doc h2,
html body .legal-doc h3,
html body .legal-doc .text-white,
html body .legal-doc strong {
    color: var(--heading) !important;
}
html body .legal-doc a { color: #F28C00; }
html body .legal-doc header { border-color: var(--border) !important; }
html body .blog-prose {
    color: #38434D;
}
html body .blog-prose h2,
html body .blog-prose h3,
html body .blog-prose strong {
    color: var(--heading);
}
html body .blog-prose a { color: #F28C00; }
html body .blog-prose blockquote {
    border-left: 3px solid var(--brand);
    background: #F7F9FA;
    color: var(--text-secondary);
    padding: 12px 20px;
    border-radius: 0 12px 12px 0;
}
html body .wd-page { color: var(--text) !important; }
html body .wd-page h1,
html body .wd-page h2 { color: var(--heading) !important; }
html body .wd-page p,
html body .wd-page li { color: var(--text-secondary) !important; }
html body .wd-page .box {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-card);
}
@media (max-width: 639px) {
    html body .azi-page { padding: 20px 20px 40px; }
    html body .azi-btn-block { width: 100%; }
}