/* ==========================================================
   styles.css - TRADEX Screener Dashboard
   Rules: No Arabic | No duplicates | No dead code
   Single :root | appearance always with vendor prefixes
   width:100% on inputs scoped — never global
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ==========================================================
   CSS VARIABLES — DARK MODE (default)
   ========================================================== */
:root {
  --bg-0:        #080808;
  --bg-1:        #0f0f0f;
  --bg-2:        #141414;
  --bg-3:        #1a1a1a;
  --bg-4:        #222222;
  --bg-5:        #2a2a2a;
  --border-1:    #1e1e1e;
  --border-2:    #2a2a2a;
  --border-3:    #333333;
  --text-1:      #e0e0e0;
  --text-2:      #b0b0b0;
  --text-3:      #777777;
  --text-4:      #444444;
  --accent:      #00c9a7;
  --accent-dim:  rgba(0,201,167,0.12);
  --accent-glow: rgba(0,201,167,0.35);
  --positive:    #26a69a;
  --negative:    #ef5350;
  --green:       #3fb950;
  --green-dim:   rgba(63,185,80,0.12);
  --red:         #f85149;
  --red-dim:     rgba(248,81,73,0.12);
  --blue:        #58a6ff;
  --blue-dim:    rgba(88,166,255,0.12);
  --purple:      #bc8cff;
  --row-hover:   rgba(255,255,255,0.03);
  --shadow:      0 4px 24px rgba(0,0,0,0.6);
  --font-mono:   'JetBrains Mono', monospace;
  --font-sans:   'DM Sans', sans-serif;
  --font-xs:     0.70rem;
  --font-sm:     0.78rem;
  --font-md:     0.86rem;
  --font-lg:     0.95rem;
  --font-xl:     1.05rem;
  --radius:      6px;
  --radius-lg:   10px;
  --transition:  0.15s ease;
}

/* ==========================================================
   CSS VARIABLES — LIGHT MODE
   ========================================================== */
[data-theme="light"] {
  --bg-0:        #f0f2f5;
  --bg-1:        #ffffff;
  --bg-2:        #f8f9fb;
  --bg-3:        #eef0f4;
  --bg-4:        #e4e7ec;
  --bg-5:        #d8dce4;
  --border-1:    #e0e3eb;
  --border-2:    #cdd1db;
  --border-3:    #b8bdc8;
  --text-1:      #131722;
  --text-2:      #434651;
  --text-3:      #787b86;
  --text-4:      #a0a4b0;
  --accent:      #00a886;
  --accent-dim:  rgba(0,168,134,0.12);
  --accent-glow: rgba(0,168,134,0.25);
  --positive:    #0a875e;
  --negative:    #c0392b;
  --row-hover:   rgba(0,0,0,0.03);
  --shadow:      0 4px 24px rgba(0,0,0,0.12);
}

/* ==========================================================
   RESET
   ========================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }

body {
  background:  var(--bg-0);
  color:       var(--text-1);
  font-family: var(--font-sans);
  min-height:  100vh;
  overflow-x:  hidden;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }

/* ==========================================================
   BASE INPUT STYLES — no width here (scoped below)
   ========================================================== */
input[type="number"],
input[type="text"],
input[type="date"],
select {
  background:    var(--bg-1);
  border:        1px solid var(--border-2);
  border-radius: var(--radius);
  color:         var(--text-1);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       6px 10px;
  outline:       none;
  transition:    var(--transition);
  -webkit-appearance: none;
  -moz-appearance:    textfield;
  appearance:         textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance:         none;
}
input:focus, select:focus {
  border-color: var(--accent);
  box-shadow:   0 0 0 2px var(--accent-dim);
}
select         { cursor: pointer; }
select option  { background: var(--bg-2); }
input::placeholder { color: var(--text-4); }

/* width:100% only in form contexts — NOT global */
.basic-field input,
.basic-field select,
.bt-field input,
.bt-field select,
.filter-inp,
.alert-form-sel,
.alert-form-inp,
.limit-select {
  width: 100%;
}

[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="date"],
[data-theme="light"] select {
  background:   var(--bg-1);
  border-color: var(--border-2);
  color:        var(--text-1);
}
[data-theme="light"] input::placeholder { color: var(--text-4); }

/* ==========================================================
   TOGGLE SWITCH
   ========================================================== */
.switch { position: relative; display: inline-block; width: 38px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position:      absolute;
  cursor:        pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background:    var(--bg-0);
  border:        1px solid var(--border-2);
  border-radius: 20px;
  transition:    0.3s;
}
.slider::before {
  content: ''; position: absolute;
  height: 12px; width: 12px;
  left: 3px; bottom: 3px;
  background:    var(--text-4);
  border-radius: 50%;
  transition:    0.3s;
}
.switch input:checked + .slider { border-color: var(--accent); background: var(--accent-dim); }
.switch input:checked + .slider::before { background: var(--accent); transform: translateX(18px); }

/* ==========================================================
   HEADER
   ========================================================== */
.app-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 20px;
  height:          52px;
  background:      var(--bg-1);
  border-bottom:   1px solid var(--border-1);
  position:        sticky;
  top:             0;
  z-index:         100;
}
[data-theme="light"] .app-header { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

.header-left  { display: flex; align-items: center; gap: 20px; }
.header-right { display: flex; align-items: center; gap: 8px; }

.logo {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--font-mono);
  font-weight:    700;
  font-size:      13px;
  letter-spacing: 0.1em;
  color:          var(--accent);
}
.logo-icon { font-size: 20px; }
.logo-sub  { color: var(--text-3); font-weight: 400; margin-left: 2px; }

