:root { --ink: #07162f; --ink-soft: #122849; --paper: #f4f8fb; --white: #fff; --muted: #71809a; --line: #dce6f0; --cyan: #2ed8d0; --cyan-dark: #0d9e9c; --lime: #c9ed6a; --violet: #7258ef; --shadow: 0 18px 50px rgba(7,22,47,.09); }
* { box-sizing: border-box; } body { background: var(--paper); color: var(--ink); font-family: Manrope, sans-serif; font-size: 14px; line-height: 1.6; margin: 0; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } h1, h2, h3, .brand-name, .balance-amount, .wallet-card > strong { font-family: 'Space Grotesk', sans-serif; } .btn { border-radius: 10px; font-size: 12px; font-weight: 800; padding: 11px 16px; } .btn-primary { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }.btn-primary:hover { background: #6de9df; border-color: #6de9df; color: var(--ink); }.btn-outline-dark { border-color: rgba(7,22,47,.2); color: var(--ink); }
.brand-lockup { align-items: center; display: inline-flex; gap: 10px; }.brand-logo-image { background: #fff; border-radius: 8px; display: block; height: 38px; object-fit: contain; padding: 2px 7px; width: 164px; }.coin-token { align-items: center; display: inline-flex; flex: 0 0 auto; height: 1.05em; justify-content: center; margin: 0 .08em; vertical-align: -.12em; width: 1.05em; }.coin-token img { display: block; height: 100%; object-fit: contain; width: 100%; }.balance-amount .coin-token, .wallet-card > strong .coin-token, .wallet-balance strong .coin-token { height: .34em; vertical-align: .08em; width: .34em; }.brand-mark { align-items: center; background: var(--ink); border-radius: 12px; color: var(--cyan); display: inline-flex; font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; height: 37px; justify-content: center; letter-spacing: -.1em; position: relative; width: 37px; }.brand-mark::after { border: 1px solid var(--cyan); border-radius: 7px; content: ''; height: 26px; left: 5px; position: absolute; top: 5px; width: 26px; }.brand-mark span { color: var(--lime); }.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.eyebrow { color: var(--cyan-dark); display: inline-block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }.eyebrow::before { background: currentColor; content: ''; display: inline-block; height: 1px; margin: 0 9px 3px 0; width: 25px; }

/* Authentication */
.auth-page { background: var(--ink); min-height: 100vh; overflow: hidden; }.auth-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 32px 16px; position: relative; }.auth-orbit { border: 1px solid rgba(46,216,208,.3); border-radius: 50%; height: 650px; position: absolute; right: -220px; top: -180px; width: 650px; }.auth-orbit-two { border-color: rgba(117,89,242,.4); height: 920px; right: -370px; top: -310px; width: 920px; }.auth-card { background: rgba(255,255,255,.97); border-radius: 25px; box-shadow: 0 35px 90px rgba(0,0,0,.28); max-width: 470px; padding: 42px; position: relative; width: 100%; z-index: 1; }.auth-kicker { color: var(--cyan-dark); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .13em; margin-top: 55px; text-transform: uppercase; }.auth-card h1 { font-size: 39px; letter-spacing: -.075em; line-height: 1.02; margin: 14px 0 16px; }.auth-copy { color: var(--muted); font-size: 13px; margin-bottom: 27px; }.social-signin { align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); display: flex; font-size: 12px; font-weight: 800; gap: 10px; justify-content: center; padding: 12px; width: 100%; }.google-g { color: #4285f4; font-size: 17px; font-weight: 800; }.auth-divider { align-items: center; color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; gap: 12px; margin: 22px 0; text-transform: uppercase; }.auth-divider::before, .auth-divider::after { background: var(--line); content: ''; flex: 1; height: 1px; }.auth-form label { display: block; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; margin: 13px 0 6px; text-transform: uppercase; }.auth-form input { border: 1px solid var(--line); border-radius: 9px; font-size: 13px; outline: none; padding: 11px 12px; width: 100%; }.auth-form input:focus { border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(46,216,208,.14); }.auth-form .btn { margin-top: 20px; }.auth-form .btn span { float: right; font-size: 17px; line-height: 12px; }.auth-status { background: #e8f5f6; border-radius: 8px; color: #1b686b; display: none; font-size: 11px; margin: 16px 0 0; padding: 10px; }.auth-status.show { display: block; }.auth-status.error { background: #fff0ef; color: #9e4944; }.auth-footnote { color: var(--muted); font-size: 11px; margin: 21px 0 5px; text-align: center; }.auth-footnote button { background: transparent; border: 0; color: var(--cyan-dark); font-weight: 800; padding: 0; }.auth-legal { color: #a0acbc; font-size: 9px; margin: 0; text-align: center; }

/* Dashboard shell */
.dashboard-page { background: var(--paper); }.dashboard-layout { display: flex; min-height: 100vh; }.dashboard-sidebar { background: var(--ink); color: var(--white); display: flex; flex: 0 0 248px; flex-direction: column; min-height: 100vh; padding: 25px 17px 20px; }.dashboard-sidebar .brand-name { color: var(--white); }.sidebar-top { align-items: center; display: flex; justify-content: space-between; padding: 0 10px 42px; }.sidebar-close { background: transparent; border: 0; color: var(--white); display: none; font-size: 25px; }.sidebar-label { color: rgba(255,255,255,.35); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; margin: 0 14px 12px; text-transform: uppercase; }.dashboard-nav { display: grid; gap: 6px; }.dashboard-nav-link { align-items: center; background: transparent; border: 0; border-radius: 11px; color: rgba(255,255,255,.58); display: flex; font-size: 12px; font-weight: 700; gap: 12px; padding: 13px 14px; text-align: left; width: 100%; }.dashboard-nav-link i { color: rgba(255,255,255,.45); font-size: 17px; width: 19px; }.dashboard-nav-link:hover, .dashboard-nav-link.active { background: rgba(46,216,208,.12); color: var(--white); }.dashboard-nav-link.active { box-shadow: inset 3px 0 0 var(--cyan); }.dashboard-nav-link.active i, .dashboard-nav-link:hover i { color: var(--cyan); }.nav-badge { background: var(--lime); border-radius: 5px; color: var(--ink); font-family: 'DM Mono', monospace; font-size: 8px; margin-left: auto; padding: 3px 5px; }.sidebar-bottom { margin-top: auto; }.sidebar-note { align-items: center; background: rgba(255,255,255,.06); border-radius: 12px; display: flex; gap: 10px; margin: 20px 5px; padding: 13px 10px; }.signal-dot { background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 4px rgba(201,237,106,.12); height: 7px; width: 7px; }.sidebar-note strong, .sidebar-note small { display: block; }.sidebar-note strong { font-size: 10px; }.sidebar-note small { color: rgba(255,255,255,.45); font-family: 'DM Mono', monospace; font-size: 8px; margin-top: 3px; }.sign-out { background: transparent; border: 0; color: rgba(255,255,255,.5); font-size: 11px; padding: 9px 14px; }.sign-out:hover { color: var(--cyan); }.dashboard-main { flex: 1; min-width: 0; }.dashboard-header { align-items: center; background: rgba(255,255,255,.82); border-bottom: 1px solid var(--line); display: flex; height: 83px; justify-content: space-between; padding: 0 5%; }.header-context span { display: block; }.header-label { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.header-context > span:last-child { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.04em; margin-top: 2px; }.header-actions { align-items: center; display: flex; gap: 21px; }.icon-button, .mobile-menu { background: transparent; border: 0; color: var(--ink); font-size: 19px; position: relative; }.notification-dot { background: var(--cyan); border: 2px solid var(--white); border-radius: 50%; height: 8px; position: absolute; right: -1px; top: 0; width: 8px; }.user-chip { align-items: center; display: flex; gap: 9px; }.user-chip strong, .user-chip small { display: block; }.user-chip strong { font-size: 11px; }.user-chip small { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 8px; margin-top: 2px; }.user-avatar { align-items: center; background: linear-gradient(135deg, var(--cyan), var(--violet)); border-radius: 50%; color: var(--ink); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; height: 33px; justify-content: center; width: 33px; }.mobile-menu { display: none; }
.dashboard-content { margin: 0 auto; max-width: 1220px; padding: 58px 5% 90px; }.dashboard-view { display: none; }.dashboard-view.active { display: block; }.welcome-row, .view-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 42px; }.welcome-row h1, .view-heading h1 { font-size: clamp(2.3rem, 4vw, 4.1rem); letter-spacing: -.08em; line-height: 1.01; margin: 14px 0 13px; }.welcome-row h1 span { color: var(--cyan-dark); }.welcome-row p, .view-heading p { color: var(--muted); font-size: 13px; max-width: 620px; margin: 0; }.welcome-orbit { align-items: center; background: radial-gradient(circle at 30% 20%, #b6fff6, #20bdb8 45%, #4457bd 100%); border-radius: 50%; box-shadow: 0 20px 40px rgba(46,216,208,.2); color: var(--white); display: flex; font-family: 'Space Grotesk', sans-serif; font-size: 35px; height: 127px; justify-content: center; margin-right: 8%; position: relative; width: 127px; }.welcome-orbit::after { border: 1px solid rgba(117,89,242,.6); border-radius: 50%; content: ''; height: 150px; position: absolute; transform: rotate(-25deg) scaleY(.35); width: 205px; }
.overview-grid { display: grid; gap: 18px; grid-template-columns: 1.1fr .9fr; margin-bottom: 73px; }.balance-card, .progress-card, .wallet-card { background: var(--ink); border-radius: 18px; color: var(--white); min-height: 235px; padding: 25px; }.balance-card { background: linear-gradient(135deg, #07162f, #173765); }.card-topline { color: rgba(255,255,255,.5); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; justify-content: space-between; letter-spacing: .1em; text-transform: uppercase; }.card-live { color: var(--lime); }.card-live i { font-size: 6px; margin-right: 4px; }.balance-amount { display: block; font-size: 58px; letter-spacing: -.09em; margin: 28px 0 2px; }.balance-amount > span:first-child, .wallet-card > strong > span:first-child, .wallet-balance strong span:first-child { color: var(--cyan); font-family: 'DM Mono', monospace; font-size: 15px; letter-spacing: 0; vertical-align: middle; }.balance-card p, .wallet-card p { color: rgba(255,255,255,.52); font-family: 'DM Mono', monospace; font-size: 9px; }.balance-card .btn { margin-top: 15px; }.progress-card { background: var(--white); border: 1px solid var(--line); color: var(--ink); }.progress-card .card-topline { color: var(--muted); }.progress-card .card-topline i { color: var(--cyan-dark); }.impact-number { margin: 39px 0 23px; }.impact-number strong { font-family: 'Space Grotesk', sans-serif; font-size: 57px; letter-spacing: -.09em; }.impact-number span { color: var(--muted); display: block; font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; }.mini-progress { background: var(--line); border-radius: 5px; height: 6px; }.mini-progress span { background: linear-gradient(90deg, var(--cyan-dark), var(--cyan)); border-radius: 5px; display: block; height: 100%; }.impact-footer { color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 9px; justify-content: space-between; margin-top: 13px; text-transform: uppercase; }.impact-footer strong { color: var(--ink); }
.dashboard-section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 26px; }.dashboard-section-heading h2, .purchase-heading h2 { font-size: 31px; letter-spacing: -.07em; margin: 11px 0 0; }.text-button, .filter-button { background: transparent; border: 0; color: var(--ink); font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; }.text-button i { color: var(--cyan-dark); margin-left: 6px; }.journey-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }.journey-grid article { background: var(--white); border: 1px solid var(--line); border-radius: 15px; min-height: 208px; padding: 22px; position: relative; }.journey-grid article > span { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; }.journey-grid i { color: var(--cyan-dark); display: block; font-size: 24px; margin: 24px 0 15px; }.journey-grid h3 { font-size: 17px; letter-spacing: -.05em; margin-bottom: 8px; }.journey-grid p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 0; }
.wallet-balance { background: var(--white); border: 1px solid var(--line); border-radius: 12px; min-width: 145px; padding: 15px 17px; }.wallet-balance small { color: var(--muted); display: block; font-family: 'DM Mono', monospace; font-size: 8px; text-transform: uppercase; }.wallet-balance strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 25px; letter-spacing: -.07em; margin-top: 5px; }.money-layout { display: grid; gap: 18px; grid-template-columns: .85fr 1.15fr; }.wallet-card > strong { display: block; font-size: 55px; letter-spacing: -.09em; margin: 32px 0 0; }.wallet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.purchase-panel { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }.purchase-heading { align-items: start; display: flex; justify-content: space-between; }.paypal-mark { color: #003087; font-size: 19px; font-weight: 800; }.paypal-mark span { color: #009cde; }.muted-copy { color: var(--muted); font-size: 12px; }.amount-grid { display: grid; gap: 9px; grid-template-columns: repeat(4, 1fr); margin-top: 24px; }.amount-grid button { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; padding: 12px 7px; }.amount-grid button:hover, .amount-grid button.selected { background: var(--ink); border-color: var(--ink); color: var(--cyan); }.amount-grid small { color: var(--muted); display: block; font-family: 'DM Mono', monospace; font-size: 8px; font-weight: 400; margin-top: 2px; }.amount-grid button:hover small, .amount-grid button.selected small { color: rgba(255,255,255,.6); }.payment-note { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; margin: 21px 0 0; }.payment-note i { color: var(--cyan-dark); margin-right: 4px; }
.project-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-project { background: var(--white); border: 1px solid var(--line); border-radius: 17px; overflow: hidden; }.project-visual { align-items: flex-start; display: flex; height: 145px; justify-content: space-between; padding: 18px; position: relative; }.project-visual::after { background: repeating-radial-gradient(ellipse at center, rgba(255,255,255,.25) 0 1px, transparent 2px 12px); content: ''; inset: 0; opacity: .45; position: absolute; transform: rotate(-11deg) scale(1.4); }.visual-water { background: linear-gradient(135deg,#12365d,#14b7ae); }.visual-education { background: linear-gradient(135deg,#252761,#7258ef); }.visual-food { background: linear-gradient(135deg,#254137,#66936f); }.visual-health { background: linear-gradient(135deg,#6e3c58,#e18b91); }.project-category { color: rgba(255,255,255,.8); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .09em; position: relative; z-index: 1; }.project-icon { align-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: var(--white); display: flex; font-size: 24px; height: 56px; justify-content: center; position: relative; width: 56px; z-index: 1; }.dashboard-project-body { padding: 21px; }.dashboard-project-body h3 { font-size: 21px; letter-spacing: -.06em; margin: 7px 0 3px; }.project-location { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; }.project-summary { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 15px 0; }.project-progress-head, .project-progress-foot { color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 8px; justify-content: space-between; text-transform: uppercase; }.project-progress-head strong { color: var(--ink); }.project-progress { background: var(--line); border-radius: 5px; height: 6px; margin: 8px 0 10px; }.project-progress span { background: linear-gradient(90deg,var(--cyan-dark),var(--cyan)); border-radius: 5px; display: block; height: 100%; }.project-progress-foot strong { color: var(--cyan-dark); }.project-card-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 19px; }.listen-button { background: transparent; border: 0; color: var(--cyan-dark); font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; }.listen-button i { font-size: 14px; margin-right: 4px; }.project-card-actions .btn { font-size: 10px; padding: 8px 11px; }.future-count { background: #e9f5d1; border-radius: 20px; color: #567221; font-family: 'DM Mono', monospace; font-size: 9px; padding: 9px 13px; text-transform: uppercase; }.future-count i { margin-right: 3px; }.empty-state { background: var(--white); border: 1px dashed var(--line); border-radius: 17px; display: none; margin-top: 22px; padding: 58px 20px; text-align: center; }.empty-state.show { display: block; }.empty-icon { align-items: center; background: #e5f7f6; border-radius: 50%; color: var(--cyan-dark); display: flex; font-size: 23px; height: 52px; justify-content: center; margin: 0 auto 15px; width: 52px; }.empty-state h2 { font-size: 25px; letter-spacing: -.06em; }.empty-state p { color: var(--muted); font-size: 12px; margin: 0 auto 20px; max-width: 400px; }.dashboard-toast { background: var(--ink); border-left: 3px solid var(--cyan); border-radius: 8px; bottom: 25px; box-shadow: var(--shadow); color: var(--white); display: none; font-size: 11px; max-width: 330px; padding: 13px 15px; position: fixed; right: 25px; z-index: 20; }.dashboard-toast.show { display: block; }
@media (max-width: 991px) { .dashboard-sidebar { flex-basis: 220px; }.dashboard-content { padding-left: 4%; padding-right: 4%; }.welcome-orbit { margin-right: 0; }.money-layout { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .dashboard-sidebar { box-shadow: 12px 0 35px rgba(0,0,0,.2); left: -270px; position: fixed; top: 0; transition: left .25s ease; width: 250px; z-index: 10; }.dashboard-sidebar.open { left: 0; }.sidebar-close, .mobile-menu { display: block; }.mobile-menu { margin-right: 14px; }.dashboard-header { justify-content: flex-start; padding: 0 20px; }.header-actions { margin-left: auto; }.header-context { min-width: 0; }.header-context > span:last-child { font-size: 15px; }.user-chip > span:last-child { display: none; }.dashboard-content { padding: 35px 20px 70px; }.welcome-row, .view-heading { align-items: flex-start; flex-direction: column; gap: 25px; }.welcome-orbit { align-self: flex-end; height: 90px; margin-top: -15px; width: 90px; }.welcome-orbit::after { height: 110px; width: 150px; }.welcome-orbit span { font-size: 26px; }.overview-grid, .project-grid, .journey-grid { grid-template-columns: 1fr; }.balance-card, .progress-card { min-height: 210px; }.dashboard-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }.amount-grid { grid-template-columns: repeat(3, 1fr); }.wallet-balance { align-self: stretch; width: 100%; }.auth-card { padding: 32px 25px; }.auth-card h1 { font-size: 32px; } }

/* Auth links and small-screen polish */
.guest-signin { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 9px; color: var(--cyan-dark); display: flex; font-size: 12px; font-weight: 800; gap: 8px; justify-content: center; margin-top: 9px; padding: 11px; width: 100%; }
.guest-signin:hover { background: #effafa; border-color: var(--cyan); }
.auth-footnote a, .auth-legal a { color: var(--cyan-dark); font-weight: 800; }
.legal-page { background: var(--paper); min-height: 100vh; }.legal-header { align-items: center; background: var(--white); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 19px 6%; }.legal-content { background: var(--white); border: 1px solid var(--line); border-radius: 18px; margin: 55px auto; max-width: 820px; padding: 55px; }.legal-content h1 { font-size: 52px; letter-spacing: -.08em; margin: 15px 0 8px; }.legal-content h2 { font-size: 23px; letter-spacing: -.05em; margin: 35px 0 9px; }.legal-content p { color: var(--muted); font-size: 13px; line-height: 1.8; }.legal-updated { font-family: 'DM Mono', monospace; font-size: 9px !important; text-transform: uppercase; }
@media (max-width: 480px) { .auth-shell { padding: 18px 12px; }.auth-card { border-radius: 18px; padding: 28px 20px; }.auth-card h1 { font-size: 29px; }.auth-kicker { margin-top: 38px; }.auth-copy { font-size: 12px; }.auth-footnote { line-height: 1.9; }.legal-header { padding: 15px; }.legal-header .brand-name { font-size: 17px; }.legal-content { border-radius: 0; border-left: 0; border-right: 0; margin: 20px 0; padding: 32px 20px; }.legal-content h1 { font-size: 38px; }.legal-content h2 { font-size: 20px; } }