/* ── CLICKUP STYLE TOKENS ── */
[data-theme="dark"] {
  --bg:#1b1d26;--bg2:#0d0e12;--surface:#24262e;--surface2:#2e3038;--surface3:#3a3d47;
  --border:#3a3d47;--border2:#4a4d57;
  --text:#f5f6f8;--text2:#b8bcc8;--text3:#7a7e8a;
  --primary:#7b68ee;--primary-dim:rgba(123,104,238,.12);--primary-bright:#9b88ff;
  --success:#00c875;--success-dim:rgba(0,200,117,.12);
  --danger:#ff3b57;--danger-dim:rgba(255,59,87,.12);
  --warning:#fdab3d;--warning-dim:rgba(253,171,61,.12);
  --info:#579bfc;--info-dim:rgba(87,155,252,.12);
  --purple:#a25ddc;--purple-dim:rgba(162,93,220,.12);
  --pink:#ff158a;--pink-dim:rgba(255,21,138,.12);
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --shadow-sm:0 2px 12px rgba(0,0,0,.3);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);
}

[data-theme="light"] {
  --bg:#f8f9fc;--bg2:#ffffff;--surface:#ffffff;--surface2:#f8f9fc;--surface3:#f1f2f6;
  --border:#e4e6ef;--border2:#d0d4e4;
  --text:#1f2533;--text2:#676879;--text3:#9ea0b0;
  --primary:#7b68ee;--primary-dim:rgba(123,104,238,.08);--primary-bright:#6c5dd3;
  --success:#00c875;--success-dim:rgba(0,200,117,.08);
  --danger:#ff3b57;--danger-dim:rgba(255,59,87,.08);
  --warning:#fdab3d;--warning-dim:rgba(253,171,61,.08);
  --info:#579bfc;--info-dim:rgba(87,155,252,.08);
  --purple:#a25ddc;--purple-dim:rgba(162,93,220,.08);
  --pink:#ff158a;--pink-dim:rgba(255,21,138,.08);
  --shadow:0 8px 32px rgba(31,37,51,.08);
  --shadow-sm:0 2px 12px rgba(31,37,51,.04);
  --shadow-lg:0 20px 60px rgba(31,37,51,.12);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu',sans-serif;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s;overflow:hidden}
#app{display:flex;height:100vh;width:100vw;overflow:hidden}

/* ── SIDEBAR ── */
.sidebar{width:200px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:100}
.sidebar.collapsed{width:52px}
.sidebar-toggle{position:absolute;top:14px;right:-10px;width:20px;height:20px;background:var(--primary);border:2px solid var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:110;color:#fff;box-shadow:var(--shadow-sm);transition:all .2s}
.sidebar-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow)}
.sidebar-toggle svg{width:10px;height:10px;transition:transform .3s}
.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)}
.sidebar-inner{width:200px;display:flex;flex-direction:column;height:100%;min-width:200px}
.logo{height:44px;display:flex;align-items:center;padding:0 14px;gap:10px;border-bottom:1px solid var(--border)}
.logo-mark{width:26px;height:26px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-bright) 100%);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px var(--primary-dim)}
.logo-mark svg{width:14px;height:14px}
.logo-name{font-weight:700;font-size:.85rem;letter-spacing:-.02em;background:linear-gradient(135deg,var(--primary),var(--primary-bright));-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;transition:opacity .2s}
.sidebar.collapsed .logo-name{opacity:0;pointer-events:none}
.nav{flex:1;padding:10px 8px;overflow-y:auto;overflow-x:hidden}
.nav-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500;color:var(--text2);transition:all .15s;margin-bottom:2px;white-space:nowrap;position:relative}
.nav-item:hover{color:var(--text)}
.nav-item.active{color:var(--primary);background:var(--primary-dim);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--primary);border-radius:0 2px 2px 0}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.nav-item.active svg{opacity:1;color:var(--primary)}
.nav-label{overflow:hidden;transition:opacity .2s}
.nav-separator{margin:8px 10px 4px;border-top:1px solid var(--border);padding-top:8px}
.nav-separator-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:0 2px;opacity:.7}
.sidebar.collapsed .nav-separator{margin:4px 6px 2px;padding-top:4px}
.sidebar.collapsed .nav-separator-label{opacity:0;pointer-events:none}
.sidebar.collapsed .nav-label{opacity:0;pointer-events:none}
.sidebar-bottom{margin-top:auto;padding:0 8px;flex-shrink:0}
.sidebar-bottom .nav-separator{margin:4px 2px}
.sidebar-footer{padding:8px 0;border-top:1px solid var(--border);margin-top:8px;flex-shrink:0}
.live-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;background:var(--success-dim);position:relative;overflow:hidden}
.live-pill::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--success-dim),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.live-dot{width:6px;height:6px;background:var(--success);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px var(--success);animation:pulse 2s infinite}
.live-dot.paused{background:var(--text3);box-shadow:none;animation:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}
.live-label{font-size:.65rem;font-weight:700;color:var(--success);text-transform:uppercase;letter-spacing:.06em;transition:opacity .2s}
.sidebar.collapsed .live-label{opacity:0}

/* ── DISABLED BANNER ── */
.disabled-banner{background:linear-gradient(135deg,var(--warning-dim),var(--danger-dim));border-bottom:2px solid var(--warning);padding:8px 16px;display:none;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--warning);backdrop-filter:blur(10px)}
.disabled-banner.show{display:flex}
.disabled-banner svg{width:18px;height:18px;flex-shrink:0}
.disabled-banner button{margin-left:auto;padding:8px 16px;border-radius:8px;border:none;background:var(--warning);color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px var(--warning-dim)}
.disabled-banner button:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--warning-dim)}

