/*
 * style.css — Member Portal
 * Edit this file to change the visual design.
 * The layout, colours and component styles are all here.
 */

/* ── Reset & tokens ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Default theme (dark) ────────────────────────────────────── */
:root {
  --bg:    #0d0d10;
  --bg2:   #15151a;
  --bg3:   #1c1c23;
  --bg4:   #242430;
  --bdr:   rgba(255,255,255,.07);
  --bdr2:  rgba(255,255,255,.13);
  --tx:    #ede9e2;
  --tx2:   #908b84;
  --tx3:   #5c5852;
  --ac:    #b89a5e;
  --abg:   rgba(184,154,94,.11);
  --super: #8b6fd4;
  --supbg: rgba(139,111,212,.12);
  --danger:#d95f5f;
  --ok:    #5aad72;
  --r:     10px;
  --rc:    16px;
}

/* ── Neos light theme ────────────────────────────────────────── */
/* Inspired by neosvzw.be: white background, navy headings,      */
/* warm orange accent.                                            */
[data-theme="neos"] {
  --bg:    #f5f4f0;
  --bg2:   #ffffff;
  --bg3:   #eceae5;
  --bg4:   #e0ddd7;
  --bdr:   rgba(0,0,0,.08);
  --bdr2:  rgba(0,0,0,.14);
  --tx:    #1a1e2e;
  --tx2:   #4a4e62;
  --tx3:   #8a8ea0;
  --ac:    #e05c20;
  --abg:   rgba(224,92,32,.10);
  --super: #1a4fa0;
  --supbg: rgba(26,79,160,.10);
  --danger:#c0392b;
  --ok:    #27ae60;
  --r:     10px;
  --rc:    16px;
}
/* Neos: serif headings using the site's editorial feel */
[data-theme="neos"] h1.ct,
[data-theme="neos"] .ptit,
[data-theme="neos"] .brand,
[data-theme="neos"] .ghdr h2,
[data-theme="neos"] .svl {
  font-family: Georgia, 'Times New Roman', serif;
}
/* Neos: card shadow instead of border */
[data-theme="neos"] .card,
[data-theme="neos"] .tw,
[data-theme="neos"] .fcard,
[data-theme="neos"] .stat,
[data-theme="neos"] .inner {
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
[data-theme="neos"] .topbar,
[data-theme="neos"] .sidebar {
  border-color: var(--bdr);
}
/* Neos: primary button uses orange */
[data-theme="neos"] .btn {
  background: var(--ac);
  color: #fff;
}
[data-theme="neos"] .btn:hover { opacity: .88; }
/* Neos: admin panel button */
[data-theme="neos"] .gbtn-admin {
  background: rgba(224,92,32,.10);
  border-color: rgba(224,92,32,.35);
  color: var(--ac);
}
/* Neos: login card glow */
[data-theme="neos"] .cc::before {
  background: radial-gradient(circle, rgba(224,92,32,.06) 0%, transparent 68%);
}
/* Neos: mcard hover border */
[data-theme="neos"] .mcard:hover { border-color: var(--ac); }
/* Neos: sidebar active item */
[data-theme="neos"] .sbtn.on { background: rgba(224,92,32,.10); color: var(--ac); }
/* Neos: mobile nav active */
[data-theme="neos"] .mob-nav-item.on { color: var(--ac); }
/* Neos: topbar brand colour */
[data-theme="neos"] .brand { color: #1a1e2e; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
}

/* ── Views ──────────────────────────────────────────────────── */
.view { display: none; min-height: 100vh; flex-direction: column; }
.view.active { display: flex; }

/* ── Centred card layout (login / setup) ────────────────────── */
.cc {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
.cc::before {
  content: ''; position: absolute; top: -28%; left: 50%;
  transform: translateX(-50%); width: 580px; height: 580px;
  background: radial-gradient(circle,rgba(184,154,94,.055) 0%,transparent 68%);
  pointer-events: none;
}
.card {
  background: var(--bg2); border: 1px solid var(--bdr2);
  border-radius: var(--rc); padding: 44px 40px;
  width: 100%; max-width: 440px; position: relative; z-index: 1;
}

/* ── Card icon ───────────────────────────────────────────────── */
.cico {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--abg); border: 1px solid rgba(184,154,94,.22);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.cico svg { width: 20px; height: 20px; }

/* ── Typography ─────────────────────────────────────────────── */
h1.ct {
  font-family: 'DM Serif Display', serif;
  font-size: 26px; font-weight: 400; margin-bottom: 6px;
}
.cs { font-size: 13px; color: var(--tx2); line-height: 1.65; margin-bottom: 28px; }

/* ── Form elements ───────────────────────────────────────────── */
.fl {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx2); margin-bottom: 7px;
}
.fi {
  width: 100%; background: var(--bg3); border: 1px solid var(--bdr2);
  border-radius: var(--r); color: var(--tx);
  font-family: 'DM Sans', sans-serif; font-size: 15px;
  padding: 12px 15px; outline: none;
  transition: border-color .15s; margin-bottom: 18px;
  letter-spacing: .06em;
}
.fi:focus { border-color: var(--ac); }
.fi::placeholder { color: var(--tx3); letter-spacing: 0; }
.fi.norm { letter-spacing: 0; }

.btn {
  width: 100%; background: var(--ac); color: #1a1408;
  border: none; border-radius: var(--r);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  padding: 13px; cursor: pointer; transition: opacity .15s, transform .1s;
}
.btn:hover  { opacity: .88; }
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.merr { margin-top: 13px; font-size: 13px; color: var(--danger); display: none; line-height: 1.5; }
.mok  { margin-top: 13px; font-size: 13px; color: var(--ok);     display: none; }

.slink { text-align: center; margin-top: 18px; font-size: 12px; color: var(--tx3); }
.slink a { color: var(--tx2); text-decoration: none; cursor: pointer; }
.slink a:hover { color: var(--ac); }

/* ── Login two-step chrome ───────────────────────────────────── */
.step-back {
  display: flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--tx3); cursor: pointer; border: none; background: none;
  padding: 0; margin-bottom: 22px; transition: color .15s;
}
.step-back:hover { color: var(--tx2); }
.step-back svg { width: 14px; height: 14px; }

