/* ============================================================
 * 风格（皮肤）：<html data-skin="navy|ios|metal|fresh|sunset|noir">
 * 与原有的浅色/深色模式（data-theme）叠加使用；navy 为原始风格，无覆盖
 * 加载顺序必须在 app.css / admin.css 之后
 * ========================================================== */

/* ---------- 金属质感 metal ---------- */
:root[data-skin="metal"]{
  --brand:#4a5868; --brand-ink:#343f4b; --brand-soft:#e3e7ec;
  --accent:#c3ccd5; --accent-ink:#7d8a97; --info:#4a5868; --info-bg:#e3e7ec;
  --navy:#22272e; --navy-2:#2d333b; --on-navy:#eef1f4; --on-navy-muted:#aab3bd; --on-navy-line:#3a414a;
  --sidebar:#1f242a; --sidebar-2:#2a3038; --sidebar-fg:#d5dbe1; --sidebar-muted:#8a949f; --sidebar-line:#343b44;
}
:root[data-skin="metal"][data-theme="light"]{ --bg:#e6e9ed; --surface:#fbfbfc; --surface-2:#f1f3f5; --surface-3:#e4e7eb; --line:#d3d8de; --fg:#1d2329; --muted:#5a6470; }
@media (prefers-color-scheme:light){ :root[data-skin="metal"]:not([data-theme="dark"]){ --bg:#e6e9ed; --surface:#fbfbfc; --surface-2:#f1f3f5; --surface-3:#e4e7eb; --line:#d3d8de; --fg:#1d2329; --muted:#5a6470; } }
:root[data-skin="metal"][data-theme="dark"]{ --bg:#121417; --surface:#1b1e22; --surface-2:#16191c; --surface-3:#22262b; --line:#2c3137; --brand:#8fa0b3; --brand-ink:#b3c0ce; --brand-soft:#2a323b; --info:#8fa0b3; --info-bg:#2a323b; }
@media (prefers-color-scheme:dark){ :root[data-skin="metal"]:not([data-theme="light"]){ --bg:#121417; --surface:#1b1e22; --surface-2:#16191c; --surface-3:#22262b; --line:#2c3137; --brand:#8fa0b3; --brand-ink:#b3c0ce; --brand-soft:#2a323b; --info:#8fa0b3; --info-bg:#2a323b; } }
/* 金属光泽：拉丝页头、渐变按钮 */
:root[data-skin="metal"] .hero,:root[data-skin="metal"] footer{background:linear-gradient(135deg,#2d333b 0%,#1b1f24 55%,#343b44 100%)}
:root[data-skin="metal"] .hero .grid-bg{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mask-image:none;opacity:1}
:root[data-skin="metal"] .btn-pri{background:linear-gradient(180deg,#6f7e8f 0%,#4a5868 55%,#3b4652 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.25);border:1px solid #3b4652}
:root[data-skin="metal"] .btn-pri:hover{background:linear-gradient(180deg,#7d8c9d 0%,#56657a 55%,#45515f 100%)}
:root[data-skin="metal"] .sidebar{background:linear-gradient(180deg,#262b32,#1a1e23)}

/* ---------- iOS 风格 ios ---------- */
:root[data-skin="ios"]{
  --f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue","Noto Sans SC",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue","Noto Sans SC",sans-serif;
  --radius:16px;
  --bg:#f2f2f7; --surface:#ffffff; --surface-2:#f2f2f7; --surface-3:#e5e5ea; --line:#e2e2e7;
  --fg:#1c1c1e; --muted:#6c6c70; --faint:#8e8e93;
  --brand:#007aff; --brand-ink:#0062cc; --brand-soft:#e5f0ff;
  --accent:#5ac8fa; --accent-ink:#0a84ff; --info:#007aff; --info-bg:#e5f0ff;
  --good:#34c759; --good-bg:#e6f8ec; --warn:#ff9500; --warn-bg:#fff3e0; --crit:#ff3b30; --crit-bg:#ffe9e7; --purple:#af52de; --purple-bg:#f5e9fb;
  --navy:#1c1c1e; --navy-2:#2c2c2e; --on-navy:#ffffff; --on-navy-muted:#c7c7cc; --on-navy-line:rgba(255,255,255,.18);
  --sidebar:#f7f7fa; --sidebar-2:#e9e9ee; --sidebar-fg:#1c1c1e; --sidebar-muted:#8e8e93; --sidebar-line:#e2e2e7;
  --shadow:0 1px 3px rgba(0,0,0,.05),0 8px 24px -16px rgba(0,0,0,.14);
  --shadow-lg:0 22px 60px -26px rgba(0,0,0,.28);
}
:root[data-skin="ios"][data-theme="dark"]{ color-scheme:dark;
  --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c; --line:#38383a; --fg:#ffffff; --muted:#98989f; --faint:#6e6e73;
  --brand:#0a84ff; --brand-ink:#409cff; --brand-soft:#0a2a4d; --info:#0a84ff; --info-bg:#0a2a4d;
  --good:#30d158; --good-bg:#0f2e18; --warn:#ff9f0a; --warn-bg:#33240a; --crit:#ff453a; --crit-bg:#3a1513;
  --sidebar:#1c1c1e; --sidebar-2:#2c2c2e; --sidebar-fg:#ffffff; --sidebar-muted:#8e8e93; --sidebar-line:#38383a; }
@media (prefers-color-scheme:dark){ :root[data-skin="ios"]:not([data-theme="light"]){ color-scheme:dark;
  --bg:#000000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c; --line:#38383a; --fg:#ffffff; --muted:#98989f; --faint:#6e6e73;
  --brand:#0a84ff; --brand-ink:#409cff; --brand-soft:#0a2a4d; --info:#0a84ff; --info-bg:#0a2a4d;
  --good:#30d158; --good-bg:#0f2e18; --warn:#ff9f0a; --warn-bg:#33240a; --crit:#ff453a; --crit-bg:#3a1513;
  --sidebar:#1c1c1e; --sidebar-2:#2c2c2e; --sidebar-fg:#ffffff; --sidebar-muted:#8e8e93; --sidebar-line:#38383a; } }
/* iOS：蓝紫渐变首屏、圆角按钮、浅色侧栏 + 蓝色选中条 */
:root[data-skin="ios"] .hero{background:linear-gradient(160deg,#0a84ff 0%,#5e5ce6 100%)}
:root[data-skin="ios"] .hero::before{background:radial-gradient(800px 380px at 85% -10%,rgba(255,255,255,.28),transparent 60%)}
:root[data-skin="ios"] .hero .grid-bg{display:none}
:root[data-skin="ios"] .hero h1 b{background:linear-gradient(120deg,#ffffff,#d6ecff);-webkit-background-clip:text;background-clip:text}
:root[data-skin="ios"] .btn{border-radius:12px}
:root[data-skin="ios"] .sb-brand .nm{color:var(--fg)}
:root[data-skin="ios"] .sb-item{margin:1px 10px;padding-left:36px;border-radius:10px}
:root[data-skin="ios"] .sb-item:hover{color:var(--fg)}
:root[data-skin="ios"] .sb-item.on{background:var(--brand);color:#fff}
:root[data-skin="ios"] .sb-item.on::before{display:none}
:root[data-skin="ios"] .sb-item .cnt{background:rgba(127,127,127,.14);color:var(--brand)}
:root[data-skin="ios"] .sb-item.on .cnt{background:rgba(255,255,255,.25);color:#fff}

/* ---------- 清爽白绿 fresh ---------- */
:root[data-skin="fresh"]{
  --brand:#0f9d6b; --brand-ink:#0b7d55; --brand-soft:#dcf5ea;
  --accent:#0ea5e9; --accent-ink:#0284c7; --info:#0f9d6b; --info-bg:#dcf5ea;
  --navy:#0b3b2e; --navy-2:#0f4a3a; --on-navy:#ecfdf5; --on-navy-muted:#9fd3bf; --on-navy-line:#1a5a47;
  --sidebar:#0a3329; --sidebar-2:#104235; --sidebar-fg:#d4f1e5; --sidebar-muted:#86bba7; --sidebar-line:#185242;
}
:root[data-skin="fresh"][data-theme="light"]{ --bg:#f1f8f4; --surface-2:#f5faf7; --surface-3:#e6f2ec; --line:#d8ebe1; }
@media (prefers-color-scheme:light){ :root[data-skin="fresh"]:not([data-theme="dark"]){ --bg:#f1f8f4; --surface-2:#f5faf7; --surface-3:#e6f2ec; --line:#d8ebe1; } }
:root[data-skin="fresh"][data-theme="dark"]{ --brand:#34d399; --brand-ink:#6ee7b7; --brand-soft:#0f2e24; --info:#34d399; --info-bg:#0f2e24; --accent:#38bdf8; }
@media (prefers-color-scheme:dark){ :root[data-skin="fresh"]:not([data-theme="light"]){ --brand:#34d399; --brand-ink:#6ee7b7; --brand-soft:#0f2e24; --info:#34d399; --info-bg:#0f2e24; --accent:#38bdf8; } }

/* ---------- 暖橙活力 sunset ---------- */
:root[data-skin="sunset"]{
  --brand:#ea580c; --brand-ink:#c2410c; --brand-soft:#ffe8d8;
  --accent:#f5b301; --accent-ink:#b98400; --info:#ea580c; --info-bg:#ffe8d8;
  --navy:#3b1a0b; --navy-2:#52260f; --on-navy:#fff3ea; --on-navy-muted:#e0b79c; --on-navy-line:#6b3518;
  --sidebar:#3a1a0b; --sidebar-2:#4b2210; --sidebar-fg:#f6dccb; --sidebar-muted:#c2957a; --sidebar-line:#5e2f16;
}
:root[data-skin="sunset"][data-theme="light"]{ --bg:#fbf3ec; --surface-2:#fdf6f0; --surface-3:#f8eadf; --line:#f0dfd0; }
@media (prefers-color-scheme:light){ :root[data-skin="sunset"]:not([data-theme="dark"]){ --bg:#fbf3ec; --surface-2:#fdf6f0; --surface-3:#f8eadf; --line:#f0dfd0; } }
:root[data-skin="sunset"][data-theme="dark"]{ --brand:#fb8a45; --brand-ink:#fdab75; --brand-soft:#3a1e0e; --info:#fb8a45; --info-bg:#3a1e0e; --accent:#fbbf24; }
@media (prefers-color-scheme:dark){ :root[data-skin="sunset"]:not([data-theme="light"]){ --brand:#fb8a45; --brand-ink:#fdab75; --brand-soft:#3a1e0e; --info:#fb8a45; --info-bg:#3a1e0e; --accent:#fbbf24; } }

/* ---------- 暗夜黑金 noir（固定深色）---------- */
:root[data-skin="noir"]{
  color-scheme:dark;
  --bg:#0c0c0e; --surface:#16161a; --surface-2:#121215; --surface-3:#1d1d22;
  --fg:#f2ede1; --muted:#a8a191; --faint:#7a7466; --line:#2a2823;
  --brand:#c9a24a; --brand-ink:#e0bd6a; --brand-soft:#2a2414;
  --accent:#e0bd6a; --accent-ink:#c9a24a; --info:#c9a24a; --info-bg:#2a2414;
  --navy:#08080a; --navy-2:#111114; --on-navy:#f2ede1; --on-navy-muted:#a8a191; --on-navy-line:#2a2823;
  --sidebar:#09090b; --sidebar-2:#111114; --sidebar-fg:#e8e1cf; --sidebar-muted:#8a8374; --sidebar-line:#24221d;
  --good:#5cbf7a; --good-bg:#14261a; --warn:#e0a13a; --warn-bg:#2d2310; --crit:#ef6a6a; --crit-bg:#2e1616;
  --purple:#b39dff; --purple-bg:#211b33;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 24px 70px -28px rgba(0,0,0,.85);
}

/* ---------- 风格切换菜单 ---------- */
.skin-wrap{position:relative;display:inline-block}
.skin-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:200;min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:none}
.skin-menu.open{display:block}
.skin-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;color:var(--fg);font:inherit;font-size:.86rem;cursor:pointer;text-align:left}
.skin-menu button:hover{background:var(--surface-2)}
.skin-menu button.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.skin-dot{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.skin-menu .skin-tip{font-size:.72rem;color:var(--faint);padding:4px 10px 2px}