@charset "UTF-8";
/* ============================================================================
   Kyoto (京都) — 基础层：设计令牌 / 重置 / 排版 / 布局 / 通用组件
   ----------------------------------------------------------------------------
   设计语言：「墨 · 翡翠 · 朱」
     · 墨 (sumi)      近黑墨色作为正文与主按钮，权威、克制
     · 翡翠 (jade)    唯一点缀色，用于进行态 / 成功 / 链接
     · 朱 (vermilion) 价格异动 / 秒杀等“需要被注意到”的强调
   排版策略：CJK 场景下不引入外部网络字体（性能 + 中文覆盖 + 避免 CDN 依赖），
     用系统字体栈 + 精细的字距/字重/数字等宽（tabular-nums）建立质感。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
    /* 表面与文字 */
    --k-paper: #f5f4f1;
    --k-paper-2: #efece6;
    --k-surface: #ffffff;
    --k-surface-2: #faf9f7;
    --k-surface-3: #f3f1ec;
    --k-ink: #15181d;
    --k-ink-2: #454b55;
    --k-ink-3: #6c737e;
    --k-ink-4: #98a0ab;
    --k-line: #e7e4dd;
    --k-line-2: #d6d2c9;
    --k-line-3: #c3bfb5;

    /* 点缀色 */
    --k-jade: #0f7a63;
    --k-jade-hi: #0b6351;
    --k-jade-lo: #14967a;
    --k-jade-soft: #e6f2ee;
    --k-jade-line: #bfe0d7;
    --k-verm: #c4432c;
    --k-verm-soft: #fbeae6;
    --k-gold: #966d1f;
    --k-gold-soft: #f6efdd;
    --k-cyan: #1a6f9c;
    --k-cyan-soft: #e5f0f7;

    /* 语义 */
    --k-ok: #0f7a63;
    --k-ok-soft: #e6f2ee;
    --k-warn: #a0691a;
    --k-warn-soft: #f8efdc;
    --k-danger: #c0392b;
    --k-danger-soft: #fbe9e7;
    --k-info: #1a6f9c;
    --k-info-soft: #e5f0f7;
    --k-muted-soft: #eeece8;

    /* 形状 */
    --k-r-xs: 7px;
    --k-r-sm: 11px;
    --k-r-md: 15px;
    --k-r-lg: 20px;
    --k-r-xl: 26px;
    --k-r-pill: 999px;

    /* 阴影（低透明度 + 发丝线，避免“塑料感”） */
    --k-sh-1: 0 1px 2px rgba(19, 21, 26, .05), 0 1px 1px rgba(19, 21, 26, .04);
    --k-sh-2: 0 4px 14px rgba(19, 21, 26, .07), 0 1px 3px rgba(19, 21, 26, .05);
    --k-sh-3: 0 14px 34px rgba(19, 21, 26, .10), 0 4px 10px rgba(19, 21, 26, .05);
    --k-sh-4: 0 28px 70px rgba(19, 21, 26, .16), 0 8px 20px rgba(19, 21, 26, .07);
    --k-ring: 0 0 0 3px rgba(15, 122, 99, .18);

    /* 间距（4pt 栅格） */
    --k-s1: 4px;  --k-s2: 8px;  --k-s3: 12px; --k-s4: 16px;
    --k-s5: 20px; --k-s6: 24px; --k-s7: 32px; --k-s8: 40px;
    --k-s9: 56px; --k-s10: 72px;

    /* 字体 */
    --k-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
        system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
        "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
    --k-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
        "Cascadia Mono", monospace;

    /* 动效 */
    --k-ease: cubic-bezier(.22, .68, .34, 1);
    --k-ease-out: cubic-bezier(.16, 1, .3, 1);
    --k-d1: .12s; --k-d2: .2s; --k-d3: .32s; --k-d4: .5s;

    /* 布局尺寸 */
    --k-wrap: 1280px;
    --k-top-h: 68px;
    --k-z-top: 60; --k-z-drawer: 80; --k-z-modal: 100; --k-z-toast: 120;
}

