*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#4F46E5;--primary-dark:#4338CA;--bg:#F3F4F6;--white:#fff;--gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;--gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;--gray-800:#1F2937;--gray-900:#111827;--green:#10B981;--red:#EF4444;--yellow:#F59E0B;--blue:#3B82F6}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--gray-800);line-height:1.5}
.hidden{display:none!important}
#app{min-height:100vh}
.page{min-height:100vh}

/* Login */
.login-card{max-width:400px;margin:0 auto;padding:40px;background:var(--white);border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);margin-top:15vh;text-align:center}
.login-card h1{color:var(--primary);margin-bottom:8px;font-size:28px}
.login-card p{color:var(--gray-500);margin-bottom:20px}
.login-card input{width:100%;padding:12px;margin-bottom:12px;border:1px solid var(--gray-300);border-radius:8px;font-size:14px}
.login-card input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.login-card button{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background .2s}
.login-card button:hover{background:var(--primary-dark)}
.hint{font-size:12px;color:var(--gray-400);margin-top:15px}

/* Layout */
#main-page{display:flex}
.sidebar{width:240px;background:var(--gray-900);color:#fff;min-height:100vh;position:fixed;left:0;top:0;padding:20px 0;display:flex;flex-direction:column}
.logo{padding:0 20px;margin-bottom:30px}
.logo h2{color:#fff;font-size:22px}
.nav-links{list-style:none;flex:1}
.nav-links li{padding:12px 20px;cursor:pointer;transition:background .2s;color:var(--gray-400);font-size:14px}
.nav-links li:hover,.nav-links li.active{background:var(--gray-800);color:#fff}
.nav-links li span{display:flex;align-items:center;gap:10px}
#logout-btn{margin:20px;padding:10px;background:transparent;border:1px solid var(--gray-700);color:var(--gray-400);border-radius:6px;cursor:pointer;font-size:13px}
#logout-btn:hover{background:var(--gray-800);color:#fff}
.content{margin-left:240px;padding:30px;width:calc(100% - 240px);min-height:100vh}

/* Cards */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}
.stat-card{background:var(--white);padding:20px;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.stat-card h3{font-size:13px;color:var(--gray-500);text-transform:uppercase;margin-bottom:8px}
.stat-card .value{font-size:28px;font-weight:700;color:var(--gray-900)}
.stat-card .sub{font-size:12px;color:var(--gray-400);margin-top:4px}

/* Tables */
.card{background:var(--white);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-bottom:20px}
.card-header{padding:20px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center}
.card-header h2{font-size:18px}
.card-body{padding:20px}
table{width:100%;border-collapse:collapse}
th,td{padding:12px;text-align:left;border-bottom:1px solid var(--gray-200);font-size:14px}
th{color:var(--gray-500);font-weight:600;text-transform:uppercase;font-size:12px}
tr:hover{background:var(--gray-50)}

/* Buttons */
.btn{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:14px;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#DC2626}
.btn-outline{background:transparent;border:1px solid var(--gray-300);color:var(--gray-700)}
.btn-outline:hover{background:var(--gray-100)}
.btn-green{background:#059669;color:#fff}
.btn-green:hover{background:#047857}
.btn-yellow{background:#D97706;color:#fff}
.btn-yellow:hover{background:#B45309}
.btn-info{background:#3B82F6;color:#fff}
.btn-info:hover{background:#2563EB}
.btn-sm{padding:4px 10px; font-size:12px; border-radius:4px}

/* Forms */
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:14px;color:var(--gray-700)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:1px solid var(--gray-300);border-radius:6px;font-size:14px}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.form-group textarea{min-height:150px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Badges */
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.badge-green{background:#D1FAE5;color:#065F46}
.badge-red{background:#FEE2E2;color:#991B1B}
.badge-yellow{background:#FEF3C7;color:#92400E}
.badge-blue{background:#DBEAFE;color:#1E40AF}
.badge-gray{background:var(--gray-100);color:var(--gray-600)}

/* Modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:var(--white);border-radius:12px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto}
.modal-header{padding:20px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:18px}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--gray-500)}
.modal-body{padding:20px}
.modal-footer{padding:20px;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:10px}

/* Search */
.search-bar{display:flex;gap:10px;margin-bottom:20px}
.search-bar input{flex:1;padding:10px 16px;border:1px solid var(--gray-300);border-radius:8px;font-size:14px}
.search-bar input:focus{outline:none;border-color:var(--primary)}

/* Alerts */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.alert-success{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0}
.alert-error{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA}

/* Embed code */
.code-block{background:var(--gray-900);color:#E5E7EB;padding:16px;border-radius:8px;font-family:monospace;font-size:13px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:20px}
.pagination button{padding:8px 12px;border:1px solid var(--gray-300);background:var(--white);border-radius:6px;cursor:pointer}
.pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination button:disabled{opacity:.5;cursor:not-allowed}

/* Charts placeholder */
.chart-container{background:var(--white);padding:20px;border-radius:12px;margin-bottom:20px}
.chart-container h3{margin-bottom:15px;font-size:16px}
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:200px;padding:10px 0}
.bar{flex:1;background:var(--primary);border-radius:4px 4px 0 0;min-width:20px;position:relative;transition:height .3s}
.bar:hover{background:var(--primary-dark)}
.bar-label{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--gray-500);white-space:nowrap}
.bar-value{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--gray-600)}

/* Automation steps */
.step-item{display:flex;align-items:center;gap:16px;padding:16px;background:var(--gray-50);border-radius:8px;margin-bottom:10px}
.step-number{width:32px;height:32px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.step-content{flex:1}
.step-content h4{font-size:14px;margin-bottom:4px}
.step-content p{font-size:12px;color:var(--gray-500)}
.step-arrow{text-align:center;color:var(--gray-400);font-size:20px;margin:5px 0}

/* Groups */
.group-card{background:var(--white);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);margin-bottom:20px;border-left:4px solid var(--group-color, var(--primary))}
.group-header{padding:20px;border-bottom:1px solid var(--gray-200);display:flex;justify-content:space-between;align-items:center}
.group-header h2{font-size:18px;display:flex;align-items:center;gap:8px}
.group-color-indicator{width:16px;height:16px;border-radius:50%;display:inline-block}
.group-body{padding:20px}
.group-stats{display:flex;gap:20px;font-size:13px;color:var(--gray-500)}
.group-stat{display:flex;align-items:center;gap:4px}
.lists-in-group{margin-top:15px}
.list-item{padding:12px;background:var(--gray-50);border-radius:8px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.list-item-info{display:flex;gap:15px;align-items:center}
.color-picker{display:flex;gap:8px;flex-wrap:wrap}
.color-option{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .2s}
.color-option:hover{transform:scale(1.1)}
.color-option.selected{border-color:var(--gray-800);box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--gray-400)}

/* Responsive */
@media(max-width:768px){
  .sidebar{width:60px;padding:10px 0}
  .logo h2,.nav-links li span{display:none}
  .content{margin-left:60px;width:calc(100% - 60px)}
  .form-row{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
}