.page-dyno-submit{--color-success: #00ff88;--color-gain: #00ff88;--color-loss: #ff4444}.dyno-container{max-width:700px;margin:0 auto;padding:var(--spacing-lg);padding-top:calc(var(--header-height, 60px) + var(--spacing-xl));padding-bottom:calc(var(--spacing-xxl) * 2)}.dyno-header{text-align:center;margin-bottom:var(--spacing-xl)}.dyno-header h1{font-size:2rem;margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--color-primary),var(--color-gain));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dyno-header p{color:var(--color-text-secondary);font-size:1rem}.vehicle-selector{margin-bottom:var(--spacing-xl)}.vehicle-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-sm)}.vehicle-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-md);cursor:pointer;transition:all .2s ease;text-align:center}.vehicle-card:hover{border-color:var(--color-primary);transform:translateY(-2px)}.vehicle-card.selected{border-color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1);box-shadow:0 0 20px rgba(var(--color-primary-rgb),.2)}.vehicle-card .vehicle-emoji{font-size:2rem;margin-bottom:var(--spacing-xs)}.vehicle-card .vehicle-name{font-weight:600;color:var(--color-text-primary);font-size:.95rem}.vehicle-card .vehicle-meta{color:var(--color-text-secondary);font-size:.8rem;margin-top:var(--spacing-xs)}.no-vehicles-msg{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary)}.no-vehicles-msg a{color:var(--color-primary);text-decoration:underline}.dyno-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.dyno-type-selector{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.radio-card{display:block;cursor:pointer}.radio-card input{display:none}.radio-card-content{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:all .2s ease;text-align:center}.radio-card input:checked+.radio-card-content{border-color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1)}.radio-card-content strong{font-size:1.1rem;margin-bottom:var(--spacing-xs)}.radio-card-content small{color:var(--color-text-secondary);font-size:.8rem}.hp-inputs{display:flex;align-items:center;gap:var(--spacing-md)}.hp-section{flex:1;padding:var(--spacing-md);background:#ffffff08;border-radius:var(--radius-md)}.hp-section h3{font-size:.9rem;margin-bottom:var(--spacing-sm);color:var(--color-text-secondary)}.hp-section.after h3{color:var(--color-gain)}.hp-section .optional{font-weight:400;font-size:.8rem;opacity:.7}.hp-arrow{font-size:2rem;color:var(--color-primary);flex-shrink:0}.hp-input{font-size:1.3rem!important;font-weight:700;text-align:center}.hp-gain-preview{display:flex;justify-content:center;gap:var(--spacing-xl);padding:var(--spacing-lg);background:linear-gradient(135deg,#00ff881a,#0088ff1a);border-radius:var(--radius-lg);margin-top:var(--spacing-md)}.gain-stat{display:flex;flex-direction:column;align-items:center}.gain-value{font-size:2rem;font-weight:800;color:var(--color-gain)}.gain-label{font-size:.8rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.upload-zone{position:relative;border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;transition:all .2s ease;cursor:pointer;min-height:200px;display:flex;align-items:center;justify-content:center}.upload-zone:hover,.upload-zone.dragover{border-color:var(--color-primary);background:rgba(var(--color-primary-rgb),.05)}.upload-zone .file-input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-content{pointer-events:none}.upload-icon{font-size:3rem;margin-bottom:var(--spacing-sm)}.upload-text{font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.upload-hint{font-size:.85rem;color:var(--color-text-secondary)}.upload-preview{position:relative;width:100%}.upload-preview img{max-width:100%;max-height:300px;border-radius:var(--radius-md);object-fit:contain}.upload-preview .remove-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:32px;height:32px;border-radius:50%;background:#000000b3;color:#fff;border:none;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}.upload-preview .remove-btn:hover{background:var(--color-loss)}.upload-tip{font-size:.85rem;color:var(--color-text-secondary);margin-top:var(--spacing-sm)}.verification-info{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--color-border)}.verification-info h3{font-size:1rem;margin-bottom:var(--spacing-md)}.verification-info ul{list-style:none;padding:0;margin:0 0 var(--spacing-md)}.verification-info li{padding:var(--spacing-xs) 0;font-size:.9rem;color:var(--color-text-secondary)}.verification-info li strong{color:var(--color-text-primary)}.verification-info p{font-size:.85rem;color:var(--color-text-secondary)}.submit-btn{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:1.1rem;font-weight:700;border-radius:var(--radius-lg)}.submit-btn .btn-loading{display:inline-flex;align-items:center;gap:var(--spacing-sm)}.submit-btn.loading .btn-text{display:none}.submit-btn.loading .btn-loading{display:inline-flex}.success-message{text-align:center;padding:var(--spacing-xxl) var(--spacing-lg)}.success-icon{font-size:4rem;margin-bottom:var(--spacing-lg)}.success-message h2{font-size:1.5rem;margin-bottom:var(--spacing-sm)}.success-message p{color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.success-actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.success-actions a{min-width:150px}@media(max-width:600px){.dyno-container{padding:var(--spacing-md);padding-top:calc(var(--header-height, 60px) + var(--spacing-lg))}.hp-inputs{flex-direction:column}.hp-arrow{transform:rotate(90deg)}.dyno-type-selector{grid-template-columns:1fr}.hp-gain-preview{flex-direction:column;gap:var(--spacing-md)}.vehicle-cards{grid-template-columns:1fr}}
