.cafeteria-shell {
    min-height: 100vh;
    color: var(--ink);
    background: var(--canvas);
}

.cafeteria-topbar {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 max(28px, calc((100vw - 1240px) / 2));
    border-bottom: 1px solid #edf1f3;
    background: rgba(255, 255, 255, .97);
}

.cafeteria-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    color: var(--navy);
    text-decoration: none;
}

.cafeteria-brand img {
    display: block;
    width: 220px;
    height: auto;
}

.cafeteria-brand span {
    margin-left: 2px;
    color: var(--teal);
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cafeteria-topbar-actions,
.cafeteria-profile,
.cafeteria-connected {
    display: flex;
    align-items: center;
}

.cafeteria-topbar-actions { gap: 17px; }

.cafeteria-connected {
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}

.cafeteria-connected span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6fd0a7;
    box-shadow: 0 0 0 4px rgba(111, 208, 167, .14);
}

.cafeteria-icon-button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.cafeteria-icon-button:hover { color: var(--navy); background: #f3f7f9; }
.cafeteria-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

.cafeteria-profile {
    gap: 9px;
    padding-left: 17px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.cafeteria-profile > span:first-child {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: var(--navy);
    background: #e8eef4;
    font-weight: 700;
}

.cafeteria-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: calc(100vh - 92px);
    background: var(--canvas);
}

.cafeteria-layout > .transcript-page { display: contents; }

.cafeteria-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: calc(100vh - 92px);
    padding: 30px 18px;
    color: var(--ink);
    background: rgba(255, 255, 255, .78);
    border-right: 1px solid var(--line);
}

.cafeteria-motto {
    max-width: 170px;
    margin: 0 12px 40px;
    color: var(--teal);
    font-family: "Cinzel", Georgia, serif;
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
}

.cafeteria-sidebar-label {
    margin: 0 12px 14px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cafeteria-nav { display: grid; gap: 5px; }

.cafeteria-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 12px 13px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #667b8b;
    background: transparent;
    font-size: 12px;
    text-decoration: none;
    transition: none;
}

