/* Resell Rocket
   Layout is deliberately narrow and touch-friendly: the research and inventory
   views need to work on a phone while standing in a thrift store. */

:root {
  /* Warm linen theme, drawn from the Bolo Hound medallion: linen canvas,
     walnut-tinted text, warm borders. White panels keep data readable. */
  --ink: #2b2115;
  --muted: #6b5a45;
  --line: #ded1bc;
  --bg: #efe7d8;
  --panel: #ffffff;
  --accent: #1f5fbf;
  --accent-strong: #17458c;
  --accent-tint: #eff6ff;
  --flame: #ea580c;
  --flame-strong: #c2410c;
  --flame-deep: #9a3412;
  --flame-tint: #fff7ed;
  --ok: #15803d;
  --bad: #b91c1c;
  --warn-bg: #fff8e1;
  --warn-line: #f0d38a;
  --warn-ink: #7a5b00;
  --prod-bg: #b91c1c;
  --sbx-bg: #374151;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* --- Environment banner --------------------------------------------------
   Full width, high contrast, always first in the document. Mistaking
   production for sandbox is the most expensive error this app can enable. */
.env-banner {
  padding: 8px 16px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  background: var(--sbx-bg);
}
.env-banner strong { letter-spacing: 0.08em; }
body.env-production .env-banner { background: var(--prod-bg); }

/* --- Header / nav ------------------------------------------------------- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 10px 20px;
  /* Lighter linen than the page so the header reads as its own plane. */
  background: #f7f1e6;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
.app-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.app-header nav a {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.94rem;
}
.app-header nav a:hover {
  background: var(--flame-tint);
  color: var(--flame);
}
.nav-active {
  background: var(--flame-tint);
  color: var(--flame);
  border-bottom: 3px solid var(--flame);
}

/* --- Content ----------------------------------------------------------- */
main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

h1 {
  margin: 0 0 10px;
  font-size: 1.5rem;
}

.lede {
  margin: 0 0 20px;
  color: var(--muted);
  max-width: 62ch;
}

.pending {
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.9rem;
}

.notice {
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
}
.notice-warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
}

