:root{
  --accent:#0B3D91; --accent-2:#2F5FB3; --text:#1B1F23; --muted:#6B7280;
  --bg:#F7FAFC; --card:#FFFFFF; --border:#E5E7EB;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Ubuntu,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}

/* Topbar */
.coi-topbar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.coi-brand{font-weight:800;color:var(--accent);white-space:nowrap}
.coi-search{flex:1;display:flex;justify-content:center}
.coi-search input{width:320px;max-width:60vw;padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:#fff}
.coi-actions{display:flex;gap:10px;align-items:center}
.coi-iconbtn{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px;display:inline-flex;align-items:center;justify-content:center;min-width:36px}
.coi-iconbtn:hover{background:var(--bg)}

/* Ribbon (scrollable pills) */
.coi-ribbon{display:flex;gap:8px;overflow:auto;padding:8px 12px;background:linear-gradient(180deg, #fff, #fff0);border-bottom:1px solid var(--border)}
.coi-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;white-space:nowrap}
.coi-pill:hover{background:var(--bg)}
.coi-ribbon::-webkit-scrollbar{height:6px}
.coi-ribbon::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

/* Mega panel */
.coi-mega{position:fixed;inset:0;display:none}
.coi-mega[data-open="1"]{display:block}
.coi-mega-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.3);backdrop-filter:saturate(.8) blur(2px)}
.coi-mega-panel{position:absolute;top:64px;right:16px;max-width:920px;width:calc(100% - 32px);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.08);padding:16px}
.coi-mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.coi-tile{border:1px solid var(--border);border-radius:14px;padding:12px}
.coi-tile h4{margin:0 0 6px;color:var(--accent)}
.coi-tile a{display:inline-block;margin:4px 6px 0 0;padding:6px 8px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--accent)}

/* Main */
.coi-main{max-width:1100px;margin:0 auto;padding:20px}
.coi-section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.coi-section h1{margin-top:0;color:var(--accent)}
.coi-footer{border-top:1px solid var(--border);padding:16px;text-align:center;color:var(--muted);background:var(--card);margin-top:24px}

/* Bottom bar (mobile) */
.coi-bottomnav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:none;justify-content:space-around;padding:8px 0;z-index:30}
.coi-bottomnav a,.coi-bottomnav button{background:none;border:none;text-decoration:none;color:var(--accent);display:flex;flex-direction:column;align-items:center;font-size:12px}
.coi-fab{position:fixed;right:16px;bottom:70px;display:none;border-radius:50%;width:56px;height:56px;align-items:center;justify-content:center;border:1px solid var(--border);background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.1)}

/* Responsive */
@media (max-width:960px){
  .coi-search input{width:220px}
}
@media (max-width:720px){
  .coi-search{display:none}
  .coi-ribbon{display:none}
  .coi-bottomnav{display:flex}
  .coi-fab{display:flex}
}


/* === CampusOnIt — Lot 1.4.7 (Brand Split, Ribbon Cleanup, Overlay Hard-Fix) === */
/* Brand split + Oi badge */
.coi-brand{ display:flex; align-items:center; gap:8px }
.coi-brand .coi-logo-oi{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px;
  background: linear-gradient(135deg, #0B3D91 0%, #2F5FB3 100%);
  color:#fff; font-weight:900; font-size:12px; line-height:1;
  letter-spacing:.02em; user-select:none;
  box-shadow: 0 2px 6px rgba(11,61,145,.25);
}
.coi-brand .coi-brand-split{ display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.coi-brand .coi-brand-campus,
.coi-brand .coi-brand-onit{
  text-decoration:none; font-weight:900; letter-spacing:.2px;
}
.coi-brand .coi-brand-campus{ color: var(--coi-blue, #0B3D91); }
.coi-brand .coi-brand-onit{ color: var(--coi-blue-2, #2F5FB3); }
.coi-brand a:hover{ text-decoration: none; filter: brightness(1.05) }

/* Ribbon: hide OnIt & CGU inside ribbon; keep sand-gold look */
.coi-ribbon a[href*="/onit"], .coi-ribbon a[href*="/cgu"]{ display:none !important }
.coi-ribbon a, .coi-ribbon .coi-pill{
  color: #7B5C1E !important; text-decoration: none !important;
  font-variant: small-caps; font-variant-caps: small-caps; letter-spacing:.03em;
}
.coi-ribbon .coi-pill::after{ display:none !important }
@media (max-width:760px){ .coi-ribbon{ display:none !important } }

/* Overlay: ensure always on top */
#coi-mega{ z-index: 9999; }
#coi-mega .coi-mega-panel{ z-index: 10000; }
#coi-mega .coi-mega-backdrop{ z-index: 9999; }

/* Footer CGU link style (if injected) */
footer .coi-footer-legal{ margin-top:8px; font-size:13px; color:#6B7280 }
footer .coi-footer-legal a{ color:#6B7280; text-decoration:none }
footer .coi-footer-legal a:hover{ text-decoration:underline }