/* ==========================================================
   CBAI Ministry - Admin dashboard design enhancement
   Add AFTER the existing CBAI Ministry stylesheet.
   Only uses existing class names; no markup changes needed.
   ========================================================== */

/* ---------- Sidebar ---------- */
.side .brand img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.side .churchbox {
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
.side .churchbox .cav {
  background: var(--gold); color: #fff; font-weight: 800;
  box-shadow: 0 0 0 3px rgba(201,138,43,.25);
}
.side .navg .lbl { letter-spacing: .14em; opacity: .7; }
.side .nb {
  position: relative; border-radius: 10px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.side .nb:hover { background: rgba(255,255,255,.06); }
.side .nb:hover svg { color: var(--gold); }
.side .nb[aria-current="page"] {
  background: rgba(201,138,43,.16) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(201,138,43,.35);
}
.side .nb[aria-current="page"]::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--gold);
}
.side .nb[aria-current="page"] svg { color: var(--gold); }

/* ---------- Top bar ---------- */
.main .topbar {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.topbar .btn {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 2px 8px rgba(27,42,58,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.topbar .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(27,42,58,.22); }

/* ---------- Page header (hero) ---------- */
.content > .ph {
  position: relative; overflow: hidden;
  padding: 28px 32px; margin-bottom: 22px;
  border-radius: 18px;
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(201,138,43,.28), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(27,42,58,.18);
  align-items: center;
}
.content > .ph::after {           /* soft decorative ring */
  content: ""; position: absolute; right: -60px; bottom: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 36px solid rgba(255,255,255,.04); pointer-events: none;
}
.content > .ph .eyebrow { color: #F0C27A; }
.content > .ph h1 { color: #fff; }
.content > .ph .desc { color: rgba(255,255,255,.78); max-width: 620px; }
.content > .ph .right .btn {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
.content > .ph .right .btn:hover { background: rgba(255,255,255,.18); }

/* ---------- KPI cards ---------- */
.kpis { gap: 14px; }
.kpi {
  --accent: var(--gold); --accent-soft: var(--gold-soft);
  position: relative; overflow: hidden; text-align: left;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding-top: 20px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
}
.kpi::before {                    /* colored top strip */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent);
}
.kpi::after {                     /* status dot */
  content: ""; position: absolute; top: 18px; right: 16px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft);
}
@media (hover: hover) { .kpi:hover {
  transform: translateY(-3px);
  border-color: var(--accent) !important;
  box-shadow: 0 12px 28px rgba(22,32,43,.10);
} }
.kpi small { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.kpi b { font-family: var(--display); font-size: 38px; line-height: 1.1; color: var(--accent); }
.kpi span { color: var(--ink-3); }
.kpis .kpi:nth-child(1) { --accent: var(--gold);  --accent-soft: var(--gold-soft); }
.kpis .kpi:nth-child(2) { --accent: var(--ok);    --accent-soft: var(--ok-soft); }
.kpis .kpi:nth-child(3) { --accent: var(--info);  --accent-soft: var(--info-soft); }
.kpis .kpi:nth-child(4) { --accent: var(--bad);   --accent-soft: var(--bad-soft); }
.kpis .kpi:nth-child(5) { --accent: var(--warn);  --accent-soft: var(--warn-soft); }

/* ---------- Section headings ---------- */
.content .sec-h { margin-top: 30px; }
.content .sec-h h2 { display: flex; align-items: center; gap: 10px; }
.content .sec-h h2::before {
  content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--gold);
}

/* ---------- Empty-state panels ---------- */
.panel.pad.muted {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-3);
  border: 1.5px dashed var(--line-2) !important;
  border-radius: 14px; box-shadow: none;
  padding: 22px 24px !important;
  color: var(--ink-3);
}
.panel.pad.muted::before {
  content: ""; flex: 0 0 38px; height: 38px; border-radius: 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23C98A2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow: 0 0 0 1px var(--line);
}

/* ---------- Two-column lower area on wide screens (dashboard only) ---------- */
@media (min-width: 1100px) {
  .content:has(> .kpis) {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
  }
  .content:has(> .kpis) > * { grid-column: 1 / -1; }
  .content:has(> .kpis) > :nth-child(5) { grid-column: 1; grid-row: 5; }
  .content:has(> .kpis) > :nth-child(6) { grid-column: 1; grid-row: 6; }
  .content:has(> .kpis) > :nth-child(7) { grid-column: 2; grid-row: 5; }
  .content:has(> .kpis) > :nth-child(8) { grid-column: 2; grid-row: 6; }
  .content:has(> .kpis) > .panel { align-self: start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .content > .ph { padding: 22px 20px; border-radius: 14px; }
  .kpi b { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .kpi, .side .nb, .topbar .btn { transition: none; }
  .kpi:hover, .topbar .btn:hover { transform: none; }
}

/* ==========================================================
   MOBILE POLISH (admin + church portal) - phones & small tablets
   ========================================================== */
@media (max-width: 760px) {
  /* Safe areas + no sideways scroll */
  html, body { overflow-x: hidden; }
  .main .content { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .bnav { padding-bottom: env(safe-area-inset-bottom); }

  /* Stop iOS zooming into form fields */
  .inp, input, select, textarea { font-size: 16px !important; }

  /* Long emails / links never push the layout wider */
  .content a, .content p, .content span, .content b, .panel, .reqcard, td {
    overflow-wrap: break-word; min-width: 0;
  }
  .content a[href^="mailto"], .content a[href^="http"] { overflow-wrap: anywhere; }

  /* Page header: tighter so content shows sooner */
  .content > .ph {
    padding: 20px 18px !important; margin-bottom: 16px !important;
    border-radius: 16px; flex-direction: column; align-items: stretch; gap: 14px;
  }
  .content > .ph h1 { font-size: 26px; line-height: 1.2; }
  .content > .ph .desc { font-size: 14.5px; line-height: 1.5; margin-top: 6px; }
  .content > .ph .right, .content > .ph .right > * { width: 100%; }
  .content > .ph .right .btn { justify-content: center; min-height: 46px; }
  .content > .ph::after { width: 180px; height: 180px; border-width: 26px; right: -70px; bottom: -70px; }

  /* KPI cards: compact 2-up grid instead of one tall card per row */
  .kpis { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin-top: 0; }
  .kpis .kpi { padding: 16px 14px 14px !important; min-height: 0; border-radius: 14px !important; }
  .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi small { font-size: 10.5px; letter-spacing: .06em; padding-right: 18px; line-height: 1.3; }
  .kpi b { font-size: 30px; margin: 4px 0 2px; }
  .kpi span { font-size: 12.5px; line-height: 1.35; }
  .kpi::after { top: 15px; right: 12px; width: 8px; height: 8px; box-shadow: 0 0 0 4px var(--accent-soft); }

  /* Section titles */
  .content .sec-h { margin-top: 24px; margin-bottom: 10px; }
  .content .sec-h h2 { font-size: 19px; }

  /* Empty states */
  .panel.pad.muted { padding: 16px !important; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
  .panel.pad.muted::before { flex-basis: 34px; height: 34px; }

  /* Filter chips: one swipeable row instead of 3-4 wrapped rows */
  .chips {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto;
    gap: 8px; padding: 2px 0 10px; margin-right: -16px; padding-right: 16px;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips > * { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

  /* Tabs (week page etc.): swipeable, never cut off */
  .ptabs, .tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
  }
  .ptabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .ptabs > *, .tabs > * { flex: 0 0 auto; white-space: nowrap; }

  /* Tables -> clean labelled cards */
  .tablewrap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
  .tablewrap table.t, .tablewrap tbody { display: block; width: 100%; }
  .tablewrap tr.th { display: none !important; }
  .tablewrap tr:not(.th) {
    display: grid !important; grid-template-columns: 1fr; gap: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow);
  }
  .tablewrap td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; font-size: 14.5px; }
  .tablewrap td:empty, .tablewrap td[data-label][data-empty]:not(:first-child) { display: none !important; }
  .tablewrap td:first-child { font-size: 17px; font-weight: 700; padding-bottom: 8px !important; border-bottom: 1px solid var(--line) !important; margin-bottom: 2px; }
  .tablewrap td[data-label]:not(:first-child):not(:last-child) {
    position: relative; padding-left: 104px !important; min-height: 32px;
  }
  .tablewrap td[data-label]:not(:first-child):not(:last-child)::before {
    content: attr(data-label); position: absolute; left: 0; top: 2px; width: 94px;
    font-size: 11.5px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .05em; line-height: 1.3;
  }
  .tablewrap td:last-child { margin-top: 6px; }
  .tablewrap .acts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; width: 100%; }
  .tablewrap .acts .btn { width: 100%; justify-content: center; }

  /* Sign-up request cards */
  .reqcard .acts, .acard .acts { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .reqcard .acts .btn, .acard .acts .btn { width: 100%; justify-content: center; }

  /* Content groups on the week page (Adults, Youth, Small Groups...) */
  .agroup > header {
    display: grid !important; grid-template-columns: auto 1fr auto; align-items: center;
    column-gap: 10px; row-gap: 2px;
  }
  .agroup > header .aic { grid-row: 1 / span 2; }
  .agroup > header > b { grid-column: 2; line-height: 1.25; }
  .agroup > header > .muted { grid-column: 2; grid-row: 2; font-size: 12.5px; }
  .agroup > header > .btn { grid-column: 3; grid-row: 1 / span 2; white-space: nowrap; margin: 0 !important; }
  .agroup .irow { display: grid !important; grid-template-columns: auto 1fr auto auto; gap: 10px 10px; align-items: center; }
  .agroup .irow > .tic { grid-column: 1; grid-row: 1; }
  .agroup .irow > .tt { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
  .agroup .irow > .pill { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .agroup .irow > .btn:not(.ghost) { grid-column: 3; grid-row: 2; }
  .agroup .irow > .btn.ghost { grid-column: 4; grid-row: 2; }

  /* Week page status dropdown full width */
  .content > .ph .right select.inp { width: 100%; min-height: 46px; }

  /* Comfortable tap targets */
  .btn, .btn.sm { min-height: 42px; }
  .btn.sm.ghost { min-width: 42px; }

  /* Two-column grids collapse */
  .bgrid, .fgrid, .agrid { grid-template-columns: 1fr !important; }
  .frow { flex-wrap: wrap; }
  .frow > * { flex: 1 1 100%; min-width: 0; }

  /* Media & embeds never overflow */
  .content img, .content video { max-width: 100%; height: auto; }
  .content iframe, .embedwrap { max-width: 100%; }
  .cal-wrap, .tablewrap { -webkit-overflow-scrolling: touch; }

  /* Modals / sheets: full width, scrollable, buttons stay reachable */
  .modal, .sheet { max-height: 100dvh; }
}

@media (max-width: 380px) {
  .kpi b { font-size: 26px; }
  .content > .ph h1 { font-size: 23px; }
  .tablewrap td[data-label]:not(:first-child):not(:last-child) { padding-left: 0 !important; padding-top: 18px !important; }
}

/* ==========================================================
   CHURCH PORTAL ON PHONES - softer, app-like, easy to read
   (only applies to church accounts, not admin)
   ========================================================== */
@media (max-width: 760px) {
  html.m360x-church body { background: linear-gradient(180deg, #F6F1E8 0%, #F3F4F6 420px) fixed; }
  html.m360x-church .main .content { padding-left: 14px; padding-right: 14px; }

  /* Calmer cards: no hard outlines, soft shadow, rounder */
  html.m360x-church .content .panel,
  html.m360x-church .content .acard,
  html.m360x-church .content .item {
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(22,32,43,.04), 0 8px 24px rgba(22,32,43,.07) !important;
  }
  html.m360x-church .content .sec-h { margin: 26px 2px 12px; }
  html.m360x-church .content .sec-h h2 { font-size: 21px; }
  html.m360x-church .content .sec-h .muted { font-size: 14px; }

  /* "Your next step" - a bright call-to-action card */
  html.m360x-church .todo {
    background: linear-gradient(135deg, #C98A2B 0%, #E0A84C 100%) !important;
    color: #fff !important; border: 0 !important; border-radius: 22px !important;
    padding: 20px !important; box-shadow: 0 12px 28px rgba(201,138,43,.32) !important;
    display: grid !important; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  }
  html.m360x-church .todo * { color: inherit; }
  html.m360x-church .todo .tx small { opacity: .9; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
  html.m360x-church .todo .tx b, html.m360x-church .todo .tx h2, html.m360x-church .todo .tx h3 { font-size: 20px; line-height: 1.25; }
  html.m360x-church .todo .btn { grid-column: 1 / -1; width: 100%; min-height: 54px; font-size: 18px;
    background: #fff !important; color: #8A5A12 !important; border: 0 !important; justify-content: center; border-radius: 14px; }
  html.m360x-church .todo svg circle { stroke: rgba(255,255,255,.35); }
  html.m360x-church .todo.done { background: linear-gradient(135deg, #2E7D51 0%, #4BA371 100%) !important; box-shadow: 0 12px 28px rgba(46,125,81,.28) !important; }

  /* Sermon card - picture first */
  html.m360x-church .panel.hero { display: block !important; padding: 0 !important; overflow: hidden; }
  html.m360x-church .panel.hero .thumb {
    position: relative; width: 100% !important; aspect-ratio: 16 / 9; height: auto !important;
    border-radius: 0 !important; margin: 0 !important; background: #1B2A3A; overflow: hidden;
  }
  html.m360x-church .panel.hero .thumb .live {
    position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,.55); color: #fff;
    border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  }
  html.m360x-church .panel.hero > div:not(.thumb) { padding: 18px 18px 20px; }
  html.m360x-church .panel.hero h2 { font-size: 22px; line-height: 1.25; margin: 6px 0 8px; }
  html.m360x-church .panel.hero .meta { display: flex; flex-wrap: wrap; gap: 6px; }
  html.m360x-church .panel.hero .meta span { background: var(--surface-2, #F1EEE8); border-radius: 999px; padding: 5px 11px; font-size: 13.5px; }
  html.m360x-church .panel.hero .bigq { font-size: 17px; line-height: 1.5; border-left: 4px solid #C98A2B; padding-left: 12px; margin: 14px 0; font-style: italic; }
  html.m360x-church .panel.hero .acts { display: grid !important; grid-template-columns: 1fr; gap: 10px; }
  html.m360x-church .panel.hero .acts .btn { width: 100%; justify-content: center; min-height: 50px; font-size: 16.5px; }

  /* Progress steps - a swipeable timeline instead of a stacked list */
  html.m360x-church .panel.steps {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto; gap: 0 !important; padding: 18px 8px 16px !important; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  html.m360x-church .panel.steps::-webkit-scrollbar { display: none; }
  html.m360x-church .panel.steps .step {
    position: relative; flex: 0 0 116px; display: flex !important; flex-direction: column !important;
    align-items: center; text-align: center; gap: 8px; padding: 0 6px !important; border: 0 !important;
    scroll-snap-align: start; background: none !important;
  }
  html.m360x-church .panel.steps .step::before {
    content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px;
    background: var(--line, #E4E1DA); z-index: 0;
  }
  html.m360x-church .panel.steps .step:first-child::before { display: none; }
  html.m360x-church .panel.steps .step.done::before, html.m360x-church .panel.steps .step.now::before { background: #2E7D51; }
  html.m360x-church .panel.steps .step .dot {
    position: relative; z-index: 1; width: 38px !important; height: 38px !important; border-radius: 50% !important;
    display: grid !important; place-items: center; font-weight: 800; font-size: 15px;
    background: #fff; border: 3px solid var(--line-2, #D6D1C6); color: var(--ink-3, #6B7480); margin: 0 !important;
  }
  html.m360x-church .panel.steps .step.done .dot { background: #2E7D51; border-color: #2E7D51; color: #fff; }
  html.m360x-church .panel.steps .step.now .dot { background: #C98A2B; border-color: #F7EBD5; color: #fff; box-shadow: 0 0 0 5px rgba(201,138,43,.18); }
  html.m360x-church .panel.steps .step b { font-size: 13.5px; line-height: 1.25; display: block; }
  html.m360x-church .panel.steps .step span:not(.dot) { font-size: 12px; color: var(--ink-3, #6B7480); display: block; margin-top: 2px; }

  /* Content by group - colourful tiles, two per row */
  html.m360x-church .agrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  html.m360x-church .acard {
    --t: #C98A2B; --ts: #F7EBD5;
    position: relative; overflow: hidden; text-align: left; padding: 16px 14px 14px !important;
    background: linear-gradient(160deg, var(--ts) 0%, #fff 70%) !important; min-height: 150px;
    display: flex !important; flex-direction: column; gap: 10px;
  }
  html.m360x-church .acard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--t); }
  html.m360x-church .agrid .acard:nth-child(7n+1) { --t: #C98A2B; --ts: #F7EBD5; }
  html.m360x-church .agrid .acard:nth-child(7n+2) { --t: #2F6FB3; --ts: #E1ECF5; }
  html.m360x-church .agrid .acard:nth-child(7n+3) { --t: #2E7D51; --ts: #E1F2E7; }
  html.m360x-church .agrid .acard:nth-child(7n+4) { --t: #B4432F; --ts: #FBE4DF; }
  html.m360x-church .agrid .acard:nth-child(7n+5) { --t: #6B4FA0; --ts: #ECE6F6; }
  html.m360x-church .agrid .acard:nth-child(7n+6) { --t: #0F7C80; --ts: #DDF1F1; }
  html.m360x-church .agrid .acard:nth-child(7n+7) { --t: #946000; --ts: #FCEFD2; }
  html.m360x-church .acard .top { display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px; }
  html.m360x-church .acard .top > :first-child {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: #fff; color: var(--t); box-shadow: 0 4px 12px rgba(22,32,43,.08);
  }
  html.m360x-church .acard .top b { font-size: 17px; line-height: 1.2; }
  html.m360x-church .acard .top .sm { font-size: 13px; color: var(--ink-3, #6B7480); }
  html.m360x-church .acard .bar { height: 8px !important; border-radius: 99px !important; background: rgba(22,32,43,.08) !important; overflow: hidden; margin-top: auto; }
  html.m360x-church .acard .bar i { background: var(--t) !important; border-radius: 99px; display: block; height: 100%; }
  html.m360x-church .acard .row { display: block !important; font-size: 13px; line-height: 1.35; font-weight: 700; color: var(--ink-2, #4A5563); }
  html.m360x-church .acard .row .go { display: none; }
  html.m360x-church .agrid .acard:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }

  /* This week's calendar - swipe through the days */
  html.m360x-church .cal-wrap { overflow-x: auto; margin: 0 -14px; padding: 0 14px 6px; scrollbar-width: none; }
  html.m360x-church .cal-wrap::-webkit-scrollbar { display: none; }
  html.m360x-church .cal { display: flex !important; gap: 10px; width: max-content; grid-template-columns: none !important; }
  html.m360x-church .cal .cday {
    flex: 0 0 150px; min-height: 150px; background: #fff; border: 0 !important; border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(22,32,43,.07); padding: 12px !important;
  }
  html.m360x-church .cal .cday.today, html.m360x-church .cal .cday.now { background: #1B2A3A; color: #fff; }
  html.m360x-church .cal .cday.today *, html.m360x-church .cal .cday.now * { color: inherit; }
  html.m360x-church .cal .ev { border-radius: 10px !important; font-size: 13px; padding: 6px 8px !important; margin-top: 6px; }

  /* Content items (review screens) */
  html.m360x-church .item { overflow: hidden; position: relative; padding: 16px !important; }
  html.m360x-church .item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #C98A2B; }
  html.m360x-church .item:has(.pill.approved)::before { background: #2E7D51; }
  html.m360x-church .item:has(.pill.changes)::before { background: #B4432F; }
  html.m360x-church .item .ih { gap: 12px; }
  html.m360x-church .item .tt b { font-size: 17px; }
  html.m360x-church .item .gbtns { display: grid !important; grid-template-columns: 1fr; gap: 10px; }
  html.m360x-church .item .gbtns .btn { width: 100%; min-height: 54px; font-size: 17px; justify-content: center; }

  /* Welcome screen (before the first sermon) */
  html.m360x-church .welcome { display: block !important; padding: 22px 18px !important; }
  html.m360x-church .welcome .wart { display: none; }
  html.m360x-church .welcome .btn { width: 100%; justify-content: center; min-height: 56px; font-size: 17.5px; }
  html.m360x-church .bgrid .box { padding: 18px !important; }
  html.m360x-church .bgrid .box .bic { width: 46px; height: 46px; border-radius: 14px; }

  /* Bigger, friendlier bottom bar */
  html.m360x-church .bnav { box-shadow: 0 -6px 20px rgba(22,32,43,.08); }
  html.m360x-church .bnav button, html.m360x-church .bnav a { font-size: 12.5px; }
}

/* ---------- Mobile spacing + small fixes (v1.1.2) ---------- */
@media (max-width: 760px) {
  .main .content { row-gap: 16px !important; }
  .main .content > .ph { margin-bottom: 0 !important; }
  .main .content > .m360-hero, .main .content > .m360-cards { margin-bottom: 0 !important; }
  .main .content > .sec-h { margin-top: 10px !important; margin-bottom: -4px !important; }
  .content > .ph .right select, .content > .ph .right .inp { width: 100% !important; max-width: none !important; }
  .m360-cards { gap: 12px !important; }
  .ptabs { border-bottom: 1px solid var(--line, #E4E1DA); }
  .ptabs > * { min-height: 46px; font-size: 15.5px; }
}

/* ---------- Church home on phones: action first, swipeable verse cards (v1.2.0) ---------- */
@media (max-width: 760px) {
  html.m360x-church .main .content:has(> .m360-hero) > * { order: 5; }
  html.m360x-church .main .content:has(> .m360-hero) > .m360x-due { order: 0; }
  html.m360x-church .main .content:has(> .m360-hero) > .m360-hero { order: 1; }
  html.m360x-church .main .content:has(> .m360-hero) > .todo { order: 2; }
  html.m360x-church .main .content:has(> .m360-hero) > .panel.hero { order: 3; }
  html.m360x-church .main .content:has(> .m360-hero) > .m360-cards { order: 4; }
  html.m360x-church .m360-hero-in { min-height: 250px !important; }
  html.m360x-church .m360-cards { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin: 0 -14px !important; padding: 2px 14px 8px; scrollbar-width: none; }
  html.m360x-church .m360-cards::-webkit-scrollbar { display: none; }
  html.m360x-church .m360-card { flex: 0 0 84%; scroll-snap-align: center; min-height: 190px !important; }
  html.m360x-church .todo { grid-template-columns: auto 1fr !important; align-items: center; }
  html.m360x-church .todo .ring { grid-column: 1; width: 76px; height: 76px; }
  html.m360x-church .todo .tx { grid-column: 2; min-width: 0; }
  html.m360x-church .todo .tx b { display: block; font-size: 20px !important; line-height: 1.25; }
  html.m360x-church .todo .tx span { display: block; font-size: 15px; line-height: 1.45; opacity: .95; margin-top: 4px; }
  html.m360x-church .todo > div:last-child { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  html.m360x-church .todo > div:last-child .btn { width: 100%; min-height: 54px; font-size: 17px !important; white-space: nowrap; }
  html.m360x-church .todo.done > div:last-child .btn + .btn { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.7) !important; }
}

/* Fit content to full page width (remove 1180px cap) */
.content { max-width: none !important; }


/* ==========================================================
   CBAI brand layer (matches carbonbasedai.com) — Night sky, violet, gold.
   Recolors only the default theme; a church's chosen color theme
   (Colors & text size) still wins. Delete from here to the end to undo.
   ========================================================== */
:root{
  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cb-violet:#6A47FF; --cb-violet-2:#8A6BFF; --cb-lav:#CDBAFF; --cb-night:#09081A; --cb-halo:#F2B544;
  --cb-grad:linear-gradient(135deg,#8A6BFF 0%,#6A47FF 100%);
}
:root:not([data-accent]){
  --bg:#F6F5FB; --surface:#FFFFFF; --surface-2:#F0EEF8; --surface-3:#FAF9FD; --line:#E4E1F0; --line-2:#CDC7E2;
  --ink:#1B1834; --ink-2:#3F3A5E; --ink-3:#5A5578;
  --navy:#09081A; --navy-2:#1A1640; --navy-mute:#B6ADDD;
  --gold:#D4962E; --gold-2:#F2B544; --gold-ink:#7A4F0E; --gold-soft:#FBF0D8;
  --info:#5536E6; --info-soft:#EEEAFF;
  --topbar:rgba(246,245,251,.9);
  --shadow:0 1px 2px rgba(27,24,52,.05),0 8px 24px -12px rgba(27,24,52,.14);
  --shadow-lg:0 24px 60px -24px rgba(27,24,52,.3);
}
@media (prefers-color-scheme: dark){:root:not([data-accent]):not([data-theme="light"]){
  --bg:#09081A; --surface:#13112E; --surface-2:#1B1840; --surface-3:#161334; --line:rgba(205,186,255,.13); --line-2:rgba(205,186,255,.24);
  --ink:#F4F2FF; --ink-2:#CFCAE8; --ink-3:#A39CC8;
  --navy:#06051A; --navy-2:#161236; --navy-mute:#A39CC8;
  --gold:#F2B544; --gold-2:#FFD27A; --gold-ink:#FFD27A; --gold-soft:rgba(242,181,68,.14);
  --info:#B9A8FF; --info-soft:rgba(138,107,255,.16);
  --topbar:rgba(9,8,26,.88);
}}
:root:not([data-accent])[data-theme="dark"]{
  --bg:#09081A; --surface:#13112E; --surface-2:#1B1840; --surface-3:#161334; --line:rgba(205,186,255,.13); --line-2:rgba(205,186,255,.24);
  --ink:#F4F2FF; --ink-2:#CFCAE8; --ink-3:#A39CC8;
  --navy:#06051A; --navy-2:#161236; --navy-mute:#A39CC8;
  --gold:#F2B544; --gold-2:#FFD27A; --gold-ink:#FFD27A; --gold-soft:rgba(242,181,68,.14);
  --info:#B9A8FF; --info-soft:rgba(138,107,255,.16); --topbar:rgba(9,8,26,.88);
}

/* Type: Sora for headings & controls, Source Sans 3 for reading (same as the homepage) */
body{font-family:var(--body);letter-spacing:.003em}
h1,h2,h3,h4,.eyebrow,.lbl,.btn,button.primary,.kpi,.sec-h{font-family:var(--display)}
h1,h2{letter-spacing:-.02em}
.eyebrow{letter-spacing:.16em!important;font-weight:600!important}

/* Sidebar: night sky like the homepage hero */
:root:not([data-accent]) .side{
  background:
    radial-gradient(140% 45% at 0% 0%,rgba(106,71,255,.32) 0%,transparent 62%),
    radial-gradient(100% 35% at 100% 100%,rgba(242,181,68,.09) 0%,transparent 60%),
    var(--cb-night)!important;
  border-right:1px solid rgba(205,186,255,.1);
}
.side .brand{font-family:var(--display)}
.side .navg .lbl{font-family:var(--display);font-weight:600;letter-spacing:.16em}
.side .nb{font-family:var(--display);font-weight:500;font-size:15px;border-radius:12px}
.side .churchbox{border-radius:16px}
:root:not([data-accent]) .side .churchbox{background:rgba(205,186,255,.06);border-color:rgba(205,186,255,.12)}
:root:not([data-accent]) .side .churchbox .cav{background:var(--cb-grad);box-shadow:0 0 0 3px rgba(138,107,255,.25)}
:root:not([data-accent]) .side .nb:hover{background:rgba(205,186,255,.08)}
:root:not([data-accent]) .side .nb:hover svg{color:var(--cb-lav)}
:root:not([data-accent]) .side .nb[aria-current="page"]{background:var(--cb-grad)!important;color:#fff!important;box-shadow:0 12px 28px -14px rgba(124,92,255,.95),inset 0 1px 0 rgba(255,255,255,.22)}
:root:not([data-accent]) .side .nb[aria-current="page"] svg{color:#fff}
:root:not([data-accent]) .side .nb[aria-current="page"]::before{background:var(--cb-halo)}
.side [data-m360t] svg{width:20px;height:20px}

/* Buttons: pill shape + violet glow, as on carbonbasedai.com */
.btn,button.primary,.main-btn{border-radius:999px!important;font-weight:600}
:root:not([data-accent]) .topbar .btn,:root:not([data-accent]) .btn.primary,:root:not([data-accent]) button.primary{
  background:var(--cb-grad)!important;border-color:transparent!important;color:#fff!important;
  box-shadow:0 12px 30px -12px rgba(124,92,255,.85),inset 0 1px 0 rgba(255,255,255,.25)!important}
:root:not([data-accent]) .topbar .btn:hover,:root:not([data-accent]) .btn.primary:hover,:root:not([data-accent]) button.primary:hover{transform:translateY(-1px);box-shadow:0 16px 34px -12px rgba(124,92,255,.95),inset 0 1px 0 rgba(255,255,255,.25)!important}
.fsz{border-radius:999px!important}

/* Page hero: deep night with a violet nebula and a touch of gold */
:root:not([data-accent]) .content > .ph{
  background:
    radial-gradient(520px 240px at 100% 0%,rgba(242,181,68,.22),transparent 60%),
    radial-gradient(700px 300px at 0% 100%,rgba(106,71,255,.45),transparent 65%),
    linear-gradient(135deg,#120E33 0%,#09081A 100%)!important;
  border:1px solid rgba(205,186,255,.14);
  box-shadow:0 24px 60px -28px rgba(106,71,255,.8)!important;
}
:root:not([data-accent]) .content > .ph .eyebrow{color:var(--cb-lav)!important}
.content > .ph h1{font-weight:700}
:root:not([data-accent]) .content > .ph .btn{background:rgba(255,255,255,.08)!important;border:1px solid rgba(205,186,255,.3)!important;color:#fff!important;box-shadow:none!important}
:root:not([data-accent]) .content > .ph .btn:hover{background:rgba(255,255,255,.14)!important}

/* Cards, tiles & panels */
.kpi,.panel,.m360x-admtile{border-radius:20px!important}
:root:not([data-accent]) .kpi:hover,:root:not([data-accent]) .m360x-admtile:hover{border-color:#B9A8FF!important;box-shadow:0 18px 40px -24px rgba(106,71,255,.6)!important}
:root:not([data-accent]) .m360x-admtile .i{background:#EEEAFF;color:#5536E6}
:root:not([data-accent]) .m360x-admtile .go{color:#5536E6}
:focus-visible{outline-color:var(--gold-2)}

/* Mobile bottom bar */
:root:not([data-accent]) .bnav .main-btn .circ{background:var(--cb-grad)!important;box-shadow:0 12px 26px -10px rgba(124,92,255,.95)!important;color:#fff!important}