:root {
    --bg: #f7f8fa;
    --ink: #0d1726;
    --muted: #536783;
    --line: #dde5ef;
    --panel: #ffffff;
    --brand: #0aa88f;
    --brand-2: #d08a18;
    --blue: #2f73d9;
    --nav: #07111f;
    --nav-soft: #0f4fb8;
    --soft: #eef4f8;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 12px 30px rgba(18, 27, 39, 0.07);
    --shadow-soft: 0 6px 18px rgba(18, 27, 39, 0.05);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.app-shell {
    display: grid;
    grid-template-columns: 255px 1fr;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    min-height: 100vh;
    padding: 26px 8px;
    background: linear-gradient(165deg, #07111f 0%, #0c2348 48%, #1558b0 100%);
    border-right: 0;
    box-shadow: none;
}

.sidebar-brand {
    display: grid;
    gap: 4px;
    padding: 0 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-brand strong {
    color: #d9ecff;
    font-size: 18px;
}

.sidebar-brand span,
.side-link {
    color: #b7c6dd;
    font-size: 12px;
}

.sidebar-user {
    display: grid;
    gap: 6px;
    margin: 0 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
}

.sidebar-user span {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sidebar-user a {
    color: #b7c6dd;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.side-nav {
    display: grid;
    align-content: start;
    gap: 4px;
}

.side-nav a,
.side-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.side-nav a:hover,
.side-link:hover {
    background: rgba(255, 255, 255, 0.10);
}

.side-nav a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0f5bd8, #07111f);
    box-shadow: inset 3px 0 0 #67d4ff;
}

.app-content {
    min-width: 0;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 26px;
    min-height: 48px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 8px rgba(18, 27, 39, 0.04);
}

h1, h2, p {
    margin: 0;
}

h1 {
    font-size: 22px;
    line-height: 1.15;
}

h2 {
    font-size: 18px;
}

.topbar p,
.muted {
    color: var(--muted);
    margin-top: 4px;
}

.topbar p {
    font-size: 13px;
}

.button {
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
}

.layout {
    width: min(896px, calc(100% - 48px));
    margin: 32px auto 56px;
}

.layout-users {
    width: min(1480px, calc(100% - 48px));
}

.layout-settings {
    width: min(1040px, calc(100% - 48px));
}

.layout-settings .grid {
    grid-template-columns: 1fr;
}

.layout-users .grid {
    grid-template-columns: 1fr;
}

.layout-users .user-form,
.layout-users .user-row {
    grid-template-columns: 1fr 1.45fr 1fr 1fr !important;
    column-gap: 18px;
}

.layout-users .user-form-wide,
.layout-users .check-field,
.layout-users .user-row-meta,
.layout-users .user-actions {
    grid-column: 1 / -1 !important;
}

.layout-users .user-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.layout-users .user-field-email {
    grid-column: 1 / -1 !important;
}

.layout-users .user-field-access,
.layout-users .user-field-date,
.layout-users .user-field-devices {
    grid-column: span 1;
}

.steps-list,
.settings-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.steps-list span,
.settings-list div {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.settings-list div {
    display: grid;
    gap: 4px;
}

.settings-list span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-list strong {
    overflow-wrap: anywhere;
    font-size: 14px;
}

.settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
    overflow: hidden;
}

.settings-form label {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-form input,
.settings-form select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 11px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}

.smtp-save-button {
    min-width: 190px;
}

.settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-actions .button {
    min-width: 150px;
    text-align: center;
}

.smtp-test-modal {
    width: min(520px, 100%);
}

.smtp-test-form {
    grid-template-columns: 1fr;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-actions .button {
    min-width: 140px;
    text-align: center;
}

.modal-alert {
    grid-column: 1 / -1;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.filterbar {
    display: block;
    margin-bottom: 16px;
}

.filterbar form {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(90px, 0.4fr) minmax(165px, 0.8fr) minmax(230px, 1.25fr) auto;
    align-items: end;
    gap: 12px;
    width: 100%;
}

.filterbar label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.filter-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.filter-field select,
.filter-field input[type="text"] {
    width: 100%;
    min-width: 0;
}

.uf-field select {
    min-width: 86px;
}

.filter-submit {
    min-height: 41px;
}

.participant-menu {
    position: relative;
}

.participant-menu summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 41px;
    padding: 10px 13px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 400;
    list-style: none;
}

.participant-menu summary::-webkit-details-marker {
    display: none;
}

.participant-menu summary::after {
    content: "v";
    color: var(--muted);
    font-size: 12px;
}

.participant-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 12;
    display: grid;
    gap: 4px;
    width: 230px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.participant-options label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 6px 7px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

.participant-options label:hover {
    background: #f4f7fb;
}

.participant-options input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #203f7a;
}

.participant-options label.active {
    font-weight: 700;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    padding: 0;
    background: var(--blue);
    border-radius: var(--radius-sm);
    font-size: 17px;
    line-height: 1;
}

.locate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 39px;
    padding-inline: 14px;
    background: var(--blue);
}

.locate-button span {
    line-height: 1;
}

.filter-hint {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.selection-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #eef6f3;
    border: 1px solid #c9e3da;
    border-radius: var(--radius-sm);
    color: var(--brand);
    font-size: 13px;
}

.selection-pill a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.view-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding-bottom: 2px;
    overflow-x: auto;
}

.view-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 16px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.view-tabs a.active {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: start center;
    padding: 72px 16px 24px;
    background: rgba(18, 27, 39, 0.48);
}

.modal {
    width: min(720px, 100%);
    max-height: min(680px, calc(100vh - 96px));
    overflow: auto;
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(18, 27, 39, 0.24);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-close {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    background: #f1f4f8;
    text-decoration: none;
    font-size: 24px;
    line-height: 1;
}

.modal-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 14px;
}

.modal-search input[type="text"] {
    width: 100%;
}

.school-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.ranking-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr)) auto auto;
    align-items: end;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px;
    background: #fbfcfe;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.ranking-controls label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.ranking-controls select {
    min-width: 0;
    width: 100%;
}

