@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ala-bg: #f1f4f8;
    --ala-bg-accent: #e8edf4;
    --ala-surface: #ffffff;
    --ala-surface-raised: #ffffff;
    --ala-surface-strong: #eef1f4;
    --ala-primary: #48c932;
    --ala-primary-strong: #2f9f20;
    --ala-primary-soft: #e8f7e5;
    --ala-secondary: #5c8df6;
    --ala-danger: #e84855;
    --ala-danger-soft: #fdebed;
    --ala-warning: #e6a11b;
    --ala-warning-soft: #fff4d6;
    --ala-text: #151a20;
    --ala-text-secondary: #4c5662;
    --ala-text-muted: #788390;
    --ala-border: #dde2e7;
    --ala-border-strong: #cbd2d9;
    --ala-shadow-sm: 0 1px 2px rgba(17, 24, 39, .055), 0 5px 16px rgba(17, 24, 39, .025);
    --ala-shadow-md: 0 18px 46px rgba(17, 24, 39, .085), 0 2px 7px rgba(17, 24, 39, .04);
    --ala-space-1: 4px;
    --ala-space-2: 8px;
    --ala-space-3: 12px;
    --ala-space-4: 16px;
    --ala-space-5: 20px;
    --ala-space-6: 24px;
    --ala-space-8: 32px;
    --ala-space-10: 40px;
    --ala-radius-sm: 8px;
    --ala-radius-md: 12px;
    --ala-radius-lg: 18px;
    --ala-radius-xl: 24px;
    --ala-font: "Inter", sans-serif;
    --ala-font-display: "Inter", sans-serif;
    --ala-font-data: "Inter", sans-serif;
    --ala-nav-height: 72px;
    --ala-layout-max: 1180px;
    --ala-page-gutter: 12px;
    --ala-page-background:
        radial-gradient(ellipse 72rem 48rem at -8% -18%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .74) 31%, transparent 70%),
        radial-gradient(ellipse 58rem 42rem at 104% 2%, rgba(207, 217, 232, .58) 0%, rgba(226, 232, 241, .28) 40%, transparent 72%),
        radial-gradient(ellipse 54rem 38rem at 48% 68%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .24) 48%, transparent 76%),
        radial-gradient(ellipse 46rem 34rem at 4% 108%, rgba(215, 223, 235, .5) 0%, transparent 72%),
        linear-gradient(136deg, #edf1f6 0%, #f8f9fb 42%, #eef2f7 100%);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ala-bg: #081116;
    --ala-bg-accent: #0d1a20;
    --ala-surface: #111e25;
    --ala-surface-raised: #17262e;
    --ala-surface-strong: #1d2e36;
    --ala-primary: #74dd55;
    --ala-primary-strong: #55bf39;
    --ala-primary-soft: #18351c;
    --ala-secondary: #6fa8ff;
    --ala-danger: #ff5f68;
    --ala-danger-soft: #371a20;
    --ala-warning: #ffb843;
    --ala-warning-soft: #392b17;
    --ala-text: #f3f7f3;
    --ala-text-secondary: #b7c2bd;
    --ala-text-muted: #82918c;
    --ala-border: #263840;
    --ala-border-strong: #38505a;
    --ala-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 9px 24px rgba(0, 6, 10, .12);
    --ala-shadow-md: 0 24px 58px rgba(0, 5, 9, .32), 0 2px 7px rgba(0, 0, 0, .18);
    --ala-page-background:
        radial-gradient(ellipse 54rem 34rem at 92% -12%, color-mix(in srgb, var(--ala-primary) 4%, transparent), transparent 72%),
        radial-gradient(ellipse 48rem 38rem at -12% 88%, rgba(23, 48, 57, .24), transparent 76%),
        linear-gradient(148deg, var(--ala-bg-accent) 0%, var(--ala-bg) 48%, #091319 100%);
}

:root[data-theme="dark"] .app-header {
    border-bottom-color: color-mix(in srgb, var(--ala-border-strong) 58%, transparent);
    background: color-mix(in srgb, var(--ala-bg) 88%, transparent);
    box-shadow: 0 10px 30px rgba(0, 5, 9, .12);
}

:root[data-theme="dark"] .bottom-nav {
    border-top-color: color-mix(in srgb, var(--ala-border-strong) 68%, transparent);
    background: color-mix(in srgb, var(--ala-surface) 96%, transparent);
    box-shadow: 0 -12px 32px rgba(0, 5, 9, .18);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ala-bg); }
body { min-height: 100vh; margin: 0; background: var(--ala-page-background); background-attachment: fixed; color: var(--ala-text); font-family: var(--ala-font); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.has-dialog { overflow: hidden; }
button, input, select, textarea { color: inherit; font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ala-secondary) 72%, white); outline-offset: 3px; }
[hidden] { display: none !important; }

