*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#06080f;--card:rgba(255,255,255,0.04);--card-border:rgba(255,255,255,0.08);--text:#e2e8f0;--text-dim:#64748b;--accent:#818cf8;--green:#34d399;--yellow:#fbbf24;--red:#f87171;--radius:16px;--grid-line:rgba(255,255,255,0.04);--bar-bg:rgba(255,255,255,0.06);--code-bg:rgba(255,255,255,.08);--shadow-hover:rgba(0,0,0,.3)}
[data-theme="light"]{--bg:#f5f7fa;--card:rgba(0,0,0,0.03);--card-border:rgba(0,0,0,0.08);--text:#1e293b;--text-dim:#64748b;--accent:#6366f1;--green:#059669;--yellow:#d97706;--red:#dc2626;--grid-line:rgba(0,0,0,0.06);--bar-bg:rgba(0,0,0,0.06);--code-bg:rgba(0,0,0,.06);--shadow-hover:rgba(0,0,0,.08)}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
.container{max-width:960px;margin:0 auto;padding:40px 20px 60px}
header{margin-bottom:36px;display:flex;justify-content:space-between;align-items:flex-start}
h1{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(--text-dim);font-size:14px;margin-top:4px}
.lang-btn{background:var(--card);border:1px solid var(--card-border);color:var(--text-dim);padding:6px 14px;border-radius:20px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .25s;white-space:nowrap;flex-shrink:0;backdrop-filter:blur(8px);letter-spacing:.02em}
.lang-btn:hover{border-color:var(--accent);color:var(--text);background:rgba(129,140,248,.08);box-shadow:0 0 12px rgba(129,140,248,.1)}
.lang-btn:active{transform:scale(.95)}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px;margin-bottom:20px;backdrop-filter:blur(12px)}
.card h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:16px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}
.metric{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px;transition:transform .2s,box-shadow .2s}
.metric:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow-hover)}
.metric-label{display:block;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.metric-value{display:block;font-size:24px;font-weight:700}
.glow-green{box-shadow:0 0 20px rgba(52,211,153,.15);border-color:rgba(52,211,153,.3)}.glow-green .metric-value{color:var(--green)}
.glow-yellow{box-shadow:0 0 20px rgba(251,191,36,.15);border-color:rgba(251,191,36,.3)}.glow-yellow .metric-value{color:var(--yellow)}
.glow-red{box-shadow:0 0 20px rgba(248,113,113,.15);border-color:rgba(248,113,113,.3)}.glow-red .metric-value{color:var(--red)}
[data-theme="light"] .glow-green{box-shadow:0 0 16px rgba(5,150,105,.1);border-color:rgba(5,150,105,.25)}
[data-theme="light"] .glow-yellow{box-shadow:0 0 16px rgba(217,119,6,.1);border-color:rgba(217,119,6,.25)}
[data-theme="light"] .glow-red{box-shadow:0 0 16px rgba(220,38,38,.1);border-color:rgba(220,38,38,.25)}
.card canvas{width:100%!important;height:360px!important}
#equityChart{height:240px!important}
.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.chart-header h3{margin-bottom:0}
.chart-toggles{display:flex;gap:8px}
.toggle-btn{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--card-border);color:var(--text-dim);padding:5px 12px;border-radius:20px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .25s;user-select:none}
.toggle-btn:hover{border-color:var(--accent);color:var(--text)}
.toggle-btn.active.toggle-price{border-color:rgba(129,140,248,.5);color:var(--accent);background:rgba(129,140,248,.08)}
.toggle-btn.active.toggle-score{border-color:rgba(52,211,153,.5);color:var(--green);background:rgba(52,211,153,.08)}
.toggle-dot{display:inline-block;width:8px;height:8px;border-radius:50%;transition:opacity .25s}
.dot-price{background:var(--accent)}
.dot-score{background:var(--green)}
.toggle-btn:not(.active) .toggle-dot{opacity:.3}
.toggle-btn:not(.active){opacity:.5}
.info-card{font-size:13px;color:var(--text-dim);line-height:1.8}
.info-card code{background:var(--code-bg);padding:2px 6px;border-radius:4px;font-size:12px}
.info-card ul{padding-left:20px;margin:8px 0}
.info-card .section-title{margin-top:12px;color:var(--text)}
.factors{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.factor{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:14px}
.factor-hd{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
.factor-lb{color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.factor-sc{color:var(--text);font-weight:600}
.factor-bar{height:5px;background:var(--bar-bg);border-radius:3px;overflow:hidden}
.factor-fill{height:100%;border-radius:3px;transition:width .6s}
.fill-macro{background:var(--accent)}.fill-cycle{background:var(--yellow)}.fill-trend{background:var(--green)}.fill-sent{background:#f472b6}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px;color:var(--text-dim)}
.spinner{width:36px;height:36px;border:3px solid var(--card-border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error-state{text-align:center;padding:60px 20px;color:var(--text-dim)}
.error-state p{margin-bottom:16px}
.error-state button{background:var(--accent);color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:14px;cursor:pointer;font-family:inherit;transition:opacity .2s}
.error-state button:hover{opacity:.85}
.hidden{display:none!important}
.range-bar { display: flex; gap: 12px; margin-bottom: 24px; align-items: center; flex-wrap: wrap; }
.range-presets { display: inline-flex; background: var(--card); border: 1px solid var(--card-border); padding: 4px; border-radius: 10px; gap: 2px; }
.range-btn { background: transparent; border: none; color: var(--text-dim); padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.25s; }
.range-btn:hover { color: var(--text); }
.range-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3); }
.range-custom { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 4px; transition: border-color 0.2s; }
.range-custom:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.15); }
.custom-range-inp { width: 60px; padding: 4px 6px; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; outline: none; text-align: center; }
.custom-range-inp::placeholder { color: var(--text-dim); opacity: 0.6; }
.range-btn-go { background: var(--code-bg); border: none; color: var(--text); padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.range-btn-go:hover { background: var(--accent); color: #fff; }
footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--card-border);font-size:12px;color:var(--text-dim);text-align:center}
.promo-link{color:var(--green);text-decoration:none;font-size:12px;font-weight:500;transition:all .25s;padding:4px 12px;border-radius:6px;border:1px solid transparent}
.promo-link:hover{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.06);box-shadow:0 0 12px rgba(52,211,153,.1)}
[data-theme="light"] .promo-link:hover{border-color:rgba(5,150,105,.2);background:rgba(5,150,105,.04)}
.header-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}
.theme-btn{background:var(--card);border:1px solid var(--card-border);color:var(--text-dim);width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;font-family:inherit;transition:all .3s;line-height:1;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);padding:0}
.theme-btn:hover{border-color:var(--accent);color:var(--text);background:rgba(129,140,248,.08);box-shadow:0 0 12px rgba(129,140,248,.1);transform:rotate(15deg)}
.theme-btn:active{transform:scale(.9) rotate(30deg)}
[data-theme="light"] .lang-btn:hover,[data-theme="light"] .theme-btn:hover{background:rgba(99,102,241,.06);box-shadow:0 0 12px rgba(99,102,241,.08)}
body{transition:background .3s,color .3s}
.card,.metric,.factor,.lang-btn,.range-btn,.toggle-btn,.theme-btn{transition:all .3s}
.backtest-card{font-size:13px}
.bt-rule{color:var(--text-dim);font-size:12px;margin-bottom:16px;padding:8px 12px;background:var(--code-bg);border-radius:8px;display:inline-block}
.bt-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.bt-metric{text-align:center;padding:12px;background:var(--code-bg);border-radius:10px}
.bt-label{display:block;font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.bt-value{display:block;font-size:20px;font-weight:700;color:var(--text)}
.bt-value.positive{color:var(--green)}.bt-value.negative{color:var(--red)}
.bt-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bt-table{width:100%;border-collapse:collapse;font-size:12px}
.bt-table th{text-align:left;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--card-border)}
.bt-table td{padding:7px 10px;border-bottom:1px solid var(--card-border);color:var(--text);white-space:nowrap}
.bt-table tr:last-child td{border-bottom:none}
.bt-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}
.bt-tag.buy{background:rgba(52,211,153,.12);color:var(--green)}
.bt-tag.sell{background:rgba(248,113,113,.12);color:var(--red)}
.bt-tag.open{background:rgba(129,140,248,.12);color:var(--accent)}
.bt-return.pos{color:var(--green)}.bt-return.neg{color:var(--red)}
.bt-row-hidden{display:none}
.bt-expand-row td{text-align:center;padding:12px 0}
.bt-expand-btn{background:var(--code-bg);border:1px solid var(--card-border);color:var(--text-dim);padding:6px 16px;border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .2s}
.bt-expand-btn:hover{border-color:var(--accent);color:var(--text);background:rgba(129,140,248,.08)}

