/* ============================================================================
   Love UI (LUI) — 情侣纪念小站统一设计系统 v1.0
   高档、克制、暖纸感 + 玫瑰木莓点缀；浅色/深色自适应。
   两版页面（index.html / index-v2.html）与管理员后台必须共用本文件，
   禁止另起一套视觉语言。配套：assets/icons.svg 线性图标。
   规范见 docs/DESIGN_SPEC.md。
   ============================================================================ */

/* ---------- 1. 设计 Token ---------- */
:root {
    /* 底色（暖纸） */
    --bg: #F6F4F3;
    --bg-glow: rgba(214, 92, 128, 0.10);
    --elev: #FFFFFF;
    --elev-2: #FFFFFF;
    --soft: #F1EDEB;
    --tint: #FAECEF;          /* 耳语玫瑰：轻填充 */
    --tint-2: #F4F6F9;        /* 冷灰填充（控制台） */

    /* 文字 */
    --ink: #1E191B;
    --ink-2: #5C5357;
    --ink-3: #81787B;
    --ink-inv: #FFFFFF;

    /* 发丝线 */
    --line: rgba(30, 20, 25, 0.07);
    --line-2: rgba(30, 20, 25, 0.13);

    /* 主色：玫瑰木莓（克制，不做糖果粉） */
    --rose: #C94C73;
    --rose-2: #B2365E;
    --rose-3: #E4749A;
    --rose-ink: #FFFFFF;
    --rose-tint: #F8E6EC;
    --rose-tint-2: #F3D6DF;
    --grad-rose: linear-gradient(135deg, #E87A9E 0%, #CC4E76 52%, #B0345C 100%);
    --grad-rose-soft: linear-gradient(135deg, #FDEFF3 0%, #F8DDE6 100%);

    /* 点缀金（极少量，用于纪念日/高分） */
    --gold: #B8945A;
    --gold-tint: #F6EEDF;

    /* 语义色 */
    --green: #2E9E6B;  --green-tint: #E2F3EA;
    --amber: #BE7E27;  --amber-tint: #F8EEDD;
    --red: #CE4A4A;    --red-tint: #FBE8E8;
    --blue: #4279C4;   --blue-tint: #E8F0FA;

    /* 阴影：分层、柔和、带一点暖调 */
    --sh-xs: 0 1px 2px rgba(33, 18, 26, 0.05);
    --sh-sm: 0 1px 2px rgba(33, 18, 26, 0.05), 0 6px 16px rgba(33, 18, 26, 0.06);
    --sh-md: 0 2px 8px rgba(33, 18, 26, 0.06), 0 14px 36px rgba(33, 18, 26, 0.10);
    --sh-lg: 0 10px 20px rgba(33, 18, 26, 0.08), 0 28px 64px rgba(33, 18, 26, 0.16);
    --sh-rose: 0 6px 18px rgba(201, 76, 115, 0.28);
    --sh-rose-sm: 0 3px 10px rgba(201, 76, 115, 0.22);

    /* 圆角 */
    --r-xs: 9px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* 字阶 */
    --f-caption: 11px;
    --f-mini: 12px;
    --f-sub: 13px;
    --f-body: 15px;
    --f-title: 17px;
    --f-h3: 20px;
    --f-h2: 24px;
    --f-h1: 30px;
    --f-display: 36px;

    /* 动效 */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
    --t-fast: 0.16s;
    --t: 0.24s;
    --t-slow: 0.34s;

    --tabbar-h: 64px;
}

/* 深色：炭黑暖调 */
:root[data-theme="dark"] {
    --bg: #121012;
    --bg-glow: rgba(214, 92, 128, 0.12);
    --elev: #1C191B;
    --elev-2: #242024;
    --soft: #262226;
    --tint: #2A2026;
    --tint-2: #1E2127;

    --ink: #F3EEF0;
    --ink-2: #B0A6AA;
    --ink-3: #7C7378;
    --ink-inv: #1E191B;

    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.15);

    --rose: #E2668C;
    --rose-2: #EE85A6;
    --rose-3: #E87A9E;
    --rose-ink: #FFFFFF;
    --rose-tint: rgba(226, 102, 140, 0.14);
    --rose-tint-2: rgba(226, 102, 140, 0.22);
    --grad-rose: linear-gradient(135deg, #E4759A 0%, #D05178 55%, #B23960 100%);
    --grad-rose-soft: linear-gradient(135deg, rgba(226,102,140,.16), rgba(226,102,140,.06));

    --gold: #D3B27A;
    --gold-tint: rgba(211, 178, 122, 0.15);

    --green: #47B585;  --green-tint: rgba(71, 181, 133, 0.14);
    --amber: #D69A45;  --amber-tint: rgba(214, 154, 69, 0.14);
    --red: #E06A6A;    --red-tint: rgba(224, 106, 106, 0.14);
    --blue: #6C99D8;   --blue-tint: rgba(108, 153, 216, 0.15);

    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.28);
    --sh-md: 0 2px 8px rgba(0, 0, 0, 0.32), 0 14px 36px rgba(0, 0, 0, 0.42);
    --sh-lg: 0 10px 20px rgba(0, 0, 0, 0.36), 0 28px 64px rgba(0, 0, 0, 0.55);
    --sh-rose: 0 6px 18px rgba(226, 102, 140, 0.22);
    --sh-rose-sm: 0 3px 10px rgba(226, 102, 140, 0.18);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #121012; --bg-glow: rgba(214, 92, 128, 0.12);
        --elev: #1C191B; --elev-2: #242024; --soft: #262226; --tint: #2A2026; --tint-2: #1E2127;
        --ink: #F3EEF0; --ink-2: #B0A6AA; --ink-3: #7C7378; --ink-inv: #1E191B;
        --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15);
        --rose: #E2668C; --rose-2: #EE85A6; --rose-3: #E87A9E; --rose-ink: #fff;
        --rose-tint: rgba(226,102,140,.14); --rose-tint-2: rgba(226,102,140,.22);
        --grad-rose: linear-gradient(135deg,#E4759A 0%,#D05178 55%,#B23960 100%);
        --grad-rose-soft: linear-gradient(135deg, rgba(226,102,140,.16), rgba(226,102,140,.06));
        --gold: #D3B27A; --gold-tint: rgba(211,178,122,.15);
        --green: #47B585; --green-tint: rgba(71,181,133,.14);
        --amber: #D69A45; --amber-tint: rgba(214,154,69,.14);
        --red: #E06A6A; --red-tint: rgba(224,106,106,.14);
        --blue: #6C99D8; --blue-tint: rgba(108,153,216,.15);
        --sh-xs: 0 1px 2px rgba(0,0,0,.3);
        --sh-sm: 0 1px 2px rgba(0,0,0,.28), 0 6px 16px rgba(0,0,0,.28);
        --sh-md: 0 2px 8px rgba(0,0,0,.32), 0 14px 36px rgba(0,0,0,.42);
        --sh-lg: 0 10px 20px rgba(0,0,0,.36), 0 28px 64px rgba(0,0,0,.55);
        --sh-rose: 0 6px 18px rgba(226,102,140,.22);
        --sh-rose-sm: 0 3px 10px rgba(226,102,140,.18);
    }
}

/* ---------- 1b. 多主题 ---------- */
/* 主题清单（管理员后台可选）：rose 玫瑰浅(默认) / dark 炭黑暖调 / moonlight 月光银蓝
   / sakura 樱花粉 / matcha 抹茶森语 / caramel 焦糖奶茶 / lavender 星河紫
   / ocean 海风蓝 / nightgold 暗夜黑金 / ivory 奶油白。切换：html[data-theme=主题名]。 */

