/* Future of Music mentorship portal - playful brand layer */
:root{
  --bg:#f4f0e7;--surface:#fffdf8;--surface2:#f8f4ea;--ink:#0c1428;--muted:#657084;--line:#d9d5cb;
  --brand:#4166ff;--brand2:#2348df;--brand-soft:#e9eeff;--nav:#0b1428;--nav2:#121f3a;
  --green:#117a52;--green-bg:#dff7ea;--amber:#8b5b00;--amber-bg:#fff0c8;--red:#c64648;--red-bg:#ffe5e3;
  --fom-coral:#ff6d5e;--fom-lime:#d8ff62;--fom-yellow:#ffd84d;--fom-sky:#73c8ff;
  --shadow:0 14px 0 rgba(12,20,40,.08);--radius:22px;--radius-sm:14px;
}
body{background:var(--bg);font-size:14px;background-image:radial-gradient(circle at 10% 4%,rgba(115,200,255,.16),transparent 22%),radial-gradient(circle at 92% 16%,rgba(216,255,98,.18),transparent 18%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.11;background-image:linear-gradient(rgba(12,20,40,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(12,20,40,.06) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent 70%)}
.btn{background:var(--ink);border:2px solid var(--ink);border-radius:999px;box-shadow:none;padding:10px 16px}.btn:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-2px)}.btn.secondary{background:var(--surface);border:2px solid var(--ink);color:var(--ink)}.btn.secondary:hover{background:var(--fom-lime);border-color:var(--ink);filter:none}.btn.danger{background:var(--fom-coral);border-color:var(--ink);color:var(--ink)}
.icon-btn{border:2px solid var(--ink);border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.icon-btn:hover{background:var(--fom-yellow);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.app-shell{grid-template-columns:248px minmax(0,1fr)}
.sidebar{background:var(--nav);padding:16px 12px;border-right:3px solid var(--ink);overflow:hidden}.sidebar:before{content:"CREATE LOUDLY • GROW BOLDLY • ";position:absolute;left:-35px;bottom:110px;transform:rotate(-90deg);font:900 9px/1 Arial,sans-serif;letter-spacing:.16em;color:rgba(255,255,255,.16);white-space:nowrap}
.brand{padding:6px 8px 18px;position:relative}.brand-mark{width:48px;height:48px;border-radius:50%;background:var(--fom-lime);color:var(--ink);border:2px solid #fff;box-shadow:4px 4px 0 var(--fom-coral);font:900 13px/1 Arial,sans-serif}.brand h1{font:900 15px/1.05 Arial,sans-serif;text-transform:uppercase;letter-spacing:-.03em}.brand small{color:#afbdd7}
.workspace-static,.role-switch select,.program-switch select{background:#16233d;border:1px solid #334465}.workspace-dot{background:var(--fom-lime);box-shadow:0 0 0 4px rgba(216,255,98,.13)}
.nav-caption{color:#7184a5}.nav button{border-radius:14px;color:#b9c5db;font-weight:800}.nav button:hover{background:#15233d}.nav button.active{background:var(--fom-lime);color:var(--ink);box-shadow:4px 4px 0 var(--fom-coral)}.nav-icon{border-radius:50%;background:#1a2a48}.nav button.active .nav-icon{background:var(--ink);color:#fff}
.avatar{border-radius:50%;background:var(--fom-coral);color:var(--ink);border:2px solid #fff}.profile-mini{border-color:#263957}
.topbar{padding:20px 30px 12px;background:rgba(244,240,231,.88);border-bottom:1px solid rgba(12,20,40,.08)}.topbar h2{font:900 32px/.95 Arial,sans-serif;text-transform:uppercase;letter-spacing:-.055em}.eyebrow{color:var(--brand);font-weight:900;letter-spacing:.15em}.global-search-wrap{border:2px solid var(--ink);background:var(--surface);border-radius:999px;box-shadow:3px 3px 0 rgba(12,20,40,.12)}
.content{padding:18px 30px 52px;max-width:1440px}
.card{border:2px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 rgba(12,20,40,.08);background:var(--surface)}.card:hover{border-color:var(--ink);transform:translateY(-1px)}
.hero{position:relative;overflow:hidden;background:var(--ink);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--fom-coral)}.hero:after{content:"MOVE →";position:absolute;right:-12px;top:8px;font:900 70px/.8 Arial,sans-serif;color:rgba(255,255,255,.045);transform:rotate(-8deg)}.hero h3{font:900 35px/.94 Arial,sans-serif;text-transform:uppercase;letter-spacing:-.055em;max-width:700px}.hero p{color:#cbd6ea}.hero .btn.secondary{background:var(--fom-lime)}
.stat{position:relative;overflow:hidden}.stat:nth-child(4n+1){background:#fff}.stat:nth-child(4n+2){background:#e9efff}.stat:nth-child(4n+3){background:#fff3d5}.stat:nth-child(4n){background:#eaf7e8}.stat .label{color:var(--ink);font-weight:900}.stat .value{font:900 38px/.95 Arial,sans-serif;color:var(--ink)}
.section-head h3,.card h3{font:900 17px/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:-.025em}.sub{color:var(--muted)}.iconbox,.meeting-badge{background:var(--fom-lime);color:var(--ink);border:1px solid var(--ink)}
.pill{border:1px solid rgba(12,20,40,.18);font-weight:900}.pill.purple{background:var(--brand-soft);color:var(--brand)}
.table-wrap{border:2px solid var(--ink);border-radius:18px}table{background:var(--surface)}th{background:var(--ink);color:#fff;font-weight:900}td{border-color:#ded9cf}tr:hover td{background:#fff8de}
.field label{color:var(--ink);font-weight:900}.field input,.field select,.field textarea{border:2px solid #cfc9bd;border-radius:13px;background:#fffdf9}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:4px 4px 0 var(--brand-soft)}
.login{position:relative;overflow:hidden;background:var(--bg);background-image:radial-gradient(circle at 12% 20%,rgba(115,200,255,.34),transparent 24%),radial-gradient(circle at 88% 78%,rgba(216,255,98,.42),transparent 25%)}.login:before{content:"YOUNG CREATORS. REAL FUTURES.";position:absolute;left:3vw;bottom:3vh;width:46vw;font:900 clamp(45px,8vw,120px)/.78 Arial,sans-serif;letter-spacing:-.07em;color:var(--ink);opacity:.06;pointer-events:none}.login-card{position:relative;width:min(505px,100%);background:var(--surface);border:3px solid var(--ink);border-radius:28px;padding:34px;box-shadow:10px 10px 0 var(--fom-coral)}.login-card:before{content:"ST. LOUIS MADE • YOUTH LED • PROGRAMS ARE FREE";display:block;background:var(--fom-lime);border:2px solid var(--ink);border-radius:999px;padding:7px 10px;margin:-16px 0 22px;font:900 9px/1 Arial,sans-serif;letter-spacing:.09em;text-align:center}.login-card h1{font:900 43px/.88 Arial,sans-serif;text-transform:uppercase;letter-spacing:-.065em}.kicker{color:var(--brand);font-weight:900}.dot{background:var(--fom-coral)}
.public-apply{width:min(760px,100%)}.notice,.banner{background:#eaf0ff;color:#203e9e;border:1px solid #9eb3ff}
.toast{background:var(--ink);border:2px solid #fff;box-shadow:5px 5px 0 var(--fom-coral)}
.modal{border:3px solid var(--ink);border-radius:24px;box-shadow:10px 10px 0 var(--fom-coral);background:var(--surface)}
.action-tile,.person-card,.account-card,.search-hit,.command-list button{border:2px solid var(--ink);background:var(--surface);border-radius:16px}.action-tile:hover,.person-card:hover,.search-hit:hover,.command-list button:hover{background:var(--fom-lime);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.progress span,.mini-progress span{background:var(--brand)}.progress-ring{background:conic-gradient(var(--fom-coral) calc(var(--p)*1%),var(--line) 0)}.progress-ring.big:after{background:var(--ink)}
.journey-step{border:2px solid #d5d0c6}.journey-step.done{background:var(--fom-lime);border-color:var(--ink);color:var(--ink)}
.mobile-nav{border-top:2px solid var(--ink);background:var(--surface)}
.fom-boot{min-height:100vh;display:grid;place-items:center;padding:30px;background:var(--bg)}.fom-boot-card{width:min(620px,100%);background:var(--surface);border:3px solid var(--ink);border-radius:28px;padding:34px;box-shadow:10px 10px 0 var(--fom-coral)}.fom-boot-word{font:900 46px/.86 Arial,sans-serif;letter-spacing:-.065em;text-transform:uppercase;margin:10px 0}.fom-boot-kicker{display:inline-block;border:2px solid var(--ink);background:var(--fom-lime);border-radius:999px;padding:7px 10px;font:900 9px/1 Arial,sans-serif;letter-spacing:.1em}.fom-loader{width:100%;height:9px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;margin-top:24px;background:#fff}.fom-loader span{display:block;width:38%;height:100%;background:var(--brand);animation:fomload 1.1s ease-in-out infinite alternate}@keyframes fomload{to{transform:translateX(160%)}}.fom-boot-error{display:none;margin-top:18px;background:#ffe5e3;border:2px solid var(--ink);border-radius:14px;padding:14px}.fom-boot-error.show{display:block}
html.dark{--bg:#0b1428;--surface:#121d33;--surface2:#18263f;--ink:#f7f2e8;--muted:#aebbd0;--line:#334664}.dark body:before{opacity:.05}.dark .topbar{background:rgba(11,20,40,.9)}.dark .card,.dark table,.dark .field input,.dark .field select,.dark .field textarea,.dark .btn.secondary,.dark .icon-btn,.dark .global-search-wrap,.dark .action-tile,.dark .person-card,.dark .account-card{background:var(--surface);color:var(--ink)}.dark th{background:#050a14}.dark tr:hover td{background:#1b2c49}.dark .login-card{background:#111d33}.dark .login-card h1{color:#f7f2e8}.dark .fom-boot-card{background:#111d33}
@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{padding:14px 16px}.topbar h2{font-size:25px}.content{padding:12px 14px 95px}.login-card{padding:25px;box-shadow:6px 6px 0 var(--fom-coral)}.login-card h1{font-size:37px}.mobile-nav{display:flex}.global-search-wrap{border-radius:15px}.hero h3{font-size:29px}}
@media(max-width:550px){.login{padding:16px}.login-card:before{line-height:1.35}.top-actions .btn.secondary.small{display:none}.fom-boot-card{padding:24px}.fom-boot-word{font-size:38px}}

/* Product refresh: simpler daily-use patterns */
.skip-link{position:fixed;left:16px;top:-80px;z-index:9999;background:#0b1228;color:#fff;padding:10px 14px;border-radius:999px;font-weight:800;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:16px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:3px solid #3155ff;outline-offset:3px}
button,input,select,textarea,a{scroll-margin-top:90px}
button,.btn,.icon-btn,.person-card,.action-tile{min-height:40px}
.check-col{width:42px;text-align:center!important}
.check-col input{width:18px;height:18px;accent-color:#3155ff}
.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border:2px solid #0b1228;border-radius:16px;background:#f2f6ff;box-shadow:4px 4px 0 #b9ff52}
.bulk-bar span{font-size:.84rem;color:#5d6475;margin-left:auto}
.page-actions.compact{margin:0;gap:7px}
.concern-queue{margin-bottom:16px}
.concern-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(11,18,40,.12)}
.concern-row:first-of-type{border-top:0}
.concern-row p{margin:5px 0;color:#5d6475}
.concern-row small{color:#777f91}
.concern-row.severity-urgent{border-left:5px solid #ff665a;padding-left:12px}
.concern-row.severity-high{border-left:5px solid #ffb347;padding-left:12px}
.attention-danger{background:rgba(255,102,90,.08);border-radius:14px;padding-left:10px;padding-right:10px}
.notice b{font-weight:900}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:720px){.bulk-bar{align-items:stretch}.bulk-bar span{width:100%;margin-left:0}.bulk-bar .btn,.bulk-bar .danger-link{flex:1}.concern-row{align-items:flex-start;flex-direction:column}.concern-row .btn{width:100%}}