/* Shared CSS for /login /me /u/<slug>. Mobile-first. */

:root {
  --color-primary: #0a6e8b;
  --color-primary-h: #084e63;
  --color-accent: #3aa0b8;
  --color-text: #1a2332;
  --color-muted: #5a6878;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f7f9;
  --color-bg-soft: #f9fbfc;
  --color-border: #d8dde4;
  --color-border-soft: #e8edf1;
  --color-ok: #1f7a45;
  --color-ok-bg: #e8f5ec;
  --color-warn: #6b5300;
  --color-warn-bg: #fff8e1;
  --color-err: #8a1a1a;
  --color-err-bg: #fbe7e7;
  --color-amazon: #ff9900;
  --color-amazon-h: #f08800;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container-max: 1100px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15,30,50,.04), 0 0 0 1px rgba(15,30,50,.03);
  --shadow-md: 0 4px 16px rgba(15,30,50,.08);
  --shadow-lg: 0 10px 30px rgba(15,30,50,.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .container { padding: 0 24px; } }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--color-bg-alt); padding: 1px 6px; border-radius: 4px; font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Disclosure banner + header + footer ---------- */
.affiliate-disclosure-banner {
  background: var(--color-warn-bg);
  color: var(--color-warn);
  text-align: center;
  font-size: 13px;
  padding: 6px 16px;
  border-bottom: 1px solid #e9d97a;
  line-height: 1.4;
}
.site-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border-soft); padding: 14px 0; position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(6px); background: rgba(255,255,255,.85); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { font-size: 20px; font-weight: 700; color: var(--color-primary); letter-spacing: -.01em; }
.site-nav { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.site-nav a { color: var(--color-text); font-weight: 500; font-size: 14.5px; }
@media (max-width: 540px) {
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 13px; }
}

.site-main { min-height: 60vh; padding: 24px 0 64px; }

.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 28px 0 24px; margin-top: 56px; font-size: 13.5px; color: var(--color-muted); }
.footer-disclosure { background: var(--color-bg); border: 1px solid var(--color-border); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; line-height: 1.5; }
.footer-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.footer-nav a { color: var(--color-muted); }

/* ---------- Headings ---------- */
h1 { font-size: 1.75rem; line-height: 1.15; margin: 0 0 6px; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 28px 0 12px; letter-spacing: -.01em; font-weight: 600; }
h3 { font-size: 1.05rem; margin: 16px 0 6px; font-weight: 600; }
@media (min-width: 720px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.4rem; }
}

.lead { font-size: 1rem; color: var(--color-muted); margin: 0 0 20px; }

/* ---------- /me + /u/ header ---------- */
.me-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 8px 0 18px; flex-wrap: wrap;
}
.me-header__id h1 { margin: 0 0 4px; }
.me-header__sub { color: var(--color-muted); font-size: 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.profile-link .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ok); display: inline-block; }
.me-header__menu { position: relative; }
.me-header__menu summary { cursor: pointer; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-bg-alt); border: 1px solid var(--color-border-soft); list-style: none; font-size: 18px; }
.me-header__menu summary::-webkit-details-marker { display: none; }
.me-header__menu-panel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; min-width: 200px; display: flex; flex-direction: column; z-index: 10; }
.me-header__menu-panel a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--color-text); font-size: 14px; }
.me-header__menu-panel a:hover { background: var(--color-bg-alt); text-decoration: none; }

