:root{--color-orange: #ff7201;--color-blue: #17a2b8;--color-green: #28a745;--color-red: #dc3545;--color-gray: #6c757d;--color-dark-red-for-mix: #a02c00;--color-primary: var(--color-orange);--color-secondary: color-mix( in srgb, var(--color-primary) 75%, var(--color-dark-red-for-mix) );--color-accent: var(--color-blue);--color-accent-dark: color-mix(in oklch, var(--color-accent) 80%, black);--color-info: var(--color-blue);--color-success: var(--color-green);--color-success-dark: color-mix(in oklch, var(--color-success) 80%, black);--color-danger: var(--color-red);--color-danger-dark: color-mix(in oklch, var(--color-danger) 80%, black);--color-text-muted: var(--color-gray);--color-text-dark: #343a40;--color-text-body: #333;--color-text-light: #555;--color-light: #f8f9fa;--color-lighter: #fff9f0;--color-background: #ffffff;--color-border: #e8e4df;--color-border-light: #ffeccc;--color-border-input: #d1ccc7;--color-error-bg: #fef2f2;--color-error-border: #fecaca;--color-error-text: #991b1b;--color-warning-bg: #fffbeb;--color-warning-border: #fde68a;--color-warning-text: #92400e;--color-info-bg: #f0f9ff;--color-info-border: #bae6fd;--color-success-bg: #f0fdf4;--color-success-border: #bbf7d0;--font-family-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-headings: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-base: 1rem;--font-size-small: .875rem;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .06), 0 2px 4px -1px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 10px 10px -5px rgba(0, 0, 0, .03);--shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, .15);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box}body{font-family:var(--font-family-base);line-height:1.6;margin:0;padding:var(--spacing-6);background-color:#f5f3ef;background-image:radial-gradient(circle at 20% 50%,rgba(255,114,1,.03) 0%,transparent 50%),radial-gradient(circle at 80% 0%,rgba(23,162,184,.03) 0%,transparent 40%);color:var(--color-text-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:800px;margin:var(--spacing-6) auto;background:var(--color-background);padding:var(--spacing-10) var(--spacing-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}.container:has(.graphics-generator-container){max-width:1400px}@media (max-width: 640px){body{padding:var(--spacing-2);background-image:none}.container{margin:var(--spacing-2) auto;padding:var(--spacing-6) var(--spacing-4);border-radius:var(--radius-lg)}}h1,h2,h3,h4{font-family:var(--font-family-headings);color:var(--color-text-dark);line-height:1.2;letter-spacing:-.01em}h1{text-align:center;font-size:1.75rem;font-weight:700;margin-bottom:var(--spacing-6);color:var(--color-primary);display:flex;align-items:center;justify-content:center;gap:var(--spacing-3)}h2{font-size:1.35rem;font-weight:600;margin-bottom:var(--spacing-5);display:flex;align-items:center;gap:var(--spacing-2)}h3{font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-4)}h1 i,h2 i,h3 i{color:var(--color-primary);font-size:.85em;opacity:.9}.app-header{text-align:center;margin-bottom:var(--spacing-6);padding-bottom:var(--spacing-5);border-bottom:1px solid var(--color-border)}.app-header h1{margin-bottom:var(--spacing-2)}.app-subtitle{margin:0;color:var(--color-text-muted);font-size:.9rem;font-weight:500;letter-spacing:.02em}.logo{height:2.2em;vertical-align:middle;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));transition:transform var(--transition-base)}.logo:hover{transform:scale(1.05)}.initial-prompt{text-align:center;padding:var(--spacing-6) 0 var(--spacing-8);margin-bottom:var(--spacing-6)}.initial-prompt h2{justify-content:center;margin-bottom:var(--spacing-2);font-size:1.5rem}.initial-prompt .subtitle{color:var(--color-text-light);font-size:var(--font-size-small);margin-bottom:var(--spacing-8)}.choice-container{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-5);max-width:100%}@media (max-width: 768px){.choice-container{grid-template-columns:1fr;gap:var(--spacing-4)}}.choice-option{text-align:center;display:flex;flex-direction:column}.choice-card{background:var(--color-background);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-6);transition:all var(--transition-base);cursor:pointer;height:100%;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3)}.choice-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md),0 0 0 1px #ff72011a;transform:translateY(-3px)}.choice-card:active{transform:translateY(-1px)}.choice-card .icon-circle{width:56px;height:56px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:0 4px 12px #ff720140;margin-bottom:var(--spacing-2)}.choice-card h3{margin:0;font-size:1.1rem;color:var(--color-text-dark)}.choice-card p{margin:0;font-size:var(--font-size-small);color:var(--color-text-light);line-height:1.5;flex:1}.choice-card .arrow-hint{color:var(--color-primary);font-size:.9rem;opacity:0;transform:translate(-4px);transition:all var(--transition-base);margin-top:auto;padding-top:var(--spacing-2)}.choice-card:hover .arrow-hint{opacity:1;transform:translate(0)}.initial-choice-btn,.choice-description{display:none}.email-form{margin-bottom:var(--spacing-6)}label{display:block;margin-bottom:var(--spacing-2);font-weight:600;font-size:.9rem;color:var(--color-text-dark);letter-spacing:.01em}input[type=text],input[type=email],select,textarea{width:100%;padding:var(--spacing-3) var(--spacing-4);margin-bottom:var(--spacing-5);border:1.5px solid var(--color-border-input);border-radius:var(--radius-md);box-sizing:border-box;font-size:var(--font-size-base);font-family:var(--font-family-base);background:var(--color-background);color:var(--color-text-body);transition:all var(--transition-base);box-shadow:inset 0 1px 2px #0000000a}input[type=text]:hover,select:hover,textarea:hover{border-color:#b8b3ae}input[type=text]:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff72011f,inset 0 1px 2px #0000000a;outline:none}textarea{resize:vertical;min-height:80px;line-height:1.5}input[type=checkbox]{margin-right:var(--spacing-2);vertical-align:middle;width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}label[for=addContext]{display:inline-flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-5);font-weight:400;cursor:pointer;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-sm);background:var(--color-light);border:1px solid var(--color-border);transition:all var(--transition-fast)}label[for=addContext]:hover{background:var(--color-lighter);border-color:var(--color-border-light)}.form-step{display:none;padding:var(--spacing-5) 0;margin-bottom:var(--spacing-5)}.form-step:last-of-type{margin-bottom:0}.form-step.active-step{display:block;animation:stepFadeIn .3s ease-out}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.form-step h3{margin-top:0;padding-bottom:var(--spacing-2);margin-bottom:var(--spacing-5);display:inline-flex;align-items:center;gap:var(--spacing-2);color:var(--color-primary);font-size:1.15rem;border-bottom:2px solid var(--color-primary)}.progress-indicator{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);margin-bottom:var(--spacing-6);padding:var(--spacing-3) var(--spacing-5);background:var(--color-light);border-radius:var(--radius-full);font-weight:600;font-size:.85rem;color:var(--color-text-muted);border:1px solid var(--color-border)}.step-dots{display:flex;gap:var(--spacing-1);margin-right:var(--spacing-2)}.step-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-border-input);transition:all var(--transition-base)}.step-dot.active{background:var(--color-primary);box-shadow:0 0 0 2px #ff720133}.step-dot.completed{background:var(--color-success)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--color-danger);box-shadow:0 0 0 3px #dc35451a}input[aria-invalid=true]:focus,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px #dc354526}.validation-error{background:var(--color-error-bg);color:var(--color-error-text);border:1px solid var(--color-error-border);padding:var(--spacing-3) var(--spacing-4);margin-bottom:var(--spacing-5);border-radius:var(--radius-md);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:var(--spacing-2);animation:shakeIn .3s ease-out}@keyframes shakeIn{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.validation-error i{font-size:1.1em;flex-shrink:0}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-5);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-base);font-family:var(--font-family-base);font-weight:600;transition:all var(--transition-base);position:relative;overflow:hidden}button:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#fff0;transition:background var(--transition-fast)}button:hover:after{background:#ffffff14}button:active{transform:scale(.97)}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button i{font-size:.9em}button.primary,.initial-choice-btn{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;box-shadow:0 2px 8px #ff720140,0 1px 2px #0000000d}button.primary:hover,.initial-choice-btn:hover{box-shadow:0 4px 16px #ff720159,0 2px 4px #00000014;transform:translateY(-1px)}button.next-btn{background:linear-gradient(135deg,#0d6efd,#0a58ca);color:#fff;box-shadow:0 2px 8px #0d6efd33}button.next-btn:hover{box-shadow:0 4px 16px #0d6efd4d;transform:translateY(-1px)}button.generate-btn{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;padding:var(--spacing-3) var(--spacing-6);font-size:1.05rem;box-shadow:0 2px 12px #ff72014d}button.generate-btn:hover{box-shadow:0 6px 20px #ff720166;transform:translateY(-2px)}button.prev-btn,button.ghost{background:transparent;color:var(--color-text-muted);border:1.5px solid var(--color-border);box-shadow:none}button.prev-btn:hover,button.ghost:hover{background:var(--color-light);border-color:var(--color-border-input);color:var(--color-text-dark)}button.add-btn{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));color:#fff;box-shadow:0 2px 8px #17a2b833}button.add-btn:hover{box-shadow:0 4px 16px #17a2b84d;transform:translateY(-1px)}button#copyButton{background:linear-gradient(135deg,var(--color-success),var(--color-success-dark));color:#fff;box-shadow:0 2px 8px #28a74533}button#copyButton:hover{box-shadow:0 4px 16px #28a7454d;transform:translateY(-1px)}.navigation-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-8);padding-top:var(--spacing-5);border-top:1px solid var(--color-border)}.navigation-buttons:not(:has(.prev-btn)){justify-content:flex-end}.navigation-buttons :is(.next-btn,.generate-btn){margin-left:auto}#quoteEntriesContainer{margin-bottom:var(--spacing-5)}.quote-entry{background:var(--color-light);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-5);margin-bottom:var(--spacing-4);position:relative;transition:all var(--transition-base)}.quote-entry:hover{border-color:var(--color-border-input);box-shadow:var(--shadow-sm)}.quote-entry label{font-size:var(--font-size-small);font-weight:500;color:var(--color-text-muted);margin-bottom:var(--spacing-1)}.quote-entry textarea{margin-bottom:var(--spacing-2);min-height:40px;background:var(--color-background)}.remove-quote-btn{position:absolute;top:var(--spacing-3);right:var(--spacing-3);background:var(--color-danger);color:#fff;border:none;border-radius:var(--radius-full);width:28px;height:28px;font-size:.85em;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #dc35454d;transition:all var(--transition-base)}.remove-quote-btn:hover{background:var(--color-danger-dark);transform:scale(1.1);box-shadow:0 4px 12px #dc354566}.remove-quote-btn i{margin:0}.tags-input-container{margin-bottom:var(--spacing-5)}.tags-display{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-bottom:var(--spacing-3);min-height:44px;padding:var(--spacing-2) var(--spacing-3);background:var(--color-light);border:1.5px solid var(--color-border-input);border-radius:var(--radius-md);transition:all var(--transition-base)}.tags-display:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff72011a}.tag{display:inline-flex;align-items:center;gap:var(--spacing-1);background:linear-gradient(135deg,var(--color-gray),#5a6268);color:#fff;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-full);font-size:.85rem;font-weight:500;transition:all var(--transition-base);box-shadow:0 1px 3px #0000001a}.tag:hover{background:linear-gradient(135deg,var(--color-secondary),var(--color-dark-red-for-mix));transform:translateY(-1px);box-shadow:0 2px 6px #ff720140}.tag-remove-btn{background:none;border:none;color:#fff;font-size:1.1em;line-height:1;cursor:pointer;padding:0;margin:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition:all var(--transition-fast)}.tag-remove-btn:hover{background:#fff3}.tag-input-wrapper{display:flex;gap:var(--spacing-2)}.tag-input{flex:1;padding:var(--spacing-3);border:1.5px solid var(--color-border-input);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:var(--font-family-base);transition:all var(--transition-base);height:44px;box-sizing:border-box;background:var(--color-background)}.tag-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #ff72011f;outline:none}.add-tag-btn{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));color:#fff;border:none;border-radius:var(--radius-md);padding:var(--spacing-2) var(--spacing-4);cursor:pointer;font-size:var(--font-size-base);font-weight:600;white-space:nowrap;height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #17a2b833}.add-tag-btn:hover:not(:disabled){box-shadow:0 4px 12px #17a2b84d;transform:translateY(-1px)}.add-tag-btn:active:not(:disabled){transform:scale(.97)}.add-tag-btn:disabled{background:var(--color-text-muted);cursor:not-allowed;opacity:.5;box-shadow:none}#outputArea{margin-top:var(--spacing-8);padding:var(--spacing-6);background:var(--color-lighter);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}#outputArea h3{margin-top:0;color:var(--color-text-dark);display:flex;align-items:center;gap:var(--spacing-2)}#outputArea h3 .fa-envelope{font-size:.9em;opacity:.85}#generatedSubject{font-weight:500;color:var(--color-text-dark);padding:var(--spacing-3) var(--spacing-4);background:var(--color-background);border-radius:var(--radius-md);border:1px solid var(--color-border);margin-bottom:var(--spacing-4);display:block}pre#generatedBody{background:var(--color-background);padding:var(--spacing-5);border:1.5px solid var(--color-border);border-radius:var(--radius-md);white-space:pre-wrap;word-wrap:break-word;font-family:var(--font-family-base);font-size:.95rem;line-height:1.7;margin-top:var(--spacing-2);margin-bottom:var(--spacing-5);max-height:500px;overflow-y:auto;color:var(--color-text-body);box-shadow:inset 0 1px 3px #0000000a}pre#generatedBody::-webkit-scrollbar{width:8px}pre#generatedBody::-webkit-scrollbar-track{background:var(--color-light);border-radius:4px}pre#generatedBody::-webkit-scrollbar-thumb{background:var(--color-border-input);border-radius:4px}pre#generatedBody::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.reminder{background:var(--color-warning-bg);color:var(--color-warning-text);border:1px solid var(--color-warning-border);padding:var(--spacing-3) var(--spacing-4);margin-bottom:var(--spacing-5);border-radius:var(--radius-md);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:var(--spacing-2);box-shadow:var(--shadow-sm)}.reminder i{font-size:1.2em;flex-shrink:0}.final-reminder{margin-top:var(--spacing-5);padding:var(--spacing-3) var(--spacing-4);background:var(--color-error-bg);border:1px solid var(--color-error-border);border-radius:var(--radius-md);color:var(--color-error-text);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:var(--spacing-2)}.final-reminder i{font-size:1.1em;flex-shrink:0}.copy-status{display:inline-flex;align-items:center;gap:var(--spacing-1);margin-left:var(--spacing-2);font-size:var(--font-size-small);font-weight:600;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);transition:all var(--transition-base)}.copy-status.success{color:var(--color-success);background:var(--color-success-bg)}.copy-status.error{color:var(--color-danger);background:var(--color-error-bg)}.info-text{font-size:var(--font-size-small);color:var(--color-text-muted);margin-top:var(--spacing-1);display:flex;align-items:flex-start;gap:var(--spacing-1)}.info-text i{margin-top:.15em;flex-shrink:0;color:var(--color-accent)}.start-over-btn{float:right;margin-left:var(--spacing-3);margin-top:-4px;margin-bottom:var(--spacing-2);background:transparent;color:var(--color-text-muted);padding:var(--spacing-1) var(--spacing-3);font-size:.85rem;font-weight:500;border:1.5px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;display:inline-flex;align-items:center;gap:var(--spacing-1);transition:all var(--transition-base)}.start-over-btn:hover{background:var(--color-light);border-color:var(--color-border-input);color:var(--color-text-dark);transform:translateY(-1px)}.start-over-btn i{font-size:.85em}.saved-status-indicator{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3) var(--spacing-4);background:var(--color-background);border:1.5px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-5);font-size:var(--font-size-small);position:relative;transition:all var(--transition-base)}.saved-status-indicator:hover{border-color:var(--color-border-input)}.status-text{display:flex;align-items:center;gap:var(--spacing-2);font-weight:500}.status-text.ready{color:var(--color-text-muted)}.status-text.saving{color:var(--color-info)}.status-text.saved{color:var(--color-success)}.status-text.error{color:var(--color-danger)}.clear-saved-btn{background:transparent;color:var(--color-text-muted);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-1) var(--spacing-2);font-size:.8rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:var(--spacing-1);transition:all var(--transition-fast)}.clear-saved-btn:hover{background:var(--color-error-bg);border-color:var(--color-error-border);color:var(--color-danger)}.clear-saved-btn i{font-size:.9em;margin:0}.clear-confirm-dialog{position:absolute;top:calc(100% + var(--spacing-2));right:0;background:var(--color-background);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-5);box-shadow:var(--shadow-dialog);z-index:1000;min-width:280px;animation:dialogSlideIn .2s ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.clear-confirm-dialog p{margin:0 0 var(--spacing-4) 0;font-size:.9rem;color:var(--color-text-dark);line-height:1.5}.confirm-buttons{display:flex;gap:var(--spacing-2);justify-content:flex-end}.confirm-yes{background:linear-gradient(135deg,var(--color-danger),var(--color-danger-dark));color:#fff;border:none;border-radius:var(--radius-sm);padding:var(--spacing-2) var(--spacing-3);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.confirm-yes:hover{box-shadow:0 4px 12px #dc35454d;transform:translateY(-1px)}.confirm-no{background:transparent;color:var(--color-text-muted);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-2) var(--spacing-3);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.confirm-no:hover{background:var(--color-light);color:var(--color-text-dark)}.restore-prompt{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1.5px solid #bae6fd;border-radius:var(--radius-lg);padding:var(--spacing-5);margin-bottom:var(--spacing-5);display:flex;align-items:center;gap:var(--spacing-4);flex-wrap:wrap;box-shadow:var(--shadow-sm)}.restore-prompt-icon{font-size:1.6rem;color:var(--color-accent);flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-info-bg);border-radius:var(--radius-full)}.restore-prompt-text{display:flex;flex-direction:column;gap:var(--spacing-1);flex:1;min-width:200px}.restore-prompt-text strong{color:var(--color-text-dark);font-size:1rem;font-weight:600}.restore-prompt-text span{color:var(--color-text-light);font-size:var(--font-size-small)}.restore-prompt-actions{display:flex;gap:var(--spacing-2);flex-shrink:0}.restore-resume-btn{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));color:#fff;padding:var(--spacing-2) var(--spacing-4);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-base);font-weight:600;transition:all var(--transition-base);display:inline-flex;align-items:center;gap:var(--spacing-1);box-shadow:0 2px 8px #17a2b833}.restore-resume-btn:hover{box-shadow:0 4px 16px #17a2b84d;transform:translateY(-1px)}.restore-start-fresh-btn{background:transparent;color:var(--color-text-muted);padding:var(--spacing-2) var(--spacing-4);border:1.5px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-base);font-weight:500;transition:all var(--transition-base);display:inline-flex;align-items:center;gap:var(--spacing-1)}.restore-start-fresh-btn:hover{background:var(--color-light);border-color:var(--color-border-input);color:var(--color-text-dark)}.email-preview{border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-5);margin-top:var(--spacing-6);background:var(--color-background);box-shadow:var(--shadow-md);transition:all var(--transition-base)}.email-preview:hover{box-shadow:var(--shadow-lg)}.email-preview h3{margin-top:0;margin-bottom:var(--spacing-4);color:var(--color-primary);font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:var(--spacing-2)}.email-preview h3 .fa-eye{font-size:.9em;opacity:.85}.preview-section{margin-bottom:var(--spacing-4)}.preview-section:last-child{margin-bottom:0}.preview-section h4{margin:0 0 var(--spacing-2) 0;color:var(--color-text-dark);font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding-bottom:var(--spacing-2);border-bottom:1px solid var(--color-border)}.preview-content{padding:var(--spacing-3);background:var(--color-light);border-radius:var(--radius-md);line-height:1.6;border:1px solid var(--color-border)}.preview-content p{margin:0 0 var(--spacing-2) 0}.preview-content p:last-child{margin-bottom:0}.preview-note{display:block;margin-top:var(--spacing-3);padding:var(--spacing-2) var(--spacing-3);background:var(--color-background);border:1px solid var(--color-info-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.85rem;line-height:1.4}.email-signature{margin-top:var(--spacing-3);padding-top:var(--spacing-3);border-top:1px solid var(--color-border);font-style:italic;color:var(--color-text-muted);font-size:.9rem}.email-signature div{margin:var(--spacing-1) 0}.preview-section.is-empty .preview-content{color:var(--color-text-muted);font-style:italic}.quote-preview{margin-bottom:var(--spacing-3);padding-bottom:var(--spacing-3);border-bottom:1px dashed var(--color-border)}.quote-preview:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.preview-toggle{display:flex;align-items:center;gap:var(--spacing-3);justify-content:flex-end;margin:var(--spacing-4) 0;padding:var(--spacing-2) var(--spacing-3);background:var(--color-lighter);border-radius:var(--radius-md);border:1.5px solid var(--color-border-light)}.preview-toggle label{margin:0;font-weight:600;color:var(--color-text-dark);font-size:.95em;order:-1;cursor:pointer}.preview-content.email-content{padding:var(--spacing-3);background:var(--color-background);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;line-height:1.5}pre.email-text{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:inherit;font-size:inherit;line-height:inherit;color:var(--color-text-body)}.toggle-switch-input{opacity:0;width:0;height:0;position:absolute}.toggle-switch-label{--toggle-w: 48px;--toggle-h: 26px;--toggle-pad: 3px;--toggle-knob: calc(var(--toggle-h) - (var(--toggle-pad) * 2));position:relative;display:inline-flex;align-items:center;width:var(--toggle-w);height:var(--toggle-h);cursor:pointer;-webkit-tap-highlight-color:transparent;flex-shrink:0}.toggle-switch-slider{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--color-border-input);border-radius:var(--radius-full);box-sizing:border-box;overflow:hidden;z-index:0;transition:background var(--transition-slow);box-shadow:inset 0 1px 3px #0000001a}.toggle-switch-slider:before{position:absolute;content:"";height:var(--toggle-knob);width:var(--toggle-knob);left:var(--toggle-pad);top:var(--toggle-pad);background:#fff;border-radius:var(--radius-full);box-sizing:border-box;z-index:1;transition:all var(--transition-base);box-shadow:0 1px 3px #0003}.toggle-switch-input:checked+.toggle-switch-slider{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary))}.toggle-switch-input:checked+.toggle-switch-slider:before{transform:translate(calc(var(--toggle-w) - var(--toggle-h)));box-shadow:0 1px 3px #00000026}.toggle-switch-input:focus-visible+.toggle-switch-slider{box-shadow:0 0 0 3px #ff720133,inset 0 1px 3px #0000001a}.toggle-switch-container{display:flex;align-items:center;gap:var(--spacing-3);justify-content:flex-end;margin-top:var(--spacing-5);color:var(--color-text-muted);padding:var(--spacing-2) var(--spacing-3);background:var(--color-light);border-radius:var(--radius-md);border:1px solid var(--color-border)}.toggle-switch-container>span{font-size:.9em;font-weight:500;order:-1}.graphics-generator-container{margin-top:var(--spacing-4)}.graphics-generator-header{margin-bottom:var(--spacing-8);display:flex;justify-content:flex-end;align-items:center}.graphics-generator-header .start-over-btn{float:none;margin:0}.graphics-generator-title-section{text-align:center;clear:both;padding:var(--spacing-6) 0;margin-bottom:var(--spacing-6);border-bottom:1px solid var(--color-border)}.graphics-generator-title-section h2{justify-content:center;margin-bottom:var(--spacing-2);font-size:1.5rem}.graphics-generator-title-section p{font-size:var(--font-size-base);color:var(--color-text-light);margin-top:0}.graphics-main-container{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--spacing-8);align-items:start;clear:both}@media (max-width: 1100px){.graphics-main-container{grid-template-columns:1fr;gap:var(--spacing-6)}}.graphics-left-panel{display:flex;flex-direction:column;gap:var(--spacing-6)}.graphics-right-panel{position:sticky;top:var(--spacing-6)}.graphics-right-panel h3{margin-bottom:var(--spacing-4);font-size:1.25rem;font-weight:600;color:var(--color-text-dark);display:flex;align-items:center;gap:var(--spacing-2)}.image-upload{width:100%}.upload-btn,.change-image-btn{width:100%;padding:var(--spacing-5);font-size:var(--font-size-base);font-family:var(--font-family-base);font-weight:600;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:0 2px 12px #ff720133;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2)}.upload-btn:hover,.change-image-btn:hover{box-shadow:0 6px 24px #ff72014d;transform:translateY(-2px)}.upload-btn i,.change-image-btn i{font-size:1.2em}.image-preview-container{position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}.image-preview{width:100%;height:auto;border-radius:var(--radius-lg);display:block}.change-image-btn{margin-top:var(--spacing-3);background:var(--color-light);color:var(--color-text-dark);border:1.5px solid var(--color-border);box-shadow:var(--shadow-sm)}.change-image-btn:hover{background:var(--color-lighter);border-color:var(--color-border-input);box-shadow:var(--shadow-md)}.story-form{background:var(--color-background);padding:var(--spacing-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1.5px solid var(--color-border);transition:all var(--transition-base)}.story-form:hover{box-shadow:var(--shadow-lg)}.story-form h2{margin-bottom:var(--spacing-5);font-size:1.25rem;font-weight:600;color:var(--color-text-dark);display:flex;align-items:center;gap:var(--spacing-2)}.story-form .form-group{margin-bottom:var(--spacing-5)}.story-form .form-group:last-child{margin-bottom:0}.story-form .form-group label{display:block;margin-bottom:var(--spacing-2);font-weight:600;font-size:var(--font-size-base);color:var(--color-text-dark)}.story-form .form-group input,.story-form .form-group textarea,.story-form .form-group select{width:100%;padding:var(--spacing-3);font-size:var(--font-size-base);font-family:var(--font-family-base);border:1.5px solid var(--color-border-input);border-radius:var(--radius-md);transition:all var(--transition-base);box-sizing:border-box;background:var(--color-light)}.story-form .form-group input:focus,.story-form .form-group textarea:focus,.story-form .form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #ff72011f;background:var(--color-background)}.story-form .form-group textarea{resize:vertical;min-height:80px}.download-btn{width:100%;padding:var(--spacing-5);font-size:1.1rem;font-family:var(--font-family-base);font-weight:600;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:0 4px 16px #ff720140;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2)}.download-btn:hover:not(:disabled){box-shadow:0 8px 30px #ff720159;transform:translateY(-2px)}.download-btn:disabled{background:var(--color-text-muted);cursor:not-allowed;opacity:.5;box-shadow:none}.download-btn i{font-size:1.1em}.canvas-container{background:var(--color-background);padding:var(--spacing-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1.5px solid var(--color-border);display:flex;justify-content:center;align-items:center;min-height:300px}.canvas-container canvas{border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}.preview-placeholder{background:var(--color-light);padding:var(--spacing-12) var(--spacing-8);border-radius:var(--radius-lg);box-shadow:inset 0 1px 3px #0000000d;border:2px dashed var(--color-border);text-align:center;color:var(--color-text-muted);font-size:1.1rem;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3);width:100%;transition:all var(--transition-base)}.preview-placeholder:hover{border-color:var(--color-primary);background:var(--color-lighter)}.preview-placeholder i{font-size:2rem;color:var(--color-border-input);transition:color var(--transition-base)}.preview-placeholder:hover i{color:var(--color-primary)}.form-incomplete-message{background:var(--color-background);padding:var(--spacing-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1.5px solid var(--color-border);margin-top:var(--spacing-6)}.form-incomplete-message p{margin:0 0 var(--spacing-3) 0;color:var(--color-text-dark);font-weight:600;display:flex;align-items:center;gap:var(--spacing-2)}.form-incomplete-message i{color:var(--color-primary);font-size:1.2em}.form-incomplete-message ul{margin:0;padding-left:var(--spacing-6);color:var(--color-text-light)}.form-incomplete-message li{margin-bottom:var(--spacing-2);position:relative}.form-incomplete-message li::marker{color:var(--color-primary)}.footer-text{text-align:center;font-size:.8rem;color:var(--color-text-muted);margin-top:var(--spacing-8);padding-top:var(--spacing-5);border-top:1px solid var(--color-border);font-style:italic}.no-ribbon{border-left:none!important}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{body{background:#fff;padding:0}.container{box-shadow:none;border:none;max-width:100%}.start-over-btn,.navigation-buttons,.toggle-switch-container,.preview-toggle{display:none!important}}