*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #1e1e2e; --surface: #282840; --border: #3b3b5c;
  --text: #cdd6f4; --text-muted: #6c7086; --accent: #89b4fa;
  --success: #a6e3a1; --error: #f38ba8;
  --radius: 8px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
}
.container { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; }
header { text-align: center; margin-bottom: 2rem; }
header h1 { font-size: 1.8rem; margin-bottom: 0.25rem; }
header p { color: var(--text-muted); }

.input-section { margin-bottom: 2rem; }
.url-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.url-row input {
  flex: 1; min-width: 250px; padding: 0.75rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
  font-size: 0.95rem;
}
.url-row input:focus { outline: none; border-color: var(--accent); }
.url-row select {
  padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 0.9rem;
}
.url-row button {
  padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius);
  background: var(--accent); color: var(--bg); font-weight: 600;
  cursor: pointer; font-size: 0.95rem;
}
.url-row button:hover { opacity: 0.9; }
.url-row button:disabled { opacity: 0.5; cursor: not-allowed; }
.supported { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }

.loading { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; }
.spinner {
  width: 20px; height: 20px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem;
}
.result-card h3 { margin-bottom: 0.5rem; }
.result-card .label { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.result-card .value { margin-bottom: 1rem; }
.result-card .badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600;
}
.badge.completed { background: #1e3a2f; color: var(--success); }
.badge.failed { background: #3a1e1e; color: var(--error); }
.badge.pending { background: #3a3520; color: #f9e2af; }

.history-section h2 { margin-bottom: 1rem; }
.history-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem;
  cursor: pointer; transition: border-color 0.2s;
}
.history-item:hover { border-color: var(--accent); }
.history-item .meta { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.25rem; }
.history-item .title { font-weight: 500; }
.history-item .date { font-size: 0.8rem; color: var(--text-muted); }

.muted { color: var(--text-muted); }
.hidden { display: none !important; }
pre { white-space: pre-wrap; font-size: 0.85rem; color: var(--text-muted); max-height: 200px; overflow-y: auto; }

/* Settings */
header { position: relative; }
.settings-btn {
  position: absolute; top: 0; right: 0;
  background: none; border: none; font-size: 1.4rem; cursor: pointer;
}
.settings-panel {
  background: var(--card, #1e1e2e); border: 1px solid var(--border, #333);
  border-radius: 8px; padding: 1.2rem; margin-bottom: 1.5rem;
}
.settings-panel h2 { margin-top: 0; font-size: 1.1rem; }
.settings-panel .field { margin: 0.8rem 0; }
.settings-panel label { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; }
.settings-panel .radio-row { display: flex; gap: 1.5rem; }
.settings-panel .radio-row label { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.settings-panel input[type="text"],
.settings-panel input[type="password"],
.settings-panel input[type="number"],
.settings-panel select {
  width: 100%; padding: 0.5rem; border-radius: 6px;
  border: 1px solid var(--border, #333);
  background: var(--bg, #11111b); color: inherit;
}
.settings-panel .host-row { display: flex; gap: 0.8rem; align-items: flex-end; }
.settings-panel .host-row > div:first-child { flex: 2; }
.settings-panel .host-row > div:nth-child(2) { flex: 1; }
.settings-panel .host-row input { width: 100%; }
.settings-panel button { padding: 0.5rem 1rem; cursor: pointer; }
.settings-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
#detectResult { margin: 0.5rem 0; font-size: 0.9rem; }
.settings-panel hr { border: none; border-top: 1px solid var(--border, #333); margin: 1rem 0; }
.settings-panel h2 { margin-top: 0; margin-bottom: 0.5rem; }
.token-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.token-row input { flex: 1; }
.chatid-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.chatid-row input { flex: 1; }
#telegramStatusText { display: block; margin-top: 0.25rem; }
#telegramTestStatus { margin: 0.5rem 0; font-size: 0.9rem; }
.hardware-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.hardware-grid div { background: var(--surface); padding: 0.5rem; border-radius: var(--radius); font-size: 0.85rem; }
.sortable-list { list-style: none; padding: 0; }
.sortable-list li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.5rem 0.75rem; margin-bottom: 0.3rem;
  font-size: 0.85rem; cursor: grab; display: flex; align-items: center; gap: 0.5rem;
}
.sortable-list li::before { content: '☰'; color: var(--text-muted); }
.sortable-list li.dragging { opacity: 0.4; }
.sortable-list li.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.sortable-list li.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }

.progress-outer { background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; height: 14px; overflow: hidden; margin: 0.5rem 0; }
.progress-inner { height: 100%; background: linear-gradient(90deg, var(--accent), #7ee787);
  transition: width .6s ease; border-radius: 999px; }
.phase-list { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.6rem 0;
  font-size: 0.88rem; }
.phase-list > div { display: grid; grid-template-columns: 1.4rem 1fr auto auto;
  gap: 0.5rem; align-items: center; padding: 0.25rem 0.4rem; border-radius: 6px; }
.phase-list .ph-running { background: var(--surface); }
.phase-list .ph-detail { color: var(--text-muted); font-size: 0.8rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; text-align: right; }
.phase-list .ph-pct { font-weight: bold; min-width: 2.8rem; text-align: right; }
.model-chip { background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; display: inline-block;
  margin: 0.1rem 0.15rem 0.1rem 0; }

.chat-section { margin-top: 1.2rem; }
.chat-messages { display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 26rem; overflow-y: auto; padding: 0.4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 0.6rem; }
.chat-msg { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 12px;
  font-size: 0.9rem; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 3px; }
.chat-msg.bot { align-self: flex-start; background: var(--bg, #1a1d24);
  border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.chat-msg .chat-sources { margin-top: 0.4rem; font-size: 0.75rem;
  color: var(--text-muted); }
.chat-row { display: flex; gap: 0.4rem; }
.chat-row input[type="text"] { flex: 1; }
#micBtn.recording { background: var(--error); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

.trading-section { margin-top: 1.2rem; }
.trade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem; margin-top: 0.6rem; }
.trade-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.7rem 0.85rem; font-size: 0.85rem; }
.trade-card h4 { margin: 0 0 0.3rem; font-size: 0.9rem; }
.trade-card .metric { display: flex; justify-content: space-between;
  padding: 0.12rem 0; }
.trade-card .metric b.pos { color: #7ee787; }
.trade-card .metric b.neg { color: var(--error); }
.trade-card .thesis { color: var(--text-muted); font-size: 0.78rem; margin: 0.35rem 0; }
.trade-disclaimer { font-size: 0.75rem; color: var(--text-muted);
  margin-top: 0.5rem; }
.btn-link { color: var(--accent); text-decoration: none; font-size: 0.85rem; }
.btn-link:hover { text-decoration: underline; }
#localModelSelect option .badge-ram { font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 3px; margin-left: 0.3rem; }
.badge-ram-ok { background: #1e3a2f; color: var(--success); }
.badge-ram-no { background: #3a1e1e; color: var(--error); }
.auth-gate {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem; max-width: 350px; width: 90%;
}
.auth-card h2 { margin-bottom: 0.5rem; }