html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.footer {
    width: 100%;
    flex-shrink: 0;
}


.bg-purple {
    background-color: #6f42c1 !important;
}

.bg-brown {
    background-color: #795548 !important;
}





/* =========================================================
   Mat Patterns App UI
   Reusable styles for authenticated application views
   ========================================================= */

:root {
    --app-text: #111827;
    --app-text-secondary: #374151;
    --app-muted: #6b7280;
    --app-border: #dfe3e8;
    --app-border-soft: #e8ebef;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-surface-section: #f4f6f8;
    --app-radius: .9rem;
    --app-radius-lg: 1.1rem;
    --app-shadow: 0 .125rem .45rem rgba(15, 23, 42, .06);
    --app-shadow-hover: 0 .25rem .7rem rgba(15, 23, 42, .08);
}


/* =========================================================
   Page Header
   ========================================================= */

.app-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.app-page-heading {
    min-width: 0;
}

.app-page-title {
    margin: 0;
    color: var(--app-text);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.app-page-subtitle {
    max-width: 760px;
    margin-top: .4rem;
    margin-bottom: 0;
    color: var(--app-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.app-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}


/* =========================================================
   Generic Cards
   ========================================================= */

.app-card {
    overflow: hidden;
    border: 1px solid #d8dee6;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 .125rem .4rem rgba(15, 23, 42, .06);
}

    .app-card > .card-header {
        padding: .95rem 1.2rem;
        background: #fff;
        border-bottom: 1px solid var(--app-border);
    }

    .app-card > .card-body {
        padding: 1.2rem;
    }

.app-card-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

.app-card-meta {
    color: var(--app-muted);
    font-size: .8rem;
}
.app-section .app-card {
    background: #fff;
    border-color: #d9dfe7;
    box-shadow: 0 .125rem .35rem rgba(15, 23, 42, .065);
}

    .app-section .app-card > .card-header {
        background: #f8fafc;
        border-bottom-color: #dde3ea;
    }

/* =========================================================
   Stat Cards
   ========================================================= */

.app-stat-card {
    position: relative;
    overflow: hidden;
    background: #fff;
}

    .app-stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        background: var(--bs-primary);
    }

    .app-stat-card .card-body {
        padding: 1.5rem 1.35rem 1.3rem;
    }

.app-stat-label {
    margin-bottom: .4rem;
    color: var(--app-muted);
    font-size: .82rem;
    font-weight: 700;
}

.app-stat-value {
    color: var(--app-text);
    font-size: 2.65rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.04em;
}

.app-stat-support {
    margin-top: .45rem;
    color: var(--app-muted);
    font-size: .82rem;
}

.app-stat-split {
    display: flex;
    align-items: flex-end;
    gap: 1.75rem;
}

.app-stat-split-value {
    color: var(--app-text);
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.03em;
}

.app-stat-split-label {
    margin-top: .3rem;
    color: var(--app-muted);
    font-size: .78rem;
}


/* =========================================================
   Major Content Sections
   ========================================================= */

.app-section {
    margin-top: 2.5rem;
    padding: 1.4rem;
    border: 1px solid #d8dee6;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 .18rem .5rem rgba(15, 23, 42, .055);
}

.app-section-header {
    margin-bottom: 1.2rem;
    padding: .1rem .15rem 1rem;
    border-bottom: 2px solid #e2e6eb;
}

.app-section-title {
    margin: 0;
    color: #111827;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.app-section-subtitle {
    margin-top: .35rem;
    color: #6b7280;
    font-size: .9rem;
    line-height: 1.45;
}


/* =========================================================
   Focus / Insight Card
   ========================================================= */

.app-focus-card {
    position: relative;
    border-color: #cdd7e5;
    background: linear-gradient( 135deg, #f8fbff 0%, #ffffff 60% );
}

    .app-focus-card::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        background: #2563eb;
    }

    .app-focus-card > .card-header {
        padding-left: 1.35rem;
        background: transparent;
    }

    .app-focus-card > .card-body {
        padding-left: 1.35rem;
    }

.app-focus-list {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

    .app-focus-list li {
        margin-bottom: .45rem;
        line-height: 1.45;
    }

        .app-focus-list li:last-child {
            margin-bottom: 0;
        }


/* =========================================================
   Notices
   ========================================================= */

.app-notice {
    border-radius: var(--app-radius);
}


/* =========================================================
   Empty States
   ========================================================= */

.app-empty-state {
    padding: 3.25rem 1.5rem;
    text-align: center;
}

.app-empty-state-icon {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    line-height: 1;
}

.app-empty-state-title {
    margin-bottom: .5rem;
    color: var(--app-text);
    font-size: 1.3rem;
    font-weight: 800;
}

.app-empty-state-text {
    max-width: 560px;
    margin: 0 auto 1.5rem;
    color: var(--app-muted);
    line-height: 1.55;
}

.app-empty-message {
    color: var(--app-muted);
    font-size: .9rem;
}


/* =========================================================
   Tables
   ========================================================= */

.app-card .table {
    --bs-table-bg: transparent;
}

    .app-card .table > thead > tr > th {
        padding-top: .65rem;
        padding-bottom: .65rem;
        color: var(--app-text-secondary);
        font-size: .8rem;
        font-weight: 800;
        border-bottom-width: 1px;
    }

    .app-card .table > tbody > tr > td {
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

.app-clickable-row,
.technique-group-row {
    cursor: pointer;
    transition: background-color .12s ease;
}

    .app-clickable-row:hover,
    .technique-group-row:hover {
        background-color: rgba(0, 0, 0, .035);
    }


/* =========================================================
   Forms
   ========================================================= */

.app-form-card {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
}

.app-form-label {
    color: var(--app-text-secondary);
    font-weight: 700;
}

.app-form-help {
    margin-top: .35rem;
    color: var(--app-muted);
    font-size: .82rem;
}

.app-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991.98px) {
    .app-section {
        padding: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .app-page-title {
        font-size: 1.85rem;
    }

    .app-page-actions {
        width: 100%;
    }

    .app-section {
        margin-top: 1.75rem;
    }

    .app-section-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 575.98px) {
    .app-page-title {
        font-size: 1.7rem;
    }

    .app-page-actions .btn {
        flex: 1 1 auto;
    }

    .app-stat-card .card-body {
        padding: 1.2rem 1rem;
    }

    .app-stat-value {
        font-size: 2.25rem;
    }

    .app-stat-split {
        gap: 1.15rem;
    }

    .app-stat-split-value {
        font-size: 1.85rem;
    }

    .app-section {
        margin-right: -.15rem;
        margin-left: -.15rem;
        padding: .85rem;
        border-radius: .9rem;
    }

    .app-section-header {
        padding-bottom: .85rem;
    }

    .app-card > .card-header {
        padding: .85rem 1rem;
    }

    .app-card > .card-body {
        padding: 1rem;
    }

    .app-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .app-form-actions .btn {
            width: 100%;
        }
}



/* =========================================================
   School / Team Header
   ========================================================= */

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

.app-identity-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    object-fit: cover;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    background: #fff;
}

.app-identity-meta {
    color: var(--app-muted);
    font-size: .95rem;
    margin-top: .25rem;
}


/* =========================================================
   Admin / Invite Panels
   ========================================================= */

.app-admin-panel {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
}

.app-admin-panel-header {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--app-border);
    font-weight: 800;
    color: var(--app-text);
}

.app-admin-panel-body {
    padding: 1.1rem 1.15rem;
}

.app-invite-code {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: .4rem;
    background: #f3f4f6;
    color: var(--app-text);
    font-family: var(--bs-font-monospace);
    font-weight: 700;
    letter-spacing: .035em;
}


/* =========================================================
   Upcoming Schedule
   ========================================================= */

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

.app-schedule-day {
    margin-bottom: .75rem;
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.app-schedule-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem .85rem 1.15rem;
    border: 1px solid #d8dee6;
    border-radius: .75rem;
    background: #fff;
}

    .app-schedule-item::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        border-radius: .75rem 0 0 .75rem;
        background: #111827;
    }

