@font-face {
    font-family: "InterRegular";
    src: url("../fonts/Inter-Regular.otf") format("opentype");
}

@font-face {
    font-family: "InterMedium";
    src: url("../fonts/Inter-Medium.otf") format("opentype");
}

@font-face {
    font-family: "InterSemiBold";
    src: url("../fonts/Inter-SemiBold.otf") format("opentype");
}

@font-face {
    font-family: "InterBold";
    src: url("../fonts/Inter-Bold.otf") format("opentype");
}

:root {
    --sk-blue: #0963ff;
    --sk-blue-dark: #06165f;
    --sk-blue-soft: #eaf2ff;
    --sk-line: #d9e5f4;
    --sk-text: #0b1a5c;
    --sk-muted: #465982;
    --sk-panel: #ffffff;
    --sk-danger: #b42318;
    --sk-success: #12b84f;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.sk-admin-login {
    overflow: hidden;
    color: var(--sk-text);
    background: #f7fbff;
    font-family: "InterRegular", Arial, sans-serif;
}

.sk-login-shell {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: minmax(0, 1fr) 48px;
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
    margin: 14px;
    overflow: hidden;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    background:
        radial-gradient(circle at 51% 52%, rgba(9, 99, 255, 0.045) 0 21%, transparent 22%),
        linear-gradient(90deg, #fbfdff 0 50%, #ffffff 50% 100%);
    box-shadow: 0 14px 38px rgba(19, 44, 92, 0.08);
}

.sk-login-brand,
.sk-login-panel {
    min-height: 0;
    min-width: 0;
}

.sk-login-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 54px 38px 54px;
    border-right: 1px solid rgba(217, 229, 244, 0.58);
}

.sk-brand-copy {
    flex: 0 0 auto;
}

.sk-brand-logo {
    display: flex;
    align-items: center;
    gap: 28px;
    color: var(--sk-blue-dark);
    font-family: "InterBold", Arial, sans-serif;
    font-size: 72px;
    line-height: 1;
    letter-spacing: 0;
}

.sk-brand-mark {
    flex: 0 0 auto;
    width: 112px;
    height: 112px;
}

.sk-brand-mark path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6;
}

.sk-brand-mark .sk-mark-cap {
    fill: #0b68ff;
    stroke: #0b68ff;
}

.sk-brand-mark .sk-mark-blue {
    fill: #126bff;
    stroke: #126bff;
}

.sk-brand-mark .sk-mark-orange {
    fill: #ff8a00;
    stroke: #ff8a00;
}

.sk-brand-mark .sk-mark-white {
    stroke: #ffffff;
    stroke-width: 5;
}

.sk-brand-tagline {
    display: flex;
    gap: 17px;
    align-items: flex-start;
    margin-top: 22px;
    margin-left: 24px;
}

.sk-tagline-marker {
    display: block;
    width: 5px;
    height: 32px;
    margin-top: 2px;
    border-radius: 99px;
    background: var(--sk-blue);
}

.sk-brand-title,
.sk-brand-subtitle {
    margin: 0;
}

.sk-brand-title {
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.25;
    color: #314b80;
}

.sk-brand-subtitle {
    margin-top: 10px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    color: #455b88;
}

.sk-school-scene {
    position: relative;
    min-height: 220px;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 8px 0 12px;
}

.sk-school-scene::after {
    content: "";
    position: absolute;
    right: -92px;
    bottom: -78px;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: rgba(9, 99, 255, 0.035);
}

.sk-school-illustration {
    position: relative;
    z-index: 1;
    width: min(74%, 540px);
    max-height: 310px;
    overflow: visible;
    color: #8ab7ff;
}

.sk-school-illustration path,
.sk-school-illustration circle {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-school-illustration .sk-cloud {
    fill: #eaf2ff;
    stroke: none;
    opacity: 0.76;
}

.sk-school-illustration .sk-hill {
    stroke: #c9dcff;
    stroke-width: 3;
}

.sk-school-illustration .sk-school-fill,
.sk-school-illustration .sk-tree,
.sk-school-illustration .sk-bush {
    fill: rgba(9, 99, 255, 0.08);
    stroke: #a9c8ff;
    stroke-width: 3;
}

.sk-school-illustration .sk-school-roof,
.sk-school-illustration .sk-step {
    stroke: #9ec0fb;
    stroke-width: 8;
}

.sk-school-illustration .sk-window,
.sk-school-illustration .sk-door {
    fill: rgba(255, 255, 255, 0.56);
    stroke: #a9c8ff;
    stroke-width: 3;
}

.sk-school-illustration .sk-window-line,
.sk-school-illustration .sk-tree-line,
.sk-school-illustration .sk-clock,
.sk-school-illustration .sk-flag {
    stroke: #a9c8ff;
    stroke-width: 3;
}

.sk-dot-grid {
    position: absolute;
    left: 0;
    top: 36px;
    width: 96px;
    height: 70px;
    opacity: 0.36;
    background-image: radial-gradient(circle, #8ab7ff 3px, transparent 3.5px);
    background-size: 22px 22px;
}

.sk-feature-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    width: min(100%, 690px);
    margin: 0 auto;
    padding: 18px 24px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 12px 28px rgba(30, 87, 160, 0.04);
}

.sk-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 0 22px;
    border-right: 1px solid var(--sk-line);
}

.sk-feature-item:first-child {
    padding-left: 0;
}

.sk-feature-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.sk-feature-icon,
.sk-lock-badge {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--sk-blue-soft);
}

.sk-feature-icon {
    width: 54px;
    height: 54px;
}

.sk-feature-icon svg,
.sk-lock-badge svg,
.sk-support-link svg,
.sk-submit-button svg,
.sk-icon-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-feature-icon svg {
    width: 28px;
    height: 28px;
    color: var(--sk-blue);
}

.sk-feature-item strong {
    display: block;
    margin-bottom: 6px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.1;
}

.sk-feature-item small {
    display: block;
    max-width: 145px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: #314b80;
}

.sk-login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 54px 34px 54px;
}

.sk-login-card {
    min-width: 0;
    width: min(100%, 580px);
    padding: 38px 52px 42px;
    border: 1px solid var(--sk-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(15, 42, 89, 0.08);
}

.sk-lock-badge {
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;
}

.sk-lock-badge svg {
    width: 35px;
    height: 35px;
    color: var(--sk-blue);
}

.sk-lock-badge-shield svg {
    width: 40px;
    height: 40px;
}

.sk-auth-view {
    display: none;
}

.sk-auth-view.is-active {
    display: block;
}

.sk-login-header {
    text-align: center;
    margin-bottom: 28px;
}

.sk-login-header h1 {
    margin: 0;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 34px;
    line-height: 1.12;
    color: var(--sk-blue-dark);
}

.sk-login-header p {
    margin: 10px 0 0;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    color: #40527e;
}

.sk-forgot-header {
    width: min(100%, 410px);
    margin-left: auto;
    margin-right: auto;
}

.sk-forgot-header p {
    line-height: 1.45;
}

.sk-form-error {
    margin: -8px 0 18px;
    padding: 11px 14px;
    border: 1px solid #f4b8b2;
    border-radius: 8px;
    background: #fff3f2;
    color: var(--sk-danger);
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.sk-form-success {
    border-color: #b9ebcc;
    background: #f0fff5;
    color: #087a32;
}

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

.sk-field label {
    display: block;
    margin-bottom: 11px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    color: var(--sk-blue-dark);
}

.sk-input-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0 15px;
    border: 1px solid var(--sk-line);
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.sk-input-wrap:focus-within {
    border-color: #7fb2ff;
    box-shadow: 0 0 0 4px rgba(9, 99, 255, 0.09);
}

.sk-input-wrap > img {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 14px;
    opacity: 0.72;
}

.sk-input-wrap input {
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #132b61;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-input-wrap input::placeholder {
    color: #5d6d92;
}

.sk-field-help {
    margin: 13px 0 0;
    color: #465982;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

.sk-password-meter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
}

.sk-password-meter span {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: #e8eef7;
}

.sk-password-meter strong {
    min-width: 66px;
    padding-left: 8px;
    color: #8693ad;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    line-height: 1;
    text-align: right;
}

.sk-password-meter[data-score="1"] span:nth-child(-n+1),
.sk-password-meter[data-score="2"] span:nth-child(-n+2) {
    background: #ffb020;
}

.sk-password-meter[data-score="3"] span:nth-child(-n+3) {
    background: #2f9cff;
}

.sk-password-meter[data-score="4"] span:nth-child(-n+4),
.sk-password-meter[data-score="5"] span:nth-child(-n+5) {
    background: var(--sk-success);
}

.sk-password-meter[data-score="4"] strong,
.sk-password-meter[data-score="5"] strong {
    color: var(--sk-success);
}

.sk-icon-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #40527e;
    background: transparent;
    cursor: pointer;
}

.sk-icon-button:hover,
.sk-icon-button:focus-visible {
    color: var(--sk-blue);
    background: var(--sk-blue-soft);
    outline: 0;
}

.sk-icon-button svg {
    width: 22px;
    height: 22px;
}

.sk-icon-button[aria-pressed="true"] .sk-eye-slash {
    display: none;
}

.sk-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 4px;
}

.sk-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #40527e;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    cursor: pointer;
}

.sk-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sk-blue);
}

.sk-link {
    flex: 0 0 auto;
    color: var(--sk-blue);
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    text-decoration: none;
}

.sk-link:hover {
    text-decoration: underline;
}

.sk-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 61px;
    margin-top: 4px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--sk-blue);
    box-shadow: 0 12px 26px rgba(9, 99, 255, 0.22);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
    cursor: pointer;
}

.sk-secondary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 61px;
    border: 0;
    border-radius: 8px;
    color: var(--sk-blue);
    background: #f1f5fb;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
    cursor: pointer;
}

.sk-secondary-button:hover,
.sk-secondary-button:focus-visible {
    color: #0759e6;
    background: #eaf2ff;
    outline: 0;
}

.sk-secondary-button svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-submit-button:hover,
.sk-submit-button:focus-visible {
    background: #0759e6;
    outline: 0;
}

.sk-submit-button:disabled,
.sk-secondary-button:disabled,
.sk-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.sk-submit-button svg {
    width: 27px;
    height: 27px;
}

.sk-submit-button.is-loading {
    cursor: progress;
    opacity: 0.78;
}

.sk-support-link {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 62px;
    margin-top: 30px;
    border-radius: 8px;
    color: #40527e;
    background: #f1f5fb;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 17px;
    text-decoration: none;
}

.sk-support-link strong {
    color: var(--sk-blue);
    font-family: "InterBold", Arial, sans-serif;
}

.sk-support-link span,
.sk-submit-button span,
.sk-secondary-button span,
.sk-remember span {
    min-width: 0;
}

.sk-support-link svg {
    width: 27px;
    height: 27px;
}

.sk-login-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 64px;
    border-top: 1px solid var(--sk-line);
    background: rgba(255, 255, 255, 0.72);
    color: #4f5f82;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-login-footer strong {
    color: #f01f1f;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-dashboard-body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    color: #071553;
    background: #f7fbff;
    font-family: "InterRegular", Arial, sans-serif;
}

.sk-dashboard-shell {
    display: grid;
    grid-template-rows: 104px 116px 124px minmax(0, 1fr) 86px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    border: 1px solid #d9e5f4;
    border-radius: 10px;
    background: #fbfdff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86);
}

.sk-dashboard-topbar {
    display: grid;
    grid-template-columns: minmax(360px, 500px) minmax(520px, 820px) minmax(340px, 420px);
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-width: 0;
    padding: 13px 32px 12px;
    border-bottom: 1px solid #e3ebf6;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 30px rgba(18, 43, 85, 0.03);
}

.sk-school-identity {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.sk-school-logo {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.sk-school-identity strong {
    display: block;
    max-width: 270px;
    color: #08175a;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 25px;
    line-height: 1.2;
}

.sk-dashboard-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 68px;
    min-width: 0;
    padding: 0 22px;
    border: 1px solid #d9e5f4;
    border-radius: 10px;
    color: #66718d;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(16, 40, 92, 0.035);
}

.sk-dashboard-search svg {
    flex: 0 0 auto;
    width: 31px;
    height: 31px;
    margin-right: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-dashboard-search input {
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
    border: 0;
    outline: 0;
    color: #29365d;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 21px;
}

.sk-dashboard-search input::placeholder {
    color: #7a8399;
}

.sk-dashboard-search > img {
    display: none;
}

.sk-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    min-width: 0;
}

.sk-bell-button {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    color: #5b657f;
    background: transparent;
    cursor: pointer;
}

.sk-bell-button svg {
    width: 33px;
    height: 33px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-bell-button span {
    position: absolute;
    right: 0;
    top: -2px;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    background: #ff3152;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.nav-bell-unread {
    filter: drop-shadow(0 0 6px rgba(99, 147, 104, 0.6));
}

.notification-dropdown {
    position: fixed;
    width: min(320px, calc(100vw - 16px));
    background: #fff;
    border: 0.5px solid #A7A7A7;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 10002;
}

.notification-dropdown.show {
    display: flex;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 0.5px solid #E0E0E0;
}

.notification-header p {
    margin: 0;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    color: #111;
}

.notification-header span {
    background: #639368;
    color: #fff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
}

.notification-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.notification-item {
    padding: 8px 10px;
    border-radius: 6px;
    border: 0.5px solid transparent;
    background: #FAFAFA;
    cursor: pointer;
}

.notification-item strong {
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
    color: #111;
}

.notification-item p {
    margin: 4px 0 0;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    color: #555;
}

.notification-item.notification-unread {
    background: #F1F7F2;
    border-color: #CFE3D1;
}

.notification-meta {
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
}

.notification-empty {
    margin: 0;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    color: #666;
    padding: 10px;
    text-align: center;
}

.notification-view-all {
    display: block;
    padding: 12px 14px;
    border-top: 0.5px solid #E0E0E0;
    color: #0963ff;
    background: #fff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

.notification-view-all:hover {
    background: #F7FBFF;
}

.sk-admin-menu {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 18px;
    min-width: 285px;
    color: #071553;
}

.sk-admin-menu > img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    background: #edf3fb;
}

.sk-admin-menu strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-admin-menu small {
    display: block;
    margin-top: 6px;
    color: #6d778f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-admin-menu select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sk-admin-trigger {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.sk-admin-menu > svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #63708d;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-admin-profile-menu {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    z-index: 80;
    width: 430px;
    padding: 26px 28px 24px;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(19, 41, 82, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.sk-admin-profile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sk-admin-profile-head {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin-bottom: 24px;
}

.sk-admin-profile-head img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: #edf3fb;
}

.sk-admin-profile-head strong {
    display: block;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.1;
}

.sk-admin-profile-head span {
    display: block;
    margin-top: 8px;
    color: #1264ff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
}

.sk-admin-profile-head small {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    color: #17ba5d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-admin-profile-head small i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #17ba5d;
}

.sk-admin-profile-links {
    display: grid;
    gap: 8px;
}

.sk-admin-profile-links a,
.sk-admin-profile-logout {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    height: 58px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #4f5f86;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
    text-decoration: none;
}

.sk-admin-profile-links a.is-active {
    border-color: #dbe5f4;
    background: #f7fbff;
    color: #3d4f7d;
}

.sk-admin-profile-links a:hover,
.sk-admin-profile-links a:focus-visible {
    border-color: #dbe5f4;
    background: #f7fbff;
    color: #0963ff;
    outline: none;
}

.sk-admin-profile-links svg,
.sk-admin-profile-logout svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-admin-profile-logout {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e2eaf5;
    border-radius: 0;
    color: #f01f1f;
}

.sk-admin-profile-logout:hover,
.sk-admin-profile-logout:focus-visible {
    background: #fff7f7;
    color: #d81919;
    outline: none;
}

.sk-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
    padding: 20px 50px 10px;
}

.sk-dashboard-heading h1 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 48px;
    line-height: 1;
}

.sk-dashboard-heading p {
    margin: 14px 0 0;
    color: #68728d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 22px;
}

.sk-add-actions {
    position: relative;
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sk-add-new-button {
    position: relative;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    gap: 16px;
    width: 204px;
    height: 64px;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 12px 26px rgba(9, 99, 255, 0.22);
    font-size: 23px;
}

.sk-add-new-button svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-add-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(233, 241, 250, 0.68);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(2px);
    transition: opacity 0.16s ease;
}

.sk-add-popup-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sk-add-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 44;
    width: min(720px, calc(100vw - 100px));
    padding: 22px 24px 20px;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(19, 41, 82, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.sk-add-menu::before {
    content: "";
    position: absolute;
    top: -13px;
    right: 72px;
    width: 28px;
    height: 28px;
    border-left: 1px solid #dfe8f5;
    border-top: 1px solid #dfe8f5;
    background: #ffffff;
    transform: rotate(45deg);
}

.sk-add-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sk-add-menu-header {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
}

.sk-add-menu-header strong {
    display: block;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 27px;
    line-height: 1.05;
}

.sk-add-menu-header span {
    display: block;
    margin-top: 10px;
    color: #68728d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 17px;
}

.sk-add-menu-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
}

.sk-add-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 124px;
    padding: 14px 8px;
    border: 1px solid #e2eaf5;
    border-radius: 10px;
    color: #071553;
    background: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(18, 43, 85, 0.035);
}

.sk-add-menu-item span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #eef5ff;
}

.sk-add-menu-item img,
.sk-add-menu-item .sk-dashboard-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.sk-add-menu-item .sk-dashboard-icon {
    display: block;
}

.sk-add-icon-badge {
    position: relative;
}

.sk-add-icon-badge i {
    position: absolute;
    right: 9px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #ffffff;
    background: currentColor;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
    line-height: 1;
}

.sk-add-menu-item strong {
    overflow: hidden;
    max-width: 100%;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-add-green { color: #0aa329; }
.sk-add-blue { color: #0963ff; }
.sk-add-purple { color: #7a20d8; }
.sk-add-orange { color: #ff8a00; }
.sk-add-red { color: #ef3157; }
.sk-add-teal { color: #099d9a; }

.sk-add-green span { background: #ecf9ef; }
.sk-add-blue span { background: #edf4ff; }
.sk-add-purple span { background: #f2eaff; }
.sk-add-orange span { background: #fff2e2; }
.sk-add-red span { background: #ffeaf0; }
.sk-add-teal span { background: #e8faf9; }

.sk-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    min-width: 0;
    padding: 0 50px 18px;
}

.sk-stat-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 122px;
    padding: 16px 24px;
    border: 1px solid currentColor;
    border-radius: 12px;
    color: #0a9d24;
    background: #ffffff;
    text-decoration: none;
}

.sk-stat-card > span:last-child {
    min-width: 0;
}

.sk-stat-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 12%, #ffffff);
}

.sk-stat-icon img,
.sk-stat-icon .sk-dashboard-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.sk-stat-card strong {
    display: block;
    margin-bottom: 12px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 20px;
}

.sk-stat-card b {
    display: block;
    color: currentColor;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 34px;
    line-height: 1;
}

.sk-stat-green { color: #079b1b; background: #fbfffb; }
.sk-stat-blue { color: #0963ff; background: #fbfdff; }
.sk-stat-purple { color: #7a20d8; background: #fefdff; }
.sk-stat-orange { color: #ff8a00; background: #fffdf9; }
.sk-stat-red { color: #ef3157; background: #fffafa; }

.sk-dashboard-icon {
    display: block;
    flex: 0 0 auto;
}

.sk-module-panel {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px 20px;
    min-height: 0;
    margin: 0 50px;
    padding: 16px 28px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 40, 92, 0.09);
}

.sk-module-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    border: 1px solid #e4ebf5;
    border-radius: 9px;
    color: #06205d;
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(18, 43, 85, 0.035);
}

.sk-module-tile span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: #eef5ff;
}

.sk-module-tile img,
.sk-module-tile .sk-dashboard-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.sk-module-tile.sk-dash-tone-green { color: #079b1b; }
.sk-module-tile.sk-dash-tone-blue { color: #0963ff; }
.sk-module-tile.sk-dash-tone-purple { color: #7a20d8; }
.sk-module-tile.sk-dash-tone-orange { color: #ff8a00; }
.sk-module-tile.sk-dash-tone-red { color: #ef3157; }
.sk-module-tile.sk-dash-tone-teal { color: #099d9a; }

.sk-module-tile.sk-dash-tone-green span { background: #eaf8ed; }
.sk-module-tile.sk-dash-tone-blue span { background: #edf4ff; }
.sk-module-tile.sk-dash-tone-purple span { background: #f3eaff; }
.sk-module-tile.sk-dash-tone-orange span { background: #fff2e4; }
.sk-module-tile.sk-dash-tone-red span { background: #ffeaf0; }
.sk-module-tile.sk-dash-tone-teal span { background: #e8f8f8; }

.sk-module-tile strong {
    overflow: hidden;
    max-width: 100%;
    padding: 0 6px;
    color: #06205d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-dashboard-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 0 50px;
    color: #6d778f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
}

.sk-dashboard-footer span:nth-child(2) {
    text-align: center;
}

.sk-dashboard-footer span:last-child {
    text-align: right;
}

.sk-dashboard-footer strong {
    color: #f01f1f;
    font-family: "InterBold", Arial, sans-serif;
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .sk-stat-icon {
        background: #eef5ff;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-dashboard-shell {
        grid-template-rows: 74px 78px 96px minmax(0, 1fr) 44px;
        border-radius: 8px;
    }

    .sk-dashboard-topbar {
        grid-template-columns: minmax(190px, 320px) minmax(220px, 1fr) minmax(210px, 320px);
        gap: 18px;
        padding: 10px 28px;
    }

    .sk-school-identity {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
    }

    .sk-school-logo {
        width: 54px;
        height: 54px;
    }

    .sk-school-identity strong {
        max-width: 210px;
        font-size: 18px;
    }

    .sk-dashboard-search {
        height: 48px;
        padding: 0 16px;
        border-radius: 10px;
    }

    .sk-dashboard-search svg {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    .sk-dashboard-search input {
        font-size: 16px;
    }

    .sk-topbar-actions {
        gap: 14px;
    }

    .sk-bell-button {
        width: 38px;
        height: 38px;
    }

    .sk-bell-button svg {
        width: 28px;
        height: 28px;
    }

    .sk-bell-button span {
        min-width: 22px;
        height: 22px;
        border-width: 2px;
        font-size: 11px;
    }

    .sk-admin-menu {
        grid-template-columns: 50px minmax(0, 1fr) 18px;
        gap: 10px;
        min-width: 190px;
    }

    .sk-admin-menu > img {
        width: 50px;
        height: 50px;
    }

    .sk-admin-menu strong {
        font-size: 16px;
    }

    .sk-admin-menu small {
        margin-top: 3px;
        font-size: 12px;
    }

    .sk-admin-profile-menu {
        top: calc(100% + 10px);
        width: 320px;
        padding: 18px;
        border-radius: 12px;
    }

    .sk-admin-profile-head {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 13px;
        margin-bottom: 14px;
    }

    .sk-admin-profile-head img {
        width: 56px;
        height: 56px;
    }

    .sk-admin-profile-head strong {
        font-size: 18px;
    }

    .sk-admin-profile-head span {
        margin-top: 5px;
        font-size: 14px;
    }

    .sk-admin-profile-head small {
        margin-top: 6px;
        font-size: 12px;
    }

    .sk-admin-profile-links {
        gap: 5px;
    }

    .sk-admin-profile-links a,
    .sk-admin-profile-logout {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 12px;
        height: 44px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 14px;
    }

    .sk-admin-profile-links svg,
    .sk-admin-profile-logout svg {
        width: 22px;
        height: 22px;
    }

    .sk-admin-profile-logout {
        margin-top: 10px;
        padding-top: 12px;
    }

    .sk-dashboard-heading {
        padding: 12px 28px 8px;
    }

    .sk-dashboard-heading h1 {
        font-size: 34px;
    }

    .sk-dashboard-heading p {
        margin-top: 8px;
        font-size: 16px;
    }

    .sk-add-new-button {
        width: 142px;
        height: 46px;
        gap: 10px;
        border-radius: 10px;
        font-size: 17px;
    }

    .sk-add-new-button svg {
        width: 24px;
        height: 24px;
    }

    .sk-add-menu {
        width: min(580px, calc(100vw - 56px));
        padding: 14px 16px;
        border-radius: 12px;
    }

    .sk-add-menu::before {
        right: 50px;
        width: 22px;
        height: 22px;
    }

    .sk-add-menu-header {
        margin-bottom: 10px;
    }

    .sk-add-menu-header strong {
        font-size: 22px;
    }

    .sk-add-menu-header span {
        margin-top: 7px;
        font-size: 14px;
    }

    .sk-add-menu-grid {
        gap: 12px 14px;
    }

    .sk-add-menu-item {
        height: 100px;
        border-radius: 9px;
    }

    .sk-add-menu-item span {
        width: 46px;
        height: 46px;
        margin-bottom: 7px;
    }

    .sk-add-menu-item img,
    .sk-add-menu-item .sk-dashboard-icon {
        width: 31px;
        height: 31px;
    }

    .sk-add-icon-badge i {
        right: 6px;
        bottom: 7px;
        width: 13px;
        height: 13px;
        font-size: 10px;
    }

    .sk-add-menu-item strong {
        font-size: 13px;
    }

    .sk-stat-grid {
        gap: 14px;
        padding: 0 28px 12px;
    }

    .sk-stat-card {
        grid-template-columns: 72px minmax(0, 1fr);
        height: 78px;
        padding: 10px 14px;
        border-radius: 9px;
    }

    .sk-stat-icon {
        width: 58px;
        height: 58px;
    }

    .sk-stat-icon img,
    .sk-stat-icon .sk-dashboard-icon {
        width: 38px;
        height: 38px;
    }

    .sk-stat-card strong {
        margin-bottom: 7px;
        font-size: 15px;
    }

    .sk-stat-card b {
        font-size: 24px;
    }

    .sk-module-panel {
        gap: 10px 14px;
        margin: 0 28px;
        padding: 14px 18px;
        border-radius: 12px;
    }

    .sk-module-tile {
        border-radius: 8px;
    }

    .sk-module-tile span {
        width: 48px;
        height: 48px;
        margin-bottom: 3px;
    }

    .sk-module-tile img,
    .sk-module-tile .sk-dashboard-icon {
        width: 33px;
        height: 33px;
    }

    .sk-module-tile strong {
        font-size: 13px;
    }

    .sk-dashboard-footer {
        padding: 0 28px;
        font-size: 13px;
    }
}

@media (max-width: 760px) {
    .sk-dashboard-shell {
        grid-template-rows: 64px 58px 64px minmax(0, 1fr) 30px;
    }

    .sk-dashboard-topbar {
        grid-template-columns: minmax(120px, 1fr) minmax(90px, 1fr) minmax(86px, auto);
        gap: 6px;
        padding: 6px 10px;
    }

    .sk-school-identity {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 7px;
    }

    .sk-school-logo {
        width: 38px;
        height: 38px;
    }

    .sk-school-identity strong {
        max-width: 110px;
        font-size: 11px;
        line-height: 1.2;
    }

    .sk-dashboard-search {
        height: 34px;
        padding: 0 8px;
        border-radius: 8px;
    }

    .sk-dashboard-search svg {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

    .sk-dashboard-search input {
        font-size: 10px;
    }

    .sk-topbar-actions {
        gap: 5px;
    }

    .sk-bell-button {
        width: 28px;
        height: 28px;
    }

    .sk-bell-button svg {
        width: 20px;
        height: 20px;
    }

    .sk-bell-button span {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 8px;
    }

    .sk-admin-menu {
        grid-template-columns: 32px minmax(0, 54px) 12px;
        gap: 5px;
        min-width: 0;
    }

    .sk-admin-menu > img {
        width: 32px;
        height: 32px;
    }

    .sk-admin-menu strong {
        font-size: 9px;
    }

    .sk-admin-menu small {
        margin-top: 2px;
        font-size: 7px;
    }

    .sk-admin-menu > svg {
        width: 12px;
        height: 12px;
    }

    .sk-admin-profile-menu {
        top: calc(100% + 6px);
        width: min(250px, calc(100vw - 14px));
        padding: 10px;
        border-radius: 9px;
    }

    .sk-admin-profile-head {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 8px;
    }

    .sk-admin-profile-head img {
        width: 36px;
        height: 36px;
    }

    .sk-admin-profile-head strong {
        font-size: 11px;
    }

    .sk-admin-profile-head span {
        margin-top: 2px;
        font-size: 9px;
    }

    .sk-admin-profile-head small {
        gap: 5px;
        margin-top: 3px;
        font-size: 8px;
    }

    .sk-admin-profile-head small i {
        width: 6px;
        height: 6px;
    }

    .sk-admin-profile-links {
        gap: 3px;
    }

    .sk-admin-profile-links a,
    .sk-admin-profile-logout {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 8px;
        height: 28px;
        padding: 0 7px;
        border-radius: 6px;
        font-size: 8px;
    }

    .sk-admin-profile-links svg,
    .sk-admin-profile-logout svg {
        width: 15px;
        height: 15px;
    }

    .sk-admin-profile-logout {
        margin-top: 5px;
        padding-top: 6px;
    }

    .sk-dashboard-heading {
        padding: 7px 10px 4px;
        gap: 8px;
    }

    .sk-dashboard-heading h1 {
        font-size: 21px;
    }

    .sk-dashboard-heading p {
        margin-top: 4px;
        font-size: 9px;
    }

    .sk-add-actions {
        gap: 4px;
    }

    .sk-add-new-button {
        width: 78px;
        height: 32px;
        gap: 4px;
        border-radius: 8px;
        font-size: 10px;
    }

    .sk-add-new-button svg {
        width: 15px;
        height: 15px;
    }

    .sk-add-menu {
        width: min(360px, calc(100vw - 20px));
        padding: 10px;
        border-radius: 9px;
    }

    .sk-add-menu::before {
        top: -8px;
        right: 24px;
        width: 16px;
        height: 16px;
    }

    .sk-add-menu-header {
        margin-bottom: 8px;
    }

    .sk-add-menu-header strong {
        font-size: 15px;
    }

    .sk-add-menu-header span {
        margin-top: 3px;
        font-size: 9px;
    }

    .sk-add-menu-grid {
        gap: 6px;
    }

    .sk-add-menu-item {
        height: 68px;
        padding: 6px 3px;
        border-radius: 7px;
    }

    .sk-add-menu-item span {
        width: 30px;
        height: 30px;
        margin-bottom: 4px;
    }

    .sk-add-menu-item img,
    .sk-add-menu-item .sk-dashboard-icon {
        width: 20px;
        height: 20px;
    }

    .sk-add-icon-badge i {
        right: 4px;
        bottom: 4px;
        width: 9px;
        height: 9px;
        font-size: 7px;
    }

    .sk-add-menu-item strong {
        font-size: 7px;
    }

    .sk-stat-grid {
        gap: 5px;
        padding: 0 10px 6px;
    }

    .sk-stat-card {
        grid-template-columns: 24px minmax(0, 1fr);
        height: 48px;
        padding: 6px 4px;
        border-radius: 7px;
    }

    .sk-stat-icon {
        width: 22px;
        height: 22px;
    }

    .sk-stat-icon img,
    .sk-stat-icon .sk-dashboard-icon {
        width: 16px;
        height: 16px;
    }

    .sk-stat-card strong {
        margin-bottom: 4px;
        font-size: 7px;
    }

    .sk-stat-card b {
        font-size: 12px;
    }

    .sk-module-panel {
        gap: 6px;
        margin: 0 10px;
        padding: 8px;
        border-radius: 9px;
    }

    .sk-module-tile {
        border-radius: 7px;
    }

    .sk-module-tile span {
        width: 30px;
        height: 30px;
        margin-bottom: 3px;
    }

    .sk-module-tile img,
    .sk-module-tile .sk-dashboard-icon {
        width: 21px;
        height: 21px;
    }

    .sk-module-tile strong {
        font-size: 8px;
    }

    .sk-dashboard-footer {
        gap: 5px;
        padding: 0 10px;
        font-size: 7px;
    }
}

@media (max-height: 430px) {
    .sk-dashboard-shell {
        grid-template-rows: 54px 50px 56px minmax(0, 1fr) 26px;
    }

    .sk-dashboard-topbar {
        grid-template-columns: minmax(150px, 230px) minmax(160px, 1fr) minmax(140px, 220px);
        gap: 8px;
        padding: 5px 18px;
    }

    .sk-school-identity {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 9px;
    }

    .sk-school-logo {
        width: 40px;
        height: 40px;
    }

    .sk-school-identity strong {
        max-width: 170px;
        font-size: 13px;
    }

    .sk-dashboard-search {
        height: 34px;
        padding: 0 10px;
        border-radius: 8px;
    }

    .sk-dashboard-search svg {
        width: 18px;
        height: 18px;
        margin-right: 7px;
    }

    .sk-dashboard-search input {
        font-size: 12px;
    }

    .sk-topbar-actions {
        gap: 6px;
    }

    .sk-bell-button {
        width: 30px;
        height: 30px;
    }

    .sk-bell-button svg {
        width: 21px;
        height: 21px;
    }

    .sk-bell-button span {
        min-width: 17px;
        height: 17px;
        border-width: 2px;
        font-size: 8px;
    }

    .sk-admin-menu {
        grid-template-columns: 34px minmax(0, 1fr) 13px;
        gap: 6px;
        min-width: 0;
    }

    .sk-admin-menu > img {
        width: 34px;
        height: 34px;
    }

    .sk-admin-menu strong {
        font-size: 10px;
    }

    .sk-admin-menu small {
        margin-top: 1px;
        font-size: 8px;
    }

    .sk-admin-menu > svg {
        width: 13px;
        height: 13px;
    }

    .sk-admin-profile-menu {
        top: calc(100% + 7px);
        width: min(270px, calc(100vw - 36px));
        padding: 11px;
        border-radius: 9px;
    }

    .sk-admin-profile-head {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 8px;
    }

    .sk-admin-profile-head img {
        width: 38px;
        height: 38px;
    }

    .sk-admin-profile-head strong {
        font-size: 12px;
    }

    .sk-admin-profile-head span {
        margin-top: 3px;
        font-size: 9px;
    }

    .sk-admin-profile-head small {
        gap: 5px;
        margin-top: 3px;
        font-size: 8px;
    }

    .sk-admin-profile-head small i {
        width: 6px;
        height: 6px;
    }

    .sk-admin-profile-links a,
    .sk-admin-profile-logout {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 8px;
        height: 30px;
        padding: 0 7px;
        font-size: 9px;
    }

    .sk-admin-profile-links svg,
    .sk-admin-profile-logout svg {
        width: 15px;
        height: 15px;
    }

    .sk-admin-profile-logout {
        margin-top: 5px;
        padding-top: 6px;
    }

    .sk-dashboard-heading {
        padding: 6px 18px 3px;
        gap: 8px;
    }

    .sk-dashboard-heading h1 {
        font-size: 24px;
    }

    .sk-dashboard-heading p {
        margin-top: 4px;
        font-size: 10px;
    }

    .sk-add-actions {
        gap: 6px;
    }

    .sk-add-new-button {
        width: 92px;
        height: 34px;
        gap: 5px;
        border-radius: 8px;
        font-size: 12px;
    }

    .sk-add-new-button svg {
        width: 17px;
        height: 17px;
    }

    .sk-add-menu {
        width: min(520px, calc(100vw - 36px));
        padding: 10px 12px 12px;
        border-radius: 10px;
    }

    .sk-add-menu::before {
        top: -9px;
        right: 28px;
        width: 18px;
        height: 18px;
    }

    .sk-add-menu-header {
        margin-bottom: 8px;
    }

    .sk-add-menu-header strong {
        font-size: 16px;
    }

    .sk-add-menu-header span {
        margin-top: 3px;
        font-size: 10px;
    }

    .sk-add-menu-grid {
        gap: 7px 9px;
    }

    .sk-add-menu-item {
        height: 56px;
        padding: 4px;
        border-radius: 7px;
    }

    .sk-add-menu-item span {
        width: 24px;
        height: 24px;
        margin-bottom: 3px;
    }

    .sk-add-menu-item img,
    .sk-add-menu-item .sk-dashboard-icon {
        width: 16px;
        height: 16px;
    }

    .sk-add-icon-badge i {
        right: 3px;
        bottom: 3px;
        width: 8px;
        height: 8px;
        font-size: 6px;
    }

    .sk-add-menu-item strong {
        font-size: 7px;
    }

    .sk-stat-grid {
        gap: 6px;
        padding: 0 18px 5px;
    }

    .sk-stat-card {
        grid-template-columns: 30px minmax(0, 1fr);
        height: 48px;
        padding: 5px 6px;
        border-radius: 7px;
    }

    .sk-stat-icon {
        width: 27px;
        height: 27px;
    }

    .sk-stat-icon img,
    .sk-stat-icon .sk-dashboard-icon {
        width: 19px;
        height: 19px;
    }

    .sk-stat-card strong {
        margin-bottom: 3px;
        font-size: 9px;
    }

    .sk-stat-card b {
        font-size: 15px;
    }

    .sk-module-panel {
        gap: 5px 8px;
        margin: 0 18px;
        padding: 7px;
        border-radius: 9px;
    }

    .sk-module-tile span {
        width: 25px;
        height: 25px;
        margin-bottom: 2px;
    }

    .sk-module-tile img,
    .sk-module-tile .sk-dashboard-icon {
        width: 17px;
        height: 17px;
    }

    .sk-module-tile strong {
        font-size: 8px;
    }

    .sk-dashboard-footer {
        gap: 8px;
        padding: 0 18px;
        font-size: 8px;
    }
}

.sk-attendance-body {
    color: #071553;
    background: #fbfdff;
}

.sk-attendance-shell {
    grid-template-rows: 80px minmax(0, 1fr);
    border-radius: 0;
}

.sk-attendance-body .sk-dashboard-topbar {
    grid-template-columns: minmax(360px, 500px) minmax(430px, 532px) minmax(300px, 370px);
    gap: 28px;
    min-height: 80px;
    padding: 8px 34px 8px;
}

.sk-attendance-body .sk-school-identity {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 24px;
}

.sk-attendance-body .sk-school-logo {
    width: 60px;
    height: 60px;
}

.sk-attendance-body .sk-school-identity strong {
    max-width: 260px;
    font-size: 21px;
    line-height: 1.22;
}

.sk-attendance-body .sk-dashboard-search {
    height: 48px;
    padding: 0 16px;
}

.sk-attendance-body .sk-dashboard-search svg {
    width: 23px;
    height: 23px;
    margin-right: 18px;
}

.sk-attendance-body .sk-dashboard-search input {
    font-size: 15px;
}

.sk-attendance-body .sk-topbar-actions {
    gap: 18px;
}

.sk-attendance-body .sk-bell-button {
    width: 34px;
    height: 34px;
}

.sk-attendance-body .sk-bell-button svg {
    width: 27px;
    height: 27px;
}

.sk-attendance-body .sk-admin-menu {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    gap: 12px;
    min-width: 188px;
}

.sk-attendance-body .sk-admin-menu > img {
    width: 44px;
    height: 44px;
}

.sk-attendance-body .sk-admin-menu strong {
    font-size: 14px;
}

.sk-attendance-body .sk-admin-menu small {
    margin-top: 3px;
    font-size: 11px;
}

.sk-attendance-workspace {
    grid-template-columns: 272px minmax(0, 1fr);
}

.sk-attendance-body .sk-students-sidebar {
    padding: 33px 16px 22px 14px;
}

.sk-attendance-body .sk-students-nav {
    gap: 8px;
}

.sk-attendance-body .sk-students-nav a {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 18px;
    height: 44px;
    padding: 0 22px;
    border-radius: 7px;
    font-size: 15px;
}

.sk-attendance-body .sk-students-nav a::before {
    left: -14px;
    top: 0;
    width: 4px;
    height: 44px;
    border-radius: 999px;
}

.sk-attendance-body .sk-students-nav img {
    width: 21px;
    height: 21px;
}

.sk-attendance-body .sk-students-nav-bottom {
    padding-top: 24px;
}

.sk-attendance-main {
    grid-template-rows: 60px minmax(0, 1fr) 24px;
    gap: 12px;
    padding: 23px 48px 0 30px;
}

.sk-attendance-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.sk-attendance-heading h1 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 32px;
    line-height: 1;
}

.sk-attendance-heading p {
    margin: 10px 0 0;
    color: #475982;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-attendance-heading-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

.sk-attendance-secondary-button,
.sk-attendance-primary-button,
.sk-attendance-search-button,
.sk-attendance-reset-button,
.sk-attendance-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    color: #071553;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.sk-attendance-secondary-button {
    gap: 12px;
    width: 224px;
    height: 42px;
    font-size: 14px;
}

.sk-attendance-primary-button {
    justify-content: space-between;
    width: 292px;
    height: 42px;
    padding: 0 17px 0 44px;
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 10px 20px rgba(9, 99, 255, 0.16);
    font-size: 14px;
}

.sk-attendance-primary-button > svg {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    margin-left: 16px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.sk-attendance-mark-menu {
    position: relative;
    flex: 0 0 auto;
}

.sk-attendance-mark-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 70;
    display: none;
    width: 292px;
    padding: 9px 0;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(7, 21, 83, 0.14);
}

.sk-attendance-mark-dropdown.is-open {
    display: block;
}

.sk-attendance-mark-dropdown button {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: 0;
    color: #071553;
    background: transparent;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    text-align: left;
}

.sk-attendance-mark-dropdown button:hover,
.sk-attendance-mark-dropdown button:focus-visible {
    color: #0963ff;
    background: #f3f8ff;
    outline: 0;
}

.sk-attendance-mark-dropdown svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-secondary-button svg,
.sk-attendance-primary-button svg,
.sk-attendance-search-button svg,
.sk-attendance-reset-button svg,
.sk-attendance-view-all svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 22px;
    min-width: 0;
    min-height: 0;
}

.sk-attendance-board,
.sk-attendance-sidebar,
.sk-attendance-tab-panel {
    min-width: 0;
    min-height: 0;
}

.sk-attendance-board {
    display: grid;
    grid-template-rows: 50px auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(16, 40, 92, 0.06);
}

/* One-line dynamic summary of the saved Attendance Settings rules for the
   active tab's role (between the tabs and the table panel). */
.sk-attendance-rules-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 30px;
    padding: 0 18px;
    border-bottom: 1px solid #eef3fa;
    background: #f8fafd;
    overflow: hidden;
    white-space: nowrap;
}

.sk-attendance-rules-strip:empty {
    display: none;
}

.sk-attendance-rules-strip strong {
    flex: 0 0 auto;
    color: #64748b;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.sk-attendance-rules-strip span {
    flex: 0 0 auto;
    color: #64748b;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

.sk-attendance-rules-strip span b {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
}

.sk-attendance-tabs {
    display: flex;
    align-items: flex-end;
    gap: 44px;
    min-width: 0;
    padding: 0 28px;
    border-bottom: 1px solid #dfe8f5;
    background: #fbfdff;
}

.sk-attendance-tabs button {
    position: relative;
    height: 50px;
    padding: 0;
    border: 0;
    color: #35456d;
    background: transparent;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-attendance-tabs button.is-active {
    color: #0963ff;
}

.sk-attendance-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #0963ff;
}

.sk-attendance-tab-panel {
    display: none;
    grid-template-rows: 118px 74px minmax(0, 1fr) 46px;
    overflow: hidden;
}

.sk-attendance-tab-panel.is-active {
    display: grid;
}

.sk-attendance-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
    padding: 22px 18px;
    border-bottom: 1px solid #edf2f8;
}

.sk-attendance-stat {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 76px;
    padding: 12px 14px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-attendance-stat > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: currentColor;
    background: color-mix(in srgb, currentColor 12%, #ffffff);
}

.sk-attendance-stat svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-stat strong,
.sk-attendance-side-card h2 {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-attendance-stat strong {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-stat b {
    display: block;
    color: currentColor;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
}

.sk-attendance-stat small {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #475982;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-stat-blue { color: #0963ff; background: #fbfdff; }
.sk-attendance-stat-green { color: #16a34a; background: #fbfffb; }
.sk-attendance-stat-red { color: #ff2b2b; background: #fffbfb; }
.sk-attendance-stat-orange { color: #ff8a00; background: #fffdf9; }

.sk-attendance-filters {
    display: grid;
    grid-template-columns: 180px 1fr 1fr 1fr 108px;
    align-items: end;
    gap: 20px;
    min-width: 0;
    padding: 14px 18px;
    border-bottom: 1px solid #edf2f8;
}

.sk-attendance-teacher-filters,
.sk-attendance-staff-filters {
    grid-template-columns: 180px 1fr 1fr 108px;
}

.sk-attendance-search-field {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.sk-attendance-search-field svg {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: #7b8bb2;
    pointer-events: none;
}

.sk-attendance-search-field input {
    padding-left: 36px;
}

.sk-attendance-filters label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: #35456d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
}

.sk-attendance-filters em {
    color: #ff2b2b;
    font-style: normal;
}

.sk-attendance-filters input,
.sk-attendance-filters select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe8f5;
    border-radius: 6px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-search-button,
.sk-attendance-reset-button {
    gap: 9px;
    height: 42px;
    font-size: 12px;
}

.sk-attendance-search-button {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-attendance-reset-button {
    color: #263861;
}

.sk-attendance-table-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 10px 18px 0;
}

.sk-attendance-table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e1e9f4;
    border-radius: 8px;
    color: #071553;
}

.sk-attendance-table th,
.sk-attendance-table td {
    overflow: hidden;
    padding: 0 10px;
    border-bottom: 1px solid #e6edf6;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-table th {
    height: 40px;
    color: #435275;
    background: #fbfdff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-table td {
    height: 42px;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-table tr:last-child td {
    border-bottom: 0;
}

.sk-attendance-table th:nth-child(1),
.sk-attendance-table td:nth-child(1) { width: 48px; }
.sk-attendance-table th:nth-child(2),
.sk-attendance-table td:nth-child(2) { width: 22%; }
.sk-attendance-table th:nth-child(3),
.sk-attendance-table td:nth-child(3) { width: 12%; }
.sk-attendance-table th:nth-child(4),
.sk-attendance-table td:nth-child(4) { width: 14%; }
.sk-attendance-table th:nth-child(5),
.sk-attendance-table td:nth-child(5),
.sk-attendance-table th:nth-child(6),
.sk-attendance-table td:nth-child(6) { width: 13%; }
.sk-attendance-table th:nth-child(7),
.sk-attendance-table td:nth-child(7) { width: 16%; }
.sk-attendance-table th:nth-child(8),
.sk-attendance-table td:nth-child(8) { width: 98px; }

.sk-attendance-person {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.sk-attendance-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    color: #0963ff;
    background: #eaf2ff;
    object-fit: cover;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
}

.sk-attendance-person strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
}

.sk-attendance-status.is-present {
    color: #15803d;
    background: #e9f8ed;
}

.sk-attendance-status.is-absent {
    color: #ff2b2b;
    background: #fff1f1;
}

.sk-attendance-status.is-late,
.sk-attendance-status.is-half-day {
    color: #f97316;
    background: #fff4e8;
}

.sk-attendance-status.is-leave {
    color: #7747e8;
    background: #f3efff;
}

.sk-attendance-status.is-unmarked {
    color: #64748b;
    background: #f4f7fb;
}

.sk-attendance-status.is-holiday {
    color: #0963ff;
    background: #f3f8ff;
}

.sk-attendance-mark:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.sk-attendance-day-notice td {
    padding: 10px 14px;
    border-bottom: 1px solid #ffe3c2;
    color: #b45309;
    background: #fff8ef;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    text-align: center;
}

.sk-attendance-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sk-attendance-row-actions button,
.sk-attendance-row-actions a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.sk-attendance-row-actions button[data-status="ABSENT"] {
    color: #ff2b2b;
}

.sk-attendance-row-actions svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-table-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 0 18px;
    color: #35456d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-table-footer p {
    margin: 0;
}

.sk-attendance-table-footer label {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sk-attendance-table-footer select {
    width: 74px;
    height: 34px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-attendance-pagination,
.sk-attendance-pagination .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sk-attendance-pagination button,
.sk-attendance-pagination span {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #52607f;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-pagination button {
    cursor: pointer;
}

.sk-attendance-pagination .is-active {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-attendance-sidebar {
    display: grid;
    grid-template-rows: 256px 180px minmax(0, 1fr);
    gap: 14px;
}

.sk-attendance-side-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 18px 14px 14px;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: #ffffff;
}

.sk-attendance-side-card h2 {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1;
}

.sk-attendance-action {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: #16a34a;
    background: #f4fff7;
    cursor: pointer;
    text-align: left;
}

.sk-attendance-action:last-child {
    margin-bottom: 0;
}

.sk-attendance-action > svg:first-child,
.sk-attendance-action > span:first-child {
    display: grid;
    place-items: center;
}

.sk-attendance-action svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-action strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-action small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-action-blue { color: #0963ff; background: #f5f9ff; }
.sk-action-purple { color: #7747e8; background: #f8f5ff; }
.sk-action-orange { color: #ff8a00; background: #fff8f1; }

.sk-attendance-today dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.sk-attendance-today div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    border-bottom: 1px solid #e7eef7;
}

.sk-attendance-today div:last-child {
    border-bottom: 0;
}

.sk-attendance-today dt,
.sk-attendance-today dd {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-today dt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.sk-attendance-today i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sk-dot-green { background: #16a34a; }
.sk-dot-red { background: #ff2b2b; }
.sk-dot-orange { background: #ff8a00; }

.sk-attendance-activity {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 34px;
}

.sk-attendance-activity article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 0 0 13px;
    margin-bottom: 13px;
    border-bottom: 1px solid #e7eef7;
}

.sk-attendance-activity article:last-child {
    margin-bottom: 0;
}

.sk-attendance-activity article > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: #16a34a;
    background: #e9f8ed;
}

.sk-attendance-activity .sk-activity-purple {
    color: #7747e8;
    background: #f3efff;
}

.sk-attendance-activity svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-activity p {
    min-width: 0;
    margin: 0;
}

.sk-attendance-activity strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-activity small {
    display: block;
    margin-top: 5px;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.35;
}

.sk-attendance-view-all {
    gap: 8px;
    width: 100%;
    height: 34px;
    color: #0963ff;
    font-size: 11px;
}

.sk-attendance-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1200;
    display: none;
    max-width: 320px;
    padding: 10px 16px;
    border-radius: 8px;
    color: #ffffff;
    background: #16a34a;
    box-shadow: 0 10px 24px rgba(7, 21, 83, 0.15);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 31, 58, 0.42);
    backdrop-filter: blur(2px);
}

.sk-attendance-settings-overlay.is-open {
    display: flex;
}

.sk-attendance-settings-modal {
    width: min(798px, calc(100vw - 36px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(7, 21, 83, 0.18);
}

.sk-attendance-settings-modal form {
    display: grid;
    grid-template-rows: 78px 60px minmax(0, 1fr) 84px;
    max-height: calc(100vh - 48px);
    min-height: 0;
}

.sk-attendance-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding: 22px 32px 0;
}

.sk-attendance-settings-head h2 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
    line-height: 1;
}

.sk-attendance-settings-head p {
    margin: 10px 0 0;
    color: #40517b;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-settings-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    color: #48609b;
    background: transparent;
    cursor: pointer;
}

.sk-attendance-settings-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-attendance-settings-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 24px;
    padding: 0 32px;
    border-bottom: 1px solid #dfe8f5;
}

.sk-attendance-settings-tabs button {
    position: relative;
    height: 60px;
    padding: 0;
    border: 0;
    color: #40517b;
    background: transparent;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-settings-tabs button.is-active {
    color: #0963ff;
}

.sk-attendance-settings-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px;
    background: #0963ff;
}

.sk-attendance-settings-body {
    min-height: 0;
    overflow: auto;
    padding: 26px 36px 0;
    scrollbar-width: thin;
    scrollbar-color: #c7d5ea #f6f9fd;
}

.sk-attendance-settings-panel {
    display: none;
}

.sk-attendance-settings-panel.is-active {
    display: block;
}

.sk-settings-section-title {
    padding-bottom: 22px;
    border-bottom: 1px solid #e2eaf5;
}

.sk-attendance-setting-row,
.sk-attendance-defaults,
.sk-attendance-setting-split,
.sk-attendance-notification-row {
    border-bottom: 1px solid #e2eaf5;
}

.sk-attendance-mode-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 172px;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
}

.sk-attendance-settings-body h3,
.sk-attendance-toggle-row strong,
.sk-attendance-time-split label > strong {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
}

.sk-attendance-settings-body p,
.sk-attendance-toggle-row small,
.sk-attendance-time-split label > small {
    display: block;
    margin: 10px 0 0;
    color: #40517b;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.35;
}

.sk-attendance-mode-row select {
    width: 172px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-hours-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
    padding: 22px 0;
    border-bottom: 1px solid #e2eaf5;
}

.sk-attendance-hours-grid label {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.sk-attendance-hours-grid strong {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-hours-grid span,
.sk-single-time-field {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 42px;
    padding: 0 13px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #7583a1;
    background: #ffffff;
}

.sk-attendance-hours-grid input,
.sk-single-time-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-hours-grid svg,
.sk-single-time-field svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sk-attendance-defaults {
    padding: 24px 0 21px;
}

.sk-attendance-defaults h3 span {
    color: #40517b;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-status-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 16px;
}

.sk-setting-status {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    cursor: pointer;
}

.sk-setting-status input,
.sk-attendance-toggle-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sk-setting-status span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #ffffff;
    background: #9aa7bd;
}

.sk-setting-status svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-setting-status strong {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-setting-present input:checked + span { background: #16a34a; }
.sk-setting-absent input:checked + span { background: #ff2b2b; }
.sk-setting-late input:checked + span { background: #ff7900; }

.sk-attendance-setting-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sk-attendance-setting-split > *:first-child {
    border-right: 1px solid #e2eaf5;
}

.sk-attendance-toggle-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    padding: 20px 24px 20px 0;
    cursor: pointer;
}

.sk-attendance-toggle-row + .sk-attendance-toggle-row {
    padding-left: 24px;
    padding-right: 0;
}

.sk-attendance-toggle-row i {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #c7d1e3;
    box-shadow: inset 0 0 0 1px rgba(7, 21, 83, 0.04);
}

.sk-attendance-toggle-row i::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(7, 21, 83, 0.18);
    transition: transform 0.16s ease;
}

.sk-attendance-toggle-row input:checked + i {
    background: #0963ff;
}

.sk-attendance-toggle-row input:checked + i::after {
    transform: translateX(18px);
}

.sk-attendance-time-split {
    padding: 22px 0;
}

.sk-attendance-time-split label {
    display: grid;
    min-width: 0;
}

.sk-attendance-time-split label:first-child {
    padding-right: 24px;
}

.sk-attendance-time-split label:last-child {
    padding-left: 24px;
}

.sk-attendance-time-split label > span {
    display: flex;
    align-items: center;
    height: 46px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #7583a1;
    background: #ffffff;
}

.sk-attendance-time-split input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-attendance-time-split select {
    width: 100%;
    min-width: 0;
    height: 46px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-attendance-time-split svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sk-attendance-notification-row {
    padding: 20px 0 22px;
}

.sk-attendance-settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 20px 36px 28px;
}

.sk-attendance-settings-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    height: 44px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-attendance-settings-actions button:first-child {
    color: #071553;
    background: #ffffff;
}

.sk-attendance-settings-actions button:last-child {
    min-width: 158px;
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-mark-attendance-overlay {
    position: fixed;
    inset: 0;
    z-index: 1120;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 31, 58, 0.42);
    backdrop-filter: blur(2px);
}

.sk-mark-attendance-overlay.is-open {
    display: flex;
}

.sk-mark-attendance-modal {
    width: min(1060px, calc(100vw - 42px));
    max-height: calc(100vh - 52px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(7, 21, 83, 0.18);
}

.sk-mark-attendance-modal form {
    display: grid;
    grid-template-rows: 92px 124px minmax(0, 1fr) 82px;
    max-height: calc(100vh - 52px);
    min-height: 0;
}

.sk-mark-attendance-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 32px 32px 0;
}

.sk-mark-attendance-head h2 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
}

.sk-mark-attendance-head p {
    margin: 12px 0 0;
    color: #40517b;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-mark-attendance-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    color: #48609b;
    background: transparent;
    cursor: pointer;
}

.sk-mark-attendance-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-mark-attendance-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 28px;
    margin: 0 32px;
    padding: 20px 18px 26px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
}

.sk-mark-attendance-filters label {
    display: grid;
    gap: 9px;
    min-width: 0;
    color: #35456d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-mark-attendance-filters em {
    color: #ff2b2b;
    font-style: normal;
}

.sk-mark-attendance-filters input,
.sk-mark-attendance-filters select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-mark-attendance-filters-two {
    grid-template-columns: minmax(0, 310px) minmax(0, 310px);
    justify-content: start;
    gap: 28px;
}

.sk-mark-attendance-table-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 0 32px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
}

.sk-mark-attendance-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-mark-attendance-table th,
.sk-mark-attendance-table td {
    height: 56px;
    overflow: hidden;
    padding: 0 12px;
    border-bottom: 1px solid #e6edf6;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-mark-attendance-table th {
    height: 48px;
    color: #435275;
    background: #fbfdff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-mark-attendance-table td {
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-mark-attendance-table tr:last-child td {
    border-bottom: 0;
}

.sk-mark-attendance-table th:nth-child(1),
.sk-mark-attendance-table td:nth-child(1) { width: 52px; }
.sk-mark-attendance-table th:nth-child(2),
.sk-mark-attendance-table td:nth-child(2) { width: 78px; }
.sk-mark-attendance-table th:nth-child(3),
.sk-mark-attendance-table td:nth-child(3) { width: 24%; }
.sk-mark-attendance-table th:nth-child(4),
.sk-mark-attendance-table td:nth-child(4) { width: 150px; }
.sk-mark-attendance-table th:nth-child(5),
.sk-mark-attendance-table td:nth-child(5),
.sk-mark-attendance-table th:nth-child(6),
.sk-mark-attendance-table td:nth-child(6) { width: 118px; }

.sk-mark-attendance-worker-table th:nth-child(1),
.sk-mark-attendance-worker-table td:nth-child(1) { width: 52px; }
.sk-mark-attendance-worker-table th:nth-child(2),
.sk-mark-attendance-worker-table td:nth-child(2) { width: 24%; }
.sk-mark-attendance-worker-table th:nth-child(3),
.sk-mark-attendance-worker-table td:nth-child(3) { width: 22%; }
.sk-mark-attendance-worker-table th:nth-child(4),
.sk-mark-attendance-worker-table td:nth-child(4) { width: 150px; }
.sk-mark-attendance-worker-table th:nth-child(5),
.sk-mark-attendance-worker-table td:nth-child(5),
.sk-mark-attendance-worker-table th:nth-child(6),
.sk-mark-attendance-worker-table td:nth-child(6) { width: 118px; }

.sk-mark-attendance-person {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.sk-mark-attendance-person img {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.sk-mark-attendance-person strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-mark-status-select {
    width: 128px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #bde9c8;
    border-radius: 7px;
    color: #168b31;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-mark-status-select.is-unmarked {
    border-color: #cbd5e1;
    color: #64748b;
    background: #f8fafc;
}

.sk-mark-attendance-table tbody tr.is-attendance-changed td {
    background: #fffbea;
}

.sk-mark-status-select.is-absent {
    border-color: #ffcaca;
    color: #ff2b2b;
}

.sk-mark-status-select.is-late {
    border-color: #ffdcb8;
    color: #f97316;
}

.sk-mark-status-select.is-leave {
    border-color: #dfcbff;
    color: #8733e8;
}

.sk-mark-status-select.is-half-day {
    border-color: #b8d6ff;
    color: #0963ff;
}

.sk-mark-attendance-table input[type="text"] {
    width: 100%;
    height: 38px;
    padding: 0 13px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-mark-attendance-table input::placeholder {
    color: #8b96ae;
}

.sk-mark-attendance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 18px 32px 24px;
}

.sk-mark-attendance-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 44px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-mark-attendance-actions button:first-child {
    min-width: 102px;
    color: #071553;
    background: #ffffff;
}

.sk-mark-attendance-actions button:last-child {
    min-width: 176px;
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-mark-attendance-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.64;
}

.sk-bulk-attendance-modal {
    width: min(760px, calc(100vw - 42px));
    max-height: calc(100vh - 52px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(7, 21, 83, 0.18);
}

.sk-bulk-attendance-modal form {
    display: grid;
    grid-template-rows: 92px minmax(0, 1fr) 78px;
    max-height: calc(100vh - 52px);
    min-height: 0;
}

.sk-bulk-attendance-body {
    display: grid;
    gap: 24px;
    min-height: 0;
    overflow: hidden;
    padding: 0 32px;
}

.sk-bulk-attendance-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.sk-bulk-attendance-filters label,
.sk-bulk-remarks-field {
    display: grid;
    gap: 9px;
    min-width: 0;
    color: #35456d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-bulk-attendance-filters em,
.sk-bulk-attendance-group em {
    color: #ff2b2b;
    font-style: normal;
}

.sk-bulk-attendance-filters input,
.sk-bulk-attendance-filters select {
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-bulk-attendance-group {
    display: grid;
    gap: 14px;
}

.sk-bulk-attendance-group h3 {
    margin: 0;
    color: #35456d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-bulk-card-grid,
.sk-bulk-status-grid {
    display: grid;
    gap: 28px;
}

.sk-bulk-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sk-bulk-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sk-bulk-choice-card,
.sk-bulk-status-card {
    position: relative;
    display: grid;
    min-width: 0;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

.sk-bulk-choice-card {
    grid-template-columns: 24px 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 6px;
    min-height: 110px;
    padding: 24px 22px 18px;
}

.sk-bulk-choice-card.is-active,
.sk-bulk-status-card.is-active {
    border-color: #0963ff;
    box-shadow: 0 0 0 1px rgba(9, 99, 255, 0.2);
}

.sk-bulk-choice-card input,
.sk-bulk-status-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sk-bulk-radio-dot {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border: 2px solid #7a8ab6;
    border-radius: 6px;
}

.sk-bulk-choice-card.is-active .sk-bulk-radio-dot {
    border-color: #0963ff;
    background: #0963ff;
}

.sk-bulk-choice-card.is-active .sk-bulk-radio-dot::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 3px;
    background: #ffffff;
}

.sk-bulk-choice-card > svg {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: 25px;
    height: 25px;
    color: #0963ff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-bulk-choice-card strong,
.sk-bulk-status-card strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-bulk-choice-card strong {
    font-size: 15px;
}

.sk-bulk-choice-card small,
.sk-bulk-status-card small,
.sk-bulk-remarks-field small {
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    line-height: 1.35;
}

.sk-bulk-choice-card small {
    grid-column: 3;
    font-size: 12px;
}

.sk-bulk-selected-panel {
    display: none;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #fbfdff;
}

.sk-bulk-selected-panel.is-open {
    display: grid;
}

.sk-bulk-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.sk-bulk-selected-head h3 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-bulk-selected-head small {
    flex: 0 0 auto;
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-bulk-selected-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    max-height: 112px;
    overflow-y: auto;
    padding-right: 2px;
}

.sk-bulk-selected-list p {
    grid-column: 1 / -1;
    margin: 0;
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-bulk-user-option {
    display: grid;
    grid-template-columns: 28px 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 46px;
    padding: 0 10px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #071553;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
}

.sk-bulk-user-option.is-selected {
    border-color: #0963ff;
    background: #f3f8ff;
}

.sk-bulk-user-check {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.8px solid #8ea0c9;
    border-radius: 6px;
    color: #ffffff;
}

.sk-bulk-user-option.is-selected .sk-bulk-user-check {
    border-color: #0963ff;
    background: #0963ff;
}

.sk-bulk-user-check svg {
    display: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-bulk-user-option.is-selected .sk-bulk-user-check svg {
    display: block;
}

.sk-bulk-user-option img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.sk-bulk-user-option strong,
.sk-bulk-user-option small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-bulk-user-option strong {
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-bulk-user-option small {
    margin-top: 2px;
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 10px;
}

.sk-bulk-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-height: 68px;
    overflow-y: auto;
}

.sk-bulk-selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 180px;
    height: 30px;
    padding: 0 8px 0 10px;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    color: #0963ff;
    background: #f3f8ff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-bulk-selected-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-bulk-selected-tag button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #0963ff;
    background: #dbe9ff;
    cursor: pointer;
}

.sk-bulk-selected-tag svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.sk-bulk-status-card {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 3px;
    min-height: 82px;
    padding: 18px 20px;
}

.sk-bulk-status-card span {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.sk-bulk-status-card svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-bulk-status-card strong {
    font-size: 14px;
}

.sk-bulk-status-card small {
    font-size: 12px;
}

.sk-bulk-present { color: #16a34a; }
.sk-bulk-present span { background: #e9f8ee; }
.sk-bulk-absent { color: #ff2b2b; }
.sk-bulk-absent span { background: #fff0f0; }
.sk-bulk-late { color: #f97316; }
.sk-bulk-late span { background: #fff4e9; }

.sk-bulk-remarks-field textarea {
    width: 100%;
    min-height: 78px;
    resize: none;
    padding: 14px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    outline: 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-bulk-attendance-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    padding: 10px 32px 24px;
}

.sk-bulk-attendance-actions button {
    height: 46px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-bulk-attendance-actions button:first-child {
    color: #071553;
    background: #ffffff;
}

.sk-bulk-attendance-actions button:last-child {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-bulk-attendance-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.64;
}

.sk-import-attendance-modal {
    width: min(640px, calc(100vw - 42px));
    max-height: calc(100vh - 52px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(7, 21, 83, 0.18);
}

.sk-import-attendance-modal form {
    display: grid;
    grid-template-rows: 78px minmax(0, 1fr) 70px;
    max-height: calc(100vh - 52px);
    min-height: 0;
}

.sk-import-attendance-body {
    display: grid;
    gap: 18px;
    min-height: 0;
    overflow: hidden;
    padding: 0 28px;
}

.sk-import-step {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.sk-import-step h3 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.1;
}

.sk-import-step p {
    margin: 0;
    color: #40517b;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-import-sample-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 238px;
    height: 40px;
    border: 1px solid #9dc2ff;
    border-radius: 6px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

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

.sk-import-divider {
    height: 1px;
    background: #dfe8f5;
}

.sk-import-dropzone {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 218px;
    padding: 22px;
    border: 1.5px dashed #b9cae9;
    border-radius: 8px;
    color: #071553;
    background: #ffffff;
    cursor: pointer;
    text-align: center;
}

.sk-import-dropzone.is-dragover {
    border-color: #0963ff;
    background: #f3f8ff;
}

.sk-import-dropzone input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sk-import-dropzone > svg {
    width: 42px;
    height: 42px;
    color: #0963ff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-import-dropzone strong {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-import-dropzone span,
.sk-import-dropzone small {
    color: #40517b;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-import-dropzone em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 38px;
    border: 1px solid #d5e0f1;
    border-radius: 6px;
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
}

.sk-import-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding: 0 18px;
    border: 1px solid #a9c9ff;
    border-radius: 6px;
    color: #0963ff;
    background: #f3f8ff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-import-info svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-import-attendance-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 28px 24px;
}

.sk-import-attendance-actions button {
    height: 40px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-import-attendance-actions button:first-child {
    min-width: 98px;
    color: #071553;
    background: #ffffff;
}

.sk-import-attendance-actions button:last-child {
    min-width: 112px;
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-import-attendance-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sk-import-attendance-actions .sk-import-back-button {
    min-width: 92px;
    margin-left: auto;
    color: #071553;
    background: #ffffff;
}

.sk-import-upload-view {
    display: grid;
    gap: 18px;
    min-height: 0;
    overflow: hidden;
}

.sk-import-preview-view {
    display: none;
    gap: 14px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
}

.sk-import-attendance-modal.is-preview .sk-import-upload-view {
    display: none;
}

.sk-import-attendance-modal.is-preview .sk-import-preview-view {
    display: grid;
}

.sk-import-preview-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sk-import-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-import-chip strong {
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-import-chip-total {
    color: #40517b;
    background: #f4f7fb;
}

.sk-import-chip-valid {
    color: #15803d;
    background: #e9f8ed;
}

.sk-import-chip-invalid {
    color: #ff2b2b;
    background: #fff1f1;
}

.sk-import-preview-table {
    min-height: 96px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    overflow: auto;
}

.sk-import-preview-table table {
    width: 100%;
    border-collapse: collapse;
}

.sk-import-preview-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 12px;
    border-bottom: 1px solid #dfe8f5;
    color: #40517b;
    background: #f8fafd;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.sk-import-preview-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #eef3fa;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    vertical-align: top;
}

.sk-import-preview-table tr.is-invalid td {
    background: #fffafa;
}

.sk-import-row-ok {
    color: #15803d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
    white-space: nowrap;
}

.sk-import-row-error {
    color: #ff2b2b;
    font-size: 12px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-import-preview-view {
        gap: 10px;
    }

    .sk-import-chip {
        height: 25px;
        padding: 0 10px;
        font-size: 11px;
    }

    .sk-import-preview-table th {
        padding: 6px 10px;
        font-size: 10px;
    }

    .sk-import-preview-table td {
        padding: 6px 10px;
        font-size: 11px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-bulk-attendance-modal {
        width: min(700px, calc(100vw - 32px));
    }

    .sk-bulk-attendance-modal form {
        grid-template-rows: 76px minmax(0, 1fr) 62px;
    }

    .sk-bulk-attendance-body {
        gap: 14px;
        padding: 0 24px;
    }

    .sk-bulk-attendance-filters,
    .sk-bulk-card-grid,
    .sk-bulk-status-grid {
        gap: 14px;
    }

    .sk-bulk-choice-card {
        min-height: 84px;
        padding: 16px 16px 12px;
    }

    .sk-bulk-status-card {
        min-height: 66px;
        padding: 12px 14px;
    }

    .sk-bulk-selected-panel {
        gap: 8px;
        padding: 10px;
    }

    .sk-bulk-selected-list {
        gap: 8px;
        max-height: 90px;
    }

    .sk-bulk-user-option {
        height: 40px;
    }

    .sk-bulk-selected-tags {
        max-height: 48px;
    }

    .sk-bulk-remarks-field textarea {
        min-height: 58px;
    }

    .sk-bulk-attendance-actions {
        gap: 14px;
        padding: 8px 24px 16px;
    }
}

@media (max-width: 760px) {
    .sk-bulk-attendance-modal {
        width: calc(100vw - 20px);
    }

    .sk-bulk-attendance-body {
        gap: 8px;
        padding: 0 14px;
    }

    .sk-bulk-attendance-filters,
    .sk-bulk-card-grid,
    .sk-bulk-status-grid {
        gap: 8px;
    }

    .sk-bulk-attendance-filters input,
    .sk-bulk-attendance-filters select {
        height: 30px;
        padding: 0 8px;
        font-size: 9px;
    }

    .sk-bulk-choice-card {
        grid-template-columns: 16px 18px minmax(0, 1fr);
        column-gap: 8px;
        min-height: 62px;
        padding: 10px 9px 8px;
    }

    .sk-bulk-choice-card > svg {
        width: 17px;
        height: 17px;
    }

    .sk-bulk-choice-card strong,
    .sk-bulk-status-card strong {
        font-size: 9px;
    }

    .sk-bulk-choice-card small,
    .sk-bulk-status-card small {
        font-size: 7px;
    }

    .sk-bulk-selected-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 72px;
    }

    .sk-bulk-user-option {
        grid-template-columns: 18px 20px minmax(0, 1fr);
        gap: 6px;
        height: 32px;
        padding: 0 6px;
    }

    .sk-bulk-user-check,
    .sk-bulk-selected-tag button {
        width: 16px;
        height: 16px;
    }

    .sk-bulk-user-option img {
        width: 20px;
        height: 20px;
    }

    .sk-bulk-user-option strong,
    .sk-bulk-selected-tag {
        font-size: 8px;
    }

    .sk-bulk-user-option small,
    .sk-bulk-selected-head small {
        font-size: 7px;
    }

    .sk-bulk-status-card {
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 7px;
        min-height: 46px;
        padding: 8px;
    }

    .sk-bulk-status-card span {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .sk-bulk-status-card svg {
        width: 14px;
        height: 14px;
    }

    .sk-bulk-remarks-field textarea {
        min-height: 42px;
        padding: 8px;
        font-size: 9px;
    }

    .sk-bulk-attendance-actions {
        gap: 8px;
        padding: 6px 14px 12px;
    }

    .sk-bulk-attendance-actions button {
        height: 32px;
        font-size: 10px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-import-attendance-modal {
        width: min(590px, calc(100vw - 32px));
    }

    .sk-import-attendance-modal form {
        grid-template-rows: 64px minmax(0, 1fr) 58px;
    }

    .sk-import-attendance-body {
        gap: 12px;
        padding: 0 24px;
    }

    .sk-import-step {
        gap: 7px;
    }

    .sk-import-step h3 {
        font-size: 14px;
    }

    .sk-import-step p,
    .sk-import-info {
        font-size: 11px;
    }

    .sk-import-sample-button {
        width: 210px;
        height: 34px;
        font-size: 12px;
    }

    .sk-import-dropzone {
        min-height: 158px;
        gap: 6px;
        padding: 14px;
    }

    .sk-import-dropzone > svg {
        width: 34px;
        height: 34px;
    }

    .sk-import-dropzone strong,
    .sk-import-dropzone em {
        font-size: 12px;
    }

    .sk-import-dropzone em {
        min-width: 116px;
        height: 32px;
    }

    .sk-import-dropzone span,
    .sk-import-dropzone small {
        font-size: 10px;
    }

    .sk-import-info {
        min-height: 36px;
        padding: 0 14px;
    }

    .sk-import-attendance-actions {
        padding: 8px 24px 16px;
    }
}

@media (max-width: 760px) {
    .sk-import-attendance-modal {
        width: calc(100vw - 20px);
    }

    .sk-import-attendance-body {
        gap: 8px;
        padding: 0 14px;
    }

    .sk-import-step h3 {
        font-size: 11px;
    }

    .sk-import-step p,
    .sk-import-info {
        font-size: 8px;
    }

    .sk-import-sample-button {
        width: 154px;
        height: 28px;
        gap: 6px;
        font-size: 8px;
    }

    .sk-import-sample-button svg {
        width: 13px;
        height: 13px;
    }

    .sk-import-dropzone {
        min-height: 112px;
        gap: 4px;
        padding: 8px;
    }

    .sk-import-dropzone > svg {
        width: 24px;
        height: 24px;
    }

    .sk-import-dropzone strong,
    .sk-import-dropzone em {
        font-size: 8px;
    }

    .sk-import-dropzone em {
        min-width: 86px;
        height: 24px;
    }

    .sk-import-dropzone span,
    .sk-import-dropzone small {
        font-size: 7px;
    }

    .sk-import-info {
        min-height: 28px;
        gap: 7px;
        padding: 0 9px;
    }

    .sk-import-info svg {
        width: 13px;
        height: 13px;
    }

    .sk-import-attendance-actions {
        padding: 6px 14px 12px;
    }

    .sk-import-attendance-actions button {
        height: 30px;
        font-size: 9px;
    }

    .sk-import-attendance-actions button:first-child {
        min-width: 74px;
    }

.sk-import-attendance-actions button:last-child {
    min-width: 82px;
}
}

.sk-exams-body {
    background: #f7fbff;
}

.sk-exams-shell {
    grid-template-rows: 82px minmax(0, 1fr);
}

.sk-exams-workspace {
    grid-template-columns: 250px minmax(0, 1fr);
}

.sk-exams-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 24px;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    padding: 22px 24px 0 28px;
}

.sk-exams-titlebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    min-width: 0;
}

.sk-exams-secondary-button svg,
.sk-exams-primary-button svg,
.sk-exams-search svg,
.sk-exams-filters button svg,
.sk-exams-side-card svg,
.sk-exam-row-actions svg,
.sk-exam-form-modal svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-exams-titlebar h1 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 32px;
    line-height: 1;
}

.sk-exams-titlebar p {
    margin: 8px 0 0;
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-exams-title-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 10px;
}

.sk-exams-secondary-button,
.sk-exams-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-exams-secondary-button {
    min-width: 156px;
    border: 1px solid #dfe8f5;
    color: #071553;
    background: #ffffff;
}

.sk-exams-primary-button {
    min-width: 156px;
    border: 1px solid #0963ff;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 12px 24px rgba(9, 99, 255, 0.18);
}

.sk-exams-secondary-button svg,
.sk-exams-primary-button svg,
.sk-exams-filters button svg {
    width: 18px;
    height: 18px;
}

.sk-exams-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 22px;
    min-width: 0;
    min-height: 0;
}

.sk-exams-content,
.sk-exams-sidebar {
    min-width: 0;
    min-height: 0;
}

.sk-exams-content {
    display: grid;
    grid-template-rows: 82px 78px minmax(0, 1fr);
    gap: 4px;
}

.sk-exams-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    min-width: 0;
}

.sk-exams-stat {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 82px;
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, currentColor 22%, #ffffff);
    border-radius: 13px;
    background: #ffffff;
}

.sk-exams-stat > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 12%, #ffffff);
}

.sk-exams-stat svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sk-exams-stat svg path,
.sk-exams-stat svg rect,
.sk-exams-stat svg circle,
.sk-exams-stat svg line,
.sk-exams-stat svg polyline,
.sk-exams-stat svg ellipse {
    fill: none;
}

.sk-exams-stat small {
    display: block;
    margin-bottom: 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-exams-stat strong {
    display: block;
    color: currentColor;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
}

.sk-exams-stat-blue { color: #0963ff; background: #fbfdff; }
.sk-exams-stat-green { color: #14a344; background: #fbfffb; }
.sk-exams-stat-orange { color: #ff6b00; background: #fffdf9; }
.sk-exams-stat-purple { color: #6d36f2; background: #fefdff; }

@supports not (border-color: color-mix(in srgb, red 22%, white)) {
    .sk-exams-stat-blue { border-color: #d7e5ff; }
    .sk-exams-stat-green { border-color: #d3f0dd; }
    .sk-exams-stat-orange { border-color: #ffe0c2; }
    .sk-exams-stat-purple { border-color: #e2d4fb; }
}

.sk-exams-filters {
    display: grid;
    grid-template-columns: 126px 1fr 1fr 1fr minmax(230px, 1.7fr) 126px;
    align-items: center;
    gap: 18px;
    min-width: 0;
    min-height: 0;
}

.sk-exams-filters label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.sk-exams-filters label.sk-exams-rows-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-exams-filters label.sk-exams-rows-field span {
    flex: 0 0 auto;
    overflow: hidden;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sk-exams-filters label.sk-exams-rows-field select {
    width: 64px;
    flex: 0 0 auto;
}

.sk-exams-filters select,
.sk-exams-filters input {
    width: 100%;
    min-width: 0;
    height: 42px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-exams-filters select {
    padding: 0 14px;
}

.sk-exams-filters input {
    padding: 0 42px 0 14px;
}

.sk-exams-search {
    position: relative;
}

.sk-exams-search svg {
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 18px;
    height: 18px;
    color: #596a96;
}

.sk-exams-filters input::placeholder {
    color: #7a8399;
}

.sk-exams-filters button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #071553;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-exams-table-card {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 52px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 40, 92, 0.06);
}

.sk-exams-table-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #c5d4e8 #f6f9fd;
}

.sk-exams-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sk-exams-table-wrap::-webkit-scrollbar-track {
    background: #f6f9fd;
}

.sk-exams-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c5d4e8;
}

.sk-exams-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-exams-table th,
.sk-exams-table td {
    height: 52px;
    overflow: hidden;
    padding: 0 14px;
    border-bottom: 1px solid #e6edf6;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-exams-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 46px;
    color: #071553;
    background: #fbfdff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-exams-table td {
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-exams-table th:nth-child(1),
.sk-exams-table td:nth-child(1) { width: 42px; }
.sk-exams-table th:nth-child(2),
.sk-exams-table td:nth-child(2) { width: 18%; }
.sk-exams-table th:nth-child(3),
.sk-exams-table td:nth-child(3) { width: 86px; }
.sk-exams-table th:nth-child(4),
.sk-exams-table td:nth-child(4) { width: 110px; }
.sk-exams-table th:nth-child(5),
.sk-exams-table td:nth-child(5) { width: 116px; text-align: center; }
.sk-exams-table th:nth-child(8),
.sk-exams-table td:nth-child(8) { width: 150px; }
.sk-exams-table th:nth-child(9),
.sk-exams-table td:nth-child(9) { width: 160px; }

.sk-exam-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
}

.sk-exam-status.is-upcoming { color: #0963ff; background: #eaf2ff; }
.sk-exam-status.is-ongoing { color: #ff6b00; background: #fff0e3; }
.sk-exam-status.is-completed { color: #139447; background: #e6f8ed; }
.sk-exam-status.is-result-published { color: #139447; background: #dff7e9; min-width: 112px; }
.sk-exam-status.is-cancelled { color: #ff2b2b; background: #fff0f0; }

.sk-exam-row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sk-exam-row-actions button,
.sk-exam-row-actions a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #dbe5f2;
    border-radius: 7px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
}

.sk-exam-row-actions .exam-cancel-btn {
    color: #ff2b2b;
    border-color: #ffd2d2;
}

.sk-exam-row-actions svg {
    width: 16px;
    height: 16px;
}

.sk-exams-empty {
    height: 120px !important;
    color: #53638d;
    text-align: center !important;
}

.sk-exams-empty.is-error {
    color: #ff2b2b;
}

.sk-exams-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 0 18px;
}

.sk-exams-table-footer p {
    margin: 0;
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-exams-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-exams-pagination button {
    min-width: 30px;
    height: 30px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #071553;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-exams-pagination button.is-active {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-exams-sidebar {
    display: grid;
    grid-template-rows: auto auto;
    gap: 14px;
    align-content: start;
}

.sk-exams-side-card {
    display: grid;
    gap: 14px;
    padding: 22px 18px;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 40, 92, 0.06);
}

.sk-exams-side-card h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 18px;
}

.sk-exams-side-card h2 svg {
    width: 22px;
    height: 22px;
}

.sk-exams-deadlines button {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #071553;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.sk-exam-deadlines-overlay {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 24px);
    background: rgba(20, 31, 58, 0.46);
    backdrop-filter: blur(2px);
}

.sk-exam-deadlines-overlay.is-open { display: flex; }

.sk-exam-deadlines-modal {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(92vw, 880px);
    max-height: min(86vh, 720px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(7, 21, 83, .2);
}

.sk-exam-deadlines-modal > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(18px, 2.3vw, 28px) clamp(18px, 2.5vw, 30px) 14px;
}

.sk-exam-deadlines-modal h2 { display:flex; align-items:center; gap:10px; margin:0; color:#071553; font:20px "InterBold",Arial,sans-serif; }
.sk-exam-deadlines-modal h2 svg { width:22px; height:22px; fill:none; stroke:#0963ff; stroke-width:2; }
.sk-exam-deadlines-modal header p { margin:8px 0 0; color:#53638d; font:12px "InterMedium",Arial,sans-serif; }
.sk-exam-deadlines-modal header button { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; padding:0; border:1px solid #dfe8f5; border-radius:8px; color:#53638d; background:#fff; cursor:pointer; }
.sk-exam-deadlines-modal header button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; }
.sk-exam-deadlines-legend { display:flex; gap:8px; padding:0 clamp(18px,2.5vw,30px) 14px; border-bottom:1px solid #e6edf6; }
.sk-exam-deadlines-legend span,.sk-exam-deadline-state { padding:4px 9px; border-radius:999px; font:10px "InterBold",Arial,sans-serif; text-transform:capitalize; }
.sk-exam-deadlines-legend .is-upcoming,.sk-exam-deadline-item.is-upcoming .sk-exam-deadline-state { color:#0963ff; background:#eaf2ff; }
.sk-exam-deadlines-legend .is-overdue,.sk-exam-deadline-item.is-overdue .sk-exam-deadline-state { color:#d92d20; background:#fff0ee; }
.sk-exam-deadlines-legend .is-completed,.sk-exam-deadline-item.is-completed .sk-exam-deadline-state { color:#128044; background:#eaf8f0; }
.sk-exam-deadlines-body { min-height:180px; overflow:auto; overscroll-behavior:contain; padding:12px clamp(14px,2vw,24px) 20px; outline:none; }
.sk-exam-deadline-item { display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:92px; padding:13px 14px; border-bottom:1px solid #e6edf6; }
.sk-exam-deadline-date { display:grid; place-items:center; min-height:58px; border:1px solid #dfe8f5; border-radius:10px; color:#071553; background:#f8faff; }
.sk-exam-deadline-date strong { font:20px "InterBold",Arial,sans-serif; }
.sk-exam-deadline-date small { font:9px "InterBold",Arial,sans-serif; text-transform:uppercase; }
.sk-exam-deadline-item h3 { margin:5px 0 3px; color:#071553; font:14px "InterBold",Arial,sans-serif; }
.sk-exam-deadline-item p,.sk-exam-deadline-item div>small { margin:0; color:#53638d; font:11px "InterMedium",Arial,sans-serif; }
.sk-exam-deadline-item div>small { display:block; margin-top:5px; }
.sk-exam-deadline-item>a { display:flex; align-items:center; gap:6px; min-height:34px; padding:0 11px; border:1px solid #dfe8f5; border-radius:7px; color:#0963ff; font:11px "InterBold",Arial,sans-serif; text-decoration:none; white-space:nowrap; }
.sk-exam-deadline-item>a svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.sk-exam-deadlines-empty { display:grid; place-items:center; align-content:center; min-height:210px; color:#53638d; text-align:center; }
.sk-exam-deadlines-empty span svg { width:34px; height:34px; fill:none; stroke:#0963ff; stroke-width:1.8; }
.sk-exam-deadlines-empty strong { margin-top:10px; color:#071553; font:15px "InterBold",Arial,sans-serif; }
.sk-exam-deadlines-empty p { max-width:360px; margin:7px 0 0; font:11px "InterMedium",Arial,sans-serif; }

@media (max-width: 800px), (max-height: 650px) {
    .sk-exam-deadlines-modal { max-height:90vh; }
    .sk-exam-deadline-item { grid-template-columns:50px minmax(0,1fr) auto; gap:10px; min-height:74px; padding:9px 7px; }
    .sk-exam-deadline-date { min-height:48px; }
    .sk-exam-deadline-date strong { font-size:16px; }
    .sk-exam-deadline-item>a { padding:0 8px; font-size:9px; }
}

.sk-exams-actions a.sk-attendance-action {
    text-decoration: none;
}

.sk-exams-deadlines {
    gap: 0;
}

#exam-deadlines-list {
    max-height: clamp(160px, 24vh, 320px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c5d4e8 #f6f9fd;
}

#exam-deadlines-list::-webkit-scrollbar {
    width: 6px;
}

#exam-deadlines-list::-webkit-scrollbar-track {
    background: #f6f9fd;
}

#exam-deadlines-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c5d4e8;
}

.sk-exams-deadlines article {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 18px 0;
    border-bottom: 1px solid #e6edf6;
}

.sk-exams-deadlines article i {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
}

.sk-exams-dot-blue { background: #0963ff; }
.sk-exams-dot-orange { background: #ff6b00; }
.sk-exams-dot-green { background: #12a650; }

.sk-exams-deadlines p {
    margin: 0;
    min-width: 0;
}

.sk-exams-deadlines strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-exams-deadlines small {
    display: block;
    margin-top: 8px;
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-exams-deadlines button {
    justify-content: center;
    margin-top: 20px;
    border-color: #0963ff;
    color: #0963ff;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-exam-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 31, 58, 0.42);
    backdrop-filter: blur(2px);
}

.sk-exam-modal-overlay.is-open {
    display: flex;
}

.sk-exam-form-modal {
    width: min(980px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(7, 21, 83, 0.18);
}

.sk-exam-form-modal form {
    display: grid;
    grid-template-rows: 92px minmax(0, 1fr) 74px;
    max-height: calc(100vh - 48px);
}

.sk-exam-form-modal header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 30px 0;
}

.sk-exam-form-modal h2 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
}

.sk-exam-form-modal header p {
    margin: 8px 0 0;
    color: #53638d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-exam-form-modal header a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #48609b;
}

.sk-exam-form-modal header svg {
    width: 20px;
    height: 20px;
}

.sk-exam-form-body {
    display: grid;
    gap: 18px;
    min-height: 0;
    overflow-y: auto;
    padding: 0 30px;
}

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

.sk-exam-form-grid-bottom {
    grid-template-columns: minmax(180px, .4fr) minmax(0, 1fr);
}

.sk-exam-form-grid label {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: #35456d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-exam-form-modal input,
.sk-exam-form-modal select,
.sk-exam-form-modal textarea {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-exam-form-modal textarea {
    height: 72px;
    padding: 12px;
    resize: none;
}

.sk-exam-subject-container {
    display: grid;
    gap: 10px;
}

.sk-exam-subject-item {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) repeat(7, minmax(90px, 1fr));
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #fbfdff;
}

.sk-exam-subject-item strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-exam-form-modal footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 14px 30px 22px;
}

.sk-exam-form-modal footer button {
    min-width: 118px;
    height: 42px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-exam-form-modal footer button:first-child {
    color: #071553;
    background: #ffffff;
}

.sk-exam-form-modal footer button:last-child {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-exam-settings-modal {
    width: min(820px, calc(100vw - 36px));
}

.sk-exam-settings-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sk-exam-settings-modal .sk-single-time-field input:disabled {
    color: #40517b;
    -webkit-text-fill-color: #40517b;
}

.sk-exam-settings-modal .sk-attendance-settings-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.64;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-exams-shell {
        grid-template-rows: 74px minmax(0, 1fr);
    }

    .sk-exams-main {
        grid-template-rows: auto minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 16px 18px 0 22px;
    }

    .sk-exams-titlebar h1 {
        font-size: 26px;
    }

    .sk-exams-titlebar p {
        margin-top: 6px;
        font-size: 12px;
    }

    .sk-exams-title-actions {
        gap: 10px;
        padding-top: 4px;
    }

    .sk-exams-secondary-button,
    .sk-exams-primary-button {
        height: 36px;
        min-width: 132px;
        font-size: 12px;
    }

    .sk-exams-layout {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 14px;
    }

    .sk-exams-content {
        grid-template-rows: 62px 64px minmax(0, 1fr);
        gap: 2px;
    }

    .sk-exams-stat-grid {
        gap: 18px;
    }

    .sk-exams-stat {
        grid-template-columns: 44px minmax(0, 1fr);
        height: 62px;
        padding: 7px 11px;
        border-radius: 10px;
    }

    .sk-exams-stat > span {
        width: 36px;
        height: 36px;
    }

    .sk-exams-stat small {
        margin-bottom: 4px;
        font-size: 10px;
    }

    .sk-exams-stat strong {
        font-size: 18px;
    }

    .sk-exams-filters {
        grid-template-columns: 112px 1fr 1fr 1fr minmax(180px, 1.4fr) 112px;
        gap: 12px;
    }

    .sk-exams-filters select,
    .sk-exams-filters input,
    .sk-exams-filters button {
        height: 34px;
        font-size: 11px;
    }

    .sk-exams-filters label.sk-exams-rows-field span {
        font-size: 11px;
    }

    .sk-exams-filters label.sk-exams-rows-field select {
        width: 56px;
    }

    .sk-exams-search svg {
        bottom: 8px;
        width: 15px;
        height: 15px;
    }

    .sk-exams-table th,
    .sk-exams-table td {
        height: 42px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sk-exams-table th {
        height: 36px;
    }

    .sk-exam-row-actions {
        gap: 4px;
    }

    .sk-exam-row-actions button,
    .sk-exam-row-actions a {
        width: 24px;
        height: 24px;
    }

    .sk-exams-side-card {
        padding: 16px 14px;
    }

    .sk-exams-deadlines button {
        height: 36px;
        font-size: 12px;
    }
}

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

@supports not (background: color-mix(in srgb, red 10%, white)) {
    .sk-attendance-stat > span {
        background: #eef5ff;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-attendance-shell {
        grid-template-rows: 74px minmax(0, 1fr);
    }

    .sk-attendance-body .sk-dashboard-topbar {
        grid-template-columns: minmax(190px, 320px) minmax(220px, 1fr) minmax(210px, 320px);
        gap: 18px;
        min-height: 74px;
        padding: 10px 28px;
    }

    .sk-attendance-body .sk-school-identity {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 14px;
    }

    .sk-attendance-body .sk-school-logo {
        width: 54px;
        height: 54px;
    }

    .sk-attendance-body .sk-school-identity strong {
        max-width: 210px;
        font-size: 18px;
    }

    .sk-attendance-body .sk-dashboard-search {
        height: 48px;
        padding: 0 16px;
    }

    .sk-attendance-body .sk-dashboard-search svg {
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }

    .sk-attendance-body .sk-dashboard-search input {
        font-size: 16px;
    }

    .sk-attendance-workspace {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .sk-attendance-body .sk-students-sidebar {
        padding: 7px 8px 9px;
    }

    .sk-attendance-body .sk-students-nav {
        gap: 1px;
    }

    .sk-attendance-body .sk-students-nav a {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 8px;
        height: 26px;
        padding: 0 11px;
        border-radius: 9px;
        font-size: 10px;
    }

    .sk-attendance-body .sk-students-nav a::before {
        left: -8px;
        top: 4px;
        height: 14px;
    }

    .sk-attendance-body .sk-students-nav img {
        width: 13px;
        height: 13px;
    }

    .sk-attendance-body .sk-students-nav-bottom {
        padding-top: 8px;
    }

    .sk-attendance-main {
        grid-template-rows: 44px minmax(0, 1fr) 18px;
        gap: 8px;
        padding: 14px 18px 0;
    }

    .sk-attendance-heading h1 {
        font-size: 24px;
    }

    .sk-attendance-heading p {
        margin-top: 6px;
        font-size: 12px;
    }

    .sk-attendance-heading-actions {
        gap: 12px;
    }

    .sk-attendance-secondary-button {
        width: 174px;
        height: 34px;
        gap: 8px;
        font-size: 11px;
    }

    .sk-attendance-primary-button {
        width: 210px;
        height: 34px;
        padding: 0 14px 0 30px;
        font-size: 11px;
    }

    .sk-attendance-mark-dropdown {
        width: 210px;
        padding: 7px 0;
    }

    .sk-attendance-mark-dropdown button {
        gap: 11px;
        height: 38px;
        padding: 0 13px;
        font-size: 11px;
    }

    .sk-attendance-mark-dropdown svg {
        width: 17px;
        height: 17px;
    }

    .sk-attendance-secondary-button svg,
    .sk-attendance-primary-button svg {
        width: 15px;
        height: 15px;
    }

    .sk-attendance-layout {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 14px;
    }

    .sk-attendance-board {
        grid-template-rows: 38px auto minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-attendance-tabs {
        gap: 32px;
        padding: 0 20px;
    }

    .sk-attendance-tabs button {
        height: 38px;
        font-size: 11px;
    }

    .sk-attendance-tab-panel {
        grid-template-rows: 88px 58px minmax(0, 1fr) 34px;
    }

    .sk-attendance-stats {
        gap: 10px;
        padding: 14px 12px;
    }

    .sk-attendance-stat {
        grid-template-columns: 42px minmax(0, 1fr);
        height: 60px;
        padding: 8px 9px;
    }

    .sk-attendance-stat > span {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .sk-attendance-stat svg {
        width: 21px;
        height: 21px;
    }

    .sk-attendance-stat strong {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .sk-attendance-stat b {
        font-size: 18px;
    }

    .sk-attendance-stat small {
        margin-top: 4px;
        font-size: 8px;
    }

    .sk-attendance-filters {
        grid-template-columns: 130px 1fr 1fr .9fr 78px;
        gap: 10px;
        padding: 10px 12px;
    }

    .sk-attendance-teacher-filters,
    .sk-attendance-staff-filters {
        grid-template-columns: 130px 1fr .9fr 78px;
    }

    .sk-attendance-filters label {
        gap: 5px;
        font-size: 8px;
    }

    .sk-attendance-filters input,
    .sk-attendance-filters select {
        height: 30px;
        padding: 0 9px;
        font-size: 9px;
    }

    .sk-attendance-search-button,
    .sk-attendance-reset-button {
        height: 32px;
        gap: 6px;
        font-size: 9px;
    }

    .sk-attendance-search-button svg,
    .sk-attendance-reset-button svg {
        width: 13px;
        height: 13px;
    }

    .sk-attendance-table-card {
        padding: 8px 12px 0;
    }

    .sk-attendance-table th {
        height: 30px;
        font-size: 9px;
    }

    .sk-attendance-table td {
        height: 31px;
        padding: 0 7px;
        font-size: 9px;
    }

    .sk-attendance-avatar {
        width: 24px;
        height: 24px;
        font-size: 8px;
    }

    .sk-attendance-person {
        gap: 8px;
    }

    .sk-attendance-status {
        min-width: 50px;
        height: 20px;
        border-radius: 6px;
        font-size: 8px;
    }

    .sk-attendance-row-actions {
        gap: 4px;
    }

    .sk-attendance-row-actions button,
    .sk-attendance-row-actions a {
        width: 24px;
        height: 24px;
    }

    .sk-attendance-row-actions svg {
        width: 12px;
        height: 12px;
    }

    .sk-attendance-table-footer {
        gap: 12px;
        padding: 0 12px;
        font-size: 9px;
    }

    .sk-attendance-table-footer select {
        width: 56px;
        height: 26px;
        font-size: 9px;
    }

    .sk-attendance-pagination {
        gap: 5px;
    }

    .sk-attendance-pagination button,
    .sk-attendance-pagination span {
        min-width: 23px;
        height: 23px;
        border-radius: 6px;
        font-size: 9px;
    }

    .sk-attendance-sidebar {
        grid-template-rows: 198px 136px minmax(0, 1fr);
        gap: 10px;
    }

    .sk-attendance-rules-strip {
        gap: 10px;
        height: 24px;
        padding: 0 12px;
        font-size: 9px;
    }

    .sk-attendance-rules-strip strong,
    .sk-attendance-rules-strip span,
    .sk-attendance-rules-strip span b {
        font-size: 9px;
    }

    .sk-attendance-side-card {
        padding: 13px 10px 10px;
        border-radius: 8px;
    }

    .sk-attendance-side-card h2 {
        margin-bottom: 11px;
        font-size: 11px;
    }

    .sk-attendance-action {
        grid-template-columns: 26px minmax(0, 1fr) 14px;
        gap: 8px;
        height: 38px;
        margin-bottom: 8px;
        padding: 0 8px;
        border-radius: 7px;
    }

    .sk-attendance-action svg {
        width: 15px;
        height: 15px;
    }

    .sk-attendance-action strong {
        font-size: 8px;
    }

    .sk-attendance-action small {
        margin-top: 3px;
        font-size: 7px;
    }

    .sk-attendance-today div {
        height: 29px;
    }

    .sk-attendance-today dt,
    .sk-attendance-today dd {
        font-size: 9px;
    }

    .sk-attendance-today i {
        width: 6px;
        height: 6px;
    }

    .sk-attendance-activity {
        grid-template-rows: auto minmax(0, 1fr) 28px;
    }

    .sk-attendance-activity article {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
        padding-bottom: 9px;
        margin-bottom: 9px;
    }

    .sk-attendance-activity article > span {
        width: 24px;
        height: 24px;
    }

    .sk-attendance-activity svg {
        width: 13px;
        height: 13px;
    }

    .sk-attendance-activity strong {
        font-size: 8px;
    }

    .sk-attendance-activity small {
        margin-top: 3px;
        font-size: 7px;
    }

    .sk-attendance-view-all {
        height: 28px;
        gap: 6px;
        font-size: 8px;
    }

    .sk-attendance-settings-modal {
        width: min(668px, calc(100vw - 32px));
        border-radius: 10px;
    }

    .sk-attendance-settings-modal form {
        grid-template-rows: 62px 48px minmax(0, 1fr) 66px;
    }

    .sk-attendance-settings-head {
        padding: 18px 28px 0;
    }

    .sk-attendance-settings-head h2 {
        font-size: 18px;
    }

    .sk-attendance-settings-head p {
        margin-top: 8px;
        font-size: 11px;
    }

    .sk-attendance-settings-close {
        width: 24px;
        height: 24px;
    }

    .sk-attendance-settings-close svg {
        width: 17px;
        height: 17px;
    }

    .sk-attendance-settings-tabs {
        gap: 20px;
        padding: 0 28px;
    }

    .sk-attendance-settings-tabs button {
        height: 48px;
        font-size: 11px;
    }

    .sk-attendance-settings-body {
        padding: 22px 30px 0;
    }

    .sk-settings-section-title {
        padding-bottom: 18px;
    }

    .sk-attendance-mode-row {
        grid-template-columns: minmax(0, 1fr) 144px;
        padding-bottom: 19px;
    }

    .sk-attendance-settings-body h3,
    .sk-attendance-toggle-row strong,
    .sk-attendance-time-split label > strong {
        font-size: 12px;
    }

    .sk-attendance-settings-body p,
    .sk-attendance-toggle-row small,
    .sk-attendance-time-split label > small,
    .sk-attendance-defaults h3 span {
        margin-top: 8px;
        font-size: 10px;
    }

    .sk-attendance-mode-row select {
        width: 144px;
        height: 36px;
        font-size: 11px;
    }

    .sk-attendance-hours-grid {
        gap: 14px 16px;
        padding: 18px 0;
    }

    .sk-attendance-hours-grid label {
        gap: 7px;
    }

    .sk-attendance-hours-grid strong {
        font-size: 11px;
    }

    .sk-attendance-hours-grid span,
    .sk-single-time-field {
        height: 36px;
        padding: 0 11px;
    }

    .sk-attendance-hours-grid input,
    .sk-single-time-field input {
        font-size: 11px;
    }

    .sk-attendance-hours-grid svg,
    .sk-single-time-field svg {
        width: 14px;
        height: 14px;
    }

    .sk-attendance-defaults {
        padding: 19px 0 17px;
    }

    .sk-attendance-status-options {
        gap: 16px;
        margin-top: 13px;
    }

    .sk-setting-status {
        gap: 12px;
        height: 42px;
        padding: 0 13px;
    }

    .sk-setting-status span {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .sk-setting-status svg {
        width: 13px;
        height: 13px;
    }

    .sk-setting-status strong {
        font-size: 11px;
    }

    .sk-attendance-toggle-row {
        padding: 16px 20px 16px 0;
    }

    .sk-attendance-toggle-row + .sk-attendance-toggle-row {
        padding-left: 20px;
    }

    .sk-attendance-toggle-row i {
        width: 35px;
        height: 20px;
    }

    .sk-attendance-toggle-row i::after {
        width: 14px;
        height: 14px;
    }

    .sk-attendance-toggle-row input:checked + i::after {
        transform: translateX(15px);
    }

    .sk-attendance-time-split {
        padding: 18px 0;
    }

    .sk-attendance-time-split label:first-child {
        padding-right: 20px;
    }

    .sk-attendance-time-split label:last-child {
        padding-left: 20px;
    }

    .sk-attendance-time-split label > span {
        height: 38px;
        margin-top: 8px;
        padding: 0 12px;
    }

    .sk-attendance-time-split input {
        font-size: 12px;
    }

    .sk-attendance-time-split select {
        height: 38px;
        margin-top: 8px;
        padding: 0 12px;
        font-size: 12px;
    }

    .sk-attendance-notification-row {
        padding: 16px 0 18px;
    }

    .sk-attendance-settings-actions {
        gap: 12px;
        padding: 15px 30px 22px;
    }

    .sk-attendance-settings-actions button {
        min-width: 92px;
        height: 38px;
        font-size: 12px;
    }

    .sk-attendance-settings-actions button:last-child {
        min-width: 132px;
    }

    .sk-mark-attendance-modal {
        width: min(850px, calc(100vw - 32px));
        border-radius: 10px;
    }

    .sk-mark-attendance-modal form {
        grid-template-rows: 72px 96px minmax(0, 1fr) 64px;
    }

    .sk-mark-attendance-head {
        padding: 24px 26px 0;
    }

    .sk-mark-attendance-head h2 {
        font-size: 19px;
    }

    .sk-mark-attendance-head p {
        margin-top: 9px;
        font-size: 11px;
    }

    .sk-mark-attendance-filters {
        gap: 18px;
        margin: 0 26px;
        padding: 15px 14px 20px;
    }

    .sk-mark-attendance-filters label {
        gap: 6px;
        font-size: 9px;
    }

    .sk-mark-attendance-filters input,
    .sk-mark-attendance-filters select {
        height: 34px;
        padding: 0 10px;
        font-size: 10px;
    }

    .sk-mark-attendance-table-wrap {
        margin: 0 26px;
    }

    .sk-mark-attendance-table th {
        height: 36px;
        font-size: 9px;
    }

    .sk-mark-attendance-table td {
        height: 42px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sk-mark-attendance-person {
        gap: 9px;
    }

    .sk-mark-attendance-person img {
        width: 28px;
        height: 28px;
    }

    .sk-mark-status-select {
        width: 104px;
        height: 29px;
        padding: 0 9px;
        font-size: 9px;
    }

    .sk-mark-attendance-table input[type="text"] {
        height: 30px;
        padding: 0 10px;
        font-size: 9px;
    }

    .sk-mark-attendance-actions {
        gap: 12px;
        padding: 13px 26px 18px;
    }

    .sk-mark-attendance-actions button {
        height: 36px;
        border-radius: 6px;
        font-size: 11px;
    }

    .sk-mark-attendance-actions button:first-child {
        min-width: 84px;
    }

    .sk-mark-attendance-actions button:last-child {
        min-width: 142px;
    }
}

@media (max-width: 760px) {
    .sk-attendance-shell {
        grid-template-rows: 64px minmax(0, 1fr);
    }

    .sk-attendance-body .sk-dashboard-topbar {
        grid-template-columns: minmax(120px, 1fr) minmax(90px, 1fr) minmax(86px, auto);
        gap: 6px;
        min-height: 64px;
        padding: 6px 10px;
    }

    .sk-attendance-body .sk-school-identity {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 7px;
    }

    .sk-attendance-body .sk-school-logo {
        width: 38px;
        height: 38px;
    }

    .sk-attendance-body .sk-school-identity strong {
        max-width: 110px;
        font-size: 11px;
    }

    .sk-attendance-body .sk-dashboard-search {
        height: 34px;
        padding: 0 8px;
    }

    .sk-attendance-body .sk-dashboard-search svg {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

    .sk-attendance-body .sk-dashboard-search input {
        font-size: 10px;
    }

    .sk-attendance-workspace {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sk-attendance-body .sk-students-sidebar {
        padding: 9px 6px;
    }

    .sk-attendance-body .sk-students-nav {
        gap: 3px;
    }

    .sk-attendance-body .sk-students-nav a {
        grid-template-columns: 15px minmax(0, 1fr);
        gap: 7px;
        height: 26px;
        padding: 0 8px;
        border-radius: 7px;
        font-size: 9px;
    }

    .sk-attendance-body .sk-students-nav a::before {
        left: -6px;
        top: 6px;
        width: 3px;
        height: 15px;
    }

    .sk-attendance-body .sk-students-nav img {
        width: 14px;
        height: 14px;
    }

    .sk-attendance-body .sk-students-nav-bottom {
        padding-top: 8px;
    }

    .sk-attendance-main {
        grid-template-rows: 28px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 8px 7px 0;
    }

    .sk-attendance-heading h1 {
        font-size: 13px;
    }

    .sk-attendance-heading p {
        margin-top: 4px;
        font-size: 6px;
    }

    .sk-attendance-heading-actions {
        gap: 5px;
    }

    .sk-attendance-secondary-button {
        width: 84px;
        height: 22px;
        gap: 3px;
        border-radius: 5px;
        font-size: 5px;
    }

    .sk-attendance-primary-button {
        width: 94px;
        height: 22px;
        padding: 0 6px 0 12px;
        border-radius: 5px;
        font-size: 5px;
    }

    .sk-attendance-mark-dropdown {
        top: calc(100% + 5px);
        width: 116px;
        padding: 4px 0;
        border-radius: 5px;
    }

    .sk-attendance-mark-dropdown button {
        gap: 6px;
        height: 22px;
        padding: 0 7px;
        font-size: 6px;
    }

    .sk-attendance-mark-dropdown svg {
        width: 10px;
        height: 10px;
    }

    .sk-attendance-secondary-button svg,
    .sk-attendance-primary-button svg {
        width: 8px;
        height: 8px;
    }

    .sk-attendance-layout {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: 5px;
    }

    .sk-attendance-board {
        grid-template-rows: 22px auto minmax(0, 1fr);
        border-radius: 6px;
    }

    .sk-attendance-tabs {
        gap: 13px;
        padding: 0 8px;
    }

    .sk-attendance-tabs button {
        height: 22px;
        font-size: 6px;
    }

    .sk-attendance-tabs button.is-active::after {
        height: 2px;
    }

    .sk-attendance-tab-panel {
        grid-template-rows: 48px 34px minmax(0, 1fr) 20px;
    }

    .sk-attendance-stats {
        gap: 4px;
        padding: 7px 6px;
    }

    .sk-attendance-stat {
        grid-template-columns: 18px minmax(0, 1fr);
        height: 34px;
        padding: 4px;
        border-radius: 5px;
    }

    .sk-attendance-stat > span {
        width: 15px;
        height: 15px;
        border-radius: 5px;
    }

    .sk-attendance-stat svg {
        width: 9px;
        height: 9px;
    }

    .sk-attendance-stat strong {
        margin-bottom: 2px;
        font-size: 4px;
    }

    .sk-attendance-stat b {
        font-size: 8px;
    }

    .sk-attendance-stat small {
        margin-top: 2px;
        font-size: 4px;
    }

    .sk-attendance-filters {
        grid-template-columns: 55px 1fr 1fr .8fr 32px;
        gap: 4px;
        padding: 5px 6px;
    }

    .sk-attendance-teacher-filters,
    .sk-attendance-staff-filters {
        grid-template-columns: 55px 1fr .8fr 32px;
    }

    .sk-attendance-filters label {
        gap: 2px;
        font-size: 4px;
    }

    .sk-attendance-filters input,
    .sk-attendance-filters select {
        height: 18px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-attendance-search-button,
    .sk-attendance-reset-button {
        height: 19px;
        gap: 2px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-attendance-search-button svg,
    .sk-attendance-reset-button svg {
        width: 6px;
        height: 6px;
    }

    .sk-attendance-table-card {
        padding: 4px 6px 0;
    }

    .sk-attendance-table th {
        height: 16px;
        font-size: 4px;
    }

    .sk-attendance-table td {
        height: 17px;
        padding: 0 3px;
        font-size: 4px;
    }

    .sk-attendance-table th:nth-child(1),
    .sk-attendance-table td:nth-child(1) { width: 18px; }
    .sk-attendance-table th:nth-child(8),
    .sk-attendance-table td:nth-child(8) { width: 38px; }

    .sk-attendance-avatar {
        width: 12px;
        height: 12px;
        font-size: 4px;
    }

    .sk-attendance-person {
        gap: 4px;
    }

    .sk-attendance-status {
        min-width: 24px;
        height: 10px;
        padding: 0 3px;
        border-radius: 3px;
        font-size: 3px;
    }

    .sk-attendance-row-actions {
        gap: 2px;
    }

    .sk-attendance-row-actions button,
    .sk-attendance-row-actions a {
        width: 11px;
        height: 11px;
        border-radius: 3px;
    }

    .sk-attendance-row-actions svg {
        width: 6px;
        height: 6px;
    }

    .sk-attendance-table-footer {
        gap: 4px;
        padding: 0 6px;
        font-size: 4px;
    }

    .sk-attendance-table-footer label {
        gap: 3px;
    }

    .sk-attendance-table-footer select {
        width: 25px;
        height: 14px;
        border-radius: 3px;
        font-size: 4px;
    }

    .sk-attendance-pagination {
        gap: 2px;
    }

    .sk-attendance-pagination button,
    .sk-attendance-pagination span {
        min-width: 12px;
        height: 12px;
        padding: 0 3px;
        border-radius: 3px;
        font-size: 4px;
    }

    .sk-attendance-sidebar {
        grid-template-rows: 94px 66px minmax(0, 1fr);
        gap: 5px;
    }

    .sk-attendance-side-card {
        padding: 6px 5px 5px;
        border-radius: 6px;
    }

    .sk-attendance-side-card h2 {
        margin-bottom: 5px;
        font-size: 5px;
    }

    .sk-attendance-action {
        grid-template-columns: 12px minmax(0, 1fr) 7px;
        gap: 3px;
        height: 17px;
        margin-bottom: 4px;
        padding: 0 3px;
        border-radius: 4px;
    }

    .sk-attendance-action svg {
        width: 7px;
        height: 7px;
    }

    .sk-attendance-action strong {
        font-size: 3px;
    }

    .sk-attendance-action small {
        margin-top: 1px;
        font-size: 3px;
    }

    .sk-attendance-today div {
        height: 14px;
    }

    .sk-attendance-today dt,
    .sk-attendance-today dd {
        font-size: 4px;
    }

    .sk-attendance-today dt {
        gap: 3px;
    }

    .sk-attendance-today i {
        width: 3px;
        height: 3px;
    }

    .sk-attendance-activity {
        grid-template-rows: auto minmax(0, 1fr) 14px;
    }

    .sk-attendance-activity article {
        grid-template-columns: 12px minmax(0, 1fr);
        gap: 3px;
        padding-bottom: 4px;
        margin-bottom: 4px;
    }

    .sk-attendance-activity article > span {
        width: 11px;
        height: 11px;
        border-radius: 4px;
    }

    .sk-attendance-activity svg {
        width: 6px;
        height: 6px;
    }

    .sk-attendance-activity strong {
        font-size: 3px;
    }

    .sk-attendance-activity small {
        margin-top: 1px;
        font-size: 3px;
        line-height: 1.2;
    }

    .sk-attendance-view-all {
        height: 14px;
        gap: 3px;
        border-radius: 4px;
        font-size: 3px;
    }

    .sk-attendance-view-all svg {
        width: 6px;
        height: 6px;
    }

    .sk-attendance-settings-overlay {
        padding: 8px;
    }

    .sk-attendance-settings-modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 7px;
    }

    .sk-attendance-settings-modal form {
        grid-template-rows: 40px 30px minmax(0, 1fr) 42px;
        max-height: calc(100vh - 16px);
    }

    .sk-attendance-settings-head {
        padding: 10px 16px 0;
    }

    .sk-attendance-settings-head h2 {
        font-size: 11px;
    }

    .sk-attendance-settings-head p {
        margin-top: 5px;
        font-size: 6px;
    }

    .sk-attendance-settings-close {
        width: 16px;
        height: 16px;
    }

    .sk-attendance-settings-close svg {
        width: 11px;
        height: 11px;
    }

    .sk-attendance-settings-tabs {
        gap: 10px;
        padding: 0 16px;
    }

    .sk-attendance-settings-tabs button {
        height: 30px;
        font-size: 6px;
    }

    .sk-attendance-settings-tabs button.is-active::after {
        height: 2px;
    }

    .sk-attendance-settings-body {
        padding: 12px 17px 0;
    }

    .sk-settings-section-title {
        padding-bottom: 10px;
    }

    .sk-attendance-mode-row {
        grid-template-columns: minmax(0, 1fr) 74px;
        gap: 10px;
        padding-bottom: 10px;
    }

    .sk-attendance-settings-body h3,
    .sk-attendance-toggle-row strong,
    .sk-attendance-time-split label > strong {
        font-size: 6px;
    }

    .sk-attendance-settings-body p,
    .sk-attendance-toggle-row small,
    .sk-attendance-time-split label > small,
    .sk-attendance-defaults h3 span {
        margin-top: 4px;
        font-size: 5px;
    }

    .sk-attendance-mode-row select {
        width: 74px;
        height: 22px;
        padding: 0 6px;
        border-radius: 4px;
        font-size: 6px;
    }

    .sk-attendance-hours-grid {
        gap: 7px 8px;
        padding: 10px 0;
    }

    .sk-attendance-hours-grid label {
        gap: 4px;
    }

    .sk-attendance-hours-grid strong {
        font-size: 6px;
    }

    .sk-attendance-hours-grid span,
    .sk-single-time-field {
        height: 22px;
        padding: 0 6px;
        border-radius: 4px;
    }

    .sk-attendance-hours-grid input,
    .sk-single-time-field input {
        font-size: 6px;
    }

    .sk-attendance-hours-grid svg,
    .sk-single-time-field svg {
        width: 9px;
        height: 9px;
    }

    .sk-attendance-defaults {
        padding: 10px 0 9px;
    }

    .sk-attendance-status-options {
        gap: 8px;
        margin-top: 8px;
    }

    .sk-setting-status {
        gap: 6px;
        height: 24px;
        padding: 0 8px;
        border-radius: 4px;
    }

    .sk-setting-status span {
        width: 12px;
        height: 12px;
        border-radius: 3px;
    }

    .sk-setting-status svg {
        width: 8px;
        height: 8px;
    }

    .sk-setting-status strong {
        font-size: 6px;
    }

    .sk-attendance-toggle-row {
        gap: 8px;
        padding: 9px 10px 9px 0;
    }

    .sk-attendance-toggle-row + .sk-attendance-toggle-row {
        padding-left: 10px;
    }

    .sk-attendance-toggle-row i {
        width: 20px;
        height: 11px;
    }

    .sk-attendance-toggle-row i::after {
        left: 2px;
        top: 2px;
        width: 7px;
        height: 7px;
    }

    .sk-attendance-toggle-row input:checked + i::after {
        transform: translateX(9px);
    }

    .sk-attendance-time-split {
        padding: 10px 0;
    }

    .sk-attendance-time-split label:first-child {
        padding-right: 10px;
    }

    .sk-attendance-time-split label:last-child {
        padding-left: 10px;
    }

    .sk-attendance-time-split label > span {
        height: 24px;
        margin-top: 5px;
        padding: 0 7px;
        border-radius: 4px;
    }

    .sk-attendance-time-split input {
        font-size: 6px;
    }

    .sk-attendance-time-split select {
        height: 24px;
        margin-top: 5px;
        padding: 0 7px;
        border-radius: 4px;
        font-size: 6px;
    }

    .sk-attendance-time-split svg {
        width: 9px;
        height: 9px;
    }

    .sk-attendance-notification-row {
        padding: 9px 0 10px;
    }

    .sk-attendance-settings-actions {
        gap: 7px;
        padding: 8px 17px 12px;
    }

    .sk-attendance-settings-actions button {
        min-width: 50px;
        height: 24px;
        border-radius: 4px;
        font-size: 6px;
    }

    .sk-attendance-settings-actions button:last-child {
        min-width: 76px;
    }

    .sk-mark-attendance-overlay {
        padding: 8px;
    }

    .sk-mark-attendance-modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 7px;
    }

    .sk-mark-attendance-modal form {
        grid-template-rows: 44px 58px minmax(0, 1fr) 40px;
        max-height: calc(100vh - 16px);
    }

    .sk-mark-attendance-head {
        padding: 12px 16px 0;
    }

    .sk-mark-attendance-head h2 {
        font-size: 11px;
    }

    .sk-mark-attendance-head p {
        margin-top: 5px;
        font-size: 6px;
    }

    .sk-mark-attendance-close {
        width: 16px;
        height: 16px;
    }

    .sk-mark-attendance-close svg {
        width: 11px;
        height: 11px;
    }

    .sk-mark-attendance-filters {
        gap: 7px;
        margin: 0 16px;
        padding: 8px 7px 10px;
        border-radius: 5px;
    }

    .sk-mark-attendance-filters label {
        gap: 3px;
        font-size: 5px;
    }

    .sk-mark-attendance-filters input,
    .sk-mark-attendance-filters select {
        height: 22px;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-mark-attendance-table-wrap {
        margin: 0 16px;
        border-radius: 5px;
    }

    .sk-mark-attendance-table th {
        height: 21px;
        font-size: 5px;
    }

    .sk-mark-attendance-table td {
        height: 25px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-mark-attendance-table th:nth-child(1),
    .sk-mark-attendance-table td:nth-child(1) { width: 18px; }
    .sk-mark-attendance-table th:nth-child(2),
    .sk-mark-attendance-table td:nth-child(2) { width: 28px; }
    .sk-mark-attendance-table th:nth-child(4),
    .sk-mark-attendance-table td:nth-child(4) { width: 54px; }
    .sk-mark-attendance-table th:nth-child(5),
    .sk-mark-attendance-table td:nth-child(5),
    .sk-mark-attendance-table th:nth-child(6),
    .sk-mark-attendance-table td:nth-child(6) { width: 42px; }

    .sk-mark-attendance-person {
        gap: 4px;
    }

    .sk-mark-attendance-person img {
        width: 14px;
        height: 14px;
    }

    .sk-mark-status-select {
        width: 48px;
        height: 17px;
        padding: 0 3px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-mark-attendance-table input[type="text"] {
        height: 18px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-mark-attendance-actions {
        gap: 7px;
        padding: 8px 16px 10px;
    }

    .sk-mark-attendance-actions button {
        height: 22px;
        gap: 4px;
        border-radius: 4px;
        font-size: 6px;
    }

    .sk-mark-attendance-actions button:first-child {
        min-width: 48px;
    }

    .sk-mark-attendance-actions button:last-child {
        min-width: 78px;
    }

    .sk-mark-attendance-actions svg {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 430px) {
    .sk-dashboard-shell {
        grid-template-rows: 62px 56px 58px minmax(0, 1fr) 28px;
    }

    .sk-dashboard-topbar {
        padding: 6px 7px;
    }

    .sk-school-identity strong {
        max-width: 90px;
        font-size: 9px;
    }

    .sk-dashboard-search {
        height: 30px;
    }

    .sk-dashboard-search input {
        font-size: 8px;
    }

    .sk-admin-menu {
        grid-template-columns: 28px minmax(0, 42px) 10px;
    }

    .sk-admin-menu > img {
        width: 28px;
        height: 28px;
    }

    .sk-admin-menu strong {
        font-size: 7px;
    }

    .sk-admin-menu small {
        font-size: 6px;
    }

    .sk-dashboard-heading,
    .sk-stat-grid,
    .sk-dashboard-footer {
        padding-left: 7px;
        padding-right: 7px;
    }

    .sk-module-panel {
        margin: 0 7px;
        padding: 7px;
        gap: 5px;
    }

    .sk-module-tile span {
        width: 25px;
        height: 25px;
    }

    .sk-module-tile img,
    .sk-module-tile .sk-dashboard-icon {
        width: 17px;
        height: 17px;
    }

    .sk-module-tile strong {
        font-size: 6px;
    }
}

.sk-students-body {
    background: #f7fbff;
}

.sk-students-shell {
    display: grid;
    grid-template-rows: 104px minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    border: 1px solid #d9e5f4;
    border-radius: 10px;
    background: #fbfdff;
}

.sk-students-workspace {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
}

.sk-students-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 0;
    padding: 12px 10px 14px;
    border-right: 1px solid #dfe8f5;
    background: #ffffff;
}

.sk-students-nav {
    display: grid;
    gap: 2px;
}

.sk-students-nav-bottom {
    padding-top: 8px;
    border-top: 1px solid #e4ebf5;
}

.sk-students-nav a {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 36px;
    padding: 0 18px;
    border-radius: 11px;
    color: #263861;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.sk-students-nav a::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 5px;
    width: 5px;
    height: 21px;
    border-radius: 999px;
    background: transparent;
}

.sk-students-nav a.is-active {
    color: #0963ff;
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px rgba(9, 99, 255, 0.03);
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-students-nav a:hover {
    color: #0963ff;
    background: #f3f8ff;
}

.sk-students-nav a.is-active:hover {
    background: #eef5ff;
}

.sk-students-nav a.is-active::before {
    background: #0963ff;
}

.sk-students-nav a:hover::before {
    background: rgba(9, 99, 255, 0.36);
}

.sk-students-nav a.is-active:hover::before {
    background: #0963ff;
}

.sk-students-nav img,
.sk-students-nav .sk-side-menu-svg {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.sk-students-nav .sk-side-menu-svg {
    display: block;
}

.sk-students-nav a.is-active img,
.sk-students-nav a:hover img {
    filter: saturate(1.25) brightness(1.02);
}

.sk-students-nav span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-students-main {
    display: grid;
    grid-template-rows: 54px 82px minmax(0, 1fr) 24px;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 18px 30px 0;
}

.sk-students-page-main {
    grid-template-rows: 58px 82px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 18px 16px 0;
}

.sk-students-heading,
.sk-admin-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.sk-students-breadcrumb,
.sk-admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin-bottom: 8px;
    color: #263861;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 17px;
}

.sk-students-breadcrumb a,
.sk-admin-breadcrumb a {
    color: #0963ff;
    text-decoration: none;
}

.sk-students-heading h1,
.sk-admin-heading h1 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
}

.sk-students-add-button,
.sk-admin-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 12px;
    width: 184px;
    height: 50px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 12px 26px rgba(9, 99, 255, 0.22);
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 18px;
}

.sk-students-add-button svg,
.sk-admin-add-button svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-students-stats,
.sk-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    min-width: 0;
}

.sk-students-stat,
.sk-admin-stat {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 82px;
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, currentColor 22%, #ffffff);
    border-radius: 13px;
    background: #ffffff;
    color: #0a9d24;
}

.sk-students-stat > span,
.sk-admin-stat > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 12%, #ffffff);
}

.sk-students-stat img,
.sk-students-stat .sk-students-overview-icon,
.sk-admin-stat img,
.sk-admin-stat .sk-students-overview-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.sk-students-stat .sk-students-overview-icon,
.sk-admin-stat .sk-students-overview-icon {
    display: block;
}

.sk-students-stat strong,
.sk-admin-stat strong {
    display: block;
    margin-bottom: 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-students-stat b,
.sk-admin-stat b {
    color: currentColor;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
}

.sk-students-stat-green,
.sk-admin-stat-green { color: #0aa329; background: #fbfffb; }
.sk-students-stat-blue,
.sk-admin-stat-blue { color: #0963ff; background: #fbfdff; }
.sk-students-stat-purple,
.sk-admin-stat-purple { color: #7a20d8; background: #fefdff; }
.sk-students-stat-orange,
.sk-admin-stat-orange { color: #ff7a00; background: #fffdf9; }

.sk-students-stat-green > span,
.sk-admin-stat-green > span { background: #eaf8ed; }
.sk-students-stat-blue > span,
.sk-admin-stat-blue > span { background: #edf4ff; }
.sk-students-stat-purple > span,
.sk-admin-stat-purple > span { background: #f3eaff; }
.sk-students-stat-orange > span,
.sk-admin-stat-orange > span { background: #fff1e2; }

@supports not (border-color: color-mix(in srgb, red 22%, white)) {
    .sk-students-stat-green,
    .sk-admin-stat-green { border-color: #d7efd9; }
    .sk-students-stat-blue,
    .sk-admin-stat-blue { border-color: #d7e5ff; }
    .sk-students-stat-purple,
    .sk-admin-stat-purple { border-color: #ead8ff; }
    .sk-students-stat-orange,
    .sk-admin-stat-orange { border-color: #f4dfc4; }
}

.sk-students-panel {
    display: grid;
    grid-template-rows: 118px minmax(0, 1fr) 34px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 40, 92, 0.08);
}

.sk-students-filter-form {
    display: grid;
    grid-template-rows: 50px 68px;
    min-width: 0;
    border-bottom: 1px solid #e2eaf5;
}

.sk-students-tabs {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    min-width: 0;
    padding: 0 22px;
}

.sk-students-tabs button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 50px;
    padding: 0 6px;
    border: 0;
    color: #263861;
    background: transparent;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 17px;
}

.sk-students-tabs button.is-active {
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-students-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #0963ff;
}

.sk-students-tabs span {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    color: #0963ff;
    background: #eaf3ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-students-tabs button:nth-child(2) span {
    color: #079b3f;
    background: #dff7e8;
}

.sk-students-tabs button:nth-child(3) span {
    color: #d97706;
    background: #fff0d7;
}

.sk-students-filter-row {
    display: grid;
    grid-template-columns: minmax(300px, 520px) minmax(210px, 1fr) minmax(210px, 1fr) 130px;
    align-items: center;
    gap: 22px;
    min-width: 0;
    padding: 6px 22px 10px;
}

.sk-students-search,
.sk-students-select,
.sk-students-filter-button {
    min-width: 0;
    height: 52px;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-students-search {
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #6d778f;
}

.sk-students-search svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-students-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #263861;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-students-search input::placeholder {
    color: #7a8399;
}

.sk-students-select {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 0 14px;
}

.sk-students-select span {
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-students-select select {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-students-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #263861;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-students-filter-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
}

.sk-students-hidden-control {
    display: none;
}

.sk-students-table-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 0 22px 0;
    scrollbar-width: thin;
    scrollbar-color: #c5d4e8 #f6f9fd;
}

.sk-students-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sk-students-table-wrap::-webkit-scrollbar-track {
    background: #f6f9fd;
}

.sk-students-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c5d4e8;
}

.sk-students-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e1e9f4;
    border-radius: 8px;
    color: #071553;
}

.sk-students-table th,
.sk-students-table td {
    overflow: hidden;
    padding: 0 12px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-students-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 45px;
    border-bottom: 1px solid #e2eaf5;
    color: #4c5b7d;
    background: #fbfdff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-students-table td {
    height: 54px;
    border-bottom: 1px solid #e7eef7;
    color: #071553;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: 15px;
}

.sk-students-table tr:last-child td {
    border-bottom: 0;
}

.sk-students-table th:nth-child(1),
.sk-students-table td:nth-child(1) {
    width: 82px;
}

.sk-students-table th:nth-child(2),
.sk-students-table td:nth-child(2) {
    width: 16%;
}

.sk-students-table th:nth-child(3),
.sk-students-table td:nth-child(3) {
    width: 11%;
}

.sk-students-table th:nth-child(4),
.sk-students-table td:nth-child(4),
.sk-students-table th:nth-child(5),
.sk-students-table td:nth-child(5) {
    width: 8%;
}

.sk-students-table th:nth-child(6),
.sk-students-table td:nth-child(6) {
    width: 16%;
}

.sk-students-table th:nth-child(7),
.sk-students-table td:nth-child(7) {
    width: 13%;
}

.sk-students-table th:nth-child(8),
.sk-students-table td:nth-child(8) {
    width: 10%;
}

.sk-students-table th:nth-child(9),
.sk-students-table td:nth-child(9) {
    width: 128px;
}

.sk-students-table strong {
    font-family: "InterBold", Arial, sans-serif;
}

.sk-students-avatar {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    object-fit: cover;
    background: #edf3fb;
    vertical-align: middle;
}

.sk-students-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    color: #168b31;
    background: #e7f8e9;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-students-status.is-active {
    color: #168b31;
    background: #e7f8e9;
}

.sk-students-status.is-pass-out {
    color: #d97706;
    background: #fff0d7;
}

.sk-students-status.is-dropped-out {
    color: #c90008;
    background: #fff0f1;
}

.sk-students-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
}

.sk-students-actions a,
.sk-students-actions button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.sk-students-actions button:last-child {
    color: #071553;
}

.sk-students-actions .student-more-btn {
    color: #071553;
}

.sk-students-actions > a:hover,
.sk-students-actions > button:hover {
    border-color: #cfe0ff;
    background: #f5f8ff;
}

.sk-student-action-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 196px;
    padding: 10px 0;
    border: 1px solid #dfe7f4;
    border-radius: 8px;
    color: #14245d;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 33, 67, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sk-students-actions.is-menu-open .sk-student-action-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sk-students-actions .sk-student-action-menu a,
.sk-students-actions .sk-student-action-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 31px;
    gap: 12px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    color: #14245d;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sk-students-actions .sk-student-action-menu a:hover,
.sk-students-actions .sk-student-action-menu button:hover {
    color: #0963ff;
    background: #f5f8ff;
}

.sk-students-actions .sk-student-action-menu svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-students-actions .sk-student-action-menu svg circle {
    fill: none;
    stroke: currentColor;
}

.sk-student-action-menu-divider {
    display: block;
    height: 1px;
    margin: 8px 14px 7px;
    background: #dfe7f4;
}

.sk-students-actions .sk-student-action-menu .student-status-menu-btn.is-danger {
    color: #ff1f2d;
}

.sk-students-actions .sk-student-action-menu .student-status-menu-btn.is-danger:hover {
    color: #ff1f2d;
    background: #fff4f5;
}

.sk-students-actions .sk-student-action-menu .student-rejoin-menu-btn.is-success {
    color: #16a34a;
}

.sk-students-actions .sk-student-action-menu .student-rejoin-menu-btn.is-success:hover {
    color: #16a34a;
    background: #f0fdf4;
}

.sk-students-actions svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-students-actions svg circle {
    fill: currentColor;
    stroke: none;
}

.sk-students-empty {
    height: 220px;
    color: #6d778f !important;
    text-align: center !important;
    font-family: "InterMedium", Arial, sans-serif !important;
}

.sk-students-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
}

.sk-students-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 0 22px;
    color: #6d778f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-students-table-footer p {
    margin: 0;
}

.sk-students-table-footer .pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sk-students-table-footer .pagination a,
.sk-students-table-footer .roundBox,
.sk-students-table-footer .roundBox-active {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    text-decoration: none;
}

.sk-students-table-footer .roundBox {
    border: 1px solid #dfe8f5;
    color: #52607f;
}

.sk-students-table-footer .roundBox-active {
    color: #ffffff;
    background: #0963ff;
}

.sk-students-table-footer img {
    width: 16px;
    height: 16px;
}

.sk-students-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    min-width: 0;
    height: 24px;
    padding: 0;
    color: #6d778f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-students-footer span:first-child {
    text-align: left;
}

.sk-students-footer span:nth-child(2) {
    text-align: center;
}

.sk-students-footer span:last-child {
    text-align: right;
}

.sk-students-footer strong {
    color: #f01f1f;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-teachers-main {
    grid-template-rows: 58px 82px minmax(0, 1fr) 24px;
    gap: 10px;
}

.sk-teachers-add-button {
    width: 180px;
}

.sk-teachers-panel {
    grid-template-rows: 118px minmax(0, 1fr) 34px;
}

.sk-teachers-filter-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 104px 110px;
}

.sk-teachers-select {
    grid-template-columns: minmax(0, 1fr);
}

.sk-teachers-select select {
    padding-right: 8px;
}

.sk-teachers-rows {
    padding-right: 8px;
}

.sk-teachers-stat-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teachers-table th:nth-child(1),
.sk-teachers-table td:nth-child(1) {
    width: 78px;
}

.sk-teachers-table th:nth-child(2),
.sk-teachers-table td:nth-child(2) {
    width: 17%;
}

.sk-teachers-table th:nth-child(3),
.sk-teachers-table td:nth-child(3) {
    width: 14%;
}

.sk-teachers-table th:nth-child(4),
.sk-teachers-table td:nth-child(4) {
    width: 18%;
}

.sk-teachers-table th:nth-child(5),
.sk-teachers-table td:nth-child(5) {
    width: 12%;
}

.sk-teachers-table th:nth-child(6),
.sk-teachers-table td:nth-child(6) {
    width: 13%;
}

.sk-teachers-table th:nth-child(7),
.sk-teachers-table td:nth-child(7) {
    width: 9%;
}

.sk-teachers-table th:nth-child(8),
.sk-teachers-table td:nth-child(8) {
    width: 136px;
}

.sk-teachers-table td {
    height: 53px;
}

.sk-teachers-avatar {
    width: 40px;
    height: 40px;
    border-radius: 7px;
}

.sk-teachers-subject,
.sk-teachers-classes {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teachers-status {
    min-width: 62px;
    height: 28px;
    padding: 0 12px;
}

.sk-teachers-status.is-leave {
    color: #d97706;
    background: #fff0d7;
}

.sk-teachers-actions a,
.sk-teachers-actions button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.sk-teachers-actions {
    position: relative;
}

.sk-teachers-actions .teacher-more-btn {
    color: #071553;
}

.sk-teachers-actions > a:hover,
.sk-teachers-actions > button:hover {
    border-color: #cfe0ff;
    background: #f5f8ff;
}

.sk-teacher-action-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 196px;
    padding: 10px 0;
    border: 1px solid #dfe7f4;
    border-radius: 8px;
    color: #14245d;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 33, 67, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sk-teachers-actions.is-menu-open .sk-teacher-action-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sk-teachers-actions .sk-teacher-action-menu a,
.sk-teachers-actions .sk-teacher-action-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 31px;
    gap: 12px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    color: #14245d;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sk-teachers-actions .sk-teacher-action-menu a:hover,
.sk-teachers-actions .sk-teacher-action-menu button:hover {
    color: #0963ff;
    background: #f5f8ff;
}

.sk-classes-body {
    --sk-classes-topbar: clamp(62px, 9.1vh, 86px);
    --sk-classes-sidebar: clamp(162px, 16.9vw, 283px);
    --sk-classes-main-pad-x: clamp(18px, 2.3vw, 39px);
    --sk-classes-main-pad-y: clamp(8px, 1.4vh, 28px);
    --sk-classes-heading: clamp(30px, 5.7vh, 58px);
    --sk-classes-stats: clamp(38px, 10.5vh, 92px);
    --sk-classes-toolbar: clamp(42px, 6.4vh, 58px);
    --sk-classes-pagination: clamp(26px, 3.9vh, 38px);
    --sk-classes-footer: clamp(18px, 3.1vh, 26px);
    --sk-classes-row: clamp(25px, 4.25vh, 42px);
    --sk-classes-text: #071553;
    --sk-classes-muted: #526081;
    --sk-classes-line: #dfe8f5;
    --sk-classes-blue: #0963ff;
    --sk-classes-green: #1f9344;
    --sk-classes-red: #ff2c2c;
    --sk-classes-purple: #6847cf;
}

.sk-classes-shell {
    grid-template-rows: var(--sk-classes-topbar) minmax(0, 1fr);
    border-radius: 0;
    background: #ffffff;
}

.sk-classes-body .sk-dashboard-topbar {
    grid-template-columns: minmax(230px, 420px) minmax(300px, 604px) minmax(245px, 330px);
    height: var(--sk-classes-topbar);
    gap: clamp(16px, 3.1vw, 58px);
    padding: clamp(8px, 1.4vh, 17px) clamp(16px, 1.9vw, 32px);
    border-bottom-color: #e4ebf5;
    box-shadow: none;
}

.sk-classes-body .sk-school-identity {
    grid-template-columns: clamp(48px, 4.1vw, 72px) minmax(0, 1fr);
    gap: clamp(12px, 1.2vw, 24px);
}

.sk-classes-body .sk-school-logo {
    width: clamp(48px, 4.1vw, 72px);
    height: clamp(48px, 4.1vw, 72px);
}

.sk-classes-body .sk-school-identity strong {
    max-width: 260px;
    font-size: clamp(14px, 1.18vw, 19px);
    line-height: 1.18;
}

.sk-classes-body .sk-dashboard-search {
    height: clamp(38px, 5.3vh, 52px);
    padding: 0 clamp(13px, 1.25vw, 20px);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 40, 92, 0.035);
}

.sk-classes-body .sk-dashboard-search svg {
    width: clamp(19px, 1.55vw, 26px);
    height: clamp(19px, 1.55vw, 26px);
    margin-right: clamp(10px, 1vw, 18px);
    color: #354f9d;
}

.sk-classes-body .sk-dashboard-search input {
    font-size: clamp(12px, 1.02vw, 18px);
}

.sk-classes-body .sk-topbar-actions {
    gap: clamp(12px, 1.75vw, 26px);
}

.sk-classes-body .sk-bell-button {
    width: clamp(31px, 2.45vw, 44px);
    height: clamp(31px, 2.45vw, 44px);
}

.sk-classes-body .sk-bell-button svg {
    width: clamp(23px, 1.8vw, 31px);
    height: clamp(23px, 1.8vw, 31px);
    color: #354f9d;
}

.sk-classes-body .sk-bell-button span {
    min-width: clamp(17px, 1.45vw, 24px);
    height: clamp(17px, 1.45vw, 24px);
    border-width: 2px;
    font-size: clamp(9px, .74vw, 12px);
}

.sk-classes-body .sk-admin-menu {
    grid-template-columns: clamp(38px, 3.25vw, 55px) minmax(0, 1fr) clamp(15px, 1.3vw, 22px);
    gap: clamp(9px, 1vw, 16px);
    min-width: clamp(170px, 15.2vw, 256px);
}

.sk-classes-body .sk-admin-menu > img {
    width: clamp(38px, 3.25vw, 55px);
    height: clamp(38px, 3.25vw, 55px);
}

.sk-classes-body .sk-admin-menu strong {
    font-size: clamp(11px, .95vw, 16px);
}

.sk-classes-body .sk-admin-menu small {
    margin-top: 4px;
    font-size: clamp(9px, .78vw, 13px);
}

.sk-classes-body .sk-admin-menu > svg {
    width: clamp(15px, 1.3vw, 22px);
    height: clamp(15px, 1.3vw, 22px);
}

.sk-classes-workspace {
    grid-template-columns: var(--sk-classes-sidebar) minmax(0, 1fr);
}

.sk-classes-body .sk-students-sidebar {
    padding: clamp(8px, 1.2vh, 28px) clamp(8px, .95vw, 18px) clamp(8px, 1.2vh, 16px);
}

.sk-classes-body .sk-students-nav {
    gap: clamp(1px, .32vh, 7px);
}

.sk-classes-body .sk-students-nav a {
    grid-template-columns: clamp(17px, 1.45vw, 24px) minmax(0, 1fr);
    gap: clamp(8px, 1vw, 16px);
    height: clamp(23px, 3.78vh, 50px);
    padding: 0 clamp(10px, 1.42vw, 25px);
    border-radius: 8px;
    font-size: clamp(10px, .92vw, 16px);
}

.sk-classes-body .sk-students-nav a::before {
    left: calc(-1 * clamp(10px, .95vw, 18px));
    top: 50%;
    width: clamp(3px, .28vw, 5px);
    height: clamp(14px, 2.5vh, 32px);
    transform: translateY(-50%);
}

.sk-classes-body .sk-students-nav img {
    width: clamp(15px, 1.18vw, 20px);
    height: clamp(15px, 1.18vw, 20px);
}

.sk-classes-body .sk-students-nav-bottom {
    padding-top: clamp(7px, 1vh, 18px);
}

.sk-classes-main {
    display: grid;
    grid-template-rows: var(--sk-classes-heading) var(--sk-classes-stats) minmax(0, 1fr) var(--sk-classes-footer);
    gap: clamp(4px, 1.25vh, 10px);
    min-width: 0;
    min-height: 0;
    padding: var(--sk-classes-main-pad-y) var(--sk-classes-main-pad-x) 0;
    background: #ffffff;
}

.sk-classes-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.sk-classes-heading h1 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(13px, 2.2vw, 38px);
    line-height: 1;
}

.sk-classes-add {
    gap: clamp(5px, .75vw, 12px);
    width: clamp(80px, 11vw, 190px);
    height: clamp(27px, 5vh, 50px);
    padding: 0 clamp(11px, 1vw, 18px);
    border-radius: clamp(8px, .72vw, 11px);
    background: #0963ff;
    box-shadow: 0 12px 26px rgba(9, 99, 255, 0.22);
    font-size: clamp(8px, 1.1vw, 18px);
    white-space: nowrap;
}

.sk-classes-add:hover {
    background: #0963ff;
}

.sk-classes-add svg {
    flex: 0 0 auto;
    width: clamp(13px, 1.55vw, 26px);
    height: clamp(13px, 1.55vw, 26px);
}

.sk-classes-stats {
    gap: clamp(6px, 1.55vw, 24px);
}

.sk-classes-stats article {
    grid-template-columns: clamp(28px, 4.2vw, 62px) minmax(0, 1fr);
    height: 100%;
    padding: clamp(6px, 1.35vh, 10px) clamp(5px, 1.5vw, 18px);
    border-radius: clamp(7px, .9vw, 13px);
    box-shadow: none;
}

.sk-classes-stats article > span {
    width: clamp(19px, 3.35vw, 50px);
    height: clamp(19px, 3.35vw, 50px);
    border-radius: 50%;
}

.sk-classes-stats svg {
    width: clamp(13px, 1.8vw, 32px);
    height: clamp(13px, 1.8vw, 32px);
}

.sk-classes-stats strong {
    display: block;
    min-width: 0;
}

.sk-classes-stats strong {
    overflow: hidden;
    margin-bottom: clamp(2px, .58vh, 8px);
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(5px, .82vw, 14px);
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-classes-stats b {
    color: currentColor;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(9px, 1.8vw, 26px);
    line-height: 1;
}

.sk-classes-overview-icon {
    display: block;
    fill: currentColor;
}

.sk-classes-icon-cut {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-classes-stats .is-blue { color: #0963ff; }
.sk-classes-stats .is-green { color: #1e923f; }
.sk-classes-stats .is-red { color: #ff3131; }
.sk-classes-stats .is-purple { color: #6847cf; }

.sk-classes-stats .is-blue > span { background: linear-gradient(135deg, rgba(9, 99, 255, .12), rgba(9, 99, 255, .24)); }
.sk-classes-stats .is-green > span { background: linear-gradient(135deg, rgba(30, 146, 63, .12), rgba(30, 146, 63, .24)); }
.sk-classes-stats .is-red > span { background: linear-gradient(135deg, rgba(255, 49, 49, .12), rgba(255, 49, 49, .22)); }
.sk-classes-stats .is-purple > span { background: linear-gradient(135deg, rgba(104, 71, 207, .12), rgba(104, 71, 207, .24)); }

.sk-classes-stats .is-blue svg { stroke: #0963ff; }
.sk-classes-stats .is-green svg { stroke: #1e923f; }
.sk-classes-stats .is-red svg { stroke: #ff3131; }
.sk-classes-stats .is-purple svg { stroke: #6847cf; }

.sk-classes-panel {
    display: grid;
    grid-template-rows: var(--sk-classes-toolbar) minmax(0, 1fr) var(--sk-classes-pagination);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: clamp(8px, 1vw, 14px);
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 40, 92, 0.05);
}

.sk-classes-toolbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, 383px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 1.5vw, 28px);
    min-width: 0;
    padding: 0 clamp(10px, 1vw, 16px);
    border-bottom: 1px solid #e3ebf6;
}

.sk-classes-search,
.sk-classes-rows-wrap,
.sk-classes-filter {
    height: clamp(34px, 4.5vh, 46px);
    border: 1px solid #d9e4f2;
    border-radius: clamp(6px, .6vw, 9px);
    background: #ffffff;
}

.sk-classes-search {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 clamp(11px, 1vw, 18px);
    color: #485a83;
}

.sk-classes-search svg,
.sk-classes-filter svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-classes-search svg {
    width: clamp(16px, 1.35vw, 22px);
    height: clamp(16px, 1.35vw, 22px);
    margin-right: clamp(9px, .85vw, 16px);
}

.sk-classes-search input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(10px, .88vw, 15px);
}

.sk-classes-search input::placeholder {
    color: #6f7a96;
}

.sk-classes-controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(9px, .85vw, 15px);
    min-width: 0;
}

.sk-classes-controls p {
    min-width: 0;
    margin: 0 clamp(7px, .7vw, 14px) 0 0;
    overflow: hidden;
    color: #33446c;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(9px, .82vw, 15px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-classes-rows-wrap {
    display: inline-grid;
    grid-template-columns: auto clamp(38px, 3.5vw, 58px);
    align-items: center;
    flex: 0 0 auto;
    width: clamp(116px, 10.7vw, 174px);
    padding: 0 clamp(8px, .75vw, 15px);
    color: #263861;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(9px, .82vw, 15px);
}

.sk-classes-rows-wrap span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-classes-rows-wrap select,
.sk-classes-section-filter {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font: inherit;
}

.sk-classes-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: clamp(6px, .62vw, 11px);
    width: clamp(88px, 7.1vw, 130px);
    color: #0963ff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(9px, .82vw, 15px);
}

.sk-classes-filter svg {
    width: clamp(15px, 1.22vw, 22px);
    height: clamp(15px, 1.22vw, 22px);
}

.sk-classes-section-filter {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 12;
    width: clamp(160px, 12vw, 220px);
    height: clamp(34px, 4.5vh, 46px);
    padding: 0 12px;
    border: 1px solid #d9e4f2;
    border-radius: clamp(6px, .6vw, 9px);
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 40, 92, 0.12);
    opacity: 0;
    pointer-events: none;
}

.sk-classes-filter-open .sk-classes-section-filter,
.sk-classes-section-filter:focus {
    opacity: 1;
    pointer-events: auto;
}

.sk-classes-table-wrap {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: clamp(6px, .8vh, 14px) clamp(10px, 1vw, 16px) 0;
}

.sk-classes-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e0e8f4;
    border-radius: clamp(6px, .6vw, 9px);
    color: #071553;
    background: #ffffff;
}

.sk-classes-table th,
.sk-classes-table td {
    height: var(--sk-classes-row);
    overflow: hidden;
    padding: 0 clamp(8px, 1.05vw, 20px);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-classes-table th {
    position: sticky;
    z-index: 2;
    top: 0;
    height: clamp(34px, 4.65vh, 47px);
    border-bottom: 1px solid #e4ebf5;
    color: #263861;
    background: #fbfdff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(9px, .83vw, 14px);
}

.sk-classes-table td {
    border-bottom: 1px solid #e7eef7;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: clamp(9px, .82vw, 15px);
}

.sk-classes-table tr:last-child td {
    border-bottom: 0;
}

.sk-classes-table th:nth-child(1),
.sk-classes-table td:nth-child(1) { width: 13%; }
.sk-classes-table th:nth-child(2),
.sk-classes-table td:nth-child(2) { width: 13.5%; }
.sk-classes-table th:nth-child(3),
.sk-classes-table td:nth-child(3) { width: 17%; }
.sk-classes-table th:nth-child(4),
.sk-classes-table td:nth-child(4) { width: 10%; }
.sk-classes-table th:nth-child(5),
.sk-classes-table td:nth-child(5) { width: 10.5%; }
.sk-classes-table th:nth-child(6),
.sk-classes-table td:nth-child(6) { width: 11%; }
.sk-classes-table th:nth-child(7),
.sk-classes-table td:nth-child(7) { width: 15%; }
.sk-classes-table th:nth-child(8),
.sk-classes-table td:nth-child(8) { width: 10%; }

.sk-classes-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(52px, 4vw, 70px);
    height: clamp(20px, 2.8vh, 30px);
    padding: 0 clamp(8px, .85vw, 12px);
    border-radius: 7px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(8px, .74vw, 14px);
}

.sk-classes-status.is-active {
    color: #079b3f;
    background: #dff7e8;
}

.sk-classes-status.is-inactive {
    color: #ff1f2d;
    background: #ffe6e8;
}

.sk-classes-actions {
    display: flex;
    align-items: center;
    gap: clamp(5px, .55vw, 10px);
}

.sk-classes-actions button {
    display: grid;
    place-items: center;
    width: clamp(26px, 2.2vw, 40px);
    height: clamp(26px, 2.2vw, 40px);
    padding: 0;
    border: 1px solid #dfe8f5;
    border-radius: clamp(6px, .55vw, 8px);
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
}

.sk-classes-actions button:hover {
    border-color: #c8dcff;
    background: #f5f9ff;
}

.sk-classes-actions svg {
    width: clamp(15px, 1.3vw, 20px);
    height: clamp(15px, 1.3vw, 20px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-classes-empty {
    height: calc(var(--sk-classes-row) * 4);
    color: #6d778f !important;
    text-align: center !important;
    font-family: "InterMedium", Arial, sans-serif !important;
}

.sk-classes-empty.is-error {
    color: #c71f1f !important;
}

.sk-classes-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(5px, .65vw, 16px);
    min-width: 0;
    padding: clamp(4px, .75vh, 10px) clamp(10px, 1vw, 24px) 0;
}

.sk-classes-pagination button {
    display: grid;
    place-items: center;
    width: clamp(24px, 1.95vw, 40px);
    height: clamp(24px, 1.95vw, 40px);
    padding: 0;
    border: 1px solid #dfe8f5;
    border-radius: clamp(6px, .55vw, 8px);
    color: #263861;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(9px, .82vw, 15px);
}

.sk-classes-pagination button.is-active {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 8px 18px rgba(9, 99, 255, 0.18);
}

.sk-classes-pagination svg {
    width: clamp(14px, 1.2vw, 20px);
    height: clamp(14px, 1.2vw, 20px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-classes-body .sk-students-footer {
    height: var(--sk-classes-footer);
    color: #354f9d;
    font-size: clamp(9px, .82vw, 15px);
}

#class_form_overlay.sk-class-modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 18, 31, 0.58);
    backdrop-filter: blur(2px);
}

.sk-sections-body #section_form_overlay {
    background: rgba(7, 12, 26, 0.64);
    backdrop-filter: blur(1px);
}

.sk-sections-body .sk-classes-add {
    width: clamp(92px, 12vw, 204px);
}

.sk-sections-overview-icon {
    display: block;
    fill: currentColor;
}

.sk-sections-icon-cut {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-sections-table th:nth-child(1),
.sk-sections-table td:nth-child(1) { width: 13%; }
.sk-sections-table th:nth-child(2),
.sk-sections-table td:nth-child(2) { width: 15%; }
.sk-sections-table th:nth-child(3),
.sk-sections-table td:nth-child(3) { width: 11%; }
.sk-sections-table th:nth-child(4),
.sk-sections-table td:nth-child(4) { width: 15.5%; }
.sk-sections-table th:nth-child(5),
.sk-sections-table td:nth-child(5) { width: 9%; }
.sk-sections-table th:nth-child(6),
.sk-sections-table td:nth-child(6) { width: 11%; }
.sk-sections-table th:nth-child(7),
.sk-sections-table td:nth-child(7) { width: 15%; }
.sk-sections-table th:nth-child(8),
.sk-sections-table td:nth-child(8) { width: 10.5%; }

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

.sk-classes-popup {
    width: min(1044px, calc(100vw - 42px)) !important;
    max-height: calc(100vh - 42px);
    height: auto !important;
    overflow: hidden;
    align-items: stretch !important;
    padding: clamp(24px, 3.4vh, 40px) clamp(24px, 2.85vw, 40px) clamp(18px, 2.8vh, 28px) !important;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 7px !important;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(4, 14, 48, 0.28);
}

.sk-classes-popup.sk-sections-popup {
    width: min(980px, calc(100vw - 42px)) !important;
    padding: clamp(22px, 2.7vh, 30px) clamp(26px, 2.6vw, 36px) clamp(20px, 2.55vh, 26px) !important;
}

.sk-sections-popup .sk-classes-popup-head {
    margin-bottom: clamp(18px, 2.2vh, 26px);
}

.sk-section-form-layout {
    display: grid;
    grid-template-columns: clamp(190px, 18vw, 228px) minmax(0, 1fr);
    gap: clamp(24px, 2.6vw, 36px);
    min-width: 0;
}

.sk-section-form-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: clamp(340px, 45vh, 470px);
    overflow: hidden;
    padding: clamp(20px, 2.2vw, 28px) clamp(16px, 1.7vw, 21px);
    border-radius: 10px;
    background: #f3f7ff;
}

.sk-section-form-aside::after {
    content: "";
    position: absolute;
    right: 11px;
    bottom: 10px;
    width: 92px;
    height: 86px;
    opacity: .42;
    background-image: radial-gradient(circle, #9cc0ff 1.3px, transparent 1.7px);
    background-size: 12px 12px;
}

.sk-section-illustration {
    display: grid;
    place-items: center;
    min-height: clamp(155px, 20vh, 205px);
}

.sk-section-illustration svg {
    width: min(100%, 178px);
    height: auto;
    fill: none;
    stroke: #89aaff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-section-illustration svg path:nth-last-child(6),
.sk-section-illustration svg circle:nth-last-child(5) {
    stroke: #0963ff;
}

.sk-section-illustration svg path:nth-last-child(4),
.sk-section-illustration svg circle:nth-last-child(3) {
    stroke: #24a044;
}

.sk-section-illustration svg path:nth-last-child(2),
.sk-section-illustration svg circle:nth-last-child(1) {
    stroke: #6736d1;
}

.sk-section-form-aside strong {
    position: relative;
    z-index: 1;
    margin-top: clamp(10px, 1.4vh, 18px);
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(13px, 1vw, 17px);
    line-height: 1.2;
}

.sk-section-form-aside p {
    position: relative;
    z-index: 1;
    margin: clamp(9px, 1.1vh, 14px) 0 0;
    color: #34405d;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: clamp(10px, .8vw, 13px);
    line-height: 1.42;
}

.sk-sections-popup .sk-sections-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 34px);
    row-gap: clamp(14px, 1.55vh, 18px);
}

.sk-sections-popup .sk-classes-field span {
    margin-bottom: clamp(7px, .85vh, 10px);
    font-size: clamp(11px, .82vw, 14px);
}

.sk-sections-popup .sk-classes-field input,
.sk-sections-popup .sk-classes-field select {
    height: clamp(40px, 4.9vh, 50px);
    font-size: clamp(11px, .86vw, 14px);
}

.sk-sections-popup .sk-sections-notes textarea {
    width: 100%;
    min-width: 0;
    height: clamp(88px, 13.1vh, 126px);
    resize: none;
    padding: clamp(12px, 1.2vw, 16px);
    border: 1px solid #b6bcc9;
    border-radius: 6px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: clamp(11px, .86vw, 14px);
    line-height: 1.35;
}

.sk-sections-popup .sk-sections-notes textarea::placeholder {
    color: #747b8c;
}

.sk-sections-popup .sk-classes-popup-actions {
    gap: clamp(28px, 3.1vw, 38px);
    margin-top: clamp(18px, 2.3vh, 28px);
}

.sk-sections-popup .sk-classes-popup-actions button:first-child {
    color: #ffffff;
    background: #5c6374;
}

.sk-classes-form-content {
    width: 100% !important;
    flex-direction: column !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.sk-classes-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(18px, 2.7vh, 33px);
}

.sk-classes-popup-head h3 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(24px, 1.85vw, 32px);
    line-height: 1;
}

.sk-classes-popup-head a {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(36px, 2.85vw, 48px);
    height: clamp(36px, 2.85vw, 48px);
    border-radius: 50%;
    color: #071553;
    background: #f0f1f6;
    text-decoration: none;
}

.sk-classes-popup-head svg {
    width: clamp(20px, 1.55vw, 27px);
    height: clamp(20px, 1.55vw, 27px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-classes-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 3.5vw, 54px);
    row-gap: clamp(10px, 1.42vh, 22px);
    min-width: 0;
}

.sk-classes-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #071553;
}

.sk-classes-field span {
    margin-bottom: clamp(8px, 1.05vh, 14px);
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(13px, .96vw, 17px);
    line-height: 1;
}

.sk-classes-field b {
    color: #ff1f2d;
    font: inherit;
}

.sk-classes-field input,
.sk-classes-field select {
    width: 100%;
    min-width: 0;
    height: clamp(40px, 5.35vh, 57px);
    padding: 0 clamp(14px, 1.3vw, 19px);
    border: 1px solid #b6bcc9;
    border-radius: 6px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: clamp(13px, 1vw, 17px);
}

.sk-classes-field select {
    appearance: auto;
}

.sk-classes-field input::placeholder,
.sk-classes-field select:invalid {
    color: #747b8c;
}

.sk-classes-field small {
    display: block;
    margin-top: clamp(6px, .8vh, 11px);
    color: #4d5874;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: clamp(10px, .79vw, 14px);
    line-height: 1.2;
}

.sk-classes-popup-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 3.5vw, 54px);
    margin-top: clamp(20px, 3.2vh, 34px);
    padding-top: clamp(16px, 2.4vh, 25px);
    border-top: 1px solid #dfe5ef;
}

.sk-classes-popup-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(38px, 5vh, 51px);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(14px, 1.08vw, 18px);
}

.sk-classes-popup-actions button:first-child {
    color: #071553;
    background: #e9e9ee;
}

.sk-classes-popup-actions button:last-child {
    color: #ffffff;
    background: #2f974a;
}

.sk-classes-popup-actions span {
    color: inherit;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup {
    width: min(980px, calc(100vw - 52px)) !important;
    max-height: calc(100vh - 52px);
    padding: 0 !important;
    border: 1px solid var(--sk-line);
    border-radius: 14px !important;
    color: var(--sk-text);
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(8, 13, 31, 0.30);
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup form {
    width: 100% !important;
    max-height: calc(100vh - 52px);
    min-height: 0;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-form-content {
    display: grid;
    grid-template-rows: 92px minmax(0, 1fr) 74px;
    max-height: calc(100vh - 52px);
    min-height: 0;
    overflow: hidden;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 20px 28px 15px 34px;
}

.sk-classes-popup-title {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sk-classes-popup-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: var(--sk-blue);
    background: var(--sk-blue-soft);
}

.sk-classes-popup-icon svg,
#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-classes-popup-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.2;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head h3 {
    margin: 0 0 7px;
    color: var(--sk-text);
    font-size: 25px;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head p {
    margin: 0;
    color: var(--sk-muted);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head a {
    width: 40px;
    height: 40px;
    border: 1px solid #d7e0ee;
    border-radius: 9px;
    color: var(--sk-text);
    background: #ffffff;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head svg {
    width: 19px;
    height: 19px;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: 28px;
    row-gap: 13px;
    min-height: 0;
    padding: 0 34px 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6d4ea transparent;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-field span {
    margin-bottom: 7px;
    color: var(--sk-text);
    font-size: 13px;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-field b {
    color: #f01624;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-field input,
#class_form_overlay.sk-class-modal-overlay .sk-classes-field select {
    height: 40px;
    border: 1px solid #d7e0ee;
    border-radius: 7px;
    color: #0b1238;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-field input::placeholder,
#class_form_overlay.sk-class-modal-overlay .sk-classes-field select:invalid {
    color: #7b869e;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-field small {
    margin-top: 5px;
    color: var(--sk-muted);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 34px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--sk-line);
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button {
    width: auto;
    height: 44px;
    gap: 10px;
    border-radius: 8px;
    font-size: 15px;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button:first-child {
    min-width: 126px;
    border: 1px solid #b8c4da;
    color: var(--sk-text);
    background: #ffffff;
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button:last-child {
    min-width: 168px;
    color: #ffffff;
    background: #299b46;
    box-shadow: 0 10px 18px rgba(41, 155, 70, 0.2);
}

#class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

#section_form_overlay.sk-section-modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 18, 31, 0.58);
    backdrop-filter: blur(2px);
}

#section_form_overlay.sk-section-modal-overlay:target {
    display: flex;
}

#section_form_overlay.sk-section-modal-overlay .sk-sections-popup {
    width: min(980px, calc(100vw - 52px)) !important;
    max-height: calc(100vh - 52px);
    padding: 0 !important;
    border: 1px solid var(--sk-line);
    border-radius: 14px !important;
    color: var(--sk-text);
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(8, 13, 31, 0.30);
}

#section_form_overlay.sk-section-modal-overlay .sk-sections-popup form {
    width: 100% !important;
    max-height: calc(100vh - 52px);
    min-height: 0;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-form-content {
    display: grid;
    grid-template-rows: 92px minmax(0, 1fr) 74px;
    max-height: calc(100vh - 52px);
    min-height: 0;
    overflow: hidden;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 20px 28px 15px 34px;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-icon svg,
#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head h3 {
    margin: 0 0 7px;
    color: var(--sk-text);
    font-size: 25px;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head p {
    margin: 0;
    color: var(--sk-muted);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head a {
    width: 40px;
    height: 40px;
    border: 1px solid #d7e0ee;
    border-radius: 9px;
    color: var(--sk-text);
    background: #ffffff;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head a:hover {
    border-color: #c4d4ee;
    background: #f7faff;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head a svg {
    width: 19px;
    height: 19px;
}

#section_form_overlay.sk-section-modal-overlay .sk-section-form-layout {
    grid-template-columns: 194px minmax(0, 1fr);
    gap: 28px;
    min-height: 0;
    padding: 0 34px 14px;
    overflow: hidden;
}

#section_form_overlay.sk-section-modal-overlay .sk-section-form-aside {
    min-height: 0;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: #fbfcff;
}

#section_form_overlay.sk-section-modal-overlay .sk-section-form-aside::after {
    opacity: .22;
    background-image: radial-gradient(circle, rgba(9, 99, 255, 0.34) 1.2px, transparent 1.7px);
}

#section_form_overlay.sk-section-modal-overlay .sk-section-illustration {
    min-height: 154px;
}

#section_form_overlay.sk-section-modal-overlay .sk-section-illustration svg {
    width: min(100%, 150px);
    filter: drop-shadow(0 10px 14px rgba(9, 99, 255, 0.14));
}

#section_form_overlay.sk-section-modal-overlay .sk-section-form-aside strong {
    color: var(--sk-text);
    font-size: 14px;
}

#section_form_overlay.sk-section-modal-overlay .sk-section-form-aside p {
    color: var(--sk-muted);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

#section_form_overlay.sk-section-modal-overlay .sk-sections-form-grid {
    align-content: start;
    column-gap: 28px;
    row-gap: 13px;
    min-height: 0;
    padding-right: 2px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6d4ea transparent;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-field span {
    margin-bottom: 7px;
    color: var(--sk-text);
    font-size: 13px;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-field b {
    color: #f01624;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-field input,
#section_form_overlay.sk-section-modal-overlay .sk-classes-field select,
#section_form_overlay.sk-section-modal-overlay .sk-classes-field textarea {
    border: 1px solid #d7e0ee;
    border-radius: 7px;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-field input,
#section_form_overlay.sk-section-modal-overlay .sk-classes-field select {
    height: 40px;
}

#section_form_overlay.sk-section-modal-overlay .sk-sections-notes textarea {
    height: 78px;
    border-color: #d7e0ee;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-field input::placeholder,
#section_form_overlay.sk-section-modal-overlay .sk-classes-field textarea::placeholder {
    color: #7b869e;
    opacity: 1;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 34px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--sk-line);
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button {
    width: auto;
    height: 44px;
    gap: 10px;
    border-radius: 8px;
    font-size: 15px;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button:first-child {
    min-width: 126px;
    border: 1px solid #b8c4da;
    color: var(--sk-text);
    background: #ffffff;
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button:last-child {
    min-width: 168px;
    color: #ffffff;
    background: #299b46;
    box-shadow: 0 10px 18px rgba(41, 155, 70, 0.2);
}

#section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

@media (max-height: 760px), (max-width: 1180px) {
    .sk-classes-popup {
        width: min(920px, calc(100vw - 28px)) !important;
        padding: 22px 28px 20px !important;
    }

    .sk-classes-popup-head {
        margin-bottom: 16px;
    }

    .sk-classes-form-grid {
        column-gap: 28px;
        row-gap: 10px;
    }

    .sk-classes-field span {
        margin-bottom: 7px;
    }

    .sk-classes-field input,
    .sk-classes-field select {
        height: 38px;
    }

    .sk-classes-field small {
        margin-top: 5px;
        font-size: 10px;
    }

    .sk-classes-popup-actions {
        margin-top: 16px;
        padding-top: 15px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup {
        width: min(820px, calc(100vw - 36px)) !important;
        max-height: calc(100vh - 36px);
        border-radius: 11px !important;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup form {
        max-height: calc(100vh - 36px);
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-form-content {
        grid-template-rows: 70px minmax(0, 1fr) 56px;
        max-height: calc(100vh - 36px);
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head {
        grid-template-columns: minmax(0, 1fr) 34px;
        gap: 13px;
        padding: 14px 22px 10px 28px;
    }

    .sk-classes-popup-title {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
    }

    .sk-classes-popup-icon {
        width: 44px;
        height: 44px;
    }

    .sk-classes-popup-icon svg {
        width: 25px;
        height: 25px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head h3 {
        margin-bottom: 4px;
        font-size: 20px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head p {
        font-size: 11px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head a {
        width: 33px;
        height: 33px;
        border-radius: 7px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-form-grid {
        column-gap: 22px;
        row-gap: 9px;
        padding: 0 28px 10px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-field span {
        margin-bottom: 6px;
        font-size: 11px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-field input,
    #class_form_overlay.sk-class-modal-overlay .sk-classes-field select {
        height: 32px;
        border-radius: 6px;
        font-size: 11px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-field small {
        font-size: 9px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions {
        gap: 12px;
        margin: 0 28px;
        padding: 8px 0 10px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button {
        height: 36px;
        border-radius: 6px;
        font-size: 12px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button:first-child {
        min-width: 108px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button:last-child {
        min-width: 144px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions svg {
        width: 16px;
        height: 16px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-popup {
        width: min(820px, calc(100vw - 36px)) !important;
        max-height: calc(100vh - 36px);
        border-radius: 11px !important;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-popup form {
        max-height: calc(100vh - 36px);
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-form-content {
        grid-template-rows: 70px minmax(0, 1fr) 56px;
        max-height: calc(100vh - 36px);
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head {
        grid-template-columns: minmax(0, 1fr) 34px;
        gap: 13px;
        padding: 14px 22px 10px 28px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head h3 {
        margin-bottom: 4px;
        font-size: 20px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head p {
        font-size: 11px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head a {
        width: 33px;
        height: 33px;
        border-radius: 7px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-layout {
        grid-template-columns: 158px minmax(0, 1fr);
        gap: 22px;
        padding: 0 28px 10px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-aside {
        padding: 13px;
        border-radius: 10px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-illustration {
        min-height: 108px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-illustration svg {
        width: 112px;
        stroke-width: 6;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-aside strong {
        font-size: 12px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-aside p {
        font-size: 10px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-form-grid {
        column-gap: 22px;
        row-gap: 9px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-field span {
        margin-bottom: 6px;
        font-size: 11px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-field input,
    #section_form_overlay.sk-section-modal-overlay .sk-classes-field select {
        height: 32px;
        border-radius: 6px;
        font-size: 11px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-notes textarea {
        height: 58px;
        padding: 10px 11px;
        border-radius: 6px;
        font-size: 11px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions {
        gap: 12px;
        margin: 0 28px;
        padding: 8px 0 10px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button {
        height: 36px;
        border-radius: 6px;
        font-size: 12px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button:first-child {
        min-width: 108px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button:last-child {
        min-width: 144px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 760px) {
    #class_form_overlay.sk-class-modal-overlay {
        padding: 7px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup {
        width: min(460px, calc(100vw - 14px)) !important;
        max-height: calc(100vh - 16px);
        border-radius: 8px !important;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup form {
        max-height: calc(100vh - 16px);
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-form-content {
        grid-template-rows: 42px minmax(0, 1fr) 34px;
        max-height: calc(100vh - 16px);
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head {
        grid-template-columns: minmax(0, 1fr) 22px;
        gap: 7px;
        padding: 8px 12px 5px 14px;
    }

    .sk-classes-popup-title {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 7px;
    }

    .sk-classes-popup-icon {
        width: 24px;
        height: 24px;
    }

    .sk-classes-popup-icon svg {
        width: 14px;
        height: 14px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head h3 {
        margin-bottom: 2px;
        font-size: 12px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head p {
        font-size: 7px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head a {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-head svg {
        width: 12px;
        height: 12px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-form-grid {
        column-gap: 8px;
        row-gap: 5px;
        padding: 0 14px 5px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-field span {
        margin-bottom: 3px;
        font-size: 6px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-field input,
    #class_form_overlay.sk-class-modal-overlay .sk-classes-field select {
        height: 18px;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 6px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-field small {
        margin-top: 2px;
        font-size: 5px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions {
        gap: 6px;
        margin: 0 14px;
        padding: 6px 0;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button {
        height: 22px;
        border-radius: 5px;
        font-size: 7px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button:first-child {
        min-width: 58px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions button:last-child {
        min-width: 82px;
    }

    #class_form_overlay.sk-class-modal-overlay .sk-classes-popup-actions svg {
        width: 9px;
        height: 9px;
    }

    #section_form_overlay.sk-section-modal-overlay {
        padding: 7px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-popup {
        width: min(460px, calc(100vw - 14px)) !important;
        max-height: calc(100vh - 16px);
        border-radius: 8px !important;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-popup form {
        max-height: calc(100vh - 16px);
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-form-content {
        grid-template-rows: 42px minmax(0, 1fr) 34px;
        max-height: calc(100vh - 16px);
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head {
        grid-template-columns: minmax(0, 1fr) 22px;
        gap: 7px;
        padding: 8px 12px 5px 14px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head h3 {
        margin-bottom: 2px;
        font-size: 12px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head p {
        font-size: 7px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head a {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-head a svg {
        width: 12px;
        height: 12px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-layout {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 8px;
        padding: 0 14px 5px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-aside {
        padding: 6px;
        border-radius: 6px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-aside::after {
        right: 4px;
        bottom: 4px;
        width: 36px;
        height: 34px;
        background-size: 7px 7px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-illustration {
        min-height: 58px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-illustration svg {
        width: 58px;
        stroke-width: 5;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-aside strong {
        margin-top: 5px;
        font-size: 7px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-section-form-aside p {
        margin-top: 4px;
        font-size: 5px;
        line-height: 1.35;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-form-grid {
        column-gap: 8px;
        row-gap: 5px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-field span {
        margin-bottom: 3px;
        font-size: 6px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-field input,
    #section_form_overlay.sk-section-modal-overlay .sk-classes-field select {
        height: 18px;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 6px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-sections-notes textarea {
        height: 32px;
        padding: 5px;
        border-radius: 4px;
        font-size: 6px;
        line-height: 1.3;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions {
        gap: 6px;
        margin: 0 14px;
        padding: 6px 0;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button {
        height: 22px;
        border-radius: 5px;
        font-size: 7px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button:first-child {
        min-width: 58px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions button:last-child {
        min-width: 88px;
    }

    #section_form_overlay.sk-section-modal-overlay .sk-classes-popup-actions svg {
        width: 9px;
        height: 9px;
    }
}

.sk-classes-message-popup {
    width: auto !important;
    min-width: min(493px, calc(100vw - 48px)) !important;
    height: auto !important;
    align-items: center !important;
    padding: 20px !important;
}

.sk-classes-message-popup .content-popup {
    margin-top: 0 !important;
    padding: 0 !important;
}

.sk-classes-message-popup .btn-full {
    margin-top: 27px;
    border-radius: 8px;
    background-color: #639368;
}

.sk-classes-message-popup .btn-full p {
    color: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 20px;
}

@media (max-width: 1120px), (max-height: 680px) {
    .sk-classes-body {
        --sk-classes-main-pad-x: clamp(12px, 1.7vw, 20px);
    }

    .sk-classes-body .sk-dashboard-topbar {
        grid-template-columns: minmax(185px, 310px) minmax(245px, 1fr) minmax(180px, 245px);
        gap: 12px;
    }

    .sk-classes-stats {
        gap: 10px;
    }

    .sk-classes-stats article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sk-classes-toolbar {
        grid-template-columns: minmax(180px, 310px) minmax(0, 1fr);
        gap: 10px;
    }

    .sk-classes-controls {
        gap: 7px;
    }

    .sk-classes-table th,
    .sk-classes-table td {
        padding-left: 7px;
        padding-right: 7px;
    }
}

.sk-teachers-actions .sk-teacher-action-menu svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teachers-actions .sk-teacher-action-menu svg circle {
    fill: none;
    stroke: currentColor;
}

.sk-teacher-action-menu-divider {
    display: block;
    height: 1px;
    margin: 8px 14px 7px;
    background: #dfe7f4;
}

.sk-teachers-actions .sk-teacher-action-menu .teacher-mark-inactive-btn {
    color: #ff1f2d;
}

.sk-teachers-actions .sk-teacher-action-menu .teacher-mark-inactive-btn:hover {
    color: #ff1f2d;
    background: #fff4f5;
}

.sk-teachers-actions .sk-teacher-action-menu .teacher-reactivate-btn {
    color: #16a34a;
}

.sk-teachers-actions .sk-teacher-action-menu .teacher-reactivate-btn:hover {
    color: #16a34a;
    background: #f0fdf4;
}

.sk-teachers-actions svg {
    width: 19px;
    height: 19px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-teachers-main {
        grid-template-rows: 48px 62px minmax(0, 1fr) 20px;
        gap: 8px;
    }

    .sk-teachers-add-button {
        width: 150px;
    }

    .sk-teachers-panel {
        grid-template-rows: 96px minmax(0, 1fr) 28px;
    }

    .sk-teachers-filter-row {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, .85fr) clamp(58px, 7vw, 76px) clamp(68px, 7.5vw, 92px);
        gap: clamp(6px, .8vw, 10px);
    }

    .sk-teachers-filter-row .sk-teachers-select,
    .sk-teachers-filter-row .sk-teachers-search {
        padding-left: clamp(7px, 1vw, 10px);
        padding-right: clamp(7px, 1vw, 10px);
    }

    .sk-teachers-filter-row .sk-teachers-search svg {
        margin-right: clamp(5px, .8vw, 8px);
    }

    .sk-teachers-table th,
    .sk-teachers-table td {
        padding: 0 9px;
    }

    .sk-teachers-table th {
        height: 36px;
        font-size: 11px;
    }

    .sk-teachers-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .sk-teachers-table td {
        height: 42px;
        font-size: 12px;
    }

    .sk-teachers-avatar {
        width: 32px;
        height: 32px;
    }

    .sk-teachers-status {
        min-width: 54px;
        height: 22px;
        border-radius: 6px;
        font-size: 11px;
    }

    .sk-teachers-actions {
        gap: 7px;
    }

    .sk-teachers-actions a,
    .sk-teachers-actions button {
        width: 29px;
        height: 29px;
        border-radius: 6px;
    }

    .sk-teachers-actions svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 760px) {
    .sk-teachers-main {
        grid-template-rows: 30px 38px minmax(0, 1fr) 15px;
        gap: 4px;
    }

    .sk-teachers-add-button {
        width: 74px;
    }

    .sk-teachers-panel {
        grid-template-rows: 58px minmax(0, 1fr) 18px;
    }

    .sk-teachers-filter-row {
        grid-template-columns: minmax(82px, 1.15fr) minmax(54px, .8fr) minmax(58px, .8fr) 40px 38px;
        gap: 4px;
    }

    .sk-teachers-table {
        min-width: 440px;
    }

    .sk-teachers-table th,
    .sk-teachers-table td {
        padding: 0 4px;
    }

    .sk-teachers-table th {
        height: 18px;
        font-size: 5px;
    }

    .sk-teachers-stat-icon svg {
        width: 11px;
        height: 11px;
    }

    .sk-teachers-table td {
        height: 22px;
        font-size: 5px;
    }

    .sk-teachers-stat-icon svg {
        width: 11px;
        height: 11px;
    }

    .sk-teachers-avatar {
        width: 17px;
        height: 17px;
        border-radius: 4px;
    }

    .sk-teachers-status {
        min-width: 26px;
        height: 11px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-teachers-actions {
        gap: 3px;
    }

    .sk-teachers-actions a,
    .sk-teachers-actions button {
        width: 13px;
        height: 13px;
        border-radius: 3px;
    }

    .sk-teachers-actions svg {
        width: 7px;
        height: 7px;
    }
}

.sk-student-form-overlay {
    background: rgba(12, 18, 31, 0.58);
    backdrop-filter: blur(2px);
}

.sk-student-form-modal {
    width: min(1100px, calc(100vw - 46px));
    max-height: calc(100vh - 46px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(8, 13, 31, 0.28);
    color: #071553;
}

.sk-student-form-modal form {
    display: grid;
    grid-template-rows: 94px minmax(0, 1fr) auto 46px;
    max-height: calc(100vh - 46px);
    min-height: 0;
}

.sk-student-form-header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    gap: 18px;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #dfe8f5;
}

.sk-student-form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #299b46;
    background: #e3f5e8;
}

.sk-student-form-icon svg,
.sk-student-form-close svg,
.sk-student-upload-btn svg,
.sk-student-remove-photo svg,
.sk-student-form-cancel svg,
.sk-student-form-submit svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-student-form-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.2;
}

.sk-student-form-header h2 {
    margin: 0 0 5px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0;
}

.sk-student-form-header p {
    margin: 0;
    color: #3f4c72;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-student-form-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d7e0ee;
    border-radius: 8px;
    color: #071553;
    text-decoration: none;
}

.sk-student-form-close svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.sk-student-form-body {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 32px;
    min-height: 0;
    padding: 22px 28px 8px;
    overflow: hidden;
}

.sk-student-photo-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 26px 20px 20px;
    border: 1px solid #dce8dc;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbfffb 0%, #ffffff 100%);
}

.sk-student-photo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 158px;
    overflow: hidden;
    border-radius: 50%;
    background: #eef1f7;
}

.sk-student-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-student-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 178px;
    height: 44px;
    margin-top: 24px;
    border: 1px dashed #0963ff;
    border-radius: 7px;
    color: #0963ff;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.sk-student-upload-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.sk-student-photo-panel > p {
    margin: 12px 0 24px;
    color: #68748e;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}

.sk-student-remove-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 178px;
    height: 42px;
    margin-top: auto;
    border: 0;
    border-top: 1px solid #dfe8f5;
    color: #ff1f2d;
    background: transparent;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.sk-student-remove-photo svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.sk-student-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 12px 30px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.sk-student-form-grid label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sk-student-form-grid label > span {
    margin-bottom: 7px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-student-form-grid input,
.sk-student-form-grid select,
.sk-student-form-grid textarea {
    width: 100%;
    border: 1px solid #d7e0ee;
    border-radius: 6px;
    outline: 0;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-student-form-grid input,
.sk-student-form-grid select {
    height: 34px;
    padding: 0 12px;
}

.sk-student-form-grid textarea {
    height: 48px;
    padding: 11px 12px;
    resize: none;
    line-height: 1.35;
}

.sk-student-form-grid input::placeholder,
.sk-student-form-grid textarea::placeholder {
    color: #7b869e;
}

.sk-student-form-full {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.sk-student-form-full > span {
    margin: 11px 0 0 !important;
}

.sk-student-form-wide {
    grid-column: span 2;
}

.sk-student-submit-progress {
    margin: 0 28px;
}

.sk-student-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 2px 28px;
    border-top: 1px solid #dfe8f5;
}

.sk-student-form-cancel,
.sk-student-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    border-radius: 7px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    text-decoration: none;
}

.sk-student-form-cancel {
    min-width: 136px;
    border: 1px solid #d7e0ee;
    color: #071553;
    background: #ffffff;
}

.sk-student-form-submit {
    min-width: 176px;
    border: 0;
    color: #ffffff;
    background: #3f9d56;
    box-shadow: 0 10px 16px rgba(63, 157, 86, 0.2);
    cursor: pointer;
}

.sk-student-form-cancel svg,
.sk-student-form-submit svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.sk-student-form-submit:disabled {
    opacity: 0.72;
    cursor: wait;
}

.sk-teacher-form-overlay {
    background: rgba(12, 18, 31, 0.58);
    backdrop-filter: blur(2px);
}

.sk-teacher-form-modal {
    width: min(1070px, calc(100vw - 52px));
    max-height: calc(100vh - 52px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    color: #071553;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(8, 13, 31, 0.30);
}

.sk-teacher-form-modal form {
    display: grid;
    grid-template-rows: 98px minmax(0, 1fr) 72px;
    max-height: calc(100vh - 52px);
    min-height: 0;
}

.sk-teacher-form-header {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 18px;
    padding: 24px 28px 16px 38px;
}

.sk-teacher-form-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #0963ff;
    background: #eaf2ff;
}

.sk-teacher-form-icon svg,
.sk-teacher-form-close svg,
.sk-teacher-upload-btn svg,
.sk-teacher-form-submit svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-form-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 2.2;
}

.sk-teacher-form-header h2 {
    margin: 0 0 7px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 26px;
    line-height: 1;
}

.sk-teacher-form-header p {
    margin: 0;
    color: #536181;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-form-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d7e0ee;
    border-radius: 9px;
    color: #071553;
    text-decoration: none;
}

.sk-teacher-form-close svg {
    width: 21px;
    height: 21px;
    stroke-width: 2;
}

.sk-teacher-form-body {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 28px;
    min-height: 0;
    padding: 0 38px 14px;
    overflow: hidden;
}

.sk-teacher-photo-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 365px;
    height: auto;
    align-self: start;
    padding: 12px;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
}

.sk-teacher-photo-preview {
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border: 1px dashed #c9d8ef;
    border-radius: 12px;
    background: #fbfcff;
}

.sk-teacher-photo-preview::before {
    content: "";
    display: none;
    width: 125px;
    height: 125px;
    opacity: 0.7;
    background: linear-gradient(#b8d2ff 0 0) center 16px / 54px 54px no-repeat,
        radial-gradient(circle at 50% 32%, #b8d2ff 0 26px, transparent 27px),
        radial-gradient(ellipse at 50% 86%, #b8d2ff 0 54px, transparent 55px);
    border-radius: 50%;
}

.sk-teacher-photo-preview img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-teacher-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 194px;
    height: 42px;
    margin-top: 18px;
    border: 1px solid #0963ff;
    border-radius: 7px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-upload-btn svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.2;
}

.sk-teacher-photo-panel > p {
    margin: 12px 0 0;
    color: #68748e;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    text-align: center;
}

.sk-teacher-signature-preview {
    display: grid;
    place-items: center;
    width: 100%;
    height: 62px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px dashed #c9d8ef;
    border-radius: 10px;
    background: #fbfcff;
}

.sk-teacher-signature-preview img {
    display: block;
    max-width: 90%;
    max-height: 50px;
    object-fit: contain;
}

.sk-teacher-signature-preview img[hidden] {
    display: none;
}

.sk-teacher-signature-preview i {
    color: #8b96a8;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11.5px;
    font-style: italic;
}

.sk-teacher-signature-preview i[hidden] {
    display: none;
}

.sk-teacher-upload-btn.is-signature {
    height: 36px;
    margin-top: 10px;
    font-size: 12.5px;
}

.sk-teacher-upload-btn.is-signature svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.sk-teacher-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 11px 28px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.sk-teacher-form-grid label {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.sk-teacher-form-grid label > span {
    margin-top: 10px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-form-grid input,
.sk-teacher-form-grid select,
.sk-teacher-form-grid textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d7e0ee;
    border-radius: 6px;
    outline: 0;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-form-grid input,
.sk-teacher-form-grid select {
    height: 36px;
    padding: 0 12px;
}

.sk-teacher-form-grid select[multiple] {
    overflow: hidden;
}

.sk-teacher-form-grid textarea {
    height: 56px;
    padding: 11px 12px;
    resize: none;
    line-height: 1.35;
}

.sk-teacher-form-grid input::placeholder,
.sk-teacher-form-grid textarea::placeholder {
    color: #7b869e;
}

.sk-teacher-form-grid small {
    grid-column: 2;
    margin-top: -5px;
    color: #536181;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

.sk-teacher-form-full {
    grid-column: 1 / -1;
}

.sk-teacher-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 38px;
    padding: 12px 0 14px;
    border-top: 1px solid #dfe8f5;
}

.sk-teacher-form-cancel,
.sk-teacher-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-form-cancel {
    min-width: 128px;
    border: 1px solid #b8c4da;
    color: #071553;
    background: #ffffff;
}

.sk-teacher-form-submit {
    min-width: 184px;
    border: 0;
    color: #ffffff;
    background: #299b46;
    box-shadow: 0 10px 18px rgba(41, 155, 70, 0.2);
}

.sk-teacher-form-submit svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-teacher-form-modal {
        width: min(900px, calc(100vw - 36px));
        max-height: calc(100vh - 36px);
        border-radius: 11px;
    }

    .sk-teacher-form-modal form {
        grid-template-rows: 72px minmax(0, 1fr) 56px;
        max-height: calc(100vh - 36px);
    }

    .sk-teacher-form-header {
        grid-template-columns: 46px minmax(0, 1fr) 34px;
        gap: 13px;
        padding: 15px 22px 10px 30px;
    }

    .sk-teacher-form-icon {
        width: 44px;
        height: 44px;
    }

    .sk-teacher-form-icon svg {
        width: 26px;
        height: 26px;
    }

    .sk-teacher-form-header h2 {
        margin-bottom: 4px;
        font-size: 20px;
    }

    .sk-teacher-form-header p {
        font-size: 12px;
    }

    .sk-teacher-form-close {
        width: 33px;
        height: 33px;
        border-radius: 7px;
    }

    .sk-teacher-form-close svg {
        width: 18px;
        height: 18px;
    }

    .sk-teacher-form-body {
        grid-template-columns: 185px minmax(0, 1fr);
        gap: 22px;
        padding: 0 30px 10px;
    }

    .sk-teacher-photo-panel {
        min-height: 308px;
        height: auto;
        padding: 10px;
        border-radius: 10px;
    }

    .sk-teacher-signature-preview {
        height: 52px;
        margin-top: 10px;
    }

    .sk-teacher-signature-preview img {
        max-height: 42px;
    }

    .sk-teacher-upload-btn.is-signature {
        height: 32px;
        margin-top: 8px;
        font-size: 11px;
    }

    .sk-teacher-photo-preview {
        height: 206px;
        border-radius: 10px;
    }

    .sk-teacher-photo-preview::before {
        width: 100px;
        height: 100px;
        background-size: 42px 42px, auto, auto;
    }

    .sk-teacher-upload-btn {
        width: 160px;
        height: 36px;
        margin-top: 14px;
        gap: 8px;
        font-size: 12px;
    }

    .sk-teacher-upload-btn svg {
        width: 16px;
        height: 16px;
    }

    .sk-teacher-photo-panel > p {
        margin-top: 9px;
        font-size: 10px;
    }

    .sk-teacher-form-grid {
        gap: 8px 20px;
    }

    .sk-teacher-form-grid label {
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 9px;
    }

    .sk-teacher-form-grid label > span {
        margin-top: 8px;
        font-size: 11px;
    }

    .sk-teacher-form-grid input,
    .sk-teacher-form-grid select {
        height: 30px;
        padding: 0 10px;
        border-radius: 5px;
        font-size: 11px;
    }

    .sk-teacher-form-grid textarea {
        height: 46px;
        padding: 9px 10px;
        border-radius: 5px;
        font-size: 11px;
    }

    .sk-teacher-form-grid small {
        margin-top: -4px;
        font-size: 9px;
    }

    .sk-teacher-form-footer {
        gap: 12px;
        margin: 0 30px;
        padding: 8px 0 10px;
    }

    .sk-teacher-form-cancel,
    .sk-teacher-form-submit {
        height: 36px;
        border-radius: 6px;
        font-size: 12px;
    }

    .sk-teacher-form-cancel {
        min-width: 108px;
    }

    .sk-teacher-form-submit {
        min-width: 154px;
    }

    .sk-teacher-form-submit svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 760px) {
    .sk-teacher-form-modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 10px;
    }

    .sk-teacher-form-modal form {
        grid-template-rows: 58px minmax(0, 1fr) 54px;
        max-height: calc(100vh - 16px);
    }

    .sk-teacher-form-header {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
        gap: 10px;
        padding: 9px 14px;
        border-bottom: 1px solid #dfe8f5;
    }

    .sk-teacher-form-icon {
        width: 34px;
        height: 34px;
    }

    .sk-teacher-form-icon svg {
        width: 20px;
        height: 20px;
    }

    .sk-teacher-form-header h2 {
        margin-bottom: 3px;
        font-size: 16px;
    }

    .sk-teacher-form-header p {
        font-size: 11px;
    }

    .sk-teacher-form-close {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }

    .sk-teacher-form-close svg {
        width: 18px;
        height: 18px;
    }

    .sk-teacher-form-body {
        grid-template-columns: 124px minmax(0, 1fr);
        gap: 14px;
        padding: 12px 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .sk-teacher-photo-panel {
        min-height: 0;
        height: auto;
        padding: 8px;
        border-radius: 8px;
    }

    .sk-teacher-signature-preview {
        height: 42px;
        margin-top: 8px;
        border-radius: 6px;
    }

    .sk-teacher-signature-preview img {
        max-height: 34px;
    }

    .sk-teacher-signature-preview i {
        font-size: 9px;
    }

    .sk-teacher-upload-btn.is-signature {
        height: 34px;
        margin-top: 7px;
        font-size: 10px;
    }

    .sk-teacher-upload-btn.is-signature svg {
        width: 14px;
        height: 14px;
    }

    .sk-teacher-photo-preview {
        height: 108px;
        border-radius: 8px;
    }

    .sk-teacher-photo-preview::before {
        width: 54px;
        height: 54px;
        background-size: 24px 24px, auto, auto;
    }

    .sk-teacher-upload-btn {
        width: 100%;
        height: 36px;
        margin-top: 9px;
        gap: 6px;
        border-radius: 6px;
        font-size: 10px;
    }

    .sk-teacher-upload-btn svg {
        width: 14px;
        height: 14px;
    }

    .sk-teacher-photo-panel > p {
        margin-top: 7px;
        font-size: 9px;
        line-height: 1.3;
    }

    .sk-teacher-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        overflow: visible;
    }

    .sk-teacher-form-grid label {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .sk-teacher-form-grid label > span {
        margin-top: 0;
        font-size: 11px;
        line-height: 1.2;
    }

    .sk-teacher-form-grid input,
    .sk-teacher-form-grid select {
        height: 36px;
        padding: 0 9px;
        border-radius: 6px;
        font-size: 11px;
    }

    .sk-teacher-form-grid textarea {
        height: 58px;
        padding: 9px;
        border-radius: 6px;
        font-size: 11px;
    }

    .sk-teacher-form-grid small {
        grid-column: auto;
        margin-top: 0;
        font-size: 9px;
        line-height: 1.25;
    }

    .sk-teacher-form-footer {
        gap: 10px;
        margin: 0 14px;
        padding: 8px 0;
        background: #ffffff;
    }

    .sk-teacher-form-cancel,
    .sk-teacher-form-submit {
        height: 38px;
        border-radius: 7px;
        font-size: 12px;
    }

    .sk-teacher-form-cancel {
        min-width: 92px;
    }

    .sk-teacher-form-submit {
        min-width: 132px;
    }

    .sk-teacher-form-submit svg {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-student-form-modal {
        width: min(930px, calc(100vw - 34px));
        max-height: calc(100vh - 34px);
        border-radius: 10px;
    }

    .sk-student-form-modal form {
        grid-template-rows: 72px minmax(0, 1fr) auto 38px;
        max-height: calc(100vh - 34px);
    }

    .sk-student-form-header {
        grid-template-columns: 44px minmax(0, 1fr) 34px;
        gap: 13px;
        padding: 14px 22px;
    }

    .sk-student-form-icon {
        width: 42px;
        height: 42px;
    }

    .sk-student-form-icon svg {
        width: 25px;
        height: 25px;
    }

    .sk-student-form-header h2 {
        margin-bottom: 3px;
        font-size: 18px;
    }

    .sk-student-form-header p {
        font-size: 11px;
    }

    .sk-student-form-close {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }

    .sk-student-form-close svg {
        width: 18px;
        height: 18px;
    }

    .sk-student-form-body {
        grid-template-columns: 176px minmax(0, 1fr);
        gap: 24px;
        padding: 16px 22px 6px;
    }

    .sk-student-photo-panel {
        padding: 18px 14px 14px;
        border-radius: 8px;
    }

    .sk-student-photo-preview {
        width: 118px;
        height: 118px;
    }

    .sk-student-upload-btn {
        gap: 7px;
        width: 142px;
        height: 34px;
        margin-top: 18px;
        border-radius: 6px;
        font-size: 11px;
    }

    .sk-student-upload-btn svg {
        width: 15px;
        height: 15px;
    }

    .sk-student-photo-panel > p {
        margin: 9px 0 17px;
        font-size: 9px;
    }

    .sk-student-remove-photo {
        width: 142px;
        height: 32px;
        gap: 6px;
        font-size: 10px;
    }

    .sk-student-remove-photo svg {
        width: 13px;
        height: 13px;
    }

    .sk-student-form-grid {
        gap: 9px 22px;
    }

    .sk-student-form-grid label > span {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .sk-student-form-grid input,
    .sk-student-form-grid select,
    .sk-student-form-grid textarea {
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-student-form-grid input,
    .sk-student-form-grid select {
        height: 28px;
        padding: 0 9px;
    }

    .sk-student-form-grid textarea {
        height: 38px;
        padding: 8px 9px;
    }

    .sk-student-form-full {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 10px;
    }

    .sk-student-form-full > span {
        margin-top: 8px !important;
    }

    .sk-student-submit-progress {
        margin: 0 22px;
    }

    .sk-student-form-footer {
        gap: 12px;
        padding: 2px 22px;
    }

    .sk-student-form-cancel,
    .sk-student-form-submit {
        height: 34px;
        gap: 8px;
        border-radius: 6px;
        font-size: 12px;
    }

    .sk-student-form-cancel {
        min-width: 112px;
    }

    .sk-student-form-submit {
        min-width: 142px;
    }

    .sk-student-form-cancel svg,
    .sk-student-form-submit svg {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 760px) {
    .sk-student-form-modal {
        width: min(570px, calc(100vw - 16px));
        max-height: calc(100vh - 16px);
        border-radius: 7px;
    }

    .sk-student-form-modal form {
        grid-template-rows: 58px minmax(0, 1fr) auto 54px;
        max-height: calc(100vh - 16px);
    }

    .sk-student-form-header {
        grid-template-columns: 36px minmax(0, 1fr) 34px;
        gap: 10px;
        padding: 9px 14px;
    }

    .sk-student-form-icon {
        width: 34px;
        height: 34px;
    }

    .sk-student-form-icon svg {
        width: 20px;
        height: 20px;
    }

    .sk-student-form-header h2 {
        margin-bottom: 3px;
        font-size: 16px;
    }

    .sk-student-form-header p {
        font-size: 11px;
    }

    .sk-student-form-close {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }

    .sk-student-form-close svg {
        width: 18px;
        height: 18px;
    }

    .sk-student-form-body {
        grid-template-columns: 124px minmax(0, 1fr);
        gap: 14px;
        padding: 12px 14px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .sk-student-photo-panel {
        align-self: start;
        padding: 12px 9px 9px;
        border-radius: 8px;
    }

    .sk-student-photo-preview {
        width: 92px;
        height: 92px;
    }

    .sk-student-upload-btn {
        gap: 6px;
        width: 104px;
        height: 36px;
        margin-top: 12px;
        border-radius: 6px;
        font-size: 10px;
    }

    .sk-student-upload-btn svg {
        width: 14px;
        height: 14px;
    }

    .sk-student-photo-panel > p {
        margin: 8px 0 12px;
        font-size: 9px;
        line-height: 1.3;
    }

    .sk-student-remove-photo {
        width: 104px;
        height: 34px;
        gap: 5px;
        font-size: 10px;
    }

    .sk-student-remove-photo svg {
        width: 13px;
        height: 13px;
    }

    .sk-student-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
        overflow: visible;
    }

    .sk-student-form-grid label > span {
        margin-bottom: 5px;
        font-size: 11px;
        line-height: 1.2;
    }

    .sk-student-form-grid input,
    .sk-student-form-grid select,
    .sk-student-form-grid textarea {
        border-radius: 6px;
        font-size: 11px;
    }

    .sk-student-form-grid input,
    .sk-student-form-grid select {
        height: 36px;
        padding: 0 9px;
    }

    .sk-student-form-grid textarea {
        height: 58px;
        padding: 9px;
    }

    .sk-student-form-full {
        display: flex !important;
        flex-direction: column;
        gap: 0;
    }

    .sk-student-form-full > span {
        margin: 0 0 5px !important;
    }

    .sk-student-submit-progress {
        margin: 0 12px;
    }

    .sk-student-form-footer {
        gap: 10px;
        padding: 8px 14px;
        background: #ffffff;
    }

    .sk-student-form-cancel,
    .sk-student-form-submit {
        height: 38px;
        gap: 6px;
        border-radius: 7px;
        font-size: 12px;
    }

    .sk-student-form-cancel {
        min-width: 92px;
    }

    .sk-student-form-submit {
        min-width: 132px;
    }

    .sk-student-form-cancel svg,
    .sk-student-form-submit svg {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-students-shell {
        grid-template-rows: 74px minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-students-workspace {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .sk-students-sidebar {
        padding: 7px 8px 9px;
    }

    .sk-students-nav {
        gap: 1px;
    }

    .sk-students-nav a {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 8px;
        height: 26px;
        padding: 0 11px;
        border-radius: 9px;
        font-size: 10px;
    }

    .sk-students-nav a::before {
        left: -8px;
        top: 4px;
        height: 14px;
    }

    .sk-students-nav img {
        width: 13px;
        height: 13px;
    }

    .sk-students-main {
        grid-template-rows: 42px 62px minmax(0, 1fr) 18px;
        gap: 6px;
        padding: 12px 24px 0;
    }

    .sk-students-page-main {
        grid-template-rows: 48px 62px minmax(0, 1fr) 18px;
        gap: 8px;
        padding: 12px 12px 0;
    }

    .sk-students-breadcrumb {
        gap: 12px;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .sk-students-heading h1 {
        font-size: 22px;
    }

    .sk-students-add-button {
        width: 136px;
        height: 42px;
        gap: 9px;
        border-radius: 10px;
        font-size: 15px;
    }

    .sk-students-add-button svg {
        width: 21px;
        height: 21px;
    }

    .sk-students-stats {
        gap: 18px;
    }

    .sk-students-stat {
        grid-template-columns: 44px minmax(0, 1fr);
        height: 62px;
        padding: 7px 11px;
        border-radius: 10px;
    }

    .sk-students-stat > span {
        width: 36px;
        height: 36px;
    }

    .sk-students-stat img,
    .sk-students-stat .sk-students-overview-icon {
        width: 24px;
        height: 24px;
    }

    .sk-students-stat strong {
        margin-bottom: 4px;
        font-size: 10px;
    }

    .sk-students-stat b {
        font-size: 18px;
    }

    .sk-students-panel {
        grid-template-rows: 86px minmax(0, 1fr) 28px;
        border-radius: 11px;
    }

    .sk-students-filter-form {
        grid-template-rows: 36px 50px;
    }

    .sk-students-tabs {
        gap: 22px;
        padding: 0 16px;
    }

    .sk-students-tabs button {
        height: 36px;
        gap: 10px;
        font-size: 13px;
    }

    .sk-students-tabs span {
        min-width: 24px;
        height: 22px;
        padding: 0 7px;
    }

    .sk-students-filter-row {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, .85fr) clamp(68px, 7.5vw, 96px);
        gap: clamp(7px, 1vw, 13px);
        padding: 7px clamp(12px, 1.25vw, 16px);
    }

    .sk-students-search,
    .sk-students-select,
    .sk-students-filter-button {
        height: 38px;
        border-radius: 8px;
    }

    .sk-students-search {
        padding: 0 12px;
    }

    .sk-students-search svg {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    .sk-students-search input,
    .sk-students-select select,
    .sk-students-filter-button,
    .sk-students-select span {
        font-size: 12px;
    }

    .sk-students-select {
        gap: 10px;
        padding: 0 10px;
    }

    .sk-students-filter-button svg {
        width: 17px;
        height: 17px;
    }

    .sk-students-table-wrap {
        padding: 0 16px;
    }

    .sk-students-table th {
        height: 34px;
        font-size: 11px;
    }

    .sk-students-table td {
        height: 39px;
        padding: 0 8px;
        font-size: 11px;
    }

    .sk-students-avatar {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    .sk-students-status {
        min-width: 54px;
        height: 24px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-students-actions {
        gap: 6px;
    }

    .sk-students-actions a,
    .sk-students-actions button {
        width: 29px;
        height: 29px;
        border-radius: 7px;
    }

    .sk-students-actions svg {
        width: 16px;
        height: 16px;
    }

    .sk-students-table-footer {
        padding: 0 16px;
        font-size: 10px;
    }

    .sk-students-table-footer .pagination a,
    .sk-students-table-footer .roundBox,
    .sk-students-table-footer .roundBox-active {
        width: 22px;
        height: 22px;
        border-radius: 6px;
    }

    .sk-students-footer {
        gap: 10px;
        height: 18px;
        padding: 0;
        font-size: 9px;
    }
}

@media (max-width: 760px) {
    .sk-students-shell {
        grid-template-rows: 64px minmax(0, 1fr);
    }

    .sk-students-workspace {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sk-students-sidebar {
        padding: 9px 6px 9px;
    }

    .sk-students-nav {
        gap: 3px;
    }

    .sk-students-nav-bottom {
        padding-top: 8px;
    }

    .sk-students-nav a {
        grid-template-columns: 15px minmax(0, 1fr);
        gap: 7px;
        height: 26px;
        padding: 0 8px;
        border-radius: 7px;
        font-size: 9px;
    }

    .sk-students-nav a::before {
        left: -6px;
        top: 6px;
        width: 3px;
        height: 15px;
    }

    .sk-students-nav img {
        width: 14px;
        height: 14px;
    }

    .sk-students-main {
        grid-template-rows: 28px 38px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 9px 10px 0;
    }

    .sk-students-page-main {
        grid-template-rows: 30px 38px minmax(0, 1fr) 12px;
        padding: 9px 7px 0;
    }

    .sk-students-breadcrumb {
        gap: 6px;
        margin-bottom: 4px;
        font-size: 7px;
    }

    .sk-students-heading h1 {
        font-size: 13px;
    }

    .sk-students-add-button {
        width: 80px;
        height: 27px;
        gap: 5px;
        border-radius: 8px;
        font-size: 8px;
    }

    .sk-students-add-button svg {
        width: 13px;
        height: 13px;
    }

    .sk-students-stats {
        gap: 7px;
    }

    .sk-students-stat {
        grid-template-columns: 28px minmax(0, 1fr);
        height: 38px;
        padding: 6px 5px;
        border-radius: 7px;
    }

    .sk-students-stat > span {
        width: 19px;
        height: 19px;
    }

    .sk-students-stat img,
    .sk-students-stat .sk-students-overview-icon {
        width: 13px;
        height: 13px;
    }

    .sk-students-stat strong {
        margin-bottom: 2px;
        font-size: 5px;
    }

    .sk-students-stat b {
        font-size: 9px;
    }

    .sk-students-panel {
        grid-template-rows: 56px minmax(0, 1fr) 20px;
        border-radius: 8px;
    }

    .sk-students-filter-form {
        grid-template-rows: 22px 34px;
    }

    .sk-students-tabs {
        gap: 14px;
        padding: 0 8px;
    }

    .sk-students-tabs button {
        height: 22px;
        padding: 0 2px;
        gap: 5px;
        font-size: 8px;
    }

    .sk-students-tabs button.is-active::after {
        height: 2px;
    }

    .sk-students-tabs span {
        min-width: 15px;
        height: 14px;
        padding: 0 4px;
    }

    .sk-students-filter-row {
        grid-template-columns: minmax(105px, 1.15fr) minmax(72px, .8fr) minmax(78px, .8fr) 48px;
        gap: 5px;
        padding: 6px 8px;
    }

    .sk-students-search,
    .sk-students-select,
    .sk-students-filter-button {
        height: 25px;
        border-radius: 6px;
    }

    .sk-students-search {
        padding: 0 6px;
    }

    .sk-students-search svg {
        width: 11px;
        height: 11px;
        margin-right: 4px;
    }

    .sk-students-search input,
    .sk-students-select select,
    .sk-students-filter-button,
    .sk-students-select span {
        font-size: 6px;
    }

    .sk-students-select {
        gap: 4px;
        padding: 0 5px;
    }

    .sk-students-filter-button {
        gap: 3px;
    }

    .sk-students-filter-button svg {
        width: 10px;
        height: 10px;
    }

    .sk-students-table-wrap {
        padding: 0 8px;
    }

    .sk-students-table th,
    .sk-students-table td {
        padding: 0 4px;
    }

    .sk-students-table th {
        height: 22px;
        font-size: 5px;
    }

    .sk-students-table td {
        height: 27px;
        font-size: 6px;
    }

    .sk-students-avatar {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .sk-students-status {
        min-width: 32px;
        height: 15px;
        padding: 0 5px;
        border-radius: 5px;
        font-size: 5px;
    }

    .sk-students-actions {
        gap: 3px;
    }

    .sk-students-actions a,
    .sk-students-actions button {
        width: 17px;
        height: 17px;
        border-radius: 5px;
    }

    .sk-students-actions svg {
        width: 9px;
        height: 9px;
    }

    .sk-students-table th:nth-child(1),
    .sk-students-table td:nth-child(1) {
        width: 36px;
    }

    .sk-students-table th:nth-child(9),
    .sk-students-table td:nth-child(9) {
        width: 58px;
    }

    .sk-students-table-footer {
        padding: 0 8px;
        font-size: 5px;
    }

    .sk-students-table-footer .pagination {
        gap: 2px;
    }

    .sk-students-table-footer .pagination a,
    .sk-students-table-footer .roundBox,
    .sk-students-table-footer .roundBox-active {
        width: 14px;
        height: 14px;
        border-radius: 4px;
    }

    .sk-students-table-footer img {
        width: 8px;
        height: 8px;
    }

    .sk-students-footer {
        gap: 5px;
        height: 12px;
        padding: 0;
        font-size: 5px;
    }

    .sk-teachers-main {
        grid-template-rows: 30px 38px minmax(0, 1fr) 15px;
    }

    .sk-teachers-add-button {
        width: 74px;
    }

    .sk-teachers-panel {
        grid-template-rows: 58px minmax(0, 1fr) 18px;
    }

    .sk-teachers-filter-row {
        grid-template-columns: minmax(82px, 1.15fr) minmax(54px, .8fr) minmax(58px, .8fr) 40px 38px;
        gap: 4px;
    }

    .sk-teachers-table {
        min-width: 440px;
    }

    .sk-teachers-table td {
        height: 22px;
        font-size: 5px;
    }

    .sk-teachers-avatar {
        width: 17px;
        height: 17px;
        border-radius: 4px;
    }

    .sk-teachers-status {
        min-width: 26px;
        height: 11px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-teachers-actions a,
    .sk-teachers-actions button {
        width: 13px;
        height: 13px;
        border-radius: 3px;
    }

    .sk-teachers-actions svg {
        width: 7px;
        height: 7px;
    }

    .sk-teachers-table th:nth-child(1),
    .sk-teachers-table td:nth-child(1) {
        width: 30px;
    }

    .sk-teachers-table th:nth-child(8),
    .sk-teachers-table td:nth-child(8) {
        width: 47px;
    }
}

@media (max-height: 430px) {
    .sk-students-shell {
        grid-template-rows: 54px minmax(0, 1fr);
    }

    .sk-students-workspace {
        grid-template-columns: 148px minmax(0, 1fr);
    }

    .sk-students-sidebar {
        padding: 7px 9px;
    }

    .sk-students-nav {
        gap: 2px;
    }

    .sk-students-nav a {
        grid-template-columns: 17px minmax(0, 1fr);
        gap: 6px;
        height: 20px;
        padding: 0 8px;
        font-size: 8px;
    }

    .sk-students-nav img {
        width: 13px;
        height: 13px;
    }

    .sk-students-main {
        grid-template-rows: 24px 32px minmax(0, 1fr) 11px;
        gap: 6px;
        padding: 8px 18px 0;
    }

    .sk-students-page-main {
        grid-template-rows: 30px 32px minmax(0, 1fr) 11px;
        gap: 4px;
        padding: 8px 7px 0;
    }

    .sk-students-heading h1 {
        font-size: 11px;
    }

    .sk-students-breadcrumb {
        margin-bottom: 3px;
        font-size: 7px;
    }

    .sk-students-add-button {
        width: 76px;
        height: 23px;
        font-size: 7px;
    }

    .sk-students-stats {
        gap: 8px;
    }

    .sk-students-stat {
        grid-template-columns: 34px minmax(0, 1fr);
        height: 32px;
        padding: 4px 6px;
    }

    .sk-students-stat > span {
        width: 17px;
        height: 17px;
    }

    .sk-students-stat img,
    .sk-students-stat .sk-students-overview-icon {
        width: 12px;
        height: 12px;
    }

    .sk-students-stat strong {
        margin-bottom: 2px;
        font-size: 5px;
    }

    .sk-students-stat b {
        font-size: 8px;
    }

    .sk-students-panel {
        grid-template-rows: 50px minmax(0, 1fr) 18px;
    }

    .sk-students-filter-form {
        grid-template-rows: 20px 30px;
    }

    .sk-students-tabs button {
        height: 20px;
        gap: 4px;
        font-size: 7px;
    }

    .sk-students-tabs span {
        min-width: 13px;
        height: 12px;
        padding: 0 3px;
    }

    .sk-students-filter-row {
        grid-template-columns: minmax(155px, 1.2fr) minmax(95px, .85fr) minmax(95px, .85fr) 58px;
        gap: 5px;
        padding: 4px 8px;
    }

    .sk-students-search,
    .sk-students-select,
    .sk-students-filter-button {
        height: 22px;
    }

    .sk-students-search input,
    .sk-students-select select,
    .sk-students-filter-button,
    .sk-students-select span {
        font-size: 7px;
    }

    .sk-students-table-wrap {
        padding: 0 8px;
    }

    .sk-students-table th {
        height: 13px;
        font-size: 5px;
    }

    .sk-students-table td {
        height: 16px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-students-avatar {
        width: 13px;
        height: 13px;
        border-radius: 4px;
    }

    .sk-students-actions a,
    .sk-students-actions button {
        width: 12px;
        height: 12px;
    }

    .sk-students-actions svg {
        width: 7px;
        height: 7px;
    }

    .sk-students-status {
        min-width: 28px;
        height: 11px;
        font-size: 5px;
    }

    .sk-students-table-footer,
    .sk-students-footer {
        font-size: 6px;
    }

    .sk-students-footer {
        height: 11px;
        padding: 0;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-login-shell {
        width: calc(100vw - 20px);
        height: calc(100vh - 20px);
        margin: 10px;
        grid-template-rows: minmax(0, 1fr) 42px;
    }

    .sk-login-brand {
        padding: 34px 36px 26px;
    }

    .sk-brand-logo {
        gap: 20px;
        font-size: 54px;
    }

    .sk-brand-mark {
        width: 86px;
        height: 86px;
    }

    .sk-brand-tagline {
        margin-top: 14px;
        margin-left: 16px;
        gap: 13px;
    }

    .sk-brand-title {
        font-size: 19px;
    }

    .sk-brand-subtitle {
        margin-top: 7px;
        font-size: 15px;
    }

    .sk-school-scene {
        min-height: 170px;
        padding-bottom: 8px;
    }

    .sk-school-illustration {
        width: min(70%, 430px);
        max-height: 220px;
    }

    .sk-dot-grid {
        top: 22px;
        width: 76px;
        height: 56px;
        background-size: 18px 18px;
    }

    .sk-feature-row {
        width: min(100%, 610px);
        padding: 13px 18px;
    }

    .sk-feature-item {
        gap: 10px;
        padding: 0 14px;
    }

    .sk-feature-icon {
        width: 44px;
        height: 44px;
    }

    .sk-feature-icon svg {
        width: 23px;
        height: 23px;
    }

    .sk-feature-item strong {
        font-size: 13px;
    }

    .sk-feature-item small {
        font-size: 11px;
        line-height: 1.35;
    }

    .sk-login-panel {
        padding: 26px 38px;
    }

    .sk-login-card {
        width: min(100%, 510px);
        padding: 26px 38px 30px;
    }

    .sk-lock-badge {
        width: 62px;
        height: 62px;
        margin-bottom: 18px;
    }

    .sk-lock-badge svg {
        width: 29px;
        height: 29px;
    }

    .sk-lock-badge-shield svg {
        width: 33px;
        height: 33px;
    }

    .sk-login-header {
        margin-bottom: 22px;
    }

    .sk-login-header h1 {
        font-size: 28px;
    }

    .sk-login-header p {
        font-size: 16px;
    }

    .sk-forgot-header {
        width: min(100%, 350px);
    }

    .sk-login-form {
        gap: 17px;
    }

    .sk-field label,
    .sk-link,
    .sk-remember,
    .sk-input-wrap input {
        font-size: 13px;
    }

    .sk-field label {
        margin-bottom: 8px;
    }

    .sk-input-wrap {
        height: 47px;
    }

    .sk-submit-button {
        height: 51px;
        font-size: 16px;
    }

    .sk-secondary-button {
        height: 51px;
        font-size: 16px;
    }

    .sk-field-help {
        margin-top: 10px;
        font-size: 13px;
    }

    .sk-password-meter {
        gap: 5px;
        margin-top: 12px;
    }

    .sk-password-meter span {
        height: 7px;
    }

    .sk-password-meter strong {
        min-width: 56px;
        font-size: 13px;
    }

    .sk-support-link {
        height: 52px;
        margin-top: 22px;
        font-size: 15px;
    }

    .sk-login-footer {
        padding: 0 46px;
        font-size: 13px;
    }
}

.sk-student-detail-page {
    background: #f7fbff;
}

.sk-student-detail-shell {
    display: grid;
    grid-template-rows: 104px minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    border: 1px solid #d9e5f4;
    border-radius: 10px;
    background: #fbfdff;
}

.sk-student-detail-workspace {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.sk-student-detail-main {
    display: grid;
    grid-template-rows: 68px minmax(0, 1fr) 18px;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    padding: 18px 28px 0;
}

.sk-student-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.sk-student-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin-bottom: 8px;
    color: #263861;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 17px;
}

.sk-student-detail-breadcrumb a {
    color: #0963ff;
    text-decoration: none;
}

.sk-student-detail-heading h1 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
}

.sk-student-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    padding-top: 0;
}

.sk-detail-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    height: 40px;
    padding: 0 17px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.sk-detail-action[hidden] {
    display: none;
}

.sk-detail-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-detail-action-green {
    color: #12a13b;
}

.sk-detail-action-neutral {
    color: #5f6a82;
}

.sk-detail-action-red {
    color: #f01f1f;
}

.sk-detail-action-blue {
    color: #ffffff;
    border-color: #0963ff;
    background: #0963ff;
    box-shadow: 0 12px 26px rgba(9, 99, 255, 0.18);
}

.sk-student-detail-panel {
    display: grid;
    grid-template-rows: 46px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 40, 92, 0.08);
}

.sk-student-detail-main > .sk-students-footer {
    height: 18px;
    font-size: 11px;
}

.sk-student-detail-page .sub-menu-bar {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 22px;
    border-bottom: 1px solid #e2eaf5;
    background: #ffffff;
}

.sk-student-detail-page .bar-item,
.sk-student-detail-page .bar-item-active {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 46px;
    padding: 0;
    color: #2b3a66;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-student-detail-page .bar-item p,
.sk-student-detail-page .bar-item-active p {
    margin: 0;
    padding: 0 10px;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.sk-student-detail-page .bar-item p:hover,
.sk-student-detail-page .bar-item-active p:hover {
    min-width: 0;
    height: auto;
    padding: 0 10px;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: inherit;
}

.sk-student-detail-page .bar-item-active {
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-student-detail-page .bar-item-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #0963ff;
}

.sk-student-detail-page .tab-section {
    min-width: 0;
    min-height: 0;
}

.sk-student-detail-page #student-info {
    display: none;
    grid-template-columns: 246px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 8px 14px 12px;
}

.sk-student-detail-page #student-info.show {
    display: grid;
}

.sk-student-detail-page #student-info > .userInfo {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e2eaf5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(16, 40, 92, 0.05);
}

.sk-student-detail-page #student-main-photo {
    width: 100%;
    height: 132px;
    margin: 0;
    border-radius: 10px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-student-profile-summary {
    min-width: 0;
    padding: 9px 6px 10px;
    border-bottom: 1px solid #e4ebf5;
}

.sk-student-profile-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.sk-student-profile-summary strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-student-profile-summary span {
    flex: 0 0 auto;
    min-width: 50px;
    padding: 4px 8px;
    border-radius: 8px;
    color: #168b31;
    background: #e7f8e9;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}

.sk-student-profile-summary span.is-active {
    color: #168b31;
    background: #e7f8e9;
}

.sk-student-profile-summary span.is-pass-out {
    color: #d97706;
    background: #fff0d7;
}

.sk-student-profile-summary span.is-dropped-out {
    color: #c90008;
    background: #fff0f1;
}

.sk-student-profile-summary dl {
    display: grid;
    gap: 7px;
    margin: 10px 0 0;
}

.sk-student-profile-summary dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.sk-student-profile-summary dt,
.sk-student-profile-summary dd {
    margin: 0;
    color: #4e5d82;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-student-profile-summary dd {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-student-detail-page #student-info > .userInfo > .btn-full,
.sk-student-detail-page #student-info > .userInfo > .twobuttons,
.sk-student-detail-page #student-info > .userInfo > a.menu-anchar {
    display: none;
}

.sk-student-detail-page #student-info .aRecord {
    margin: 9px 0 0;
    padding: 0;
}

.sk-student-detail-page #student-info .aRecord > p {
    margin: 0 0 7px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-student-detail-page #student-info .atRecord {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sk-student-detail-page #student-info .radial {
    --size: 96px !important;
}

.sk-student-detail-page #student-info .atContent {
    min-width: 0;
}

.sk-student-detail-page #student-info .content-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px !important;
    color: #2b3a66;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-student-detail-page #student-info .content-item span {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-student-detail-page #student-info > .content-details {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) 126px minmax(0, 1fr);
    gap: 8px 14px;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 11px 14px;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 12px;
    background: #ffffff;
}

.sk-student-detail-page #student-info .tworows,
.sk-student-detail-page #student-info .item-left-lable {
    display: contents;
}

.sk-student-detail-page #student-info .item-left-lable p,
.sk-student-detail-page #student-info .item-left-lable-text p {
    align-self: center;
    width: auto !important;
    margin: 0;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-student-detail-page #student-info .item-left-lable input,
.sk-student-detail-page #student-info .item-left-lable-text textarea {
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #dbe5f3;
    border-radius: 7px;
    color: #071553;
    background: #fbfdff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-student-detail-page #student-info .item-left-lable-text {
    display: contents;
}

.sk-student-detail-page #student-info .item-left-lable-text textarea {
    height: 32px;
    resize: none;
}

.sk-student-detail-page #student-info-loading {
    grid-column: 1 / -1;
}

.sk-student-detail-page .content-col.tab-section,
.sk-student-detail-page .content.tab-section:not(#student-info) {
    display: none;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.sk-student-detail-page .content-col.tab-section.show,
.sk-student-detail-page .content.tab-section.show:not(#student-info) {
    display: block;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-student-detail-shell {
        grid-template-rows: 74px minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-student-detail-workspace {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .sk-student-detail-main {
        grid-template-rows: 48px minmax(0, 1fr) 18px;
        gap: 8px;
        padding: 12px 12px 0;
    }

    .sk-student-detail-breadcrumb {
        gap: 12px;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .sk-student-detail-heading h1 {
        font-size: 22px;
    }

    .sk-student-detail-actions {
        gap: 10px;
        padding-top: 0;
    }

    .sk-detail-action {
        height: 36px;
        padding: 0 14px;
        border-radius: 7px;
        font-size: 12px;
    }

    .sk-detail-action svg {
        width: 17px;
        height: 17px;
    }

    .sk-student-detail-panel {
        grid-template-rows: 42px minmax(0, 1fr);
        border-radius: 11px;
    }

    .sk-student-detail-page .sub-menu-bar {
        height: 42px;
        gap: 18px;
        padding: 0 18px 0 0;
    }

    .sk-student-detail-page .bar-item,
    .sk-student-detail-page .bar-item-active {
        height: 42px;
        font-size: 12px;
    }

    .sk-student-detail-page #student-info {
        grid-template-columns: 215px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .sk-student-detail-page #student-info > .userInfo {
        padding: 10px 12px;
    }

    .sk-student-detail-page #student-main-photo {
        height: 116px;
        border-radius: 9px;
    }

    .sk-student-profile-summary {
        padding: 9px 5px 10px;
    }

    .sk-student-profile-summary strong {
        font-size: 15px;
    }

    .sk-student-profile-summary span {
        min-width: 48px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .sk-student-profile-summary dl {
        gap: 7px;
        margin-top: 10px;
    }

    .sk-student-profile-summary dt,
    .sk-student-profile-summary dd,
    .sk-student-detail-page #student-info .content-item {
        font-size: 10px;
    }

    .sk-student-detail-page #student-info .aRecord {
        margin-top: 9px;
    }

    .sk-student-detail-page #student-info .aRecord > p {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .sk-student-detail-page #student-info .atRecord {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
    }

    .sk-student-detail-page #student-info .radial {
        --size: 90px !important;
    }

    .sk-student-detail-page #student-info > .content-details {
        gap: 7px 16px;
        padding: 10px 14px;
    }

    .sk-student-detail-page #student-info .item-left-lable p,
    .sk-student-detail-page #student-info .item-left-lable-text p {
        font-size: 10px;
    }

    .sk-student-detail-page #student-info .item-left-lable input,
    .sk-student-detail-page #student-info .item-left-lable-text textarea {
        height: 29px;
        padding: 0 9px;
        border-radius: 6px;
        font-size: 10px;
    }
}

@media (max-width: 760px) {
    .sk-student-detail-shell {
        grid-template-rows: 64px minmax(0, 1fr);
    }

    .sk-student-detail-workspace {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sk-student-detail-main {
        grid-template-rows: 30px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 9px 7px 0;
    }

    .sk-student-detail-breadcrumb {
        gap: 6px;
        margin-bottom: 4px;
        font-size: 7px;
    }

    .sk-student-detail-heading h1 {
        font-size: 13px;
    }

    .sk-student-detail-actions {
        gap: 4px;
        padding-top: 0;
    }

    .sk-detail-action {
        height: 23px;
        padding: 0 6px;
        gap: 3px;
        border-radius: 5px;
        font-size: 6px;
    }

    .sk-detail-action svg {
        width: 10px;
        height: 10px;
    }

    .sk-student-detail-panel {
        grid-template-rows: 28px minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-student-detail-page .sub-menu-bar {
        height: 28px;
        gap: 7px;
        padding: 0 8px;
    }

    .sk-student-detail-page .bar-item,
    .sk-student-detail-page .bar-item-active {
        height: 28px;
        padding: 0 2px;
        font-size: 6px;
    }

    .sk-student-detail-page #student-info {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 6px;
        padding: 6px;
    }

    .sk-student-detail-page #student-info > .userInfo {
        padding: 6px;
        border-radius: 7px;
    }

    .sk-student-detail-page #student-main-photo {
        height: 58px;
        border-radius: 6px;
    }

    .sk-student-profile-summary {
        padding: 5px 2px;
    }

    .sk-student-profile-summary strong {
        font-size: 8px;
    }

    .sk-student-profile-summary span {
        min-width: 28px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-student-profile-summary dl {
        gap: 3px;
        margin-top: 5px;
    }

    .sk-student-profile-summary dl div {
        gap: 4px;
    }

    .sk-student-profile-summary dt,
    .sk-student-profile-summary dd,
    .sk-student-detail-page #student-info .content-item {
        font-size: 5px;
    }

    .sk-student-detail-page #student-info .aRecord {
        margin-top: 5px;
    }

    .sk-student-detail-page #student-info .aRecord > p {
        margin-bottom: 4px;
        font-size: 6px;
    }

    .sk-student-detail-page #student-info .atRecord {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 4px;
    }

    .sk-student-detail-page #student-info .radial {
        --size: 44px !important;
    }

    .sk-student-detail-page #student-info .content-item {
        gap: 3px;
        margin-bottom: 3px !important;
    }

    .sk-student-detail-page #student-info .content-item div {
        width: 5px !important;
        height: 5px !important;
    }

    .sk-student-detail-page #student-info > .content-details {
        gap: 4px 7px;
        padding: 6px;
        border-radius: 7px;
    }

    .sk-student-detail-page #student-info .item-left-lable p,
    .sk-student-detail-page #student-info .item-left-lable-text p {
        font-size: 5px;
    }

    .sk-student-detail-page #student-info .item-left-lable input,
    .sk-student-detail-page #student-info .item-left-lable-text textarea {
        height: 16px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }
}

@media (max-width: 900px) {
    .sk-login-shell {
        width: calc(100vw - 12px);
        height: calc(100vh - 12px);
        margin: 6px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 36px;
    }

    .sk-login-brand {
        padding: 22px 18px 16px;
    }

    .sk-brand-logo {
        gap: 13px;
        font-size: 38px;
    }

    .sk-brand-mark {
        width: 62px;
        height: 62px;
    }

    .sk-brand-tagline {
        margin-top: 10px;
        margin-left: 8px;
        gap: 10px;
    }

    .sk-tagline-marker {
        width: 4px;
        height: 28px;
    }

    .sk-brand-title {
        font-size: 16px;
    }

    .sk-brand-subtitle {
        margin-top: 5px;
        font-size: 12px;
    }

    .sk-school-scene {
        min-height: 128px;
    }

    .sk-school-illustration {
        width: min(83%, 350px);
        max-height: 150px;
    }

    .sk-feature-row {
        padding: 10px 10px;
    }

    .sk-feature-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 0 9px;
    }

    .sk-feature-icon {
        width: 34px;
        height: 34px;
    }

    .sk-feature-icon svg {
        width: 19px;
        height: 19px;
    }

    .sk-feature-item strong {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .sk-feature-item small {
        max-width: 90px;
        font-size: 9px;
        line-height: 1.28;
    }

    .sk-login-panel {
        padding: 16px 18px;
    }

    .sk-login-card {
        padding: 20px 20px 22px;
    }

    .sk-lock-badge {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }

    .sk-lock-badge svg {
        width: 24px;
        height: 24px;
    }

    .sk-lock-badge-shield svg {
        width: 28px;
        height: 28px;
    }

    .sk-login-header h1 {
        font-size: 24px;
    }

    .sk-login-header p {
        margin-top: 7px;
        font-size: 13px;
    }

    .sk-forgot-header {
        width: min(100%, 300px);
    }

    .sk-field label,
    .sk-link,
    .sk-remember,
    .sk-input-wrap input {
        font-size: 12px;
    }

    .sk-input-wrap {
        height: 42px;
        padding: 0 12px;
    }

    .sk-input-wrap > img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .sk-form-options {
        gap: 10px;
    }

    .sk-submit-button {
        height: 46px;
        font-size: 15px;
    }

    .sk-secondary-button {
        height: 46px;
        font-size: 15px;
    }

    .sk-field-help {
        margin-top: 8px;
        font-size: 11px;
    }

    .sk-password-meter {
        margin-top: 9px;
    }

    .sk-password-meter span {
        height: 6px;
    }

    .sk-password-meter strong {
        min-width: 46px;
        font-size: 11px;
    }

    .sk-support-link {
        height: 46px;
        margin-top: 14px;
        gap: 10px;
        font-size: 13px;
    }

    .sk-login-footer {
        padding: 0 24px;
        font-size: 11px;
    }
}

@media (max-width: 620px) {
    .sk-login-shell {
        width: calc(100vw - 8px);
        height: calc(100vh - 8px);
        margin: 4px;
        grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
        grid-template-rows: minmax(0, 1fr) 30px;
        border-radius: 8px;
    }

    .sk-login-brand {
        padding: 20px 12px 12px;
    }

    .sk-brand-logo {
        gap: 9px;
        font-size: 32px;
    }

    .sk-brand-mark {
        width: 50px;
        height: 50px;
    }

    .sk-brand-mark path {
        stroke-width: 7;
    }

    .sk-brand-mark .sk-mark-white {
        stroke-width: 6;
    }

    .sk-brand-tagline {
        margin-top: 8px;
        margin-left: 5px;
        gap: 8px;
    }

    .sk-tagline-marker {
        width: 3px;
        height: 25px;
    }

    .sk-brand-title {
        font-size: 14px;
        line-height: 1.15;
    }

    .sk-brand-subtitle {
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.35;
    }

    .sk-dot-grid {
        top: 76px;
        width: 58px;
        height: 46px;
        background-size: 15px 15px;
        background-image: radial-gradient(circle, #8ab7ff 2.5px, transparent 3px);
    }

    .sk-school-scene {
        min-height: 112px;
        padding-bottom: 4px;
    }

    .sk-school-scene::after {
        right: -150px;
        bottom: -82px;
        width: 330px;
        height: 330px;
    }

    .sk-school-illustration {
        width: min(92%, 270px);
        max-height: 126px;
    }

    .sk-feature-row {
        padding: 8px 7px;
        border-radius: 8px;
    }

    .sk-feature-item {
        gap: 6px;
        padding: 0 6px;
    }

    .sk-feature-icon {
        width: 29px;
        height: 29px;
    }

    .sk-feature-icon svg {
        width: 16px;
        height: 16px;
    }

    .sk-feature-item strong {
        margin-bottom: 3px;
        font-size: 9px;
    }

    .sk-feature-item small {
        max-width: 62px;
        font-size: 7px;
        line-height: 1.25;
    }

    .sk-login-panel {
        padding: 10px 10px;
    }

    .sk-login-card {
        padding: 16px 12px 16px;
        border-radius: 8px;
    }

    .sk-lock-badge {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .sk-lock-badge svg {
        width: 21px;
        height: 21px;
    }

    .sk-lock-badge-shield svg {
        width: 25px;
        height: 25px;
    }

    .sk-login-header {
        margin-bottom: 13px;
    }

    .sk-login-header h1 {
        font-size: 21px;
    }

    .sk-login-header p {
        margin-top: 5px;
        font-size: 11px;
    }

    .sk-forgot-header {
        width: min(100%, 230px);
    }

    .sk-login-form {
        gap: 11px;
    }

    .sk-field label,
    .sk-link,
    .sk-remember,
    .sk-input-wrap input {
        font-size: 10px;
    }

    .sk-field label {
        margin-bottom: 6px;
    }

    .sk-input-wrap {
        height: 38px;
        padding: 0 9px;
        border-radius: 7px;
    }

    .sk-input-wrap > img {
        width: 18px;
        height: 18px;
        margin-right: 7px;
    }

    .sk-icon-button {
        width: 28px;
        height: 28px;
    }

    .sk-icon-button svg {
        width: 18px;
        height: 18px;
    }

    .sk-form-options {
        gap: 6px;
        margin-top: 0;
    }

    .sk-remember {
        gap: 5px;
    }

    .sk-remember input {
        width: 15px;
        height: 15px;
    }

    .sk-submit-button {
        height: 42px;
        gap: 9px;
        font-size: 13px;
        border-radius: 7px;
    }

    .sk-secondary-button {
        height: 42px;
        gap: 9px;
        border-radius: 7px;
        font-size: 13px;
    }

    .sk-secondary-button svg {
        width: 20px;
        height: 20px;
    }

    .sk-field-help {
        margin-top: 7px;
        font-size: 9px;
    }

    .sk-password-meter {
        gap: 4px;
        margin-top: 8px;
    }

    .sk-password-meter span {
        height: 5px;
    }

    .sk-password-meter strong {
        min-width: 40px;
        padding-left: 4px;
        font-size: 9px;
    }

    .sk-submit-button svg {
        width: 22px;
        height: 22px;
    }

    .sk-support-link {
        height: 42px;
        margin-top: 12px;
        gap: 8px;
        font-size: 11px;
        border-radius: 7px;
    }

    .sk-support-link svg {
        width: 21px;
        height: 21px;
    }

    .sk-login-footer {
        padding: 0 16px;
        font-size: 9px;
    }
}

@media (max-width: 430px) {
    .sk-login-shell {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    }

    .sk-login-brand {
        padding: 18px 8px 10px;
    }

    .sk-brand-logo {
        gap: 7px;
        font-size: 25px;
    }

    .sk-brand-mark {
        width: 42px;
        height: 42px;
    }

    .sk-brand-title {
        font-size: 12px;
    }

    .sk-brand-subtitle {
        font-size: 8px;
    }

    .sk-school-illustration {
        width: min(96%, 210px);
        max-height: 112px;
    }

    .sk-feature-row {
        padding: 7px 5px;
    }

    .sk-feature-item {
        padding: 0 4px;
    }

    .sk-feature-icon {
        width: 25px;
        height: 25px;
    }

    .sk-feature-icon svg {
        width: 14px;
        height: 14px;
    }

    .sk-feature-item strong {
        font-size: 8px;
    }

    .sk-feature-item small {
        max-width: 48px;
        font-size: 6px;
    }

    .sk-login-panel {
        padding: 8px 7px;
    }

    .sk-login-card {
        padding: 14px 7px;
    }

    .sk-login-header h1 {
        font-size: 18px;
    }

    .sk-login-header p {
        font-size: 9px;
    }

    .sk-forgot-header {
        width: min(100%, 185px);
    }

    .sk-field label,
    .sk-link,
    .sk-remember,
    .sk-input-wrap input {
        font-size: 8px;
    }

    .sk-input-wrap {
        height: 34px;
        padding: 0 6px;
    }

    .sk-input-wrap > img {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }

    .sk-icon-button {
        width: 22px;
        height: 22px;
    }

    .sk-icon-button svg {
        width: 15px;
        height: 15px;
    }

    .sk-submit-button {
        height: 38px;
        font-size: 11px;
    }

    .sk-secondary-button {
        height: 38px;
        font-size: 11px;
    }

    .sk-secondary-button svg {
        width: 18px;
        height: 18px;
    }

    .sk-field-help {
        font-size: 7px;
    }

    .sk-password-meter {
        gap: 3px;
    }

    .sk-password-meter strong {
        min-width: 32px;
        font-size: 7px;
    }

    .sk-support-link {
        height: 38px;
        font-size: 9px;
    }

    .sk-login-footer {
        padding: 0 10px;
        font-size: 7px;
    }
}

@media (max-height: 620px) {
    .sk-login-brand {
        padding-top: 24px;
        padding-bottom: 18px;
    }

    .sk-login-panel {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .sk-login-card {
        padding-top: 14px;
        padding-bottom: 16px;
    }

    .sk-lock-badge {
        width: 46px;
        height: 46px;
        margin-bottom: 8px;
    }

    .sk-lock-badge svg {
        width: 23px;
        height: 23px;
    }

    .sk-login-header {
        margin-bottom: 12px;
    }

    .sk-login-header h1 {
        font-size: 24px;
    }

    .sk-login-header p {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.3;
    }

    .sk-login-form {
        gap: 10px;
    }

    .sk-field label {
        margin-bottom: 5px;
    }

    .sk-input-wrap {
        height: 42px;
    }

    .sk-field-help {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.3;
    }

    .sk-password-meter {
        gap: 5px;
        margin-top: 8px;
    }

    .sk-password-meter span {
        height: 6px;
    }

    .sk-password-meter strong {
        min-width: 50px;
        font-size: 11px;
    }

    .sk-submit-button,
    .sk-secondary-button,
    .sk-support-link {
        height: 42px;
    }

    .sk-submit-button,
    .sk-secondary-button {
        font-size: 15px;
    }

    .sk-support-link {
        margin-top: 10px;
        font-size: 13px;
    }

    .sk-school-scene {
        min-height: 130px;
    }

    .sk-school-illustration {
        max-height: 160px;
    }
}

/* Expired membership gate: compact, app-style notice with inner scrolling only. */
.sk-membership-view.is-active {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
}

.sk-membership-expired-badge {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 50%;
    color: #c13a20;
    background: #fff0e9;
}

.sk-membership-expired-badge svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-membership-header {
    margin-bottom: 14px;
}

.sk-membership-header > span {
    display: inline-flex;
    margin-bottom: 5px;
    padding: 4px 9px;
    border-radius: 99px;
    color: #b42318;
    background: #fff0ee;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sk-membership-header h1 {
    font-size: 29px;
}

.sk-membership-header p {
    margin-top: 6px;
    font-size: 13px;
}

.sk-membership-header time {
    color: #1d3973;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-membership-notice {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #f0c7b8;
    border-radius: 10px;
    background: #fffaf7;
    scrollbar-width: thin;
    scrollbar-color: #e7b5a3 transparent;
}

.sk-membership-overdue {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 10px 7px;
    border-radius: 9px;
    color: #a22e1a;
    background: #ffece5;
    text-align: center;
}

.sk-membership-overdue strong {
    font-family: "InterBold", Arial, sans-serif;
    font-size: 31px;
    line-height: 1;
}

.sk-membership-overdue span {
    margin-top: 6px;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 9px;
    line-height: 1.3;
}

.sk-membership-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.sk-membership-copy p {
    margin: 0;
    color: #34486f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.42;
}

.sk-membership-copy strong {
    color: #172b5d;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-membership-copy .sk-membership-warning {
    padding: 7px 8px;
    border-radius: 7px;
    color: #7b4b00;
    background: #fff3d6;
}

.sk-membership-copy .sk-membership-warning strong {
    color: #8b5200;
}

.sk-membership-copy .sk-membership-preserved {
    color: #146437;
}

.sk-membership-copy .sk-membership-preserved strong {
    color: #0b7138;
}

.sk-membership-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.sk-membership-actions .sk-membership-pay-form {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
}

.sk-membership-actions .sk-membership-pay-form .sk-membership-pay-button {
    width: 100%;
}

.sk-membership-actions .sk-membership-pay-button {
    grid-column: 1 / -1;
    min-height: 48px;
    background: linear-gradient(135deg, #16a067 0%, #087d55 48%, #056544 100%);
    box-shadow: 0 11px 24px rgba(8, 125, 85, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.sk-membership-actions .sk-membership-pay-button svg {
    background: rgba(255, 255, 255, .2);
}

.sk-membership-actions .sk-membership-support-button {
    color: #0759d7;
}

.sk-membership-admin-note {
    margin: 8px 0 0;
    color: #6a7892;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 10px;
    line-height: 1.35;
    text-align: center;
}

.sk-membership-actions .sk-submit-button,
.sk-membership-actions .sk-secondary-button {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: 44px;
    margin: 0;
    gap: 10px;
    padding: 0 13px;
    overflow: hidden;
    border-radius: 12px;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transform: translateY(0);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sk-membership-actions .sk-submit-button {
    border: 1px solid rgba(255, 255, 255, .24);
    background: linear-gradient(135deg, #1580ff 0%, #0963ee 48%, #064fd0 100%);
    box-shadow: 0 10px 22px rgba(9, 99, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.sk-membership-actions .sk-submit-button.sk-membership-pay-button {
    background: linear-gradient(135deg, #16a067 0%, #087d55 48%, #056544 100%);
    box-shadow: 0 11px 24px rgba(8, 125, 85, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.sk-membership-actions .sk-secondary-button {
    border: 1px solid #d6e4f8;
    color: #0759d7;
    background: linear-gradient(180deg, #ffffff 0%, #f0f5fd 100%);
    box-shadow: 0 7px 17px rgba(30, 78, 146, .11), inset 0 1px 0 #ffffff;
}

.sk-membership-actions .sk-submit-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, .22) 47%, transparent 72%);
    transform: translateX(-130%);
    transition: transform .55s ease;
    pointer-events: none;
}

.sk-membership-actions .sk-submit-button span,
.sk-membership-actions .sk-secondary-button span {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sk-membership-actions .sk-submit-button svg,
.sk-membership-actions .sk-secondary-button svg {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 9px;
    transition: transform .18s ease, background .18s ease;
}

.sk-membership-actions .sk-submit-button svg {
    background: rgba(255, 255, 255, .18);
}

.sk-membership-actions .sk-secondary-button svg {
    background: #e3edfc;
}

@media (hover: hover) {
    .sk-membership-actions .sk-submit-button:hover {
        background: linear-gradient(135deg, #2388ff 0%, #0963ee 48%, #0648bd 100%);
        box-shadow: 0 13px 26px rgba(9, 99, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
        transform: translateY(-2px);
    }

    .sk-membership-actions .sk-submit-button.sk-membership-pay-button:hover {
        background: linear-gradient(135deg, #1daf73 0%, #087d55 48%, #045a3c 100%);
        box-shadow: 0 14px 28px rgba(8, 125, 85, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
    }

    .sk-membership-actions .sk-submit-button:hover::before {
        transform: translateX(130%);
    }

    .sk-membership-actions .sk-submit-button:hover svg {
        transform: translateX(2px);
    }

    .sk-membership-actions .sk-secondary-button:hover {
        border-color: #b9d1f4;
        color: #064fc0;
        background: linear-gradient(180deg, #ffffff 0%, #e8f1ff 100%);
        box-shadow: 0 11px 22px rgba(30, 78, 146, .16), inset 0 1px 0 #ffffff;
        transform: translateY(-2px);
    }

    .sk-membership-actions .sk-secondary-button:hover svg {
        background: #d9e8ff;
        transform: translateX(-2px);
    }
}

.sk-membership-actions .sk-submit-button:focus-visible,
.sk-membership-actions .sk-secondary-button:focus-visible {
    outline: 3px solid rgba(9, 99, 255, .24);
    outline-offset: 2px;
}

.sk-membership-actions .sk-submit-button:active,
.sk-membership-actions .sk-secondary-button:active {
    transform: translateY(0) scale(.985);
}

.is-membership-expired .sk-login-card {
    padding-top: 24px;
    padding-bottom: 24px;
}

.is-membership-expired .sk-support-link {
    display: none;
}

@media (max-width: 1280px), (max-height: 760px) {
    .is-membership-expired .sk-login-card {
        max-height: 100%;
        padding: 15px 16px;
        overflow: hidden;
    }

    .sk-membership-view.is-active {
        max-height: 100%;
    }

    .sk-membership-expired-badge {
        width: 44px;
        height: 44px;
        margin-bottom: 7px;
    }

    .sk-membership-expired-badge svg {
        width: 22px;
        height: 22px;
    }

    .sk-membership-header {
        margin-bottom: 8px;
    }

    .sk-membership-header > span {
        margin-bottom: 3px;
        padding: 3px 7px;
        font-size: 8px;
    }

    .sk-membership-header h1 {
        font-size: 22px;
    }

    .sk-membership-header p {
        margin-top: 3px;
        font-size: 10px;
    }

    .sk-membership-notice {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .sk-membership-overdue {
        min-height: 72px;
        padding: 6px;
    }

    .sk-membership-overdue strong {
        font-size: 24px;
    }

    .sk-membership-overdue span {
        font-size: 8px;
    }

    .sk-membership-copy p {
        font-size: 10px;
    }

    .sk-membership-copy {
        gap: 4px;
    }

    .sk-membership-copy .sk-membership-warning {
        padding: 5px 6px;
    }

    .sk-membership-actions {
        gap: 7px;
        margin-top: 8px;
    }

    .sk-membership-actions .sk-submit-button,
    .sk-membership-actions .sk-secondary-button {
        height: 38px;
        gap: 8px;
        padding: 0 9px;
        border-radius: 10px;
        font-size: 11px;
    }


    .sk-membership-actions .sk-membership-pay-button {
        min-height: 41px;
    }

    .sk-membership-actions .sk-submit-button svg,
    .sk-membership-actions .sk-secondary-button svg {
        width: 22px;
        height: 22px;
        padding: 4px;
        border-radius: 7px;
    }
}

@media (max-width: 620px) {
    .is-membership-expired .sk-login-card {
        padding: 10px 9px;
    }

    .sk-membership-expired-badge {
        width: 34px;
        height: 34px;
        margin-bottom: 5px;
    }

    .sk-membership-expired-badge svg {
        width: 18px;
        height: 18px;
    }

    .sk-membership-header h1 {
        font-size: 16px;
    }

    .sk-membership-header p {
        font-size: 9px;
    }

    .sk-membership-header > span,
    .sk-membership-overdue span {
        font-size: 8px;
    }

    .sk-membership-copy p {
        font-size: 10px;
    }

    .sk-membership-notice {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 6px;
        padding: 6px;
        border-radius: 7px;
    }

    .sk-membership-overdue {
        min-height: 58px;
        padding: 4px;
        border-radius: 6px;
    }

    .sk-membership-overdue strong {
        font-size: 18px;
    }

    .sk-membership-copy .sk-membership-warning {
        padding: 4px;
        border-radius: 5px;
    }

    .sk-membership-actions {
        gap: 5px;
        margin-top: 6px;
    }

    .sk-membership-actions .sk-submit-button,
    .sk-membership-actions .sk-secondary-button {
        height: 34px;
        gap: 6px;
        padding: 0 7px;
        border-radius: 9px;
        font-size: 10px;
    }


    .sk-membership-actions .sk-membership-pay-button {
        min-height: 36px;
    }

    .sk-membership-actions .sk-submit-button svg,
    .sk-membership-actions .sk-secondary-button svg {
        width: 20px;
        height: 20px;
        padding: 4px;
        border-radius: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-membership-actions .sk-submit-button,
    .sk-membership-actions .sk-secondary-button,
    .sk-membership-actions .sk-submit-button::before,
    .sk-membership-actions svg {
        transition: none;
    }
}

@media (max-width: 430px), (max-height: 430px) {
    .sk-membership-expired-badge {
        display: none;
    }

    .sk-membership-header {
        margin-bottom: 5px;
    }

    .sk-membership-notice {
        max-height: 112px;
    }
}

/* Student details screen refinements: keep the attached app-style layout intact. */
.sk-student-detail-page .sk-dashboard-topbar {
    grid-template-columns: minmax(360px, 510px) minmax(460px, 630px) minmax(310px, 360px);
    min-height: 104px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sk-student-detail-page .sk-student-detail-shell {
    grid-template-rows: 104px minmax(0, 1fr);
    border-radius: 0;
}

.sk-student-detail-page .sk-student-detail-workspace {
    grid-template-columns: 250px minmax(0, 1fr);
}

.sk-student-detail-page .sk-student-detail-main {
    grid-template-rows: 58px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 18px 16px 0;
}

.sk-student-detail-page .sk-student-detail-heading {
    align-items: flex-start;
}

.sk-student-detail-page .sk-student-detail-actions {
    padding-top: 0;
}

.sk-student-detail-page .sk-detail-action {
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
}

.sk-student-detail-page .sk-student-detail-panel {
    grid-template-rows: 52px minmax(0, 1fr);
    width: auto !important;
    margin-right: 0;
    box-sizing: border-box;
    border-radius: 14px;
}

.sk-student-detail-page .sub-menu-bar {
    height: 52px;
    gap: 34px;
    padding: 0 38px 0 0;
}

.sk-student-detail-page .bar-item,
.sk-student-detail-page .bar-item-active {
    height: 52px;
    font-size: 15px;
}

.sk-student-detail-page #student-info {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    justify-content: stretch;
    align-content: stretch;
    width: auto !important;
    height: 100% !important;
    max-height: 100%;
    margin: 0 !important;
    padding: 6px 16px 14px;
}

.sk-student-detail-page #student-info > .userInfo,
.sk-student-detail-page #student-info > .content-details {
    border-color: #e3ebf6;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(16, 40, 92, 0.055);
}

.sk-student-detail-page #student-info > .userInfo {
    padding: 12px 18px 14px;
}

.sk-student-detail-page #student-main-photo {
    height: 155px;
    border-radius: 10px;
}

.sk-student-detail-page .sk-student-profile-summary {
    padding: 13px 6px 12px;
}

.sk-student-detail-page .sk-student-profile-summary strong {
    font-size: 18px;
}

.sk-student-detail-page .sk-student-profile-summary dl {
    gap: 10px;
    margin-top: 16px;
}

.sk-student-detail-page .sk-student-profile-summary dl div {
    grid-template-columns: 18px minmax(0, 1fr) auto;
}

.sk-student-detail-page .sk-student-profile-summary dl div::before {
    content: "";
    width: 16px;
    height: 16px;
    background: #0963ff;
    -webkit-mask: var(--student-summary-icon) center / contain no-repeat;
    mask: var(--student-summary-icon) center / contain no-repeat;
}

.sk-student-detail-page .sk-student-profile-summary dl div:nth-child(1)::before {
    --student-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h8v3H8zM7 6H5v15h14V6h-2M8 11h8M8 15h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-student-detail-page .sk-student-profile-summary dl div:nth-child(2)::before {
    --student-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 8 9-4 9 4-9 4-9-4ZM7 10v5c2.9 2 7.1 2 10 0v-5M21 8v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-student-detail-page .sk-student-profile-summary dl div:nth-child(3)::before {
    --student-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 4 7-4 11-4-11 4-7ZM8 10h8M10 15h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-student-detail-page .sk-student-profile-summary dl div:nth-child(4)::before {
    --student-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 5 6v6c0 4.4 2.8 7.4 7 9 4.2-1.6 7-4.6 7-9V6l-7-3ZM10 12l1.5 1.5L15 10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-student-detail-page .sk-student-profile-summary dt,
.sk-student-detail-page .sk-student-profile-summary dd {
    font-size: 15px;
}

.sk-student-detail-page #student-info .aRecord {
    margin-top: 10px;
}

.sk-student-detail-page #student-info .aRecord > p {
    margin-bottom: 7px;
    font-size: 14px;
    letter-spacing: 0;
}

.sk-student-detail-page #student-info .atRecord {
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 4px;
}

.sk-student-detail-page #student-info .radial {
    --size: 120px !important;
    --thickness: 8px;
    --track: #e7edf6;
    --progress: #12b84f;
}

.sk-student-detail-page #student-info .radial::after {
    inset: calc(var(--thickness) + 5px);
    box-shadow: none;
}

.sk-student-detail-page #student-info .percent {
    color: #071553;
    font-size: 25px;
}

.sk-student-detail-page #student-info .label {
    margin-top: 4px;
    color: #071553;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.sk-student-detail-page #student-info .atContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: end;
    gap: 10px;
    margin-top: 0;
    padding-left: 0;
}

.sk-student-detail-page #student-info .content-item {
    position: static;
    gap: 8px;
    margin: 0 !important;
    font-size: 13px;
}

.sk-student-detail-page #student-info .content-item div {
    flex: 0 0 auto;
    border-radius: 3px;
}

.sk-student-detail-page #student-info .content-item p {
    margin: 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: inherit;
    white-space: nowrap;
}

.sk-student-detail-page #student-info .content-item span {
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.sk-student-detail-page #student-info > .content-details {
    grid-template-columns: 118px minmax(0, 1fr) 134px minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    align-items: center;
    gap: 9px 24px;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    padding: 10px 16px;
}

.sk-student-detail-page #student-info .sk-detail-address-row,
.sk-student-detail-page #student-info .sk-detail-other-row {
    display: contents;
}

.sk-student-detail-page #student-info .sk-detail-address-row p,
.sk-student-detail-page #student-info .sk-detail-other-row p {
    grid-column: 1;
}

.sk-student-detail-page #student-info .sk-detail-address-row input,
.sk-student-detail-page #student-info .sk-detail-other-row textarea {
    grid-column: 2 / -1;
}

.sk-student-detail-page #student-info .item-left-lable p,
.sk-student-detail-page #student-info .item-left-lable-text p {
    font-size: 14px;
}

.sk-student-detail-page #student-info .item-left-lable input,
.sk-student-detail-page #student-info .item-left-lable-text textarea {
    height: 38px;
    border-color: #d7e1ee;
    border-radius: 6px;
    background: #fbfcff;
    font-size: 14px;
}

.sk-student-detail-page .sk-student-detail-main > .sk-students-footer {
    height: 38px;
    font-size: 13px;
}

.sk-student-detail-page #parents.content-col.tab-section.show {
    display: grid;
    grid-template-rows: 54px minmax(0, auto) minmax(0, 174px) 22px;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    width: auto !important;
    height: 100%;
    margin: 0 !important;
    padding: 2px 16px 14px;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
}

.sk-parent-detail-main {
    grid-template-rows: 72px minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 24px 30px 0;
}

.sk-parent-detail-heading {
    align-items: flex-start;
}

.sk-parent-detail-card {
    display: grid;
    grid-template-rows: 50px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
}

.sk-parent-detail-tabs {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    height: 50px;
    min-width: 0;
    margin: 0;
    padding: 0 22px;
    border-bottom: 1px solid #dfe8f5;
    background: #fbfdff;
}

.sk-parent-detail-tabs > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    height: 50px;
    cursor: pointer;
}

.sk-parent-detail-tabs p {
    margin: 0;
    color: #263861;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-parent-detail-tabs .bar-item-active p {
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-parent-detail-tabs .bar-item-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #0963ff;
}

.sk-parent-profile-tab {
    display: none;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.sk-parent-profile-tab.show {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 16px;
    height: 100%;
    padding: 14px;
    overflow: hidden;
    background: #ffffff;
}

.sk-parent-detail-loader {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
}

.sk-parent-detail-loader .loading-box {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #52607f;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-detail-loader img {
    width: 32px;
    height: 32px;
}

.sk-parent-profile-card,
.sk-parent-detail-content,
.sk-parent-cnic-view {
    min-width: 0;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: #ffffff;
}

.sk-parent-profile-card {
    display: grid;
    grid-template-rows: 218px 78px 112px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
}

.sk-parent-photo-block {
    display: grid;
    justify-items: center;
    align-content: start;
    min-width: 0;
    padding-top: 4px;
}

.sk-parent-photo-block img {
    width: 164px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-parent-photo-block h2 {
    overflow: hidden;
    max-width: 100%;
    margin: 7px 0 5px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.08;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-photo-block > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    color: #0963ff;
    background: #eaf3ff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-parent-mini-card {
    display: grid;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-parent-mini-card div,
.sk-parent-summary-card div {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sk-parent-mini-card svg,
.sk-parent-summary-card svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #364a86;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-mini-card div:first-child svg {
    color: #129f43;
    stroke: currentColor;
}

.sk-parent-mini-card span,
.sk-parent-summary-card span {
    overflow: hidden;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-mini-card strong,
.sk-parent-summary-card strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 12px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#parent-card-status {
    color: #0a9d40;
}

.sk-parent-action-stack {
    display: grid;
    gap: 8px;
}

.sk-parent-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-action.is-edit {
    background: linear-gradient(180deg, #2daf50 0%, #1d923f 100%);
}

.sk-parent-action.is-remove {
    background: linear-gradient(180deg, #e11119 0%, #c90008 100%);
}

.sk-parent-action.is-link {
    background: linear-gradient(180deg, #0963ff 0%, #0755db 100%);
}

.sk-parent-summary-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-parent-summary-card h3 {
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border-bottom: 1px solid #dfe8f5;
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
    line-height: 36px;
}

.sk-parent-summary-card div {
    min-height: 34px;
    padding: 0 10px;
}

.sk-parent-detail-content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 224px;
    gap: 10px;
    min-height: 0;
    padding: 14px;
}

.sk-parent-detail-fields {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 118px minmax(0, 1fr);
    grid-auto-rows: 38px;
    align-content: start;
    align-items: center;
    gap: 10px 28px;
    min-width: 0;
    min-height: 0;
}

.sk-parent-detail-fields label {
    display: contents;
}

.sk-parent-detail-fields span {
    overflow: hidden;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-detail-fields input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #d9e3f2;
    border-radius: 7px;
    color: #071553;
    background: #fbfcff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
    outline: 0;
}

.sk-parent-detail-fields input:disabled {
    opacity: 1;
    -webkit-text-fill-color: #071553;
}

.sk-parent-detail-fields .sk-parent-field-wide span {
    grid-column: 1;
}

.sk-parent-detail-fields .sk-parent-field-wide input {
    grid-column: 2 / -1;
}

.sk-parent-cnic-docs {
    display: grid;
    grid-template-rows: 28px minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.sk-parent-cnic-docs h3 {
    margin: 0;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 16px;
    line-height: 28px;
}

.sk-parent-cnic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.sk-parent-cnic-view {
    display: grid;
    grid-template-rows: 34px minmax(0, 1fr) 40px;
    justify-items: center;
    min-height: 0;
    padding: 10px 12px 8px;
}

.sk-parent-cnic-view h4 {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-parent-cnic-view h4 span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: #0963ff;
    background: #eaf3ff;
}

.sk-parent-cnic-view svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-cnic-view > img {
    width: min(236px, 82%);
    height: 100px;
    align-self: center;
    border-radius: 7px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-parent-cnic-view a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(222px, 82%);
    height: 34px;
    border: 1px solid #0963ff;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    text-decoration: none;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-students-tab {
    display: none;
    min-width: 0;
    min-height: 0;
    background: #ffffff;
}

.sk-parent-students-tab.show {
    display: grid !important;
    grid-template-rows: 58px minmax(0, 1fr) 82px 0;
    gap: 12px;
    height: 100%;
    padding: 18px 22px 12px;
    overflow: hidden;
}

.sk-parent-students-toolbar {
    display: grid;
    grid-template-columns: minmax(300px, 440px) minmax(220px, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e9f4;
}

.sk-parent-students-search,
.sk-parent-students-class {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    color: #52607f;
}

.sk-parent-students-class {
    display: block;
    color: #071553;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
    outline: 0;
}

.sk-parent-students-search svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-parent-students-search input,
.sk-parent-students-rows {
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #263861;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-students-search input {
    width: 100%;
}

.sk-parent-students-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.sk-parent-students-actions p {
    margin: 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    white-space: nowrap;
}

.sk-parent-students-rows {
    width: 146px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-parent-students-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: #0a9d40;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.sk-parent-students-add svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-parent-students-table-card {
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
}

.sk-parent-students-table-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 0 22px;
}

.sk-parent-students-table-meta p {
    margin: 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-students-table-meta label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-students-table {
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-parent-students-table th,
.sk-parent-students-table td {
    overflow: hidden;
    padding: 0 16px;
    border-top: 1px solid #e4ebf5;
    border-right: 1px solid #e4ebf5;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-students-table th:last-child,
.sk-parent-students-table td:last-child {
    border-right: 0;
}

.sk-parent-students-table th {
    height: 44px;
    background: #fbfcff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-students-table td {
    height: 72px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-students-table strong {
    font-family: "InterBold", Arial, sans-serif;
}

.sk-parent-students-table th:nth-child(1),
.sk-parent-students-table td:nth-child(1) {
    width: 94px;
}

.sk-parent-students-table th:nth-child(2),
.sk-parent-students-table td:nth-child(2) {
    text-align: left;
    width: 16%;
}

.sk-parent-students-table th:nth-child(9),
.sk-parent-students-table td:nth-child(9) {
    width: 160px;
}

.sk-parent-student-photo {
    width: 56px;
    height: 56px;
    border-radius: 7px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-parent-student-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 78px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #bcebc8;
    border-radius: 8px;
    color: #079b3f;
    background: #e7f8e9;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    text-transform: capitalize;
}

.sk-parent-student-status::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #079b3f;
}

.sk-parent-student-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sk-parent-student-actions a,
.sk-parent-student-actions button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #d5e2f4;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.sk-parent-student-actions button {
    color: #ff1f2d;
    border-color: #ffd2d6;
    background: #ffffff;
}

.sk-parent-student-actions button.parent-student-edit-btn {
    color: #0963ff;
    border-color: #d5e2f4;
}

.sk-parent-student-actions button:disabled {
    opacity: 1;
}

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

.sk-parent-student-actions svg circle {
    fill: none;
    stroke: currentColor;
}

.sk-parent-students-empty {
    color: #52607f !important;
    text-align: center !important;
}

.sk-parent-students-empty.is-error {
    color: #ff1f2d !important;
}

.sk-parent-students-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    min-width: 0;
    min-height: 0;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
}

.sk-parent-students-bottom article {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    height: 100%;
    padding: 0 28px;
}

.sk-parent-students-bottom article + article {
    border-left: 1px solid #dfe8f5;
}

.sk-parent-students-bottom article > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 11px;
}

.sk-parent-students-bottom .is-blue {
    color: #0963ff;
    background: #eaf3ff;
}

.sk-parent-students-bottom .is-green {
    color: #079b3f;
    background: #e7f8e9;
}

.sk-parent-students-bottom .is-purple {
    color: #6b25e8;
    background: #f0e7ff;
}

.sk-parent-students-bottom svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-students-bottom small {
    display: block;
    overflow: hidden;
    color: #263861;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-students-bottom strong {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    color: #0963ff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-students-bottom article:nth-child(2) strong {
    color: #079b3f;
}

.sk-parent-students-bottom article:nth-child(3) strong {
    color: #5d21d8;
}

.sk-parent-students-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 0;
}

.sk-parent-students-pagination img {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.sk-parent-detail-main > .sk-students-footer {
    border-top: 1px solid #e1e9f4;
}

.sk-parent-remove-overlay {
    background: rgba(9, 16, 38, 0.58) !important;
    backdrop-filter: blur(3px);
}

.sk-parent-remove-modal {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 18px;
    width: 624px;
    max-width: calc(100vw - 32px);
    padding: 28px 38px 28px;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(11, 24, 56, 0.22);
}

.sk-parent-remove-close {
    position: absolute;
    top: 20px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 2px solid #ff1f2d;
    border-radius: 50%;
    color: #ff1f2d;
    background: #ffffff;
    cursor: pointer;
}

.sk-parent-remove-close svg,
.sk-parent-remove-head svg,
.sk-parent-remove-stat svg,
.sk-parent-remove-actions svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-remove-head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding-right: 48px;
}

.sk-parent-remove-head > span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #ff1f2d;
}

.sk-parent-remove-head h3 {
    margin: 0;
    color: #111827;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.1;
}

.sk-parent-remove-head p {
    max-width: 470px;
    margin: 22px 0 0;
    color: #4f5e78;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

.sk-parent-remove-summary {
    display: grid;
    grid-template-columns: 48px minmax(118px, 1fr) minmax(138px, 0.85fr) minmax(138px, 0.9fr);
    align-items: center;
    min-width: 0;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    background: #ffffff;
}

.sk-parent-remove-summary > img {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-parent-remove-person,
.sk-parent-remove-stat {
    min-width: 0;
    padding: 0 16px;
}

.sk-parent-remove-person {
    border-right: 1px solid #dfe8f5;
}

.sk-parent-remove-person strong,
.sk-parent-remove-stat strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-remove-person span,
.sk-parent-remove-stat span {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-remove-stat {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 10px;
    border-right: 1px solid #dfe8f5;
}

.sk-parent-remove-stat:last-child {
    border-right: 0;
}

.sk-parent-remove-stat svg {
    grid-row: 1 / 3;
    align-self: center;
    color: #364a86;
}

.sk-parent-remove-stat span {
    margin: 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
}

.sk-parent-remove-stat strong {
    color: #0963ff;
    font-size: 14px;
}

.sk-parent-remove-note {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sk-parent-remove-note span {
    color: #111827;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-remove-note textarea {
    width: 100%;
    height: 86px;
    min-height: 86px;
    max-height: 86px;
    padding: 14px;
    border: 1px solid #cfd9e8;
    border-radius: 7px;
    color: #071553;
    background: #ffffff;
    outline: 0;
    resize: none;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.sk-parent-remove-note textarea::placeholder {
    color: #7d879b;
}

.sk-parent-remove-note small {
    position: absolute;
    right: 12px;
    bottom: 8px;
    color: #6d778f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

.sk-parent-remove-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.sk-parent-remove-actions button {
    height: 40px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-parent-remove-actions button:first-child {
    background: linear-gradient(180deg, #626262 0%, #454545 100%);
}

.sk-parent-remove-actions button:last-child {
    background: linear-gradient(180deg, #ff2a32 0%, #d80d15 100%);
}

.sk-parent-remove-actions button:disabled {
    cursor: default;
    opacity: 0.72;
}

.sk-parent-reactivate-head > span {
    color: #16a34a;
}

.sk-parent-reactivate-actions button:last-child {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.sk-parent-reactivate-close {
    border-color: #16a34a;
    color: #16a34a;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-parent-detail-main {
        grid-template-rows: 54px minmax(0, 1fr) 20px;
        gap: 9px;
        padding: 14px 24px 0;
    }

    .sk-parent-detail-card {
        grid-template-rows: 40px minmax(0, 1fr);
        border-radius: 10px;
    }

    .sk-parent-detail-tabs {
        height: 40px;
        gap: 18px;
        padding: 0 18px;
    }

    .sk-parent-detail-tabs > div {
        min-width: 86px;
        height: 40px;
    }

    .sk-parent-detail-tabs p {
        font-size: 12px;
    }

    .sk-parent-profile-tab.show {
        grid-template-columns: 196px minmax(0, 1fr);
        gap: 12px;
        padding: 10px;
    }

    .sk-parent-profile-card {
        grid-template-rows: 164px 60px 88px minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
        border-radius: 8px;
    }

    .sk-parent-photo-block img {
        width: 128px;
        height: 112px;
        border-radius: 7px;
    }

    .sk-parent-photo-block h2 {
        margin: 6px 0 4px;
        font-size: 17px;
    }

    .sk-parent-photo-block > span {
        min-width: 62px;
        height: 20px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sk-parent-mini-card {
        gap: 4px;
        padding: 6px 8px;
    }

    .sk-parent-mini-card div,
    .sk-parent-summary-card div {
        grid-template-columns: 18px minmax(0, 1fr) auto;
        gap: 7px;
    }

    .sk-parent-mini-card svg,
    .sk-parent-summary-card svg {
        width: 14px;
        height: 14px;
    }

    .sk-parent-mini-card span,
    .sk-parent-mini-card strong,
    .sk-parent-summary-card span,
    .sk-parent-summary-card strong {
        font-size: 9px;
    }

    .sk-parent-action-stack {
        gap: 6px;
    }

    .sk-parent-action {
        height: 26px;
        gap: 7px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-parent-action svg {
        width: 14px;
        height: 14px;
    }

    .sk-parent-summary-card h3 {
        height: 28px;
        padding: 0 8px;
        font-size: 10px;
        line-height: 28px;
    }

    .sk-parent-summary-card div {
        min-height: 26px;
        padding: 0 8px;
    }

    .sk-parent-detail-content {
        grid-template-rows: minmax(0, 1fr) 166px;
        gap: 8px;
        padding: 10px;
        border-radius: 8px;
    }

    .sk-parent-detail-fields {
        grid-template-columns: 90px minmax(0, 1fr) 96px minmax(0, 1fr);
        grid-auto-rows: 29px;
        gap: 7px 18px;
    }

    .sk-parent-detail-fields span {
        font-size: 10px;
    }

    .sk-parent-detail-fields input {
        height: 29px;
        padding: 0 10px;
        border-radius: 6px;
        font-size: 10px;
    }

    .sk-parent-cnic-docs {
        grid-template-rows: 22px minmax(0, 1fr);
        gap: 6px;
    }

    .sk-parent-cnic-docs h3 {
        font-size: 13px;
        line-height: 22px;
    }

    .sk-parent-cnic-view {
        grid-template-rows: 26px minmax(0, 1fr) 30px;
        padding: 7px 9px 6px;
        border-radius: 8px;
    }

    .sk-parent-cnic-view h4 {
        gap: 7px;
        font-size: 11px;
    }

    .sk-parent-cnic-view h4 span {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .sk-parent-cnic-view svg {
        width: 13px;
        height: 13px;
    }

    .sk-parent-cnic-view > img {
        width: min(170px, 82%);
        height: 72px;
        border-radius: 6px;
    }

    .sk-parent-cnic-view a {
        width: min(166px, 82%);
        height: 26px;
        gap: 7px;
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-parent-students-tab.show {
        grid-template-rows: 44px minmax(0, 1fr) 58px 0;
        gap: 9px;
        padding: 12px;
    }

    .sk-parent-students-toolbar {
        grid-template-columns: minmax(220px, 340px) minmax(150px, 230px) minmax(0, 1fr);
        gap: 12px;
    }

    .sk-parent-students-search,
    .sk-parent-students-class,
    .sk-parent-students-rows,
    .sk-parent-students-add {
        height: 34px;
        border-radius: 7px;
    }

    .sk-parent-students-search input,
    .sk-parent-students-class,
    .sk-parent-students-rows,
    .sk-parent-students-add,
    .sk-parent-students-actions p,
    .sk-parent-students-table-meta p,
    .sk-parent-students-table-meta label {
        font-size: 10px;
    }

    .sk-parent-students-table-card {
        grid-template-rows: 42px minmax(0, 1fr);
    }

    .sk-parent-students-table-meta {
        padding: 0 16px;
    }

    .sk-parent-students-table th {
        height: 32px;
        font-size: 9px;
    }

    .sk-parent-students-table td {
        height: 48px;
        padding: 0 8px;
        font-size: 9px;
    }

    .sk-parent-student-photo {
        width: 38px;
        height: 38px;
        border-radius: 6px;
    }

    .sk-parent-student-status {
        min-width: 58px;
        height: 23px;
        gap: 5px;
        padding: 0 8px;
        border-radius: 6px;
        font-size: 9px;
    }

    .sk-parent-student-status::before {
        width: 6px;
        height: 6px;
    }

    .sk-parent-student-actions {
        gap: 6px;
    }

    .sk-parent-student-actions a,
    .sk-parent-student-actions button {
        width: 29px;
        height: 29px;
        border-radius: 7px;
    }

    .sk-parent-student-actions svg {
        width: 15px;
        height: 15px;
    }

    .sk-parent-students-bottom article {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 0 22px;
    }

    .sk-parent-students-bottom article > span {
        width: 42px;
        height: 42px;
        border-radius: 9px;
    }

    .sk-parent-students-bottom svg {
        width: 22px;
        height: 22px;
    }

    .sk-parent-students-bottom small {
        font-size: 11px;
    }

    .sk-parent-students-bottom strong {
        margin-top: 4px;
        font-size: 18px;
    }

    .sk-parent-remove-modal {
        width: 480px;
        gap: 12px;
        padding: 22px 28px;
        border-radius: 9px;
    }

    .sk-parent-remove-close {
        top: 16px;
        right: 18px;
        width: 28px;
        height: 28px;
    }

    .sk-parent-remove-head {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
        padding-right: 40px;
    }

    .sk-parent-remove-head h3 {
        font-size: 17px;
    }

    .sk-parent-remove-head p {
        margin-top: 16px;
        font-size: 10px;
    }

    .sk-parent-remove-summary {
        grid-template-columns: 38px minmax(90px, 1fr) minmax(102px, 0.85fr) minmax(102px, 0.9fr);
        min-height: 50px;
        padding: 8px;
    }

    .sk-parent-remove-summary > img {
        width: 34px;
        height: 34px;
    }

    .sk-parent-remove-person,
    .sk-parent-remove-stat {
        padding: 0 10px;
    }

    .sk-parent-remove-person strong,
    .sk-parent-remove-stat strong {
        font-size: 11px;
    }

    .sk-parent-remove-person span,
    .sk-parent-remove-stat span {
        font-size: 8px;
    }

    .sk-parent-remove-stat {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 1px 7px;
    }

    .sk-parent-remove-close svg,
    .sk-parent-remove-head svg,
    .sk-parent-remove-stat svg {
        width: 14px;
        height: 14px;
    }

    .sk-parent-remove-note span {
        font-size: 10px;
    }

    .sk-parent-remove-note textarea {
        height: 62px;
        min-height: 62px;
        max-height: 62px;
        padding: 10px;
        font-size: 10px;
    }

    .sk-parent-remove-note small {
        font-size: 8px;
    }

    .sk-parent-remove-actions {
        gap: 18px;
    }

    .sk-parent-remove-actions button {
        height: 32px;
        border-radius: 6px;
        font-size: 12px;
    }
}

@media (max-width: 760px) {
    .sk-parent-detail-main {
        grid-template-rows: 30px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 9px 10px 0;
    }

    .sk-parent-detail-card {
        grid-template-rows: 25px minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-parent-detail-tabs {
        height: 25px;
        gap: 10px;
        padding: 0 8px;
    }

    .sk-parent-detail-tabs > div {
        min-width: 54px;
        height: 25px;
    }

    .sk-parent-detail-tabs p {
        font-size: 7px;
    }

    .sk-parent-detail-tabs .bar-item-active::after {
        height: 2px;
    }

    .sk-parent-profile-tab.show {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 6px;
        padding: 6px;
    }

    .sk-parent-profile-card {
        grid-template-rows: 86px 36px 54px minmax(0, 1fr);
        gap: 5px;
        padding: 5px;
        border-radius: 7px;
    }

    .sk-parent-photo-block img {
        width: 68px;
        height: 52px;
        border-radius: 5px;
    }

    .sk-parent-photo-block h2 {
        margin: 3px 0 2px;
        font-size: 9px;
    }

    .sk-parent-photo-block > span {
        min-width: 34px;
        height: 11px;
        padding: 0 5px;
        font-size: 5px;
    }

    .sk-parent-mini-card {
        gap: 2px;
        padding: 3px 4px;
        border-radius: 5px;
    }

    .sk-parent-mini-card div,
    .sk-parent-summary-card div {
        grid-template-columns: 10px minmax(0, 1fr) auto;
        gap: 3px;
    }

    .sk-parent-mini-card svg,
    .sk-parent-summary-card svg {
        width: 8px;
        height: 8px;
    }

    .sk-parent-mini-card span,
    .sk-parent-mini-card strong,
    .sk-parent-summary-card span,
    .sk-parent-summary-card strong {
        font-size: 5px;
    }

    .sk-parent-action-stack {
        gap: 3px;
    }

    .sk-parent-action {
        height: 16px;
        gap: 3px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-action svg {
        width: 8px;
        height: 8px;
    }

    .sk-parent-summary-card h3 {
        height: 16px;
        padding: 0 4px;
        font-size: 6px;
        line-height: 16px;
    }

    .sk-parent-summary-card div {
        min-height: 15px;
        padding: 0 4px;
    }

    .sk-parent-detail-content {
        grid-template-rows: minmax(0, 1fr) 88px;
        gap: 5px;
        padding: 6px;
        border-radius: 7px;
    }

    .sk-parent-detail-fields {
        grid-template-columns: 48px minmax(0, 1fr) 54px minmax(0, 1fr);
        grid-auto-rows: 16px;
        gap: 3px 7px;
    }

    .sk-parent-detail-fields span {
        font-size: 5px;
    }

    .sk-parent-detail-fields input {
        height: 16px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-cnic-docs {
        grid-template-rows: 13px minmax(0, 1fr);
        gap: 3px;
    }

    .sk-parent-cnic-docs h3 {
        font-size: 7px;
        line-height: 13px;
    }

    .sk-parent-cnic-grid {
        gap: 4px;
    }

    .sk-parent-cnic-view {
        grid-template-rows: 14px minmax(0, 1fr) 16px;
        padding: 4px;
        border-radius: 5px;
    }

    .sk-parent-cnic-view h4 {
        gap: 3px;
        font-size: 6px;
    }

    .sk-parent-cnic-view h4 span {
        width: 11px;
        height: 11px;
        border-radius: 3px;
    }

    .sk-parent-cnic-view svg {
        width: 7px;
        height: 7px;
    }

    .sk-parent-cnic-view > img {
        width: min(88px, 82%);
        height: 36px;
        border-radius: 4px;
    }

    .sk-parent-cnic-view a {
        width: min(84px, 86%);
        height: 13px;
        gap: 3px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-students-tab.show {
        grid-template-rows: 22px minmax(0, 1fr) 30px 0;
        gap: 5px;
        padding: 6px;
    }

    .sk-parent-students-toolbar {
        grid-template-columns: minmax(96px, 1fr) minmax(72px, .75fr) minmax(0, .85fr);
        gap: 5px;
    }

    .sk-parent-students-actions {
        gap: 4px;
    }

    .sk-parent-students-search,
    .sk-parent-students-class,
    .sk-parent-students-rows,
    .sk-parent-students-add {
        height: 18px;
        border-radius: 5px;
    }

    .sk-parent-students-search {
        padding: 0 5px;
    }

    .sk-parent-students-search svg {
        width: 9px;
        height: 9px;
        margin-right: 4px;
    }

    .sk-parent-students-search input,
    .sk-parent-students-class,
    .sk-parent-students-rows,
    .sk-parent-students-add,
    .sk-parent-students-actions p,
    .sk-parent-students-table-meta p,
    .sk-parent-students-table-meta label {
        font-size: 5px;
    }

    .sk-parent-students-table-card {
        grid-template-rows: 22px minmax(0, 1fr);
    }

    .sk-parent-students-table-meta {
        padding: 0 7px;
    }

    .sk-parent-students-rows {
        width: 34px;
        padding: 0 3px;
    }

    .sk-parent-students-add {
        gap: 3px;
        padding: 0 5px;
    }

    .sk-parent-students-add svg {
        width: 8px;
        height: 8px;
    }

    .sk-parent-students-table th,
    .sk-parent-students-table td {
        padding: 0 4px;
    }

    .sk-parent-students-table th {
        height: 16px;
        font-size: 5px;
    }

    .sk-parent-students-table td {
        height: 22px;
        font-size: 5px;
    }

    .sk-parent-student-photo {
        width: 16px;
        height: 16px;
        border-radius: 4px;
    }

    .sk-parent-student-status {
        min-width: 30px;
        height: 12px;
        gap: 2px;
        padding: 0 3px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-student-status::before {
        width: 4px;
        height: 4px;
    }

    .sk-parent-student-actions {
        gap: 2px;
    }

    .sk-parent-student-actions a,
    .sk-parent-student-actions button {
        width: 14px;
        height: 14px;
        border-radius: 4px;
    }

    .sk-parent-student-actions svg {
        width: 7px;
        height: 7px;
    }

    .sk-parent-students-bottom article {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 5px;
        padding: 0 8px;
    }

    .sk-parent-students-bottom article > span {
        width: 18px;
        height: 18px;
        border-radius: 5px;
    }

    .sk-parent-students-bottom svg {
        width: 10px;
        height: 10px;
    }

    .sk-parent-students-bottom small {
        font-size: 5px;
    }

    .sk-parent-students-bottom strong {
        margin-top: 2px;
        font-size: 8px;
    }

    .sk-parent-remove-modal {
        width: 294px;
        gap: 7px;
        padding: 13px 16px;
        border-radius: 7px;
    }

    .sk-parent-remove-close {
        top: 9px;
        right: 10px;
        width: 18px;
        height: 18px;
        border-width: 1px;
    }

    .sk-parent-remove-head {
        grid-template-columns: 14px minmax(0, 1fr);
        gap: 6px;
        padding-right: 25px;
    }

    .sk-parent-remove-head h3 {
        font-size: 10px;
    }

    .sk-parent-remove-head p {
        max-width: 230px;
        margin-top: 8px;
        font-size: 5px;
    }

    .sk-parent-remove-summary {
        grid-template-columns: 23px minmax(54px, 1fr) minmax(62px, 0.85fr) minmax(62px, 0.9fr);
        min-height: 32px;
        padding: 5px;
        border-radius: 5px;
    }

    .sk-parent-remove-summary > img {
        width: 21px;
        height: 21px;
        border-radius: 4px;
    }

    .sk-parent-remove-person,
    .sk-parent-remove-stat {
        padding: 0 5px;
    }

    .sk-parent-remove-person strong,
    .sk-parent-remove-stat strong {
        font-size: 6px;
    }

    .sk-parent-remove-person span,
    .sk-parent-remove-stat span {
        margin-top: 2px;
        font-size: 5px;
    }

    .sk-parent-remove-stat {
        grid-template-columns: 10px minmax(0, 1fr);
        gap: 1px 4px;
    }

    .sk-parent-remove-close svg,
    .sk-parent-remove-head svg,
    .sk-parent-remove-stat svg {
        width: 8px;
        height: 8px;
    }

    .sk-parent-remove-note {
        gap: 4px;
    }

    .sk-parent-remove-note span {
        font-size: 6px;
    }

    .sk-parent-remove-note textarea {
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        padding: 7px;
        border-radius: 5px;
        font-size: 6px;
    }

    .sk-parent-remove-note small {
        right: 8px;
        bottom: 5px;
        font-size: 5px;
    }

    .sk-parent-remove-actions {
        gap: 12px;
    }

    .sk-parent-remove-actions button {
        height: 22px;
        border-radius: 5px;
        font-size: 7px;
    }
}

.sk-parent-tab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.sk-parent-tab-search {
    display: flex;
    align-items: center;
    width: min(340px, 34%);
    min-width: 260px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #5d6987;
    background: #ffffff;
}

.sk-parent-tab-search svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-parent-tab-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-tab-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}

.sk-parent-row-select {
    display: grid;
    grid-template-columns: auto 44px;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #071553;
    background: #ffffff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-row-select select {
    width: 44px;
    height: 100%;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.sk-parent-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    background: #4f965b;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.sk-parent-add-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-tab-actions .text-right-message {
    display: none;
}

.sk-parent-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 260px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.sk-parent-table-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-parent-table-scroll {
    width: 100%;
    min-width: 0;
    max-height: 100%;
    overflow: auto;
}

.sk-parent-table {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-parent-table th,
.sk-parent-table td {
    overflow: hidden;
    padding: 0 12px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #e4ebf5;
}

.sk-parent-table th {
    height: 48px;
    color: #071553;
    background: #fbfcff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-parent-table td {
    height: 68px;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-table tbody tr:last-child td {
    border-bottom: 0;
}

.sk-parent-table th:nth-child(1),
.sk-parent-table td:nth-child(1) { width: 22%; }
.sk-parent-table th:nth-child(2),
.sk-parent-table td:nth-child(2) { width: 10%; }
.sk-parent-table th:nth-child(3),
.sk-parent-table td:nth-child(3) { width: 13%; }
.sk-parent-table th:nth-child(4),
.sk-parent-table td:nth-child(4) { width: 14%; }
.sk-parent-table th:nth-child(5),
.sk-parent-table td:nth-child(5) { width: 18%; }
.sk-parent-table th:nth-child(6),
.sk-parent-table td:nth-child(6) { width: 10%; }
.sk-parent-table th:nth-child(7),
.sk-parent-table td:nth-child(7) { width: 13%; }

.sk-parent-person {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sk-parent-person img,
.sk-parent-photo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #edf3fb;
}

.sk-parent-person strong {
    display: block;
    overflow: hidden;
    margin-bottom: 6px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    text-overflow: ellipsis;
}

.sk-parent-relation-chip,
.sk-parent-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 23px;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.15;
}

.sk-parent-relation-chip.is-father,
.sk-parent-status-chip.is-secondary {
    color: #0963ff;
    background: #eaf2ff;
    border: 1px solid #cfe0ff;
}

.sk-parent-relation-chip.is-mother {
    color: #f01f5b;
    background: #fff0f5;
    border: 1px solid #ffd0de;
}

.sk-parent-relation-chip.is-guardian {
    color: #8733e8;
    background: #f3eaff;
    border: 1px solid #dfc7ff;
}

.sk-parent-relation-chip.is-other {
    color: #52607f;
    background: #eef2f7;
    border: 1px solid #dbe5f3;
}

.sk-parent-status-chip.is-primary {
    color: #168b31;
    background: #e7f8e9;
    border: 1px solid #c8edcf;
}

.sk-parent-status-chip.is-emergency {
    color: #f06418;
    background: #fff3ec;
    border: 1px solid #ffd6bf;
    white-space: normal;
}

.sk-parent-contact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sk-parent-contact svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #364a86;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-contact.is-whatsapp svg {
    stroke: #13b84f;
}

.sk-parent-contact.is-email svg {
    stroke: #0963ff;
}

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

.sk-parent-icon-button {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid #bcd2ff;
    border-radius: 7px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.sk-parent-icon-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-icon-button.is-danger {
    color: #f01f1f;
    border-color: #ffc6c6;
    background: #fffafa;
}

.sk-parent-icon-button:disabled {
    opacity: 0.75;
    cursor: default;
}

/* Reusable confirmation popup (delink/delete confirm, etc.) */
.sk-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(16, 28, 52, 0.42);
}

.sk-confirm-overlay.is-open {
    display: grid;
}

.sk-confirm-modal {
    display: grid;
    justify-items: center;
    width: min(420px, calc(100vw - 32px));
    padding: 36px 34px 30px;
    border: 1px solid #d8e3f1;
    border-radius: 14px;
    text-align: center;
    color: #071553;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(8, 20, 45, 0.24);
}

.sk-confirm-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: #f01f1f;
    background: #fdeaea;
}

.sk-confirm-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-confirm-modal h2 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 19px;
}

.sk-confirm-modal p {
    margin: 10px 0 0;
    color: #53617d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.sk-confirm-error {
    margin: 12px 0 0;
    color: #b42318;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-confirm-modal footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    margin-top: 26px;
}

.sk-confirm-modal footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border: 1px solid #d8e3f1;
    border-radius: 8px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.sk-confirm-modal footer button.sk-confirm-cancel-btn {
    color: #071553;
    border-color: #d8e3f1;
    background: #f8fafc;
}

.sk-confirm-modal footer button.sk-confirm-danger-btn {
    color: #ffffff;
    border-color: #f01f1f;
    background: #f01f1f;
}

.sk-student-reset-modal {
    width: min(470px, calc(100vw - 32px));
    justify-items: stretch;
    text-align: left;
}

.sk-student-reset-modal .sk-confirm-icon,
.sk-student-reset-modal h2,
.sk-student-reset-modal > p {
    justify-self: center;
    text-align: center;
}

.sk-student-reset-icon {
    color: #0963ff;
    background: #eaf3ff;
}

.sk-student-reset-field {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-student-reset-field > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
}

.sk-student-reset-field input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #d8e3f1;
    border-radius: 8px;
    outline: 0;
    color: #071553;
    background: #f8fafc;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-student-reset-field input:focus {
    border-color: #0963ff;
    box-shadow: 0 0 0 3px rgba(9, 99, 255, 0.12);
}

.sk-student-reset-field button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d8e3f1;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
}

.sk-student-reset-field button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-student-reset-confirm {
    border-color: #0963ff !important;
    background: #0963ff !important;
}

.sk-confirm-modal footer button:disabled {
    opacity: 0.7;
    cursor: default;
}

@media (max-width: 900px) {
    .sk-confirm-modal {
        width: min(320px, calc(100vw - 16px));
        padding: 24px 22px 20px;
        border-radius: 10px;
    }

    .sk-confirm-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 12px;
    }

    .sk-confirm-icon svg { width: 20px; height: 20px; }
    .sk-confirm-modal h2 { font-size: 14px; }
    .sk-confirm-modal p { font-size: 10px; }
    .sk-confirm-modal footer { gap: 9px; margin-top: 16px; }
    .sk-confirm-modal footer button { height: 32px; border-radius: 6px; font-size: 10px; }
    .sk-student-reset-field { margin-top: 12px; font-size: 10px; }
    .sk-student-reset-field > div { grid-template-columns: minmax(0, 1fr) 32px; gap: 7px; }
    .sk-student-reset-field input { height: 32px; padding: 0 9px; border-radius: 6px; font-size: 10px; }
    .sk-student-reset-field button { width: 32px; height: 32px; border-radius: 6px; }
    .sk-student-reset-field button svg { width: 14px; height: 14px; }
}

.sk-parent-emergency {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: 14px 30px 12px;
    border: 1px solid #ffd9c5;
    border-radius: 9px;
    background: #fffaf7;
}

.sk-parent-emergency:empty {
    display: none;
}

.sk-parent-emergency-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    min-width: 0;
}

.sk-parent-emergency-head > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ff8a34;
    border-radius: 8px;
    color: #ff7a18;
    background: #fff4ec;
}

.sk-parent-emergency svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-emergency-head strong {
    display: block;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-parent-emergency-head p {
    margin: 5px 0 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-emergency-card {
    display: grid;
    grid-template-columns: minmax(210px, 1.25fr) minmax(160px, 1fr) minmax(170px, 1fr) minmax(250px, 1.6fr);
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: 12px 16px;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-parent-emergency-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sk-parent-emergency-person img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.sk-parent-emergency-person strong,
.sk-parent-emergency-meta strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
    text-overflow: ellipsis;
}

.sk-parent-emergency-meta {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 12px;
    min-width: 0;
    padding-left: 28px;
    border-left: 1px solid #dfe8f5;
}

.sk-parent-emergency-meta span {
    grid-row: 1 / 3;
    color: #33467d;
}

.sk-parent-emergency-meta small {
    color: #6c7897;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

.sk-parent-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
}

.sk-parent-link-overlay {
    background: rgba(9, 16, 38, 0.56);
    backdrop-filter: blur(2px);
}

.sk-parent-link-modal {
    position: relative;
    width: min(690px, calc(100vw - 40px));
    max-height: min(86vh, 660px);
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(7, 21, 83, 0.22);
    color: #071553;
}

.sk-parent-link-head {
    position: relative;
    padding: 24px 28px 13px;
    text-align: center;
}

.sk-parent-link-head h3 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.15;
}

.sk-parent-link-head p {
    width: min(560px, 100%);
    margin: 10px auto 0;
    color: #5d6987;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.sk-parent-link-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #34446d;
    background: #ffffff;
}

.sk-parent-link-close svg,
.sk-parent-link-search svg,
.sk-parent-link-action svg,
.sk-parent-link-create-btn svg,
.sk-parent-link-contacts svg,
.sk-parent-link-note svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-link-close svg {
    width: 22px;
    height: 22px;
}

.sk-parent-link-body {
    padding: 0 24px 26px;
}

.sk-parent-link-search {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    color: #5d6987;
    background: #ffffff;
}

.sk-parent-link-search > svg {
    width: 22px;
    height: 22px;
}

.sk-parent-link-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-link-search input::placeholder {
    color: #7b86a3;
}

.sk-parent-link-search button {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    color: #314268;
    background: transparent;
    cursor: pointer;
}

.sk-parent-link-search button svg {
    width: 18px;
    height: 18px;
}

.sk-parent-link-results {
    min-height: 96px;
    max-height: 265px;
    margin-top: 12px;
    overflow: auto;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #ffffff;
}

.sk-parent-link-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid #e6edf7;
    background: #fbfcff;
}

.sk-parent-link-results-head strong {
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-link-results-head span {
    color: #5d6987;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-parent-link-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 136px;
    align-items: center;
    gap: 16px;
    min-height: 92px;
    padding: 12px 16px;
    border-bottom: 1px solid #e6edf7;
}

.sk-parent-link-row:last-child {
    border-bottom: 0;
}

.sk-parent-link-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #dbe5f3;
    background: #f4f7fb;
}

.sk-parent-link-info {
    min-width: 0;
}

.sk-parent-link-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sk-parent-link-name strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-link-contacts {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin-top: 10px;
}

.sk-parent-link-contacts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #34446d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    white-space: nowrap;
}

.sk-parent-link-contacts svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #006cff;
}

.sk-parent-link-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    color: #11943d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-link-note svg {
    width: 16px;
    height: 16px;
}

.sk-parent-link-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 136px;
    height: 38px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    background: #4f965b;
    box-shadow: 0 10px 18px rgba(79, 150, 91, 0.18);
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-link-action svg {
    width: 17px;
    height: 17px;
}

.sk-parent-link-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 94px;
    padding: 18px;
    color: #6d7795;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    text-align: center;
}

.sk-parent-link-empty.is-error {
    color: #e82727;
}

.sk-parent-link-create {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 1px;
}

.sk-parent-link-create::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 1px;
    background: #e6edf7;
}

.sk-parent-link-create > span {
    position: relative;
    z-index: 1;
    padding: 0 16px;
    color: #5d6987;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-link-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 300px;
    max-width: 100%;
    height: 48px;
    border: 1px solid #49a75c;
    border-radius: 7px;
    color: #13853a;
    background: linear-gradient(180deg, #ffffff 0%, #f2fff5 100%);
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-parent-link-create-btn svg {
    width: 20px;
    height: 20px;
}

.sk-parentinfo-link-overlay {
    background: rgba(9, 16, 38, 0.56) !important;
    backdrop-filter: blur(3px);
}

.sk-parentinfo-link-modal {
    width: 870px;
    max-width: calc(100vw - 44px);
    max-height: min(84vh, 560px);
    border-radius: 8px;
}

.sk-parentinfo-link-head {
    padding: 34px 38px 12px;
    text-align: left;
}

.sk-parentinfo-link-head h3 {
    color: #111827;
    font-size: 25px;
}

.sk-parentinfo-link-head p {
    width: auto;
    max-width: 680px;
    margin: 18px 0 0;
    color: #333b4d;
    font-size: 13px;
}

.sk-parentinfo-link-close {
    top: 20px;
    right: 28px;
    width: 42px;
    height: 42px;
    border: 6px solid #4f965b;
    border-radius: 50%;
    color: #4f965b;
    background: #ffffff;
}

.sk-parentinfo-link-close svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.4;
}

.sk-parentinfo-link-body {
    padding: 0 38px 22px;
}

.sk-parentinfo-link-search-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 144px;
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin-top: 10px;
}

.sk-parentinfo-link-search-row > span {
    color: #111827;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-parentinfo-link-search {
    height: 44px;
    border-radius: 7px;
}

.sk-parentinfo-link-search-btn {
    height: 44px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    background: linear-gradient(180deg, #0963ff 0%, #0756df 100%);
    box-shadow: 0 10px 20px rgba(9, 99, 255, 0.18);
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 16px;
}

.sk-parentinfo-link-results {
    display: grid;
    gap: 8px;
    min-height: 0;
    max-height: 226px;
    margin-top: 20px;
    overflow: hidden auto;
    border: 0;
    border-radius: 0;
}

.sk-parentinfo-link-row {
    display: grid;
    grid-template-columns: 54px minmax(170px, 1.2fr) minmax(70px, .55fr) minmax(70px, .55fr) minmax(78px, .6fr) 136px;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 70px;
    padding: 8px 14px;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    background: #ffffff;
}

.sk-parentinfo-link-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-parentinfo-link-name,
.sk-parentinfo-link-meta {
    min-width: 0;
}

.sk-parentinfo-link-name strong,
.sk-parentinfo-link-meta strong {
    display: block;
    overflow: hidden;
    color: #111827;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parentinfo-link-name span,
.sk-parentinfo-link-meta small {
    display: block;
    overflow: hidden;
    margin-top: 8px;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parentinfo-link-meta small {
    margin-top: 0;
    margin-bottom: 8px;
    color: #111827;
}

.sk-parentinfo-link-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 134px;
    height: 38px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    background: linear-gradient(180deg, #4fa560 0%, #3d884c 100%);
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parentinfo-link-create {
    gap: 14px;
    margin-top: 20px;
}

.sk-parentinfo-link-create::before {
    top: 10px;
}

.sk-parentinfo-link-create-btn {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    background: linear-gradient(180deg, #4fa560 0%, #3d884c 100%);
    font-size: 17px;
}

.sk-parentinfo-link-create-btn svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-parent-link-modal {
        width: min(610px, calc(100vw - 32px));
        max-height: min(88vh, 570px);
        border-radius: 12px;
    }

    .sk-parent-link-head {
        padding: 18px 24px 10px;
    }

    .sk-parent-link-head h3 {
        font-size: 20px;
    }

    .sk-parent-link-head p {
        margin-top: 8px;
        font-size: 12px;
    }

    .sk-parent-link-close {
        width: 34px;
        height: 34px;
        top: 12px;
        right: 12px;
    }

    .sk-parent-link-close svg {
        width: 19px;
        height: 19px;
    }

    .sk-parent-link-body {
        padding: 0 20px 20px;
    }

    .sk-parent-link-search {
        height: 42px;
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 8px;
        padding: 0 12px;
    }

    .sk-parent-link-search > svg {
        width: 19px;
        height: 19px;
    }

    .sk-parent-link-search input {
        font-size: 12px;
    }

    .sk-parent-link-results {
        max-height: 224px;
        margin-top: 10px;
    }

    .sk-parent-link-results-head {
        height: 36px;
        padding: 0 14px;
    }

    .sk-parent-link-results-head strong,
    .sk-parent-link-results-head span,
    .sk-parent-link-empty,
    .sk-parent-link-note,
    .sk-parent-link-contacts span {
        font-size: 11px;
    }

    .sk-parent-link-row {
        grid-template-columns: 48px minmax(0, 1fr) 124px;
        min-height: 78px;
        gap: 12px;
        padding: 10px 14px;
    }

    .sk-parent-link-avatar {
        width: 48px;
        height: 48px;
    }

    .sk-parent-link-name strong {
        font-size: 14px;
    }

    .sk-parent-link-contacts {
        gap: 14px;
        margin-top: 7px;
    }

    .sk-parent-link-contacts svg,
    .sk-parent-link-note svg {
        width: 14px;
        height: 14px;
    }

    .sk-parent-link-note {
        margin-top: 7px;
    }

    .sk-parent-link-action {
        width: 124px;
        height: 34px;
        gap: 7px;
        font-size: 12px;
    }

    .sk-parent-link-action svg {
        width: 15px;
        height: 15px;
    }

    .sk-parent-link-create {
        gap: 11px;
        margin-top: 16px;
    }

    .sk-parent-link-create-btn {
        width: 260px;
        height: 42px;
        font-size: 13px;
    }

    .sk-parentinfo-link-modal {
        width: 690px;
        max-height: min(88vh, 500px);
        border-radius: 8px;
    }

    .sk-parentinfo-link-head {
        padding: 26px 30px 9px;
    }

    .sk-parentinfo-link-head h3 {
        font-size: 20px;
    }

    .sk-parentinfo-link-head p {
        margin-top: 14px;
        font-size: 11px;
    }

    .sk-parentinfo-link-close {
        top: 16px;
        right: 20px;
        width: 34px;
        height: 34px;
        border-width: 5px;
    }

    .sk-parentinfo-link-body {
        padding: 0 30px 18px;
    }

    .sk-parentinfo-link-search-row {
        grid-template-columns: 90px minmax(0, 1fr) 116px;
        gap: 14px;
    }

    .sk-parentinfo-link-search-row > span {
        font-size: 11px;
    }

    .sk-parentinfo-link-search,
    .sk-parentinfo-link-search-btn {
        height: 36px;
    }

    .sk-parentinfo-link-search-btn {
        font-size: 13px;
    }

    .sk-parentinfo-link-results {
        max-height: 192px;
        margin-top: 16px;
        gap: 7px;
    }

    .sk-parentinfo-link-row {
        grid-template-columns: 44px minmax(130px, 1.2fr) minmax(56px, .55fr) minmax(56px, .55fr) minmax(62px, .6fr) 110px;
        gap: 10px;
        min-height: 58px;
        padding: 7px 12px;
    }

    .sk-parentinfo-link-avatar {
        width: 40px;
        height: 40px;
        border-radius: 7px;
    }

    .sk-parentinfo-link-name strong,
    .sk-parentinfo-link-meta strong {
        font-size: 11px;
    }

    .sk-parentinfo-link-name span,
    .sk-parentinfo-link-meta small {
        margin-top: 6px;
        font-size: 9px;
    }

    .sk-parentinfo-link-meta small {
        margin-top: 0;
        margin-bottom: 6px;
    }

    .sk-parentinfo-link-action {
        width: 106px;
        height: 31px;
        border-radius: 6px;
        font-size: 10px;
    }

    .sk-parentinfo-link-create {
        margin-top: 16px;
    }

    .sk-parentinfo-link-create-btn {
        width: 100%;
        height: 34px;
        font-size: 13px;
    }
}

@media (max-width: 760px), (max-height: 430px) {
    .sk-parent-link-modal {
        width: min(520px, calc(100vw - 20px));
        max-height: calc(100vh - 18px);
        border-radius: 9px;
    }

    .sk-parent-link-head {
        padding: 10px 14px 7px;
    }

    .sk-parent-link-head h3 {
        font-size: 14px;
    }

    .sk-parent-link-head p {
        margin-top: 4px;
        font-size: 8px;
    }

    .sk-parent-link-close {
        width: 24px;
        height: 24px;
        top: 8px;
        right: 8px;
        border-radius: 5px;
    }

    .sk-parent-link-close svg {
        width: 14px;
        height: 14px;
    }

    .sk-parent-link-body {
        padding: 0 12px 11px;
    }

    .sk-parent-link-search {
        height: 28px;
        grid-template-columns: 14px minmax(0, 1fr);
        gap: 5px;
        padding: 0 8px;
        border-radius: 5px;
    }

    .sk-parent-link-search > svg {
        width: 13px;
        height: 13px;
    }

    .sk-parent-link-search input {
        font-size: 8px;
    }

    .sk-parent-link-search button {
        width: 20px;
        height: 20px;
    }

    .sk-parent-link-search button svg {
        width: 12px;
        height: 12px;
    }

    .sk-parent-link-results {
        max-height: 148px;
        margin-top: 7px;
        border-radius: 5px;
    }

    .sk-parent-link-results-head {
        height: 24px;
        padding: 0 8px;
    }

    .sk-parent-link-results-head strong,
    .sk-parent-link-results-head span,
    .sk-parent-link-empty,
    .sk-parent-link-note,
    .sk-parent-link-contacts span {
        font-size: 7px;
    }

    .sk-parent-link-row {
        grid-template-columns: 32px minmax(0, 1fr) 78px;
        min-height: 54px;
        gap: 7px;
        padding: 7px 8px;
    }

    .sk-parent-link-avatar {
        width: 32px;
        height: 32px;
    }

    .sk-parent-link-name {
        gap: 6px;
    }

    .sk-parent-link-name strong {
        font-size: 9px;
    }

    .sk-parent-link-contacts {
        gap: 8px;
        margin-top: 4px;
    }

    .sk-parent-link-contacts svg,
    .sk-parent-link-note svg {
        width: 9px;
        height: 9px;
    }

    .sk-parent-link-note {
        margin-top: 4px;
        gap: 4px;
    }

    .sk-parent-link-action {
        width: 78px;
        height: 24px;
        gap: 4px;
        border-radius: 5px;
        font-size: 7px;
    }

    .sk-parent-link-action svg {
        width: 10px;
        height: 10px;
    }

    .sk-parent-link-create {
        gap: 7px;
        margin-top: 10px;
    }

    .sk-parent-link-create::before {
        top: 6px;
    }

    .sk-parent-link-create > span {
        padding: 0 8px;
        font-size: 7px;
    }

    .sk-parent-link-create-btn {
        width: 190px;
        height: 28px;
        gap: 5px;
        border-radius: 5px;
        font-size: 8px;
    }

    .sk-parent-link-create-btn svg {
        width: 12px;
        height: 12px;
    }

    .sk-parentinfo-link-modal {
        width: min(420px, calc(100vw - 20px));
        border-radius: 7px;
    }

    .sk-parentinfo-link-head {
        padding: 14px 18px 6px;
    }

    .sk-parentinfo-link-head h3 {
        font-size: 12px;
    }

    .sk-parentinfo-link-head p {
        margin-top: 8px;
        font-size: 6px;
    }

    .sk-parentinfo-link-close {
        top: 10px;
        right: 12px;
        width: 22px;
        height: 22px;
        border-width: 3px;
        border-radius: 50%;
    }

    .sk-parentinfo-link-close svg {
        width: 12px;
        height: 12px;
    }

    .sk-parentinfo-link-body {
        padding: 0 18px 11px;
    }

    .sk-parentinfo-link-search-row {
        grid-template-columns: 54px minmax(0, 1fr) 62px;
        gap: 7px;
        margin-top: 5px;
    }

    .sk-parentinfo-link-search-row > span {
        font-size: 6px;
    }

    .sk-parentinfo-link-search,
    .sk-parentinfo-link-search-btn {
        height: 22px;
        border-radius: 5px;
    }

    .sk-parentinfo-link-search-btn {
        font-size: 7px;
    }

    .sk-parentinfo-link-results {
        max-height: 118px;
        margin-top: 10px;
        gap: 4px;
    }

    .sk-parentinfo-link-row {
        grid-template-columns: 25px minmax(76px, 1.2fr) minmax(32px, .55fr) minmax(32px, .55fr) minmax(36px, .6fr) 58px;
        gap: 5px;
        min-height: 34px;
        padding: 4px 7px;
        border-radius: 5px;
    }

    .sk-parentinfo-link-avatar {
        width: 22px;
        height: 22px;
        border-radius: 5px;
    }

    .sk-parentinfo-link-name strong,
    .sk-parentinfo-link-meta strong {
        font-size: 6px;
    }

    .sk-parentinfo-link-name span,
    .sk-parentinfo-link-meta small {
        margin-top: 3px;
        font-size: 5px;
    }

    .sk-parentinfo-link-meta small {
        margin-top: 0;
        margin-bottom: 3px;
    }

    .sk-parentinfo-link-action {
        width: 56px;
        height: 18px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parentinfo-link-create {
        gap: 7px;
        margin-top: 8px;
    }

    .sk-parentinfo-link-create-btn {
        width: 100%;
        height: 22px;
        font-size: 8px;
    }

    .sk-parentinfo-link-create-btn svg {
        width: 10px;
        height: 10px;
    }
}

.sk-student-detail-page #previous-school.content-col.tab-section.show {
    display: grid;
    grid-template-rows: 54px minmax(0, auto) minmax(0, 148px) 22px;
    gap: 14px;
    min-width: 0;
    min-height: 0;
    width: auto !important;
    height: 100%;
    margin: 0 !important;
    padding: 6px 16px 14px;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
}

.sk-record-tab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.sk-record-tab-search {
    display: flex;
    align-items: center;
    width: min(360px, 36%);
    min-width: 280px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #5d6987;
    background: #ffffff;
}

.sk-record-tab-search svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-record-tab-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-record-tab-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}

.sk-record-row-select {
    display: grid;
    grid-template-columns: auto 44px;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #071553;
    background: #ffffff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-record-row-select select {
    width: 44px;
    height: 100%;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.sk-record-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    background: #4f965b;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.sk-record-add-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-record-tab-actions .text-right-message {
    display: none;
}

.sk-record-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 260px;
    transform: translate(-50%, -50%);
    text-align: center;
}

.sk-record-table-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-record-table-scroll {
    width: 100%;
    min-width: 0;
    max-height: 100%;
    overflow: auto;
}

.sk-record-table {
    width: 100%;
    min-width: 880px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-record-table th,
.sk-record-table td {
    overflow: hidden;
    padding: 0 14px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #e4ebf5;
}

.sk-record-table th {
    height: 50px;
    color: #263861;
    background: #fbfcff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-record-table td {
    height: 76px;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-record-table tbody tr:last-child td {
    border-bottom: 0;
}

.sk-record-table th:nth-child(1),
.sk-record-table td:nth-child(1) { width: 20%; }
.sk-record-table th:nth-child(2),
.sk-record-table td:nth-child(2) { width: 10%; }
.sk-record-table th:nth-child(3),
.sk-record-table td:nth-child(3) { width: 12%; }
.sk-record-table th:nth-child(4),
.sk-record-table td:nth-child(4) { width: 24%; }
.sk-record-table th:nth-child(5),
.sk-record-table td:nth-child(5) { width: 11%; }
.sk-record-table th:nth-child(6),
.sk-record-table td:nth-child(6) { width: 11%; }
.sk-record-table th:nth-child(7),
.sk-record-table td:nth-child(7) { width: 12%; }

.sk-record-school {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sk-record-school > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #d7e5ff;
    border-radius: 8px;
    color: #0963ff;
    background: #edf4ff;
}

.sk-record-school svg,
.sk-record-icon-button svg,
.sk-record-status svg,
.sk-record-details svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-record-school strong {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    text-overflow: ellipsis;
}

.sk-record-school small {
    display: block;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

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

.sk-record-icon-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #cbdaf0;
    border-radius: 7px;
    color: #33467d;
    background: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.sk-record-icon-button svg {
    width: 18px;
    height: 18px;
}

.sk-record-icon-button.student-record-view,
.sk-record-row-actions .student-record-view {
    color: #0963ff;
    border-color: #bcd2ff;
}

.sk-record-icon-button.student-record-edit {
    color: #0963ff;
    border-color: #bcd2ff;
}

.sk-record-icon-button.is-danger {
    color: #f01f1f;
    border-color: #ffc6c6;
    background: #fffafa;
}

.sk-record-icon-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.sk-record-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 7px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-record-status svg {
    width: 15px;
    height: 15px;
}

.sk-record-status.is-verified {
    color: #168b31;
    background: #e7f8e9;
    border: 1px solid #c8edcf;
}

.sk-record-status.is-pending {
    color: #f06418;
    background: #fff3e7;
    border: 1px solid #ffd7a8;
}

.sk-record-details {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: 18px 28px 14px;
    border: 1px solid #d7e5ff;
    border-radius: 10px;
    background: #fbfdff;
}

.sk-record-details:empty {
    display: none;
}

.sk-record-details-title {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #0963ff;
    margin-bottom: 14px;
}

.sk-record-details-title span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.sk-record-details-title strong {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 18px;
}

.sk-record-details-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.5fr;
    min-width: 0;
    min-height: 0;
}

.sk-record-detail-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    padding: 0 30px;
    border-left: 1px solid #dfe8f5;
}

.sk-record-detail-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.sk-record-detail-item > span {
    color: #33467d;
}

.sk-record-detail-item small {
    display: block;
    margin-bottom: 7px;
    color: #52607f;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-record-detail-item p {
    margin: 0;
    color: #334163;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}

.sk-record-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
}

.sk-prev-record-overlay {
    background: rgba(9, 16, 38, 0.56);
    backdrop-filter: blur(2px);
}

.sk-prev-record-modal {
    width: min(650px, calc(100vw - 40px));
    max-height: min(88vh, 620px);
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    background: #ffffff;
    color: #071553;
    box-shadow: 0 24px 70px rgba(7, 21, 83, 0.22);
}

.sk-prev-record-modal form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: inherit;
}

.sk-prev-record-head {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 18px;
    padding: 24px 28px 14px;
}

.sk-prev-record-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #0963ff;
    background: #eaf2ff;
}

.sk-prev-record-head svg,
.sk-prev-record-grid svg,
.sk-prev-record-upload svg,
.sk-prev-record-footer svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-prev-record-icon svg {
    width: 25px;
    height: 25px;
}

.sk-prev-record-head h2 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.15;
}

.sk-prev-record-head p {
    margin: 8px 0 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

.sk-prev-record-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #34446d;
    background: #ffffff;
}

.sk-prev-record-close svg {
    width: 21px;
    height: 21px;
}

.sk-prev-record-body {
    min-height: 0;
    overflow: auto;
    padding: 14px 28px 18px;
}

.sk-prev-record-grid {
    display: grid;
    grid-template-columns: 1fr 0.95fr 0.9fr;
    gap: 18px 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e9f4;
}

.sk-prev-record-grid label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sk-prev-record-grid label span,
.sk-prev-record-upload > strong {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-prev-record-grid label span em {
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-style: normal;
}

.sk-prev-record-grid input,
.sk-prev-record-grid select,
.sk-prev-record-grid textarea {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d4deec;
    border-radius: 6px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-prev-record-grid textarea {
    height: 56px;
    padding-top: 11px;
    resize: none;
}

.sk-prev-record-input-icon {
    position: relative;
}

.sk-prev-record-input-icon input {
    padding-right: 38px;
}

.sk-prev-record-input-icon svg {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: #52607f;
    transform: translateY(-50%);
    pointer-events: none;
}

.sk-prev-record-upload {
    display: grid;
    gap: 10px;
    padding-top: 18px;
}

.sk-prev-record-file {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 190px;
    align-items: center;
    gap: 18px;
    min-height: 92px;
    padding: 14px 18px;
    border: 1px dashed #83b4ff;
    border-radius: 7px;
    background: #ffffff;
}

.sk-prev-record-file-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    color: #8d96aa;
}

.sk-prev-record-file-icon svg {
    width: 66px;
    height: 66px;
    stroke-width: 1.4;
}

.sk-prev-record-file-icon span {
    position: absolute;
    left: 0;
    bottom: 8px;
    min-width: 42px;
    padding: 4px 7px;
    border-radius: 6px;
    color: #ffffff;
    background: #ef2d2d;
    box-shadow: 0 3px 8px rgba(239, 45, 45, 0.22);
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
    text-align: center;
}

.sk-prev-record-file-meta {
    min-width: 0;
}

.sk-prev-record-file-meta b {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-prev-record-file-meta small {
    display: block;
    margin-top: 7px;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-prev-record-file-actions {
    display: grid;
    gap: 10px;
    justify-items: stretch;
}

.sk-prev-record-upload-btn,
.sk-prev-record-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-prev-record-upload-btn {
    border: 1px solid #0963ff;
    color: #0963ff;
    background: #ffffff;
}

.sk-prev-record-remove-btn {
    height: 26px;
    border: 0;
    color: #f01f1f;
    background: transparent;
}

.sk-prev-record-upload-btn svg,
.sk-prev-record-remove-btn svg {
    width: 16px;
    height: 16px;
}

.sk-prev-record-upload > p {
    margin: 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-prev-record-footer {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 44px;
    padding: 18px 28px 24px;
    border-top: 1px solid #e2e9f4;
}

.sk-prev-record-cancel,
.sk-prev-record-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    border-radius: 6px;
    text-decoration: none;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-prev-record-cancel {
    border: 1px solid #314268;
    color: #314268;
    background: #ffffff;
}

.sk-prev-record-submit {
    border: 0;
    color: #ffffff;
    background: #0963ff;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(9, 99, 255, 0.18);
}

.sk-prev-record-submit svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-prev-record-modal {
        width: min(590px, calc(100vw - 32px));
        max-height: min(90vh, 540px);
        border-radius: 11px;
    }

    .sk-prev-record-head {
        grid-template-columns: 46px minmax(0, 1fr) 34px;
        gap: 14px;
        padding: 18px 22px 10px;
    }

    .sk-prev-record-icon {
        width: 42px;
        height: 42px;
    }

    .sk-prev-record-icon svg {
        width: 22px;
        height: 22px;
    }

    .sk-prev-record-head h2 {
        font-size: 18px;
    }

    .sk-prev-record-head p {
        margin-top: 6px;
        font-size: 11px;
    }

    .sk-prev-record-close {
        width: 34px;
        height: 34px;
    }

    .sk-prev-record-close svg {
        width: 18px;
        height: 18px;
    }

    .sk-prev-record-body {
        padding: 12px 22px 14px;
    }

    .sk-prev-record-grid {
        gap: 14px;
        padding-bottom: 14px;
    }

    .sk-prev-record-grid label {
        gap: 6px;
    }

    .sk-prev-record-grid label span,
    .sk-prev-record-upload > strong {
        font-size: 11px;
    }

    .sk-prev-record-grid input,
    .sk-prev-record-grid select,
    .sk-prev-record-grid textarea {
        height: 34px;
        padding: 0 10px;
        font-size: 11px;
    }

    .sk-prev-record-grid textarea {
        height: 48px;
        padding-top: 9px;
    }

    .sk-prev-record-upload {
        gap: 8px;
        padding-top: 14px;
    }

    .sk-prev-record-file {
        grid-template-columns: 58px minmax(0, 1fr) 168px;
        min-height: 78px;
        gap: 14px;
        padding: 11px 14px;
    }

    .sk-prev-record-file-icon {
        width: 56px;
        height: 56px;
    }

    .sk-prev-record-file-icon svg {
        width: 54px;
        height: 54px;
    }

    .sk-prev-record-file-icon span {
        bottom: 5px;
        min-width: 34px;
        padding: 3px 5px;
        font-size: 10px;
    }

    .sk-prev-record-file-meta b {
        font-size: 13px;
    }

    .sk-prev-record-file-meta small,
    .sk-prev-record-upload > p {
        font-size: 10px;
    }

    .sk-prev-record-upload-btn {
        height: 34px;
        gap: 7px;
        font-size: 11px;
    }

    .sk-prev-record-remove-btn {
        height: 22px;
        font-size: 11px;
    }

    .sk-prev-record-footer {
        gap: 34px;
        padding: 14px 22px 18px;
    }

    .sk-prev-record-cancel,
    .sk-prev-record-submit {
        height: 38px;
        font-size: 13px;
    }
}

@media (max-width: 760px), (max-height: 430px) {
    .sk-prev-record-modal {
        width: min(510px, calc(100vw - 18px));
        max-height: calc(100vh - 16px);
        border-radius: 8px;
    }

    .sk-prev-record-head {
        grid-template-columns: 30px minmax(0, 1fr) 24px;
        gap: 8px;
        padding: 10px 13px 6px;
    }

    .sk-prev-record-icon {
        width: 28px;
        height: 28px;
    }

    .sk-prev-record-icon svg {
        width: 15px;
        height: 15px;
    }

    .sk-prev-record-head h2 {
        font-size: 12px;
    }

    .sk-prev-record-head p {
        margin-top: 3px;
        font-size: 7px;
    }

    .sk-prev-record-close {
        width: 24px;
        height: 24px;
        border-radius: 5px;
    }

    .sk-prev-record-close svg {
        width: 13px;
        height: 13px;
    }

    .sk-prev-record-body {
        padding: 7px 13px 8px;
    }

    .sk-prev-record-grid {
        gap: 8px;
        padding-bottom: 8px;
    }

    .sk-prev-record-grid label {
        gap: 4px;
    }

    .sk-prev-record-grid label span,
    .sk-prev-record-upload > strong {
        font-size: 7px;
    }

    .sk-prev-record-grid input,
    .sk-prev-record-grid select,
    .sk-prev-record-grid textarea {
        height: 23px;
        padding: 0 7px;
        border-radius: 4px;
        font-size: 7px;
    }

    .sk-prev-record-grid textarea {
        height: 34px;
        padding-top: 6px;
    }

    .sk-prev-record-input-icon input {
        padding-right: 24px;
    }

    .sk-prev-record-input-icon svg {
        right: 7px;
        width: 10px;
        height: 10px;
    }

    .sk-prev-record-upload {
        gap: 5px;
        padding-top: 8px;
    }

    .sk-prev-record-file {
        grid-template-columns: 40px minmax(0, 1fr) 112px;
        min-height: 52px;
        gap: 8px;
        padding: 7px 8px;
        border-radius: 5px;
    }

    .sk-prev-record-file-icon {
        width: 38px;
        height: 38px;
    }

    .sk-prev-record-file-icon svg {
        width: 37px;
        height: 37px;
    }

    .sk-prev-record-file-icon span {
        bottom: 3px;
        min-width: 24px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 6px;
    }

    .sk-prev-record-file-meta b {
        font-size: 8px;
    }

    .sk-prev-record-file-meta small,
    .sk-prev-record-upload > p {
        font-size: 6px;
    }

    .sk-prev-record-file-meta small {
        margin-top: 3px;
    }

    .sk-prev-record-file-actions {
        gap: 4px;
    }

    .sk-prev-record-upload-btn {
        height: 23px;
        gap: 4px;
        border-radius: 4px;
        font-size: 7px;
    }

    .sk-prev-record-remove-btn {
        height: 16px;
        gap: 4px;
        font-size: 7px;
    }

    .sk-prev-record-upload-btn svg,
    .sk-prev-record-remove-btn svg {
        width: 9px;
        height: 9px;
    }

    .sk-prev-record-footer {
        gap: 20px;
        padding: 8px 13px 10px;
    }

    .sk-prev-record-cancel,
    .sk-prev-record-submit {
        height: 27px;
        gap: 5px;
        border-radius: 4px;
        font-size: 8px;
    }

    .sk-prev-record-submit svg {
        width: 11px;
        height: 11px;
    }
}

.sk-student-detail-page #fees.content.tab-section.show {
    display: grid;
    grid-template-rows: 92px 54px minmax(0, 1fr) 22px;
    gap: 14px;
    min-width: 0;
    min-height: 0;
    width: auto !important;
    height: 100%;
    margin: 0 !important;
    padding: 6px 16px 14px;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
}

.sk-fee-summary-row {
    display: grid;
    grid-template-columns: 1.05fr 1.05fr 1.05fr 1.7fr;
    gap: 16px;
    min-width: 0;
    min-height: 0;
}

.sk-fee-stat-card,
.sk-fee-overview-card {
    min-width: 0;
    min-height: 0;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-fee-stat-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
}

.sk-fee-stat-card.is-paid {
    background: #fbfffc;
}

.sk-fee-stat-card.is-unpaid {
    background: #fffafa;
}

.sk-fee-stat-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 9px;
    color: #0963ff;
    background: #eef5ff;
    border: 1px solid #d4e4ff;
}

.sk-fee-stat-card.is-paid .sk-fee-stat-icon {
    color: #12a13b;
    background: #ecfbef;
    border-color: #c9f0d1;
}

.sk-fee-stat-card.is-unpaid .sk-fee-stat-icon {
    color: #ff1f2d;
    background: #fff0f0;
    border-color: #ffd2d2;
}

.sk-fee-stat-icon svg,
.sk-fee-add-button svg,
.sk-fee-search svg,
.sk-fee-icon-button svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-fee-stat-card small {
    display: block;
    margin-bottom: 7px;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-fee-stat-card strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-fee-stat-card em,
.sk-fee-overview-legend strong {
    color: #334163;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
}

.sk-fee-overview-card {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 86px;
    align-items: center;
    gap: 18px;
    padding: 8px 18px;
}

.sk-fee-ring.radial {
    --size: 76px !important;
    --thickness: 8px;
    --track: #edf2f8;
    --paid-value: 0;
    --unpaid-value: 0;
    --overdue-value: 0;
    width: var(--size);
}

.sk-fee-ring .sk-fee-ring-segment {
    fill: none;
    stroke-width: var(--thickness);
    stroke-linecap: butt;
    stroke-dasharray: var(--segment-value) 100;
    stroke-dashoffset: calc(0 - var(--segment-offset));
    transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
}

.sk-fee-ring .sk-fee-ring-segment.is-paid {
    --segment-value: var(--paid-value);
    --segment-offset: 0;
    stroke: #12a13b;
}

.sk-fee-ring .sk-fee-ring-segment.is-unpaid {
    --segment-value: var(--unpaid-value);
    --segment-offset: var(--paid-value);
    stroke: #ff3030;
}

.sk-fee-ring .sk-fee-ring-segment.is-overdue {
    --segment-value: var(--overdue-value);
    --segment-offset: calc(var(--paid-value) + var(--unpaid-value));
    stroke: #ff8a00;
}

.sk-fee-ring.radial::after {
    inset: calc(var(--thickness) + 4px);
    box-shadow: none;
}

.sk-fee-ring .percent {
    color: #071553;
    font-size: 16px;
}

.sk-fee-ring .label {
    margin-top: 2px;
    color: #071553;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sk-fee-overview-legend {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sk-fee-overview-legend p {
    display: grid;
    grid-template-columns: 10px 64px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-fee-overview-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.sk-fee-overview-legend i.is-paid { background: #12a13b; }
.sk-fee-overview-legend i.is-unpaid { background: #ff3030; }
.sk-fee-overview-legend i.is-overdue { background: #ff8a00; }

.sk-fee-invoice-total {
    display: grid;
    align-content: center;
    min-height: 60px;
    padding-left: 18px;
    border-left: 1px solid #dfe8f5;
    color: #071553;
}

.sk-fee-invoice-total strong {
    font-family: "InterBold", Arial, sans-serif;
    font-size: 18px;
}

.sk-fee-invoice-total span {
    margin-top: 5px;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3;
}

.sk-fee-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sk-fee-search {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #5d6987;
    background: #ffffff;
}

.sk-fee-search svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 12px;
}

.sk-fee-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-fee-filter-chips {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sk-fee-filter-chips button {
    min-width: 46px;
    height: 31px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #f4f7fb;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-fee-filter-chips button.is-active {
    color: #0963ff;
    border-color: #0963ff;
    background: #ffffff;
}

.sk-fee-filter-chips button.is-paid { color: #168b31; background: #eaf8ee; }
.sk-fee-filter-chips button.is-unpaid { color: #ff1f2d; background: #fff0f0; }
.sk-fee-filter-chips button.is-partial { color: #f06418; background: #fff4ec; }
.sk-fee-filter-chips button.is-overdue { color: #8733e8; background: #f3eaff; }

.sk-fee-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}

.sk-fee-row-select {
    display: grid;
    grid-template-columns: auto 44px;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #071553;
    background: #ffffff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-fee-row-select select {
    width: 44px;
    height: 100%;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.sk-fee-add-link {
    text-decoration: none;
}

.sk-fee-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    background: #22a447;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.sk-fee-add-button svg {
    width: 20px;
    height: 20px;
}

.sk-fee-toolbar-actions .text-right-message {
    display: none;
}

.sk-fee-table-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-fee-table-scroll {
    width: 100%;
    min-width: 0;
    max-height: 100%;
    overflow: auto;
}

.sk-fee-table {
    width: 100%;
    min-width: 960px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-fee-table th,
.sk-fee-table td {
    overflow: hidden;
    padding: 0 14px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #e4ebf5;
}

.sk-fee-table th {
    height: 46px;
    color: #071553;
    background: #fbfcff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-fee-table td {
    height: 48px;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-fee-table tbody tr:last-child td {
    border-bottom: 0;
}

.sk-fee-table th:nth-child(1),
.sk-fee-table td:nth-child(1) { width: 17%; }
.sk-fee-table th:nth-child(2),
.sk-fee-table td:nth-child(2) { width: 9%; }
.sk-fee-table th:nth-child(3),
.sk-fee-table td:nth-child(3) { width: 15%; }
.sk-fee-table th:nth-child(4),
.sk-fee-table td:nth-child(4) { width: 11%; }
.sk-fee-table th:nth-child(5),
.sk-fee-table td:nth-child(5) { width: 13%; }
.sk-fee-table th:nth-child(6),
.sk-fee-table td:nth-child(6) { width: 11%; }
.sk-fee-table th:nth-child(7),
.sk-fee-table td:nth-child(7) { width: 10%; }
.sk-fee-table th:nth-child(8),
.sk-fee-table td:nth-child(8) { width: 14%; }

.sk-fee-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
}

.sk-fee-status.is-paid {
    color: #168b31;
    background: #e7f8e9;
}

.sk-fee-status.is-unpaid {
    color: #ff1f2d;
    background: #fff0f0;
}

.sk-fee-status.is-overdue {
    color: #8733e8;
    background: #f3eaff;
}

.sk-fee-status.is-partial {
    color: #f06418;
    background: #fff4ec;
}

.sk-fee-status.is-cancelled {
    color: #52607f;
    background: #eef2f7;
}

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

.sk-fee-icon-button {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    color: #0963ff;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}

.sk-fee-icon-button svg {
    width: 18px;
    height: 18px;
}

.sk-fee-icon-button.is-success {
    color: #12a13b;
}

.sk-fee-icon-button.is-danger {
    color: #ff1f2d;
}

.sk-fee-icon-button.is-muted {
    color: #f06418;
}

.sk-fee-loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
}

.sk-fee-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
}

.sk-fee-invoice-overlay {
    background: rgba(9, 16, 38, 0.56);
    backdrop-filter: blur(2px);
}

.sk-fee-invoice-modal {
    width: min(730px, calc(100vw - 40px));
    max-height: min(90vh, 720px);
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    background: #ffffff;
    color: #071553;
    box-shadow: 0 24px 70px rgba(7, 21, 83, 0.24);
}

.sk-fee-invoice-modal form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: inherit;
}

.sk-fee-invoice-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 18px;
    padding: 24px 30px 14px;
}

.sk-fee-invoice-head-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #0963ff;
    background: #eaf2ff;
}

.sk-fee-invoice-head svg,
.sk-fee-invoice-student svg,
.sk-fee-invoice-grid svg,
.sk-fee-invoice-summary svg,
.sk-fee-invoice-footer svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-fee-invoice-head-icon svg {
    width: 25px;
    height: 25px;
}

.sk-fee-invoice-head h2 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.15;
}

.sk-fee-invoice-head p {
    margin: 8px 0 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-fee-invoice-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #34446d;
    text-decoration: none;
}

.sk-fee-invoice-close svg {
    width: 22px;
    height: 22px;
}

.sk-fee-invoice-body {
    min-height: 0;
    overflow: auto;
    padding: 0 30px 18px;
}

.sk-fee-invoice-student {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 180px;
    align-items: center;
    gap: 18px;
    min-height: 66px;
    margin-bottom: 18px;
    padding: 8px 10px;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: #ffffff;
}

.sk-fee-invoice-student > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 7px;
    color: #33467d;
    background: #f2f6fc;
}

.sk-fee-invoice-student svg {
    width: 22px;
    height: 22px;
}

.sk-fee-invoice-student div {
    min-width: 0;
}

.sk-fee-invoice-student small {
    display: block;
    margin-bottom: 5px;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-fee-invoice-student strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-fee-invoice-student em {
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
}

.sk-fee-invoice-balance {
    padding: 9px 14px;
    border-radius: 7px;
    background: #f2f6fc;
}

.sk-fee-invoice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
}

.sk-fee-invoice-grid label {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sk-fee-invoice-grid label > span {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-fee-invoice-grid label > span em {
    color: #ff1f2d;
    font-style: normal;
}

.sk-fee-invoice-grid input,
.sk-fee-invoice-grid select,
.sk-fee-invoice-grid textarea {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d4deec;
    border-radius: 6px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-fee-invoice-grid textarea {
    height: 60px;
    padding-top: 11px;
    resize: none;
}

.sk-fee-invoice-grid input:disabled,
.sk-fee-invoice-grid select:disabled,
.sk-fee-invoice-grid textarea:disabled {
    background: #f2f5fa;
    color: #52607f;
    cursor: default;
}

.sk-fee-invoice-amount {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    height: 40px;
    border: 1px solid #d4deec;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.sk-fee-invoice-amount b {
    display: grid;
    place-items: center;
    border-right: 1px solid #d4deec;
    color: #071553;
    background: #fbfcff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-fee-invoice-amount input {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.sk-fee-invoice-date {
    position: relative;
}

.sk-fee-invoice-date input {
    padding-right: 38px;
}

.sk-fee-invoice-date svg {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 17px;
    height: 17px;
    color: #34446d;
    transform: translateY(-50%);
    pointer-events: none;
}

.sk-fee-invoice-note {
    grid-column: span 2;
}

.sk-fee-invoice-summary {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    margin-top: 20px;
    padding: 13px 16px;
    border: 1px solid #d4e4ff;
    border-radius: 7px;
    color: #33467d;
    background: #f5f9ff;
}

.sk-fee-invoice-summary svg {
    width: 18px;
    height: 18px;
    color: #0963ff;
}

.sk-fee-invoice-summary p {
    margin: 0;
    color: #33467d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

.sk-fee-invoice-summary strong {
    color: #0963ff;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-fee-invoice-footer {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 28px;
    padding: 18px 30px 26px;
}

.sk-fee-invoice-cancel,
.sk-fee-invoice-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    border-radius: 6px;
    text-decoration: none;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 16px;
}

.sk-fee-invoice-cancel {
    border: 1px solid #d4deec;
    color: #071553;
    background: #ffffff;
}

.sk-fee-invoice-submit {
    border: 0;
    color: #ffffff;
    background: #0963ff;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(9, 99, 255, 0.18);
}

.sk-fee-invoice-submit svg {
    width: 19px;
    height: 19px;
}

.sk-fee-invoice-footer.is-view-only {
    grid-template-columns: 1fr;
}

.sk-fee-invoice-footer.is-view-only .sk-fee-invoice-cancel {
    max-width: 220px;
    justify-self: center;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-fee-invoice-modal {
        width: min(630px, calc(100vw - 32px));
        max-height: min(91vh, 590px);
        border-radius: 11px;
    }

    .sk-fee-invoice-head {
        grid-template-columns: 42px minmax(0, 1fr) 30px;
        gap: 14px;
        padding: 18px 24px 10px;
    }

    .sk-fee-invoice-head-icon {
        width: 40px;
        height: 40px;
    }

    .sk-fee-invoice-head-icon svg {
        width: 21px;
        height: 21px;
    }

    .sk-fee-invoice-head h2 {
        font-size: 18px;
    }

    .sk-fee-invoice-head p {
        margin-top: 5px;
        font-size: 11px;
    }

    .sk-fee-invoice-close {
        width: 30px;
        height: 30px;
    }

    .sk-fee-invoice-close svg {
        width: 18px;
        height: 18px;
    }

    .sk-fee-invoice-body {
        padding: 0 24px 14px;
    }

    .sk-fee-invoice-student {
        grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 160px;
        gap: 12px;
        min-height: 56px;
        margin-bottom: 14px;
        padding: 7px 8px;
        border-radius: 8px;
    }

    .sk-fee-invoice-student > span {
        width: 36px;
        height: 36px;
    }

    .sk-fee-invoice-student svg {
        width: 18px;
        height: 18px;
    }

    .sk-fee-invoice-student small {
        margin-bottom: 4px;
        font-size: 10px;
    }

    .sk-fee-invoice-student strong {
        font-size: 11px;
    }

    .sk-fee-invoice-grid {
        gap: 13px 16px;
    }

    .sk-fee-invoice-grid label {
        gap: 6px;
    }

    .sk-fee-invoice-grid label > span {
        font-size: 11px;
    }

    .sk-fee-invoice-grid input,
    .sk-fee-invoice-grid select,
    .sk-fee-invoice-grid textarea,
    .sk-fee-invoice-amount {
        height: 34px;
        font-size: 11px;
    }

    .sk-fee-invoice-grid textarea {
        height: 48px;
        padding-top: 9px;
    }

    .sk-fee-invoice-summary {
        margin-top: 14px;
        padding: 10px 12px;
    }

    .sk-fee-invoice-summary p {
        font-size: 10px;
    }

    .sk-fee-invoice-footer {
        gap: 22px;
        padding: 14px 24px 20px;
    }

    .sk-fee-invoice-cancel,
    .sk-fee-invoice-submit {
        height: 38px;
        font-size: 13px;
    }
}

@media (max-width: 760px), (max-height: 430px) {
    .sk-fee-invoice-modal {
        width: min(520px, calc(100vw - 18px));
        max-height: calc(100vh - 16px);
        border-radius: 8px;
    }

    .sk-fee-invoice-head {
        grid-template-columns: 30px minmax(0, 1fr) 22px;
        gap: 8px;
        padding: 10px 13px 6px;
    }

    .sk-fee-invoice-head-icon {
        width: 28px;
        height: 28px;
    }

    .sk-fee-invoice-head-icon svg {
        width: 15px;
        height: 15px;
    }

    .sk-fee-invoice-head h2 {
        font-size: 12px;
    }

    .sk-fee-invoice-head p {
        margin-top: 3px;
        font-size: 7px;
    }

    .sk-fee-invoice-close,
    .sk-fee-invoice-close svg {
        width: 20px;
        height: 20px;
    }

    .sk-fee-invoice-body {
        padding: 0 13px 8px;
    }

    .sk-fee-invoice-student {
        grid-template-columns: 29px minmax(0, 1fr) minmax(0, 1fr) 106px;
        gap: 7px;
        min-height: 38px;
        margin-bottom: 8px;
        padding: 4px 5px;
        border-radius: 5px;
    }

    .sk-fee-invoice-student > span {
        width: 25px;
        height: 25px;
        border-radius: 4px;
    }

    .sk-fee-invoice-student svg {
        width: 12px;
        height: 12px;
    }

    .sk-fee-invoice-student small {
        margin-bottom: 2px;
        font-size: 6px;
    }

    .sk-fee-invoice-student strong {
        font-size: 7px;
    }

    .sk-fee-invoice-balance {
        padding: 5px 7px;
        border-radius: 4px;
    }

    .sk-fee-invoice-grid {
        gap: 8px 9px;
    }

    .sk-fee-invoice-grid label {
        gap: 4px;
    }

    .sk-fee-invoice-grid label > span {
        font-size: 7px;
    }

    .sk-fee-invoice-grid input,
    .sk-fee-invoice-grid select,
    .sk-fee-invoice-grid textarea,
    .sk-fee-invoice-amount {
        height: 23px;
        padding: 0 7px;
        border-radius: 4px;
        font-size: 7px;
    }

    .sk-fee-invoice-grid textarea {
        height: 33px;
        padding-top: 6px;
    }

    .sk-fee-invoice-amount {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 0;
    }

    .sk-fee-invoice-amount b {
        font-size: 6px;
    }

    .sk-fee-invoice-date input {
        padding-right: 22px;
    }

    .sk-fee-invoice-date svg {
        right: 7px;
        width: 10px;
        height: 10px;
    }

    .sk-fee-invoice-summary {
        grid-template-columns: 13px minmax(0, 1fr);
        gap: 6px;
        margin-top: 8px;
        padding: 7px 8px;
        border-radius: 5px;
    }

    .sk-fee-invoice-summary svg {
        width: 11px;
        height: 11px;
    }

    .sk-fee-invoice-summary p {
        font-size: 6px;
    }

    .sk-fee-invoice-footer {
        gap: 16px;
        padding: 8px 13px 10px;
    }

    .sk-fee-invoice-cancel,
    .sk-fee-invoice-submit {
        height: 27px;
        gap: 5px;
        border-radius: 4px;
        font-size: 8px;
    }

    .sk-fee-invoice-submit svg {
        width: 11px;
        height: 11px;
    }
}

.sk-student-detail-page #attendance.content-col.tab-section.show,
.sk-teacher-detail-page #attandace.content-col.tab-section.show {
    display: grid;
    grid-template-rows: 66px minmax(0, 1fr) 38px;
    gap: 18px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 20px 20px 12px;
    overflow: hidden;
    background: #ffffff;
}

.sk-student-detail-page #attendance.content-col.tab-section.show {
    width: auto !important;
    margin: 0 !important;
    padding: 6px 16px 14px;
    box-sizing: border-box;
}

.sk-attendance-top {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.sk-attendance-year-control {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-attendance-year-control select {
    width: 98px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #dbe5f3;
    border-radius: 7px;
    color: #071553;
    background: #ffffff;
    outline: 0;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 16px;
}

.sk-attendance-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.sk-attendance-stat {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 64px;
    padding: 10px 12px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-attendance-stat > span {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    color: currentColor;
}

.sk-attendance-stat svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-stat small {
    display: block;
    margin-bottom: 4px;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-stat strong {
    color: currentColor;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
}

.sk-attendance-stat.is-present { color: #12a13b; }
.sk-attendance-stat.is-absent { color: #ff1f2d; }
.sk-attendance-stat.is-leave { color: #8733e8; }
.sk-attendance-stat.is-late { color: #ff8a00; }
.sk-attendance-stat.is-half { color: #0963ff; }
.sk-attendance-stat.is-holiday { color: #7f8795; }

.sk-attendance-table-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-attendance-table-scroll {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.sk-attendance-table {
    width: max-content;
    min-width: 100%;
    height: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-attendance-table th,
.sk-attendance-table td {
    overflow: hidden;
    height: 31px;
    padding: 0 3px;
    border-right: 1px solid #e0e7f1;
    border-bottom: 1px solid #e0e7f1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fbfcff;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-attendance-table th:first-child,
.sk-attendance-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 150px;
    background: #ffffff;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-attendance-table th:not(:first-child),
.sk-attendance-table td:not(:first-child) {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
}

.sk-attendance-table th:first-child {
    z-index: 3;
    background: #fbfcff;
}

.sk-attendance-table tr:last-child td {
    border-bottom: 0;
}

.sk-attendance-table th:last-child,
.sk-attendance-table td:last-child {
    border-right: 0;
}

.sk-attendance-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    color: #9aa3b1;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-attendance-mark.is-present { color: #12a13b; }
.sk-attendance-mark.is-absent { color: #ff1f2d; }
.sk-attendance-mark.is-leave { color: #8733e8; }
.sk-attendance-mark.is-late { color: #ff8a00; }
.sk-attendance-mark.is-half { color: #0963ff; }
.sk-attendance-mark.is-holiday,
.sk-attendance-mark.is-empty { color: #9aa3b1; }

.sk-attendance-loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.72);
}

.sk-attendance-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    min-width: 0;
    width: min(920px, 74%);
    height: 34px;
    margin: 0 auto;
    border: 1px solid #dfe8f5;
    border-radius: 7px;
    color: #334163;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-attendance-legend span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.sk-attendance-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.sk-attendance-legend strong {
    font-family: "InterBold", Arial, sans-serif;
}

.sk-attendance-legend .is-present { background: #12a13b; }
.sk-attendance-legend .is-absent { background: #ff1f2d; }
.sk-attendance-legend .is-leave { background: #8733e8; }
.sk-attendance-legend .is-late { background: #ff8a00; }
.sk-attendance-legend .is-half { background: #0963ff; }
.sk-attendance-legend .is-holiday { background: #c6c9cf; }

@media (max-width: 1280px), (max-height: 760px) {
    .sk-student-detail-page #attendance.content-col.tab-section.show,
    .sk-teacher-detail-page #attandace.content-col.tab-section.show {
        grid-template-rows: 52px minmax(0, 1fr) 28px;
        gap: 12px;
        padding: 14px 14px 8px;
    }

    .sk-student-detail-page #attendance.content-col.tab-section.show {
        padding: 5px 12px 10px;
    }

    .sk-attendance-top {
        grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
        gap: 14px;
    }

    .sk-attendance-year-control {
        gap: 14px;
        font-size: 12px;
    }

    .sk-attendance-year-control select {
        width: 76px;
        height: 34px;
        padding: 0 9px;
        border-radius: 6px;
        font-size: 13px;
    }

    .sk-attendance-stat-grid {
        gap: 10px;
    }

    .sk-attendance-stat {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 7px;
        height: 52px;
        padding: 8px 9px;
        border-radius: 7px;
    }

    .sk-attendance-stat > span {
        width: 24px;
        height: 24px;
    }

    .sk-attendance-stat svg {
        width: 21px;
        height: 21px;
    }

    .sk-attendance-stat small {
        margin-bottom: 3px;
        font-size: 9px;
    }

    .sk-attendance-stat strong {
        font-size: 16px;
    }

    .sk-attendance-table th,
    .sk-attendance-table td {
        height: 24px;
        padding: 0 2px;
        font-size: 10px;
    }

    .sk-attendance-table th:first-child,
    .sk-attendance-table td:first-child {
        width: 122px;
    }

    .sk-attendance-table th:not(:first-child),
    .sk-attendance-table td:not(:first-child) {
        width: 26px;
        min-width: 26px;
        max-width: 26px;
    }

    .sk-attendance-mark {
        min-width: 12px;
        font-size: 10px;
    }

    .sk-attendance-legend {
        gap: 30px;
        width: min(760px, 76%);
        height: 28px;
        border-radius: 6px;
        font-size: 10px;
    }

    .sk-attendance-legend span {
        gap: 6px;
    }

    .sk-attendance-legend i {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 760px) {
    .sk-student-detail-page #attendance.content-col.tab-section.show,
    .sk-teacher-detail-page #attandace.content-col.tab-section.show {
        grid-template-rows: 26px minmax(0, 1fr) 15px;
        gap: 5px;
        padding: 5px 5px 4px;
    }

    .sk-student-detail-page #attendance.content-col.tab-section.show {
        padding: 2px 6px 5px;
    }

    .sk-attendance-top {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 5px;
    }

    .sk-attendance-year-control {
        gap: 5px;
        font-size: 5px;
    }

    .sk-attendance-year-control select {
        width: 40px;
        height: 18px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 6px;
    }

    .sk-attendance-stat-grid {
        gap: 4px;
    }

    .sk-attendance-stat {
        grid-template-columns: 12px minmax(0, 1fr);
        gap: 3px;
        height: 25px;
        padding: 3px;
        border-radius: 4px;
    }

    .sk-attendance-stat > span {
        width: 11px;
        height: 11px;
    }

    .sk-attendance-stat svg {
        width: 10px;
        height: 10px;
    }

    .sk-attendance-stat small {
        margin-bottom: 1px;
        font-size: 4px;
    }

    .sk-attendance-stat strong {
        font-size: 7px;
    }

    .sk-attendance-table-card {
        border-radius: 5px;
    }

    .sk-attendance-table th,
    .sk-attendance-table td {
        height: 13px;
        padding: 0 1px;
        font-size: 5px;
    }

    .sk-attendance-table th:first-child,
    .sk-attendance-table td:first-child {
        width: 54px;
    }

    .sk-attendance-table th:not(:first-child),
    .sk-attendance-table td:not(:first-child) {
        width: 14px;
        min-width: 14px;
        max-width: 14px;
    }

    .sk-attendance-mark {
        min-width: 6px;
        font-size: 5px;
    }

    .sk-attendance-legend {
        gap: 10px;
        width: min(380px, 76%);
        height: 15px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-attendance-legend span {
        gap: 3px;
    }

    .sk-attendance-legend i {
        width: 4px;
        height: 4px;
    }
}

.sk-student-detail-page #exams.content-col.tab-section.show {
    display: grid;
    grid-template-rows: 82px 48px minmax(0, 1fr) 84px 16px;
    gap: 14px;
    width: auto !important;
    height: 100%;
    margin: 0 !important;
    min-height: 0;
    padding: 6px 16px 14px;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
}

.sk-exam-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sk-exam-search {
    display: flex;
    align-items: center;
    height: 46px;
    min-width: 0;
    padding: 0 16px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-exam-search svg,
.sk-exam-summary-button svg,
.sk-exam-icon-button svg,
.sk-exam-performance svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-exam-search svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 13px;
    color: #526286;
    stroke-width: 2.1;
}

.sk-exam-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-exam-search input::placeholder {
    color: #6e7894;
}

.sk-exam-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}

.sk-exam-row-select,
.sk-exam-summary-button {
    display: inline-flex;
    align-items: center;
    height: 46px;
    border-radius: 8px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.sk-exam-row-select {
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #cfd8e8;
    color: #071553;
    background: #ffffff;
}

.sk-exam-row-select select {
    width: 42px;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

.sk-exam-summary-button {
    gap: 10px;
    padding: 0 22px;
    border: 0;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 12px 18px rgba(9, 99, 255, 0.18);
    cursor: pointer;
}

.sk-exam-summary-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}

.sk-exam-toolbar .text-right-message {
    display: none;
}

.sk-exam-table-card {
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-exam-table-scroll {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.sk-exam-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
    table-layout: fixed;
}

.sk-exam-table th,
.sk-exam-table td {
    height: 42px;
    padding: 0 18px;
    border-bottom: 1px solid #e4ebf5;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.sk-exam-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 44px;
    background: #fbfcff;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-exam-table td {
    font-family: "InterMedium", Arial, sans-serif;
}

.sk-exam-table th:nth-child(1),
.sk-exam-table td:nth-child(1) { width: 23%; }
.sk-exam-table th:nth-child(2),
.sk-exam-table td:nth-child(2) { width: 13%; }
.sk-exam-table th:nth-child(3),
.sk-exam-table td:nth-child(3) { width: 14%; text-align: center; }
.sk-exam-table th:nth-child(4),
.sk-exam-table td:nth-child(4) { width: 16%; text-align: center; }
.sk-exam-table th:nth-child(5),
.sk-exam-table td:nth-child(5) { width: 10%; text-align: center; }
.sk-exam-table th:nth-child(6),
.sk-exam-table td:nth-child(6) { width: 12%; text-align: center; }
.sk-exam-table th:nth-child(7),
.sk-exam-table td:nth-child(7) { width: 12%; text-align: center; }

.sk-exam-row:last-child td {
    border-bottom: 0;
}

.sk-exam-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 24px;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
}

.sk-exam-status.is-pass {
    color: #108b31;
    background: #eaf8ee;
}

.sk-exam-status.is-fail {
    color: #ff1f2d;
    background: #fff0f1;
}

.sk-exam-status.is-unmarked {
    color: #ff7a00;
    background: #fff5e9;
}

.sk-exam-status.is-in-review {
    color: #0963ff;
    background: #eef5ff;
}

.sk-exam-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

.sk-exam-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: 1px solid #cbd8ee;
    border-radius: 6px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
}

.sk-exam-icon-button svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}

.sk-exam-performance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    min-height: 0;
    padding: 10px 18px;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #fbfdff 100%);
}

.sk-exam-performance:empty {
    display: none;
}

.sk-exam-performance-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    height: 100%;
    padding: 0 22px;
    color: #071553;
}

.sk-exam-performance-item + .sk-exam-performance-item {
    border-left: 1px solid #dfe8f5;
}

.sk-exam-performance-item > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
}

.sk-exam-performance-item svg {
    width: 28px;
    height: 28px;
    stroke-width: 2.1;
}

.sk-exam-performance-item small,
.sk-exam-performance-item strong,
.sk-exam-performance-item p {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-exam-performance-item small {
    margin-bottom: 3px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-exam-performance-item strong {
    color: #030836;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 16px;
}

.sk-exam-performance-item p {
    margin: 4px 0 0;
    color: #4d5a83;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-exam-performance-item.is-best { color: #12a13b; }
.sk-exam-performance-item.is-pending { color: #ff8a00; }
.sk-exam-performance-item.is-overall { color: #0963ff; }

.sk-exam-pagination {
    min-height: 0;
}

.sk-result-summary-overlay {
    background: rgba(9, 16, 38, 0.56);
    backdrop-filter: blur(2px);
}

.sk-result-summary-modal {
    width: min(760px, calc(100vw - 40px));
    max-height: min(90vh, 710px);
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    color: #071553;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(7, 21, 83, 0.24);
}

.sk-result-summary-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 13px;
    padding: 23px 26px 16px;
}

.sk-result-summary-head-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #ffffff;
    background: #0963ff;
}

.sk-result-summary-head svg,
.sk-result-student-card svg,
.sk-result-stat-grid svg,
.sk-result-table svg,
.sk-result-insights svg,
.sk-result-summary-footer svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-result-summary-head-icon svg {
    width: 21px;
    height: 21px;
}

.sk-result-summary-head h2 {
    overflow: hidden;
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-result-summary-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #071553;
}

.sk-result-summary-close svg {
    width: 20px;
    height: 20px;
}

.sk-result-summary-body {
    display: grid;
    gap: 18px;
    min-height: 0;
    max-height: calc(min(90vh, 710px) - 130px);
    overflow: auto;
    padding: 0 26px 18px;
}

.sk-result-student-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.15fr;
    align-items: center;
    gap: 20px;
    min-height: 82px;
    padding: 12px 16px;
    border: 1px solid #dbe5f3;
    border-radius: 9px;
    background: #ffffff;
}

.sk-result-student-person {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.sk-result-student-person img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: #f4f7fb;
}

.sk-result-student-person strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-result-student-person p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 0 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    white-space: nowrap;
}

.sk-result-student-person i {
    width: 1px;
    height: 14px;
    background: #cbd8ee;
}

.sk-result-student-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 22px;
}

.sk-result-student-meta p {
    display: grid;
    grid-template-columns: 18px auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: #33467d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-result-student-meta span {
    display: grid;
    place-items: center;
    color: #33467d;
}

.sk-result-student-meta svg {
    width: 17px;
    height: 17px;
}

.sk-result-student-meta b {
    font-family: "InterBold", Arial, sans-serif;
}

.sk-result-student-meta strong {
    overflow: hidden;
    font-family: "InterMedium", Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-result-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.sk-result-stat-grid article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 11px 12px;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-result-stat-grid article > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    color: currentColor;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid currentColor;
}

.sk-result-stat-grid svg {
    width: 22px;
    height: 22px;
}

.sk-result-stat-grid small {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    color: #33467d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-result-stat-grid strong {
    display: block;
    overflow: hidden;
    color: #030836;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-result-stat-grid .is-total { color: #0963ff; background: #f4f8ff; }
.sk-result-stat-grid .is-obtained { color: #12a13b; background: #f2fff5; }
.sk-result-stat-grid .is-percent { color: #8733e8; background: #fbf5ff; }
.sk-result-stat-grid .is-grade { color: #ff9b16; background: #fff8ed; }
.sk-result-stat-grid .is-status { color: #12a13b; background: #f2fff5; }

.sk-result-table-card {
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
}

.sk-result-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #071553;
}

.sk-result-table th,
.sk-result-table td {
    height: 36px;
    padding: 0 16px;
    border-bottom: 1px solid #e6edf7;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-result-table th {
    height: 40px;
    background: #fbfcff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-result-table td {
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-result-table th:nth-child(2),
.sk-result-table td:nth-child(2),
.sk-result-table th:nth-child(3),
.sk-result-table td:nth-child(3),
.sk-result-table th:nth-child(4),
.sk-result-table td:nth-child(4) {
    text-align: center;
}

.sk-result-table tr:last-child td {
    border-bottom: 0;
}

.sk-result-table td:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-result-table td:first-child span {
    display: grid;
    place-items: center;
    color: #526286;
}

.sk-result-table td:first-child svg {
    width: 15px;
    height: 15px;
}

.sk-result-table mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
}

.sk-result-table mark.is-a { color: #108b31; background: #e7f8e9; }
.sk-result-table mark.is-b { color: #0963ff; background: #eaf2ff; }
.sk-result-table mark.is-c { color: #ff8a00; background: #fff4e6; }
.sk-result-table mark.is-f { color: #ff1f2d; background: #fff0f1; }

.sk-result-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.sk-result-insights article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid #dfe8f5;
    border-radius: 9px;
    background: #ffffff;
}

.sk-result-insights article > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid currentColor;
}

.sk-result-insights svg {
    width: 24px;
    height: 24px;
}

.sk-result-insights small,
.sk-result-insights strong,
.sk-result-insights p {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-result-insights small {
    margin-bottom: 3px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 10px;
}

.sk-result-insights strong {
    color: #030836;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-result-insights p {
    margin: 4px 0 0;
    color: #4d5a83;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 10px;
}

.sk-result-insights .is-top { color: #12a13b; background: #f7fff8; }
.sk-result-insights .is-improve { color: #ff9b16; background: #fff9ef; }
.sk-result-insights .is-overall { color: #0963ff; background: #f7fbff; }

.sk-result-summary-footer {
    display: grid;
    grid-template-columns: 110px minmax(190px, 230px);
    justify-content: space-between;
    gap: 18px;
    padding: 0 26px 22px;
}

.sk-result-summary-cancel,
.sk-result-summary-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    border-radius: 7px;
    text-decoration: none;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-result-summary-cancel {
    border: 1px solid #cfd8e8;
    color: #071553;
    background: #ffffff;
}

.sk-result-summary-download {
    border: 0;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 10px 18px rgba(9, 99, 255, 0.18);
}

.sk-result-summary-download svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-result-summary-modal {
        width: min(700px, calc(100vw - 32px));
        max-height: min(92vh, 640px);
        border-radius: 12px;
    }

    .sk-result-summary-head {
        grid-template-columns: 32px minmax(0, 1fr) 28px;
        gap: 11px;
        padding: 18px 22px 12px;
    }

    .sk-result-summary-head-icon {
        width: 31px;
        height: 31px;
        border-radius: 9px;
    }

    .sk-result-summary-head-icon svg {
        width: 19px;
        height: 19px;
    }

    .sk-result-summary-head h2 {
        font-size: 19px;
    }

    .sk-result-summary-body {
        gap: 13px;
        max-height: calc(min(92vh, 640px) - 108px);
        padding: 0 22px 14px;
    }

    .sk-result-student-card {
        grid-template-columns: minmax(0, 1fr) 1.2fr;
        gap: 15px;
        min-height: 72px;
        padding: 10px 13px;
    }

    .sk-result-student-person {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
    }

    .sk-result-student-person img {
        width: 48px;
        height: 48px;
    }

    .sk-result-student-person strong {
        font-size: 16px;
    }

    .sk-result-student-person p,
    .sk-result-student-meta p {
        font-size: 10px;
    }

    .sk-result-student-meta {
        gap: 8px 16px;
    }

    .sk-result-student-meta svg {
        width: 15px;
        height: 15px;
    }

    .sk-result-stat-grid {
        gap: 10px;
    }

    .sk-result-stat-grid article {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        min-height: 56px;
        padding: 8px 9px;
    }

    .sk-result-stat-grid article > span {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .sk-result-stat-grid svg {
        width: 18px;
        height: 18px;
    }

    .sk-result-stat-grid small {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .sk-result-stat-grid strong {
        font-size: 17px;
    }

    .sk-result-table th,
    .sk-result-table td {
        height: 31px;
        padding: 0 12px;
        font-size: 10px;
    }

    .sk-result-table th {
        height: 34px;
    }

    .sk-result-table mark {
        min-width: 30px;
        height: 19px;
        padding: 0 7px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-result-insights {
        gap: 10px;
    }

    .sk-result-insights article {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        min-height: 58px;
        padding: 9px 11px;
    }

    .sk-result-insights article > span {
        width: 35px;
        height: 35px;
    }

    .sk-result-insights svg {
        width: 20px;
        height: 20px;
    }

    .sk-result-insights small,
    .sk-result-insights p {
        font-size: 9px;
    }

    .sk-result-insights strong {
        font-size: 11px;
    }

    .sk-result-summary-footer {
        grid-template-columns: 96px minmax(170px, 210px);
        gap: 14px;
        padding: 0 22px 18px;
    }

    .sk-result-summary-cancel,
    .sk-result-summary-download {
        height: 38px;
        border-radius: 6px;
        font-size: 12px;
    }

    .sk-student-detail-page #exams.content-col.tab-section.show {
        grid-template-rows: 62px 38px minmax(0, 1fr) 62px 12px;
        gap: 10px;
        padding: 5px 12px 10px;
    }

    .sk-exam-toolbar {
        grid-template-columns: minmax(230px, 340px) minmax(0, 1fr) auto;
        gap: 10px;
    }

    .sk-exam-search,
    .sk-exam-row-select,
    .sk-exam-summary-button {
        height: 38px;
        border-radius: 7px;
        font-size: 11px;
    }

    .sk-exam-search {
        padding: 0 12px;
    }

    .sk-exam-search svg {
        width: 18px;
        height: 18px;
        margin-right: 9px;
    }

    .sk-exam-search input {
        font-size: 11px;
    }

    .sk-exam-toolbar-actions {
        gap: 10px;
    }

    .sk-exam-row-select {
        padding: 0 10px;
    }

    .sk-exam-row-select select {
        width: 34px;
    }

    .sk-exam-summary-button {
        gap: 7px;
        padding: 0 15px;
    }

    .sk-exam-summary-button svg {
        width: 16px;
        height: 16px;
    }

    .sk-exam-table {
        min-width: 0;
    }

    .sk-exam-table th {
        height: 34px;
        padding: 0 11px;
        font-size: 10px;
    }

    .sk-exam-table td {
        height: 34px;
        padding: 0 11px;
        font-size: 11px;
    }

    .sk-exam-status {
        min-width: 66px;
        min-height: 20px;
        padding: 2px 7px;
        border-radius: 6px;
        font-size: 9px;
    }

    .sk-exam-row-actions {
        gap: 8px;
    }

    .sk-exam-icon-button {
        width: 26px;
        height: 24px;
        border-radius: 5px;
    }

    .sk-exam-icon-button svg {
        width: 15px;
        height: 15px;
    }

    .sk-exam-performance {
        padding: 7px 11px;
        border-radius: 8px;
    }

    .sk-exam-performance-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding: 0 14px;
    }

    .sk-exam-performance-item > span {
        width: 36px;
        height: 36px;
    }

    .sk-exam-performance-item svg {
        width: 20px;
        height: 20px;
    }

    .sk-exam-performance-item small {
        margin-bottom: 2px;
        font-size: 9px;
    }

    .sk-exam-performance-item strong {
        font-size: 12px;
    }

    .sk-exam-performance-item p {
        margin-top: 2px;
        font-size: 9px;
    }
}

@media (max-width: 760px) {
    .sk-result-summary-modal {
        width: min(430px, calc(100vw - 14px));
        max-height: calc(100vh - 18px);
        border-radius: 8px;
    }

    .sk-result-summary-head {
        grid-template-columns: 21px minmax(0, 1fr) 18px;
        gap: 6px;
        padding: 9px 10px 6px;
    }

    .sk-result-summary-head-icon {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .sk-result-summary-head-icon svg {
        width: 12px;
        height: 12px;
    }

    .sk-result-summary-head h2 {
        font-size: 11px;
    }

    .sk-result-summary-close {
        width: 18px;
        height: 18px;
    }

    .sk-result-summary-close svg {
        width: 12px;
        height: 12px;
    }

    .sk-result-summary-body {
        gap: 6px;
        max-height: calc(100vh - 74px);
        padding: 0 10px 7px;
    }

    .sk-result-student-card {
        grid-template-columns: minmax(0, 1fr) 1.1fr;
        gap: 6px;
        min-height: 43px;
        padding: 5px 6px;
        border-radius: 5px;
    }

    .sk-result-student-person {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 6px;
    }

    .sk-result-student-person img {
        width: 28px;
        height: 28px;
        border-radius: 5px;
    }

    .sk-result-student-person strong {
        font-size: 8px;
    }

    .sk-result-student-person p,
    .sk-result-student-meta p {
        gap: 3px;
        margin-top: 3px;
        font-size: 5px;
    }

    .sk-result-student-person i {
        height: 7px;
    }

    .sk-result-student-meta {
        gap: 3px 6px;
    }

    .sk-result-student-meta p {
        grid-template-columns: 8px auto minmax(0, 1fr);
    }

    .sk-result-student-meta svg {
        width: 8px;
        height: 8px;
    }

    .sk-result-stat-grid {
        gap: 4px;
    }

    .sk-result-stat-grid article {
        grid-template-columns: 17px minmax(0, 1fr);
        gap: 4px;
        min-height: 30px;
        padding: 4px;
        border-radius: 5px;
    }

    .sk-result-stat-grid article > span {
        width: 15px;
        height: 15px;
        border-radius: 4px;
    }

    .sk-result-stat-grid svg {
        width: 9px;
        height: 9px;
    }

    .sk-result-stat-grid small {
        margin-bottom: 1px;
        font-size: 4px;
    }

    .sk-result-stat-grid strong {
        font-size: 8px;
    }

    .sk-result-table-card {
        border-radius: 5px;
    }

    .sk-result-table th,
    .sk-result-table td {
        height: 18px;
        padding: 0 5px;
        font-size: 5px;
    }

    .sk-result-table th {
        height: 20px;
    }

    .sk-result-table td:first-child {
        gap: 4px;
    }

    .sk-result-table td:first-child svg {
        width: 7px;
        height: 7px;
    }

    .sk-result-table mark {
        min-width: 16px;
        height: 10px;
        padding: 0 3px;
        border-radius: 3px;
        font-size: 4px;
    }

    .sk-result-insights {
        gap: 5px;
    }

    .sk-result-insights article {
        grid-template-columns: 19px minmax(0, 1fr);
        gap: 5px;
        min-height: 34px;
        padding: 5px;
        border-radius: 5px;
    }

    .sk-result-insights article > span {
        width: 17px;
        height: 17px;
    }

    .sk-result-insights svg {
        width: 10px;
        height: 10px;
    }

    .sk-result-insights small,
    .sk-result-insights p {
        margin-bottom: 1px;
        font-size: 4px;
    }

    .sk-result-insights strong {
        font-size: 5px;
    }

    .sk-result-summary-footer {
        grid-template-columns: 52px minmax(88px, 116px);
        gap: 8px;
        padding: 0 10px 9px;
    }

    .sk-result-summary-cancel,
    .sk-result-summary-download {
        gap: 4px;
        height: 22px;
        border-radius: 4px;
        font-size: 7px;
    }

    .sk-result-summary-download svg {
        width: 9px;
        height: 9px;
    }

    .sk-student-detail-page #exams.content-col.tab-section.show {
        grid-template-rows: 38px 21px minmax(0, 1fr) 30px 8px;
        gap: 4px;
        padding: 2px 6px 5px;
    }

    .sk-exam-toolbar {
        grid-template-columns: minmax(94px, 1fr) minmax(0, 1fr) auto;
        gap: 3px;
    }

    .sk-exam-search,
    .sk-exam-row-select,
    .sk-exam-summary-button {
        height: 19px;
        border-radius: 4px;
        font-size: 4px;
    }

    .sk-exam-search {
        padding: 0 5px;
    }

    .sk-exam-search svg {
        width: 9px;
        height: 9px;
        margin-right: 3px;
    }

    .sk-exam-search input {
        font-size: 4px;
    }

    .sk-exam-toolbar-actions {
        gap: 3px;
    }

    .sk-exam-row-select {
        gap: 2px;
        padding: 0 4px;
    }

    .sk-exam-row-select select {
        width: 16px;
    }

    .sk-exam-summary-button {
        gap: 2px;
        padding: 0 5px;
    }

    .sk-exam-summary-button svg {
        width: 8px;
        height: 8px;
    }

    .sk-exam-table-card {
        border-radius: 5px;
    }

    .sk-exam-table {
        min-width: 0;
    }

    .sk-exam-table th {
        height: 17px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-exam-table td {
        height: 18px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-exam-status {
        min-width: 30px;
        min-height: 10px;
        padding: 1px 3px;
        border-radius: 3px;
        font-size: 4px;
    }

    .sk-exam-row-actions {
        gap: 3px;
    }

    .sk-exam-icon-button {
        width: 11px;
        height: 10px;
        border-radius: 3px;
    }

    .sk-exam-icon-button svg {
        width: 7px;
        height: 7px;
    }

    .sk-exam-performance {
        padding: 3px 5px;
        border-radius: 5px;
    }

    .sk-exam-performance-item {
        grid-template-columns: 16px minmax(0, 1fr);
        gap: 4px;
        padding: 0 5px;
    }

    .sk-exam-performance-item > span {
        width: 15px;
        height: 15px;
    }

    .sk-exam-performance-item svg {
        width: 9px;
        height: 9px;
    }

    .sk-exam-performance-item small {
        margin-bottom: 1px;
        font-size: 4px;
    }

    .sk-exam-performance-item strong {
        font-size: 5px;
    }

    .sk-exam-performance-item p {
        margin-top: 1px;
        font-size: 4px;
    }
}

.sk-student-detail-page .sk-passout-overlay,
.sk-students-body .sk-passout-overlay {
    background: rgba(12, 18, 31, 0.58);
    backdrop-filter: blur(2px);
}

.sk-passout-modal {
    width: min(590px, calc(100vw - 40px));
    overflow: hidden;
    border: 1px solid #e0e8f4;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(8, 13, 31, 0.28);
    color: #071553;
}

.sk-passout-head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 30px;
    gap: 16px;
    align-items: start;
    padding: 24px 26px 16px;
}

.sk-passout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #239a43;
    background: #d9f5dc;
}

.sk-passout-icon svg,
.sk-passout-close svg,
.sk-passout-date svg,
.sk-passout-confirm svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-passout-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 2.2;
}

.sk-passout-head h2 {
    margin: 0 0 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: 0;
}

.sk-passout-head p {
    max-width: 420px;
    margin: 0;
    color: #3f4c72;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

.sk-passout-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: #28365e;
    text-decoration: none;
}

.sk-passout-close svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.sk-passout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 0 26px 12px;
}

.sk-passout-grid label,
.sk-passout-remarks {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sk-passout-grid label > span,
.sk-passout-remarks > span {
    margin-bottom: 7px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-passout-grid label > span em {
    color: #ff2e37;
    font-style: normal;
}

.sk-passout-remarks em {
    color: #3f4c72;
    font-style: normal;
    font-family: "InterMedium", Arial, sans-serif;
}

.sk-passout-grid input,
.sk-passout-grid select,
.sk-passout-remarks textarea {
    width: 100%;
    border: 1px solid #d7e0ee;
    border-radius: 6px;
    outline: 0;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-passout-grid input,
.sk-passout-grid select {
    height: 38px;
    padding: 0 12px;
}

.sk-passout-grid input[readonly] {
    background: #ffffff;
    cursor: default;
}

.sk-passout-date {
    position: relative;
}

.sk-passout-date input {
    padding-right: 38px;
}

.sk-passout-date svg {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 18px;
    color: #425171;
    stroke-width: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

.sk-passout-grid select {
    appearance: auto;
}

.sk-passout-remarks {
    position: relative;
    padding: 0 26px 20px;
}

.sk-passout-remarks textarea {
    height: 72px;
    resize: none;
    padding: 12px;
    line-height: 1.35;
}

.sk-passout-remarks small {
    position: absolute;
    right: 39px;
    bottom: 27px;
    color: #4d5a78;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

.sk-passout-remarks small strong {
    font-family: "InterMedium", Arial, sans-serif;
    font-weight: normal;
}

.sk-passout-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 17px 26px 20px;
    border-top: 1px solid #e4ebf5;
}

.sk-passout-cancel,
.sk-passout-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 7px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.sk-passout-cancel {
    min-width: 86px;
    border: 1px solid #23a34a;
    color: #1c8e3d;
    background: #ffffff;
}

.sk-passout-confirm {
    gap: 10px;
    min-width: 168px;
    border: 0;
    color: #ffffff;
    background: #239a43;
    box-shadow: 0 10px 16px rgba(35, 154, 67, 0.2);
}

.sk-passout-confirm svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}

.sk-passout-confirm:disabled {
    opacity: 0.72;
    cursor: wait;
}

.sk-dropout-modal {
    width: min(535px, calc(100vw - 40px));
}

.sk-dropout-icon {
    color: #ff2e37;
    background: #ffe4e8;
}

.sk-dropout-grid {
    gap: 14px 30px;
}

.sk-dropout-grid label > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sk-dropout-grid .sk-dropout-wide {
    grid-column: 1 / -1;
}

.sk-dropout-grid .sk-dropout-wide select {
    width: 100%;
}

.sk-dropout-grid textarea {
    height: 78px;
    resize: none;
    padding: 11px 12px;
    line-height: 1.45;
}

.sk-dropout-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 16px;
}

.sk-dropout-cancel,
.sk-dropout-confirm {
    width: 100%;
    height: 42px;
    border-radius: 7px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 16px;
}

.sk-dropout-cancel {
    border-color: #071553;
    color: #071553;
}

.sk-dropout-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    color: #ffffff;
    background: #ff2e37;
    box-shadow: 0 10px 16px rgba(255, 46, 55, 0.2);
    cursor: pointer;
}

.sk-dropout-confirm svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-dropout-confirm:disabled {
    opacity: 0.72;
    cursor: wait;
}

.sk-rejoin-head h2 {
    color: #157d35;
}

.sk-rejoin-icon {
    color: #157d35;
    background: #e2f7e8;
}

.sk-rejoin-grid .sk-rejoin-class-field {
    grid-column: 1 / -1;
}

.sk-rejoin-confirm {
    background: #278c43;
    box-shadow: 0 10px 16px rgba(39, 140, 67, 0.22);
}

.sk-teacher-detail-page .sk-resign-overlay,
.sk-teachers-body .sk-resign-overlay {
    background: rgba(10, 15, 28, 0.58);
    backdrop-filter: blur(2px);
}

.sk-resign-modal {
    width: min(610px, calc(100vw - 40px));
    max-height: calc(100vh - 42px);
    overflow: auto;
}

.sk-resign-head {
    grid-template-columns: 64px minmax(0, 1fr) 30px;
    gap: 16px;
    padding: 32px 32px 22px;
    border-bottom: 0;
}

.sk-resign-head h2 {
    margin-bottom: 8px;
    color: #9b0008;
    font-size: 23px;
}

.sk-resign-head p {
    max-width: none;
    color: #101729;
    font-size: 16px;
}

.sk-resign-icon {
    width: 64px;
    height: 64px;
    color: #ff1f2d;
    background: #ffe2e6;
}

.sk-resign-icon svg {
    width: 30px;
    height: 30px;
}

.sk-resign-close {
    margin-top: -10px;
}

.sk-resign-body {
    display: grid;
    gap: 18px;
    padding: 0 32px;
}

.sk-resign-field {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sk-resign-field > span {
    margin-bottom: 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-resign-field > span em {
    color: #ff2e37;
    font-style: normal;
}

.sk-resign-field input,
.sk-resign-field select,
.sk-resign-field textarea {
    width: 100%;
    border: 1px solid #cfd8e7;
    border-radius: 7px;
    outline: 0;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-resign-field input,
.sk-resign-field select {
    height: 45px;
    padding: 0 16px;
}

.sk-resign-field textarea {
    height: 102px;
    resize: none;
    padding: 13px 14px;
    line-height: 1.45;
}

.sk-resign-date input {
    padding-right: 48px;
}

.sk-resign-date svg {
    position: absolute;
    right: 15px;
    bottom: 13px;
    width: 19px;
    height: 19px;
    color: #071553;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.sk-resign-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #101729;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-resign-check input {
    width: 22px;
    height: 22px;
    accent-color: #bf0009;
}

.sk-resign-warning {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    min-height: 72px;
    padding: 12px 18px;
    border: 1px solid #ffccd0;
    border-radius: 7px;
    color: #9b0008;
    background: #fff0f1;
}

.sk-resign-warning svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-resign-warning p {
    margin: 0;
    color: #26334f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

.sk-resign-footer {
    display: grid;
    grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
    gap: 18px;
    padding: 24px 32px 32px;
}

.sk-resign-cancel,
.sk-resign-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 17px;
}

.sk-resign-cancel {
    background: #595959;
    box-shadow: 0 10px 18px rgba(39, 48, 69, 0.18);
}

.sk-resign-confirm {
    background: #c90008;
    box-shadow: 0 10px 18px rgba(201, 0, 8, 0.22);
}

.sk-resign-confirm:disabled {
    opacity: 0.72;
    cursor: wait;
}

.sk-rejoin-head h2 {
    color: #157d35;
}

.sk-rejoin-icon {
    color: #157d35;
    background: #e2f7e8;
}

.sk-rejoin-warning {
    border-color: #bfe6cf;
    color: #157d35;
    background: #e9f7ee;
}

.sk-rejoin-confirm {
    background: #278c43;
    box-shadow: 0 10px 18px rgba(39, 140, 67, 0.22);
}

.sk-teacher-detail-page .sk-promotion-overlay {
    background: rgba(10, 15, 28, 0.58);
    backdrop-filter: blur(2px);
}

.sk-promotion-modal {
    width: min(640px, calc(100vw - 40px));
    max-height: calc(100vh - 42px);
    overflow: auto;
}

.sk-promotion-head {
    grid-template-columns: 64px minmax(0, 1fr) 30px;
    gap: 16px;
    padding: 38px 42px 24px;
    border-bottom: 0;
}

.sk-promotion-head h2 {
    margin-bottom: 8px;
    font-size: 23px;
}

.sk-promotion-head p {
    max-width: none;
    font-size: 13px;
}

.sk-promotion-icon {
    width: 64px;
    height: 64px;
    color: #0963ff;
    background: #e8f1ff;
}

.sk-promotion-icon svg {
    width: 37px;
    height: 37px;
}

.sk-promotion-close {
    margin-top: -12px;
}

.sk-promotion-grid {
    gap: 20px 18px;
    padding: 0 42px;
}

.sk-promotion-grid label > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 7px;
    font-size: 12px;
}

.sk-promotion-grid input,
.sk-promotion-grid select,
.sk-promotion-grid textarea {
    border-radius: 7px;
    font-size: 14px;
}

.sk-promotion-grid input,
.sk-promotion-grid select {
    height: 44px;
    padding: 0 14px;
}

.sk-promotion-grid input[readonly] {
    color: #5e6884;
}

.sk-promotion-grid textarea {
    height: 82px;
    resize: none;
    padding: 13px 14px;
    line-height: 1.45;
}

.sk-promotion-wide {
    grid-column: 1 / -1;
}

.sk-promotion-date input {
    padding-left: 48px;
    padding-right: 12px;
}

.sk-promotion-date svg {
    right: auto;
    left: 14px;
    width: 20px;
    height: 20px;
    color: #071553;
}

.sk-promotion-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 28px 42px 34px;
}

.sk-promotion-cancel,
.sk-promotion-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 0;
    border-radius: 6px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
    cursor: pointer;
}

.sk-promotion-cancel {
    min-width: 108px;
    padding: 0 24px;
    color: #ffffff;
    background: #5c6474;
    box-shadow: 0 10px 18px rgba(39, 48, 69, 0.18);
}

.sk-promotion-confirm {
    gap: 10px;
    min-width: 220px;
    padding: 0 26px;
    color: #ffffff;
    background: #239a43;
    box-shadow: 0 10px 18px rgba(35, 154, 67, 0.22);
}

.sk-promotion-confirm svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-promotion-confirm:disabled {
    opacity: 0.72;
    cursor: wait;
}

.sk-teacher-detail-page .sk-teacher-edu-modal-overlay {
    background: rgba(10, 15, 28, 0.58);
    backdrop-filter: blur(2px);
}

.sk-teacher-edu-modal {
    width: min(840px, calc(100vw - 40px));
    max-height: calc(100vh - 42px);
    overflow: auto;
    border: 1px solid #d8e2f0;
    border-radius: 9px;
    color: #071553;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(8, 13, 31, 0.28);
}

.sk-teacher-edu-modal-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 30px;
    gap: 18px;
    align-items: center;
    padding: 28px 28px 24px;
    border-bottom: 1px solid #e2e9f4;
}

.sk-teacher-edu-modal-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid #5ac470;
    border-radius: 7px;
    color: #27a34a;
    background: #eefbf1;
}

.sk-teacher-edu-modal-icon svg,
.sk-teacher-edu-modal-close svg,
.sk-teacher-edu-year svg,
.sk-teacher-edu-remove-file svg,
.sk-teacher-edu-save svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-edu-modal-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 2;
}

.sk-teacher-edu-modal-head h2 {
    margin: 0 0 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 25px;
    line-height: 1.1;
}

.sk-teacher-edu-modal-head p {
    margin: 0;
    color: #3f4c72;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-edu-modal-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #243052;
    text-decoration: none;
}

.sk-teacher-edu-modal-close svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.sk-teacher-edu-modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    padding: 22px 28px 0;
}

.sk-teacher-edu-modal-field,
.sk-teacher-edu-upload {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sk-teacher-edu-modal-field > span,
.sk-teacher-edu-upload > span {
    margin-bottom: 9px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-edu-modal-field em {
    color: #3f4c72;
    font-family: "InterMedium", Arial, sans-serif;
    font-style: normal;
}

.sk-teacher-edu-modal-field input,
.sk-teacher-edu-modal-field textarea {
    width: 100%;
    border: 1px solid #cfd8e7;
    border-radius: 7px;
    outline: 0;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-edu-modal-field input {
    height: 46px;
    padding: 0 16px;
}

.sk-teacher-edu-modal-field input::placeholder,
.sk-teacher-edu-modal-field textarea::placeholder {
    color: #7b849b;
}

.sk-teacher-edu-modal-field textarea {
    height: 80px;
    resize: none;
    padding: 14px 16px;
    line-height: 1.45;
}

.sk-teacher-edu-wide,
.sk-teacher-edu-upload {
    grid-column: 1 / -1;
}

.sk-teacher-edu-year {
    position: relative;
}

.sk-teacher-edu-year input {
    padding-right: 46px;
}

.sk-teacher-edu-year svg {
    position: absolute;
    right: 14px;
    bottom: 13px;
    width: 18px;
    height: 18px;
    color: #071553;
    stroke-width: 2;
    pointer-events: none;
}

.sk-teacher-edu-upload-box {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px auto;
    gap: 14px;
    align-items: center;
    min-height: 84px;
    padding: 12px 18px;
    border: 1px dashed #c5d0e2;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
}

.sk-teacher-edu-upload-box input[type="file"] {
    display: none;
}

.sk-teacher-edu-file-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 48px;
}

.sk-teacher-edu-file-icon img {
    max-width: 42px;
    max-height: 48px;
}

.sk-teacher-edu-file-icon strong {
    position: absolute;
    bottom: 5px;
    left: 4px;
    min-width: 26px;
    height: 15px;
    border-radius: 3px;
    color: #ffffff;
    background: #ff1f2d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
}

.sk-teacher-edu-file-meta {
    overflow: hidden;
    min-width: 0;
}

.sk-teacher-edu-file-meta strong,
.sk-teacher-edu-file-meta p {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-edu-file-meta strong {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-edu-file-meta p {
    margin-top: 6px;
    color: #3f4c72;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-edu-file-check {
    display: none;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #24a647;
}

.sk-teacher-edu-file-check.show {
    display: grid;
}

.sk-teacher-edu-file-check::before {
    content: "";
    width: 7px;
    height: 4px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.sk-teacher-edu-remove-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 104px;
    height: 40px;
    border: 1px solid #ffd1d5;
    border-radius: 7px;
    color: #ff1f2d;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-edu-remove-file svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.sk-teacher-edu-upload small {
    margin-top: 10px;
    color: #4d5a78;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-teacher-edu-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 20px 28px 28px;
}

.sk-teacher-edu-cancel,
.sk-teacher-edu-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-edu-cancel {
    min-width: 104px;
    border: 1px solid #cfd8e7;
    color: #101729;
    background: #ffffff;
}

.sk-teacher-edu-save {
    gap: 10px;
    min-width: 160px;
    border: 0;
    color: #ffffff;
    background: #3d9a45;
    box-shadow: 0 10px 18px rgba(61, 154, 69, 0.22);
}

.sk-teacher-edu-save svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.sk-teacher-detail-page .sk-teacher-work-modal-overlay {
    background: rgba(10, 15, 28, 0.58);
    backdrop-filter: blur(2px);
}

.sk-teacher-work-modal {
    width: min(765px, calc(100vw - 40px));
    max-height: calc(100vh - 42px);
    overflow: auto;
    border: 1px solid #d8e2f0;
    border-radius: 9px;
    color: #071553;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(8, 13, 31, 0.28);
}

.sk-teacher-work-modal-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 30px;
    gap: 16px;
    align-items: center;
    padding: 30px 30px 22px;
}

.sk-teacher-work-modal-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 7px;
    color: #27a34a;
    background: #eaf8ed;
}

.sk-teacher-work-modal-icon svg,
.sk-teacher-work-modal-close svg,
.sk-teacher-work-date svg,
.sk-teacher-work-save svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-work-modal-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 2;
}

.sk-teacher-work-modal-head h2 {
    margin: 0 0 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.1;
}

.sk-teacher-work-modal-head p {
    margin: 0;
    color: #3f4c72;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-work-modal-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #243052;
    text-decoration: none;
}

.sk-teacher-work-modal-close svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.sk-teacher-work-modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 12px 30px 24px;
}

.sk-teacher-work-left,
.sk-teacher-work-right {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.sk-teacher-work-modal-field {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sk-teacher-work-modal-field > span {
    margin-bottom: 9px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-work-modal-field em {
    color: #ff2e37;
    font-style: normal;
}

.sk-teacher-work-modal-field input,
.sk-teacher-work-modal-field textarea {
    width: 100%;
    border: 1px solid #cfd8e7;
    border-radius: 7px;
    outline: 0;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-work-modal-field input {
    height: 54px;
    padding: 0 16px;
}

.sk-teacher-work-modal-field input::placeholder,
.sk-teacher-work-modal-field textarea::placeholder {
    color: #7b849b;
}

.sk-teacher-work-modal-field textarea {
    height: 160px;
    resize: none;
    padding: 16px;
    line-height: 1.45;
}

.sk-teacher-work-date input {
    padding-right: 46px;
}

.sk-teacher-work-date input::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.sk-teacher-work-date svg {
    position: absolute;
    right: 14px;
    bottom: 16px;
    width: 18px;
    height: 18px;
    color: #071553;
    stroke-width: 2;
    pointer-events: none;
}

.sk-teacher-work-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 22px 30px 28px;
    border-top: 1px solid #e2e9f4;
}

.sk-teacher-work-cancel,
.sk-teacher-work-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-work-cancel {
    min-width: 100px;
    border: 0;
    color: #ffffff;
    background: #595959;
    box-shadow: 0 10px 18px rgba(39, 48, 69, 0.18);
}

.sk-teacher-work-save {
    gap: 10px;
    min-width: 158px;
    border: 0;
    color: #ffffff;
    background: #3d9a45;
    box-shadow: 0 10px 18px rgba(61, 154, 69, 0.22);
}

.sk-teacher-work-save svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.sk-teacher-detail-page .sk-teacher-pay-modal-overlay {
    background: rgba(10, 15, 28, 0.58);
    backdrop-filter: blur(2px);
}

.sk-teacher-pay-modal {
    width: min(860px, calc(100vw - 40px));
    max-height: calc(100vh - 42px);
    overflow: auto;
    border: 1px solid #d8e2f0;
    border-radius: 9px;
    color: #071553;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(8, 13, 31, 0.28);
}

.sk-teacher-pay-modal-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 30px;
    gap: 16px;
    align-items: center;
    padding: 30px 26px 22px;
}

.sk-teacher-pay-modal-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid #7bd58d;
    border-radius: 7px;
    color: #27a34a;
    background: #eaf8ed;
}

.sk-teacher-pay-modal-icon svg,
.sk-teacher-pay-modal-close svg,
.sk-teacher-pay-date svg,
.sk-teacher-pay-save svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-pay-modal-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 2;
}

.sk-teacher-pay-modal-head h2 {
    margin: 0 0 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1.1;
}

.sk-teacher-pay-modal-head p {
    margin: 0;
    color: #3f4c72;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-pay-modal-close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #243052;
    text-decoration: none;
}

.sk-teacher-pay-modal-close svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.sk-teacher-pay-modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 34px;
    padding: 12px 26px 0;
}

.sk-teacher-pay-modal-field {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sk-teacher-pay-modal-field > span {
    margin-bottom: 9px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-pay-modal-field em {
    color: #ff2e37;
    font-style: normal;
}

.sk-teacher-pay-modal-field span em:not(:only-child) {
    font-family: "InterMedium", Arial, sans-serif;
}

.sk-teacher-pay-modal-field input,
.sk-teacher-pay-modal-field select,
.sk-teacher-pay-modal-field textarea {
    width: 100%;
    border: 1px solid #cfd8e7;
    border-radius: 7px;
    outline: 0;
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-pay-modal-field input,
.sk-teacher-pay-modal-field select {
    height: 48px;
    padding: 0 16px;
}

.sk-teacher-pay-modal-field input::placeholder,
.sk-teacher-pay-modal-field textarea::placeholder {
    color: #7b849b;
}

.sk-teacher-pay-modal-field textarea {
    height: 74px;
    resize: none;
    padding: 14px 16px;
    line-height: 1.45;
}

.sk-teacher-pay-modal-field input:disabled,
.sk-teacher-pay-modal-field select:disabled,
.sk-teacher-pay-modal-field textarea:disabled {
    color: #4d5a78;
    background: #f1f4f9;
    cursor: not-allowed;
}

.sk-teacher-pay-wide {
    grid-column: 1 / -1;
}

.sk-teacher-pay-date input {
    padding-right: 46px;
}

.sk-teacher-pay-date input::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.sk-teacher-pay-date svg {
    position: absolute;
    right: 14px;
    bottom: 15px;
    width: 18px;
    height: 18px;
    color: #071553;
    stroke-width: 2;
    pointer-events: none;
}

.sk-teacher-pay-amount input {
    padding-right: 56px;
}

.sk-teacher-pay-amount strong {
    position: absolute;
    right: 14px;
    bottom: 15px;
    color: #4d5a78;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    pointer-events: none;
}

.sk-teacher-pay-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 26px 26px 28px;
}

.sk-teacher-pay-cancel,
.sk-teacher-pay-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 7px;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-pay-cancel {
    min-width: 88px;
    border: 1px solid #cfd8e7;
    color: #101729;
    background: #f8fafc;
}

.sk-teacher-pay-save {
    gap: 10px;
    min-width: 158px;
    border: 0;
    color: #ffffff;
    background: #3d9a45;
    box-shadow: 0 10px 18px rgba(61, 154, 69, 0.22);
}

.sk-teacher-pay-save svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

@media (max-width: 760px), (max-height: 520px) {
    .sk-passout-modal {
        width: min(420px, calc(100vw - 22px));
        border-radius: 8px;
    }

    .sk-passout-head {
        grid-template-columns: 42px minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 15px 16px 10px;
    }

    .sk-passout-icon {
        width: 40px;
        height: 40px;
    }

    .sk-passout-icon svg {
        width: 24px;
        height: 24px;
    }

    .sk-passout-head h2 {
        margin-bottom: 5px;
        font-size: 16px;
    }

    .sk-passout-head p {
        font-size: 10px;
        line-height: 1.35;
    }

    .sk-passout-close {
        width: 22px;
        height: 22px;
    }

    .sk-passout-close svg {
        width: 16px;
        height: 16px;
    }

    .sk-passout-grid {
        gap: 9px 12px;
        padding: 0 16px 8px;
    }

    .sk-passout-grid label > span,
    .sk-passout-remarks > span {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .sk-passout-grid input,
    .sk-passout-grid select,
    .sk-passout-remarks textarea {
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-passout-grid input,
    .sk-passout-grid select {
        height: 28px;
        padding: 0 8px;
    }

    .sk-passout-date input {
        padding-right: 28px;
    }

    .sk-passout-date svg {
        right: 8px;
        width: 13px;
        height: 13px;
    }

    .sk-passout-remarks {
        padding: 0 16px 13px;
    }

    .sk-passout-remarks textarea {
        height: 52px;
        padding: 8px;
    }

    .sk-passout-remarks small {
        right: 24px;
        bottom: 18px;
        font-size: 7px;
    }

    .sk-passout-footer {
        gap: 10px;
        padding: 11px 16px 13px;
    }

    .sk-passout-cancel,
    .sk-passout-confirm {
        height: 28px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-passout-cancel {
        min-width: 64px;
    }

    .sk-passout-confirm {
        gap: 6px;
        min-width: 124px;
    }

    .sk-passout-confirm svg {
        width: 13px;
        height: 13px;
    }

    .sk-dropout-modal {
        width: min(386px, calc(100vw - 22px));
    }

    .sk-dropout-grid {
        gap: 8px 20px;
    }

    .sk-dropout-grid textarea {
        height: 56px;
        padding: 8px;
    }

    .sk-dropout-footer {
        gap: 20px;
        padding-top: 11px;
    }

    .sk-dropout-cancel,
    .sk-dropout-confirm {
        height: 30px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-dropout-confirm {
        gap: 6px;
    }

    .sk-dropout-confirm svg {
        width: 13px;
        height: 13px;
    }

    .sk-resign-modal {
        width: min(430px, calc(100vw - 22px));
        max-height: calc(100vh - 22px);
    }

    .sk-resign-head {
        grid-template-columns: 44px minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 18px 20px 12px;
    }

    .sk-resign-head h2 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .sk-resign-head p {
        font-size: 10px;
        line-height: 1.35;
    }

    .sk-resign-icon {
        width: 42px;
        height: 42px;
    }

    .sk-resign-icon svg {
        width: 20px;
        height: 20px;
    }

    .sk-resign-close {
        margin-top: -6px;
    }

    .sk-resign-body {
        gap: 10px;
        padding: 0 20px;
    }

    .sk-resign-field > span {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .sk-resign-field input,
    .sk-resign-field select {
        height: 30px;
        padding: 0 9px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-resign-field textarea {
        height: 60px;
        padding: 8px 9px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-resign-date input {
        padding-right: 30px;
    }

    .sk-resign-date svg {
        right: 9px;
        bottom: 9px;
        width: 12px;
        height: 12px;
    }

    .sk-resign-check {
        gap: 7px;
        font-size: 10px;
    }

    .sk-resign-check input {
        width: 15px;
        height: 15px;
    }

    .sk-resign-warning {
        grid-template-columns: 22px minmax(0, 1fr);
        min-height: 46px;
        padding: 8px 10px;
        border-radius: 5px;
    }

    .sk-resign-warning svg {
        width: 16px;
        height: 16px;
    }

    .sk-resign-warning p {
        font-size: 8px;
        line-height: 1.4;
    }

    .sk-resign-footer {
        grid-template-columns: minmax(82px, 110px) minmax(0, 1fr);
        gap: 12px;
        padding: 14px 20px 18px;
    }

    .sk-resign-cancel,
    .sk-resign-confirm {
        height: 31px;
        border-radius: 5px;
        font-size: 11px;
    }

    .sk-promotion-modal {
        width: min(470px, calc(100vw - 22px));
        max-height: calc(100vh - 22px);
    }

    .sk-promotion-head {
        grid-template-columns: 48px minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 20px 24px 12px;
    }

    .sk-promotion-head h2 {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .sk-promotion-head p {
        font-size: 9px;
        line-height: 1.35;
    }

    .sk-promotion-icon {
        width: 46px;
        height: 46px;
    }

    .sk-promotion-icon svg {
        width: 29px;
        height: 29px;
    }

    .sk-promotion-close {
        margin-top: -6px;
    }

    .sk-promotion-grid {
        gap: 9px 12px;
        padding: 0 24px;
    }

    .sk-promotion-grid label > span {
        margin-bottom: 4px;
        font-size: 8px;
    }

    .sk-promotion-grid input,
    .sk-promotion-grid select {
        height: 30px;
        padding: 0 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-promotion-grid textarea {
        height: 46px;
        padding: 8px 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-promotion-date input {
        padding-left: 29px;
        padding-right: 8px;
    }

    .sk-promotion-date svg {
        left: 9px;
        width: 13px;
        height: 13px;
    }

    .sk-promotion-footer {
        gap: 14px;
        padding: 14px 24px 18px;
    }

    .sk-promotion-cancel,
    .sk-promotion-confirm {
        height: 30px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-promotion-confirm {
        gap: 6px;
        min-width: 150px;
    }

    .sk-promotion-cancel {
        min-width: 78px;
        padding: 0 16px;
    }

    .sk-promotion-confirm svg {
        width: 13px;
        height: 13px;
    }

    .sk-teacher-edu-modal {
        width: min(520px, calc(100vw - 22px));
        max-height: calc(100vh - 22px);
        border-radius: 7px;
    }

    .sk-teacher-edu-modal-head {
        grid-template-columns: 38px minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 16px 18px 13px;
    }

    .sk-teacher-edu-modal-icon {
        width: 36px;
        height: 36px;
        border-radius: 5px;
    }

    .sk-teacher-edu-modal-icon svg {
        width: 22px;
        height: 22px;
    }

    .sk-teacher-edu-modal-head h2 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .sk-teacher-edu-modal-head p {
        font-size: 9px;
    }

    .sk-teacher-edu-modal-close {
        width: 22px;
        height: 22px;
    }

    .sk-teacher-edu-modal-close svg {
        width: 15px;
        height: 15px;
    }

    .sk-teacher-edu-modal-body {
        gap: 10px 14px;
        padding: 12px 18px 0;
    }

    .sk-teacher-edu-modal-field > span,
    .sk-teacher-edu-upload > span {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .sk-teacher-edu-modal-field input {
        height: 30px;
        padding: 0 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-teacher-edu-modal-field textarea {
        height: 48px;
        padding: 8px 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-teacher-edu-year input {
        padding-right: 30px;
    }

    .sk-teacher-edu-year svg {
        right: 9px;
        bottom: 9px;
        width: 12px;
        height: 12px;
    }

    .sk-teacher-edu-upload-box {
        grid-template-columns: 32px minmax(0, 1fr) 14px auto;
        gap: 8px;
        min-height: 50px;
        padding: 7px 10px;
        border-radius: 5px;
    }

    .sk-teacher-edu-file-icon {
        width: 29px;
        height: 33px;
    }

    .sk-teacher-edu-file-icon img {
        max-width: 29px;
        max-height: 33px;
    }

    .sk-teacher-edu-file-icon strong {
        bottom: 3px;
        left: 2px;
        min-width: 18px;
        height: 10px;
        border-radius: 2px;
        font-size: 6px;
        line-height: 10px;
    }

    .sk-teacher-edu-file-meta strong {
        font-size: 9px;
    }

    .sk-teacher-edu-file-meta p {
        margin-top: 3px;
        font-size: 8px;
    }

    .sk-teacher-edu-file-check {
        width: 11px;
        height: 11px;
    }

    .sk-teacher-edu-file-check::before {
        width: 5px;
        height: 3px;
        border-left-width: 1px;
        border-bottom-width: 1px;
    }

    .sk-teacher-edu-remove-file {
        gap: 4px;
        min-width: 68px;
        height: 26px;
        border-radius: 5px;
        font-size: 8px;
    }

    .sk-teacher-edu-remove-file svg {
        width: 10px;
        height: 10px;
    }

    .sk-teacher-edu-upload small {
        margin-top: 6px;
        font-size: 8px;
    }

    .sk-teacher-edu-modal-footer {
        gap: 10px;
        padding: 12px 18px 16px;
    }

    .sk-teacher-edu-cancel,
    .sk-teacher-edu-save {
        height: 30px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-teacher-edu-cancel {
        min-width: 74px;
    }

    .sk-teacher-edu-save {
        gap: 6px;
        min-width: 108px;
    }

    .sk-teacher-edu-save svg {
        width: 13px;
        height: 13px;
    }

    .sk-teacher-work-modal {
        width: min(470px, calc(100vw - 22px));
        max-height: calc(100vh - 22px);
        border-radius: 7px;
    }

    .sk-teacher-work-modal-head {
        grid-template-columns: 34px minmax(0, 1fr) 22px;
        gap: 9px;
        padding: 17px 18px 11px;
    }

    .sk-teacher-work-modal-icon {
        width: 32px;
        height: 32px;
        border-radius: 5px;
    }

    .sk-teacher-work-modal-icon svg {
        width: 19px;
        height: 19px;
    }

    .sk-teacher-work-modal-head h2 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .sk-teacher-work-modal-head p {
        font-size: 9px;
    }

    .sk-teacher-work-modal-close {
        width: 22px;
        height: 22px;
    }

    .sk-teacher-work-modal-close svg {
        width: 15px;
        height: 15px;
    }

    .sk-teacher-work-modal-body {
        gap: 14px;
        padding: 8px 18px 14px;
    }

    .sk-teacher-work-left,
    .sk-teacher-work-right {
        gap: 10px;
    }

    .sk-teacher-work-modal-field > span {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .sk-teacher-work-modal-field input {
        height: 30px;
        padding: 0 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-teacher-work-modal-field textarea {
        height: 82px;
        padding: 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-teacher-work-date input {
        padding-right: 30px;
    }

    .sk-teacher-work-date svg {
        right: 9px;
        bottom: 9px;
        width: 12px;
        height: 12px;
    }

    .sk-teacher-work-modal-footer {
        gap: 9px;
        padding: 12px 18px 15px;
    }

    .sk-teacher-work-cancel,
    .sk-teacher-work-save {
        height: 30px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-teacher-work-cancel {
        min-width: 70px;
    }

    .sk-teacher-work-save {
        gap: 6px;
        min-width: 106px;
    }

    .sk-teacher-work-save svg {
        width: 13px;
        height: 13px;
    }

    .sk-teacher-pay-modal {
        width: min(520px, calc(100vw - 22px));
        max-height: calc(100vh - 22px);
        border-radius: 7px;
    }

    .sk-teacher-pay-modal-head {
        grid-template-columns: 34px minmax(0, 1fr) 22px;
        gap: 9px;
        padding: 16px 18px 10px;
    }

    .sk-teacher-pay-modal-icon {
        width: 32px;
        height: 32px;
        border-radius: 5px;
    }

    .sk-teacher-pay-modal-icon svg {
        width: 19px;
        height: 19px;
    }

    .sk-teacher-pay-modal-head h2 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .sk-teacher-pay-modal-head p {
        font-size: 9px;
    }

    .sk-teacher-pay-modal-close {
        width: 22px;
        height: 22px;
    }

    .sk-teacher-pay-modal-close svg {
        width: 15px;
        height: 15px;
    }

    .sk-teacher-pay-modal-body {
        gap: 10px 16px;
        padding: 8px 18px 0;
    }

    .sk-teacher-pay-modal-field > span {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .sk-teacher-pay-modal-field input,
    .sk-teacher-pay-modal-field select {
        height: 30px;
        padding: 0 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-teacher-pay-modal-field textarea {
        height: 42px;
        padding: 8px 9px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-teacher-pay-date input {
        padding-right: 30px;
    }

    .sk-teacher-pay-date svg {
        right: 9px;
        bottom: 9px;
        width: 12px;
        height: 12px;
    }

    .sk-teacher-pay-amount input {
        padding-right: 36px;
    }

    .sk-teacher-pay-amount strong {
        right: 9px;
        bottom: 9px;
        font-size: 9px;
    }

    .sk-teacher-pay-modal-footer {
        gap: 9px;
        padding: 14px 18px 16px;
    }

    .sk-teacher-pay-cancel,
    .sk-teacher-pay-save {
        height: 30px;
        border-radius: 5px;
        font-size: 10px;
    }

    .sk-teacher-pay-cancel {
        min-width: 64px;
    }

    .sk-teacher-pay-save {
        gap: 6px;
        min-width: 106px;
    }

    .sk-teacher-pay-save svg {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-student-detail-page #fees.content.tab-section.show {
        grid-template-rows: 70px 40px minmax(0, 1fr) 16px;
        gap: 9px;
        padding: 5px 12px 10px;
    }

    .sk-fee-summary-row {
        gap: 10px;
    }

    .sk-fee-stat-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
    }

    .sk-fee-stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .sk-fee-stat-icon svg {
        width: 19px;
        height: 19px;
    }

    .sk-fee-stat-card small {
        margin-bottom: 5px;
        font-size: 10px;
    }

    .sk-fee-stat-card strong {
        font-size: 18px;
    }

    .sk-fee-stat-card em,
    .sk-fee-overview-legend strong {
        font-size: 9px;
    }

    .sk-fee-overview-card {
        grid-template-columns: 66px minmax(0, 1fr) 62px;
        gap: 10px;
        padding: 6px 10px;
        border-radius: 8px;
    }

    .sk-fee-ring.radial {
        --size: 58px !important;
        --thickness: 6px;
    }

    .sk-fee-ring .percent {
        font-size: 12px;
    }

    .sk-fee-ring .label {
        font-size: 10px;
    }

    .sk-fee-overview-legend {
        gap: 5px;
    }

    .sk-fee-overview-legend p {
        grid-template-columns: 8px 48px minmax(0, 1fr);
        gap: 6px;
        font-size: 9px;
    }

    .sk-fee-overview-legend i {
        width: 8px;
        height: 8px;
    }

    .sk-fee-invoice-total {
        min-height: 46px;
        padding-left: 12px;
    }

    .sk-fee-invoice-total strong {
        font-size: 14px;
    }

    .sk-fee-invoice-total span {
        font-size: 9px;
    }

    .sk-fee-toolbar {
        grid-template-columns: minmax(210px, 280px) minmax(0, 1fr) auto;
        gap: 9px;
    }

    .sk-fee-search,
    .sk-fee-row-select,
    .sk-fee-add-button {
        height: 36px;
    }

    .sk-fee-search {
        padding: 0 10px;
    }

    .sk-fee-search svg {
        width: 17px;
        height: 17px;
        margin-right: 8px;
    }

    .sk-fee-search input,
    .sk-fee-row-select,
    .sk-fee-add-button,
    .sk-fee-filter-chips button {
        font-size: 10px;
    }

    .sk-fee-filter-chips {
        gap: 7px;
    }

    .sk-fee-filter-chips button {
        min-width: 38px;
        height: 25px;
        padding: 0 9px;
        border-radius: 6px;
    }

    .sk-fee-toolbar-actions {
        gap: 9px;
    }

    .sk-fee-row-select {
        grid-template-columns: auto 34px;
        padding: 0 9px;
    }

    .sk-fee-row-select select {
        width: 34px;
    }

    .sk-fee-add-button {
        gap: 7px;
        padding: 0 12px;
    }

    .sk-fee-add-button svg {
        width: 15px;
        height: 15px;
    }

    .sk-fee-table {
        min-width: 820px;
    }

    .sk-fee-table th {
        height: 36px;
        padding: 0 9px;
        font-size: 9px;
    }

    .sk-fee-table td {
        height: 36px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sk-fee-status {
        min-width: 46px;
        min-height: 20px;
        padding: 2px 7px;
        font-size: 8px;
    }

    .sk-fee-row-actions {
        gap: 5px;
    }

    .sk-fee-icon-button {
        width: 20px;
        height: 20px;
    }

    .sk-fee-icon-button svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 760px) {
    .sk-student-detail-page #fees.content.tab-section.show {
        grid-template-rows: 34px 23px minmax(0, 1fr) 10px;
        gap: 4px;
        padding: 2px 6px 5px;
    }

    .sk-fee-summary-row {
        gap: 4px;
    }

    .sk-fee-stat-card {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 4px;
        padding: 3px 5px;
        border-radius: 5px;
    }

    .sk-fee-stat-icon {
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }

    .sk-fee-stat-icon svg {
        width: 10px;
        height: 10px;
    }

    .sk-fee-stat-card small {
        margin-bottom: 2px;
        font-size: 5px;
    }

    .sk-fee-stat-card strong {
        font-size: 8px;
    }

    .sk-fee-stat-card em,
    .sk-fee-overview-legend strong {
        font-size: 4px;
    }

    .sk-fee-overview-card {
        grid-template-columns: 30px minmax(0, 1fr) 27px;
        gap: 4px;
        padding: 2px 4px;
        border-radius: 5px;
    }

    .sk-fee-ring.radial {
        --size: 27px !important;
        --thickness: 3px;
    }

    .sk-fee-ring .percent {
        font-size: 6px;
    }

    .sk-fee-ring .label {
        font-size: 5px;
    }

    .sk-fee-overview-legend {
        gap: 1px;
    }

    .sk-fee-overview-legend p {
        grid-template-columns: 4px 22px minmax(0, 1fr);
        gap: 2px;
        font-size: 4px;
    }

    .sk-fee-overview-legend i {
        width: 4px;
        height: 4px;
    }

    .sk-fee-invoice-total {
        min-height: 22px;
        padding-left: 4px;
    }

    .sk-fee-invoice-total strong {
        font-size: 6px;
    }

    .sk-fee-invoice-total span {
        margin-top: 1px;
        font-size: 4px;
    }

    .sk-fee-toolbar {
        grid-template-columns: minmax(88px, 1fr) minmax(120px, 1.4fr) auto;
        gap: 3px;
    }

    .sk-fee-search,
    .sk-fee-row-select,
    .sk-fee-add-button {
        height: 20px;
    }

    .sk-fee-search {
        padding: 0 5px;
        border-radius: 4px;
    }

    .sk-fee-search svg {
        width: 9px;
        height: 9px;
        margin-right: 3px;
    }

    .sk-fee-search input,
    .sk-fee-row-select,
    .sk-fee-add-button,
    .sk-fee-filter-chips button {
        font-size: 4px;
    }

    .sk-fee-filter-chips {
        gap: 3px;
    }

    .sk-fee-filter-chips button {
        min-width: 18px;
        height: 13px;
        padding: 0 3px;
        border-radius: 3px;
    }

    .sk-fee-toolbar-actions {
        gap: 3px;
    }

    .sk-fee-row-select {
        grid-template-columns: auto 16px;
        gap: 1px;
        padding: 0 3px;
        border-radius: 4px;
    }

    .sk-fee-row-select select {
        width: 16px;
    }

    .sk-fee-add-button {
        gap: 2px;
        padding: 0 4px;
        border-radius: 3px;
    }

    .sk-fee-add-button svg {
        width: 8px;
        height: 8px;
    }

    .sk-fee-table {
        min-width: 480px;
    }

    .sk-fee-table th {
        height: 18px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-fee-table td {
        height: 20px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-fee-status {
        min-width: 22px;
        min-height: 10px;
        padding: 1px 3px;
        font-size: 4px;
    }

    .sk-fee-row-actions {
        gap: 2px;
    }

    .sk-fee-icon-button {
        width: 10px;
        height: 10px;
    }

    .sk-fee-icon-button svg {
        width: 7px;
        height: 7px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-student-detail-page #previous-school.content-col.tab-section.show {
        grid-template-rows: 42px minmax(0, auto) minmax(0, 116px) 16px;
        gap: 9px;
        padding: 5px 12px 10px;
    }

    .sk-record-tab-search {
        min-width: 250px;
        height: 36px;
        padding: 0 11px;
    }

    .sk-record-tab-search svg {
        width: 18px;
        height: 18px;
        margin-right: 9px;
    }

    .sk-record-tab-search input,
    .sk-record-row-select,
    .sk-record-add-button {
        font-size: 11px;
    }

    .sk-record-row-select,
    .sk-record-add-button {
        height: 36px;
    }

    .sk-record-add-button {
        gap: 7px;
        padding: 0 14px;
    }

    .sk-record-add-button svg {
        width: 16px;
        height: 16px;
    }

    .sk-record-table {
        min-width: 780px;
    }

    .sk-record-table th {
        height: 38px;
        padding: 0 9px;
        font-size: 9px;
    }

    .sk-record-table td {
        height: 56px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sk-record-school {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
    }

    .sk-record-school > span {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }

    .sk-record-school svg,
    .sk-record-icon-button svg,
    .sk-record-status svg,
    .sk-record-details svg {
        width: 15px;
        height: 15px;
    }

    .sk-record-school strong,
    .sk-record-detail-item p {
        font-size: 10px;
    }

    .sk-record-school small,
    .sk-record-detail-item small {
        font-size: 9px;
    }

    .sk-record-row-actions {
        gap: 5px;
    }

    .sk-record-icon-button {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .sk-record-status {
        min-height: 24px;
        gap: 5px;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 9px;
    }

    .sk-record-details {
        padding: 12px 18px 10px;
        border-radius: 8px;
    }

    .sk-record-details-title {
        gap: 10px;
        margin-bottom: 9px;
    }

    .sk-record-details-title span {
        width: 24px;
        height: 24px;
    }

    .sk-record-details-title strong {
        font-size: 13px;
    }

    .sk-record-detail-item {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 10px;
        padding: 0 18px;
    }
}

@media (max-width: 760px) {
    .sk-student-detail-page #previous-school.content-col.tab-section.show {
        grid-template-rows: 25px minmax(0, auto) minmax(0, 55px) 10px;
        gap: 4px;
        padding: 2px 6px 5px;
    }

    .sk-record-tab-toolbar {
        gap: 5px;
    }

    .sk-record-tab-search {
        min-width: 128px;
        height: 22px;
        padding: 0 6px;
        border-radius: 5px;
    }

    .sk-record-tab-search svg {
        width: 11px;
        height: 11px;
        margin-right: 4px;
    }

    .sk-record-tab-search input,
    .sk-record-row-select,
    .sk-record-add-button {
        font-size: 5px;
    }

    .sk-record-tab-actions {
        gap: 4px;
    }

    .sk-record-row-select {
        grid-template-columns: auto 20px;
        gap: 2px;
        height: 22px;
        padding: 0 4px;
        border-radius: 5px;
    }

    .sk-record-row-select select {
        width: 20px;
    }

    .sk-record-add-button {
        height: 22px;
        gap: 3px;
        padding: 0 5px;
        border-radius: 4px;
    }

    .sk-record-add-button svg {
        width: 9px;
        height: 9px;
    }

    .sk-record-table-card {
        border-radius: 5px;
    }

    .sk-record-table {
        min-width: 440px;
    }

    .sk-record-table th {
        height: 20px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-record-table td {
        height: 27px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-record-school {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 4px;
    }

    .sk-record-school > span {
        width: 16px;
        height: 16px;
        border-radius: 4px;
    }

    .sk-record-school svg,
    .sk-record-icon-button svg,
    .sk-record-status svg,
    .sk-record-details svg {
        width: 8px;
        height: 8px;
    }

    .sk-record-school strong,
    .sk-record-detail-item p {
        margin-bottom: 1px;
        font-size: 5px;
    }

    .sk-record-school small,
    .sk-record-detail-item small {
        font-size: 4px;
    }

    .sk-record-row-actions {
        gap: 2px;
    }

    .sk-record-icon-button {
        width: 13px;
        height: 13px;
        border-radius: 3px;
    }

    .sk-record-status {
        min-height: 11px;
        gap: 2px;
        padding: 1px 3px;
        border-radius: 3px;
        font-size: 4px;
    }

    .sk-record-details {
        padding: 4px 6px;
        border-radius: 5px;
    }

    .sk-record-details-title {
        gap: 4px;
        margin-bottom: 3px;
    }

    .sk-record-details-title span {
        width: 13px;
        height: 13px;
        border-width: 1px;
    }

    .sk-record-details-title strong {
        font-size: 6px;
    }

    .sk-record-detail-item {
        grid-template-columns: 11px minmax(0, 1fr);
        gap: 4px;
        padding: 0 5px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-student-detail-page #parents.content-col.tab-section.show {
        grid-template-rows: 42px minmax(0, auto) minmax(0, 128px) 16px;
        gap: 7px;
        padding: 2px 12px 10px;
    }

    .sk-parent-tab-search {
        min-width: 230px;
        height: 36px;
        padding: 0 11px;
    }

    .sk-parent-tab-search svg {
        width: 18px;
        height: 18px;
        margin-right: 9px;
    }

    .sk-parent-tab-search input,
    .sk-parent-row-select,
    .sk-parent-add-button {
        font-size: 11px;
    }

    .sk-parent-row-select,
    .sk-parent-add-button {
        height: 36px;
    }

    .sk-parent-add-button {
        gap: 7px;
        padding: 0 12px;
    }

    .sk-parent-add-button svg {
        width: 16px;
        height: 16px;
    }

    .sk-parent-table {
        min-width: 760px;
    }

    .sk-parent-table th {
        height: 38px;
        font-size: 9px;
    }

    .sk-parent-table td {
        height: 52px;
        padding: 0 8px;
        font-size: 10px;
    }

    .sk-parent-person {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
    }

    .sk-parent-person img,
    .sk-parent-photo {
        width: 32px;
        height: 32px;
    }

    .sk-parent-person strong {
        margin-bottom: 4px;
        font-size: 11px;
    }

    .sk-parent-relation-chip,
    .sk-parent-status-chip {
        min-width: 42px;
        min-height: 18px;
        padding: 2px 6px;
        border-radius: 5px;
        font-size: 9px;
    }

    .sk-parent-contact {
        gap: 6px;
    }

    .sk-parent-contact svg {
        width: 13px;
        height: 13px;
    }

    .sk-parent-row-actions {
        gap: 5px;
    }

    .sk-parent-icon-button {
        width: 25px;
        height: 25px;
        border-radius: 6px;
    }

    .sk-parent-icon-button svg {
        width: 14px;
        height: 14px;
    }

    .sk-parent-emergency {
        padding: 10px 18px 9px;
    }

    .sk-parent-emergency-head {
        gap: 10px;
        margin-bottom: 8px;
    }

    .sk-parent-emergency-head > span {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    .sk-parent-emergency svg {
        width: 16px;
        height: 16px;
    }

    .sk-parent-emergency-head strong {
        font-size: 12px;
    }

    .sk-parent-emergency-head p,
    .sk-parent-emergency-person strong,
    .sk-parent-emergency-meta strong {
        font-size: 10px;
    }

    .sk-parent-emergency-card {
        grid-template-columns: minmax(160px, 1.25fr) minmax(115px, 1fr) minmax(125px, 1fr) minmax(190px, 1.5fr);
        padding: 9px 12px;
    }

    .sk-parent-emergency-person img {
        width: 38px;
        height: 38px;
    }

    .sk-parent-emergency-meta {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 1px 8px;
        padding-left: 16px;
    }

    .sk-parent-emergency-meta small {
        font-size: 8px;
    }
}

@media (max-width: 760px) {
    .sk-student-detail-page #parents.content-col.tab-section.show {
        grid-template-rows: 25px minmax(0, auto) minmax(0, 62px) 10px;
        gap: 4px;
        padding: 0 6px 5px;
    }

    .sk-parent-tab-toolbar {
        gap: 5px;
    }

    .sk-parent-tab-search {
        min-width: 118px;
        height: 22px;
        padding: 0 6px;
        border-radius: 5px;
    }

    .sk-parent-tab-search svg {
        width: 11px;
        height: 11px;
        margin-right: 4px;
    }

    .sk-parent-tab-search input,
    .sk-parent-row-select,
    .sk-parent-add-button {
        font-size: 5px;
    }

    .sk-parent-tab-actions {
        gap: 4px;
    }

    .sk-parent-row-select {
        grid-template-columns: auto 20px;
        gap: 2px;
        height: 22px;
        padding: 0 4px;
        border-radius: 5px;
    }

    .sk-parent-row-select select {
        width: 20px;
    }

    .sk-parent-add-button {
        height: 22px;
        gap: 3px;
        padding: 0 5px;
        border-radius: 4px;
    }

    .sk-parent-add-button svg {
        width: 9px;
        height: 9px;
    }

    .sk-parent-table-card {
        border-radius: 5px;
    }

    .sk-parent-table {
        min-width: 420px;
    }

    .sk-parent-table th {
        height: 20px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-parent-table td {
        height: 26px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-parent-person {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 4px;
    }

    .sk-parent-person img,
    .sk-parent-photo {
        width: 16px;
        height: 16px;
    }

    .sk-parent-person strong {
        margin-bottom: 2px;
        font-size: 5px;
    }

    .sk-parent-relation-chip,
    .sk-parent-status-chip {
        min-width: 22px;
        min-height: 10px;
        padding: 1px 3px;
        border-radius: 3px;
        font-size: 4px;
    }

    .sk-parent-contact {
        gap: 3px;
    }

    .sk-parent-contact svg {
        width: 7px;
        height: 7px;
    }

    .sk-parent-row-actions {
        gap: 2px;
    }

    .sk-parent-icon-button {
        width: 13px;
        height: 13px;
        border-radius: 3px;
    }

    .sk-parent-icon-button svg {
        width: 7px;
        height: 7px;
    }

    .sk-parent-emergency {
        padding: 4px 7px;
        border-radius: 5px;
    }

    .sk-parent-emergency-head {
        gap: 4px;
        margin-bottom: 3px;
    }

    .sk-parent-emergency-head > span {
        width: 15px;
        height: 15px;
        border-radius: 4px;
    }

    .sk-parent-emergency svg {
        width: 8px;
        height: 8px;
    }

    .sk-parent-emergency-head strong {
        font-size: 5px;
    }

    .sk-parent-emergency-head p,
    .sk-parent-emergency-person strong,
    .sk-parent-emergency-meta strong {
        font-size: 4px;
    }

    .sk-parent-emergency-head p {
        margin-top: 1px;
    }

    .sk-parent-emergency-card {
        grid-template-columns: minmax(70px, 1.25fr) minmax(52px, 1fr) minmax(56px, 1fr) minmax(80px, 1.5fr);
        padding: 4px 5px;
        border-radius: 5px;
    }

    .sk-parent-emergency-person {
        gap: 4px;
    }

    .sk-parent-emergency-person img {
        width: 18px;
        height: 18px;
    }

    .sk-parent-emergency-meta {
        grid-template-columns: 10px minmax(0, 1fr);
        gap: 0 3px;
        padding-left: 5px;
    }

    .sk-parent-emergency-meta small {
        font-size: 4px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-student-detail-page .sk-dashboard-topbar {
        grid-template-columns: minmax(230px, 330px) minmax(300px, 470px) minmax(230px, 300px);
        min-height: 74px;
        gap: 18px;
        padding: 8px 22px;
    }

    .sk-student-detail-page .sk-student-detail-shell {
        grid-template-rows: 74px minmax(0, 1fr);
    }

    .sk-student-detail-page .sk-student-detail-workspace {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .sk-student-detail-page .sk-student-detail-main {
        grid-template-rows: 48px minmax(0, 1fr) 18px;
        gap: 8px;
        padding: 12px 12px 0;
    }

    .sk-student-detail-page .sk-student-detail-actions {
        padding-top: 0;
    }

    .sk-student-detail-page .sk-detail-action {
        height: 36px;
        padding: 0 13px;
        font-size: 12px;
    }

    .sk-student-detail-page .sk-student-detail-panel {
        grid-template-rows: 42px minmax(0, 1fr);
    }

    .sk-student-detail-page .sub-menu-bar {
        height: 42px;
        gap: 20px;
        padding: 0 22px 0 0;
    }

    .sk-student-detail-page .bar-item,
    .sk-student-detail-page .bar-item-active {
        height: 42px;
        font-size: 12px;
    }

    .sk-student-detail-page #student-info {
        grid-template-columns: 224px minmax(0, 1fr);
        gap: 7px;
        padding: 5px 12px 10px;
    }

    .sk-student-detail-page #student-info > .userInfo {
        padding: 10px 12px;
    }

    .sk-student-detail-page #student-main-photo {
        height: 112px;
    }

    .sk-student-detail-page .sk-student-profile-summary {
        padding: 9px 5px;
    }

    .sk-student-detail-page .sk-student-profile-summary strong {
        font-size: 15px;
    }

    .sk-student-detail-page .sk-student-profile-summary dl {
        gap: 7px;
        margin-top: 10px;
    }

    .sk-student-detail-page .sk-student-profile-summary dl div {
        grid-template-columns: 15px minmax(0, 1fr) auto;
    }

    .sk-student-detail-page .sk-student-profile-summary dl div::before {
        width: 10px;
        height: 10px;
        border-width: 1.5px;
    }

    .sk-student-detail-page .sk-student-profile-summary dt,
    .sk-student-detail-page .sk-student-profile-summary dd {
        font-size: 11px;
    }

    .sk-student-detail-page #student-info .atRecord {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        margin-top: 3px;
    }

    .sk-student-detail-page #student-info .radial {
        --size: 90px !important;
        --thickness: 7px;
    }

    .sk-student-detail-page #student-info .percent {
        font-size: 20px;
    }

    .sk-student-detail-page #student-info .label,
    .sk-student-detail-page #student-info .content-item,
    .sk-student-detail-page #student-info .content-item span {
        font-size: 10px;
    }

    .sk-student-detail-page #student-info > .content-details {
        grid-template-columns: 96px minmax(0, 1fr) 112px minmax(0, 1fr);
        gap: 6px 14px;
        padding: 8px 12px;
    }

    .sk-student-detail-page #student-info .item-left-lable p,
    .sk-student-detail-page #student-info .item-left-lable-text p {
        font-size: 10px;
    }

    .sk-student-detail-page #student-info .item-left-lable input,
    .sk-student-detail-page #student-info .item-left-lable-text textarea {
        height: 29px;
        font-size: 10px;
    }

    .sk-student-detail-page .sk-student-detail-main > .sk-students-footer {
        height: 22px;
        font-size: 9px;
    }
}

@media (max-width: 760px) {
    .sk-student-detail-page .sk-dashboard-topbar {
        grid-template-columns: 124px minmax(0, 1fr) 112px;
        min-height: 64px;
        gap: 7px;
        padding: 6px 8px;
    }

    .sk-student-detail-page .sk-student-detail-shell {
        grid-template-rows: 64px minmax(0, 1fr);
    }

    .sk-student-detail-page .sk-student-detail-workspace {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sk-student-detail-page .sk-student-detail-main {
        grid-template-rows: 30px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 9px 7px 0;
    }

    .sk-student-detail-page .sk-student-detail-actions {
        gap: 3px;
        padding-top: 0;
    }

    .sk-student-detail-page .sk-detail-action {
        height: 23px;
        padding: 0 5px;
        gap: 3px;
        font-size: 6px;
    }

    .sk-student-detail-page .sub-menu-bar {
        height: 28px;
        gap: 7px;
        padding: 0 8px 0 0;
    }

    .sk-student-detail-page .bar-item,
    .sk-student-detail-page .bar-item-active {
        height: 28px;
        font-size: 6px;
    }

    .sk-student-detail-page #student-info {
        grid-template-columns: 114px minmax(0, 1fr);
        gap: 4px;
        padding: 2px 6px 5px;
    }

    .sk-student-detail-page #student-info > .userInfo,
    .sk-student-detail-page #student-info > .content-details {
        border-radius: 7px;
    }

    .sk-student-detail-page #student-info > .userInfo {
        padding: 6px;
    }

    .sk-student-detail-page #student-main-photo {
        height: 52px;
        border-radius: 5px;
    }

    .sk-student-detail-page .sk-student-profile-summary {
        padding: 4px 1px;
    }

    .sk-student-detail-page .sk-student-profile-summary strong {
        font-size: 7px;
    }

    .sk-student-detail-page .sk-student-profile-summary span {
        min-width: 24px;
        padding: 2px 3px;
        font-size: 5px;
    }

    .sk-student-detail-page .sk-student-profile-summary dl {
        gap: 3px;
        margin-top: 4px;
    }

    .sk-student-detail-page .sk-student-profile-summary dl div {
        grid-template-columns: 8px minmax(0, 1fr) auto;
        gap: 3px;
    }

    .sk-student-detail-page .sk-student-profile-summary dl div::before {
        width: 5px;
        height: 5px;
        border-width: 1px;
        border-radius: 2px;
    }

    .sk-student-detail-page .sk-student-profile-summary dt,
    .sk-student-detail-page .sk-student-profile-summary dd {
        font-size: 5px;
    }

    .sk-student-detail-page #student-info .aRecord {
        margin-top: 3px;
    }

    .sk-student-detail-page #student-info .aRecord > p {
        margin-bottom: 2px;
        font-size: 6px;
    }

    .sk-student-detail-page #student-info .atRecord {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 4px;
        margin-top: 2px;
    }

    .sk-student-detail-page #student-info .radial {
        --size: 43px !important;
        --thickness: 4px;
    }

    .sk-student-detail-page #student-info .percent {
        font-size: 10px;
    }

    .sk-student-detail-page #student-info .label,
    .sk-student-detail-page #student-info .content-item,
    .sk-student-detail-page #student-info .content-item span {
        font-size: 5px;
    }

    .sk-student-detail-page #student-info .content-item {
        gap: 3px;
    }

    .sk-student-detail-page #student-info .content-item div {
        width: 5px !important;
        height: 5px !important;
    }

    .sk-student-detail-page #student-info > .content-details {
        grid-template-columns: 45px minmax(0, 1fr) 54px minmax(0, 1fr);
        gap: 3px 5px;
        padding: 4px;
    }

    .sk-student-detail-page #student-info .item-left-lable p,
    .sk-student-detail-page #student-info .item-left-lable-text p {
        font-size: 5px;
    }

    .sk-student-detail-page #student-info .item-left-lable input,
    .sk-student-detail-page #student-info .item-left-lable-text textarea {
        height: 15px;
        padding: 0 3px;
        border-radius: 3px;
        font-size: 5px;
    }
}

@media (max-height: 430px) {
    .sk-student-detail-page .sk-dashboard-topbar {
        min-height: 54px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .sk-student-detail-page .sk-student-detail-shell {
        grid-template-rows: 54px minmax(0, 1fr);
    }

    .sk-student-detail-page .sk-student-detail-workspace {
        grid-template-columns: 148px minmax(0, 1fr);
    }

    .sk-student-detail-page .sk-students-sidebar {
        padding: 5px 5px;
    }

    .sk-student-detail-page .sk-students-nav {
        gap: 1px;
    }

    .sk-student-detail-page .sk-students-nav a {
        grid-template-columns: 10px minmax(0, 1fr);
        gap: 4px;
        height: 13px;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-student-detail-page .sk-students-nav img {
        width: 8px;
        height: 8px;
    }

    .sk-student-detail-page .sk-students-nav-bottom {
        padding-top: 4px;
    }

    .sk-student-detail-page .sk-student-detail-main {
        grid-template-rows: 25px minmax(0, 1fr) 10px;
        padding: 5px 7px 0;
    }

    .sk-student-detail-page .sk-student-detail-breadcrumb {
        margin-bottom: 2px;
        font-size: 5px;
    }

    .sk-student-detail-page .sk-student-detail-heading h1 {
        font-size: 10px;
    }

    .sk-student-detail-page .sk-student-detail-actions {
        padding-top: 0;
    }

    .sk-student-detail-page .sk-detail-action {
        height: 17px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-student-detail-page .sk-detail-action svg {
        width: 8px;
        height: 8px;
    }
}

/* Teacher details screen: app-style layout matched to the school-admin shell. */
.sk-teacher-detail-page {
    background: #f7fbff;
}

.sk-teacher-detail-page .sk-dashboard-topbar {
    grid-template-columns: minmax(360px, 510px) minmax(460px, 630px) minmax(310px, 360px);
    min-height: 98px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sk-teacher-detail-shell {
    grid-template-rows: 98px minmax(0, 1fr);
    border-radius: 0;
}

.sk-teacher-detail-workspace {
    grid-template-columns: 288px minmax(0, 1fr);
}

.sk-teacher-detail-main {
    grid-template-rows: 84px minmax(0, 1fr) 38px;
    gap: 0;
    padding: 27px 34px 0 40px;
}

.sk-teacher-detail-heading {
    align-items: flex-start;
}

.sk-teacher-detail-actions {
    padding-top: 31px;
}

.sk-teacher-detail-page .sk-detail-action {
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
}

.sk-teacher-detail-page .sk-detail-action-green {
    color: #12a13b;
}

.sk-teacher-detail-page .sk-detail-action-red {
    color: #ff1f2d;
}

.sk-teacher-detail-panel {
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 40, 92, 0.08);
}

.sk-teacher-detail-page .sub-menu-bar {
    display: flex;
    align-items: flex-end;
    gap: 34px;
    min-width: 0;
    height: 52px;
    margin: 0;
    padding: 0 38px;
    border-bottom: 1px solid #e2eaf5;
    background: #ffffff;
}

.sk-teacher-detail-page .bar-item,
.sk-teacher-detail-page .bar-item-active {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 52px;
    padding: 0 8px;
    color: #2b3a66;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-detail-page .bar-item p,
.sk-teacher-detail-page .bar-item-active p {
    margin: 0;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.sk-teacher-detail-page .bar-item :hover,
.sk-teacher-detail-page .bar-item p:hover,
.sk-teacher-detail-page .bar-item-active p:hover {
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: inherit;
}

.sk-teacher-detail-page .bar-item-active {
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-teacher-detail-page .bar-item-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #0963ff;
}

.sk-teacher-detail-page .tab-section {
    min-width: 0;
    min-height: 0;
}

.sk-teacher-detail-page #teacher-info {
    display: none;
    grid-template-columns: 274px minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 14px 22px 18px;
    background: #ffffff;
}

.sk-teacher-detail-page #teacher-info.show {
    display: grid;
}

.sk-teacher-profile-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 14px 16px 16px;
    border: 1px solid #e3ebf6;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(16, 40, 92, 0.055);
}

.sk-teacher-photo {
    width: 184px;
    height: 184px;
    margin: 0 auto;
    border-radius: 12px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-teacher-name-block {
    min-width: 0;
    padding: 11px 0 12px;
    text-align: center;
}

.sk-teacher-name-block strong {
    display: block;
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-name-block span {
    display: block;
    margin-top: 6px;
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-quick-list {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0 4px 12px;
}

.sk-teacher-quick-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sk-teacher-quick-list dt,
.sk-teacher-quick-list dd {
    margin: 0;
    min-width: 0;
    color: #2b3a66;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.25;
}

.sk-teacher-quick-list dt {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-teacher-quick-list dd {
    overflow: hidden;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-quick-list svg,
.sk-teacher-mini-cards svg,
.sk-teacher-info-icon svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-mini-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
}

.sk-teacher-mini-cards > div {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 8px;
    min-width: 0;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid #e2eaf5;
    border-radius: 9px;
    background: #fbfdff;
}

.sk-teacher-mini-cards svg,
.sk-teacher-status-dot {
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    color: #4f5e86;
}

.sk-teacher-status-dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #29a54d;
    box-shadow: inset 0 0 0 7px #29a54d, inset 0 0 0 9px #ffffff;
}

.sk-teacher-mini-cards small,
.sk-teacher-mini-cards strong {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-mini-cards small {
    color: #2b3a66;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

.sk-teacher-mini-cards strong {
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-teacher-attendance-card {
    min-width: 0;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #e2eaf5;
    border-radius: 10px;
    background: #ffffff;
}

.sk-teacher-attendance-card h2 {
    margin: 0 0 12px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
}

.sk-teacher-attendance-body {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sk-teacher-detail-page #teacher-info .radial {
    --size: 118px !important;
    --thickness: 8px;
    --track: #e7edf6;
    --progress: #2fad4f;
}

.sk-teacher-detail-page #teacher-info .radial::after {
    inset: calc(var(--thickness) + 5px);
    box-shadow: none;
}

.sk-teacher-detail-page #teacher-info .percent {
    color: #071553;
    font-size: 24px;
}

.sk-teacher-detail-page #teacher-info .label {
    margin-top: 4px;
    color: #071553;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.sk-teacher-attendance-meta {
    display: grid;
    gap: 12px;
    min-width: 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-teacher-attendance-meta div {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sk-teacher-attendance-meta span {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.sk-teacher-attendance-meta .is-present {
    background: #2fad4f;
}

.sk-teacher-attendance-meta .is-absent {
    background: #ff3028;
}

.sk-teacher-attendance-meta strong {
    margin-top: 2px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.25;
}

.sk-teacher-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(44px, auto);
    align-content: start;
    gap: 12px 16px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.sk-teacher-info-field {
    display: grid;
    grid-template-columns: 24px 132px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background: #fbfdff;
}

.sk-teacher-info-icon {
    display: grid;
    place-items: center;
    color: #455883;
}

.sk-teacher-info-label,
.sk-teacher-info-value {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-info-label {
    color: #2b3a66;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-info-value {
    color: #080d23;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.sk-teacher-info-wide {
    grid-column: 1 / -1;
}

.sk-teacher-detail-page .content-col.tab-section,
.sk-teacher-detail-page .content.tab-section:not(#teacher-info) {
    display: none;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    padding: 18px;
    background: #ffffff;
}

.sk-teacher-detail-page .content-col.tab-section.show,
.sk-teacher-detail-page .content.tab-section.show:not(#teacher-info) {
    display: block;
}

.sk-teacher-detail-main > .sk-students-footer {
    height: 38px;
    font-size: 13px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-teacher-detail-page .sk-dashboard-topbar {
        grid-template-columns: minmax(230px, 320px) minmax(260px, 1fr) minmax(210px, 320px);
        min-height: 74px;
    }

    .sk-teacher-detail-shell {
        grid-template-rows: 74px minmax(0, 1fr);
    }

    .sk-teacher-detail-workspace {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .sk-teacher-detail-main {
        grid-template-rows: 58px minmax(0, 1fr) 18px;
        padding: 14px 24px 0;
    }

    .sk-teacher-detail-breadcrumb {
        gap: 10px;
        margin-bottom: 7px;
        font-size: 12px;
    }

    .sk-teacher-detail-heading h1 {
        font-size: 24px;
    }

    .sk-teacher-detail-actions {
        gap: 10px;
        padding-top: 20px;
    }

    .sk-teacher-detail-page .sk-detail-action {
        height: 36px;
        padding: 0 14px;
        border-radius: 7px;
        font-size: 12px;
    }

    .sk-teacher-detail-page .sk-detail-action svg {
        width: 17px;
        height: 17px;
    }

    .sk-teacher-detail-panel {
        grid-template-rows: 42px minmax(0, 1fr);
        border-radius: 11px;
    }

    .sk-teacher-detail-page .sub-menu-bar {
        height: 42px;
        gap: 18px;
        padding: 0 18px;
    }

    .sk-teacher-detail-page .bar-item,
    .sk-teacher-detail-page .bar-item-active {
        height: 42px;
        font-size: 12px;
    }

    .sk-teacher-detail-page #teacher-info {
        grid-template-columns: 238px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .sk-teacher-profile-card {
        padding: 10px 12px;
    }

    .sk-teacher-photo {
        width: 132px;
        height: 132px;
        border-radius: 10px;
    }

    .sk-teacher-name-block {
        padding: 8px 0 9px;
    }

    .sk-teacher-name-block strong {
        font-size: 15px;
    }

    .sk-teacher-name-block span {
        margin-top: 4px;
        font-size: 11px;
    }

    .sk-teacher-quick-list {
        gap: 6px;
        padding-bottom: 9px;
    }

    .sk-teacher-quick-list dt,
    .sk-teacher-quick-list dd,
    .sk-teacher-attendance-meta,
    .sk-teacher-mini-cards strong {
        font-size: 10px;
    }

    .sk-teacher-quick-list svg,
    .sk-teacher-mini-cards svg,
    .sk-teacher-info-icon svg {
        width: 15px;
        height: 15px;
    }

    .sk-teacher-mini-cards > div {
        grid-template-columns: 20px minmax(0, 1fr);
        min-height: 46px;
        padding: 7px 8px;
    }

    .sk-teacher-mini-cards small {
        font-size: 9px;
    }

    .sk-teacher-status-dot {
        width: 18px;
        height: 18px;
        box-shadow: inset 0 0 0 5px #29a54d, inset 0 0 0 7px #ffffff;
    }

    .sk-teacher-attendance-card {
        margin-top: 9px;
        padding: 10px;
    }

    .sk-teacher-attendance-card h2 {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .sk-teacher-attendance-body {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 9px;
    }

    .sk-teacher-detail-page #teacher-info .radial {
        --size: 88px !important;
    }

    .sk-teacher-detail-page #teacher-info .percent {
        font-size: 18px;
    }

    .sk-teacher-detail-page #teacher-info .label {
        font-size: 9px;
    }

    .sk-teacher-attendance-meta {
        gap: 7px;
    }

    .sk-teacher-attendance-meta strong {
        font-size: 11px;
    }

    .sk-teacher-details-grid {
        grid-auto-rows: minmax(34px, auto);
        gap: 8px 12px;
    }

    .sk-teacher-info-field {
        grid-template-columns: 18px 96px minmax(0, 1fr);
        min-height: 34px;
        gap: 9px;
        padding: 6px 11px;
        border-radius: 7px;
    }

    .sk-teacher-info-label {
        font-size: 10px;
    }

    .sk-teacher-info-value {
        font-size: 11px;
    }

    .sk-teacher-detail-main > .sk-students-footer {
        height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 760px) {
    .sk-teacher-detail-page .sk-dashboard-topbar {
        min-height: 64px;
    }

    .sk-teacher-detail-shell {
        grid-template-rows: 64px minmax(0, 1fr);
    }

    .sk-teacher-detail-workspace {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sk-teacher-detail-main {
        grid-template-rows: 38px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 7px 9px 0;
    }

    .sk-teacher-detail-breadcrumb {
        gap: 5px;
        margin-bottom: 3px;
        font-size: 6px;
    }

    .sk-teacher-detail-heading h1 {
        font-size: 13px;
    }

    .sk-teacher-detail-actions {
        gap: 4px;
        padding-top: 12px;
    }

    .sk-teacher-detail-page .sk-detail-action {
        height: 23px;
        padding: 0 6px;
        gap: 3px;
        border-radius: 5px;
        font-size: 6px;
    }

    .sk-teacher-detail-page .sk-detail-action svg {
        width: 10px;
        height: 10px;
    }

    .sk-teacher-detail-panel {
        grid-template-rows: 28px minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-teacher-detail-page .sub-menu-bar {
        height: 28px;
        gap: 7px;
        padding: 0 8px;
    }

    .sk-teacher-detail-page .bar-item,
    .sk-teacher-detail-page .bar-item-active {
        height: 28px;
        padding: 0 2px;
        font-size: 6px;
    }

    .sk-teacher-detail-page #teacher-info {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 6px;
        padding: 6px;
    }

    .sk-teacher-profile-card {
        padding: 6px;
        border-radius: 7px;
    }

    .sk-teacher-photo {
        width: 58px;
        height: 58px;
        border-radius: 6px;
    }

    .sk-teacher-name-block {
        padding: 4px 0 5px;
    }

    .sk-teacher-name-block strong {
        font-size: 8px;
    }

    .sk-teacher-name-block span {
        margin-top: 2px;
        font-size: 5px;
    }

    .sk-teacher-quick-list {
        gap: 3px;
        padding: 0 1px 5px;
    }

    .sk-teacher-quick-list div {
        gap: 4px;
    }

    .sk-teacher-quick-list dt,
    .sk-teacher-quick-list dd,
    .sk-teacher-attendance-meta,
    .sk-teacher-mini-cards strong {
        font-size: 5px;
    }

    .sk-teacher-quick-list dt {
        gap: 3px;
    }

    .sk-teacher-quick-list svg,
    .sk-teacher-mini-cards svg,
    .sk-teacher-info-icon svg {
        width: 8px;
        height: 8px;
    }

    .sk-teacher-mini-cards {
        gap: 3px;
    }

    .sk-teacher-mini-cards > div {
        grid-template-columns: 11px minmax(0, 1fr);
        min-height: 24px;
        gap: 1px 4px;
        padding: 3px 4px;
        border-radius: 5px;
    }

    .sk-teacher-mini-cards small {
        font-size: 5px;
    }

    .sk-teacher-status-dot {
        width: 10px;
        height: 10px;
        box-shadow: inset 0 0 0 3px #29a54d, inset 0 0 0 4px #ffffff;
    }

    .sk-teacher-attendance-card {
        margin-top: 5px;
        padding: 5px;
        border-radius: 6px;
    }

    .sk-teacher-attendance-card h2 {
        margin-bottom: 4px;
        font-size: 6px;
    }

    .sk-teacher-attendance-body {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 4px;
    }

    .sk-teacher-detail-page #teacher-info .radial {
        --size: 44px !important;
    }

    .sk-teacher-detail-page #teacher-info .percent {
        font-size: 9px;
    }

    .sk-teacher-detail-page #teacher-info .label {
        margin-top: 1px;
        font-size: 5px;
    }

    .sk-teacher-attendance-meta {
        gap: 3px;
    }

    .sk-teacher-attendance-meta div {
        gap: 3px;
    }

    .sk-teacher-attendance-meta span {
        width: 5px;
        height: 5px;
    }

    .sk-teacher-attendance-meta strong {
        font-size: 5px;
    }

    .sk-teacher-details-grid {
        grid-auto-rows: minmax(16px, auto);
        gap: 4px 7px;
    }

    .sk-teacher-info-field {
        grid-template-columns: 9px 48px minmax(0, 1fr);
        min-height: 16px;
        gap: 4px;
        padding: 3px 5px;
        border-radius: 4px;
    }

    .sk-teacher-info-label {
        font-size: 5px;
    }

    .sk-teacher-info-value {
        font-size: 5px;
    }

    .sk-teacher-detail-page .content-col.tab-section,
    .sk-teacher-detail-page .content.tab-section:not(#teacher-info) {
        padding: 8px;
    }

    .sk-teacher-detail-main > .sk-students-footer {
        height: 12px;
        font-size: 5px;
    }
}

@media (max-width: 430px) {
    .sk-teacher-detail-workspace {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .sk-teacher-detail-main {
        grid-template-rows: 34px minmax(0, 1fr) 10px;
        padding: 6px 7px 0;
    }

    .sk-teacher-detail-page #teacher-info {
        grid-template-columns: 106px minmax(0, 1fr);
        gap: 5px;
        padding: 5px;
    }

    .sk-teacher-detail-actions {
        gap: 3px;
    }

    .sk-teacher-detail-page .sk-detail-action {
        height: 20px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-teacher-detail-page .sub-menu-bar {
        gap: 5px;
        padding: 0 6px;
    }

    .sk-teacher-info-field {
        grid-template-columns: 8px 42px minmax(0, 1fr);
        padding: 2px 4px;
    }
}

@media (max-height: 430px) {
    .sk-teacher-detail-page .sk-dashboard-topbar {
        min-height: 54px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .sk-teacher-detail-shell {
        grid-template-rows: 54px minmax(0, 1fr);
    }

    .sk-teacher-detail-workspace {
        grid-template-columns: 98px minmax(0, 1fr);
    }

    .sk-teacher-detail-page .sk-students-sidebar {
        padding: 5px;
    }

    .sk-teacher-detail-page .sk-students-nav {
        gap: 1px;
    }

    .sk-teacher-detail-page .sk-students-nav a {
        grid-template-columns: 10px minmax(0, 1fr);
        gap: 4px;
        height: 13px;
        padding: 0 5px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-teacher-detail-page .sk-students-nav img {
        width: 8px;
        height: 8px;
    }

    .sk-teacher-detail-page .sk-students-nav-bottom {
        padding-top: 4px;
    }

    .sk-teacher-detail-main {
        grid-template-rows: 25px minmax(0, 1fr) 10px;
        padding: 5px 7px 0;
    }

    .sk-teacher-detail-breadcrumb {
        margin-bottom: 2px;
        font-size: 5px;
    }

    .sk-teacher-detail-heading h1 {
        font-size: 10px;
    }

    .sk-teacher-detail-actions {
        padding-top: 6px;
    }

    .sk-teacher-detail-page .sk-detail-action {
        height: 17px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-teacher-detail-page .sk-detail-action svg {
        width: 8px;
        height: 8px;
    }
}

/* Teacher detail info tab: mirror Student Info layout with teacher data. */
.sk-teacher-detail-page .sk-dashboard-topbar {
    grid-template-columns: minmax(360px, 510px) minmax(460px, 630px) minmax(310px, 360px);
    min-height: 104px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sk-teacher-detail-page .sk-teacher-detail-shell {
    grid-template-rows: 104px minmax(0, 1fr);
    border-radius: 0;
}

.sk-teacher-detail-page .sk-teacher-detail-workspace {
    grid-template-columns: 250px minmax(0, 1fr);
}

.sk-teacher-detail-page .sk-teacher-detail-main {
    grid-template-rows: 58px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 18px 16px 0;
}

.sk-teacher-detail-page .sk-teacher-detail-heading {
    align-items: flex-start;
}

.sk-teacher-detail-page .sk-teacher-detail-actions {
    padding-top: 0;
}

.sk-teacher-detail-page .sk-detail-action {
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
}

.sk-teacher-detail-page .sk-teacher-detail-panel {
    grid-template-rows: 52px minmax(0, 1fr);
    width: auto !important;
    margin-right: 0;
    box-sizing: border-box;
    border-radius: 14px;
}

.sk-teacher-detail-page .sub-menu-bar {
    height: 52px;
    gap: 34px;
    padding: 0 38px 0 0;
}

.sk-teacher-detail-page .bar-item,
.sk-teacher-detail-page .bar-item-active {
    height: 52px;
    font-size: 15px;
}

.sk-teacher-detail-page #teacher-info {
    display: none;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    justify-content: stretch;
    align-content: stretch;
    width: auto !important;
    height: 100% !important;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 6px 16px 14px;
    overflow: hidden;
    background: #ffffff;
}

.sk-teacher-detail-page #teacher-info.show {
    display: grid;
}

.sk-teacher-detail-page #teacher-info > .userInfo,
.sk-teacher-detail-page #teacher-info > .content-details {
    border: 1px solid #e3ebf6;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(16, 40, 92, 0.055);
}

.sk-teacher-detail-page #teacher-info > .userInfo {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 12px 18px 14px;
}

.sk-teacher-detail-page #teacher-main-photo {
    width: 100%;
    height: 155px;
    margin: 0;
    border-radius: 10px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-teacher-detail-page .sk-teacher-profile-summary {
    min-width: 0;
    padding: 13px 6px 12px;
    border-bottom: 1px solid #e4ebf5;
}

.sk-teacher-detail-page .sk-teacher-profile-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.sk-teacher-detail-page .sk-teacher-profile-summary strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-detail-page .sk-teacher-profile-summary span {
    flex: 0 0 auto;
    min-width: 50px;
    padding: 4px 8px;
    border-radius: 8px;
    color: #168b31;
    background: #e7f8e9;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}

.sk-teacher-detail-page .sk-teacher-profile-summary span.is-active {
    color: #168b31;
    background: #e7f8e9;
}

.sk-teacher-detail-page .sk-teacher-profile-summary span.is-resigned {
    color: #c90008;
    background: #fff0f1;
}

.sk-teacher-detail-page .sk-teacher-profile-summary dl {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
}

.sk-teacher-detail-page .sk-teacher-profile-summary dl div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.sk-teacher-detail-page .sk-teacher-profile-summary dl div::before {
    content: "";
    width: 16px;
    height: 16px;
    background: #0963ff;
    -webkit-mask: var(--teacher-summary-icon) center / contain no-repeat;
    mask: var(--teacher-summary-icon) center / contain no-repeat;
}

.sk-teacher-detail-page .sk-teacher-profile-summary dl div:nth-child(1)::before {
    --teacher-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4h8v3H8zM7 6H5v15h14V6h-2M8 11h8M8 15h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-teacher-detail-page .sk-teacher-profile-summary dl div:nth-child(2)::before {
    --teacher-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 8 9-4 9 4-9 4-9-4ZM7 10v5c2.9 2 7.1 2 10 0v-5M21 8v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-teacher-detail-page .sk-teacher-profile-summary dl div:nth-child(3)::before {
    --teacher-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-7h6v7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-teacher-detail-page .sk-teacher-profile-summary dl div:nth-child(4)::before {
    --teacher-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16M8 4v16M16 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sk-teacher-detail-page .sk-teacher-profile-summary dt,
.sk-teacher-detail-page .sk-teacher-profile-summary dd {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    color: #4e5d82;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-detail-page .sk-teacher-profile-summary dd {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-teacher-detail-page #teacher-info .aRecord {
    margin: 10px 0 0;
    padding: 0;
}

.sk-teacher-detail-page #teacher-info .aRecord > p {
    margin: 0 0 7px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

.sk-teacher-detail-page #teacher-info .atRecord {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    margin-top: 4px;
}

.sk-teacher-detail-page #teacher-info .radial {
    --size: 120px !important;
    --thickness: 8px;
    --track: #e7edf6;
    --progress: #12b84f;
}

.sk-teacher-detail-page #teacher-info .radial::after {
    inset: calc(var(--thickness) + 5px);
    box-shadow: none;
}

.sk-teacher-detail-page #teacher-info .percent {
    color: #071553;
    font-size: 25px;
}

.sk-teacher-detail-page #teacher-info .label {
    margin-top: 4px;
    color: #071553;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.sk-teacher-detail-page #teacher-info .atContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: end;
    gap: 10px;
    min-width: 0;
    margin-top: 0;
    padding-left: 0;
}

.sk-teacher-detail-page #teacher-info .content-item {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #2b3a66;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-detail-page #teacher-info .content-item div {
    flex: 0 0 auto;
    border-radius: 3px;
}

.sk-teacher-detail-page #teacher-info .content-item p {
    margin: 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: inherit;
    white-space: nowrap;
}

.sk-teacher-detail-page #teacher-info .content-item span {
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.sk-teacher-detail-page #teacher-info > .content-details {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 134px minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    align-items: center;
    gap: 9px 24px;
    width: 100% !important;
    max-width: none;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0 !important;
    padding: 10px 16px;
    overflow: hidden;
}

.sk-teacher-detail-page #teacher-info .tworows,
.sk-teacher-detail-page #teacher-info .item-left-lable,
.sk-teacher-detail-page #teacher-info .item-left-lable-text,
.sk-teacher-detail-page #teacher-info .sk-detail-address-row,
.sk-teacher-detail-page #teacher-info .sk-detail-other-row {
    display: contents;
}

.sk-teacher-detail-page #teacher-info .sk-detail-address-row p,
.sk-teacher-detail-page #teacher-info .sk-detail-other-row p {
    grid-column: 1;
}

.sk-teacher-detail-page #teacher-info .sk-detail-address-row input,
.sk-teacher-detail-page #teacher-info .sk-detail-other-row textarea {
    grid-column: 2 / -1;
}

.sk-teacher-detail-page #teacher-info .sk-detail-signature-row {
    display: contents;
}

.sk-teacher-detail-page #teacher-info .sk-detail-signature-row p {
    grid-column: 1;
}

.sk-teacher-detail-page #teacher-info .sk-detail-signature-row input,
.sk-teacher-detail-page #teacher-info .sk-detail-signature-box {
    grid-column: 2 / -1;
}

.sk-teacher-detail-page #teacher-info .sk-detail-signature-box {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 3px 10px;
    border: 1px solid #d7e1ee;
    border-radius: 6px;
    background: #fbfcff;
}

.sk-teacher-detail-page #teacher-info .sk-detail-signature-box img {
    max-width: 220px;
    max-height: 36px;
    object-fit: contain;
}

.sk-teacher-detail-page #teacher-info .item-left-lable p,
.sk-teacher-detail-page #teacher-info .item-left-lable-text p {
    align-self: center;
    width: auto !important;
    margin: 0;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-detail-page #teacher-info .item-left-lable input,
.sk-teacher-detail-page #teacher-info .item-left-lable-text textarea {
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #d7e1ee;
    border-radius: 6px;
    color: #071553;
    background: #fbfcff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-detail-page #teacher-info .item-left-lable-text textarea {
    resize: none;
}

.sk-teacher-detail-page .sk-teacher-detail-main > .sk-students-footer {
    height: 38px;
    font-size: 13px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-teacher-detail-page .sk-dashboard-topbar {
        grid-template-columns: minmax(230px, 320px) minmax(260px, 1fr) minmax(210px, 320px);
        min-height: 74px;
    }

    .sk-teacher-detail-page .sk-teacher-detail-shell {
        grid-template-rows: 74px minmax(0, 1fr);
    }

    .sk-teacher-detail-page .sk-teacher-detail-workspace {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .sk-teacher-detail-page .sk-teacher-detail-main {
        grid-template-rows: 48px minmax(0, 1fr) 18px;
        gap: 7px;
        padding: 14px 12px 0;
    }

    .sk-teacher-detail-page .sk-detail-action {
        height: 36px;
        padding: 0 14px;
        border-radius: 7px;
        font-size: 12px;
    }

    .sk-teacher-detail-page .sk-teacher-detail-panel {
        grid-template-rows: 42px minmax(0, 1fr);
        border-radius: 11px;
    }

    .sk-teacher-detail-page .sub-menu-bar {
        height: 42px;
        gap: 18px;
        padding: 0 18px 0 0;
    }

    .sk-teacher-detail-page .bar-item,
    .sk-teacher-detail-page .bar-item-active {
        height: 42px;
        font-size: 12px;
    }

    .sk-teacher-detail-page #teacher-info {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 8px;
        padding: 5px 12px 10px;
    }

    .sk-teacher-detail-page #teacher-info > .userInfo {
        padding: 9px 12px;
    }

    .sk-teacher-detail-page #teacher-main-photo {
        height: 112px;
        border-radius: 8px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary {
        padding: 9px 4px 8px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary strong {
        font-size: 14px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary span {
        min-width: 42px;
        padding: 3px 6px;
        border-radius: 6px;
        font-size: 9px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dl {
        gap: 7px;
        margin-top: 10px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dl div {
        grid-template-columns: 14px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dl div::before {
        width: 13px;
        height: 13px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dt,
    .sk-teacher-detail-page .sk-teacher-profile-summary dd {
        font-size: 11px;
    }

    .sk-teacher-detail-page #teacher-info .aRecord {
        margin-top: 7px;
    }

    .sk-teacher-detail-page #teacher-info .aRecord > p {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .sk-teacher-detail-page #teacher-info .atRecord {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 9px;
    }

    .sk-teacher-detail-page #teacher-info .radial {
        --size: 84px !important;
    }

    .sk-teacher-detail-page #teacher-info .percent {
        font-size: 18px;
    }

    .sk-teacher-detail-page #teacher-info .label {
        font-size: 9px;
    }

    .sk-teacher-detail-page #teacher-info .atContent {
        gap: 6px;
    }

    .sk-teacher-detail-page #teacher-info .content-item,
    .sk-teacher-detail-page #teacher-info .content-item span {
        font-size: 10px;
    }

    .sk-teacher-detail-page #teacher-info > .content-details {
        grid-template-columns: 92px minmax(0, 1fr) 104px minmax(0, 1fr);
        gap: 7px 14px;
        padding: 8px 11px;
    }

    .sk-teacher-detail-page #teacher-info .item-left-lable p,
    .sk-teacher-detail-page #teacher-info .item-left-lable-text p {
        font-size: 10px;
    }

    .sk-teacher-detail-page #teacher-info .item-left-lable input,
    .sk-teacher-detail-page #teacher-info .item-left-lable-text textarea {
        height: 30px;
        padding: 0 8px;
        font-size: 10px;
    }

    .sk-teacher-detail-page .sk-teacher-detail-main > .sk-students-footer {
        height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 760px) {
    .sk-teacher-detail-page .sk-dashboard-topbar {
        min-height: 64px;
    }

    .sk-teacher-detail-page .sk-teacher-detail-shell {
        grid-template-rows: 64px minmax(0, 1fr);
    }

    .sk-teacher-detail-page .sk-teacher-detail-workspace {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sk-teacher-detail-page .sk-teacher-detail-main {
        grid-template-rows: 38px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 7px 9px 0;
    }

    .sk-teacher-detail-page .sk-detail-action {
        height: 23px;
        padding: 0 6px;
        gap: 3px;
        border-radius: 5px;
        font-size: 6px;
    }

    .sk-teacher-detail-page .sk-teacher-detail-panel {
        grid-template-rows: 28px minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-teacher-detail-page .sub-menu-bar {
        height: 28px;
        gap: 7px;
        padding: 0 8px 0 0;
    }

    .sk-teacher-detail-page .bar-item,
    .sk-teacher-detail-page .bar-item-active {
        height: 28px;
        padding: 0 2px;
        font-size: 6px;
    }

    .sk-teacher-detail-page #teacher-info {
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 5px;
        padding: 4px 6px 6px;
    }

    .sk-teacher-detail-page #teacher-info > .userInfo {
        padding: 5px 6px;
        border-radius: 7px;
    }

    .sk-teacher-detail-page #teacher-main-photo {
        height: 54px;
        border-radius: 5px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary {
        padding: 4px 2px 4px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary strong {
        font-size: 7px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary span {
        min-width: 22px;
        padding: 2px 3px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dl {
        gap: 3px;
        margin-top: 5px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dl div {
        grid-template-columns: 7px minmax(0, 1fr) auto;
        gap: 4px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dl div::before {
        width: 6px;
        height: 6px;
    }

    .sk-teacher-detail-page .sk-teacher-profile-summary dt,
    .sk-teacher-detail-page .sk-teacher-profile-summary dd {
        font-size: 5px;
    }

    .sk-teacher-detail-page #teacher-info .aRecord {
        margin-top: 4px;
    }

    .sk-teacher-detail-page #teacher-info .aRecord > p {
        margin-bottom: 3px;
        font-size: 6px;
    }

    .sk-teacher-detail-page #teacher-info .atRecord {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 4px;
    }

    .sk-teacher-detail-page #teacher-info .radial {
        --size: 42px !important;
    }

    .sk-teacher-detail-page #teacher-info .percent {
        font-size: 9px;
    }

    .sk-teacher-detail-page #teacher-info .label {
        margin-top: 1px;
        font-size: 5px;
    }

    .sk-teacher-detail-page #teacher-info .atContent {
        gap: 2px;
    }

    .sk-teacher-detail-page #teacher-info .content-item {
        gap: 3px;
    }

    .sk-teacher-detail-page #teacher-info .content-item,
    .sk-teacher-detail-page #teacher-info .content-item span {
        font-size: 5px;
    }

    .sk-teacher-detail-page #teacher-info .content-item div {
        width: 5px !important;
        height: 5px !important;
    }

    .sk-teacher-detail-page #teacher-info > .content-details {
        grid-template-columns: 47px minmax(0, 1fr) 54px minmax(0, 1fr);
        gap: 3px 6px;
        padding: 4px 5px;
        border-radius: 7px;
    }

    .sk-teacher-detail-page #teacher-info .item-left-lable p,
    .sk-teacher-detail-page #teacher-info .item-left-lable-text p {
        font-size: 5px;
    }

    .sk-teacher-detail-page #teacher-info .item-left-lable input,
    .sk-teacher-detail-page #teacher-info .item-left-lable-text textarea {
        height: 16px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-teacher-detail-page .sk-teacher-detail-main > .sk-students-footer {
        height: 12px;
        font-size: 5px;
    }
}

/* Teacher education tab */
.sk-teacher-detail-page #education.sk-teacher-education-tab.show {
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr) 104px 24px;
    gap: 22px;
    height: 100%;
    padding: 14px 16px;
    overflow: hidden;
    background: #ffffff;
}

.sk-teacher-detail-page #work-expirence.sk-teacher-work-tab.show {
    display: grid;
    grid-template-rows: 54px minmax(0, 1fr) 104px 24px;
    gap: 22px;
    height: 100%;
    padding: 14px 16px;
    overflow: hidden;
    background: #ffffff;
}

.sk-teacher-detail-page #payments.sk-teacher-payments-tab.show {
    display: grid;
    grid-template-rows: 82px 46px minmax(0, 1fr) 104px 18px;
    gap: 18px;
    height: 100%;
    padding: 14px 16px;
    overflow: hidden;
    background: #ffffff;
}

.sk-teacher-detail-page #exams.sk-teacher-exams-tab.show {
    display: grid;
    grid-template-rows: 82px 46px minmax(0, 1fr) 88px 18px;
    gap: 18px;
    height: 100%;
    padding: 14px 16px;
    overflow: hidden;
    background: #ffffff;
}

.sk-teacher-detail-page #attandace.content-col.tab-section.show {
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 14px 16px;
}


.sk-teacher-edu-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
}

.sk-teacher-edu-search {
    display: flex;
    align-items: center;
    flex: 0 1 470px;
    min-width: 280px;
    height: 54px;
    padding: 0 18px;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: #ffffff;
}

.sk-teacher-edu-search svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 14px;
    fill: none;
    stroke: #52628c;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-teacher-edu-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-teacher-edu-search input::placeholder {
    color: #6f7b9b;
}

.sk-teacher-edu-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    min-width: 0;
}

.sk-teacher-edu-controls .text-right-message {
    margin: 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    white-space: nowrap;
}

.sk-teacher-edu-rows {
    display: flex;
    align-items: center;
    width: 186px;
    height: 50px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #ffffff;
}

.sk-teacher-edu-rows select {
    width: 100%;
    height: 100%;
    padding: 0 18px;
    border: 0;
    outline: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-edu-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 164px;
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: #3d9a45;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 15px;
    white-space: nowrap;
}

.sk-teacher-edu-table-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: #ffffff;
}

.sk-teacher-edu-table-scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.sk-teacher-edu-table-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sk-teacher-edu-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cbd8ea;
}

.sk-teacher-edu-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #071553;
}

.sk-teacher-edu-table th,
.sk-teacher-edu-table td {
    min-width: 0;
    padding: 0 28px;
    border-bottom: 1px solid #e3ebf6;
    text-align: left;
    vertical-align: middle;
}

.sk-teacher-edu-table th {
    position: relative;
    height: 56px;
    color: #071553;
    background: #fbfcff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-edu-table th::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 0;
    width: 1px;
    height: 26px;
    background: #dbe5f3;
}

.sk-teacher-edu-table th:last-child::after {
    display: none;
}

.sk-teacher-edu-table td {
    height: 82px;
    overflow: hidden;
    color: #080d23;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-edu-table tr:last-child td {
    border-bottom: 0;
}

.sk-teacher-edu-table th:nth-child(1),
.sk-teacher-edu-table td:nth-child(1) {
    width: 18%;
}

.sk-teacher-edu-table th:nth-child(2),
.sk-teacher-edu-table td:nth-child(2) {
    width: 18%;
}

.sk-teacher-edu-table th:nth-child(3),
.sk-teacher-edu-table td:nth-child(3) {
    width: 22%;
}

.sk-teacher-edu-table th:nth-child(4),
.sk-teacher-edu-table td:nth-child(4) {
    width: 17%;
}

.sk-teacher-edu-table th:nth-child(5),
.sk-teacher-edu-table td:nth-child(5) {
    width: 13%;
    text-align: center;
}

.sk-teacher-edu-table th:nth-child(6),
.sk-teacher-edu-table td:nth-child(6) {
    width: 12%;
    text-align: center;
}

.sk-teacher-work-table th:nth-child(1),
.sk-teacher-work-table td:nth-child(1) {
    width: 20%;
}

.sk-teacher-work-table th:nth-child(2),
.sk-teacher-work-table td:nth-child(2) {
    width: 22%;
}

.sk-teacher-work-table th:nth-child(3),
.sk-teacher-work-table td:nth-child(3) {
    width: 15%;
}

.sk-teacher-work-table th:nth-child(4),
.sk-teacher-work-table td:nth-child(4),
.sk-teacher-work-table th:nth-child(5),
.sk-teacher-work-table td:nth-child(5) {
    width: 17%;
}

.sk-teacher-work-table th:nth-child(6),
.sk-teacher-work-table td:nth-child(6) {
    width: 9%;
    text-align: center;
}

.sk-teacher-payments-table th:nth-child(1),
.sk-teacher-payments-table td:nth-child(1) {
    width: 14%;
}

.sk-teacher-payments-table th:nth-child(2),
.sk-teacher-payments-table td:nth-child(2) {
    width: 12%;
}

.sk-teacher-payments-table th:nth-child(3),
.sk-teacher-payments-table td:nth-child(3),
.sk-teacher-payments-table th:nth-child(4),
.sk-teacher-payments-table td:nth-child(4) {
    width: 10%;
    text-align: center;
}

.sk-teacher-payments-table th:nth-child(5),
.sk-teacher-payments-table td:nth-child(5),
.sk-teacher-payments-table th:nth-child(6),
.sk-teacher-payments-table td:nth-child(6) {
    width: 10%;
}

.sk-teacher-payments-table th:nth-child(7),
.sk-teacher-payments-table td:nth-child(7) {
    width: 13%;
}

.sk-teacher-payments-table th:nth-child(8),
.sk-teacher-payments-table td:nth-child(8) {
    width: 21%;
    text-align: center;
}

.sk-teacher-exams-table th:nth-child(1),
.sk-teacher-exams-table td:nth-child(1) {
    width: 16%;
}

.sk-teacher-exams-table th:nth-child(2),
.sk-teacher-exams-table td:nth-child(2) {
    width: 13%;
}

.sk-teacher-exams-table th:nth-child(3),
.sk-teacher-exams-table td:nth-child(3),
.sk-teacher-exams-table th:nth-child(4),
.sk-teacher-exams-table td:nth-child(4),
.sk-teacher-exams-table th:nth-child(5),
.sk-teacher-exams-table td:nth-child(5) {
    width: 9%;
}

.sk-teacher-exams-table th:nth-child(6),
.sk-teacher-exams-table td:nth-child(6) {
    width: 12%;
    text-align: center;
}

.sk-teacher-exams-table th:nth-child(7),
.sk-teacher-exams-table td:nth-child(7),
.sk-teacher-exams-table th:nth-child(8),
.sk-teacher-exams-table td:nth-child(8) {
    width: 13%;
}

.sk-teacher-exams-table th:nth-child(9),
.sk-teacher-exams-table td:nth-child(9) {
    width: 16%;
    text-align: center;
}

.sk-payment-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 9px;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
}

.sk-payment-pill-blue {
    color: #0963ff;
    background: #edf4ff;
}

.sk-payment-pill-green {
    color: #159947;
    background: #e9f8ed;
}

.sk-payment-pill-orange {
    color: #ff8a00;
    background: #fff4e4;
}

.sk-payment-pill-red {
    color: #ff1f2d;
    background: #fff0f0;
}

.sk-payment-pill-neutral {
    color: #5b6685;
    background: #f5f7fb;
}

.sk-payment-icon-dark {
    color: #071553;
}

.sk-exam-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 30px;
    padding: 0 13px;
    border-radius: 8px;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
}

.sk-exam-status-green {
    color: #168f3e;
    background: #e8f7eb;
}

.sk-exam-status-orange {
    color: #ff7a00;
    background: #fff0dd;
}

.sk-exam-row-actions {
    gap: 20px;
}

.sk-exam-trophy-action {
    color: #168f3e;
}

.sk-teacher-exams-add {
    gap: 9px;
}

.sk-teacher-exams-add svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-work-row-actions {
    gap: 18px;
}

.sk-teacher-edu-doc-actions,
.sk-teacher-edu-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.sk-payment-row-actions {
    gap: 12px;
}

.sk-teacher-edu-icon-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    color: #0963ff;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}

.sk-teacher-edu-icon-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-edu-icon-danger {
    color: #ff1f2d;
}

.sk-teacher-edu-no-file {
    color: #7a849f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
}

.sk-teacher-edu-empty {
    height: 120px !important;
    text-align: center !important;
    color: #6d7898 !important;
}

.sk-teacher-edu-loader {
    z-index: 4;
    border-radius: 10px;
}

.sk-teacher-edu-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    min-width: 0;
    min-height: 0;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: #ffffff;
}

.sk-teacher-edu-stats article {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 78px;
    padding: 0 48px;
    border-right: 1px solid #dbe5f3;
}

.sk-teacher-edu-stats article:last-child {
    border-right: 0;
}

.sk-teacher-edu-stat-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.sk-teacher-edu-stat-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-edu-stat-blue {
    color: #0963ff;
    background: #edf4ff;
}

.sk-teacher-edu-stat-green {
    color: #2fad4f;
    background: #edfbf0;
}

.sk-teacher-edu-stat-purple {
    color: #644dff;
    background: #f2efff;
}

.sk-teacher-edu-stats small,
.sk-teacher-edu-stats strong {
    display: block;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-edu-stats small {
    color: #2b3a66;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-edu-stats strong {
    margin-top: 8px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 16px;
}

.sk-teacher-edu-pagination {
    align-self: center;
    justify-self: center;
    min-height: 24px;
}

.sk-teacher-doc-view-overlay {
    background: rgba(22, 31, 54, 0.36);
    backdrop-filter: blur(4px);
}

.sk-teacher-doc-view-modal {
    display: grid;
    grid-template-rows: 72px 86px minmax(0, 1fr) 56px;
    gap: 14px;
    width: min(92vw, 1180px);
    height: min(88vh, 900px);
    max-height: 88vh;
    padding: 26px 26px 20px;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(12, 24, 48, 0.22);
}

.sk-teacher-doc-view-head {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.sk-teacher-doc-view-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #7d36ff;
    background: #f0e5ff;
}

.sk-teacher-doc-view-icon svg,
.sk-teacher-doc-view-close svg,
.sk-teacher-doc-download svg,
.sk-teacher-doc-preview-controls svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-teacher-doc-view-icon svg {
    width: 30px;
    height: 30px;
}

.sk-teacher-doc-view-head h2,
.sk-teacher-doc-view-head p,
.sk-teacher-doc-file-meta strong,
.sk-teacher-doc-file-meta p {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-teacher-doc-view-head h2 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 22px;
}

.sk-teacher-doc-view-head p {
    margin: 8px 0 0;
    color: #2e3e75;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-doc-view-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #294178;
    text-decoration: none;
}

.sk-teacher-doc-view-close:hover {
    background: #f4f7fd;
}

.sk-teacher-doc-view-close svg {
    width: 22px;
    height: 22px;
}

.sk-teacher-doc-file-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 132px;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #ffffff;
}

.sk-teacher-doc-file-icon {
    display: grid;
    place-items: end center;
    width: 42px;
    height: 48px;
    padding-bottom: 8px;
    border-radius: 5px;
    color: #ffffff;
    background: linear-gradient(180deg, #eef1f6 0 28%, #ff342e 28% 100%);
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0;
}

.sk-teacher-doc-file-icon.is-image {
    background: linear-gradient(180deg, #eef1f6 0 28%, #0963ff 28% 100%);
}

.sk-teacher-doc-file-icon.is-file {
    background: linear-gradient(180deg, #eef1f6 0 28%, #56627a 28% 100%);
}

.sk-teacher-doc-file-meta strong {
    display: block;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-teacher-doc-file-meta p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
    color: #40517f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-teacher-doc-file-meta i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.sk-teacher-doc-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 132px;
    height: 48px;
    border: 1px solid #cddbf3;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-doc-download:hover {
    border-color: #0963ff;
    background: #f5f8ff;
}

.sk-teacher-doc-download svg {
    width: 21px;
    height: 21px;
}

.sk-teacher-doc-preview-card {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 54px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #fbfcff;
}

.sk-teacher-doc-preview-frame {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: #f7f9fd;
}

.sk-teacher-doc-preview-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
    transform-origin: center top;
}

.sk-teacher-doc-preview-controls {
    display: grid;
    grid-template-columns: 48px 80px 48px minmax(0, 1fr) 48px 64px 48px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 20px;
    border-top: 1px solid #dbe5f3;
    background: #ffffff;
}

.sk-teacher-doc-preview-controls button,
.sk-teacher-doc-preview-controls span:not(.sk-teacher-doc-control-spacer) {
    display: grid;
    place-items: center;
    height: 38px;
    border: 1px solid #dbe5f3;
    border-radius: 7px;
    color: #2c4278;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-teacher-doc-preview-controls button {
    width: 48px;
    padding: 0;
    cursor: pointer;
}

.sk-teacher-doc-preview-controls button:hover {
    border-color: #bcd0f0;
    background: #f5f8ff;
}

.sk-teacher-doc-preview-controls button:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.sk-teacher-doc-preview-controls svg {
    width: 20px;
    height: 20px;
}

.sk-teacher-doc-control-spacer {
    min-width: 0;
}

.sk-teacher-doc-view-footer {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.sk-teacher-doc-close-btn {
    width: 96px;
    height: 44px;
    border: 1px solid #cddbf3;
    border-radius: 8px;
    color: #071553;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-teacher-doc-close-btn:hover {
    background: #f5f8ff;
}

@media (min-width: 761px) and (max-width: 1280px), (min-width: 761px) and (max-height: 760px) {
    .sk-teacher-doc-view-modal {
        grid-template-rows: 62px 78px minmax(0, 1fr) 50px;
        gap: 12px;
        width: min(94vw, 980px);
        height: calc(100vh - 42px);
        max-height: calc(100vh - 42px);
        padding-top: 20px;
    }
}

@media (max-width: 760px) {
    .sk-teacher-doc-view-modal {
        grid-template-rows: auto auto minmax(0, 1fr) 52px;
        gap: 12px;
        width: calc(100vw - 24px);
        height: calc(100vh - 28px);
        max-height: calc(100vh - 28px);
        padding: 18px 16px 16px;
    }

    .sk-teacher-doc-view-head {
        grid-template-columns: 48px minmax(0, 1fr) 34px;
        gap: 12px;
    }

    .sk-teacher-doc-view-icon {
        width: 46px;
        height: 46px;
    }

    .sk-teacher-doc-view-icon svg {
        width: 25px;
        height: 25px;
    }

    .sk-teacher-doc-view-head h2 {
        font-size: 19px;
    }

    .sk-teacher-doc-view-head p {
        font-size: 12px;
    }

    .sk-teacher-doc-file-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .sk-teacher-doc-download {
        grid-column: 1 / -1;
        width: 100%;
        height: 42px;
    }

    .sk-teacher-doc-preview-card {
        min-height: 320px;
    }

    .sk-teacher-doc-preview-controls {
        grid-template-columns: 36px 58px 36px minmax(0, 1fr) 36px 50px 36px;
        gap: 8px;
        padding: 8px 10px;
    }

    .sk-teacher-doc-preview-controls button,
    .sk-teacher-doc-preview-controls span:not(.sk-teacher-doc-control-spacer) {
        height: 34px;
        font-size: 13px;
    }

    .sk-teacher-doc-preview-controls button {
        width: 36px;
    }

    .sk-teacher-doc-preview-controls svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-teacher-detail-page #education.sk-teacher-education-tab.show,
    .sk-teacher-detail-page #work-expirence.sk-teacher-work-tab.show {
        grid-template-rows: 44px minmax(0, 1fr) 78px 18px;
        gap: 14px;
        padding: 10px 12px;
    }

    .sk-teacher-detail-page #payments.sk-teacher-payments-tab.show {
        grid-template-rows: 62px 42px minmax(0, 1fr) 78px 14px;
        gap: 12px;
        padding: 10px 12px;
    }

    .sk-teacher-detail-page #exams.sk-teacher-exams-tab.show {
        grid-template-rows: 62px 42px minmax(0, 1fr) 70px 14px;
        gap: 12px;
        padding: 10px 12px;
    }

    .sk-teacher-detail-page #attandace.content-col.tab-section.show {
        padding: 10px 12px;
    }

    .sk-teacher-edu-search {
        flex-basis: 380px;
        min-width: 240px;
        height: 44px;
        padding: 0 14px;
        border-radius: 8px;
    }

    .sk-teacher-edu-search svg {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .sk-teacher-edu-search input,
    .sk-teacher-edu-controls .text-right-message,
    .sk-teacher-edu-rows select,
    .sk-teacher-edu-add,
    .sk-teacher-edu-table th,
    .sk-teacher-edu-table td {
        font-size: 12px;
    }

    .sk-teacher-edu-controls {
        gap: 14px;
    }

    .sk-teacher-edu-rows {
        width: 152px;
        height: 42px;
    }

    .sk-teacher-edu-rows select {
        padding: 0 12px;
    }

    .sk-teacher-edu-add {
        min-width: 132px;
        height: 42px;
        padding: 0 16px;
    }

    .sk-teacher-edu-table th {
        height: 46px;
    }

    .sk-teacher-edu-table th::after {
        top: 13px;
        height: 20px;
    }

    .sk-teacher-edu-table td {
        height: 58px;
        padding: 0 20px;
    }

    .sk-teacher-payments-table th,
    .sk-teacher-payments-table td {
        padding: 0 14px;
    }

    .sk-teacher-payments-table th:nth-child(8),
    .sk-teacher-payments-table td:nth-child(8) {
        padding: 0 6px;
    }

    .sk-teacher-exams-table th,
    .sk-teacher-exams-table td {
        padding: 0 12px;
    }

    .sk-teacher-edu-doc-actions,
    .sk-teacher-edu-row-actions {
        gap: 14px;
    }

    .sk-teacher-edu-icon-btn {
        width: 22px;
        height: 22px;
    }

    .sk-teacher-edu-icon-btn svg {
        width: 20px;
        height: 20px;
    }

    .sk-payment-pill {
        min-width: 58px;
        height: 23px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-payment-row-actions {
        gap: 3px;
    }

    .sk-exam-status-pill {
        min-width: 66px;
        height: 23px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-exam-row-actions {
        gap: 10px;
    }

    .sk-teacher-edu-stats article {
        grid-template-columns: 64px minmax(0, 1fr);
        height: 58px;
        padding: 0 34px;
    }

    .sk-teacher-edu-stat-icon {
        width: 46px;
        height: 46px;
    }

    .sk-teacher-edu-stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .sk-teacher-edu-stats small {
        font-size: 11px;
    }

    .sk-teacher-edu-stats strong {
        margin-top: 5px;
        font-size: 13px;
    }
}

@media (max-width: 760px) {
    .sk-teacher-detail-page #education.sk-teacher-education-tab.show,
    .sk-teacher-detail-page #work-expirence.sk-teacher-work-tab.show {
        grid-template-rows: 25px minmax(0, 1fr) 42px 10px;
        gap: 7px;
        padding: 5px 6px;
    }

    .sk-teacher-detail-page #payments.sk-teacher-payments-tab.show {
        grid-template-rows: 38px 23px minmax(0, 1fr) 42px 8px;
        gap: 6px;
        padding: 5px 6px;
    }

    .sk-teacher-detail-page #exams.sk-teacher-exams-tab.show {
        grid-template-rows: 38px 23px minmax(0, 1fr) 42px 8px;
        gap: 6px;
        padding: 5px 6px;
    }

    .sk-teacher-detail-page #attandace.content-col.tab-section.show {
        padding: 5px 6px;
    }

    .sk-teacher-edu-toolbar {
        gap: 6px;
    }

    .sk-teacher-edu-search {
        flex-basis: 178px;
        min-width: 126px;
        height: 25px;
        padding: 0 7px;
        border-radius: 5px;
    }

    .sk-teacher-edu-search svg {
        width: 11px;
        height: 11px;
        margin-right: 5px;
    }

    .sk-teacher-edu-search input,
    .sk-teacher-edu-controls .text-right-message,
    .sk-teacher-edu-rows select,
    .sk-teacher-edu-add,
    .sk-teacher-edu-table th,
    .sk-teacher-edu-table td {
        font-size: 6px;
    }

    .sk-teacher-edu-controls {
        gap: 6px;
    }

    .sk-teacher-edu-rows {
        width: 74px;
        height: 23px;
        border-radius: 4px;
    }

    .sk-teacher-edu-rows select {
        padding: 0 5px;
    }

    .sk-teacher-edu-add {
        min-width: 72px;
        height: 23px;
        padding: 0 7px;
        border-radius: 4px;
    }

    .sk-teacher-edu-table-card,
    .sk-teacher-edu-stats {
        border-radius: 5px;
    }

    .sk-teacher-edu-table th {
        height: 24px;
        padding: 0 9px;
    }

    .sk-teacher-edu-table th::after {
        top: 7px;
        height: 11px;
    }

    .sk-teacher-edu-table td {
        height: 30px;
        padding: 0 9px;
    }

    .sk-teacher-payments-table th,
    .sk-teacher-payments-table td {
        padding: 0 5px;
    }

    .sk-teacher-exams-table th,
    .sk-teacher-exams-table td {
        padding: 0 4px;
    }

    .sk-teacher-edu-doc-actions,
    .sk-teacher-edu-row-actions {
        gap: 6px;
    }

    .sk-teacher-edu-icon-btn {
        width: 12px;
        height: 12px;
    }

    .sk-teacher-edu-icon-btn svg {
        width: 10px;
        height: 10px;
        stroke-width: 2.2;
    }

    .sk-payment-pill {
        min-width: 30px;
        height: 14px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-payment-row-actions {
        gap: 3px;
    }

    .sk-exam-status-pill {
        min-width: 34px;
        height: 14px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-exam-row-actions {
        gap: 4px;
    }

    .sk-teacher-exams-add {
        gap: 3px;
    }

    .sk-teacher-exams-add svg {
        width: 8px;
        height: 8px;
    }

    .sk-teacher-edu-no-file {
        font-size: 5px;
    }

    .sk-teacher-edu-empty {
        height: 48px !important;
    }

    .sk-teacher-edu-stats article {
        grid-template-columns: 34px minmax(0, 1fr);
        height: 32px;
        padding: 0 16px;
    }

    .sk-teacher-edu-stat-icon {
        width: 28px;
        height: 28px;
    }

    .sk-teacher-edu-stat-icon svg {
        width: 14px;
        height: 14px;
    }

    .sk-teacher-edu-stats small {
        font-size: 6px;
    }

    .sk-teacher-edu-stats strong {
        margin-top: 3px;
        font-size: 7px;
    }
}

@media (max-width: 430px) {
    .sk-teacher-detail-page #education.sk-teacher-education-tab.show,
    .sk-teacher-detail-page #work-expirence.sk-teacher-work-tab.show {
        grid-template-rows: 22px minmax(0, 1fr) 36px 8px;
        gap: 5px;
        padding: 4px 5px;
    }

    .sk-teacher-detail-page #payments.sk-teacher-payments-tab.show {
        grid-template-rows: 38px 20px minmax(0, 1fr) 36px 8px;
        gap: 4px;
        padding: 4px 5px;
    }

    .sk-teacher-detail-page #exams.sk-teacher-exams-tab.show {
        grid-template-rows: 38px 20px minmax(0, 1fr) 36px 8px;
        gap: 4px;
        padding: 4px 5px;
    }

    .sk-teacher-detail-page #attandace.content-col.tab-section.show {
        padding: 4px 5px;
    }

    .sk-teacher-edu-search {
        flex-basis: 138px;
        min-width: 96px;
        height: 22px;
        padding: 0 5px;
    }

    .sk-teacher-edu-controls {
        gap: 4px;
    }

    .sk-teacher-edu-controls .text-right-message {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sk-teacher-edu-rows {
        width: 62px;
        height: 20px;
    }

    .sk-teacher-edu-add {
        min-width: 58px;
        height: 20px;
        padding: 0 5px;
    }

    .sk-teacher-edu-table th,
    .sk-teacher-edu-table td {
        padding: 0 5px;
        font-size: 5px;
    }

    .sk-teacher-edu-doc-actions,
    .sk-teacher-edu-row-actions {
        gap: 4px;
    }

    .sk-teacher-edu-stats article {
        grid-template-columns: 26px minmax(0, 1fr);
        height: 28px;
        padding: 0 8px;
    }

    .sk-teacher-edu-stat-icon {
        width: 22px;
        height: 22px;
    }

    .sk-teacher-edu-stat-icon svg {
        width: 11px;
        height: 11px;
    }
}

.sk-parents-main {
    grid-template-rows: 58px 92px minmax(0, 1fr) 28px;
    gap: 10px;
}

.sk-parents-heading {
    align-items: center;
}

.sk-parents-add-button {
    width: 184px;
    background: #0963ff;
    box-shadow: 0 12px 26px rgba(9, 99, 255, 0.22);
}

.sk-parents-add-button:hover {
    background: #0963ff;
}

.sk-parents-overview-icon {
    display: block;
    fill: currentColor;
}

.sk-parents-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

.sk-parents-table-card {
    min-width: 0;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 40, 92, 0.05);
}

.sk-parents-filter-row {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(220px, .7fr) minmax(220px, .7fr);
    align-items: center;
    gap: 70px;
    padding: 6px 18px 10px;
    border-bottom: 1px solid #e3ebf6;
}

.sk-parents-search,
.sk-parents-select,
.sk-parents-rows {
    min-width: 0;
    border: 1px solid #d9e4f2;
    border-radius: 9px;
    background: #ffffff;
}

.sk-parents-search {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 18px;
    color: #485a83;
}

.sk-parents-search svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-parents-search input,
.sk-parents-select select,
.sk-parents-rows select {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #263861;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-parents-search input::placeholder {
    color: #6f7a96;
}

.sk-parents-select {
    height: 52px;
    padding: 0 16px;
}

.sk-parents-table-card {
    display: grid;
    grid-template-rows: 56px auto minmax(0, 1fr) 62px;
    overflow: hidden;
}

.sk-parents-table-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    min-width: 0;
    padding: 0 16px;
    border-bottom: 1px solid #e3ebf6;
}

.sk-parents-tabs {
    display: flex;
    align-items: flex-end;
    gap: 38px;
    min-width: 0;
}

.sk-parents-tabs button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 2px;
    border: 0;
    color: #263861;
    background: transparent;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-parents-tabs button.is-active {
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-parents-tabs button.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #0963ff;
}

.sk-parents-tabs span {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    color: #0963ff;
    background: #eaf3ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-parents-tabs button:nth-child(2) span {
    color: #079b3f;
    background: #dff7e8;
}

.sk-parents-table-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    min-width: 0;
    height: 56px;
}

.sk-parents-table-controls p {
    margin: 0;
    color: #33446c;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    white-space: nowrap;
}

.sk-parents-rows {
    display: block;
    width: 182px;
    height: 42px;
    padding: 0 14px;
}

.sk-parents-table-scroll {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 0;
}

.sk-parents-table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sk-parents-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9d7ea;
}

.sk-parents-table {
    width: 100%;
    min-height: 100%;
    height: auto;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #e0e8f4;
    border-radius: 9px;
    color: #071553;
}

.sk-parents-table th,
.sk-parents-table td {
    overflow: hidden;
    padding: 0 14px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parents-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 54px;
    border-bottom: 1px solid #e4ebf5;
    color: #263861;
    background: #fbfdff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parents-table td {
    height: 62px;
    border-bottom: 1px solid #e7eef7;
    color: #071553;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: 15px;
}

.sk-parents-table tbody tr:last-child td {
    border-bottom: 0;
}

.sk-parents-table th:nth-child(1),
.sk-parents-table td:nth-child(1) {
    width: 92px;
}

.sk-parents-table th:nth-child(2),
.sk-parents-table td:nth-child(2) {
    width: 17%;
}

.sk-parents-table th:nth-child(3),
.sk-parents-table td:nth-child(3) {
    width: 11%;
}

.sk-parents-table th:nth-child(4),
.sk-parents-table td:nth-child(4) {
    width: 18%;
}

.sk-parents-table th:nth-child(5),
.sk-parents-table td:nth-child(5) {
    width: 14%;
}

.sk-parents-table th:nth-child(6),
.sk-parents-table td:nth-child(6) {
    width: 15%;
}

.sk-parents-table th:nth-child(7),
.sk-parents-table td:nth-child(7) {
    width: 10%;
}

.sk-parents-table th:nth-child(8),
.sk-parents-table td:nth-child(8) {
    width: 146px;
}

.sk-parents-table strong {
    font-family: "InterBold", Arial, sans-serif;
}

.sk-parents-avatar {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
    background: #edf3fb;
    vertical-align: middle;
}

.sk-parents-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parents-status.is-active {
    color: #079b3f;
    background: #dff7e8;
}

.sk-parents-status.is-inactive {
    color: #ff1f2d;
    background: #ffe6e8;
}

.sk-parents-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-parents-icon-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.sk-parents-icon-btn:hover {
    border-color: #c8dcff;
    background: #f5f9ff;
}

.sk-parents-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parents-icon-btn svg circle {
    fill: currentColor;
    stroke: none;
}

.sk-parents-icon-btn.parent-more-btn {
    color: #071553;
}

.sk-parent-action-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    width: 196px;
    padding: 10px 0;
    border: 1px solid #dfe7f4;
    border-radius: 8px;
    color: #14245d;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 33, 67, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sk-parents-actions.is-menu-open .sk-parent-action-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sk-parents-actions .sk-parent-action-menu a,
.sk-parents-actions .sk-parent-action-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 31px;
    gap: 12px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    color: #14245d;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sk-parents-actions .sk-parent-action-menu a:hover,
.sk-parents-actions .sk-parent-action-menu button:hover {
    color: #0963ff;
    background: #f5f8ff;
}

.sk-parents-actions .sk-parent-action-menu svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parents-actions .sk-parent-action-menu svg circle {
    fill: none;
    stroke: currentColor;
}

.sk-parent-action-menu-divider {
    display: block;
    height: 1px;
    margin: 8px 14px 7px;
    background: #dfe7f4;
}

.sk-parents-actions .sk-parent-action-menu .parent-mark-inactive-btn.is-danger {
    color: #ff1f2d;
}

.sk-parents-actions .sk-parent-action-menu .parent-mark-inactive-btn.is-danger:hover {
    color: #ff1f2d;
    background: #fff4f5;
}

.sk-parents-actions .sk-parent-action-menu .parent-reactivate-btn.is-success {
    color: #16a34a;
}

.sk-parents-actions .sk-parent-action-menu .parent-reactivate-btn.is-success:hover {
    color: #16a34a;
    background: #f0fdf4;
}

.sk-parents-empty {
    height: 220px !important;
    color: #6d778f !important;
    text-align: center !important;
    font-family: "InterMedium", Arial, sans-serif !important;
}

.sk-parents-empty.is-error {
    color: #ff1f2d !important;
}

.sk-parents-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
    padding: 0 24px;
}

.parents-page-btn {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    color: #263861;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.parents-page-btn.is-active {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 8px 18px rgba(9, 99, 255, 0.18);
}

.parents-page-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parents-main > .sk-students-footer {
    border-top: 1px solid #e1e9f4;
}

.sk-parent-modal-overlay {
    background: rgba(17, 24, 42, 0.42);
    backdrop-filter: blur(3px);
}

.sk-parent-modal {
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr) 48px;
    gap: 18px;
    width: min(980px, calc(100vw - 56px));
    max-height: calc(100vh - 80px);
    padding: 24px 34px 26px;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 72px rgba(10, 23, 48, 0.24);
}

.sk-parent-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.sk-parent-modal-head h3 {
    margin: 4px 0 0;
    color: #111111;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 23px;
    line-height: 1.2;
}

.sk-parent-modal-title {
    min-width: 0;
}

.sk-parent-modal-title p {
    margin: 5px 0 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.sk-parent-modal-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    border: 1px solid #dce5f1;
    border-radius: 50%;
    color: #111111;
    background: #ffffff;
    text-decoration: none;
}

.sk-parent-modal-close:hover {
    background: #f5f8ff;
}

.sk-parent-modal-close svg,
.sk-parent-upload-main svg,
.sk-parent-cnic-actions svg,
.sk-parent-modal-save svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-modal-close svg {
    width: 22px;
    height: 22px;
}

.sk-parent-modal-body {
    display: grid;
    grid-template-columns: 182px minmax(0, 1fr);
    gap: 28px;
    min-width: 0;
    min-height: 0;
}

.sk-parent-media-pane {
    display: grid;
    grid-template-rows: 140px 38px 170px 170px;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    padding-right: 20px;
    border-right: 1px solid #dfe8f5;
}

.sk-parent-avatar-box {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #f4f6fa;
}

.sk-parent-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-parent-upload-main,
.sk-parent-cnic-upload,
.sk-parent-cnic-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-upload-main {
    width: 100%;
    border: 1px solid #0963ff;
    color: #0963ff;
}

.sk-parent-upload-main:hover,
.sk-parent-cnic-upload:hover {
    background: #f4f8ff;
}

.sk-parent-cnic-card {
    display: grid;
    grid-template-rows: 22px minmax(0, 1fr) 30px;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 10px 10px 12px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #ffffff;
}

.sk-parent-cnic-card h4 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 13px;
    line-height: 20px;
}

.sk-parent-cnic-preview {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px dashed #d5e0ee;
    border-radius: 7px;
    background: #fbfcff;
}

.sk-parent-cnic-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sk-parent-cnic-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.sk-parent-cnic-upload,
.sk-parent-cnic-remove {
    width: 100%;
    height: 30px;
    font-size: 11px;
}

.sk-parent-cnic-upload {
    border: 1px solid #0963ff;
    color: #0963ff;
}

.sk-parent-cnic-remove {
    border: 1px solid #ff3040;
    color: #ff1f2d;
}

.sk-parent-cnic-remove:hover {
    background: #fff4f5;
}

.sk-parent-upload-main svg,
.sk-parent-cnic-actions svg {
    width: 15px;
    height: 15px;
}

.sk-parent-fields-pane {
    display: grid;
    grid-template-rows: auto 70px 70px;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

.sk-parent-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 12px;
    min-width: 0;
}

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

.sk-parent-field span {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
}

.sk-parent-field input,
.sk-parent-field select,
.sk-parent-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d9e4f2;
    border-radius: 7px;
    outline: 0;
    color: #071553;
    background: #ffffff;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-field input,
.sk-parent-field select {
    height: 39px;
    padding: 0 13px;
}

.sk-parent-field textarea {
    height: 52px;
    min-height: 52px;
    max-height: 72px;
    padding: 12px 13px;
    resize: vertical;
}

.sk-parent-field input::placeholder,
.sk-parent-field textarea::placeholder {
    color: #8b95aa;
}

.sk-parent-field input:focus,
.sk-parent-field select:focus,
.sk-parent-field textarea:focus {
    border-color: #9cc1ff;
    box-shadow: 0 0 0 3px rgba(9, 99, 255, 0.08);
}

.sk-parent-field-wide {
    width: 100%;
}

.sk-parent-modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.sk-parent-modal-cancel,
.sk-parent-modal-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 45px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 15px;
}

.sk-parent-modal-cancel {
    background: #5b5b5b;
}

.sk-parent-modal-cancel:hover {
    background: #4c4c4c;
}

.sk-parent-modal-save {
    background: linear-gradient(180deg, #08b84f 0%, #07953e 100%);
}

.sk-parent-modal-save:hover {
    background: linear-gradient(180deg, #09a949 0%, #078d3b 100%);
}

.sk-parent-modal-save svg {
    width: 19px;
    height: 19px;
}

.sk-parent-modal-overlay {
    background: rgba(7, 21, 83, 0.48);
    backdrop-filter: blur(4px);
}

.sk-parent-modal-overlay .sk-parent-modal {
    grid-template-rows: 64px minmax(0, 1fr) 50px;
    gap: 14px;
    width: min(1040px, calc(100vw - 52px));
    padding: 0;
    overflow: hidden;
    border: 1px solid #d7e4f4;
    border-radius: 14px;
    background: #f6f9fe;
    box-shadow: 0 28px 80px rgba(7, 21, 83, 0.28);
}

.sk-parent-modal-overlay .sk-parent-modal-head {
    align-items: center;
    min-height: 0;
    padding: 0 18px 0 24px;
    border-bottom: 1px solid #dbe6f5;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
}

.sk-parent-modal-overlay .sk-parent-modal-title {
    min-width: 0;
}

.sk-parent-modal-overlay .sk-parent-modal-title h3 {
    margin: 0;
    color: #071553;
    font-size: 22px;
}

.sk-parent-modal-overlay .sk-parent-modal-title p {
    margin: 5px 0 0;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.sk-parent-modal-overlay .sk-parent-modal-close {
    width: 36px;
    height: 36px;
    border-color: #cfe0f5;
    border-radius: 9px;
    color: #071553;
    background: #ffffff;
}

.sk-parent-modal-overlay .sk-parent-modal-close:hover {
    color: #0963ff;
    border-color: #b9d4ff;
    background: #edf5ff;
}

.sk-parent-modal-overlay .sk-parent-modal-body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px;
    padding: 0 18px;
}

.sk-parent-modal-overlay .sk-parent-media-pane,
.sk-parent-modal-overlay .sk-parent-fields-pane {
    min-width: 0;
    min-height: 0;
    border: 1px solid #dfe8f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(16, 40, 92, 0.055);
}

.sk-parent-modal-overlay .sk-parent-media-pane {
    grid-template-rows: 132px 36px minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-right: 1px solid #dfe8f5;
}

.sk-parent-modal-overlay .sk-parent-avatar-box {
    border-color: #d8e6f7;
    border-radius: 10px;
    background: #edf5ff;
}

.sk-parent-modal-overlay .sk-parent-upload-main {
    height: 36px;
    border-color: #0963ff;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
}

.sk-parent-modal-overlay .sk-parent-upload-main:hover {
    color: #ffffff;
    background: #0963ff;
}

.sk-parent-modal-overlay .sk-parent-cnic-card {
    grid-template-rows: 22px minmax(0, 1fr) 30px;
    gap: 8px;
    padding: 9px;
    border-color: #dfe8f5;
    border-radius: 10px;
    background: #fbfdff;
}

.sk-parent-modal-overlay .sk-parent-cnic-card h4 {
    color: #071553;
    font-size: 12px;
}

.sk-parent-modal-overlay .sk-parent-cnic-preview {
    border-color: #cfddef;
    border-style: solid;
    background: #ffffff;
}

.sk-parent-modal-overlay .sk-parent-cnic-upload {
    border-color: #0963ff;
    color: #0963ff;
    background: #ffffff;
}

.sk-parent-modal-overlay .sk-parent-cnic-upload:hover {
    color: #ffffff;
    background: #0963ff;
}

.sk-parent-modal-overlay .sk-parent-cnic-remove {
    border-color: #ffd0d6;
    color: #e11119;
    background: #fff7f8;
}

.sk-parent-modal-overlay .sk-parent-cnic-remove:hover {
    color: #ffffff;
    border-color: #e11119;
    background: #e11119;
}

.sk-parent-modal-overlay .sk-parent-fields-pane {
    grid-template-rows: minmax(0, 1fr) 68px 68px;
    gap: 10px;
    padding: 14px;
    overflow: hidden;
}

.sk-parent-modal-overlay .sk-parent-field-grid {
    column-gap: 18px;
    row-gap: 10px;
    align-content: start;
}

.sk-parent-modal-overlay .sk-parent-field {
    gap: 6px;
}

.sk-parent-modal-overlay .sk-parent-field span {
    color: #263861;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-parent-modal-overlay .sk-parent-field input,
.sk-parent-modal-overlay .sk-parent-field select,
.sk-parent-modal-overlay .sk-parent-field textarea {
    border-color: #d7e1ee;
    border-radius: 8px;
    color: #071553;
    background: #fbfcff;
    font-family: "InterMedium", Arial, sans-serif;
}

.sk-parent-modal-overlay .sk-parent-field input,
.sk-parent-modal-overlay .sk-parent-field select {
    height: 38px;
}

.sk-parent-modal-overlay .sk-parent-field textarea {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    resize: none;
}

.sk-parent-modal-overlay .sk-parent-field input:focus,
.sk-parent-modal-overlay .sk-parent-field select:focus,
.sk-parent-modal-overlay .sk-parent-field textarea:focus {
    border-color: #0963ff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(9, 99, 255, 0.1);
}

.sk-parent-modal-overlay .sk-parent-modal-actions {
    gap: 14px;
    padding: 0 18px 16px;
}

.sk-parent-modal-overlay .sk-parent-modal-cancel,
.sk-parent-modal-overlay .sk-parent-modal-save {
    height: 42px;
    border-radius: 8px;
}

.sk-parent-modal-overlay .sk-parent-modal-cancel {
    color: #263861;
    border: 1px solid #d4dfed;
    background: #ffffff;
}

.sk-parent-modal-overlay .sk-parent-modal-cancel:hover {
    color: #071553;
    background: #eef3fb;
}

.sk-parent-modal-overlay .sk-parent-modal-save {
    background: #0963ff;
    box-shadow: 0 12px 24px rgba(9, 99, 255, 0.2);
}

.sk-parent-modal-overlay .sk-parent-modal-save:hover {
    background: #0755db;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-parent-modal {
        grid-template-rows: 46px minmax(0, 1fr) 40px;
        gap: 12px;
        width: min(900px, calc(100vw - 40px));
        max-height: calc(100vh - 40px);
        padding: 18px 24px 20px;
    }

    .sk-parent-modal-head h3 {
        margin-top: 2px;
        font-size: 20px;
    }

    .sk-parent-modal-close {
        width: 34px;
        height: 34px;
    }

    .sk-parent-modal-body {
        grid-template-columns: 164px minmax(0, 1fr);
        gap: 22px;
    }

    .sk-parent-media-pane {
        grid-template-rows: 124px 34px 150px 150px;
        gap: 10px;
        padding-right: 16px;
    }

    .sk-parent-cnic-card {
        padding: 8px;
    }

    .sk-parent-field-grid {
        column-gap: 24px;
        row-gap: 9px;
    }

    .sk-parent-field {
        gap: 6px;
    }

    .sk-parent-field input,
    .sk-parent-field select {
        height: 35px;
    }

    .sk-parent-field textarea {
        height: 46px;
        min-height: 46px;
    }

    .sk-parent-fields-pane {
        grid-template-rows: auto 62px 62px;
        gap: 9px;
    }

    .sk-parent-modal-cancel,
    .sk-parent-modal-save {
        height: 40px;
    }

    .sk-parent-modal-overlay .sk-parent-modal {
        grid-template-rows: 54px minmax(0, 1fr) 44px;
        gap: 10px;
        width: min(900px, calc(100vw - 36px));
        max-height: calc(100vh - 36px);
    }

    .sk-parent-modal-overlay .sk-parent-modal-head {
        padding: 0 14px 0 18px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-title h3 {
        font-size: 18px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-title p {
        margin-top: 3px;
        font-size: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-close {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-body {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 10px;
        padding: 0 14px;
    }

    .sk-parent-modal-overlay .sk-parent-media-pane {
        grid-template-rows: 106px 31px minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
    }

    .sk-parent-modal-overlay .sk-parent-upload-main,
    .sk-parent-modal-overlay .sk-parent-cnic-upload,
    .sk-parent-modal-overlay .sk-parent-cnic-remove {
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-cnic-card {
        gap: 6px;
        padding: 7px;
    }

    .sk-parent-modal-overlay .sk-parent-cnic-card h4 {
        font-size: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-fields-pane {
        grid-template-rows: minmax(0, 1fr) 58px 58px;
        gap: 8px;
        padding: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-field-grid {
        column-gap: 14px;
        row-gap: 7px;
    }

    .sk-parent-modal-overlay .sk-parent-field span {
        font-size: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-field input,
    .sk-parent-modal-overlay .sk-parent-field select {
        height: 30px;
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-field textarea {
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-actions {
        gap: 10px;
        padding: 0 14px 12px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-cancel,
    .sk-parent-modal-overlay .sk-parent-modal-save {
        height: 34px;
        border-radius: 7px;
        font-size: 12px;
    }

    .sk-parents-main {
        grid-template-rows: 48px 62px minmax(0, 1fr) 20px;
        gap: 8px;
    }

    .sk-parents-add-button {
        width: 136px;
    }

    .sk-parents-panel {
        grid-template-rows: minmax(0, 1fr);
    }

    .sk-parents-filter-row {
        grid-template-columns: minmax(260px, 1.1fr) minmax(170px, .7fr) minmax(170px, .7fr);
        gap: 54px;
        padding: 7px 14px;
    }

    .sk-parents-search,
    .sk-parents-select {
        height: 40px;
        border-radius: 8px;
    }

    .sk-parents-search {
        padding: 0 14px;
    }

    .sk-parents-search svg {
        width: 18px;
        height: 18px;
        margin-right: 12px;
    }

    .sk-parents-search input,
    .sk-parents-select select,
    .sk-parents-rows select {
        font-size: 12px;
    }

    .sk-parents-select {
        padding: 0 12px;
    }

    .sk-parents-table-card {
        grid-template-rows: 42px auto minmax(0, 1fr) 46px;
        border-radius: 11px;
    }

    .sk-parents-table-top {
        padding: 0 14px;
    }

    .sk-parents-tabs {
        gap: 28px;
    }

    .sk-parents-tabs button {
        height: 42px;
        gap: 10px;
        font-size: 12px;
    }

    .sk-parents-tabs span {
        min-width: 24px;
        height: 22px;
        padding: 0 7px;
    }

    .sk-parents-table-controls {
        gap: 22px;
        height: 42px;
    }

    .sk-parents-table-controls p {
        font-size: 11px;
    }

    .sk-parents-rows {
        width: 140px;
        height: 34px;
        padding: 0 10px;
        border-radius: 8px;
    }

    .sk-parents-table-scroll {
        padding: 10px 14px 0;
    }

    .sk-parents-table th {
        height: 39px;
        font-size: 11px;
    }

    .sk-parents-table td {
        height: 45px;
        padding: 0 10px;
        font-size: 11px;
    }

    .sk-parents-avatar {
        width: 35px;
        height: 35px;
        border-radius: 8px;
    }

    .sk-parents-status {
        min-width: 56px;
        height: 24px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 10px;
    }

    .sk-parents-actions {
        gap: 7px;
    }

    .sk-parents-icon-btn {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    .sk-parents-icon-btn svg {
        width: 16px;
        height: 16px;
    }

    .sk-parents-pagination {
        gap: 10px;
        padding: 0 18px;
    }

    .parents-page-btn {
        min-width: 30px;
        height: 30px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 11px;
    }

    .parents-page-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Keep the Parents workspace compact at the intermediate tablet breakpoint.
   At 768px the fixed sidebar leaves roughly 552px for page content, so every
   track must be allowed to shrink inside that width. */
@media (min-width: 761px) and (max-width: 1280px) {
    .sk-parents-table-top {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(6px, 1vw, 10px);
        padding-inline: clamp(8px, 1.5vw, 12px);
    }

    .sk-parents-tabs {
        gap: clamp(6px, 1.2vw, 12px);
    }

    .sk-parents-tabs button {
        gap: clamp(4px, .8vw, 7px);
        padding-inline: 0;
        font-size: clamp(10px, 1.45vw, 12px);
    }

    .sk-parents-tabs span {
        min-width: 20px;
        height: 19px;
        padding-inline: 5px;
        font-size: 9px;
    }

    .sk-parents-table-controls {
        gap: clamp(6px, 1vw, 10px);
    }

    .sk-parents-table-controls p {
        font-size: clamp(8px, 1.15vw, 10px);
    }

    .sk-parents-rows {
        width: clamp(104px, 16vw, 124px);
        padding-inline: 8px;
    }

    .sk-parents-filter-row {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr) minmax(0, .65fr);
        gap: clamp(6px, 1.2vw, 10px);
        padding-inline: clamp(8px, 1.5vw, 12px);
    }

    .sk-parents-search {
        padding-inline: clamp(8px, 1.4vw, 12px);
    }

    .sk-parents-search svg {
        margin-right: clamp(6px, 1vw, 9px);
    }

    .sk-parents-select {
        padding-inline: clamp(7px, 1.2vw, 10px);
    }

    .sk-parents-table-scroll {
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .sk-parents-table {
        min-width: 720px;
        overflow: visible;
    }

    .sk-parents-table th:nth-child(8),
    .sk-parents-table td:nth-child(8) {
        position: sticky;
        right: 0;
        width: 112px;
        background: #ffffff;
        box-shadow: -8px 0 12px rgba(16, 40, 92, 0.05);
    }

    .sk-parents-table th:nth-child(8) {
        z-index: 3;
        background: #fbfdff;
    }
}

@media (max-width: 760px) {
    .sk-parent-modal {
        display: flex;
        flex-direction: column;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 28px);
        padding: 16px;
        overflow-y: auto;
    }

    .sk-parent-modal-body {
        grid-template-columns: 1fr;
        gap: 16px;
        overflow: visible;
    }

    .sk-parent-media-pane {
        grid-template-columns: 118px minmax(0, 1fr);
        grid-template-rows: 118px auto auto;
        gap: 10px;
        padding-right: 0;
        border-right: 0;
    }

    .sk-parent-upload-main {
        align-self: end;
    }

    .sk-parent-cnic-card {
        grid-column: 1 / -1;
        min-height: 142px;
    }

    .sk-parent-field-grid {
        grid-template-columns: 1fr;
    }

    .sk-parent-fields-pane {
        display: flex;
        flex-direction: column;
    }

    .sk-parent-modal-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-modal {
        display: grid;
        grid-template-rows: 42px minmax(0, 1fr) 34px;
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        overflow: hidden;
        border-radius: 9px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-head {
        padding: 0 8px 0 10px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-title h3 {
        font-size: 11px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-title p {
        margin-top: 2px;
        font-size: 6px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-close {
        width: 23px;
        height: 23px;
        border-radius: 6px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-close svg {
        width: 12px;
        height: 12px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-body {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 6px;
        padding: 0 6px;
        overflow: hidden;
    }

    .sk-parent-modal-overlay .sk-parent-media-pane {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 58px 18px minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px;
        padding: 5px;
        border-right: 1px solid #dfe8f5;
    }

    .sk-parent-modal-overlay .sk-parent-upload-main {
        align-self: stretch;
        height: 18px;
    }

    .sk-parent-modal-overlay .sk-parent-upload-main,
    .sk-parent-modal-overlay .sk-parent-cnic-upload,
    .sk-parent-modal-overlay .sk-parent-cnic-remove {
        gap: 3px;
        border-radius: 5px;
        font-size: 5px;
    }

    .sk-parent-modal-overlay .sk-parent-upload-main svg,
    .sk-parent-modal-overlay .sk-parent-cnic-actions svg {
        width: 7px;
        height: 7px;
    }

    .sk-parent-modal-overlay .sk-parent-cnic-card {
        grid-column: auto;
        grid-template-rows: 11px minmax(0, 1fr) 14px;
        gap: 3px;
        min-height: 0;
        padding: 4px;
        border-radius: 6px;
    }

    .sk-parent-modal-overlay .sk-parent-cnic-card h4 {
        font-size: 5px;
        line-height: 10px;
    }

    .sk-parent-modal-overlay .sk-parent-cnic-actions {
        gap: 3px;
    }

    .sk-parent-modal-overlay .sk-parent-cnic-upload,
    .sk-parent-modal-overlay .sk-parent-cnic-remove {
        height: 14px;
    }

    .sk-parent-modal-overlay .sk-parent-fields-pane {
        display: grid;
        grid-template-rows: minmax(0, 1fr) 33px 33px;
        gap: 4px;
        padding: 5px;
        overflow: hidden;
    }

    .sk-parent-modal-overlay .sk-parent-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 5px;
        row-gap: 3px;
    }

    .sk-parent-modal-overlay .sk-parent-field {
        gap: 2px;
    }

    .sk-parent-modal-overlay .sk-parent-field span {
        font-size: 5px;
    }

    .sk-parent-modal-overlay .sk-parent-field input,
    .sk-parent-modal-overlay .sk-parent-field select {
        height: 15px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-modal-overlay .sk-parent-field textarea {
        height: 22px;
        min-height: 22px;
        max-height: 22px;
        padding: 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-actions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 0 6px 6px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-cancel,
    .sk-parent-modal-overlay .sk-parent-modal-save {
        height: 24px;
        border-radius: 5px;
        font-size: 7px;
    }

    .sk-parent-modal-overlay .sk-parent-modal-save svg {
        width: 10px;
        height: 10px;
    }

    .sk-parents-main {
        grid-template-rows: 30px 38px minmax(0, 1fr) 12px;
        gap: 4px;
    }

    .sk-parents-add-button {
        width: 80px;
    }

    .sk-parents-panel {
        grid-template-rows: minmax(0, 1fr);
    }

    .sk-parents-filter-row {
        grid-template-columns: minmax(110px, 1.1fr) minmax(72px, .7fr) minmax(72px, .7fr);
        gap: 7px;
        padding: 6px 8px;
    }

    .sk-parents-search,
    .sk-parents-select {
        height: 25px;
        border-radius: 6px;
    }

    .sk-parents-search {
        padding: 0 7px;
    }

    .sk-parents-search svg {
        width: 11px;
        height: 11px;
        margin-right: 5px;
    }

    .sk-parents-search input,
    .sk-parents-select select,
    .sk-parents-rows select {
        font-size: 6px;
    }

    .sk-parents-select {
        padding: 0 5px;
    }

    .sk-parents-table-card {
        grid-template-rows: 24px auto minmax(0, 1fr) 24px;
        border-radius: 8px;
    }

    .sk-parents-table-top {
        gap: 6px;
        padding: 0 8px;
    }

    .sk-parents-tabs {
        gap: 12px;
    }

    .sk-parents-tabs button {
        height: 24px;
        gap: 5px;
        font-size: 7px;
    }

    .sk-parents-tabs button.is-active::after {
        height: 2px;
    }

    .sk-parents-tabs span {
        min-width: 15px;
        height: 14px;
        padding: 0 4px;
    }

    .sk-parents-table-controls {
        gap: 7px;
        height: 24px;
    }

    .sk-parents-table-controls p {
        font-size: 5px;
    }

    .sk-parents-rows {
        width: 64px;
        height: 20px;
        padding: 0 4px;
        border-radius: 5px;
    }

    .sk-parents-table-scroll {
        padding: 5px 8px 0;
    }

    .sk-parents-table th,
    .sk-parents-table td {
        padding: 0 4px;
    }

    .sk-parents-table th {
        height: 18px;
        font-size: 5px;
    }

    .sk-parents-table td {
        height: 25px;
        font-size: 5px;
    }

    .sk-parents-table th:nth-child(1),
    .sk-parents-table td:nth-child(1) {
        width: 36px;
    }

    .sk-parents-table th:nth-child(8),
    .sk-parents-table td:nth-child(8) {
        width: 57px;
    }

    .sk-parents-avatar {
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }

    .sk-parents-status {
        min-width: 30px;
        height: 13px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parents-actions {
        gap: 3px;
    }

    .sk-parents-icon-btn {
        width: 15px;
        height: 15px;
        border-radius: 4px;
    }

    .sk-parents-icon-btn svg {
        width: 8px;
        height: 8px;
    }

    .sk-parents-pagination {
        gap: 4px;
        padding: 0 10px;
    }

    .parents-page-btn {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 6px;
    }

    .parents-page-btn svg {
        width: 9px;
        height: 9px;
    }
}

@media (max-height: 430px) {
    .sk-parents-main {
        grid-template-rows: 30px 32px minmax(0, 1fr) 11px;
        gap: 4px;
    }

    .sk-parents-panel {
        grid-template-rows: minmax(0, 1fr);
    }

    .sk-parents-filter-row {
        grid-template-columns: minmax(155px, 1.1fr) minmax(92px, .7fr) minmax(92px, .7fr);
        gap: 8px;
        padding: 4px 8px;
    }

    .sk-parents-search,
    .sk-parents-select {
        height: 21px;
    }

    .sk-parents-table-card {
        grid-template-rows: 21px auto minmax(0, 1fr) 20px;
    }

    .sk-parents-tabs button {
        height: 21px;
        font-size: 6px;
    }

    .sk-parents-table-controls {
        height: 21px;
    }

    .sk-parents-table-scroll {
        padding: 4px 8px 0;
    }

    .sk-parents-table th {
        height: 13px;
        font-size: 5px;
    }

    .sk-parents-table td {
        height: 16px;
        font-size: 5px;
    }

    .sk-parents-avatar {
        width: 13px;
        height: 13px;
    }

    .sk-parents-status {
        min-width: 26px;
        height: 11px;
        font-size: 5px;
    }

    .sk-parents-icon-btn {
        width: 12px;
        height: 12px;
    }

    .sk-parents-icon-btn svg {
        width: 7px;
        height: 7px;
    }

    .parents-page-btn {
        min-width: 14px;
        height: 14px;
        font-size: 5px;
    }
}

.sk-subjects-main {
    grid-template-rows: 58px 92px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 30px 36px 0;
}

.sk-subjects-heading {
    align-items: center;
}

.sk-subjects-heading h1 {
    font-size: 38px;
}

.sk-subjects-add {
    width: 198px;
    background: #0963ff;
    box-shadow: 0 12px 26px rgba(9, 99, 255, 0.22);
}

.sk-subjects-add:hover {
    background: #0963ff;
}

.sk-subjects-add svg,
.sk-subjects-filter svg,
.sk-subjects-actions svg,
.subjects-page-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-subjects-add svg {
    width: 26px;
    height: 26px;
}

.sk-subjects-stats {
    gap: 24px;
}

.sk-subjects-stats article {
    height: 82px;
}

.sk-subjects-stats article > span {
    border-radius: 50%;
}

.sk-subjects-stats svg {
    width: 32px;
    height: 32px;
}

.sk-subjects-overview-icon {
    display: block;
    fill: currentColor;
}

.sk-subjects-icon-cut {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-subjects-panel {
    display: grid;
    grid-template-rows: 56px minmax(0, 1fr) 62px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(16, 40, 92, 0.05);
}

.sk-subjects-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 0 16px;
    border-bottom: 1px solid #e3ebf6;
}

.sk-subjects-search {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #d9e4f2;
    border-radius: 9px;
    color: #485a83;
    background: #ffffff;
}

.sk-subjects-search svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.sk-subjects-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #263861;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 16px;
}

.sk-subjects-search input::placeholder {
    color: #6f7a96;
}

.sk-subjects-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}

.sk-subjects-controls p {
    margin: 0;
    color: #33446c;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    white-space: nowrap;
}

.sk-subjects-rows,
.sk-subjects-filter {
    height: 52px;
    border: 1px solid #d9e4f2;
    border-radius: 9px;
    color: #263861;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-subjects-rows {
    width: 182px;
    padding: 0 14px;
}

.sk-subjects-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 112px;
    color: #0963ff;
    cursor: pointer;
}

.sk-subjects-filter svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
}

.sk-subjects-hidden-filter {
    display: none;
}

.sk-subjects-table-wrap {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px 0;
}

.sk-subjects-table {
    width: 100%;
    min-height: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e8f4;
    border-radius: 9px;
    color: #071553;
}

.sk-subjects-table th,
.sk-subjects-table td {
    overflow: hidden;
    padding: 0 14px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-subjects-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 54px;
    border-bottom: 1px solid #e4ebf5;
    color: #263861;
    background: #fbfdff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-subjects-table td {
    height: 62px;
    border-bottom: 1px solid #e7eef7;
    font-family: "InterRegular", Arial, sans-serif;
    font-size: 15px;
}

.sk-subjects-table tbody tr:last-child td {
    border-bottom: 0;
}

.sk-subjects-table th:nth-child(1),
.sk-subjects-table td:nth-child(1) {
    width: 14%;
}

.sk-subjects-table th:nth-child(2),
.sk-subjects-table td:nth-child(2) {
    width: 24%;
}

.sk-subjects-table th:nth-child(3),
.sk-subjects-table td:nth-child(3) {
    width: 16%;
}

.sk-subjects-table th:nth-child(4),
.sk-subjects-table td:nth-child(4) {
    width: 18%;
}

.sk-subjects-table th:nth-child(5),
.sk-subjects-table td:nth-child(5) {
    width: 12%;
}

.sk-subjects-table th:nth-child(6),
.sk-subjects-table td:nth-child(6) {
    width: 140px;
}

.sk-subjects-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-subjects-status.is-active {
    color: #079b3f;
    background: #dff7e8;
}

.sk-subjects-status.is-inactive {
    color: #ff1f2d;
    background: #ffe6e8;
}

.sk-subjects-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-subjects-actions button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    cursor: pointer;
}

.sk-subjects-actions button:hover {
    border-color: #c8dcff;
    background: #f5f9ff;
}

.sk-subjects-actions svg {
    width: 20px;
    height: 20px;
}

.sk-subjects-empty {
    height: 220px !important;
    color: #6d778f !important;
    text-align: center !important;
    font-family: "InterMedium", Arial, sans-serif !important;
}

.sk-subjects-empty.is-error {
    color: #ff1f2d !important;
}

.sk-subjects-empty.is-error span {
    display: block;
    margin-bottom: 12px;
}

.sk-subjects-retry {
    min-width: 76px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #0963ff;
    border-radius: 8px;
    color: #ffffff;
    background: #0963ff;
    font: 12px "InterSemiBold", Arial, sans-serif;
    cursor: pointer;
}

.sk-subjects-retry:hover {
    background: #0754d8;
}

.sk-subjects-retry:focus-visible {
    outline: 3px solid rgba(9, 99, 255, 0.28);
    outline-offset: 2px;
}

.sk-subjects-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    padding: 0 24px;
}

.subjects-page-btn {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    color: #263861;
    background: #ffffff;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.subjects-page-btn.is-active {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
    box-shadow: 0 8px 18px rgba(9, 99, 255, 0.18);
}

.subjects-page-btn svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-subjects-main {
        grid-template-rows: 48px 62px minmax(0, 1fr) 20px;
        gap: 8px;
        padding: 20px 30px 0;
    }

    .sk-subjects-heading h1 {
        font-size: 22px;
    }

    .sk-subjects-add {
        width: 156px;
        height: 42px;
        font-size: 15px;
    }

    .sk-subjects-add svg {
        width: 21px;
        height: 21px;
    }

    .sk-subjects-stats {
        gap: 18px;
    }

    .sk-subjects-stats article {
        height: 62px;
    }

    .sk-subjects-stats article > span {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .sk-subjects-stats svg {
        width: 24px;
        height: 24px;
    }

    .sk-subjects-panel {
        grid-template-rows: 42px minmax(0, 1fr) 46px;
        border-radius: 11px;
    }

    .sk-subjects-toolbar {
        grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
        padding: 0 14px;
    }

    .sk-subjects-search,
    .sk-subjects-rows,
    .sk-subjects-filter {
        height: 34px;
        border-radius: 8px;
        font-size: 11px;
    }

    .sk-subjects-search {
        padding: 0 14px;
    }

    .sk-subjects-search svg {
        width: 18px;
        height: 18px;
        margin-right: 12px;
    }

    .sk-subjects-controls {
        gap: 10px;
    }

    .sk-subjects-controls p {
        font-size: 11px;
    }

    .sk-subjects-rows {
        width: 140px;
        padding: 0 10px;
    }

    .sk-subjects-filter {
        width: 90px;
    }

    .sk-subjects-table-wrap {
        padding: 10px 14px 0;
    }

    .sk-subjects-table th {
        height: 39px;
        font-size: 11px;
    }

    .sk-subjects-table td {
        height: 45px;
        padding: 0 10px;
        font-size: 11px;
    }

    .sk-subjects-status {
        min-width: 56px;
        height: 24px;
        padding: 0 9px;
        font-size: 10px;
    }

    .sk-subjects-actions {
        gap: 7px;
    }

    .sk-subjects-actions button {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    .sk-subjects-pagination {
        gap: 10px;
        padding: 0 18px;
    }

    .subjects-page-btn {
        min-width: 30px;
        height: 30px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 11px;
    }

    .subjects-page-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 760px) {
    .sk-subjects-main {
        grid-template-rows: 30px 38px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 9px 10px 0;
    }

    .sk-subjects-heading h1 {
        font-size: 13px;
    }

    .sk-subjects-add {
        width: 88px;
        height: 27px;
        gap: 5px;
        border-radius: 8px;
        font-size: 8px;
    }

    .sk-subjects-add svg {
        width: 13px;
        height: 13px;
    }

    .sk-subjects-stats {
        gap: 6px;
    }

    .sk-subjects-stats article {
        height: 38px;
    }

    .sk-subjects-stats article > span {
        width: 19px;
        height: 19px;
        border-radius: 50%;
    }

    .sk-subjects-stats svg {
        width: 13px;
        height: 13px;
    }

    .sk-subjects-panel {
        grid-template-rows: 20px minmax(0, 1fr) 24px;
        border-radius: 8px;
    }

    .sk-subjects-toolbar {
        grid-template-columns: minmax(105px, 1fr) minmax(0, 1.35fr);
        gap: 5px;
        padding: 0 8px;
    }

    .sk-subjects-search,
    .sk-subjects-rows,
    .sk-subjects-filter {
        height: 20px;
        border-radius: 6px;
        font-size: 5px;
    }

    .sk-subjects-search {
        padding: 0 7px;
    }

    .sk-subjects-search svg {
        width: 11px;
        height: 11px;
        margin-right: 5px;
    }

    .sk-subjects-controls {
        gap: 4px;
    }

    .sk-subjects-controls p {
        margin-right: 2px;
        font-size: 5px;
    }

    .sk-subjects-rows {
        width: 64px;
        padding: 0 4px;
    }

    .sk-subjects-filter {
        width: 38px;
        gap: 2px;
    }

    .sk-subjects-filter svg {
        width: 8px;
        height: 8px;
    }

    .sk-subjects-table-wrap {
        padding: 5px 8px 0;
    }

    .sk-subjects-table th {
        height: 18px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-subjects-table td {
        height: 25px;
        padding: 0 4px;
        font-size: 5px;
    }

    .sk-subjects-table th:nth-child(6),
    .sk-subjects-table td:nth-child(6) {
        width: 50px;
    }

    .sk-subjects-status {
        min-width: 30px;
        height: 13px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-subjects-actions {
        gap: 3px;
    }

    .sk-subjects-actions button {
        width: 15px;
        height: 15px;
        border-radius: 4px;
    }

    .sk-subjects-actions svg {
        width: 8px;
        height: 8px;
    }

    .sk-subjects-pagination {
        gap: 4px;
        padding: 0 10px;
    }

    .subjects-page-btn {
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 6px;
    }

    .subjects-page-btn svg {
        width: 9px;
        height: 9px;
    }
}

@media (max-height: 430px) {
    .sk-subjects-panel {
        grid-template-rows: 21px minmax(0, 1fr) 20px;
    }

    .sk-subjects-search,
    .sk-subjects-rows,
    .sk-subjects-filter {
        height: 21px;
    }

    .sk-subjects-table-wrap {
        padding: 4px 8px 0;
    }

    .sk-subjects-table th {
        height: 13px;
        font-size: 5px;
    }

    .sk-subjects-table td {
        height: 16px;
        font-size: 5px;
    }

    .sk-subjects-status {
        min-width: 26px;
        height: 11px;
        font-size: 5px;
    }

    .sk-subjects-actions button {
        width: 12px;
        height: 12px;
    }

    .sk-subjects-actions svg {
        width: 7px;
        height: 7px;
    }

    .subjects-page-btn {
        min-width: 14px;
        height: 14px;
        font-size: 5px;
    }
}

#subject_form_overlay.sk-subject-modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 18, 31, 0.58);
    backdrop-filter: blur(2px);
}

#subject_form_overlay.sk-subject-modal-overlay:target {
    display: flex;
}

.sk-subject-modal {
    width: min(900px, calc(100vw - 52px));
    max-height: calc(100vh - 52px);
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    color: var(--sk-text);
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(8, 13, 31, 0.30);
    overflow: hidden;
}

.sk-subject-modal-form {
    display: grid;
    grid-template-rows: 92px minmax(0, 1fr) 74px;
    width: 100%;
    max-height: calc(100vh - 52px);
    min-height: 0;
    margin: 0;
}

.sk-subject-modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 18px;
    padding: 20px 28px 15px 34px;
}

.sk-subject-modal-title {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.sk-subject-modal-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: var(--sk-blue);
    background: var(--sk-blue-soft);
}

.sk-subject-modal-icon svg,
.sk-subject-modal-close svg,
.sk-subject-save svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-subject-modal-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2.2;
}

.sk-subject-modal-header h3 {
    margin: 0 0 7px;
    color: var(--sk-text);
    font-family: 'InterBold', sans-serif;
    font-size: 25px;
    line-height: 1;
}

.sk-subject-modal-header p {
    margin: 0;
    color: var(--sk-muted);
    font-family: 'InterMedium', sans-serif;
    font-size: 14px;
}

.sk-subject-modal-close {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #d7e0ee;
    border-radius: 9px;
    color: var(--sk-text);
    background: #ffffff;
    cursor: pointer;
}

.sk-subject-modal-close svg {
    width: 19px;
    height: 19px;
    stroke-width: 2;
}

.sk-subject-modal-body {
    display: grid;
    grid-template-columns: 194px minmax(0, 1fr);
    gap: 28px;
    padding: 0 34px 14px;
    min-height: 0;
    overflow: hidden;
}

.sk-subject-modal-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--sk-line);
    border-radius: 12px;
    background: #fbfcff;
    color: var(--sk-muted);
    text-align: center;
}

.sk-subject-book {
    display: grid;
    place-items: center;
    width: 118px;
    height: 90px;
    margin-bottom: 18px;
}

.sk-subject-book svg {
    width: 110px;
    height: auto;
    filter: drop-shadow(0 10px 14px rgba(9, 99, 255, 0.16));
}

.sk-subject-modal-art p {
    margin: 0;
    color: var(--sk-muted);
    font-family: 'InterSemiBold', sans-serif;
    font-size: 13px;
    line-height: 1.42;
}

.sk-subject-modal-art > span {
    width: 128px;
    height: 1px;
    margin-top: 26px;
    background: var(--sk-line);
}

.sk-subject-modal-fields {
    min-width: 0;
    min-height: 0;
    padding-right: 2px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6d4ea transparent;
}

.sk-subject-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 30px;
}

.sk-subject-field,
.sk-subject-classes {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.sk-subject-field > span,
.sk-subject-classes > span {
    color: var(--sk-text);
    font-family: 'InterBold', sans-serif;
    font-size: 13px;
    line-height: 1;
}

.sk-subject-field b,
.sk-subject-classes b {
    color: #f01624;
}

.sk-subject-field input,
.sk-subject-field select,
.sk-subject-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d7e0ee;
    border-radius: 7px;
    background: #ffffff;
    color: #0b1238;
    font-family: 'InterMedium', sans-serif;
    font-size: 14px;
    outline: none;
}

.sk-subject-field input,
.sk-subject-field select {
    height: 44px;
    padding: 0 14px;
}

.sk-subject-field textarea {
    height: 92px;
    padding: 13px 14px;
    resize: none;
    line-height: 1.45;
}

.sk-subject-field input::placeholder,
.sk-subject-field textarea::placeholder {
    color: #7b869e;
    opacity: 1;
}

.sk-subject-field select {
    appearance: auto;
}

.sk-subject-classes {
    margin: 18px 0 22px;
}

.sk-subject-hidden-class {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sk-subject-class-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
    min-height: 28px;
}

.sk-subject-class-checks > span {
    color: #68748e;
    font-family: 'InterMedium', sans-serif;
    font-size: 13px;
}

.sk-subject-class-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sk-text);
    font-family: 'InterSemiBold', sans-serif;
    font-size: 14px;
    cursor: pointer;
}

.sk-subject-class-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sk-subject-class-check span {
    position: relative;
    width: 19px;
    height: 19px;
    border: 1px solid #b8c4da;
    border-radius: 4px;
    background: #ffffff;
}

.sk-subject-class-check input:checked + span {
    border-color: var(--sk-blue);
    background: var(--sk-blue);
}

.sk-subject-class-check input:checked + span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sk-subject-class-check em {
    font-style: normal;
}

.sk-subject-notes {
    margin-top: 18px;
}

.sk-subject-teachers {
    display: none;
}

.sk-subject-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0 34px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--sk-line);
}

.sk-subject-cancel,
.sk-subject-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    border-radius: 8px;
    font-family: 'InterBold', sans-serif;
    font-size: 15px;
    cursor: pointer;
}

.sk-subject-cancel {
    min-width: 126px;
    border: 1px solid #b8c4da;
    color: var(--sk-text);
    background: #ffffff;
}

.sk-subject-save {
    min-width: 174px;
    border: 0;
    color: #ffffff;
    background: #299b46;
    box-shadow: 0 10px 18px rgba(41, 155, 70, 0.2);
}

.sk-subject-save svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-subject-modal {
        width: min(740px, calc(100vw - 36px));
        max-height: calc(100vh - 36px);
        border-radius: 11px;
    }

    .sk-subject-modal-form {
        grid-template-rows: 70px minmax(0, 1fr) 56px;
        max-height: calc(100vh - 36px);
    }

    .sk-subject-modal-header {
        grid-template-columns: minmax(0, 1fr) 34px;
        gap: 13px;
        padding: 14px 22px 10px 28px;
    }

    .sk-subject-modal-title {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
    }

    .sk-subject-modal-icon {
        width: 44px;
        height: 44px;
    }

    .sk-subject-modal-icon svg {
        width: 25px;
        height: 25px;
    }

    .sk-subject-modal-header h3 {
        margin-bottom: 4px;
        font-size: 20px;
    }

    .sk-subject-modal-header p {
        font-size: 11px;
    }

    .sk-subject-modal-close {
        width: 33px;
        height: 33px;
        border-radius: 7px;
    }

    .sk-subject-modal-body {
        grid-template-columns: 158px minmax(0, 1fr);
        gap: 22px;
        padding: 0 28px 10px;
    }

    .sk-subject-modal-art {
        min-height: 236px;
    }

    .sk-subject-book {
        width: 94px;
        height: 72px;
        margin-bottom: 14px;
    }

    .sk-subject-book svg {
        width: 86px;
    }

    .sk-subject-modal-art p {
        font-size: 11px;
    }

    .sk-subject-modal-art > span {
        width: 100px;
        margin-top: 20px;
    }

    .sk-subject-modal-grid {
        gap: 14px 24px;
    }

    .sk-subject-field,
    .sk-subject-classes {
        gap: 7px;
    }

    .sk-subject-field > span,
    .sk-subject-classes > span {
        font-size: 11px;
    }

    .sk-subject-field input,
    .sk-subject-field select {
        height: 35px;
        padding: 0 11px;
        border-radius: 6px;
        font-size: 11px;
    }

    .sk-subject-field textarea {
        height: 70px;
        padding: 10px 11px;
        font-size: 11px;
    }

    .sk-subject-classes {
        margin: 14px 0 16px;
    }

    .sk-subject-class-checks {
        gap: 10px 14px;
    }

    .sk-subject-class-check {
        gap: 6px;
        font-size: 11px;
    }

    .sk-subject-class-check span {
        width: 15px;
        height: 15px;
        border-radius: 3px;
    }

    .sk-subject-class-check input:checked + span::after {
        left: 4px;
        top: 1px;
        width: 5px;
        height: 9px;
    }

    .sk-subject-notes {
        margin-top: 14px;
    }

    .sk-subject-modal-actions {
        gap: 12px;
        margin: 0 28px;
        padding: 8px 0 10px;
    }

    .sk-subject-cancel,
    .sk-subject-save {
        height: 36px;
        border-radius: 6px;
        font-size: 12px;
    }

    .sk-subject-cancel {
        min-width: 108px;
    }

    .sk-subject-save {
        min-width: 150px;
    }

    .sk-subject-save svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 760px) {
    #subject_form_overlay.sk-subject-modal-overlay {
        padding: 7px;
    }

    .sk-subject-modal {
        width: min(460px, calc(100vw - 14px));
        max-height: calc(100vh - 16px);
        border-radius: 8px;
    }

    .sk-subject-modal-form {
        grid-template-rows: 42px minmax(0, 1fr) 34px;
        max-height: calc(100vh - 16px);
    }

    .sk-subject-modal-header {
        grid-template-columns: minmax(0, 1fr) 22px;
        gap: 7px;
        padding: 8px 12px 5px 14px;
    }

    .sk-subject-modal-title {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 7px;
    }

    .sk-subject-modal-icon {
        width: 24px;
        height: 24px;
    }

    .sk-subject-modal-icon svg {
        width: 14px;
        height: 14px;
    }

    .sk-subject-modal-header h3 {
        margin-bottom: 2px;
        font-size: 12px;
    }

    .sk-subject-modal-header p {
        font-size: 7px;
    }

    .sk-subject-modal-close {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .sk-subject-modal-close svg {
        width: 12px;
        height: 12px;
    }

    .sk-subject-modal-body {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 10px;
        padding: 0 14px 5px;
    }

    .sk-subject-modal-art {
        min-height: 162px;
        border-radius: 6px;
    }

    .sk-subject-book {
        width: 58px;
        height: 44px;
        margin-bottom: 8px;
    }

    .sk-subject-book svg {
        width: 54px;
    }

    .sk-subject-modal-art p {
        font-size: 7px;
        line-height: 1.35;
    }

    .sk-subject-modal-art > span {
        width: 56px;
        margin-top: 12px;
    }

    .sk-subject-modal-grid {
        gap: 8px 10px;
    }

    .sk-subject-field,
    .sk-subject-classes {
        gap: 4px;
    }

    .sk-subject-field > span,
    .sk-subject-classes > span {
        font-size: 7px;
    }

    .sk-subject-field input,
    .sk-subject-field select {
        height: 24px;
        padding: 0 6px;
        border-radius: 4px;
        font-size: 7px;
    }

    .sk-subject-field textarea {
        height: 40px;
        padding: 6px;
        border-radius: 4px;
        font-size: 7px;
        line-height: 1.3;
    }

    .sk-subject-classes {
        margin: 8px 0 9px;
    }

    .sk-subject-class-checks {
        gap: 5px 7px;
    }

    .sk-subject-class-check {
        gap: 3px;
        font-size: 7px;
    }

    .sk-subject-class-check span {
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }

    .sk-subject-class-check input:checked + span::after {
        left: 3px;
        top: 1px;
        width: 3px;
        height: 6px;
        border-width: 0 1px 1px 0;
    }

    .sk-subject-notes {
        margin-top: 8px;
    }

    .sk-subject-modal-actions {
        gap: 6px;
        margin: 0 14px;
        padding: 6px 0 6px;
    }

    .sk-subject-cancel,
    .sk-subject-save {
        height: 22px;
        border-radius: 5px;
        font-size: 7px;
    }

    .sk-subject-cancel {
        min-width: 58px;
    }

    .sk-subject-save {
        min-width: 88px;
    }

    .sk-subject-save svg {
        width: 9px;
        height: 9px;
    }
}

.sk-classes-body .sk-classes-shell {
    grid-template-rows: var(--sk-classes-topbar) minmax(0, 1fr);
}

.sk-classes-body .sk-classes-workspace {
    grid-template-columns: var(--sk-classes-sidebar) minmax(0, 1fr);
}

.sk-classes-body .sk-classes-main {
    grid-template-rows: var(--sk-classes-heading) var(--sk-classes-stats) minmax(0, 1fr) var(--sk-classes-footer);
    gap: clamp(4px, 1.25vh, 10px);
    padding: var(--sk-classes-main-pad-y) var(--sk-classes-main-pad-x) 0;
}

.sk-attendance-body {
    --sk-attendance-topbar: clamp(64px, 8.55vh, 80px);
    --sk-attendance-sidebar-width: clamp(88px, 15.75vw, 272px);
    --sk-attendance-heading-height: clamp(28px, 6.42vh, 60px);
    --sk-attendance-footer-height: clamp(12px, 2.58vh, 24px);
    --sk-attendance-main-gap: clamp(4px, 1.28vh, 12px);
    --sk-attendance-main-pad-y: clamp(8px, 2.46vh, 23px);
    --sk-attendance-main-pad-x: clamp(7px, 2.78vw, 48px);
    --sk-attendance-board-tabs: clamp(22px, 5.35vh, 50px);
    --sk-attendance-panel-stats: clamp(48px, 12.64vh, 118px);
    --sk-attendance-panel-filters: clamp(34px, 7.92vh, 74px);
    --sk-attendance-panel-footer: clamp(20px, 4.92vh, 46px);
    --sk-attendance-side-width: clamp(130px, 16vw, 270px);
    --sk-attendance-card-radius: clamp(6px, .74vw, 10px);
    color: #071553;
    background: #f7fbff;
}

.sk-attendance-body .sk-attendance-shell {
    grid-template-rows: var(--sk-attendance-topbar) minmax(0, 1fr);
    border-radius: 0;
}

.sk-attendance-body .sk-attendance-workspace {
    grid-template-columns: var(--sk-attendance-sidebar-width) minmax(0, 1fr);
}

.sk-attendance-body .sk-attendance-main {
    display: grid;
    grid-template-rows: var(--sk-attendance-heading-height) minmax(0, 1fr) var(--sk-attendance-footer-height);
    gap: var(--sk-attendance-main-gap);
    min-width: 0;
    min-height: 0;
    padding: var(--sk-attendance-main-pad-y) var(--sk-attendance-main-pad-x) 0 clamp(7px, 1.74vw, 30px);
}

.sk-attendance-body .sk-attendance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sk-attendance-side-width);
    gap: clamp(5px, 1.27vw, 22px);
    min-width: 0;
    min-height: 0;
}

.sk-attendance-body .sk-attendance-board {
    grid-template-rows: var(--sk-attendance-board-tabs) auto minmax(0, 1fr);
    border-radius: var(--sk-attendance-card-radius);
}

.sk-attendance-body .sk-attendance-tab-panel {
    grid-template-rows: var(--sk-attendance-panel-stats) var(--sk-attendance-panel-filters) minmax(0, 1fr) var(--sk-attendance-panel-footer);
}

.sk-attendance-body .sk-students-footer {
    height: var(--sk-attendance-footer-height);
    color: #354f9d;
    font-size: clamp(5px, .76vw, 13px);
}

.sk-attendance-body .sk-attendance-heading h1 {
    font-size: clamp(13px, 1.86vw, 32px);
}

.sk-attendance-body .sk-attendance-heading p {
    margin-top: clamp(4px, .58vw, 10px);
    font-size: clamp(6px, .87vw, 15px);
}

.sk-attendance-body .sk-attendance-heading-actions {
    gap: clamp(5px, 1.27vw, 22px);
}

.sk-attendance-body .sk-attendance-secondary-button {
    width: clamp(84px, 12.96vw, 224px);
    height: clamp(22px, 2.43vw, 42px);
    gap: clamp(3px, .69vw, 12px);
    font-size: clamp(5px, .81vw, 14px);
}

.sk-attendance-body .sk-attendance-primary-button {
    width: clamp(94px, 16.9vw, 292px);
    height: clamp(22px, 2.43vw, 42px);
    padding: 0 clamp(6px, 1.16vw, 20px) 0 clamp(12px, 2.55vw, 44px);
    font-size: clamp(5px, .81vw, 14px);
}

.sk-attendance-body .sk-attendance-tabs {
    gap: clamp(13px, 2.55vw, 44px);
    padding: 0 clamp(8px, 1.62vw, 28px);
}

.sk-attendance-body .sk-attendance-tabs button {
    height: var(--sk-attendance-board-tabs);
    font-size: clamp(6px, .81vw, 14px);
}

.sk-attendance-body .sk-attendance-stats {
    gap: clamp(4px, 1.2vw, 24px);
    padding: clamp(7px, 1.27vw, 22px) clamp(6px, 1.04vw, 18px);
}

.sk-attendance-body .sk-attendance-stat {
    grid-template-columns: clamp(18px, 3.6vw, 62px) minmax(0, 1fr);
    height: clamp(34px, 4.75vw, 82px);
    padding: clamp(4px, .85vw, 10px) clamp(4px, 1vw, 18px);
    border: 1px solid color-mix(in srgb, currentColor 22%, #ffffff);
    border-radius: clamp(5px, .75vw, 13px);
}

.sk-attendance-body .sk-attendance-stat > span {
    width: clamp(15px, 2.9vw, 50px);
    height: clamp(15px, 2.9vw, 50px);
    border-radius: 50%;
}

.sk-attendance-body .sk-attendance-stat svg {
    width: clamp(9px, 1.62vw, 28px);
    height: clamp(9px, 1.62vw, 28px);
}

.sk-attendance-body .sk-attendance-stat strong {
    margin-bottom: clamp(2px, .46vw, 8px);
    font-size: clamp(4px, .81vw, 14px);
}

.sk-attendance-body .sk-attendance-stat b {
    font-size: clamp(8px, 1.5vw, 26px);
}

@supports not (border-color: color-mix(in srgb, red 22%, white)) {
    .sk-attendance-stat-blue { border-color: #d7e5ff; }
    .sk-attendance-stat-green { border-color: #d7efd9; }
    .sk-attendance-stat-red { border-color: #ffd6d6; }
    .sk-attendance-stat-orange { border-color: #f4dfc4; }
}

.sk-attendance-body .sk-attendance-filters {
    grid-template-columns: minmax(55px, 180px) minmax(0, 1fr) minmax(0, 1fr) minmax(42px, .9fr) clamp(32px, 6.25vw, 108px);
    gap: clamp(4px, 1.16vw, 20px);
    padding: clamp(5px, .81vw, 14px) clamp(6px, 1.04vw, 18px);
}

.sk-attendance-body .sk-attendance-filters label {
    gap: clamp(2px, .41vw, 7px);
    font-size: clamp(4px, .64vw, 11px);
}

.sk-attendance-body .sk-attendance-filters input,
.sk-attendance-body .sk-attendance-filters select {
    height: clamp(18px, 2.2vw, 38px);
    padding: 0 clamp(4px, .69vw, 12px);
    border-radius: clamp(4px, .35vw, 6px);
    font-size: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-search-button,
.sk-attendance-body .sk-attendance-reset-button {
    height: clamp(19px, 2.43vw, 42px);
    gap: clamp(2px, .52vw, 9px);
    border-radius: clamp(4px, .46vw, 8px);
    font-size: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-table-card {
    padding: clamp(4px, .58vw, 10px) clamp(6px, 1.04vw, 18px) 0;
}

.sk-attendance-body .sk-attendance-table th {
    height: clamp(16px, 2.31vw, 40px);
    font-size: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-table td {
    height: clamp(17px, 2.43vw, 42px);
    padding: 0 clamp(3px, .58vw, 10px);
    font-size: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-table th:nth-child(1),
.sk-attendance-body .sk-attendance-table td:nth-child(1) {
    width: clamp(18px, 2.78vw, 48px);
}

.sk-attendance-body .sk-attendance-table th:nth-child(8),
.sk-attendance-body .sk-attendance-table td:nth-child(8) {
    width: clamp(38px, 5.67vw, 98px);
}

.sk-attendance-body .sk-attendance-avatar {
    width: clamp(12px, 1.85vw, 32px);
    height: clamp(12px, 1.85vw, 32px);
    font-size: clamp(4px, .64vw, 11px);
}

.sk-attendance-body .sk-attendance-person {
    gap: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-status {
    min-width: clamp(24px, 3.7vw, 64px);
    height: clamp(10px, 1.5vw, 26px);
    padding: 0 clamp(3px, .58vw, 10px);
    border-radius: clamp(3px, .41vw, 7px);
    font-size: clamp(3px, .64vw, 11px);
}

.sk-attendance-body .sk-attendance-row-actions {
    gap: clamp(2px, .35vw, 6px);
}

.sk-attendance-body .sk-attendance-row-actions button,
.sk-attendance-body .sk-attendance-row-actions a {
    width: clamp(11px, 1.85vw, 32px);
    height: clamp(11px, 1.85vw, 32px);
    border-radius: clamp(3px, .41vw, 7px);
}

.sk-attendance-body .sk-attendance-row-actions svg {
    width: clamp(6px, .87vw, 15px);
    height: clamp(6px, .87vw, 15px);
}

.sk-attendance-body .sk-attendance-table-footer {
    gap: clamp(4px, 1.04vw, 18px);
    padding: 0 clamp(6px, 1.04vw, 18px);
    font-size: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-table-footer select {
    width: clamp(25px, 4.28vw, 74px);
    height: clamp(14px, 1.97vw, 34px);
    border-radius: clamp(3px, .41vw, 7px);
    font-size: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-pagination {
    gap: clamp(2px, .46vw, 8px);
}

.sk-attendance-body .sk-attendance-pagination button,
.sk-attendance-body .sk-attendance-pagination span {
    min-width: clamp(12px, 1.74vw, 30px);
    height: clamp(12px, 1.74vw, 30px);
    padding: 0 clamp(3px, .46vw, 8px);
    border-radius: clamp(3px, .41vw, 7px);
    font-size: clamp(4px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-sidebar {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(6px, .81vw, 14px);
}

.sk-attendance-body .sk-attendance-side-card {
    padding: clamp(8px, .9vw, 16px) clamp(6px, .75vw, 12px) clamp(6px, .75vw, 12px);
    border-radius: var(--sk-attendance-card-radius);
}

.sk-attendance-body .sk-attendance-side-card h2 {
    margin-bottom: clamp(6px, .7vw, 14px);
    font-size: clamp(11px, .87vw, 15px);
}

.sk-attendance-body .sk-attendance-action {
    grid-template-columns: clamp(16px, 1.5vw, 24px) minmax(0, 1fr) clamp(8px, .85vw, 14px);
    gap: clamp(4px, .5vw, 8px);
    height: auto;
    min-height: clamp(34px, 3.2vw, 48px);
    margin-bottom: clamp(5px, .55vw, 9px);
    padding: clamp(4px, .4vw, 7px) clamp(5px, .55vw, 9px);
    border-radius: clamp(4px, .46vw, 8px);
}

.sk-attendance-body .sk-attendance-action svg {
    width: clamp(13px, 1.05vw, 18px);
    height: clamp(13px, 1.05vw, 18px);
}

.sk-attendance-body .sk-attendance-action strong {
    font-size: clamp(10px, .72vw, 12px);
}

.sk-attendance-body .sk-attendance-action small {
    margin-top: clamp(2px, .25vw, 4px);
    font-size: clamp(9px, .62vw, 10.5px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.sk-attendance-body .sk-attendance-today div {
    height: clamp(22px, 2.2vw, 38px);
}

.sk-attendance-body .sk-attendance-today dt,
.sk-attendance-body .sk-attendance-today dd {
    font-size: clamp(10px, .69vw, 12px);
}

.sk-attendance-body .sk-attendance-activity {
    grid-template-rows: auto minmax(0, 1fr) clamp(22px, 1.97vw, 34px);
}

.sk-attendance-body .sk-attendance-activity article {
    grid-template-columns: clamp(20px, 1.7vw, 30px) minmax(0, 1fr);
    gap: clamp(4px, .5vw, 8px);
    padding-bottom: clamp(6px, .65vw, 12px);
    margin-bottom: clamp(6px, .65vw, 12px);
}

.sk-attendance-body .sk-attendance-activity article > span {
    width: clamp(20px, 1.5vw, 28px);
    height: clamp(20px, 1.5vw, 28px);
    border-radius: clamp(5px, .5vw, 8px);
}

.sk-attendance-body .sk-attendance-activity strong {
    font-size: clamp(10px, .64vw, 11px);
}

.sk-attendance-body .sk-attendance-activity small {
    margin-top: clamp(2px, .25vw, 4px);
    font-size: clamp(9px, .58vw, 10px);
}

.sk-attendance-body .sk-attendance-view-all {
    height: clamp(22px, 1.97vw, 34px);
    gap: clamp(4px, .46vw, 8px);
    border-radius: clamp(4px, .46vw, 8px);
    font-size: clamp(9px, .64vw, 11px);
}

.sk-exams-body .sk-exams-layout {
    grid-template-columns: minmax(0, 1fr) clamp(130px, 16vw, 270px);
    gap: clamp(5px, 1.27vw, 22px);
}

.sk-exams-body .sk-exams-sidebar {
    gap: clamp(6px, .81vw, 14px);
}

.sk-exams-body .sk-attendance-side-card {
    padding: clamp(8px, .9vw, 16px) clamp(6px, .75vw, 12px) clamp(6px, .75vw, 12px);
    border-radius: clamp(6px, .74vw, 10px);
}

.sk-exams-body .sk-attendance-side-card h2 {
    margin-bottom: clamp(6px, .7vw, 14px);
    font-size: clamp(11px, .87vw, 15px);
}

.sk-exams-body .sk-attendance-action {
    grid-template-columns: clamp(16px, 1.5vw, 24px) minmax(0, 1fr) clamp(8px, .85vw, 14px);
    gap: clamp(4px, .5vw, 8px);
    height: auto;
    min-height: clamp(34px, 3.2vw, 48px);
    margin-bottom: clamp(5px, .55vw, 9px);
    padding: clamp(4px, .4vw, 7px) clamp(5px, .55vw, 9px);
    border-radius: clamp(4px, .46vw, 8px);
}

.sk-exams-body .sk-attendance-action svg {
    width: clamp(13px, 1.05vw, 18px);
    height: clamp(13px, 1.05vw, 18px);
}

.sk-exams-body .sk-attendance-action strong {
    font-size: clamp(10px, .72vw, 12px);
}

.sk-exams-body .sk-attendance-action small {
    margin-top: clamp(2px, .25vw, 4px);
    font-size: clamp(9px, .62vw, 10.5px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-board {
    gap: clamp(5px, 1.28vh, 12px);
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-tabs {
    align-items: flex-end;
    justify-content: center;
    gap: clamp(14px, 4.05vw, 70px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: var(--sk-attendance-card-radius);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(16, 40, 92, 0.045);
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-tabs button {
    min-width: clamp(78px, 13vw, 224px);
    color: #263861;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-tabs button.is-active {
    color: #0963ff;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance {
    grid-template-rows: clamp(48px, 9.63vh, 90px) clamp(34px, 7.28vh, 68px) minmax(0, 1fr) clamp(20px, 4.28vh, 40px);
    gap: clamp(5px, 1.28vh, 12px);
    overflow: hidden;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-stats {
    border-bottom: 0;
    padding: 0;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-filters {
    grid-template-columns: minmax(72px, 1.05fr) minmax(100px, 1.55fr) minmax(72px, 1.35fr) clamp(32px, 6.71vw, 116px);
    align-items: end;
    border: 1px solid #dfe8f5;
    border-radius: var(--sk-attendance-card-radius);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(16, 40, 92, 0.045);
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid #dfe8f5;
    border-bottom: 0;
    border-radius: var(--sk-attendance-card-radius) var(--sk-attendance-card-radius) 0 0;
    background: #ffffff;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table {
    border: 0;
    border-radius: 0;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td {
    border-right: 1px solid #e6edf6;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:last-child,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:last-child {
    border-right: 0;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(2),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(2) {
    width: 18%;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(3),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(3) {
    width: 19%;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(8),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(8) {
    width: clamp(55px, 7.82vw, 135px);
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions {
    justify-content: center;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions button,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions a {
    color: #0963ff;
    border-color: rgba(9, 99, 255, 0.34);
    background: #ffffff;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border: 1px solid #dfe8f5;
    border-top: 0;
    border-radius: 0 0 var(--sk-attendance-card-radius) var(--sk-attendance-card-radius);
    background: #ffffff;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-footer p {
    display: none;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-footer label {
    grid-column: 1;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-pagination {
    grid-column: 3;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-sidebar {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(5px, 1.6vh, 16px);
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-side-card {
    box-shadow: 0 10px 26px rgba(16, 40, 92, 0.045);
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action {
    border-color: #dfe8f5;
    color: #263861;
    background: #ffffff;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action > svg:first-child {
    color: #0963ff;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action small {
    display: none;
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-board {
    gap: clamp(5px, 1.28vh, 12px);
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-tabs {
    align-items: flex-end;
    justify-content: center;
    gap: clamp(14px, 4.05vw, 70px);
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: var(--sk-attendance-card-radius);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(16, 40, 92, 0.045);
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-tabs button {
    min-width: clamp(78px, 13vw, 224px);
    color: #263861;
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-tabs button.is-active {
    color: #0963ff;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance {
    grid-template-rows: clamp(48px, 9.63vh, 90px) clamp(34px, 7.28vh, 68px) minmax(0, 1fr) clamp(20px, 4.28vh, 40px);
    gap: clamp(5px, 1.28vh, 12px);
    overflow: hidden;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-stats {
    border-bottom: 0;
    padding: 0;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-filters {
    grid-template-columns: minmax(72px, 1.05fr) minmax(100px, 1.55fr) minmax(72px, 1.35fr) clamp(32px, 6.71vw, 116px);
    align-items: end;
    border: 1px solid #dfe8f5;
    border-radius: var(--sk-attendance-card-radius);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(16, 40, 92, 0.045);
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-card {
    overflow: hidden;
    padding: 0;
    border: 1px solid #dfe8f5;
    border-bottom: 0;
    border-radius: var(--sk-attendance-card-radius) var(--sk-attendance-card-radius) 0 0;
    background: #ffffff;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table {
    border: 0;
    border-radius: 0;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td {
    border-right: 1px solid #e6edf6;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:last-child,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:last-child {
    border-right: 0;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(2),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(2) {
    width: 20%;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(3),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(3) {
    width: 15%;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(8),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(8) {
    width: clamp(55px, 7.82vw, 135px);
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions {
    justify-content: center;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions button,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions a {
    color: #0963ff;
    border-color: rgba(9, 99, 255, 0.34);
    background: #ffffff;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border: 1px solid #dfe8f5;
    border-top: 0;
    border-radius: 0 0 var(--sk-attendance-card-radius) var(--sk-attendance-card-radius);
    background: #ffffff;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-footer p {
    grid-column: 3;
    display: block;
    text-align: right;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-footer label {
    grid-column: 1;
}

.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-pagination {
    grid-column: 2;
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-sidebar {
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(5px, 1.6vh, 16px);
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-side-card {
    box-shadow: 0 10px 26px rgba(16, 40, 92, 0.045);
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-action {
    border-color: #dfe8f5;
    color: #263861;
    background: #ffffff;
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-action > svg:first-child {
    color: #0963ff;
}

.sk-attendance-body.is-staff-attendance-view .sk-attendance-action small {
    display: none;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-attendance-body {
        --sk-attendance-topbar: 74px;
        --sk-attendance-sidebar-width: 168px;
        --sk-attendance-heading-height: 44px;
        --sk-attendance-footer-height: 18px;
        --sk-attendance-main-gap: 8px;
        --sk-attendance-main-pad-y: 14px;
        --sk-attendance-main-pad-x: 18px;
        --sk-attendance-board-tabs: 38px;
        --sk-attendance-panel-stats: 88px;
        --sk-attendance-panel-filters: 58px;
        --sk-attendance-panel-footer: 34px;
        --sk-attendance-side-width: 230px;
    }
}

@media (max-width: 760px) {
    .sk-attendance-body {
        --sk-attendance-topbar: 64px;
        --sk-attendance-sidebar-width: 88px;
        --sk-attendance-heading-height: 28px;
        --sk-attendance-footer-height: 12px;
        --sk-attendance-main-gap: 4px;
        --sk-attendance-main-pad-y: 8px;
        --sk-attendance-main-pad-x: 7px;
        --sk-attendance-board-tabs: 22px;
        --sk-attendance-panel-stats: 48px;
        --sk-attendance-panel-filters: 34px;
        --sk-attendance-panel-footer: 20px;
        --sk-attendance-side-width: 108px;
    }
}

.sk-attendance-log-body {
    --sk-log-topbar: clamp(64px, 8.55vh, 80px);
    --sk-log-sidebar: clamp(88px, 16.2vw, 272px);
    --sk-log-heading: clamp(46px, 7.6vh, 70px);
    --sk-log-filters: clamp(38px, 7vh, 64px);
    --sk-log-footer: clamp(12px, 2.58vh, 24px);
    --sk-log-gap: clamp(4px, 1.16vh, 11px);
    --sk-log-main-pad-y: clamp(8px, 2.35vh, 22px);
    --sk-log-main-pad-x: clamp(8px, 1.74vw, 30px);
    --sk-log-radius: clamp(6px, .58vw, 10px);
    color: #071553;
    background: #fbfdff;
}

.sk-attendance-log-body .sk-attendance-log-shell {
    grid-template-rows: var(--sk-log-topbar) minmax(0, 1fr);
    border-radius: 0;
}

.sk-attendance-log-body .sk-attendance-log-workspace {
    grid-template-columns: var(--sk-log-sidebar) minmax(0, 1fr);
}

.sk-attendance-log-body .sk-attendance-log-main {
    display: grid;
    grid-template-rows: var(--sk-log-heading) var(--sk-log-filters) minmax(0, 1fr) var(--sk-log-footer);
    gap: var(--sk-log-gap);
    min-width: 0;
    min-height: 0;
    padding: var(--sk-log-main-pad-y) var(--sk-log-main-pad-x) 0;
}

.sk-attendance-log-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(10px, 1.74vw, 30px);
    min-width: 0;
}

.sk-attendance-log-breadcrumb {
    display: flex;
    align-items: center;
    gap: clamp(4px, .64vw, 11px);
    margin-bottom: clamp(5px, .92vh, 9px);
    color: #4f5f85;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(6px, .64vw, 11px);
}

.sk-attendance-log-breadcrumb a,
.sk-attendance-log-breadcrumb strong {
    color: #0963ff;
    text-decoration: none;
}

.sk-attendance-log-breadcrumb svg {
    width: clamp(5px, .46vw, 8px);
    height: clamp(5px, .46vw, 8px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-log-heading h1 {
    margin: 0;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(15px, 1.5vw, 26px);
    line-height: 1;
}

.sk-attendance-log-heading p {
    margin: clamp(5px, .75vh, 7px) 0 0;
    color: #354f8d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(7px, .81vw, 14px);
}

.sk-attendance-log-export,
.sk-attendance-log-search-btn,
.sk-attendance-log-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, .64vw, 11px);
    border: 1px solid #dfe8f5;
    border-radius: clamp(5px, .46vw, 8px);
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.sk-attendance-log-export {
    width: clamp(100px, 11.63vw, 201px);
    height: clamp(24px, 3.64vh, 34px);
    margin-top: clamp(10px, 2.67vh, 25px);
    font-size: clamp(7px, .75vw, 13px);
}

.sk-attendance-log-export svg,
.sk-attendance-log-search-btn svg,
.sk-attendance-log-reset svg {
    width: clamp(9px, .93vw, 16px);
    height: clamp(9px, .93vw, 16px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-attendance-log-filters {
    display: grid;
    grid-template-columns: minmax(130px, 1.05fr) minmax(110px, 1.05fr) minmax(110px, 1.05fr) minmax(150px, 1.3fr) clamp(60px, 7.41vw, 128px) clamp(54px, 6.01vw, 104px);
    align-items: center;
    gap: clamp(6px, 1.39vw, 24px);
    min-width: 0;
    padding: clamp(4px, .7vh, 8px) clamp(8px, 1.39vw, 24px);
    border: 1px solid #dfe8f5;
    border-radius: var(--sk-log-radius);
    background: #ffffff;
}

.sk-attendance-log-filters select,
.sk-attendance-log-filters input {
    width: 100%;
    min-width: 0;
    height: clamp(22px, 3.85vh, 36px);
    border: 1px solid #dfe8f5;
    border-radius: clamp(5px, .46vw, 8px);
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-filters select {
    padding: 0 clamp(7px, .93vw, 16px);
}

.sk-attendance-log-search {
    position: relative;
    min-width: 0;
}

.sk-attendance-log-search i {
    position: absolute;
    top: 50%;
    right: clamp(7px, .93vw, 16px);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: clamp(9px, .93vw, 16px);
    height: clamp(9px, .93vw, 16px);
    color: #51649a;
}

.sk-attendance-log-search i svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sk-attendance-log-search input {
    padding: 0 clamp(22px, 2.31vw, 40px) 0 clamp(8px, .93vw, 16px);
}

/* Date range picker: trigger button + presets/calendar popover, replacing the
   old plain <select> that only offered Last 7 Days/Today/This Month with no
   way to reach a real custom range. */
.sk-log-daterange {
    position: relative;
    min-width: 0;
}

.sk-log-daterange-trigger {
    display: flex;
    align-items: center;
    gap: clamp(4px, .58vw, 10px);
    width: 100%;
    height: clamp(22px, 3.85vh, 36px);
    padding: 0 clamp(7px, .93vw, 16px);
    border: 1px solid #dfe8f5;
    border-radius: clamp(5px, .46vw, 8px);
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(6px, .69vw, 12px);
    cursor: pointer;
    text-align: left;
}

.sk-log-daterange-trigger:hover,
.sk-log-daterange-trigger:focus-visible {
    border-color: #0963ff;
    outline: 0;
}

.sk-log-daterange-trigger svg {
    flex: 0 0 auto;
    width: clamp(9px, .93vw, 16px);
    height: clamp(9px, .93vw, 16px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-log-daterange-trigger span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-log-daterange-trigger svg:last-child {
    width: clamp(7px, .7vw, 12px);
    height: clamp(7px, .7vw, 12px);
    transform: rotate(90deg);
    color: #7f8fb8;
}

.sk-log-daterange.is-open .sk-log-daterange-trigger {
    border-color: #0963ff;
}

.sk-log-daterange.is-open .sk-log-daterange-trigger svg:last-child {
    transform: rotate(-90deg);
}

.sk-log-daterange-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: clamp(120px, 12vw, 160px) minmax(240px, 280px);
    width: max-content;
    max-width: calc(100vw - 40px);
    border: 1px solid #dfe8f5;
    border-radius: clamp(8px, .74vw, 12px);
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(16, 40, 92, 0.14);
    overflow: hidden;
}

.sk-log-daterange-panel[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .sk-log-daterange-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .sk-log-daterange-presets {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid #edf2f8;
    }
}

.sk-log-daterange-presets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-right: 1px solid #edf2f8;
    background: #fbfdff;
}

.sk-log-daterange-presets button {
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    color: #354f8d;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.sk-log-daterange-presets button:hover {
    background: #eef4ff;
    color: #0963ff;
}

.sk-log-daterange-presets button.is-active {
    color: #0963ff;
    background: #e7f0ff;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-log-daterange-calendar {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 8px;
}

.sk-log-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sk-log-calendar-head strong {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 12px;
}

.sk-log-calendar-nav {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #e1e9f4;
    border-radius: 6px;
    color: #354f8d;
    background: #ffffff;
    cursor: pointer;
}

.sk-log-calendar-nav svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(180deg);
}

.sk-log-calendar-nav.is-next svg {
    transform: none;
}

.sk-log-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
    color: #8a94b3;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 10px;
    text-align: center;
}

.sk-log-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 28px;
}

.sk-log-calendar-grid button {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    color: #071553;
    background: transparent;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.sk-log-calendar-grid button:disabled {
    color: #c7d0e4;
    cursor: default;
}

.sk-log-calendar-grid button.is-muted {
    color: #c7d0e4;
}

.sk-log-calendar-grid button.is-today {
    color: #0963ff;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-log-calendar-grid button.is-in-range {
    border-radius: 0;
    background: #e7f0ff;
}

.sk-log-calendar-grid button.is-start,
.sk-log-calendar-grid button.is-end {
    border-radius: 999px;
    color: #ffffff;
    background: #0963ff;
}

.sk-log-calendar-hint {
    margin: 6px 0 0;
    color: #8a94b3;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 10px;
    text-align: center;
}

.sk-log-daterange-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid #edf2f8;
}

.sk-log-daterange-actions button {
    height: 28px;
    padding: 0 14px;
    border: 1px solid #dfe8f5;
    border-radius: 6px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.sk-log-daterange-actions .is-cancel {
    color: #354f8d;
    background: #ffffff;
}

.sk-log-daterange-actions .is-apply {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-log-daterange-actions .is-apply:disabled {
    border-color: #c7d0e4;
    background: #c7d0e4;
    cursor: default;
}

.sk-attendance-log-search-btn {
    height: clamp(22px, 3.85vh, 36px);
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
    font-size: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-reset {
    height: clamp(22px, 3.85vh, 36px);
    font-size: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) clamp(30px, 5.13vh, 48px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: var(--sk-log-radius);
    background: #ffffff;
}

.sk-attendance-log-table-wrap {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6d4ea transparent;
}

.sk-attendance-log-table {
    width: 100%;
    min-width: 720px;
    height: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: #071553;
}

.sk-attendance-log-table th,
.sk-attendance-log-table td {
    overflow: hidden;
    padding: 0 clamp(7px, 1.27vw, 22px);
    border-bottom: 1px solid #e6edf6;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-log-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: clamp(24px, 4.06vh, 38px);
    color: #071553;
    background: #fbfdff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-table td {
    height: clamp(30px, 5.56vh, 52px);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-table th:nth-child(1),
.sk-attendance-log-table td:nth-child(1) {
    width: clamp(32px, 4.4vw, 76px);
}

.sk-attendance-log-table th:nth-child(2),
.sk-attendance-log-table td:nth-child(2) {
    width: 24%;
}

.sk-attendance-log-table th:nth-child(3),
.sk-attendance-log-table td:nth-child(3) {
    width: 34%;
}

.sk-attendance-log-table th:nth-child(4),
.sk-attendance-log-table td:nth-child(4) {
    width: 19%;
}

.sk-attendance-log-table th:nth-child(5),
.sk-attendance-log-table td:nth-child(5) {
    width: 19%;
}

.sk-attendance-log-action,
.sk-attendance-log-user {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sk-attendance-log-action {
    gap: clamp(7px, .93vw, 16px);
}

.sk-attendance-log-action > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(20px, 1.97vw, 34px);
    height: clamp(20px, 1.97vw, 34px);
    border: 1px solid currentColor;
    border-radius: clamp(6px, .52vw, 9px);
}

.sk-attendance-log-action > span.is-green {
    color: #16a34a;
    background: #e9f8ed;
}

.sk-attendance-log-action > span.is-purple {
    color: #7747e8;
    background: #f3efff;
}

.sk-attendance-log-action > span.is-orange {
    color: #ff8a00;
    background: #fff4e8;
}

.sk-attendance-log-action svg {
    width: clamp(11px, 1.16vw, 20px);
    height: clamp(11px, 1.16vw, 20px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sk-attendance-log-action strong,
.sk-attendance-log-user strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-log-user {
    gap: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-user img {
    flex: 0 0 auto;
    width: clamp(20px, 1.97vw, 34px);
    height: clamp(20px, 1.97vw, 34px);
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
    background: #eaf2ff;
}

.sk-attendance-log-user span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sk-attendance-log-user small {
    overflow: hidden;
    color: #47609d;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(5px, .58vw, 10px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-attendance-log-empty {
    text-align: center;
}

.sk-attendance-log-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(100px, 1fr);
    align-items: center;
    gap: clamp(8px, 1.16vw, 20px);
    min-width: 0;
    padding: 0 clamp(10px, 1.27vw, 22px);
    color: #35456d;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-footer p {
    margin: 0;
}

.sk-attendance-log-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, .52vw, 9px);
}

.sk-attendance-log-pages a,
.sk-attendance-log-pages span {
    display: grid;
    place-items: center;
    min-width: clamp(16px, 1.74vw, 30px);
    height: clamp(16px, 1.74vw, 30px);
    padding: 0 clamp(4px, .46vw, 8px);
    border: 1px solid #dfe8f5;
    border-radius: clamp(4px, .41vw, 7px);
    color: #52607f;
    background: #ffffff;
    text-decoration: none;
}

.sk-attendance-log-pages a.is-active {
    border-color: #0963ff;
    color: #ffffff;
    background: #0963ff;
}

.sk-attendance-log-pages svg {
    width: clamp(8px, .81vw, 14px);
    height: clamp(8px, .81vw, 14px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sk-attendance-log-footer label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(5px, .58vw, 10px);
    white-space: nowrap;
}

.sk-attendance-log-footer select {
    width: clamp(36px, 4.28vw, 74px);
    height: clamp(18px, 1.97vw, 34px);
    border: 1px solid #dfe8f5;
    border-radius: clamp(4px, .41vw, 7px);
    color: #071553;
    background: #ffffff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(6px, .69vw, 12px);
}

.sk-attendance-log-body .sk-students-footer {
    height: var(--sk-log-footer);
    color: #354f9d;
    font-size: clamp(5px, .76vw, 13px);
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-attendance-log-body {
        --sk-log-topbar: 74px;
        --sk-log-sidebar: 168px;
        --sk-log-heading: 56px;
        --sk-log-filters: 68px;
        --sk-log-footer: 18px;
        --sk-log-gap: 8px;
        --sk-log-main-pad-y: 14px;
        --sk-log-main-pad-x: 18px;
    }
}

@media (max-width: 760px) {
    .sk-attendance-log-body {
        --sk-log-topbar: 64px;
        --sk-log-sidebar: 88px;
        --sk-log-heading: 44px;
        --sk-log-filters: 54px;
        --sk-log-footer: 12px;
        --sk-log-gap: 5px;
        --sk-log-main-pad-y: 8px;
        --sk-log-main-pad-x: 8px;
    }

    .sk-attendance-log-filters {
        grid-template-columns: minmax(58px, 1.05fr) minmax(52px, 1fr) minmax(52px, 1fr) minmax(62px, 1.15fr) 38px 34px;
        gap: 4px;
        padding: 5px 6px;
    }

    .sk-attendance-log-export span,
    .sk-attendance-log-search-btn span,
    .sk-attendance-log-reset span {
        display: none;
    }
}

#exam-details.sk-exam-modal-overlay {
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 2.67vh, 25px);
    background: rgba(12, 18, 31, 0.58);
    backdrop-filter: blur(2px);
}

#exam-details.sk-exam-modal-overlay:target,
#exam-details.sk-exam-modal-overlay.is-open {
    display: flex;
}

.sk-exam-modal {
    width: min(1038px, calc(100vw - 58px)) !important;
    height: min(686px, calc(100vh - 92px));
    max-height: calc(100vh - 58px);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--sk-line);
    border-radius: 14px;
    color: var(--sk-text);
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(8, 13, 31, 0.30);
}

.sk-exam-modal-form {
    display: grid;
    grid-template-rows: clamp(50px, 7.45vh, 67px) clamp(70px, 10.45vh, 94px) minmax(0, 1fr) clamp(96px, 14.1vh, 127px) clamp(48px, 6.94vh, 62px);
    min-width: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

.sk-exam-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(34px, 2.43vw, 42px);
    align-items: center;
    gap: clamp(13px, 1.25vw, 18px);
    min-width: 0;
    padding: 0 clamp(18px, 2.32vw, 37px);
}

.sk-exam-modal-title {
    display: grid;
    grid-template-columns: clamp(44px, 3.36vw, 58px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(13px, 1.04vw, 16px);
    min-width: 0;
}

.sk-exam-modal-icon {
    display: grid;
    place-items: center;
    width: clamp(44px, 3.36vw, 58px);
    height: clamp(44px, 3.36vw, 58px);
    border-radius: 50%;
    color: var(--sk-blue);
    background: var(--sk-blue-soft);
}

.sk-exam-modal-icon svg {
    width: clamp(25px, 1.85vw, 32px);
    height: clamp(25px, 1.85vw, 32px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-exam-modal-head h2 {
    margin: 0 0 clamp(4px, .75vh, 7px);
    color: var(--sk-text);
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(16px, 1.45vw, 25px);
    line-height: 1;
}

.sk-exam-modal-head p {
    margin: 0;
    color: var(--sk-muted);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(11px, .81vw, 14px);
    line-height: 1.2;
}

.sk-exam-modal-close {
    display: grid;
    place-items: center;
    width: clamp(28px, 2.43vw, 42px);
    height: clamp(28px, 2.43vw, 42px);
    border: 1px solid #d7e0ee;
    border-radius: clamp(7px, .52vw, 9px);
    color: var(--sk-text);
    background: #ffffff;
    text-decoration: none;
}

.sk-exam-modal-close:hover {
    border-color: #c4d4ee;
    background: #f7faff;
}

.sk-exam-modal-close svg {
    width: clamp(15px, 1.27vw, 22px);
    height: clamp(15px, 1.27vw, 22px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-exam-modal-top,
.sk-exam-modal-bottom {
    display: grid;
    min-width: 0;
    padding: 0 clamp(18px, 2.32vw, 37px);
}

.sk-exam-modal-top {
    grid-template-columns: 1.14fr 1.03fr .98fr 1.04fr;
    align-items: start;
    gap: clamp(10px, 1.39vw, 24px);
}

.sk-exam-modal-top label,
.sk-exam-modal-bottom label {
    display: grid;
    gap: clamp(6px, .85vh, 8px);
    min-width: 0;
    color: var(--sk-text);
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(10px, .81vw, 14px);
}

.sk-exam-modal-top input,
.sk-exam-modal-top select,
.sk-exam-modal-bottom input,
.sk-exam-modal-bottom textarea,
.sk-exam-schedule-table input,
.sk-exam-schedule-table select {
    width: 100%;
    min-width: 0;
    border: 1px solid #d7e0ee;
    border-radius: clamp(5px, .41vw, 7px);
    color: #0b1238;
    background: #ffffff;
    font-family: "InterMedium", Arial, sans-serif;
    outline: 0;
}

.sk-exam-modal-top input:focus,
.sk-exam-modal-top select:focus,
.sk-exam-modal-bottom input:focus,
.sk-exam-modal-bottom textarea:focus,
.sk-exam-schedule-table input:focus,
.sk-exam-schedule-table select:focus {
    border-color: var(--sk-blue);
    box-shadow: 0 0 0 3px rgba(9, 99, 255, 0.10);
}

.sk-exam-modal-top input::placeholder,
.sk-exam-modal-bottom textarea::placeholder,
.sk-exam-schedule-table input::placeholder {
    color: #7b869e;
    opacity: 1;
}

.sk-exam-modal-top input,
.sk-exam-modal-top select,
.sk-exam-modal-bottom input {
    height: clamp(32px, 4.71vh, 44px);
    padding: 0 clamp(10px, .93vw, 16px);
    font-size: clamp(9px, .75vw, 13px);
}

.sk-exam-schedule {
    display: grid;
    grid-template-rows: clamp(30px, 4.51vh, 41px) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: 0 clamp(18px, 2.32vw, 37px);
}

.sk-exam-schedule h3 {
    margin: 0;
    align-self: center;
    color: var(--sk-text);
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(13px, 1.04vw, 18px);
}

.sk-exam-schedule-table-wrap {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--sk-line);
    border-radius: clamp(5px, .5vw, 8px);
    scrollbar-width: thin;
    scrollbar-color: #c6d4ea transparent;
}

.sk-exam-schedule-table {
    width: 100%;
    min-width: 920px;
    min-height: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.sk-exam-schedule-table .sk-exam-subject-item {
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sk-exam-schedule-table th,
.sk-exam-schedule-table td {
    overflow: hidden;
    padding: 0 clamp(7px, .87vw, 15px);
    border-bottom: 1px solid #e3ebf5;
    color: var(--sk-text);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-exam-schedule-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: clamp(29px, 4.45vh, 40px);
    background: #f7faff;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(8px, .69vw, 12px);
}

.sk-exam-schedule-table td {
    height: clamp(35px, 5.5vh, 50px);
    font-family: "InterMedium", Arial, sans-serif;
    font-size: clamp(9px, .75vw, 13px);
}

.sk-exam-schedule-table tr:last-child td {
    border-bottom: 0;
}

.sk-exam-schedule-table .sk-exam-subject-item strong {
    display: block;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: inherit;
}

.sk-exam-schedule-table th:nth-child(1),
.sk-exam-schedule-table td:nth-child(1) { width: 12%; }
.sk-exam-schedule-table th:nth-child(2),
.sk-exam-schedule-table td:nth-child(2),
.sk-exam-schedule-table th:nth-child(3),
.sk-exam-schedule-table td:nth-child(3) { width: 11%; }
.sk-exam-schedule-table th:nth-child(4),
.sk-exam-schedule-table td:nth-child(4) { width: 16%; }
.sk-exam-schedule-table th:nth-child(5),
.sk-exam-schedule-table td:nth-child(5) { width: 10%; }
.sk-exam-schedule-table th:nth-child(6),
.sk-exam-schedule-table td:nth-child(6) { width: 16%; }
.sk-exam-schedule-table th:nth-child(7),
.sk-exam-schedule-table td:nth-child(7),
.sk-exam-schedule-table th:nth-child(8),
.sk-exam-schedule-table td:nth-child(8) { width: 12%; }

.sk-exam-schedule-table input,
.sk-exam-schedule-table select {
    height: clamp(27px, 4.18vh, 38px);
    padding: 0 clamp(7px, .75vw, 13px);
    font-size: clamp(8px, .69vw, 12px);
}

.sk-exam-schedule-table input[type="number"] {
    text-align: center;
}

.sk-exam-schedule-empty {
    text-align: center;
    color: #667599 !important;
}

.sk-exam-modal-bottom {
    grid-template-columns: minmax(180px, .52fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(18px, 2.08vw, 36px);
    padding-top: clamp(14px, 2.03vh, 18px);
}

.sk-exam-modal-bottom textarea {
    height: clamp(58px, 8.15vh, 72px);
    padding: clamp(10px, .93vw, 16px);
    resize: none;
    font-size: clamp(9px, .75vw, 13px);
}

.sk-exam-modal-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: clamp(12px, 1.04vw, 18px);
    min-width: 0;
    margin: 0 clamp(18px, 2.32vw, 37px);
    padding: 0 clamp(18px, 2.32vw, 37px);
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--sk-line);
    padding-top: clamp(10px, 1.51vh, 14px);
}

.sk-exam-cancel,
.sk-exam-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, .58vw, 10px);
    width: auto;
    min-width: clamp(108px, 7.87vw, 136px);
    height: clamp(34px, 4.71vh, 44px);
    border-radius: clamp(6px, .46vw, 8px);
    cursor: pointer;
    font-family: "InterBold", Arial, sans-serif;
    font-size: clamp(10px, .87vw, 15px);
}

.sk-exam-cancel {
    border: 1px solid #b8c4da;
    color: var(--sk-text);
    background: #ffffff;
}

.sk-exam-save {
    min-width: clamp(132px, 9.72vw, 168px);
    border: 0;
    color: #ffffff;
    background: #299b46;
    box-shadow: 0 10px 18px rgba(41, 155, 70, 0.20);
}

.sk-exam-save svg {
    width: clamp(16px, 1.1vw, 19px);
    height: clamp(16px, 1.1vw, 19px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-exam-modal {
        width: min(920px, calc(100vw - 38px)) !important;
        height: min(560px, calc(100vh - 38px));
        max-height: calc(100vh - 38px);
    }

    .sk-exam-modal-form {
        height: 100%;
        max-height: 100%;
    }
}

@media (max-width: 760px) {
    .sk-exam-modal {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
    }

    .sk-exam-modal-form {
        grid-template-rows: 38px 52px minmax(0, 1fr) 72px 38px;
        height: 100%;
        max-height: 100%;
    }

    .sk-exam-modal-title {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 7px;
    }

    .sk-exam-modal-icon {
        width: 24px;
        height: 24px;
    }

    .sk-exam-modal-icon svg {
        width: 14px;
        height: 14px;
    }

    .sk-exam-modal-head h2 {
        margin-bottom: 2px;
        font-size: 12px;
    }

    .sk-exam-modal-head p {
        font-size: 7px;
    }

    .sk-exam-modal-close {
        border-radius: 5px;
    }

    .sk-exam-modal-top,
    .sk-exam-modal-bottom,
    .sk-exam-schedule,
    .sk-exam-modal-head,
    .sk-exam-modal-actions {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sk-exam-modal-top {
        gap: 6px;
    }

    .sk-exam-modal-bottom {
        gap: 8px;
    }

    .sk-exam-modal-actions {
        margin-left: 10px;
        margin-right: 10px;
        padding-top: 6px;
    }
}

/* Shared School Admin layout lock: keep every helper-based page aligned with students2.php. */
.sk-admin-shell {
    display: grid !important;
    grid-template-rows: 104px minmax(0, 1fr) !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    border: 1px solid #d9e5f4 !important;
    border-radius: 10px !important;
    background: #fbfdff !important;
}

.sk-admin-workspace {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.sk-admin-content {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.sk-admin-topbar {
    display: grid !important;
    grid-template-columns: minmax(360px, 500px) minmax(520px, 820px) minmax(340px, 420px) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 13px 32px 12px !important;
    border-bottom: 1px solid #e3ebf6 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 8px 30px rgba(18, 43, 85, 0.03) !important;
    box-sizing: border-box !important;
}

.sk-admin-topbar .sk-school-identity {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 24px !important;
    min-width: 0 !important;
}

.sk-admin-topbar .sk-school-logo {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
}

.sk-admin-topbar .sk-school-identity strong {
    display: block !important;
    max-width: 270px !important;
    color: #08175a !important;
    font-family: "InterBold", Arial, sans-serif !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
}

.sk-admin-topbar .sk-dashboard-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 68px !important;
    min-width: 0 !important;
    padding: 0 22px !important;
    border: 1px solid #d9e5f4 !important;
    border-radius: 10px !important;
    color: #66718d !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(16, 40, 92, 0.035) !important;
    box-sizing: border-box !important;
}

.sk-admin-topbar .sk-dashboard-search svg {
    flex: 0 0 auto !important;
    width: 31px !important;
    height: 31px !important;
    margin-right: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
}

.sk-admin-topbar .sk-dashboard-search input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    border: 0 !important;
    outline: 0 !important;
    color: #29365d !important;
    background: transparent !important;
    font-family: "InterMedium", Arial, sans-serif !important;
    font-size: 21px !important;
}

.sk-admin-topbar .sk-topbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 28px !important;
    min-width: 0 !important;
}

.sk-admin-topbar .sk-message-top-button,
.sk-admin-topbar .sk-bell-button {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #5b657f !important;
    background: transparent !important;
    cursor: pointer !important;
}

.sk-admin-topbar .sk-message-top-button svg,
.sk-admin-topbar .sk-bell-button svg {
    width: 33px !important;
    height: 33px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.sk-admin-topbar .sk-message-top-button span,
.sk-admin-topbar .sk-bell-button span {
    position: absolute !important;
    right: 0 !important;
    top: -2px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    border: 3px solid #ffffff !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: #ff3152 !important;
    font-family: "InterBold", Arial, sans-serif !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.sk-admin-topbar .sk-admin-menu {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 285px !important;
    color: #071553 !important;
}

.sk-admin-topbar .sk-admin-menu > img {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #edf3fb !important;
}

.sk-admin-topbar .sk-admin-menu strong {
    display: block !important;
    overflow: hidden !important;
    color: #071553 !important;
    font-family: "InterBold", Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1.12 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.sk-admin-topbar .sk-admin-menu small {
    display: block !important;
    margin-top: 6px !important;
    color: #6d778f !important;
    font-family: "InterMedium", Arial, sans-serif !important;
    font-size: 16px !important;
}

.sk-admin-topbar .sk-admin-menu > svg {
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: #63708d !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.sk-admin-sidebar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 10px 14px !important;
    border-right: 1px solid #dfe8f5 !important;
    background: #ffffff !important;
}

.sk-admin-sidebar .sk-students-nav {
    display: grid !important;
    gap: 2px !important;
}

.sk-admin-sidebar .sk-students-nav:first-child {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
}

.sk-admin-sidebar .sk-students-nav-bottom {
    flex: 0 0 auto !important;
    padding-top: 8px !important;
    border-top: 1px solid #e4ebf5 !important;
}

.sk-admin-sidebar .sk-students-nav a {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    order: 0 !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 18px !important;
    border-radius: 11px !important;
    color: #263861 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: "InterMedium", Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.sk-admin-sidebar .sk-students-nav a::before {
    content: "" !important;
    position: absolute !important;
    left: -16px !important;
    top: 5px !important;
    width: 5px !important;
    height: 21px !important;
    border-radius: 999px !important;
    background: transparent !important;
}

.sk-admin-sidebar .sk-students-nav a.is-active {
    color: #0963ff !important;
    background: #eef5ff !important;
    box-shadow: inset 0 0 0 1px rgba(9, 99, 255, 0.16) !important;
    font-family: "InterSemiBold", Arial, sans-serif !important;
}

.sk-admin-sidebar .sk-students-nav a:hover {
    color: #0963ff !important;
    background: #f3f8ff !important;
}

.sk-admin-sidebar .sk-students-nav a.is-active:hover {
    background: #eef5ff !important;
}

.sk-admin-sidebar .sk-students-nav a.is-active::before {
    background: #0963ff !important;
}

.sk-admin-sidebar .sk-students-nav a:hover::before {
    background: rgba(9, 99, 255, 0.36) !important;
}

.sk-admin-sidebar .sk-students-nav a.is-active:hover::before {
    background: #0963ff !important;
}

.sk-admin-sidebar .sk-students-nav a:focus-visible {
    outline: 2px solid #0963ff !important;
    outline-offset: 1px !important;
}

.sk-admin-sidebar .sk-students-nav img,
.sk-admin-sidebar .sk-students-nav .sk-side-menu-svg {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

.sk-admin-sidebar .sk-students-nav .sk-side-menu-svg {
    display: block !important;
}

.sk-admin-sidebar .sk-students-nav a.is-active img,
.sk-admin-sidebar .sk-students-nav a:hover img {
    filter: saturate(1.25) brightness(1.02) !important;
}

.sk-admin-sidebar .sk-students-nav span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.sk-admin-footer {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0 !important;
    height: 24px !important;
    padding: 0 !important;
    border-top: 0 !important;
    color: #6d778f !important;
    font-family: "InterMedium", Arial, sans-serif !important;
    font-size: 13px !important;
}

.sk-admin-footer span:first-child {
    text-align: left !important;
}

.sk-admin-footer span:nth-child(2) {
    text-align: center !important;
}

.sk-admin-footer span:last-child {
    text-align: right !important;
}

.sk-admin-footer strong {
    color: #f01f1f !important;
    font-family: "InterBold", Arial, sans-serif !important;
}

.sk-notifications-main.sk-admin-content {
    grid-template-rows: 86px 50px minmax(0, 1fr) 24px !important;
    padding-bottom: 0 !important;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-admin-shell {
        grid-template-rows: 74px minmax(0, 1fr) !important;
        border-radius: 8px !important;
    }

    .sk-admin-topbar {
        grid-template-columns: minmax(190px, 320px) minmax(220px, 1fr) minmax(210px, 320px) !important;
        gap: 18px !important;
        padding: 10px 28px !important;
    }

    .sk-admin-topbar .sk-school-identity {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .sk-admin-topbar .sk-school-logo {
        width: 54px !important;
        height: 54px !important;
    }

    .sk-admin-topbar .sk-school-identity strong {
        max-width: 210px !important;
        font-size: 18px !important;
    }

    .sk-admin-topbar .sk-dashboard-search {
        height: 48px !important;
        padding: 0 16px !important;
        border-radius: 10px !important;
    }

    .sk-admin-topbar .sk-dashboard-search svg {
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px !important;
    }

    .sk-admin-topbar .sk-dashboard-search input {
        font-size: 16px !important;
    }

    .sk-admin-topbar .sk-topbar-actions {
        gap: 14px !important;
    }

    .sk-admin-topbar .sk-message-top-button,
    .sk-admin-topbar .sk-bell-button {
        width: 38px !important;
        height: 38px !important;
    }

    .sk-admin-topbar .sk-message-top-button svg,
    .sk-admin-topbar .sk-bell-button svg {
        width: 28px !important;
        height: 28px !important;
    }

    .sk-admin-topbar .sk-message-top-button span,
    .sk-admin-topbar .sk-bell-button span {
        min-width: 22px !important;
        height: 22px !important;
        border-width: 2px !important;
        font-size: 11px !important;
    }

    .sk-admin-topbar .sk-admin-menu {
        grid-template-columns: 50px minmax(0, 1fr) 18px !important;
        gap: 10px !important;
        min-width: 190px !important;
    }

    .sk-admin-topbar .sk-admin-menu > img {
        width: 50px !important;
        height: 50px !important;
    }

    .sk-admin-topbar .sk-admin-menu strong {
        font-size: 16px !important;
    }

    .sk-admin-topbar .sk-admin-menu small {
        margin-top: 3px !important;
        font-size: 12px !important;
    }

    .sk-admin-workspace {
        grid-template-columns: 168px minmax(0, 1fr) !important;
    }

    .sk-admin-sidebar {
        padding: 7px 8px 9px !important;
    }

    .sk-admin-sidebar .sk-students-nav {
        gap: 1px !important;
    }

    .sk-admin-sidebar .sk-students-nav a {
        grid-template-columns: 16px minmax(0, 1fr) !important;
        gap: 8px !important;
        height: 26px !important;
        padding: 0 11px !important;
        border-radius: 9px !important;
        font-size: 10px !important;
    }

    .sk-admin-sidebar .sk-students-nav a::before {
        left: -8px !important;
        top: 4px !important;
        height: 14px !important;
    }

    .sk-admin-sidebar .sk-students-nav img,
    .sk-admin-sidebar .sk-students-nav .sk-side-menu-svg {
        width: 13px !important;
        height: 13px !important;
    }

    .sk-admin-footer {
        gap: 10px !important;
        height: 18px !important;
        padding: 0 !important;
        font-size: 9px !important;
    }

    .sk-notifications-main.sk-admin-content {
        grid-template-rows: 72px 44px minmax(0, 1fr) 18px !important;
    }
}

@media (max-width: 760px) {
    .sk-admin-shell {
        grid-template-rows: 64px minmax(0, 1fr) !important;
    }

    .sk-admin-topbar {
        grid-template-columns: minmax(120px, 1fr) minmax(90px, 1fr) minmax(86px, auto) !important;
        gap: 6px !important;
        padding: 6px 10px !important;
    }

    .sk-admin-topbar .sk-school-identity {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    .sk-admin-topbar .sk-school-logo {
        width: 38px !important;
        height: 38px !important;
    }

    .sk-admin-topbar .sk-school-identity strong {
        max-width: 110px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .sk-admin-topbar .sk-dashboard-search {
        height: 34px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
    }

    .sk-admin-topbar .sk-dashboard-search svg {
        width: 16px !important;
        height: 16px !important;
        margin-right: 5px !important;
    }

    .sk-admin-topbar .sk-dashboard-search input {
        font-size: 10px !important;
    }

    .sk-admin-topbar .sk-topbar-actions {
        gap: 5px !important;
    }

    .sk-admin-topbar .sk-message-top-button,
    .sk-admin-topbar .sk-bell-button {
        width: 28px !important;
        height: 28px !important;
    }

    .sk-admin-topbar .sk-message-top-button svg,
    .sk-admin-topbar .sk-bell-button svg {
        width: 20px !important;
        height: 20px !important;
    }

    .sk-admin-topbar .sk-message-top-button span,
    .sk-admin-topbar .sk-bell-button span {
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        font-size: 8px !important;
    }

    .sk-admin-topbar .sk-admin-menu {
        grid-template-columns: 32px minmax(0, 54px) 12px !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    .sk-admin-topbar .sk-admin-menu > img {
        width: 32px !important;
        height: 32px !important;
    }

    .sk-admin-topbar .sk-admin-menu strong {
        font-size: 9px !important;
    }

    .sk-admin-topbar .sk-admin-menu small {
        margin-top: 2px !important;
        font-size: 7px !important;
    }

    .sk-admin-topbar .sk-admin-menu > svg {
        width: 12px !important;
        height: 12px !important;
    }

    .sk-admin-workspace {
        grid-template-columns: 132px minmax(0, 1fr) !important;
    }

    .sk-admin-sidebar {
        padding: 8px 6px !important;
    }

    .sk-admin-sidebar .sk-students-nav {
        gap: 2px !important;
    }

    .sk-admin-sidebar .sk-students-nav-bottom {
        padding-top: 8px !important;
    }

    .sk-admin-sidebar .sk-students-nav a {
        grid-template-columns: 14px minmax(0, 1fr) !important;
        gap: 6px !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    .sk-admin-sidebar .sk-students-nav a::before {
        left: -6px !important;
        top: 7px !important;
        width: 3px !important;
        height: 20px !important;
    }

    .sk-admin-sidebar .sk-students-nav img,
    .sk-admin-sidebar .sk-students-nav .sk-side-menu-svg {
        width: 14px !important;
        height: 14px !important;
    }

    .sk-admin-footer {
        gap: 5px !important;
        height: 12px !important;
        padding: 0 !important;
        font-size: 5px !important;
    }

    .sk-notifications-main.sk-admin-content {
        grid-template-rows: 46px 30px minmax(0, 1fr) 12px !important;
    }
}

@media (max-height: 430px) {
    .sk-admin-shell {
        grid-template-rows: 54px minmax(0, 1fr) !important;
    }

    .sk-admin-topbar {
        grid-template-columns: minmax(150px, 230px) minmax(160px, 1fr) minmax(140px, 220px) !important;
        gap: 8px !important;
        padding: 5px 18px !important;
    }

    .sk-admin-topbar .sk-school-identity {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .sk-admin-topbar .sk-school-logo {
        width: 40px !important;
        height: 40px !important;
    }

    .sk-admin-topbar .sk-school-identity strong {
        max-width: 170px !important;
        font-size: 13px !important;
    }

    .sk-admin-topbar .sk-dashboard-search {
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
    }

    .sk-admin-topbar .sk-dashboard-search svg {
        width: 18px !important;
        height: 18px !important;
        margin-right: 7px !important;
    }

    .sk-admin-topbar .sk-dashboard-search input {
        font-size: 12px !important;
    }

    .sk-admin-topbar .sk-topbar-actions {
        gap: 6px !important;
    }

    .sk-admin-topbar .sk-message-top-button,
    .sk-admin-topbar .sk-bell-button {
        width: 30px !important;
        height: 30px !important;
    }

    .sk-admin-topbar .sk-message-top-button svg,
    .sk-admin-topbar .sk-bell-button svg {
        width: 21px !important;
        height: 21px !important;
    }

    .sk-admin-topbar .sk-message-top-button span,
    .sk-admin-topbar .sk-bell-button span {
        min-width: 17px !important;
        height: 17px !important;
        border-width: 2px !important;
        font-size: 8px !important;
    }

    .sk-admin-topbar .sk-admin-menu {
        grid-template-columns: 34px minmax(0, 1fr) 13px !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .sk-admin-topbar .sk-admin-menu > img {
        width: 34px !important;
        height: 34px !important;
    }

    .sk-admin-topbar .sk-admin-menu strong {
        font-size: 10px !important;
    }

    .sk-admin-topbar .sk-admin-menu small {
        margin-top: 1px !important;
        font-size: 8px !important;
    }

    .sk-admin-topbar .sk-admin-menu > svg {
        width: 13px !important;
        height: 13px !important;
    }

    .sk-admin-workspace {
        grid-template-columns: 148px minmax(0, 1fr) !important;
    }

    .sk-admin-sidebar {
        padding: 7px 9px !important;
    }

    .sk-admin-sidebar .sk-students-nav {
        gap: 2px !important;
    }

    .sk-admin-sidebar .sk-students-nav a {
        grid-template-columns: 17px minmax(0, 1fr) !important;
        gap: 6px !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 8px !important;
        font-size: 8px !important;
    }

    .sk-admin-sidebar .sk-students-nav img,
    .sk-admin-sidebar .sk-students-nav .sk-side-menu-svg {
        width: 13px !important;
        height: 13px !important;
    }

    .sk-admin-footer {
        height: 11px !important;
        padding: 0 !important;
        font-size: 6px !important;
    }
}

/* Shared School Admin overview top section: keep reused Students heading/stats rhythm identical on upgraded screens. */
.sk-admin-overview-main {
    grid-template-rows: 58px 82px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 18px 16px 0;
}

.sk-teachers-main {
    padding: 18px 16px 0;
}

.sk-classes-body .sk-admin-overview-main.sk-classes-main {
    grid-template-rows: 58px 82px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 18px 16px 0;
}

/* Match Timetable.php heading top spacing on sections.php only. */
.sk-sections-body .sk-admin-overview-main.sk-classes-main {
    padding-top: 20px;
}

@media (max-width: 1180px), (max-height: 760px) {
    .sk-admin-overview-main {
        grid-template-rows: 48px 62px minmax(0, 1fr) 18px;
        gap: 8px;
        padding: 12px 12px 0;
    }

    .sk-teachers-main {
        padding: 12px 12px 0;
    }

    .sk-classes-body .sk-admin-overview-main.sk-classes-main {
        grid-template-rows: 48px 62px minmax(0, 1fr) 18px;
        gap: 8px;
        padding: 12px 12px 0;
    }
}

@media (max-width: 760px), (max-height: 560px) {
    .sk-admin-overview-main {
        grid-template-rows: 30px 38px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 9px 7px 0;
    }

    .sk-teachers-main {
        padding: 9px 7px 0;
    }

    .sk-classes-body .sk-admin-overview-main.sk-classes-main {
        grid-template-rows: 30px 38px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 9px 7px 0;
    }
}

@media (max-width: 600px), (max-height: 430px) {
    .sk-admin-overview-main {
        grid-template-rows: 30px 32px minmax(0, 1fr) 11px;
        gap: 4px;
    }

    .sk-teachers-main {
        padding: 8px 7px 0;
    }

    .sk-classes-body .sk-admin-overview-main.sk-classes-main {
        grid-template-rows: 30px 32px minmax(0, 1fr) 11px;
        gap: 4px;
        padding: 8px 7px 0;
    }
}

/* Match students2.php content spacing for Attendance and Exam main page areas. */
.sk-attendance-body {
    --sk-attendance-main-pad-y: 18px;
    --sk-attendance-main-pad-x: 16px;
}

.sk-attendance-body .sk-attendance-main {
    padding: 18px 16px 0;
}

.sk-exams-main {
    padding: 20px 16px 0;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-attendance-body {
        --sk-attendance-main-pad-y: 12px;
        --sk-attendance-main-pad-x: 12px;
    }

    .sk-attendance-body .sk-attendance-main,
    .sk-exams-main {
        padding: 12px 12px 0;
    }
}

@media (max-width: 760px) {
    .sk-attendance-body {
        --sk-attendance-main-pad-y: 9px;
        --sk-attendance-main-pad-x: 7px;
    }

    .sk-attendance-body .sk-attendance-main,
    .sk-exams-main {
        padding: 9px 7px 0;
    }
}

@media (max-height: 430px) {
    .sk-attendance-body {
        --sk-attendance-main-pad-y: 8px;
        --sk-attendance-main-pad-x: 7px;
    }

    .sk-attendance-body .sk-attendance-main,
    .sk-exams-main {
        padding: 8px 7px 0;
    }
}

/* Align requested page titles and title-to-content spacing with Certificates/Attendance. */
.sk-attendance-body .sk-attendance-main,
.sk-exams-main {
    gap: 12px;
}

.sk-attendance-body .sk-attendance-heading h1,
.sk-exams-titlebar h1 {
    font-size: 28px;
}

.sk-attendance-body .sk-attendance-heading p,
.sk-exams-titlebar p {
    margin-top: 8px;
    color: #435895;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-attendance-body .sk-attendance-main,
    .sk-exams-main {
        gap: 8px;
    }

    .sk-attendance-body .sk-attendance-heading h1,
    .sk-exams-titlebar h1 {
        font-size: 23px;
    }
}

@media (max-width: 760px) {
    .sk-attendance-body .sk-attendance-main,
    .sk-exams-main {
        gap: 4px;
    }

    .sk-attendance-body .sk-attendance-heading h1,
    .sk-exams-titlebar h1 {
        font-size: 15px;
    }
}

@media (max-height: 430px) {
    .sk-attendance-body .sk-attendance-main,
    .sk-exams-main {
        gap: 4px;
    }
}

@media (max-width: 1366px) {
    .sk-attendance-body .sk-attendance-heading h1,
    .sk-exams-titlebar h1 {
        font-size: 23px;
    }

    .sk-attendance-body .sk-attendance-heading p,
    .sk-exams-titlebar p {
        margin-top: 5px;
        font-size: 12px;
    }
}

@media (max-width: 900px) {
    .sk-attendance-body .sk-attendance-heading h1,
    .sk-exams-titlebar h1 {
        font-size: 15px;
    }

    .sk-attendance-body .sk-attendance-heading p,
    .sk-exams-titlebar p {
        margin-top: 2px;
        font-size: 9px;
    }
}

/* Parent detail page: align Parent Info with Teacher Info spacing and move CNIC previews to a document tab. */
.sk-parent-detail-page .sk-dashboard-topbar {
    grid-template-columns: minmax(360px, 510px) minmax(460px, 630px) minmax(310px, 360px);
    min-height: 104px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sk-parent-detail-page .sk-parent-detail-shell {
    grid-template-rows: 104px minmax(0, 1fr);
    border-radius: 0;
}

.sk-parent-detail-page .sk-parent-detail-workspace {
    grid-template-columns: 250px minmax(0, 1fr);
}

.sk-parent-detail-page .sk-parent-detail-main {
    grid-template-rows: 58px minmax(0, 1fr) 24px;
    gap: 10px;
    padding: 18px 16px 0;
}

.sk-parent-detail-page .sk-parent-detail-heading {
    align-items: flex-start;
}

.sk-parent-detail-page .sk-parent-detail-actions {
    padding-top: 0;
}

.sk-parent-detail-page .sk-detail-action {
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
}

.sk-parent-detail-page .sk-parent-detail-panel {
    grid-template-rows: 52px minmax(0, 1fr);
    width: auto !important;
    margin-right: 0;
    box-sizing: border-box;
    border-radius: 14px;
}

.sk-parent-detail-page .sk-parent-detail-tabs {
    height: 52px;
    gap: 20px;
    padding: 0 22px;
}

.sk-parent-detail-page .sk-parent-detail-tabs > div,
.sk-parent-detail-page .bar-item,
.sk-parent-detail-page .bar-item-active {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: auto;
    height: 52px;
    padding: 0;
    color: #2b3a66;
    cursor: pointer;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
}

.sk-parent-detail-page .sk-parent-detail-tabs p,
.sk-parent-detail-page .bar-item p,
.sk-parent-detail-page .bar-item-active p {
    margin: 0;
    padding: 0 10px;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.sk-parent-detail-page .sk-parent-detail-tabs p:hover,
.sk-parent-detail-page .bar-item p:hover,
.sk-parent-detail-page .bar-item-active p:hover {
    min-width: 0;
    height: auto;
    padding: 0 10px;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: inherit;
}

.sk-parent-detail-page .bar-item-active {
    color: #0963ff;
    font-family: "InterSemiBold", Arial, sans-serif;
}

.sk-parent-detail-page .tab-section {
    display: none;
}

.sk-parent-detail-page #parent-info {
    display: none;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    width: auto !important;
    height: 100% !important;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 6px 16px 14px;
    overflow: hidden;
    background: #ffffff;
}

.sk-parent-detail-page #parent-info.show {
    display: grid !important;
}

.sk-parent-detail-page #parent-info > .userInfo,
.sk-parent-detail-page #parent-info > .content-details {
    min-width: 0;
    border: 1px solid #e3ebf6;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(16, 40, 92, 0.055);
}

.sk-parent-detail-page #parent-info > .userInfo {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 12px 18px 14px;
    overflow: hidden;
}

.sk-parent-detail-page #parent-avatar-info {
    width: 100%;
    height: 155px;
    margin: 0;
    border-radius: 10px;
    object-fit: cover;
    background: #edf3fb;
}

.sk-parent-detail-page .sk-parent-profile-summary {
    min-width: 0;
    padding: 13px 6px 12px;
    border-bottom: 1px solid #e4ebf5;
}

.sk-parent-detail-page .sk-parent-profile-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.sk-parent-detail-page .sk-parent-profile-summary strong {
    overflow: hidden;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-detail-page .sk-parent-profile-summary span {
    flex: 0 0 auto;
    min-width: 50px;
    padding: 4px 8px;
    border-radius: 8px;
    color: #168b31;
    background: #e7f8e9;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
    text-align: center;
}

.sk-parent-detail-page .sk-parent-profile-summary dl {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
}

.sk-parent-detail-page .sk-parent-profile-summary dl div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.sk-parent-detail-page .sk-parent-profile-summary dl div::before {
    content: "";
    width: 16px;
    height: 16px;
    background: #0963ff;
    -webkit-mask: var(--parent-summary-icon) center / contain no-repeat;
    mask: var(--parent-summary-icon) center / contain no-repeat;
}

.sk-parent-detail-page .sk-parent-profile-summary dl div:nth-child(1)::before {
    --parent-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sk-parent-detail-page .sk-parent-profile-summary dl div:nth-child(2)::before {
    --parent-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM22 21v-2a4 4 0 0 0-3-3.5M16 3.5a4 4 0 0 1 0 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sk-parent-detail-page .sk-parent-profile-summary dl div:nth-child(3)::before {
    --parent-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 2 2.4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sk-parent-detail-page .sk-parent-profile-summary dl div:nth-child(4)::before {
    --parent-summary-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sk-parent-detail-page .sk-parent-profile-summary dt,
.sk-parent-detail-page .sk-parent-profile-summary dd {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    color: #4e5d82;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-detail-page .sk-parent-profile-summary dd {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
}

.sk-parent-detail-page #parent-info .aRecord {
    margin: 10px 0 0;
    padding: 0;
}

.sk-parent-detail-page #parent-info .aRecord > p {
    margin: 0 0 7px;
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

.sk-parent-detail-page #parent-info .atRecord {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    margin-top: 4px;
}

.sk-parent-detail-page .sk-parent-contact-count {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    color: #071553;
    background: #eef5ff;
    border: 8px solid #d7e8ff;
}

.sk-parent-detail-page .sk-parent-contact-count strong {
    margin-top: 12px;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
}

.sk-parent-detail-page .sk-parent-contact-count span {
    margin-top: -18px;
    color: #4e5d82;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 11px;
}

.sk-parent-detail-page #parent-info .atContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: end;
    gap: 10px;
    min-width: 0;
    margin-top: 0;
    padding-left: 0;
}

.sk-parent-detail-page #parent-info .content-item {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 !important;
    color: #2b3a66;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-detail-page #parent-info .content-item div {
    flex: 0 0 auto;
    border-radius: 3px;
}

.sk-parent-detail-page #parent-info .content-item p {
    overflow: hidden;
    margin: 0;
    color: #071553;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-detail-page #parent-info > .content-details {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 134px minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    align-items: center;
    gap: 9px 24px;
    width: 100% !important;
    max-width: none;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0 !important;
    padding: 10px 16px;
    overflow: hidden;
}

.sk-parent-detail-page #parent-info .tworows,
.sk-parent-detail-page #parent-info .item-left-lable,
.sk-parent-detail-page #parent-info .item-left-lable-text,
.sk-parent-detail-page #parent-info .sk-detail-address-row,
.sk-parent-detail-page #parent-info .sk-detail-other-row {
    display: contents;
}

.sk-parent-detail-page #parent-info .sk-detail-address-row p,
.sk-parent-detail-page #parent-info .sk-detail-other-row p {
    grid-column: 1;
}

.sk-parent-detail-page #parent-info .sk-detail-address-row input,
.sk-parent-detail-page #parent-info .sk-detail-other-row textarea {
    grid-column: 2 / -1;
}

.sk-parent-detail-page #parent-info .item-left-lable p,
.sk-parent-detail-page #parent-info .item-left-lable-text p {
    align-self: center;
    width: auto !important;
    margin: 0;
    color: #071553;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-detail-page #parent-info .item-left-lable input,
.sk-parent-detail-page #parent-info .item-left-lable-text textarea {
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #d7e1ee;
    border-radius: 6px;
    color: #071553;
    background: #fbfcff;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-detail-page #parent-info .item-left-lable input:disabled,
.sk-parent-detail-page #parent-info .item-left-lable-text textarea:disabled {
    opacity: 1;
    -webkit-text-fill-color: #071553;
}

.sk-parent-detail-page #parent-info .item-left-lable-text textarea {
    resize: none;
}

.sk-parent-detail-page #parent-documents.show {
    display: grid !important;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 14px 16px;
    overflow: hidden;
    background: #ffffff;
}

.sk-parent-detail-page .sk-parent-documents-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
    min-height: 0;
}

.sk-parent-detail-page .sk-parent-document-card {
    display: grid;
    grid-template-rows: 56px minmax(0, 1fr) 42px;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 14px;
    border: 1px solid #e3ebf6;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(16, 40, 92, 0.055);
}

.sk-parent-detail-page .sk-parent-document-card header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sk-parent-detail-page .sk-parent-document-card header > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #0963ff;
    background: #eaf3ff;
}

.sk-parent-detail-page .sk-parent-document-card svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-parent-detail-page .sk-parent-document-card h3,
.sk-parent-detail-page .sk-parent-document-card p {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-parent-detail-page .sk-parent-document-card h3 {
    color: #071553;
    font-family: "InterBold", Arial, sans-serif;
    font-size: 17px;
}

.sk-parent-detail-page .sk-parent-document-card p {
    margin-top: 5px;
    color: #52607f;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 13px;
}

.sk-parent-detail-page .sk-parent-document-preview {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: 10px;
    background: #f6f9fe;
}

.sk-parent-detail-page .sk-parent-document-preview img {
    width: min(520px, 92%);
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
}

.sk-parent-detail-page .sk-parent-document-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(240px, 100%);
    height: 40px;
    justify-self: center;
    border: 1px solid #0963ff;
    border-radius: 8px;
    color: #0963ff;
    background: #ffffff;
    text-decoration: none;
    font-family: "InterMedium", Arial, sans-serif;
    font-size: 14px;
}

.sk-parent-detail-page #students.sk-parent-students-tab.show {
    display: grid !important;
    grid-template-rows: 52px minmax(0, 1fr) 76px 0;
    gap: 10px;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 6px 16px 14px;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
}

.sk-parent-detail-page #students .sk-parent-students-toolbar {
    min-height: 0;
    padding-bottom: 8px;
}

.sk-parent-detail-page .sk-parent-detail-main > .sk-students-footer {
    height: 38px;
    font-size: 13px;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-parent-detail-page .sk-dashboard-topbar {
        grid-template-columns: minmax(230px, 320px) minmax(260px, 1fr) minmax(210px, 320px);
        min-height: 74px;
    }

    .sk-parent-detail-page .sk-parent-detail-shell {
        grid-template-rows: 74px minmax(0, 1fr);
    }

    .sk-parent-detail-page .sk-parent-detail-workspace {
        grid-template-columns: 168px minmax(0, 1fr);
    }

    .sk-parent-detail-page .sk-parent-detail-main {
        grid-template-rows: 48px minmax(0, 1fr) 18px;
        gap: 7px;
        padding: 14px 12px 0;
    }

    .sk-parent-detail-page .sk-detail-action {
        height: 36px;
        padding: 0 14px;
        border-radius: 7px;
        font-size: 12px;
    }

    .sk-parent-detail-page .sk-parent-detail-panel {
        grid-template-rows: 42px minmax(0, 1fr);
        border-radius: 11px;
    }

    .sk-parent-detail-page .sk-parent-detail-tabs {
        height: 42px;
        gap: 20px;
        padding: 0 22px 0 0;
    }

    .sk-parent-detail-page .sk-parent-detail-tabs > div,
    .sk-parent-detail-page .bar-item,
    .sk-parent-detail-page .bar-item-active {
        height: 42px;
        font-size: 12px;
    }

    .sk-parent-detail-page #parent-info {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 8px;
        padding: 5px 12px 10px;
    }

    .sk-parent-detail-page #parent-info > .userInfo {
        padding: 9px 12px;
    }

    .sk-parent-detail-page #parent-avatar-info {
        height: 112px;
        border-radius: 8px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary {
        padding: 9px 4px 8px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary strong {
        font-size: 14px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary span {
        min-width: 42px;
        padding: 3px 6px;
        border-radius: 6px;
        font-size: 9px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dl {
        gap: 7px;
        margin-top: 10px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dl div {
        grid-template-columns: 14px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dl div::before {
        width: 13px;
        height: 13px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dt,
    .sk-parent-detail-page .sk-parent-profile-summary dd {
        font-size: 11px;
    }

    .sk-parent-detail-page #parent-info .aRecord {
        margin-top: 7px;
    }

    .sk-parent-detail-page #parent-info .aRecord > p {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .sk-parent-detail-page #parent-info .atRecord {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 9px;
    }

    .sk-parent-detail-page .sk-parent-contact-count {
        width: 62px;
        height: 62px;
        border-width: 6px;
    }

    .sk-parent-detail-page .sk-parent-contact-count strong {
        margin-top: 8px;
        font-size: 17px;
    }

    .sk-parent-detail-page .sk-parent-contact-count span {
        margin-top: -14px;
        font-size: 8px;
    }

    .sk-parent-detail-page #parent-info .atContent {
        gap: 6px;
    }

    .sk-parent-detail-page #parent-info .content-item {
        font-size: 10px;
    }

    .sk-parent-detail-page #parent-info > .content-details {
        grid-template-columns: 92px minmax(0, 1fr) 104px minmax(0, 1fr);
        gap: 7px 14px;
        padding: 8px 11px;
    }

    .sk-parent-detail-page #parent-info .item-left-lable p,
    .sk-parent-detail-page #parent-info .item-left-lable-text p {
        font-size: 10px;
    }

    .sk-parent-detail-page #parent-info .item-left-lable input,
    .sk-parent-detail-page #parent-info .item-left-lable-text textarea {
        height: 30px;
        padding: 0 8px;
        font-size: 10px;
    }

    .sk-parent-detail-page #parent-documents.show {
        padding: 10px 12px;
    }

    .sk-parent-detail-page .sk-parent-documents-panel {
        gap: 10px;
    }

    .sk-parent-detail-page .sk-parent-document-card {
        grid-template-rows: 44px minmax(0, 1fr) 32px;
        gap: 8px;
        padding: 10px;
        border-radius: 10px;
    }

    .sk-parent-detail-page .sk-parent-document-card header {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
    }

    .sk-parent-detail-page .sk-parent-document-card header > span {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .sk-parent-detail-page .sk-parent-document-card h3 {
        font-size: 13px;
    }

    .sk-parent-detail-page .sk-parent-document-card p,
    .sk-parent-detail-page .sk-parent-document-card a {
        font-size: 10px;
    }

    .sk-parent-detail-page .sk-parent-document-card a {
        height: 30px;
        border-radius: 7px;
    }

    .sk-parent-detail-page #students.sk-parent-students-tab.show {
        grid-template-rows: 42px minmax(0, 1fr) 58px 0;
        gap: 8px;
        padding: 5px 12px 10px;
    }

    .sk-parent-detail-page #students .sk-parent-students-toolbar {
        padding-bottom: 6px;
    }

    .sk-parent-detail-page .sk-parent-detail-main > .sk-students-footer {
        height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 760px) {
    .sk-parent-detail-page .sk-dashboard-topbar {
        min-height: 64px;
    }

    .sk-parent-detail-page .sk-parent-detail-shell {
        grid-template-rows: 64px minmax(0, 1fr);
    }

    .sk-parent-detail-page .sk-parent-detail-workspace {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .sk-parent-detail-page .sk-parent-detail-main {
        grid-template-rows: 38px minmax(0, 1fr) 12px;
        gap: 4px;
        padding: 7px 9px 0;
    }

    .sk-parent-detail-page .sk-detail-action {
        height: 23px;
        padding: 0 6px;
        gap: 3px;
        border-radius: 5px;
        font-size: 6px;
    }

    .sk-parent-detail-page .sk-parent-detail-panel {
        grid-template-rows: 28px minmax(0, 1fr);
        border-radius: 8px;
    }

    .sk-parent-detail-page .sk-parent-detail-tabs {
        height: 28px;
        gap: 7px;
        padding: 0 8px 0 0;
    }

    .sk-parent-detail-page .sk-parent-detail-tabs > div,
    .sk-parent-detail-page .bar-item,
    .sk-parent-detail-page .bar-item-active {
        height: 28px;
        padding: 0 2px;
        font-size: 6px;
    }

    .sk-parent-detail-page #parent-info {
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 5px;
        padding: 4px 6px 6px;
    }

    .sk-parent-detail-page #parent-info > .userInfo {
        padding: 5px 6px;
        border-radius: 7px;
    }

    .sk-parent-detail-page #parent-avatar-info {
        height: 54px;
        border-radius: 5px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary {
        padding: 4px 2px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary strong {
        font-size: 7px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary span {
        min-width: 22px;
        padding: 2px 3px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dl {
        gap: 3px;
        margin-top: 5px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dl div {
        grid-template-columns: 7px minmax(0, 1fr) auto;
        gap: 4px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dl div::before {
        width: 6px;
        height: 6px;
    }

    .sk-parent-detail-page .sk-parent-profile-summary dt,
    .sk-parent-detail-page .sk-parent-profile-summary dd {
        font-size: 5px;
    }

    .sk-parent-detail-page #parent-info .aRecord {
        margin-top: 4px;
    }

    .sk-parent-detail-page #parent-info .aRecord > p {
        margin-bottom: 3px;
        font-size: 6px;
    }

    .sk-parent-detail-page #parent-info .atRecord {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 4px;
    }

    .sk-parent-detail-page .sk-parent-contact-count {
        width: 34px;
        height: 34px;
        border-width: 3px;
    }

    .sk-parent-detail-page .sk-parent-contact-count strong {
        margin-top: 5px;
        font-size: 9px;
    }

    .sk-parent-detail-page .sk-parent-contact-count span {
        margin-top: -9px;
        font-size: 4px;
    }

    .sk-parent-detail-page #parent-info .atContent {
        gap: 2px;
    }

    .sk-parent-detail-page #parent-info .content-item {
        gap: 3px;
        font-size: 5px;
    }

    .sk-parent-detail-page #parent-info .content-item div {
        width: 5px !important;
        height: 5px !important;
    }

    .sk-parent-detail-page #parent-info > .content-details {
        grid-template-columns: 47px minmax(0, 1fr) 54px minmax(0, 1fr);
        gap: 3px 6px;
        padding: 4px 5px;
        border-radius: 7px;
    }

    .sk-parent-detail-page #parent-info .item-left-lable p,
    .sk-parent-detail-page #parent-info .item-left-lable-text p {
        font-size: 5px;
    }

    .sk-parent-detail-page #parent-info .item-left-lable input,
    .sk-parent-detail-page #parent-info .item-left-lable-text textarea {
        height: 16px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-detail-page #parent-documents.show {
        padding: 6px;
    }

    .sk-parent-detail-page .sk-parent-documents-panel {
        gap: 6px;
    }

    .sk-parent-detail-page .sk-parent-document-card {
        grid-template-rows: 24px minmax(0, 1fr) 16px;
        gap: 4px;
        padding: 5px;
        border-radius: 7px;
    }

    .sk-parent-detail-page .sk-parent-document-card header {
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 5px;
    }

    .sk-parent-detail-page .sk-parent-document-card header > span {
        width: 18px;
        height: 18px;
        border-radius: 5px;
    }

    .sk-parent-detail-page .sk-parent-document-card svg {
        width: 8px;
        height: 8px;
    }

    .sk-parent-detail-page .sk-parent-document-card h3 {
        font-size: 7px;
    }

    .sk-parent-detail-page .sk-parent-document-card p {
        margin-top: 1px;
        font-size: 5px;
    }

    .sk-parent-detail-page .sk-parent-document-preview {
        border-radius: 5px;
    }

    .sk-parent-detail-page .sk-parent-document-preview img {
        border-radius: 4px;
    }

    .sk-parent-detail-page .sk-parent-document-card a {
        height: 13px;
        gap: 3px;
        border-radius: 4px;
        font-size: 5px;
    }

    .sk-parent-detail-page #students.sk-parent-students-tab.show {
        grid-template-rows: 22px minmax(0, 1fr) 30px 0;
        gap: 4px;
        padding: 4px 6px 6px;
    }

    .sk-parent-detail-page #students .sk-parent-students-toolbar {
        padding-bottom: 3px;
    }

    .sk-parent-detail-page .sk-parent-detail-main > .sk-students-footer {
        height: 12px;
        font-size: 5px;
    }
}

/* Attendance final overrides: keep this page compact and app-scrollable after shared responsive rules. */
.sk-attendance-body .sk-attendance-filters {
    padding-top: clamp(3px, .46vw, 8px);
    padding-bottom: clamp(3px, .46vw, 8px);
}

.sk-attendance-body .sk-attendance-table-card,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-card,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-card {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6d4ea transparent;
}

.sk-attendance-body .sk-attendance-table {
    min-width: 900px;
}

.sk-attendance-body .sk-attendance-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sk-attendance-body .sk-attendance-table th:nth-child(1),
.sk-attendance-body .sk-attendance-table td:nth-child(1),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(1),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(1),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(1),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(1) {
    width: clamp(24px, 2.3vw, 38px);
    text-align: center;
}

.sk-attendance-body .sk-attendance-table th:nth-child(8),
.sk-attendance-body .sk-attendance-table td:nth-child(8),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(8),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(8),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(8),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(8) {
    width: clamp(138px, 11vw, 176px);
}

/* Student Attendance table: drop the boxed card wrapper (leaked border/table-layout
   from the unscoped .sk-attendance-table-card/.sk-attendance-table rules used by the
   student/teacher detail attendance register) and let the table fill the panel width.
   The card itself stays borderless/scrollable and the table carries its own rounded
   border, matching the Teacher/Staff Attendance tab pattern. */
.sk-attendance-body #students-attendance .sk-attendance-table-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sk-attendance-body #students-attendance .sk-attendance-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border: 1px solid #e1e9f4;
    border-radius: 8px;
}

.sk-attendance-body #students-attendance .sk-attendance-table th,
.sk-attendance-body #students-attendance .sk-attendance-table td {
    border-right: 0;
}

.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(1),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(1) {
    width: clamp(28px, 2.2vw, 36px);
    min-width: 0;
    max-width: none;
    padding: 0 4px;
    text-align: center;
}

/* Re-declare the remaining column widths at ID specificity so the leaked
   .sk-attendance-table th:not(:first-child) { width/min-width/max-width: 34px }
   rule (from the detail-page attendance register CSS) cannot flatten every
   other column to the same width via the fixed-table-layout proportional
   redistribution. Values mirror the intended widths already used elsewhere
   on this page. */
.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(2),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(2) {
    width: 22%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(3),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(3) {
    width: 12%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(4),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(4) {
    width: 14%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(5),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(5),
.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(6),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(6) {
    width: 13%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(7),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(7) {
    width: 16%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body #students-attendance .sk-attendance-table th:nth-child(8),
.sk-attendance-body #students-attendance .sk-attendance-table td:nth-child(8) {
    width: clamp(138px, 11vw, 176px);
    min-width: 0;
    max-width: none;
}

.sk-attendance-body .sk-attendance-row-actions,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions {
    justify-content: center;
    gap: clamp(2px, .3vw, 5px);
}

.sk-attendance-body .sk-attendance-row-actions button,
.sk-attendance-body .sk-attendance-row-actions a,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions button,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions a,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions button,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions a {
    width: clamp(18px, 1.55vw, 27px);
    height: clamp(18px, 1.55vw, 27px);
    border-color: #d7e0ee;
    border-radius: clamp(4px, .41vw, 7px);
    background: #ffffff;
}

.sk-attendance-body .sk-attendance-row-actions svg {
    width: clamp(9px, .8vw, 14px);
    height: clamp(9px, .8vw, 14px);
}

.sk-attendance-row-actions .is-present-action { color: #15803d; }
.sk-attendance-row-actions .is-late-action { color: #f97316; }
.sk-attendance-row-actions .is-leave-action { color: #7747e8; }
.sk-attendance-row-actions .is-half-action { color: #0963ff; }
.sk-attendance-row-actions .is-checkout-action { color: #0f766e; }

/* Teacher/Staff Action column icons must match Student Attendance's per-status
   colors. An earlier teacher/staff-only rule forces every row-action button to
   color:#0963ff (blue), which out-specifies the plain .is-present-action etc.
   color rules above, flattening every icon to the same blue. Restore each
   icon's own color here at higher (ID-qualified) specificity. */
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions .is-present-action,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions .is-present-action {
    color: #15803d;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions .is-late-action,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions .is-late-action {
    color: #f97316;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions .is-leave-action,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions .is-leave-action {
    color: #7747e8;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions .is-half-action,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions .is-half-action {
    color: #0963ff;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-row-actions .is-checkout-action,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-row-actions .is-checkout-action {
    color: #0f766e;
}

.sk-attendance-row-actions button:hover,
.sk-attendance-row-actions button:focus-visible,
.sk-attendance-row-actions a:hover,
.sk-attendance-row-actions a:focus-visible {
    border-color: currentColor;
    background: #f7faff;
    outline: 0;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-board,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-board {
    grid-template-rows: var(--sk-attendance-board-tabs) auto minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid #dfe8f5;
    border-radius: var(--sk-attendance-card-radius);
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(16, 40, 92, 0.06);
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-tabs,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-tabs {
    align-items: flex-end;
    justify-content: flex-start;
    gap: clamp(13px, 2.55vw, 44px);
    overflow: hidden;
    padding: 0 clamp(8px, 1.62vw, 28px);
    border: 0;
    border-bottom: 1px solid #dfe8f5;
    border-radius: 0;
    background: #fbfdff;
    box-shadow: none;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-tabs button,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-tabs button {
    min-width: 0;
    height: var(--sk-attendance-board-tabs);
    color: #35456d;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-tabs button.is-active,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-tabs button.is-active {
    color: #0963ff;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance {
    grid-template-rows: var(--sk-attendance-panel-stats) var(--sk-attendance-panel-filters) minmax(0, 1fr) var(--sk-attendance-panel-footer);
    gap: 0;
    overflow: hidden;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-stats,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-stats {
    gap: clamp(4px, 1.2vw, 24px);
    padding: clamp(7px, 1.27vw, 22px) clamp(6px, 1.04vw, 18px);
    border-bottom: 1px solid #edf2f8;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-filters,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-filters {
    grid-template-columns: minmax(55px, 180px) minmax(0, 1fr) minmax(42px, .9fr) clamp(32px, 6.25vw, 108px);
    align-items: end;
    gap: clamp(4px, 1.16vw, 20px);
    padding-top: clamp(3px, .46vw, 8px);
    padding-bottom: clamp(3px, .46vw, 8px);
    border: 0;
    border-bottom: 1px solid #edf2f8;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-card,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-card {
    padding: clamp(4px, .58vw, 10px) clamp(6px, 1.04vw, 18px) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border: 1px solid #e1e9f4;
    border-radius: 8px;
}

/* Columns 4-7 (Status/Check In/Check Out/Remarks) had no Teacher/Staff-specific
   width, so under table-layout:fixed they fell to the leaked, unscoped
   .sk-attendance-table th:not(:first-child) { width/min-width/max-width: 34px }
   rule from the detail-page attendance register CSS, flattening them (same bug
   already fixed on the Student Attendance table). Re-declare them here at the
   same ID+class specificity already used for columns 1/2/3/8 below so the table
   can use table-layout:fixed and stretch to the panel's full width. */
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(4),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(4),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(4),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(4) {
    width: 14%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(5),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(5),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(6),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(6),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(5),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(5),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(6),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(6) {
    width: 13%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(7),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(7),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(7),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(7) {
    width: 16%;
    min-width: 0;
    max-width: none;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(1),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(1),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(2),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(2),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(3),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(3),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(1),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(1),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(2),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(2),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(3),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(3) {
    min-width: 0;
    max-width: none;
}

/* Action column now holds the same 5 icon buttons (Present/Late/Leave/Half
   Day/Check Out) as Student Attendance (Edit was removed from all three
   tabs), so it uses the exact same width as Student's Action column. */
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th:nth-child(8),
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td:nth-child(8),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th:nth-child(8),
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td:nth-child(8) {
    width: clamp(138px, 11vw, 176px);
    min-width: 0;
    max-width: none;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table th,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table td,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table th,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table td {
    border-right: 0;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-footer,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-footer {
    grid-template-columns: minmax(0, 1fr) auto auto;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-footer p,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-footer p {
    grid-column: auto;
    display: block;
    text-align: left;
}

.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-table-footer label,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-table-footer label,
.sk-attendance-body.is-teacher-attendance-view #teachers-attendance .sk-attendance-pagination,
.sk-attendance-body.is-staff-attendance-view #other-staff-attendance .sk-attendance-pagination {
    grid-column: auto;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action small,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-action small {
    display: block;
}

/* Quick Actions on the Teacher/Staff tabs must look identical to the Student
   Attendance tab's colored action cards. Earlier teacher/staff-only rules
   (.is-teacher-attendance-view .sk-attendance-action / .is-staff-attendance-view
   .sk-attendance-action) flattened every button to a plain white/blue style and
   forced the icon to always be blue; restore each button's own color-coded
   look here since CSS can't "fall back" to a lower-specificity rule once a
   higher-specificity one has declared a property. */
.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-action {
    border-color: currentColor;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action > svg:first-child,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-action > svg:first-child {
    color: inherit;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action.sk-action-green,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-action.sk-action-green {
    color: #16a34a;
    background: #f4fff7;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action.sk-action-blue,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-action.sk-action-blue {
    color: #0963ff;
    background: #f5f9ff;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action.sk-action-purple,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-action.sk-action-purple {
    color: #7747e8;
    background: #f8f5ff;
}

.sk-attendance-body.is-teacher-attendance-view .sk-attendance-action.sk-action-orange,
.sk-attendance-body.is-staff-attendance-view .sk-attendance-action.sk-action-orange {
    color: #ff8a00;
    background: #fff8f1;
}

.sk-mark-attendance-overlay {
    background: rgba(12, 18, 31, 0.58);
}

.sk-mark-attendance-modal {
    border-color: #dfe8f5;
    border-radius: clamp(7px, 1vw, 14px);
    box-shadow: 0 24px 64px rgba(8, 13, 31, 0.30);
}

.sk-mark-attendance-modal form {
    grid-template-rows: clamp(44px, 7.2vh, 76px) clamp(52px, 8.9vh, 94px) minmax(0, 1fr) clamp(40px, 6.1vh, 64px);
}

.sk-mark-attendance-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(24px, 2.2vw, 38px);
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #dfe8f5;
}

.sk-mark-attendance-title {
    display: grid;
    grid-template-columns: clamp(30px, 3vw, 52px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
    min-width: 0;
}

.sk-mark-attendance-icon {
    display: grid;
    place-items: center;
    width: clamp(30px, 3vw, 52px);
    height: clamp(30px, 3vw, 52px);
    border-radius: 50%;
    color: #0963ff;
    background: #edf4ff;
}

.sk-mark-attendance-icon svg {
    width: clamp(16px, 1.62vw, 28px);
    height: clamp(16px, 1.62vw, 28px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sk-mark-attendance-head p {
    overflow: hidden;
    margin-top: clamp(2px, .35vw, 6px);
    color: #52648f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-mark-attendance-close {
    width: clamp(24px, 2.2vw, 34px);
    height: clamp(24px, 2.2vw, 34px);
    border: 1px solid #d7e0ee;
    border-radius: clamp(6px, .58vw, 8px);
    color: #071553;
    background: #ffffff;
}

.sk-mark-attendance-close:hover,
.sk-mark-attendance-close:focus-visible {
    border-color: #c4d4ee;
    background: #f7faff;
    outline: 0;
}

.sk-mark-attendance-filters {
    padding-top: clamp(5px, .65vw, 10px);
    padding-bottom: clamp(5px, .65vw, 10px);
    border-color: #dfe8f5;
    background: #fbfdff;
}

.sk-mark-attendance-filters input,
.sk-mark-attendance-filters select,
.sk-mark-attendance-table input[type="text"] {
    border-color: #d7e0ee;
}

.sk-mark-attendance-filters input:focus,
.sk-mark-attendance-filters select:focus,
.sk-mark-attendance-table input[type="text"]:focus,
.sk-mark-status-select:focus {
    border-color: #0963ff;
    box-shadow: 0 0 0 3px rgba(9, 99, 255, 0.10);
    outline: 0;
}

.sk-mark-attendance-table-wrap {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6d4ea transparent;
}

.sk-mark-attendance-table {
    min-width: 920px;
}

.sk-mark-attendance-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7faff;
}

.sk-mark-attendance-actions {
    border-top: 1px solid #dfe8f5;
}

.sk-mark-attendance-actions button:first-child {
    border-color: #b8c4da;
}

.sk-mark-attendance-actions button:last-child {
    border-color: #299b46;
    background: #299b46;
    box-shadow: 0 10px 18px rgba(41, 155, 70, 0.20);
}
/* Reusable compact authorization message shown after a denied page request. */
.sk-access-denied {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    background: #fff1f2;
    font-family: "InterSemiBold", Arial, sans-serif;
    font-size: clamp(10px, 0.85vw, 13px);
}

.sk-dashboard-heading .sk-access-denied {
    flex: 0 1 520px;
    min-height: 34px;
    margin: 0;
    color: #991b1b;
    font-size: clamp(10px, 0.85vw, 13px);
}

/* Exams: calculate both content columns from the viewport space left after
   the shared sidebar. Explicit zero-minimum tracks keep the right panels from
   contributing a wider intrinsic size and being clipped at tablet widths. */
.sk-exams-body {
    --sk-exams-nav-width: 250px;
    --sk-exams-aside-width: clamp(130px, 16vw, 270px);
    --sk-exams-layout-gap: clamp(5px, 1.27vw, 22px);
}

.sk-exams-body .sk-exams-workspace {
    grid-template-columns:
        var(--sk-exams-nav-width)
        minmax(0, calc(100vw - var(--sk-exams-nav-width) - 2px)) !important;
}

.sk-exams-body .sk-exams-main,
.sk-exams-body .sk-exams-layout,
.sk-exams-body .sk-exams-sidebar,
.sk-exams-body .sk-exams-actions,
.sk-exams-body .sk-exams-deadlines {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.sk-exams-body .sk-exams-layout {
    grid-template-columns:
        minmax(0, calc(100% - var(--sk-exams-aside-width) - var(--sk-exams-layout-gap)))
        minmax(0, var(--sk-exams-aside-width));
    gap: var(--sk-exams-layout-gap);
}

.sk-exams-body .sk-exams-side-card,
.sk-exams-body .sk-attendance-action,
.sk-exams-body .sk-attendance-action > span,
.sk-exams-body .sk-exams-deadlines h2 span {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1280px), (max-height: 760px) {
    .sk-exams-body {
        --sk-exams-nav-width: 168px;
    }
}

@media (max-width: 800px) {
    .sk-exams-body {
        --sk-exams-aside-width: clamp(118px, 17.25vw, 138px);
        --sk-exams-layout-gap: clamp(4px, 1vw, 8px);
    }

    .sk-exams-body .sk-attendance-side-card,
    .sk-exams-body .sk-exams-side-card {
        padding-right: clamp(5px, 1vw, 8px);
        padding-left: clamp(5px, 1vw, 8px);
    }

    .sk-exams-body .sk-attendance-action {
        grid-template-columns: 13px minmax(0, 1fr) 8px;
        gap: 3px;
        min-height: 32px;
        padding: 3px 4px;
    }

    .sk-exams-body .sk-attendance-action svg {
        width: 12px;
        height: 12px;
    }

    .sk-exams-body .sk-attendance-action strong {
        font-size: 9px;
    }

    .sk-exams-body .sk-attendance-action small {
        margin-top: 2px;
        font-size: 7px;
        line-height: 1.15;
    }

    .sk-exams-body .sk-attendance-side-card h2,
    .sk-exams-body .sk-exams-side-card h2 {
        gap: 5px;
        font-size: 10px;
        line-height: 1.15;
    }

    .sk-exams-body .sk-exams-side-card h2 svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .sk-exams-body .sk-exams-deadlines h2 span {
        white-space: normal;
    }

    .sk-exams-body .sk-exams-deadlines strong {
        font-size: 10px;
    }

    .sk-exams-body .sk-exams-deadlines small,
    .sk-exams-body .sk-exams-deadlines button {
        font-size: 8px;
    }

    .sk-exams-body .sk-exams-deadlines button {
        min-width: 0;
        padding: 0 5px;
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .sk-exams-body {
        --sk-exams-nav-width: 88px;
    }
}