/* 暗色：以 data-k-mode 驱动（脚本在首屏前落值，无闪白） */
html[data-k-mode="dark"] {
    --k-paper: #0e1013;
    --k-paper-2: #0a0c0f;
    --k-surface: #171a1f;
    --k-surface-2: #1c2026;
    --k-surface-3: #23272e;
    --k-ink: #edf0f4;
    --k-ink-2: #b6bdc7;
    --k-ink-3: #8b939e;
    --k-ink-4: #636b76;
    --k-line: #262b32;
    --k-line-2: #333942;
    --k-line-3: #414852;

    --k-jade: #37b795;
    --k-jade-hi: #4cc9a7;
    --k-jade-lo: #2a9d7f;
    --k-jade-soft: #10241f;
    --k-jade-line: #1d4038;
    --k-verm: #e2684d;
    --k-verm-soft: #2a1814;
    --k-gold: #d3a95a;
    --k-gold-soft: #241d10;
    --k-cyan: #5aa9d0;
    --k-cyan-soft: #12222c;

    --k-ok: #37b795;
    --k-ok-soft: #10241f;
    --k-warn: #d3a95a;
    --k-warn-soft: #241d10;
    --k-danger: #e2684d;
    --k-danger-soft: #2a1814;
    --k-info: #5aa9d0;
    --k-info-soft: #12222c;
    --k-muted-soft: #21252b;

    --k-sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --k-sh-2: 0 4px 16px rgba(0, 0, 0, .45);
    --k-sh-3: 0 16px 38px rgba(0, 0, 0, .5);
    --k-sh-4: 0 30px 74px rgba(0, 0, 0, .6);
    --k-ring: 0 0 0 3px rgba(55, 183, 149, .22);
    color-scheme: dark;
}

/* ---------- 2. 重置与基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.k-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--k-font);
    font-size: 15px;
    line-height: 1.62;
    color: var(--k-ink);
    background: var(--k-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.k-body.k-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.28; letter-spacing: -.01em; color: var(--k-ink); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--k-jade-soft); color: var(--k-jade-hi); }

/* 统一的可见焦点环（仅键盘） */
:focus-visible { outline: 2px solid var(--k-jade); outline-offset: 2px; border-radius: 4px; }

/* 细滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--k-line-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--k-line-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--k-line-3); background-clip: content-box; }

/* ---------- 3. 布局 ---------- */
.k-wrap { width: 100%; max-width: var(--k-wrap); margin: 0 auto; padding: 0 var(--k-s6); }

.k-body > .k-pjax { display: block; min-height: 40vh; }

.k-main { padding: var(--k-s7) 0 var(--k-s9); }
.k-main--narrow .k-wrap { max-width: 880px; }
.k-main--item { padding-top: var(--k-s6); }

.k-skip {
    position: fixed; left: 50%; top: 8px; transform: translate(-50%, -160%);
    z-index: var(--k-z-toast); background: var(--k-ink); color: var(--k-surface);
    padding: 10px 18px; border-radius: var(--k-r-pill); font-size: 14px; font-weight: 600;
    transition: transform var(--k-d2) var(--k-ease);
}
.k-skip:focus { transform: translate(-50%, 0); }

.k-kicker {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--k-ink-4); font-family: var(--k-mono);
}

