/* roulang page: index */
:root {
      --tea-primary: #1e3a2f;
      --tea-accent: #b48c4a;
      --tea-muted: #6b7280;
      --tea-surface: #f9f8f5;
      --tea-border: #e6e2da;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #2b2b2b;
      background-color: #faf9f6;
    }
    .tea-border {
      border-color: var(--tea-border);
    }
    .tea-bg-surface {
      background-color: var(--tea-surface);
    }
    .text-accent {
      color: var(--tea-accent);
    }
    .bg-accent {
      background-color: var(--tea-accent);
    }
    .tea-btn-primary {
      background-color: var(--tea-primary);
      color: #ffffff;
      transition: all 0.25s ease-in-out;
    }
    .tea-btn-primary:hover {
      background-color: #142820;
      transform: translateY(-1px);
    }
    .tea-btn-outline {
      border: 1px solid var(--tea-border);
      color: var(--tea-primary);
      transition: all 0.2s ease;
    }
    .tea-btn-outline:hover {
      border-color: var(--tea-accent);
      color: var(--tea-accent);
      background-color: #ffffff;
    }

/* roulang page: category1 */
:root {
      --tea-primary: #1e3a2f;
      --tea-accent: #b48c4a;
      --tea-muted: #6b7280;
      --tea-surface: #f9f8f5;
      --tea-border: #e6e2da;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #2b2b2b;
      background-color: #faf9f6;
    }
    .tea-border {
      border-color: var(--tea-border);
    }
    .tea-bg-surface {
      background-color: var(--tea-surface);
    }
    .text-accent {
      color: var(--tea-accent);
    }
    .tea-btn-primary {
      background-color: var(--tea-primary);
      color: #ffffff;
      transition: all 0.25s ease-in-out;
    }
    .tea-btn-primary:hover {
      background-color: #142820;
      transform: translateY(-1px);
    }
    .tea-btn-outline {
      border: 1px solid var(--tea-border);
      color: var(--tea-primary);
      transition: all 0.2s ease;
    }
    .tea-btn-outline:hover {
      border-color: var(--tea-accent);
      color: var(--tea-accent);
      background-color: #ffffff;
    }
    /* Ticket Coupon Styling */
    .coupon-ticket {
      position: relative;
      background: #ffffff;
      border: 1px dashed var(--tea-accent);
    }
    .coupon-ticket::before, .coupon-ticket::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 18px;
      height: 18px;
      background-color: #faf9f6;
      border-radius: 50%;
      transform: translateY(-50%);
    }
    .coupon-ticket::before {
      left: -9px;
      border-right: 1px dashed var(--tea-accent);
    }
    .coupon-ticket::after {
      right: -9px;
      border-left: 1px dashed var(--tea-accent);
    }

/* roulang page: category2 */
:root {
      --tea-primary: #1e3a2f;
      --tea-accent: #b48c4a;
      --tea-muted: #6b7280;
      --tea-surface: #f9f8f5;
      --tea-border: #e6e2da;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #2b2b2b;
      background-color: #faf9f6;
    }
    .tea-border {
      border-color: var(--tea-border);
    }
    .tea-bg-surface {
      background-color: var(--tea-surface);
    }
    .text-accent {
      color: var(--tea-accent);
    }
    .tea-btn-primary {
      background-color: var(--tea-primary);
      color: #ffffff;
      transition: all 0.25s ease-in-out;
    }
    .tea-btn-primary:hover {
      background-color: #142820;
      transform: translateY(-1px);
    }
    .tea-btn-outline {
      border: 1px solid var(--tea-border);
      color: var(--tea-primary);
      transition: all 0.2s ease;
    }
    .tea-btn-outline:hover {
      border-color: var(--tea-accent);
      color: var(--tea-accent);
      background-color: #ffffff;
    }
    .coupon-ticket {
      position: relative;
      background: radial-gradient(circle at 0 50%, transparent 10px, #ffffff 11px) top left,
                  radial-gradient(circle at 100% 50%, transparent 10px, #ffffff 11px) top right;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

/* roulang page: category3 */
:root {
      --tea-primary: #1e3a2f;
      --tea-accent: #b48c4a;
      --tea-muted: #6b7280;
      --tea-surface: #f9f8f5;
      --tea-border: #e6e2da;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: #2b2b2b;
      background-color: #faf9f6;
    }
    .tea-border {
      border-color: var(--tea-border);
    }
    .tea-bg-surface {
      background-color: var(--tea-surface);
    }
    .text-accent {
      color: var(--tea-accent);
    }
    .tea-btn-primary {
      background-color: var(--tea-primary);
      color: #ffffff;
      transition: all 0.25s ease-in-out;
    }
    .tea-btn-primary:hover {
      background-color: #142820;
      transform: translateY(-1px);
    }
    .tea-btn-outline {
      border: 1px solid var(--tea-border);
      color: var(--tea-primary);
      transition: all 0.2s ease;
    }
    .tea-btn-outline:hover {
      border-color: var(--tea-accent);
      color: var(--tea-accent);
      background-color: #ffffff;
    }
    .progress-ring-circle {
      transition: stroke-dashoffset 0.35s;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }