/*
 * 抵扣券的共享组件（结账页的可选券 + /vip 的券包列表）。
 *
 * 一张票根分两段：左「面值」票桩 + 右「名称与条件」，中间一条撕票虚线，
 * 上下各挖一个半圆缺口——缺口颜色靠 --ticket-notch 跟着所在页面的底色走，
 * 所以同一个组件既能贴在结账页的白面板上，也能贴在 /vip 的 var(--canvas) 上。
 *
 * 只在原站没有的东西上用（券原来只是一行自动折扣文案，没有可视化形态）；
 * 站内既有的会员卡、价格卡样式一律不碰。
 */
.gd-ticket {
  --ticket-accent: var(--color-primary);
  --ticket-soft: #f2f7ff;
  --ticket-line: #e3e8ef;
  --ticket-notch: #ffffff;
  --ticket-stub: 116px;
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--ticket-line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px rgba(32, 62, 92, .05);
}
.gd-ticket__stub {
  flex-shrink: 0;
  width: var(--ticket-stub);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: 1rem .5rem;
  color: var(--ticket-accent);
  background: var(--ticket-soft);
}
.gd-ticket__value { display: flex; align-items: baseline; gap: 2px; font-size: 1.5rem; font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.gd-ticket__value i { font-style: normal; font-size: .8rem; font-weight: 650; }
.gd-ticket__floor { color: var(--ticket-accent); opacity: .72; font-size: .7rem; }
.gd-ticket__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: 1rem 1.15rem; }
.gd-ticket__name { margin: 0; color: #1d1d1f; font-size: .95rem; font-weight: 650; }
.gd-ticket__meta { margin: 0; color: #7c8698; font-size: .76rem; line-height: 1.6; }
.gd-ticket__code { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; letter-spacing: .06em; color: #515154; }
.gd-ticket__side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .4rem; padding: 1rem 1.15rem 1rem 0; }
.gd-ticket__use { color: var(--color-primary); font-size: .76rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.gd-ticket__use:hover { text-decoration: underline; }

/* 撕票线 + 两个缺口：缺口靠父子底色一致才能"挖"出来。 */
.gd-ticket__perf { position: absolute; top: 10px; bottom: 10px; left: var(--ticket-stub); width: 0; border-left: 2px dashed var(--ticket-line); }
.gd-ticket__perf:before, .gd-ticket__perf:after { position: absolute; left: 50%; width: 18px; height: 18px; content: ''; border-radius: 50%; background: var(--ticket-notch); transform: translateX(-50%); }
.gd-ticket__perf:before { top: -19px; }
.gd-ticket__perf:after { bottom: -19px; }

/* 状态：用掉与过期的票压暗并盖章。 */
.gd-ticket--void { --ticket-accent: #8b94a3; --ticket-soft: #f4f6f9; opacity: .82; }
.gd-ticket--void .gd-ticket__name { color: #7c8698; }
.gd-ticket__stamp { align-self: flex-start; padding: .15rem .5rem; border: 1px solid currentColor; border-radius: var(--radius-full); color: #a1a8b4; font-size: .68rem; letter-spacing: .08em; }
.gd-ticket--used { --ticket-accent: #2c9d72; --ticket-soft: #eef8f3; }

/* /vip 领券区：沿用站内 Apple 语言的深墨 + 天蓝，不引入结账页那套蓝。 */
.gd-claim { padding: clamp(1.5rem, 4vw, 2.75rem); background: #fff; border-radius: var(--radius-lg); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .02); }
.gd-claim__head { max-width: 640px; margin: 0 0 1.5rem; }
.gd-claim__head h2 { margin: 0 0 .5rem; color: #1d1d1f; font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -.03em; }
.gd-claim__head p { margin: 0; color: #86868b; font-size: .92rem; line-height: 1.7; }
.gd-claim__form { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.gd-claim__input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 1rem; color: #1d1d1f; background: var(--canvas); border: 1px solid #e3e8ef; border-radius: var(--radius-full); font-size: .95rem; transition: border-color .2s ease, background .2s ease; }
.gd-claim__input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary); background: #fff; }
.gd-claim__btn { min-height: 48px; padding: 0 1.6rem; color: #fff; background: var(--color-primary); border: 0; border-radius: var(--radius-full); font-size: .95rem; font-weight: 650; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.gd-claim__btn:hover:not(:disabled) { background: var(--color-primary); box-shadow: 0 10px 22px rgba(0,113,227, .22); transform: translateY(-1px); }
.gd-claim__btn:disabled { background: #c7c7cc; cursor: not-allowed; }
.gd-claim__tip { margin: .9rem 0 0; min-height: 1.2rem; color: #86868b; font-size: .84rem; line-height: 1.5; }
.gd-claim__tip.is-error { color: #d94d4d; }
.gd-claim__tip.is-ok { color: #2c9d72; }
.gd-claim--closed .gd-claim__form { opacity: .55; }
.gd-claim--closed .gd-claim__btn { pointer-events: none; }

/* 我的券 / 我买过的主题：两列票根墙。 */
.gd-ticket-grid, .gd-license-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.vip-page-container .gd-ticket { --ticket-notch: var(--canvas); }
.gd-panel { margin-top: 2.5rem; }
.gd-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.gd-panel__head h3 { margin: 0; color: #1d1d1f; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.gd-panel__head p { margin: 0; color: #86868b; font-size: .8rem; }
.gd-empty { margin: 1.1rem 0 0; padding: 1.1rem 1.2rem; color: #86868b; background: var(--canvas); border: 1px dashed #d9dde3; border-radius: var(--radius-md); font-size: .86rem; line-height: 1.7; }
.gd-empty a { color: var(--color-primary); font-weight: 650; }

/* 已购主题卡片：主题名 + 元信息 + 下载与详情链接（/account 与 /vip 共用）。 */
.gd-license { display: flex; flex-direction: column; gap: .8rem; padding: 1.15rem 1.25rem; background: #fff; border: 1px solid #e3e8ef; border-radius: var(--radius-md); box-shadow: 0 10px 26px rgba(32, 62, 92, .04); }
.gd-license__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.gd-license__theme { margin: 0; color: #1d1d1f; font-size: .95rem; font-weight: 650; }
.gd-license__code { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; letter-spacing: .06em; color: var(--color-primary); }
.gd-license__meta { margin: 0; color: #86868b; font-size: .76rem; line-height: 1.6; }
.gd-license__form { display: flex; flex-wrap: wrap; gap: .5rem; }
.gd-license__input { flex: 1 1 180px; min-width: 0; min-height: 40px; padding: 0 .9rem; color: #1d1d1f; background: var(--canvas); border: 1px solid #e3e8ef; border-radius: var(--radius-sm); font-size: .85rem; }
.gd-license__input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; background: #fff; }
.gd-license__bind { min-height: 40px; padding: 0 1.1rem; color: #fff; background: #1d1d1f; border: 0; border-radius: var(--radius-sm); font-size: .84rem; font-weight: 620; cursor: pointer; transition: background .2s ease; }
.gd-license__bind:hover:not(:disabled) { background: var(--color-primary); }
.gd-license__bind:disabled { background: #c7c7cc; cursor: not-allowed; }
.gd-license__domains { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.gd-domain { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .5rem .3rem .7rem; background: var(--canvas); border: 1px solid #e3e8ef; border-radius: var(--radius-xs); font-size: .78rem; }
.gd-domain__name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #1d1d1f; letter-spacing: .01em; }
.gd-domain__since { color: #a1a1a6; font-size: .7rem; }
.gd-domain__off { min-height: 26px; padding: 0 .55rem; color: #86868b; background: transparent; border: 1px solid #e3e8ef; border-radius: var(--radius-xs); font-size: .72rem; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.gd-domain__off:hover:not(:disabled) { color: #d94d4d; border-color: #f0c9c9; }
.gd-domain__off:disabled { opacity: .55; cursor: not-allowed; }
.gd-domain--free { padding: .3rem .7rem; color: #c7c7cc; background: transparent; border-style: dashed; font-size: .74rem; }
.gd-license__hint { margin: 0; color: #86868b; font-size: .74rem; line-height: 1.6; }
.gd-license__msg { margin: 0; min-height: 1rem; color: #86868b; font-size: .78rem; }
.gd-license__msg.is-error { color: #d94d4d; }
.gd-license__msg.is-ok { color: #2c9d72; }

@media (max-width:767px) {
  .gd-ticket-grid, .gd-license-grid { grid-template-columns: 1fr; }
  .gd-ticket { --ticket-stub: 96px; }
  .gd-ticket__body { padding: .9rem 1rem; }
  .gd-claim__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-claim__btn, .gd-license__bind, .gd-ticket { transition: none; }
}