*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f7fa;color:#333;line-height:1.6}.app{min-height:100vh;max-width:1400px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:30px}.header-content{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:10px}.logo{width:60px;height:60px;border-radius:8px}.header h1{margin:0;color:#0684fb;font-size:2.5em}.header p{color:#666;margin-bottom:15px}hr{border:none;border-top:2px solid #0684fb;margin:20px 0}.main-container{display:grid;grid-template-columns:300px 1fr;gap:30px}.sidebar{background:white;padding:25px;border-radius:12px;box-shadow:0 4px 6px #0000001a;height:-moz-fit-content;height:fit-content}.sidebar h2{color:#0684fb;margin-bottom:20px;font-size:1.3em}.status{margin-bottom:20px}.status-success{background:#d4edda;color:#155724;padding:10px;border-radius:6px;margin-bottom:10px;font-size:.9em}.status-error{background:#f8d7da;color:#721c24;padding:10px;border-radius:6px;margin-bottom:10px;font-size:.9em}.config-section{display:flex;flex-direction:column;gap:15px}.config-section label{display:flex;flex-direction:column;gap:5px}.config-section select{padding:10px;border:2px solid #0684fb;border-radius:6px;background:white;font-size:14px}.checkbox-label{flex-direction:row!important;align-items:center;gap:10px!important}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:#0684fb}.features h3{color:#0684fb;margin-bottom:15px}.features ul{list-style:none;padding-left:0}.features li{padding:8px 0;border-bottom:1px solid #eee}.features li:before{content:"•";color:#0684fb;font-weight:700;display:inline-block;width:1em;margin-left:-1em}.main-content{background:white;padding:30px;border-radius:12px;box-shadow:0 4px 6px #0000001a}.input-columns{display:grid;grid-template-columns:2fr 1fr;gap:30px}.input-group{margin-bottom:20px}.input-group label{display:block;margin-bottom:8px;font-weight:600;color:#333}.text-input,.text-area{width:100%;padding:12px;border:2px solid #e1e5e9;border-radius:8px;font-size:14px;transition:border-color .3s}.text-input:focus,.text-area:focus{outline:none;border-color:#0684fb;box-shadow:0 0 0 3px #0684fb1a}.text-area{resize:vertical;min-height:100px}.generate-btn{width:100%;padding:15px;background:#0684fb;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s}.generate-btn:hover:not(:disabled){background:#0566d6}.generate-btn:disabled{background:#ccc;cursor:not-allowed}.generate-btn.primary{background:#0684fb}.tips-col{background:#f8f9fa;padding:20px;border-radius:8px}.tips-col h2{color:#0684fb;margin-bottom:20px}.tips h4{color:#333;margin:15px 0 8px}.tips ul{list-style:none;padding-left:0}.tips li{padding:5px 0;color:#666}.tips li:before{content:"•";color:#0684fb;font-weight:700;display:inline-block;width:1em;margin-left:-1em}.results-section{margin-top:30px}.results-columns{display:grid;grid-template-columns:2fr 1fr;gap:30px}.content-col h3,.image-col h3{color:#0684fb;margin-bottom:15px;margin-top:25px}.content-col h3:first-child{margin-top:0}.content-box{background:#e8f4ff;padding:15px;border-radius:8px;border-left:4px solid #0684fb;font-weight:600}.content-textarea,.copy-textarea{width:100%;padding:15px;border:2px solid #e1e5e9;border-radius:8px;background:#f8f9fa;font-family:inherit;font-size:14px;resize:vertical}.hashtags{background:#f8f9fa;padding:15px;border-radius:8px;font-family:monospace;border:1px solid #e1e5e9}.secondary-btn{width:100%;padding:12px;background:white;color:#0684fb;border:2px solid #0684fb;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;margin-top:10px}.secondary-btn:hover:not(:disabled){background:#0684fb;color:#fff}.secondary-btn:disabled{opacity:.6;cursor:not-allowed}.generated-image{width:100%;border-radius:8px;border:2px solid #e1e5e9;margin-bottom:15px}.cloudinary-success{background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;padding:15px;margin:15px 0}.success-message{color:#155724;font-weight:600;margin-bottom:10px}.url-display code{background:#f8f9fa;padding:8px;border-radius:4px;font-size:12px;word-break:break-all;display:block;margin-top:8px}.loading{text-align:center;padding:20px;color:#0684fb;font-style:italic}.instructions{margin-top:30px;padding:20px;background:#f8f9fa;border-radius:8px}.instructions h4{color:#333;margin-bottom:15px}.instructions ol{margin-left:20px;margin-bottom:20px}.instructions li{margin-bottom:8px;color:#666}.linkedin-btn{display:block;text-align:center;padding:12px;background:#0684fb;color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:background-color .3s}.linkedin-btn:hover{background:#0566d6}.setup-instructions{padding:40px;text-align:center}.setup-instructions h2{color:#0684fb;margin-bottom:20px}.instructions h3{color:#333;margin:25px 0 15px;text-align:left}.instructions ul{text-align:left;margin-left:20px;margin-bottom:20px}.footer{text-align:center;margin-top:40px;color:#666}@media (max-width: 1024px){.main-container,.input-columns,.results-columns{grid-template-columns:1fr}.app{padding:15px}}@media (max-width: 768px){.header-content{flex-direction:column;text-align:center}.header h1{font-size:2em}.main-content{padding:20px}}.toast-container{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px}.toast{padding:12px 20px;border-radius:8px;color:#fff;font-weight:500;box-shadow:0 4px 12px #00000026;animation:slideIn .3s ease-out;max-width:300px;word-wrap:break-word}.toast-success{background:linear-gradient(135deg,#10b981,#059669);border-left:4px solid #047857}.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626);border-left:4px solid #b91c1c}.toast-info{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-left:4px solid #1e40af}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast.fade-out{animation:slideOut .3s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.user-info{display:flex;align-items:center;gap:15px;padding:10px 20px}.user-info span{color:#666;font-size:14px}.logout-btn{background:#667eea;color:#fff;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600}.logout-btn:hover{background:#5568d3}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px}.auth-card{background:white;border-radius:16px;padding:40px;max-width:480px;width:100%;box-shadow:0 20px 60px #0000004d}.auth-header{text-align:center;margin-bottom:30px}.auth-logo{width:60px;height:60px;margin-bottom:10px}.auth-header h1{font-size:28px;font-weight:700;color:#333;margin:0 0 8px}.auth-header p{color:#666;font-size:16px;margin:0}.auth-form{display:flex;flex-direction:column;gap:6px}.name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.input-group{display:flex;flex-direction:column;gap:6px;min-width:0}.input-group label{font-size:14px;font-weight:600;color:#333}.input-group input{padding:12px 16px;border:2px solid #e1e8ed;border-radius:8px;font-size:15px;transition:border-color .2s;outline:none;width:100%;box-sizing:border-box}.input-group input:focus{border-color:#667eea}.error-message{background:#fee;color:#c33;padding:12px;border-radius:8px;font-size:14px;text-align:center}.submit-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:14px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,opacity .2s;margin-top:8px}.submit-btn:hover{transform:translateY(-1px)}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.toggle-auth{text-align:center;margin-top:24px;color:#666}.toggle-btn{background:none;border:none;color:#667eea;font-weight:600;cursor:pointer;font-size:15px}.toggle-btn:hover{text-decoration:underline}.auth-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}