/* ==========================================================================
   ASID Pro Chart Styles (v1)
   --------------------------------------------------------------------------
   Notes for editors:
   - This CSS is scoped under .asid-pro-chart-wrap to avoid theme collisions.
   - Button system:
       .asid-btn        : base shape (pill)
       .asid-ind-btn    : indicator chips (use --c per indicator)
       .is-active       : on state; keep accents subdued for pro UI
   - Tooltip styling: search ".asid-tt"
   - Keep cascade simple: prefer scoped overrides over scattered duplicates.
   ========================================================================== */

:root{
  --asid-accent:#2563eb;
  --asid-accent-weak:#eff6ff;
  --asid-border:#e5e7eb;
  --asid-border-strong:#d1d5db;
  --asid-text:#111827;
  --asid-muted:#6b7280;
  --asid-surface:#f8fafc;
  --asid-shadow:0 10px 26px rgba(0,0,0,.10);
}

/* ASID Pro Chart v1 (keep v0 layout, reduce inline styles, improve mobile draw UX) */
.asid-pro-chart-wrap{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px;
  background:#fff;
}

.asid-pro-chart-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-bottom:2px;
}

.asid-toolbar-label{
  margin-left:6px;
  font-size:12px;
  opacity:.75;
}

.asid-toolbar-meta{
  margin-left:auto;
  font-size:12px;
  opacity:.75;
}

.asid-btn, button.asid-btn{
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.asid-btn:active, button.asid-btn:active{
  transform: translateY(0.5px);
}

.asid-btn.is-active, button.asid-btn.is-active{
  border-color:#4f46e5;
  background:rgba(79,70,229,.10);
  color:#111827;
}

.asid-btn.is-disabled, button.asid-btn.is-disabled{
  opacity:.55;
}

.asid-btn--settings::before{
  content: "⚙";
  font-size: 12px;
  line-height: 1;
  opacity: .9;
}

.asid-ind-btn, button.asid-ind-btn{
  /* per-indicator base color (rgb) via --c */
  --c: 79,70,229;
}
.asid-ind-btn[data-ind="MA"]{ --c: 34,197,94; }
.asid-ind-btn[data-ind="EMA"]{ --c: 59,130,246; }
.asid-ind-btn[data-ind="BOLL"]{ --c: 168,85,247; }
.asid-ind-btn[data-ind="ICHIMOKU"]{ --c: 20,184,166; }
.asid-ind-btn[data-ind="PSAR"]{ --c: 251,146,60; }
.asid-ind-btn[data-ind="RSI"]{ --c: 245,158,11; }
.asid-ind-btn[data-ind="MACD"]{ --c: 99,102,241; }
.asid-ind-btn[data-ind="DISP"]{ --c: 16,185,129; }
.asid-ind-btn[data-ind="PSY"]{ --c: 245,158,11; }
.asid-ind-btn[data-ind="HV"]{ --c: 168,85,247; }
.asid-ind-btn[data-ind="FSTO"]{ --c: 14,165,233; }
.asid-ind-btn[data-ind="SSTO"]{ --c: 56,189,248; }
.asid-ind-btn[data-ind="RCI"]{ --c: 244,63,94; }


.asid-pro-chart-wrap .asid-ind-btn:hover,
.asid-pro-chart-wrap button.asid-ind-btn:hover{
  border-color: rgba(var(--c), .70);
  background: rgba(var(--c), .06);
}
.asid-pro-chart-wrap .asid-ind-btn.is-active, .asid-pro-chart-wrap button.asid-ind-btn.is-active{
  border-color: rgba(var(--c), .95);
  background: rgba(var(--c), .10);
  color:#111827;
}

.asid-panels{
  position:relative;
}

.asid-chart{
  width:100%;
  height: var(--asid-chart-h, 720px);
  touch-action: none;
  overscroll-behavior: contain;
}

.asid-splitter{
  position:absolute;
  left:0;
  right:0;
  height:10px;
  cursor:row-resize;
  display:none;
  z-index:5;
}

.asid-pro-chart-empty{
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  font-size:13px;
}

/* Floating panels (Draw / S/R Settings) */
.asid-float-panel{
  position:absolute;
  display:none;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 16px 38px rgba(0,0,0,.10);
  overflow:hidden;
  font-size:12px;
  z-index:20;
}

.asid-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border-bottom:1px solid #eee;
  gap:10px;
}