.server-status {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-3);
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background:  var(--text-4);
  transition:  var(--transition);
}
.status-dot.online  { background: var(--green); box-shadow: 0 0 7px var(--green); animation: pulse-dot 2s infinite; }
.status-dot.offline { background: var(--red);   box-shadow: 0 0 7px var(--red); }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.5} }
.status-text { font-size: var(--font-sm); }

.user-info {
  display:      flex;
  align-items:  center;
  gap:          6px;
  padding-left: 10px;
  border-left:  1px solid var(--border-1);
  margin-left:  4px;
}
[data-theme="light"] .user-info { border-left-color: var(--border-1); }

.user-email {
  font-size:     0.68rem;
  color:         var(--text-4);
  max-width:     130px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.btn-profile {
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     1rem;
  padding:       4px 6px;
  border-radius: var(--radius);
  color:         var(--text-3);
  transition:    color 0.2s;
}
.btn-profile:hover { color: var(--accent); }

.btn-logout {
  background:    transparent;
  border:        1px solid var(--border-1);
  color:         var(--text-4);
  padding:       4px 8px;
  border-radius: var(--radius);
  cursor:        pointer;
  font-size:     0.82rem;
  transition:    var(--transition);
  flex-shrink:   0;
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }
[data-theme="light"] .btn-logout { border-color: var(--border-2); color: var(--text-3); }
[data-theme="light"] .btn-logout:hover { border-color: var(--negative); color: var(--negative); }

.btn-theme {
  background:    transparent;
  border:        1px solid var(--border-2);
  color:         var(--text-2);
  padding:       5px 9px;
  border-radius: var(--radius);
  cursor:        pointer;
  font-size:     1rem;
  line-height:   1;
  transition:    var(--transition);
  flex-shrink:   0;
}
.btn-theme:hover { border-color: var(--accent); }
[data-theme="light"] .btn-theme { background: var(--bg-2); border-color: var(--border-2); }

.btn-refresh {
  background:    transparent;
  border:        1px solid var(--border-2);
  color:         var(--accent);
  padding:       6px 14px;
  border-radius: var(--radius);
  font-family:   var(--font-mono);
  font-size:     var(--font-sm);
  cursor:        pointer;
  transition:    var(--transition);
  white-space:   nowrap;
}
.btn-refresh:hover    { background: var(--accent); color: var(--bg-0); }
.btn-refresh:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme="light"] .btn-refresh { border-color: var(--border-2); color: var(--text-2); }

.btn-backtest {
  background:     rgba(88,166,255,0.1);
  color:          var(--blue);
  border:         1px solid rgba(88,166,255,0.3);
  border-radius:  var(--radius);
  padding:        6px 16px;
  font-size:      var(--font-sm);
  font-weight:    600;
  cursor:         pointer;
  letter-spacing: 0.05em;
  font-family:    var(--font-mono);
  transition:     var(--transition);
}
.btn-backtest:hover { background: rgba(88,166,255,0.2); }
[data-theme="light"] .btn-backtest { background: var(--bg-2); border-color: var(--border-2); color: var(--text-2); }

.btn-alerts {
  position:      relative;
  background:    transparent;
  border:        1px solid var(--border-2);
  color:         var(--text-2);
  padding:       6px 12px;
  border-radius: var(--radius);
  cursor:        pointer;
  font-size:     1rem;
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  transition:    var(--transition);
}
.btn-alerts:hover { border-color: var(--accent); color: var(--text-1); }
[data-theme="light"] .btn-alerts { background: var(--bg-2); border-color: var(--border-2); color: var(--text-2); }

.alert-badge {
  background:    var(--red);
  color:         #fff;
  border-radius: 10px;
  font-size:     0.62rem;
  font-weight:   700;
  padding:       1px 5px;
  min-width:     18px;
  text-align:    center;
  line-height:   18px;
}

.btn-export-csv {
  background:    transparent;
  border:        1px solid var(--border-2);
  color:         var(--text-3);
  border-radius: var(--radius);
  padding:       3px 10px;
  font-size:     0.72rem;
  cursor:        pointer;
  transition:    var(--transition);
}
.btn-export-csv:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="light"] .btn-export-csv { background: var(--bg-3); border-color: var(--border-2); color: var(--text-2); }

.btn-ghost {
  background:    none;
  border:        1px solid var(--border-2);
  border-radius: var(--radius);
  color:         var(--text-3);
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       4px 10px;
  cursor:        pointer;
  transition:    var(--transition);
}
.btn-ghost:hover { border-color: var(--border-3); color: var(--text-1); background: var(--bg-4); }
[data-theme="light"] .btn-ghost { color: var(--text-3); }
[data-theme="light"] .btn-ghost:hover { color: var(--text-1); }

