/* ---- Login Screen ---- */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
}
.login-screen.hidden { display: none; }

.login-card {
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.login-icon {
  font-size: 48px;
  margin-bottom: 8px;
}
.login-card h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--text);
}
.login-card input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  margin-bottom: 12px;
}
.login-card input[type="password"]:focus {
  border-color: var(--accent);
}
.login-card button {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.login-card button:disabled {
  opacity: 0.6;
}
.login-error {
  color: #ef4444;
  font-size: 14px;
  margin-top: 12px;
}

#app.hidden { display: none !important; }

/* ---- Base Reset ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #0A0A0A;
  --surface: #141414;
  --surface2: #1C1C1C;
  --border: #2A2A2A;
  --text: #E8E4E0;
  --text-dim: #8A8A8A;
  --accent: #6E9F5C;
  --accent-dim: rgba(110, 159, 92, 0.15);
  --radius: 12px;
  --text-secondary: #9A9A9A;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

#app {
  max-width: 393px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- Pull to Refresh ---- */
#pull-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-52px);
  z-index: 200;
  pointer-events: none;
}

#pull-indicator.visible {
  transform: translateY(var(--pull-offset, -52px));
}

#pull-indicator.refreshing {
  transform: translateY(0) !important;
  transition: transform 0.25s ease;
}

#pull-indicator.snapping {
  transform: translateY(-52px);
  transition: transform 0.25s ease;
}

.pull-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

#pull-indicator.visible .pull-spinner {
  opacity: 1;
}

#pull-indicator.refreshing .pull-spinner {
  animation: ptr-spin 0.7s linear infinite;
  opacity: 1;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* ---- Header ---- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 1100;
  background: var(--bg);
}

header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.app-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  white-space: nowrap;
}
.app-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#notiz-count {
  font-size: 13px;
  color: var(--text-dim);
}

/* ---- Home Screen ---- */
.home {
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.home:not(.active) {
  display: none;
}

.agent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.agent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
  font-family: inherit;
}

.agent-card:active:not(:disabled) {
  transform: scale(0.97);
  border-color: var(--accent);
}

.agent-card:disabled {
  opacity: 0.35;
  cursor: default;
}

.agent-icon { font-size: 32px; }
.agent-name { font-size: 16px; font-weight: 600; color: var(--text); }
.agent-desc { font-size: 13px; color: var(--text-dim); }

/* ---- Agent Views ---- */
.agent-view {
  display: none;
  height: 100%;
  overflow: hidden;
}

.agent-view.active {
  display: flex;
  flex-direction: column;
}

#agent-health.active {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

#agent-blockchain.active {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

/* ---- Sub-Tabs (within Memory) ---- */
.sub-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sub-tab {
  flex: 1;
  padding: 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  font-family: inherit;
}

.sub-tab.active {
  color: var(--text);
}

.sub-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.sub-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sub-content.active {
  display: block;
}

/* ---- Main ---- */
main {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ---- Empty State ---- */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-dim);
  font-size: 15px;
}

.empty-state.hidden {
  display: none;
}

/* ---- Chat ---- */
.chat {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#chat {
  min-height: 100%;
}

.chat-pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question {
  align-self: flex-end;
  background: var(--accent);
  color: #0A0A0A;
  padding: 10px 14px;
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  max-width: 85%;
  font-size: 15px;
  font-weight: 500;
  word-break: break-word;
}

.answer {
  background: var(--surface);
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

.answer p { margin-bottom: 8px; }
.answer p:last-child { margin-bottom: 0; }
.answer strong { color: #fff; }
.answer ul, .answer ol { padding-left: 20px; margin-bottom: 8px; }
.answer li { margin-bottom: 4px; }
.answer code {
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* ---- Sources ---- */
.sources-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0 0;
  font-family: inherit;
}

.sources-toggle::before {
  content: "\25B8";
  transition: transform 0.2s;
}

.sources-toggle.open::before {
  transform: rotate(90deg);
}

.sources-list {
  margin-top: 8px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sources-list.hidden {
  display: none;
}

.source-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}

.source-tag {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.source-similarity {
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}

/* ---- Loading ---- */
.loading {
  display: flex;
  gap: 6px;
  padding: 14px;
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: pulse 1.2s ease-in-out infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

/* ---- Input Bar ---- */
footer {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 16px;
  padding-bottom: calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

footer.hidden {
  display: none;
}

#input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s;
}

#input:focus {
  border-color: var(--accent);
}

#input::placeholder {
  color: var(--text-dim);
}

#send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #0A0A0A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

#send:disabled {
  opacity: 0.4;
  cursor: default;
}

#send:active:not(:disabled) {
  opacity: 0.8;
}

/* ---- Depth Selector ---- */
.depth-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  width: 100%;
}

.depth-btn {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.3px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.depth-btn:active {
  transform: scale(0.97);
}

.depth-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
}

