@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');
:root {
    color-scheme: light;
    --sidebar-width: 256px;
    --header-height: 80px;
    --content-gap: 32px;
    --radius: 12px;
    --font: 'DM Sans', sans-serif;
    --display: 'Manrope', sans-serif;
    --ink: #173b36;
    --muted: #64786e;
    --teal: #147d70;
    --bg: #f6f8f4;
    --surface: #ffffff;
    --surface-chrome: #fcfdf9;
    --surface-subtle: #f4f7f1;
    --surface-tint: #edf3e7;
    --surface-hover: #eaf1e5;
    --surface-disabled: #edf0eb;
    --surface-glass: #fcfdfaf2;
    --line: #dce5da;
    --border-soft: #e8ede3;
    --accent-line: #aec8b9;
    --nav-active: #e4efdf;
    --nav-active-ink: #24684f;
    --primary-bg: #147d70;
    --primary-hover: #0d695e;
    --primary-ink: #ffffff;
    --success-bg: #eaf3e3;
    --success-ink: #4d753e;
    --purple-bg: #f0ecf9;
    --purple-ink: #79599a;
    --blue-bg: #e8f2f7;
    --blue-ink: #497993;
    --warning-bg: #fff1df;
    --warning-ink: #926a34;
    --error-bg: #fff0e9;
    --error-ink: #a04735;
    --error-line: #edc6b9;
    --focus: #80bca7;
    --login-story: #e6efdf;
    --shadow: 0 8px 30px #193b3412;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e2eee6;
    --muted: #a3b7ac;
    --teal: #83cdb2;
    --bg: #101a19;
    --surface: #182623;
    --surface-chrome: #14211e;
    --surface-subtle: #1b2c26;
    --surface-tint: #22372d;
    --surface-hover: #2a4035;
    --surface-disabled: #23322b;
    --surface-glass: #182623f2;
    --line: #33483c;
    --border-soft: #2b3d33;
    --accent-line: #577e68;
    --nav-active: #2a4536;
    --nav-active-ink: #b8e1b7;
    --primary-bg: #83cdb2;
    --primary-hover: #a4ddc7;
    --primary-ink: #0e3025;
    --success-bg: #2a3f2c;
    --success-ink: #b6d39b;
    --purple-bg: #332d44;
    --purple-ink: #c8b4e7;
    --blue-bg: #233b46;
    --blue-ink: #a6cfdf;
    --warning-bg: #423722;
    --warning-ink: #e5c28c;
    --error-bg: #452d28;
    --error-ink: #f0b3a1;
    --error-line: #795344;
    --focus: #a2d6bb;
    --login-story: #1d3329;
    --shadow: 0 8px 30px #00000025;
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scrollbar-gutter:stable;
    scrollbar-color:var(--accent-line) var(--bg)
}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:14px/1.6 var(--font)
}
html[lang=ar] {
    --font:'Noto Sans Arabic',sans-serif;
    --display:'Noto Sans Arabic',sans-serif
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    font-family:var(--display);
    line-height:1.25;
    letter-spacing:-.035em
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea,select {
    font:inherit;
    color:inherit
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
button:disabled {
    cursor:wait;
    opacity:.7
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:3px
}
[hidden] {
    display:none!important
}
.icon {
    width:20px;
    height:20px;
    vertical-align:middle;
    flex-shrink:0
}
.icon-arrow {
    width:16px;
    height:16px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font:800 24px/1 var(--display);
    letter-spacing:-1px;
    direction:ltr;
    width:max-content
}
.brand small {
    display:block;
    font:500 8px/1.5 var(--font);
    letter-spacing:3.6px;
    margin-top:5px
}
.brand-mark {
    display:grid;
    place-items:center;
    background:var(--primary-bg);
    color:var(--primary-ink);
    border-radius:12px;
    width:42px;
    height:45px;
    font-size:33px;
    transform:rotate(-5deg)
}
.app-shell {
    min-height:100dvh
}
.workspace {
    min-width:0;
    min-height:100dvh;
    margin-inline-start:var(--sidebar-width)
}
.sidebar {
    position:fixed;
    z-index:120;
    inset-block:0;
    inset-inline-start:0;
    width:var(--sidebar-width);
    height:100dvh;
    background:var(--surface-chrome);
    border-inline-end:1px solid var(--line);
    display:flex;
    flex-direction:column;
    padding:28px 18px 20px;
    overflow:hidden
}
.sidebar-brand {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
    margin:0 10px 30px
}
.sidebar .brand {
    margin:0
}
.nav-label {
    font-size:9px;
    color:var(--muted);
    letter-spacing:1.8px;
    text-transform:uppercase;
    margin:0 14px 12px
}
.sidebar nav {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    flex:1
}
.nav-text {
    flex:1;
    min-width:0
}
.sidebar .sidebar-close {
    display:none
}
.nav-link {
    display:flex;
    gap:12px;
    align-items:center;
    border-radius:8px;
    min-height:46px;
    flex-shrink:0;
    padding:11px 12px;
    font-size:12px;
    font-weight:550;
    line-height:1.5;
    color:var(--muted);
    transition:background .15s,color .15s
}
.nav-link.active {
    background:var(--nav-active);
    color:var(--nav-active-ink);
    font-weight:550
}
.nav-link:hover {
    background:var(--surface-hover);
    color:var(--teal)
}
.nav-link .count-pill {
    margin-inline-start:auto
}
.avatar {
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#e4edd8;
    color:#6b8959;
    width:34px;
    height:34px;
    font-size:13px;
    font-weight:650;
    flex-shrink:0
}
.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:var(--header-height);
    border-bottom:1px solid var(--line);
    padding-inline:var(--content-gap);
    gap:18px;
    background:var(--surface-chrome)
}
.topbar-actions {
    display:flex;
    gap:16px;
    align-items:center;
    flex-shrink:0
}
.language {
    background:none;
    border:0;
    padding:8px 0;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:600
}
.language .icon {
    width:17px;
    height:17px
}
.icon-button {
    border:0;
    background:transparent;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:7px
}
.icon-button:hover {
    background:var(--surface-hover)
}
.main-content {
    padding:32px var(--content-gap) 26px;
    max-width:1600px;
    width:100%;
    min-width:0;
    margin-inline:auto
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:30px
}
.eyebrow {
    font-size:9px;
    color:var(--muted);
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:11px
}
.page-heading h1 {
    font-size:clamp(27px,2.5vw,36px);
    font-weight:650;
    margin-bottom:12px;
    letter-spacing:-1.2px
}
.page-heading>div>p:last-child {
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}
.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    border:1px solid transparent;
    min-height:42px;
    border-radius:8px;
    padding:11px 17px;
    font-size:11px;
    font-weight:650;
    line-height:1.4;
    transition:background .18s,transform .18s;
    text-align:center;
    white-space:nowrap
}
.btn:hover {
    transform:translateY(-1px)
}
.btn .icon {
    height:16px;
    width:16px
}
.btn-primary {
    background:var(--primary-bg);
    color:var(--primary-ink)
}
.btn-primary:hover {
    background:var(--primary-hover)
}
.btn-secondary {
    background:var(--surface);
    border-color:var(--line);
    color:var(--ink)
}
.btn-lime {
    background:#dbecb5;
    color:#375532
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:26px
}
.stat-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:21px
}
.stat-card>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    font-size:11px;
    color:var(--muted)
}
.stat-icon {
    width:35px;
    height:35px;
    border-radius:10px;
    display:inline-grid;
    place-items:center;
    flex-shrink:0
}
.stat-icon .icon {
    width:18px;
    height:18px
}
.green {
    background:var(--success-bg);
    color:var(--success-ink)
}
.purple {
    background:var(--purple-bg);
    color:var(--purple-ink)
}
.blue {
    background:var(--blue-bg);
    color:var(--blue-ink)
}
.orange {
    background:var(--warning-bg);
    color:var(--warning-ink)
}
.stat-card>strong {
    font-family:var(--display);
    display:block;
    font-weight:650;
    font-size:33px;
    line-height:1.2;
    margin:12px 0 11px
}
.stat-card p {
    font-size:10px;
    color:var(--muted)
}
.panel {
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:var(--radius);
    min-width:0;
    overflow:hidden;
    box-shadow:0 3px 5px #34532902
}
.panel-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:23px 24px 20px
}
.panel-heading h2 {
    font-size:15px;
    font-weight:650;
    letter-spacing:-.3px
}
.panel-heading p {
    font-size:10px;
    color:var(--muted);
    margin-top:7px
}
.panel-heading>a,.text-link {
    display:inline-flex;
    gap:6px;
    align-items:center;
    color:var(--teal);
    font-weight:600;
    font-size:10px
}
.panel-heading>a:hover,.text-link:hover {
    text-decoration:underline;
    text-underline-offset:4px
}
.overview-grid {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);
    gap:24px;
    margin-bottom:26px
}
.table-wrap {
    overflow-x:auto
}
table {
    border-collapse:collapse;
    width:100%;
    white-space:nowrap
}
th {
    text-align:start;
    background:var(--surface-subtle);
    border-block:1px solid var(--border-soft);
    padding:13px 24px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.6px;
    font-weight:600;
    color:var(--muted)
}
td {
    padding:17px 24px;
    border-bottom:1px solid var(--border-soft);
    font-size:11px;
    color:var(--muted)
}
tbody tr:last-child td {
    border-bottom:0
}
tbody tr:hover {
    background:var(--surface-chrome)
}
.person {
    display:flex;
    align-items:center;
    gap:11px
}
.person strong {
    display:block;
    font-size:11px;
    font-weight:600;
    color:var(--ink)
}
.person small {
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:4px
}
.badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:5px;
    padding:5px 8px;
    font-size:9px;
    line-height:1.3;
    white-space:nowrap
}
.badge:before {
    content:'';
    height:4px;
    width:4px;
    border-radius:50%;
    background:currentColor
}
.badge>.icon {
    width:13px;
    height:13px
}
.calm-empty {
    padding:40px 25px;
    text-align:center
}
.calm-icon {
    height:51px;
    width:51px;
    background:var(--surface-tint);
    color:var(--muted);
    border-radius:15px;
    display:inline-grid;
    place-items:center;
    margin-bottom:18px
}
.calm-icon>.icon {
    height:24px;
    width:24px
}
.calm-empty h3 {
    font-size:15px;
    margin-bottom:10px
}
.calm-empty p {
    font-size:11px;
    color:var(--muted)
}
.expiry-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 24px;
    border-top:1px solid var(--line)
}
.expiry-row>span:nth-child(2) {
    flex:1
}
.expiry-row strong {
    font-size:11px;
    display:block
}
.expiry-row small {
    font-size:9px;
    color:var(--muted);
    display:block;
    margin-top:6px
}
.welcome-banner {
    position:relative;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    background:#214f41;
    border-radius:14px;
    overflow:hidden;
    padding:31px 34px;
    color:#eff5e4;
    min-height:230px
}
.welcome-banner>div:first-child {
    position:relative;
    z-index:1;
    max-width:70%
}
.welcome-banner .eyebrow {
    color:#b3cd99;
    font-size:9px
}
.welcome-banner h2 {
    font-size:29px;
    font-weight:550;
    line-height:1.3;
    margin-bottom:13px
}
.welcome-banner p:not(.eyebrow) {
    font-size:11px;
    color:#b0c2a1;
    line-height:1.85;
    margin-bottom:20px;
    max-width:420px
}
.banner-art {
    position:relative;
    width:260px;
    height:220px;
    margin:-20px 0
}
.planet {
    position:absolute;
    width:112px;
    height:112px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 25%,#d5eab5,#86ad78 45%,#426e50 80%,#284f3b);
    box-shadow:0 20px 30px #092c3014;
    inset-inline-start:82px;
    top:52px
}
.orbit {
    position:absolute;
    width:250px;
    height:82px;
    border:1px solid #9cb98955;
    border-radius:50%;
    inset-inline-start:12px;
    top:70px;
    transform:rotate(-28deg)
}
.orbit-two {
    transform:rotate(40deg);
    border-style:dashed
}
.moon {
    position:absolute;
    width:22px;
    height:22px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 25%,#f7e8b9,#d5b275 60%,#a28657);
    inset-inline-start:32px;
    top:134px
}
.workspace-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-top:40px;
    padding-top:22px;
    font-size:9px;
    color:var(--muted);
    border-top:1px solid var(--line)
}
.workspace-footer>span {
    display:flex;
    align-items:center;
    gap:7px
}
.workspace-footer .icon {
    width:12px;
    height:12px
}
.count-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:17px;
    height:17px;
    padding:2px 5px;
    font-size:8px;
    background:#ca6d48;
    border-radius:5px;
    color:#fff;
    font-weight:700
}
.count-pill.muted {
    background:var(--surface-tint);
    color:var(--muted);
    margin-inline-start:5px
}
.notification-bell {
    position:relative
}
.notification-bell .count-pill {
    position:absolute;
    top:-2px;
    inset-inline-end:-4px;
    box-shadow:0 0 0 2px var(--surface-chrome)
}
.notifications-menu {
    position:relative
}
.notification-panel {
    position:absolute;
    top:48px;
    inset-inline-end:-40px;
    width:350px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 12px 40px #123f3b1c;
    z-index:100;
    overflow:hidden
}
.notification-panel .panel-heading {
    padding:18px
}
.notification-panel h2 {
    font-size:13px
}
.notification-preview-item {
    padding:15px 18px;
    border-top:1px solid var(--border-soft)
}
.notification-preview-item strong {
    font-size:11px;
    display:block
}
.notification-preview-item p {
    font-size:10px;
    color:var(--muted);
    line-height:1.7;
    margin:5px 0
}
.notification-preview-item small {
    font-size:9px;
    color:var(--muted)
}
.notification-footer {
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    background:var(--surface-tint);
    padding:13px;
    font-size:10px;
    color:var(--teal)
}
.notification-row {
    display:flex;
    gap:17px;
    align-items:flex-start;
    padding:24px;
    border-top:1px solid var(--line)
}
.notification-row.unread {
    background:var(--surface-tint);
    box-shadow:inset 3px 0 #87ad70
}
.notification-row>div {
    flex:1
}
.notification-row h2 {
    font-size:13px;
    font-weight:650;
    margin-bottom:8px
}
.notification-row p {
    font-size:12px;
    color:var(--muted);
    line-height:1.8;
    white-space:pre-line;
    overflow-wrap:anywhere
}
.notification-row small {
    font-size:9px;
    color:var(--muted);
    display:block;
    margin-top:11px
}
.read-label {
    font-size:9px;
    color:var(--muted)
}
.text-button {
    border:0;
    background:transparent;
    color:var(--teal);
    font-weight:600;
    font-size:10px;
    display:flex;
    align-items:center;
    gap:7px
}
.text-button>.icon {
    height:15px;
    width:15px
}
.empty-small {
    font-size:11px;
    padding:25px;
    color:var(--muted)
}
.empty {
    text-align:center;
    padding:38px;
    font-size:11px;
    color:var(--muted)
}
.empty-state {
    padding:55px 30px;
    text-align:center;
    grid-column:1/-1
}
.empty-state h2 {
    font-size:21px;
    margin-bottom:12px
}
.empty-state p {
    font-size:12px;
    color:var(--muted);
    max-width:490px;
    margin:0 auto 23px;
    line-height:1.9
}
.organization-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}
.org-card {
    padding:25px
}
.org-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.org-card h2 {
    font-size:18px;
    margin:25px 0 12px;
    line-height:1.4
}
.org-card p {
    font-size:12px;
    color:var(--muted)
}
.card-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid var(--line);
    padding-top:19px;
    margin-top:25px
}
.member-summary {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-bottom:25px
}
.padded {
    padding:25px
}
.padded>.stat-icon {
    margin-bottom:23px
}
.padded h2 {
    font-size:22px
}
.padded p:not(.eyebrow) {
    font-size:11px;
    color:var(--muted);
    margin-top:12px
}
.back-link {
    display:inline-flex;
    font-size:10px;
    color:var(--muted);
    margin-bottom:22px
}
.form-layout {
    display:grid;
    grid-template-columns:minmax(0,1.75fr) minmax(270px,1fr);
    gap:24px
}
.form-grid {
    padding:4px 24px 25px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
}
.form-grid label,.aside-fields>label {
    display:flex;
    flex-direction:column;
    gap:9px;
    font-size:11px;
    font-weight:550;
    color:var(--ink)
}
input:not([type=checkbox]),select,textarea {
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface);
    padding:11px 13px;
    width:100%;
    font-size:12px;
    line-height:1.6;
    color:var(--ink)
}
input::placeholder,textarea::placeholder {
    color:var(--muted);
    font-size:11px
}
input[type=checkbox] {
    accent-color:var(--teal);
    height:16px;
    width:16px;
    flex-shrink:0
}
textarea {
    resize:vertical
}
label small {
    font-size:9px;
    font-weight:400;
    color:var(--muted);
    line-height:1.8
}
.full-width {
    grid-column:1/-1
}
.section-number {
    font-size:10px;
    background:var(--surface-tint);
    border-radius:5px;
    padding:4px 7px;
    color:var(--muted)
}
.form-section {
    margin-top:24px
}
.aside-fields {
    padding:4px 24px 24px;
    display:flex;
    flex-direction:column;
    gap:25px
}
.info-box {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:16px;
    border-radius:8px;
    background:var(--surface-tint);
    color:var(--muted);
    align-self:start
}
.info-box>.icon {
    height:17px;
    width:17px;
    margin-top:2px
}
.info-box p {
    font-size:10px;
    line-height:1.85;
    color:var(--muted);
    font-weight:400
}
.form-actions {
    display:flex;
    flex-direction:column;
    gap:11px;
    margin-top:20px
}
.simulator-checks {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:0 24px 24px
}
.check-card {
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    padding:13px;
    border-radius:8px;
    cursor:pointer
}
.check-card:has(input:checked) {
    background:var(--nav-active);
    border-color:var(--accent-line)
}
.check-card>.stat-icon {
    width:29px;
    height:29px
}
.check-card>.stat-icon>.icon {
    width:15px;
    height:15px
}
.check-card strong {
    font-size:11px;
    display:block;
    font-weight:550
}
.check-card small {
    font-size:9px;
    color:var(--muted);
    display:block;
    margin-top:4px
}
.panel-form-actions {
    padding:22px 24px;
    background:var(--surface-chrome);
    border-top:1px solid var(--line);
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px
}
.panel-form-actions>.subtle {
    margin-inline-end:auto;
    font-size:10px;
    color:var(--muted)
}
.narrow-panel {
    max-width:850px
}
.filters {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 24px 23px;
    flex-wrap:wrap
}
.filters input,.filters select {
    font-size:10px;
    padding:10px;
    width:auto
}
.filters select {
    max-width:215px
}
.filters>.btn {
    min-height:35px;
    padding:9px 13px;
    font-size:10px
}
.search-field {
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface);
    padding-inline:10px;
    flex:1;
    min-width:175px;
    max-width:280px
}
.search-field .icon {
    height:15px;
    width:15px;
    color:var(--muted)
}
.search-field input {
    width:100%;
    border:0;
    min-width:0;
    padding-inline:0
}
.pagination {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:10px;
    color:var(--muted);
    padding:17px 24px;
    border-top:1px solid var(--line)
}
.pagination>div {
    display:flex;
    gap:10px
}
.pagination .btn {
    min-height:30px;
    font-size:10px;
    padding:8px 12px
}
.flash {
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--success-bg);
    border:1px solid var(--accent-line);
    border-radius:9px;
    padding:14px 18px;
    font-size:12px;
    color:var(--success-ink);
    margin-bottom:25px
}
.error-summary {
    background:var(--error-bg);
    border:1px solid var(--error-line);
    border-radius:8px;
    padding:14px 18px;
    margin-bottom:23px;
    color:var(--error-ink);
    font-size:11px
}
.error-summary ul {
    margin:8px 0 0;
    padding-inline-start:17px
}
.error-summary li {
    padding:3px 0
}
.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    padding:12px;
    background:var(--surface);
    z-index:200
}
.skip-link:focus {
    top:12px
}
.mobile-menu {
    display:none
}
.login-page {
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr
}
.login-story {
    background:var(--login-story);
    position:relative;
    overflow:hidden;
    padding:44px 13%;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.login-story .brand {
    font-size:26px
}
.login-story-copy {
    margin:60px 0 25px
}
.login-story-copy>.eyebrow {
    font-size:9px;
    margin-bottom:20px
}
.login-story h1 {
    font-size:43px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:-1.8px;
    max-width:460px
}
.login-story h1>span {
    color:var(--teal)
}
.login-story-copy>p:not(.eyebrow) {
    font-size:12px;
    color:var(--muted);
    margin-top:25px;
    max-width:340px;
    line-height:1.9
}
.login-planet {
    height:260px;
    position:relative;
    margin:25px 0 0
}
.login-planet .planet {
    width:155px;
    height:155px;
    top:30px;
    inset-inline-start:80px
}
.login-planet .orbit {
    width:330px;
    height:102px;
    top:60px;
    inset-inline-start:0;
    border-color:#91aa7d66
}
.login-planet .moon {
    height:32px;
    width:32px;
    inset-inline-start:260px;
    top:48px
}
.tiny-star {
    position:absolute;
    inset-inline-start:30px;
    top:25px;
    color:var(--muted);
    font-size:22px
}
.planet-note {
    position:absolute;
    bottom:0;
    inset-inline-start:25px;
    background:var(--surface-glass);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 17px;
    display:flex;
    align-items:center;
    gap:13px;
    transform:rotate(-3deg);
    box-shadow:0 15px 30px #6c8a5c10
}
.planet-note>.icon {
    color:var(--muted)
}
.planet-note strong {
    font-size:11px;
    display:block
}
.planet-note small {
    font-size:9px;
    color:var(--muted);
    display:block;
    margin-top:4px
}
.login-story-footer {
    font-size:10px;
    color:var(--muted);
    margin-top:45px
}
.login-side {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--surface-chrome);
    padding:90px 45px 70px
}
.login-preferences {
    position:absolute;
    top:32px;
    inset-inline-end:40px;
    display:flex;
    align-items:center;
    gap:18px
}
.login-language {
    margin:0
}
.login-box {
    max-width:370px;
    width:100%
}
.login-symbol {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid var(--line);
    background:var(--surface-tint);
    border-radius:12px;
    margin-bottom:25px;
    color:var(--muted)
}
.login-box>.eyebrow {
    font-size:8px;
    margin-bottom:13px
}
.login-box h2 {
    font-size:31px;
    font-weight:700;
    letter-spacing:-1px;
    line-height:1.3
}
.login-intro {
    font-size:12px;
    color:var(--muted);
    margin:16px 0 30px;
    line-height:1.9
}
.login-box label {
    display:block;
    font-size:11px;
    color:var(--ink);
    font-weight:550;
    margin-bottom:9px
}
.input-icon {
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:22px;
    background:var(--surface);
    padding-inline:13px;
    gap:11px
}
.input-icon>.icon {
    width:17px;
    height:17px;
    color:var(--muted)
}
.input-icon input {
    border:0;
    padding:12px 0;
    min-width:0;
    background:none
}
.input-icon:focus-within {
    outline:3px solid var(--focus);
    outline-offset:2px
}
.input-icon input:focus {
    outline:none
}
.password-toggle {
    background:none;
    border:0;
    padding:3px;
    color:var(--muted)
}
.password-toggle .icon {
    width:17px;
    height:17px
}
.login-submit {
    width:100%;
    min-height:47px;
    margin-top:3px;
    justify-content:space-between;
    padding-inline:20px;
    font-size:12px
}
.login-help {
    display:flex;
    align-items:flex-start;
    gap:10px;
    border-top:1px solid var(--line);
    margin-top:28px;
    padding-top:22px;
    color:var(--muted)
}
.login-help>.icon {
    width:15px;
    height:15px;
    margin-top:2px
}
.login-help>p {
    font-size:10px;
    line-height:1.9;
    max-width:300px
}
.login-copyright {
    position:absolute;
    bottom:30px;
    font-size:9px;
    color:var(--muted)
}
.main-content {
    animation:appear .25s ease both
}
@keyframes appear {
    from {
        opacity:.6;
        transform:translateY(5px)
    }
    to {
        opacity:1;
        transform:none
    }
}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3 {
    letter-spacing:0;
    line-height:1.5
}
[dir=rtl] .eyebrow,[dir=rtl] .nav-label {
    letter-spacing:0
}
[dir=rtl] .icon-arrow {
    transform:scaleX(-1)
}
[dir=rtl] .notification-row.unread {
    box-shadow:inset -3px 0 #87ad70
}
[dir=rtl] .login-story h1 {
    font-size:37px
}
@media(min-width:1600px) {
    .page-heading h1 {
        font-size:38px
    }
    .stats-grid {
        gap:24px
    }
    .stat-card {
        padding:25px
    }
    .login-story {
        padding-inline:15%
    }
    .login-story h1 {
        font-size:50px
    }
}
@media(max-width:1200px) {
    .stats-grid {
        gap:13px
    }
    .stat-card {
        padding:16px
    }
    .stat-card>div {
        font-size:10px
    }
    .stat-card p {
        font-size:9px
    }
    .overview-grid {
        grid-template-columns:1fr
    }
    .calm-empty {
        padding:25px
    }
    .organization-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .form-layout {
        grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);
        gap:24px
    }
    .form-grid {
        gap:18px;
        padding-inline:20px
    }
    .panel-heading {
        padding-inline:20px
    }
    .simulator-checks {
        grid-template-columns:1fr
    }
    .login-story {
        padding-inline:10%
    }
    .login-story h1 {
        font-size:37px
    }
    .login-planet {
        transform:scale(.9);
        transform-origin:center
    }
}
@media(max-width:900px) {
    .stats-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .form-layout {
        grid-template-columns:1fr
    }
    .form-aside {
        display:grid;
        grid-template-columns:1fr;
        gap:10px
    }
    .form-actions {
        flex-direction:row;
        justify-content:flex-end
    }
    .form-actions>.btn {
        flex:1
    }
    .page-heading {
        align-items:flex-start
    }
    .page-heading h1 {
        font-size:28px
    }
    .welcome-banner h2 {
        font-size:25px
    }
    .banner-art {
        width:180px;
        transform:scale(.9)
    }
    .welcome-banner>div:first-child {
        max-width:75%
    }
    .login-box h2 {
        font-size:28px
    }
    .login-story h1 {
        font-size:32px
    }
    .login-planet {
        transform:scale(.75);
        transform-origin:top left
    }
    .login-side {
        padding-inline:30px
    }
    .filters {
        gap:8px
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .simulator-checks {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:760px) {
    :root {
        --header-height:70px;
        --content-gap:20px
    }
    .workspace {
        margin-inline-start:0
    }
    .sidebar {
        width:var(--sidebar-width);
        transform:translateX(-105%);
        visibility:hidden;
        transition:transform .2s,visibility 0s .2s;
        box-shadow:var(--shadow)
    }
    .sidebar .sidebar-close {
        display:grid
    }
    .sidebar.is-open {
        transform:none;
        visibility:visible;
        transition-delay:0s
    }
    [dir=rtl] .sidebar {
        transform:translateX(105%)
    }
    [dir=rtl] .sidebar.is-open {
        transform:none;
        visibility:visible
    }
    .mobile-menu {
        display:grid
    }
    .topbar {
        gap:10px
    }
    .topbar-actions {
        gap:15px
    }
    .main-content {
        padding-block:26px
    }
    .page-heading h1 {
        font-size:27px
    }
    .stats-grid {
        gap:14px
    }
    .stat-card {
        padding:19px
    }
    .organization-grid {
        gap:15px
    }
    .workspace-footer {
        font-size:8px
    }
    .login-page {
        grid-template-columns:1fr
    }
    .login-story {
        display:none
    }
    .login-side {
        min-height:100vh;
        padding:100px 25px 85px
    }
    .login-box {
        max-width:370px
    }
    .login-box h2 {
        font-size:31px
    }
    .login-preferences {
        top:24px;
        inset-inline-end:24px
    }
    .login-copyright {
        font-size:8px
    }
    .member-summary {
        gap:15px
    }
    .padded h2 {
        font-size:18px
    }
    .notification-panel {
        inset-inline-end:0
    }
}
@media(max-width:500px) {
    :root {
        --content-gap:16px
    }
    .main-content {
        padding-block:24px
    }
    .page-heading {
        flex-direction:column;
        gap:18px;
        margin-bottom:25px
    }
    .page-heading h1 {
        font-size:27px
    }
    .page-heading>div>p:last-child {
        font-size:11px
    }
    .page-heading>.btn {
        font-size:10px
    }
    .stat-card {
        padding:16px
    }
    .stat-card>strong {
        font-size:30px
    }
    .stat-card>div {
        font-size:10px
    }
    .stat-card p {
        font-size:9px;
        line-height:1.7
    }
    .stat-icon {
        width:29px;
        height:29px
    }
    .stat-icon .icon {
        height:16px;
        width:16px
    }
    .stats-grid {
        gap:10px
    }
    .panel-heading {
        padding:19px 18px;
        gap:10px
    }
    .panel-heading h2 {
        font-size:14px
    }
    .panel-heading p {
        font-size:10px
    }
    .panel-heading>a {
        font-size:9px;
        white-space:nowrap
    }
    .welcome-banner {
        padding:26px 22px;
        min-height:250px
    }
    .welcome-banner>div:first-child {
        max-width:95%
    }
    .banner-art {
        position:absolute;
        inset-inline-end:-110px;
        opacity:.3;
        top:20px
    }
    .welcome-banner h2 {
        font-size:25px;
        max-width:250px
    }
    .welcome-banner p:not(.eyebrow) {
        font-size:11px
    }
    .workspace-footer {
        flex-direction:column;
        align-items:start;
        gap:10px;
        margin-top:30px
    }
    .organization-grid,.member-summary {
        grid-template-columns:1fr
    }
    .org-card h2 {
        font-size:18px
    }
    .table-wrap th,.table-wrap td {
        padding-inline:18px
    }
    .form-grid {
        padding:0 18px 20px
    }
    .aside-fields {
        padding:0 18px 20px
    }
    .simulator-checks {
        grid-template-columns:1fr;
        padding-inline:18px
    }
    .notification-panel {
        position:fixed;
        top:67px;
        inset-inline:12px;
        width:auto
    }
    .notification-row {
        padding:20px 17px;
        gap:11px
    }
    .notification-row h2 {
        font-size:12px
    }
    .notification-row p {
        font-size:11px
    }
    .notification-row .icon-button {
        width:25px;
        height:25px
    }
    .filters {
        padding-inline:18px;
        gap:9px
    }
    .filters select {
        max-width:100%;
        flex:1;
        min-width:110px
    }
    .search-field {
        max-width:none;
        flex-basis:100%
    }
    .panel-form-actions {
        padding:18px;
        flex-wrap:wrap
    }
    .panel-form-actions>.subtle {
        width:100%;
        font-size:9px;
        margin-bottom:8px
    }
    .language {
        font-size:10px
    }
    .topbar-actions {
        gap:10px
    }
    .empty-state {
        padding:40px 23px
    }
    .empty-state h2 {
        font-size:21px
    }
    .empty-state p {
        font-size:11px
    }
    .notification-row>div {
        min-width:0
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
}
/* Medical simulator library */ .simulation-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}
.simulation-card {
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .2s,box-shadow .2s
}
.simulation-card:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 32px #1e514b0c
}
.simulator-art {
    position:relative;
    overflow:hidden;
    aspect-ratio:2/1;
    color:#327c72;
    background:#e7f2ed;
    --machine-body:#f9fcf7;
    --machine-interior:#b8d7cd
}
.simulator-art.accent-blue {
    color:#4d7e9d;
    background:#e8f1f8;
    --machine-body:#f7fbff;
    --machine-interior:#bfd6e6
}
.simulator-art.accent-plum {
    color:#88687e;
    background:#f3eaf0;
    --machine-body:#fff9fc;
    --machine-interior:#dfccda
}
.simulator-art img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.medical-art {
    width:100%;
    height:100%;
    display:block
}
.art-label {
    position:absolute;
    inset-inline-start:16px;
    top:14px;
    display:flex;
    gap:6px;
    align-items:center;
    font-size:10px;
    font-weight:700;
    background:var(--surface-glass);
    color:var(--ink);
    border:1px solid var(--line);
    padding:5px 9px;
    border-radius:20px
}
.art-label .icon {
    width:13px;
    height:13px
}
.simulation-card-body {
    padding:23px;
    display:flex;
    flex-direction:column;
    flex:1
}
.simulation-card h2 {
    font-size:19px;
    line-height:1.45;
    margin:15px 0 8px;
    overflow-wrap:anywhere
}
.simulation-card p {
    font-size:13px;
    line-height:1.8;
    color:var(--muted);
    margin:0 0 18px;
    flex:1
}
.simulation-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:10px;
    color:var(--muted)
}
.simulation-meta>span {
    display:inline-flex;
    align-items:center;
    gap:5px
}
.simulation-meta .icon {
    width:14px;
    height:14px
}
.simulation-facts {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin:7px 0 21px;
    color:var(--muted);
    font-size:12px
}
.simulation-facts>span {
    display:inline-flex;
    align-items:center;
    gap:6px
}
.simulation-facts .icon {
    width:16px;
    height:16px
}
.simulation-actions {
    display:flex;
    gap:10px;
    border-top:1px solid var(--line);
    padding-top:18px;
    align-items:center
}
.simulation-actions>.btn,.simulation-actions>form {
    flex:1
}
.simulation-actions>form .btn {
    width:100%
}
.simulation-actions .btn {
    font-size:12px;
    padding:10px 13px;
    white-space:nowrap;
    justify-content:center
}
.simulation-actions .icon {
    width:15px;
    height:15px
}
.collection-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:12px 0 22px
}
.collection-toolbar>div {
    display:flex;
    align-items:center;
    gap:10px
}
.collection-toolbar strong {
    font-size:14px
}
.collection-search {
    display:flex;
    align-items:center;
    gap:8px
}
.collection-search>input {
    width:210px;
    margin:0
}
.collection-search>.icon {
    width:18px;
    color:var(--muted)
}
.collection-search .btn {
    min-height:42px
}
.collection-note {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    font-size:12px;
    color:var(--muted);
    line-height:1.7;
    margin:28px 0
}
.collection-note .icon {
    width:16px;
    flex-shrink:0
}
.collection-empty {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    align-items:center;
    gap:38px;
    padding:38px
}
.collection-empty h2 {
    font-size:28px;
    line-height:1.35;
    letter-spacing:-.7px;
    margin:0 0 16px
}
.collection-empty p:not(.eyebrow) {
    font-size:14px;
    line-height:1.9;
    color:var(--muted);
    max-width:460px
}
.collection-empty .btn {
    margin-top:12px
}
.empty-medical-art .simulator-art {
    border-radius:16px;
    aspect-ratio:1.4
}
.empty-medical-art .art-label {
    top:20px;
    inset-inline-start:20px
}
.upload-section {
    padding:26px
}
.upload-field {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:12px;
    padding:30px 22px;
    border:1.5px dashed var(--accent-line);
    border-radius:12px;
    background:var(--surface-subtle);
    text-align:center;
    cursor:pointer
}
.upload-field>.icon {
    height:30px;
    width:30px;
    color:var(--teal)
}
.upload-field>strong {
    font-size:15px
}
.upload-field>span {
    font-size:12px;
    line-height:1.8;
    color:var(--muted);
    max-width:370px
}
.upload-field>input {
    width:100%;
    max-width:360px;
    padding:10px;
    background:var(--surface);
    font-size:12px
}
.upload-field>small {
    overflow-wrap:anywhere;
    max-width:100%;
    font-size:11px
}
.upload-section>.info-box {
    margin-top:20px
}
.field-note {
    font-size:11px;
    line-height:1.9;
    color:var(--muted);
    margin:14px 0 0
}
.package-summary {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding:13px;
    border-radius:10px;
    background:var(--surface-subtle)
}
.package-summary>div {
    min-width:0;
    flex:1
}
.package-summary strong {
    display:block;
    font-size:12px;
    overflow-wrap:anywhere
}
.package-summary small {
    display:block;
    font-size:10px;
    color:var(--muted);
    margin-top:5px
}
.card-editor {
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:22px
}
.card-preview {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden
}
.card-preview-caption {
    padding:17px
}
.card-preview-caption>strong {
    display:block;
    overflow-wrap:anywhere;
    font-size:15px
}
.card-preview-caption>span {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:7px
}
.card-editor .inline-check {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    font-size:12px
}
.inline-check input {
    width:auto;
    margin:0;
    min-height:0
}
.card-editor input[type=file] {
    font-size:11px;
    padding:10px;
    max-width:100%
}
.card-editor>label:not(.inline-check) {
    display:flex;
    flex-direction:column;
    gap:9px;
    font-size:12px;
    font-weight:600
}
.card-editor small {
    font-size:10px;
    line-height:1.8;
    color:var(--muted);
    font-weight:400
}
.upload-status {
    font-size:12px;
    color:var(--teal);
    text-align:center
}
.simulator-detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    margin-top:25px
}
.simulator-detail>.simulator-art {
    height:100%;
    min-height:380px;
    aspect-ratio:auto
}
.simulator-detail-body {
    padding:42px
}
.simulator-detail-body h1 {
    font-size:34px;
    line-height:1.3;
    letter-spacing:-1px;
    overflow-wrap:anywhere
}
.simulator-description {
    white-space:pre-line;
    line-height:1.9;
    color:var(--muted);
    font-size:14px
}
.simulator-player {
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    background:#101d23;
    position:relative
}
.player-toolbar {
    height:52px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--surface-chrome);
    border-bottom:1px solid var(--line);
    gap:12px
}
.player-toolbar>span,.player-fullscreen {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:600;
    color:var(--muted)
}
.player-toolbar .icon {
    width:17px;
    height:17px
}
.player-fullscreen {
    border:0;
    background:transparent;
    cursor:pointer;
    padding:8px;
    color:var(--teal)
}
.simulator-player iframe {
    display:block;
    border:0;
    width:100%;
    height:max(560px,68vh);
    background:var(--surface-subtle)
}
.simulator-player:fullscreen {
    border-radius:0;
    display:flex;
    flex-direction:column
}
.simulator-player:fullscreen iframe {
    height:calc(100vh - 52px);
    flex:1
}
.player-stopped {
    min-height:450px;
    padding:70px 35px;
    text-align:center;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column
}
.player-stopped[hidden] {
    display:none
}
.player-stopped p {
    max-width:540px;
    font-size:14px;
    color:var(--muted);
    line-height:1.9
}
.player-stopped .btn {
    margin-top:15px
}
.live-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor
}
.player-heading h1 {
    font-size:30px
}
.simulation-card .simulator-art {
    flex-shrink:0
}
@media(min-width:1550px) {
    .simulation-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@media(max-width:1200px) {
    .simulation-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .simulation-actions {
        flex-wrap:wrap
    }
    .collection-toolbar {
        flex-wrap:wrap
    }
    .collection-empty {
        gap:24px;
        padding:28px
    }
    .collection-empty h2 {
        font-size:24px
    }
    .simulator-detail-body {
        padding:28px
    }
}
@media(max-width:700px) {
    .simulation-grid {
        grid-template-columns:1fr
    }
    .collection-toolbar {
        align-items:stretch
    }
    .collection-search {
        width:100%
    }
    .collection-search input {
        width:100%;
        min-width:0
    }
    .collection-toolbar>div {
        margin-bottom:5px
    }
    .collection-empty {
        grid-template-columns:1fr;
        padding:22px
    }
    .empty-medical-art .simulator-art {
        aspect-ratio:1.8
    }
    .collection-empty h2 {
        font-size:25px
    }
    .upload-section {
        padding:20px
    }
    .upload-field {
        padding:22px 14px
    }
    .package-summary {
        flex-wrap:wrap
    }
    .simulator-detail {
        grid-template-columns:1fr
    }
    .simulator-detail>.simulator-art {
        min-height:230px;
        aspect-ratio:2/1
    }
    .simulator-detail-body {
        padding:25px
    }
    .simulator-detail-body h1 {
        font-size:29px
    }
    .simulator-player iframe {
        height:70vh;
        min-height:500px
    }
    .player-toolbar {
        padding:0 12px
    }
    .player-toolbar>span {
        font-size:10px
    }
    .player-heading h1 {
        font-size:26px
    }
}
@media(prefers-reduced-motion:reduce) {
    .simulation-card {
        transition:none
    }
    .simulation-card:hover {
        transform:none
    }
}
.role-summary {
    display:flex;
    align-items:center;
    gap:50px;
    padding:24px 30px;
    margin:26px 0;
    background:var(--surface-tint);
    border:1px solid var(--line);
    border-radius:14px
}
.role-summary>div {
    display:flex;
    align-items:center;
    gap:13px
}
.role-summary strong {
    font:700 30px var(--display)
}
.role-summary span {
    font-size:12px;
    color:var(--muted)
}
.role-summary-note {
    margin-inline-start:auto;
    max-width:250px
}
.roles-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}
.role-card {
    padding:26px;
    display:flex;
    flex-direction:column
}
.role-card h2 {
    font-size:23px;
    margin:22px 0 12px
}
.role-card p {
    font-size:13px;
    color:var(--muted);
    line-height:1.8;
    min-height:47px
}
.role-card .simulation-facts {
    margin:22px 0
}
.role-card-actions {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    padding-top:20px;
    margin-top:auto
}
.role-card-actions .btn {
    font-size:11px;
    padding:10px 12px
}
.role-card-actions .text-link,.role-card-actions .text-button {
    font-size:11px
}
.danger-text {
    color:var(--error-ink)
}
.role-guidance {
    margin-top:26px
}
.role-details {
    max-width:100%
}
.permission-toolbar {
    display:flex;
    align-items:center;
    gap:20px;
    margin:34px 0 20px
}
.permission-toolbar>div {
    margin-inline-end:auto
}
.permission-toolbar h2 {
    font-size:20px
}
.permission-toolbar p {
    font-size:12px;
    color:var(--muted);
    margin-top:7px
}
.permission-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    align-items:start
}
.permission-group .panel-heading {
    padding:22px
}
.permission-group h3 {
    font-size:16px
}
.permission-options {
    padding:8px 22px 20px;
    display:flex;
    flex-direction:column
}
.permission-option {
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 0;
    font-size:13px;
    cursor:pointer
}
.permission-option input {
    width:17px;
    height:17px;
    min-height:17px;
    padding:0;
    margin:0;
    accent-color:var(--teal);
    flex-shrink:0
}
.permission-warning {
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:11px;
    line-height:1.7;
    margin:0 22px 22px;
    padding:13px;
    background:var(--warning-bg);
    border-radius:8px;
    color:var(--warning-ink)
}
.permission-warning .icon {
    width:15px;
    height:15px
}
.role-save-bar {
    position:sticky;
    bottom:12px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--surface-glass);
    backdrop-filter:blur(8px);
    border:1px solid var(--line);
    border-radius:12px;
    margin-top:26px;
    padding:18px;
    box-shadow:0 8px 24px #173b360c
}
.role-save-bar>span {
    display:flex;
    align-items:center;
    gap:8px;
    margin-inline-end:auto;
    font-size:11px;
    color:var(--muted)
}
input:disabled,select:disabled,textarea:disabled {
    background:var(--surface-disabled);
    color:var(--muted);
    cursor:not-allowed
}
.role-editor .form-grid label small {
    font-size:11px;
    color:var(--muted)
}
@media(max-width:1200px) {
    .roles-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .role-summary {
        gap:24px;
        flex-wrap:wrap
    }
    .role-summary-note {
        margin-inline-start:0
    }
}
@media(max-width:700px) {
    .roles-grid,.permission-grid {
        grid-template-columns:1fr
    }
    .role-summary {
        padding:22px;
        gap:20px
    }
    .role-summary strong {
        font-size:25px
    }
    .role-save-bar {
        flex-wrap:wrap;
        bottom:0
    }
    .role-save-bar>span {
        width:100%;
        line-height:1.7
    }
    .role-save-bar .btn {
        flex:1
    }
    .permission-toolbar {
        flex-wrap:wrap;
        gap:12px
    }
    .permission-toolbar>div {
        width:100%
    }
}
.permission-state {
    color:var(--muted)
}
.permission-state.granted {
    color:var(--teal)
}
.permission-state .icon {
    width:17px;
    height:17px
}
.permission-state-label {
    font-size:10px;
    color:var(--muted);
    display:block
}
/* Live supervision */ .live-symbol {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex-shrink:0;
    background:var(--surface-tint);
    color:var(--teal);
    border-radius:14px
}
.live-symbol .icon {
    width:25px;
    height:25px
}
.live-share {
    padding:23px 25px;
    margin-bottom:22px;
    border-color:var(--line)
}
.live-share-heading {
    display:flex;
    gap:15px;
    align-items:center
}
.live-share h2 {
    font-size:17px;
    margin-bottom:6px
}
.live-share p {
    font-size:12px;
    color:var(--muted)
}
.live-share-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px
}
.live-status {
    font-size:12px;
    line-height:1.7;
    margin-top:13px;
    color:var(--ink);
    overflow-wrap:anywhere
}
.live-status.is-error {
    color:var(--error-ink)
}
.live-share .live-viewers {
    color:var(--teal);
    font-weight:650;
    margin-top:8px
}
.live-privacy {
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:13px
}
.live-privacy .icon {
    width:14px;
    height:14px
}
.live-overview {
    display:flex;
    align-items:center;
    gap:18px;
    padding:25px;
    margin-bottom:32px
}
.live-overview strong {
    font:650 16px var(--display)
}
.live-overview p {
    font-size:12px;
    max-width:580px;
    color:var(--muted);
    margin-top:7px
}
.live-scope {
    margin-inline-start:auto;
    display:flex;
    gap:8px;
    align-items:center;
    color:var(--ink);
    font-size:11px;
    background:var(--surface-tint);
    padding:9px 13px;
    border-radius:8px;
    max-width:250px
}
.live-section-title {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px
}
.live-section-title h2 {
    font-size:19px
}
.live-section-title .count-pill {
    position:static
}
.live-session-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.live-session-card {
    padding:24px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    animation:live-arrive .3s ease
}
.live-session-card h3 {
    font-size:20px;
    margin:22px 0 6px;
    overflow-wrap:anywhere
}
.live-session-card .live-org {
    font-size:11px;
    color:var(--muted);
    margin-bottom:22px
}
.live-session-card .live-sim {
    border-top:1px solid var(--line);
    padding-top:17px;
    min-height:64px;
    font-size:13px;
    font-weight:550
}
.live-session-card .btn {
    width:100%;
    margin-top:18px
}
.live-empty {
    padding:55px 22px;
    text-align:center
}
.live-empty-art {
    display:grid;
    place-items:center;
    position:relative;
    width:92px;
    height:92px;
    border:1px solid var(--line);
    background:var(--surface-tint);
    border-radius:30px;
    margin:0 auto 25px
}
.live-empty-art>.icon {
    width:42px;
    height:42px;
    color:var(--muted)
}
.live-orbit {
    position:absolute;
    inset-inline-end:1px;
    bottom:9px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#90b981;
    border:4px solid var(--surface)
}
.live-empty h2 {
    font-size:23px;
    margin-bottom:12px
}
.live-empty p {
    font-size:13px;
    max-width:470px;
    margin:0 auto 23px;
    color:var(--muted);
    line-height:1.9
}
.live-watch {
    overflow:hidden
}
.live-video-toolbar,.live-watch-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:14px 22px
}
.live-video-toolbar>span,.live-watch-footer>span {
    display:flex;
    gap:9px;
    align-items:center;
    font-size:12px
}
.live-video-toolbar>div {
    display:flex;
    gap:8px
}
.live-video-stage {
    position:relative;
    background:#102b29;
    min-height:360px;
    aspect-ratio:16/9;
    display:grid;
    place-items:center
}
.live-video-stage video {
    width:100%;
    height:100%;
    object-fit:contain;
    position:absolute;
    inset:0
}
.live-video-placeholder {
    position:relative;
    text-align:center;
    color:#f3f8ef;
    padding:35px;
    max-width:470px
}
.live-video-placeholder .live-symbol {
    margin:0 auto 22px;
    width:66px;
    height:66px;
    background:#24443d;
    color:#b2dba0
}
.live-video-placeholder h2 {
    font-size:27px;
    margin-bottom:12px
}
.live-video-placeholder p {
    color:#b0c7bb;
    font-size:13px;
    line-height:1.9;
    margin-bottom:24px
}
.live-video-placeholder .btn {
    background:#d8eeb8;
    color:#274d36
}
.live-watch-footer {
    font-size:12px;
    color:var(--muted);
    min-height:55px
}
.live-video-stage:fullscreen {
    aspect-ratio:auto
}
.live-video-stage:fullscreen video {
    height:100vh
}
.live-video-stage:fullscreen .live-video-placeholder {
    display:none
}
@keyframes live-arrive {
    from {
        transform:translateY(7px);
        opacity:.3
    }
    to {
        transform:none;
        opacity:1
    }
}
@media(max-width:1150px) {
    .live-session-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .live-overview {
        flex-wrap:wrap
    }
    .live-scope {
        margin-inline-start:66px
    }
}
@media(max-width:600px) {
    .live-session-grid {
        grid-template-columns:1fr
    }
    .live-share,.live-overview {
        padding:20px
    }
    .live-share-heading {
        align-items:flex-start
    }
    .live-share-actions .btn {
        flex:1
    }
    .live-video-stage {
        aspect-ratio:auto;
        min-height:330px
    }
    .live-video-toolbar,.live-watch-footer {
        padding:12px;
        flex-wrap:wrap
    }
    .live-video-placeholder {
        padding:25px
    }
    .live-empty {
        padding:35px 20px
    }
    .live-scope {
        margin-inline-start:0
    }
    .live-overview>.live-symbol {
        display:none
    }
    .live-overview strong {
        font-size:15px
    }
    .live-watch-footer>span {
        font-size:10px
    }
}
@media(prefers-reduced-motion:reduce) {
    .live-session-card {
        animation:none
    }
}
/* Shared shell behavior and controls */ .sidebar-backdrop {
    position:fixed;
    inset:0;
    z-index:110;
    background:#06161080;
    border:0;
    backdrop-filter:blur(2px)
}
body.menu-open {
    overflow:hidden
}
.theme-toggle {
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink);
    border-radius:10px;
    flex-shrink:0
}
.theme-toggle:hover {
    background:var(--surface-hover)
}
.theme-toggle .icon {
    width:18px;
    height:18px
}
.theme-sun {
    display:none
}
[data-theme=dark] .theme-sun {
    display:block
}
[data-theme=dark] .theme-moon {
    display:none
}
input,select,textarea {
    color-scheme:inherit
}
input[type=file]::file-selector-button {
    border:1px solid var(--line);
    border-radius:5px;
    background:var(--surface-tint);
    color:var(--ink);
    padding:6px 10px;
    margin-inline-end:12px;
    font:inherit
}
:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:3px
}
input:not([type=checkbox]):focus-visible,select:focus-visible,textarea:focus-visible {
    border-color:var(--accent-line)
}
.table-wrap {
    max-width:100%;
    overscroll-behavior-inline:contain
}
.form-layout>*,.overview-grid>*,.member-summary>*,.form-grid>*,.permission-grid>* {
    min-width:0
}
.page-heading>div {
    min-width:0
}
.page-heading h1 {
    overflow-wrap:anywhere
}
.role-card,.org-card,.simulation-card-body {
    padding:24px
}
.live-session-card {
    border-radius:var(--radius)
}
.login-copyright {
    max-width:calc(100% - 40px);
    text-align:center
}
@media(max-width:760px) {
    .sidebar-brand {
        margin-bottom:24px
    }
    .sidebar-nav {
        flex:1
    }
    .topbar-actions {
        gap:10px
    }
    .theme-toggle {
        width:34px;
        height:34px
    }
    .live-empty .badge {
        white-space:normal;
        line-height:1.7
    }
    .pagination {
        flex-wrap:wrap
    }
}

