/* صورة الحساب + القايمة (js/account.js). في الرئيسية على شمال العنوان، وفي كل قسم على شمال شريط "→ الرئيسية"، فمش بتغطي العنوان ولا الزرار. */
/* متصفح الموبايل ما يغمّقش الصفحة لوحده: "فاتح" = فاتح بس، و"زي الجهاز" الصفحة بتغمّق بألوانها هي */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: only light; }
:root[data-theme="dark"] { color-scheme: only dark; }
.ac-head { position: relative; padding-inline: 52px; }
.ac-btn {
  flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  font: 700 1.05rem/1 var(--font-display);
}
.ac-head .ac-btn { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); }
.backbar .ac-btn { margin-inline-start: auto; width: 36px; height: 36px; font-size: 0.95rem; }
.ac-btn:focus-visible, .ac-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-btn > *, .ac-face > * { grid-area: 1 / 1; }
.ac-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.ac-menu {
  position: fixed; z-index: 60;
  width: min(300px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); text-align: start;
  font: 400 0.95rem/1.5 var(--font-body);
}
.ac-menu[hidden] { display: none; }
.ac-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.ac-face {
  flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font: 700 1.3rem/1 var(--font-display);
}
.ac-who { min-width: 0; }
.ac-name { font-weight: 700; overflow-wrap: anywhere; }
.ac-email { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; direction: ltr; text-align: end; }
.ac-label { color: var(--muted); font-size: 0.85rem; margin-bottom: 6px; }
.ac-seg { display: flex; gap: 6px; margin-bottom: 14px; }
.ac-seg button, .ac-row button, .ac-out {
  min-height: 40px; padding: 6px 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  font: 700 0.9rem var(--font-body);
}
.ac-seg button { flex: 1 1 0; }
.ac-seg button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ac-out { width: 100%; color: var(--warn); }
.ac-conf p { margin: 0 0 10px; font-size: 0.9rem; }
.ac-conf[hidden], .ac-out[hidden] { display: none; }
.ac-row { display: flex; gap: 8px; }
.ac-row button { flex: 1 1 0; }
.ac-row .ac-yes { background: var(--warn); border-color: var(--warn); color: var(--surface); }
.ac-row button:disabled { opacity: .6; }
.ac-msg { margin: 8px 0 0; font-size: 0.85rem; color: var(--warn); }
.ac-msg:empty { display: none; }