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

:root {
    --bg: #0b0d0f;
    --surface: #121518;
    --surface-light: #181c20;
    --border: rgba(255, 255, 255, 0.08);

    --accent: #b8ff4a;
    --accent-hover: #c8ff70;

    --text: #f4f5ef;
    --muted: #8d939a;

    --danger: #ff5c5c;
    --warning: #ffc857;

    --sidebar-width: 250px;
}


/* ============================= */
/* GLOBAL                        */
/* ============================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);

    font-family: 'DM Sans', sans-serif;

    min-height: 100vh;
}


/* ============================= */
/* APP LAYOUT                    */
/* ============================= */

.app-shell {
    display: flex;
    min-height: 100vh;
}


/* ============================= */
/* SIDEBAR                       */
/* ============================= */

.sidebar {
    width: var(--sidebar-width);

    background: #090b0d;

    border-right: 1px solid var(--border);

    padding: 28px 18px;

    display: flex;
    flex-direction: column;

    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}


/* Brand */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 12px;

    margin-bottom: 55px;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.brand-mark {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--accent);
    color: #0b0d0f;

    border-radius: 10px;

    font-weight: 700;
}


/* Navigation */

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    border-radius: 12px;

    color: var(--muted);

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.nav-item span:first-child {
    width: 20px;

    font-size: 17px;

    text-align: center;
}

.nav-item:hover {
    background: var(--surface-light);
    color: var(--text);

    transform: translateX(3px);
}

.nav-item:active {
    transform: scale(0.98);
}


/* Sidebar footer */

.sidebar-footer {
    margin-top: auto;

    padding: 14px;

    color: var(--muted);

    font-size: 12px;

    border-top: 1px solid var(--border);
}


/* ============================= */
/* MAIN CONTENT                  */
/* ============================= */

.main-content {
    margin-left: var(--sidebar-width);

    width: calc(100% - var(--sidebar-width));

    min-height: 100vh;
}


/* ============================= */
/* TOPBAR                        */
/* ============================= */

.topbar {
    height: 74px;

    padding: 0 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid var(--border);
}

.topbar-label {
    color: var(--muted);

    font-size: 11px;

    letter-spacing: 2px;
}

.topbar-right {
    display: flex;
    align-items: center;
}

.live-indicator {
    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--muted);

    font-size: 12px;
}


/* ============================= */
/* PAGE CONTENT                  */
/* ============================= */

.page-content {
    padding: 42px;
}


/* ============================= */
/* STATUS                        */
/* ============================= */

.status-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--accent);

    margin-right: 5px;

    box-shadow: 0 0 10px rgba(184, 255, 74, 0.6);
}


/* ============================= */
/* TYPOGRAPHY                    */
/* ============================= */

h1,
h2,
h3,
h4 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text);
}

h1 {
    font-size: clamp(36px, 5vw, 64px);

    font-weight: 700;

    letter-spacing: -2px;
}

h2 {
    font-size: 32px;

    letter-spacing: -1px;
}

p {
    color: var(--muted);
}


/* ============================= */
/* LINKS                         */
/* ============================= */

a {
    transition: 0.2s ease;
}


/* ============================= */
/* RESPONSIVE                    */
/* ============================= */

@media (max-width: 900px) {

    :root {
        --sidebar-width: 210px;
    }

    .page-content {
        padding: 30px;
    }

    .topbar {
        padding: 0 30px;
    }
}


@media (max-width: 700px) {

    .sidebar {
        width: 100%;

        height: 70px;

        bottom: auto;

        padding: 10px 15px;

        flex-direction: row;
        align-items: center;

        border-right: none;
        border-bottom: 1px solid var(--border);

        z-index: 1000;
    }

    .brand {
        margin: 0;

        flex-shrink: 0;
    }

    .brand span {
        display: none;
    }

    .sidebar-nav {
        flex-direction: row;

        margin-left: auto;

        gap: 2px;
    }

    .nav-item {
        padding: 10px;
    }

    .nav-item span:last-child {
        display: none;
    }

    .sidebar-footer {
        display: none;
    }

    .main-content {
        margin-left: 0;

        width: 100%;

        padding-top: 70px;
    }

    .topbar {
        display: none;
    }

    .page-content {
        padding: 24px 18px;
    }
}

/* ============================= */
/* SIGORA HERO                 */
/* ============================= */

.hero {
    min-height: calc(100vh - 74px);

    position: relative;

    display: flex;
    align-items: center;

    padding: 70px 8%;

    overflow: hidden;
}


/* Hero content */

.hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;
}


/* Small label */

.hero-eyebrow {
    color: var(--muted);

    font-size: 11px;

    letter-spacing: 4px;

    margin-bottom: 24px;

    opacity: 0;

    animation: heroFade 0.8s ease forwards;

    animation-delay: 0.2s;
}


/* Animated logo */

.hero-logo {
    display: flex;

    margin: 0;

    font-family: 'Space Grotesk', sans-serif;

    font-size: clamp(60px, 10vw, 150px);

    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -7px;

    color: var(--text);
}


/* Individual letters */

.hero-logo span {
    display: inline-block;

    opacity: 0;

    transform: translateY(35px);

    animation: logoReveal 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}


/* Letter timing */

.hero-logo span:nth-child(1) {
    animation-delay: 0.15s;
}

.hero-logo span:nth-child(2) {
    animation-delay: 0.22s;
}

.hero-logo span:nth-child(3) {
    animation-delay: 0.29s;
}

.hero-logo span:nth-child(4) {
    animation-delay: 0.36s;
}

.hero-logo span:nth-child(5) {
    animation-delay: 0.43s;
}

.hero-logo span:nth-child(6) {
    animation-delay: 0.50s;
}

.hero-logo span:nth-child(7) {
    animation-delay: 0.57s;
}

.hero-logo span:nth-child(8) {
    animation-delay: 0.64s;
}


/* Green accent */

.hero-logo span:last-child {
    color: var(--accent);
}


/* Line */

.hero-line {
    width: 0;

    height: 1px;

    background: var(--accent);

    margin: 30px 0;

    animation: lineReveal 0.9s ease forwards;

    animation-delay: 0.9s;
}


/* Main heading */

.hero-title {
    margin: 0;

    font-family: 'Space Grotesk', sans-serif;

    font-size: clamp(32px, 4vw, 58px);

    line-height: 1.05;

    letter-spacing: -2px;

    opacity: 0;

    animation: heroFade 0.8s ease forwards;

    animation-delay: 1.1s;
}

.hero-title span {
    color: var(--muted);
}


/* Description */

.hero-description {
    max-width: 520px;

    margin-top: 24px;

    font-size: 16px;

    line-height: 1.7;

    color: var(--muted);

    opacity: 0;

    animation: heroFade 0.8s ease forwards;

    animation-delay: 1.25s;
}


/* Buttons */

.hero-actions {
    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 36px;

    opacity: 0;

    animation: heroFade 0.8s ease forwards;

    animation-delay: 1.4s;
}