.mode-toggle {
  display:       flex;
  background:    var(--bg-0);
  border:        1px solid var(--border-2);
  border-radius: var(--radius);
  padding:       2px;
  gap:           2px;
}
.mode-btn {
  background:     none;
  border:         none;
  cursor:         pointer;
  color:          var(--text-3);
  font-family:    var(--font-mono);
  font-size:      var(--font-sm);
  font-weight:    600;
  letter-spacing: 0.06em;
  padding:        4px 14px;
  border-radius:  4px;
  transition:     var(--transition);
}
.mode-btn.active          { background: var(--accent); color: #000; }
.mode-btn:hover:not(.active) { color: var(--text-1); background: var(--bg-3); }
[data-theme="light"] .mode-btn       { background: var(--bg-2); border-color: var(--border-1); color: var(--text-3); }
[data-theme="light"] .mode-btn.active { background: var(--bg-4); color: var(--text-1); border-color: var(--border-3); }

/* ==========================================================
   LAYOUT
   ========================================================== */
.app-layout {
  display:               grid;
  grid-template-columns: 244px 1fr;
  min-height:            calc(100vh - 52px);
}
@media (max-width: 768px) {
  .app-layout  { grid-template-columns: 1fr; }
  .sidebar     { border-right: none; border-bottom: 1px solid var(--border-1); }
  .market-grid { grid-template-columns: repeat(4,1fr); }
}

/* ==========================================================
   SIDEBAR
   ========================================================== */
.sidebar {
  background:     var(--bg-1);
  border-right:   1px solid var(--border-1);
  padding:        14px 10px;
  display:        flex;
  flex-direction: column;
  gap:            14px;
  overflow-y:     auto;
}
[data-theme="light"] .sidebar { background: var(--bg-1); border-right-color: var(--border-1); }

/* ==========================================================
   PANEL
   ========================================================== */
.panel {
  background:    var(--bg-2);
  border:        1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow:      hidden;
}
.panel-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         9px 13px;
  background:      var(--bg-3);
  border-bottom:   1px solid var(--border-1);
  flex-wrap:       wrap;
  gap:             6px;
}
.panel-title {
  font-family:    var(--font-mono);
  font-size:      var(--font-md);
  font-weight:    600;
  letter-spacing: 0.14em;
  color:          var(--text-3);
}
.panel-count {
  font-family:   var(--font-mono);
  font-size:     var(--font-sm);
  color:         var(--accent);
  background:    var(--accent-dim);
  padding:       1px 7px;
  border-radius: 10px;
}
.panel-actions { display: flex; align-items: center; gap: 8px; }

[data-theme="light"] .panel        { background: var(--bg-1); border-color: var(--border-1); }
[data-theme="light"] .panel-header { background: var(--bg-2); border-bottom-color: var(--border-1); }
[data-theme="light"] .panel-title  { color: var(--text-3); }
[data-theme="light"] .panel-count  { color: var(--text-3); background: var(--bg-3); }

/* ==========================================================
   MARKET GRID
   ========================================================== */
.market-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   5px;
  padding:               9px;
}
.market-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  padding:        8px 4px;
  background:     var(--bg-1);
  border:         1px solid var(--border-1);
  border-radius:  var(--radius);
  cursor:         pointer;
  transition:     var(--transition);
  font-family:    var(--font-mono);
}
.market-card:hover  { border-color: var(--border-3); background: var(--bg-4); transform: translateY(-1px); }
.market-card.active { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 10px var(--accent-glow); }
.market-flag  { font-size: 18px; }
.market-name  { font-size: var(--font-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--text-2); }
.market-count { font-size: var(--font-xs); color: var(--text-4); }

[data-theme="light"] .market-card        { background: var(--bg-2); border-color: var(--border-1); }
[data-theme="light"] .market-card:hover  { border-color: var(--accent); }
[data-theme="light"] .market-card.active { background: var(--bg-3); }
[data-theme="light"] .market-name        { color: var(--text-2); }
[data-theme="light"] .market-count       { color: var(--text-3); }

/* ==========================================================
   PRESETS
   ========================================================== */
.preset-list { display: flex; flex-direction: column; gap: 4px; padding: 7px; }
.preset-btn {
  display:       flex;
  align-items:   center;
  gap:           9px;
  padding:       7px 9px;
  background:    var(--bg-1);
  border:        1px solid var(--border-1);
  border-radius: var(--radius);
  cursor:        pointer;
  text-align:    left;
  transition:    var(--transition);
  width:         100%;
}
.preset-btn:hover  { border-color: var(--border-3); background: var(--bg-4); }
.preset-btn.active { border-color: var(--green); background: var(--green-dim); }
.preset-icon { font-size: 15px; flex-shrink: 0; }
.preset-info { display: flex; flex-direction: column; gap: 1px; }
.preset-name { font-size: var(--font-sm); font-weight: 500; color: var(--text-1); }
.preset-desc { font-size: var(--font-xs); color: var(--text-3); }

[data-theme="light"] .preset-btn        { background: var(--bg-2); border-color: var(--border-1); }
[data-theme="light"] .preset-btn:hover  { background: var(--bg-3); }
[data-theme="light"] .preset-name       { color: var(--text-1); }
[data-theme="light"] .preset-desc       { color: var(--text-3); }

/* ==========================================================
   MAIN CONTENT
   ========================================================== */
.main-content {
  padding:        14px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  overflow-y:     auto;
}

/* ==========================================================
   SAVED SCREENS
   ========================================================== */
