/* CREATIVA Brand Identity Guidelines v02, pp. 2–8. Logo artwork is unmodified.
   Primary blue #2056AE sampled from the original logo, per project owner direction.
   Helvetica Neue LT Arabic is preferred when locally installed; no licensed
   webfont was supplied. The fallback does not alter either logo's lettering. */
:root {
    --creativa-blue: #2056ae;
    --creativa-blue-dark: #19478f;
    --creativa-gold: #ffb648;
    --creativa-magenta: #b41a83;
    --creativa-orange: #f49723;
    --creativa-cyan: #0098d6;
    --creativa-green: #009b55;
    --creativa-yellow: #ffee00;
    --brand: var(--creativa-blue);
    --brand-2: var(--creativa-magenta);
    --green: var(--creativa-blue);
    --text: #1f2d44;
    --ink: var(--text);
    --muted: #596b83;
    --bg: #f6f9fd;
    --paper: var(--bg);
    --surface: #fff;
    --surface-2: #eef5ff;
    --border: #e3ebf6;
    --line: var(--border);
    --amber: #86510b;
    --brand-font: "Helvetica Neue LT Arabic", "Helvetica Neue", Tahoma, Arial, sans-serif;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-soft: 0 14px 40px rgba(32, 86, 174, .08);
    --shadow-card: 0 8px 24px rgba(31, 45, 68, .05);
    --focus-ring: #2056ae26;
}
* { box-sizing: border-box; }
body {
    background:
        radial-gradient(circle at 50% -15%, #dceef7 0, #f6f9fd 42%, #f7faff 100%);
    font-family: var(--brand-font);
    color: var(--text);
    line-height: 1.65;
    letter-spacing: 0;
}
button, input, select, textarea { font-family: inherit; }
h1,h2,h3 { line-height: 1.35; color: #18243a; letter-spacing: 0; }
.app,.shell { background: rgba(255,255,255,.68); }
.content,.main { padding: var(--space-7) 38px; }
.workspace-nav { background: var(--creativa-blue); font-family: var(--brand-font); color: #fff; gap: 18px; }
.workspace-brand { padding: 0 10px; font-size: 26px; color: #fff; }
.workspace-brand small,.workspace-user small,.workspace-footer { color: #dce8fa; }
.workspace-nav a.active { background: #fff; color: var(--creativa-blue); box-shadow: inset -3px 0 var(--creativa-gold); }
.workspace-nav a:focus-visible,.workspace-nav summary:focus-visible { outline-color: var(--creativa-gold); }
.workspace-nav .nav-group summary { color: #fff; }
.brand-partnership { display: flex; align-items: center; justify-content: center; background: #fff; padding: 14px 20px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); overflow: hidden; }
.brand-partnership img { display: block; width: min(100%, 840px); max-height: 86px; aspect-ratio: 4074 / 495; object-fit: contain; flex: 0 1 auto; }
.workspace-nav .brand-partnership { display: none; }
.public-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 14px clamp(16px, 4vw, 48px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); box-shadow: 0 12px 28px rgba(32,86,174,.06); backdrop-filter: blur(12px); }
.public-nav-brand { display: inline-flex; align-items: center; min-height: 40px; min-width: 0; }
.public-nav-brand img { display: block; width: 126px; max-height: 48px; object-fit: contain; }
.public-nav nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.public-nav nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-sm); color: var(--creativa-blue); font-weight: 700; font-size: 13px; }
.public-nav nav a:hover { background: var(--surface-2); }
.public-nav nav a:last-child { color: #fff; background: var(--creativa-blue); }
.brand-footer { display: grid; justify-items: center; padding: 24px 18px 28px; margin-top: 42px; background: rgba(255,255,255,.74); border-top: 1px solid var(--line); }
.brand-footer img { display: block; width: min(100%, 760px); max-height: 72px; aspect-ratio: 4074 / 495; object-fit: contain; }
.topbar {
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-7);
}
.eyebrow { color: var(--creativa-blue); letter-spacing: .5px; }
.public-head { background: var(--creativa-blue); border-radius: 16px; border-bottom: 5px solid var(--creativa-gold); }
.public-head .brand-partnership { margin-bottom: 24px; }
.public-head .muted { color: #e4edfa; }
.public-head h1 { margin-top: 20px; }
.public { max-width: 1000px; }
.login-shell { width: min(640px, 100%); max-width: 640px; margin: 48px auto; padding: 0 20px; }
.login-shell>.brand-partnership { margin-bottom: 20px; }
.login-shell .card { padding: 28px; border-top: 4px solid var(--creativa-gold); }
.login-intro { color: var(--muted); margin: 0 0 22px; }
.login-shell button[type=submit] { width: 100%; }
.card,.panel,.metric,.stat,.modal-card,.avatar-link,.hub-card {
    border-color: var(--line);
    border-radius: var(--radius-lg);
}
.card,.panel,.modal-card {
    box-shadow: var(--shadow-card);
    background: rgba(255,255,255,.94);
}
.card,.panel {
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}
.grid,.metrics,.filters,.actions,.row,.subgrid,.email-settings-list,.variable-grid {
    gap: var(--space-4);
}
.metric,.stat {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(32, 86, 174, .06);
}
.metric {
    border-top: 0;
    min-height: 126px;
}
.metric::after,.stat::after {
    content: "";
    position: absolute;
    inset-inline-end: 18px;
    top: 18px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(var(--creativa-blue) 0 72%, #dbeafe 72% 100%);
    opacity: .2;
}
.metric:nth-child(1),.stat:nth-child(1) { background: linear-gradient(135deg, #fff 0%, #eff6ff 100%); }
.metric:nth-child(2),.stat:nth-child(2) { background: linear-gradient(135deg, #fff 0%, #fff7e6 100%); }
.metric:nth-child(3),.stat:nth-child(3) { background: linear-gradient(135deg, #fff 0%, #fff0f8 100%); }
.metric:nth-child(4),.stat:nth-child(4) { background: linear-gradient(135deg, #fff 0%, #ecfbff 100%); }
.stat .value,.metric b {
    color: #17233a;
    font-weight: 800;
}
button,.btn {
    background: var(--creativa-blue);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 20px rgba(32,86,174,.12);
}
button.secondary,.btn.secondary,.secondary { background: var(--surface-2); color: var(--creativa-blue); }
button.danger,.btn.danger { background: #a33445; color: #fff; }
.avatar,.avatar-fallback { background: var(--surface-2); color: var(--creativa-blue); }
input,select,textarea {
    border-color: #cfdced;
    border-radius: var(--radius-sm);
    background: #fff;
}
input:focus,select:focus,textarea:focus { border-color: var(--creativa-blue); outline: 3px solid var(--focus-ring); outline-offset: 1px; }
input[type=checkbox],input[type=radio] { accent-color: var(--creativa-blue); }
a:focus-visible,button:focus-visible { outline: 3px solid var(--creativa-gold); outline-offset: 3px; }
.hint { background: var(--surface-2); border-right-color: var(--creativa-blue); border-radius: var(--radius-sm); }
.progress span,.bar { background: var(--creativa-blue); }
.bar.planned { background: #91abd3; }
.progress { background: #e5edf8; }
.column,.cohort-nav-row { background: #eef5ff; border: 1px solid var(--line); }
table { background: transparent; }
th { color: var(--muted); font-weight: 700; }
th,td { border-bottom-color: #edf2f8; }
.badge {
    border-radius: var(--radius-xs);
    background: #eef5ff;
    color: var(--creativa-blue-dark);
}
.badge.confirmed,.badge.accepted,.badge.completed { color: var(--creativa-blue-dark); background: #e7f0ff; }
.badge.waitlist,.badge.awaiting_payment,.badge.registration_open { color: #8a5a08; background: #fff4db; }
.badge.cancelled,.badge.identity_review { color: #9e4135; background: #fae9e5; }
@media(max-width:900px) {
    .workspace-nav { gap: 12px; }
    .workspace-nav .nav-group { grid-column: 1 / -1; }
    .workspace-nav .nav-group>div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
    .brand-partnership { gap: 16px; padding: 16px; }
    .brand-partnership img { max-height: 62px; }
    .public-nav { position: static; display: grid; padding: 12px 14px; gap: 10px; }
    .public-nav nav { justify-content: stretch; }
    .public-nav nav a { flex: 1; padding-inline: 10px; }
    .content,.main { padding: 20px 14px; }
    .public { margin: 20px auto; padding: 0 14px; }
    .public-head { padding: 20px; }
    .public-head .brand-partnership { padding: 12px; gap: 10px; }
    .public-head h1 { font-size: 23px; }
    .login-shell { margin: 24px auto; padding: 0 14px; }
    .topbar { flex-wrap: wrap; gap: 14px; }
}
@media print {
    body { background: #fff; }
    .workspace-nav { position: static; height: auto; background: #fff; color: #243247; }
    .brand-partnership { break-inside: avoid; }
}