/* =========================================================
   TUKLASS SPA ROUTES
   The sidebar stays mounted. Only .dashboard-main changes.
========================================================= */

html.tuklass-route-boot #dashboard .dashboard-main {
    visibility: hidden;
}

body.tuklass-is-navigating {
    cursor: progress;
}

#dashboard .dashboard-main {
    view-transition-name: tuklass-content;
}

#dashboard .sidebar {
    view-transition-name: tuklass-sidebar;
}

@view-transition {
    navigation: none;
}

::view-transition-old(tuklass-sidebar),
::view-transition-new(tuklass-sidebar) {
    animation: none;
}

::view-transition-old(tuklass-content) {
    animation: tuklassSpaOut 140ms ease both;
}

::view-transition-new(tuklass-content) {
    animation: tuklassSpaIn 220ms cubic-bezier(.2,.75,.25,1) both;
}

@keyframes tuklassSpaOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-5px); }
}

@keyframes tuklassSpaIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tuklass-route {
    --route-bg: #f7f9fb;
    --route-surface: #fff;
    --route-soft: #f2f5f7;
    --route-text: #15181b;
    --route-muted: #737c85;
    --route-border: #e4e9ed;
    --route-green: #a8ff24;
    --route-green-strong: #7fce00;
    --route-green-soft: #efffd8;
    --route-dark: #111417;

    width: min(1380px, 100%);
    margin: 0 auto;
    color: var(--route-text);
}

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

.route-kicker {
    color: var(--route-green-strong);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.route-head h1 {
    margin-top: 5px;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -.05em;
}

.route-head p {
    max-width: 680px;
    margin-top: 8px;
    color: var(--route-muted);
    font-size: 14px;
    line-height: 1.6;
}

.route-head-icon {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--route-green-soft);
}

.route-head-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.route-small-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--route-soft);
}

.route-small-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.route-count {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--route-green-soft);
    color: #4e7700;
    font-size: 10px;
    font-weight: 900;
}

.spa-black-button,
.center-button,
.dashboard-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border: 0;
    border-radius: 10px;
    background: var(--route-dark);
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.spa-black-button:hover,
.center-button:hover,
.dashboard-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(17,20,23,.15);
}

.route-full-button {
    width: 100%;
}

.route-loading-card,
.route-empty,
.center,
.route-lock-card,
.messages-empty,
.messages-error {
    padding: 34px;
    border: 1px solid var(--route-border);
    border-radius: 18px;
    background: white;
    text-align: center;
    box-shadow: 0 5px 20px rgba(15,23,42,.03);
}

.route-loading-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 160px;
    color: var(--route-muted);
    font-size: 13px;
}

.route-spinner,
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e7ecef;
    border-top-color: var(--route-green-strong);
    border-radius: 50%;
    animation: tuklassRouteSpin .7s linear infinite;
}

@keyframes tuklassRouteSpin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   CATALOG
========================================================= */

.catalog-search-wrap {
    position: relative;
    margin-bottom: 30px;
}

.catalog-search-wrap::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 22px;
    width: 15px;
    height: 15px;
    border: 2px solid #6d7780;
    border-radius: 50%;
    pointer-events: none;
}

.catalog-search-wrap::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 37px;
    width: 8px;
    height: 2px;
    background: #6d7780;
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

.catalog-search {
    width: 100%;
    height: 62px;
    padding: 0 22px 0 56px;
    border: 1px solid var(--route-border);
    border-radius: 17px;
    outline: none;
    background: white;
    color: var(--route-text);
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(17,20,23,.04);
}

.catalog-search:focus {
    border-color: #b8dc80;
    box-shadow: 0 0 0 4px rgba(168,255,36,.11);
}

.catalog-subject {
    margin-bottom: 34px;
}

.catalog-subject-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.catalog-subject-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.catalog-subject-title h2 {
    font-size: 21px;
    letter-spacing: -.025em;
}

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

.catalog-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--route-border);
    border-radius: 18px;
    background: white;
    box-shadow: 0 5px 20px rgba(15,23,42,.03);
    transition: transform .2s ease, box-shadow .2s ease;
}

.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(17,20,23,.06);
}

.catalog-card-top {
    display: flex;
    align-items: center;
    gap: 13px;
}

.catalog-card-icon {
    width: 57px;
    height: 57px;
    flex: 0 0 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--route-soft);
}

.catalog-card-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.catalog-label {
    color: var(--route-green-strong);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.catalog-card h3 {
    margin-top: 4px;
    font-size: 18px;
    letter-spacing: -.025em;
}

.catalog-card p {
    margin: 15px 0 18px;
    color: var(--route-muted);
    font-size: 12px;
    line-height: 1.6;
}

.catalog-card .spa-black-button {
    align-self: flex-start;
    margin-top: auto;
}

/* =========================================================
   CALENDAR
========================================================= */

.update-indicator {
    display: none;
    width: fit-content;
    margin: -10px 0 15px auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--route-green-soft);
    color: #4e7700;
    font-size: 10px;
    font-weight: 900;
}

.registration-card,
.status-card,
.calendar-card,
.side-card,
.class-card,
.card {
    border: 1px solid var(--route-border);
    border-radius: 18px;
    background: white;
    box-shadow: 0 5px 20px rgba(15,23,42,.03);
}

.registration-card {
    width: min(620px,100%);
    margin: 24px auto;
    padding: 28px;
}

.registration-card h2 {
    font-size: 24px;
    letter-spacing: -.035em;
}

.field {
    margin-top: 15px;
}

.field label {
    display: block;
    margin-bottom: 7px;
    color: #4d5660;
    font-size: 12px;
    font-weight: 800;
}

.field input,
.field textarea,
.event-input,
.event-textarea {
    width: 100%;
    border: 1px solid var(--route-border);
    border-radius: 11px;
    outline: none;
    background: white;
    color: var(--route-text);
}

.field input,
.event-input {
    height: 44px;
    padding: 0 12px;
}

.field textarea,
.event-textarea {
    min-height: 88px;
    padding: 12px;
    resize: vertical;
}

.field input:focus,
.field textarea:focus,
.event-input:focus,
.event-textarea:focus {
    border-color: #b7d980;
    box-shadow: 0 0 0 4px rgba(168,255,36,.11);
}

.primary-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: var(--route-dark);
    color: white;
    padding: 0 17px;
    cursor: pointer;
    font-weight: 800;
}

.registration-card .primary-button,
.form-card .primary-button {
    width: 100%;
    margin-top: 16px;
}

.primary-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.form-message {
    min-height: 20px;
    margin-top: 8px;
    font-size: 12px;
}

.status-card {
    margin-bottom: 16px;
    padding: 15px 18px;
}

.status-card.approved {
    background: var(--route-green-soft);
    border-color: #d4efaa;
}

.status-card.pending {
    background: #fff7df;
    border-color: #f0dca5;
}

.status-text {
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
}

.calendar-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 16px;
    align-items: start;
}

.calendar-card {
    overflow: hidden;
}

.calendar-toolbar {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--route-border);
}

#monthTitle {
    font-size: 20px;
    letter-spacing: -.025em;
}

.month-buttons {
    display: flex;
    align-items: center;
    gap: 7px;
}

.month-button {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--route-border);
    border-radius: 10px;
    background: white;
    color: var(--route-text);
    cursor: pointer;
    font-weight: 800;
}

.month-button:hover {
    background: var(--route-soft);
}

.weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
}

.weekdays {
    background: #fafbfc;
    border-bottom: 1px solid var(--route-border);
}

.weekday {
    padding: 10px 5px;
    text-align: center;
    color: #8a939b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.day {
    position: relative;
    min-height: 118px;
    padding: 9px;
    overflow: hidden;
    background: white;
    border-right: 1px solid var(--route-border);
    border-bottom: 1px solid var(--route-border);
    cursor: pointer;
}

.day:nth-child(7n) {
    border-right: none;
}

.day.other-month {
    background: #fafbfc;
    color: #aeb5bb;
}

.day.today {
    background: linear-gradient(145deg,#fff,#f7ffea);
}

.day-number {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 900;
}

.day.today .day-number {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--route-dark);
    color: var(--route-green);
}

.event-chip {
    width: 100%;
    margin-top: 4px;
    padding: 5px 6px;
    overflow: hidden;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-class {
    background: #edf4ff;
    color: #315b9b;
}

.event-test {
    background: #fff1f1;
    color: #b42318;
}

.event-personal {
    background: var(--route-green-soft);
    color: #527d05;
}

.event-saving {
    opacity: .65;
}

.event-failed {
    background: #fff1f1;
    color: #dc2626;
    text-decoration: line-through;
}

.side-card {
    position: sticky;
    top: 20px;
    padding: 20px;
}

.side-card h2 {
    font-size: 20px;
    letter-spacing: -.03em;
}

.upcoming-event {
    padding: 13px 0;
    border-bottom: 1px solid var(--route-border);
}

.upcoming-date {
    color: #8b949c;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.upcoming-title {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 900;
}

.upcoming-meta {
    margin-top: 3px;
    color: var(--route-muted);
    font-size: 10px;
}

.personal-delete {
    margin-top: 7px;
    border: none;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.add-event {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--route-border);
}

.add-event h3 {
    margin-bottom: 12px;
    font-size: 16px;
}

.event-input {
    margin-bottom: 9px;
}

.event-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.route-lock {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.route-lock-card {
    width: min(520px,100%);
}

.route-lock-card .route-head-icon {
    margin: 0 auto 18px;
}

.route-lock-card h2 {
    font-size: 28px;
    letter-spacing: -.04em;
}

.route-lock-card p {
    margin: 8px 0 18px;
    color: var(--route-muted);
}

/* =========================================================
   REMINDERS
========================================================= */

.class-card {
    padding: 18px 20px;
    margin-bottom: 15px;
    background: linear-gradient(140deg,#fff,#f7ffed);
}

.class-label {
    color: var(--route-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.class-name {
    margin-top: 5px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 16px;
    align-items: start;
}

.card {
    padding: 20px;
}

.form-card {
    position: sticky;
    top: 20px;
}

.form-card h2 {
    font-size: 20px;
    letter-spacing: -.03em;
}

.list-header {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--route-border);
}

.list-header strong {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.reminder {
    padding: 16px 0;
    border-bottom: 1px solid var(--route-border);
}

.reminder:last-child {
    border-bottom: none;
}

.reminder-title {
    font-size: 14px;
    font-weight: 900;
}

.reminder-meta {
    margin-top: 4px;
    color: var(--route-muted);
    font-size: 11px;
}

.reminder-description {
    margin-top: 7px;
    color: #59636d;
    font-size: 12px;
    line-height: 1.55;
}

.reminder-actions {
    margin-top: 9px;
}

.delete-button {
    border: none;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.center {
    width: min(620px,100%);
    margin: 35px auto;
}

.center h2 {
    margin-top: 8px;
    font-size: 23px;
}

.center p {
    margin: 8px 0 16px;
    color: var(--route-muted);
    line-height: 1.6;
}

/* =========================================================
   MESSAGES
========================================================= */

.messages-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unread-total {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--route-green);
    color: #142000;
    font-size: 11px;
    font-weight: 900;
}

.hidden {
    display: none !important;
}

.conversation-list {
    overflow: hidden;
    border: 1px solid var(--route-border);
    border-radius: 18px;
    background: white;
    box-shadow: 0 5px 20px rgba(15,23,42,.03);
}

.conversation {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) auto;
    align-items: center;
    gap: 13px;
    min-height: 82px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--route-border);
    cursor: pointer;
    transition: background .15s ease;
}

.conversation:last-child {
    border-bottom: none;
}

.conversation:hover {
    background: #fafcfd;
}

.conversation.unread {
    background: #fbfff4;
}

.conversation-picture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--route-green-strong);
}

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

.conversation-top {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.conversation-name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conversation-username {
    color: var(--route-green-strong);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.conversation-preview {
    margin-top: 4px;
    overflow: hidden;
    color: var(--route-muted);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conversation-right {
    min-width: 58px;
    text-align: right;
}

.conversation-time {
    color: #929aa2;
    font-size: 10px;
}

.unread-badge {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--route-green);
    color: #142000;
    font-size: 9px;
    font-weight: 900;
}

.messages-empty,
.messages-error {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.messages-empty strong {
    display: block;
    margin-top: 10px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
    .calendar-layout,
    .layout {
        grid-template-columns: 1fr;
    }

    .side-card,
    .form-card {
        position: static;
    }
}

@media (max-width: 760px) {
    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .route-head {
        align-items: flex-start;
    }

    .route-head-icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
    }

    .route-head-icon img {
        width: 40px;
        height: 40px;
    }

    .day {
        min-height: 88px;
        padding: 6px;
    }
}

@media (max-width: 560px) {
    .route-head-icon {
        display: none;
    }

    .route-head h1 {
        font-size: 34px;
    }

    .calendar-toolbar {
        padding: 10px;
    }

    #monthTitle {
        font-size: 16px;
    }

    .month-button {
        min-width: 34px;
        height: 34px;
        padding: 0 7px;
    }

    .today-button {
        font-size: 10px;
    }

    .weekday {
        font-size: 8px;
    }

    .day {
        min-height: 72px;
        padding: 4px;
    }

    .event-chip {
        font-size: 7px;
        padding: 4px;
    }

    .event-row {
        grid-template-columns: 1fr;
    }

    .conversation {
        grid-template-columns: 44px minmax(0,1fr) auto;
        padding: 11px;
    }

    .conversation-picture {
        width: 42px;
        height: 42px;
    }

    .conversation-username {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}


/* =========================================================
   CHAT
   Clean conversation view with no text bubbles.
========================================================= */

.route-chat {
    width: 100%;
    max-width: none;
    height:
        calc(
            100vh -
            64px
        );

    min-height:
        620px;
}


.chat-shell {
    height: 100%;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        var(--route-border);

    border-radius:
        22px;

    background:
        white;

    box-shadow:
        0 14px 40px
        rgba(
            17,
            20,
            23,
            .06
        );
}


.chat-header {
    min-height:
        76px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        11px 16px;

    border-bottom:
        1px solid
        var(--route-border);

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    backdrop-filter:
        blur(
            14px
        );
}


.chat-back {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--route-border);

    border-radius:
        12px;

    background:
        white;

    color:
        var(--route-text);

    text-decoration:
        none;

    transition:
        background .16s ease,
        transform .16s ease;
}


.chat-back span {
    display:
        block;

    margin-top:
        -2px;

    font-size:
        31px;

    font-weight:
        500;

    line-height:
        1;
}


.chat-back:hover {
    background:
        var(--route-soft);

    transform:
        translateX(
            -2px
        );
}


.chat-recipient {
    min-width:
        0;

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.chat-recipient-picture {
    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    border:
        2px solid
        var(--route-green-strong);

    border-radius:
        50%;

    object-fit:
        cover;

    background:
        var(--route-soft);
}


.chat-recipient-copy {
    min-width:
        0;
}


.chat-recipient-name {
    overflow:
        hidden;

    color:
        var(--route-text);

    font-size:
        14px;

    font-weight:
        900;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.chat-recipient-username {
    margin-top:
        3px;

    color:
        var(--route-green-strong);

    font-size:
        11px;

    font-weight:
        800;
}


.chat-header-mark {
    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--route-green-soft);
}


.chat-header-mark img {
    width:
        31px;

    height:
        31px;

    object-fit:
        contain;
}


/* MESSAGE CANVAS */

.chat-messages {
    min-height:
        0;

    flex:
        1;

    overflow-y:
        auto;

    padding:
        30px
        clamp(
            18px,
            5vw,
            70px
        );

    scroll-behavior:
        smooth;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(
                168,
                255,
                36,
                .06
            ),
            transparent
            24%
        ),
        #fafbfc;

    scrollbar-width:
        thin;

    scrollbar-color:
        #d9dfe3
        transparent;
}


.chat-messages::-webkit-scrollbar {
    width:
        8px;
}


.chat-messages::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        #d9dfe3;
}


.chat-empty,
#empty {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        180px;

    padding:
        28px;

    color:
        var(--route-muted);

    text-align:
        center;

    font-size:
        13px;
}


/* NO TEXT BUBBLES */

.route-chat
.message-row {
    width:
        100%;

    display:
        flex;

    margin-bottom:
        18px;
}


.route-chat
.message-row.mine {
    justify-content:
        flex-end;
}


.route-chat
.message-row.theirs {
    justify-content:
        flex-start;
}


