Web Components、事件与 CSS 变量

核对基线：main 6df20471d848；重新生成不会导出插件实现。

资源通常自动注入。组件属性与事件不等于授权；金额、订单状态和用户权益需服务端确认。字符串属性可使用 HTML attribute；对象/数组优先用 JS property。Boolean 属性存在即为真，不能用 open="false" 表示关闭。

ks-paywall

property	attribute	声明
`baseUrl`	`base-url`	`{ type: String, attribute: 'base-url' }`
`unlockMethodsAttr`	`unlock-methods`	`{ attribute: 'unlock-methods' }`
`contentType`	`content-type`	`{ type: String, attribute: 'content-type' }`
`contentName`	`content-name`	`{ type: String, attribute: 'content-name' }`
`displayType`	`display-type`	`{ type: String, attribute: 'display-type' }`
`displayTargetName`	`display-target-name`	`{ type: String, attribute: 'display-target-name' }`
`displayName`	`display-name`	`{ type: String, attribute: 'display-name' }`
`relatedLimit`	`related-limit`	`{ type: Number, attribute: 'related-limit' }`
`preview`	`preview`	`{ type: String }`
`loggedIn`	`logged-in`	`{ type: Boolean, attribute: 'logged-in' }`

事件：ks-purchase。事件 detail 以对应版本为准；事件不证明收款成功。

property	attribute	声明
`baseUrl`	`base-url`	`{ type: String, attribute: 'base-url' }`
`orderNo`	`order-no`	`{ type: String, attribute: 'order-no' }`
`amount`	`amount`	`{ type: Number }`
`open`	`open`	`{ type: Boolean, reflect: true }`
`title`	`title`	`{ type: String }`
`returnUrl`	`return-url`	`{ type: String, attribute: 'return-url' }`

事件：close, payment-error, payment-initiated。事件 detail 以对应版本为准；事件不证明收款成功。

ks-coupon-picker

property	attribute	声明
`baseUrl`	`base-url`	`{ type: String, attribute: 'base-url' }`
`amount`	`amount`	`{ type: Number }`
`productType`	`product-type`	`{ type: String, attribute: 'product-type' }`
`title`	`title`	`{ type: String }`
`showEmpty`	`show-empty`	`{ type: Boolean, attribute: 'show-empty' }`
`selectedCouponName`	`selected-coupon`	`{ type: String, attribute: 'selected-coupon' }`

事件：coupon-change。事件 detail 以对应版本为准；事件不证明收款成功。

ks-order-card

property	attribute	声明
`order`	`order`	`{ type: Object }`
`showActions`	`show-actions`	`{ type: Boolean, attribute: 'show-actions' }`
`compact`	`compact`	`{ type: Boolean }`

事件：order-cancel, order-detail, order-pay。事件 detail 以对应版本为准；事件不证明收款成功。

ks-checkin-calendar

property	attribute	声明
`baseUrl`	`base-url`	`{ type: String, attribute: 'base-url' }`
`title`	`title`	`{ type: String }`
`checkinText`	`checkin-text`	`{ type: String, attribute: 'checkin-text' }`
`checkedText`	`checked-text`	`{ type: String, attribute: 'checked-text' }`

事件：checkin-error, checkin-success。事件 detail 以对应版本为准；事件不证明收款成功。

ks-countdown

property	attribute	声明
`targetTime`	`target-time`	`{ type: String, attribute: 'target-time' }`
`contentType`	`content-type`	`{ type: String, attribute: 'content-type' }`
`contentName`	`content-name`	`{ type: String, attribute: 'content-name' }`

property	attribute	声明
`baseUrl`	`base-url`	`{ type: String, attribute: 'base-url' }`
`group`	`group`	`{ type: String }`
`kind`	`kind`	`{ type: String }`
`name`	`name`	`{ type: String }`
`version`	`version`	`{ type: String }`

使用要点

ks-paywall 的输入为 unlock-methods JSON，不再使用旧 type/price/level 作为输入。通常保留后端生成的组件。 ks-countdown 使用 target-time/content-type/content-name。倒计时结束仍由服务端判定开放，不自行注入隐藏正文。 ks-comment-widget 使用 group/kind/name/version；文章 group=content.halo.run、kind=Post，name 是 metadata.name。 ks-order-card.order 通过 JS property 传对象，不序列化为 [object Object]。

CSS 变量

CSS 变量穿透 Shadow DOM；外部 class 选择器不能直接控制组件内部元素。以下为 styles/variables.css 声明的默认值，重复项代表不同选择器/暗色覆盖，不是统一全局值。

