@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
    --purple:#9570d4;
    --purple-deep:#5b4b91;
    --purple-sidebar:#58518d;
    --purple-sidebar-dark:#45406f;
    --purple-soft:#eee9f9;
    --teal:#11c2b0;
    --pink:#ff4b89;
    --blue:#2d9cff;

    --page:#f6f4fb;
    --panel:#ffffff;
    --panel-soft:#faf9fd;
    --line:#e5e1ef;
    --text:#4a4752;
    --heading:#33313b;
    --muted:#96919e;
    --topbar:#ffffff;
    --footer:#ffffff;

    --shadow:0 7px 22px rgba(71,54,114,.055);
}

html[data-theme="dark"]{
    --page:#1b1920;
    --panel:#242229;
    --panel-soft:#2a272f;
    --line:#3a3642;
    --text:#d7d3dd;
    --heading:#f4f1f7;
    --muted:#9d98a6;
    --topbar:#242229;
    --footer:#242229;
    --shadow:0 9px 24px rgba(0,0,0,.16);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:var(--page);color:var(--text)}
button,input,textarea,select{font:inherit}
a{color:inherit}
button{cursor:pointer}

body:before{
    content:"";
    position:fixed;
    inset:74px 0 0 293px;
    pointer-events:none;
    background:
        radial-gradient(circle at 76% 24%,rgba(139,100,205,.07),transparent 25%),
        repeating-linear-gradient(77deg,transparent 0 70px,rgba(135,105,190,.025) 72px 73px,transparent 75px 145px);
    z-index:0;
}

.app-shell{min-height:100vh;display:flex}

/* SIDEBAR — matched to Events */
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:293px;
    z-index:50;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    color:#e9e6f0;
    background:linear-gradient(180deg,var(--purple-sidebar),var(--purple-sidebar-dark));
    transition:width .22s ease;
}

.brand{
    height:75px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 31px;
    color:white;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.16);
    font-size:16px;
    font-weight:400;
}
.brand-symbol{
    width:43px;height:43px;border:1px solid rgba(255,255,255,.35);
    border-radius:50%;display:grid;place-items:center;font-size:18px
}