.ss-save-btn { background: var(--accent); color: #000; border: none; border-radius: var(--radius); padding: 3px 10px; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.ss-save-btn:hover { filter: brightness(1.1); }
.ss-list  { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.ss-empty { font-size: 0.75rem; color: var(--text-4); padding: 8px 12px; }
.ss-item  { display: flex; align-items: center; justify-content: space-between; background: var(--bg-3); border: 1px solid var(--border-1); border-radius: var(--radius); padding: 8px 10px; gap: 8px; }
.ss-item:hover { border-color: var(--accent); }
.ss-item-info  { flex: 1; cursor: pointer; }
.ss-item-name  { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-1); }
.ss-item-meta  { display: block; font-size: 0.68rem; color: var(--text-4); margin-top: 2px; }
.ss-delete-btn { background: none; border: none; color: var(--text-4); cursor: pointer; font-size: 0.8rem; padding: 2px 5px; border-radius: 3px; }
.ss-delete-btn:hover { color: var(--red); background: var(--red-dim); }

/* ==========================================================
   CONDITION BUILDER — BASIC MODE
   ========================================================== */
.basic-mode { padding: 14px; }
.basic-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(175px,1fr));
  gap:                   14px;
}
.basic-field { display: flex; flex-direction: column; gap: 6px; }
.basic-field label { font-size: 11px; font-family: var(--font-mono); color: var(--text-3); letter-spacing: 0.04em; }
.range-inputs { display: flex; align-items: center; gap: 5px; }
.range-inputs span { color: var(--text-4); font-size: 12px; }

.match-toggle {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
  color:       var(--text-3);
  cursor:      pointer;
  font-family: var(--font-mono);
}
.match-toggle input { cursor: pointer; accent-color: var(--accent); }

[data-theme="light"] .basic-field label { color: var(--text-2); }
[data-theme="light"] .basic-field input,
[data-theme="light"] .basic-field select { background: var(--bg-2); border-color: var(--border-2); color: var(--text-1); }
[data-theme="light"] .match-toggle { color: var(--text-2); }

/* ==========================================================
   CONDITION BUILDER — ADVANCED MODE (TV-style rows)
   ========================================================== */
.advanced-mode   { padding: 8px 12px 12px; }
.conditions-list { display: block; margin-bottom: 8px; min-height: 32px; }

.tv-row {
  display:        flex;
  flex-direction: row;
  flex-wrap:      nowrap;
  align-items:    center;
  gap:            5px;
  padding:        6px 8px;
  background:     var(--bg-2);
  border:         1px solid var(--border-1);
  border-radius:  var(--radius);
  margin-bottom:  5px;
  width:          100%;
  overflow:       hidden;
  transition:     border-color 0.2s;
}
.tv-row:hover { border-color: var(--border-3); }

/* TV row inputs — explicit widths, flex-shrink:0, no width:100% */
.tv-indicator-select {
  width:          95px;
  flex-shrink:    0;
  background:     var(--bg-3);
  border:         1px solid var(--border-2);
  color:          var(--blue);
  border-radius:  4px;
  padding:        4px 6px;
  font-size:      0.78rem;
  font-weight:    600;
  cursor:         pointer;
  outline:        none;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

.tv-operator-select {
  width:          145px;
  flex-shrink:    0;
  background:     var(--bg-3);
  border:         1px solid var(--border-2);
  color:          var(--text-2);
  border-radius:  4px;
  padding:        4px 6px;
  font-size:      0.78rem;
  cursor:         pointer;
  outline:        none;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

.tv-period-select {
  width:          62px;
  flex-shrink:    0;
  background:     var(--bg-3);
  border:         1px solid var(--border-2);
  color:          var(--text-2);
  border-radius:  4px;
  padding:        4px 4px;
  font-size:      0.78rem;
  text-align:     center;
  cursor:         pointer;
  outline:        none;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}

.tv-period-input {
  width:          58px;
  flex-shrink:    0;
  background:     var(--bg-3);
  border:         1px solid var(--border-2);
  color:          var(--text-2);
  border-radius:  4px;
  padding:        4px 4px;
  font-size:      0.78rem;
  text-align:     center;
  outline:        none;
  -webkit-appearance: none;
  -moz-appearance:    textfield;
  appearance:         textfield;
}

.tv-value-input {
  width:          65px;
  flex-shrink:    0;
  background:     var(--bg-3);
  border:         1px solid var(--border-2);
  color:          var(--text-1);
  border-radius:  4px;
  padding:        4px 6px;
  font-size:      0.82rem;
  font-weight:    600;
  text-align:     center;
  outline:        none;
  transition:     border-color 0.15s;
  -webkit-appearance: none;
  -moz-appearance:    textfield;
  appearance:         textfield;
}
.tv-value-input:focus { border-color: var(--blue); background: var(--bg-4); }

.tv-val-sep  { color: var(--text-4); font-size: 0.75rem; flex-shrink: 0; }

.tv-remove-btn {
  background:    none;
  border:        1px solid var(--border-1);
  color:         var(--text-4);
  border-radius: 4px;
  padding:       3px 7px;
  cursor:        pointer;
  font-size:     0.7rem;
  margin-left:   auto;
  flex-shrink:   0;
  transition:    var(--transition);
}
.tv-remove-btn:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }

.cb-add-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  width:           100%;
  background:      var(--bg-2);
  border:          1px dashed var(--border-2);
  color:           var(--text-4);
  border-radius:   var(--radius);
  padding:         7px;
  cursor:          pointer;
  font-size:       0.8rem;
  margin-top:      4px;
  transition:      var(--transition);
}
.cb-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-3); }

