:root {
    color-scheme: light;
    --bg: #f4f0e8;
    --panel: #fffcf5;
    --raised: #ede9e1;
    --border: #cec7bb;
    --text: #23211f;
    --muted: #625e59;
    --navigation: #1e1e1e;
    --on-navigation: #f4f0e8;
    --accent: #ffa34e;
    --accent-dark: #241406;
    --accent-ink: #873b08;
    --accent-soft: #fae5d3;
    --focus: #a64a0a;
    --body: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
    --heading: 'Barlow', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 var(--body); }
button, input, select { font: inherit; }
button, summary, .icon-button { cursor: pointer; }
button { color: inherit; }
button:disabled { opacity: .7; cursor: wait; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--heading); line-height: 1.12; }
h1 { font-size: clamp(2rem, 4.7vw, 3.5rem); letter-spacing: -.035em; }
h2 { font-size: 1.17rem; letter-spacing: -.015em; }
.muted, small, .record p, .gallery p { color: var(--muted); }
.icon { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.top { border-bottom: 4px solid var(--accent); background: var(--navigation); color: var(--on-navigation); }
.top .icon-button { background: #303030; border-color: #66615a; }
.top .icon-button[aria-current] { color: var(--accent-dark); background: var(--accent); border-color: var(--accent); }
.top :focus-visible, .reception-nav :focus-visible { outline-color: var(--accent); }
.top-inner, .shell { width: min(1120px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.top-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; font: 750 clamp(1.15rem, 4.5vw, 1.5rem)/1.2 var(--heading); text-decoration: none; }
.brand span { overflow-wrap: anywhere; }
.brand-icon { display: block; flex: 0 0 auto; border-radius: 11px; }
.faculty-logo { display: block; width: 50px; height: auto; }
.header-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.section-symbol, .record-icon { display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #e6bf9f; border-radius: 10px; width: 43px; height: 43px; flex: 0 0 auto; }
.section-symbol .icon { width: 23px; height: 23px; }
.nav { display: flex; align-items: center; gap: 7px; }
.mobile-tools, .reception-nav { display: none; }
.icon-button, .primary, .secondary { min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--raised); display: inline-flex; gap: 9px; align-items: center; justify-content: center; text-decoration: none; padding: 8px 13px; font-weight: 670; }
.icon-button { width: 44px; padding: 0; flex: 0 0 auto; }
.icon-button:hover, .secondary:hover, .stat:hover { border-color: #8a6546; }
.icon-button[aria-current] { color: var(--accent-ink); background: var(--accent-soft); border-color: #ae6c3c; }
.primary { color: var(--accent-dark); background: var(--accent); border-color: var(--accent); }
.primary:hover { background: #ffb871; }
.full { width: 100%; }
.shell { padding-block: clamp(24px, 5vw, 56px) 64px; }
.page-title { display: flex; gap: 16px; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.page-title .muted { margin-top: 6px; }
.overline { text-transform: uppercase; color: var(--accent-ink); font-size: .74rem; letter-spacing: .12em; font-weight: 760; margin-bottom: 9px; }
.panel, .record, .stat { background: var(--panel); border: 1px solid var(--border); border-radius: 17px; }
.panel { padding: clamp(16px, 3vw, 24px); }
.panel > h2 { margin-block: 4px 16px; }
.panel > .section-symbol { margin-bottom: 12px; }
.narrow { max-width: 620px; }
.notice { border: 1px solid #a57648; background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.notice.error { color: #762521; background: #f9e6e3; border-color: #bf756e; }
.notice.inline { justify-content: space-between; flex-wrap: wrap; }
.empty { display: grid; place-items: center; text-align: center; min-height: 200px; }
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 167px), 1fr)); gap: 10px; margin-bottom: 20px; }
.stat { display: flex; flex-direction: column; align-items: start; gap: 6px; width: 100%; min-height: 102px; padding: 12px 14px; text-align: left; }
.stat[aria-pressed='true'] { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); background: var(--accent-soft); }
.stat strong { font-size: 1.75rem; line-height: 1.1; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; background: var(--raised); color: var(--text); font-size: .8rem; font-weight: 650; white-space: nowrap; }
.status .icon { width: 15px; height: 15px; }
.status.review { color: var(--accent-ink); border: 1px solid var(--accent); }
.status.ready { color: var(--accent-ink); background: var(--accent-soft); }
.status.collected { color: var(--muted); }
.record-list, .lines { display: grid; gap: 8px; }
.record { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 11px; }
.record p, .gallery p { font-size: .84rem; margin-top: 4px; overflow-wrap: anywhere; }
.record-icon { background: var(--raised); border-color: var(--border); color: var(--muted); }
.pagination, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pagination { justify-content: center; margin-top: 18px; }
.fields { display: grid; gap: 14px; margin-top: 14px; }
label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: 5px; }
input:not([type='checkbox']):not([type='file']), select { color: var(--text); background: var(--panel); min-height: 44px; border: 1px solid #8d857b; border-radius: 9px; padding: 8px 10px; width: 100%; }
.check { display: flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }
.password { position: relative; }
.password input { padding-right: 54px !important; }
.password .icon-button { position: absolute; right: 0; top: 0; background: transparent; border-color: transparent; color: var(--muted); }
.fields small { display: block; margin-top: 5px; }
.signed-out { min-height: calc(100svh - 77px); display: grid; align-content: center; }
.sign-layout { display: grid; grid-template-columns: 1.04fr 1fr; gap: 24px; max-width: 880px; margin-inline: auto; width: 100%; }
.sign-card { padding: clamp(22px, 4vw, 38px); }
.sign-card h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.sign-card .muted { margin-top: 9px; }
.label-art { display: grid; place-items: center; border-radius: 17px; background-color: #212224; background-image: repeating-linear-gradient(135deg, transparent 0 18px, #2c2e31 18px 19px); border: 1px solid var(--border); overflow: hidden; padding: 18px; }
.shipping-label { width: min(250px, 88%); color: #2e1907; background: var(--accent); border: 1px solid #ffc085; border-radius: 15px; transform: rotate(-8deg); padding: 18px; box-shadow: 12px 14px 0 #111214aa; }
.label-top, .label-footer { display: flex; align-items: center; justify-content: space-between; font-weight: 850; letter-spacing: .12em; }
.label-top { border-bottom: 2px solid #824c23; padding-bottom: 13px; margin-bottom: 15px; }
.label-top .icon { width: 40px; height: 40px; }
.label-line { height: 5px; width: 78%; background: #9f5f2e; margin-bottom: 7px; border-radius: 5px; }
.label-line.short { width: 50%; }
.barcode { height: 36px; margin-block: 19px 13px; background: repeating-linear-gradient(90deg, #2e1907 0 2px, transparent 2px 5px, #2e1907 5px 10px, transparent 10px 13px, #2e1907 13px 14px, transparent 14px 17px); }
.label-footer { font-size: .73rem; }
.capture-form { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.capture-controls { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.capture-file { position: relative; }
.capture-file label { margin: 0; }
.capture-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.capture-file:focus-within label { outline: 2px solid var(--focus); outline-offset: 3px; }
.camera-stage { display: grid; gap: 10px; min-width: 0; }
.camera-viewfinder { display: block; width: 100%; height: min(48vh, 480px); height: min(48dvh, 480px); background: #080808; border: 1px solid var(--border); border-radius: 11px; object-fit: contain; }
.camera-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.camera-actions button { flex: 1 1 120px; }
.photo-frame img { display: block; max-width: 100%; max-height: 640px; object-fit: contain; border-radius: 11px; margin: auto; }
.photo-delete { border-top: 1px solid var(--border); }
.photo-delete form { margin-top: 8px; }
.photo-frame { display: grid; align-content: start; min-width: 0; }
.detail-grid, .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.detail dl { display: grid; gap: 9px; margin: 16px 0; }
.detail dl div { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.detail dt { font-size: .84rem; color: var(--muted); }
.detail dd { margin-left: 0; }
details { margin-top: 12px; }
summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 0; }
summary::after { content: '+'; margin-left: auto; color: var(--muted); }
details[open] > summary::after { content: '−'; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; }
.filters > div { flex: 1 1 155px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 12px; }
.gallery-card { padding: 10px; }
.gallery-card img { display: block; width: 100%; height: 155px; object-fit: contain; background: var(--bg); border-radius: 8px; }
.gallery-info, .line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 8px; }
.line { border-top: 1px solid var(--border); padding-top: 8px; margin: 0; }
.line strong { overflow-wrap: anywhere; }
.line small, .accounts small { display: block; }
.account-directory { margin-bottom: 14px; }
.heading-icon { display: flex; align-items: center; gap: 8px; }
.heading-icon > .icon { color: var(--accent-ink); }
.account-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.account-history .state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-history .stat { min-height: 85px; }
.account-history .stat .heading-icon { font-size: .9rem; }
.account-title { overflow-wrap: anywhere; }
.account-line small { overflow-wrap: anywhere; }
.settings-stack { display: grid; gap: 14px; }
.settings-stack details > .muted { margin-block: 6px; }
.settings-stack [data-passkey-unavailable] { margin-top: 10px; }
.passkey-entry { border-top: 1px dashed var(--border); margin-top: 18px; padding-top: 18px; }
.passkey-entry .notice { margin: 10px 0 0; }
.danger { min-height: 44px; border: 1px solid #a4423a; border-radius: 10px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 9px; background: #f9e6e3; color: #762521; font-weight: 700; }
.receiving-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.receiving-actions button { min-height: 55px; }
.count { display: inline-grid; place-items: center; min-width: 1.5rem; min-height: 1.5rem; padding-inline: 4px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: .82rem; }
.parcel-status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; width: 100%; padding: clamp(13px, 3vw, 26px); border: 1px solid var(--border); border-left: 6px solid #77716a; border-radius: 12px; background: var(--panel); margin-bottom: 14px; }
.parcel-status.has-parcels { border-left-color: #e27722; }
.parcel-status h2 { font-size: clamp(1.2rem, 3.5vw, 1.95rem); }
.parcel-icon { display: grid; place-items: center; border-right: 1px dashed #a9a093; margin-right: 17px; padding-right: 16px; width: 58px; height: 49px; color: var(--muted); }
.parcel-icon .icon { width: 30px; height: 30px; }
.has-parcels .parcel-icon { color: var(--accent-ink); }
.view-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.view-tabs button { background: var(--panel); }
.view-tabs button[aria-pressed='true'] { background: var(--accent-soft); border-color: #ad764b; color: var(--accent-ink); }

@media (max-width: 800px), (max-width: 1000px) and (pointer: coarse) {
    .top-inner { gap: 6px; padding-top: env(safe-area-inset-top, 0px); }
    .top-inner, .shell {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }
    .header-tools { gap: 6px; }
    .faculty-logo { width: 44px; }
    .desktop-nav, .receiving-actions { display: none; }
    .mobile-tools { display: block; position: relative; margin: 0; }
    .mobile-tools summary::after { content: none; }
    .mobile-menu {
        display: grid;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: min(230px, calc(100vw - 90px));
        z-index: 3;
        background: var(--panel);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 5px;
    }
    .mobile-menu a { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 6px 8px; border-radius: 8px; text-decoration: none; }
    .mobile-menu a:focus-visible, .mobile-menu a:hover { background: var(--raised); }
    .has-reception-nav { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
    .has-reception-nav .shell { flex: 1 0 auto; padding-bottom: 24px; }
    .has-reception-nav .capture-controls { scroll-margin-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .camera-viewfinder { height: min(42dvh, max(96px, calc(100dvh - 220px)), 480px); }
    .reception-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--navigation);
        color: var(--on-navigation);
        border-top: 1px solid var(--border);
        padding: 5px max(12px, env(safe-area-inset-right, 0px)) calc(5px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    }
    .reception-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        gap: 3px;
        min-width: 0;
        min-height: 64px;
        padding: 0 4px 5px;
        border-bottom: 3px solid transparent;
        text-decoration: none;
        text-align: center;
        font-size: .875rem;
        font-weight: 650;
        overflow-wrap: anywhere;
    }
    .reception-link[aria-current="page"] { border-color: var(--accent); }
    .reception-link[aria-current="page"] .reception-symbol { color: var(--accent); }
    .reception-symbol { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 42px; height: 28px; }
    .reception-symbol .icon { width: 23px; height: 23px; }
    .reception-register .reception-symbol, .reception-register[aria-current="page"] .reception-symbol {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: var(--accent-dark);
        background: var(--accent);
    }
    .reception-count { position: absolute; top: -4px; left: 75%; min-width: 18px; padding: 0 3px; border-radius: 10px; background: var(--accent); color: var(--accent-dark); font-size: .72rem; }
}
@media (max-width: 650px) {
    .page-title { flex-wrap: wrap; align-items: center; }
    .page-title form, .page-title form button { width: 100%; }
    .sign-layout, .detail-grid, .admin-grid { grid-template-columns: minmax(0, 1fr); }
    .sign-layout { max-width: 460px; gap: 13px; }
    .label-art { min-height: 138px; }
    .shipping-label { width: 154px; padding: 9px; }
    .label-top { padding-bottom: 5px; margin-bottom: 6px; }
    .label-top .icon { width: 22px; height: 22px; }
    .barcode { height: 19px; margin-block: 6px; }
    .label-line { height: 3px; margin-bottom: 4px; }
}
@media (max-width: 440px) {
    .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
    .record-icon { display: none; }
    .record .status { padding-inline: 5px; }
    .record .status .icon { display: none; }
    .account-history .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-history .stat .heading-icon { display: grid; gap: 3px; font-size: .85rem; }
    .page-title.account-title { flex-wrap: nowrap; align-items: start; }
    .receiving-actions { grid-template-columns: 1fr; }
}