.app-body { padding-bottom: calc(var(--ala-nav-height) + env(safe-area-inset-bottom) + 20px); }
.app-main { width: min(calc(100% - (var(--ala-page-gutter) * 2)), var(--ala-layout-max)); margin: 0 auto; padding: var(--ala-space-5) 0 var(--ala-space-8); }
.app-main--narrow { max-width: 760px; }
.app-header { position: sticky; z-index: 100; top: 0; overflow: visible; border-bottom: 1px solid color-mix(in srgb, var(--ala-border) 82%, transparent); background: color-mix(in srgb, var(--ala-bg) 91%, transparent); backdrop-filter: blur(18px); }
.app-header__inner { display: flex; width: min(calc(100% - (var(--ala-page-gutter) * 2)), var(--ala-layout-max)); min-height: 66px; margin: 0 auto; align-items: center; justify-content: space-between; gap: var(--ala-space-3); }
.ala-brand { display: inline-flex; min-width: 104px; flex: 0 0 auto; align-items: center; padding: 8px 4px; color: var(--ala-text); text-decoration: none; overflow: visible; }
.ala-brand__text { display: flex; flex-direction: column; line-height: 1; }
.ala-brand__wordmark { display: block; width: 104px; aspect-ratio: 614 / 135; background: currentColor; -webkit-mask: url("../brand/ala-wordmark.svg") center / contain no-repeat; mask: url("../brand/ala-wordmark.svg") center / contain no-repeat; }
.ala-brand__tagline { display: none; margin-top: 8px; color: var(--ala-text-secondary); font-size: 7px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.app-header__right { display: flex; min-width: 0; align-items: center; gap: 12px; }
.app-header__actions { display: flex; min-width: 0; align-items: center; gap: 6px; }
.desktop-nav { display: none; align-items: center; gap: 4px; }
.desktop-nav a { border-radius: 9px; padding: 8px 11px; color: var(--ala-text-secondary); font-size: 13px; font-weight: 600; text-decoration: none; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: var(--ala-surface); color: var(--ala-text); }
.icon-button { display: inline-grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid var(--ala-border); border-radius: 12px; background: var(--ala-surface); color: var(--ala-text-secondary); cursor: pointer; box-shadow: var(--ala-shadow-sm); }
.icon-button:hover, .notification-menu[open] > summary { border-color: var(--ala-border-strong); background: var(--ala-surface-raised); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theme-icon--moon { display: grid; width: 19px; height: 19px; place-items: center; line-height: 0; }
.theme-icon--sun { display: none; width: 19px; height: 19px; place-items: center; line-height: 0; }
:root[data-theme="dark"] .theme-icon--sun { display: grid; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }

.notification-menu { position: relative; }
.notification-menu > summary { list-style: none; }
.notification-menu > summary::-webkit-details-marker { display: none; }
.notification-menu__trigger { color: var(--ala-warning); }
.notification-menu__trigger[data-notification-state="enabled"] { color: var(--ala-primary-strong); }
.notification-menu__trigger[data-notification-state="disabled"] { color: var(--ala-danger); }
.notification-menu__trigger::after { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid var(--ala-surface); border-radius: 50%; background: currentColor; content: ""; }
.notification-menu__panel { position: fixed; z-index: 130; top: 74px; right: 12px; left: 12px; display: grid; gap: 12px; border: 1px solid var(--ala-border); border-radius: 16px; padding: 16px; background: var(--ala-surface); box-shadow: var(--ala-shadow-md); }
.notification-menu__panel > div { display: grid; gap: 2px; }
.notification-menu__panel strong { font-size: 14px; }
.notification-status { color: var(--ala-text-secondary); font-size: 12px; }
.notification-button { min-height: 40px; font-size: 12px; }

.profile-menu { position: relative; }
.profile-menu > summary { display: flex; min-height: 40px; align-items: center; gap: 9px; border: 1px solid var(--ala-border); border-radius: 12px; padding: 0 11px; background: var(--ala-surface); color: var(--ala-text); cursor: pointer; list-style: none; box-shadow: var(--ala-shadow-sm); }
.profile-menu > summary::-webkit-details-marker, .participant-switcher > summary::-webkit-details-marker { display: none; }
.profile-menu[open] > summary { border-color: var(--ala-border-strong); background: var(--ala-surface-raised); }
.profile-menu__name { display: none; max-width: 190px; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu__menu-icon { display: grid; place-items: center; }
.profile-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-menu__panel { position: fixed; z-index: 130; top: 74px; right: 12px; left: 12px; max-height: calc(100vh - 92px); overflow-x: hidden; overflow-y: auto; border: 1px solid var(--ala-border); border-radius: 16px; padding: 8px; background: var(--ala-surface); box-shadow: var(--ala-shadow-md); }
.profile-menu__identity { display: grid; gap: 2px; border-bottom: 1px solid var(--ala-border); padding: 11px 10px 14px; }
.profile-menu__identity strong, .profile-menu__identity small { display: block; min-width: 0; overflow-wrap: anywhere; }
.profile-menu__identity strong { font-size: 14px; font-weight: 650; }
.profile-menu__identity small { margin-top: 2px; color: var(--ala-text-muted); font-size: 11px; font-weight: 400; }
.profile-menu__links { display: grid; padding: 7px 0; }
.profile-menu__links a { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; border-radius: 9px; padding: 9px 10px; color: var(--ala-text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; }
.profile-menu__links a:hover { background: var(--ala-surface-raised); color: var(--ala-text); }
.profile-menu__links svg { width: 15px; height: 15px; }
.profile-menu__start { margin: 2px 0 8px; }
.profile-menu__start .btn { min-height: 42px; }
.profile-menu__return, .profile-menu__logout { display: block; width: 100%; border: 0; border-top: 1px solid var(--ala-border); padding: 12px 10px; background: transparent; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none; overflow-wrap: anywhere; }
.profile-menu__return { color: var(--ala-primary-strong); }
.profile-menu__logout { color: var(--ala-danger); }
.participant-switcher { border-top: 1px solid var(--ala-border); padding: 7px 0; }
.participant-switcher > summary { display: flex; min-height: 42px; align-items: center; border-radius: 9px; padding: 9px 10px; color: var(--ala-text); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.participant-switcher > summary::after { margin-left: auto; color: var(--ala-text-muted); content: "+"; font-size: 18px; font-weight: 400; }
.participant-switcher[open] > summary::after { content: "−"; }
.participant-switcher__menu { display: grid; gap: 2px; padding: 3px 6px 8px; }
.participant-switcher__menu button { display: block; width: 100%; min-width: 0; border: 0; border-radius: 8px; padding: 9px 10px; background: transparent; color: var(--ala-text-secondary); font-size: 12px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.participant-switcher__menu button:hover, .participant-switcher__menu button[aria-current="true"] { background: var(--ala-primary-soft); color: var(--ala-primary-strong); }

.bottom-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: calc(var(--ala-nav-height) + env(safe-area-inset-bottom)); padding: 8px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--ala-border); background: color-mix(in srgb, var(--ala-surface) 94%, transparent); backdrop-filter: blur(20px); }
.bottom-nav__item { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border-radius: 12px; color: var(--ala-text-muted); font-size: 10px; font-weight: 600; text-decoration: none; }
.bottom-nav__item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.bottom-nav__item[aria-current="page"] { color: var(--ala-primary-strong); background: var(--ala-primary-soft); }

.page-heading { margin-bottom: var(--ala-space-5); }
.page-kicker, .section-label { margin: 0 0 var(--ala-space-2); color: var(--ala-primary-strong); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.page-heading h1 { margin: 0; font-family: var(--ala-font-display); font-size: clamp(27px, 7vw, 42px); line-height: 1.05; letter-spacing: -.045em; }
.page-heading p { max-width: 620px; margin: var(--ala-space-2) 0 0; color: var(--ala-text-secondary); }
.ala-card { border: 1px solid var(--ala-border); border-radius: var(--ala-radius-lg); background: var(--ala-surface); box-shadow: var(--ala-shadow-sm); }
.ala-card--raised { background: var(--ala-surface-raised); box-shadow: var(--ala-shadow-md); }
.section-card { padding: var(--ala-space-4); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ala-space-3); margin-bottom: var(--ala-space-4); }
.section-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.section-heading a { color: var(--ala-primary-strong); font-size: 13px; font-weight: 600; text-decoration: none; }

.btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--ala-radius-md); padding: 11px 17px; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.btn:active { transform: scale(.985); }
.btn:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.btn--primary { background: var(--ala-primary); color: #11230e; }
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ala-primary) 86%, white); }
.btn--secondary { border-color: var(--ala-border-strong); background: var(--ala-surface); color: var(--ala-text); }
.btn--danger { border-color: color-mix(in srgb, var(--ala-danger) 55%, var(--ala-border)); background: transparent; color: var(--ala-danger); }
.btn--full { width: 100%; }
.role-badge { display: inline-grid; min-width: 30px; height: 26px; place-items: center; border-radius: 8px; padding: 0 8px; color: #fff; font-family: var(--ala-font-data); font-size: 12px; font-weight: 700; }
.role-badge--P { background: #56a936; }
.role-badge--D { background: #4c89df; }
.role-badge--C { background: #d7961a; }
.role-badge--A { background: #e34f58; }
.segmented-control { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; border-radius: 13px; padding: 4px; background: var(--ala-surface-strong); }
.segmented-control button { min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--ala-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.segmented-control button[aria-selected="true"] { background: var(--ala-surface); color: var(--ala-text); box-shadow: var(--ala-shadow-sm); }
.notice { border: 1px solid var(--ala-border); border-left: 4px solid var(--ala-secondary); border-radius: var(--ala-radius-md); background: var(--ala-surface); padding: 12px 14px; color: var(--ala-text-secondary); }
.notice.error { border-left-color: var(--ala-danger); background: var(--ala-danger-soft); color: var(--ala-danger); }
.notice.success { border-left-color: var(--ala-primary); background: var(--ala-primary-soft); color: var(--ala-text); }
.ala-dialog { width: min(calc(100% - 24px), 460px); max-width: none; max-height: calc(100dvh - 24px); margin: auto; overflow: visible; border: 0; padding: 0; background: transparent; color: var(--ala-text); }
.ala-dialog::backdrop { background: color-mix(in srgb, #05090c 66%, transparent); backdrop-filter: blur(3px); }
.ala-dialog__surface { display: grid; max-height: calc(100dvh - 24px); overflow: auto; padding: var(--ala-space-5); gap: var(--ala-space-5); overscroll-behavior: contain; }
.ala-dialog__copy { display: grid; gap: var(--ala-space-2); }
.ala-dialog__copy .section-label, .ala-dialog__copy h2, .ala-dialog__copy > p { margin: 0; }
.ala-dialog__copy h2 { font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.ala-dialog__copy > p { color: var(--ala-text-secondary); }
.ala-dialog__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ala-space-2); }
.ala-dialog__feedback { padding: 10px 12px; font-size: 13px; }
.ala-dialog[aria-busy="true"] { cursor: progress; }
.empty-state { padding: var(--ala-space-8) var(--ala-space-4); color: var(--ala-text-muted); text-align: center; }
.data-value { font-family: var(--ala-font-data); font-variant-numeric: tabular-nums; font-weight: 650; }
.muted { color: var(--ala-text-muted); }
@media (max-width: 899px) {
    html.app-shell-root { height: 100%; overflow: hidden; }
    body.app-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; min-height: 0; overflow: hidden; padding: 0; }
    .app-shell > .app-header { position: static; top: auto; }
    .app-shell > .app-shell__main { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
    body.app-shell.has-dialog > .app-shell__main { overflow-y: hidden; }
    .app-shell > .bottom-nav { position: static; inset: auto; min-height: 0; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: var(--ala-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
    :root[data-theme="dark"] .app-shell > .bottom-nav { background: color-mix(in srgb, var(--ala-surface) 96%, var(--ala-bg)); }
    .app-shell > .bottom-nav .bottom-nav__item { min-height: 56px; }
}
@supports (height: 100dvh) {
    @media (max-width: 899px) {
        body.app-shell { height: 100dvh; }
    }
}
@media (min-width: 720px) {
    :root { --ala-page-gutter: 24px; }
    .ala-brand { min-width: 144px; }
    .app-header .ala-brand__text { align-items: center; }
    .ala-brand__wordmark { width: 144px; }
    .ala-brand__tagline { display: block; }
    .app-header .ala-brand__tagline { letter-spacing: .42em; }
    .app-main { padding-top: var(--ala-space-8); }
}
@media (max-width: 719px) {
    .ala-dialog { margin: auto auto max(12px, env(safe-area-inset-bottom)); }
    .ala-dialog__surface { border-radius: var(--ala-radius-xl); padding: var(--ala-space-4); }
}
@media (min-width: 900px) {
    html.app-shell-root { height: auto; min-height: 100%; overflow: visible; }
    body.app-shell { display: block; height: auto; min-height: 100vh; overflow: visible; padding-bottom: 32px; }
    .app-shell > .app-header { position: sticky; top: 0; }
    .app-shell > .app-shell__main { min-width: initial; min-height: initial; overflow: visible; }
    .app-body { padding-bottom: 32px; }
    .app-header__inner { min-height: 76px; }
    .app-header__right { gap: 18px; }
    .app-header__actions { gap: 8px; }
    .desktop-nav { display: flex; gap: 2px; border-radius: 12px; padding: 3px; background: color-mix(in srgb, var(--ala-surface) 70%, transparent); }
    .desktop-nav a { padding-inline: 13px; }
    .profile-menu__name { display: block; }
    .profile-menu__panel { position: absolute; top: calc(100% + 16px); right: 0; left: auto; width: 330px; max-height: calc(100vh - 94px); }
    .notification-menu__panel { position: absolute; top: calc(100% + 16px); right: -52px; left: auto; width: 290px; }
    .bottom-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}