:root {
    --navy: #06255b;
    --navy-2: #0b3477;
    --blue: #1267d8;
    --green: #3c9f25;
    --green-2: #69b843;
    --white: #ffffff;
    --soft: #f4f8fd;
    --soft-2: #eef5ff;
    --text: #172033;
    --muted: #667085;
    --danger: #b42318;
    --success: #027a48;
    --warning: #b54708;
    --border: #d9e4f2;
    --shadow: 0 20px 60px rgba(6, 37, 91, 0.12);
    --radius: 22px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 5% 5%, rgba(18,103,216,.12), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(60,159,37,.12), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f6faff 100%);
    min-height: 100vh;
}

img { max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    width: min(1140px, calc(100% - 40px));
    margin: 0 auto;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 40px;
    padding: 50px 0;
}

.brand-panel {
    padding: 40px;
    border-radius: 32px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(217,228,242,.9);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.brand-logo {
    display: block;
    width: min(560px, 100%);
    margin-bottom: 30px;
}

.brand-kicker {
    color: var(--green);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 14px;
}

h1, h2, h3 { color: var(--navy); margin-top: 0; }

.brand-panel h1 {
    font-size: clamp(36px, 4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: 16px;
}

.brand-panel p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
    max-width: 660px;
}

.auth-card, .panel, .stat-card, .status-box {
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(217,228,242,.95);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.auth-card {
    padding: 34px;
}

.card-title {
    font-size: 28px;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.card-subtitle {
    color: var(--muted);
    margin-top: 0;
    margin-bottom: 24px;
    line-height: 1.6;
}

.form-group { margin-bottom: 18px; }

label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 8px;
}

input, select, textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: rgba(18,103,216,.8);
    box-shadow: 0 0 0 4px rgba(18,103,216,.10);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 14px;
    font-weight: 900;
    cursor: pointer;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover { transform: translateY(-1px); text-decoration: none; }

.btn-primary {
    width: 100%;
    color: #fff;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 62%, var(--green) 120%);
    box-shadow: 0 18px 30px rgba(18,103,216,.20);
}

.btn-secondary {
    color: var(--navy);
    background: #eef5ff;
    border: 1px solid var(--border);
}

.alert {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.alert-error { background: #fef3f2; color: var(--danger); border: 1px solid #fecdca; }
.alert-success { background: #ecfdf3; color: var(--success); border: 1px solid #abefc6; }
.alert-warning { background: #fffaeb; color: var(--warning); border: 1px solid #fedf89; }

.help-text { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 8px; }

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

.sidebar {
    background: linear-gradient(180deg, var(--navy) 0%, #05183d 100%);
    color: #fff;
    padding: 24px 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
}

.sidebar-logo {
    background: #fff;
    border-radius: 20px;
    padding: 12px;
    margin-bottom: 24px;
}

.nav-section {
    margin: 22px 0 10px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255,255,255,.88);
    padding: 13px 14px;
    border-radius: 14px;
    font-weight: 800;
    margin-bottom: 7px;
}

.nav-link:hover, .nav-link.active {
    background: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
}

.nav-link.disabled {
    opacity: .48;
    cursor: not-allowed;
}

.main {
    padding: 28px;
}

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

.topbar h1 {
    margin: 0 0 6px;
    letter-spacing: -0.04em;
    font-size: 34px;
}

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

.user-pill {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    color: var(--navy);
    box-shadow: 0 10px 25px rgba(6,37,91,.07);
    white-space: nowrap;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}

.stat-card {
    padding: 22px;
}

.stat-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}

.stat-value {
    color: var(--navy);
    font-size: 30px;
    font-weight: 950;
    letter-spacing: -0.04em;
}

.panel {
    padding: 24px;
    margin-bottom: 22px;
}

.panel h2 { margin-bottom: 8px; }
.panel p { color: var(--muted); line-height: 1.65; }

.panel-title-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.panel-title-action h2 { margin-top: 0; }

.quick-action-form {
    flex: 0 0 auto;
    margin-top: 4px;
}

.quick-action-form .btn { white-space: nowrap; }

.status-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.status-box {
    padding: 18px;
    box-shadow: none;
}

.status-ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    color: var(--success);
}

.status-ok::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 16px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

th, td {
    padding: 14px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

th {
    background: var(--soft-2);
    color: var(--navy);
    font-weight: 900;
}

tr:last-child td { border-bottom: 0; }

.install-shell {
    padding: 38px 0;
}

.install-card {
    width: min(980px, calc(100% - 36px));
    margin: 0 auto;
    padding: 32px;
}

.install-header {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 26px;
    align-items: center;
    margin-bottom: 24px;
}

.footer-note {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    margin-top: 18px;
}

@media (max-width: 980px) {
    .auth-shell, .app-layout, .install-header { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
    .stats-grid, .status-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .grid-2, .stats-grid, .status-list { grid-template-columns: 1fr; }
    .main { padding: 18px; }
    .auth-card, .brand-panel, .panel { padding: 22px; }
}

.required { color: var(--danger); }

textarea { resize: vertical; min-height: 98px; }

.hero-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-left: 6px solid var(--green);
}

.btn-inline {
    width: auto !important;
    white-space: nowrap;
    padding-left: 26px;
    padding-right: 26px;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    gap: 22px;
    align-items: start;
}

.profile-form h2 {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.profile-form h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.form-actions .btn-primary { width: auto; }

.preview-panel {
    position: sticky;
    top: 28px;
}

.preview-logo-box {
    min-height: 160px;
    border-radius: 20px;
    border: 1px dashed var(--border);
    background: linear-gradient(135deg, #ffffff 0%, #f4f8fd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    margin-bottom: 18px;
}

.preview-logo-box img {
    max-height: 135px;
    object-fit: contain;
}

.preview-panel h3 {
    margin-bottom: 8px;
    font-size: 24px;
    letter-spacing: -0.03em;
}

.preview-lines {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.preview-lines strong { color: var(--navy); }

.signature-box {
    margin-top: 20px;
    padding: 16px;
    border-radius: 18px;
    background: var(--soft);
    border: 1px solid var(--border);
}

.signature-title {
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.signature-box img {
    max-height: 88px;
    max-width: 100%;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 8px;
}

.empty-signature {
    color: var(--muted);
    font-size: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed var(--border);
}

.mini-alert {
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 13px;
}

@media (max-width: 1080px) {
    .profile-grid { grid-template-columns: 1fr; }
    .preview-panel { position: static; }
    .hero-panel { flex-direction: column; align-items: flex-start; }
}

.small-stat {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.chip, .tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 14px;
    background: #eef5ff;
    color: var(--navy);
    border: 1px solid var(--border);
    font-weight: 900;
    font-size: 13px;
}

.chip:hover { text-decoration: none; background: #e2f0ff; }

.inline-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
    margin: 18px 0 22px;
}

.setup-form .form-group { margin-bottom: 0; }
.stack-form { margin: 18px 0 22px; }

.checkline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.checkline input {
    width: auto;
    min-height: auto;
    transform: scale(1.08);
}

.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #b42318, #d92d20);
}

.btn-small {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 11px;
    font-size: 12px;
}

.table-edit-form {
    display: grid;
    grid-template-columns: 1.3fr 150px 150px 130px 110px auto auto;
    gap: 10px;
    align-items: center;
}

.wide-edit-form {
    grid-template-columns: 140px 1.15fr 80px 140px 140px 160px 125px 100px auto auto;
}

.compact-table td { vertical-align: middle; }

.setup-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.muted-text { color: var(--muted); font-size: 13px; }

.mini-table-wrap { margin-top: 16px; }

.mini-edit-form {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(95px, .8fr) 78px 90px auto auto;
    gap: 8px;
    align-items: center;
}

.mini-edit-form input,
.mini-edit-form select,
.table-edit-form input,
.table-edit-form select,
.row-actions input,
.row-actions select {
    min-height: 40px;
    border-radius: 11px;
    font-size: 13px;
    padding: 8px 10px;
}

.tag-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.tag-form { margin: 0; }
.tag button {
    border: 0;
    background: var(--navy);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-weight: 900;
    cursor: pointer;
}

.muted-tag {
    color: var(--muted);
    background: #fff;
}

.row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.tiny-input { width: 70px; }

.two-status { grid-template-columns: 1fr 1fr; }

.mini-count-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.mini-count-grid div {
    padding: 16px;
    border: 1px solid var(--border);
    background: var(--soft);
    border-radius: 16px;
}

.mini-count-grid strong {
    display: block;
    color: var(--navy);
    font-size: 30px;
    letter-spacing: -0.04em;
}

.mini-count-grid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

@media (max-width: 1240px) {
    .table-edit-form, .wide-edit-form, .mini-edit-form { grid-template-columns: 1fr 1fr; }
    .inline-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .setup-two-col { grid-template-columns: 1fr; }
    .inline-form { grid-template-columns: 1fr; }
    .mini-count-grid, .two-status { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .table-edit-form, .wide-edit-form, .mini-edit-form { grid-template-columns: 1fr; }
    .mini-count-grid, .two-status { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .panel-title-action { flex-direction: column; }
    .quick-action-form { width: 100%; }
    .quick-action-form .btn { width: 100%; }
}

/* Module 03B: Responsive width and mobile polish */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    -webkit-text-size-adjust: 100%;
}

.app-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    width: 100%;
    max-width: 100vw;
}

.main,
.panel,
.topbar,
.stats-grid,
.status-list,
.setup-two-col,
.profile-grid,
.table-wrap,
.install-card,
.auth-shell,
.brand-panel,
.auth-card {
    min-width: 0;
    max-width: 100%;
}

.main {
    width: 100%;
    overflow-x: hidden;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-wrap table {
    min-width: 760px;
}

.table-wrap .compact-table {
    min-width: 860px;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.stat-value,
.small-stat,
.topbar h1,
.panel h2,
.preview-panel h3 {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 980px) {
    .app-layout {
        display: block;
        max-width: 100vw;
    }

    .sidebar {
        position: relative;
        height: auto;
        max-height: none;
        width: 100%;
        padding: 14px;
        overflow: visible;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .sidebar-logo {
        width: min(320px, 100%);
        margin: 0 auto 14px;
        border-radius: 16px;
        padding: 8px;
    }

    .sidebar-logo img {
        display: block;
        max-height: 100px;
        width: 100%;
        object-fit: contain;
    }

    .nav-section {
        margin: 14px 0 8px;
        text-align: center;
    }

    .nav-link {
        justify-content: center;
        padding: 11px 12px;
        font-size: 14px;
    }

    .main {
        padding: 18px;
    }
}

@media (max-width: 760px) {
    .topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar h1 {
        font-size: clamp(25px, 7vw, 32px);
    }

    .user-pill {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .hero-panel {
        align-items: stretch;
    }

    .quick-links,
    .form-actions {
        width: 100%;
    }

    .quick-links {
        justify-content: stretch;
    }

    .chip {
        flex: 1 1 calc(50% - 10px);
        justify-content: center;
        text-align: center;
    }

    .btn,
    .btn-inline,
    .form-actions .btn-primary {
        width: 100% !important;
    }

    .panel-title-action {
        align-items: stretch;
    }

    .table-wrap::before {
        content: 'Swipe sideways to view full table';
        display: block;
        padding: 10px 12px;
        background: var(--soft-2);
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 620px) {
    .container {
        width: calc(100% - 24px);
    }

    .main {
        padding: 12px;
    }

    .panel,
    .auth-card,
    .brand-panel,
    .install-card,
    .stat-card,
    .status-box {
        padding: 16px;
        border-radius: 18px;
    }

    .stats-grid,
    .status-list,
    .setup-two-col,
    .profile-grid,
    .grid-2,
    .inline-form,
    .mini-count-grid,
    .two-status {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .checkline {
        width: 100%;
        white-space: normal;
        justify-content: flex-start;
    }

    .tag-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tag,
    .tag-form {
        width: 100%;
        justify-content: space-between;
    }

    .table-edit-form,
    .wide-edit-form,
    .mini-edit-form,
    .row-actions {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    .row-actions {
        display: grid;
    }

    .tiny-input {
        width: 100%;
    }

    .table-wrap table {
        min-width: 720px;
    }
}

@media (max-width: 420px) {
    .main {
        padding: 10px;
    }

    .panel,
    .auth-card,
    .brand-panel,
    .install-card,
    .stat-card,
    .status-box {
        padding: 14px;
        border-radius: 16px;
    }

    .topbar h1 {
        font-size: 24px;
    }

    .card-title {
        font-size: 24px;
    }

    .chip {
        flex-basis: 100%;
    }
}

/* Module 04: Student Management */
.student-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 22px;
    align-items: start;
    margin-top: 18px;
}

.student-main-fields h3 {
    color: var(--navy);
    margin: 22px 0 14px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    letter-spacing: -0.02em;
}

.student-photo-card {
    position: sticky;
    top: 24px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #ffffff 0%, #f4f8fd 100%);
}

.student-photo-preview {
    min-height: 210px;
    border-radius: 20px;
    background: #fff;
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
}

.student-photo-preview img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.student-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(160px, .7fr);
    gap: 14px;
    align-items: end;
    margin: 18px 0 22px;
}

.student-filter-form .form-group { margin-bottom: 0; }

.student-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--soft);
    display: block;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid var(--border);
    background: var(--soft);
    color: var(--navy);
    white-space: nowrap;
}

.badge-active { color: var(--success); background: #ecfdf3; border-color: #abefc6; }
.badge-graduated { color: var(--navy); background: #eef5ff; border-color: #b9d8ff; }
.badge-transferred { color: var(--warning); background: #fffaeb; border-color: #fedf89; }
.badge-withdrawn { color: var(--danger); background: #fef3f2; border-color: #fecdca; }

.student-table td { vertical-align: middle; }

@media (max-width: 1120px) {
    .student-form-grid { grid-template-columns: 1fr; }
    .student-photo-card { position: static; }
    .student-filter-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .student-filter-form { grid-template-columns: 1fr; }
    .filter-actions .btn { width: 100% !important; }
}

/* Module 05: Score Structure and Grading Setup */
.score-setup-grid {
    align-items: stretch;
}

.template-tags .tag {
    text-decoration: none;
}

.tag-active {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    color: #fff;
    border-color: rgba(18,103,216,.35);
}

.score-template-edit-form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.3fr) 120px 130px minmax(120px, .7fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

.component-add-form {
    grid-template-columns: minmax(160px, 1fr) 100px 120px 90px auto;
}

.assign-template-form {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto;
}

.grade-add-form {
    grid-template-columns: 90px 90px 100px minmax(160px, 1fr) 90px 80px auto;
}

.component-row-form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 110px 110px 90px 130px auto;
    gap: 8px;
    align-items: center;
}

.grade-row-form {
    display: grid;
    grid-template-columns: 90px 90px 90px minmax(160px, 1fr) 90px 80px 120px auto;
    gap: 8px;
    align-items: center;
}

.inline-delete-form {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.component-row-form input,
.component-row-form select,
.grade-row-form input,
.grade-row-form select,
.score-template-edit-form input,
.score-template-edit-form select {
    min-height: 40px;
    border-radius: 11px;
    font-size: 13px;
    padding: 8px 10px;
}

.score-components-table td,
.grading-table td {
    vertical-align: top;
}

.rules-form .checkline {
    margin: 5px 0;
    min-height: 30px;
}

@media (max-width: 1240px) {
    .score-template-edit-form,
    .component-add-form,
    .assign-template-form,
    .grade-add-form,
    .component-row-form,
    .grade-row-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .score-template-edit-form,
    .component-add-form,
    .assign-template-form,
    .grade-add-form,
    .component-row-form,
    .grade-row-form {
        grid-template-columns: 1fr;
    }

    .inline-delete-form {
        justify-content: stretch;
    }

    .inline-delete-form .btn {
        width: 100%;
    }
}

/* Module 06: Score Entry */
.score-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .7fr) minmax(220px, 1.2fr) minmax(160px, .65fr);
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}

.score-filter-form .form-group { margin-bottom: 0; }

.score-entry-table-wrap table {
    min-width: 980px;
}

.score-entry-table th,
.score-entry-table td {
    vertical-align: middle;
}

.score-entry-table input[type="number"] {
    min-height: 42px;
    border-radius: 11px;
    font-size: 14px;
    padding: 8px 10px;
    font-weight: 800;
    text-align: center;
}

.score-entry-table input[readonly] {
    background: #f2f4f7;
    cursor: not-allowed;
}

.row-total {
    color: var(--navy);
    font-size: 17px;
    font-weight: 950;
}

.row-grade {
    color: var(--blue);
    font-weight: 950;
}

.badge-draft { color: var(--navy); background: #eef5ff; border-color: #b9d8ff; }
.badge-submitted { color: var(--warning); background: #fffaeb; border-color: #fedf89; }
.badge-approved { color: var(--success); background: #ecfdf3; border-color: #abefc6; }
.badge-locked { color: #fff; background: var(--navy); border-color: var(--navy); }

@media (max-width: 980px) {
    .score-filter-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .score-filter-form { grid-template-columns: 1fr; }
    .score-entry-table-wrap table { min-width: 900px; }
}

/* Module 07: Attendance and Affective/Psychomotor Ratings */
.attendance-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, .7fr) minmax(160px, .55fr);
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}

.attendance-filter-form .form-group,
.trait-add-form .form-group { margin-bottom: 0; }

.attendance-table-wrap table {
    min-width: 1280px;
}

.attendance-ratings-table th,
.attendance-ratings-table td {
    vertical-align: middle;
}

.attendance-ratings-table input[type="number"],
.attendance-ratings-table select,
.attendance-ratings-table input[type="text"] {
    min-height: 40px;
    border-radius: 11px;
    font-size: 13px;
    padding: 8px 10px;
}

.attendance-ratings-table input[type="number"] {
    width: 90px;
    font-weight: 900;
    text-align: center;
}

.attendance-ratings-table select {
    min-width: 120px;
    font-weight: 800;
}

.attendance-ratings-table input[readonly] {
    background: #f2f4f7;
    cursor: not-allowed;
}

.trait-add-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(150px, .8fr) 110px 110px auto;
    gap: 14px;
    align-items: end;
    margin: 18px 0 22px;
}

.trait-row-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(130px, .75fr) 90px 90px 120px auto;
    gap: 8px;
    align-items: center;
}

.trait-row-form input,
.trait-row-form select {
    min-height: 40px;
    border-radius: 11px;
    font-size: 13px;
    padding: 8px 10px;
}

.traits-table td {
    vertical-align: middle;
}

@media (max-width: 1080px) {
    .attendance-filter-form,
    .trait-add-form,
    .trait-row-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .attendance-filter-form,
    .trait-add-form,
    .trait-row-form {
        grid-template-columns: 1fr;
    }

    .attendance-table-wrap table {
        min-width: 1180px;
    }
}


/* Module 08: Comment Bank and Report Card Preparation */
.comment-setup-grid {
    align-items: start;
}

.comment-bank-add-form {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) 100px 100px minmax(170px, 1fr) 90px minmax(170px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin: 18px 0 22px;
}

.comment-bank-add-form .form-group,
.report-prep-filter-form .form-group,
.report-prep-defaults-form .form-group {
    margin-bottom: 0;
}

.comment-row-form {
    display: grid;
    grid-template-columns: 145px 85px 85px minmax(150px, .85fr) 75px 115px minmax(260px, 1.3fr) auto;
    gap: 8px;
    align-items: center;
}

.comment-row-form input,
.comment-row-form select,
.comment-row-form textarea,
.comment-bank-add-form input,
.comment-bank-add-form select,
.comment-bank-add-form textarea {
    min-height: 40px;
    border-radius: 11px;
    font-size: 13px;
    padding: 8px 10px;
}

.comment-row-form textarea,
.comment-bank-add-form textarea {
    min-height: 62px;
}

.report-prep-filter-form {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(220px, 1fr) minmax(160px, .65fr) auto;
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}

.report-prep-defaults-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.report-prep-table-wrap table {
    min-width: 1320px;
}

.report-prep-table th,
.report-prep-table td,
.comment-bank-table th,
.comment-bank-table td {
    vertical-align: top;
}

.report-prep-table textarea {
    min-height: 94px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.report-score-pill {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.report-score-pill strong {
    color: var(--navy);
    font-size: 20px;
}

.suggested-note {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 1280px) {
    .comment-bank-add-form,
    .comment-row-form,
    .report-prep-filter-form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .comment-bank-add-form,
    .comment-row-form,
    .report-prep-filter-form,
    .report-prep-defaults-form {
        grid-template-columns: 1fr;
    }

    .report-prep-table-wrap table {
        min-width: 1180px;
    }
}
.badge-prepared { color: var(--blue); background: #eff8ff; border-color: #b9e6fe; }
.badge-reviewed { color: var(--warning); background: #fffaeb; border-color: #fedf89; }

/* Module 08B: Teachers & Staff */
.teacher-add-form .form-grid,
.teacher-edit-form .form-grid {
    align-items: end;
}

.role-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.role-check-grid label {
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255,255,255,0.78);
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
    color: #1f2a44;
}

.compact-roles {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.signature-preview-small {
    max-width: 120px;
    max-height: 46px;
    object-fit: contain;
    display: block;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 10px;
}

.teacher-edit-form {
    min-width: 320px;
    display: grid;
    gap: 10px;
    padding: 12px;
    margin-top: 10px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.assignment-form {
    display: grid;
    gap: 12px;
}

.inline-filter-form select {
    min-width: 190px;
}

.teacher-table details summary {
    cursor: pointer;
    list-style: none;
}

.teacher-table details summary::-webkit-details-marker {
    display: none;
}

.report-prep-defaults-form select,
.report-prep-table select {
    width: 100%;
    min-width: 190px;
    margin-bottom: 8px;
}

@media (max-width: 760px) {
    .teacher-edit-form { min-width: 260px; }
    .inline-filter-form, .inline-filter-form select { width: 100%; }
}

/* Module 09: Professional Report Card Generator */
.report-card-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, .75fr) minmax(160px, .65fr) minmax(260px, 1.15fr) auto;
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}

.report-card-filter-form .form-group { margin-bottom: 0; }
.report-actions-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.btn-mini { min-height: 38px; padding: 8px 12px; border-radius: 11px; font-size: 12px; width: auto !important; }
.nowrap-actions { white-space: nowrap; display: flex; gap: 8px; flex-wrap: wrap; }
.preview-toolbar { border-left: 6px solid var(--blue); }
.report-preview-stack {
    display: grid;
    gap: 26px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    justify-items: center;
    padding-bottom: 14px;
}

.report-card-sheet {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto 28px;
    background: #fff;
    color: #121926;
    border: 1px solid rgba(15, 23, 42, .14);
    box-shadow: 0 28px 70px rgba(6,37,91,.16);
    padding: 12mm;
    position: relative;
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', serif;
}

.report-card-sheet *,
.report-card-sheet *::before,
.report-card-sheet *::after {
    box-sizing: border-box;
}

.report-card-sheet::before {
    content: '';
    position: absolute;
    inset: 6mm;
    border: 2px solid rgba(6, 37, 91, .12);
    pointer-events: none;
}

.report-header {
    display: grid;
    grid-template-columns: 30mm 1fr 38mm;
    gap: 10mm;
    align-items: center;
    border-bottom: 3px double var(--navy);
    padding-bottom: 5mm;
    position: relative;
    z-index: 1;
}

.report-logo-box {
    height: 26mm;
    display: flex;
    align-items: center;
    justify-content: center;
}

.report-logo-box img { max-height: 26mm; object-fit: contain; }
.report-school-head { text-align: center; }
.report-school-head h2 { font-size: 21pt; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 2mm; color: var(--navy); line-height: 1.08; }
.report-school-head p { margin: 1mm 0; color: #344054; line-height: 1.25; font-size: 9pt; }
.report-motto { color: var(--green) !important; font-weight: 700; font-style: italic; }

.report-id-box {
    border: 1px solid rgba(6, 37, 91, .22);
    border-radius: 4mm;
    padding: 3mm;
    text-align: center;
    background: linear-gradient(135deg, #ffffff, #f5faff);
}
.report-id-box span { display: block; color: #667085; font-size: 7pt; text-transform: uppercase; font-weight: 800; letter-spacing: .12em; }
.report-id-box strong { display: block; color: var(--navy); font-size: 9pt; margin: 1.5mm 0; word-break: break-word; }
.report-id-box small { display: block; color: #344054; font-size: 7.5pt; line-height: 1.25; }
.report-title-bar { margin: 5mm 0; color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue), var(--green)); border-radius: 999px; padding: 2.2mm 7mm; text-align: center; text-transform: uppercase; font-weight: 900; letter-spacing: .18em; font-size: 10pt; position: relative; z-index: 1; font-family: Inter, Segoe UI, Arial, sans-serif; }

.student-report-info {
    display: grid;
    grid-template-columns: 26mm 1fr;
    gap: 5mm;
    align-items: stretch;
    position: relative;
    z-index: 1;
}
.student-photo-print { border: 1px solid rgba(6,37,91,.22); border-radius: 4mm; min-height: 30mm; display: flex; align-items: center; justify-content: center; padding: 1.5mm; background: #f8fbff; }
.student-photo-print img { width: 22mm; height: 27mm; object-fit: cover; border-radius: 3mm; }
.info-grid-print { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(6,37,91,.18); border-radius: 4mm; overflow: hidden; }
.info-grid-print div { padding: 2.5mm 3mm; border-right: 1px solid rgba(6,37,91,.12); border-bottom: 1px solid rgba(6,37,91,.12); min-height: 13mm; }
.info-grid-print div:nth-child(4n) { border-right: 0; }
.info-grid-print div:nth-last-child(-n+4) { border-bottom: 0; }
.info-grid-print span { display: block; color: #667085; font-size: 7pt; font-family: Inter, Segoe UI, Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1mm; }
.info-grid-print strong { display: block; color: var(--navy); font-size: 9pt; line-height: 1.2; }

.report-summary-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2mm; margin: 5mm 0; position: relative; z-index: 1; }
.report-summary-strip div { border: 1px solid rgba(6,37,91,.16); border-radius: 4mm; background: linear-gradient(135deg, #f9fbff, #ffffff); padding: 3mm; text-align: center; }
.report-summary-strip span { display: block; color: #667085; font-size: 7pt; text-transform: uppercase; font-weight: 800; font-family: Inter, Segoe UI, Arial, sans-serif; letter-spacing: .08em; }
.report-summary-strip strong { display: block; color: var(--green); font-size: 14pt; margin-top: 1mm; }

.report-section { position: relative; z-index: 1; border: 1px solid rgba(6,37,91,.15); border-radius: 4mm; padding: 3.2mm; background: rgba(255,255,255,.96); margin-bottom: 4mm; }
.report-section h3 { margin: 0 0 2.4mm; color: var(--navy); font-size: 9.2pt; text-transform: uppercase; letter-spacing: .12em; font-family: Inter, Segoe UI, Arial, sans-serif; border-bottom: 1px solid rgba(6,37,91,.14); padding-bottom: 1.7mm; }
.compact-section { padding: 3mm; }

.print-score-table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8.2pt; }
.print-score-table th { background: #eef5ff; color: var(--navy); padding: 2.2mm; font-size: 7.4pt; text-transform: uppercase; letter-spacing: .05em; }
.print-score-table td { padding: 2.1mm; border-bottom: 1px solid rgba(6,37,91,.12); vertical-align: top; overflow-wrap: anywhere; word-break: normal; }
.print-score-table small { color: #667085; font-size: 7pt; }
.component-cell { min-width: 24mm; }
.component-cell span { display: inline-block; margin: 0 .8mm .8mm 0; padding: .8mm 1.4mm; border-radius: 99px; background: #f2f7ff; color: #344054; font-size: 7.2pt; font-family: Inter, Segoe UI, Arial, sans-serif; font-weight: 800; }

.report-two-col-print { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; position: relative; z-index: 1; }
.attendance-print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm; }
.attendance-print-grid div { border-radius: 3mm; padding: 2.3mm; background: #f8fbff; border: 1px solid rgba(6,37,91,.11); text-align: center; }
.attendance-print-grid span { display: block; color: #667085; font-family: Inter, Segoe UI, Arial, sans-serif; font-size: 7pt; text-transform: uppercase; font-weight: 800; }
.attendance-print-grid strong { display: block; color: var(--navy); font-size: 13pt; margin-top: 1mm; }
.small-note-print { margin: 2mm 0 0; color: #344054; font-size: 8pt; }
.comment-print-box { color: #344054; font-size: 8.7pt; line-height: 1.45; margin: 0; }
.traits-print-table { font-size: 7.8pt; }
.traits-print-table td { padding: 1.55mm 1.8mm; border-bottom: 1px solid rgba(6,37,91,.10); }
.traits-print-table td:first-child { color: var(--navy); font-weight: 700; }
.traits-print-table td:nth-child(2) { font-weight: 900; color: var(--green); white-space: nowrap; }
.comments-print { margin-top: 0; }
.comment-line-print { display: grid; grid-template-columns: 34mm 1fr; gap: 3mm; border-bottom: 1px dashed rgba(6,37,91,.18); padding: 2mm 0; }
.comment-line-print:last-child { border-bottom: 0; }
.comment-line-print span { color: var(--navy); font-weight: 900; font-size: 8.2pt; }
.comment-line-print p { margin: 0; color: #344054; font-size: 8.5pt; line-height: 1.45; }
.signature-row-print { display: grid; grid-template-columns: 1fr 1fr; gap: 22mm; margin-top: 5mm; position: relative; z-index: 1; }
.signature-row-print div { text-align: center; border-top: 1px solid var(--navy); padding-top: 2mm; min-height: 18mm; }
.signature-row-print img { max-height: 12mm; object-fit: contain; display: block; margin: -14mm auto 1mm; background: #fff; }
.signature-row-print strong { display: block; color: var(--navy); font-size: 9pt; }
.signature-row-print span { display: block; color: #667085; font-size: 7.6pt; font-family: Inter, Segoe UI, Arial, sans-serif; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
.report-footer-note-print { position: relative; z-index: 1; text-align: center; color: #667085; font-size: 7.5pt; margin: 3mm 0 0; }

@media (max-width: 1180px) {
    .report-card-filter-form { grid-template-columns: 1fr 1fr; }
    .report-card-sheet { width: min(210mm, 100%); padding: 8mm; }
}
@media (max-width: 760px) {
    .report-card-filter-form { grid-template-columns: 1fr; }
    .report-actions-group, .report-actions-group .btn { width: 100% !important; }
    .report-card-main { overflow-x: hidden; }
    .report-preview-stack { overflow-x: auto; padding-bottom: 12px; justify-items: start; }
    .report-card-sheet { width: 210mm; max-width: none; min-width: 210mm; margin-left: 0; margin-right: 0; }
}

@page { size: A4; margin: 0; }
@media print {
    html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; width: 210mm !important; overflow: hidden !important; }
    .no-print, .sidebar, .topbar, .stats-grid, .panel.preview-toolbar { display: none !important; }
    .app-layout { display: block !important; min-height: 0 !important; width: 210mm !important; max-width: 210mm !important; overflow: hidden !important; }
    .main { padding: 0 !important; margin: 0 !important; width: 210mm !important; max-width: 210mm !important; overflow: hidden !important; }
    .report-preview-stack { display: block !important; gap: 0 !important; max-width: 210mm !important; overflow: hidden !important; padding: 0 !important; }
    .report-card-sheet { box-sizing: border-box !important; width: 210mm !important; max-width: 210mm !important; min-width: 0 !important; min-height: 297mm !important; margin: 0 !important; padding: 8mm !important; box-shadow: none !important; border: 0 !important; page-break-after: always; break-after: page; overflow: hidden !important; }
    .report-card-sheet:last-child { page-break-after: auto; break-after: auto; }
    .report-card-sheet::before { inset: 5mm; }
}

/* Module 10: Broadsheet / Class Result Sheet */
.broadsheet-filter-form {
    display: grid;
    grid-template-columns: minmax(200px, .75fr) minmax(180px, .65fr) minmax(320px, 1.4fr);
    gap: 14px;
    align-items: end;
    margin-top: 18px;
}

.broadsheet-filter-form .form-group { margin-bottom: 0; }
.broadsheet-actions-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.broadsheet-preview-stack { overflow-x: auto; padding-bottom: 16px; }

.broadsheet-sheet {
    width: 297mm;
    min-height: 210mm;
    margin: 0 auto 28px;
    background: #fff;
    color: #121926;
    border: 1px solid rgba(15, 23, 42, .14);
    box-shadow: 0 28px 70px rgba(6,37,91,.16);
    padding: 9mm;
    position: relative;
    overflow: hidden;
    font-family: Inter, Segoe UI, Arial, sans-serif;
}

.broadsheet-sheet::before {
    content: '';
    position: absolute;
    inset: 5mm;
    border: 2px solid rgba(6, 37, 91, .10);
    pointer-events: none;
}

.broadsheet-header {
    display: grid;
    grid-template-columns: 28mm 1fr 60mm;
    gap: 8mm;
    align-items: center;
    border-bottom: 3px double var(--navy);
    padding-bottom: 4mm;
    position: relative;
    z-index: 1;
}

.broadsheet-logo { height: 24mm; display: flex; align-items: center; justify-content: center; }
.broadsheet-logo img { max-height: 24mm; max-width: 28mm; object-fit: contain; }
.broadsheet-header h2 { margin: 0 0 1.5mm; color: var(--navy); text-transform: uppercase; font-size: 18pt; line-height: 1.08; letter-spacing: .04em; }
.broadsheet-header p { margin: .8mm 0; color: #344054; font-size: 8.2pt; line-height: 1.25; }
.broadsheet-meta { border: 1px solid rgba(6,37,91,.18); border-radius: 4mm; background: linear-gradient(135deg, #ffffff, #f5faff); padding: 3mm; text-align: center; }
.broadsheet-meta strong { display: block; color: var(--navy); font-size: 9.2pt; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.3mm; }
.broadsheet-meta span, .broadsheet-meta small { display: block; color: #344054; font-size: 7.8pt; line-height: 1.35; }
.broadsheet-meta small { color: #667085; margin-top: 1.3mm; }

.broadsheet-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2mm;
    margin: 4mm 0;
    position: relative;
    z-index: 1;
}

.broadsheet-summary-strip div {
    border: 1px solid rgba(6,37,91,.14);
    border-radius: 3mm;
    background: linear-gradient(135deg, #f9fbff, #fff);
    padding: 2.3mm 2mm;
    text-align: center;
}

.broadsheet-summary-strip span { display: block; color: #667085; text-transform: uppercase; font-weight: 900; font-size: 6.6pt; letter-spacing: .08em; }
.broadsheet-summary-strip strong { display: block; color: var(--green); font-size: 10pt; margin-top: .8mm; line-height: 1.15; }

.broadsheet-table-wrap { position: relative; z-index: 1; overflow-x: auto; border: 1px solid rgba(6,37,91,.14); border-radius: 3mm; }
.broadsheet-table { width: 100%; border-collapse: collapse; font-size: 7.4pt; background: #fff; }
.broadsheet-table th { background: linear-gradient(135deg, #eef5ff, #f8fbff); color: var(--navy); text-transform: uppercase; letter-spacing: .04em; font-size: 6.4pt; padding: 1.8mm 1.3mm; border-right: 1px solid rgba(6,37,91,.12); border-bottom: 1px solid rgba(6,37,91,.18); vertical-align: middle; }
.broadsheet-table td { padding: 1.55mm 1.25mm; border-right: 1px solid rgba(6,37,91,.10); border-bottom: 1px solid rgba(6,37,91,.10); vertical-align: middle; text-align: center; }
.broadsheet-table tr:nth-child(even) td { background: #fbfdff; }
.broadsheet-table .student-name-col { min-width: 43mm; text-align: left; }
.broadsheet-table .serial-col { width: 10mm; }
.broadsheet-table .subject-col { min-width: 16mm; max-width: 22mm; }
.broadsheet-table .subject-score-cell strong { display: block; color: var(--navy); font-size: 7.8pt; line-height: 1; }
.broadsheet-table .subject-score-cell small { display: block; color: var(--green); font-weight: 900; font-size: 6.2pt; margin-top: .5mm; }
.muted-dash { color: #98a2b3; }

.broadsheet-subject-summary { margin-top: 4mm; position: relative; z-index: 1; border: 1px solid rgba(6,37,91,.14); border-radius: 3mm; padding: 2.5mm; }
.broadsheet-subject-summary h3 { margin: 0 0 2mm; color: var(--navy); font-size: 8pt; text-transform: uppercase; letter-spacing: .1em; }
.broadsheet-summary-table { width: 100%; border-collapse: collapse; font-size: 7pt; }
.broadsheet-summary-table th { background: #eef5ff; color: var(--navy); padding: 1.5mm; text-align: left; }
.broadsheet-summary-table td { padding: 1.3mm 1.5mm; border-bottom: 1px solid rgba(6,37,91,.10); }
.broadsheet-summary-table td:not(:first-child), .broadsheet-summary-table th:not(:first-child) { text-align: center; }

.broadsheet-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20mm;
    margin-top: 10mm;
    position: relative;
    z-index: 1;
}
.broadsheet-footer div { border-top: 1px solid var(--navy); text-align: center; padding-top: 2mm; min-height: 12mm; }
.broadsheet-footer span { color: #667085; font-size: 7.2pt; text-transform: uppercase; font-weight: 900; letter-spacing: .08em; }

@media (max-width: 1180px) {
    .broadsheet-filter-form { grid-template-columns: 1fr 1fr; }
    .broadsheet-actions-group { grid-column: 1 / -1; }
    .broadsheet-sheet { width: min(297mm, 100%); }
}

@media (max-width: 760px) {
    .broadsheet-filter-form { grid-template-columns: 1fr; }
    .broadsheet-actions-group, .broadsheet-actions-group .btn { width: 100% !important; }
    .broadsheet-main { overflow-x: hidden; }
    .broadsheet-preview-stack { overflow-x: auto; }
    .broadsheet-sheet { min-width: 1100px; margin-left: 0; margin-right: 0; }
}

@media print {
    .broadsheet-preview-stack { display: block !important; overflow: visible !important; padding: 0 !important; }
    .broadsheet-sheet { width: 100% !important; min-height: 194mm !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; page-break-after: always; break-after: page; }
    .broadsheet-sheet:last-child { page-break-after: auto; break-after: auto; }
    .broadsheet-sheet::before { inset: 0; border-color: rgba(6,37,91,.12); }
    .broadsheet-header { grid-template-columns: 22mm 1fr 55mm; gap: 5mm; padding: 4mm 5mm 3mm; }
    .broadsheet-summary-strip { margin: 3mm 5mm; }
    .broadsheet-table-wrap { margin: 0 5mm; overflow: visible !important; }
    .broadsheet-subject-summary { margin: 3mm 5mm 0; }
    .broadsheet-footer { margin: 8mm 8mm 0; }
}

/* Module 13: User Roles and Staff Login Control */
.user-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
}
.user-form-grid .full-width { grid-column: 1 / -1; }
.user-table-wrap table { min-width: 1120px; }
.inline-reset-form {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    gap: 8px;
    align-items: center;
}
.inline-reset-form input {
    min-height: 38px;
    border-radius: 11px;
    font-size: 13px;
    padding: 8px 10px;
}
.row-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.row-action-stack form { margin: 0; }
@media (max-width: 920px) {
    .user-form-grid { grid-template-columns: 1fr; }
}

/* Module 13B - Advanced Permissions */
.permission-matrix-wrap {
    max-width: 100%;
    overflow-x: auto;
}
.permission-table {
    min-width: 980px;
}
.permission-table th,
.permission-table td {
    vertical-align: middle;
    white-space: nowrap;
}
.permission-table th:first-child,
.permission-table td:first-child {
    min-width: 220px;
    white-space: normal;
}
.center-cell {
    text-align: center;
}
.permission-select {
    min-width: 92px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .15);
    background: #fff;
    font-weight: 700;
    font-size: 12px;
}
.compact-filter {
    align-items: end;
    margin-bottom: 16px;
}
.mt-10 {
    margin-top: 10px;
}
.btn-mini {
    padding: 6px 10px;
    font-size: 12px;
}
@media (max-width: 768px) {
    .permission-table { min-width: 920px; }
    .permission-select { min-width: 86px; padding: 7px 8px; }
}

/* Marketplace layout cards */
.card {
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(217,228,242,.95);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 22px;
}
.grid.two-col, .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}
.stat-mini {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.badge-pending { color: var(--warning); background: #fffaeb; border-color: #fedf89; }
code {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    background: var(--soft-2);
    border: 1px solid var(--border);
    color: var(--navy);
    border-radius: 10px;
    padding: 4px 7px;
    font-weight: 800;
}
@media (max-width: 900px) {
    .grid.two-col, .two-col { grid-template-columns: 1fr; }
}



/* Premium Glassy UI Polish
   Applies a refined classic-modern glassmorphism layer across School Report Master. */
:root {
    --glass-bg: rgba(255, 255, 255, .78);
    --glass-bg-strong: rgba(255, 255, 255, .91);
    --glass-line: rgba(255, 255, 255, .72);
    --premium-shadow: 0 24px 70px rgba(6, 37, 91, .13), 0 2px 8px rgba(6, 37, 91, .05);
    --premium-shadow-soft: 0 16px 45px rgba(6, 37, 91, .10);
    --navy-glow: rgba(6, 37, 91, .18);
    --blue-glow: rgba(18, 103, 216, .18);
    --green-glow: rgba(60, 159, 37, .14);
}

body {
    background:
        radial-gradient(circle at 0% 0%, rgba(18,103,216,.18), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(60,159,37,.16), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(6,37,91,.08), transparent 36%),
        linear-gradient(135deg, #fbfdff 0%, #f4f8ff 45%, #eef6ff 100%);
    background-attachment: fixed;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
    z-index: -1;
}

.app-layout {
    background:
        radial-gradient(circle at 75% 5%, rgba(18,103,216,.08), transparent 24%),
        radial-gradient(circle at 95% 55%, rgba(60,159,37,.08), transparent 28%);
}

.sidebar {
    position: sticky;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(6,37,91,.98) 0%, rgba(7,30,72,.98) 52%, rgba(3,17,43,.99) 100%);
    box-shadow: 20px 0 50px rgba(6,37,91,.18);
    border-right: 1px solid rgba(255,255,255,.10);
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.16), transparent 24%),
        radial-gradient(circle at 85% 0%, rgba(60,159,37,.18), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%);
    z-index: -1;
}

.sidebar > * { position: relative; z-index: 1; }

.sidebar-logo {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    backdrop-filter: blur(18px);
}

.sidebar-logo img {
    display: block;
    max-height: 92px;
    width: 100%;
    object-fit: contain;
}

.nav-section {
    color: rgba(255,255,255,.64);
}

.nav-link {
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .5s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: translateX(120%);
}

.nav-link:hover,
.nav-link.active {
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    border-color: rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 24px rgba(0,0,0,.16);
    transform: translateX(2px);
}

.main {
    padding: 30px;
}

.topbar {
    padding: 20px 22px;
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid rgba(255,255,255,.76);
    box-shadow: var(--premium-shadow-soft);
    backdrop-filter: blur(20px);
}

.topbar h1 {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.user-pill {
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,245,255,.88));
    border-color: rgba(18,103,216,.18);
    box-shadow: 0 14px 32px rgba(6,37,91,.10);
}

.panel,
.card,
.stat-card,
.status-box,
.auth-card,
.brand-panel,
.install-card,
.student-photo-card,
.preview-panel,
.signature-box {
    background: var(--glass-bg-strong);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: var(--premium-shadow);
    backdrop-filter: blur(20px);
    position: relative;
}

.panel,
.card,
.stat-card,
.status-box,
.auth-card,
.brand-panel,
.install-card {
    overflow: hidden;
}

.panel::before,
.card::before,
.stat-card::before,
.status-box::before,
.auth-card::before,
.brand-panel::before,
.install-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), transparent);
    pointer-events: none;
}

.panel::after,
.card::after,
.stat-card::after,
.auth-card::after,
.brand-panel::after,
.install-card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -85px;
    top: -105px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18,103,216,.12), transparent 68%);
    pointer-events: none;
}

.stat-card {
    transition: transform .18s ease, box-shadow .18s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 75px rgba(6,37,91,.16);
}

.stat-label,
.card-subtitle,
.panel p,
.muted-text,
.footer-note,
.help-text {
    color: #5b667b;
}

.stat-value,
.card-title,
.panel h2,
.preview-panel h3 {
    letter-spacing: -.035em;
}

input,
select,
textarea {
    background: rgba(255,255,255,.92);
    border-color: rgba(6,37,91,.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px rgba(6,37,91,.04);
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(18,103,216,.30);
}

input:focus,
select:focus,
textarea:focus {
    background: #fff;
    border-color: rgba(18,103,216,.85);
    box-shadow: 0 0 0 4px rgba(18,103,216,.12), 0 12px 28px rgba(18,103,216,.08);
}

label {
    letter-spacing: .01em;
}

.btn {
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: 0 14px 28px rgba(6,37,91,.12);
}

.btn-primary {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 54%, var(--green) 115%);
    box-shadow: 0 18px 34px rgba(18,103,216,.24), inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-secondary,
.chip,
.tag {
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(238,245,255,.88));
    border-color: rgba(18,103,216,.16);
    box-shadow: 0 10px 22px rgba(6,37,91,.07);
}

.btn-danger {
    box-shadow: 0 16px 30px rgba(180,35,24,.18), inset 0 1px 0 rgba(255,255,255,.16);
}

.alert {
    box-shadow: 0 12px 28px rgba(6,37,91,.07);
    border-width: 1px;
}

.table-wrap,
.permission-matrix-wrap,
.broadsheet-table-wrap {
    background: rgba(255,255,255,.72);
    border-color: rgba(6,37,91,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

table {
    background: rgba(255,255,255,.94);
}

th {
    background: linear-gradient(135deg, rgba(238,245,255,.98), rgba(248,251,255,.98));
    border-bottom-color: rgba(6,37,91,.12);
}

td {
    background-clip: padding-box;
}

tr:hover td {
    background: rgba(244,248,253,.72);
}

.badge {
    box-shadow: 0 8px 18px rgba(6,37,91,.06);
}

.badge-active,
.badge-approved {
    background: linear-gradient(135deg, #ecfdf3, #f6fff9);
}

.badge-locked {
    background: linear-gradient(135deg, var(--navy), #0b3477);
}

code {
    background: linear-gradient(135deg, #eef5ff, #f8fbff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.preview-logo-box,
.student-photo-preview,
.empty-signature {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,248,253,.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.hero-panel {
    border-left: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,245,255,.78)),
        radial-gradient(circle at right top, rgba(60,159,37,.18), transparent 34%);
}

.hero-panel::before {
    height: 5px;
    background: linear-gradient(90deg, var(--navy), var(--blue), var(--green));
}



.auth-shell {
    padding-top: 60px;
    padding-bottom: 60px;
}

.brand-logo {
    filter: drop-shadow(0 18px 26px rgba(6,37,91,.11));
}

/* Better mobile polish */
@media (max-width: 980px) {
    .sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 18px 44px rgba(6,37,91,.18);
    }

    .nav-link:hover,
    .nav-link.active {
        transform: none;
    }

    .main {
        padding: 18px;
    }
}

@media (max-width: 760px) {
    .topbar {
        padding: 18px;
        border-radius: 20px;
    }

    .main {
        padding: 14px;
    }
}

@media print {
    body,
    .app-layout,
    .main,
    .panel,
    .card,
    .stat-card,
    .status-box,
    .topbar,
    .auth-card,
    .brand-panel,
    .install-card {
        background: #fff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body::before,
    .sidebar,
    .topbar,
    .panel::before,
    .panel::after,
    .card::before,
    .card::after,
    .stat-card::before,
    .stat-card::after {
        display: none !important;
    }
}

/* Developers Page */
.developer-hero {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    overflow: hidden;
}

.developer-brand {
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 16px 40px rgba(6,37,91,.10);
}

.developer-brand img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.developer-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.info-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
}

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

.info-card-soft {
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(14px);
}

.developer-detail-list {
    display: grid;
    gap: 12px;
}

.developer-detail-list div {
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f6faff 100%);
}

.developer-detail-list strong {
    display: block;
    color: var(--navy);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
}

.developer-detail-list span {
    color: var(--text);
    font-weight: 700;
    line-height: 1.45;
}

.notice-panel {
    border-left: 6px solid var(--blue);
}

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

.step-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #ffffff 0%, #f5faff 100%);
}

.step-item > span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 950;
    background: linear-gradient(135deg, var(--navy), var(--blue), var(--green));
    box-shadow: 0 12px 24px rgba(18,103,216,.20);
}

.step-item strong {
    color: var(--navy);
    font-size: 16px;
}

.step-item p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.clean-list {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.8;
    font-weight: 650;
}

.stat-code-mini {
    font-size: 16px;
    letter-spacing: -0.01em;
    word-break: break-word;
}

@media (max-width: 980px) {
    .developer-hero,
    .three-info,
    .step-list {
        grid-template-columns: 1fr;
    }

    .developer-brand img {
        max-height: 150px;
    }
}

@media (max-width: 620px) {
    .developer-actions .btn-inline {
        width: 100% !important;
    }

    .step-item {
        grid-template-columns: 42px 1fr;
        padding: 15px;
    }

    .step-item > span {
        width: 42px;
        height: 42px;
    }
}

/* Demo package polish */
.demo-panel {
    border: 1px solid rgba(34, 197, 94, .24) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(231,246,255,.92) 48%, rgba(236,253,245,.90) 100%) !important;
    box-shadow: 0 18px 45px rgba(10, 48, 100, .10) !important;
}
.demo-panel h2 {
    color: var(--navy);
}
.demo-panel p {
    color: var(--muted);
    line-height: 1.65;
}


/* Demo front page and dashboard responsive polish */
.demo-front-panel .brand-logo {
    width: min(440px, 100%);
    margin-bottom: 22px;
}

.demo-login-board {
    margin-top: 24px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(217, 228, 242, .95);
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,245,255,.82));
}

.demo-board-title {
    color: var(--navy);
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 12px;
}

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

.demo-login-card {
    border-radius: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px rgba(6,37,91,.06);
    min-width: 0;
}

.demo-login-card span {
    display: block;
    color: var(--green);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.demo-login-card strong {
    display: block;
    color: var(--navy);
    font-size: 13px;
    word-break: break-all;
    line-height: 1.35;
}

.demo-login-card em {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.demo-reset-note {
    margin: 14px 0 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--muted) !important;
}

.quick-demo-login {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.quick-demo-login form { margin: 0; }
.demo-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 13px;
    font-size: 12px;
}

.mini-count-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    align-items: stretch;
}

.mini-count-grid div {
    min-width: 0;
    overflow: hidden;
}

.mini-count-grid strong {
    font-size: clamp(24px, 3vw, 30px);
}

.mini-count-grid span {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 1180px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }
    .demo-login-grid,
    .quick-demo-login {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .demo-front-panel .brand-logo {
        width: min(320px, 100%);
    }
}


/* Public demo web visit counter */
.demo-visit-counter {
    margin-top: 18px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(18, 103, 216, .18);
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,247,255,.86), rgba(238,253,245,.82));
    box-shadow: 0 18px 40px rgba(6,37,91,.10);
}

.counter-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.counter-head span {
    color: var(--green);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .10em;
}

.counter-head strong {
    color: var(--navy);
    font-size: 15px;
    font-weight: 950;
}

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

.counter-grid div {
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(217, 228, 242, .95);
    background: rgba(255,255,255,.90);
}

.counter-grid strong {
    display: block;
    color: var(--navy);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1;
    font-weight: 950;
}

.counter-grid span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.demo-visit-counter p {
    margin: 12px 0 0 !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.demo-visit-counter b {
    color: var(--navy);
}

@media (max-width: 620px) {
    .counter-head {
        align-items: start;
        flex-direction: column;
    }
    .counter-grid {
        grid-template-columns: 1fr;
    }
}