/* ── MAIN ── */
.main{flex:1 !important;display:flex;flex-direction:column;overflow:hidden;min-width:0;width:100%;background:var(--bg)}
.topbar{height:44px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--surface);backdrop-filter:blur(10px)}
.topbar-left{display:flex;align-items:center;gap:8px}
.page-title{font-size:.95rem;font-weight:700;letter-spacing:-.02em}
.sep{color:var(--border2);font-weight:300;margin:0 4px}
.breadcrumb{font-size:.72rem;color:var(--text3);font-weight:500}
.topbar-right{display:flex;align-items:center;gap:8px}
.refresh-badge{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;font-size:.7rem;font-weight:600;color:var(--text2);background:var(--surface2)}
.btn-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;transition:all .2s}
.btn-icon:hover{background:var(--surface3);color:var(--text);border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-icon svg{width:14px;height:14px}
.btn-primary{display:flex;align-items:center;gap:6px;padding:7px 14px;background:linear-gradient(135deg,var(--primary),var(--primary-bright));color:#fff;border:none;border-radius:6px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px var(--primary-dim)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--primary-dim)}
.btn-primary svg{width:14px;height:14px}

/* ── CONTENT ── */
.content{padding:20px;flex:1;overflow-y:auto;overflow-x:hidden}
.content::-webkit-scrollbar{width:8px}
.content::-webkit-scrollbar-track{background:transparent}
.content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.content::-webkit-scrollbar-thumb:hover{background:var(--border)}

/* ── KPI GRID ── */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;position:relative;overflow:hidden;transition:all .2s;cursor:pointer}
.kpi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border2)}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:10px 10px 0 0}
.kpi-card.kc-green::before{background:linear-gradient(90deg,var(--success),#00e891)}
.kpi-card.kc-red::before{background:linear-gradient(90deg,var(--danger),#ff5a6f)}
.kpi-card.kc-orange::before{background:linear-gradient(90deg,var(--warning),#ffbd59)}
.kpi-card.kc-blue::before{background:linear-gradient(90deg,var(--info),#73abff)}
.kpi-card.kc-purple::before{background:linear-gradient(90deg,var(--purple),#b877ed)}
.kpi-card.kc-yellow::before{background:linear-gradient(90deg,#ffd93d,#ffe066)}
.kpi-label{font-size:.7rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.kpi-value{font-size:1.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:6px}
.kpi-card.kc-green .kpi-value{background:linear-gradient(135deg,var(--success),#00e891);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kpi-card.kc-red .kpi-value{background:linear-gradient(135deg,var(--danger),#ff5a6f);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kpi-card.kc-orange .kpi-value{background:linear-gradient(135deg,var(--warning),#ffbd59);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kpi-card.kc-blue .kpi-value{background:linear-gradient(135deg,var(--info),#73abff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kpi-card.kc-purple .kpi-value{background:linear-gradient(135deg,var(--purple),#b877ed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kpi-card.kc-yellow .kpi-value{background:linear-gradient(135deg,#ffd93d,#ffe066);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kpi-sub{font-size:.75rem;color:var(--text2);font-weight:500}

/* ── CHARTS ── */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;transition:all .2s;height:320px;display:flex;flex-direction:column}
.chart-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border2)}
.chart-title{font-size:.85rem;font-weight:700;margin-bottom:12px;color:var(--text);flex-shrink:0}
.chart-canvas{flex:1;min-height:0;position:relative}
.chart-canvas canvas{max-height:100% !important}

/* ── PAGE HEADER ── */
.page-header{margin-bottom:24px}
.page-header h2{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.page-header p{color:var(--text2);font-size:.88rem;font-weight:500}

/* ── TABLE ── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.section-title{font-size:.95rem;font-weight:700}
.filter-bar{display:flex;gap:6px}
.filter-chip{padding:6px 14px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s}
.filter-chip:hover{border-color:var(--border2);color:var(--text);transform:translateY(-1px)}
.filter-chip.active{border-color:var(--primary);color:var(--primary);background:var(--primary-dim);box-shadow:0 4px 12px var(--primary-dim)}
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.table-head{display:grid;grid-template-columns:90px 1fr 110px 70px 90px 80px 80px;padding:10px 16px;background:var(--surface2);font-size:.7rem;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
.order-row{display:grid;grid-template-columns:90px 1fr 110px 70px 90px 80px 80px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .15s;align-items:center;border-left:3px solid transparent}
.order-row:last-child{border-bottom:none}
.order-row:hover{background:var(--surface2);border-left-color:var(--primary)}
.order-row.high{border-left-color:var(--danger)}
.order-row.medium{border-left-color:var(--warning)}
.order-row.low{border-left-color:var(--success)}
.order-id{font-weight:700;font-size:.82rem;color:var(--primary)}
.order-email{font-size:.82rem;font-weight:500}
.order-amount{font-weight:700;font-size:.82rem}
.score-wrap{display:flex;align-items:center;gap:6px}
.score-num{font-weight:800;font-size:.72rem;width:24px;text-align:right}
.score-bar{flex:1;height:4px;background:var(--border);border-radius:4px;overflow:hidden}
.score-fill{height:100%;border-radius:4px;transition:width .3s}
.risk-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:4px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.risk-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.risk-pill.HIGH{background:var(--danger-dim);color:var(--danger)}
.risk-pill.MEDIUM{background:var(--warning-dim);color:var(--warning)}
.risk-pill.LOW{background:var(--success-dim);color:var(--success)}
.action-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;font-size:.6rem;font-weight:700;text-transform:uppercase}
.action-badge.cancelled{background:var(--danger-dim);color:var(--danger)}
.action-badge.held{background:var(--warning-dim);color:var(--warning)}
.action-badge.none{display:none}
.order-date{font-size:.75rem;color:var(--text3);font-weight:500}
.empty-state{padding:48px 20px;text-align:center}
.empty-icon{margin-bottom:12px;color:var(--text3);opacity:.4}
.empty-title{font-size:.92rem;font-weight:700;color:var(--text2);margin-bottom:6px}
.empty-sub{font-size:.82rem;color:var(--text3);font-weight:500}

/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--surface);border:1px solid var(--border);padding:10px 14px;border-radius:8px;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:8px;animation:toastIn .25s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow);color:var(--text)}
.toast.success{border-left:4px solid var(--success);background:var(--success-dim)}
.toast.error{border-left:4px solid var(--danger);background:var(--danger-dim)}
.toast.warn{border-left:4px solid var(--warning);background:var(--warning-dim)}
@keyframes toastIn{from{opacity:0;transform:translateX(100px) scale(.8)}to{opacity:1;transform:translateX(0) scale(1)}}

/* ── RESPONSIVE ── */
@media(max-width:1400px){.chart-grid{grid-template-columns:1fr}.chart-card{height:280px}}
@media(max-width:768px){.sidebar{display:none}.kpi-grid{grid-template-columns:1fr 1fr}.content{padding:14px}.chart-card{height:240px}.table-head,.order-row{grid-template-columns:90px 1fr 80px}.c-amount,.c-score,.c-date,.c-action{display:none}}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr}.add-form{grid-template-columns:1fr}}

/* ── MODALS ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;overflow:hidden}
.modal-backdrop.open{display:flex;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:modalSlideUp .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.modal-lg{max-width:900px;max-height:85vh}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--surface)}
.modal-title{font-size:1.05rem;font-weight:800;letter-spacing:-.02em}
.modal-sub{font-size:.78rem;color:var(--text2);font-weight:500;margin-top:2px}
.modal-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;font-size:1.2rem;line-height:1;transition:all .2s}
.modal-close:hover{background:var(--danger-dim);color:var(--danger);border-color:var(--danger);transform:rotate(90deg)}
.modal-body{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0}
.modal-body::-webkit-scrollbar{width:10px}
.modal-body::-webkit-scrollbar-track{background:var(--surface2)}
.modal-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px;border:2px solid var(--surface2)}
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--primary)}

/* ── TAB PANELS (content inside tabs) ── */
.stab-panel{display:none;padding:14px}
.stab-panel.active{display:block}
.settings-section-title{font-size:.7rem;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--border)}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border:none}
.settings-info{flex:1}
.settings-info strong{display:block;font-size:.82rem;font-weight:600;margin-bottom:2px}
.settings-info span{font-size:.72rem;color:var(--text2)}
.toggle-lg{position:relative;width:40px;height:22px;background:var(--border);border-radius:11px;cursor:pointer;transition:background .2s}
.toggle-lg.active{background:var(--primary)}
.toggle-lg::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.toggle-lg.active::after{transform:translateX(18px)}
.select-field,.field-input,.field-textarea{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);font-size:.78rem;font-weight:500;transition:all .2s}
.select-field:focus,.field-input:focus,.field-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim)}
.field-group{margin-bottom:10px}
.field-label{display:block;font-size:.72rem;font-weight:600;margin-bottom:5px;color:var(--text2)}
.field-hint{font-size:.68rem;color:var(--text3);margin-top:4px}
.field-textarea{resize:vertical;min-height:100px;font-family:inherit}
.checkbox-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.checkbox-row label{font-size:.85rem;font-weight:500;cursor:pointer}
.smtp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.smtp-grid-3{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
/* ── PAGE TABS (shared by Settings, Lists, etc.) ── */
.page-tabs{display:flex;gap:2px;padding:0 16px;background:var(--surface2);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;overflow-x:auto;min-height:38px;align-items:center;flex-shrink:0}
.page-tabs .stab{display:block;padding:10px 14px;font-size:.78rem;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;background:transparent}
.page-tabs .stab:hover{color:var(--text);background:var(--surface)}
.page-tabs .stab.active{color:var(--primary);border-bottom-color:var(--primary);background:transparent}

/* ── SETTINGS FULL PAGE ── */
.settings-page{display:flex;flex-direction:column}
.settings-page-body{flex:1;overflow-y:auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.settings-page .stab-panel{padding:24px !important}
.settings-page .settings-footer{border-radius:0 0 8px 8px;border:1px solid var(--border);border-top:1px solid var(--border)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.settings-col{display:flex;flex-direction:column;gap:0}
@media(max-width:700px){.settings-grid{grid-template-columns:1fr}}
.settings-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;background:var(--surface)}
.btn-secondary{padding:7px 14px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-secondary:hover{background:var(--surface3);border-color:var(--border2)}

/* ── MODERN FORM ELEMENTS ── */
.field-input[type="number"]{
  -moz-appearance:textfield;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.field-input[type="number"]::-webkit-inner-spin-button,
.field-input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* ── MODERN CHECKBOX ── */
input[type="checkbox"]{
  appearance:none;
  width:20px;
  height:20px;
  border:2px solid var(--border2);
  border-radius:6px;
  background:var(--surface2);
  cursor:pointer;
  transition:all .2s;
  position:relative;
  flex-shrink:0;
}
input[type="checkbox"]:hover{
  border-color:var(--primary);
  background:var(--primary-dim);
}
input[type="checkbox"]:checked{
  background:var(--primary);
  border-color:var(--primary);
}
input[type="checkbox"]:checked::after{
  content:'✓';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:14px;
  font-weight:700;
}

/* ── MODERN TOGGLE SWITCH ── */
.toggle-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  transition:all .2s;
  cursor:pointer;
  margin-bottom:10px;
}
.toggle-wrap:hover{
  background:var(--surface3);
  border-color:var(--border2);
}
.toggle-wrap.active{
  background:var(--primary-dim);
  border-color:var(--primary);
}
.toggle-switch{
  position:relative;
  width:38px;
  height:20px;
  background:var(--border2);
  border-radius:10px;
  cursor:pointer;
  transition:background .2s;
  flex-shrink:0;
}
.toggle-switch.active{
  background:var(--primary);
}
.toggle-switch::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:#fff;
  border-radius:50%;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  display: none;
}
.toggle-switch.active::after{
  transform:translateX(22px);
}
.toggle-info{
  flex:1;
}
.toggle-label{
  font-size:.82rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:1px;
}
.toggle-desc{
  font-size:.72rem;
  color:var(--text3);
  font-weight:500;
}

/* ── THEME SELECTOR MODERN ── */
.theme-selector{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.theme-option{
  flex:1;
  padding:10px;
  border:2px solid var(--border);
  border-radius:8px;
  background:var(--surface2);
  cursor:pointer;
  transition:all .2s;
  text-align:center;
}
.theme-option:hover{
  border-color:var(--border2);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.theme-option.active{
  border-color:var(--primary);
  background:var(--primary-dim);
  box-shadow:0 0 0 3px var(--primary-dim);
}
.theme-icon{
  width:32px;
  height:32px;
  margin:0 auto 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--surface);
  transition:all .2s;
}
.theme-option.active .theme-icon{
  background:var(--primary);
  color:#fff;
}
.theme-icon svg{
  width:16px;
  height:16px;
}
.theme-name{
  font-size:.72rem;
  font-weight:700;
  color:var(--text2);
  transition:color .2s;
}
.theme-option.active .theme-name{
  color:var(--primary);
}

/* ── RULES EDITOR MODERN ── */
.rule-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:8px;
  transition:all .2s;
}
.rule-item:hover{
  background:var(--surface3);
  border-color:var(--border2);
}
.rule-name{
  flex:1;
  font-size:.82rem;
  font-weight:600;
  color:var(--text);
}
.rule-desc{
  font-size:.68rem;
  color:var(--text3);
  margin-top:1px;
}
.rule-input{
  width:60px;
  padding:5px 8px;
  border:2px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  font-size:.85rem;
  font-weight:700;
  text-align:center;
  transition:all .2s;
}
.rule-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-dim);
}
.rule-toggle{
  width:20px;
  height:20px;
}

/* ── THRESHOLD INPUTS MODERN ── */
.threshold-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:8px;
}
.threshold-label{
  flex:1;
  font-size:.82rem;
  font-weight:600;
}
.threshold-input{
  width:70px;
  padding:7px 10px;
  border:2px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  font-size:.9rem;
  font-weight:700;
  text-align:center;
  transition:all .2s;
}
.threshold-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-dim);
}
.threshold-range{
  font-size:.75rem;
  color:var(--text3);
  font-weight:600;
  min-width:80px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ── REFRESH INTERVAL SELECT ── */
.refresh-select{
  padding:7px 10px;
  border:2px solid var(--border);
  border-radius:6px;
  background:var(--surface2);
  color:var(--text);
  font-size:.78rem;
  font-weight:600;
  transition:all .2s;
  cursor:pointer;
}
.refresh-select:hover{
  border-color:var(--border2);
  background:var(--surface3);
}
.refresh-select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-dim);
}

.settings-section{
  margin-bottom:20px;
}

.settings-section:last-child{
  margin-bottom:0;
  padding-bottom:14px;
}

/* ── ORDER DETAIL MODAL ── */
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
  padding:0 16px;
}
.detail-field{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px;
  transition:all .2s;
}
.detail-field:hover{
  background:var(--surface3);
  border-color:var(--border2);
}
.detail-field-label{
  font-size:.65rem;
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:4px;
}
.detail-field-value{
  font-size:.92rem;
  font-weight:700;
  color:var(--text);
  word-break:break-word;
}
.signals-label{
  font-size:.78rem;
  font-weight:700;
  color:var(--text2);
  margin:0 16px 8px;
  padding-bottom:6px;
  border-bottom:2px solid var(--border);
}
.signal-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  margin:0 16px 6px;
  transition:all .2s;
}
.signal-item:hover{
  background:var(--surface3);
  transform:translateX(4px);
}
.signal-text{
  font-size:.78rem;
  font-weight:500;
  color:var(--text);
  flex:1;
}
.signal-pts{
  font-size:.78rem;
  font-weight:800;
  font-family:'IBM Plex Mono',monospace;
  color:var(--danger);
  background:var(--danger-dim);
  padding:3px 8px;
  border-radius:4px;
  flex-shrink:0;
  margin-left:12px;
}
.signal-pts.positive{
  color:var(--success);
  background:var(--success-dim);
}
.signal-item.trust{
  border-color:var(--success-dim);
}
.no-signals-state{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  color:var(--success);
  background:var(--success-dim);
  border-radius:8px;
  font-size:.82rem;
  font-weight:600;
  margin:4px 0;
}
.modal-actions{
  display:flex;
  gap:8px;
  margin:14px 16px 0;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.btn-danger{
  padding:7px 14px;
  background:linear-gradient(135deg,var(--danger),#ff5a6f);
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 16px var(--danger-dim);
}
.btn-danger:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--danger-dim);
}
.btn-warn{
  padding:7px 14px;
  background:linear-gradient(135deg,var(--warning),#ffbd59);
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 16px var(--warning-dim);
}
.btn-warn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--warning-dim);
}
.btn-confirm{
  padding:7px 14px;
  background:linear-gradient(135deg,var(--success),#00e891);
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 16px var(--success-dim);
}
.btn-confirm:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px var(--success-dim);
}
#modalContent .modal-body{
  padding:14px 0;
}