/* ---------- Hero Add Form ---------- */
.hero-add {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 0 0 28px;
  box-shadow: var(--shadow-md);
}
@media (min-width: 720px) { .hero-add { padding: 22px; } }
.hero-add__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hero-add__label { display: block; font-weight: 600; font-size: 15px; color: var(--color-text); }
.hero-add__hint { display: block; font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
.paste-btn {
  background: var(--color-bg); border: 1px solid var(--color-border); padding: 8px 14px;
  border-radius: 999px; font-size: 13.5px; color: var(--color-text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
  transition: all .15s ease;
}
.paste-btn:hover { background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-primary); }
.paste-btn:active { transform: scale(.97); }
.paste-btn--ok { background: var(--color-ok-bg); border-color: var(--color-ok); color: var(--color-ok); }

.hero-add input[type=url] {
  width: 100%; padding: 14px 16px; border: 2px solid var(--color-border); background: var(--color-bg);
  border-radius: var(--radius); font: inherit; font-size: 16px; color: var(--color-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.hero-add input[type=url]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10,110,139,.18); }

.hero-add__comment-wrap { margin: 10px 0 12px; }
.hero-add__comment-wrap summary { cursor: pointer; font-size: 13.5px; color: var(--color-muted); padding: 4px 0; list-style: none; }
.hero-add__comment-wrap summary::-webkit-details-marker { display: none; }
.hero-add__comment-wrap summary::before { content: "+ "; color: var(--color-primary); font-weight: 600; }
.hero-add__comment-wrap[open] summary::before { content: "− "; }
.hero-add__comment-wrap textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); background: var(--color-bg);
  border-radius: var(--radius-sm); font: inherit; font-size: 14.5px; resize: vertical; min-height: 56px;
  margin-top: 6px;
}

.hero-add__submit {
  width: 100%; padding: 14px 18px; background: var(--color-primary); color: #fff; border: 0;
  border-radius: var(--radius); font-weight: 600; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .12s ease, transform .08s ease;
}
.hero-add__submit:hover { background: var(--color-primary-h); }
.hero-add__submit:active { transform: scale(.985); }
.hero-add__submit:disabled { background: var(--color-muted); cursor: progress; }
.hero-add__submit-loading { display: inline-flex; align-items: center; gap: 10px; }
.spinner { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-add__error { background: var(--color-err-bg); color: var(--color-err); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; margin: 10px 0 0; border: 1px solid #ebbcbc; }

/* ---------- Items Section ---------- */
.items-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 16px; }
.items-section__head h2 { margin: 0; }
.items-count { color: var(--color-muted); font-size: 14px; }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin: 0 0 32px;
}
@media (min-width: 720px) { .inv-grid { gap: 18px; } }

.inv-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  box-shadow: var(--shadow-sm);
}
.inv-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); transform: translateY(-2px); }
.inv-card--hidden { opacity: .55; }
.inv-card--just-added { border-color: var(--color-ok); }
.inv-card--pulse { animation: pulse-ok 1.4s ease; }
@keyframes pulse-ok {
  0% { box-shadow: 0 0 0 0 rgba(31,122,69,.5), var(--shadow-md); }
  60% { box-shadow: 0 0 0 14px rgba(31,122,69,0), var(--shadow-md); }
  100% { box-shadow: 0 0 0 0 rgba(31,122,69,0), var(--shadow-md); }
}