.route-chat
.bubble-wrapper {
    width:
        fit-content;

    max-width:
        min(
            72%,
            620px
        );

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.route-chat
.mine
.bubble-wrapper {
    align-items:
        flex-end;
}


.route-chat
.bubble {
    display:
        block;

    width:
        auto;

    min-width:
        0;

    max-width:
        100%;

    margin:
        0;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        var(--route-text) !important;

    font-size:
        14px;

    line-height:
        1.55;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


.route-chat
.mine
.bubble {
    text-align:
        right;
}


.route-chat
.theirs
.bubble {
    text-align:
        left;
}


.route-chat
.mine
.bubble > div {
    display:
        inline;

    box-decoration-break:
        clone;
}


.route-chat
.mine
.bubble::selection,
.route-chat
.theirs
.bubble::selection {
    background:
        rgba(
            168,
            255,
            36,
            .35
        );
}


.route-chat
.time {
    margin-top:
        5px;

    color:
        #939ba3;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.2;
}


.route-chat
.mine
.time {
    text-align:
        right;

    color:
        #749d33;
}


.route-chat
.message-image {
    display:
        block;

    width:
        auto;

    max-width:
        min(
            440px,
            100%
        );

    max-height:
        430px;

    margin:
        0;

    border:
        1px solid
        var(--route-border);

    border-radius:
        16px;

    object-fit:
        contain;

    background:
        white;

    cursor:
        pointer;

    box-shadow:
        0 8px 24px
        rgba(
            17,
            20,
            23,
            .06
        );
}


.route-chat
.image-message-bubble {
    overflow:
        visible;

    padding:
        0 !important;
}


/* COMPOSER */

.chat-composer {
    flex:
        0 0 auto;

    padding:
        12px 14px;

    border-top:
        1px solid
        var(--route-border);

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    backdrop-filter:
        blur(
            16px
        );
}


.chat-image-preview {
    width:
        min(
            850px,
            100%
        );

    margin:
        0 auto
        10px;
}


.preview-wrapper {
    position:
        relative;

    display:
        inline-block;
}


#previewImage {
    display:
        block;

    max-width:
        190px;

    max-height:
        145px;

    border:
        1px solid
        var(--route-border);

    border-radius:
        14px;

    object-fit:
        cover;

    box-shadow:
        0 8px 20px
        rgba(
            17,
            20,
            23,
            .07
        );
}


.preview-remove {
    position:
        absolute;

    top:
        -8px;

    right:
        -8px;

    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #efcaca;

    border-radius:
        50%;

    background:
        white;

    color:
        #c93636;

    cursor:
        pointer;

    font-size:
        18px;

    line-height:
        1;

    box-shadow:
        0 4px 12px
        rgba(
            17,
            20,
            23,
            .1
        );
}


.chat-composer-inner {
    width:
        min(
            850px,
            100%
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        46px
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        end;

    gap:
        8px;
}


.chat-photo-button {
    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--route-border);

    border-radius:
        13px;

    background:
        white;

    cursor:
        pointer;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}


.chat-photo-button:hover {
    background:
        var(--route-green-soft);

    border-color:
        #d3eca9;

    transform:
        translateY(
            -1px
        );
}


/*
 * CSS-only photo icon.
 * No emoji or external icon asset needed.
 */

.chat-photo-glyph {
    position:
        relative;

    width:
        21px;

    height:
        17px;

    display:
        block;

    border:
        2px solid
        #5e6871;

    border-radius:
        4px;
}


.chat-photo-glyph::before {
    content:
        "";

    position:
        absolute;

    right:
        3px;

    top:
        3px;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #5e6871;
}


.chat-photo-glyph::after {
    content:
        "";

    position:
        absolute;

    left:
        3px;

    bottom:
        3px;

    width:
        11px;

    height:
        7px;

    border-left:
        2px solid
        #5e6871;

    border-bottom:
        2px solid
        #5e6871;

    transform:
        skewX(
            -34deg
        )
        rotate(
            -7deg
        );
}


.chat-input-wrap {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    min-height:
        46px;

    padding:
        0 3px;

    border:
        1px solid
        var(--route-border);

    border-radius:
        14px;

    background:
        #f8fafb;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}


.chat-input-wrap:focus-within {
    border-color:
        #badc85;

    background:
        white;

    box-shadow:
        0 0 0 4px
        rgba(
            168,
            255,
            36,
            .1
        );
}


#messageInput {
    width:
        100%;

    min-width:
        0;

    min-height:
        44px;

    max-height:
        140px;

    margin:
        0;

    padding:
        12px 11px;

    overflow-y:
        auto;

    border:
        0;

    outline:
        0;

    resize:
        none;

    background:
        transparent;

    color:
        var(--route-text);

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        1.4;
}


#messageInput::placeholder {
    color:
        #9da5ac;
}


.chat-send-button {
    min-width:
        100px;

    height:
        46px;

    display:
        grid;

    grid-template-columns:
        25px
        auto;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 15px;

    border:
        0;

    border-radius:
        13px;

    background:
        var(--route-dark);

    color:
        white;

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        900;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


.chat-send-button:hover {
    transform:
        translateY(
            -1px
        );

    box-shadow:
        0 8px 20px
        rgba(
            17,
            20,
            23,
            .16
        );
}


.chat-send-button:disabled {
    opacity:
        .55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


.chat-send-button img {
    width:
        25px;

    height:
        25px;

    object-fit:
        contain;
}


.chat-send-b {
    display:
        none;
}


.chat-send-button:hover
.chat-send-a {
    display:
        none;
}


.chat-send-button:hover
.chat-send-b {
    display:
        block;
}


/* Pending optimistic messages */

.route-chat
.message-row[
    data-pending-id
] {
    opacity:
        .72;
}


/* =========================================================
   CHAT RESPONSIVE
========================================================= */

@media (
    max-width:
    1100px
) {

    .route-chat {
        height:
            calc(
                100vh -
                54px
            );
    }

}


@media (
    max-width:
    700px
) {

    .chat-header {
        min-height:
            68px;

        padding:
            9px 10px;
    }


    .chat-back {
        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;
    }


    .chat-recipient-picture {
        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;
    }


    .chat-header-mark {
        display:
            none;
    }


    .chat-messages {
        padding:
            22px 14px;
    }


    .route-chat
    .bubble-wrapper {
        max-width:
            84%;
    }


    .route-chat
    .message-image {
        max-width:
            min(
                330px,
                100%
            );

        max-height:
            330px;
    }


    .chat-composer {
        padding:
            9px;
    }


    .chat-composer-inner {
        grid-template-columns:
            43px
            minmax(
                0,
                1fr
            )
            46px;

        gap:
            6px;
    }


    .chat-photo-button {
        width:
            43px;

        height:
            43px;
    }


    .chat-input-wrap {
        min-height:
            43px;
    }


    #messageInput {
        min-height:
            41px;

        padding:
            10px 9px;
    }


    .chat-send-button {
        min-width:
            46px;

        width:
            46px;

        height:
            43px;

        grid-template-columns:
            25px;

        padding:
            0;
    }


    .chat-send-button span {
        display:
            none;
    }

}


@media (
    max-width:
    560px
) {

    .route-chat {
        height:
            calc(
                100vh -
                94px
            );

        min-height:
            520px;
    }


    .chat-shell {
        border-radius:
            16px;
    }


    .chat-recipient-name {
        max-width:
            180px;
    }

}


/* =========================================================
   PROFILE ROUTE
========================================================= */

.profile-route-container {
    width:
        min(
            760px,
            100%
        );

    margin:
        0 auto;
}


.profile-loading-card {
    min-height:
        240px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px solid
        var(--route-border);

    border-radius:
        22px;

    background:
        white;

    color:
        var(--route-muted);

    font-size:
        13px;

    box-shadow:
        0 14px 34px
        rgba(
            17,
            20,
            23,
            .05
        );
}


.route-profile
.profile-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        42px
        34px;

    text-align:
        center;

    border:
        1px solid
        var(--route-border);

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        0 14px 34px
        rgba(
            17,
            20,
            23,
            .05
        );
}


.route-profile
.profile-card::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        108px;

    background:
        linear-gradient(
            135deg,
            rgba(
                168,
                255,
                36,
                .22
            ),
            rgba(
                168,
                255,
                36,
                .04
            )
        );
}


.route-profile
.profile-picture {
    position:
        relative;

    z-index:
        1;

    width:
        124px;

    height:
        124px;

    border:
        4px solid
        white;

    border-radius:
        50%;

    object-fit:
        cover;

    background:
        var(--route-soft);

    box-shadow:
        0 8px 24px
        rgba(
            17,
            20,
            23,
            .11
        );
}


.route-profile
.profile-name {
    margin-top:
        17px;

    font-size:
        29px;

    letter-spacing:
        -.045em;
}


.route-profile
.profile-username {
    margin-top:
        5px;

    color:
        var(--route-green-strong);

    font-size:
        13px;

    font-weight:
        900;
}


.route-profile
.profile-bio {
    max-width:
        520px;

    margin:
        18px auto
        0;

    color:
        var(--route-muted);

    font-size:
        13px;

    line-height:
        1.7;
}


.route-profile
.profile-actions {
    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        25px;
}


.route-profile
.profile-actions
.button.primary {
    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--route-dark);

    color:
        white;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        900;
}


.profile-action-icon {
    width:
        25px;

    height:
        25px;

    object-fit:
        contain;
}


.route-profile
.loading,
.route-profile
.error {
    padding:
        40px;

    text-align:
        center;

    border:
        1px solid
        var(--route-border);

    border-radius:
        20px;

    background:
        white;

    color:
        var(--route-muted);
}


.route-profile
.error {
    color:
        #c93838;
}


/* =========================================================
   SHARED ROUTE FORM FIELDS
========================================================= */

.route-field {
    margin-top:
        16px;
}


.route-field label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #4c5660;

    font-size:
        12px;

    font-weight:
        900;
}


.route-field input,
.route-field textarea {
    width:
        100%;

    border:
        1px solid
        var(--route-border);

    border-radius:
        11px;

    outline:
        none;

    background:
        white;

    color:
        var(--route-text);

    font:
        inherit;

    font-size:
        13px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}


.route-field input {
    height:
        46px;

    padding:
        0 12px;
}


.route-field textarea {
    min-height:
        118px;

    padding:
        12px;

    resize:
        vertical;

    line-height:
        1.55;
}


.route-field input:focus,
.route-field textarea:focus {
    border-color:
        #b9da86;

    box-shadow:
        0 0 0 4px
        rgba(
            168,
            255,
            36,
            .11
        );
}


/* =========================================================
   EDIT PROFILE
========================================================= */

.edit-profile-layout {
    display:
        grid;

    grid-template-columns:
        310px
        minmax(
            0,
            1fr
        );

    gap:
        18px;

    align-items:
        start;
}


.edit-preview-card,
.edit-profile-card {
    border:
        1px solid
        var(--route-border);

    border-radius:
        20px;

    background:
        white;

    box-shadow:
        0 8px 28px
        rgba(
            17,
            20,
            23,
            .04
        );
}


.edit-preview-card {
    position:
        sticky;

    top:
        20px;

    padding:
        28px
        20px;

    text-align:
        center;

    overflow:
        hidden;
}


.edit-preview-card::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        82px;

    background:
        var(--route-green-soft);
}


.edit-preview-label {
    position:
        relative;

    z-index:
        1;

    color:
        #679419;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.edit-preview-picture {
    position:
        relative;

    z-index:
        1;

    width:
        92px;

    height:
        92px;

    margin-top:
        17px;

    border:
        4px solid
        white;

    border-radius:
        50%;

    object-fit:
        cover;

    background:
        var(--route-soft);

    box-shadow:
        0 7px 18px
        rgba(
            17,
            20,
            23,
            .1
        );
}


.edit-preview-name {
    margin-top:
        15px;

    font-size:
        20px;

    font-weight:
        900;

    letter-spacing:
        -.035em;
}


.edit-preview-username {
    margin-top:
        4px;

    color:
        var(--route-green-strong);

    font-size:
        11px;

    font-weight:
        900;
}


.edit-preview-bio {
    margin-top:
        11px;

    color:
        var(--route-muted);

    font-size:
        11px;

    line-height:
        1.6;

    overflow-wrap:
        anywhere;
}


.edit-profile-card {
    padding:
        24px;
}


.edit-photo-area {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        var(--route-border);
}


.edit-profile-picture {
    width:
        96px;

    height:
        96px;

    flex:
        0 0 96px;

    border:
        3px solid
        var(--route-green-strong);

    border-radius:
        50%;

    object-fit:
        cover;

    background:
        var(--route-soft);
}


.edit-photo-copy {
    min-width:
        0;
}


.edit-photo-copy strong,
.edit-photo-copy span {
    display:
        block;
}


.edit-photo-copy strong {
    font-size:
        14px;
}


.edit-photo-copy span {
    max-width:
        420px;

    margin-top:
        5px;

    color:
        var(--route-muted);

    font-size:
        11px;

    line-height:
        1.5;
}


.edit-upload-button {
    min-height:
        38px;

    margin-top:
        10px;

    padding:
        0 13px;

    border:
        1px solid
        var(--route-border);

    border-radius:
        9px;

    background:
        white;

    color:
        var(--route-text);

    cursor:
        pointer;

    font-size:
        11px;

    font-weight:
        900;
}


.edit-upload-button:hover {
    background:
        var(--route-green-soft);
}


.username-input-shell {
    display:
        grid;

    grid-template-columns:
        36px
        minmax(
            0,
            1fr
        );

    align-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        var(--route-border);

    border-radius:
        11px;

    background:
        white;
}


.username-input-shell:focus-within {
    border-color:
        #b9da86;

    box-shadow:
        0 0 0 4px
        rgba(
            168,
            255,
            36,
            .11
        );
}


.username-input-shell span {
    text-align:
        center;

    color:
        var(--route-muted);

    font-size:
        12px;

    font-weight:
        900;
}


.username-input-shell input {
    border:
        0;

    border-left:
        1px solid
        var(--route-border);

    border-radius:
        0;

    box-shadow:
        none !important;
}


#usernameStatus {
    min-height:
        18px;

    margin-top:
        6px;

    font-size:
        11px;
}


#saveButton {
    margin-top:
        20px;
}


#statusMessage {
    min-height:
        20px;

    margin-top:
        10px;

    text-align:
        center;

    font-size:
        11px;
}


/* =========================================================
   ADMIN REMINDERS
========================================================= */

.admin-reminder-card {
    width:
        min(
            780px,
            100%
        );

    margin:
        0 auto;

    padding:
        25px;

    border:
        1px solid
        var(--route-border);

    border-radius:
        20px;

    background:
        white;

    box-shadow:
        0 10px 32px
        rgba(
            17,
            20,
            23,
            .05
        );
}


.admin-warning {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding:
        14px 15px;

    border:
        1px solid
        #dcebbf;

    border-radius:
        12px;

    background:
        var(--route-green-soft);
}


.admin-warning strong {
    color:
        #4f750d;

    font-size:
        12px;
}


.admin-warning span {
    color:
        #66734f;

    font-size:
        11px;

    line-height:
        1.5;
}


.admin-form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        0 14px;
}


#createButton {
    margin-top:
        19px;
}


#message {
    min-height:
        20px;

    margin-top:
        10px;

    text-align:
        center;

    font-size:
        11px;
}


@media (
    max-width:
    840px
) {

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


    .edit-preview-card {
        position:
            static;
    }

}


@media (
    max-width:
    620px
) {

    .edit-photo-area {
        align-items:
            flex-start;
    }


    .edit-profile-picture {
        width:
            78px;

        height:
            78px;

        flex-basis:
            78px;
    }


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


    .route-profile
    .profile-card {
        padding:
            35px 18px;
    }

}

/* =========================================================
   SCHOOL / CLASS ADMIN SYSTEM
========================================================= */

.route-field select {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--route-border);
    border-radius: 11px;
    outline: none;
    background: white;
    color: var(--route-text);
    font: inherit;
    font-size: 13px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.route-field select:focus {
    border-color: #b9da86;
    box-shadow: 0 0 0 4px rgba(168,255,36,.11);
}

.route-field select:disabled {
    background: #f5f7f8;
    color: #8a949b;
    cursor: not-allowed;
}

.admin-route-links {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 18px;
}

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

.admin-management-card,
.admin-directory-card {
    border: 1px solid var(--route-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15,23,42,.04);
}

.admin-management-card {
    padding: 20px;
}

.admin-management-card h2,
.admin-directory-card h2 {
    margin: 4px 0 0;
    font-size: 20px;
    letter-spacing: -.025em;
}

.admin-management-card > p {
    margin: 8px 0 2px;
    color: var(--route-muted);
    font-size: 12px;
    line-height: 1.55;
}

.admin-management-kicker {
    color: #6c767d;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.admin-directory-card {
    padding: 20px;
}

.admin-directory-head,
.admin-school-block-head,
.admin-class-roster-head,
.admin-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.admin-directory-head {
    margin-bottom: 14px;
}

.admin-refresh-button {
    height: 36px;
    padding: 0 13px;
    border: 1px solid var(--route-border);
    border-radius: 10px;
    background: #fff;
    color: #22282d;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.admin-refresh-button:hover {
    background: #f5f7f8;
}

.admin-directory-search {
    width: 100%;
    height: 46px;
    margin-bottom: 18px;
    padding: 0 14px;
    border: 1px solid var(--route-border);
    border-radius: 12px;
    outline: none;
    background: #f9fafb;
    color: var(--route-text);
    font: inherit;
    font-size: 13px;
}

.admin-directory-search:focus {
    border-color: #b9da86;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(168,255,36,.11);
}

.admin-directory-message {
    min-height: 20px;
    margin: 0 0 10px;
    color: var(--route-muted);
    font-size: 12px;
    font-weight: 700;
}