.step-name {
  font-size: 13px; color: var(--tx2); background: var(--bg3);
  border: 1px solid var(--bdr2); border-radius: 8px;
  padding: 8px 13px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.step-name svg { width: 14px; height: 14px; color: var(--ac); flex-shrink: 0; }

/* ── Attempt pips + lockout bar ─────────────────────────────── */
.pips { display: flex; gap: 5px; margin-top: 12px; }
.pip  {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg4); border: 1px solid var(--bdr2);
  transition: background .2s;
}
.pip.used { background: var(--danger); border-color: var(--danger); }

.lkbar {
  display: none; margin-top: 14px; padding: 10px 14px;
  background: rgba(217,95,95,.1); border: 1px solid rgba(217,95,95,.2);
  border-radius: 8px; font-size: 13px; color: var(--danger);
}

/* ── Honeypot (invisible to real users) ─────────────────────── */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ── Setup steps indicator ───────────────────────────────────── */
.ssteps { display: flex; gap: 6px; margin-bottom: 28px; }
.sstep  { flex: 1; height: 3px; background: var(--bg4); border-radius: 2px; transition: background .3s; }
.sstep.done { background: var(--ac); }
.sstep.act  { background: rgba(184,154,94,.4); }

/* ── Notice banners ─────────────────────────────────────────── */
.notice      { padding: 12px 16px; border-radius: 10px; font-size: 13px; line-height: 1.55; margin-bottom: 20px; }
.notice-info { background: var(--abg); border: 1px solid rgba(184,154,94,.25); color: var(--ac); }

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar {
  height: 58px; background: var(--bg2); border-bottom: 1px solid var(--bdr);
  display: flex; align-items: center; padding: 0 28px; gap: 12px; flex-shrink: 0;
}
.brand { font-family: 'DM Serif Display', serif; font-size: 17px; color: var(--ac); flex: 1; }
.tbuser { font-size: 12px; color: var(--tx3); }

