/* ZFC Premium Presentation — Design A role-specific compositions.
 * Presentation only: no reward, wallet, eligibility, commerce or permission logic lives here.
 * All accents inherit the admin-owned Club Appearance variables from premium.css.
 */

.zp-design-a .zp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:start}
.zp-design-a .zp-grid>.zp-card{min-width:0}

/* MEMBER — personal journey / rewards workspace. */
.zp-design-a.zp-role-member .zp-main{max-width:1320px}
.zp-design-a.zp-role-member .zp-page-title .zp-title-icon{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line));background:color-mix(in srgb,var(--gold) 12%,var(--zfc-surface,#071b2d))}
.zp-design-a.zp-role-member .zp-identity{background:radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 28%),radial-gradient(circle at 72% 75%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 35%),linear-gradient(118deg,var(--zfc-surface,#071b2d),color-mix(in srgb,var(--cyan) 9%,var(--zfc-background,#030b17)) 58%,color-mix(in srgb,var(--violet) 8%,var(--zfc-background,#030b17)));border-color:color-mix(in srgb,var(--cyan) 22%,var(--line))}
.zp-design-a.zp-role-member .zp-orbit{background:conic-gradient(from 30deg,var(--gold),color-mix(in srgb,var(--gold) 70%,white),var(--violet),var(--cyan),var(--gold))}
.zp-design-a.zp-role-member .zp-identity-status .zp-large-jewel svg{color:var(--gold);fill:color-mix(in srgb,var(--gold) 18%,transparent)}
.zp-design-a.zp-role-member .zp-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.zp-design-a.zp-role-member .zp-kpi{background:linear-gradient(145deg,var(--zfc-surface,#071b2d),var(--zfc-background,#030b17))}
.zp-design-a.zp-role-member .zp-section-targets{order:1;grid-column:span 8;border-color:color-mix(in srgb,var(--gold) 48%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--gold) 9%,var(--zfc-surface,#071b2d)),var(--zfc-background,#030b17) 70%)}
.zp-design-a.zp-role-member .zp-section-summary{order:2;grid-column:span 4}
.zp-design-a.zp-role-member .zp-section-milestones{order:3;grid-column:span 12}
.zp-design-a.zp-role-member .zp-section-intelligence{order:4;grid-column:span 8}
.zp-design-a.zp-role-member .zp-section-ai{order:5;grid-column:span 4;border-color:color-mix(in srgb,var(--violet) 42%,var(--line));background:radial-gradient(circle at 0 100%,color-mix(in srgb,var(--violet) 18%,transparent),transparent 60%),var(--zfc-surface,#071b2d)}
.zp-design-a.zp-role-member .zp-section-offers{order:6;grid-column:span 12}
.zp-design-a.zp-role-member .zp-section-activity{order:7;grid-column:span 7}
.zp-design-a.zp-role-member .zp-section-chat{order:8;grid-column:span 5}
.zp-design-a.zp-role-member .zp-section-notifications{order:9;grid-column:span 5}
.zp-design-a.zp-role-member .zp-section-profile{order:10;grid-column:span 7}
.zp-design-a.zp-role-member .zp-section-community{order:11;grid-column:span 12}

/* GROUP — collaborative team workspace with contribution and operations emphasis. */
.zp-design-a.zp-role-group{--group-accent:var(--cyan)}
.zp-design-a.zp-role-group .zp-main{max-width:1420px}
.zp-design-a.zp-role-group .zp-page-title .zp-title-icon{color:var(--group-accent);border-color:color-mix(in srgb,var(--group-accent) 42%,var(--line));background:color-mix(in srgb,var(--group-accent) 10%,var(--zfc-surface,#071b2d))}
.zp-design-a.zp-role-group .zp-identity{min-height:185px;background:radial-gradient(circle at 86% 25%,color-mix(in srgb,var(--group-accent) 17%,transparent),transparent 28%),linear-gradient(120deg,var(--zfc-background,#030b17),color-mix(in srgb,var(--group-accent) 12%,var(--zfc-surface,#071b2d)) 58%,var(--zfc-surface,#071b2d));border-color:color-mix(in srgb,var(--group-accent) 35%,var(--line))}
.zp-design-a.zp-role-group .zp-orbit{background:conic-gradient(var(--group-accent),color-mix(in srgb,var(--group-accent) 65%,white),var(--violet),color-mix(in srgb,var(--group-accent) 55%,var(--violet)),var(--group-accent));box-shadow:0 0 25px color-mix(in srgb,var(--group-accent) 18%,transparent)}
.zp-design-a.zp-role-group .zp-portrait{background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--group-accent) 18%,var(--zfc-surface,#071b2d)),var(--zfc-background,#030b17) 78%);color:var(--group-accent)}
.zp-design-a.zp-role-group .zp-identity-status .zp-ring{background:conic-gradient(var(--group-accent) var(--progress),var(--line) 0)}
.zp-design-a.zp-role-group .zp-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.zp-design-a.zp-role-group .zp-kpi{background:linear-gradient(145deg,color-mix(in srgb,var(--group-accent) 7%,var(--zfc-surface,#071b2d)),var(--zfc-background,#030b17));border-color:color-mix(in srgb,var(--group-accent) 22%,var(--line))}
.zp-design-a.zp-role-group .zp-kpi .zp-jewel{color:var(--group-accent);border-color:color-mix(in srgb,var(--group-accent) 35%,var(--line));background:color-mix(in srgb,var(--group-accent) 9%,var(--zfc-surface,#071b2d))}
.zp-design-a.zp-role-group .zp-section-targets{order:1;grid-column:span 7;border-color:color-mix(in srgb,var(--group-accent) 38%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--group-accent) 10%,var(--zfc-surface,#071b2d)),var(--zfc-background,#030b17) 72%)}
.zp-design-a.zp-role-group .zp-section-summary{order:2;grid-column:span 5}
.zp-design-a.zp-role-group .zp-section-roster{order:3;grid-column:span 8;border-color:color-mix(in srgb,var(--group-accent) 26%,var(--line))}
.zp-design-a.zp-role-group .zp-section-notifications{order:4;grid-column:span 4}
.zp-design-a.zp-role-group .zp-section-chat{order:5;grid-column:span 7;border-color:color-mix(in srgb,var(--group-accent) 26%,var(--line))}
.zp-design-a.zp-role-group .zp-section-activity{order:6;grid-column:span 5}
.zp-design-a.zp-role-group .zp-section-intelligence{order:7;grid-column:span 12}
.zp-design-a.zp-role-group .zp-section-ai{order:8;grid-column:span 5}
.zp-design-a.zp-role-group .zp-section-offers{order:9;grid-column:span 7}
.zp-design-a.zp-role-group .zp-section-community{order:10;grid-column:span 12}
.zp-design-a.zp-role-group .zp-card h2 svg{color:var(--group-accent)}

/* MEGA — competition / command-center composition. */
.zp-design-a.zp-role-mega{--mega-accent:var(--violet);--mega-gold:var(--gold)}
.zp-design-a.zp-role-mega .zp-main{max-width:1540px}
.zp-design-a.zp-role-mega .zp-page-title{padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--mega-accent) 24%,var(--line))}
.zp-design-a.zp-role-mega .zp-page-title .zp-title-icon{color:var(--mega-gold);border-color:color-mix(in srgb,var(--mega-gold) 45%,var(--line));background:color-mix(in srgb,var(--mega-gold) 10%,var(--zfc-surface,#071b2d))}
.zp-design-a.zp-role-mega .zp-identity{min-height:205px;background:radial-gradient(circle at 80% 18%,color-mix(in srgb,var(--mega-accent) 22%,transparent),transparent 29%),radial-gradient(circle at 92% 76%,color-mix(in srgb,var(--mega-gold) 12%,transparent),transparent 25%),linear-gradient(115deg,var(--zfc-background,#030b17),color-mix(in srgb,var(--mega-accent) 12%,var(--zfc-surface,#071b2d)) 52%,color-mix(in srgb,var(--mega-accent) 16%,var(--zfc-background,#030b17)));border-color:color-mix(in srgb,var(--mega-accent) 36%,var(--line));box-shadow:inset 0 0 42px color-mix(in srgb,var(--mega-accent) 8%,transparent),0 10px 30px #0005}
.zp-design-a.zp-role-mega .zp-orbit{background:conic-gradient(var(--cyan),var(--mega-accent),var(--mega-gold),color-mix(in srgb,var(--cyan) 45%,var(--mega-accent)),var(--cyan));box-shadow:0 0 30px color-mix(in srgb,var(--mega-accent) 24%,transparent)}
.zp-design-a.zp-role-mega .zp-identity-status .zp-large-jewel svg{color:var(--mega-gold);fill:color-mix(in srgb,var(--mega-accent) 14%,transparent)}
.zp-design-a.zp-role-mega .zp-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.zp-design-a.zp-role-mega .zp-kpi{background:linear-gradient(145deg,color-mix(in srgb,var(--mega-accent) 8%,var(--zfc-surface,#071b2d)),var(--zfc-background,#030b17));border-color:color-mix(in srgb,var(--mega-accent) 22%,var(--line))}
.zp-design-a.zp-role-mega .zp-kpi .zp-jewel{color:var(--mega-accent);border-color:color-mix(in srgb,var(--mega-accent) 38%,var(--line));background:color-mix(in srgb,var(--mega-accent) 10%,var(--zfc-surface,#071b2d))}
.zp-design-a.zp-role-mega .zp-section-competition{order:1;grid-column:span 12;border-color:color-mix(in srgb,var(--mega-accent) 48%,var(--line));background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--mega-accent) 10%,transparent),transparent 48%),linear-gradient(130deg,color-mix(in srgb,var(--mega-accent) 7%,var(--zfc-surface,#071b2d)),var(--zfc-background,#030b17))}
.zp-design-a.zp-role-mega .zp-section-milestones{order:2;grid-column:span 8}
.zp-design-a.zp-role-mega .zp-section-rewards{order:3;grid-column:span 4;border-color:color-mix(in srgb,var(--mega-gold) 45%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--mega-gold) 8%,var(--zfc-surface,#071b2d)),var(--zfc-background,#030b17))}
.zp-design-a.zp-role-mega .zp-section-intelligence{order:4;grid-column:span 8}
.zp-design-a.zp-role-mega .zp-section-roster{order:5;grid-column:span 4}
.zp-design-a.zp-role-mega .zp-section-business{order:6;grid-column:span 8;border-color:color-mix(in srgb,var(--mega-accent) 24%,var(--line))}
.zp-design-a.zp-role-mega .zp-section-notifications{order:7;grid-column:span 4}
.zp-design-a.zp-role-mega .zp-section-offers{order:8;grid-column:span 6}
.zp-design-a.zp-role-mega .zp-section-activity{order:9;grid-column:span 6}
.zp-design-a.zp-role-mega .zp-section-chat{order:10;grid-column:span 8}
.zp-design-a.zp-role-mega .zp-section-ai{order:11;grid-column:span 4;border-color:color-mix(in srgb,var(--mega-accent) 36%,var(--line))}
.zp-design-a.zp-role-mega .zp-section-community{order:12;grid-column:span 12}
.zp-design-a.zp-role-mega .zp-card h2 svg{color:var(--mega-gold)}
.zp-design-a.zp-role-mega .zp-podium{min-height:250px;padding-top:45px}
.zp-design-a.zp-role-mega .zp-podium li:first-child{border-color:var(--mega-gold);box-shadow:0 0 26px color-mix(in srgb,var(--mega-gold) 13%,transparent)}

/* Tablet/mobile: all roles become linear without losing their separate visual identity. */
@media(max-width:960px){
 .zp-design-a.zp-role-member .zp-grid>.zp-card,
 .zp-design-a.zp-role-group .zp-grid>.zp-card,
 .zp-design-a.zp-role-mega .zp-grid>.zp-card{grid-column:span 12}
 .zp-design-a.zp-role-member .zp-kpis,
 .zp-design-a.zp-role-group .zp-kpis,
 .zp-design-a.zp-role-mega .zp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){
 .zp-design-a.zp-role-member .zp-kpis,
 .zp-design-a.zp-role-group .zp-kpis,
 .zp-design-a.zp-role-mega .zp-kpis{grid-template-columns:1fr}
 .zp-design-a.zp-role-member .zp-identity,
 .zp-design-a.zp-role-group .zp-identity,
 .zp-design-a.zp-role-mega .zp-identity{min-height:170px}
 .zp-design-a.zp-role-mega .zp-podium{min-height:0}
}


/* Demo A alignment and owner-controlled palette, presentation only. */
.zp-design-a{
  --cyan:var(--zfc-primary);
  --gold:var(--zfc-gold);
  --violet:var(--zfc-violet);
  --muted:var(--zfc-muted);
  --line:var(--zfc-border);
  color:var(--zfc-text);
  background:radial-gradient(ellipse at 88% 0,color-mix(in srgb,var(--zfc-violet) 8%,transparent),transparent 42%),var(--zfc-background);
}
.zp-design-a .zp-header{background:linear-gradient(90deg,var(--zfc-background),var(--zfc-surface) 62%,var(--zfc-background));border-color:var(--zfc-border);color:var(--zfc-text)}
.zp-design-a .zp-page-title h1,.zp-design-a .zp-identity h2,.zp-design-a .zp-card h2,.zp-design-a .zp-card h3,.zp-design-a .zp-kpi strong{color:var(--zfc-text)}
.zp-design-a .zp-card,.zp-design-a .zp-kpi,.zp-design-a .zp-insight,.zp-design-a .zp-team-list li{border-color:var(--zfc-border)}
.zp-design-a .zp-card>header,.zp-design-a .zp-card>summary,.zp-design-a .zp-activity li,.zp-design-a .zp-table-scroll th,.zp-design-a .zp-table-scroll td{border-color:var(--zfc-border)}
.zp-design-a .zp-button,.zp-design-a .zp button{background:var(--zfc-button);color:var(--zfc-button_text);border-color:var(--zfc-border)}
.zp-design-a .zp-card p,.zp-design-a .zp-muted,.zp-design-a .zp-kpi small,.zp-design-a .zp-kpi span:not(.zp-jewel){color:var(--zfc-muted)}
/* The role-specific navigation strip duplicated the global dashboard navigation and pushed demo sections below the fold. */
.zp-design-a .zp-role-stage{display:none}
@media(max-width:960px){.zp-design-a .zp-header{border-radius:0}}