.app-schedule-time {
    color: var(--app-text);
    font-size: .88rem;
    font-weight: 800;
    white-space: nowrap;
}

.app-schedule-info {
    text-align: right;
}

.app-schedule-title {
    color: var(--app-text);
    font-weight: 700;
    line-height: 1.25;
}

.app-schedule-meta {
    margin-top: .15rem;
    color: var(--app-muted);
    font-size: .78rem;
}


/* =========================================================
   Announcements
   ========================================================= */

.app-announcement {
    padding: 1rem 1.1rem;
    border: 1px solid var(--app-border);
    border-radius: .8rem;
    background: #fff;
}

    .app-announcement + .app-announcement {
        margin-top: .75rem;
    }

.app-announcement-pinned {
    border-color: #e8c66a;
    background: #fffdf5;
}

.app-announcement-title {
    color: var(--app-text);
    font-weight: 750;
}

.app-announcement-meta {
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .8rem;
}

.app-announcement-body {
    margin-top: .85rem;
    white-space: pre-wrap;
    line-height: 1.5;
}


/* =========================================================
   Billing
   ========================================================= */

.app-billing-card {
    border-left: 4px solid #6b7280;
}


/* =========================================================
   Responsive additions
   ========================================================= */

@media (max-width: 767.98px) {
    .app-schedule-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .app-identity-logo {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .app-schedule-item {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .app-schedule-info {
        text-align: left;
    }
}

/* =========================================================
   List / History Views
   ========================================================= */

.app-list-card {
    overflow: visible;
}

    .app-list-card > .card-header {
        padding: 1rem 1.2rem;
        background: #fff;
        border-bottom: 1px solid #dde3ea;
    }

.app-list-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.app-list-subtitle {
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .82rem;
}


/* =========================================================
   Data Tables
   ========================================================= */

.app-table {
    margin-bottom: 0;
}

    .app-table thead th {
        padding: .8rem 1rem;
        background: #f8fafc;
        color: #374151;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .015em;
        border-bottom: 1px solid #dce2e8;
        white-space: nowrap;
    }

    .app-table tbody td {
        padding: .9rem 1rem;
        vertical-align: middle;
        border-color: #edf0f3;
    }

    .app-table tbody tr {
        transition: background-color .12s ease;
    }

        .app-table tbody tr:hover {
            background: #fafbfc;
        }

.app-table-primary {
    color: var(--app-text);
    font-weight: 700;
}

.app-table-secondary {
    margin-top: .15rem;
    color: var(--app-muted);
    font-size: .8rem;
}

.app-table-number {
    color: var(--app-text);
    font-weight: 750;
}


/* =========================================================
   Small Pills / Labels
   ========================================================= */

.app-pill {
    display: inline-flex;
    align-items: center;
    padding: .28rem .55rem;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    background: #f8fafc;
    color: #374151;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   Row Action Button
   ========================================================= */

.app-row-actions .btn {
    min-width: 34px;
    border-color: #d6dce4;
    background: #fff;
}

    .app-row-actions .btn:hover {
        background: #f8fafc;
    }


/* =========================================================
   Empty List States
   ========================================================= */

.app-list-empty {
    padding: 3.25rem 1.5rem;
    text-align: center;
}

.app-list-empty-title {
    margin-bottom: .5rem;
    color: var(--app-text);
    font-size: 1.2rem;
    font-weight: 800;
}

.app-list-empty-text {
    max-width: 560px;
    margin: 0 auto 1.5rem;
    color: var(--app-muted);
    line-height: 1.5;
}


/* =========================================================
   Pagination — ready for later
   ========================================================= */

.app-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem 1.2rem;
    border-top: 1px solid #e2e7ec;
    background: #fff;
}

.app-pagination-summary {
    color: var(--app-muted);
    font-size: .82rem;
}

/* =========================================================
   Form Pages
   ========================================================= */

.app-form-layout {
    align-items: flex-start;
}

.app-form-section {
    margin-bottom: 1.25rem;
}

    .app-form-section > .card-header {
        padding: 1rem 1.2rem;
        background: #f8fafc;
    }

.app-form-section-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.1rem;
    font-weight: 800;
}

.app-form-section-subtitle {
    margin-top: .25rem;
    color: var(--app-muted);
    font-size: .84rem;
    line-height: 1.45;
}

.app-form-section .form-label {
    margin-bottom: .4rem;
    color: var(--app-text-secondary);
    font-size: .88rem;
    font-weight: 700;
}

.app-form-section .form-control,
.app-form-section .form-select {
    border-color: #d4dae2;
    border-radius: .55rem;
}

    .app-form-section .form-control:focus,
    .app-form-section .form-select:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
    }

