:root{--green:#25D366;--green-dark:#128C7E;--green-light:#DCF8C6;--bg:#0f1117;--card:#1a1d27;--card-border:#2a2d3a;--text:#e2e8f0;--text-dim:#8892a4;--sidebar-bg:#141720;--sidebar-w:260px;--danger:#ef4444;--warning:#f59e0b;--blue:#3b82f6;--purple:#8b5cf6;--radius:12px;--radius-sm:8px;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:14px;}
a{color:var(--green);text-decoration:none;}a:hover{text-decoration:underline;}
hr{border:none;border-top:1px solid var(--card-border);margin:20px 0;}
h3{font-size:1.1rem;margin-bottom:16px;}h4{font-size:0.95rem;margin:16px 0 8px;color:var(--text-dim);}
code{background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;font-size:0.85em;}

/* APP LAYOUT */
.app{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--card-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;}
.sidebar-logo{padding:20px 24px;font-size:1.3rem;color:#fff;border-bottom:1px solid var(--card-border);}
.sidebar-logo b{color:var(--green);}
.sidebar-user{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--card-border);}
.avatar{width:40px;height:40px;background:linear-gradient(135deg,var(--green),var(--green-dark));border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:#000;flex-shrink:0;}
.user-name{font-weight:600;font-size:0.9rem;}.user-plan{font-size:0.75rem;color:var(--text-dim);}
.nav-menu{list-style:none;padding:12px 0;flex:1;}
.nav-menu li a{display:flex;align-items:center;gap:10px;padding:10px 24px;color:var(--text-dim);font-size:0.9rem;transition:all 0.2s;}
.nav-menu li a:hover{color:#fff;background:rgba(255,255,255,0.04);text-decoration:none;}
.nav-menu li.active a{color:var(--green);background:rgba(37,211,102,0.08);border-right:3px solid var(--green);}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--card-border);}
.btn-logout{display:block;padding:10px;text-align:center;color:var(--text-dim);border-radius:var(--radius-sm);transition:0.2s;}
.btn-logout:hover{background:rgba(239,68,68,0.1);color:var(--danger);text-decoration:none;}
.content{flex:1;margin-left:var(--sidebar-w);min-height:100vh;}
.topbar{padding:16px 32px;border-bottom:1px solid var(--card-border);display:flex;justify-content:space-between;align-items:center;background:var(--card);}
.page-title{font-size:1.3rem;font-weight:700;}
.wa-status{font-size:0.8rem;padding:6px 12px;border-radius:50px;}
.wa-status.connected{background:rgba(37,211,102,0.1);color:var(--green);}
.wa-status.disconnected{background:rgba(239,68,68,0.1);color:var(--danger);}
.page-content{padding:24px 32px;}

/* CARDS */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px;margin-bottom:20px;}
.card-desc{color:var(--text-dim);font-size:0.9rem;margin:-8px 0 20px;}
.card-green{border-color:rgba(37,211,102,0.2);background:rgba(37,211,102,0.03);}
.card-highlight{border-color:rgba(37,211,102,0.3);background:linear-gradient(135deg,rgba(37,211,102,0.05),transparent);}

/* SAVINGS HERO */
.savings-hero{background:linear-gradient(135deg,rgba(37,211,102,0.1),rgba(18,140,126,0.05));border:1px solid rgba(37,211,102,0.2);border-radius:var(--radius);padding:28px 32px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.savings-content{display:flex;align-items:center;gap:20px;}
.savings-icon{font-size:2.5rem;}
.savings-label{font-size:0.85rem;color:var(--text-dim);margin-bottom:4px;}
.savings-amount{font-size:2.2rem;font-weight:800;color:var(--green);letter-spacing:-1px;}
.savings-amount span{font-size:0.9rem;font-weight:400;color:var(--text-dim);}
.savings-detail{font-size:0.8rem;color:var(--text-dim);margin-top:4px;}
.savings-yearly{text-align:right;}
.savings-yearly-label{font-size:0.8rem;color:var(--text-dim);}
.savings-yearly-amount{font-size:1.5rem;font-weight:700;color:var(--green);}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;text-align:center;}
.stat-icon{font-size:1.6rem;margin-bottom:8px;}
.stat-value{font-size:1.5rem;font-weight:700;}
.stat-label{font-size:0.78rem;color:var(--text-dim);margin-top:4px;}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* TOOLBAR */
.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;}
.toolbar-count{font-size:0.85rem;color:var(--text-dim);}
.toolbar-search{display:flex;gap:4px;}
.toolbar-search input{padding:7px 12px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-sm);color:var(--text);font-size:0.85rem;width:220px;}
.toolbar-search button{padding:7px 12px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;}

