/*
 * SmartCat 多表面 CSS 纹理库。
 * 纹理类只提供背景图层变量，由页面、页头、导航、卡片和页脚各自叠加到
 * 原有渐变之上。颜色从所在表面的 --texture-ink / --texture-accent 继承，
 * 因此同一纹理可以安全适配深色与浅色配色。
 */
:root {
    --texture-ink: currentColor;
    --texture-accent: currentColor;
    --surface-texture-image: linear-gradient(transparent, transparent);
    --surface-texture-size: auto;
    --surface-texture-position: 0 0;
}

.surface-texture-none {
    --surface-texture-image: linear-gradient(transparent, transparent);
    --surface-texture-size: auto;
    --surface-texture-position: 0 0;
}

.surface-texture-grid {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 .7px, transparent 1.2px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.4%, transparent) 0 .6px, transparent 1.1px);
    --surface-texture-size: 54px 54px, 73px 73px;
    --surface-texture-position: 0 0, 17px 13px;
}

.surface-texture-paper {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 2.8%, transparent) 0 .65px, transparent 1.15px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.2%, transparent) 0 .55px, transparent 1.05px);
    --surface-texture-size: 48px 48px, 67px 67px;
    --surface-texture-position: 0 0, 19px 11px;
}

.surface-texture-rings {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 42px, color-mix(in srgb, var(--texture-ink) 2.5%, transparent) 43px 44px);
    --surface-texture-size: 124px 104px;
    --surface-texture-position: 0 0;
}

.surface-texture-petals {
    --surface-texture-image:
        radial-gradient(ellipse at 28% 34%, color-mix(in srgb, var(--texture-accent) 8%, transparent) 0 3px, transparent 4px),
        radial-gradient(ellipse at 70% 65%, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 2px, transparent 3px);
    --surface-texture-size: 88px 78px, 104px 92px;
    --surface-texture-position: 0 0, 19px 14px;
}

.surface-texture-stars {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 25%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 8%, transparent) 0 1px, transparent 1.5px);
    --surface-texture-size: 54px 54px, 72px 72px;
    --surface-texture-position: 0 0, 17px 22px;
}

.surface-texture-aurora {
    --surface-texture-image:
        radial-gradient(ellipse at 8% 18%, color-mix(in srgb, var(--texture-accent) 7%, transparent), transparent 43%),
        radial-gradient(ellipse at 92% 72%, color-mix(in srgb, var(--texture-ink) 4%, transparent), transparent 48%),
        radial-gradient(circle at 48% 42%, color-mix(in srgb, var(--texture-accent) 2%, transparent), transparent 36%);
    --surface-texture-size: auto, auto, 240px 190px;
    --surface-texture-position: 0 0, 0 0, 31px 17px;
}

.surface-texture-ink {
    --surface-texture-image:
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-ink) 2.2%, transparent) 0 .7px, transparent 1.3px),
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--texture-accent) 5%, transparent), transparent 32%);
    --surface-texture-size: 62px 48px, auto;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-waves {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 40px, color-mix(in srgb, var(--texture-ink) 2.5%, transparent) 41px 42px);
    --surface-texture-size: 132px 92px;
    --surface-texture-position: 0 0;
}

.surface-texture-linen {
    --surface-texture-image:
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-ink) 2.2%, transparent) 0 .6px, transparent 1.2px),
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-accent) 1.8%, transparent) 0 .5px, transparent 1.1px);
    --surface-texture-size: 34px 47px, 51px 39px;
    --surface-texture-position: 0 0, 13px 9px;
}

.surface-texture-dots {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 1px, transparent 1.6px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 3%, transparent) 0 1px, transparent 1.6px);
    --surface-texture-size: 30px 30px, 42px 42px;
    --surface-texture-position: 0 0, 11px 9px;
}

.surface-texture-lattice {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 .8px, transparent 1.4px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.4%, transparent) 0 .7px, transparent 1.3px);
    --surface-texture-size: 46px 46px, 64px 64px;
    --surface-texture-position: 0 0, 19px 17px;
}

.surface-texture-terrazzo {
    --surface-texture-image:
        radial-gradient(ellipse at 22% 28%, color-mix(in srgb, var(--texture-accent) 7%, transparent) 0 2px, transparent 3px),
        radial-gradient(ellipse at 73% 64%, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 1px, transparent 2px),
        radial-gradient(ellipse at 44% 76%, color-mix(in srgb, var(--texture-accent) 2.8%, transparent) 0 1.2px, transparent 2px);
    --surface-texture-size: 68px 60px, 82px 72px, 92px 84px;
    --surface-texture-position: 0 0, 13px 17px, 29px 7px;
}

