/* moudir.ma shared style for credits, signup, privacy and terms (2026-10-16).
   Loaded after each page's own styles. Plain and solid, the same look as the
   home page: no blur, no glass, light only, one clay accent. */
:root, :root:not(.x) {
  --ground: #F3EADF; --card: #FFFCF8; --label: #1D252C; --muted: #5E5650; --secondary: #5E5650;
  --line: rgba(80, 45, 25, 0.12); --separator: rgba(80, 45, 25, 0.12); --fill: rgba(80, 45, 25, 0.06);
  --accent: #A0583A; --accent-text: #8A4A30; --tint: #F2E0D4; --danger: #B3261E; --ok: #2F6B4B; --ok-bg: #E4ECE6; --bad-bg: #F6E1DA;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root, :root:not(.x) { --ground: #F3EADF; --card: #FFFCF8; --label: #1D252C; --muted: #5E5650; --secondary: #5E5650;
    --line: rgba(80, 45, 25, 0.12); --separator: rgba(80, 45, 25, 0.12); --fill: rgba(80, 45, 25, 0.06);
    --accent-text: #8A4A30; --tint: #F2E0D4; --danger: #B3261E; --ok: #2F6B4B; --ok-bg: #E4ECE6; --bad-bg: #F6E1DA; }
  .seg-thumb { background: var(--card) !important; }
}
html, body { background: var(--ground) !important; color: var(--label); }
body::before { display: none !important; }
.glass { background: var(--card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Top bar: full width, solid, like the home page */
header, .nav { position: sticky !important; top: 0; inset-inline: 0; z-index: 20; padding: 0 !important; pointer-events: auto;
  background: rgba(243, 234, 223, 0.97) !important; border-bottom: 1px solid var(--line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.bar, .nav-inner { max-width: 1180px !important; height: 68px !important; margin: 0 auto !important; border-radius: 0 !important; padding: 0 28px !important;
  background: none !important; box-shadow: none !important; border: 0 !important; }
.brand { gap: 10px !important; }
.brand img { width: 34px !important; height: 34px !important; border-radius: 9px !important; box-shadow: none !important; }
.brand .wm { height: 38px !important; }
.seg { background: var(--fill) !important; }
.seg-thumb { box-shadow: 0 1px 3px rgba(70, 35, 15, 0.16) !important; }
@media (max-width: 760px) {
  .bar, .nav-inner { height: 60px !important; padding: 0 18px !important; }
  .brand img { width: 30px !important; height: 30px !important; }
  .brand .wm { height: 34px !important; }
}

/* Content */
main { padding-top: 40px !important; }
.legal { padding-top: 40px !important; }
.card, .legal-body { background: var(--card) !important; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(70, 35, 15, 0.06), 0 8px 24px -10px rgba(70, 35, 15, 0.18) !important; }
input { background: #fff !important; border: 1.5px solid #DCCFC4 !important; border-radius: 12px !important; }
input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(160, 88, 58, 0.18) !important; }
.role button { background: var(--card) !important; border: 1.5px solid #DCCFC4; box-shadow: none !important; }
.role button[aria-pressed="true"] { background: var(--tint) !important; border-color: var(--accent); }
.chips button { background: #fff !important; border: 1.5px solid #DCCFC4; }
.chips button[aria-pressed="true"] { background: var(--tint) !important; border-color: var(--accent); color: var(--accent-text) !important; }
.pw input { padding-inline-end: 72px !important; }
.role button, .chips button { background-image: none !important; }
button[type="submit"], .card > button:not(.link), .bundle button, .done a.btn { background: var(--accent) !important; background-image: none !important; box-shadow: none !important; color: #fff !important; }
button[type="submit"]:hover, .card > button:not(.link):hover, .bundle button:hover { background: #8A4A30 !important; }
/* signup and credits keep their header inside <main>: stretch it full width */
main > header { width: 100vw; margin: 0 calc(50% - 50vw) 40px !important; }
main:has(> header) { padding-top: 0 !important; }

.legal-section + .legal-section { border-top-color: var(--separator) !important; }
.legal-section p a, .agree a, .note a { color: var(--accent-text); }
.coin { background: var(--tint) !important; color: var(--accent-text) !important; }
.pw button { background: none !important; color: var(--accent-text) !important; }
.seg button { background: none !important; }
.done .mark, .msg.info { background: var(--tint) !important; color: var(--accent-text) !important; }
.foot, .footer { color: var(--muted); }