/* ── KPI CLICKABLE ── */
.kpi-clickable{
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.kpi-clickable:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 32px rgba(0,0,0,.15);
}
.kpi-clickable:active{
  transform:translateY(-2px) scale(1.01);
}

/* ── LIST MODAL STYLES ── */
.list-loading{
  padding:60px 20px;
  text-align:center;
  color:var(--text3);
  font-size:.9rem;
}
.empty-state{
  padding:60px 20px;
  text-align:center;
}

/* ── LIST MODAL TABLE FIX ── */
#listModalContent .table-wrap{
  border-radius:0;
}
#listModalContent .table-head{
  display:grid;
  grid-template-columns:100px 1fr 100px 70px 100px;
  gap:10px;
  padding:8px 14px;
  background:var(--surface2);
  border-bottom:2px solid var(--border);
  font-size:.7rem;
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.08em;
}
#listModalContent .table-row{
  display:grid;
  grid-template-columns:100px 1fr 100px 70px 100px;
  gap:10px;
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  align-items:center;
  cursor:pointer;
  transition:all .15s;
}
#listModalContent .table-row:hover{
  background:var(--surface2);
  border-left:3px solid var(--primary);
  padding-left:21px;
}
#listModalContent .order-link{
  color:var(--primary);
  font-weight:700;
  font-size:.78rem;
}
#listModalContent .c-amount{
  text-align:right;
  font-family:'IBM Plex Mono',monospace;
  font-size:.85rem;
  font-weight:600;
}
#listModalContent .c-score{
  text-align:center;
}
#listModalContent .c-date{
  text-align:right;
  font-size:.8rem;
  color:var(--text3);
}

