:root{--bg-root:#0c0e12;--bg-sidebar:#10131a;--bg-main:#12151c;--bg-card:#181c25;--bg-card-hover:#1e2330;--bg-input:#1a1e28;--bg-table-head:#151923;--border:#252a36;--border-focus:#3b82f6;--border-subtle:#1e222d;--text:#e2e5ec;--text-muted:#7a8194;--text-dim:#4e556a;--text-bright:#f5f6f8;--accent:#ef4444;--accent-hover:#dc2626;--blue:#3b82f6;--blue-dim:#1e3a5f;--green:#22c55e;--green-dim:#14532d;--amber:#f59e0b;--amber-dim:#78350f;--red:#ef4444;--red-dim:#7f1d1d;--r:8px;--r-sm:5px;--r-lg:12px;--font:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;--shadow:0 1px 3px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--font);background:var(--bg-root);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}

.layout{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}
.main{flex:1;margin-left:240px;min-height:100vh}

.brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid var(--border)}
.brand h2{font-size:15px;font-weight:700;color:var(--text-bright);letter-spacing:-.3px}
.brand-sub{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}

.nav{padding:12px 10px;flex:1}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--text-muted);text-decoration:none;border-radius:var(--r);font-size:13px;font-weight:500;transition:all .15s}
.nav-item:hover{color:var(--text);background:var(--bg-card)}
.nav-item.active{color:var(--text-bright);background:var(--bg-card);box-shadow:inset 3px 0 0 var(--accent)}