.cb-empty {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       16px;
  color:         var(--text-4);
  font-size:     0.82rem;
  border:        1px dashed var(--border-1);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.cb-empty-icon { font-size: 1.1rem; }

[data-theme="light"] .tv-row              { background: var(--bg-2); border-color: var(--border-1); }
[data-theme="light"] .tv-indicator-select,
[data-theme="light"] .tv-operator-select,
[data-theme="light"] .tv-period-select,
[data-theme="light"] .tv-period-input,
[data-theme="light"] .tv-value-input      { background: var(--bg-1); border-color: var(--border-2); color: var(--text-1); }
[data-theme="light"] .cb-add-btn          { background: var(--bg-3); border-color: var(--border-2); color: var(--text-3); }
[data-theme="light"] .cb-add-btn:hover    { border-color: var(--accent); color: var(--accent); }

/* ==========================================================
   SCAN BAR
   ========================================================== */
.scan-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px;
  background:      var(--bg-2);
  border:          1px solid var(--border-1);
  border-radius:   var(--radius-lg);
  flex-wrap:       wrap;
  gap:             10px;
}
.scan-info     { display: flex; flex-direction: column; gap: 2px; }
.scan-market   { font-family: var(--font-mono); font-size: var(--font-md); font-weight: 600; color: var(--text-1); }
.scan-summary  { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--text-3); }
.scan-controls { display: flex; align-items: center; gap: 10px; }
.limit-select  { width: auto; font-size: 12px; padding: 5px 10px; }

.btn-scan {
  display:         flex;
  align-items:     center;
  gap:             8px;
  background:      var(--accent);
  border:          none;
  border-radius:   var(--radius);
  color:           #000;
  font-family:     var(--font-mono);
  font-size:       var(--font-md);
  font-weight:     700;
  letter-spacing:  0.08em;
  padding:         8px 22px;
  cursor:          pointer;
  transition:      var(--transition);
  min-width:       145px;
  justify-content: center;
}
.btn-scan:hover    { filter: brightness(1.15); box-shadow: 0 0 18px var(--accent-glow); }
.btn-scan.scanning { background: var(--bg-3); border: 1px solid var(--accent); color: var(--accent); cursor: not-allowed; }

.auto-refresh-countdown {
  display:       inline-flex;
  align-items:   center;
  font-size:     11px;
  color:         var(--text-3);
  background:    var(--bg-3);
  border:        1px solid var(--border-2);
  border-radius: var(--radius);
  padding:       4px 8px;
  margin-left:   8px;
  font-family:   var(--font-mono);
  white-space:   nowrap;
  transition:    color 0.3s;
}

@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.spin { animation: spin 0.7s linear infinite; display: inline-block; }

[data-theme="light"] .scan-bar    { background: var(--bg-1); border-color: var(--border-1); }
[data-theme="light"] .scan-market { color: var(--text-1); }
[data-theme="light"] .btn-scan    { background: var(--accent); color: #000; }

/* ==========================================================
   FILTER PANEL
   ========================================================== */
.filter-panel {
  background:    var(--bg-2);
  border:        1px solid var(--border-1);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow:      hidden;
}
.filter-panel-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 14px;
  cursor:      pointer;
  user-select: none;
  background:  var(--bg-3);
  transition:  background 0.15s;
}
.filter-panel-header:hover { background: var(--bg-4); }
.filter-panel-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; }
.filter-active-badge { font-size: 0.58rem; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); border-radius: 3px; padding: 1px 5px; }
.filter-toggle-icon { margin-left: auto; font-size: 0.75rem; color: var(--text-4); transition: transform 0.2s; }
.filter-body  { padding: 10px 14px 12px; border-top: 1px solid var(--border-1); }
.filter-row   { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.filter-group { display: flex; align-items: center; gap: 5px; }
.filter-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-4); text-transform: uppercase; white-space: nowrap; margin-right: 2px; }

.filter-inp {
  width:         80px;
  background:    var(--bg-1);
  border:        1px solid var(--border-2);
  border-radius: var(--radius);
  color:         var(--text-2);
  font-size:     0.72rem;
  font-family:   var(--font-mono);
  padding:       4px 6px;
  outline:       none;
  transition:    border-color 0.15s;
  -webkit-appearance: none;
  -moz-appearance:    textfield;
  appearance:         textfield;
}
.filter-inp:focus { border-color: var(--blue); color: var(--text-1); }
.filter-sep { color: var(--text-4); font-size: 0.8rem; }

.btn-reset-filters {
  margin-left:   auto;
  background:    transparent;
  border:        1px solid var(--border-2);
  border-radius: var(--radius);
  color:         var(--text-4);
  font-size:     0.65rem;
  font-weight:   600;
  padding:       4px 10px;
  cursor:        pointer;
  transition:    var(--transition);
  white-space:   nowrap;
}
.btn-reset-filters:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

[data-theme="light"] .filter-panel        { background: var(--bg-2); border-color: var(--border-1); }
[data-theme="light"] .filter-panel-header { background: var(--bg-3); }
[data-theme="light"] .filter-inp          { background: var(--bg-1); border-color: var(--border-2); color: var(--text-1); }
[data-theme="light"] .filter-label        { color: var(--text-3); }

/* ==========================================================
   RESULTS TABLE
   ========================================================== */