.hero-button {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 14px 20px;

    background: var(--accent);

    color: #0b0d0f;

    border-radius: 10px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.hero-button span {
    font-size: 20px;

    transition: transform 0.25s ease;
}

.hero-button:hover {
    color: #0b0d0f;

    background: var(--accent-hover);

    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(184, 255, 74, 0.15);
}

.hero-button:hover span {
    transform: translateX(5px);
}


.hero-secondary {
    color: var(--muted);

    text-decoration: none;

    font-size: 14px;

    transition: color 0.2s ease;
}

.hero-secondary:hover {
    color: var(--text);
}


/* ============================= */
/* DECORATION                    */
/* ============================= */

.hero-decoration {
    position: absolute;

    right: -160px;

    top: 50%;

    transform: translateY(-50%);

    width: 600px;
    height: 600px;

    opacity: 0;

    animation: decorationReveal 1.5s ease forwards;

    animation-delay: 0.8s;
}

.hero-circle {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border: 1px solid rgba(184, 255, 74, 0.12);

    top: 90px;
    left: 90px;
}

.hero-orbit {
    position: absolute;

    width: 500px;
    height: 200px;

    border: 1px solid rgba(184, 255, 74, 0.08);

    border-radius: 50%;

    transform: rotate(-30deg);

    top: 200px;
    left: 50px;
}


/* ============================= */
/* ANIMATIONS                    */
/* ============================= */

@keyframes logoReveal {

    0% {
        opacity: 0;

        transform:
            translateY(35px)
            rotateX(45deg);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            rotateX(0);
    }
}


@keyframes lineReveal {

    0% {
        width: 0;
    }

    100% {
        width: 110px;
    }
}


@keyframes heroFade {

    0% {
        opacity: 0;

        transform: translateY(15px);
    }

    100% {
        opacity: 1;

        transform: translateY(0);
    }
}


@keyframes decorationReveal {

    0% {
        opacity: 0;

        transform:
            translateY(-50%)
            scale(0.8)
            rotate(-10deg);
    }

    100% {
        opacity: 1;

        transform:
            translateY(-50%)
            scale(1)
            rotate(0);
    }
}


/* ============================= */
/* MOBILE                       */
/* ============================= */

@media (max-width: 700px) {

    .hero {
        min-height: calc(100vh - 68px);

        padding: 50px 25px;

        align-items: flex-start;
    }

    .hero-logo {
        font-size: 58px;

        letter-spacing: -4px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }

    .hero-decoration {
        right: -300px;

        opacity: 0.5;
    }
}

.logout-button {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #888;
    font-size: 14px;
    margin-bottom: 18px;
    transition: 0.2s ease;
}

.logout-button:hover {
    color: #d8ff3e;
}

.version {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goal-progress {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    width: var(--goal-progress);
    transform-origin: left;
    transform: scaleX(0);
    border-radius: 999px;
    background: #c9a96e;
    animation: goalFill 1.5s ease-out forwards;
}

@keyframes goalFill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.goal-ai-insight {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 18px;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );

    border: 1px solid rgba(255,255,255,0.10);

    position: relative;
    overflow: hidden;

    animation: goalAiReveal 0.7s ease both;
}

.goal-ai-insight::before {
    content: "";

    position: absolute;

    top: -60px;
    left: -60px;

    width: 140px;
    height: 140px;

    background: rgba(255,255,255,0.05);

    border-radius: 50%;

    filter: blur(25px);

    pointer-events: none;
}

.goal-ai-header {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 0.78rem;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0.75;

    margin-bottom: 10px;
}

.goal-ai-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: rgba(255,255,255,0.10);

    font-size: 0.9rem;

    animation: aiPulse 2.5s ease-in-out infinite;
}

.goal-ai-text {
    margin: 0;

    line-height: 1.6;

    font-size: 0.92rem;

    opacity: 0.88;
}

@keyframes goalAiReveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes aiPulse {

    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }

}

/* =====================================================
   SIGORA AI - GOAL INSIGHTS
   ===================================================== */

.goal-ai-insight {

    margin-top: 24px;

    padding: 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    border: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    position: relative;

    overflow: hidden;

    animation:
        goalAiReveal 0.7s ease both;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* AI glow */

.goal-ai-insight::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.12),
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


/* Hover */

.goal-ai-insight:hover {

    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.18);

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.13);
}


/* =====================================================
   HEADER
   ===================================================== */

.goal-ai-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;

    position: relative;

    z-index: 1;
}


.goal-ai-title {

    display: flex;

    align-items: center;

    gap: 11px;
}


.goal-ai-icon {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.10);

    font-size: 1rem;

    animation:
        aiPulse 2.5s ease-in-out infinite;
}


.goal-ai-label {

    display: block;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.goal-ai-subtitle {

    display: block;

    margin-top: 2px;

    font-size: 0.72rem;

    opacity: 0.50;
}


.goal-ai-status {

    padding: 5px 9px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    opacity: 0.55;
}


/* =====================================================
   CONTENT
   ===================================================== */

.goal-ai-content {

    display: flex;

    flex-direction: column;

    gap: 10px;

    position: relative;

    z-index: 1;
}


.goal-ai-section {

    padding: 13px 15px;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.055);

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.goal-ai-section:hover {

    background:
        rgba(255, 255, 255, 0.06);

    transform: translateX(3px);
}


.goal-ai-section-title {

    margin-bottom: 6px;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.04em;
}


.goal-ai-section p {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.55;

    opacity: 0.78;
}


/* Extra income */

.goal-ai-extra {

    background:
        rgba(255, 255, 255, 0.045);
}


/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes goalAiReveal {

    from {

        opacity: 0;

        transform:
            translateY(12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes aiPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity:
            0.75;

    }

    50% {

        transform:
            scale(1.08);

        opacity:
            1;

    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

    .goal-ai-insight {

        padding: 16px;

        border-radius: 17px;

    }


    .goal-ai-section {

        padding: 12px;

    }


    .goal-ai-section p {

        font-size: 0.84rem;

    }

}

/* =========================================================
   SIGORA BUDGET AI COPILOT
   ========================================================= */

.budget-copilot {

    margin-top: 24px;

    padding: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.025)
        );

    border: 1px solid rgba(255,255,255,0.08);

    position: relative;

    overflow: hidden;

    animation: budgetCopilotEnter 0.6s ease both;

}


.budget-copilot::before {

    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(255,255,255,0.035);

    pointer-events: none;

}


/* =========================================================
   HEADER
   ========================================================= */

.budget-copilot-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;

}


.budget-copilot-brand {

    display: flex;

    align-items: center;

    gap: 11px;

}


.budget-copilot-icon {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255,255,255,0.08);

    font-size: 17px;

}


.budget-copilot-name {

    font-size: 14px;

    font-weight: 700;

    letter-spacing: -0.01em;

}


.budget-copilot-label {

    margin-top: 2px;

    font-size: 11px;

    opacity: 0.5;

}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.budget-ai-badge {

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.07em;

}


.budget-ai-good {

    background: rgba(70, 190, 120, 0.12);

    color: #78d6a0;

}


.budget-ai-warning {

    background: rgba(240, 180, 70, 0.12);

    color: #e9b85d;

}


.budget-ai-danger {

    background: rgba(235, 90, 90, 0.12);

    color: #ee8585;

}


/* =========================================================
   CONTENT
   ========================================================= */

.budget-copilot-content {

    position: relative;

    z-index: 1;

}


.budget-copilot-headline {

    font-size: 15px;

    line-height: 1.55;

    font-weight: 600;

    margin-bottom: 18px;

}


/* =========================================================
   BEST MOVE
   ========================================================= */

.budget-copilot-action {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 13px;

    border-radius: 13px;

    background: rgba(255,255,255,0.045);

}


.budget-copilot-action-icon {

    flex-shrink: 0;

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(255,255,255,0.07);

}


.budget-copilot-action span {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    opacity: 0.5;

}


.budget-copilot-action p {

    margin: 0;

    font-size: 12px;

    line-height: 1.55;

    opacity: 0.85;

}


/* =========================================================
   DETAIL
   ========================================================= */

.budget-copilot-detail {

    margin-top: 12px;

    font-size: 11px;

    line-height: 1.55;

    opacity: 0.55;

}


/* =========================================================
   EXTRA INCOME
   ========================================================= */

.budget-copilot-extra {

    margin-top: 14px;

    padding-top: 13px;

    border-top: 1px solid rgba(255,255,255,0.07);

}


.budget-copilot-extra span {

    display: block;

    margin-bottom: 5px;

    font-size: 10px;

    font-weight: 700;

    opacity: 0.6;

}


.budget-copilot-extra p {

    margin: 0;

    font-size: 11px;

    line-height: 1.5;

    opacity: 0.7;

}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes budgetCopilotEnter {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   HOVER
   ========================================================= */

.budget-copilot {

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;

}


.budget-copilot:hover {

    transform: translateY(-2px);

    border-color: rgba(255,255,255,0.13);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.065),
            rgba(255,255,255,0.03)
        );

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .budget-copilot {

        padding: 16px;

        border-radius: 15px;

    }


    .budget-copilot-header {

        align-items: flex-start;

    }


    .budget-copilot-headline {

        font-size: 14px;

    }

}

/* =========================================================
   SIGORA DASHBOARD
   ========================================================= */

.dashboard-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 28px 70px;
}


/* =========================================================
   HERO
   ========================================================= */

.dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

.dashboard-hero h1 {
    margin: 7px 0 8px;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.dashboard-hero h1 span {
    color: #b8ff3d;
    opacity: 0.9;
}

.dashboard-hero p {
    margin: 0;
    font-size: 14px;
    opacity: 0.55;
}


/* =========================================================
   SUMMARY
   ========================================================= */

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

.dashboard-stat-card {
    min-height: 150px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.055),
        rgba(255, 255, 255, 0.02)
    );

    animation: dashboardFadeUp 0.55s ease both;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(184, 255, 61, 0.25);
}

