/* =========================================================
   DEPOT — PREMIUM FINANCE DASHBOARD
   Farben bleiben bewusst beim ursprünglichen Mint/Cyan-Stil.
========================================================= */

:root {

  --bg: #0b0b0b;
  --bg-soft: #0e1010;

  --card: #071011;
  --card-2: #0a1414;

  --sc-primary: #00f1d0;
  --sc-accent: #00b89a;

  --muted: #9aa6a6;
  --muted-2: #647373;

  --text: #ffffff;

  --border:
    rgba(255,255,255,.075);

  --border-mint:
    rgba(0,241,208,.18);

  --positive:
    #00f1d0;

  --negative:
    #ff5a5a;

  --radius:
    16px;

  --shadow:
    0 20px 70px rgba(0,0,0,.35);

}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  min-height: 100vh;

  background:

    radial-gradient(
      circle at 50% -10%,
      rgba(0,241,208,.075),
      transparent 38%
    ),

    radial-gradient(
      circle at 100% 50%,
      rgba(0,184,154,.035),
      transparent 35%
    ),

    var(--bg);

  color:
    var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x: hidden;

}


button,
input,
select {

  font: inherit;

}


button {

  -webkit-tap-highlight-color:
    transparent;

}


::selection {

  background:
    var(--sc-primary);

  color:
    var(--bg);

}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {

  position:
    sticky;

  top: 0;

  z-index: 50;

  backdrop-filter:
    blur(18px);

  background:
    rgba(11,11,11,.82);

  border-bottom:
    1px solid var(--border);

}


.topbar-inner {

  width:
    min(1400px, calc(100% - 40px));

  margin:
    auto;

  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


.logo-area {

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

}


.logo-mark {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--border-mint);

  background:
    rgba(0,241,208,.07);

  color:
    var(--sc-primary);

  border-radius:
    11px;

  font-weight:
    800;

  box-shadow:
    0 0 25px rgba(0,241,208,.06);

}


.logo-area h1 {

  margin:
    0;

  font-size:
    20px;

  letter-spacing:
    -.5px;

}


.logo-area span {

  display:
    block;

  margin-top:
    2px;

  color:
    var(--muted-2);

  font-size:
    9px;

  letter-spacing:
    2px;

}


.market-status {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--muted);

  font-size:
    12px;

}


.market-status small {

  color:
    var(--muted-2);

}


#marketDot {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--negative);

  box-shadow:
    0 0 0 rgba(0,241,208,0);

  transition:
    .3s;

}


#marketDot.online {

  background:
    var(--sc-primary);

  box-shadow:
    0 0 15px rgba(0,241,208,.7);

}


/* =========================================================
   MAIN
========================================================= */

main {

  width:
    min(1400px, calc(100% - 40px));

  margin:
    auto;

  padding:
    35px 0 80px;

}


section {

  margin-bottom:
    22px;

}


.market-section,
.performance-section,
.portfolio-section,
.input-section,
.interest-section,
.savings-section {

  background:
    linear-gradient(
      145deg,
      rgba(7,16,17,.98),
      rgba(6,12,13,.98)
    );

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

}


.market-section,
.performance-section,
.portfolio-section,
.input-section,
.interest-section,
.savings-section {

  padding:
    28px;

}


/* =========================================================
   HEADINGS
========================================================= */

.section-heading {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    25px;

  margin-bottom:
    25px;

}


.eyebrow {

  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--sc-primary);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    3px;

}


h2 {

  margin:
    0;

  font-size:
    clamp(24px, 3vw, 34px);

  letter-spacing:
    -1px;

}


.section-heading p {

  max-width:
    620px;

  margin:
    10px 0 0;

  color:
    var(--muted);

  line-height:
    1.6;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

  min-height:
    42px;

  padding:
    0 16px;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.025);

  color:
    var(--text);

  cursor:
    pointer;

  transition:
    .22s ease;

}


.btn:hover {

  transform:
    translateY(-1px);

  border-color:
    var(--border-mint);

  background:
    rgba(0,241,208,.06);

}


.btn:disabled {

  opacity:
    .55;

  cursor:
    wait;

  transform:
    none;

}


.btn.primary {

  border-color:
    transparent;

  background:
    var(--sc-primary);

  color:
    #04100e;

  font-weight:
    800;

}


.btn.primary:hover {

  background:
    #37f5dd;

  box-shadow:
    0 10px 30px rgba(0,241,208,.15);

}


.btn.danger:hover {

  border-color:
    rgba(255,90,90,.4);

  color:
    #ff8a8a;

}


/* =========================================================
   MARKET CARDS
========================================================= */

.market-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    14px;

}


.market-card {

  min-height:
    190px;

  padding:
    21px;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.018);

  position:
    relative;

  overflow:
    hidden;

  transition:
    .25s ease;

}


.market-card::after {

  content:
    "";

  position:
    absolute;

  width:
    150px;

  height:
    150px;

  right:
    -70px;

  bottom:
    -80px;

  border-radius:
    50%;

  background:
    rgba(0,241,208,.06);

  filter:
    blur(20px);

}