.ranking-controls input[type="number"] {
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}

.user-form,
.user-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
    align-items: end;
}

.user-form label,
.user-row label {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.user-form input,
.user-form select,
.user-row input,
.user-row select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}

.user-form-wide {
    grid-column: 1 / -1 !important;
}

.user-form-wide input {
    width: 100%;
}

.check-field {
    display: inline-flex !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-self: start;
    gap: 8px !important;
    min-height: 38px;
    width: max-content;
    padding: 0 4px;
}

.check-field input {
    width: auto;
}

.user-list {
    display: grid;
    gap: 14px;
}

.users-table-wrap {
    overflow-x: auto;
}

.users-grid-table {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
}

.users-grid-table .col-status { width: 92px; }
.users-grid-table .col-user { width: auto; }
.users-grid-table .col-profile { width: 110px; }
.users-grid-table .col-access { width: 112px; }
.users-grid-table .col-expiry { width: 128px; }
.users-grid-table .col-devices { width: 78px; }
.users-grid-table .col-actions { width: 164px; }

.users-grid-table th,
.users-grid-table td {
    vertical-align: top;
}

.users-grid-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.users-grid-table input,
.users-grid-table select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.users-grid-table tr.expired {
    background: #fff8f7;
}

.user-list-link {
    display: grid;
    gap: 4px;
    color: var(--ink);
    text-decoration: none;
}

.user-list-link strong {
    font-size: 14px;
}

.user-list-link span,
.user-list-link small {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 12px;
}

.user-cell-stack,
.user-devices-cell {
    display: grid;
    gap: 6px;
}

.user-cell-stack small,
.user-devices-cell small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.inline-check input {
    width: auto;
}

.grid-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
    align-content: start;
}

.action-button {
    display: inline-grid;
    place-items: center;
    width: 31px;
    height: 31px;
    min-width: 31px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: var(--shadow-soft);
}

.action-button:hover {
    filter: brightness(0.96);
}

.action-save {
    background: var(--brand);
    border-color: var(--brand);
}

.action-access {
    background: var(--blue);
    border-color: var(--blue);
}

