*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Scrollbar global */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

:root {
  --primary: #1a1a2e;
  --accent: #7c3aed;
  --accent-light: #ede9fe;
  --green: #059669;
  --green-light: #d1fae5;
  --red: #dc2626;
  --red-light: #fee2e2;
  --orange: #d97706;
  --orange-light: #fef3c7;
  --blue: #0891b2;
  --gray: #94a3b8;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --radius: 10px;
  --drawer-width: 280px;
  --topbar-height: 56px;
}

html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
.fullscreen { min-height: 100dvh; }

/* ── LOGIN ── */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, #1a1a2e 0%, #0f3460 100%);
}
.login-box {
  background: var(--card); border-radius: 16px;
  padding: 2rem 1.5rem; width: 100%; max-width: 360px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.login-logo { text-align: center; margin-bottom: 1.75rem; }
.login-img { width: 110px; height: 110px; object-fit: contain; margin-bottom: 0.75rem; }
.login-logo h1 { font-size: 1.5rem; font-weight: 900; color: var(--primary); letter-spacing: 3px; }
.login-logo p  { color: var(--accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; margin-top: 2px; }

/* ── FIELDS ── */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.8px; }
.field input, .field select {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; color: var(--text); outline: none; background: #fff;
  transition: border-color 0.2s; -webkit-appearance: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); }

