:root{
--bg:#f7f9fc;--panel:#fff;--ink:#12233a;--muted:#6f7d90;--line:#dfe6ef;--nav:#122136;--nav2:#0e1b2d;
--blue:#3e7df3;--blueSoft:#ecf3ff;--green:#1fa76b;--greenSoft:#e4f7ec;--purple:#7445d4;--purpleSoft:#efe7ff;
--pink:#d43f71;--pinkSoft:#ffe9f0;--orange:#ef6d2f;--orangeSoft:#fff0e6;--red:#cf3d3d;--redSoft:#ffe7e7;
--shadow:0 8px 24px rgba(34,54,82,.06)
}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
button,input,select,textarea{font:inherit}.app{display:grid;grid-template-columns:205px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--nav),var(--nav2));color:#fff;padding:18px 10px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:0 7px 15px}.brand-mark{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,#15c8f4,#3977ef);box-shadow:0 8px 18px rgba(47,124,245,.28)}
.brand-name{font-size:15px;font-weight:900;line-height:1.05;letter-spacing:.6px}.brand-sub{font-size:11px;color:#99a7b8;margin-top:6px}.sidebar-rule{height:1px;background:#34455b;margin:0 9px 10px}
.nav{display:flex;flex-direction:column;gap:4px}.nav button{border:0;background:transparent;color:#d8e1eb;padding:11px 12px;border-radius:7px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px}.nav button.active{background:linear-gradient(90deg,#3d79ef,#5389f8);color:#fff}.nav button:hover{background:#1a2b42}.nav button b{margin-left:auto;background:#e74f68;padding:1px 6px;border-radius:99px;font-size:9px}
.sidebar-bottom{margin-top:auto;border-top:1px solid #34455b;padding:13px 10px 0;font-size:12px;color:#d5deea}.sidebar-bottom div{margin:10px 0}.sidebar-bottom small{display:block;color:#8d9caf;line-height:1.55;margin-top:15px}
.main{min-width:0}.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 24px;position:sticky;top:0;z-index:10}
.api-pill{margin-right:auto;font-size:10px;color:#257050;background:#e8f8ef;border:1px solid #c7ecd8;border-radius:99px;padding:6px 9px}.api-pill.error{color:#a53636;background:#fff0f0;border-color:#f0cccc}
.bell{position:relative;color:#53637a;font-size:18px}.bell span{position:absolute;right:-10px;top:-10px;min-width:17px;height:17px;border-radius:50%;background:#e84b68;color:#fff;font-size:9px;display:grid;place-items:center;font-weight:800}
.owner-box{display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:12px}.owner-avatar{width:34px;height:34px;border-radius:50%;background:#eef2f7;display:grid;place-items:center;font-weight:800}.owner-box b{display:block;font-size:12px}.owner-box small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.icon-btn{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}.mobile-menu{display:none}.content{padding:16px}.page{display:none}.page.active{display:block}
.hero{min-height:168px;border-radius:8px;background:radial-gradient(circle at 74% 20%,rgba(255,255,255,.045),transparent 26%),radial-gradient(circle at 92% 85%,rgba(255,255,255,.04),transparent 24%),linear-gradient(135deg,#162538,#22384c 58%,#2f455b);color:#fff;padding:24px;display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;overflow:hidden}
.hero h1{margin:0 0 8px;font-size:30px}.hero p{margin:0;font-size:14px;color:#f0f4f8}.hero-quote{text-align:right;padding-right:12px}.hero-quote strong{display:block;font-size:22px;line-height:1.25;margin-bottom:14px}.hero-quote span{font-size:10px;letter-spacing:3px;color:#d9e4ee}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:15px}.stat{min-height:132px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:16px 14px}.stat.blue{background:linear-gradient(180deg,#fbfdff,#f5f9ff)}.stat.green{background:linear-gradient(180deg,#fbfffd,#f4fbf7)}.stat.purple{background:linear-gradient(180deg,#fefcff,#faf7ff)}.stat.pink{background:linear-gradient(180deg,#fffafd,#fff5f8)}
.stat-row{display:flex;gap:12px;align-items:center}.stat-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;font-weight:900}.ib{background:#dfeaff;color:var(--blue)}.ig{background:#def5e9;color:var(--green)}.ip{background:#ece3ff;color:var(--purple)}.ix{background:#ffe3ec;color:var(--pink)}
.stat strong{font-size:23px;display:block;line-height:1}.stat small{font-size:11px;color:var(--muted);display:block;margin-top:4px;line-height:1.25}.stat button{margin-top:16px;border:0;background:transparent;padding:0;font-size:10px;font-weight:800;cursor:pointer;color:#2d68d8}.green button{color:#178b58}.purple button{color:#6f42c7}.pink button{color:#bd315e}
.mini-stats{grid-template-columns:repeat(3,1fr)}.mini-stats .stat{min-height:95px}
.panel{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.panel-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panel-head h3{margin:0;font-size:15px}.panel-head button{border:0;background:transparent;color:#3476e9;font-size:11px;cursor:pointer}
.quick-grid{padding:14px;display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.quick{border:1px solid var(--line);border-radius:8px;background:#fff;padding:14px 8px;cursor:pointer;text-align:center}.quick:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,54,82,.08)}
.qico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;margin:0 auto 9px;font-size:18px;font-weight:900}.qb{background:#e7f1ff;color:#3478ee}.qc{background:#e7f8fb;color:#18a9bf}.qp{background:#ffeaf1;color:#d74374}.qv{background:#f0e8ff;color:#6c44c7}.qo{background:#fff0e4;color:#ec6d2b}.qg{background:#edf2f7;color:#526980}.qm{background:#e9f7ef;color:#1d9f63}.quick b{font-size:11px}
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:15px}.stack{display:grid;gap:14px}.rows{padding:0 14px}.row{min-height:67px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row-left{display:flex;gap:10px;align-items:center;min-width:0}
.class-chip{width:46px;height:46px;border-radius:8px;background:linear-gradient(135deg,#edf2f7,#dfe8f2);color:#45627f;display:grid;place-items:center;font-size:9px;font-weight:900;flex:0 0 auto}.avatar-sm{width:34px;height:34px;border-radius:50%;background:#edf1f6;color:#4d6278;display:grid;place-items:center;font-size:10px;font-weight:900;flex:0 0 auto}.row-copy b{display:block;font-size:12px}.row-copy small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.cap{padding:5px 9px;border-radius:7px;background:var(--greenSoft);color:#138158;font-size:10px;font-weight:800}.cap.full{background:var(--redSoft);color:#b53838}.status{padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;display:inline-block}.status-active,.status-confirmed,.status-approved{background:var(--greenSoft);color:#16885a}.status-pending,.status-draft{background:#fff0c9;color:#9d6900}.status-cancelled,.status-rejected,.status-expired{background:var(--redSoft);color:#b63c3c}.status-frozen{background:#e6efff;color:#3563bb}
.page-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:14px}.page-actions h2{margin:0;font-size:21px}.page-actions p{margin:4px 0 0;color:var(--muted);font-size:11px}.sub-section{margin-top:28px}.btn{border:0;border-radius:8px;padding:10px 13px;font-size:12px;font-weight:800;cursor:pointer}.primary{background:var(--blue);color:#fff}.light{background:#fff;border:1px solid var(--line)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.search{min-width:210px;border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:#fff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:840px}th,td{padding:11px 13px;border-bottom:1px solid var(--line);font-size:11px;text-align:left;vertical-align:top}th{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);background:#fbfcfe}.sub{display:block;color:var(--muted);font-size:10px;margin-top:3px}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;color:#2f6fda;white-space:nowrap}.mini{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 8px;font-size:10px;cursor:pointer;margin-right:4px}.danger{color:var(--red)}.photo-tag{max-width:54px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.email-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:14px}.form-card,.preview-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px}.form-card label{display:grid;gap:6px;font-size:10px;color:var(--muted);font-weight:800;margin-bottom:12px}.form-card input,.form-card select,.form-card textarea{border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff;color:var(--ink)}.form-card textarea{min-height:190px;resize:vertical}.recipient-count{background:#f6f8fb;border:1px dashed #cfd8e4;border-radius:8px;padding:10px;font-size:11px;margin-bottom:12px}.right-actions{display:flex;gap:8px;justify-content:flex-end}.preview-card h3{margin-top:0}.preview-card p{font-size:12px;line-height:1.55;color:#53627a}.preview-card hr{border:0;border-top:1px solid var(--line);margin:15px 0}.preview-card small{color:var(--muted)}
.modal{border:0;border-radius:14px;background:#fff;color:var(--ink);padding:0;width:min(680px,calc(100% - 24px));box-shadow:0 30px 90px #0006}.modal.wide{width:min(900px,calc(100% - 24px))}.modal::backdrop{background:#08101ccc;backdrop-filter:blur(4px)}.modal-inner{padding:20px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.modal-head small{color:var(--muted)}.modal-head h3{margin:3px 0 0;font-size:23px}.close{border:1px solid var(--line);background:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:10px;color:var(--muted);font-weight:800}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff}.field textarea{min-height:90px;resize:vertical}.save{width:100%;margin-top:18px}.upload-block{grid-column:1/-1;border:1px dashed #cfd8e4;border-radius:9px;padding:11px}.upload-block img{display:block;max-width:100%;max-height:220px;object-fit:contain;margin-top:8px;border-radius:7px}.upload-block small{color:var(--muted)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.detail-section{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:12px}.detail-section h4{margin:0 0 10px}.detail-section table{min-width:0}
.toast{position:fixed;right:22px;bottom:22px;background:#17243a;color:#fff;padding:11px 14px;border-radius:8px;font-size:11px;opacity:0;transform:translateY(8px);transition:.2s;z-index:60}.toast.show{opacity:1;transform:none}.empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:1120px){.quick-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.email-grid{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app{grid-template-columns:1fr}.sidebar{position:fixed;z-index:40;width:205px;transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.mobile-menu{display:inline-block}.content{padding:12px}.stats{grid-template-columns:1fr}.mini-stats{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}.hero{flex-direction:column;align-items:flex-start}.hero-quote{text-align:left;margin-top:22px}.form-grid{grid-template-columns:1fr}.field.full,.upload-block{grid-column:auto}.owner-box{display:none}}


/* ===== Larger portal typography ===== */
body{font-size:16px}
.nav button{font-size:15px;padding:12px 12px}
.brand-name{font-size:17px}.brand-sub{font-size:12px}
.owner-box b{font-size:14px}.owner-box small{font-size:12px}
.hero h1{font-size:34px}.hero p{font-size:16px}.hero-quote strong{font-size:25px}
.stat strong{font-size:30px}.stat small{font-size:13px;line-height:1.35}
.stat button{font-size:12px}
.panel-head h3{font-size:17px}.panel-head button{font-size:13px}
.quick b{font-size:13px}
.row-copy b{font-size:14px}.row-copy small{font-size:12px}
.cap,.status{font-size:11px}
.page-actions h2{font-size:25px}.page-actions p{font-size:13px}
th{font-size:11px}td{font-size:13px}.sub{font-size:11px}
.btn{font-size:13px}.search{font-size:13px}
.form-card label,.field label{font-size:12px}
.recipient-count,.preview-card p{font-size:13px}

/* ===== Dashboard trend indicators ===== */
.trend{margin-top:12px;font-size:12px;font-weight:800;color:#64748b}
.trend.up{color:#14945d}.trend.down{color:#c2414b}.trend.flat{color:#64748b}
.trend .arrow{margin-right:4px}

/* ===== Notification bell + live activity, same data-driven behavior as Developer Portal ===== */
.bell{position:relative;border:0;background:transparent;color:#53637a;font-size:21px;cursor:pointer;padding:7px 10px;border-radius:8px}
.bell:hover{background:#f3f6fa}
.bell span{position:absolute;right:-2px;top:-4px;min-width:19px;height:19px;border-radius:50%;background:#e84b68;color:#fff;font-size:10px;display:grid;place-items:center;font-weight:900;padding:0 4px}
.bell span[hidden]{display:none!important}
.notifications-modal{width:min(620px,calc(100% - 24px))}
.notification-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 12px;color:var(--muted);font-size:12px}
.activity-list{display:grid;gap:10px;max-height:56vh;overflow:auto}
.notification-item{padding:13px 14px;border:1px solid var(--line);background:#f8fafc;border-radius:10px}
.notification-item.unread{border-color:#4b86f5;background:#f4f8ff;box-shadow:inset 3px 0 0 #4b86f5}
.notification-item strong,.notification-item small{display:block}
.notification-item strong{font-size:14px}
.notification-item .sub{font-size:12px;margin-top:4px}
.notification-item small{color:var(--muted);font-size:11px;margin-top:6px}


/* ===== Extra-large Gym Owner readability pass ===== */
body{font-size:18px}
.nav button{font-size:17px;padding:14px 13px}
.brand-name{font-size:19px}.brand-sub{font-size:13px}
.sidebar-bottom{font-size:14px}.sidebar-bottom small{font-size:12px}
.owner-box b{font-size:16px}.owner-box small{font-size:13px}
.api-pill{font-size:12px}
.hero h1{font-size:39px}.hero p{font-size:18px}.hero-quote strong{font-size:29px}.hero-quote span{font-size:12px}
.stat strong{font-size:36px}.stat small{font-size:15px}.stat button{font-size:14px}
.trend{font-size:14px}
.panel-head h3{font-size:20px}.panel-head button{font-size:14px}
.quick b{font-size:15px}.qico{font-size:21px}
.row-copy b{font-size:16px}.row-copy small{font-size:14px}
.cap,.status{font-size:13px}
.page-actions h2{font-size:29px}.page-actions p{font-size:15px}
.search{font-size:15px;padding:11px 13px}
table{min-width:920px}
th{font-size:13px;padding:13px 14px}
td{font-size:15px;padding:13px 14px}
.sub{font-size:13px}
.mini{font-size:12px;padding:7px 10px}
.btn{font-size:15px;padding:11px 15px}
.form-card label,.field label{font-size:14px}
.form-card input,.form-card select,.form-card textarea,
.field input,.field select,.field textarea{font-size:15px}
.recipient-count,.preview-card p{font-size:15px}
.modal-head small{font-size:13px}.modal-head h3{font-size:27px}
.notification-item strong{font-size:16px}
.notification-item .sub{font-size:14px}
.notification-item small{font-size:13px}


/* ===== Added owner operations ===== */
.top-search-wrap{position:relative;margin-right:4px}
.top-search{width:240px;border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:#f8fafc;font-size:14px}
.top-search-results{position:absolute;top:44px;left:0;width:320px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(20,35,55,.18);display:none;z-index:30;overflow:hidden}
.top-search-results.show{display:block}
.top-customer{padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.top-customer:last-child{border-bottom:0}
.top-customer:hover{background:#f5f8fc}
.top-customer b{display:block;font-size:14px}
.top-customer small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.today-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-bottom:15px}
.today-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:16px;gap:10px}
.today-stats>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
.today-stats strong{display:block;font-size:30px}
.today-stats span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.occupancy-list{padding:8px 14px 12px}
.occupancy-row{padding:10px 0;border-bottom:1px solid var(--line)}
.occupancy-row:last-child{border-bottom:0}
.occupancy-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.occupancy-top b{font-size:14px}
.occupancy-bar{height:8px;border-radius:99px;background:#edf1f6;margin-top:8px;overflow:hidden}
.occupancy-fill{height:100%;background:linear-gradient(90deg,#4b84f3,#6d9df7);border-radius:99px}
.activity-panel-main{margin-top:15px}
.dashboard-activity{padding:14px;grid-template-columns:1fr 1fr}
.action-group{display:flex;gap:8px;align-items:center}
@media(max-width:1050px){.today-grid{grid-template-columns:1fr}.today-stats{grid-template-columns:repeat(2,1fr)}.dashboard-activity{grid-template-columns:1fr}}
@media(max-width:760px){.top-search-wrap{display:none}.today-stats{grid-template-columns:1fr 1fr}}


/* ===== Expiring Memberships ===== */
.expiring-panel{margin-bottom:15px}
.expiry-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px;border-bottom:1px solid var(--line)}
.expiry-summary>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
.expiry-summary strong{display:block;font-size:30px}
.expiry-summary span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.expiry-list{padding:0 14px}
.expiry-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.expiry-row:last-child{border-bottom:0}
.expiry-row b{display:block;font-size:15px}
.expiry-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.expiry-days{font-size:12px;font-weight:900;color:#c26a1b;background:#fff3df;padding:7px 9px;border-radius:999px;white-space:nowrap}
.expiry-days.urgent{color:#b23a3a;background:#ffe9e9}