/* 墨流主题 token 层：只定义主题变量和外壳覆盖，业务数据口径不在这里改。 */
:root {
    --ink-paper: #f5f2ea;
    --ink-paper-warm: #e8e1d2;
    --ink-paper-deep: #e8e1d2;
    --ink-flow-paper: #f5f2ea;
    --ink-paper-soft: #fbfaf5;
    --ink-paper-line: #e6dfd1;
    --ink-deep: rgba(12, 13, 13, .58);
    --ink-mid: rgba(45, 50, 55, .34);
    --ink-bluegray: rgba(55, 70, 88, .22);
    --ink-sepia: rgba(104, 82, 52, .12);
    --ink-violetgray: rgba(82, 72, 105, .10);
    --ink-text: #1c1a17;
    --ink-text-soft: #5d574d;
    --ink-wash: rgba(28, 26, 23, .055);
    --ink-shadow: 0 18px 46px -30px rgba(28, 26, 23, .28);
    --ink-font-serif: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
    --ink-font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    --ink-flow-mask: rgba(245, 242, 234, .20);
    --ink-flow-mask-dark: rgba(22, 20, 17, .38);
}

body {
    font-family: var(--ink-font-sans);
}

.brand-name,
.brand-title {
    font-family: var(--ink-font-serif);
}

.brand-name {
    letter-spacing: 0;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--text-2);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.theme-toggle:active {
    transform: translateY(0) scale(.98);
}

.login-bg {
    background:
        radial-gradient(760px 520px at 24% 12%, rgba(245, 242, 234, .08), transparent 62%),
        #070b12;
}