.results-panel { animation: fade-in 0.3s ease; }
@keyframes fade-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.results-meta { display: flex; align-items: center; gap: 10px; }
.result-count { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--green); background: var(--green-dim); padding: 2px 8px; border-radius: 10px; }
.scan-time    { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--text-4); }

.table-wrapper { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.results-table th {
  padding:        8px 12px;
  text-align:     left;
  font-family:    var(--font-mono);
  font-size:      var(--font-sm);
  font-weight:    600;
  letter-spacing: 0.1em;
  color:          var(--text-3);
  background:     var(--bg-3);
  border-bottom:  1px solid var(--border-1);
  white-space:    nowrap;
  user-select:    none;
}
.results-table th.sortable       { cursor: pointer; transition: var(--transition); }
.results-table th.sortable:hover { color: var(--accent); }
.sort-icon        { color: var(--text-4); margin-left: 3px; font-size: 9px; opacity: 0.4; transition: opacity 0.15s, color 0.15s; }
.sort-icon.active { opacity: 1; color: var(--accent); }

.result-row { border-bottom: 1px solid var(--border-1); transition: var(--transition); animation: row-appear 0.3s ease both; }
@keyframes row-appear { from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:translateX(0)} }
.result-row:hover { background: var(--row-hover); }

.results-table td { padding: 8px 12px; vertical-align: middle; white-space: nowrap; }
.rank-cell    { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--text-4); width: 34px; }
.symbol-cell  { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: var(--font-md); }
.score-cell   { min-width: 80px; }
.score-num    { font-family: var(--font-mono); font-weight: 700; font-size: var(--font-md); color: var(--text-1); }
.score-bar    { height: 3px; background: var(--bg-0); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.score-fill   { height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: 2px; transition: width 0.6s ease; }
.price-cell   { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--text-2); }
.rsi-cell     { font-family: var(--font-mono); font-size: var(--font-sm); font-weight: 600; color: var(--blue); }
.rsi-cell.oversold   { color: var(--green); }
.rsi-cell.overbought { color: var(--red); }
.change-cell  { font-family: var(--font-mono); font-size: var(--font-sm); font-weight: 600; }
.change-cell.positive { color: var(--green); }
.change-cell.negative { color: var(--red); }
.volume-cell  { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--purple); }
.signals-cell { display: flex; gap: 4px; flex-wrap: wrap; min-width: 80px; }

.signal-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px; }
.signal-tag.sma   { background: var(--blue-dim);        color: var(--blue); }
.signal-tag.ema   { background: var(--blue-dim);        color: #79c0ff; }
.signal-tag.bull  { background: var(--green-dim);       color: var(--green); }
.signal-tag.vol   { background: rgba(188,140,255,0.12); color: var(--purple); }
.signal-tag.os    { background: var(--green-dim);       color: var(--green); }
.signal-tag.ob    { background: var(--red-dim);         color: var(--red); }
.signal-tag.macd  { background: var(--accent-dim);      color: var(--accent); }
.signal-tag.bb    { background: var(--blue-dim);        color: var(--blue); }
.signal-tag.stoch { background: rgba(188,140,255,0.12); color: var(--purple); }
.signal-tag.atr   { background: rgba(248,81,73,0.12);   color: #ff9d94; }

[data-theme="light"] .results-panel { background: var(--bg-1); }
[data-theme="light"] .results-table thead th { background: var(--bg-2); }
[data-theme="light"] .results-table tbody tr { border-bottom-color: var(--border-1); }
[data-theme="light"] .results-table tbody tr:hover { background: var(--row-hover); }
[data-theme="light"] .symbol-cell  { color: var(--text-1); }
[data-theme="light"] .score-fill   { background: var(--accent); }

/* ==========================================================
   EMPTY STATE
   ========================================================== */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         60px 20px;
  gap:             10px;
  animation:       fade-in 0.3s ease;
}
.empty-icon { font-size: 38px; color: var(--text-4); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.empty-text { font-size: var(--font-xl); font-weight: 500; color: var(--text-3); }
.empty-sub  { font-size: var(--font-sm); color: var(--text-4); font-family: var(--font-mono); text-align: center; }

[data-theme="light"] .empty-icon { color: var(--border-3); }
[data-theme="light"] .empty-text { color: var(--text-2); }
[data-theme="light"] .empty-sub  { color: var(--text-3); }

/* ==========================================================
   CHART OVERLAY
   ========================================================== */
#chartOverlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.75);
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.chart-indicator-badge {
  font-size:     0.72rem;
  color:         var(--text-4);
  background:    var(--bg-2);
  border:        1px solid var(--border-1);
  border-radius: 3px;
  padding:       2px 6px;
  margin-left:   6px;
  white-space:   nowrap;
}
[data-theme="light"] #chartOverlay { background: rgba(0,0,0,0.4); }
[data-theme="light"] #chartPanel   { background: var(--bg-1); }

/* ==========================================================
   BACKTEST OVERLAY
   ========================================================== */
#bt-overlay {
  position:        fixed;
  inset:           0;
  z-index:         2000;
  background:      rgba(0,0,0,0.8);
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  overflow-y:      auto;
  padding:         24px 16px;
}
.bt-panel {
  background:     var(--bg-1);
  border:         1px solid var(--border-2);
  border-radius:  var(--radius-lg);
  width:          100%;
  max-width:      820px;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  margin:         auto;
}
.bt-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--bg-2); border-bottom: 1px solid var(--border-2); }
.bt-panel-title  { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: 1px; }
.bt-close-btn    { background: none; border: none; color: var(--text-3); font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: var(--radius); line-height: 1; }
.bt-close-btn:hover { background: var(--bg-4); color: var(--text-1); }

