@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700&display=swap');

/* Canonical Nizam app stylesheet — single source: nizam/src/app/styles.ts (NIZAM_APP_CSS, also served as /app.css) */

:root{
  color-scheme: light;
  /* Nizam Foundation: typography */
  --font-sans:'Manrope','Segoe UI',system-ui,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --type-font-sans: var(--font-sans);
  --type-font-display: var(--font-display);
  --type-font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  /* Nizam Foundation: color — neutral-first, teal accent */
  --bg-base:#F8FBFC;
  --bg-muted:#F3F6F9;
  --bg-raised:#FFFFFF;
  --bg-overlay:#F6FAFB;
  --bg-hover:#EEF2F5;
  --surface:var(--bg-raised);
  --surface-2:var(--bg-muted);
  --surface-3:var(--bg-overlay);
  --glass:rgba(255,255,255,.92);
  --border:#E6EDF3;
  --border-strong:#D1DCE6;
  --border-muted:rgba(15,23,42,.08);
  --text:#0F172A;
  --text-muted:#64748B;
  --text-faint:#94A3B8;
  --accent:#2F9696;
  --accent-hover:#237E7E;
  --accent-dark:#1A6B6B;
  --accent-soft:#E7F6F5;
  --accent-gold:#D97706;
  --accent-gold-soft:#FFF7ED;
  --danger:#DC2626;
  --danger-soft:#FEF2F2;
  --success:#16A34A;
  --success-soft:#ECFDF5;
  --warning:#D97706;
  --warning-soft:#FFF7ED;
  --info:#2563EB;
  --info-soft:#EFF6FF;
  --pattern-ink:rgba(47,150,150,.04);
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  /* Marketing page aliases (match Nizam theme) */
  --mk-font-display: var(--font-display);
  --mk-ink: var(--text);
  --mk-muted: var(--text-muted);
  --mk-soft: var(--text-faint);
  --mk-primary: var(--accent);
  --mk-primary-strong: var(--accent-dark);
  --mk-card: var(--bg-raised);
  --mk-border: var(--border);
  --mk-border-strong: var(--border-strong);
  --mk-page-line: var(--border);
  /* Nizam Foundation: spacing (8px base), radius (cards 14–16px), shadow (minimal) */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-full:999px;
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-card:0 2px 8px rgba(15,23,42,.06);
  --shadow-modal:0 8px 24px rgba(15,23,42,.08);
  --shadow-soft:var(--shadow-card);
  --shadow-lift:var(--shadow-modal);
  --shadow:var(--shadow-card);
  --shadow-sm:var(--shadow-xs);
  /* Layout: flush sidebar + centered main */
  --sidebar-w:280px;
  --sidebar-w-collapsed:88px;
  --topbar-h:56px;
  --content-max:1200px;
  --main-padding:32px;
  /* Token aliases */
  --color-brand-primary: var(--accent);
  --color-brand-accent: var(--accent-soft);
  --color-bg-default: var(--bg-base);
  --color-bg-subtle: var(--bg-muted);
  --color-bg-elevated: var(--bg-raised);
  --color-bg-overlay: var(--bg-overlay);
  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-muted);
  --color-text-muted: var(--text-faint);
  --color-text-inverse: #fff;
  --color-border-default: var(--border);
  --color-border-muted: var(--border-strong);
  --color-divider: var(--border);
  --color-state-success: var(--success);
  --color-state-warning: var(--warning);
  --color-state-danger: var(--danger);
  --color-state-info: var(--info);
  --color-focus-ring: rgba(47,150,150,.25);
  --color-focus-ring-strong: rgba(47,150,150,.4);
  --type-size-xs:.75rem;
  --type-size-sm:.875rem;
  --type-size-md:1rem;
  --type-size-lg:1.125rem;
  --type-size-xl:1.25rem;
  --type-size-2xl:1.5rem;
  --type-size-hero:2rem;
  --type-size-display:2.75rem;
  --type-weight-regular:400;
  --type-weight-medium:500;
  --type-weight-semibold:600;
  --type-weight-bold:700;
  --type-line-tight:1.2;
  --type-line-normal:1.5;
  --type-line-relaxed:1.6;
  --type-letter-tight:-.02em;
  --type-letter-normal:0;
  --duration-80:80ms;
  --duration-120:120ms;
  --duration-180:180ms;
  --duration-240:240ms;
  --easing-standard: cubic-bezier(.2,.0,.0,1);
  --easing-decelerate: cubic-bezier(0,.0,.2,1);
  --easing-accelerate: cubic-bezier(.4,0,1,1);
}
[data-theme="dark"]{
  color-scheme: dark;
  --bg-base:#0b1220;
  --bg-muted:#0f172a;
  --bg-raised:#151f33;
  --bg-overlay:#0f1a2e;
  --bg-hover:#1a2840;
  --surface:var(--bg-raised);
  --surface-2:#0f1a2e;
  --surface-3:#0c162b;
  --glass:rgba(15,23,42,.85);
  --border:rgba(148,163,184,.18);
  --border-strong:rgba(148,163,184,.26);
  --border-muted:rgba(226,232,240,.10);
  --text:#e2e8f0;
  --text-muted:#94a3b8;
  --text-faint:#64748b;
  --accent:#2dd4bf;
  --accent-hover:#5eead4;
  --accent-dark:#14b8a6;
  --accent-soft:rgba(45,212,191,.18);
  --accent-gold:#f6c177;
  --accent-gold-soft:rgba(246,193,119,.14);
  --danger:#fb7185;
  --danger-soft:rgba(251,113,133,.15);
  --success:#34d399;
  --success-soft:rgba(52,211,153,.15);
  --warning:#fbbf24;
  --warning-soft:rgba(251,191,36,.14);
  --info:#60a5fa;
  --info-soft:rgba(96,165,250,.14);
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --shadow-soft:0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 16px 40px rgba(0,0,0,.55);
  --shadow-card:0 8px 24px rgba(0,0,0,.38);
  --bg-glow-1: rgba(45,212,191,.08);
  --bg-glow-2: rgba(96,165,250,.06);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:var(--font-sans);color:var(--text);background:var(--bg-base);line-height:1.55;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,select,input,textarea{font:inherit}
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px var(--color-focus-ring)}
kbd{font-size:.8rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg-overlay);color:var(--text-muted)}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--bg-raised);border:1px solid var(--border);border-radius:999px;padding:10px 14px;box-shadow:var(--shadow-sm);color:var(--text);z-index:999}
.skip-link:focus{left:12px}

/* Auth / login */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 18px}
.login-panel{width:min(520px,92vw);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);padding:28px 26px}
.login-panel .brand{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.login-panel .brand .mark{font-family:var(--font-display);font-size:2rem;color:var(--accent);letter-spacing:-.02em}
.login-panel p{margin:8px 0}
.stack{display:flex;flex-direction:column;gap:12px}
.field label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:6px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn-block{display:block;width:100%}
.divider-row{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text-faint);font-size:.85rem}
.divider-row:before,.divider-row:after{content:"";height:1px;flex:1;background:var(--border)}

.hidden{display:none!important}
.muted{color:var(--text-muted)}
.danger-text{color:var(--danger)}
.heading-1{font-family:var(--font-sans);font-size:1.5rem;letter-spacing:-.01em;line-height:1.25;margin:0 0 10px;font-weight:700}
.heading-2{font-family:var(--font-sans);font-size:1.25rem;letter-spacing:-.01em;line-height:1.3;margin:0 0 10px;font-weight:700}
.heading-3{font-family:var(--font-sans);font-size:1rem;margin:0 0 8px;font-weight:650}
.eyebrow{font-size:.75rem;color:var(--accent-gold);text-transform:uppercase;letter-spacing:.18em;margin:0 0 10px;font-weight:600}
.section-title{font-family:var(--font-sans);font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;color:var(--text)}
.section-title::after{content:"";display:block;width:40px;height:2px;border-radius:999px;margin-top:8px;background:var(--accent)}
.divider{height:1px;background:var(--border);margin:14px 0}
.panel{position:relative;overflow:hidden;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:18px}
.panel::after{content:"";display:none}
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px}
.hero-card{min-height:180px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:20px;position:relative}
.hero-card::before{content:"";display:none}
.hero-card > *{position:relative}
.hero-card h1{font-family:var(--font-display);font-size:2.35rem;letter-spacing:-.02em;line-height:1.12;margin:0 0 10px}
.hero-card h2{font-family:var(--font-display);font-size:1.7rem;letter-spacing:-.01em;line-height:1.18;margin:0 0 10px}
.hero-card p{margin:0;color:var(--text-muted)}
.hero-card p + p{margin-top:10px}
.hero-card .stack{gap:10px}
.notice{border:1px solid var(--border);background:rgba(37,99,235,.06);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-xs);color:var(--text);font-size:.85rem}
.notice.error{border-color:rgba(180,35,24,.35);background:rgba(180,35,24,.10);color:var(--danger)}
.notice.success{border-color:rgba(6,118,71,.28);background:rgba(6,118,71,.10);color:var(--success)}

/* Utilities (keep CSP style-src strict) */
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mt-24{margin-top:24px}
.mt-28{margin-top:28px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.p-16{padding:16px}
.p-32{padding:32px}
.pad-8-12{padding:8px 12px}
.fs-13{font-size:.8125rem}
.fs-14{font-size:.875rem}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.align-center{align-items:center}
.flex-1{flex:1}
.gap-6{gap:6px}
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-16{gap:16px}
.grid{display:grid}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.small{font-size:.8rem}
.w-auto{width:auto}
.overflow-auto{overflow:auto}
.py-8{padding:8px 0}
.py-12{padding:12px 0}
.my-0{margin:0}
.pl-20{padding-left:20px}
.border-b{border-bottom:1px solid var(--border)}
.fw-600{font-weight:600}
.pre-wrap{white-space:pre-wrap}
.input-compact{width:auto;padding:6px 10px}
.card-link{display:block;margin-bottom:12px;text-decoration:none;color:inherit}
.link-block{display:block;text-decoration:none;color:inherit}
.minw-260{min-width:260px}
.maxw-400{max-width:400px}
.label-block{display:block}
.label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:6px}
.row{display:flex;align-items:center;gap:8px}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg-muted),var(--bg-overlay),var(--bg-muted));background-size:200% 100%;border-radius:var(--radius-md);animation:shim 1.4s ease-in-out infinite}
.skeleton.h-16{height:16px}
.skeleton.h-28{height:28px}
.skeleton.w-60{width:60%}
.skeleton.w-70{width:70%}
.skeleton.w-90{width:90%}
.skeleton.mb-8{margin-bottom:8px}
.skeleton.mb-16{margin-bottom:16px}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

.app-shell{display:flex;flex-direction:column;min-height:100vh}
.app-topbar{height:var(--topbar-h);background:var(--bg-raised);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 16px;position:sticky;top:0;z-index:100;box-shadow:none}
.app-topbar-brand{font-family:var(--font-sans);font-size:1.05rem;text-decoration:none;color:var(--text);font-weight:800;letter-spacing:-.01em}
.app-topbar-search-trigger{flex:1;max-width:620px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--bg-overlay);border:1px solid var(--border);border-radius:12px;cursor:pointer;color:var(--text-faint);box-shadow:none}
.app-topbar-search-trigger:hover{background:var(--bg-hover);color:var(--text)}
.app-topbar-actions{display:flex;align-items:center;gap:8px}
.app-topbar-spacer{flex:1}
.topbar-ws-select{width:auto;max-width:180px;padding:6px 10px;margin:0}
#notif-badge{position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;line-height:1}
.topbar-user{font-size:.875rem;color:var(--text-muted);font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Topbar icon buttons */
.btn-icon{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;position:relative}
.btn-icon .icon{display:inline-flex;align-items:center;justify-content:center}
.btn-icon svg{display:block}

.app-body{display:flex;min-height:calc(100vh - var(--topbar-h))}
.app-sidebar{width:var(--sidebar-w);background:var(--bg-overlay);border-right:1px solid var(--border);padding:16px 12px;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow:auto;flex-shrink:0}
.app-sidebar-nav{display:flex;flex-direction:column;gap:2px}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:12px;text-decoration:none;color:var(--text-muted);font-size:.9rem;font-weight:650;border:1px solid transparent;position:relative;transition:background var(--duration-120) var(--easing-standard), color var(--duration-120) var(--easing-standard), border-color var(--duration-120) var(--easing-standard)}
.nav-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-faint);flex:0 0 auto}
.nav-link:hover .nav-icon{color:var(--text)}
.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-link:hover{background:var(--bg-hover);color:var(--text);border-color:var(--border)}
.nav-link.active{background:var(--bg-muted);color:var(--text);border-color:var(--border-strong)}
.nav-link.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:999px;background:var(--accent)}
.suite-switcher{margin:14px 8px 6px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--bg-raised);box-shadow:var(--shadow-xs)}
.suite-switcher .input{margin-top:6px}
.suite-links{display:grid;gap:6px;margin-top:10px}
.suite-link{display:block;padding:8px 10px;border:1px solid var(--border);border-radius:10px;color:var(--text-muted);text-decoration:none;background:var(--bg-overlay)}
.suite-link:hover{color:var(--text);border-color:var(--border-strong);text-decoration:none}
.app-sidebar-pages{margin-top:14px}
.app-sidebar-pages-title{font-size:.75rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;margin:10px 10px}
.sidebar-section{margin:0}
.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin:0 0 2px;color:var(--text-faint);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.sidebar-section-actions{display:flex;align-items:center;gap:6px}
.sidebar-action-btn{width:22px;height:22px;border-radius:8px}
.sidebar-action-btn.btn-icon{width:22px;height:22px}
.sidebar-action-btn{padding:0}
.sidebar-action-btn{line-height:1}
.sidebar-section-body{display:flex;flex-direction:column;gap:2px}
.sidebar-divider{height:1px;background:var(--border);margin:10px 10px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--accent-soft);border:1px solid rgba(15,118,110,.22);color:var(--text);font-size:.72rem;font-weight:700;line-height:1}
.tree-pad-8{padding-left:8px}
.tree-pad-20{padding-left:20px}
.tree-pad-24{padding-left:24px}
.indent-0{margin-left:0}
.indent-16{margin-left:16px}
.indent-32{margin-left:32px}
.indent-48{margin-left:48px}
.indent-64{margin-left:64px}
.page-tree-item{display:block;padding:4px 6px;border-radius:var(--radius-md);text-decoration:none;color:var(--text);flex:1}
.page-tree-item:hover{background:var(--bg-hover)}
.page-tree-item.active{background:var(--accent-soft)}
.page-tree-node{display:flex;flex-direction:column}
.page-tree-row{display:flex;align-items:center;gap:6px;padding:2px 6px;border-radius:var(--radius-md)}
.page-tree-row:hover{background:var(--bg-hover)}
.page-tree-toggle{width:18px;height:18px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.85rem}
.page-tree-toggle:disabled{opacity:.4;cursor:default}
.page-tree-action{margin-left:auto;opacity:0}
.page-tree-node:hover .page-tree-action{opacity:1}
.page-tree-children.hidden{display:none}

.app-main{flex:1;padding:var(--main-padding);min-width:0}
.app-main-inner{max-width:var(--content-max);margin:0 auto;width:100%}
.dashboard-hero{max-width:980px;margin:0 auto}
.tagline{font-size:1.05rem;line-height:1.8}

/* Global page wrapper (applied in client.js to every route) */
.page{display:flex;flex-direction:column;gap:20px}
.page > .heading-2{margin:0;font-size:1.35rem;line-height:1.3;letter-spacing:-.01em;font-weight:800;color:var(--text)}
.page > .heading-3{margin:0 0 6px;font-weight:750}
.page > section.panel{padding:18px}
.page .card{box-shadow:var(--shadow-card)}
.page .card .heading-2,.page .card .heading-3{margin-top:0}
.page .empty-state{margin:18px 0}

/* New shared layout classes */
/* Nizam Foundation: page header pattern — title + description + optional chips + actions right */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.page-title-wrap{min-width:0;flex:1}
.page-title{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.2;letter-spacing:var(--type-letter-tight);font-weight:700;color:var(--text)}
.page-description{font-size:var(--type-size-sm);color:var(--text-muted);margin:4px 0 0;line-height:1.5;max-width:56ch}
.page-header-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.page-header-actions{margin-left:auto;flex-shrink:0}
.needs-attention-panel{background:var(--bg-raised);border:1px solid var(--border);border-left:4px solid var(--warning);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:var(--space-4);margin-bottom:var(--space-6)}
.needs-attention-panel h3{font-size:var(--type-size-sm);font-weight:600;margin:0 0 10px;color:var(--text)}
.needs-attention-panel ul{margin:0;padding:0;list-style:none}
.needs-attention-panel li{margin:6px 0;font-size:var(--type-size-sm)}
.needs-attention-panel a{text-decoration:none}
.needs-attention-panel a:hover{text-decoration:underline}
.page-subtitle{margin-top:4px;color:var(--text-muted);font-size:.9rem}
.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-wide{max-width:var(--content-max);width:100%}
/* Chips: calm pastel backgrounds (status, assurances, filters) */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-full);font-size:var(--type-size-xs);font-weight:500;border:1px solid transparent}
.chip-default{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.chip-primary{background:var(--accent-soft);color:var(--accent-dark);border-color:rgba(47,150,150,.25)}
.chip-success{background:var(--success-soft);color:var(--success)}
.chip-warning{background:var(--warning-soft);color:var(--warning)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
.chip-info{background:var(--info-soft);color:var(--info)}
.chip-outline{background:transparent;color:var(--text-muted);border-color:var(--border)}

/* Access suite: Members & Roles — polished list cards */
.access-section{margin-top:var(--space-6)}
.access-section-head{font-size:var(--type-size-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4)}
.access-list{display:flex;flex-direction:column;gap:var(--space-3)}
.access-member-card,.access-role-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-5) var(--space-6);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:background var(--duration-120) var(--easing-standard),border-color var(--duration-120) var(--easing-standard),box-shadow var(--duration-120) var(--easing-standard)}
.access-member-card:hover,.access-role-card:hover{background:var(--bg-overlay);border-color:var(--border-strong);box-shadow:var(--shadow-card)}
.access-member-card .access-card-main,.access-role-card .access-card-main{flex:1;min-width:0}
.access-member-card .access-card-title,.access-role-card .access-card-title{font-weight:600;font-size:var(--type-size-lg);letter-spacing:var(--type-letter-tight);color:var(--text);margin:0}
.access-member-card .access-card-meta,.access-role-card .access-card-meta{font-size:var(--type-size-sm);color:var(--text-muted);margin-top:var(--space-1);line-height:1.4}
.access-member-card .access-card-chips,.access-role-card .access-card-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-3)}
.access-member-card .access-card-action,.access-role-card .access-card-action{flex-shrink:0}
.access-role-card.role-owner{border-left:4px solid var(--accent)}
.access-role-card.role-admin{border-left:4px solid var(--accent-soft);border-left-color:rgba(47,150,150,.5)}
.access-role-card.role-default{border-left:4px solid transparent}
.access-role-badge{font-size:var(--type-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:2px 8px;border-radius:var(--radius-xs);background:var(--surface-2)}
.access-view-only{font-size:var(--type-size-xs);color:var(--text-muted);padding:6px 12px;background:var(--surface-2);border-radius:var(--radius-sm);border:1px solid var(--border)}
.access-empty{text-align:center;padding:var(--space-12) var(--space-6);color:var(--text-muted);font-size:var(--type-size-sm);background:var(--bg-muted);border-radius:var(--radius-lg);border:1px dashed var(--border)}

.section{border:1px solid var(--border);border-radius:16px;background:var(--bg-raised);box-shadow:var(--shadow-card)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.section-title-sm{font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.section-actions{display:flex;gap:8px;align-items:center}
.section-body{padding:16px}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar .input{min-width:220px}
.toolbar .input.flex-1{min-width:280px}

.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width: 900px){
  .grid-cols-2{grid-template-columns:1fr}
  .grid-cols-7{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 600px){
  .grid-cols-7{grid-template-columns:1fr}
}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid .mb-12{margin:0}
.input-readonly{background:var(--bg-muted);border-color:var(--border);color:var(--text-muted)}
.inline-field{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text)}
.inline-field input{margin:0}
@media (max-width: 900px){
  .form-grid{grid-template-columns:1fr}
}
.dashboard-quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.quick-action-card{display:block;text-decoration:none;color:inherit;cursor:pointer;border:1px solid var(--border);border-radius:14px;background:var(--bg-raised);box-shadow:var(--shadow-card);padding:14px 14px;transition:transform .08s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}
.quick-action-card:hover{background:var(--bg-overlay);border-color:var(--border-strong);transform:translateY(-1px);text-decoration:none;box-shadow:var(--shadow-lift)}
.quick-action-card:active{transform:translateY(0)}
.quick-action-card h3{margin:0 0 6px;font-size:1rem;letter-spacing:-.01em}
.quick-action-card p{margin:0}
.suite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.suite-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--bg-raised);box-shadow:none;padding:18px;transition:background var(--duration-180) var(--easing-standard),border-color var(--duration-180) var(--easing-standard)}
.suite-card::before{content:"";display:none}
.suite-card:hover{background:var(--bg-overlay);border-color:var(--border-strong);transform:none;box-shadow:none}
.suite-card h3{margin:0 0 8px;font-size:1.2rem;letter-spacing:-.01em}
.suite-card .suite-meta{font-size:.86rem;color:var(--text-muted);margin-bottom:10px;line-height:1.5}
.home-hero{border:1px solid var(--border);border-radius:18px;background:var(--bg-raised);box-shadow:none;padding:18px;margin-bottom:16px}
.suite-page-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border:1px solid var(--border);border-radius:18px;background:var(--bg-raised);box-shadow:none;padding:18px}
.suite-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;min-width:300px}
.suite-stat{border:1px solid var(--border);border-radius:12px;background:var(--bg-raised);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.suite-stat strong{font-size:1.05rem}
.suite-stat span{font-size:.78rem;color:var(--text-muted)}
.suite-section{margin-top:16px}
.suite-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.suite-section-head h3{margin:0;font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.suite-section-head p{margin:0;color:var(--text-muted);font-size:.83rem}
.feature-suite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.feature-suite-card{border:1px solid var(--border);border-radius:14px;background:var(--bg-raised);box-shadow:var(--shadow-xs);padding:12px}
.feature-suite-title{font-weight:700;letter-spacing:-.01em}
.feature-suite-meta{font-size:.8rem;color:var(--text-muted);margin-top:4px;min-height:30px}
.suites-hero{position:relative;overflow:hidden;background:
  radial-gradient(900px circle at -10% -40%, rgba(37,99,235,.14), transparent 52%),
  radial-gradient(740px circle at 120% 20%, rgba(15,118,110,.12), transparent 56%),
  linear-gradient(130deg,var(--bg-raised),var(--bg-overlay))}
.suites-wing-stack{display:flex;flex-direction:column;gap:20px;margin-top:18px}
.suites-wing{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:
  radial-gradient(640px circle at 0% 0%, rgba(37,99,235,.09), transparent 55%),
  radial-gradient(520px circle at 100% 30%, rgba(15,118,110,.08), transparent 52%),
  linear-gradient(160deg,var(--bg-raised),var(--bg-overlay));box-shadow:var(--shadow-lift);padding:18px}
.suites-wing-header{padding:2px 2px 14px;border-bottom:1px solid var(--border)}
.suites-wing-kicker{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.suites-wing-header h2{margin:6px 0 6px;font-size:1.48rem;letter-spacing:-.02em}
.suites-wing-header p{margin:0;color:var(--text-muted);font-size:.9rem}
.suites-subwing{margin-top:14px}
.suites-subwing-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.suites-subwing-head h3{margin:0;font-size:.86rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-faint)}
.suite-catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.suite-catalog-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--bg-raised);box-shadow:none;padding:14px;display:flex;flex-direction:column;min-height:180px;transition:background var(--duration-180) var(--easing-standard),border-color var(--duration-180) var(--easing-standard)}
.suite-catalog-card::before{content:"";display:none}
.suite-catalog-card::after{content:"";display:none}
.suite-catalog-card.live{border-color:rgba(15,118,110,.35)}
.suite-catalog-card.soon{border-color:rgba(148,163,184,.38)}
.suite-catalog-card:hover{transform:none;box-shadow:none;background:var(--bg-overlay);border-color:var(--border-strong)}
.suite-catalog-card-head{display:flex;justify-content:flex-end}
.suite-catalog-status{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.suite-catalog-card.live .suite-catalog-status{background:rgba(6,118,71,.12);border:1px solid rgba(6,118,71,.28);color:var(--success)}
.suite-catalog-card.soon .suite-catalog-status{background:rgba(181,71,8,.12);border:1px solid rgba(181,71,8,.28);color:var(--warning)}
.suite-catalog-card h3{position:relative;margin:8px 0 8px;font-size:1.05rem;letter-spacing:-.01em;line-height:1.28}
.suite-catalog-card p{position:relative;margin:0;color:var(--text-muted);font-size:.86rem;line-height:1.52;flex:1}
.suite-catalog-actions{position:relative;margin-top:12px;display:flex;align-items:center;min-height:30px}
.suite-catalog-soon{font-size:.82rem;font-weight:700;color:var(--text-muted)}
@media (max-width: 900px){
  .suite-page-hero{flex-direction:column}
  .suite-hero-stats{width:100%;min-width:0}
  .suite-catalog-grid{grid-template-columns:1fr}
}
.workspace-picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.empty-state{max-width:720px;margin:48px auto;padding:24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-raised);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.empty-state::before{content:"";position:absolute;inset:-2px;pointer-events:none;opacity:.9;background:radial-gradient(circle at 1px 1px, var(--pattern-ink) 1px, transparent 0);background-size:22px 22px;mask-image:radial-gradient(circle at 20% 0%, #000 0%, transparent 70%)}
.empty-state > *{position:relative}
.empty-state h3{margin:0 0 8px;font-family:var(--font-sans);font-size:1.25rem;letter-spacing:-.01em}
.empty-state p{margin:0}
.page-editor{max-width:var(--content-max);width:100%;margin:0 auto}
.page-editor.fullwidth{max-width:100%}
.page-editor-shell{display:flex;align-items:flex-start;gap:24px}
.page-editor-shell .page-editor{flex:1;min-width:0}
.page-cover{width:100%;height:220px;border-radius:var(--radius-lg);background:var(--bg-muted);border:1px solid var(--border);box-shadow:var(--shadow-sm);background-size:cover;background-position:center;margin-bottom:14px;position:relative;overflow:hidden}
.page-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.page-cover .page-cover-actions{position:absolute;right:10px;bottom:10px;display:flex;gap:8px}
.page-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.page-header-actions{flex-wrap:wrap}
.page-title-row{display:flex;align-items:flex-end;gap:12px;min-width:0;flex:1}
.page-icon{width:44px;height:44px;border-radius:14px;border:1px solid var(--border);background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:var(--shadow-xs);flex:0 0 auto}
.page-icon.btn{padding:0}
.page-title-wrap{flex:1;min-width:0}
.page-editor-title{width:100%;font-family:var(--font-display);font-size:2.4rem;letter-spacing:-.02em;border:0;outline:none;background:transparent;color:var(--text);padding:8px 0;margin:2px 0 12px}
.page-editor-blocks{width:100%;margin-top:6px}
.page-editor-blocks{display:flex;flex-direction:column;gap:8px}
.page-comments-panel{width:320px;flex:0 0 320px;background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-xs);position:sticky;top:calc(var(--topbar-h) + 20px);max-height:calc(100vh - var(--topbar-h) - 40px);overflow:auto}
.page-comments-panel.hidden{display:none}
.page-comments-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.page-comments-controls{margin-top:12px}
.page-comments-list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.comment-item{padding:10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-muted)}
.comment-item.resolved{opacity:.7}
.page-comments-composer{margin-top:12px;border-top:1px solid var(--border);padding-top:12px}
#page-comments-btn.active{background:var(--bg-hover);color:var(--text)}
.comment-reply-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-muted);margin-bottom:8px;font-size:.85rem}
.comment-reply-banner.hidden{display:none}
.block{padding:6px 8px;border-radius:var(--radius-md);outline:none}
.block:focus{box-shadow:0 0 0 2px var(--color-focus-ring)}
.block-quote{border-left:3px solid var(--border-strong);padding-left:12px;color:var(--text)}
.block-callout{background:var(--bg-muted);border:1px solid var(--border);padding:10px 12px}
.block-code{background:var(--bg-muted);border:1px solid var(--border);padding:10px 12px;border-radius:var(--radius-md);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre;overflow:auto}
.block-divider{padding:10px 0}
.block-divider hr{border:0;border-top:1px solid var(--border);margin:0}
.block-heading_1{font-family:var(--font-display);font-size:1.75rem}
.block-heading_2{font-family:var(--font-display);font-size:1.35rem}
.block-heading_3{font-weight:700}
.block-asset{background:var(--bg-muted);border:1px dashed var(--border-strong);padding:10px 12px}

