.cl-hero{padding:140px 24px 30px;text-align:center;position:relative;overflow:hidden}.cl-hero:before{content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(36,80,184,.13) 0,transparent 70%);pointer-events:none}.cl-hero h1{font-family:"Space Grotesk",var(--font-display);font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:16px}.cl-hero h1 span{background:linear-gradient(135deg,#2450b8,#3366d6 50%,#2450b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.cl-steps{justify-content:center;gap:0;margin:40px auto 0;max-width:640px;padding:0 32px}.cl-step,.cl-steps{display:flex;align-items:center}.cl-step{flex-direction:column;gap:8px;flex:1 1;position:relative}.cl-step:not(:last-child):after{content:"";position:absolute;top:18px;left:calc(50% + 20px);right:calc(-50% + 20px);height:1px;background:var(--border-light);transition:background .4s ease}.cl-step.completed:not(:last-child):after{background:rgba(36,80,184,.4)}.cl-step-num{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--text-muted);background:var(--bg-card);transition:all .35s var(--ease-out);position:relative;z-index:1}.cl-step.active .cl-step-num{background:rgba(36,80,184,.15);border-color:var(--accent);color:var(--accent-light);box-shadow:0 0 0 4px rgba(36,80,184,.08)}.cl-step.completed .cl-step-num{background:rgba(36,80,184,.18);border-color:var(--accent);color:var(--accent-light)}.cl-step-label{font-size:11px;color:var(--text-muted);font-weight:500;letter-spacing:.02em;white-space:nowrap}.cl-step.active .cl-step-label,.cl-step.completed .cl-step-label{color:var(--accent-light)}.cl-main{max-width:1440px;margin:0 auto;padding:0 48px 80px}.cl-mode-row{display:flex;align-items:center;gap:16px;margin-bottom:32px;flex-wrap:wrap}.cl-mode-label{font-size:13px;font-weight:600;color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.cl-mode-tabs{display:flex;background:var(--bg-card);border:1px solid var(--border-light);border-radius:10px;padding:4px;gap:4px}.cl-mode-tab{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .25s var(--ease-out);border:none;background:none;letter-spacing:.01em;white-space:nowrap}.cl-mode-tab:hover{color:var(--text-primary);background:var(--bg-card-hover)}.cl-mode-tab.active{background:rgba(36,80,184,.15);color:var(--accent-light);border:1px solid rgba(36,80,184,.2)}.cl-mode-tab svg{flex-shrink:0}.cl-mode-tip{margin-left:auto;font-size:12px;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:7px 12px;display:flex;align-items:center;gap:6px}.cl-layout{display:grid;grid-template-columns:1fr 1fr;grid-gap:32px;gap:32px;align-items:start}.cl-panel{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden}.cl-panel-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}.cl-panel-title{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}.cl-panel-title-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.7}.cl-panel-body{position:relative;z-index:1;padding:22px}.cl-form-col{min-width:0}.cl-field{margin-bottom:18px}.cl-field:last-child{margin-bottom:0}.cl-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.cl-label-text{font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase}.cl-label-opt{font-size:11px;color:var(--text-muted);font-style:italic;text-transform:none;letter-spacing:0}.cl-input,.cl-select,.cl-textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius);padding:11px 14px;font-size:14px;font-family:var(--font-body);color:var(--text-primary);outline:none;transition:all .2s ease;-moz-appearance:none;appearance:none;-webkit-appearance:none}.cl-input:focus,.cl-select:focus,.cl-textarea:focus{border-color:rgba(36,80,184,.45);background:var(--bg-card);box-shadow:0 0 0 3px rgba(36,80,184,.08)}.cl-input::placeholder,.cl-textarea::placeholder{color:var(--text-muted)}.cl-textarea{resize:vertical;min-height:90px;line-height:1.65}.cl-textarea.large{min-height:140px}.cl-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b93b0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}.cl-select option{background:var(--bg-card);color:var(--text-primary)}.cl-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}.cl-referral-section{display:none;margin-top:4px;padding:16px;background:rgba(36,80,184,.04);border:1px solid rgba(36,80,184,.12);border-radius:var(--radius);animation:slideDown .25s var(--ease-out)}.cl-referral-section.visible{display:block}@keyframes slideDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.cl-referral-title{font-size:11px;font-weight:700;color:var(--accent-light);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:6px}.cl-resume-zone{border:1.5px dashed var(--border-light);border-radius:var(--radius);padding:28px 20px;text-align:center;cursor:pointer;transition:all .25s ease;background:var(--bg-elevated);display:flex;flex-direction:column;align-items:center}.cl-resume-zone:hover{border-color:rgba(36,80,184,.35);background:rgba(36,80,184,.04)}.cl-resume-zone.dragover{border-color:var(--accent);background:rgba(36,80,184,.08)}.cl-resume-zone svg{color:var(--text-muted);margin-bottom:10px}.cl-resume-zone p{font-size:13px;color:var(--text-secondary);margin-bottom:4px}.cl-resume-zone span{font-size:11px;color:var(--text-muted)}.cl-upload-success{display:none;align-items:center;gap:10px;padding:12px 14px;background:rgba(95,212,163,.08);border:1px solid rgba(95,212,163,.2);border-radius:var(--radius)}.cl-upload-success.visible{display:flex}.cl-upload-success-info{flex:1 1;min-width:0}.cl-upload-success-name{font-size:13px;font-weight:600;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cl-upload-success-sub{font-size:11px;color:var(--text-muted)}.cl-upload-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;transition:color .2s;flex-shrink:0}.cl-upload-clear:hover{color:var(--red)}.cl-generate-wrap{margin-top:24px}.cl-generate-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;color:#fff;border:none;border-radius:100px;font-size:15px;font-weight:700;font-family:var(--font-body);cursor:pointer;letter-spacing:-.01em;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:radial-gradient(var(--grd-spread-x) var(--grd-spread-y) at var(--grd-pos-x) var(--grd-pos-y),var(--grd-c1) var(--grd-s1),var(--grd-c2) var(--grd-s2),var(--grd-c3) var(--grd-s3),var(--grd-c4) var(--grd-s4),var(--grd-c5) var(--grd-s5));box-shadow:0 0 20px rgba(36,80,184,.3),0 4px 16px rgba(36,80,184,.2);transition:--grd-pos-x .5s,--grd-pos-y .5s,--grd-spread-x .5s,--grd-spread-y .5s,--grd-c1 .5s,--grd-c2 .5s,--grd-c3 .5s,--grd-c4 .5s,--grd-c5 .5s,--grd-s1 .5s,--grd-s2 .5s,--grd-s3 .5s,--grd-s4 .5s,--grd-s5 .5s,--grd-border-angle .5s,--grd-border-c1 .5s,--grd-border-c2 .5s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}.cl-generate-btn:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--grd-border-angle),var(--grd-border-c1),var(--grd-border-c2));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.cl-generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 30px rgba(36,80,184,.5),0 8px 32px rgba(36,80,184,.3);--grd-pos-x:0%;--grd-pos-y:91.51%;--grd-spread-x:120.24%;--grd-spread-y:103.18%;--grd-c1:#5b8def;--grd-c2:#3a6ed4;--grd-c3:#2450b8;--grd-c4:#0a1a3a;--grd-c5:#000;--grd-s1:0%;--grd-s2:8.8%;--grd-s3:21.44%;--grd-s4:71.34%;--grd-s5:85.76%;--grd-border-angle:190deg;--grd-border-c1:hsla(220,78%,90%,0.1);--grd-border-c2:hsla(220,75%,90%,0.6)}.cl-generate-btn:active:not(:disabled){transform:translateY(0)}.cl-generate-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.cl-generate-btn .btn-spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}.cl-generate-btn.loading .btn-spinner{display:block}.cl-generate-btn.loading .btn-text{display:none}@keyframes spin{to{transform:rotate(1turn)}}.cl-preview-panel{position:-webkit-sticky;position:sticky;top:80px}.cl-preview-empty{padding:60px 32px;text-align:center}.cl-preview-empty-icon{width:56px;height:56px;border-radius:14px;background:rgba(36,80,184,.08);border:1px solid rgba(36,80,184,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--accent)}.cl-preview-empty h3{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.cl-preview-empty p{font-size:13px;color:var(--text-muted);line-height:1.65;max-width:260px;margin:0 auto}.cl-preview-doc{display:none;padding:0}.cl-preview-doc.visible{display:block}.cl-preview-doc-inner{padding:36px 36px 28px;font-family:Lora,Georgia,serif;font-size:13.5px;line-height:1.85;color:var(--text-primary);max-height:580px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-light) transparent}.cl-preview-doc-inner::-webkit-scrollbar{width:4px}.cl-preview-doc-inner::-webkit-scrollbar-track{background:transparent}.cl-preview-doc-inner::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}.letter-header{margin-bottom:28px}.letter-sender-name{font-family:Space Grotesk,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:4px}.letter-sender-contact{font-size:12.5px;color:var(--text-secondary);font-family:var(--font-body);line-height:1.7}.letter-date{margin:20px 0}.letter-date,.letter-recipient{font-size:13px;color:var(--text-secondary);font-family:var(--font-body)}.letter-recipient{line-height:1.7;margin-bottom:24px}.letter-body p{margin-bottom:16px;color:var(--text-primary)}.letter-body p:last-child{margin-bottom:0}.letter-divider{height:1px;background:var(--border);margin:20px 0}.letter-signoff{margin-top:28px;padding-top:4px}.letter-signoff-word{font-family:var(--font-body);font-size:14px;color:var(--text-primary);margin-bottom:4px}.letter-signoff-name{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);letter-spacing:-.01em}.letter-bullet{padding-left:20px!important;position:relative;margin-bottom:8px!important}.letter-bullet-dot{position:absolute;left:4px;color:var(--accent);font-weight:600}.cl-preview-toolbar{display:none;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--border);background:rgba(255,255,255,.015)}.cl-preview-toolbar.visible{display:flex}.cl-preview-actions{display:flex;gap:8px}.cl-action-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid var(--border-light);background:var(--bg-elevated);color:var(--text-secondary);font-family:var(--font-body);white-space:nowrap}.cl-action-btn:hover{border-color:var(--border-accent);color:var(--text-primary);background:var(--bg-card-hover)}.cl-action-btn.primary{background:rgba(36,80,184,.12);border-color:rgba(36,80,184,.25);color:var(--accent-light)}.cl-action-btn.primary:hover{background:rgba(36,80,184,.2)}.cl-regenerate-btn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:var(--radius-sm);transition:color .2s;font-family:var(--font-body)}.cl-regenerate-btn:hover{color:var(--accent-light)}.cl-letter-mode-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;font-family:var(--font-body);letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:24px}.cl-letter-mode-badge.no-referral{background:rgba(106,170,232,.1);border:1px solid rgba(106,170,232,.2);color:var(--blue)}.cl-letter-mode-badge.with-referral{background:rgba(95,212,163,.08);border:1px solid rgba(95,212,163,.2);color:var(--green)}.cl-tips-panel{margin-top:20px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden}.cl-tips-header{padding:14px 18px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px}.cl-tips-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}.cl-tip-item{display:flex;gap:10px;align-items:flex-start}.cl-tip-num{width:20px;height:20px;border-radius:5px;background:rgba(36,80,184,.12);border:1px solid rgba(36,80,184,.18);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--accent-light);flex-shrink:0;margin-top:1px}.cl-tip-text{font-size:12.5px;color:var(--text-secondary);line-height:1.65}.cl-error{display:none;margin-top:12px;padding:12px 14px;background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--radius);font-size:13px;color:var(--red)}.cl-error.visible{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.letter-animate{animation:fadeIn .4s var(--ease-out) both}.letter-animate:nth-child(2){animation-delay:.05s}.letter-animate:nth-child(3){animation-delay:.1s}.letter-animate:nth-child(4){animation-delay:.15s}.letter-animate:nth-child(5){animation-delay:.2s}.letter-animate:nth-child(6){animation-delay:.25s}.letter-animate:nth-child(7){animation-delay:.3s}.letter-animate:nth-child(8){animation-delay:.35s}.letter-animate:nth-child(9){animation-delay:.4s}.cl-toast{position:fixed;bottom:28px;right:28px;z-index:99999;display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-lg);font-size:13px;color:var(--text-primary);font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.4);transform:translateY(80px);opacity:0;transition:all .35s var(--ease-out);pointer-events:none}.cl-toast.show{transform:translateY(0);opacity:1}.cl-toast.success{border-color:var(--green-border)}.cl-toast.success svg{color:var(--green)}@media (max-width:900px){.cl-layout{grid-template-columns:1fr}.cl-preview-panel{position:static}.cl-mode-tip{display:none}.cl-steps{padding:0 16px}}@media (max-width:768px){.cl-main{padding:0 16px 60px}.cl-hero{padding:48px 0 32px}.cl-row{grid-template-columns:1fr}}