@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a28;--bg-card:#1a1a2899;--bg-card-hover:#1e1e32cc;--bg-glass:#ffffff08;--bg-glass-hover:#ffffff0f;--border-primary:#ffffff14;--border-hover:#ffffff26;--border-active:#8b5cf680;--text-primary:#f0f0f5;--text-secondary:#9d9db5;--text-tertiary:#6b6b82;--text-muted:#4a4a5e;--accent-primary:#8b5cf6;--accent-primary-hover:#7c3aed;--accent-secondary:#06b6d4;--accent-success:#10b981;--accent-warning:#f59e0b;--accent-danger:#ef4444;--gradient-primary:linear-gradient(135deg,#8b5cf6 0%,#06b6d4 100%);--gradient-secondary:linear-gradient(135deg,#06b6d4 0%,#10b981 100%);--gradient-card:linear-gradient(145deg,#8b5cf60d 0%,#06b6d40d 100%);--gradient-glow:radial-gradient(ellipse at center,#8b5cf626 0%,transparent 70%);--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px #8b5cf633;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-base:.25s cubic-bezier(.4,0,.2,1);--transition-slow:.4s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6;overflow-x:hidden}body:before{content:"";background:var(--gradient-glow);pointer-events:none;z-index:0;position:fixed;inset:0}.app-container{z-index:1;max-width:1400px;margin:0 auto;padding:0 24px;position:relative}.nav-header{border-bottom:1px solid var(--border-primary);justify-content:space-between;align-items:center;margin-bottom:32px;padding:20px 0;display:flex}.nav-logo{color:var(--text-primary);align-items:center;gap:12px;text-decoration:none;display:flex}.nav-logo-icon{border-radius:var(--radius-md);background:var(--gradient-primary);width:40px;height:40px;box-shadow:var(--shadow-glow);justify-content:center;align-items:center;font-size:20px;display:flex}.nav-logo-text{letter-spacing:-.02em;background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:700}.nav-actions{align-items:center;gap:12px;display:flex}.btn{border-radius:var(--radius-md);border:1px solid var(--border-primary);background:var(--bg-glass);color:var(--text-primary);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-family:inherit;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.btn:hover{background:var(--bg-glass-hover);border-color:var(--border-hover);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--gradient-primary);color:#fff;border-color:#0000;font-weight:600}.btn-primary:hover{opacity:.9;box-shadow:var(--shadow-glow)}.btn-danger{color:var(--accent-danger);border-color:#ef44444d}.btn-danger:hover{background:#ef44441a;border-color:#ef444480}.btn-success{color:var(--accent-success);border-color:#10b9814d}.btn-success:hover{background:#10b9811a;border-color:#10b98180}.btn-sm{padding:6px 14px;font-size:.8125rem}.btn-lg{border-radius:var(--radius-lg);padding:14px 28px;font-size:1rem}.btn-icon{border-radius:var(--radius-sm);width:36px;height:36px;padding:8px}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-primary);border-radius:var(--radius-lg);transition:all var(--transition-base);padding:24px}.card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}.card-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.card-title{color:var(--text-primary);align-items:center;gap:8px;font-size:1rem;font-weight:600;display:flex}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:.8125rem;font-weight:500;display:block}.form-description{color:var(--text-tertiary);margin-bottom:6px;font-size:.75rem}.form-input,.form-textarea,.form-select{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);transition:all var(--transition-fast);outline:none;padding:10px 14px;font-family:inherit;font-size:.875rem}.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted)}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--border-active);box-shadow:0 0 0 3px #8b5cf61a}.form-textarea{resize:vertical;min-height:80px;line-height:1.5}.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%239d9db5' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}.tags-container{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);min-height:42px;transition:all var(--transition-fast);cursor:text;flex-wrap:wrap;gap:6px;padding:8px;display:flex}.tags-container:focus-within{border-color:var(--border-active);box-shadow:0 0 0 3px #8b5cf61a}.tag{color:var(--accent-primary);background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:.8125rem;animation:.2s ease-out tagIn;display:inline-flex}@keyframes tagIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.tag-remove{width:16px;height:16px;color:var(--accent-primary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:14px;line-height:1;display:flex}.tag-remove:hover{background:#8b5cf64d}.tags-input{min-width:100px;color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;padding:2px 4px;font-family:inherit;font-size:.875rem}.tags-input::placeholder{color:var(--text-muted)}.section-group{border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:var(--bg-card);transition:all var(--transition-base);margin-bottom:12px;overflow:hidden}.section-group:hover{border-color:var(--border-hover)}.section-header{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast);align-items:center;gap:12px;padding:16px 20px;display:flex}.section-header:hover{background:var(--bg-glass-hover)}.section-icon{flex-shrink:0;font-size:1.25rem}.section-info{flex:1}.section-label{color:var(--text-primary);font-size:.9375rem;font-weight:600}.section-desc{color:var(--text-tertiary);font-size:.75rem}.section-toggle{color:var(--text-tertiary);transition:transform var(--transition-base);font-size:.875rem}.section-toggle.open{transform:rotate(180deg)}.section-body{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 20px 20px;display:grid}.section-body.hidden{display:none}.upload-zone{border:2px dashed var(--border-primary);border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all var(--transition-base);background:var(--bg-glass);padding:48px 32px;position:relative;overflow:hidden}.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent-primary);box-shadow:var(--shadow-glow);background:#8b5cf60d}.upload-zone-icon{opacity:.6;margin-bottom:16px;font-size:3rem}.upload-zone-title{color:var(--text-primary);margin-bottom:8px;font-size:1rem;font-weight:600}.upload-zone-desc{color:var(--text-tertiary);font-size:.875rem}.upload-zone input[type=file]{display:none}.image-gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px;display:grid}.image-thumb{aspect-ratio:1;border-radius:var(--radius-md);border:1px solid var(--border-primary);transition:all var(--transition-base);position:relative;overflow:hidden}.image-thumb:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-md);transform:scale(1.02)}.image-thumb img{object-fit:cover;width:100%;height:100%}.image-thumb-remove{color:#fff;cursor:pointer;opacity:0;width:24px;height:24px;transition:opacity var(--transition-fast);background:#000000b3;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;top:6px;right:6px}.image-thumb:hover .image-thumb-remove{opacity:1}.prompt-output{background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);white-space:pre-wrap;word-break:break-word;padding:20px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;line-height:1.7;position:relative}.prompt-output-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:8px;font-size:.75rem;font-weight:600}.prompt-output-positive{border-left:3px solid var(--accent-success);margin-bottom:16px;padding-left:16px}.prompt-output-negative{border-left:3px solid var(--accent-danger);padding-left:16px}.prompt-copy-btn{position:absolute;top:12px;right:12px}.styles-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:24px;display:grid}.style-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-primary);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);overflow:hidden}.style-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(-4px)}.style-card-images{background:var(--bg-tertiary);height:180px;display:flex;overflow:hidden}.style-card-images img{object-fit:cover;border-right:1px solid var(--bg-primary);flex:1;min-width:0}.style-card-images img:last-child{border-right:none}.style-card-body{padding:16px 20px}.style-card-name{margin-bottom:4px;font-size:1rem;font-weight:600}.style-card-meta{color:var(--text-tertiary);align-items:center;gap:12px;font-size:.8125rem;display:flex}.style-card-badge{color:var(--accent-primary);background:#8b5cf626;border-radius:12px;align-items:center;gap:4px;padding:2px 8px;font-size:.75rem;font-weight:500;display:inline-flex}.comparison-container{grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;display:grid}.comparison-panel{border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden}.comparison-panel-header{background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);padding:12px 16px;font-size:.875rem;font-weight:600}.comparison-panel-body{padding:16px}.diff-list{flex-direction:column;gap:12px;margin-top:16px;display:flex}.diff-item{border-radius:var(--radius-md);border-left:3px solid var(--border-primary);background:var(--bg-glass);padding:12px 16px}.diff-item.minor{border-left-color:var(--accent-secondary)}.diff-item.moderate{border-left-color:var(--accent-warning)}.diff-item.major{border-left-color:var(--accent-danger)}.diff-item-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.diff-item-field{color:var(--text-primary);font-size:.8125rem;font-weight:600}.diff-item-severity{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 6px;font-size:.6875rem;font-weight:600}.diff-item-desc{color:var(--text-secondary);font-size:.8125rem}.settings-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px;display:grid}.provider-card{position:relative}.provider-card.active{border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.provider-badge{border-radius:12px;padding:2px 10px;font-size:.75rem;font-weight:600;position:absolute;top:12px;right:12px}.provider-badge.active{color:var(--accent-success);background:#10b98126}.loading-spinner{border:2px solid var(--border-primary);border-top-color:var(--accent-primary);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.loading-bar{background:var(--bg-tertiary);border-radius:4px;height:3px;position:relative;overflow:hidden}.loading-bar:after{content:"";background:var(--gradient-primary);border-radius:4px;width:40%;height:100%;animation:1.2s ease-in-out infinite loadingSlide;position:absolute;top:0;left:-40%}@keyframes loadingSlide{0%{left:-40%}to{left:100%}}.fade-in{animation:.3s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:.4s cubic-bezier(.16,1,.3,1) slideIn}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toast-container{z-index:1000;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{border-radius:var(--radius-md);background:var(--bg-tertiary);border:1px solid var(--border-primary);color:var(--text-primary);box-shadow:var(--shadow-lg);align-items:center;gap:8px;padding:12px 20px;font-size:.875rem;animation:.3s ease-out toastIn;display:flex}@keyframes toastIn{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.toast.success{border-left:3px solid var(--accent-success)}.toast.error{border-left:3px solid var(--accent-danger)}.toast.warning{border-left:3px solid var(--accent-warning)}.page-header{margin-bottom:32px}.page-title{letter-spacing:-.03em;background:var(--gradient-primary);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:1.75rem;font-weight:800}.page-subtitle{color:var(--text-secondary);font-size:.9375rem}.tabs{border-bottom:1px solid var(--border-primary);gap:4px;margin-bottom:24px;display:flex;overflow-x:auto}.tab{color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;padding:12px 20px;font-family:inherit;font-size:.875rem;font-weight:500}.tab:hover{color:var(--text-secondary)}.tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.empty-state{text-align:center;padding:64px 32px}.empty-state-icon{opacity:.3;margin-bottom:16px;font-size:4rem}.empty-state-title{color:var(--text-primary);margin-bottom:8px;font-size:1.25rem;font-weight:600}.empty-state-desc{color:var(--text-tertiary);max-width:400px;margin:0 auto 24px;font-size:.9375rem}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background:#000000b3;justify-content:center;align-items:center;padding:24px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);width:100%;max-width:600px;max-height:90vh;box-shadow:var(--shadow-lg);animation:.3s cubic-bezier(.16,1,.3,1) slideIn;overflow-y:auto}.modal-header{border-bottom:1px solid var(--border-primary);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-title{font-size:1.125rem;font-weight:700}.modal-body{padding:24px}.modal-footer{border-top:1px solid var(--border-primary);justify-content:flex-end;gap:12px;padding:16px 24px;display:flex}.score-badge{border-radius:20px;align-items:center;gap:6px;padding:4px 12px;font-size:.875rem;font-weight:600;display:inline-flex}.score-badge.high{color:var(--accent-success);background:#10b98126}.score-badge.medium{color:var(--accent-warning);background:#f59e0b26}.score-badge.low{color:var(--accent-danger);background:#ef444426}@media (max-width:768px){.app-container{padding:0 16px}.page-title{font-size:1.375rem}.styles-grid,.comparison-container,.settings-grid,.section-body{grid-template-columns:1fr}.nav-header{flex-wrap:wrap;gap:12px}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.two-col-layout{grid-template-columns:1fr 400px;align-items:start;gap:24px;display:grid}.two-col-layout .main-col{min-width:0}.two-col-layout .side-col{position:sticky;top:24px}@media (max-width:1024px){.two-col-layout{grid-template-columns:1fr}.two-col-layout .side-col{position:static}}.back-link{color:var(--text-tertiary);transition:color var(--transition-fast);align-items:center;gap:6px;margin-bottom:20px;font-size:.875rem;text-decoration:none;display:inline-flex}.back-link:hover{color:var(--text-primary)}.analysis-progress{text-align:center;padding:32px}.analysis-progress-title{margin-bottom:8px;font-size:1.125rem;font-weight:600}.analysis-progress-desc{color:var(--text-tertiary);margin-bottom:20px;font-size:.875rem}