:root {
  --accent: #05b8d9;
  --accent-glow: rgba(5,184,217,0.25);
  --bg: #0a0e17;
  --bg-card: #111827;
  --bg-input: #1a2032;
  --border: rgba(255,255,255,0.08);
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --text-faint: #5c7089;
  --red: #ef4444;
  --green: #22c55e;
  --green-dim: rgba(34,197,94,0.12);
  --red-dim: rgba(239,68,68,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

#app { max-width: 600px; margin: 0 auto; padding: 0 16px 40px; }
#header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 16px; border-top: 1px solid var(--border); gap: 12px; margin-top: 16px; }
#logo { height: 28px; width: auto; }
#user-info { display: flex; align-items: center; gap: 8px; }
#user-name { color: var(--text-dim); font-size: 14px; }
.badge { font-size: 11px; padding: 3px 8px; border-radius: 99px; font-family: var(--font-mono); background: rgba(5,184,217,0.12); color: var(--accent); border: 1px solid rgba(5,184,217,0.25); }

#tabs { display: flex; gap: 4px; margin: 0 0 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; padding: 9px 18px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; background: transparent; color: var(--text-dim); transition: all 0.2s; font-family: var(--font); }
.tab-btn:hover { color: var(--text); background: var(--bg-input); }
.tab-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(5,184,217,0.06); }

.section { display: none; }
.section.active { display: block; }
.section h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--text); }

.trade-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.toolbar-left { display: flex; gap: 6px; flex: 1; }
.toolbar-left select {
  padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono);
  font-size: 12.5px; min-width: 90px; max-width: 140px;
}
.toolbar-left select:focus { outline: none; border-color: var(--accent); }
.toolbar-right { flex-shrink: 0; }
.live-price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent); }

.trade-subtabs { display: flex; gap: 2px; margin-bottom: 12px; background: var(--bg-input); border-radius: var(--radius-sm); padding: 3px; }
.subtab-btn { flex: 1; padding: 8px 12px; font-size: 12.5px; font-weight: 500; border: none; border-radius: 6px; cursor: pointer; background: transparent; color: var(--text-dim); transition: all 0.2s; font-family: var(--font); }
.subtab-btn:hover { color: var(--text); }
.subtab-btn.active { background: var(--accent); color: #03121a; font-weight: 600; }

.global-summary-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.gs-item { background: var(--bg-input); border-radius: var(--radius-sm); padding: 12px; }
.gs-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.gs-value { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.gs-value.green { color: var(--green); }
.gs-value.red { color: var(--red); }
.gs-value.accent { color: var(--accent); }

.tt-wrap { position: relative; display: inline-flex; cursor: help; margin-left: 6px; vertical-align: middle; }
.tt-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; font-size: 10px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-faint); line-height: 1; transition: all 0.2s; }
.tt-wrap:hover .tt-icon, .tt-wrap:focus .tt-icon { color: var(--accent); border-color: var(--accent); }
.tt-text { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 270px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; line-height: 1.45; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 10px 12px; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 10; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease; }
.tt-wrap:hover .tt-text, .tt-wrap:focus .tt-text { visibility: visible; opacity: 1; }

.exchange-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.exchange-row:last-child { border-bottom: none; }
.exchange-pnl { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.exchange-pnl.green { color: var(--green); }
.exchange-pnl.red { color: var(--red); }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--accent); }
.card p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.card a { color: #fff; text-decoration: underline; }

.exchange-block { margin-bottom: 16px; }
.exchange-block:last-child { margin-bottom: 0; }
.exchange-name { font-size: 13px; font-family: var(--font-mono); color: var(--accent); margin-bottom: 8px; padding: 4px 10px; background: rgba(5,184,217,0.08); border-radius: var(--radius-sm); display: inline-block; }

.balance-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.bal-item { background: var(--bg-input); border-radius: var(--radius-sm); padding: 10px 12px; }
.bal-item .label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.bal-item .value { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.bal-item .value.green { color: var(--green); }
.bal-item .value.red { color: var(--red); }
.bal-item .value.accent { color: var(--accent); }

.pos-item {
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--accent);
}
.pos-item.Short { border-left-color: var(--red); }
.pos-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pos-ticker { font-weight: 700; font-size: 16px; }
.pos-dir { font-size: 12px; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); }
.pos-dir.Long { background: var(--green); color: #fff; }
.pos-dir.Short { background: var(--red); color: #fff; }
.pos-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; font-size: 12px; }
.pos-details span { color: var(--text-faint); }
.pos-details strong { color: var(--text); display: block; font-family: var(--font-mono); font-size: 13px; }
.pos-details strong.green { color: var(--green); }
.pos-details strong.red { color: var(--red); }

.order-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--bg-input); border-radius: var(--radius-sm); margin-bottom: 6px;
}
.order-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.order-ticker { font-weight: 600; font-size: 14px; }
.order-meta { font-size: 12px; color: var(--text-dim); }
.cancel-btn { flex-shrink: 0; background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.2); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-family: var(--font); }
.cancel-btn:hover { background: rgba(239,68,68,0.2); }