/* Lexical block editor */
.lex-blocks{display:flex;flex-direction:column;gap:10px;padding:6px 4px}
.lex-selection-bar{position:sticky;top:calc(var(--topbar-h) + 8px);z-index:140;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.lex-block-wrap{position:relative;border-radius:12px;padding:8px 10px;background:transparent;border:1px solid transparent;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}
.lex-block-wrap:hover{background:var(--bg-overlay);border-color:var(--border);box-shadow:var(--shadow-xs)}
[data-theme="dark"] .lex-block-wrap:hover{border-color:rgba(255,255,255,.04)}
.lex-block-wrap.is-selected{background:var(--accent-soft);border-color:rgba(15,118,110,.28)}
.lex-block-wrap.flash{border-color:var(--accent);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.lex-block-wrap.drop-target{border-color:var(--accent-gold);background:var(--accent-gold-soft)}
.lex-drag-handle{cursor:grab}
.lex-drag-handle:active{cursor:grabbing}
.lex-block-wrap[data-block-type="quote"]{border-left:3px solid var(--accent-gold);padding-left:14px}
.lex-block-wrap[data-block-type="callout"]{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.18)}
.lex-children{display:flex;flex-direction:column;gap:10px}
.lex-depth-0{margin-left:0}
.lex-depth-1{margin-left:16px}
.lex-depth-2{margin-left:32px}
.lex-depth-3{margin-left:48px}
.lex-depth-4{margin-left:64px}
.lex-depth-5{margin-left:80px}
.lex-depth-6{margin-left:96px}
.lex-toggle-caret{width:28px;height:28px}
.lex-block-toolbar{display:flex;gap:6px;align-items:center;margin:0 0 6px 0;opacity:0;pointer-events:none;transition:opacity .12s ease}
.lex-block-wrap:hover .lex-block-toolbar,
.lex-block-wrap.is-selected .lex-block-toolbar,
.lex-block-wrap:focus-within .lex-block-toolbar{opacity:1;pointer-events:auto}
.lex-type-select{width:160px;padding:6px 8px;border-radius:999px}
.lex-saving-dot{width:8px;height:8px;border-radius:999px;background:var(--accent);opacity:.55}
.lex-editor{min-height:28px;outline:none;padding:8px 10px;border-radius:10px;background:transparent;border:1px solid transparent;line-height:1.7}
.lex-editor:focus{background:var(--bg-overlay);border-color:rgba(37,99,235,.32);box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.lex-placeholder{color:var(--text-faint);padding:8px 10px}
.lex-h1{font-family:var(--font-display);font-size:1.75rem;letter-spacing:-.02em}
.lex-h2{font-family:var(--font-display);font-size:1.35rem}
.lex-h3{font-weight:700}
.lex-quote{border-left:3px solid var(--border-strong);padding-left:12px;color:var(--text)}
.lex-code{background:var(--bg-muted);border:1px solid var(--border);padding:10px 12px;border-radius:var(--radius-md);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre;overflow:auto}
.lex-ul,.lex-ol{padding-left:24px;margin:6px 0}
.lex-li{margin:4px 0}
.lex-link{color:var(--accent);text-decoration:underline}

/* Minimal menus (native <details>) */
.lex-menu{position:relative}
.lex-menu > summary{list-style:none}
.lex-menu > summary::-webkit-details-marker{display:none}
.lex-menu[open] > summary{background:var(--bg-hover)}
.lex-menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:var(--bg-overlay);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:6px;z-index:80}
.lex-menu-item{width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:0;background:transparent;cursor:pointer;color:var(--text);font-size:.9rem}
.lex-menu-item:hover{background:var(--bg-hover)}
.lex-menu-item:disabled{opacity:.45;cursor:not-allowed}
.lex-menu-item.danger{color:var(--danger)}
.lex-sync-badge{padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.7rem}
.lex-sync-badge.source{background:rgba(37,99,235,.12)}
.lex-divider{height:1px;background:var(--border);margin:8px 0}
.lex-media{display:flex;gap:12px;align-items:stretch;background:var(--bg-muted);border:1px dashed var(--border);border-radius:12px;padding:10px}
.lex-media-body{flex:1;min-width:0}
.lex-media-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.lex-media-img{max-width:100%;border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow-xs)}
.lex-media-placeholder{padding:12px;border:1px dashed var(--border);border-radius:10px}
.lex-media-file{padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--bg-overlay)}
.lex-media-file-name{font-weight:600;margin-bottom:4px}
.lex-embed{width:220px;min-height:120px}
.lex-embed-input{width:100%}
.lex-embed-preview iframe{width:100%;height:140px;border:0;border-radius:10px;box-shadow:var(--shadow-xs)}
.lex-slash-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:170}
.lex-slash-menu{background:var(--bg-raised);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);width:min(420px,90vw);padding:12px}
.lex-slash-input{width:100%;margin-bottom:8px}
.lex-slash-results{max-height:260px;overflow:auto}
.lex-slash-item{width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:0;background:transparent;cursor:pointer}
.lex-slash-item:hover{background:var(--bg-hover)}
.breadcrumb{font-size:.85rem;color:var(--text-muted);margin-bottom:12px}
.breadcrumb a{text-decoration:none;color:var(--text-muted)}
.breadcrumb a:hover{color:var(--text)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-card)}
.stat-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-card)}
.stat-value{font-size:24px;font-weight:700}
.stat-label{color:var(--text-muted);font-size:var(--type-size-xs);text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.ws-create-card{max-width:400px}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-raised);color:var(--text);box-shadow:none;transition:border-color var(--duration-120) var(--easing-standard), box-shadow var(--duration-120) var(--easing-standard), background var(--duration-120) var(--easing-standard)}
.input:focus{border-color:color-mix(in oklab,var(--accent) 40%, var(--border));box-shadow:0 0 0 3px var(--color-focus-ring);background:var(--bg-raised)}
.btn{border:1px solid var(--border);background:var(--bg-raised);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer;box-shadow:none;transition:background var(--duration-180) var(--easing-standard), border-color var(--duration-180) var(--easing-standard), color var(--duration-180) var(--easing-standard)}
.btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn:active{background:var(--bg-muted);transform:none}
.btn-primary{background:var(--accent);color:#fff;border-color:color-mix(in oklab,var(--accent) 55%, var(--border));box-shadow:none}
.btn-primary:hover{background:var(--accent-hover);border-color:color-mix(in oklab,var(--accent-hover) 55%, var(--border))}
.btn-secondary{background:var(--bg-raised);color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 30%, var(--border));box-shadow:none}
.btn-secondary:hover{background:var(--bg-overlay);border-color:color-mix(in oklab,var(--accent) 40%, var(--border))}
.btn-outline{background:transparent;color:var(--text);border:1px dashed var(--border-muted)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted);box-shadow:none}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text)}
.btn-ghost:active{background:var(--bg-muted);transform:none}
.btn-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.btn-sm{padding:6px 10px;font-size:.85rem}
.btn-xs{padding:4px 8px;font-size:.78rem}
.btn-block{display:block;width:100%}
.w-90{width:90px}
.w-120{width:120px}

/* Segmented controls (used for view tabs) */
.view-tabs{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--bg-overlay);overflow:hidden}
.view-tabs .btn{border:0;border-right:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none}
.view-tabs .btn:last-child{border-right:0}
.view-tabs .btn:hover{background:var(--bg-hover)}
.view-tabs .btn.active{background:var(--accent-soft);color:var(--accent);font-weight:700}

/* Links that behave like "cards" */
.card-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;text-decoration:none;color:inherit;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-raised);box-shadow:var(--shadow-card);transition:transform .08s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.card-link:hover{border-color:rgba(37,99,235,.28);transform:translateY(-1px);text-decoration:none;box-shadow:var(--shadow-lift)}
.link-block{display:block;text-decoration:none;color:inherit;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-raised);box-shadow:var(--shadow-card);transition:transform .08s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.link-block:hover{border-color:rgba(37,99,235,.28);transform:translateY(-1px);text-decoration:none;box-shadow:var(--shadow-lift)}

/* Data lists (used across routes: members, teamspaces, forms, approvals, backups, etc.) */
.list{border:1px solid var(--border);border-radius:14px;background:var(--bg-raised);box-shadow:none;overflow:hidden}
.list-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.list-row:last-child{border-bottom:0}
.list-row:hover{background:var(--bg-overlay);text-decoration:none}
.list-main{min-width:0;flex:1}
.list-side{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.list-row .mono{font-family:var(--type-font-mono);font-size:.9rem}

.mono{font-family:var(--type-font-mono)}
.input-sm{width:auto;padding:8px 10px;border-radius:12px;font-size:.85rem}

.db-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:12px}
.db-table thead{position:sticky;top:0;background:var(--bg-raised);z-index:2}
.db-table th,.db-table td{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;font-size:.875rem;white-space:nowrap}
.db-table th{color:var(--text-muted);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.db-table-wrap{max-height:560px;overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--bg-raised);box-shadow:none}

/* Workspace hub */
.workspace-shell{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px}
.workspace-hero{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--bg-raised);box-shadow:none}
.workspace-hero h2{margin:0 0 8px;font-size:1.55rem;letter-spacing:-.02em}
.workspace-hero p{margin:0;color:var(--text-muted)}
.workspace-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.workspace-badge{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-overlay);font-size:.78rem;color:var(--text-muted)}
.workspace-aside{display:flex;flex-direction:column;gap:12px}
.workspace-kpi{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-raised);box-shadow:var(--shadow-card)}
.workspace-kpi .value{font-size:1.35rem;font-weight:800;line-height:1.1}
.workspace-kpi .label{margin-top:4px}
.workspace-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.workspace-card{border:1px solid var(--border);border-radius:14px;background:var(--bg-raised);box-shadow:var(--shadow-card);padding:14px}
.workspace-card h4{margin:0 0 6px;font-size:1rem}
.workspace-meta{font-size:.82rem;color:var(--text-muted)}

.masjid-suite-frame-wrap{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--bg-raised);
  box-shadow:none;
}
.masjid-suite-frame-wrap::before{
  content:"";
  display:none;
}
.masjid-suite-frame{
  display:block;
  width:100%;
  height:calc(100vh - 220px);
  min-height:720px;
  border:0;
  background:#fff;
}

.suite-page-hero,
.suite-section,
.feature-suite-card,
.masjid-suite-frame-wrap{
  animation:nizamElevateIn .35s var(--easing-decelerate) both;
}
.feature-suite-card:nth-child(2){animation-delay:.04s}
.feature-suite-card:nth-child(3){animation-delay:.08s}
.feature-suite-card:nth-child(4){animation-delay:.12s}
@keyframes nizamElevateIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width: 980px){
  .workspace-shell{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .workspace-form-grid{grid-template-columns:1fr}
}
.db-table-wrap .db-table{margin:0}
.db-table .db-select-col{width:36px}
.db-table .db-spacer td{border:0;padding:0}
.db-cell{cursor:pointer}
.db-table tbody tr:nth-child(even) td{background:rgba(100,116,139,.06)}
[data-theme="dark"] .db-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.db-cell:hover{background:var(--bg-hover)}
.db-table td{max-width:520px;overflow:hidden;text-overflow:ellipsis}
.db-table th.col-w-80,.db-table td.col-w-80{width:80px;min-width:80px;max-width:80px}
.db-table th.col-w-100,.db-table td.col-w-100{width:100px;min-width:100px;max-width:100px}
.db-table th.col-w-120,.db-table td.col-w-120{width:120px;min-width:120px;max-width:120px}
.db-table th.col-w-140,.db-table td.col-w-140{width:140px;min-width:140px;max-width:140px}
.db-table th.col-w-160,.db-table td.col-w-160{width:160px;min-width:160px;max-width:160px}
.db-table th.col-w-180,.db-table td.col-w-180{width:180px;min-width:180px;max-width:180px}
.db-table th.col-w-200,.db-table td.col-w-200{width:200px;min-width:200px;max-width:200px}
.db-table th.col-w-240,.db-table td.col-w-240{width:240px;min-width:240px;max-width:240px}
.db-table th.col-w-280,.db-table td.col-w-280{width:280px;min-width:280px;max-width:280px}
.db-table th.col-w-320,.db-table td.col-w-320{width:320px;min-width:320px;max-width:320px}
.db-table th.col-w-400,.db-table td.col-w-400{width:400px;min-width:400px;max-width:400px}
.db-table th.col-w-520,.db-table td.col-w-520{width:520px;min-width:520px;max-width:520px}

/* Workflow visual editor */
.wf-canvas{position:relative;margin-top:10px;min-height:260px;border:1px dashed var(--border);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden}
.wf-canvas-lines{position:absolute;top:0;left:0;width:100%;height:100%}
.wf-line{stroke:var(--text-faint);stroke-width:1.5}
.wf-node{position:absolute;min-width:100px;padding:6px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg-elev);color:var(--text);cursor:grab;font-size:.85rem;box-shadow:var(--shadow-soft)}
.wf-node:active{cursor:grabbing}

.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calendar-weekday{font-size:.75rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.calendar-cell{min-height:92px;border:1px solid var(--border);border-radius:12px;padding:8px;background:var(--bg-overlay)}
.calendar-cell.dim{opacity:.6}
.calendar-day{font-weight:600;font-size:.85rem;margin-bottom:6px}
.calendar-items{display:flex;flex-direction:column;gap:4px}
.calendar-item{font-size:.75rem;display:inline-block;padding:2px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.calendar-item:hover{background:var(--bg-hover)}
.board-column.drag-over{outline:2px dashed var(--accent);outline-offset:4px}
.timeline-chart{display:flex;flex-direction:column;gap:12px;position:relative}
.timeline-row{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:12px;align-items:center}
.timeline-track{position:relative;height:22px;background:var(--bg-hover);border-radius:999px;overflow:hidden}
.timeline-bar{position:absolute;top:2px;height:18px;background:var(--accent);border-radius:999px}
.timeline-bar.critical{background:var(--danger)}
.timeline-milestone{position:absolute;top:50%;width:14px;height:14px;background:var(--accent-gold);transform:translate(-50%,-50%) rotate(45deg);border-radius:3px}
.timeline-milestone.critical{background:var(--danger)}
.timeline-bar-svg{width:100%;height:18px;display:block}
.timeline-bar-svg rect{fill:var(--accent)}
.timeline-deps{position:absolute;top:0;left:0;pointer-events:none;z-index:2}
.timeline-dep-line{stroke:rgba(99,102,241,.7);stroke-width:1.5;fill:none}
.timeline-dep-dot{fill:rgba(99,102,241,.9)}
.kanban-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}
.kanban-col{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px;min-height:140px}
.kanban-col h4{margin:0 0 8px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.kanban-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:12px;padding:8px 10px;margin-bottom:8px;cursor:pointer}
.kanban-card:hover{background:var(--bg-hover)}
.kanban-card .meta{font-size:.72rem;color:var(--text-muted);margin-top:4px}
.kanban-card.dragging{opacity:.6}
.kanban-card.pending{border-color:rgba(99,102,241,.5);box-shadow:0 0 0 1px rgba(99,102,241,.2) inset}
.kanban-col.drag-over{outline:2px dashed var(--accent);outline-offset:4px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:.7rem;border:1px solid var(--border);background:var(--bg-hover);color:var(--text-muted)}
.badge.good{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35);color:rgb(6,95,70)}
.badge.warn{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.35);color:rgb(146,64,14)}
.badge.bad{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35);color:rgb(127,29,29)}
.badge.info{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.25);color:rgb(30,64,175)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--bg-elev);border:1px solid var(--border);font-size:.78rem}

.toast{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-soft);margin-top:10px;font-size:.875rem}
.toast.error{border-color:rgba(185,28,28,.4);color:var(--danger)}
.toast.success{border-color:rgba(6,118,71,.35);color:var(--accent)}
.toast.info{border-color:rgba(59,130,246,.3);color:var(--accent)}
#toast-container{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:200}

#offline-banner{position:fixed;top:calc(var(--topbar-h) + 8px);left:50%;transform:translateX(-50%);background:var(--danger);color:#fff;padding:8px 14px;border-radius:999px;font-size:.82rem;box-shadow:var(--shadow-soft);z-index:180;opacity:0;pointer-events:none;transition:opacity .2s ease}
#offline-banner.show{opacity:1}

.notif-dropdown{position:fixed;right:18px;top:calc(var(--topbar-h) + 8px);width:320px;max-height:420px;overflow:auto;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:12px;z-index:150}
.notif-item{padding:10px;border-radius:var(--radius-md);cursor:pointer}
.notif-item:hover{background:var(--bg-hover)}
.notif-item.unread{background:var(--accent-soft)}

.command-palette-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:flex-start;justify-content:center;padding-top:80px;z-index:160}
.command-palette-overlay.open{display:flex}
.command-palette{width:min(720px,92vw);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden}
.command-palette-input{width:100%;padding:14px 16px;border:0;border-bottom:1px solid var(--border);outline:none;background:transparent;color:var(--text)}
.command-palette-results{max-height:420px;overflow:auto}
.command-palette-item{display:flex;gap:10px;align-items:center;padding:10px 14px;cursor:pointer}
.command-palette-item:hover,.command-palette-item.selected{background:var(--bg-hover)}
.diff-meta{padding:10px 12px;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--text-muted)}
.diff-view{max-height:520px;overflow:auto;padding:8px 0}
.diff-line{display:flex;gap:8px;padding:2px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;white-space:pre-wrap}
.diff-line.add{background:rgba(32,159,103,.12)}
.diff-line.del{background:rgba(198,69,69,.12)}
.diff-gutter{width:16px;color:var(--text-faint)}

@media (max-width: 1100px){
  .page-editor-shell{flex-direction:column}
  .page-comments-panel{width:100%;position:static;max-height:none}
}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .grid-cols-3{grid-template-columns:repeat(1,minmax(0,1fr))}
}

/* Modal (used for filter/sort builders) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);display:none;align-items:flex-start;justify-content:center;padding:80px 16px;z-index:170}
.modal-overlay.open{display:flex}
.modal{width:min(760px,94vw);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal-title{font-weight:700}
.modal-body{padding:14px 16px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px;border-top:1px solid var(--border)}
.modal-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.modal-row .input{max-width:260px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(37,99,235,.16);border-radius:999px;background:rgba(37,99,235,.08);font-size:.85rem;color:var(--text)}
.tag button{border:0;background:transparent;cursor:pointer;color:var(--text-muted)}

/* Accessibility */
::focus-visible{box-shadow:0 0 0 2px var(--color-focus-ring), 0 0 0 6px rgba(37,99,235,.08)}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Public page */
.public-shell{max-width:1100px;margin:0 auto;padding:40px 24px 60px}
.public-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.public-brand{font-family:var(--font-display);font-size:1.6rem;color:var(--accent);text-decoration:none}
.public-cover{width:100%;height:260px;border-radius:var(--radius-lg);background:var(--bg-muted);border:1px solid var(--border);box-shadow:var(--shadow-sm);background-size:cover;background-position:center;margin:12px 0 18px}
.public-cover-img{width:100%;height:100%;object-fit:cover;display:block}
.public-title{font-family:var(--font-display);font-size:2.6rem;letter-spacing:-.02em;margin:6px 0 12px}
.public-content{font-size:1.05rem;line-height:1.85}
.public-block{margin:10px 0}
.public-block h1{font-family:var(--font-display);font-size:2.2rem;letter-spacing:-.02em;margin:0 0 8px}
.public-block h2{font-family:var(--font-display);font-size:1.7rem;margin:0 0 8px}
.public-block h3{font-weight:700;margin:0 0 6px}
.public-block p{margin:0 0 10px}
.public-block blockquote{margin:8px 0;padding-left:12px;border-left:3px solid var(--accent-gold);color:var(--text)}
.public-block pre{background:var(--bg-muted);border:1px solid var(--border);padding:12px;border-radius:var(--radius-md);overflow:auto}
.public-block hr{border:0;border-top:1px solid var(--border)}
.public-block ul,.public-block ol{padding-left:24px;margin:6px 0}
.public-block li{margin:4px 0}

/* Marketing site — Nizam theme (matches app) */
.mk-shell{
  min-height:100vh;
  color:var(--text);
  background:var(--bg-base);
  font-family:var(--font-sans);
  position:relative;
}
.mk-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 100% 70% at 50% -20%, rgba(47,150,150,.14), transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(47,150,150,.06), transparent 45%);
  opacity:1;
}
.mk-shell::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(15,23,42,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.02) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.6;
}
.mk-topbar{
  max-width:1200px;
  margin:0 auto;
  padding:var(--space-3) var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-6);
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.mk-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  color:var(--accent);
  text-decoration:none;
  letter-spacing:-.03em;
}
.mk-brand:hover{color:var(--accent-dark);text-decoration:none}
.mk-brand-cluster{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left}
.mk-brand-cluster .mk-brand{line-height:1.05}
.mk-brand-subtitle{
  font-family:var(--font-sans);
  font-size:.625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--text-muted);
  margin:0;
  line-height:1.25;
  max-width:min(280px,70vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mk-nav{display:flex;align-items:center;gap:var(--space-1);flex:1;min-width:0;padding-left:var(--space-8)}
.mk-nav-link{
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  color:var(--text-muted);
  text-decoration:none;
  font-weight:500;
  font-size:.9375rem;
  white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.mk-nav-link:hover{color:var(--text);background:var(--bg-hover);text-decoration:none}
.mk-nav-link.active{color:var(--accent-dark);background:var(--accent-soft);font-weight:600}
.mk-top-actions .btn{
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-5);
  font-weight:600;
  font-size:.9375rem;
}
.mk-top-actions .btn-primary{
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-color:var(--accent-dark);
  box-shadow:0 2px 8px rgba(47,150,150,.25);
}
.mk-top-actions .btn-primary:hover{
  box-shadow:0 4px 14px rgba(47,150,150,.35);
}
.mk-main{
  max-width:720px;
  margin:0 auto;
  padding:var(--space-12) var(--space-6) var(--space-16);
  display:flex;
  flex-direction:column;
  gap:var(--space-12);
}
.mk-main.mk-main-wide{max-width:1100px;padding:0 var(--space-6) var(--space-20)}
.mk-main.mk-main-wide > *{max-width:100%}
.mk-kicker{
  display:inline-flex;
  align-items:center;
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-full);
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:var(--space-5);
}
.mk-hero{
  padding:var(--space-10) 0;
  position:relative;
}
.mk-hero-single{max-width:42rem}
.mk-hero-content{position:relative}
.mk-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 2.75rem);
  line-height:1.15;
  letter-spacing:-.03em;
  margin:0 0 var(--space-4);
  color:var(--text);
}
.mk-hero-lead{
  font-size:var(--type-size-lg);
  line-height:1.6;
  color:var(--text-muted);
  margin:0 0 var(--space-6);
  max-width:38rem;
}
.mk-hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:0}
.mk-hero-actions .btn{
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-6);
  font-weight:600;
}
.mk-hero-actions .btn-primary{
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-color:var(--accent-dark);
  box-shadow:0 4px 14px rgba(47,150,150,.28);
}
.mk-hero-actions .btn-primary:hover{
  box-shadow:0 6px 20px rgba(47,150,150,.38);
}
/* Premium hero — full-width section, larger type, glow */
.mk-hero-premium{
  padding:var(--space-24) 0;
  text-align:center;
  position:relative;
}
.mk-hero-premium .mk-hero-content{
  max-width:720px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.mk-hero-premium .mk-hero-content::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:140%;
  height:120%;
  background:radial-gradient(ellipse 50% 50%, rgba(47,150,150,.08) 0%, transparent 70%);
  pointer-events:none;
}
.mk-hero-premium .mk-kicker{margin-bottom:var(--space-5)}
.mk-hero-premium h1{
  font-family:var(--font-display);
  font-size:clamp(2.75rem, 7vw, 4rem);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:0 0 var(--space-5);
  color:var(--text);
  font-weight:600;
}
.mk-hero-premium .mk-hero-lead{
  font-size:1.25rem;
  line-height:1.65;
  max-width:36rem;
  margin:0 auto var(--space-8);
  color:var(--text-muted);
}
.mk-hero-premium .mk-hero-actions{justify-content:center;gap:var(--space-4)}
.mk-hero-premium .mk-hero-actions .btn{padding:var(--space-4) var(--space-10);font-size:1.0625rem;border-radius:var(--radius-lg)}
.mk-trust-line{
  margin-top:var(--space-10);
  padding-top:var(--space-6);
  border-top:1px solid var(--border);
  font-size:.9375rem;
  color:var(--text-faint);
  letter-spacing:.02em;
}
/* Section bands */
.mk-section-band{
  padding:var(--space-20) 0;
  background:linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-base) 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.mk-section-band-inner{max-width:1100px;margin:0 auto;padding:0 var(--space-6)}
.mk-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:var(--space-6)}
.mk-section-head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw, 1.75rem);
  letter-spacing:-.02em;
  color:var(--text);
}
.mk-features{
  padding:var(--space-16) 0;
}
.mk-features-title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3vw, 1.75rem);
  font-weight:600;
  margin:0 0 var(--space-8);
  color:var(--text);
  letter-spacing:-.02em;
}
.mk-section-title-center{text-align:center;margin-bottom:var(--space-6)}
.mk-features-list{
  list-style:none;
  padding:0;
  margin:0 0 var(--space-6);
  color:var(--text-muted);
  line-height:1.7;
  font-size:var(--type-size-md);
}
.mk-features-list li{margin:var(--space-2) 0}
.mk-features-list strong{color:var(--text);font-weight:600}
.mk-features-cta{margin-top:var(--space-8)}
/* Premium feature cards — 3-col grid, depth & hover */
.mk-feature-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);padding:var(--space-10) 0}
.mk-feature-card{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:var(--space-8);
  box-shadow:0 1px 3px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mk-feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(15,23,42,.08), 0 2px 8px rgba(47,150,150,.06);
  border-color:rgba(47,150,150,.2);
}
.mk-feature-card-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--accent-soft) 0%, rgba(47,150,150,.12) 100%);
  color:var(--accent-dark);
  font-family:var(--font-display);font-weight:700;font-size:1.25rem;
  margin-bottom:var(--space-5);
  box-shadow:0 2px 8px rgba(47,150,150,.1);
}
.mk-feature-card h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin:0 0 var(--space-3);color:var(--text);letter-spacing:-.01em}
.mk-feature-card p{margin:0;color:var(--text-muted);line-height:1.65;font-size:.9375rem}
/* Stats strip */
.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-10);padding:var(--space-12) 0;text-align:center}
.mk-stat-num{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--accent-dark);letter-spacing:-.03em;margin-bottom:var(--space-2);line-height:1}
.mk-stat-label{font-size:.9375rem;color:var(--text-muted);font-weight:500;max-width:10em;margin:0 auto}
/* Product preview — mock app frame */
.mk-product-preview{
  margin:var(--space-16) 0;
  border-radius:var(--radius-2xl);
  overflow:hidden;
  box-shadow:0 24px 64px rgba(15,23,42,.12), 0 8px 24px rgba(15,23,42,.06);
  border:1px solid var(--border);
  background:var(--bg-raised);
}
.mk-product-preview-bar{
  height:40px;
  background:var(--bg-muted);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 var(--space-4);
  gap:8px;
}
.mk-product-preview-bar span{
  width:12px;height:12px;border-radius:50%;
  background:var(--border-strong);
}
.mk-product-preview-bar span:first-child{background:#ff5f57}
.mk-product-preview-bar span:nth-child(2){background:#febc2e}
.mk-product-preview-bar span:nth-child(3){background:#28c840}
.mk-product-preview-body{
  display:flex;
  min-height:320px;
}
.mk-product-preview-side{
  width:220px;
  background:var(--bg-muted);
  border-right:1px solid var(--border);
  padding:var(--space-4);
}
.mk-product-preview-side .mk-preview-item{
  height:10px;
  border-radius:6px;
  background:var(--border);
  margin-bottom:var(--space-2);
  opacity:.7;
}
.mk-product-preview-side .mk-preview-item:nth-child(1){width:80%}
.mk-product-preview-side .mk-preview-item:nth-child(2){width:90%}
.mk-product-preview-side .mk-preview-item:nth-child(3){width:70%}
.mk-product-preview-side .mk-preview-item:nth-child(4){width:85%}
.mk-product-preview-side .mk-preview-item:nth-child(5){width:75%}
.mk-product-preview-side .mk-preview-item:nth-child(6){width:60%;background:var(--accent-soft);opacity:1}
.mk-product-preview-main{
  flex:1;
  padding:var(--space-8);
  background:var(--bg-base);
}
.mk-product-preview-main .mk-preview-block{
  height:14px;
  border-radius:8px;
  background:var(--border);
  margin-bottom:var(--space-3);
  opacity:.6;
}
.mk-product-preview-main .mk-preview-block:nth-child(1){width:40%}
.mk-product-preview-main .mk-preview-block:nth-child(2){width:70%}
.mk-product-preview-main .mk-preview-block:nth-child(3){width:55%}
.mk-product-preview-main .mk-preview-block:nth-child(4){width:30%}
.mk-product-preview-main .mk-preview-block:nth-child(5){width:65%}
.mk-product-preview-main .mk-preview-block:nth-child(6){width:45%}
.mk-product-preview-main .mk-preview-block:nth-child(7){width:80%}
.mk-product-preview-main .mk-preview-block:nth-child(8){width:25%}
.mk-product-preview-caption{
  padding:var(--space-4) var(--space-6);
  background:var(--bg-muted);
  border-top:1px solid var(--border);
  font-size:.875rem;
  color:var(--text-muted);
  text-align:center;
}
/* CTA block refinement */
.mk-cta-block{
  border-radius:var(--radius-2xl);
  padding:var(--space-12) var(--space-10);
  background:linear-gradient(135deg, rgba(47,150,150,.08) 0%, var(--bg-raised) 50%);
  border:1px solid rgba(47,150,150,.18);
  box-shadow:0 8px 32px rgba(47,150,150,.06);
}
.mk-cta-block h2{font-size:clamp(1.5rem, 3vw, 1.75rem);margin-bottom:var(--space-2)}
.mk-cta-block p{margin:0}
.mk-page-hero{
  padding:var(--space-12) 0;
}
.mk-page-hero h1{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 4vw, 2.25rem);
  margin:0 0 var(--space-2);
  color:var(--text);
}
.mk-page-hero p{
  font-size:var(--type-size-md);
  color:var(--text-muted);
  margin:0 0 var(--space-4);
  max-width:42rem;
}
.mk-page-hero-minimal .mk-hero-actions{margin-top:var(--space-4)}
/* Premium subpage hero — same impact as homepage hero */
.mk-page-hero-premium{
  padding:var(--space-24) 0;
  text-align:center;
  position:relative;
}
.mk-page-hero-premium .mk-hero-content{
  max-width:720px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.mk-page-hero-premium .mk-kicker{margin-bottom:var(--space-5)}
.mk-page-hero-premium h1{
  font-family:var(--font-display);
  font-size:clamp(2.75rem, 7vw, 4rem);
  line-height:1.05;
  letter-spacing:-.045em;
  margin:0 0 var(--space-5);
  color:var(--text);
  font-weight:600;
}
.mk-page-hero-premium .mk-hero-lead{
  font-size:1.25rem;
  line-height:1.65;
  max-width:36rem;
  margin:0 auto var(--space-8);
  color:var(--text-muted);
}
.mk-page-hero-premium .mk-hero-actions{justify-content:center;gap:var(--space-4)}
.mk-page-hero-premium .mk-hero-actions .btn{
  padding:var(--space-4) var(--space-10);
  font-size:1.0625rem;
  border-radius:var(--radius-lg);
}
.mk-page-hero-premium .mk-trust-line{margin-top:var(--space-10);padding-top:var(--space-6)}
.mk-page-hero-premium .mk-hero-content::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:140%;
  height:120%;
  background:radial-gradient(ellipse 50% 50%, rgba(47,150,150,.08) 0%, transparent 70%);
  pointer-events:none;
}
.mk-page-hero-premium .mk-page-stats{margin-top:var(--space-6)}
.mk-page-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
  padding:var(--space-8) 0;
  text-align:center;
  max-width:720px;
  margin:0 auto;
}
.mk-page-stats-item{
  font-size:.9375rem;
  color:var(--text-muted);
  font-weight:500;
}
.mk-page-stats-item strong{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--accent-dark);margin-bottom:var(--space-1);font-weight:600}
/* Key points strip — horizontal premium strip for subpages */
.mk-key-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
  padding:var(--space-10) 0;
  margin:var(--space-8) 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.mk-key-strip-item{
  text-align:center;
  padding:var(--space-4);
}
.mk-key-strip-item .mk-key-strip-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent);
  margin:0 auto var(--space-3);
  opacity:.9;
}
.mk-key-strip-item strong{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--text);margin-bottom:var(--space-1);font-weight:600}
.mk-key-strip-item span{font-size:.9375rem;color:var(--text-muted);line-height:1.5}
/* Prose cards — elevated content blocks */
.mk-prose-section{max-width:680px}
.mk-prose-section h2{font-family:var(--font-display);font-size:1.35rem;margin:var(--space-8) 0 var(--space-2);color:var(--text)}
.mk-prose-section p{margin:0 0 var(--space-4);color:var(--text-muted);line-height:1.75}
.mk-prose-section ul{margin:0 0 var(--space-4);padding-left:1.25rem;color:var(--text-muted);line-height:1.7}
.mk-prose-section li{margin:var(--space-1) 0}
.mk-prose-card{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:var(--space-8);
  margin-bottom:var(--space-6);
  box-shadow:0 2px 8px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.04);
}
.mk-prose-card:last-child{margin-bottom:0}
.mk-prose-card h2{font-family:var(--font-display);font-size:1.35rem;margin:0 0 var(--space-3);color:var(--text);letter-spacing:-.02em}
.mk-prose-card p{margin:0 0 var(--space-3);color:var(--text-muted);line-height:1.75}
.mk-prose-card p:last-child{margin-bottom:0}
.mk-prose-card ul{margin:0 0 var(--space-3);padding-left:1.25rem;color:var(--text-muted);line-height:1.7}
.mk-prose-card li{margin:var(--space-1) 0}
/* Pillar grid — 3 or 4 items with icon/num */
.mk-pillar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);padding:var(--space-10) 0}
.mk-pillar{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:var(--space-8);
  text-align:center;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mk-pillar:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(15,23,42,.08);border-color:rgba(47,150,150,.18)}