/* ---- Loading Phase Text ---- */
.loading-phase {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 4px;
  opacity: 0.7;
  animation: fadePhase 0.5s ease-in-out;
}

@keyframes fadePhase {
  from { opacity: 0; }
  to { opacity: 0.7; }
}

/* ---- Cap Warning ---- */
.cap-warning {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 14px;
  border-left: 3px solid var(--accent);
  margin-top: 4px;
  opacity: 0.8;
}

/* ---- History ---- */
.history {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

.history-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.history-card:active {
  border-color: var(--accent);
}

.history-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}

.history-card .preview {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-card .time {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
  opacity: 0.7;
}

/* ---- History Detail Overlay ---- */
.history-detail {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  max-width: 393px;
  margin: 0 auto;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top));
  border-bottom: 1px solid var(--border);
}

.detail-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}

.detail-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.detail-body .question {
  margin-bottom: 12px;
}

.detail-body .answer {
  margin-bottom: 0;
}

/* ---- Health Agent scrollable ---- */
#agent-health {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* ---- Health Agent ---- */
.health-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px 24px;
  gap: 16px;
  text-align: center;
}

.health-lock.hidden { display: none; }

.lock-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.health-lock p {
  color: var(--text-dim);
  font-size: 15px;
}

.lock-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.lock-form input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}

.lock-form input:focus {
  border-color: var(--accent);
}

.lock-form button {
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.lock-form button:disabled {
  opacity: 0.5;
}

.lock-hint {
  font-size: 12px !important;
  opacity: 0.5;
}

/* Health Content */
.health-content {
  padding: 0 0 16px;
}

.health-content.hidden { display: none; }

.health-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

#health-data-status {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

.health-lock-action {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
}

.health-lock-action:hover {
  border-color: var(--text-dim);
}

/* Health Sections */
.health-section {
  margin-bottom: 20px;
}

.health-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

/* Workout Chart */
.workout-chart {
  margin-bottom: 8px;
}

.workout-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}

.workout-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.workout-bar-col.today .workout-bar-label {
  color: var(--accent);
  font-weight: 600;
}

.workout-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.workout-bar-fill {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 4px;
  overflow: hidden;
  transition: height 0.3s ease;
}

.workout-bar-segment {
  width: 100%;
}

.workout-bar-label {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1;
}

