:root{--primary: #6366f1;--bg: #f8fafc;--card: #ffffff;--text: #1e293b;--text-light: #64748b;--radius: 16px;--shadow: 0 10px 25px -5px rgba(0, 0, 0, .05), 0 8px 10px -6px rgba(0, 0, 0, .05)}.app-container{min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;padding-bottom:40px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(0,0,0,.05)}.logo{display:flex;align-items:center;gap:12px}.icon-main{color:var(--primary);filter:drop-shadow(0 0 8px rgba(99,102,241,.4))}.logo h1{font-size:1.25rem;font-weight:800;background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.cloud-status{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#10b981;background:#ecfdf5;padding:4px 12px;border-radius:20px}.content{max-width:900px;margin:40px auto;padding:0 20px;display:flex;flex-direction:column;gap:32px}.input-card{background:var(--card);padding:32px;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:24px}.input-group label,.mood-selector label{display:block;font-size:.875rem;font-weight:600;margin-bottom:8px;color:var(--text-light)}.input-group input{width:100%;padding:14px 18px;border-radius:12px;border:2px solid #e2e8f0;font-size:1rem;transition:all .2s}.input-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #6366f11a}.mood-chips{display:flex;flex-wrap:wrap;gap:10px}.mood-chips button{padding:8px 16px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;transition:all .2s;font-size:.875rem}.mood-chips button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.generate-btn{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:16px;border-radius:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .2s,opacity .2s}.generate-btn:hover{transform:translateY(-2px);opacity:.9}.generate-btn.loading{opacity:.7;cursor:not-allowed}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}.color-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a;cursor:pointer}.color-swatch{height:120px;position:relative;display:flex;align-items:center;justify-content:center}.copy-overlay{background:#0000004d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.75rem}.color-info{padding:12px;text-align:center}.color-name{display:block;font-weight:600;font-size:.875rem}.color-hex{font-size:.75rem;color:var(--text-light);font-family:monospace}.preview-container{margin-top:32px;background:#fff;padding:24px;border-radius:var(--radius);box-shadow:var(--shadow)}.preview-header{display:flex;align-items:center;gap:8px;margin-bottom:16px}.preview-images{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-box{aspect-ratio:2/1;background:#f1f5f9;border-radius:12px;overflow:hidden}.preview-box img{width:100%;height:100%;object-fit:cover}.img-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-light);font-size:.875rem}.img-placeholder span{font-size:2rem}.history-section{margin-top:16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header .title{display:flex;align-items:center;gap:8px}.clear-btn{background:none;border:none;color:#ef4444;font-size:.875rem;cursor:pointer;display:flex;align-items:center;gap:4px}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{background:#fff;padding:16px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s}.history-item:hover{background:#f1f5f9}.history-meta strong{display:block;font-size:.95rem}.history-meta span{font-size:.75rem;color:var(--text-light)}.history-colors{display:flex;gap:4px}.mini-swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.05)}.app-footer{text-align:center;margin-top:40px;color:var(--text-light);font-size:.875rem;display:flex;align-items:center;justify-content:center;gap:6px}