/* ---------- 4. 顶栏 ---------- */
.k-top {
    position: sticky; top: 0; z-index: var(--k-z-top);
    background: color-mix(in srgb, var(--k-surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--k-d3) var(--k-ease), box-shadow var(--k-d3) var(--k-ease),
        background var(--k-d3) var(--k-ease);
}
.k-top.is-stuck {
    border-bottom-color: var(--k-line);
    box-shadow: var(--k-sh-1);
    background: color-mix(in srgb, var(--k-surface) 92%, transparent);
}

.k-top__inner {
    height: var(--k-top-h);
    display: flex; align-items: center; gap: var(--k-s5);
}

.k-burger {
    display: none; flex: none; width: 42px; height: 42px;
    border: 1px solid var(--k-line); background: var(--k-surface);
    border-radius: var(--k-r-sm); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    transition: background var(--k-d2) var(--k-ease), border-color var(--k-d2) var(--k-ease);
}
.k-burger span { display: block; width: 17px; height: 1.6px; background: var(--k-ink); border-radius: 2px; transition: transform var(--k-d2) var(--k-ease); }
.k-burger:hover { border-color: var(--k-line-2); background: var(--k-surface-2); }

/* 品牌 */
.k-brand { display: inline-flex; align-items: center; gap: var(--k-s3); flex: none; }
.k-brand__mark {
    width: 40px; height: 40px; border-radius: var(--k-r-sm); overflow: hidden; flex: none;
    display: grid; place-items: center; background: var(--k-surface-2);
    border: 1px solid var(--k-line); box-shadow: var(--k-sh-1);
}
.k-brand__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-brand__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.k-brand__name {
    font-size: 17px; font-weight: 800; letter-spacing: -.015em; color: var(--k-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.k-brand__tag { font-style: normal; font-size: 11px; color: var(--k-ink-4); letter-spacing: .02em; }

/* 主导航 */
.k-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.k-nav__head { display: none; }
.k-nav__list { display: flex; align-items: center; gap: 2px; }

.k-nav__link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 13px; border-radius: var(--k-r-sm);
    font-size: 14.5px; font-weight: 600; color: var(--k-ink-2);
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    position: relative;
    transition: color var(--k-d2) var(--k-ease), background var(--k-d2) var(--k-ease);
}
.k-nav__ico { font-size: 15px; color: var(--k-ink-4); transition: color var(--k-d2) var(--k-ease); }
.k-nav__link:hover { color: var(--k-ink); background: var(--k-surface-3); }
.k-nav__link:hover .k-nav__ico { color: var(--k-jade); }
.k-nav__link.active { color: var(--k-jade-hi); background: var(--k-jade-soft); }
.k-nav__link.active .k-nav__ico { color: var(--k-jade); }

/* 顶栏右侧工具区 */
.k-top__tools { display: flex; align-items: center; gap: var(--k-s2); margin-left: auto; flex: none; }

.k-quicksearch { display: block; }
.k-quicksearch__box {
    display: flex; align-items: center; gap: var(--k-s2);
    height: 40px; padding: 0 var(--k-s4);
    border: 1px solid var(--k-line); background: var(--k-surface-2);
    border-radius: var(--k-r-pill); width: 210px;
    transition: border-color var(--k-d2) var(--k-ease), box-shadow var(--k-d2) var(--k-ease), background var(--k-d2) var(--k-ease), width var(--k-d3) var(--k-ease);
}
.k-quicksearch__box i { color: var(--k-ink-4); font-size: 14px; }
.k-quicksearch__box input {
    border: 0; background: none; outline: none; width: 100%; font-size: 14px; color: var(--k-ink);
}
.k-quicksearch__box input::placeholder { color: var(--k-ink-4); }
.k-quicksearch__box:focus-within { border-color: var(--k-jade); box-shadow: var(--k-ring); background: var(--k-surface); width: 250px; }

/* 图标按钮 */
.k-iconbtn {
    position: relative; width: 40px; height: 40px; flex: none;
    display: inline-grid; place-items: center;
    border: 1px solid var(--k-line); background: var(--k-surface);
    border-radius: var(--k-r-sm); cursor: pointer; font-size: 15px; color: var(--k-ink-2);
    transition: background var(--k-d2) var(--k-ease), border-color var(--k-d2) var(--k-ease), color var(--k-d2) var(--k-ease);
}
.k-iconbtn:hover { background: var(--k-surface-3); border-color: var(--k-line-2); color: var(--k-ink); }
.k-iconbtn--sm { width: 34px; height: 34px; font-size: 14px; }
.k-iconbtn__badge {
    position: absolute; right: -4px; bottom: -4px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 99px; background: var(--k-jade); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
    border: 2px solid var(--k-surface); font-family: var(--k-mono);
}

/* 主题切换：日/月图标随模式互斥显示 */
.k-theme-toggle .k-ico-dark { display: none; }
html[data-k-mode="dark"] .k-theme-toggle .k-ico-light { display: none; }
html[data-k-mode="dark"] .k-theme-toggle .k-ico-dark { display: inline-block; }

/* 下拉气泡（语言 / 用户 / 排序共用） */
.k-pop { position: relative; }
.k-pop__menu {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 210px;
    background: var(--k-surface); border: 1px solid var(--k-line);
    border-radius: var(--k-r-md); box-shadow: var(--k-sh-3);
    padding: var(--k-s2); z-index: var(--k-z-drawer);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985);
    transform-origin: top left;
    transition: opacity var(--k-d2) var(--k-ease), transform var(--k-d2) var(--k-ease), visibility var(--k-d2);
}
.k-pop__menu--right { left: auto; right: 0; transform-origin: top right; }
.k-pop.is-open .k-pop__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.k-pop__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-ink-4); padding: var(--k-s2) var(--k-s3); font-family: var(--k-mono); }
.k-pop__item {
    width: 100%; display: flex; align-items: center; gap: var(--k-s3);
    padding: 9px var(--k-s3); border: 0; background: none; cursor: pointer;
    border-radius: var(--k-r-xs); font-size: 14px; font-weight: 500; color: var(--k-ink-2); text-align: left;
    transition: background var(--k-d1) var(--k-ease), color var(--k-d1) var(--k-ease);
}
.k-pop__item i { font-size: 14px; color: var(--k-ink-4); width: 16px; text-align: center; }
.k-pop__item:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-pop__item.is-active { color: var(--k-jade-hi); background: var(--k-jade-soft); }
.k-pop__item.is-active i { color: var(--k-jade); }
.k-pop__item span { flex: 1 1 auto; }
.k-pop__check { opacity: 0; width: auto !important; }
.k-pop__item.is-active .k-pop__check { opacity: 1; }
.k-pop__sep { height: 1px; background: var(--k-line); margin: var(--k-s2) var(--k-s3); }
.k-pop__item--danger { color: var(--k-danger); }
.k-pop__item--danger i { color: var(--k-danger); }
.k-pop__item--danger:hover { background: var(--k-danger-soft); }
.k-pop__userhead { display: flex; align-items: center; gap: var(--k-s3); padding: var(--k-s3); border-bottom: 1px solid var(--k-line); margin-bottom: var(--k-s2); }
.k-pop__userhead img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--k-line); }
.k-pop__userhead b { display: block; font-size: 14px; }
.k-pop__userhead i { font-style: normal; font-size: 12.5px; color: var(--k-jade); font-weight: 600; }

