/* Removed remote font import to comply with CSP; relying on system font stack */

:root{
	color-scheme: light;
	--bg-primary:#050815;
	--bg-gradient:radial-gradient(circle at 20% 10%, rgba(76,110,255,.45), transparent 55%), radial-gradient(circle at 80% 0%, rgba(16,185,129,.35), transparent 50%), linear-gradient(135deg, rgba(10,13,24,.95), rgba(6,8,18,.98));
	--panel:rgba(17,24,39,.78);
	--panel-strong:rgba(24,32,51,.82);
	--border:rgba(255,255,255,.08);
	--glow:0 24px 60px -25px rgba(59,130,246,.65);
	--radius:22px;
	--font:"Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont;
	--text:#f8fafc;
	--muted:rgba(226,232,240,.8);
	--accent:#6ee7b7;
	--primary:#60a5fa;
	--primary-strong:#3b82f6;
	--danger:#f87171;
	--success:#34d399;
}

*{box-sizing:border-box; scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.45) transparent}
*::-webkit-scrollbar{width:8px; height:8px}
*::-webkit-scrollbar-track{background:rgba(148,163,184,.08); border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(135deg, rgba(96,165,250,.55), rgba(56,189,248,.55)); border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg, rgba(96,165,250,.75), rgba(56,189,248,.75))}
html,body{min-height:100%; margin:0; padding:0}
body{font-family:var(--font); background:var(--bg-primary); color:var(--text); -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}

.ui-shell{position:relative; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; overflow-y:auto}
html.modal-open .ui-shell{overflow-y:hidden}
.ui-background{position:fixed; inset:0; background:var(--bg-gradient); filter:saturate(120%); z-index:-2}

