/* SXCCAA U.A.E. Alumni Directory — portal components, scoped to .sxccaa so they
   sit cleanly inside the WordPress theme (theme supplies header/footer).
   Heritage palette from the crest; Fraunces (display) + Montserrat (UI). */

/* Hide the theme's "Alumni Directory" page title — the views carry their own
   headings (hero / page-head). This stylesheet loads ONLY on the portal page,
   so the rule is page-scoped and affects nothing else. */
.page-header{display:none}

.sxccaa{
  --gold:#f5d34e;--gold-deep:#d8b320;--blue:#2b3a8c;--blue-deep:#1f2a66;
  --maroon:#7a2231;--ink:#241d16;--muted:#6c6457;--surface:#fffdf7;--line:#e7ddc6;
  --shadow:0 1px 2px rgba(36,29,22,.05),0 10px 30px -14px rgba(36,29,22,.22);
  --shadow-lg:0 2px 4px rgba(36,29,22,.06),0 24px 48px -20px rgba(31,42,102,.28);
  --r:14px;
  font-family:'Montserrat',system-ui,sans-serif;color:var(--ink);line-height:1.6;
  max-width:1140px;margin:0 auto;
}
.sxccaa *{box-sizing:border-box}
/* Breathing room below the sticky nav (the theme page-title that used to sit here
   is hidden). Declared after the shorthand above so it wins over margin:0. */