.mk-pillar-icon{
  width:52px;height:52px;
  margin:0 auto var(--space-4);
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--accent-soft) 0%, rgba(47,150,150,.12) 100%);
  color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  box-shadow:0 2px 8px rgba(47,150,150,.12);
}
.mk-pillar h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin:0 0 var(--space-2);color:var(--text)}
.mk-pillar p{margin:0;color:var(--text-muted);font-size:.9375rem;line-height:1.65}
/* Highlight box — accent left border */
.mk-highlight-box{
  background:linear-gradient(90deg, var(--accent-soft) 0%, var(--bg-raised) 12%);
  border:1px solid rgba(47,150,150,.2);
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius-xl) var(--radius-xl) 0;
  padding:var(--space-6) var(--space-8);
  margin:var(--space-8) 0;
  box-shadow:0 2px 12px rgba(47,150,150,.06);
}
.mk-highlight-box h3{font-family:var(--font-display);font-size:1.15rem;margin:0 0 var(--space-2);color:var(--text)}
.mk-highlight-box p{margin:0;color:var(--text-muted);line-height:1.7;font-size:.9375rem}
/* Two-col content */
.mk-two-col-prose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);padding:var(--space-8) 0}
.mk-two-col-prose .mk-prose-card{margin-bottom:0}
/* Subpage CTA */
.mk-subpage-cta{margin-top:var(--space-12);padding:var(--space-10) 0;text-align:center}
.mk-subpage-cta .mk-cta-block{display:inline-block;text-align:left;min-width:min(100%, 420px)}
.mk-footer{
  margin-top:auto;
  padding:var(--space-12) var(--space-6);
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-base) 100%);
}
.mk-footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-12);
  flex-wrap:wrap;
  font-size:var(--type-size-sm);
  color:var(--text-muted);
}
.mk-footer-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  color:var(--accent);
  display:block;
  margin-bottom:var(--space-1);
}
.mk-footer-tagline{margin:0;max-width:220px;line-height:1.5;color:var(--text-faint)}
.mk-footer-col{display:flex;flex-direction:column;gap:var(--space-2)}
.mk-footer-heading{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-1)}
.mk-footer-col a{color:var(--text-muted);text-decoration:none}
.mk-footer-col a:hover{color:var(--accent)}
.mk-footer-signin{
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
}
.mk-footer-signin:hover{color:var(--accent-dark);text-decoration:none}
.mk-footer-actions{margin-left:auto;text-align:right}
.mk-inline-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
.mk-inline-metrics > div{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.1);
  backdrop-filter:blur(8px);
}
.mk-inline-metrics strong{
  display:block;
  font-family:var(--mk-font-display);
  font-size:1.06rem;
  color:var(--mk-ink);
}
.mk-inline-metrics span{display:block;margin-top:3px;color:var(--mk-soft);font-size:.82rem}
.mk-signal-card{
  padding:18px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,249,243,.86));
  border:1px solid rgba(20,83,45,.18);
}
.mk-signal-card + .mk-signal-card{margin-top:12px}
.mk-signal-card h3{
  margin:0 0 10px;
  font-family:var(--mk-font-display);
  font-size:1.04rem;
  color:var(--mk-ink);
}
.mk-signal-card ul{margin:0;padding-left:18px}
.mk-signal-card li{margin:6px 0;color:var(--mk-muted)}
.mk-signal-card p{margin:0;color:var(--mk-muted)}
.mk-signal-card a{font-weight:700;color:var(--mk-primary-strong)}
.mk-signal-card.accent{
  background:linear-gradient(155deg, rgba(20,83,45,.12), rgba(255,255,255,.88));
  border-color:rgba(20,83,45,.24);
}
.mk-section{margin-top:2px}
.mk-proof-strip,.mk-band,.mk-page-hero:not(.mk-page-hero-premium),.mk-prose,.mk-feature-grid article,.mk-resource-list a,.mk-two-col article,.mk-journey-grid article,.mk-timeline article,.mk-bullet-grid > div,.mk-bento-card,.mk-suite-card,.mk-quote-grid blockquote,.mk-faq details,.mk-cta-block{
  background:var(--mk-card);
  border:1px solid var(--mk-border);
  box-shadow:0 14px 38px rgba(15,23,42,.08);
}
.mk-proof-strip{
  padding:18px 20px;
  border-radius:18px;
  border-color:rgba(15,23,42,.1);
  background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(237,247,241,.95));
}
.mk-proof-intro{display:flex;gap:8px;flex-wrap:wrap;color:var(--mk-muted);font-size:.9rem}
.mk-proof-intro strong{color:var(--mk-ink)}
.mk-proof-logos{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mk-logo-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(20,83,45,.08);
  border:1px solid rgba(20,83,45,.2);
  color:var(--mk-primary);
  font-size:.78rem;
  font-weight:700;
}
.mk-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.mk-section-head h2{
  margin:0;
  font-family:var(--mk-font-display);
  font-size:1.58rem;
  letter-spacing:-.02em;
  color:var(--mk-ink);
}
.mk-section-head a{font-size:.9rem;font-weight:700;color:var(--mk-primary-strong)}
.mk-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mk-feature-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-feature-grid article,.mk-page-hero:not(.mk-page-hero-premium),.mk-prose,.mk-resource-list a,.mk-two-col article,.mk-journey-grid article{border-radius:18px;padding:20px}
.mk-feature-grid h3,.mk-two-col h3,.mk-journey-grid h3,.mk-bento-card h3{
  margin:0 0 8px;
  font-family:var(--mk-font-display);
  font-size:1.03rem;
  color:var(--mk-ink);
}
.mk-feature-grid p,.mk-two-col p,.mk-journey-grid p,.mk-bento-card p{margin:0;color:var(--mk-muted);line-height:1.65}
.mk-bento-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.mk-bento-card{border-radius:18px;padding:20px}
.mk-bento-card.xl{
  grid-row:span 2;
  background:linear-gradient(140deg, rgba(255,255,255,.95), rgba(236,248,241,.95));
  border-color:rgba(20,83,45,.2);
}
.mk-bento-card ul{margin:12px 0 0;padding-left:18px}
.mk-bento-card li{margin:6px 0;color:var(--mk-muted);font-size:.91rem}
.mk-suite-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mk-suite-grid-full{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-suite-card{
  display:block;
  border-radius:18px;
  padding:20px;
  color:inherit;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  background:linear-gradient(165deg, rgba(255,255,255,.96), rgba(244,249,247,.94));
}
.mk-suite-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px rgba(15,23,42,.13);
  border-color:var(--mk-border-strong);
  text-decoration:none;
}
.mk-suite-card h3{
  margin:0 0 8px;
  font-family:var(--mk-font-display);
  font-size:1.08rem;
  color:var(--mk-ink);
}
.mk-suite-card p{margin:0 0 12px;color:var(--mk-muted);min-height:48px}
.mk-suite-card ul{margin:0;padding-left:18px}
.mk-suite-card li{font-size:.84rem;color:var(--mk-soft);margin:4px 0}
.mk-suite-card span{display:inline-block;margin-top:12px;font-size:.82rem;color:var(--mk-primary-strong);font-weight:700}
.mk-suite-card .mk-feature-card-num{margin-bottom:var(--space-4)}
.mk-page-hero{
  margin-bottom:2px;
  border-radius:22px;
  padding:26px 24px;
  background:linear-gradient(150deg, rgba(255,255,255,.97), rgba(240,248,244,.95));
  border-color:rgba(20,83,45,.18);
}
/* Premium subpage hero: no card — same open look as homepage */
.mk-page-hero.mk-page-hero-premium{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:var(--space-24) 0;
  margin-bottom:0;
}
.mk-page-hero .mk-kicker{margin-bottom:10px}
.mk-page-hero.mk-page-hero-premium .mk-kicker{margin-bottom:var(--space-5)}
.mk-timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mk-timeline article{border-radius:15px;padding:18px}
.mk-timeline h3{margin:0 0 6px;font-size:1rem;color:var(--mk-ink)}
.mk-timeline p{margin:0;color:var(--mk-muted)}
.mk-bullet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mk-bullet-grid > div{
  border-radius:14px;
  padding:15px 14px;
  color:var(--mk-muted);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,248,245,.95));
}
.mk-journey-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mk-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(20,83,45,.12);
  color:var(--mk-primary-strong);
  font-family:var(--mk-font-display);
  font-weight:700;
  margin-bottom:8px;
}
.mk-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.mk-two-col ul{margin:0;padding-left:20px}
.mk-two-col li{margin:6px 0;color:var(--mk-muted)}
.mk-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.mk-chip-row span{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(20,83,45,.08);
  border:1px solid rgba(20,83,45,.2);
  color:var(--mk-primary);
  font-size:.84rem;
  font-weight:700;
}
.mk-resource-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mk-resource-list a:hover{
  text-decoration:none;
  box-shadow:0 18px 34px rgba(15,23,42,.11);
  border-color:var(--mk-border-strong);
}
.mk-resource-list h3{
  margin:0 0 8px;
  font-size:1.02rem;
  font-family:var(--mk-font-display);
  color:var(--mk-ink);
}
.mk-resource-list p{margin:0;color:var(--mk-muted)}
.mk-prose p{margin:0 0 12px;color:var(--mk-muted);line-height:1.7}
.mk-quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mk-quote-grid blockquote{
  margin:0;
  border-radius:16px;
  padding:18px;
  background:linear-gradient(170deg, rgba(255,255,255,.95), rgba(242,248,245,.95));
}
.mk-quote-grid p{margin:0;color:var(--mk-muted);font-size:.95rem;line-height:1.66}
.mk-quote-grid cite{display:block;margin-top:12px;color:var(--mk-soft);font-style:normal;font-size:.82rem;font-weight:700}
.mk-faq{display:grid;gap:11px}
.mk-faq details{border-radius:14px;padding:14px 16px}
.mk-faq summary{cursor:pointer;font-weight:700;color:var(--mk-ink)}
.mk-faq p{margin:10px 0 0;color:var(--mk-muted)}
.mk-cta-block{
  margin-top:2px;
  border-radius:24px;
  padding:28px 24px;
  background:linear-gradient(130deg, rgba(20,83,45,.11), rgba(255,255,255,.96));
  border-color:rgba(20,83,45,.26);
}
.mk-cta-block h2{
  margin:0 0 8px;
  font-family:var(--mk-font-display);
  font-size:1.58rem;
  letter-spacing:-.02em;
  color:var(--mk-ink);
}
.mk-cta-block p{margin:0;color:var(--mk-muted)}
.mk-footer{
  max-width:1240px;
  margin:18px auto 0;
  padding:24px;
  border-top:1px solid var(--mk-page-line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.mk-footer-brand{
  font-family:var(--mk-font-display);
  font-size:1.16rem;
  font-weight:700;
  margin-bottom:4px;
  color:var(--mk-ink);
}
.mk-footer-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.mk-footer-links a{color:var(--mk-muted);text-decoration:none;font-size:var(--type-size-sm)}
.mk-footer-links a:hover{color:var(--mk-ink)}
.mk-footer-links .mk-footer-signin{color:var(--accent);font-weight:600}
.mk-footer-links .mk-footer-signin:hover{color:var(--accent-dark)}
.mk-main > *{
  animation:mk-fade-up .48s ease both;
}
.mk-main > *:nth-child(2){animation-delay:.04s}
.mk-main > *:nth-child(3){animation-delay:.08s}
.mk-main > *:nth-child(4){animation-delay:.12s}
.mk-main > *:nth-child(5){animation-delay:.16s}
@keyframes mk-fade-up{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* Docs editor */
.docs-editor-layout{position:relative}
.doc-editor-title-wrap .doc-editor-title{font-size:2rem;line-height:1.3;border:none;background:transparent;width:100%;padding:0}
.doc-editor-title-wrap .doc-editor-title::placeholder{color:var(--text-faint)}
.doc-editor-body .doc-blocks+.doc-editor-textarea{margin-top:16px}
.doc-editor-textarea{min-height:200px;resize:vertical;font-size:1rem;line-height:1.6}
.doc-blocks-editor{min-height:200px;font-size:1rem;line-height:1.6}
.doc-block-content{min-height:1.5em;outline:none;padding:2px 0}
.doc-block-content:empty::before{content:attr(placeholder);color:var(--text-faint)}
.doc-block{margin:0 0 8px;padding:2px 0}
.doc-block-empty{padding:8px 0}
.doc-blocks-preview.hidden{display:none}
.doc-block-grip{opacity:.6}
.doc-block-grip-btn:hover .doc-block-grip{opacity:1}
.doc-panel{border-radius:var(--radius-lg);overflow:hidden}
.doc-panel-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:8px 8px 0;background:var(--bg-muted);border-bottom:1px solid var(--border)}
.doc-panel-tab{padding:8px 12px;font-size:12px;font-weight:500;border:none;background:0;cursor:pointer;color:var(--text-muted);border-radius:var(--radius-sm)}
.doc-panel-tab:hover{color:var(--text);background:var(--bg-hover)}
.doc-panel-tab.active{color:var(--accent);background:var(--bg-raised)}
.doc-panel-content{padding:16px}
.doc-panel-pane{display:none}
.doc-panel-pane.active{display:block}
.doc-save-status-ok{color:var(--success)}
.doc-outline-list .doc-outline-link{text-decoration:none;color:inherit}
.doc-outline-list .doc-outline-link:hover{color:var(--accent)}
.doc-conflict-overlay{position:fixed;inset:0;background:rgba(15,23,42,.4);display:flex;align-items:center;justify-content:center;z-index:100}
.doc-conflict-overlay.hidden{display:none}

/* Docs Home — drive-like layout */
.docs-home-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.docs-home-search-wrap{display:flex;gap:8px;flex:1;min-width:200px}
.docs-home-search{max-width:320px}
.docs-home-scope{width:auto;min-width:120px}
.docs-home-actions{display:flex;gap:8px;align-items:center}
.docs-home-sections{display:flex;flex-direction:column;gap:28px}
.docs-home-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0 0 12px}
.docs-home-table{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.docs-home-row{display:grid;grid-template-columns:32px 1fr 120px 160px 100px;gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);color:inherit;transition:background .15s}
.docs-home-row-selectable{text-decoration:none}
.docs-home-row-selectable .docs-home-title{text-decoration:none;color:inherit}
.docs-home-row-selectable:hover{background:var(--bg-muted)}
.docs-home-check{display:flex;align-items:center}
.docs-home-bulk-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-muted);border-radius:var(--radius-sm);margin-bottom:16px}
.docs-home-bulk-count{font-size:13px;font-weight:500}
.docs-home-card-wrap{position:relative;display:inline-block}
.docs-home-card-cb{position:absolute;top:8px;left:8px;z-index:1}
.docs-home-row:last-child{border-bottom:none}
.docs-home-row:hover{background:var(--bg-muted)}
.docs-home-row.docs-home-header{background:var(--bg-muted);font-size:12px;font-weight:600;color:var(--text-muted);cursor:default}
.docs-home-row.docs-home-header:hover{background:var(--bg-muted)}
.docs-home-col{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-home-title{font-weight:500}
.docs-home-empty{grid-column:1/-1;padding:24px;text-align:center}
.docs-home-spaces{display:flex;flex-wrap:wrap;gap:12px}
.docs-home-space-card{display:inline-flex;align-items:center;padding:12px 20px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;font-weight:500;transition:border-color .15s,box-shadow .15s}
.docs-home-space-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.docs-home-filter{width:auto;min-width:100px}
.docs-home-view-toggle{display:flex;gap:2px}
.docs-home-view-btn{font-size:12px}
.docs-home-view-btn.active{background:var(--bg-muted)}
.docs-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.docs-home-card{display:flex;flex-direction:column;padding:16px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.docs-home-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.docs-home-card-title{font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docs-home-card-meta{font-size:12px;color:var(--text-muted);margin-bottom:8px}
/* Docs shell: Home | Templates | Trash tabs */
.docs-shell-tabs{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-overlay);overflow:hidden;margin-bottom:var(--space-6);padding:4px}
.docs-shell-tab{display:inline-block;padding:10px 20px;font-size:var(--type-size-sm);font-weight:500;text-decoration:none;color:var(--text-muted);border-radius:var(--radius-full);transition:background .15s ease,color .15s ease}
.docs-shell-tab:hover{color:var(--text);background:var(--bg-hover)}
.docs-shell-tab.active{background:var(--accent);color:#fff;border:none}
.docs-shell-content{margin-top:0}
.docs-home-section-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6)}
.docs-home-section-card .docs-home-section-title{margin:0 0 var(--space-4);font-size:var(--type-size-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.docs-home-table-card{box-shadow:var(--shadow-xs)}
.docs-home-toolbar-actions{flex-wrap:wrap;gap:var(--space-3)}
.docs-trash-settings{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-xs)}
.docs-home-table-trash .docs-home-row{grid-template-columns:1fr 160px 100px}
.hidden{display:none!important}
/* Docs (word processor) editor */
.docs-word-editor-wrap{display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:400px;background:var(--bg-base)}
.docs-word-menubar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-raised);flex-shrink:0}
.docs-word-menubar-item{padding:4px 10px;font-size:13px;color:var(--text);cursor:pointer;border-radius:var(--radius-xs)}
.docs-word-menubar-item:hover{background:var(--bg-muted)}
.docs-word-editor-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.docs-word-save-status{font-size:12px;color:var(--text-muted)}
.docs-word-toolbar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-overlay);flex-shrink:0}
.docs-word-font{width:140px}.docs-word-size{width:64px}
.docs-word-toolbar-sep{width:1px;height:20px;background:var(--border);margin:0 4px}
.docs-word-toolbar .docs-word-word-count{font-size:12px;color:var(--text-muted);margin-left:8px}
.docs-word-ruler{height:24px;background:var(--bg-overlay);border-bottom:1px solid var(--border);flex-shrink:0}
.docs-word-ruler-inner{max-width:612px;margin:0 auto;height:100%;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.docs-word-editor-body{display:flex;flex:1;overflow:hidden;position:relative}
.docs-word-panel{direction:ltr;position:absolute;top:0;bottom:0;width:280px;max-width:45vw;background:var(--bg-raised);border:1px solid var(--border);box-shadow:var(--shadow-card);z-index:40;display:flex;flex-direction:column;overflow:hidden;transition:transform .2s ease}
.docs-word-panel-left{left:0;transform:translateX(-100%)}
.docs-word-panel-left.docs-word-panel-open{transform:translateX(0)}
.docs-word-panel-right{right:0;transform:translateX(100%)}
.docs-word-panel-right.docs-word-panel-open{transform:translateX(0)}
.docs-word-panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.docs-word-panel-tabs{display:flex;flex-wrap:wrap;gap:4px}
.docs-word-panel-tab{padding:4px 8px;font-size:12px;background:0;border:0;cursor:pointer;color:var(--text-muted)}
.docs-word-panel-tab:hover,.docs-word-panel-tab.active{color:var(--text)}
.docs-word-panel-tab-body{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column}
.docs-word-panel-tab-body.hidden{display:none}
.docs-word-canvas-wrap{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;align-items:center}
.docs-word-doc-title-wrap{width:100%;max-width:612px;margin-bottom:8px}
.docs-word-doc-title-input{width:100%;font-size:18px;font-weight:600;border:none;background:transparent;padding:4px 0;outline:0;color:var(--text)}
.docs-word-canvas{min-width:612px;max-width:612px;min-height:792px;padding:72px;background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--border);border-radius:2px;font-family:Georgia,serif;font-size:12pt;line-height:1.5;color:#1a1a1a;outline:0}
.docs-word-version-row,.docs-word-comment{padding:8px 0;border-bottom:1px solid var(--border-muted)}
.docs-word-comment-add{padding:12px 0;border-top:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.docs-word-dropdown{position:absolute;top:100%;left:0;margin-top:4px;min-width:220px;max-height:70vh;overflow:auto;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-modal);z-index:50;padding:4px 0}
.docs-word-dropdown hr{margin:4px 0;border:0;border-top:1px solid var(--border)}
.docs-word-dropdown-item{display:block;width:100%;padding:8px 14px;text-align:left;font-size:13px;background:0;border:0;cursor:pointer;color:var(--text)}
.docs-word-dropdown-item:hover{background:var(--bg-muted)}
.docs-word-menubar-item{position:relative}
.docs-word-mode-tabs{display:flex;margin-left:12px}
.docs-word-mode-btn{padding:4px 10px;font-size:12px;background:0;border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;color:var(--text-muted)}
.docs-word-mode-btn:hover{color:var(--text)}
.docs-word-mode-btn.active{background:var(--bg-muted);color:var(--text)}
.docs-templates-category{margin-bottom:28px}
.docs-templates-category-title{font-size:13px;font-weight:600;color:var(--text-muted);margin:0 0 12px}

/* Database (spreadsheet) workbook editor */
.db-editor-wrap{display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:400px;background:var(--bg-base)}
.db-editor-header{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg-raised);flex-shrink:0}
.db-editor-title-input{font-size:16px;font-weight:600;border:none;background:transparent;padding:4px 8px;border-radius:var(--radius-xs);flex:1;min-width:0;max-width:400px}
.db-editor-title-input:focus{outline:0;box-shadow:0 0 0 2px var(--color-focus-ring)}
.db-editor-breadcrumb{font-size:12px;color:var(--text-muted)}
.db-editor-header-actions{display:flex;align-items:center;gap:8px}
.db-editor-menubar{display:flex;align-items:center;gap:2px;padding:4px 8px;border-bottom:1px solid var(--border);background:var(--bg-overlay);flex-shrink:0}
.db-editor-menu-item{padding:6px 12px;font-size:13px;color:var(--text);cursor:pointer;border-radius:var(--radius-xs);border:none;background:0}
.db-editor-menu-item:hover{background:var(--bg-muted)}
.db-editor-toolbar{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid var(--border);background:var(--bg-raised);flex-shrink:0}
.db-editor-toolbar .btn{padding:4px 8px;font-size:12px}
.db-editor-formula-bar{display:flex;align-items:stretch;gap:8px;padding:4px 12px;border-bottom:1px solid var(--border);background:var(--bg-overlay);flex-shrink:0}
.db-editor-name-box{width:100px;padding:6px 8px;font-size:12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--bg-raised)}
.db-editor-formula-input{flex:1;padding:6px 8px;font-size:13px;font-family:var(--type-font-mono);border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--bg-raised)}
.db-editor-formula-input:focus{outline:0;border-color:var(--accent)}
.db-editor-grid-wrap{flex:1;overflow:auto;padding:16px}
.db-sheet-grid{border-collapse:collapse;font-size:13px;background:var(--bg-raised);box-shadow:var(--shadow-card)}
.db-sheet-grid th,.db-sheet-grid td{border:1px solid var(--border);padding:2px 6px;min-width:80px;height:24px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-sheet-grid th{background:var(--bg-muted);font-weight:600;font-size:11px;text-align:center;color:var(--text-muted);position:sticky;top:0;z-index:2}
.db-sheet-grid td{background:var(--surface);cursor:cell}
.db-sheet-grid td.selected{outline:2px solid var(--accent);outline-offset:-1px;z-index:1}
.db-sheet-grid td input.cell-edit{width:100%;min-width:60px;border:0;padding:2px 4px;font:inherit;background:var(--bg-overlay);outline:0}
.db-sheet-tabs{display:flex;align-items:center;gap:4px;padding:4px 12px;border-top:1px solid var(--border);background:var(--bg-raised);flex-shrink:0}
.db-sheet-tab{padding:6px 12px;font-size:12px;border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;background:0;color:var(--text)}
.db-sheet-tab:hover{background:var(--bg-muted)}
.db-sheet-tab.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.db-sheet-tab-wrap{display:inline-flex;align-items:center;gap:2px;margin-right:2px}
.db-sheet-tab-wrap.active .db-sheet-tab{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.db-sheet-tab-delete{padding:0 4px;font-size:14px;line-height:1;color:var(--text-muted);cursor:pointer;border:none;background:0;border-radius:var(--radius-xs)}
.db-sheet-tab-delete:hover{color:var(--danger);background:var(--bg-muted)}
.db-sheet-tab-add{padding:4px 8px;font-size:14px;color:var(--text-muted);cursor:pointer;border:none;background:0;border-radius:var(--radius-xs)}
.db-sheet-tab-add:hover{background:var(--bg-muted);color:var(--text)}
.db-editor-status-bar{display:flex;align-items:center;gap:16px;padding:4px 12px;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);background:var(--bg-overlay);flex-shrink:0}

.dropdown-wrap{position:relative}
.dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:160px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-modal);z-index:40;padding:4px}
.dropdown-menu.hidden{display:none}
.dropdown-item{display:block;width:100%;padding:8px 12px;text-align:left;border:none;background:0;cursor:pointer;font-size:14px;border-radius:var(--radius-xs)}
.dropdown-item:hover{background:var(--bg-muted)}
.tag-default{background:var(--bg-muted);color:var(--text-muted)}

/* Professional dashboard overrides (ensure minimal visuals) */
body{background:var(--bg-base)}
::focus-visible{box-shadow:0 0 0 3px var(--color-focus-ring)}


@media (max-width: 880px){
  .app-sidebar{display:none}
  .app-topbar-search-trigger{display:none}
  .app-main{padding:16px}
  .mk-topbar{margin:10px 12px 0;padding:11px 12px}
  .mk-nav{display:none}
  .mk-main{padding:16px 14px 34px;gap:20px}
  .mk-hero{grid-template-columns:1fr;padding:22px}
  .mk-inline-metrics{grid-template-columns:1fr}
  .mk-feature-grid,.mk-feature-grid-3,.mk-bento-grid,.mk-suite-grid,.mk-suite-grid-full,.mk-resource-list,.mk-timeline,.mk-bullet-grid,.mk-journey-grid,.mk-two-col,.mk-quote-grid,.mk-feature-cards,.mk-stats,.mk-pillar-grid,.mk-two-col-prose,.mk-page-stats,.mk-key-strip{grid-template-columns:1fr}
  .mk-bento-card.xl{grid-row:auto}
  .mk-footer{padding:16px 14px 24px;margin-top:8px}
  .mk-hero-premium,.mk-page-hero-premium{padding:var(--space-12) 0}
  .mk-product-preview-side{width:120px}
  .mk-product-preview-body{min-height:240px}
  .mk-footer-inner{flex-direction:column;align-items:flex-start;gap:var(--space-8)}
  .mk-footer-actions{margin-left:0;margin-top:var(--space-4)}
}


/* Masjid portal — legacy class names map to Nizam tokens (keep HTML unchanged) */
:root {
  --text-primary: var(--text);
  --text-ink: var(--text);
  --border-default: var(--border);
  --border-sidebar: var(--border);
  --border-focus: var(--accent);
  --bg-card: var(--bg-raised);
  --bg-card-muted: var(--bg-muted);
  --bg-app: var(--bg-base);
  --bg-sidebar: var(--bg-overlay);
  --bg-active-soft: var(--accent-soft);
  --text-secondary: var(--text-muted);
  --text-subtle: var(--text-faint);
  --text-link: var(--accent);
  --accent-active-text: var(--accent-dark);
  --accent-2: var(--accent-gold);
  --warning-text: #b45309;
  --muted: var(--text-muted);
  --bg: var(--bg-app);
  --text-body: 14px;
  --text-caption: 12px;
  --text-headline: 24px;
  --type-letter-tight: -0.02em;
  --type-size-sm: 0.875rem;
  --tag-bg: #eef6f7;
  --tag-text: #334155;
  --shadow-elevated: 0 12px 32px rgba(17, 24, 39, 0.08);
  --shadow-soft: var(--shadow-card);
  --shadow: var(--shadow-card);
  --shadow-sm: var(--shadow-xs);
  --font-serif-nizam: var(--font-display);
  --border-soft: #edf2f7;
  --border-muted: rgba(15, 23, 42, 0.08);
  --accent-disabled: #9dcac3;
}

/* Masjid Admin Suite – dark mode (toggle); scoped so public portal is unchanged */
body[data-portal="masjid-admin"][data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0b1220;
  --bg-muted: #0f172a;
  --bg-raised: #151f33;
  --bg-overlay: #0f1a2e;
  --bg-hover: #1a2840;
  --surface: var(--bg-raised);
  --surface-2: #0f1a2e;
  --surface-3: #0c162b;
  --border: rgba(148, 163, 184, 0.18);
  --border-strong: rgba(148, 163, 184, 0.26);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-dark: #14b8a6;
  --accent-soft: rgba(45, 212, 191, 0.18);
  --accent-gold: #f6c177;
  --accent-gold-soft: rgba(246, 193, 119, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.15);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.15);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.14);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow: var(--shadow-card);
  --bg-app: var(--bg-base);
  --bg-sidebar: var(--bg-overlay);
  --bg-card: var(--bg-raised);
  --bg-card-muted: var(--bg-muted);
  --bg-active-soft: var(--accent-soft);
  --border-default: var(--border);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --text-subtle: var(--text-faint);
  --text-link: var(--accent);
  --accent-active-text: var(--accent-dark);
  --muted: var(--text-muted);
  --bg: var(--bg-app);
  --text-ink: #f8fafc;
}

* {
  box-sizing: border-box;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  transition: background 180ms ease-out;
}
body[data-portal="public"],
body[data-portal="masjid-admin"] {
  background-color: var(--bg-app);
  background-image:
    radial-gradient(ellipse 100% 60% at 50% -25%, rgba(47, 150, 150, 0.09), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 38%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(17, 24, 39, 0.028) 31px,
      rgba(17, 24, 39, 0.028) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 31px,
      rgba(17, 24, 39, 0.028) 31px,
      rgba(17, 24, 39, 0.028) 32px
    );
  background-attachment: fixed;
}

/* Booking admin — Nizam Foundation canvas: soft teal glow + subtle dot grid (§2.1 operator desk) */
body[data-portal="admin"] {
  font-family: var(--font-display), 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 110% 70% at 50% -15%, rgba(47, 150, 150, 0.055), transparent 52%),
    radial-gradient(circle at 1px 1px, var(--pattern-ink, rgba(47, 150, 150, 0.04)) 1px, transparent 0);
  background-size: auto auto, 22px 22px;
  background-attachment: fixed;
}
body[data-portal="admin"] .btn,
body[data-portal="admin"] input,
body[data-portal="admin"] select,
body[data-portal="admin"] textarea,
body[data-portal="admin"] .field label,
body[data-portal="admin"] .rich-editor,
body[data-portal="admin"] .template-preview-body {
  font-family: inherit;
}
/* Masjid admin — match booking admin + Nizam canvas (dot grid + teal glow) */
body[data-portal="masjid-admin"] {
  /* Narrower rail + more canvas for lists and wizards (standalone masjid admin only) */
  --sidebar-w: 220px;
  font-family: var(--font-sans);
  font-size: 15px;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 110% 70% at 50% -15%, rgba(47, 150, 150, 0.055), transparent 52%),
    radial-gradient(circle at 1px 1px, var(--pattern-ink, rgba(47, 150, 150, 0.04)) 1px, transparent 0);
  background-size: auto auto, 22px 22px;
  background-attachment: fixed;
}
body[data-portal="masjid-admin"][data-theme="dark"] {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 100% 55% at 50% -25%, rgba(45, 212, 191, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, transparent 45%);
  background-attachment: fixed;
}

/* Unified theme: Nizam display serif + signature teal rule */
[data-portal="public"] .section-title,
[data-portal="admin"] .section-title,
[data-portal="masjid-admin"] .section-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-ink);
  line-height: 1.22;
  letter-spacing: -0.03em;
}
[data-portal="public"] .section-title::after,
[data-portal="admin"] .section-title::after,
[data-portal="masjid-admin"] .section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  margin-top: 10px;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(47, 150, 150, 0.25);
}
[data-portal="public"] .panel,
[data-portal="admin"] .panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
[data-portal="masjid-admin"] .panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
[data-portal="public"] .hero-card {
  min-height: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px 32px;
}
[data-portal="admin"] .hero-card {
  min-height: 160px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px 32px;
}
[data-portal="admin"] .masjid-admin-hero .hero-card {
  min-height: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
  padding: 28px 32px;
}
[data-portal="masjid-admin"] .hero-card,
[data-portal="masjid-admin"] .masjid-admin-hero .hero-card {
  min-height: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-elevated);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