/* ── LOAD MORE BUTTON ── */
.btn-load-more{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  background:var(--surface2);
  border:2px solid var(--border);
  border-radius:8px;
  color:var(--primary);
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
}
.btn-load-more:hover{
  background:var(--primary-dim);
  border-color:var(--primary);
  transform:translateY(-2px);
}
.btn-load-more svg{
  transition:transform .2s;
}
.btn-load-more:hover svg{
  transform:translateY(2px);
}

/* ── BLACKLIST/WHITELIST MODERN STYLES ── */
.add-form{
  display:grid;
  grid-template-columns:120px 1fr 1fr 120px;
  gap:10px;
  padding:16px;
  background:var(--surface2);
  border:2px solid var(--border);
  border-radius:10px;
  margin-bottom:24px;
  transition:all .2s;
}
.add-form:hover{
  border-color:var(--border2);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.settings-section-title{
  font-size:.75rem;
  font-weight:700;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:20px 0 10px;
  padding-bottom:8px;
  border-bottom:2px solid var(--border);
}
.suggestion-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:var(--surface2);
  border:2px solid var(--warning-dim);
  border-radius:8px;
  margin-bottom:8px;
  transition:all .2s;
}
.suggestion-card:hover{
  background:var(--warning-dim);
  border-color:var(--warning);
  transform:translateX(4px);
}
.suggestion-email{
  font-size:.82rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
  font-family:'IBM Plex Mono',monospace;
}
.suggestion-meta{
  font-size:.72rem;
  color:var(--text3);
}
.suggestion-actions{
  display:flex;
  gap:8px;
}
.list-table{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.list-row{
  display:grid;
  grid-template-columns:80px 1fr 180px 100px;
  gap:10px;
  align-items:center;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  transition:all .15s;
}
.list-row:last-child{
  border-bottom:none;
}
.list-row:hover{
  background:var(--surface2);
  padding-left:24px;
  border-left:4px solid var(--primary);
}
.list-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  background:var(--primary-dim);
  color:var(--primary);
  border-radius:4px;
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.list-value{
  font-size:.78rem;
  font-weight:600;
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  word-break:break-all;
}
.list-reason{
  font-size:.75rem;
  color:var(--text3);
  font-style:italic;
}
.list-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.btn-sm{
  padding:5px 10px;
  background:var(--surface2);
  border:2px solid var(--border);
  border-radius:4px;
  font-size:.72rem;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.btn-sm:hover{
  background:var(--primary-dim);
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-2px);
}
.btn-sm.danger{
  border-color:var(--danger-dim);
  color:var(--danger);
}
.btn-sm.danger:hover{
  background:var(--danger-dim);
  border-color:var(--danger);
  color:var(--danger);
}

/* ── SUGGESTION ICON ── */
.suggestion-icon{
  width:28px;
  height:28px;
  min-width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--warning-dim);
  border-radius:6px;
  color:var(--warning);
}