.app-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.5rem;
}


/* =========================================================
   Technique Entry
   ========================================================= */

.app-technique-builder {
    padding: 1rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
}

.app-technique-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1rem;
}

.app-technique-item {
    padding: .8rem .9rem;
    border: 1px solid #dbe1e8;
    border-radius: .7rem;
    background: #fff;
}

.app-technique-item-name {
    color: var(--app-text);
    font-weight: 750;
}

.app-technique-item-category {
    color: var(--app-muted);
    font-size: .78rem;
}

.app-technique-item-note {
    margin-top: .25rem;
    color: var(--app-muted);
    font-size: .8rem;
}


/* =========================================================
   Supporting / Help Cards
   ========================================================= */

.app-help-card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
}

    .app-help-card + .app-help-card {
        margin-top: 1rem;
    }

.app-help-card-header {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--app-border);
    color: var(--app-text);
    font-weight: 800;
}

.app-help-card-body {
    padding: 1.1rem;
}

.app-help-step {
    display: flex;
    gap: .8rem;
}

    .app-help-step + .app-help-step {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #edf0f3;
    }

.app-help-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: #edf3ff;
    color: #0d6efd;
    font-size: .78rem;
    font-weight: 800;
}

.app-help-step-title {
    color: var(--app-text);
    font-size: .9rem;
    font-weight: 750;
}

.app-help-step-text {
    margin-top: .15rem;
    color: var(--app-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.app-help-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--app-muted);
    font-size: .82rem;
}

    .app-help-list li + li {
        margin-top: .4rem;
    }

.app-tip {
    padding: 1rem 1.1rem;
    border-left: 4px solid #94a3b8;
    border-radius: .7rem;
    background: #f8fafc;
    color: var(--app-muted);
    font-size: .84rem;
    line-height: 1.5;
}


/* =========================================================
   Select2 integration
   ========================================================= */

.app-form-section .select2-container .select2-selection--single {
    height: 38px;
    border-color: #d4dae2;
    border-radius: .55rem;
}