.sidebar-footer{padding:14px 18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.status-row{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;color:var(--text-muted)}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-live{background:var(--green);box-shadow:0 0 6px var(--green)}
.dot-warn{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.dot-off{background:var(--text-dim)}
.dot-info{background:var(--blue)}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 16px;border-bottom:1px solid var(--border);background:var(--bg-main);position:sticky;top:0;z-index:50}
.page-title{font-size:20px;font-weight:700;color:var(--text-bright);letter-spacing:-.4px}
.page-sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.topbar-actions{display:flex;gap:8px}
.inline-form{display:flex}

.content{padding:24px 28px;display:flex;flex-direction:column;gap:20px}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.stat-card:hover{border-color:var(--border-focus)}
.stat-icon{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-blue{background:var(--blue-dim);color:var(--blue)}
.icon-amber{background:var(--amber-dim);color:var(--amber)}
.icon-red{background:var(--red-dim);color:var(--red)}
.icon-green{background:var(--green-dim);color:var(--green)}
.stat-body{display:flex;flex-direction:column}
.stat-value{font-size:26px;font-weight:700;font-family:var(--mono);color:var(--text-bright);line-height:1.1}
.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* Panels */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.panel-head h3{font-size:14px;font-weight:600;color:var(--text-bright)}

/* Controls */
.controls-panel{padding:16px 18px}
.controls-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.control-group{display:flex;align-items:center;gap:8px}
.control-label{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.feedback{font-size:12px;padding:6px 12px;border-radius:var(--r-sm);font-weight:500}
.feedback.hidden{display:none}
.feedback.ok{background:var(--green-dim);color:var(--green)}
.feedback.error{background:var(--red-dim);color:var(--red)}
.feedback.loading{background:var(--blue-dim);color:var(--blue)}

/* Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead{background:var(--bg-table-head)}
th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid var(--border)}
td{padding:10px 14px;border-bottom:1px solid var(--border-subtle);color:var(--text)}
tr:hover td{background:var(--bg-card-hover)}
.cell-name{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.cell-num{font-family:var(--mono);font-size:12px;white-space:nowrap}
.cell-mono{font-family:var(--mono);font-size:11px;color:var(--text-muted)}
.cell-time{font-family:var(--mono);font-size:11px;color:var(--text-dim);white-space:nowrap}
.cell-actions{white-space:nowrap}
.empty-row{text-align:center;color:var(--text-dim);padding:32px 14px !important}
.text-green{color:var(--green)!important}
.text-red{color:var(--red)!important}

/* Badges */
.badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.badge-ok{background:var(--green-dim);color:var(--green)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-amber{background:var(--amber-dim);color:var(--amber)}
.badge-blue{background:var(--blue-dim);color:var(--blue)}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-muted{background:#1e222d;color:var(--text-dim)}

/* Channel tags */
.channel-tag{display:inline-block;padding:2px 7px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.5px;font-family:var(--mono)}
.tag-facebook{background:#1a2744;color:#5b8def}
.tag-google{background:#2a2414;color:#f59e0b}
.tag-rt{background:#2a1420;color:#ef4444}

/* Member tag */
.member-tag{font-size:11px;padding:2px 8px;border-radius:3px;background:var(--blue-dim);color:var(--blue);font-weight:600}

/* Logs */
.log-list{max-height:320px;overflow-y:auto}
.log-entry{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:1px solid var(--border-subtle);font-size:12px}
.log-entry:hover{background:var(--bg-card-hover)}
.log-level{font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0;font-family:var(--mono)}
.level-info{background:var(--blue-dim);color:var(--blue)}
.level-warning{background:var(--amber-dim);color:var(--amber)}
.level-error{background:var(--red-dim);color:var(--red)}
.log-msg{color:var(--text);flex:1}
.log-detail{color:var(--text-muted);font-size:11px}
.log-time{color:var(--text-dim);font-size:11px;font-family:var(--mono);white-space:nowrap;flex-shrink:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);font-size:13px;font-weight:600;font-family:var(--font);border:1px solid transparent;cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{background:transparent;color:var(--text-muted);border-color:var(--border)}
.btn-outline:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-card-hover)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{color:var(--text)}
.btn-danger-outline{background:transparent;color:var(--red);border-color:var(--red-dim)}
.btn-danger-outline:hover{background:var(--red-dim)}
.btn-warn{background:var(--amber-dim);color:var(--amber);border-color:var(--amber-dim)}
.btn-warn:hover{background:#92400e}
.btn-live{background:var(--green-dim);color:var(--green);border-color:var(--green-dim)}
.btn-live:hover{background:#166534}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-xs{padding:4px 8px;font-size:11px}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}
.btn-icon:hover{color:var(--text);background:var(--bg-card-hover);border-color:var(--text-muted)}

/* Forms */
input[type="text"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],select{background:var(--bg-input);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:var(--r-sm);font-size:13px;font-family:var(--font);outline:none;transition:border-color .15s;width:100%}
input:focus,select:focus{border-color:var(--border-focus)}
input::placeholder{color:var(--text-dim)}
.select-sm{width:auto;padding:6px 10px;font-size:12px}
.input-sm{width:80px!important;padding:6px 8px;font-size:12px}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
.hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-dim)}
.cb-label{flex-direction:row!important;align-items:center;gap:8px!important;cursor:pointer;padding-top:20px}
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* Form layout */
.form-body{padding:18px;display:flex;flex-direction:column;gap:16px}
.form-row{display:flex;gap:12px;align-items:flex-end}
.field{flex:1;display:flex;flex-direction:column;gap:5px}
.field-sm{flex:0 0 180px}
.field-xs{flex:0 0 100px}
.form-actions{display:flex;gap:10px;padding-top:8px;border-top:1px solid var(--border)}

/* Token sections */
.token-section{border:1px solid var(--border);border-radius:var(--r);padding:14px;background:var(--bg-main)}
.token-section-title{font-size:13px;font-weight:600;color:var(--text-bright);margin-bottom:10px;display:flex;align-items:center;gap:8px}

/* Flow explainer */
.explainer-panel{padding:18px}
.flow-steps{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.flow-step{display:flex;align-items:center;gap:10px;background:var(--bg-main);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px}
.flow-num{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.flow-step strong{font-size:13px;color:var(--text-bright)}
.flow-step p{font-size:11px;color:var(--text-dim);margin:0}
.flow-arrow{color:var(--text-dim);flex-shrink:0}

/* Actions builder */
.actions-builder{border:1px solid var(--border);border-radius:var(--r);padding:14px;background:var(--bg-main)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.section-head h4{font-size:13px;font-weight:700;color:var(--text-bright)}
.section-hint{font-size:11px;color:var(--text-dim);margin-bottom:12px}
.action-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-bottom:10px}
.action-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.action-header-left{display:flex;align-items:center;gap:8px}
.action-number{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.select-action{width:auto!important;padding:6px 10px;font-size:12px;font-weight:600}
.scale-input{width:70px!important}
.btn-remove{border-color:var(--red-dim)!important;color:var(--red)!important;font-size:14px}
.btn-remove-sm{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;padding:2px 4px;transition:color .15s}
.btn-remove-sm:hover{color:var(--red)}
.conditions-container{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.condition-row{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-input);border-radius:var(--r-sm);border:1px solid var(--border-subtle)}
.cond-metric{flex:2;width:auto!important;font-size:12px;padding:5px 8px}
.cond-op{flex:1.5;width:auto!important;font-size:12px;padding:5px 8px}
.cond-val{flex:.8;width:auto!important;font-size:12px;padding:5px 8px;font-family:var(--mono)}
.cond-time{flex:1;width:auto!important;font-size:12px;padding:5px 8px}

/* Rules list */
.rules-list{display:flex;flex-direction:column}
.rule-card{padding:16px 18px;border-bottom:1px solid var(--border);transition:background .15s}
.rule-card:hover{background:var(--bg-card-hover)}
.rule-card:last-child{border-bottom:none}
.rule-header{margin-bottom:10px}
.rule-title-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rule-title-row h4{font-size:14px;font-weight:600;color:var(--text-bright)}
.rule-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.meta-item{font-size:12px;color:var(--text-muted)}
.meta-item strong{color:var(--text);font-weight:600}
.rule-actions-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.action-block{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;background:var(--bg-main);border-radius:var(--r-sm);border:1px solid var(--border-subtle)}
.action-label{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap;padding-top:2px}
.conditions-list{display:flex;flex-wrap:wrap;gap:4px}
.condition-pill{font-size:11px;padding:3px 8px;border-radius:3px;background:var(--bg-card);color:var(--text-muted);border:1px solid var(--border-subtle);font-family:var(--mono)}
.rule-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rule-btns{margin-left:auto;display:flex;gap:6px}
.muted{color:var(--text-dim)!important}

.empty-state{padding:48px;text-align:center;color:var(--text-dim)}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-main)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}

@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.form-row{flex-wrap:wrap}.field-sm{flex:1 1 140px}}
@media(max-width:768px){.sidebar{display:none}.main{margin-left:0}.stats-grid{grid-template-columns:1fr}.condition-row{flex-wrap:wrap}.flow-steps{flex-direction:column}.flow-arrow{transform:rotate(90deg)}}

/* Account picker */
.account-picker{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);max-height:200px;overflow-y:auto}
.acc-chip{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--r-sm);font-size:12px;cursor:pointer;transition:all .15s}
.acc-chip:hover{border-color:var(--border-focus)}
.acc-chip input[type="checkbox"]{width:14px;height:14px;accent-color:var(--accent)}
.tag-sm{font-size:9px;padding:1px 5px}