.dashboard-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-stat-top > span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
}

.dashboard-stat-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(184, 255, 61, 0.08);
    color: #b8ff3d;

    font-size: 13px;
}

.dashboard-stat-value {
    display: block;
    margin-top: 22px;
    font-size: 25px;
    letter-spacing: -0.03em;
}

.dashboard-stat-caption {
    display: block;
    margin-top: 7px;
    font-size: 10px;
    opacity: 0.4;
}


/* =========================================================
   PANELS
   ========================================================= */

.dashboard-main-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(300px, 1fr);

    gap: 16px;
}

.dashboard-panel {
    padding: 22px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
}

.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-panel-header h2 {
    margin: 5px 0 0;
    font-size: 19px;
    letter-spacing: -0.025em;
}

.dashboard-panel-header a {
    font-size: 11px;
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.dashboard-panel-header a:hover {
    opacity: 1;
    color: #b8ff3d;
}

.dashboard-panel-eyebrow {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0.4;
}

.dashboard-period-pill {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(184, 255, 61, 0.08);
    color: #b8ff3d;
    font-size: 9px;
    opacity: 0.8;
}


/* =========================================================
   MONEY FLOW
   ========================================================= */

.money-flow-chart {
    height: 210px;

    display: flex;
    align-items: stretch;

    gap: 18px;

    padding: 10px 5px 0;
}

.money-flow-column {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    gap: 9px;
}

.money-flow-bars {
    width: 100%;
    height: 170px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 4px;
}

.money-flow-bar {
    width: 16px;
    min-height: 4px;

    border-radius: 6px 6px 2px 2px;

    transform-origin: bottom;

    animation:
        chartGrow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.money-flow-bar:hover {
    transform: scaleX(1.15);
    opacity: 0.75;
}

.income-bar {
    background: #b8ff3d;
}

.expense-bar {
    background: rgba(184, 255, 61, 0.25);
}

.money-flow-column > span {
    font-size: 10px;
    opacity: 0.4;
}

.money-flow-legend {
    display: flex;
    gap: 18px;
    margin-top: 18px;
}

.money-flow-legend span {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 10px;
    opacity: 0.5;
}

.money-flow-legend i {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;
}

.legend-income {
    background: #b8ff3d;
}

.legend-expense {
    background: rgba(184, 255, 61, 0.25);
}


/* =========================================================
   ALERTS
   ========================================================= */

.dashboard-alert-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dashboard-alert {
    display: grid;

    grid-template-columns:
        32px
        1fr
        auto;

    align-items: center;

    gap: 10px;

    padding: 12px;

    border-radius: 13px;

    text-decoration: none;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid transparent;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.dashboard-alert:hover {
    transform: translateX(3px);

    background: rgba(184, 255, 61, 0.045);

    border-color: rgba(184, 255, 61, 0.15);
}

.dashboard-alert-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(184, 255, 61, 0.08);
    color: #b8ff3d;

    font-size: 13px;
}

.dashboard-alert strong {
    display: block;
    font-size: 11px;
}

.dashboard-alert p {
    margin: 3px 0 0;

    font-size: 10px;
    line-height: 1.45;

    opacity: 0.45;
}

.dashboard-alert-arrow {
    opacity: 0.3;
}

.alert-danger {
    border-color: rgba(230, 90, 90, 0.12);
}

.alert-warning {
    border-color: rgba(235, 180, 70, 0.1);
}

.alert-success {
    border-color: rgba(80, 190, 120, 0.1);
}

.dashboard-empty-alert {
    text-align: center;
    padding: 30px 10px;
}

.dashboard-empty-alert > div {
    width: 42px;
    height: 42px;

    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(184, 255, 61, 0.1);
    color: #b8ff3d;
}

.dashboard-empty-alert strong {
    display: block;
    font-size: 13px;
}

.dashboard-empty-alert p {
    margin: 6px auto 0;

    max-width: 220px;

    font-size: 10px;
    line-height: 1.5;

    opacity: 0.45;
}


/* =========================================================
   SIGORA INSIGHT CARD
   ========================================================= */

.dashboard-ai-card {
    position: relative;
    overflow: hidden;

    margin-top: 16px;

    padding: 25px;

    border-radius: 22px;

    border: 1px solid rgba(184, 255, 61, 0.22);

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(184, 255, 61, 0.09),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(184, 255, 61, 0.045),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 0 0 1px rgba(184, 255, 61, 0.025),
        0 18px 55px rgba(0, 0, 0, 0.16);

    animation: dashboardFadeUp 0.7s ease both;
}

.dashboard-ai-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    top: -180px;
    right: -90px;

    border-radius: 50%;

    background: rgba(184, 255, 61, 0.10);

    filter: blur(45px);

    pointer-events: none;
}

.dashboard-ai-header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;
}

.dashboard-ai-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dashboard-ai-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(184, 255, 61, 0.12);
    border: 1px solid rgba(184, 255, 61, 0.18);

    color: #b8ff3d;

    font-size: 18px;

    box-shadow:
        0 0 20px rgba(184, 255, 61, 0.08);
}

.dashboard-ai-brand span {
    display: block;

    font-size: 13px;
    font-weight: 750;

    color: #b8ff3d;
}

.dashboard-ai-brand small {
    display: block;

    margin-top: 3px;

    font-size: 10px;

    opacity: 0.45;
}

.dashboard-ai-live {
    padding: 5px 8px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.1em;

    background: rgba(184, 255, 61, 0.09);
    border: 1px solid rgba(184, 255, 61, 0.15);

    color: #b8ff3d;

    opacity: 0.85;
}


/* IMPORTANT:
   Keep the insight content horizontal and wide.
*/

.dashboard-ai-content {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    max-width: 1050px;

    margin-top: 22px;
}

.dashboard-ai-content h2 {
    display: block;

    width: 100%;

    margin: 0;

    font-size: 21px;

    line-height: 1.35;

    letter-spacing: -0.025em;
}

.dashboard-ai-content p {
    display: block;

    width: 100%;
    max-width: 850px;

    margin: 10px 0 0;

    font-size: 12px;

    line-height: 1.7;

    opacity: 0.58;
}

.dashboard-ai-focus {
    display: inline-flex;

    flex-direction: column;

    margin-top: 18px;

    padding: 10px 13px;

    border-radius: 12px;

    background: rgba(184, 255, 61, 0.065);

    border: 1px solid rgba(184, 255, 61, 0.12);
}

.dashboard-ai-focus span {
    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: #b8ff3d;

    opacity: 0.65;
}

.dashboard-ai-focus strong {
    margin-top: 4px;

    font-size: 11px;
}


/* =========================================================
   LOWER GRID
   ========================================================= */

.dashboard-lower-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-top: 16px;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.dashboard-category-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 12px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-category-row:last-child {
    border-bottom: none;
}

.dashboard-category-name {
    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 11px;
}

.category-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #b8ff3d;

    box-shadow:
        0 0 8px rgba(184, 255, 61, 0.25);
}