.app-form-section .select2-container--default
.select2-selection--single
.select2-selection__rendered {
    line-height: 36px;
    padding-left: .75rem;
}

.app-form-section .select2-container--default
.select2-selection--single
.select2-selection__arrow {
    height: 36px;
}


/* =========================================================
   Responsive Form Pages
   ========================================================= */

@media (min-width: 992px) {
    .app-help-sidebar {
        position: sticky;
        top: 1rem;
    }
}

@media (max-width: 575.98px) {
    .app-technique-builder {
        padding: .85rem;
    }

    .app-form-actions {
        flex-direction: column;
    }

        .app-form-actions .btn {
            width: 100%;
        }
}


/* =========================================================
   Complex Entry Builders
   Used by roll submissions, technique events, etc.
   ========================================================= */

.app-entry-builder {
    padding: 1rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
}

.app-entry-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1rem;
}

.app-entry-item {
    padding: .85rem .95rem;
    border: 1px solid #dbe1e8;
    border-radius: .7rem;
    background: #fff;
}

.app-entry-item-title {
    color: var(--app-text);
    font-weight: 750;
}

.app-entry-item-meta {
    color: var(--app-muted);
    font-size: .8rem;
    line-height: 1.4;
}

.app-entry-item-count {
    display: inline-flex;
    align-items: center;
    padding: .2rem .45rem;
    border-radius: .4rem;
    background: #f3f4f6;
    color: #374151;
    font-size: .78rem;
    font-weight: 650;
}


/* =========================================================
   Compact Numeric Inputs
   ========================================================= */

.app-count-field .form-control {
    text-align: center;
}


/* =========================================================
   Roll partner row
   ========================================================= */

.app-partner-fields {
    align-items: end;
}


/* =========================================================
   Mobile improvements for complex builders
   ========================================================= */

@media (max-width: 767.98px) {
    .app-entry-builder {
        padding: .85rem;
    }

    .app-entry-item {
        padding: .8rem;
    }
}

/* =========================================================
   Detail / Summary Views
   ========================================================= */

.app-detail-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.app-detail-stat {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
}

.app-detail-stat-label {
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.app-detail-stat-value {
    margin-top: .2rem;
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 800;
}

.app-detail-notes {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e9ee;
}

.app-detail-notes-label {
    margin-bottom: .3rem;
    color: var(--app-text-secondary);
    font-size: .8rem;
    font-weight: 800;
}

.app-detail-notes-text {
    color: #374151;
    line-height: 1.5;
}


/* =========================================================
   Detail Actions / Navigation
   ========================================================= */

.app-detail-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.app-detail-actions,
.app-detail-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}


/* =========================================================
   Covered Technique Summary
   ========================================================= */

.app-covered-group + .app-covered-group {
    margin-top: .7rem;
}

.app-covered-note {
    margin-top: .25rem;
    margin-left: 2rem;
    color: var(--app-muted);
    font-size: .82rem;
}


/* =========================================================
   Roll Cards
   ========================================================= */

.app-roll-card {
    overflow: hidden;
    border: 1px solid #d8dee6;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 .15rem .45rem rgba(15, 23, 42, .06);
}

    .app-roll-card + .app-roll-card {
        margin-top: 1rem;
    }

.app-roll-header {
    padding: 1rem 1.15rem;
    background: #f8fafc;
    border-bottom: 1px solid #dfe4ea;
}

