@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    --paper:#f6f5f0;
    --ink:#253d34;
    --muted:#6d756e;
    --green:#2b5547;
    --line:#dedfd5;
    --white:#fffefa
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    -webkit-font-smoothing:antialiased
}

a {
    color:inherit;
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

a,button,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:3px solid #8d9f4e;
    outline-offset:5px
}

h1,h2,h3,p {
    margin:0
}

h1,h2,h3,.brand {
    font-family:'Manrope',sans-serif
}

.site-header {
    max-width:1360px;
    margin:auto;
    min-height:100px;
    padding:24px 56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-bottom:1px solid var(--line)
}

.brand {
    display:flex;
    align-items:center;
    font-size:26px;
    font-weight:800;
    letter-spacing:-1.3px
}

.brand-mark {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin-right:10px;
    border-radius:11px;
    background:var(--green);
    color:#e4ebbe;
    font-size:22px;
    font-weight:400
}

.brand-dot {
    color:#8d9f4e
}

.header-note {
    font-size:13px;
    color:var(--muted)
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    background:var(--green);
    color:white;
    border:1px solid var(--green);
    border-radius:9px;
    padding:14px 22px;
    font-weight:600;
    cursor:pointer;
    transition:background .18s,transform .18s
}

.button:hover {
    background:#193e31;
    transform:translateY(-1px)
}

.button-small {
    font-size:13px;
    padding:11px 17px
}

.page-shell {
    max-width:1248px;
    margin:auto;
    padding:0 40px;
    min-height:calc(100vh - 195px)
}

.hero {
    text-align:center;
    padding:64px 0 44px
}

.hero .eyebrow {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px
}

.live-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#8d9f4e
}

.hero h1 {
    max-width:760px;
    margin:17px auto 14px;
    font-size:clamp(27px,3.7vw,44px);
    font-weight:500;
    letter-spacing:-1.5px;
    line-height:1.2
}

.hero>p:last-child,.form-heading>p:last-child {
    color:var(--muted);
    line-height:1.7
}

.eyebrow {
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:2px;
    font-weight:700;
    color:var(--muted)
}

.filter-bar {
    display:grid;
    grid-template-columns:minmax(0,2.2fr) repeat(2,minmax(0,1fr)) minmax(0,.8fr) auto;
    gap:14px;
    align-items:end;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
    margin-bottom:40px;
    box-shadow:0 8px 32px #253d3404
}

.filter-field label {
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:7px
}

.filter-field input,.filter-field select {
    display:block;
    width:100%;
    min-width:0;
    height:44px;
    border:1px solid #d5d9ce;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    padding:0 12px
}

.filter-field input::placeholder {
    color:#868e83;
    font-size:13px
}

.filter-field ul {
    color:#9c3833;
    list-style:none;
    padding:0;
    font-size:12px;
    margin:6px 0 0
}

.filter-actions .button {
    height:44px
}

.clear-link {
    font-size:13px;
    color:var(--green);
    font-weight:600;
    padding-bottom:3px
}

.clear-link:hover {
    text-decoration:underline
}

turbo-frame[aria-busy=true] .listing-grid {
    opacity:.55;
    transition:opacity .15s
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px
}

.section-heading h2 {
    font-size:21px;
    font-weight:600;
    letter-spacing:-.6px;
    margin-top:9px
}

.count {
    display:inline-grid;
    place-items:center;
    vertical-align:middle;
    min-width:25px;
    height:25px;
    background:#e7e9de;
    border-radius:7px;
    margin-left:7px;
    font-size:12px;
    letter-spacing:0
}

.sort-note {
    color:var(--muted);
    font-size:12px;
    padding-bottom:3px
}

.listing-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    padding-bottom:56px
}

.listing-card {
    border:1px solid #dcded2;
    background:#edf0e2;
    border-radius:15px;
    padding:22px 24px;
    display:flex;
    flex-direction:column;
    min-height:280px;
    transition:box-shadow .2s,transform .2s
}

.listing-card:nth-child(3n+2) {
    background:#f2ebe1;
    border-color:#e4dbcf
}

.listing-card:nth-child(3n) {
    background:#e8edeb;
    border-color:#d7e1dc
}

.listing-card.listing-wanted {
    background:var(--white);
    border:1px dashed #c4cbb9
}

.listing-card:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 24px #253d3409
}

.card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px
}

.badge {
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    padding:5px 8px;
    border-radius:6px
}

.badge-sale {
    background:var(--green);
    color:#edf1c5
}

.badge-wanted {
    background:#f0e3c8;
    color:#7a5418
}

.listing-category {
    font-size:12px;
    color:#5d6a5c
}

.listing-price {
    font-family:'Manrope',sans-serif;
    font-size:34px;
    font-weight:600;
    letter-spacing:-1.4px;
    line-height:1;
    margin:24px 0 14px
}

.price-label {
    display:block;
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    font-weight:500;
    letter-spacing:0;
    color:var(--muted);
    margin-bottom:6px
}