/* 用户胶囊 */
.k-userchip {
    display: inline-flex; align-items: center; gap: var(--k-s3);
    height: 42px; padding: 0 var(--k-s3) 0 5px;
    border: 1px solid var(--k-line); background: var(--k-surface);
    border-radius: var(--k-r-pill); cursor: pointer;
    transition: border-color var(--k-d2) var(--k-ease), background var(--k-d2) var(--k-ease);
}
.k-userchip:hover { border-color: var(--k-line-2); background: var(--k-surface-2); }
.k-userchip__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--k-line); }
.k-userchip__meta { display: flex; flex-direction: column; line-height: 1.16; text-align: left; }
.k-userchip__name { font-size: 13.5px; font-weight: 700; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-userchip__bal { font-style: normal; font-size: 12px; color: var(--k-jade); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-userchip__caret { font-size: 12px; color: var(--k-ink-4); }

.k-authbtns { display: flex; align-items: center; gap: var(--k-s2); }

/* PJAX 顶部进度条 */
.k-top__progress {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
    transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, var(--k-jade), var(--k-jade-lo));
    opacity: 0; transition: opacity var(--k-d2) var(--k-ease);
}
.k-pjax.is-pjax-loading ~ .k-top .k-top__progress,
.k-top.is-loading .k-top__progress { opacity: 1; animation: k-progress 1.1s var(--k-ease) infinite; }
@keyframes k-progress {
    0%   { transform: scaleX(0); }
    60%  { transform: scaleX(.85); }
    100% { transform: scaleX(.96); }
}

/* ---------- 5. 公告条 ---------- */
.k-announce {
    background: var(--k-ink); color: var(--k-surface);
    font-size: 13.5px;
}
.k-announce__inner { display: flex; align-items: center; gap: var(--k-s3); min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
.k-announce__badge {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 3px 10px; border-radius: var(--k-r-pill);
    background: color-mix(in srgb, var(--k-jade) 92%, #fff); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.k-announce__text {
    flex: 1 1 auto; min-width: 0; opacity: .92;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.k-announce__text > * { margin: 0 !important; font-size: inherit !important; color: inherit !important; font-family: inherit !important; line-height: inherit !important; display: inline; }
.k-announce__more {
    flex: none; display: inline-flex; align-items: center; gap: 3px;
    background: none; border: 0; cursor: pointer; color: inherit; opacity: .82;
    font-size: 13px; font-weight: 600; padding: 4px 6px; border-radius: var(--k-r-xs);
}
.k-announce__more:hover { opacity: 1; background: color-mix(in srgb, var(--k-surface) 14%, transparent); }
.k-announce__close {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center;
    background: none; border: 0; cursor: pointer; opacity: .6; color: inherit; border-radius: var(--k-r-xs);
}
.k-announce__close:hover { opacity: 1; background: color-mix(in srgb, var(--k-surface) 14%, transparent); }
.k-announce.is-closing { animation: k-collapse .28s var(--k-ease) forwards; }
@keyframes k-collapse { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- 6. 遮罩与弹窗 ---------- */
.k-scrim {
    position: fixed; inset: 0; z-index: calc(var(--k-z-drawer) - 1);
    background: rgba(12, 14, 18, .46);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity var(--k-d3) var(--k-ease);
}
.k-scrim.is-on { opacity: 1; }

.k-notice-modal { position: fixed; inset: 0; z-index: var(--k-z-modal); display: grid; place-items: center; padding: var(--k-s5); }
.k-notice-modal__mask { position: absolute; inset: 0; background: rgba(12, 14, 18, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: k-fade var(--k-d3) var(--k-ease); }
.k-notice-modal__panel {
    position: relative; width: min(640px, 100%); max-height: min(82vh, 720px);
    display: flex; flex-direction: column;
    background: var(--k-surface); border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg); box-shadow: var(--k-sh-4);
    animation: k-pop var(--k-d3) var(--k-ease-out);
}
.k-notice-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-s4); padding: var(--k-s6) var(--k-s6) var(--k-s4); border-bottom: 1px solid var(--k-line); }
.k-notice-modal__title { display: flex; align-items: center; gap: var(--k-s2); font-size: 19px; margin-top: 4px; }
.k-notice-modal__title i { color: var(--k-jade); }
.k-notice-modal__body { padding: var(--k-s5) var(--k-s6); overflow-y: auto; font-size: 14.5px; line-height: 1.75; color: var(--k-ink-2); }
.k-notice-modal__body img { border-radius: var(--k-r-sm); }
.k-notice-modal__body a { color: var(--k-jade); font-weight: 600; }
.k-notice-modal__body a:hover { text-decoration: underline; }
.k-notice-modal__foot { display: flex; align-items: center; gap: var(--k-s3); padding: var(--k-s4) var(--k-s6) var(--k-s5); border-top: 1px solid var(--k-line); flex-wrap: wrap; }
.k-notice-modal__tip { flex: 1 1 100%; font-size: 12px; color: var(--k-ink-4); }
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* ---------- 7. 按钮 ---------- */
.k-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s2);
    height: 42px; padding: 0 var(--k-s5);
    border: 1px solid transparent; border-radius: var(--k-r-sm);
    font-size: 14.5px; font-weight: 650; letter-spacing: .01em;
    cursor: pointer; white-space: nowrap; text-align: center;
    background: var(--k-surface); color: var(--k-ink);
    transition: background var(--k-d2) var(--k-ease), color var(--k-d2) var(--k-ease),
        border-color var(--k-d2) var(--k-ease), transform var(--k-d1) var(--k-ease), box-shadow var(--k-d2) var(--k-ease);
}
.k-btn:active { transform: translateY(1px); }
.k-btn i { font-size: 14px; }
.k-btn--sm { height: 36px; padding: 0 var(--k-s4); font-size: 13.5px; border-radius: var(--k-r-xs); }
.k-btn--lg { height: 50px; padding: 0 var(--k-s7); font-size: 15.5px; border-radius: var(--k-r-md); }
.k-btn--block { width: 100%; }

.k-btn--ink { background: var(--k-ink); color: var(--k-surface); border-color: var(--k-ink); box-shadow: var(--k-sh-1); }
.k-btn--ink:hover { background: color-mix(in srgb, var(--k-ink) 86%, var(--k-jade)); border-color: transparent; color: var(--k-surface); }

.k-btn--jade { background: var(--k-jade); color: #fff; border-color: var(--k-jade); box-shadow: var(--k-sh-1); }
.k-btn--jade:hover { background: var(--k-jade-hi); color: #fff; }

.k-btn--line { background: var(--k-surface); color: var(--k-ink); border-color: var(--k-line-2); }
.k-btn--line:hover { background: var(--k-surface-2); border-color: var(--k-line-3); color: var(--k-ink); }

.k-btn--ghost { background: transparent; color: var(--k-ink-2); }
.k-btn--ghost:hover { background: var(--k-surface-3); color: var(--k-ink); }

.k-btn--soft { background: var(--k-jade-soft); color: var(--k-jade-hi); border-color: var(--k-jade-line); }
.k-btn--soft:hover { background: color-mix(in srgb, var(--k-jade-soft) 80%, var(--k-jade)); color: var(--k-jade-hi); }

.k-btn:disabled, .k-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- 8. 面板 ---------- */
.k-panel {
    background: var(--k-surface); border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg); box-shadow: var(--k-sh-1); overflow: hidden;
}
.k-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--k-s4);
    padding: var(--k-s5) var(--k-s6); border-bottom: 1px solid var(--k-line);
}
.k-panel__title { font-size: 18px; }
.k-panel__body { padding: var(--k-s6); }

