.csep-container{max-width:1200px;margin:0 auto;padding:2rem;color:#f8fafc}.csep-workspace{background:rgba(15,23,42,.6);backdrop-filter:blur(10px);border-radius:1.5rem;border:1px solid rgba(124,58,237,.1);padding:2.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.csep-header{text-align:center;margin-bottom:2.5rem}.csep-header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#7c3aed,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.csep-header p{color:#94a3b8;font-size:1.1rem}.csep-main{display:flex;flex-direction:column;gap:2rem}.csep-input-section,.csep-output-section{background:rgba(30,41,59,.4);border:1px solid rgba(124,58,237,.2);border-radius:.75rem;padding:1.5rem}.csep-input-header{margin-bottom:1rem}.csep-input-header h2{color:#f8fafc;font-size:1.25rem;margin-bottom:.5rem}.csep-input-header p{color:#94a3b8;font-size:.9rem}.csep-input,.csep-output{width:100%;min-height:200px;padding:1rem;background:rgba(15,23,42,.4);border:1px solid rgba(124,58,237,.2);border-radius:.5rem;color:#f8fafc;font-family:monospace;font-size:.9rem;line-height:1.6;resize:vertical}.csep-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 2px rgba(124,58,237,.2)}.csep-controls{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;background:rgba(30,41,59,.4);border:1px solid rgba(124,58,237,.2);border-radius:.75rem}.csep-separator-select{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.csep-separator-select label{color:#f8fafc;font-size:.9rem}.csep-select{cursor:pointer;min-width:150px}.csep-custom-input,.csep-select{padding:.75rem 1rem;background:rgba(15,23,42,.4);border:1px solid rgba(124,58,237,.2);border-radius:.5rem;color:#f8fafc}.csep-custom-input{width:150px}.csep-options{display:flex;gap:1.5rem;flex-wrap:wrap}.csep-checkbox{display:flex;align-items:center;gap:.5rem;color:#f8fafc;cursor:pointer}.csep-checkbox input[type=checkbox]{width:1rem;height:1rem;accent-color:#7c3aed}.csep-process-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#7c3aed,#6d28d9);border:none;border-radius:.5rem;color:#ffffff;font-weight:600;cursor:pointer;transition:all .2s ease;align-self:flex-start}.csep-process-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,.2)}.csep-output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.csep-output-header h2{color:#f8fafc;font-size:1.25rem}.csep-copy-button{padding:.5rem 1rem;background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.3);border-radius:.5rem;color:#f8fafc;cursor:pointer;transition:all .2s ease}.csep-copy-button:hover{background:rgba(124,58,237,.3);transform:translateY(-1px)}.csep-info{margin-top:3rem;display:grid;gap:2rem}.csep-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1rem}.csep-feature-card{background:rgba(30,41,59,.4);border:1px solid rgba(124,58,237,.2);border-radius:.75rem;padding:1.5rem}.csep-feature-card h3{color:#f8fafc;font-size:1.1rem;margin-bottom:.5rem}.csep-feature-card p{color:#94a3b8;font-size:.9rem;line-height:1.5}.csep-best-list,.csep-tips-content ul,.csep-use-list{list-style:none;padding:0;margin:.5rem 0}.csep-best-list li,.csep-tips-content li,.csep-use-list li{color:#94a3b8;margin-bottom:.75rem;padding-left:1.5rem;position:relative}.csep-best-list li:before,.csep-tips-content li:before,.csep-use-list li:before{content:"→";position:absolute;left:0;color:#7c3aed}.csep-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:1rem}.csep-faq-item{background:rgba(30,41,59,.4);border:1px solid rgba(124,58,237,.2);border-radius:.75rem;padding:1.5rem}.csep-faq-item h3{color:#f8fafc;font-size:1.1rem;margin-bottom:.5rem}.csep-faq-item p{color:#94a3b8;font-size:.9rem;line-height:1.5}@media (max-width:768px){.csep-container{padding:1rem}.csep-workspace{padding:1.5rem}.csep-header h1{font-size:2rem}.csep-separator-select{flex-direction:column;align-items:stretch}.csep-custom-input,.csep-select{width:100%}.csep-options{flex-direction:column}.csep-process-button{width:100%}}@media (hover:none) and (pointer:coarse){.csep-copy-button,.csep-custom-input,.csep-process-button,.csep-select{min-height:44px;padding:12px 24px}.csep-checkbox{min-height:44px}}