body {
  min-height:100vh;
  padding:clamp(18px,5vw,56px) 16px 20px;
  color:#173f64;
  background:
    radial-gradient(ellipse at 8% 8%,#dff1ff 0,transparent 38%),
    radial-gradient(ellipse at 94% 20%,#fff1cb 0,transparent 28%),
    linear-gradient(180deg,#f8fcff,#fff 55%,#f4faff);
}
.directory-card { max-width:590px; border:1px solid #d7e8f5; border-radius:20px; }
.directory-header {
  padding:25px 26px 23px;
  color:#123f72;
  background:
    repeating-linear-gradient(135deg,#0875c906 0 2px,transparent 2px 10px),
    linear-gradient(125deg,#eaf6ff,#f7fbff 62%,#fff5d9);
  border-bottom:1px solid #d8e8f4;
  box-shadow:inset 0 -3px #f1c75b;
}
.directory-header::before,.directory-header::after { display:none; }
.directory-logo { display:block; width:112px; height:78px; object-fit:contain; margin:0 auto 8px; padding:4px; border-radius:12px; background:#fff; }
.directory-eyebrow,.workspace-eyebrow { margin:0 0 7px; color:#1684c8; font-size:10px; font-weight:800; letter-spacing:.12em; }
.directory-header h1 { color:#123f72; font-size:clamp(25px,6vw,32px); letter-spacing:-.7px; }
.directory-intro { max-width:360px; margin:8px auto 0; color:#56718a; font-size:13px; line-height:1.5; }
.directory-content { padding:25px clamp(20px,6vw,42px) 27px; }
.directory-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.directory-heading .workspace-eyebrow { margin-bottom:5px; }
.directory-heading h2 { margin:0; color:#164b79; font-size:20px; }
.directory-step { display:flex; align-items:center; gap:8px; color:#51718d; font-size:11px; font-weight:750; white-space:nowrap; }
.directory-step i { width:30px; height:2px; border-radius:2px; background:#efc45a; }
#classDirectoryForm { padding:0; }
#classDirectoryForm label { margin-top:15px; color:#214b70; }
#classDirectoryForm fieldset label:first-child { margin-top:0; }
#classDirectoryForm select { border-color:#c8dced; background-color:#f7fbff; }
#classDirectoryForm select:disabled { background-color:#eef4f8; color:#8196a8; }
#classDirectoryForm select:focus-visible { border-color:#1684c8; outline-color:#77c5ee; }
#openClass { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px; border:1px solid #0758a5; background:linear-gradient(105deg,#0875c9,#0758a5); box-shadow:0 5px 14px #0758a533; }
#openClass span { color:#ffe19b; font-size:20px; line-height:1; transition:transform .18s; }
#openClass:enabled:hover span { transform:translateX(3px); }
#openClass:disabled { background:#a9bdcc; border-color:#a9bdcc; box-shadow:none; }
.directory-status { min-height:1.2em; margin:12px 0 0; color:#5e7183; font-size:12px; line-height:1.5; text-align:center; }
.directory-footnote { display:flex; align-items:flex-start; gap:8px; margin:19px 0 0; padding:12px 13px; border:1px solid #e6edf2; border-radius:10px; background:#f9fcff; color:#607487; font-size:11px; line-height:1.5; }
.directory-footnote span { color:#1684c8; font-size:14px; }
.directory-footer { padding:14px 0 0; color:#73889a; font-size:11px; text-align:center; }
@media(max-width:520px) {
  body { padding:14px 12px 18px; }
  .directory-card { border-radius:17px; }
  .directory-header { padding:21px 19px 20px; }
  .directory-logo { width:100px; height:70px; }
  .directory-content { padding:21px 20px 23px; }
}
@media(prefers-reduced-motion:reduce) { #openClass span { transition:none; } }