:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #14213d;
    background: #f6f8fb;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
}

a {
    color: inherit;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 22px;
    align-items: center;
    min-height: 96px;
    padding: 10px 28px;
    border-bottom: 1px solid #d9e1ec;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(14px);
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brandmark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #2563eb;
    box-shadow: 0 8px 20px rgb(37 99 235 / 28%);
    overflow: hidden;
}

.brandmark img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.topbar__brand strong,
.topbar__brand small {
    display: block;
}

.topbar__brand strong {
    font-size: 15px;
}

.topbar__brand small {
    color: #526176;
    font-size: 12px;
    font-weight: 700;
}

.topbar__nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.topbar__primary {
    align-self: end;
}

.topbar__secondary {
    grid-column: 2 / 4;
    align-self: start;
    padding-top: 2px;
}

.topbar__nav a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.topbar__nav a:hover,
.topbar__nav a.active {
    background: #eef2ff;
    color: #1d4ed8;
}

.topbar__secondary a {
    min-height: 32px;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
}

.topbar__secondary a:hover,
.topbar__secondary a.active {
    background: #dbeafe;
    color: #1e40af;
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.topbar__user form {
    margin: 0;
}

.topbar__user button {
    min-height: 36px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    color: #14213d;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.app-shell {
    min-height: 100vh;
}

.app-shell--with-topbar {
    min-height: calc(100vh - 96px);
}

.start-page,
.dashboard {
    min-height: 100vh;
    padding: 48px;
}

.start-page {
    display: grid;
    align-items: center;
}

.start-page__content,
.dashboard {
    max-width: 1120px;
    margin: 0 auto;
}

.brand {
    margin: 0 0 16px;
    color: #2563eb;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(36px, 7vw, 72px);
    line-height: 0.98;
    letter-spacing: 0;
}

p {
    max-width: 680px;
    color: #526176;
    font-size: 18px;
    line-height: 1.7;
}

.start-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.start-page__actions a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    color: #14213d;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
}