.bt-section        { padding: 14px 20px; border-bottom: 1px solid var(--border-1); }
.bt-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bt-section-title  { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; }
.bt-section-sub    { font-size: 10px; color: var(--text-4); font-style: italic; }
.bt-entry-preview  { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.bt-entry-tag      { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(88,166,255,0.3); border-radius: var(--radius); padding: 3px 10px; font-size: 12px; font-family: var(--font-mono); }
.bt-no-entry       { color: var(--red); font-size: 12px; font-style: italic; }

.bt-mode-toggle { display: flex; gap: 6px; padding: 14px 20px 0; }
.bt-mode-btn {
  flex:           1;
  background:     var(--bg-2);
  border:         1px solid var(--border-1);
  border-radius:  var(--radius);
  color:          var(--text-4);
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  padding:        6px 10px;
  cursor:         pointer;
  transition:     var(--transition);
  text-transform: uppercase;
}
.bt-mode-btn.active             { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
.bt-mode-btn:hover:not(.active) { border-color: var(--border-3); color: var(--text-3); }

.bt-settings-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.bt-field         { display: flex; flex-direction: column; gap: 4px; }
.bt-field label   { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; font-family: var(--font-mono); }

.bt-sel-ctrl,
.bt-inp-ctrl {
  background:    var(--bg-2);
  border:        1px solid var(--border-2);
  border-radius: var(--radius);
  color:         var(--text-1);
  padding:       6px 10px;
  font-size:     13px;
  min-width:     110px;
  font-family:   var(--font-sans);
  outline:       none;
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
}
.bt-sel-ctrl:focus, .bt-inp-ctrl:focus { border-color: var(--blue); }

.bt-match-lbl    { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; cursor: pointer; margin-left: auto; }
.bt-add-rule-btn { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--radius); color: var(--blue); font-size: 12px; padding: 4px 12px; cursor: pointer; transition: var(--transition); }
.bt-add-rule-btn:hover { background: var(--bg-4); }

.bt-rules-list { display: flex; flex-direction: column; gap: 6px; }
.bt-rule-row   { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius); padding: 8px 10px; }
.bt-sel        { background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--radius); color: var(--text-1); padding: 4px 8px; font-size: 12px; outline: none; }
.bt-inp-val,
.bt-inp-per    { background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--radius); color: var(--text-1); padding: 4px 8px; font-size: 12px; width: 70px; outline: none; }
.bt-sel:focus, .bt-inp-val:focus, .bt-inp-per:focus { border-color: var(--blue); }
.bt-btn-remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: var(--radius); margin-left: auto; }
.bt-btn-remove:hover { background: var(--red-dim); }

.bt-run-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--bg-2); border-bottom: 1px solid var(--border-1); }
.bt-run-btn { background: #238636; color: #fff; border: none; border-radius: var(--radius); padding: 9px 28px; font-size: 13px; font-weight: 700; cursor: pointer; margin-left: auto; font-family: var(--font-mono); transition: var(--transition); }
.bt-run-btn:hover { background: #2ea043; }

.bt-status       { border-radius: var(--radius); padding: 7px 14px; font-size: 12px; flex: 1; }
.bt-status-info  { background: var(--blue-dim); color: var(--blue); }
.bt-status-error { background: var(--red-dim);  color: var(--red); }

.bt-stats-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px 0; }
.bt-stat-card { flex: 1; min-width: 100px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bt-stat-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; font-family: var(--font-mono); }
.bt-stat-value { font-size: 22px; font-weight: 700; color: var(--text-1); font-family: var(--font-mono); }
.bt-positive   { color: var(--green); }
.bt-negative   { color: var(--red); }

.bt-chart-wrap      { margin: 14px 20px 20px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 14px; }
.bt-chart-title     { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.6px; font-family: var(--font-mono); margin-bottom: 10px; }
#bt-chart-container { width: 100%; height: 260px; }

.bt-multi-count      { font-size: 0.65rem; color: var(--text-4); margin-left: 8px; }
.bt-multi-table-wrap { overflow-x: auto; margin-top: 8px; }
.bt-multi-table      { width: 100%; border-collapse: collapse; font-size: 0.72rem; font-family: var(--font-mono); }
.bt-mth { padding: 6px 10px; text-align: left; font-size: 0.62rem; font-weight: 700; color: var(--text-4); border-bottom: 1px solid var(--border-1); cursor: pointer; user-select: none; white-space: nowrap; letter-spacing: 0.08em; }
.bt-mth:hover { color: var(--text-2); }
.bt-msort        { font-size: 0.65rem; margin-left: 3px; }
.bt-msort.active { color: var(--blue); }
.bt-mrow         { border-bottom: 1px solid var(--border-1); transition: background 0.1s; }
.bt-mrow:hover   { background: var(--row-hover); }
.bt-mtd          { padding: 6px 10px; color: var(--text-3); white-space: nowrap; }
.bt-mtd-sym      { padding: 6px 10px; color: var(--text-1); font-weight: 600; white-space: nowrap; }

[data-theme="light"] .bt-panel        { background: var(--bg-1); }
[data-theme="light"] .bt-panel-header { background: var(--bg-2); border-bottom-color: var(--border-1); }
[data-theme="light"] .bt-section      { border-bottom-color: var(--border-1); }
[data-theme="light"] .bt-stat-card    { background: var(--bg-2); border-color: var(--border-1); }
[data-theme="light"] .bt-inp-ctrl,
[data-theme="light"] .bt-sel-ctrl     { background: var(--bg-2); border-color: var(--border-2); color: var(--text-1); }
[data-theme="light"] .bt-mode-btn     { background: var(--bg-2); border-color: var(--border-2); color: var(--text-3); }
[data-theme="light"] .bt-mode-btn.active { background: var(--bg-4); color: var(--text-1); }
[data-theme="light"] #bt-overlay      { background: rgba(0,0,0,0.4); }

/* ==========================================================
   ALERTS
   ========================================================== */
.alerts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 2900; }
.alerts-panel   { position: fixed; top: 0; right: 0; height: 100vh; width: 360px; background: var(--bg-1); border-left: 1px solid var(--border-1); z-index: 3000; display: flex; flex-direction: column; overflow-y: auto; }
.alerts-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-1); flex-shrink: 0; }
.alerts-panel-title  { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-2); }
.alerts-close-btn    { background: none; border: none; color: var(--text-4); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; }
.alerts-close-btn:hover { color: var(--text-1); }

