/* FindingNearBy Vendor Dashboard — calm, Finder-inspired workspace.
   Scoped under .dash so it can never leak into the registration / status screens (portal.css). */
body.dash-mode { background: #F4F6F8; }
body.dash-mode .bg, body.dash-mode noscript { display: none; }

.dash {
    --d-bg: #F4F6F8; --d-panel: #FFFFFF; --d-side: rgba(238, 241, 245, .86); --d-line: #E3E7ED; --d-line-2: #EEF1F5;
    --d-text: #1B2230; --d-muted: #667085; --d-faint: #98A2B3;
    --d-accent: #16A34A; --d-accent-d: #15803D; --d-accent-soft: #E8F7EE;
    --d-warn: #B45309; --d-warn-soft: #FEF3C7; --d-bad: #B42318; --d-bad-soft: #FEE4E2; --d-info: #1D4ED8; --d-info-soft: #E0EAFF;
    --d-r: 12px; --d-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    position: fixed; inset: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr); background: var(--d-bg); color: var(--d-text);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; z-index: 20;
}
.dash[hidden] { display: none; }
.dash *, .dash *::before, .dash *::after { box-sizing: border-box; }
.dash a { color: var(--d-accent-d); text-decoration: none; } .dash a:hover { text-decoration: underline; }
.dash button { font: inherit; color: inherit; }
.dash :focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- sidebar ---------- */
.d-side { background: var(--d-side); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-right: 1px solid var(--d-line); display: flex; flex-direction: column; min-height: 0; z-index: 30; }
.d-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1rem .6rem; }
.d-brand img { width: 32px; height: 32px; border-radius: 8px; }
.d-brand b { display: block; font-size: .95rem; letter-spacing: -.01em; } .d-brand small { color: var(--d-muted); font-size: .72rem; }
.d-nav { flex: 1; overflow-y: auto; padding: .25rem .6rem 1rem; }
.d-nav h6 { margin: 1rem .55rem .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-faint); }
.d-nav a, .d-nav button.d-link { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: 8px; background: none; color: var(--d-text); cursor: pointer; text-align: left; text-decoration: none; }
.d-nav a i { width: 1.15rem; text-align: center; color: var(--d-accent-d); opacity: .9; }
.d-nav a:hover { background: rgba(16, 24, 40, .05); text-decoration: none; }
.d-nav a[aria-current="page"] { background: rgba(22, 163, 74, .14); font-weight: 600; }
.d-nav .badge { margin-left: auto; min-width: 1.25rem; padding: 0 .4rem; border-radius: 999px; background: var(--d-accent); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.25rem; }
.d-nav a.locked { color: var(--d-faint); }
.d-side-foot { padding: .75rem 1rem; border-top: 1px solid var(--d-line); font-size: .78rem; color: var(--d-muted); }
.d-scrim { display: none; }