.start-page__actions a:first-child {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.stats-grid article,
.stats-grid a {
    display: block;
    min-height: 150px;
    padding: 22px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.stats-grid a:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
}

.stats-grid span {
    display: block;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.stats-grid strong {
    display: block;
    margin-top: 18px;
    font-size: 44px;
    line-height: 1;
}

.dashboard-insights {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 18px;
    margin-top: 22px;
}

.dashboard-today-panel {
    margin-top: 22px;
    padding: 22px;
}

.dashboard-today-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-today-head h2,
.dashboard-insights h2 {
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: 900;
}

.dashboard-today-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.dashboard-today-grid a {
    min-height: 106px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.dashboard-today-grid a:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
}

.dashboard-today-grid span {
    display: block;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
}

.dashboard-today-grid strong {
    display: block;
    margin-top: 12px;
    font-size: 34px;
    line-height: 1;
}

.template-type-grid {
    margin: 0 0 18px;
}

.template-config-editor {
    min-height: 360px;
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
}

.template-designer-note {
    margin: 18px 0 0;
}

.template-designer {
    margin-top: 22px;
    border-top: 1px solid #e2e8f0;
    padding-top: 22px;
}

.template-designer__toolbar,
.template-designer__workspace {
    display: grid;
    gap: 18px;
}

.template-designer__toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.template-designer__toolbar h2 {
    margin: 0;
    font-size: 22px;
}

.template-designer__toolbar-spacer {
    min-width: 1px;
}

.template-designer__tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.template-designer__format {
    display: grid;
    min-width: 112px;
    gap: 4px;
    color: #526176;
    font-size: 11px;
    font-weight: 900;
}

.template-designer__format:first-child {
    min-width: 245px;
}

.template-designer__format select,
.template-designer__format input {
    min-height: 34px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 9px;
    color: #14213d;
    font: inherit;
    font-size: 12px;
}

.template-designer__workspace {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
}

.template-designer__stage-wrap {
    display: grid;
    min-height: 560px;
    place-items: center;
    overflow: auto;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background:
        linear-gradient(45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef2f7 75%),
        linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
    background-color: #f8fafc;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    padding: 32px;
}

.template-designer__stage-wrap--label {
    min-height: 360px;
}

.template-designer__stage {
    position: relative;
    --stage-scale: 1.75;
    width: var(--card-width, 85.6mm);
    height: var(--card-height, 54mm);
    border: 1px solid #94a3b8;
    background: #ffffff;
    box-shadow: 0 18px 50px rgb(15 23 42 / 18%);
    overflow: hidden;
}

.template-designer__stage--label {
    --stage-scale: 1.75;
}

.designer-element {
    position: absolute;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px dashed transparent;
    background: transparent;
    color: #020617;
    cursor: move;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    padding: 0;
    z-index: 1;
}

.designer-element--shape {
    border-color: transparent;
}

.designer-element--shape > span,
.reading-card-template-shape,
.print-label-template-shape {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--shape-fill, #e5e7eb);
    border: 1px solid var(--shape-stroke, #e5e7eb);
}

.designer-element--shape[data-shape="circle"] > span,
.reading-card-template-shape[data-shape="circle"],
.print-label-template-shape[data-shape="circle"] {
    border-radius: 999px;
}

.designer-element--shape[data-shape="triangle"] > span,
.reading-card-template-shape[data-shape="triangle"],
.print-label-template-shape[data-shape="triangle"] {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.designer-element--shape[data-shape="hexagon"] > span,
.reading-card-template-shape[data-shape="hexagon"],
.print-label-template-shape[data-shape="hexagon"] {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.designer-element:hover,
.designer-element.is-selected {
    border-color: #2563eb;
    background: rgb(37 99 235 / 8%);
    outline: 2px solid rgb(37 99 235 / 12%);
}

.designer-text-content {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 1;
    text-overflow: clip;
}

.designer-logo-box {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    font-size: 3.4mm;
    font-weight: 800;
}

.designer-logo-box--image {
    border: 0;
    background: transparent;
}

.designer-logo-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.designer-barcode {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: end;
    overflow: hidden;
}

.designer-barcode span {
    display: block;
    height: 100%;
    background: repeating-linear-gradient(90deg, currentColor 0 3px, #fff 3px 5px, currentColor 5px 7px, #fff 7px 11px);
}

.designer-barcode span:not(:first-child) {
    display: none;
}

.designer-barcode small {
    display: block;
    margin-top: 0;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    padding-bottom: 0.2em;
    text-align: center;
}

.designer-qr {
    position: relative;
    width: min(100%, 70px);
    aspect-ratio: 1;
    background:
        linear-gradient(90deg, currentColor 12%, transparent 12% 28%, currentColor 28% 40%, transparent 40% 58%, currentColor 58% 74%, transparent 74%),
        linear-gradient(currentColor 14%, transparent 14% 30%, currentColor 30% 44%, transparent 44% 64%, currentColor 64% 76%, transparent 76%);
    background-color: #fff;
    border: 4px solid currentColor;
}

.template-designer__panel {
    display: grid;
    gap: 14px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 18px;
}

.template-designer__panel h3 {
    margin: 0;
    font-size: 18px;
}

.template-designer__panel p {
    margin: 0;
    font-size: 14px;
}

.template-designer__panel label {
    display: grid;
    gap: 7px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.template-designer__panel [hidden] {
    display: none !important;
}

.template-designer__panel input,
.template-designer__panel select {
    min-height: 40px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 10px;
    color: #14213d;
    font: inherit;
}

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

.dashboard-insights .panel {
    padding: 22px;
}

.dashboard-condition-panel {
    grid-column: span 2;
}

.panel-kicker {
    margin: 0 0 6px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.value-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.value-metrics div {
    min-height: 116px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.value-metrics span,
.condition-legend small,
.value-metrics small {
    display: block;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.value-metrics strong {
    display: block;
    margin-top: 12px;
    font-size: 26px;
    line-height: 1.15;
}

.value-metrics small {
    margin-top: 8px;
}

.dashboard-loan-panel > strong {
    display: block;
    margin-top: 16px;
    font-size: 44px;
    line-height: 1;
}

.dashboard-loan-panel p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
}

.report-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.report-card {
    display: grid;
    gap: 12px;
    min-height: 190px;
    padding: 22px;
    color: inherit;
    text-decoration: none;
}

.report-card span,
.report-summary span,
.report-reminder-info strong {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-card strong {
    font-size: 46px;
    line-height: 1;
}

.report-card p,
.report-note p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.report-card-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.report-document-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.report-document {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 148px;
    align-content: start;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    color: #14213d;
    font: inherit;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.report-document::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 8px 0 0 8px;
    background: #2563eb;
}

.report-document:hover,
.report-document:focus-visible {
    border-color: #bfdbfe;
    outline: none;
    box-shadow: 0 14px 28px rgb(20 33 61 / 12%);
    transform: translateY(-2px);
}

.report-document.is-active {
    border-color: #2563eb;
    background: #f8fbff;
}

.report-document-icon {
    position: relative;
    display: block;
    width: 42px;
    height: 52px;
    border: 1px solid #cbd5e1;
    border-radius: 6px 6px 5px 5px;
    background: linear-gradient(135deg, #ffffff 0 72%, #e2e8f0 72% 100%);
}

.report-document-icon::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 15px;
    height: 15px;
    border-left: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 0 6px 0 4px;
    background: #f1f5f9;
}

.report-document-icon span,
.report-document-icon span::before,
.report-document-icon span::after {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    border-radius: 999px;
    background: #94a3b8;
}

.report-document-icon span {
    top: 23px;
}

.report-document-icon span::before,
.report-document-icon span::after {
    content: "";
    left: 0;
    right: 0;
}

.report-document-icon span::before {
    top: 8px;
}

.report-document-icon span::after {
    top: 16px;
    right: 12px;
}

.report-document strong,
.report-document small {
    display: block;
}

.report-document strong {
    font-size: 14px;
    font-weight: 950;
    line-height: 1.25;
}

.report-document small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.report-document-red::before { background: #dc2626; }
.report-document-amber::before { background: #f59e0b; }
.report-document-green::before { background: #16a34a; }
.report-document-slate::before { background: #64748b; }
.report-document-violet::before { background: #7c3aed; }

.loan-class-list {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 22px 22px;
    border-top: 1px solid #e2e8f0;
}

.loan-screen-list {
    display: block;
}

.loan-class-list:first-of-type {
    border-top: 0;
}

.loan-class-list + .loan-class-list {
    margin-top: 18px;
    border-top: 8px solid #f1f5f9;
}

.loan-class-list-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    padding: 14px 16px;
}

.loan-class-list-header span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.loan-class-list-header h2 {
    margin: 2px 0 0;
    padding: 0;
    color: #14213d;
    font-size: 28px;
    line-height: 1.1;
}

.loan-class-list-header dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, auto));
    gap: 8px;
    margin: 0;
}

.loan-class-list-header dl div {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 9px 10px;
}

.loan-class-list-header dt,
.loan-class-list-header dd {
    margin: 0;
}

.loan-class-list-header dt {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.loan-class-list-header dd {
    margin-top: 3px;
    color: #14213d;
    font-size: 14px;
    font-weight: 950;
    white-space: nowrap;
}

.loan-class-list table {
    margin-top: 0;
}

.loan-print-pages {
    display: none;
}

.loan-class-list th:nth-child(2),
.loan-class-list td:nth-child(2) {
    width: 120px;
    white-space: nowrap;
}

.loan-class-list th:nth-child(3),
.loan-class-list td:nth-child(3),
.loan-class-list th:nth-child(4),
.loan-class-list td:nth-child(4) {
    width: 104px;
    white-space: nowrap;
}

.loan-class-list th:nth-child(5),
.loan-class-list td:nth-child(5) {
    width: 118px;
    white-space: nowrap;
}

.loan-report-student-row td {
    position: relative;
    border-top: 2px solid #dbeafe;
    border-bottom: 1px solid #bfdbfe;
    background: #eff6ff;
    padding-top: 12px;
    padding-bottom: 12px;
}

.loan-report-student-row[data-row-href]:hover td {
    background: #dbeafe;
}

.loan-report-student-row strong,
.loan-report-student-row span {
    display: inline-flex;
    align-items: center;
}

.loan-report-student-row strong {
    margin-right: 10px;
    color: #14213d;
    font-size: 15px;
    font-weight: 950;
}

.loan-report-student-link {
    position: static;
    color: inherit;
    text-decoration: none;
}

.loan-report-student-link::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.loan-report-student-link:hover,
.loan-report-student-link:focus-visible {
    color: #2563eb;
    outline: none;
}

.loan-report-student-row span {
    color: #526176;
    font-size: 13px;
    font-weight: 850;
}

.loan-report-media-row td:first-child {
    padding-left: 26px;
}

.value-steps-panel {
    padding: 14px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
}

.value-steps-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.value-steps-panel summary::-webkit-details-marker {
    display: none;
}

.value-steps-panel summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #2563eb;
    font-size: 18px;
    font-weight: 900;
}

.value-steps-panel[open] summary::after {
    content: "-";
}

.value-steps-panel summary:hover::after,
.value-steps-panel summary:focus-visible::after {
    border-color: #2563eb;
}

.value-steps-panel summary > span {
    display: block;
    color: #14213d;
    font-weight: 900;
}

.value-steps-panel summary > small {
    margin-left: auto;
    color: #64748b;
    font-weight: 800;
}

.value-steps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 12px;
}

.value-steps-head > p {
    margin: 0;
    color: #526176;
    font-size: 13px;
    font-weight: 750;
}

.value-steps-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    color: #526176;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.value-steps-actions .icon-button {
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
}

.value-steps-actions .icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.value-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.value-steps-grid label {
    min-width: 0;
}

.class-list-modal {
    align-items: center;
    justify-content: center;
}

.cover-modal__dialog.class-list-dialog {
    width: min(720px, calc(100vw - 32px));
    max-width: min(720px, calc(100vw - 32px));
    justify-items: stretch;
    margin: auto;
}

.class-list-dialog h2,
.class-list-dialog p {
    margin: 0;
}

.class-list-dialog h2 {
    color: #14213d;
    font-size: 24px;
}

.class-list-dialog p {
    margin-top: 8px;
    color: #526176;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.class-list-form {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.class-list-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.class-list-check-grid label {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 0 10px;
    color: #14213d;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.class-list-check-grid label:hover {
    border-color: #93b4e8;
    background: #eef5ff;
    box-shadow: 0 8px 18px rgb(37 99 235 / 12%);
    transform: translateY(-1px);
}

.class-list-check-grid label:focus-within {
    outline: 2px solid rgb(37 99 235 / 26%);
    outline-offset: 2px;
}

.class-list-check-grid label:has(input:checked) {
    border-color: #2563eb;
    background: #e8f1ff;
    box-shadow: inset 0 0 0 1px rgb(37 99 235 / 16%);
}

.class-list-check-grid label:has(input:checked):hover {
    background: #dfeeff;
    box-shadow:
        inset 0 0 0 1px rgb(37 99 235 / 20%),
        0 8px 18px rgb(37 99 235 / 14%);
}

.class-list-check-grid input {
    width: 15px;
    height: 15px;
    accent-color: #2563eb;
}

.teacher-class-report-panel {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px;
}

.teacher-class-report-panel h2,
.teacher-class-report-panel p {
    margin: 0;
}

.teacher-class-report-panel h2 {
    color: #14213d;
    font-size: 22px;
}

.teacher-class-report-panel p {
    margin-top: 6px;
    color: #526176;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.teacher-class-report-form {
    display: grid;
    gap: 14px;
}

.teacher-class-report-actions {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.teacher-class-report-actions input {
    min-height: 44px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
}

.report-note {
    margin-top: 18px;
    padding: 22px;
}

.report-note h2 {
    margin: 0 0 8px;
    padding: 0;
    font-size: 22px;
    font-weight: 900;
}

.report-action-panel {
    display: grid;
    gap: 12px;
}

.report-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px;
}

.report-summary div {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.report-summary strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
}

.report-reminder-info {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 18px;
}

.report-reminder-info span {
    color: #526176;
    font-size: 14px;
    font-weight: 700;
}

.inventory-condition-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px;
}

.inventory-condition-panel h2 {
    margin: 0;
    padding: 0;
    font-size: 20px;
}

.condition-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.condition-stat {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.condition-stat span,
.condition-stat small {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.condition-stat strong {
    color: #14213d;
    font-size: 26px;
}

.condition-meter {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.condition-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
}

.condition-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

.reminder-mark-form div {
    display: grid;
    gap: 4px;
}

.reminder-mark-form strong {
    font-size: 16px;
}

.reminder-mark-form span {
    color: #526176;
    font-size: 14px;
    font-weight: 700;
}

.reminder-action-buttons {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.reminder-action-buttons form {
    margin: 0;
}

.reminder-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.reminder-preview-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.reminder-preview-card strong,
.reminder-preview-card span {
    display: block;
}

.reminder-preview-card strong {
    color: #14213d;
    font-size: 15px;
}

.reminder-preview-card > div > span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.reminder-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reminder-preview-meta .badge {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-transform: none;
}

.reminder-selection-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    padding: 18px;
}

.reminder-selection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.reminder-selection-head > div {
    display: grid;
    gap: 4px;
}

.reminder-selection-head strong {
    font-size: 16px;
}

.reminder-selection-head span,
.reminder-selection-row span {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.reminder-selection-head .checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.reminder-selection-list {
    display: grid;
    max-height: 320px;
    overflow: auto;
    border: 1px solid #e8edf4;
    border-radius: 8px;
}

.reminder-selection-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border-bottom: 1px solid #e8edf4;
    background: #ffffff;
}

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

.reminder-selection-row strong {
    display: block;
    color: #14213d;
    font-size: 14px;
}

.reminder-selection-row code {
    white-space: nowrap;
}

.reminder-letter-stack {
    display: grid;
    gap: 18px;
}

.reminder-letter {
    display: grid;
    gap: 18px;
    min-height: 270mm;
    padding: 22mm;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
    page-break-after: always;
}

.reminder-letter:last-child {
    page-break-after: auto;
}

.reminder-letter header,
.reminder-letter footer {
    display: grid;
    gap: 3px;
}

.reminder-letter header strong {
    font-size: 16px;
}

.reminder-letter header span,
.reminder-letter footer span,
.reminder-letter p,
.reminder-address span {
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.reminder-address {
    display: grid;
    gap: 3px;
    margin-top: 12mm;
}

.reminder-address strong {
    font-size: 16px;
}

.reminder-date {
    justify-self: end;
    margin: 0;
}

.reminder-letter h2 {
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: 900;
}

.reminder-letter table {
    font-size: 13px;
}

.loan-share-meter {
    height: 14px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.loan-share-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
}

.condition-chart-wrap {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    margin-top: 20px;
}

.condition-chart {
    position: relative;
    display: grid;
    width: 220px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 999px;
}

.condition-chart::after {
    position: absolute;
    inset: 38px;
    border-radius: inherit;
    background: #ffffff;
    content: "";
}

.condition-chart span {
    position: relative;
    z-index: 1;
    color: #14213d;
    font-size: 36px;
    font-weight: 900;
}

.condition-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.condition-legend li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    min-height: 56px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.condition-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.condition-legend strong {
    font-size: 14px;
}

.condition-legend small {
    grid-column: 2;
    margin-top: -4px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.quick-actions a {
    display: block;
    min-height: 110px;
    padding: 20px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
}

.quick-actions span {
    display: block;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.quick-actions strong {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.25;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.button,
button.button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid #2563eb;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover,
button.button:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 8px 18px rgb(37 99 235 / 20%);
}

.button-secondary {
    border-color: #d9e1ec;
    background: #ffffff;
    color: #14213d;
}

.button-secondary:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #0f172a;
    box-shadow: 0 8px 18px rgb(15 23 42 / 10%);
}

.button-small {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 13px;
}

.button-danger,
button.button-danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

.button-danger:hover,
button.button-danger:hover {
    border-color: #b91c1c;
    background: #b91c1c;
    box-shadow: 0 8px 18px rgb(220 38 38 / 18%);
}

.button-ghost {
    border-color: transparent;
    background: transparent;
    color: #526176;
    box-shadow: none;
}

.button-ghost:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #14213d;
    box-shadow: none;
}

.button:focus-visible,
button.button:focus-visible {
    outline: 3px solid rgb(37 99 235 / 25%);
    outline-offset: 2px;
}

.button:active,
button.button:active {
    transform: translateY(1px);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.button-with-icon {
    gap: 8px;
}

.button-with-icon svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.button-with-icon span {
    white-space: nowrap;
}

.notice {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

.notice-strong {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.notice-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.notice-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.notice code {
    font-size: 16px;
}

.filterbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(160px, auto)) auto auto;
    gap: 12px;
    margin-bottom: 16px;
}

.filterbar-wide {
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, auto)) auto auto;
}

.loan-event-filterbar {
    grid-template-columns: minmax(240px, 1.2fr) minmax(150px, 0.8fr) repeat(2, minmax(132px, 0.65fr)) minmax(150px, 0.8fr) auto auto auto;
    align-items: center;
}

.filter-check {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    color: #14213d;
    font-size: 14px;
    font-weight: 800;
}

.filterbar input,
.filterbar select,
.form-grid input,
.form-grid select,
.form-grid textarea {
    min-height: 44px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
}

.form-grid textarea {
    min-height: 120px;
    padding-top: 12px;
    resize: vertical;
}

.editable-fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.filterbar input:disabled,
.filterbar select:disabled,
.form-grid input:disabled,
.form-grid select:disabled,
.form-grid textarea:disabled {
    border-color: #e2e8f0;
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
    opacity: 1;
}

.form-grid input[type="checkbox"]:disabled {
    accent-color: #94a3b8;
}

.form-grid label:has(input:disabled),
.form-grid label:has(textarea:disabled),
.form-grid label:has(select:disabled) {
    color: #64748b;
}

.form-grid .aligned-number-field {
    grid-template-rows: auto 44px minmax(18px, auto);
    align-content: start;
}

.form-grid .aligned-number-field input {
    height: 44px;
}

.filterbar input:focus,
.filterbar select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    border-color: #2563eb;
    outline: 3px solid rgb(37 99 235 / 14%);
}

.filterbar .filter-check input {
    min-height: 0;
    width: auto;
    border: 0;
    padding: 0;
}

.panel {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
    overflow: hidden;
}

.panel h2 {
    margin: 0;
    padding: 20px 22px 0;
    font-size: 20px;
}

.student-management-page .page-head p:not(.brand) {
    max-width: 680px;
    margin: 8px 0 0;
    color: #526176;
    font-size: 15px;
    line-height: 1.5;
}

.student-page-actions {
    justify-content: flex-end;
}

.student-workbench {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgb(20 33 61 / 8%);
    overflow: hidden;
}

.student-searchbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(140px, 0.35fr) minmax(140px, 0.35fr) minmax(180px, 0.45fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 18px;
    background: #f8fafc;
}

.student-searchbar input,
.student-searchbar select {
    min-height: 42px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
}

.student-searchbar input {
    padding-left: 38px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23526176' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
}

.student-searchbar input:focus,
.student-searchbar select:focus {
    border-color: #2563eb;
    outline: 3px solid rgb(37 99 235 / 14%);
}

.student-workbench-divider {
    height: 1px;
    background: #e8edf4;
}

.student-table-controls {
    display: grid;
    grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
    gap: 18px;
    align-items: end;
    padding: 16px 18px;
    border-bottom: 1px solid #e8edf4;
}

.student-result-meta {
    display: grid;
    gap: 2px;
}

.student-result-meta strong {
    color: #14213d;
    font-size: 28px;
    line-height: 1;
}

.student-result-meta span {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.student-action-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px;
}

.student-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
}

.student-action-group > span {
    flex-basis: 100%;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-align: right;
    text-transform: uppercase;
}

.student-action-group-wide {
    flex: 1 1 520px;
}

.student-action-group-portal {
    border-color: #ccfbf1;
    background: #f0fdfa;
}

.student-action-group-portal > span {
    color: #0f766e;
}

.student-action-group-wide .bulk-template-select {
    flex: 1 1 230px;
    max-width: 330px;
}

.student-modern-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: 12px;
}

.student-template-picker {
    display: grid;
    min-width: 190px;
    gap: 5px;
    color: #526176;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.student-template-picker select {
    min-height: 38px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 10px;
    color: #14213d;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}

.student-action-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 5px;
    box-shadow: 0 8px 18px rgb(20 33 61 / 7%);
}

.student-toolbar-action {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0 10px;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.student-toolbar-action svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.student-toolbar-action:hover,
.student-toolbar-action:focus-visible {
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
    transform: translateY(-1px);
}

.student-toolbar-action-primary {
    background: #2563eb;
    color: #ffffff;
}

.student-toolbar-action-primary:hover,
.student-toolbar-action-primary:focus-visible {
    background: #1d4ed8;
    color: #ffffff;
}

.student-toolbar-action-portal:hover,
.student-toolbar-action-portal:focus-visible {
    background: #f0fdfa;
    color: #0f766e;
}

.student-action-divider {
    width: 1px;
    height: 24px;
    background: #e8edf4;
}

.student-action-cards {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.8fr);
    gap: 12px;
    align-items: stretch;
}

.student-action-cards-single {
    grid-template-columns: minmax(260px, 1fr);
}

.student-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    min-height: 96px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    padding: 14px;
}

.student-action-card > div:first-child {
    align-self: start;
}

.student-action-card span {
    display: block;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-action-card strong {
    display: block;
    margin-top: 4px;
    color: #14213d;
    font-size: 16px;
    line-height: 1.2;
}

.student-action-card label {
    display: grid;
    min-width: 190px;
    gap: 5px;
}

.student-action-card label span {
    color: #526176;
    font-size: 10px;
}

.student-action-card select {
    min-height: 36px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 10px;
    color: #14213d;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.student-action-card p {
    grid-column: 1;
    margin: 0;
    color: #526176;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.student-card-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.student-card-actions button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    border: 1px solid #d9e1ec;
    border-radius: 7px;
    background: #ffffff;
    padding: 0 11px;
    color: #334155;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.student-card-actions button:hover,
.student-card-actions button:focus-visible {
    border-color: #bfdbfe;
    background: #ffffff;
    box-shadow: 0 8px 16px rgb(20 33 61 / 10%);
    outline: none;
}

.student-card-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.student-card-actions .student-card-primary {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

.student-card-actions svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.student-action-card-portal {
    border-color: #ccfbf1;
    background: linear-gradient(135deg, #f0fdfa, #ffffff);
}

.student-action-card-portal span {
    color: #0f766e;
}

.student-action-card-portal .student-card-actions .student-card-primary {
    border-color: #0f766e;
    background: #0f766e;
}

.student-workbench table {
    table-layout: fixed;
}

.student-workbench th,
.student-workbench td {
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.student-workbench th:nth-child(1),
.student-workbench td:nth-child(1) {
    width: 44px;
}

.student-workbench th:nth-child(2),
.student-workbench td:nth-child(2) {
    width: 240px;
    color: #14213d;
    font-size: 14px;
    line-height: 1.25;
}

.student-workbench td:nth-child(2) strong {
    font-size: 15px;
}

.student-table {
    table-layout: fixed;
    width: 100%;
}

.student-col-select {
    width: 42px;
}

.student-col-name {
    width: auto;
}

.student-col-class {
    width: 86px;
}

.student-col-barcode {
    width: 120px;
}

.student-col-status {
    width: 116px;
}

.student-col-loans {
    width: 142px;
}

.student-col-actions {
    width: 148px;
}

.student-table-teacher .student-col-name {
    width: 38%;
}

.student-table-teacher .student-col-class {
    width: 70px;
}

.student-table-teacher .student-col-barcode {
    width: 110px;
}

.student-table-teacher .student-col-status {
    width: 98px;
}

.student-table-teacher .student-col-loans {
    width: 132px;
}

.student-table-teacher .student-col-actions {
    width: 36px;
}

.student-workbench code {
    display: inline-flex;
    max-width: 100%;
    min-height: 28px;
    align-items: center;
    border-radius: 6px;
    background: #f1f5f9;
    padding: 0 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.student-loan-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.student-loan-counts .badge {
    white-space: nowrap;
}

.student-workbench .table-actions {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

.student-workbench .table-actions > * {
    margin-left: 3px;
    vertical-align: middle;
}

.student-workbench .table-actions > *:first-child {
    margin-left: 0;
}

.student-workbench .table-actions .icon-button {
    width: 30px;
    height: 30px;
}

.student-workbench .table-actions .icon-button svg {
    width: 16px;
    height: 16px;
}

.student-table-teacher th,
.student-table-teacher td {
    padding-left: 12px;
    padding-right: 12px;
}

.student-table-teacher th:nth-last-child(2),
.student-table-teacher td:nth-last-child(2) {
    padding-right: 6px;
}

.student-table-teacher th:last-child,
.student-table-teacher td:last-child {
    padding-left: 4px;
}

.student-table-teacher .student-loan-counts {
    gap: 4px;
}

.gui-lab {
    margin-top: 34px;
}

.gui-demo-forward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding: 20px;
}

.gui-demo-forward h2 {
    margin: 0;
    padding: 0;
    color: #14213d;
    font-size: 22px;
}

.gui-demo-forward p:not(.brand) {
    max-width: 760px;
    margin: 8px 0 0;
    color: #526176;
    font-size: 14px;
    line-height: 1.5;
}

.gui-toolbar-alternatives {
    margin-top: 34px;
}

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

.gui-toolbar-alt {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 12px 28px rgb(20 33 61 / 8%);
}

.gui-toolbar-alt-wide {
    grid-column: 1 / -1;
}

.gui-toolbar-alt header {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.gui-toolbar-alt header span {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gui-toolbar-alt header strong {
    color: #14213d;
    font-size: 17px;
}

.gui-alt-toolbar-segmented,
.gui-alt-toolbar-command,
.gui-alt-toolbar-bulk,
.gui-alt-toolbar-cards {
    min-height: 96px;
}

.gui-alt-toolbar-segmented {
    display: grid;
    gap: 10px;
}

.gui-alt-toolbar-segmented select,
.gui-alt-toolbar-command select {
    min-height: 38px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 0 10px;
    color: #14213d;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.gui-alt-toolbar-segmented > div {
    display: inline-flex;
    width: fit-content;
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 4px;
}

.gui-alt-toolbar-segmented button {
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0 11px;
    color: #526176;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
}

.gui-alt-toolbar-segmented button:hover,
.gui-alt-toolbar-segmented .is-primary {
    background: #2563eb;
    color: #ffffff;
}

.gui-alt-toolbar-command {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    padding: 12px;
}

.gui-alt-toolbar-command button,
.gui-alt-toolbar-bulk button,
.gui-alt-toolbar-cards button {
    min-height: 36px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
}

.gui-alt-toolbar-command .main-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

.gui-alt-toolbar-command svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.gui-alt-toolbar-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #0f172a;
    padding: 12px;
    color: #ffffff;
}

.gui-alt-toolbar-bulk span {
    margin-right: auto;
    font-size: 13px;
    font-weight: 900;
}

.gui-alt-toolbar-bulk button {
    border-color: rgb(255 255 255 / 18%);
    background: rgb(255 255 255 / 12%);
    color: #ffffff;
}

.gui-alt-toolbar-bulk button:hover {
    background: #ffffff;
    color: #0f172a;
}

.gui-alt-toolbar-bulk .ghost {
    color: #cbd5e1;
}

.gui-alt-toolbar-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gui-alt-toolbar-cards div {
    display: grid;
    gap: 6px;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    background: #f0fdfa;
    padding: 12px;
}

.gui-alt-toolbar-cards div:nth-child(2) {
    border-color: #fed7aa;
    background: #fff7ed;
}

.gui-alt-toolbar-cards span {
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-alt-toolbar-cards div:nth-child(2) span {
    color: #c2410c;
}

.gui-alt-toolbar-cards strong {
    color: #14213d;
    font-size: 15px;
}

.gui-alt-toolbar-cards button {
    justify-self: start;
    border-color: transparent;
    background: #0f766e;
    color: #ffffff;
}

.gui-alt-toolbar-cards div:nth-child(2) button {
    background: #f97316;
}

.gui-alt-toolbar-pro {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) auto minmax(260px, auto) minmax(160px, .7fr);
    gap: 10px;
    align-items: center;
    min-height: 74px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px;
}

.gui-pro-search {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
}

.gui-pro-search svg,
.gui-pro-actions svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.gui-pro-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #14213d;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    outline: 0;
}

.gui-pro-filters,
.gui-pro-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.gui-pro-filters {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 4px;
}

.gui-pro-filters button,
.gui-pro-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #526176;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.gui-pro-filters button {
    padding: 0 10px;
}

.gui-pro-filters button.is-active,
.gui-pro-filters button:hover {
    background: #e0f2fe;
    color: #0369a1;
}

.gui-pro-actions button {
    border: 1px solid #d9e1ec;
    background: #ffffff;
    padding: 0 11px;
    color: #14213d;
}

.gui-pro-actions button:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.gui-pro-actions button.is-primary {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #ffffff;
}

.gui-pro-template {
    display: grid;
    gap: 2px;
    min-height: 42px;
    border-left: 1px solid #d9e1ec;
    padding-left: 12px;
}

.gui-pro-template span {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-pro-template strong {
    color: #14213d;
    font-size: 13px;
    font-weight: 950;
}

.gui-lab-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.gui-lab-head h2 {
    margin: 0;
    color: #14213d;
    font-size: 26px;
    line-height: 1.15;
}

.gui-lab-head p:not(.brand) {
    max-width: 720px;
    margin: 8px 0 0;
    color: #526176;
    font-size: 15px;
    line-height: 1.5;
}

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

.gui-frame {
    min-height: 220px;
    padding: 18px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgb(20 33 61 / 8%);
}

.gui-frame-wide {
    grid-column: span 2;
}

.gui-frame header {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.gui-frame header span {
    color: #526176;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gui-frame header strong {
    color: #14213d;
    font-size: 18px;
    line-height: 1.25;
}

.gui-frame-accent-blue {
    border-top: 4px solid #2563eb;
}

.gui-frame-accent-teal {
    border-top: 4px solid #0f766e;
}

.gui-frame-accent-orange {
    border-top: 4px solid #f97316;
}

.gui-button-shelf,
.gui-visual-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gui-logo-placeholder {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #0891b2, #14b8a6 48%, #f97316 49%, #fb923c);
    color: #ffffff;
    font-size: 28px;
    font-weight: 950;
}

.gui-visual-row p,
.gui-background-preview p {
    margin: 4px 0 0;
    color: #526176;
    font-size: 13px;
    line-height: 1.45;
}

.gui-mini-cover-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 18px;
}

.gui-mini-cover-row span {
    height: 54px;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    background: linear-gradient(160deg, #f8fafc, #e0f2fe);
}

.gui-frame-background {
    padding: 0;
    overflow: hidden;
}

.gui-frame-background header {
    padding: 18px 18px 0;
}

.gui-background-preview {
    display: grid;
    min-height: 138px;
    align-items: end;
    padding: 18px;
    background:
        linear-gradient(135deg, rgb(37 99 235 / 14%), rgb(20 184 166 / 12%)),
        linear-gradient(180deg, #ffffff, #f8fafc);
}

.gui-background-preview > div {
    width: min(280px, 100%);
    padding: 14px;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 8px;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 10px 24px rgb(20 33 61 / 10%);
}

.gui-frame-image-bg,
.gui-frame-logo-bg {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 270px;
    overflow: hidden;
    border-color: rgb(255 255 255 / 48%);
    background:
        linear-gradient(135deg, rgb(20 33 61 / 78%), rgb(37 99 235 / 44%)),
        url("/storage/media-covers/2/xuXmVkUMtMBuwnCs3HfYv7jqn81ReYYs38isIk4b.jpg") center / cover;
    color: #ffffff;
}

.gui-frame-logo-bg {
    background:
        linear-gradient(135deg, rgb(248 250 252 / 90%), rgb(219 234 254 / 72%)),
        url("/assets/lm_logo.png") right 18px bottom 12px / 150px auto no-repeat;
    color: #14213d;
}

.gui-glass-panel,
.gui-glass-card {
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: 8px;
    background: rgb(255 255 255 / 72%);
    box-shadow: 0 14px 32px rgb(20 33 61 / 16%);
    backdrop-filter: blur(12px);
}

.gui-frame-image-bg .gui-glass-panel,
.gui-frame-image-bg .gui-glass-card {
    background: rgb(255 255 255 / 18%);
    color: #ffffff;
}

.gui-glass-panel {
    padding: 16px;
}

.gui-glass-panel p {
    margin: 6px 0 0;
    color: inherit;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.82;
}

.gui-glass-card-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.gui-glass-card {
    display: grid;
    gap: 4px;
    padding: 14px;
}

.gui-glass-card span,
.gui-glass-card small {
    font-size: 12px;
    font-weight: 900;
    opacity: 0.8;
}

.gui-glass-card strong {
    font-size: 28px;
    line-height: 1;
}

.gui-table-demo {
    overflow: hidden;
    border: 1px solid #e8edf4;
    border-radius: 8px;
}

.gui-table-row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 80px 100px 120px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #e8edf4;
    color: #334155;
    font-size: 13px;
}

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

.gui-table-head {
    background: #f8fafc;
    color: #526176;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-status {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 900;
}

.gui-status-ok {
    background: #dcfce7;
    color: #166534;
}

.gui-status-warn {
    background: #fee2e2;
    color: #991b1b;
}

.gui-table-icons {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.gui-table-icons i {
    width: 26px;
    height: 26px;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    background: #ffffff;
}

.gui-bar-stack {
    display: grid;
    gap: 14px;
}

.gui-bar-stack label {
    display: grid;
    gap: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    transition: transform 0.14s ease;
}

.gui-bar-stack label:hover {
    transform: translateX(3px);
}

.gui-bar-stack b {
    display: block;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e8edf4;
}

.gui-bar-stack b::before {
    display: block;
    width: var(--bar);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #14b8a6);
    content: "";
}

.gui-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gui-feature-list span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    background: #fff7ed;
    padding: 0 12px;
    color: #9a3412;
    font-size: 12px;
    font-weight: 900;
}

.gui-combo-row {
    display: block;
}

.gui-combo-variant-grid {
    display: grid;
    grid-template-columns: minmax(260px, max-content) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.gui-combo-variant-label {
    display: block;
    margin-bottom: 10px;
    color: #526176;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-combo-row-side {
    display: grid;
    grid-template-columns: minmax(240px, max-content) minmax(210px, 1fr);
    gap: 14px;
    align-items: start;
}

.gui-combo-demo {
    position: relative;
    display: inline-grid;
    width: max-content;
    min-width: 0;
    gap: 8px;
    justify-items: start;
}

.gui-combo-demo small {
    color: #526176;
    font-size: 12px;
    font-weight: 800;
}

.gui-combo-button {
    display: inline-flex;
    width: max-content;
    justify-self: start;
    overflow: hidden;
    border-radius: 8px;
    background: #2563eb;
    box-shadow: 0 8px 18px rgb(37 99 235 / 16%);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.gui-combo-button:hover {
    box-shadow: 0 12px 26px rgb(37 99 235 / 22%);
    transform: translateY(-1px);
}

.gui-combo-button button {
    min-height: 42px;
    border: 0;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.16s ease;
}

.gui-combo-button button:hover,
.gui-combo-button button:focus-visible {
    background: #1d4ed8;
    outline: none;
}

.gui-combo-button button:active {
    background: #1e40af;
}

.gui-combo-button button:first-child {
    padding: 0 16px;
}

.gui-combo-button button:last-child {
    width: 42px;
    border-left: 1px solid rgb(255 255 255 / 28%);
}

.gui-combo-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.gui-combo-button.is-open svg {
    transform: rotate(180deg);
}

.gui-combo-button-secondary {
    background: #0f766e;
    box-shadow: 0 8px 18px rgb(20 184 166 / 16%);
}

.gui-combo-button-secondary button {
    background: #0f766e;
}

.gui-combo-button-secondary button:hover,
.gui-combo-button-secondary button:focus-visible {
    background: #0d9488;
}

.gui-combo-button-secondary button:active {
    background: #115e59;
}

.gui-combo-menu {
    position: absolute;
    z-index: 8;
    top: 46px;
    left: 0;
    display: grid;
    min-width: 100%;
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgb(20 33 61 / 10%);
}

.gui-combo-row-side .gui-combo-menu {
    position: static;
    min-width: 0;
    width: 100%;
}

.gui-combo-row-side .gui-combo-demo {
    min-width: 240px;
}

.gui-combo-menu[hidden] {
    display: none;
}

.gui-combo-menu button {
    min-height: 38px;
    border: 0;
    border-bottom: 1px solid #e8edf4;
    background: #ffffff;
    padding: 0 12px;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, padding-left 0.14s ease;
}

.gui-combo-menu button:hover,
.gui-combo-menu button:focus-visible {
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
    padding-left: 16px;
}

.gui-combo-menu button:active {
    background: #dbeafe;
}

.gui-combo-menu button:last-child {
    border-bottom: 0;
}

.gui-option-stack,
.gui-form-demo {
    display: grid;
    gap: 12px;
}

.gui-option-stack label,
.gui-form-demo label {
    display: grid;
    gap: 6px;
    color: #526176;
    font-size: 12px;
    font-weight: 900;
}

.gui-option-stack select,
.gui-form-demo input,
.gui-measure-grid input,
.gui-measure-grid select {
    min-height: 42px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
}

.gui-slider-stack {
    display: grid;
    gap: 16px;
}

.gui-slider-stack label {
    display: grid;
    grid-template-columns: 120px minmax(160px, 1fr) 54px;
    gap: 12px;
    align-items: center;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.gui-slider-stack input[type="range"] {
    width: 100%;
    accent-color: #2563eb;
}

.gui-slider-stack output {
    color: #2563eb;
    font-size: 13px;
    font-weight: 950;
    text-align: right;
}

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

.gui-color-grid label,
.gui-measure-grid label {
    display: grid;
    gap: 6px;
    color: #526176;
    font-size: 12px;
    font-weight: 900;
}

.gui-color-grid input[type="color"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 4px;
    cursor: pointer;
}

.gui-color-preview {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
    min-height: 86px;
    align-content: center;
    border: 1px solid var(--demo-accent, #2563eb);
    border-radius: 8px;
    background: var(--demo-surface, #eff6ff);
    padding: 14px;
    color: var(--demo-text, #14213d);
}

.gui-color-preview strong {
    font-size: 18px;
}

.gui-color-preview small {
    font-size: 12px;
    font-weight: 800;
    opacity: 0.78;
}

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

.gui-check-stack,
.gui-toggle-stack,
.gui-alert-stack {
    display: grid;
    gap: 10px;
}

.gui-check-stack label {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.gui-check-stack input {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

.gui-toggle-stack label {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.gui-toggle-stack input {
    position: absolute;
    opacity: 0;
}

.gui-toggle-stack span {
    position: relative;
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #cbd5e1;
}

.gui-toggle-stack span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgb(20 33 61 / 22%);
    content: "";
}

.gui-toggle-stack input:checked + span {
    background: #14b8a6;
}

.gui-toggle-stack input:checked + span::after {
    transform: translateX(20px);
}

.gui-toggle-stack b {
    color: #334155;
    font-size: 13px;
}

.gui-tabs,
.gui-segments,
.gui-toolbar-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gui-tabs {
    margin-bottom: 16px;
    border-bottom: 1px solid #e8edf4;
}

.gui-tabs button {
    min-height: 38px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    padding: 0 4px;
    color: #526176;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.gui-tabs button:hover,
.gui-tabs button:focus-visible {
    color: #2563eb;
    outline: none;
}

.gui-tabs button.is-active {
    border-bottom-color: #2563eb;
    color: #14213d;
}

.gui-segments {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 4px;
}

.gui-segments button,
.gui-toolbar-demo button {
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0 12px;
    color: #526176;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.gui-segments button:hover,
.gui-toolbar-demo button:hover,
.gui-segments button:focus-visible,
.gui-toolbar-demo button:focus-visible {
    background: #eef2ff;
    color: #2563eb;
    outline: none;
    transform: translateY(-1px);
}

.gui-segments button.is-active,
.gui-toolbar-demo button.is-active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 4px 12px rgb(20 33 61 / 10%);
}

.gui-alert {
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    padding: 10px 12px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.gui-alert:hover {
    box-shadow: 0 8px 18px rgb(20 33 61 / 12%);
    transform: translateY(-1px);
}

.gui-alert-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.gui-alert-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.gui-toolbar-demo {
    align-items: center;
}

.gui-toolbar-demo button {
    border: 1px solid #d9e1ec;
    background: #ffffff;
}

.gui-toolbar-demo span {
    margin-left: auto;
    color: #526176;
    font-size: 12px;
    font-weight: 900;
}

.gui-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gui-chip {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border: 0;
    border-radius: 999px;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
    transition: box-shadow 0.14s ease, transform 0.14s ease, outline-color 0.14s ease;
}

.gui-chip:hover,
.gui-chip:focus-visible {
    box-shadow: 0 8px 18px rgb(20 33 61 / 16%);
    outline: 2px solid rgb(37 99 235 / 22%);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.gui-chip.is-active {
    box-shadow: inset 0 0 0 2px currentColor;
}

.gui-chip-blue { background: #dbeafe; color: #1d4ed8; }
.gui-chip-green { background: #dcfce7; color: #166534; }
.gui-chip-yellow { background: #fef3c7; color: #92400e; }
.gui-chip-red { background: #fee2e2; color: #991b1b; }
.gui-chip-gray { background: #f1f5f9; color: #475569; }

.gui-stepper {
    display: grid;
    gap: 10px;
}

.gui-stepper button {
    position: relative;
    display: flex;
    min-height: 34px;
    align-items: center;
    border: 0;
    border-left: 4px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    padding: 0 12px;
    color: #64748b;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
    transition: background 0.14s ease, transform 0.14s ease;
}

.gui-stepper button:hover,
.gui-stepper button:focus-visible {
    background: #eef2ff;
    outline: none;
    transform: translateX(3px);
}

.gui-stepper .is-done {
    border-left-color: #16a34a;
    background: #f0fdf4;
    color: #166534;
}

.gui-stepper .is-active {
    border-left-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.gui-accordion {
    display: grid;
    gap: 8px;
}

.gui-accordion details {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.gui-accordion details:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 18px rgb(20 33 61 / 10%);
}

.gui-accordion summary {
    padding: 12px 14px;
    color: #14213d;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.gui-accordion p {
    margin: 0;
    border-top: 1px solid #e8edf4;
    padding: 12px 14px;
    color: #526176;
    font-size: 13px;
    line-height: 1.45;
}

.gui-dropzone {
    display: grid;
    min-height: 150px;
    place-items: center;
    border: 2px dashed #fb923c;
    border-radius: 8px;
    background: #fff7ed;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.gui-dropzone:hover,
.gui-dropzone:focus-within,
.gui-dropzone.is-active {
    border-color: #f97316;
    background: #ffedd5;
    transform: translateY(-1px);
}

.gui-dropzone input {
    position: absolute;
    opacity: 0;
}

.gui-dropzone strong {
    color: #9a3412;
    font-size: 18px;
}

.gui-dropzone span {
    color: #c2410c;
    font-size: 13px;
    font-weight: 800;
}

.gui-avatar-row {
    display: flex;
    margin-bottom: 18px;
}

.gui-avatar-row button,
.gui-person-card > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 6px 14px rgb(20 33 61 / 14%);
    cursor: pointer;
    transition: transform 0.14s ease, z-index 0.14s ease;
}

.gui-avatar-row button:hover,
.gui-avatar-row button:focus-visible,
.gui-avatar-row button.is-active {
    z-index: 2;
    outline: none;
    transform: translateY(-3px);
}

.gui-avatar-row button + button {
    margin-left: -10px;
}

.gui-avatar-row button:nth-child(2) { background: #0f766e; }
.gui-avatar-row button:nth-child(3) { background: #f97316; }
.gui-avatar-row button:nth-child(4) { background: #64748b; }

.gui-person-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.gui-person-card:hover {
    border-color: #bfdbfe;
    box-shadow: 0 8px 18px rgb(20 33 61 / 10%);
}

.gui-person-card strong,
.gui-person-card small {
    display: block;
}

.gui-person-card small {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.gui-timeline {
    display: grid;
    gap: 14px;
}

.gui-timeline div {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    column-gap: 10px;
}

.gui-timeline div > span {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 999px;
    background: #2563eb;
}

.gui-timeline div:nth-child(2) > span { background: #f97316; }
.gui-timeline div:nth-child(3) > span { background: #16a34a; }

.gui-timeline strong,
.gui-timeline small {
    grid-column: 2;
}

.gui-timeline strong {
    color: #14213d;
    font-size: 14px;
}

.gui-timeline small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.gui-toast-demo,
.gui-skeleton {
    display: grid;
    gap: 10px;
}

.gui-toast {
    border: 0;
    border-radius: 8px;
    padding: 10px 12px;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
    box-shadow: 0 8px 18px rgb(20 33 61 / 14%);
    cursor: pointer;
    transition: transform 0.14s ease, filter 0.14s ease;
}

.gui-toast:hover,
.gui-toast:focus-visible {
    filter: brightness(1.04);
    outline: none;
    transform: translateX(4px);
}

.gui-toast.is-muted {
    opacity: 0.58;
}

.gui-toast-success { background: #16a34a; }
.gui-toast-info { background: #2563eb; }

.gui-modal-preview {
    margin-top: 12px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
}

.gui-modal-preview p {
    margin: 6px 0 12px;
    color: #64748b;
    font-size: 13px;
}

.gui-modal-preview button,
.gui-empty-state button {
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    background: #2563eb;
    padding: 0 12px;
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.14s ease;
}

.gui-modal-preview button:hover,
.gui-empty-state button:hover,
.gui-modal-preview button:focus-visible,
.gui-empty-state button:focus-visible {
    background: #1d4ed8;
    outline: none;
    transform: translateY(-1px);
}

.gui-modal-preview.is-confirmed {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.gui-skeleton span {
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e8edf4, #f8fafc, #e8edf4);
}

.gui-skeleton span:nth-child(1) { width: 80%; }
.gui-skeleton span:nth-child(2) { width: 100%; }
.gui-skeleton span:nth-child(3) { width: 58%; }

.gui-spinner-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #526176;
    font-size: 13px;
    font-weight: 900;
}

.gui-spinner-row i {
    width: 24px;
    height: 24px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 999px;
    animation: gui-spin 0.9s linear infinite;
}

@keyframes gui-spin {
    to {
        transform: rotate(360deg);
    }
}

.gui-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    padding: 20px;
    text-align: center;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.gui-empty-state.is-confirmed {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.gui-empty-state div {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 24px;
    font-weight: 950;
}

.gui-empty-state p {
    margin: 0;
    color: #526176;
    font-size: 13px;
}

.gui-layer-list {
    display: grid;
    gap: 8px;
}

.gui-layer-list button {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    padding: 0 12px;
    font: inherit;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.gui-layer-list button:hover,
.gui-layer-list button:focus-visible,
.gui-layer-list button.is-active {
    border-color: #fb923c;
    background: #ffedd5;
    outline: none;
    transform: translateX(4px);
}

.gui-layer-list b {
    width: 14px;
    height: 18px;
    border-top: 3px solid #f97316;
    border-bottom: 3px solid #f97316;
}

.gui-layer-list b::after {
    display: block;
    height: 3px;
    margin-top: 4px;
    background: #f97316;
    content: "";
}

.gui-layer-list span {
    color: #14213d;
    font-size: 13px;
    font-weight: 900;
}

.gui-layer-list small {
    color: #9a3412;
    font-size: 12px;
    font-weight: 900;
}

.gui-window {
    overflow: hidden;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgb(20 33 61 / 12%);
}

.gui-window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    padding: 14px 16px;
}

.gui-window-titlebar strong,
.gui-window-titlebar span {
    display: block;
}

.gui-window-titlebar strong {
    color: #14213d;
    font-size: 17px;
    line-height: 1.2;
}

.gui-window-titlebar span {
    margin-top: 3px;
    color: #526176;
    font-size: 12px;
    font-weight: 800;
}

.gui-window-titlebar button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgb(37 99 235 / 18%);
    border-radius: 6px;
    background: rgb(255 255 255 / 72%);
    color: #1d4ed8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.gui-window-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid #e8edf4;
    background: #f8fafc;
    padding: 8px 10px 0;
}

.gui-window-tabs button {
    min-height: 38px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    padding: 0 12px;
    color: #526176;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.gui-window-tabs button:hover,
.gui-window-tabs button:focus-visible {
    color: #2563eb;
    outline: none;
}

.gui-window-tabs button.is-active {
    border-color: #e8edf4;
    background: #ffffff;
    color: #14213d;
}

.gui-window-body {
    padding: 16px;
}

.gui-window-panel {
    display: none;
}

.gui-window-panel.is-active {
    display: block;
}

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

.gui-data-grid div {
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px 12px;
}

.gui-data-grid dt {
    color: #526176;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-data-grid dd {
    margin: 4px 0 0;
    color: #14213d;
    font-size: 14px;
    font-weight: 900;
}

.gui-mini-list {
    display: grid;
    gap: 8px;
}

.gui-mini-list span {
    display: block;
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px 12px;
}

.gui-mini-list strong,
.gui-mini-list small {
    display: block;
}

.gui-mini-list strong {
    color: #14213d;
    font-size: 14px;
}

.gui-mini-list small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.gui-timeline.compact {
    gap: 10px;
}

.gui-table-demo.compact .gui-table-row {
    grid-template-columns: minmax(90px, 1fr) 96px 80px 76px;
}

.gui-window-teal {
    border-color: #99f6e4;
}

.gui-window-teal .gui-window-titlebar {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
}

.gui-window-teal .gui-window-titlebar button {
    border-color: rgb(15 118 110 / 18%);
    color: #0f766e;
}

.gui-window-teal .gui-window-tabs button:hover,
.gui-window-teal .gui-window-tabs button:focus-visible {
    color: #0f766e;
}

.gui-window-orange {
    border-color: #fed7aa;
}

.gui-window-orange .gui-window-titlebar {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
}

.gui-window-orange .gui-window-titlebar button {
    border-color: rgb(249 115 22 / 18%);
    color: #c2410c;
}

.gui-window-orange .gui-window-tabs button:hover,
.gui-window-orange .gui-window-tabs button:focus-visible {
    color: #f97316;
}

.gui-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.gui-icon-grid button {
    display: grid;
    min-height: 86px;
    place-items: center;
    gap: 8px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    color: #2563eb;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.gui-icon-grid button:hover,
.gui-icon-grid button:focus-visible {
    border-color: #bfdbfe;
    background: #eff6ff;
    box-shadow: 0 8px 18px rgb(20 33 61 / 12%);
    outline: none;
    transform: translateY(-2px);
}

.gui-icon-grid button:active {
    transform: translateY(0);
}

.gui-icon-grid svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.gui-icon-grid span {
    color: #334155;
}

.gui-large-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    max-height: 680px;
    overflow: auto;
    padding-right: 4px;
}

.gui-large-icon-grid button {
    display: grid;
    min-height: 84px;
    place-items: center;
    gap: 7px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.gui-large-icon-grid button:hover,
.gui-large-icon-grid button:focus-visible {
    border-color: #99f6e4;
    background: #f0fdfa;
    box-shadow: 0 8px 18px rgb(20 33 61 / 12%);
    outline: none;
    transform: translateY(-2px);
}

.gui-large-icon-grid small {
    max-width: 82px;
    overflow: hidden;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gui-generated-icon {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 8px;
    color: #0f766e;
}

.gui-generated-icon::before,
.gui-generated-icon::after,
.gui-generated-icon i,
.gui-generated-icon i::before,
.gui-generated-icon i::after {
    position: absolute;
    display: block;
    content: "";
}

.gui-generated-icon-1::before { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 999px; top: 6px; }
.gui-generated-icon-1::after { width: 22px; height: 10px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 999px 999px; bottom: 4px; }

.gui-generated-icon-2::before { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; top: 6px; }
.gui-generated-icon-2::after { width: 20px; height: 3px; background: currentColor; bottom: 6px; }

.gui-generated-icon-3::before { width: 20px; height: 16px; border: 2px solid currentColor; border-radius: 3px; }
.gui-generated-icon-3::after { width: 12px; height: 2px; background: currentColor; bottom: 7px; }

.gui-generated-icon-4 { border-radius: 999px; }
.gui-generated-icon-4::before { width: 18px; height: 2px; background: currentColor; }
.gui-generated-icon-4::after { width: 2px; height: 18px; background: currentColor; }

.gui-generated-icon-5::before { width: 18px; height: 20px; border: 2px solid currentColor; border-radius: 2px; }
.gui-generated-icon-5::after { width: 10px; height: 2px; background: currentColor; top: 12px; }

.gui-generated-icon-6::before { width: 20px; height: 12px; border: 2px solid currentColor; border-radius: 3px; }
.gui-generated-icon-6::after { width: 10px; height: 8px; border: 2px solid currentColor; border-top: 0; bottom: 5px; }

.gui-generated-icon-7::before { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 999px; }
.gui-generated-icon-7::after { width: 10px; height: 2px; background: currentColor; transform: rotate(45deg); right: 4px; bottom: 7px; }

.gui-generated-icon-8::before { width: 18px; height: 18px; border: 2px solid currentColor; transform: rotate(45deg); }
.gui-generated-icon-8::after { width: 8px; height: 8px; background: currentColor; border-radius: 999px; }

.gui-generated-icon-9::before { width: 22px; height: 14px; border: 2px solid currentColor; border-radius: 4px; }
.gui-generated-icon-9::after { width: 12px; height: 2px; background: currentColor; transform: rotate(-35deg); }

.gui-generated-icon-10::before { width: 20px; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.gui-generated-icon-10::after { width: 16px; height: 2px; background: currentColor; top: 11px; }

.gui-generated-icon-11::before { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 5px; }
.gui-generated-icon-11::after { width: 13px; height: 7px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }

.gui-generated-icon-12::before { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 999px; }
.gui-generated-icon-12::after { width: 16px; height: 2px; background: currentColor; transform: rotate(45deg); }

.gui-generated-icon-13::before { width: 20px; height: 18px; border: 2px solid currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gui-generated-icon-13::after { width: 3px; height: 10px; background: currentColor; top: 11px; }

.gui-generated-icon-14::before { width: 20px; height: 16px; border: 2px solid currentColor; border-radius: 999px 999px 4px 4px; }
.gui-generated-icon-14::after { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); bottom: 5px; }

.gui-generated-icon-15::before { width: 22px; height: 2px; background: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
.gui-generated-icon-15::after { width: 6px; height: 6px; border-radius: 999px; background: currentColor; left: 8px; top: 7px; box-shadow: 10px 7px 0 currentColor, -2px 14px 0 currentColor; }

.gui-generated-icon-16::before { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(8deg); }
.gui-generated-icon-16::after { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-12deg); }

.gui-external-icon-demo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.gui-external-icon-demo button {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    padding: 0 12px;
    color: #9a3412;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.gui-external-icon-demo button:hover,
.gui-external-icon-demo button:focus-visible {
    border-color: #fb923c;
    background: #ffedd5;
    outline: none;
    transform: translateY(-1px);
}

.gui-external-icon-demo i {
    width: 20px;
    color: #f97316;
    font-size: 16px;
    text-align: center;
}

.gui-external-toolbar {
    display: inline-flex;
    gap: 8px;
    margin-top: 14px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px;
}

.gui-external-toolbar button {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #c2410c;
    font-size: 15px;
    cursor: pointer;
}

.gui-external-toolbar button:hover,
.gui-external-toolbar button:focus-visible {
    background: #fff7ed;
    outline: none;
}

.gui-fa-button-library {
    overflow: hidden;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    background: #ffffff;
}

.gui-fa-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid #e8edf4;
    background: #f0fdfa;
    padding: 10px;
}

.gui-fa-tabs button {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    padding: 0 12px;
    color: #0f766e;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.gui-fa-tabs button:hover,
.gui-fa-tabs button:focus-visible,
.gui-fa-tabs button.is-active {
    border-color: #5eead4;
    background: #ffffff;
    outline: none;
}

.gui-fa-panel {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
    padding: 14px;
}

.gui-fa-panel.is-active {
    display: grid;
}

.gui-fa-panel button {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.gui-fa-panel button:hover,
.gui-fa-panel button:focus-visible {
    border-color: #99f6e4;
    background: #f0fdfa;
    box-shadow: 0 8px 18px rgb(20 33 61 / 10%);
    outline: none;
    transform: translateY(-1px);
}

.gui-fa-panel i {
    width: 20px;
    color: #0f766e;
    font-size: 16px;
    text-align: center;
}

.gui-command-center {
    position: relative;
    overflow: hidden;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgb(15 23 42 / 92%), rgb(30 64 175 / 74%)),
        url("/storage/media-covers/2/RObc4X8lRci5a3AtdHH0MEv5bzgT2gg8YDaUe8Dx.jpg") center / cover;
    padding: 18px;
    color: #ffffff;
}

.gui-command-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
    gap: 18px;
    align-items: end;
    margin-bottom: 16px;
}

.gui-command-hero span {
    display: block;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gui-command-hero strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    line-height: 1.12;
}

.gui-command-hero p {
    max-width: 620px;
    margin: 8px 0 0;
    color: rgb(255 255 255 / 76%);
    font-size: 14px;
    line-height: 1.45;
}

.gui-command-search {
    display: flex;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 8px;
    background: rgb(255 255 255 / 14%);
    backdrop-filter: blur(12px);
}

.gui-command-search input,
.gui-command-search button {
    min-height: 44px;
    border: 0;
    font: inherit;
}

.gui-command-search input {
    min-width: 0;
    flex: 1;
    background: transparent;
    padding: 0 12px;
    color: #ffffff;
}

.gui-command-search button {
    background: #ffffff;
    padding: 0 14px;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 950;
}

.gui-mode-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.gui-mode-rail button {
    min-height: 34px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    padding: 0 13px;
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.gui-mode-rail button:hover,
.gui-mode-rail button.is-active {
    background: #ffffff;
    color: #1d4ed8;
}

.gui-command-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1fr) minmax(190px, 0.42fr);
    gap: 14px;
    align-items: stretch;
}

.gui-command-list,
.gui-command-detail,
.gui-inspector,
.gui-card-mode,
.gui-smart-bulk-bar {
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 8px;
    background: rgb(255 255 255 / 86%);
    color: #14213d;
    box-shadow: 0 14px 28px rgb(15 23 42 / 18%);
    backdrop-filter: blur(14px);
}

.gui-command-list {
    overflow: hidden;
}

.gui-list-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e8edf4;
    padding: 12px 14px;
}

.gui-list-head strong {
    font-size: 15px;
}

.gui-list-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.gui-student-row {
    display: grid;
    width: 100%;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid #e8edf4;
    background: transparent;
    padding: 11px 14px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gui-student-row:hover,
.gui-student-row.is-active {
    background: #eff6ff;
}

.gui-student-row input {
    accent-color: #2563eb;
}

.gui-student-row strong,
.gui-student-row small {
    display: block;
}

.gui-student-row strong {
    color: #14213d;
    font-size: 13px;
}

.gui-student-row small {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.gui-student-row mark {
    border-radius: 999px;
    background: #dcfce7;
    padding: 4px 8px;
    color: #166534;
    font-size: 10px;
    font-weight: 950;
}

.gui-student-row mark.is-warning {
    background: #fef3c7;
    color: #92400e;
}

.gui-student-row mark.is-muted {
    background: #f1f5f9;
    color: #475569;
}

.gui-student-row mark.is-danger {
    background: #fee2e2;
    color: #991b1b;
}

.gui-command-detail {
    padding: 14px;
}

.gui-detail-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.gui-detail-avatar,
.gui-student-card span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
}

.gui-detail-card strong,
.gui-detail-card span:not(.gui-detail-avatar) {
    display: block;
}

.gui-detail-card span:not(.gui-detail-avatar) {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.gui-detail-tabs {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 4px;
}

.gui-detail-tabs button {
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0 10px;
    color: #526176;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.gui-detail-tabs button.is-active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 4px 10px rgb(20 33 61 / 10%);
}

.gui-detail-panel {
    display: none;
    margin-top: 14px;
}

.gui-detail-panel.is-active {
    display: block;
}

.gui-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.gui-kpi-row div {
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px;
}

.gui-kpi-row span,
.gui-kpi-row strong {
    display: block;
}

.gui-kpi-row span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.gui-kpi-row strong {
    margin-top: 4px;
    color: #14213d;
    font-size: 18px;
}

.gui-note-box {
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 10px;
    color: #14213d;
    font: inherit;
    resize: vertical;
}

.gui-inspector {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
}

.gui-inspector span {
    color: #64748b;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gui-inspector strong {
    margin-bottom: 4px;
    font-size: 16px;
}

.gui-inspector button,
.gui-smart-bulk-bar button {
    min-height: 34px;
    border: 1px solid #d9e1ec;
    border-radius: 7px;
    background: #ffffff;
    color: #14213d;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.gui-inspector button:hover,
.gui-smart-bulk-bar button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.gui-inspector button.is-danger {
    border-color: #fecaca;
    color: #dc2626;
}

.gui-card-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
}

.gui-student-card {
    display: grid;
    gap: 7px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
}

.gui-student-card strong,
.gui-student-card small {
    display: block;
}

.gui-student-card small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.gui-smart-bulk-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
    padding: 10px;
}

.gui-smart-bulk-bar span {
    margin-right: auto;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}

.gui-alt-workspace,
.gui-kanban,
.gui-card-explorer,
.gui-cockpit {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.gui-alt-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e8edf4;
    background: #f8fafc;
    padding: 10px 10px 0;
}

.gui-alt-tabs button {
    min-height: 38px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    padding: 0 12px;
    color: #526176;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.gui-alt-tabs button.is-active,
.gui-alt-tabs button:hover {
    border-color: #e8edf4;
    background: #ffffff;
    color: #0f766e;
}

.gui-alt-panel {
    display: none;
    padding: 16px;
}

.gui-alt-panel.is-active {
    display: block;
}

.gui-alt-split {
    display: grid;
    grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1fr);
    gap: 14px;
}

.gui-alt-list {
    display: grid;
    gap: 8px;
}

.gui-alt-list button,
.gui-kanban button {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 11px 12px;
    color: #14213d;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gui-alt-list button:hover,
.gui-alt-list button.is-active {
    border-color: #99f6e4;
    background: #f0fdfa;
}

.gui-alt-list strong,
.gui-alt-list span,
.gui-kanban strong,
.gui-kanban span {
    display: block;
}

.gui-alt-list span,
.gui-kanban span {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.gui-alt-focus {
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    background: linear-gradient(135deg, #f0fdfa, #ffffff);
    padding: 16px;
}

.gui-alt-focus > span,
.gui-alt-metric-row span {
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-alt-focus strong {
    display: block;
    margin-top: 6px;
    font-size: 22px;
}

.gui-alt-focus p {
    color: #526176;
    font-size: 13px;
    line-height: 1.45;
}

.gui-alt-metric-row,
.gui-cockpit-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.gui-alt-metric-row div,
.gui-cockpit-top div {
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #f8fafc;
    padding: 14px;
}

.gui-alt-metric-row strong,
.gui-cockpit-top strong {
    display: block;
    margin-top: 6px;
    color: #14213d;
    font-size: 20px;
}

.gui-kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    background: #fff7ed;
    padding: 12px;
}

.gui-kanban section {
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: rgb(255 255 255 / 82%);
    padding: 12px;
}

.gui-kanban h3 {
    margin: 0 0 4px;
    color: #9a3412;
    font-size: 14px;
}

.gui-kanban button:hover {
    border-color: #fb923c;
    background: #ffedd5;
}

.gui-card-explorer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 14px;
    padding: 14px;
}

.gui-card-explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.gui-card-explorer-grid button {
    display: grid;
    justify-items: start;
    gap: 8px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    color: #14213d;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.gui-card-explorer-grid button:hover,
.gui-card-explorer-grid button.is-active {
    background: #eff6ff;
    box-shadow: 0 10px 22px rgb(37 99 235 / 12%);
}

.gui-card-explorer-grid span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 950;
}

.gui-card-explorer-grid strong,
.gui-card-explorer-grid small {
    display: block;
}

.gui-card-explorer-grid small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.gui-card-explorer aside {
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    padding: 14px;
}

.gui-card-explorer aside > span {
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-card-explorer aside > strong {
    display: block;
    margin: 6px 0 12px;
    font-size: 20px;
}

.gui-cockpit {
    padding: 14px;
}

.gui-cockpit-top {
    margin-bottom: 14px;
}

.gui-cockpit-top span {
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gui-cockpit-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.35fr);
    gap: 14px;
}

.gui-cockpit-actions {
    display: grid;
    align-content: start;
    gap: 8px;
}

.gui-cockpit-actions button {
    min-height: 40px;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    background: #f0fdfa;
    color: #0f766e;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.gui-cockpit-actions button:hover {
    border-color: #5eead4;
    background: #ccfbf1;
}

.bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    padding: 16px 18px 0;
}

.bulk-actions [data-copy-selection-action]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.bulk-template-select {
    display: inline-grid;
    min-width: 230px;
    gap: 5px;
    color: #526176;
    font-size: 12px;
    font-weight: 900;
}

.bulk-template-select select {
    min-height: 40px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 10px;
    color: #14213d;
    font: inherit;
}

.list-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px 18px 0;
}

.list-meta strong {
    font-size: 22px;
}

.list-meta span {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.loan-value-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.loan-value-summary div {
    padding: 18px 20px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
}

.loan-value-summary span {
    display: block;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.loan-value-summary strong {
    display: block;
    margin-top: 6px;
    color: #14213d;
    font-size: 24px;
}

.student-loan-overview {
    display: flex;
    flex-direction: column;
}

.student-loan-overview .loan-history-panel {
    order: 20;
}

.student-loan-overview .student-reminder-history {
    order: 30;
}

.current-loans-panel,
.loan-history-panel {
    margin-bottom: 18px;
    padding: 18px;
}

.current-loans-head,
.loan-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.current-loans-head h2,
.loan-history-head h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
}

.current-loans-head p,
.loan-history-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.current-loan-list {
    display: grid;
    gap: 12px;
}

.current-loan-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(340px, 1.3fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
}

.current-loan-card--overdue {
    border-color: #fecaca;
    background: #fff7f7;
}

.current-loan-card strong,
.current-loan-card span {
    display: block;
}

.current-loan-card strong {
    color: #14213d;
    font-size: 15px;
}

.current-loan-card span {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.current-loan-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.current-loan-card dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.current-loan-card dd {
    margin: 4px 0 0;
    color: #14213d;
    font-weight: 800;
}

.current-loan-card dd .badge {
    margin-top: 6px;
}

.student-reminder-history {
    margin-bottom: 18px;
    padding: 18px;
}

.student-reminder-history__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    cursor: pointer;
    list-style: none;
}

.student-reminder-history__head::-webkit-details-marker {
    display: none;
}

.student-reminder-history__head::after {
    content: "Anzeigen";
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    padding: 7px 10px;
    color: #1e293b;
    font-size: 12px;
    font-weight: 900;
}

.student-reminder-history[open] .student-reminder-history__head::after {
    content: "Ausblenden";
}

.student-reminder-history:not([open]) .student-reminder-history__head {
    margin-bottom: 0;
}

.student-reminder-history__head .badge {
    align-self: center;
}

.student-reminder-history__head h2 {
    margin: 0;
    padding: 0;
    font-size: 18px;
}

.student-reminder-history__head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

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

.timeline-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
}

.timeline-item__marker {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 999px;
    background: #2563eb;
}

.timeline-item strong,
.timeline-item span,
.timeline-item p {
    display: block;
}

.timeline-item strong {
    color: #14213d;
    font-size: 14px;
}

.timeline-item span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.timeline-item p {
    margin: 4px 0 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.student-media-cell {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 240px;
}

.student-media-cell strong,
.student-media-cell span {
    display: block;
}

.student-media-cell strong {
    color: #14213d;
    font-size: 14px;
    line-height: 1.35;
}

.student-media-cell span {
    margin-top: 3px;
    color: #526176;
    font-size: 12px;
    line-height: 1.35;
}

.student-media-cover {
    display: inline-flex;
    width: 64px;
    height: 84px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    background: #f8fafc;
    color: #526176;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    object-fit: cover;
    text-align: center;
}

.student-portal-dunning-panel {
    margin-top: 18px;
}

.student-portal-dunning-panel h2 {
    padding-bottom: 16px;
}

.student-portal-invoice-items {
    display: grid;
    gap: 4px;
}

.student-portal-invoice-items span {
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.student-media-cover-button {
    display: inline-flex;
    width: 64px;
    height: 84px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: zoom-in;
}

.cover-modal[hidden] {
    display: none;
}

.cover-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 28px;
}

.cover-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 68%);
}

.cover-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    justify-items: center;
    max-width: min(420px, 92vw);
    padding: 18px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgb(15 23 42 / 28%);
}

.cover-modal__dialog img {
    display: block;
    max-width: min(340px, 78vw);
    max-height: 70vh;
    border-radius: 6px;
    object-fit: contain;
}

.cover-modal__dialog strong {
    max-width: min(340px, 78vw);
    color: #14213d;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
}

.cover-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e1ec;
    border-radius: 999px;
    background: #ffffff;
    color: #14213d;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.confirm-dialog {
    align-items: stretch;
    justify-items: stretch;
    width: min(460px, 94vw);
    padding: 22px;
}

.confirm-dialog h2 {
    margin: 0;
    padding-right: 36px;
    color: #14213d;
    font-size: 22px;
    line-height: 1.2;
}

.confirm-dialog p {
    margin: 0;
    color: #526176;
    font-size: 14px;
    line-height: 1.55;
}

.confirm-dialog p strong {
    display: inline;
    color: #14213d;
    font-size: inherit;
    text-align: left;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.confirm-actions form {
    margin: 0;
}

.student-search-dialog {
    align-items: stretch;
    justify-items: stretch;
    width: min(560px, 94vw);
}

.student-search-dialog h2 {
    margin: 0;
    padding-right: 36px;
    color: #14213d;
    font-size: 22px;
}

.student-search-dialog input {
    min-height: 48px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
}

.student-search-results {
    display: grid;
    gap: 8px;
    max-height: 54vh;
    overflow: auto;
}

.student-search-results > span {
    color: #526176;
    font-size: 14px;
    font-weight: 800;
}

.student-search-result {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #ffffff;
    color: #14213d;
    text-align: left;
    cursor: pointer;
}

.student-search-result:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.student-search-result--teacher {
    border-color: #c7ddd3;
    background: #f4faf7;
}

.student-search-result--teacher:hover {
    border-color: #8fc7ad;
    background: #eaf6ef;
}

.student-search-result strong,
.student-search-result span {
    display: block;
    text-align: left;
}

.student-search-result .student-search-result__type {
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8edf4;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.student-search-result.student-search-result--teacher .student-search-result__type {
    background: #d9efe4;
    color: #24634a;
}

.student-search-result strong {
    color: #14213d;
    font-size: 15px;
    line-height: 1.25;
}

.student-search-result span {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.portal-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(82mm, 1fr));
    gap: 10mm;
}

.portal-access-card {
    display: grid;
    gap: 10px;
    padding: 8mm;
    border: 1px solid #111827;
    border-radius: 8px;
    background: #ffffff;
    break-inside: avoid;
}

.portal-access-card header strong {
    display: block;
    color: #000000;
    font-size: 18px;
    line-height: 1.2;
}

.portal-access-card header span,
.portal-access-card p {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.portal-access-card dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.portal-access-card dl div {
    display: grid;
    grid-template-columns: 30mm 1fr;
    gap: 8px;
}

.portal-access-card dt {
    color: #526176;
    font-size: 12px;
    font-weight: 900;
}

.portal-access-card dd {
    margin: 0;
    color: #000000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 16px;
    font-weight: 900;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 16px;
    border-bottom: 1px solid #e8edf4;
    text-align: left;
    vertical-align: middle;
}

th {
    color: #526176;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

tfoot th {
    background: #f8fafc;
    color: #14213d;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.select-cell {
    width: 44px;
    text-align: center;
}

.select-cell input {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}

.copy-select-label {
    cursor: pointer;
}

td span {
    display: block;
    color: #526176;
    font-size: 13px;
}

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

.operator-school-usage {
    margin-top: 34px;
}

.operator-school-row td {
    border-bottom: 0;
}

.operator-license-row td {
    padding-top: 0;
    padding-bottom: 14px;
    border-top: 0;
    background: transparent;
}

.operator-school-period {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.operator-license-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.operator-license-thumb {
    width: 53px;
    height: 35px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
}

.operator-license-line > strong:first-of-type {
    color: #0f172a;
}

.operator-license-line span {
    display: inline;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.table-actions {
    text-align: right;
    white-space: nowrap;
}

.table-actions__inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.table-actions a:not(.button) {
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

.table-actions .button {
    margin-left: 0;
}

.table-actions form {
    display: inline-flex;
    margin: 0;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover td {
    background: #f8fafc;
}

.link-button {
    margin-left: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.link-button-danger {
    color: #dc2626;
}

.link-button-danger:hover {
    color: #991b1b;
}

.danger-link {
    color: #dc2626;
}

.danger-panel {
    border-color: #fecaca;
    background: #fffafa;
}

.media-table {
    table-layout: fixed;
}

.media-col-cover {
    width: 64px;
}

.media-col-title {
    width: auto;
}

.media-col-subject {
    width: 120px;
}

.media-col-small {
    width: 72px;
}

.media-col-count {
    width: 86px;
}

.media-col-actions {
    width: 164px;
}

.media-title-cell strong,
.media-title-cell span {
    display: block;
}

.media-title-cell strong {
    color: #14213d;
    font-size: 14px;
    line-height: 1.35;
}

.media-title-cell span {
    max-width: 100%;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
}

.media-table td:not(.media-title-cell):not(.table-actions) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-table .table-actions {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

.media-table .table-actions .button {
    margin-left: 0;
}

.media-table .table-actions .icon-button {
    width: 34px;
    height: 34px;
}

.badge {
    display: inline-flex;
    width: auto;
    padding: 4px 8px;
    border-radius: 6px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.badge-active,
.badge-trial {
    background: #dcfce7;
    color: #166534;
}

.badge-paused,
.badge-inactive,
.badge-muted {
    background: #f1f5f9;
    color: #475569;
}

.badge-cancelled,
.badge-trial-expired,
.badge-left,
.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-loaned,
.badge-trial-warning,
.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-returned {
    background: #e0f2fe;
    color: #075985;
}

.status-note {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: none;
    white-space: normal;
}

.status-note-danger {
    color: #991b1b;
}

.mail-client {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.mail-client__customers,
.mail-client__thread {
    padding: 0;
    overflow: hidden;
}

.mail-client__section-head,
.mail-client__thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #e8edf4;
}

.mail-client__section-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.mail-client__customer-list,
.mail-client__rows {
    display: grid;
}

.mail-client__customer {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
    color: inherit;
    text-decoration: none;
}

.mail-client__customer:hover,
.mail-client__customer.active {
    background: #f8fafc;
}

.mail-client__customer.active {
    box-shadow: inset 3px 0 0 #2563eb;
}

.mail-client__avatar {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f2fe;
    color: #075985;
    font-weight: 900;
}

.mail-client__customer-main {
    min-width: 0;
}

.mail-client__customer-main strong,
.mail-client__customer-main span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-client__customer-main span {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
}

.mail-client__count {
    min-width: 24px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 900;
    line-height: 24px;
    text-align: center;
}

.mail-client__thread-head h2 {
    margin: 2px 0;
    padding: 0;
    font-size: 20px;
}

.mail-client__thread-head p {
    margin: 0;
}

.mail-client__actions,
.mail-client__row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mail-client__row-actions form {
    margin: 0;
}

.mail-modal[hidden] {
    display: none;
}

.mail-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 18px;
}

.mail-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(15 23 42 / 45%);
    cursor: pointer;
}

.mail-modal__dialog {
    position: relative;
    width: min(920px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgb(15 23 42 / 30%);
}

.compose-window__form {
    display: grid;
    min-height: min(720px, calc(100vh - 36px));
    grid-template-rows: auto auto auto minmax(260px, 1fr) auto;
}

.compose-window__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px 10px 16px;
    background: #f4f7fb;
    border-bottom: 1px solid #dce4ee;
}

.compose-window__titlebar h3,
.compose-window__titlebar p {
    margin: 0;
}

.compose-window__titlebar h3 {
    font-size: 15px;
    font-weight: 850;
    color: #111827;
}

.compose-window__titlebar p {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.compose-window__close {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #475569;
    cursor: pointer;
}

.compose-window__close:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.compose-window__close svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.compose-window__commandbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 7px 14px;
    border-bottom: 1px solid #e6edf5;
    background: #ffffff;
}

.compose-window__send,
.compose-window__discard {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.compose-window__send {
    border: 1px solid #1d4ed8;
    background: #2563eb;
    color: #ffffff;
    padding: 0 13px;
}

.compose-window__send:hover {
    border-color: #1e40af;
    background: #1d4ed8;
}

.compose-window__discard {
    border: 1px solid transparent;
    background: transparent;
    color: #475569;
    padding: 0 10px;
}

.compose-window__discard:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #111827;
}

.compose-window__send svg,
.compose-window__discard svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.compose-window__addressing {
    display: grid;
    background: #ffffff;
}

.compose-window__line {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid #edf2f7;
}

.compose-window__line--recipient {
    grid-template-columns: 88px minmax(0, 1fr) 34px;
}

.compose-window__line > span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.compose-window__line strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.compose-window__line input {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: #0f172a;
    font-size: 14px;
    outline: none;
}

.compose-window__line:focus-within {
    box-shadow: inset 3px 0 0 #2563eb;
    background: #fbfdff;
}

.compose-window__address-button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e1ec;
    border-radius: 5px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
}

.compose-window__address-button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.compose-window__address-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.compose-window__line small,
.compose-window__editor small {
    grid-column: 2;
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
}

.compose-window__editor {
    display: grid;
    grid-template-rows: 0 minmax(260px, 1fr) auto;
    min-height: 0;
    background: #ffffff;
}

.compose-window__editor > span {
    overflow: hidden;
    width: 1px;
    height: 1px;
}

.compose-window__editor textarea {
    width: 100%;
    min-height: 100%;
    resize: vertical;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    padding: 18px 20px;
    color: #111827;
    font-size: 15px;
    line-height: 1.55;
    outline: none;
}

.compose-window__status {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 16px;
    border-top: 1px solid #edf2f7;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.address-modal[hidden] {
    display: none;
}

.address-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 18px;
}

.address-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(15 23 42 / 22%);
    cursor: pointer;
}

.address-modal__dialog {
    position: relative;
    width: min(860px, 100%);
    max-height: min(720px, calc(100vh - 42px));
    overflow: hidden;
    border: 1px solid #cfd8e3;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 22px 65px rgb(15 23 42 / 28%);
}

.address-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 14px 11px 16px;
    border-bottom: 1px solid #e6edf5;
    background: #f8fafc;
}

.address-modal__head h4,
.address-modal__head p {
    margin: 0;
}

.address-modal__head h4 {
    color: #111827;
    font-size: 15px;
    font-weight: 850;
}

.address-modal__head p {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.address-modal__create {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.25fr) minmax(220px, 1.15fr) 38px;
    gap: 10px;
    align-items: end;
    padding: 12px 14px;
    border-bottom: 1px solid #e6edf5;
    background: #fbfdff;
}

.address-modal__create label,
.address-modal__edit-form label {
    min-width: 0;
    gap: 5px;
}

.address-modal__create label span,
.address-modal__edit-form label span {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}

.address-modal__create input,
.address-modal__create select,
.address-modal__edit-form input,
.address-modal__edit-form select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    background: #ffffff;
    padding: 7px 10px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.address-modal__create select,
.address-modal__edit-form select {
    padding-right: 28px;
    text-overflow: ellipsis;
}

.address-modal__create input:hover,
.address-modal__create select:hover,
.address-modal__edit-form input:hover,
.address-modal__edit-form select:hover {
    border-color: #bfdbfe;
}

.address-modal__create input:focus,
.address-modal__create select:focus,
.address-modal__edit-form input:focus,
.address-modal__edit-form select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 14%);
    outline: none;
}

.address-modal__list {
    display: grid;
    max-height: 530px;
    overflow: auto;
    padding: 8px;
    gap: 6px;
}

.address-modal__entry {
    border-radius: 6px;
    background: #ffffff;
}

.address-modal__entry--editable {
    border: 1px solid #e6edf5;
}

.address-modal__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 34px;
    align-items: center;
    gap: 6px;
    padding: 4px;
}

.address-modal__row form {
    margin: 0;
}

.address-modal__row .icon-button {
    width: 32px;
    height: 32px;
}

.address-modal__select {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    padding: 7px 8px;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}

.address-modal__select:hover,
.address-modal__select:focus-visible {
    background: #eff6ff;
    outline: none;
}

.address-modal__edit[hidden] {
    display: none;
}

.address-modal__edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    padding: 6px 10px 10px 52px;
    border-top: 1px solid #edf2f7;
    background: #fbfdff;
}

.address-modal__edit-form {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(190px, 1.25fr) minmax(190px, 1.15fr) 38px;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.address-modal__create > .icon-button,
.address-modal__edit-form > .icon-button {
    width: 36px;
    height: 36px;
    align-self: end;
}

.address-modal__avatar {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e0f2fe;
    color: #075985;
    font-size: 13px;
    font-weight: 900;
}

.address-modal__main {
    min-width: 0;
}

.address-modal__main strong,
.address-modal__main span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address-modal__main strong {
    font-size: 13px;
    font-weight: 850;
}

.address-modal__main span {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.address-modal__type {
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 850;
}

.address-modal__empty {
    padding: 18px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.license-panel {
    display: grid;
    gap: 18px;
    padding: 14px 24px 24px;
}

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

.license-meter {
    display: grid;
    gap: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
}

.license-meter > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.license-meter strong {
    color: #0f172a;
    font-size: 20px;
}

.license-meter__bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.license-meter__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
}

.license-meter.is-warning .license-meter__bar i {
    background: #d97706;
}

.license-meter.is-danger .license-meter__bar i {
    background: #dc2626;
}

.license-warnings {
    display: grid;
    gap: 6px;
}

.license-warnings span {
    border: 1px solid #fde68a;
    border-radius: 6px;
    background: #fffbeb;
    color: #92400e;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 800;
}

.license-renewal {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.license-renewal__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.license-renewal__head strong {
    color: #0f172a;
    font-size: 16px;
}

.license-renewal__head span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.license-renewal__grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(260px, 1.6fr) auto;
    align-items: end;
    gap: 16px;
}

.license-renewal label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.license-renewal input,
.license-renewal select {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px 12px;
    color: #0f172a;
    font: inherit;
}

.license-renewal input:focus,
.license-renewal select:focus {
    outline: 2px solid #bfdbfe;
    border-color: #2563eb;
}

.license-renewal .checkbox-field {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-self: center;
    color: #475569;
}

.license-renewal .checkbox-field input {
    width: 18px;
    height: 18px;
}

.license-table-cell {
    display: grid;
    gap: 2px;
    min-width: 145px;
    color: #475569;
    font-size: 12px;
    font-weight: 750;
}

.license-table-cell .badge {
    justify-self: start;
    margin-top: 4px;
}

.license-settings-summary {
    display: grid;
    gap: 14px;
}

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

.license-settings-meta div {
    display: grid;
    gap: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
}

.license-settings-meta dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.license-settings-meta dd {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
}

.license-warnings--quiet span {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #475569;
}

.school-license-alert {
    margin: 0 auto 16px;
    max-width: var(--content-width);
}

.school-license-alert > div {
    display: grid;
    gap: 6px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    padding: 12px 14px;
    box-shadow: 0 8px 22px rgb(146 64 14 / 7%);
}

.school-license-alert strong {
    color: #78350f;
    font-size: 14px;
}

.school-license-alert span {
    font-size: 13px;
    font-weight: 750;
}

body.modal-open {
    overflow: hidden;
}

.mail-client__row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #eef2f7;
}

.mail-client__row:hover {
    background: #f8fafc;
}

.mail-client__row[data-row-href] {
    cursor: pointer;
}

.mail-client__row[data-row-href]:focus-visible {
    outline: 3px solid rgb(37 99 235 / 22%);
    outline-offset: -3px;
}

.mail-client__row-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
}

.mail-client__row-icon--danger {
    background: #fef2f2;
    color: #dc2626;
}

.mail-client__row-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.mail-client__row-main {
    min-width: 0;
}

.mail-client__row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mail-client__row-top strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-client__row-top time,
.mail-client__row-meta {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.mail-client__row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 3px;
}

.mail-client__row-preview {
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
    margin: 6px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.communication-details-dialog {
    width: min(780px, 94vw);
    max-width: min(780px, 94vw);
    max-height: 88vh;
    align-items: stretch;
    justify-items: stretch;
    gap: 16px;
    padding: 22px;
}

.communication-details-dialog__head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 36px;
}

.communication-details-dialog__head div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.communication-details-dialog__head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.communication-details-dialog__head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.communication-details-dialog__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.communication-details-dialog__meta div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}

.communication-details-dialog__meta dt,
.communication-details-dialog__meta dd {
    margin: 0;
}

.communication-details-dialog__meta dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.communication-details-dialog__meta dd {
    color: #0f172a;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.communication-details-dialog__message {
    display: grid;
    gap: 8px;
}

.communication-details-dialog__message h3,
.communication-details-dialog__message p {
    margin: 0;
}

.communication-details-dialog__message h3 {
    color: #0f172a;
    font-size: 14px;
}

.communication-details-dialog__message p {
    max-height: 34vh;
    overflow: auto;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 920px) {
    .mail-client {
        grid-template-columns: 1fr;
    }

    .mail-modal {
        padding: 12px;
    }

    .compose-window__line {
        grid-template-columns: 1fr;
        gap: 3px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .compose-window__line--recipient {
        grid-template-columns: 1fr 34px;
    }

    .compose-window__line--recipient > span,
    .compose-window__line--recipient small {
        grid-column: 1 / -1;
    }

    .compose-window__commandbar,
    .compose-window__status {
        flex-wrap: wrap;
    }

    .license-grid {
        grid-template-columns: 1fr;
    }

    .license-renewal__grid {
        grid-template-columns: 1fr;
    }

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

    .address-modal__create,
    .address-modal__edit,
    .address-modal__edit-form {
        grid-template-columns: 1fr;
    }

    .address-modal__edit {
        padding-left: 8px;
    }
}

.empty {
    padding: 32px 16px;
    color: #526176;
    text-align: center;
}

.pagination-wrap {
    margin-top: 18px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
}

.pagination__summary {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.pagination__controls,
.pagination__pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination__button,
.pagination__page,
.pagination__ellipsis {
    display: inline-flex;
    min-width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    color: #14213d;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}

.pagination__button {
    min-width: 86px;
    padding: 0 12px;
}

.pagination__page:hover,
.pagination__button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.pagination__page--active {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

.pagination__button--disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.pagination__ellipsis {
    min-width: 28px;
    border-color: transparent;
    background: transparent;
    color: #94a3b8;
}

.form-panel {
    padding: 22px;
}

.settings-form {
    display: grid;
    gap: 24px;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: visible;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 6px;
}

.settings-tabs button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 0 12px;
    color: #526176;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.settings-tabs button:hover,
.settings-tabs button:focus-visible {
    background: #eaf2ff;
    color: #1d4ed8;
    outline: none;
}

.settings-tabs button.is-active {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 8px 16px rgb(37 99 235 / 18%);
}

.settings-section {
    display: grid;
    gap: 14px;
}

.settings-section[hidden] {
    display: none;
}

.file-upload-control {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.file-upload-control input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid #b8c7dc;
    border-radius: 8px;
    background: #ffffff;
    color: #14213d;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgb(20 33 61 / 8%);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.file-upload-name {
    min-width: 0;
    color: #526176;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-upload-control:hover .file-upload-button,
.file-upload-control:focus-within .file-upload-button {
    border-color: #2563eb;
    box-shadow: 0 6px 16px rgb(37 99 235 / 16%);
}

.file-upload-control:hover .file-upload-button {
    transform: translateY(-1px);
}

.settings-section h2 {
    margin: 0;
    font-size: 22px;
}

.settings-subsection {
    display: grid;
    gap: 4px;
    margin-top: 4px;
}

.settings-subsection h3 {
    margin: 0;
    color: #14213d;
    font-size: 15px;
}

.settings-subsection p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.settings-inline-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.form-grid .settings-inline-action small {
    color: #64748b;
}

.iserv-activity-row {
    display: grid;
    grid-template-columns: 130px 110px minmax(150px, 1fr) minmax(180px, 1.2fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    color: #526176;
    font-size: 13px;
}

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

.iserv-activity-row > span:nth-child(3) {
    display: grid;
    gap: 2px;
}

.iserv-activity-row small {
    color: #64748b;
}

@media (max-width: 720px) {
    .iserv-activity-row {
        grid-template-columns: 1fr auto;
    }

    .iserv-activity-row > span:nth-child(3),
    .iserv-activity-row > span:nth-child(4) {
        grid-column: 1 / -1;
    }
}

.settings-details {
    gap: 0;
}

.settings-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    color: #14213d;
    cursor: pointer;
    list-style: none;
    box-shadow: 0 4px 12px rgb(20 33 61 / 6%);
}

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

.settings-details summary::after {
    content: "Aufklappen";
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.settings-details[open] summary::after {
    content: "Zuklappen";
}

.settings-details summary strong,
.settings-details summary small {
    display: block;
}

.settings-details summary small {
    margin-top: 4px;
    color: #526176;
    font-size: 13px;
}

.settings-details-body {
    display: grid;
    gap: 10px;
    padding-top: 12px;
}

.provider-invoice-items {
    display: grid;
    gap: 12px;
}

.provider-invoice-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
}

.provider-invoice-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.provider-invoice-item__head strong {
    color: #14213d;
    font-size: 14px;
}

@media (max-width: 720px) {
    .provider-invoice-item {
        grid-template-columns: 1fr;
    }
}

.backup-preview-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.backup-preview-meta div {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px 12px;
}

.backup-preview-meta dt,
.backup-preview-meta dd {
    margin: 0;
}

.backup-preview-meta dt {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.backup-preview-meta dd {
    margin-top: 3px;
    color: #14213d;
    font-size: 14px;
    font-weight: 900;
}

.settings-fieldset {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 16px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
}

.settings-fieldset legend {
    padding: 0 6px;
    color: #14213d;
    font-size: 14px;
    font-weight: 900;
}

.printer-profile-list {
    display: grid;
    gap: 12px;
    margin-top: 6px;
}

.printer-profile-list h3 {
    margin: 0;
    color: #14213d;
    font-size: 15px;
}

.printer-profile-list p {
    margin: 0;
    font-size: 13px;
}

.printer-profile-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.45fr) minmax(140px, 0.45fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #f8fafc;
}

.admin-list {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.admin-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #e8edf4;
    border-radius: 8px;
    background: #f8fafc;
}

.inline-action {
    display: flex;
    justify-content: flex-end;
}

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

.form-grid.one-column {
    grid-template-columns: 1fr;
}

.form-grid label {
    display: grid;
    gap: 8px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.form-grid .media-field-align-start {
    align-content: start;
}

.form-grid .checkbox-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-grid .checkbox-field input {
    min-height: auto;
    width: auto;
}

.form-grid .iserv-unlink-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 4px;
}

.form-grid .iserv-unlink-field small {
    grid-column: 2;
}

.form-grid .iserv-link-status small,
.form-grid .iserv-unlink-field small {
    color: #64748b;
}

.input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.lookup-message {
    min-height: 18px;
    color: #2563eb;
}

.lookup-message:empty {
    display: none;
}

.media-cover-field {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.media-cover-field .checkbox-field {
    grid-column: 2;
}

.license-package-image-field {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.license-package-image-field .checkbox-field {
    margin-top: 8px;
}

.license-package-image-preview {
    display: inline-flex;
    width: 168px;
    height: 104px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #526176;
    font-size: 12px;
    font-weight: 800;
}

.license-package-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cover-preview,
.cover-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #526176;
    font-size: 12px;
    font-weight: 800;
}

.cover-preview {
    width: 96px;
    height: 128px;
}

.cover-preview img,
.cover-thumb {
    object-fit: cover;
}

.cover-preview img {
    width: 100%;
    height: 100%;
}

.logo-preview img {
    object-fit: contain;
}

.cover-thumb {
    width: 44px;
    height: 58px;
}

.cover-thumb-empty {
    text-decoration: none;
}

.form-grid small {
    color: #b91c1c;
}

.inline-form {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(180px, 1fr);
    gap: 8px;
    align-items: center;
}

.inline-form input {
    min-width: 0;
}

.span-2 {
    grid-column: span 2;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.form-action-danger {
    margin-right: auto;
}

.form-actions.is-hidden {
    display: none !important;
}

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 18px;
    margin-top: 18px;
}

.media-detail-grid {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.media-copies-panel {
    overflow: visible;
}

.copy-table {
    table-layout: fixed;
}

.copy-table th:nth-child(2) {
    width: 150px;
}

.copy-table th:nth-child(4) {
    width: 360px;
}

.copy-meta-cell strong,
.copy-meta-cell span {
    display: block;
}

.copy-meta-cell strong {
    color: #14213d;
    font-size: 14px;
    line-height: 1.3;
}

.copy-meta-cell span {
    margin-top: 3px;
    line-height: 1.3;
}

.copy-state {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    margin-right: 10px;
    min-width: 170px;
}

.copy-state .badge {
    white-space: nowrap;
}

.copy-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.copy-actions form {
    margin: 0;
}

.icon-button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    background: #ffffff;
    color: #2563eb;
    cursor: pointer;
}

.icon-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.icon-button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.icon-button-danger {
    color: #dc2626;
}

.icon-button-danger:hover {
    border-color: #fecaca;
    background: #fef2f2;
}

.icon-button-success {
    color: #15803d;
}

.icon-button-success:hover {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.student-lock-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.invoice-document {
    max-width: 210mm;
    margin: 0 auto;
    padding: 22mm 20mm 24mm;
    color: #111827;
}

.invoice-document__head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #d9e1ec;
    padding-bottom: 18px;
}

.invoice-document__head strong,
.invoice-document__head span,
.invoice-address strong,
.invoice-address span {
    display: block;
}

.invoice-document__head > div:last-child {
    text-align: right;
}

.invoice-address {
    margin: 28px 0;
}

.invoice-document h2 {
    padding-left: 0;
}

.invoice-document table {
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
}

.invoice-document th,
.invoice-document td {
    border-bottom: 1px solid #e5e7eb;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.invoice-document tfoot th {
    border-top: 2px solid #111827;
    font-size: 15px;
}

.invoice-document footer span,
.invoice-document footer strong {
    display: block;
}

.invoice-document footer strong {
    margin-top: 4px;
}

.provider-invoice-document__head span {
    color: #64748b;
}

.provider-product-print {
    color: #111827;
}

.provider-product-print__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.provider-product-print__grid div {
    display: grid;
    gap: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    background: #f8fafc;
}

.provider-product-print__grid span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.provider-product-print__grid strong {
    color: #111827;
    font-size: 15px;
}

.provider-product-stock-panel {
    margin-top: 28px;
}

.provider-invoice-address > span:first-child {
    margin-bottom: 6px;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
}

.provider-invoice-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.provider-invoice-meta div {
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 12px;
}

.provider-invoice-meta span,
.provider-invoice-items td span {
    display: block;
    color: #64748b;
    font-size: 12px;
}

.provider-invoice-meta strong {
    display: block;
    margin-top: 4px;
}

.provider-invoice-items th:first-child,
.provider-invoice-items td:first-child {
    width: 42px;
}

.provider-invoice-items th:nth-last-child(-n + 3),
.provider-invoice-items td:nth-last-child(-n + 3),
.provider-invoice-items tfoot th:last-child {
    text-align: right;
}

.provider-invoice-items tfoot tr:last-child th {
    font-size: 17px;
}

.provider-invoice-notes {
    margin: 22px 0;
    border-left: 3px solid #94a3b8;
    padding-left: 14px;
}

.provider-invoice-payment {
    margin: 26px 0;
    border-top: 1px solid #d9e1ec;
    border-bottom: 1px solid #d9e1ec;
    padding: 16px 0;
}

.provider-invoice-payment h2 {
    margin: 0 0 10px;
    font-size: 16px;
}

.provider-invoice-payment p {
    margin: 8px 0 0;
}

.provider-invoice-payment span {
    display: block;
}

.dunning-resolution-panel {
    margin-top: 34px;
}

.dunning-resolution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 22px 22px;
}

.dunning-resolution-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding: 16px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
}

.dunning-resolution-card .button {
    margin-top: auto;
}

.dunning-resolution-card--primary {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.dunning-resolution-card strong,
.dunning-resolution-card span {
    display: block;
}

.dunning-resolution-card strong {
    color: #14213d;
    font-size: 15px;
}

.dunning-resolution-card span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.dunning-resolution-card label {
    display: grid;
    gap: 8px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.dunning-resolution-card textarea {
    min-height: 112px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
    color: #14213d;
    font: inherit;
    resize: vertical;
}

.dunning-resolution-card textarea:focus {
    border-color: #2563eb;
    outline: 3px solid rgb(37 99 235 / 14%);
}

.dunning-workspace .stats-grid small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.stats-grid article.dunning-overdue-summary {
    display: grid;
    gap: 14px;
}

.dunning-summary-values {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr;
    gap: 6px 10px;
    align-items: baseline;
}

.dunning-summary-values strong {
    margin-top: 0;
}

.dunning-live-search {
    display: grid;
    gap: 6px;
}

.dunning-live-search span {
    font-size: 12px;
}

.dunning-live-search input {
    min-height: 42px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
    font-weight: 800;
}

.dunning-live-search input:focus {
    border-color: #2563eb;
    outline: 3px solid rgb(37 99 235 / 14%);
}

.dunning-step {
    display: grid;
    gap: 18px;
}

.dunning-step__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.dunning-step__head span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dunning-step__head h2 {
    margin: 4px 0 4px;
}

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

.dunning-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.dunning-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    background: #fff;
    display: grid;
    gap: 14px;
}

.dunning-card strong,
.dunning-card span,
.dunning-card li {
    display: block;
}

.dunning-card span,
.dunning-card li {
    color: var(--muted);
}

.dunning-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.dunning-card dt {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.dunning-card dd {
    margin: 2px 0 0;
    font-weight: 800;
}

.dunning-card ul {
    margin: 0;
    padding-left: 18px;
}

.dunning-card--invoice {
    border-color: #fecaca;
    background: #fffafa;
}

.dunning-overdue-table .clickable-row {
    cursor: pointer;
}

.dunning-overdue-table .clickable-row:hover {
    background: #f8fafc;
}

.dunning-overdue-table .amount-cell {
    text-align: right;
    white-space: nowrap;
    font-weight: 900;
}

.dunning-overdue-table tfoot th {
    border-top: 2px solid var(--border);
    background: #f8fafc;
    color: #0f172a;
    font-weight: 900;
}

.dunning-archive-panel {
    margin-top: 18px;
}

.dunning-archive-panel .filterbar {
    margin-left: 14px;
}

.dunning-archive-panel .dunning-step__head p {
    margin-left: 14px;
}

.dunning-modal__dialog {
    width: min(1160px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100vh - 54px);
    overflow: auto;
    justify-items: stretch;
}

.dunning-modal__dialog > p {
    margin-top: -8px;
    color: var(--muted);
}

.dunning-modal-header {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-right: 48px;
}

.dunning-modal-header h2 {
    margin: 0;
}

.dunning-modal-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.dunning-modal-table {
    table-layout: fixed;
}

.dunning-modal-table th:nth-child(1),
.dunning-modal-table td:nth-child(1) {
    width: 34%;
}

.dunning-modal-table th:nth-child(2),
.dunning-modal-table td:nth-child(2) {
    width: 13%;
}

.dunning-modal-table th:nth-child(3),
.dunning-modal-table td:nth-child(3),
.dunning-modal-table th:nth-child(4),
.dunning-modal-table td:nth-child(4),
.dunning-modal-table th:nth-child(5),
.dunning-modal-table td:nth-child(5),
.dunning-modal-table th:nth-child(6),
.dunning-modal-table td:nth-child(6) {
    width: 9%;
}

.dunning-modal-table th:nth-child(7),
.dunning-modal-table td:nth-child(7) {
    width: 17%;
}

.dunning-modal-table tfoot th {
    border-top: 2px solid var(--border);
    font-weight: 900;
}

.dunning-modal-table th:nth-child(5),
.dunning-modal-table td:nth-child(5),
.dunning-modal-table th:nth-child(6),
.dunning-modal-table td:nth-child(6),
.dunning-modal-table tfoot th:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.dunning-modal-total {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-weight: 800;
}

.dunning-modal-total strong {
    color: #0f172a;
    font-size: 18px;
}

.dunning-modal .table-actions .button {
    white-space: nowrap;
}

.dunning-media-cell {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 2px;
    align-items: center;
}

.dunning-media-cell strong {
    min-width: 0;
}

.dunning-cover-thumb {
    width: 38px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: #f8fafc;
}

.badge-reminder-level-1 {
    background: #fef3c7;
    color: #92400e;
}

.badge-reminder-level-2 {
    background: #ffedd5;
    color: #9a3412;
}

.badge-reminder-level-3 {
    background: #fee2e2;
    color: #991b1b;
}

.dunning-cover-thumb--empty {
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 800;
}

.dunning-icon-actions {
    justify-content: flex-end;
    gap: 6px;
}

.dunning-icon-actions .icon-button {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-weight: 800;
}

.student-lock-notice div {
    display: grid;
    gap: 4px;
}

.student-lock-notice form {
    margin: 0;
}

.scan-panel {
    display: grid;
    gap: 18px;
    max-width: 760px;
    padding: 28px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
}

.scan-panel label {
    display: grid;
    gap: 8px;
    color: #526176;
    font-size: 13px;
    font-weight: 900;
}

.scan-panel input {
    min-height: 58px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 0 14px;
    color: #14213d;
    font: inherit;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.scan-panel input:focus {
    border-color: #2563eb;
    outline: 3px solid rgb(37 99 235 / 14%);
}

.scan-panel small {
    color: #b91c1c;
}

.checkout-scan-panel {
    margin-bottom: 18px;
}

.media-intake-page .page-head p {
    max-width: 720px;
}

.media-intake-start-panel {
    display: grid;
    gap: 20px;
    padding: 24px;
}

.media-intake-start-panel h2,
.media-intake-start-panel p {
    margin: 0;
}

.media-intake-start-panel h2 {
    color: #14213d;
    font-size: 24px;
}

.media-intake-start-panel p {
    margin-top: 6px;
    color: #526176;
    font-size: 14px;
    font-weight: 700;
}

.media-intake-title-preview,
.media-intake-active-book {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #f8fbff;
    padding: 12px;
}

.media-intake-title-preview[hidden] {
    display: none;
}

.media-intake-title-preview-cover,
.media-intake-active-book > span {
    display: grid;
    width: 82px;
    aspect-ratio: 3 / 4;
    place-items: center;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.media-intake-title-preview-cover img,
.media-intake-active-book img {
    width: 82px;
    aspect-ratio: 3 / 4;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
    object-fit: cover;
    background: #ffffff;
}

.media-intake-title-preview strong,
.media-intake-active-book strong {
    display: block;
    color: #14213d;
    font-size: 22px;
    line-height: 1.15;
}

.media-intake-title-preview small,
.media-intake-active-book small,
.media-intake-active-book div > span {
    display: block;
    margin-top: 4px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.media-intake-active-book {
    grid-template-columns: 118px minmax(0, 1fr);
    border-color: #bfdbfe;
    background: #eff6ff;
    padding: 16px;
}

.media-intake-active-book img,
.media-intake-active-book > span {
    width: 118px;
}

.media-intake-active-book strong {
    font-size: 28px;
}

.media-intake-active-book div > span {
    color: #2563eb;
    font-size: 12px;
    text-transform: uppercase;
}

.form-grid .media-intake-check-option {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    align-self: end;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 6px;
    color: #14213d;
    font-size: 13px;
    font-weight: 900;
}

.form-grid .media-intake-check-option input[type="checkbox"] {
    min-height: 0;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    accent-color: #2563eb;
}

.media-intake-workspace {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.media-intake-context {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.media-intake-context h2 {
    padding: 0;
    color: #14213d;
    font-size: 22px;
    line-height: 1.2;
}

.media-intake-context dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.media-intake-context dl div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #eef2f7;
    padding-bottom: 8px;
}

.media-intake-context dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.media-intake-context dd {
    margin: 0;
    color: #14213d;
    font-size: 13px;
    font-weight: 900;
    text-align: right;
}

.media-intake-context form {
    margin: 0;
}

.media-intake-scan-card {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.media-intake-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    padding: 14px;
}

.media-intake-step.is-condition {
    border-color: #fed7aa;
    background: #fff7ed;
}

.media-intake-step > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 22px;
    font-weight: 950;
}

.media-intake-step.is-condition > span {
    background: #f97316;
}

.media-intake-step strong,
.media-intake-step p {
    display: block;
    margin: 0;
}

.media-intake-step strong {
    color: #14213d;
    font-size: 20px;
}

.media-intake-step p {
    margin-top: 3px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.media-intake-scan-form {
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
}

.media-intake-condition-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.media-intake-condition-codes span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #f8fafc;
    padding: 7px 9px;
    color: #526176;
    font-size: 12px;
    font-weight: 900;
}

.media-intake-recent {
    margin-top: 18px;
}

.media-intake-recent h2 {
    margin: 0 0 12px;
    padding: 20px 22px 0;
}

.media-intake-recent table {
    margin-top: 0;
}

@media (max-width: 900px) {
    .media-intake-workspace {
        grid-template-columns: 1fr;
    }

    .media-intake-context dl div {
        display: grid;
        gap: 3px;
    }

    .media-intake-context dd {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .media-intake-title-preview,
    .media-intake-active-book {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .media-intake-title-preview-cover,
    .media-intake-title-preview-cover img,
    .media-intake-active-book img,
    .media-intake-active-book > span {
        width: 72px;
    }

    .media-intake-active-book strong {
        font-size: 20px;
    }
}

.checkout-student-box {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

.checkout-student-box span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.checkout-student-box strong {
    color: #14213d;
    font-size: 22px;
    line-height: 1.15;
}

.checkout-student-box small {
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.checkin-condition-box {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.checkout-recent-panel {
    margin-top: 18px;
}

.checkout-recent-panel h2,
.checkout-existing-panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: #14213d;
    font-size: 20px;
}

.checkout-recent-panel h2 span,
.checkout-existing-panel h2 span {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 900;
}

.checkout-existing-panel {
    margin-top: 18px;
    border-color: #d9e1ec;
    background: #fbfdff;
}

.checkout-existing-panel h2 span {
    background: #f1f5f9;
    color: #475569;
}

.checkin-switch-panel {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-left: 26px;
    border-color: #f59e0b;
    background: #fffbeb;
}

.checkin-switch-panel h2 {
    margin: 0;
    color: #92400e;
    font-size: 20px;
}

.checkin-switch-panel p {
    margin: 0;
    color: #78350f;
    font-size: 14px;
    line-height: 1.5;
}

.checkin-switch-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: center;
}

.checkin-switch-grid > div:first-child {
    display: grid;
    gap: 4px;
}

.checkin-switch-grid span,
.checkin-switch-grid small {
    color: #78350f;
    font-size: 13px;
    font-weight: 800;
}

.checkin-switch-grid strong {
    color: #14213d;
    font-size: 17px;
}

.checkin-foreign-returned-panel {
    border-color: #14b8a6;
    background: #f0fdfa;
}

.checkin-foreign-returned-panel h2 {
    color: #0f766e;
}

.checkin-foreign-returned-panel p,
.checkin-foreign-returned-panel .checkin-switch-grid span,
.checkin-foreign-returned-panel .checkin-switch-grid small {
    color: #115e59;
}

.receipt-page {
    display: grid;
    justify-content: center;
    gap: 18px;
    padding: 28px;
}

.receipt {
    width: 80mm;
    padding: 5mm;
    background: #ffffff;
    color: #111827;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.25;
    box-shadow: 0 8px 20px rgb(20 33 61 / 12%);
}

.receipt header,
.receipt footer,
.receipt-line {
    display: grid;
    gap: 2mm;
}

.receipt header {
    padding-bottom: 4mm;
    border-bottom: 1px dashed #111827;
    text-align: center;
}

.receipt header strong {
    font-size: 14px;
    text-transform: uppercase;
}

.receipt-summary {
    display: grid;
    gap: 1mm;
    padding: 3mm 0;
    border-bottom: 1px dashed #111827;
    text-align: center;
}

.receipt-summary span,
.receipt-summary strong {
    font-size: 12px;
}

.receipt-groups {
    display: grid;
    gap: 4mm;
    padding: 4mm 0;
}

.receipt-group {
    display: grid;
    gap: 2mm;
    break-inside: avoid;
}

.receipt-group h2 {
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
}

.receipt-group > small {
    display: block;
    padding-bottom: 1mm;
    border-bottom: 1px dotted #111827;
}

.receipt-lines {
    display: grid;
    gap: 2.5mm;
}

.receipt-line {
    break-inside: avoid;
    padding-bottom: 2mm;
    border-bottom: 1px dotted #d1d5db;
}

.receipt-line-foreign {
    padding: 2mm;
    border: 1px dashed #0f766e;
    background: #f0fdfa;
}

.receipt-line code {
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
}

.receipt-line span,
.receipt-line small {
    display: block;
    overflow-wrap: anywhere;
}

.receipt footer {
    padding-top: 4mm;
    border-top: 1px dashed #111827;
    text-align: center;
}

.receipt-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.condition-code-page {
    align-items: center;
}

.condition-code-sheet {
    display: grid;
    gap: 12mm;
    width: 210mm;
    min-height: 297mm;
    padding: 16mm;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 12%);
}

.condition-code-sheet > header {
    display: grid;
    gap: 4mm;
    text-align: center;
}

.condition-code-sheet p,
.condition-code-sheet h2,
.condition-code-sheet span {
    margin: 0;
}

.condition-code-sheet p {
    color: #526176;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.condition-code-sheet h2 {
    color: #14213d;
    font-size: 30px;
}

.condition-code-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10mm;
}

.condition-code-card {
    display: grid;
    gap: 5mm;
    min-height: 88mm;
    padding: 8mm;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    break-inside: avoid;
}

.condition-code-card strong,
.condition-code-card span,
.condition-code-card code {
    display: block;
}

.condition-code-card strong {
    color: #14213d;
    font-size: 22px;
}

.condition-code-card span {
    margin-top: 2mm;
    color: #526176;
    font-size: 13px;
    line-height: 1.4;
}

.condition-code-card .barcode {
    min-height: 22mm;
    max-height: 24mm;
}

.condition-code-card code {
    color: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.reading-card-pages {
    display: grid;
    gap: 14mm;
    justify-content: center;
}

.reading-card-sheet {
    display: grid;
    grid-template-columns: repeat(2, 90mm);
    grid-auto-rows: 55mm;
    gap: 8mm;
    width: 210mm;
    min-height: 297mm;
    padding: 8mm 10mm;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 12%);
}

.reading-card {
    display: grid;
    grid-template-rows: 16mm 15mm 1fr;
    width: 90mm;
    height: 55mm;
    overflow: hidden;
    border: 1px solid #111827;
    background: #ffffff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    break-inside: avoid;
}

.reading-card--template {
    position: relative;
    display: block;
}

.reading-card-template-element {
    position: absolute;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    z-index: 1;
}

.reading-card-template-element > span {
    display: block;
    width: 100%;
    line-height: 1;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.reading-card-template-element--logo,
.reading-card-template-element--qr {
    overflow: hidden;
}

.reading-card-template-element--logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.reading-card-template-element--logo span {
    color: #111827;
    font-size: 7pt;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.reading-card-template-barcode {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: minmax(0, 1fr) 3.8mm;
    align-items: stretch;
    text-align: center;
    overflow: visible;
}

.reading-card-template-barcode .barcode {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.reading-card-template-barcode code {
    display: block;
    font-size: 8pt;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    padding-bottom: 0.2em;
}

.reading-card-template-qr {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: end center;
    border: 3mm solid currentColor;
    background:
        linear-gradient(90deg, currentColor 12%, transparent 12% 28%, currentColor 28% 40%, transparent 40% 58%, currentColor 58% 74%, transparent 74%),
        linear-gradient(currentColor 14%, transparent 14% 30%, currentColor 30% 44%, transparent 44% 64%, currentColor 64% 76%, transparent 76%);
    background-color: #ffffff;
    font-size: 6pt;
    font-weight: 900;
}

.reading-card-head {
    display: grid;
    align-content: center;
    text-align: center;
}

.reading-card-head strong {
    color: #000000;
    font-size: 20pt;
    line-height: 1.05;
}

.reading-card-head strong.reading-card-name-medium {
    font-size: 18pt;
}

.reading-card-head strong.reading-card-name-long {
    font-size: 16pt;
}

.reading-card-head span {
    margin-top: 2mm;
    color: #000000;
    font-size: 12pt;
    line-height: 1;
}

.reading-card-band {
    display: grid;
    grid-template-columns: 25mm 1fr;
    align-items: center;
    background: #dddddd;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.reading-card-logo {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 2mm 2mm 2mm 7mm;
}

.reading-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.reading-card-logo span {
    color: #111827;
    font-size: 7pt;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.reading-card-band h2 {
    margin: 0;
    color: #000000;
    font-size: 22pt;
    line-height: 1;
    text-align: center;
}

.reading-card-barcode {
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 2mm 12mm 3mm;
    text-align: center;
}

.reading-card-barcode .barcode {
    width: 100%;
    height: 16mm;
    min-height: 16mm;
    max-height: 16mm;
}

.reading-card-barcode code {
    display: block;
    color: #000000;
    font-size: 14pt;
    font-weight: 900;
    line-height: 1;
}

.label-print-page {
    max-width: none;
}

.print-controls {
    margin-bottom: 18px;
}

.sheet-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    margin-bottom: 18px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.sheet-preview strong {
    color: #14213d;
    font-size: 20px;
}

.setup-print-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8edf4;
}

.setup-print-summary span {
    display: block;
    color: #526176;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.setup-print-summary strong {
    display: block;
    margin-top: 4px;
    color: #14213d;
    font-size: 32px;
    line-height: 1;
}

.label-pages {
    display: grid;
    gap: 24px;
    justify-content: center;
}

.label-sheet {
    display: grid;
    grid-template-columns: repeat(var(--sheet-columns), var(--label-width));
    grid-auto-rows: var(--label-height);
    gap: var(--row-gap) var(--column-gap);
    width: 210mm;
    min-height: 297mm;
    padding: var(--page-margin-top) var(--page-margin-right) var(--page-margin-bottom) var(--page-margin-left);
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 12%);
    overflow: hidden;
    transform: translate(var(--print-offset-x), var(--print-offset-y));
}

.print-label {
    display: grid;
    grid-template-rows: auto minmax(7mm, 1fr) auto;
    gap: 1.2mm;
    width: var(--label-width);
    height: var(--label-height);
    padding: var(--label-padding);
    border: 1px dashed #94a3b8;
    border-radius: 4px;
    background: #ffffff;
    break-inside: avoid;
    overflow: hidden;
}

.print-label-qr {
    grid-template-rows: auto minmax(11mm, 1fr) 6mm;
    gap: 0.5mm;
}

.print-label-both {
    grid-template-rows: auto minmax(8mm, 1fr) 6mm;
    gap: 0.5mm;
}

.print-label-empty {
    opacity: 0.35;
}

.print-label--template {
    position: relative;
    display: block;
    padding: 0;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.print-label-template-element {
    position: absolute;
    display: grid;
    place-items: center;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
}

.print-label-template-element > span {
    display: block;
    width: 100%;
    line-height: 1;
    overflow: hidden;
    text-overflow: clip;
}

.print-label-template-element--logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.print-label-template-element--logo span {
    color: #111827;
    font-size: 6pt;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.print-label-template-barcode {
    display: grid;
    width: 100%;
    height: 100%;
    align-items: stretch;
    overflow: visible;
    text-align: center;
}

.print-label-template-barcode .barcode {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
}

.print-label-template-barcode code {
    display: block;
    font-weight: 900;
    line-height: 1.25;
    overflow: hidden;
    padding-bottom: 0.2em;
}

.print-label-template-qr {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

.print-label-template-qr .qr-code {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.print-label strong,
.print-label span,
.label-code code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.print-label strong {
    color: #14213d;
    font-size: 11px;
    line-height: 1.2;
}

.print-label span {
    color: #526176;
    font-size: 9px;
    font-weight: 700;
}

.print-label--template span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-overflow: clip;
}

.barcode {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 7mm;
    max-height: 14mm;
    fill: currentColor;
    shape-rendering: crispEdges;
}

.label-code-visual {
    display: grid;
    min-height: 7mm;
    align-items: center;
    overflow: hidden;
}

.label-code-visual-qr {
    justify-items: center;
    min-height: 11mm;
}

.label-code-visual-both {
    grid-template-columns: minmax(9mm, 14mm) minmax(0, 1fr);
    gap: 1.5mm;
    align-items: center;
}

.qr-code {
    display: block;
    width: min(100%, 15mm);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    height: auto;
}

.print-label-qr .qr-code {
    width: min(100%, 18mm);
}

.label-code-visual-both .qr-code {
    width: 100%;
}

.label-code-visual-both .barcode {
    min-height: 7mm;
    max-height: 10mm;
}

.qr-code-missing {
    display: grid;
    place-items: center;
    border: 1px dashed #94a3b8;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
}

.label-code {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2mm;
    min-height: 6mm;
    overflow: hidden;
    text-align: center;
}

.label-code code {
    color: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: clamp(7px, 2.5mm, 11px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0.2mm;
}

.label-code span {
    font-size: 8px;
    line-height: 1;
}

.print-hidden {
    display: flex;
}

.print-only {
    display: none;
}

.login-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 48px;
    width: min(1060px, 100%);
    margin: 0 auto;
    align-items: start;
}

.student-login-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

.student-login-card > div:first-child {
    display: grid;
    justify-items: center;
}

.student-login-panel {
    display: grid;
    gap: 12px;
    width: min(420px, 100%);
}

.student-login-panel form {
    width: 100%;
}

.student-login-panel form + form {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.student-login-panel .button-secondary {
    width: 100%;
}

.iserv-login-button {
    gap: 10px;
}

.iserv-login-button img {
    width: 62px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
}

.login-card form {
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgb(20 33 61 / 8%);
}

.login-card label {
    display: grid;
    gap: 8px;
    color: #526176;
    font-size: 13px;
    font-weight: 800;
}

.login-card input {
    min-height: 44px;
    width: 100%;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    padding: 0 12px;
    color: #14213d;
    font: inherit;
}

.login-card input:focus {
    border-color: #2563eb;
    outline: 3px solid rgb(37 99 235 / 14%);
}

.login-card .checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-card .checkbox input {
    min-height: auto;
    width: auto;
}

.login-card button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.form-error {
    margin: 0;
    color: #b91c1c;
    font-size: 14px;
}

.code-sample {
    overflow-x: auto;
    margin: 10px 0 0;
    padding: 14px;
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.6;
}

.log-json {
    overflow-x: auto;
    max-width: 460px;
    margin: 8px 0 0;
    padding: 10px;
    border-radius: 8px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.5;
}

.log-details-dialog {
    width: min(820px, 94vw);
    max-width: min(820px, 94vw);
    max-height: 88vh;
    align-items: stretch;
    justify-items: stretch;
    gap: 16px;
    padding: 22px;
}

.log-details-dialog__head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 36px;
}

.log-details-dialog__head div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.log-details-dialog__head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.log-details-dialog__head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.log-details-dialog__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.log-details-dialog__meta div {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}

.log-details-dialog__meta dt,
.log-details-dialog__meta dd {
    margin: 0;
}

.log-details-dialog__meta dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.log-details-dialog__meta dd {
    color: #0f172a;
    font-weight: 800;
}

.log-details-dialog .log-json {
    max-width: none;
    max-height: 54vh;
    margin: 0;
}

.import-preview {
    margin-top: 22px;
}

.import-preview > .form-actions {
    padding: 0 18px 18px;
}

.import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px 0;
}

.import-row-create {
    background: #f0fdf4;
}

.import-row-update {
    background: #fffbeb;
}

.import-row-unchanged {
    background: #f8fafc;
}

.import-row-skip {
    background: #f8fafc;
}

.import-row-error {
    background: #fef2f2;
}

.import-change-list {
    display: grid;
    gap: 5px;
    min-width: 260px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.import-change-list li {
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(80px, 1fr) auto minmax(80px, 1fr);
    gap: 6px;
    align-items: center;
    font-size: 12px;
}

.import-change-list li span {
    overflow-wrap: anywhere;
}

.import-missing .notice {
    margin: 14px 18px;
}

.muted {
    color: #64748b;
}

@media (max-width: 720px) {
    .topbar {
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
        padding: 14px;
    }

    .topbar__secondary {
        grid-column: 1;
    }

    .topbar__user {
        justify-content: space-between;
    }

    .start-page,
    .dashboard {
        padding: 28px;
    }

    p {
        font-size: 16px;
    }

    .login-card {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .page-head,
    .dashboard-today-head,
    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-action-danger {
        margin-right: 0;
    }

    .filterbar,
    .form-grid,
    .split-grid,
    .quick-actions,
    .student-searchbar,
    .teacher-class-report-actions,
    .student-table-controls,
    .dashboard-today-grid,
    .template-designer__toolbar,
    .template-designer__workspace,
    .dashboard-insights,
    .current-loan-card,
    .current-loan-card dl,
    .gui-frame-grid,
    .gui-toolbar-alt-grid,
    .dunning-resolution-grid,
    .value-metrics,
    .condition-chart-wrap,
    .printer-profile-row {
        grid-template-columns: 1fr;
    }

    .value-steps-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .gui-alt-toolbar-pro {
        grid-template-columns: 1fr;
    }

    .gui-pro-filters,
    .gui-pro-actions {
        flex-wrap: wrap;
    }

    .gui-pro-template {
        border-left: 0;
        border-top: 1px solid #d9e1ec;
        padding-top: 10px;
        padding-left: 0;
    }

    .template-designer__tools {
        justify-content: flex-start;
    }

    .template-designer__stage-wrap {
        min-height: 360px;
        padding: 18px;
    }

    .template-designer__stage {
        --stage-scale: 1.2;
    }

    .dashboard-condition-panel {
        grid-column: span 1;
    }

    .condition-chart {
        width: min(220px, 100%);
        margin: 0 auto;
    }

    .pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination__controls {
        justify-content: space-between;
    }

    .pagination__pages {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .span-2 {
        grid-column: span 1;
    }

    .panel {
        overflow-x: auto;
    }

    .student-action-cluster,
    .student-action-group,
    .student-modern-actions {
        justify-content: flex-start;
    }

    .student-action-group > span {
        text-align: left;
    }

    .student-workbench {
        overflow-x: auto;
    }

    .gui-frame-wide {
        grid-column: span 1;
    }

    .gui-table-row {
        grid-template-columns: minmax(150px, 1fr) 64px 86px 110px;
    }

    .gui-combo-row {
        grid-template-columns: 1fr;
    }

    .gui-combo-variant-grid,
    .gui-combo-row-side,
    .gui-command-hero,
    .gui-command-layout,
    .gui-card-mode,
    .gui-alt-split,
    .gui-kanban,
    .gui-card-explorer,
    .gui-cockpit-body,
    .student-action-cards {
        grid-template-columns: 1fr;
    }

    .gui-toolbar-demo span {
        flex-basis: 100%;
        margin-left: 0;
    }

    .gui-smart-bulk-bar {
        justify-content: flex-start;
    }

    .gui-smart-bulk-bar span {
        flex-basis: 100%;
    }

    .gui-demo-forward {
        align-items: stretch;
        flex-direction: column;
    }

    .gui-alt-toolbar-cards {
        grid-template-columns: 1fr;
    }

    .student-action-card {
        grid-template-columns: 1fr;
    }

    .student-card-actions {
        justify-content: flex-start;
    }
}

@media print {
    :root,
    body {
        background: #ffffff;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .topbar,
    .screen-only,
    .print-hidden {
        display: none;
    }

    .print-only {
        display: block;
    }

    .app-shell,
    .app-shell--with-topbar,
    .dashboard {
        min-height: 0;
        padding: 0;
    }

    .student-loan-overview {
        color: #111827;
        font-size: 10pt;
    }

    .student-loan-overview .page-head {
        margin-bottom: 10mm;
        border-bottom: 1px solid #cbd5e1;
        padding-bottom: 4mm;
    }

    .student-loan-overview .page-head h1 {
        font-size: 22pt;
        line-height: 1.1;
    }

    .student-loan-overview .page-head p {
        margin-top: 2mm;
    }

    .student-loan-overview .panel,
    .student-loan-overview .loan-value-summary div {
        box-shadow: none;
    }

    .student-loan-overview .panel {
        break-inside: avoid;
        page-break-inside: avoid;
        padding: 4mm;
    }

    .student-loan-overview .loan-value-summary {
        grid-template-columns: repeat(3, 1fr);
        gap: 3mm;
        margin-bottom: 5mm;
    }

    .student-loan-overview .loan-value-summary div {
        padding: 4mm;
    }

    .student-loan-overview .loan-value-summary strong {
        font-size: 16pt;
    }

    .student-loan-overview .current-loan-card {
        break-inside: avoid;
        page-break-inside: avoid;
        grid-template-columns: 1.2fr 1fr;
        padding: 4mm;
    }

    .student-loan-overview .current-loan-card dl {
        grid-template-columns: repeat(3, 1fr);
    }

    .student-loan-overview .student-reminder-history {
        break-inside: auto;
        page-break-inside: auto;
    }

    .student-loan-overview table {
        font-size: 9pt;
    }

    .student-loan-overview th,
    .student-loan-overview td {
        padding: 2.5mm;
    }

    .label-sheet {
        display: grid;
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        box-shadow: none;
        transform: translate(var(--print-offset-x), var(--print-offset-y));
        page-break-after: always;
    }

    .label-sheet:last-child {
        page-break-after: auto;
    }

    .print-label {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .print-label-empty {
        visibility: hidden;
    }

    .reading-card-pages {
        display: block;
        padding: 0;
    }

    .reading-card-sheet {
        display: grid;
        grid-template-columns: repeat(2, 90mm);
        grid-auto-rows: 55mm;
        gap: 8mm;
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        padding: 8mm 10mm;
        box-shadow: none;
        page-break-after: always;
    }

    .reading-card-sheet:last-child {
        page-break-after: auto;
    }

    .reading-card {
        box-shadow: none;
        page-break-inside: avoid;
    }

    .portal-access-grid {
        grid-template-columns: repeat(2, 90mm);
        gap: 8mm;
        padding: 8mm;
    }

    .portal-access-card {
        border-radius: 0;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .condition-code-page {
        padding: 0;
    }

    .report-page {
        font-size: 10pt;
    }

    .report-page h1 {
        font-size: 24pt;
    }

    .report-page .panel {
        border: 0;
        box-shadow: none;
    }

    .report-page table {
        font-size: 9pt;
    }

    .loan-report-page > .page-head,
    .loan-report-page .list-meta,
    .loan-report-page .loan-screen-list {
        display: none;
    }

    .loan-print-pages {
        display: block;
    }

    .loan-print-page {
        position: relative;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 210mm;
        height: 297mm;
        min-height: 0;
        padding: 10mm 12mm 10mm;
        overflow: hidden;
        break-after: page;
        page-break-after: always;
    }

    .loan-print-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .loan-print-page footer {
        margin-top: auto;
        padding-top: 4mm;
        color: #64748b;
        font-size: 9pt;
        text-align: center;
    }

    .loan-print-page table {
        font-size: 9pt;
        line-height: 1.18;
    }

    .loan-class-list {
        page: loan-class-list;
        counter-reset: page 1;
        break-after: page;
        page-break-after: always;
        box-sizing: border-box;
        min-height: 267mm;
        padding: 12mm 12mm 10mm;
        border-top: 0;
    }

    .loan-class-list:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .loan-class-list + .loan-class-list {
        margin-top: 0;
        border-top: 0;
    }

    .loan-class-list-header {
        align-items: flex-start;
        margin-bottom: 3mm;
        border: 1px solid #bfdbfe;
        border-radius: 3mm;
        background: #eaf3ff;
        box-shadow: none;
        padding: 4mm 5mm;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .loan-class-list-header span {
        color: #356295;
    }

    .loan-class-list-header h2 {
        color: #14213d;
        font-size: 17pt;
    }

    .loan-class-list-header dl {
        grid-template-columns: repeat(3, auto);
    }

    .loan-class-list-header dl div {
        border-color: #cfe0f5;
        background: #f8fbff;
        padding: 3px 5px;
        break-inside: avoid;
        page-break-inside: avoid;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .loan-class-list-header dt {
        color: #64748b;
        font-size: 8pt;
    }

    .loan-class-list-header dd {
        color: #14213d;
        font-size: 10pt;
    }

    .loan-class-list th,
    .loan-class-list td,
    .loan-print-page th,
    .loan-print-page td {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .loan-report-student-row td {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .loan-print-page th:nth-child(2),
    .loan-print-page td:nth-child(2) {
        width: 30mm;
        white-space: nowrap;
    }

    .loan-class-list th:nth-child(3),
    .loan-class-list td:nth-child(3),
    .loan-class-list th:nth-child(4),
    .loan-class-list td:nth-child(4),
    .loan-print-page th:nth-child(3),
    .loan-print-page td:nth-child(3),
    .loan-print-page th:nth-child(4),
    .loan-print-page td:nth-child(4) {
        width: 20mm;
        white-space: nowrap;
    }

    .loan-class-list th:nth-child(5),
    .loan-class-list td:nth-child(5),
    .loan-print-page th:nth-child(5),
    .loan-print-page td:nth-child(5) {
        width: 24mm;
        white-space: nowrap;
    }

    .loan-class-list th:nth-child(6),
    .loan-class-list td:nth-child(6) {
        display: none;
    }

    .loan-report-student-row,
    .loan-report-media-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .invoice-page {
        display: block;
        padding: 0;
    }

    .invoice-document {
        width: 210mm;
        max-width: none;
        min-height: 297mm;
        margin: 0;
        padding: 18mm 18mm 22mm;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        page-break-after: auto;
    }

    .reminder-print-page {
        min-height: 0;
        padding: 0;
    }

    .reminder-letter-stack {
        display: block;
    }

    .reminder-letter {
        min-height: 297mm;
        padding: 18mm;
        box-shadow: none;
        page-break-after: always;
    }

    .reminder-letter:last-child {
        page-break-after: auto;
    }

    .condition-code-sheet {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        box-shadow: none;
        page-break-after: auto;
    }

    .receipt-page {
        display: block;
        padding: 0;
    }

    .receipt {
        width: 80mm;
        margin: 0;
        padding: 4mm;
        box-shadow: none;
    }

    body.dunning-print-active .topbar,
    body.dunning-print-active .dunning-workspace > :not(.dunning-modal--printing) {
        display: none !important;
    }

    body.dunning-print-active .app-shell,
    body.dunning-print-active .app-shell--with-topbar,
    body.dunning-print-active .dunning-workspace {
        display: block;
        min-height: 0;
        padding: 0;
    }

    body.dunning-print-active .dunning-modal--printing {
        position: static;
        z-index: 9999;
        display: block;
        width: 210mm;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: #ffffff;
        page-break-after: auto;
        break-after: auto;
    }

    body.dunning-print-active .dunning-modal--printing .cover-modal__backdrop,
    body.dunning-print-active .dunning-modal--printing .cover-modal__close,
    body.dunning-print-active .dunning-modal--printing .dunning-modal-print-actions,
    body.dunning-print-active .dunning-modal--printing .dunning-icon-actions,
    body.dunning-print-active .dunning-modal--printing th:nth-child(7),
    body.dunning-print-active .dunning-modal--printing td:nth-child(7) {
        display: none !important;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal__dialog {
        position: static;
        display: block;
        width: 190mm;
        max-width: none;
        max-height: none;
        margin: 0 auto;
        padding: 10mm;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-header {
        display: block;
        margin-bottom: 8mm;
        padding-bottom: 4mm;
        border-bottom: 1px solid #d9e1ec;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-header h2 {
        font-size: 18pt;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table {
        width: 100%;
        font-size: 8.5pt;
        table-layout: fixed;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table th:nth-child(1),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table td:nth-child(1) {
        width: 31%;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table th:nth-child(2),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table td:nth-child(2) {
        width: 15%;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table th:nth-child(3),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table td:nth-child(3) {
        width: 11%;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table th:nth-child(4),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table td:nth-child(4) {
        width: 13%;
        text-align: center;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table th:nth-child(5),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table td:nth-child(5),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table th:nth-child(6),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table td:nth-child(6) {
        width: 15%;
        text-align: right;
        white-space: nowrap;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table th {
        font-size: 8pt;
        line-height: 1.15;
        white-space: nowrap;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table tfoot th:first-child {
        text-align: left;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-table tfoot th:nth-child(2),
    body.dunning-print-active .dunning-modal--printing .dunning-modal-table tfoot th:nth-child(3) {
        text-align: right;
        white-space: nowrap;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-cover-thumb {
        width: 10mm;
        height: 14mm;
    }

    body.dunning-print-active .dunning-modal--printing .dunning-modal-total {
        margin-top: 6mm;
    }

    @page {
        size: A4;
        margin: 0;
    }

}