[data-portal="masjid-admin"] .masjid-admin-hero .hero-card {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: var(--space-6) var(--space-8);
  overflow: hidden;
  border: 1px solid rgba(230, 237, 243, 0.98);
  box-shadow: var(--shadow-card);
}
[data-portal="masjid-admin"] .masjid-admin-hero .hero-card:hover {
  border-color: rgba(47, 150, 150, 0.14);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(15, 23, 42, 0.08);
}
[data-portal="masjid-admin"] .masjid-admin-hero .hero-card > * {
  position: relative;
  z-index: 2;
}
[data-portal="masjid-admin"] .masjid-admin-hero .masjid-admin-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: var(--text-ink);
}
[data-portal="masjid-admin"] .hero-card::before,
[data-portal="masjid-admin"] .masjid-admin-hero .hero-card::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 55%;
  height: 90%;
  background: radial-gradient(circle at 60% 40%, rgba(47, 150, 150, 0.12), transparent 62%);
  pointer-events: none;
}
[data-portal="masjid-admin"] .hero-card h1,
[data-portal="masjid-admin"] .hero-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text-ink);
  position: relative;
  z-index: 1;
}
[data-portal="public"] .eyebrow,
[data-portal="admin"] .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 500;
}
[data-portal="masjid-admin"] .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 500;
}
[data-portal="public"] .btn.btn-primary,
[data-portal="admin"] .btn.btn-primary,
[data-portal="masjid-admin"] .btn.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(47, 150, 150, 0.35);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
[data-portal="public"] .btn.btn-primary:hover,
[data-portal="admin"] .btn.btn-primary:hover,
[data-portal="masjid-admin"] .btn.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  box-shadow: 0 6px 20px rgba(47, 150, 150, 0.4);
}
[data-portal="public"] input,
[data-portal="public"] select,
[data-portal="public"] textarea,
[data-portal="admin"] input,
[data-portal="admin"] select,
[data-portal="admin"] textarea,
[data-portal="masjid-admin"] input,
[data-portal="masjid-admin"] select,
[data-portal="masjid-admin"] textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  padding: 10px 12px;
  color: var(--text-primary);
}
[data-portal="public"] input:focus,
[data-portal="admin"] input:focus,
[data-portal="masjid-admin"] input:focus,
[data-portal="public"] select:focus,
[data-portal="admin"] select:focus,
[data-portal="masjid-admin"] select:focus,
[data-portal="public"] textarea:focus,
[data-portal="admin"] textarea:focus,
[data-portal="masjid-admin"] textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
[data-portal="public"] .loader-card,
[data-portal="admin"] .loader-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}
[data-portal="masjid-admin"] .loader-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-8) 28px 96px;
}
[data-portal="public"] .shell,
[data-portal="admin"] .shell {
  max-width: 1240px;
  padding: 8px 28px var(--space-10);
}
[data-portal="masjid-admin"] .shell {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[data-portal="masjid-admin"] #masjidAdminLoginPanel {
  max-width: 480px;
  margin: 80px auto;
  padding: 40px;
}

/* Nizam Control Center shell — full-width topbar, flush sidebar rail (NIZAM_FOUNDATION §2.6) */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.app-topbar,
.portal-topbar,
[data-portal="admin"] .booking-admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--topbar-h);
  padding: 0 var(--main-padding);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  row-gap: var(--space-2);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.96);
}

[data-portal="public"] #publicContent.app-shell .portal-topbar,
[data-portal="admin"] #adminContent.app-shell .booking-admin-topbar,
[data-portal="masjid-admin"] #masjidAdminContent.app-shell .booking-admin-topbar {
  border-left: none;
  border-right: none;
  border-top: none;
}

.portal-topbar-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 400px;
}
.portal-topbar-search-wrap::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.4;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
  color: var(--text-muted);
}
.portal-topbar-search {
  width: 100%;
  padding: 10px 14px 10px 42px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-overlay);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.portal-topbar-search::placeholder {
  color: var(--text-muted);
}
.portal-topbar-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.app-body,
.portal-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  width: 100%;
  margin-top: 0;
  gap: 0;
}

[data-portal="public"] .portal-layout,
[data-portal="admin"] .app-body.masjid-admin-layout {
  flex-direction: row;
}

[data-portal="masjid-admin"] #masjidAdminContent.app-shell {
  min-height: 100vh;
}
[data-portal="masjid-admin"] #masjidAdminContent.app-shell .app-body {
  flex-direction: row;
  flex: 1;
  min-height: 0;
}

.portal-nav {
  position: relative;
  width: var(--sidebar-w);
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
  top: auto;
  background: var(--bg-overlay);
  border: none;
  border-right: 1px solid var(--border-default);
  border-radius: 0;
  margin: 0;
  padding: var(--space-5) var(--space-3);
  min-height: 0;
  box-shadow: none;
  overflow-y: auto;
}

[data-portal="admin"] .masjid-admin-nav.panel {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border-sidebar);
  box-shadow: none;
  background: var(--bg-overlay);
  align-self: stretch;
  width: var(--sidebar-w);
  flex-shrink: 0;
}

/* Booking admin sidebar — Nizam rail: scrollable nav + footer pinned to bottom */
[data-portal="admin"] #adminNav.booking-admin-sidebar {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
  padding-bottom: var(--space-3);
}
[data-portal="admin"] .booking-admin-nav-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
[data-portal="admin"] .booking-admin-sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}
[data-portal="admin"] .booking-admin-back-suite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--type-size-sm, 0.875rem);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--duration-120, 120ms) var(--easing-standard, ease),
    border-color var(--duration-120, 120ms) var(--easing-standard, ease);
}
[data-portal="admin"] .booking-admin-back-suite:hover {
  background: var(--accent-soft);
  border-color: rgba(47, 150, 150, 0.35);
  color: var(--accent-dark);
  text-decoration: none;
}
[data-portal="admin"] .booking-admin-back-suite:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
[data-portal="admin"] .booking-admin-back-suite-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  font-size: 1rem;
  line-height: 1;
}
[data-portal="admin"] .booking-admin-back-suite-label {
  line-height: 1.3;
}

/* Masjid admin standalone: same rail + pinned footer as booking admin */
[data-portal="masjid-admin"] #masjidAdminNav.booking-admin-sidebar {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
  padding-bottom: var(--space-3);
}
[data-portal="masjid-admin"] #masjidAdminNav .masjid-admin-nav-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  padding-bottom: var(--space-5);
}
[data-portal="masjid-admin"] #masjidAdminNav .booking-admin-back-suite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--type-size-sm, 0.875rem);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--duration-120, 120ms) var(--easing-standard, ease),
    border-color var(--duration-120, 120ms) var(--easing-standard, ease);
}
[data-portal="masjid-admin"] #masjidAdminNav .booking-admin-back-suite:hover {
  background: var(--accent-soft);
  border-color: rgba(47, 150, 150, 0.35);
  color: var(--accent-dark);
  text-decoration: none;
}
[data-portal="masjid-admin"] #masjidAdminNav .booking-admin-back-suite:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
[data-portal="masjid-admin"] #masjidAdminNav .booking-admin-back-suite-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  font-size: 1rem;
  line-height: 1;
}
[data-portal="masjid-admin"] #masjidAdminNav .booking-admin-back-suite-label {
  line-height: 1.3;
}

[data-portal="admin"] #masjidAdminSuite #masjidAdminNav.booking-admin-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: var(--space-3);
}
[data-portal="admin"] #masjidAdminSuite #masjidAdminNav .masjid-admin-nav-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
[data-portal="admin"] #masjidAdminSuite #masjidAdminNav .booking-admin-sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.app-main-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.portal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--bg-base);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--main-padding);
}

[data-portal="public"] .portal-main .app-main-inner {
  padding: 0;
}

/* Booking admin: full-width main column (no 1200px cap — matches wide Control Center) */
[data-portal="admin"] .masjid-admin-main .app-main-inner {
  padding: 0;
  max-width: none;
  width: 100%;
  margin: 0;
}

.portal-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-ink);
  line-height: 1.15;
}

.brand-subtitle {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.public-screen {
  display: block;
}

.mobile-nav {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  box-shadow: var(--shadow);
  gap: 8px;
  justify-content: space-between;
  z-index: 30;
}

.mobile-nav .nav-btn {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.portal-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
  z-index: 1000;
}

.portal-loader.active {
  opacity: 1;
  pointer-events: auto;
}

.loader-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
  padding: 28px 32px;
  width: min(440px, 90vw);
  text-align: center;
}

.loader-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  margin: 16px auto 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-hover);
  border-top-color: var(--accent);
  animation: portalSpin 0.8s linear infinite;
}

.loader-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-ink);
}

.loader-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
}

.hero {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  margin-bottom: var(--space-6);
}

.hero-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.masjid-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--bg-card);
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  margin-bottom: 12px;
}

.hero p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.4;
  font-size: 14px;
}

.panel {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
  padding: 24px;
}

.panel-header {
  gap: var(--space-3);
}

.panel-body {
  margin-top: var(--space-4);
}

.panel.is-collapsed .panel-body {
  display: none;
}

.panel.is-collapsed .panel-header {
  margin-bottom: 0;
}

.panel > * {
  position: relative;
  z-index: 1;
}

@keyframes portalSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  min-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-6);
}

.auth-media {
  position: relative;
  background: var(--bg-sidebar);
  background-image: var(--auth-image);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 36px;
}

.auth-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.5) 0%, rgba(17, 24, 39, 0.2) 100%);
}

.auth-media-content {
  position: relative;
  z-index: 1;
  max-width: 360px;
}

.auth-media h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 600;
  margin: 12px 0 10px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.auth-media p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.4;
}

.auth-brand {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.auth-footer {
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.auth-card {
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--text-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-redirect-msg {
  font-size: 14px;
  color: var(--accent-active-text);
  margin: 12px 0 0;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-hover);
  padding: 4px;
  border-radius: 999px;
}

.auth-tab {
  border: none;
  background: transparent;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.auth-tab.active {
  background: var(--accent-soft);
  color: var(--accent-active-text);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

/* Admin portal: same premium auth layout as user portal */
[data-portal="admin"] .auth-layout {
  margin-bottom: var(--space-6);
}
[data-portal="admin"] .auth-media .pill {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
[data-portal="admin"] .auth-layout-session .auth-media {
  background: var(--bg-sidebar);
  background-image: none;
}

@media (max-width: 960px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-media {
    min-height: 220px;
    padding: 24px;
  }

  .auth-card {
    padding: 28px 22px 32px;
  }

  .auth-title {
    font-size: 26px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .portal-topbar {
    position: static;
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-title {
    font-size: 24px;
  }

  .brand-subtitle {
    letter-spacing: 0.16em;
  }

  .portal-layout {
    grid-template-columns: 1fr;
  }

  [data-portal="public"] .public-nav {
    display: none;
  }

  [data-portal="public"] .public-mobile-nav {
    display: flex;
  }

  [data-portal="public"] .public-section {
    position: static;
  }
}

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.35rem);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-ink);
  letter-spacing: -0.02em;
}

.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  margin-top: 10px;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(47, 150, 150, 0.25);
}

.muted {
  color: var(--text-secondary);
  font-size: 14px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

input,
select,
textarea {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--accent-soft);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

.btn {
  border: none;
  border-radius: var(--radius-full);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(47, 150, 150, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  box-shadow: 0 6px 20px rgba(47, 150, 150, 0.4);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid transparent;
}

.btn-secondary:hover {
  background: var(--border-soft);
}

.accordion-toggle {
  background: var(--bg-hover);
  border: 1px solid var(--border-default);
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.btn-outline:hover {
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

.tabs {
  display: inline-flex;
  background: var(--bg-hover);
  border-radius: 999px;
  padding: 4px;
  border: none;
}

.tab {
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.tab:hover:not(.active) {
  background: var(--border-soft);
}

.tab.active {
  background: var(--accent-soft);
  color: var(--accent-active-text);
}

.card-list {
  display: grid;
  gap: 14px;
}

.item-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-card);
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.item-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

.item-card.selected {
  border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(47, 150, 150, 0.22);
}

.item-card strong {
  font-size: 15px;
}

.pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.pill.pending {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.pill.booked {
  background: rgba(178, 69, 58, 0.08);
  color: var(--danger);
}

.pill.blocked,
.pill.closed {
  background: var(--bg-hover);
  color: var(--text-muted);
}

.status-pill[data-status="pending"],
.status-pill[data-status="requested"] {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.status-pill[data-status="confirmed"],
.status-pill[data-status="approved"] {
  background: var(--accent-soft);
  color: var(--accent-active-text);
}

.status-pill[data-status="approved_awaiting_payment"] {
  background: var(--warning-soft);
  color: var(--warning-text);
}

.status-pill[data-status="rejected"],
.status-pill[data-status="cancelled"] {
  background: rgba(178, 69, 58, 0.08);
  color: var(--danger);
}

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.slot-time {
  font-size: 14px;
}

.slot:hover {
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

.slot.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}

.slot button {
  white-space: nowrap;
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
  font-size: 14px;
  color: var(--text-primary);
  z-index: 20;
}

.admin-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-card-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--border-soft);
}

.table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table tbody tr.selected {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(47, 143, 106, 0.12);
  color: var(--success);
}

.danger {
  color: var(--danger);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice {
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-left-width: 1px;
  border-left-color: var(--border-default);
  font-size: 14px;
  color: var(--text-secondary);
}

.notice.error {
  border-left: 4px solid var(--danger);
}

.notice.warning {
  border-left: 4px solid var(--warning);
  background: var(--bg-card);
}

.notice a,
.notice .text-link {
  color: var(--text-link);
  text-decoration: none;
}

.notice a:hover {
  text-decoration: underline;
}

.notice .btn {
  margin-left: 12px;
}

.notice #paymentLink {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.template-preview {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-card);
}

.template-preview-subject {
  font-weight: 600;
  margin: 4px 0 10px;
  color: var(--text-primary);
}

.template-preview-body {
  font-size: 13px;
  color: var(--text-secondary);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.insight-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.insight-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: #fff;
}

.insight-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.insight-value {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0 4px;
}

.insight-meta {
  font-size: 12px;
  color: var(--muted);
}

.insight-trend {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
  margin-top: 12px;
}

.insight-trend span {
  flex: 1;
  display: block;
  border-radius: 8px;
  min-height: 8px;
  background: linear-gradient(180deg, rgba(47, 150, 150, 0.55), rgba(47, 150, 150, 0.12));
  transition: height 0.2s ease;
}

.insight-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.insight-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.insight-row strong {
  color: var(--text-primary);
  font-weight: 600;
}

.update-card,
.booking-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-card);
}

.update-card,
.booking-card,
.item-card,
.slot {
  animation: lift-in 0.4s ease both;
}

@keyframes lift-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.update-card h4,
.booking-card h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.update-meta,
.booking-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid transparent;
  background: var(--accent-soft);
  color: var(--accent-active-text);
}

.chip.unread {
  background: var(--warning-soft);
  color: var(--warning-text);
}

[data-portal="public"] .public-hero {
  grid-template-columns: minmax(280px, 1.3fr) minmax(280px, 1fr);
  align-items: stretch;
}

[data-portal="public"] .public-hero .panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

[data-portal="public"] .public-nav .nav-btn {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 14px 10px 12px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted);
  border-left: 4px solid transparent;
  transition: background 150ms ease-out, color 150ms ease-out;
}

[data-portal="public"] .public-nav .nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

[data-portal="public"] .public-nav .nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent-active-text);
  border-left-color: var(--accent);
}

[data-portal="public"] .public-nav .nav-btn.is-disabled,
[data-portal="public"] .public-mobile-nav .nav-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(47, 150, 150, 0.06);
  border-color: transparent;
}

[data-portal="public"] .public-mobile-nav .nav-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}

[data-portal="public"] .public-mobile-nav .nav-btn.active {
  background: var(--accent-soft);
  border-color: rgba(47, 150, 150, 0.35);
  color: var(--accent-dark);
}

[data-portal="public"] .public-quick {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

[data-portal="public"] .public-quick .panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

[data-portal="public"] #userProfilePanel {
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

[data-portal="public"] .public-overview {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

[data-portal="public"] #publicContent {
  padding-bottom: 96px;
}

/* Masjid-only booking embed: /portal/bookings/{masjidId} — slim chrome; body keeps data-app=community for booking CSS */
body[data-bookings-embed="1"] #publicContent {
  padding-bottom: 32px;
}
body[data-bookings-embed="1"] .bookings-embed-masjid-select-wrap {
  display: none !important;
}
body[data-bookings-embed="1"] .bookings-embed-topbar {
  border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
  justify-content: space-between;
}
body[data-bookings-embed="1"] .bookings-embed-brand-cluster {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-bookings-embed="1"] .bookings-embed-topbar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
  flex-shrink: 0;
  background: var(--bg-raised, #fff);
  padding: 2px;
  box-sizing: border-box;
}
body[data-bookings-embed="1"] .bookings-embed-masjid-title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

[data-portal="public"] .public-section {
  position: sticky;
  top: 16px;
}

[data-portal="public"] .public-main {
  grid-template-columns: minmax(280px, 1fr);
}

[data-portal="public"] .public-booking {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

[data-portal="public"] .availability-panel {
  padding: 30px;
}

[data-portal="public"] .availability-panel .calendar-grid {
  padding: 14px;
}

[data-portal="public"] .availability-panel .calendar-day {
  padding: 12px 8px;
  min-height: 72px;
}

[data-portal="public"] .availability-panel .calendar-day .day-status {
  margin-top: 8px;
}

[data-portal="public"] .availability-panel .stack {
  gap: 16px;
}

[data-portal="public"] .availability-panel .slot {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border-radius: 14px;
}

[data-portal="public"] .availability-panel .slot.busy {
  border-color: var(--warning);
  background: var(--warning-soft);
}

[data-portal="public"] .availability-panel .slot .slot-details {
  color: var(--text-muted);
  font-size: 12px;
}

[data-portal="public"] .availability-panel .btn-secondary {
  background: var(--bg-hover);
  border: 1px solid var(--border-default);
}

[data-portal="public"] .availability-panel .calendar-grid {
  background: var(--bg-card-muted);
}

[data-portal="public"] .availability-panel .calendar-day.available {
  background: var(--accent-soft);
}

[data-portal="public"] .availability-panel .calendar-day.pending {
  background: var(--warning-soft);
}

[data-portal="public"] .availability-panel .calendar-day.booked {
  background: rgba(178, 69, 58, 0.08);
}

[data-portal="public"] .availability-panel .calendar-day.closed {
  background: var(--bg-hover);
}

/* -------------------------------------------------------------------------- */
/* Nizam / Al Muslim Books — premium polish for user + booking admin portals   */
/* (NIZAM_FOUNDATION §2.1 calm atmosphere, §2.3 typography, §2.5–2.6 frame)    */
/* -------------------------------------------------------------------------- */

[data-portal="public"] .portal-main {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, var(--bg-base) 42%, var(--bg-base) 100%);
}

[data-portal="admin"] .masjid-admin-main {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, var(--bg-base) 38%, var(--bg-base) 100%);
}

[data-portal="public"] .portal-topbar.public-topbar,
[data-portal="admin"] .booking-admin-topbar {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid var(--border-default);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 8px 28px rgba(15, 23, 42, 0.05);
}

[data-portal="public"] .brand-title {
  font-weight: 700;
  letter-spacing: -0.035em;
}

[data-portal="public"] .brand-subtitle {
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

[data-portal="admin"] .booking-admin-topbar-brand {
  font-weight: 700;
  letter-spacing: -0.03em;
}

[data-portal="public"] .public-hero .hero-card:first-child {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-10) var(--space-8);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

[data-portal="public"] .public-hero .hero-card:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 75% at 50% -30%, rgba(47, 150, 150, 0.11), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

[data-portal="public"] .public-hero .hero-card:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent) 45%, var(--accent-hover));
  opacity: 0.92;
  z-index: 1;
}

[data-portal="public"] .public-hero .hero-card:first-child > * {
  position: relative;
  z-index: 2;
}

[data-portal="public"] .public-hero .hero-card:first-child h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
}

[data-portal="public"] .public-hero .hero-card:first-child .eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 15px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

[data-portal="public"] .public-hero .hero-card:first-child > p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
}

[data-portal="public"] .public-hero .panel {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.22s ease;
}

[data-portal="public"] .public-hero .panel:hover {
  border-color: rgba(47, 150, 150, 0.2);
  box-shadow: var(--shadow-elevated);
}

[data-portal="public"] .public-quick {
  gap: var(--space-6);
}

[data-portal="public"] .public-quick .panel {
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.2s ease;
}

[data-portal="public"] .public-quick .panel:hover {
  border-color: rgba(47, 150, 150, 0.22);
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

[data-portal="public"] .public-nav .nav-btn {
  border-left: none;
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-weight: 600;
  font-size: 13px;
}

[data-portal="public"] .public-nav .nav-btn.active {
  border: 1px solid rgba(47, 150, 150, 0.28);
  box-shadow: 0 1px 3px rgba(47, 150, 150, 0.12);
}

[data-portal="admin"] .masjid-admin-nav.panel .nav-btn {
  border-left: none;
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-weight: 600;
  font-size: 13px;
}

[data-portal="admin"] .masjid-admin-nav.panel .nav-btn.active {
  border: 1px solid rgba(47, 150, 150, 0.28);
  box-shadow: 0 1px 3px rgba(47, 150, 150, 0.12);
}

[data-portal="public"] .tabs,
[data-portal="admin"] .tabs {
  border: 1px solid var(--border-default);
  background: rgba(255, 255, 255, 0.9);
  padding: 5px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-portal="public"] .tab.active,
[data-portal="admin"] .tab.active {
  border-color: rgba(47, 150, 150, 0.35);
  box-shadow: 0 1px 3px rgba(47, 150, 150, 0.12);
  font-weight: 600;
}

[data-portal="public"] .item-card,
[data-portal="admin"] .item-card {
  border-radius: var(--radius-xl);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[data-portal="public"] .item-card:hover,
[data-portal="admin"] .item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 150, 150, 0.28);
  box-shadow: var(--shadow-card);
}

[data-portal="admin"] .masjid-admin-hero .hero-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
}

[data-portal="admin"] .masjid-admin-hero .hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 75% at 50% -30%, rgba(47, 150, 150, 0.1), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

[data-portal="admin"] .masjid-admin-hero .hero-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent) 50%, var(--accent-hover));
  opacity: 0.75;
  z-index: 1;
}

/* Overview second card — no teal cap; quieter surface (less competition with topbar title) */
[data-portal="admin"] .admin-booking-overview-hero .hero-card:nth-child(2)::after,
[data-portal="masjid-admin"] .admin-booking-overview-hero .hero-card:nth-child(2)::after {
  display: none;
}

[data-portal="admin"] .admin-booking-overview-hero .hero-card:nth-child(2)::before,
[data-portal="masjid-admin"] .admin-booking-overview-hero .hero-card:nth-child(2)::before {
  opacity: 0.45;
}

[data-portal="admin"] .masjid-admin-hero .hero-card > *,
[data-portal="masjid-admin"] .masjid-admin-hero .hero-card > * {
  position: relative;
  z-index: 2;
}

[data-portal="admin"] .masjid-admin-hero .eyebrow,
[data-portal="masjid-admin"] .masjid-admin-hero .eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

[data-portal="admin"] .masjid-admin-hero .hero-card h1.page-title-portal {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.85vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--text-ink);
  line-height: 1.25;
}

[data-portal="admin"] .admin-booking-overview-hero,
[data-portal="masjid-admin"] .admin-booking-overview-hero {
  margin-bottom: var(--space-6);
}

[data-portal="admin"] .admin-booking-overview-hero .hero-card,
[data-portal="masjid-admin"] .admin-booking-overview-hero .hero-card {
  padding: var(--space-6) var(--space-8);
}

[data-portal="admin"] .admin-booking-overview-hero .hero-card .muted,
[data-portal="masjid-admin"] .admin-booking-overview-hero .hero-card .muted {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

[data-portal="admin"] .mini-card {
  border-radius: var(--radius-xl);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

[data-portal="admin"] .mini-card:hover {
  border-color: rgba(47, 150, 150, 0.22);
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

[data-portal="public"] .section-title,
[data-portal="admin"] .section-title {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  letter-spacing: -0.02em;
}

[data-portal="admin"] .admin-grid,
[data-portal="masjid-admin"] .booking-console .admin-grid {
  grid-template-columns: minmax(360px, 1.1fr) minmax(520px, 1.9fr);
  align-items: start;
}

[data-portal="admin"] .admin-layout,
[data-portal="masjid-admin"] .booking-console .admin-layout {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(360px, 1.05fr) minmax(540px, 2fr);
}

[data-portal="admin"] .admin-left,
[data-portal="admin"] .admin-right,
[data-portal="masjid-admin"] .booking-console .admin-left,
[data-portal="masjid-admin"] .booking-console .admin-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

[data-portal="admin"] .admin-hero {
  grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 1fr);
  align-items: stretch;
}

[data-portal="admin"] #adminPanel.admin-grid,
[data-portal="masjid-admin"] .booking-console #adminPanel.admin-grid {
  display: grid;
}

[data-portal="admin"] .panel,
[data-portal="masjid-admin"] .booking-console .panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

[data-portal="admin"] .section-title,
[data-portal="masjid-admin"] .booking-console .section-title {
  font-size: var(--text-headline);
}

[data-portal="admin"] .section-title::after {
  width: 48px;
  height: 4px;
  margin-top: 10px;
  background: var(--accent);
  box-shadow: none;
}
[data-portal="masjid-admin"] .booking-console .section-title::after {
  width: 48px;
  height: 4px;
  margin-top: 10px;
  background: var(--accent);
  box-shadow: none;
}

[data-portal="admin"] #adminBookingsPanel,
[data-portal="admin"] .admin-booking-detail-panel {
  border: 1px solid var(--border-default);
  background: var(--bg-card);
}
[data-portal="masjid-admin"] .booking-console #adminBookingsPanel,
[data-portal="masjid-admin"] .booking-console .admin-booking-detail-panel {
  border: 1px solid var(--border);
  background: var(--bg-card);
}

[data-portal="admin"] .admin-booking-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow);
}
[data-portal="masjid-admin"] .booking-console .admin-booking-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
}

[data-portal="admin"] .admin-booking-header,
[data-portal="masjid-admin"] .booking-console .admin-booking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[data-portal="admin"] .admin-booking-meta,
[data-portal="masjid-admin"] .booking-console .admin-booking-meta {
  color: var(--muted);
  font-size: 13px;
}

[data-portal="admin"] .admin-booking-tags,
[data-portal="masjid-admin"] .booking-console .admin-booking-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-portal="admin"] .admin-booking-actions,
[data-portal="masjid-admin"] .booking-console .admin-booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

[data-portal="admin"] .booking-detail-grid,
[data-portal="masjid-admin"] .booking-console .booking-detail-grid {
  display: grid;
  gap: 10px;
}

[data-portal="admin"] .booking-detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-card-muted);
  border: 1px solid var(--border-default);
}
[data-portal="masjid-admin"] .booking-console .booking-detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}

[data-portal="admin"] .booking-detail-row strong,
[data-portal="masjid-admin"] .booking-console .booking-detail-row strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

[data-portal="admin"] .booking-detail-row a,
[data-portal="masjid-admin"] .booking-console .booking-detail-row a {
  word-break: break-all;
}

[data-portal="admin"] .booking-detail-actions,
[data-portal="masjid-admin"] .booking-console .booking-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0 0;
}

[data-portal="admin"] .calendar-grid,
[data-portal="masjid-admin"] .booking-console .calendar-grid {
  padding: 14px;
}

[data-portal="admin"] .calendar-day,
[data-portal="masjid-admin"] .booking-console .calendar-day {
  min-height: 64px;
}

[data-portal="admin"] .slot,
[data-portal="masjid-admin"] .booking-console .slot {
  border-radius: 14px;
}

[data-portal="admin"] .btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(47, 150, 150, 0.35);
}
[data-portal="admin"] .btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  box-shadow: 0 6px 20px rgba(47, 150, 150, 0.4);
}
[data-portal="masjid-admin"] .booking-console .btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 4px 14px rgba(47, 150, 150, 0.35);
}

[data-portal="admin"] .btn-secondary {
  background: var(--bg-card);
  border: 1px solid rgba(47, 150, 150, 0.35);
  color: var(--accent-dark);
  font-weight: 600;
}
[data-portal="admin"] .btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
[data-portal="masjid-admin"] .booking-console .btn-secondary {
  border-style: solid;
}

[data-portal="admin"] .item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}
[data-portal="masjid-admin"] .booking-console .item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
}

[data-portal="admin"] .stack .btn,
[data-portal="masjid-admin"] .booking-console .stack .btn {
  padding: 10px 16px;
}

[data-portal="admin"] .notice,
[data-portal="masjid-admin"] .booking-console .notice {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}

[data-portal="admin"] .masjid-admin-hero .eyebrow {
  color: var(--accent-dark);
}
[data-portal="admin"] .masjid-admin-hero .hero-card h1:not(.page-title-portal),
[data-portal="admin"] .masjid-admin-hero .hero-card h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--text-ink);
}

[data-portal="admin"] .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 500;
}
[data-portal="masjid-admin"] .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 500;
}

[data-portal="admin"] .pill {
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid transparent;
}
[data-portal="admin"] .masjid-admin-hero .pill,
[data-portal="masjid-admin"] .pill {
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid transparent;
}

[data-portal="admin"] .admin-booking-overview-hero .pill,
[data-portal="masjid-admin"] .admin-booking-overview-hero .pill {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid rgba(47, 150, 150, 0.22);
  font-size: 12px;
  font-weight: 600;
}

/* Booking admin (/portal/admin) and full suite (masjid-admin) — flex row like Nizam app-body */
[data-portal="admin"] .masjid-admin-layout,
[data-portal="masjid-admin"] .masjid-admin-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  gap: 0;
  margin-top: 0;
  width: 100%;
}
[data-portal="masjid-admin"] .masjid-admin-layout {
  min-height: calc(100vh - var(--topbar-h));
}

[data-portal="admin"] .booking-admin-topbar,
[data-portal="masjid-admin"] .booking-admin-topbar {
  min-height: var(--topbar-h);
}

[data-portal="admin"] .booking-admin-topbar-brand,
[data-portal="masjid-admin"] .booking-admin-topbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text-ink);
}
[data-portal="admin"] .booking-admin-topbar .btn-outline,
[data-portal="masjid-admin"] .booking-admin-topbar .btn-outline {
  border-color: var(--border-default);
  color: var(--text-secondary);
}
[data-portal="admin"] .booking-admin-topbar .btn-outline:hover,
[data-portal="masjid-admin"] .booking-admin-topbar .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-active-text);
  background: var(--accent-soft);
}

[data-portal="admin"] .booking-admin-topbar-spacer,
[data-portal="masjid-admin"] .booking-admin-topbar-spacer {
  flex: 1;
}

/* Full masjid admin suite — same flush topbar as Nizam Control Center */
[data-portal="masjid-admin"] .admin-topbar.app-topbar,
[data-portal="masjid-admin"] .admin-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--topbar-h);
  padding: 0 var(--main-padding);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  box-shadow: none;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}