.sxccaa{margin-top:clamp(22px,3.2vw,40px)}
.sxccaa h1,.sxccaa h2,.sxccaa h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.sxccaa h1{font-size:clamp(1.8rem,4vw,2.7rem);margin:0 0 .35em}
.sxccaa h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0 0 .5em}
.sxccaa h3{font-size:1.12rem;margin:0}
.sxccaa p{margin:.4em 0}
.sxccaa a{color:var(--blue)}
.sxccaa img{max-width:100%;display:block}
.sxccaa .eyebrow{font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.sxccaa .hint{color:var(--muted);font-size:.9rem}

/* buttons */
.sxccaa .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;font-weight:600;font-size:.92rem;padding:10px 18px;border-radius:10px;border:1px solid var(--blue);text-decoration:none;cursor:pointer;line-height:1.1;transition:background .15s,box-shadow .15s}
.sxccaa .btn:hover{background:var(--blue-deep);box-shadow:var(--shadow);color:#fff}
.sxccaa .btn-gold{background:var(--gold);border-color:var(--gold);color:#3a2e05}
.sxccaa .btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#2c2203}
.sxccaa .btn-ghost{background:transparent;color:var(--blue);border:1px solid #c9d0e8}
.sxccaa .btn-ghost:hover{background:#eef1fb;box-shadow:none;color:var(--blue)}

/* flash */
.sxccaa .flash{padding:12px 16px;border-radius:10px;margin:0 0 16px;font-weight:500;border:1px solid transparent}
.sxccaa .flash-info{background:#eef1fb;border-color:#d4dbf4;color:var(--blue-deep)}
.sxccaa .flash-error{background:#fcecec;border-color:#f3cfcf;color:#8d2130}
.sxccaa .flash-success{background:#eaf6ec;border-color:#cfe8d4;color:#1f6b35}

/* hero */
.sxccaa .sx-hero{position:relative;overflow:hidden;color:#fff;border-radius:18px;margin:4px 0 26px;padding:clamp(28px,5vw,52px);
  background:radial-gradient(1200px 400px at 85% -30%,rgba(245,211,78,.22),transparent 60%),linear-gradient(135deg,var(--blue-deep),var(--blue) 55%,#33409a)}
.sxccaa .sx-hero::after{content:"";position:absolute;right:-20px;bottom:-20px;width:230px;height:150px;background-image:radial-gradient(rgba(245,211,78,.55) 1.7px,transparent 1.8px);background-size:18px 18px;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(135deg,transparent,#000);mask-image:linear-gradient(135deg,transparent,#000)}
.sxccaa .sx-hero .eyebrow{color:var(--gold)}
.sxccaa .sx-hero h1{color:#fff;max-width:18ch}
.sxccaa .sx-hero p{max-width:54ch;color:rgba(255,255,255,.88);font-size:1.02rem;margin:.2em 0 1.3em}
.sxccaa .sx-hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.sxccaa .sx-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.sxccaa .sx-hero .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}

/* page head + filter + scope note */
.sxccaa .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.sxccaa .page-head .eyebrow{display:block;margin-bottom:6px}
.sxccaa .filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 22px}
.sxccaa .filterbar input,.sxccaa .filterbar .btn{height:46px;line-height:normal}
.sxccaa .filterbar input{min-width:0}
.sxccaa .filterbar input[name="q"]{flex:1 1 240px}
.sxccaa .filterbar input[name="batch"]{flex:0 1 150px}
.sxccaa .filterbar .btn{flex:0 0 auto;white-space:nowrap;padding-top:0;padding-bottom:0;margin-top:0}
.sxccaa .filterbar .btn-ghost{margin-left:auto}
@media(max-width:560px){
  .sxccaa .filterbar input[name="batch"]{flex:1 1 130px}
  .sxccaa .filterbar .btn{flex:1 1 auto}
  .sxccaa .filterbar .btn-ghost{margin-left:0}
}
.sxccaa .scope-note{display:flex;align-items:center;gap:9px;background:#eef1fb;border:1px solid #d9e0f5;color:var(--blue-deep);padding:11px 15px;border-radius:11px;font-size:.9rem;font-weight:500;margin:0 0 20px}
.sxccaa .scope-note::before{content:"🔒"}
.sxccaa .sx-back{text-decoration:none;font-weight:600;font-size:.9rem}

/* cards */
.sxccaa .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.sxccaa .card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;box-shadow:var(--shadow);transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s;animation:sx-rise .5s both}
.sxccaa .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d8cba6}
.sxccaa .avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:8px;border:2px solid var(--gold)}
.sxccaa .avatar.mono{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--blue),var(--blue-deep));color:var(--gold);font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem}
.sxccaa .card h3{font-size:1.1rem}
.sxccaa .batch{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-top:2px}
.sxccaa .role{color:var(--muted);font-size:.88rem;margin:6px 0 0}
.sxccaa .badge{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:#3a2e05;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-top:10px}
.sxccaa .badge::before{content:"★";font-size:.7em}
@keyframes sx-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sxccaa .cards .card:nth-child(1){animation-delay:.02s}.sxccaa .cards .card:nth-child(2){animation-delay:.06s}
.sxccaa .cards .card:nth-child(3){animation-delay:.10s}.sxccaa .cards .card:nth-child(4){animation-delay:.14s}
.sxccaa .cards .card:nth-child(5){animation-delay:.18s}.sxccaa .cards .card:nth-child(n+6){animation-delay:.22s}

/* profile head */
.sxccaa .profile-head{display:flex;align-items:center;gap:22px;margin:4px 0 22px;flex-wrap:wrap}
.sxccaa .profile-head .avatar{width:96px;height:96px;border:3px solid var(--gold)}
.sxccaa .profile-head .avatar.mono{font-size:2rem}
.sxccaa .profile-head h1{margin:.1em 0 0}

/* dashboard pills */
.sxccaa .dash-pills{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.sxccaa .pill{background:#f1ead6;color:#5a4a1e;font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.sxccaa .pill-status.status-active{background:var(--gold);color:#3a2e05}
.sxccaa .pill-status.status-pending{background:#eef1fb;color:var(--blue-deep)}

/* forms */
.sxccaa .formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(20px,4vw,32px);max-width:640px}
.sxccaa form label{display:block;margin:14px 0 5px;font-weight:600;font-size:.9rem}
.sxccaa form label.inline{display:flex;align-items:center;gap:9px;font-weight:500;font-size:.9rem;line-height:1.4}
/* Checkboxes & radios are native controls — strip the text-input styling that the
   rule below would otherwise apply (full width, 11px padding, border, radius) so
   the box keeps its real size and lines up with the first line of the label. */
.sxccaa form label.inline input[type=checkbox],
.sxccaa form label.inline input[type=radio]{
  width:17px;height:17px;min-width:17px;flex:0 0 auto;
  padding:0;margin:0;border:0;border-radius:0;background:none;
  accent-color:var(--blue);cursor:pointer;
}
.sxccaa form input,.sxccaa form select,.sxccaa form textarea{width:100%;padding:11px 13px;border:1px solid #d7cdb4;border-radius:10px;background:#fffef9;font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.sxccaa form input:focus,.sxccaa form select:focus,.sxccaa form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,58,140,.14)}
.sxccaa form .btn{margin-top:20px}
.sxccaa .err{color:#9c2234;font-size:.84rem;margin-top:4px}

/* two-column form grid (fills desktop width; collapses on small screens) */
.sxccaa .formcard.is-wide{max-width:900px}
.sxccaa .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 26px}
.sxccaa .form-grid .field{display:flex;flex-direction:column;min-width:0}
.sxccaa .form-grid .field--full{grid-column:1 / -1}
.sxccaa .form-grid .field > label{margin-top:16px}
.sxccaa .form-section{grid-column:1 / -1;margin:24px 0 2px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.sxccaa .form-section:first-child{margin-top:6px}
.sxccaa .form-grid .field--full > label.inline{margin-top:18px}
.sxccaa .radio-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.sxccaa .radio-row label.inline{margin-top:0;font-weight:500}
.sxccaa .radio-row label.inline input{margin-top:1px}
.sxccaa .sx-summary{cursor:pointer;font-weight:600;color:var(--blue);font-size:.9rem;padding:8px 0;list-style:none}
.sxccaa details[open] .sx-summary{color:var(--blue-deep)}
.sxccaa .sx-summary::-webkit-details-marker{display:none}
.sxccaa textarea{resize:vertical;min-height:52px}
@media(max-width:620px){.sxccaa .form-grid{grid-template-columns:1fr}}

/* tables */
.sxccaa table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sxccaa th,.sxccaa td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
.sxccaa th{background:#f3ecda;font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);width:150px}
.sxccaa tr:last-child td{border-bottom:none}

@media(max-width:640px){.sxccaa .page-head{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.sxccaa .card{animation:none}}

/* repeatable qualifications rows */
.sxccaa .sx-qual-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.sxccaa .sx-qual-row input{margin:0}
.sxccaa .sx-qual-year{flex:0 0 96px}
.sxccaa .sx-qual-del{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:10px;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer}
.sxccaa .sx-qual-del:hover{color:#8d2130;border-color:#e3b9bf}
.sxccaa .sx-qual-add{margin-top:2px;background:none;border:0;color:var(--blue);font-weight:600;font-size:.9rem;cursor:pointer;padding:4px 0}
@media(max-width:620px){.sxccaa .sx-qual-row{flex-wrap:wrap}.sxccaa .sx-qual-year{flex:1 1 auto}}

/* membership payment step */
.sxccaa .pay-summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 18px;background:#f3ecda;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
.sxccaa .pay-label{font-weight:700;color:var(--blue-deep)}
.sxccaa .pay-amount{font-size:1.5rem;font-weight:800;color:var(--blue-deep)}
.sxccaa .pay-note{padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--surface);font-size:.88rem;color:var(--muted);margin:14px 0}

/* v1.0.19 visual refresh: resilient against theme and Elementor form defaults. */
.sxccaa{width:min(100% - 32px,1180px);margin:clamp(24px,4vw,56px) auto 64px!important;font-family:Inter,Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#171b2b!important;line-height:1.65!important}
.sxccaa *{box-sizing:border-box}
.sxccaa h1,.sxccaa h2,.sxccaa h3{font-family:Inter,Montserrat,system-ui,sans-serif!important;color:#111827!important;letter-spacing:-.035em!important}
.sxccaa h1{font-size:clamp(2.1rem,5vw,3.7rem)!important;line-height:1.08!important;font-weight:800!important}
.sxccaa h2{font-size:clamp(1.45rem,3vw,2rem)!important;font-weight:750!important}
.sxccaa p{line-height:1.75}
.sxccaa .sx-hero{isolation:isolate;background:radial-gradient(ellipse at 90% 0%,rgba(245,211,78,.22),transparent 38%),linear-gradient(135deg,#172554 0%,#273b86 55%,#394bb0 100%)!important;border-radius:26px!important;padding:clamp(28px,6vw,68px)!important;margin:0 0 32px!important;box-shadow:0 22px 55px rgba(31,42,102,.18)!important}
.sxccaa .sx-hero h1{max-width:19ch;color:#fff!important;font-size:clamp(1.9rem,5vw,48px)!important;line-height:1.12!important;margin:12px 0 18px!important}
.sxccaa .sx-hero p{max-width:64ch;color:rgba(255,255,255,.86)!important;font-size:clamp(1rem,1.4vw,1.12rem)!important;margin:0 0 28px!important}
.sxccaa .sx-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffe88a!important;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:7px 12px;border-radius:999px;font-size:.73rem;letter-spacing:.13em}
.sxccaa .actions{display:flex!important;gap:12px!important;align-items:center!important;flex-wrap:wrap!important}
.sxccaa .btn,.sxccaa a.btn,.sxccaa button.btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;min-height:48px!important;padding:13px 20px!important;border:1px solid transparent!important;border-radius:12px!important;font-family:inherit!important;font-size:.94rem!important;font-weight:700!important;line-height:1.25!important;text-decoration:none!important;white-space:normal!important;box-shadow:0 5px 14px rgba(17,24,39,.08)!important;transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;cursor:pointer!important}
.sxccaa .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(17,24,39,.16)!important}
.sxccaa .btn:focus-visible,.sxccaa a:focus-visible{outline:3px solid #f5d34e!important;outline-offset:3px!important}
.sxccaa .btn-gold{background:#f5d34e!important;border-color:#f5d34e!important;color:#24200e!important}
.sxccaa .btn-gold:hover{background:#ffdf62!important;color:#24200e!important}
.sxccaa .btn-ghost{background:#fff!important;border:1px solid #c9d0e8!important;color:#263579!important;box-shadow:0 5px 14px rgba(17,24,39,.06)!important}
.sxccaa .btn-ghost:hover{background:#eef1fb!important;border-color:#aeb8de!important;color:#1f2a66!important}
.sxccaa .btn-outline-gold{background:#fff!important;color:#263579!important;border-color:#d7dced!important;box-shadow:0 5px 14px rgba(17,24,39,.06)!important}
.sxccaa .btn-outline-gold:hover{background:#fff9dd!important;border-color:#e4c83f!important;color:#1f2a66!important}
.sxccaa .btn-outline-gold span[aria-hidden]{color:#e0ac10!important;font-size:1em!important}
/* hero secondary button: clean outline, not a muddy translucent slab */
.sxccaa .sx-hero .btn-ghost{background:transparent!important;border:1.5px solid rgba(255,255,255,.72)!important;color:#fff!important}
.sxccaa .sx-hero .btn-ghost:hover{background:rgba(255,255,255,.14)!important;border-color:#fff!important;color:#fff!important}
.sxccaa .sx-hero .actions .btn{padding:13px 24px!important}
.sxccaa .filterbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(150px,.38fr) auto auto!important;align-items:center!important;gap:12px!important;padding:18px!important;background:#fff!important;border:1px solid #e5e7ef!important;border-radius:18px!important;box-shadow:0 10px 30px rgba(22,34,70,.06)!important;margin:0 0 22px!important}
.sxccaa .filterbar input,.sxccaa .filterbar input[name="q"],.sxccaa .filterbar input[name="batch"]{width:100%!important;min-width:0!important;height:48px!important;padding:0 15px!important;background:#fff!important;border:1px solid #d9deea!important;border-radius:11px!important;color:#1f2937!important;font:500 15px/1.4 Inter,system-ui,sans-serif!important;box-shadow:none!important}
.sxccaa .filterbar input:focus{outline:none!important;border-color:#35489b!important;box-shadow:0 0 0 4px rgba(53,72,155,.12)!important}
.sxccaa .filterbar .btn{margin:0!important;min-height:48px!important;flex:none!important}
.sxccaa .filterbar .btn-ghost{margin:0!important}
.sxccaa .scope-note{padding:14px 17px!important;background:#f3f5ff!important;border:1px solid #e0e5ff!important;border-radius:13px!important;color:#344178!important;font-size:.92rem!important;margin:0 0 24px!important}
.sxccaa .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr))!important;gap:20px!important}
.sxccaa .card{background:#fff!important;border:1px solid #e6e8f0!important;border-radius:18px!important;padding:26px 22px!important;box-shadow:0 8px 24px rgba(22,34,70,.055)!important;color:#182033!important}
.sxccaa .card:hover{border-color:#c9d1f0!important;box-shadow:0 18px 38px rgba(22,34,70,.12)!important}
.sxccaa .card h3{font-size:1.12rem!important;font-weight:750!important;color:#161d32!important}
.sxccaa .batch{color:#8b6a00!important;letter-spacing:.09em!important}
.sxccaa .avatar{border-color:#f5d34e!important;width:76px!important;height:76px!important}
.sxccaa .avatar.mono{background:linear-gradient(145deg,#273b86,#172554)!important;color:#ffe88a!important}
.sxccaa .badge{background:#fff4b8!important;color:#574400!important}
.sxccaa .hint{padding:22px!important;background:#f8f9fc!important;border:1px dashed #cfd5e4!important;border-radius:14px!important;color:#5d667a!important}
.sxccaa .page-head{border-color:#e5e7ef!important}
.sxccaa .page-head h1{font-size:clamp(1.8rem,4.5vw,48px)!important;line-height:1.12!important}
.sxccaa .formcard{background:#fff!important;border-color:#e5e7ef!important;border-radius:18px!important;box-shadow:0 12px 36px rgba(22,34,70,.07)!important}
.sxccaa form input:not([type=checkbox]):not([type=radio]),.sxccaa form select,.sxccaa form textarea{min-height:46px;border-color:#d9deea!important;border-radius:10px!important;background:#fff!important;color:#1f2937!important}
.sxccaa form label{color:#30384d!important}
.sxccaa .flash{border-radius:12px!important}
@media(max-width:760px){.sxccaa{width:min(100% - 24px,1180px)!important;margin-top:20px!important}.sxccaa .filterbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;padding:13px!important}.sxccaa .filterbar input[name="q"]{grid-column:1/-1}.sxccaa .filterbar .btn{width:100%!important}.sxccaa .filterbar .btn-outline-gold{grid-column:1/-1}.sxccaa .sx-hero{border-radius:20px!important}.sxccaa .actions .btn{width:100%!important}}
@media(prefers-reduced-motion:reduce){.sxccaa *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* v1.0.20: distinct page-level headings and accessible filter fields. */
.sxccaa .sx-directory-heading{align-items:center;gap:24px;margin-bottom:24px;padding:24px 0 22px;border-bottom:1px solid #e7eaf3}
.sxccaa .sx-directory-heading h1{font-size:clamp(1.8rem,4.5vw,48px)!important;line-height:1.12!important;margin:5px 0 10px!important}
.sxccaa .sx-directory-heading p{max-width:66ch;color:#667085;margin:0!important}
.sxccaa .sx-directory-heading .btn{flex:0 0 auto}
.sxccaa .sx-directory-filters{padding:14px;background:#f8f9fc;border:1px solid #e5e8f1;border-radius:16px}
.sxccaa .sx-directory-filters input{min-height:46px;border:1px solid #dfe3ed;border-radius:11px;background:#fff;padding:11px 13px;font:inherit;box-shadow:none}
.sxccaa .sx-directory-filters input[name="department"],.sxccaa .sx-directory-filters input[name="profession"]{flex:1 1 220px}
.sxccaa .sx-directory-filters .btn{min-height:46px;margin:0!important}
.sxccaa .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.sxccaa .sx-directory-heading{align-items:flex-start;padding-top:8px}.sxccaa .sx-directory-heading .btn{width:100%}.sxccaa .sx-directory-filters{padding:11px}.sxccaa .sx-directory-filters input{flex:1 1 100%;width:100%}}


/* v1.0.25 — modern responsive portal refresh; presentation-only overrides. */
.sxccaa{
  --sx-ink:#172033;
  --sx-muted:#667085;
  --sx-line:#e4e8f0;
  --sx-surface:#ffffff;
  --sx-soft:#f7f8fc;
  --sx-navy:#202d70;
  --sx-navy-deep:#151f50;
  --sx-gold:#f2ce45;
  width:min(calc(100% - 32px),1440px)!important;
  max-width:none!important;
  margin:clamp(22px,3.6vw,48px) auto 72px!important;
  font-family:Inter,Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  color:var(--sx-ink)!important;
  line-height:1.68!important;
  isolation:isolate;
}
.sxccaa *{box-sizing:border-box}
.sxccaa h1,.sxccaa h2,.sxccaa h3{font-family:Inter,Montserrat,system-ui,sans-serif!important;color:var(--sx-ink)!important;letter-spacing:-.035em!important}
.sxccaa h1{font-weight:800!important;font-size:clamp(2rem,4.4vw,3.5rem)!important;line-height:1.08!important}
.sxccaa h2{font-weight:750!important;font-size:clamp(1.35rem,2.4vw,1.95rem)!important;line-height:1.2!important}
.sxccaa h3{font-weight:750!important;line-height:1.3!important}
.sxccaa p{color:inherit;line-height:1.75}
.sxccaa a:not(.btn){text-underline-offset:3px;transition:color .2s ease}
.sxccaa a:not(.btn):hover{color:#1f2a66}
.sxccaa .page-head{padding:0 0 22px!important;margin:0 0 24px!important;border-bottom:1px solid var(--sx-line)!important;align-items:center!important;gap:20px!important;animation:sx-fade-up .48s ease both}
.sxccaa .page-head h1{margin:5px 0 0!important;font-size:clamp(2rem,4.3vw,3.2rem)!important;line-height:1.1!important}
.sxccaa .page-head .eyebrow,.sxccaa .form-section{color:#a47400!important}
.sxccaa .eyebrow{font-size:.72rem!important;letter-spacing:.14em!important;font-weight:800!important}
.sxccaa .formcard{
  width:100%!important;
  max-width:980px!important;
  padding:clamp(22px,3.5vw,38px)!important;
  background:linear-gradient(180deg,#fff 0%,#fdfdff 100%)!important;
  border:1px solid #e2e6ef!important;
  border-radius:22px!important;
  box-shadow:0 14px 44px rgba(28,39,82,.075),0 2px 6px rgba(28,39,82,.025)!important;
  animation:sx-fade-up .5s cubic-bezier(.2,.7,.2,1) both;
  transition:box-shadow .25s ease,border-color .25s ease!important;
}
.sxccaa .formcard:hover{box-shadow:0 20px 54px rgba(28,39,82,.105),0 3px 9px rgba(28,39,82,.035)!important;border-color:#d5dced!important}
.sxccaa .formcard.is-wide{max-width:none!important;width:100%!important}
.sxccaa .formcard>.hint:first-child{padding:18px 20px!important;margin:0 0 22px!important;background:#f7f8fc!important;border:1px dashed #cdd5e7!important;border-radius:15px!important;color:#475467!important;font-size:.92rem!important;line-height:1.8!important}
.sxccaa .formcard>.hint:first-child strong{color:#344054!important}
.sxccaa .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:clamp(18px,2.4vw,34px)!important;row-gap:8px!important}
.sxccaa .form-grid .field,.sxccaa .form-grid>.field--full{min-width:0!important}
.sxccaa .form-grid .field>label,.sxccaa form>label{font-size:.86rem!important;font-weight:700!important;letter-spacing:.005em!important;color:#27324a!important;margin:14px 0 7px!important}
.sxccaa .form-section{font-size:.72rem!important;letter-spacing:.13em!important;border-bottom:1px solid #eadcb8!important;margin:25px 0 5px!important;padding:0 0 10px!important;font-weight:800!important}
.sxccaa form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.sxccaa form select,.sxccaa form textarea{
  width:100%!important;min-width:0!important;min-height:49px!important;padding:12px 15px!important;
  border:1px solid #d6ddeb!important;border-radius:12px!important;background:#fff!important;color:#202a3e!important;
  font:500 15px/1.45 Inter,Montserrat,system-ui,sans-serif!important;box-shadow:0 1px 2px rgba(16,24,40,.025)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.sxccaa form textarea{min-height:110px!important;resize:vertical!important}
.sxccaa form input::placeholder,.sxccaa form textarea::placeholder{color:#98a2b3!important;opacity:1}
.sxccaa form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):hover,
.sxccaa form select:hover,.sxccaa form textarea:hover{border-color:#b7c2d7!important}
.sxccaa form input:focus,.sxccaa form select:focus,.sxccaa form textarea:focus{outline:none!important;border-color:#394b9a!important;box-shadow:0 0 0 4px rgba(53,72,155,.12)!important;background:#fff!important}
.sxccaa form label.inline{display:flex!important;align-items:flex-start!important;gap:10px!important;color:#475467!important;font-weight:500!important;line-height:1.6!important}
.sxccaa form label.inline input[type=checkbox],.sxccaa form label.inline input[type=radio]{margin-top:4px!important;accent-color:#293b89!important}
.sxccaa .btn,.sxccaa a.btn,.sxccaa button.btn{
  min-height:49px!important;padding:13px 22px!important;border-radius:12px!important;font-weight:750!important;
  letter-spacing:-.005em!important;box-shadow:0 6px 16px rgba(27,39,91,.10)!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease!important;
}
.sxccaa .btn:hover,.sxccaa a.btn:hover,.sxccaa button.btn:hover{transform:translateY(-2px)!important;box-shadow:0 12px 26px rgba(27,39,91,.17)!important}
.sxccaa .btn:active{transform:translateY(0)!important}
.sxccaa .btn:not(.btn-gold):not(.btn-ghost):not(.btn-outline-gold){background:linear-gradient(135deg,#273b86,#1f2a66)!important;border-color:#25377d!important;color:#fff!important}
.sxccaa .flash{padding:15px 18px!important;margin-bottom:20px!important;border-radius:14px!important;box-shadow:0 5px 18px rgba(16,24,40,.035)!important;animation:sx-fade-up .35s ease both}
.sxccaa .hint{color:var(--sx-muted)!important}
.sxccaa .page-head+.formcard{margin-top:2px}
.sxccaa .profile-head{background:linear-gradient(135deg,#fff 0%,#f8f9fc 100%);border:1px solid var(--sx-line);border-radius:22px;padding:clamp(22px,3.5vw,38px);box-shadow:0 12px 35px rgba(28,39,82,.06);animation:sx-fade-up .45s ease both}
.sxccaa .profile-head .avatar{width:100px!important;height:100px!important;box-shadow:0 8px 22px rgba(28,39,82,.12)!important}
.sxccaa .scope-note{gap:12px!important;padding:15px 18px!important;border-radius:14px!important;line-height:1.65!important}
.sxccaa .dash-pills{padding:14px 0 22px;border-bottom:1px solid var(--sx-line);margin-bottom:24px!important}
.sxccaa .pill{padding:8px 14px!important;border:1px solid #e4e7ef;font-size:.73rem!important;letter-spacing:.045em!important}
.sxccaa .pay-summary{padding:22px 24px!important;background:linear-gradient(135deg,#fff9df,#fffef6)!important;border:1px solid #efe0a9!important;border-radius:16px!important}
.sxccaa .pay-note{padding:16px 18px!important;border-radius:14px!important;line-height:1.7!important}
.sxccaa table{border:1px solid #e4e8f0!important;border-radius:14px!important;box-shadow:0 8px 25px rgba(28,39,82,.045)!important;overflow:hidden}
.sxccaa th,.sxccaa td{padding:14px 16px!important;border-color:#edf0f5!important;line-height:1.55!important}
.sxccaa th{background:#f7f8fc!important;color:#475467!important;font-size:.72rem!important;letter-spacing:.08em!important}
.sxccaa .sx-qual-row{gap:10px!important;margin-bottom:10px!important}
.sxccaa .sx-qual-del{border-radius:10px!important;transition:background .18s ease,border-color .18s ease,color .18s ease!important}
.sxccaa .sx-qual-del:hover{background:#fff1f1!important}
.sxccaa .sx-qual-add{margin-top:8px!important;padding:9px 0!important}
.sxccaa .filterbar{grid-template-columns:minmax(0,1fr) minmax(130px,.3fr) auto auto!important;gap:12px!important;padding:18px!important;border-radius:17px!important}
.sxccaa .cards{gap:22px!important}
.sxccaa .card{min-height:245px;border-radius:20px!important;animation:sx-fade-up .48s ease both}
.sxccaa .card:focus-visible{outline:3px solid #e5c341!important;outline-offset:3px!important}
.sxccaa .card .role{line-height:1.6!important}
.sxccaa .sx-hero{position:relative;overflow:hidden;border-radius:28px!important;padding:clamp(28px,5.8vw,76px)!important;box-shadow:0 22px 55px rgba(31,42,102,.18)!important;animation:sx-fade-up .45s ease both}
.sxccaa .sx-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(255,255,255,.035),transparent 58%);pointer-events:none}
.sxccaa .sx-hero h1{max-width:20ch!important}
.sxccaa .sx-hero .actions .btn{min-width:160px}
.sxccaa .sx-directory-heading{padding:12px 0 24px!important}
.sxccaa .sx-directory-filters{border-color:#e3e7f0!important;background:#f8f9fc!important;box-shadow:0 8px 26px rgba(28,39,82,.045)!important}
@keyframes sx-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1200px){.sxccaa .form-grid{column-gap:34px!important}.sxccaa .formcard.is-wide{padding:clamp(28px,3vw,44px)!important}}
@media(max-width:900px){
 .sxccaa{width:min(calc(100% - 28px),1440px)!important;margin-top:24px!important}
 .sxccaa .formcard{max-width:none!important}
 .sxccaa .filterbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 .sxccaa .filterbar input[name="q"]{grid-column:1/-1}
 .sxccaa .filterbar .btn{width:100%!important}
}
@media(max-width:620px){
 .sxccaa{width:calc(100% - 22px)!important;margin:18px auto 42px!important}
 .sxccaa .form-grid{grid-template-columns:minmax(0,1fr)!important;row-gap:3px!important}
 .sxccaa .formcard{padding:19px!important;border-radius:17px!important}
 .sxccaa .formcard>.hint:first-child{padding:14px!important}
 .sxccaa .form-section{margin-top:22px!important}
 .sxccaa .page-head{align-items:flex-start!important;padding-bottom:17px!important;margin-bottom:18px!important}
 .sxccaa .page-head h1{font-size:clamp(1.85rem,8vw,2.45rem)!important}
 .sxccaa .profile-head{padding:18px!important;border-radius:17px}
 .sxccaa .sx-hero{border-radius:20px!important;padding:25px!important}
 .sxccaa .sx-hero .actions .btn{width:100%!important}
 .sxccaa .filterbar{grid-template-columns:minmax(0,1fr)!important;padding:12px!important}
 .sxccaa .filterbar input[name="q"],.sxccaa .filterbar .btn-outline-gold{grid-column:auto!important}
 .sxccaa .dash-pills{align-items:stretch!important}
 .sxccaa .dash-pills .btn{width:100%!important;margin-left:0!important}
 .sxccaa .pay-summary{align-items:flex-start!important;flex-direction:column!important;gap:5px!important;padding:18px!important}
 .sxccaa .sx-qual-row{flex-wrap:wrap!important}
 .sxccaa .sx-qual-row input:not(.sx-qual-year){flex:1 1 100%!important}
 .sxccaa .sx-qual-year{flex:1 1 95px!important}
 .sxccaa table{display:block;overflow-x:auto!important;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.sxccaa *, .sxccaa *::before,.sxccaa *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}