.market-card:hover {

  transform:
    translateY(-3px);

  border-color:
    var(--border-mint);

}


.market-card-top {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

}


.market-icon {

  width:
    37px;

  height:
    37px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  border:
    1px solid var(--border-mint);

  color:
    var(--sc-primary);

  background:
    rgba(0,241,208,.055);

  font-size:
    13px;

  font-weight:
    800;

}


.live-badge {

  color:
    var(--sc-primary);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    2px;

}


.market-name {

  margin-top:
    23px;

  color:
    var(--muted);

  font-size:
    12px;

}


.market-price {

  margin-top:
    5px;

  font-size:
    clamp(24px, 3vw, 34px);

  font-weight:
    700;

  letter-spacing:
    -1px;

}


.market-meta {

  margin-top:
    5px;

  color:
    var(--muted-2);

  font-size:
    10px;

  letter-spacing:
    1px;

}


.market-change {

  margin-top:
    14px;

  font-size:
    12px;

  font-weight:
    700;

}


.gold-card .market-icon {

  color:
    #d9bd6b;

  border-color:
    rgba(217,189,107,.25);

}


.silver-card .market-icon {

  color:
    #bfc9ca;

  border-color:
    rgba(191,201,202,.25);

}


/* =========================================================
   KPI
========================================================= */

.overview-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    14px;

}


.overview-card {

  padding:
    22px;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    var(--card);

}


.overview-card span,
.performance-card span {

  color:
    var(--muted-2);

  font-size:
    9px;

  letter-spacing:
    2px;

  font-weight:
    800;

}


.overview-card strong {

  display:
    block;

  margin-top:
    12px;

  font-size:
    clamp(23px, 3vw, 31px);

}


.overview-card small {

  display:
    block;

  margin-top:
    6px;

  color:
    var(--muted-2);

  font-size:
    10px;

}


/* =========================================================
   PERFORMANCE
========================================================= */

.performance-grid {

  display:
    grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap:
    12px;

}


.performance-card {

  padding:
    20px;

  border:
    1px solid var(--border);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.015);

}


.performance-card strong {

  display:
    block;

  margin-top:
    13px;

  font-size:
    21px;

}


/* =========================================================
   COLORS
========================================================= */

.positive {

  color:
    var(--positive) !important;

}


.negative {

  color:
    var(--negative) !important;

}


/* =========================================================
   PORTFOLIO
========================================================= */

.section-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

}


.select-label {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--muted);

  font-size:
    11px;

}


select,
input {

  min-height:
    43px;

  border:
    1px solid var(--border);

  border-radius:
    9px;

  background:
    #0a1213;

  color:
    var(--text);

  padding:
    0 12px;

  outline:
    none;

}


select:focus,
input:focus {

  border-color:
    var(--sc-primary);

  box-shadow:
    0 0 0 3px rgba(0,241,208,.06);

}


select option {

  background:
    #0b1010;

  color:
    white;

}


/* =========================================================
   CHARTS
========================================================= */

.charts {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;

}


.chart-card {

  min-height:
    390px;

  padding:
    20px;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.012);

}


.chart-large {

  grid-column:
    span 2;

}


.chart-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    15px;

}


.chart-kicker {

  color:
    var(--sc-primary);

  font-size:
    8px;

  letter-spacing:
    2px;

  font-weight:
    800;

}


.chart-header h3 {

  margin:
    5px 0 0;

  font-size:
    17px;

}


.chart-live {

  color:
    var(--muted-2);

  font-size:
    8px;

  letter-spacing:
    2px;

}


.chart-container {

  height:
    310px;

  position:
    relative;

}


.small-chart {

  height:
    290px;

}


/* =========================================================
   HOLDINGS
========================================================= */

.holdings-header {

  margin-top:
    32px;

  padding:
    20px 0 15px;

  border-top:
    1px solid var(--border);

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

}


.holdings-header h3 {

  margin:
    4px 0 0;

  font-size:
    20px;

}


#holdingCount {

  color:
    var(--muted-2);

  font-size:
    11px;

}


.table-wrapper {

  overflow-x:
    auto;

}


table {

  width:
    100%;

  min-width:
    900px;

  border-collapse:
    collapse;

}


thead th {

  padding:
    13px 10px;

  text-align:
    left;

  color:
    var(--muted-2);

  font-size:
    9px;

  letter-spacing:
    1.5px;

  font-weight:
    700;

  border-bottom:
    1px solid var(--border);

}


tbody td {

  padding:
    16px 10px;

  border-bottom:
    1px solid rgba(255,255,255,.035);

  color:
    #e8eeee;

  font-size:
    12px;

}


tbody tr {

  transition:
    background .2s;

}


tbody tr:hover {

  background:
    rgba(0,241,208,.025);

}


.asset-cell {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

}


