:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0b0f14;--surface: #141a23;--surface-hover: #1a222e;--border: rgba(255, 255, 255, .08);--text: #e8ecf1;--text-dim: rgba(255, 255, 255, .5);--accent: #3b82f6;--accent-glow: rgba(59, 130, 246, .15);--green: #22c55e;--orange: #f59e0b;--red: #ef4444;--purple: #a855f7;--cyan: #06b6d4;--radius: .75rem;--radius-sm: .5rem}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.app{display:flex;flex-direction:column;min-height:100vh}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--accent),var(--cyan));border-radius:10px;display:grid;place-items:center;font-size:1.25rem}.logo h1{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}.logo span{color:var(--accent)}.header-right{display:flex;align-items:center;gap:1rem}.search-bar{display:flex;align-items:center;background:#ffffff0d;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .75rem;gap:.5rem;width:260px;transition:border-color .2s}.search-bar:focus-within{border-color:var(--accent)}.search-bar input{background:none;border:none;color:var(--text);font-size:.875rem;outline:none;width:100%}.search-bar input::placeholder{color:var(--text-dim)}.notif-btn{position:relative;background:#ffffff0d;border:1px solid var(--border);border-radius:var(--radius-sm);width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--text-dim);font-size:1rem;transition:all .2s}.notif-btn:hover{background:#ffffff14;color:var(--text)}.notif-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--red);border-radius:50%;font-size:.6rem;display:grid;place-items:center;color:#fff;font-weight:700}.nav-tabs{display:flex;gap:.25rem;padding:.75rem 2rem;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto}.nav-tab{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:var(--radius-sm);border:none;background:none;color:var(--text-dim);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.nav-tab:hover{background:#ffffff0d;color:var(--text)}.nav-tab.active{background:var(--accent-glow);color:var(--accent)}.nav-tab .tab-icon{font-size:1.1rem}.main{flex:1;padding:2rem;max-width:1400px;width:100%;margin:0 auto}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.section-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.section-subtitle{color:var(--text-dim);font-size:.9rem;margin-top:.25rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color .2s,transform .2s}.card:hover{border-color:#ffffff1f}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:var(--radius-sm);border:none;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#2563eb;transform:translateY(-1px)}.btn-secondary{background:#ffffff0f;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:#ffffff1a}.btn-sm{padding:.4rem .8rem;font-size:.8rem}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:2rem}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px}.stat-card.blue:after{background:var(--accent)}.stat-card.green:after{background:var(--green)}.stat-card.orange:after{background:var(--orange)}.stat-card.purple:after{background:var(--purple)}.stat-icon{font-size:1.5rem;margin-bottom:.75rem}.stat-value{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}.stat-label{color:var(--text-dim);font-size:.8rem;margin-top:.25rem}.stat-change{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600;margin-top:.5rem;padding:.15rem .5rem;border-radius:999px}.stat-change.up{background:#22c55e1a;color:var(--green)}.stat-change.down{background:#ef44441a;color:var(--red)}.car-overview{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:2rem}.car-visual{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;position:relative}.car-silhouette{font-size:6rem;line-height:1;margin-bottom:1rem;filter:drop-shadow(0 0 30px rgba(59,130,246,.3))}.car-name{font-size:1.5rem;font-weight:700}.car-details{color:var(--text-dim);font-size:.9rem;margin-top:.25rem}.health-meter{margin-top:1.5rem;width:100%;max-width:300px}.health-bar-bg{height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden}.health-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}.health-label{display:flex;justify-content:space-between;font-size:.8rem;margin-top:.4rem}.health-label span:first-child{color:var(--text-dim)}.health-label span:last-child{font-weight:600}.upcoming-list{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.upcoming-list h3{font-size:1rem;font-weight:600;margin-bottom:1rem}.upcoming-item{display:flex;align-items:center;gap:1rem;padding:.75rem;border-radius:var(--radius-sm);transition:background .15s}.upcoming-item:hover{background:#ffffff08}.upcoming-item+.upcoming-item{border-top:1px solid var(--border)}.upcoming-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:1.1rem;flex-shrink:0}.upcoming-info{flex:1}.upcoming-info h4{font-size:.9rem;font-weight:600}.upcoming-info p{font-size:.8rem;color:var(--text-dim)}.upcoming-date{font-size:.8rem;font-weight:600;white-space:nowrap}.service-grid{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem}.service-history{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.service-table-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}.service-table-header h3{font-size:1rem;font-weight:600}.service-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--border);font-size:.875rem;transition:background .15s}.service-row:hover{background:#ffffff05}.service-row:last-child{border-bottom:none}.service-row-header{color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}.status-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:600}.status-pill.completed{background:#22c55e1a;color:var(--green)}.status-pill.scheduled{background:#3b82f61a;color:var(--accent)}.status-pill.overdue{background:#ef44441a;color:var(--red)}.status-pill.in-progress{background:#f59e0b1a;color:var(--orange)}.schedule-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.schedule-card h3{font-size:1rem;font-weight:600;margin-bottom:1rem}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.8rem;color:var(--text-dim);margin-bottom:.4rem;font-weight:500}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.6rem .75rem;background:#ffffff0a;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.875rem;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent)}.form-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}.parts-toolbar{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.parts-search{flex:1;min-width:250px;display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .75rem;gap:.5rem}.parts-search input{background:none;border:none;color:var(--text);font-size:.875rem;outline:none;width:100%}.parts-search input::placeholder{color:var(--text-dim)}.filter-chip{padding:.55rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-size:.8rem;color:var(--text-dim);cursor:pointer;transition:all .2s;font-weight:500}.filter-chip:hover{border-color:#ffffff26;color:var(--text)}.filter-chip.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}.parts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.part-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;cursor:pointer;transition:all .2s}.part-card:hover{border-color:#ffffff26;transform:translateY(-2px)}.part-image{width:100%;height:140px;background:#ffffff08;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:2.5rem;margin-bottom:1rem}.part-card h4{font-size:.95rem;font-weight:600;margin-bottom:.25rem}.part-card .part-cat{font-size:.75rem;color:var(--text-dim);margin-bottom:.75rem}.part-footer{display:flex;align-items:center;justify-content:space-between}.part-price{font-size:1.1rem;font-weight:700;color:var(--green)}.part-stock{font-size:.75rem;display:flex;align-items:center;gap:.35rem}.part-stock .dot{width:6px;height:6px;border-radius:50%}.part-stock .dot.in{background:var(--green)}.part-stock .dot.low{background:var(--orange)}.part-stock .dot.out{background:var(--red)}.repairs-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.repair-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all .2s}.repair-card:hover{border-color:#ffffff1f}.repair-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.repair-header h4{font-size:1rem;font-weight:600}.priority-badge{padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.priority-badge.high{background:#ef444426;color:var(--red)}.priority-badge.medium{background:#f59e0b26;color:var(--orange)}.priority-badge.low{background:#22c55e26;color:var(--green)}.repair-desc{color:var(--text-dim);font-size:.875rem;margin-bottom:1rem;line-height:1.6}.repair-meta{display:flex;gap:1.5rem;font-size:.8rem;color:var(--text-dim);margin-bottom:1rem}.repair-meta span{display:flex;align-items:center;gap:.35rem}.repair-progress{margin-bottom:.5rem}.progress-bar-bg{height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}.progress-label{display:flex;justify-content:space-between;font-size:.75rem;margin-top:.35rem;color:var(--text-dim)}.care-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:2rem}.tip-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;display:flex;gap:1rem;transition:all .2s}.tip-card:hover{border-color:#ffffff1f}.tip-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}.tip-content h4{font-size:.95rem;font-weight:600;margin-bottom:.35rem}.tip-content p{font-size:.8rem;color:var(--text-dim);line-height:1.5}.checklist-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.checklist-card h3{font-size:1rem;font-weight:600;margin-bottom:1rem}.checklist-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.875rem}.checklist-item:last-child{border-bottom:none}.check-circle{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:grid;place-items:center;font-size:.7rem;cursor:pointer;transition:all .2s;flex-shrink:0}.check-circle.checked{background:var(--green);border-color:var(--green);color:#fff}.checklist-item.done{color:var(--text-dim);text-decoration:line-through}.reminder-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}.reminder-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center}.reminder-card .reminder-icon{font-size:2rem;margin-bottom:.75rem}.reminder-card h4{font-size:.9rem;font-weight:600;margin-bottom:.25rem}.reminder-card p{font-size:.8rem;color:var(--text-dim)}.reminder-card .days{font-size:1.5rem;font-weight:800;margin:.5rem 0}@media(max-width:1024px){.stats-row{grid-template-columns:repeat(2,1fr)}.car-overview,.service-grid,.repairs-layout,.care-layout,.reminder-strip{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.header{padding:.75rem 1rem}.nav-tabs{padding:.5rem 1rem}.main{padding:1rem}.stats-row{grid-template-columns:1fr}.search-bar{display:none}.parts-grid{grid-template-columns:1fr}}