/* ── BUTTON ICON ALIGNMENT ── */
.btn-primary svg,
.btn-sm svg{
  vertical-align:middle;
  margin-right:6px;
}

/* ── SETTINGS SECTION TITLE ICON ── */
.settings-section-title{
  display:flex;
  align-items:center;
}

/* ── CONFIRM MODAL ── */
.modal-confirm{
  max-width:480px;
  width:90%;
  height:auto !important;
  max-height:90vh;
  min-height:auto;
}
.modal-confirm .modal-body{
  padding:14px;
  flex:0 0 auto;
}
.confirm-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:14px;
}
.btn-secondary{
  padding:7px 14px;
  background:var(--surface2);
  border:2px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:all .2s;
}
.btn-secondary:hover{
  background:var(--surface3);
  border-color:var(--border2);
  transform:translateY(-2px);
}
#confirmMessage{
  font-size:.82rem;
  line-height:1.6;
  color:var(--text2);
}
#confirmInput{
  width:100%;
  margin-top:16px;
  margin-bottom:0;
}

/* ── FIX: Remove colored backgrounds when sidebar is collapsed ── */
.sidebar.collapsed .nav-item.active{
  background:transparent;
}
.sidebar.collapsed .nav-item.active::before{
  display:none;
}
/* Removed: sidebar.collapsed .nav-item:hover background (was showing unwanted grey box) */

