/* monk 宇宙皮肤：商店（买家能看到的页面）和 universe.monk.party 用同一套视觉——
   深色太空底、像素字小标签、切角的按钮和卡片、火焰橙 + 星光黄。放在 monk-ui.css、store.css 之后引用。
   默认深色；右上角切到亮色时保留切角和像素字，配色回到 Monk UI 的亮色。 */
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url(/store/ui/fonts/silkscreen-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap; src: url(/store/ui/fonts/silkscreen-700-latin.woff2) format("woff2"); }

:root {
  --u-px: "Silkscreen", "JetBrains Mono", ui-monospace, monospace;
  --u-notch: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
  --u-notch-lg: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 6px 6px);
  --u-star: #FDE047;
  --u-flame-ink: #1A0B02;
  --mk-r-sm: 2px; --mk-r-md: 3px; --mk-r-lg: 4px; --mk-r-xl: 4px; --mk-r-full: 3px;
}
/* 深色（默认）：universe 的配色 */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --mk-bg: #07080B; --mk-bg-glow: rgba(249, 115, 22, .16);
  --mk-surface: #11131B; --mk-surface-2: #171A24; --mk-surface-3: #1F2331;
  --mk-border: #242736; --mk-border-strong: #343849;
  --mk-text: #EEEAE2; --mk-text-2: #C9C6BF; --mk-muted: #9A98A3; --mk-subtle: #5E5D69;
  --mk-accent: #F97316; --mk-accent-2: #FDE047; --mk-accent-ink: #FB923C;
  --mk-accent-soft: rgba(249, 115, 22, .12); --mk-accent-line: rgba(249, 115, 22, .45);
  --mk-ok: #4ADE80; --mk-ok-soft: rgba(74, 222, 128, .12);
  --mk-info: #7FD4E8; --mk-info-soft: rgba(127, 212, 232, .12);
  --mk-warn: #FDE047; --mk-warn-soft: rgba(253, 224, 71, .12);
  --mk-shadow-1: none; --mk-shadow-2: 0 20px 50px -20px rgba(0, 0, 0, .7);
  --mk-shadow-glow: 0 0 0 1px var(--mk-accent-line), 0 24px 60px -24px rgba(249, 115, 22, .45);
}
html:not([data-theme="light"]) { background: #07080B; }

/* 星空底：两层细小星点 + 顶部火光 */
html:not([data-theme="light"]) body {
  background-color: var(--mk-bg);
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(238, 234, 226, .55), transparent 60%),
    radial-gradient(1px 1px at 140px 90px, rgba(238, 234, 226, .35), transparent 60%),
    radial-gradient(1.5px 1.5px at 260px 160px, rgba(253, 224, 71, .45), transparent 60%),
    radial-gradient(1px 1px at 330px 40px, rgba(127, 212, 232, .4), transparent 60%),
    radial-gradient(1px 1px at 80px 210px, rgba(238, 234, 226, .3), transparent 60%);
  background-size: 380px 260px;
  background-attachment: fixed;
}

/* 顶栏：半透明黑 + 像素字品牌 */
.mk-header { background: color-mix(in srgb, var(--mk-bg) 60%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid color-mix(in srgb, var(--mk-text) 6%, transparent); }
.mk-brand > span:nth-child(2) { font-family: var(--u-px); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; }
.mk-brand-icon { border-radius: 0; clip-path: var(--u-notch); box-shadow: none; }
.mk-tag { border: 0; border-radius: 0; clip-path: var(--u-notch); background: var(--mk-accent); color: var(--u-flame-ink); font-weight: 700; }

/* 小标签用像素字 */
.mk-eyebrow, .px { font-family: var(--u-px); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-accent); }
.mk-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.mk-eyebrow > i { width: 8px; height: 8px; background: var(--mk-ok); box-shadow: 0 0 10px var(--mk-ok); display: inline-block; animation: u-blink 2.4s steps(2) infinite; }
@keyframes u-blink { 50% { opacity: .25; } }