.asid-panel-title{
  font-weight:700;
}

.asid-panel-head-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.asid-panel-body{
  padding:8px 10px;
  overflow:auto;
}

.asid-mini-btn, button.asid-mini-btn{
  border:1px solid #111;
  border-radius:10px;
  background:#fff;
  padding:4px 10px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  font-size:11px;
}

.asid-mini-btn-subtle, button.asid-mini-btn-subtle{
  border-color:#ddd;
}

.asid-input, input.asid-input{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:6px 8px;
  outline:none;
  font-size:12px;
}

.asid-muted{
  opacity:.7;
}
.asid-pad-sm{
  padding:8px 2px;
}

.asid-draw-panel{
  right:12px;
  top:60px;
  z-index:6;
  width:260px;
  max-height:340px;
}

.asid-draw-panel .asid-panel-body{
  max-height:290px;
}

.asid-draw-row{
  border:1px solid #eee;
  background:#fff;
  border-radius:12px;
  padding:8px;
  margin:8px 0;
}

.asid-draw-row.is-selected{
  border-color:#3b82f6;
  background:rgba(59,130,246,0.06);
}

.asid-draw-row-head{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.asid-draw-row-title{
  font-weight:700;
  min-width:0;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.asid-draw-row-mid{
  margin-top:6px;
}

.asid-draw-row-foot{
  margin-top:6px;
  display:flex;
  gap:6px;
  opacity:.8;
}



/* Indicator Settings Panel (same family as S/R & Draw) */
.asid-ind-panel{
  position:absolute;
  right:10px;
  top:100px;
  width:340px;
  max-width:92vw;
  z-index:30;
}
.asid-ind-panel .asid-panel-body{
  max-height:420px;
  overflow:auto;
}

.asid-sr-panel{
  left:12px;
  top:100px;
  z-index:7;
  width:320px;
  max-height:420px;
}

.asid-sr-panel .asid-panel-body{
  padding:10px 10px;
  max-height:360px;
}

.asid-form-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin:8px 0;
}

.asid-form-label{
  width:150px;
  opacity:.85;
}

.asid-form-h2{
  font-weight:700;
  margin:14px 0 6px;
}

.asid-form-h2.first{
  margin-top:8px;
}

.asid-check{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  opacity:.85;
}

.asid-note{
  margin-top:8px;
  opacity:.85;
}

/* Mobile: toolbar becomes more compact / panels adapt */
@media (max-width: 640px){
  .asid-pro-chart-toolbar{
    gap:6px;
  }
  .asid-toolbar-meta{
    margin-left:0;
    width:100%;
  }
  .asid-draw-panel,
  .asid-sr-panel,
  .asid-ind-panel{
    width: min(92vw, 360px);
  }
  .asid-form-label{
    width: 120px;
  }
}


/* Draw panel actions */
.asid-draw-panel-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:8px;
}

.asid-mini-btn-danger, button.asid-mini-btn-danger{
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.35);
  color: rgba(185,28,28,1);
}
.asid-mini-btn-danger:hover, button.asid-mini-btn-danger:hover{
  background: rgba(239,68,68,0.16);
}

/* ---------------------------------
 * ECharts Tooltip (Pro / Compact)
 * --------------------------------- */