/* ── FIX: Remove live dot shadow and borders when sidebar is collapsed ── */
.sidebar.collapsed .live-dot{
  box-shadow:none !important;
  animation:none;
}
.sidebar.collapsed .live-pill{
  background:transparent;
}
.sidebar.collapsed .live-pill::before{
  display:none;
}
.sidebar.collapsed .sidebar-footer{
  border-top:none;
}
.sidebar.collapsed .logo{
  border-bottom:none;
}

/* ── Order Detail Modal: Auto height ── */
.modal-order{
  height:auto !important;
  max-height:90vh;
  overflow-y:auto;
}

/* ── Embedded mode: Hide internal navigation when in Shopify ── */
/* Ocultar sidebar completamente cuando está embebido */
.sidebar.hidden-embedded {
  display: none !important;
}

/* Hacer que main ocupe todo el ancho cuando está embebido */
.main.full-width {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Compatibilidad con clase embedded en body */
body.embedded .sidebar {
  display: none !important;
}

body.embedded .main {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Ajustes adicionales para modo embedded */
@media (max-width: 768px) {
  .sidebar.hidden-embedded {
    display: none !important;
  }
  
  .main.full-width {
    margin-left: 0 !important;
  }
}

/* Soporte legacy para clase embedded-mode */
.embedded-mode .sidebar {
  display: none !important;
}
.embedded-mode .main {
  margin-left: 0 !important;
  width: 100% !important;
}
.embedded-mode .settings-button {
  display: none !important;
}
/* ══════════════════════════════════════════════════════════════════
   FRAUD RULES - CLICKUP STYLE
   ══════════════════════════════════════════════════════════════════ */

.rules-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rule-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  transition: all .2s;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.rule-card:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow-sm);
}

.rule-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 0;
  margin: 0;
  border: none;
  flex: 1;
  min-width: 0;
}

.rule-info {
  flex: 1;
  min-width: 0;
}

.rule-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -.02em;
}

.rule-description {
  font-size: .72rem;
  color: var(--text2);
  line-height: 1.4;
}

.custom-badge {
  display:inline-block;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:3px;
  background:var(--primary-dim);color:var(--primary);vertical-align:middle;margin-left:6px;
  letter-spacing:.03em;text-transform:uppercase;
}
.btn-icon-sm {
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:5px;border:1px solid transparent;background:transparent;
  color:var(--text3);cursor:pointer;transition:all .2s;flex-shrink:0;
}
.btn-icon-sm:hover {
  background:var(--danger-dim,rgba(235,87,87,.1));color:var(--danger);
  border-color:var(--danger-dim,rgba(235,87,87,.15));
}

/* ── TRIGGER UI (custom rules) ── */
.field-label{display:block;font-weight:600;font-size:.8rem;margin-bottom:5px;color:var(--text2)}
.trigger-mode-selector{display:flex;gap:6px}
.trigger-mode-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 12px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--text2);font-size:.78rem;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.trigger-mode-btn:hover{border-color:var(--border2);color:var(--text)}
.trigger-mode-btn.active{
  background:var(--primary-dim);color:var(--primary);border-color:var(--primary);
}
.trigger-mode-btn svg{flex-shrink:0}
.trigger-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:500px){.trigger-fields{grid-template-columns:1fr}}

/* ── TOGGLE SWITCH (ClickUp style) ── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: .3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(16px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
  background-color: #ffffff !important;
}

.toggle-switch:hover .toggle-slider {
  opacity: 0.9;
}

/* ── POINTS CONTROL ── */
.rule-card-body {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 240px;
}

.points-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.points-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.points-label > span:first-child {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  display: none; /* Ocultar label en formato lista */
}

.points-value {
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  padding: 3px 10px;
  border-radius: 5px;
  transition: all .2s;
  min-width: 38px;
  text-align: center;
}

.points-value.success {
  color: var(--success);
  background: var(--success-dim);
}

.points-value.warning {
  color: var(--warning);
  background: var(--warning-dim);
}

.points-value.danger {
  color: var(--danger);
  background: var(--danger-dim);
}

/* ── SLIDER (ClickUp style) ── */
.points-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 6px;
  border-radius: 4px;
  background: #cbd5e1;
  outline: none;
  transition: all .2s;
  cursor: pointer;
}