.app-roll-partner {
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.app-roll-meta {
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .82rem;
}

.app-roll-body {
    padding: 1.15rem;
}

.app-roll-start {
    margin-bottom: 1rem;
    color: #374151;
    font-size: .88rem;
}


/* =========================================================
   Roll Data Blocks
   ========================================================= */

.app-roll-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.app-roll-data-block {
    padding: .85rem .95rem;
    border: 1px solid #e1e6ec;
    border-radius: .7rem;
    background: #fbfcfd;
}

.app-roll-data-title {
    margin-bottom: .4rem;
    color: var(--app-text-secondary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.app-roll-data-list {
    margin: 0;
    padding-left: 1.1rem;
    color: #374151;
    font-size: .86rem;
}

    .app-roll-data-list li + li {
        margin-top: .25rem;
    }


/* =========================================================
   Technique Pattern Blocks
   ========================================================= */

.app-technique-patterns {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e9ee;
}

.app-technique-patterns-title {
    margin-bottom: .75rem;
    color: var(--app-text);
    font-size: .95rem;
    font-weight: 800;
}

.app-technique-pattern-group + .app-technique-pattern-group {
    margin-top: .8rem;
}

.app-technique-pattern-label {
    margin-bottom: .25rem;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}


/* =========================================================
   Responsive Detail Views
   ========================================================= */

@media (max-width: 767.98px) {
    .app-detail-summary {
        grid-template-columns: 1fr;
    }

    .app-roll-data-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Partner Cards
   ========================================================= */

.app-partner-card {
    height: 100%;
    border: 1px solid #d8dee6;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 .15rem .45rem rgba(15, 23, 42, .06);
}

    .app-partner-card .card-body {
        display: flex;
        flex-direction: column;
        padding: 1.15rem;
    }

.app-partner-name {
    margin: 0;
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.app-partner-meta {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid #edf0f3;
    color: var(--app-muted);
    font-size: .82rem;
}

.app-partner-meta-row + .app-partner-meta-row {
    margin-top: .3rem;
}

.app-partner-notes {
    margin-top: auto;
    padding-top: 1rem;
    color: #4b5563;
    font-size: .84rem;
    line-height: 1.45;
}

.app-partner-actions {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .app-partner-actions {
        flex-direction: column;
    }
}

/* =========================================================
   Partner Detail / Analytics
   ========================================================= */

.app-partner-detail-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.app-partner-detail-meta {
    margin-top: .35rem;
    color: var(--app-muted);
    font-size: .9rem;
}

.app-partner-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.app-partner-insight {
    padding: .95rem 1rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
}

.app-partner-insight-label {
    margin-bottom: .25rem;
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.app-partner-insight-value {
    color: var(--app-text);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.45;
}


/* =========================================================
   Recent Partner Rounds
   ========================================================= */

.app-round-history-item {
    padding: 1rem 0;
    border-bottom: 1px solid #e7ebef;
}

    .app-round-history-item:first-child {
        padding-top: 0;
    }

    .app-round-history-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.app-round-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.app-round-history-date {
    color: var(--app-text);
    font-weight: 800;
}

.app-round-history-meta {
    color: var(--app-muted);
    font-size: .82rem;
}

.app-round-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: .85rem;
}

.app-round-history-block {
    padding: .8rem .9rem;
    border: 1px solid #e1e6ec;
    border-radius: .7rem;
    background: #fbfcfd;
}

.app-round-history-title {
    margin-bottom: .35rem;
    color: var(--app-text-secondary);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-round-history-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .85rem;
}

    .app-round-history-list li + li {
        margin-top: .2rem;
    }


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 767.98px) {
    .app-partner-insight-grid,
    .app-round-history-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Goals
   ========================================================= */

.goal-section-card {
    margin-top: 2rem;
    padding: 1.4rem;
    border: 1px solid #d8dee6;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 .18rem .5rem rgba(15, 23, 42, .055);
}

    .goal-section-card:first-of-type {
        margin-top: 0;
    }

.goal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
    padding: .1rem .15rem 1rem;
    border-bottom: 2px solid #e2e6eb;
}

.goal-section-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.goal-section-subtitle {
    margin-top: .3rem;
    color: var(--app-muted);
    font-size: .88rem;
}

.goal-count {
    display: inline-flex;
    align-items: center;
    padding: .3rem .6rem;
    border: 1px solid #d9dfe6;
    border-radius: 999px;
    background: #f8fafc;
    color: #4b5563;
    font-size: .76rem;
    font-weight: 700;
}


/* =========================================================
   Active Goal Cards
   ========================================================= */

.goal-card {
    overflow: hidden;
    border: 1px solid #d8dee6;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .2rem .65rem rgba(15, 23, 42, .065);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .goal-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .45rem 1rem rgba(15, 23, 42, .10);
    }

.goal-card-overdue {
    border-color: rgba(255, 193, 7, .65);
}

.goal-technique-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: .8rem;
    background: rgba(13, 110, 253, .1);
    font-size: 1.25rem;
}

.goal-progress-number {
    color: var(--app-text);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.goal-progress-target {
    color: var(--app-muted);
    font-size: .95rem;
}

.goal-progress {
    height: .8rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e9ecef;
}

    .goal-progress .progress-bar {
        border-radius: 999px;
        transition: width .5s ease;
    }

.goal-date {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--app-muted);
    font-size: .85rem;
}


/* =========================================================
   Completed Goals
   ========================================================= */

.completed-goal-card {
    height: 100%;
    border: 1px solid #dfe4ea;
    border-radius: 1rem;
    background: linear-gradient( 135deg, #f8fafc 0%, #ffffff 100% );
    box-shadow: 0 .15rem .5rem rgba(15, 23, 42, .055);
}

.completed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(25, 135, 84, .12);
    color: #198754;
    font-size: 1.1rem;
    font-weight: 800;
}


/* =========================================================
   Goal Empty States
   ========================================================= */

.goal-empty {
    padding: 3.5rem 1.5rem;
    border: 2px dashed #d9dfe6;
    border-radius: 1.1rem;
    background: #fff;
    text-align: center;
}

.goal-empty-icon {
    margin-bottom: 1rem;
    font-size: 3rem;
    line-height: 1;
}

.goal-empty-title {
    margin-bottom: .5rem;
    color: var(--app-text);
    font-size: 1.3rem;
    font-weight: 800;
}

.goal-empty-text {
    max-width: 36rem;
    margin: 0 auto 1.5rem;
    color: var(--app-muted);
    line-height: 1.5;
}

.goal-empty-active {
    padding: 2.25rem 1.25rem;
    border: 1px dashed #d9dfe6;
    border-radius: .9rem;
    background: #fbfcfd;
    text-align: center;
}

.goal-empty-active-title {
    color: var(--app-text);
    font-weight: 750;
}


/* =========================================================
   Goal Summary
   ========================================================= */

.goal-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
    color: var(--app-muted);
    font-size: .85rem;
}

.goal-summary-separator {
    color: #c2c7ce;
}


/* =========================================================
   Responsive Goals
   ========================================================= */

@media (max-width: 575.98px) {
    .goal-section-card {
        padding: .9rem;
    }

    .goal-section-header {
        align-items: flex-start;
    }

    .goal-card .card-body {
        padding: 1.2rem !important;
    }

    .completed-goal-card .card-body {
        padding: 1.2rem !important;
    }
}

/* =========================================================
   Goal Create
   ========================================================= */

.goal-create-preview {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
}

.goal-create-preview-label {
    margin-bottom: .25rem;
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.goal-create-preview-text {
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.4;
}

.goal-example-list {
    display: flex;
    flex-direction: column;
}

.goal-example {
    display: flex;
    gap: .8rem;
    padding: .9rem 0;
    border-bottom: 1px solid #e7ebef;
}

    .goal-example:first-child {
        padding-top: 0;
    }

    .goal-example:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.goal-example-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, .1);
    font-size: 1rem;
}

.goal-example-title {
    color: var(--app-text);
    font-size: .9rem;
    font-weight: 750;
}

.goal-example-text {
    margin-top: .15rem;
    color: var(--app-muted);
    font-size: .8rem;
    line-height: 1.4;
}

.goal-auto-progress {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-left: 4px solid var(--bs-primary);
    border-radius: .75rem;
    background: #fff;
}

.goal-auto-progress-title {
    color: var(--app-text);
    font-size: .9rem;
    font-weight: 800;
}

.goal-auto-progress-text {
    margin-top: .25rem;
    color: var(--app-muted);
    font-size: .82rem;
    line-height: 1.45;
}

/* =========================================================
   Coach Member Summary
   ========================================================= */

.app-member-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .65rem;
    margin-top: .55rem;
    color: var(--app-muted);
    font-size: .85rem;
}