.dashboard-category-row strong {
    font-size: 11px;
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.dashboard-small-empty {
    padding: 25px 0;

    text-align: center;
}

.dashboard-small-empty span {
    font-size: 22px;

    color: #b8ff3d;

    opacity: 0.7;
}

.dashboard-small-empty p {
    margin: 8px 0 5px;

    font-size: 11px;

    opacity: 0.5;
}

.dashboard-small-empty a {
    font-size: 10px;

    color: #b8ff3d;
}


/* =========================================================
   TRANSACTIONS
   ========================================================= */

.dashboard-transactions-panel {
    margin-top: 16px;
}

.dashboard-transactions-list {
    display: flex;

    flex-direction: column;
}

.dashboard-transaction-row {
    display: grid;

    grid-template-columns:
        34px
        1fr
        auto
        auto;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-transaction-row:last-child {
    border-bottom: none;
}

.transaction-icon {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);
}

.transaction-income {
    color: #b8ff3d;
    opacity: 0.95;
}

.transaction-expense {
    opacity: 0.5;
}

.transaction-main strong {
    display: block;

    font-size: 11px;
}

.transaction-main span {
    display: block;

    margin-top: 3px;

    font-size: 9px;

    opacity: 0.4;
}

.transaction-date {
    font-size: 9px;

    opacity: 0.35;
}

.transaction-amount {
    font-size: 11px;
}

.amount-income {
    color: #b8ff3d;
    opacity: 0.95;
}

.amount-expense {
    opacity: 0.65;
}


/* =========================================================
   NO TRANSACTIONS
   ========================================================= */

.dashboard-no-transactions {
    padding: 50px 20px;

    text-align: center;
}

.dashboard-no-transactions > span {
    font-size: 30px;

    color: #b8ff3d;

    opacity: 0.35;
}

.dashboard-no-transactions h3 {
    margin: 12px 0 5px;

    font-size: 14px;
}

.dashboard-no-transactions p {
    margin: 0 auto 18px;

    max-width: 280px;

    font-size: 11px;

    line-height: 1.5;

    opacity: 0.4;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes dashboardFadeUp {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes chartGrow {

    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .dashboard-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .dashboard-page {
        padding: 24px 16px 50px;
    }

    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-hero h1 {
        font-size: 34px;
    }

    .dashboard-summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-stat-card {
        min-height: 125px;
        padding: 16px;
    }

    .dashboard-stat-value {
        font-size: 19px;
    }

    .dashboard-lower-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-transaction-row {
        grid-template-columns:
            34px
            1fr
            auto;
    }

    .transaction-date {
        display: none;
    }

    .dashboard-ai-card {
        padding: 20px;
    }

}


@media (max-width: 430px) {

    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-card {
        min-height: 115px;
    }

    .money-flow-chart {
        gap: 8px;
    }

    .money-flow-bar {
        width: 11px;
    }

    .dashboard-ai-header {
        align-items: flex-start;
    }

    .dashboard-ai-live {
        font-size: 7px;
    }

}
/* =========================================================
   FINNSIGHT LAUNCH SYSTEM
   Charcoal / black / white / lime only
   ========================================================= */
:root {
    --bg: #090b0d;
    --surface: #111418;
    --surface-2: #171b20;
    --accent: #b8ff3d;
    --accent-soft: rgba(184,255,61,.10);
    --text: #f5f7f1;
    --muted: #858c94;
}

.eyebrow, .page-eyebrow, .settings-label {
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-button, .premium-button, .settings-action-button, .secondary-button, .danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 17px;
    border-radius: 12px;
    border: 1px solid rgba(184,255,61,.22);
    background: var(--accent);
    color: #080a0b !important;
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-button:hover, .premium-button:hover, .settings-action-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(184,255,61,.10); }
.secondary-button { background: transparent; color: var(--text) !important; border-color: var(--border); }

/* AUTH */
.auth-page .sidebar, .auth-page .mobile-nav, .auth-page .topbar { display: none; }
.auth-page .main-content { margin-left: 0; width: 100%; }
.auth-page .page-content { padding: 0; min-height: 100vh; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; background: radial-gradient(circle at 50% 0, rgba(184,255,61,.06), transparent 34%); }
.auth-card-modern { width: min(100%, 430px); padding: 38px; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.auth-brand-mark { width: 44px; height: 44px; display:grid; place-items:center; margin-bottom: 24px; border-radius: 13px; background: var(--accent); color:#080a0b; font: 800 22px 'Space Grotesk',sans-serif; }
.auth-card-modern h1 { margin: 8px 0 8px; font-size: clamp(32px, 7vw, 46px); line-height: 1; }
.auth-subtitle { margin: 0 0 28px; font-size: 13px; line-height: 1.6; }
.auth-form { display:flex; flex-direction:column; gap:9px; }
.auth-form label, .modern-form-card label, .settings-form label { font-size: 11px; color: #c8ccd0; font-weight: 700; }
.auth-form input, .modern-form-card input, .modern-form-card select, .settings-form input, .settings-form select { width:100%; margin-bottom: 8px; padding: 13px 14px; border:1px solid rgba(255,255,255,.09); border-radius: 12px; background:#0c0f12; color:var(--text); outline:none; font-size:14px; }
.auth-form input:focus, .modern-form-card input:focus, .modern-form-card select:focus, .settings-form input:focus, .settings-form select:focus { border-color: rgba(184,255,61,.55); box-shadow: 0 0 0 3px rgba(184,255,61,.07); }
.auth-submit { min-height:48px; margin-top:7px; border:0; border-radius:13px; background:var(--accent); color:#080a0b; font-weight:900; cursor:pointer; }
.auth-submit span { margin-left:8px; }
.auth-switch { margin:20px 0 0; text-align:center; font-size:12px; }
.auth-switch a { color:var(--accent); font-weight:800; text-decoration:none; }
.auth-error, .settings-message { padding:12px 14px; margin-bottom:18px; border-radius:12px; font-size:12px; }
.auth-error, .settings-message.error { color:#fff; background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.18); }
.settings-message.success { color:var(--accent); background:var(--accent-soft); border:1px solid rgba(184,255,61,.18); }

/* MOBILE NAV */
.mobile-nav { display:none; }
.topbar-premium { margin-right:18px; padding:6px 10px; border:1px solid rgba(184,255,61,.18); border-radius:999px; color:var(--accent); font-size:10px; font-weight:800; text-decoration:none; }
.premium-sidebar-link { display:flex; gap:8px; align-items:center; margin-bottom:15px; color:var(--accent); text-decoration:none; font-size:11px; font-weight:800; }

/* SETTINGS */
.settings-page, .premium-page, .planning-page, .import-page, .form-page { max-width: 1250px; margin:0 auto; padding:12px 0 60px; }
.settings-hero, .planning-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.settings-hero h1, .planning-hero h1, .premium-hero h1, .form-page-header h1 { margin:7px 0 8px; font-size:clamp(34px,5vw,58px); line-height:.98; }
.settings-hero p, .planning-hero p, .form-page-header p, .premium-hero p { margin:0; max-width:650px; font-size:13px; line-height:1.65; }
.premium-pill { padding:7px 10px; border-radius:999px; background:var(--accent-soft); border:1px solid rgba(184,255,61,.2); color:var(--accent); font-size:9px; font-weight:900; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.settings-card { padding:22px; border:1px solid rgba(255,255,255,.075); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); }
.settings-card-wide { grid-column:1/-1; }
.settings-card-heading { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; margin-bottom:20px; }
.settings-card-heading h2 { margin:5px 0 0; font-size:20px; }
.settings-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:var(--accent-soft); }
.settings-form { display:flex; flex-direction:column; gap:12px; }
.settings-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.settings-form input:disabled { opacity:.45; }
.toggle-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer; }
.toggle-row:last-of-type { border-bottom:0; }
.toggle-row strong, .settings-list-action strong { display:block; color:var(--text); font-size:12px; }
.toggle-row small, .settings-list-action small { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.45; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-row i { width:43px; height:24px; flex:none; border-radius:999px; background:#262b31; border:1px solid rgba(255,255,255,.08); position:relative; }
.toggle-row i:after { content:""; position:absolute; width:18px; height:18px; top:2px; left:2px; border-radius:50%; background:#7c8288; transition:.2s; }
.toggle-row input:checked + i { background:var(--accent-soft); border-color:rgba(184,255,61,.3); }
.toggle-row input:checked + i:after { transform:translateX(19px); background:var(--accent); }
.settings-action-button { border:0; margin-top:5px; align-self:flex-start; }
.settings-list-action { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; color:var(--text); }
.settings-list-action:last-child { border-bottom:0; }
.settings-list-action b { color:var(--accent); }
.settings-list-action em { color:var(--muted); font-size:8px; font-style:normal; font-weight:900; letter-spacing:.1em; }
.settings-list-action.disabled { opacity:.45; }
.settings-muted { margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.premium-price { margin:3px 0 16px; font:800 34px 'Space Grotesk',sans-serif; }
.premium-price span, .premium-price-large span { font-size:13px; color:var(--muted); font-family:'DM Sans',sans-serif; font-weight:500; }
.premium-mini-list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:11px; }
.premium-mini-list li { display:flex; gap:9px; }
.premium-mini-list li > span { color:var(--accent); font-weight:900; }
.premium-mini-list strong, .premium-mini-list small { display:block; }
.premium-mini-list strong { font-size:11px; }
.premium-mini-list small { margin-top:2px; color:var(--muted); font-size:9px; }
.premium-button { width:100%; }
.danger-card { border-color:rgba(255,90,90,.15); }
.danger-label { color:#ff7373; }
.danger-card p { font-size:11px; line-height:1.6; }
.danger-button { background:transparent; color:#ff7373 !important; border-color:rgba(255,90,90,.25); }

/* BUDGETS + GOALS */
.budget-summary-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.budget-summary-strip > div { padding:15px; border:1px solid rgba(255,255,255,.07); border-radius:15px; background:rgba(255,255,255,.025); }
.budget-summary-strip span { display:block; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.budget-summary-strip strong { display:block; margin-top:5px; font-size:18px; }
.planning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.budget-card-modern, .goal-card-modern { padding:22px; border:1px solid rgba(255,255,255,.075); border-radius:21px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); transition:.25s; }
.budget-card-modern:hover, .goal-card-modern:hover { transform:translateY(-3px); border-color:rgba(184,255,61,.2); }
.budget-card-modern.is-warning { border-color:rgba(255,210,90,.2); }
.budget-card-modern.is-over { border-color:rgba(255,90,90,.22); }
.budget-card-head, .goal-card-head, .budget-big-row, .goal-big-row, .budget-meta-row { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.budget-card-head h2, .goal-card-head h2 { margin:6px 0 0; font-size:22px; }
.budget-status-pill { padding:6px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.08em; }
.is-warning .budget-status-pill { color:#e8c66d; background:rgba(232,198,109,.08); }
.is-over .budget-status-pill { color:#ff7a7a; background:rgba(255,90,90,.08); }
.budget-big-row, .goal-big-row { margin:26px 0 15px; }
.budget-big-row span, .goal-big-row span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.budget-big-row strong, .goal-big-row strong { display:block; margin-top:4px; font:800 27px 'Space Grotesk',sans-serif; }
.budget-big-right, .goal-big-row > div:last-child { text-align:right; }
.modern-progress { height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.07); }
.modern-progress > div { height:100%; border-radius:inherit; background:var(--accent); box-shadow:0 0 18px rgba(184,255,61,.18); }
.budget-meta-row { margin-top:9px; color:var(--muted); font-size:10px; }
.budget-meta-row strong { color:var(--accent); }
.text-danger-soft { color:#ff7777 !important; }
.interactive-detail { margin-top:18px; border-top:1px solid rgba(255,255,255,.07); padding-top:14px; }
.interactive-detail summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; color:var(--text); font-size:11px; font-weight:800; }
.interactive-detail summary::-webkit-details-marker { display:none; }
.interactive-detail summary span { color:var(--muted); font-weight:500; }
.detail-panel { margin-top:12px; padding:13px; border-radius:13px; background:rgba(184,255,61,.045); color:#c6cbc3; white-space:pre-line; font-size:11px; line-height:1.6; }
.card-actions { display:flex; justify-content:flex-end; gap:16px; margin-top:18px; }
.card-actions a { color:var(--muted); text-decoration:none; font-size:10px; font-weight:800; }
.card-actions a:hover { color:var(--accent); }
.card-actions .danger-link:hover { color:#ff7777; }
.goal-percent { color:var(--accent); font:800 24px 'Space Grotesk',sans-serif; }
.goal-progress-modern { margin-top:20px; }
.goal-intelligence-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:17px; }
.goal-intelligence-grid > div { padding:12px; border-radius:12px; background:rgba(255,255,255,.03); }
.goal-intelligence-grid span { display:block; color:var(--muted); font-size:8px; }
.goal-intelligence-grid strong { display:block; margin-top:5px; font-size:12px; }
.goal-complete-banner, .goal-risk-banner { margin-top:17px; padding:13px; border-radius:13px; font-size:11px; }
.goal-complete-banner { color:var(--accent); background:var(--accent-soft); border:1px solid rgba(184,255,61,.16); }
.goal-risk-banner { color:#ff8a8a; background:rgba(255,90,90,.06); }
.empty-modern { padding:70px 25px; text-align:center; border:1px dashed rgba(255,255,255,.1); border-radius:22px; }
.empty-modern > span { color:var(--accent); font-size:32px; }
.empty-modern h2 { margin:12px 0 7px; font-size:22px; }
.empty-modern p { max-width:380px; margin:0 auto 20px; font-size:11px; line-height:1.6; }

/* GAMIFICATION + ALERTS */
.gamification-card { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; margin-bottom:16px; padding:18px 20px; border:1px solid rgba(184,255,61,.13); border-radius:20px; background:linear-gradient(105deg,rgba(184,255,61,.055),rgba(255,255,255,.02)); }
.gamification-left { display:flex; align-items:center; gap:12px; }
.gamification-badge { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--accent); color:#080a0b; font-weight:900; font-size:10px; }
.gamification-card h2 { margin:4px 0 2px; font-size:17px; }
.gamification-card p { margin:0; font-size:10px; }
.xp-track { height:7px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.07); min-width:100px; }
.xp-track > div { height:100%; border-radius:inherit; background:var(--accent); }
.gamification-badges { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:260px; }
.gamification-badges span { padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.04); color:#c8ccc7; font-size:8px; }
.alert-center-card { margin-bottom:16px; padding:20px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(255,255,255,.02); }
.alert-center-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.alert-center-item { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:11px; border-radius:12px; background:rgba(255,255,255,.03); }
.alert-center-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:var(--accent-soft); color:var(--accent); font-weight:900; }
.alert-center-item strong { display:block; font-size:10px; }
.alert-center-item p { margin:3px 0 0; font-size:9px; line-height:1.4; }
.alert-center-item a { color:var(--accent); font-size:9px; text-decoration:none; }
.alert-danger .alert-center-icon { color:#ff7b7b; background:rgba(255,90,90,.08); }
.alert-warning .alert-center-icon { color:#e9c66f; background:rgba(233,198,111,.08); }

/* PREMIUM */
.premium-page { max-width:1100px; }
.premium-hero { padding:38px; border:1px solid rgba(184,255,61,.16); border-radius:25px; background:radial-gradient(circle at 90% 0,rgba(184,255,61,.10),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); }
.premium-hero h1 { max-width:750px; }
.premium-price-large { margin-top:25px; font:800 44px 'Space Grotesk',sans-serif; color:var(--accent); }
.premium-note { margin-top:8px; color:var(--muted); font-size:10px; }
.premium-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.premium-feature-card { padding:20px; border:1px solid rgba(255,255,255,.07); border-radius:18px; background:rgba(255,255,255,.025); }
.premium-feature-card > span { color:var(--accent); }
.premium-feature-card h3 { margin:13px 0 7px; font-size:15px; }
.premium-feature-card p { margin:0; font-size:10px; line-height:1.55; }
.premium-cta { margin-top:14px; padding:22px; display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid rgba(184,255,61,.12); border-radius:18px; background:var(--accent-soft); }
.premium-cta h2 { margin:6px 0; font-size:22px; }
.premium-cta p { margin:0; font-size:10px; }
.premium-cta .premium-button { width:auto; min-width:170px; }

/* FORMS / IMPORT */
.form-page-header { margin-bottom:24px; }
.modern-form-card { max-width:720px; padding:24px; display:flex; flex-direction:column; gap:12px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background:rgba(255,255,255,.025); }
.field-hint { float:right; color:var(--muted); font-size:9px; font-weight:500; }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:6px; }
.import-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.import-drop-card, .import-how-card { padding:28px; border:1px solid rgba(255,255,255,.07); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); }
.upload-icon-modern { width:50px; height:50px; display:grid; place-items:center; border-radius:15px; background:var(--accent-soft); color:var(--accent); font-size:22px; }
.import-drop-card h2, .import-how-card h2 { margin:16px 0 7px; font-size:23px; }
.import-drop-card p { font-size:11px; }
.file-drop-zone { display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; min-height:150px; margin:20px 0 13px; border:1px dashed rgba(184,255,61,.3); border-radius:16px; background:rgba(184,255,61,.025); cursor:pointer; text-align:center; }
.file-drop-zone strong { color:var(--text); font-size:12px; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-drop-zone span { color:var(--muted); font-size:9px; }
#importPage input[type=file], .import-drop-card input[type=file] { display:none; }
.import-drop-card .hero-button { width:100%; }
.import-step { display:flex; gap:12px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.import-step:last-child { border-bottom:0; }
.import-step b { color:var(--accent); font-size:10px; }
.import-step strong { display:block; font-size:11px; }
.import-step p { margin:4px 0 0; font-size:10px; line-height:1.5; }
.import-errors { margin-top:14px; padding:16px; border-radius:15px; border:1px solid rgba(255,90,90,.15); background:rgba(255,90,90,.04); }
.import-errors h3 { font-size:13px; }
.import-errors p { margin:5px 0; font-size:9px; }

/* CELEBRATION */
.celebration-overlay { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); animation:celebrateIn .25s ease; }
.celebration-card { width:min(100%,430px); padding:35px; text-align:center; border:1px solid rgba(184,255,61,.25); border-radius:25px; background:linear-gradient(145deg,#161a1e,#0b0d0f); box-shadow:0 30px 100px rgba(0,0,0,.5); }
.celebration-spark { width:64px; height:64px; margin:0 auto 17px; display:grid; place-items:center; border-radius:20px; background:var(--accent); color:#080a0b; font-size:27px; box-shadow:0 0 50px rgba(184,255,61,.2); }
.celebration-card h2 { margin:8px 0; font-size:29px; }
.celebration-card p { font-size:11px; line-height:1.6; margin-bottom:22px; }
.celebration-hide { opacity:0; pointer-events:none; transition:.4s; }
@keyframes celebrateIn { from {opacity:0; transform:scale(.97)} to {opacity:1; transform:scale(1)} }

/* RESPONSIVE LAUNCH */
@media (max-width: 900px) {
    .settings-grid, .planning-grid, .import-grid { grid-template-columns:1fr; }
    .settings-card-wide { grid-column:auto; }
    .premium-feature-grid { grid-template-columns:1fr 1fr; }
    .gamification-card { grid-template-columns:1fr; }
    .gamification-badges { justify-content:flex-start; max-width:none; }
    .alert-center-list { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
    .sidebar { display:none; }
    .mobile-nav { position:fixed; left:10px; right:10px; bottom:10px; z-index:1200; display:grid; grid-template-columns:repeat(4,1fr); padding:7px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(10,12,14,.92); backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.35); }
    .mobile-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 3px; color:var(--muted); text-decoration:none; border-radius:12px; }
    .mobile-nav a:hover { color:var(--accent); background:var(--accent-soft); }
    .mobile-nav span { font-size:15px; }
    .mobile-nav small { font-size:7px; font-weight:800; }
    .main-content { margin-left:0; width:100%; padding-bottom:78px; }
    .page-content { padding:24px 15px; }
    .topbar { display:none; }
    .settings-hero, .planning-hero { align-items:flex-start; flex-direction:column; }
    .settings-hero h1, .planning-hero h1, .premium-hero h1, .form-page-header h1 { font-size:36px; }
    .settings-form-grid, .budget-summary-strip, .goal-intelligence-grid, .premium-feature-grid { grid-template-columns:1fr; }
    .budget-summary-strip > div { padding:12px; }
    .budget-big-row strong, .goal-big-row strong { font-size:23px; }
    .auth-card-modern { padding:27px 21px; border-radius:21px; }
    .auth-screen { padding:15px; }
    .premium-hero, .import-drop-card, .import-how-card { padding:22px; }
    .premium-cta { align-items:flex-start; flex-direction:column; }
    .premium-cta .premium-button { width:100%; }
    .celebration-card { padding:28px 22px; }
}


/* =====================================================
   LAUNCH PASS — transactions, AI, tutorial, support
   ===================================================== */
.transactions-page,.insights-page{max-width:1250px;margin:0 auto;padding:12px 0 60px}.transactions-hero,.insights-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.transactions-hero h1,.insights-hero h1{font-size:clamp(36px,5vw,60px);line-height:.95;margin:8px 0}.transactions-hero p,.insights-hero p{max-width:680px;color:var(--muted)}.hero-actions{position:relative;display:flex;gap:10px;align-items:center}.secondary-button{border:1px solid rgba(255,255,255,.12);background:#111519;color:#fff;border-radius:12px;padding:13px 16px;font-weight:800}.export-menu{display:none;position:absolute;right:0;top:54px;z-index:20;background:#111519;border:1px solid rgba(255,255,255,.12);border-radius:14px;min-width:180px;box-shadow:0 18px 50px rgba(0,0,0,.4)}.export-menu.open{display:block}.export-menu a{display:block;color:#fff;text-decoration:none;padding:12px 14px;font-size:12px}.export-menu a:hover{background:var(--accent-soft);color:var(--accent)}.transaction-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.transaction-summary-grid>div{padding:20px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07)}.transaction-summary-grid span{display:block;font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:900}.transaction-summary-grid strong{display:block;font-size:28px;margin:8px 0}.transaction-summary-grid small{color:var(--muted);font-size:10px}.money-positive{color:#b8ff3d!important}.money-negative{color:#ff8f8f!important}.transaction-toolbar-card,.transaction-list-card{border:1px solid rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border-radius:20px;padding:18px;margin-bottom:16px}.transaction-filter-form{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px}.transaction-filter-form input,.transaction-filter-form select{background:#0b0e11;border:1px solid rgba(255,255,255,.09);color:#fff;border-radius:12px;padding:12px 14px;min-width:0}.transaction-list-head,.transaction-row-modern{display:grid;grid-template-columns:1.1fr 2fr .9fr 1.2fr 1.1fr;gap:15px;align-items:center}.transaction-list-head{padding:4px 12px 12px;color:var(--muted);font-size:9px;letter-spacing:.12em;font-weight:900}.transaction-row-modern{padding:16px 12px;border-top:1px solid rgba(255,255,255,.06)}.transaction-date-modern,.transaction-description-modern{font-size:12px}.transaction-date-modern small,.transaction-description-modern span{display:block;color:var(--muted);font-size:10px;margin-top:5px}.transaction-description-modern strong{font-size:13px}.transaction-type-pill{display:inline-flex;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900}.transaction-type-pill.income{background:rgba(184,255,61,.1);color:var(--accent)}.transaction-type-pill.expense{background:rgba(255,100,100,.08);color:#ff9b9b}.transaction-amount-modern{font-size:15px}.transaction-row-modern .card-actions{display:flex;gap:10px;justify-content:flex-end}.premium-compare,.premium-usage-card,.ai-result-card{padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));margin-bottom:18px}.premium-compare-head,.ai-result-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.premium-compare h2,.ai-result-card h2{margin:5px 0;font-size:24px}.premium-table-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12px}.premium-table-header{color:var(--muted);font-size:9px;letter-spacing:.1em;text-transform:uppercase}.premium-table-row strong{text-align:center}.premium-usage-card{display:grid;grid-template-columns:1fr 2fr;gap:20px;align-items:center}.premium-usage-card h2{font-size:18px;margin:6px 0}.ai-usage-strip{display:flex;align-items:baseline;gap:10px;padding:14px 18px;border:1px solid rgba(184,255,61,.15);background:var(--accent-soft);border-radius:16px;margin-bottom:16px}.ai-usage-strip span,.ai-usage-strip small{color:var(--muted);font-size:10px}.ai-usage-strip strong{color:var(--accent);font-size:18px}.ai-result-body{line-height:1.8;color:#e8eaec;font-size:13px}.ai-live-pill{color:var(--accent);border:1px solid rgba(184,255,61,.2);padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900}.locked-insight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.locked-insight-card{padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.07);background:#0d1013;min-height:170px}.locked-insight-card.unlocked{border-color:rgba(184,255,61,.18)}.locked-icon{font-size:22px}.locked-insight-card h3{font-size:17px;margin:14px 0 7px}.locked-insight-card p{font-size:11px;color:var(--muted);line-height:1.6}.locked-insight-card a{color:var(--accent);text-decoration:none;font-size:10px;font-weight:900}.unlocked-label{font-size:8px;color:var(--accent);font-weight:900;letter-spacing:.1em}.tutorial-trigger{border:0;background:none;color:var(--muted);font-size:10px;margin-left:18px;cursor:pointer}.tutorial-trigger:hover{color:var(--accent)}.tutorial-modal{display:none;position:fixed;inset:0;z-index:1000}.tutorial-modal.show{display:block}.tutorial-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}.tutorial-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 30px));background:#0b0e11;border:1px solid rgba(184,255,61,.18);border-radius:26px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.6)}.tutorial-close{position:absolute;right:15px;top:12px;z-index:4;border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:50%;width:34px;height:34px;font-size:22px}.tutorial-screen{height:360px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(184,255,61,.12),transparent 45%),#090c0f}.tutorial-logo{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--accent);color:#090c0f;font-weight:1000;font-size:24px;box-shadow:0 0 60px rgba(184,255,61,.25);animation:tutorialFloat 2.6s ease-in-out infinite}.tutorial-orbit{position:absolute;width:260px;height:260px;border:1px solid rgba(184,255,61,.12);border-radius:50%;animation:tutorialSpin 12s linear infinite}.tutorial-scene{position:absolute;opacity:0;transform:translateY(16px) scale(.98);transition:.35s ease;max-width:520px;padding:40px}.tutorial-scene.active{opacity:1;transform:none}.tutorial-scene span{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.2em}.tutorial-scene h2{font-size:34px;margin:10px 0}.tutorial-scene p{color:var(--muted);font-size:13px}.tutorial-controls{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.tutorial-dots{display:flex;gap:7px}.tutorial-dots i{width:7px;height:7px;border-radius:50%;background:#333}.tutorial-dots i.active{background:var(--accent);width:22px;border-radius:99px}@keyframes tutorialFloat{50%{transform:translateX(-50%) translateY(-8px)}}@keyframes tutorialSpin{to{transform:rotate(360deg)}}
@media(max-width:850px){.transaction-summary-grid{grid-template-columns:1fr 1fr}.transaction-filter-form{grid-template-columns:1fr 1fr}.transaction-list-head{display:none}.transaction-row-modern{grid-template-columns:1fr auto;gap:10px}.transaction-row-modern>div:nth-child(2){grid-column:1/2}.transaction-row-modern>div:nth-child(3){grid-column:2/3;grid-row:1/2}.transaction-row-modern>strong{grid-column:1/2}.transaction-row-modern>.card-actions{grid-column:2/3;grid-row:2/3}.premium-usage-card{grid-template-columns:1fr}.locked-insight-grid{grid-template-columns:1fr}.transactions-hero,.insights-hero{align-items:flex-start;flex-direction:column}.tutorial-trigger{display:none}}
@media(max-width:560px){.transaction-summary-grid{grid-template-columns:1fr 1fr}.transaction-filter-form{grid-template-columns:1fr}.hero-actions{width:100%}.hero-actions .hero-button,.hero-actions .secondary-button{flex:1}.premium-table-row{grid-template-columns:1.6fr .7fr .8fr;font-size:10px}.tutorial-screen{height:330px}.tutorial-scene h2{font-size:27px}}
.tutorial-video-window{padding:22px}.tutorial-video-heading{padding:4px 34px 14px 4px}.tutorial-video-heading h2{margin:5px 0;font-size:26px}.tutorial-video-heading p{margin:0;color:var(--muted);font-size:11px}.tutorial-video{width:100%;display:block;border-radius:18px;background:#050709;border:1px solid rgba(255,255,255,.07)}.tutorial-video-window .tutorial-controls{padding:14px 0 0;color:var(--muted);font-size:10px}.tutorial-video-window .tutorial-controls span{letter-spacing:.05em}@media(max-width:600px){.tutorial-video-window{padding:16px}.tutorial-video-window .tutorial-controls span{display:none}.tutorial-video-window .tutorial-controls{justify-content:flex-end}}

/* ===== Sigora Invest ===== */
.invest-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:18px}.invest-hero h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1;margin:5px 0 12px}.invest-hero p{max-width:720px;color:#69706d}.invest-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.invest-actions form{margin:0}.invest-disclaimer{padding:14px 16px;border:1px solid #e2e5df;border-radius:14px;background:#f8faf7;color:#5d625e;margin-bottom:20px}.profile-empty,.profile-strip,.investment-form-card,.ai-invest-card{border:1px solid #e3e6e1;background:#fff;border-radius:20px;padding:24px;box-shadow:0 12px 34px rgba(25,39,31,.05)}.profile-empty{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:20px 0}.profile-empty h2{margin:4px 0}.profile-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.profile-strip div{display:flex;flex-direction:column;gap:3px}.profile-strip span,.invest-stat span{font-size:.78rem;color:#7b817d;text-transform:uppercase;letter-spacing:.06em}.profile-strip strong{font-size:1.25rem}.invest-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 30px}.invest-stat{padding:20px;border:1px solid #e3e6e1;border-radius:18px;background:#fff}.invest-stat strong{display:block;font-size:1.4rem;margin-top:6px}.positive{color:#16794a!important}.negative{color:#b63838!important}.investment-section{margin:34px 0}.section-heading{margin-bottom:16px}.section-heading h2{margin:4px 0}.section-heading p,.muted-copy{color:#777d79}.warning-stack{display:grid;gap:10px}.warning-card{padding:15px 16px;border-radius:14px;background:#fff8e9;border:1px solid #f0dfb5;color:#6e5720}.allocation-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.allocation-card{padding:16px;border:1px solid #e4e6e3;border-radius:15px;background:#fff}.allocation-top{display:flex;justify-content:space-between;margin-bottom:10px}.allocation-bar{height:7px;background:#edf0ed;border-radius:99px;overflow:hidden}.allocation-bar i{display:block;height:100%;background:currentColor;border-radius:99px}.investment-form-card{max-width:900px}.investment-form-card.compact{max-width:none;margin-bottom:16px}.form-grid,.holding-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}.holding-form-grid{grid-template-columns:repeat(4,1fr)}.investment-form-card label{display:flex;flex-direction:column;gap:7px;font-weight:600}.investment-form-card input,.investment-form-card select,.watchlist-form input,.watchlist-form select,.price-inline input{width:100%;border:1px solid #dfe3df;border-radius:11px;padding:11px 12px;background:#fff}.holdings-table-wrap{overflow:auto;border:1px solid #e4e6e3;border-radius:16px}.holdings-table{width:100%;border-collapse:collapse;background:#fff}.holdings-table th,.holdings-table td{padding:13px 12px;border-bottom:1px solid #edf0ed;text-align:left;white-space:nowrap}.holdings-table small{display:block;color:#858b87;margin-top:2px}.price-inline{display:flex;gap:6px}.price-inline input{width:96px;padding:7px}.price-inline button,.icon-danger{border:0;border-radius:9px;padding:7px 10px;cursor:pointer}.icon-danger{color:#b63838;background:#fff0f0;font-size:1.1rem}.empty-investments{padding:24px;text-align:center;color:#7f8581;border:1px dashed #dfe2df;border-radius:16px}.explorer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.explorer-card{border:1px solid #e4e6e3;border-radius:17px;padding:18px;background:#fff}.explorer-title{display:flex;justify-content:space-between;gap:10px;align-items:start}.explorer-title h3{font-size:1.05rem}.explorer-title span{font-size:.72rem;padding:4px 8px;border-radius:999px;background:#f0f3f0}.explorer-card p{color:#686e6a;margin:10px 0}.explorer-card small{color:#878d89}.watchlist-form{display:grid;grid-template-columns:1.2fr .7fr 1fr 1.6fr auto;gap:10px;margin-bottom:14px}.watchlist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.watch-card{display:flex;justify-content:space-between;gap:12px;padding:15px;border:1px solid #e4e6e3;border-radius:14px;background:#fff}.watch-card small{display:block;color:#838985}.watch-card p{margin:6px 0 0;color:#686e6a}.ai-invest-card{display:flex;gap:18px}.ai-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#111;color:#fff;flex:0 0 auto}.ai-invest-copy{line-height:1.7}.secondary-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #d8ddd8;background:#fff;color:#222;border-radius:12px;padding:10px 15px;font-weight:600}.hero-button{text-decoration:none}
@media(max-width:900px){.invest-hero,.profile-empty{flex-direction:column}.profile-strip,.invest-stat-grid,.allocation-grid,.explorer-grid,.watchlist-grid{grid-template-columns:1fr 1fr}.holding-form-grid,.watchlist-form{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}}
@media(max-width:620px){.profile-strip,.invest-stat-grid,.allocation-grid,.explorer-grid,.watchlist-grid,.holding-form-grid,.watchlist-form{grid-template-columns:1fr}.invest-hero h1{font-size:2.2rem}}
.projection-result{margin-top:16px;padding:18px;border-radius:14px;background:#f7f9f7;display:flex;flex-direction:column;gap:4px}.projection-result strong{font-size:1.8rem}.projection-result span{font-weight:600}.projection-result small{color:#777d79;max-width:760px}
/* Invest readability + market research upgrade */
.investment-section .section-heading h2,.investment-form-card label span,.explorer-card h3,.explorer-card strong,.explorer-card p,.explorer-card small,.investment-form-card,.investment-form-card input,.investment-form-card select,.projection-result,.watch-card,.watch-card strong,.watch-card p{color:#171b18}
.investment-form-card input::placeholder,.watchlist-form input::placeholder{color:#777f79;opacity:1}
.investment-form-card label span{font-weight:700}.secondary-button{color:#171b18!important}.projection-result strong{color:#171b18}.projection-result span{color:#333a35}.projection-result small{color:#69706b}
.watchlist-form.watchlist-search{grid-template-columns:2fr 2fr auto}.market-watch-card{align-items:center}.watch-main{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:1;color:inherit;text-decoration:none}.watch-price{display:flex;gap:12px;align-items:baseline;margin-top:8px}.watch-open{font-weight:700;color:#28784a;white-space:nowrap}
.market-price-card{display:flex;justify-content:space-between;gap:24px;padding:24px;border:1px solid #e3e6e1;border-radius:20px;background:#fff}.market-price-card>div:first-child{display:flex;flex-direction:column;gap:5px}.market-price-card strong{font-size:2.4rem}.market-facts{display:flex;gap:28px;align-items:center}.market-facts span{display:flex;flex-direction:column;color:#777}.market-facts strong{font-size:1rem;color:#222;margin-top:5px}.period-tabs{display:flex;gap:8px;margin:16px 0}.period-tabs a{padding:8px 13px;border-radius:999px;border:1px solid #dfe3df;text-decoration:none;color:#555}.period-tabs a.active{background:#151915;color:#fff;border-color:#151915}.market-chart-card{background:#fff;border:1px solid #e3e6e1;border-radius:20px;padding:20px}.layman-analysis{font-size:1.08rem;line-height:1.75;padding:20px;background:#f7faf7;border-radius:16px;border:1px solid #e3e8e3;color:#303732}
@media(max-width:800px){.watchlist-form.watchlist-search{grid-template-columns:1fr}.market-price-card{flex-direction:column}.market-facts{align-items:flex-start;flex-wrap:wrap}.watch-main{align-items:flex-start;flex-direction:column}.watch-open{margin-top:4px}}

/* =========================================================
   SIGORA INVEST — ACCESSIBLE CONTRAST PASS
   Keeps the existing Sigora dark shell while ensuring every
   light investment card has dark text and every dark section
   heading has readable light text.
   ========================================================= */

/* Dark-page headings / supporting copy */
.invest-hero h1,
.investment-section .section-heading h2 {
    color: var(--text) !important;
}
.invest-hero p,
.investment-section .section-heading p,
.muted-copy {
    color: #aeb5b0 !important;
}
.investment-section .section-heading .eyebrow,
.invest-hero .eyebrow {
    color: var(--accent) !important;
}

/* Light information cards: force accessible dark foregrounds */
.profile-empty,
.profile-strip,
.invest-stat,
.allocation-card,
.investment-form-card,
.holdings-table,
.explorer-card,
.watch-card,
.market-price-card,
.market-chart-card,
.layman-analysis,
.ai-invest-card,
.projection-result {
    color: #171b18 !important;
}

/* Profile strip + summary stats */
.profile-empty h2,
.profile-empty p,
.profile-strip strong,
.invest-stat strong {
    color: #151916 !important;
}
.profile-strip span,
.invest-stat span {
    color: #666e68 !important;
}

/* Educational allocation cards */
.allocation-top strong,
.allocation-top span {
    color: #1b201c !important;
}
.allocation-bar {
    background: #e8ece8 !important;
}
.allocation-bar i {
    background: #65b944 !important;
    color: #65b944 !important;
}

/* Portfolio form + profile questionnaire */
.investment-form-card label,
.investment-form-card label span {
    color: #202520 !important;
}
.investment-form-card input,
.investment-form-card select,
.watchlist-form input,
.watchlist-form select,
.price-inline input {
    color: #161a17 !important;
    background: #ffffff !important;
    border-color: #cfd6d0 !important;
    caret-color: #161a17 !important;
}
.investment-form-card input::placeholder,
.watchlist-form input::placeholder,
.price-inline input::placeholder {
    color: #747c76 !important;
    opacity: 1 !important;
}
.investment-form-card select option {
    color: #161a17 !important;
    background: #ffffff !important;
}

/* Holdings table */
.holdings-table th {
    color: #525a54 !important;
    background: #f5f7f5 !important;
}
.holdings-table td,
.holdings-table td strong {
    color: #1b201c !important;
}
.holdings-table small {
    color: #6d756f !important;
}
.price-inline button {
    color: #101410 !important;
    background: #e9eee9 !important;
}

/* Explorer cards */
.explorer-card h3,
.explorer-card strong {
    color: #171b18 !important;
}
.explorer-card p {
    color: #4d554f !important;
}
.explorer-card small {
    color: #626a64 !important;
}
.explorer-title span {
    color: #454d47 !important;
    background: #edf1ed !important;
}

/* Watchlist cards */
.watch-card strong,
.watch-card b,
.watch-card p,
.watch-price b {
    color: #171b18 !important;
}
.watch-card small {
    color: #68706a !important;
}
.watch-open {
    color: #176f42 !important;
}
.watch-price .positive { color: #147847 !important; }
.watch-price .negative { color: #b63838 !important; }

/* Projection output */
.projection-result strong {
    color: #151916 !important;
}
.projection-result span {
    color: #333a35 !important;
}
.projection-result small {
    color: #5f6861 !important;
}

/* Market detail — this fixes the invisible USD/INR price and labels */
.market-price-card > div:first-child > span,
.market-facts > span {
    color: #69716b !important;
}
.market-price-card > div:first-child > strong,
.market-facts strong {
    color: #171b18 !important;
}
.market-price-card small.positive { color: #147847 !important; }
.market-price-card small.negative { color: #b63838 !important; }
.market-chart-card canvas {
    color: #171b18 !important;
}

/* Plain-English / AI explanation cards */
.layman-analysis,
.ai-invest-copy,
.ai-invest-card h1,
.ai-invest-card h2,
.ai-invest-card h3,
.ai-invest-card strong {
    color: #242a25 !important;
}
.invest-disclaimer,
.invest-disclaimer strong {
    color: #505851 !important;
}

/* Buttons on light cards */
.investment-form-card .secondary-button,
.investment-section .secondary-button {
    color: #171b18 !important;
    background: #ffffff !important;
    border-color: #cdd4ce !important;
}
.investment-form-card .secondary-button:hover,
.investment-section .secondary-button:hover {
    background: #f1f5f1 !important;
}

/* Empty states live on the dark page, so use light copy there. */
.empty-investments {
    color: #aeb5b0 !important;
    border-color: rgba(255,255,255,.16) !important;
}

/* On narrow screens the bottom nav is fixed; keep content from hiding beneath it. */
@media (max-width: 900px) {
    .page-content { padding-bottom: 120px; }
}


/* ============================= */
/* LEGAL / SUPPORT / SITE FOOTER */
/* ============================= */
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 28px 26px;color:#7d837f;font-size:.82rem;border-top:1px solid rgba(255,255,255,.07)}
.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}.site-footer a{color:#8b918d;text-decoration:none}.site-footer a:hover{color:var(--accent)}
.legal-page{max-width:920px;margin:0 auto;padding:24px 0 70px;color:#d7dbd8}.legal-page h1{font-size:clamp(2.5rem,6vw,5rem);line-height:.96;margin:8px 0 8px;color:#f4f6f4}.legal-page h2{font-size:1.25rem;margin:34px 0 10px;color:#f2f4f2}.legal-page p{color:#9aa09c;line-height:1.8;font-size:1rem}.legal-page strong{color:#e8ebe8}.legal-page a{color:var(--accent)}.legal-updated{font-size:.85rem!important;text-transform:uppercase;letter-spacing:.08em}.support-contact-card{margin:26px 0;padding:24px;border:1px solid rgba(184,255,61,.22);border-radius:18px;background:rgba(184,255,61,.04)}.support-contact-card>span{display:block;font-size:.72rem;letter-spacing:.14em;color:var(--accent);margin-bottom:8px}.support-contact-card>a{font-size:1.3rem;font-weight:700}.support-contact-card p{margin:14px 0 0}
@media(max-width:700px){.site-footer{padding:18px 18px 110px}.legal-page{padding:10px 0 50px}.site-footer nav{gap:10px 14px}}
.auth-success { padding:12px 14px; margin-bottom:18px; border-radius:12px; font-size:12px; color:#dfffb3; background:rgba(184,255,61,.08); border:1px solid rgba(184,255,61,.2); line-height:1.55; }
.auth-inline-link { margin:-1px 0 4px; text-align:right; }
.auth-inline-link a { color:var(--accent); font-size:11px; font-weight:800; text-decoration:none; }
.auth-submit-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }