/* roulang page: index */
:root {
      --brand-navy: #0F172A;
      --brand-blue: #0284C7;
      --brand-emerald: #10B981;
      --brand-accent: #F97316;
      --brand-surface: #F8FAFC;
      --brand-border: #E2E8F0;
      --brand-text: #1E293B;
      --brand-muted: #64748B;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      color: var(--brand-text);
      background-color: #FFFFFF;
      line-height: 1.75;
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    .ticket-edge {
      position: relative;
      background-image: radial-gradient(circle at 0 center, transparent 12px, #FFFFFF 13px), radial-gradient(circle at 100% center, transparent 12px, #FFFFFF 13px);
      background-position: left center, right center;
      background-size: 51% 100%;
      background-repeat: no-repeat;
    }
    .ticket-edge-navy {
      position: relative;
      background-image: radial-gradient(circle at 0 center, transparent 14px, #0F172A 15px), radial-gradient(circle at 100% center, transparent 14px, #0F172A 15px);
      background-position: left center, right center;
      background-size: 51% 100%;
      background-repeat: no-repeat;
    }
    .dash-line {
      border-right: 2px dashed #CBD5E1;
    }
    .glass-navy {
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .hover-lift {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .hover-lift:hover {
      transform: translateY(-4px);
    }
    /* Toast 通知样式 */
    #claimToast {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

/* roulang page: category1 */
:root {
      --brand-navy: #0F172A;
      --brand-blue: #0284C7;
      --brand-emerald: #10B981;
      --brand-accent: #F97316;
      --brand-surface: #F8FAFC;
      --brand-border: #E2E8F0;
      --brand-text: #1E293B;
      --brand-muted: #64748B;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      color: var(--brand-text);
      background-color: #FFFFFF;
      line-height: 1.75;
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    .ticket-edge-navy {
      position: relative;
      background-image: radial-gradient(circle at 0 center, transparent 14px, #0F172A 15px), radial-gradient(circle at 100% center, transparent 14px, #0F172A 15px);
      background-position: left center, right center;
      background-size: 51% 100%;
      background-repeat: no-repeat;
    }
    .glass-navy {
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .badge-glow {
      box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
    }
    .card-hover-fx {
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-hover-fx:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(2, 132, 199, 0.08), 0 8px 10px -6px rgba(16, 185, 129, 0.04);
    }