.sidebar-profile{
    height:163px;
    position:relative;
    display:flex;
    align-items:center;
    padding:0 30px;
    border-bottom:1px solid rgba(255,255,255,.16);
    overflow:hidden;
}
.profile-orbit{
    position:absolute;inset:0;
    opacity:.52;
    background:
      radial-gradient(ellipse at 57% 45%,transparent 0 44%,rgba(255,255,255,.22) 45% 45.5%,transparent 46%),
      radial-gradient(ellipse at 67% 45%,transparent 0 57%,rgba(255,255,255,.16) 58% 58.5%,transparent 59%);
}
.profile-orbit:after{
    content:"";position:absolute;width:5px;height:5px;border-radius:50%;
    background:white;right:39px;top:42px;box-shadow:-92px 53px 0 rgba(255,255,255,.75),-51px -8px 0 rgba(255,255,255,.7)
}
.sidebar-avatar{
    position:relative;z-index:2;
    width:59px;height:59px;border-radius:50%;object-fit:cover;
    border:3px solid rgba(255,255,255,.85);
    box-shadow:0 0 25px rgba(255,255,255,.24)
}
.avatar-initials{display:grid;place-items:center;background:#7760af;color:white;font-weight:700}
.presence-dot{
    width:11px;height:11px;border-radius:50%;background:#21c9aa;position:absolute;
    z-index:3;left:74px;top:98px;border:2px solid #675d98
}
.sidebar-profile-copy{position:relative;z-index:2;margin-left:14px;min-width:0}
.sidebar-profile-copy strong{display:block;font-size:14px;color:white;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-profile-copy span{display:block;font-size:10px;color:#efedf5}
.sidebar-profile-copy small{display:block;font-size:9px;letter-spacing:.035em;color:#bfb9cf;margin-top:2px}

.sidebar-module-label{
    height:55px;display:flex;align-items:center;justify-content:center;gap:9px;
    font-size:9px;letter-spacing:.14em;font-weight:600;color:#d1cada;
    border-bottom:1px solid rgba(255,255,255,.05)
}
.sidebar-module-label i{font-size:10px}

.nav{flex:1;padding:18px 0;overflow:auto}
.nav a{
    min-height:48px;padding:0 34px;display:flex;align-items:center;gap:16px;
    color:#d7d3df;text-decoration:none;font-size:13px;
    border-left:3px solid transparent;position:relative
}
.nav a i{width:20px;text-align:center;font-size:17px;color:#9682bd}
.nav a:hover{background:rgba(255,255,255,.045);color:#fff}
.nav a.active{
    background:rgba(28,22,61,.18);
    border-left-color:#9e76df;
    color:#fff;font-weight:600
}
.nav a.active i{color:#a885df}
.nav a.active:after{
    content:"";width:6px;height:6px;border-radius:50%;background:#18c7ac;
    position:absolute;right:13px
}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.1);padding:11px 0}
.sidebar-footer a{height:45px;padding:0 35px;display:flex;align-items:center;gap:15px;text-decoration:none;font-size:12px}
.sidebar-footer a:hover{background:rgba(255,255,255,.05)}

/* MAIN / TOPBAR */
.main{margin-left:293px;width:calc(100% - 293px);min-height:100vh;position:relative;z-index:1;transition:.22s}
.topbar{
    height:74px;background:var(--topbar);border-top:4px solid #20212a;border-bottom:1px solid var(--line);
    display:flex;align-items:center;padding:0 20px 0 21px;gap:16px;position:sticky;top:0;z-index:35
}
.menu-button{
    width:56px;height:41px;border:1px solid var(--line);border-radius:4px;
    background:var(--panel);color:#77747c;font-size:18px
}
.topbar-spacer{flex:1}
.top-icon{
    width:41px;height:41px;display:grid;place-items:center;color:#9c73d4;
    font-size:20px;text-decoration:none;border:0;background:transparent;position:relative
}
.notification-button{border:0}
.notification-button span{
    position:absolute;right:1px;top:2px;min-width:17px;height:17px;border-radius:20px;
    background:#f44f86;color:white;font-size:9px;display:grid;place-items:center;font-weight:700
}
.top-profile{
    width:46px;height:46px;border-radius:50%;overflow:hidden;margin-left:5px;
    border:2px solid #e2ddec;text-decoration:none;display:grid;place-items:center;background:#77639c;color:white;font-weight:700
}
.top-profile img{width:100%;height:100%;object-fit:cover}

/* CONTENT */
.content{max-width:1500px;margin:0 auto;padding:28px 34px 90px;position:relative;z-index:2}
.breadcrumbs{height:31px;display:flex;align-items:center;gap:10px;font-size:11px;color:#8b8592;margin-bottom:17px}
.breadcrumbs span:first-child{color:#9c73d4}.breadcrumbs i{font-size:8px;color:#aaa5ae}
.page-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.page-heading h1{font-size:26px;font-weight:500;color:var(--heading);margin:0 0 6px;letter-spacing:-.025em}
.page-heading p{font-size:11px;color:var(--muted);margin:0}
.outline-btn,.soft-btn{
    display:inline-flex;align-items:center;gap:8px;border:1px solid #d9d4e3;background:var(--panel);
    color:var(--text);border-radius:5px;padding:10px 14px;text-decoration:none;font-size:11px
}

/* Events-like banner */
.hero-card{
    min-height:178px;border-radius:5px;padding:32px 35px;
    background:linear-gradient(110deg,#62558f,#735ca8 54%,#9164ce);
    color:white;display:flex;align-items:center;justify-content:space-between;
    position:relative;overflow:hidden;box-shadow:var(--shadow);margin-bottom:22px
}
.hero-card:after{
    content:"";position:absolute;right:-2%;top:-150px;width:560px;height:390px;border:1px solid rgba(255,255,255,.14);
    border-radius:50%;box-shadow:-70px 30px 0 -69px rgba(255,255,255,.18),-120px 40px 0 -119px rgba(255,255,255,.16)
}
.hero-card:before{
    content:"";position:absolute;right:51px;top:54px;width:4px;height:4px;background:white;border-radius:50%;
    opacity:.55;box-shadow:67px 32px 0 white,-163px 27px 0 rgba(255,255,255,.8),-102px -11px 0 white
}
.hero-copy{position:relative;z-index:2}
.hero-kicker{
    display:inline-block;background:#9d77cf;color:white;border-radius:4px;
    padding:4px 7px;font-size:9px;font-weight:700;letter-spacing:0
}
.hero-copy h2{font-size:31px;font-weight:400;margin:13px 0 11px}
.hero-copy p{font-size:11px;margin:0;color:#eee9f4}
.identity-number{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:10px;color:#fff}
.identity-number span{font-weight:700}
.hero-orbit{display:none}

/* METRICS */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 22px}
.stat-card{
    min-height:95px;background:var(--panel);border:1px solid var(--line);border-radius:5px;
    box-shadow:var(--shadow);display:flex;align-items:center;padding:18px 20px;gap:15px
}
.stat-icon{width:39px;height:39px;display:grid;place-items:center;font-size:24px;background:transparent;color:#9c73d4}
.stat-card:nth-child(2) .stat-icon{color:var(--teal)}
.stat-card:nth-child(3) .stat-icon{color:var(--blue)}
.stat-card:nth-child(4) .stat-icon{color:var(--pink)}
.stat-card span,.stat-card strong,.stat-card small{display:block}
.stat-card span{font-size:10px;color:var(--muted);margin-bottom:5px}
.stat-card strong{font-size:20px;font-weight:500;color:var(--heading);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-card small{font-size:9px;color:var(--muted)}

/* PANELS */
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);gap:23px}
.panel{
    background:var(--panel);border:1px solid var(--line);border-radius:5px;
    box-shadow:var(--shadow);overflow:hidden
}
.panel>header{
    min-height:63px;padding:0 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between
}
.panel header h3{font-size:13px;font-weight:600;color:var(--heading);margin:0 0 4px}
.panel header p{font-size:9px;color:var(--muted);margin:0}
.panel header a{font-size:10px;color:#8c63c5;text-decoration:none}
.status-badge{font-size:8px;background:#9670cb;color:white;padding:4px 7px;border-radius:4px;font-weight:700}
.foundation-list{padding:7px 18px 17px}
.foundation-list>div{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.foundation-list>div:last-child{border-bottom:0}
.foundation-list span{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:#9673cb;color:#fff;flex:0 0 auto}
.foundation-list .done{background:#9673cb;color:#fff}
.foundation-list .next{background:#9673cb;color:#fff}
.foundation-list strong,.foundation-list small{display:block}
.foundation-list strong{font-size:11px;color:var(--heading);font-weight:600}
.foundation-list small{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.5}
.snapshot{padding:5px 17px 15px;margin:0}
.snapshot>div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.snapshot>div:last-child{border-bottom:0}
.snapshot dt{font-size:10px;color:var(--muted)}
.snapshot dd{font-size:10px;color:var(--heading);font-weight:500;margin:0;text-align:right}

/* PROFILE */
.profile-layout{display:grid;grid-template-columns:315px 1fr;gap:22px}
.profile-summary{padding:29px 24px;text-align:center;height:max-content}
.profile-avatar-large{
    width:112px;height:112px;border-radius:50%;margin:0 auto 17px;background:linear-gradient(135deg,#65568f,#9d71d8);
    color:#fff;display:grid;place-items:center;font-size:31px;font-weight:700;overflow:hidden;border:5px solid var(--panel);box-shadow:0 0 0 1px var(--line)
}
.profile-avatar-large img{width:100%;height:100%;object-fit:cover}
.profile-summary h2{font-size:18px;font-weight:500;color:var(--heading);margin:0 0 5px}
.profile-summary>p{font-size:10px;color:var(--muted);margin:0 0 15px}
.institution-chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel-soft);border:1px solid var(--line);padding:8px 11px;border-radius:4px;font-size:9px}
.profile-id{font-size:9px;color:var(--muted);letter-spacing:.08em;margin:16px 0}
.edit-panel{overflow:hidden}.profile-form{padding:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.form-grid label{font-size:10px;color:var(--heading);font-weight:600}
.form-grid input,.form-grid textarea{
    display:block;width:100%;margin-top:7px;border:1px solid var(--line);background:var(--panel-soft);color:var(--text);
    border-radius:4px;padding:11px 12px;outline:none
}
.form-grid input:focus,.form-grid textarea:focus{border-color:#9b74d2;box-shadow:0 0 0 2px rgba(155,116,210,.1)}
.form-grid input:disabled{opacity:.68}.form-grid label small{display:block;font-size:8px;color:var(--muted);font-weight:400;margin-top:5px}
.span-2{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;margin-top:18px}
.primary-btn{
    border:0;background:#8f69c6;color:white;border-radius:4px;padding:12px 17px;font-weight:600;cursor:pointer
}
.primary-btn.compact{font-size:11px;padding:10px 16px}
.success-banner,.error-banner{padding:12px 14px;border-radius:4px;margin-bottom:15px;font-size:10px}
.success-banner{background:#e9f8f4;color:#14977e}.error-banner{background:#fff0f3;color:#c74760}
.success-banner i,.error-banner i{margin-right:8px}

/* FOOTER & THEME */
.footer{
    position:fixed;
    left:293px;
    right:0;
    bottom:0;
    z-index:50;
    min-height:53px;
    background:var(--footer);
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 34px;
    font-size:10px;
    color:#7e7b83;
    transition:left .22s ease;
}
.footer strong{font-size:10px;color:#73717a}.footer nav{display:flex;gap:23px}.footer a{text-decoration:none}
.floating-theme{
    position:fixed;right:28px;bottom:94px;width:49px;height:49px;border:0;border-radius:50%;
    background:#292632;color:white;display:grid;place-items:center;z-index:45;font-size:16px;box-shadow:0 8px 22px rgba(19,17,24,.25)
}

/* COLLAPSED */
.sidebar-collapsed .sidebar{width:74px}
.sidebar-collapsed .main{margin-left:74px;width:calc(100% - 74px)}
.sidebar-collapsed .footer{left:74px}
.sidebar-collapsed body:before{left:74px}
.sidebar-collapsed .brand{padding:0 15px;justify-content:center}.sidebar-collapsed .brand span{display:none}
.sidebar-collapsed .sidebar-profile{height:88px;padding:0;justify-content:center}
.sidebar-collapsed .sidebar-profile-copy,.sidebar-collapsed .profile-orbit,.sidebar-collapsed .sidebar-module-label span,.sidebar-collapsed .nav span,.sidebar-collapsed .sidebar-footer span{display:none}
.sidebar-collapsed .sidebar-avatar{width:43px;height:43px}.sidebar-collapsed .presence-dot{left:49px;top:54px}
.sidebar-collapsed .sidebar-module-label{height:42px}
.sidebar-collapsed .nav a{padding:0;justify-content:center}.sidebar-collapsed .nav a i{width:auto}.sidebar-collapsed .nav a.active:after{display:none}
.sidebar-collapsed .sidebar-footer a{justify-content:center;padding:0}

/* LOGIN — same Events family, not a different product */
.login-page{
    background:
       radial-gradient(circle at 15% 25%,rgba(160,120,218,.20),transparent 24%),
       linear-gradient(135deg,#554c87,#7561a8 55%,#8f67c8);
}
.login-layout{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-visual{
    color:#fff;padding:48px 58px;display:flex;flex-direction:column;position:relative;overflow:hidden;
    background:
       radial-gradient(ellipse at 65% 48%,transparent 0 39%,rgba(255,255,255,.10) 40% 40.5%,transparent 41%),
       radial-gradient(ellipse at 75% 48%,transparent 0 54%,rgba(255,255,255,.08) 55% 55.4%,transparent 56%)
}
.login-visual:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;right:20%;top:24%;box-shadow:-130px 180px 0 rgba(255,255,255,.7),80px 120px 0 rgba(255,255,255,.6)}
.login-brand{display:flex;align-items:center;gap:15px;position:relative;z-index:2}
.login-brand .brand-mark{width:45px;height:45px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center}
.login-brand strong,.login-brand small{display:block}.login-brand strong{font-size:19px;font-weight:500}.login-brand small{font-size:10px;opacity:.65;margin-top:4px}
.login-message{margin:auto 0;max-width:620px;position:relative;z-index:2}
.eyebrow{font-size:9px;letter-spacing:.13em;font-weight:700;color:#9b72d5}
.login-visual .eyebrow{color:#e5dafa}
.login-message h1{font-size:50px;line-height:1.08;font-weight:400;letter-spacing:-.04em;margin:16px 0}
.login-message>p{max-width:525px;font-size:13px;line-height:1.75;opacity:.72}
.login-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}.login-pills span{font-size:9px;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:9px 11px}
.visual-footer{font-size:9px;opacity:.5;position:relative;z-index:2}
.login-form-side{background:#faf9fd;display:grid;place-items:center;padding:35px}
.login-card{width:min(435px,100%);background:white;border:1px solid #e7e2ed;border-radius:5px;box-shadow:0 12px 35px rgba(69,50,105,.12);padding:37px;color:#494650}
.login-card h2{font-size:25px;font-weight:500;color:#37343d;margin:9px 0 6px}.muted{font-size:10px;color:#8c8793;margin:0 0 25px}
.login-card>label{display:block;font-size:10px;font-weight:600;margin:15px 0;color:#55515a}
.input-wrap{height:45px;border:1px solid #ded9e5;border-radius:4px;margin-top:7px;display:flex;align-items:center;padding:0 12px;color:#9b95a3;background:#fff}
.input-wrap:focus-within{border-color:#9670ce;box-shadow:0 0 0 2px rgba(150,112,206,.08)}
.input-wrap input{border:0;outline:0;flex:1;min-width:0;padding:0 10px;background:transparent;color:#4a4650}
.password-eye{border:0;background:transparent;color:#8f8998}
.login-options{display:flex;justify-content:space-between;align-items:center;font-size:9px;margin:14px 0 18px}.login-options a{color:#8d64c6;text-decoration:none}
.check{display:flex;align-items:center;gap:5px}
.login-card .primary-btn{width:100%;display:flex;align-items:center;justify-content:space-between}
.login-note{display:flex;gap:8px;margin-top:21px;padding-top:17px;border-top:1px solid #ece8f0;color:#85808d;font-size:9px;line-height:1.5}
.mobile-brand{display:none}
.alert{background:#fff0f3;color:#bd405a;padding:11px;border-radius:4px;font-size:10px;margin:12px 0}.alert i{margin-right:7px}

/* RESPONSIVE */
@media(max-width:1080px){
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .dashboard-grid{grid-template-columns:1fr}
    .profile-layout{grid-template-columns:1fr}
    .profile-summary{display:none}
}
@media(max-width:820px){
    body:before{left:0}
    .sidebar{transform:translateX(-100%);width:293px}
    .main,.sidebar-collapsed .main{margin-left:0;width:100%}
    .footer,.sidebar-collapsed .footer{left:0}
    body.sidebar-mobile-open .sidebar{transform:translateX(0)}
    .content{padding:22px 18px 90px}
    .topbar{padding-left:14px}
    .footer{padding:0 18px}
    .login-layout{grid-template-columns:1fr}.login-visual{display:none}.login-form-side{min-height:100vh}
    .mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:29px}
    .mobile-brand .brand-mark{width:40px;height:40px;border:1px solid #ded8e9;border-radius:50%;display:grid;place-items:center;color:#8f68c6}
}
@media(max-width:580px){
    .stats-grid{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}
    .page-heading{align-items:flex-start;gap:12px;flex-direction:column}
    .hero-card{padding:25px}.hero-copy h2{font-size:25px}
    .footer nav{gap:12px}.login-form-side{padding:18px}.login-card{padding:28px 23px}
}


/* IDENTITY DASHBOARD METRICS
   Institution and role already live in the identity banner, so the summary row
   intentionally uses two roomy cards instead of repeating them. */
.stats-grid.stats-grid-two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.stats-grid-two .stat-card{
    min-height:102px;
    padding:19px 24px;
}
.stats-grid-two .stat-icon{
    width:48px;
    height:48px;
    font-size:25px;
    flex:0 0 48px;
}
.stats-grid-two .stat-copy{
    min-width:0;
}
.stats-grid-two .stat-card strong{
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
}
.stats-grid-two .stat-card:nth-child(2) .stat-icon{
    color:var(--pink);
}

@media(max-width:680px){
    .stats-grid.stats-grid-two{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   SYLLABLES IDENTITY — CLASSROOM-ALIGNED DARK MODE
   Light mode remains unchanged.
   ========================================================= */

html[data-theme="dark"]{
    --page:#1a181f;
    --panel:#28252f;
    --panel-soft:#211f27;
    --line:#403b49;
    --text:#c9c4cf;
    --heading:#f4f1f6;
    --muted:#9b94a4;
    --topbar:#292630;
    --footer:#26232c;
    --purple:#956ccf;
    --purple-deep:#8258bd;
    --purple-soft:#382d49;
    --sidebar:#202124;
    --sidebar-2:#202124;
    --shadow:none;
}

html[data-theme="dark"] body{background:#1a181f}

html[data-theme="dark"] body:before{
    background:
        radial-gradient(circle at 80% 22%,rgba(145,96,199,.035),transparent 28%),
        repeating-linear-gradient(77deg,transparent 0 86px,rgba(255,255,255,.008) 88px 89px,transparent 91px 170px);
}

/* Sidebar */
html[data-theme="dark"] .sidebar{
    background:#202124;
    border-right:1px solid #2d2e32;
    color:#bdb9c3;
}
html[data-theme="dark"] .brand{
    background:#202124;
    border-bottom:1px solid #303136;
    color:#fff;
}
html[data-theme="dark"] .brand-symbol{border-color:#55525b;color:#55bfff}
html[data-theme="dark"] .sidebar-profile{
    background:
        linear-gradient(rgba(18,19,21,.38),rgba(18,19,21,.52)),
        radial-gradient(circle at 60% 30%,rgba(126,92,167,.14),transparent 32%);
    border-bottom-color:#303136;
}
html[data-theme="dark"] .profile-orbit{opacity:.18}
html[data-theme="dark"] .presence-dot{border-color:#202124}
html[data-theme="dark"] .sidebar-module-label{color:#aaa2b8;border-bottom-color:#303136}
html[data-theme="dark"] .nav a{color:#aaa7ae}
html[data-theme="dark"] .nav a i{color:#9a7bc0}
html[data-theme="dark"] .nav a:hover{background:#292a2d;color:#fff}
html[data-theme="dark"] .nav a.active{
    background:#303134;
    border-left-color:#956ccf;
    color:#fff;
}
html[data-theme="dark"] .nav a.active i{color:#9d78ce}
html[data-theme="dark"] .nav a.active:after{background:#25c8bc}
html[data-theme="dark"] .sidebar-footer{border-top-color:#303136}

/* Top bar */
html[data-theme="dark"] .topbar{
    background:#292630;
    border-top-color:#191a1d;
    border-bottom-color:#403b49;
}
html[data-theme="dark"] .menu-button{
    background:#211f27;
    border-color:#625b6c;
    color:#aaa5af;
}
html[data-theme="dark"] .menu-button:hover{border-color:#956ccf;color:#fff}
html[data-theme="dark"] .top-icon{color:#aaa3b1}
html[data-theme="dark"] .top-icon:hover{color:#a978df}
html[data-theme="dark"] .top-profile{background:#393440;border-color:#3c3941}

/* Breadcrumbs / headings */
html[data-theme="dark"] .breadcrumbs{color:#b3adb8}
html[data-theme="dark"] .breadcrumbs span:first-child{color:#ad82e1}
html[data-theme="dark"] .page-heading h1{color:#f5f2f7}
html[data-theme="dark"] .page-heading p{color:#aaa4b0}

/* Hero */
html[data-theme="dark"] .hero-card{
    background:linear-gradient(110deg,#493c62,#5b4778 56%,#6d4d8e);
    border:1px solid #51475e;
    box-shadow:none;
}
html[data-theme="dark"] .hero-kicker{background:#765596}
html[data-theme="dark"] .identity-number{color:#ece7f2}

/* Metric cards */
html[data-theme="dark"] .stat-card{
    background:#292630;
    border-color:#423d4b;
    box-shadow:none;
}
html[data-theme="dark"] .stat-card span,
html[data-theme="dark"] .stat-card small{color:#aaa3b1}
html[data-theme="dark"] .stat-card strong{color:#f4f1f6}
html[data-theme="dark"] .stat-icon{
    width:48px;height:48px;border-radius:50%;
    background:#343142;color:#a778dc;
}
html[data-theme="dark"] .stats-grid-two .stat-card:nth-child(2) .stat-icon{
    background:#463427;color:#e6a13e;
}

/* Panels */
html[data-theme="dark"] .panel{
    background:#292630;
    border-color:#423d4b;
    box-shadow:none;
}
html[data-theme="dark"] .panel>header{border-bottom-color:#423d4b}
html[data-theme="dark"] .panel header h3{color:#f3f0f5}
html[data-theme="dark"] .panel header p,
html[data-theme="dark"] .foundation-list small,
html[data-theme="dark"] .snapshot dt{color:#aaa3b1}
html[data-theme="dark"] .foundation-list>div,
html[data-theme="dark"] .snapshot>div{border-bottom-color:#3b3743}
html[data-theme="dark"] .foundation-list strong,
html[data-theme="dark"] .snapshot dd{color:#eeeaf1}
html[data-theme="dark"] .foundation-list .done{background:#3b2f4d;color:#b98ce7}
html[data-theme="dark"] .foundation-list .next{background:#253d3e;color:#4fd2c7}
html[data-theme="dark"] .status-badge{background:#244645;color:#63ddd1}

/* Buttons */
html[data-theme="dark"] .outline-btn,
html[data-theme="dark"] .soft-btn{
    background:#242129;
    border-color:#62556e;
    color:#b68bdd;
}
html[data-theme="dark"] .outline-btn:hover,
html[data-theme="dark"] .soft-btn:hover{
    background:#302a38;border-color:#956ccf;color:#fff;
}
html[data-theme="dark"] .primary-btn{background:#956ccf;color:#fff}
html[data-theme="dark"] .primary-btn:hover{background:#a477dd}

/* Profile / forms */
html[data-theme="dark"] .profile-avatar-large{
    background:linear-gradient(135deg,#41334f,#71528e);
    border-color:#292630;
    box-shadow:0 0 0 1px #484250;
}
html[data-theme="dark"] .institution-chip{
    background:#211f27;border-color:#403b49;color:#c8c1cd;
}
html[data-theme="dark"] .form-grid label{color:#eeeaf1}
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid textarea{
    background:#211f27;border-color:#4b4554;color:#eeeaf1;
}
html[data-theme="dark"] .form-grid input::placeholder,
html[data-theme="dark"] .form-grid textarea::placeholder{color:#77717f}
html[data-theme="dark"] .form-grid input:focus,
html[data-theme="dark"] .form-grid textarea:focus{
    border-color:#8f68c4;
    box-shadow:0 0 0 2px rgba(143,104,196,.12);
}
html[data-theme="dark"] .success-banner{background:#233b38;color:#62d4c8}
html[data-theme="dark"] .error-banner{background:#43272f;color:#ff7897}

/* Footer */
html[data-theme="dark"] .footer{
    background:#26232c;border-top-color:#3b3743;color:#aaa4b0;
}
html[data-theme="dark"] .footer strong{color:#e5e0e8}
html[data-theme="dark"] .footer a:hover{color:#ae80dd}

/* Theme button */
html[data-theme="dark"] .floating-theme{
    width:55px;height:55px;right:25px;bottom:76px;
    background:#292630;color:#e0a92f;
    border:2px solid #5b456f;
    box-shadow:0 0 0 5px rgba(93,65,116,.22),0 8px 24px rgba(0,0,0,.28);
}
html[data-theme="dark"] .floating-theme:hover{
    border-color:#8c63bd;background:#302c38;
}

/* Login continuity */
html[data-theme="dark"] .login-page{background:#1a181f}
html[data-theme="dark"] .login-form-side{background:#1a181f}
html[data-theme="dark"] .login-card{
    background:#292630;border-color:#423d4b;color:#d7d1db;box-shadow:none;
}
html[data-theme="dark"] .login-card h2,
html[data-theme="dark"] .login-card>label{color:#f1edf3}
html[data-theme="dark"] .login-card .muted,
html[data-theme="dark"] .login-note{color:#9f98a7}
html[data-theme="dark"] .input-wrap{
    background:#211f27;border-color:#4b4554;color:#8f8998;
}
html[data-theme="dark"] .input-wrap input{color:#eeeaf1}
html[data-theme="dark"] .input-wrap input::placeholder{color:#77717f}
html[data-theme="dark"] .login-note{border-top-color:#403b49}

@media(max-width:820px){
    html[data-theme="dark"] .sidebar{box-shadow:12px 0 34px rgba(0,0,0,.35)}
}


/* =========================================================
   PREMIUM SYLLABLES ID HERO
   Replaces the earlier empty banner treatment.
   ========================================================= */
.identity-hero{
    position:relative;
    min-height:250px;
    margin-bottom:22px;
    padding:30px 34px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:42px;
    border-radius:7px;
    color:#fff;
    background:
        radial-gradient(circle at 83% 12%,rgba(255,255,255,.10),transparent 20%),
        linear-gradient(112deg,#5c4e8d 0%,#7058a7 46%,#9565d2 100%);
    box-shadow:0 12px 30px rgba(86,62,132,.12);
}

.identity-hero:before{
    content:"";
    position:absolute;
    width:570px;
    height:570px;
    right:-115px;
    top:-245px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:50%;
    box-shadow:
        0 0 0 68px rgba(255,255,255,.028),
        0 0 0 138px rgba(255,255,255,.018);
}

.identity-hero:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 35%,rgba(255,255,255,.03));
}

.identity-hero-copy{
    position:relative;
    z-index:2;
    min-width:0;
    flex:1 1 auto;
}

.identity-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border-radius:5px;
    background:rgba(210,177,255,.33);
    border:1px solid rgba(255,255,255,.13);
    font-size:10px;
    font-weight:700;
    letter-spacing:.02em;
}

.identity-hero-copy h2{
    margin:20px 0 12px;
    font-size:38px;
    line-height:1.05;
    font-weight:500;
    letter-spacing:-.035em;
    color:#fff;
}

.identity-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    color:rgba(255,255,255,.84);
    font-size:11px;
}

.identity-meta span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.identity-meta i{opacity:.82}

.identity-hero-actions{
    margin-top:27px;
    display:flex;
    align-items:center;
    gap:13px;
    flex-wrap:wrap;
}

.identity-code{
    min-width:180px;
    padding:10px 13px;
    border-left:3px solid rgba(255,255,255,.78);
    background:rgba(28,19,62,.17);
    border-radius:0 5px 5px 0;
}

.identity-code small,
.digital-id-card small{
    display:block;
    font-size:8px;
    letter-spacing:.11em;
    color:rgba(255,255,255,.59);
}

.identity-code strong{
    display:block;
    margin-top:4px;
    font-size:13px;
    letter-spacing:.06em;
    font-weight:600;
}

.identity-profile-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:0 14px;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.34);
    border-radius:5px;
    background:rgba(255,255,255,.08);
    font-size:10px;
    font-weight:600;
    transition:.18s ease;
}

.identity-profile-link i:last-child{
    margin-left:3px;
    font-size:8px;
}

.identity-profile-link:hover{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.54);
}

/* Digital identity card */
.digital-id-card{
    position:relative;
    z-index:3;
    flex:0 0 390px;
    width:390px;
    min-height:186px;
    padding:19px 20px 17px;
    border-radius:10px;
    background:
        linear-gradient(140deg,rgba(28,23,51,.58),rgba(56,40,84,.42)),
        rgba(255,255,255,.075);
    border:1px solid rgba(255,255,255,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 18px 42px rgba(36,23,68,.18);
    backdrop-filter:blur(7px);
}

.digital-id-card:after{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:7px;
    pointer-events:none;
}

.digital-id-head,
.digital-id-person,
.digital-id-footer{
    position:relative;
    z-index:2;
}

.digital-id-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.digital-id-brand{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:700;
    letter-spacing:-.01em;
}

.digital-id-head small{margin-top:4px}

.verified-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 7px;
    border-radius:12px;
    background:rgba(27,197,165,.14);
    color:#6ee0cc;
    border:1px solid rgba(97,221,197,.18);
    font-size:8px;
    font-weight:700;
}

.digital-id-person{
    display:flex;
    align-items:center;
    gap:13px;
    margin:23px 0 18px;
}

.digital-id-avatar{
    width:57px;
    height:57px;
    flex:0 0 57px;
    display:grid;
    place-items:center;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(135deg,#a47bd8,#6c4e9b);
    border:2px solid rgba(255,255,255,.72);
    box-shadow:0 0 0 4px rgba(255,255,255,.06);
    font-size:17px;
    font-weight:700;
}

.digital-id-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.digital-id-person-copy{
    min-width:0;
}

.digital-id-person-copy strong{
    display:block;
    margin:4px 0;
    max-width:225px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:14px;
    font-weight:600;
}

.digital-id-person-copy span{
    display:block;
    max-width:225px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:rgba(255,255,255,.69);
    font-size:9px;
}

.digital-id-footer{
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
}

.digital-id-footer>div:first-child{
    min-width:0;
}

.digital-id-footer strong{
    display:block;
    margin-top:4px;
    max-width:285px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:10px;
    font-weight:500;
}

.digital-id-mark{
    width:31px;
    height:31px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.16);
}

.identity-hero-decoration{
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
}

.identity-hero-decoration span{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255,255,255,.66);
}

.identity-hero-decoration span:nth-child(1){right:14%;top:23%}
.identity-hero-decoration span:nth-child(2){right:7%;top:37%;width:4px;height:4px;opacity:.65}
.identity-hero-decoration span:nth-child(3){right:27%;bottom:17%;width:3px;height:3px;opacity:.48}

/* Dark mode: same structure, deeper Classroom-style surfaces */
html[data-theme="dark"] .identity-hero{
    background:
        radial-gradient(circle at 83% 12%,rgba(164,112,213,.09),transparent 20%),
        linear-gradient(112deg,#35303f 0%,#463751 48%,#624577 100%);
    border:1px solid #4b4354;
    box-shadow:none;
}

html[data-theme="dark"] .identity-eyebrow{
    background:rgba(149,108,207,.23);
    border-color:rgba(181,141,224,.16);
}

html[data-theme="dark"] .digital-id-card{
    background:
        linear-gradient(140deg,rgba(20,19,24,.76),rgba(40,32,48,.67));
    border-color:#5b4b67;
    box-shadow:0 16px 34px rgba(0,0,0,.20);
}

html[data-theme="dark"] .identity-code{
    background:rgba(18,17,21,.26);
}

html[data-theme="dark"] .identity-profile-link{
    background:rgba(25,23,29,.22);
    border-color:rgba(200,175,225,.26);
}

/* Old hero is no longer used */
.hero-card{display:none!important}

/* Responsive */
@media(max-width:1080px){
    .identity-hero{
        align-items:stretch;
    }
    .digital-id-card{
        flex-basis:340px;
        width:340px;
    }
    .identity-hero-copy h2{font-size:32px}
}

@media(max-width:900px){
    .identity-hero{
        min-height:0;
        flex-direction:column;
        padding:27px;
        gap:25px;
    }
    .digital-id-card{
        width:100%;
        flex-basis:auto;
        max-width:520px;
    }
}

@media(max-width:560px){
    .identity-hero{padding:23px 20px}
    .identity-hero-copy h2{font-size:27px}
    .identity-meta{flex-direction:column;gap:8px}
    .identity-hero-actions{align-items:stretch}
    .identity-code{width:100%}
    .identity-profile-link{justify-content:center;width:100%}
    .digital-id-card{padding:17px}
}


/* =========================================================
   IDENTITY v0.2 — USER MANAGEMENT
   ========================================================= */
.heading-actions{display:flex;gap:10px;align-items:center}
.primary-link-btn{display:inline-flex;align-items:center;gap:8px;background:#8f69c6;color:#fff;border-radius:4px;padding:11px 15px;text-decoration:none;font-size:11px;font-weight:600}
.user-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:20px}
.user-summary-grid article{min-height:88px;background:var(--panel);border:1px solid var(--line);border-radius:5px;display:flex;align-items:center;gap:14px;padding:16px 20px}
.user-summary-grid article>i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 12%,var(--panel));color:var(--purple);font-size:17px}
.user-summary-grid small,.user-summary-grid strong{display:block}.user-summary-grid small{font-size:8px;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.user-summary-grid strong{font-size:17px;color:var(--heading);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:310px}
.users-panel{margin-bottom:20px}.users-panel>header{gap:20px}
.table-search{height:36px;min-width:230px;border:1px solid var(--line);background:var(--panel-soft);border-radius:4px;display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--muted)}
.table-search input{border:0;outline:0;background:transparent;color:var(--text);width:100%;font-size:10px}
.responsive-table{overflow:auto}.identity-table{width:100%;border-collapse:collapse;min-width:850px}.identity-table th{font-size:8px;letter-spacing:.06em;color:var(--muted);text-align:left;font-weight:600;background:var(--panel-soft);padding:11px 14px;border-bottom:1px solid var(--line)}.identity-table td{padding:13px 14px;border-bottom:1px solid var(--line);font-size:10px;color:var(--text)}.identity-table tbody tr:last-child td{border-bottom:0}.identity-table tbody tr:hover{background:color-mix(in srgb,var(--purple) 3%,var(--panel))}
.table-user{display:flex;align-items:center;gap:10px}.table-user img,.table-user>span{width:38px;height:38px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:linear-gradient(135deg,#695496,#a171d0);color:#fff;font-weight:700;flex:0 0 38px}.table-user strong,.table-user small{display:block}.table-user strong{font-size:10px;color:var(--heading);margin-bottom:3px}.table-user small,.table-sub{font-size:8px;color:var(--muted);display:block}
.status-pill{display:inline-flex;align-items:center;padding:5px 8px;border-radius:12px;font-size:8px;font-weight:700;background:#eee;color:#777}.status-active{background:rgba(19,184,145,.12);color:#13a985}.status-pending{background:rgba(230,164,56,.13);color:#d1932c}.status-suspended,.status-inactive,.status-expired,.status-archived{background:rgba(217,73,102,.12);color:#cf4761}
.table-action{text-align:right}.table-action a{color:var(--purple);text-decoration:none;font-weight:600}.table-action i{font-size:8px;margin-left:5px}.empty-table{text-align:center!important;color:var(--muted)!important;padding:28px!important}
.shared-list{padding:3px 17px 14px}.shared-row{min-height:70px;display:grid;grid-template-columns:auto minmax(220px,1fr) 160px 130px auto;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding:11px 0}.shared-row:last-child{border-bottom:0}.shared-icon{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 12%,var(--panel));color:var(--purple)}.shared-main strong,.shared-main small,.shared-meta small,.shared-meta span{display:block}.shared-main strong{font-size:10px;color:var(--heading)}.shared-main small{font-size:8px;color:var(--muted);margin-top:4px}.shared-meta small{font-size:7px;letter-spacing:.07em;color:var(--muted);margin-bottom:4px}.shared-meta span{font-size:9px;color:var(--text)}.empty-shared{padding:30px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--muted)}.empty-shared i{font-size:25px;color:var(--purple);margin-bottom:10px}.empty-shared strong{color:var(--heading);font-size:11px}.empty-shared span{font-size:9px;margin-top:5px;max-width:450px}

.create-user-form{overflow:hidden}.form-section{padding:0 22px 24px;border-bottom:1px solid var(--line)}.form-section>header{display:flex;align-items:center;gap:12px;padding:21px 0 17px}.form-section>header h3{font-size:12px;color:var(--heading);margin:0 0 4px}.form-section>header p{font-size:9px;color:var(--muted);margin:0}.section-number{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--purple) 12%,var(--panel));color:var(--purple);font-size:8px;font-weight:700}
.create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.create-grid label,.create-fields label{font-size:10px;color:var(--heading);font-weight:600}.create-grid input,.create-grid select,.create-fields input,.create-fields select{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel-soft);color:var(--text);outline:0}.create-grid small,.create-fields small{display:block;font-size:8px;color:var(--muted);font-weight:400;margin-top:5px}
.avatar-create-grid{grid-template-columns:210px 1fr}.avatar-upload-box{border:1px dashed color-mix(in srgb,var(--purple) 45%,var(--line));border-radius:6px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:18px;cursor:pointer;text-align:center;background:color-mix(in srgb,var(--purple) 3%,var(--panel));min-height:230px}.avatar-upload-box input{display:none}.avatar-upload-preview{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#66518f,#9970c8);color:#fff;font-size:27px;overflow:hidden;margin-bottom:13px}.avatar-upload-preview img{width:100%;height:100%;object-fit:cover}.avatar-upload-box strong{font-size:11px}.avatar-upload-box small{font-size:8px;color:var(--muted);margin:5px 0 11px}.avatar-upload-box b{font-size:9px;color:var(--purple);font-weight:600}.create-fields{display:grid;gap:15px;align-content:center}.create-form-actions{display:flex;justify-content:flex-end;gap:10px;padding:20px 22px}
.student-only-section[hidden]{display:none!important}

.shared-warning{display:flex;gap:13px;align-items:center;margin-bottom:15px;padding:14px 16px;border:1px solid color-mix(in srgb,#e5a13c 28%,var(--line));background:color-mix(in srgb,#e5a13c 6%,var(--panel));border-radius:5px}.shared-warning>i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(229,161,60,.13);color:#d7952f}.shared-warning strong,.shared-warning span{display:block}.shared-warning strong{font-size:10px;color:var(--heading)}.shared-warning span{font-size:9px;color:var(--muted);margin-top:3px}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.permission-card{display:flex!important;align-items:flex-start;gap:11px;border:1px solid var(--line);border-radius:5px;padding:14px;cursor:pointer;background:var(--panel-soft)}.permission-card input{display:none}.permission-check{width:23px;height:23px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;color:transparent;flex:0 0 23px}.permission-card input:checked+.permission-check{background:var(--purple);border-color:var(--purple);color:#fff}.permission-card strong,.permission-card small{display:block}.permission-card strong{font-size:10px;color:var(--heading)}.permission-card small{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.45}

.managed-user-layout{display:grid;grid-template-columns:300px 1fr;gap:20px}.managed-user-card{padding:27px 21px;text-align:center;height:max-content}.managed-avatar{width:112px;height:112px;margin:0 auto 15px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#66518f,#9b72cf);color:#fff;font-size:29px;font-weight:700;border:4px solid var(--panel);box-shadow:0 0 0 1px var(--line)}.managed-avatar img{width:100%;height:100%;object-fit:cover}.managed-user-card h2{font-size:16px;color:var(--heading);font-weight:500;margin:0 0 5px}.managed-user-card>p{font-size:9px;color:var(--muted);margin:0 0 13px}.avatar-change-form{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.avatar-change-form label{display:block;font-size:9px;color:var(--purple);cursor:pointer}.avatar-change-form input{display:block;width:100%;font-size:8px;margin-top:9px;color:var(--muted)}.avatar-change-form button,.avatar-save-btn{width:100%;margin-top:10px;border:0;border-radius:4px;background:var(--purple);color:#fff;padding:9px;font-size:9px;font-weight:600}.managed-data{overflow:hidden}.managed-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:8px 20px 20px}.managed-details>div{padding:15px 0;border-bottom:1px solid var(--line)}.managed-details dt{font-size:8px;color:var(--muted);margin-bottom:5px}.managed-details dd{font-size:10px;color:var(--heading);margin:0}
.profile-avatar-form{margin-top:13px}.avatar-select{display:flex!important;justify-content:center;cursor:pointer}.avatar-select input{display:none}

/* Shared login destination */
.shared-access-page{background:#1a181f;color:#eee}.shared-access-shell{min-height:100vh}.shared-access-top{height:72px;background:#232127;border-bottom:1px solid #3b3742;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.shared-brand{display:flex;align-items:center;gap:10px}.shared-brand>i{color:#9a70d1;font-size:20px}.shared-brand strong,.shared-brand small{display:block}.shared-brand strong{font-size:14px}.shared-brand small{font-size:8px;color:#9e98a5;margin-top:2px}.shared-access-top>a{font-size:10px;text-decoration:none;color:#aaa4b1}.shared-access-main{max-width:1150px;margin:0 auto;padding:48px 28px}.shared-access-hero{background:linear-gradient(110deg,#383143,#5a416f);border:1px solid #52455d;border-radius:7px;padding:32px;margin-bottom:20px}.limited-badge{display:inline-flex;gap:6px;background:#60477a;color:#d9b8fa;padding:6px 8px;border-radius:4px;font-size:8px;font-weight:700}.shared-access-hero h1{font-size:31px;font-weight:500;margin:17px 0 6px}.shared-access-hero>p{font-size:10px;color:#bfb7c8}.shared-access-notice{margin-top:22px;padding:12px 14px;border-radius:5px;background:rgba(18,17,21,.25);font-size:9px;color:#c6bdcc}.shared-access-notice i{margin-right:8px;color:#dbad55}.shared-permission-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.shared-permission-grid article{background:#292630;border:1px solid #423d4b;border-radius:6px;padding:20px}.shared-permission-grid article>div{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#392f46;color:#a77bd6;margin-bottom:14px}.shared-permission-grid strong,.shared-permission-grid small{display:block}.shared-permission-grid strong{font-size:11px}.shared-permission-grid small{font-size:8px;color:#9992a2;margin-top:5px}.individual-required-card{margin-top:20px;background:#242129;border:1px solid #423d4b;border-radius:6px;padding:18px;display:flex;gap:13px;align-items:center}.individual-required-card>i{font-size:24px;color:#956ccf}.individual-required-card strong,.individual-required-card span{display:block}.individual-required-card strong{font-size:10px}.individual-required-card span{font-size:8px;color:#9c95a3;margin-top:4px}

html[data-theme="dark"] .user-summary-grid article,
html[data-theme="dark"] .avatar-upload-box,
html[data-theme="dark"] .permission-card{box-shadow:none}
html[data-theme="dark"] .identity-table th{background:#211f27}
html[data-theme="dark"] .identity-table tbody tr:hover{background:#2d2933}
html[data-theme="dark"] .table-search{background:#211f27}
html[data-theme="dark"] .section-number,
html[data-theme="dark"] .shared-icon,
html[data-theme="dark"] .user-summary-grid article>i{background:#372e44}
html[data-theme="dark"] .shared-warning{background:#302a24}
html[data-theme="dark"] .primary-link-btn{background:#956ccf}

@media(max-width:950px){
    .shared-row{grid-template-columns:auto 1fr auto}.shared-meta{display:none}
    .avatar-create-grid{grid-template-columns:1fr}.avatar-upload-box{min-height:200px}
    .managed-user-layout{grid-template-columns:1fr}.managed-user-card{display:block}
}
@media(max-width:720px){
    .heading-actions{width:100%;flex-direction:column;align-items:stretch}.heading-actions a{justify-content:center}
    .user-summary-grid{grid-template-columns:1fr}
    .create-grid,.permission-grid,.managed-details{grid-template-columns:1fr}
    .shared-permission-grid{grid-template-columns:1fr}
}


/* =========================================================
   AVATAR CROPPER
   ========================================================= */
.avatar-crop-open{overflow:hidden}

.avatar-crop-modal{
    position:fixed;
    inset:0;
    z-index:250;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.avatar-crop-modal.open{display:flex}

.avatar-crop-backdrop{
    position:absolute;
    inset:0;
    background:rgba(19,16,25,.72);
    backdrop-filter:blur(5px);
}

.avatar-crop-dialog{
    position:relative;
    z-index:2;
    width:min(560px,100%);
    max-height:calc(100vh - 48px);
    overflow:auto;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    box-shadow:0 30px 80px rgba(28,19,47,.22);
}

.avatar-crop-header{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px 17px;
    border-bottom:1px solid var(--line);
}

.avatar-crop-kicker{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--purple);
    font-size:8px;
    font-weight:700;
    letter-spacing:.09em;
}

.avatar-crop-header h3{
    margin:6px 0 4px;
    color:var(--heading);
    font-size:17px;
    font-weight:600;
}

.avatar-crop-header p{
    margin:0;
    color:var(--muted);
    font-size:9px;
}

.avatar-crop-close{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--panel-soft);
    color:var(--muted);
}

.avatar-crop-workspace{padding:22px}

.avatar-crop-stage{
    position:relative;
    width:min(420px,100%);
    aspect-ratio:1;
    margin:0 auto;
    overflow:hidden;
    border-radius:8px;
    background:#161419;
    cursor:grab;
    user-select:none;
    touch-action:none;
}

.avatar-crop-stage.dragging{cursor:grabbing}

.avatar-crop-stage canvas{
    width:100%;
    height:100%;
    display:block;
}

.avatar-crop-mask{
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:8px;
    box-shadow:inset 0 0 0 999px rgba(8,7,10,.46);
}

.avatar-crop-guide{
    position:absolute;
    inset:7.5%;
    pointer-events:none;
    border:3px solid rgba(255,255,255,.92);
    border-radius:50%;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.18),
        0 0 28px rgba(0,0,0,.18);
}

.avatar-crop-controls{
    width:min(420px,100%);
    margin:18px auto 0;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:11px;
}

.avatar-crop-controls input{
    flex:1;
    accent-color:var(--purple);
}

.avatar-crop-tip{
    width:min(420px,100%);
    margin:11px auto 0;
    padding:10px 12px;
    border-radius:5px;
    background:var(--panel-soft);
    color:var(--muted);
    font-size:8px;
    text-align:center;
}

.avatar-crop-tip i{
    margin-right:6px;
    color:var(--purple);
}

.avatar-crop-actions{
    padding:16px 22px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:flex-end;
    gap:9px;
}

.avatar-save-btn:disabled{
    opacity:.48;
    cursor:not-allowed;
}

html[data-theme="dark"] .avatar-crop-backdrop{
    background:rgba(7,7,9,.78);
}

html[data-theme="dark"] .avatar-crop-dialog{
    background:#292630;
    border-color:#47414f;
    box-shadow:0 30px 80px rgba(0,0,0,.38);
}

html[data-theme="dark"] .avatar-crop-close,
html[data-theme="dark"] .avatar-crop-tip{
    background:#211f27;
}

@media(max-width:580px){
    .avatar-crop-modal{padding:12px}
    .avatar-crop-header{padding:17px}
    .avatar-crop-workspace{padding:17px}
    .avatar-crop-actions{padding:14px 17px}
}


/* ========================================================================
   IDENTITY SIDEBAR PROFILE HERO
   Adopt the orbital profile atmosphere used by Syllables Events, while
   preserving Identity's own sidebar structure and typography.
   ======================================================================== */
.sidebar-profile{
    isolation:isolate;
    background:
        radial-gradient(circle at 19% 48%,rgba(255,255,255,.15),transparent 23%),
        linear-gradient(135deg,#655c9a 0%,#5a528e 52%,#494472 100%);
}

.sidebar-profile-scene{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}

.sidebar-profile-scene .profile-glow{
    position:absolute;
    left:18px;
    top:50%;
    width:118px;
    height:118px;
    transform:translateY(-50%);
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(255,255,255,.22) 0%,
        rgba(190,166,239,.13) 33%,
        rgba(126,95,190,.055) 56%,
        transparent 74%
    );
    filter:blur(1px);
}

.sidebar-profile-scene .profile-arc{
    position:absolute;
    border:1px solid rgba(238,227,255,.30);
    border-radius:50%;
    transform:rotate(-14deg);
    box-shadow:
        inset 0 0 20px rgba(255,255,255,.018),
        0 0 12px rgba(217,198,255,.035);
}

.sidebar-profile-scene .arc-one{
    width:330px;
    height:104px;
    left:112px;
    top:21px;
}

.sidebar-profile-scene .arc-two{
    width:225px;
    height:65px;
    left:181px;
    top:50px;
    border-color:rgba(238,227,255,.22);
}

.sidebar-profile-scene .profile-star{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 8px rgba(255,255,255,.78);
}

.sidebar-profile-scene .star-one{
    right:42px;
    top:34px;
}

.sidebar-profile-scene .star-two{
    right:108px;
    top:73px;
    width:3px;
    height:3px;
    opacity:.78;
}

.sidebar-profile-scene .star-three{
    right:26px;
    bottom:31px;
    width:5px;
    height:5px;
    opacity:.9;
}

.sidebar-avatar-wrap,
.sidebar-profile-copy{
    position:relative;
    z-index:3;
}

/* Give the avatar the same polished halo language as Events. */
.sidebar-avatar-wrap{
    filter:drop-shadow(0 8px 17px rgba(31,22,54,.18));
}

.sidebar-avatar{
    box-shadow:
        0 0 0 6px rgba(255,255,255,.07),
        0 0 27px rgba(230,216,255,.23);
}

/* Dark mode keeps the same composition, only deepens the atmosphere. */
html[data-theme="dark"] .sidebar-profile{
    background:
        radial-gradient(circle at 19% 48%,rgba(174,143,229,.11),transparent 24%),
        linear-gradient(135deg,#19191d 0%,#202026 54%,#26232d 100%);
}

html[data-theme="dark"] .sidebar-profile-scene .profile-glow{
    background:radial-gradient(
        circle,
        rgba(187,156,239,.16) 0%,
        rgba(123,93,178,.085) 36%,
        rgba(70,55,103,.03) 59%,
        transparent 75%
    );
}

html[data-theme="dark"] .sidebar-profile-scene .profile-arc{
    border-color:rgba(215,200,239,.22);
    box-shadow:none;
}

html[data-theme="dark"] .sidebar-profile-scene .arc-two{
    border-color:rgba(215,200,239,.15);
}

html[data-theme="dark"] .sidebar-profile-scene .profile-star{
    background:#f7f2ff;
    box-shadow:0 0 8px rgba(237,220,255,.62);
}

html[data-theme="dark"] .sidebar-avatar{
    box-shadow:
        0 0 0 6px rgba(255,255,255,.045),
        0 0 25px rgba(168,132,221,.14);
}

/* Keep the effect elegant on narrow/off-canvas layouts. */
@media(max-width:820px){
    .sidebar-profile-scene .arc-one{
        left:92px;
    }
    .sidebar-profile-scene .arc-two{
        left:158px;
    }
}