:root {
  --bg: #f4f6fb;
  --bg-elev: #ffffff;
  --fg: #1a2b48;
  --fg-soft: #5a6b86;
  --fg-mute: #8696b0;
  --accent: #0b3d91;       /* 民航蓝 */
  --accent-soft: #e7eef9;
  --accent-2: #d72d2a;     /* 国航红 */
  --border: #e3e7f0;
  --shadow: 0 2px 6px rgba(20,40,80,0.06), 0 12px 28px rgba(20,40,80,0.08);
  --radius: 14px;
  --radius-sm: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas, monospace;
  --safe-bottom: env(safe-area-inset-bottom);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1320;
    --bg-elev: #161d2e;
    --fg: #e8edf7;
    --fg-soft: #a9b3c7;
    --fg-mute: #6a7794;
    --accent: #6fa0ff;
    --accent-soft: #1f2c4a;
    --accent-2: #ff5e5b;
    --border: #243049;
    --shadow: 0 2px 6px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.45);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Hiragino Sans GB", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: calc(64px + var(--safe-bottom));
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Top bar ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px calc(12px);
  background: linear-gradient(135deg, var(--accent) 0%, #1957b8 50%, #2575d6 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.brand { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.brand .logo { font-size: 22px; line-height: 1; }
.brand h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.brand .sub {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.icon-btn {
  margin-left: auto;
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-style: italic;
  font-family: serif;
  font-size: 16px;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,0.12); }

/* ===== Main layout ===== */
main { max-width: 720px; margin: 0 auto; padding: 12px; }

/* ===== Search card ===== */
.search-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}
.search-row {
  position: relative;
  display: flex;
}
.search-row input {
  width: 100%;
  padding: 12px 38px 12px 14px;
  font-size: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.clear-btn {
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--fg-mute);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.clear-btn:hover { background: var(--accent-soft); color: var(--fg); }
.clear-btn[hidden] { display: none; }

.filters {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.filters select {
  flex: 1;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}

.status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-soft);
}
.status.error { color: var(--accent-2); }

