:root{color-scheme:dark;--gold: #d4af37;--gold-light: #f2d98d;--gold-dark: #9c7a1c;--gold-gradient: linear-gradient(135deg, #f6e3a1 0%, #d4af37 48%, #a8841f 100%);--gold-soft: rgba(212, 175, 55, .12);--gold-line: rgba(212, 175, 55, .32);--background: #09090a;--surface: #131315;--surface-raised: #19191c;--surface-hover: #1e1e22;--border: rgba(255, 255, 255, .07);--border-strong: rgba(255, 255, 255, .12);--text-primary: #f5f2ea;--text-secondary: #a9a59c;--text-muted: #8a867f;--success-color: #5ccf98;--warning-color: #f59e5b;--danger-color: #f07a7a;--info-color: #c9c3b4;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .6);--shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .75);--radius: 16px;--radius-sm: 10px;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background);color:var(--text-primary);line-height:1.5}.app{min-height:100vh;background:radial-gradient(1200px 600px at 85% -10%,rgba(212,175,55,.08),transparent 60%),var(--background);position:relative;isolation:isolate}.app:before,.app:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.app:before{background:url(/bg-guilloche.svg) center top / max(1200px,110vw) auto no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 35%,transparent 75%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 35%,transparent 75%)}.app:after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;opacity:.045}.dashboard{min-height:100vh;padding:var(--spacing-lg) var(--spacing-md) var(--spacing-2xl);font-size:.9375rem;font-variant-numeric:tabular-nums;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.dashboard-header{max-width:720px;margin:0 auto var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.brand{display:flex;align-items:center;gap:.6rem}.brand-mark{display:block;width:2.5rem;height:2.5rem;filter:drop-shadow(0 4px 10px rgba(212,175,55,.25))}.brand-name{font-family:Cinzel,Times New Roman,serif;font-weight:600;font-size:1.4rem;letter-spacing:.08em;line-height:1;background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.cardholder{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}.cardholder-name{font-weight:600;font-size:.9rem}.cardholder-card{font-size:.78rem;color:var(--text-muted)}.dashboard-main{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-xl)}.state-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:60vh;color:var(--text-secondary);text-align:center}.state-title{color:var(--text-primary);font-weight:600;font-size:1.05rem}.state-subtitle{font-size:.875rem}.loading-spinner{width:32px;height:32px;border:2px solid var(--gold-soft);border-top-color:var(--gold);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hero-card{position:relative;overflow:hidden;padding:var(--spacing-lg);border-radius:20px;background:radial-gradient(500px 220px at 100% 0%,rgba(212,175,55,.16),transparent 70%),linear-gradient(160deg,#1d1d20,#111113 55%,#0c0c0d);border:1px solid var(--gold-line);box-shadow:var(--shadow-lg),inset 0 1px #ffffff0d;display:flex;flex-direction:column;gap:var(--spacing-md)}.hero-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px);pointer-events:none}.hero-top{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}.hero-network{font-size:.75rem;font-weight:700;font-style:italic;letter-spacing:.06em;color:var(--gold-light);opacity:.85}.hero-amount{font-size:clamp(2.25rem,8vw,3.25rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;background:var(--gold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-amount.settled{background:none;color:var(--success-color)}.hero-progress{display:flex;flex-direction:column;gap:.5rem}.progress-track{height:6px;border-radius:999px;background:#ffffff14;overflow:hidden}.progress-fill{height:100%;border-radius:inherit;background:var(--gold-gradient);transition:width .6s ease}.hero-figures{display:flex;justify-content:space-between;gap:var(--spacing-sm);font-size:.85rem;color:var(--text-secondary)}.hero-figures strong{color:var(--text-primary);font-weight:600}.hero-percent{color:var(--gold-light);font-weight:600}.hero-status{display:flex;flex-wrap:wrap;align-items:center;column-gap:.6rem;row-gap:.15rem;padding:.7rem .9rem;border-radius:var(--radius-sm);background:#ffffff0a;border:1px solid var(--border);font-size:.85rem;--tone: var(--info-color)}.hero-status.overdue{--tone: var(--danger-color)}.hero-status.due-soon{--tone: var(--warning-color)}.hero-status.upcoming{--tone: var(--gold)}.hero-status.paid{--tone: var(--success-color)}.hero-status.overdue,.hero-status.due-soon{border-color:color-mix(in srgb,var(--tone) 35%,transparent);background:color-mix(in srgb,var(--tone) 8%,transparent)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 20%,transparent);flex-shrink:0}.hero-status-title{font-weight:700;color:var(--tone)}.hero-status-message{color:var(--text-secondary)}.statement-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.section-title{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);padding:0 .25rem}.section-count{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .4rem;border-radius:999px;background:var(--gold-soft);color:var(--gold-light);font-size:.72rem;letter-spacing:0}.statement-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.statement-card{position:relative;background:#131315d1;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease,background-color .2s ease}.statement-card:hover,.statement-card.open{border-color:var(--border-strong)}.statement-card.open{background:#19191ce6}.statement-toggle{width:100%;display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 2px) var(--spacing-lg);background:none;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.statement-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:var(--radius)}.statement-period{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.statement-month{font-weight:600;font-size:1rem}.statement-dates{font-size:.8rem;color:var(--text-muted)}.statement-figure{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}.statement-amount{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}.statement-card.paid .statement-amount{color:var(--text-secondary)}.status-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap;color:var(--tone);background:color-mix(in srgb,var(--tone) 13%,transparent);--tone: var(--info-color)}.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status-pill.overdue{--tone: var(--danger-color)}.status-pill.due-soon{--tone: var(--warning-color)}.status-pill.upcoming{--tone: var(--gold-light)}.status-pill.paid{--tone: var(--success-color)}.chevron{flex-shrink:0;color:var(--text-muted);transition:transform .25s ease,color .2s ease}.statement-toggle:hover .chevron{color:var(--text-primary)}.statement-card.open .chevron{transform:rotate(180deg);color:var(--gold)}.statement-progress{height:2px;margin:0 var(--spacing-lg);background:#ffffff0d;border-radius:999px;overflow:hidden}.statement-progress-fill{height:100%;background:var(--gold-gradient)}.statement-card.paid .statement-progress-fill{background:var(--success-color);opacity:.6}.statement-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.statement-card.open .statement-body{grid-template-rows:1fr}.statement-body-inner{overflow:hidden;min-height:0}.statement-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-lg) 0}.statement-totals>div{padding:.6rem .75rem;border-radius:var(--radius-sm);background:#ffffff08;border:1px solid var(--border)}.statement-totals dt{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.statement-totals dd{font-weight:700;font-size:.95rem}.statement-totals dd.paid{color:var(--success-color)}.statement-totals dd.owed{color:var(--gold-light)}.statement-meta{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-xs);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.transaction-list{list-style:none;padding:0 var(--spacing-lg) var(--spacing-md)}.transaction-item{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);padding:.7rem 0;border-top:1px solid var(--border)}.transaction-main,.transaction-amounts{display:flex;flex-direction:column;gap:.1rem}.transaction-main{min-width:0}.transaction-amounts{align-items:flex-end;flex-shrink:0}.transaction-name{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transaction-date{font-size:.78rem;color:var(--text-muted)}.transaction-total{font-weight:600;font-size:.9rem}.transaction-status{font-size:.75rem;font-weight:500}.transaction-status.paid{color:var(--success-color)}.transaction-status.partial{color:var(--warning-color)}.transaction-status.unpaid{color:var(--danger-color)}@media (max-width: 480px){.dashboard{padding:var(--spacing-md) var(--spacing-sm) var(--spacing-xl)}.hero-card{padding:var(--spacing-md) var(--spacing-md) var(--spacing-md)}.statement-toggle{padding-left:var(--spacing-md);padding-right:var(--spacing-sm);gap:var(--spacing-sm)}.statement-progress{margin:0 var(--spacing-md)}.statement-totals,.statement-meta,.transaction-list{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.statement-totals>div{padding:.5rem .55rem}.statement-totals dd{font-size:.82rem}}@media (prefers-reduced-motion: reduce){.dashboard,.statement-body,.chevron,.progress-fill{animation:none;transition:none}}