/* ---------- 9. 徽章 / 标签 ---------- */
.badge-soft {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: var(--k-r-pill);
    font-size: 12.5px; font-weight: 600; line-height: 1.7;
    background: var(--k-muted-soft); color: var(--k-ink-2);
    border: 1px solid transparent; white-space: nowrap;
}
.badge-soft i { font-size: 11.5px; }
.badge-soft-success { background: var(--k-ok-soft); color: var(--k-ok); }
.badge-soft-primary { background: var(--k-jade-soft); color: var(--k-jade-hi); }
.badge-soft-info    { background: var(--k-info-soft); color: var(--k-info); }
.badge-soft-warning { background: var(--k-warn-soft); color: var(--k-warn); }
.badge-soft-danger  { background: var(--k-danger-soft); color: var(--k-danger); }
.badge-soft-muted   { background: var(--k-muted-soft); color: var(--k-ink-3); }
button.badge-soft { cursor: pointer; border-color: var(--k-line); }
button.badge-soft:hover { border-color: var(--k-jade-line); }

/* 程序 format.badge() 产出的 a-badge */
.a-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 9px; border-radius: var(--k-r-xs);
    font-size: 12px; font-weight: 600; line-height: 1.8;
    background: var(--k-muted-soft); color: var(--k-ink-2);
}
.a-badge-primary { background: var(--k-jade-soft); color: var(--k-jade-hi); }
.a-badge-success { background: var(--k-ok-soft); color: var(--k-ok); }
.a-badge-warning { background: var(--k-warn-soft); color: var(--k-warn); }
.a-badge-danger  { background: var(--k-danger-soft); color: var(--k-danger); }
.a-badge-info    { background: var(--k-info-soft); color: var(--k-info); }