.surface-texture-mist {
    --surface-texture-image:
        radial-gradient(ellipse at 8% 18%, color-mix(in srgb, var(--texture-accent) 7%, transparent), transparent 42%),
        radial-gradient(ellipse at 86% 76%, color-mix(in srgb, var(--texture-ink) 4%, transparent), transparent 46%);
    --surface-texture-size: auto, auto;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-facets {
    --surface-texture-image:
        linear-gradient(135deg, color-mix(in srgb, var(--texture-ink) 2%, transparent) 25%, transparent 25%),
        linear-gradient(225deg, color-mix(in srgb, var(--texture-accent) 2%, transparent) 25%, transparent 25%),
        linear-gradient(315deg, color-mix(in srgb, var(--texture-ink) 1.5%, transparent) 25%, transparent 25%);
    --surface-texture-size: 48px 48px, 48px 48px, 48px 48px;
    --surface-texture-position: 0 0, 18px 0, 18px 18px;
}

.surface-texture-botanical {
    --surface-texture-image:
        radial-gradient(ellipse at 18% 58%, color-mix(in srgb, var(--texture-accent) 6%, transparent) 0 4px, transparent 5px),
        radial-gradient(ellipse at 63% 31%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 3px, transparent 4px),
        radial-gradient(ellipse at 42% 72%, color-mix(in srgb, var(--texture-ink) 2%, transparent) 0 2px, transparent 3px);
    --surface-texture-size: 90px 74px, 104px 90px, 128px 112px;
    --surface-texture-position: 0 0, 23px 12px, 0 0;
}

.surface-texture-confetti {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 9%, transparent) 0 1.5px, transparent 2.4px),
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 1px, transparent 1.8px);
    --surface-texture-size: 50px 50px, 68px 68px;
    --surface-texture-position: 0 0, 17px 13px;
}

.surface-texture-breeze {
    --surface-texture-image:
        radial-gradient(ellipse at 72% 34%, color-mix(in srgb, var(--texture-accent) 3%, transparent), transparent 44%),
        radial-gradient(ellipse at 18% 22%, color-mix(in srgb, var(--texture-ink) 3%, transparent), transparent 42%);
    --surface-texture-size: 126px 104px, 220px 160px;
    --surface-texture-position: 0 0, 14px 9px;
}

.surface-texture-sprigs {
    --surface-texture-image:
        radial-gradient(ellipse at 35% 28%, color-mix(in srgb, var(--texture-accent) 6%, transparent) 0 3px, transparent 4px),
        radial-gradient(ellipse at 62% 61%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 2px, transparent 3px),
        radial-gradient(ellipse at 19% 78%, color-mix(in srgb, var(--texture-ink) 2%, transparent) 0 2px, transparent 3px);
    --surface-texture-size: 86px 74px, 94px 82px, 142px 120px;
    --surface-texture-position: 0 0, 18px 13px, 0 0;
}

.surface-texture-ripple {
    --surface-texture-image:
        repeating-radial-gradient(circle at 18% 42%, transparent 0 18px, color-mix(in srgb, var(--texture-accent) 3%, transparent) 19px 20px, transparent 21px 39px),
        radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--texture-ink) 3.5%, transparent) 0 1.5px, transparent 2.5px);
    --surface-texture-size: 116px 92px, 96px 84px;
    --surface-texture-position: 0 0, 21px 15px;
}

.surface-texture-gingham {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.8%, transparent) 0 1.2px, transparent 1.8px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 2%, transparent) 0 .8px, transparent 1.4px);
    --surface-texture-size: 58px 58px, 82px 82px;
    --surface-texture-position: 0 0, 23px 19px;
}

.surface-texture-citrus {
    --surface-texture-image:
        radial-gradient(circle at 18% 22%, transparent 0 5px, color-mix(in srgb, var(--texture-accent) 6%, transparent) 6px 7px, transparent 8px),
        radial-gradient(circle at 73% 66%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 44% 42%, color-mix(in srgb, var(--texture-accent) 2%, transparent) 0 1px, transparent 2px);
    --surface-texture-size: 78px 72px, 94px 84px, 136px 116px;
    --surface-texture-position: 0 0, 17px 11px, 0 0;
}