/* ---------- main column ---------- */
.d-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.d-bar { display: flex; align-items: center; gap: .75rem; padding: .65rem 1.25rem; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--d-line); }
.d-burger { display: none; width: 38px; height: 38px; border: 1px solid var(--d-line); border-radius: 8px; background: #fff; cursor: pointer; }
.d-crumb { display: flex; align-items: center; gap: .4rem; color: var(--d-muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.d-crumb b { color: var(--d-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.d-spacer { flex: 1; }
.d-search { position: relative; width: min(280px, 36vw); }
.d-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--d-faint); pointer-events: none; }
.d-search input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; border: 1px solid var(--d-line); border-radius: 8px; background: #F2F4F7; font: inherit; color: inherit; }
.d-search input:focus { background: #fff; border-color: var(--d-accent); outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.d-icon-btn { position: relative; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--d-text); }
.d-icon-btn:hover { background: rgba(16, 24, 40, .06); }
.d-icon-btn .dot { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #DC2626; color: #fff; font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; }
.d-plan { padding: .18rem .6rem; border-radius: 999px; background: var(--d-accent-soft); color: var(--d-accent-d); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.d-plan.free { background: #EEF1F5; color: var(--d-muted); } .d-plan.expired { background: var(--d-warn-soft); color: var(--d-warn); }
.d-acct { position: relative; }
.d-acct > button { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.d-acct > button:hover { background: rgba(16, 24, 40, .06); }
.d-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--d-accent); color: #fff; display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.d-avatar img { width: 100%; height: 100%; object-fit: cover; }
.d-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 250px; padding: .4rem; background: #fff; border: 1px solid var(--d-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); z-index: 50; }
.d-menu[hidden] { display: none; }
.d-menu .who { padding: .5rem .6rem .6rem; border-bottom: 1px solid var(--d-line-2); margin-bottom: .3rem; }
.d-menu .who b { display: block; } .d-menu .who span { color: var(--d-muted); font-size: .8rem; }
.d-menu a, .d-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; color: var(--d-text); cursor: pointer; text-align: left; }
.d-menu a:hover, .d-menu button:hover { background: #F2F4F7; text-decoration: none; }

.d-content { flex: 1; overflow-y: auto; padding: 1.5rem 1.5rem 3rem; }
.d-page { max-width: 1080px; margin: 0 auto; }
.d-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.d-head h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; } .d-head p { margin: .15rem 0 0; color: var(--d-muted); }

/* ---------- panels & primitives ---------- */
.d-panel { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: var(--d-r); box-shadow: var(--d-shadow); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.d-panel > h2, .d-panel > .ph h2 { margin: 0 0 .2rem; font-size: 1rem; letter-spacing: -.01em; }
.d-panel .ph { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.d-panel .ph h2 { margin: 0; } .d-sub { color: var(--d-muted); margin: 0 0 .8rem; font-size: .86rem; }
.d-grid { display: grid; gap: 1rem; } .d-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.d-split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.d-stat { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: .9rem 1rem; box-shadow: var(--d-shadow); }
.d-stat span { display: block; color: var(--d-muted); font-size: .78rem; } .d-stat b { display: block; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.2; } .d-stat small { color: var(--d-faint); }
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .95rem; border: 1px solid var(--d-line); border-radius: 8px; background: #fff; color: var(--d-text); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.d-btn:hover { background: #F6F8FA; text-decoration: none; }
.d-btn.primary { background: var(--d-accent); border-color: var(--d-accent); color: #fff; } .d-btn.primary:hover { background: var(--d-accent-d); }
.d-btn.danger { color: var(--d-bad); } .d-btn.sm { padding: .3rem .65rem; font-size: .82rem; } .d-btn[disabled] { opacity: .55; cursor: not-allowed; }
.d-btn.ghost { border-color: transparent; background: transparent; color: var(--d-accent-d); }
.d-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.d-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .6rem; border-radius: 999px; background: #EEF1F5; color: var(--d-muted); font-size: .74rem; font-weight: 600; }
.d-pill.ok { background: var(--d-accent-soft); color: var(--d-accent-d); } .d-pill.warn { background: var(--d-warn-soft); color: var(--d-warn); }
.d-pill.bad { background: var(--d-bad-soft); color: var(--d-bad); } .d-pill.info { background: var(--d-info-soft); color: var(--d-info); }
.d-banner { display: flex; gap: .75rem; padding: .85rem 1rem; border-radius: var(--d-r); border: 1px solid var(--d-line); background: #fff; margin-bottom: 1rem; align-items: flex-start; }
.d-banner > i { margin-top: .15rem; } .d-banner .grow { flex: 1; min-width: 0; } .d-banner p { margin: .15rem 0 0; color: inherit; opacity: .9; }
.d-banner.warn { background: var(--d-warn-soft); border-color: #FCD9A0; color: #7C2D12; } .d-banner.bad { background: var(--d-bad-soft); border-color: #FDA29B; color: #7A271A; }
.d-banner.info { background: var(--d-info-soft); border-color: #B2CCFF; color: #1E3A8A; } .d-banner.ok { background: var(--d-accent-soft); border-color: #A6E3BC; color: #14532D; }
.d-empty { text-align: center; padding: 2rem 1rem; color: var(--d-muted); } .d-empty i { font-size: 1.8rem; color: var(--d-faint); display: block; margin-bottom: .5rem; }
.d-muted { color: var(--d-muted); } .d-small { font-size: .8rem; }
.d-progress { height: 8px; border-radius: 999px; background: #EAEDF2; overflow: hidden; } .d-progress > i { display: block; height: 100%; background: var(--d-accent); border-radius: 999px; }
.d-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #EEF1F5, #F7F8FA, #EEF1F5); background-size: 200% 100%; animation: dsk 1.2s infinite; margin: .5rem 0; }
@keyframes dsk { to { background-position: -200% 0; } }
.d-spin { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dspin .7s linear infinite; vertical-align: -.15em; }
@keyframes dspin { to { transform: rotate(360deg); } }

/* ---------- lists (Finder list view) ---------- */
.d-list { list-style: none; margin: 0; padding: 0; }
.d-list > li { display: flex; gap: .8rem; align-items: center; padding: .7rem .4rem; border-top: 1px solid var(--d-line-2); }
.d-list > li:first-child { border-top: 0; }
.d-list .ic { width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--d-accent-soft); color: var(--d-accent-d); display: grid; place-items: center; flex: none; }
.d-list .tx { flex: 1; min-width: 0; } .d-list .tx b { display: block; overflow: hidden; text-overflow: ellipsis; } .d-list .tx span { color: var(--d-muted); font-size: .82rem; }
.d-list li.unread { background: #F6FBF8; } .d-list li.unread .tx b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--d-accent); margin-right: .4rem; }
.d-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #E7EBF0; margin-bottom: 1rem; flex-wrap: wrap; }
.d-tabs button { padding: .4rem .9rem; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-weight: 600; color: var(--d-muted); }
.d-tabs button[aria-selected="true"] { background: #fff; color: var(--d-text); box-shadow: var(--d-shadow); }

/* ---------- forms ---------- */
.d-form { display: grid; gap: .9rem; } .d-form .r2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.d-field label { display: block; font-size: .78rem; font-weight: 600; color: var(--d-muted); margin-bottom: .25rem; }
.d-field input, .d-field select, .d-field textarea { width: 100%; padding: .55rem .7rem; border: 1px solid #D0D5DD; border-radius: 8px; background: #fff; font: inherit; color: var(--d-text); }
.d-field textarea { min-height: 84px; resize: vertical; }
.d-field input:focus, .d-field select:focus, .d-field textarea:focus { border-color: var(--d-accent); outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.d-field input[readonly], .d-field input:disabled { background: #F2F4F7; color: var(--d-muted); }
.d-field .hint { margin: .25rem 0 0; font-size: .76rem; color: var(--d-faint); }
.d-check { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; } .d-check input { margin-top: .2rem; accent-color: var(--d-accent); }
.d-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.d-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--d-line); border-radius: 999px; background: #fff; font-size: .82rem; cursor: default; }
button.d-chip { cursor: pointer; } button.d-chip.sel, .d-chip.sel { background: var(--d-accent-soft); border-color: #86D6A4; color: var(--d-accent-d); font-weight: 600; }
.d-err { color: var(--d-bad); font-size: .85rem; margin-top: .4rem; }
.d-kv { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .45rem .9rem; margin: 0; } .d-kv dt { color: var(--d-muted); } .d-kv dd { margin: 0; word-break: break-word; }

/* ---------- media ---------- */
.d-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.d-tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--d-line); background: #F2F4F7; }
.d-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-tile button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(16, 24, 40, .7); color: #fff; cursor: pointer; }
.d-drop { border: 2px dashed #CBD5E1; border-radius: 12px; padding: 1.2rem; text-align: center; color: var(--d-muted); cursor: pointer; background: #FAFBFC; }
.d-drop:hover { border-color: var(--d-accent); background: var(--d-accent-soft); }

/* ---------- plans ---------- */
.d-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.d-plancard { border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 1rem; background: #fff; display: flex; flex-direction: column; gap: .5rem; }
.d-plancard.cur { border-color: var(--d-accent); box-shadow: 0 0 0 2px rgba(22, 163, 74, .18); }
.d-plancard h3 { margin: 0; } .d-plancard .price { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; } .d-plancard ul { margin: 0; padding-left: 1.1rem; color: var(--d-muted); flex: 1; }

/* ---------- modal / toast ---------- */
.d-modal { position: fixed; inset: 0; background: rgba(16, 24, 40, .5); display: grid; place-items: center; padding: 1rem; z-index: 80; }
.d-dialog { width: min(640px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 16px; padding: 1.25rem; box-shadow: 0 24px 64px rgba(16, 24, 40, .3); }
.d-dialog h2 { margin: 0 0 .2rem; } .d-dialog .acts { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.d-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); max-width: min(92vw, 520px); padding: .7rem 1rem; border-radius: 10px; background: #1B2230; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); z-index: 90; }
.d-toast.ok { background: #14532D; } .d-toast.bad { background: #7A271A; }
.d-qr { display: block; margin: .5rem auto; width: 220px; max-width: 100%; image-rendering: pixelated; border: 1px solid var(--d-line); border-radius: 8px; padding: 6px; background: #fff; }
.d-stars { color: #F59E0B; letter-spacing: 1px; }
.d-ev-top { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.d-ev h3 { margin: 0 0 .15rem; font-size: 1rem; }
.d-ev dl { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .6rem 0; font-size: .84rem; color: var(--d-muted); } .d-ev dl div { display: flex; gap: .35rem; align-items: center; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .d-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .d-g3, .d-plans { grid-template-columns: 1fr; } .d-split { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .dash { grid-template-columns: minmax(0, 1fr); }
    .d-side { position: fixed; inset: 0 auto 0 0; width: min(290px, 84vw); transform: translateX(-102%); transition: transform .22s ease; background: rgba(244, 246, 248, .98); }
    .dash.nav-open .d-side { transform: none; box-shadow: 8px 0 32px rgba(16, 24, 40, .2); }
    .dash.nav-open .d-scrim { display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, .4); z-index: 25; }
    .d-burger { display: inline-grid; place-items: center; }
    .d-bar { padding: .55rem .8rem; } .d-search { display: none; } .d-search.on { display: block; position: absolute; left: .8rem; right: .8rem; top: 100%; width: auto; margin-top: 4px; z-index: 40; }
    .d-content { padding: 1rem .85rem 3rem; } .d-g2, .d-form .r2 { grid-template-columns: 1fr; } .d-kv { grid-template-columns: 1fr; gap: .1rem; } .d-kv dd { margin-bottom: .5rem; }
    .d-plan-top { display: none; } .d-acct-name { display: none; }
}
@media (max-width: 480px) { .d-g4 { grid-template-columns: 1fr 1fr; } .d-head h1 { font-size: 1.25rem; } .d-stat b { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .d-side { transition: none; } .d-skel, .d-spin { animation: none; } }
