/* LostLink UI refinement v9 (app feed)
   The app remains a static HTML/CSS/JS frontend; core application behavior is unchanged. */
:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --surface: #ffffff;
  --ink: #18263b;
  --muted: #66758a;
  --line: #e1e7ef;
  --green: #214a7b;
  --green-dark: #183a63;
  --green-soft: #edf4fc;
  --lime: #d5f0fa;
  --orange: #97521f;
  --orange-soft: #fff3e9;
  --blue: #23699b;
  --blue-soft: #eaf4fb;
  --shadow: 0 22px 60px rgba(26, 47, 76, .13);
  --radius: 16px;
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: #79b9ec;
}

/* Header and navigation */
.topbar {
  height: 72px;
  background: rgba(255, 255, 255, .94);
  border-bottom-color: #e4eaf2;
  box-shadow: 0 1px 0 rgba(17, 38, 67, .02);
  backdrop-filter: blur(16px);
}
.topbar-inner { max-width: 1220px; gap: 29px; }
.brand { min-width: 176px; gap: 9px; }
.brand-mark, .auth-brand-mark { background: var(--green); box-shadow: none; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { color: #18263b; font-size: 19px; letter-spacing: -.7px; }
.brand-name span, .auth-brand-copy strong span { color: #2788bd !important; }
.nav { gap: 4px; }
.nav button { padding: 9px 12px; border-radius: 9px; }
.nav button:hover { background: #f3f6fa; }
.nav button.active { background: var(--green-soft); color: var(--green); }
.top-actions { gap: 8px; }
.btn { border-radius: 10px; font-weight: 650; transition: background .16s, border-color .16s, box-shadow .16s, transform .16s; }
.btn-primary { background: var(--green); box-shadow: 0 2px 5px rgba(33, 74, 123, .16); }
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary { border-color: #dce4ed; background: #fff; }
.btn-secondary:hover { border-color: #bdcfe1; background: #f9fbfd; }
.btn-quiet:hover { background: #f3f6fa; }

/* Main canvas and the primary action */
.main { max-width: 1220px; padding: 34px 28px 64px; }
.hero {
  position: relative;
  isolation: isolate;
  align-items: center;
  min-height: 244px;
  padding: 34px 36px;
  margin-bottom: 32px;
  border: 1px solid #dce7f4;
  border-radius: 22px;
  background: linear-gradient(112deg, #fff 0%, #f7faff 63%, #eef7fc 100%);
  box-shadow: 0 8px 28px rgba(25, 54, 88, .045);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 400px;
  height: 400px;
  right: -92px;
  bottom: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 177, 215, .15) 0%, rgba(39, 121, 177, .05) 42%, transparent 70%);
  pointer-events: none;
}
.hero > div:first-child { position: relative; z-index: 1; }
.eyebrow { color: #2b739e; letter-spacing: 1.35px; margin-bottom: 12px; }
.eyebrow:before { background: #48a8d2; width: 20px; }
.hero h1 { max-width: 650px; font-size: clamp(34px, 4.1vw, 46px); line-height: 1.08; letter-spacing: -1.9px; font-weight: 760; }
.hero h1 em { color: #246c9c; }
.hero p { max-width: 510px; margin-top: 14px; font-size: 14px; line-height: 1.75; color: #64748a; }
.hero-actions { position: relative; z-index: 1; gap: 9px; }
.hero-actions .btn { min-height: 43px; padding-inline: 14px; }
.section-line { display: none; }

/* Feed controls */
.feed-head { margin-bottom: 17px; }
.feed-title { font-size: 21px; letter-spacing: -.55px; color: #19283d; }
.feed-subtitle { font-size: 12px; color: #718095; margin-top: 4px; }
.feed-controls { gap: 9px; margin-bottom: 15px; }
.search-wrap { max-width: 540px; }
.search, .select { border-color: #dfe6ef; border-radius: 10px; background: #fff; }
.search { height: 45px; }
.search:focus { border-color: #8ab9df; box-shadow: 0 0 0 3px rgba(87, 157, 208, .13); }
.search-wrap svg { color: #8191a7; }
.select { height: 45px; color: #53637a; }
.filter-row { border-bottom-color: #e2e8f0; padding-bottom: 14px; margin-bottom: 20px; }
.tab { border-radius: 8px; padding: 8px 12px; }
.tab:hover { background: #f1f5fa; }
.tab.active { color: #214a7b; background: #eaf2fb; }
.sort-label { color: #718095; }
.sort-label select { color: #25384f; }

/* Report cards and empty / error states */
.grid { gap: 16px; }
.post-card { border-color: #e1e7ef; border-radius: 15px; box-shadow: 0 2px 9px rgba(22, 43, 72, .025); }
.post-card:hover { transform: translateY(-2px); border-color: #c9d9e8; box-shadow: 0 12px 26px rgba(22, 43, 72, .08); }
.card-image { height: 168px; background: #f0f4f8; }
.image-placeholder { color: #8fa0b3; }
.type-pill { border-radius: 7px; padding: 6px 9px; letter-spacing: .45px; }
.type-pill.lost, .tag.lost { background: #fff1e7; color: #99521f; }
.type-pill.found, .tag.found { background: #e8f3fd; color: #215f93; }
.card-body { padding: 16px 16px 15px; }
.card-meta { color: #7c8a9d; }
.card-title { color: #1d2b40; font-size: 16px; letter-spacing: -.3px; }
.card-description { color: #617087; }
.details-row { color: #687990; }
.details-row svg { color: #8fa0b3; }
.card-footer { border-top-color: #edf1f6; }
.response-info { color: #7b899a; }
.card-action { background: #eaf2fb; color: #214a7b; border-radius: 8px; }
.card-action:hover { background: #dceafa; }
.card-action.neutral { background: #f0f3f7; color: #526177; }
.empty, .admin-empty {
  border: 1px solid #e1e8f0;
  border-radius: 17px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 16px rgba(24, 48, 79, .025);
}
.empty { padding: 46px 22px; }
.empty-icon { width: 54px; height: 54px; border-radius: 16px; background: #eaf3fc; color: #245f91; }
.empty h2 { color: #1c2a3f; font-size: 19px; letter-spacing: -.35px; }
.empty p { color: #66758a; line-height: 1.7; }
.feed-note { color: #8290a2; margin-top: 24px; }
.feed-note svg { color: #738dab; }

/* Dialogs, forms, detail views */
.modal-backdrop, .auth-backdrop { background: rgba(18, 34, 56, .48); }
.modal { border: 1px solid rgba(255, 255, 255, .65); border-radius: 18px; box-shadow: 0 24px 80px rgba(11, 28, 50, .23); }
.modal-header { border-bottom-color: #e4eaf2; }
.modal-title { color: #1b2a40; }
.icon-btn { border-color: #e1e7ef; color: #6c7b90; }
.icon-btn:hover { background: #f5f8fb; }
.field label, .field-label { color: #364960; }
.field input, .field textarea, .field select { border-color: #dbe4ee; border-radius: 10px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #8ab9df; box-shadow: 0 0 0 3px rgba(87, 157, 208, .13); }
.field input::placeholder, .field textarea::placeholder { color: #98a5b5; }
.type-option { border-color: #dfe7f0; }
.type-option.active { border-color: #6298c9; background: #eff6fd; box-shadow: 0 0 0 1px #6298c9 inset; }
.type-option.active .radio-mark { border-color: var(--green); }
.type-option.active .radio-mark:after { background: var(--green); }
.upload-area { border-color: #cddbe9; background: #f9fbfd; }
.upload-icon { background: #eaf3fc; }
.privacy-callout, .auth-note { background: #f0f6fc; color: #526780; }
.privacy-callout svg, .auth-note svg { color: #2b6c9e; }
.detail-image { background: #f0f5fa; }
.detail-content { color: var(--ink); }
.detail-desc, .fact { color: #607189; }
.fact svg { color: #8498ad; }
.response-card { border-color: #e1e8f0; }
.response-card p { color: #5f7087; }
.toast { background: #1b3b60; box-shadow: 0 12px 35px rgba(19, 44, 75, .25); }

/* Admin and authentication */
.admin-security { background: #eff6fc; border-color: #dbe9f6; color: #3f5d7b; }
.admin-security svg { color: #2b6c9e; }
.admin-request { border-radius: 14px; border-color: #e1e7ef; }
.admin-request .request-email { color: #2b739e; }
.admin-empty { color: #697a90; }
.admin-empty strong { color: #1e2d43; }
.auth-card { border: 1px solid rgba(255,255,255,.6); box-shadow: 0 24px 80px rgba(11, 28, 50, .24); }
.auth-heading { color: #1b2a40; }
.auth-role.active { background: #edf4fc; border-color: #bad1e8; color: #214a7b; }
.auth-mode.active { color: #214a7b; border-color: #214a7b; }
.auth-field input { border-color: #dbe4ee; border-radius: 10px; }
.auth-field input:focus { border-color: #8ab9df; box-shadow: 0 0 0 3px rgba(87, 157, 208, .13); }
.auth-google { border-color: #dfe6ef; }
.auth-google:hover { background: #f8fafc; }
.auth-brand-copy strong { color: #19283d; }

/* Footer */
.footer { border-top-color: #e1e7ef; color: #8794a5; background: #fff; }
.footer-inner { max-width: 1220px; }
.footer strong { color: #4f6076; }
.footer-links a { color: #5b6f86; }
.footer-links a:hover { color: #214a7b; }

@media (max-width: 900px) {
  .topbar-inner { gap: 16px; }
  .main { padding-top: 28px; }
  .hero { padding: 29px 28px; min-height: 0; }
  .hero h1 { font-size: clamp(33px, 4.7vw, 42px); }
}
@media (max-width: 620px) {
  .topbar { height: 65px; }
  .topbar-inner { gap: 9px; padding: 0 14px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
  .brand-name { font-size: 16px; }
  .nav button { padding: 7px 8px; }
  .main { padding: 22px 14px 38px; }
  .hero { padding: 24px 20px; border-radius: 17px; gap: 18px; margin-bottom: 25px; }
  .hero h1 { font-size: 33px; letter-spacing: -1.25px; }
  .hero p { font-size: 13px; line-height: 1.7; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { padding-inline: 10px; font-size: 11px; }
  .feed-title { font-size: 19px; }
  .feed-controls { gap: 8px; }
  .filter-row { margin-bottom: 16px; }
  .grid { gap: 12px; }
  .card-image { height: 184px; }
  .empty { padding: 36px 17px; }
  .footer { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-card:hover { transform: none; }
}