.gbtn {
  background: transparent; border: 1px solid var(--bdr2); border-radius: 8px;
  color: var(--tx2); font-family: 'DM Sans', sans-serif; font-size: 13px;
  padding: 7px 14px; cursor: pointer; transition: all .15s;
}
.gbtn:hover { background: var(--bg3); color: var(--tx); }
.back-gallery-btn { margin-left: auto; }

.gbtn-admin {
  background: var(--abg); border: 1px solid rgba(184,154,94,.35); border-radius: 8px;
  color: var(--ac); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  padding: 7px 16px; cursor: pointer; transition: all .15s;
  display: none; align-items: center; gap: 6px;
}
.gbtn-admin:hover { background: rgba(184,154,94,.2); }
.gbtn-admin svg  { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Gallery ─────────────────────────────────────────────────── */
#vGallery { background: var(--bg); -webkit-touch-callout: none; }

.gwrap {
  flex: 1; padding: 38px 32px;
  max-width: 1200px; margin: 0 auto; width: 100%;
}
.ghdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.ghdr h2 { font-family: 'DM Serif Display', serif; font-size: 28px; font-weight: 400; flex-shrink: 0; }

.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.mcard {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--rc); overflow: hidden; padding: 0;
  text-align: center;
  transition: border-color .2s, transform .2s;
  user-select: none; -webkit-user-select: none;
}
.mcard:hover { border-color: var(--bdr2); transform: translateY(-2px); }

/* Canvas avatar — square, full card width, no src in DOM */
.avc {
  width: 100%; aspect-ratio: 1 / 1;
  display: block;
  border-radius: 0 !important;
  border: none;
  pointer-events: none; -webkit-user-drag: none;
}
.avm {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 0;
  background: var(--bg3);
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif; font-size: 36px;
  color: var(--ac); pointer-events: none;
}
.mcard-info { padding: 12px 10px 14px; }
.mname  { font-size: 13px; font-weight: 500; color: var(--tx);  line-height: 1.3; }
.mlname { font-size: 12px; color: var(--tx2); margin-top: 2px; }
.gempty {
  grid-column: 1 / -1; text-align: center;
  padding: 72px 20px; color: var(--tx3); font-size: 14px;
}

/* ── Admin layout ────────────────────────────────────────────── */
#vAdmin { background: var(--bg); }
.abody  { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: 218px; flex-shrink: 0; background: var(--bg2);
  border-right: 1px solid var(--bdr); padding: 20px 14px;
  display: flex; flex-direction: column; gap: 3px; overflow-y: auto;
}
.slbl {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3);
  padding: 0 10px; margin: 12px 0 5px;
}
.sbtn {
  background: transparent; border: none; border-radius: 8px;
  color: var(--tx2); font-family: 'DM Sans', sans-serif;
  font-size: 13px; padding: 9px 11px; cursor: pointer;
  text-align: left; width: 100%; transition: all .15s;
  display: flex; align-items: center; gap: 8px;
}
.sbtn:hover { background: var(--bg3); color: var(--tx); }
.sbtn.on    { background: var(--abg); color: var(--ac); }
.sico { width: 16px; text-align: center; font-size: 14px; }

.amain  { flex: 1; overflow-y: auto; padding: 30px; }
.panel  { display: none; }
.panel.on { display: block; }
.ptit {
  font-family: 'DM Serif Display', serif;
  font-size: 22px; font-weight: 400; margin-bottom: 22px;
}

/* ── Stats row ───────────────────────────────────────────────── */
.srow { display: flex; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.stat {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--rc); padding: 18px 20px; min-width: 110px;
}
.slb { font-size: 11px; color: var(--tx3); margin-bottom: 5px; }
.svl { font-family: 'DM Serif Display', serif; font-size: 26px; }

