:root{
  --ocu-blue:#00669b;        /* OCU primary blue (from existing roster template) */
  --ocu-blue-dark:#004d75;
  --ocu-gold:#c9a227;        /* accent */
  --ink:#1f2733;
  --muted:#6b7682;
  --line:#e2e7ec;
  --bg:#f5f7f9;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--ocu-blue);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.center{text-align:center}

/* Header */
#site-header{background:var(--ocu-blue);color:#fff}
.header-inner{max-width:1100px;margin:auto;display:flex;align-items:center;
  justify-content:space-between;padding:.6em 1em;gap:1em}
.brand{display:flex;align-items:center;gap:.7em;color:#fff}
.brand:hover{text-decoration:none}
.logo{height:46px;width:auto}
.brand-text{font-weight:600;font-size:1.05rem}
.header-nav{display:flex;align-items:center;gap:1.1em}
.header-nav a{color:#fff;opacity:.92}
.header-nav .who{opacity:.8;font-size:.9rem}
.header-nav .logout{font-weight:600}

/* Layout */
#content{min-height:70vh}
.container{max-width:1100px;margin:1.5em auto;padding:0 1em}
.page-title{margin:.2em 0 .8em}

/* Landing cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1em}
.module-card{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:1.2em;color:var(--ink);transition:.15s;position:relative}
.module-card:hover{text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.08);
  transform:translateY(-2px);border-color:var(--ocu-blue)}
.module-card.disabled{opacity:.55;pointer-events:none}
.module-card h2{margin:.3em 0 .2em;font-size:1.15rem;color:var(--ocu-blue-dark)}
.module-card p{margin:0;color:var(--muted);font-size:.92rem}
.card-icon{font-size:1.8rem}
.badge{position:absolute;top:.8em;right:.8em;background:var(--ocu-gold);color:#fff;
  border-radius:999px;padding:.1em .6em;font-size:.7rem;font-weight:700}

/* Auth */
.auth-wrap{display:flex;justify-content:center;padding:3em 1em}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:2em;width:100%;max-width:380px}
.auth-card h1{margin-top:0}
.stack{display:flex;flex-direction:column;gap:.8em}
.stack label{display:flex;flex-direction:column;gap:.3em;font-size:.9rem;font-weight:600}
.stack input{padding:.6em;border:1px solid var(--line);border-radius:8px;font-size:1rem}
.divider{display:flex;align-items:center;text-align:center;color:var(--muted);margin:1.1em 0}
.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--line)}
.divider span{padding:0 .8em;font-size:.85rem}
.form-error{background:#fdecea;color:#a4271c;padding:.6em .8em;border-radius:8px}

/* Buttons */
.btn{display:inline-block;border:0;border-radius:8px;padding:.65em 1.1em;font-size:1rem;
  cursor:pointer;text-align:center}
.btn-primary{background:var(--ocu-blue);color:#fff;width:100%}
.btn-primary:hover{background:var(--ocu-blue-dark);text-decoration:none}
.btn-sso{background:#fff;border:1px solid var(--ocu-blue);color:var(--ocu-blue);
  width:100%;font-weight:600}
.btn-small{padding:.3em .7em;font-size:.85rem;background:var(--ocu-blue);color:#fff}

/* Tables */
.search-bar{display:flex;gap:.6em;margin-bottom:1em}
.search-bar input{flex:1;padding:.6em;border:1px solid var(--line);border-radius:8px}
.data-table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.data-table th{background:var(--ocu-blue);color:#fff;text-align:left;padding:.6em .8em}
.data-table td{padding:.55em .8em;border-top:1px solid var(--line)}
.data-table tbody tr:hover{background:#eef4f8;cursor:pointer}

/* Detail */
.back-link{display:inline-block;margin-bottom:.6em}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1em}
.detail-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2em}
.detail-card h2{margin-top:0;color:var(--ocu-blue-dark);font-size:1.1rem}
.detail-card dl{display:grid;grid-template-columns:auto 1fr;gap:.35em .9em;margin:0}
.detail-card dt{color:var(--muted);font-size:.85rem}
.detail-card dd{margin:0}

/* Enrollment / integration bar */
.enrollment-bar{background:#eef4f8;border:1px solid var(--line);border-radius:10px;
  padding:.6em 1em;margin-bottom:1em}
.enrollment-panel{display:flex;gap:2em;flex-wrap:wrap}

/* Template lists */
.template-list{list-style:none;padding:0;margin:.3em 0;columns:2;gap:1.5em}
.template-list li{padding:.2em 0;break-inside:avoid}
.template-list .badge{position:static;margin-left:.4em}

/* Footer */
#site-footer{max-width:1100px;margin:2em auto;padding:1em;display:flex;
  justify-content:space-between;align-items:center;border-top:1px solid var(--line)}
#site-footer .hint{cursor:default;opacity:.35;font-size:1.1rem}

/* Konami easter egg popup */
#konami-egg{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);z-index:9999}
#konami-egg.show{display:flex}
#konami-egg .egg-box{background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.5);position:relative}
#konami-egg .egg-close{position:absolute;top:6px;right:10px;color:#fff;font-size:1.3rem;
  cursor:pointer;z-index:2}