:root {
    --syn-color-success: #16a34a;
    --syn-color-warning: #d97706;
    --syn-color-danger: #dc2626;
    --syn-color-info: #0284c7;
    --syn-radius-sm: .2rem;
    --syn-radius-md: .35rem;
    --syn-radius-lg: .5rem;
    --syn-radius-card: var(--syn-radius-md);
    --syn-radius-control: var(--syn-radius-sm);
    --syn-spacing-page-x: 1.75rem;
    --syn-spacing-page-y: 1.5rem;
    --syn-spacing-section: 1.5rem;
    --syn-spacing-card: 1.25rem;
    --syn-shadow-card: 0 1px 4px rgb(24 31 43 / 8%);
    --syn-shadow-dropdown: 0 12px 28px rgb(24 31 43 / 18%);
    --syn-sidebar-width: 15.75rem;
    --syn-topbar-height: 4rem;
    --syn-content-max-width: 100%;
    --syn-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

.syn-body {
    margin: 0;
    background: var(--syn-color-background);
    color: var(--syn-color-text);
    font-family: var(--syn-font-family);
    font-size: .875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

:where(.syn-body) :where(a) {
    color: var(--syn-color-link);
    text-decoration: none;
}

:where(.syn-body) :where(a:hover) {
    color: var(--syn-color-link-hover);
    text-decoration: underline;
}

:where(.syn-body) :where(a:active) { color: var(--syn-color-link-active); }

.syn-skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 1000;
    padding: .6rem .8rem;
    color: var(--syn-color-on-primary);
    background: var(--syn-color-primary);
    border-radius: var(--syn-radius-control);
    transform: translateY(-150%);
}

.syn-skip-link:focus { transform: translateY(0); }

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

.syn-sidebar {
    position: relative;
    z-index: 30;
    width: var(--syn-sidebar-width);
    flex: none;
    padding: 0 .85rem 1rem;
    color: var(--syn-color-sidebar-muted);
    background: var(--syn-color-sidebar);
    box-shadow: .15rem 0 .75rem rgb(24 31 43 / 9%);
    transition: width .24s cubic-bezier(.2,.75,.3,1), padding .24s cubic-bezier(.2,.75,.3,1);
}

.syn-sidebar-heading { min-height: var(--syn-topbar-height); display: flex; align-items: center; gap: .35rem; }
.syn-sidebar-heading .syn-brand { min-width: 0; flex: 1; }
.syn-sidebar-toggle {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--syn-radius-control);
    color: var(--syn-color-sidebar-muted);
    background: transparent;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, transform .24s ease;
}
.syn-sidebar-toggle:hover { color: var(--syn-color-sidebar-active); background: rgb(255 255 255 / 9%); }
.syn-sidebar-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--syn-color-primary) 55%, white); outline-offset: 1px; }
.syn-sidebar-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.syn-mobile-nav-toggle {
    width: 2.35rem;
    height: 2.35rem;
    display: none;
    place-items: center;
    flex: none;
    padding: 0;
    color: var(--syn-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--syn-radius-control);
    cursor: pointer;
}
.syn-mobile-nav-toggle:hover { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-mobile-nav-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--syn-color-primary) 42%, transparent); outline-offset: 2px; }
.syn-mobile-nav-toggle svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.syn-mobile-nav-backdrop { display: none; }

.syn-brand {
    min-height: var(--syn-topbar-height);
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 .55rem;
    color: var(--syn-color-sidebar-active);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.syn-brand-mark {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: .35rem;
    color: #fff;
    background: var(--syn-color-primary);
    box-shadow: 0 .2rem .6rem rgb(0 0 0 / 18%);
}

.syn-main { min-width: 0; flex: 1; }

.syn-topbar {
    min-height: var(--syn-topbar-height);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem var(--syn-spacing-page-x);
    background: var(--syn-color-surface);
    border-top: 3px solid var(--syn-color-primary);
    border-bottom: 1px solid var(--syn-color-border);
    box-shadow: 0 1px 4px rgb(24 31 43 / 5%);
}

.syn-icon-button {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    color: var(--syn-color-text-muted);
    background: transparent;
    font-size: 1.15rem;
    cursor: pointer;
}

.syn-icon-button:hover { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-topbar-title { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.syn-topbar-spacer { flex: 1; }
.syn-header-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.syn-popover { position: relative; }
.syn-popover > summary { list-style: none; cursor: pointer; }
.syn-popover > summary::-webkit-details-marker { display: none; }
.syn-header-action {
    position: relative;
    min-width: 2.35rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .25rem;
    border-radius: 50%;
    color: var(--syn-color-text-muted);
    transition: color .15s ease, background .15s ease;
}
.syn-header-action:hover,
.syn-popover[open] > .syn-header-action { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-header-action:focus-visible { outline: 2px solid color-mix(in srgb, var(--syn-color-primary) 42%, transparent); outline-offset: 2px; }
.syn-header-action-icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.syn-header-action-badge {
    position: absolute;
    top: .08rem;
    right: .05rem;
    min-width: 1rem;
    height: 1rem;
    display: grid;
    place-items: center;
    padding: 0 .2rem;
    border: 2px solid var(--syn-color-surface);
    border-radius: 999px;
    color: #fff;
    background: var(--syn-color-primary);
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
}

.syn-avatar {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--syn-color-on-primary);
    background: var(--syn-color-primary);
    font-size: .75rem;
    font-weight: 700;
}

.syn-content-grid { display: flex; align-items: stretch; min-width: 0; }

.syn-content {
    width: 100%;
    max-width: var(--syn-content-max-width);
    min-width: 0;
    margin: 0 auto;
    padding: var(--syn-spacing-page-y) var(--syn-spacing-page-x);
}

.syn-sidebar-right {
    width: 20rem;
    flex: none;
    padding: var(--syn-spacing-page-y) 1rem;
    background: var(--syn-color-surface);
    border-left: 1px solid var(--syn-color-border);
}

.syn-footer {
    padding: 1rem var(--syn-spacing-page-x);
    color: var(--syn-color-text-muted);
    background: var(--syn-color-surface);
    border-top: 1px solid var(--syn-color-border);
}

.syn-navigation-list,
.syn-navigation-children { margin: 0; padding: 0; list-style: none; }
.syn-navigation { position: relative; }
.syn-navigation-children { padding: .28rem; }
.syn-navigation details > summary { list-style: none; cursor: pointer; }
.syn-navigation details > summary::-webkit-details-marker { display: none; }
.syn-navigation details > summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--syn-color-primary) 42%, transparent); outline-offset: -2px; }
.syn-sidebar .syn-navigation-children {
    position: relative;
    margin: .15rem 0 .45rem;
    overflow: hidden;
    border-radius: var(--syn-radius-lg);
    background: rgb(255 255 255 / 6%);
    transition: height .21s cubic-bezier(.2,.75,.3,1), background .16s ease;
}