/* 按钮：切角、无圆角；主按钮是平的火焰橙，划过有一道光 */
.mk-btn { border-radius: 0; clip-path: var(--u-notch); border-color: transparent; background: var(--mk-surface-2); box-shadow: none; }
.mk-btn:hover { background: var(--mk-surface-3); border-color: transparent; }
.mk-btn--primary { position: relative; overflow: hidden; background: var(--mk-accent); color: var(--u-flame-ink); font-weight: 800; border-color: transparent; box-shadow: none; }
.mk-btn--primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--mk-ease); pointer-events: none; }
.mk-btn--primary:hover { background: #FB8A3C; color: var(--u-flame-ink); }
.mk-btn--primary:hover::before { transform: translateX(120%); }
.mk-btn--primary svg { color: var(--u-flame-ink); }

/* 卡片、标签、头像、提示：切角 */
/* 切角的元素不用 border（切角处会留下断线），改用内描边 */
.mk-card { border-radius: 0; clip-path: var(--u-notch-lg); border-color: transparent; box-shadow: inset 0 0 0 1px var(--mk-border); }
.mk-card--glow, .h-quick, .mk-card.quick { box-shadow: inset 0 0 0 1px var(--mk-accent-line); }
.mk-chip, .h-mode, .mode { border-radius: 0; clip-path: var(--u-notch); }
.pic { border-radius: 0 !important; clip-path: var(--u-notch); }
.pic--letter { background: var(--mk-accent); color: var(--u-flame-ink); font-family: var(--u-px); font-weight: 700; }
.mk-toast { border-radius: 0; clip-path: var(--u-notch); background: var(--mk-accent); color: var(--u-flame-ink); font-weight: 800; }
.mk-toast svg { color: var(--u-flame-ink); }
input, textarea, select { border-radius: 2px !important; }

/* 数字：价格、倒计时、验证码用像素字或等宽，星光黄 */
.price b { font-family: var(--u-px); font-weight: 700; letter-spacing: 0; color: var(--mk-accent-2); }
:root[data-theme="light"] .price b { color: var(--mk-accent-ink); }
.countdown { font-family: var(--u-px); font-weight: 700; color: var(--mk-accent-2); }
:root[data-theme="light"] .countdown { color: var(--mk-accent-ink); }

/* 帮助中心、验证码工具里的块 */
.h-topic, .h-prod, .h-step, .h-toc, .h-box, .h-contact, .tp-row, .tp-faq details, .h-fields li, .g-toc a, .h-search input, .buy-guide, .faq details, .prod { border-radius: 0 !important; clip-path: var(--u-notch); }
.h-prod, .h-step, .h-toc, .tp-faq details, .g-toc a, .h-search input { border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--mk-border); }
.h-prod:hover, .h-step:hover, .h-topic:hover { box-shadow: inset 0 0 0 1px var(--mk-accent-line); }
.h-quick, .mk-card.quick { background: var(--mk-surface); }
.h-group h3, .h-toc b, .h-sec > h2 + .h-sub { letter-spacing: .02em; }
.h-group h3, .h-toc b { font-family: var(--u-px); text-transform: uppercase; font-weight: 400; color: var(--mk-accent); }
.h-plan li::before { border-radius: 0; background: var(--mk-accent-2); }
.h-body blockquote, .guide blockquote { border-radius: 0; border-left: 3px solid var(--mk-accent); }
.tp-code, .inbox-code code { color: var(--mk-accent-2); }
:root[data-theme="light"] .tp-code, :root[data-theme="light"] .inbox-code code { color: var(--mk-accent-ink); }
.tp-ring { border-radius: 0; clip-path: var(--u-notch); }
.tp-ring::before { border-radius: 0; }

/* 底栏 */
.mk-footer { border-top: 1px solid var(--mk-border); }

@media (prefers-reduced-motion: reduce) { .mk-eyebrow > i { animation: none; } .mk-btn--primary::before { display: none; } }
.faq details, .buy-guide { border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--mk-border); }