*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,sans-serif;line-height:1.6;color:#333;background:#f5f5f5}#app{max-width:1200px;margin:0 auto;padding:20px}header{margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #ddd}h1{font-size:24px;color:#2196f3}h2{font-size:18px;margin-bottom:15px;color:#333}.section{background:#fff;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a}.form-group{margin-bottom:15px}input[type=email],input[type=password],input[type=text],textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}textarea{min-height:100px;resize:vertical}.button{background:#2196f3;color:#fff;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;font-size:14px}.button:hover{background:#1976d2}.button:disabled{background:#ccc;cursor:not-allowed}.status{margin-top:10px;padding:10px;border-radius:4px;font-size:14px}.status:first-letter{text-transform:uppercase}.status.error{background:#ffebee;color:#c62828;border:1px solid #EF9A9A}.status.success{background:#e8f5e9;color:#2e7d32;border:1px solid #A5D6A7}.status.processing{background:#e3f2fd;color:#0d47a1;border:1px solid #90CAF9}.split-container{display:flex;gap:20px}.split-container>div{flex:1}.profiles-container{max-height:70vh;overflow-y:auto}.profile-item{margin-bottom:15px;padding:15px;border-radius:8px;background:#f9f9f9;border:1px solid #eee;transition:border-color .3s ease}.profile-item:hover{border-color:#007bff}.profile-header{display:flex;gap:12px;margin-bottom:10px}.profile-photo{width:40px;height:40px;border-radius:50%;object-fit:cover}.profile-info{flex:1}.profile-name{font-weight:500;font-size:14px}.profile-meta{font-size:12px;color:#666}.attachments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin:10px 0}.attachment-item{position:relative;border:1px solid #eee;border-radius:4px;overflow:hidden}.attachment-item input{margin-left:4px;margin-top:4px}.attachment-preview{height:60px;background:#f5f5f5;display:flex;align-items:center;justify-content:center}.attachment-preview img{width:100%;height:100%;object-fit:cover}.attachment-filename{font-size:10px;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{display:flex;gap:8px;margin-top:10px}.control-btn{flex:1;padding:8px;color:#fff;border:none;border-radius:4px;cursor:pointer}.btn-start{background:#4caf50}.btn-stop{background:#f44336}.btn-clear{background:#ff9800}.control-btn.btn-start{background-color:#4caf50}.control-btn.btn-start.running{background-color:#007bff;color:#fff}.toggle-container{margin-bottom:15px}.char-counter{font-size:12px;color:#666;margin-top:4px}.char-counter.invalid{color:#f44336}@media (max-width: 768px){.split-container{flex-direction:column}}.button,.control-btn,.btn-refresh{transition:background .15s,color .15s,box-shadow .15s;outline:none}.button:active,.control-btn:active,.btn-refresh:active{box-shadow:0 2px 8px #2196f326;filter:brightness(.95)}.btn-start{background:#4caf50;color:#fff}.btn-stop{background:#f44336;color:#fff}.btn-clear{background:#ff9800;color:#fff}.btn-refresh{background:#e0e0e0;color:#1976d2;border:none;border-radius:4px;padding:8px 12px;cursor:pointer}.btn-refresh:hover{background:#bbdefb;color:#0d47a1}.btn-refresh:active{background:#90caf9;color:#0d47a1}body.dark-mode .button,body.dark-mode .control-btn{background:#222;color:#e0e0e0;border:none}body.dark-mode .btn-start{background:#388e3c;color:#fff}body.dark-mode .btn-stop{background:#d32f2f;color:#fff}body.dark-mode .btn-clear{background:#f57c00;color:#fff}body.dark-mode .btn-refresh{background:#333;color:#fff!important;border:none}body.dark-mode .btn-refresh:hover{background:#1976d2;color:#fff}body.dark-mode .btn-refresh:active{background:#1565c0;color:#fff}body.dark-mode .button:hover,body.dark-mode .control-btn:hover{background:#444;color:#fff}body.dark-mode .button:active,body.dark-mode .control-btn:active{background:#222;box-shadow:0 2px 8px #90caf91a;filter:brightness(1.05)}body.dark-mode{background:#181a1b;color:#e0e0e0}body.dark-mode header{border-bottom:1px solid #333}body.dark-mode h1{color:#90caf9}body.dark-mode h2{color:#e0e0e0}body.dark-mode .section{background:#23272a;box-shadow:0 2px 4px #0006}body.dark-mode .profile-item{background:#23272a;border:1px solid #333;transition:border-color .3s ease}body.dark-mode .profile-item:hover{border-color:#007bff}body.dark-mode .profile-meta,body.dark-mode .char-counter{color:#b0b0b0}body.dark-mode .button:disabled{background:#555;color:#888}body.dark-mode .status{background:#23272a;color:#e0e0e0;border:1px solid #333}body.dark-mode .status.error{background:#3a1a1a;color:#ff6b6b;border:1px solid #c62828}body.dark-mode .status.success{background:#1b3a1a;color:#81c784;border:1px solid #388e3c}body.dark-mode .status.processing{background:#1a233a;color:#90caf9;border:1px solid #1976d2}body.dark-mode .attachment-item{background:#23272a;border:1px solid #333}body.dark-mode .attachment-preview{background:#181a1b}body.dark-mode input,body.dark-mode textarea{background:#23272a;color:#e0e0e0;border:1px solid #333}body.dark-mode input::placeholder,body.dark-mode textarea::placeholder{color:#888}.attachments-grid>.status{grid-column:1 / -1;width:100%;text-align:center}.attachment-type-label{position:absolute;top:0;left:0;width:100%;background:#00000080;color:#fff;font-size:12px;text-align:center;padding:2px 0;z-index:2;border-top-left-radius:4px;border-top-right-radius:4px;pointer-events:none}.attachment-item{position:relative}.attachment-warning{color:#d32f2f;background:#fff3e0;border:1px solid #ffccbc;border-radius:4px;padding:6px 10px;margin-bottom:8px;text-align:center;font-size:13px}body.dark-mode .attachment-warning{background:#3a1a1a;color:#ffbdbd;border:1px solid #c62828}.top-right-btns{padding:14px;background-color:#f5f5f5}body.dark-mode .top-right-btns{padding:14px;background-color:#23272a}textarea:disabled,input:disabled,checkbox:disabled{cursor:not-allowed}body.dark-mode textarea:disabled,body.dark-mode input:disabled{opacity:.6}.attachment-preview.selected{outline:2px solid #007bff;box-shadow:0 0 0 2px #007bff33;background:#e3f0ff}body.dark-mode .attachment-preview.selected{outline:2px solid #90caf9;box-shadow:0 0 0 2px #1976d233;background:#1a233a}