.strategy-card { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--bg-input); border-radius: var(--radius-sm); margin-bottom: 8px; border: 1px solid var(--border); }
.strategy-card.active { border-color: var(--accent); background: rgba(5,184,217,0.06); }
.strategy-card .s-name { font-weight: 500; font-size: 14px; }
.strategy-card .s-status { font-size: 12px; padding: 3px 8px; border-radius: 4px; }
.s-status.running { background: var(--green-dim); color: var(--green); }
.s-status.stopped { background: var(--red-dim); color: var(--red); }
.copy-status-box { margin: -2px 0 10px; padding: 10px 12px; background: rgba(5,184,217,0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11px; color: var(--text-faint); }
.copy-status-box > div:not(.copy-positions-title):not(.copy-error) { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.copy-status-box strong { color: var(--text); font-family: var(--font-mono); font-weight: 500; }
.copy-status-box strong.green { color: var(--green); }
.copy-status-box strong.red { color: var(--red); }
.copy-positions-title { margin-top: 8px; margin-bottom: 5px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.copy-position-row { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.04); }
.copy-position-row span:last-child { text-align: right; }
.copy-empty { display: block; padding-top: 3px; }
.copy-error { margin-top: 8px; color: var(--red); line-height: 1.35; overflow-wrap: anywhere; }
.copy-check-label { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12px; cursor: pointer; }
.copy-check-label input { width: 16px; height: 16px; accent-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px;
  font-family: var(--font); font-size: 14px; font-weight: 500; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.2s; border: none; color: #fff;
}
.btn-primary { background: var(--accent); color: #03121a; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
.btn-danger:hover { background: rgba(239,68,68,0.2); }
.btn-small { padding: 6px 14px; font-size: 12px; }
.btn-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.btn-block { width: 100%; justify-content: center; }

.input-group { margin-bottom: 14px; }
.input-group label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.input-group input, .input-group select {
  width: 100%; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: 14px;
  transition: border-color 0.2s;
}
.input-group input:focus, .input-group select:focus { outline: none; border-color: var(--accent); }
.input-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.input-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }

.empty-state { text-align: center; padding: 32px 16px; color: var(--text-faint); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: .3; }

.loading { text-align: center; padding: 32px 0; color: var(--text-faint); }
.loading::after { content: '...'; animation: dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%,20% { content: '.'; } 40% { content: '..'; } 60%,100% { content: '...'; } }

#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  padding: 10px 24px; border-radius: var(--radius); font-size: 14px; font-weight: 500;
  z-index: 999; transition: opacity 0.3s; pointer-events: none;
  background: var(--bg-card); border: 1px solid var(--accent); color: var(--accent);
}
#toast.error { border-color: var(--red); color: var(--red); }
#toast.hidden { opacity: 0; }

.login-screen { text-align: center; padding: 60px 20px; }
.login-screen h1 { font-size: 22px; margin-bottom: 8px; }
.login-screen p { color: var(--text-dim); margin-bottom: 24px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; padding: 8px 6px; color: var(--text-faint); font-weight: 500; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.admin-table .uid { font-family: var(--font-mono); color: var(--accent); }

.tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
  font-size: 10px; font-weight: 600; line-height: 1; cursor: pointer; user-select: none;
  background: rgba(5,184,217,0.15); color: var(--accent);
  border: 1px solid rgba(5,184,217,0.35); vertical-align: middle;
}
.tip.open { background: var(--accent); color: #03121a; }
.tip-popup {
  position: fixed; z-index: 9999; width: 260px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  color: var(--text); font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); pointer-events: none;
}
.reg-help {
  background: rgba(5,184,217,0.08); border: 1px solid rgba(5,184,217,0.25);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px;
}
.reg-help.hidden { display: none; }
.reg-help-title { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.reg-help-body { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); white-space: pre-line; }

.chart-shell { position: relative; width: 100%; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
.chart-controls { position: relative; z-index: 20; background: var(--bg-card); }
.chart-control-row { display: flex; align-items: center; gap: 6px; padding: 6px; }
.chart-control-btn {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-input); color: var(--text-dim); font: 12px var(--font); cursor: pointer;
}
.chart-control-btn:hover, .chart-control-btn:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.chart-fullscreen-btn { margin-left: auto; min-width: 32px; padding-left: 7px; padding-right: 7px; font-size: 16px; line-height: 1; }
.chart-panel { border-top: 1px solid var(--border); padding: 8px; }
.chart-panel.hidden { display: none; }
.chart-panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.chart-panel-close { border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.chart-panel-close:hover { color: var(--text); }
.chart-panel-close-labeled { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.chart-panel-close-labeled span:first-child { font-size: 18px; line-height: 1; }
.indicator-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; padding-right: 3px; }
.indicator-btn { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-dim); font: 12px var(--font-mono); cursor: pointer; }
.indicator-btn:hover { border-color: var(--accent); color: var(--text); }
.indicator-btn.active { border-color: var(--accent); background: rgba(5,184,217,0.14); color: var(--accent); }
.indicator-params { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; }
.indicator-params-title { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.indicator-param-row { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font: 11px var(--font-mono); }
.indicator-param-row strong { min-width: 38px; color: var(--accent); font-weight: 600; }
.indicator-param-values { display: flex; flex-wrap: wrap; gap: 5px; }
.indicator-param { display: inline-flex; align-items: center; gap: 4px; color: var(--text-faint); font: 10px var(--font); }
.indicator-param input { width: 58px; padding: 4px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-input); color: var(--text); font: 11px var(--font-mono); }
.indicator-param input:focus { outline: none; border-color: var(--accent); }
.chart-panel-clear { margin-top: 8px; padding: 5px 9px; border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; background: transparent; color: var(--red); font: 11px var(--font); cursor: pointer; }
.chart-panel-clear:hover { background: var(--red-dim); }
.drawing-tools { width: 100%; }
.drawing-grid { display: grid; grid-template-columns: repeat(8, minmax(30px, 1fr)); gap: 5px; }
.drawing-grid .draw-btn { width: 100%; height: 30px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); font-size: 14px; }
.drawing-grid .draw-btn:hover { color: var(--text); border-color: var(--accent); }
.drawing-grid .draw-btn.active { background: var(--accent); color: #03121a; border-color: var(--accent); }
.drawing-actions { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.drawing-actions input[type=color] { width: 28px; height: 28px; padding: 1px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); cursor: pointer; }
.drawing-actions #draw-hint { display: none; flex: 1; color: var(--accent); font-size: 11px; }
.drawing-actions .draw-btn { width: 30px; height: 28px; padding: 0; }
.tv-chart { width: 100%; height: 360px; min-height: 280px; background: var(--bg-card); touch-action: none; }
.chart-shell:fullscreen, .chart-shell.chart-shell-fullscreen { width: 100vw; height: 100vh; margin: 0; border: none; border-radius: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--bg); }
.chart-shell.chart-shell-fullscreen { position: fixed; inset: 0; }
.chart-shell:fullscreen .trade-toolbar, .chart-shell.chart-shell-fullscreen .trade-toolbar { margin-bottom: 0; padding: 8px; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.chart-shell:fullscreen .tv-chart, .chart-shell.chart-shell-fullscreen .tv-chart { flex: 1; height: auto; min-height: 0; border-radius: 0; }

@media (max-width: 480px) {
  .drawing-grid { grid-template-columns: repeat(7, minmax(30px, 1fr)); }
  .tv-chart { height: 330px; }
  .exchange-row { flex-wrap: wrap; gap: 6px; }
  .pnl-actions { width: 100%; justify-content: flex-end; }
  .copy-position-row { grid-template-columns: 1fr auto; }
  .copy-position-row span:last-child { grid-column: 1 / -1; text-align: left; }
}

.seg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg-btn { padding: 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font); transition: all 0.2s; }
.seg-btn:hover { color: var(--text); border-color: var(--accent); }
.seg-btn.active { background: var(--accent); color: #03121a; border-color: var(--accent); font-weight: 600; }
.seg-btn.blue.active { background: var(--green); color: #fff; border-color: var(--green); }
.seg-btn.red.active { background: var(--red); color: #fff; border-color: var(--red); }

.pct-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pct-btn { padding: 7px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); font-size: 12px; font-weight: 600; font-family: var(--font-mono); cursor: pointer; transition: all 0.2s; }
.pct-btn:hover { color: var(--text); border-color: var(--accent); }
.pct-btn.active { background: var(--accent); color: #03121a; border-color: var(--accent); }

.pct-slider-row { display: flex; flex-direction: column; gap: 4px; }
.pct-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--bg-input); border-radius: 3px; outline: none; cursor: pointer; }
.pct-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--accent); border-radius: 50%; cursor: pointer; box-shadow: 0 0 4px rgba(5,184,217,0.4); }
.pct-slider::-moz-range-thumb { width: 24px; height: 24px; background: var(--accent); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 4px rgba(5,184,217,0.4); }
.pct-slider-label { font-size: 13px; font-weight: 600; color: var(--text); text-align: center; font-family: var(--font-mono); }