/* --- Key/value table --------------------------------------------------- */
table.kv {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
table.kv th,
table.kv td {
  min-width: 0;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
table.kv td code {
  white-space: normal;
  overflow-wrap: anywhere;
}
table.kv tr:last-child th,
table.kv tr:last-child td { border-bottom: 0; }
table.kv th {
  width: 34%;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
}

code {
  font: 0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg);
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.pill-prod { background: var(--prod-bg); }
.pill-sbx { background: var(--sbx-bg); }

.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
.muted { color: var(--muted); font-size: 0.9rem; }

.app-footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 32px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* --- Phone ------------------------------------------------------------- */
@media (max-width: 560px) {
  .app-header { padding: 12px 14px; }
  .app-header nav a { padding: 9px 10px; }
  main { padding: 20px 14px 44px; }
  table.kv th { width: 42%; }
}

/* --- Flash messages ---------------------------------------------------- */
.notice-ok {
  background: #ecfdf3;
  border: 1px solid #a7e0bd;
  color: #14532d;
}
.notice-err {
  background: #fef2f2;
  border: 1px solid #f0b4b4;
  color: #7f1d1d;
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--flame-strong); color: #fff; }
.btn-primary:hover { background: var(--flame-deep); }
.btn-secondary {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #911616; }

/* Large buttons for primary CTAs */
.btn-lg {
  padding: 14px 28px;
  font-size: 1.05rem;
  border-radius: 9px;
}

/* Outline danger for destructive actions like Disconnect */
.btn-outline-danger {
  background: transparent;
  color: var(--bad);
  border: 2px solid var(--bad);
}
.btn-outline-danger:hover {
  background: var(--bad);
  color: #fff;
}

/* eBay connection panel */
.connect-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  background: var(--panel);
  margin-bottom: 20px;
}
.connect-box h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.connect-box .muted {
  margin-bottom: 16px;
}
.connect-box.connected {
  border-color: var(--ok);
  background: #f0fdf4;
}

/* Keyboard focus visibility */
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 3px var(--accent);
}

/* --- Marketplace "List" menu -------------------------------------------- */
.marketplace-menu {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.marketplace-menu summary {
  list-style: none;
  font-weight: 600;
}
.marketplace-menu summary::-webkit-details-marker { display: none; }
.marketplace-menu[open] summary { background: var(--bg); }
.marketplace-menu-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 230px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.marketplace-menu-list .btn { width: 100%; text-align: left; }
.marketplace-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 560px) {
  .marketplace-menu-list { position: static; box-shadow: none; margin-top: 8px; }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.button-row form { margin: 0; }

/* --- Forms ------------------------------------------------------------- */
h2 {
  margin: 28px 0 8px;
  font-size: 1.12rem;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
.stack label { font-weight: 600; font-size: 0.92rem; }
.stack textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: 0.88rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

details {
  margin: 12px 0 20px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
details summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.scope-list {
  margin: 10px 0;
  padding-left: 20px;
  font-size: 0.9rem;
}
.scope-list li { margin-bottom: 3px; }

/* --- Business policies -------------------------------------------------- */
.policy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.policy-actions form { margin: 0; }
.policy-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 12px 0 18px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}
.policy-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.policy-card h3 {
  margin: 0 0 8px;
  font-size: 0.98rem;
}
.policy-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.policy-card li {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.policy-card li:first-child { border-top: 0; }
.policy-card li code { width: 100%; }
.pill-default {
  align-self: center;
  background: var(--ok);
  font-size: 0.65rem;
}
.policy-setup { margin-top: 20px; }
.default-policy-names {
  margin: 10px 0 18px;
  padding-left: 22px;
  font-size: 0.9rem;
}
.policy-form fieldset {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.policy-form legend {
  padding: 0 6px;
  font-weight: 700;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.form-grid input,
.form-grid select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.92rem;
}
.check-row input { margin-top: 5px; }
.field-help {
  margin: 5px 0 0 24px;
  color: var(--muted);
  font-size: 0.85rem;
}
.confirm-row {
  margin: 4px 0 14px;
  font-weight: 600;
}
.policy-production-note { margin: 20px 0 0; }

@media (max-width: 700px) {
  .policy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .policy-actions .btn { width: 100%; }
  .policy-actions form { width: 100%; }
}

/* --- Inventory --------------------------------------------------------- */
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page-heading .lede { margin-bottom: 0; }
.page-heading > div { min-width: 0; }
.page-heading h1,
.page-heading .lede,
.page-heading code { overflow-wrap: anywhere; }
.page-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inventory-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto auto;
  align-items: end;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.inventory-filters label,
.inventory-form label,
.full-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.inventory-filters input,
.inventory-filters select,
.inventory-form input,
.inventory-form select,
.inventory-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.inventory-form textarea {
  min-height: 96px;
  resize: vertical;
}
.inventory-filters input:focus,
.inventory-filters select:focus,
.inventory-form input:focus,
.inventory-form select:focus,
.inventory-form textarea:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(31, 95, 191, 0.16);
}
.filter-clear {
  align-self: center;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
}

.inventory-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.inventory-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.inventory-table th:nth-child(1) { width: 17%; }
.inventory-table th:nth-child(2) { width: 32%; }
.inventory-table th:nth-child(3) { width: 12%; }
.inventory-table th:nth-child(4) { width: 8%; }
.inventory-table th:nth-child(5) { width: 13%; }
.inventory-table th:nth-child(6) { width: 18%; }
.inventory-table th,
.inventory-table td {
  min-width: 0;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.inventory-table td code {
  white-space: normal;
  overflow-wrap: anywhere;
}
.inventory-table th {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.inventory-table tbody tr:last-child td { border-bottom: 0; }
.inventory-table a { color: var(--accent); }
.inventory-item-summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.inventory-item-copy { min-width: 0; }
.inventory-photo-thumb {
  display: block;
  width: 64px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #eef1f5;
  text-decoration: none;
}
.inventory-photo-thumb:focus-visible {
  outline: 3px solid rgba(31, 95, 191, 0.22);
  outline-offset: 2px;
}
.inventory-photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.inventory-photo-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: var(--muted) !important;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.item-title {
  display: block;
  color: var(--ink) !important;
  font-weight: 650;
  text-decoration: none;
}
.item-title:hover { text-decoration: underline; }
.inventory-photo-count {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.status-badge {
  display: inline-block;
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-listed,
.status-active,
.status-sold { background: #ecfdf3; color: #166534; }
.status-drafted { background: #fefce8; color: #854d0e; }
.status-returned,
.status-scrapped { background: #fef2f2; color: #991b1b; }

.empty-state {
  padding: 34px 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: var(--panel);
  text-align: center;
}
.empty-state h2 { margin-top: 0; }
.empty-state p {
  max-width: 55ch;
  margin: 0 auto 18px;
  color: var(--muted);
}

.inventory-form fieldset {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.inventory-form legend {
  padding: 0 6px;
  font-weight: 700;
}
.inventory-form .span-2 { grid-column: 1 / -1; }
.form-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-help-inline {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
}
.field-error {
  color: var(--bad);
  font-size: 0.82rem;
  font-weight: 600;
}
.inventory-form [aria-invalid="true"] {
  border-color: var(--bad);
  background: #fffafa;
}
.form-error-summary {
  margin: 0 0 18px;
}
.form-error-summary ul { margin: 6px 0 0; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.detail-card,
.prose-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.detail-card h2,
.prose-card h2 { margin-top: 0; }
.detail-card dl { margin: 0; }
.detail-card dl div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.detail-card dl div:first-child { border-top: 0; }
.detail-card dt { color: var(--muted); font-size: 0.88rem; }
.detail-card dd { margin: 0; overflow-wrap: anywhere; }
.prose-card { margin-top: 14px; }
.prose-card p {
  margin-bottom: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .inventory-filters { grid-template-columns: 1fr 1fr; }
  .inventory-filters .btn { width: 100%; }
  .form-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-heading { flex-direction: column; }
  .page-heading > .btn,
  .page-actions,
  .page-actions .btn { width: 100%; }
  .page-actions .btn { text-align: center; }
  .inventory-filters { grid-template-columns: 1fr; }
  .inventory-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .inventory-table,
  .inventory-table tbody,
  .inventory-table tr,
  .inventory-table td { display: block; width: 100%; }
  .inventory-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .inventory-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }
  .inventory-table td {
    display: grid;
    grid-template-columns: minmax(84px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
  }
  .inventory-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .inventory-table tbody tr:last-child td:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }
  .inventory-table td:last-child { border-bottom: 0; }
  .form-grid-four { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-actions,
  .form-actions .btn { width: 100%; }
  .form-actions .btn { text-align: center; }
}

/* --- Local inventory photos -------------------------------------------- */
.photo-manager {
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.photo-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.photo-section-heading h2 { margin: 0 0 3px; }
.photo-section-heading p { margin: 0; }
.photo-count {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.photo-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px dashed #b7c2d1;
  border-radius: 8px;
  background: var(--bg);
}
.photo-upload label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.photo-upload input[type="file"] {
  width: 100%;
  min-height: 42px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.photo-upload input[type="file"]:focus,
.photo-order-row input:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(31, 95, 191, 0.16);
}
.span-full { grid-column: 1 / -1; }
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.photo-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}
.photo-card-primary { border-color: var(--accent); }
.photo-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef1f5;
}
.photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.primary-marker {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.photo-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px 0;
  overflow-wrap: anywhere;
}
.photo-meta span { color: var(--muted); font-size: 0.78rem; }
.photo-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 11px 12px;
}
.photo-card-actions form { margin: 0; }
.btn-small { padding: 7px 10px; font-size: 0.82rem; }
.photo-remove {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.photo-remove summary {
  display: inline-block;
  color: var(--bad);
  font-size: 0.82rem;
}
.photo-remove form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 7px;
  background: #fef2f2;
}
.photo-confirm {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #7f1d1d;
  font-size: 0.82rem;
  font-weight: 600;
}
.photo-confirm input { margin-top: 4px; }
.photo-reorder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.photo-reorder h3 { margin: 0 0 2px; font-size: 0.98rem; }
.photo-reorder p { margin: 0; }
.photo-order-list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.photo-order-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  font-size: 0.85rem;
}
.photo-order-row > span { overflow-wrap: anywhere; }
.photo-order-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.photo-order-row input[type="number"] {
  width: 64px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 26px 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}
.photo-empty strong { color: var(--ink); }

@media (max-width: 760px) {
  .photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-order-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .photo-manager { padding: 14px; }
  .photo-upload,
  .photo-reorder { grid-template-columns: 1fr; }
  .photo-upload .btn,
  .photo-reorder .btn { width: 100%; }
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-section-heading { align-items: center; }
  .photo-order-row { align-items: flex-end; }
}

/* --- Local listing drafts ---------------------------------------------- */
.listing-table th:nth-child(1) { width: 16%; }
.listing-table th:nth-child(2) { width: 27%; }
.listing-table th:nth-child(3) { width: 13%; }
.listing-table th:nth-child(4) { width: 12%; }
.listing-table th:nth-child(5) { width: 17%; }
.listing-table th:nth-child(6) { width: 15%; }
.listing-table .muted { display: block; margin-top: 2px; }

.readiness-badge,
.local-only-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.readiness-incomplete {
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.readiness-complete {
  background: #ecfdf3;
  color: #166534;
}
.local-only-badge {
  background: #eef2f7;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.draft-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.draft-source-card h2 { margin: 2px 0; }
.draft-source-card p { margin: 0; color: var(--muted); }
.draft-source-card a { flex: 0 0 auto; color: var(--accent); font-weight: 600; }

.local-save-note {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid #b9c7d8;
  border-radius: 8px;
  background: #f2f6fb;
  color: #29435f;
  font-size: 0.9rem;
}
.listing-form .local-save-note { margin-top: 0; }

.readiness-panel {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  background: #fffcf2;
}
.readiness-panel-complete {
  border-color: #a7e0bd;
  background: #f3fcf6;
}
.readiness-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.readiness-summary h2 { margin: 0 0 3px; }
.readiness-summary p { margin: 0; color: var(--muted); }
.readiness-score {
  flex: 0 0 auto;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid var(--warn-line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--warn-ink);
  font-size: 1.05rem;
  font-weight: 800;
}
.readiness-panel-complete .readiness-score {
  border-color: #70bd8d;
  color: #166534;
}
.readiness-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.readiness-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}
.readiness-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}
.readiness-check-passed .readiness-icon { background: #dcfce7; color: #166534; }
.readiness-check-missing .readiness-icon { background: #fef3c7; color: #92400e; }
.readiness-list strong,
.readiness-list small { display: block; }
.readiness-list strong { font-size: 0.86rem; }
.readiness-list small { margin-top: 2px; color: var(--muted); font-size: 0.75rem; }

.listing-preview {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.listing-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.listing-preview-heading h2 { margin: 0; }
.listing-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 22px;
}
.preview-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.preview-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef1f5;
}
.preview-photo-primary { grid-column: 1 / -1; border-color: var(--accent); }
.preview-photo img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
}
.preview-photo-primary img { height: 360px; }
.preview-photo figcaption {
  padding: 6px 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.preview-no-photo {
  display: grid;
  min-height: 220px;
  place-items: center;
  margin-bottom: 8px;
  border: 1px dashed #b7c2d1;
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
}
.listing-preview-photos > .muted { margin-bottom: 0; }
.listing-preview-copy h3 {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  font-size: 1.25rem;
}
.preview-price { margin: 0 0 14px; font-size: 1.45rem; font-weight: 750; }
.preview-facts { margin: 0; }
.preview-facts div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.preview-facts dt { color: var(--muted); font-size: 0.84rem; }
.preview-facts dd { margin: 0; overflow-wrap: anywhere; }
.preview-description { margin-top: 16px; }
.preview-description h4 { margin: 0 0 5px; }
.preview-description p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .draft-source-card { align-items: flex-start; flex-direction: column; }
  .readiness-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-preview-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .readiness-summary { align-items: flex-start; }
  .readiness-score { width: 54px; height: 54px; }
  .readiness-list { grid-template-columns: 1fr; }
  .preview-photo-grid { grid-template-columns: 1fr; }
  .preview-photo-primary { grid-column: auto; }
  .preview-photo img,
  .preview-photo-primary img { height: 260px; }
}

/* --- Live eBay listings: glass cards ------------------------------------
   These mirror what a buyer actually sees, so the visual language is
   deliberately different from the local-data tables elsewhere: a soft,
   translucent "glass" card with a real product photo, rather than a plain
   key/value row. */
.listing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.listing-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.listing-card:hover,
.listing-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  outline: none;
}
.listing-card-drift { border-color: rgba(217, 119, 6, 0.55); }
.listing-card-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(238, 241, 245, 0.6);
}
.listing-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.listing-card-photo-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.listing-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.listing-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 14px;
}
.listing-card-title {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.listing-card-price {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.listing-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.76rem;
}
.listing-card-sku {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .listing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* --- Live listing detail page: styled to echo the real eBay item page -- */
.live-listing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 26px;
  align-items: start;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 32px rgba(16, 24, 40, 0.1);
}
.live-listing-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-listing-main-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(238, 241, 245, 0.7);
  border: 1px solid var(--line);
}
.live-listing-main-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.live-listing-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}
.live-listing-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(238, 241, 245, 0.7);
}
.live-listing-info h1 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  line-height: 1.3;
}
.live-listing-price {
  margin: 0 0 10px;
  font-size: 1.9rem;
  font-weight: 800;
}
.live-listing-facts {
  margin: 14px 0;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
}
.live-listing-facts dl { margin: 0; }
.live-listing-facts div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.live-listing-facts div:first-child { border-top: 0; }
.live-listing-facts dt { color: var(--muted); font-size: 0.84rem; }
.live-listing-facts dd { margin: 0; overflow-wrap: anywhere; }
.live-listing-cta {
  display: block;
  margin-top: 4px;
}
.live-listing-description {
  margin-top: 22px;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.live-listing-description h2 { margin-top: 0; }
.live-listing-ended {
  display: inline-block;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .live-listing { grid-template-columns: 1fr; padding: 16px; }
}


/* --- Research: pick an existing item via dropdown ----------------------- */
.research-select-card {
  margin: 4px 0 26px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.research-select-card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.research-select-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
}
.research-select-form label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.research-select-form select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.research-select-form select:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(31, 95, 191, 0.16);
}

@media (max-width: 560px) {
  .research-select-form { grid-template-columns: 1fr; }
  .research-select-form .btn { width: 100%; }
}

/* --- Inventory: glass cards ---------------------------------------------
   Same visual language as the eBay listing cards, so the two catalogs of
   "things you have" and "things eBay shows" read as one family. */
.inventory-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.inventory-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.inventory-card:hover,
.inventory-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  outline: none;
}
.inventory-card-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(238, 241, 245, 0.6);
}
.inventory-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.inventory-card-photo-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.inventory-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.inventory-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px 14px;
}
.inventory-card-title {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.inventory-card-cost {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.inventory-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.76rem;
}
.inventory-card-sku {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .inventory-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Clickable dashboard charts: the whole chart opens its data breakdown. */
.chart-link {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.chart-link:hover, .chart-link:focus-visible { background: var(--accent-tint); outline: 2px solid var(--accent); }

/* Listing draft creation: manual vs AI paths side by side. */
.draft-start { margin-bottom: 28px; }
.draft-start-grid { margin-top: 12px; }
.draft-start-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.draft-start-form select { width: 100%; padding: 8px; }
.draft-start-form .btn { align-self: flex-start; }

/* Orders: clickable rows and the financial breakdown dialog. */
.order-row { cursor: pointer; }
.order-row:hover, .order-row:focus-visible { background: var(--accent-tint); }
.order-item-title {
  display: block;
  font-weight: 600;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-item-sku { display: block; margin-top: 2px; }

.order-dialog {
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 24px;
  width: min(720px, 92vw);
  max-height: 88vh;
}
.order-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.order-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.order-dialog-head h2 { margin: 4px 0 0 0; font-size: 1.2rem; }
.order-dialog-profit {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 16px 0;
  font-size: 1.05rem;
}
.order-dialog-profit strong { font-size: 1.3rem; }
.order-profit-positive { background: #ecfdf3; color: #166534; }
.order-profit-negative { background: #fef2f2; color: #991b1b; }

/* Portrait phones: the 8-column orders table becomes stacked cards, same
   pattern as the inventory table. The data-label attributes are already in
   the markup; this is what reads them. */
@media (max-width: 700px) {
  .order-table,
  .order-table tbody,
  .order-table tr,
  .order-table td { display: block; width: 100%; }
  .order-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .order-table tr.order-row {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
  }
  .order-table td {
    display: grid;
    grid-template-columns: minmax(84px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
  }
  .order-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .order-table td:last-child { border-bottom: 0; }
  .order-item-title { white-space: normal; max-width: none; }
}

/* Settings: AI instructions editor and section spacing. */
.settings-section { margin-bottom: 32px; }
.policy-form textarea {
  width: 100%;
  font: inherit;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  resize: vertical;
}

/* eBay activity line on inventory cards. */
.inventory-card-activity { color: var(--accent); font-weight: 600; }

/* Archive/delete lifecycle section. */
.lifecycle-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.lifecycle-form select { padding: 6px; }
.lifecycle-form .btn { align-self: flex-start; }
.lifecycle-danger { border: 1px solid #fecaca; }
.filter-archived-toggle { margin-left: auto; align-self: center; }

/* Home-search research: live progress and results. */
.research-progress { text-align: center; padding: 40px 24px; }
.progress-track {
  height: 14px;
  background: var(--line);
  border-radius: 7px;
  overflow: hidden;
  margin: 20px auto;
  max-width: 480px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--flame));
  border-radius: 7px;
  transition: width 0.6s ease;
}
.progress-note { font-size: 1.05rem; color: #334155; }
.search-photo-row { display: flex; gap: 10px; flex-wrap: wrap; }
.search-photo-thumb img {
  width: 110px; height: 110px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line);
}
.research-result { margin-top: 20px; }
.research-price-headline strong { font-size: 1.6rem; color: #166534; }
.research-add-form {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}

/* Inventory list view and display toggle. */
.display-toggle { display: inline-flex; gap: 4px; align-self: center; }
.inventory-list-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
}
.order-link-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.order-link-form select { padding: 6px; max-width: 100%; }
.order-link-form .btn { align-self: flex-start; }

/* Facebook Marketplace draft pages. */
.fbm-form { max-width: 720px; }
.fbm-description { white-space: pre-wrap; }
.field-error { color: #991b1b; font-size: 0.9rem; display: block; margin-top: 4px; }
.copy-btn { margin-left: 8px; }

/* Cross-platform reconcile actions. */
.reconcile-actions { display: flex; gap: 8px; align-items: center; }
.reconcile-actions form { display: inline; }

/* Ask-AI insight blocks. */
.ai-insight-card { margin: 18px 0; border-left: 4px solid var(--flame); }
.ai-insight-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.ai-insight-actions {
  display: flex;
  gap: 8px;
}
.ai-insight-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.ai-insight-content {
  white-space: pre-wrap;
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  margin-top: 10px;
  line-height: 1.5;
}

/* Login pages and the nav account block. */
.login-wrap { display: flex; justify-content: center; padding: 48px 16px; }
.login-card { max-width: 420px; width: 100%; }
.nav-account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-account form { margin: 0; }

/* Admin user management action buttons. */
.user-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.user-admin-actions form { margin: 0; }

/* Settings: left-nav sectioned layout. */
.settings-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.settings-nav {
  position: sticky;
  top: 16px;
  border-right: 1px solid var(--line);
  padding-right: 16px;
}
.settings-nav h1 { font-size: 1.4rem; margin: 0 0 14px 0; }
.settings-nav nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
  font-weight: 500;
}
.settings-nav-link:hover { background: #f1f5f9; }
.settings-nav-active {
  background: #e8eef7;
  color: #1d4ed8;
  font-weight: 600;
}
.settings-content { min-width: 0; }
@media (max-width: 820px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 12px 0;
  }
  .settings-nav nav { flex-direction: row; flex-wrap: wrap; }
}

/* Brand mark and the compact environment pill that replaced the banner. */
.brand { display: inline-flex; align-items: center; gap: 10px; }
/* The medallion is a transparent-background circle; no radius or crop needed. */
.brand-mark { display: block; filter: drop-shadow(0 1px 3px rgba(72, 33, 2, 0.3)); }
.env-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}
.env-pill-prod { background: #b91c1c; color: #fff; }
.env-pill-sbx { background: #e2e8f0; color: #334155; }


/* Home page: search-first entry point.
   The linen bleeds edge to edge - no boxes inside boxes. The medallion,
   tagline, and a single floating search pill sit directly on the canvas. */
main.home-main {
  max-width: none;
  padding: 0;
}

.home-container {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  /* Matches the linen canvas of the Bolo Hound medallion so the artwork
     melts into the page. */
  background: linear-gradient(160deg, #ece3d4 0%, #dccab6 100%);
}

.search-content {
  text-align: center;
  max-width: 640px;
  width: 100%;
}

.search-logo {
  margin-bottom: 8px;
}

.search-banner {
  width: 100%;
  max-width: 400px;
  height: auto;
  /* Transparent PNG: drop-shadow follows the medallion's outline instead
     of drawing a square box around it. */
  filter: drop-shadow(0 10px 24px rgba(72, 33, 2, 0.35));
}

/* Keeps the page heading for screen readers while the banner carries it visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.search-subtitle {
  font-size: 1.05rem;
  /* Walnut brown from the medallion carving; reads richly on the linen. */
  color: #5b3212;
  margin: 18px 0 28px 0;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* One white pill floating on the linen - the only "box" on the page. */
.search-input-wrapper {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 12px 12px 12px 24px;
  margin-bottom: 22px;
  border: 1px solid rgba(91, 50, 18, 0.12);
  box-shadow: 0 6px 24px rgba(72, 33, 2, 0.16);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.search-input-wrapper:hover,
.search-input-wrapper:focus-within {
  border-color: var(--flame);
  box-shadow: 0 8px 30px rgba(72, 33, 2, 0.24);
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  padding: 10px 12px;
  color: var(--ink);
  outline: none;
}

.search-input::placeholder {
  color: var(--muted);
}

.search-icon {
  margin-right: 8px;
  color: var(--muted);
}

.photo-upload-label {
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  position: relative;
  color: var(--muted);
}

.photo-upload-label:hover {
  background: var(--flame);
  color: #fff;
}

.photo-upload-input {
  display: none;
}

.photo-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--bad);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
}

.search-actions {
  text-align: center;
}

.recent-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.action-link {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Walnut, matching the medallion carving; these sit on the linen. */
  color: #5b3212;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.2s;
}

.action-link:hover {
  background: rgba(91, 50, 18, 0.1);
}

@media (max-width: 768px) {
  .search-banner { max-width: 300px; }
  .search-input-wrapper { padding-left: 18px; }
  .recent-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
}


/* Dashboard KPI hero cards */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kpi-row { grid-template-columns: 1fr; }
}

.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kpi-card:hover {
  border-color: var(--flame);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12);
}
.kpi-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--flame);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
.kpi-alert {
  border-color: var(--bad);
  background: #fff5f5;
}
.kpi-alert .kpi-value { color: var(--bad); }