/* Shared page navigation and account settings */
.topbar-brand {
    font-size:13px;
    font-weight:650;
    margin-inline-end:auto;
    white-space:nowrap;
}
.breadcrumbs {
    margin-bottom:20px;
    color:var(--muted);
    font-size:11px;
}
.breadcrumbs ol {
    display:flex;
    flex-wrap:wrap;
    gap:7px 10px;
    list-style:none;
    margin:0;
    padding:0;
}
.breadcrumbs li {
    display:flex;
    gap:10px;
    min-width:0;
    overflow-wrap:anywhere;
}
.breadcrumbs a:hover {
    color:var(--teal);
    text-decoration:underline;
    text-underline-offset:3px;
}
.breadcrumbs [aria-current=page] {
    color:var(--ink);
    font-weight:550;
}
.breadcrumb-divider { color:var(--muted); }
.page-heading h1 {
    font-size:28px;
    letter-spacing:-.6px;
    margin-bottom:8px;
}
.page-heading-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    flex-shrink:0;
}
.account-menu { position:relative; }
.account-toggle {
    display:flex;
    align-items:center;
    gap:9px;
    padding:5px 7px;
    border:1px solid transparent;
    border-radius:9px;
    background:transparent;
    color:var(--ink);
}
.account-toggle:hover,.account-toggle[aria-expanded=true] {
    background:var(--surface-hover);
    border-color:var(--line);
}
.account-toggle-name {
    max-width:145px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:600;
}
.account-toggle .icon { width:14px; height:14px; }
.account-panel {
    position:absolute;
    z-index:100;
    top:calc(100% + 12px);
    inset-inline-end:0;
    width:264px;
    max-width:calc(100vw - 36px);
    padding:7px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    box-shadow:var(--shadow);
}
.account-panel-identity {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    padding:12px;
    margin-bottom:5px;
    border-bottom:1px solid var(--line);
    overflow-wrap:anywhere;
}
.account-panel-identity strong { font-size:13px; }
.account-panel-identity span,.account-panel-identity small { color:var(--muted); font-size:11px; }
.account-panel>a,.account-panel button {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    border:0;
    border-radius:7px;
    padding:11px 12px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:12px;
    text-align:start;
}
.account-panel>a:hover,.account-panel button:hover,.account-panel>a[aria-current=page] { background:var(--surface-hover); }
.account-panel .icon { width:18px; height:18px; }
.profile-summary {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    padding:24px;
    margin-bottom:24px;
}
.profile-avatar { width:54px; height:54px; font-size:21px; }
.profile-identity { min-width:0; overflow-wrap:anywhere; }
.profile-identity h2 { font-size:19px; margin-bottom:6px; }
.profile-identity>span { display:inline-block; color:var(--muted); font-size:12px; }
.profile-facts {
    display:flex;
    flex-wrap:wrap;
    gap:18px 30px;
    margin:0;
    margin-inline-start:auto;
}
.profile-facts dt { color:var(--muted); font-size:10px; margin-bottom:4px; }
.profile-facts dd { font-size:12px; margin:0; }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.profile-grid .panel { min-width:0; }
.profile-grid .panel-form-actions { justify-content:flex-end; }
.profile-managed-note {
    display:flex;
    gap:9px;
    color:var(--muted);
    font-size:11px;
    line-height:1.8;
    padding:18px 24px;
    border-top:1px solid var(--line);
}
.profile-managed-note .icon { flex-shrink:0; width:17px; height:17px; margin-top:2px; }
input[aria-invalid=true] { border-color:var(--error-ink); }
.dashboard-shortcuts { padding:24px; margin-top:24px; }
.dashboard-shortcuts h2 { font-size:17px; margin-bottom:16px; }
.dashboard-shortcuts>div { display:flex; gap:12px; flex-wrap:wrap; }
.dashboard-shortcuts>p { color:var(--muted); font-size:12px; margin-bottom:18px; }
@media(max-width:1100px) {
    .profile-facts { width:100%; margin-inline-start:0; padding-top:16px; border-top:1px solid var(--line); }
}
@media(max-width:900px) {
    .account-toggle-name { display:none; }
    .profile-grid { grid-template-columns:1fr; }
}
@media(max-width:760px) {
    .page-heading h1 { font-size:25px; }
    .breadcrumbs { font-size:10px; margin-bottom:18px; }
    .profile-summary { padding:20px; }
    .profile-facts { gap:16px 24px; }
    .account-toggle { padding:4px; gap:5px; }
    .topbar-actions { gap:8px; }
    .notification-panel { position:fixed; inset-inline:16px; top:calc(var(--header-height) + 8px); width:auto; }
}
@media(max-width:500px) {
    .topbar-brand { display:none; }
    .topbar-actions { margin-inline-start:auto; }
    .page-heading { align-items:stretch; }
    .profile-facts { flex-direction:column; }
    .profile-grid .panel-heading { padding:20px; }
    .profile-managed-note { padding:16px 20px; }
}

.password-field {
    display:flex;
    flex-direction:column;
    gap:9px;
    min-width:0;
}
.password-field>label {
    margin:0;
    font-size:11px;
    font-weight:550;
    color:var(--ink);
}
.password-field>small {
    font-size:9px;
    font-weight:400;
    color:var(--muted);
    line-height:1.8;
}
.password-control { position:relative; }
.password-control input {
    padding-right:46px;
    padding-left:13px;
}
.password-control .password-toggle {
    position:absolute;
    inset-inline-end:4px;
    top:50%;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--muted);
}
.password-control .password-toggle:hover {
    color:var(--ink);
    background:var(--surface-hover);
}
.password-toggle .icon { width:18px; height:18px; }
.password-toggle .icon-eye-off,
.password-toggle[data-visible=true] .icon-eye { display:none; }
.password-toggle[data-visible=true] .icon-eye-off { display:block; }
.password-leading-icon {
    position:absolute;
    inset-inline-start:13px;
    top:50%;
    transform:translateY(-50%);
    width:17px;
    height:17px;
    color:var(--muted);
    pointer-events:none;
}
.password-control.has-leading-icon input { padding-left:42px; }
[dir=rtl] .password-control input { padding-left:46px; padding-right:13px; }
[dir=rtl] .password-control.has-leading-icon input { padding-right:42px; }
.login-box .password-field { margin-bottom:22px; }
.login-box .password-control input { padding-block:12px; }
.mobile-number { display:inline-block; white-space:nowrap; font-variant-numeric:tabular-nums; }

