:root {
    color-scheme: light;
    --bg: var(--restap-bg);
    --surface: var(--restap-surface);
    --surface-soft: var(--restap-surface-soft);
    --line: var(--restap-border);
    --line-strong: var(--restap-border-strong);
    --text: var(--restap-text);
    --muted: var(--restap-muted);
    --primary: var(--restap-accent);
    --primary-dark: var(--restap-accent-dark);
    --primary-soft: var(--restap-accent-soft);
    --danger: var(--restap-danger);
    --warning: #8a5b00;
    --radius: .9rem;
    --radius-small: var(--restap-radius-sm);
    --control-height: var(--restap-control-height);
    --shadow: 0 1px 2px rgba(16, 24, 40, .025), 0 2px 8px rgba(16, 24, 40, .035);
    --shadow-raised: 0 .75rem 2rem rgba(16, 24, 40, .09);
}

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

html,
body { min-height: 100%; }

body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 85% -10%, rgba(99, 102, 241, .07), transparent 25rem),
        var(--bg);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-rendering: auto;
    -webkit-font-smoothing: auto;
    font-size: 1rem;
}

button,
input,
select,
textarea { font: inherit; }

a { color: inherit; }

.apps-summary {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 0 0 auto;
    padding: .5rem .65rem;
    border: 1px solid #c7d2fe;
    border-radius: .7rem;
    color: var(--primary-dark);
    background: linear-gradient(135deg, #f5f3ff, var(--primary-soft));
}

.apps-summary strong {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .55rem;
    color: #fff;
    background: var(--primary);
    font-size: .95rem;
}

.apps-summary span { font-size: .82rem; font-weight: 700; }

.eyebrow {
    margin: 0 0 .2rem;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: .72rem;
}

.app-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .85rem;
    min-height: 13rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.app-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    content: "";
    opacity: .88;
}

.app-card:hover,
.app-card:focus-visible {
    color: var(--text);
    border-color: #a5b4fc;
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
}

.app-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.app-icon {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid #d9ddff;
    border-radius: .78rem;
    color: var(--primary);
    background: linear-gradient(145deg, #fff, var(--primary-soft));
}

.app-icon svg,
.card-action svg,
.alert-symbol svg,
.alert-close svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-icon svg { width: 1.35rem; height: 1.35rem; }

.app-card-copy { align-self: start; }

.app-card h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
}

.app-card p {
    margin: .28rem 0 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}

.tag,
.optional-label {
    justify-self: start;
    padding: .28rem .52rem;
    border-radius: 999px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: .78rem;
    font-weight: 700;
}

.card-action {
    display: flex;
    align-items: center;
    gap: .48rem;
    min-height: 2.5rem;
    padding: .42rem .68rem;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-small);
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: .875rem;
    font-weight: 700;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.card-action-arrow { margin-left: auto; transition: transform 140ms ease; }

.app-card:hover .card-action,
.app-card:focus-visible .card-action {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
}

.app-card:hover .card-action-arrow,
.app-card:focus-visible .card-action-arrow { transform: translateX(2px); }

.panel,
.empty-state,
.auth-card {
    padding: .75rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.data-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.data-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.75rem;
    padding: .58rem .85rem;
    border-bottom: 1px solid var(--line);
}

.data-card-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
}

.data-card-header p {
    margin: .1rem 0 0;
    color: var(--muted);
    font-size: .84rem;
}

.count-badge {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border: 1px solid #d9ddff;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: .8rem;
    font-weight: 800;
}

.data-card-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.panel h1,
.panel h2,
.panel h3,
.auth-card h1,
.empty-state h2 { color: var(--text); }

.panel h1,
.panel h2,
.auth-card h1,
.empty-state h2 {
    margin: 0 0 .25rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.panel h3 {
    margin: 0 0 .55rem;
    font-size: 1rem;
    font-weight: 700;
}

.panel > p,
.empty-state p,
.auth-card > p { font-size: .9rem; }

.auth-shell {
    width: min(26rem, 100%);
    margin: clamp(1rem, 7vh, 4rem) auto 0;
}

.auth-card { padding: 1.1rem; }

.auth-card form { margin-top: .8rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.field {
    display: grid;
    gap: .28rem;
    min-width: 0;
}

.field-wide { grid-column: 1 / -1; }

label,
.field-label {
    color: #34434b;
    font-size: .875rem;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: .38rem .62rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-small);
    font-size: .925rem;
}

textarea { min-height: 5rem; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--restap-color-brand);
    box-shadow: var(--restap-focus-ring);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--restap-color-brand); outline-offset: 1px; }

.checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
}

.checkbox input {
    width: 1rem;
    height: 1rem;
    min-height: 0;
    margin-top: .08rem;
    flex: 0 0 auto;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-height: var(--control-height);
    padding: .38rem .72rem;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    color: #fff;
    background: var(--primary);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.button:hover,
.button:focus-visible { color: #fff; background: var(--primary-dark); }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-secondary { color: var(--text); background: #fff; border-color: var(--line-strong); }
.button-secondary:hover { color: var(--text); background: var(--surface-soft); }
.button-danger { background: var(--danger); }
.button-small { min-height: 2.15rem; padding: .34rem .62rem; font-size: .82rem; }

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .45rem;
    margin-top: .75rem;
}

.alert,
.validation-summary-errors {
    margin-bottom: .8rem;
    padding: .65rem .75rem;
    border: 1px solid;
    border-radius: .68rem;
    font-size: .875rem;
    line-height: 1.4;
}

.alert-dismissible,
.alert-persistent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .58rem;
    transition: opacity 180ms ease, transform 180ms ease;
}

.alert-symbol { display: grid; place-items: center; }
.alert-message { min-width: 0; }

.alert-close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    color: currentColor;
    background: transparent;
    cursor: pointer;
    opacity: .72;
}

.alert-close:hover,
.alert-close:focus-visible { background: rgba(15, 23, 42, .07); opacity: 1; }
.alert-closing { opacity: 0; transform: translateY(-.25rem); }
.alert-warning { color: #6f4e00; border-color: #e7c96e; background: #fffae9; }

.alert-action {
    padding: .35rem .55rem;
    border-radius: .48rem;
    color: inherit;
    background: rgba(255, 255, 255, .62);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.alert-action:hover,
.alert-action:focus-visible { background: #fff; }

.alert-success { color: #0d5b45; border-color: #a7dcca; background: #ecf9f4; }
.alert-info { color: #17536b; border-color: #afd8e8; background: #eff9fc; }
.alert-error,
.validation-summary-errors { color: #842519; border-color: #f2b8b1; background: #fff1ef; }
.field-validation-error { color: var(--danger); font-size: .8rem; }

.table-wrap {
    overflow-x: auto;
    padding: 0;
}

table { width: 100%; border-collapse: collapse; font-size: .875rem; }

.data-card .table-wrap { max-height: max(14rem, calc(100dvh - 14rem)); overflow: auto; }

th,
td {
    padding: .48rem .62rem;
    border-bottom: 1px solid #e8edef;
    text-align: left;
    vertical-align: middle;
}

th {
    color: #687981;
    background: var(--surface-soft);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table td { height: 2.8rem; }
.data-table .number-cell { text-align: right; font-variant-numeric: tabular-nums; }

tbody tr:hover { background: #f8faf9; }
tbody tr:last-child td { border-bottom: 0; }

.muted { color: var(--muted); }
.status-active { color: #087a55; font-weight: 700; }
.status-disabled { color: var(--danger); font-weight: 700; }
.status-pending { color: var(--warning); font-weight: 700; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    width: max-content;
    padding: .26rem .5rem;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}

.status-badge::before {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.status-badge.status-active { background: #ecfdf3; }
.status-badge.status-disabled { background: #fff1f0; }
.status-badge.status-pending { background: #fff8e7; }
.status-badge.status-info { color: #175cd3; background: #eff8ff; }
.status-badge.status-neutral { color: #475467; background: #f2f4f7; }

.stack { display: grid; gap: .5rem; }

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: .65rem;
}

.permission-group {
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--surface-soft);
}

.permission-list { display: grid; gap: .48rem; }

.permission-list-inline {
    grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
    gap: .65rem 1rem;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .45rem;
}

.disclosure-card { padding: 0; }
.disclosure-card > summary,
.record-summary {
    list-style: none;
    cursor: pointer;
}

.disclosure-card > summary::-webkit-details-marker,
.record-summary::-webkit-details-marker { display: none; }

.disclosure-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.55rem;
    padding: .55rem .85rem;
    border-radius: var(--radius);
}

.disclosure-card > summary:hover { background: var(--surface-soft); }
.disclosure-card > summary:focus-visible,
.record-summary:focus-visible { outline: 3px solid rgba(79, 70, 229, .18); outline-offset: -3px; }

.disclosure-heading { display: grid; gap: .15rem; min-width: 0; }
.disclosure-title { color: var(--text); font-size: 1rem; font-weight: 750; }
.disclosure-description { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.disclosure-action,
.record-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--primary);
    font-size: .8rem;
    font-weight: 750;
    white-space: nowrap;
}

.disclosure-action::after,
.record-action::after {
    width: .42rem;
    height: .42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-.1rem);
    transition: transform 150ms ease;
}

.disclosure-card[open] > summary .disclosure-action::after,
.record-disclosure[open] > summary .record-action::after { transform: rotate(225deg) translate(-.1rem, -.05rem); }

.disclosure-content {
    padding: .8rem .85rem;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfcff, #fff 4rem);
}

.context-note {
    margin: 0 0 .9rem;
    padding: .65rem .75rem;
    border-left: 3px solid #a5b4fc;
    border-radius: 0 .55rem .55rem 0;
    color: #475467;
    background: #f5f7ff;
    font-size: .85rem;
    line-height: 1.45;
}

.data-list-header,
.record-summary {
    display: grid;
    grid-template-columns: minmax(15rem, 1.7fr) minmax(9rem, 1fr) 7.5rem 7rem;
    align-items: center;
    gap: 1rem;
}

.data-list-header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 2.2rem;
    padding: .35rem .85rem;
    color: #667085;
    background: var(--surface-soft);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.record-disclosure { border-top: 1px solid #edf0f5; }
.data-list-header + .record-disclosure { border-top: 0; }
.record-summary { min-height: 3.45rem; padding: .45rem .85rem; }
.record-summary:hover { background: #fafbfe; }
.record-disclosure[open] > .record-summary { background: #f8f9ff; }

.record-row {
    display: grid;
    grid-template-columns: minmax(15rem, 1.7fr) minmax(9rem, 1fr) 7.5rem 7rem;
    align-items: center;
    gap: 1rem;
    min-height: 3.35rem;
    margin: .16rem .35rem;
    padding: .42rem .5rem;
    border-radius: .68rem;
}

.record-row:nth-child(odd) { background: #fafbfe; }
.record-row:hover { background: #f5f7ff; }

.record-identity {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.record-identity > span:last-child { display: grid; min-width: 0; }
.record-identity strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.record-identity small { overflow: hidden; margin-top: .15rem; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }

.record-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 1px solid #d9ddff;
    border-radius: .7rem;
    color: var(--primary-dark);
    background: linear-gradient(145deg, #fff, var(--primary-soft));
    font-size: .72rem;
    font-weight: 800;
}

.record-secondary {
    overflow: hidden;
    color: #475467;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-mobile-label { display: none; }

.record-action { justify-self: end; }
.record-action-button {
    min-height: 2.4rem;
    padding: .35rem .5rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.record-action-button::after { transform: rotate(-45deg); }
.record-action-button:hover,
.record-action-button:focus-visible { color: var(--primary-dark); }
.record-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr);
    gap: 1rem;
    padding: .8rem .85rem;
    border-top: 1px solid var(--line);
    background: #fbfcfe;
}

.record-content-single { display: block; }
.record-section { min-width: 0; }
.record-section + .record-section { padding-left: 1rem; border-left: 1px solid var(--line); }
.record-section h3 { margin: 0 0 .65rem; font-size: .85rem; }
.record-actions { display: grid; gap: .8rem; }
.record-actions form { margin: 0; }
.empty-table-message { margin: 0; padding: 2rem 1rem; color: var(--muted); text-align: center; font-size: .88rem; }

.backup-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.backup-stack > .data-card { grid-column: 1 / -1; }
.backup-stack > .data-card .table-wrap { max-height: max(12rem, calc(100dvh - 23rem)); }

.configuration-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.25rem;
    padding: .7rem .85rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.configuration-card > div { min-width: 0; }
.configuration-card-label {
    display: block;
    margin-bottom: .12rem;
    color: var(--primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.configuration-card h2 { margin: 0; font-size: .95rem; }
.configuration-card p { margin: .12rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }

.data-list {
    max-height: max(14rem, calc(100dvh - 18rem));
    overflow: auto;
    scrollbar-gutter: stable;
}

.users-card .data-list,
.roles-card .data-list { max-height: max(16rem, calc(100dvh - 13rem)); }

.roles-card .record-summary {
    min-height: 3.35rem;
    margin: .16rem .35rem;
    padding: .42rem .5rem;
    border-radius: .68rem;
    cursor: default;
}

.roles-card .record-summary:nth-child(odd) { background: #fafbfe; }
.roles-card .record-summary:hover { background: #f5f7ff; }

.modal-dialog {
    width: min(54rem, calc(100% - 2rem));
    max-width: none;
    max-height: 88dvh;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .24);
}

.modal-dialog-wide { width: min(68rem, calc(100% - 2rem)); }
.modal-dialog-confirm { width: min(28rem, calc(100% - 2rem)); }

.modal-dialog::backdrop {
    background: rgba(15, 23, 42, .46);
    backdrop-filter: blur(3px);
}

.modal-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: 88dvh;
    margin: 0;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .95rem 1.1rem .85rem;
    background: #fff;
    box-shadow: 0 1px 0 rgba(227, 231, 239, .85);
}

.modal-header > div { min-width: 0; flex: 1; }
.modal-header h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.018em; }
.modal-header p:not(.eyebrow) { margin: .12rem 0 0; color: var(--muted); font-size: .84rem; }
.modal-header .eyebrow { margin-bottom: .1rem; }

.modal-header > .modal-header-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: max-content;
    flex: 0 0 auto;
}

.modal-user-header { align-items: center; }
.modal-user-header .status-badge { margin-left: auto; }

.modal-avatar {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .78rem;
    font-size: .82rem;
}

.modal-close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: .58rem;
    color: var(--muted);
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible { color: var(--text); background: var(--surface-soft); }

.modal-body {
    min-height: 0;
    padding: .85rem;
    overflow: auto;
    background: #f6f7fb;
}

.modal-section {
    padding: .85rem;
    border-radius: .82rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .045);
}

.modal-section + .modal-section { margin-top: .65rem; }
.modal-section-heading { margin-bottom: .65rem; }
.modal-section-heading h3 { margin: 0; font-size: .92rem; }
.modal-section-heading p { margin: .12rem 0 0; color: var(--muted); font-size: .8rem; }

.modal-form-grid { gap: .65rem; }

.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.choice-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.choice-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    opacity: 0;
}

.choice-chip span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.15rem;
    padding: .36rem .65rem;
    border-radius: .62rem;
    color: #475467;
    background: #f2f4f7;
    font-size: .83rem;
    font-weight: 650;
}

.choice-chip span::before {
    display: grid;
    place-items: center;
    width: .95rem;
    height: .95rem;
    border-radius: .3rem;
    color: transparent;
    background: #fff;
    box-shadow: inset 0 0 0 1px #cfd6e2;
    content: "✓";
    content: "✓" / "";
    font-size: .7rem;
}

.choice-chip input:checked + span {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.choice-chip input:checked + span::before {
    color: #fff;
    background: var(--primary);
    box-shadow: none;
}

.choice-chip:has(input:focus-visible) span { outline: 2px solid var(--restap-color-brand); outline-offset: 2px; }
.choice-chip input:disabled + span { opacity: .72; cursor: default; }

.permission-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: .6rem;
}

.permission-cluster {
    min-width: 0;
    padding: .75rem;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}

.permission-cluster h3 { margin: 0 0 .55rem; font-size: .86rem; }
.permission-choice-grid { display: flex; flex-wrap: wrap; gap: .38rem; }

.setting-toggle {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 3.15rem;
    padding: .58rem .68rem;
    border-radius: .68rem;
    background: var(--surface-soft);
    cursor: pointer;
}

.setting-toggle input {
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
}
.setting-toggle span { display: grid; gap: .08rem; }
.setting-toggle strong { font-size: .84rem; }
.setting-toggle small { color: var(--muted); font-size: .75rem; }

.callback-box-compact { border: 0; }
.drive-connection-section .drive-actions { padding-top: 0; border-top: 0; }
.recovery-modal-section { min-height: 9rem; }

.backup-settings-dialog .modal-body { padding: .55rem; }

.backup-settings-form {
    display: grid;
    grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr);
    gap: .55rem;
    align-items: start;
}

.backup-settings-form .modal-section { padding: .68rem; }
.backup-settings-form .modal-section + .modal-section { margin-top: 0; }
.backup-settings-form .modal-section-heading { margin-bottom: .5rem; }
.backup-settings-form .form-grid { gap: .5rem; }
.backup-settings-form .setting-toggle { min-height: 2.65rem; padding: .42rem .55rem; }
.backup-settings-form .field { gap: .2rem; }
.backup-settings-form input { min-height: 2.25rem; }

.backup-settings-form .callback-box-compact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .16rem .55rem;
    padding: .48rem .55rem;
}

.backup-settings-form .callback-box-compact code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backup-settings-form .callback-box-compact small { grid-column: 1 / -1; }

.backup-settings-dialog .drive-connection-section {
    display: grid;
    grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: .65rem;
    margin-top: .55rem;
    padding: .58rem .68rem;
}

.backup-settings-dialog .drive-connection-section .modal-section-heading { margin: 0; }
.backup-settings-dialog .drive-actions { justify-content: flex-end; margin-top: 0; }
.role-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.role-form .choice-grid { flex: 1; }
.section-actions { display: flex; justify-content: flex-end; flex: 0 0 auto; }

.account-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.account-action-card,
.compact-disclosure {
    min-width: 0;
    padding: .7rem;
    border-radius: .72rem;
    background: var(--surface-soft);
}

.account-action-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.account-action-card strong,
.compact-disclosure strong { display: block; font-size: .84rem; }
.account-action-card p,
.compact-disclosure small { display: block; margin: .12rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.account-action-card form { flex: 0 0 auto; }

.compact-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    list-style: none;
    cursor: pointer;
}

.compact-disclosure > summary::-webkit-details-marker { display: none; }
.compact-disclosure[open] > summary .disclosure-action::after { transform: rotate(225deg) translate(-.1rem, -.05rem); }

.password-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .5rem;
    margin-top: .65rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .72rem 1rem;
    background: #fff;
    box-shadow: 0 -1px 0 rgba(227, 231, 239, .85);
}

.modal-footer-simple { padding-block: .6rem; }
.section-divider { height: 1px; margin: 1rem 0; background: var(--line); }
.callback-box { padding: .7rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface-soft); }
.callback-box code { overflow-wrap: anywhere; }
.drive-actions { padding-top: .75rem; border-top: 1px solid var(--line); }
.drive-actions form { margin: 0; }
.connected-account { color: #0d7558; font-weight: 700; }
.recovery-key { padding: .75rem; border: 1px solid #efce8c; border-radius: .65rem; background: #fff9eb; }
.recovery-key code { display: block; overflow-wrap: anywhere; font-size: .82rem; user-select: all; }
.recovery-key p { margin: .4rem 0 0; color: #75520c; }
.table-note,
.table-error { display: block; max-width: 20rem; margin-top: .25rem; color: var(--muted); font-size: .8rem; }
.table-error { display: -webkit-box; color: var(--danger); overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5d9; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9dabb1; }

@media (max-width: 760px) {
    .form-grid { grid-template-columns: 1fr; }
    .field-wide { grid-column: auto; }
    .backup-stack { grid-template-columns: 1fr; }
    .backup-stack > .data-card { grid-column: auto; }
    .backup-settings-form,
    .backup-settings-dialog .drive-connection-section { grid-template-columns: 1fr; }
    .backup-settings-dialog .drive-actions { justify-content: flex-start; }
    .apps-summary { align-self: stretch; }
    .app-grid { grid-template-columns: 1fr; }
    .alert-persistent { grid-template-columns: auto minmax(0, 1fr); }
    .alert-persistent .alert-action { grid-column: 2; justify-self: start; }
    .actions > .button { min-height: 2.4rem; }
    .data-list-header { display: none; }
    .data-list { max-height: none; overflow: visible; scrollbar-gutter: auto; }
    .users-card .data-list { max-height: none; }
    .data-card-actions .count-badge { display: none; }
    .record-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .5rem .8rem;
        margin-inline: .25rem;
        padding: .65rem;
    }
    .record-row .record-identity { grid-column: 1 / -1; }
    .record-row .record-secondary { white-space: normal; }
    .record-mobile-label { display: block; margin-bottom: .15rem; color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
    .record-state { grid-column: 2; grid-row: 2; }
    .record-action-button { grid-column: 2; grid-row: 3; }
    .modal-dialog {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 1rem;
    }
    .modal-layout { max-height: calc(100dvh - 1rem); }
    .modal-user-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
    .modal-user-header .status-badge { grid-column: 2; margin: .15rem 0 0; }
    .modal-user-header .modal-close { grid-column: 3; grid-row: 1; }
    .account-action-grid { grid-template-columns: 1fr; }
    .role-form { align-items: stretch; flex-direction: column; }
    .section-actions { justify-content: flex-start; }
    .password-form { grid-template-columns: 1fr; }
    .record-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .6rem .8rem;
        padding-block: .8rem;
    }
    .record-identity { grid-column: 1 / -1; }
    .record-secondary { white-space: normal; }
    .record-action { grid-column: 2; grid-row: 3; }
    .record-content { grid-template-columns: 1fr; }
    .record-section + .record-section { padding: 1rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
    .disclosure-card > summary { align-items: flex-start; }
}

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