/* Esmile website: friendly social theme (warm cream surfaces, coral -> pink -> violet gradient, soft round cards). Light or dark from the system. */
.b-esmile {
  --s-coral: #ff7a59; --s-pink: #ff4f8b; --s-violet: #7c5cff; --s-grad: linear-gradient(135deg, #ff8a5b, #ff4f8b 50%, #7c5cff);
  --bg: #fff7f5; --bg2: #fff0ec; --card: #ffffff; --card2: #fffaf8; --line: #f6e1db; --line2: #ecc9c0;
  --text: #2a1b22; --muted: #6e5560; --dim: #9c8590; --acc: #f0457f; --acc2: #7c5cff; --red: #d9364f; --green: #1f9d63;
  --r: 22px; --r-sm: 14px; --chrome: var(--s-grad); --metal: var(--s-grad); --s-soft: rgba(255, 79, 139, .1);
  --font: "Nunito", "Quicksand", "Varela Round", "Segoe UI", system-ui, "Noto Sans", "Noto Sans Arabic", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  .b-esmile {
    --bg: #17111a; --bg2: #1e1622; --card: #221927; --card2: #281e2e; --line: #33263a; --line2: #4a3753;
    --text: #fbeff4; --muted: #c9adbd; --dim: #95798a; --acc: #ff6b9d; --acc2: #a58bff; --s-soft: rgba(255, 107, 157, .14);
    color-scheme: dark;
  }
}
body.b-esmile { background: radial-gradient(900px 420px at 85% -8%, rgba(255, 138, 91, .16), transparent 62%),
  radial-gradient(800px 420px at -5% 10%, rgba(124, 92, 255, .1), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); }
.b-esmile h1, .b-esmile h2 { font-weight: 800; letter-spacing: -.01em; }
.b-esmile h3 { font-weight: 700; }
.b-esmile .chrome { background: var(--s-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.b-esmile a { color: var(--acc); }

/* bar */
.b-esmile .top { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line); }
.b-esmile .brand { font-weight: 800; font-size: 1.3rem; background: var(--s-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.b-esmile .brand img { border-radius: 11px; box-shadow: 0 4px 14px rgba(255, 79, 139, .35); }
.b-esmile .nav > a:not(.btn) { border-radius: 100px; font-weight: 700; padding: 8px 16px; color: var(--muted); }
.b-esmile .nav > a:not(.btn):hover { background: var(--s-soft); color: var(--text); text-decoration: none; }
.b-esmile .nav > a[aria-current] { background: var(--s-grad); color: #fff; }
.b-esmile .langs > div { background: var(--card); border-color: var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(42, 27, 34, .14); }
@media (max-width: 1000px) { .b-esmile .nav { background: var(--bg); box-shadow: 0 10px 24px rgba(42, 27, 34, .12); } }

/* buttons */
.b-esmile .btn { border-radius: 100px; font-weight: 800; transition: transform .15s, box-shadow .2s, background .2s; }
.b-esmile .btn-chrome { background: var(--s-grad); color: #fff; border: 0; box-shadow: 0 8px 22px rgba(255, 79, 139, .32); }
.b-esmile .btn-chrome:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(124, 92, 255, .35); text-decoration: none; }
.b-esmile .btn-ghost { background: var(--card); color: var(--acc); border-color: var(--line2); }
.b-esmile .btn-ghost:hover { background: var(--s-soft); text-decoration: none; }

/* surfaces */
.b-esmile .card, .b-esmile .card2 { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 6px 24px rgba(42, 27, 34, .06); }
.b-esmile .phero { background: none; }
.b-esmile .phero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.b-esmile .lead { color: var(--muted); }
.b-esmile .tag { background: var(--s-soft); color: var(--acc); border-radius: 100px; }
.b-esmile .inp, .b-esmile .cm-acts button { background: var(--card); color: var(--text); border-color: var(--line2); border-radius: 14px; }
.b-esmile .inp:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--s-soft); }
.b-esmile .tab { border-radius: 100px; }
.b-esmile .tab.on { background: var(--s-grad); color: #fff; border-color: transparent; }
.b-esmile .av { background: var(--bg2); }
.b-esmile code { background: var(--bg2); border-color: var(--line); }

/* footer */
.b-esmile .foot { background: var(--bg2); border-top: 1px solid var(--line); }
.b-esmile .foot a { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .b-esmile .btn { transition: none; transform: none !important; } }

/* social pages: the shared social.css was written for the dark ESO site - give its dark wells the Esmile surfaces */
.b-esmile .sx-ta, .b-esmile .sx-bg-none, .b-esmile select.inp, .b-esmile .sx-vis, .b-esmile .ig-search .ig-q, .b-esmile .ig-pickw .inp,
.b-esmile .sha, .b-esmile .cm-acts button { background: var(--bg2); color: var(--text); border-color: var(--line2); }
.b-esmile select.inp option { background: var(--card); color: var(--text); }
.b-esmile .sx-pv, .b-esmile .pf2-cell, .b-esmile .sx-prog { background: var(--bg2); }
.b-esmile .sx-ta::placeholder, .b-esmile .inp::placeholder { color: var(--dim); }
.b-esmile .sx-ta:focus { box-shadow: 0 0 0 3px var(--s-soft); outline: 0; }
.b-esmile select.inp.sx-vis { background-color: var(--bg2); color: var(--text); border-color: var(--line2); }
.b-esmile select.inp.sx-vis option { background: var(--card); color: var(--text); }