/* BUTTONS */
.btn{padding:8px 18px;border:none;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:var(--text);}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--green);color:#000;}.btn-primary:hover{background:#1ebe5a;}
.btn-outline{background:transparent;border:1px solid var(--card-border);}.btn-outline:hover{border-color:var(--green);color:var(--green);}
.btn-danger{background:rgba(239,68,68,0.15);color:var(--danger);}.btn-danger:hover{background:rgba(239,68,68,0.25);}
.btn-sm{padding:6px 14px;font-size:0.8rem;}.btn-xs{padding:4px 10px;font-size:0.75rem;}
.btn-full{width:100%;justify-content:center;padding:12px;}
.btn-icon{background:none;border:none;cursor:pointer;font-size:1rem;padding:4px;opacity:0.6;}.btn-icon:hover{opacity:1;}

/* TABLES */
.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--card-border);font-size:0.85rem;}
.table th{color:var(--text-dim);font-weight:600;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px;}
.table tr:hover{background:rgba(255,255,255,0.02);}
.table-mini{width:100%;font-size:0.82rem;}.table-mini th,.table-mini td{padding:6px 8px;border-bottom:1px solid var(--card-border);}
.table-mini th{color:var(--text-dim);font-size:0.72rem;text-transform:uppercase;}

/* BADGES */
.badge{display:inline-block;padding:2px 10px;border-radius:50px;font-size:0.72rem;font-weight:600;}
.badge-utility{background:rgba(37,211,102,0.12);color:var(--green);}
.badge-marketing{background:rgba(139,92,246,0.12);color:var(--purple);}
.badge-authentication{background:rgba(59,130,246,0.12);color:var(--blue);}
.badge-active{background:rgba(37,211,102,0.12);color:var(--green);}
.badge-blocked{background:rgba(239,68,68,0.12);color:var(--danger);}
.badge-unsubscribed{background:rgba(148,163,184,0.12);color:var(--text-dim);}
.badge-draft{background:rgba(148,163,184,0.12);color:var(--text-dim);}
.badge-scheduled{background:rgba(59,130,246,0.12);color:var(--blue);}
.badge-sending{background:rgba(245,158,11,0.12);color:var(--warning);}
.badge-completed{background:rgba(37,211,102,0.12);color:var(--green);}
.badge-cancelled{background:rgba(239,68,68,0.12);color:var(--danger);}

/* FORMS */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:0.82rem;font-weight:600;color:var(--text-dim);margin-bottom:6px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--card-border);border-radius:var(--radius-sm);color:var(--text);font-size:0.9rem;font-family:inherit;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(37,211,102,0.1);}
.form-group textarea{resize:vertical;}
.form-group select{cursor:pointer;}
.form-group input[type="color"]{height:40px;padding:4px;cursor:pointer;}
.form-help{font-size:0.78rem;color:var(--text-dim);margin-top:6px;}

/* ALERTS */
.alert{padding:12px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:0.88rem;}
.alert-success{background:rgba(37,211,102,0.1);border:1px solid rgba(37,211,102,0.2);color:var(--green);}
.alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:var(--danger);}
.alert-warning{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);color:var(--warning);}

