/* =====================================================================
   Ocampp — One Campus Plaza
   Hand-written stylesheet that reproduces the Lovable (Tailwind) design.
   Design tokens are copied 1:1 from the original src/styles.css
   ===================================================================== */
:root {
  --radius: 16px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --brand: #0B5D45;
  --ink: var(--brand);
  --paper: oklch(1 0 0);
  --background: var(--paper);
  --foreground: oklch(0.24 0.015 165);
  --card: var(--paper);
  --primary: #FF6A13;
  --primary-foreground: var(--paper);
  --secondary: oklch(0.96 0.021 167);
  --secondary-foreground: var(--ink);
  --muted: oklch(0.965 0.009 165);
  --muted-foreground: oklch(0.51 0.025 174);
  --accent: oklch(0.93 0.045 165);
  --destructive: oklch(0.58 0.23 27);
  --border: oklch(0.90 0.013 165);
  --ring: var(--ink);
  --shadow: 0 2px 8px color-mix(in oklab, var(--ink) 4%, transparent);
  --shadow-lg: 0 8px 24px color-mix(in oklab, var(--ink) 8%, transparent);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font); font-size: 1rem; line-height: 1.5; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font); letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }
s { text-decoration: line-through; }

.icon { width: var(--s, 1rem); height: var(--s, 1rem); flex: none; vertical-align: middle; pointer-events: none; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.container.wide { max-width: 80rem; }
.page-pad { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.page-pad-lg { padding-top: 1.75rem; padding-bottom: 1.75rem; }
@media (min-width: 768px) { .page-pad { padding-top: 2rem; padding-bottom: 2rem; } }
.narrow-page { max-width: 36rem; padding: 5rem 1rem; }
.narrow-page-lg { max-width: 56rem; padding: 2.5rem 1rem; }
.narrow-page-md { max-width: 42rem; padding: 2rem 1.25rem; }
.center-screen { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 0 1rem; text-align: center; }
.narrow { max-width: 28rem; }
.page { min-height: calc(100vh - 10rem); padding-bottom: 7rem; }

/* ---------- utilities ---------- */
.row { display: flex; align-items: center; gap: .5rem; }
.row.wrap, .wrap { flex-wrap: wrap; }
.center { justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.align-start { align-items: flex-start; }
.grow { flex: 1 1 0%; }
.minw0 { min-width: 0; }
.inline { display: inline; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.stack-4 { display: flex; flex-direction: column; gap: 1rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-10 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; }
.pt-6 { padding-top: 1.5rem; } .pb-4 { padding-bottom: 1rem; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.text-center { text-align: center; } .text-right { text-align: right; }
.text-xs { font-size: .75rem; line-height: 1rem; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .tiny { font-size: .75rem; line-height: 1rem; }
.fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; }
.muted { color: var(--muted-foreground); }
.text-fg { color: var(--foreground); }
.c-brand { color: var(--brand); } .c-primary { color: var(--primary); }
.op-80 { opacity: .8; }
.prewrap { white-space: pre-line; } .nowrap { white-space: nowrap; } .break { overflow-wrap: anywhere; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leading { line-height: 1.625; }
.bb { border-bottom: 1px solid var(--border); }
.h-2xl, .h-xl { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; }
.h-lg { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.h-md { font-size: 1.25rem; font-weight: 600; }
.h-sm { font-size: 1.125rem; font-weight: 700; }
.h-lg-x { font-size: 1.125rem; font-weight: 800; }
.h-md-x { font-size: 1.25rem; font-weight: 800; }
@media (min-width: 768px) { .h-lg-x { font-size: 1.5rem; } .h-md-x { font-size: 1.5rem; } }
.page-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: var(--brand); }
.big-404 { font-size: 4.5rem; line-height: 1; font-weight: 700; }
.hide-xs { display: none; }
@media (min-width: 640px) { .hide-xs { display: inline-flex; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1.25rem; border: 0; border-radius: var(--r-md); background: transparent; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, filter .15s, transform .1s; text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.is-busy { opacity: .5; pointer-events: none; cursor: not-allowed; }
.btn-default { background: var(--primary); color: var(--primary-foreground); }
.btn-default:hover { filter: brightness(.93); }
.btn-ink { background: var(--brand); color: #fff; }
.btn-ink:hover { filter: brightness(1.12); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: var(--accent); }
.btn-outline { border: 1px solid var(--border); background: var(--card); color: var(--foreground); }
.btn-outline:hover { background: var(--secondary); }
.btn-ghost:hover { background: var(--accent); color: var(--brand); }
.btn-destructive { background: var(--destructive); color: #fff; }
.btn-destructive:hover { filter: brightness(.93); }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .75rem; }
.btn-lg { height: 3rem; padding: 0 2rem; font-size: 1rem; }
.btn-icon { width: 2.5rem; padding: 0; }
.pill { border-radius: 999px; }
.link-primary { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: .375rem; }
.link-primary:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: .375rem; }
.field label, .label { font-size: .875rem; font-weight: 500; }
.input, .select { display: block; width: 100%; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--background); font-size: .875rem; }
textarea.input { height: auto; padding: .5rem .75rem; resize: vertical; }
.input:focus, .select:focus, .search input:focus, .input-pill:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.select { width: auto; min-width: 11rem; }
.select.w-full { width: 100%; }
.brutal.input { height: 2.75rem; }
textarea.brutal.input { height: auto; min-height: 6rem; background: var(--card); }
.input-search { padding-left: 2.25rem; }
.input-pill { display: block; width: 100%; height: 3rem; padding: 0 1rem 0 3rem; border: 1px solid var(--border); border-radius: 999px; background: var(--background); font-size: .875rem; }
.check { display: flex; align-items: center; gap: .5rem; height: 2.5rem; font-size: .875rem; font-weight: 500; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.qty-input { width: 4rem; padding: .5rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--background); text-align: center; font-weight: 700; }

/* ---------- cards ---------- */
.brutal { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--card); }
.brutal-hover { transition: transform .12s ease, box-shadow .12s ease; }
.brutal-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.brutal-hover:active { transform: translateY(0); box-shadow: var(--shadow); }
.card-pad { padding: 1.25rem; } .card-pad-lg { padding: 3rem; }
.tag { display: inline-block; width: fit-content; padding: .25rem .75rem; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-size: .75rem; font-weight: 600; }
.tag.sm { padding: .0625rem .4rem; font-size: .625rem; vertical-align: middle; }
.status-pill { display: inline-block; padding: .25rem .5rem; border-radius: var(--r-sm); background: var(--secondary); color: var(--brand); font-size: .75rem; font-weight: 600; text-transform: capitalize; }
.status-pill.bad { background: color-mix(in oklab, var(--destructive) 12%, white); color: var(--destructive); }
.round-ic { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; border-radius: 999px; background: var(--secondary); color: var(--brand); }
.round-ic.lg { margin: 0; flex: none; }
.round-ic.ink { width: 3rem; height: 3rem; margin: 0; background: var(--ink); color: var(--paper); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--background); border-bottom: 1px solid var(--border); }
.header-row { height: 5rem; display: flex; align-items: center; gap: .5rem; }
.logo { margin-right: auto; display: flex; align-items: center; gap: .625rem; }
.logo-mark { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); background: var(--brand); color: #fff; }
.logo-name { display: block; font-size: 1.5rem; line-height: 1.15; font-weight: 800; color: var(--brand); }
.logo-sub { display: block; font-size: 10px; font-weight: 500; color: var(--muted-foreground); }
.container.search { padding-bottom: 1rem; }
.search-wrap { position: relative; }
.search-ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; display: flex; }
.search-ic.sm { left: .75rem; }
.search input { display: block; width: 100%; height: 3rem; padding: 0 3rem; border: 1px solid var(--border); border-radius: 999px; background: var(--muted); font-size: .875rem; }
.search input::-webkit-search-cancel-button { display: none; }
.search-go { position: absolute; right: .5rem; top: .25rem; }
#cart-count { min-width: .6rem; text-align: center; }
#cart-link.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ---------- bottom nav ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card); border-top: 1px solid var(--border); padding: .5rem 0 max(12px, env(safe-area-inset-bottom)); }
.bottom-nav-in { max-width: 42rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.bottom-nav a { height: 3.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; font-size: 11px; font-weight: 600; color: var(--muted-foreground); transition: color .15s, transform .15s; }
.bottom-nav a:hover { color: var(--brand); }
.bottom-nav a.active { color: var(--primary); }
.bottom-nav a:active { transform: scale(.94); }

/* ---------- page transitions + loading ---------- */
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: var(--primary); box-shadow: 0 0 8px var(--primary); opacity: 0; transition: width .2s ease, opacity .25s ease; pointer-events: none; }
#page { transition: opacity .16s ease, transform .16s ease; }
#page.is-leaving { opacity: .4; transform: translateY(4px); pointer-events: none; }
#page.is-entering { animation: pageIn .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.skel { background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklab, var(--muted) 60%, white) 50%, var(--muted) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r-md); }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-wrap { padding: 1.75rem 1.25rem; max-width: 72rem; margin: 0 auto; }
.skel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .skel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .skel-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- home ---------- */
.greet { margin-bottom: 1.5rem; }
.campus-banner { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); min-height: 16rem; background: var(--brand); color: #fff; }
.campus-banner img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: right; }
.campus-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--brand) 25%, color-mix(in oklab, var(--brand) 92%, transparent) 50%, color-mix(in oklab, var(--brand) 12%, transparent)); }
.banner-copy { max-width: 78%; padding: 2rem 1.5rem; }
.banner-copy h2 { font-size: 1.875rem; line-height: 1.25; font-weight: 800; }
.banner-kicker { margin-bottom: .75rem; font-size: .75rem; font-weight: 600; opacity: .8; }
.banner-sub { margin-top: .75rem; font-size: .875rem; }
@media (min-width: 768px) { .campus-banner { min-height: 20rem; } .banner-copy { max-width: 65%; padding: 2.5rem; } .banner-copy h2 { font-size: 2.25rem; } .banner-sub { font-size: 1rem; } }
.shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1.75rem 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.shortcut { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .5rem .25rem; border-radius: var(--r-md); font-size: .875rem; font-weight: 600; transition: background-color .15s, transform .15s; }
.shortcut:hover { background: var(--accent); }
.shortcut:active { transform: scale(.96); }
.tile { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-lg); color: #fff; }
.tile-primary { background: var(--primary); } .tile-brand { background: var(--brand); }
.products-section { scroll-margin-top: 11rem; }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem; scrollbar-width: thin; }
.chips.mb-5 { margin-bottom: 1.25rem; }
.chips .btn { flex: none; }
.popular { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.empty-soft { padding: 2.5rem 1.25rem; border-radius: var(--r-lg); background: var(--secondary); text-align: center; }
.empty-soft > .icon { margin: 0 auto .75rem; display: block; }
.empty-soft h3 { font-size: 1.125rem; font-weight: 700; }
.empty-line { padding: 4rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.empty-line > .icon { margin: 0 auto 1rem; display: block; }
.empty-line h2 { font-size: 1.25rem; font-weight: 700; }
.empty-line p { max-width: 28rem; margin-left: auto; margin-right: auto; }

/* ---------- product cards + grids ---------- */
.product-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 16px; overflow-x: auto; padding: 4px 2px 16px; }
@media (min-width: 768px) { .product-row { grid-auto-columns: minmax(210px, 1fr); } }
.grid-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.grid-products.grid-gap-4 { gap: 1rem; }
@media (min-width: 640px) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--card); }
.pcard-img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--muted); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted-foreground); }
.sold-out { position: absolute; left: 0; right: 0; bottom: 0; padding: .25rem 0; background: var(--brand); color: #fff; text-align: center; font-size: .75rem; font-weight: 600; }
.pcard-body { display: flex; flex: 1; flex-direction: column; gap: .25rem; padding: .75rem; }
.pcard-name { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-vendor { font-size: .75rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-price { margin-top: auto; padding-top: .5rem; font-size: 1.125rem; font-weight: 800; color: var(--primary); }
.was { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); }
.was.lg { font-size: 1rem; }
.pcard-rating { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted-foreground); }
.pcard-rating .icon { color: var(--primary); }

/* ---------- catalog ---------- */
.cat-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.cat-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--secondary); color: var(--brand); }
.searchrow { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.searchrow .search-wrap { min-width: 0; }
.filters { display: grid; align-items: end; gap: 1rem; margin-bottom: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--muted); }
@media (min-width: 640px) { .filters { grid-template-columns: repeat(4, auto); justify-content: start; } }
.grid-stores { display: grid; gap: 1rem; }
@media (min-width: 640px) { .grid-stores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-stores { grid-template-columns: repeat(3, 1fr); } }
.store-card { display: block; overflow: hidden; }
.store-img { aspect-ratio: 2 / 1; background: var(--secondary); overflow: hidden; }
.store-img img { width: 100%; height: 100%; object-fit: cover; }
.store-body { padding: 1.25rem; }
.store-name { margin-top: .5rem; font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- product page ---------- */
.product-page { display: grid; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .product-page { grid-template-columns: 1fr 1fr; } }
.product-photo { aspect-ratio: 1; overflow: hidden; background: var(--muted); box-shadow: var(--shadow-lg); }
.product-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-info { display: flex; flex-direction: column; gap: 1rem; }
.product-title { font-size: 1.875rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.product-price { font-size: 1.875rem; font-weight: 700; color: var(--primary); }
@media (min-width: 768px) { .product-title { font-size: 2.25rem; } }
.stepper { display: flex; align-items: center; }
.stepper input { width: 2.5rem; border: 0; background: transparent; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- cart ---------- */
.cart-grid { display: grid; gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .cart-grid { grid-template-columns: 1fr 380px; } }
.cart-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem; }
.thumb { width: 4rem; height: 4rem; flex: none; overflow: hidden; border-radius: var(--r-md); background: var(--muted); }
.thumb img, .mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.summary { height: fit-content; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: var(--r-lg); background: var(--secondary); }
.h-total { font-size: 1.5rem; font-weight: 700; }

/* ---------- auth ---------- */
.auth-shell { max-width: 28rem; padding-top: 3rem; padding-bottom: 3rem; }
.auth-title { margin-bottom: 1.5rem; font-size: 1.875rem; font-weight: 700; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: 1.5rem; padding: .25rem; border-radius: var(--r-md); background: var(--muted); }
.tabs .btn { font-weight: 700; }
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.type-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: background-color .15s, border-color .15s; }
.type-card input { position: absolute; opacity: 0; pointer-events: none; }
.type-card:has(input:checked) { background: var(--secondary); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.type-card.slim { align-items: center; padding: .5rem; }
.signup-form .store-field { display: none; }
.signup-form:has(input[name="type"][value="vendor"]:checked) .store-field { display: flex; }

/* ---------- orders / profile / wallet ---------- */
.status-line { display: flex; }
.line-dash { padding: .5rem 0; border-top: 1px dashed var(--border); }
.line-solid { padding-top: .5rem; border-top: 1px solid var(--border); }
.order-page { max-width: 42rem; padding-top: 2rem; padding-bottom: 2rem; }
.items-box { margin: 1.5rem 0; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.item-line { padding: 1rem 0; border-top: 1px solid var(--border); }
.item-line:first-child { border-top: 0; }
.item-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--r-lg); background: var(--secondary); }
.tracking { padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dot { display: flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 999px; background: var(--secondary); }
.dot-on { background: var(--ink); color: var(--paper); }
.track-line { height: 1.75rem; margin-left: 1rem; border-left: 1px dashed var(--border); }
.address-box { margin: 1.5rem 0; padding: 1.25rem; border-radius: var(--r-lg); background: var(--secondary); }
.statbar { display: grid; grid-template-columns: 1fr 1fr; margin: 1.5rem 0; padding: 1.25rem 0; border-radius: var(--r-lg); background: var(--secondary); text-align: center; }
.statbar > div + div { border-left: 1px solid var(--border); }
.stat-n { font-size: 1.25rem; font-weight: 700; }
.ink-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding: 1.25rem; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.acct-list { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.acct-link { display: flex; align-items: center; gap: .5rem; height: 4rem; padding: 0 .5rem; font-size: .875rem; font-weight: 600; transition: background-color .15s; }
.acct-link + .acct-link { border-top: 1px solid var(--border); }
.acct-link:hover { background: var(--accent); }
.acct-ic { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-right: .5rem; border-radius: 999px; background: var(--ink); color: var(--paper); }
.ink-box { padding: 1.5rem; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.wallet-bal { margin-top: .5rem; font-size: 2.25rem; font-weight: 700; }
.wallet-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1.25rem 0; }
.wallet-actions .btn { height: 6rem; flex-direction: column; padding: 0 .25rem; white-space: normal; font-size: .75rem; text-align: center; }
.note-box { margin-bottom: 2rem; padding: 1rem; border-radius: var(--r-lg); background: var(--secondary); }

/* ---------- vendor + admin ---------- */
.stats-3 { display: grid; gap: 1rem; }
.stats-5 { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stats-3 { grid-template-columns: repeat(3, 1fr); } .stats-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .stats-5 { grid-template-columns: repeat(5, 1fr); } }
.stat { padding: 1.25rem; }
.stat.hl { background: var(--secondary); }
.stat-v { font-size: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; font-size: .875rem; }
.table thead { background: var(--ink); color: var(--paper); }
.table th { padding: .75rem; text-align: left; font-weight: 700; }
.table td { padding: .75rem; border-top: 1px solid var(--border); vertical-align: top; }
.mini-thumb { width: 3rem; height: 3rem; flex: none; overflow: hidden; border: 1px solid var(--border); background: var(--muted); }
.admin-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .375rem; align-items: flex-start; }
details.pw summary { list-style: none; cursor: pointer; }
details.pw summary::-webkit-details-marker { display: none; }
.upload-box { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--muted); font-weight: 700; cursor: pointer; }
.upload-box img { width: 100%; height: 100%; object-fit: cover; }
.upload-ph { display: flex; align-items: center; gap: .5rem; }
.grid-3 { display: grid; gap: .75rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- dialogs ---------- */
.dialog { width: calc(100% - 2rem); max-width: 28rem; max-height: 90vh; margin: auto; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-lg); overflow-y: auto; }
.dialog.dialog-wide { max-width: 34rem; }
.dialog[open] { animation: dlgIn .2s ease both; }
.dialog::backdrop { background: rgba(10, 30, 22, .5); animation: fade .2s ease both; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dialog-head h2 { font-size: 1.25rem; font-weight: 700; }
.dialog-empty { padding: 1.5rem 0; text-align: center; color: var(--muted-foreground); }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 1rem; bottom: 6.5rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 2rem); }
.toast { padding: .75rem 1rem; border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-lg); font-size: .875rem; font-weight: 500; animation: toastIn .25s ease both; }
.toast.error { border-left-color: var(--destructive); }
.toast.out { opacity: 0; transform: translateX(12px); transition: all .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- guest sign-in strip ---------- */
.guest-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--r-lg); background: var(--secondary); font-size: .875rem; color: var(--brand); }

/* ---------- verification notes ---------- */
.verify-note { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--r-lg); border: 1px solid var(--border); }
.verify-note.pending { background: color-mix(in oklab, var(--primary) 10%, white); border-color: color-mix(in oklab, var(--primary) 40%, white); color: #7a3300; }
.verify-note.ok { background: var(--secondary); color: var(--brand); }