/* ===== Base & Theme ===== */
:root {
    --brand: #F59E0B;
    --brand-dark: #D97706;
    --radius: 16px;
    --transition: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  html { scroll-behavior: smooth; }
  body { overflow-x: hidden; }
  
  /* ===== Scrollbar ===== */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
  .dark ::-webkit-scrollbar-thumb { background: #374151; }
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
  
  /* ===== Tab Buttons ===== */
  .tab-btn {
    color: #6b7280;
    background: transparent;
  }
  .dark .tab-btn {
    color: #9ca3af;
  }
  .tab-btn.active {
    color: #111827;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }
  .dark .tab-btn.active {
    color: #f3f4f6;
    background: #1f2937;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
  }
  
  /* ===== Cards ===== */
  .listing-card {
    transition: transform 250ms var(--transition), box-shadow 250ms var(--transition);
    cursor: pointer;
  }
  .listing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
  }
  .listing-card:active {
    transform: scale(0.98);
  }
  .dark .listing-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,.4);
  }
  
  /* ===== Featured Cards ===== */
  .featured-card {
    min-width: 280px;
    max-width: 320px;
    scroll-snap-align: start;
  }
  
  /* ===== Filter Chip ===== */
  .filter-chip {
    animation: chipIn 200ms var(--transition);
  }
  @keyframes chipIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  
  /* ===== Page Transitions ===== */
  .page { animation: pageIn 300ms var(--transition); }
  @keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* ===== Card Grid Animation ===== */
  .listing-card {
    animation: cardIn 350ms var(--transition) backwards;
  }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* ===== Rating Stars ===== */
  .star-interactive { cursor: pointer; transition: transform 150ms; }
  .star-interactive:hover { transform: scale(1.2); }
  
  /* ===== Typewriter ===== */
  .typewriter-cursor {
    display: inline-block;
    width: 1.5px;
    height: 1em;
    background: #9ca3af;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
  }
  @keyframes blink {
    50% { opacity: 0; }
  }
  
  /* ===== Image Aspect Ratio ===== */
  .aspect-card {
    aspect-ratio: 4/3;
  }
  .aspect-detail-hero {
    aspect-ratio: 16/9;
  }
  
  /* ===== Toast ===== */
  .toast-item {
    animation: toastIn 300ms var(--transition), toastOut 300ms var(--transition) forwards;
    animation-delay: 0s, 2500ms;
  }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-8px) scale(0.95); }
  }
  
  /* ===== Submission Steps ===== */
  .step-indicator {
    transition: all 300ms var(--transition);
  }
  
  /* ===== Verified Badge ===== */
  .verified-badge {
    animation: verifiedPop 400ms var(--transition);
  }
  @keyframes verifiedPop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  /* ===== Responsive Touch ===== */
  @media (max-width: 639px) {
    .tab-btn { padding: 0.5rem 0.75rem; font-size: 0.75rem; }
    .tab-btn i { width: 18px; height: 18px; }
  }
  
  /* ===== Focus States ===== */
  input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  
  /* ===== Skeleton Loading ===== */
  .skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }
  .dark .skeleton {
    background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
    background-size: 200% 100%;
  }
  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  
  /* ===== Bottom Sheet ===== */
  @media (min-width: 640px) {
    #bottom-sheet, #bottom-sheet-overlay { display: none !important; }
  }