变量	声明值
`--ks-primary-color`	`#10b981`
`--ks-primary-hover`	`#059669`
`--ks-primary-active`	`#047857`
`--ks-primary-bg`	`#ecfdf5`
`--ks-primary-border`	`#a7f3d0`
`--ks-success-color`	`#22c55e`
`--ks-warning-color`	`#f59e0b`
`--ks-danger-color`	`#ef4444`
`--ks-info-color`	`#3b82f6`
`--ks-bg-color`	`#ffffff`
`--ks-bg-secondary`	`#f9fafb`
`--ks-bg-muted`	`#f3f4f6`
`--ks-text-color`	`#111827`
`--ks-text-secondary`	`#4b5563`
`--ks-text-muted`	`#9ca3af`
`--ks-text-disabled`	`#d1d5db`
`--ks-border-color`	`#e5e7eb`
`--ks-border-radius`	`8px`
`--ks-border-radius-sm`	`4px`
`--ks-border-radius-lg`	`12px`
`--ks-shadow-sm`	`0 1px 2px 0 rgb(0 0 0 / 0.05)`
`--ks-shadow`	`0 4px 6px -1px rgb(0 0 0 / 0.1)`
`--ks-shadow-lg`	`0 10px 15px -3px rgb(0 0 0 / 0.1)`
`--ks-font-family`	`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`
`--ks-font-size-xs`	`12px`
`--ks-font-size-sm`	`14px`
`--ks-font-size-base`	`16px`
`--ks-font-size-lg`	`18px`
`--ks-font-size-xl`	`20px`
`--ks-spacing-xs`	`4px`
`--ks-spacing-sm`	`8px`
`--ks-spacing-md`	`16px`
`--ks-spacing-lg`	`24px`
`--ks-spacing-xl`	`32px`
`--ks-overlay-bg`	`rgba(0, 0, 0, 0.5)`
`--ks-transition-fast`	`0.15s ease`
`--ks-transition-normal`	`0.3s ease`
`--ks-skeleton-bg`	`#e5e7eb`
`--ks-skeleton-shimmer`	`rgba(255, 255, 255, 0.45)`
`--ks-paywall-card-bg`	`#ffffff`
`--ks-paywall-card-border`	`#e5e7eb`
`--ks-paywall-title-color`	`#111827`
`--ks-paywall-desc-color`	`#6b7280`
`--ks-paywall-btn-radius`	`6px`
`--ks-paywall-font-size`	`14px`
`--ks-paywall-title-size`	`16px`
`--ks-paywall-icon-size`	`40px`
`--ks-paywall-accent`	`var(--ks-primary-color)`
`--ks-paywall-accent-light`	`var(--ks-primary-bg)`
`--ks-paywall-accent-shadow`	`color-mix(in srgb, var(--ks-primary-color) 14%, transparent)`
`--ks-paywall-article-bg`	`#fafafa`
`--ks-paywall-article-border`	`#e5e5e5`
`--ks-paywall-article-radius`	`var(--ks-border-radius-lg)`
`--ks-paywall-article-shell-bg`	`#fafafa`
`--ks-paywall-article-shell-border`	`#e5e5e5`
`--ks-paywall-article-muted-bg`	`#f5f5f5`
`--ks-paywall-article-skeleton-fill`	`#f5f5f5`
`--ks-paywall-article-kicker-color`	`#737373`
`--ks-paywall-article-shadow`	`none`
`--ks-paywall-article-badge-bg`	`transparent`
`--ks-paywall-article-badge-border`	`var(--ks-paywall-article-border)`
`--ks-paywall-article-badge-color`	`#404040`
`--ks-paywall-article-primary-bg`	`#171717`
`--ks-paywall-article-primary-color`	`#fafafa`
`--ks-paywall-article-secondary-bg`	`transparent`
`--ks-paywall-article-secondary-border`	`var(--ks-paywall-article-border)`
`--ks-paywall-article-secondary-color`	`#171717`
`--ks-paywall-membership-accent`	`#7c3aed`
`--ks-paywall-membership-accent-light`	`#f5f3ff`
`--ks-paywall-membership-accent-shadow`	`rgba(124, 58, 237, 0.12)`
`--ks-paywall-membership-card-bg`	`#ffffff`
`--ks-paywall-membership-card-border`	`#e5e7eb`
`--ks-paywall-membership-title-color`	`#111827`
`--ks-paywall-membership-desc-color`	`#6b7280`
`--ks-paywall-login-accent`	`#3b82f6`
`--ks-paywall-login-accent-light`	`#eff6ff`
`--ks-paywall-login-accent-shadow`	`rgba(59, 130, 246, 0.12)`
`--ks-paywall-login-card-bg`	`#ffffff`
`--ks-paywall-login-card-border`	`#e5e7eb`
`--ks-paywall-login-title-color`	`#111827`
`--ks-paywall-login-desc-color`	`#6b7280`
`--ks-paywall-password-accent`	`#d97706`
`--ks-paywall-password-accent-light`	`#fffbeb`
`--ks-paywall-password-accent-shadow`	`rgba(217, 119, 6, 0.12)`
`--ks-paywall-password-card-bg`	`#ffffff`
`--ks-paywall-password-card-border`	`#e5e7eb`
`--ks-paywall-password-title-color`	`#111827`
`--ks-paywall-password-desc-color`	`#6b7280`
`--ks-paywall-comment-accent`	`#16a34a`
`--ks-paywall-comment-accent-light`	`#f0fdf4`
`--ks-paywall-comment-accent-shadow`	`rgba(22, 163, 74, 0.12)`
`--ks-paywall-comment-card-bg`	`#ffffff`
`--ks-paywall-comment-card-border`	`#e5e7eb`
`--ks-paywall-comment-title-color`	`#111827`
`--ks-paywall-comment-desc-color`	`#6b7280`
`--ks-cw-primary-1-color`	`#10b981`
`--ks-cw-primary-2-color`	`#059669`
`--ks-cw-primary-3-color`	`#047857`
`--ks-cw-text-1-color`	`#0f172a`
`--ks-cw-text-2-color`	`#334155`
`--ks-cw-text-3-color`	`#64748b`
`--ks-cw-muted-1-color`	`#94a3b8`
`--ks-cw-muted-2-color`	`#cbd5e1`
`--ks-cw-muted-3-color`	`#e2e8f0`
`--ks-cw-emoji-picker-rgb-color`	`34, 36, 39`
`--ks-cw-emoji-picker-rgb-accent`	`58, 130, 247`
`--ks-cw-emoji-picker-rgb-background`	`255, 255, 255`
`--ks-cw-emoji-picker-rgb-input`	`255, 255, 255`
`--ks-cw-emoji-picker-color-border`	`rgba(0, 0, 0, 0.1)`
`--ks-cw-emoji-picker-color-border-over`	`rgba(0, 0, 0, 0.2)`
`--ks-cw-bg-1-color`	`#ffffff`
`--ks-cw-bg-2-color`	`#f8fafc`
`--ks-cw-muted-4-color`	`#f8fafc`
`--ks-cw-bg-color`	`#ffffff`
`--ks-cw-editor-bg-color`	`#ffffff`
`--ks-cw-editor-content-bg-color`	`transparent`
`--ks-cw-editor-text-color`	`#0f172a`
`--ks-cw-editor-toolbar-bg-color`	`#f8fafc`
`--ks-cw-editor-border-color`	`#e2e8f0`
`--ks-cw-editor-placeholder-color`	`#94a3b8`
`--ks-cw-editor-code-bg-color`	`#f8fafe`
`--ks-cw-editor-code-text-color`	`#334155`
`--ks-cw-content-quote-bg-color`	`rgba(148, 163, 184, 0.075)`
`--ks-cw-reward-dialog-overlay-bg`	`rgba(2, 6, 23, 0.64)`
`--ks-cw-reward-dialog-header-bg`	`rgba(148, 163, 184, 0.14)`
`--ks-cw-reward-dialog-footer-bg`	`rgba(148, 163, 184, 0.1)`
`--ks-cw-reward-dialog-cancel-bg`	`rgba(148, 163, 184, 0.12)`
`--ks-cw-reward-dialog-shadow`	`0 0 0 1px rgba(15, 23, 42, 0.08), 0 18px 36px -8px rgba(2, 6, 23, 0.26), 0 8px 18px -8px rgba(15, 23, 42, 0.2)`
`--ks-cw-reward-dialog-focus-ring`	`rgba(5, 150, 105, 0.25)`
`--ks-countdown-font`	`'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif`
`--ks-countdown-bg`	`#f8f9fa`
`--ks-countdown-card-bg`	`#ffffff`
`--ks-countdown-border`	`#e5e7eb`
`--ks-countdown-text`	`#1f2937`
`--ks-countdown-text-muted`	`#6b7280`
`--ks-countdown-accent`	`var(--ks-primary-color)`
`--ks-countdown-accent-light`	`var(--ks-primary-bg)`
`--ks-countdown-digit-bg`	`#ffffff`
`--ks-countdown-digit-border`	`#d1d5db`
`--ks-countdown-digit-shadow`	`0 2px 8px rgba(0, 0, 0, 0.08)`
`--ks-countdown-icon-bg`	`linear-gradient(145deg, #f3f4f6, #e5e7eb)`
`--ks-countdown-icon-shadow`	`0 4px 12px rgba(0, 0, 0, 0.1)`
`--ks-countdown-divider`	`rgba(0, 0, 0, 0.06)`
`--ks-countdown-btn-text`	`#ffffff`
`--ks-countdown-target-bg`	`#f3f4f6`
`--ks-checkin-accent-color`	`var(--ks-primary-color, #10b981)`
`--ks-checkin-card-bg`	`linear-gradient( 180deg, color-mix(in srgb, var(--ks-bg-color, #ffffff) 98%, var(--ks-bg-secondary, #f9fafb)) 0%, color-mix(in srgb, var(--ks-bg-color, #ffffff) 92%, var(--ks-bg-secondary, #f9fafb)) 100% )`
`--ks-checkin-card-border`	`color-mix(in srgb, var(--ks-border-color, #e5e7eb) 82%, transparent)`
`--ks-checkin-card-radius`	`18px`
`--ks-checkin-card-padding`	`18px`
`--ks-checkin-card-shadow`	`0 16px 34px -28px color-mix(in srgb, var(--ks-text-color, #111827) 30%, transparent)`
`--ks-checkin-title-color`	`var(--ks-text-color, #111827)`
`--ks-checkin-title-size`	`22px`
`--ks-checkin-subtitle-color`	`var(--ks-text-muted, #6b7280)`
`--ks-checkin-streak-bg`	`color-mix(in srgb, var(--ks-bg-color, #ffffff) 88%, var(--ks-bg-secondary, #f9fafb))`
`--ks-checkin-streak-border`	`color-mix(in srgb, var(--ks-border-color, #e5e7eb) 70%, transparent)`
`--ks-checkin-streak-color`	`var(--ks-text-secondary, #4b5563)`
`--ks-checkin-nav-bg`	`transparent`
`--ks-checkin-nav-border`	`transparent`
`--ks-checkin-nav-hover-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #f9fafb) 80%, var(--ks-bg-color, #ffffff))`
`--ks-checkin-day-bg`	`transparent`
`--ks-checkin-day-border`	`transparent`
`--ks-checkin-checked-bg`	`transparent`
`--ks-checkin-checked-border`	`transparent`
`--ks-checkin-checked-color`	`var(--ks-text-color, #111827)`
`--ks-checkin-today-border`	`var(--ks-checkin-accent-color)`
`--ks-checkin-today-bg`	`linear-gradient( 135deg, color-mix(in srgb, var(--ks-checkin-accent-color) 84%, var(--ks-bg-color, #ffffff)) 0%, color-mix(in srgb, var(--ks-checkin-accent-color) 96%, var(--ks-text-color, #111827)) 100% )`
`--ks-checkin-today-label-color`	`#ffffff`
`--ks-checkin-points-color`	`var(--ks-checkin-accent-color)`
`--ks-checkin-weekday-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-day-color`	`var(--ks-text-color, #111827)`
`--ks-checkin-day-muted-color`	`color-mix(in srgb, var(--ks-text-muted, #9ca3af) 72%, transparent)`
`--ks-checkin-day-checked-dot`	`var(--ks-checkin-accent-color)`
`--ks-checkin-window-red`	`var(--ks-danger-color, #ef4444)`
`--ks-checkin-window-amber`	`var(--ks-warning-color, #f59e0b)`
`--ks-checkin-window-green`	`var(--ks-success-color, #22c55e)`
`--ks-checkin-footer-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #f9fafb) 44%, var(--ks-bg-color, #ffffff))`
`--ks-checkin-footer-border`	`color-mix(in srgb, var(--ks-border-color, #e5e7eb) 64%, transparent)`
`--ks-checkin-footer-title-color`	`var(--ks-text-secondary, #4b5563)`
`--ks-checkin-footer-text-color`	`var(--ks-text-secondary, #4b5563)`
`--ks-checkin-btn-bg`	`var(--ks-text-color, #111827)`
`--ks-checkin-btn-hover-bg`	`color-mix(in srgb, var(--ks-text-color, #111827) 90%, var(--ks-bg-color, #ffffff))`
`--ks-checkin-btn-border`	`transparent`
`--ks-checkin-btn-checked-bg`	`color-mix(in srgb, var(--ks-checkin-accent-color) 8%, var(--ks-bg-color, #ffffff))`
`--ks-checkin-btn-checked-border`	`color-mix(in srgb, var(--ks-checkin-accent-color) 24%, transparent)`
`--ks-checkin-btn-disabled-bg`	`color-mix(in srgb, var(--ks-bg-muted, #f3f4f6) 88%, var(--ks-bg-color, #ffffff))`
`--ks-checkin-btn-color`	`#ffffff`
`--ks-checkin-btn-checked-color`	`color-mix(in srgb, var(--ks-checkin-accent-color) 78%, var(--ks-text-color, #111827))`
`--ks-checkin-btn-disabled-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-btn-radius`	`12px`
`--ks-checkin-btn-size`	`14px`
`--ks-checkin-btn-shadow`	`0 12px 24px -18px color-mix(in srgb, var(--ks-text-color, #111827) 40%, transparent)`
`--ks-checkin-btn-hover-shadow`	`0 16px 28px -20px color-mix(in srgb, var(--ks-text-color, #111827) 46%, transparent)`
`--ks-bg-color`	`#1a1a2e`
`--ks-bg-secondary`	`#16162a`
`--ks-bg-muted`	`#2a2a40`
`--ks-text-color`	`#e5e7eb`
`--ks-text-secondary`	`#d1d5db`
`--ks-text-muted`	`#9ca3af`
`--ks-border-color`	`#374151`
`--ks-skeleton-bg`	`rgba(255, 255, 255, 0.08)`
`--ks-skeleton-shimmer`	`rgba(255, 255, 255, 0.04)`
`--ks-paywall-card-bg`	`#1f2937`
`--ks-paywall-card-border`	`#374151`
`--ks-paywall-title-color`	`#f3f4f6`
`--ks-paywall-desc-color`	`#9ca3af`
`--ks-paywall-article-bg`	`#171717`
`--ks-paywall-article-border`	`rgba(255, 255, 255, 0.1)`
`--ks-paywall-article-shell-bg`	`#0a0a0a`
`--ks-paywall-article-shell-border`	`rgba(255, 255, 255, 0.1)`
`--ks-paywall-article-muted-bg`	`#262626`
`--ks-paywall-article-skeleton-fill`	`#262626`
`--ks-paywall-article-kicker-color`	`#a3a3a3`
`--ks-paywall-article-shadow`	`none`
`--ks-paywall-article-badge-bg`	`transparent`
`--ks-paywall-article-badge-border`	`var(--ks-paywall-article-border)`
`--ks-paywall-article-badge-color`	`#d4d4d4`
`--ks-paywall-article-primary-bg`	`#fafafa`
`--ks-paywall-article-primary-color`	`#0a0a0a`
`--ks-paywall-article-secondary-bg`	`transparent`
`--ks-paywall-article-secondary-border`	`var(--ks-paywall-article-border)`
`--ks-paywall-article-secondary-color`	`#fafafa`
`--ks-paywall-accent`	`#22d3ee`
`--ks-paywall-accent-light`	`rgba(34, 211, 238, 0.1)`
`--ks-paywall-accent-shadow`	`rgba(34, 211, 238, 0.15)`
`--ks-paywall-membership-accent`	`#a78bfa`
`--ks-paywall-membership-accent-light`	`rgba(167, 139, 250, 0.1)`
`--ks-paywall-membership-accent-shadow`	`rgba(167, 139, 250, 0.15)`
`--ks-paywall-membership-card-bg`	`#1f2937`
`--ks-paywall-membership-card-border`	`#374151`
`--ks-paywall-membership-title-color`	`#f3f4f6`
`--ks-paywall-membership-desc-color`	`#9ca3af`
`--ks-paywall-login-accent`	`#60a5fa`
`--ks-paywall-login-accent-light`	`rgba(96, 165, 250, 0.1)`
`--ks-paywall-login-accent-shadow`	`rgba(96, 165, 250, 0.15)`
`--ks-paywall-login-card-bg`	`#1f2937`
`--ks-paywall-login-card-border`	`#374151`
`--ks-paywall-login-title-color`	`#f3f4f6`
`--ks-paywall-login-desc-color`	`#9ca3af`
`--ks-paywall-password-accent`	`#fbbf24`
`--ks-paywall-password-accent-light`	`rgba(251, 191, 36, 0.1)`
`--ks-paywall-password-accent-shadow`	`rgba(251, 191, 36, 0.15)`
`--ks-paywall-password-card-bg`	`#1f2937`
`--ks-paywall-password-card-border`	`#374151`
`--ks-paywall-password-title-color`	`#f3f4f6`
`--ks-paywall-password-desc-color`	`#9ca3af`
`--ks-paywall-comment-accent`	`#4ade80`
`--ks-paywall-comment-accent-light`	`rgba(74, 222, 128, 0.1)`
`--ks-paywall-comment-accent-shadow`	`rgba(74, 222, 128, 0.15)`
`--ks-paywall-comment-card-bg`	`#1f2937`
`--ks-paywall-comment-card-border`	`#374151`
`--ks-paywall-comment-title-color`	`#f3f4f6`
`--ks-paywall-comment-desc-color`	`#9ca3af`
`--ks-cw-primary-1-color`	`#10b981`
`--ks-cw-primary-2-color`	`#059669`
`--ks-cw-primary-3-color`	`#047857`
`--ks-cw-text-1-color`	`#f9fafb`
`--ks-cw-text-2-color`	`#e5e7eb`
`--ks-cw-text-3-color`	`#9ca3af`
`--ks-cw-muted-1-color`	`#4b5563`
`--ks-cw-muted-2-color`	`#374151`
`--ks-cw-muted-3-color`	`#1f2937`
`--ks-cw-emoji-picker-rgb-color`	`222, 222, 221`
`--ks-cw-emoji-picker-rgb-accent`	`58, 130, 247`
`--ks-cw-emoji-picker-rgb-background`	`21, 22, 23`
`--ks-cw-emoji-picker-rgb-input`	`0, 0, 0`
`--ks-cw-emoji-picker-color-border`	`rgba(255, 255, 255, 0.1)`
`--ks-cw-emoji-picker-color-border-over`	`rgba(255, 255, 255, 0.2)`
`--ks-cw-bg-1-color`	`#1e293b`
`--ks-cw-bg-2-color`	`#1a2332`
`--ks-cw-muted-4-color`	`#283548`
`--ks-cw-bg-color`	`#1e293b`
`--ks-cw-editor-bg-color`	`#1e293b`
`--ks-cw-editor-content-bg-color`	`transparent`
`--ks-cw-editor-text-color`	`#f1f5f9`
`--ks-cw-editor-toolbar-bg-color`	`#0f172a`
`--ks-cw-editor-border-color`	`#334155`
`--ks-cw-editor-placeholder-color`	`#64748b`
`--ks-cw-editor-code-bg-color`	`#162338`
`--ks-cw-editor-code-text-color`	`#dbe7f5`
`--ks-cw-content-quote-bg-color`	`rgba(51, 65, 85, 0.5)`
`--ks-cw-reward-dialog-overlay-bg`	`rgba(2, 6, 23, 0.72)`
`--ks-cw-reward-dialog-header-bg`	`rgba(30, 41, 59, 0.55)`
`--ks-cw-reward-dialog-footer-bg`	`rgba(30, 41, 59, 0.45)`
`--ks-cw-reward-dialog-cancel-bg`	`rgba(51, 65, 85, 0.55)`
`--ks-cw-reward-dialog-shadow`	`0 0 0 1px rgba(148, 163, 184, 0.16), 0 24px 48px -14px rgba(2, 6, 23, 0.85), 0 12px 24px -12px rgba(2, 6, 23, 0.65)`
`--ks-cw-reward-dialog-focus-ring`	`rgba(16, 185, 129, 0.35)`
`--ks-countdown-bg`	`#16181d`
`--ks-countdown-card-bg`	`#1d222b`
`--ks-countdown-border`	`#2d3542`
`--ks-countdown-text`	`#eef2f7`
`--ks-countdown-text-muted`	`#9aa4b3`
`--ks-countdown-accent`	`var(--ks-primary-color)`
`--ks-countdown-accent-light`	`color-mix(in srgb, var(--ks-primary-color) 12%, transparent)`
`--ks-countdown-digit-bg`	`#1a1a1a`
`--ks-countdown-digit-border`	`#333333`
`--ks-countdown-digit-shadow`	`0 2px 8px rgba(0, 0, 0, 0.3)`
`--ks-countdown-icon-bg`	`linear-gradient(145deg, #2a2a2a, #1a1a1a)`
`--ks-countdown-icon-shadow`	`0 4px 12px rgba(0, 0, 0, 0.4)`
`--ks-countdown-divider`	`rgba(255, 255, 255, 0.05)`
`--ks-countdown-btn-text`	`#171717`
`--ks-countdown-target-bg`	`#202631`
`--ks-checkin-accent-color`	`var(--ks-primary-color, #10b981)`
`--ks-checkin-card-bg`	`linear-gradient( 180deg, color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 96%, var(--ks-bg-secondary, #16162a)) 0%, color-mix(in srgb, var(--ks-bg-secondary, #16162a) 78%, var(--ks-bg-color, #1a1a2e)) 100% )`
`--ks-checkin-card-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 76%, transparent)`
`--ks-checkin-card-radius`	`18px`
`--ks-checkin-card-padding`	`18px`
`--ks-checkin-card-shadow`	`0 18px 38px -30px color-mix(in srgb, #000000 86%, var(--ks-text-color, #e5e7eb))`
`--ks-checkin-title-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-title-size`	`22px`
`--ks-checkin-subtitle-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-streak-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #16162a) 88%, var(--ks-bg-color, #1a1a2e))`
`--ks-checkin-streak-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 70%, transparent)`
`--ks-checkin-streak-color`	`var(--ks-text-secondary, #d1d5db)`
`--ks-checkin-nav-bg`	`transparent`
`--ks-checkin-nav-border`	`transparent`
`--ks-checkin-nav-hover-bg`	`color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 72%, var(--ks-bg-secondary, #16162a))`
`--ks-checkin-day-bg`	`transparent`
`--ks-checkin-day-border`	`transparent`
`--ks-checkin-checked-bg`	`transparent`
`--ks-checkin-checked-border`	`transparent`
`--ks-checkin-checked-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-today-border`	`var(--ks-checkin-accent-color)`
`--ks-checkin-today-bg`	`linear-gradient( 135deg, color-mix(in srgb, var(--ks-checkin-accent-color) 82%, var(--ks-bg-color, #1a1a2e)) 0%, color-mix(in srgb, var(--ks-checkin-accent-color) 96%, var(--ks-bg-color, #1a1a2e)) 100% )`
`--ks-checkin-today-label-color`	`#ffffff`
`--ks-checkin-points-color`	`color-mix(in srgb, var(--ks-checkin-accent-color) 78%, #ffffff)`
`--ks-checkin-weekday-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-day-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-day-muted-color`	`color-mix(in srgb, var(--ks-text-muted, #9ca3af) 72%, transparent)`
`--ks-checkin-day-checked-dot`	`var(--ks-checkin-accent-color)`
`--ks-checkin-window-red`	`var(--ks-danger-color, #ef4444)`
`--ks-checkin-window-amber`	`var(--ks-warning-color, #f59e0b)`
`--ks-checkin-window-green`	`var(--ks-success-color, #22c55e)`
`--ks-checkin-footer-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #16162a) 88%, var(--ks-bg-color, #1a1a2e))`
`--ks-checkin-footer-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 68%, transparent)`
`--ks-checkin-footer-title-color`	`var(--ks-text-secondary, #d1d5db)`
`--ks-checkin-footer-text-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-btn-bg`	`color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 82%, #ffffff)`
`--ks-checkin-btn-hover-bg`	`color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 72%, #ffffff)`
`--ks-checkin-btn-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 64%, transparent)`
`--ks-checkin-btn-checked-bg`	`color-mix(in srgb, var(--ks-checkin-accent-color) 12%, var(--ks-bg-secondary, #16162a))`
`--ks-checkin-btn-checked-border`	`color-mix(in srgb, var(--ks-checkin-accent-color) 30%, transparent)`
`--ks-checkin-btn-disabled-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #16162a) 88%, var(--ks-bg-color, #1a1a2e))`
`--ks-checkin-btn-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-btn-checked-color`	`color-mix(in srgb, var(--ks-checkin-accent-color) 68%, #ffffff)`
`--ks-checkin-btn-disabled-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-btn-radius`	`12px`
`--ks-checkin-btn-shadow`	`0 14px 28px -22px rgba(0, 0, 0, 0.62)`
`--ks-checkin-btn-hover-shadow`	`0 18px 32px -22px rgba(0, 0, 0, 0.7)`
`--ks-bg-color`	`#1a1a2e`
`--ks-bg-secondary`	`#16162a`
`--ks-bg-muted`	`#2a2a40`
`--ks-text-color`	`#e5e7eb`
`--ks-text-secondary`	`#d1d5db`
`--ks-text-muted`	`#9ca3af`
`--ks-border-color`	`#374151`
`--ks-skeleton-bg`	`rgba(255, 255, 255, 0.08)`
`--ks-skeleton-shimmer`	`rgba(255, 255, 255, 0.04)`
`--ks-paywall-card-bg`	`#1f2937`
`--ks-paywall-card-border`	`#374151`
`--ks-paywall-title-color`	`#f3f4f6`
`--ks-paywall-desc-color`	`#9ca3af`
`--ks-paywall-article-bg`	`#171717`
`--ks-paywall-article-border`	`rgba(255, 255, 255, 0.1)`
`--ks-paywall-article-shell-bg`	`#0a0a0a`
`--ks-paywall-article-shell-border`	`rgba(255, 255, 255, 0.1)`
`--ks-paywall-article-muted-bg`	`#262626`
`--ks-paywall-article-skeleton-fill`	`#262626`
`--ks-paywall-article-kicker-color`	`#a3a3a3`
`--ks-paywall-article-shadow`	`none`
`--ks-paywall-article-badge-bg`	`transparent`
`--ks-paywall-article-badge-border`	`var(--ks-paywall-article-border)`
`--ks-paywall-article-badge-color`	`#d4d4d4`
`--ks-paywall-article-primary-bg`	`#fafafa`
`--ks-paywall-article-primary-color`	`#0a0a0a`
`--ks-paywall-article-secondary-bg`	`transparent`
`--ks-paywall-article-secondary-border`	`var(--ks-paywall-article-border)`
`--ks-paywall-article-secondary-color`	`#fafafa`
`--ks-paywall-accent`	`#22d3ee`
`--ks-paywall-accent-light`	`rgba(34, 211, 238, 0.1)`
`--ks-paywall-accent-shadow`	`rgba(34, 211, 238, 0.15)`
`--ks-paywall-membership-accent`	`#a78bfa`
`--ks-paywall-membership-accent-light`	`rgba(167, 139, 250, 0.1)`
`--ks-paywall-membership-accent-shadow`	`rgba(167, 139, 250, 0.15)`
`--ks-paywall-membership-card-bg`	`#1f2937`
`--ks-paywall-membership-card-border`	`#374151`
`--ks-paywall-membership-title-color`	`#f3f4f6`
`--ks-paywall-membership-desc-color`	`#9ca3af`
`--ks-paywall-login-accent`	`#60a5fa`
`--ks-paywall-login-accent-light`	`rgba(96, 165, 250, 0.1)`
`--ks-paywall-login-accent-shadow`	`rgba(96, 165, 250, 0.15)`
`--ks-paywall-login-card-bg`	`#1f2937`
`--ks-paywall-login-card-border`	`#374151`
`--ks-paywall-login-title-color`	`#f3f4f6`
`--ks-paywall-login-desc-color`	`#9ca3af`
`--ks-paywall-password-accent`	`#fbbf24`
`--ks-paywall-password-accent-light`	`rgba(251, 191, 36, 0.1)`
`--ks-paywall-password-accent-shadow`	`rgba(251, 191, 36, 0.15)`
`--ks-paywall-password-card-bg`	`#1f2937`
`--ks-paywall-password-card-border`	`#374151`
`--ks-paywall-password-title-color`	`#f3f4f6`
`--ks-paywall-password-desc-color`	`#9ca3af`
`--ks-paywall-comment-accent`	`#4ade80`
`--ks-paywall-comment-accent-light`	`rgba(74, 222, 128, 0.1)`
`--ks-paywall-comment-accent-shadow`	`rgba(74, 222, 128, 0.15)`
`--ks-paywall-comment-card-bg`	`#1f2937`
`--ks-paywall-comment-card-border`	`#374151`
`--ks-paywall-comment-title-color`	`#f3f4f6`
`--ks-paywall-comment-desc-color`	`#9ca3af`
`--ks-countdown-bg`	`#16181d`
`--ks-countdown-card-bg`	`#1d222b`
`--ks-countdown-border`	`#2d3542`
`--ks-countdown-text`	`#eef2f7`
`--ks-countdown-text-muted`	`#9aa4b3`
`--ks-countdown-accent`	`var(--ks-primary-color)`
`--ks-countdown-accent-light`	`color-mix(in srgb, var(--ks-primary-color) 12%, transparent)`
`--ks-countdown-digit-bg`	`#1a1a1a`
`--ks-countdown-digit-border`	`#333333`
`--ks-countdown-digit-shadow`	`0 2px 8px rgba(0, 0, 0, 0.3)`
`--ks-countdown-icon-bg`	`linear-gradient(145deg, #2a2a2a, #1a1a1a)`
`--ks-countdown-icon-shadow`	`0 4px 12px rgba(0, 0, 0, 0.4)`
`--ks-countdown-divider`	`rgba(255, 255, 255, 0.05)`
`--ks-countdown-btn-text`	`#171717`
`--ks-countdown-target-bg`	`#202631`
`--ks-checkin-accent-color`	`var(--ks-primary-color, #10b981)`
`--ks-checkin-card-bg`	`linear-gradient( 180deg, color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 96%, var(--ks-bg-secondary, #16162a)) 0%, color-mix(in srgb, var(--ks-bg-secondary, #16162a) 78%, var(--ks-bg-color, #1a1a2e)) 100% )`
`--ks-checkin-card-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 76%, transparent)`
`--ks-checkin-card-radius`	`18px`
`--ks-checkin-card-padding`	`18px`
`--ks-checkin-card-shadow`	`0 18px 38px -30px color-mix(in srgb, #000000 86%, var(--ks-text-color, #e5e7eb))`
`--ks-checkin-title-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-title-size`	`22px`
`--ks-checkin-subtitle-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-streak-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #16162a) 88%, var(--ks-bg-color, #1a1a2e))`
`--ks-checkin-streak-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 70%, transparent)`
`--ks-checkin-streak-color`	`var(--ks-text-secondary, #d1d5db)`
`--ks-checkin-nav-bg`	`transparent`
`--ks-checkin-nav-border`	`transparent`
`--ks-checkin-nav-hover-bg`	`color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 72%, var(--ks-bg-secondary, #16162a))`
`--ks-checkin-day-bg`	`transparent`
`--ks-checkin-day-border`	`transparent`
`--ks-checkin-checked-bg`	`transparent`
`--ks-checkin-checked-border`	`transparent`
`--ks-checkin-checked-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-today-border`	`var(--ks-checkin-accent-color)`
`--ks-checkin-today-bg`	`linear-gradient( 135deg, color-mix(in srgb, var(--ks-checkin-accent-color) 82%, var(--ks-bg-color, #1a1a2e)) 0%, color-mix(in srgb, var(--ks-checkin-accent-color) 96%, var(--ks-bg-color, #1a1a2e)) 100% )`
`--ks-checkin-today-label-color`	`#ffffff`
`--ks-checkin-points-color`	`color-mix(in srgb, var(--ks-checkin-accent-color) 78%, #ffffff)`
`--ks-checkin-weekday-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-day-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-day-muted-color`	`color-mix(in srgb, var(--ks-text-muted, #9ca3af) 72%, transparent)`
`--ks-checkin-day-checked-dot`	`var(--ks-checkin-accent-color)`
`--ks-checkin-window-red`	`var(--ks-danger-color, #ef4444)`
`--ks-checkin-window-amber`	`var(--ks-warning-color, #f59e0b)`
`--ks-checkin-window-green`	`var(--ks-success-color, #22c55e)`
`--ks-checkin-footer-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #16162a) 88%, var(--ks-bg-color, #1a1a2e))`
`--ks-checkin-footer-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 68%, transparent)`
`--ks-checkin-footer-title-color`	`var(--ks-text-secondary, #d1d5db)`
`--ks-checkin-footer-text-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-btn-bg`	`color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 82%, #ffffff)`
`--ks-checkin-btn-hover-bg`	`color-mix(in srgb, var(--ks-bg-color, #1a1a2e) 72%, #ffffff)`
`--ks-checkin-btn-border`	`color-mix(in srgb, var(--ks-border-color, #374151) 64%, transparent)`
`--ks-checkin-btn-checked-bg`	`color-mix(in srgb, var(--ks-checkin-accent-color) 12%, var(--ks-bg-secondary, #16162a))`
`--ks-checkin-btn-checked-border`	`color-mix(in srgb, var(--ks-checkin-accent-color) 30%, transparent)`
`--ks-checkin-btn-disabled-bg`	`color-mix(in srgb, var(--ks-bg-secondary, #16162a) 88%, var(--ks-bg-color, #1a1a2e))`
`--ks-checkin-btn-color`	`var(--ks-text-color, #e5e7eb)`
`--ks-checkin-btn-checked-color`	`color-mix(in srgb, var(--ks-checkin-accent-color) 68%, #ffffff)`
`--ks-checkin-btn-disabled-color`	`var(--ks-text-muted, #9ca3af)`
`--ks-checkin-btn-radius`	`12px`
`--ks-checkin-btn-shadow`	`0 14px 28px -22px rgba(0, 0, 0, 0.62)`
`--ks-checkin-btn-hover-shadow`	`0 18px 32px -22px rgba(0, 0, 0, 0.7)`
`--ks-cw-primary-1-color`	`#10b981`
`--ks-cw-primary-2-color`	`#059669`
`--ks-cw-primary-3-color`	`#047857`
`--ks-cw-text-1-color`	`#f9fafb`
`--ks-cw-text-2-color`	`#e2e8f0`
`--ks-cw-text-3-color`	`#94a3b8`
`--ks-cw-muted-1-color`	`#64748b`
`--ks-cw-muted-2-color`	`#475569`
`--ks-cw-muted-3-color`	`#334155`
`--ks-cw-emoji-picker-rgb-color`	`222, 222, 221`
`--ks-cw-emoji-picker-rgb-accent`	`58, 130, 247`
`--ks-cw-emoji-picker-rgb-background`	`21, 22, 23`
`--ks-cw-emoji-picker-rgb-input`	`0, 0, 0`
`--ks-cw-emoji-picker-color-border`	`rgba(255, 255, 255, 0.1)`
`--ks-cw-emoji-picker-color-border-over`	`rgba(255, 255, 255, 0.2)`
`--ks-cw-bg-1-color`	`#1e293b`
`--ks-cw-bg-2-color`	`#1a2332`
`--ks-cw-muted-4-color`	`#283548`
`--ks-cw-bg-color`	`#1e293b`
`--ks-cw-editor-bg-color`	`#1e293b`
`--ks-cw-editor-content-bg-color`	`transparent`
`--ks-cw-editor-text-color`	`#f1f5f9`
`--ks-cw-editor-toolbar-bg-color`	`#0f172a`
`--ks-cw-editor-border-color`	`#334155`
`--ks-cw-editor-placeholder-color`	`#64748b`
`--ks-cw-editor-code-bg-color`	`#162338`
`--ks-cw-editor-code-text-color`	`#dbe7f5`
`--ks-cw-content-quote-bg-color`	`rgba(51, 65, 85, 0.5)`
`--ks-cw-reward-dialog-overlay-bg`	`rgba(2, 6, 23, 0.72)`
`--ks-cw-reward-dialog-header-bg`	`rgba(30, 41, 59, 0.55)`
`--ks-cw-reward-dialog-footer-bg`	`rgba(30, 41, 59, 0.45)`
`--ks-cw-reward-dialog-cancel-bg`	`rgba(51, 65, 85, 0.55)`
`--ks-cw-reward-dialog-shadow`	`0 0 0 1px rgba(148, 163, 184, 0.16), 0 24px 48px -14px rgba(2, 6, 23, 0.85), 0 12px 24px -12px rgba(2, 6, 23, 0.65)`
`--ks-cw-reward-dialog-focus-ring`	`rgba(16, 185, 129, 0.35)`

文章付费墙圆角：--ks-paywall-article-radius，默认继承 --ks-border-radius-lg。定时开放组件采用内容骨架、翻页倒计时和开放时间文本，不为时间另加卡片/胶囊容器。

集成示例 · 页面指南