.surface-texture-cloudlets {
    --surface-texture-image:
        radial-gradient(ellipse at 18% 32%, color-mix(in srgb, var(--texture-accent) 5%, transparent) 0 10px, transparent 11px),
        radial-gradient(ellipse at 64% 61%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 12px, transparent 13px),
        radial-gradient(ellipse at 42% 48%, color-mix(in srgb, var(--texture-accent) 1.8%, transparent), transparent 64%);
    --surface-texture-size: 132px 92px, 158px 108px, 230px 166px;
    --surface-texture-position: 0 0, 27px 18px, 0 0;
}

/*
 * “白勺奶霜”页头专属纹理：用稀疏的蕾丝弧、花心与柔光模拟兜帽滚边。
 * 图形保持低对比且不使用贯穿页面的直线，避免干扰品牌标题与简介文字。
 */
.surface-texture-baishao-lace {
    --surface-texture-image:
        radial-gradient(circle at 18px 3px, transparent 0 10px, color-mix(in srgb, var(--texture-ink) 5.5%, transparent) 10.5px 11.5px, transparent 12px),
        radial-gradient(circle at 54px 3px, transparent 0 10px, color-mix(in srgb, var(--texture-accent) 7%, transparent) 10.5px 11.5px, transparent 12px),
        radial-gradient(circle at 36px 25px, color-mix(in srgb, var(--texture-accent) 7%, transparent) 0 1.7px, transparent 2.4px),
        radial-gradient(ellipse at 84% 18%, color-mix(in srgb, var(--texture-accent) 5%, transparent), transparent 38%);
    --surface-texture-size: 72px 44px, 72px 44px, 72px 44px, auto;
    --surface-texture-position: 0 1px, 0 1px, 0 0, 0 0;
}

/*
 * “白勺奶霜”页脚专属纹理：由一个柔和掌垫、三枚趾印和错位小花瓣组成。
 * 大间距与较低不透明度让图案只承担收尾装饰，不与联系信息争夺注意力。
 */
.surface-texture-baishao-paws {
    --surface-texture-image:
        radial-gradient(ellipse at 50% 66%, color-mix(in srgb, var(--texture-accent) 6.5%, transparent) 0 4px, transparent 4.9px),
        radial-gradient(circle at 42% 44%, color-mix(in srgb, var(--texture-ink) 5%, transparent) 0 2px, transparent 2.8px),
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--texture-ink) 5%, transparent) 0 2.1px, transparent 2.9px),
        radial-gradient(circle at 58% 44%, color-mix(in srgb, var(--texture-ink) 5%, transparent) 0 2px, transparent 2.8px),
        radial-gradient(ellipse at 78% 24%, color-mix(in srgb, var(--texture-accent) 4.5%, transparent) 0 2.4px, transparent 3.2px);
    --surface-texture-size: 148px 96px, 148px 96px, 148px 96px, 148px 96px, 126px 88px;
    --surface-texture-position: 0 0, 0 0, 0 0, 0 0, 29px 17px;
}

/* “铃音海风”页面：低对比浪沫弧线与气泡，保持大面积海盐留白。 */
.surface-texture-rinne-seafoam {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 35px, color-mix(in srgb, var(--texture-ink) 3.6%, transparent) 36px 37px, transparent 38px 72px),
        radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--texture-accent) 7%, transparent) 0 1.8px, transparent 2.7px),
        radial-gradient(circle at 72% 64%, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 1.2px, transparent 2.1px);
    --surface-texture-size: 148px 96px, 92px 86px, 128px 112px;
    --surface-texture-position: 0 0, 17px 11px, 43px 29px;
}

/* 页头阳光从右上方散开，并以柔和海蓝光晕托住标题。 */
.surface-texture-rinne-sunrays {
    --surface-texture-image:
        repeating-conic-gradient(from 198deg at 92% 0%, color-mix(in srgb, var(--texture-accent) 7%, transparent) 0 5deg, transparent 5deg 16deg),
        radial-gradient(ellipse at 88% 4%, color-mix(in srgb, var(--texture-accent) 10%, transparent), transparent 42%),
        radial-gradient(ellipse at 12% 72%, color-mix(in srgb, var(--texture-ink) 4%, transparent), transparent 48%);
    --surface-texture-size: auto, auto, auto;
    --surface-texture-position: 0 0, 0 0, 0 0;
}