.inv-card__img-wrap { display: block; aspect-ratio: 1/1; background: #fff; padding: 14px; border-bottom: 1px solid var(--color-border-soft); position: relative; }
.inv-card__img { width: 100%; height: 100%; object-fit: contain; }
.inv-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.inv-card__title { font-size: .95rem; font-weight: 600; margin: 0 0 8px; color: var(--color-text); line-height: 1.35; }
.inv-card__meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--color-bg-alt); color: var(--color-text); font-weight: 500; border: 1px solid var(--color-border-soft); }
.chip--ghost { background: transparent; color: var(--color-muted); }
.chip--off { background: #f0f0f0; color: #666; }
.chip--own { background: #e6f1fb; color: var(--color-primary); border-color: #c6dcef; }
.inv-card__comment { font-size: 13.5px; color: var(--color-muted); font-style: italic; margin: 6px 0 12px; padding-left: 10px; border-left: 3px solid var(--color-border); }
.inv-card__cta {
  display: inline-block; background: var(--color-amazon); color: #111; font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius-sm); text-align: center; font-size: 14.5px;
  margin-top: auto; transition: background .12s ease;
}
.inv-card__cta:hover { background: var(--color-amazon-h); text-decoration: none; }
.inv-card__row-actions { display: flex; gap: 6px; margin-top: 10px; }
.inv-card__row-actions form { display: contents; }
.btn-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border-soft); background: var(--color-bg); cursor: pointer; font-size: 15px; color: var(--color-muted); transition: all .12s ease; padding: 0; line-height: 1; }
.btn-icon:hover { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-text); }
.btn-icon--danger:hover { color: var(--color-err); border-color: #f0c8c8; background: var(--color-err-bg); }

/* Skeleton */
.inv-card__skeleton { background: linear-gradient(90deg, var(--color-bg-alt) 0%, var(--color-bg-soft) 50%, var(--color-bg-alt) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; width: 100%; aspect-ratio: 1/1; }
.inv-card__skeleton--line { aspect-ratio: auto; height: 12px; margin: 6px 0; width: 80%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.inv-card--loading { opacity: .85; }

.inv-empty { text-align: center; color: var(--color-muted); font-size: 14.5px; padding: 32px 16px; border: 2px dashed var(--color-border); border-radius: var(--radius); background: var(--color-bg-soft); }

/* ---------- Settings ---------- */
.settings-card { background: var(--color-bg); border: 1px solid var(--color-border-soft); border-radius: var(--radius); padding: 14px 18px; margin-top: 32px; }
.settings-card summary { cursor: pointer; padding: 4px 0; }
.settings-card summary h2 { margin: 0; font-size: 1.15rem; }
.field { display: block; margin: 16px 0; }
.field > span { display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px; }
.field input[type=text] { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
.toggle-row { display: flex; align-items: center; gap: 10px; margin: 16px 0; cursor: pointer; }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.toggle-label { font-size: 14.5px; }
.btn-primary { background: var(--color-primary); color: #fff; border: 0; padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 14.5px; }
.btn-primary:hover { background: var(--color-primary-h); }
.btn-ghost { display: inline-block; border: 1px solid var(--color-border); padding: 8px 14px; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.btn-ghost:hover { background: var(--color-bg-alt); text-decoration: none; }
.btn-danger { background: var(--color-err); color: #fff; border: 0; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.danger-zone { margin-top: 18px; padding: 12px 14px; background: var(--color-err-bg); border: 1px solid #ebbcbc; border-radius: var(--radius-sm); }
.danger-zone summary { font-size: 14px; color: var(--color-err); cursor: pointer; font-weight: 500; }
.danger-zone p { font-size: 13.5px; color: var(--color-text); margin: 8px 0; }

/* ---------- /login ---------- */
.legal-page { max-width: 760px; margin: 0 auto; }
.form-card { background: var(--color-bg); border: 1px solid var(--color-border); padding: 18px; border-radius: var(--radius); margin: 14px 0; }
.form-card label { display: block; font-weight: 500; margin: 12px 0 6px; font-size: 14px; }
.form-card input[type=email] { width: 100%; padding: 12px 14px; border: 2px solid var(--color-border); border-radius: var(--radius); font: inherit; font-size: 15px; }
.form-card input[type=email]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10,110,139,.18); }
.form-card .btn-primary { width: 100%; padding: 12px; margin-top: 14px; }
.callout { padding: 14px 18px; border-radius: var(--radius); margin: 16px 0; border: 1px solid; }
.callout--success { background: var(--color-ok-bg); border-color: #b6deca; color: var(--color-ok); }
.callout--success h2 { margin-top: 0; color: var(--color-ok); }
.callout--error { background: var(--color-err-bg); border-color: #ebbcbc; color: var(--color-err); }

.profile-lead { color: var(--color-muted); font-size: 14.5px; margin: 4px 0 24px; }
.profile-lead small { display: block; font-size: 12.5px; margin-top: 4px; }

hr { border: 0; border-top: 1px solid var(--color-border-soft); margin: 18px 0; }