.listing-card h3 {
    font-size:18px;
    letter-spacing:-.4px;
    line-height:1.3;
    overflow-wrap:anywhere
}

.book-meta {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    color:#4f5c51;
    font-size:13px;
    margin-top:7px
}

.course-code {
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    padding:3px 7px;
    border-radius:5px;
    background:#253d3412
}

.listing-description {
    color:#5e695f;
    font-size:13px;
    line-height:1.65;
    margin:10px 0 20px;
    overflow-wrap:anywhere
}

.card-footer {
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    border-top:1px solid #253d341b;
    padding-top:15px;
    margin-top:auto;
    color:#5c685e;
    font-size:12px
}

.card-footer time {
    margin-left:auto
}

.empty-symbol {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    background:#e9ebdf;
    border-radius:50%;
    font-size:25px;
    margin-bottom:6px
}

.empty-state {
    grid-column:1/-1;
    border:1px dashed #c4cbb9;
    border-radius:16px;
    padding:45px 20px;
    text-align:center
}

.empty-symbol {
    margin:0 auto 20px;
    color:var(--green)
}

.empty-state h3 {
    font-size:23px;
    font-weight:500;
    letter-spacing:-.6px
}

.empty-state p {
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
    margin:12px 0 24px
}

.site-footer {
    max-width:1248px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:25px 40px 30px;
    border-top:1px solid var(--line);
    font-size:11px;
    color:var(--muted)
}

.form-page {
    max-width:590px;
    margin:0 auto;
    padding:40px 0 70px
}

.back-link {
    font-size:13px;
    color:var(--muted)
}

.back-link:hover,.cancel-link:hover {
    text-decoration:underline
}

.form-heading {
    margin:35px 0 26px
}

.form-heading h1 {
    font-size:36px;
    font-weight:500;
    letter-spacing:-1.4px;
    margin:12px 0
}

.form-panel {
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:32px;
    box-shadow:0 8px 32px #253d3404
}

.form-field {
    margin-bottom:24px
}

.form-field label {
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:9px
}

.form-field input,.form-field textarea {
    display:block;
    width:100%;
    min-width:0;
    border:1px solid #d5d9ce;
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    padding:13px 14px;
    line-height:1.5
}

.form-field textarea {
    resize:vertical;
    min-height:120px
}

.form-field input::placeholder,.form-field textarea::placeholder {
    color:#868e83;
    font-size:13px
}

.form-field .help-text {
    font-size:12px;
    color:var(--muted);
    line-height:1.6;
    margin-top:8px
}

.form-field ul {
    color:#9c3833;
    list-style:none;
    padding:0;
    font-size:13px;
    line-height:1.6;
    margin:8px 0
}

.form-field input[aria-invalid=true] {
    border-color:#b54d43
}

.form-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:24px
}

.cancel-link {
    font-size:13px;
    color:var(--muted)
}

.flash {
    padding:15px 20px;
    margin-top:24px;
    border:1px solid #cbd9bb;
    border-radius:9px;
    background:#eaf0de;
    font-size:14px
}

.skip-link {
    position:absolute;
    top:-100px;
    left:20px;
    background:white;
    padding:12px;
    z-index:10
}

.skip-link:focus {
    top:12px
}

@media(max-width:1080px) {
    .filter-bar {
        grid-template-columns:repeat(3,minmax(0,1fr)) auto
    }

    .filter-search {
        grid-column:1/-1
    }

}

@media(max-width:900px) {
    .listing-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .site-header {
        padding:22px 32px
    }

    .header-note {
        display:none
    }

    .hero {
        padding:48px 0 36px
    }

    .page-shell {
        padding:0 28px
    }

}

@media(max-width:580px) {
    .site-header {
        padding:18px 20px;
        min-height:80px
    }

    .brand {
        font-size:21px
    }

    .brand-mark {
        width:30px;
        height:30px;
        font-size:22px
    }

    .page-shell {
        padding:0 16px
    }

    .hero {
        padding:36px 0 28px
    }

    .hero h1 {
        font-size:27px;
        letter-spacing:-1px;
        line-height:1.3
    }

    .hero>p:last-child {
        font-size:13px
    }

    .filter-bar {
        grid-template-columns:1fr;
        padding:16px
    }

    .filter-actions .button {
        width:100%
    }

    .section-heading {
        align-items:center
    }

    .section-heading h2 {
        font-size:18px
    }

    .sort-note {
        display:none
    }

    .listing-grid {
        grid-template-columns:1fr;
        gap:16px
    }

    .listing-card {
        min-height:0
    }

    .site-footer {
        padding:24px 16px
    }

    .site-footer span:last-child {
        display:none
    }

    .form-panel {
        padding:24px 20px
    }

    .form-heading h1 {
        font-size:32px
    }

    .form-page {
        padding-top:28px
    }

}

@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important
    }

}