:root {
    color-scheme: light;
    --brand-primary: #8018E8;
    --brand-secondary: #D318C6;
    --brand-accent: #2050F8;
    --brand-warm: #F85050;
    --on-brand: #FFFFFF;
    --surface: #FFFFFF;
    --surface-subtle: #F7F5FB;
    --surface-raised: #FFFFFF;
    --text: #211B2D;
    --text-muted: #6A6472;
    --border: #E5DFEA;
    --focus: #2050F8;
    --shadow: rgba(39, 27, 60, 0.10);
    --state-success-text: #276749;
    --state-success-subtle: #E5F5EB;
    --state-success-border: #3D8B61;
    --state-success-indicator: #2B8A57;
    --state-success-glow: rgba(43, 122, 79, 0.24);
    --state-attention-border: #BD463E;
    --state-attention-indicator: #C4473F;
    --state-attention-glow: rgba(189, 70, 62, 0.28);
    --state-danger: #7C2D24;
    --state-danger-strong: #8A3B32;
    --state-danger-subtle: #FAE8E5;
    --state-warning: #7A5410;
    --state-warning-subtle: #FFF3D6;
    --private-footer-height: 3rem;
    --private-footer-safe-height: calc(var(--private-footer-height) + env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--text);
    background: var(--surface-subtle);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

body.private-app { display: flex; min-height: 100dvh; flex-direction: column; }

.shell { width: min(100% - 2rem, 68rem); margin-inline: auto; padding-block: 4rem 2rem; }
.hero { max-width: 40rem; }
.eyebrow { margin: 0 0 .75rem; color: var(--brand-primary); font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(3rem, 18vw, 6.5rem); line-height: .95; letter-spacing: -.06em; }
.lead { margin: 1.5rem 0; max-width: 34rem; color: var(--text-muted); font-size: clamp(1.1rem, 4.8vw, 1.45rem); }
.status { display: inline-flex; margin: .5rem 0 0; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); font-weight: 700; }
.principles { display: grid; gap: .75rem; margin-top: 4rem; }
.principles article { display: grid; gap: .2rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-raised); }
.principles span { color: var(--text-muted); }
.link { color: var(--brand-primary); font-weight: 700; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.9rem; padding: .75rem 1.1rem; border: 1px solid var(--brand-primary); border-radius: .75rem; color: var(--on-brand); background: var(--brand-primary); font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.button.secondary, .button.provider-google { color: var(--text); border-color: var(--border); background: var(--surface-raised); }
.button.full { width: 100%; margin-block: 1rem; }
.button.small { min-height: 2.65rem; padding: .55rem .8rem; }
.narrow { max-width: 42rem; }
.panel { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-raised); box-shadow: 0 .75rem 2rem var(--shadow); }
.page-title { font-size: clamp(2rem, 11vw, 3.5rem); line-height: 1; }
.lead.compact { margin: 0; font-size: 1.05rem; }
.account-name { margin: 0; color: var(--brand-primary); font-size: 1.2rem; font-weight: 750; }
.notice { padding: 1rem; border-radius: .75rem; background: var(--surface-subtle); color: var(--text-muted); }
.notice-error { color: var(--state-danger); background: var(--state-danger-subtle); }
.legal-update-notice a { color: var(--brand-primary); font-weight: 750; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.topbar a { color: var(--text); font-weight: 750; }
.brand-lockup { display: inline-flex; max-width: 100%; align-items: center; gap: .55rem; color: var(--text); font-weight: 800; line-height: 1; text-decoration: none; }
.brand-mark { display: block; width: 2rem; height: 2rem; flex: 0 0 auto; object-fit: contain; }
.brand-name { min-width: 0; overflow-wrap: anywhere; letter-spacing: -.02em; }
.brand-hero .brand-lockup { gap: clamp(.7rem, 3vw, 1.1rem); }
.brand-hero .brand-mark { width: clamp(3rem, 15vw, 5.5rem); height: clamp(3rem, 15vw, 5.5rem); }
.text-button { padding: .4rem; border: 0; color: var(--brand-primary); background: none; font: inherit; font-weight: 700; cursor: pointer; }
.section-head { margin-bottom: 1.5rem; }
.user-list { display: grid; gap: .8rem; }
.user-card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-raised); overflow-wrap: anywhere; }
.user-card h2 { margin: .6rem 0 .15rem; font-size: 1.15rem; }
.user-card p, .user-card small { margin: 0; color: var(--text-muted); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge { display: inline-flex; padding: .2rem .5rem; border-radius: 999px; background: var(--surface-subtle); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
.badge-active { color: var(--state-success-text); background: var(--state-success-subtle); }
.badge-suspended { color: var(--state-danger-strong); background: var(--state-danger-subtle); }
.badge-attention { color: var(--state-warning); background: var(--state-warning-subtle); }
.connection-row { display: grid; gap: .75rem; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.connection-row-base { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem; min-width: 0; }
.connection-primary { display: flex; min-width: 0; min-height: 3rem; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .75rem; color: #fff; }
.connection-primary--instagram, .connection-connect-action--instagram { background: linear-gradient(135deg, #a72c76, #d93675 62%, #e66f3c); }
.connection-primary--facebook, .connection-connect-action--facebook { background: #1877f2; }
.connection-provider-icon { display: block; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; object-fit: contain; }
.connection-primary .connection-provider-icon, .connection-connect-action .connection-provider-icon { filter: brightness(0) invert(1); }
.connection-primary--facebook .connection-provider-icon, .connection-connect-action--facebook .connection-provider-icon { filter: none; }
.connection-identity { min-width: 0; margin: 0; overflow: hidden; color: inherit; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.connection-status { display: grid; width: 1.55rem; height: 1.55rem; flex: 0 0 1.55rem; margin-inline-start: auto; place-items: center; border: 2px solid rgb(255 255 255 / .82); border-radius: 50%; color: #fff; font-size: .82rem; font-weight: 850; line-height: 1; }
.connection-status--connected { background: var(--state-success-indicator); }
.connection-status--attention { background: var(--state-attention-indicator); }
.connection-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .25rem; }
.connection-actions form { margin: 0; }
.connection-connect-form { margin: 0; }
.connection-connect-action { display: flex; width: 100%; min-height: 3rem; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 0; border-radius: .75rem; color: #fff; font: inherit; font-weight: 750; text-align: left; white-space: nowrap; cursor: pointer; }
.connection-connect-action:hover { filter: brightness(.96); }
.connection-connect-action.is-disabled { cursor: default; opacity: .72; }
.connection-icon-action, .connection-disconnect { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: .75rem; color: var(--text-muted); background: var(--surface-raised); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.connection-reconnect { color: var(--brand-primary); }
.connection-pending { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; min-width: 0; padding: .65rem .75rem; border: 1px solid var(--border); border-inline-start: .2rem solid var(--brand-primary); border-radius: .7rem; background: var(--surface-subtle); }
.connection-pending-summary { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.connection-pending-copy { margin: 0; color: var(--text-muted); font-size: .95rem; overflow-wrap: anywhere; }
.connection-pending-copy strong { color: var(--text); }
.connection-pending-role { display: block; margin-top: .1rem; color: var(--text-muted); }
.connection-pending-form { margin: 0; }
.connection-pending-button { min-height: 2.75rem; padding: .55rem .85rem; }
.connection-page-form { width: 100%; }
.connection-pending-action { display: flex; justify-content: flex-end; }
.page-options { display: grid; gap: .35rem; margin: 0 0 .55rem; padding: 0; border: 0; min-width: 0; }
.page-options legend { margin-bottom: .1rem; padding: 0; color: var(--text); font-weight: 750; }
.page-options .connection-pending-copy { margin-bottom: .2rem; }
.page-option { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface-raised); cursor: pointer; overflow-wrap: anywhere; }
.page-option input { flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.logout-form { margin-top: 1.5rem; }
.private-shell { width: min(100% - 1rem, 62rem); flex: 1 0 auto; padding-top: calc(5.75rem + env(safe-area-inset-top)); padding-bottom: calc(var(--private-footer-safe-height) + 1rem); }
.private-shell .topbar { position: sticky; z-index: 5; top: 0; margin-inline: -.5rem; padding: .75rem .5rem; background: color-mix(in srgb, var(--surface-subtle) 94%, transparent); backdrop-filter: blur(.5rem); }
.private-shell .topbar > span { color: var(--text-muted); font-size: .9rem; overflow-wrap: anywhere; text-align: right; }
.account-tools { display: grid; justify-items: end; gap: .45rem; min-width: 0; }
.account-switcher { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .35rem; width: min(100%, 25rem); }
.account-switcher label { grid-column: 1 / -1; color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.account-switcher select,
.account-create input { width: 100%; min-width: 0; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .7rem; color: var(--text); background: var(--surface-raised); font: inherit; }
.account-create { position: relative; max-width: 100%; }
.account-create summary { min-height: 2.75rem; padding: .65rem .25rem; color: var(--brand-primary); font-weight: 750; cursor: pointer; }
.account-create form { display: grid; gap: .45rem; width: min(22rem, calc(100vw - 2rem)); padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-raised); box-shadow: 0 .75rem 2rem var(--shadow); }
.account-create label { color: var(--text-muted); font-size: .85rem; font-weight: 700; }
.account-entitlement-state { align-self: center; color: var(--text-muted); font-size: .85rem; }
.app-header { position: fixed; z-index: 30; inset: 0 0 auto; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--brand-primary); background: var(--surface-raised); box-shadow: 0 .25rem 1rem rgba(30, 22, 48, .06); }
.app-header-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; width: min(100% - 1rem, 62rem); min-height: 4.5rem; margin-inline: auto; }
.app-header .brand-lockup { flex: 0 0 auto; }
.app-header-account-context { display: flex; min-width: 0; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: .45rem; }
.app-header-account { min-width: 0; flex: 0 1 auto; overflow: hidden; color: var(--text-muted); font-size: .9rem; font-weight: 750; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-trigger, .commercial-indicator { height: 2.75rem; border-radius: .7rem; }
.commercial-indicator { display: inline-flex; min-width: 0; max-width: 100%; flex: 0 1 auto; align-items: center; justify-content: center; padding: .55rem .7rem; overflow: hidden; border: 1px solid currentColor; font-size: .7rem; font-weight: 750; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.commercial-indicator--success { color: var(--state-success-text); background: var(--state-success-subtle); }
.commercial-indicator--warning { color: var(--state-warning); background: var(--state-warning-subtle); }
.commercial-indicator--danger { color: var(--state-danger); background: var(--state-danger-subtle); }
.commercial-indicator--neutral { color: var(--text-muted); border-color: var(--border); background: var(--surface-subtle); }
.commercial-indicator-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commercial-indicator-label--compact { display: none; }
.account-menu { position: relative; min-width: 0; flex: 0 1 auto; }
.account-menu-trigger { display: flex; min-width: 0; max-width: min(42vw, 16rem); align-items: center; gap: .35rem; padding: .55rem .7rem; border: 1px solid var(--border); color: var(--text); background: var(--surface-raised); font-weight: 750; cursor: pointer; list-style: none; }
.account-menu-trigger::-webkit-details-marker { display: none; }
.account-menu-trigger::after { content: "▾"; flex: 0 0 auto; color: var(--brand-primary); }
.account-menu-trigger span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-panel { position: absolute; z-index: 35; top: calc(100% + .4rem); right: 0; display: grid; width: min(20rem, calc(100vw - 1rem)); padding: .4rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-raised); box-shadow: 0 .75rem 2rem var(--shadow); }
.account-menu-panel form { margin: 0; }
.account-menu-item { display: block; width: 100%; min-height: 2.75rem; padding: .6rem .7rem; border: 0; border-radius: .55rem; color: var(--text); background: transparent; font: inherit; font-weight: 650; text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.account-menu-item:hover, .account-menu-item:focus-visible { background: var(--surface-subtle); }
.account-menu-item.is-active { color: var(--brand-primary); background: var(--surface-subtle); }
.account-menu-add { margin-top: .25rem; border-top: 1px solid var(--border); border-radius: 0 0 .55rem .55rem; color: var(--brand-primary); }
.account-create-fallback summary { padding: .65rem .7rem; color: var(--brand-primary); font-weight: 750; cursor: pointer; }
.account-create-fallback form { display: grid; gap: .5rem; padding: .6rem; }
.account-create-fallback input { width: 100%; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .65rem; font: inherit; }
.shell-menu-trigger { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: .7rem; color: var(--brand-primary); background: var(--surface-raised); font: inherit; font-size: 1.35rem; cursor: pointer; }
.notification-menu { position: relative; }
.notification-menu > summary { list-style: none; }
.notification-menu > summary::-webkit-details-marker { display: none; }
.notification-menu-trigger { position: relative; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: .7rem; color: var(--brand-primary); background: var(--surface-raised); cursor: pointer; }
.notification-menu-trigger:hover, .notification-menu-trigger:focus-visible { background: var(--surface-subtle); }
.notification-bell { display: block; width: 1.35rem; height: 1.35rem; }
.notification-count { position: absolute; top: -.3rem; right: -.35rem; display: inline-flex; min-width: 1.3rem; height: 1.3rem; align-items: center; justify-content: center; padding-inline: .25rem; border: 2px solid var(--surface-raised); border-radius: 999px; color: var(--on-brand); background: var(--state-danger); font-size: .62rem; font-weight: 850; line-height: 1; }
.notification-menu-panel { position: absolute; z-index: 40; top: calc(100% + .4rem); right: 0; display: grid; width: min(24rem, calc(100vw - 1rem)); max-height: min(70dvh, 34rem); overflow: auto; padding: .4rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-raised); box-shadow: 0 .75rem 2rem var(--shadow); }
.notification-menu-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .55rem; border-bottom: 1px solid var(--border); }
.notification-menu-head form, .notification-item-actions form { margin: 0; }
.notification-read-all, .notification-mark-read { padding: .25rem; border: 0; color: var(--brand-primary); background: transparent; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
.notification-list { display: grid; gap: .2rem; padding-top: .25rem; }
.notification-item { display: grid; gap: .45rem; padding: .65rem; border-radius: .65rem; }
.notification-item.is-unread { background: var(--surface-subtle); box-shadow: inset .2rem 0 0 var(--brand-primary); }
.notification-item-copy { display: grid; gap: .18rem; min-width: 0; }
.notification-item-copy strong, .notification-item-copy p, .notification-item-copy small { margin: 0; overflow-wrap: anywhere; }
.notification-item-copy p, .notification-item-copy small { color: var(--text-muted); }
.notification-item-copy p { font-size: .88rem; line-height: 1.35; }
.notification-item-copy small { font-size: .72rem; }
.notification-item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.notification-open { padding: .25rem; border: 0; color: var(--brand-primary); background: transparent; font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; }
.notification-empty { margin: 0; padding: .9rem .65rem; color: var(--text-muted); font-size: .88rem; }

.shell-user-menu { position: absolute; z-index: 35; top: calc(100% + .4rem); right: 0; width: min(16rem, calc(100vw - 1rem)); padding: .4rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-raised); box-shadow: 0 .75rem 2rem var(--shadow); }
.shell-user-menu[hidden] { display: none; }
.shell-user-menu form { margin: 0; }
.shell-menu-item { display: flex; width: 100%; min-height: 2.75rem; align-items: center; padding: .6rem .7rem; border: 0; border-radius: .55rem; color: var(--text); background: transparent; font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.shell-menu-item:hover, .shell-menu-item:focus-visible { background: var(--surface-subtle); }
.shell-menu-message { justify-content: space-between; gap: .75rem; }
.message-nav-count { display: inline-flex; min-width: 1.45rem; height: 1.45rem; align-items: center; justify-content: center; padding-inline: .3rem; border-radius: 999px; color: var(--on-brand); background: var(--state-danger); font-size: .7rem; font-weight: 850; }
.account-heading { display: grid; gap: .55rem; padding: 1rem 0 1.5rem; }
.account-title-row { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.account-title { min-width: 0; overflow-wrap: anywhere; }
.account-rename-trigger { display: inline-flex; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: .65rem; color: var(--brand-primary); background: transparent; font: inherit; font-size: 1.15rem; cursor: pointer; }
.account-rename-form { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; }
.account-rename-form:not([hidden]) { display: grid; }
.account-rename-form input { width: 100%; min-width: 0; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .7rem; color: var(--text); background: var(--surface-raised); font: inherit; }
.account-rename-feedback { min-height: 1.5rem; margin: 0; color: var(--text-muted); font-size: .9rem; }
.account-create-dialog { width: min(25rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--border); border-radius: 1rem; color: var(--text); background: var(--surface-raised); box-shadow: 0 1rem 3rem var(--shadow); overflow: auto; }
.account-create-dialog::backdrop { background: rgba(28, 22, 40, .48); }
.account-create-dialog form { display: grid; gap: .75rem; padding: 1.25rem; }
.account-create-dialog h2 { margin: 0; font-size: 1.35rem; }
.account-create-dialog label { color: var(--text-muted); font-weight: 700; }
.account-create-dialog input { width: 100%; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .7rem; font: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.admin-user-list, .admin-incident-list { display: grid; gap: 1rem; }
.admin-incident-list { margin-top: 2.5rem; }
.admin-user-card, .admin-incident-card { display: grid; gap: .6rem; min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-raised); box-shadow: 0 .35rem 1rem var(--shadow); }
.admin-user-identity { min-width: 0; }
.admin-user-status-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; }
.admin-user-identity h2 { margin: .4rem 0 .15rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.admin-user-identity p, .admin-user-identity small { display: block; margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.admin-user-actions { display: grid; align-content: start; min-width: 0; }
.admin-user-actions form { margin: 0; }
.admin-setting-row { display: flex; min-width: 0; align-items: center; gap: .65rem; }
.admin-setting-label { min-width: 0; font-weight: 700; }
.admin-entitlement-action { justify-content: space-between; }
.admin-switch-form { margin: 0; }
.admin-switch { display: inline-flex; width: 2.875rem; min-width: 2.875rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; color: inherit; background: transparent; cursor: pointer; }
.admin-switch-track { position: relative; display: block; width: 2.6rem; height: 1.45rem; border: 2px solid var(--border); border-radius: 999px; background: var(--surface-subtle); transition: background-color .15s ease, border-color .15s ease; }
.admin-switch-knob { position: absolute; top: 50%; left: .16rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--text-muted); transform: translateY(-50%); transition: transform .15s ease, background-color .15s ease; }
.admin-switch[aria-checked="true"] .admin-switch-track { border-color: var(--state-success-border); background: var(--state-success-subtle); }
.admin-switch[aria-checked="true"] .admin-switch-knob { background: var(--state-success-indicator); transform: translate(1.15rem, -50%); }
.admin-switch:hover .admin-switch-track { border-color: var(--brand-primary); }
.admin-account-list { display: grid; gap: .55rem; min-width: 0; padding-top: .85rem; border-top: 1px solid var(--border); }
.admin-account-list h3 { margin: 0; font-size: 1rem; }
.admin-account-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: .5rem; padding: .45rem .65rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface-subtle); }
.admin-account-name { display: grid; min-width: 0; }
.admin-account-name strong { overflow-wrap: anywhere; }
.admin-account-name small { color: var(--text-muted); }
.admin-account-empty { margin: 0; color: var(--text-muted); font-size: .85rem; }
.admin-account-action { margin: 0; white-space: nowrap; }
.admin-commercial-scope { margin: 0 0 1rem; color: var(--text-muted); font-size: .9rem; }
.admin-commercial { display: grid; grid-column: 1 / -1; gap: .7rem; min-width: 0; padding-top: .65rem; border-top: 1px solid var(--border); }
.admin-commercial-summary { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .4rem .65rem; }
.admin-commercial-summary small { color: var(--text-muted); }
.admin-commercial-renewal { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem; margin: 0; padding: .65rem; border: 1px solid var(--state-success-border); border-radius: .7rem; background: var(--state-success-subtle); }
.admin-commercial-renewal span { color: var(--text-muted); font-size: .9rem; }
.admin-commercial-form { display: grid; gap: .7rem; min-width: 0; margin: 0; }
.admin-commercial-form fieldset { display: grid; gap: .55rem; min-width: 0; margin: 0; padding: .75rem; border: 1px solid var(--border); border-radius: .7rem; }
.admin-commercial-form legend { padding-inline: .25rem; font-weight: 800; }
.admin-commercial-form label { min-width: 0; color: var(--text); }
.admin-commercial-choice { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .35rem; }
.admin-commercial-choice small, .admin-trial-choice > label:not(:first-child), .admin-trial-choice > span { color: var(--text-muted); font-size: .9rem; }
.admin-trial-days { width: 4.5rem; min-width: 0; min-height: 2.5rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: .6rem; color: var(--text); background: var(--surface-raised); font: inherit; }
.admin-commercial-form .button { justify-self: start; }
.admin-activation-form { padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.admin-commercial-blocked { margin: 0; color: var(--state-danger); font-size: .9rem; font-weight: 700; }
.commercial-status--valid, .commercial-status--permanent { color: var(--state-success-text); border-color: var(--state-success-border); background: var(--state-success-subtle); }
.commercial-status--expired { color: var(--state-danger); border-color: var(--state-attention-border); background: var(--state-danger-subtle); }
.commercial-status--not-configured { color: var(--text-muted); background: var(--surface-raised); }
.admin-incident-card h3 { margin: .6rem 0 .15rem; overflow-wrap: anywhere; }
.admin-incident-card p, .admin-incident-card small { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.content-cycle-navigation { position: relative; display: grid; gap: .55rem; min-width: 0; }
.content-cycle-selector { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-width: 0; align-items: center; gap: .35rem; padding: .45rem .55rem .45rem .8rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface-raised); box-shadow: 0 .25rem .8rem var(--shadow); }
.content-cycle-current-name, .content-cycle-option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.cycle-status { display: inline-flex; width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; align-items: center; justify-content: center; border: 2px solid currentColor; border-radius: 50%; font-size: .72rem; font-weight: 850; line-height: 1; }
.cycle-status--ready { color: var(--state-success-indicator); background: var(--state-success-subtle); }
.cycle-status--attention { color: var(--state-attention-indicator); background: var(--state-danger-subtle); }
.content-cycle-icon-action { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: .65rem; color: var(--brand-primary); background: transparent; font: inherit; font-size: 1.05rem; cursor: pointer; list-style: none; }
.content-cycle-icon-action::-webkit-details-marker { display: none; }
.content-cycle-icon-action:hover, .content-cycle-icon-action:focus-visible { background: var(--surface-subtle); }
.content-cycle-menu { position: static; min-width: 0; }
.content-cycle-menu-trigger { display: flex; width: 100%; min-width: 0; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: .35rem; padding: 0; border: 0; color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; list-style: none; }
.content-cycle-menu-trigger::-webkit-details-marker { display: none; }
.content-cycle-menu-trigger:hover, .content-cycle-menu-trigger:focus-visible { color: var(--brand-primary); }
.content-cycle-menu-chevron { display: inline-flex; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; align-items: center; justify-content: center; border-radius: .65rem; color: var(--brand-primary); }
.content-cycle-menu-trigger:hover .content-cycle-menu-chevron, .content-cycle-menu-trigger:focus-visible .content-cycle-menu-chevron { background: var(--surface-subtle); }
.content-cycle-menu-panel { position: absolute; z-index: 24; top: calc(100% + .4rem); right: 0; width: min(24rem, calc(100vw - 2rem)); padding: .4rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-raised); box-shadow: 0 .75rem 2rem var(--shadow); }
.content-cycle-menu-panel form { margin: 0; }
.content-cycle-option { display: flex; width: 100%; min-width: 0; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .65rem; border: 0; border-radius: .55rem; color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.content-cycle-option:hover, .content-cycle-option:focus-visible, .content-cycle-option.is-current { background: var(--surface-subtle); }
.content-cycle-option.is-current { color: var(--brand-primary); cursor: default; }
.content-cycle-add { margin-top: .25rem; border-top: 1px solid var(--border); color: var(--brand-primary); font-weight: 750; }
.content-cycle-limit { margin: .35rem .65rem; color: var(--text-muted); font-size: .85rem; }
.content-cycle-rename-form { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; }
.content-cycle-rename-form:not([hidden]) { display: grid; }
.content-cycle-rename-form input, .content-cycle-dialog input, .content-cycle-create-fallback input { width: 100%; min-width: 0; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .7rem; color: var(--text); background: var(--surface-raised); font: inherit; }
.content-cycle-feedback { min-height: 1.35rem; margin: 0; color: var(--text-muted); font-size: .9rem; }
.content-cycle-dialog { width: min(25rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--border); border-radius: 1rem; color: var(--text); background: var(--surface-raised); box-shadow: 0 1rem 3rem var(--shadow); overflow: auto; }
.content-cycle-dialog::backdrop { background: rgba(28, 22, 40, .48); }
.content-cycle-dialog form { display: grid; gap: .75rem; padding: 1.25rem; }
.content-cycle-dialog h2 { margin: 0; font-size: 1.35rem; }
.content-cycle-dialog label, .content-cycle-create-fallback label { color: var(--text-muted); font-weight: 700; }
.content-cycle-create-fallback summary { color: var(--brand-primary); font-weight: 750; cursor: pointer; }
.content-cycle-create-fallback form { display: grid; gap: .5rem; padding-top: .5rem; }
.private-section { padding-block: 2.25rem; scroll-margin-top: 4rem; border-top: 1px solid var(--border); }
.private-section:first-of-type { padding-top: 1rem; border-top: 0; }
.private-section-head { margin-bottom: 1rem; }
.private-title, .private-section h2 { margin: 0; font-size: clamp(1.8rem, 9vw, 2.6rem); line-height: 1.05; letter-spacing: -.035em; }
.private-section > .private-section-title { margin: 0; color: var(--brand-primary); font-size: clamp(1.2rem, 4.5vw, 1.45rem); font-weight: 800; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
.connections-panel, .cycle-workspace-panel { display: grid; gap: .75rem; min-width: 0; margin-top: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-subtle); }
.connections-grid { display: grid; gap: .65rem; }
.cycle-workspace-panel > .cycle-scoped-fragment { display: grid; gap: .75rem; min-width: 0; }
.cycle-workspace-panel .private-section { padding: 0; border-top: 0; }
.cycle-workspace-panel .scheduling-section { padding-top: .75rem; border-top: 1px solid var(--border); }
.section-message { margin: 0; color: var(--text); font-size: 1.05rem; font-weight: 650; }
.scheduling-section { display: grid; gap: .5rem; }
.scheduling-section.is-disabled { color: var(--text-muted); }
.scheduling-placeholder { min-height: 6rem; margin-top: .75rem; border: 1px dashed var(--border); border-radius: 1rem; background: var(--surface-raised); }
.scheduling-section.is-disabled .scheduling-placeholder { opacity: .55; background: repeating-linear-gradient(135deg, var(--surface-raised), var(--surface-raised) .65rem, var(--surface-subtle) .65rem, var(--surface-subtle) 1.3rem); }
.private-footer { position: fixed; z-index: 25; inset: auto 0 0; display: flex; width: 100%; min-height: var(--private-footer-safe-height); align-items: flex-start; justify-content: center; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--on-brand) 32%, transparent); color: var(--on-brand); background: var(--brand-primary); font-size: .9rem; line-height: 1.35; text-align: center; }
.private-footer small { min-width: 0; }
.private-footer a { color: var(--on-brand); font-weight: 750; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .16em; }
.private-footer a:hover { text-decoration-thickness: .14em; }
.private-footer a:focus-visible { outline-color: var(--on-brand); }
pre { overflow-wrap: anywhere; white-space: pre-wrap; }

:where(a, button, input, select, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
.page-option:has(input:focus-visible),
.library-add-button:has(input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

@media (min-width: 48rem) {
    .shell { padding-block: 7rem 3rem; }
    .principles { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .panel { padding: 2rem; }
    .user-card { grid-template-columns: 1fr auto; align-items: center; }
    .admin-user-card { padding: 1.25rem; }
}

@media (max-width: 32rem) {
    .private-shell .topbar { align-items: flex-start; }
    .account-tools { flex: 1 1 auto; width: min(100%, 18rem); }
    .account-switcher { grid-template-columns: 1fr; }
    .account-switcher label { grid-column: auto; }
    .account-switcher .button { width: 100%; }
    .app-header .brand-name { display: none; }
    .app-header-account-context { width: 100%; max-width: calc(100vw - 10rem); gap: .3rem; }
    .account-menu { max-width: 8.5rem; }
    .account-menu-trigger { max-width: 100%; padding-inline: .55rem; }
    .commercial-indicator { flex: 0 1 auto; max-width: 11rem; font-size: .68rem; }
    .commercial-indicator-label--full { display: none; }
    .commercial-indicator-label--compact { display: inline; }

    .notification-menu-panel {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 4.9rem);
        right: .5rem;
        left: .5rem;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - env(safe-area-inset-top) - 5.4rem);
        box-sizing: border-box;
    }
    .account-rename-form { grid-template-columns: 1fr 1fr; }
    .account-rename-form input { grid-column: 1 / -1; }
    .content-cycle-rename-form { grid-template-columns: 1fr 1fr; }
    .content-cycle-rename-form input { grid-column: 1 / -1; }
    .connection-provider { gap: .5rem; }
    .connection-provider-icon { width: 2rem; height: 2rem; flex-basis: 2rem; }
    .connection-identity { font-size: .85rem; }
}

.notice-compact { position: relative; display: grid; gap: .5rem; padding: .6rem 2.8rem .6rem .8rem; }
.notice-compact-text { min-width: 0; line-height: 1.6rem; }
.notice-details summary { position: absolute; top: .55rem; right: .65rem; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--brand-primary); background: var(--surface-raised); font-size: .85rem; font-weight: 800; font-style: italic; line-height: 1; list-style: none; cursor: pointer; }
.notice-details summary::-webkit-details-marker { display: none; }
.notice-details summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.notice-details p { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.connection-standalone-dialog { width: min(25rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--border); border-radius: 1rem; color: var(--text); background: var(--surface-raised); box-shadow: 0 1rem 3rem var(--shadow); overflow: auto; }
.connection-standalone-dialog::backdrop { background: rgba(28, 22, 40, .48); }
.connection-standalone-body { display: grid; gap: .75rem; padding: 1.25rem; }
.connection-standalone-body h2 { margin: 0; font-size: 1.35rem; }
.connection-standalone-body p { margin: 0; color: var(--text-muted); }
.connection-standalone-url { width: 100%; min-width: 0; min-height: 2.75rem; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: .7rem; color: var(--text); background: var(--surface-subtle); font: inherit; font-size: .9rem; }
.connection-standalone-feedback { min-height: 1.1rem; font-size: .9rem; }
.connection-standalone-actions { flex-wrap: wrap; }