/* ============================================================
   France — Bleu / Blanc / Rouge, elegant thin lines (Parisian chic)
   No @import / no external fonts
   ============================================================ */

:root {
  --brand: #0055A4;          /* French blue */
  --brand2: #EF4135;         /* French red */
  --brand3: #003e7e;
  --bg: #f7f7f9;
  --card: #ffffff;
  --ink: #1c1c1c;
}

body {
  font-family: 'Segoe UI', -apple-system, Roboto, Arial, sans-serif;
  background: #ececf0;
  color: var(--ink);
}
.app { background: var(--bg); }

/* Flag strip: blue-white-red vertical bands */
.flagstrip {
  height: 5px;
  background: linear-gradient(to right,
    #0055A4 0 33.3%, #ffffff 33.3% 66.6%, #EF4135 66.6% 100%);
}

/* Appbar: soft blue, thin, refined; slim rounded */
.appbar {
  background: linear-gradient(180deg, #0055A4 0%, #003e7e 100%);
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding: 12px 18px 18px;
}
.appbar .brand { letter-spacing: 1px; font-weight: 500; }
.appbar .brand .logo { border-radius: 6px; border: 1px solid rgba(255,255,255,.5); }
.appbar .iconbtn { border-radius: 8px; background: rgba(255,255,255,.12); }

/* Wallet card: pale blue frosted */
.wallet-card {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
}
.wallet-card .acts a { border-radius: 8px; background: #fff; color: var(--brand); }

/* Cards: elegant, thin 1px border, medium radius, minimal shadow */
.card, .cat, .badge, .testi {
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,85,164,.06);
}
.card { background: var(--card); border: 1px solid #e6e8ee; }

/* Buttons: refined blue gradient, medium radius, thin */
.btn {
  border-radius: 8px;
  background: linear-gradient(135deg, #0055A4, #003e7e);
  box-shadow: 0 3px 10px rgba(0,85,164,.25);
  font-weight: 500;
}
.btn.secondary { background: #f0f1f5; color: var(--ink); box-shadow: none; }

/* Promo: white card, thin blue→red hairline top */
.promo {
  border-radius: 10px;
  background: linear-gradient(120deg, #ffffff 0%, #eef3fb 70%, #fdeceb 100%);
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, #0055A4, #ffffff, #EF4135) 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  color: var(--ink);
}

/* Chips: thin outline */
.chip { border-radius: 6px; border: 1px solid #c9d3e6; color: var(--brand); background: #fff; }

/* Category grid */
.cat { border: 1px solid #e6e8ee; background: var(--card); }
.cat .nm { color: var(--ink); font-weight: 500; }

/* Stats: blue band */
.stats {
  background: linear-gradient(90deg, #0055A4, #EF4135);
  border-radius: 10px;
}

/* Badges */
.badge { border: 1px solid #e6e8ee; background: #fff; }
.badge .b-t { color: var(--ink); }

/* Howto numbers: blue thin squares */
.howto .n { border-radius: 6px; background: var(--brand); color: #fff; }

/* Price */
.price { color: var(--brand2); font-weight: 600; }

/* Tabbar */
.tabbar { border-top: 1px solid #e0e2ea; background: #fff; }
.tabbar a.on { color: var(--brand); }
.tabbar a.on .ic { filter: none; }