/* 深海蓝导航使用极淡的水平潮纹，不降低菜单文字对比度。 */
.surface-texture-rinne-waves {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 28px, color-mix(in srgb, var(--texture-accent) 7%, transparent) 29px 30px, transparent 31px 57px),
        radial-gradient(circle at 78% 24%, color-mix(in srgb, white 7%, transparent) 0 1px, transparent 1.8px);
    --surface-texture-size: 116px 58px, 92px 76px;
    --surface-texture-position: 0 1px, 21px 9px;
}

/* 页脚贝壳、海星和珍珠点阵呼应铃音的发饰与腰间挂饰。 */
.surface-texture-rinne-shells {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 50% 100%, transparent 0 7px, color-mix(in srgb, var(--texture-accent) 7%, transparent) 7.5px 8.5px, transparent 9px 18px),
        radial-gradient(circle at 24% 38%, color-mix(in srgb, var(--texture-ink) 5%, transparent) 0 1.6px, transparent 2.4px),
        radial-gradient(circle at 76% 62%, color-mix(in srgb, var(--texture-accent) 8%, transparent) 0 2px, transparent 3px),
        conic-gradient(from 18deg at 52% 42%, color-mix(in srgb, var(--texture-accent) 5%, transparent) 0 8%, transparent 8% 20%);
    --surface-texture-size: 142px 92px, 118px 86px, 154px 104px, 176px 128px;
    --surface-texture-position: 0 0, 19px 13px, 41px 27px, 0 0;
}

/* “霜月王庭”页面：交错冰裂纹与疏落霜晶，保持正文区域安静清晰。 */
.surface-texture-nino-frost-crystal {
    --surface-texture-image:
        linear-gradient(135deg, transparent 46%, rgba(99, 201, 244, .13) 47% 49%, transparent 50%),
        linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, .3) 47% 49%, transparent 50%),
        radial-gradient(circle at 72% 28%, rgba(169, 236, 255, .25) 0 2px, transparent 3px);
    --surface-texture-size: 86px 86px, 86px 86px, 124px 108px;
    --surface-texture-position: 0 0, 43px 43px, 19px 11px;
}

/* 页头使用低对比极光光束，呼应尼诺的霜晶王冠。 */
.surface-texture-nino-aurora-crown {
    --surface-texture-image:
        radial-gradient(ellipse at 52% -18%, rgba(169, 236, 255, .34), transparent 52%),
        linear-gradient(112deg, transparent 24%, rgba(99, 201, 244, .14) 39%, transparent 54%),
        linear-gradient(68deg, transparent 48%, rgba(194, 173, 255, .12) 58%, transparent 68%);
    --surface-texture-size: auto, auto, auto;
    --surface-texture-position: 0 0, 0 0, 0 0;
}

/* 深色导航上的几何冰符文使用稀疏线条，避免干扰菜单可读性。 */
.surface-texture-nino-ice-runes {
    --surface-texture-image:
        linear-gradient(30deg, transparent 43%, rgba(169, 236, 255, .14) 44% 46%, transparent 47%),
        linear-gradient(150deg, transparent 43%, rgba(255, 255, 255, .12) 44% 46%, transparent 47%),
        radial-gradient(circle at 50% 50%, transparent 0 11px, rgba(99, 201, 244, .12) 12px 13px, transparent 14px);
    --surface-texture-size: 72px 62px, 72px 62px, 108px 94px;
    --surface-texture-position: 0 0, 0 0, 18px 9px;
}

/* 页脚雪原用低密度雪点和远山斜线收束页面。 */
.surface-texture-nino-snowfield {
    --surface-texture-image:
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .2) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 68%, rgba(169, 236, 255, .18) 0 2px, transparent 3px),
        linear-gradient(162deg, transparent 52%, rgba(99, 201, 244, .1) 53% 55%, transparent 56%);
    --surface-texture-size: 92px 78px, 134px 112px, 164px 126px;
    --surface-texture-position: 0 0, 23px 17px, 41px 29px;
}

