/* Forms */
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.form-control { width:100%; padding:12px 16px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); font-family:'Inter',sans-serif; font-size:14px; transition:var(--transition); outline:none; }
.form-control:focus { border-color:var(--accent-green); box-shadow:0 0 0 3px var(--accent-green-glow); }
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { min-height:120px; resize:vertical; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.form-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border:none; border-radius:var(--radius-sm); font-family:'Inter',sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; }
.btn-primary { background:var(--gradient-green); color:#fff; box-shadow:0 2px 8px rgba(34,197,94,.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(34,197,94,.4); color:#fff; }
.btn-secondary { background:var(--bg-input); color:var(--text-primary); border:1px solid var(--border-color); }
.btn-secondary:hover { background:rgba(51,65,85,.8); border-color:var(--text-muted); color:var(--text-primary); }
.btn-danger { background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%); color:#fff; box-shadow:0 2px 8px rgba(239,68,68,.3); }
.btn-danger:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(239,68,68,.4); color:#fff; }
.btn-blue { background:var(--gradient-blue); color:#fff; box-shadow:0 2px 8px rgba(59,130,246,.3); }
.btn-blue:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(59,130,246,.4); color:#fff; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { padding:14px 28px; font-size:16px; }
.btn-icon { width:36px; height:36px; padding:0; border-radius:var(--radius-sm); }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }

/* Tables */
.table-container { overflow-x:auto; border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; }
thead th { padding:12px 16px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); text-align:left; border-bottom:1px solid var(--border-color); background:rgba(15,23,42,.5); }
tbody td { padding:12px 16px; font-size:14px; border-bottom:1px solid rgba(51,65,85,.2); color:var(--text-secondary); }
tbody tr { transition:var(--transition); }
tbody tr:hover { background:rgba(34,197,94,.04); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.badge-success { background:var(--accent-green-glow); color:var(--accent-green); border:1px solid rgba(34,197,94,.3); }
.badge-danger { background:var(--accent-red-glow); color:var(--accent-red); border:1px solid rgba(239,68,68,.3); }
.badge-warning { background:var(--accent-orange-glow); color:var(--accent-orange); border:1px solid rgba(245,158,11,.3); }
.badge-info { background:var(--accent-blue-glow); color:var(--accent-blue); border:1px solid rgba(59,130,246,.3); }

/* Toggle */
.toggle { position:relative; display:inline-block; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:var(--bg-input); border:1px solid var(--border-color); border-radius:24px; transition:var(--transition); }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:2px; background:var(--text-muted); border-radius:50%; transition:var(--transition); }
.toggle input:checked+.toggle-slider { background:var(--accent-green-glow); border-color:var(--accent-green); }
.toggle input:checked+.toggle-slider::before { transform:translateX(19px); background:var(--accent-green); }

/* Toast */
.toast-container { position:fixed; top:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:14px 20px; min-width:300px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:12px; animation:toastIn .4s ease; font-size:14px; }
.toast.success { border-left:3px solid var(--accent-green); }
.toast.error { border-left:3px solid var(--accent-red); }
.toast.hiding { animation:toastOut .3s ease forwards; }
@keyframes toastIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }

/* Modal */
.modal-overlay { position:fixed; top:0;left:0; width:100%; height:100%; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:var(--transition); }
.modal-overlay.active { opacity:1; visibility:visible; }
.modal-dialog { width:100%; max-width:600px; transform:translateY(20px); transition:var(--transition); }
.modal-overlay.active .modal-dialog { transform:translateY(0); }
.glass { background:rgba(15, 23, 42, 0.8); backdrop-filter:blur(16px); border:1px solid var(--border-color); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.modal-header h2 { font-size:1.25rem; font-weight:700; margin:0; color:var(--text-primary); }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px; background:rgba(0,0,0,0.2); border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:12px; }

/* Visual Flow Builder */
.builder-container { animation: fadeIn 0.5s ease; }
.visual-flow { position: relative; padding-bottom: 40px; }
.flow-timeline { display: flex; flex-direction: column; align-items: center; }
.flow-node-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 650px; margin-bottom: 0; }
.flow-node { 
    background: var(--bg-card); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: 24px; width: 100%; display: flex; gap: 20px; position: relative;
    box-shadow: var(--shadow-md); transition: var(--transition);
}
.flow-node:hover { border-color: var(--accent-blue); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,0.4); }

/* Node Types Coloring */
.node-start { border-left: 5px solid var(--accent-green); border-top: 1px solid rgba(34,197,94,0.3); }
.node-question { border-left: 5px solid var(--accent-blue); border-top: 1px solid rgba(59,130,246,0.3); }
.node-menu { border-left: 5px solid var(--accent-purple); border-top: 1px solid rgba(139,92,246,0.3); }
.node-end { border-left: 5px solid var(--accent-orange); border-top: 1px solid rgba(245,158,11,0.3); }

.node-number {
    position: absolute; top: -12px; left: -12px; width: 32px; height: 32px;
    background: var(--bg-sidebar); border: 2px solid var(--border-color); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: var(--text-primary); z-index: 5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.node-icon { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--bg-input); border-radius: 14px; color: var(--accent-blue); flex-shrink: 0; }