[data-portal="masjid-admin"] .admin-topbar::after {
  display: none;
}
[data-portal="masjid-admin"] .admin-topbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  letter-spacing: var(--type-letter-tight, -0.02em);
  color: var(--text-ink);
}
[data-portal="masjid-admin"] .admin-topbar-masjid {
  font-size: 13px;
  color: var(--muted);
  margin-left: 8px;
}
[data-portal="masjid-admin"] .admin-topbar-spacer {
  flex: 1;
}
[data-portal="masjid-admin"] .admin-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}
[data-portal="masjid-admin"] .admin-search-input {
  width: 100%;
  padding: 11px 16px 11px 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-portal="masjid-admin"] .admin-search-input::placeholder {
  color: var(--muted);
}
[data-portal="masjid-admin"] .admin-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
[data-portal="masjid-admin"] .admin-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  padding: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
}
[data-portal="masjid-admin"] .admin-search-results[aria-hidden="true"] {
  display: none;
}
[data-portal="masjid-admin"] .admin-search-result-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
}
[data-portal="masjid-admin"] .admin-search-result-item:hover {
  background: var(--accent-soft);
}
[data-portal="masjid-admin"] .admin-theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
[data-portal="masjid-admin"] .admin-theme-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
[data-portal="masjid-admin"] .admin-topbar-user {
  font-size: 13px;
  color: var(--muted);
}
[data-portal="masjid-admin"] .btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
}
[data-portal="masjid-admin"] .btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--border);
}
[data-portal="masjid-admin"] .admin-topbar-signout {
  margin-left: 8px;
}
[data-portal="masjid-admin"] .admin-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  margin-bottom: var(--space-4);
  font-size: 13px;
  color: var(--muted);
}
[data-portal="masjid-admin"] .masjid-admin-main .app-main-inner > .admin-breadcrumbs:first-child {
  padding-top: 0;
}
[data-portal="masjid-admin"] .admin-breadcrumbs a {
  color: var(--accent);
  text-decoration: none;
}
[data-portal="masjid-admin"] .admin-breadcrumbs a:hover {
  text-decoration: underline;
}
[data-portal="masjid-admin"] .admin-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 90;
}
[data-portal="masjid-admin"] .admin-drawer-overlay[aria-hidden="false"] {
  display: block;
}
[data-portal="masjid-admin"] .admin-drawer-toggle {
  display: none;
}
[data-portal="masjid-admin"] .admin-sidebar-collapse-btn {
  display: none;
}
[data-portal="masjid-admin"] .admin-drawer-toggle,
[data-portal="masjid-admin"] .admin-sidebar-collapse-btn {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
}
[data-portal="masjid-admin"] .admin-sidebar,
[data-portal="masjid-admin"] .masjid-admin-nav.admin-sidebar {
  padding: var(--space-6) var(--space-5);
  border: none;
  border-right: 1px solid var(--border-default);
  border-radius: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, #f9fcfd 0%, var(--bg-overlay) 48%, #f4f9fa 100%);
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: var(--sidebar-w);
  flex-shrink: 0;
  align-self: stretch;
}
[data-portal="masjid-admin"] .masjid-admin-nav.admin-sidebar::before {
  display: none;
}
[data-portal="masjid-admin"] .masjid-admin-nav.admin-sidebar > * {
  position: relative;
  z-index: 1;
}
[data-portal="masjid-admin"] .admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
[data-portal="masjid-admin"] .admin-sidebar-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
[data-portal="masjid-admin"] .nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-2xl);
  padding: 11px 16px 11px 22px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-portal="masjid-admin"] .nav-btn.active {
  padding-left: 22px;
  border: 1px solid rgba(47, 150, 150, 0.2);
  box-shadow: 0 2px 8px rgba(47, 150, 150, 0.1);
}
[data-portal="masjid-admin"] .nav-btn.active::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
[data-portal="masjid-admin"] .nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.85;
}
[data-portal="masjid-admin"] .nav-btn.active .nav-icon,
[data-portal="masjid-admin"] .nav-btn.active .nav-label {
  color: var(--accent-active-text);
  opacity: 1;
}
[data-portal="masjid-admin"] .nav-label {
  flex: 1;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14px;
}
[data-portal="masjid-admin"] .nav-btn-link {
  text-decoration: none;
  color: inherit;
}
[data-portal="masjid-admin"] .nav-btn-link:hover {
  text-decoration: none;
}
/* Assurance chips in hero — soft neutral pills like Nizam Control Center */
[data-portal="masjid-admin"] .hero-card .pill {
  background: var(--tag-bg);
  color: var(--tag-text);
  border: 1px solid var(--border);
  font-weight: 600;
}
[data-portal="masjid-admin"] .masjid-admin-main {
  flex: 1;
  min-width: 0;
  min-height: calc(100vh - var(--topbar-h));
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, var(--bg-base) 38%, var(--bg-base) 100%);
}
[data-portal="masjid-admin"] .masjid-admin-main .app-main-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: clamp(36px, 5vh, 56px);
  padding-bottom: clamp(44px, 6vh, 80px);
  padding-left: clamp(16px, 2.4vw, 40px);
  padding-right: clamp(16px, 2.4vw, 40px);
}
[data-portal="masjid-admin"] .overview-quick-card,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .overview-quick-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-align: left;
}
[data-portal="masjid-admin"] .overview-quick-card:hover,
[data-portal="masjid-admin"] .overview-quick-link:hover,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .overview-quick-card:hover,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .overview-quick-link:hover {
  transform: translateY(-2px);
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-modal) !important;
}
[data-portal="masjid-admin"] .overview-quick-icon,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .overview-quick-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}
[data-portal="masjid-admin"] .admin-page-header-actions {
  margin-left: auto;
}
/* Needs attention — amber bar ( §2.5.A ) */
[data-portal="masjid-admin"] .masjid-admin-attention.booking-admin-attention,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .masjid-admin-attention.booking-admin-attention {
  display: flex;
  align-items: stretch;
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
[data-portal="masjid-admin"] .masjid-admin-attention .booking-admin-attention-bar,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .masjid-admin-attention .booking-admin-attention-bar {
  width: 5px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--warning) 0%, #c2410c 100%);
}
[data-portal="masjid-admin"] .masjid-admin-attention .booking-admin-attention-inner,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .masjid-admin-attention .booking-admin-attention-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  padding: 18px 20px;
}
[data-portal="masjid-admin"] .masjid-admin-attention .overview-needs-list,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .masjid-admin-attention .overview-needs-list {
  flex: 1;
  min-width: 200px;
  margin: 0;
  padding-left: 1.2em;
}
/* Legacy overview-needs fallback */
[data-portal="masjid-admin"] .overview-needs-attention,
[data-portal="masjid-admin"] .needs-attention-panel {
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--warning) !important;
  background: var(--warning-soft) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
[data-portal="masjid-admin"] .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
[data-portal="masjid-admin"] .page-title-wrap {
  flex: 1;
  min-width: 0;
}
[data-portal="masjid-admin"] .masjid-overview-page-header.page-header {
  margin-bottom: var(--space-6);
}
[data-portal="masjid-admin"] .dashboard-hero .hero,
[data-portal="masjid-admin"] .hero.masjid-admin-hero,
[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite .hero.masjid-admin-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
[data-portal="masjid-admin"] .page-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  color: var(--text-ink);
}
[data-portal="masjid-admin"] .page-description {
  font-size: var(--type-size-sm, 0.875rem);
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
}
[data-portal="masjid-admin"] .dashboard-quick-actions.overview-quick-actions {
  margin-top: var(--space-2);
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
  z-index: 9999;
  transition: left 0.2s ease;
}
.skip-link:focus {
  left: 12px;
}

[data-portal="admin"] .masjid-admin-nav,
[data-portal="masjid-admin"] .masjid-admin-nav {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-portal="admin"] .masjid-admin-nav.panel {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-sidebar);
  margin-right: 0;
}

[data-portal="admin"] .nav-btn,
[data-portal="masjid-admin"] .nav-btn {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 14px 10px 12px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted);
  display: block;
  transition: background 150ms ease-out, color 150ms ease-out;
  border-left: 4px solid transparent;
}

[data-portal="admin"] .nav-btn:hover,
[data-portal="masjid-admin"] .nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

[data-portal="admin"] .nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent-active-text);
  border-left-color: var(--accent);
}
[data-portal="masjid-admin"] .nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent-active-text);
  border-left-color: var(--accent);
}

/* Pill rail — user + booking admin only (Nizam flush sidebar, soft highlight) */
[data-portal="public"] #publicNav .nav-btn,
[data-portal="admin"] #adminNav .nav-btn {
  border-left: none !important;
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-weight: 600;
  font-size: 13px;
}
[data-portal="public"] #publicNav .nav-btn.active,
[data-portal="admin"] #adminNav .nav-btn.active {
  background: var(--accent-soft) !important;
  border: 1px solid transparent !important;
  box-shadow: none;
  color: var(--accent-dark);
}

[data-portal="admin"] .admin-section,
[data-portal="masjid-admin"] .admin-section {
  margin-bottom: 28px;
}
[data-portal="masjid-admin"] #masjidAdminLoginPanel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-modal);
}
[data-portal="masjid-admin"] .tabs {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 5px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
[data-portal="masjid-admin"] .tab {
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  color: var(--text-muted);
  background: transparent;
}
[data-portal="masjid-admin"] .tab:hover:not(.active) {
  background: rgba(47, 150, 150, 0.08);
  color: var(--text-primary);
}
[data-portal="masjid-admin"] .tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: rgba(47, 150, 150, 0.35);
  box-shadow: none;
}

/* —— Community portal: volunteer (member) —— */
[data-app="community"] .cv-volunteer-screen {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 48px;
}
[data-app="community"] .cv-vol-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 28px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(47, 150, 150, 0.16), rgba(20, 92, 69, 0.07));
  border: 1px solid rgba(47, 150, 150, 0.24);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}
[data-app="community"] .cv-vol-hero__glow {
  pointer-events: none;
  position: absolute;
  inset: -40% -20% auto auto;
  width: min(420px, 70vw);
  height: min(420px, 70vw);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(47, 150, 150, 0.35), transparent 62%);
  opacity: 0.85;
}
[data-app="community"] .cv-vol-hero__content {
  position: relative;
  z-index: 1;
}
body[data-theme="dark"] [data-app="community"] .cv-vol-hero {
  background: linear-gradient(145deg, rgba(47, 150, 150, 0.12), rgba(15, 23, 42, 0.5));
  border-color: rgba(47, 150, 150, 0.28);
}
body[data-theme="dark"] [data-app="community"] .cv-vol-hero__glow {
  opacity: 0.45;
}
[data-app="community"] .cv-vol-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 8px;
}
[data-app="community"] .cv-vol-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--text);
}
[data-app="community"] .cv-vol-lead {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52rem;
}
[data-app="community"] .cv-vol-guest-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
[data-app="community"] .cv-vol-guest {
  border-radius: var(--radius-xl);
}
[data-app="community"] .cv-vol-guest-title {
  font-family: var(--font-display);
  margin: 0 0 8px;
}
[data-app="community"] .cv-vol-guest-actions {
  margin-top: 16px;
}
[data-app="community"] .cv-vol-member {
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-app="community"] .cv-vol-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 4px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--bg-muted) 88%, transparent);
  border: 1px solid var(--border-soft);
}
[data-app="community"] .cv-vol-tab {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
[data-app="community"] .cv-vol-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
}
[data-app="community"] .cv-vol-tab.active {
  color: var(--accent-dark);
  background: var(--bg-raised);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
[data-app="community"] .cv-vol-panel {
  animation: cvVolFade 0.35s ease;
}
@keyframes cvVolFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[data-app="community"] .cv-vol-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.5rem;
}
[data-app="community"] .cv-vol-h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}
[data-app="community"] .cv-vol-h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 10px;
}
[data-app="community"] .cv-vol-hint {
  margin: 0 0 16px;
}
[data-app="community"] .cv-vol-opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
[data-app="community"] .cv-vol-opp-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
[data-app="community"] .cv-vol-opp-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 150, 150, 0.28);
  box-shadow: var(--shadow-modal);
}
[data-app="community"] .cv-vol-opp-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--text);
}
[data-app="community"] .cv-vol-opp-card__meta {
  font-size: 12px;
  color: var(--text-secondary);
}
[data-app="community"] .cv-vol-opp-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}
[data-app="community"] .cv-vol-opp-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
[data-app="community"] .cv-vol-opp-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-app="community"] .cv-vol-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: var(--accent-dark);
  border: 1px solid rgba(47, 150, 150, 0.2);
}
[data-app="community"] .cv-vol-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
[data-app="community"] .cv-vol-metric {
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 96%, var(--accent-soft)), var(--bg-raised));
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}
[data-app="community"] .cv-vol-metric__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
[data-app="community"] .cv-vol-metric__value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--text);
}
[data-app="community"] .cv-vol-subsection {
  margin-bottom: 28px;
}
[data-app="community"] .cv-vol-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-app="community"] .cv-vol-mini-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 14px 16px;
  background: var(--bg-raised);
}
[data-app="community"] .cv-vol-mini-card strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
[data-app="community"] .cv-vol-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
[data-app="community"] .cv-vol-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
[data-app="community"] .cv-vol-table-wrap th,
[data-app="community"] .cv-vol-table-wrap td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
[data-app="community"] .cv-vol-table-wrap th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-muted) 88%, transparent);
}
[data-app="community"] .cv-vol-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
[data-app="community"] .cv-vol-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-raised));
  border: 1px solid rgba(47, 150, 150, 0.22);
  font-size: 13px;
  font-weight: 600;
}
[data-app="community"] .cv-vol-badge-pill span {
  font-size: 18px;
}
[data-app="community"] .community-plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
[data-app="community"] .community-plan-card--volunteer {
  background: linear-gradient(135deg, rgba(47, 150, 150, 0.08), rgba(20, 92, 69, 0.04));
  border-color: rgba(47, 150, 150, 0.22);
}

/* —— Volunteer suite v2 (command center) —— */
.volunteer-suite-v2 {
  border-radius: var(--radius-lg);
  padding: 0 4px 8px;
}
.volunteer-suite-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px 20px 8px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(47, 150, 150, 0.09), rgba(15, 23, 42, 0.02));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .volunteer-suite-hero {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}
.volunteer-suite-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 700;
  margin: 0 0 6px;
}
.volunteer-suite-lead {
  max-width: 52ch;
  margin: 0 0 12px;
  line-height: 1.55;
}
.volunteer-faith-strip {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display), Georgia, serif;
}
.volunteer-faith-quote {
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text);
}
.volunteer-faith-cite {
  font-size: 12px;
  color: var(--text-muted);
  font-style: normal;
}
.volunteer-hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.volunteer-metric-tile {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.volunteer-metric-tile strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}
.volunteer-metric-tile--accent {
  border-color: rgba(47, 150, 150, 0.35);
  background: var(--accent-soft);
}
.volunteer-suite-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.volunteer-subnav-btn {
  border: 1px solid transparent;
  background: var(--bg-muted);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.volunteer-subnav-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.volunteer-subnav-btn.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: rgba(47, 150, 150, 0.35);
}
.volunteer-suite-panel {
  animation: volFade 0.2s ease;
}
@keyframes volFade {
  from { opacity: 0.6; }
  to { opacity: 1; }
}
.volunteer-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 800px) {
  .volunteer-two-col {
    grid-template-columns: 1fr 1fr;
  }
}
.volunteer-panel-tight .section-title {
  margin-bottom: 8px;
}
.volunteer-gap-list,
.volunteer-hint-list {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.volunteer-lb-list {
  margin: 0;
  padding-left: 1.2rem;
}
.volunteer-lb-list li {
  margin-bottom: 6px;
}
.volunteer-search-dd {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 40;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
}
.volunteer-search-dd button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.volunteer-search-dd button:hover {
  background: var(--bg-hover);
}
.volunteer-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.volunteer-roster-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--bg-raised);
}
.volunteer-opportunity-form textarea {
  min-height: 72px;
}
[data-portal="masjid-admin"] .volunteer-opportunity-wizard.panel {
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  padding: 20px 20px 8px;
  background: var(--surface-1, var(--bg-raised));
  box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
}
[data-portal="masjid-admin"] .volunteer-wizard-progress {
  margin-bottom: 16px;
}
[data-portal="masjid-admin"] .volunteer-wizard-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2, #e8e8e8);
  overflow: hidden;
}
[data-portal="masjid-admin"] .volunteer-wizard-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #0d6efd), var(--accent-2, #6610f2));
  transition: width 0.25s ease;
}
[data-portal="masjid-admin"] .volunteer-wizard-step-meta {
  font-size: 12px;
  color: var(--muted-fg, #666);
  margin-top: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
[data-portal="masjid-admin"] .volunteer-wizard-heading {
  font-size: 1.25rem;
  font-weight: 650;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
[data-portal="masjid-admin"] .volunteer-wizard-subhead {
  margin-top: 4px !important;
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-fg, #666);
}
[data-portal="masjid-admin"] .volunteer-wizard-details {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  border: 1px dashed var(--border, #ddd);
  background: var(--surface-2, rgba(0, 0, 0, 0.02));
}
[data-portal="masjid-admin"] .volunteer-wizard-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
[data-portal="masjid-admin"] .volunteer-categories-fieldset {
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px 18px;
  margin: 0;
  background: color-mix(in srgb, var(--bg-muted) 42%, var(--bg-raised));
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}
[data-portal="masjid-admin"] .volunteer-categories-fieldset legend {
  font-family: var(--font-serif-nizam, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px;
  line-height: 1.4;
}
[data-portal="masjid-admin"] .volunteer-cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 12px;
  align-content: flex-start;
  min-width: 0;
}
[data-portal="masjid-admin"] .vol-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif-nizam, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 12.5px;
  line-height: 1.35;
  padding: 10px 14px 10px 12px;
  min-height: 40px;
  max-width: 100%;
  min-width: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 95%, transparent);
  background: var(--bg-raised, #fff);
  cursor: pointer;
  user-select: none;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
  box-sizing: border-box;
}
[data-portal="masjid-admin"] .vol-cat-pill input {
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent, #2f9696);
}
[data-portal="masjid-admin"] .volunteer-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2, #f7f7f7);
}
[data-portal="masjid-admin"] .volunteer-description-editor {
  min-height: 200px;
}
[data-portal="masjid-admin"] .field-label-like {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-fg, #555);
  margin-bottom: 4px;
}
[data-portal="masjid-admin"] .volunteer-review-grid {
  display: grid;
  gap: 14px;
}
[data-portal="masjid-admin"] .volunteer-review-section {
  border: 1px solid var(--border, #e8e8e8);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  background: var(--bg-raised, #fff);
}
[data-portal="masjid-admin"] .volunteer-review-h {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-fg, #666);
}
[data-portal="masjid-admin"] .volunteer-review-dl {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
}
[data-portal="masjid-admin"] .volunteer-review-dl dt {
  color: var(--muted-fg, #666);
  font-weight: 500;
}
[data-portal="masjid-admin"] .volunteer-review-dl dd {
  margin: 0;
}
[data-portal="masjid-admin"] .volunteer-schedule-panel {
  margin-top: 12px;
}
[data-portal="masjid-admin"] .volunteer-cover-upload-card {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin: 12px 0 8px;
  padding: 14px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border, #e0e0e0);
  background: var(--bg-raised, #fff);
}
[data-portal="masjid-admin"] .volunteer-cover-preview {
  flex: 0 0 160px;
  width: 160px;
  height: 100px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--surface-2, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #ddd);
}
[data-portal="masjid-admin"] .volunteer-cover-upload-actions {
  flex: 1 1 240px;
  min-width: 200px;
}
[data-portal="masjid-admin"] .volunteer-wizard-panel {
  display: none;
}
[data-portal="masjid-admin"] .volunteer-wizard-panel.is-active {
  display: block;
  animation: volunteerWizardFade 0.2s ease;
}
@keyframes volunteerWizardFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-portal="masjid-admin"] .volunteer-wizard-lead {
  margin: 0 0 12px;
  font-size: 13px;
}
[data-portal="masjid-admin"] .volunteer-wizard-review {
  font-size: 14px;
  line-height: 1.5;
  max-height: 420px;
  overflow: auto;
}
[data-portal="masjid-admin"] .volunteer-wizard-review dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 8px 16px;
}
[data-portal="masjid-admin"] .volunteer-wizard-review dt {
  margin: 0;
  color: var(--muted-fg, #666);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-portal="masjid-admin"] .volunteer-wizard-review dd {
  margin: 0 0 10px;
}
[data-portal="masjid-admin"] .field.grow {
  flex: 1 1 220px;
  min-width: 180px;
}
.volunteer-gamify-card {
  border-style: dashed;
}

[data-portal="masjid-admin"] .builder-row {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-portal="masjid-admin"] .builder-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-modal);
}
[data-portal="masjid-admin"] #announcementsEditorView {
  overflow: visible;
  position: relative;
  z-index: 1;
}
[data-portal="masjid-admin"] .announcements-two-col {
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible;
  align-items: start !important;
}
@media (min-width: 1100px) {
  [data-portal="masjid-admin"] .announcements-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  }
}

/* Events suite — master/detail: list stays visible, editor below */
[data-portal="masjid-admin"] .events-suite {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
[data-portal="masjid-admin"] .events-suite-header {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
[data-portal="masjid-admin"] .events-suite-lede {
  font-size: 14px;
  line-height: 1.55;
  max-width: 52rem;
  margin: 0;
}
[data-portal="masjid-admin"] .events-suite-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
[data-portal="masjid-admin"] .events-suite-panel-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
[data-portal="masjid-admin"] .events-suite-count-line {
  font-size: 13px;
  margin: 6px 0 0;
}

/* Programs & opportunities — hero + catalog + editor + wizard (visual system: Manrope, airy spacing, no overflow) */
[data-portal="masjid-admin"] .admin-section.volunteer-opps-suite {
  gap: 28px;
}
[data-portal="masjid-admin"] .volunteer-opps-suite {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 100%;
}
[data-portal="masjid-admin"] .volunteer-opps-hero {
  margin: 0;
  padding: 28px 28px 30px;
  border-radius: var(--radius-2xl);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent-soft) 34%, var(--bg-raised)) 0%,
    var(--bg-raised) 48%,
    color-mix(in srgb, var(--bg-muted) 50%, var(--bg-raised)) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 20px 48px rgba(15, 23, 42, 0.07);
  position: relative;
  overflow: hidden;
}
[data-portal="masjid-admin"] .volunteer-opps-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent) 50%, var(--accent-hover));
  opacity: 0.95;
}
[data-portal="masjid-admin"] header.admin-page-header.volunteer-opps-hero {
  margin: 0;
  padding: 28px 28px 30px;
  border: none;
}
[data-portal="masjid-admin"] .volunteer-opps-hero .admin-page-kicker {
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
[data-portal="masjid-admin"] .volunteer-opps-hero .admin-page-title {
  font-family: var(--font-sans);
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 14px;
}
[data-portal="masjid-admin"] .volunteer-opps-hero .admin-page-lead {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  max-width: min(62ch, 100%);
  margin: 0;
  color: var(--text-muted);
}
[data-portal="masjid-admin"] .volunteer-opps-hero .admin-page-kicker,
[data-portal="masjid-admin"] .volunteer-opps-hero .admin-page-title,
[data-portal="masjid-admin"] .volunteer-opps-hero .admin-page-lead {
  position: relative;
  z-index: 1;
}
body[data-portal="masjid-admin"][data-theme="dark"] .volunteer-opps-hero {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent-soft) 16%, var(--bg-raised)) 0%,
    var(--bg-raised) 60%
  );
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.32);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}
[data-portal="masjid-admin"] .volunteer-opps-catalog {
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: var(--radius-xl);
  background: var(--bg-raised);
  padding: 24px 26px 22px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.05),
    0 22px 50px rgba(15, 23, 42, 0.06);
}
[data-portal="masjid-admin"] .volunteer-opps-catalog-head {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
[data-portal="masjid-admin"] .volunteer-opps-catalog-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--text-ink);
  line-height: 1.3;
}
[data-portal="masjid-admin"] .volunteer-opps-catalog-lede {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  max-width: min(56ch, 100%);
}
[data-portal="masjid-admin"] .volunteer-opps-toolbar {
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: flex-end;
  margin-bottom: 18px;
}
[data-portal="masjid-admin"] .volunteer-opps-toolbar .field label {
  font-family: var(--font-sans);
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
[data-portal="masjid-admin"] .volunteer-opps-toolbar .field-input,
[data-portal="masjid-admin"] .volunteer-opps-toolbar select {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
}
[data-portal="masjid-admin"] .volunteer-opps-select-field {
  flex: 1 1 320px;
  min-width: min(100%, 220px);
}
[data-portal="masjid-admin"] .volunteer-opps-toolbar .btn {
  min-height: 44px;
  padding-left: 18px;
  padding-right: 18px;
}
[data-portal="masjid-admin"] .volunteer-opps-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--bg-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
[data-portal="masjid-admin"] .volunteer-opps-table {
  margin: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
[data-portal="masjid-admin"] .volunteer-opps-table thead th {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom-width: 2px;
  padding: 14px 16px;
  vertical-align: middle;
  text-align: left;
  background: color-mix(in srgb, var(--bg-muted) 45%, var(--bg-raised));
}
[data-portal="masjid-admin"] .volunteer-opps-table tbody td {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 16px 16px;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
[data-portal="masjid-admin"] .volunteer-opps-table tbody tr:last-child td {
  border-bottom: none;
}
[data-portal="masjid-admin"] .volunteer-opps-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}
[data-portal="masjid-admin"] .volunteer-opps-table th:nth-child(1),
[data-portal="masjid-admin"] .volunteer-opps-table td:nth-child(1) {
  width: 26%;
}
[data-portal="masjid-admin"] .volunteer-opps-table th:nth-child(2),
[data-portal="masjid-admin"] .volunteer-opps-table td:nth-child(2) {
  width: 12%;
}
[data-portal="masjid-admin"] .volunteer-opps-table th:nth-child(3),
[data-portal="masjid-admin"] .volunteer-opps-table td:nth-child(3) {
  width: 22%;
}
[data-portal="masjid-admin"] .volunteer-opps-table th:nth-child(4),
[data-portal="masjid-admin"] .volunteer-opps-table td:nth-child(4) {
  width: 18%;
}
[data-portal="masjid-admin"] .volunteer-opps-table th:nth-child(5),
[data-portal="masjid-admin"] .volunteer-opps-table td:nth-child(5) {
  width: 10%;
}
[data-portal="masjid-admin"] .volunteer-opps-table th:nth-child(6),
[data-portal="masjid-admin"] .volunteer-opps-table td:nth-child(6) {
  width: 12%;
  text-align: right;
  white-space: nowrap;
}
[data-portal="masjid-admin"] .volunteer-opps-editor-intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-muted) 30%, var(--bg-raised)), var(--bg-raised));
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05);
}
[data-portal="masjid-admin"] .volunteer-opps-editor-intro-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-portal="masjid-admin"] .volunteer-opps-editor-title {
  font-family: var(--font-sans);
  font-size: clamp(1.22rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text-ink);
  line-height: 1.25;
}
[data-portal="masjid-admin"] .volunteer-opps-editor-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  box-shadow: 0 1px 2px rgba(47, 150, 150, 0.25);
}
[data-portal="masjid-admin"] .volunteer-opps-editor-lede {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  max-width: min(68ch, 100%);
}
[data-portal="masjid-admin"] .volunteer-opps-new-row {
  gap: 14px 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
[data-portal="masjid-admin"] .volunteer-opps-new-hint {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-opportunity-wizard.panel {
  padding: 26px 28px 22px;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 18px 44px rgba(15, 23, 42, 0.06);
  background: var(--bg-raised);
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-heading {
  font-family: var(--font-serif-nizam, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-form.stack {
  gap: 20px;
  min-width: 0;
}
[data-portal="masjid-admin"] .volunteer-opps-suite #volunteerForm {
  font-family: var(--font-serif-nizam, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
}
[data-portal="masjid-admin"] .volunteer-opps-suite #volunteerForm input,
[data-portal="masjid-admin"] .volunteer-opps-suite #volunteerForm textarea,
[data-portal="masjid-admin"] .volunteer-opps-suite #volunteerForm select,
[data-portal="masjid-admin"] .volunteer-opps-suite #volunteerForm button {
  font-family: inherit;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel .field > label,
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel label:not(.vol-cat-pill):not(.row) {
  display: block;
  margin-bottom: 8px;
  line-height: 1.45;
  font-family: var(--font-serif-nizam, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel .field.grow {
  min-width: 0;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel .row {
  gap: 16px 20px;
  align-items: flex-start;
  min-width: 0;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel input[type='text'],
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel input[type='email'],
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel input[type='tel'],
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel input[type='number'],
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel input[type='date'],
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel input[type='datetime-local'],
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel select {
  min-height: 44px;
  padding: 10px 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel textarea {
  min-height: 88px;
  padding: 12px 14px;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  resize: vertical;
  overflow-wrap: anywhere;
  word-break: break-word;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-lead {
  margin: 0 0 18px;
  font-family: var(--font-serif-nizam, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-panel code,
[data-portal="masjid-admin"] .volunteer-opps-suite .vol-comm-page-lead code {
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  font-size: 0.92em;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-rich-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .rich-editor {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(480px, 55vh);
  word-break: break-word;
  overflow-wrap: anywhere;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  gap: 12px;
}
[data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-wizard-progress {
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  [data-portal="masjid-admin"] .volunteer-opps-table {
    table-layout: auto;
  }
  [data-portal="masjid-admin"] .volunteer-opps-table th:nth-child(n),
  [data-portal="masjid-admin"] .volunteer-opps-table td:nth-child(n) {
    width: auto;
    min-width: 7rem;
  }
  [data-portal="masjid-admin"] .volunteer-opps-hero,
  [data-portal="masjid-admin"] header.admin-page-header.volunteer-opps-hero {
    padding: 22px 18px 24px;
  }
  [data-portal="masjid-admin"] .volunteer-opps-catalog {
    padding: 18px 16px 16px;
  }
  [data-portal="masjid-admin"] .volunteer-opps-editor-intro {
    padding: 18px 16px 18px;
  }
  [data-portal="masjid-admin"] .volunteer-opps-suite .volunteer-opportunity-wizard.panel {
    padding: 20px 16px 18px;
  }
}

/* Volunteer wizard — Story editor (comfortable typing, clear chrome) */
[data-portal="masjid-admin"] .volunteer-story-editor-shell {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--bg-raised);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
}
[data-portal="masjid-admin"] .vol-story-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-muted) 55%, var(--bg-raised));
}
[data-portal="masjid-admin"] .vol-story-tool-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-portal="masjid-admin"] .vol-story-tool-btn:hover {
  border-color: rgba(47, 150, 150, 0.35);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
[data-portal="masjid-admin"] .vol-story-toolbar-sep {
  width: 1px;
  height: 22px;
  background: color-mix(in srgb, var(--border) 75%, transparent);
  margin: 0 4px;
}
[data-portal="masjid-admin"] .volunteer-story-field .volunteer-story-editor-shell .rich-editor.volunteer-description-editor {
  min-height: min(360px, 52vh);
  max-height: min(560px, 62vh);
  border: none;
  border-radius: 0;
  padding: 18px 20px 22px;
  background: var(--bg-raised);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;
}
[data-portal="masjid-admin"] #volunteerDescriptionEditor[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
[data-portal="masjid-admin"] .volunteer-story-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* Google Forms–style application questions */
[data-portal="masjid-admin"] .vol-gf-builder-header {
  margin-bottom: 8px;
}
[data-portal="masjid-admin"] .vol-gf-questions {
  counter-reset: vol-gf-q;
  gap: 16px;
  max-width: min(720px, 100%);
}
[data-portal="masjid-admin"] .vol-gf-question {
  position: relative;
  padding: 18px 20px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: linear-gradient(180deg, var(--bg-raised) 0%, color-mix(in srgb, var(--bg-muted) 22%, var(--bg-raised)) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 10px 28px rgba(15, 23, 42, 0.05);
}
[data-portal="masjid-admin"] .vol-gf-question:hover {
  border-color: rgba(47, 150, 150, 0.22);
}
[data-portal="masjid-admin"] .vol-gf-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
[data-portal="masjid-admin"] .vol-gf-q-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid rgba(47, 150, 150, 0.22);
}
[data-portal="masjid-admin"] .vol-gf-questions .vol-gf-question {
  counter-increment: vol-gf-q;
}
[data-portal="masjid-admin"] .vol-gf-questions .vol-gf-q-index::before {
  content: counter(vol-gf-q);
}
[data-portal="masjid-admin"] .vol-gf-question-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
[data-portal="masjid-admin"] .vol-gf-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
[data-portal="masjid-admin"] .vol-gf-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
[data-portal="masjid-admin"] .vol-gf-q-main .vol-gf-question-input {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg-muted) 35%, transparent);
  padding: 12px 14px;
}
[data-portal="masjid-admin"] .vol-gf-q-main .vol-gf-question-input:focus {
  background: var(--bg-raised);
  border-color: rgba(47, 150, 150, 0.35);
}
[data-portal="masjid-admin"] .vol-gf-section-wrap {
  margin-top: 4px;
}
[data-portal="masjid-admin"] .vol-gf-type-select {
  font-weight: 500;
  border-radius: var(--radius-md);
}
[data-portal="masjid-admin"] .vol-gf-type-explainer {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
[data-portal="masjid-admin"] .vol-gf-options-wrap {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(47, 150, 150, 0.35);
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--bg-raised));
}
[data-portal="masjid-admin"] .vol-gf-choices-hint {
  margin: 0 0 8px;
  font-size: 12px;
}
[data-portal="masjid-admin"] .vol-gf-details {
  margin-top: 12px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-muted) 40%, transparent);
  padding: 0 12px;
}
[data-portal="masjid-admin"] .vol-gf-details summary {
  cursor: pointer;
  padding: 10px 4px;
  font-weight: 600;
  font-size: 13px;
  list-style: none;
}
[data-portal="masjid-admin"] .vol-gf-details summary::-webkit-details-marker {
  display: none;
}
[data-portal="masjid-admin"] .vol-gf-details[open] {
  padding-bottom: 10px;
}

[data-portal="masjid-admin"] .vol-gf-hint-block {
  margin: 0 0 12px;
  max-width: min(68ch, 100%);
  line-height: 1.55;
}
[data-portal="masjid-admin"] .vol-consent-stack {
  gap: 14px;
  max-width: min(720px, 100%);
}
[data-portal="masjid-admin"] .vol-consent-card {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--bg-raised);
}
[data-portal="masjid-admin"] .vol-consent-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(47, 150, 150, 0.2);
}

/* Open roles — scannable cards for many roles */
[data-portal="masjid-admin"] .volunteer-open-roles-list {
  gap: 14px;
}
[data-portal="masjid-admin"] .vol-role-card {
  padding: 16px 18px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--bg-raised);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}
[data-portal="masjid-admin"] .vol-role-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
[data-portal="masjid-admin"] .vol-role-card-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(47, 150, 150, 0.2);
}
[data-portal="masjid-admin"] .vol-role-card-row {
  gap: 14px 16px;
  align-items: flex-start;
}
[data-portal="masjid-admin"] .vol-roles-hint,
[data-portal="masjid-admin"] .vol-roles-intro .volunteer-wizard-lead {
  max-width: min(72ch, 100%);
  line-height: 1.6;
}

/* Communications step — structured cards (flex only when visible; see .volunteer-wizard-panel.is-active) */
[data-portal="masjid-admin"] .volunteer-wizard-panel.vol-comm-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-portal="masjid-admin"] .vol-comm-page-head {
  margin-bottom: 8px;
}
[data-portal="masjid-admin"] .vol-comm-page-title {
  font-family: var(--font-serif-nizam, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  color: var(--text-ink);
}
[data-portal="masjid-admin"] .vol-comm-page-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  max-width: min(72ch, 100%);
}
[data-portal="masjid-admin"] .vol-comm-page-lead code {
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-muted) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
[data-portal="masjid-admin"] .vol-comm-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  [data-portal="masjid-admin"] .vol-comm-grid {
    grid-template-columns: 1fr 1fr;
  }
  [data-portal="masjid-admin"] .vol-comm-card-wide {
    grid-column: 1 / -1;
  }
}
[data-portal="masjid-admin"] .vol-comm-card {
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-muted) 28%, var(--bg-raised)), var(--bg-raised));
  padding: 18px 20px 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
