:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #141414;--surface-hover: #1a1a1a;--border: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .12);--text: #fafafa;--text-dim: rgba(255, 255, 255, .65);--text-muted: rgba(255, 255, 255, .4);--accent: #3b82f6;--accent-hover: #2563eb;--green: #22c55e;--green-dim: rgba(34, 197, 94, .15);--red: #ef4444;--red-dim: rgba(239, 68, 68, .15);--yellow: #f59e0b;--yellow-dim: rgba(245, 158, 11, .15);--radius: .75rem;--radius-sm: .5rem}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;max-width:720px;margin:0 auto;padding:0 1rem 3rem}.app-header{display:flex;flex-direction:column;gap:1.5rem;padding:2rem 0 1.5rem;border-bottom:1px solid var(--border);margin-bottom:2rem}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:2rem}.logo h1{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}.tagline{font-size:.8rem;color:var(--text-muted)}.tabs{display:flex;gap:.25rem;background:var(--surface);border-radius:var(--radius);padding:.25rem;border:1px solid var(--border)}.tab{flex:1;padding:.6rem 1rem;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s}.tab:hover{color:var(--text);background:var(--surface-hover)}.tab.active{background:var(--accent);color:#fff}.content{animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.2rem;font-weight:600;margin-bottom:1.25rem}h3{font-size:.95rem;font-weight:600;margin-bottom:.75rem;color:var(--text-dim)}.success-banner{background:var(--green-dim);color:var(--green);padding:.75rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;margin-bottom:1.25rem;border:1px solid rgba(34,197,94,.2)}.service-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}.service-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.25rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:all .15s}.service-card:hover{border-color:var(--border-light);background:var(--surface-hover)}.service-card.selected{border-color:var(--accent);background:#3b82f614;box-shadow:0 0 0 1px var(--accent)}.service-icon{font-size:1.75rem}.service-name{font-size:.85rem;font-weight:600}.service-price{font-size:.75rem;color:var(--text-muted)}.form{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;font-weight:500;color:var(--text-dim)}input,textarea{padding:.65rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.9rem;font-family:inherit;transition:border-color .15s}input:focus,textarea:focus{outline:none;border-color:var(--accent)}textarea{resize:vertical}.btn-primary{padding:.75rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s}.btn-primary:hover{background:var(--accent-hover)}.records{display:flex;flex-direction:column;gap:.5rem}.record{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);gap:1rem;flex-wrap:wrap}.upcoming-record{border-left:3px solid var(--yellow)}.record-info{display:flex;align-items:center;gap:.75rem;min-width:0}.record-icon{font-size:1.5rem;flex-shrink:0}.record-info strong{display:block;font-size:.9rem}.record-detail{display:block;font-size:.75rem;color:var(--text-muted)}.record-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.record-cost{font-weight:600;font-size:.9rem;white-space:nowrap}.status-badge{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .55rem;border-radius:999px}.status-badge.completed{background:var(--green-dim);color:var(--green)}.status-badge.upcoming{background:var(--yellow-dim);color:var(--yellow)}.btn-sm{padding:.35rem .65rem;border:none;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;cursor:pointer;transition:opacity .15s}.btn-sm:hover{opacity:.85}.btn-green{background:var(--green-dim);color:var(--green)}.btn-red{background:var(--red-dim);color:var(--red)}.empty{color:var(--text-muted);text-align:center;padding:3rem 0}.cost-overview{margin-bottom:2rem}.cost-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center}.cost-card.total{border-color:var(--accent);background:#3b82f60d}.cost-label{display:block;font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem}.cost-amount{display:block;font-size:2.25rem;font-weight:700;letter-spacing:-.03em}.cost-sub{display:block;font-size:.8rem;color:var(--text-dim);margin-top:.25rem}.cost-breakdown{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}.cost-breakdown h3{margin-bottom:1rem}.cost-row{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--border)}.cost-row:last-child{border-bottom:none}.cost-row-info{display:flex;align-items:center;gap:.65rem;font-size:.9rem}.cost-count{font-size:.75rem;color:var(--text-muted)}.cost-row-amount{font-weight:600;font-size:.9rem}.cost-row-amount.pending{color:var(--yellow)}.upcoming-section{margin-top:2rem}.upcoming-section h3{margin-bottom:.75rem}@media(max-width:480px){.service-cards{grid-template-columns:1fr}.record{flex-direction:column;align-items:flex-start}.record-actions{width:100%;justify-content:flex-end}}