/* ── Admin table ─────────────────────────────────────────────── */
.tw        { background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--rc); overflow: hidden; }
.tw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbar      {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--bdr); flex-wrap: wrap;
}
.srch {
  flex: 1; min-width: 140px; max-width: 260px;
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 8px;
  color: var(--tx); font-family: 'DM Sans', sans-serif; font-size: 13px;
  padding: 7px 13px; outline: none;
}
.srch:focus       { border-color: var(--ac); }
.srch::placeholder { color: var(--tx3); }

table             { width: 100%; border-collapse: collapse; }
th {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tx3); text-align: left;
  padding: 11px 18px; border-bottom: 1px solid var(--bdr);
}
td { font-size: 13px; padding: 11px 18px; border-bottom: 1px solid var(--bdr); vertical-align: middle; }
tr:last-child td  { border-bottom: none; }
tr:hover td       { background: var(--bg3); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 20px;
}
.bon   { background: rgba(90,173,114,.13); color: var(--ok);    border: 1px solid rgba(90,173,114,.22); }
.boff  { background: var(--bg4);           color: var(--tx3);   border: 1px solid var(--bdr2); }
.badm  { background: var(--abg);           color: var(--ac);    border: 1px solid rgba(184,154,94,.25); }
.bsuper{ background: var(--supbg);         color: var(--super); border: 1px solid rgba(139,111,212,.3); }

/* ── Table row avatar ────────────────────────────────────────── */
.rar  { display: flex; align-items: center; gap: 9px; }
.ravc { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bdr2); flex-shrink: 0; pointer-events: none; }
.ravm {
  width: 30px; height: 30px; border-radius: 50%; background: var(--bg3);
  border: 1px solid var(--bdr2); display: flex; align-items: center;
  justify-content: center; font-family: 'DM Serif Display', serif;
  font-size: 11px; color: var(--ac); flex-shrink: 0;
}