.app-member-meta-separator {
    color: #c3c8cf;
}

.app-belt-pill {
    display: inline-flex;
    align-items: center;
    padding: .28rem .6rem;
    border: 1px solid #d9dfe6;
    border-radius: 999px;
    background: #f8fafc;
    color: #374151;
    font-size: .78rem;
    font-weight: 700;
}


/* =========================================================
   Coach Focus
   ========================================================= */

.app-coach-focus {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(13, 110, 253, .2);
    border-left: 4px solid var(--bs-primary);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .18rem .5rem rgba(15, 23, 42, .055);
}

    .app-coach-focus > .card-header {
        padding: 1rem 1.2rem;
        background: #f8fafc;
        border-bottom: 1px solid #dfe5ec;
    }

    .app-coach-focus > .card-body {
        padding: 1.2rem;
    }

.app-focus-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .app-focus-list li {
        display: flex;
        gap: .75rem;
        padding: .75rem 0;
        border-bottom: 1px solid #edf0f3;
    }

        .app-focus-list li:first-child {
            padding-top: 0;
        }

        .app-focus-list li:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

.app-focus-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, .1);
    color: var(--bs-primary);
    font-weight: 800;
}


/* =========================================================
   Coach Summary Supporting Text
   ========================================================= */

.app-period-summary {
    margin-top: .75rem;
    color: var(--app-muted);
    font-size: .82rem;
}


/* =========================================================
   Privacy Notice
   ========================================================= */

.app-privacy-note {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-radius: .9rem;
    background: #f8fafc;
}

.app-privacy-note-title {
    color: var(--app-text);
    font-weight: 800;
}

.app-privacy-note-text {
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .84rem;
    line-height: 1.5;
}

/* =========================================================
   Member Summary Header
   ========================================================= */

.member-summary-header {
    padding: 1.5rem 1.6rem;
    border: 1px solid #d8dee6;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 .18rem .55rem rgba(15, 23, 42, .06);
}

.member-summary-label {
    margin-bottom: .35rem;
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.member-summary-name {
    margin: 0;
    color: var(--app-text);
    font-size: 2.15rem;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.member-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    margin-top: .6rem;
    color: var(--app-muted);
    font-size: .86rem;
}

    .member-summary-meta strong {
        color: var(--app-text-secondary);
        font-weight: 700;
    }

.member-summary-meta-separator {
    color: #c5cad1;
}

.member-summary-context {
    color: var(--app-muted);
    font-size: .78rem;
}

@media (max-width: 575.98px) {
    .member-summary-header {
        padding: 1.2rem;
    }

    .member-summary-name {
        font-size: 1.8rem;
    }
}
/* =========================================================
   Family Dashboard
   ========================================================= */

.family-dashboard-meta {
    margin-top: .4rem;
    color: var(--app-muted);
    font-size: .88rem;
}

.family-child-list {
    display: flex;
    flex-direction: column;
}

.family-child {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 0;
    border-bottom: 1px solid #edf0f3;
}

    .family-child:first-child {
        padding-top: 0;
    }

    .family-child:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.family-child-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #eef2ff;
    color: #3730a3;
    font-size: 1rem;
    font-weight: 800;
}