.admin-directory-message.error {
    color: #c93838;
}

.admin-directory-message.success {
    color: #16834a;
}

.admin-school-block {
    padding: 18px 0;
    border-top: 1px solid #edf0f2;
}

.admin-school-block:first-child {
    border-top: 0;
}

.admin-school-block-head {
    margin-bottom: 12px;
}

.admin-school-block-head span,
.admin-class-roster-head span {
    display: block;
    margin-bottom: 3px;
    color: var(--route-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-school-block-head h2 {
    font-size: 18px;
}

.admin-school-block-head > strong,
.admin-class-roster-head > strong {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f1f4f5;
    color: #59636a;
    font-size: 10px;
}

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

.admin-class-roster {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--route-border);
    border-radius: 14px;
    background: #fbfcfc;
}

.admin-class-roster-head {
    padding: 13px 14px;
    border-bottom: 1px solid #e8ecee;
    background: #fff;
}

.admin-class-roster-head h3 {
    font-size: 15px;
}

.admin-student-list {
    display: flex;
    flex-direction: column;
}

.admin-student-row {
    min-width: 0;
    padding: 11px 14px;
    border-top: 1px solid #edf0f2;
}

.admin-student-row:first-child {
    border-top: 0;
}

.admin-student-row > div {
    min-width: 0;
}

.admin-student-row strong,
.admin-student-row span {
    display: block;
}

.admin-student-row strong {
    overflow: hidden;
    color: #20262b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-student-row > div > span {
    margin-top: 2px;
    color: var(--route-muted);
    font-size: 10px;
}

.admin-student-email {
    max-width: 48%;
    overflow: hidden;
    color: #778188;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-empty-roster {
    padding: 18px 14px;
    color: var(--route-muted);
    font-size: 11px;
}

.admin-unassigned-block {
    margin-top: 8px;
    padding: 16px;
    border: 1px dashed #d7dde0;
    border-radius: 14px;
}

@media (max-width: 820px) {
    .admin-management-grid,
    .admin-roster-grid {
        grid-template-columns: 1fr;
    }

    .admin-route-links {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .admin-management-card,
    .admin-directory-card {
        padding: 16px;
    }

    .admin-student-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .admin-student-email {
        max-width: 100%;
    }
}


/* EXPERIENCE FIXES V2 */
.route-head-icon{background:#14181b!important;border:1px solid #22282d!important;box-shadow:0 10px 24px rgba(17,20,23,.12)}
.route-head-icon img{width:42px!important;height:42px!important}
.route-calendar #statusCard{display:none!important}.route-calendar .calendar-layout{grid-template-columns:minmax(0,1fr) 320px!important;gap:18px!important}.route-calendar .calendar-card,.route-calendar .side-card{border:1px solid #dde3e7!important;border-radius:20px!important;background:#fff!important;box-shadow:0 7px 28px rgba(30,41,59,.05)!important}.route-calendar .calendar-toolbar{min-height:76px;padding:16px 20px}.route-calendar #monthTitle{font-size:23px;font-weight:800}.route-calendar .month-button{border-radius:999px}.route-calendar .today-button{min-width:72px;border-radius:10px}.route-calendar .weekdays{background:#fff}.route-calendar .weekday{padding:13px 8px;color:#5f6368}.route-calendar .day{min-height:132px;border-color:#e6e9ec}.route-calendar .day:hover{background:#f8fafb}.route-calendar .day.today{background:#fff}.route-calendar .day.today .day-number{background:#1a73e8;color:#fff}.route-calendar .event-chip{border-radius:4px}.route-calendar .event-class{background:#e8f0fe;color:#174ea6}.route-calendar .event-test{background:#fce8e6;color:#b31412}.route-calendar .event-personal{background:#e6f4ea;color:#137333}
.route-reminders .class-card{background:#fff;border:1px solid #e0e5e8}.route-reminders .layout{grid-template-columns:minmax(0,1fr) 340px!important;gap:18px!important}.route-reminders .card{border:1px solid #dde3e7;border-radius:18px;background:#fff;box-shadow:0 7px 26px rgba(30,41,59,.04)}.agenda-empty{min-height:170px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#7a838b}.agenda-day{display:grid;grid-template-columns:90px minmax(0,1fr);gap:18px;padding:18px 0;border-top:1px solid #eef1f3}.agenda-date{display:flex;flex-direction:column;gap:3px}.agenda-date strong{font-size:17px}.agenda-date span{font-size:11px;color:#7c858d}.agenda-items{display:flex;flex-direction:column;gap:14px}.agenda-item{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px}.agenda-time{font-size:11px;color:#6f7780;text-align:right}.agenda-line{display:flex;align-items:flex-start;gap:11px;min-height:48px}.agenda-dot{width:11px;height:11px;flex:0 0 11px;margin-top:3px;border-radius:50%;background:#1a73e8}.personal-item .agenda-dot{background:#70b800}.agenda-copy{flex:1;min-width:0}.agenda-title{font-size:14px;font-weight:850}.agenda-description{margin-top:4px;color:#69727a;font-size:12px}.agenda-type{display:inline-block;margin-top:6px;color:#7b848b;font-size:9px;font-weight:900;text-transform:uppercase}.agenda-delete{border:0;background:transparent;color:#d93025;font-size:10px;font-weight:800;cursor:pointer}
.route-chat .message-row{margin:0 0 20px!important;min-height:0!important;height:auto!important;align-items:flex-start!important}.route-chat .bubble-wrapper{min-height:0!important;height:auto!important;justify-content:flex-start!important;gap:3px!important}.route-chat .time{margin-top:2px!important;position:static!important}
.admin-route-links{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 18px}.admin-tab-link{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border:1px solid #dfe4e8;border-radius:999px;background:#fff;color:#4f5961;text-decoration:none;font-size:11px;font-weight:850}.admin-tab-link.active{border-color:#111417;background:#111417;color:#fff}.admin-calendar-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px;padding:18px;border:1px solid #dde3e7;border-radius:18px;background:#fff}.admin-calendar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.admin-calendar-panel{padding:20px;border:1px solid #dde3e7;border-radius:18px;background:#fff}.admin-calendar-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-calendar-list{margin-top:18px;border-top:1px solid #edf0f2}.admin-calendar-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #edf0f2}.admin-calendar-row-main strong,.admin-calendar-row-main span{display:block}.admin-calendar-row-main span{margin-top:3px;color:#7a838b;font-size:10px}.admin-calendar-delete{border:0;background:transparent;color:#d93025;font-size:10px;font-weight:850;cursor:pointer}.admin-calendar-empty{padding:22px 0;color:#7a838b;font-size:12px}
@media(max-width:760px){html,body{overflow-x:hidden}#dashboard{}#dashboard .sidebar{position:fixed!important;z-index:5000!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;height:68px!important;min-height:68px!important;padding:6px 8px!important;border-top:1px solid #dfe4e8!important;border-right:0!important;background:#fff!important;box-shadow:0 -8px 26px rgba(15,23,42,.08)!important}#dashboard .sidebar-brand,#dashboard .sidebar-search,#dashboard .sidebar-label,#dashboard .sidebar-bottom{display:none!important}#dashboard .sidebar-nav{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:2px!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important}#dashboard .sidebar-link{height:54px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;margin:0!important;padding:3px 1px!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important}#dashboard .sidebar-link.active{background:#111417!important;color:#fff!important}#dashboard .sidebar-link::before{display:none!important}#dashboard .sidebar-link .nav-icon{width:23px!important;height:23px!important}#dashboard .sidebar-link>span:last-child{display:block!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}#dashboard .dashboard-main{width:100%!important;margin:0!important;padding:18px 14px 92px!important}.route-head-icon{display:none!important}.route-calendar .calendar-layout,.route-reminders .layout,.admin-calendar-grid,.admin-calendar-picker{grid-template-columns:1fr!important}.route-calendar .side-card,.route-reminders .form-card{position:static!important}.route-calendar .calendar-card{overflow-x:auto!important}.route-calendar .weekdays,.route-calendar .calendar-grid,.route-calendar .calendar-toolbar{min-width:690px}.route-calendar .day{min-height:100px}.agenda-day{grid-template-columns:64px minmax(0,1fr);gap:10px}.agenda-item{grid-template-columns:58px minmax(0,1fr);gap:8px}.admin-calendar-form-grid{grid-template-columns:1fr}.route-chat{height:calc(100dvh - 84px)!important}.chat-messages{padding:18px 12px!important}.route-chat .bubble-wrapper{max-width:88%!important}.chat-send-button span{display:none!important}.chat-send-button{width:46px!important;min-width:46px!important;padding:0!important}}
@media(max-width:420px){#dashboard .sidebar-link>span:last-child{display:none!important}#dashboard .sidebar{height:60px!important;min-height:60px!important}#dashboard .sidebar-link{height:48px!important}#dashboard .dashboard-main{padding-bottom:80px!important}.agenda-day{grid-template-columns:1fr}}


/* =========================================================
   LOG OUT BUTTON
========================================================= */

.sidebar-logout-button {
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    border: 1px solid #dce2e6;
    border-radius: 12px;
    background: #ffffff;
    color: #20252a;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease,
        transform .16s ease;
}

.sidebar-logout-button:hover {
    background: #111417;
    border-color: #111417;
    color: #ffffff;
    transform: translateY(-1px);
}

/*
 * The desktop sidebar bottom is hidden on phones, so provide a
 * compact logout control above the mobile bottom navigation.
 */
@media (max-width: 760px) {

    #dashboard .sidebar-bottom {
        display: block !important;
        position: fixed !important;
        z-index: 4999 !important;
        right: 12px !important;
        bottom: 76px !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    #dashboard .sidebar-bottom .sidebar-profile {
        display: none !important;
    }

    #dashboard .sidebar-logout-button {
        width: auto !important;
        min-width: 76px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border-color: #20252a !important;
        border-radius: 999px !important;
        background: #111417 !important;
        color: #ffffff !important;
        box-shadow: 0 8px 24px rgba(15,23,42,.18) !important;
        font-size: 10px !important;
    }

}



/* =========================================================
   TUKLASS MAJOR OVERHAUL
========================================================= */

/* Profile/conversation search */
.global-search-card {
    max-width: 820px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid #dde3e7;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(20,30,40,.05);
}

.global-search-input-shell,
.message-search-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dce2e6;
    border-radius: 14px;
    background: #f7f9fa;
}

.global-search-input-shell {
    min-height: 54px;
    padding: 0 16px;
}

.message-search-shell {
    max-width: 680px;
    min-height: 46px;
    margin: 0 0 16px;
    padding: 0 14px;
}

.global-search-input-shell input,
.message-search-shell input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #171b1e;
    font: inherit;
}

.global-search-input-shell input {
    font-size: 15px;
}

.global-search-glyph,
.message-search-glyph,
.route-search-glyph {
    position: relative;
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: #66717a;
}

.global-search-glyph::after,
.message-search-glyph::after,
.route-search-glyph::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 2px;
    right: -6px;
    bottom: -3px;
    border-radius: 99px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}

.search-route-icon .route-search-glyph {
    color: #8df500;
}

.global-profile-results {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

.profile-search-result {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 70px;
    padding: 10px 8px;
    border-bottom: 1px solid #edf0f2;
    color: inherit;
    text-decoration: none;
}

.profile-search-result:last-child {
    border-bottom: 0;
}

.profile-search-result:hover {
    background: #f7f9fa;
    border-radius: 12px;
}

.profile-search-result img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2f3;
}

.profile-search-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.profile-search-copy strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-search-copy small {
    margin-top: 3px;
    color: #7a848c;
    font-size: 10px;
}

.profile-search-open {
    color: #62a900;
    font-size: 10px;
    font-weight: 850;
}

.search-state {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    color: #7a848c;
    text-align: center;
}

.search-state strong {
    color: #23282c;
}

.search-state.error {
    color: #c62828;
}

/* Notes tabs and collections */
.notes-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid #dde3e7;
    border-radius: 13px;
    background: #f4f7f8;
}

.notes-tab-button {
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #616b73;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
}

.notes-tab-button.active {
    background: #111417;
    color: #fff;
    box-shadow: 0 5px 14px rgba(17,20,23,.12);
}

.notes-panel {
    width: 100%;
}

.notes-panel[hidden],
.notes-modal[hidden],
.collection-workspace[hidden] {
    display: none !important;
}

.notes-catalog-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.notes-catalog-toolbar h2,
.collections-heading h2,
.collections-sidebar-card h2 {
    margin: 3px 0 0;
}

.notes-catalog-toolbar input {
    width: min(340px,100%);
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid #dde3e7;
    border-radius: 12px;
    outline: 0;
    background: #fff;
}

.notes-section-kicker,
.collection-add-label {
    color: #63ad00;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

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

.notes-material-card {
    display: flex;
    min-width: 0;
    min-height: 190px;
    flex-direction: column;
    padding: 18px;
    border: 1px solid #dde3e7;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 25px rgba(30,41,59,.035);
}

.notes-material-type {
    color: #67b000;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.notes-material-card h3 {
    margin: 10px 0 6px;
    font-size: 18px;
}

.notes-material-card p {
    margin: 0;
    color: #68737b;
    font-size: 12px;
    line-height: 1.55;
}

.notes-material-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.notes-action-button {
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: 10px !important;
}

.collections-layout {
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap: 18px;
    align-items: start;
}

.collections-sidebar-card,
.collections-main,
.collection-workspace {
    border: 1px solid #dde3e7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 26px rgba(30,41,59,.04);
}

.collections-sidebar-card {
    padding: 18px;
}

.collections-sidebar-card > p {
    color: #717b83;
    font-size: 11px;
    line-height: 1.5;
}

.collections-main {
    min-height: 310px;
    padding: 18px;
}

.notes-field {
    display: block;
    margin: 13px 0;
}

.notes-field > span {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 800;
}

.notes-field input,
.notes-field textarea,
.collection-add-card input,
.collection-add-card textarea,
.notes-modal-select {
    width: 100%;
    border: 1px solid #dce2e6;
    border-radius: 11px;
    outline: 0;
    background: #fff;
    color: #1d2327;
    font: inherit;
}

.notes-field input,
.collection-add-card input,
.notes-modal-select {
    min-height: 42px;
    padding: 0 11px;
}

.notes-field textarea,
.collection-add-card textarea {
    min-height: 86px;
    padding: 10px 11px;
    resize: vertical;
}

.collection-message {
    min-height: 18px;
    margin-top: 9px;
    color: #5e9300;
    font-size: 10px;
}

.collection-message.error {
    color: #c62828;
}

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

.study-collection-card {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid #e0e5e8;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.study-collection-open {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.study-collection-open > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.study-collection-open strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.study-collection-open small {
    margin-top: 3px;
    color: #7b858d;
    font-size: 9px;
}

.collection-folder-mark {
    position: relative;
    width: 31px;
    height: 24px;
    flex: 0 0 31px;
    border-radius: 5px;
    background: #dfffaf;
    border: 1px solid #8bd800;
}

.collection-folder-mark::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 5px;
    left: 3px;
    top: -5px;
    border: 1px solid #8bd800;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: #dfffaf;
}

.collection-more-button {
    padding: 0 10px;
    border: 0;
    border-left: 1px solid #edf0f2;
    background: transparent;
    color: #c62828;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.collection-workspace {
    margin-top: 18px;
    padding: 20px;
}

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

.collection-workspace-head h2 {
    margin: 3px 0 4px;
}

.collection-workspace-head p {
    max-width: 660px;
    margin: 0;
    color: #727c84;
    font-size: 11px;
}

.collection-close-button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #dce2e6;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 850;
}

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

.collection-add-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 15px;
    border: 1px solid #e1e6e9;
    border-radius: 14px;
    background: #f9fbfb;
}

.collection-file-picker {
    position: relative;
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px dashed #bdc7cd;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}

.collection-file-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.collection-file-picker span {
    font-size: 10px;
    font-weight: 850;
}

.collection-file-picker small,
.collection-upload-help {
    color: #7b858d;
    font-size: 9px;
}

.collection-items-heading {
    margin: 22px 0 8px;
}

.collection-items-heading h3 {
    margin: 3px 0 0;
}

.collection-item-list {
    border-top: 1px solid #e6eaed;
}

.collection-item-row {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f2;
}

.collection-item-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #eff4f5;
    color: #59656d;
    font-size: 9px;
    font-weight: 900;
}

.collection-item-main {
    min-width: 0;
}

.collection-item-kind {
    display: block;
    margin-bottom: 2px;
    color: #70b800;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.collection-item-main strong {
    font-size: 12px;
}

.collection-item-subtitle,
.collection-text-preview {
    margin-top: 4px;
    color: #737d85;
    font-size: 10px;
}

.collection-text-preview {
    max-height: 68px;
    overflow: hidden;
    white-space: pre-wrap;
}

.collection-item-actions {
    display: flex;
    gap: 7px;
    align-items: center;
}

.collection-item-link,
.collection-item-delete {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: 850;
}

.collection-item-link {
    color: #5e9f00;
}

.collection-item-delete {
    color: #c62828;
}

