/* =====================================================================
   konfluenz.css — EMA-Konfluenz · gleiche visuelle Sprache wie das
   Trend-Board (trend.css wird zuerst geladen, hier nur Ergänzungen).
   ===================================================================== */

/* Symbol-Auswahl */
.symsel{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,0.04);border:1px solid var(--line);
  border-radius:4px;color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:0.04em;
  padding:5px 24px 5px 10px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%239fb2c6' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;}
.symsel:hover{border-color:rgba(77,226,240,0.5);}
.symsel:focus{outline:none;border-color:rgba(244,185,66,0.6);}
.symsel optgroup,.symsel option{background:#0a1220;color:var(--ink);font-family:var(--mono);}

/* EMA-Legende */
.legend{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap;}
.lg{display:inline-flex;align-items:center;gap:4px;font-size:8.5px;color:var(--ink-dim);letter-spacing:0.04em;}
.lg i{width:12px;height:2px;border-radius:2px;flex:none;}

/* Chart */
.chartbox{position:relative;padding:6px 6px 2px;}
.chartbox canvas{display:block;width:100%;height:560px;cursor:crosshair;}
.chart-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-dim);pointer-events:none;}
.chart-load[hidden]{display:none;}

/* Quellen-Chips */
.srcchip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.03);border:1px solid var(--line);
  border-radius:4px;color:var(--ink-dim);font-family:var(--mono);font-size:9.5px;letter-spacing:0.04em;
  padding:4px 10px;cursor:pointer;opacity:0.55;transition:opacity 0.15s,border-color 0.15s;}
.srcchip i{width:8px;height:8px;border-radius:2px;background:rgba(var(--c),0.35);flex:none;}
.srcchip.active{opacity:1;color:var(--ink);border-color:rgba(var(--c),0.55);background:rgba(var(--c),0.08);}
.srcchip.active i{background:rgb(var(--c));box-shadow:0 0 6px rgba(var(--c),0.6);}
.srcchip:hover{opacity:0.85;}

/* Zonen-Tabelle */
.zrank{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;
  font-size:9.5px;font-weight:600;background:rgba(255,215,94,0.12);color:var(--gold);border:1px solid rgba(255,215,94,0.35);}
.zbar{display:inline-block;width:110px;height:8px;border-radius:4px;background:rgba(255,255,255,0.05);position:relative;vertical-align:middle;overflow:hidden;}
.zbar i{position:absolute;top:0;bottom:0;left:0;border-radius:4px;background:linear-gradient(90deg,rgba(255,215,94,0.45),var(--gold));}
.zbar.zstack{display:inline-flex;width:90px;}
.zbar.zstack i{position:static;border-radius:0;flex:none;height:100%;}
.zdist.near{color:var(--gold);font-weight:600;}
.zok{color:#2ee6a6;font-weight:600;font-size:10px;}
.zfresh{display:inline-block;padding:1px 5px;border-radius:3px;font-size:8px;letter-spacing:0.06em;text-transform:uppercase;
  color:#4de2f0;border:1px solid rgba(77,226,240,0.4);background:rgba(77,226,240,0.08);vertical-align:middle;}
.zrole{display:inline-block;min-width:16px;text-align:center;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:600;}
.zrole.s{color:#2ee6a6;border:1px solid rgba(46,230,166,0.4);background:rgba(46,230,166,0.08);}
.zrole.w{color:#ff5d73;border:1px solid rgba(255,93,115,0.4);background:rgba(255,93,115,0.08);}
.zrole.f{color:var(--gold);border:1px solid rgba(255,215,94,0.4);background:rgba(255,215,94,0.08);}
.zdir{font-size:9px;color:var(--ink-dim);}
.zworn{color:#f4b942;cursor:help;}
.zno{color:#62748a;font-size:10px;}

@media(max-width:760px){.chartbox canvas{height:420px;}}