.family-child-name {
    color: var(--app-text);
    font-weight: 750;
}


/* =========================================================
   Family Schedule
   ========================================================= */

.family-schedule-day {
    margin-bottom: .8rem;
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.family-schedule-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.family-schedule-item {
    position: relative;
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: .85rem .95rem .85rem 1.05rem;
    border: 1px solid #e0e5eb;
    border-radius: .75rem;
    background: #fff;
}

    .family-schedule-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: .75rem 0 0 .75rem;
        background: var(--bs-primary);
    }

.family-schedule-time {
    color: var(--app-text-secondary);
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
}

.family-schedule-title {
    color: var(--app-text);
    font-weight: 750;
}

.family-schedule-instructor {
    margin-top: .15rem;
    color: var(--app-muted);
    font-size: .78rem;
}


/* =========================================================
   Family Announcements
   ========================================================= */

.family-announcement {
    padding: 1rem 1.1rem;
    border: 1px solid #e0e5eb;
    border-radius: .85rem;
    background: #fff;
}

    .family-announcement + .family-announcement {
        margin-top: .75rem;
    }

.family-announcement-pinned {
    border-color: #e6c66f;
    background: #fffbeb;
}

.family-announcement-title {
    color: var(--app-text);
    font-weight: 750;
}

.family-announcement-meta {
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .78rem;
}

.family-announcement-body {
    margin-top: .8rem;
    color: #374151;
    line-height: 1.5;
    white-space: pre-wrap;
}


/* =========================================================
   Family dashboard responsive
   ========================================================= */

@media (max-width: 575.98px) {
    .family-schedule-item {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
}

/* =========================================================
   Family Management
   ========================================================= */

.family-manage-summary {
    margin-top: .45rem;
    color: var(--app-muted);
    font-size: .85rem;
}

.family-school-section {
    margin-top: 2rem;
    padding: 1.4rem;
    border: 1px solid #d8dee6;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 .18rem .5rem rgba(15, 23, 42, .055);
}

    .family-school-section:first-of-type {
        margin-top: 0;
    }

.family-school-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e6eb;
}

.family-school-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.family-school-meta {
    margin-top: .25rem;
    color: var(--app-muted);
    font-size: .82rem;
}

.family-child-card {
    height: 100%;
    border: 1px solid #dbe1e8;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 .15rem .45rem rgba(15, 23, 42, .055);
}

    .family-child-card .card-body {
        padding: 1.15rem;
    }

.family-child-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #edf0f3;
}

.family-child-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: #eef2ff;
    color: #3730a3;
    font-size: 1.05rem;
    font-weight: 800;
}