.login-brand {
    background:
        radial-gradient(520px 420px at 26% 18%, rgba(245, 242, 234, .09), transparent 62%),
        linear-gradient(160deg, #17130f 0%, #0d0c0a 100%);
}

.brand-logo {
    background: linear-gradient(145deg, #36302a, var(--ink-text));
    box-shadow: 0 14px 32px rgba(28, 26, 23, .42);
}

.brand-tag {
    color: rgba(245, 242, 234, .58);
}

html[data-theme="light"] {
    --bg: var(--ink-paper);
    --panel: #ffffff;
    --panel-2: var(--ink-paper-soft);
    --line: var(--ink-paper-line);
    --line-2: #d9d0bf;
    --text: var(--ink-text);
    --text-2: var(--ink-text-soft);
    --muted: #968b7a;
    --shadow: var(--ink-shadow);
}

html[data-theme="light"] body {
    background:
        radial-gradient(900px 520px at 80% -10%, rgba(28, 26, 23, .035), transparent 62%),
        linear-gradient(180deg, var(--ink-paper), #f7f3ea);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar,
html[data-theme="light"] .filters,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .home-card,
html[data-theme="light"] .kpi-card {
    box-shadow: var(--ink-shadow);
}

html[data-theme="dark"] {
    --bg: #161411;
    --panel: #201d19;
    --panel-2: #28241f;
    --line: #39332b;
    --line-2: #463f35;
    --text: var(--ink-paper);
    --text-2: #d8d0bf;
    --muted: #9f9686;
    --accent: #d6b36a;
    --teal: #83b8a5;
    --purple: #b9a6d8;
    --amber: #d7a14e;
    --green: #86c18d;
    --orange: #d7a14e;
    --red: #e56f5f;
    --shadow: 0 20px 52px -34px rgba(0, 0, 0, .76);
    --stripe: rgba(245, 242, 234, .035);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(900px 560px at 86% -12%, rgba(245, 242, 234, .065), transparent 60%),
        radial-gradient(820px 520px at 8% 4%, rgba(214, 179, 106, .06), transparent 58%),
        #161411;
}

html[data-theme="dark"] body:not(.ink-atmosphere)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .08;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(245, 242, 234, .09), transparent 24%),
        linear-gradient(120deg, transparent, rgba(245, 242, 234, .025), transparent);
}

body.ink-atmosphere {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow-x: hidden;
    background:
        radial-gradient(920px 620px at 11% 18%, rgba(12, 13, 13, .070), transparent 63%),
        radial-gradient(860px 520px at 86% 7%, rgba(55, 70, 88, .066), transparent 64%),
        radial-gradient(760px 480px at 18% 92%, rgba(104, 82, 52, .070), transparent 66%),
        repeating-linear-gradient(87deg, rgba(104, 82, 52, .026) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(8deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 14px),
        linear-gradient(180deg, var(--ink-flow-paper), #f8f4ea 52%, var(--ink-paper-deep));
}

body.login-bg.ink-atmosphere,
html[data-theme="light"] body.ink-atmosphere {
    background:
        radial-gradient(980px 660px at 10% 20%, rgba(12, 13, 13, .075), transparent 64%),
        radial-gradient(900px 540px at 82% 8%, rgba(55, 70, 88, .070), transparent 65%),
        radial-gradient(780px 500px at 18% 94%, rgba(104, 82, 52, .072), transparent 66%),
        radial-gradient(620px 420px at 78% 80%, rgba(82, 72, 105, .045), transparent 68%),
        repeating-linear-gradient(88deg, rgba(104, 82, 52, .026) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(7deg, rgba(255, 255, 255, .20) 0 1px, transparent 1px 15px),
        linear-gradient(180deg, var(--ink-flow-paper), #f8f4ea 52%, var(--ink-paper-deep));
}

body.ink-atmosphere::before,
body.ink-atmosphere::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.ink-atmosphere::before {
    z-index: 0;
    opacity: .88;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(48, 42, 34, .052) 0 1px, transparent 1.8px),
        radial-gradient(circle at 72% 63%, rgba(48, 42, 34, .045) 0 1px, transparent 1.9px),
        radial-gradient(circle at 42% 78%, rgba(104, 82, 52, .035) 0 1px, transparent 1.8px),
        repeating-linear-gradient(82deg, rgba(64, 55, 42, .026) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(8deg, rgba(255, 255, 255, .20) 0 1px, transparent 1px 12px);
    background-size: 58px 58px, 43px 43px, 61px 61px, 100% 100%, 100% 100%;
}

body.ink-atmosphere::after {
    z-index: 1;
    opacity: .34;
    mix-blend-mode: multiply;
    background:
        linear-gradient(112deg, transparent 0 18%, rgba(55, 70, 88, .040) 36%, transparent 58%),
        radial-gradient(circle at 18% 22%, rgba(48, 42, 34, .058) 0 1px, transparent 1.7px),
        radial-gradient(circle at 72% 63%, rgba(48, 42, 34, .046) 0 1px, transparent 1.8px),
        repeating-linear-gradient(82deg, rgba(64, 55, 42, .028) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(8deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 11px);
    background-size: 100% 100%, 58px 58px, 43px 43px, 100% 100%, 100% 100%;
}

body.ink-atmosphere.ink-flow-active::before {
    opacity: .48;
}

.ink-flow-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background: var(--ink-flow-paper);
    mix-blend-mode: normal;
    filter: none;
}

.ink-brush-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    mix-blend-mode: multiply;
}

.ink-brush-dashboard {
    opacity: .58;
}

.ink-brush-login {
    opacity: .92;
}

body.ink-atmosphere > .app,
body.ink-atmosphere > .login-card {
    position: relative;
    z-index: 2;
}

html.ink-flow-static body.ink-atmosphere .ink-flow-canvas,
body.ink-atmosphere.ink-flow-paused .ink-flow-canvas {
    opacity: 0;
}

body.login-bg.ink-atmosphere .login-card {
    background: rgba(10, 14, 22, .90);
    border-color: rgba(244, 240, 231, .16);
    box-shadow: 0 34px 88px rgba(7, 9, 13, .62), 0 0 0 1px rgba(255, 255, 255, .035);
}

body.login-bg.ink-atmosphere .login-brand {
    background:
        radial-gradient(520px 420px at 20% 18%, rgba(244, 240, 231, .110), transparent 62%),
        radial-gradient(520px 360px at 88% 76%, rgba(55, 70, 88, .160), transparent 66%),
        linear-gradient(160deg, rgba(16, 19, 24, .82), rgba(5, 7, 12, .88));
}

body.login-bg.ink-atmosphere .login-form {
    background: rgba(13, 22, 36, .88);
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    body.login-bg.ink-atmosphere .login-card {
        -webkit-backdrop-filter: saturate(120%) blur(2px);
        backdrop-filter: saturate(120%) blur(2px);
    }
}

html[data-theme="dark"] body.ink-atmosphere,
html[data-theme="dark"] body.login-bg.ink-atmosphere {
    background:
        radial-gradient(900px 560px at 86% -12%, rgba(245, 242, 234, .052), transparent 60%),
        radial-gradient(820px 520px at 8% 4%, rgba(214, 179, 106, .055), transparent 58%),
        #161411;
}

html[data-theme="dark"] body.ink-atmosphere::before {
    opacity: .18;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(245, 242, 234, .08), transparent 24%),
        radial-gradient(circle at 76% 64%, rgba(214, 179, 106, .07), transparent 28%),
        linear-gradient(120deg, transparent, rgba(245, 242, 234, .026), transparent);
}

html[data-theme="dark"] body.ink-atmosphere::after {
    background: var(--ink-flow-mask-dark);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .home-card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .login-form {
    background: var(--panel);
    border-color: var(--line);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .cn-date {
    background: var(--panel-2);
    color: var(--text);
    border-color: var(--line);
}

html[data-theme="dark"] .top-btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .cmdk-btn {
    background: var(--panel-2);
    color: var(--text-2);
    border-color: var(--line);
}

html[data-theme="dark"] .top-btn.primary,
html[data-theme="dark"] button#btnApply {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink-text);
}

html[data-theme="dark"] .chart-empty,
html[data-theme="dark"] .muted {
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}