.ui-header{position:relative; z-index:49; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin:1.75rem auto 0; width:clamp(320px,92vw,1200px); padding:1.25rem 2rem; border-radius:var(--radius); background:var(--panel); box-shadow:var(--glow); border:1px solid var(--border); backdrop-filter:blur(16px)}
.ui-brand{display:flex; flex-direction:column; gap:.25rem}
.ui-logo{font-weight:700; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:#fff}
.ui-subtitle{font-size:.9rem; color:var(--muted)}
.ui-nav{display:flex; align-items:center; gap:.5rem}
.ui-nav-link{padding:.55rem 1rem; border-radius:999px; font-size:.9rem; color:rgba(241,245,249,.85); border:1px solid transparent; transition:all .2s ease}
.ui-nav-link:hover{border-color:rgba(255,255,255,.25); color:#fff}
.ui-nav-link.is-active{background:linear-gradient(135deg, rgba(96,165,250,.85), rgba(14,165,233,.75)); color:#0f172a; font-weight:600; box-shadow:0 14px 32px -22px rgba(96,165,250,1)}
.ui-actions{display:flex; align-items:center; gap:1rem}
.ui-user-menu{position:relative; display:flex; align-items:center}
.ui-user{display:flex; align-items:center; gap:.65rem; padding:.45rem .75rem; border-radius:999px; background:var(--panel-strong); border:1px solid rgba(255,255,255,.06); cursor:pointer; color:inherit; font:inherit; box-shadow:none; transition:background .18s ease, border-color .18s ease, transform .18s ease}
.ui-user:hover{background:rgba(24,32,51,.9); border-color:rgba(255,255,255,.12); transform:none}
.ui-user:focus-visible{outline:2px solid rgba(96,165,250,.6); outline-offset:2px}
.ui-user[aria-expanded="true"]{background:rgba(24,32,51,.94); border-color:rgba(96,165,250,.4)}
.ui-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#6366f1); display:flex; align-items:center; justify-content:center; font-weight:700; color:#0f172a}
.ui-user-meta{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.ui-user-meta small{color:rgba(148,163,184,.85); font-size:.75rem}
.ui-user-dropdown{position:absolute; top:calc(100% + .48rem); right:0; min-width:198px; padding:.35rem; border-radius:16px; background:rgba(6,10,20,.96); border:1px solid rgba(148,163,184,.22); box-shadow:0 32px 80px -34px rgba(15,23,42,.9); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:9999}
.ui-user-menu.is-open .ui-user-dropdown{opacity:1; transform:translateY(0); pointer-events:auto}
.ui-user-dropdown-link{display:flex; align-items:center; gap:.55rem; width:100%; padding:.6rem .75rem; border-radius:12px; color:rgba(226,232,240,.92); font-size:.86rem; text-align:left; border:none; background:transparent; cursor:pointer; font:inherit; transition:background .18s ease, color .18s ease, transform .18s ease}
.ui-user-dropdown-link:hover,.ui-user-dropdown-link:focus-visible{background:rgba(56,189,248,.14); color:#fff; outline:none}
.ui-user-dropdown-icon{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:10px; background:rgba(148,163,184,.16); color:rgba(191,219,254,.92); flex-shrink:0; transition:background .18s ease, color .18s ease}
.ui-user-dropdown-icon svg{width:14px; height:14px; display:block; fill:currentColor}
.ui-user-dropdown-label{flex:1; white-space:nowrap}
.ui-user-dropdown-link:hover .ui-user-dropdown-icon,.ui-user-dropdown-link:focus-visible .ui-user-dropdown-icon{background:rgba(148,163,184,.24); color:#fff}
.ui-user-dropdown-link.is-danger{background:rgba(248,113,113,.16); color:#fecaca}
.ui-user-dropdown-link.is-danger .ui-user-dropdown-icon{background:rgba(248,113,113,.22); color:#fff}
.ui-user-dropdown-link.is-danger:hover,.ui-user-dropdown-link.is-danger:focus-visible{background:rgba(248,113,113,.28); color:#fff}
.ui-user-dropdown-link.is-danger:hover .ui-user-dropdown-icon,.ui-user-dropdown-link.is-danger:focus-visible .ui-user-dropdown-icon{background:rgba(248,113,113,.36)}
.ui-user-dropdown-form{margin:0; display:block; gap:0}

.ui-main{flex:1; width:100%; display:flex; justify-content:center}
.ui-container{width:clamp(320px,92vw,1200px);padding:2.15rem clamp(1.5rem,4vw,3rem) 4.25rem;display:flex;flex-direction:column;gap: 1.5rem;}

.ui-footer{margin:auto auto 2.5rem; width:clamp(320px,92vw,1200px); backdrop-filter:blur(12px); border-radius:var(--radius); background:var(--panel); border:1px solid rgba(255,255,255,.05); box-shadow:0 20px 45px -30px rgba(15,23,42,.85)}
.ui-footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 2rem; font-size:.85rem; color:rgba(226,232,240,.8)}
.ui-footer-links{display:flex; gap:1.25rem}
.ui-footer a{color:rgba(148,163,184,.9); font-weight:500}
.ui-footer a:hover{color:#fff}

form{display:flex; flex-direction:column; gap:1.1rem}
form label{display:flex; flex-direction:column; gap:.35rem; font-size:.92rem}
form label span{font-weight:600; color:rgba(226,232,240,.9)}
input,select,textarea{padding:.7rem .85rem; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(15,23,42,.65); color:#f8fafc; font:inherit; transition:border .2s ease, box-shadow .2s ease}
input:focus,select:focus,textarea:focus{outline:none; border-color:rgba(96,165,250,.65); box-shadow:0 0 0 4px rgba(96,165,250,.15)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.role-options{display:flex; flex-wrap:wrap; gap:.75rem; padding:.4rem 0}
.role-option{position:relative; display:flex; align-items:center; padding:.8rem 1.1rem; border-radius:16px; background:rgba(15,23,42,.55); border:1px solid rgba(148,163,184,.22); cursor:pointer; transition:border .2s ease, box-shadow .2s ease, background .2s ease}
.role-option:hover{border-color:rgba(96,165,250,.6); box-shadow:0 14px 32px -22px rgba(56,189,248,.7)}
.role-option input{position:absolute; inset:0; opacity:0; cursor:pointer}
.role-option-content{display:flex; flex-direction:column; gap:.35rem}
.role-option-content strong{font-size:.96rem; letter-spacing:-.005em}
.role-option-slug{display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem; border-radius:999px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; background:rgba(248,113,113,.16); color:#fecaca; border:1px solid rgba(248,113,113,.35)}
.role-option-slug::before{content:"\2715"; font-size:.82rem; line-height:1}
.role-option input:checked + .role-option-content strong{color:#f8fafc}
.role-option input:checked + .role-option-content .role-option-slug{background:rgba(34,197,94,.2); color:#bbf7d0; border-color:rgba(74,222,128,.45)}
.role-option input:checked + .role-option-content .role-option-slug::before{content:"\2713"}
.role-option input:focus-visible + .role-option-content{outline:2px solid rgba(96,165,250,.75); outline-offset:5px; border-radius:12px}
.form-fieldset{padding:1.4rem 1.6rem; border:1px solid rgba(148,163,184,.25); border-radius:18px; background:rgba(15,23,42,.4)}
.form-fieldset legend{padding:0 .4rem; font-size:.95rem; font-weight:600; color:#e2e8f0}
.permission-group{display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.2rem}
.permission-group:last-child{margin-bottom:0}
.role-option-description{font-size:.82rem; color:rgba(226,232,240,.8); line-height:1.4}
.status-toggle{display:inline-flex; align-items:center; justify-content:space-between; gap:.55rem; width:160px; padding:.35rem .65rem; border-radius:999px; border:1px solid rgba(148,163,184,.25); background:rgba(15,23,42,.45); box-shadow:0 10px 28px -24px rgba(15,23,42,.85)}
.status-toggle-label{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:rgba(191,219,254,.92)}
.status-toggle--inactive{background:rgba(15,23,42,.35); border-color:rgba(148,163,184,.18); box-shadow:none}
.status-toggle--inactive .status-toggle-label{color:rgba(148,163,184,.75)}
.toggle-switch{position:relative; display:inline-flex; align-items:center; justify-content:center; width:54px; height:30px}
.toggle-switch input{position:absolute; opacity:0; width:0; height:0}
.toggle-slider{position:absolute; inset:0; background:rgba(148,163,184,.35); border-radius:999px; transition:background .2s ease, box-shadow .2s ease}
.toggle-slider::after{content:""; position:absolute; top:50%; left:6px; width:18px; height:18px; border-radius:50%; background:#f8fafc; transform:translate(0,-50%); transition:transform .2s ease, background .2s ease}
.toggle-switch input:checked + .toggle-slider{background:linear-gradient(135deg,#34d399,#22d3ee); box-shadow:0 14px 32px -24px rgba(16,185,129,.7)}
.toggle-switch input:checked + .toggle-slider::after{transform:translate(25px,-50%); background:#0f172a}
.toggle-switch input:focus-visible + .toggle-slider{box-shadow:0 0 0 4px rgba(59,130,246,.35)}
.toggle-switch-sm{width:42px; height:22px}
.toggle-switch-sm .toggle-slider::after{width:14px; height:14px; left:4px}
.toggle-switch-sm input:checked + .toggle-slider::after{transform:translate(20px,-50%)}
button{padding:.7rem 1.15rem; border-radius:14px; border:none; font-weight:600; cursor:pointer; background:linear-gradient(135deg,#60a5fa,#818cf8); color:#0b1120; box-shadow:0 18px 40px -20px rgba(96,165,250,.85); transition:transform .18s ease, box-shadow .2s ease}
button:hover{transform:translateY(-1px); box-shadow:0 22px 46px -20px rgba(96,165,250,.95)}
button[disabled]{background:rgba(148,163,184,.35); color:rgba(226,232,240,.55); cursor:not-allowed; box-shadow:none; transform:none}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.15rem 1.65rem;border-radius:22px;background:rgba(15,23,42,.58);border:1px solid rgba(148,163,184,.18);box-shadow:0 20px 48px -32px rgba(15,23,42,.58)}
.page-header--compact{flex-direction:row; align-items:flex-end; padding:0; border:none; background:transparent; box-shadow:none; margin-bottom:1.25rem}
.page-header-info{display:flex; flex-direction:column; gap:.45rem}
.page-header-info h1{margin:0; font-size:1.55rem; letter-spacing:-.01em}
.page-header-info p{margin:0; max-width:620px; color:rgba(226,232,240,.78); font-size:.95rem; line-height:1.45}
.page-header--compact .page-header-info{gap:.35rem}
.page-header-blurb{margin:0; max-width:520px; color:rgba(148,163,184,.8); font-size:.88rem; line-height:1.4}
.page-header--compact .page-tag{margin-bottom:.25rem}
.page-tag{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:999px; background:rgba(56,189,248,.18); color:#bfdbfe; text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:.72rem}
.page-header-actions{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.page-header-actions .button{padding:.65rem 1.2rem}
.admin-nav{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:0 0 2rem}
.admin-nav-card{position:relative; display:flex; align-items:flex-start; gap:1.15rem; padding:1.25rem 1.45rem; border-radius:18px; background:rgba(15,23,42,.6); border:1px solid rgba(148,163,184,.18); box-shadow:0 18px 42px -26px rgba(15,23,42,.78); transition:transform .18s ease, box-shadow .2s ease, border .2s ease}
.admin-nav-card:hover{transform:translateY(-3px); border-color:rgba(96,165,250,.45); box-shadow:0 26px 60px -28px rgba(59,130,246,.6)}
.admin-nav-symbol{width:40px; height:40px; border-radius:14px; background:rgba(96,165,250,.16); border:1px solid rgba(96,165,250,.35); display:inline-flex; align-items:center; justify-content:center; color:#bfdbfe; flex-shrink:0}
.admin-nav-symbol svg{width:22px; height:22px}
.admin-nav-content{display:flex; flex-direction:column; gap:.4rem}
.admin-nav-title{font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
.admin-nav-card p{margin:0; color:rgba(226,232,240,.78); font-size:.9rem; line-height:1.45}
.admin-nav-chevron{margin-left:auto; align-self:center; font-size:1.25rem; color:rgba(191,219,254,.82); transition:transform .2s ease}
.admin-nav-card:hover .admin-nav-chevron{transform:translateX(4px)}
.breadcrumb{margin:0; padding:0; font-size:.82rem; color:rgba(148,163,184,.75)}
.breadcrumb ol{margin:0 0 1rem; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.45rem}
.breadcrumb li{display:flex; align-items:center; gap:.45rem}
.breadcrumb li:not(:last-child)::after{content:"/"; color:rgba(100,116,139,.6)}
.breadcrumb a{color:rgba(191,219,254,.85)}
.breadcrumb a:hover{color:#fff}
.admin-subgrid{display:grid; gap:1.35rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:2rem}
.admin-subcard{position:relative; display:flex; gap:1.1rem; align-items:flex-start; padding:1.35rem 1.5rem; border-radius:20px; background:rgba(15,23,42,.62); border:1px solid rgba(148,163,184,.16); box-shadow:0 20px 48px -30px rgba(15,23,42,.8); transition:transform .18s ease, box-shadow .2s ease, border .2s ease}
.admin-subcard:hover{transform:translateY(-3px); border-color:rgba(96,165,250,.45); box-shadow:0 30px 65px -35px rgba(37,99,235,.65)}
.admin-subcard.is-disabled{opacity:.65; pointer-events:none; box-shadow:none; border-color:rgba(148,163,184,.12)}
.admin-subcard-icon{width:48px; height:48px; border-radius:16px; background:rgba(96,165,250,.18); border:1px solid rgba(96,165,250,.35); display:inline-flex; align-items:center; justify-content:center; color:#bfdbfe; flex-shrink:0}
.admin-subcard-icon svg{width:26px; height:26px}
.admin-subcard-body{display:flex; flex-direction:column; gap:.65rem; flex:1}
.admin-subcard-heading{display:flex; align-items:center; gap:.6rem}
.admin-subcard-heading h3{margin:0; font-size:1.02rem; letter-spacing:-.01em}
.admin-subcard-body p{margin:0; color:rgba(226,232,240,.78); font-size:.9rem; line-height:1.5}
.admin-subcard-list{margin:0; padding:0; list-style:none; display:grid; gap:.45rem}
.admin-subcard-list li{position:relative; padding-left:1.1rem; font-size:.85rem; color:rgba(191,219,254,.88)}
.admin-subcard-list li::before{content:"•"; position:absolute; left:0; color:var(--accent)}
.admin-subcard-links{display:flex; flex-wrap:wrap; gap:.6rem}
.admin-subcard-chevron{margin-left:auto; align-self:center; font-size:1.35rem; color:rgba(191,219,254,.82)}
.table-wrapper{overflow:auto; border-radius:18px}
.table-wrapper table{min-width:720px}
.form-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-grid-row{grid-column:1/-1; display:grid; gap:1.1rem; grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto; align-items:start}
.form-grid-row .name-field{max-width:none}
.form-grid-row .status-toggle--grid{justify-self:end; align-self:start}
.form-grid .status-toggle--grid{justify-self:end; align-self:start}
.form-grid .name-field{max-width:320px}
.form-grid-row--headline{gap:.85rem; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto}
.form-grid .email-field{max-width:480px; justify-self:start}
.form-full{grid-column:1/-1}
.role-mapping-list,.company-mapping-list{display:flex; flex-direction:column; gap:.8rem}
.role-mapping-row,.company-mapping-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:.9rem; align-items:center}
.role-mapping-row input,.company-mapping-row input{width:100%}
.role-mapping-row select,.company-mapping-row select{width:100%}
.mapping-add-button{width:100%; margin-bottom:1rem; padding:.55rem 1rem; border-radius:16px; margin-top: 1rem; height: 2rem;}
.form-switches{grid-column:1/-1; display:flex; flex-direction:column; gap:1rem}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.15rem; border-radius:18px; border:1px solid rgba(148,163,184,.18); background:rgba(15,23,42,.65); transition:border .2s ease, box-shadow .2s ease, background .2s ease}
.toggle-row.is-active{border-color:rgba(59,130,246,.45); box-shadow:0 20px 45px -30px rgba(37,99,235,.55); background:rgba(15,23,42,.75)}
.toggle-row-label{font-weight:600; color:rgba(226,232,240,.92); letter-spacing:.01em}
.toggle-row .toggle-switch{margin-left:auto}
@media (max-width:720px){
	.role-mapping-row,.company-mapping-row{grid-template-columns:repeat(1,minmax(0,1fr)); gap:.7rem}
	.toggle-row{flex-direction:column; align-items:flex-start}
	.toggle-row .toggle-switch{margin-left:0}
	.toggle-row-label{max-width:100%}
}
.empty-state{padding:1rem 1.15rem; border-radius:16px; background:rgba(148,163,184,.12); color:rgba(226,232,240,.8); font-size:.9rem}

.button{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.75rem 1.35rem; border-radius:999px; background:linear-gradient(135deg,#60a5fa,#38bdf8); color:#0b1120; font-weight:600; border:1px solid transparent; box-shadow:0 22px 42px -22px rgba(56,189,248,.75); transition:transform .18s ease, box-shadow .2s ease}
.button:hover{transform:translateY(-2px); box-shadow:0 28px 48px -20px rgba(37,99,235,.75)}
.button.btn-secondary{background:rgba(248,250,252,.15); color:#f8fafc; border-color:rgba(255,255,255,.18); box-shadow:0 20px 45px -30px rgba(15,23,42,.75)}
.button.btn-secondary:hover{background:rgba(248,250,252,.25)}
.button.btn-danger{background:#991b1b; color:#f8fafc; border-color:rgba(248,113,113,.4); box-shadow:0 20px 40px -28px rgba(153,27,27,.85)}
.button.btn-danger:hover{background:#7f1d1d}
.button.button-small{padding:.48rem 1rem; font-size:.82rem}
.button.button-ghost{background:rgba(15,23,42,.35); color:rgba(226,232,240,.88); border-color:rgba(148,163,184,.32); box-shadow:none}
.button.button-ghost:hover{background:rgba(30,41,59,.62)}
.button.button-ghost.btn-danger{color:#fecaca; border-color:rgba(248,113,113,.45)}
.button.button-ghost.btn-danger:hover{background:rgba(185,28,28,.55)}

fieldset{border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:1.5rem 1.75rem; backdrop-filter:blur(10px); background:rgba(15,23,42,.6); box-shadow:0 24px 55px -35px rgba(37,99,235,.65)}
legend{padding:0 .85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.82rem; color:rgba(148,163,184,.85)}
.section-help{margin-top:-.4rem; margin-bottom:1rem; font-size:.85rem; color:rgba(148,163,184,.8)}

.alert{padding:1rem 1.2rem; border-radius:16px; border:1px solid transparent; font-size:.92rem; backdrop-filter:blur(8px); background:rgba(15,23,42,.65); box-shadow:0 18px 42px -30px rgba(15,23,42,.85)}
.alert-success{border-color:rgba(74,222,128,.35); background:rgba(22,163,74,.18); color:#bbf7d0}
.alert-error{border-color:rgba(248,113,113,.35); background:rgba(239,68,68,.18); color:#fecaca}
.alert-info{border-color:rgba(96,165,250,.35); background:rgba(59,130,246,.18); color:#bfdbfe}
.field-error{display:block; font-size:.8rem; color:#fca5a5; margin-top:.3rem}
.muted{color:rgba(148,163,184,.75)}
.table-actions form{margin:0}
.form-actions form{margin:0}
.inline-form{display:inline}
.chip-multiselect{display:flex; flex-direction:column; gap:.5rem; padding:.7rem .8rem; border-radius:18px; border:1px solid rgba(148,163,184,.22); background:rgba(15,23,42,.55); min-height:3.2rem; transition:border .2s ease, box-shadow .2s ease}
.chip-multiselect:focus-within{border-color:rgba(56,189,248,.55); box-shadow:0 0 0 2px rgba(56,189,248,.25)}
.chip-multiselect-empty{font-size:.82rem; color:rgba(148,163,184,.78)}
.chip-multiselect-empty.is-hidden{display:none}
.chip-multiselect-options{display:flex; flex-wrap:wrap; gap:.45rem}
.chip-option{display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .95rem; border-radius:999px; border:1px solid rgba(148,163,184,.32); background:rgba(15,23,42,.7); color:rgba(226,232,240,.88); font-size:.85rem; font-weight:500; cursor:pointer; transition:background .18s ease, border .18s ease, box-shadow .18s ease}
.chip-option:hover{border-color:rgba(148,163,184,.6); background:rgba(30,41,59,.82)}
.chip-option.is-selected{background:rgba(56,189,248,.18); border-color:rgba(56,189,248,.45); color:#bae6fd; box-shadow:0 10px 24px -18px rgba(56,189,248,.85)}
.chip-option:focus-visible{outline:2px solid rgba(56,189,248,.7); outline-offset:2px}
.chip-multiselect-source{display:none!important}
.lock-alert{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem}
.lock-alert-text,.lock-alert-meta{margin:0; color:rgba(191,219,254,.88); font-size:.85rem}
.form-lock{border:0; padding:0; margin:0; min-inline-size:auto}
.form-lock--locked{position:relative; background:rgba(15,23,42,.18); border-radius:18px; padding:1.5rem 1.75rem; margin-inline:-0.75rem}
.form-lock--locked::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(148,163,184,.18)}
.form-lock--locked [data-locked="true"]{background:rgba(148,163,184,.14); color:#e2e8f0; cursor:not-allowed; border-color:rgba(148,163,184,.28); box-shadow:none}
.form-lock--locked [data-locked="true"]::placeholder{color:rgba(226,232,240,.6)}
.form-lock--locked [data-locked="true"]:focus{outline:none; box-shadow:none}
.unlink-button{margin-left:auto}

.hero{position:relative; z-index:0; overflow:hidden; border-radius:28px; padding:3rem; background:linear-gradient(135deg, rgba(37,99,235,.78), rgba(14,165,233,.65)); box-shadow:0 26px 65px -35px rgba(37,99,235,.65)}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.32), transparent 55%); opacity:.85; pointer-events:none; z-index:-1}
.hero > *{position:relative; z-index:1}
.hero h1{margin:0 0 .75rem; font-size:2.3rem; letter-spacing:-.01em}
.hero p{margin:0 0 1.75rem; max-width:540px; color:rgba(241,245,249,.9)}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem}
.hero-compact{margin-bottom:1.75rem; padding:2rem 2.4rem; background:linear-gradient(135deg, rgba(79,70,229,.62), rgba(56,189,248,.55)); box-shadow:0 18px 45px -32px rgba(37,99,235,.55)}
.hero-minimal{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-radius:24px; padding:1.75rem 2rem}
.hero-minimal > :first-child{max-width:560px}
.hero-minimal .hero-actions{margin-left:auto}
.hero-toned{background:linear-gradient(135deg, rgba(30,58,138,.65), rgba(14,116,144,.52)); box-shadow:0 20px 45px -30px rgba(15,23,42,.65); border:1px solid rgba(148,163,184,.15)}
.hero-toned::after{display:none}

.home-alert{margin:0 0 1rem}
.home-nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; border-radius:999px; background:rgba(15,23,42,.55); border:1px solid rgba(148,163,184,.16); margin-bottom:1.1rem; flex-wrap:wrap; box-shadow:0 20px 48px -32px rgba(15,23,42,.65)}
.home-nav-greeting{font-weight:600; letter-spacing:-.01em; color:#f8fafc}
.home-nav-links{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.home-nav-link{display:inline-flex; align-items:center; justify-content:center; padding:.5rem .95rem; border-radius:999px; border:1px solid transparent; background:rgba(15,23,42,.45); color:rgba(226,232,240,.82); font-weight:600; letter-spacing:.01em; transition:background .18s ease, border-color .18s ease, color .18s ease}
.home-nav-link:hover{background:rgba(37,99,235,.22); color:#fff}
.home-nav-link.is-active{background:linear-gradient(135deg, rgba(96,165,250,.85), rgba(14,165,233,.75)); color:#0f172a; box-shadow:0 14px 32px -22px rgba(96,165,250,.9)}

.home-stat-list{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:1rem}
.home-stat-item{display:flex; flex-direction:column; gap:.25rem; padding:1.1rem 1.35rem; border-radius:18px; background:rgba(15,23,42,.58); border:1px solid rgba(148,163,184,.18); min-width:160px}
.home-stat-value{font-size:1.4rem; font-weight:600; letter-spacing:-.01em}
.home-stat-label{font-size:.82rem; color:rgba(148,163,184,.75); letter-spacing:.04em; text-transform:uppercase}

.home-section{margin-top:1.35rem; display:flex; flex-direction:column; gap:1.1rem; padding:1.6rem 1.85rem; border-radius:24px; background:rgba(15,23,42,.54); border:1px solid rgba(148,163,184,.16)}
.home-section--stats{padding:1.4rem 1.6rem}
.home-section--stats .home-stat-list{gap:.9rem}
.home-section--secondary{padding:1.45rem 1.75rem}
.home-section-header{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.home-section-header h2{margin:0; font-size:1.2rem; letter-spacing:-.005em}

.course-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:1rem}
.course-item{display:flex; flex-direction:column; gap:.9rem; padding:1.35rem 1.45rem; border-radius:20px; background:rgba(6,12,24,.65); border:1px solid rgba(148,163,184,.16); transition:border .2s ease, background .2s ease}
.course-item:hover{border-color:rgba(96,165,250,.5); background:rgba(12,20,34,.7)}
.course-main{display:flex; flex-direction:column; gap:.55rem; flex:1}
.course-main strong{font-size:1.05rem}
.course-main p{margin:0; color:rgba(191,219,254,.82); font-size:.92rem; line-height:1.5}
.course-meta{display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; font-size:.8rem; color:rgba(148,163,184,.78)}
.course-actions{display:flex; align-items:center; gap:.75rem}
.home-empty{padding:1rem 1.15rem; border-radius:16px; background:rgba(148,163,184,.12); color:rgba(226,232,240,.8); font-size:.9rem}
.home-quick-actions{display:flex; flex-wrap:wrap; gap:.75rem}

@media (min-width:720px){
	.course-item{flex-direction:row; align-items:flex-start}
	.course-actions{margin-left:auto}
}

@media (max-width:640px){
	.home-nav{flex-direction:column; align-items:flex-start; padding:.75rem 1rem}
	.home-nav-links{width:100%; gap:.5rem}
	.home-nav-link{width:100%; justify-content:center}
	.home-section{padding:1.3rem 1.4rem}
	.home-stat-item{padding:1rem 1.1rem}
}


.card-grid{display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{padding:1.75rem; border-radius:24px; background:rgba(15,23,42,.72); border:1px solid rgba(255,255,255,.06); box-shadow:0 26px 60px -32px rgba(15,23,42,.9); display:flex; flex-direction:column; gap:1rem; backdrop-filter:blur(12px)}
.card h3{margin:0; font-size:1.1rem}
.card p{margin:0; color:var(--muted); line-height:1.5}
.card ul{list-style:none; padding:0; margin:0; display:grid; gap:.65rem}
.card ul li{padding:.7rem .85rem; border-radius:14px; background:rgba(148,163,184,.12); color:rgba(226,232,240,.9)}
.card .card-action{margin-top:auto}
.card-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem}
.card-subtitle{margin:0; color:rgba(148,163,184,.75); font-size:.85rem}
.card-header-actions{display:flex; gap:.75rem; flex-wrap:wrap}
.card-header-actions .button{padding:.65rem 1.25rem}

.page-header--profile{align-items:flex-start}
.profile-hero{position:relative; display:flex; flex-direction:column; gap:1.15rem; padding:1.3rem 1.4rem; border-radius:22px; background:linear-gradient(135deg, rgba(79,70,229,.32), rgba(14,165,233,.18)); border:1px solid rgba(148,163,184,.16); box-shadow:0 22px 52px -32px rgba(15,23,42,.78); backdrop-filter:blur(11px)}
.profile-hero-body{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem}
.profile-avatar{width:68px; height:68px; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#818cf8); color:#0b1120; display:flex; align-items:center; justify-content:center; font-size:1.45rem; font-weight:700; box-shadow:0 0 0 3px rgba(56,189,248,.22)}
.profile-hero-details{display:flex; flex-direction:column; gap:.28rem; min-width:200px}
.profile-hero-name{margin:0; font-size:1.32rem; letter-spacing:-.01em}
.profile-hero-subtitle{margin:0; color:rgba(226,232,240,.78); font-size:.86rem}
.profile-hero-subtext{margin:0; color:rgba(226,232,240,.7); font-size:.8rem}
.profile-hero-status{display:flex; align-items:center; gap:.45rem; margin-top:.45rem; flex-wrap:wrap}
.profile-hero-status .pill{font-size:.68rem; padding:.26rem .55rem}
.profile-hero-rolechips{display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; margin-left:.4rem}
.profile-hero-rolechips .profile-chip{font-size:.65rem; padding:.2rem .5rem}
.profile-hero-tags{margin-left:auto; margin-top:.1rem; display:flex; flex-wrap:wrap; gap:.35rem}
.profile-hero-meta{display:grid; gap:.85rem 1.1rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.profile-hero-meta-item{display:flex; flex-direction:column; gap:.22rem}
.profile-hero-meta-label{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(226,232,240,.64)}
.profile-hero-meta-value{font-size:.94rem; font-weight:600; color:#f8fafc}
.profile-hero-meta-value .pill{font-size:.64rem; padding:.2rem .48rem}
.profile-chip-inline{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:999px; background:rgba(15,23,42,.55); color:rgba(191,219,254,.92); border:1px solid rgba(148,163,184,.28); font-size:.82rem; letter-spacing:.03em}
.profile-chip-inline.is-ghost{background:rgba(15,23,42,.35); color:rgba(148,163,184,.85); border-color:rgba(148,163,184,.2)}
.profile-stat-grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.profile-stat{display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.25rem; border-radius:18px; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.18); box-shadow:0 16px 42px -28px rgba(15,23,42,.7)}
.profile-stat-label{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(148,163,184,.72)}
.profile-stat-value{font-size:1.1rem; font-weight:600; letter-spacing:-.01em}
.profile-columns{display:grid; gap:1.75rem; grid-template-columns:minmax(260px,320px) minmax(0,1fr); align-items:start}
.profile-sidebar{display:grid; gap:1.5rem}
.profile-card{display:flex; flex-direction:column; gap:1.2rem}
.profile-card-header{display:flex; flex-direction:column; gap:.35rem}
.profile-card-header h3{margin:0; font-size:1.05rem; letter-spacing:-.005em}
.profile-card-hint{font-size:.82rem; color:rgba(148,163,184,.75)}
.profile-card-identity{display:flex; align-items:flex-start; gap:1.1rem; padding-bottom:.4rem; flex-wrap:wrap}
.profile-card-identity-meta{display:flex; flex-direction:column; gap:.2rem}
.profile-card-name{margin:0; font-size:1.2rem; letter-spacing:-.01em}
.profile-card-username{font-size:.85rem; color:rgba(148,163,184,.75)}
.profile-card-list{margin:0; padding:0; display:grid; gap:.9rem}
.profile-card-row{display:flex; flex-direction:column; gap:.25rem}
.profile-card-row dt{margin:0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(148,163,184,.65)}
.profile-card-row dd{margin:0; font-size:.95rem; font-weight:500; color:rgba(226,232,240,.94)}
.profile-card-subtitle{margin:0 0 .45rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(148,163,184,.68)}
.profile-divider{height:1px; background:rgba(255,255,255,.08); margin:1.1rem 0}
.profile-timeline{margin:0; padding:0; list-style:none; display:grid; gap:1.05rem; position:relative}
.profile-timeline::before{content:""; position:absolute; left:10px; top:6px; bottom:6px; width:1px; background:rgba(148,163,184,.3)}
.profile-timeline-item{position:relative; padding-left:1.8rem}
.profile-timeline-item::before{content:""; position:absolute; left:0; top:.35rem; width:.75rem; height:.75rem; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#818cf8); box-shadow:0 0 0 4px rgba(99,102,241,.16)}
.profile-timeline-item strong{display:block; font-size:.96rem; letter-spacing:-.005em}
.profile-timeline-meta{display:block; margin-top:.25rem; font-size:.8rem; color:rgba(148,163,184,.72)}
.profile-timeline-item p{margin:.35rem 0 0; font-size:.88rem; color:rgba(191,219,254,.88)}
.profile-empty{margin:0; font-size:.88rem}
.profile-form-card{display:flex; flex-direction:column; gap:1.6rem; padding:2.2rem}
.profile-form-header{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.profile-form-header h3{margin:0; font-size:1.2rem; letter-spacing:-.01em}
.profile-form-header p{margin:.25rem 0 0; color:rgba(148,163,184,.78); font-size:.9rem}
.profile-form{display:flex; flex-direction:column; gap:1.5rem}
.profile-form fieldset{margin:0}
.profile-form .form-grid{gap:1.2rem}
.profile-form .form-actions{justify-content:flex-end}
.profile-action-hint{margin:0; color:rgba(148,163,184,.78); font-size:.9rem}
.profile-info-list{margin:0; padding-left:1.1rem; display:grid; gap:.55rem; color:rgba(191,219,254,.9); font-size:.9rem}
.profile-info-list li{line-height:1.45}
.profile-info-list li::marker{color:var(--accent)}
.profile-provider{display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem; border-radius:16px; background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.18)}
.profile-provider .muted{color:rgba(148,163,184,.75)}
.profile-chip{display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:999px; background:rgba(96,165,250,.18); color:rgba(191,219,254,.92); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; border:1px solid rgba(96,165,250,.35)}
.profile-readonly-field{display:flex; flex-direction:column; gap:.35rem; padding:.85rem 1rem; border-radius:16px; background:rgba(15,23,42,.5); border:1px solid rgba(148,163,184,.18)}
.profile-readonly-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(148,163,184,.72)}
.profile-readonly-value{font-size:.96rem; font-weight:600; color:rgba(226,232,240,.95)}
.profile-stat-grid--compact{margin-top:.25rem}

@media (max-width:1024px){
	.profile-columns{grid-template-columns:1fr}
	.profile-sidebar{grid-template-columns:1fr}
}

@media (max-width:860px){
	.profile-hero{padding:1.15rem 1.2rem}
	.profile-hero-body{gap:.9rem}
	.profile-form-card{padding:1.9rem}
}

@media (max-width:640px){
	.profile-hero-body{flex-direction:column; align-items:flex-start}
	.profile-hero-tags{margin-left:0}
	.profile-hero{padding:1rem 1.05rem}
	.profile-hero-body{gap:.85rem}
	.profile-hero-meta{grid-template-columns:1fr}
}

.timeline{display:grid; gap:1.35rem; margin-top:.75rem; position:relative; padding-left:1.5rem}
.timeline::before{content:""; position:absolute; left:.4rem; top:.25rem; bottom:.25rem; width:2px; background:linear-gradient(180deg, rgba(148,163,184,.35), transparent)}
.timeline-item{position:relative; padding-left:1rem}
.timeline-item::before{content:""; position:absolute; left:-1.5rem; top:.45rem; width:.75rem; height:.75rem; border-radius:50%; background:linear-gradient(135deg,#38bdf8,#818cf8); box-shadow:0 0 0 4px rgba(129,140,248,.18)}
.timeline-item h3{margin:0 0 .35rem; font-size:1.02rem}
.timeline-item p{margin:0; color:rgba(148,163,184,.85)}

.pill{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:999px; font-size:.8rem; font-weight:600; letter-spacing:.03em}
.pill.success{background:rgba(52,211,153,.2); color:#bbf7d0}
.pill.danger{background:rgba(248,113,113,.18); color:#fecaca}
.pill.neutral{background:rgba(148,163,184,.22); color:rgba(226,232,240,.92)}
.pill.link{background:rgba(148,163,184,.18); color:rgba(226,232,240,.88); border:1px solid rgba(148,163,184,.35); padding:.35rem 1rem; transition:all .2s ease}
.pill.link:hover{border-color:rgba(226,232,240,.65); color:#fff}
.pill.chip{background:rgba(96,165,250,.16); color:#dbeafe; border:1px solid rgba(96,165,250,.35)}

.data-card table{width:100%; border-collapse:collapse; font-size:.88rem}
.data-card thead{background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(14,165,233,.15)); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color:rgba(226,232,240,.85)}
.data-card th,.data-card td{padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.05); text-align:left}
.data-card tbody tr:last-child td{border-bottom:none}
.data-card tbody tr:hover{background:rgba(37,99,235,.12)}
.table-actions{display:flex; justify-content:flex-end; align-items:center; gap:.25rem; white-space:nowrap}
.icon-button{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px; border:1px solid rgba(148,163,184,.28); background:rgba(15,23,42,.55); color:rgba(226,232,240,.88); transition:background .2s ease, border-color .2s ease, transform .18s ease}
.icon-button svg{width:15px; height:15px; display:block}
.icon-button:hover,.icon-button:focus-visible{background:rgba(56,189,248,.18); border-color:rgba(148,163,184,.45); color:#fff; outline:none; transform:translateY(-1px)}
.icon-button:focus-visible{box-shadow:0 0 0 4px rgba(56,189,248,.22)}

.auth-wrapper{display:flex; align-items:center; justify-content:center; min-height:70vh}
.auth-card{width:100%; max-width:430px; padding:2.8rem; border-radius:26px; background:rgba(15,23,42,.78); border:1px solid rgba(255,255,255,.08); box-shadow:0 32px 70px -28px rgba(8,16,28,.85); display:grid; gap:1.35rem}
.auth-card h1{margin:0; font-size:1.75rem}
.auth-card p{margin:0; color:rgba(226,232,240,.8)}
.auth-alert{padding:1rem 1.15rem; border-radius:18px; font-size:.92rem; line-height:1.35; display:flex; gap:.65rem; align-items:flex-start; border:1px solid transparent}
.auth-alert.is-error{background:rgba(248,113,113,.15); border-color:rgba(248,113,113,.35); color:rgba(254,226,226,.95)}
.auth-alert.is-success{background:rgba(34,197,94,.15); border-color:rgba(74,222,128,.35); color:rgba(240,253,244,.95)}
.auth-help{text-align:center; color:rgba(148,163,184,.85); font-size:.85rem}
.auth-divider{position:relative; text-align:center; margin:1.5rem 0; color:rgba(148,163,184,.8); font-size:.85rem}
.auth-divider::before,.auth-divider::after{content:""; position:absolute; top:50%; width:38%; height:1px; background:rgba(148,163,184,.25)}
.auth-divider::before{left:0}
.auth-divider::after{right:0}
.auth-sso-buttons{display:grid; gap:.75rem; margin-bottom:1.5rem}
.auth-sso-button{display:inline-flex; justify-content:center; align-items:center; padding:.75rem 1rem; border-radius:12px; background:#111827; color:#fff; font-weight:600; transition:background .2s ease}
.auth-sso-button:hover{background:#1f2937; color:#fff}
.auth-header{display:grid; gap:.75rem}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:999px; background:rgba(96,165,250,.2); color:#bfdbfe; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.auth-benefits{margin:0; padding:0; list-style:none; display:grid; gap:.45rem; font-size:.85rem; color:rgba(191,219,254,.95)}
.auth-benefits li{display:flex; align-items:center; gap:.45rem}
.auth-benefits li::before{content:"•"; color:var(--accent); font-size:1.2rem; line-height:1}

.metric-stack{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.metric-card{padding:1.25rem; border-radius:18px; background:rgba(15,23,42,.65); border:1px solid rgba(255,255,255,.05); display:flex; flex-direction:column; gap:.45rem}
.metric-label{font-size:.82rem; color:rgba(148,163,184,.8); letter-spacing:.04em; text-transform:uppercase}
.metric-value{font-size:1.65rem; font-weight:600; letter-spacing:-.01em}
.metric-description{margin:0; font-size:.85rem; color:rgba(148,163,184,.8)}
.metric-stack--inline{margin-bottom:1.75rem}
.metric-stack--inline .metric-card{padding:1.1rem 1.35rem}
.metric-stack--inline .metric-value{font-size:1.55rem}

.grid-panels{display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.admin-users-grid{align-items:start}
.role-breakdown{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.75rem}

.rich-table{overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.06); background:rgba(15,23,42,.68); box-shadow:0 26px 60px -35px rgba(10,16,28,.85)}

.user-status{display:flex; align-items:center; gap:1rem}
.form-card{gap:2rem; padding:2.2rem}
.divider{height:1px; background:rgba(255,255,255,.08); margin:1.5rem 0}
.form-actions{display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-end}

.admin-users-table{padding:2.1rem; gap:1.5rem}
.admin-users-table .card-header{margin-bottom:0}
.admin-users-table .table-wrapper{overflow-x:auto; overflow-y:hidden}
.admin-users-table .table-wrapper table{min-width:100%; width:100%; table-layout:auto}
.admin-users-table th,.admin-users-table td{white-space:normal; word-break:break-word}
.admin-users-table th:nth-child(1),.admin-users-table td:nth-child(1){width:120px; white-space:nowrap}
.admin-users-table th:nth-child(7),.admin-users-table td:nth-child(7){width:100px; white-space:nowrap}
.admin-users-table th:nth-child(8),.admin-users-table td:nth-child(8){width:56px; white-space:nowrap}
.admin-users-table td.table-actions{padding:.6rem .6rem}
.admin-users-table td.table-actions .icon-button{width:28px; height:28px}
.admin-companies-table .table-actions{display:flex; gap:.5rem; justify-content:flex-end; align-items:center}
.admin-companies-table .table-actions form{margin:0}
.table-actions{display:flex; gap:.5rem; align-items:center}

.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:2rem; background:rgba(5,8,21,.72); backdrop-filter:blur(12px); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:50}
.modal.is-visible{opacity:1; pointer-events:auto}
.modal-dialog{width:min(620px,92vw); max-height:90vh; overflow:auto; background:rgba(15,23,42,.9); border:1px solid rgba(148,163,184,.2); border-radius:26px; box-shadow:0 38px 85px -32px rgba(8,16,28,.85); padding:2.2rem; display:flex; flex-direction:column; gap:1.5rem}
.modal-header{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.modal-header h2{margin:0; font-size:1.35rem}
.modal-close{all:unset; cursor:pointer; font-size:1.6rem; line-height:1; color:rgba(226,232,240,.85); padding:.2rem .4rem; border-radius:12px}
.modal-close:hover{background:rgba(148,163,184,.18)}
.modal-body{display:flex; flex-direction:column; gap:1.5rem}
.modal-footer{display:flex; justify-content:flex-end; gap:1rem}
.modal-footer .button{min-width:140px}

.page-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:2rem; align-items:start}
@media (max-width:1024px){.page-grid{grid-template-columns:1fr}}
.info-card{border-radius:24px; border:1px solid rgba(148,163,184,.18); background:rgba(15,23,42,.66); box-shadow:0 24px 54px -30px rgba(8,16,28,.82)}
.info-card .card-body{display:grid; gap:1.4rem}
.course-cover-preview{display:grid; gap:.5rem; margin:0}
.course-cover-preview img{width:100%; border-radius:18px; border:1px solid rgba(148,163,184,.2); object-fit:cover}
.course-cover-preview figcaption{font-size:.78rem; color:rgba(148,163,184,.8)}
.scorm-package-summary dl{display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1.1rem; margin:0 0 1rem; font-size:.9rem}
.scorm-package-summary dt{color:rgba(148,163,184,.82); text-transform:uppercase; letter-spacing:.04em; font-size:.74rem; font-weight:600}
.scorm-package-summary dd{margin:0; color:rgba(226,232,240,.9)}
.scorm-package-outline{list-style:disc; margin:0; padding-left:1.25rem; display:grid; gap:.35rem; color:rgba(203,213,225,.88); font-size:.88rem}
.scorm-package-outline li{line-height:1.3}

.scorm-shell{display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:2rem; align-items:start; width:100%; min-height:calc(100vh - 200px)}
.scorm-sidebar{padding:1.8rem; border-radius:22px; background:rgba(15,23,42,.78); border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 48px -28px rgba(8,16,28,.85); display:grid; gap:1.25rem; position:sticky; top:1.5rem; height:fit-content}
.scorm-sidebar h1{margin:0; font-size:1.45rem; line-height:1.2}
.scorm-sidebar dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:.45rem 1.2rem; font-size:.92rem}
.scorm-sidebar dt{color:rgba(148,163,184,.78); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.75rem}
.scorm-sidebar dd{margin:0; color:rgba(226,232,240,.92)}
.scorm-sidebar-meta{margin:0; font-size:.82rem; color:rgba(148,163,184,.78)}
.scorm-outline{display:grid; gap:.8rem}
.scorm-outline h2{margin:0; font-size:1rem; color:rgba(226,232,240,.92); letter-spacing:.02em}
.scorm-toc{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.scorm-toc-item{display:flex; align-items:center; gap:.75rem; padding:.45rem .75rem .45rem 1.5rem; border-radius:14px; position:relative; background:rgba(15,23,42,.6); border:1px solid rgba(148,163,184,.12); box-shadow:0 10px 32px -24px rgba(8,16,28,.8)}
.scorm-toc-item::before{content:""; position:absolute; left:.65rem; top:50%; transform:translateY(-50%); width:.65rem; height:.65rem; border-radius:999px; background:rgba(148,163,184,.5)}
.scorm-toc-item.depth-1{margin-left:.6rem}
.scorm-toc-item.depth-2{margin-left:1.2rem}
.scorm-toc-item.depth-3{margin-left:1.8rem}
.scorm-toc-item.is-current{border-color:rgba(94,234,212,.42); box-shadow:0 14px 36px -22px rgba(45,212,191,.45)}
.scorm-toc-item.status-completed::before{background:rgba(45,212,191,.9)}
.scorm-toc-item.status-failed::before{background:rgba(248,113,113,.9)}
.scorm-toc-item.status-in_progress::before{background:rgba(129,140,248,.9)}
.scorm-toc-item.status-suspended::before{background:rgba(251,191,36,.9)}
.scorm-toc-item.status-not_attempted::before{background:rgba(148,163,184,.5)}
.scorm-toc-title{flex:1 1 auto; color:rgba(226,232,240,.95); font-size:.95rem}
.scorm-toc-badge{font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(148,163,184,.8); margin-left:auto}
.scorm-toc-item.status-completed .scorm-toc-badge::before{content:"✓ "; color:rgba(45,212,191,.9)}
.scorm-toc-item.status-failed .scorm-toc-badge::before{content:"× "; color:rgba(248,113,113,.9)}
.scorm-stage{position:relative; border-radius:28px; overflow:hidden; background:#000; border:1px solid rgba(148,163,184,.25); box-shadow:0 42px 70px -36px rgba(8,16,28,.92); aspect-ratio:16/9; min-height:540px; width:100%}
.scorm-stage iframe{position:absolute; inset:0; width:100%; height:100%; min-height:540px; border:0; background:#000}
.scorm-error{display:flex; align-items:center; justify-content:center; color:rgba(226,232,240,.85); font-size:1rem; height:100%; text-align:center; padding:2rem}
.scorm-toc-item.status-completed .scorm-toc-badge{color:rgba(45,212,191,.85)}
.scorm-toc-item.status-failed .scorm-toc-badge{color:rgba(248,113,113,.9)}
.scorm-toc-item.status-suspended .scorm-toc-badge{color:rgba(251,191,36,.9)}
.scorm-toc-item.status-in_progress .scorm-toc-badge{color:rgba(129,140,248,.9)}
.scorm-toc-link,.scorm-toc-entry{display:flex; align-items:center; gap:.75rem; width:100%; color:inherit; text-decoration:none}
.scorm-toc-link:focus-visible{outline:2px solid rgba(148,163,184,.6); outline-offset:4px}
.scorm-toc-link:hover .scorm-toc-title{color:rgba(226,232,240,.95)}
.scorm-toc-entry.is-disabled{opacity:.65; cursor:default}
.scorm-toc-item.is-current .scorm-toc-title{font-weight:600}
@media (max-width:1024px){.scorm-shell{grid-template-columns:1fr; min-height:auto}.scorm-sidebar{position:relative; top:auto}.scorm-stage{order:-1}}
@media (max-width:768px){.scorm-stage{min-height:360px}.scorm-stage iframe{min-height:360px}}
@media (min-width:1280px){.scorm-shell{grid-template-columns:minmax(260px,320px) minmax(960px,1fr)}}

@media (max-width:640px){
	.modal{padding:1.2rem}
	.modal-dialog{padding:1.6rem; border-radius:22px}
	.table-wrapper table{min-width:600px}
		.card-header{flex-direction:column; align-items:flex-start}
		.card-header-actions{width:100%; justify-content:flex-start}
}

@media (max-width:860px){
	.ui-header{flex-direction:column; align-items:flex-start; gap:1rem}
	.ui-actions{width:100%; justify-content:space-between}
	.ui-user{flex:1}
	.ui-container{padding:1.85rem 1.5rem 3.5rem; gap:2rem}
	.page-header{flex-direction:column; align-items:flex-start; padding:1.05rem 1.35rem; gap:.9rem; margin-bottom:1.35rem}
	.page-header--compact{padding:0; margin-bottom:1rem}
	.page-header--compact .page-header-info{align-items:flex-start}
	.page-header--compact .page-header-blurb{max-width:none}
	.metric-stack--inline{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
	.hero{padding:2.2rem}
	.hero-minimal{flex-direction:column; align-items:flex-start; padding:1.6rem 1.8rem}
	.hero-minimal .hero-actions{margin-left:0; width:100%; justify-content:flex-start}
	.card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
	.ui-footer-inner{flex-direction:column; align-items:flex-start; gap:.75rem}
	.form-grid .name-field{max-width:none}
	.form-grid .status-toggle--grid{justify-self:start}
	.form-grid .email-field{max-width:none}
	.form-grid-row{grid-template-columns:1fr; align-items:stretch}
	.form-grid-row .status-toggle--grid{justify-self:start}
	.admin-nav{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); overflow-x:auto; padding-bottom:.4rem}
	.admin-nav-card{min-width:220px}
	.admin-subgrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

@media (max-width:720px){
	.admin-nav{grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr)}
	.admin-subcard{padding:1.2rem 1.3rem}
}

@media (max-width:540px){
	.ui-header,.ui-footer{margin:1rem auto 0}
	.ui-container{padding:1.75rem 1.25rem 3.5rem}
	.hero h1{font-size:1.8rem}
	.auth-card{padding:2.2rem 1.8rem}
	.admin-subgrid{grid-template-columns:1fr}
}