* { box-sizing: border-box; }
body { margin: 0; color: #20252a; background: #fff; font: 1rem/1.55 Arial, sans-serif; }
img { display: block; max-width: 100%; }
a { color: #244a78; }
a:focus, button:focus, input:focus, summary:focus, [tabindex]:focus {
    outline: 3px solid #315e94;
    outline-offset: 3px;
}
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
.page { width: calc(100% - 2rem); max-width: 65rem; margin-left: auto; margin-right: auto; }
.muted, .card-copy, .message { color: #4e5964; }
.card-copy, .message { margin-top: .45rem; }
.site-header, .impact-strip { border-bottom: 1px solid #d9dde1; }
.header-inner, .site-nav, .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem 1rem;
}
.header-inner { justify-content: space-between; padding: .5rem 0; }
.brand { display: flex; align-items: center; gap: .65rem; color: #20252a; text-decoration: none; font-size: 1.35rem; font-weight: 700; }
.brand img { width: 52px; height: auto; }
.site-nav a { padding: .3rem .1rem; font-size: .93rem; }
.site-nav a[aria-current] { color: #20252a; font-weight: 700; }
.hero { padding: 2.5rem 0; text-align: center; }
.hero p { max-width: 31rem; margin: .65rem auto 0; }
.hero .actions { justify-content: center; margin-top: 1.15rem; }
.button, button {
    display: inline-block;
    padding: .55rem .85rem;
    border: 1px solid #294c72;
    border-radius: .3rem;
    background: #294c72;
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.button:hover, button:hover { background: #1d3652; }
.button.secondary { color: #294c72; background: #fff; }
.button.secondary:hover { background: #f0f3f7; }
.impact-strip { border-top: 1px solid #d9dde1; background: #f6f7f8; }
.impact-grid, .steps, .meals, .dashboard-grid, .rewards-layout { display: flex; flex-wrap: wrap; gap: .8rem; }
.impact-grid { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.impact-grid dt { color: #4e5964; }
.impact-grid dd { margin-top: .15rem; }
.amount { font: 600 1.5rem/1.2 Arial, sans-serif; }
.block { padding-top: 1.45rem; padding-bottom: 1.45rem; border-bottom: 1px solid #e1e4e7; }
.steps { list-style-position: inside; margin: .8rem 0 0; padding: 0; }
.steps li, .meal, .card { min-width: 0; padding: .9rem; border: 1px solid #d9dde1; border-radius: .3rem; }
.steps li { padding: .65rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.step-graphic { position: relative; display: flex; align-items: flex-end; gap: 3px; width: 42px; height: 42px; color: #244a78; }
.step-graphic::before, .step-graphic::after { position: absolute; content: ""; }
.meal-graphic::before { width: 32px; height: 19px; bottom: 7px; left: 5px; border: 2px solid; border-radius: 0 0 20px 20px; background: #e6edf5; }
.meal-graphic::after { width: 40px; height: 2px; bottom: 5px; left: 1px; background: #244a78; }
.portion-graphic { align-items: center; }
.portion-graphic span { display: block; width: 9px; height: 9px; border: 2px solid; border-radius: 50%; background: #e6edf5; }
.portion-graphic span:nth-child(2) { width: 13px; height: 13px; }
.portion-graphic span:nth-child(3) { width: 17px; height: 17px; }
.order-graphic::before { width: 25px; height: 33px; top: 4px; left: 8px; border: 2px solid; border-radius: 3px; background: #fff; }
.order-graphic::after { width: 13px; height: 9px; top: 14px; left: 14px; border-top: 2px solid; border-bottom: 2px solid; }
.points-graphic::before { content: "P"; width: 32px; height: 32px; top: 5px; left: 5px; border: 2px solid; border-radius: 50%; background: #e6edf5; font-weight: 700; text-align: center; line-height: 29px; }
.meals, .rewards-layout, .dashboard-grid { margin-top: .8rem; }
.meal p + p { margin-top: .2rem; }
.meal .price { font-weight: 600; }
.table-wrap { overflow-x: auto; margin-top: .65rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem; text-align: left; border-bottom: 1px solid #e1e4e7; }
th { background: #f6f7f8; font-size: .9rem; }
.points { text-align: right; }
.reward-list { display: flex; flex-direction: column; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.reward-list li { border: 1px solid #d9dde1; border-radius: .3rem; padding: .85rem; }
.reward-list p { margin-top: .25rem; }
.reward-cost { font-weight: 600; }
.guest-panel { align-self: flex-start; background: #f6f7f8; }
label { display: block; font-weight: 600; margin-bottom: .2rem; }
input:not([type="hidden"]), select, textarea {
    width: 100%;
    min-width: 0;
    padding: .5rem .6rem;
    border: 1px solid #858e98;
    border-radius: .3rem;
    font: inherit;
}
.guest-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .65rem; }
.guest-form button { align-self: flex-start; }
.error, .guest-error { color: #8a221e; margin-top: .55rem; }
.site-footer { border-top: 1px solid #e1e4e7; padding-top: .9rem; padding-bottom: .9rem; font-size: .9rem; }
.inner-page { padding-top: 1.4rem; padding-bottom: 1.95rem; min-height: 65vh; }
.inner-page > .card { margin-top: 1rem; }
.login-card { max-width: 26rem; margin: 0 auto; }
.login-card label, .login-card button, .login-card .guest-link { margin-top: .7rem; }
.login-card p { margin-top: .55rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem 1rem; margin-top: .85rem; }
.filter-date { flex: 0 1 11rem; min-width: 0; }
.filter-date label { margin-bottom: .35rem; }
.filter-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.filter-actions a { white-space: nowrap; }
.summary-note, .report-link, .dashboard-grid .amount, .dashboard-grid details { margin-top: .65rem; }
.impact-grid > div, .meals > .meal { flex: 1 1 30%; }
.steps > li { flex: 1 1 20%; }
.dashboard-grid > .card, .rewards-layout > div { flex: 1 1 45%; }
@media (max-width: 700px) {
    .impact-grid, .steps, .meals, .dashboard-grid, .rewards-layout { flex-direction: column; }
    .header-inner { align-items: flex-start; flex-direction: column; }
    .filters { align-items: stretch; flex-direction: column; }
    .filter-date { flex-basis: auto; }
}

.site-page {
    background: #f8f9fb;
}
.site-page .site-header, .site-page .site-footer { background: #fff; }
.site-page .site-nav a { padding: .4rem .55rem; border-radius: .3rem; text-decoration: none; }
.site-page .site-nav a:hover { text-decoration: underline; }
.site-page .site-nav a[aria-current] { color: #244a78; background: #f1f5fa; }
.site-page .button, .site-page button { border-radius: .4rem; }

.guest-page .hero {
    margin-top: 1.15rem;
    padding: 2rem 1.15rem;
    border: 1px solid #e0e5eb;
    border-radius: .65rem;
    background: #f1f5fa;
}
.guest-page .hero h1 { color: #203d5b; letter-spacing: -.015em; }
.guest-page .hero-label {
    margin: 0 0 .5rem;
    color: #3f5874;
    font-size: .82rem;
    font-weight: 700;
}
.guest-page .hero .actions { gap: .65rem; }
.guest-page .impact-strip { border: 0; background: transparent; }
.guest-page .impact-grid { padding-top: .85rem; padding-bottom: .85rem; }
.guest-page .impact-grid > div {
    padding: .75rem .9rem;
    border: 1px solid #e0e5eb;
    border-radius: .45rem;
    background: #fff;
    
}
.guest-page .impact-grid dt { font-size: .9rem; }
.guest-page .impact-grid dd { margin-top: .35rem; color: #244a78; }
.guest-page .block {
    margin-bottom: .85rem;
    padding: 1.1rem;
    border: 1px solid #e0e5eb;
    border-radius: .55rem;
    background: #fff;
}
.guest-page .steps li {
    padding-top: .7rem; padding-bottom: .7rem;
    border-color: #e0e5eb;
    border-radius: .4rem;
    background: #f8f9fb;
}
.guest-page .meal, .guest-page .reward-list li { border-color: #e0e5eb; border-radius: .45rem; }
.guest-page .meal .price, .guest-page .reward-cost { color: #244a78; }
.guest-page .guest-panel { border-color: #e0e5eb; background: #f8f9fb; }
.guest-page #join-myfill { background: #f1f5fa; }
.site-page th { background: #f3f6fa; }

.manager-page .page-intro { margin-bottom: .35rem; }
.manager-page .inner-page > .card, .manager-page .dashboard-grid > .card {
    padding: 1.1rem;
    border-color: #e0e5eb;
    border-radius: .55rem;
    background: #fff;
    
}
.manager-page .dashboard-grid > .card:nth-child(-n+2) { border-top: 2px solid #9bb1c7; }
.manager-page .dashboard-grid .amount { color: #244a78; }
.manager-page details summary { color: #244a78; cursor: pointer; }

form { margin-top: .7rem; }
form label { margin-top: .6rem; }
form button { margin-top: .7rem; }
textarea { min-height: 80px; }

.student-page .student-intro { margin-bottom: .85rem; }
.student-page .student-balance { margin-top: .4rem; color: #244a78; font-weight: 700; }
.student-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0; padding: .55rem; border: 1px solid #d9dde1; border-radius: .4rem; background: #fff; }
.student-nav a { padding: .45rem .65rem; border-radius: .3rem; text-decoration: none; font-weight: 600; }
.student-nav a:hover { text-decoration: underline; }
.student-page .student-nav a[aria-current="page"] { color: #fff; background: #294c72; }
.student-page .block { margin-bottom: 1rem; padding: 1.1rem; border: 1px solid #e0e5eb; border-radius: .45rem; background: #fff; }
.student-page .block > .card + .card, .student-page .block > h3 { margin-top: .85rem; }
.student-page .meals > .meal { flex: 1 1 16rem; }
.student-page .cart-summary { max-width: 26rem; margin: 1rem 0; padding: .9rem; border: 1px solid #d9dde1; border-radius: .3rem; background: #f6f8fb; }
.student-page .cart-summary p + p { margin-top: .4rem; }
.student-page .cart-summary .amount { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid #d9dde1; }
.student-page .success { margin: .75rem 0; padding: .65rem .85rem; border: 1px solid #cbded0; border-radius: .3rem; color: #245438; background: #f0f7f2; }
.student-page .error { margin: .75rem 0; padding: .65rem .85rem; border: 1px solid #e4c9c7; border-radius: .3rem; background: #fff4f3; }
.student-page button:disabled { color: #4e5964; border-color: #c5ccd3; background: #e8ecf0; cursor: default; }

.manager-page .report-summary { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.manager-page .report-summary > .card { flex: 1 1 12rem; background: #fff; border-color: #e0e5eb; }
.manager-page .report-summary h2 { font-size: 1rem; line-height: 1.35; }
.manager-page .report-summary .amount { margin-top: .65rem; color: #244a78; }
.manager-page .report-summary .card-copy { font-size: .9rem; }
.manager-page .report-period { margin-top: .65rem; color: #4e5964; }
.manager-page .filter-actions { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.manager-page .filter-actions .button { margin-top: .7rem; }
.manager-page .dashboard-grid { margin-top: 1rem; margin-bottom: 1rem; }
.manager-page .dashboard-grid table { margin-top: .6rem; }

@media (max-width: 700px) {
    .student-nav a { flex: 1 1 7.5rem; text-align: center; }
    .student-page .meals > .meal { flex-basis: auto; }
    .student-page .cart-summary { max-width: none; }
    .manager-page .report-summary > .card { flex-basis: 100%; }
}