.points-slider:hover {
  background: #94a3b8;
}

.points-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
  cursor: pointer;
  box-shadow: 0 2px 8px var(--primary-dim);
  transition: all .2s;
}

.points-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px var(--primary-dim);
}

.points-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-bright));
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px var(--primary-dim);
  transition: all .2s;
}

.points-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px var(--primary-dim);
}

.points-marks {
  display: none; /* Ocultar en formato lista */
}

/* Toggle de activación específico */
#appToggleSwitch {
  width: 48px !important;
  height: 26px !important;
  background: var(--border2) !important;
  /* ... */
}

/* Cuando está activo */
#appToggleSwitch.active {
  background: var(--primary) !important;
}

/* El círculo que se mueve */
#appToggleSwitch::after {
  /* círculo blanco */
}

/* Círculo se desplaza cuando activo */
#appToggleSwitch.active::after {
  transform: translateX(22px) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .rules-grid {
    grid-template-columns: 1fr;
  }
  
  .rule-card {
    padding: 16px;
  }
}/* ════════════════════════════════════════════════════════════════
   FIX: Checkboxes con Check Limpio
   ════════════════════════════════════════════════════════════════
   
   PROBLEMA:
   Los checkboxes muestran un emoji raro (Discord) en lugar de un check
   
   CAUSA:
   El CSS usa content:'✓' que algunos navegadores interpretan como emoji
   
   SOLUCIÓN:
   Usar un SVG data URL para el checkmark
   
   ════════════════════════════════════════════════════════════════ */

/* Checkbox base */
input[type="checkbox"] {
  appearance: none;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--border2) !important;
  border-radius: 4px !important;
  background: var(--surface2) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Hover state */
input[type="checkbox"]:hover {
  border-color: var(--primary) !important;
  background: var(--primary-dim) !important;
}

/* Checked state */
input[type="checkbox"]:checked {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Check mark - usando SVG data URL en lugar de emoji */
input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Disabled state */
input[type="checkbox"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ════════════════════════════════════════════════════════════════
   CÓMO APLICAR:
   
   Añade este código AL FINAL de tu styles-clickup.css
   
   El !important garantiza que sobrescriba cualquier otro estilo
   
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   FIX DEFINITIVO: Toggle de Activación Visual
   ════════════════════════════════════════════════════════════════
   
   Este CSS usa máxima especificidad para garantizar que funcione
   
   INSTRUCCIONES:
   1. Copia TODO este código
   2. Pégalo AL FINAL de tu archivo styles-clickup.css
   3. Guarda
   4. Recarga con Ctrl+Shift+R
   
   ════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOGGLE WRAP - Container del toggle
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#appToggleWrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: var(--surface2) !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
}

#appToggleWrap:hover {
  background: var(--surface3) !important;
  border-color: var(--border2) !important;
}

#appToggleWrap.active {
  background: var(--primary-dim) !important;
  border-color: var(--primary) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOGGLE SWITCH - El interruptor en sí
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#appToggleSwitch {
  position: relative !important;
  width: 38px !important;
  height: 20px !important;
  background: #cbd5e1 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EL CÍRCULO BLANCO - Pseudoelemento ::after
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#appToggleSwitch::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 14px !important;
  height: 14px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  display: block !important;
}

/* ESTADO ACTIVO - Círculo se mueve a la derecha */
#appToggleSwitch.active::after {
  transform: translateX(18px) !important;
}

/* Efecto hover */
#appToggleWrap:hover #appToggleSwitch::after {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LABELS - Texto del toggle
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.toggle-info {
  flex: 1;
}

.toggle-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}

.toggle-desc {
  font-size: 0.72rem;
  color: var(--text3);
}

/* ═══════════════════════════════════════════════════════════════
   EMAIL EDITOR STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Format buttons */
/* ── EMAIL EDITOR ── */
.email-editor-wrap{border:2px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface2)}
.email-editor-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-dim)}
.email-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border-bottom:1px solid var(--border);background:var(--surface1)}
.email-toolbar-vars{border-bottom:1px solid var(--border);background:var(--surface);padding:5px 8px;gap:4px;align-items:center}
.email-toolbar-sep{width:1px;height:20px;background:var(--border);margin:0 3px;flex-shrink:0}
.email-format-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:transparent;border-radius:4px;cursor:pointer;transition:all .15s;color:var(--text2);flex-shrink:0}
.email-format-btn:hover{background:var(--surface3);color:var(--text)}
.email-format-btn:active{transform:scale(.92);background:var(--primary-dim);color:var(--primary)}
.email-format-btn svg{width:14px;height:14px}
.email-var-btn{padding:2px 8px;border:1px solid var(--border);background:var(--surface2);border-radius:4px;font-size:.65rem;font-family:'IBM Plex Mono',monospace;color:var(--primary);cursor:pointer;transition:all .15s;white-space:nowrap}
.email-var-btn:hover{background:var(--primary-dim);border-color:var(--primary)}
.email-editor{min-height:200px;padding:16px;outline:none;font-size:.85rem;line-height:1.7;color:var(--text);background:var(--surface2)}
.email-editor:focus{background:var(--surface1)}
.email-editor strong,.email-editor b{font-weight:700}
.email-editor em,.email-editor i{font-style:italic}
.email-editor u{text-decoration:underline}
.email-editor s,.email-editor strike{text-decoration:line-through;opacity:.6}
.email-editor h3{font-size:1.1rem;font-weight:700;margin:12px 0 6px;color:var(--text)}
.email-editor ul,.email-editor ol{margin:8px 0;padding-left:24px}
.email-editor li{margin:4px 0}
.email-editor a{color:var(--primary);text-decoration:underline}
.email-editor code{background:var(--primary-dim);color:var(--primary);padding:2px 6px;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:.85em}
.email-editor:empty:before{content:'Write your email message here...';color:var(--text3);opacity:.6}