.syn-nav-item,
.syn-nav-group {
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .12rem 0;
    padding: .55rem .7rem;
    border-radius: var(--syn-radius-control);
    color: inherit;
    text-decoration: none;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

.syn-sidebar .syn-nav-item:hover,
.syn-sidebar .syn-nav-group:hover {
    color: var(--syn-color-sidebar-active);
    background: rgb(255 255 255 / 11%);
}

.syn-sidebar .syn-nav-disclosure[open][data-menu-level="1"] > .syn-nav-group {
    color: var(--syn-color-primary);
    background: rgb(255 255 255 / 15%);
    font-weight: 650;
}

.syn-sidebar .syn-navigation-children .syn-nav-disclosure[open] > .syn-nav-group,
.syn-sidebar .syn-navigation-children[data-syn-panel-state="current"] > .syn-nav-back-entry {
    color: var(--syn-color-sidebar-active);
    background: rgb(255 255 255 / 9%);
}

.syn-sidebar .syn-nav-item[aria-current] {
    color: #fff;
    background: var(--syn-color-primary);
    box-shadow: 0 .25rem .75rem rgb(0 0 0 / 15%);
}

.syn-nav-icon { width: 1.2rem; display: inline-grid; place-items: center; flex: none; text-align: center; }
.syn-nav-icon .syn-icon { display: block; width: 1.15rem; height: 1.15rem; }
.syn-nav-label { min-width: 0; flex: 1; }
.syn-nav-caret { width: 1rem; height: 1rem; display: inline-grid; place-items: center; flex: none; margin-left: auto; transform: rotate(0); transform-origin: 50% 50%; transition: transform .2s ease; }
.syn-nav-caret svg { width: .85rem; height: .85rem; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.syn-nav-disclosure[data-menu-level="1"] > .syn-nav-group .syn-nav-caret { transform: rotate(90deg); }
.syn-nav-disclosure[data-menu-level="1"][open] > .syn-nav-group .syn-nav-caret { transform: rotate(-90deg); }
.syn-navigation-children .syn-nav-disclosure[open] > .syn-nav-group .syn-nav-caret { transform: rotate(180deg); }

.syn-nav-back-entry { margin-bottom: .15rem; }
.syn-nav-back {
    width: 100%;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .52rem .65rem;
    border: 0;
    border-radius: var(--syn-radius-control);
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.syn-nav-back:hover { color: var(--syn-color-sidebar-active); background: rgb(255 255 255 / 11%); }
.syn-nav-back > span { font-size: 1.35rem; line-height: 1; }
.syn-nav-back > strong { min-width: 0; overflow-wrap: anywhere; }

.syn-navigation.is-syn-enhanced .syn-navigation-children[data-syn-panel-state="current"],
.syn-navigation.is-syn-enhanced .syn-navigation-children[data-syn-panel-state="previous"]:not([data-menu-level="2"]) {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    min-height: max-content;
    margin: 0;
}
.syn-navigation.is-syn-enhanced .syn-navigation-children[data-syn-panel-state="previous"]:not([data-menu-level="2"]) {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.syn-navigation.is-syn-enhanced .syn-navigation-children[data-syn-panel-state="previous"] > .syn-navigation-entry:not(.is-drill-host),
.syn-navigation.is-syn-enhanced .syn-navigation-children[data-syn-panel-state="previous"] > .syn-nav-back-entry,
.syn-navigation.is-syn-enhanced .syn-navigation-children[data-syn-panel-state="previous"] > .syn-navigation-entry > .is-drill-parent > .syn-nav-group {
    visibility: hidden;
    pointer-events: none;
}

.syn-navigation-horizontal > .syn-navigation-list {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.syn-navigation-horizontal .syn-nav-item,
.syn-navigation-horizontal .syn-nav-group { color: var(--syn-color-text-muted); }
.syn-navigation-horizontal .syn-nav-item:hover,
.syn-navigation-horizontal .syn-nav-group:hover { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-navigation-horizontal .syn-nav-disclosure[open] > .syn-nav-group { color: var(--syn-color-primary); background: color-mix(in srgb, var(--syn-color-primary) 10%, var(--syn-color-surface)); }
.syn-navigation-horizontal > .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure { position: relative; }
.syn-navigation-horizontal > .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-navigation-children {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 50;
    width: min(20rem, calc(100vw - 2rem));
    max-height: calc(100vh - var(--syn-topbar-height) - 1.5rem);
    overflow-y: auto;
    padding: .4rem;
    background: color-mix(in srgb, var(--syn-color-surface-muted) 72%, var(--syn-color-surface));
    border: 1px solid var(--syn-color-border);
    border-radius: var(--syn-radius-card);
    box-shadow: var(--syn-shadow-dropdown);
}
.syn-navigation-horizontal .syn-navigation-children .syn-navigation-children { margin-left: .65rem; border-left: 1px solid var(--syn-color-border); }
.syn-navigation-horizontal .syn-navigation-children .syn-nav-item,
.syn-navigation-horizontal .syn-navigation-children .syn-nav-group { white-space: normal; }
.syn-navigation-horizontal .syn-navigation-children { background: color-mix(in srgb, var(--syn-color-surface-muted) 72%, var(--syn-color-surface)); }
.syn-navigation-horizontal .syn-navigation-children .syn-nav-item:hover,
.syn-navigation-horizontal .syn-navigation-children .syn-nav-group:hover { background: var(--syn-color-surface-muted); }
.syn-navigation-horizontal .syn-nav-back:hover { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-navigation-horizontal .syn-navigation-children[data-syn-panel-state="current"] { border: 0; box-shadow: none; }

.syn-sidebar-collapsed .syn-sidebar {
    width: 4.65rem;
    padding-inline: .6rem;
    overflow: visible;
}
.syn-sidebar-collapsed .syn-sidebar-heading { justify-content: center; }
.syn-sidebar-collapsed .syn-sidebar-heading .syn-brand { flex: none; padding-inline: 0; }
.syn-sidebar-collapsed .syn-brand-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.syn-sidebar-collapsed .syn-sidebar-heading .syn-sidebar-toggle {
    position: absolute;
    top: .65rem;
    right: -.8rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--syn-color-sidebar-active);
    background: var(--syn-color-primary);
    box-shadow: var(--syn-shadow-card);
}
.syn-sidebar-collapsed .syn-sidebar-heading .syn-sidebar-toggle svg { width: .9rem; height: .9rem; }
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry { position: relative; }
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry::after {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 69;
    width: .75rem;
    height: 100%;
    content: "";
}
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-item,
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-nav-group {
    justify-content: center;
    padding-inline: .6rem;
}
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-nav-group .syn-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-nav-group .syn-nav-caret { display: none; }
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-item .syn-nav-icon,
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-nav-group .syn-nav-icon { margin: 0; }
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-item .syn-nav-label {
    position: absolute;
    top: 0;
    left: calc(100% - .05rem);
    z-index: 70;
    width: 15rem;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    padding: .55rem .8rem;
    border-radius: var(--syn-radius-md);
    color: var(--syn-color-sidebar-active);
    background: var(--syn-color-sidebar);
    box-shadow: var(--syn-shadow-dropdown);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-.2rem);
    transition: opacity .18s ease, transform .18s ease;
}
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry:hover > .syn-nav-item .syn-nav-label,
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry:focus-within > .syn-nav-item .syn-nav-label { opacity: 1; transform: translateX(0); }
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-navigation-children {
    position: absolute;
    top: 0;
    left: calc(100% - .05rem);
    z-index: 70;
    width: min(17rem, calc(100vw - 6rem));
    max-height: min(34rem, calc(100vh - 1rem));
    margin: 0;
    overflow: auto;
    background: var(--syn-color-sidebar);
    box-shadow: var(--syn-shadow-dropdown);
    opacity: 0;
    transform: translateX(-.2rem);
    transition: opacity .18s ease, transform .18s ease;
}
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure[open] > .syn-navigation-children { opacity: 1; transform: translateX(0); }
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-navigation-children::before {
    display: block;
    padding: .65rem .7rem .4rem;
    color: var(--syn-color-sidebar-active);
    font-weight: 700;
    content: attr(data-parent-label);
}

.syn-popover-panel {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 80;
    background: var(--syn-color-surface);
    border: 1px solid var(--syn-color-border);
    border-radius: var(--syn-radius-card);
    box-shadow: var(--syn-shadow-dropdown);
}
.syn-account-trigger { border-radius: 999px; padding-inline: .2rem .35rem; }
.syn-account-caret {
    width: 1rem;
    height: 1rem;
    display: inline-grid;
    place-items: center;
    flex: none;
    transform-origin: 50% 50%;
    transition: transform .2s ease;
}
.syn-account-caret svg {
    width: .75rem;
    height: .75rem;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.syn-account-menu[open] .syn-account-caret { transform: rotate(180deg); }
.syn-account-menu-panel { width: min(16rem, calc(100vw - 2rem)); padding: .45rem; }
.syn-account-list { margin: 0; padding: 0; list-style: none; }
.syn-account-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .72rem .75rem; border: 0; border-radius: var(--syn-radius-control); background: transparent; color: var(--syn-color-text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.syn-account-item:hover { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-account-item.is-danger { color: var(--syn-color-danger); }
.syn-account-item-icon { width: 1.15rem; text-align: center; color: var(--syn-color-text-subtle); }
.syn-account-item.is-danger .syn-account-item-icon { color: inherit; }
.syn-account-item.is-unavailable, .syn-popover-footer.is-unavailable { color: var(--syn-color-text-muted); cursor: default; }
.syn-account-item.is-unavailable:hover, .syn-popover-footer.is-unavailable:hover { color: var(--syn-color-text-muted); background: transparent; }
.syn-account-item small { margin-left: auto; color: var(--syn-color-text-muted); white-space: nowrap; }
.syn-notification-panel { right: -3rem; width: min(25rem, calc(100vw - 2rem)); overflow: hidden; }
.syn-popover-heading { padding: .9rem 1rem; color: var(--syn-color-on-primary); background: var(--syn-color-primary); text-align: center; }
.syn-notification-list { max-height: min(26rem, calc(100vh - var(--syn-topbar-height) - 7rem)); overflow-y: auto; }
.syn-notification-item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; padding: .85rem 1rem; color: var(--syn-color-text); border-bottom: 1px solid var(--syn-color-border); text-decoration: none; }
.syn-notification-item:hover { background: var(--syn-color-surface-muted); }
.syn-notification-item.is-unread .syn-notification-copy > strong::after { display: inline-block; width: .38rem; height: .38rem; margin-left: .42rem; border-radius: 50%; background: var(--syn-color-primary); content: ""; vertical-align: middle; }
.syn-notification-icon { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--syn-color-info); font-weight: 800; }
.syn-notification-icon-success { background: var(--syn-color-success); }
.syn-notification-icon-warning { background: var(--syn-color-warning); }
.syn-notification-icon-danger { background: var(--syn-color-danger); }
.syn-notification-copy { min-width: 0; display: grid; }
.syn-notification-copy > strong { font-weight: 600; }
.syn-notification-copy > span,
.syn-notification-copy > small { color: var(--syn-color-text-muted); }
.syn-popover-footer { display: block; padding: .8rem 1rem; color: var(--syn-color-text-muted); text-align: center; text-decoration: none; }
.syn-popover-footer:hover { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-popover-empty { margin: 0; padding: 1rem; color: var(--syn-color-text-muted); text-align: center; }

.syn-guest-shell,
.syn-status-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background:
        radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--syn-color-primary) 25%, transparent), transparent 28rem),
        linear-gradient(135deg, color-mix(in srgb, var(--syn-color-sidebar) 92%, #000), var(--syn-color-sidebar));
}

.syn-guest-content,
.syn-status-content {
    width: min(calc(100% - 2rem), 68rem);
    margin: auto;
    padding: 2.5rem 0;
}

.syn-layout-guest .syn-topbar,
.syn-layout-guest .syn-footer,
.syn-layout-status .syn-topbar,
.syn-layout-status .syn-footer {
    color: #fff;
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 12%);
}

.syn-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: var(--syn-spacing-section);
}

.syn-page-title { margin: 0; color: var(--syn-color-text); font-size: 1.45rem; line-height: 1.25; font-weight: 500; }
.syn-page-description,
.syn-section-description,
.syn-help { color: var(--syn-color-text-muted); font-size: .82rem; }
.syn-help { margin: 0; }

.syn-card,
.syn-form-section {
    margin-bottom: var(--syn-spacing-section);
    padding: var(--syn-spacing-card);
    background: var(--syn-color-surface);
    border: 1px solid var(--syn-color-border);
    border-radius: var(--syn-radius-card);
    box-shadow: var(--syn-shadow-card);
}

.syn-section-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
.syn-form-section-body { display: grid; gap: 1rem; }
.syn-actions,
.syn-page-actions { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; flex-wrap: wrap; }

.syn-button {
    color: var(--syn-color-text);
    background: var(--syn-color-surface);
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .52rem .9rem;
    border: 1px solid var(--syn-color-border);
    border-radius: var(--syn-radius-control);
    font: inherit;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.syn-button:focus-visible,
.syn-input:focus-visible,
.syn-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--syn-color-primary) 42%, transparent); outline-offset: 1px; }
.syn-button-primary { color: var(--syn-color-on-primary); background: var(--syn-color-primary); }
.syn-button-primary:hover { background: var(--syn-color-primary-hover); }
.syn-button-secondary { color: var(--syn-color-text); background: var(--syn-color-surface); border-color: var(--syn-color-border-strong); }
.syn-button-secondary:hover { color: var(--syn-color-primary); border-color: var(--syn-color-primary); }
.syn-button-danger { color: #fff; background: var(--syn-color-danger); }
.syn-button-sm { min-height: 1.8rem; padding: .28rem .55rem; font-size: .72rem; }

.syn-field { display: grid; gap: .35rem; }
.syn-label-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.syn-label { color: var(--syn-color-text); font-size: .82rem; font-weight: 600; }
.syn-label-action { font-size: .78rem; }
.syn-input-wrap { display: flex; align-items: stretch; min-width: 0; }

.syn-input,
.syn-select {
    width: 100%;
    min-width: 0;
    min-height: 2.45rem;
    padding: .52rem .7rem;
    color: var(--syn-color-text);
    background: var(--syn-color-surface);
    border: 1px solid var(--syn-color-border-strong);
    border-radius: var(--syn-radius-control);
    font: inherit;
}

.syn-input-wrap > .syn-input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.syn-input-wrap > .syn-input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.syn-input::placeholder { color: var(--syn-color-text-subtle); }
.syn-input-affix {
    display: inline-flex;
    align-items: center;
    padding: .52rem .7rem;
    color: var(--syn-color-text-muted);
    background: var(--syn-color-surface-muted);
    border: 1px solid var(--syn-color-border-strong);
    white-space: nowrap;
}
.syn-input-prefix { border-right: 0; border-radius: var(--syn-radius-control) 0 0 var(--syn-radius-control); }
.syn-input-suffix { border-left: 0; border-radius: 0 var(--syn-radius-control) var(--syn-radius-control) 0; }
.syn-field-invalid .syn-input,
.syn-field-invalid .syn-select { border-color: var(--syn-color-danger); }
.syn-error { margin: 0; color: var(--syn-color-danger); font-size: .78rem; }
.syn-checkbox { display: inline-flex; align-items: center; gap: .5rem; }
.syn-checkbox:has(.syn-identity-name) { align-items: flex-start; }
.syn-checkbox:has(.syn-identity-name) input { flex: none; margin-top: .2rem; }
.syn-checkbox > span { min-width: 0; }

.syn-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .18rem .52rem;
    font-size: .72rem;
    font-weight: 700;
}
.syn-badge-info { color: #075985; background: #e0f2fe; }
.syn-badge-success { color: #166534; background: #dcfce7; }
.syn-badge-warning { color: #92400e; background: #fef3c7; }
.syn-badge-danger { color: #991b1b; background: #fee2e2; }

.syn-alert { margin-bottom: 1rem; padding: .75rem 1rem; border-left: 3px solid currentColor; border-radius: var(--syn-radius-control); }
.syn-alert-info { color: #075985; background: #e0f2fe; }
.syn-alert-success { color: #166534; background: #dcfce7; }
.syn-alert-warning { color: #92400e; background: #fef3c7; }
.syn-alert-danger { color: #991b1b; background: #fee2e2; }

.syn-table-wrap { overflow-x: auto; }
.syn-table { width: 100%; border-collapse: collapse; }
.syn-table th,
.syn-table td { padding: .72rem .8rem; text-align: left; border-bottom: 1px solid var(--syn-color-border); }
.syn-table th { color: var(--syn-color-text-muted); background: var(--syn-color-surface-muted); font-size: .75rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.syn-table tbody tr:hover { background: color-mix(in srgb, var(--syn-color-surface-muted) 60%, transparent); }

/* Shared list composition for package-owned management pages. */
.syn-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:var(--syn-spacing-section); }
.syn-list-toolbar > * { min-width:0; }
.syn-list-card { padding:0; overflow:hidden; }
.syn-template-synapse .syn-card.syn-list-card { padding:0; }
.syn-list-card-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem var(--syn-spacing-card); }
.syn-list-card-header h2 { margin:0; font-size:1.1rem; }
.syn-list-card-header h2 { padding-left:.65rem; border-left:3px solid var(--syn-color-primary); }
.syn-list-card-header { display:block; }
.syn-list-card-header-actions { margin-top:1rem; justify-content:space-between; }
.syn-list-card-filters { flex:1 1 28rem; }
.syn-list-card-tools { margin-left:auto; }
.syn-list-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.syn-list-card-heading > div { min-width:0; }
.syn-list-filter-row { display:flex; align-items:flex-end; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.syn-list-filter-row > .syn-field { flex:1 1 11rem; min-width:0; }
.syn-list-filter-row > .syn-filter-search { flex:2 1 18rem; }
.syn-list-filter-row > .syn-filter-size { flex:0 1 8rem; }
.syn-list-filter-row > .syn-field:has([name="per_page"]) { flex:0 1 8rem; }
.syn-list-filter-row > .syn-field:has([name="search"]) { flex:2 1 18rem; }
.syn-list-filter-buttons { display:flex; gap:.5rem; flex-wrap:wrap; }
.syn-identity-name { display:block; font-weight:700; }
.syn-identity-meta { display:block; color:var(--syn-color-text-muted); font-size:.78rem; margin-top:.2rem; overflow-wrap:anywhere; }
.syn-list-card-header .syn-page-description { margin:.15rem 0 0; }
.syn-list-card-header-actions { display:flex; align-items:flex-end; gap:.65rem; flex-wrap:wrap; }
.syn-list-card .syn-table th,.syn-list-card .syn-table td { vertical-align:middle; }
.syn-list-card .syn-table th { background:color-mix(in srgb,var(--syn-color-primary) 14%,var(--syn-color-surface)); }
.syn-list-card .syn-table-wrap { margin:0; }
.syn-list-card-header .syn-list-filter-card { margin:0; }
.syn-page-breadcrumb { margin:0 0 1.15rem; color:var(--syn-color-text-muted); font-size:.78rem; }
.syn-page-breadcrumb ol { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.syn-page-breadcrumb li+li:before { content:'/'; margin-right:.45rem; color:var(--syn-color-text-muted); }
.syn-page-breadcrumb [aria-current=page] { color:var(--syn-color-text); font-weight:700; }
.syn-list-filter-card { position:relative; margin-bottom:var(--syn-spacing-section); }
.syn-list-filter-card summary { display:inline-flex; align-items:center; cursor:pointer; list-style:none; }
.syn-list-filter-card summary::-webkit-details-marker { display:none; }
.syn-list-filter-card[open] summary { margin-bottom:1rem; }
.syn-list-filter-fields { display:flex; align-items:flex-end; gap:.75rem; flex-wrap:wrap; padding-top:1rem; border-top:1px solid var(--syn-color-border); }
.syn-list-filter-fields .syn-field { min-width:11rem; flex:1 1 11rem; }
.syn-list-filter-fields .syn-button { flex:none; }
.syn-list-filter-compact { display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; }
.syn-list-filter-compact .syn-field { min-width:11rem; width:min(18rem,100%); }
.syn-list-page-size { display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
.syn-list-page-size .syn-select { width:4.75rem; min-height:2.35rem; }
.syn-list-page-size .syn-button { min-height:2.35rem; }
.syn-list-pagination { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding:1rem var(--syn-spacing-card); }
.syn-list-pagination-links { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.syn-list-pagination-links .syn-button { min-width:2.35rem; }
.syn-table-inline-form { display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; }
.syn-table-inline-form .syn-field { min-width:7rem; }
.syn-table-inline-form .syn-button { align-self:flex-end; }
.syn-table-inline-forms { display:grid; gap:.6rem; }
.syn-table-actions { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.syn-table-actions .syn-button,.syn-table td .syn-button { min-height:1.8rem; padding:.28rem .55rem; font-size:.72rem; }

.syn-template-compact {
    --syn-sidebar-width: 13.25rem;
    --syn-topbar-height: 3.35rem;
    --syn-spacing-page-x: 1rem;
    --syn-spacing-page-y: 1rem;
    --syn-spacing-section: 1rem;
    --syn-spacing-card: .9rem;
}
.syn-template-compact .syn-nav-item,
.syn-template-compact .syn-nav-group { min-height: 2.1rem; padding: .4rem .55rem; }
.syn-template-compact .syn-card,
.syn-template-compact .syn-form-section { box-shadow: none; }

.syn-template-topnav { --syn-topbar-height: 4.1rem; --syn-content-max-width: 90rem; }
.syn-template-topnav .syn-shell { display: block; }
.syn-topnav { position: relative; z-index: 40; padding-inline: var(--syn-spacing-page-x); }
.syn-topnav .syn-brand { padding: 0; margin-right: 1rem; color: var(--syn-color-text); }
.syn-topnav .syn-topbar-title { display: none; }
.syn-topnav .syn-navigation { flex: 1; }
.syn-topnav .syn-navigation-list { flex-wrap: nowrap; }
.syn-topnav .syn-nav-item,
.syn-topnav .syn-nav-group { gap: .45rem; padding-inline: .55rem; font-size: .82rem; white-space: nowrap; }
.syn-topnav-links { display: flex; align-items: center; gap: .35rem; flex: 1; }

/* Three-mode responsive contract: desktop >=1200, tablet 768-1199, smartphone <768. */
@media (min-width: 1200px) {
    .syn-shell { display: flex; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    :root { --syn-spacing-page-x: 1.25rem; }
    .syn-shell { display: flex; }
    .syn-content-grid { display: block; }
    .syn-sidebar-right { width: 100%; border-top: 1px solid var(--syn-color-border); border-left: 0; }
    .syn-sidebar-collapsed .syn-sidebar-heading .syn-sidebar-toggle { display: none; }

    .syn-template-topnav .syn-topnav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: .35rem 1rem;
        padding-block: .45rem;
    }
    .syn-topnav .syn-brand { grid-column: 1; grid-row: 1; margin-right: 0; }
    .syn-topnav .syn-topbar-spacer { grid-column: 2; grid-row: 1; }
    .syn-topnav .syn-header-actions { grid-column: 3; grid-row: 1; }
    .syn-topnav .syn-navigation { width: 100%; grid-column: 1 / -1; grid-row: 2; }
    .syn-topnav .syn-navigation-list { align-items: center; flex-wrap: wrap; }
}

@media (max-width: 767px) {
    :root {
        --syn-spacing-page-x: .9rem;
        --syn-spacing-page-y: 1rem;
        --syn-spacing-section: 1rem;
        --syn-spacing-card: 1rem;
    }
    html,
    body { max-width: 100%; overflow-x: hidden; }
    body.syn-mobile-nav-open { overflow: hidden; }
    .syn-shell { display: block; }
    .syn-main { width: 100%; }
    .syn-content-grid { display: block; }
    .syn-content { padding-inline: var(--syn-spacing-page-x); }
    .syn-sidebar-right { width: 100%; padding-inline: var(--syn-spacing-page-x); border-top: 1px solid var(--syn-color-border); border-left: 0; }

    .syn-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 70;
        width: min(18rem, 86vw);
        max-width: 100%;
        height: 100dvh;
        padding-inline: .85rem;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .24s cubic-bezier(.2,.75,.3,1);
    }
    .syn-mobile-nav-open .syn-sidebar { transform: translateX(0); }
    .syn-sidebar-heading .syn-sidebar-toggle { display: none; }

    .syn-mobile-nav-toggle { display: inline-grid; }
    .syn-mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 65;
        display: block;
        padding: 0;
        background: rgb(15 23 42 / 52%);
        border: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .syn-mobile-nav-open .syn-mobile-nav-backdrop { opacity: 1; pointer-events: auto; }

    .syn-topbar {
        position: sticky;
        top: 0;
        z-index: 60;
        min-height: 3.65rem;
        gap: .45rem;
        padding: .45rem var(--syn-spacing-page-x);
    }
    .syn-topbar-title { flex: 1; }
    .syn-topbar-spacer { display: none; }
    .syn-header-actions { flex: none; margin-left: auto; }
    .syn-header-action { min-width: 2.15rem; min-height: 2.15rem; }
    .syn-account-trigger { padding-inline: .1rem; }
    .syn-popover-panel {
        position: fixed;
        top: 4.25rem;
        right: .75rem;
        left: .75rem;
        width: auto;
        max-height: calc(100dvh - 5rem);
    }
    .syn-notification-panel { width: auto; }

    .syn-template-topnav .syn-topnav {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: .4rem;
        z-index: 70;
    }
    .syn-topnav .syn-brand { grid-column: 1; margin-right: 0; }
    .syn-topnav .syn-brand > span:last-child { display: none; }
    .syn-topnav .syn-mobile-nav-toggle { grid-column: 2; }
    .syn-topnav .syn-topbar-spacer { grid-column: 3; }
    .syn-topnav .syn-header-actions { grid-column: 4; }
    .syn-topnav .syn-navigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 71;
        display: none;
        width: 100%;
        max-height: calc(100dvh - 3.65rem);
        padding: .65rem;
        overflow-y: auto;
        background: var(--syn-color-surface);
        border-bottom: 1px solid var(--syn-color-border);
        box-shadow: var(--syn-shadow-dropdown);
    }
    .syn-mobile-nav-open .syn-topnav .syn-navigation { display: block; }
    .syn-navigation-horizontal > .syn-navigation-list,
    .syn-topnav-links { align-items: stretch; flex-direction: column; }
    .syn-navigation-horizontal > .syn-navigation-list { gap: .2rem; }
    .syn-navigation-horizontal details { width: 100%; }
    .syn-navigation-horizontal > .syn-navigation-list > .syn-navigation-entry > .syn-nav-disclosure > .syn-navigation-children {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-height: none;
        margin-top: .2rem;
        box-shadow: none;
    }

    .syn-page-header { align-items: stretch; flex-direction: column; }
    .syn-page-actions { width: 100%; justify-content: flex-start; }
    .syn-page-actions > * { flex: 1 1 auto; }
    .syn-card,
    .syn-form-section { padding: var(--syn-spacing-card); }
    .syn-footer { padding-inline: var(--syn-spacing-page-x); }
    .syn-guest-content,
    .syn-status-content { width: min(calc(100% - 1.5rem), 68rem); padding-block: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Portal composites are shared by every family; Synapse supplies their visual frame. */
.syn-portal-brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; color: var(--syn-color-text); text-decoration: none; }
.syn-portal-brand-mark { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,var(--syn-color-primary),var(--syn-accent-secondary,var(--syn-color-primary-hover))); border-radius: .75rem; box-shadow: 0 5px 14px color-mix(in srgb,var(--syn-color-primary) 20%,transparent); }
.syn-portal-brand-mark svg { width: 1.75rem; height: 1.75rem; }
.syn-portal-brand-copy { display: grid; line-height: 1.2; }
.syn-portal-brand-copy strong { font-size: 1rem; letter-spacing: -.035em; white-space: nowrap; }
.syn-portal-brand-copy small { margin-top: .18rem; color: var(--syn-color-text-muted); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.syn-portal-code-window { min-width: 0; overflow: hidden; border: 1px solid #344456; border-radius: 1rem; color: #cbd5e1; background: var(--syn-color-code,#0f172a); box-shadow: 0 25px 50px rgb(15 23 42 / 18%); }
.syn-portal-code-toolbar,.syn-portal-code-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: rgb(0 0 0 / 20%); font: .72rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }
.syn-portal-code-toolbar { justify-content: flex-start; border-bottom: 1px solid #344456; }
.syn-portal-code-toolbar b,.syn-portal-code-status { color: #74ddbe; }
.syn-portal-window-dots { display: flex; gap: .3rem; margin-right: .55rem; }
.syn-portal-window-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: #f87171; }
.syn-portal-window-dots i:nth-child(2) { background: #fbbf24; }
.syn-portal-window-dots i:nth-child(3) { background: #4ade80; }
.syn-portal-code-window pre { min-height: 12rem; margin: 0; padding: 1.5rem; overflow: auto; font: .75rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre; }
.syn-portal-code-footer { border-top: 1px solid #344456; }
.syn-portal-feature-card,.syn-portal-stat-card { min-width: 0; border: 1px solid var(--syn-color-border); border-radius: 1rem; background: var(--syn-color-surface); box-shadow: 0 2px 8px rgb(15 23 42 / 4%); }
.syn-portal-feature-card { display: flex; flex-direction: column; padding: 1.5rem; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.syn-portal-feature-card:hover { transform: translateY(-3px); border-color: var(--syn-color-primary); box-shadow: 0 15px 35px rgb(15 23 42 / 9%); }
.syn-portal-feature-icon,.syn-portal-stat-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .75rem; color: var(--syn-color-primary); background: var(--syn-color-surface-muted); font-size: 1.2rem; }
.syn-portal-feature-card h3 { margin: 1.1rem 0 .5rem; color: var(--syn-color-text); font-size: 1.04rem; }
.syn-portal-feature-card p { flex: 1; margin: 0; color: var(--syn-color-text-muted); line-height: 1.65; }
.syn-portal-feature-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid var(--syn-color-border); font-size: .73rem; }
.syn-portal-feature-meta code { color: var(--syn-color-text-muted); overflow-wrap: anywhere; }
.syn-portal-feature-meta a { color: var(--syn-color-primary); font-weight: 700; text-decoration: none; }
.syn-portal-stat-card { display: grid; align-content: start; gap: .25rem; padding: 1.25rem; }
.syn-portal-stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--syn-color-text-muted); font-size: .73rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.syn-portal-stat-icon { width: 2rem; height: 2rem; font-size: .9rem; }
.syn-portal-stat-card strong { color: var(--syn-color-text); font-size: 1.65rem; line-height: 1.2; }
.syn-portal-stat-card small { color: var(--syn-color-primary); font-size: .72rem; }

.syn-template-synapse { --syn-font-family: "Plus Jakarta Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --syn-radius-card: .55rem; --syn-radius-control: .45rem; --syn-sidebar-width: 16rem; --syn-spacing-page-x: 2rem; --syn-spacing-page-y: 1.6rem; --syn-shadow-card: 0 2px 9px rgb(15 23 42 / 4%); --syn-sidebar-selected-bg: color-mix(in srgb, var(--syn-color-sidebar) 91%, var(--syn-color-text)); --syn-sidebar-icon-color:#0a79ad; --syn-sidebar-icon-active:#0f766e; font-size: .85rem; }
.syn-template-synapse[data-syn-scheme="emerald"] { --syn-color-primary:#059669; --syn-color-primary-hover:#047857; --syn-color-primary-active:#065f46; --syn-color-background:#f8fafc; --syn-color-surface-muted:#f0fdf4; --syn-color-text:#1e293b; --syn-color-text-muted:#64748b; --syn-color-border:#e2e8f0; --syn-color-border-strong:#cbd5e1; --syn-color-sidebar:#fff; --syn-color-sidebar-muted:#64748b; --syn-color-sidebar-active:#1e293b; --syn-accent-secondary:#0d9488; --syn-color-code:#0f172a; --syn-sidebar-icon-color:#0f8d86; --syn-sidebar-icon-active:#0f766e; }
.syn-template-synapse[data-syn-scheme="violet"] { --syn-color-sidebar:var(--syn-color-surface); --syn-color-sidebar-muted:var(--syn-color-text-muted); --syn-color-sidebar-active:var(--syn-color-text); --syn-accent-secondary:#a78bfa; --syn-color-code:#211d33; --syn-sidebar-icon-color:#8050a3; --syn-sidebar-icon-active:#a34f7e; }
.syn-template-synapse[data-syn-scheme="summerpastel"] { --syn-sidebar-icon-color:#9a5f74; --syn-sidebar-icon-active:#9a5f74; }
.syn-template-synapse[data-syn-scheme="citynight"] { --syn-font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --syn-shadow-card:0 8px 24px rgb(0 0 0 / 18%); --syn-shadow-dropdown:0 18px 38px rgb(0 0 0 / 40%); --syn-sidebar-icon-color:#68d7e6; --syn-sidebar-icon-active:#ff73ad; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-main,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-guest-shell { background-color: var(--syn-color-background); background-image: linear-gradient(to right,rgb(35 43 62 / 25%) 1px,transparent 1px),linear-gradient(to bottom,rgb(35 43 62 / 25%) 1px,transparent 1px); background-size: 40px 40px; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-brand-mark { color: var(--syn-color-on-primary); background: linear-gradient(135deg,var(--syn-neon-purple),var(--syn-neon-cyan)); box-shadow: 0 0 16px rgb(0 242 254 / 25%); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-brand-copy strong { text-shadow: 0 0 8px rgb(0 242 254 / 28%); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-topbar { background: rgb(15 20 28 / 94%); border-color: var(--syn-color-border); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-header-action-badge,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-brand-mark { color: var(--syn-color-on-primary); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-header-action-badge { background: var(--syn-neon-magenta); box-shadow: 0 0 12px rgb(255 0 127 / 30%); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-popover-panel { background: rgb(22 28 40 / 92%); border-color: var(--syn-color-border); backdrop-filter: blur(12px); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-popover-heading { color: var(--syn-color-text); background: var(--syn-night-card); border-bottom: 1px solid var(--syn-color-border); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-notification-icon { color: var(--syn-color-on-primary); background: var(--syn-neon-cyan); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-notification-icon-success { background: var(--syn-neon-green); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-notification-icon-warning { background: var(--syn-neon-amber); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-notification-icon-danger { color: var(--syn-color-text); background: #9f1239; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-account-item.is-danger { color: #fb7185; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-card,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-form-section,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-feature-card,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-card { background: rgb(22 28 40 / 82%); border-color: rgb(35 43 62 / 85%); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgb(0 0 0 / 12%); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-feature-card:hover,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-card:hover { border-color: rgb(0 242 254 / 48%); box-shadow: 0 0 20px rgb(0 242 254 / 8%); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-card strong { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-button-primary { background: linear-gradient(90deg,var(--syn-neon-cyan),#1672d6); box-shadow: 0 0 15px rgb(0 242 254 / 25%); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-button-primary:hover { background: linear-gradient(90deg,var(--syn-color-primary-hover),#438ded); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-feature-card:nth-child(4n+1),
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-card:nth-child(4n+1) { --syn-night-accent:var(--syn-neon-cyan); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-feature-card:nth-child(4n+2),
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-card:nth-child(4n+2) { --syn-night-accent:#ff4fa2; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-feature-card:nth-child(4n+3),
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-card:nth-child(4n+3) { --syn-night-accent:var(--syn-neon-amber); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-feature-card:nth-child(4n+4),
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-card:nth-child(4n+4) { --syn-night-accent:#b87dff; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-feature-icon,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-stat-icon { color: var(--syn-night-accent,var(--syn-neon-cyan)); background: color-mix(in srgb,var(--syn-night-accent,var(--syn-neon-cyan)) 10%,transparent); border: 1px solid color-mix(in srgb,var(--syn-night-accent,var(--syn-neon-cyan)) 30%,transparent); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-code-window { border-color: var(--syn-color-border-strong); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-code-toolbar,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-code-footer { border-color: var(--syn-color-border-strong); }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-code-toolbar b,
.syn-template-synapse[data-syn-scheme="citynight"] .syn-portal-code-status { color: var(--syn-neon-green); }
.syn-template-synapse[data-syn-scheme="summerpastel"] .syn-button-primary,
.syn-template-synapse[data-syn-scheme="summerpastel"] .syn-portal-brand-mark { color: var(--syn-color-primary); background: var(--syn-summer-butter); border: 1px solid var(--syn-color-border-strong); box-shadow: 0 5px 14px rgb(102 83 41 / 8%); }
.syn-template-synapse[data-syn-scheme="summerpastel"] .syn-button-primary:hover { color: var(--syn-color-primary-hover); background: #e7ddb4; }
.syn-template-synapse[data-syn-scheme="summerpastel"] .syn-portal-feature-card:nth-child(4n+2) .syn-portal-feature-icon,
.syn-template-synapse[data-syn-scheme="summerpastel"] .syn-portal-stat-card:nth-child(4n+2) .syn-portal-stat-icon { background: var(--syn-summer-blush); }
.syn-template-synapse[data-syn-scheme="summerpastel"] .syn-portal-feature-card:nth-child(4n+4) .syn-portal-feature-icon,
.syn-template-synapse[data-syn-scheme="summerpastel"] .syn-portal-stat-card:nth-child(4n+4) .syn-portal-stat-icon { background: var(--syn-summer-aqua); }
.syn-template-synapse .syn-topbar { position: sticky; top: 0; z-index: 60; min-height: 4rem; padding: .5rem 1.5rem; background: color-mix(in srgb,var(--syn-color-surface) 93%,transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--syn-color-border); box-shadow: none; }
.syn-template-synapse .syn-portal-topbar { gap: 1.2rem; }
.syn-portal-env { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; color: var(--syn-color-primary); background: var(--syn-color-surface-muted); border: 1px solid var(--syn-color-border); border-radius: .6rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.syn-portal-header-title { max-width: 13rem; overflow: hidden; color: var(--syn-color-text-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.syn-template-synapse .syn-portal-app-shell { min-height: calc(100dvh - var(--syn-topbar-height)); }
.syn-template-synapse .syn-main { min-height: calc(100dvh - var(--syn-topbar-height)); display: flex; flex-direction: column; }
.syn-template-synapse .syn-main > .syn-content-grid { flex: 1 0 auto; }
.syn-template-synapse .syn-main > .syn-footer { flex: none; margin-top: auto; }
.syn-template-synapse .syn-sidebar { color: var(--syn-color-sidebar-muted); background: var(--syn-color-sidebar); border-right: 1px solid var(--syn-color-border); box-shadow: 1px 0 8px rgb(15 23 42 / 3%); }
.syn-template-synapse .syn-sidebar-heading { position: relative; min-height: 0; height: 0; padding: 0; }
.syn-template-synapse .syn-sidebar-heading .syn-sidebar-toggle { position: absolute; z-index: 2; top: .55rem; right: -.5rem; }
.syn-sidebar-collapsed.syn-template-synapse .syn-sidebar-heading .syn-sidebar-toggle { top: .65rem; right: -1.7rem; }
.syn-template-synapse .syn-sidebar > .syn-navigation { padding-top: .55rem; }
.syn-template-synapse:not(.syn-sidebar-collapsed) .syn-sidebar > .syn-navigation > .syn-navigation-list > .syn-navigation-entry:first-child > .syn-nav-item,
.syn-template-synapse:not(.syn-sidebar-collapsed) .syn-sidebar > .syn-navigation > .syn-navigation-list > .syn-navigation-entry:first-child > .syn-nav-disclosure > .syn-nav-group { margin-right: 2.35rem; }
.syn-template-synapse .syn-sidebar .syn-navigation-children { background: var(--syn-color-surface-muted); }
.syn-template-synapse .syn-sidebar .syn-nav-back:hover { color: var(--syn-color-primary); background: var(--syn-color-surface); }
.syn-template-synapse .syn-sidebar-toggle { color: var(--syn-color-sidebar-muted); }
.syn-template-synapse .syn-sidebar-toggle:hover { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-template-synapse .syn-nav-item,.syn-template-synapse .syn-nav-group { border-radius: .75rem; font-size: .78rem; }
.syn-template-synapse .syn-sidebar .syn-nav-item:hover,.syn-template-synapse .syn-sidebar .syn-nav-group:hover { background: var(--syn-color-surface-muted); color: var(--syn-color-primary); }
.syn-template-synapse .syn-sidebar .syn-nav-item[aria-current],.syn-template-synapse .syn-sidebar .syn-nav-disclosure[open] > .syn-nav-group { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-template-synapse .syn-content { width: 100%; max-width: 100%; }
.syn-template-synapse .syn-button { min-height:2.05rem; padding:.38rem .7rem; font-size:.78rem; }
.syn-template-synapse .syn-table-actions .syn-button,.syn-template-synapse .syn-table td .syn-button { min-height:1.7rem; padding:.25rem .5rem; font-size:.7rem; }
.syn-template-synapse .syn-card,.syn-template-synapse .syn-form-section,.syn-template-synapse .syn-popover-panel,.syn-template-synapse .syn-portal-feature-card,.syn-template-synapse .syn-portal-stat-card { border-radius: var(--syn-radius-card); }
.syn-template-synapse .syn-content table th { color:#334155; background:#e9eef3; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-content table th { color:#e2e8f0; background:#273246; }
.syn-template-synapse .syn-list-card .syn-table th { color:#334155; background:#e9eef3; }
.syn-template-synapse[data-syn-scheme="citynight"] .syn-list-card .syn-table th { color:#e2e8f0; background:#273246; }
.syn-template-synapse .syn-guest-content { width: 100%; max-width: none; margin: 0; padding: 0; }
.syn-portal-guest-shell { min-height: 100dvh; background: var(--syn-color-background); }
.syn-portal-guest-content { width: 100%; padding: 0; }
.syn-layout-landing .syn-guest-shell { display: block; background: var(--syn-color-background); }
.syn-layout-landing .syn-guest-content { width: 100%; max-width: none; margin: 0; padding: 0; }
.syn-template-synapse .syn-footer { background: var(--syn-color-surface); }
/* Current page and its ancestor are distinct from transient disclosure state. */
.syn-sidebar .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group {
    color: var(--syn-color-primary);
    background: color-mix(in srgb, var(--syn-color-primary) 14%, var(--syn-color-sidebar));
    box-shadow: inset 3px 0 0 var(--syn-color-primary);
    font-weight: 700;
}
.syn-sidebar .syn-nav-group[aria-current] {
    color: var(--syn-color-primary);
    background: color-mix(in srgb, var(--syn-color-primary) 14%, var(--syn-color-sidebar));
}
.syn-sidebar-collapsed .syn-sidebar .syn-navigation-list > .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group {
    color: var(--syn-color-primary);
    background: color-mix(in srgb, var(--syn-color-primary) 18%, var(--syn-color-sidebar));
    box-shadow: inset 3px 0 0 var(--syn-color-primary);
}
.syn-navigation-horizontal .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group,
.syn-navigation-horizontal .syn-nav-group[aria-current],
.syn-navigation-horizontal .syn-nav-item[aria-current] {
    color: var(--syn-color-primary);
    background: color-mix(in srgb, var(--syn-color-primary) 12%, var(--syn-color-surface));
    box-shadow: inset 0 -3px 0 var(--syn-color-primary);
    font-weight: 700;
}
.syn-template-synapse .syn-sidebar .syn-nav-icon { color: var(--syn-sidebar-icon-color); }
.syn-template-synapse .syn-sidebar .syn-nav-item[aria-current] .syn-nav-icon,
.syn-template-synapse .syn-sidebar .syn-nav-group[aria-current] .syn-nav-icon,
.syn-template-synapse .syn-sidebar .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group .syn-nav-icon { color: var(--syn-sidebar-icon-active); }
.syn-template-synapse .syn-sidebar .syn-nav-item[aria-current],
.syn-template-synapse .syn-sidebar .syn-nav-group[aria-current],
.syn-template-synapse .syn-sidebar .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group {
    color: var(--syn-color-primary);
    background: var(--syn-sidebar-selected-bg);
    border: 0;
    box-shadow: none;
}
.syn-sidebar-collapsed.syn-template-synapse .syn-sidebar .syn-navigation-list > .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group {
    background: var(--syn-sidebar-selected-bg);
    border: 0;
    box-shadow: none;
}
.syn-template-synapse .syn-sidebar .syn-nav-item[aria-current]:hover,
.syn-template-synapse .syn-sidebar .syn-nav-group[aria-current]:hover,
.syn-template-synapse .syn-sidebar .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group:hover,
.syn-sidebar-collapsed.syn-template-synapse .syn-sidebar .syn-navigation-list > .syn-navigation-entry[data-syn-active-branch] > .syn-nav-disclosure > .syn-nav-group:hover {
    background: color-mix(in srgb, var(--syn-sidebar-selected-bg) 88%, var(--syn-color-primary));
    box-shadow: none;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .syn-template-synapse { --syn-spacing-page-x: 1.35rem; }
    .syn-template-synapse .syn-portal-topbar { padding-inline: 1.1rem; }
    .syn-template-synapse .syn-portal-header-title { display: none; }
}
@media (max-width: 767px) {
    .syn-template-synapse { --syn-spacing-page-x: 1rem; }
    .syn-template-synapse .syn-portal-topbar { gap: .55rem; padding-inline: .8rem; }
    .syn-template-synapse .syn-portal-topbar .syn-portal-brand-copy,.syn-template-synapse .syn-portal-env,.syn-template-synapse .syn-portal-header-title { display: none; }
    .syn-template-synapse .syn-portal-app-shell { min-height: calc(100dvh - var(--syn-topbar-height)); }
    .syn-template-synapse .syn-sidebar { top: 0; }
    .syn-template-synapse:not(.syn-sidebar-collapsed) .syn-sidebar > .syn-navigation > .syn-navigation-list > .syn-navigation-entry:first-child > .syn-nav-item,
    .syn-template-synapse:not(.syn-sidebar-collapsed) .syn-sidebar > .syn-navigation > .syn-navigation-list > .syn-navigation-entry:first-child > .syn-nav-disclosure > .syn-nav-group { margin-right: 0; }
    .syn-portal-code-toolbar,.syn-portal-code-footer { flex-wrap: wrap; }
}
/* Reusable component catalog: shared by all template families. */
/* Additional states of shared primitives. */
.syn-button-success{color:#fff;background:var(--syn-color-success)}
.syn-button-warning{color:#fff;background:var(--syn-color-warning)}
.syn-button-info{color:#fff;background:var(--syn-color-info)}
.syn-button-outline{color:var(--syn-color-primary);background:transparent;border:1px solid currentColor}
.syn-button-flat{color:var(--syn-color-primary);background:transparent;border-color:transparent}
.syn-button[aria-pressed=true]{outline:2px solid var(--syn-color-primary);outline-offset:2px}
.syn-button:disabled{opacity:.5;cursor:not-allowed}
.syn-switch-small .syn-switch-track{transform:scale(.8);transform-origin:left center;margin-right:-.4rem}
.syn-switch-large .syn-switch-track{transform:scale(1.2);transform-origin:left center;margin-right:.4rem}
.syn-switch input[aria-invalid=true]+.syn-switch-track{outline:2px solid var(--syn-color-danger);outline-offset:2px}
.syn-progress-tall progress{height:1.4rem}
.syn-progress-thin progress{height:.3rem}
.syn-progress-striped progress::-webkit-progress-value{background:repeating-linear-gradient(45deg,#ffffff30 0,#ffffff30 8px,transparent 8px,transparent 16px),var(--syn-color-primary);background-size:23px 23px;animation:syn-progress-stripes 1s linear infinite}
.syn-progress-striped progress::-moz-progress-bar{background:repeating-linear-gradient(45deg,#ffffff30 0,#ffffff30 8px,transparent 8px,transparent 16px),var(--syn-color-primary)}
@keyframes syn-progress-stripes{to{background-position:23px 0}}
.syn-tabs-fill [role=tab]{flex:1}
.syn-tabs-small [role=tab]{padding:.4rem .6rem;font-size:.8rem}
.syn-tabs-card{border:1px solid var(--syn-color-border);border-radius:var(--syn-radius-card)}
.syn-sortable li>span{min-width:0;overflow-wrap:anywhere}
.syn-sortable li>div{display:flex;flex-shrink:0;gap:.2rem}
.syn-tooltip[data-placement=bottom] [role=tooltip]{top:calc(100% + .5rem);bottom:auto}
.syn-tooltip[data-placement=right] [role=tooltip]{left:calc(100% + .5rem);bottom:0}
.syn-tooltip[data-placement=left] [role=tooltip]{left:auto;right:calc(100% + .5rem);bottom:0}
.syn-tooltip.is-dismissed [role=tooltip]{opacity:0}
.syn-icon{vertical-align:-.125em;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.syn-progress-striped progress::-webkit-progress-value{animation:none}}
.syn-textarea { resize: vertical; min-height: 6rem; }
.syn-control-sm { min-height: 1.9rem; padding: .3rem .5rem; font-size: .75rem; }
.syn-control-lg { min-height: 3.2rem; padding: .8rem 1rem; font-size: 1.05rem; }
.syn-control-inverted { background: var(--syn-color-surface-muted); border-color: transparent; }
.syn-input:disabled,.syn-select:disabled { opacity: .6; cursor: not-allowed; }
.syn-input[readonly] { background: var(--syn-color-surface-muted); }
.syn-field:has([disabled]),.syn-checkbox:has([disabled]),.syn-switch:has([disabled]) { color: var(--syn-color-text-muted); }
.syn-fieldset { display: grid; gap: 1rem; min-width: 0; border: 1px solid var(--syn-color-border); border-radius: var(--syn-radius-card); padding: 1rem; }
.syn-switch { display: inline-flex; align-items: center; gap: .6rem; position: relative; cursor: pointer; }
.syn-switch input { position: absolute; width: 2.5rem; height: 1.5rem; opacity: 0; }
.syn-switch-track { width: 2.5rem; height: 1.4rem; flex: none; background: var(--syn-color-border-strong); border-radius: 2rem; transition: background .2s; }
.syn-switch-track::after { content: ""; display: block; width: 1rem; height: 1rem; margin: .2rem; border-radius: 50%; background: var(--syn-color-surface); transition: transform .2s; }
.syn-switch input:checked + .syn-switch-track { background: var(--syn-color-primary); }
.syn-switch input:checked + .syn-switch-track::after { transform: translateX(1.1rem); }
.syn-switch input:focus-visible + .syn-switch-track { outline: 2px solid var(--syn-color-primary); outline-offset: 3px; }
.syn-switch input:disabled + .syn-switch-track { opacity: .5; }
.syn-switch-square .syn-switch-track,.syn-switch-square .syn-switch-track::after { border-radius: .2rem; }
.syn-switch-small { font-size: .75rem; }
.syn-switch-large { font-size: 1.1rem; }
.syn-range input { width: 100%; accent-color: var(--syn-color-primary); }
.syn-range output { float: right; font-variant-numeric: tabular-nums; }
.syn-disclosure { border: 1px solid var(--syn-color-border); border-radius: var(--syn-radius-card); margin-block: .4rem; background: var(--syn-color-surface); }
.syn-disclosure summary { padding: .8rem 1rem; cursor: pointer; font-weight: 600; }
.syn-disclosure[open] > summary { color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-disclosure-body { padding: 1rem; }
.syn-progress { margin-block: .6rem; }
.syn-progress-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; }
.syn-progress progress { width: 100%; height: .7rem; accent-color: var(--syn-color-primary); border: 0; border-radius: 1rem; overflow: hidden; }
.syn-progress progress::-webkit-progress-bar { background: var(--syn-color-surface-muted); }
.syn-progress progress::-webkit-progress-value { background: var(--syn-color-primary); }
.syn-tone-success { --syn-color-primary: var(--syn-color-success); }
.syn-tone-warning { --syn-color-primary: var(--syn-color-warning); }
.syn-tone-danger { --syn-color-primary: var(--syn-color-danger); }
.syn-tone-info { --syn-color-primary: var(--syn-color-info); }
.syn-dialog { width: min(36rem,calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; color: var(--syn-color-text); background: var(--syn-color-surface); border: 1px solid var(--syn-color-border); border-radius: var(--syn-radius-card); box-shadow: var(--syn-shadow-dropdown); }
.syn-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.syn-dialog > header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--syn-color-border); }
.syn-dialog h3 { margin: 0; }
.syn-dialog-body,.syn-dialog > form { padding: 1rem; }
.syn-dialog > form { text-align: right; }
.syn-dialog-large { width: min(56rem,calc(100vw - 2rem)); }
.syn-dialog-small { width: min(22rem,calc(100vw - 2rem)); }
.syn-confirm-description { margin:0 0 1rem; }
.syn-confirm-password-field .syn-field { grid-template-columns:minmax(9rem, .85fr) minmax(0, 1.15fr); align-items:center; column-gap:1rem; }
.syn-confirm-password-field .syn-help,.syn-confirm-password-field .syn-error { grid-column:2; }
.syn-confirm-actions { display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.syn-password-dialog .syn-button,.syn-table .syn-password-dialog .syn-button { min-height:2.1rem; padding:.4rem .8rem; font-size:.8rem; align-self:auto; }
@media(max-width:575px) { .syn-confirm-password-field .syn-field { grid-template-columns:1fr; } .syn-confirm-password-field .syn-error { grid-column:1; } .syn-list-filter-row > .syn-field { flex-basis:100%; } }
.syn-dropdown { display: inline-block; position: relative; }
.syn-dropdown > summary { list-style: none; cursor: pointer; }
.syn-dropdown > summary::-webkit-details-marker { display: none; }
.syn-dropdown-content { position: absolute; inset: calc(100% + .3rem) auto auto 0; z-index: 20; width: min(16rem,calc(100vw - 3rem)); padding: .5rem; background: var(--syn-color-surface-elevated); border: 1px solid var(--syn-color-border); border-radius: var(--syn-radius-card); box-shadow: var(--syn-shadow-dropdown); }
.syn-dropdown-content > a,.syn-dropdown-content > button { display: block; width: 100%; padding: .6rem; color: var(--syn-color-text); background: transparent; border: 0; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.syn-dropdown-content > :is(a,button):hover { background: var(--syn-color-surface-muted); }
.syn-tabs [role=tablist] { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--syn-color-border); }
.syn-tabs [role=tab] { flex: none; padding: .75rem 1rem; color: var(--syn-color-text-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font: inherit; cursor: pointer; }
.syn-tabs [aria-selected=true] { color: var(--syn-color-primary); border-bottom-color: var(--syn-color-primary); }
.syn-tabs [role=tabpanel] { padding: 1rem; }
.syn-tabs-pills [aria-selected=true] { color: var(--syn-color-on-primary); background: var(--syn-color-primary); border-radius: .4rem; }
.syn-dual-list { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: .75rem; align-items: center; }
.syn-dual-actions { display: grid; gap: .5rem; }
.syn-dual-list output { grid-column: 1 / -1; }
.syn-tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.syn-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border: 1px solid var(--syn-color-border); background: var(--syn-color-surface-muted); border-radius: 2rem; }
.syn-tag button { color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; }
.syn-upload-drop { display: grid; gap: .7rem; padding: 1.6rem; border: 2px dashed var(--syn-color-border-strong); border-radius: var(--syn-radius-card); text-align: center; }
.syn-upload-drop.is-dragover { border-color: var(--syn-color-primary); background: var(--syn-color-surface-muted); }
.syn-upload-drop input { max-width: 100%; }
.syn-upload ul { padding: 0; list-style: none; }
.syn-upload li { display: flex; gap: .75rem; justify-content: space-between; padding: .6rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--syn-color-border); }
.syn-wizard { display: grid; gap: 1rem; }
.syn-wizard fieldset { min-width: 0; display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--syn-color-border); }
.syn-wizard fieldset[hidden] { display: none; }
.syn-wizard-steps { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.syn-wizard-steps li { padding: .6rem .9rem; background: var(--syn-color-surface-muted); border-radius: .4rem; }
.syn-wizard-steps [aria-current] { color: var(--syn-color-on-primary); background: var(--syn-color-primary); }
.syn-wizard-vertical { grid-template-columns: minmax(7rem,.3fr) minmax(0,1fr); }
.syn-wizard-vertical .syn-wizard-steps { flex-direction: column; }
.syn-wizard-vertical .syn-actions { grid-column: 2; }
.syn-editor { display: grid; gap: .6rem; }
.syn-editor [role=toolbar] { display: flex; gap: .4rem; flex-wrap: wrap; }
.syn-editor-preview { padding: 1rem; min-height: 6rem; border: 1px solid var(--syn-color-border); border-radius: .4rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.syn-sample-art { display: block; width: 100%; height: auto; max-height: 22rem; border-radius: var(--syn-radius-card); }
.syn-carousel { min-width: 0; }
.syn-carousel [data-syn-slide] { text-align: center; }
.syn-carousel .syn-actions { justify-content: center; align-items: center; }
.syn-sortable { list-style: none; padding: 0; }
.syn-sortable li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .8rem; margin-block: .4rem; background: var(--syn-color-surface-muted); border: 1px solid var(--syn-color-border); border-radius: .4rem; }
.syn-sortable button { min-width: 2rem; min-height: 2rem; color: inherit; background: var(--syn-color-surface); border: 1px solid var(--syn-color-border); border-radius: .3rem; cursor: pointer; }
.syn-tooltip { position: relative; display: inline-block; }
.syn-tooltip [role=tooltip] { position: absolute; left: 0; bottom: calc(100% + .5rem); width: max-content; max-width: min(16rem,70vw); z-index: 25; padding: .5rem .7rem; color: var(--syn-color-text); background: var(--syn-color-surface-elevated); border: 1px solid var(--syn-color-border); border-radius: .4rem; box-shadow: var(--syn-shadow-dropdown); opacity: 0; pointer-events: none; }
.syn-tooltip:hover [role=tooltip],.syn-tooltip:focus-within [role=tooltip] { opacity: 1; }
.syn-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 3px solid var(--syn-color-border); border-top-color: var(--syn-color-primary); border-radius: 50%; animation: syn-spin .8s linear infinite; }
.syn-spinner-grow { background: var(--syn-color-primary); border: 0; animation: syn-grow 1s ease-in-out infinite; }
.syn-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes syn-spin { to { transform: rotate(360deg); } }
@keyframes syn-grow { 50% { opacity: .2; transform: scale(.55); } }
@media (prefers-reduced-motion: reduce) { .syn-spinner { animation: none; } }
@media (max-width: 540px) { .syn-dual-list { grid-template-columns: minmax(0,1fr); } .syn-dual-actions { display: flex; } .syn-wizard-vertical { grid-template-columns: minmax(0,1fr); } .syn-wizard-vertical .syn-actions { grid-column: 1; } }
/* Layout-aware tab composition: one active content panel, not stacked cards. */
.syn-tab-group{min-width:0;background:var(--syn-color-surface);border:1px solid var(--syn-color-border);border-radius:var(--syn-radius-card)}
.syn-tab-group>.syn-tab-panels{min-width:0}
.syn-tab-group>.syn-tab-panels>[role=tabpanel]{padding:1.5rem}
.syn-tab-group>.syn-tab-panels>[role=tabpanel]>h2:first-child{margin-top:0}
.syn-tab-group>.syn-tab-panels>[role=tabpanel][hidden]{display:none!important}
.syn-tab-group>[role=tablist]{margin:0;min-width:0;align-self:stretch}
.syn-tab-group.syn-tabs-fill>[role=tablist]>[role=tab]{flex:1}
.syn-tabs-left,.syn-tabs-right{display:grid;grid-template-columns:minmax(11rem,25%) minmax(0,1fr)}
.syn-tabs-left>[role=tablist],.syn-tabs-right>[role=tablist]{flex-direction:column;gap:0;border-bottom:0;border-right:1px solid var(--syn-color-border);overflow:visible}
.syn-tabs-left>[role=tablist]>[role=tab],.syn-tabs-right>[role=tablist]>[role=tab]{text-align:left;white-space:normal;padding:1.15rem 1.5rem;border-bottom:1px solid var(--syn-color-border);border-left:3px solid transparent}
.syn-tabs-left>[role=tablist]>[aria-selected=true],.syn-tabs-right>[role=tablist]>[aria-selected=true]{background:var(--syn-color-surface-muted);border-left-color:var(--syn-color-primary);font-weight:700}
.syn-tabs-right{grid-template-columns:minmax(0,1fr) minmax(11rem,25%)}
.syn-tabs-right>[role=tablist]{grid-column:2;grid-row:1;border-right:0;border-left:1px solid var(--syn-color-border)}
.syn-tabs-right>.syn-tab-panels{grid-column:1;grid-row:1}
.syn-tabs-bottom{display:flex;flex-direction:column}
.syn-tabs-bottom>[role=tablist]{order:2;border-bottom:0;border-top:1px solid var(--syn-color-border)}
.syn-tabs-bottom>[role=tablist]>[role=tab]{border-bottom:0;border-top:2px solid transparent}
.syn-tabs-bottom>[role=tablist]>[aria-selected=true]{border-top-color:var(--syn-color-primary)}
.syn-tab-group>[role=tablist]>[role=tab]:hover{color:var(--syn-color-primary);background:var(--syn-color-surface-muted)}
.syn-tab-group>[role=tablist]>[role=tab]:focus-visible{outline:2px solid var(--syn-color-primary);outline-offset:-3px}
.syn-profile-photo{display:flex;align-items:center;gap:1.5rem;padding-block:0 1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--syn-color-border)}
.syn-profile-photo-preview{display:grid;place-items:center;flex:none;width:5rem;height:5rem;background:var(--syn-color-surface-muted);color:var(--syn-color-primary);font-size:1.6rem;font-weight:700;overflow:hidden}
.syn-profile-photo-preview img{width:100%;height:100%;object-fit:cover}
.syn-profile-photo-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}
.syn-profile-photo:focus-within .syn-profile-photo-preview{outline:2px solid var(--syn-color-primary);outline-offset:2px}
.syn-composition-columns{display:grid;grid-template-columns:minmax(0,3fr) minmax(14rem,1fr);gap:1.5rem;align-items:start}
.syn-composition-columns-left{grid-template-columns:minmax(14rem,1fr) minmax(0,3fr)}
.syn-composition-columns>*{min-width:0}
.syn-composition-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(16rem,1fr);gap:1rem;overflow-x:auto;padding-bottom:1rem;align-items:start}
@media(max-width:767px){
 .syn-tabs-left,.syn-tabs-right{display:block}
 .syn-tabs-left>[role=tablist],.syn-tabs-right>[role=tablist]{flex-direction:row;overflow-x:auto;border:0;border-bottom:1px solid var(--syn-color-border)}
 .syn-tabs-left>[role=tablist]>[role=tab],.syn-tabs-right>[role=tablist]>[role=tab]{white-space:nowrap;padding:.8rem 1rem;border-left:0;border-bottom:2px solid transparent}
 .syn-tabs-left>[role=tablist]>[aria-selected=true],.syn-tabs-right>[role=tablist]>[aria-selected=true]{border-bottom-color:var(--syn-color-primary)}
 .syn-tab-group>.syn-tab-panels>[role=tabpanel]{padding:1rem}
 .syn-profile-photo{align-items:flex-start;gap:1rem}.syn-profile-photo-preview{width:4rem;height:4rem}
 .syn-composition-columns,.syn-composition-columns-left{grid-template-columns:minmax(0,1fr)}
}
/* Filter list dipisahkan dari aksi; keduanya tetap membungkus di viewport kecil. */
.syn-list-card-header-actions{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.syn-list-card-filters{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap}
.syn-list-card-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.syn-confirm-dialog{max-width:32rem;padding:1.5rem}
.syn-confirm-dialog p{line-height:1.6;color:var(--syn-color-text-muted)}
.syn-confirm-dialog .syn-actions{justify-content:flex-end;margin-top:1.25rem}

/* Komposisi pengaturan lintas fitur; seluruh warna mengikuti token template aktif. */
.syn-inherited-switch{display:flex;flex-direction:column;align-items:center;gap:.28rem;font-size:.76rem;min-width:6.5rem}
.syn-inherited-switch .syn-switch>span:last-child:empty{display:none}
.syn-inherited-switch small{color:var(--syn-color-text-muted);line-height:1.25}
.syn-inherit-reset{border:0;background:none;padding:.1rem .2rem;color:var(--syn-color-primary);font:inherit;font-size:.75rem;cursor:pointer;text-decoration:underline;text-underline-offset:.15rem}
.syn-inherited-switch .syn-field-dirty,.syn-field-dirty{color:var(--syn-color-warning);font-size:.75rem}
.syn-settings-search{margin-bottom:1rem}
.syn-settings-matrix-wrap{overflow-x:auto;border:1px solid var(--syn-color-border);border-radius:var(--syn-radius-card)}
.syn-settings-matrix{width:100%;border-collapse:collapse;min-width:45rem;background:var(--syn-color-surface)}
.syn-settings-matrix th,.syn-settings-matrix td{padding:.85rem 1rem;border-bottom:1px solid var(--syn-color-border);vertical-align:middle;text-align:left}
.syn-settings-matrix thead th{background:color-mix(in srgb,var(--syn-color-primary) 12%,var(--syn-color-surface));font-size:.76rem;letter-spacing:.025em;text-transform:uppercase}
.syn-settings-matrix .syn-settings-channel{width:8.5rem;text-align:center}
.syn-settings-matrix .syn-settings-channel svg{display:block;width:1.35rem;height:1.35rem;margin:0 auto .35rem;color:var(--syn-color-primary);fill:none;stroke:currentColor;stroke-width:1.7}
.syn-settings-matrix .syn-settings-module th{background:var(--syn-color-surface-muted);padding:.8rem 1rem}
.syn-settings-module p,.syn-settings-copy p{margin:.25rem 0 0;color:var(--syn-color-text-muted);font-size:.86rem;font-weight:400;line-height:1.45}
.syn-settings-copy{min-width:18rem}
.syn-settings-copy strong{font-size:.92rem}
.syn-settings-unavailable{font-size:.76rem;color:var(--syn-color-text-muted)}
.syn-settings-retention{margin-top:1rem}
.syn-settings-retention summary{cursor:pointer;font-weight:600}
.syn-settings-retention .syn-list-filter-row{margin-top:1rem}
.syn-settings-savebar{position:sticky;bottom:1rem;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;margin-top:1rem;background:var(--syn-color-surface);border:1px solid var(--syn-color-border);border-radius:var(--syn-radius-card);box-shadow:0 .2rem 1rem rgb(0 0 0 / .08)}
.syn-settings-savebar [data-syn-dirty-status]{font-size:.88rem;font-weight:600}
.syn-settings-savebar[hidden],.syn-inherit-reset[hidden],.syn-field-dirty[hidden],.syn-settings-matrix [hidden]{display:none}
/* Feed ringkas untuk notifikasi/aktivitas tanpa kerangka tabel data. */
.syn-feed-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.75rem 0 1rem}
.syn-feed-toolbar .syn-list-filter-row{margin:0;gap:.65rem;flex:1 1 36rem;justify-content:flex-end}
.syn-feed-toolbar .syn-list-filter-row>.syn-field{flex:0 1 8rem}
.syn-feed-toolbar .syn-list-filter-row>.syn-field:has([name="type"]){flex-basis:12rem}
.syn-feed-toolbar .syn-list-filter-row>.syn-field:has([name="per_page"]){flex-basis:5.5rem}
.syn-feed-toolbar .syn-field{font-size:.82rem}
.syn-feed-toolbar .syn-input,.syn-feed-toolbar .syn-select{min-height:2.2rem;padding:.35rem .65rem}
.syn-feed-heading{font-size:.95rem;margin:1.1rem 0 .5rem;color:var(--syn-color-text)}
.syn-feed-group{display:grid;gap:.4rem}
.syn-feed-item{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--syn-color-border);border-radius:var(--syn-radius-card);background:var(--syn-color-surface);min-width:0}
.syn-feed-item.is-unread{background:color-mix(in srgb,var(--syn-color-primary) 5%,var(--syn-color-surface));border-left:3px solid color-mix(in srgb,var(--syn-color-primary) 55%,var(--syn-color-border))}
.syn-feed-symbol{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--syn-color-surface-muted);color:var(--syn-color-text-muted)}
.syn-feed-symbol svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8}
.syn-feed-item.is-unread .syn-feed-symbol{color:var(--syn-color-primary);background:color-mix(in srgb,var(--syn-color-primary) 10%,var(--syn-color-surface))}
.syn-feed-main{flex:1;min-width:0}
.syn-feed-title{display:block;color:var(--syn-color-text);text-decoration:none;font-size:.92rem;font-weight:500}
.syn-feed-item.is-unread .syn-feed-title{font-weight:650}
.syn-feed-preview{margin:.2rem 0 .3rem;color:var(--syn-color-text-muted);font-size:.83rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.syn-feed-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .75rem;font-size:.73rem;color:var(--syn-color-text-muted)}
.syn-feed-state{color:var(--syn-color-primary)}
.syn-feed-actions{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.syn-feed-actions .syn-button{font-size:.75rem;padding:.35rem .6rem;min-height:2rem}
.syn-feed-actions form{margin:0}
.syn-feed-empty{text-align:center;padding:2rem 1rem;color:var(--syn-color-text-muted)}
@media(max-width:767px){.syn-feed-item{flex-wrap:wrap;gap:.65rem;padding:.75rem}.syn-feed-actions{width:100%;padding-left:2.9rem;justify-content:flex-start}.syn-settings-savebar{bottom:.5rem;flex-wrap:wrap}.syn-feed-toolbar form{width:100%}.syn-feed-toolbar .syn-list-filter-row>.syn-field{flex:1 1 8rem}}