[data-portal="masjid-admin"] .vol-comm-card-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-ink);
}
[data-portal="masjid-admin"] .vol-comm-card-lede {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.45;
}
[data-portal="masjid-admin"] .vol-comm-textarea {
  min-height: 100px;
  line-height: 1.55;
}
[data-portal="masjid-admin"] .vol-comm-toggles,
[data-portal="masjid-admin"] .vol-comm-check {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
[data-portal="masjid-admin"] .vol-comm-check input {
  margin-top: 2px;
}

[data-portal="masjid-admin"] .events-suite-list-head {
  margin-bottom: 18px;
}
[data-portal="masjid-admin"] .events-suite-list-title-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
[data-portal="masjid-admin"] .events-suite-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}
@media (max-width: 900px) {
  [data-portal="masjid-admin"] .events-suite-filters {
    grid-template-columns: 1fr 1fr;
  }
  [data-portal="masjid-admin"] .events-suite-filter-search {
    grid-column: 1 / -1;
  }
}
[data-portal="masjid-admin"] .events-suite #eventListTable thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom-width: 2px;
}
[data-portal="masjid-admin"] .events-suite #eventListTable tbody tr:hover td {
  background: rgba(47, 150, 150, 0.04);
}
[data-portal="masjid-admin"] .events-suite-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-portal="masjid-admin"] .events-suite-list {
  order: 0;
}
[data-portal="masjid-admin"] .events-suite-editor {
  order: 1;
}
[data-portal="masjid-admin"] .events-suite-ops {
  order: 2;
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 1000px) {
  [data-portal="masjid-admin"] .events-suite-ops {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
[data-portal="masjid-admin"] .events-suite--editing .events-suite-list {
  box-shadow: 0 0 0 1px rgba(47, 150, 150, 0.25);
}
[data-portal="masjid-admin"] .event-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 0 18px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
[data-portal="masjid-admin"] .event-editor-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 20px;
  min-width: 0;
  flex: 1;
}
[data-portal="masjid-admin"] .event-editor-back-btn {
  flex-shrink: 0;
  margin-top: 2px;
}
[data-portal="masjid-admin"] .event-editor-title-block {
  min-width: 0;
}
[data-portal="masjid-admin"] .event-editor-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.2;
  word-break: break-word;
}
[data-portal="masjid-admin"] .event-editor-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
[data-portal="masjid-admin"] .event-editor-saved {
  font-size: 12px;
}
[data-portal="masjid-admin"] .event-editor-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
[data-portal="masjid-admin"] .event-editor-more {
  position: relative;
}
[data-portal="masjid-admin"] .event-editor-more-summary {
  cursor: pointer;
  list-style: none;
}
[data-portal="masjid-admin"] .event-editor-more-summary::-webkit-details-marker {
  display: none;
}
[data-portal="masjid-admin"] .event-editor-more[open] .event-editor-more-summary {
  border-color: var(--accent);
  color: var(--accent-dark);
}
[data-portal="masjid-admin"] .event-editor-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  padding: 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-portal="masjid-admin"] .event-editor-more-item {
  justify-content: flex-start !important;
  text-align: left;
  width: 100%;
}
[data-portal="masjid-admin"] .event-editor-more-danger {
  color: #b91c1c !important;
}
[data-portal="masjid-admin"] .event-editor-more-danger:hover {
  background: rgba(185, 28, 28, 0.08) !important;
}
[data-portal="masjid-admin"] .event-table-row.selected td {
  background: rgba(47, 150, 150, 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
}
@media (min-width: 900px) {
  [data-portal="masjid-admin"] .events-suite-editor .event-layout {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important;
  }
}

[data-portal="masjid-admin"] .announcements-editor-left {
  min-width: 0;
}
[data-portal="masjid-admin"] .announcements-settings-right {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  position: relative;
  z-index: 4;
}
[data-portal="masjid-admin"] .announcements-settings-right.panel {
  overflow: visible;
}
[data-portal="masjid-admin"] .announcements-settings-right select,
[data-portal="masjid-admin"] .announcements-settings-right input {
  max-width: 100%;
}
[data-portal="masjid-admin"] .ann-block-editor {
  padding: 14px 16px;
  overflow: visible;
}
[data-portal="masjid-admin"] .ann-block-editor select.block-type {
  max-width: 100%;
}
[data-portal="masjid-admin"] .announcement-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
[data-portal="masjid-admin"] .announcement-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
[data-portal="masjid-admin"] .announcement-preview-panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
}
[data-portal="masjid-admin"] .announcement-preview-newsletter {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--bg-base);
  min-height: 120px;
}
[data-portal="masjid-admin"] .announcement-preview-newsletter.ann-preview-loading {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}
[data-portal="masjid-admin"] #announcementsTemplateBar.ann-template-bar-pulse {
  animation: ann-template-bar-pulse 1.1s ease-out 2;
  border-radius: var(--radius-lg);
}
@keyframes ann-template-bar-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 150, 150, 0);
  }
  35% {
    box-shadow: 0 0 0 4px rgba(47, 150, 150, 0.22);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 150, 150, 0);
  }
}
[data-portal="masjid-admin"] .announcements-template-bar {
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 28%, var(--bg-raised)) 0%,
    var(--bg-raised) 100%
  );
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
[data-portal="masjid-admin"] .announcements-template-bar .muted {
  font-weight: 600;
  letter-spacing: 0.02em;
}
[data-portal="masjid-admin"] .ann-preview-tab {
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}
[data-portal="masjid-admin"] .ann-preview-tab.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: rgba(47, 150, 150, 0.4);
}
[data-portal="masjid-admin"] .ann-block-body {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
}
[data-portal="masjid-admin"] .ann-block-editor.ann-collapsed .ann-block-body {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
[data-portal="masjid-admin"] .announcement-preview-phone {
  max-width: 375px;
  margin: 0 auto;
  border: 12px solid #1e293b;
  border-radius: 28px;
  overflow: hidden;
  background: #0f172a;
}
[data-portal="masjid-admin"] .announcement-preview-phone .announcement-preview-newsletter {
  border-radius: 0;
  border: none;
  min-height: 200px;
  font-size: 15px;
}
[data-portal="masjid-admin"] .ann-drag-handle {
  cursor: grab;
  user-select: none;
}
[data-portal="masjid-admin"] .ann-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  z-index: 30;
}
[data-portal="masjid-admin"] .ann-more-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-sans);
}
[data-portal="masjid-admin"] .ann-more-item:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
[data-portal="masjid-admin"] .ann-more-item.ann-more-danger {
  color: var(--danger);
}
[data-portal="masjid-admin"] .ann-more-item.ann-more-danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
[data-portal="masjid-admin"] .ann-block-editor.ann-collapsed .ann-block-body {
  display: none;
}
[data-portal="masjid-admin"] .ann-table-editor {
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
[data-portal="masjid-admin"] .ann-block-editor .ann-block-toolbar {
  margin-bottom: 4px;
}
[data-portal="masjid-admin"] .notice {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
[data-portal="masjid-admin"] .insight-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #f7fcfc 55%, #f1f9f8 100%);
  border: 1px solid rgba(230, 237, 243, 0.95);
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 16px 40px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  padding: 22px 22px 20px;
}
[data-portal="masjid-admin"] .insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(45, 212, 191, 0.65), var(--accent-dark));
  opacity: 0.92;
}
[data-portal="masjid-admin"] .insight-card:hover {
  border-color: rgba(47, 150, 150, 0.35);
  box-shadow:
    0 4px 20px rgba(47, 150, 150, 0.12),
    0 20px 50px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
[data-portal="masjid-admin"] .insight-label {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
[data-portal="masjid-admin"] .insight-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent-dark);
  margin-top: 10px;
  line-height: 1.1;
}
[data-portal="masjid-admin"] .insight-meta {
  color: var(--text-muted);
  font-size: 13px;
}
[data-portal="masjid-admin"] .insight-grid {
  gap: 22px;
}

[data-portal="admin"] .mini-card {
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
}
[data-portal="masjid-admin"] .mini-card {
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-default);
  background: linear-gradient(180deg, #ffffff 0%, #fafdfd 100%);
  border-radius: var(--radius-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
[data-portal="masjid-admin"] .mini-card:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f5fbfb 100%);
  border-color: rgba(47, 150, 150, 0.28);
  box-shadow: var(--shadow-modal);
  transform: translateY(-1px);
}

[data-portal="admin"] .mini-card h3,
[data-portal="masjid-admin"] .mini-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

@media (min-width: 1100px) {
  [data-portal="public"] .public-main {
    grid-template-columns: minmax(320px, 1fr) minmax(520px, 2.1fr);
    align-items: start;
  }
}

/* —— Responsive: booking admin (chips nav) vs masjid admin (off-canvas drawer) —— */
@media (max-width: 980px) {
  [data-portal="admin"] .masjid-admin-layout {
    flex-direction: column;
  }
  [data-portal="admin"] .masjid-admin-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: 0;
  }
  [data-portal="admin"] .nav-btn {
    flex: 1 1 140px;
  }
  [data-portal="admin"] .booking-admin-topbar {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--main-padding);
    min-height: 0;
  }
  [data-portal="admin"] .booking-admin-topbar-brand {
    font-size: clamp(1.05rem, 4vw, 1.35rem);
    min-width: 0;
  }
  [data-portal="admin"] .booking-admin-topbar-spacer {
    display: none;
  }
  [data-portal="admin"] .portal-topbar-search-wrap {
    order: 4;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }

  [data-portal="masjid-admin"] .masjid-admin-layout {
    flex-direction: column;
    min-height: 0;
  }
  [data-portal="masjid-admin"] .masjid-admin-nav.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(280px, 85vw);
    margin: 0;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 95;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-y: auto;
    box-shadow: none;
  }
  body[data-portal="masjid-admin"].admin-drawer-open .masjid-admin-nav.admin-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(16, 38, 28, 0.2);
  }
  body[data-portal="masjid-admin"].admin-drawer-open .admin-drawer-overlay {
    display: block;
  }
  [data-portal="masjid-admin"] .admin-drawer-toggle {
    display: flex !important;
  }
  [data-portal="masjid-admin"] .admin-sidebar-collapse-btn {
    display: none !important;
  }
  [data-portal="masjid-admin"] .admin-topbar {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--main-padding);
    min-height: 0;
  }
  [data-portal="masjid-admin"] .admin-topbar-brand {
    font-size: clamp(1.05rem, 4vw, 1.35rem);
    min-width: 0;
  }
  [data-portal="masjid-admin"] .admin-topbar-masjid {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-portal="masjid-admin"] .admin-search-wrap {
    order: 6;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
  }
  [data-portal="masjid-admin"] .admin-topbar-spacer {
    display: none;
  }
  body[data-portal="masjid-admin"].admin-sidebar-collapsed .masjid-admin-nav.admin-sidebar {
    width: min(280px, 85vw);
    transform: translateX(-100%);
  }
  body[data-portal="masjid-admin"].admin-drawer-open.admin-sidebar-collapsed .masjid-admin-nav.admin-sidebar {
    transform: translateX(0);
  }
}

@media (min-width: 981px) {
  [data-portal="masjid-admin"] .admin-sidebar-collapse-btn {
    display: flex !important;
  }
  body[data-portal="masjid-admin"].admin-sidebar-collapsed .masjid-admin-layout {
    gap: 0;
  }
  body[data-portal="masjid-admin"].admin-sidebar-collapsed .masjid-admin-nav.admin-sidebar {
    width: 56px;
    padding: var(--space-3) var(--space-2);
    overflow: hidden;
  }
  body[data-portal="masjid-admin"].admin-sidebar-collapsed .nav-label,
  body[data-portal="masjid-admin"].admin-sidebar-collapsed .admin-sidebar-header {
    display: none;
  }
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.calendar-header .month-label {
  font-weight: 700;
  font-size: 16px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-card-muted);
  width: 100%;
}

.calendar-day {
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bg-card);
  text-align: center;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.calendar-day:hover:not(.disabled) {
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

.calendar-day.disabled {
  opacity: 0.45;
  cursor: default;
}

.calendar-day.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.calendar-day.available {
  background: var(--accent-soft);
  border-color: var(--border-soft);
}

.calendar-day.pending {
  background: var(--warning-soft);
  border-color: var(--border-soft);
}

.calendar-day.booked {
  background: rgba(178, 69, 58, 0.06);
  border-color: var(--border-soft);
}

.calendar-day.closed {
  background: var(--bg-hover);
  border-color: var(--border-soft);
}

.calendar-day .day-number {
  font-weight: 700;
  font-size: 15px;
}

.calendar-day .day-status {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.legend-available {
  background: rgba(47, 143, 106, 0.65);
}

.legend-pending {
  background: rgba(185, 144, 60, 0.65);
}

.legend-booked {
  background: rgba(196, 81, 79, 0.65);
}

.legend-closed {
  background: rgba(31, 42, 35, 0.35);
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.item-meta {
  font-size: 12px;
  color: var(--muted);
}

.slot-details {
  font-size: 12px;
  color: var(--muted);
}

.terms-content,
.rich-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.6;
}

.terms-content {
  max-height: 220px;
  overflow: auto;
}

.rich-editor {
  min-height: 140px;
}

.rich-editor:focus {
  outline: 2px solid rgba(47, 150, 150, 0.35);
  background: #fff;
}

.timeline {
  display: grid;
  gap: 12px;
}

.timeline-item {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
}

.timeline-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.timeline-body {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

@media (max-width: 720px) {
  .shell {
    padding: 22px 16px 48px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero-card {
    padding: 26px;
  }
  .panel {
    padding: 18px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  .section-title {
    font-size: 17px;
  }
  .tabs {
    width: 100%;
  }
  .tab {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
  }
  .calendar-header {
    gap: 8px;
    flex-wrap: wrap;
  }
  .calendar-grid {
    gap: 6px;
    padding: 8px;
  }
  .calendar-day {
    padding: 10px 6px;
    min-height: 64px;
  }
  .calendar-day .day-number {
    font-size: 14px;
  }
  .calendar-day .day-status {
    font-size: 10px;
  }
  .slot {
    flex-direction: column;
    align-items: flex-start;
  }
  .panel-header {
    align-items: flex-start;
  }
  .panel-header .row {
    width: 100%;
    justify-content: space-between;
  }
  [data-portal="public"] .availability-panel {
    padding: 18px;
  }
  [data-portal="public"] .public-hero {
    grid-template-columns: 1fr;
  }
  [data-portal="public"] .public-section {
    position: static;
  }
  [data-portal="public"] .public-main {
    grid-template-columns: 1fr;
  }
  [data-portal="public"] .availability-panel .calendar-grid {
    width: 100%;
  }
  [data-portal="public"] .portal-topbar-search-wrap[aria-hidden="true"] {
    display: none;
  }
  [data-portal="public"] .update-card,
  [data-portal="public"] .booking-card {
    border-radius: 16px;
  }
  [data-portal="admin"] .admin-grid {
    grid-template-columns: 1fr;
  }
}

.media-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.85);
}

.media-thumb {
  width: 100%;
  height: 110px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border-default);
}

.media-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.audit-row {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-raised);
}

.audit-row strong {
  display: block;
  margin-bottom: 4px;
}

.builder-row {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
}

.builder-row .row {
  flex-wrap: wrap;
}

/* Shared overrides – keep Nizam tokens */
.booking-detail-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

[data-portal="public"] .availability-panel .slot,
[data-portal="admin"] .slot,
[data-portal="masjid-admin"] .booking-console .slot {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

[data-portal="public"] .availability-panel .slot.busy {
  border-color: var(--warning);
  background: var(--warning-soft);
}

.slot-header {
  align-items: center;
  gap: 16px;
}

.slot-time strong {
  font-size: 16px;
  font-weight: 700;
}

.slot-details {
  color: var(--text-muted);
  font-size: 12px;
}

.portal-layout {
  gap: var(--space-8);
}

.booking-card {
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

.timeline {
  background: var(--bg-card-muted);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.suite-frame {
  width: 100%;
  min-height: 72vh;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

[data-portal="public"] .availability-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

[data-portal="public"] .availability-panel .slot .btn {
  align-self: stretch;
  border-radius: 14px;
}

[data-portal="public"] .availability-panel .slot .slot-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-weight: 500;
  color: var(--text-secondary);
}

[data-portal="public"] .availability-panel .slot .slot-details span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid transparent;
  color: var(--accent-active-text);
}

.update-card {
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

[data-portal="admin"] .admin-booking-card,
[data-portal="masjid-admin"] .booking-console .admin-booking-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

[data-portal="admin"] .admin-booking-detail-panel,
[data-portal="masjid-admin"] .booking-console .admin-booking-detail-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow);
}

/* ==========================================================================
   Masjid booking admin — full Nizam / Al Muslim Books operator system
   (Cormorant display, Manrope UI, teal #2F9696, calm canvas, premium chrome)
   ========================================================================== */

[data-portal="admin"] .booking-admin-outer {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

[data-portal="admin"] .booking-admin-auth {
  margin: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 48px);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(47, 150, 150, 0.14);
  box-shadow: var(--shadow-elevated);
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

[data-portal="admin"] .booking-admin-auth .auth-media-overlay {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.58) 0%,
    rgba(15, 23, 42, 0.32) 50%,
    rgba(26, 107, 107, 0.28) 100%
  );
}

[data-portal="admin"] .booking-admin-auth .auth-media h1 {
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  letter-spacing: -0.03em;
}

[data-portal="admin"] .booking-admin-auth .auth-lead {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

[data-portal="admin"] .booking-admin-auth .auth-kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231, 246, 245, 0.95);
  font-weight: 700;
}

[data-portal="admin"] .booking-admin-auth .auth-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

[data-portal="admin"] .booking-admin-auth .auth-trust-line {
  height: 1px;
  margin: 22px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
}

[data-portal="admin"] .booking-admin-auth .auth-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafcfd 100%);
}

[data-portal="admin"] #adminContent.booking-admin-shell,
[data-portal="masjid-admin"] #masjidAdminContent.booking-admin-shell {
  margin: 0;
  max-width: none;
}

[data-portal="admin"] .booking-admin-topbar,
[data-portal="masjid-admin"] .booking-admin-topbar {
  padding-left: clamp(16px, 3vw, 36px);
  padding-right: clamp(16px, 3vw, 36px);
}

[data-portal="admin"] .booking-admin-topbar-inner,
[data-portal="masjid-admin"] .booking-admin-topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--topbar-h);
}

[data-portal="admin"] .booking-admin-brand-block,
[data-portal="masjid-admin"] .booking-admin-brand-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

[data-portal="admin"] .booking-admin-topbar-tagline,
[data-portal="masjid-admin"] .booking-admin-topbar-tagline {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  font-weight: 500;
}

[data-portal="admin"] .booking-admin-topbar-actions,
[data-portal="masjid-admin"] .booking-admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

[data-portal="admin"] #adminContent .booking-admin-topbar,
[data-portal="admin"] .booking-admin-topbar,
[data-portal="masjid-admin"] #masjidAdminContent .booking-admin-topbar,
[data-portal="masjid-admin"] .booking-admin-topbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(230, 237, 243, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 10px 32px rgba(15, 23, 42, 0.05);
}

[data-portal="admin"] .booking-admin-topbar-brand,
[data-portal="masjid-admin"] .booking-admin-topbar-brand {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.85vw, 1.48rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-ink);
  line-height: 1.15;
}

[data-portal="admin"] .booking-admin-layout.app-body,
[data-portal="masjid-admin"] .booking-admin-layout.app-body {
  flex: 1;
  min-height: 0;
}

/* Nizam §2.5.A: flush left rail, --bg-overlay, right border only — not a floating card */
[data-portal="admin"] .booking-admin-sidebar.masjid-admin-nav,
[data-portal="masjid-admin"] .booking-admin-sidebar.masjid-admin-nav {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border-default);
  background: linear-gradient(180deg, #f9fcfd 0%, var(--bg-overlay) 48%, #f4f9fa 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.7);
  padding: var(--space-6) var(--space-5);
  align-self: stretch;
}
/* Standalone masjid admin: tighter rail so labels stay readable without extra dead space */
[data-portal="masjid-admin"] .booking-admin-sidebar.masjid-admin-nav {
  padding: var(--space-5) var(--space-3) var(--space-4);
}

[data-portal="admin"] #adminNav .nav-btn,
[data-portal="masjid-admin"] #masjidAdminNav .nav-btn {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 11px 16px 11px 22px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
[data-portal="masjid-admin"] #masjidAdminNav .nav-btn {
  padding: 9px 12px 9px 18px;
  font-size: 13px;
}

[data-portal="admin"] #adminNav .nav-btn.active,
[data-portal="masjid-admin"] #masjidAdminNav .nav-btn.active {
  padding-left: 22px;
  border: 1px solid rgba(47, 150, 150, 0.2) !important;
  box-shadow: 0 2px 8px rgba(47, 150, 150, 0.1);
}
[data-portal="masjid-admin"] #masjidAdminNav .nav-btn.active {
  padding-left: 18px;
}

[data-portal="admin"] #adminNav .nav-btn.active::before,
[data-portal="masjid-admin"] #masjidAdminNav .nav-btn.active::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
[data-portal="masjid-admin"] #masjidAdminNav .nav-btn.active::before {
  left: 7px;
  height: 20px;
}

[data-portal="admin"] .booking-admin-nav-head,
[data-portal="masjid-admin"] .booking-admin-nav-head {
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-default);
}
[data-portal="masjid-admin"] .booking-admin-nav-head {
  padding-bottom: 10px;
  margin-bottom: 8px;
}

[data-portal="admin"] .booking-admin-nav-eyebrow,
[data-portal="masjid-admin"] .booking-admin-nav-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}

[data-portal="admin"] .booking-admin-nav-title,
[data-portal="masjid-admin"] .booking-admin-nav-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--text-ink);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 4px;
}
[data-portal="masjid-admin"] .booking-admin-nav-title {
  font-size: 1.14rem;
}

[data-portal="admin"] .booking-admin-main,
[data-portal="masjid-admin"] .booking-admin-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  background:
    radial-gradient(ellipse 120% 70% at 50% -20%, rgba(47, 150, 150, 0.045), transparent 52%),
    var(--bg-base);
  min-height: calc(100vh - var(--topbar-h));
}

[data-portal="admin"] .booking-admin-main-inner,
[data-portal="masjid-admin"] .booking-admin-main-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: clamp(52px, 9vh, 104px);
  padding-bottom: clamp(48px, 7vh, 88px);
  padding-left: clamp(28px, 4vw, 64px);
  /* Slight extra right gutter so cards never sit flush against the viewport edge */
  padding-right: calc(clamp(28px, 4vw, 64px) + 12px);
}

[data-portal="admin"] .admin-page-header,
[data-portal="masjid-admin"] .admin-page-header {
  margin: 4px 0 clamp(22px, 3vw, 32px);
  padding: 4px 0 22px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  max-width: none;
}

[data-portal="admin"] .booking-admin-breadcrumb,
[data-portal="masjid-admin"] .booking-admin-breadcrumb {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* Overview: breadcrumb removed — keep title vertical rhythm (was ~12px label + 10px gap) */
[data-portal="admin"] .booking-admin-overview-header {
  padding-top: 28px;
}
[data-portal="admin"] .booking-admin-overview-header .admin-page-title {
  margin-top: 0;
}

[data-portal="admin"] .booking-admin-attention,
[data-portal="masjid-admin"] .booking-admin-attention {
  display: flex;
  align-items: stretch;
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

[data-portal="admin"] .booking-admin-attention-bar,
[data-portal="masjid-admin"] .booking-admin-attention-bar {
  width: 5px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--warning) 0%, #c2410c 100%);
}

[data-portal="admin"] .booking-admin-attention-inner,
[data-portal="masjid-admin"] .booking-admin-attention-inner {
  flex: 1;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

[data-portal="admin"] .booking-admin-attention-label,
[data-portal="masjid-admin"] .booking-admin-attention-label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 0;
  width: 100%;
}

[data-portal="admin"] .booking-admin-attention-copy,
[data-portal="masjid-admin"] .booking-admin-attention-copy {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

[data-portal="admin"] .booking-admin-attention-cta,
[data-portal="masjid-admin"] .booking-admin-attention-cta {
  margin-left: auto;
}

[data-portal="admin"] .booking-admin-search-wrap,
[data-portal="masjid-admin"] .booking-admin-search-wrap {
  position: relative;
}

[data-portal="admin"] .booking-admin-search-wrap .portal-topbar-search,
[data-portal="masjid-admin"] .booking-admin-search-wrap .portal-topbar-search {
  padding-right: 76px;
}

[data-portal="admin"] .booking-admin-search-kbd,
[data-portal="masjid-admin"] .booking-admin-search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  pointer-events: none;
  opacity: 0.55;
}

[data-portal="admin"] .booking-admin-search-kbd kbd,
[data-portal="masjid-admin"] .booking-admin-search-kbd kbd {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-hover);
  color: var(--text-muted);
  line-height: 1;
}

[data-portal="admin"] .booking-admin-nizam-hero,
[data-portal="masjid-admin"] .booking-admin-nizam-hero {
  margin-bottom: var(--space-6);
}

[data-portal="admin"] .booking-admin-nizam-hero .hero-card,
[data-portal="masjid-admin"] .booking-admin-nizam-hero .hero-card {
  border-radius: var(--radius-2xl);
  padding: 28px 32px;
  border: 1px solid rgba(230, 237, 243, 0.98);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 44px rgba(15, 23, 42, 0.07);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

[data-portal="admin"] .booking-admin-nizam-hero .hero-card:hover,
[data-portal="masjid-admin"] .booking-admin-nizam-hero .hero-card:hover {
  border-color: rgba(47, 150, 150, 0.14);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.05),
    0 22px 52px rgba(15, 23, 42, 0.09);
}

[data-portal="admin"] .booking-admin-section > .stack > .panel,
[data-portal="admin"] .booking-admin-section > .panel {
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(230, 237, 243, 0.95);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 36px rgba(15, 23, 42, 0.05);
  padding: 28px 32px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-portal="admin"] .booking-admin-section > .stack > .panel:hover,
[data-portal="admin"] .booking-admin-section > .panel:hover {
  border-color: rgba(47, 150, 150, 0.12);
}

[data-portal="admin"] .booking-admin-section .item-card {
  border-radius: var(--radius-xl);
  padding: 18px 22px;
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

[data-portal="admin"] .booking-admin-section .item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 150, 150, 0.22);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 12px 28px rgba(47, 150, 150, 0.08);
}

[data-portal="admin"] .booking-admin-section .panel .section-title::after {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
}

[data-portal="admin"] .booking-admin-nizam-hero .booking-admin-hero-title,
[data-portal="masjid-admin"] .booking-admin-nizam-hero .booking-admin-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--text-ink);
}

[data-portal="admin"] .admin-page-kicker,
[data-portal="masjid-admin"] .admin-page-kicker {
  display: inline-block;
  width: fit-content;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 700;
  margin: 0 0 12px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
}

[data-portal="admin"] .admin-page-title,
[data-portal="masjid-admin"] .admin-page-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.6vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.16;
  margin: 0 0 12px;
  color: var(--text-ink);
}

[data-portal="admin"] h2.admin-page-title,
[data-portal="masjid-admin"] h2.admin-page-title {
  font-size: clamp(1.42rem, 2.2vw, 1.82rem);
}

[data-portal="admin"] .admin-page-lead,
[data-portal="masjid-admin"] .admin-page-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: var(--text-secondary);
  max-width: min(72ch, 100%);
}

[data-portal="admin"] .booking-admin-stat-grid,
[data-portal="masjid-admin"] .booking-admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 4px;
}

[data-portal="admin"] .booking-admin-stat-card,
[data-portal="masjid-admin"] .booking-admin-stat-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}

[data-portal="admin"] .booking-admin-stat-card::before,
[data-portal="masjid-admin"] .booking-admin-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent) 55%, var(--accent-hover));
  opacity: 0.9;
}

[data-portal="admin"] .booking-admin-stat-card--accent,
[data-portal="masjid-admin"] .booking-admin-stat-card--accent {
  background: linear-gradient(145deg, rgba(231, 246, 245, 0.55) 0%, var(--bg-card) 100%);
}

[data-portal="admin"] .booking-admin-stat-label,
[data-portal="masjid-admin"] .booking-admin-stat-label {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0 0 14px;
}

[data-portal="admin"] .booking-admin-stat-value,
[data-portal="masjid-admin"] .booking-admin-stat-value {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--text-ink);
  letter-spacing: -0.02em;
  line-height: 1.38;
  font-variant-numeric: tabular-nums;
}

[data-portal="admin"] .booking-admin-stat-value--sm,
[data-portal="masjid-admin"] .booking-admin-stat-value--sm {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: normal;
}

[data-portal="admin"] .booking-admin-cta-row,
[data-portal="masjid-admin"] .booking-admin-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 4px;
}

[data-portal="masjid-admin"] .booking-admin-topbar .admin-theme-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
[data-portal="masjid-admin"] .booking-admin-topbar .admin-theme-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
[data-portal="masjid-admin"] .booking-admin-topbar .admin-topbar-user {
  font-size: 13px;
  color: var(--text-muted);
  max-width: min(220px, 28vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-portal="masjid-admin"] .booking-admin-search-wrap .admin-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  z-index: 100;
}

[data-portal="admin"] .booking-admin-toolbar-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