/* 商品标签（后台自定义：red/orange/green/cyan/blue/purple/pink/gray） */
.k-tag {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--k-r-xs);
    font-size: 11.5px; font-weight: 600; line-height: 1.7; white-space: nowrap;
    background: var(--k-muted-soft); color: var(--k-ink-2);
}
.k-tag--red { background: var(--k-danger-soft); color: var(--k-danger); }
.k-tag--orange { background: var(--k-warn-soft); color: var(--k-warn); }
.k-tag--green { background: var(--k-ok-soft); color: var(--k-ok); }
.k-tag--cyan { background: var(--k-cyan-soft); color: var(--k-cyan); }
.k-tag--blue { background: var(--k-info-soft); color: var(--k-info); }
.k-tag--purple { background: var(--k-jade-soft); color: var(--k-jade-hi); }
.k-tag--pink { background: var(--k-verm-soft); color: var(--k-verm); }
.k-tag--gray { background: var(--k-muted-soft); color: var(--k-ink-3); }

/* ---------- 10. 表单控件 ---------- */
.form-control {
    display: block; width: 100%; height: 44px; padding: 0 var(--k-s4);
    font-family: inherit; font-size: 14.5px; color: var(--k-ink);
    background: var(--k-surface-2); border: 1px solid var(--k-line);
    border-radius: var(--k-r-sm); outline: none;
    transition: border-color var(--k-d2) var(--k-ease), box-shadow var(--k-d2) var(--k-ease), background var(--k-d2) var(--k-ease);
}
.form-control::placeholder { color: var(--k-ink-4); }
.form-control:hover { border-color: var(--k-line-2); }
.form-control:focus { border-color: var(--k-jade); background: var(--k-surface); box-shadow: var(--k-ring); }
textarea.form-control { height: auto; padding: var(--k-s3) var(--k-s4); line-height: 1.6; resize: vertical; }
select.form-control { appearance: none; background-image: none; padding-right: var(--k-s6); cursor: pointer; }

.k-field { display: block; }
.k-field__label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 650; color: var(--k-ink-2); margin-bottom: var(--k-s2);
}
.k-field__label i { color: var(--k-ink-4); font-size: 12.5px; }

.input-group { display: flex; align-items: stretch; }
.input-group > .form-control { flex: 1 1 auto; border-radius: var(--k-r-sm) 0 0 var(--k-r-sm); }
.input-group > .form-control:not(:first-child) { border-radius: 0; }
.input-group > *:last-child { border-radius: 0 var(--k-r-sm) var(--k-r-sm) 0; }
.input-group > .form-control:only-child { border-radius: var(--k-r-sm); }

/* 单选 / 复选 */
.form-check { display: inline-flex; align-items: center; gap: var(--k-s2); min-height: 24px; }
.form-check-inline { margin-right: var(--k-s4); }
.form-check-input {
    width: 17px; height: 17px; margin: 0; flex: none;
    accent-color: var(--k-jade); cursor: pointer;
}
.form-check-label { font-size: 14px; color: var(--k-ink-2); cursor: pointer; }

/* 程序注入的表单小件 */
.icon-spin { animation: k-spin .9s linear infinite; display: inline-block; }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* ---------- 11. 状态：骨架 / 空 / 错误 / 通用 ---------- */
.k-skel { display: flex; flex-direction: column; gap: 2px; }
.k-skel__row {
    display: flex; align-items: center; gap: var(--k-s4);
    padding: var(--k-s4); border-radius: var(--k-r-md);
    background: var(--k-surface);
}
.k-skel__thumb, .k-skel__lines i, .k-skel__price {
    background: linear-gradient(90deg, var(--k-surface-3) 25%, color-mix(in srgb, var(--k-surface-3) 55%, var(--k-surface)) 37%, var(--k-surface-3) 63%);
    background-size: 400% 100%; animation: k-shimmer 1.5s ease infinite; border-radius: 8px;
}
.k-skel__thumb { width: 64px; height: 64px; flex: none; border-radius: var(--k-r-sm); }
.k-skel__lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.k-skel__lines i { display: block; height: 12px; }
.k-skel__lines i:first-child { width: 58%; height: 15px; }
.k-skel__lines i:last-child { width: 34%; }
.k-skel__price { width: 76px; height: 22px; flex: none; }
@keyframes k-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.k-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-s3); padding: var(--k-s8) var(--k-s6); }
.k-state--lg { padding: var(--k-s10) var(--k-s6); }
.k-state__ico {
    width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
    background: var(--k-surface-3); color: var(--k-ink-3); font-size: 24px; margin-bottom: var(--k-s2);
}
.k-state__ico--warn { background: var(--k-warn-soft); color: var(--k-warn); }
.k-state__ico--spin { background: var(--k-jade-soft); color: var(--k-jade); }
.k-state__title { font-size: 18px; }
.k-state__title--lg { font-size: 26px; }
.k-state__text { font-size: 14px; color: var(--k-ink-3); max-width: 460px; }