.collection-items-empty,
.notes-empty-card,
.notes-loading {
    display: flex;
    min-height: 130px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    grid-column: 1 / -1;
    gap: 4px;
    color: #78828a;
    text-align: center;
}

.notes-modal {
    position: fixed;
    z-index: 9000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
}

.notes-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(14,18,21,.45);
}

.notes-modal-card {
    position: relative;
    z-index: 1;
    width: min(460px,100%);
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(10,15,20,.24);
}

.notes-modal-card h2 {
    margin: 4px 0 8px;
}

.notes-modal-card p,
.catalog-preview-notice {
    color: #6f7981;
    font-size: 11px;
    line-height: 1.55;
}

.catalog-preview-notice {
    margin: 14px 0;
    padding: 11px;
    border: 1px solid #deebca;
    border-radius: 10px;
    background: #f6ffe9;
}

.notes-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* Messenger-style chat */
.route-chat .chat-messages {
    display: block !important;
    padding: 22px 22px 34px !important;
}

.route-chat .message-row {
    display: flex !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 3px 0 !important;
    align-items: flex-end !important;
}

.route-chat .message-row.mine {
    justify-content: flex-end !important;
}

.route-chat .message-row.theirs {
    justify-content: flex-start !important;
}

.route-chat .bubble-wrapper {
    display: flex !important;
    width: fit-content !important;
    max-width: min(72%,560px) !important;
    min-height: 0 !important;
    height: auto !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.route-chat .message-row.mine .bubble-wrapper {
    align-items: flex-end !important;
}

.route-chat .message-row.theirs .bubble-wrapper {
    align-items: flex-start !important;
}

.route-chat .bubble {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 9px 13px !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
}

.route-chat .message-row.mine .bubble {
    background: #111417 !important;
    color: #fff !important;
    border-bottom-right-radius: 6px !important;
}

.route-chat .message-row.theirs .bubble {
    background: #edf1f3 !important;
    color: #171b1e !important;
    border-bottom-left-radius: 6px !important;
}

.route-chat .message-row.pending .bubble {
    opacity: .78;
}

.route-chat .message-row.failed .bubble {
    outline: 1px solid #d93025 !important;
}

.route-chat .message-image-card {
    display: block;
    max-width: min(320px,70vw);
    border-radius: 16px;
    overflow: hidden;
}

.route-chat .message-image-card img {
    display: block;
    max-width: 100%;
    height: auto;
}

.route-chat .message-time {
    padding: 2px 5px 0;
    color: #879098;
    font-size: 9px;
    line-height: 1.25;
}

.route-chat .message-time.time-collapsed {
    display: none !important;
}

.route-chat .message-time.time-collapsed.time-expanded {
    display: block !important;
}

.route-chat .message-delivery {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 5px 0;
    color: #7f8890;
    font-size: 9px;
}

.route-chat .delivery-spinner {
    width: 9px;
    height: 9px;
    border: 1.5px solid #b6bec4;
    border-top-color: #5f686f;
    border-radius: 50%;
    animation: tuklassMessageSpin .75s linear infinite;
}

@keyframes tuklassMessageSpin {
    to { transform: rotate(360deg); }
}

.route-chat .delivery-sent {
    color: #6eab00;
}

.route-chat .delivery-failed {
    color: #d93025;
}

.route-chat .message-retry {
    padding: 0;
    border: 0;
    background: transparent;
    color: #d93025;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 850;
}

.route-chat .chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px 0 12px;
    color: #828c94;
    font-size: 9px;
    font-weight: 800;
}

.route-chat #sendButton,
.route-chat .chat-send-button {
    white-space: nowrap;
}

/* Ensure logged-out page can never reveal dashboard because of mobile CSS. */
@media (max-width:760px) {
    #dashboard[style*="display: none"],
    #dashboard[style*="display:none"] {
        display: none !important;
    }

    .notes-material-grid,
    .collections-layout,
    .collection-grid,
    .collection-builder-grid {
        grid-template-columns: 1fr !important;
    }

    .notes-catalog-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .notes-catalog-toolbar input {
        width: 100%;
    }

    .collection-item-row {
        grid-template-columns: 30px minmax(0,1fr);
    }

    .collection-item-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .route-chat .bubble-wrapper {
        max-width: 84% !important;
    }

    .global-search-card {
        padding: 12px;
    }
}


/* Chat class-name alignment for the current rendering module */
.route-chat .time {
    padding: 2px 5px 0 !important;
    color: #879098 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
}

.route-chat .time.time-collapsed {
    display: none !important;
}

.route-chat .time.time-collapsed.time-expanded {
    display: block !important;
}

.route-chat .pending-message .bubble {
    opacity: .78 !important;
}

.route-chat .message-delivery.sent {
    color: #6eab00 !important;
}

.route-chat .message-delivery.failed {
    color: #d93025 !important;
}

.route-chat .retry-message {
    padding: 0;
    border: 0;
    background: transparent;
    color: #d93025;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    font-weight: 850;
}

.route-chat .message-image {
    display: block;
    width: auto;
    max-width: min(320px,70vw);
    max-height: 420px;
    border-radius: 14px;
    object-fit: cover;
}

/* =========================================================
   V8.2 ADMIN HUB
========================================================= */