.draw-btn { width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--text-dim); font-size: 14px; cursor: pointer; font-family: var(--font); transition: all 0.15s; }
.draw-btn:hover { color: var(--text); border-color: var(--border); }
.draw-btn.active { background: var(--accent); color: #03121a; border-color: var(--accent); }

/* ═══ STRATEGY CONFIG MODAL ═══ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5,10,20,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto;
  padding: 20px;
}
.modal-box h3 { font-size: 16px; color: var(--accent); margin-bottom: 4px; }
.modal-box .modal-subtitle { font-size: 12px; color: var(--text-faint); margin-bottom: 16px; }
.modal-box h4 { font-size: 13px; font-weight: 600; color: var(--text); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }
.modal-actions-between { justify-content: space-between; align-items: center; }
.modal-actions-inline { display: flex; gap: 8px; }
.modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; color: var(--text-faint); font-size: 20px; cursor: pointer; line-height: 1; }

.check-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.check-group label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  font-size: 13px; cursor: pointer; user-select: none;
  color: var(--text-dim); transition: all 0.15s;
}
.check-group label:hover { border-color: var(--accent); color: var(--text); }
.check-group label.checked { border-color: var(--accent); color: var(--accent); background: rgba(5,184,217,0.08); }
.check-group label.registered::after { content: ''; display: none; }
.check-group label.public { border-style: dashed; }
.check-group input[type=checkbox] { display: none; }
.check-tags { display: flex; gap: 6px; margin-bottom: 10px; }
.check-tags button {
  font-size: 11px; padding: 3px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  font-family: var(--font); transition: all 0.15s;
}
.check-tags button:hover { border-color: var(--accent); color: var(--accent); }
.ticker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px;
}
.ticker-grid label {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  min-width: 0; overflow: hidden;
  padding: 6px 4px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  font-size: 11px; font-family: var(--font-mono); cursor: pointer; user-select: none;
  color: var(--text-dim); transition: all 0.15s;
}
.ticker-grid label:hover { border-color: var(--accent); color: var(--text); }
.ticker-grid label.checked { border-color: var(--accent); color: var(--accent); background: rgba(5,184,217,0.08); }
.ticker-grid input[type=checkbox] { display: none; }
.ticker-exchange-badges { display: flex; gap: 3px; margin-top: 4px; }
.ticker-exchange-badge { min-width: 16px; padding: 1px 4px; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; background: rgba(255,255,255,0.05); color: var(--text-dim); font-size: 9px; line-height: 1.3; text-align: center; }
.ticker-exchange-badge.k { color: #4cc9f0; border-color: rgba(5,184,217,0.5); background: rgba(5,184,217,0.14); }
.ticker-exchange-badge.r { color: #6ee7a0; border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.14); }
.ticker-exchange-badge.t { color: #c4a6f5; border-color: rgba(168,85,247,0.5); background: rgba(168,85,247,0.14); }
.ticker-exchange-badge.n { color: #fbbf24; border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.14); }
.modal-loading { padding: 16px 0; text-align: center; color: var(--text-faint); font-size: 13px; }
.modal-note { font-size: 11px; color: var(--text-faint); margin-top: 8px; }
.pnl-actions { display: inline-flex; gap: 4px; margin-left: auto; }