:root{color:#172033;background:#f4f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;line-height:1.45}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;color:#fff;background:#315efb;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-weight:700;transition:background .15s,transform .15s,box-shadow .15s;display:inline-flex}button:hover{background:#2449cf}button:active{transform:translateY(1px)}button:disabled{cursor:wait;opacity:.6}.secondary{color:#2946a2;background:#edf2ff}.secondary:hover{background:#dfe8ff}.danger{color:#b42318;background:#fff0f0}.danger:hover{background:#ffe0de}.icon-button{color:#64748b;background:0 0;width:36px;height:36px;padding:0}.icon-button:hover{color:#172033;background:#f1f5f9}.app{grid-template-columns:232px 1fr;min-height:100vh;display:grid}aside{color:#e6edff;background:#13213f;flex-direction:column;gap:5px;height:100vh;padding:24px 14px;display:flex;position:sticky;top:0}aside h1{letter-spacing:-.02em;color:#fff;margin:0 10px 26px;font-size:20px}aside button{color:#aab8d6;text-align:left;background:0 0;justify-content:flex-start;width:100%;font-weight:600}aside button.active,aside button:hover{color:#fff;background:#22365f}aside button:last-child{color:#c7d3ed;margin-top:auto}article{width:100%;max-width:1440px;margin:0 auto;padding:38px clamp(18px,4vw,54px)}section{background:#fff;border:1px solid #e3e9f2;border-radius:18px;padding:30px;box-shadow:0 8px 28px #273b650b}.page-header{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px;display:flex}.page-title{align-items:flex-start;gap:14px;display:flex}.page-title-icon{color:#315efb;background:#eaf0ff;border-radius:12px;place-items:center;width:42px;height:42px;display:grid}.eyebrow{color:#315efb;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;font-size:12px;font-weight:800;display:block}.page-header h2,.content-header h2{letter-spacing:-.035em;margin:0 0 8px;font-size:28px;line-height:1.15}.page-header p,.content-header p{color:#68758b;max-width:650px;margin:0}.content-header{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;display:flex}.content-header h3{margin:0 0 6px}.login{background:#f4f7fb;place-items:center;min-height:100vh;display:grid}.login form{background:#fff;border:1px solid #e3e9f2;border-radius:18px;gap:14px;width:min(390px,100vw - 32px);padding:34px;display:grid;box-shadow:0 16px 45px #273b6514}.login h1,.login p{margin:0}.login h1{letter-spacing:-.03em}.login p{color:#68758b}.login button{margin-top:6px}input,textarea,select{color:#172033;background:#fff;border:1px solid #cdd7e6;border-radius:9px;outline:none;width:100%;padding:10px 12px}input:focus,textarea:focus,select:focus{border-color:#5577f5;box-shadow:0 0 0 3px #315efb1c}textarea{resize:vertical}.inline{gap:10px;margin:20px 0;display:flex}.error{color:#a5261b;background:#fff1f0;border:1px solid #ffd3cf;border-radius:10px;margin:0 0 18px;padding:11px 13px}.success{color:#16704a;background:#ecfdf3;border:1px solid #b7ebcc;border-radius:10px;margin:0 0 18px;padding:11px 13px}.empty{color:#68758b;text-align:center;background:#f8fafc;border:1px dashed #d4ddea;border-radius:12px;padding:28px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;vertical-align:middle;border-bottom:1px solid #e7edf5;padding:15px 12px}th{color:#718096;text-transform:uppercase;letter-spacing:.08em;font-size:11px}tbody tr:hover{background:#fbfcff}td strong{font-size:14px}small{color:#718096;margin-top:4px;font-size:12px;display:block}.actions{white-space:nowrap}.actions button{margin-right:6px;padding:8px 10px;font-size:13px}.chips{flex-wrap:wrap;gap:5px;display:flex}.chip,.status{border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800;display:inline-flex}.chip{color:#374aa3;background:#edf2ff}.status.published{color:#16704a;background:#e8f8ef}.status.draft{color:#9a5a08;background:#fff5e8}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.metric-card{background:#fbfcff;border:1px solid #e3e9f2;border-radius:14px;gap:7px;padding:18px;display:grid}.metric-card span{color:#718096;text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:800}.metric-card strong{letter-spacing:-.04em;color:#1e3a8a;font-size:30px}.metric-card small{margin:0}.metric-card.accent{background:#eef3ff;border-color:#cedbff}.metric-card.accent strong{color:#315efb}.subnav{border-bottom:1px solid #e7edf5;flex-wrap:wrap;gap:7px;margin-bottom:22px;padding-bottom:14px;display:flex}.subnav button{font-size:13px}.subnav button.active{color:#fff;background:#315efb}.catalog-form,.resource-form,.badge-form{background:#fbfcff;border:1px solid #e3e9f2;border-radius:14px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 28px;padding:18px;display:grid}.catalog-form label,.resource-form label,.badge-form label,.modal-form label{color:#344054;gap:6px;font-size:13px;font-weight:750;display:grid}.catalog-form .wide,.resource-form .wide,.badge-form .wide,.modal-form .wide{grid-column:1/-1}.form-cancel{margin-left:8px}.pagination{color:#68758b;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;font-size:13px;display:flex}.pagination div{gap:8px;display:flex}.mapping-field{gap:6px;min-width:280px;font-size:13px;display:grid}.mapping-field textarea{min-width:280px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.detail-card{background:#f8fafc;border:1px solid #dbe4f0;border-radius:10px;margin-top:24px;padding:18px}.detail-card dl{grid-template-columns:120px 1fr;gap:8px;margin:8px 0 18px;display:grid}.detail-card dt{color:#64748b;font-weight:700}.detail-card dd{margin:0}.detail-card select{min-width:160px}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#14213f66;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fff;border:1px solid #dce4f0;border-radius:18px;width:min(560px,100%);max-height:min(820px,100vh - 40px);overflow:auto;box-shadow:0 24px 80px #101b3740}.modal-wide{width:min(760px,100%)}.modal-header{border-bottom:1px solid #e7edf5;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 24px 14px;display:flex}.modal-header h3{letter-spacing:-.025em;margin:0;font-size:20px}.modal-header p{color:#718096;margin:5px 0 0;font-size:13px}.modal-body{padding:22px 24px}.modal-form{gap:18px;display:grid}.modal-form .form-grid{margin:0}.modal-actions{justify-content:flex-end;gap:9px;margin-top:4px;display:flex}.badge-form-preview{background:#f4f7ff;border:1px solid #d9e3ff;border-radius:13px;align-items:center;gap:13px;padding:14px;display:flex}.badge-form-preview strong{display:block}.badge-art{color:#fff;background:#315efb;border-radius:14px;flex:none;place-items:center;display:grid;overflow:hidden}.badge-art-small{border-radius:11px;width:38px;height:38px}.badge-art-medium{width:48px;height:48px}.badge-art-large{border-radius:18px;width:76px;height:76px}.badge-art img{object-fit:cover;width:100%;height:100%}.learning-page{box-shadow:none;background:0 0;border:0;padding:0}.reward-metrics{margin-bottom:18px}.learning-grid{grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:18px;display:grid}.panel{background:#fff;border:1px solid #e3e9f2;border-radius:18px;padding:22px;box-shadow:0 8px 28px #273b650b}.panel-header{justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px;display:flex}.panel-header h3{letter-spacing:-.02em;margin:0;font-size:18px}.panel-header p{color:#718096;margin:4px 0 0;font-size:13px}.panel-icon{color:#315efb}.search-field{color:#718096;border:1px solid #d9e2ef;border-radius:9px;align-items:center;gap:8px;padding:0 10px;display:flex}.search-field input{box-shadow:none;border:0;width:180px;padding:9px 2px}.badge-list{gap:8px;display:grid}.badge-row{text-align:left;color:#172033;background:#fbfcff;border:1px solid #e7edf5;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;width:100%;display:grid}.badge-row:hover{color:#172033;background:#f3f6ff;border-color:#cbd8ff}.badge-row-copy strong,.badge-row-copy small,.badge-row-stat strong,.badge-row-stat small{display:block}.badge-row-copy small,.badge-row-stat small{font-size:12px}.badge-row-stat{text-align:right}.badge-row-stat strong{color:#315efb}.xp-rule-list{gap:8px;margin-bottom:22px;display:grid}.xp-rule-list>div{background:#f7f9fd;border-radius:10px;justify-content:space-between;align-items:center;padding:12px;display:flex}.xp-rule-list span{color:#53627a;align-items:center;gap:8px;font-size:13px;display:flex}.xp-rule-list svg{color:#315efb}.xp-rule-list strong{font-size:14px}.level-list{gap:8px;display:grid}.level-list>div{background:#fbfcff;border-left:3px solid #8aa4ff;justify-content:space-between;padding:10px 12px;display:flex}.level-list span{font-weight:750}.level-list small{margin:0}.panel-note{color:#718096;border-top:1px solid #e7edf5;margin:20px 0 0;padding-top:14px;font-size:12px}.badge-detail{text-align:center}.badge-detail .badge-art{margin:0 auto 16px}.badge-detail>p{color:#68758b}.criteria-grid{text-align:left;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0;display:grid}.criteria-grid>div{background:#f7f9fd;border-radius:10px;padding:12px}.criteria-grid span{color:#718096;font-size:12px;display:block}.criteria-grid strong{font-size:18px}.badge-detail .modal-actions{justify-content:center}.modal-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.modal-form .form-grid .wide{grid-column:1/-1}.modal-form .checkbox{align-items:center;gap:8px;display:flex}.modal-form .checkbox input{width:auto}.modal-form .form-grid label{display:grid}@media (width<=900px){.learning-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.app{grid-template-columns:1fr}aside{flex-direction:row;height:auto;padding:10px;position:static;overflow:auto}aside h1{display:none}aside button{white-space:nowrap;width:auto;padding:9px 12px}aside button:last-child{margin-top:0}article{padding:16px}section{border-radius:14px;padding:20px}.page-header,.content-header{flex-direction:column}.page-header>button{width:100%}.catalog-form,.resource-form,.badge-form,.modal-form .form-grid{grid-template-columns:1fr}.catalog-form .wide,.resource-form .wide,.badge-form .wide,.modal-form .form-grid .wide{grid-column:auto}.inline{flex-direction:column}.pagination{flex-direction:column;align-items:flex-start}.detail-card dl{grid-template-columns:1fr;gap:2px}.detail-card dd{margin-bottom:8px}.modal-backdrop{padding:10px}.modal{max-height:calc(100vh - 20px)}.modal-header,.modal-body{padding:18px}.badge-row{grid-template-columns:auto 1fr auto}.badge-row-stat{display:none}.search-field,.search-field input{width:100%}.panel-header{flex-direction:column}.actions{white-space:normal}}@keyframes button-spin{to{transform:rotate(360deg)}}button[aria-busy=true]:before{content:"";border:2px solid;border-right-color:#0000;border-radius:50%;flex:0 0 14px;width:14px;height:14px;animation:.7s linear infinite button-spin}button[aria-busy=true]{cursor:progress}.password-field{align-items:center;display:flex;position:relative}.password-field input{padding-right:48px}.password-field .password-toggle{color:#64748b;background:0 0;width:38px;height:38px;padding:0;position:absolute;right:4px}.password-field .password-toggle:hover{color:#172033;background:#f1f5f9}.badge-art-emoji{font-size:1.6em;line-height:1}.badge-art-large .badge-art-emoji{font-size:2.2em}@media (width<=700px){.app{min-height:100dvh;display:block}.app aside{z-index:10;overscroll-behavior-x:contain;flex-wrap:nowrap;position:sticky;top:0}.app article{min-width:0;padding:14px}.app section{min-width:0;padding:16px}.app .header-actions{flex-wrap:wrap;width:100%;display:flex}.app .header-actions button{flex:130px}.app .table-wrap{overscroll-behavior-x:contain;touch-action:pan-x;max-width:100%}.app table{min-width:640px}.app .badge-row-copy{min-width:0}.app .badge-row-copy strong,.app .badge-row-copy small{overflow-wrap:anywhere}.app .badge-form-preview{min-width:0}.app .modal-actions{flex-wrap:wrap}.app .modal-actions button{flex:130px}.app .login form{padding:24px}.app .search-field,.app .search-field input{min-width:0}}@media (width<=420px){.app article{padding:10px}.app section{padding:14px}.app .metric-grid{grid-template-columns:1fr}.app .badge-row{grid-template-columns:auto minmax(0,1fr)}.app .badge-row>svg{display:none}.app .modal-header{gap:10px}.app .modal-actions button{flex-basis:100%}}.nav-header{display:block}.section-nav{flex-direction:column;gap:5px;display:flex}.menu-toggle{display:none}.sign-out{margin-top:auto}@media (width<=700px){.app aside{height:auto;max-height:100dvh;padding:10px 14px;display:block;position:sticky;top:0;overflow:visible}.nav-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.nav-header h1{margin:0;font-size:18px;display:block}.menu-toggle{justify-content:center;width:44px;height:44px;padding:0;display:inline-flex}.app aside .section-nav{display:none}.app aside.mobile-nav-open .section-nav{border-top:1px solid #ffffff24;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;padding-top:10px;display:grid}.app aside .section-nav button{white-space:normal;width:100%;min-height:44px;padding:10px 12px}.app aside .sign-out{display:none}.app aside.mobile-nav-open .sign-out{border-top:1px solid #ffffff24;width:100%;min-height:44px;margin:8px 0 0;padding:10px 12px;display:flex}.app .inline{align-items:stretch}.app .inline button{width:100%}.app .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app .users-table table{min-width:0}.app .users-table thead{display:none}.app .users-table tbody{gap:10px;display:grid}.app .users-table tr{background:#fff;border:1px solid #e3e9f2;border-radius:12px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:12px;display:grid}.app .users-table td{overflow-wrap:anywhere;border:0;min-width:0;padding:3px 0}.app .users-table td[data-label=Name]{grid-area:1/1;font-weight:750}.app .users-table td[data-label=Email]{color:#68758b;grid-area:2/1;font-size:13px}.app .users-table td[data-label=Role]{color:#53627a;grid-area:3/1;font-size:12px}.app .users-table td[data-label=Action]{grid-area:1/2/4;justify-self:end}.app .users-table td[data-label=Action] button{white-space:nowrap}.app .table-wrap:not(.users-table) table{min-width:620px}}@media (width<=360px){.app .metric-grid,.app aside.mobile-nav-open .section-nav{grid-template-columns:1fr}}