/* ===== Result list ===== */
.result-box { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.result-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.result-card .row1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.reg {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
  word-break: keep-all;
}
.region-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.region-tag.hk    { background: #fde2e2; color: #b8253b; }
.region-tag.tw    { background: #e5f4e2; color: #2e7d32; }
.region-tag.macau { background: #e8e2f4; color: #5b3a8b; }
.region-tag.biz   { background: #fff2d6; color: #8a5a00; }
.region-tag.gov   { background: #e0e0e0; color: #444; }
.region-tag.us       { background: #dcebfd; color: #1851a8; }
.region-tag.ca       { background: #ffe7d6; color: #b34a00; }
.region-tag.eu       { background: #e7e3fb; color: #4530a8; }
.region-tag.uk       { background: #e0e8fa; color: #1e3a7c; }
.region-tag.jp       { background: #ffe0e6; color: #c92a4d; }
.region-tag.kr       { background: #e7f0ff; color: #1c4d99; }
.region-tag.sea      { background: #e2f5e9; color: #2a7d4f; }
.region-tag.in       { background: #fff0d6; color: #a35a00; }
.region-tag.me       { background: #f6ebd1; color: #8a6a1a; }
.region-tag.oceania  { background: #d8efea; color: #1e6e60; }
.region-tag.ru       { background: #f3dada; color: #8a2929; }
.region-tag.latam    { background: #fde7d2; color: #9a4a05; }
.region-tag.africa   { background: #f5e7d0; color: #8a5e1a; }
.region-tag.other    { background: var(--border); color: var(--fg-soft); }
@media (prefers-color-scheme: dark) {
  .region-tag.hk    { background: rgba(216,48,72,0.25); color: #ff8b9c; }
  .region-tag.tw    { background: rgba(60,170,80,0.22); color: #95dba0; }
  .region-tag.macau { background: rgba(120,80,200,0.25); color: #c9b3ff; }
  .region-tag.biz   { background: rgba(190,140,30,0.22); color: #ffd089; }
  .region-tag.gov   { background: rgba(180,180,180,0.18); color: #d8d8d8; }
  .region-tag.us       { background: rgba(70,140,255,0.22); color: #a8c8ff; }
  .region-tag.ca       { background: rgba(220,120,40,0.22); color: #ffc28a; }
  .region-tag.eu       { background: rgba(140,110,255,0.25); color: #c5b3ff; }
  .region-tag.uk       { background: rgba(80,120,220,0.25); color: #a8c0ff; }
  .region-tag.jp       { background: rgba(220,80,110,0.22); color: #ffa8b8; }
  .region-tag.kr       { background: rgba(70,130,220,0.22); color: #a5c5ff; }
  .region-tag.sea      { background: rgba(60,180,110,0.22); color: #92e5b3; }
  .region-tag.in       { background: rgba(220,170,40,0.22); color: #ffd58a; }
  .region-tag.me       { background: rgba(190,150,60,0.22); color: #f0d088; }
  .region-tag.oceania  { background: rgba(50,180,160,0.22); color: #90e2d2; }
  .region-tag.ru       { background: rgba(220,90,90,0.22); color: #ffaaa8; }
  .region-tag.latam    { background: rgba(220,140,40,0.22); color: #ffc888; }
  .region-tag.africa   { background: rgba(180,140,80,0.22); color: #e8c898; }
  .region-tag.other    { background: var(--border); color: var(--fg-soft); }
}

/* ===== Alliance badge ===== */
.alliance-tag {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.alliance-tag.star::before     { content: '★'; }
.alliance-tag.skyteam::before  { content: '✈'; }
.alliance-tag.oneworld::before { content: '◐'; }
.alliance-tag.star      { background: #ffe88a; color: #6e4f00; border-color: #d9b338; }
.alliance-tag.skyteam   { background: #cfe0ff; color: #142d6e; border-color: #6e8fd4; }
.alliance-tag.oneworld  { background: #ffc8d9; color: #7a1238; border-color: #d96088; }
@media (prefers-color-scheme: dark) {
  .alliance-tag.star      { background: rgba(220,170,30,0.32); color: #ffe089; border-color: rgba(220,170,30,0.7); }
  .alliance-tag.skyteam   { background: rgba(70,120,220,0.32); color: #a8c5ff; border-color: rgba(120,160,220,0.65); }
  .alliance-tag.oneworld  { background: rgba(220,60,120,0.28); color: #ff9bba; border-color: rgba(220,80,140,0.65); }
}

/* ===== Service status badge ===== */
.status-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid;
  background: #ececec;
  color: #6a6a6a;
  border-color: #c8c8c8;
}
.status-tag.retired {
  background: #f0e6e6;
  color: #8a3a3a;
  border-color: #d8a8a8;
}
.status-tag.inactive {
  background: #f5f0e0;
  color: #7a6320;
  border-color: #d4c787;
}
@media (prefers-color-scheme: dark) {
  .status-tag.retired {
    background: rgba(180,70,70,0.18);
    color: #ff9999;
    border-color: rgba(220,90,90,0.45);
  }
  .status-tag.inactive {
    background: rgba(180,150,30,0.16);
    color: #e8d080;
    border-color: rgba(200,170,50,0.4);
  }
}

/* Retired card: subtle visual de-emphasis */
.result-card.is-retired {
  opacity: 0.78;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
}
.result-card.is-retired .reg {
  color: var(--fg-soft);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(160,80,80,0.55);
}
.result-card.is-inactive {
  opacity: 0.88;
}
.result-card.is-inactive .reg {
  color: var(--fg-soft);
}
  .region-tag.tw    { background: rgba(60,170,80,0.22); color: #95dba0; }
  .region-tag.macau { background: rgba(120,80,200,0.25); color: #c9b3ff; }
  .region-tag.biz   { background: rgba(190,140,30,0.22); color: #ffd089; }
  .region-tag.gov   { background: rgba(180,180,180,0.18); color: #d8d8d8; }
  .region-tag.us       { background: rgba(70,140,255,0.22); color: #a8c8ff; }
  .region-tag.ca       { background: rgba(220,120,40,0.22); color: #ffc28a; }
  .region-tag.eu       { background: rgba(140,110,255,0.25); color: #c5b3ff; }
  .region-tag.uk       { background: rgba(80,120,220,0.25); color: #a8c0ff; }
  .region-tag.jp       { background: rgba(220,80,110,0.22); color: #ffa8b8; }
  .region-tag.kr       { background: rgba(70,130,220,0.22); color: #a5c5ff; }
  .region-tag.sea      { background: rgba(60,180,110,0.22); color: #92e5b3; }
  .region-tag.in       { background: rgba(220,170,40,0.22); color: #ffd58a; }
  .region-tag.me       { background: rgba(190,150,60,0.22); color: #f0d088; }
  .region-tag.oceania  { background: rgba(50,180,160,0.22); color: #90e2d2; }
  .region-tag.ru       { background: rgba(220,90,90,0.22); color: #ffaaa8; }
  .region-tag.latam    { background: rgba(220,140,40,0.22); color: #ffc888; }
  .region-tag.africa   { background: rgba(180,140,80,0.22); color: #e8c898; }
  .region-tag.other    { background: var(--border); color: var(--fg-soft); }
}

.line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--fg-soft); }
.line .label { color: var(--fg-mute); min-width: 4em; flex-shrink: 0; }
.line .val { color: var(--fg); }
.line .val.b { font-weight: 600; }
.line .small { color: var(--fg-mute); font-size: 12px; }

.cabin {
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.cabin .layout { font-family: var(--mono); font-weight: 600; color: var(--accent); letter-spacing: 0.3px; }
.cabin .total  { color: var(--fg-soft); font-size: 12px; }
.cabin .notes  { color: var(--fg-soft); font-size: 12px; margin-top: 4px; }
.cabin .src    { float: right; font-size: 11px; color: var(--fg-mute); }
.cabin .src.fallback { color: #b06a00; }
.cabin .cabin-fix {
  float: right;
  margin-left: 6px;
  font-size: 10px;
  color: var(--fg-mute);
  text-decoration: none;
  opacity: 0.65;
}
.cabin .cabin-fix:hover { color: var(--accent-2); opacity: 1; text-decoration: underline; }

/* ----- Cabin proportional bar ----- */
.cabin-bar {
  display: flex;
  margin-top: 8px;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.cabin-bar .cb-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
}
.cabin-bar .cb-seg span {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(0,0,0,0.35);
  padding: 0 2px;
}
.cabin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-soft);
}
.cabin-legend .cs { display: inline-flex; align-items: center; gap: 4px; }
.cabin-legend .sw {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}

/* ----- Photo slot ----- */
.photo-slot {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
  margin-top: 2px;
}
.photo-slot a { display: block; line-height: 0; }
.photo-slot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.photo-slot .photo-credit {
  position: absolute;
  right: 6px; bottom: 6px;
  font-size: 10px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.2px;
}

/* ----- Operator link ----- */
.op-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--fg-mute);
  cursor: pointer;
}
.op-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.op-source {
  font-size: 11px;
  color: var(--fg-mute);
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px dashed var(--border);
  border-radius: 4px;
}
.line .val .unmatched { color: var(--fg-mute); font-style: italic; }

/* ----- External link pills ----- */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.link-pill {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.link-pill:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.link-pill.aerolopa:hover  { background: #fde6ee; border-color: #e07090; color: #a81a4d; }
.link-pill.fr24:hover      { background: #fff4d6; border-color: #d8a040; color: #8a5a00; }
.link-pill.adsbx:hover     { background: #e6f0ff; border-color: #4080d0; color: #1851a8; }
.link-pill.jetphotos:hover { background: #e2f5e9; border-color: #4a9e5e; color: #2a7d4f; }
@media (prefers-color-scheme: dark) {
  .link-pill.aerolopa:hover  { background: rgba(220,60,120,0.18); border-color: rgba(220,80,140,0.5); color: #ff9bba; }
  .link-pill.fr24:hover      { background: rgba(220,170,40,0.18); border-color: rgba(220,170,40,0.55); color: #ffd089; }
  .link-pill.adsbx:hover     { background: rgba(70,120,220,0.20); border-color: rgba(120,160,220,0.55); color: #a8c5ff; }
  .link-pill.jetphotos:hover { background: rgba(60,170,80,0.20); border-color: rgba(60,170,80,0.55); color: #95dba0; }
}

.hint {
  text-align: center;
  color: var(--fg-mute);
  font-size: 13px;
  padding: 16px;
}

/* ===== Suggestion chips ===== */
.suggest-list { margin-top: 16px; }
.section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-mute);
  margin: 16px 0 6px;
  letter-spacing: 0.3px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.1s;
}
.chip .count { color: var(--fg-mute); font-size: 11px; }
.chip:hover, .chip:active { background: var(--accent-soft); border-color: var(--accent); }

/* ===== Dialog ===== */
.about-dialog {
  border: none;
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--fg);
  max-width: 92vw;
  width: 480px;
  padding: 20px 22px 16px;
  box-shadow: var(--shadow);
}
.about-dialog::backdrop { background: rgba(10,18,40,0.5); }
.about-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.about-dialog h3 { margin: 14px 0 4px; font-size: 14px; color: var(--fg-soft); }
.about-dialog p, .about-dialog li { font-size: 14px; line-height: 1.55; }
.about-dialog ul { padding-left: 18px; margin: 4px 0; }
.about-dialog .meta-line {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--fg-mute);
}
.about-dialog .primary {
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* ===== Footer ===== */
.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: var(--fg-mute);
  padding: 10px 12px calc(8px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 40;
}

/* ===== Responsive tweaks ===== */
@media (min-width: 720px) {
  .brand h1 { font-size: 20px; }
  .topbar { padding: 18px 24px; }
  main { padding: 18px; }
  .reg { font-size: 26px; }
}

/* Desktop two-column result grid. Keeps search card full-width but lays out
 * cards side-by-side once there's room. */
@media (min-width: 1000px) {
  main { max-width: 1080px; }
  .result-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .result-box > .hint { grid-column: 1 / -1; }
}

/* Age badge */
.age-badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: 1px;
  background: var(--accent-soft);
  color: var(--fg-soft);
}
.age-badge.age-new { background: #e6f3ec; color: #1f6a45; }
.age-badge.age-mid { background: #fff3da; color: #8a6112; }
.age-badge.age-old { background: #fde2e2; color: #8a3a3a; }
@media (prefers-color-scheme: dark) {
  .age-badge.age-new { background: #173d2c; color: #6ed09c; }
  .age-badge.age-mid { background: #3e3015; color: #e8c46a; }
  .age-badge.age-old { background: #3e1f1f; color: #ff8a87; }
}
.next-reg { font-family: var(--mono); }

/* Airline logo (tiny, on the operator row) */
.op-logo {
  height: 18px;
  width: auto;
  vertical-align: -3px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--bg);
  padding: 1px 2px;
  border: 1px solid var(--border);
}

/* Mini "open dashboard" buttons */
.mini-btn {
  font-size: 11px;
  padding: 2px 7px;
  margin-left: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
}
.mini-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* B-registration block hint */
.b-hint { color: var(--fg-mute); font-style: italic; }

/* "Same operator + type" link at the bottom of each card */
.same-type-link {
  margin-top: 8px;
  font-size: 13px;
  text-align: right;
}
.same-type-link a { color: var(--accent); }

/* ===== Detail dialog (fleet dashboard / type encyclopedia) ===== */
.detail-dialog {
  max-width: 640px;
  width: calc(100% - 24px);
}
.detail-dialog h2 { margin: 0 0 4px; font-size: 20px; }
.detail-dialog h3 { margin: 16px 0 6px; font-size: 13px; color: var(--fg-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-close, .photo-close {
  position: absolute;
  top: 8px; right: 10px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--fg-mute);
  cursor: pointer;
  padding: 0 6px;
}
.detail-close:hover, .photo-close:hover { color: var(--fg); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 10px 0 4px;
}
.stat {
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
}
.stat-n { font-size: 18px; font-weight: 700; color: var(--accent); }
.stat-l { font-size: 11px; color: var(--fg-soft); margin-top: 2px; }

.bars { display: flex; flex-direction: column; gap: 4px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr 40px;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.bar-label { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track {
  height: 14px;
  background: var(--bg);
  border-radius: 3px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #2575d6);
  transition: width 0.3s;
}
.bar-fill.age    { background: linear-gradient(90deg, #1f8a55, #e8c46a, #d72d2a); }
.bar-fill.region { background: linear-gradient(90deg, #6fa0ff, #1957b8); }
.bar-count { font-family: var(--mono); font-size: 12px; color: var(--fg-soft); }

/* ===== Photo dialog (full-screen image viewer) ===== */
.photo-dialog {
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.photo-dialog::backdrop { background: rgba(0,0,0,0.85); }
.photo-dialog img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  height: auto;
  border-radius: 6px;
}
.photo-dialog .photo-close {
  top: -4px; right: -4px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  width: 32px; height: 32px;
  line-height: 28px;
  text-align: center;
  padding: 0;
}
.photo-meta {
  text-align: center;
  color: #fff;
  font-size: 12px;
  padding: 8px 4px;
}
.photo-meta a { color: #cfe0ff; }
.photo-slot img { cursor: zoom-in; }

.recent-chip { background: var(--bg); }

/* hide spinner-style number controls in iOS */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }