@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');
:root{--color-black:#0a0a0a;--color-white:#fff;--color-gray-50:#fafafa;--color-gray-100:#f5f5f5;--color-gray-200:#e5e5e5;--color-gray-300:#d4d4d4;--color-gray-400:#a3a3a3;--color-gray-500:#737373;--color-gray-600:#525252;--color-gray-700:#404040;--color-gray-800:#262626;--color-gray-900:#171717;--color-accent:#c9a86c;--color-success:#22c55e;--color-error:#ef4444;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--font-display:'Playfair Display',Georgia,serif;--font-body:'Inter',-apple-system,sans-serif;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);line-height:1.6;color:var(--color-gray-800);background:var(--color-gray-50);min-height:100vh}h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;color:var(--color-black)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}
.app-container{display:flex;min-height:100vh}.sidebar{width:280px;background:var(--color-black);color:var(--color-white);position:fixed;height:100vh;z-index:100;display:flex;flex-direction:column}.sidebar-header{padding:var(--space-xl);border-bottom:1px solid var(--color-gray-800);flex-shrink:0}.sidebar-logo{font-family:var(--font-display);font-size:1.2rem;font-weight:600;color:var(--color-white);text-decoration:none;display:flex;align-items:center;gap:var(--space-md)}.sidebar-logo .logo-text{line-height:1.2}.sidebar-logo span{color:var(--color-accent);font-size:0.9rem}.sidebar-logo small{font-size:0.65rem;color:var(--color-gray-500);font-weight:400;letter-spacing:0.05em}.sidebar-nav{padding:var(--space-lg) 0;overflow-y:auto;flex:1;display:flex;flex-direction:column}.nav-section{margin-bottom:var(--space-lg)}.nav-section-bottom{margin-top:auto;margin-bottom:0;padding-top:var(--space-lg);border-top:1px solid var(--color-gray-800)}.nav-section-title{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-gray-500);padding:var(--space-sm) var(--space-xl)}.nav-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-xl);color:var(--color-gray-400);text-decoration:none;font-size:.9rem;font-weight:500;transition:all .15s;border-left:3px solid transparent}.nav-item:hover{background:var(--color-gray-900);color:var(--color-white)}.nav-item.active{background:var(--color-gray-900);color:var(--color-white);border-left-color:var(--color-accent)}.nav-item svg{width:20px;height:20px;flex-shrink:0}.nav-item .badge{margin-left:auto;background:var(--color-accent);color:var(--color-black);font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-full)}
.main-content{flex:1;margin-left:280px;min-height:100vh}.page-header{background:var(--color-white);border-bottom:1px solid var(--color-gray-200);padding:var(--space-xl) var(--space-2xl);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50}.page-title{font-size:1.75rem}.page-actions{display:flex;gap:var(--space-md)}.page-content{padding:var(--space-2xl)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-family:var(--font-body);font-size:.9rem;font-weight:500;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all .15s;text-decoration:none}.btn svg{width:18px;height:18px}.btn-primary{background:var(--color-black);color:var(--color-white)}.btn-primary:hover{background:var(--color-gray-800)}.btn-secondary{background:var(--color-white);color:var(--color-black);border:1px solid var(--color-gray-300)}.btn-ghost{background:transparent;color:var(--color-gray-600)}.btn-ghost:hover{background:var(--color-gray-100)}.btn-sm{padding:var(--space-sm) var(--space-md);font-size:.8rem}.btn-lg{padding:var(--space-lg) var(--space-2xl);font-size:1rem}.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200);overflow:hidden;transition:all .25s}.card:hover{border-color:var(--color-gray-300);box-shadow:0 4px 6px -1px rgb(0 0 0/.1)}.card-image{aspect-ratio:3/4;background:var(--color-gray-100);position:relative;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.card:hover .card-image img{transform:scale(1.03)}.card-image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-gray-400);gap:var(--space-sm)}.card-body{padding:var(--space-lg)}.card-title{font-size:1rem;font-weight:500;margin-bottom:var(--space-xs)}.card-subtitle{font-size:.85rem;color:var(--color-gray-500)}.card-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-gray-100);display:flex;justify-content:space-between;align-items:center}
.grid{display:grid;gap:var(--space-xl)}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.grid-cols-5{grid-template-columns:repeat(5,1fr)}
.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;font-size:.85rem;font-weight:500;color:var(--color-gray-700);margin-bottom:var(--space-sm)}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-md);font-family:var(--font-body);font-size:.95rem;color:var(--color-gray-800);background:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);transition:all .15s}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-black);box-shadow:0 0 0 3px rgba(0,0,0,.1)}.form-textarea{min-height:100px;resize:vertical}
.status{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:500;border-radius:var(--radius-full)}.status-pending{background:var(--color-gray-100);color:var(--color-gray-600)}.status-generating{background:#fef3c7;color:#92400e}.status-completed{background:#dcfce7;color:#166534}.status-failed{background:#fee2e2;color:#991b1b}
.spinner{width:20px;height:20px;border:2px solid var(--color-gray-200);border-top-color:var(--color-black);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.tabs{display:flex;gap:var(--space-xs);border-bottom:1px solid var(--color-gray-200);margin-bottom:var(--space-xl)}.tab{padding:var(--space-md) var(--space-lg);font-size:.9rem;font-weight:500;color:var(--color-gray-500);background:none;border:none;cursor:pointer;position:relative;transition:color .15s;text-decoration:none}.tab:hover{color:var(--color-gray-700)}.tab.active{color:var(--color-black)}.tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--color-black)}
.steps{display:flex;justify-content:center;gap:var(--space-sm)}.step{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:.85rem;font-weight:500;color:var(--color-gray-400);background:var(--color-gray-100);border-radius:var(--radius-full)}.step.active{background:var(--color-black);color:var(--color-white)}.step.completed{background:var(--color-success);color:var(--color-white)}.step-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border-radius:50%;font-size:.75rem}
.empty-state{text-align:center;padding:var(--space-3xl);color:var(--color-gray-500)}.empty-state h3{color:var(--color-gray-700);margin-bottom:var(--space-sm)}
.toast-container{position:fixed;bottom:var(--space-xl);right:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);z-index:2000}.toast{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--color-gray-900);color:var(--color-white);border-radius:var(--radius-md);box-shadow:0 10px 15px -3px rgb(0 0 0/.1);animation:slideIn .25s ease}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.toast-success{border-left:4px solid var(--color-success)}.toast-error{border-left:4px solid var(--color-error)}
.text-center{text-align:center}.text-muted{color:var(--color-gray-500)}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.hidden{display:none!important}.suggestions{display:flex;flex-wrap:wrap;gap:var(--space-xs)}