.view-switch{display:flex;align-items:center;gap:3px;align-self:flex-end;border:1px solid var(--border,var(--hairline-color));border-radius:24px;padding:3px;flex-shrink:0;background:var(--surface,#fff)}.view-switch .view-button{padding:4px 9px!important;min-width:34px;height:34px;min-height:34px;border:0;border-radius:20px;background:transparent;color:var(--ink,var(--body-fg));font-size:22px;line-height:1;cursor:pointer}.view-switch .view-button[aria-pressed=true]{background:#00856b;color:#fff}.view-switch-standalone{width:max-content;margin:0 0 18px auto}.view-collection.view-list:not(.view-table){display:flex;flex-direction:column;gap:12px}.view-list>:is(.card,.quest-admin-card){display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:18px;margin:0}.view-list>:is(.card,.quest-admin-card)>:is(h2,p){margin:0}.view-list>:is(.card,.quest-admin-card)>h2{min-width:160px}.view-list>:is(.card,.quest-admin-card)>p{max-width:380px}.view-list .mission-cover,.view-list .quiz-cover{width:90px;height:90px;object-fit:cover;border-radius:14px;margin:0;flex-shrink:0}.view-list .catalog-card{display:flex;align-items:center;gap:18px;padding:14px}.view-list .product-photo{width:100px;height:100px;flex-shrink:0;border-radius:14px}.view-list .product-info{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:0}.view-list .product-info>*{margin:0}.view-list .product-info h2{min-width:150px}.view-list .product-description{min-height:0;max-width:320px}.view-list .product-info .full{width:auto}.view-list .new-reward-card{height:auto;min-height:60px;display:flex;flex-direction:row;gap:14px}.view-list .new-reward-card span{margin:0}.view-table.view-cards{overflow:visible;border:0;background:transparent}.view-table.view-cards table{display:block;min-width:0!important;width:100%}.view-table.view-cards thead{display:block;margin-bottom:12px}.view-table.view-cards thead tr{display:flex}.view-table.view-cards thead th{display:none}.view-table.view-cards thead th:first-child:has(input){display:block;width:auto;background:transparent}.view-table.view-cards tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px}.view-table.view-cards tbody tr:not([hidden]){display:flex;flex-direction:column;position:relative;border:1px solid var(--border,var(--hairline-color));border-radius:18px;background:var(--surface,#fff);padding:14px}.view-table.view-cards tbody td,.view-table.view-cards tbody th{display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto!important;padding:8px!important;border:0;white-space:normal}.view-table.view-cards tbody :is(td,th)::before{content:attr(data-column);font-size:10px;color:var(--muted,var(--body-quiet-color));flex-shrink:0}.view-table.view-cards .student-name{white-space:normal}.view-table.view-cards tr[hidden]{display:none!important}.view-table.view-cards .row-menu{z-index:15}.new-reward-card>span{color:#007f65!important;background:#c8f4e3!important}.attitude-symbol svg{width:15px;height:15px}.attitude-symbol{color:#008b62!important;background:#d9f8e8!important}.attitude-symbol.negative{color:#d34242!important;background:#ffe6e6!important}.attitude-symbol.negative svg{transform:rotate(180deg)}.value-positive small,.value-negative small{display:block;white-space:nowrap;font-size:9px}#attitude-total{white-space:normal;text-align:right}@media(max-width:600px){.view-list .catalog-card{align-items:flex-start}.view-list .product-photo{width:70px;height:70px}.view-list .product-info{display:block}.view-list .product-info>*{margin-bottom:8px}.view-switch .view-button{min-width:40px;min-height:40px}.view-table.view-cards tbody{grid-template-columns:1fr}}@media(prefers-reduced-motion:no-preference){.view-button{transition:background .15s}}

.catalog-grid.view-list{align-items:stretch;width:100%}.catalog-grid.view-list>.catalog-card{width:100%;max-width:none;box-sizing:border-box;min-height:132px}.catalog-grid.view-list .product-info{min-width:0}.catalog-grid.view-list .product-info h2{flex:1}.catalog-grid.view-list .product-description{flex:1;overflow-wrap:anywhere}
.mobile-selection,.mobile-close,.attitude-backdrop{display:none}
@media(max-width:800px),(max-width:1024px) and (orientation:portrait),(hover:none) and (pointer:coarse){
 .mobile-selection:not([hidden]){display:flex;position:fixed;bottom:0;left:0;right:0;z-index:26;align-items:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface,#fff);border-top:1px solid var(--border);box-shadow:0 -8px 25px #0002}.mobile-selection strong{flex:1;font-size:13px}.mobile-selection button{min-height:44px;padding:10px 16px}.mobile-has-selection main{padding-bottom:100px}.roster-layout.has-selection{grid-template-columns:minmax(0,1fr)}
 .attitude-backdrop:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#0008;z-index:39}
 #attitude-panel:not([hidden]){position:fixed;inset:auto 0 0;width:100%;max-width:600px;margin:0 auto;max-height:85dvh;z-index:40;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom);overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
 #attitude-panel .panel-scroll{max-height:38dvh;overflow:auto;overscroll-behavior:contain}.mobile-close{display:block}#clear-selection{display:none}.attitudes-open{overflow:hidden}
}

/* Compact student cards: keep the same selection and action controls. */
.roster-table.view-cards tbody{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:42px 16px;padding-top:28px}
.roster-table.view-cards tbody tr:not([hidden]){padding:32px 12px 14px;min-height:150px;align-items:center;border-radius:18px}
.roster-table.view-cards tbody td::before{display:none}
.roster-table.view-cards tbody td{padding:3px!important;justify-content:center;font-size:12px}
.roster-table.view-cards tbody td:first-child{position:absolute;left:10px;top:10px}
.roster-table.view-cards tbody td:nth-child(2){width:100%!important}
.roster-table.view-cards .student-name{display:flex;flex-direction:column;text-align:center;gap:8px;white-space:normal}
.roster-table.view-cards .student-name .avatar{position:absolute;top:-26px;left:calc(50% - 26px);width:52px;height:52px;border:3px solid var(--surface,#fff);font-size:20px}
.roster-table.view-cards .student-name strong{font-size:12px;line-height:1.4}
.roster-table.view-cards tbody td:nth-child(3){font-size:10px;color:var(--muted);text-align:center}
.roster-table.view-cards tbody td:nth-child(4)::after{content:' XP';font-size:10px;color:var(--muted)}
.roster-table.view-cards tbody td:nth-child(6){position:absolute;right:8px;top:4px}
.roster-table.view-cards .allowance{display:none}
.roster-table.view-cards tbody tr:has(input:checked){border-color:var(--green,#00856b);box-shadow:0 0 0 1px var(--green,#00856b)}
@media(max-width:600px){.roster-table.view-cards tbody{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 10px}.roster-table.view-cards tbody tr:not([hidden]){padding-left:8px;padding-right:8px}}

/* Double the photo size without increasing the list row's existing height. */
.roster-table:not(.view-cards) tbody td:nth-child(2){padding-top:0;padding-bottom:0}
.roster-table:not(.view-cards) .student-name .avatar{width:68px;height:68px;flex:0 0 68px;font-size:26px}
.roster-table.view-cards tbody{row-gap:68px;padding-top:54px}
.roster-table.view-cards tbody tr:not([hidden]){padding-top:62px}
.roster-table.view-cards .student-name .avatar{top:-52px;left:calc(50% - 52px);width:104px;height:104px;font-size:36px}