:root{--oph-app-ink:#33285f;--oph-app-accent:#a83087;--oph-app-soft:#f7f5f9;--oph-app-line:#e4dfeb}
.oph-pwa [hidden]{display:none!important}
body.oph-pwa{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));-webkit-text-size-adjust:100%}
body.oph-pwa.oph-app-login{padding-bottom:20px}
.oph-app-login .shell>.oph-app-install,.oph-app-login .shell>.oph-app-notice{grid-column:1 / -1;margin:0;border:0;border-radius:0}
.oph-pwa .oph-app-install,.oph-pwa .oph-app-notice,.oph-pwa .oph-app-card{box-sizing:border-box;border:1px solid var(--oph-app-line);border-radius:16px;background:#fff;color:var(--oph-app-ink);padding:20px;margin:16px 0;font:15px/1.55 system-ui,-apple-system,sans-serif;text-align:left;overflow-wrap:anywhere}
.oph-pwa .oph-app-install{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;background:#f0eaf5}
.oph-app-install h2{font-size:18px;margin:0 0 5px;line-height:1.3}
.oph-app-install p{margin:4px 0;font-size:14px}
.oph-pwa .oph-app-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border:0;border-radius:10px;background:var(--oph-app-accent);color:#fff;font:600 15px/1.4 system-ui;cursor:pointer;text-decoration:none;box-sizing:border-box}
.oph-app-feedback{flex-basis:100%;font-size:13px;margin:0}
.oph-pwa .oph-app-notice{background:#fff3df;color:#654b10;border-color:#e7c67c}
.oph-pwa .oph-app-nav{box-sizing:border-box;position:fixed;z-index:900;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;border-top:1px solid var(--oph-app-line);background:#fff;padding:7px max(6px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-right));box-shadow:0 -4px 22px #33285f0b;max-width:none}
.oph-pwa .oph-app-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:5px 2px;border-radius:10px;color:#625a78;text-decoration:none;font:500 11px/1.3 system-ui;text-align:center;overflow-wrap:anywhere}
.oph-pwa .oph-app-nav a[aria-current=page]{color:#8e2074;background:#f7eaf4}
.oph-app-nav svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.oph-pwa a:focus-visible,.oph-pwa button:focus-visible,.oph-pwa summary:focus-visible{outline:3px solid #a83087;outline-offset:4px}
.oph-pwa .oph-app-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:520px;max-height:85vh;overflow:auto;border:1px solid var(--oph-app-line);border-radius:20px;padding:26px;color:var(--oph-app-ink);font:15px/1.6 system-ui;background:#fff}
.oph-app-dialog::backdrop{background:#231b3c99}
.oph-app-dialog h2{font-size:23px;line-height:1.3;margin:0 0 16px}
.oph-app-dialog h3{font-size:16px;margin:22px 0 6px}
.oph-app-dialog ol{padding-left:22px}
.oph-app-dialog li{margin:8px 0}
.oph-app-shell{margin:0;background:var(--oph-app-soft);color:var(--oph-app-ink);font:16px/1.6 system-ui}
.oph-app-shell>header{background:var(--oph-app-ink);color:white;padding:20px max(20px,env(safe-area-inset-left));display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.oph-app-shell>header a{color:#fff;text-decoration:none}
.oph-app-shell>main{width:auto;max-width:850px;margin:auto;padding:28px 20px}
.oph-app-shell h1{font:400 36px/1.2 Georgia,serif;margin:12px 0 24px}
.oph-app-shell .oph-app-card h2{font-size:20px;margin:0 0 12px}
.oph-app-shell .oph-app-card p{margin:10px 0}
.oph-app-login .oph-app-install{margin:18px 0 0}
@media(min-width:900px){.oph-pwa .oph-app-nav{left:50%;right:auto;transform:translateX(-50%);width:620px;border:1px solid var(--oph-app-line);border-bottom:0;border-radius:18px 18px 0 0}.oph-pwa .oph-app-nav a{font-size:12px}}
@media(max-width:600px){.oph-pwa input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.oph-pwa select,.oph-pwa textarea{font-size:16px!important;max-width:100%;box-sizing:border-box}.oph-pwa .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.oph-pwa .metric{min-width:0;padding:15px}.oph-pwa .metric span{font-size:13px}.oph-pwa .event-grid{grid-template-columns:1fr}.oph-pwa .hero h1{font-size:34px}.oph-pwa .hero{gap:14px}.oph-pwa .event{padding:19px}.oph-pwa .oph-portal-roster{display:grid;grid-template-columns:1fr}.oph-pwa .oph-app-install{padding:16px}.oph-pwa .oph-app-install button{width:100%}.oph-app-shell>main{padding:22px 16px}.oph-pwa .oph-app-nav{padding-top:5px}}
@media(prefers-reduced-motion:reduce){.oph-pwa *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.oph-app-nav,.oph-app-install,.oph-app-dialog,.oph-app-notice{display:none!important}body.oph-pwa{padding-bottom:0}}