/* ---- Friends ---- */
.fr { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.fr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fr-row__txt { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.fr-reacts { display: flex; gap: 6px; }
.fr-off { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fr-off__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); text-decoration: none; }
.fr-off__item:hover { background: var(--soft); color: var(--ink); }
.fr-code { padding: 14px; border-radius: 16px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.fr-code strong { font-family: var(--font-head); font-size: 34px; letter-spacing: 2px; }
@media (max-width: 960px) { .fr { grid-template-columns: 1fr; } }

/* ---- Settings ---- */
.se { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.se-nav { display: flex; flex-direction: column; gap: 4px; }
.se-nav button { text-align: left; padding: 12px 14px; border: 0; background: transparent; border-radius: 12px; font-weight: 600; }
.se-nav button:hover { background: var(--soft); }
.se-nav button[aria-current="page"] { background: var(--surface); color: var(--accent-text); }
.se-main { padding: 28px; }
.se-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 2px solid var(--soft); flex-wrap: wrap; }
.se-danger { background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-shadow); }
@media (max-width: 860px) {
  .se { grid-template-columns: 1fr; }
  .se-nav { flex-direction: row; overflow-x: auto; }
  .se-nav h1 { display: none; }
  .se-nav button { white-space: nowrap; }
}
@media (max-width: 720px) { .se-main { padding: 18px; } }

/* ---- Offline ---- */
.of { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px var(--gutter); text-align: center; background: var(--bg); }
.of-brand { display: flex; align-items: center; gap: 10px; }
.of-canvas { width: min(820px, 100%); border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: 0 3px 0 var(--line); border: 2px solid var(--line); }
.of-canvas canvas { display: block; width: 100%; height: auto; touch-action: manipulation; }

/* ---- Account UI: your name, sign-in methods, devices, account standing, look and feel ---- */
.ac-msg { padding: 12px 14px; border-radius: 14px; font-weight: 600; background: var(--soft); }
.ac-msg--ok { background: var(--teal-soft); color: var(--teal-ink); }
.ac-msg--bad { background: var(--accent-soft); color: var(--accent-text); }
.ac-name { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.ac-name .bz-input { flex: 1 1 220px; min-width: 0; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-chips button { border: 0; background: var(--soft); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.ac-chips button:hover { background: var(--blue-soft); }
.ac-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-head); font-weight: 800; }
.ac-id { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; min-width: 0; }
.ac-confirm { border: 2px dashed var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ac-item { border-radius: 18px; background: var(--bg); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ac-item ul { list-style: disc; padding-left: 20px; }
.ac-reasons { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; }
.ac-reasons label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-weight: 600; cursor: pointer; }
.ac-reasons input { width: 20px; height: 20px; accent-color: var(--accent); }
.ac-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 2px solid var(--soft); flex-wrap: wrap; }
.ac-toggle input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--accent); flex: none; }

/* ---- Accessibility choices (lib/access.js puts these classes on <html>) ---- */
html.bz-reduce-motion *, html.bz-reduce-motion *::before, html.bz-reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
html.bz-large-text body { zoom: 1.2; min-height: calc(100vh / 1.2); }
html.bz-high-contrast {
  --ink: #000; --muted: #262626; --line: #000; --soft: #E4E4E4; --bg: #FFFFFF; --surface: #FFFFFF;
  --accent: #A12D00; --accent-text: #8A2500; --accent-soft: #FFFFFF; --teal-ink: #003F3F; --teal-soft: #FFFFFF; --blue-ink: #0A2A9C; --blue-soft: #FFFFFF; --focus: #0030D6;
}
html.bz-high-contrast[data-theme="dark"] {
  --ink: #FFFFFF; --muted: #F0F0F0; --line: #FFFFFF; --soft: #2A2A2A; --bg: #000000; --surface: #000000;
  --accent: #FF9B70; --accent-text: #FFB28F; --accent-soft: #000000; --teal-ink: #9DFFF3; --teal-soft: #000000; --blue-ink: #B9CBFF; --blue-soft: #000000; --focus: #FFFF00;
}
@media (prefers-color-scheme: dark) {
  html.bz-high-contrast:not([data-theme="light"]) {
    --ink: #FFFFFF; --muted: #F0F0F0; --line: #FFFFFF; --soft: #2A2A2A; --bg: #000000; --surface: #000000;
    --accent: #FF9B70; --accent-text: #FFB28F; --accent-soft: #000000; --teal-ink: #9DFFF3; --teal-soft: #000000; --blue-ink: #B9CBFF; --blue-soft: #000000; --focus: #FFFF00;
  }
}
html.bz-high-contrast .bz-panel, html.bz-high-contrast .bz-input, html.bz-high-contrast .bz-select, html.bz-high-contrast .ac-item, html.bz-high-contrast .ac-msg, html.bz-high-contrast .bz-btn--ghost { border: 2px solid var(--ink); }
html.bz-high-contrast .bz-muted, html.bz-high-contrast .bz-small { color: var(--ink); }
html.bz-high-contrast a { text-decoration: underline; }