.alerts-section     { padding: 14px 16px; border-bottom: 1px solid var(--border-1); }
.alerts-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.alerts-sec-title   { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-4); }
.alerts-hdr-actions { display: flex; gap: 6px; }
.btn-al-action      { background: var(--bg-3); border: 1px solid var(--border-2); color: var(--text-4); font-size: 0.68rem; padding: 3px 8px; border-radius: 3px; cursor: pointer; transition: var(--transition); }
.btn-al-action:hover { border-color: var(--border-3); color: var(--text-1); }
.btn-al-new         { background: var(--accent); border: none; color: #000; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 3px; cursor: pointer; }
.btn-al-new:hover   { filter: brightness(1.1); }

.alerts-notif-list,
.alerts-rules-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.alerts-empty      { font-size: 0.73rem; color: var(--text-4); text-align: center; padding: 18px 0; }

.alert-notif-item             { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius); padding: 10px 12px; }
.alert-notif-item.notif-unread { border-left: 3px solid var(--accent); }
.alert-notif-header           { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.alert-notif-name             { font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.alert-notif-market           { font-size: 0.62rem; color: var(--text-4); background: var(--bg-3); padding: 1px 6px; border-radius: 3px; }
.alert-notif-symbols          { font-size: 0.72rem; color: var(--accent); margin-bottom: 3px; line-height: 1.4; }
.alert-notif-time             { font-size: 0.62rem; color: var(--text-4); }

.alert-rule-item  { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius); padding: 8px 12px; }
.alert-rule-info  { display: flex; flex-direction: column; gap: 2px; }
.alert-rule-name  { font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.alert-rule-meta  { font-size: 0.66rem; color: var(--text-4); }
.btn-alert-del    { background: none; border: none; color: var(--text-4); cursor: pointer; font-size: 0.9rem; padding: 2px 4px; }
.btn-alert-del:hover { color: var(--red); }

.alert-create-form { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius); padding: 12px; margin-top: 10px; }
.alert-form-row    { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.alert-form-lbl    { font-size: 0.68rem; color: var(--text-4); letter-spacing: 0.08em; }
.alert-form-sel    { background: var(--bg-3); border: 1px solid var(--border-2); color: var(--text-1); padding: 6px 8px; border-radius: var(--radius); font-size: 0.76rem; width: 100%; outline: none; }
.alert-form-btns   { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn-al-cancel     { background: transparent; border: 1px solid var(--border-2); color: var(--text-4); padding: 5px 12px; border-radius: var(--radius); cursor: pointer; font-size: 0.73rem; transition: var(--transition); }
.btn-al-cancel:hover { border-color: var(--border-3); color: var(--text-1); }
.btn-al-save       { background: var(--accent); border: none; color: #000; font-weight: 700; padding: 5px 14px; border-radius: var(--radius); cursor: pointer; font-size: 0.73rem; }
.btn-al-save:hover { filter: brightness(1.1); }

.alert-toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg-3); border: 1px solid var(--border-2); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: 12px 16px; display: flex; align-items: center; gap: 12px; z-index: 9999; transform: translateX(130%); transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94); max-width: 310px; box-shadow: var(--shadow); }
.alert-toast.show  { transform: translateX(0); }
.alert-toast-icon  { font-size: 1.3rem; flex-shrink: 0; }
.alert-toast-body  { display: flex; flex-direction: column; gap: 2px; }
.alert-toast-title { font-size: 0.8rem; font-weight: 700; color: var(--text-1); }
.alert-toast-sub   { font-size: 0.7rem; color: var(--text-3); }

[data-theme="light"] .alerts-panel               { background: var(--bg-1); border-left-color: var(--border-1); }
[data-theme="light"] .alert-notif-item,
[data-theme="light"] .alert-rule-item,
[data-theme="light"] .alert-create-form          { background: var(--bg-2); border-color: var(--border-1); }
[data-theme="light"] .alerts-overlay             { background: rgba(0,0,0,0.3); }
[data-theme="light"] .btn-al-action              { background: var(--bg-3); border-color: var(--border-2); color: var(--text-3); }