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

:root {
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --border:   #2d3148;
  --accent:   #6c63ff;
  --accent-h: #5a52e0;
  --text:     #e2e8f0;
  --muted:    #64748b;
  --error:    #f87171;
  --success:  #4ade80;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-icon { font-size: 1.4rem; color: var(--accent); }
.logo-text  { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.05em; }

nav { display: flex; align-items: center; gap: 1.5rem; flex: 1; margin: 0 1.5rem; }

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
nav a:hover, nav a.active { color: var(--text); }

.header-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.header-user-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.header-user-label span {
  color: var(--text);
  font-weight: 500;
}

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.btn-logout:hover { border-color: var(--error); color: var(--error); background: #3b151522; }

/* ── Main & Hero ─────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 0;
  width: 100%;
}

.hero,
.news-panel,
.settings-panel,
.admin-panel {
  padding: 2rem;
  width: 100%;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero { text-align: center; max-width: 600px; }
.hero h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p  { font-size: 1.1rem; color: var(--muted); }

footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* ── Tab-Inhalte ─────────────────────────────────── */
.tab-content        { display: none; }
.tab-content.active { display: flex; flex: 1; min-width: 0; }

nav a.admin-tab  { color: var(--accent); }
.nav-spacer      { flex: 1; }

/* ── Admin-Panel ─────────────────────────────────── */
.admin-panel {
  padding: 2rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.admin-header h2 { font-size: 1.5rem; }

.user-count {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.user-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.user-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #1e2135;
  vertical-align: middle;
}
.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover td      { background: var(--surface); }

.table-loading { color: var(--muted); text-align: center; padding: 2rem !important; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}
.badge-active   { background: #14532d; color: var(--success); }
.badge-inactive { background: #3b1515; color: var(--error); }

.role-select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  font-size: 0.85rem;
  cursor: pointer;
}

.action-cell { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn-action {
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s;
}
.btn-action:hover { opacity: 0.8; }
.btn-activate     { background: #14532d; color: var(--success); }
.btn-deactivate   { background: #1e3a5f; color: #60a5fa; }
.btn-delete       { background: #3b1515; color: var(--error); }

/* ── Gemeinsames Sidebar-Layout ──────────────────── */
.portfolio-layout,
.page-layout {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: calc(100vh - 60px);
}

.portfolio-sidebar,
.page-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 0;
}

.portfolio-sidenav,
.page-sidenav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.75rem;
}

.sidenav-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.65rem 0.875rem;
  border-radius: 7px;
  font-size: 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}
.sidenav-btn:hover  { background: #1e2135; color: var(--text); }
.sidenav-btn.active { background: #23264a; color: var(--accent); font-weight: 500; }
.sidenav-icon       { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }

.sidenav-divider {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 1rem 0.875rem 0.4rem;
  opacity: 0.6;
}
.sidenav-empty {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.4rem 0.875rem;
  opacity: 0.6;
}

.portfolio-content,
.page-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.portfolio-view        { display: none; }
.portfolio-view.active { display: block; }
.page-view             { display: none; }
.page-view.active      { display: block; }

.portfolio-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  gap: 0.75rem;
}
.portfolio-placeholder-icon { font-size: 2.5rem; color: var(--accent); opacity: 0.4; margin-bottom: 0.5rem; }
.portfolio-placeholder p     { color: var(--text); font-size: 1rem; }
.portfolio-placeholder-sub   { color: var(--muted) !important; font-size: 0.9rem !important; max-width: 420px; }

/* ── News ────────────────────────────────────────── */
.news-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.news-header h2 { font-size: 1.5rem; }

.news-badge {
  font-size: 0.78rem;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  background: #1e2d40;
  color: #60a5fa;
  border: 1px solid #2563eb44;
}

.news-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  gap: 0.75rem;
}
.news-placeholder-icon {
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0.4;
  margin-bottom: 0.5rem;
}
.news-placeholder p      { color: var(--text); font-size: 1rem; }
.news-placeholder-sub    { color: var(--muted) !important; font-size: 0.9rem !important; max-width: 400px; }

/* ── Settings ────────────────────────────────────── */

.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.sub-tab-btn {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.sub-tab-btn.active             { color: var(--accent); border-bottom-color: var(--accent); }
.sub-tab-btn:hover:not(.active) { color: var(--text); }

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

/* ── Bestände ───────────────────────────────────── */
.bestaende-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.bestaende-header h2 { font-size: 1.4rem; }
.price-loading        { color: var(--muted); font-size: 0.85rem; }

/* ── Trade-Formular ─────────────────────────────── */
.trade-form-wrap {
  max-width: 760px;
}
.trade-form-wrap h2 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.trade-type-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
}
.trade-type-btn {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.5rem 1.5rem;
  border-radius: 5px;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.trade-type-btn.active[data-type="buy"]  { background: #14532d; color: var(--success); }
.trade-type-btn.active[data-type="sell"] { background: #3b1515; color: var(--error); }
.trade-type-btn:not(.active):hover       { color: var(--text); }

.trade-form { display: flex; flex-direction: column; gap: 1.25rem; }

.trade-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.trade-avg-price {
  background: var(--bg) !important;
  color: var(--accent) !important;
  font-weight: 600;
  cursor: default;
}

.trade-asset-selected {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #23264a;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
  margin-top: 0.5rem;
}
.trade-asset-clear {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  margin-left: auto;
  font-size: 0.9rem;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.trade-asset-clear:hover { color: var(--error); }

/* ── Asset-Suche ─────────────────────────────────── */
.asset-search-wrap   { position: relative; margin-bottom: 0.75rem; }

.asset-search-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.asset-search-input:focus { border-color: var(--accent); }

.asset-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 100;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.asset-search-results.open { display: block; }

.search-group-label {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #1e2135;
  transition: background 0.15s;
}
.search-item:last-child  { border-bottom: none; }
.search-item-cg          { cursor: pointer; }
.search-item-cg:hover    { background: #1e2135; }

.search-symbol {
  font-weight: 600;
  font-size: 0.9rem;
  min-width: 50px;
  color: var(--accent);
}
.search-name  { font-size: 0.9rem; color: var(--text); flex: 1; }

.search-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.search-thumb-placeholder {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 0.9rem;
}

.search-import-hint {
  font-size: 0.78rem;
  color: var(--accent);
  opacity: 0.8;
  white-space: nowrap;
}

.search-loading {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.settings-card h3 {
  font-size: 1rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-weight: 500;
}

/* ── Auth-Seite ──────────────────────────────────── */
body.auth-page {
  align-items: center;
  justify-content: center;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 400px;
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.auth-logo .logo-icon { font-size: 1.8rem; }
.auth-logo .logo-text { font-size: 1.5rem; font-weight: 700; }

/* Tabs */
.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.75rem 0;
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn:hover:not(.active) { color: var(--text); }

/* Formulare */
.auth-form { display: none; flex-direction: column; gap: 1.25rem; }
.auth-form.active { display: flex; }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }

.form-group label {
  font-size: 0.875rem;
  color: var(--muted);
}

.hint { font-size: 0.75rem; }

.form-group input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.875rem;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus { border-color: var(--accent); }

.form-error   { font-size: 0.85rem; color: var(--error);   min-height: 1.2em; }
.form-success { font-size: 0.85rem; color: var(--success); min-height: 1.2em; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.25rem;
}
.btn-primary:hover    { background: var(--accent-h); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  margin-top: 0.25rem;
}
.btn-secondary:hover { border-color: var(--text); color: var(--text); }

/* ── Section-Header (Titel + Button) ────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.section-header h2 { font-size: 1.4rem; }
.section-header .btn-primary { padding: 0.5rem 1rem; font-size: 0.9rem; margin-top: 0; }

/* ── Wallet-Formular ────────────────────────────── */
.wallet-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.form-actions .btn-primary  { padding: 0.55rem 1.25rem; font-size: 0.9rem; margin-top: 0; }
.form-actions .btn-secondary { padding: 0.55rem 1.25rem; font-size: 0.9rem; margin-top: 0; }

/* ── Datentabelle ───────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  width: 100%;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th {
  text-align: left;
  padding: 0.65rem 1rem;
  background: var(--surface);
  color: var(--muted);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.data-table tbody tr:hover { background: #1e2135; }
/* ── Inline-Bearbeitung ─────────────────────────── */
.row-editing td { background: #1e2135; }
.inline-input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.88rem;
  width: 100%;
  min-width: 80px;
}
.inline-input:focus { outline: none; }
.row-actions { white-space: nowrap; }
.btn-inline-edit {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-inline-edit:hover { border-color: var(--accent); color: var(--accent); }
.btn-inline-save, .btn-inline-cancel {
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 600;
}
.btn-inline-save   { background: #14532d; color: var(--success); margin-right: 4px; }
.btn-inline-cancel { background: #3b1515; color: var(--error); }

.aufbewahrung-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  min-width: 160px;
}
.aufbewahrung-select:focus { outline: none; border-color: var(--accent); }
.table-empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem !important;
  font-size: 0.9rem;
}

/* Sortierbare Tabellen-Header */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent); }
.sort-icon { font-size: 0.75rem; color: var(--muted); margin-left: 4px; }

/* ── Kompakte Breit-Tabelle (Positionen / Initialbestand) ── */
.pos-table {
  table-layout: fixed;
  width: 100%;
  font-size: 0.78rem;
}
.pos-table th,
.pos-table td {
  padding: 0.45rem 0.4rem;
  overflow: hidden;
  white-space: nowrap;
}
.pos-table th:nth-child(1),
.pos-table td:nth-child(1) { width: 6%; }   /* Symbol */
.pos-table th:nth-child(2),
.pos-table td:nth-child(2) { width: 9%; }   /* CG-ID */
.pos-table th:nth-child(3),
.pos-table td:nth-child(3) { width: 7%; }   /* Anzahl */
.pos-table th:nth-child(4),
.pos-table td:nth-child(4) { width: 8%; }   /* Aufbew. */
.pos-table th:nth-child(5),
.pos-table td:nth-child(5) { width: 10%; }  /* Bezeichnung */
.pos-table th:nth-child(6),
.pos-table td:nth-child(6) { width: 8%; }   /* Chain */
.pos-table th:nth-child(7),
.pos-table td:nth-child(7) { width: 7%; }   /* Staking/Typ */
.pos-table th:nth-child(8),
.pos-table td:nth-child(8) { width: 10%; }  /* Hint */
.pos-table th:nth-child(9),
.pos-table td:nth-child(9) { width: 11%; }  /* Staking-Pl. */
.pos-table th:nth-child(10),
.pos-table td:nth-child(10) { width: 14%; } /* Lager-Addr */
.pos-table th:nth-child(11),
.pos-table td:nth-child(11) { width: 4%; }  /* Aktionen */
.cell-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-table .inline-input { min-width: 0; width: 100%; }