/* MODALS */
.modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);justify-content:center;align-items:center;padding:20px;}
.modal.open{display:flex;}
.modal-content{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:28px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;}
.modal-lg{max-width:700px;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.modal-header h3{margin:0;}.modal-header button{background:none;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;}

/* GROUP CHIPS */
.group-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.chip{padding:6px 14px;border-radius:50px;font-size:0.8rem;background:var(--card);border:1px solid var(--card-border);color:var(--text-dim);display:inline-flex;align-items:center;gap:6px;}
.chip:hover{text-decoration:none;border-color:var(--green);color:var(--green);}
.chip.active{background:rgba(37,211,102,0.1);border-color:var(--green);color:var(--green);}
.chip-delete{background:none;border:none;color:var(--danger);cursor:pointer;font-size:0.7rem;padding:0 2px;}

/* TEMPLATE GRID */
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.template-card{background:rgba(255,255,255,0.02);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:16px;transition:0.2s;}
.template-card:hover{border-color:rgba(37,211,102,0.3);}
.template-exists{opacity:0.5;}
.template-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.template-name{font-weight:600;font-size:0.9rem;}
.template-body{font-size:0.82rem;color:var(--text-dim);line-height:1.5;margin-bottom:12px;max-height:80px;overflow:hidden;}
.template-buttons{display:flex;gap:6px;margin-bottom:10px;}
.tmpl-btn{padding:4px 10px;border:1px solid rgba(37,211,102,0.3);border-radius:6px;font-size:0.72rem;color:var(--green);}
.template-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--card-border);padding-top:10px;}
.template-meta{font-size:0.75rem;color:var(--text-dim);}

/* SECTOR TABS */
.sector-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.tab{padding:6px 14px;border-radius:50px;font-size:0.8rem;background:rgba(255,255,255,0.03);border:1px solid var(--card-border);color:var(--text-dim);}
.tab:hover{text-decoration:none;border-color:var(--green);}
.tab.active{background:rgba(37,211,102,0.1);border-color:var(--green);color:var(--green);}

/* MONTH STATS */
.month-stats{display:flex;flex-direction:column;gap:8px;}
.month-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--card-border);}
.month-row.highlight{background:rgba(37,211,102,0.05);padding:10px;border-radius:var(--radius-sm);border:none;margin-top:8px;}
.green{color:var(--green);}.red{color:var(--danger);}