/* Variable hints */
.field-hint code{background:var(--primary-dim);color:var(--primary);padding:2px 8px;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:.8rem;margin:0 4px;display:inline-block}

/* ═══════════════════════════════════════════════════════════════
   FIX: Theme Icons Always Visible
   ═══════════════════════════════════════════════════════════════
   
   Cada opción muestra un preview de cómo se vería ese tema:
   - Dark: fondo oscuro + icono blanco
   - Light: fondo claro + icono oscuro  
   - System: fondo morado + icono blanco
   
   ═══════════════════════════════════════════════════════════════ */

/* Dark theme option - SIEMPRE fondo oscuro con icono blanco */
.theme-option[data-theme="dark"] .theme-icon {
  background: #1a1d24 !important;
}

.theme-option[data-theme="dark"] .theme-icon svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Light theme option - SIEMPRE fondo claro con icono oscuro */
.theme-option[data-theme="light"] .theme-icon {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

.theme-option[data-theme="light"] .theme-icon svg {
  stroke: #1a1d24 !important;
  color: #1a1d24 !important;
}

/* System theme option - Fondo morado con icono blanco */
.theme-option[data-theme="system"] .theme-icon {
  background: #667eea !important;
}

.theme-option[data-theme="system"] .theme-icon svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Hover states - mantener colores pero con brillo */
.theme-option[data-theme="dark"]:hover .theme-icon {
  background: #252932 !important;
}

.theme-option[data-theme="light"]:hover .theme-icon {
  background: #f9fafb !important;
}

.theme-option[data-theme="system"]:hover .theme-icon {
  background: #7c8ef0 !important;
}

/* Active states - añadir glow effect */
.theme-option.active[data-theme="dark"] .theme-icon {
  background: #1a1d24 !important;
  box-shadow: 0 0 0 3px rgba(26, 29, 36, 0.15) !important;
}

.theme-option.active[data-theme="light"] .theme-icon {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}

.theme-option.active[data-theme="system"] .theme-icon {
  background: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* ── BILLING / PRICING ── */

.billing-usage {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.usage-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usage-label {
  font-size: .72rem;
  color: var(--text3);
  font-weight: 500;
}

.usage-value {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
}

.usage-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width .3s;
}

.usage-bar-fill.warning {
  background: var(--warning);
}

.billing-page {
  max-width: 100%;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.pricing-grid.billing-full {
  grid-template-columns: repeat(4, 1fr);
}

.pricing-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 28px 18px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  overflow: visible;
}

.pricing-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

.pricing-card.current {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success), 0 4px 16px rgba(0,200,117,.08);
}

.pricing-card.current:hover {
  transform: none;
  box-shadow: 0 0 0 1px var(--success), 0 4px 16px rgba(0,200,117,.08);
}

.pricing-card.recommended {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 4px 16px rgba(123,104,238,.08);
}

.pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 10px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .5px;
  z-index: 2;
  line-height: 1.3;
}

.pricing-badge.current-badge {
  background: var(--success);
}

.pricing-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}

.pricing-price {
  text-align: center;
  margin: 8px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.price-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
}

.price-period {
  font-size: .78rem;
  color: var(--text3);
  margin-left: 2px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pricing-features li {
  font-size: .7rem;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.pricing-features li.excluded {
  color: var(--text3);
  opacity: .45;
}

.feature-icon {
  font-size: .7rem;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.pricing-features li.included .feature-icon {
  color: var(--success);
}

.pricing-features li.excluded .feature-icon {
  color: var(--text3);
}

.pricing-action {
  margin-top: auto;
}

.btn-plan {
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .2px;
}

.btn-plan.upgrade {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(123, 104, 238, .25);
}

.btn-plan.upgrade:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(123, 104, 238, .35);
}

.btn-plan.downgrade {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
}

.btn-plan.downgrade:hover {
  background: var(--surface3);
  color: var(--text);
}

.btn-plan.current {
  background: var(--success-dim);
  color: var(--success);
  cursor: default;
  border: 1px solid var(--success);
  font-weight: 700;
}

/* Plan badge in dashboard */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 600;
  background: var(--primary-dim);
  color: var(--primary);
}

/* ── PLAN GATING ── */
.plan-gate-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 200px;
}

.plan-gate-icon {
  color: var(--text3);
  margin-bottom: 16px;
  opacity: .5;
}

.plan-gate-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.plan-gate-desc {
  font-size: .82rem;
  color: var(--text3);
}

.plan-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 700;
  background: var(--warning-dim);
  color: var(--warning);
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 2;
  transition: opacity .15s;
}

.plan-gate-badge:hover {
  opacity: .8;
}

.tab-lock-icon {
  opacity: .5;
  margin-left: 2px;
  vertical-align: middle;
}

/* Responsive pricing */
@media (max-width: 900px) {
  .pricing-grid.billing-full {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .pricing-grid,
  .pricing-grid.billing-full {
    grid-template-columns: 1fr;
  }
  .billing-usage {
    flex-wrap: wrap;
  }
  .usage-item {
    min-width: 120px;
  }
}