[data-search-filters] .search-field { max-width:360px; }
.search-feedback {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:20px;
    font-size:10px;
    color:var(--muted);
}
.search-feedback .is-error { color:var(--error-ink); }
[data-search-results][aria-busy=true] { opacity:.55; pointer-events:none; }
@media(max-width:500px) {
    [data-search-filters] .search-field { max-width:none; }
    .search-feedback { flex-basis:100%; }
}

.live-search-toolbar { align-items:flex-start; }
.live-search-toolbar>div { min-height:38px; }
.live-search-toolbar .filters { flex:1; justify-content:flex-end; padding:0; gap:10px 12px; }
.live-search-toolbar .search-feedback { flex-basis:100%; justify-content:flex-end; }
@media(max-width:700px) {
    .live-search-toolbar { flex-direction:column; gap:10px; }
    .live-search-toolbar .filters { width:100%; justify-content:flex-start; }
    .live-search-toolbar .search-field { max-width:none; }
    .live-search-toolbar .search-feedback { justify-content:flex-start; }
}

.bulk-user-toolbar { padding:16px 24px; border-top:1px solid var(--line); background:var(--surface); }
.bulk-user-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; font-size:11px; }
.bulk-user-heading>span { color:var(--muted); font-size:10px; }
.bulk-user-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-top:12px; }
.bulk-user-controls label { display:grid; gap:6px; min-width:180px; font-size:10px; }
.bulk-user-controls small { color:var(--muted); }
.bulk-user-controls select,.bulk-user-controls input { margin:0; font-size:11px; }
.bulk-user-controls .btn { min-height:39px; font-size:11px; }
.bulk-user-help { margin:10px 0 0; color:var(--muted); font-size:10px; }
.bulk-user-help:empty { display:none; }
.user-selection-cell { width:44px; padding-inline:16px; }
.user-selection-cell input { margin:0; cursor:pointer; }
@media(max-width:500px) {
    .bulk-user-toolbar { padding:16px; }
    .bulk-user-controls label { flex:1; min-width:0; width:100%; }
    .bulk-user-controls [data-bulk-expiry-field] { flex-basis:100%; }
}