/* ── Action buttons ─────────────────────────────────────────── */
.actrow { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

.bxs {
  background: transparent; border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx2); font-family: 'DM Sans', sans-serif; font-size: 11px;
  padding: 4px 8px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.bxs:hover { border-color: var(--ac); color: var(--ac); }

.bxs-adm {
  background: var(--abg); border: 1px solid rgba(184,154,94,.25); border-radius: 6px;
  color: var(--ac); font-family: 'DM Sans', sans-serif; font-size: 11px;
  padding: 4px 8px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.bxs-adm:hover { background: rgba(184,154,94,.2); }

.bxs-super {
  background: var(--supbg); border: 1px solid rgba(139,111,212,.3); border-radius: 6px;
  color: var(--super); font-family: 'DM Sans', sans-serif; font-size: 11px;
  padding: 4px 8px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.bxs-super:hover { background: rgba(139,111,212,.22); }

.bxsd {
  background: rgba(217,95,95,.09); border: 1px solid rgba(217,95,95,.2); border-radius: 6px;
  color: var(--danger); font-family: 'DM Sans', sans-serif; font-size: 11px;
  padding: 4px 8px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.bxsd:hover { background: rgba(217,95,95,.18); }

.bsm {
  background: var(--abg); border: 1px solid rgba(184,154,94,.22); border-radius: 8px;
  color: var(--ac); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  padding: 7px 15px; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.bsm:hover { background: rgba(184,154,94,.18); }

/* ── Form card (admin panels) ────────────────────────────────── */
.fcard {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: var(--rc); padding: 26px; max-width: 520px; margin-bottom: 20px;
}
.fcard h3 { font-size: 14px; font-weight: 500; margin-bottom: 14px; }

.frow2   { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fff     { flex: 1; min-width: 160px; }
.fff label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--tx2); margin-bottom: 6px;
}
.fi2 {
  width: 100%; background: var(--bg3); border: 1px solid var(--bdr2);
  border-radius: 8px; color: var(--tx); font-family: 'DM Sans', sans-serif;
  font-size: 13px; padding: 9px 13px; outline: none; transition: border-color .15s;
}
.fi2:focus       { border-color: var(--ac); }
.fi2::placeholder { color: var(--tx3); }

.chkrow { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--tx2); }
input[type=checkbox] { accent-color: var(--ac); width: 15px; height: 15px; }

.phrow   { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.phprev  {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--bdr2);
  overflow: hidden; display: flex; align-items: center;
  justify-content: center; font-size: 10px; color: var(--tx3); flex-shrink: 0;
}

/* ── Bulk import ─────────────────────────────────────────────── */
.dz {
  border: 1px dashed var(--bdr2); border-radius: 10px;
  padding: 28px; text-align: center; cursor: pointer;
  transition: all .15s; margin-bottom: 14px;
}
.dz:hover, .dz.over { border-color: var(--ac); background: var(--abg); }
.dz p    { font-size: 13px; color: var(--tx2); margin-bottom: 5px; }
.dz span { font-size: 11px; color: var(--tx3); }

.bkta {
  width: 100%; background: var(--bg3); border: 1px solid var(--bdr2);
  border-radius: 8px; color: var(--tx); font-family: 'Courier New', monospace;
  font-size: 12px; padding: 13px; outline: none;
  resize: vertical; min-height: 130px; margin-bottom: 12px;
}
.bkta:focus { border-color: var(--ac); }
.bkprev { font-size: 12px; color: var(--tx2); margin-top: 8px; }

/* ── Divider ─────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--bdr); margin: 22px 0; }

/* ── Super-admin credential edit overlay ────────────────────── */
.edit-modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6);
  align-items: flex-start; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.edit-modal.open { display: flex; }
.edit-modal .inner {
  background: var(--bg2); border: 1px solid var(--bdr2);
  border-radius: var(--rc); padding: 30px; width: 100%;
  max-width: 500px; position: relative;
  margin: auto; /* centres vertically when content is short */
}
.edit-modal h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 20px; font-weight: 400; margin-bottom: 18px;
  padding-right: 28px; /* room for close button */
}
.modal-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; color: var(--tx3);
  font-size: 20px; cursor: pointer; line-height: 1;
  padding: 4px 8px; /* larger tap target on mobile */
}
.modal-close:hover { color: var(--tx); }