/* Backtest Actions Panel */
.bt-action-panel {
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: rgba(0, 0, 0, 0.15);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
[data-theme="light"] .bt-action-panel {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

.bt-manual-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}

.bt-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0 10px;
  height: 36px;
  transition: all 0.2s;
  flex: 1;
}
.bt-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.15);
}

.bt-input-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-right: 8px;
  white-space: nowrap;
}

.bt-number-input {
  width: 100%;
  min-width: 36px;
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  outline: none;
  text-align: center;
  font-family: inherit;
  padding: 0;
}

.bt-divider {
  width: 1px;
  background: var(--card-border);
  margin: 0 4px;
}

.bt-optimize-group {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 260px;
  gap: 8px;
  flex-wrap: wrap;
}

.bt-btn {
  font-size: 13px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}


.bt-btn-opt {
  height: 36px;
  border-radius: 8px;
  padding: 0 12px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--card-border);
  flex: 1;
  min-width: 90px;
  white-space: nowrap;
}
.bt-btn-opt:hover {
  background: rgba(129, 140, 248, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}
.bt-btn-opt.active {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  border: none;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}
.bt-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); }
.bt-btn:active { transform: translateY(0); }

#btnSmartFactor {
  background: linear-gradient(135deg, var(--accent), #4f46e5) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
#btnSmartFactor:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 15px rgba(129, 140, 248, 0.4);
}
#btnSmartFactor:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.bt-btn-opt.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
  color: white;
}
.bt-btn-opt.active:active {
  transform: translateY(1px);
}