.family-child-name {
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.guardian-section-title {
    margin-bottom: .65rem;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.guardian-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.guardian-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border: 1px solid #e1e6ec;
    border-radius: 999px;
    background: #f8fafc;
    color: #374151;
    font-size: .82rem;
}

.guardian-check {
    color: #198754;
    font-size: .75rem;
    font-weight: 800;
}

.family-child-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.family-subscription-note {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-radius: .9rem;
    background: #f8fafc;
}

.family-subscription-note-title {
    color: var(--app-text);
    font-weight: 800;
}

.family-subscription-note-text {
    margin-top: .2rem;
    color: var(--app-muted);
    font-size: .84rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .family-school-section {
        padding: .9rem;
    }

    .family-child-actions {
        flex-direction: column;
    }

        .family-child-actions .btn {
            width: 100%;
        }
}

/* =========================================================
   Family Forms
   ========================================================= */

.family-school-display {
    padding: .85rem 1rem;
    border: 1px solid #dfe4ea;
    border-radius: .7rem;
    background: #f8fafc;
}

.family-school-display-label {
    margin-bottom: .2rem;
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.family-school-display-name {
    color: var(--app-text);
    font-weight: 750;
}

.family-authorization {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
}

    .family-authorization .form-check {
        margin-bottom: 0;
    }

    .family-authorization .form-check-label {
        color: var(--app-text-secondary);
        font-size: .9rem;
        line-height: 1.5;
    }
/* =========================================================
   Guardian Invite
   ========================================================= */

.family-child-context {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
}

.family-child-context-label {
    margin-bottom: .2rem;
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.family-child-context-name {
    color: var(--app-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.family-invite-info {
    padding: 1rem 1.1rem;
    border: 1px solid #cfe2ff;
    border-radius: .75rem;
    background: #f4f8ff;
    color: var(--app-text-secondary);
    font-size: .86rem;
    line-height: 1.5;
}

.validation-summary-valid {
    display: none;
}

/* =========================================================
   Profile
   ========================================================= */

.profile-email {
    margin-top: .35rem;
    color: var(--app-muted);
    font-size: .9rem;
}

.profile-school-name {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 800;
}

.profile-connection {
    padding: 1rem 0;
    border-bottom: 1px solid #edf0f3;
}

    .profile-connection:first-child {
        padding-top: 0;
    }

    .profile-connection:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.profile-connection-name {
    color: var(--app-text);
    font-weight: 800;
}

.profile-connection-status {
    margin-top: .5rem;
}

.profile-status-positive {
    color: #198754;
    font-size: .84rem;
    font-weight: 700;
}

.profile-status-muted {
    color: var(--app-muted);
    font-size: .82rem;
}

.profile-danger-note {
    margin-top: .75rem;
    color: var(--app-muted);
    font-size: .8rem;
    line-height: 1.45;
}

/* =========================================================
   Manage School
   ========================================================= */

.manage-school-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.manage-school-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.manage-school-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    object-fit: cover;
    border: 1px solid #d8dee6;
    border-radius: .8rem;
    background: #fff;
}

.manage-school-location {
    margin-top: .25rem;
    color: var(--app-muted);
    font-size: .9rem;
}

.manage-school-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}


/* =========================================================
   Billing
   ========================================================= */

.manage-billing-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
}

.manage-billing-text {
    color: var(--app-muted);
    font-size: .84rem;
    line-height: 1.5;
}


/* =========================================================
   Invite Tools
   ========================================================= */

.manage-invite-code {
    padding: 1rem;
    border: 1px solid #dfe4ea;
    border-radius: .8rem;
    background: #f8fafc;
    text-align: center;
}

.manage-invite-code-value {
    color: var(--app-text);
    font-family: monospace;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.manage-invite-link {
    margin-top: 1rem;
}

.manage-invite-help {
    margin-top: .4rem;
    color: var(--app-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.manage-invite-warning {
    margin-top: .75rem;
    padding: .75rem .85rem;
    border: 1px solid #f0d58a;
    border-radius: .7rem;
    background: #fffaf0;
    color: #6b5b20;
    font-size: .8rem;
    line-height: 1.45;
}


/* =========================================================
   Manage School Stats
   ========================================================= */

.manage-school-stat {
    padding: 1rem 1.1rem;
    border: 1px solid #dfe4ea;
    border-radius: .8rem;
    background: #fff;
}

.manage-school-stat-label {
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.manage-school-stat-value {
    margin-top: .2rem;
    color: var(--app-text);
    font-size: 2rem;
    font-weight: 800;
}


/* =========================================================
   Member Management
   ========================================================= */

.manage-member-name {
    color: var(--app-text);
    font-weight: 700;
}

.manage-member-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem;
}


/* =========================================================
   Danger Zone
   ========================================================= */

.manage-danger-zone {
    padding: 1rem 1.1rem;
    border: 1px solid #f0c2c7;
    border-radius: .85rem;
    background: #fffafa;
}

.manage-danger-title {
    color: #b02a37;
    font-size: .95rem;
    font-weight: 800;
}

.manage-danger-text {
    margin-top: .25rem;
    color: var(--app-muted);
    font-size: .82rem;
    line-height: 1.45;
}


.auth-shell {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

.auth-card {
    max-width: 520px;
    margin: 0 auto;
    border: 1px solid #dfe4ea;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
}

.auth-card-body {
    padding: 2rem;
}

.auth-brand {
    margin-bottom: 1.75rem;
    text-align: center;
}

.auth-brand-name {
    color: #111827;
    font-size: 1.9rem;
    font-weight: 850;
    letter-spacing: -.035em;
}

.auth-brand-tagline {
    margin-top: .3rem;
    color: #6b7280;
    font-size: .9rem;
}

.auth-title {
    margin-bottom: .35rem;
    color: #111827;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.auth-subtitle {
    margin-bottom: 1.5rem;
    color: #6b7280;
    font-size: .95rem;
}

.auth-links {
    margin-top: 1.5rem;
    color: #6b7280;
    font-size: .9rem;
}

.auth-muted-link {
    color: #6b7280;
    text-decoration: none;
}

    .auth-muted-link:hover {
        color: #374151;
        text-decoration: underline;
    }

.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
    color: #9ca3af;
    font-size: .78rem;
}

    .auth-divider::before,
    .auth-divider::after {
        content: "";
        flex: 1;
        border-top: 1px solid #e5e7eb;
    }

@media (max-width: 575.98px) {
    .auth-shell {
        padding: 1.5rem 0;
        align-items: flex-start;
    }

    .auth-card-body {
        padding: 1.5rem;
    }
}
.auth-note {
    padding: .8rem .9rem;
    border: 1px solid #dfe4ea;
    border-radius: .75rem;
    background: #f8fafc;
    color: #4b5563;
    font-size: .84rem;
    line-height: 1.45;
}