.k-empty, .k-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-s3); padding: var(--k-s9) var(--k-s6); }
.k-empty__ico, .k-error__ico { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; }
.k-empty__ico { background: var(--k-surface-3); color: var(--k-ink-3); }
.k-error__ico { background: var(--k-danger-soft); color: var(--k-danger); }
.k-empty__title, .k-error__title { font-size: 17px; }
.k-empty__text, .k-error__text { font-size: 13.5px; color: var(--k-ink-3); max-width: 420px; }
.k-empty__text:empty { display: none; }

/* ---------- 12. 页脚 ---------- */
.k-foot { margin-top: var(--k-s9); background: var(--k-surface); border-top: 1px solid var(--k-line); }
.k-foot__inner { display: flex; gap: var(--k-s9); padding: var(--k-s8) var(--k-s6); flex-wrap: wrap; }
.k-foot__brand { flex: 1 1 300px; min-width: 240px; }
.k-brand--foot .k-brand__mark { width: 44px; height: 44px; }
.k-brand--foot .k-brand__name { font-size: 18px; }
.k-foot__desc { margin-top: var(--k-s4); font-size: 13.5px; color: var(--k-ink-3); max-width: 380px; line-height: 1.7; }
.k-foot__cols { display: flex; gap: var(--k-s9); flex-wrap: wrap; }
.k-foot__col { display: flex; flex-direction: column; gap: var(--k-s3); min-width: 108px; }
.k-foot__title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-ink-4); font-family: var(--k-mono); margin-bottom: var(--k-s1); }
.k-foot__col a { font-size: 14px; color: var(--k-ink-2); transition: color var(--k-d2) var(--k-ease); }
.k-foot__col a:hover { color: var(--k-jade); }
.k-foot__bar { border-top: 1px solid var(--k-line); background: var(--k-surface-2); }
.k-foot__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s4); padding: var(--k-s4) var(--k-s6); flex-wrap: wrap; }
.k-foot__copy, .k-foot__icp { font-size: 12.5px; color: var(--k-ink-4); }
.k-foot__icp:hover { color: var(--k-jade); }

/* ---------- 13. 回到顶部 ---------- */
.k-totop {
    position: fixed; right: var(--k-s6); bottom: var(--k-s6); z-index: calc(var(--k-z-top) + 2);
    width: 46px; height: 46px; display: grid; place-items: center;
    border: 1px solid var(--k-line-2); background: var(--k-surface); color: var(--k-ink);
    border-radius: 50%; cursor: pointer; box-shadow: var(--k-sh-2);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.94);
    transition: opacity var(--k-d3) var(--k-ease), transform var(--k-d3) var(--k-ease), visibility var(--k-d3), background var(--k-d2) var(--k-ease);
}
.k-totop.is-on { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.k-totop:hover { background: var(--k-surface-3); border-color: var(--k-line-3); }
.k-totop i { font-size: 15px; }
.k-totop__ring { position: absolute; inset: -1px; width: 48px; height: 48px; transform: rotate(-90deg); pointer-events: none; }
.k-totop__ring circle { fill: none; stroke-width: 2; }
.k-totop__track { stroke: transparent; }
.k-totop__fill { stroke: var(--k-jade); stroke-linecap: round; stroke-dasharray: 125.6; stroke-dashoffset: 125.6; transition: stroke-dashoffset .1s linear; }

/* ---------- 14. 轻提示 ---------- */
.k-toast {
    position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 18px);
    z-index: var(--k-z-toast);
    display: inline-flex; align-items: center; gap: var(--k-s2);
    padding: 11px 18px; border-radius: var(--k-r-pill);
    background: var(--k-ink); color: var(--k-surface);
    font-size: 14px; font-weight: 600; box-shadow: var(--k-sh-3);
    opacity: 0; visibility: hidden; transition: opacity var(--k-d3) var(--k-ease), transform var(--k-d3) var(--k-ease), visibility var(--k-d3);
    max-width: calc(100vw - 32px);
}
.k-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.k-toast.is-ok i { color: var(--k-jade-lo); }
.k-toast.is-err i { color: #ff8a76; }

/* ---------- 15. 在线客服 ---------- */
.k-svc { position: fixed; right: var(--k-s6); bottom: calc(var(--k-s6) + 58px); z-index: calc(var(--k-z-top) + 1); display: flex; align-items: center; gap: var(--k-s2); }
.k-svc__label {
    background: var(--k-ink); color: var(--k-surface); font-size: 12.5px; font-weight: 600;
    padding: 7px 12px; border-radius: var(--k-r-pill); box-shadow: var(--k-sh-2);
    opacity: 0; transform: translateX(6px); transition: opacity var(--k-d3) var(--k-ease), transform var(--k-d3) var(--k-ease);
    pointer-events: none; white-space: nowrap;
}
.k-svc:hover .k-svc__label { opacity: 1; transform: translateX(0); }
.k-svc__btn {
    position: relative; width: 46px; height: 46px; display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background: linear-gradient(140deg, var(--k-jade-lo), var(--k-jade-hi));
    box-shadow: 0 8px 22px rgba(15, 122, 99, .34);
    transition: transform var(--k-d2) var(--k-ease), box-shadow var(--k-d2) var(--k-ease);
}
.k-svc__btn i { font-size: 18px; }
.k-svc__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 122, 99, .42); }
.k-svc__pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--k-jade); animation: k-pulse 2.4s var(--k-ease) infinite; }
@keyframes k-pulse { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }

.k-svc-modal { position: fixed; inset: 0; z-index: var(--k-z-modal); display: grid; place-items: center; padding: var(--k-s5); }
.k-svc-modal__mask { position: absolute; inset: 0; background: rgba(12, 14, 18, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: k-fade var(--k-d3) var(--k-ease); }
.k-svc-modal__panel {
    position: relative; width: min(430px, 100%); background: var(--k-surface);
    border: 1px solid var(--k-line); border-radius: var(--k-r-lg); box-shadow: var(--k-sh-4);
    animation: k-pop var(--k-d3) var(--k-ease-out); overflow: hidden;
}
.k-svc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s4); padding: var(--k-s5); border-bottom: 1px solid var(--k-line); }
.k-svc-modal__title { display: flex; align-items: center; gap: var(--k-s3); }
.k-svc-modal__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--k-jade-soft); color: var(--k-jade); font-size: 18px; }
.k-svc-modal__title b { display: block; font-size: 15.5px; }
.k-svc-modal__title i { display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 12.5px; color: var(--k-ink-3); }
.k-svc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-jade-lo); box-shadow: 0 0 0 3px var(--k-jade-soft); }
.k-svc-modal__body { padding: var(--k-s5); }
.k-svc-modal__greet { font-size: 13.5px; color: var(--k-ink-3); margin-bottom: var(--k-s5); line-height: 1.7; }
.k-svc-info { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s4); padding: var(--k-s3) 0; border-bottom: 1px dashed var(--k-line); font-size: 14px; }
.k-svc-info__k { color: var(--k-ink-3); }
.k-svc-info__v { font-weight: 600; display: inline-flex; align-items: center; gap: var(--k-s3); font-variant-numeric: tabular-nums; }
.k-copybtn {
    border: 1px solid var(--k-jade-line); background: var(--k-jade-soft); color: var(--k-jade-hi);
    font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: var(--k-r-pill); cursor: pointer;
    transition: background var(--k-d2) var(--k-ease);
}
.k-copybtn:hover { background: color-mix(in srgb, var(--k-jade-soft) 70%, var(--k-jade)); color: #fff; border-color: transparent; }
.k-svc-modal__actions { display: flex; flex-direction: column; gap: var(--k-s3); margin-top: var(--k-s5); }
.k-svc-modal__foot { display: flex; align-items: center; gap: 4px; justify-content: center; padding: var(--k-s3); border-top: 1px solid var(--k-line); background: var(--k-surface-2); font-size: 12.5px; color: var(--k-ink-4); }
.k-svc-modal__foot a { color: var(--k-jade); font-weight: 600; }

/* ---------- 16. 工具类 ---------- */
.k-crumbs { display: flex; align-items: center; gap: var(--k-s2); font-size: 13px; color: var(--k-ink-3); margin-bottom: var(--k-s5); flex-wrap: wrap; }
.k-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--k-ink-3); transition: color var(--k-d2) var(--k-ease); }
.k-crumbs a:hover { color: var(--k-jade); }
.k-crumbs__sep { font-size: 10px; color: var(--k-ink-4); }
.k-crumbs__cur { color: var(--k-ink-2); font-weight: 600; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.k-pagehead { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s5); margin-bottom: var(--k-s6); }
.k-pagehead__title { font-size: clamp(24px, 3.4vw, 34px); margin: var(--k-s2) 0 var(--k-s2); letter-spacing: -.02em; }
.k-pagehead__sub { font-size: 14.5px; color: var(--k-ink-3); max-width: 52ch; }
.k-pagehead__aside { width: 72px; height: 72px; flex: none; display: grid; place-items: center; border-radius: var(--k-r-lg); background: var(--k-surface); border: 1px solid var(--k-line); color: var(--k-jade); font-size: 30px; box-shadow: var(--k-sh-1); }

.k-noscript { margin: 0; padding: var(--k-s4) var(--k-s6); background: var(--k-warn-soft); color: var(--k-warn); font-size: 14px; text-align: center; }

/* 滚动显现（渐进增强；JS 未执行也不影响可见性） */
.k-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--k-d4) var(--k-ease-out), transform var(--k-d4) var(--k-ease-out); }
.k-reveal.is-in { opacity: 1; transform: none; }

/* 打印：去掉交互元素与装饰 */
@media print {
    .k-top, .k-announce, .k-svc, .k-totop, .k-foot__cols, .k-buybar, .k-toast, .k-scrim { display: none !important; }
    body.k-body { background: #fff; }
    .k-panel { box-shadow: none; border-color: #ddd; }
}