/* STEPS */
.steps-row{display:flex;gap:16px;flex-wrap:wrap;}
.step{display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(255,255,255,0.03);border-radius:var(--radius-sm);flex:1;min-width:180px;}
.step.done{background:rgba(37,211,102,0.08);}.step.done .step-num{background:var(--green);color:#000;}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--card-border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;flex-shrink:0;}
.step a{color:var(--text);font-size:0.85rem;}

/* PROGRESS */
.progress-mini{height:4px;background:var(--card-border);border-radius:2px;margin-top:4px;overflow:hidden;}
.progress-mini div{height:100%;background:var(--green);border-radius:2px;transition:width 0.3s;}

/* QUEUE STATS */
.queue-stats{display:flex;flex-wrap:wrap;gap:12px;}
.qs{padding:8px 16px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:600;}
.qs-queued{background:rgba(148,163,184,0.1);color:var(--text-dim);}
.qs-sent{background:rgba(59,130,246,0.1);color:var(--blue);}
.qs-delivered{background:rgba(37,211,102,0.1);color:var(--green);}
.qs-read{background:rgba(139,92,246,0.1);color:var(--purple);}
.qs-failed{background:rgba(239,68,68,0.1);color:var(--danger);}

/* PHONE PREVIEW */
.phone-preview{display:flex;justify-content:center;}
.phone-frame{width:280px;background:#0b141a;border-radius:24px;overflow:hidden;border:2px solid rgba(255,255,255,0.08);box-shadow:0 20px 60px rgba(0,0,0,0.4);}
.phone-header-preview{background:#1f2c34;padding:12px 16px;display:flex;align-items:center;gap:10px;}
.phone-avatar-sm{width:32px;height:32px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#000;}
.phone-body-preview{padding:16px;font-size:0.82rem;color:var(--text-dim);line-height:1.5;min-height:120px;white-space:pre-wrap;}
.phone-buttons-preview{padding:0 16px 16px;display:flex;flex-direction:column;gap:6px;}
.preview-btn{padding:8px;background:rgba(37,211,102,0.1);border:1px solid rgba(37,211,102,0.2);border-radius:8px;color:var(--green);font-size:0.78rem;text-align:center;font-weight:600;}

/* WA STATUS BOX */
.wa-status-box{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:0.9rem;}
.wa-status-box span{font-size:1.5rem;}
.wa-status-box.connected{background:rgba(37,211,102,0.08);border:1px solid rgba(37,211,102,0.2);}
.wa-status-box.disconnected{background:rgba(239,68,68,0.05);border:1px solid rgba(239,68,68,0.15);}

/* SAVINGS REPORT */
.savings-report{display:flex;flex-direction:column;gap:10px;}
.sr-row{display:flex;justify-content:space-between;padding:8px 0;font-size:0.9rem;}
.sr-highlight{background:rgba(37,211,102,0.08);padding:12px;border-radius:var(--radius-sm);font-size:1rem;}

/* PAGINATION */
.pagination{display:flex;gap:4px;margin-top:16px;justify-content:center;}
.pagination a{padding:6px 12px;border-radius:6px;font-size:0.82rem;background:var(--card);border:1px solid var(--card-border);color:var(--text-dim);}
.pagination a:hover{text-decoration:none;border-color:var(--green);}
.pagination a.active{background:var(--green);color:#000;border-color:var(--green);}

/* MISC */
.empty{text-align:center;color:var(--text-dim);padding:32px 16px;font-size:0.9rem;}
.mono{font-family:'JetBrains Mono',monospace;font-size:0.82rem;}
.text-dim{color:var(--text-dim);}

/* AUTH PAGE */
.auth-page{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background:var(--bg);}
.auth-container{width:100%;max-width:420px;}
.auth-brand{text-align:center;font-size:1.8rem;margin-bottom:32px;color:#fff;}
.auth-brand b{color:var(--green);}
.auth-card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:36px;}
.auth-card h2{margin-bottom:4px;}
.auth-subtitle{color:var(--text-dim);font-size:0.9rem;margin-bottom:24px;}
.auth-switch{text-align:center;margin-top:20px;font-size:0.85rem;color:var(--text-dim);}

/* RESPONSIVE */
@media(max-width:1024px){.grid-2{grid-template-columns:1fr;}.template-grid{grid-template-columns:1fr;}}
@media(max-width:768px){
    .sidebar{display:none;}.content{margin-left:0;}
    .page-content{padding:16px;}.topbar{padding:12px 16px;}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .savings-hero{flex-direction:column;text-align:center;}
    .savings-content{flex-direction:column;}
}

/* Nav sections */
.nav-section{padding:12px 24px 4px!important;font-size:0.68rem!important;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim)!important;opacity:0.5;cursor:default!important;list-style:none;}
.nav-section:hover{background:transparent!important;}

/* Mobile sidebar */
.mobile-menu-btn{background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer;padding:4px 8px;margin-right:8px;display:none;}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:40;display:none;}
.sidebar-overlay.active{display:block;}
@media(max-width:768px){
    .mobile-menu-btn{display:block!important;}
    .sidebar{transform:translateX(-100%);transition:transform 0.3s;z-index:50;}
    .sidebar.sidebar-open{transform:translateX(0);}
}

/* Plan badge colors */
.badge-baslangic{background:rgba(59,130,246,0.12);color:var(--blue);}
.badge-profesyonel{background:rgba(139,92,246,0.12);color:var(--purple);}
.badge-kurumsal{background:rgba(245,158,11,0.12);color:var(--warning);}
.badge-enterprise{background:rgba(37,211,102,0.12);color:var(--green);}
.badge-trial{background:rgba(148,163,184,0.12);color:var(--text-dim);}
.badge-info{background:rgba(59,130,246,0.12);color:var(--blue);}
.badge-warning{background:rgba(245,158,11,0.12);color:var(--warning);}
.badge-success{background:rgba(37,211,102,0.12);color:var(--green);}
.badge-pending{background:rgba(245,158,11,0.12);color:var(--warning);}
.badge-completed{background:rgba(37,211,102,0.12);color:var(--green);}
.badge-failed{background:rgba(239,68,68,0.12);color:var(--danger);}
.badge-refunded{background:rgba(148,163,184,0.12);color:var(--text-dim);}

/* Media upload */
.media-option{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.media-option label{padding:8px 14px;background:rgba(255,255,255,0.03);border:1px solid var(--card-border);border-radius:8px;cursor:pointer;font-size:0.8rem;transition:0.2s;}
.media-option label:hover{border-color:var(--green);}
.media-option input[type=file]{display:none;}
.media-preview{margin-top:8px;padding:8px;background:rgba(255,255,255,0.02);border-radius:8px;font-size:0.8rem;color:var(--text-dim);}