[data-portal="admin"] .booking-admin-stack {
  gap: 20px;
}

[data-portal="admin"] .booking-admin-subpanel .section-title {
  margin-top: 0;
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-header .month-label {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-ink);
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-header .btn {
  border-radius: var(--radius-full);
  font-weight: 600;
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-grid {
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--bg-card-muted) 0%, var(--bg-overlay) 100%);
  border: 1px solid rgba(230, 237, 243, 0.95);
  gap: 10px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-grid > .calendar-day.disabled:has(.day-number) {
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: auto;
  padding: 10px 6px 14px;
  opacity: 1;
  cursor: default;
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-grid > .calendar-day.disabled:has(.day-number) .day-number {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-grid > .calendar-day.disabled:has(.day-number) .day-status {
  display: none;
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-day:not(.disabled) {
  min-height: 72px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-day.is-today:not(.disabled) {
  border-color: rgba(47, 150, 150, 0.4);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

[data-portal="admin"] .booking-admin-calendar-panel .calendar-day.selected:not(.disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(47, 150, 150, 0.25);
}

[data-portal="admin"] .booking-admin-suite-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

[data-portal="admin"] .booking-admin-suite-frame {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(47, 150, 150, 0.12);
  background: var(--bg-overlay);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  min-height: 320px;
}

[data-portal="admin"] .booking-admin-suite-frame #masjidAdminSuite {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-portal="admin"] .booking-admin-suite-frame .masjid-admin-layout {
  display: flex;
  min-height: 480px;
}
[data-portal="admin"] .booking-admin-suite-frame .masjid-admin-nav.booking-admin-sidebar {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border-default);
  background: linear-gradient(180deg, #f9fcfd 0%, var(--bg-overlay) 48%, #f4f9fa 100%);
  padding: var(--space-5) var(--space-4);
  width: 220px;
  flex-shrink: 0;
}
[data-portal="admin"] .booking-admin-suite-frame .masjid-admin-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-5);
}
[data-portal="admin"] .booking-admin-suite-frame .masjid-admin-main .app-main-inner {
  padding: 0;
  max-width: none;
}

[data-portal="admin"] .booking-admin-suite-section .panel {
  border-radius: var(--radius-lg);
}

[data-portal="admin"] .admin-grid.admin-layout {
  margin-top: 8px;
}

[data-portal="admin"] .booking-admin-section .panel .section-title:first-child {
  margin-top: 0;
}

@media (max-width: 900px) {
  [data-portal="admin"] .booking-admin-main-inner,
  [data-portal="masjid-admin"] .booking-admin-main-inner {
    padding-top: clamp(40px, 8vh, 72px);
    padding-left: 16px;
    padding-right: calc(16px + 10px);
  }

  [data-portal="admin"] .booking-admin-auth {
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* —— Community portal — Nizam marketing shell (mk-shell atmosphere + foundation tokens) —— */
body[data-portal="public"][data-app="community"] {
  background-color: var(--bg-base);
  overflow-x: hidden;
}
body[data-portal="public"][data-theme="dark"][data-app="community"] {
  background-color: var(--bg-base);
}
[data-app="community"] {
  --cp-paper: var(--bg-raised);
  --cp-cream: var(--bg-muted);
  --cp-ink: var(--text);
  --cp-muted: var(--text-muted);
  --cp-hairline: var(--border);
  --cp-teal-deep: var(--accent-dark);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] {
  --cp-paper: var(--bg-raised);
  --cp-cream: var(--bg-muted);
  --cp-ink: var(--text);
  --cp-muted: var(--text-muted);
  --cp-hairline: var(--border);
  --cp-teal-deep: var(--accent-dark);
}
[data-app="community"] .community-shell.mk-shell {
  min-height: 100vh;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-base);
}
/* Shell atmosphere — match marketing landing (subtle grid + teal wash) */
[data-app="community"] .community-shell.mk-shell::before {
  opacity: 0.65;
}
[data-app="community"] .community-shell.mk-shell::after {
  opacity: 0.45;
  background-size: 64px 64px;
}
[data-app="community"] .community-app {
  background: transparent;
  position: relative;
  z-index: 1;
}
body[data-portal="public"][data-app="community"] .portal-layout.community-layout {
  flex-direction: column;
}
/* Community topbar — match marketing .mk-topbar (full-width, minimal; brand site, not toolbar) */
[data-app="community"] .mk-topbar.community-topbar {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  position: sticky;
  top: 0;
  z-index: 40;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .mk-topbar.community-topbar {
  background: color-mix(in srgb, var(--bg-overlay) 90%, transparent);
  border-bottom-color: var(--border);
}
[data-app="community"] .mk-brand-cluster {
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(280px, 38vw);
}
[data-app="community"] .community-mk-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}
[data-app="community"] .community-mk-actions.mk-top-actions .btn {
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-weight: 600;
  font-size: 0.9375rem;
}
[data-app="community"] .community-icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 80%, transparent);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
[data-app="community"] .community-icon-btn:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}
[data-app="community"] .community-icon-btn__glyph {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
[data-app="community"] .community-mk-actions.mk-top-actions .btn-primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-color: var(--accent-dark);
  box-shadow: 0 2px 10px rgba(47, 150, 150, 0.28);
}
[data-app="community"] .community-mk-actions.mk-top-actions .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(47, 150, 150, 0.38);
}
[data-app="community"] .mk-brand-cluster a.mk-brand {
  text-decoration: none;
}
[data-app="community"] .community-home-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
[data-app="community"] .community-home-features-wrap {
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-8) var(--space-6) var(--space-10);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 18px 48px rgba(28, 33, 31, 0.06);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .community-home-features-wrap {
  background: color-mix(in srgb, var(--bg-overlay) 92%, transparent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
[data-app="community"] .community-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--space-6);
  position: relative;
  z-index: 1;
}
[data-app="community"] .community-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent-soft) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
[data-app="community"] .cp-home-panels .cp-lift-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
[data-app="community"] .cp-home-panels .cp-lift-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(28, 33, 31, 0.1);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .cp-home-panels .cp-lift-card:hover {
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.35);
}
[data-app="community"] .community-mk-nav.mk-nav {
  flex: 1 1 auto;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding: 0 0 0 var(--space-8);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-app="community"] .community-mk-nav.mk-nav::-webkit-scrollbar {
  display: none;
}
[data-app="community"] .community-mk-nav .nav-btn.mk-nav-link {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
[data-app="community"] .community-mk-nav .nav-btn.mk-nav-link:hover {
  color: var(--text);
  background: var(--bg-hover);
}
[data-app="community"] .community-mk-nav .nav-btn.mk-nav-link:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
[data-app="community"] .community-mk-nav .mk-nav-link.active {
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-weight: 600;
}
[data-app="community"] #publicContent[data-auth="guest"] [data-auth-nav="member"] {
  display: none !important;
}
[data-app="community"] .community-masjid-strip {
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-raised) 45%, transparent);
}
[data-app="community"] .community-masjid-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-6);
  box-sizing: border-box;
}
[data-app="community"] .community-masjid-strip-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
[data-app="community"] .community-masjid-field--strip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  text-align: left;
}
[data-app="community"] .community-masjid-field--strip .community-masjid-label {
  flex-shrink: 0;
  margin: 0;
}
[data-app="community"] .community-masjid-field--strip .community-masjid-select-wrap {
  flex: 1;
  min-width: 0;
  max-width: 420px;
}
[data-app="community"] .community-masjid-field--strip .community-masjid-select {
  border-radius: var(--radius-md);
  padding: 8px 36px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
[data-app="community"] .community-theme-btn-compact {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
[data-app="community"] .community-theme-btn-compact:hover {
  background: var(--bg-hover);
  color: var(--text);
}
[data-app="community"] .community-header-email {
  font-size: 0.75rem;
  max-width: 160px;
}
[data-app="community"] .cp-brand--lux {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
[data-app="community"] .cp-brand-mark {
  width: 3px;
  align-self: stretch;
  min-height: 36px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 45%, var(--accent-gold) 100%);
  flex-shrink: 0;
}
[data-app="community"] .cp-brand--lux .brand-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--accent);
}
[data-app="community"] .cp-brand--lux .brand-subtitle {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}
[data-app="community"] .community-masjid-label {
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cp-muted);
  font-weight: 700;
}
[data-app="community"] .community-masjid-select-wrap {
  position: relative;
  width: 100%;
  max-width: none;
}
[data-app="community"] .community-masjid-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--cp-muted);
  opacity: 0.55;
  pointer-events: none;
}
[data-app="community"] .community-masjid-select {
  max-width: 100%;
  width: 100%;
  padding: 11px 40px 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--cp-hairline);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 18px rgba(28, 33, 31, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
[data-app="community"] .community-masjid-select:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--cp-hairline));
}
[data-app="community"] .community-masjid-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
[data-app="community"] .community-mk-actions .cp-actions--lux,
[data-app="community"] .community-mk-actions .mk-top-actions {
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-end;
  margin-bottom: 0;
  flex-shrink: 0;
}
[data-app="community"] .cp-btn-ghost-lux {
  border-radius: 999px;
  border: 1px solid var(--cp-hairline);
  background: rgba(255, 255, 255, 0.65);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--cp-ink);
}
[data-app="community"] .cp-btn-ghost-lux:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--cp-hairline));
}
[data-app="community"] .cp-btn-pill {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  border: none;
}
[data-app="community"] .cp-topbar-actions {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
[data-app="community"] .cp-header-email {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--cp-muted);
}
[data-app="community"] .cp-btn-gradient {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(47, 150, 150, 0.32);
  font-weight: 600;
}
[data-app="community"] .cp-btn-gradient:hover {
  box-shadow: 0 8px 26px rgba(47, 150, 150, 0.4);
}
[data-app="community"] .cp-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cp-hairline);
  background: rgba(255, 255, 255, 0.65);
}
[data-app="community"] .cp-icon-btn:hover {
  background: #fff;
  border-color: color-mix(in srgb, var(--accent) 25%, var(--cp-hairline));
}
[data-app="community"] .cp-icon-moon {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset -8px -4px 0 0 currentColor;
  opacity: 0.85;
}
[data-app="community"] .community-layout {
  align-items: stretch;
}
[data-app="community"] .community-layout--single .community-main {
  width: 100%;
  max-width: none;
}
[data-app="community"] .community-main {
  background: transparent;
}
[data-app="community"] .community-main .app-main-inner {
  max-width: none;
  width: 100%;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

/* Public booking — immersive full-bleed while keeping global portal topbar intact */
body[data-app="community"][data-portal="public"] #publicContent[data-active-screen="book"] .community-main {
  padding-left: 0;
  padding-right: 0;
}
body[data-app="community"][data-portal="public"] #publicContent[data-active-screen="book"] .community-main .app-main-inner {
  padding-left: 0;
  padding-right: 0;
}
body[data-app="community"][data-portal="public"] #publicContent[data-active-screen="book"] .community-main.mk-main {
  padding-left: 0;
  padding-right: 0;
}
body[data-app="community"][data-portal="public"] #publicContent[data-active-screen="book"] .community-main.mk-main-wide {
  max-width: none;
  width: 100%;
}
body[data-app="community"][data-booking-detail="1"] #publicContent .mk-topbar.community-topbar,
body[data-app="community"][data-booking-detail="1"] #publicContent .community-masjid-strip {
  display: none !important;
}
body[data-app="community"][data-booking-detail="1"] #publicContent .community-main.mk-main {
  padding: 0 !important;
  gap: 0 !important;
}
body[data-app="community"][data-booking-detail="1"] #publicContent .community-main .app-main-inner {
  padding: 0 !important;
}
[data-app="community"] #publicContent[data-active-screen="book"] .booking-immersive {
  max-width: none;
}
[data-app="community"] .booking-immersive {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: min(100vh, 1200px);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 clamp(32px, 6vw, 80px);
  box-sizing: border-box;
  font-family: var(--font-display);
}
[data-app="community"] .booking-auth-gate {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(72px, 12vh, 140px) clamp(18px, 4vw, 40px) clamp(18px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg-base) 30%, rgba(15, 23, 42, 0.3));
  backdrop-filter: blur(2px);
}
[data-app="community"] .booking-auth-gate__card {
  width: min(560px, 100%);
  text-align: center;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
  padding: clamp(20px, 4vw, 34px);
}
[data-app="community"] .booking-auth-gate__eyebrow {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}
[data-app="community"] .booking-auth-gate__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  color: var(--text);
}
[data-app="community"] .booking-auth-gate__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
}
[data-app="community"] .booking-auth-gate__actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
[data-app="community"] .booking-immersive[data-booking-auth-locked="1"] .booking-immersive__wrap {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
[data-app="community"] .booking-immersive__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(47, 150, 150, 0.22) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-base) 92%, #0f172a) 0%, var(--bg-base) 45%, color-mix(in srgb, var(--accent-soft) 35%, var(--bg-base)) 100%);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .booking-immersive__bg {
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(45, 212, 191, 0.12) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(129, 140, 248, 0.12) 0%, transparent 50%),
    linear-gradient(165deg, #0b1220 0%, #0f172a 40%, #111c33 100%);
}
[data-app="community"] .booking-immersive__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: clamp(18px, 3.6vw, 42px) clamp(16px, 4vw, 56px) 0;
  box-sizing: border-box;
}
[data-app="community"] .booking-immersive__pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 84%, transparent);
  backdrop-filter: blur(14px);
}
[data-app="community"] .booking-immersive__pagebar-copy {
  min-width: 0;
}
[data-app="community"] .booking-immersive__pagebar-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: -0.01em;
  color: var(--text);
}
[data-app="community"] .booking-immersive__pagebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
[data-app="community"] .booking-immersive__icon-btn.community-icon-btn {
  min-width: 42px;
  min-height: 42px;
}
[data-app="community"] .booking-immersive__masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
[data-app="community"] .booking-immersive__masthead-copy {
  width: min(860px, 100%);
  margin: 0 auto;
}
[data-app="community"] .booking-immersive__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 12px;
  color: var(--text);
}
[data-app="community"] .booking-immersive__lead {
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.65;
  margin: 0 auto 14px;
  color: var(--text-muted);
  max-width: 64ch;
}
[data-app="community"] .booking-immersive__ghost-btn {
  border-radius: 999px;
  padding: 10px 18px;
  border-color: color-mix(in srgb, var(--border) 70%, var(--accent));
  background: color-mix(in srgb, var(--bg-raised) 65%, transparent);
  backdrop-filter: blur(12px);
  font-weight: 600;
}
[data-app="community"] .booking-immersive__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0 0 clamp(28px, 5vw, 44px);
  padding: 0;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
[data-app="community"] .booking-immersive__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
[data-app="community"] .booking-immersive__step:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}
[data-app="community"] .booking-immersive__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  background: color-mix(in srgb, var(--accent-soft) 90%, var(--bg-muted));
  color: var(--accent-dark);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
[data-app="community"] .booking-immersive__grid.public-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
[data-app="community"] .booking-immersive__panel {
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
  backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 24px 60px rgba(15, 23, 42, 0.08);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .booking-immersive__panel {
  background: color-mix(in srgb, var(--bg-overlay) 88%, transparent);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}
[data-app="community"] .booking-immersive__panel--browse {
  padding: clamp(18px, 2.5vw, 26px);
}
[data-app="community"] .booking-immersive__panel-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
[data-app="community"] .booking-immersive__kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 6px;
}
[data-app="community"] .booking-immersive__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
}
[data-app="community"] .booking-immersive__sub {
  margin: 0;
  font-size: 0.9375rem;
  max-width: 56ch;
}
[data-app="community"] .booking-immersive__tabs.tabs {
  align-self: center;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-muted) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
[data-app="community"] .booking-immersive__tabs .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-width: 108px;
  min-height: 38px;
  padding: 9px 18px;
  text-align: center;
  line-height: 1;
  font-weight: 600;
  font-size: 0.9rem;
  vertical-align: middle;
}
[data-app="community"] .booking-immersive__items.card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 320px));
  justify-content: center;
  align-content: start;
  gap: 16px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
[data-app="community"] .booking-immersive__items.card-list.booking-immersive__items--single {
  grid-template-columns: minmax(260px, 360px);
}
[data-app="community"] .booking-immersive__items .item-card {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  padding: 0;
  background: color-mix(in srgb, var(--bg-base) 60%, var(--bg-raised));
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
[data-app="community"] .booking-immersive__items .item-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}
[data-app="community"] .booking-immersive__items .item-card.selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
[data-app="community"] .booking-item-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 35%, #dbeafe) 0%, color-mix(in srgb, var(--bg-muted) 85%, #ffffff) 100%);
}
[data-app="community"] .booking-item-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-app="community"] .booking-item-card__cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.2) 100%);
  pointer-events: none;
}
[data-app="community"] .booking-item-card__body {
  padding: 14px 14px 12px;
}
[data-app="community"] .booking-item-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.15;
  margin: 0 0 6px;
}
[data-app="community"] .booking-item-card__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 2.6em;
}
[data-app="community"] .booking-item-card__pills.pills {
  margin-top: 10px;
  gap: 6px;
}
[data-app="community"] .booking-item-card__pills.pills .pill {
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 999px;
}
[data-app="community"] .booking-immersive__panel--detail {
  padding: 0;
  position: relative;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
[data-app="community"] .booking-immersive[data-booking-view="detail"] .booking-immersive__panel--browse {
  display: none;
}
[data-app="community"] .booking-immersive[data-booking-view="catalog"] .booking-immersive__panel--detail {
  display: none;
}
[data-app="community"] .booking-immersive[data-booking-view="detail"] .booking-immersive__masthead,
[data-app="community"] .booking-immersive[data-booking-view="detail"] .booking-immersive__steps {
  display: none;
}
[data-app="community"] .booking-immersive[data-booking-view="detail"] .booking-immersive__wrap {
  padding: 0;
}
[data-app="community"] .booking-immersive[data-booking-view="detail"] .booking-immersive__panel--detail {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
[data-app="community"] .booking-immersive[data-booking-view="detail"] .booking-immersive__pagebar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: 12px clamp(16px, 4vw, 56px);
  margin-top: 0;
}
[data-app="community"] .booking-item-page {
  position: relative;
  min-height: 100vh;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
  display: block;
  padding: clamp(28px, 5vw, 56px);
}
[data-app="community"] .booking-item-page__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(47, 150, 150, 0.22) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-base) 92%, #0f172a) 0%, var(--bg-base) 45%, color-mix(in srgb, var(--accent-soft) 35%, var(--bg-base)) 100%);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
[data-app="community"] .booking-item-page__veil {
  position: absolute;
  inset: 0;
  /* Neutral black — less “gray haze” than blue-slate at medium alpha */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.22) 52%, rgba(0, 0, 0, 0.3) 100%);
}
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__veil {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
}
[data-app="community"] .booking-item-page[data-cover="1"] .booking-item-page__veil {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.28) 100%);
}
[data-app="community"] .booking-item-page[data-cover="1"] .booking-item-page__bg {
  opacity: 0.88;
}
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__bg {
  opacity: 1;
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(47, 150, 150, 0.34) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(99, 102, 241, 0.22) 0%, transparent 52%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-base) 78%, #c9d6df) 0%, color-mix(in srgb, var(--bg-base) 88%, #dbeafe) 45%, color-mix(in srgb, var(--accent-soft) 52%, var(--bg-base)) 100%);
}
[data-app="community"] .booking-item-page__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
  gap: 10px;
  max-width: min(780px, 100%);
  margin: 0 auto;
  text-align: center;
}
[data-app="community"] .booking-item-page__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(240, 248, 255, 0.9);
}
[data-app="community"] .booking-item-page__copy strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: #f8fbff;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
[data-app="community"] .booking-item-page__copy #itemDesc {
  color: rgba(236, 244, 255, 0.92);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.7;
  max-width: 70ch;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
[data-app="community"] .booking-item-page__copy #itemMeta {
  font-size: 1rem;
  color: rgba(236, 244, 255, 0.95);
  text-shadow: 0 5px 16px rgba(0, 0, 0, 0.24);
}
[data-app="community"] .booking-item-page__eyebrow,
[data-app="community"] .booking-item-page__copy strong,
[data-app="community"] .booking-item-page__copy #itemDesc,
[data-app="community"] .booking-item-page__copy #itemMeta {
  display: inline-block;
  max-width: min(100%, 72ch);
  margin-inline: auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(125% 110% at 8% -12%, rgba(76, 176, 159, 0.34) 0%, transparent 58%),
    radial-gradient(115% 120% at 100% -5%, rgba(129, 140, 248, 0.28) 0%, transparent 54%),
    linear-gradient(
      160deg,
      rgba(15, 23, 42, 0.56) 0%,
      rgba(31, 41, 55, 0.46) 48%,
      rgba(15, 23, 42, 0.58) 100%
    );
  box-shadow:
    0 12px 28px rgba(2, 6, 23, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
[data-app="community"] .booking-item-page__copy strong {
  border-radius: 24px;
  padding: 10px 20px;
}
[data-app="community"] .booking-item-page__copy #itemDesc {
  border-radius: 18px;
  padding: 10px 18px;
}
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__eyebrow,
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__copy strong,
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__copy #itemDesc,
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__copy #itemMeta {
  color: #111827;
  text-shadow: none;
}
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__eyebrow,
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__copy strong,
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__copy #itemDesc,
[data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__copy #itemMeta {
  background:
    radial-gradient(130% 120% at 0% -8%, rgba(99, 192, 177, 0.34) 0%, transparent 58%),
    radial-gradient(120% 120% at 100% 0%, rgba(124, 138, 245, 0.26) 0%, transparent 56%),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.74) 0%,
      rgba(238, 245, 255, 0.62) 52%,
      rgba(255, 255, 255, 0.72) 100%
    );
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
[data-app="community"] .booking-detail-card {
  margin-top: 0;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 95%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 24px 60px rgba(15, 23, 42, 0.08);
}
[data-app="community"] .booking-detail-card,
[data-app="community"] .booking-detail-card .muted,
[data-app="community"] .booking-detail-card label,
[data-app="community"] .booking-detail-card .section-title {
  color: var(--text);
}
[data-app="community"] .booking-detail-card .muted {
  font-size: 1rem;
  opacity: 0.9;
}
[data-app="community"] .booking-detail-card .section-title,
[data-app="community"] .booking-immersive__selection strong {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
}
[data-app="community"] .booking-detail-card label {
  font-size: 1rem;
  font-weight: 600;
}
[data-app="community"] .booking-detail-card input,
[data-app="community"] .booking-detail-card select,
[data-app="community"] .booking-detail-card textarea,
[data-app="community"] .booking-detail-card .btn {
  font-size: 1rem;
}
[data-app="community"] .booking-detail-card #slotList {
  margin-bottom: 28px;
}
[data-app="community"] .booking-detail-card #bookingForm {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
  gap: 16px;
}
[data-app="community"] .booking-detail-card .booking-form-divider {
  height: 1px;
  margin: 6px 0 12px;
  background: color-mix(in srgb, var(--border) 82%, transparent);
}
[data-app="community"] .booking-detail-card #instructionsSection {
  margin-top: 16px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}