.action-token {
    background: #7c3aed;
    border-color: #7c3aed;
}

.action-reset {
    background: #d08a18;
    border-color: #d08a18;
}

.action-edit {
    background: #475467;
    border-color: #475467;
    text-decoration: none;
}

.user-edit-modal {
    width: min(860px, 100%);
}

.user-edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.user-edit-form label {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.user-edit-form input,
.user-edit-form select {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}

.user-edit-wide {
    grid-column: 1 / -1;
}

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-summary-card {
    display: grid;
    gap: 6px;
    min-height: 126px;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.admin-summary-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-summary-card strong {
    font-size: 28px;
    line-height: 1;
}

.admin-summary-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.admin-summary-card.positive {
    background: #effaf5;
    border-color: #b6e4ca;
}

.admin-summary-card.warning {
    background: #fff8e7;
    border-color: #f3d28c;
}

.admin-summary-card.negative {
    background: #fff4f3;
    border-color: #f2b8b3;
}

.account-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.account-card {
    display: grid;
    gap: 6px;
    min-height: 126px;
    padding: 15px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.account-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.account-card strong {
    overflow-wrap: anywhere;
    font-size: 22px;
    line-height: 1.08;
}

.account-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.account-card.positive {
    background: #effaf5;
    border-color: #b6e4ca;
}

.account-card.warning {
    background: #fff8e7;
    border-color: #f3d28c;
}

.account-card.negative {
    background: #fff4f3;
    border-color: #f2b8b3;
}

.account-password-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.account-password-form label {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.account-password-form input {
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}

.account-password-form button {
    min-width: 170px;
}

.redaction-panel {
    margin-bottom: 16px;
}

.redaction-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.redaction-diagnosis-box {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #f4fbf9;
    border: 1px solid rgba(10, 168, 143, 0.25);
    border-radius: var(--radius-sm);
}

.redaction-diagnosis-box span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.redaction-diagnosis-box p {
    color: var(--ink);
    line-height: 1.45;
}

.redaction-competency-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.redaction-competency-card {
    display: grid;
    gap: 12px;
    min-height: 190px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.redaction-competency-card div:first-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.redaction-competency-card span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: var(--brand);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.redaction-competency-card strong {
    font-size: 24px;
    line-height: 1;
}

.redaction-competency-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.redaction-compare-panel {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.compact-header {
    margin-bottom: 10px;
}

.redaction-compare-grid {
    display: grid;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.redaction-compare-grid.columns-1 {
    grid-template-columns: minmax(160px, 1.2fr) minmax(130px, 1fr) 84px;
}

.redaction-compare-grid.columns-2 {
    grid-template-columns: minmax(160px, 1.2fr) repeat(2, minmax(130px, 1fr)) 84px;
}

.redaction-compare-grid.columns-3 {
    grid-template-columns: minmax(160px, 1.2fr) repeat(3, minmax(130px, 1fr)) 84px;
}

.redaction-compare-grid.columns-4 {
    grid-template-columns: minmax(160px, 1.2fr) repeat(4, minmax(130px, 1fr)) 84px;
}

.redaction-compare-head,
.redaction-compare-label,
.redaction-compare-value,
.redaction-compare-diff {
    min-width: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.redaction-compare-head {
    color: var(--muted);
    background: #fbfcfe;
    font-size: 12px;
    font-weight: 800;
}

.redaction-compare-label {
    display: grid;
    gap: 3px;
}

.redaction-compare-label strong {
    font-size: 13px;
}

.redaction-compare-label span {
    color: var(--muted);
    font-size: 12px;
}

.redaction-compare-value {
    display: grid;
    gap: 7px;
}

.redaction-compare-value b {
    font-size: 14px;
}

.redaction-compare-diff {
    display: grid;
    align-items: center;
    font-size: 14px;
    font-weight: 800;
}

.redaction-ranking-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.redaction-ranking-controls label {
    display: grid;
    gap: 6px;
    min-width: 220px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.redaction-ranking-controls select {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}

.redaction-ranking-list {
    display: grid;
    gap: 8px;
}

.redaction-ranking-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 90px minmax(120px, 220px);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--ink);
    background: #fbfcfe;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.redaction-ranking-row:hover {
    border-color: rgba(10, 168, 143, 0.45);
}

.redaction-ranking-row > b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #fff;
    background: var(--brand);
    border-radius: 8px;
    font-size: 12px;
}

.redaction-ranking-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.redaction-ranking-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.redaction-ranking-row small {
    color: var(--muted);
}

.redaction-ranking-row em {
    color: var(--ink);
    font-style: normal;
    font-weight: 800;
    text-align: right;
}

.redaction-ranking-row > i {
    height: 10px;
    overflow: hidden;
    background: #e8eef6;
    border-radius: 999px;
}

.redaction-ranking-row u {
    display: block;
    height: 100%;
    background: var(--blue);
    border-radius: inherit;
}

.redaction-band-list {
    display: grid;
    gap: 10px;
}

.redaction-band-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 90px 70px;
    align-items: center;
    gap: 12px;
}

.redaction-band-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.redaction-band-row b,
.redaction-band-row em {
    text-align: right;
}

.redaction-band-row em {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

.user-row {
    padding: 14px;
    background: #fbfcfe;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.user-row.expired {
    border-color: rgba(180, 35, 24, 0.24);
    background: #fffafa;
}

.user-row-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.user-row-title strong {
    font-size: 16px;
}

.user-row-meta {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
}

.user-form > button {
    width: 100%;
}

.user-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.user-actions button {
    width: 190px;
    min-width: 190px;
}

.user-actions button:last-child {
    width: 220px;
}

.clear-link {
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.suggestions a {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
}

.suggestions a:hover {
    border-color: var(--blue);
}

.suggestions span {
    font-weight: 700;
}

.suggestions small {
    color: var(--muted);
}

.school-detail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.school-detail div {
    display: grid;
    gap: 5px;
    padding: 12px;
    background: #fbfcfe;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.school-detail span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.school-detail strong {
    overflow-wrap: anywhere;
}

.diagnostic-panel {
    border-color: rgba(21, 112, 239, 0.22);
}

.diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.diagnostic-card {
    min-height: 134px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.diagnostic-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.diagnostic-card strong {
    display: block;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.15;
}

.diagnostic-card p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}

.diagnostic-card.positive {
    border-color: rgba(0, 168, 142, 0.32);
    background: linear-gradient(180deg, #ffffff 0%, #eefbf8 100%);
}

.diagnostic-card.negative {
    border-color: rgba(180, 35, 24, 0.24);
    background: linear-gradient(180deg, #ffffff 0%, #fff6f5 100%);
}

.evolution-view {
    align-items: start;
}

.evolution-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.evolution-cards > div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfcfe;
}

.evolution-cards span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.evolution-cards strong {
    display: block;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.15;
}

.evolution-cards small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}

.evolution-area-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.evolution-area-card {
    display: grid;
    gap: 10px;
    min-height: 156px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfe;
    overflow: hidden;
}

.evolution-area-card.positive {
    border-color: rgba(0, 168, 142, 0.26);
    background: linear-gradient(180deg, #ffffff 0%, #f0fbf8 100%);
}

.evolution-area-card.negative {
    border-color: rgba(180, 35, 24, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #fff6f5 100%);
}

.evolution-area-head,
.evolution-area-values {
    display: grid;
    align-items: center;
}

.evolution-area-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    justify-content: space-between;
}

.evolution-area-values {
    grid-template-columns: minmax(42px, 1fr) 20px minmax(42px, 1fr);
    gap: 7px;
}

.evolution-area-head span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.evolution-area-head em {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.evolution-area-card.positive .evolution-area-head em {
    color: #067647;
    background: #d1fadf;
}

.evolution-area-card.negative .evolution-area-head em {
    color: #b42318;
    background: #fee4e2;
}

.evolution-area-values > div {
    display: grid;
    gap: 3px;
}

.evolution-area-values > div:last-child {
    text-align: right;
}

.evolution-area-values small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.evolution-area-values strong {
    color: var(--ink);
    font-size: 20px;
    line-height: 1.05;
    white-space: nowrap;
}

.evolution-area-values > i {
    height: 2px;
    width: 100%;
    min-width: 0;
    background: var(--line);
    position: relative;
}

.evolution-area-values > i::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--line);
    border-right: 2px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
}

.evolution-area-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf5;
}

.evolution-area-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.evolution-area-card.positive .evolution-area-track i {
    background: #00a88e;
}

.evolution-area-card.negative .evolution-area-track i {
    background: #d92d20;
}

.evolution-area-card b {
    display: block;
    font-size: 17px;
    line-height: 1.05;
}

select {
    min-width: 240px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}

.metrics article,
.panel,
.empty {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

.metrics article {
    padding: 18px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.metrics article:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.metrics span {
    color: var(--muted);
    font-size: 12px;
}

.metrics strong {
    display: block;
    margin-top: 8px;
    font-size: 30px;
    letter-spacing: 0;
}

.indicator-notes {
    margin: -4px 0 18px;
}

.indicator-notes details {
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.indicator-notes summary {
    padding: 13px 16px;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.indicator-notes summary::-webkit-details-marker {
    display: none;
}

.indicator-notes summary::after {
    content: "+";
    float: right;
    color: var(--brand);
    font-size: 18px;
    line-height: 1;
}

.indicator-notes details[open] summary::after {
    content: "-";
}

.indicator-note-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}

.indicator-note-grid div {
    padding: 12px;
    background: #fbfcfe;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.indicator-note-grid strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
    font-size: 13px;
}

.indicator-note-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

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

.comparison-panel {
    margin-bottom: 16px;
}

.comparison-grid {
    display: grid;
    gap: 8px;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 84px;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.municipality-comparison .comparison-row {
    grid-template-columns: 1fr 0.9fr 0.9fr 1fr 84px;
}

.school-comparison.with-city .comparison-row {
    grid-template-columns: 1fr 0.85fr 0.85fr 1fr 1fr 84px;
}

.school-comparison.no-city .comparison-row {
    grid-template-columns: 1fr 0.9fr 0.9fr 1fr 84px;
}

.comparison-row:last-child {
    border-bottom: 0;
}

.comparison-row span {
    color: var(--muted);
    font-weight: 700;
}

.comparison-row b {
    font-weight: 700;
}

.comparison-row strong {
    text-align: right;
}

.comparison-row strong.positive {
    color: #146c43;
}

.comparison-row strong.negative {
    color: #b42318;
}

.area-compare {
    display: grid;
    gap: 16px;
}

.area-compare-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 14px;
}

.area-compare-row > span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.area-series {
    display: grid;
    gap: 7px;
}

.area-bar {
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: center;
    gap: 10px;
}

.area-bar i {
    display: block;
    height: 11px;
    border-radius: 999px;
}

.area-bar b {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.area-bar.national i {
    background: #7b8794;
}

.area-bar.state i {
    background: var(--blue);
}

.area-bar.city i {
    background: var(--brand-2);
}

.area-bar.school i {
    background: #101828;
}

.panel {
    padding: 18px;
}

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

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.bars {
    display: grid;
    gap: 10px;
}

.bars.compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bar-row {
    display: grid;
    grid-template-columns: 92px 1fr 58px;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    font-size: 13px;
}

.compact .bar-row {
    grid-template-columns: 1fr;
    align-items: end;
}

.compact .bar-row span {
    min-height: 32px;
}

.bar-track {
    height: 10px;
    background: #e8edf3;
    border-radius: 999px;
    overflow: hidden;
}

.bar-track i {
    display: block;
    height: 100%;
    background: var(--blue);
    border-radius: inherit;
}

.bar-row b {
    text-align: right;
}

.bar-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

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

th,
td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    background: #fbfcfe;
}

tbody tr:hover {
    background: #fbfcfe;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: #f3f8ff;
}

.clickable-row.selected {
    background: #eefbf8;
}

.clickable-row.selected td {
    border-bottom-color: rgba(0, 168, 142, 0.22);
}

.table-link {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.clickable-row:hover .table-link {
    color: var(--blue);
}

.positive-text {
    color: #087443;
    font-weight: 800;
}

.negative-text {
    color: #b42318;
    font-weight: 800;
}

.ranking-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.ranking-badge.positive {
    color: #067647;
    background: #d1fadf;
}

.ranking-badge.negative {
    color: #b42318;
    background: #fee4e2;
}

.report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
}

.report-page {
    display: grid;
    gap: 16px;
}

.report-cover {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
    background: linear-gradient(135deg, #0f1b3d 0%, #101828 100%);
    color: #fff;
}

.report-cover span,
.report-cover p,
.report-cover small {
    color: rgba(255, 255, 255, 0.76);
}

.report-cover h2 {
    margin: 8px 0;
    color: #fff;
    font-size: 28px;
}

.report-school {
    display: grid;
    gap: 5px;
    min-width: 260px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
}

.report-school strong {
    color: #fff;
}

.report-metrics {
    margin: 0;
}

.sort-link {
    color: var(--muted);
    text-decoration: none;
}

.sort-link.active {
    color: var(--ink);
}

.sort-link.active::after {
    content: " ↓";
}

.bands {
    display: grid;
    grid-template-columns: repeat(10, minmax(24px, 1fr));
    gap: 8px;
    align-items: end;
    height: 220px;
}

.bands div {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 7px;
    height: 100%;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.bands i {
    align-self: end;
    display: block;
    min-height: 6px;
    background: var(--brand-2);
    border-radius: 4px 4px 0 0;
}

.imports {
    margin-top: 16px;
}

.upload-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.upload-panel form {
    display: flex;
    align-items: center;
    gap: 10px;
}

input[type="text"] {
    width: min(560px, 48vw);
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
}

input[type="text"]:focus,
select:focus,
.participant-menu summary:focus {
    outline: 3px solid rgba(37, 99, 168, 0.16);
    border-color: rgba(37, 99, 168, 0.5);
}

button.button {
    border: 0;
    cursor: pointer;
    font: inherit;
}

.secondary-button {
    background: var(--blue);
}

.alert {
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    box-shadow: var(--shadow-soft);
}

.alert.success {
    color: #0f5132;
    background: #dff5e8;
    border-color: #b6e4ca;
}

.alert.danger {
    color: #842029;
    background: #f8d7da;
    border-color: #f1aeb5;
}

.alert.error {
    color: #842029;
    background: #f8d7da;
    border-color: #f1aeb5;
}

.alert.info {
    color: #24445f;
    background: #e5f0fb;
    border-color: #bdd8f0;
}

.setup-user {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.setup-user span {
    color: var(--muted);
    font-size: 13px;
}

.status {
    display: inline-block;
    min-width: 86px;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.status.pendente {
    color: #674d00;
    background: #fff0bf;
}

.status.processando {
    color: #0b4f71;
    background: #cfeefa;
}

.status.concluido {
    color: #0f5132;
    background: #dff5e8;
}

.status.erro {
    color: #842029;
    background: #f8d7da;
}

.queue-order {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.queue-order span {
    min-width: 22px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.queue-order form {
    display: inline-flex;
}

.mini-button {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.mini-button:hover {
    border-color: var(--blue);
}

.progress {
    position: relative;
    width: 150px;
    height: 9px;
    overflow: hidden;
    background: #e8edf3;
    border-radius: 999px;
}

.progress i {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
}

.progress.active i {
    width: 45%;
    background: linear-gradient(90deg, var(--blue), #6ea3df);
    animation: progress-slide 1.1s linear infinite;
}

.progress.done i {
    width: 100%;
    background: var(--brand);
}

.progress.failed i {
    width: 100%;
    background: #b42318;
}

.progress-text {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}

@keyframes progress-slide {
    from {
        transform: translateX(-110%);
    }
    to {
        transform: translateX(230%);
    }
}

.path-cell {
    max-width: 380px;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 12px;
}

.empty {
    display: grid;
    gap: 12px;
    padding: 34px;
    margin-bottom: 16px;
}

code {
    display: block;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: #1d2733;
    color: #fff;
    overflow-x: auto;
}

@media (max-width: 1120px) {
    .user-form,
    .user-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .settings-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-summary-grid,
    .account-password-form,
    .redaction-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .redaction-competency-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .redaction-ranking-row {
        grid-template-columns: 38px minmax(0, 1fr) 76px;
    }

    .redaction-ranking-row > i {
        grid-column: 2 / -1;
    }

    .user-edit-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-password-form button {
        width: 100%;
    }

    .layout-users .user-form,
    .layout-users .user-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .layout-users .user-field-email {
        grid-column: 1 / -1 !important;
    }

    .layout-users .user-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 800px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        min-height: auto;
        gap: 10px;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .side-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
    }

    .side-nav a {
        white-space: nowrap;
    }

    .side-link {
        display: none;
    }

    .topbar,
    .metrics,
    .grid,
    .diagnostic-grid,
    .indicator-note-grid,
    .evolution-cards,
    .evolution-area-grid,
    .ranking-controls,
    .admin-summary-grid,
    .account-summary-grid,
    .account-password-form,
    .redaction-summary-grid,
    .redaction-competency-grid,
    .user-edit-form,
    .user-form,
    .settings-form,
    .user-row,
    .user-actions,
    .school-detail,
    .comparison-row,
    .area-compare-row,
    .bars.compact,
    .upload-panel,
    .upload-panel form,
    .filterbar form {
        grid-template-columns: 1fr;
    }

    .topbar {
        display: grid;
        padding: 20px 16px;
    }

    .layout {
        width: min(100% - 20px, 1180px);
        margin-top: 12px;
    }

    .metrics strong {
        font-size: 24px;
    }

    .area-bar {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .participant-options {
        position: static;
        width: 100%;
        margin-top: 8px;
    }

    .panel.wide {
        grid-column: auto;
    }

    .bands {
        grid-template-columns: repeat(5, minmax(28px, 1fr));
    }

    .upload-panel,
    .upload-panel form,
    .school-search-form,
    .modal-search,
    .filterbar form {
        display: grid;
    }

    input[type="text"] {
        width: 100%;
    }

    select {
        width: 100%;
        min-width: 0;
    }

    .user-row-meta {
        grid-column: auto;
    }

    .user-form-wide,
    .check-field {
        grid-column: 1 / -1 !important;
    }

    .user-actions button,
    .user-actions button:last-child {
        width: 100%;
        min-width: 0;
    }

    .redaction-ranking-controls {
        justify-content: stretch;
    }

    .redaction-ranking-controls label {
        width: 100%;
        min-width: 0;
    }

    .redaction-ranking-row,
    .redaction-band-row {
        grid-template-columns: 1fr;
    }

    .redaction-ranking-row em,
    .redaction-band-row b,
    .redaction-band-row em {
        text-align: left;
    }
}

.sort-link.active::after {
    content: " v";
}

@media print {
    @page {
        size: A4 landscape;
        margin: 12mm;
    }

body {
        background: #fff;
    }

    .sidebar,
    .topbar,
    .report-actions,
    .filterbar,
    .view-tabs,
    .indicator-notes,
    .alert {
        display: none;
    }

    .app-shell {
        display: block;
    }

    .layout {
        width: 100%;
        margin: 0;
    }

    .panel,
    .metrics article {
        box-shadow: none;
        break-inside: avoid;
    }

    .report-cover {
        color: #111827;
        background: #fff;
        border-color: #d0d7e2;
    }

    .report-cover h2,
    .report-school strong {
        color: #111827;
    }

    .report-cover span,
    .report-cover p,
    .report-cover small {
        color: #475467;
    }
}

.login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #07111f 0%, #0c2348 52%, #1558b0 100%);
}

.login-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.login-card {
    display: grid;
    gap: 18px;
    width: min(100%, 420px);
    padding: 28px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.26);
}

.login-card span {
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.login-card h1 {
    margin: 8px 0 6px;
    font-size: 30px;
}

.login-card p {
    margin: 0;
    color: var(--muted);
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.login-form input {
    width: 100%;
    padding: 11px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
}