/* 月光银蓝：清冷银白底 + 雾蓝 */
:root[data-theme="moonlight"] {
    --bg: #F3F6FA; --bg-glow: rgba(91, 127, 166, 0.10);
    --elev: #FFFFFF; --elev-2: #F8FAFD; --soft: #EDF1F6; --tint: #EAF0F7; --tint-2: #F2F6FB;
    --ink: #1A2230; --ink-2: #55606F; --ink-3: #737A87; --ink-inv: #FFFFFF;
    --line: rgba(26, 34, 48, 0.07); --line-2: rgba(26, 34, 48, 0.13);
    --rose: #5B7FA6; --rose-2: #4A6E96; --rose-3: #7EA0C2; --rose-ink: #FFFFFF;
    --rose-tint: #E4ECF6; --rose-tint-2: #D5E2EF;
    --grad-rose: linear-gradient(135deg, #7FA3C6 0%, #5B7FA6 55%, #45688F 100%);
    --grad-rose-soft: linear-gradient(135deg, #EAF1F8 0%, #DCE7F2 100%);
    --gold: #A88E5A; --gold-tint: #F3EEDF;
    --green: #3E8E7A; --green-tint: #E0F2ED; --amber: #A67C3E; --amber-tint: #F7EDDC;
    --red: #C25A5A; --red-tint: #F9E7E7; --blue: #4E7EB0; --blue-tint: #E6EFF8;
    --sh-xs: 0 1px 2px rgba(30, 44, 66, 0.05);
    --sh-sm: 0 1px 2px rgba(30, 44, 66, 0.05), 0 6px 16px rgba(30, 44, 66, 0.07);
    --sh-md: 0 2px 8px rgba(30, 44, 66, 0.07), 0 14px 36px rgba(30, 44, 66, 0.11);
    --sh-lg: 0 10px 20px rgba(30, 44, 66, 0.09), 0 28px 64px rgba(30, 44, 66, 0.17);
    --sh-rose: 0 6px 18px rgba(74, 110, 150, 0.26);
    --sh-rose-sm: 0 3px 10px rgba(74, 110, 150, 0.20);
}

/* 樱花粉：浅粉底 + 豆沙粉 */
:root[data-theme="sakura"] {
    --bg: #FDF6F7; --bg-glow: rgba(217, 122, 150, 0.10);
    --elev: #FFFFFF; --elev-2: #FEFAFC; --soft: #F8ECEF; --tint: #FBE9EE; --tint-2: #FDF3F6;
    --ink: #33201F; --ink-2: #7C5C5A; --ink-3: #917674; --ink-inv: #FFFFFF;
    --line: rgba(51, 32, 31, 0.07); --line-2: rgba(51, 32, 31, 0.12);
    --rose: #AE6278; --rose-2: #C45F7E; --rose-3: #E89DB3; --rose-ink: #FFFFFF;
    --rose-tint: #FBE4EC; --rose-tint-2: #F6D3DF;
    --grad-rose: linear-gradient(135deg, #ECA6BA 0%, #D97A96 55%, #C25475 100%);
    --grad-rose-soft: linear-gradient(135deg, #FDF0F4 0%, #F8DDE6 100%);
    --gold: #C2A064; --gold-tint: #F8F0E2;
    --green: #4E9A7C; --green-tint: #E4F3EC; --amber: #C08448; --amber-tint: #F9EEDF;
    --red: #D05C6A; --red-tint: #FBE7EA; --blue: #5E86B8; --blue-tint: #E8EFFA;
    --sh-xs: 0 1px 2px rgba(80, 40, 50, 0.05);
    --sh-sm: 0 1px 2px rgba(80, 40, 50, 0.05), 0 6px 16px rgba(80, 40, 50, 0.07);
    --sh-md: 0 2px 8px rgba(80, 40, 50, 0.07), 0 14px 36px rgba(80, 40, 50, 0.11);
    --sh-lg: 0 10px 20px rgba(80, 40, 50, 0.09), 0 28px 64px rgba(80, 40, 50, 0.16);
    --sh-rose: 0 6px 18px rgba(217, 122, 150, 0.28);
    --sh-rose-sm: 0 3px 10px rgba(217, 122, 150, 0.22);
}

/* 抹茶森语：浅米绿底 + 抹茶绿 */
:root[data-theme="matcha"] {
    --bg: #F7F6EF; --bg-glow: rgba(107, 143, 113, 0.10);
    --elev: #FFFFFF; --elev-2: #FBFBF5; --soft: #EFF1E6; --tint: #EAF0E2; --tint-2: #F4F5EC;
    --ink: #232A1E; --ink-2: #5E6853; --ink-3: #777E6F; --ink-inv: #FFFFFF;
    --line: rgba(35, 42, 30, 0.07); --line-2: rgba(35, 42, 30, 0.12);
    --rose: #608166; --rose-2: #587A5F; --rose-3: #8CAE92; --rose-ink: #FFFFFF;
    --rose-tint: #E5EEE1; --rose-tint-2: #D6E4D1;
    --grad-rose: linear-gradient(135deg, #8FB095 0%, #6B8F71 55%, #53715B 100%);
    --grad-rose-soft: linear-gradient(135deg, #EFF4EA 0%, #DDE8D8 100%);
    --gold: #AC9459; --gold-tint: #F4EEDF;
    --green: #4E8A5E; --green-tint: #E0EFE3; --amber: #AE7C3C; --amber-tint: #F7EDDA;
    --red: #C2584E; --red-tint: #F8E6E3; --blue: #5E84AC; --blue-tint: #E7EFF6;
    --sh-xs: 0 1px 2px rgba(40, 52, 36, 0.05);
    --sh-sm: 0 1px 2px rgba(40, 52, 36, 0.05), 0 6px 16px rgba(40, 52, 36, 0.07);
    --sh-md: 0 2px 8px rgba(40, 52, 36, 0.07), 0 14px 36px rgba(40, 52, 36, 0.10);
    --sh-lg: 0 10px 20px rgba(40, 52, 36, 0.09), 0 28px 64px rgba(40, 52, 36, 0.16);
    --sh-rose: 0 6px 18px rgba(107, 143, 113, 0.26);
    --sh-rose-sm: 0 3px 10px rgba(107, 143, 113, 0.20);
}

/* 焦糖奶茶：暖棕底 + 焦糖 */
:root[data-theme="caramel"] {
    --bg: #FBF5EE; --bg-glow: rgba(176, 122, 79, 0.10);
    --elev: #FFFFFF; --elev-2: #FDF9F3; --soft: #F2E9DE; --tint: #F4E7D7; --tint-2: #FAF3EA;
    --ink: #2E231A; --ink-2: #6F5C4A; --ink-3: #8A7766; --ink-inv: #FFFFFF;
    --line: rgba(46, 35, 26, 0.07); --line-2: rgba(46, 35, 26, 0.13);
    --rose: #9E6E47; --rose-2: #9C6B42; --rose-3: #C79A72; --rose-ink: #FFFFFF;
    --rose-tint: #F3E7D8; --rose-tint-2: #EAD8C2;
    --grad-rose: linear-gradient(135deg, #CB9F77 0%, #B07A4F 55%, #94603B 100%);
    --grad-rose-soft: linear-gradient(135deg, #F9F0E4 0%, #F0DFCB 100%);
    --gold: #B8945A; --gold-tint: #F6EEDF;
    --green: #5E8A6A; --green-tint: #E4F0E6; --amber: #B07A3E; --amber-tint: #F8EDDA;
    --red: #C25A4E; --red-tint: #F8E6E2; --blue: #5E7FA6; --blue-tint: #E7EFF7;
    --sh-xs: 0 1px 2px rgba(60, 42, 28, 0.05);
    --sh-sm: 0 1px 2px rgba(60, 42, 28, 0.05), 0 6px 16px rgba(60, 42, 28, 0.07);
    --sh-md: 0 2px 8px rgba(60, 42, 28, 0.07), 0 14px 36px rgba(60, 42, 28, 0.11);
    --sh-lg: 0 10px 20px rgba(60, 42, 28, 0.09), 0 28px 64px rgba(60, 42, 28, 0.16);
    --sh-rose: 0 6px 18px rgba(176, 122, 79, 0.26);
    --sh-rose-sm: 0 3px 10px rgba(176, 122, 79, 0.20);
}

/* 星河紫：浅紫底 + 紫罗兰 */
:root[data-theme="lavender"] {
    --bg: #F7F5FB; --bg-glow: rgba(138, 111, 176, 0.10);
    --elev: #FFFFFF; --elev-2: #FBF9FE; --soft: #EFECF6; --tint: #ECE7F6; --tint-2: #F6F3FB;
    --ink: #241E33; --ink-2: #5F5672; --ink-3: #7F798D; --ink-inv: #FFFFFF;
    --line: rgba(36, 30, 51, 0.07); --line-2: rgba(36, 30, 51, 0.13);
    --rose: #8A6FB0; --rose-2: #775C9D; --rose-3: #A78FC8; --rose-ink: #FFFFFF;
    --rose-tint: #EBE4F4; --rose-tint-2: #DED2EC;
    --grad-rose: linear-gradient(135deg, #AB95CB 0%, #8A6FB0 55%, #725697 100%);
    --grad-rose-soft: linear-gradient(135deg, #F1EDF8 0%, #E3D9EF 100%);
    --gold: #A98E5A; --gold-tint: #F4EEDF;
    --green: #5E8A72; --green-tint: #E3F0E7; --amber: #A87C42; --amber-tint: #F7EDDD;
    --red: #C2586A; --red-tint: #F8E6E9; --blue: #5E7BB0; --blue-tint: #E7EDF8;
    --sh-xs: 0 1px 2px rgba(50, 40, 70, 0.05);
    --sh-sm: 0 1px 2px rgba(50, 40, 70, 0.05), 0 6px 16px rgba(50, 40, 70, 0.07);
    --sh-md: 0 2px 8px rgba(50, 40, 70, 0.07), 0 14px 36px rgba(50, 40, 70, 0.11);
    --sh-lg: 0 10px 20px rgba(50, 40, 70, 0.09), 0 28px 64px rgba(50, 40, 70, 0.16);
    --sh-rose: 0 6px 18px rgba(138, 111, 176, 0.26);
    --sh-rose-sm: 0 3px 10px rgba(138, 111, 176, 0.20);
}

/* 海风蓝：浅青蓝底 + 海蓝 */
:root[data-theme="ocean"] {
    --bg: #F2F8FA; --bg-glow: rgba(62, 140, 168, 0.10);
    --elev: #FFFFFF; --elev-2: #F7FBFD; --soft: #E9F2F5; --tint: #DFEFF4; --tint-2: #F0F7FA;
    --ink: #1C2A30; --ink-2: #50646E; --ink-3: #707F87; --ink-inv: #FFFFFF;
    --line: rgba(28, 42, 48, 0.07); --line-2: rgba(28, 42, 48, 0.12);
    --rose: #39819B; --rose-2: #347995; --rose-3: #69A9C1; --rose-ink: #FFFFFF;
    --rose-tint: #DCEEF4; --rose-tint-2: #CBE3EB;
    --grad-rose: linear-gradient(135deg, #6FAEC4 0%, #3E8CA8 55%, #2F7189 100%);
    --grad-rose-soft: linear-gradient(135deg, #E9F4F8 0%, #D5E8EF 100%);
    --gold: #A88F5E; --gold-tint: #F4EEDF;
    --green: #3E8A72; --green-tint: #DFF0E9; --amber: #A87E42; --amber-tint: #F7EDDD;
    --red: #C25A5A; --red-tint: #F8E6E6; --blue: #3E7EA8; --blue-tint: #E2EFF7;
    --sh-xs: 0 1px 2px rgba(30, 52, 62, 0.05);
    --sh-sm: 0 1px 2px rgba(30, 52, 62, 0.05), 0 6px 16px rgba(30, 52, 62, 0.07);
    --sh-md: 0 2px 8px rgba(30, 52, 62, 0.07), 0 14px 36px rgba(30, 52, 62, 0.11);
    --sh-lg: 0 10px 20px rgba(30, 52, 62, 0.09), 0 28px 64px rgba(30, 52, 62, 0.16);
    --sh-rose: 0 6px 18px rgba(62, 140, 168, 0.26);
    --sh-rose-sm: 0 3px 10px rgba(62, 140, 168, 0.20);
}

/* 暗夜黑金：深黑底 + 香槟金 */
:root[data-theme="nightgold"] {
    --bg: #131116; --bg-glow: rgba(208, 169, 92, 0.10);
    --elev: #1D1A21; --elev-2: #26222C; --soft: #28242F; --tint: #2A2530; --tint-2: #22262E;
    --ink: #F2EEE8; --ink-2: #ACA59A; --ink-3: #77705F; --ink-inv: #141218;
    --line: rgba(255, 248, 232, 0.08); --line-2: rgba(255, 248, 232, 0.15);
    --rose: #D0A95C; --rose-2: #E2BE74; --rose-3: #C59848; --rose-ink: #141218;
    --rose-tint: rgba(208, 169, 92, 0.14); --rose-tint-2: rgba(208, 169, 92, 0.22);
    --grad-rose: linear-gradient(135deg, #E5C47E 0%, #D0A95C 55%, #B58A3E 100%);
    --grad-rose-soft: linear-gradient(135deg, rgba(208,169,92,.16), rgba(208,169,92,.06));
    --gold: #D8B878; --gold-tint: rgba(216, 184, 120, 0.15);
    --green: #6BAF85; --green-tint: rgba(107, 175, 133, 0.14);
    --amber: #D6A045; --amber-tint: rgba(214, 160, 69, 0.14);
    --red: #E06A6A; --red-tint: rgba(224, 106, 106, 0.14);
    --blue: #6C99D8; --blue-tint: rgba(108, 153, 216, 0.15);
    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 16px rgba(0, 0, 0, 0.28);
    --sh-md: 0 2px 8px rgba(0, 0, 0, 0.32), 0 14px 36px rgba(0, 0, 0, 0.42);
    --sh-lg: 0 10px 20px rgba(0, 0, 0, 0.36), 0 28px 64px rgba(0, 0, 0, 0.55);
    --sh-rose: 0 6px 18px rgba(208, 169, 92, 0.22);
    --sh-rose-sm: 0 3px 10px rgba(208, 169, 92, 0.18);
}

/* 奶油白：极简奶白 + 柔和暖棕 */
:root[data-theme="ivory"] {
    --bg: #FDFCFA; --bg-glow: rgba(169, 138, 109, 0.08);
    --elev: #FFFFFF; --elev-2: #FBFAF7; --soft: #F3F1EC; --tint: #F2EDE4; --tint-2: #F8F6F1;
    --ink: #2A241E; --ink-2: #6E645A; --ink-3: #857D73; --ink-inv: #FFFFFF;
    --line: rgba(42, 36, 30, 0.06); --line-2: rgba(42, 36, 30, 0.12);
    --rose: #91775E; --rose-2: #97785C; --rose-3: #C3A88D; --rose-ink: #FFFFFF;
    --rose-tint: #F2EBE2; --rose-tint-2: #E8DCCE;
    --grad-rose: linear-gradient(135deg, #C7AE94 0%, #A98A6D 55%, #8F7357 100%);
    --grad-rose-soft: linear-gradient(135deg, #F7F2EB 0%, #EDE3D5 100%);
    --gold: #B8945A; --gold-tint: #F6EEDF;
    --green: #6E9276; --green-tint: #E7F0E8; --amber: #AC7E42; --amber-tint: #F7EDDD;
    --red: #C25A52; --red-tint: #F8E6E4; --blue: #6488AC; --blue-tint: #E9F0F6;
    --sh-xs: 0 1px 2px rgba(60, 50, 40, 0.04);
    --sh-sm: 0 1px 2px rgba(60, 50, 40, 0.04), 0 6px 16px rgba(60, 50, 40, 0.06);
    --sh-md: 0 2px 8px rgba(60, 50, 40, 0.06), 0 14px 36px rgba(60, 50, 40, 0.09);
    --sh-lg: 0 10px 20px rgba(60, 50, 40, 0.08), 0 28px 64px rgba(60, 50, 40, 0.14);
    --sh-rose: 0 6px 18px rgba(169, 138, 109, 0.22);
    --sh-rose-sm: 0 3px 10px rgba(169, 138, 109, 0.18);
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    font-size: var(--f-body);
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
/* 页面顶部一层极淡的玫瑰光晕，提升质感 */
.lui-bg-glow::before, body.lui-glow::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(120% 52% at 50% -12%, var(--bg-glow), transparent 62%),
        radial-gradient(70% 34% at 100% 0%, rgba(214, 92, 128, 0.05), transparent 60%);
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--rose); text-decoration: none; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--rose-tint-2); }

/* ---------- 3. 图标 ---------- */
.lui-icon {
    width: 22px; height: 22px; flex: none;
    stroke-width: 1.7;
    fill: none; stroke: currentColor;
}
.lui-icon.s14 { width: 14px; height: 14px; }
.lui-icon.s16 { width: 16px; height: 16px; }
.lui-icon.s18 { width: 18px; height: 18px; }
.lui-icon.s20 { width: 20px; height: 20px; }
.lui-icon.s24 { width: 24px; height: 24px; }
.lui-icon.s28 { width: 28px; height: 28px; }
.lui-icon.s32 { width: 32px; height: 32px; }
/* 填充型图标（如 heart-fill / github）由 symbol 自带 fill，无需额外类 */

/* ---------- 4. 布局壳 ---------- */
.lui-shell {
    position: relative; z-index: 1;
    width: 100%; max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    padding-left: 16px; padding-right: 16px;
}
.lui-shell-admin { max-width: 1024px; }
.lui-body { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
.lui-stack { display: flex; flex-direction: column; gap: 14px; }
.lui-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.lui-flex { display: flex; align-items: center; }
.lui-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lui-wrap { flex-wrap: wrap; }
.lui-flex-1 { flex: 1; min-width: 0; }
.lui-hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.lui-hide-scrollbar::-webkit-scrollbar { display: none; }

/* 大标题区（页面顶部） */
.lui-page-head { padding: 22px 2px 14px; }
.lui-page-head .eyebrow {
    font-size: var(--f-caption); font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--rose); margin-bottom: 6px;
}
.lui-page-head h1 { font-size: var(--f-h1); line-height: 1.15; letter-spacing: -0.02em; }
.lui-page-head .sub { color: var(--ink-2); font-size: var(--f-sub); margin-top: 6px; }

/* 区块小标题 */
.lui-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.lui-sec-head h2 { font-size: var(--f-title); font-weight: 650; }
.lui-sec-head .action { font-size: var(--f-sub); color: var(--rose); display: inline-flex; align-items: center; gap: 3px; }

/* ---------- 5. 卡片 ---------- */
.lui-card {
    background: var(--elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 18px;
}
.lui-card.flush { padding: 0; overflow: hidden; }
.lui-card.tint { background: var(--tint); border-color: transparent; box-shadow: none; }
.lui-card.soft { background: var(--soft); border-color: transparent; box-shadow: none; }
.lui-card.hero {
    background: var(--grad-rose);
    border: none;
    color: #fff;
    box-shadow: var(--sh-rose);
    position: relative; overflow: hidden;
}
.lui-card.hero::after {
    content: ""; position: absolute; right: -48px; top: -64px; width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
    pointer-events: none;
}
.lui-card.hero h2, .lui-card.hero .h-title { color: #fff; }
.lui-card.hero .h-sub { color: rgba(255,255,255,0.82); }
.lui-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.lui-card-head .lui-icon { color: var(--rose); }
.lui-card-head h3 { font-size: var(--f-title); font-weight: 650; }
.lui-card-head .sub { font-size: var(--f-mini); color: var(--ink-3); margin-top: 1px; }
.lui-card-head .spacer { flex: 1; }

/* 圆形图标底座 */
.lui-badge-icon {
    width: 38px; height: 38px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: var(--rose-tint); color: var(--rose);
}
.lui-badge-icon.green { background: var(--green-tint); color: var(--green); }
.lui-badge-icon.amber { background: var(--amber-tint); color: var(--amber); }
.lui-badge-icon.red { background: var(--red-tint); color: var(--red); }
.lui-badge-icon.blue { background: var(--blue-tint); color: var(--blue); }
.lui-badge-icon.gray { background: var(--soft); color: var(--ink-2); }

/* ---------- 6. 按钮 ---------- */
.lui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; padding: 0 18px;
    border-radius: var(--r-sm);
    font-size: var(--f-body); font-weight: 600; white-space: nowrap;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
        background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t);
    user-select: none;
}
.lui-btn:active { transform: scale(0.97); }
.lui-btn.block { display: flex; width: 100%; }
.lui-btn.sm { height: 34px; padding: 0 13px; font-size: var(--f-sub); border-radius: 10px; gap: 5px; }
.lui-btn.xs { height: 28px; padding: 0 10px; font-size: var(--f-mini); border-radius: 8px; gap: 4px; }
.lui-btn.lg { height: 50px; font-size: 16px; border-radius: var(--r-md); }
.lui-btn.primary { background: var(--grad-rose); color: var(--rose-ink); box-shadow: var(--sh-rose-sm); }
.lui-btn.primary:active { box-shadow: none; }
.lui-btn.tonal { background: var(--rose-tint); color: var(--rose); }
.lui-btn.ghost { background: var(--elev); border: 1px solid var(--line-2); color: var(--ink); box-shadow: var(--sh-xs); }
.lui-btn.subtle { background: var(--soft); color: var(--ink-2); }
.lui-btn.danger { background: linear-gradient(135deg, #E57070, #CE4A4A); color: #fff; box-shadow: 0 6px 16px rgba(206,74,74,.25); }
.lui-btn.danger-ghost { background: var(--red-tint); color: var(--red); }
.lui-btn.text { background: transparent; color: var(--rose); padding: 0 8px; height: 36px; }
.lui-btn.text:active { transform: scale(0.96); }
.lui-btn.icon { width: 42px; height: 42px; padding: 0; border-radius: 12px; background: var(--elev); border: 1px solid var(--line); color: var(--ink-2); box-shadow: var(--sh-xs); }
.lui-btn.icon.sm { width: 34px; height: 34px; border-radius: 10px; }
.lui-btn:disabled, .lui-btn[disabled] { opacity: .45; pointer-events: none; }
.lui-btn .lui-icon { width: 19px; height: 19px; }
.lui-btn.sm .lui-icon { width: 16px; height: 16px; }
.lui-btn.loading { color: transparent !important; position: relative; pointer-events: none; }
.lui-btn.loading::after {
    content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    animation: lui-spin .7s linear infinite;
}

/* 浮动按钮 */
.lui-fab {
    position: fixed; right: max(18px, calc(50% - 240px + 18px));
    bottom: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom));
    width: 52px; height: 52px; border-radius: 18px;
    display: grid; place-items: center;
    background: var(--grad-rose); color: #fff;
    box-shadow: var(--sh-rose); z-index: 800;
    transition: transform var(--t-fast) var(--ease);
}
.lui-fab:active { transform: scale(0.92) rotate(90deg); }
.lui-shell-admin ~ .lui-fab, .lui-shell-admin .lui-fab { right: max(18px, calc(50% - 512px + 18px)); }

/* ---------- 7. 表单 ---------- */
.lui-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.lui-field > label, .lui-label { font-size: var(--f-sub); font-weight: 600; color: var(--ink-2); display: block; line-height: 1.5; margin-bottom: 6px; }
.lui-input, .lui-textarea, .lui-select {
    width: 100%;
    background: var(--elev);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: var(--f-body);
    color: var(--ink);
    outline: none;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.lui-input::placeholder, .lui-textarea::placeholder { color: var(--ink-3); }
.lui-input:focus, .lui-textarea:focus, .lui-select:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px var(--rose-tint);
}
.lui-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.lui-input.sm, .lui-select.sm { height: 36px; padding: 6px 11px; font-size: var(--f-sub); }
.lui-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--soft); border-radius: var(--r-pill);
    padding: 9px 14px; color: var(--ink-3);
}
.lui-search input { flex: 1; background: none; border: none; outline: none; font-size: var(--f-sub); }
.lui-search .lui-icon { width: 17px; height: 17px; }

/* iOS 风开关 */
.lui-switch { position: relative; display: inline-block; width: 48px; height: 29px; flex: none; }
.lui-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.lui-switch .track {
    position: absolute; inset: 0; border-radius: 999px; background: var(--line-2);
    pointer-events: none;
    transition: background var(--t) var(--ease);
}
.lui-switch .track::after {
    content: ""; position: absolute; top: 2.5px; left: 2.5px;
    width: 24px; height: 24px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.22);
    transition: transform var(--t) var(--ease-spring);
}
.lui-switch input:checked + .track { background: var(--rose); }
.lui-switch input:checked + .track::after { transform: translateX(19px); }

/* 分段控件 */
.lui-segmented {
    display: flex; gap: 3px; padding: 3px;
    background: var(--soft); border-radius: var(--r-sm);
    overflow-x: auto; scrollbar-width: none;
}
.lui-segmented::-webkit-scrollbar { display: none; }
.lui-segmented button {
    flex: 1 0 auto; min-height: 34px; padding: 0 14px;
    border-radius: 9px; font-size: var(--f-sub); font-weight: 600;
    color: var(--ink-2); white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    transition: all var(--t-fast) var(--ease);
}
.lui-segmented button.active {
    background: var(--elev); color: var(--ink);
    box-shadow: var(--sh-xs);
}

/* 芯片 / 标签 */
.lui-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 13px;
    border-radius: var(--r-pill);
    background: var(--elev); border: 1px solid var(--line);
    font-size: var(--f-sub); font-weight: 500; color: var(--ink-2);
    white-space: nowrap;
    transition: all var(--t-fast) var(--ease);
}
.lui-chip.active { background: var(--rose); border-color: transparent; color: var(--rose-ink); }
.lui-chip:active { transform: scale(0.95); }
.lui-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: var(--f-caption); font-weight: 600; letter-spacing: .02em;
    background: var(--soft); color: var(--ink-2);
}
.lui-tag.rose { background: var(--rose-tint); color: var(--rose); }
.lui-tag.green { background: var(--green-tint); color: var(--green); }
.lui-tag.amber { background: var(--amber-tint); color: var(--amber); }
.lui-tag.red { background: var(--red-tint); color: var(--red); }
.lui-tag.blue { background: var(--blue-tint); color: var(--blue); }
.lui-tag.gold { background: var(--gold-tint); color: var(--gold); }
.lui-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--red); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ---------- 8. iOS 分组列表 ---------- */
.lui-list {
    background: var(--elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xs);
}
.lui-list-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px;
    position: relative;
    min-height: 48px;
}
/* 登录页背景编辑器内：统一行内边距，保证开关行与分段/下拉等行的文字左边缘对齐 */
#loginBgEditorModal .lui-list-row, #adminContent .lui-list-row { padding-left: 0; padding-right: 0; }
#loginBgEditorModal .lui-list-row + .lui-list-row::before, #adminContent .lui-list-row + .lui-list-row::before { left: 0; }
.lui-list-row + .lui-list-row::before {
    content: ""; position: absolute; top: 0; left: 15px; right: 0;
    height: 1px; background: var(--line);
    transform: scaleY(0.5); transform-origin: 0 0;
}
.lui-list-row.clickable { cursor: pointer; transition: background var(--t-fast); }
.lui-list-row.clickable:active { background: var(--soft); }
.lui-list-row .lui-row-icon {
    width: 32px; height: 32px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    background: var(--rose-tint); color: var(--rose);
}
.lui-list-row .lui-row-icon .lui-icon { width: 17px; height: 17px; }
.lui-list-row .lui-row-main { flex: 1; min-width: 0; }
.lui-list-row .lui-row-title { font-size: var(--f-body); font-weight: 500; }
.lui-list-row .lui-row-sub { font-size: var(--f-mini); color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lui-list-row .lui-row-accessory { color: var(--ink-3); flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-sub); }
.lui-list-row .lui-row-accessory .lui-icon { width: 18px; height: 18px; }

/* ---------- 9. 导航 ---------- */
/* 顶部毛玻璃栏 */
.lui-topbar {
    position: sticky; top: 0; z-index: 850;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom: 1px solid var(--line);
    padding: 10px 16px;
    display: flex; align-items: center; gap: 10px;
}
.lui-topbar .t-title { font-size: var(--f-title); font-weight: 650; flex: 1; }
.lui-topbar .t-sub { font-size: var(--f-mini); color: var(--ink-3); }

/* 底部浮动坞（用户端 8 个 tab） */
.lui-tabbar {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: calc(100% - 22px); max-width: 456px;
    z-index: 850;
    display: flex; align-items: stretch;
    padding: 5px;
    background: color-mix(in srgb, var(--elev) 82%, transparent);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--sh-md);
}
.lui-tabbar .tab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 7px 0 6px;
    border-radius: 16px;
    color: var(--ink-3);
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.lui-tabbar .tab .lui-icon { width: 22px; height: 22px; }
.lui-tabbar .tab .t-label { font-size: 10px; font-weight: 500; letter-spacing: .02em; }
.lui-tabbar .tab.active { color: var(--rose); background: var(--rose-tint); }
.lui-tabbar .tab:active { transform: scale(0.92); }

/* 管理员后台横向标签条 */
.lui-admin-tabs {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 12px 2px 14px; scrollbar-width: none;
}
.lui-admin-tabs::-webkit-scrollbar { display: none; }
.lui-admin-tabs .tab {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 16px;
    border-radius: var(--r-pill);
    background: var(--elev); border: 1px solid var(--line);
    color: var(--ink-2); font-size: var(--f-sub); font-weight: 600;
    box-shadow: var(--sh-xs);
    transition: all var(--t-fast) var(--ease);
}
.lui-admin-tabs .tab .lui-icon { width: 17px; height: 17px; }
.lui-admin-tabs .tab.active {
    background: var(--grad-rose); color: #fff; border-color: transparent;
    box-shadow: var(--sh-rose-sm);
}

/* ---------- 10. 浮层 ---------- */
.lui-overlay {
    position: fixed; inset: 0; z-index: 950;
    background: rgba(24, 14, 19, 0.42);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none; align-items: flex-end; justify-content: center;
    padding: 0;
}
.lui-overlay.show { display: flex; animation: lui-fade var(--t) var(--ease); }
.lui-overlay.center { align-items: center; padding: 20px; }
/* 管理控制台全屏覆盖主页面（高于底栏 850），但低于普通弹窗 950，
   保证面板内打开的确认/注册/改密等弹窗能正确浮在其上方，不再被遮挡 */
#adminPanel.lui-overlay { z-index: 940; }
/* 注册弹窗必须高于登录页（#loginPage z-index 999），否则点击注册时弹窗被登录页盖住
   只有登录成功登录页隐藏后弹窗才露出——表现为"登录成功瞬间弹注册框" */
#registerModal.lui-overlay { z-index: 1001; }
.lui-sheet {
    width: 100%; max-width: 480px;
    max-height: 88dvh; overflow-y: auto;
    background: var(--elev);
    border-radius: 26px 26px 0 0;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    box-shadow: var(--sh-lg);
    animation: lui-sheet-up var(--t-slow) var(--ease);
}
.lui-overlay.center .lui-sheet { border-radius: 22px; animation: lui-pop var(--t-slow) var(--ease); }
.lui-sheet .grabber { width: 38px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 4px auto 12px; }
.lui-sheet-title { font-size: var(--f-h3); font-weight: 700; margin: 4px 0 12px; }
.lui-overlay .lui-modal {
    width: 100%; max-width: 380px;
    background: var(--elev);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--sh-lg);
    animation: lui-pop var(--t-slow) var(--ease);
}
.lui-modal .m-title { font-size: var(--f-title); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 9px; }
.lui-modal .m-text { font-size: var(--f-body); color: var(--ink-2); margin-bottom: 18px; }
.lui-modal .m-actions { display: flex; gap: 10px; }
.lui-modal .m-actions .lui-btn { flex: 1; }

/* 顶部轻提示 */
/* Toast 容器：必须全站最顶（99999），否则 toast 会被全屏查看器(10000)/预览(2500)/弹层(2000)遮挡 */
#toastBox { position: fixed; inset: 0; pointer-events: none; z-index: 99999; }
.lui-toast {
    position: fixed; top: calc(14px + env(safe-area-inset-top));
    left: 50%; transform: translateX(-50%) translateY(-14px);
    z-index: 3000;
    display: flex; align-items: center; gap: 9px;
    max-width: calc(100% - 36px);
    padding: 11px 17px;
    border-radius: var(--r-pill);
    background: var(--ink); color: var(--bg);
    font-size: var(--f-sub); font-weight: 500;
    box-shadow: var(--sh-md);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.lui-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lui-toast .lui-icon { width: 18px; height: 18px; }
.lui-toast.success .lui-icon { color: var(--green); }
.lui-toast.error .lui-icon { color: var(--red); }
.lui-toast.warn .lui-icon { color: var(--amber); }
:root[data-theme="dark"] .lui-toast,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lui-toast.success .lui-icon { color: #47B585; }
    :root:not([data-theme="light"]) .lui-toast.error .lui-icon { color: #E06A6A; }
}

/* ---------- 11. 反馈态 ---------- */
.lui-empty {
    text-align: center;
    padding: 40px 24px;
    color: var(--ink-3);
}
.lui-empty .e-icon {
    width: 64px; height: 64px; margin: 0 auto 14px;
    border-radius: 20px;
    display: grid; place-items: center;
    background: var(--tint); color: var(--rose);
}
.lui-empty .e-icon .lui-icon { width: 30px; height: 30px; }
.lui-empty .e-title { font-size: var(--f-title); font-weight: 650; color: var(--ink-2); margin-bottom: 4px; }
.lui-empty .e-text { font-size: var(--f-sub); line-height: 1.6; }
.lui-empty .e-action { margin-top: 16px; }

.lui-spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid var(--line-2);
    border-top-color: var(--rose);
    animation: lui-spin .75s linear infinite;
}
.lui-spinner.lg { width: 38px; height: 38px; border-width: 3px; }
.lui-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 0; color: var(--ink-3); font-size: var(--f-sub); }

.lui-skeleton {
    border-radius: 10px;
    background: linear-gradient(90deg, var(--soft) 25%, var(--line) 50%, var(--soft) 75%);
    background-size: 200% 100%;
    animation: lui-shimmer 1.3s ease-in-out infinite;
}
.lui-skeleton.line { height: 13px; }
.lui-skeleton.title { height: 18px; width: 55%; }
.lui-skeleton.avatar { width: 44px; height: 44px; border-radius: 50%; }
.lui-skeleton.card { height: 118px; border-radius: var(--r-lg); }

/* 状态提示条 */
.lui-notice {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: var(--f-sub); line-height: 1.55;
    background: var(--blue-tint); color: var(--blue);
}
.lui-notice .lui-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.lui-notice.success { background: var(--green-tint); color: var(--green); }
.lui-notice.warn { background: var(--amber-tint); color: var(--amber); }
.lui-notice.error { background: var(--red-tint); color: var(--red); }
.lui-notice .n-body { flex: 1; min-width: 0; }
.lui-notice .n-title { font-weight: 700; margin-bottom: 2px; }
.lui-notice details { margin-top: 6px; }
.lui-notice summary { font-weight: 600; cursor: pointer; outline: none; }
.lui-notice pre {
    white-space: pre-wrap; word-break: break-word;
    background: rgba(0,0,0,.06); border-radius: 8px; padding: 8px 10px;
    margin: 8px 0 0; font-size: var(--f-mini); line-height: 1.5;
    color: var(--ink-2);
}
:root[data-theme="dark"] .lui-notice pre { background: rgba(255,255,255,.07); }
.lui-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); display: inline-block; flex: none; }
.lui-status-dot.green { background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.lui-status-dot.amber { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-tint); }
.lui-status-dot.red { background: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.lui-status-dot.pulse { animation: lui-pulse 1.8s ease-in-out infinite; }

/* ---------- 12. 头像 ---------- */
.lui-avatar {
    border-radius: 50%; overflow: hidden; flex: none;
    background: var(--rose-tint); color: var(--rose);
    display: grid; place-items: center;
    font-weight: 650;
}
.lui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lui-avatar.s24 { width: 24px; height: 24px; font-size: 10px; }
.lui-avatar.s32 { width: 32px; height: 32px; font-size: 13px; }
.lui-avatar.s40 { width: 40px; height: 40px; font-size: 15px; }
.lui-avatar.s48 { width: 48px; height: 48px; font-size: 17px; }
.lui-avatar.s64 { width: 64px; height: 64px; font-size: 22px; }
.lui-avatar.ring { box-shadow: 0 0 0 2px var(--elev), 0 0 0 3.5px var(--rose-3); }

/* ---------- 13. 数据展示（监控仪表盘专用） ---------- */
.lui-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.lui-stat-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.lui-stat-grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .lui-stat-grid.c3, .lui-stat-grid.c4 { grid-template-columns: repeat(2, 1fr); } }
.lui-stat {
    background: var(--elev); border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    box-shadow: var(--sh-xs);
    display: flex; flex-direction: column; gap: 5px;
    min-width: 0;
}
.lui-stat .s-k { font-size: var(--f-mini); color: var(--ink-3); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.lui-stat .s-k .lui-icon { width: 14px; height: 14px; }
.lui-stat .s-v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.lui-stat .s-v small { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.lui-stat .s-sub { font-size: var(--f-caption); color: var(--ink-3); }
.lui-stat.accent { background: var(--grad-rose); border-color: transparent; color: #fff; box-shadow: var(--sh-rose-sm); }
.lui-stat.accent .s-k, .lui-stat.accent .s-v, .lui-stat.accent .s-sub { color: #fff; }
.lui-stat.accent .s-k { opacity: .85; }

/* 进度条 */
.lui-progress { height: 7px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.lui-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--grad-rose); transition: width .6s var(--ease); }
.lui-progress.green > i { background: var(--green); }
.lui-progress.amber > i { background: var(--amber); }
.lui-progress.red > i { background: var(--red); }

/* 评分环（安全评分） */
.lui-score-ring { position: relative; width: 108px; height: 108px; }
.lui-score-ring svg { transform: rotate(-90deg); }
.lui-score-ring circle { fill: none; stroke-width: 10; }
.lui-score-ring .r-bg { stroke: var(--soft); }
.lui-score-ring .r-fg { stroke: url(#luiRingGrad); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.lui-score-ring .r-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.lui-score-ring .r-num { font-size: 28px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; }
.lui-score-ring .r-grade { font-size: var(--f-caption); color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* 数据表（后台） */
.lui-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.lui-data-table { width: 100%; border-collapse: collapse; font-size: var(--f-sub); min-width: 420px; }
.lui-data-table th {
    text-align: left; font-weight: 600; font-size: var(--f-mini); color: var(--ink-3);
    padding: 10px 12px; background: var(--soft);
    white-space: nowrap;
}
.lui-data-table td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.lui-data-table tr:active td { background: var(--soft); }

/* 检查项行（安全扫描） */
.lui-check {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 0;
}
.lui-check + .lui-check { border-top: 1px solid var(--line); }
.lui-check .c-status { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.lui-check .c-status.pass { background: var(--green-tint); color: var(--green); }
.lui-check .c-status.fail { background: var(--red-tint); color: var(--red); }
.lui-check .c-status.warn { background: var(--amber-tint); color: var(--amber); }
.lui-check .c-status.unknown { background: var(--soft); color: var(--ink-3); }
.lui-check .c-status .lui-icon { width: 15px; height: 15px; }
.lui-check .c-body { flex: 1; min-width: 0; }
.lui-check .c-title { font-size: var(--f-body); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lui-check .c-detail { font-size: var(--f-mini); color: var(--ink-3); margin-top: 3px; line-height: 1.55; word-break: break-word; }
.lui-check .c-fix { font-size: var(--f-mini); color: var(--ink-2); margin-top: 6px; background: var(--soft); border-radius: 8px; padding: 7px 10px; }
.lui-check details summary { font-size: var(--f-mini); color: var(--rose); cursor: pointer; margin-top: 5px; }

/* 时间线 */
.lui-timeline { position: relative; padding-left: 22px; }
.lui-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.lui-tl-item { position: relative; padding-bottom: 18px; }
.lui-tl-item::before {
    content: ""; position: absolute; left: -20px; top: 5px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--rose); box-shadow: 0 0 0 3px var(--rose-tint);
}
.lui-tl-item .t-time { font-size: var(--f-caption); color: var(--ink-3); }
.lui-tl-item .t-text { font-size: var(--f-sub); margin-top: 2px; }

/* 简单条形图（纯 CSS） */
.lui-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.lui-bars .bar { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--grad-rose); min-height: 3px; opacity: .85; position: relative; }
.lui-bars .bar::after {
    content: attr(data-label); position: absolute; bottom: -18px; left: 0; right: 0;
    text-align: center; font-size: 9px; color: var(--ink-3);
}

/* ---------- 14. 媒体 ---------- */
.lui-photo {
    position: relative; border-radius: var(--r-md); overflow: hidden;
    aspect-ratio: 1;
    background: linear-gradient(100deg, var(--soft) 30%, var(--line) 50%, var(--soft) 70%);
    background-size: 200% 100%;
    animation: lui-photo-shimmer 1.4s ease-in-out infinite;
}
@keyframes lui-photo-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.lui-photo img, .lui-photo video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--soft); }
.lui-photo .ph-mask {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45));
}
.lui-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lui-media-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.lui-video-badge {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,.5); color: #fff;
    display: grid; place-items: center;
}
.lui-video-badge .lui-icon { width: 14px; height: 14px; }

/* 分割线 */
.lui-divider { height: 1px; background: var(--line); border: 0; margin: 14px 0; }

/* 文字工具 */
.lui-h1 { font-size: var(--f-h1); font-weight: 750; letter-spacing: -0.02em; }
.lui-h2 { font-size: var(--f-h2); font-weight: 700; letter-spacing: -0.015em; }
.lui-h3 { font-size: var(--f-h3); font-weight: 650; }
.lui-title { font-size: var(--f-title); font-weight: 650; }
.lui-body-text { font-size: var(--f-body); }
.lui-sub { font-size: var(--f-sub); color: var(--ink-2); }
.lui-mini { font-size: var(--f-mini); color: var(--ink-3); }
.lui-caption { font-size: var(--f-caption); color: var(--ink-3); letter-spacing: .04em; }
.lui-num { font-variant-numeric: tabular-nums; }
.lui-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lui-rose { color: var(--rose); }
.lui-2 { color: var(--ink-2); }
.lui-3 { color: var(--ink-3); }
.lui-center { text-align: center; }
.lui-mt-4 { margin-top: 4px; } .lui-mt-8 { margin-top: 8px; } .lui-mt-12 { margin-top: 12px; }
.lui-mt-16 { margin-top: 16px; } .lui-mt-24 { margin-top: 24px; }
.lui-mb-8 { margin-bottom: 8px; } .lui-mb-12 { margin-bottom: 12px; } .lui-mb-16 { margin-bottom: 16px; }
.lui-gap-6 { gap: 6px; } .lui-gap-10 { gap: 10px; } .lui-gap-16 { gap: 16px; }

/* 大屏适配（用户端在平板/桌面呈现为居中小手机宽度，不做拉伸；管理员后台铺满） */
@media (min-width: 640px) {
    .lui-shell { padding-left: 20px; padding-right: 20px; }
}

/* ---------- 15. 动画 ---------- */
@keyframes lui-spin { to { transform: rotate(360deg); } }
@keyframes lui-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes lui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lui-sheet-up { from { transform: translateY(26px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@keyframes lui-pop { from { transform: scale(.94) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes lui-fade-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes lui-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.lui-fade-up { animation: lui-fade-up .35s var(--ease) both; }
.rotate-spin { animation: lui-spin 1s linear infinite; }

/* ---------- 16. 文件选择（替代原生丑按钮） ---------- */
.lui-filepick { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); background: var(--rose-tint); color: var(--ink-2); font-size: var(--f-sub); font-weight: 600; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.lui-filepick:hover { border-color: var(--rose); }
.lui-filepick:active { background: var(--rose-tint-2); }
.lui-filepick input[type=file] { display: none; }
.lui-filepick .fp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lui-filepick .lui-icon { color: var(--rose); flex: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 地图自定义标记：去除 Leaflet 默认 PNG 依赖 */
.lui-map-pin { background: transparent; border: none; }
.lui-map-pin svg { display: block; filter: drop-shadow(0 3px 4px rgba(176,52,92,.35)); }

/* 管理后台全屏覆盖：内层壳负责纵向滚动（v2 缺这条导致内容超出无法滚动） */
#adminPanel.lui-overlay { overflow: hidden; }
#adminPanel .lui-shell-admin { overflow-y: auto; max-height: 100dvh; min-height: 100%; -webkit-overflow-scrolling: touch; }

/* ============================================================================
   登录页背景播放器（login-bg）v20261027b
   ============================================================================ */
.login-bg-player { position: absolute; inset: 0; overflow: hidden; z-index: 0; border-radius: inherit; pointer-events: none; }
#loginPage > .login-bg-player ~ .login-inner,
#loginPage > .login-bg-player ~ .lui-shell { position: relative; z-index: 1; }
#loginBgPlayer .lbg-layer, .lbg-preview .lbg-layer {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.2s ease; will-change: opacity;
}
#loginBgPlayer .lbg-layer.active, .lbg-preview .lbg-layer.active { opacity: 1; }
#loginBgPlayer .lbg-photo.dynamic, .lbg-preview .lbg-photo.dynamic { animation: lbgKenBurns 18s ease-in-out infinite alternate; }
#loginBgPlayer video.lbg-video, #loginBgPlayer canvas.lbg-video, .lbg-preview video.lbg-video, .lbg-preview canvas.lbg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; z-index: 1; }
#loginBgPlayer video.lbg-video.active, #loginBgPlayer canvas.lbg-video.active, .lbg-preview video.lbg-video.active, .lbg-preview canvas.lbg-video.active { opacity: 1; }
#loginBgPlayer .lbg-overlay, .lbg-preview .lbg-overlay { position: absolute; inset: 0; pointer-events: none; }
@keyframes lbgKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(1.5%, -1.5%); }
}

/* 模板 t1：全屏沉浸 + 底部/中心渐变蒙版（默认） */
#loginPage.lbg-t1 .lbg-overlay { background: linear-gradient(180deg, rgba(20,10,16,0.10) 0%, rgba(20,10,16,0.30) 55%, rgba(20,10,16,0.62) 100%); }
#loginPage.lbg-t1 .login-inner, #loginPage.lbg-t1 > .lui-shell { filter: none; }
#loginPage.lbg-t1 .lui-card.hero, #loginPage.lbg-t1 .lui-card.login-box { background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--sh-md); }

/* 模板 t2：毛玻璃沉浸（背景全铺 + 全卡片磨砂） */
#loginPage.lbg-t2 .lbg-overlay { background: linear-gradient(160deg, rgba(20,10,16,0.18) 0%, rgba(20,10,16,0.42) 100%); }
#loginPage.lbg-t2 .lui-card.hero, #loginPage.lbg-t2 .lui-card.login-box { background: rgba(255,255,255,0.72); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--sh-lg); }

/* 模板 t3：景深（背景高斯模糊 + 清晰小卡） */
#loginPage.lbg-t3 .lbg-layer, #loginPage.lbg-t3 .lbg-video { filter: blur(22px) brightness(0.85); transform: scale(1.12); }
#loginPage.lbg-t3 .lbg-overlay { background: rgba(20,10,16,0.16); }
#loginPage.lbg-t3 .lui-card.hero, #loginPage.lbg-t3 .lui-card.login-box { background: rgba(255,255,255,0.96); box-shadow: var(--sh-md); }

/* 模板 t4：极简（浅蒙版 + 卡片轻透） */
#loginPage.lbg-t4 .lbg-overlay { background: linear-gradient(180deg, rgba(246,244,243,0.30) 0%, rgba(246,244,243,0.10) 45%, rgba(20,10,16,0.34) 100%); }
#loginPage.lbg-t4 .lui-card.hero, #loginPage.lbg-t4 .lui-card.login-box { background: rgba(255,255,255,0.85); box-shadow: var(--sh-sm); }

/* 音乐/视频声音提示角标（首次交互后才会出声） */
.lbg-sound-hint { position: absolute; right: 14px; bottom: 12px; z-index: 2; font-size: 11px; color: rgba(255,255,255,0.85); background: rgba(20,10,16,0.4); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); pointer-events: none; letter-spacing: 0.04em; }

/* ---------- 登录页背景编辑器 ---------- */
.lbg-tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lbg-tpl { border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 10px; cursor: pointer; text-align: center; transition: all var(--t-fast) var(--ease); background: var(--elev); }
.lbg-tpl.active { border-color: var(--rose); background: var(--rose-tint); box-shadow: var(--sh-rose-sm); }
.lbg-tpl .t-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.lbg-tpl .t-desc { font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.lbg-tpl .t-prev { height: 46px; border-radius: 8px; margin-bottom: 8px; background-size: cover; background-position: center; position: relative; overflow: hidden; border: 1px solid var(--line); }
.lbg-tpl .t-prev::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,16,0.12), rgba(20,10,16,0.5)); }

.lbg-media-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lbg-media-row:last-child { border-bottom: none; }
.lbg-thumb { width: 52px; height: 52px; border-radius: var(--r-xs); object-fit: cover; background: var(--soft); flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.lbg-thumb img, .lbg-thumb video { width: 100%; height: 100%; object-fit: cover; }
.lbg-media-main { flex: 1; min-width: 0; }
.lbg-actions { display: flex; align-items: center; gap: 4px; flex: none; }

/* 预览浮层（z-index 高于设置弹层 2000，否则点预览被弹层遮挡） */
.lbg-preview { position: fixed; inset: 0; z-index: 2500; background: #000; overflow: hidden; }
.lbg-preview .lbg-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.lbg-preview .lbg-preview-title { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255,255,255,0.9); font-size: 13px; letter-spacing: 0.06em; background: rgba(20,10,16,0.45); padding: 6px 16px; border-radius: 999px; backdrop-filter: blur(6px); }

/* 预览浮层模板效果（与登录页同一套） */
.lbg-preview.lbg-t1 .lbg-overlay { background: linear-gradient(180deg, rgba(20,10,16,0.10) 0%, rgba(20,10,16,0.30) 55%, rgba(20,10,16,0.62) 100%); }
.lbg-preview.lbg-t2 .lbg-overlay { background: linear-gradient(160deg, rgba(20,10,16,0.18) 0%, rgba(20,10,16,0.42) 100%); }
.lbg-preview.lbg-t3 .lbg-layer, .lbg-preview.lbg-t3 .lbg-video { filter: blur(22px) brightness(0.85); transform: scale(1.12); }
.lbg-preview.lbg-t3 .lbg-overlay { background: rgba(20,10,16,0.16); }
.lbg-preview.lbg-t4 .lbg-overlay { background: linear-gradient(180deg, rgba(246,244,243,0.30) 0%, rgba(246,244,243,0.10) 45%, rgba(20,10,16,0.34) 100%); }

/* 登录页背景：加载提示 + 空列表提示（避免黑屏无反馈） */
#loginBgPlayer .lbg-status, .lbg-preview .lbg-status {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85); font-size: 13px; letter-spacing: 0.08em;
    background: linear-gradient(180deg, rgba(20,10,16,0.35), rgba(20,10,16,0.55));
    z-index: 2; text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
#loginBgPlayer .lbg-empty, .lbg-preview .lbg-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-align: center; color: rgba(255,255,255,0.9); font-size: 14px; line-height: 1.9;
    background: linear-gradient(160deg, #5c2b40, #2a1420);
    z-index: 2; padding: 24px;
}

/* ============ 登录页透明无卡片风（两版共用） ============ */
.lbg-inner {
    width: 100%; max-width: 400px; display: flex; flex-direction: column;
    gap: 14px; padding: 30px 0 56px; margin: auto 0; position: relative; z-index: 1;
}
.lbg-brand { text-align: center; padding: 26px 20px 4px; }
.lbg-brand-heart {
    width: 64px; height: 64px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #fff; box-shadow: 0 10px 34px rgba(0,0,0,.18);
}
.lbg-brand-name {
    font-size: 27px; font-weight: 700; letter-spacing: .14em; color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.3);
    font-family: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
.lbg-brand-sub { margin-top: 9px; font-size: 12.5px; letter-spacing: .34em; color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.lbg-form { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; margin-top: 8px; }
.lbg-input {
    width: 100%; height: 50px; padding: 0 18px; box-sizing: border-box;
    border-radius: 16px; font-size: 15px; letter-spacing: .05em; color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 22px rgba(0,0,0,.08);
    outline: none; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    -webkit-appearance: none; appearance: none;
}
.lbg-input::placeholder { color: rgba(255,255,255,.62); }
.lbg-input:focus { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 4px rgba(255,255,255,.12); }
.lbg-login-btn {
    width: 100%; height: 50px; border: none; border-radius: 16px;
    background: linear-gradient(135deg, #ff8fab, #ff5d8f);
    color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .32em; text-indent: .32em;
    cursor: pointer; box-shadow: 0 10px 28px rgba(255,93,143,.38);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    -webkit-appearance: none; appearance: none;
}
.lbg-login-btn:active { transform: scale(.97); }
.lbg-login-btn:disabled { opacity: .55; }
.lbg-reg { text-align: center; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.lbg-reg a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.lbg-version { position: relative; z-index: 1; text-align: center; margin-top: 18px; font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.52); text-shadow: 0 1px 6px rgba(0,0,0,.3); }

/* 表单区域底部渐变兜底：任何模板/画面下登录控件都可读（解决文字遮挡） */
#loginPage .login-inner::before, #loginPage .lbg-inner::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80%; z-index: -1;
    background: linear-gradient(180deg, rgba(20,10,16,0) 0%, rgba(20,10,16,.34) 55%, rgba(20,10,16,.68) 100%);
    pointer-events: none;
}
/* 声音提示角标：靠右下且不与表单重叠（表单区已有底部渐变，角标用深底保证可读） */
#loginBgPlayer .lbg-sound-hint, .lbg-preview .lbg-sound-hint {
    bottom: 18px; right: 14px; background: rgba(20,10,16,.42);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 999px; padding: 6px 12px; color: rgba(255,255,255,.92); font-size: 11px;
    letter-spacing: .06em; z-index: 3;
}