.admin-sidebar-link[hidden]{display:none!important}
.admin-route-head-icon img{width:28px;height:28px;object-fit:contain}
.admin-security-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 12px;padding:15px 17px;border:1px solid #dfe5e8;border-radius:18px;background:#fff}
.admin-security-strip>div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.admin-security-strip span{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#89939b}
.admin-security-strip strong{font-size:13px;color:#171b1f;overflow-wrap:anywhere}
.admin-role-badge{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:#efffd8;color:#4f8d00;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.admin-home-status{min-height:18px;margin:0 2px 14px;color:#6f7a82;font-size:11px;font-weight:700}
.admin-home-status.error{color:#c72b2b}.admin-home-status.success{color:#3f7e00}
.admin-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.admin-home-card{display:flex;gap:13px;align-items:flex-start;min-height:148px;padding:18px;border:1px solid #dfe5e8;border-radius:19px;background:#fff;color:#15191d;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.admin-home-card:hover{transform:translateY(-2px);border-color:#cdd7dd;box-shadow:0 12px 26px rgba(17,20,23,.07)}
.admin-home-card-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:#f1ffdf}
.admin-home-card-icon img{width:23px;height:23px;object-fit:contain}
.admin-home-card span{display:block;margin:1px 0 5px;color:#7cb900;font-size:9px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.admin-home-card h2{margin:0 0 7px;font-size:16px;line-height:1.15}.admin-home-card p{margin:0;color:#737d85;font-size:11px;line-height:1.55}
.master-admin-panel{margin-top:4px;padding:20px;border:1px solid #dce4e7;border-radius:20px;background:#fff}
.master-admin-panel[hidden]{display:none!important}
.master-admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.master-admin-head h2{margin:4px 0 5px;font-size:18px}.master-admin-head p{margin:0;color:#77818a;font-size:11px}
.master-shield,.master-lock-chip{padding:7px 10px;border-radius:999px;background:#111417;color:#fff;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.master-admin-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin-bottom:16px}.master-admin-add-row .spa-black-button{min-height:43px;padding-inline:18px}
.authorized-admin-list{border-top:1px solid #edf0f2}.authorized-admin-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;border-bottom:1px solid #edf0f2}
.authorized-admin-row>div:first-child{min-width:0}.authorized-admin-row strong,.authorized-admin-row span{display:block}.authorized-admin-row strong{font-size:12px;overflow-wrap:anywhere}.authorized-admin-row span{margin-top:3px;color:#7c858d;font-size:9px}
.remove-admin-button{border:0;background:transparent;color:#c92b2b;font-size:10px;font-weight:900;cursor:pointer}
.admin-security-note{display:flex;gap:9px;flex-direction:column;margin-top:16px;padding:15px 17px;border:1px solid #e3e8ea;border-radius:17px;background:#f9fbfb}.admin-security-note strong{font-size:11px}.admin-security-note span{color:#77818a;font-size:10px;line-height:1.55}

@media(max-width:900px){.admin-home-grid{grid-template-columns:1fr}.admin-home-card{min-height:auto}.master-admin-add-row{grid-template-columns:1fr}.master-admin-add-row .spa-black-button{width:100%}}
@media(max-width:600px){.admin-security-strip,.master-admin-head,.authorized-admin-row{align-items:flex-start;flex-direction:column}.admin-role-badge,.master-shield,.master-lock-chip{align-self:flex-start}.admin-home-card{padding:15px}.master-admin-panel{padding:16px}}

/* =========================================================
   V8.3 — ADMIN ROLE / MULTI-SECTION CALENDAR CONTROLS
========================================================= */

/* The permanent master marker beside the master email uses Tuklass green. */
.master-lock-chip{
    background:#a8ff24 !important;
    color:#315d00 !important;
    border:1px solid #8fe100 !important;
    box-shadow:0 5px 14px rgba(127,206,0,.14);
}

.admin-panel-intro{
    margin:5px 0 15px;
    color:#77818a;
    font-size:10.5px;
    line-height:1.55;
}

.admin-calendar-span-2{
    grid-column:1 / -1;
}

.admin-field-help{
    display:block;
    margin-top:6px;
    color:#8a949c;
    font-size:9.5px;
    line-height:1.45;
}

.admin-choice-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0 0 8px;
}

.admin-choice-toolbar button{
    min-height:29px;
    padding:0 10px;
    border:1px solid #dfe5e8;
    border-radius:999px;
    background:#fff;
    color:#59636b;
    font-size:9px;
    font-weight:850;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}

.admin-choice-toolbar button:hover{
    transform:translateY(-1px);
    border-color:#bfc9ce;
    background:#f6f9fa;
    color:#171b1f;
}

.admin-target-picker,
.admin-day-picker{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    min-height:42px;
    padding:9px;
    border:1px solid #e0e6e9;
    border-radius:13px;
    background:#f8fafb;
}

.admin-target-chip,
.admin-day-chip{
    position:relative;
    display:inline-flex;
    cursor:pointer;
    user-select:none;
}

.admin-target-chip input,
.admin-day-chip input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.admin-target-chip span,
.admin-day-chip span{
    display:flex;
    align-items:center;
    min-height:31px;
    padding:0 11px;
    border:1px solid #d9e0e4;
    border-radius:10px;
    background:#fff;
    color:#59636b;
    font-size:9.5px;
    font-weight:800;
    transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}

.admin-target-chip input:checked + span{
    border-color:#171b1f;
    background:#171b1f;
    color:#fff;
    box-shadow:0 5px 12px rgba(17,20,23,.12);
}

.admin-day-chip input:checked + span{
    border-color:#8dde00;
    background:#efffd8;
    color:#477d00;
    box-shadow:0 5px 12px rgba(127,206,0,.10);
}

.admin-target-chip input:focus-visible + span,
.admin-day-chip input:focus-visible + span{
    outline:2px solid #8dde00;
    outline-offset:2px;
}

.admin-target-empty{
    display:flex;
    align-items:center;
    min-height:24px;
    color:#8a949c;
    font-size:9.5px;
    font-weight:700;
}

@media(max-width:600px){
    .admin-calendar-span-2{grid-column:auto}
    .admin-target-picker,.admin-day-picker{padding:8px;gap:6px}
    .admin-target-chip span,.admin-day-chip span{min-height:34px;padding-inline:10px;font-size:9px}
    .admin-choice-toolbar button{min-height:32px}
}

/* =========================================================
   TUKLASS V8.4 — ADMIN DIRECTORY ACTIONS
========================================================= */
.admin-roster-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.admin-remove-button{
    height:30px;
    padding:0 10px;
    border:1px solid #f0b7b7;
    border-radius:9px;
    background:#fff7f7;
    color:#b42323;
    font:inherit;
    font-size:9px;
    font-weight:900;
    cursor:pointer;
}

.admin-remove-button:hover{
    border-color:#e58c8c;
    background:#fff0f0;
}

.admin-remove-school-button{
    height:32px;
}

.admin-needs-section-roster{
    border-color:#d7e8be;
    background:#fbfff6;
}

.admin-needs-section-roster .admin-class-roster-head{
    background:#f7fcef;
}

.admin-pending-note{
    padding:10px 14px;
    border-bottom:1px solid #e7efdc;
    color:#65706f;
    font-size:10px;
    line-height:1.5;
}

@media (max-width:560px){
    .admin-school-block-head,
    .admin-class-roster-head{
        align-items:flex-start;
    }

    .admin-roster-actions{
        justify-content:flex-start;
    }
}

/* =========================================================
   TUKLASS V8.5 — ARTICLE NOTES + IN-APP IMAGE VIEWING
========================================================= */

/* Never leave Tuklass just to inspect an image. */
.tuklass-media-open,
.tuklass-media-open body{overflow:hidden!important}
.tuklass-media-viewer[hidden]{display:none!important}
.tuklass-media-viewer{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:28px}
.tuklass-media-backdrop{position:absolute;inset:0;border:0;background:rgba(10,13,15,.86);backdrop-filter:blur(8px);cursor:zoom-out}
.tuklass-media-card{position:relative;z-index:1;width:min(1180px,94vw);height:min(86vh,900px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.tuklass-media-stage{min-height:0;flex:1;width:100%;display:grid;place-items:center}
.tuklass-media-image{display:block;max-width:100%;max-height:calc(86vh - 68px);object-fit:contain;border-radius:12px;box-shadow:0 20px 70px rgba(0,0,0,.38)}
.tuklass-media-close{position:absolute;top:-4px;right:-4px;width:44px;height:44px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(17,20,23,.9);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:3}
.tuklass-media-caption{max-width:820px;color:#fff;font-size:12px;font-weight:700;text-align:center;opacity:.9}

/* Catalog directory */
.wiki-catalog-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:2px 0 22px;border-bottom:1px solid #dfe4e8;margin-bottom:20px}
.wiki-catalog-toolbar h2{margin:4px 0 4px;font-size:28px;letter-spacing:-.035em;color:#111417}
.wiki-catalog-toolbar p{margin:0;color:#737d86;font-size:12px;line-height:1.6}
.wiki-catalog-search-wrap{width:min(390px,100%)}
.wiki-catalog-search-wrap input{width:100%;height:44px;padding:0 14px;border:1px solid #d9e0e4;border-radius:12px;background:#fff;font:inherit;outline:none}
.wiki-catalog-search-wrap input:focus{border-color:#9cff00;box-shadow:0 0 0 3px rgba(156,255,0,.13)}
.wiki-catalog-search-wrap span{display:block;margin-top:7px;text-align:right;color:#929ba2;font-size:10px;font-weight:750}
.wiki-catalog-groups{display:grid;gap:26px}
.wiki-catalog-subject{border-top:1px solid #dfe4e8;padding-top:14px}
.wiki-catalog-subject>h3{margin:0 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:700;color:#111417}
.wiki-catalog-list{border-top:1px solid #eceff1}
.wiki-catalog-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 2px;border:0;border-bottom:1px solid #eceff1;background:transparent;text-align:left;cursor:pointer}
.wiki-catalog-row:hover strong{text-decoration:underline;text-decoration-color:#9cff00;text-decoration-thickness:2px;text-underline-offset:4px}
.wiki-catalog-row-main{display:grid;gap:4px;min-width:0}
.wiki-catalog-row-main strong{font-size:15px;color:#111417}
.wiki-catalog-row-main small{color:#6f7981;font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:850px}
.wiki-catalog-arrow{font-size:25px;color:#8b949b}

/* Wikipedia-inspired article structure, adapted to Tuklass. */
.wiki-article{max-width:1180px;margin:0 auto;padding-bottom:36px}
.wiki-back-button{margin:0 0 18px;padding:0;border:0;background:transparent;color:#5c666e;font-size:11px;font-weight:850;cursor:pointer}
.wiki-back-button:hover{color:#111417;text-decoration:underline}
.wiki-article-header{padding:0 0 18px;border-bottom:1px solid #bfc7cc}
.wiki-eyebrow{display:block;margin-bottom:7px;color:#62a900;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.wiki-article-header h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4vw,52px);font-weight:500;letter-spacing:-.035em;color:#111417}
.wiki-lead{max-width:850px;margin:12px 0 0;color:#4e5961;font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.7}
.wiki-article-byline{margin-top:12px;color:#8a939a;font-size:9px;font-weight:700}
.wiki-article-layout{display:grid;grid-template-columns:170px minmax(0,1fr) 260px;gap:30px;align-items:start;padding-top:22px}
.wiki-toc{position:sticky;top:24px;display:grid;gap:8px;padding-right:18px;border-right:1px solid #e2e6e9;max-height:calc(100vh - 48px);overflow:auto}
.wiki-toc>strong{margin-bottom:3px;color:#111417;font-size:10px;text-transform:uppercase;letter-spacing:.11em}
.wiki-toc a{color:#536069;text-decoration:none;font-size:10px;line-height:1.35}
.wiki-toc a:hover{color:#111417;text-decoration:underline}
.wiki-toc a.level-3{padding-left:10px}
.wiki-toc a.level-4{padding-left:18px;color:#7a848b}
.wiki-article-body{min-width:0;color:#252b2f;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.78}
.wiki-article-body p{margin:0 0 16px}
.wiki-article-body h2,.wiki-article-body h3,.wiki-article-body h4{font-family:Georgia,"Times New Roman",serif;color:#111417;font-weight:600;scroll-margin-top:24px}
.wiki-article-body h2{margin:32px 0 12px;padding-bottom:7px;border-bottom:1px solid #cbd2d6;font-size:25px}
.wiki-article-body h3{margin:26px 0 10px;font-size:20px}
.wiki-article-body h4{margin:22px 0 8px;font-size:17px}
.wiki-article-body ul{margin:0 0 18px;padding-left:24px}
.wiki-article-body li{margin:5px 0}
.wiki-infobox{border:1px solid #cad2d7;background:#f8faf9;padding:12px;font-family:Arial,sans-serif}
.wiki-infobox-image-button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.wiki-infobox-image-shell{width:100%;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;background:#e9eef0;color:#7b858d;font-size:10px}
.wiki-infobox-image-shell img{width:100%;height:100%;object-fit:cover}
.wiki-image-caption{padding:7px 2px 9px;color:#626c73;font-size:9px;line-height:1.45}
.wiki-infobox dl{margin:10px 0 0}
.wiki-fact-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;padding:7px 0;border-top:1px solid #dce2e5;font-size:9px;line-height:1.4}
.wiki-fact-row dt{font-weight:850;color:#343b40}
.wiki-fact-row dd{margin:0;color:#566068;overflow-wrap:anywhere}
.wiki-add-collection{width:100%;margin-top:12px}

/* Collections are article pages too. */
.wiki-collection-workspace{margin-top:28px;padding:0!important;border:0!important;background:transparent!important}
.wiki-collection-head{padding:24px 0 18px!important;border-top:1px solid #d8dee2;border-bottom:1px solid #bfc7cc}
.wiki-collection-head h2{font-family:Georgia,"Times New Roman",serif!important;font-size:34px!important;font-weight:500!important;letter-spacing:-.03em}
.wiki-collection-count{display:block;margin-top:8px;color:#90989e;font-size:9px;font-weight:750}
.wiki-collection-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:34px;align-items:start;padding:22px 0 26px}
.wiki-collection-toc>div{display:grid;gap:8px}
.wiki-toc-empty{color:#9aa2a8;font-size:10px}
.wiki-collection-body{max-width:860px}
.wiki-collection-section{padding:0 0 26px;margin:0 0 28px;border-bottom:1px solid #d9dfe3;scroll-margin-top:22px}
.wiki-collection-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.wiki-collection-section-head h3{margin:2px 0 0;font-size:24px}
.wiki-user-note{font:inherit}
.wiki-collection-reference,.wiki-file-box{padding:14px 16px;border-left:3px solid #9cff00;background:#f7faf8;font-family:Arial,sans-serif}
.wiki-collection-reference>span,.wiki-file-box>span{display:block;color:#68727a;font-size:10px;font-weight:800}
.wiki-collection-reference p{margin:7px 0 10px;font-family:Georgia,"Times New Roman",serif;color:#30373c}
.collection-builder-heading{margin:8px 0 12px;padding-top:18px;border-top:1px solid #d8dee2}
.collection-builder-heading h3{margin:3px 0 0;font-size:18px}

/* Admin catalog */
.admin-home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-catalog-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);gap:18px;align-items:start}
.admin-catalog-editor,.admin-catalog-library{padding:22px;border:1px solid #dce2e6;border-radius:20px;background:#fff}
.admin-catalog-editor-head,.admin-catalog-library-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.admin-catalog-editor-head h2,.admin-catalog-library-head h2{margin:3px 0 0;font-size:20px}
.admin-catalog-content{min-height:320px!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-size:12px!important;line-height:1.6!important}
.admin-catalog-help{display:block;margin-top:6px;color:#808990;font-size:9px;line-height:1.5}
.admin-catalog-image-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:14px 0}
.admin-catalog-image-editor>.route-field{grid-column:1/-1}
.admin-catalog-image-picker{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border:1px dashed #cbd3d8;border-radius:12px;cursor:pointer}
.admin-catalog-image-picker input{display:none}
.admin-catalog-image-picker span{font-size:10px;font-weight:850;color:#111417}
.admin-catalog-image-picker small{max-width:250px;color:#7a838a;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-catalog-publish-toggle{display:flex;align-items:center;gap:8px;margin:14px 0;color:#353d42;font-size:10px;font-weight:800}
.admin-catalog-publish-toggle input{accent-color:#9cff00;width:16px;height:16px}
.admin-catalog-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f2}
.admin-catalog-row-copy{min-width:0;display:grid;gap:3px}
.admin-catalog-row-copy>span{color:#70b900;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.admin-catalog-row-copy strong{font-size:12px;color:#111417}
.admin-catalog-row-copy small{color:#79838a;font-size:9px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-catalog-row-actions{display:flex;align-items:center;gap:6px}
.admin-catalog-row-actions button{border:0;background:#f0f3f4;border-radius:8px;padding:8px 9px;color:#30373c;font-size:9px;font-weight:850;cursor:pointer}
.admin-catalog-row-actions button.danger{color:#ba2d26;background:#fff1f0}
.admin-catalog-state{padding:5px 7px;border-radius:999px;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.admin-catalog-state.is-published{background:#ecffd8;color:#4a8900}
.admin-catalog-state.is-draft{background:#eef1f3;color:#657078}
.admin-catalog-empty{display:grid;gap:5px;padding:24px 0;color:#7a838a;font-size:10px}
.admin-catalog-empty strong{color:#111417;font-size:12px}

@media(max-width:1180px){
  .wiki-article-layout{grid-template-columns:150px minmax(0,1fr) 220px;gap:22px}
  .admin-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-catalog-layout{grid-template-columns:1fr}
}

@media(max-width:900px){
  .wiki-catalog-toolbar{align-items:stretch;flex-direction:column}
  .wiki-catalog-search-wrap{width:100%}
  .wiki-article-layout{grid-template-columns:1fr}
  .wiki-toc{position:relative;top:auto;max-height:none;padding:14px;border:1px solid #e1e6e9;background:#fafcfa;grid-template-columns:repeat(2,minmax(0,1fr))}
  .wiki-toc>strong{grid-column:1/-1}
  .wiki-infobox{order:-1;max-width:420px}
  .wiki-collection-layout{grid-template-columns:1fr;gap:18px}
  .wiki-collection-toc{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .tuklass-media-viewer{padding:12px}
  .tuklass-media-card{width:100%;height:90vh}
  .tuklass-media-close{top:6px;right:6px}
  .wiki-article-header h1{font-size:34px}
  .wiki-lead{font-size:14px}
  .wiki-toc{grid-template-columns:1fr}
  .wiki-infobox{max-width:none}
  .wiki-catalog-row-main small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .wiki-collection-head{align-items:flex-start!important}
  .admin-home-grid{grid-template-columns:1fr}
  .admin-catalog-editor,.admin-catalog-library{padding:16px}
  .admin-catalog-image-editor{grid-template-columns:1fr}
  .admin-catalog-image-editor>.route-field{grid-column:auto}
  .admin-catalog-row{grid-template-columns:1fr}
  .admin-catalog-row-actions{flex-wrap:wrap}
}

/* =========================================================
   TUKLASS V8.6 — AI FLASHCARDS
========================================================= */
.catalog-flashcard-badge{
  display:inline-flex;width:max-content;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;
  background:#efffdc;color:#4f8e00;font-size:8px!important;font-style:normal;font-weight:900;letter-spacing:.03em;text-transform:uppercase
}
.wiki-flashcard-bottom{margin-top:42px;padding:24px 0 6px;border-top:1px solid #dfe4e8}
.wiki-flashcard-bottom h2{margin:4px 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:26px;color:#111417}
.wiki-flashcard-bottom p{max-width:720px;color:#5e6870;line-height:1.7}
.wiki-flashcard-button{display:inline-flex!important;width:auto!important;margin-top:8px;text-decoration:none}

.route-flashcards .notes-panel{min-height:220px}
.flashcard-study-view{padding-top:2px}
.flashcard-study-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:10px 0 20px;border-bottom:1px solid #dfe4e8}
.flashcard-study-header h1{margin:5px 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:36px;letter-spacing:-.035em;color:#111417}
.flashcard-study-header p{max-width:720px;margin:0;color:#67717a;font-size:12px;line-height:1.65}
.flashcard-study-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 14px}
.flashcard-mode-switch{display:inline-flex;padding:4px;border:1px solid #dce2e6;border-radius:12px;background:#f6f8f9}
.flashcard-mode-switch button{border:0;border-radius:9px;background:transparent;padding:9px 13px;color:#626d75;font-size:9px;font-weight:900;cursor:pointer}
.flashcard-mode-switch button.active{background:#111417;color:#fff;box-shadow:0 2px 8px rgba(17,20,23,.12)}
.flashcard-progress{color:#7a858d;font-size:9px;font-weight:850}
.flashcard-stage{max-width:900px;margin:0 auto;padding:28px;border:1px solid #dce2e6;border-radius:24px;background:#fff;box-shadow:0 14px 40px rgba(23,31,38,.06)}
.flashcard-section-label{margin-bottom:12px;color:#67aa00;font-size:8px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}
.flashcard-face{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 34px;border:1px solid #edf0f2;border-radius:18px;background:#fbfcfc}
.flashcard-face>span,.flashcard-answer-reveal>span{color:#89939a;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.flashcard-face h2{max-width:760px;margin:12px 0 0;color:#111417;font-size:25px;line-height:1.35;letter-spacing:-.02em}
.flashcard-answer-reveal{margin-top:14px;padding:18px 20px;border-radius:16px;background:#f3ffd9;border:1px solid #d8f9a9}
.flashcard-answer-reveal p{margin:7px 0 0;color:#273018;font-size:15px;line-height:1.65}
.flashcard-reveal-button{display:flex!important;width:max-content!important;margin:18px auto 0!important;min-width:150px;justify-content:center}
.flashcard-study-nav{display:flex;justify-content:space-between;gap:12px;max-width:900px;margin:16px auto 0}
.flashcard-study-nav button{min-width:110px}
.flashcard-study-nav button:disabled{opacity:.42;cursor:not-allowed}
.flashcard-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.flashcard-choice{display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 14px;border:1px solid #dce2e6;border-radius:14px;background:#fff;text-align:left;cursor:pointer;transition:.16s ease}
.flashcard-choice:hover:not(:disabled){border-color:#9cff00;transform:translateY(-1px)}
.flashcard-choice>span{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#111417;color:#fff;font-size:10px;font-weight:950}
.flashcard-choice>strong{color:#20262a;font-size:11px;line-height:1.45;font-weight:750}
.flashcard-choice.correct{border-color:#8bd700;background:#f1ffdf}
.flashcard-choice.correct>span{background:#6daa00}
.flashcard-choice.incorrect{border-color:#e7a6a2;background:#fff3f2}
.flashcard-choice.incorrect>span{background:#bd453d}
.flashcard-choice:disabled{cursor:default}
.flashcard-choice-feedback{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:13px 15px;border-radius:12px;font-size:10px;line-height:1.55}
.flashcard-choice-feedback.correct{background:#f1ffdf;color:#376500}
.flashcard-choice-feedback.incorrect{background:#fff3f2;color:#8f2f29}
.flashcard-choice-feedback strong{font-weight:950}
.flashcard-collection-workspace{margin-top:22px;padding:22px;border:1px solid #dce2e6;border-radius:20px;background:#fff}
.flashcard-collection-decks{display:grid;gap:10px;margin-top:18px}
.flashcard-collection-deck-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid #e3e8eb;border-radius:14px;background:#fbfcfc}
.flashcard-collection-deck-row>button:first-child{display:grid;gap:3px;border:0;background:transparent;text-align:left;cursor:pointer}
.flashcard-collection-deck-row span{color:#70b900;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.flashcard-collection-deck-row strong{color:#111417;font-size:12px}
.flashcard-collection-deck-row small{color:#7b858c;font-size:9px}
.flashcard-collection-deck-row .danger{border:0;border-radius:9px;background:#fff0ef;color:#b83b34;padding:8px 10px;font-size:9px;font-weight:850;cursor:pointer}

.admin-flashcard-state{display:inline-flex;width:max-content;margin-top:4px;padding:4px 7px;border-radius:999px;background:#fff4d7;color:#9a6c00;font-size:7px!important;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.admin-flashcard-state.ready{background:#edffd7;color:#538d00}
.admin-ai-flashcards-card{margin:16px 0;padding:16px;border:1px solid #dce2e6;border-radius:16px;background:#f9fbfb}
.admin-ai-flashcards-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.admin-ai-flashcards-head h3{margin:4px 0 0;font-size:15px;color:#111417}
.admin-ai-flashcards-card>p{margin:10px 0;color:#68727a;font-size:9px;line-height:1.65}
.admin-flashcard-count{display:grid;gap:4px;color:#7a838a;font-size:8px;font-weight:850}
.admin-flashcard-count input{width:76px;height:36px;padding:0 9px;border:1px solid #d4dce0;border-radius:9px;background:#fff;font:inherit;color:#111417}
.admin-ai-status{display:grid;gap:3px;margin:10px 0;padding:11px 12px;border-radius:11px;background:#fff;border:1px solid #e2e7ea;color:#69747b;font-size:9px;line-height:1.5}
.admin-ai-status strong{color:#111417;font-size:10px}
.admin-ai-status code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px}
.admin-ai-auto-toggle{margin:12px 0!important}

@media (max-width: 760px){
  .flashcard-study-header{flex-direction:column}
  .flashcard-study-header h1{font-size:29px}
  .flashcard-study-toolbar{align-items:stretch;flex-direction:column}
  .flashcard-mode-switch{width:100%}
  .flashcard-mode-switch button{flex:1}
  .flashcard-stage{padding:16px;border-radius:18px}
  .flashcard-face{min-height:190px;padding:20px 14px}
  .flashcard-face h2{font-size:20px}
  .flashcard-choices{grid-template-columns:1fr}
  .flashcard-study-nav{position:sticky;bottom:8px;padding:8px;border-radius:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
  .flashcard-collection-deck-row{grid-template-columns:1fr}
  .flashcard-collection-deck-row .danger{justify-self:start}
  .admin-ai-flashcards-head{align-items:stretch;flex-direction:column}
  .admin-flashcard-count input{width:100%}
}


/* =========================================================
   TUKLASS V8.8 — MANUAL PAYMENT CONTACT
========================================================= */
.tuklass-payment-plans{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:18px 0 14px;
}
.tuklass-payment-plan{
    border:1px solid rgba(18,18,18,.12);
    border-radius:16px;
    padding:13px 10px;
    background:#fff;
    text-align:center;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tuklass-payment-plan:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.tuklass-payment-plan.is-featured{
    border-color:#98ff00;
    box-shadow:0 0 0 2px rgba(152,255,0,.15);
}
.tuklass-payment-plan strong{
    display:block;
    font-size:1.08rem;
    line-height:1.15;
}
.tuklass-payment-plan span{
    display:block;
    margin-top:4px;
    font-size:.78rem;
    color:#6b7280;
}
.tuklass-payment-contact{
    width:100%;
    justify-content:center;
    margin-top:2px;
}
.tuklass-payment-note{
    margin:10px 0 0!important;
    font-size:.78rem!important;
    line-height:1.45!important;
    color:#70757d!important;
}
.route-lock-card .tuklass-payment-contact{
    display:flex;
    margin:16px 0 10px;
}
@media (max-width:640px){
    .tuklass-payment-plans{grid-template-columns:1fr;}
    .tuklass-payment-plan{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:12px 14px;}
    .tuklass-payment-plan span{margin-top:0;}
}


/* =========================================================
   V8.8 UX / MOTION / FILTERS / STUDY SESSION / CROPPER
========================================================= */
:root{--tuklass-green:#92ff27;--ease-spring:cubic-bezier(.2,.85,.3,1)}
button,a,input,select,textarea,.motion-card,.wiki-catalog-row,.study-collection-card{transition:transform .18s var(--ease-spring),box-shadow .18s ease,border-color .18s ease,background-color .18s ease,opacity .18s ease}
button:not(:disabled):active,.button:not(:disabled):active,.spa-black-button:not(:disabled):active{transform:scale(.975)}
.motion-card:hover,.wiki-catalog-row:hover,.study-collection-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(25,35,45,.08)}
.notes-loading{display:flex!important;align-items:center;gap:10px;min-height:72px;color:#65707a}
.catalog-subject-filter{height:40px;border:1px solid #dfe4e8;border-radius:12px;background:#fff;padding:0 34px 0 12px;font:inherit;color:#30363b}
.subject-accordion{overflow:hidden}.subject-accordion summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 2px;font-weight:850}.subject-accordion summary::-webkit-details-marker{display:none}.subject-accordion summary em{font-style:normal;font-size:11px;color:#7a838b}.subject-accordion[open] .wiki-catalog-list{animation:softDrop .22s ease both}
@keyframes softDrop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.card-enter{animation:cardIn .28s var(--ease-spring) both}@keyframes cardIn{from{opacity:0;transform:translateX(18px) scale(.985)}to{opacity:1;transform:none}}
.flashcard-flip-shell{position:relative;min-height:300px;perspective:1100px;margin-top:14px}.flashcard-flip-shell .flashcard-face{position:absolute;inset:0;width:100%;backface-visibility:hidden;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.2,.75,.2,1),box-shadow .2s ease}.flashcard-flip-shell .flashcard-question-face{transform:rotateY(0)}.flashcard-flip-shell .flashcard-answer-face{transform:rotateY(180deg);display:flex!important;flex-direction:column;align-items:center;justify-content:center;border:1px solid #dfe5e8;border-radius:24px;padding:34px;background:#fff}.flashcard-flip-shell.is-flipped .flashcard-question-face{transform:rotateY(-180deg)}.flashcard-flip-shell.is-flipped .flashcard-answer-face{transform:rotateY(0)}
.flashcard-self-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:326px}.flashcard-self-grade button{min-height:48px;border-radius:14px;font-weight:850;cursor:pointer}.answer-wrong{border:1px solid #f0b6b2;background:#fff4f3;color:#b42318}.answer-correct{border:1px solid #b7dfa4;background:#effce9;color:#287a12}
.flashcard-choice:not(:disabled):hover{transform:translateX(4px)}.flashcard-choice.correct{animation:correctPulse .38s ease}.flashcard-choice.incorrect{animation:wrongShake .3s ease}@keyframes correctPulse{50%{transform:scale(1.02)}}@keyframes wrongShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.flashcard-results-card{max-width:660px;margin:40px auto;text-align:center;border:1px solid #dfe5e8;border-radius:28px;background:#fff;padding:40px;box-shadow:0 18px 55px rgba(30,41,59,.08)}.results-ring{width:140px;height:140px;margin:0 auto 20px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#fff 57%,transparent 58%),conic-gradient(var(--tuklass-green) 0 var(--score,75%),#edf0f2 var(--score,75%))}.results-ring strong{font-size:32px}.results-ring span{font-size:11px;color:#6f7880;text-transform:uppercase;font-weight:800}.flashcard-results-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}.pop-in{animation:popIn .35s var(--ease-spring) both}@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.admin-catalog-subtabs{display:flex;gap:8px;margin:0 0 16px}.admin-catalog-subtab{border:1px solid #dfe4e8;border-radius:999px;background:#fff;padding:10px 16px;font-weight:850;cursor:pointer}.admin-catalog-subtab.active{background:#111417;color:#fff;border-color:#111417}.admin-flashcards-workspace{border:1px solid #dfe4e8;border-radius:20px;background:#fff;padding:22px}.admin-flashcards-generator-grid{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:12px;align-items:end}.admin-flashcard-source-list{display:grid;gap:8px;margin-top:18px}.admin-flashcard-source-row{display:flex;align-items:center;justify-content:space-between;text-align:left;border:1px solid #e3e7ea;background:#fff;border-radius:14px;padding:13px 15px;cursor:pointer}.admin-flashcard-source-row span{display:flex;flex-direction:column;gap:3px}.admin-flashcard-source-row small{color:#7b858d}.admin-flashcard-source-row em{font-style:normal;font-size:11px;color:#66717a}
.profile-cropper{margin-top:14px;padding:14px;border:1px solid #e0e5e8;border-radius:16px;background:#f8faf9}.profile-crop-viewport{width:240px;height:240px;max-width:100%;aspect-ratio:1;margin:auto;overflow:hidden;border-radius:50%;background:#e9edef;cursor:grab;touch-action:none;position:relative}.profile-crop-viewport:active{cursor:grabbing}.profile-crop-viewport img{width:100%;height:100%;object-fit:cover;transform-origin:center;user-select:none;pointer-events:none;will-change:transform}.profile-cropper>label{display:flex;gap:10px;align-items:center;margin-top:12px}.profile-cropper input[type=range]{flex:1}.profile-crop-nudges{display:flex;justify-content:center;gap:7px;margin:10px 0}.profile-crop-nudges button{width:36px;height:34px;border:1px solid #d7dde1;border-radius:9px;background:#fff;cursor:pointer}
.collection-cover-picker{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px dashed #cad3d8;border-radius:14px;cursor:pointer}.collection-cover-picker input{display:none}.collection-cover-picker em{font-style:normal;font-size:11px;color:#65717a}.collection-cover-thumb{width:54px;height:54px;border-radius:12px;overflow:hidden;background:#f0f3f4;display:grid;place-items:center;flex:0 0 54px}.collection-cover-thumb img{width:100%;height:100%;object-fit:cover}
.school-feature-notice{margin-bottom:14px;padding:12px 14px;border:1px solid #dce5d6;border-radius:14px;background:#f4fced;color:#426334;font-size:12px}.personal-repeat-picker{margin-top:10px}.personal-repeat-picker>span{display:block;font-size:11px;font-weight:850;margin-bottom:7px}.weekday-checks{display:flex;flex-wrap:wrap;gap:7px}.weekday-checks label{display:flex;align-items:center;gap:5px;border:1px solid #dde3e7;border-radius:999px;padding:7px 9px;background:#fff;font-size:10px;font-weight:750}.weekday-checks input{accent-color:#111417}
@media(max-width:760px){.wiki-catalog-search-wrap{display:grid!important;grid-template-columns:1fr!important;gap:8px}.catalog-subject-filter{width:100%}.admin-flashcards-generator-grid{grid-template-columns:1fr}.flashcard-self-grade{margin-top:326px}.flashcard-results-card{padding:26px 18px;margin:24px 0}.profile-crop-viewport{width:210px;height:210px}.admin-catalog-subtabs{overflow:auto}.flashcard-study-header{gap:14px;align-items:flex-start}.flashcard-results-actions{flex-direction:column}.flashcard-results-actions>*{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.is-loading{position:relative;cursor:wait;opacity:.82}.is-loading::after{content:"";display:inline-block;width:13px;height:13px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:spin .65s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}


/* =========================================================
   V8.9 ONBOARDING PLANS + GLOBAL LOADING + MOTION POLISH
========================================================= */
.setup-plan-picker[hidden]{display:none!important;}
.setup-plan-picker{
    margin:20px 0 18px;
    padding:0;
    border:0;
}
.setup-plan-picker legend{
    margin-bottom:6px;
    font-size:13px;
    font-weight:900;
    color:#15181b;
}
.setup-plan-intro{
    margin:0 0 12px!important;
    color:#737c85!important;
    font-size:11px!important;
}
.setup-plan-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.setup-plan-card{
    position:relative;
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:8px;
    padding:16px;
    border:1px solid #dfe5e8;
    border-radius:18px;
    background:#fff;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(17,20,23,.035);
    transition:transform .2s var(--ease-spring),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.setup-plan-card:hover{
    transform:translateY(-2px);
    border-color:#c9d2d8;
    box-shadow:0 12px 28px rgba(17,20,23,.075);
}
.setup-plan-card.is-selected{
    border-color:#85d900;
    background:linear-gradient(180deg,#fbfff6,#fff);
    box-shadow:0 0 0 3px rgba(146,255,39,.16),0 14px 30px rgba(17,20,23,.06);
}
.setup-plan-card input{
    position:absolute;
    top:14px;
    right:14px;
    width:18px;
    height:18px;
    accent-color:#111417;
}
.setup-plan-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:34px;}
.setup-plan-topline strong{font-size:14px;}
.setup-plan-topline em{font-style:normal;font-size:9px;font-weight:900;color:#4f8d00;background:#efffd8;border-radius:999px;padding:5px 8px;white-space:nowrap;}
.setup-plan-price{font-size:24px;font-weight:950;line-height:1.1;letter-spacing:-.03em;}
.setup-plan-price small{font-size:10px;font-weight:750;color:#7a838a;letter-spacing:0;}
.setup-plan-benefit,.setup-plan-foot{font-size:10.5px;line-height:1.5;color:#5e6870;}
.setup-plan-foot{margin-top:auto;color:#7b848b;}
.setup-payment-contact{display:inline-flex;margin-top:10px;color:#568e00;font-size:10.5px;font-weight:850;text-decoration:none;}
.setup-payment-contact:hover{text-decoration:underline;}

.tuklass-network-activity{
    position:fixed;
    z-index:20000;
    top:14px;
    left:50%;
    display:flex;
    align-items:center;
    gap:8px;
    transform:translate(-50%,-18px) scale(.98);
    padding:9px 13px;
    border:1px solid rgba(17,20,23,.10);
    border-radius:999px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 30px rgba(17,20,23,.12);
    color:#333a40;
    font-size:10px;
    font-weight:850;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    backdrop-filter:blur(12px);
    transition:opacity .18s ease,transform .18s var(--ease-spring),visibility .18s ease;
}
.tuklass-network-activity.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);}
.tuklass-network-activity .route-spinner{width:14px;height:14px;border-width:2px;}

.tuklass-route{animation:tuklassRouteIn .24s var(--ease-spring) both;}
@keyframes tuklassRouteIn{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
.notes-empty-card,.admin-catalog-row,.flashcard-collection-deck-row,.wiki-collection-section{animation:tuklassContentIn .22s ease both;}
@keyframes tuklassContentIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media(max-width:680px){
    .setup-plan-grid{grid-template-columns:1fr;}
    .setup-plan-card{padding:14px;}
    .setup-plan-price{font-size:22px;}
}
@media(max-width:420px){
    .setup-plan-topline{align-items:flex-start;flex-direction:column;gap:6px;}
    .setup-plan-card input{top:13px;right:13px;}
    .tuklass-network-activity{top:9px;max-width:calc(100vw - 24px);}
}

/* =========================================================
   V9.0 NOTES STUDIO, PROFILE COVER, CACHE UX + MOTION POLISH
========================================================= */

/* Signup plans: three clear choices without radio/badge collisions. */
.setup-card-school{width:min(860px,100%);}
.setup-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
.setup-plan-card{padding:17px 17px 48px;isolation:isolate;}
.setup-plan-card input{
    top:auto;
    bottom:16px;
    right:16px;
    width:19px;
    height:19px;
    z-index:2;
}
.setup-plan-topline{gap:8px;align-items:flex-start;flex-wrap:wrap;padding-right:0;}
.setup-plan-topline em{max-width:100%;white-space:normal;line-height:1.2;}
.setup-plan-foot{padding-right:30px;}
.setup-plan-card:has(input:focus-visible){outline:3px solid rgba(120,210,0,.22);outline-offset:2px;}

/* Notes catalog now reads like a real learning site rather than a data list. */
.route-notes .route-head{margin-bottom:20px;}
.route-notes .notes-panel,
.route-notes .wiki-catalog-shell{border-radius:24px;}
.wiki-catalog-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(180px,260px);
    gap:12px;
    align-items:center;
    margin-bottom:26px;
    padding:14px;
    border:1px solid #e7ecef;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 26px rgba(25,31,36,.045);
}
.wiki-catalog-search-wrap{min-width:0;}
.wiki-catalog-search-wrap input,
.catalog-subject-filter{min-height:44px;border-radius:12px!important;}
.notes-site-subject{margin:0 0 34px;}
.notes-site-subject-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
    padding:0 2px;
}
.notes-site-subject-head>div{display:flex;align-items:center;gap:10px;min-width:0;}
.notes-site-subject-head h3{margin:0;font-size:20px;letter-spacing:-.025em;}
.notes-site-subject-head span:last-child,.notes-site-subject-head>span{font-size:11px;color:#768089;font-weight:750;}
.notes-site-subject-mark{width:10px;height:10px;border-radius:50%;background:#9cff17;box-shadow:0 0 0 5px rgba(156,255,23,.13);flex:0 0 auto;}
.notes-site-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.notes-site-card{
    min-width:0;
    overflow:hidden;
    border:1px solid #e4e9ec;
    border-radius:20px;
    background:linear-gradient(180deg,#fff 0%,#fbfcfc 100%);
    box-shadow:0 8px 24px rgba(24,30,35,.045);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
.notes-site-card:hover{transform:translateY(-4px);border-color:#d6dee2;box-shadow:0 18px 42px rgba(24,30,35,.10);}
.notes-site-card>button{
    width:100%;height:100%;display:flex;flex-direction:column;gap:10px;padding:20px;text-align:left;border:0;background:transparent;color:inherit;cursor:pointer;
}
.notes-site-card-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#6d767e;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;}
.notes-site-card-topline em{font-style:normal;padding:5px 8px;border-radius:999px;background:#f1f5f6;color:#5f6870;letter-spacing:0;text-transform:none;}
.notes-site-card h4{margin:2px 0 0;font-size:20px;line-height:1.18;letter-spacing:-.025em;color:#171a1d;}
.notes-site-card p{margin:0;color:#6f7880;font-size:12px;line-height:1.58;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.notes-site-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;color:#497f00;font-size:11px;font-weight:850;}
.notes-site-card-footer b{font-size:18px;transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.notes-site-card:hover .notes-site-card-footer b{transform:translateX(4px);}

/* Reader page. */
.wiki-article{max-width:1180px;margin:0 auto;}
.wiki-back-button{margin-bottom:16px;border:0;background:#f3f6f7;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:800;cursor:pointer;transition:transform .2s ease,background .2s ease;}
.wiki-back-button:hover{transform:translateX(-2px);background:#eaf0f2;}
.wiki-article-header{
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    padding:clamp(24px,4vw,44px);
    border:1px solid #e5eaed;
    border-radius:26px;
    background:linear-gradient(135deg,#ffffff 0%,#f8fbf4 100%);
    box-shadow:0 16px 48px rgba(22,28,33,.06);
}
.wiki-article-header::after{content:"";position:absolute;right:-70px;top:-85px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(155,255,24,.22),rgba(155,255,24,0) 70%);pointer-events:none;}
.wiki-eyebrow{display:inline-flex;margin-bottom:10px;padding:6px 9px;border-radius:999px;background:#efffd9;color:#4e8300;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.wiki-article-header h1{position:relative;z-index:1;margin:0;max-width:850px;font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.05em;}
.wiki-lead{position:relative;z-index:1;max-width:760px;margin:14px 0 0;color:#5f6971;font-size:15px;line-height:1.7;}
.wiki-article-byline{margin-top:18px;color:#899197;font-size:10.5px;font-weight:700;}
.wiki-article-layout{display:grid;grid-template-columns:180px minmax(0,1fr) 220px;gap:24px;align-items:start;}
.wiki-toc{position:sticky;top:92px;padding:16px;border:1px solid #e8edef;border-radius:16px;background:#fff;box-shadow:0 7px 22px rgba(24,30,35,.035);}
.wiki-toc strong{display:block;margin-bottom:9px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;}
.wiki-toc a{display:block;padding:5px 0;color:#68727a;font-size:10.5px;line-height:1.35;text-decoration:none;}
.wiki-toc a:hover{color:#3f7200;}
.wiki-article-body{min-width:0;padding:28px clamp(20px,3vw,38px);border:1px solid #e6ebee;border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(24,30,35,.045);color:#333a40;font-size:14px;line-height:1.75;}
.wiki-article-body>section:first-child p:first-child{margin-top:0;font-size:15px;color:#556069;}
.wiki-article-body h2,.wiki-article-body h3,.wiki-article-body h4{scroll-margin-top:100px;color:#171a1d;line-height:1.18;letter-spacing:-.025em;}
.wiki-article-body h2{margin:42px 0 12px;font-size:25px;}
.wiki-article-body h3{margin:32px 0 10px;font-size:20px;}
.wiki-article-body p{margin:0 0 16px;}
.wiki-article-body ul{margin:0 0 20px;padding-left:22px;}

.lesson-block{margin:26px 0;}
.lesson-block-heading{margin-top:42px!important;}
.lesson-image-block{margin:30px 0;text-align:center;}
.lesson-image-button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;}
.lesson-image-block img,.lesson-image-text img{display:block;width:100%;max-height:620px;object-fit:contain;border-radius:18px;background:#f4f7f8;box-shadow:0 10px 28px rgba(20,27,31,.08);}
.lesson-image-block figcaption,.lesson-image-text figcaption{margin-top:8px;color:#7b848b;font-size:10.5px;text-align:center;}
.lesson-image-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding:18px;border:1px solid #e7ecee;border-radius:20px;background:#fbfcfc;}
.lesson-image-text.image-right figure{order:2;}
.lesson-image-text.image-right .lesson-image-text-copy{order:1;}
.lesson-image-text figure{margin:0;min-width:0;}
.lesson-image-text-copy{min-width:0;}
.lesson-video-block{padding:18px;border:1px solid #e4e9ec;border-radius:20px;background:#fafbfb;}
.lesson-video-block h3{margin:0 0 12px!important;}
.lesson-video-frame{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:14px;background:#111;box-shadow:0 10px 28px rgba(20,27,31,.12);}
.lesson-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lesson-callout{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:17px 18px;border:1px solid #ddecce;border-radius:17px;background:#f8fff0;}
.lesson-callout-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#9cff17;color:#203400;font-weight:950;}
.lesson-callout p:last-child{margin-bottom:0;}
.lesson-divider{display:flex;align-items:center;gap:12px;margin:34px 0;}
.lesson-divider span{display:block;width:100%;height:1px;background:#e3e9ec;}

/* Canva-like lesson builder. */
.route-admin-catalog .admin-catalog-layout{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:18px;align-items:start;}
.admin-catalog-editor,.admin-catalog-library{border-radius:22px!important;}
.admin-canvas-editor{margin:20px 0 18px;padding:18px;border:1px solid #e3e9ec;border-radius:20px;background:#f7f9f9;}
.admin-canvas-toolbar-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;}
.admin-canvas-toolbar-wrap h3{margin:2px 0 4px;font-size:18px;letter-spacing:-.025em;}
.admin-canvas-toolbar-wrap p{max-width:560px;margin:0;color:#737d84;font-size:11px;line-height:1.5;}
.admin-canvas-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;max-width:420px;}
.admin-canvas-toolbar button{display:flex;align-items:center;gap:6px;min-height:36px;padding:7px 10px;border:1px solid #dce3e6;border-radius:11px;background:#fff;color:#30363a;font-size:10px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(20,27,31,.035);transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease,box-shadow .2s ease;}
.admin-canvas-toolbar button:hover{transform:translateY(-2px);border-color:#bdc8cd;box-shadow:0 8px 18px rgba(20,27,31,.08);}
.admin-canvas-toolbar button b{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#eef2f3;color:#1e2428;font-size:10px;}
.admin-canvas-workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;align-items:start;}
.admin-catalog-blocks{display:grid;gap:10px;min-width:0;}
.admin-content-block{overflow:hidden;border:1px solid #e0e6e9;border-radius:16px;background:#fff;box-shadow:0 7px 18px rgba(20,27,31,.035);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease;}
.admin-content-block:hover{border-color:#ccd6da;box-shadow:0 11px 24px rgba(20,27,31,.07);}
.admin-content-block.is-callout{border-color:#d9eacb;background:#fbfff7;}
.admin-block-head{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid #edf0f2;background:#fafbfb;}
.admin-block-grab{color:#a0a8ad;letter-spacing:-3px;font-size:13px;}
.admin-block-type{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:850;text-transform:capitalize;}
.admin-block-type b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#edf2f3;}
.admin-block-index{margin-left:auto;color:#9ba3a8;font-size:9px;font-weight:800;}
.admin-block-actions{display:flex;gap:4px;}
.admin-block-actions button{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid #e0e5e8;border-radius:8px;background:#fff;cursor:pointer;color:#586168;transition:background .15s ease,transform .15s ease;}
.admin-block-actions button:hover:not(:disabled){background:#eef3f4;transform:translateY(-1px);}
.admin-block-actions button.danger:hover{background:#fff1f1;color:#b42318;}
.admin-block-actions button:disabled{opacity:.35;cursor:not-allowed;}
.admin-block-body{padding:12px;}
.admin-block-body input,.admin-block-body textarea,.admin-block-body select{width:100%;border:1px solid #dfe5e8;border-radius:11px;background:#fff;padding:10px 11px;color:#252b2f;font:inherit;outline:0;transition:border-color .18s ease,box-shadow .18s ease;}
.admin-block-body input:focus,.admin-block-body textarea:focus,.admin-block-body select:focus{border-color:#93cb4a;box-shadow:0 0 0 3px rgba(144,210,52,.13);}
.admin-block-textarea{min-height:130px;resize:vertical;line-height:1.55;}
.admin-block-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px;}
.admin-block-image-layout{display:grid;gap:10px;}
.admin-block-image-layout.with-text{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;}
.admin-block-image-picker{position:relative;display:grid;place-items:center;min-height:170px;overflow:hidden;border:1.5px dashed #cfd7db;border-radius:14px;background:#f7f9fa;color:#899198;}
.admin-block-image-picker.has-image{border-style:solid;background:#eef2f3;}
.admin-block-image-picker img{width:100%;height:100%;min-height:170px;max-height:280px;object-fit:cover;}
.admin-block-image-picker button{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:7px 10px;border:0;border-radius:999px;background:rgba(20,24,27,.88);color:#fff;font-size:9.5px;font-weight:850;cursor:pointer;backdrop-filter:blur(8px);}
.admin-block-side-text{display:flex;flex-direction:column;gap:8px;}
.admin-block-side-text textarea{flex:1;min-height:135px;resize:vertical;line-height:1.5;}
.admin-block-caption{margin-top:8px;}
.admin-block-youtube{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:start;}
.admin-block-youtube>div:last-child{display:grid;gap:8px;}
.admin-youtube-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#171a1d;color:#fff;font-size:15px;}
.admin-block-youtube small{color:#7c858b;font-size:9.5px;}
.admin-block-divider-preview{display:flex;align-items:center;gap:10px;color:#8b9398;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;}
.admin-block-divider-preview span{height:1px;background:#dfe5e8;flex:1;}
.admin-canvas-preview-card{position:sticky;top:90px;padding:14px;border:1px solid #e0e6e9;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(20,27,31,.04);}
.admin-canvas-preview-card>small{display:block;margin-top:12px;color:#8b9398;font-size:9px;line-height:1.45;}
.admin-canvas-preview{margin-top:9px;padding:13px;border-radius:12px;background:#f7f9f9;}
.admin-preview-eyebrow{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#639d12;}
.admin-canvas-preview h2{margin:5px 0;font-size:16px;line-height:1.12;}
.admin-canvas-preview p{margin:0;color:#68727a;font-size:9.5px;line-height:1.45;}
.admin-preview-block-count{margin-top:10px;padding-top:8px;border-top:1px solid #e4e9eb;color:#7e878d;font-size:8.5px;font-weight:750;}

/* Facebook-style profile cover — collection covers intentionally remain folders. */
.route-profile .profile-card::before{display:none!important;}
.profile-route-container{max-width:980px;margin:0 auto;}
.social-profile-card{overflow:hidden!important;padding:0!important;border-radius:24px!important;border:1px solid #e0e6e9!important;background:#fff!important;box-shadow:0 18px 48px rgba(24,30,35,.08)!important;}
.profile-cover{position:relative;height:clamp(170px,27vw,300px);overflow:hidden;background:linear-gradient(135deg,#eaf0f1,#f8fff1);}
.profile-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.profile-cover-placeholder{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,#e9eff1 0%,#f4ffe8 100%);color:#a0a9ae;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
.profile-card-content{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:20px;padding:0 28px 28px;}
.social-profile-picture{position:relative;z-index:2;width:138px!important;height:138px!important;margin-top:-62px!important;border:5px solid #fff!important;border-radius:50%!important;background:#fff;object-fit:cover;box-shadow:0 7px 22px rgba(20,27,31,.14)!important;}
.profile-identity{min-width:0;padding-top:15px;}
.profile-identity .profile-name{margin:0!important;font-size:26px!important;line-height:1.05!important;letter-spacing:-.035em!important;}
.profile-identity .profile-username{margin-top:5px;color:#727b82;font-size:12px;}
.profile-identity .profile-bio{max-width:650px;margin-top:11px;color:#505960;font-size:12px;line-height:1.55;white-space:pre-wrap;}
.profile-bio-empty{color:#9aa2a7!important;font-style:italic;}
.profile-actions{align-self:center;padding-top:14px;}
.profile-actions .button{white-space:nowrap;}

.social-edit-preview{overflow:hidden!important;padding:0!important;}
.social-edit-preview .edit-preview-label{position:absolute;z-index:4;top:10px;left:10px;margin:0!important;padding:5px 8px;border-radius:999px;background:rgba(20,24,27,.66);color:#fff!important;font-size:8px!important;backdrop-filter:blur(7px);}
.edit-preview-cover{height:130px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#e7edef,#f3ffe4);background-size:cover;background-position:center;color:#939da2;font-size:9px;font-weight:800;}
.edit-preview-profile-row{display:flex;align-items:end;gap:11px;padding:0 15px;margin-top:-32px;position:relative;z-index:2;}
.edit-preview-picture{width:70px!important;height:70px!important;flex:0 0 auto;border:4px solid #fff!important;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 5px 15px rgba(20,27,31,.12);}
.edit-preview-identity{padding-bottom:5px;min-width:0;}
.edit-preview-bio{padding:10px 15px 15px!important;}
.edit-cover-area{margin-bottom:20px;overflow:hidden;border:1px solid #e1e7ea;border-radius:18px;background:#fafbfb;}
.edit-cover-preview{aspect-ratio:8/3;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#e8eef0,#f3ffe5);background-size:cover;background-position:center;color:#90999e;font-size:10px;font-weight:800;}
.edit-cover-actions{display:flex;align-items:center;gap:14px;padding:13px 14px;background:#fff;}
.edit-cover-actions>div{display:grid;gap:2px;min-width:0;flex:1;}
.edit-cover-actions strong{font-size:11px;}
.edit-cover-actions span{color:#80898f;font-size:9.5px;line-height:1.4;}
.profile-crop-viewport img{will-change:transform;transition:none!important;}
.profile-crop-viewport img.is-nudging{transition:transform .16s cubic-bezier(.2,.8,.2,1)!important;}
.profile-crop-nudges button{transition:transform .16s cubic-bezier(.2,.8,.2,1),background .16s ease,border-color .16s ease;}
.profile-crop-nudges button:hover{transform:translateY(-1px);}
.profile-crop-nudges button:active{transform:scale(.94);}

/* Smoother interaction language across the app. */
.button,.spa-black-button,.admin-tab-link,.flashcards-tab-button,.study-collection-card,.wiki-catalog-row,.admin-catalog-row,.route-field input,.route-field select,.route-field textarea{
    transition-duration:.24s!important;
    transition-timing-function:cubic-bezier(.2,.8,.2,1)!important;
}
.tuklass-route{animation:tuklassRouteInV90 .32s cubic-bezier(.2,.8,.2,1) both;}
@keyframes tuklassRouteInV90{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.tuklass-is-navigating .sidebar a,.tuklass-is-navigating .mobile-menu-button{pointer-events:auto!important;}

@media(max-width:1100px){
    .wiki-article-layout{grid-template-columns:160px minmax(0,1fr);}
    .wiki-article-layout>.wiki-facts,.wiki-article-layout>.wiki-article-facts{grid-column:1/-1;}
    .admin-canvas-workspace{grid-template-columns:1fr;}
    .admin-canvas-preview-card{position:relative;top:auto;}
}
@media(max-width:900px){
    .setup-plan-grid{grid-template-columns:1fr;}
    .setup-plan-card{padding-bottom:44px;}
    .route-admin-catalog .admin-catalog-layout{grid-template-columns:1fr;}
    .admin-canvas-toolbar-wrap{display:grid;}
    .admin-canvas-toolbar{justify-content:flex-start;max-width:none;}
    .wiki-article-layout{grid-template-columns:1fr;}
    .wiki-toc{position:relative;top:auto;display:flex;gap:8px;overflow:auto;white-space:nowrap;}
    .wiki-toc strong{display:none;}
    .wiki-toc a{flex:0 0 auto;padding:7px 10px;border:1px solid #e5eaec;border-radius:999px;}
}
@media(max-width:720px){
    .wiki-catalog-toolbar{grid-template-columns:1fr;}
    .notes-site-card-grid{grid-template-columns:1fr;}
    .lesson-image-text{grid-template-columns:1fr;padding:13px;}
    .lesson-image-text.image-right figure,.lesson-image-text.image-right .lesson-image-text-copy{order:initial;}
    .admin-block-image-layout.with-text,.admin-block-row{grid-template-columns:1fr;}
    .profile-card-content{grid-template-columns:1fr;gap:8px;align-items:start;padding:0 18px 22px;}
    .social-profile-picture{width:112px!important;height:112px!important;margin-top:-50px!important;}
    .profile-identity{padding-top:0;}
    .profile-actions{padding-top:5px;}
    .profile-actions .button{width:100%;justify-content:center;}
    .edit-cover-actions{align-items:flex-start;flex-wrap:wrap;}
    .edit-cover-actions .edit-upload-button{width:100%;}
    .wiki-article-header{border-radius:20px;}
    .wiki-article-body{padding:22px 17px;border-radius:18px;}
}
@media(max-width:420px){
    .setup-plan-topline{flex-direction:row;align-items:flex-start;gap:6px;}
    .setup-plan-card input{top:auto;right:14px;bottom:14px;}
    .admin-canvas-toolbar button{flex:1 1 calc(50% - 7px);justify-content:center;}
    .profile-cover{height:145px;}
}

@media(prefers-reduced-motion:reduce){
    .tuklass-route,.notes-site-card,.admin-content-block{animation:none!important;transform:none!important;}
}
@media(max-width:1100px) and (min-width:901px){
    .wiki-article-layout>.wiki-infobox{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr) auto;gap:16px;align-items:center;}
    .wiki-article-layout>.wiki-infobox dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;}
}

/* V9.0 extra cleanup for the complete Notes workspace. */
.route-notes .notes-tabs{display:inline-flex;gap:5px;margin:0 0 16px;padding:5px;border:1px solid #e3e8eb;border-radius:14px;background:#f6f8f8;}
.route-notes .notes-tab-button{min-height:36px;padding:8px 14px;border:0;border-radius:10px;background:transparent;color:#707980;font-size:11px;font-weight:850;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;}
.route-notes .notes-tab-button:hover{color:#30363a;}
.route-notes .notes-tab-button.active{background:#fff;color:#171a1d;box-shadow:0 4px 12px rgba(22,28,33,.08);}
.route-notes .notes-panel{padding:20px;border:1px solid #e5eaed;border-radius:24px;background:#fff;box-shadow:0 10px 32px rgba(22,28,33,.04);}
.route-notes .collections-layout{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:18px;align-items:start;}
.route-notes .collections-sidebar-card{position:sticky;top:88px;padding:18px;border:1px solid #e3e9ec;border-radius:18px;background:#fafbfb;box-shadow:none;}
.route-notes .collections-sidebar-card h2,.route-notes .collections-heading h2{margin:3px 0 6px;letter-spacing:-.025em;}
.route-notes .collections-sidebar-card p{margin:0 0 16px;color:#778087;font-size:11px;line-height:1.5;}
.route-notes .notes-field{display:grid;gap:6px;margin-bottom:10px;}
.route-notes .notes-field>span{font-size:10px;font-weight:850;color:#596269;}
.route-notes .notes-field input,.route-notes .notes-field textarea{width:100%;border:1px solid #dfe5e8;border-radius:11px;background:#fff;padding:10px 11px;outline:0;transition:border-color .2s ease,box-shadow .2s ease;}
.route-notes .notes-field textarea{min-height:88px;resize:vertical;}
.route-notes .notes-field input:focus,.route-notes .notes-field textarea:focus{border-color:#9acb5b;box-shadow:0 0 0 3px rgba(150,210,75,.12);}
.route-notes .collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:12px;}
.route-notes .study-collection-card{display:flex;align-items:stretch;min-width:0;overflow:hidden;border:1px solid #e2e8eb;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(22,28,33,.035);}
.route-notes .study-collection-open{display:flex;align-items:center;gap:11px;min-width:0;flex:1;padding:13px;border:0;background:transparent;text-align:left;cursor:pointer;}
.route-notes .study-collection-open>span:last-child{min-width:0;display:grid;gap:3px;}
.route-notes .study-collection-open strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.route-notes .study-collection-open small{color:#899197;font-size:9.5px;}
.route-notes .collection-cover-thumb{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:#f0f4f5;overflow:hidden;}
.route-notes .collection-folder-mark{position:relative;width:24px;height:17px;border-radius:3px;background:#9edb47;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06);}
.route-notes .collection-folder-mark::before{content:"";position:absolute;left:2px;top:-5px;width:11px;height:6px;border-radius:3px 3px 0 0;background:#9edb47;}
.route-notes .collection-more-button{align-self:center;margin-right:8px;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:#9a6b6b;font-size:9px;font-weight:800;cursor:pointer;}
.route-notes .collection-more-button:hover{background:#fff3f3;color:#a43a3a;}
.route-notes .collection-workspace{margin-top:22px;padding:20px;border:1px solid #e3e9ec;border-radius:22px;background:#fbfcfc;}
.route-notes .collection-builder-grid{gap:12px;}
.route-notes .collection-add-card{border-radius:17px!important;border-color:#e2e8eb!important;box-shadow:none!important;}

@media(max-width:820px){
    .route-notes .collections-layout{grid-template-columns:1fr;}
    .route-notes .collections-sidebar-card{position:relative;top:auto;}
}
@media(max-width:620px){
    .route-notes .notes-panel{padding:14px;border-radius:18px;}
    .route-notes .collection-grid{grid-template-columns:1fr;}
    .route-notes .notes-tabs{display:flex;width:100%;}
    .route-notes .notes-tab-button{flex:1;}
}


/* =========================================================
   V9.1 — true WYSIWYG Notes page editor + resizable lesson blocks
========================================================= */
.lesson-sized-block{width:var(--lesson-block-width,100%);max-width:100%;box-sizing:border-box;font-size:var(--lesson-font-size,inherit);}
.lesson-sized-block.lesson-align-left{margin-left:0;margin-right:auto;}
.lesson-sized-block.lesson-align-center{margin-left:auto;margin-right:auto;}
.lesson-sized-block.lesson-align-right{margin-left:auto;margin-right:0;}
.wiki-article-body .lesson-block-heading.lesson-sized-block{font-size:var(--lesson-font-size,inherit);}
.wiki-article-body .lesson-text-block.lesson-sized-block,.wiki-article-body .lesson-callout.lesson-sized-block,.wiki-article-body .lesson-image-text.lesson-sized-block{font-size:var(--lesson-font-size,inherit);}
.lesson-image-block.lesson-sized-block img{width:var(--lesson-image-width,100%);max-width:100%;margin-inline:auto;}
.lesson-image-text.lesson-sized-block figure img{width:var(--lesson-image-width,100%);max-width:100%;margin-inline:auto;}

.admin-wysiwyg-editor{padding:18px 12px 24px;background:#eef2f3;border-color:#dfe6e8;}
.admin-wysiwyg-editor .admin-canvas-toolbar-wrap{padding:4px 6px 0;align-items:center;}
.admin-editor-mode-toggle{display:inline-flex;flex:0 0 auto;padding:4px;border:1px solid #d7dfe2;border-radius:12px;background:#fff;box-shadow:0 5px 14px rgba(20,27,31,.05);}
.admin-editor-mode-toggle button{min-width:80px;padding:8px 12px;border:0;border-radius:9px;background:transparent;color:#6e777d;font-size:10px;font-weight:900;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease;}
.admin-editor-mode-toggle button.active{background:#171a1d;color:#fff;box-shadow:0 5px 12px rgba(20,27,31,.15);}
.admin-canvas-add-toolbar{position:sticky;top:72px;z-index:16;max-width:none!important;justify-content:flex-start!important;margin:0 6px 14px;padding:9px;border:1px solid #dce3e6;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 10px 28px rgba(20,27,31,.08);backdrop-filter:blur(14px);}
.admin-live-canvas-workspace{display:block!important;}
.admin-wysiwyg-canvas{display:block!important;overflow:auto;padding:12px 6px 24px;}
.admin-live-article{min-width:760px;max-width:1120px!important;margin:0 auto;padding:22px;border:1px solid #dce4e7;border-radius:22px;background:#fff;box-shadow:0 22px 58px rgba(21,29,34,.12);}
.admin-live-article .wiki-article-layout{grid-template-columns:150px minmax(0,1fr) 210px;gap:20px;}
.admin-live-article [contenteditable="true"]{outline:none;cursor:text;}
.admin-live-article .wiki-article-header [contenteditable="true"]{border-radius:7px;transition:box-shadow .16s ease,background .16s ease;}
.admin-live-article .wiki-article-header [contenteditable="true"]:hover,.admin-live-article .wiki-article-header [contenteditable="true"]:focus{background:rgba(156,255,23,.08);box-shadow:0 0 0 3px rgba(143,211,49,.12);}
.admin-live-note-page{position:relative;overflow:visible!important;}
.admin-wysiwyg-block{position:relative;margin:8px -10px;padding:10px;border:1px solid transparent;border-radius:18px;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;}
.admin-wysiwyg-block:hover{border-color:#dce5e8;background:#fbfcfc;}
.admin-wysiwyg-block.is-selected{z-index:4;border-color:#9bd94a;background:#fcfff8;box-shadow:0 0 0 3px rgba(143,211,49,.10),0 12px 30px rgba(20,27,31,.07);}
.admin-wysiwyg-content{position:relative;min-width:0;}
.admin-wysiwyg-controls{display:none;margin:-2px -2px 10px;padding:9px;border:1px solid #dce4e6;border-radius:13px;background:#fff;box-shadow:0 7px 18px rgba(20,27,31,.07);font-family:Inter,system-ui,sans-serif;color:#30373b;text-align:left;}
.admin-wysiwyg-block.is-selected>.admin-wysiwyg-controls{display:block;animation:adminToolIn .16s ease both;}
@keyframes adminToolIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wysiwyg-control-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
.wysiwyg-control-row button{min-height:29px;padding:5px 8px;border:1px solid #dce3e6;border-radius:8px;background:#f8fafb;color:#4e585e;font-size:9px;font-weight:850;cursor:pointer;}
.wysiwyg-control-row button:hover:not(:disabled){background:#eef3f4;}
.wysiwyg-control-row button.danger{margin-left:auto;color:#b42318;background:#fff8f7;}
.wysiwyg-control-row button:disabled{opacity:.35;cursor:not-allowed;}
.wysiwyg-property-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;}
.wysiwyg-control{display:grid;gap:5px;min-width:0;}
.wysiwyg-control>span{display:flex;justify-content:space-between;gap:8px;color:#69737a;font-size:8.5px;font-weight:800;}
.wysiwyg-control>span b{color:#252b2f;font-size:8.5px;}
.wysiwyg-control input[type="range"]{width:100%;accent-color:#171a1d;cursor:ew-resize;}
.wysiwyg-select-control select{width:100%;height:31px;border:1px solid #dce3e6;border-radius:8px;background:#fff;padding:0 8px;color:#333b40;font-size:9px;font-weight:750;}
.admin-inline-copy{min-height:22px;white-space:pre-wrap;line-height:inherit;border-radius:7px;}
.admin-inline-copy:focus,.admin-inline-copy:hover{background:rgba(156,255,23,.07);box-shadow:0 0 0 3px rgba(143,211,49,.10);}
.admin-image-empty,.admin-video-empty{display:grid;place-items:center;min-height:180px;border:1.5px dashed #ccd5d9;border-radius:16px;background:#f5f8f9;color:#8c969c;font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:800;}
.admin-image-edit-button{display:block;margin:9px auto 0;padding:7px 11px;border:0;border-radius:999px;background:#171a1d;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:9px;font-weight:850;cursor:pointer;}
.admin-inline-caption{display:block;width:min(100%,420px);margin:8px auto 0;padding:7px 9px;border:1px solid #dfe5e8;border-radius:9px;background:#fff;text-align:center;font-family:Inter,system-ui,sans-serif;font-size:9px;}
.admin-inline-video-fields{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px;margin-top:9px;}
.admin-inline-video-fields input{width:100%;padding:8px 9px;border:1px solid #dfe5e8;border-radius:9px;font:inherit;font-size:10px;}
.admin-catalog-blocks.is-preview-mode .admin-live-article{box-shadow:0 18px 48px rgba(21,29,34,.09);}
.admin-live-article.is-previewing{pointer-events:auto;}
.admin-live-article.is-previewing .wiki-toc a{pointer-events:none;}

@media(max-width:980px){
  .admin-wysiwyg-canvas{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .admin-live-article{min-width:700px;}
}
@media(max-width:720px){
  .lesson-sized-block{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;}
  .lesson-image-text.lesson-sized-block{grid-template-columns:1fr!important;}
  .lesson-image-text.lesson-sized-block.image-right figure,.lesson-image-text.lesson-sized-block.image-right .lesson-image-text-copy{order:initial!important;}
  .admin-editor-mode-toggle{width:100%;}
  .admin-editor-mode-toggle button{flex:1;}
  .admin-canvas-add-toolbar{position:relative;top:auto;margin-inline:0;}
  .admin-wysiwyg-canvas{padding-inline:0;}
  .admin-live-article{min-width:680px;}
  .wysiwyg-property-grid{grid-template-columns:1fr;}
}

/* =========================================================
   V9.2 — install/download UI + responsive WYSIWYG polish
========================================================= */
.public-download-button{
    margin-left:auto;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 14px;
    border:1px solid #dfe5e8;
    border-radius:11px;
    background:#fff;
    color:#1c2226;
    font:800 11px/1 Inter,Arial,sans-serif;
    cursor:pointer;
    box-shadow:0 5px 16px rgba(18,24,28,.05);
    transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.public-download-button:hover{transform:translateY(-2px);background:#f8fbf5;border-color:#cfe2b3;box-shadow:0 9px 22px rgba(18,24,28,.08)}
.public-download-button span:first-child{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#9cff17;color:#1d3000;font-size:13px;font-weight:950}

.dashboard-download-icon{display:grid!important;place-items:center!important;font-size:25px!important;font-weight:950!important;color:#233500!important;background:linear-gradient(145deg,#efffd9,#dfffad)!important}
.dashboard-download-card .button{border:0;cursor:pointer}

.tuklass-download-modal[hidden]{display:none!important}
.tuklass-download-modal{position:fixed;z-index:12000;inset:0;display:grid;place-items:center;padding:20px}
.tuklass-download-backdrop{position:absolute;inset:0;border:0;background:rgba(12,16,19,.48);backdrop-filter:blur(7px);cursor:pointer;animation:tuklassDownloadFade .2s ease both}
.tuklass-download-card{position:relative;z-index:1;width:min(720px,100%);max-height:min(760px,calc(100dvh - 32px));overflow:auto;padding:26px;border:1px solid rgba(221,228,231,.95);border-radius:26px;background:#fff;box-shadow:0 34px 90px rgba(12,18,22,.25);animation:tuklassDownloadIn .28s cubic-bezier(.2,.8,.2,1) both}
.tuklass-download-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border:1px solid #e1e6e9;border-radius:12px;background:#f7f9fa;color:#4d565c;font-size:22px;line-height:1;cursor:pointer;transition:transform .18s ease,background .18s ease}
.tuklass-download-close:hover{transform:rotate(4deg);background:#eef3f4}
.tuklass-download-heading{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;padding-right:42px}
.tuklass-download-heading h2{margin:3px 0 5px;font-size:28px;line-height:1.06;letter-spacing:-.04em}
.tuklass-download-heading p{margin:0;max-width:520px;color:#6f7980;font-size:12px;line-height:1.55}
.tuklass-download-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:#9cff17;color:#203300;font-size:25px;font-weight:950;box-shadow:0 10px 26px rgba(125,191,25,.20)}
.tuklass-download-platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.tuklass-download-platforms button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name action" "sub action";gap:3px 12px;align-items:center;min-height:76px;padding:14px 15px;border:1px solid #e1e7ea;border-radius:16px;background:#fbfcfc;color:#20262a;text-align:left;cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease,background .22s ease}
.tuklass-download-platforms button:hover{transform:translateY(-3px);border-color:#cfe0b8;background:#fcfff8;box-shadow:0 12px 28px rgba(19,27,31,.08)}
.tuklass-download-platforms span{grid-area:name;font-size:14px;font-weight:900;letter-spacing:-.015em}
.tuklass-download-platforms small{grid-area:sub;color:#818b91;font-size:10px}
.tuklass-download-platforms b{grid-area:action;align-self:center;padding:7px 10px;border-radius:999px;background:#171a1d;color:#fff;font-size:9px;font-weight:900}
.tuklass-download-instructions{margin-top:14px;padding:12px 14px;border:1px solid #dfe6e9;border-radius:13px;background:#f7f9fa;color:#59636a;font-size:11px;line-height:1.55}
.tuklass-download-instructions.success{border-color:#d7ebbd;background:#f7ffed;color:#4c720e}
.tuklass-download-footnote{margin:13px 2px 0;color:#8a9399;font-size:9.5px;line-height:1.5}
.tuklass-download-footnote code{padding:2px 5px;border-radius:5px;background:#f0f3f4;color:#4b555b}
body.tuklass-download-open{overflow:hidden}
@keyframes tuklassDownloadFade{from{opacity:0}to{opacity:1}}
@keyframes tuklassDownloadIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* The live Notes editor should preview the same responsive page students get,
   rather than forcing a desktop-width page on phones/tablets. */
@media(max-width:900px){
    .admin-live-article{min-width:0!important;width:100%!important;padding:14px!important;border-radius:18px!important}
    .admin-live-article .wiki-article-layout{grid-template-columns:1fr!important;gap:14px!important}
    .admin-live-article .wiki-toc{position:relative!important;top:auto!important;display:flex!important;gap:7px!important;overflow-x:auto!important;white-space:nowrap!important}
    .admin-live-article .wiki-toc strong{display:none!important}
    .admin-live-article .wiki-toc a{flex:0 0 auto!important;padding:7px 9px!important;border:1px solid #e5eaec!important;border-radius:999px!important}
    .admin-wysiwyg-canvas{overflow-x:hidden!important;padding-inline:0!important}
    .admin-live-article .wiki-infobox{grid-column:auto!important;display:block!important}
}
@media(max-width:620px){
    .public-download-button{min-height:37px;padding:0 10px;font-size:10px}
    .public-download-button span:first-child{width:18px;height:18px;font-size:12px}
    .tuklass-download-card{padding:20px 16px;border-radius:20px}
    .tuklass-download-heading{grid-template-columns:42px minmax(0,1fr);gap:11px;padding-right:34px}
    .tuklass-download-mark{width:42px;height:42px;border-radius:13px;font-size:20px}
    .tuklass-download-heading h2{font-size:23px}
    .tuklass-download-platforms{grid-template-columns:1fr}
    .admin-live-article{padding:8px!important;border:0!important;background:transparent!important;box-shadow:none!important}
    .admin-live-article .wiki-article-header{padding:22px 18px!important}
    .admin-live-article .wiki-article-body{padding:20px 15px!important}
    .admin-wysiwyg-block{margin:7px -5px;padding:7px}
    .wysiwyg-property-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
    .tuklass-download-card,.tuklass-download-backdrop,.public-download-button,.tuklass-download-platforms button{animation:none!important;transition:none!important}
}

/* Give the live Notes page enough room to behave like the real reader. */
.route-admin-catalog .admin-catalog-layout{grid-template-columns:1fr!important;gap:18px!important}
.route-admin-catalog .admin-catalog-library{padding:20px!important}
.route-admin-catalog #adminCatalogList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.route-admin-catalog .admin-catalog-row{height:100%;padding:14px;border:1px solid #e6ebee;border-radius:14px;background:#fbfcfc}
.route-admin-catalog .admin-catalog-row:last-child{border-bottom:1px solid #e6ebee}
@media(max-width:760px){.route-admin-catalog #adminCatalogList{grid-template-columns:1fr}}

/* =========================================================
   V9.3 CONNECTION STATUS
   Non-blocking connection feedback that stays out of navigation.
========================================================= */
.tuklass-connection-status {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 100000;
    width: min(560px, calc(100vw - 28px));
    min-height: 64px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px 11px 13px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 17px;
    background: rgba(17,20,23,.96);
    color: #fff;
    box-shadow: 0 18px 50px rgba(15,23,42,.24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 18px) scale(.98);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .22s ease;
}

.tuklass-connection-status.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.tuklass-connection-status[data-state="online"] {
    background: rgba(20, 90, 55, .97);
}

.tuklass-connection-status[data-state="problem"] {
    background: rgba(92, 57, 13, .97);
}

.tuklass-connection-status[data-state="checking"] {
    background: rgba(31, 41, 55, .97);
}

.tuklass-connection-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
}

.tuklass-connection-icon::before,
.tuklass-connection-icon::after,
.tuklass-connection-icon span {
    content: "";
    display: block;
    position: absolute;
    border: 2px solid currentColor;
    border-color: currentColor transparent transparent transparent;
    border-radius: 50%;
}

.tuklass-connection-icon { position: relative; }
.tuklass-connection-icon::before { width: 20px; height: 20px; top: 9px; left: 9px; }
.tuklass-connection-icon::after { width: 12px; height: 12px; top: 14px; left: 13px; }
.tuklass-connection-icon span { width: 4px; height: 4px; top: 23px; left: 17px; background: currentColor; border: 0; }

.tuklass-connection-status[data-state="offline"] .tuklass-connection-icon::before {
    transform: rotate(-45deg);
    width: 25px;
    height: 2px;
    top: 18px;
    left: 7px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
}

.tuklass-connection-status[data-state="checking"] .tuklass-connection-icon::before {
    width: 18px;
    height: 18px;
    top: 8px;
    left: 8px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    animation: tuklassRouteSpin .75s linear infinite;
}
.tuklass-connection-status[data-state="checking"] .tuklass-connection-icon::after,
.tuklass-connection-status[data-state="checking"] .tuklass-connection-icon span { display:none; }

.tuklass-connection-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tuklass-connection-copy strong {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -.01em;
}

.tuklass-connection-copy span {
    color: rgba(255,255,255,.76);
    font-size: 11.5px;
    line-height: 1.4;
}

.tuklass-connection-retry {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    background: #fff;
    color: #111417;
    font: inherit;
    font-size: 11.5px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.tuklass-connection-retry:hover { transform: translateY(-1px); }
.tuklass-connection-retry:active { transform: translateY(0) scale(.98); }
.tuklass-connection-retry:disabled { opacity: .62; cursor: wait; }

body.tuklass-is-offline .tuklass-network-activity {
    display: none !important;
}

@media (max-width: 620px) {
    .tuklass-connection-status {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
        bottom: max(12px, env(safe-area-inset-bottom));
        border-radius: 15px;
    }

    .tuklass-connection-icon {
        width: 34px;
        height: 34px;
    }

    .tuklass-connection-retry {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tuklass-connection-status,
    .tuklass-connection-retry {
        transition: none !important;
    }
}