.asset-avatar {

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    9px;

  background:
    rgba(0,241,208,.07);

  border:
    1px solid var(--border-mint);

  color:
    var(--sc-primary);

  font-size:
    9px;

  font-weight:
    800;

}


.asset-cell strong {

  display:
    block;

}


.asset-cell small,
.table-sub {

  display:
    block;

  margin-top:
    3px;

  color:
    var(--muted-2);

  font-size:
    9px;

}


.loading-price {

  color:
    var(--muted-2);

  animation:
    blink 1s infinite;

}


@keyframes blink {

  50% {
    opacity:
      .35;
  }

}


.remove-btn {

  width:
    32px;

  height:
    32px;

  border:
    1px solid var(--border);

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--muted);

  cursor:
    pointer;

}


.remove-btn:hover {

  color:
    var(--negative);

  border-color:
    rgba(255,90,90,.3);

}


/* =========================================================
   FORMS
========================================================= */

.form-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    16px;

}


form label {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  color:
    var(--muted);

  font-size:
    11px;

}


.form-submit {

  display:
    flex;

  align-items:
    flex-end;

}


.form-submit .btn {

  width:
    100%;

}


.checkbox-row {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.checkbox-row input {

  min-height:
    auto;

  width:
    17px;

  height:
    17px;

  accent-color:
    var(--sc-primary);

}


.checkbox-row label {

  display:
    block;

}


/* =========================================================
   INTEREST
========================================================= */

.interest-layout {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    18px;

}


.interest-form {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    15px;

}


.interest-form label:last-of-type {

  grid-column:
    span 2;

}


.interest-form button {

  grid-column:
    span 2;

}


.interest-result {

  min-height:
    240px;

  padding:
    28px;

  border:
    1px solid var(--border-mint);

  border-radius:
    14px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(0,241,208,.08),
      transparent 50%
    ),

    rgba(0,241,208,.018);

}


.interest-result > span {

  color:
    var(--muted-2);

  font-size:
    9px;

  letter-spacing:
    2px;

  font-weight:
    800;

}


.interest-result > strong {

  display:
    block;

  margin-top:
    12px;

  color:
    var(--sc-primary);

  font-size:
    clamp(30px, 4vw, 48px);

  letter-spacing:
    -2px;

}


.interest-result p {

  color:
    var(--muted);

  line-height:
    1.6;

}


.interest-extra {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    18px;

  color:
    var(--muted-2);

  font-size:
    10px;

}


.interest-extra b {

  color:
    var(--text);

}


/* =========================================================
   SAVINGS RESULT
========================================================= */

.result {

  margin-top:
    18px;

  padding:
    22px;

  display:
    flex;

  align-items:
    center;

  gap:
    50px;

  border:
    1px solid var(--border);

  border-radius:
    12px;

  background:
    rgba(0,241,208,.025);

}


.result div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

}


.result span {

  color:
    var(--muted-2);

  font-size:
    9px;

  letter-spacing:
    2px;

}


.result strong {

  font-size:
    24px;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

  width:
    min(1400px, calc(100% - 40px));

  margin:
    auto;

  padding:
    30px 0 45px;

  color:
    var(--muted-2);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid var(--border);

  font-size:
    10px;

}


footer strong {

  color:
    var(--text);

  margin-right:
    10px;

}


footer p {

  margin:
    0;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px) {

  .market-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .overview-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .performance-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }

}


@media (max-width: 850px) {

  main {

    width:
      min(100% - 24px, 700px);

    padding-top:
      18px;

  }


  .topbar-inner {

    width:
      calc(100% - 24px);

  }


  .market-status small {

    display:
      none;

  }


  .charts {

    grid-template-columns:
      1fr;

  }


  .chart-large {

    grid-column:
      auto;

  }


  .form-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .interest-layout {

    grid-template-columns:
      1fr;

  }


  .section-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .section-actions {

    justify-content:
      flex-start;

    width:
      100%;

  }

}


@media (max-width: 600px) {

  .topbar-inner {

    min-height:
      68px;

  }


  .logo-area span {

    display:
      none;

  }


  .market-status {

    font-size:
      9px;

  }


  .market-section,
  .performance-section,
  .portfolio-section,
  .input-section,
  .interest-section,
  .savings-section {

    padding:
      18px;

  }


  .market-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .market-card {

    min-height:
      165px;

    padding:
      16px;

  }


  .market-price {

    font-size:
      21px;

  }


  .overview-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .performance-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .form-grid {

    grid-template-columns:
      1fr;

  }


  .interest-form {

    grid-template-columns:
      1fr;

  }


  .interest-form label:last-of-type,
  .interest-form button {

    grid-column:
      auto;

  }


  .result {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      20px;

  }


  footer {

    width:
      calc(100% - 24px);

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      12px;

  }

}


@media (max-width: 380px) {

  .market-grid,
  .overview-grid,
  .performance-grid {

    grid-template-columns:
      1fr;

  }


  .market-card {

    min-height:
      150px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    transition:
      none !important;

    animation:
      none !important;

  }

}