.cafeteria-nav-item svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.cafeteria-nav-item:hover { color: var(--navy); background: #f4f7f9; border-color: #e4eaf0; transform: none; }
.cafeteria-nav-item.is-active { color: var(--navy); background: #e9eef3; border-color: #d9e2eb; box-shadow: inset 3px 0 0 var(--teal); font-weight: 650; }
/* IT 以别人的身份查看时，侧边栏最下面的提示：钉在底部，不挪动上面的标签页，也不增加页面高度 */
.cafeteria-view-as {
    display: grid;
    gap: 3px;
    margin: auto 0 0;
    padding: 12px;
    border: 1px solid #e0c46c;
    border-radius: 10px;
    color: #4a3200;
    background: #ffe9a8;
    font-size: 12px;
    line-height: 1.35;
}
.cafeteria-view-as-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.cafeteria-view-as strong { font-size: 13px; overflow-wrap: anywhere; }
.cafeteria-view-as small { font-size: 10px; color: #6b5200; }
.cafeteria-view-as a {
    justify-self: start;
    margin-top: 6px;
    padding: 4px 14px;
    border: 1px solid #b38b1c;
    border-radius: 6px;
    color: #4a3200;
    background: #fff7dc;
    font-weight: 600;
    text-decoration: none;
}
.cafeteria-view-as a:hover { background: #fff; }
.cafeteria-mobile-nav .cafeteria-view-as-exit { color: #4a3200; background: #ffe9a8; border-color: #e0c46c; }

.cafeteria-sidebar-note {
    margin: 36px 12px 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: #94a2ad;
    font-size: 10px;
    line-height: 1.45;
}

.cafeteria-sidebar-note strong { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }

.cafeteria-main {
    min-width: 0;
    padding: 43px clamp(22px, 4vw, 58px) 64px;
    background: radial-gradient(circle at 88% -4%, rgba(215, 237, 246, .7), transparent 28rem), linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}

.cafeteria-breadcrumb { color: #94a2ad; font-size: 11px; }
.cafeteria-breadcrumb span { padding: 0 5px; color: #c6d0da; }

.cafeteria-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 12px 0 25px;
}

.cafeteria-page-kicker,
.cafeteria-eyebrow {
    display: block;
    color: var(--teal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.cafeteria-page-kicker { margin-bottom: 8px; }
.cafeteria-page-heading h1 { margin: 0; color: var(--navy); font-family: "Cinzel", Georgia, serif; font-size: clamp(34px, 4vw, 48px); font-weight: 400; letter-spacing: -.045em; line-height: 1.12; }
.cafeteria-page-heading p { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 14px; }

.cafeteria-heading-meta { min-width: 150px; padding: 12px 0 12px 17px; border-left: 2px solid var(--gold); }
.cafeteria-heading-meta span, .cafeteria-heading-meta strong { display: block; }
.cafeteria-heading-meta span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.cafeteria-heading-meta strong { margin-top: 4px; color: var(--navy); font-size: 13px; }
.cafeteria-heading-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.cafeteria-heading-actions .cafeteria-button { flex: 0 0 auto; white-space: nowrap; }
.cafeteria-heading-actions .cafeteria-heading-meta { flex: 0 0 auto; white-space: nowrap; }
.cafeteria-heading-actions .cafeteria-heading-meta { margin-left: 8px; }

.cafeteria-student-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
    padding: 16px 19px;
    border: 1px solid #dfe7ee;
    border-radius: 12px;
    background: rgba(255, 255, 255, .85);
}

.cafeteria-student-identity, .cafeteria-detail-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cafeteria-student-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: var(--navy); background: linear-gradient(145deg, #e8f0f6, #f5eee0); font-size: 12px; font-weight: 700; }
.cafeteria-student-identity h2, .cafeteria-detail-identity h3 { margin: 4px 0 0; color: var(--navy); font-family: "Cinzel", Georgia, serif; font-size: 21px; font-weight: 400; letter-spacing: -.025em; }
.cafeteria-student-identity p, .cafeteria-detail-identity p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.cafeteria-student-select { display: grid; gap: 5px; min-width: 185px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cafeteria-student-select select, .cafeteria-select-field select { height: 37px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--navy); background: white; font-size: 12px; }
.cafeteria-student-view-only { min-width: 185px; padding-left: 15px; border-left: 2px solid var(--gold); }
.cafeteria-student-view-only span, .cafeteria-student-view-only strong { display: block; }
.cafeteria-student-view-only span { color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cafeteria-student-view-only strong { margin-top: 4px; color: var(--navy); font-size: 11px; font-weight: 600; }

.cafeteria-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.cafeteria-manager-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cafeteria-stat-card { min-width: 0; display: flex; align-items: flex-start; gap: 11px; padding: 16px 15px; border: 1px solid #e1e8ee; border-radius: 11px; background: rgba(255, 255, 255, .8); box-shadow: 0 5px 16px rgba(0, 28, 56, .035); }
.cafeteria-stat-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--navy); background: #e8eef4; font-size: 16px; font-weight: 600; }
.cafeteria-stat-icon.is-teal { color: #4f877f; background: #e8f4f0; }
.cafeteria-stat-icon.is-gold { color: #a77a32; background: #fff4df; }
.cafeteria-stat-icon.is-lilac { color: #817ba2; background: #f0eef9; }
.cafeteria-stat-card > div { min-width: 0; }
.cafeteria-stat-card > div > span { display: block; color: var(--muted); font-size: 11px; }
.cafeteria-stat-card strong { display: block; margin-top: 3px; color: var(--navy); font-size: 22px; letter-spacing: -.045em; white-space: nowrap; }
.cafeteria-stat-card small { display: block; margin-top: 3px; overflow: hidden; color: #8b9aa5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.cafeteria-content-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 14px; margin-bottom: 18px; }
.cafeteria-panel { min-width: 0; border: 1px solid #e1e8ee; border-radius: 12px; background: rgba(255, 255, 255, .82); box-shadow: 0 5px 16px rgba(0, 28, 56, .03); }
.cafeteria-spending-panel, .cafeteria-account-panel, .cafeteria-activity-panel, .cafeteria-roster-panel { padding: 22px 22px 19px; }
.cafeteria-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #edf1f4; }
.cafeteria-section-heading h2 { margin: 5px 0 0; color: var(--navy); font-family: "Cinzel", Georgia, serif; font-size: 24px; font-weight: 400; letter-spacing: -.03em; }
.cafeteria-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.cafeteria-soft-badge { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #dce6ed; border-radius: 999px; color: var(--teal); background: #f3f7fa; font-size: 10px; font-weight: 600; white-space: nowrap; }
.cafeteria-category-list { display: grid; gap: 18px; padding: 4px 0 20px; }
.cafeteria-category-row { display: grid; gap: 8px; }
.cafeteria-category-label { display: flex; align-items: center; gap: 8px; color: #40566b; font-size: 12px; }
.cafeteria-category-label strong { flex: 1; color: var(--navy); font-weight: 600; }
.cafeteria-category-label > span:last-child { color: var(--muted); font-size: 11px; }
.cafeteria-category-dot { width: 8px; height: 8px; border-radius: 50%; background: #7398b4; }
.cafeteria-category-dot.is-green { background: #86ae99; }
.cafeteria-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #edf1f3; }
.cafeteria-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5f86a1, #9cb5c7); }
.cafeteria-category-row:nth-child(2) .cafeteria-progress span { background: linear-gradient(90deg, #82ae9a, #b4d2bd); }
.cafeteria-spending-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #edf1f3; color: var(--muted); font-size: 11px; }
.cafeteria-spending-foot strong { color: var(--navy); font-weight: 600; }

.cafeteria-account-balance { padding: 14px; border: 1px solid #dce7ed; border-radius: 10px; background: #f6fafb; }
.cafeteria-account-balance span, .cafeteria-account-balance small { display: block; color: var(--muted); font-size: 10px; }
.cafeteria-account-balance strong { display: block; margin: 4px 0 1px; color: var(--navy); font-size: 27px; letter-spacing: -.05em; }
.cafeteria-full-button { width: 100%; margin-top: 12px; }
.cafeteria-account-list { display: grid; gap: 0; margin-top: 12px; }
.cafeteria-account-list div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #edf1f3; font-size: 11px; }
.cafeteria-account-list span { color: var(--muted); }
.cafeteria-account-list strong { color: #40566b; font-size: 11px; font-weight: 600; text-align: right; }
.cafeteria-note { display: flex; gap: 8px; margin: 14px 0 0; color: #758994; font-size: 10px; line-height: 1.5; }
.cafeteria-note > span { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--teal); background: #e7f0f5; font-size: 10px; font-weight: 700; }

.cafeteria-menu-panel { margin-bottom: 18px; padding: 22px 22px 19px; }
.cafeteria-menu-heading { margin-bottom: 17px; }
.cafeteria-menu-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 9px; overflow-x: auto; }
.cafeteria-menu-day { min-width: 150px; padding: 13px 12px 12px; border: 1px solid #e4ebef; border-radius: 10px; background: #fbfcfd; }
.cafeteria-menu-day.is-today { border-color: #b5cbd6; background: #f2f8fa; box-shadow: inset 0 3px 0 var(--teal); }
.cafeteria-menu-day-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #e7edef; }
.cafeteria-menu-day-heading span, .cafeteria-menu-day-heading strong { display: block; }
.cafeteria-menu-day-heading span { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cafeteria-menu-day-heading strong { margin-top: 2px; color: var(--navy); font-family: "Cinzel", Georgia, serif; font-size: 20px; font-weight: 400; }
.cafeteria-menu-day-heading em { padding: 4px 6px; border-radius: 999px; color: #4f8875; background: #e5f3e9; font-size: 9px; font-style: normal; font-weight: 700; }
.cafeteria-menu-item { padding: 9px 0; border-bottom: 1px solid #eef2f3; }
.cafeteria-menu-label { display: block; margin-bottom: 3px; color: #91a1a9; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.cafeteria-menu-item strong { display: block; color: #456576; font-size: 10px; font-weight: 600; line-height: 1.4; }
.cafeteria-allergen-note { display: flex; gap: 5px; margin: 10px 0 0; color: #97783d; font-size: 9px; line-height: 1.4; }
.cafeteria-allergen-note span { display: grid; width: 14px; height: 14px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #9a7430; background: #fff0cf; font-size: 9px; font-weight: 700; }

.cafeteria-activity-heading { align-items: flex-end; }
.cafeteria-filter-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.cafeteria-filter-tabs button { padding: 6px 8px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.cafeteria-filter-tabs button:hover, .cafeteria-filter-tabs button.is-active { color: var(--navy); background: #e9eef3; }
.cafeteria-activity-table { overflow-x: auto; }
.cafeteria-activity-head, .cafeteria-activity-row { min-width: 690px; display: grid; grid-template-columns: 90px minmax(220px, 1.4fr) minmax(120px, .8fr) 95px 90px; gap: 12px; align-items: center; }
.cafeteria-activity-head { padding: 0 11px 9px; color: #93a2ac; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cafeteria-activity-row { padding: 12px 11px; border-top: 1px solid #edf1f3; color: #4d6577; font-size: 11px; }
.cafeteria-activity-date small, .cafeteria-activity-description small { display: block; margin-top: 3px; color: #93a2ac; font-size: 10px; }
.cafeteria-activity-description { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cafeteria-activity-description strong { overflow: hidden; color: #40566b; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cafeteria-transaction-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #9b6866; background: #fbeeed; font-size: 15px; }
.cafeteria-transaction-icon.is-deposit { color: #4a8a72; background: #eaf6ee; }
.cafeteria-activity-amount { color: #9b6866; font-weight: 600; }
.cafeteria-activity-amount.is-deposit { color: #4a8a72; }
.cafeteria-activity-balance { color: var(--navy); font-weight: 600; }
.cafeteria-data-note { margin: 14px 11px 0; color: #9aa8af; font-size: 10px; }

.cafeteria-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: rgba(0, 28, 56, .54); backdrop-filter: blur(4px); }
.cafeteria-topup-modal { width: min(510px, 100%); padding: 24px; border: 1px solid #e0e7eb; border-radius: 15px; background: #fff; box-shadow: 0 20px 55px rgba(0, 28, 56, .2); }
.cafeteria-modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid #edf1f3; }
.cafeteria-modal-heading h2 { margin: 5px 0 0; color: var(--navy); font-family: "Cinzel", Georgia, serif; font-size: 27px; font-weight: 400; letter-spacing: -.035em; }
.cafeteria-modal-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.cafeteria-modal-close { display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; font-size: 21px; line-height: 1; cursor: pointer; }
.cafeteria-modal-close:hover { color: var(--navy); background: #f4f7f9; }
.cafeteria-topup-student { display: flex; align-items: center; gap: 10px; margin: 18px 0; padding: 11px 12px; border: 1px solid #e2eaee; border-radius: 10px; background: #f8fbfc; }
.cafeteria-topup-student .cafeteria-student-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.cafeteria-topup-student strong, .cafeteria-topup-student small { display: block; }
.cafeteria-topup-student strong { color: var(--navy); font-size: 12px; }
.cafeteria-topup-student small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.cafeteria-topup-field { display: grid; gap: 8px; margin-top: 15px; }
.cafeteria-topup-label { color: #40566b; font-size: 11px; font-weight: 700; }
.cafeteria-amount-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cafeteria-amount-options button { min-height: 45px; border: 1px solid var(--line-strong); border-radius: 9px; color: #526a7e; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.cafeteria-amount-options button:hover, .cafeteria-amount-options button.is-selected { border-color: var(--teal); color: var(--navy); background: #eef3f8; box-shadow: inset 0 0 0 1px var(--teal); }
.cafeteria-payment-select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--navy); background: white; font-size: 12px; }
.cafeteria-secure-note { display: flex; gap: 9px; margin-top: 17px; padding: 11px 12px; border: 1px solid #ead9b2; border-radius: 9px; color: #73551d; background: #fffaf0; }
.cafeteria-secure-note > span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #9b7534; background: #f8eac8; font-size: 13px; }
.cafeteria-secure-note strong, .cafeteria-secure-note small { display: block; }
.cafeteria-secure-note strong { font-size: 11px; }
.cafeteria-secure-note small { margin-top: 2px; font-size: 10px; line-height: 1.45; }
.cafeteria-topup-error { margin: 10px 0 0; color: var(--danger); font-size: 11px; }
.cafeteria-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #edf1f3; }
.cafeteria-topup-toast { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; align-items: flex-start; gap: 9px; max-width: 360px; padding: 13px 14px; border: 1px solid #b8d9c2; border-radius: 11px; color: #356b50; background: #f0faf2; box-shadow: 0 13px 30px rgba(0, 28, 56, .14); }
.cafeteria-topup-toast > span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: #6eaa83; font-size: 12px; font-weight: 700; }
.cafeteria-topup-toast strong, .cafeteria-topup-toast small { display: block; }
.cafeteria-topup-toast strong { font-size: 11px; }
.cafeteria-topup-toast small { margin-top: 2px; color: #6b9079; font-size: 10px; }
.cafeteria-topup-toast button { margin: -4px -4px 0 auto; border: 0; color: #6b9079; background: transparent; font-size: 17px; cursor: pointer; }

.cafeteria-button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid #b9c6d2; border-radius: 999px; color: var(--navy); background: white; font-size: 12px; font-weight: 700; cursor: pointer; }
.cafeteria-button:hover { border-color: #9eafbf; background: #f0f1f2; }
.cafeteria-button-primary { color: white; border-color: var(--navy); background: var(--navy); }
.cafeteria-button-primary:hover { color: white; border-color: var(--navy-2); background: var(--navy-2); }
.cafeteria-text-button { padding: 5px 0; border: 0; color: var(--teal); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.cafeteria-text-button:hover { color: var(--navy); }

.cafeteria-manager-heading { margin-bottom: 17px; }
.cafeteria-manager-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 17px; }
.cafeteria-search-field { position: relative; display: flex; align-items: center; flex: 1 1 230px; min-width: 200px; }
.cafeteria-search-field > span { position: absolute; left: 12px; color: #8da0aa; font-size: 18px; pointer-events: none; }
.cafeteria-search-field input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--navy); background: white; font-size: 12px; outline: none; }
.cafeteria-search-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(57, 92, 128, .12); }
.cafeteria-select-field { display: grid; gap: 5px; min-width: 135px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.cafeteria-toolbar-actions { display: flex; gap: 13px; margin-left: auto; padding-bottom: 9px; }

.cafeteria-manager-table { overflow-x: auto; border: 1px solid #e5ebef; border-radius: 10px; }
.cafeteria-manager-head, .cafeteria-manager-row { min-width: 790px; display: grid; grid-template-columns: minmax(210px, 1.4fr) 88px 105px 125px 120px 34px; gap: 12px; align-items: center; }
.cafeteria-manager-head { padding: 10px 13px; color: #93a2ac; background: #f7f9fa; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.cafeteria-sort-button { padding: 0; border: 0; color: inherit; background: transparent; font-size: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.cafeteria-sort-button:hover { color: var(--navy); }
.cafeteria-manager-entry { background: white; }
.cafeteria-manager-entry + .cafeteria-manager-entry { border-top: 1px solid #edf1f3; }
.cafeteria-manager-row { width: 100%; padding: 12px 13px; border: 0; color: #4b6678; background: transparent; text-align: left; cursor: pointer; }
.cafeteria-manager-row:hover, .cafeteria-manager-entry.is-expanded .cafeteria-manager-row { background: #f5fafb; }
.cafeteria-manager-student { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cafeteria-manager-student .cafeteria-student-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 10px; }
.cafeteria-manager-student > span:last-child, .cafeteria-manager-spent, .cafeteria-manager-last, .cafeteria-manager-balance { min-width: 0; }
.cafeteria-manager-row strong { display: block; overflow: hidden; color: #3f6072; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cafeteria-manager-row small { display: block; margin-top: 3px; overflow: hidden; color: #8d9da4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cafeteria-manager-grade { color: #708894; font-size: 11px; }
.cafeteria-manager-balance strong { color: var(--navy); }
.cafeteria-manager-balance.is-warning strong, .cafeteria-manager-balance.is-warning small { color: #ad7934; }
.cafeteria-manager-spent strong, .cafeteria-manager-last strong { color: #4b6e7d; }
.cafeteria-expand-icon { color: #7799a5; font-size: 19px; text-align: center; }
.cafeteria-empty-state { padding: 35px 20px; color: var(--muted); background: white; text-align: center; font-size: 12px; }

.cafeteria-manager-detail { padding: 20px 22px 22px; border-top: 1px solid #e6eef1; background: linear-gradient(180deg, #f7fbfc 0%, #fff 100%); }
.cafeteria-detail-summary { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(125px, .7fr) minmax(150px, .8fr); gap: 12px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid #e7eef0; }
.cafeteria-detail-identity .cafeteria-student-avatar { width: 38px; height: 38px; border-radius: 11px; }
.cafeteria-detail-identity h3 { font-size: 18px; }
.cafeteria-detail-metric { padding-left: 15px; border-left: 1px solid #e0eaed; }
.cafeteria-detail-metric span { display: block; color: var(--muted); font-size: 10px; }
.cafeteria-detail-metric strong { display: block; margin-top: 4px; color: var(--navy); font-size: 16px; }
.cafeteria-ledger-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 17px; }
.cafeteria-ledger-section { min-width: 0; padding: 14px 15px; border: 1px solid #e3ecef; border-radius: 10px; background: rgba(255, 255, 255, .8); }
.cafeteria-ledger-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #edf1f3; }
.cafeteria-ledger-heading h4 { margin: 4px 0 0; color: var(--navy); font-family: "Cinzel", Georgia, serif; font-size: 17px; font-weight: 400; }
.cafeteria-ledger-heading > span { color: #91a2aa; font-size: 10px; white-space: nowrap; }
.cafeteria-ledger-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f3f4; }
.cafeteria-ledger-row:last-child { border-bottom: 0; }
.cafeteria-ledger-date, .cafeteria-ledger-copy { min-width: 0; color: #4d6776; font-size: 10px; }
.cafeteria-ledger-date small, .cafeteria-ledger-copy small { display: block; margin-top: 2px; color: #98a7ad; font-size: 9px; }
.cafeteria-ledger-copy strong { display: block; overflow: hidden; color: #476878; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cafeteria-ledger-amount { color: #a06967; font-size: 11px; white-space: nowrap; }
.cafeteria-ledger-amount.is-deposit { color: #4b8b72; }

.cafeteria-mobile-nav { display: none; }

@media (max-width: 980px) {
    .cafeteria-topbar { padding: 0 20px; }
    .cafeteria-sidebar { padding-left: 12px; padding-right: 12px; }
    .cafeteria-layout { grid-template-columns: 205px minmax(0, 1fr); }
    .cafeteria-manager-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cafeteria-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .cafeteria-topbar { min-height: 70px; padding: 0 16px; }
    .cafeteria-brand img { width: 185px; }
    .cafeteria-brand span, .cafeteria-connected, .cafeteria-profile > span:not(:first-child) { display: none; }
    .cafeteria-profile { padding-left: 0; border-left: 0; }
    .cafeteria-layout { display: block; min-height: 0; }
    .cafeteria-sidebar { display: none; }
    .cafeteria-main { padding: 27px 16px calc(98px + env(safe-area-inset-bottom)); }
    .cafeteria-page-heading { display: grid; align-items: start; gap: 16px; }
    .cafeteria-page-heading h1 { font-size: 36px; }
    .cafeteria-heading-actions { align-items: stretch; }
    .cafeteria-heading-actions .cafeteria-heading-meta { margin-left: 0; }
    .cafeteria-student-strip { align-items: flex-start; flex-direction: column; }
    .cafeteria-student-select { width: 100%; }
    .cafeteria-stat-grid, .cafeteria-manager-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cafeteria-spending-panel, .cafeteria-account-panel, .cafeteria-activity-panel, .cafeteria-roster-panel { padding: 18px 15px; }
    .cafeteria-menu-panel { padding: 18px 15px; }
    .cafeteria-section-heading, .cafeteria-activity-heading { display: grid; align-items: start; gap: 12px; }
    .cafeteria-filter-tabs { width: max-content; }
    .cafeteria-manager-toolbar { align-items: stretch; }
    .cafeteria-search-field, .cafeteria-select-field { flex-basis: 100%; }
    .cafeteria-toolbar-actions { margin-left: 0; padding-bottom: 0; }
    .cafeteria-manager-detail { padding: 17px 14px; }
    .cafeteria-detail-summary, .cafeteria-ledger-columns { grid-template-columns: 1fr; }
    .cafeteria-detail-metric { padding: 10px 0 0; border-top: 1px solid #e0eaed; border-left: 0; }
    .cafeteria-mobile-nav { position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; z-index: 30; display: flex; gap: 4px; padding: 7px; overflow-x: auto; border: 1px solid #d9e7e8; border-radius: 17px; background: rgba(255, 255, 255, .93); box-shadow: 0 12px 32px rgba(21, 69, 82, .18); backdrop-filter: blur(16px); }
    .cafeteria-mobile-nav .cafeteria-nav-item { flex: 0 0 auto; min-width: 74px; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 3px 6px; border-radius: 11px; color: #78919c; font-size: 10px; text-align: center; }
    .cafeteria-mobile-nav .cafeteria-nav-item svg { width: 18px; height: 18px; }
    .cafeteria-mobile-nav .cafeteria-nav-item.is-active { color: var(--navy); background: #e9f0f4; box-shadow: none; }
    .cafeteria-modal-backdrop { padding: 12px; }
    .cafeteria-topup-modal { padding: 19px 16px; }
    .cafeteria-topup-toast { right: 16px; bottom: 88px; left: 16px; max-width: none; }
}

@media (max-width: 480px) {
    .cafeteria-stat-grid, .cafeteria-manager-stat-grid { grid-template-columns: 1fr; }
    .cafeteria-stat-card strong { font-size: 20px; }
    .cafeteria-heading-actions .cafeteria-button { flex: 1; }
    .cafeteria-ledger-row { grid-template-columns: 49px minmax(0, 1fr) auto; gap: 7px; }
    .cafeteria-ledger-amount { font-size: 10px; }
}

@media (min-width: 1600px) {
    .cafeteria-topbar { padding: 0 clamp(28px, 4vw, 72px); }
    .cafeteria-main { padding-right: clamp(28px, 4vw, 72px); padding-left: clamp(28px, 4vw, 72px); }
}

.cafeteria-sign-out { color: var(--muted); font-size: 12px; text-decoration: none; }
.cafeteria-sign-out:hover { color: var(--navy); text-decoration: underline; }