/* “海神蓝银”页面：稀疏蓝银藤脉和金色叶脉保持正文区域通透。 */
.surface-texture-tangsan-blue-silver-vines {
    --surface-texture-image:
        radial-gradient(ellipse at 22% 64%, rgba(43, 115, 185, .08) 0 3px, transparent 4px),
        linear-gradient(124deg, transparent 47%, rgba(28, 109, 170, .08) 48% 49%, transparent 50%),
        linear-gradient(56deg, transparent 47%, rgba(214, 175, 85, .07) 48% 49%, transparent 50%);
    --surface-texture-size: 92px 78px, 124px 112px, 146px 128px;
    --surface-texture-position: 0 0, 19px 11px, 47px 29px;
}

/* 页头海神光轮使用同心金环与淡蓝海光承托标题。 */
.surface-texture-tangsan-seagod-halo {
    --surface-texture-image:
        radial-gradient(circle at 50% -12%, transparent 0 56px, rgba(214, 175, 85, .18) 57px 59px, transparent 60px 92px),
        radial-gradient(ellipse at 50% 0%, rgba(185, 232, 255, .25), transparent 52%),
        linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, .11) 41%, transparent 56%);
    --surface-texture-size: 216px 152px, auto, auto;
    --surface-texture-position: 50% -18px, 0 0, 0 0;
}

/* 深色导航用浅色潮线和稀疏金环形成低干扰神纹。 */
.surface-texture-tangsan-tide-runes {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 25px, rgba(185, 232, 255, .12) 26px 27px, transparent 28px 53px),
        radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(214, 175, 85, .1) 11px 12px, transparent 13px);
    --surface-texture-size: 116px 58px, 104px 92px;
    --surface-texture-position: 0 0, 27px 13px;
}

/* 页脚深海星潮将微光星点和远处潮线压低到背景层。 */
.surface-texture-tangsan-deep-sea-stars {
    --surface-texture-image:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .18) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 64%, rgba(185, 232, 255, .2) 0 1.5px, transparent 2.5px),
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 37px, rgba(214, 175, 85, .08) 38px 39px, transparent 40px 76px);
    --surface-texture-size: 78px 72px, 124px 108px, 168px 104px;
    --surface-texture-position: 0 0, 21px 17px, 0 0;
}

/* “梦境蝴蝶”页面：轻蝶翼与丝带线维持柔和、透气的正文背景。 */
.surface-texture-xiaowu-dream-butterflies {
    --surface-texture-image:
        radial-gradient(ellipse at 28% 34%, rgba(201, 139, 187, .09) 0 2px, transparent 3px),
        linear-gradient(42deg, transparent 47%, rgba(242, 183, 210, .08) 48% 49%, transparent 50%),
        linear-gradient(138deg, transparent 47%, rgba(154, 106, 166, .065) 48% 49%, transparent 50%);
    --surface-texture-size: 86px 72px, 118px 104px, 136px 116px;
    --surface-texture-position: 0 0, 17px 23px, 43px 11px;
}

.surface-texture-xiaowu-rabbit-moon {
    --surface-texture-image:
        radial-gradient(circle at 50% -18%, transparent 0 54px, rgba(255, 245, 252, .28) 55px 58px, transparent 59px 88px),
        radial-gradient(ellipse at 45% 4%, rgba(255, 255, 255, .2), transparent 54%),
        linear-gradient(118deg, transparent 25%, rgba(255, 255, 255, .12) 42%, transparent 58%);
    --surface-texture-size: 206px 148px, auto, auto;
    --surface-texture-position: 50% -20px, 0 0, 0 0;
}

.surface-texture-xiaowu-silk-ribbons {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 28px, rgba(247, 217, 235, .12) 29px 30px, transparent 31px 58px),
        linear-gradient(126deg, transparent 46%, rgba(242, 183, 210, .09) 47% 48%, transparent 49%);
    --surface-texture-size: 122px 62px, 148px 116px;
    --surface-texture-position: 0 0, 31px 17px;
}

.surface-texture-xiaowu-stardust-garden {
    --surface-texture-image:
        radial-gradient(circle at 16% 26%, rgba(255, 255, 255, .2) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 62%, rgba(247, 217, 235, .22) 0 1.5px, transparent 2.5px),
        radial-gradient(ellipse at 50% 100%, transparent 0 34px, rgba(242, 183, 210, .09) 35px 36px, transparent 37px 72px);
    --surface-texture-size: 72px 68px, 116px 104px, 156px 98px;
    --surface-texture-position: 0 0, 19px 13px, 0 0;
}