.node-content { flex: 1; min-width: 0; }
.node-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.node-key { font-family: 'Monaco', 'Consolas', monospace; font-weight: 700; color: var(--accent-blue); background: rgba(59, 130, 246, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; }
.node-body { color: var(--text-primary); font-size: 0.95rem; line-height: 1.6; }
.node-actions { display: flex; flex-direction: column; gap: 8px; }
.node-options { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }

.flow-connector { width: 4px; height: 60px; background: rgba(71, 85, 105, 0.2); position: relative; margin: 0; }
.flow-connector::before { content: 'Lalu...'; position: absolute; left: 15px; top: 15px; font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.flow-connector::after { 
    content: ''; position: absolute; bottom: -8px; left: -6px; 
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-top: 10px solid var(--border-color);
}
.node-next-label { font-size: 12px; color: var(--accent-blue); font-weight: 600; background: rgba(59, 130, 246, 0.1); padding: 4px 10px; border-radius: 6px; display: inline-block; }

@keyframes fadeIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* Progress */
.progress-bar { width:100%; height:8px; background:var(--bg-input); border-radius:8px; overflow:hidden; margin:12px 0; }
.progress-bar-fill { height:100%; background:var(--gradient-green); border-radius:8px; transition:width .5s ease; }

/* Bot Rule Card */
.bot-rule-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:20px; transition:var(--transition); }
.bot-rule-card:hover { border-color:var(--border-glow); transform:translateY(-1px); }
.bot-rule-card .rule-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bot-rule-card .keyword { font-size:15px; font-weight:600; color:var(--accent-green); }
.bot-rule-card .response-preview { color:var(--text-secondary); font-size:13px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(51,65,85,.2); }

/* Phone Tags */
.phone-tags { display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-sm); min-height:80px; max-height:200px; overflow-y:auto; }
.phone-tag { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:var(--accent-green-glow); border:1px solid rgba(34,197,94,.3); border-radius:16px; font-size:12px; color:var(--accent-green); }
.phone-tag .remove { cursor:pointer; font-size:14px; opacity:.7; }
.phone-tag .remove:hover { opacity:1; color:var(--accent-red); }

/* Bulk Progress */
.bulk-progress { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius); padding:24px; margin-top:20px; }
.bulk-progress .stats { display:flex; gap:24px; margin-top:12px; }
.bulk-progress .stat-num { font-size:24px; font-weight:700; }

/* Message Bubble */
.message-list { display:flex; flex-direction:column; gap:8px; max-height:500px; overflow-y:auto; padding:16px; }
.message-bubble { max-width:70%; padding:10px 16px; border-radius:12px; font-size:14px; line-height:1.5; }
.message-bubble.outgoing { background:var(--accent-green-glow); border:1px solid rgba(34,197,94,.2); margin-left:auto; border-bottom-right-radius:4px; }
.message-bubble.incoming { background:var(--bg-input); border:1px solid var(--border-color); margin-right:auto; border-bottom-left-radius:4px; }
.message-bubble .time { font-size:11px; color:var(--text-muted); margin-top:4px; text-align:right; }

/* Tabs */
.tabs { display:flex; gap:4px; background:var(--bg-input); padding:4px; border-radius:var(--radius-sm); margin-bottom:24px; }
.tab-btn { padding:8px 16px; border:none; background:transparent; color:var(--text-secondary); font-family:'Inter',sans-serif; font-size:13px; font-weight:500; border-radius:6px; cursor:pointer; transition:var(--transition); }
.tab-btn.active { background:var(--accent-green); color:#fff; }
.tab-btn:hover:not(.active) { color:var(--text-primary); background:rgba(51,65,85,.4); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Empty State */
.empty-state { text-align:center; padding:48px 24px; }
.empty-state .icon { font-size:48px; margin-bottom:16px; opacity:.5; }
.empty-state h3 { font-size:18px; margin-bottom:8px; }
.empty-state p { color:var(--text-muted); font-size:14px; margin-bottom:24px; }

/* Spinner */
.spinner { width:24px; height:24px; border:3px solid var(--border-color); border-top-color:var(--accent-green); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; }
.spinner-lg { width:48px; height:48px; border-width:4px; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Grid */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* Utility */
.mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px}
.mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px}
.d-flex{display:flex} .align-center{align-items:center} .justify-between{justify-content:space-between}
.text-center{text-align:center} .text-green{color:var(--accent-green)} .text-red{color:var(--accent-red)} .text-muted{color:var(--text-muted)}
.fw-600{font-weight:600} .fs-sm{font-size:13px} .w-100{width:100%}

/* Mobile */
.mobile-header { display:none; position:fixed; top:0; left:0; right:0; height:56px; background:var(--bg-sidebar); border-bottom:1px solid var(--border-color); align-items:center; padding:0 16px; z-index:99; }
.mobile-menu-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); cursor:pointer; font-size:18px; }
@media(max-width:768px) {
    .sidebar{transform:translateX(-100%)} .sidebar.open{transform:translateX(0)}
    .main-content{margin-left:0;padding:20px 16px;padding-top:72px}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .grid-2,.grid-3{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .mobile-header{display:flex!important}
}
@media(max-width:480px) { .stats-grid{grid-template-columns:1fr} .stat-card .stat-value{font-size:24px} }
::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}