/*
 * Thème hybride EQO
 * Conserve l’interface claire et ses contenus, puis réintroduit le vert profond
 * de la première version comme écrin, repère et surface d’action.
 */
:root {
  --hybrid-deep: #103b27;
  --hybrid-deeper: #0b2e1e;
  --hybrid-mid: #1f6542;
  --hybrid-mint: #d9eadc;
  --hybrid-cream: #f7f5ee;
  --hybrid-gold: #f1c45d;
  --hybrid-shadow: 0 28px 65px -36px rgba(5, 35, 21, .62), 0 8px 22px -18px rgba(5, 35, 21, .35);
}

html { background: var(--hybrid-cream); }
body {
  background:
    radial-gradient(circle at 82% 3%, rgba(126, 177, 133, .22), transparent 360px),
    linear-gradient(180deg, var(--hybrid-deep) 0, var(--hybrid-deep) 330px, var(--hybrid-cream) 330px, #f4f5ef 100%);
}

.app-shell { padding-top: 18px; }
.app-header { margin-bottom: 16px; }
.app-header .brand-word { color: #fffdf7; }
.app-header .brand-word em { color: #f2cf79; }
.app-header .brand-mark { filter: brightness(0) invert(1); opacity: .94; }
.unit-help {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  color: #eef7ef;
  padding-inline: 12px;
}
.unit-help span { border-color: rgba(255, 255, 255, .44); }
.unit-help:hover { background: rgba(255, 255, 255, .14); }
.net-chip { color: #fff; }

.tabs {
  border-color: rgba(15, 59, 39, .12);
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 18px 38px -26px rgba(3, 30, 17, .72);
}
.tabs button[aria-selected="true"] {
  background: #dcecdf;
  color: var(--hybrid-deep);
}

.scanner-card {
  overflow: hidden;
  border-color: rgba(255, 255, 255, .16);
  background:
    radial-gradient(circle at 100% 0, rgba(137, 190, 143, .18), transparent 290px),
    linear-gradient(145deg, #174c32, var(--hybrid-deeper));
  box-shadow: var(--hybrid-shadow);
  color: #fffdf7;
}
.scanner-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #6fb383, var(--hybrid-gold));
  opacity: .9;
}
.scanner-card h1 { color: #fffdf7; text-shadow: 0 2px 20px rgba(0, 0, 0, .12); }
.scanner-intro { color: #d7e7da; }
.scanner-card > .scan-zone > .btn-main {
  border-color: #f1c45d;
  background: linear-gradient(110deg, #f0bd48, #f6d47f);
  color: #153923;
  box-shadow: 0 15px 30px -18px rgba(0, 0, 0, .62);
}
.scanner-card > .scan-zone > .btn-main::after { color: #153923; }
.scanner-card > .scan-zone > .btn-main:hover:not(:disabled) { background: linear-gradient(110deg, #f5c95f, #ffe29a); }
.scan-options summary { color: #d9e9dc; }
.opts .btn-mini, .manual .btn-ghost {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .09);
  color: #f5faf5;
}
.opts .btn-mini:hover:not(:disabled) { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .15); color: #fff; }
.opts .btn-mini[aria-pressed="true"] { border-color: #acd5b7; background: #dcecdf; color: var(--hybrid-deep); }
.manual input { border-color: rgba(255, 255, 255, .22); background: #fff; }
.status { color: #d6e7da; }
.scanner-divider { color: #bcd4c3; }
.scanner-divider::before, .scanner-divider::after { background: rgba(255, 255, 255, .15); }
.entry-launch {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .085);
  color: #fffdf7;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.entry-launch:hover, .entry-launch:focus-visible { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); }
.entry-launch > span { background: rgba(241, 196, 93, .16); color: #f4cf78; }
.entry-launch small { color: #c7dbcc; }

.budget-context {
  border-color: rgba(255, 255, 255, .17);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.budget-context label, .budget-context p { color: #eef7ef; }
.budget-context select { border-color: rgba(255, 255, 255, .24); background: #fffdf8; color: var(--hybrid-deep); }
.budget-hero.month-card {
  border-color: rgba(255, 255, 255, .15);
  background:
    radial-gradient(circle at 100% 0, rgba(134, 189, 143, .19), transparent 320px),
    linear-gradient(140deg, #174c32, var(--hybrid-deeper));
  box-shadow: var(--hybrid-shadow);
  color: #fffdf7;
}
.month-card .month-nav strong, .month-card .month-nav button { color: #fffdf7; }
.month-card .month-nav button { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); }
.month-card .month-nav button:hover:not(:disabled) { border-color: rgba(255, 255, 255, .38); color: #fff; }
.month-card .account-mode { border-color: rgba(255, 255, 255, .16); color: #cde0d1; }
.month-card .account-mode strong { color: #f5d783; }
.month-card .balance-stage > span, .month-card .balance-stage > small { color: #d3e4d6; }
.month-card .balance-stage > strong { color: #fffdf7; }
.month-card .balance-stage > strong small { color: #f3cf77; }
.month-card.over .balance-stage > strong { color: #ffd0c5; }
.month-card .month-gauge { background: rgba(255, 255, 255, .15); }
.month-card.good .month-gauge > span { background: linear-gradient(90deg, #74c18b, #d3e99f); }
.month-card .balance-meta > div { border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .07); }
.month-card .balance-meta span, .month-card .balance-source { color: #c8dccc; }
.month-card .balance-meta strong { color: #fffdf7; }
.month-card .explain-link { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fffdf7; }
.month-card .explain-link i { background: rgba(255, 255, 255, .13); color: #fff; }
.month-card .account-add { border-color: var(--hybrid-gold); background: var(--hybrid-gold); color: #153923; }
.month-card .account-add:hover { background: #f7d77e; }

.card, .account-history, .project-context, .budget-dashboard {
  box-shadow: 0 22px 55px -42px rgba(16, 59, 39, .6), 0 2px 8px rgba(16, 59, 39, .035);
}
.footer-install {
  border-color: rgba(25, 77, 54, .13);
  background: linear-gradient(110deg, #f0f5ec, #fffdf8);
  box-shadow: 0 20px 42px -36px rgba(16, 59, 39, .58);
}

@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle at 90% 0, rgba(126, 177, 133, .2), transparent 280px),
      linear-gradient(180deg, var(--hybrid-deep) 0, var(--hybrid-deep) 286px, var(--hybrid-cream) 286px, #f4f5ef 100%);
  }
  .app-shell { padding-top: 12px; }
  .app-header { margin-bottom: 10px; }
  .unit-help { border-color: transparent; background: transparent; padding-inline: 4px; }
  .tabs { background: rgba(255, 253, 248, .98); }
  .scanner-card { border-radius: 25px; }
  .entry-launch { background: rgba(255, 255, 255, .09); }
}

@media (prefers-reduced-motion: reduce) {
  .scanner-card > .scan-zone > .btn-main { transition: none; }
}