.workout-summary {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Apple Health Sync */
.sync-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sync-status {
  font-size: 13px;
  font-weight: 500;
}

.sync-status.synced { color: #4ade80; }
.sync-status.stale { color: #fbbf24; }
.sync-status.not-synced { color: var(--text-dim); }

.sync-metrics {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: auto;
}

/* Upload Grid */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.upload-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-card:active {
  border-color: var(--accent);
}

.upload-card.uploading {
  opacity: 0.6;
  pointer-events: none;
}

.upload-card.success {
  border-color: var(--accent);
}

.upload-card.error {
  border-color: #c44;
}

.upload-icon {
  font-size: 24px;
}

.upload-label {
  font-size: 14px;
  font-weight: 500;
}

.upload-format {
  font-size: 11px;
  color: var(--text-dim);
}

/* Data List */
.data-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.empty-hint {
  font-size: 13px;
  color: var(--text-dim);
}

.data-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
}

.data-type-tag {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.data-dates {
  flex: 1;
  color: var(--text-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-count {
  color: var(--text-dim);
  font-size: 12px;
}

/* Privacy Toggle */
.privacy-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.privacy-toggle label {
  font-size: 13px;
  color: var(--text-dim);
}

.privacy-toggle select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.privacy-toggle select:focus {
  border-color: var(--accent);
}

/* Health Chat */
.health-chat {
  min-height: 200px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.health-chat .chat-pair {
  margin-bottom: 12px;
}

/* Section header with + button */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-header h3 {
  margin-bottom: 0;
}

/* Events list */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.event-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.event-info {
  flex: 1;
  min-width: 0;
}

.event-title {
  font-size: 14px;
  font-weight: 500;
}

.event-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.event-stop {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.event-stop:active {
  border-color: var(--text-dim);
}

/* Log cards */
/* ---- Log Filter Chips ---- */
.log-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.log-filter-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.log-filter-chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Log Card (kompakt) ---- */
.log-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.log-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}
.log-card-header:active { background: var(--surface2); }
.log-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.log-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-datum {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.log-chevron {
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.log-card.expanded .log-chevron { transform: rotate(180deg); }

.log-card-body {
  display: none;
  padding: 0 12px 10px 36px;
  border-top: 1px solid var(--border);
}
.log-card.expanded .log-card-body { display: block; }

.log-eintrag {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  padding-top: 8px;
  white-space: pre-wrap;
}
.log-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.log-kategorie {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.log-quelle-agent { color: #fbbf24; }
.log-delete {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  margin-left: auto;
  transition: opacity 0.2s;
}
.log-delete:active { opacity: 1; }

/* Insight cards in chat */
.insight-card {
  background: var(--surface2);
  border: 1px solid #fbbf2444;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 8px;
}

.insight-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #fbbf24;
  font-weight: 500;
  margin-bottom: 6px;
}

.insight-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.insight-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

.insight-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.insight-save {
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.insight-save:disabled {
  opacity: 0.4;
}

.insight-dismiss {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.insight-dismiss:active {
  border-color: var(--text-dim);
}

.health-chat .question {
  font-size: 14px;
}

.health-chat .answer {
  background: var(--bg);
  font-size: 14px;
}

/* ---- Morning Button ---- */
.morning-btn-container { padding: 12px 0 4px; }
.morning-brief-btn {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,180,50,0.10), rgba(255,140,20,0.06));
  border: 1px solid rgba(255,180,50,0.20);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.morning-brief-btn:hover {
  background: linear-gradient(135deg, rgba(255,180,50,0.18), rgba(255,140,20,0.12));
  border-color: rgba(255,180,50,0.35);
}
.morning-brief-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Evening Checkin Button ---- */
.evening-checkin-btn {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(100,140,255,0.10), rgba(80,120,220,0.06));
  border: 1px solid rgba(100,140,255,0.20);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.evening-checkin-btn:hover {
  background: linear-gradient(135deg, rgba(100,140,255,0.18), rgba(80,120,220,0.12));
  border-color: rgba(100,140,255,0.35);
}
.evening-checkin-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Checkin Overlay ---- */
.checkin-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0;
}
.checkin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.checkin-pill.active {
  background: rgba(100,140,255,0.15);
  border-color: rgba(100,140,255,0.5);
  color: var(--text);
}
.checkin-pill .pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--text-secondary);
  transition: all 0.2s;
  flex-shrink: 0;
}
.checkin-pill.active .pill-dot {
  background: rgba(100,140,255,0.8);
  border-color: rgba(100,140,255,0.8);
}
.checkin-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkin-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.checkin-settings-row .remove-field {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
}
.checkin-settings-row .remove-field:hover {
  color: #e74c3c;
}
.checkin-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.checkin-add-row input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
}
.checkin-add-row input:focus { border-color: var(--accent); outline: none; }
.checkin-add-row button {
  padding: 8px 16px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.checkin-gear {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
}
.checkin-gear:hover { color: var(--text); }

/* ---- Morning Brief ---- */
.morning-brief { padding: 12px 16px; background: transparent; }

/* Card Grid */
.morning-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .morning-cards { grid-template-columns: repeat(2, 1fr); }
}
.morning-card {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--border);
}
.morning-card.trend-positive { border-left-color: #6E9F5C; }
.morning-card.trend-negative { border-left-color: #E07070; }
.morning-card.trend-stable   { border-left-color: var(--border); }

/* Training Readiness Card */
.training-readiness-card { border-left-width: 4px; }
.tr-tip { font-size: 12px; color: var(--dim); line-height: 1.4; margin-bottom: 6px; }
.tr-factors { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--dim);
}

.mc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.mc-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.mc-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.mc-unit {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 2px;
  font-weight: 400;
}
.mc-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
}
.mc-delta {
  font-size: 11px;
  color: var(--text-dim);
}
.trend-positive .mc-delta { color: #6E9F5C; }
.trend-negative .mc-delta { color: #E07070; }
.mc-optimal {
  font-size: 10px;
  color: var(--text-dim);
}
.mc-optimal.opt-good { color: #6E9F5C; }
.mc-optimal.opt-warn { color: #E07070; }

/* Sparkline */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 20px;
  margin-bottom: 2px;
  position: relative;
}
.spark-bar {
  flex: 1;
  background: rgba(255,255,255,0.12);
  min-width: 2px;
  border-radius: 1px 1px 0 0;
  position: relative;
  z-index: 1;
}
.trend-positive .spark-bar { background: rgba(110,159,92,0.25); }
.trend-negative .spark-bar { background: rgba(224,112,112,0.25); }

/* Optimal range band */
.spark-band {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(110,159,92,0.10);
  border-top: 1px solid rgba(110,159,92,0.25);
  border-bottom: 1px solid rgba(110,159,92,0.25);
  z-index: 0;
  pointer-events: none;
}

/* Coach Text */
.morning-coach {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 8px;
  font-size: 14px;
}

/* ---- Notiz Add Button ---- */
.sub-tab-add {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: none;
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: 8px;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.2s;
  font-family: inherit;
}

.sub-tab-add:active {
  background: var(--accent);
  color: #0A0A0A;
}

/* ---- Notiz Overlay ---- */
.notiz-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  max-width: 393px;
  margin: 0 auto;
}

.notiz-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top));
  border-bottom: 1px solid var(--border);
}

.notiz-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
}

.notiz-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}

.notiz-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px;
}

.notiz-step {
  display: none;
}

.notiz-step.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.notiz-step label {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}

.notiz-step textarea {
  flex: 1;
  min-height: 150px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  outline: none;
}

.notiz-step textarea:focus {
  border-color: var(--accent);
}

.notiz-step textarea::placeholder {
  color: var(--text-dim);
}

/* Metadata form */
.notiz-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.notiz-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notiz-field label {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}

.notiz-field input,
.notiz-field select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}

