:root{
  --bg:#ffffff;--fg:#111827;--muted:#6b7280;
  --card-bg: #ffffff; --card-border: rgba(0,0,0,0.06);
}
*{box-sizing:border-box}

body.theme-black{ --bg:#0b1220; --fg:#e6eef8; --muted:#94a3b8 }
/* dark theme card */
body.theme-black{ --card-bg: #071021; --card-border: rgba(255,255,255,0.04); }
body.theme-black a { color:#93c5fd; }
body.theme-black a:visited { color:#bfdbfe; }
body.theme-black a:hover { color:#dbeafe; }
body.theme-black a:active { color:#e0f2fe; }
@media (prefers-color-scheme: dark){ body.theme-os{ --bg:#0b1220; --fg:#e6eef8; --muted:#94a3b8; --card-bg:#071021; --card-border: rgba(255,255,255,0.04); } }
@media (prefers-color-scheme: dark){
  body.theme-os a { color:#93c5fd; }
  body.theme-os a:visited { color:#bfdbfe; }
  body.theme-os a:hover { color:#dbeafe; }
  body.theme-os a:active { color:#e0f2fe; }
}
@media (prefers-color-scheme: light){ body.theme-os{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; --card-bg:#ffffff; --card-border: rgba(0,0,0,0.06); } }
body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;padding:1rem;margin:0;min-height:100vh}
header{padding:0.25rem 0}
header .header-search{margin-top:0.6rem;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
header .header-search label{display:flex;align-items:center;gap:6px}
header .header-search input{width:clamp(260px,36vw,560px);max-width:100%}
main{width:100%;max-width:none;margin-top:0;padding-top:0}
ul{list-style:none;padding:0}
li{padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.06)}

/* items grid */
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px;align-self:flex-start;grid-auto-rows: min-content}

/* Mobile: force one item per row for narrow viewports */
@media (max-width: 640px) {
  .items-grid{grid-template-columns:1fr}
  .item-card .card-inner > a.item-link{padding:10px;flex-direction:row !important;flex-wrap:nowrap !important}
  .item-card .card-inner > a.item-link{display:flex !important;align-items:flex-start !important}
  .item-card .card-inner > a.item-link .item-thumb{flex:0 0 96px !important;margin-right:10px;width:96px}
  .item-card .card-inner > a.item-link .item-thumb img{width:96px;height:64px;object-fit:cover;max-width:96px;display:block}
  .item-card .item-meta{min-width:0}
}
.item-card{border:1px solid var(--card-border);padding:0;border-radius:10px;background:var(--card-bg);transition:box-shadow .18s ease,transform .12s ease;border-radius:10px}
.theme-black .item-card,
.theme-os .item-card{
  border-color: rgba(148,163,184,0.24);
}
.item-card .card-inner{display:block;padding:10px;height:auto}
.item-card:hover{box-shadow:0 10px 24px rgba(16,24,40,0.10);transform:translateY(-6px)}
.theme-black .item-card{
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.96));
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.10), 0 3px 10px rgba(0,0,0,0.35);
}
.theme-black .item-card:hover{
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.22), 0 10px 24px rgba(2,6,23,0.70);
}
.item-card img{border-radius:4px;display:block}
.item-card > a.item-link{display:flex !important;flex-direction:row;gap:12px;align-items:center;color:inherit;text-decoration:none;padding:8px;flex-wrap:nowrap}
/* ensure no default link styles (blue/underline) inside the card */
.item-card > a.item-link, .item-card > a.item-link *,
.item-card > a.item-link:link, .item-card > a.item-link:visited,
.item-card > a.item-link:link *, .item-card > a.item-link:visited * { color: inherit !important; text-decoration: none !important }

/* ensure strong/em inside link inherit color (some browsers style them specially) */
.item-card > a.item-link strong, .item-card > a.item-link b, .item-card > a.item-link em { color: inherit !important }
/* extra-specific rule to override user-agent link coloring */
.item-card .item-link .item-meta .item-title strong,
.item-card .item-link .item-meta .item-title b { color: inherit !important; text-decoration: none !important }

/* strongest possible override for link appearance inside item cards */
.item-card .card-inner > a.item-link,
.item-card .card-inner > a.item-link *,
.item-card .card-inner > a.item-link strong,
.item-card .card-inner > a.item-link b { color: var(--fg) !important; text-decoration: none !important }
.item-card > a.item-link .item-thumb{flex:0 0 auto;display:flex;align-items:center}
.item-card > a.item-link .item-thumb img{width:96px;height:64px;object-fit:cover;border-radius:4px}
/* make the thumbnail container more visible */
.item-card > a.item-link .item-thumb{background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));padding:4px;border-radius:6px;border:1px solid rgba(0,0,0,0.04);box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.item-card > a.item-link .item-thumb img{display:block;border-radius:4px}
.item-card .item-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.item-card .item-meta .item-title{white-space:normal;overflow:visible;text-overflow:unset}
.item-card .item-meta .item-merchant{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-card .item-meta .item-title{font-size:1rem;margin-bottom:4px}
.item-card .item-meta .item-cost,.item-card .item-meta .item-merchant{font-size:0.9rem;color:var(--muted)}
.item-card div{font-size:0.9rem}
/* hover effect for link */
.item-card > a.item-link:hover{background:rgba(0,0,0,0.02)}

/* stronger visible box: subtle inset and border highlight */
.item-card{box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01)}
.item-card:focus-within{outline:2px solid rgba(59,130,246,0.12);box-shadow:0 12px 30px rgba(16,24,40,0.12), inset 0 0 0 1px rgba(59,130,246,0.06)}
/* focus styles for keyboard navigation */
.item-card .card-inner > a.item-link:focus { outline: 3px solid rgba(59,130,246,0.12); border-radius:8px }
/* tag pills */
.tag{display:inline-block;background:rgba(0,0,0,0.06);padding:2px 6px;border-radius:10px;margin-right:6px;font-size:0.8rem}
.tags{margin-top:6px}
footer{max-width:900px;margin-top:1rem}
/* make footer stick to bottom so auth controls are visually at page bottom */
footer{position:fixed;left:0;right:0;bottom:0;background:var(--bg);padding:0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));border-top:1px solid rgba(0,0,0,0.06);z-index:30}
footer .app-footer-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
footer .footer-auth{flex:1 1 100%;min-width:0}
footer .footer-settings-row{display:flex;align-items:center;gap:8px;flex:0 0 auto;white-space:nowrap}
footer .app-footer-inner small{display:inline-flex;gap:6px;flex-wrap:wrap}
main{padding-bottom:112px}
body.page-inner main{padding-bottom:220px}

.rm-confirm-overlay[hidden]{display:none !important}
.rm-confirm-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.rm-confirm-card{
  width:min(420px,92vw);
  background:var(--card-bg);
  border:1px solid #9ca3af;
  border-radius:10px;
  padding:.85rem;
}
body.theme-black .rm-confirm-card{border-color:#475569}
.rm-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:.8rem;
}

/* form buttons */
.btn{display:inline-block;padding:8px 12px;border-radius:6px;border:1px solid rgba(0,0,0,0.08);background:var(--card-bg);color:var(--fg);cursor:pointer}
.btn.primary{background:#007bff;color:#fff;border-color:rgba(0,0,0,0.06)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,0.08);color:var(--fg)}
.btn.danger{background:#dc2626;color:#fff;border-color:#b91c1c}
.btn.danger:hover{background:#b91c1c}
.btn + .btn{margin-left:8px}

@media (max-width: 900px){
  body{padding:.7rem}
  header .header-search{justify-content:stretch}
  header .header-search label{width:100%}
  header .header-search label[for="status-filter"]{width:auto}
  header .header-search input{width:100%;max-width:none}
  header .header-search #status-filter{width:auto;max-width:46vw}
  footer .app-footer-inner{align-items:flex-start}
  footer .footer-settings-row{width:100%;justify-content:flex-start;flex-wrap:nowrap}
  footer .footer-settings-row select{max-width:36vw}
  .fab{right:1rem !important;bottom:calc(7.1rem + env(safe-area-inset-bottom)) !important;width:52px !important;height:52px !important;line-height:48px !important}
  body.page-inner main{padding-bottom:240px}
}