.optimize-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 10;
}
[data-theme="light"] .optimize-tooltip {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.optimize-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--card-border) transparent transparent transparent;
}
.optimize-wrapper:hover .optimize-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-8px);
}

.sig-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.sig-item {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}

.sig-item:hover {
  transform: translateX(4px);
}

.sig-sb { background: rgba(52, 211, 153, 0.08); color: var(--green); border-color: rgba(52, 211, 153, 0.15); box-shadow: inset 0 0 10px rgba(52, 211, 153, 0.05); }
.sig-b  { background: rgba(52, 211, 153, 0.04); color: var(--green); opacity: 0.85; }
.sig-n  { background: rgba(251, 191, 36, 0.06); color: var(--yellow); border-color: rgba(251, 191, 36, 0.1); }
.sig-c  { background: rgba(248, 113, 113, 0.04); color: var(--red); opacity: 0.85; }
.sig-r  { background: rgba(248, 113, 113, 0.08); color: var(--red); border-color: rgba(248, 113, 113, 0.15); box-shadow: inset 0 0 10px rgba(248, 113, 113, 0.05); }

@media (max-width: 700px) {
  .bt-divider {
    display: none;
  }
  .bt-action-panel {
    flex-direction: column;
    gap: 12px;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.card-header h3 {
  margin-bottom: 0 !important;
}

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weight-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
[data-theme="light"] .weight-config {
  background: rgba(0, 0, 0, 0.015);
}

.weight-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weight-item label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weight-item input {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s;
}

.weight-item input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.15);
}
/* Floating Share Button */
.float-share {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  padding: 12px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5), 0 8px 10px -6px rgba(99, 102, 241, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.02em;
}

.float-share:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 35px -10px rgba(99, 102, 241, 0.6);
  filter: brightness(1.1);
}

.float-share:active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 768px) {
  .float-share {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 13px;
  }
}