/* ── BUTTONS ── */
.btn-primary {
  width: 100%; padding: 0.8rem; background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; margin-top: 0.25rem; transition: background 0.2s;
}
.btn-primary:active { background: #6d28d9; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
  background: var(--accent-light); color: var(--accent);
  border: none; padding: 0.6rem 1.1rem; border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-secondary:active { background: #ddd6fe; }

.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1.5px solid var(--border); padding: 0.55rem 1rem;
  border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.btn-ghost:active { background: var(--bg); }

.btn-sm {
  padding: 0.4rem 0.85rem; border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; cursor: pointer; border: none;
}
.btn-sm-accent  { background: var(--accent); color: #fff; }
.btn-sm-green   { background: var(--green-light); color: var(--green); }
.btn-sm-red     { background: var(--red-light); color: var(--red); }
.btn-sm-gray    { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

.icon-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; padding: 0.4rem; line-height: 1;
  color: inherit; border-radius: 6px; transition: background 0.15s;
}
.icon-btn:active { background: rgba(255,255,255,0.15); }

/* ── VAN SCHEDULE ── */
.van-info-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center; margin-bottom: 1rem;
}
.van-info-field { display: flex; flex-direction: column; gap: 0.2rem; }
.van-info-field label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.van-info-field input {
  padding: 0.45rem 0.7rem; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: 0.9rem; width: 120px;
  outline: none; transition: border-color .2s;
}
.van-info-field input:focus { border-color: #16a34a; }
.van-save-btn {
  margin-top: 1.15rem; padding: 0.45rem 1rem;
  background: #16a34a; color: #fff; border: none;
  border-radius: var(--radius); font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.van-save-btn:hover { background: #15803d; }
.van-seat-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
  background: #fff;
}
.van-seat-row:last-child { border-bottom: none; }
.van-seat-num {
  font-size: 1rem; font-weight: 800; color: #15803d;
  min-width: 28px; flex-shrink: 0;
}
.van-seat-name { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.van-seat-prefix { color: var(--muted); font-size: 0.85rem; }
.van-seat-obs   { font-size: 0.8rem; color: var(--muted); font-style: italic; margin-left: 4px; }
.van-seat-member-block { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.van-seat-guest { font-size: 0.82rem; color: #15803d; font-weight: 600; }
.van-seat-select { flex: 1; padding: 0.35rem 0.5rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; outline: none; }
.van-seat-select:focus { border-color: #16a34a; }
.van-obs-input {
  width: 120px; padding: 0.3rem 0.5rem; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: 0.8rem; outline: none;
}
.van-obs-input:focus { border-color: #16a34a; }
.van-pago-badge {
  font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.55rem;
  border-radius: 10px; border: none; flex-shrink: 0; white-space: nowrap;
}
button.van-pago-badge { cursor: pointer; }
span.van-pago-badge   { cursor: default; }
.van-pago-sim  { background: #dcfce7; color: #15803d; }
.van-pago-nao  { background: #fee2e2; color: #dc2626; }
.van-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.van-toolbar button { padding: 0.45rem 0.9rem; border: none; border-radius: var(--radius); font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.van-seats-card { background: #fff; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; margin-top: 0.75rem; }
.van-counter { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.5rem; }
.van-counter strong { color: #15803d; }

/* ── ABAS DE MEMBROS ── */
.member-tab {
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: #fff;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.member-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── SININHO ── */
.bell-btn {
  position: relative; background: none; border: none; cursor: pointer;
  font-size: 1.2rem; padding: 0.4rem 0.5rem; line-height: 1;
  color: inherit; border-radius: 8px; transition: background 0.15s;
  margin-left: 0.25rem;
}
.bell-btn:hover { background: rgba(255,255,255,0.15); }
.bell-badge {
  position: absolute; top: 2px; right: 2px;
  background: #ef4444; color: #fff;
  font-size: 0.6rem; font-weight: 900;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

/* ── INTENÇÕES ── */
.int-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 0.6rem; }
.int-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.int-name { font-weight: 800; font-size: 0.95rem; color: var(--text); flex: 1; }
.int-status { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.int-status.pendente  { background: #fef3c7; color: #92400e; }
.int-status.aprovado  { background: #dcfce7; color: #15803d; }
.int-status.rejeitado { background: #fee2e2; color: #b91c1c; }
.int-detail { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.6rem; }
.int-actions { display: flex; gap: 0.5rem; }
.btn-aprovar  { background: #16a34a; color: #fff; border: none; padding: 0.35rem 0.9rem; border-radius: 7px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.btn-rejeitar { background: #dc2626; color: #fff; border: none; padding: 0.35rem 0.9rem; border-radius: 7px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }

.error { color: var(--red); font-size: 0.82rem; margin-top: 0.5rem; text-align: center; }

/* ── DRAWER ── */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.drawer-open .drawer-overlay { opacity: 1; pointer-events: all; }

.side-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--drawer-width);
  background: var(--primary); color: #fff; z-index: 300;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 4px 0 24px rgba(0,0,0,0.3);
}
.drawer-open .side-drawer { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.drawer-brand { display: flex; align-items: center; gap: 0.65rem; }
.drawer-logo  { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.08); padding: 2px; }
.drawer-brand strong { display: block; font-size: 0.88rem; font-weight: 900; letter-spacing: 1.5px; }
.drawer-brand small  { display: block; font-size: 0.68rem; opacity: 0.55; margin-top: 1px; }

.drawer-user {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; flex-shrink: 0;
}
.drawer-username { font-size: 0.88rem; font-weight: 700; }
.drawer-role-badge {
  display: inline-block; margin-top: 2px;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.65);
}

.drawer-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0; }

.nav-section-label {
  font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: rgba(255,255,255,0.3);
  padding: 0.75rem 1rem 0.25rem;
}
.nav-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 1rem; width: 100%;
  background: none; border: none; color: rgba(255,255,255,0.72);
  font-size: 0.88rem; font-weight: 500; cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-item:active, .nav-item.active { background: rgba(124,58,237,0.3); color: #fff; }
.nav-item.active { border-left: 3px solid var(--accent); }
.nav-icon { font-size: 1rem; width: 20px; text-align: center; }
.nav-sub  { padding-left: 2.5rem; font-size: 0.83rem; }
.nav-item-danger { color: #fca5a5; }

.drawer-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 0.5rem 0; }

/* ── TOPBAR ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height);
  background: var(--primary); display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0.75rem; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25); color: #fff;
}
.topbar-title { flex: 1; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; gap: 0.25rem; align-items: center; }

/* ── PAGE ── */
.page-content {
  margin-top: var(--topbar-height);
  min-height: calc(100dvh - var(--topbar-height));
  padding: 1rem;
  max-width: 720px; margin-left: auto; margin-right: auto;
}

/* ── DASHBOARD ── */
.page-title   { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin-bottom: 0.2rem; }
.page-subtitle{ font-size: 0.8rem; color: var(--muted); margin-bottom: 1.25rem; }

.menu-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.menu-card {
  background: var(--card); border-radius: var(--radius);
  padding: 1.1rem; border: 1.5px solid var(--border);
  cursor: pointer; transition: box-shadow 0.2s, border-color 0.15s;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.menu-card:active { box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: var(--accent); }
.menu-card.full-width { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1rem; }
.menu-card-icon { font-size: 1.6rem; }
.menu-card h3  { font-size: 0.9rem; font-weight: 700; }
.menu-card p   { font-size: 0.75rem; color: var(--muted); }

/* ── SECTION HEADER ── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem; gap: 0.5rem;
}
.section-header h2 { font-size: 1rem; font-weight: 800; color: var(--primary); }

/* ── MONTH PICKER ── */
.month-picker {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.month-picker select {
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 0.9rem; color: var(--text); background: var(--card);
  -webkit-appearance: none; cursor: pointer;
}

/* ── EXPORT MENU ── */
.export-menu { position: relative; }
.export-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 190px; z-index: 50; overflow: hidden;
}
.export-dropdown button {
  display: block; width: 100%; padding: 0.7rem 1rem;
  background: none; border: none; text-align: left;
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.export-dropdown button:last-child { border-bottom: none; }
.export-dropdown button:hover { background: var(--bg); }

/* ── DAY CARDS ── */
.days-list { display: flex; flex-direction: column; gap: 0.6rem; }

.day-card { background: var(--card); border-radius: var(--radius); border: 1.5px solid var(--border); overflow: hidden; }

.day-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.85rem; cursor: pointer;
}
.day-card-header.wednesday { background: #1a1a2e; color: #fff; }
.day-card-header.sunday    { background: var(--green); color: #fff; }
.day-card-header.external  { background: var(--orange); color: #fff; }
.day-card-header.closed    { background: var(--gray); color: #fff; }
.day-card-header.holiday   { background: var(--red); color: #fff; }

.day-header-left  { display: flex; flex-direction: column; gap: 1px; }
.day-date         { font-weight: 800; font-size: 0.92rem; }
.day-weekday      { font-size: 0.7rem; opacity: 0.8; }
.day-header-right { display: flex; align-items: center; gap: 0.5rem; }
.day-edit-btn {
  background: rgba(255,255,255,0.18); border: none; color: #fff;
  padding: 0.25rem 0.65rem; border-radius: 6px;
  font-size: 0.72rem; cursor: pointer; font-weight: 700;
}
.day-wpp-btn {
  background: #25d366; border: none; color: #fff;
  padding: 0.25rem 0.65rem; border-radius: 6px;
  font-size: 0.72rem; cursor: pointer; font-weight: 700;
  margin-right: 0.35rem;
}
.day-wpp-btn:hover { background: #1ebe5d; }

/* WhatsApp modal */
.wpp-modal-body { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.75rem; }
.wpp-shift-block { display: flex; flex-direction: column; gap: 0.5rem; }
.wpp-shift-label { font-size: 0.82rem; font-weight: 800; color: var(--primary); }
.wpp-textarea {
  width: 100%; min-height: 220px; resize: vertical;
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 0.75rem; font-size: 0.82rem; line-height: 1.5;
  font-family: inherit; color: var(--text); background: var(--surface);
  white-space: pre-wrap;
}
.wpp-actions { display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap; }
.btn-wpp-copy {
  background: #25d366; color: #fff; border: none;
  padding: 0.45rem 1.1rem; border-radius: 8px;
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.btn-wpp-copy:hover { background: #1ebe5d; }
.btn-wpp-open {
  display: inline-flex; align-items: center;
  background: #128c7e; color: #fff; text-decoration: none;
  padding: 0.45rem 1.1rem; border-radius: 8px;
  font-size: 0.82rem; font-weight: 700;
}
.btn-wpp-open:hover { background: #0e7268; }

.day-card-body { padding: 0.7rem 0.85rem; }

/* dias anteriores — opacidade reduzida */
.day-card-past { opacity: 0.55; }

/* seção recolhível de dias passados */
.past-days-section { margin-top: 0.25rem; }
.past-days-section .past-days-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }

.past-days-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.85rem;
  background: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.82rem; font-weight: 700; color: var(--muted);
  list-style: none;
  user-select: none;
}
.past-days-toggle::-webkit-details-marker { display: none; }
.past-days-toggle::after { content: '▶'; font-size: 0.7rem; transition: transform .2s; }
details[open] > .past-days-toggle::after { transform: rotate(90deg); }

.past-days-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--muted); color: #fff;
  border-radius: 999px; font-size: 0.72rem; font-weight: 800;
  width: 1.4rem; height: 1.4rem;
}

.shift-row     { margin-bottom: 0.6rem; }
.shift-row:last-child { margin-bottom: 0; }
.shift-label   { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 4px; }
.member-chips  { display: flex; flex-wrap: wrap; gap: 4px; }
.member-chip   { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff; }
.empty-chip    { font-size: 0.78rem; color: #cbd5e1; font-style: italic; }
.obs-row       { margin-top: 0.4rem; }
.obs-tag       { display: inline-block; background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; }
.day-note-badge { display: inline-block; background: #ede9fe; color: #5b21b6; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 0.4rem; }

.external-banner { color: var(--orange); font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0; }
.closed-banner   { color: var(--muted);  font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0; }

/* ── MEMBER LIST ── */
.member-list { display: flex; flex-direction: column; gap: 0.5rem; }
.member-row {
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
  transition: opacity 0.2s;
}
.member-row.inactive { opacity: 0.55; }
.member-color-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.member-info  { flex: 1; min-width: 0; }
.member-name  { font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.member-role-badge { font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #ede9fe; color: #5b21b6; white-space: nowrap; }
.member-phone { font-size: 0.74rem; color: var(--muted); }
.member-deactivated { font-size: 0.68rem; color: var(--red); margin-top: 1px; }
.member-meta { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

.member-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }

/* ── Dashboard stats ─────────────────────────────────────────────────────── */
.dash-stats { margin-top: 0.5rem; }
.dash-stats-date { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.35rem; font-weight: 600; }
.dash-stats .randy-counter { margin-bottom: 0; padding: 0.5rem 0.75rem; }
.dash-recepcao-shifts { display: flex; flex-direction: column; gap: 0.2rem; }
.dash-recepcao-shift { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.82rem; }
.dash-recepcao-period { font-weight: 700; color: var(--accent); min-width: 52px; flex-shrink: 0; }
.dash-recepcao-names { color: var(--text); }

/* ── Escala de Randy ─────────────────────────────────────────────────────── */
.randy-counter {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-bottom: 1rem; padding: 0.75rem 1rem;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius);
}
.randy-total { font-size: 0.9rem; font-weight: 800; color: var(--text); margin-right: 0.25rem; }
.randy-total.complete { color: #16a34a; }
.randy-badge { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.randy-group { margin-bottom: 0.75rem; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.randy-group-hdr { color: #fff; font-size: 0.78rem; font-weight: 900; letter-spacing: 1.2px; padding: 6px 14px; }
.randy-group-rows { padding: 4px 0; }
.rpos-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem;
  padding: 7px 14px; border-bottom: 1px solid rgba(0,0,0,.06);
}
.rpos-row:last-child { border-bottom: none; }
.rpos-num   { font-size: 0.8rem; font-weight: 900; color: var(--muted); width: 22px; flex-shrink: 0; }
.rpos-label { font-size: 0.85rem; font-weight: 700; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpos-bottom { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding-left: 30px; flex-wrap: wrap; }
.rpos-role  { font-size: 0.72rem; color: var(--muted); font-style: italic; flex-shrink: 0; }
.rpos-member { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.rpos-pill { font-size: 0.8rem; font-weight: 900; color: #fff; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.rpos-select { padding: 4px 8px; font-size: 0.82rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); flex: 1; min-width: 0; max-width: 220px; }
.btn-sm-red { background: #fee2e2; color: #dc2626; border: none; border-radius: 6px; padding: 3px 7px; font-size: 0.8rem; cursor: pointer; }
.btn-sm-red:hover { background: #fecaca; }

/* Falange searchable combobox */
.fcombo { position: relative; width: 100%; }
.fcombo-input {
  width: 100%; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; background: var(--surface);
  color: var(--text); outline: none;
}
.fcombo-input:focus { border-color: var(--primary); }
.fcombo-list {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 200;
  background: var(--surface); border: 1.5px solid var(--primary);
  border-radius: var(--radius); max-height: 200px; overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.fcombo-opt {
  padding: 0.55rem 0.9rem; font-size: 0.92rem; cursor: pointer;
  background: #fff; color: #1e293b;
  transition: background 0.1s;
}
.fcombo-opt:hover, .fcombo-opt.selected { background: var(--primary-light, #ede9fe); color: var(--primary); font-weight: 600; }
.fcombo-list.hidden { display: none; }

input[type="color"] {
  width: 32px; height: 32px; border: 2px solid var(--border);
  border-radius: 8px; cursor: pointer; padding: 2px; background: none;
}

/* ── MEMBER SEARCH ── */
.search-bar {
  display: flex; gap: 0.5rem; align-items: center;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
}
.search-bar input {
  flex: 1; border: none; outline: none; font-size: 0.9rem;
  color: var(--text); background: transparent;
}
.search-bar-icon { color: var(--muted); font-size: 0.9rem; }

/* ── ADD MEMBER CARD ── */
.add-member-card {
  background: var(--card); border: 1.5px dashed var(--border);
  border-radius: var(--radius); padding: 1rem;
  margin-bottom: 0.85rem;
}
.add-member-card.open { border-style: solid; border-color: var(--accent); }
.add-member-toggle {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer;
  font-size: 0.88rem; font-weight: 700; color: var(--accent); padding: 0;
}
.add-member-form { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.65rem; }
.add-member-row  { display: flex; gap: 0.5rem; align-items: flex-end; }
.add-member-row .field { flex: 1; margin: 0; }
.color-pick-row  { display: flex; align-items: center; gap: 0.65rem; }
.color-preview   { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }

/* ── TOGGLE SWITCH ── */
.toggle-wrap { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.toggle { position: relative; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #cbd5e1;
  border-radius: 22px; transition: background 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  top: 3px; left: 3px; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--green); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ── BADGE ── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.badge-master { background: var(--primary); color: #fff; }
.badge-editor { background: var(--accent-light); color: var(--accent); }
.badge-viewer { background: #f1f5f9; color: var(--muted); }

/* ── MODAL BOTTOM SHEET ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 500; display: flex; align-items: flex-end;
}
.modal-sheet {
  background: var(--card); border-radius: 16px 16px 0 0;
  width: 100%; max-height: 92dvh; overflow-y: auto;
  padding: 0 1rem 2rem; animation: slideUp 0.28s ease;
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-handle { width: 36px; height: 4px; border-radius: 2px; background: #cbd5e1; margin: 0.75rem auto 0.5rem; }
.modal-title  { font-size: 1rem; font-weight: 800; color: var(--primary); margin-bottom: 1rem; padding-top: 0.25rem; }

.modal-section { margin-bottom: 1.25rem; }
.modal-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 0.5rem; }

.status-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.status-pill  { padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; }
.status-pill.active { border-color: var(--primary); }
.pill-normal   { background: #e0f2fe; color: #0369a1; }
.pill-external { background: var(--orange-light); color: #92400e; }
.pill-closed   { background: #f1f5f9; color: var(--muted); }
.pill-holiday  { background: var(--red-light); color: var(--red); }

.shift-block { background: #f8fafc; border-radius: var(--radius); padding: 0.85rem; margin-bottom: 0.75rem; }
.shift-block-title { font-size: 0.78rem; font-weight: 800; color: var(--primary); margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; }

.member-select-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.member-select-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--card); transition: all 0.15s;
}
.member-select-item.selected { border-color: var(--accent); background: var(--accent-light); }
.member-select-check { font-size: 0.85rem; width: 16px; text-align: center; color: var(--accent); }
.member-select-name  { font-size: 0.88rem; font-weight: 600; flex: 1; }

.obs-list { display: flex; flex-direction: column; gap: 0.4rem; }
.obs-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-radius: 8px; cursor: pointer; border: 1.5px solid var(--border); background: var(--card); font-size: 0.85rem; transition: all 0.15s; }
.obs-item.selected { border-color: var(--orange); background: var(--orange-light); }

.text-input { width: 100%; padding: 0.65rem 0.85rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; color: var(--text); outline: none; background: var(--card); }
.text-input:focus { border-color: var(--accent); }

.modal-save-btn { width: 100%; padding: 0.85rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 0.95rem; font-weight: 800; cursor: pointer; margin-top: 0.5rem; }
.modal-save-btn:active { background: #6d28d9; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: #fff; padding: 0.6rem 1.2rem;
  border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  z-index: 9999; white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  animation: fadeInOut 2.8s forwards;
}
@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── FORM CARD ── */
.form-card { background: var(--card); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 1rem; margin-bottom: 1rem; }
.form-row   { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.form-row .field { flex: 1; min-width: 140px; margin-bottom: 0; }

/* ── WHATSAPP MSG ── */
.wapp-box {
  background: #dcfce7; border: 1.5px solid #86efac;
  border-radius: var(--radius); padding: 0.85rem;
  font-size: 0.82rem; white-space: pre-wrap; word-break: break-word;
  color: #14532d; max-height: 260px; overflow-y: auto;
  font-family: monospace;
}

/* ── USERS ── */
.user-row { cursor: pointer; position: relative; transition: background .12s; }
.user-row:hover { background: var(--bg); }
.user-inactive { opacity: 0.55; }
.user-edit-icon { font-size: 0.85rem; margin-left: auto; flex-shrink: 0; }
/* Permission matrix */
.perm-matrix-wrap { overflow-x: auto; }
.perm-matrix { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
.perm-matrix th { padding: 0.6rem 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1.5px solid var(--border); background: var(--bg); }
.perm-matrix td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.perm-matrix tr:last-child td { border-bottom: none; }
.perm-matrix tr:hover td { background: var(--bg); }
.perm-cell { display: inline-flex; align-items: center; gap: 0.25rem; padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.perm-cell-edit { background: var(--green-light); color: #065f46; }
.perm-cell-view { background: #dbeafe; color: #1e40af; }
.perm-cell-none { color: var(--muted); }

/* Permission toggles (3-state) */
.perm-toggles { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.perm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.perm-toggle-label { font-size: 0.88rem; color: var(--text); flex: 1; }
.perm-toggle {
  min-width: 110px; text-align: center; padding: 0.45rem 0.75rem;
  border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--bg); color: var(--muted); font-size: 0.82rem;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.perm-toggle:hover:not(:disabled) { border-color: var(--accent); }
.perm-toggle-view { background: #dbeafe; border-color: #93c5fd; color: #1e40af; font-weight: 600; }
.perm-toggle-edit { background: var(--green-light); border-color: #6ee7b7; color: #065f46; font-weight: 600; }
.perm-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.perm-hint-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; padding: 0.5rem 0.6rem; background: var(--bg); border-radius: var(--radius); }
.perm-hint-chip { padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; }
.perm-hint-none { background: var(--border); color: var(--muted); }
.perm-hint-view { background: #dbeafe; color: #1e40af; }
.perm-hint-edit { background: var(--green-light); color: #065f46; }
.field-hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }
.info-box { background: var(--accent-light); border: 1.5px solid #c4b5fd; border-radius: var(--radius); padding: 0.6rem 0.85rem; font-size: 0.83rem; color: #4c1d95; margin-bottom: 1rem; }

/* ── PUBLIC LINKS ── */
.pub-month-nav { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.pub-nav-btn   { padding: 0.35rem 0.85rem; font-size: 1.1rem; }
.pub-month-label { font-size: 1rem; font-weight: 700; color: var(--text); flex: 1; text-align: center; }
.pub-cards { display: flex; flex-direction: column; gap: 1rem; }
.pub-card {
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--border); padding: 1rem;
}
.pub-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.pub-card-icon   { font-size: 1.3rem; }
.pub-card-title  { font-size: 1rem; font-weight: 700; color: var(--text); }
.pub-url-row { display: flex; align-items: center; gap: 0.5rem; background: var(--bg); border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
.pub-url { font-size: 0.75rem; color: var(--muted); font-family: monospace; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-copy-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; padding: 0.1rem; border-radius: 6px; transition: background .12s; }
.pub-copy-btn:hover { background: var(--border); }
.pub-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.btn-wapp {
  background: #25d366; color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.45rem; text-decoration: none; font-weight: 600;
  padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(37,211,102,0.35);
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-wapp:hover { background: #1ebe5d; box-shadow: 0 4px 12px rgba(37,211,102,0.45); }
.btn-wapp svg { flex-shrink: 0; }
.pub-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.pub-qr-img { border-radius: 10px; border: 1.5px solid var(--border); }
.pub-qr-label { font-size: 0.78rem; color: var(--muted); }
.pub-wapp-preview { background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:1rem; font-size:0.9rem; line-height:1.7; color:var(--text); word-break:break-word; }
.pub-wapp-link { color:#0891b2; text-decoration:underline; word-break:break-all; }
/* ── Botões do card ── */
.pub-btn-main { width:100%; margin-bottom:0.5rem; min-height:44px; font-size:0.95rem; }
.pub-btns-secondary { display:flex; gap:0.5rem; margin-bottom:0.75rem; }
.pub-btn-half { flex:1; min-height:40px; justify-content:center; }

/* ── Opções colapsíveis ── */
.pub-options-toggle { width:100%; background:none; border:1.5px solid var(--border); border-radius:8px; padding:0.45rem 0.75rem; font-size:0.84rem; color:var(--muted); cursor:pointer; text-align:left; display:flex; justify-content:space-between; align-items:center; margin-bottom:0; transition:border-color 0.15s, color 0.15s; }
.pub-options-toggle:hover { border-color:var(--accent); color:var(--accent); }
.pub-chevron { font-size:0.75rem; }
.pub-options-body { max-height:0; overflow:hidden; transition:max-height 0.25s ease, padding 0.2s; padding:0 0.25rem; }
.pub-options-body.pub-options-open { max-height:200px; padding:0.6rem 0.25rem 0.1rem; }

/* ── Info row (data) ── */
.pub-info-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem; }
.pub-info-label { font-size:0.82rem; color:var(--muted); white-space:nowrap; }
.pub-date-badge { font-size:0.88rem; font-weight:600; color:var(--text); background:var(--bg); border:1.5px solid var(--border); border-radius:6px; padding:0.2rem 0.55rem; }
.pub-date-loading { color:var(--muted); font-weight:400; animation:pulse 1.2s infinite; }
.pub-date-missing { color:var(--orange); font-weight:400; border-color:var(--orange-light); background:var(--orange-light); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }

/* ── Cor do fundo ── */
.pub-color-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.4rem; flex-wrap:wrap; }
.pub-color-swatches { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pub-swatch { width:26px; height:26px; border-radius:50%; border:2.5px solid transparent; cursor:pointer; flex-shrink:0; transition:border-color 0.15s, transform 0.1s; }
.pub-swatch:hover { transform:scale(1.18); }
.pub-swatch-active { border-color:#fff; outline:2px solid var(--accent); }
.pub-swatch-custom { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--bg); border:1.5px solid var(--border); cursor:pointer; font-size:13px; }
.pub-swatch-custom input[type=color] { opacity:0; position:absolute; width:0; height:0; }

/* ── QR URL ── */
.pub-qr-url { font-size:0.7rem; color:var(--muted); word-break:break-all; text-align:center; margin-top:0.3rem; padding:0 0.5rem; }
.inscricao-qr-block { text-align:center; margin:0.75rem 0 0.5rem; }
.inscricao-qr-img { width:190px; height:190px; border:1.5px solid var(--border); border-radius:12px; padding:8px; background:#fff; display:block; margin:0 auto; }
.pub-event-date-row { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.5rem; }
.pub-event-date-label { font-size:0.82rem; color:var(--muted); white-space:nowrap; }
.pub-event-date-input { border:1.5px solid var(--border); border-radius:7px; padding:0.32rem 0.6rem; font-size:0.88rem; color:var(--text); background:var(--bg); outline:none; }
.pub-event-date-input:focus { border-color:var(--accent); }
.pub-qr-download { font-size: 0.78rem; color: var(--accent); text-decoration: none; }
.pub-qr-download:hover { text-decoration: underline; }
@media (min-width: 640px) {
  .pub-cards { flex-direction: row; }
  .pub-card  { flex: 1; }
}

/* ── TEMPLATES ── */
.tabs-row { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tpl-tab {
  padding: 0.45rem 1rem; border-radius: 99px;
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 0.85rem; cursor: pointer; color: var(--text);
  transition: all .15s;
}
.tpl-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tpl-body { }
.tpl-section { display: flex; flex-direction: column; gap: 1rem; }
.tpl-hint {
  background: var(--accent-light); border-radius: var(--radius);
  border: 1.5px solid #c4b5fd; padding: 0.75rem 1rem; font-size: 0.82rem; color: #4c1d95;
}
.tpl-vars { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.tpl-var-chip {
  background: #fff; border: 1.5px solid #a78bfa; border-radius: 6px;
  padding: 0.15rem 0.5rem; font-size: 0.78rem; font-family: monospace; color: #5b21b6;
}
.tpl-emoji-row {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 0.75rem 1rem;
}
.tpl-emoji-label { font-size: 0.78rem; color: var(--muted); display: block; margin-bottom: 0.5rem; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.emoji-btn {
  width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--bg); font-size: 1.1rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background .12s;
}
.emoji-btn:hover { background: var(--accent-light); border-color: var(--accent); }
.tpl-field { display: flex; flex-direction: column; gap: 0.3rem; }
.tpl-field-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tpl-textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.75rem; font-size: 0.9rem; font-family: inherit;
  background: var(--card); color: var(--text); resize: vertical;
  transition: border-color .15s;
}
.tpl-textarea:focus { outline: none; border-color: var(--accent); }
.tpl-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.5rem; }

/* ── DASHBOARD CARD HEADER ── */
.dash-card-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.dash-card-header h3 { margin: 0; }
.dash-mestre-badge { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dash-mestre-badge-ok { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.dash-mestre-badge-missing { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }

/* ── DASHBOARD MESTRE (legado) ── */
.dash-mestre { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin: 2px 0 4px; }
.dash-mestre-missing { color: #dc2626; font-weight: 700; }

/* ── MESTRE SELECT ── */
.van-info-select {
  padding: 0.42rem 0.65rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  min-width: 160px;
}
.van-info-select:focus { border-color: var(--accent); }

/* ── BOTÃO AJUDA (?) ── */
.phelp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--primary); background: transparent;
  color: var(--primary); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; flex-shrink: 0; line-height: 1;
}
.phelp-btn:hover { background: var(--primary); color: #fff; }

/* ── DESKTOP ── */
@media (min-width: 768px) {
  .side-drawer { transform: translateX(0); box-shadow: none; border-right: 1px solid rgba(255,255,255,0.08); }
  .drawer-overlay { display: none !important; }
  #menu-btn { display: none; }
  .topbar { left: var(--drawer-width); }
  .page-content { margin-left: var(--drawer-width); margin-top: var(--topbar-height); }
  .menu-cards { grid-template-columns: repeat(3, 1fr); }
  .modal-overlay { align-items: center; }
  .modal-sheet { max-width: 520px; margin: auto; border-radius: 16px; max-height: 88dvh; }
}