/* ───── Layout scaffolding ───── */
    body { padding-bottom: 100px; }

    /* Top bar */
    .ap-topbar {
      background: var(--ap-navy-800);
      color: #fff;
      padding: 14px 18px 16px;
    }
    .ap-topbar-row { display: flex; align-items: center; gap: 14px; }
    .ap-back {
      background: transparent; border: none; color: #fff;
      font-size: 22px; line-height: 1; padding: 4px 6px;
      cursor: pointer; text-decoration: none;
    }
    .ap-title-wrap { flex: 1; min-width: 0; }
    .ap-title-row { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
    .ap-code {
      font-family: var(--font-mono); font-weight: 700; font-size: 22px;
      letter-spacing: -0.5px; color: #fff;
    }
    .ap-city {
      font-size: 14px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis;
    }
    .ap-meta {
      font-size: 11px; font-family: var(--font-mono);
      opacity: 0.65; margin-top: 2px; letter-spacing: 0.3px;
    }
    .ap-header-pill {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.15);
      color: #fff; font-size: 12px; font-weight: 600;
      padding: 7px 12px; border-radius: 999px;
      cursor: pointer; text-decoration: none; white-space: nowrap;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .ap-admin-btn {
      margin-left: 8px;
      background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
      color: #fff; font-size: 11px; padding: 5px 10px; border-radius: 6px;
      cursor: pointer; font-weight: 600;
    }
    .ap-admin-btn.active { background: var(--ap-orange-500); border-color: var(--ap-orange-500); }

    /* Currency/tip strip */
    .ap-fx-strip {
      background: var(--ap-navy-700); color: #fff;
      padding: 8px 18px;
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px; font-family: var(--font-mono);
    }
    .ap-fx-strip .ex-unit { opacity: 0.6; margin-right: 4px; }
    .ap-fx-strip .ex-updated { opacity: 0.55; font-size: 11px; }

    /* Tip calc (collapsible) */
    .tip-calc-wrap {
      margin: 12px 16px 0;
      background: var(--surface);
      border: 1px solid var(--ink-100);
      border-radius: var(--r-md);
      overflow: hidden;
    }
    .tip-calc-toggle {
      width: 100%; background: transparent; border: none;
      padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
      cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-800);
    }
    .tip-calc-toggle .tip-arrow { transition: transform var(--dur) var(--ease); font-size: 11px; color: var(--ink-500); }
    .tip-calc-toggle.open .tip-arrow { transform: rotate(90deg); }
    .tip-calc-body {
      display: none;
      padding: 0 14px 14px;
      border-top: 1px dashed var(--ink-200);
    }
    .tip-calc-body.open { display: block; }
    .tip-input-row {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 0;
    }
    .tip-input-row label {
      font-size: 12px; color: var(--ink-500); font-weight: 600;
    }
    .tip-input-row input {
      flex: 1; padding: 8px 10px; border-radius: var(--r-sm);
      border: 1px solid var(--ink-200); background: var(--ink-050);
      font-size: 14px; outline: none;
    }
    .tip-input-row input:focus { border-color: var(--ap-navy-600); background: #fff; }
    .tip-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    }
    .tip-item {
      background: var(--ink-050); border-radius: var(--r-sm);
      padding: 8px 4px; text-align: center;
    }
    .tip-pct {
      font-size: 10px; font-family: var(--font-mono);
      font-weight: 700; color: var(--ap-orange-500); letter-spacing: 0.5px;
    }
    .tip-usd {
      font-size: 13px; font-weight: 700; font-family: var(--font-mono);
      margin-top: 2px; color: var(--ink-900);
    }
    .tip-krw {
      font-size: 10px; color: var(--ink-500); font-family: var(--font-mono);
      margin-top: 1px;
    }

    /* Hotel card */
    .ap-hotel {
      margin: 14px 16px 0;
      background: var(--surface);
      border: 1px solid var(--ink-100);
      border-radius: var(--r-lg);
      padding: 16px;
      box-shadow: var(--shadow-sm);
    }
    .ap-hotel-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    }
    .ap-hotel-kicker {
      font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
      color: var(--ap-orange-500); font-family: var(--font-mono);
    }
    .ap-hotel-name {
      font-size: 16px; font-weight: 700; margin-top: 4px;
      letter-spacing: -0.2px; color: var(--ink-900);
    }
    .ap-hotel-addr {
      font-size: 12px; color: var(--ink-500); margin-top: 3px;
      font-family: var(--font-mono); line-height: 1.4;
      word-break: break-all;
    }
    .ap-hotel-phone {
      background: var(--ap-navy-050);
      border: 1px solid var(--ap-navy-100);
      color: var(--ap-navy-800);
      padding: 6px 10px; border-radius: var(--r-sm);
      font-size: 11px; font-weight: 700; cursor: pointer;
      text-decoration: none; white-space: nowrap;
    }
    /* Contact row: 호텔 직통 + 비상 연락 */
    .ap-hotel-contacts {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 10px;
    }
    .ap-contact-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-radius: var(--r-sm);
      font-size: 12px; font-weight: 700;
      text-decoration: none; cursor: pointer;
      border: 1px solid transparent;
      font-family: inherit;
    }
    .ap-contact-pill.phone {
      background: var(--ap-navy-050);
      border-color: var(--ap-navy-100);
      color: var(--ap-navy-800);
      font-family: var(--font-mono);
    }
    .ap-contact-pill.phone:hover { background: var(--ap-navy-100); }
    .ap-contact-pill.sos {
      background: #fff1ec;
      border-color: #ffc1ac;
      color: #c0301a;
    }
    .ap-contact-pill.sos:hover { background: #ffe2d4; border-color: var(--ap-orange-500); }

    /* SOS modal */
    .ap-sos-bg {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(10,35,64,0.55);
      align-items: flex-end; justify-content: center;
    }
    .ap-sos-bg.open { display: flex; }
    .ap-sos {
      background: var(--surface);
      width: 100%; max-width: 520px;
      max-height: 90vh; overflow-y: auto;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
      padding: 18px 20px 28px;
      box-shadow: var(--shadow-lg);
      animation: ap-sos-slide 0.22s var(--ease) both;
    }
    @keyframes ap-sos-slide {
      from { transform: translateY(40px); opacity: 0.6; }
      to   { transform: translateY(0); opacity: 1; }
    }
    .ap-sos-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 14px;
    }
    .ap-sos-title {
      font-size: 16px; font-weight: 700;
      color: var(--ink-900); letter-spacing: -0.2px;
    }
    .ap-sos-close {
      background: var(--ink-050);
      border: none; border-radius: 999px;
      width: 30px; height: 30px;
      font-size: 14px; cursor: pointer;
      color: var(--ink-700);
    }
    .ap-sos-section {
      margin-top: 14px; padding-top: 14px;
      border-top: 1px solid var(--ink-100);
    }
    .ap-sos-section:first-of-type { border-top: none; padding-top: 0; }
    .ap-sos-kicker {
      font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
      color: var(--ap-orange-500); font-family: var(--font-mono);
      margin-bottom: 6px;
    }
    .ap-sos-name {
      font-size: 13px; color: var(--ink-700); font-weight: 600;
      margin-bottom: 6px;
    }
    .ap-sos-row {
      display: flex; justify-content: space-between; align-items: center;
      gap: 10px; padding: 7px 0;
    }
    .ap-sos-row + .ap-sos-row { border-top: 1px dashed var(--ink-100); }
    .ap-sos-label {
      font-size: 12px; color: var(--ink-700);
      flex: 1; min-width: 0;
    }
    .ap-sos-num {
      font-family: var(--font-mono); font-weight: 700;
      font-size: 14px; color: var(--ap-navy-800);
      text-decoration: none; letter-spacing: 0.2px;
      padding: 4px 10px; border-radius: var(--r-sm);
      background: var(--ink-050);
      white-space: nowrap;
    }
    .ap-sos-num.urgent {
      background: #fff1ec; color: #c0301a;
      font-size: 16px;
    }
    .ap-sos-footnote {
      margin-top: 16px;
      font-size: 10px; color: var(--ink-500);
      font-family: var(--font-mono); line-height: 1.5;
      text-align: center;
    }
    .ap-hotel-fac {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 6px; margin-top: 12px; padding-top: 12px;
      border-top: 1px dashed var(--ink-200);
    }
    .ap-hotel-fac .cell { text-align: center; }
    .ap-hotel-fac .l {
      font-size: 9px; color: var(--ink-500); font-weight: 600;
      letter-spacing: 0.5px; font-family: var(--font-mono);
      text-transform: uppercase;
    }
    .ap-hotel-fac .v {
      font-size: 13px; font-weight: 700; margin-top: 3px; color: var(--ink-900);
    }
    .ap-hotel-fac .v.off { color: var(--ink-300); }
    .ap-hotel-restos {
      margin-top: 10px; padding-top: 10px;
      border-top: 1px dashed var(--ink-200);
      font-size: 12px; color: var(--ink-600); line-height: 1.5;
      font-family: var(--font-mono);
    }
    .ap-transport {
      margin-top: 12px; padding-top: 12px;
      border-top: 1px dashed var(--ink-200);
      display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    }
    .ap-transport .l {
      font-size: 11px; color: var(--ink-500); font-weight: 600;
      margin-right: 4px;
    }
    .ap-ride {
      border: none; padding: 6px 12px; border-radius: var(--r-sm);
      font-size: 11px; font-weight: 700; cursor: pointer;
      text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    }
    .ap-ride.uber  { background: #000; color: #fff; }
    .ap-ride.lyft  { background: #EA0B8C; color: #fff; }
    .ap-ride.grab  { background: #00B14F; color: #fff; }
    .ap-ride.map   { background: var(--ap-orange-500); color: #fff; }

    .ap-transport-note {
      flex-basis: 100%; font-size: 11px; color: var(--ink-500);
      font-family: var(--font-mono); margin-top: 4px; line-height: 1.5;
    }

    /* Segmented tabs */
    .tab-bar {
      position: sticky; top: 0;
      padding: 14px 16px 10px; background: var(--bg); z-index: 10;
      display: block;
    }
    .tab-bar-inner {
      display: grid; grid-template-columns: repeat(3, 1fr);
      background: var(--ink-100); border-radius: var(--r-md);
      padding: 3px;
    }
    .tab-btn {
      background: transparent; border: none; padding: 8px 0;
      border-radius: var(--r-sm); font-size: 13px; font-weight: 700;
      color: var(--ink-500); cursor: pointer;
      font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease);
      white-space: nowrap;
    }
    .tab-btn.active {
      background: var(--surface); color: var(--ink-900);
      box-shadow: var(--shadow-sm);
    }
    .tab-content { display: none; }
    .tab-content.active { display: block; }

    /* ── Ranking bar ── */
    .ranking-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 18px 10px;
    }
    .ranking-bar-label {
      font-size: 11px; font-weight: 700; font-family: var(--font-mono);
      color: var(--ink-500); letter-spacing: 1px;
    }
    .ranking-bar-actions { display: flex; gap: 14px; }
    .ranking-btn {
      background: transparent; border: none; cursor: pointer;
      font-size: 12px; font-weight: 600; color: var(--ink-400);
      padding: 2px 0; font-family: var(--font-sans);
    }
    .ranking-btn.active { color: var(--ap-navy-800); font-weight: 700; }
    #rankingSection {
      display: none; padding: 0 16px 10px;
    }
    #rankingSection .ranking-title {
      font-size: 13px; font-weight: 700; color: var(--ink-800);
      margin: 8px 4px 6px; letter-spacing: -0.2px;
    }
    .ranking-item {
      display: flex; align-items: center; padding: 10px 12px;
      border-bottom: 1px solid var(--ink-100);
      cursor: pointer; background: var(--surface);
      transition: background var(--dur-fast) var(--ease);
    }
    .ranking-item:first-child { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }
    .ranking-item:last-child  { border-bottom: none; border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
    .ranking-item:hover { background: var(--ink-050); }
    .rank-num {
      font-weight: 700; min-width: 2rem;
      font-family: var(--font-mono); font-size: 13px;
      color: var(--ap-orange-500);
    }
    .rank-name { flex: 1; font-weight: 600; font-size: 13px; color: var(--ink-900); }
    .rank-score {
      color: var(--ink-500); font-size: 12px; font-family: var(--font-mono);
    }

    /* ── places.js generated content styling ── */
    #places-container { padding-top: 4px; }

    /* Category filter chips (horizontal scroll) */
    .cat-filter-bar {
      display: flex; gap: 6px;
      padding: 4px 16px 10px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .cat-filter-bar::-webkit-scrollbar { display: none; }
    .cat-filter-btn {
      flex-shrink: 0;
      background: var(--surface);
      color: var(--ink-700);
      border: 1px solid var(--ink-200);
      padding: 7px 12px; border-radius: var(--r-pill);
      font-size: 12px; font-weight: 600;
      cursor: pointer; font-family: var(--font-sans);
      display: inline-flex; gap: 5px; align-items: center;
      white-space: nowrap;
      transition: all var(--dur-fast) var(--ease);
    }
    .cat-filter-btn:hover { border-color: var(--ap-navy-600); }
    .cat-filter-btn.active {
      background: var(--ap-navy-800);
      color: #fff;
      border-color: var(--ap-navy-800);
    }
    .cat-new-badge {
      font-size: 9px; font-weight: 700;
      background: var(--success); color: #fff;
      padding: 1px 5px; border-radius: 3px;
      font-family: var(--font-mono); letter-spacing: 0.5px;
    }
    .cat-filter-btn.active .cat-new-badge { background: #fff; color: var(--ap-navy-800); }

    /* Search bar (injected by places.js) */
    .search-bar { margin: 4px 16px 10px; }
    .search-bar input {
      width: 100%; padding: 10px 14px;
      border-radius: var(--r-md);
      border: 1px solid var(--ink-200);
      background: var(--surface);
      font-size: 14px; font-family: var(--font-sans);
      color: var(--ink-900); outline: none;
      transition: border-color var(--dur-fast) var(--ease);
    }
    .search-bar input:focus { border-color: var(--ap-navy-600); }

    /* Crew Picks · Top 3 (강조 섹션) */
    .hot-places {
      margin: 10px 16px 6px;
      background: linear-gradient(180deg, var(--ap-orange-050), var(--surface));
      border: 1px solid var(--ap-orange-100);
      border-radius: var(--r-md);
      padding: 10px 12px 8px;
    }
    .hot-places-head {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 0 4px 6px;
    }
    .hot-places-kicker {
      font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
      color: var(--ap-orange-600); font-family: var(--font-mono);
    }
    .hot-places-note {
      font-size: 10px; color: var(--ink-500); font-family: var(--font-mono);
    }
    .hot-card {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      gap: 10px; align-items: center;
      padding: 8px 6px;
      border-top: 1px dashed var(--ap-orange-100);
      text-decoration: none; color: inherit;
      cursor: pointer;
      transition: background var(--dur-fast) var(--ease);
    }
    .hot-card:hover { background: rgba(255, 71, 19, 0.04); }
    .hot-rank {
      font-family: var(--font-mono); font-weight: 700;
      font-size: 18px; color: var(--ap-orange-500);
      letter-spacing: -0.5px; text-align: center;
    }
    .hot-body { min-width: 0; }
    .hot-name {
      font-size: 14px; font-weight: 700; color: var(--ink-900);
      letter-spacing: -0.2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hot-meta {
      font-size: 11px; color: var(--ink-500);
      margin-top: 2px; font-family: var(--font-mono);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .hot-score { text-align: right; }
    .hot-avg {
      font-size: 13px; font-weight: 700;
      color: #E5A100; font-family: var(--font-mono);
    }
    .hot-count {
      font-size: 10px; color: var(--ink-500);
      font-family: var(--font-mono); margin-top: 1px;
    }

    /* Category section heading */
    .cat-section { padding: 6px 0 4px; }
    .cat-section .section {
      padding: 4px 20px 2px;
    }
    .cat-section .section h2 {
      font-size: 11px; font-weight: 700;
      font-family: var(--font-mono); letter-spacing: 1.5px;
      color: var(--ink-500); text-transform: uppercase;
      margin: 0; padding: 6px 0;
    }

    /* Place card — dense list row */
    .place-card {
      background: var(--surface);
      margin: 0 16px 8px;
      padding: 14px;
      border-radius: var(--r-md);
      border: 1px solid var(--ink-100);
      box-shadow: var(--shadow-sm);
    }
    .place-card .name {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; margin-bottom: 4px;
    }
    .place-card .name span {
      font-size: 15px; font-weight: 700;
      letter-spacing: -0.2px; color: var(--ink-900);
      min-width: 0; overflow: hidden; text-overflow: ellipsis;
    }
    .place-card .name a,
    .place-card .name .map-inline {
      color: var(--ap-orange-600);
      background: var(--ap-orange-050);
      border: 1px solid var(--ap-orange-100);
      font-size: 11px; font-weight: 600;
      padding: 3px 8px; border-radius: var(--r-sm);
      text-decoration: none; white-space: nowrap; flex-shrink: 0;
    }
    .place-card .meta {
      font-size: 12px; color: var(--ink-500); margin-top: 2px;
    }
    .place-card .meta .rating {
      color: #E5A100; font-weight: 700;
      font-family: var(--font-mono);
    }
    .place-card .meta .price {
      color: var(--ap-navy-700); font-weight: 600;
      font-family: var(--font-mono);
    }
    .place-card .distance {
      font-size: 12px; color: var(--ink-500);
      font-family: var(--font-mono); margin-top: 3px;
    }
    .place-card .note {
      font-size: 12px; color: var(--ink-700);
      margin-top: 4px; line-height: 1.5;
    }
    .place-card .tags {
      display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
    }
    .tag {
      font-size: 10px; font-weight: 600;
      padding: 2px 7px; border-radius: var(--r-xs);
      background: var(--ink-050); color: var(--ink-700);
      white-space: nowrap;
    }
    .tag.solo   { background: var(--ap-navy-050);   color: var(--ap-navy-700); }
    .tag.late   { background: var(--warning-bg);    color: var(--warning); }
    .tag.newbie { background: var(--success-bg);    color: var(--success); }
    .tag.walk   { background: #F3E8FC;              color: #6B2FB0; }
    .tag.value  { background: var(--ap-orange-050); color: var(--ap-orange-600); }

    /* Recommend section */
    .recommend-section {
      display: flex; align-items: center; justify-content: flex-start;
      gap: 8px; margin-top: 10px; padding-top: 8px;
      border-top: 1px dashed var(--ink-200);
    }
    .rec-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 14px; border: 1.5px solid var(--ink-200);
      background: var(--surface); color: var(--ink-600);
      border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
      cursor: pointer;
      transition: all var(--dur-fast) var(--ease);
      -webkit-tap-highlight-color: transparent;
    }
    .rec-btn:hover { border-color: var(--ap-orange-400); color: var(--ap-orange-600); }
    .rec-btn.active {
      background: var(--ap-orange-500);
      border-color: var(--ap-orange-500);
      color: #fff;
      box-shadow: 0 2px 8px rgba(255,71,19,0.3);
    }
    .rec-heart { font-size: 13px; line-height: 1; }
    .rec-btn.active .rec-heart { animation: none; }
    .rec-count {
      font-size: 11px; color: var(--ink-500); font-weight: 600;
      font-family: var(--font-mono);
    }

    /* Crew review */
    .crew-review-section {
      margin-top: 10px; padding-top: 10px;
      border-top: 1px dashed var(--ink-200);
    }
    .crew-review-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 6px;
    }
    .crew-review-header .label {
      font-size: 11px; font-weight: 700; font-family: var(--font-mono);
      color: var(--ap-navy-700); letter-spacing: 0.5px;
    }
    .crew-review-header .avg {
      font-size: 12px; color: #E5A100; font-weight: 700;
      font-family: var(--font-mono);
    }
    .crew-count {
      font-size: 11px; color: var(--ap-orange-500); font-weight: 700;
      font-family: var(--font-mono); margin-left: 4px;
    }
    .crew-stars {
      display: flex; gap: 2px; cursor: pointer; margin-bottom: 4px;
      -webkit-tap-highlight-color: transparent;
    }
    .crew-stars .star {
      font-size: 22px; color: var(--ink-200);
      transition: color var(--dur-fast) var(--ease);
      user-select: none;
    }
    .crew-stars .star.active { color: #E5A100; }
    .crew-stars .star:hover { color: #FFB340; }
    .review-input-area {
      display: none; margin-top: 6px;
    }
    .review-input-area.show { display: block; }
    .review-input-area .photo-row {
      display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    }
    .photo-btn {
      padding: 6px 10px; border: 1px solid var(--ink-200);
      background: var(--ink-050); border-radius: var(--r-sm);
      font-size: 11px; cursor: pointer; color: var(--ap-navy-700);
      font-weight: 600;
    }
    .photo-previews { display: flex; gap: 4px; flex-wrap: wrap; }
    .photo-preview-item {
      width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover;
    }
    .review-input-area textarea {
      width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
      border: 1px solid var(--ink-200); background: var(--ink-050);
      font-size: 13px; resize: none; min-height: 58px;
      font-family: var(--font-sans); color: var(--ink-900); outline: none;
    }
    .review-input-area textarea:focus { border-color: var(--ap-navy-600); background: #fff; }
    .review-input-area .submit-btn {
      margin-top: 6px; padding: 8px 16px; border: none;
      background: var(--ap-orange-500); color: #fff;
      border-radius: var(--r-sm); font-size: 12px; font-weight: 700;
      cursor: pointer;
    }
    .crew-reviews-list { margin-top: 8px; }
    .crew-review-item {
      background: var(--ink-050); border-radius: var(--r-sm);
      padding: 8px 10px; margin-bottom: 6px; font-size: 12px;
    }
    .crew-review-item .review-stars { color: #E5A100; font-size: 11px; }
    .crew-review-item .review-text { color: var(--ink-700); margin-top: 2px; line-height: 1.5; }
    .crew-review-item .review-date {
      color: var(--ink-400); font-size: 10px; margin-top: 2px;
      font-family: var(--font-mono);
    }
    .review-image {
      width: 60px; height: 60px; border-radius: var(--r-sm);
      margin-top: 4px; cursor: pointer; object-fit: cover;
    }
    .delete-review-btn {
      background: transparent; border: 1px solid var(--danger);
      color: var(--danger); font-size: 10px;
      padding: 2px 8px; border-radius: var(--r-xs);
      cursor: pointer; font-weight: 700;
    }
    .delete-review-btn:hover { background: var(--danger); color: #fff; }

    /* Suggest section */
    .suggest-section { margin: 12px 16px 0; }
    .suggest-toggle {
      width: 100%; padding: 14px; border: none;
      background: var(--ap-navy-800); color: #fff;
      border-radius: var(--r-md);
      font-size: 14px; font-weight: 700; letter-spacing: -0.2px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .suggest-toggle::before {
      content: "+"; font-family: var(--font-mono);
      background: var(--ap-orange-500); color: #fff;
      padding: 2px 7px; border-radius: var(--r-xs);
      font-size: 11px; font-weight: 700;
    }
    .suggest-form {
      display: none; flex-direction: column; gap: 6px;
      margin-top: 6px; padding: 14px;
      background: var(--surface);
      border: 1px solid var(--ink-100);
      border-radius: var(--r-md);
    }
    .suggest-form.show { display: flex; }
    .suggest-form input, .suggest-form select {
      padding: 10px; border-radius: var(--r-sm);
      border: 1px solid var(--ink-200);
      background: var(--ink-050); color: var(--ink-900);
      font-size: 13px; font-family: var(--font-sans); outline: none;
    }
    .suggest-form input:focus, .suggest-form select:focus {
      border-color: var(--ap-navy-600); background: #fff;
    }
    .suggest-submit {
      padding: 10px; border: none;
      background: var(--ap-orange-500); color: #fff;
      border-radius: var(--r-sm); font-size: 13px; font-weight: 700;
      cursor: pointer;
    }
    .sug-rating { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
    .sug-rating-label {
      font-size: 11px; color: var(--ink-500); margin-right: 4px;
      font-family: var(--font-mono); font-weight: 600;
    }
    .sug-star { font-size: 22px; cursor: pointer; user-select: none; }
    .sug-star.active { filter: none; }
    .sug-star.inactive { filter: grayscale(1) opacity(0.35); }
    .suggest-list { margin-top: 8px; }
    .suggest-item {
      background: var(--surface);
      border: 1px solid var(--ink-100);
      border-left: 3px solid var(--ap-orange-500);
      border-radius: var(--r-sm);
      padding: 10px 12px; margin-bottom: 6px;
    }
    .suggest-item .sg-name { font-weight: 700; font-size: 14px; color: var(--ink-900); }
    .suggest-item .sg-desc { font-size: 12px; color: var(--ink-600); margin-top: 2px; line-height: 1.5; }
    .suggest-item .sg-meta {
      font-size: 11px; color: var(--ink-400); margin-top: 2px;
      font-family: var(--font-mono);
    }

    /* Footer */
    .footer {
      text-align: center;
      padding: 16px 20px 28px;
      font-size: 11px;
      color: var(--ink-500);
      font-family: var(--font-mono);
      letter-spacing: 0.3px;
      line-height: 1.6;
    }

    /* FAB */
    #fab-btn {
      position: fixed; right: 20px; bottom: 24px;
      width: 54px; height: 54px;
      border-radius: 50%;
      background: var(--ap-orange-500);
      color: #fff; font-size: 22px;
      border: none; cursor: pointer; z-index: 900;
      display: flex; align-items: center; justify-content: center;
      box-shadow: var(--shadow-lg);
      transition: transform var(--dur-fast) var(--ease);
    }
    #fab-btn:active { transform: scale(0.92); }

    /* Bottom sheet */
    #bs-overlay {
      position: fixed; inset: 0;
      background: rgba(12,22,48,0.5);
      z-index: 950;
      display: none;
      align-items: flex-end;
    }
    #bs-overlay.open { display: flex; }
    #bs-sheet {
      width: 100%;
      background: var(--surface);
      border-radius: 20px 20px 0 0;
      padding: 16px 16px 28px;
      box-shadow: 0 -12px 40px rgba(12,22,48,0.2);
      max-height: 88vh; overflow-y: auto;
    }
    .bs-handle {
      width: 36px; height: 4px; border-radius: 2px;
      background: var(--ink-200);
      margin: 0 auto 12px;
    }
    .bs-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .bs-title {
      font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
      color: var(--ink-900);
    }
    #bs-close {
      background: transparent; border: none;
      font-size: 20px; cursor: pointer; color: var(--ink-500);
      padding: 0 4px;
    }
    .bs-form { display: flex; flex-direction: column; gap: 8px; }
    .bs-form input, .bs-form select {
      padding: 11px 12px; border-radius: var(--r-sm);
      border: 1px solid var(--ink-200);
      background: var(--ink-050); color: var(--ink-900);
      font-size: 14px; outline: none;
    }
    .bs-form input:focus, .bs-form select:focus { border-color: var(--ap-navy-600); background: #fff; }
    .bs-rating { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
    .bs-rating-label {
      font-size: 12px; color: var(--ink-500); margin-right: 4px;
      font-family: var(--font-mono); font-weight: 600;
    }
    .bs-star { font-size: 24px; cursor: pointer; user-select: none; }
    .bs-star.inactive { filter: grayscale(1) opacity(0.35); }
    #bsSubmit {
      padding: 12px; border: none;
      background: var(--ap-orange-500); color: #fff;
      border-radius: var(--r-sm); font-size: 14px; font-weight: 700;
      cursor: pointer;
    }

    /* Lightbox */
    .lightbox {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.92); z-index: 999;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column;
    }
    .lightbox img { max-width: 92%; max-height: 80vh; object-fit: contain; border-radius: 8px; }
    .lightbox .lb-close {
      position: absolute; top: 12px; right: 16px;
      font-size: 2rem; color: #fff; cursor: pointer; z-index: 1000;
      background: none; border: none;
    }
    .lightbox .lb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      font-size: 2.5rem; color: #fff; cursor: pointer;
      background: rgba(0,0,0,0.3); border: none; padding: 0.5rem;
      border-radius: 50%;
    }
    .lightbox .lb-prev { left: 8px; }
    .lightbox .lb-next { right: 8px; }
    .lightbox .lb-counter { color: #fff; font-size: 0.9rem; margin-top: 0.8rem; opacity: 0.7; }

    /* Station items tab */
    #items-container { padding: 8px 0 24px; }
    .item-card {
      background: var(--surface);
      margin: 0 16px 10px;
      padding: 12px;
      border-radius: var(--r-md);
      border: 1px solid var(--ink-100);
      box-shadow: var(--shadow-sm);
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 12px;
      align-items: start;
    }
    .item-card-img {
      width: 96px; height: 96px; object-fit: cover;
      border-radius: var(--r-sm); cursor: pointer;
      background: var(--ink-050);
    }
    .item-img-placeholder {
      width: 96px; height: 96px; border-radius: var(--r-sm);
      background: var(--ink-050); display: flex;
      align-items: center; justify-content: center;
      font-size: 32px;
    }
    .item-card .item-name {
      font-size: 15px; font-weight: 700; color: var(--ink-900);
      letter-spacing: -0.2px; margin-bottom: 4px;
      grid-column: 2;
    }
    .item-card .item-where,
    .item-card .item-price,
    .item-card .item-review,
    .item-card .item-reviewer {
      font-size: 12px; color: var(--ink-600);
      grid-column: 2; line-height: 1.5; margin-top: 2px;
    }
    .item-card .item-price { color: var(--ap-orange-600); font-weight: 600; font-family: var(--font-mono); }
    .item-card .item-review { color: var(--ink-700); margin-top: 4px; }
    .item-card .item-reviewer {
      color: var(--ink-400); font-size: 11px;
      font-family: var(--font-mono); margin-top: 4px;
    }
    .item-card .item-rec-btn {
      grid-column: 2;
      margin-top: 8px; padding: 5px 10px;
      background: transparent; border: 1px solid var(--ink-200);
      color: var(--ink-600); font-size: 11px; font-weight: 700;
      border-radius: var(--r-pill); cursor: pointer;
      justify-self: start;
      transition: all var(--dur-fast) var(--ease);
    }
    .item-card .item-rec-btn:hover { border-color: var(--ap-orange-400); color: var(--ap-orange-600); }
    .item-card .item-rec-btn.active {
      background: var(--success-bg); border-color: var(--success); color: var(--success);
    }
    .items-empty {
      padding: 32px 20px; text-align: center;
      color: var(--ink-500); font-size: 13px;
    }
    .items-loading {
      padding: 32px 20px; text-align: center;
      color: var(--ink-500); font-size: 13px;
      font-family: var(--font-mono);
    }