[data-app="community"] .booking-detail-card #instructionsSection .section-title {
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
}
[data-app="community"] .booking-detail-card #instructionsContent {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  max-height: none;
  overflow: visible;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
}
[data-app="community"] .booking-detail-card #termsSection {
  margin-top: 8px;
}
[data-app="community"] .booking-detail-card .booking-terms-trigger {
  margin-top: 4px;
  display: flex;
  justify-content: center;
}
[data-app="community"] .booking-detail-card #bookingTermsBtn {
  min-height: 44px;
  font-size: 0.98rem;
  font-weight: 700;
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  color: color-mix(in srgb, var(--accent) 70%, #111827);
  min-width: min(320px, 100%);
  justify-content: center;
}
[data-app="community"] .booking-detail-card #paymentNotice {
  margin-top: 12px;
}
[data-app="community"] .booking-detail-card #selectedSlotLabel,
[data-app="community"] .booking-detail-card #paymentLabel {
  font-size: 1.14rem;
  color: var(--text);
}
[data-app="community"] .booking-detail-card #paymentNotice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
[data-app="community"] .booking-detail-card #paymentNotice #paymentLink {
  margin-left: 0;
}
[data-app="community"] .booking-detail-card .slot {
  border-radius: var(--radius-lg);
}
[data-app="community"] .booking-detail-card .slot.selected {
  border-color: color-mix(in srgb, var(--accent) 65%, #8b5cf6);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent-soft) 85%, rgba(47, 150, 150, 0.26)) 0%, transparent 65%),
    linear-gradient(140deg, color-mix(in srgb, var(--bg-raised) 90%, #ffffff) 0%, color-mix(in srgb, var(--accent-soft) 28%, var(--bg-raised)) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 12px 26px rgba(15, 23, 42, 0.1);
}
[data-app="community"] .booking-detail-card .slot.selected .btn {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 75%, #ffffff);
}
[data-app="community"] .booking-detail-card .slot-time strong {
  font-size: 1.08rem;
}
[data-app="community"] .booking-detail-card .slot-details {
  font-size: 0.9rem;
}
[data-app="community"] .booking-immersive__panel--detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-gold) 60%, #8b5cf6 100%);
}
[data-app="community"] .booking-immersive__detail-title {
  margin: 0 0 20px;
}
[data-app="community"] .booking-immersive__selection {
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
}
[data-app="community"] .booking-immersive__selection strong {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.42rem);
  font-weight: 600;
}
[data-app="community"] .booking-immersive__form .row .field {
  min-width: 0;
}
[data-app="community"] .booking-immersive__form input,
[data-app="community"] .booking-immersive__form select,
[data-app="community"] .booking-immersive__form textarea {
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg-base) 76%, #ffffff);
}
[data-app="community"] .booking-immersive__form input:focus,
[data-app="community"] .booking-immersive__form select:focus,
[data-app="community"] .booking-immersive__form textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border-focus));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 70%, transparent);
}
[data-app="community"] .booking-immersive__form .notice {
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-muted) 72%, transparent);
}
[data-app="community"] .booking-immersive__form .notice.warning {
  border-color: color-mix(in srgb, #f97316 45%, var(--border));
  background: color-mix(in srgb, #f97316 10%, var(--bg-muted));
}
[data-app="community"] .booking-immersive__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
[data-app="community"] .booking-terms-warning {
  color: #dc2626;
  font-size: 0.95rem;
  font-weight: 700;
}
[data-app="community"] .community-booking-terms-panel {
  width: min(760px, 100%);
}
[data-app="community"] .community-booking-terms-body {
  max-height: min(52vh, 540px);
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg-muted) 72%, transparent);
}
[data-app="community"] .community-booking-terms-actions {
  justify-content: flex-end;
  margin-top: 14px;
}
[data-app="community"] .booking-immersive__submit .btn-primary {
  min-height: 48px;
  padding-left: 28px;
  padding-right: 28px;
  border-radius: 999px;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .community-icon-btn {
  background: color-mix(in srgb, var(--bg-overlay) 80%, transparent);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .booking-item-page {
  background: transparent;
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .booking-item-page__bg {
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(45, 212, 191, 0.12) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(129, 140, 248, 0.12) 0%, transparent 50%),
    linear-gradient(165deg, #0b1220 0%, #0f172a 40%, #111c33 100%);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .booking-item-page[data-cover="0"] .booking-item-page__bg {
  background:
    radial-gradient(120% 90% at 10% -10%, rgba(45, 212, 191, 0.22) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 0%, rgba(129, 140, 248, 0.2) 0%, transparent 50%),
    linear-gradient(165deg, #9fb4c7 0%, #c5d3df 45%, #b7cadd 100%);
}
body[data-portal="public"][data-theme="dark"][data-app="community"] .booking-detail-card {
  background: color-mix(in srgb, var(--bg-overlay) 90%, transparent);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.item-photo-gallery-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.item-photo-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item-photo-chip img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
}
.item-photo-chip .btn {
  width: 100%;
}
@media (max-width: 1100px) {
  [data-app="community"] .booking-immersive__grid.public-booking {
    grid-template-columns: 1fr;
  }
  [data-app="community"] .booking-immersive__items.card-list {
    grid-template-columns: repeat(2, minmax(220px, 320px));
  }
  [data-app="community"] .booking-item-page {
    min-height: 86vh;
    padding: clamp(20px, 4vw, 36px);
  }
}
@media (max-width: 720px) {
  [data-app="community"] .booking-immersive__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-app="community"] .booking-immersive__pagebar {
    align-items: flex-start;
  }
  [data-app="community"] .booking-immersive__pagebar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  [data-app="community"] .booking-immersive__pagebar-actions .booking-immersive__ghost-btn {
    flex: 1 1 150px;
    justify-content: center;
  }
  [data-app="community"] .booking-item-page {
    min-height: 76vh;
    padding: 16px;
  }
  [data-app="community"] .booking-immersive__items.card-list {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}

@media (max-width: 900px) {
  /* Main column: single horizontal gutter (avoid stacking with .app-main-inner) */
  [data-app="community"] .community-main.mk-main {
    padding: 8px 12px calc(88px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
  }
  [data-app="community"] .community-main .app-main-inner {
    padding-left: 0;
    padding-right: 0;
  }
  [data-app="community"] .mk-topbar.community-topbar {
    margin: 0 auto;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
  }
  [data-app="community"] .mk-brand-cluster {
    max-width: min(240px, 58vw);
    min-width: 0;
  }
  [data-app="community"] .community-mk-actions {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
  }
  [data-app="community"] .community-mk-actions .btn,
  [data-app="community"] .community-mk-actions .btn-sm {
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }
  [data-app="community"] .community-masjid-strip-inner {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
    align-items: stretch;
  }
  [data-app="community"] .community-masjid-field--strip {
    flex: 1 1 100%;
  }
  [data-app="community"] .community-masjid-field--strip .community-masjid-select-wrap {
    max-width: none;
  }
  [data-app="community"] .community-theme-btn-compact {
    min-width: 44px;
    min-height: 44px;
    align-self: center;
  }
  /* Hero — readable scale, full-width primary CTA */
  [data-app="community"] .community-landing-hero.mk-hero-premium {
    padding: clamp(1.1rem, 5vw, 1.75rem) 0 clamp(0.9rem, 4vw, 1.5rem);
  }
  [data-app="community"] .community-landing-hero .mk-hero-content {
    max-width: 100%;
    padding-left: 2px;
    padding-right: 2px;
  }
  [data-app="community"] .community-landing-hero .mk-kicker {
    font-size: 0.8125rem;
  }
  [data-app="community"] .community-landing-hero h1 {
    font-size: clamp(1.6rem, 6.8vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
  }
  [data-app="community"] .community-landing-hero .mk-hero-lead {
    font-size: clamp(0.97rem, 3.1vw, 1.1rem);
    line-height: 1.55;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
  }
  [data-app="community"] .community-hero-actions,
  [data-app="community"] .community-landing-hero .mk-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    gap: 14px;
  }
  [data-app="community"] .community-hero-actions .btn-primary,
  [data-app="community"] .community-landing-hero .mk-hero-actions .btn-primary {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 14px 18px;
    font-size: 1.02rem;
  }
  [data-app="community"] .community-hero-links {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  [data-app="community"] .community-hero-tertiary {
    min-height: 44px;
    padding: 10px 12px;
  }
  [data-app="community"] .community-landing-hero .mk-trust-line {
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 0 4px;
  }
  /* Home cards & plan band */
  [data-app="community"] .cp-home-panels.mk-feature-cards {
    gap: 16px;
    padding: 26px 0 18px;
  }
  [data-app="community"] .cp-home-panels .mk-feature-card {
    padding: 20px 16px 18px;
  }
  [data-app="community"] .cp-home-panels .mk-feature-card h3 {
    font-size: 1.22rem;
  }
  [data-app="community"] .cp-home-panels .mk-feature-card .btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  [data-app="community"] .community-plan-band .mk-section-band-inner {
    padding-top: 28px;
    padding-bottom: 32px;
  }
  [data-app="community"] .community-plan-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  [data-app="community"] .community-home-grid.mk-feature-cards {
    grid-template-columns: 1fr;
  }
  [data-app="community"] .community-plan-card {
    padding: var(--space-6);
  }
  [data-app="community"] .community-plan-card .btn {
    min-height: 46px;
    width: 100%;
    justify-content: center;
  }
  [data-app="community"] .community-main .panel {
    padding: 18px 16px;
  }
  [data-app="community"] .community-event-card {
    padding: 14px;
  }
  [data-app="community"] .community-announce-card__body {
    padding: 14px;
  }
  /* Public booking — tighter chrome on small screens */
  body[data-app="community"][data-portal="public"] .public-booking {
    gap: 16px;
  }
  body[data-app="community"][data-portal="public"] .availability-panel {
    padding: 16px 14px !important;
  }
  body[data-app="community"][data-portal="public"] .availability-panel .calendar-grid {
    padding: 8px 4px;
  }
  body[data-app="community"][data-portal="public"] .availability-panel .calendar-day {
    padding: 8px 4px;
    min-height: 56px;
  }
  body[data-app="community"][data-portal="public"] .availability-panel .slot {
    padding: 14px 12px;
  }
  body[data-app="community"][data-portal="public"] .availability-panel .slot .btn {
    min-height: 46px;
  }
}
[data-app="community"] .community-landing-hero {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border-bottom: none;
  overflow: visible;
  position: relative;
  z-index: 1;
}
/* Hero — full marketing-style composition (no card frame; content sits on shell like landing) */
[data-app="community"] .community-landing-hero.mk-hero-premium {
  padding: var(--space-24) 0 var(--space-20);
}
[data-app="community"] .community-landing-hero .mk-hero-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/* Let global .mk-hero-premium .mk-hero-content::before radial glow show (do not replace with card accent) */
[data-app="community"] .community-landing-hero.mk-hero-premium .mk-hero-content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 120%;
  background: radial-gradient(ellipse 50% 50%, rgba(47, 150, 150, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-app="community"] .community-landing-hero .mk-hero-content,
  [data-app="community"] .mk-feature-cards .mk-feature-card,
  [data-app="community"] .community-plan-card {
    animation: none !important;
  }
  [data-app="community"] .community-landing-hero .mk-hero-actions .btn-primary:hover,
  [data-app="community"] .community-landing-hero .mk-hero-actions .btn:active {
    transform: none !important;
  }
}
body[data-portal="public"][data-theme="dark"] [data-app="community"] .community-landing-hero .mk-hero-content {
  background: transparent;
  box-shadow: none;
}
body[data-portal="public"][data-theme="dark"] [data-app="community"] .community-plan-band {
  background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-base) 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}
[data-app="community"] .community-home-grid .mk-feature-card {
  animation: none;
}
[data-app="community"] .community-landing-hero .mk-kicker,
[data-app="community"] .community-landing-hero h1,
[data-app="community"] .community-landing-hero .mk-hero-lead {
  position: relative;
  z-index: 1;
}
[data-app="community"] .community-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}
[data-app="community"] .community-hero-links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}
[data-app="community"] .community-hero-links-sep {
  color: var(--text-faint);
  font-weight: 300;
  user-select: none;
}
[data-app="community"] .community-hero-tertiary {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color 0.18s ease, background 0.18s ease;
}
[data-app="community"] .community-hero-tertiary:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
}
[data-app="community"] .community-landing-hero .mk-trust-line {
  position: relative;
  z-index: 1;
}
[data-app="community"] .cp-bento {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
[data-app="community"] .cp-home-panels.mk-feature-cards {
  gap: 22px;
  padding: 48px 0 28px;
}
[data-app="community"] .cp-home-panels .mk-feature-card {
  border-radius: var(--radius-2xl);
  padding: 26px 24px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 6px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.22s ease;
}
[data-app="community"] .cp-home-panels .mk-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-modal);
  border-color: rgba(47, 150, 150, 0.18);
}
[data-app="community"] .cp-home-panels .mk-feature-card h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
[data-app="community"] .cp-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: linear-gradient(145deg, rgba(47, 150, 150, 0.11), rgba(47, 150, 150, 0.02));
  border: 1px solid var(--cp-hairline);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent-dark);
}
[data-app="community"] .cp-bento-card--iqama .cp-card-icon::before {
  content: '☽';
}
[data-app="community"] .cp-card-icon--star::before {
  content: '✦';
  font-size: 1.05rem;
}
[data-app="community"] .cp-card-icon--ring::before {
  content: '◎';
}
[data-app="community"] .cp-home-panels .mk-feature-card .btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  margin-top: 4px;
  color: var(--cp-teal-deep);
  border: 1px solid rgba(47, 150, 150, 0.35);
  background: rgba(255, 255, 255, 0.95);
}
[data-app="community"] .cp-home-panels .mk-feature-card .btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--cp-teal-deep);
}
[data-app="community"] .cp-home-panels .mk-feature-card .muted {
  color: var(--cp-muted);
}
[data-app="community"] .community-plan-band {
  margin-top: var(--space-16);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-base) 100%);
}
[data-app="community"] .community-plan-band .mk-section-band-inner {
  position: relative;
  z-index: 1;
  padding-top: 48px;
  padding-bottom: 52px;
}
[data-app="community"] .community-plan-band .mk-features-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
}
[data-app="community"] .community-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
[data-app="community"] .community-plan-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: none;
}
[data-app="community"] .community-plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 150, 150, 0.22);
  box-shadow: var(--shadow-modal);
}
[data-app="community"] .community-plan-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
  color: var(--text);
}
[data-app="community"] .community-main .panel {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
  padding: 28px 32px;
}
[data-app="community"] .community-main .section-title {
  font-family: var(--font-display);
  color: var(--text);
}
[data-app="community"] .community-feed-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 72px;
}
[data-app="community"] .community-feed-line {
  font-size: 13px;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
[data-app="community"] .community-feed-line strong {
  color: var(--text-primary);
  display: block;
  font-size: 14px;
}
[data-app="community"] .community-feed-line--announce .community-feed-line__date {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
[data-app="community"] .community-feed-line--announce strong {
  margin-top: 2px;
}
[data-app="community"] .community-home-news-item {
  appearance: none;
  font: inherit;
  width: 100%;
  margin: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-raised) 96%, var(--accent-soft));
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  text-align: left;
  color: inherit;
}
[data-app="community"] .community-home-news-item:hover {
  border-color: rgba(47, 150, 150, 0.35);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
[data-app="community"] .community-home-news-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-app="community"] .community-home-news-item__thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
}
[data-app="community"] .community-home-news-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-app="community"] .community-home-news-item__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0.45;
}
[data-app="community"] .community-home-news-item__body {
  min-width: 0;
  flex: 1;
}
[data-app="community"] .community-home-news-item__date {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 4px;
}
[data-app="community"] .community-home-news-item__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.3;
}
[data-app="community"] .community-home-news-item__excerpt {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
[data-app="community"] .community-announce-empty {
  padding: 28px 20px;
  text-align: center;
  border-radius: var(--radius-xl);
  border: 1px dashed var(--border-soft);
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 14px;
}
[data-app="community"] .community-announce-modal.community-announce-modal--open .community-announce-modal-panel {
  animation: community-announce-panel-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes community-announce-panel-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
[data-app="community"] .community-iqama-preview .community-salah-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
[data-app="community"] .community-iqama-preview .community-salah-row:last-child {
  border-bottom: none;
}
[data-app="community"] .community-prayer-root .community-salah-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
[data-app="community"] .community-prayer-root th,
[data-app="community"] .community-prayer-root td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
[data-app="community"] .community-prayer-root th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-app="community"] .community-event-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
  background: var(--bg-raised);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
[data-app="community"] .community-event-card:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
  border-color: rgba(47, 150, 150, 0.35);
}
[data-app="community"] .community-event-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}
[data-app="community"] .community-events-screen .community-events-panel {
  padding: 28px 26px 32px;
}
[data-app="community"] .community-events-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 8px;
}
[data-app="community"] .community-events-lead {
  max-width: 52ch;
  margin: 0 0 20px;
  line-height: 1.55;
}
[data-app="community"] .community-events-ics-strip {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(47, 150, 150, 0.22);
  background: linear-gradient(135deg, rgba(47, 150, 150, 0.07), rgba(47, 150, 150, 0.02));
  padding: 16px 18px 14px;
  margin-bottom: 22px;
}
[data-app="community"] .community-events-ics-strip-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}
[data-app="community"] .community-events-ics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
[data-app="community"] .community-events-ics-input {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 12px;
}
[data-app="community"] .community-events-ics-hint {
  margin: 10px 0 0;
}
[data-app="community"] .community-events-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
[data-app="community"] .community-event-card-v2 {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  appearance: none;
  width: 100%;
}
[data-app="community"] .community-event-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  border-color: rgba(47, 150, 150, 0.35);
}
[data-app="community"] .community-event-card-v2:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-app="community"] .community-event-card-v2__media {
  height: 120px;
  background: linear-gradient(145deg, rgba(47, 150, 150, 0.2), rgba(47, 150, 150, 0.05));
  position: relative;
}
[data-app="community"] .community-event-card-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-app="community"] .community-event-card-v2__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
[data-app="community"] .community-event-card-v2__date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
[data-app="community"] .community-event-card-v2__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
[data-app="community"] .community-event-card-v2__meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}
[data-app="community"] .community-event-detail-modal .community-event-detail-panel {
  width: min(560px, 100%);
  padding: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-modal);
}
[data-app="community"] .community-event-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 0;
}
[data-app="community"] .community-event-detail-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 6px;
}
[data-app="community"] .community-event-detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}
[data-app="community"] .community-event-detail-cover {
  margin-top: 14px;
  max-height: 220px;
  overflow: hidden;
  background: var(--bg-muted);
}
[data-app="community"] .community-event-detail-cover img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}
[data-app="community"] .community-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px 0;
}
[data-app="community"] .community-event-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  border: 1px solid rgba(47, 150, 150, 0.25);
  color: var(--text);
}
[data-app="community"] .community-event-detail-body {
  padding: 16px 22px 8px;
}
[data-app="community"] .community-event-detail-body.community-modal-body {
  max-width: none;
}
[data-app="community"] .community-event-registration {
  padding: 0 22px 12px;
}
[data-app="community"] .community-event-registration .field label {
  font-size: 13px;
}
[data-app="community"] .community-event-registration-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0 0 12px;
}
[data-app="community"] .community-event-subscribe {
  padding: 12px 22px 4px;
  border-top: 1px solid var(--border-soft);
  margin-top: 4px;
}
[data-app="community"] .community-event-subscribe-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-app="community"] .community-event-subscribe-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
[data-app="community"] .community-event-subscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-app="community"] .community-event-detail-actions {
  padding: 16px 22px 22px;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-muted) 55%, transparent);
}
[data-app="community"] .community-home-event-pill {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg-raised) 96%, var(--accent-soft));
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
[data-app="community"] .community-home-event-pill:hover {
  border-color: rgba(47, 150, 150, 0.35);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
[data-app="community"] .community-home-event-pill__when {
  flex-shrink: 0;
  min-width: 52px;
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radius-md);
  background: rgba(47, 150, 150, 0.12);
  border: 1px solid rgba(47, 150, 150, 0.22);
}
[data-app="community"] .community-home-event-pill__dow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
[data-app="community"] .community-home-event-pill__day {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
[data-app="community"] .community-home-event-pill__body {
  min-width: 0;
}
[data-app="community"] .community-home-event-pill__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
}
[data-app="community"] .community-home-event-pill__meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
}
[data-app="community"] .community-event-ticket {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(47, 150, 150, 0.28);
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--bg-raised));
  padding: 16px 16px 14px;
}
[data-app="community"] .community-event-ticket-code {
  margin-top: 12px;
}
[data-app="community"] .community-event-ticket-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
[data-app="community"] .community-event-ticket-code-digits {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}
[data-app="community"] .community-event-ticket-qr {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: #fff;
}
@media (max-width: 720px) {
  [data-app="community"] .community-events-list--grid {
    grid-template-columns: 1fr;
  }
  [data-app="community"] .community-events-ics-row {
    flex-direction: column;
    align-items: stretch;
  }
  [data-app="community"] .community-events-ics-row .btn {
    justify-content: center;
  }
}
[data-app="community"] .community-guest-prompt {
  text-align: center;
  max-width: 480px;
  margin: 0 auto 20px;
}
[data-app="community"] .community-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
[data-app="community"] .community-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}
[data-app="community"] .community-auth-panel {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
  background: var(--bg-raised);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-default) 90%, transparent);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.16),
    0 8px 20px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  padding: 20px 22px 22px;
  font-family: var(--font-display);
}
[data-app="community"] .community-auth-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
[data-app="community"] .community-auth-heading {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 4px 0 0;
  color: var(--text);
}
[data-app="community"] .community-auth-panel-head .eyebrow {
  letter-spacing: 0.12em;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-display);
}
[data-app="community"] .community-auth-panel-head .muted {
  margin-top: 6px;
  line-height: 1.45;
  max-width: 42ch;
  font-family: var(--font-display);
}
[data-app="community"] .community-auth-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  font-family: var(--font-display);
  color: var(--text-muted);
  border: 1px solid transparent;
}
[data-app="community"] .community-auth-close:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border);
}
/* Do not use .auth-layout here — global .auth-layout is for split admin login (min-height 560px + nested card). */
[data-app="community"] .community-auth-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  min-height: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
[data-app="community"] .community-auth-inner .auth-panel {
  gap: 12px;
  padding-top: 4px;
}
[data-app="community"] .community-auth-inner .community-auth-form.stack {
  gap: 10px;
}
/* Cached HTML may still include .auth-layout on this section — neutralize admin login chrome. */
[data-app="community"] .community-auth-modal section.auth-layout.community-auth-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  grid-template-columns: none;
}
[data-app="community"] .community-auth-inner .auth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border-soft);
  grid-template-columns: unset;
}
[data-app="community"] .community-auth-inner .auth-tab {
  flex: 1 1 auto;
  min-height: 40px;
  line-height: 1.2;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-display);
  border-radius: 0;
  padding: 10px 8px;
  color: var(--text-muted);
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
[data-app="community"] .community-auth-inner .auth-tab.active {
  color: var(--text);
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--accent);
}
[data-app="community"] .community-auth-inner .auth-tab:not(.active):hover {
  color: var(--text);
  background: transparent;
}
[data-app="community"] .community-auth-inner .community-auth-form .field label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-family: var(--font-display);
}
[data-app="community"] .community-auth-inner .community-auth-form .field input {
  min-height: 42px;
  border-radius: 10px;
  border-color: var(--border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--font-display);
  font-size: 1rem;
}
[data-app="community"] .community-auth-inner .community-auth-form .field input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
[data-app="community"] .community-auth-primary {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-app="community"] .community-auth-divider {
  margin: 2px 0;
  font-family: var(--font-display);
}
[data-app="community"] .community-auth-google-btn {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  border-color: color-mix(in srgb, var(--border) 85%, var(--text-muted));
  background: var(--bg-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-app="community"] .community-auth-google-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--bg-muted);
}
[data-app="community"] .community-auth-google-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
}
[data-app="community"] .community-auth-google-icon {
  display: block;
  flex-shrink: 0;
}
[data-app="community"] .community-auth-lead {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 2px;
  font-family: var(--font-display);
}
[data-app="community"] .community-auth-register-row {
  flex-wrap: wrap;
  gap: 14px 16px;
}
[data-app="community"] .community-auth-register-row .field {
  flex: 1 1 160px;
  min-width: 0;
}
@media (max-width: 420px) {
  [data-app="community"] .community-auth-register-row {
    flex-direction: column;
  }
  [data-app="community"] .community-auth-register-row .field {
    flex: 1 1 auto;
  }
}
@media (max-height: 520px) {
  [data-app="community"] .community-auth-panel {
    max-height: min(92vh, 100%);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}
[data-app="community"] .community-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
[data-app="community"] .community-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
}
[data-app="community"] .community-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-raised);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  padding: 20px;
  box-shadow: var(--shadow-modal);
}
[data-app="community"] .community-modal-body {
  margin-top: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
[data-app="community"] .community-announce-rich {
  font-family: var(--font-serif-nizam, Georgia, 'Times New Roman', serif);
}
[data-app="community"] .community-announce-rich .ann-detail-cover {
  margin: -4px -12px 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: min(42vh, 280px);
  background: var(--bg-muted);
}
[data-app="community"] .community-announce-rich .ann-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-app="community"] .community-announce-rich .ann-h1,
[data-app="community"] .community-announce-rich .books-mk-chapter-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--text);
  margin: 1.25rem 0 0.5rem;
  font-weight: 600;
}
[data-app="community"] .community-announce-rich .ann-h2 {
  font-size: 1.2rem;
  margin: 1rem 0 0.35rem;
  color: var(--text);
  font-weight: 600;
}
[data-app="community"] .community-announce-rich .ann-h3 {
  font-size: 1.05rem;
  margin: 0.85rem 0 0.3rem;
  color: var(--text);
  font-weight: 600;
}
[data-app="community"] .community-announce-rich .ann-hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 1.25rem 0;
}
[data-app="community"] .community-announce-rich .ann-quote {
  border-left: 4px solid var(--accent);
  padding-left: 14px;
  margin: 1rem 0;
  font-style: italic;
  color: var(--text-secondary);
}
[data-app="community"] .community-announce-rich .ann-img {
  max-width: 100%;
  border-radius: var(--radius-md);
  height: auto;
  vertical-align: middle;
}
[data-app="community"] .community-announce-rich .ann-fig {
  margin: 1rem 0;
}
[data-app="community"] .community-announce-rich .ann-figcap {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 8px;
}
[data-app="community"] .ann-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(10, 12, 14, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  cursor: default;
}
[data-app="community"] .ann-lightbox-overlay img {
  max-width: 100%;
  max-height: min(92vh, 900px);
  object-fit: contain;
  border-radius: var(--radius-md);
  cursor: default;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
[data-app="community"] .ann-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
[data-app="community"] .ann-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
[data-app="community"] .ann-lightbox-caption {
  margin: 0;
  max-width: min(56ch, 100%);
  text-align: center;
  font-size: 0.9rem;
  color: rgba(248, 250, 252, 0.88);
  line-height: 1.45;
}
[data-app="community"] .community-announce-rich .ann-img.ann-lightboxable {
  cursor: zoom-in;
}
[data-app="community"] .community-announce-modal .community-modal-panel.community-announce-modal-panel {
  width: min(720px, 100%);
  max-height: min(92vh, 900px);
  padding: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 24px 56px rgba(15, 23, 42, 0.12);
  background: var(--bg-raised);
}
[data-app="community"] .community-announce-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--border-soft);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 35%, transparent) 0%, transparent 100%),
    var(--bg-raised);
  position: sticky;
  top: 0;
  z-index: 2;
}
[data-app="community"] .community-announce-modal-eyebrow {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
[data-app="community"] .community-announce-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
}
[data-app="community"] .community-announce-article {
  margin: 0;
  padding: 20px 22px 26px;
  max-height: min(70vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: 12px;
  scroll-behavior: smooth;
}
[data-app="community"] .community-announce-modal .community-announce-article {
  padding: 16px 22px 28px;
}
[data-app="community"] .community-announce-rich .ann-rich sup,
[data-app="community"] .community-announce-rich .ann-rich sub,
[data-app="community"] .community-announce-rich .ann-p sup,
[data-app="community"] .community-announce-rich .ann-p sub {
  font-size: 0.78em;
}
[data-app="community"] .community-announce-rich .ann-video-inner iframe.ann-video-frame {
  border-radius: inherit;
}
[data-app="community"] .community-announcements-panel.panel {
  border-radius: var(--radius-2xl);
  padding: 28px 28px 24px;
}
[data-app="community"] .community-announcements-kicker {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
[data-app="community"] .community-announcements-lead {
  margin: 0 0 20px;
  max-width: 56ch;
  line-height: 1.55;
}
[data-app="community"] .community-announce-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-app="community"] .community-announce-card {
  position: relative;
  display: flex;
  gap: 0;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.2s ease;
  cursor: pointer;
}
[data-app="community"] .community-announce-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
[data-app="community"] .community-announce-card:hover {
  border-color: rgba(47, 150, 150, 0.35);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
[data-app="community"] .community-announce-card__body {
  padding: 16px 18px 16px 20px;
  flex: 1;
  min-width: 0;
}
[data-app="community"] .community-announce-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}


[data-app="community"] .community-announce-card__date {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
}
[data-app="community"] .community-announce-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid rgba(47, 150, 150, 0.2);
}
[data-app="community"] .community-announce-card__badge--pinned {
  background: color-mix(in srgb, var(--accent-gold) 22%, var(--bg-raised));
  color: var(--text);
  border-color: rgba(246, 193, 119, 0.45);
}
[data-app="community"] .community-announce-card__thumb {
  flex-shrink: 0;
  width: 112px;
  min-height: 88px;
  background: var(--bg-muted);
  border-right: 1px solid var(--border-soft);
}
[data-app="community"] .community-announce-card__thumb img {
  width: 100%;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
  display: block;
}
[data-app="community"] .community-announce-card--has-thumb {
  flex-direction: row;
  align-items: stretch;
}
[data-app="community"] .community-announce-card--has-thumb .community-announce-card__body {
  padding-left: 18px;
}
@media (max-width: 520px) {
  [data-app="community"] .community-announce-card--has-thumb {
    flex-direction: column;
  }
  [data-app="community"] .community-announce-card__thumb {
    width: 100%;
    min-height: 140px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  [data-app="community"] .community-announce-card--has-thumb .community-announce-card__body {
    padding-left: 20px;
  }
}
[data-app="community"] .community-announce-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
  line-height: 1.3;
}
[data-app="community"] .community-announce-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
[data-app="community"] .community-announce-rich .ann-rich {
  max-width: 100%;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
}
[data-app="community"] .community-announce-rich .ann-rich code,
[data-app="community"] .community-announce-rich .ann-p code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.15em 0.4em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-muted) 88%, var(--accent) 6%);
  border: 1px solid var(--border-soft);
  color: var(--text);
}
body[data-portal="public"][data-theme="dark"] [data-app="community"] .community-announce-rich .ann-rich code,
body[data-portal="public"][data-theme="dark"] [data-app="community"] .community-announce-rich .ann-p code {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(148, 163, 184, 0.18);
}
[data-app="community"] .community-announce-article .ann-rich {
  max-width: min(68ch, 100%);
  margin: 0 auto;
}
[data-app="community"] .community-announce-rich .ann-lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
[data-app="community"] .community-announce-rich .ann-p {
  margin: 0.65rem 0;
}
[data-app="community"] .community-announce-rich .ann-p a,
[data-app="community"] .community-announce-rich .ann-rich a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-app="community"] .community-announce-rich .ann-p strong,
[data-app="community"] .community-announce-rich .ann-rich strong {
  font-weight: 600;
  color: var(--text);
}
[data-app="community"] .community-announce-rich .ann-list {
  margin: 0.65rem 0 0.85rem 1.1em;
  padding: 0;
}
[data-app="community"] .community-announce-rich .ann-table-wrap {
  margin: 1rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
}
[data-app="community"] .community-announce-rich .ann-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
[data-app="community"] .community-announce-rich .ann-table th,
[data-app="community"] .community-announce-rich .ann-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
[data-app="community"] .community-announce-rich .ann-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
}
[data-app="community"] .community-announce-rich .ann-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 1rem 0;
}
[data-app="community"] .community-announce-rich .ann-gallery-item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
}
[data-app="community"] .community-announce-rich .ann-gallery-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
[data-app="community"] .community-announce-rich .ann-video,
[data-app="community"] .community-announce-rich .ann-video-inner {
  margin: 1rem 0;
}
[data-app="community"] .community-announce-rich .ann-video-inner {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: #0f172a;
}
[data-app="community"] .community-announce-rich .ann-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
[data-app="community"] .community-announce-rich .ann-audio audio {
  width: 100%;
  max-width: 100%;
}
[data-app="community"] .community-announce-rich .ann-footnote {
  font-size: 0.92rem;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  border-left: 3px solid var(--accent);
}
[data-app="community"] .community-announce-rich .ann-fn-ref {
  color: var(--accent-dark);
  font-weight: 700;
}
[data-app="community"] .community-announce-rich .ann-two-col {
  display: grid;
  gap: 16px;
  margin: 1rem 0;
}
@media (min-width: 640px) {
  [data-app="community"] .community-announce-rich .ann-two-col {
    grid-template-columns: 1fr 1fr;
  }
}
[data-app="community"] .community-announce-rich .ann-col {
  min-width: 0;
}
[data-app="community"] .community-announce-rich .ann-toggle {
  margin: 0.75rem 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-muted);
}
[data-app="community"] .community-announce-rich .ann-embed {
  word-break: break-word;
}
[data-app="community"] .community-announce-rich .ann-cta-row {
  margin: 1rem 0;
}
[data-app="community"] .community-announce-rich .ann-cta {
  border-radius: 999px;
}
[data-app="community"] .community-announce-rich .ann-callout,
[data-app="community"] .community-announce-rich .books-mk-highlight-box {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--cp-hairline);
  background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
  margin: 1rem 0;
}
[data-app="community"] .community-announce-rich .ann-callout--default {
  border-color: rgba(47, 150, 150, 0.35);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-soft) 50%, transparent) 0%,
    color-mix(in srgb, var(--bg-muted) 88%, transparent) 100%
  );
}
[data-app="community"] .community-announce-rich .ann-callout--info {
  border-color: rgba(59, 130, 246, 0.35);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #dbeafe 70%, var(--bg-raised)) 0%,
    color-mix(in srgb, var(--bg-muted) 90%, transparent) 100%
  );
}
[data-app="community"] .community-announce-rich .ann-callout--success {
  border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #dcfce7 75%, var(--bg-raised)) 0%,
    color-mix(in srgb, var(--bg-muted) 90%, transparent) 100%
  );
}
[data-app="community"] .community-announce-rich .ann-callout--warning {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #fef3c7 80%, var(--bg-raised)) 0%,
    color-mix(in srgb, var(--bg-muted) 90%, transparent) 100%
  );
}
[data-app="community"] .community-announce-rich .ann-callout--neutral {
  border-color: var(--border-soft);
  background: var(--bg-muted);
}
[data-app="community"] .community-announce-rich .ann-callout--ramadan {
  border-color: rgba(47, 150, 150, 0.45);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent-soft) 65%, transparent) 0%,
    color-mix(in srgb, var(--accent-gold) 18%, var(--bg-raised)) 100%
  );
  box-shadow: 0 8px 28px rgba(47, 150, 150, 0.08);
}
[data-app="community"] .community-announce-rich .ann-callout--eid {
  border-color: rgba(246, 193, 119, 0.55);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent-gold) 28%, var(--bg-raised)) 0%,
    color-mix(in srgb, var(--accent-soft) 40%, transparent) 100%
  );
}
[data-app="community"] .community-announce-rich .ann-callout--fundraising {
  border-color: rgba(47, 150, 150, 0.4);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bg-muted) 92%, var(--accent)) 0%,
    color-mix(in srgb, var(--accent-soft) 40%, transparent) 100%
  );
}
[data-app="community"] .community-announce-rich .ann-callout--emergency,
[data-app="community"] .community-announce-rich .ann-callout--danger {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--danger-soft) 70%, transparent) 0%,
    color-mix(in srgb, var(--bg-muted) 88%, transparent) 100%
  );
}
[data-app="community"] .community-announce-rich .ann-callout--emergency .ann-callout-inner {
  font-weight: 500;
}
[data-app="community"] .community-announce-rich .ann-code {
  overflow-x: auto;
  font-size: 13px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
}
[data-app="community"] .community-mobile-nav {
  display: none !important;
}
/* Keep primary nav in the sticky top bar on small screens (no duplicate bottom dock). */
@media (max-width: 900px) {
  body[data-app="community"] #publicContent {
    padding-bottom: 24px;
  }
  [data-app="community"] .mk-topbar.community-topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--space-2);
  }
  [data-app="community"] #publicNav.community-mk-nav {
    display: flex !important;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: var(--space-2) 0 0;
    margin: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    justify-content: flex-start;
  }
  [data-app="community"] .community-mobile-nav {
    display: none !important;
  }
}

/* Al Muslim Ummah immersive home experience */
[data-app="community"] .ummah-home-screen {
  margin: 0;
  padding: 0;
}
[data-app="community"] .ummah-hero-fullbleed {
  position: relative;
  min-height: 78vh;
  border-radius: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.32) 0%, rgba(15, 23, 42, 0.56) 100%),
    radial-gradient(ellipse at 20% 8%, rgba(47, 150, 150, 0.38), transparent 46%),
    radial-gradient(ellipse at 80% 85%, rgba(47, 150, 150, 0.24), transparent 52%),
    linear-gradient(120deg, #071221, #102238 52%, #0b1a2c);
}
[data-app="community"] .ummah-hero-veils {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.28;
}
[data-app="community"] .ummah-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(84px, 14vh, 160px) 24px 84px;
  color: #f8fafc;
}
[data-app="community"] .ummah-hero-kicker {
  margin: 0 0 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(248, 250, 252, 0.78);
}
[data-app="community"] .ummah-hero-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
[data-app="community"] .ummah-hero-lead {
  margin: 16px 0 0;
  max-width: 66ch;
  font-size: clamp(1rem, 1.6vw, 1.24rem);
  color: rgba(248, 250, 252, 0.9);
}
[data-app="community"] .ummah-hero-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
[data-app="community"] .ummah-hero-pills {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-app="community"] .ummah-hero-pills span {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
}
[data-app="community"] .ummah-glass-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: -44px auto 24px;
  padding: 0 18px;
  position: relative;
  z-index: 3;
}
[data-app="community"] .ummah-glass-card {
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(240, 249, 252, 0.68));
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}
[data-app="community"] .ummah-glass-card h3 {
  margin: 0 0 8px;
}
[data-app="community"] .ummah-glass-card p {
  margin: 0;
  color: var(--text-muted);
}
[data-app="community"] .ummah-home-section {
  max-width: 1120px;
  margin: 28px auto;
  padding: 0 18px;
}
[data-app="community"] .ummah-home-section--dark {
  margin: 34px calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  padding: 44px 24px;
  background:
    radial-gradient(ellipse at top, rgba(47, 150, 150, 0.2), transparent 58%),
    linear-gradient(180deg, #0f1b2f, #0a1424);
  color: #e2e8f0;
}
[data-app="community"] .ummah-home-section--dark .ummah-section-kicker,
[data-app="community"] .ummah-home-section--dark .ummah-section-title {
  color: #f8fafc;
}
[data-app="community"] .ummah-section-head {
  margin-bottom: 16px;
}
[data-app="community"] .ummah-section-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--text-muted);
}
[data-app="community"] .ummah-section-title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.1vw, 2.5rem);
  letter-spacing: -0.02em;
}
[data-app="community"] .ummah-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
[data-app="community"] .ummah-feature-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
[data-app="community"] .ummah-feature-card h3 {
  margin-top: 0;
}
[data-app="community"] .ummah-journey-rail {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
[data-app="community"] .ummah-journey-rail article {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 14px;
}
[data-app="community"] .ummah-journey-rail strong {
  color: #67e8f9;
}
[data-app="community"] .ummah-journey-rail h3 {
  margin: 10px 0 6px;
  color: #f8fafc;
}
[data-app="community"] .ummah-journey-rail p {
  margin: 0;
  color: #cbd5e1;
}
@media (max-width: 980px) {
  [data-app="community"] .ummah-glass-band,
  [data-app="community"] .ummah-feature-grid,
  [data-app="community"] .ummah-journey-rail {
    grid-template-columns: 1fr;
  }
  [data-app="community"] .ummah-hero-fullbleed {
    min-height: 62vh;
  }
}
body[data-portal="public"][data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0b1220;
  --bg-muted: #0f172a;
  --bg-raised: #151f33;
  --bg-overlay: #0f1a2e;
  --bg-hover: #1a2840;
  --border: rgba(148, 163, 184, 0.18);
  --border-default: rgba(148, 163, 184, 0.18);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --accent: #2dd4bf;
  --accent-dark: #14b8a6;
  --accent-soft: rgba(45, 212, 191, 0.18);
  --accent-gold: #f6c177;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.45);
}