/* layout: preorder confirmation sheet, loading overlay, global UI atoms */

    /* ══ PREORDER CONFIRMATION SHEET ═══════════════════════════════ */
    .confirm-hero {
      text-align: center; padding: 28px 16px 20px;
    }
    .confirm-hero-icon {
      width: 72px; height: 72px; border-radius: 50%;
      background: linear-gradient(135deg, #ff6b4a, #ff9473);
      color: white; font-size: 32px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px;
      box-shadow: 0 8px 24px rgba(255,107,74,0.35);
    }
    .confirm-hero-title {
      font-size: 22px; font-weight: 900; margin-bottom: 4px;
    }
    .confirm-hero-sub {
      font-size: 14px; color: var(--text2); line-height: 1.5;
    }
    .confirm-qr-wrap {
      display: flex; flex-direction: column; align-items: center;
      padding: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin: 0 16px 14px;
    }
    .confirm-qr-label {
      font-size: 11px; font-weight: 700; color: var(--text3);
      text-transform: uppercase; letter-spacing: 1px;
      margin-bottom: 10px;
    }
    .confirm-qr-id {
      font-size: 13px; font-weight: 800; color: var(--text);
      letter-spacing: 1px; margin-top: 10px;
    }
    .confirm-detail-card {
      margin: 0 16px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .confirm-detail-row {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--border);
    }
    .confirm-detail-row:last-child { border-bottom: none; }
    .confirm-detail-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
    .confirm-detail-label { font-size: 11px; color: var(--text3); font-weight: 600; }
    .confirm-detail-value { font-size: 13px; font-weight: 700; }
    .confirm-earn-banner {
      margin: 0 16px 14px;
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(74,222,128,0.08), rgba(74,222,128,0.03));
      border: 1px solid rgba(74,222,128,0.22);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; gap: 10px;
    }
    .confirm-earn-icon { font-size: 22px; flex-shrink: 0; }
    .confirm-earn-title { font-size: 13px; font-weight: 700; color: var(--text); }
    .confirm-earn-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
    .confirm-items-list {
      margin: 0 16px 14px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .confirm-item-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .confirm-item-emoji { font-size: 20px; flex-shrink: 0; }
    .confirm-item-name { flex: 1; font-size: 13px; font-weight: 600; }
    .confirm-item-price { font-size: 13px; font-weight: 700; color: var(--accent); }
    .qr-label { font-size: 11px; color: #666; margin-top: 8px; font-weight: 600; }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    .empty-state-icon { font-size: 48px; margin-bottom: 16px; }
    .empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
    .empty-state p { font-size: 13px; color: var(--text3); }

    /* Loading overlay */
    #loadingOverlay {
      position: fixed;
      inset: 0;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 0.6s;
      font-family: 'Inter', sans-serif;
      overflow: hidden;
      padding: 0 24px;
    }
    #loadingOverlay.hidden { opacity: 0; pointer-events: none; display: none; }
    .ls-main { text-align: center; margin-bottom: 44px; width: 100%; }
    .loading-logo { font-size: 36px; font-weight: 900; letter-spacing: -1.5px; margin-bottom: 6px; animation: lsBreathe 3s ease-in-out infinite; }
    .loading-logo .accent { color: var(--accent); }
    .ls-city { font-size: 11px; color: var(--text3); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
    .ls-stage { height: 320px; width: min(320px, calc(100% - 32px)); position: relative; margin-bottom: 52px; }
    .ls-card {
      position: absolute; inset: 0;
      background: transparent; border: none; border-radius: 28px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0; opacity: 0; transform: translateY(32px) scale(0.92);
      box-shadow: none;
      overflow: hidden; padding: 0;
    }
    .ls-card.ls-enter { animation: lsCardIn 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    .ls-card.ls-exit  { animation: lsCardOut 0.4s cubic-bezier(0.4,0,1,1) forwards; }
    .ls-card img { width: 100%; height: 100%; object-fit: contain; border-radius: 28px; }
    .ls-card-name { font-size: 16px; font-weight: 800; color: #1a1a18; letter-spacing: -0.3px; }
    .ls-card-handle { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0.2px; }
    .ls-bar-wrap { width: min(300px, calc(100% - 48px)); margin-bottom: 20px; }
    .ls-bar-track { width: 100%; height: 3px; background: #e2e2de; border-radius: 3px; overflow: hidden; }
    .ls-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 3px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
    .ls-dots { display: flex; gap: 10px; }
    .ls-dot { width: 7px; height: 7px; border-radius: 50%; background: #e2e2de; transition: all 0.3s ease; }
    .ls-dot.ls-active { background: var(--accent); transform: scale(1.5); }
    .loading-text { font-size: 13px; color: var(--text3); }
    @keyframes lsBreathe { 0%,100%{opacity:1} 50%{opacity:0.5} }
    @keyframes lsCardIn { from{opacity:0;transform:translateY(32px) scale(0.92)} to{opacity:1;transform:translateY(0) scale(1)} }
    @keyframes lsCardOut { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-28px) scale(0.93)} }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Redesigned map marker — bold badge style like screenshot */
    .custom-marker {
      background: var(--accent);
      border-radius: 10px 10px 10px 2px;
      box-shadow: 0 3px 16px rgba(232,93,58,0.4), 0 1px 4px rgba(0,0,0,0.15);
      border: none;
      padding: 5px 10px 5px 8px;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      position: relative;
    }
    .custom-marker::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 8px;
      border: 4px solid transparent;
      border-top-color: var(--accent);
    }
    .custom-marker.open-marker {
      background: var(--accent);
    }
    .custom-marker.closed {
      background: rgba(160,144,136,0.85);
      box-shadow: 0 2px 10px rgba(0,0,0,0.12);
      opacity: 0.82;
    }
    .custom-marker.closed::after { border-top-color: rgba(160,144,136,0.85); }
    .custom-marker .mk-emoji { font-size: 14px; }
    .custom-marker .mk-info { display: flex; flex-direction: column; }
    .custom-marker .mk-name { font-size: 11px; font-weight: 800; color: white; line-height: 1.2; max-width: 80px; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.2px; }
    .custom-marker .mk-status { font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.8px; }
    .custom-marker.closed .mk-name { color: white; }
    .custom-marker.closed .mk-status { color: rgba(255,255,255,0.6); }

    .leaflet-container { background: #e8e2da; }
    .leaflet-popup-content-wrapper { background: var(--surface); color: var(--text); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
    .leaflet-popup-tip { background: var(--surface); }
    .leaflet-control-zoom { border: 1px solid var(--border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }
    .leaflet-control-zoom a { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }

    @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .animate-in { animation: slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

    .auth-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      z-index: 3000; display: none; align-items: center; justify-content: center; padding: 24px;
    }
    .auth-modal-overlay.show { display: flex; }
    .auth-modal {
      background: linear-gradient(160deg, rgba(252,248,244,0.98) 0%, rgba(248,240,232,0.98) 100%);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(220,200,185,0.5);
      border-radius: var(--radius); width: 100%; max-width: 360px;
      box-shadow: 0 12px 48px rgba(140,80,50,0.2); overflow: hidden;
    }
    .auth-modal-header {
      padding: 18px 20px 0; display: flex; align-items: center; justify-content: space-between;
    }
    .auth-modal-header h3 { font-size: 17px; font-weight: 700; }
    .auth-modal-close {
      width: 30px; height: 30px; border-radius: 50%; background: var(--surface2);
      border: none; font-size: 16px; cursor: pointer; color: var(--text2);
      display: flex; align-items: center; justify-content: center;
    }
    .auth-modal-body { padding: 16px 20px; }
    .auth-modal-footer { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
    .auth-modal-input {
      width: 100%; background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--text);
      font-family: inherit; outline: none; box-sizing: border-box;
    }
    .auth-modal-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; display: block; }
    .auth-modal-msg { font-size: 13px; margin-top: 10px; display: none; }

    .toast {
      position: fixed;
      top: max(20px, env(safe-area-inset-top, 20px));
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      z-index: 3000;
      background: var(--glass-strong);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      padding: 12px 20px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 8px 32px rgba(140,80,50,0.15), 0 1px 0 rgba(255,255,255,0.9) inset;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      white-space: nowrap;
    }
    .toast.show { transform: translateX(-50%) translateY(0); }
    .confetti-container { position:fixed; inset:0; z-index:4000; pointer-events:none; overflow:hidden; }