.notiz-field input:focus,
.notiz-field select:focus {
  border-color: var(--accent);
}

.notiz-field input::placeholder {
  color: var(--text-dim);
}

.notiz-field select option {
  background: var(--surface);
  color: var(--text);
}

.notiz-radio-group {
  display: flex;
  gap: 16px;
  padding-top: 4px;
}

.notiz-radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}

.notiz-radio-group input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* Buttons */
.notiz-btn {
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius);
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
  align-self: stretch;
  text-align: center;
}

.notiz-btn:active {
  opacity: 0.8;
}

.notiz-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Success message */
.notiz-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}

.notiz-success .check {
  font-size: 48px;
}

.notiz-success p {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

/* ---- Fasting Protocol ---- */
.protokoll-start {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.protokoll-start select,
.protokoll-start input[type="number"] {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
}

.proto-days-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.protokoll-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proto-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  flex-wrap: wrap;
}

.badge-pending {
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.proto-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.proto-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.proto-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

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

.proto-stop {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}

.proto-stop:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.checkin-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0 2px;
}

/* ---- Blockchain Agent — Full Bento ---- */

/* Container */
.bc-container {
  padding: 0 12px 16px;
  min-width: 0;
  flex-shrink: 0;
}

/* Pill Tab Bar */
.bc-tabs-bar {
  display: flex;
  gap: 6px;
  padding: 12px 0 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}

.bc-tab-btn {
  flex: 1;
  padding: 7px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.bc-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0A0A;
  font-weight: 600;
}

/* Panel Layout */
.bc-panel { display: none; }
.bc-panel.active { display: block; }

.bc-pad {
  padding: 0;
  margin-bottom: 16px;
}

.bc-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* Chat Section */
.bc-chat-section {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* AI Card (Chancen / Strategien) */
.bc-ai-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bc-ai-hint {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.bc-ai-result {
  margin-top: 12px;
  overflow: hidden;
  min-width: 0;
}

.bc-ai-result .answer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 13px;
  overflow-x: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

.bc-ai-result table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
  word-break: break-word;
}

.bc-ai-result th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}

.bc-ai-result td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 11px;
  overflow-wrap: break-word;
}

.bc-ai-result tr:last-child td {
  border-bottom: none;
}

/* Action Button */
.bc-action-btn {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: opacity 0.2s;
}

.bc-action-btn:active { opacity: 0.8; }
.bc-action-btn:disabled { opacity: 0.4; cursor: default; }

/* ---- Bento Primitives ---- */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bento-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-width: 0;
  overflow: hidden;
}

/* ---- Price Tiles ---- */

.blockchain-prices {
  padding: 0 0 8px;
}

.price-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.price-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 4px;
}

.price-sym {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.price-val {
  font-size: 13px;
  font-weight: 700;
  margin: 2px 0;
}

.price-chg { font-size: 10px; }
.chg-pos { color: #4ade80; }
.chg-neg { color: #f87171; }

/* ---- Yield Cards ---- */

.yield-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yield-card__pool {
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yield-card__apy {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.yield-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-dim);
}

.apy-high { color: #f87171; }
.apy-mid  { color: #fbbf24; }
.apy-low  { color: var(--accent); }

.badge-stable {
  display: inline-block;
  font-size: 9px;
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
  margin-top: 2px;
}

/* ---- Yield Summary (3-column) ---- */

.yield-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.yield-summary__section {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yield-summary__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 500;
}

.yield-summary__value {
  font-size: 15px;
  font-weight: 700;
}

.yield-summary__sub {
  font-size: 10px;
  color: var(--text-dim);
}

/* ---- Yield Position Cards ---- */

.yield-protocol-group {
  margin-bottom: 12px;
}

.yield-pos-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.yield-pos-card--borrow {
  border-left: 3px solid #ef4444;
}

.yield-pos-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.yield-pos-card__asset {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yield-pos-card__apy {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

.yield-pos-card--borrow .yield-pos-card__apy {
  color: #ef4444;
}

.yield-pos-card__usd {
  font-size: 11px;
  color: var(--text-dim);
}

.yield-layers {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.yield-layer {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
}

.yield-layer--supply {
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}

.yield-layer--reward {
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
}

.yield-layer--nested_vault {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}

.yield-layer--cost {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.yield-layer--base {
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}

.badge-il {
  display: inline-block;
  font-size: 9px;
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.badge-nested {
  display: inline-block;
  font-size: 9px;
  background: rgba(251,191,36,0.1);
  color: #fbbf24;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
}

.yield-pos-card__daily {
  font-size: 11px;
  font-weight: 600;
}

.yield-net-line {
  font-size: 12px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  text-align: center;
}

/* ---- Yield History ---- */

.yield-history-details {
  margin-top: 16px;
}

.yield-history-details summary {
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px 0;
}

.yield-history-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
  margin-top: 8px;
}

.yield-history-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}

.yield-history-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}

/* ---- Protocol Cards ---- */

.protocol-card .protocol-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 4px;
}

.protocol-name {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-category {
  font-size: 9px;
  color: var(--text-dim);
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.protocol-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.protocol-tvl { color: var(--text-dim); }
.protocol-change { font-weight: 600; }

/* ---- Portfolio Cards ---- */

.portfolio-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portfolio-card__protocol {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 500;
}

.portfolio-card__label {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-card__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.portfolio-card__detail {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-card--borrow .portfolio-card__value {
  color: #ef4444;
}

.portfolio-total {
  font-size: 14px;
  color: var(--text-dim);
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  text-align: right;
}

.portfolio-total strong {
  color: var(--text);
  font-size: 16px;
}

.lending-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lending-section__title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  font-weight: 600;
  margin: 0 0 4px;
}

.lending-card {
  background: var(--bg-card, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lending-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.lending-card__protocol {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.lending-card__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.lending-card__sub {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -4px;
}

.lending-card__hf {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.lending-card__hf--safe {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
}

.lending-card__hf--warn {
  background: rgba(234,179,8,0.15);
  color: #eab308;
}

.lending-card__hf--danger {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.lending-bar {
  position: relative;
  padding: 2px 0 14px;
}

.lending-bar__track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right,
    #22c55e 0%,
    #eab308 60%,
    #ef4444 100%);
  opacity: 0.9;
}

.lending-bar__marker {
  position: absolute;
  top: 0;
  width: 3px;
  height: 12px;
  background: var(--text);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--bg, #0a0a0a);
}

.lending-bar__labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
}

.lending-liq {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.lending-liq-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.lending-liq-row__label {
  color: var(--text-dim);
  flex: 1;
}

.lending-liq-row__value {
  font-weight: 600;
  color: #ef4444;
}

.lending-liq-row__detail {
  font-size: 11px;
  color: var(--text-dim);
}

.badge-out-of-range {
  font-size: 9px;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 3px;
  font-weight: 600;
}

/* ---- Wallet Setup ---- */

.wallet-setup-card {
  margin: 0 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.wallet-setup-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.wallet-input-row {
  display: flex;
  gap: 8px;
}

.wallet-input-row input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.wallet-input-row input:focus {
  border-color: var(--accent);
}

.wallet-input-row button {
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.wallet-input-row button:disabled {
  opacity: 0.4;
}

.loading-hint {
  opacity: 0.6;
}

/* Push notification bell */
.push-bell {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
  animation: push-pulse 2s ease-in-out 3;
}
.push-bell:hover { background: rgba(255,255,255,0.1); }
.push-bell:disabled { opacity: 0.4; }
.push-bell--denied { opacity: 0.3; }

@keyframes push-pulse {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(12deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(6deg); }
  60% { transform: rotate(0deg); }
}

/* ---- News Agent ---- */
#agent-news.active {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

.news-container { padding: 0; }

.news-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
}

.news-panel { display: none; }
.news-panel.active { display: block; }

.news-list { padding: 12px 16px; }

.news-day-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 20px 0 8px;
}
.news-day-header:first-child { margin-top: 0; }

.news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.news-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.news-cat-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.news-cat-badge.tech {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.news-cat-badge.crypto {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.news-time {
  font-size: 12px;
  color: var(--text-dim);
}

.news-headline {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.news-summary {
  font-size: 13px;
  color: var(--text-secondary, var(--text-dim));
  line-height: 1.4;
  margin-bottom: 8px;
}

.news-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.news-source-badge {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface2, rgba(255,255,255,0.06));
  padding: 2px 8px;
  border-radius: 4px;
}
.news-source-badge.discord {
  color: #c4b5fd;
  background: rgba(88, 101, 242, 0.18);
}
.news-source-badge.discord::before {
  content: "💬 ";
}

.news-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.news-attachments img {
  max-width: 100%;
  max-height: 280px;
  border-radius: 6px;
  border: 1px solid var(--border);
  object-fit: cover;
}

/* Badge on home card */
.news-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
}

.agent-card { position: relative; }

/* ---- Yield Radar ---- */

/* Badge on Radar tab button */
.radar-badge {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: top;
}

/* Market Summary Header Card */
.radar-summary-card {
  margin-bottom: 12px;
  padding: 12px 16px;
}
.radar-summary-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.radar-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.radar-summary-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.radar-summary-value {
  font-size: 18px;
  font-weight: 600;
}
.radar-movers {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.radar-mover {
  white-space: nowrap;
}

/* Alert Cards */
.radar-alert {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-left: 3px solid var(--border);
  transition: opacity 0.3s;
}
.radar-alert--opportunity { border-left-color: #22c55e; }
.radar-alert--warning { border-left-color: #f59e0b; }
.radar-alert--critical { border-left-color: #ef4444; }
.radar-alert--info { border-left-color: #60a5fa; }

.radar-alert__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.radar-alert__icon {
  font-size: 16px;
  flex-shrink: 0;
}
.radar-alert__title {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
}
.radar-alert__time {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.radar-alert__msg {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 8px;
  line-height: 1.4;
}
.radar-alert__actions {
  display: flex;
  gap: 6px;
}
.radar-btn {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.radar-btn:hover { background: var(--hover-bg, rgba(255,255,255,0.05)); }
.radar-btn--done { color: #22c55e; border-color: #22c55e40; }
.radar-btn--done:hover { background: #22c55e15; }
.radar-btn--ask { color: #60a5fa; border-color: #60a5fa40; }
.radar-btn--ask:hover { background: #60a5fa15; }
.radar-btn--snooze { color: var(--text-dim); }

/* ---- Looping Lab (Phase 2) ---- */
.looping-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.looping-overview-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.looping-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.looping-controls label {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  gap: 6px;
  align-items: center;
}
.looping-controls input[type="number"] {
  width: 64px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2, #0e0e10);
  color: var(--text);
}

.looping-section-title {
  margin: 12px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.looping-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.looping-cards-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }

.looping-card {
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.looping-card:hover { border-color: rgba(96,165,250,0.5); transform: translateY(-1px); }
.looping-card.risk-gruen { border-left: 3px solid #22c55e; }
.looping-card.risk-gelb  { border-left: 3px solid #eab308; }
.looping-card.risk-rot   { border-left: 3px solid #ef4444; }
.looping-card-compact { padding: 10px; }

.looping-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 6px;
}
.looping-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.looping-current-badge {
  background: #60a5fa30;
  color: #60a5fa;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.looping-confidence {
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.looping-confidence.conf-hoch    { background: #22c55e20; color: #22c55e; }
.looping-confidence.conf-mittel  { background: #eab30820; color: #eab308; }
.looping-confidence.conf-niedrig { background: #ef444420; color: #ef4444; }

.looping-net-apy {
  font-size: 22px;
  font-weight: 700;
  color: #22c55e;
  line-height: 1.1;
}
.looping-net-apy span {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  margin-left: 4px;
}
.looping-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin: 4px 0;
}
.looping-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.looping-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
}
.looping-pill.risk-pill.risk-gruen { background: #22c55e20; color: #22c55e; }
.looping-pill.risk-pill.risk-gelb  { background: #eab30820; color: #eab308; }
.looping-pill.risk-pill.risk-rot   { background: #ef444420; color: #ef4444; }

.looping-nested {
  font-size: 11px;
  color: #60a5fa;
  margin-top: 6px;
}
.looping-break-even {
  font-size: 11px;
  margin-top: 4px;
  color: var(--text-dim);
}
.looping-break-even strong { color: var(--text); }

.looping-depeg-banner {
  background: #ef444415;
  border: 1px solid #ef444440;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}
.looping-depeg-banner.severity-mittel {
  background: #eab30815;
  border-color: #eab30840;
}
.looping-depeg-title { font-weight: 600; margin-bottom: 4px; }
.looping-depeg-banner ul { margin: 0; padding-left: 18px; }

.looping-current-block {
  margin-bottom: 16px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.looping-current-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}
.looping-current-header h4 { margin: 0; font-size: 14px; }
.looping-current-meta { font-size: 11px; color: var(--text-dim); }
.looping-source-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
}
.looping-source-badge.source-heuristic { background: #60a5fa20; color: #60a5fa; }
.looping-source-badge.source-override  { background: #a855f720; color: #a855f7; }
.looping-source-badge.source-explicit  { background: #22c55e20; color: #22c55e; }

/* Detail Modal */
.looping-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.looping-modal-content {
  background: var(--bg-2, #0e0e10);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  padding-top: 48px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.looping-modal-close {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 60px);
  right: max(12px, env(safe-area-inset-right));
  background: rgba(14,14,16,0.92);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}
.looping-modal-close:hover { color: var(--text); background: rgba(30,30,34,0.95); }

.looping-detail h3 { margin: 0 0 16px; }
.looping-detail h4 { font-size: 13px; margin: 12px 0 6px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.5px; }
.looping-detail code { background: rgba(255,255,255,0.04); padding: 4px 8px; border-radius: 4px; font-size: 11px; display: block; word-break: break-all; }
.looping-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) {
  .looping-detail-grid { grid-template-columns: 1fr; }
}
.looping-curve-table, .looping-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.looping-curve-table th, .looping-curve-table td,
.looping-audit-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.looping-curve-table th { color: var(--text-dim); font-weight: 500; }
.looping-curve-table tr.sweet-row { background: #22c55e15; font-weight: 600; }

.looping-override-box {
  margin-top: 20px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.looping-override-box label {
  display: block;
  margin: 6px 0;
  font-size: 12px;
  color: var(--text-dim);
}
.looping-override-box input[type="text"],
.looping-override-box input[type="number"] {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-2, #0e0e10);
  color: var(--text);
  width: 140px;
}

@media (max-width: 640px) {
  .looping-cards { grid-template-columns: 1fr; }
  .looping-cards-compact { grid-template-columns: 1fr; }
}

/* ---- Yield Journal ---- */

.journal-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin: 16px 0 8px;
}

.journal-pending,
.journal-running,
.journal-history {
  margin-bottom: 16px;
}

/* Pending (auto-detected) — highlighted */
.journal-pending-card {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 3px solid #f59e0b;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.journal-pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.journal-pending-badge {
  font-size: 11px;
  font-weight: 600;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.journal-pending-when {
  font-size: 11px;
  color: var(--text-dim);
}

.journal-pending-body {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.journal-amount {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.journal-pending-actions {
  display: flex;
  gap: 6px;
}

.journal-btn {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.journal-btn-confirm {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
}
.journal-btn-confirm:hover { background: rgba(34, 197, 94, 0.12); }

.journal-btn-dismiss {
  color: var(--text-dim);
}
.journal-btn-dismiss:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Running positions — compact grid table */
.journal-running-head,
.journal-running-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 0.9fr 0.55fr 0.75fr 0.9fr;
  gap: 6px;
  padding: 7px 10px;
  align-items: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.journal-running-head {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.journal-running-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 6px;
}

.journal-running-row .jr-proto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-running-row .jr-asset {
  color: var(--text-dim);
  font-size: 11px;
}

.journal-running-row .jr-apy {
  color: #22c55e;
}

.journal-running-row .jr-yield {
  font-weight: 500;
}

/* Historie / Timeline cards */
.journal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
}

.journal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.journal-action-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
}

.journal-action-enter .journal-action-tag { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.journal-action-exit  .journal-action-tag { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.journal-action-move  .journal-action-tag { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.journal-action-adjust .journal-action-tag { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.journal-action-harvest .journal-action-tag { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.journal-action-compound .journal-action-tag { background: rgba(168, 85, 247, 0.18); color: #c084fc; }
.journal-action-liquidation .journal-action-tag { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
.journal-action-swap .journal-action-tag { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

.journal-card-when {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.journal-card-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  flex-wrap: wrap;
}

.journal-card-usd {
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.journal-card-foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.journal-yield-small {
  color: var(--text-dim);
}

/* Dezente (subtle) Alpha-Anzeige */
.journal-alpha {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.alpha-pos { color: #22c55e; }
.alpha-neg { color: #ef4444; }

/* Report Section */
.journal-report-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.journal-report-section .bc-action-btn {
  font-size: 13px;
  padding: 9px 14px;
}

@media (max-width: 480px) {
  .journal-running-head,
  .journal-running-row {
    grid-template-columns: minmax(0, 1.4fr) 0.8fr 0.5fr 0.85fr;
    font-size: 11px;
  }
  .journal-running-head > :last-child,
  .journal-running-row .jr-yield {
    display: none;
  }
}

/* ---- Strategy Optimizer (Phase 4) ---- */

.opt-risk-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.opt-risk-btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.opt-risk-btn.active {
  background: rgba(96,165,250,0.15);
  border-color: rgba(96,165,250,0.5);
  color: #60a5fa;
}
.opt-risk-btn:hover:not(.active) { border-color: var(--text-dim); }

.opt-run-btn {
  width: 100%;
  margin-bottom: 16px;
  font-size: 14px;
  padding: 10px;
}

.opt-banner {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.35);
  border-radius: 8px;
  font-size: 12px;
  color: #eab308;
}
.opt-banner-line { margin: 2px 0; }

/* Compare grid */
.opt-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.opt-col {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.opt-col-optimized {
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.04);
}
.opt-col-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.opt-col-total {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.opt-col-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.opt-gain {
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}
.opt-positions { margin-top: 8px; }
.opt-pos-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.7fr 0.5fr 0.8fr;
  gap: 4px;
  padding: 3px 0;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.opt-pos-proto { font-weight: 500; color: var(--text-main); }

/* Move cards */
.opt-section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-main);
}
.opt-move-card {
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid #22c55e;
}
.opt-move--advanced {
  border-left-color: #eab308;
  opacity: 0.85;
}
.opt-move-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.opt-move-route {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
}
.opt-badge-advanced {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(234,179,8,0.2);
  color: #eab308;
  font-weight: 600;
}
.opt-move-gain {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 4px;
}
.opt-move-delta {
  font-size: 11px;
  color: #22c55e;
  font-weight: 600;
}
.opt-move-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.opt-liq-dist {
  font-size: 11px;
  color: #eab308;
  margin-bottom: 4px;
}
.opt-risk-notes {
  margin-top: 4px;
}
.opt-risk-note {
  font-size: 10px;
  color: var(--text-dim);
  padding: 1px 0;
}
.opt-steps-details summary {
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  margin-top: 4px;
}
.opt-steps { margin-top: 4px; }
.opt-step {
  font-size: 11px;
  color: var(--text-main);
  padding: 2px 0;
}

/* Empty state */
.opt-empty-state {
  text-align: center;
  padding: 30px 20px;
}
.opt-empty-icon { font-size: 36px; margin-bottom: 10px; }
.opt-empty-state p { color: var(--text-main); font-size: 14px; margin: 4px 0; }
.opt-empty-sub { color: var(--text-dim); font-size: 12px; }

/* Plan actions */
.opt-plan-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Advanced details */
.opt-advanced-details summary {
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  margin: 12px 0 8px;
}

/* History */
.opt-history-details { margin-top: 16px; }
.opt-history-details summary {
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.opt-history-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.7fr 0.8fr 0.5fr;
  gap: 4px;
  padding: 4px 0;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.opt-hist-date { color: var(--text-main); }
.opt-hist-plan {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(96,165,250,0.2);
  color: #60a5fa;
}

/* Mobile: stack columns */
@media (max-width: 600px) {
  .opt-compare-grid { grid-template-columns: 1fr; }
  .opt-pos-row { grid-template-columns: 1fr 0.7fr 0.6fr 0.7fr; }
  .opt-pos-row .opt-pos-daily { display: none; }
  .opt-history-row { grid-template-columns: 1fr 0.7fr 0.6fr 0.7fr; }
  .opt-history-row .opt-hist-plan { display: none; }
}

/* ============================================
   Kosten / API-Verbrauch Tab
   ============================================ */
.cost-container {
  padding: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.cost-budget {
  margin-bottom: 20px;
}
.cost-budget-empty {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.cost-budget-empty-text {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 12px;
}
.cost-topup-btn {
  background: var(--accent, #60a5fa);
  color: #0b0b0f;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cost-topup-btn:hover { filter: brightness(1.08); }
.cost-topup-btn-inline {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.cost-topup-btn-inline:hover { color: var(--text); border-color: var(--text-dim); }

.cost-budget-card {
  background: var(--panel, #16161d);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.cost-budget-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.cost-budget-remaining {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cost-budget-total {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.cost-budget-bar {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cost-budget-bar-fill {
  height: 100%;
  background: #22c55e;
  transition: width 0.3s ease, background 0.3s ease;
}
.cost-budget-card[data-level="warn"] .cost-budget-bar-fill { background: #eab308; }
.cost-budget-card[data-level="crit"] .cost-budget-bar-fill { background: #ef4444; }
.cost-budget-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.cost-range-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cost-range-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cost-range-btn.active {
  color: var(--text);
  border-bottom-color: var(--accent, #60a5fa);
}

.cost-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* Desktop table */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.cost-table thead th {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cost-table .cost-col-num { text-align: right; }
.cost-table .cost-col-exp { width: 24px; text-align: center; }
.cost-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
.cost-table .cost-row-tag { cursor: pointer; }
.cost-table .cost-row-tag:hover { background: rgba(255,255,255,0.02); }
.cost-table td { padding: 10px 8px; }
.cost-chevron {
  color: var(--text-dim);
  font-size: 10px;
}
.cost-row-model {
  display: none;
  background: rgba(255,255,255,0.015);
  color: var(--text-dim);
  font-size: 12px;
}
.cost-row-model.visible { display: table-row; }
.cost-row-model td { padding: 6px 8px 6px 20px; }
.cost-row-total td {
  padding: 12px 8px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}

/* Mobile cards */
.cost-cards { display: none; }
.cost-card {
  background: var(--panel, #16161d);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.cost-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.cost-card-name { font-weight: 600; font-size: 14px; }
.cost-card-cost { font-size: 14px; font-variant-numeric: tabular-nums; }
.cost-card-meta {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cost-card-models { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); }
.cost-card.expanded .cost-card-models { display: block; }
.cost-card-model {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  padding: 3px 0;
}
.cost-card-total { background: transparent; border-style: dashed; }

@media (max-width: 600px) {
  .cost-table { display: none; }
  .cost-cards { display: block; }
}