@media (max-width: 540px) {
  .edit-modal { padding: 0; align-items: flex-end; }
  .edit-modal .inner {
    border-radius: var(--rc) var(--rc) 0 0;
    padding: 24px 18px 32px;
    max-width: 100%;
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* ── Hamburger + mobile menu ─────────────────────────────────── */
/* Desktop: show inline controls, hide hamburger */
.topbar-desktop { display: flex; align-items: center; gap: 12px; }
.hamburger       { display: none !important; }
.hmenu           { display: none; }

/* Hamburger button */
.hamburger {
  background: transparent; border: 1px solid var(--bdr2); border-radius: 8px;
  width: 36px; height: 36px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer; flex-shrink: 0; transition: border-color .15s;
}
.hamburger:hover { border-color: var(--ac); }
.hamburger span {
  display: block; width: 16px; height: 1.5px;
  background: var(--tx2); border-radius: 2px; transition: background .15s;
}
.hamburger:hover span { background: var(--ac); }

/* Dropdown menu — hidden by default, shown with .open */
.hmenu {
  background: var(--bg2); border-bottom: 1px solid var(--bdr2);
  padding: 14px 16px; display: none; flex-direction: column; gap: 10px;
}
.hmenu.open { display: flex; }
.hmenu-user {
  font-size: 13px; color: var(--tx2);
  padding-bottom: 10px; border-bottom: 1px solid var(--bdr);
}
.hmenu-btn { width: 100%; text-align: center; justify-content: center; }

@media (max-width: 700px) {
  .topbar-desktop { display: none; }
  .hamburger      { display: flex !important; margin-left: auto; }
}
.lang-switch {
  display: flex; gap: 2px; align-items: center;
}
/* Active language gets the gold tint — inherits all other styles from .gbtn */
.lang-btn.on { background: var(--abg); border-color: var(--ac); color: var(--ac); }

.mcard-admin  { cursor: pointer; }
.mcard-admin:hover { border-color: var(--ac); }
.mcard-admin:hover .mcard-edit-hint { opacity: 1; }
.mcard-edit-hint {
  font-size: 10px; color: var(--ac); margin-top: 3px;
  opacity: 0; transition: opacity .15s;
}
.mob-member-list { display: none; }   /* hidden on desktop */
.mmc { padding: 14px 16px; border-bottom: 1px solid var(--bdr); }
.mmc:last-child  { border-bottom: none; }
.mmc-top     { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mmc-avatar .ravc,
.mmc-avatar .ravm { width: 44px !important; height: 44px !important; font-size: 14px; }
.mmc-cv      { border-radius: 50%; border: 1px solid var(--bdr2); flex-shrink: 0; }
.mmc-mono    { flex-shrink: 0; }
.mmc-info    { flex: 1; min-width: 0; }
.mmc-name    { font-size: 13px; font-weight: 500; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmc-num     { font-size: 12px; color: var(--tx2); margin: 2px 0 4px; }
.mmc-email   { font-size: 10px; color: var(--tx3); margin-bottom: 6px; word-break: break-all; display: flex; align-items: center; gap: 3px; }
.mmc-badges  { display: flex; gap: 5px; flex-wrap: wrap; }
.tbl-email   { font-size: 10px; color: var(--tx3); margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.mmc-you     { font-size: 11px; color: var(--tx3); font-weight: 400; }
.mmc-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Theme picker ────────────────────────────────────────────── */
.theme-preview { pointer-events: none; }
.theme-label   { pointer-events: none; }
.theme-grid  { display: flex; gap: 16px; flex-wrap: wrap; }
.theme-card  {
  background: var(--bg3); border: 2px solid var(--bdr2); border-radius: var(--rc);
  padding: 12px; cursor: pointer; transition: border-color .15s; width: 160px;
  text-align: left; font-family: inherit; color: inherit; display: block;
}
.theme-card:hover  { border-color: var(--ac); }
.theme-card.active { border-color: var(--ac); }
.theme-preview {
  border-radius: 8px; overflow: hidden; margin-bottom: 10px;
  height: 90px; display: flex; flex-direction: column;
}
.tp-topbar { height: 14px; flex-shrink: 0; }
.tp-body   { display: flex; flex: 1; gap: 3px; padding: 3px; }
.tp-sidebar{ width: 28px; flex-shrink: 0; border-radius: 4px; }
.tp-main   { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tp-card   { flex: 1; border-radius: 4px; }

/* Dark preview colours */
.theme-preview-dark             { background: #0d0d10; }
.theme-preview-dark .tp-topbar  { background: #15151a; }
.theme-preview-dark .tp-sidebar { background: #15151a; }
.theme-preview-dark .tp-card    { background: #15151a; }

/* Neos light preview colours */
.theme-preview-neos             { background: #f5f4f0; }
.theme-preview-neos .tp-topbar  { background: #ffffff; }
.theme-preview-neos .tp-sidebar { background: #ffffff; }
.theme-preview-neos .tp-card    { background: #ffffff; }

.theme-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--tx2); }
.theme-check { color: var(--ac); font-weight: 700; font-size: 13px; width: 13px; }

/* ── Role-based visibility ───────────────────────────────────── */
.super-only { display: none !important; }
body.role-super .super-only { display: flex !important; }
code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ── Mobile bottom nav (hidden on desktop) ───────────────────── */
.mob-nav { display: none; }

/* ── Responsive breakpoints ─────────────────────────────────── */
@media (max-width: 700px) {
  .sidebar { display: none; }
  .amain   { padding: 20px 16px 90px; }
  .ptit    { font-size: 18px; margin-bottom: 16px; }
  .fcard   { padding: 18px 16px; }
  .frow2   { flex-direction: column; gap: 8px; }
  .srow    { gap: 10px; }
  .stat    { padding: 14px 16px; min-width: 80px; }
  .svl     { font-size: 22px; }

  /* Hide desktop table, show mobile card list */
  .tw-scroll          { display: none; }
  .mob-member-list    { display: block; }

  .mob-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 100; background: var(--bg2); border-top: 1px solid var(--bdr2); height: 64px;
  }
  .mob-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    background: transparent; border: none; color: var(--tx3);
    font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500;
    cursor: pointer; padding: 0; transition: color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
  .mob-nav-item.on  { color: var(--ac); }
  .mob-nav-item:active { opacity: .7; }
}

@media (max-width: 500px) {
  .card   { padding: 30px 22px; }
  .gwrap  { padding: 20px 16px; }
  .mgrid  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* ── Idle warning overlay ────────────────────────────────────── */
.idle-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.72);
  align-items: center; justify-content: center; padding: 24px;
}
.idle-overlay.open { display: flex; }
.idle-card {
  background: var(--bg2); border: 1px solid var(--bdr2);
  border-radius: var(--rc); padding: 36px 32px;
  max-width: 360px; width: 100%; text-align: center;
}
.idle-title {
  font-family: 'DM Serif Display', serif; font-size: 22px;
  font-weight: 400; color: var(--tx); margin-bottom: 10px;
}
.idle-msg  { font-size: 13px; color: var(--tx2); line-height: 1.65; margin-bottom: 24px; }
.idle-btn  { width: 100%; touch-action: manipulation; user-select: none; }

/* ── Custom confirm dialog ───────────────────────────────────── */
.confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.72);
  align-items: center; justify-content: center; padding: 24px;
}
.confirm-overlay.open { display: flex; }
.confirm-card {
  background: var(--bg2); border: 1px solid var(--bdr2);
  border-radius: var(--rc); padding: 32px;
  max-width: 360px; width: 100%; text-align: center;
}
.confirm-msg  { font-size: 15px; color: var(--tx); line-height: 1.6; margin-bottom: 24px; }
.confirm-btns { display: flex; gap: 10px; justify-content: center; }
.confirm-cancel-btn { flex: 1; }
.confirm-ok-btn     { flex: 1; background: var(--danger) !important; }

/* ── Photo editor canvas — scale on narrow screens ───────────── */
#mePhotoCanvas {
  max-width: 100%;
  touch-action: none; /* prevent scroll while dragging photo */
}
#mePhotoEditor { width: 100%; align-items: center; }

/* ── Edit member modal ───────────────────────────────────────── */
.flabel {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--tx2); margin-bottom: 6px;
}
.flabel-opt { font-weight: 400; opacity: .6; }

.me-photo-section { margin-bottom: 18px; }

.me-editor {
  display: none; flex-direction: column;
  align-items: center; gap: 10px; width: 100%;
}

.me-canvas {
  border-radius: var(--r); border: 1px solid var(--bdr2);
  width: 100%; max-width: 280px; aspect-ratio: 1/1;
  display: block; cursor: move; touch-action: none;
}

.me-controls { display: flex; gap: 8px; align-items: center; }

.me-zoom-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 280px;
}
.me-zoom-slider { flex: 1; accent-color: var(--ac); }
.me-zoom-icon   { font-size: 11px; color: var(--tx3); }

.me-mono {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--bg3); border: 2px solid var(--bdr2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif; font-size: 26px; color: var(--ac);
}

.me-change-photo-btn { cursor: pointer; display: inline-block; margin-top: 10px; }

.me-vis-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px; font-size: 13px; color: var(--tx2);
  cursor: pointer;
}
.me-vis-check { accent-color: var(--ac); width: 18px; height: 18px; flex-shrink: 0; }

.me-save-btn { width: 100%; }

@media (min-width: 420px) {
  .me-save-btn { width: auto; padding: 11px 26px; }
}