.hooking-container{max-width:1400px;min-height:100vh;margin:0 auto;padding:20px}.hooking-header{text-align:center;margin-bottom:30px}.hooking-header h1{color:#000;margin-bottom:10px;font-size:2.5rem}.hooking-header p{opacity:.7;color:#666;font-size:1.1rem}.hooking-main{flex-direction:column;gap:30px;display:flex}.usage-guide{background:linear-gradient(135deg,#f0f4ff 0%,#f8f0ff 100%);border:1px solid #ddd6fe;border-radius:20px;padding:28px 30px}.usage-guide h2{color:#4338ca;margin-bottom:18px;font-size:1.3rem}.guide-steps{flex-direction:column;gap:16px;display:flex}.guide-step{align-items:flex-start;gap:14px;display:flex}.step-number{color:#fff;background:#667eea;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;margin-top:2px;font-size:.9rem;font-weight:700;display:flex}.step-content strong{color:#333;margin-bottom:4px;font-size:1rem;display:block}.step-content p{color:#555;margin:0;font-size:.9rem;line-height:1.6}.step-content em{color:#667eea;font-style:normal;font-weight:600}.generation-section{background:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:30px;box-shadow:0 2px 10px #0000001a}.generation-section h2{color:#333;margin-bottom:20px;font-size:1.5rem}.category-buttons{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.category-btn{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:10px;padding:14px 12px;font-size:.95rem;font-weight:600;transition:all .3s}.category-btn:hover{border-color:#667eea;transform:translateY(-2px)}.category-btn.active{color:#fff;background:#667eea;border-color:#667eea}.keyword-suggestions{margin-top:12px}.keyword-suggestions-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.keyword-suggestions-label{color:#555;font-size:.9rem;font-weight:600}.shuffle-btn{color:#667eea;cursor:pointer;background:#fff;border:1px solid #667eea;border-radius:20px;padding:6px 14px;font-size:.8rem;font-weight:600;transition:all .2s}.shuffle-btn:hover{color:#fff;background:#667eea}.keyword-chips{flex-wrap:wrap;gap:8px;display:flex}.keyword-chip{color:#667eea;cursor:pointer;background:#fff;border:2px solid #667eea;border-radius:20px;padding:7px 16px;font-size:.85rem;font-weight:600;transition:all .2s}.keyword-chip:hover{background:#667eea1a;transform:translateY(-1px)}.keyword-chip.active{color:#fff;background:#667eea}.generate-btn{width:100%;margin-top:10px}.generate-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.error-message{color:#e74c3c;margin-top:12px;font-weight:600}.hookings-list{margin-top:24px}.hookings-list h3{color:#555;margin-bottom:14px;font-size:1.2rem}.hooking-card{background:#f9f9fb;border:1px solid #e8e8ee;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding:14px 18px;transition:box-shadow .2s;display:flex}.hooking-card:hover{box-shadow:0 2px 8px #667eea26}.hooking-text-row{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.hooking-text{color:#222;word-break:keep-all;font-size:1.05rem;font-weight:500}.length-badge{color:#2e7d32;background:#e8f5e9;border-radius:20px;flex-shrink:0;padding:3px 10px;font-size:.8rem;font-weight:700}.length-badge.over{color:#c62828;background:#fce4ec}.hooking-actions{flex-shrink:0;gap:8px;display:flex}.action-btn{cursor:pointer;border:none;border-radius:8px;padding:8px 14px;font-size:.85rem;font-weight:600;transition:all .2s}.copy-btn{color:#4338ca;background:#e0e7ff}.copy-btn:hover{background:#c7d2fe}.card-btn{color:#fff;background:#667eea}.card-btn:hover{background:#5568d3}.card-maker-section{background:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:30px;box-shadow:0 2px 10px #0000001a}.card-maker-section h2{color:#333;margin-bottom:20px;font-size:1.5rem}.card-editor{grid-template-columns:1fr 450px;align-items:start;gap:30px;display:grid}.preview-section,.controls-section{flex-direction:column;display:flex}.preview-section{position:sticky;top:20px}.preview-section h3,.controls-section h3:first-child{color:#333;margin-bottom:16px;font-size:1.3rem}#hooking-canvas{border:2px solid #e0e0e0;border-radius:10px;width:100%;max-width:100%;height:auto;box-shadow:0 4px 12px #0000001a}.section-divider{border:none;border-top:2px solid #e0e0e0;margin:30px 0 20px}.section-title{color:#555;margin-bottom:15px;font-size:1.2rem;font-weight:700}.control-group{margin-bottom:20px}.control-group label{color:#555;margin-bottom:8px;font-weight:600;display:block}.control-group input[type=text],.control-group textarea,.control-group select,.control-group input[type=file]{border:2px solid #e0e0e0;border-radius:8px;width:100%;padding:10px;font-size:1rem;transition:border-color .3s}.control-group input[type=file]{cursor:pointer;padding:8px}.control-group input[type=file]::-webkit-file-upload-button{color:#fff;cursor:pointer;background:#667eea;border:none;border-radius:6px;margin-right:10px;padding:8px 16px}.control-group input[type=file]::-webkit-file-upload-button:hover{background:#5568d3}.control-group textarea{resize:vertical;min-height:80px;max-height:200px;font-family:inherit;overflow-y:auto}.control-group input[type=text]:focus,.control-group textarea:focus,.control-group select:focus{border-color:#667eea;outline:none}.char-count{text-align:right;color:#999;margin-top:5px;font-size:.9rem;display:block}.color-picker-wrapper{flex-direction:column;gap:10px;display:flex}.control-group input[type=color]{cursor:pointer;border:2px solid #e0e0e0;border-radius:8px;width:100%;height:50px}.brand-colors{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.color-btn{aspect-ratio:1;cursor:pointer;border:2px solid #e0e0e0;border-radius:6px;width:100%;transition:all .2s}.color-btn:hover{border-color:#667eea;transform:scale(1.1);box-shadow:0 2px 8px #00000026}.control-group input[type=range]{cursor:pointer;-webkit-appearance:none;background:#e0e0e0;border-radius:5px;outline:none;width:100%;height:8px}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#667eea;border-radius:50%;width:20px;height:20px}.control-group input[type=range]::-moz-range-thumb{cursor:pointer;background:#667eea;border:none;border-radius:50%;width:20px;height:20px}.preset-buttons{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.preset-btn{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:12px;font-size:.95rem;transition:all .3s}.preset-btn:hover{border-color:#667eea;transform:translateY(-2px)}.preset-btn.active{color:#fff;background:#667eea;border-color:#667eea}.action-buttons{gap:10px;margin-top:30px;display:flex}.primary-btn,.secondary-btn{color:#fff;cursor:pointer;border:none;border-radius:10px;flex:1;padding:15px 30px;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.primary-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.secondary-btn{background:#6b6b6b;margin-top:10px;padding:10px 20px;font-size:.95rem}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.secondary-btn:hover{background:#555}@media (max-width:1024px){.card-editor{grid-template-columns:1fr}.preview-section{align-items:center;position:static}#hooking-canvas{max-width:500px}}@media (max-width:768px){.hooking-header h1{font-size:1.8rem}.category-buttons{grid-template-columns:repeat(2,1fr)}.hooking-card{flex-direction:column;align-items:flex-start}.hooking-actions{width:100%}.action-btn{text-align:center;flex:1}}