.asid-tt{ 
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
}
.asid-tt .asid-tt-box{
  background: rgba(15,23,42,0.92);
  color: #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  padding: 7px 9px;
  min-width: 180px;
  max-width: 320px;
}
.asid-tt .asid-tt-hd{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  margin-bottom: 4px;
}
.asid-tt .asid-tt-date{ opacity: .95; }
.asid-tt .asid-tt-close{ opacity: .98; }
.asid-tt .asid-tt-close.up{ color: #22c55e; }
.asid-tt .asid-tt-close.down{ color: #ef4444; }

.asid-tt .asid-tt-ohlc{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  font-size: 12px;
  opacity: .92;
  margin-bottom: 4px;
}
.asid-tt .asid-tt-sub{
  font-size: 12px;
  opacity: .92;
  margin-bottom: 6px;
}
.asid-tt .asid-tt-ch.up{ color: #22c55e; }
.asid-tt .asid-tt-ch.down{ color: #ef4444; }

.asid-tt .asid-tt-kv{
  display:grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 4px;
  font-size: 10px;
  opacity: .94;
}
.asid-tt .asid-tt-k{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.asid-tt .asid-tt-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
  flex: 0 0 auto;
}
.asid-tt .asid-tt-v{
  text-align: right;
  white-space: nowrap;
  color: #f1f5f9;
}


/* v1 tooltip grouped layout */
.asid-tt .asid-tt-groups{
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.asid-tt .asid-tt-grp-h{
  font-size: 10px;
  color: #94a3b8;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 2px;
  opacity: .95;
}
.asid-tt .asid-tt-grp-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 4px;
}
.asid-tt .asid-tt-it{
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.asid-tt .asid-tt-nm{
  color: #cbd5e1;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asid-tt .asid-tt-val{
  font-size:11px;
  margin-left:auto;
  color:#f1f5f9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== Pro polish (v1) ===== */
.asid-pro-chart-wrap{
  border:1px solid var(--asid-border);
  border-radius:16px;
  padding:12px;
  background:#fff;
}

.asid-pro-chart-toolbar{
  gap:8px;
  margin-bottom:10px;
}

.asid-toolbar-label{
  margin-left:8px;
  font-size:11px;
  letter-spacing:.02em;
  /* text-transform: uppercase; */
  color:var(--asid-muted);
  opacity:1;
}

.asid-toolbar-meta{
  margin-left:auto;
  font-size:12px;
  color:var(--asid-muted);
  opacity:1;
  white-space:nowrap;
}
.asid-toolbar-meta__scode{
  font-weight:700;
  color:var(--asid-text);
}
.asid-toolbar-meta__sep{
  margin:0 6px;
  opacity:.8;
}
.asid-toolbar-meta__index{
  font-weight:600;
  color:var(--asid-text);
}
.asid-toolbar-meta__range{
  margin-left:8px;
  opacity:.85;
}

/* Buttons: consistent, pro, and WP-style resistant */
.asid-pro-chart-wrap button.asid-btn,
.asid-pro-chart-wrap .asid-btn{
  border:1px solid var(--asid-border-strong);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  line-height:1;
  /* default: not bold when inactive */
  font-weight:400;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:background .15s ease,border-color .15s ease,transform .05s ease;
}

/* Keep the 4 primary mode toggles bold even when inactive (Adj / vs Index / log / BOLL σ=n) */
.asid-pro-chart-wrap button.asid-btn[data-action="toggleAdjusted"],
.asid-pro-chart-wrap button.asid-btn[data-action="toggleCompareMode"],
.asid-pro-chart-wrap button.asid-btn[data-action="toggleLog"],
.asid-pro-chart-wrap button.asid-btn[data-action="toggleBollSigma"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleAdjusted"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleCompareMode"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleLog"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleBollSigma"]{
  font-weight:600;
}

/* Neutral buttons (non-indicator) */
.asid-pro-chart-wrap button.asid-btn:not(.asid-ind-btn),
.asid-pro-chart-wrap .asid-btn:not(.asid-ind-btn){
  background:#fff;
  color:var(--asid-text);
}
.asid-pro-chart-wrap button.asid-btn:not(.asid-ind-btn):hover,
.asid-pro-chart-wrap .asid-btn:not(.asid-ind-btn):hover{
  background:var(--asid-surface);
  border-color:#bfc6d1;
}
.asid-pro-chart-wrap button.asid-btn.is-active:not(.asid-ind-btn),
.asid-pro-chart-wrap .asid-btn.is-active:not(.asid-ind-btn){
  background:var(--asid-accent);
  border-color:var(--asid-accent);
  color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.18);
}
.asid-pro-chart-wrap button.asid-btn:active,
.asid-pro-chart-wrap .asid-btn:active{
  transform: translateY(0.5px);
}
.asid-pro-chart-wrap button.asid-btn:focus-visible,
.asid-pro-chart-wrap .asid-btn:focus-visible{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* Active buttons: emphasize state (Settings keeps its own weight) */
.asid-pro-chart-wrap button.asid-btn.is-active,
.asid-pro-chart-wrap .asid-btn.is-active{
  font-weight:600;
}

/* Settings buttons */
.asid-pro-chart-wrap button.asid-btn--settings,
.asid-pro-chart-wrap .asid-btn--settings{
  background:var(--asid-accent-weak);
  border-color:#93c5fd;
  color:#1d4ed8;
  font-weight:700;
}
.asid-pro-chart-wrap button.asid-btn--settings.is-active,
.asid-pro-chart-wrap .asid-btn--settings.is-active{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
}
.asid-pro-chart-wrap button.asid-btn--settings:before,
.asid-pro-chart-wrap .asid-btn--settings:before{
  content: "⚙";
  font-size: 12px;
  line-height: 1;
  opacity: .9;
  margin-right: 6px;
}

/* Indicator buttons: override base styling using per-indicator --c (rgb) */
.asid-pro-chart-wrap button.asid-ind-btn,
.asid-pro-chart-wrap .asid-ind-btn{
  border-color: rgba(var(--c), .45);
  /* inactive text should be neutral (black) */
  color: var(--asid-text);
  background:#fff;
}
.asid-pro-chart-wrap button.asid-ind-btn:hover,
.asid-pro-chart-wrap .asid-ind-btn:hover{
  border-color: rgba(var(--c), .70);
  background: rgba(var(--c), .06);
  color: var(--asid-text);
}
.asid-pro-chart-wrap button.asid-ind-btn.is-active,
.asid-pro-chart-wrap .asid-ind-btn.is-active{
  border-color: rgba(var(--c), .95);
  background: rgba(var(--c), .12);
  color:#111827;
  font-weight:600;
}


/* OHLC meta bar: more professional */
.asid-ohlc-bar{
margin:0;
  padding:4px 6px;
  font-size:11px;
  opacity:.92;
  border:1px solid var(--asid-border);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  color:var(--asid-text);
}
.asid-meta-left,
.asid-meta-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.asid-meta-scode{font-weight:800;}
.asid-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid var(--asid-border);
  background:var(--asid-surface);
  color:var(--asid-muted);
  font-weight:700;
}
.asid-pill.is-on{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.35); color:#065f46; }
.asid-pill.is-off{ background:rgba(107,114,128,.10); border-color:rgba(107,114,128,.25); color:#374151; }
.asid-meta-k{ color:var(--asid-muted); font-weight:600; font-size:11px; }
.asid-meta-v{ font-weight:700; }
.asid-meta-dot{ opacity:.5; }
.asid-meta-delta{
  padding:1px 7px;
  border-radius:999px;
  font-weight:800;
  font-size:11px;
}
.asid-meta-delta.is-up{ background:rgba(16,185,129,.12); color:#065f46; border:1px solid rgba(16,185,129,.35); }
.asid-meta-delta.is-down{ background:rgba(239,68,68,.12); color:#7f1d1d; border:1px solid rgba(239,68,68,.35); }
.asid-meta-delta.is-flat{ background:rgba(107,114,128,.10); color:#374151; border:1px solid rgba(107,114,128,.25); }
.asid-meta-compare{
  color:var(--asid-muted);
  font-weight:700;
  font-size:12px;
}

@media (max-width: 680px){
  .asid-ohlc-bar{justify-content:flex-start; font-size:11px;}
}


/* ---------------------------------
 * Button palette refinements (v1)
 * - Keep chart main; avoid overly vivid active fills for utility controls.
 * --------------------------------- */

/* Settings button: remove any flex-gap (icon uses :before margin) */
.asid-pro-chart-wrap button.asid-btn--settings,
.asid-pro-chart-wrap .asid-btn--settings{
  gap: 0;
}

/* Special toggles (Adj / vs Index / log / BOLL σ=n): muted indigo tone, no strong glow */
.asid-pro-chart-wrap button.asid-btn[data-action="toggleAdjusted"],
.asid-pro-chart-wrap button.asid-btn[data-action="toggleCompareMode"],
.asid-pro-chart-wrap button.asid-btn[data-action="toggleLog"],
.asid-pro-chart-wrap button.asid-btn[data-action="toggleBollSigma"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleAdjusted"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleCompareMode"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleLog"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleBollSigma"]{
  border-color: rgba(99,102,241,.35);
}
.asid-pro-chart-wrap button.asid-btn[data-action="toggleAdjusted"]:hover,
.asid-pro-chart-wrap button.asid-btn[data-action="toggleCompareMode"]:hover,
.asid-pro-chart-wrap button.asid-btn[data-action="toggleLog"]:hover,
.asid-pro-chart-wrap button.asid-btn[data-action="toggleBollSigma"]:hover,
.asid-pro-chart-wrap .asid-btn[data-action="toggleAdjusted"]:hover,
.asid-pro-chart-wrap .asid-btn[data-action="toggleCompareMode"]:hover,
.asid-pro-chart-wrap .asid-btn[data-action="toggleLog"]:hover,
.asid-pro-chart-wrap .asid-btn[data-action="toggleBollSigma"]:hover{
  background: rgba(99,102,241,.06);
  border-color: rgba(99,102,241,.50);
}
.asid-pro-chart-wrap button.asid-btn.is-active[data-action="toggleAdjusted"],
.asid-pro-chart-wrap button.asid-btn.is-active[data-action="toggleCompareMode"],
.asid-pro-chart-wrap button.asid-btn.is-active[data-action="toggleLog"],
.asid-pro-chart-wrap button.asid-btn.is-active[data-action="toggleBollSigma"],
.asid-pro-chart-wrap .asid-btn.is-active[data-action="toggleAdjusted"],
.asid-pro-chart-wrap .asid-btn.is-active[data-action="toggleCompareMode"],
.asid-pro-chart-wrap .asid-btn.is-active[data-action="toggleLog"],
.asid-pro-chart-wrap .asid-btn.is-active[data-action="toggleBollSigma"]{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.60);
  color: var(--asid-text);
  box-shadow: none;
}

/* Draw tools: subdued active tone (blue but not vivid fill) */
.asid-pro-chart-wrap button.asid-btn.is-active[data-action^="draw:"]:not(.asid-ind-btn),
.asid-pro-chart-wrap .asid-btn.is-active[data-action^="draw:"]:not(.asid-ind-btn){
  background: rgba(14,165,233,.10);
  border-color: rgba(14,165,233,.55);
  color: var(--asid-text);
  box-shadow: none;
}
/* Draw: Clear button (distinct but quiet) */
.asid-pro-chart-wrap button.asid-btn[data-action="clearDraw"],
.asid-pro-chart-wrap .asid-btn[data-action="clearDraw"]{
  background:#f3f4f6;
  border-color:#d1d5db;
  color:#374151;
}
.asid-pro-chart-wrap button.asid-btn[data-action="clearDraw"]:hover,
.asid-pro-chart-wrap .asid-btn[data-action="clearDraw"]:hover{
  background:#e5e7eb;
  border-color:#cbd5e1;
}

/* S/R: Show button should read as a different control (muted blue) */
.asid-pro-chart-wrap button.asid-btn[data-action="toggleSR"],
.asid-pro-chart-wrap .asid-btn[data-action="toggleSR"]{
  background:#f0f7ff;
  border-color:#cfe6ff;
  color: var(--asid-text);
}
.asid-pro-chart-wrap button.asid-btn[data-action="toggleSR"]:hover,
.asid-pro-chart-wrap .asid-btn[data-action="toggleSR"]:hover{
  background:#e7f2ff;
  border-color:#b9ddff;
}
.asid-pro-chart-wrap button.asid-btn.is-active[data-action="toggleSR"]:not(.asid-ind-btn),
.asid-pro-chart-wrap .asid-btn.is-active[data-action="toggleSR"]:not(.asid-ind-btn){
  background: rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.62);
  color: var(--asid-text);
  box-shadow:none;
}
/* S/R profile buttons: subdued active state (muted blue) */
.asid-pro-chart-wrap button.asid-btn.asid-sr-p-btn.is-active:not(.asid-ind-btn),
.asid-pro-chart-wrap .asid-btn.asid-sr-p-btn.is-active:not(.asid-ind-btn){
  background: rgba(14,165,233,.10);
  border-color: rgba(14,165,233,.55);
  color: var(--asid-text);
  box-shadow:none;
}


/* ==========================================================================
   Auto Technical Analysis (Tech Wrap)
   - Rendered outside .asid-pro-chart-wrap (sibling).
   - JS writes contents into .asid-pro-tech-grid.
   ========================================================================== */
.asid-pro-tech-wrap{
  margin-top:10px;
  border:1px solid var(--asid-border);
  border-radius:14px;
  padding:10px;
  background:var(--asid-surface);
}

.asid-pro-tech-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.asid-pro-tech-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:12px;
  color:var(--asid-text);
}

.asid-pro-tech-meta{
  font-size:11px;
  color:var(--asid-muted);
  text-align:right;
  line-height:1.2;
}


.asid-pro-tech-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.asid-pro-tech-opts{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.asid-pro-tech-opt{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--asid-muted);
  user-select:none;
}

.asid-pro-tech-opt input{
  transform: translateY(1px);
}

.asid-pro-tech-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.asid-tech-card{
  border:1px solid var(--asid-border);
  border-radius:14px;
  background:#fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 120px;
}

.asid-tech-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.asid-tech-card-title{
  font-weight:800;
  font-size:12px;
  color:var(--asid-text);
}

.asid-tech-badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  border-radius:999px;
  padding:2px 8px;
  border:1px solid var(--asid-border-strong);
  background:#fff;

  /* Keep badges strictly single-line (avoid JP char wrapping like 強↵気) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  flex:0 0 auto;
  line-height:1.1;
}

.asid-tech-badge--bull{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
  color:#065f46;
}
.asid-tech-badge--bear{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.10);
  color:#7f1d1d;
}
.asid-tech-badge--neutral{
  border-color: rgba(148,163,184,.65);
  background: rgba(148,163,184,.14);
  color:#334155;
}
.asid-tech-badge--warn{
  border-color: rgba(245,158,11,.65);
  background: rgba(245,158,11,.12);
  color:#92400e;
}

.asid-tech-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size: 11px;
}
.asid-tech-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  color:var(--asid-text);
}
.asid-tech-line .k{
  color:var(--asid-muted);
  font-size:11px;
  white-space:nowrap;
}
.asid-tech-line .v{
  font-weight:650;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* Event pills can be multi-line (override .v default nowrap). */
.asid-tech-line .v.asid-tech-event{
  white-space: normal;
  text-overflow: clip;
}

.asid-tech-event{
  display:inline-flex;
  align-items:flex-start;
  gap:6px;
  padding:3px 6px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.55);
  background: rgba(248,250,252,.8);
  cursor:pointer;
  user-select:none;
  max-width: 100%;
}
.asid-tech-event:hover{
  border-color: rgba(37,99,235,.55);
  background: rgba(37,99,235,.06);
}
.asid-tech-event .ev-dot{
  width:6px; height:6px;
  margin-top:4px;
  border-radius:99px;
  background: rgba(37,99,235,.8);
  flex:0 0 auto;
}
/* Tone colors (good/bad) */
.asid-tech-event.is-bull .ev-dot{ background: rgba(34,197,94,.85); }
.asid-tech-event.is-bear .ev-dot{ background: rgba(239,68,68,.85); }
.asid-tech-event.is-warn .ev-dot{ background: rgba(245,158,11,.90); }
.asid-tech-event.is-neutral .ev-dot{ background: rgba(148,163,184,.85); }

.asid-tech-line .v.is-bull{ color:#065f46; }
.asid-tech-line .v.is-bear{ color:#7f1d1d; }
.asid-tech-line .v.is-warn{ color:#92400e; }
.asid-tech-line .v.is-neutral{ color:#334155; }

.asid-tech-event .ev-text{
  /* Allow up to 3 lines so longer terms (e.g., ゴールデンクロス / 上側バンドウォーク) remain readable. */
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
  white-space:normal;
  line-height:1.2;
}


/*
  Tech meter semantics
  -------------------
  JS sets data-mode on .asid-tech-meter to make the interpretation obvious at a glance.
  - bull_bear : center=neutral, left=bearish, right=bullish (e.g., RCI, MACD hist if added later)
  - warn_ends : center=neutral, both ends=caution (oscillators: RSI/STO/PSY/DISP)
  - risk_high : left=low risk, right=high risk (e.g., HV)
  Marks (.m-mark) show key levels (30/50/70 etc.) and the pin (.m-pin) shows current value.
*/
.asid-tech-meter{
  position:relative;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(148,163,184,.14);
}

/* Bull/Bear centered metrics (e.g., MACD hist, RCI) */
.asid-tech-meter[data-mode="bull_bear"]{
  background: linear-gradient(90deg,
    rgba(239,68,68,.30) 0%,
    rgba(148,163,184,.18) 50%,
    rgba(34,197,94,.30) 100%);
}
/* Oscillators where extremes are caution (e.g., RSI, STO, PSY, DISP) */
.asid-tech-meter[data-mode="warn_ends"]{
  background: linear-gradient(90deg,
    rgba(245,158,11,.30) 0%,
    rgba(148,163,184,.18) 50%,
    rgba(245,158,11,.30) 100%);
}
/* Metrics where higher is risk (e.g., HV) */
.asid-tech-meter[data-mode="risk_high"]{
  background: linear-gradient(90deg,
    rgba(148,163,184,.14) 0%,
    rgba(245,158,11,.30) 100%);
}

.asid-tech-meter .m-mark{
  position:absolute;
  top:1px;
  bottom:1px;
  width:1px;
  background: rgba(15,23,42,.18);
  transform: translateX(-50%);
}
.asid-tech-meter .m-pin{
  position:absolute;
  top:-3px;
  width:2px;
  height:16px;
  background: rgba(15,23,42,.75);
  border-radius: 999px;
  transform: translateX(-50%);
}
.asid-tech-meter .m-pin::after{
  content:"";
  position:absolute;
  top:4px;
  left:50%;
  transform: translateX(-50%);
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(15,23,42,.75);
  box-shadow: 0 1px 2px rgba(15,23,42,.25);
}



.asid-tech-details{
  margin-top:6px;
}
.asid-tech-details-summary{
  cursor:pointer;
  font-size:12px;
  color: var(--asid-muted);
  user-select:none;
  outline:none;
}
.asid-tech-details-summary::-webkit-details-marker{
  display:none;
}
.asid-tech-details[open] .asid-tech-details-summary{
  margin-bottom:6px;
}
@media (max-width: 520px){
  .asid-pro-tech-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .asid-pro-tech-meta{ text-align:left; }
  .asid-pro-tech-right{ align-items:flex-start; }
  .asid-pro-tech-opts{ justify-content:flex-start; }
}