:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text:#172033;--text-muted:#6b7280;--text-light:#9ca3af;--background:#f5f7fb;--surface:#fff;--surface-muted:#f9fafb;--border:#e5e7eb;--border-dark:#374151;--input-border:#d1d5db;--primary:#2563eb;--primary-hover:#1d4ed8;--danger:#dc2626;--danger-hover:#b91c1c;--sidebar:#111827;--sidebar-hover:#1f2937;--success-bg:#dcfce7;--success-text:#166534;--error-bg:#fee2e2;--error-text:#991b1b;--warning-bg:#fef3c7;--warning-text:#92400e;--radius:10px;background:#f5f7fb;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--background);min-width:320px}body{background:var(--background);min-width:320px;min-height:100vh;color:var(--text);margin:0}body,button,input,textarea,select{font-family:inherit}button,input,textarea,select{font-size:16px}button,.button{background:var(--primary);color:#fff;cursor:pointer;border:0;border-radius:7px;padding:10px 16px;text-decoration:none;transition:background .15s,opacity .15s;display:inline-block}button:hover,.button:hover{background:var(--primary-hover)}button:disabled{opacity:.6;cursor:not-allowed}button.secondary,.button.secondary{color:var(--text);background:#e5e7eb}button.secondary:hover,.button.secondary:hover{background:#d1d5db}button.danger{background:var(--danger)}button.danger:hover{background:var(--danger-hover)}#root{min-height:100vh}.app{min-height:100vh;display:flex}.sidebar{background:var(--sidebar);color:#fff;flex-direction:column;flex:0 0 250px;width:250px;min-height:100vh;padding:24px;display:flex}.sidebar h1{margin:0 0 35px;font-size:20px;line-height:1.3}.sidebar nav{flex-direction:column;gap:5px;display:flex}.sidebar nav a{color:#9ca3af;border-radius:6px;padding:11px 12px;text-decoration:none;transition:background .15s,color .15s}.sidebar nav a:hover,.sidebar nav a.active{background:var(--sidebar-hover);color:#fff}.sidebar-footer{border-top:1px solid var(--border-dark);margin-top:auto;padding-top:20px}.user-name{overflow-wrap:anywhere;font-weight:600}.user-email{color:#9ca3af;overflow-wrap:anywhere;margin:4px 0 15px;font-size:13px}.sidebar-footer button{background:#374151;width:100%}.sidebar-footer button:hover{background:#4b5563}.main{flex:1;width:100%;min-width:0;max-width:1400px;padding:40px}.page-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px;display:flex}.page-header h2{margin:0;font-size:28px;line-height:1.2}.page-header p{color:var(--text-muted);margin:7px 0 0}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.dashboard-card,.card,.form-card,.detail-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}.dashboard-card{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}.dashboard-card:hover{border-color:var(--primary);box-shadow:0 4px 12px #0000000d}.card-list{flex-direction:column;gap:15px;display:flex}.card{justify-content:space-between;align-items:center;gap:20px;display:flex}.card h3{margin:0 0 8px}.card p{color:var(--text-muted);margin:4px 0}.actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.form-card{width:100%;max-width:700px}.form-card label,.auth-card label{flex-direction:column;gap:7px;margin-bottom:18px;font-weight:600;display:flex}input,textarea,select{border:1px solid var(--input-border);width:100%;color:var(--text);background:#fff;border-radius:7px;outline:none;padding:11px 12px;transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;min-height:140px}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.checkbox{align-items:center;flex-direction:row!important}.checkbox input{width:auto}.form-actions{justify-content:flex-end;gap:10px;margin-top:25px;display:flex}.email-account-form{width:100%;max-width:800px;margin:0 auto;display:block}.email-account-form>label{flex-direction:column;gap:8px;width:100%;margin:0 0 22px;font-weight:600;display:flex}.email-account-form .form-row{grid-template-columns:minmax(0,1fr) 150px;gap:20px;width:100%;margin-bottom:22px;display:grid}.email-account-form .form-row label{flex-direction:column;gap:8px;min-width:0;margin:0;font-weight:600;display:flex}.email-account-form input:not([type=checkbox]){width:100%;min-width:0}.email-account-form>.checkbox{cursor:pointer;flex-direction:row;align-items:center;gap:10px;width:fit-content;margin:2px 0 26px;font-weight:600;display:flex}.email-account-form>.checkbox input{cursor:pointer;flex:none;width:18px;height:18px;margin:0}.email-account-form>.actions{border-top:1px solid var(--border);justify-content:flex-end;align-items:center;gap:10px;margin-top:30px;padding-top:22px;display:flex}.auth-page{place-items:center;min-height:100vh;padding:20px;display:grid}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:420px;padding:30px}.auth-card h1{margin-top:0}.auth-card button{width:100%}.error{background:var(--error-bg);color:var(--error-text);border:1px solid #fecaca;border-radius:7px;margin-bottom:20px;padding:12px 15px}.error-text{color:var(--danger)}.empty{background:var(--surface);border-radius:var(--radius);text-align:center;color:var(--text-muted);border:1px dashed #d1d5db;padding:50px}.table-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:650px}th,td{text-align:left;border-bottom:1px solid var(--border);padding:15px 18px}th{background:var(--surface-muted);color:var(--text-muted);white-space:nowrap;font-size:13px}tbody tr:last-child td{border-bottom:0}.status{text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;display:inline-block}.status.sent{background:var(--success-bg);color:var(--success-text)}.status.failed{background:var(--error-bg);color:var(--error-text)}.status.pending{background:var(--warning-bg);color:var(--warning-text)}.detail-card{width:100%;overflow:hidden}.detail-row{border-bottom:1px solid #f3f4f6;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:12px 0;display:grid}.detail-row:last-child{border-bottom:0}.message{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px 0;line-height:1.7}@media (width<=900px){.sidebar{flex-basis:210px;width:210px;padding:20px}.main{padding:30px}.dashboard-grid{grid-template-columns:1fr}.email-account-form{max-width:700px}}@media (width<=700px){.app{display:block}.sidebar{width:100%;min-height:auto;padding:16px}.sidebar h1{margin-bottom:15px}.sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;display:grid}.sidebar nav a{padding:9px 10px}.sidebar-footer{margin-top:15px;padding-top:15px}.main{width:100%;max-width:none;padding:20px 16px 30px}.page-header{flex-direction:column;align-items:flex-start;margin-bottom:20px}.page-header h2{font-size:24px}.dashboard-grid{gap:15px}.dashboard-card,.card,.form-card,.detail-card{padding:18px}.card{flex-direction:column;align-items:stretch;gap:15px}.actions{flex-wrap:wrap;width:100%}.actions button,.actions .button{text-align:center;flex:1}.form-actions{flex-direction:column-reverse}.form-actions button,.form-actions .button{text-align:center;width:100%}.email-account-form{max-width:100%}.email-account-form .form-row{grid-template-columns:1fr;gap:0;margin-bottom:0}.email-account-form .form-row label{margin-bottom:20px}.email-account-form>.checkbox{width:auto;margin-top:2px;margin-bottom:24px}.email-account-form>.actions{flex-direction:column-reverse;align-items:stretch;margin-top:24px}.email-account-form>.actions button{width:100%}.auth-page{padding:16px}.auth-card{padding:22px 18px}.empty{padding:35px 20px}.detail-row{grid-template-columns:1fr;gap:4px;padding:14px 0}.message{padding:15px 0}}@media (width<=400px){.main{padding:16px 12px 25px}.sidebar{padding:14px 12px}.sidebar nav{grid-template-columns:1fr}.sidebar-footer{margin-top:12px}.dashboard-card,.card,.form-card,.detail-card{padding:15px}.page-header h2{font-size:22px}}